/* ══════════════════════════════════════════════════════════════════════════
   Sight — marketing landing.
   Six chapters of editorial type layered over one continuous 3D world.
   Requires ds/tokens.css and ds/components.css.

   Everything here is drawn from the token system. Three rules hold the page
   together:
     · One ink. Every scrim, panel and bar on this page is --mk-ink at some
       alpha. There is no second near-black.
     · One filled action per frame. The hero owns the ember button; every
       other call steps down to the outline variant.
     · Nothing decorative takes input. The scene underneath is draggable.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* The atmosphere ink. plum-900 pulled down until it reads as depth behind
     the scene rather than as a second surface in front of it. Channels, not
     a colour, so alpha is the only thing that ever varies. */
  --mk-ink:20 17 24;
}

html{background:var(--plum-900);scroll-behavior:smooth}
body{margin:0;background:var(--plum-900);color:var(--text-body-color);-webkit-font-smoothing:antialiased}

/* Driven from marketing.js, which sets `animation` inline on [data-rise]. */
@keyframes sightRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:var(--space-3) var(--space-5);
  background:var(--plum-900);color:var(--text-strong);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.skip-link:focus{left:var(--space-3);top:var(--space-3)}

/* ── The world and the layers over it ─────────────────────────────────── */

.world{position:fixed;inset:0;z-index:1}
/* The still that holds the frame until <sight-world> reports for duty.
   marketing.js sets [data-out] and opacity:0, then removes the node ~520ms
   later, so the hand-off to the canvas is a cross-fade rather than a cut. */
.world-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(0.8);
  /* must finish inside the ~520ms marketing.js waits before removing the node */
  transition:opacity var(--dur-slow) var(--ease-out);
}
/* positioned, and later in the DOM, so the live canvas paints over the still */
.world > sight-world{position:relative;width:100%;height:100%;display:block}

/* Scrim — two layers, not four. The horizontal ramp keeps the left column
   readable between chapters; the vertical one seats the header and the
   footer. It is the only ink layer between the type and the scene. */
.scrim{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    /* Many close stops rather than a few far apart: a two-stop ramp across a
       near-black field quantises into visible vertical bands at 8 bits, and on
       this page the shoulder read as a seam down the middle of the array. */
    linear-gradient(90deg,
      rgb(var(--mk-ink)/0.70) 0%,
      rgb(var(--mk-ink)/0.62) 10%,
      rgb(var(--mk-ink)/0.50) 20%,
      rgb(var(--mk-ink)/0.37) 30%,
      rgb(var(--mk-ink)/0.24) 39%,
      rgb(var(--mk-ink)/0.14) 47%,
      rgb(var(--mk-ink)/0.06) 55%,
      rgb(var(--mk-ink)/0.02) 64%,
      rgb(var(--mk-ink)/0.00) 72%,
      rgb(var(--mk-ink)/0.06) 84%,
      rgb(var(--mk-ink)/0.18) 92%,
      rgb(var(--mk-ink)/0.34) 100%),
    linear-gradient(180deg,
      rgb(var(--mk-ink)/0.52) 0%,
      rgb(var(--mk-ink)/0.22) 8%,
      transparent 16%,
      transparent 72%,
      rgb(var(--mk-ink)/0.26) 88%,
      rgb(var(--mk-ink)/0.56) 100%);
}
.scrim::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}


/* ── Header ───────────────────────────────────────────────────────────── */

.mk-header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--space-8);
  height:var(--space-16);
  padding:0 clamp(var(--space-5),5vw,var(--gutter-wide));
  background:linear-gradient(180deg,rgb(var(--mk-ink)/0.78),rgb(var(--mk-ink)/0.42));
  backdrop-filter:var(--blur-chrome);-webkit-backdrop-filter:var(--blur-chrome);
}
/* the bar has to dissolve into the sky, not terminate on a hard line across it */
.mk-header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:var(--gutter-wide);
  pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--mk-ink)/0.42),rgb(var(--mk-ink)/0));
}
.mk-brand{display:flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none}
.mk-brand:hover{color:inherit;text-decoration:none}
.mk-brand img{display:block;width:var(--space-7);height:var(--space-7);border-radius:var(--radius-xs)}
.mk-brand__name{
  font-family:var(--font-display);font-weight:var(--fw-display-medium);
  font-size:var(--text-title-3);line-height:1;
  letter-spacing:var(--tracking-display);color:var(--text-strong);
}
.mk-brand__meta{
  padding-left:var(--space-3);border-left:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);line-height:var(--lh-mono);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.mk-nav{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:var(--space-2) var(--space-7);
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
}
.mk-nav a{color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.mk-nav a:hover{color:var(--text-strong);text-decoration:none}

.mk-header > .s-btn{justify-self:end}

/* Sections menu. The nav used to be deleted outright below 880px, which left
   no way to reach any chapter but scrolling the whole page. The control lives
   in the brand cell so the header keeps its three-column balance, and the
   panel hangs off [data-open] — the same attribute pattern as .finding-card. */
.mk-nav-toggle{
  display:none;                            /* desktop shows the nav itself */
  justify-self:start;align-self:center;
  width:var(--tap-min);height:var(--tap-min);
  margin-left:calc(var(--space-2) * -1);
  padding:0;background:none;border:0;border-radius:var(--radius-sm);
  color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.mk-nav-toggle:hover{color:var(--text-strong)}
.mk-nav-toggle svg{display:block;margin:0 auto}
.mk-nav-toggle path{
  stroke:currentColor;stroke-width:1.25;stroke-linecap:square;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
  transform-origin:center;
}
/* Three rules fold to a cross. */
.mk-nav-toggle[aria-expanded="true"] path:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mk-nav-toggle[aria-expanded="true"] path:nth-child(2){opacity:0}
.mk-nav-toggle[aria-expanded="true"] path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}


@media (max-width:880px){
  .mk-brand__meta{display:none}
  .mk-nav-toggle{display:block}
  /* Closed is display:none, not opacity — a hidden nav must be out of the tab
     order, and marketing.js relies on the same attribute for aria-expanded. */
  .mk-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    flex-wrap:nowrap;gap:0;
    padding:var(--space-2) clamp(var(--space-5),5vw,var(--gutter-wide)) var(--space-4);
    background:rgb(var(--mk-ink)/0.94);
    backdrop-filter:var(--blur-chrome);-webkit-backdrop-filter:var(--blur-chrome);
    border-bottom:1px solid var(--line);
  }
  .mk-nav[data-open]{display:flex;animation:sightRise var(--dur-base) var(--ease-out) both}
  .mk-nav a{
    padding:var(--space-4) 0;
    border-bottom:1px solid var(--line);
    color:var(--text-body-color);
  }
  .mk-nav a:last-child{border-bottom:0}
}

/* ── Chapters ─────────────────────────────────────────────────────────── */

.mk-main{position:relative;z-index:3;pointer-events:none}
.chapter{
  position:relative;min-height:100svh;display:flex;
  padding:var(--space-32) clamp(var(--space-5),5vw,var(--gutter-wide));
}
.chapter > *{pointer-events:auto}
.chapter--hero{
  flex-direction:column;justify-content:center;
  padding:var(--space-24) clamp(var(--space-5),5vw,var(--gutter-wide)) 0;
}
.chapter--mid{align-items:center}
.chapter--right{align-items:center;justify-content:flex-end}
/* The report chapter is the one place the page has a second subject, so it
   is a two-column frame rather than a copy column floated to one side. */
.chapter--report{
  align-items:center;justify-content:space-between;
  gap:clamp(var(--space-8),5vw,var(--space-16));
}
.chapter--bottom{
  flex-direction:column;justify-content:flex-end;
  padding:var(--space-32) clamp(var(--space-5),5vw,var(--gutter-wide)) var(--space-20);
}

/* Measures. A text column is sized by how far the eye should travel, so
   these are set in rem against the type scale rather than in device pixels. */
.mk-block{position:relative;max-width:34rem}
.mk-block--wide{max-width:39rem}   /* the hero headline gets the long line */
.mk-block--lede{max-width:36rem}
.mk-block--flow{max-width:34rem}
.chapter--right .mk-block,
.chapter--report .mk-block{max-width:31rem;text-align:left}

/* Glass panel — the readable surface over the scene. One of the two
   backdrop blurs on the page that earns its cost. */
.glass{
  position:relative;
  padding:var(--space-8);
  background:rgb(var(--mk-ink)/0.86);
  backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop),inset 0 1px 0 var(--surface-hover);
}
.glass--findings{max-width:30rem}
.glass--start{max-width:31rem}

/* ── Type ─────────────────────────────────────────────────────────────────
   One display scale, two registers. The h1 is large and light; the h2 is
   less than half its size and a full weight heavier, so the two never read
   as the same voice at different volumes. */

/* Tracking is a function of rendered size, not of which rung the size came from.
   --text-hero spans 56px to 120px, so one em value cannot serve both ends: at
   120px Clash carries -0.03em well, and at 56px the same value closes the
   counters. Interpolating in px against the live font-size gives roughly
   -0.005em at the small end and -0.03em at the large end, which is the curve
   Apple's own display type follows (their tracking crosses zero near 40px). */
.mk-h1{
  --h1-size:var(--text-hero);
  margin:0;font-family:var(--font-display);font-weight:var(--fw-display-light);
  font-size:var(--h1-size);line-height:var(--lh-hero);
  letter-spacing:calc(2.63px - var(--h1-size) * 0.0519);
  color:var(--text-strong);text-wrap:balance;
  margin-left:-0.035em;   /* optical overhang: the round S must hang left of the flat body stems */
}
.mk-h2{
  /* between two rungs of the display scale, rather than a fresh clamp */
  --h2-size:clamp(var(--text-title-1),3.4vw,var(--text-display-2));
  margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--h2-size);
  line-height:var(--lh-display);
  /* 36px -> ~+0.002em, 48px -> ~-0.003em. The old flat -0.022em was ten times
     tighter than Apple runs at 36px, where they are still slightly positive. */
  letter-spacing:calc(0.70px - var(--h2-size) * 0.0175);
  color:var(--text-strong);text-wrap:balance;
}
.mk-lead{
  margin:var(--space-6) 0 0;max-width:41ch;font-family:var(--font-body);
  font-size:var(--text-lead);line-height:var(--lh-body);
  color:var(--text-body-color);text-wrap:pretty;
}
.mk-body{
  margin:var(--space-5) 0 0;font-family:var(--font-body);font-size:var(--text-body);
  line-height:var(--lh-body);color:var(--text-body-color);text-wrap:pretty;
}
.mk-body--measure{max-width:52ch}
.mk-dim{color:var(--text-muted)}
.mk-gold{color:var(--sand-400)}

/* Eyebrow row. Both wrappers do the same job; they differ only in which
   chapter they sit in. */
.mk-eyebrow,
.eyebrow-right{display:flex;justify-content:flex-start;margin-bottom:var(--space-5)}
.chapter--right .mk-block .s-eyebrow,
.chapter--report .mk-block .s-eyebrow{justify-content:flex-start}

/* Hero kicker. The rule is drawn here rather than shipped as empty <i>
   elements, and matches .s-eyebrow--rule exactly so the hero sits inside the
   chapter system instead of beside it. */
.hero-kicker{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.hero-kicker::before{content:"";width:26px;height:1px;background:var(--sand-400);flex:none}
.hero-kicker span{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);font-weight:var(--fw-body-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
}

/* Action rows. The buttons themselves are the design system's .s-btn — mono,
   uppercase, tracked, --radius-sm — with no marketing override. */
.hero-cta,
.mk-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);position:relative;z-index:1}
.hero-cta{margin-top:var(--space-8)}
.mk-actions{margin-top:var(--space-7)}

/* ── Findings list ────────────────────────────────────────────────────── */

.finding-list{display:flex;flex-direction:column;margin-top:var(--space-7);border-top:1px solid var(--line)}
.finding-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-3);
  width:100%;padding:var(--space-4) 0;background:none;border:0;
  border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;color:inherit;
  transition:background var(--dur-fast) var(--ease-out);
}
.finding-row:hover{background:var(--surface-hover)}
.finding-row[aria-expanded="true"]{background:var(--surface-active)}
.finding-row__id{
  font-family:var(--font-mono);font-size:var(--text-mono);
  letter-spacing:var(--tracking-mono);color:var(--text-strong);
}
/* This is a sentence, not a label. It was set 10px mono uppercase, which made
   "A third of this module earns nothing" a puzzle rather than a line. */
.finding-row__do{
  font-family:var(--font-body);font-size:var(--text-body-sm);
  line-height:1.4;color:var(--text-muted);
}
.finding-row__l{display:flex;flex-direction:column;gap:var(--space-1)}
.finding-row__r{display:flex;align-items:center;gap:var(--space-3)}
.finding-row__dt{
  font-family:var(--font-mono);font-size:var(--text-mono);
  font-variant-numeric:tabular-nums;
}
.finding-row__dt--critical{color:var(--sev-critical)}
.finding-row__dt--moderate{color:var(--sev-moderate)}
.finding-row__arrow{
  font-family:var(--font-mono);font-size:var(--text-mono);color:var(--text-faint);
  transition:color var(--dur-fast) var(--ease-out);
}
.finding-row:hover .finding-row__arrow{color:var(--text-strong)}
.finding-row[aria-expanded="true"] .finding-row__arrow{color:var(--sand-400)}

/* No 3D view means there is nothing to open. What goes away is the
   affordance — the arrow, the hover, the pointer — not the reading. The
   degraded hint says these three rows ARE the whole list, so they still have
   to be read; 0.7 is as far down as that allows (the coordinator asked for
   0.5, which drops the 11px mono under 4:1 on this surface). */
.finding-row[data-degraded]{opacity:0.7;cursor:default}
.finding-row[data-degraded]:hover{background:none}
.finding-row[data-degraded] .finding-row__arrow{visibility:hidden}

/* Also a sentence, and one the page depends on being read — it is the only
   place that says the scene is draggable. Mono keeps it in the instrument
   voice; sentence case at 11px keeps it a sentence. */
.finding-hint{
  margin:var(--space-5) 0 0;font-family:var(--font-mono);font-size:var(--text-mono-sm);
  line-height:var(--lh-mono);letter-spacing:var(--tracking-mono);color:var(--text-muted);
}

/* ── Twin: three-cell hairline grid ───────────────────────────────────── */

.hair-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:var(--space-7);background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
/* No backdrop blur: the cells are a hairline grid over the scene, and a
   third backdrop-filter over a live canvas is not worth its cost. */
.hair-grid > div{padding:var(--space-5);background:rgb(var(--mk-ink)/0.72)}
.hair-grid__k{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--sand-400);margin-bottom:var(--space-3);
}
.hair-grid p{margin:0;font-family:var(--font-body);font-size:var(--text-body-sm);line-height:var(--lh-body);color:var(--text-body-color)}

/* ── Flight: you provide / we hand back ───────────────────────────────── */

.exchange{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-10);
  max-width:34rem;
  margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--line-2);
}
.exchange__k{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2);
}
/* it is the half being emphasised — it has to actually be gold */
.exchange__k--gold{color:var(--sand-400)}
.exchange p{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--text-title-3);
  line-height:var(--lh-title);letter-spacing:var(--tracking-title);color:var(--text-strong);
}

/* ── The record ───────────────────────────────────────────────────────────
   Chapter 03 claims a document, so it shows one. Set as text rather than
   supplied as an image: it stays sharp at any zoom, it is selectable, and it
   cannot drift out of date the way a screenshot does.

   The surface is opaque on purpose. It is a printed artifact sitting in front
   of the scene, not another pane of glass — and an opaque fill is cheaper than
   a third backdrop-filter over a live canvas. */

.record{
  position:relative;z-index:1;margin:0;flex:0 1 27rem;
  padding:var(--space-6) var(--space-6) var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);
}
.record__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-bottom:var(--space-3);margin-bottom:var(--space-4);
  border-bottom:1px solid var(--line);
}
.record__std{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.record__ref{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-mono);color:var(--sand-400);
}

.record__grid{margin:0;display:grid;gap:var(--space-3)}
/* Label and value on one baseline, value hard right — the alignment a form of
   record has, so a reader can run down the values without reading the labels. */
.record__row{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;gap:var(--space-4);
}
.record__row dt{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;
}
.record__row dd{
  margin:0;text-align:right;
  font-family:var(--font-mono);font-size:var(--text-mono);
  letter-spacing:var(--tracking-mono);color:var(--text-body-color);
}
/* A spec block's headline number has to read as one. 15px against a 12px base
   is a 1.25x step, which is not a hierarchy — it is a rounding error. Display
   face, tabular figures, and enough size that the eye lands here first. */
.record__row--em{align-items:center}
.record__row--em dd{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--text-title-2);line-height:1;
  letter-spacing:var(--tracking-title);
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
}
.record__row--em .record__prov{vertical-align:middle}

/* Provenance, not decoration: it says the number came off an instrument. */
.record__prov{
  display:inline-block;margin-left:var(--space-2);
  font-size:var(--text-mono-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--slate-400);
}
.record__note{
  display:block;margin-top:2px;
  font-family:var(--font-body);font-size:var(--text-caption);
  letter-spacing:0;text-transform:none;color:var(--text-muted);
}

/* An absent value is absent. It is not zero, and it is not an error either —
   so it carries neither a number nor a severity colour, just a rule under the
   words and the reason it is missing. */
.record__row--absent dd{color:var(--text-muted)}
.record__absent{
  color:var(--text-muted);
  border-bottom:1px dashed var(--line-strong);
  padding-bottom:1px;
}

.record__rule{height:1px;background:var(--line);margin:var(--space-5) 0 var(--space-4)}
.record__sub{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-4);
}
.record__cap{
  margin:var(--space-5) 0 0;padding-top:var(--space-3);
  border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:var(--text-caption);
  line-height:var(--lh-body);color:var(--text-muted);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.mk-footer{
  position:relative;z-index:3;pointer-events:auto;
  background:var(--surface-page);border-top:1px solid var(--line);
}

/* ── Floating finding card ────────────────────────────────────────────── */

.finding-card{
  position:fixed;z-index:40;width:316px;   /* CARD_W in marketing.js */
  background:var(--surface-card);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);pointer-events:auto;
}
.finding-card[hidden]{display:none}

/* The animation used to sit on the base rule, where it ran once at parse time
   while the element was still [hidden] — and toggling `hidden` does not
   restart a CSS animation, so the card never animated on a real appearance.
   It now hangs off [data-open], which marketing.js removes, reflows, and
   re-adds on every selection, so each one replays. */
.finding-card[data-open]{animation:sightRise var(--dur-base) var(--ease-out) both}

.finding-card:focus{outline:none}
.finding-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.finding-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);
}
.finding-card__head span{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}
.finding-card__x{
  display:grid;place-items:center;width:var(--space-5);height:var(--space-5);background:none;
  border:1px solid var(--line-2);border-radius:var(--radius-xs);
  color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-mono-sm);
  line-height:1;cursor:pointer;transition:var(--transition-control);
}
.finding-card__x:hover{color:var(--text-strong);border-color:var(--line-strong)}
.finding-card__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}
.finding-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.finding-card__cls{
  font-family:var(--font-mono);font-weight:var(--fw-body-medium);font-size:var(--text-mono);
  letter-spacing:var(--tracking-mono);color:var(--text-strong);
}
.finding-card__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5)}
.finding-card__k{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}
.finding-card__v{
  font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-title-3);
  line-height:1;letter-spacing:var(--tracking-title);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
.finding-card__meter{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding-top:var(--space-3);border-top:1px solid var(--line);
}
.finding-card__conf{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}
.finding-card__note{margin:0;font-family:var(--font-body);font-size:var(--text-body-sm);line-height:var(--lh-body);color:var(--text-body-color)}
.finding-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.finding-card__coa{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--sand-400);
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width:640px){
  .hair-grid{grid-template-columns:1fr}
  .exchange{grid-template-columns:1fr;gap:var(--space-5)}
  .chapter{padding:var(--space-24) var(--space-5)}
  .chapter--hero{padding:var(--space-24) var(--space-5) 0}
  .chapter--bottom{padding:var(--space-24) var(--space-5) var(--space-16)}
  .glass{padding:var(--space-6) var(--space-5)}
  .finding-card{left:var(--space-3) !important;right:var(--space-3);width:auto;top:auto !important;bottom:var(--space-4)}
  .chapter--right{justify-content:flex-start}
  /* Defect 16: the record is the evidence for this chapter's whole claim, and at
     this size it was starting 395px down — you landed on the argument with the
     proof below the fold. The headline still leads, but the record follows it
     immediately and the prose gives way: the extract states the same facts more
     concretely than the paragraph describes them. Re-composed, not reflowed. */
  .chapter--report{flex-direction:column;justify-content:center;align-items:flex-start}
  .chapter--report .mk-block{order:-1}
  .chapter--report .mk-body{display:none}
  .record{flex:0 0 auto;width:100%;padding:var(--space-5) var(--space-5) var(--space-4)}
  .record__grid{gap:var(--space-2)}
  /* A note squeezed into the value column set three ragged right-aligned lines.
     At this width the two rows that carry one give the note the whole row. */
  .record__row--noted{grid-template-columns:1fr}
  .record__row--noted dd{text-align:left}
  .record__row--noted .record__note{text-align:left}

  /* Defect 12: stacked actions were 145px and 214px, flush left, so the right
     edge read as unresolved. Below this width they share one column. */
  .hero-cta,.mk-actions{flex-wrap:nowrap;flex-direction:column;align-items:stretch}
  .hero-cta .s-btn,.mk-actions .s-btn{width:100%}

  /* Defect 11: the findings panel was 350px of a 390px viewport and 588px tall,
     leaving only ~32% of the frame as reachable canvas — on the one chapter
     whose hint reads "drag to orbit, click any cell". The panel drops to the
     foot of the frame so the module itself owns the top of the viewport and is
     both visible and draggable. Re-composed for the size, not narrowed. */
  /* The panel goes to the floor of the frame: every pixel it gives back is
     scene the findings can be seen in, and this chapter's whole claim is that
     you can see the failing cell. */
  .chapter--mid{align-items:flex-end;padding-bottom:var(--space-4)}
  .chapter--mid .glass{margin-bottom:0}
  /* While a finding is open the panel stands down. The card is pinned to the
     foot of the frame at this width and already carries the whole readout, so
     the list behind it is repeating itself over the one thing the reader asked
     to see. Findings low on the module sit behind that panel otherwise. */
  body:has(.finding-card[data-open]) .glass--findings{
    opacity:0.08;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out);
  }
  .glass--findings{transition:opacity var(--dur-base) var(--ease-out)}
  .glass--findings .mk-body{display:none}   /* the list is the argument at this size */
}