/* ══════════════════════════════════════════════════════════════════
   JAEL WILLIAMS — PORTFOLIO
   Shared stylesheet. Every page links this file.

   TWO HUES. ONE RAMP. TWO SURFACES.
   Every neutral comes from a single blue-grey ramp. The only other
   hue is crimson, and it's Jael's.

   SURFACES, NOT THEMES. Both are live on the same page. Dark is the
   frame — nav, mastheads, footers, the homepage. Light is the
   content — case study bodies, sustained reading, data. The split
   carries meaning, so it is NOT wired to prefers-color-scheme.

   Components reference semantic tokens (--text-2, --mark) and never
   care which surface they sit on.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* fenmore's tokens are GENERATED from fenmore/tokens.json — see
   fenmore/README.md. Imported rather than duplicated so there is exactly
   one source of truth for the placeholder brand. Run `python3 build.py`
   in fenmore/ after any token edit. */
@import url('fenmore/fenmore.css');

:root{
  /* ─── THE RAMP — every neutral in the system ─── */
  --bg-100:#E2E9EF;  /* screen wells, decorative fills on light */
  --bg-200:#C7D3DD;  /* decorative only on light   (1.4:1) */
  --bg-300:#A8BACB;  /* secondary text on panels   (4.9:1) */
  --bg-400:#8496A9;  /* secondary text on dark     (6.2:1) */
  --bg-500:#627487;  /* decorative only on dark    (3.9:1) */
  --bg-600:#4A5C6E;  /* secondary text on light    (6.5:1) */
  --bg-700:#2C4759;  /* panel surface on dark */
  --bg-800:#1E323F;  /* deepest — optional band */

  /* ─── SURFACES ─── */
  --ink:   #111215;
  --paper: #FAF7F8;

  /* ─── THE ONE ACCENT ─── */
  --crimson:      #B3001B;  /* mark on light · fills anywhere */
  --crimson-lift: #E04355;  /* mark on dark */

  --muted-fig: #8A8A8F;     /* underperforming figures, both surfaces */

  /* ─── TYPE ─── */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:  clamp(2.25rem, 6vw, 4rem);
  --t-band:  clamp(1.875rem, 5vw, 3.25rem);
  --t-stat:  clamp(2rem, 4.5vw, 2.75rem);
  --t-h2:    clamp(1.25rem, 2.4vw, 1.625rem);
  --t-h3:    1.0625rem;
  --t-body:  1.0625rem;
  --t-small: .875rem;
  --t-tiny:  .75rem;

  /* ─── RHYTHM ─── */
  --measure: 34rem;   /* body max — never exceed */
  /* DISPLAY MEASURES ARE IN em, NOT rem.
     em scales with font-size; rem doesn't. A rem max-width on type that
     grows via clamp() crams the line count as the viewport widens —
     which is exactly the bug this replaced. 14em ≈ 27 characters. */
  --claim:   14em;    /* band claim max */
  --page:    64rem;
  --band:    clamp(2.75rem, 6vw, 4.5rem);
  --gap:     1.25rem;
}

/* ═══ DARK — the frame ═══ */
[data-surface="dark"]{
  --bg:         var(--ink);
  --panel:      var(--bg-700);
  --text-1:     var(--paper);
  --text-2:     var(--bg-400);
  --text-decor: var(--bg-500);
  --mark:       var(--crimson-lift);
  /* ANNOTATION ≠ IDENTITY. See the note below the scopes. */
  --annot:      var(--paper);
  --annot-2:    var(--bg-400);
  --rule:       #232A32;
  --well:       #1A1F26;
}
[data-surface="dark"] .panel{ --text-2:var(--bg-300); --rule:#3E5A6D; }

/* ═══ LIGHT — the content ═══ */
[data-surface="light"]{
  --bg:         var(--paper);
  --panel:      #FFFFFF;
  --text-1:     var(--ink);
  --text-2:     var(--bg-600);
  --text-decor: var(--bg-200);
  --mark:       var(--crimson);
  --annot:      var(--ink);
  --annot-2:    var(--bg-600);
  --rule:       #DDE4EA;
  --well:       var(--bg-100);
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOTATION IS NOT IDENTITY

   --mark was doing both jobs: it is the crimson that makes this site
   mine, AND it was the colour of every callout pointing at a decision
   inside a mockup. Those are different layers and they were sharing
   one token.

   The split became necessary when fenmore went green. Crimson sits
   166 degrees from forest green — near-complementary, which is normally
   the good news. Here it is the problem: red marks on green screens is
   the single worst pairing for red-green colour vision deficiency,
   roughly 8% of men. The old slate fenmore never had this issue.

   So annotations are now NEUTRAL and carry their meaning in shape and
   position — a 3px rule, a label, a specific placement. Colour is
   never the only channel. Crimson stays identity-only: links, the
   masthead rule, the thesis highlight, the logo. It never lands on
   top of a fenmore screen.

   --annot    high-contrast neutral, inverts by surface
   --annot-2  the supporting tier for annotation body copy
   ═══════════════════════════════════════════════════════════════════ */

/* Callouts that sit ON a mockup. Neutral by instruction. */
.annot{position:relative; padding-left:.9rem; font-size:var(--t-small);
  color:var(--annot-2)}
/* The rule IS the annotation — remove the colour entirely and this still
   reads as a callout, which is the test. */
.annot::before{content:""; position:absolute; left:0; top:.55em;
  width:3px; height:calc(100% - 1.1em); min-height:.8rem;
  background:var(--annot)}
.annot b, .annot strong{color:var(--annot); font-weight:600}
/* Numbered pointers into a figure. Shape, not hue. */
.annot-pin{display:inline-flex; align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem; border-radius:50%;
  border:1.5px solid var(--annot); color:var(--annot);
  font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums;
  flex:0 0 auto}
figure .annot{margin-top:.5rem}

/* ═══ PLACEHOLDER BRAND "fenmore" ═══
   Tokens live in fenmore/fenmore.css (imported above), generated from
   fenmore/tokens.json. 142 tokens, two layers — reskin by editing the
   primitives and rerunning the build.

   NO LONGER ADJACENT TO THE IDENTITY RAMP. fenmore was slate and teal,
   deliberately close to this site's blue-greys so containment did the
   separating. It is now forest green on warm cream, which separates by
   hue instead — and that is why the annotation layer had to stop being
   crimson. See the note above.

   fenmore is monochromatic: 69° of hue across the whole system, with
   differentiation carried by luminance and containment rather than by
   hue. Teal exists in exactly one place — the business card face — and
   is not available to UI. */

/* ══════════════════════ BASE ══════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text-1);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; font-synthesis:none}

.wrap{max-width:var(--page); margin:0 auto; padding:0 1.5rem}
p,ul,ol{max-width:var(--measure)}
p{margin:0 0 1.1rem}
strong{font-weight:600; color:var(--text-1)}
em{font-style:italic}
a{color:var(--mark); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent)}
a:hover{border-bottom-color:currentColor}
code{font-family:var(--mono); font-size:.8125em}
img{max-width:100%; display:block}

h1,h2,h3{line-height:1.14; letter-spacing:-.022em; margin:0; font-weight:600}
h1{font-size:var(--t-hero); max-width:14em}
h2{font-size:var(--t-h2); max-width:20em; margin:0 0 1.25rem}
h3{font-size:var(--t-h3); margin:2rem 0 .6rem}

section{padding-block:var(--band); border-top:1px solid var(--rule)}
section:first-of-type{border-top:none}

.eyebrow{font-size:var(--t-tiny); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 1rem}
.lede{color:var(--text-2)}
.note{color:var(--text-2); font-size:var(--t-small); max-width:var(--measure)}
.mark-rule{width:2.5rem; height:3px; background:var(--mark); margin:0 0 1.75rem}

/* skip link — keyboard users shouldn't tab the whole nav */
.skip{position:absolute; left:-9999px}
.skip:focus{left:1.5rem; top:1rem; z-index:99; background:var(--mark);
  color:#fff; padding:.6rem 1rem; border-radius:2px; border:0}

:focus-visible{outline:2px solid var(--mark); outline-offset:3px}

/* ══════════════════ FULL-BLEED BANDS ══════════════════
   Each band declares its own data-surface. Tokens resolve inside. */
.band{background:var(--bg); color:var(--text-1)}
.band--invert{background:var(--crimson); color:var(--paper)}
.band--invert .eyebrow,
.band--invert .note{color:rgba(250,247,248,.78)}
.band--invert a{color:var(--paper)}

/* ══════════════════ SITE NAV ══════════════════ */
.nav{display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; padding:1.75rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:flex-start; gap:1.25rem; text-decoration:none;
  border:0; color:inherit}
.brand:hover{border:0}
/* SWAP: replace .logo with your SVG mark. Keep the width. */
.logo{font-family:var(--serif); font-size:1.75rem; line-height:1;
  color:var(--mark); letter-spacing:.01em}
.logo-say{display:block; font-family:var(--sans); font-size:.6875rem;
  color:var(--mark); margin-top:.3rem; letter-spacing:.02em}
.brand-role{font-size:var(--t-small); color:var(--text-2); line-height:1.4;
  padding-top:.2rem; max-width:11rem}
.nav-links{display:flex; gap:1.5rem; padding-top:.4rem; flex-wrap:wrap}
.nav-links a{font-size:var(--t-small); color:var(--text-1); border:0}
.nav-links a:hover{color:var(--mark)}
.nav-links a[aria-current="page"]{color:var(--mark)}

/* ══════════════════ HOMEPAGE: THESIS HERO ══════════════════ */
.hero{padding:3.5rem 0 4.5rem; border-top:1px solid var(--rule)}
.hero .thesis{font-size:var(--t-hero); line-height:1.06; letter-spacing:-.03em;
  font-weight:600; max-width:14em; margin:0}
.hero .thesis .hl{color:var(--mark)}
.byline{display:flex; align-items:center; gap:.9rem; margin-top:2.5rem}
/* SWAP: replace .avatar with <img> of the 3D avatar */
.avatar{width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(160deg,#6B1018,#24060A)}
.byline .who{font-size:var(--t-small); color:var(--text-1)}
.byline .where{font-size:var(--t-tiny); color:var(--text-2); margin-top:.15rem}

/* ══════════════════ HOMEPAGE: EDITORIAL BANDS ══════════════════ */
.ed{padding-block:var(--band); border-top:1px solid var(--rule)}
.ed-num{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.5rem}
.ed-num span{font-size:var(--t-tiny); color:var(--text-decor);
  font-variant-numeric:tabular-nums; letter-spacing:.1em}
.ed-num i{flex:1; height:1px; background:var(--mark); display:block}
.ed-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:2.25rem;
  align-items:start}
.ed--flip .ed-grid{grid-template-columns:1fr 1.4fr}
.ed--flip .ed-copy{order:2}
.ed--flip .ed-shot{order:1}
.ed-claim{font-size:var(--t-band); line-height:1.06; letter-spacing:-.03em;
  font-weight:600; max-width:var(--claim); margin:0 0 1.75rem}
/* CAUTION: an em max-width shared across elements of DIFFERENT font sizes
   resolves to different pixel widths. .ed-deck is 12px, .ed-copy p is 14px —
   a single 27em rule gave the deck 324px and the copy 378px, which orphaned
   the deck's last item onto a second line and crashed it into the paragraph.
   Metadata lines get max-width:none and are bounded by the column. */
.ed-copy p{font-size:var(--t-small); line-height:1.6; color:var(--text-2);
  max-width:32em; margin:0 0 1.25rem}
.ed-copy p.ed-deck{font-size:var(--t-tiny); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); line-height:1.5;
  max-width:none; margin:0 0 1.25rem}
.ed-more{font-size:var(--t-small); color:var(--mark)}

/* see-all row */
.seeall{display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.5rem 0; border-top:1px solid var(--rule); flex-wrap:wrap}
.seeall span{font-size:var(--t-small); color:var(--text-2)}
.seeall a{font-size:var(--t-small); color:var(--text-1)}

/* ══════════════════ CASE STUDY: AT A GLANCE ══════════════════ */
.glance{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0;
  border-top:1px solid var(--rule)}
.glance>div{padding:1.5rem 1.5rem 2.5rem 0; border-right:1px solid var(--rule)}
.glance>div:last-child{border-right:0; padding-right:0}
.glance dt{font-size:var(--t-tiny); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 .55rem}
.glance dd{margin:0; font-size:.9375rem; line-height:1.5; max-width:none}

.meta{margin:1.75rem 0 0; padding-top:1.25rem; border-top:1px solid var(--rule);
  font-size:var(--t-small); color:var(--text-2);
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; max-width:none}
.meta span{white-space:nowrap}

/* ══════════════════ PATTERN: COMPARISON ══════════════════ */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
  margin:0 0 1.5rem}
.compare>div{background:var(--panel); border:1px solid var(--rule);
  border-radius:3px; padding:1.5rem 1.6rem}
.compare .won{border-color:var(--mark); border-width:2px}
.compare .label{font-size:var(--t-tiny); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); margin:0 0 .7rem}
.compare .won .label{color:var(--mark)}
.compare .verdict{font-size:1.0625rem; font-weight:600; margin:0 0 .7rem}
.compare p{font-size:.9375rem; color:var(--text-2); margin:0; max-width:none}

/* ══════════════════ PATTERN: STAT ROW ══════════════════ */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:3px;
  overflow:hidden; margin:1.5rem 0}
.stats>div{background:var(--panel); padding:1.6rem 1.5rem}
.stats>div.lead{box-shadow:inset 0 3px 0 var(--mark)}
.stats .n{font-size:var(--t-stat); font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stats .low{color:var(--muted-fig)}
.stats .k{font-size:var(--t-small); color:var(--text-2); margin:.65rem 0 0}

/* ══════════════════ PATTERN: TABLE ══════════════════ */
table{width:100%; border-collapse:collapse; margin:1.5rem 0;
  font-size:.9375rem; font-variant-numeric:tabular-nums}
caption{text-align:left; font-size:var(--t-small); color:var(--text-2);
  padding-bottom:.85rem; max-width:var(--measure)}
th,td{padding:.7rem .85rem; text-align:right; border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left; padding-left:0}
th{font-size:var(--t-tiny); letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--text-2); border-bottom-color:var(--text-2)}
/* winner marked with a RULE, not a fill — figures stay primary */
th.win{color:var(--mark); border-bottom:2px solid var(--mark)}
td.win{font-weight:600; color:var(--text-1)}
tbody tr:last-child td{border-bottom:none}
.tnote{font-size:var(--t-small); color:var(--text-2); margin:0}

/* ══════════════════ PATTERN: TAKEAWAY ══════════════════ */
.takeaway{margin:2rem 0; padding:.35rem 0 .35rem 1.6rem;
  border-left:3px solid var(--mark); font-family:var(--serif);
  font-size:1.25rem; line-height:1.5; max-width:32rem}
.takeaway p{margin:0; max-width:none}

/* ══════════════════ PATTERN: FIGURE + WELL ══════════════════ */
figure{margin:2rem 0}
.well{background:var(--well); border-radius:4px; padding:1.25rem}
.slot{border:1px dashed var(--rule); border-radius:3px; background:var(--panel);
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); font-size:var(--t-small); text-align:center; padding:2rem}
.fenmore .slot{background:var(--fen-color-surface-page);
  border-color:var(--fen-color-border-default)}
figcaption{margin-top:.85rem; font-size:var(--t-small); line-height:1.55;
  color:var(--text-2); max-width:var(--measure)}
figcaption b{color:var(--text-1); font-weight:600}

/* ══════════════════ PATTERN: FLAGS ══════════════════ */
.flags{border-top:2px solid var(--text-1)}
.flags h2{margin-bottom:.4rem}
.flags .sub{font-size:var(--t-small); color:var(--text-2); margin:0 0 2rem}
.flags dl{margin:0}
.flags dt{font-weight:600; margin:1.6rem 0 .4rem; max-width:var(--measure)}
.flags dd{margin:0; color:var(--text-2); font-size:.9375rem;
  max-width:var(--measure)}

/* ══════════════════ INTERACTIVE: VARIANT SWITCHER ══════════════════ */
.switch-block{margin:2rem 0}
.switcher{display:inline-flex; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:3px; overflow:hidden;
  margin-bottom:1rem}
.switcher button{appearance:none; border:0; background:var(--panel);
  color:var(--text-2); font-family:inherit; font-size:var(--t-small);
  padding:.6rem 1.1rem; cursor:pointer; transition:background .12s,color .12s}
.switcher button:hover{background:var(--bg)}
.switcher button[aria-pressed="true"]{background:var(--text-1); color:var(--bg)}
.vframe{border:1px solid var(--rule); border-radius:3px; overflow:hidden;
  position:relative; background:var(--well)}
.vtag{position:absolute; top:.75rem; left:.75rem; font-size:var(--t-tiny);
  letter-spacing:.08em; text-transform:uppercase; background:var(--text-1);
  color:var(--bg); padding:.28rem .6rem; border-radius:2px; z-index:2}
.vtag.rec{background:var(--crimson); color:#fff}
.vmeta{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-top:0;
  border-radius:0 0 3px 3px; overflow:hidden}
.vmeta>div{background:var(--panel); padding:1rem 1.1rem}
.vmeta dt{font-size:var(--t-tiny); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 .4rem}
.vmeta dd{margin:0; font-size:.9375rem; line-height:1.45;
  font-variant-numeric:tabular-nums}
.vmeta .hi{color:var(--text-1); font-weight:600}
.vmeta .lo{color:var(--muted-fig)}
.switch-note{margin:.9rem 0 0; font-size:var(--t-small); color:var(--text-2)}

/* ══════════════════ INTERACTIVE: ALTERNATIVES INSPECTOR ══════════════════ */
.inspector{display:grid; grid-template-columns:15rem 1fr; gap:var(--gap);
  margin:2rem 0; align-items:start}
.ins-list{border:1px solid var(--rule); border-radius:3px;
  background:var(--panel); overflow:hidden}
.ins-group{font-size:var(--t-tiny); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2); padding:.8rem 1rem .5rem; background:var(--bg);
  border-bottom:1px solid var(--rule)}
.ins-list button{display:block; width:100%; text-align:left; appearance:none;
  border:0; border-bottom:1px solid var(--rule); background:var(--panel);
  font-family:inherit; font-size:.9375rem; color:var(--text-2);
  padding:.7rem 1rem; cursor:pointer; transition:background .1s,color .1s}
.ins-list button:hover{background:var(--bg); color:var(--text-1)}
.ins-list button[aria-pressed="true"]{background:var(--text-1); color:var(--bg)}
.ins-list button.killed{text-decoration:line-through; color:var(--text-decor)}
.ins-list button[aria-pressed="true"].killed{color:var(--bg)}
.ins-detail{border:1px solid var(--rule); border-radius:3px;
  background:var(--panel); padding:1.6rem 1.75rem; min-height:15rem}
.ins-detail h3{margin:0 0 .3rem; font-size:1.125rem}
.badge{display:inline-block; font-size:var(--t-tiny); letter-spacing:.08em;
  text-transform:uppercase; padding:.24rem .55rem; border-radius:2px;
  margin-bottom:1rem}
.badge.tested{color:var(--mark); border:1px solid var(--mark)}
.badge.cut,.badge.explored{color:var(--text-2); border:1px solid var(--rule)}
.ins-detail .field{margin:0 0 1.1rem; max-width:none}
.ins-detail .flabel{font-size:var(--t-tiny); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-2); margin:0 0 .3rem}
.ins-detail .intent{font-family:var(--serif); font-size:1.0625rem;
  line-height:1.5; color:var(--text-1); margin:0}
.ins-detail .outcome{font-size:.9375rem; color:var(--text-2); margin:0}

/* inventory pills */
.inv{list-style:none; padding:0; margin:1rem 0 0; max-width:none;
  display:flex; flex-wrap:wrap; gap:.5rem}
.inv li{font-size:var(--t-small); color:var(--text-2);
  border:1px solid var(--rule); border-radius:99px; padding:.3rem .8rem;
  background:var(--panel)}
.inv li.killed{color:var(--text-decor); text-decoration:line-through}

/* ══════════════════ SHELL NOTICE ══════════════════
   Marks unfinished pages. Delete the block when the page is written. */
.shell{border:1px dashed var(--mark); border-radius:3px;
  padding:1.25rem 1.4rem; margin:2rem 0; max-width:var(--measure)}
.shell p{font-size:var(--t-small); color:var(--text-2); margin:0}
.shell strong{color:var(--mark)}

/* ══════════════════ FOOTER ══════════════════ */
.site-foot{padding:2.75rem 0 4rem}
.site-foot .next{max-width:var(--measure); color:var(--text-2)}
.site-foot .nda{max-width:var(--measure); color:var(--text-decor);
  font-size:var(--t-small); margin:1.5rem 0 0}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem;
  padding:2.75rem 0 1.5rem}
.foot-grid h4{font-size:var(--t-tiny); letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 .9rem; font-weight:600;
  color:rgba(250,247,248,.7)}
.foot-grid a{display:block; font-size:var(--t-small); margin-bottom:.4rem;
  border:0}
.foot-grid a:hover{border-bottom:1px solid currentColor}
.foot-say{font-family:var(--serif); font-size:1.0625rem; line-height:1.45}
.foot-rule{border-top:1px solid rgba(250,247,248,.25); padding:1.25rem 0 3rem;
  font-size:var(--t-tiny); color:rgba(250,247,248,.7)}

/* ══════════════════ NDA DISCLOSURE ══════════════════
   The NDA line is a fine-print obligation on every page, and the answer to
   "wait, is this spec work?" is the single most load-bearing thing in the
   portfolio. Making the reader leave the case study to find out was wrong:
   the doubt happens WHILE they're looking at a screen. So the line opens a
   dialog in place, and the dialog links out for anyone who wants the long
   version. Progressive disclosure — the summary is the answer, the page is
   the receipt. */

/* The trigger is a button, not a link — it changes nothing about where you
   are. It inherits the fine-print colour so it reads as part of the line. */
.nda-more{appearance:none; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
  border-bottom:1px solid currentColor; white-space:nowrap}
.nda-more:hover{color:var(--mark); border-bottom-color:var(--mark)}
.nda-more .arr{display:inline-block; transition:transform .18s ease}
.nda-more:hover .arr{transform:translateX(2px)}

/* Always dark. The dialog is a plate laid over the page, not a region of it,
   so it keeps one identity whichever surface launched it. */
dialog.nda-dialog{
  --bg:var(--ink); --panel:var(--bg-700); --text-1:var(--paper);
  --text-2:var(--bg-400); --text-decor:var(--bg-500);
  --mark:var(--crimson-lift); --rule:#232A32; --well:#1A1F26;
  width:min(46rem, calc(100vw - 2.5rem)); max-height:min(85vh, 44rem);
  padding:0; border:0; border-radius:4px; overflow:auto;
  background:var(--ink); color:var(--paper);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
dialog.nda-dialog::backdrop{background:rgba(17,18,21,.72)}
.nda-dialog .nd-in{padding:2.5rem 2.75rem 2.25rem}
.nda-dialog .nd-close{position:absolute; top:.9rem; right:1rem;
  appearance:none; background:none; border:0; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--text-2); padding:.25rem .4rem}
.nda-dialog .nd-close:hover{color:var(--paper)}
.nda-dialog h2{font-size:var(--t-h2); margin:.6rem 0 1rem; max-width:20em}
.nda-dialog p{font-size:var(--t-small); color:var(--text-2);
  max-width:38em; margin:0 0 1rem}

/* Two columns, and the split IS the content: what's real on the left,
   what's a stand-in on the right. A reader who only scans the headings has
   still got the answer. */
.nd-split{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2rem;
  margin:1.5rem 0 0; padding-top:1.5rem; border-top:1px solid #232A32}
/* eyebrow tier — decorative weight, still 6.2:1 */
.nd-split h3{font-size:var(--t-tiny); letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; margin:0 0 .75rem;
  color:var(--text-2)}
.nd-split ul{list-style:none; margin:0; padding:0}
.nd-split li{font-size:var(--t-small); line-height:1.45; padding:.4rem 0 .4rem .95rem;
  position:relative; color:var(--paper)}
/* Marks, not fills — a rule reads as annotation, a fill reads as state. */
.nd-split li::before{content:""; position:absolute; left:0; top:.75rem;
  width:5px; height:1px; background:var(--crimson-lift)}
.nd-split .stand-in li{color:var(--text-2)}
.nd-split .stand-in li::before{background:var(--bg-500)}
.nd-foot{display:flex; flex-wrap:wrap; gap:1.25rem; align-items:baseline;
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid #232A32;
  font-size:var(--t-small)}
.nd-foot .nd-say{color:var(--text-2); margin:0; flex:1 1 14rem}
@media (max-width:620px){
  .nda-dialog .nd-in{padding:2rem 1.5rem 1.75rem}
  .nd-split{grid-template-columns:1fr; gap:1.25rem}
}


/* ══════════════════ HERO IMAGE — bridges dark into light ══════════════════
   Full-bleed, sits at the bottom of the dark masthead band. The image IS
   the transition between surfaces, which is why a light screenshot doesn't
   read as a glowing rectangle floating on black. Magazine feature opener. */
.hero-bleed{width:100%; margin-top:2.5rem}
.hero-bleed img{width:100%; display:block}
.hero-cap{padding:1rem 1.5rem 0; max-width:var(--page); margin:0 auto}
.hero-cap p{font-size:var(--t-small); line-height:1.55; color:var(--text-2);
  max-width:var(--measure); margin:0}
.hero-cap b{color:var(--text-1); font-weight:600}

/* ══════════════════ SLOT VARIANTS ══════════════════ */
.slot--hero{aspect-ratio:21/9; border-radius:0; border-left:0; border-right:0}
.slot--tall{aspect-ratio:4/5}
.slot--wide{aspect-ratio:2/1}
.slot--square{aspect-ratio:1/1}
.slot--crop{aspect-ratio:3/1}
.slot small{display:block; margin-top:.5rem; font-family:var(--mono);
  font-size:.6875rem; color:var(--text-decor)}

/* two-up and three-up figure rows */
.figrow{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin:2rem 0}
.figrow--3{grid-template-columns:1fr 1fr 1fr}
.figrow figure{margin:0}
.figrow figcaption{font-size:var(--t-tiny); line-height:1.5}

/* a figure that must be BUILT, not exported — marked so it's obvious */
.slot--build{border-style:solid; border-color:var(--mark);
  color:var(--mark)}
.slot--build small{color:var(--mark)}

@media (max-width:760px){
  .figrow,.figrow--3{grid-template-columns:1fr}
  .slot--hero{aspect-ratio:4/3}
}


/* ══════════════════ MOTION — only where the finding is temporal ══════════════════
   Silent looping MP4/WebM, never embedded YouTube, never with sound.
   Autoplay is safe because it's muted, but it must be suppressed under
   prefers-reduced-motion — a poster frame is shown instead.

   Markup:
   <div class="well"><div class="fenmore">
     <video class="loop" autoplay loop muted playsinline
            poster="img/cat-filtering-poster.png"
            aria-label="Filter panel opening and applying, then resetting">
       <source src="img/cat-filtering.webm" type="video/webm">
       <source src="img/cat-filtering.mp4"  type="video/mp4">
     </video>
   </div></div>                                                           */
video.loop{width:100%; display:block; background:var(--fen-color-surface-page)}
.slot--motion{border-style:solid; border-color:var(--bg-500); color:var(--bg-600)}
.slot--motion small{color:var(--bg-500)}
.slot--motion::before{content:"▶"; font-size:1.5rem; display:block;
  margin-bottom:.5rem; color:var(--bg-500)}

/* a build that is INTERACTIVE rather than an asset */
.slot--interactive{border-style:solid; border-color:var(--mark); color:var(--mark)}
.slot--interactive small{color:var(--mark)}
.slot--interactive::before{content:"⇕"; font-size:1.5rem; display:block;
  margin-bottom:.5rem}

@media (prefers-reduced-motion:reduce){
  video.loop{display:none}
  video.loop + .poster-fallback{display:block}
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:900px){
  .glance{grid-template-columns:1fr 1fr}
  .glance>div:nth-child(2){border-right:0; padding-right:0}
  .vmeta{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--band:3rem}
  .ed-grid,.ed--flip .ed-grid{grid-template-columns:1fr}
  /* claim leads on mobile — image drops below the copy */
  .ed--flip .ed-copy{order:1}
  .ed--flip .ed-shot{order:2}
  .compare,.stats,.inspector,.glance,.foot-grid{grid-template-columns:1fr}
  .glance>div{border-right:0; padding:1.25rem 0; border-top:1px solid var(--rule)}
  .glance>div:first-child{border-top:0}
  .switcher{width:100%}
  .switcher button{flex:1}
  .nav{gap:1rem}
  .brand-role{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

@media print{
  body{background:#fff; color:#000}
  .nav,.switcher,.ins-list,.shell{display:none}
  section{page-break-inside:avoid}
}