/* /notes — index and article template. Loaded AFTER base.css, like hire/resume/leak.
   Additive only: nothing here redefines a base.css token, so /notes cannot drift
   the way styles.css:2 drifted (it redeclares the whole palette after base.css).

   Long-form reading is a different problem from a landing page, and exactly three
   things change for it. Everything else is the shipped system.
     1. The measure narrows from --measure 38em to 30em.
        Measured, not asserted: IBM Plex Sans 400 latin has a frequency-weighted
        average advance of 443.4/1000 em over running English prose including the
        space (space 236, 'n' 568, '0' 600, unitsPerEm 1000). So 38em = 86
        characters per line and 30em = 68. 86 is past the top of the 45-75 band;
        68 sits on it.
     2. The leading opens from 1.6 (base.css:24) to 1.68. IBM Plex Sans has a
        large x-height (516/1000 = .516 vs Georgia's .484); a large x-height at a
        68-character measure wants more leading, not less.
     3. Body text runs at full --cream. The landing pages set prose to
        opacity:.92 (hire.css:51,77,105). Over --ink that flattens to #E0DDD0 and
        drops contrast 12.11 -> 10.46. Still AA, but there is no argument for
        paying it across 2,000 words to make a four-line paragraph sit back.

   NOT changed, deliberately: the family. Body stays IBM Plex Sans. See the note
   above .note{} for why Instrument Serif is wrong for this job. */

:root{
  /* Reading scale. Local to /notes, named to drop into SPEC.md 3.1's --t-* set
     with no rename the day that scale ships. A shallow ~1.33 ratio, on purpose:
     an article needs three legible levels, not a crescendo. 19 -> 25 -> 34 -> 45. */
  --t-read:clamp(17px,.42vw + 15.36px,19px);     /* 17 at 390w, 19 from 866w up  */
  --t-read-lead:clamp(19px,.62vw + 16.6px,23px); /* the standfirst paragraph     */
  --t-note-h1:clamp(30px,2.1vw + 21.8px,45px);
  --t-note-h2:clamp(25px,1.2vw + 20.3px,34px);
  --t-note-h3:clamp(20px,.6vw + 17.7px,25px);
  --t-quote:clamp(21px,1vw + 17.8px,28px);
  --t-fine:15px;                                 /* captions. Fixed: notation
                                                    does not scale.             */
  --t-micro:12.5px;                              /* footnotes, stamps, meta     */
  --lh-read:1.68;
  --col:30em;      /* 68 characters at any size, because em tracks font-size     */
  /* The extra a figure may take on EACH side of the column.
     NOT a flat 5em. CSS grid maximises tracks by distributing free space evenly
     up to each track's growth limit, so a flat 5em escape wins its 95px at 390
     before the text track gets anything: measured in-engine, the reading column
     collapsed to 180px / 24 characters. This opens the escape only out of space
     the text column is not using — 0 below 900, full 5em from 1090 up, linear
     between, so figures never jump at a breakpoint. */
  --escape:clamp(0px,calc((100vw - 900px) / 2),5em);
  --r:4px;         /* SPEC 3.3: one radius                                       */
}

/* ---------------------------------------------------------------------------
   GRADE VOCABULARY — three aliases, zero risk.

   base.css:98-100 defines holdout / derived / reported. Those three words are
   right for a results figure and wrong for an argument, so /notes adds three
   aliases that share the SAME three rule weights. The axis is unchanged and it
   is a single axis: HOW CLOSE IS THIS TO THE THING ITSELF.

     2px gold    primary  — I hold the source. An export, a raw table, a log.
                            (= holdout: a control group IS the primary source
                            for a causal claim.)
     1px solid   derived  — arithmetic on a primary source, stated in the piece.
     1px dashed  cited    — someone else published it. Linked, denominator named.
                            (= reported: the business told me.)

   This also fills the empty top rung. [data-grade="holdout"] is used zero times
   on the live site today (index.html:65-68 are two derived and two reported),
   and a grading system whose best band is never occupied invites the question.
   "I hold the export" is a claim Andrew can make honestly and often on /notes.
   "Measured against a holdout" is one he cannot — see NUMBERS.md.

   Put these three lines in base.css, next to the existing block, NOT here, so
   the vocabulary stays in one file. Repeated here only so /notes works if the
   base.css edit lands second.
   --------------------------------------------------------------------------- */

/* A stamp inside a build-generated <figcaption> needs a direct parent carrying
   the attribute, because base.css uses the child combinator. assets.json can
   author <span data-grade="derived"><span class="stamp">..</span></span> and
   this makes that wrapper behave. No generator change. */
figcaption > [data-grade]{display:block}

/* =========================================================================
   SHARED
   ========================================================================= */
.nwrap{max-width:calc(var(--col) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter);min-width:0}

/* The mono section label. Same object as evidence.css's .evhead and leak.css's
   .lh, so a ledger inside an article looks like a ledger anywhere else. */
.blabel{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:14px;line-height:1.6;max-width:none;margin:0;
}
.blabel::after{content:"";flex:1;height:1px;background:var(--rule)}

/* =========================================================================
   /notes — INDEX
   ========================================================================= */
.nindex{padding:clamp(48px,6vw,84px) 0 0}
.nindex h1{font-size:var(--t-note-h1);max-width:14em;margin-top:18px}
.nindex .deck{max-width:34em}

/* The cadence line. Build writes the date; if it goes stale the page says so
   itself, which is cheaper than promising a schedule in prose. */
.ncadence{
  margin-top:22px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.02em;line-height:1.8;color:var(--muted);
  border-left:2px solid var(--accent);padding-left:16px;max-width:44em;
}
.ncadence b{color:var(--cream);font-weight:500}

/* One line teaching the notation, the way .stripfoot does on the homepage. */
.nlegend{margin-top:26px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:46em}

/* The list. Rule-separated rows, never cards: a card with no image always looks
   like it is missing one. Two real anchors per row, never a stretched link, so
   the accessible names are "<title>" and "Read the note" rather than one
   60-word string, and the title is selectable. */
.nlist{list-style:none;margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--rule)}
.nrow{
  display:grid;grid-template-columns:minmax(9rem,11rem) minmax(0,1fr);
  gap:10px 32px;align-items:start;
  padding:clamp(24px,3vw,32px) 16px;margin-inline:-16px;
  border-bottom:1px solid var(--rule);border-radius:var(--r);
}
@media(max-width:720px){.nrow{grid-template-columns:1fr;gap:14px}}
@media(hover:hover){
  .nrow{transition:background .18s ease}
  .nrow:hover{background:var(--well)}
}
.nrow:active{background:var(--well)}

.nmeta{min-width:0}
.ndate{
  display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.6;
}
/* The row's stamp names the best thing the note stands on, because that is what
   decides whether it is worth five minutes. The full three-band breakdown is
   inside the note, in the Built on ledger. */
.nmeta .stamp{margin-top:10px;padding-top:7px;font-size:11px;letter-spacing:.09em}
@media(max-width:720px){
  .nmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
  .nmeta .stamp{margin-top:0}
}

.ntitle{font-family:var(--serif);font-weight:400;font-size:var(--t-note-h3);line-height:1.16;letter-spacing:-.01em;max-width:22em}
.ntitle a{border-bottom:1px solid transparent;padding-bottom:1px}
.nrow:hover .ntitle a,.ntitle a:hover{border-bottom-color:var(--accent)}
.ndek{margin-top:10px;font-size:16px;line-height:1.6;color:var(--muted);max-width:40em}
.nrowfoot{
  margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
/* Cream, not gold, with a gold underline — so it does not read as the same
   object as the muted meta beside it. hire.css:64/:69 makes .ctx and .more the
   same treatment at two ends of one card, which is why those cards do not read
   as clickable on touch. */
.ngo{color:var(--cream);border-bottom:1px solid var(--accent);padding-bottom:3px;min-height:28px;display:inline-flex;align-items:center;gap:8px}
.ngo span{transition:transform .18s ease}
@media(hover:hover){.ngo:hover span{transform:translateX(3px)}}

/* At roughly twenty notes the page is ~5,900px. The answer then is NOT tags,
   search or pagination — it is that a two-year-old note does not need its dek in
   the list. Build adds .terse to every row past the newest ten: row height falls
   from a measured 280px to ~156px, which is the difference between a ten-viewport
   page and a six-viewport one, with no new component and no control to operate. */
.nrow.terse .ndek{display:none}
.nrow.terse{padding-block:clamp(18px,2.2vw,24px)}

/* Appears only once the list is long enough to need it — the index measuring
   itself in its own notation. Renders nothing when the build emits no counts. */
.ncount{margin-top:clamp(28px,3.5vw,40px);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;line-height:1.9;color:var(--muted)}
.ncount:empty{display:none}

.nindexfoot{margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule)}

/* =========================================================================
   /notes/<slug> — ARTICLE
   =========================================================================
   Body face: IBM Plex Sans, not Instrument Serif. Three reasons, all measured
   in the shipped binaries, not assumed:

   1. Instrument Serif ships ONE weight. index.html:15 requests
      Instrument+Serif:ital@0;1 — 400 upright and 400 italic, no bold. Every
      <strong> and <b> in 2,000 words of serif body would be a synthesised
      smear. Plex Sans ships 400/500/600 from one 40,240 B variable file.
   2. Its fitting is display fitting. Frequency-weighted average advance
      334.8/1000 em against Plex Sans's 443.4 — 24% narrower — and a word space
      of 170/1000 against 236. At 19px that is a 3.2px word space. It is drawn
      to be set at 45-88px, which is exactly where the site already uses it.
   3. Its digits are nine distinct widths (460, 249, 404, 371, 393, 382, 404,
      364, 433, 402 at 1000upm; "1" is 54% of "0"). A method piece is full of
      numbers in running text and they would ripple.

   So the serif keeps the job it already has here: headline, subhead, pull
   quote, figure. The prose is sans. Changing body face for /notes would also
   make the notes look like a different site, and the grade notation only means
   something if it is the same notation everywhere. */

.note{max-width:960px;margin-inline:auto;font-size:var(--t-read)}

.nhead{padding:clamp(40px,5.5vw,72px) 0 0}
.nhead .eyebrow{gap:10px}
.nhead .eyebrow a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.nhead .eyebrow a:hover{border-color:var(--accent)}
.nhead h1{font-size:var(--t-note-h1);max-width:17em;margin-top:18px}
.nhead .ndek{font-size:var(--t-read-lead);line-height:1.45;color:var(--muted);margin-top:18px;max-width:32em}

/* Word count, not "8 min read". A reading-time estimate is a number with an
   unstated denominator, on a site whose whole device is stating denominators.
   The count is measured by the build; the rate is named once, here, where
   there is room to name it. */
.nstat{margin-top:18px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--muted);line-height:1.8}

/* ---- The BUILT ON ledger. The opening half of the signature. ---- */
.builton{margin-top:clamp(28px,3.5vw,40px)}
/* ONE COLUMN, at every width and every count. Not a 2-up or 3-up grid: with
   three entries an auto-fit grid leaves a visible gap beside the last one, which
   is the reserved-slot-standing-open failure this whole system avoids — the same
   failure as hire.css:33's nth-child(3), hardcoded for exactly four items.
   Stacked, the three rules also read top to bottom as a descending ladder:
   2px gold, then 1px solid, then 1px dashed. Entries go in grade order,
   strongest first, exactly like the proof ledger on the homepage. */
.blist{list-style:none;margin-top:18px;display:grid;gap:22px}
.blist > li{min-width:0;max-width:44em}
.blist b{display:block;font-weight:400;font-size:var(--t-fine);line-height:1.55;color:var(--cream)}
.blist .stamp{margin-top:11px}
.builton .bnote{margin-top:20px;font-size:var(--t-fine);line-height:1.6;color:var(--muted);max-width:44em}

/* =========================================================================
   ARTICLE BODY — one grid, three columns of escape.
   Every child sits in the text column unless it asks for more. One left edge
   runs from the H1 to the last footnote; figures break right and left of it.
   ========================================================================= */
.nbody{
  margin-top:clamp(36px,4.5vw,56px);
  font-size:var(--t-read);line-height:var(--lh-read);color:var(--cream);
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,var(--escape))
    [text-start] minmax(0,var(--col)) [text-end]
    minmax(0,var(--escape)) [wide-end]
    minmax(var(--gutter),1fr) [full-end];
}
.nbody > *{grid-column:text;min-width:0}
.nbody > .wide{grid-column:wide}
.nbody > .full{grid-column:full}

.nbody > p + p{margin-top:1.15em}
.nbody .lede{font-size:var(--t-read-lead);line-height:1.48;color:var(--cream)}
.nbody .lede + p{margin-top:1.1em}

/* Headings. NO rule above an h2, and that is a decision, not an omission: on
   this site a horizontal rule above a label is notation, and spending it on
   decoration devalues the one device the whole page depends on. Vertical rules
   stay free for emphasis — hire.css:8 and :57 already use a 2px gold border-left
   that way. Space does the work instead. */
.nbody h2{
  font-family:var(--serif);font-weight:400;font-size:var(--t-note-h2);
  line-height:1.1;letter-spacing:-.016em;max-width:18em;
  margin:clamp(40px,4.4vw,60px) 0 .42em;text-wrap:balance;
}
.nbody h3{
  font-family:var(--serif);font-weight:400;font-size:var(--t-note-h3);
  line-height:1.2;letter-spacing:-.01em;max-width:22em;
  margin:clamp(28px,3vw,40px) 0 .3em;
}
.nbody h2 + p,.nbody h3 + p,.nbody h2 + ul,.nbody h3 + ul{margin-top:0}
.nbody h2 i,.nbody h3 i{font-style:italic;color:var(--accent)}
.nbody h2:target,.nbody h3:target{color:var(--accent)}

/* Links in prose. text-decoration, NOT the site's usual border-bottom.
   border-bottom draws a full-width edge on every line fragment of a wrapped
   link and runs straight through descenders; text-decoration wraps correctly
   and skips ink. This is the one place the landing-page idiom is wrong, because
   it is the only place links wrap. --edge is 3.53:1 on ink. */
.nbody a:not(.btn){
  color:var(--cream);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--edge);
  text-decoration-skip-ink:auto;
}
.nbody a:not(.btn):hover{text-decoration-color:var(--accent);color:var(--accent)}

/* Lists. Same 8x2px gold marker the resume uses (resume.css:24) — a marker,
   not a rule, so it does not collide with the grade notation. */
.nbody ul{list-style:none;margin-top:1.05em;display:flex;flex-direction:column;gap:.62em}
.nbody ul > li{position:relative;padding-left:22px}
.nbody ul > li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--accent);border-radius:1px}

/* Ordered lists get mono numerals in a hanging column. They align by
   construction: every IBM Plex Mono digit advance is 600/1000 — measured, all
   ten identical — which is the same argument that killed tabular-nums on the
   serif figures. The thing that lines up is the thing that carries meaning. */
.nbody ol:not(.fnotes):not(.amend){list-style:none;counter-reset:nol;margin-top:1.05em;display:flex;flex-direction:column;gap:.62em}
.nbody ol:not(.fnotes):not(.amend) > li{position:relative;padding-left:2.4em;counter-increment:nol}
.nbody ol:not(.fnotes):not(.amend) > li::before{
  content:counter(nol) ".";position:absolute;left:0;top:.12em;
  font-family:var(--mono);font-size:.78em;letter-spacing:.02em;color:var(--accent);
  font-variant-numeric:lining-nums tabular-nums;   /* real on mono. */
}

.nbody strong,.nbody b{font-weight:600;color:var(--cream)}
.nbody em,.nbody i{font-style:italic}
.nbody hr{border:0;border-top:1px solid var(--hair);margin:clamp(32px,3.6vw,48px) 0}

/* Inline code. 1em, not the customary .875em, and that is measured: IBM Plex
   Mono and IBM Plex Sans share x-height 516/1000 and cap-height 698/1000 at the
   same 1000 upm, so no optical correction is needed and shrinking it would
   break the alignment rather than fix it. The recession is --well, the same
   readout surface as the calculator field and the evidence mat. */
.nbody code{
  font-family:var(--mono);font-size:1em;
  background:var(--well);border:1px solid var(--hair);border-radius:2px;
  padding:.06em .32em;
}
.nbody pre{
  background:var(--well);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 20px;margin:clamp(28px,3.2vw,40px) 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  font-family:var(--mono);font-size:.86em;line-height:1.55;color:var(--cream);
  white-space:pre;-webkit-overflow-scrolling:touch;
}
.nbody pre code{background:none;border:0;padding:0;font-size:inherit}
/* A scrollable region must be reachable by keyboard: author it as
   <pre tabindex="0" role="region" aria-label="..."> */
.nbody pre:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Pull quote. A LEFT rule, and not gold: horizontal rules above a stamp are
   notation, vertical rules are emphasis, and gold stays scarce in long text. */
.nbody blockquote{margin:clamp(28px,3.2vw,44px) 0;border-left:2px solid var(--rule);padding-left:clamp(18px,2.2vw,26px)}
.nbody blockquote p{font-family:var(--serif);font-weight:400;font-size:var(--t-quote);line-height:1.26;letter-spacing:-.01em;max-width:24em;text-wrap:pretty}
.nbody blockquote p + p{margin-top:.5em}
.nbody blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:var(--t-micro);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* Hand-authored figure, for anything the build pipeline does not own (a table,
   an inline SVG). Build-generated figures come in as figure.ev and are already
   styled by evidence.css — see .evidence.innote below. */
.nfig{margin:clamp(28px,3.2vw,44px) 0}
.nfig > img,.nfig > svg,.nfig > .nfigbox{background:var(--well);border:1px solid var(--edge);border-radius:var(--r);width:100%;height:auto;display:block}
.nfig figcaption{margin-top:14px;font-size:var(--t-fine);line-height:1.6;color:var(--muted)}
.nfig figcaption b{display:block;color:var(--cream);font-weight:600;margin-bottom:5px}

/* Data table. Mono figures, so the column aligns by construction. */
.ntable{width:100%;border-collapse:collapse;font-size:var(--t-fine);margin:clamp(24px,3vw,36px) 0}
.ntable th,.ntable td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:baseline;line-height:1.5}
.ntable thead th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);border-bottom-color:var(--edge)}
.ntable td.num,.ntable th.num{font-family:var(--mono);text-align:right;padding-right:0;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.ntablewrap{overflow-x:auto;overscroll-behavior-x:contain}

/* ---- Footnotes. Same object SPEC 3.5 specifies for the proof ledger's method
   notes: mono 400, sentence case, on --well. Mono 500 uppercase is the label
   voice and must not be borrowed here, or annotations start reading as
   headings. ---- */
.fnref{font-family:var(--mono);font-size:.68em;line-height:0;vertical-align:.45em;padding:0 .12em}
.fnref a{text-decoration:none;color:var(--accent);border-bottom:0;padding:0 2px}
.fnref a:hover{text-decoration:underline}
.fnotes{
  list-style:none;counter-reset:fn;
  margin-top:clamp(36px,4.5vw,52px);padding:22px 22px 20px;
  background:var(--well);border:1px solid var(--rule);border-radius:var(--r);
  font-family:var(--mono);font-weight:400;font-size:var(--t-micro);
  line-height:1.7;color:var(--muted);letter-spacing:0;
}
.fnotes > li{counter-increment:fn;position:relative;padding-left:2.2em}
.fnotes > li + li{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.fnotes > li::before{content:counter(fn) ".";position:absolute;left:0;color:var(--accent);font-variant-numeric:lining-nums tabular-nums}
.fnotes > li:empty{display:none}          /* an unfilled slot renders nothing */
.fnotes a{color:var(--cream);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:2px}
.fnotes a:hover{text-decoration-color:var(--accent)}
.fnotes li:target{color:var(--cream)}
.fnback{margin-left:6px;color:var(--accent);text-decoration:none;display:inline-block;min-width:24px;min-height:24px;line-height:1.7}

/* =========================================================================
   Build-generated evidence, INSIDE an article.
   evidence.css already styles figure.ev. This only neutralises the standalone
   section chrome and forces one column — a cohort chart at half of a 570px
   column is unreadable, which is the same argument build.mjs:298 already makes
   for defaulting span to "full".
   ========================================================================= */
.nbody > .evidence.innote{
  margin:clamp(28px,3.2vw,44px) 0;padding:0;border-top:0;grid-column:wide;
}
.evidence.innote > .evhead{font-size:11px}
.evidence.innote > .evgrid{grid-template-columns:1fr;margin-top:16px}
.evidence.innote .ev .shot{border-color:var(--edge);border-radius:var(--r);background:var(--well)}

/* =========================================================================
   ARTICLE FOOT — the closing half of the signature, then one offer, then the mesh.
   ========================================================================= */
.nfoot{margin-top:clamp(48px,6vw,80px)}
.nfoot > .nwrap > section + section,
.nfoot > .nwrap > section + nav{margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule)}

/* Amendments. Renders nothing when empty — the empty-state discipline that
   runs through the whole site (build.mjs:262 returns "" for an empty project). */
/* Two rules, not one selector list: if a browser lacks :has() an invalid
   compound inside a list invalidates the whole rule. :empty alone is not
   enough — one newline of source whitespace defeats it, and the element would
   keep its 48px margin as a dead gap under the article. Measured: it did. */
.amend:empty{display:none}
.amend:not(:has(li)){display:none}
.amend{list-style:none;counter-reset:am;margin-bottom:clamp(32px,4vw,48px)}
.amend > li{
  counter-increment:am;font-family:var(--mono);font-size:var(--t-micro);
  line-height:1.75;color:var(--muted);padding-left:2.2em;position:relative;
}
.amend > li::before{content:"A" counter(am);position:absolute;left:0;color:var(--accent);letter-spacing:.06em}
.amend > li + li{margin-top:10px}
.amend time{color:var(--cream)}

.falsify p{margin-top:16px;font-size:var(--t-read);line-height:1.6;color:var(--cream);max-width:34em}
.falsify p + p{margin-top:.9em}
.falsify > .stamp{max-width:34em}

/* The only ask on the page, and it is a link, not a form. */
.offer .oline{margin-top:16px;font-family:var(--serif);font-size:var(--t-quote);line-height:1.2;letter-spacing:-.01em;max-width:20em;text-wrap:balance}
.offer .oline i{font-style:italic;color:var(--accent)}
.offer p{margin-top:14px;font-size:var(--t-fine);line-height:1.65;color:var(--muted);max-width:40em}
.offer .promise{margin-top:14px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;line-height:1.8;color:var(--muted);max-width:44em}
.offer .ctarow{margin-top:22px}

/* The mesh. Two required edges up and sideways, then siblings. */
.nrel dl{margin-top:18px;display:grid;gap:0}
.nrel .rrow{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 24px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.nrel .rrow:first-child{border-top:1px solid var(--rule)}
@media(max-width:560px){.nrel .rrow{grid-template-columns:1fr;gap:5px}}
.nrel dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.nrel dd{font-size:16px;line-height:1.6;color:var(--cream)}
.nrel dd a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.nrel dd a:hover{border-color:var(--accent)}
.nrel dd .why{display:block;margin-top:5px;font-size:var(--t-fine);color:var(--muted);line-height:1.55}

/* Byline, not a CTA. A hiring manager who lands here from search gets one plain
   sentence and two links; nobody is asked for anything twice on one page. */
.nbyline{margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule);font-size:var(--t-fine);line-height:1.7;color:var(--muted);max-width:44em}
.nbyline b{color:var(--cream);font-weight:600}
.nbyline a{color:var(--cream);border-bottom:1px solid var(--rule);padding-bottom:2px;white-space:nowrap}
.nbyline a:hover{border-color:var(--accent)}

/* prev / next, in .back's mono treatment, at a real target size */
.nprevnext{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.nprevnext a{color:var(--cream);min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid var(--rule)}
.nprevnext a:hover{border-color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .nrow,.ngo span{transition:none}
  .ngo:hover span{transform:none}
}

/* =========================================================================
   PRINT. base.css ships no print block, so today every page but /resume prints
   near-white-on-white (base.css:24 sets color:var(--cream)). A note is a work
   sample; assume it gets printed. The grade rules survive because they are
   borders, not filled chips — which is the reason the signature is a border.
   ========================================================================= */
@media print{
  @page{margin:16mm 16mm 14mm}
  html,body{background:#fff!important;color:#111!important;font-size:10.5pt;line-height:1.45}
  body::before{display:none!important}
  .top,footer.site,.skip,.offer,.nprevnext,.ngo{display:none!important}
  .note,.nwrap,.nbody{max-width:none}
  .nbody{display:block}
  .nbody > *{max-width:34em}
  .nhead h1{font-size:22pt;color:#111!important}
  .nhead .ndek,.ndate,.nstat,.blist b{color:#333!important}
  .nbody,.nbody p,.nbody li,.falsify p{color:#111!important}
  .nbody a:not(.btn){color:#111!important;text-decoration-color:#777}
  .nbody h2,.nbody h3{color:#111!important;break-after:avoid;break-inside:avoid}
  .blabel{color:#111!important}
  .blabel::after{background:#bbb}
  .stamp{color:#333!important}
  .fnotes,.nbody pre,.nbody code{background:none!important;border-color:#ccc!important;color:#333!important}
  .nbody blockquote{border-left-color:#bbb}
  .nbody blockquote p{color:#111!important}
  .ntable th,.ntable td{border-bottom-color:#ccc}
  .nfig > img,.nfig > svg,.ev .shot{border-color:#ccc!important;background:none!important}
  p,li{orphans:2;widows:2}
  figure,blockquote,.fnotes,.builton{break-inside:avoid}
}