/* ════════════════════════════════════════════════════════════════════════════
   THE SINGULARITY · SYSTEM — the shared chamfer component layer, site-wide.
   The single definition of the design language's components: the chamfer
   technique, panels/cards/terminal, buttons, form inputs, the nav cage, the
   blog reading surface, and the rationed Accretion accent discipline.
   SHAPE: top-left + bottom-right corners cut at 45° (clip-path), top-right +
   bottom-left softly rounded, the hairline following the cut via a two-layer
   ::before/::after border.
   Geometry / accent / control tokens live in tokens.css (single source of truth).
   Load order on every page: fonts → tokens → system → <page-layout>.
   ════════════════════════════════════════════════════════════════════════════ */

/* the shared chamfer polygon helper is written literally in each rule (one level of
   var() — a nested custom-property var resolves to an invalid clip-path:none). */

/* ── FRAME · the chamfered cage (landing scroll pages; form pages keep their own
   relative position via the more-specific .stage--form .frame in landing.css) ───── */
.frame{ isolation: isolate; overflow: visible; border: 0 !important; background: transparent !important; --c: 22px; }
#page1 .frame, .page .frame{ position: absolute; padding: var(--nav-h) var(--grout) var(--grout); }
.frame::before, .frame::after{ content:''; position:absolute; pointer-events:none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.frame::after{ inset:0; z-index:-2; background: var(--line); }
.frame::before{ inset:0; z-index:-1; background: var(--bg, var(--void-900));
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }

/* ── NAV · the fixed landing nav adopts the chamfer + docks to the frame top ────── */
.nav--fixed{ isolation: isolate; background: transparent !important; border: 0 !important; --c: var(--cut);
  top: var(--ins); left: var(--ins); right: var(--ins); }
.nav--fixed::before, .nav--fixed::after{ content:''; position:absolute; pointer-events:none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.nav--fixed::after{ inset:0; z-index:-2; background: var(--line); }
.nav--fixed::before{ inset:0; z-index:-1; background: var(--bg, var(--void-900));
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.nav--fixed > *{ position: relative; z-index: 1; }

/* ── PANELS / CARDS / TERMINAL · two-layer chamfer border. Colour follows --bg. ─── */
.land__hero, .land__intro, .card, .term, .grant-card, .foot2__word{
  position: relative; isolation: isolate; background: transparent !important; border: 0 !important; box-shadow: none; border-radius: 0 !important; }
.land__hero::before, .land__hero::after, .land__intro::before, .land__intro::after,
.card::before, .card::after, .term::before, .term::after,
.grant-card::before, .grant-card::after, .foot2__word::before, .foot2__word::after{
  content:''; position:absolute; pointer-events:none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.land__hero::after, .land__intro::after, .card::after, .term::after, .grant-card::after, .foot2__word::after{ inset:0; z-index:-2; background: var(--line); }
.land__hero::before, .land__intro::before, .card::before, .term::before, .grant-card::before, .foot2__word::before{ inset:0; z-index:-1; background: var(--bg, var(--void-900));
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.land__hero, .land__intro, .term, .grant-card, .foot2__word{ --c: var(--cut); }
.card{ --c: var(--cut-card); }

/* ── LANDING layout (inert on form/blog pages — no matching elements) ──────────── */
.land{ gap: var(--grout); }
.land__col{ display: flex; flex-direction: column; gap: var(--grout); min-height: 0; }
.land__col .land__hero{ flex: 1; align-items: flex-start; justify-content: center; padding: clamp(24px,2.4vw,40px) clamp(26px,2.8vw,48px); }
.land__hero .rule{ display: none; }
.land__intro{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-05); padding: clamp(24px,2.4vw,40px) clamp(26px,2.8vw,48px); }
/* zoomed-out hero type */
.hero__title{ font-size: clamp(2.3rem, 4.1vw, 3.7rem); line-height: 1.0; letter-spacing: -0.025em; margin: 0; }
.hero__sub{ font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.5; max-width: 42ch; margin: 0; }
.hero__cta{ margin-top: var(--space-02); }
.cards{ background: transparent !important; border: 0 !important; gap: var(--grout); }
.card{ justify-content: flex-start !important; }
.card .card__lead{ margin-top: 0 !important; }
.card .card__num{ margin-bottom: var(--space-04); }
.foot2__bar{ gap: var(--grout); margin-top: var(--grout); }

/* ── ASCII viewport · chamfered field with a 1px cut border ─────────────────────── */
.land__viz{ position: relative; --c: var(--cut); background: var(--line) !important; border: 0 !important;
  border-radius: 0 var(--round) 0 var(--round) !important;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); overflow: hidden; }
.land__viz .viz__field{ position: absolute; inset: 0; border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }

/* ── BUTTONS + nav CTA · chamfered controls ──────────────────────────────────────
   .btn--primary is a SOLID white fill — the fill IS the shape, so it only needs the
   clip-path (no border cage). .btn--ghost + .nav__cta carry a visible 1px hairline,
   which a bare clip-path would cut OFF the two diagonal edges — so they use the
   two-layer ::before/::after cage so the border follows ALL edges incl. the cuts.
   Hover family is standardised: every control lightens its fill + shifts its complete
   border to --paper-50, and the two .btn variants share the same -1px lift. ──────── */

/* primary — solid fill, already a clean shape: just the cut + soft corners */
.btn--primary{ --c: var(--cut-btn); border-radius: 0 var(--round) 0 var(--round) !important;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }

/* ghost + nav CTA — complete-border cage (1px hairline on every edge, incl. the cuts) */
.btn--ghost, .nav__cta{
  position: relative; isolation: isolate; background: transparent !important; border: 0 !important;
  --c: var(--cut-btn); border-radius: 0 var(--round) 0 var(--round) !important; }
.btn--ghost::after, .btn--ghost::before, .nav__cta::after, .nav__cta::before{
  content:''; position:absolute; pointer-events:none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
/* ::after = the 1px border layer · ::before = the fill, inset 1px */
.btn--ghost::after, .nav__cta::after{ inset:0; z-index:-2; background: var(--gray-500); }
.btn--ghost::before{ inset:0; z-index:-1; background: rgba(244,243,240,0.09);
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.nav__cta::after{ background: var(--line); }
.nav__cta::before{ inset:0; z-index:-1; background: rgba(244,243,240,0.06);
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.btn--ghost > *, .nav__cta > *{ position: relative; z-index: 1; }
/* Canonical CTA typography — lives here (not landing.css) so the blog, which doesn't
   load landing.css, renders the exact same button. */
.nav__cta{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.72em 1.15em; white-space: nowrap; color: var(--ink, var(--paper-50)); }
/* Hover = clean INVERSION for BOTH the ghost button and the nav CTA: solid paper fill +
   ink label, so the label never washes out against the lightened fill. */
.btn--ghost, .nav__cta{ transition: color 160ms cubic-bezier(0.2,0,0,1); }
.btn--ghost:hover::after, .nav__cta:hover::after,
.btn--ghost:hover::before, .nav__cta:hover::before{ background: var(--paper-50); }
.btn--ghost:hover, .nav__cta:hover{ color: var(--void-900); }

/* ── Crafted micro-interactions — a sliding Accretion underline on the nav links
   (also marks the active page). The accent is rationed, so this is the one place it
   animates in the bar. ──────────────────────────────────────────────────────── */
.nav__links a{ position: relative; }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background: var(--accretion); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms cubic-bezier(0.2,0,0,1); }
.nav__links a:hover::after, .nav__links a:focus-visible::after,
.nav__links a.is-current::after, .nav__links a[aria-current="page"]::after{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){ .nav__links a::after, .btn--ghost, .nav__cta{ transition: none; } }

/* ── FORM INPUTS · chamfered recessed fields (interest / grant). Light theme inverts. */
.stage--form .field input, .stage--form .field textarea{
  --c: var(--cut-btn); border: 0 !important; background: rgba(244,243,240,0.05) !important;
  border-radius: 0 8px 0 8px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  padding: 0.7em 0.85em !important; }
/* focus ring must be INSET — clip-path crops an outer outline/offset on a chamfered input (r5). */
.stage--form .field input:focus, .stage--form .field textarea:focus{ outline: none; box-shadow: inset 0 0 0 2px var(--accretion); }
/* Light treatment fires on BOTH the static .stage--light alias AND [data-theme="paper"]
   (the theme toggle now drives the forms, which no longer carry .stage--light). */
.stage--light .field input, .stage--light .field textarea,
[data-theme="paper"] .stage--form .field input, [data-theme="paper"] .stage--form .field textarea{ background: rgba(8,8,10,0.05) !important; }
.stage--light .frame::before, .stage--light .grant-card::before,
[data-theme="paper"] .frame::before, [data-theme="paper"] .grant-card::before{ background: var(--paper-50); }
/* light theme — invert the cage layers (the fill lives in ::before, the hairline in ::after) */
.stage--light .btn--ghost::before, .stage--light .nav__cta::before,
[data-theme="paper"] .btn--ghost::before, [data-theme="paper"] .nav__cta::before{ background: rgba(8,8,10,0.06); }
.stage--light .btn--ghost::after, .stage--light .nav__cta::after,
[data-theme="paper"] .btn--ghost::after, [data-theme="paper"] .nav__cta::after{ background: rgba(8,8,10,0.18); }
/* light-mode hover = inversion the other way: solid ink fill + paper label (both controls) */
.stage--light .btn--ghost:hover::after, .stage--light .nav__cta:hover::after,
.stage--light .btn--ghost:hover::before, .stage--light .nav__cta:hover::before,
[data-theme="paper"] .btn--ghost:hover::after, [data-theme="paper"] .nav__cta:hover::after,
[data-theme="paper"] .btn--ghost:hover::before, [data-theme="paper"] .nav__cta:hover::before{ background: var(--void-900); }
.stage--light .btn--ghost:hover, .stage--light .nav__cta:hover,
[data-theme="paper"] .btn--ghost:hover, [data-theme="paper"] .nav__cta:hover{ color: var(--paper-50); }

/* ════ ACCRETION · one disciplined signature accent — dots, indices, glyphs, edges ═══ */
@keyframes acc-pulse{ 0%,100%{ box-shadow: 0 0 0 0 var(--accretion-edge); opacity: 1; } 50%{ box-shadow: 0 0 0 5px rgba(255,106,26,0); opacity: .78; } }
.cards .card__num{ color: var(--accretion-text); }
.term__prompt{ color: var(--accretion-text); }
.term__caret{ background: var(--accretion); }
.grant-card__eyebrow, .iform-eyebrow, .kicker, .section-kicker{ color: var(--accretion-text); }
.btn:focus-visible, .nav__cta:focus-visible, .nav__links a:focus-visible, .foot2__brand:focus-visible,
.nav__brand:focus-visible, .nav__toggle:focus-visible, .nav__burger:focus-visible,
.card:focus-visible, .card__cta:focus-visible, .term__cta:focus-visible, .grant-card:focus-visible{
  outline: 2px solid var(--accretion); outline-offset: 3px; }
.card__cta:hover, .card__cta:focus-visible,
.grant-card:hover .grant-card__cta, .grant-card:focus-visible .grant-card__cta{ color: var(--accretion-text); }

/* ════════════════════════════════════════════════════════════════════════════
   THE SIGNAL (blog) · carry the chamfer language onto the editorial reading
   surface. Scoped to .page-blog so the forms' .nav/.card aren't touched.
   Principle: chamfer the NAV cage + the ASCII media VIEWPORTS (cut-corner panels,
   exactly like the landing's field), keep the post cards OPEN below — structure
   from air, never box-in-box.
   ════════════════════════════════════════════════════════════════════════════ */
/* 1 · neutralise the global panel-box chamfer where it misfires on the open layout */
.page-blog .land__hero, .page-blog .card{ background: transparent !important; isolation: auto; }
.page-blog .land__hero::before, .page-blog .land__hero::after,
.page-blog .card::before, .page-blog .card::after{ content: none !important; }

/* 2 · nav → floating chamfer cage (matches the landing nav) */
.page-blog .nav{ isolation: isolate; background: transparent !important; border: 0 !important; --c: var(--cut); }
.page-blog .nav::before, .page-blog .nav::after{ content:''; position:absolute; inset:0; pointer-events:none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.page-blog .nav::after{ z-index:-2; background: var(--frame-line); }
.page-blog .nav::before{ inset:0; z-index:-1; background: var(--bg);
  clip-path: polygon(calc(var(--c) + 0.41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--c) - 0.41px), calc(100% - var(--c) - 0.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--c) + 0.41px)); }
.page-blog .nav > *{ position: relative; z-index: 1; }
.page-blog .nav__toggle{ border-radius: 0 6px 0 6px; --c: 7px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }

/* 3 · ASCII media viewports → chamfered cut-corner panels (hero · featured · cards).
   The panel paints the hairline; the field sits 1px inside, both clipped. */
.page-blog .land__viz, .page-blog .feat__media, .page-blog .card__media{
  border: 0 !important; background: var(--frame-line) !important; overflow: hidden; --c: var(--cut-card);
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.page-blog .land__viz .viz__field, .page-blog .feat__field, .page-blog .card__field{
  /* canvas is a replaced element — width:auto would collapse it to its 300×150 intrinsic
     size (the P0 bug). Pin it 1px inside the panel with an explicit fill. */
  top: 1px !important; left: 1px !important; right: auto !important; bottom: auto !important;
  width: calc(100% - 2px) !important; height: calc(100% - 2px) !important;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(calc(var(--c) - 0.59px) 0, 100% 0, 100% calc(100% - var(--c) + 0.59px), calc(100% - var(--c) + 0.59px) 100%, 0 100%, 0 calc(var(--c) - 0.59px)); }
/* float the large hero / featured panels off their text columns so the cut reads */
.page-blog .land__viz{ margin: var(--grout); }
.page-blog .feat__media{ margin: var(--grout); }

/* 4 · accent discipline — the featured CTA + card category tick carry Accretion on hover */
.page-blog .feat:hover .feat__cta{ color: var(--accretion-text); }
.page-blog .card:hover .card__cat{ color: var(--accretion-text); }
.page-blog .progress{ background: var(--accretion); }

/* ════════════════════════════════════════════════════════════════════════════
   CANONICAL NAV — one bar shared by every marketing surface (index/blog/grant/
   interest). Loaded last, so it is the single source of truth for layout: brand +
   primary links group LEFT, a single spacer, then the utility cluster (theme
   toggle + CTA) pinned RIGHT — consistently, on every page. Positioning/cage
   styling stays per-surface (landing.css .nav--fixed, blog.css .nav).
   ════════════════════════════════════════════════════════════════════════════ */
.nav__brand{ flex: none; }
.nav__mark{ width: 32px; height: 32px; flex: none; background-color: currentColor;
  -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.nav__links{ margin-left: 0; }                 /* links sit beside the brand, NOT pushed right */
.nav__spacer{ flex: 1 1 auto; }                /* the single divider — everything after it is right-aligned */
.nav__menu{ display: contents; }               /* desktop: children flow directly into the .nav flex row */

/* Dark/Light theme switch — complete-chamfer cage, driven by semantic tokens so it
   reads correctly in both themes and on every surface. */
.nav__toggle{ position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.45em; flex: none;
  background: transparent; border: 0; cursor: pointer; padding: 0.5em 0.75em; --c: 7px;
  border-radius: 0 6px 0 6px; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute, #9C9CA4); }
.nav__toggle::after{ content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background: var(--line, var(--frame-line, rgba(244,243,240,0.22))); border-radius: 0 6px 0 6px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 120ms; }
.nav__toggle::before{ content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none;
  background: var(--bg, var(--void-900)); border-radius: 0 6px 0 6px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 120ms; }
.nav__toggle:hover::after{ background: var(--ink, var(--paper-50)); }
.nav__toggle__lbl{ transition: color 120ms; }
.nav__toggle__lbl.is-on{ color: var(--ink, var(--paper-50)); }
.nav__toggle__sep{ opacity: 0.4; }

/* Mobile hamburger — a real <button>, keyboard-operable (replaces the checkbox hack). */
.nav__burger{ display: none; flex-direction: column; justify-content: center; gap: 5px; flex: none;
  width: 42px; height: 42px; padding: 11px; background: transparent; cursor: pointer;
  border: 1px solid var(--line, var(--frame-line, rgba(244,243,240,0.22)));
  transition: border-color 120ms; }
.nav__burger span{ display: block; height: 1.5px; width: 100%; background: var(--ink, var(--paper-50));
  transition: transform 180ms cubic-bezier(0.2,0,0,1), opacity 120ms; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 780px){
  .nav{ position: relative; }                  /* anchor the drawer on the static form-page navs … */
  .nav--fixed, .page-blog .nav{ position: fixed; }   /* … without unpinning the fixed landing/blog navs */
  .nav__burger{ display: flex; margin-left: auto; }  /* burger pinned to the same (right) side everywhere */
  .nav__menu{ position: absolute; top: 100%; left: -1px; right: -1px; z-index: 2;
    display: flex; flex-direction: column; gap: 0;
    background: var(--bg, var(--void-900)); border: 1px solid var(--line, var(--frame-line, rgba(244,243,240,0.22))); border-top: none;
    transform: scaleY(0); transform-origin: top; opacity: 0; pointer-events: none;
    transition: transform 200ms cubic-bezier(0.2,0,0,1), opacity 160ms; }
  .nav__menu.is-open{ transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav__menu:not(.is-open){ visibility: hidden; }                 /* leave the tab order when closed */
  .nav__menu.is-open{ visibility: visible; }
  .nav__links{ flex-direction: column; gap: 0; }
  .nav__links a{ padding: 1.05em clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--line, var(--frame-line, rgba(244,243,240,0.16))); }
  .nav__spacer{ display: none; }
  .nav__toggle{ margin: 0.9em clamp(18px, 2vw, 30px); align-self: flex-start; }
  .nav__menu .nav__cta{ border: none; border-radius: 0 !important; background: transparent; clip-path: none !important;
    padding: 1.05em clamp(18px, 2vw, 30px); text-align: left; }
  .nav__menu .nav__cta::before, .nav__menu .nav__cta::after{ content: none !important; }
  /* the drawer CTA has no cage fill — keep its label on the theme foreground (not the
     invert), so it never washes out against the drawer's own background. */
  .nav__menu .nav__cta:hover{ color: var(--ink, var(--paper-50)); }
}
@media (prefers-reduced-motion: reduce){
  .nav__menu, .nav__burger span{ transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DOCS hand-off modal — DOCS is its own surface; this themed dialog confirms the
   jump, then opens the docs in a new tab (built in nav.js).
   ════════════════════════════════════════════════════════════════════════════ */
.docsmodal{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-05); }
.docsmodal[hidden]{ display: none; }
.docsmodal__scrim{ position: absolute; inset: 0; background: rgba(8,8,10,0.6);
  opacity: 0; transition: opacity 200ms cubic-bezier(0.2,0,0,1); }
.docsmodal.is-open .docsmodal__scrim{ opacity: 1; }
[data-theme="paper"] .docsmodal__scrim{ background: rgba(8,8,10,0.32); }
.docsmodal__panel{ position: relative; isolation: isolate; max-width: 30rem; width: 100%;
  padding: clamp(28px, 4vw, 44px); --c: var(--cut, 14px);
  background: var(--bg, var(--void-900)); color: var(--ink, var(--paper-50));
  border-radius: 0 var(--round, 14px) 0 var(--round, 14px);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  box-shadow: 0 0 0 1px var(--line, var(--frame-line, rgba(244,243,240,0.18))), 0 24px 60px -20px rgba(0,0,0,0.6);
  transform: translateY(8px) scale(0.98); opacity: 0; transition: transform 220ms cubic-bezier(0.2,0,0,1), opacity 200ms; }
.docsmodal.is-open .docsmodal__panel{ transform: none; opacity: 1; }
.docsmodal__kicker{ font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accretion-text); margin: 0 0 var(--space-03); }
.docsmodal__title{ font-family: var(--font-sans); font-weight: var(--w-medium); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 var(--space-03); }
.docsmodal__lead{ font-family: var(--font-sans); font-weight: var(--w-light); font-size: 1rem; line-height: 1.5; color: var(--ink-soft, var(--gray-200)); margin: 0 0 var(--space-05); }
.docsmodal__actions{ display: flex; align-items: center; gap: var(--space-04); flex-wrap: wrap; }
.docsmodal__cancel{ background: transparent; border: 0; cursor: pointer; padding: 0.6em 0.4em;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute, #9C9CA4); transition: color 120ms; }
.docsmodal__cancel:hover{ color: var(--ink, var(--paper-50)); }

/* ── TYPE RENDERING · the brand-wide kerning foundation ─────────────────────────
   Intentional micro-typography, everywhere system.css loads (every page):
   real kerning pairs + ligatures on, size-graded tracking via the tokens scale
   (--tr-display-2xl … --tr-mono-num — never a one-off letter-spacing), balanced
   headline rags, no orphans in running text, quotes that hang their punctuation.
   Clash Grotesk Variable carries kern/liga tables; Space Mono is fixed-pitch, so
   kerning is a no-op there by design — its rhythm comes from the tracking scale. */
html{ font-kerning: normal; font-optical-sizing: auto; }
body{ font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .hero__title, .lock__title{ text-wrap: balance; }
p, li, blockquote{ text-wrap: pretty; }
blockquote{ hanging-punctuation: first; }
/* mono numerals (dates, read-times, counts) sit tabular so columns never shimmer */
.mono-num, time.mono, .bar__read{ font-variant-numeric: tabular-nums; letter-spacing: var(--tr-mono-num); }