/* ==========================================================================
   Reset and element defaults. Nothing here is page-specific.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
/* overflow-x:clip rather than hidden — hidden on a scroll container silently
   breaks the position:sticky module deck in SYS.02. */
html{ overflow-x:clip; scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); overflow-x:clip; transition:background-color .6s var(--ease-out), color .6s var(--ease-out); }

/* ==========================================================================
   MONO IS A ROLE, NOT THE DEFAULT.

   This line used to read font-family:var(--mono), which set the ENTIRE
   document in IBM Plex Mono -- every paragraph, FAQ answer, label and
   button. See tokens.css for why that changed.

   Because everything below inherited mono from body rather than declaring
   it, flipping that one line would have silently turned every readout on
   the site into the reading face too. So the readouts re-assert it here, in
   ONE place, and this list is the contract: text whose job is to be scanned
   in a fixed column -- an index, a coordinate, a tag, a control -- stays
   monospaced. Text whose job is to be READ does not.

   Of the nineteen selectors below, exactly one (.q-no, in faq.css) already
   declared mono for itself. The other eighteen inherited it. If a new label
   is added and it belongs to the console, add it here.
   ========================================================================== */
.eyebrow,                 /* hero tag */
.hk, .hv,                 /* HUD key/value */
.sys, .sh-note,           /* section index and note */
.m-sys, .m-tags,
.m-open,                  /* module control (.m-idx is NOT here: it is the
                             big outlined numeral and sections.css has always
                             set it in --display, not mono) */
.way-i,                   /* engagement index */
.way-facts dt,
.way-facts dd,            /* key/value pairs, aligned in a column */
.wl-k, .wl-t,             /* the step-by-step rail's label and caption */
.q-no,                    /* question number */
.pm-tag,                  /* phase tag */
.scrollcue,
.faq-cta,
.btn-primary, .btn-ghost{ /* controls: tracked uppercase, mono holds it */
  font-family:var(--mono);
}

/* Running prose takes the lifted step -- see --fs-prose in tokens.css. The
   .lede carries its own clamp, so it is scaled rather than replaced. */
.lede{ font-size:calc(clamp(14.5px,1.05vw,16.5px) * var(--prose-adj)); }
.m-sum, .way-p, .ph-meta p, .faq-aside p, .ans-inner{ font-size:var(--fs-prose); }

/* Mono was implicitly holding the measure down; a proportional face carries
   a longer line but not an unlimited one. 68ch is about 12 words. */
.m-sum, .way-p, .ans-inner{ max-width:68ch; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Keyboard focus must stay visible even though the page hides the cursor. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }
a{ color:inherit; text-decoration:none; }
/* Buttons default to the ARROW, not the hand -- only <a href> gets the hand
   for free. While the custom cursor was hiding the native one this made no
   difference; now that it is gone, every control has to say it is a control. */
button{ font:inherit; color:inherit; cursor:pointer; }
button:disabled{ cursor:not-allowed; }
summary{ cursor:pointer; }
label[for]{ cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }

/* <main> takes tabindex="-1" so the skip link can move focus to it. That
   makes it focusable by script but not by Tab — and it must not draw a
   ring around the whole page when it receives focus that way. */
main:focus{ outline:none; }