/* suhailmohebi.com · site.css (from the final reference system)
   One sheet. @layer order is the cascade; no priority overrides, no nesting, four width boundaries (640, 821, 1024, 1280).
   Loaded on every page; article.css adds the article column on /notes/* and /insights/*. Served immutable: a byte
   change moves the ?v pin in scripts/site-assets.mjs and scripts/asset-contract.json. */
@layer reset, tokens, base, layout, components, pages, utilities, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  ol, ul { padding-inline-start: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  a { color: inherit; }
}

@layer tokens {
  @font-face {
    font-family: "Register Display"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/register-display.woff2") format("woff2");
  }
  @font-face {
    font-family: "Register UI"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("/assets/fonts/register-ui-w100-v2.woff2") format("woff2");
  }
  @font-face {
    font-family: "Register Data"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/register-data-latin-v2.woff2") format("woff2");
  }
  /* Plex Sans Arabic, preloaded on /ar/* only; discovered by @font-face elsewhere and never requested without Arabic text. */
  @font-face {
    font-family: "Register Arabic"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/register-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  }
  /* Fallbacks carry the web fonts' metrics so headings do not jump when the real face arrives. */
  @font-face {
    font-family: "Register Display Fallback"; src: local("Georgia"), local("Times New Roman");
    size-adjust: 80%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%;
  }
  @font-face {
    font-family: "Register UI Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 101.5%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%;
  }

  :root {
    /* Grounds and inks (brief 2.1 / 5.10) */
    --paper: #f0ebdd; --paper-2: #e8e3d6; --forest: #101f1b; --forest-2: #152823;
    --ink: #172a22; --ink-2: #3e5147; --ink-3: #536255;
    --ivory: #f0ebdd; --ivory-2: #c2cbbf;
    --copper: #d7946b; --copper-ink: #945033; --copper-ink-2: #824129;
    --rule-light: rgb(23 42 34 / .18); --rule-dark: rgb(240 235 221 / .18);
    --ink-wash: rgb(23 42 34 / .07); --ivory-wash: rgb(240 235 221 / .08);

    /* Faces */
    --display: "Register Display", "Register Display Fallback", Georgia, "Times New Roman", serif;
    --sans: "Register UI", "Register UI Fallback", Arial, Helvetica, sans-serif;
    --mono: "Register Data", ui-monospace, Menlo, Consolas, monospace;
    --arabic: "Register Arabic", "Register UI", "Register UI Fallback", Arial, Helvetica, sans-serif;

    /* The five steps (phone values first, desktop values in the 640 query) */
    --d1: clamp(64px, 9vw, 136px); --d1-lh: .92; --d1-ls: -.03em;
    --d2: clamp(36px, 4.6vw, 68px); --d2-lh: 1.02; --d2-ls: -.02em;
    --d3: 20px; --d3-lh: 1.35;
    --body: 17px; --body-lh: 1.6;
    --small: 14px; --small-lh: 1.5;
    --row-title: 24px;

    /* Space: 4-base. The mark is drawn on 64 units; the header, the horizon bar and the section rhythm follow it. */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
    --gutter: clamp(20px, 5vw, 72px); --container: 1200px; --section: 80px; --header: 64px;
    /* The header row's two gaps are fluid on the narrowest phones: at 320 the brand, the Search icon and the Menu
       toggle would need 299 px of the wrap's 280 at the fixed gaps, so the row ran 19 px past the gutter (the
       reference wrapped the name instead). The row only overflowed below 340, so --nav-gap-2 is back at the
       reference's 12 px from 340 (4 px at 320) and --nav-gap at 24 px from 533; neither adds a width boundary. */
    --nav-gap: clamp(8px, 7.5vw - 16px, var(--s5)); --nav-gap-2: clamp(4px, 40vw - 124px, var(--s3));

    /* Motion */
    --ease: cubic-bezier(.16, 1, .3, 1); --t1: 120ms; --t2: 200ms; --t3: 320ms;

    /* Contextual tokens: the paper ground is the default; bands override them. */
    --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
    --link: var(--copper-ink); --link-hover: var(--copper-ink-2); --accent: var(--copper-ink);
    --rule: var(--rule-light); --wash: var(--ink-wash); --field: var(--paper-2);
    --focus: var(--copper-ink); --btn-bg: var(--ink); --btn-fg: var(--paper);
  }
  [data-tone="paper-2"] {
    --bg: var(--paper-2); --field: var(--paper);
  }
  [data-tone="forest"], .analytics-consent {
    --bg: var(--forest); --fg: var(--ivory); --fg-2: var(--ivory-2); --fg-3: var(--ivory-2);
    --link: var(--ivory); --link-hover: var(--copper); --accent: var(--copper);
    --rule: var(--rule-dark); --wash: var(--ivory-wash); --field: var(--forest-2);
    --focus: var(--copper); --btn-bg: var(--ivory); --btn-fg: var(--forest);
  }
  @media (min-width: 640px) {
    :root { --d3: 26px; --d3-lh: 1.3; --body: 18px; --row-title: 26px; }
  }
  @media (min-width: 1024px) {
    :root { --section: 144px; }
  }
}

@layer base {
  /* The canvas is forest, like the header, the footer and the theme-color, so overscroll above the header or
     below the footer never shows a paper band; body paints the paper ground over it. */
  html { background: var(--forest); color: var(--ink); color-scheme: light; }
  /* The Library's one sticky bar is 64 px tall; hash and keyboard landings clear it. */
  html.has-filter { scroll-padding-top: 80px; }
  body {
    font-family: var(--sans); font-size: var(--body); line-height: var(--body-lh);
    background: var(--bg); color: var(--fg); font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
  p, li, dd, figcaption, td, th { text-wrap: pretty; }
  a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
  a:hover { color: var(--link-hover); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  ::selection { background: var(--copper); color: var(--forest); }
  strong { font-weight: 600; }
  code, kbd, pre, samp { font-family: var(--mono); }
  time, .num { font-variant-numeric: tabular-nums; }
}

@layer layout {
  .wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .band { background: var(--bg); color: var(--fg); padding-block: var(--section); }
  .band-tight { padding-block: var(--s9); }
  .station { padding-block: var(--s8); }
  .d2.wide-title { max-width: 22ch; }
  .grid-2 { display: grid; gap: var(--s6); }
  .d1 { font-family: var(--display); font-size: var(--d1); line-height: var(--d1-lh); letter-spacing: var(--d1-ls); }
  .d2 { font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); max-width: 16ch; }
  .d3 { font-size: var(--d3); line-height: var(--d3-lh); max-width: 26em; }
  .small { font-size: var(--small); line-height: var(--small-lh); font-weight: 500; }
  .meta { font-size: var(--small); line-height: var(--small-lh); color: var(--fg-3); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center; }
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .copy { max-width: 36em; }
  .copy > * + * { margin-top: 1em; }
  @media (min-width: 1024px) {
    .grid-2 { grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
  }
}

@layer components {
  /* Skip link */
  /* Skip link: a 44 px ivory box at top 6, so the copper focus ring (2 px at 3 px offset) ends 9 px inside the 64 px
     forest header and reads 6.8:1 on every page, whatever band follows the header. The reference's 51 px box at
     top 8 let the ring's lower edge fall onto paper (2.1:1). */
  .skip { position: absolute; inset-inline-start: var(--gutter); top: 6px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px;
    background: var(--ivory); color: var(--forest); font-weight: 500; line-height: 1.2; text-decoration: none; translate: 0 -200%; }
  .skip:focus { translate: 0 0; outline-color: var(--copper); }

  /* Buttons (brief 5.7): one shape, square, 48 px, 15/500. Primary fill follows the band. */
  .btn-primary, .btn-small {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 48px; padding: 0 22px; background: var(--btn-bg); color: var(--btn-fg);
    font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: transform var(--t1) var(--ease), background-color var(--t2) var(--ease);
  }
  .btn-primary:hover, .btn-small:hover { color: var(--btn-fg); }
  .btn-primary:active, .btn-small:active { transform: scale(.98); }
  .btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .link-action {
    display: inline-flex; align-items: center; min-height: 48px; gap: .35em; padding: 0 2px;
    color: var(--link); font-size: 15px; font-weight: 500; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: .18em;
  }
  .link-action:hover { color: var(--link-hover); }
  [data-tone="forest"] .link-action { text-decoration-color: var(--copper); }
  button.link-action { line-height: 1.2; }

  /* Header: static 64 px forest bar, everything on the gutter */
  .site-header { background: var(--forest); color: var(--ivory); }
  .nav { display: flex; align-items: center; gap: var(--nav-gap); min-height: var(--header); }
  .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ivory); text-decoration: none; font-size: 20px; line-height: 1; font-family: var(--display); letter-spacing: -.01em; }
  .brand svg { width: 28px; height: 28px; flex: none; }
  .brand:hover { color: var(--ivory); }
  .nav-links { display: none; margin-inline-start: var(--s6); gap: var(--s5); }
  .nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ivory-2); font-size: 15px; font-weight: 500; text-decoration: none; }
  .nav-links a:hover { color: var(--ivory); }
  .nav-links a[aria-current] { color: var(--ivory); }
  .nav-links a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 2px; background: var(--copper); }
  .nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--nav-gap-2); }
  .nav-cta { display: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
  .nav-search, .nav-toggle { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--ivory-2); font-size: 15px; font-weight: 500; }
  /* The toggle's hit box ends on the gutter; its mark sits 2 px inside it at 320 and 10 px from 340 (tracks --nav-gap-2). */
  .nav-toggle { padding-inline-end: calc(var(--nav-gap-2) - 2px); }
  .nav-search:hover, .nav-toggle:hover { color: var(--ivory); }
  .nav-search svg { width: 18px; height: 18px; }
  .nav-search .kbd { display: none; font-size: 14px; color: var(--ivory-2); font-weight: 400; }
  .nav-search .palette-label { display: none; }
  .nav-toggle-mark { display: inline-grid; gap: 5px; width: 18px; }
  .nav-toggle-mark i { display: block; height: 2px; background: currentColor; }
  @media (min-width: 821px) {
    .nav-links { display: flex; }
    .nav-cta { display: inline-flex; }
    .nav-toggle { display: none; }
    /* Between 821 and 1023 the five links, the CTA and the Search icon need the tighter rhythm (the reference's
       gaps overflow by 57 px at 821); the reference values return at 1024 with the Search label. */
    .nav-links { gap: var(--s3); margin-inline-start: var(--s4); }
    .nav-actions { gap: var(--s2); }
    .nav-cta { padding: 0 14px; }
    .nav-search { padding: 0 6px; }
  }
  @media (min-width: 1024px) {
    .nav-search .palette-label, .nav-search .kbd { display: inline; }
    .nav-links { gap: var(--s5); margin-inline-start: var(--s6); }
    .nav-actions { gap: var(--s3); }
    .nav-cta { padding: 0 18px; }
    .nav-search { padding: 0 10px; }
  }

  /* Drawer (≤ 820): a page, not a list */
  .nav-drawer { position: fixed; inset: 0; z-index: 60; display: grid; }
  .nav-drawer-scrim { position: absolute; inset: 0; background: rgb(16 31 27 / .6); }
  .nav-drawer-panel { position: relative; justify-self: end; width: min(100%, 440px); height: 100%; overflow: auto; background: var(--forest); color: var(--ivory); padding: var(--s4) var(--gutter) var(--s7); display: grid; align-content: start; gap: var(--s6); }
  .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
  .nav-drawer-head p { font-family: var(--display); font-size: 24px; }
  .nav-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ivory); font-size: 28px; line-height: 1; }
  .drawer-search { display: flex; gap: var(--s2); }
  .drawer-search input { flex: 1; min-height: 48px; padding: 0 14px; background: var(--forest-2); color: var(--ivory); border: 1px solid var(--rule-dark); }
  .drawer-search input::placeholder { color: var(--ivory-2); }
  .drawer-links { display: grid; }
  .drawer-link { display: grid; gap: 2px; padding: 14px 0; color: var(--ivory); text-decoration: none; }
  .drawer-link strong { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; }
  .drawer-link small { font-size: 15px; color: var(--ivory-2); }
  .drawer-link[aria-current] strong { color: var(--copper); }
  /* The call to action is a button, not a sixth entry: one wide ivory field with its line inside. */
  .drawer-cta { display: block; padding: 12px 18px 14px; background: var(--ivory); color: var(--forest); text-decoration: none; }
  .drawer-cta strong { display: block; font-size: 17px; font-weight: 500; line-height: 1.4; }
  .drawer-cta small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink-2); }
  .drawer-cta:hover { color: var(--forest); background: var(--copper); }
  .drawer-latest { display: grid; gap: 4px; }
  .drawer-latest span { font-size: 14px; color: var(--ivory-2); font-weight: 500; }
  .drawer-latest a { font-family: var(--display); font-size: 22px; line-height: 1.15; color: var(--ivory); text-decoration: none; }
  .drawer-latest a:hover { color: var(--copper); }
  .drawer-utility { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
  /* Every utility link is a 44 px target: the short labels (Now, العربية, الآن) centre in a 44 px box. */
  .drawer-utility a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ivory-2); font-size: 15px; font-weight: 500; text-decoration: none; }
  .drawer-utility a:hover { color: var(--ivory); }
  @media (min-width: 821px) { .nav-drawer { display: none; } }

  /* Search overlay (hooks kept from site-search.js) */
  .palette-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(16 31 27 / .62); display: grid; align-items: start; justify-items: center; padding: 0; }
  .palette { width: min(720px, 100%); max-height: 100svh; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--paper); color: var(--ink); }
  .palette-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--paper-2); }
  .palette-head svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
  .palette-head input { flex: 1; min-width: 0; min-height: 48px; background: none; border: 0; font-size: 18px; color: var(--ink); outline: none; }
  .palette-head input::placeholder { color: var(--ink-3); }
  .palette-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 26px; color: var(--ink-2); }
  .palette-status { padding: 10px var(--s4) 0; font-size: 14px; font-weight: 500; color: var(--ink-3); min-height: 31px; }
  .palette-results { overflow: auto; padding: var(--s2) var(--s2) var(--s3); }
  .palette-group { padding: 10px 8px 2px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
  .palette-item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s4); align-items: baseline; padding: 10px 8px; text-decoration: none; color: var(--ink); border-inline-start: 2px solid transparent; }
  .palette-item:hover, .palette-item[aria-selected="true"] { background: var(--paper-2); color: var(--ink); border-inline-start-color: var(--copper); }
  .palette-item strong { font-weight: 500; font-size: 17px; }
  .palette-item mark { background: none; color: var(--copper-ink); font-weight: 600; }
  .palette-item .palette-meta { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
  .palette-item .palette-line { grid-column: 1 / -1; font-style: normal; font-size: 15px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .palette-foot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) var(--s4); background: var(--paper-2); }
  .palette-foot button, .palette-foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--copper-ink); text-decoration: underline; text-underline-offset: .18em; }
  .palette-foot .palette-count { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
  @media (min-width: 640px) {
    .palette-backdrop { padding: 10vh var(--gutter); }
    .palette { max-height: 80svh; }
  }

  /* Section head: D2 + one sentence, on the gutter. */
  .section-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
  .section-head p { max-width: 36em; color: var(--fg-2); }
  .head-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: end; justify-content: space-between; }

  /* Ledger row: date 14 tabular · serif title · one line · right meta. Space separates rows, not lines. */
  .rows { display: grid; gap: var(--s5); }
  .row { position: relative; display: grid; gap: 6px var(--s5); padding-inline-start: 14px; margin-inline-start: -14px; }
  .row::before { content: ""; position: absolute; inset-block: 2px; inset-inline-start: 0; width: 2px; background: var(--copper); opacity: 0; transition: opacity var(--t2) var(--ease); }
  .row:hover::before, .row:focus-within::before { opacity: 1; }
  .row-date { font-size: var(--small); line-height: 1.5; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
  .row-title { font-family: var(--display); font-size: var(--row-title); line-height: 1.15; letter-spacing: -.01em; }
  .row-title a { color: var(--fg); text-decoration: none; }
  .row-title a::after { content: ""; position: absolute; inset: 0; }
  .row:hover .row-title a, .row-title a:focus-visible { color: var(--link-hover); }
  [data-tone="forest"] .row:hover .row-title a { color: var(--copper); }
  .row-line { color: var(--fg-2); font-size: 17px; line-height: 1.5; max-width: 42em; }
  .row-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--small); line-height: 1.5; font-weight: 500; color: var(--fg-3); }
  .row-meta a { position: relative; z-index: 1; color: var(--link); display: inline-block; padding-block: 12px; margin-block: -12px; }
  .row-main { display: grid; gap: 6px; }
  .row-thumb { display: none; }
  @media (min-width: 640px) {
    .row { grid-template-columns: 112px 1fr; }
    .row-main { grid-template-columns: 1fr auto; column-gap: var(--s6); }
    .row-main .row-title { grid-column: 1; }
    .row-main .row-line { grid-column: 1; }
    .row-main .row-meta { grid-column: 2; grid-row: 1 / span 2; justify-content: end; align-content: start; text-align: end; display: grid; gap: 2px; }
  }
  @media (min-width: 1024px) {
    .rows-thumbs .row { grid-template-columns: 112px 96px 1fr; }
    .row-thumb { display: block; width: 96px; height: 64px; object-fit: cover; margin-top: 2px; }
  }

  /* Note (3 px copper rule, body size), Checklist, Pull quote */
  .note { border-inline-start: 3px solid var(--copper); padding-inline-start: 20px; }
  .note p { max-width: 36em; }
  .checklist { background: var(--field); padding: var(--s5); display: grid; gap: var(--s3); }
  .checklist h3 { font-family: var(--sans); font-weight: 600; font-size: 24px; line-height: 1.25; }
  .checklist ul { list-style: none; display: grid; gap: 10px; }
  .checklist li { position: relative; padding-inline-start: 22px; }
  .checklist li::before { content: ""; position: absolute; inset-inline-start: 1px; top: .55em; width: 8px; height: 8px; background: var(--accent); rotate: 45deg; }
  .pull { font-family: var(--display); font-size: 28px; line-height: 1.2; letter-spacing: -.01em; border-inline-start: 3px solid var(--copper); padding-inline-start: 20px; max-width: 24em; }
  .pull footer { font-family: var(--sans); font-size: var(--small); font-weight: 500; color: var(--fg-3); margin-top: 10px; }

  /* Table: no outer box, bold caption above, 2 px header rule, 1 px 30% rows, first column 600, numbers right. */
  .table-wrap { overflow-x: auto; }
  .table { width: 100%; font-size: 16px; line-height: 1.5; }
  .table caption { text-align: start; font-weight: 600; padding-bottom: 12px; caption-side: top; }
  .table th, .table td { text-align: start; vertical-align: top; padding-block: 12px; padding-inline: 0 16px; }
  .table thead th { font-weight: 600; border-bottom: 2px solid var(--fg); }
  .table tbody th, .table tbody td { border-bottom: 1px solid rgb(23 42 34 / .3); }
  [data-tone="forest"] .table tbody th, [data-tone="forest"] .table tbody td { border-bottom-color: rgb(240 235 221 / .3); }
  .table tbody th { font-weight: 600; }
  .table td[data-num], .table th[data-num] { text-align: end; font-variant-numeric: tabular-nums; }
  /* Tables wider than a phone stack, each cell under its column name (brief 5.9). */
  @media (max-width: 639px) {
    .table-stack thead { display: none; }
    .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; }
    .table-stack tbody tr { padding: 12px 0; border-bottom: 1px solid rgb(23 42 34 / .3); }
    .table-stack tbody th, .table-stack tbody td { border: 0; padding: 2px 0; text-align: start; }
    .table-stack td::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 500; color: var(--fg-3); padding-top: 6px; }
    .table-stack td[data-num] { text-align: start; }
  }

  /* Code figure: forest block, 15 px mono, caption + Copy */
  .code { display: grid; background: var(--forest); color: var(--ivory); }
  .code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: 8px 0; padding-inline: 20px 8px; }
  .code figcaption { font-size: 14px; font-weight: 500; color: var(--ivory-2); overflow-wrap: anywhere; }
  .code-copy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--copper); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
  .code-copy:hover { color: var(--ivory); }
  .code pre { margin: 0; padding: 12px 20px 20px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
  .code-scroll pre { white-space: pre; overflow-x: auto; }
  .code pre:focus-visible { outline-color: var(--copper); outline-offset: -2px; }

  /* Steps: a real ol under one copper bar; numbers in small type; horizontal from 1024. */
  .steps { list-style: none; counter-reset: step; display: grid; gap: var(--s4); padding-top: 14px; border-top: 2px solid var(--accent); }
  .steps li { counter-increment: step; display: grid; gap: 4px; align-content: start; }
  .steps li::before { content: counter(step); font-size: var(--small); font-weight: 500; color: var(--fg-3); }
  .steps strong { font-weight: 600; font-size: 16px; }
  .steps span { font-size: 16px; color: var(--fg-2); }
  @media (min-width: 1024px) { .steps { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

  /* Data card: dl, two columns ≥ 1024, big-number variant */
  .data { display: grid; gap: var(--s4) var(--s6); font-size: 16px; line-height: 1.5; }
  .data div { display: grid; gap: 2px; align-content: start; }
  .data dt { font-weight: 600; }
  .data dd { color: var(--fg-2); }
  .data-big dt { font-family: var(--display); font-size: 36px; line-height: 1.1; letter-spacing: -.01em; font-weight: 400; }
  @media (min-width: 1024px) { .data { grid-template-columns: 1fr 1fr; } .data-big { grid-template-columns: repeat(3, 1fr); } }

  /* Figure: caption below, never a label over the picture */
  .figure img { width: 100%; }
  .figure figcaption { margin-top: 10px; font-size: var(--small); line-height: var(--small-lh); font-weight: 500; color: var(--fg-3); }
  .figure figcaption a { color: var(--link); }

  /* Bars: a chart drawn from a page's own numbers. The SVG has no viewBox, so its text stays 14 and 16 px at every width. */
  .bars { width: 100%; display: block; overflow: visible; }
  .bars text { font-family: var(--sans); font-size: 16px; font-weight: 400; fill: var(--fg); }
  .bars .bar-value { font-weight: 500; font-variant-numeric: tabular-nums; text-anchor: end; }
  .bars .axis-text { font-size: 14px; font-weight: 500; fill: var(--fg-3); }
  .bars .bar { fill: var(--ink-2); }
  .bars .bar-hi { fill: var(--copper-ink); }
  .bars .bar-range { stroke: var(--fg); stroke-width: 2; }
  .bars .baseline { stroke: var(--fg); stroke-width: 2; }
  .bars-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; font-weight: 500; color: var(--fg-3); margin-top: 10px; }
  .bars-key i { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px; background: var(--ink-2); }
  .bars-key i.hi { background: var(--copper-ink); }
  .bars-key i.range-key { width: 16px; height: 2px; vertical-align: 4px; background: var(--fg); }

  /* Plate: full-bleed photograph, a flat forest scrim, copy bottom-left on the gutter */
  .plate { position: relative; background: var(--forest); color: var(--ivory); }
  .plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .plate-copy { padding: var(--s6) var(--gutter) var(--s7); display: grid; gap: var(--s4); background: var(--forest); }
  .plate-copy p { max-width: 34em; color: var(--ivory-2); }
  @media (min-width: 1024px) {
    .plate img { aspect-ratio: 16 / 9; max-height: 760px; }
    /* The scrim is flat forest at 80%: 60% cannot hold 4.5:1 for ivory-2 over a bright photograph, so the floor wins. */
    .plate-copy { position: absolute; inset-inline-start: max(var(--gutter), (100% - var(--container)) / 2); bottom: var(--s8); width: min(560px, 100% - 2 * var(--gutter)); padding: var(--s6); background: rgb(16 31 27 / .8); }
  }

  /* Ruler: five flat copper segments, labels beneath, horizontal at every width. Every track is at least its label's
     longest word (min-content), so "Diagnose" and "Decide" stay whole at 320–414 and the 2:2:3:2:1 proportions hold
     wherever the words fit; under a real 200 % zoom the figure scrolls sideways instead of breaking a word or
     escaping the page. build-sprint.mjs checks these columns against the plan's spans. */
  .ruler { display: grid; grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 2fr) minmax(min-content, 3fr) minmax(min-content, 2fr) minmax(min-content, 1fr); gap: 4px; overflow-x: auto; }
  .ruler div { display: grid; gap: 10px; }
  .ruler i { display: block; height: 8px; background: var(--copper); }
  .ruler b { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; overflow-wrap: normal; }
  .ruler small { display: block; font-size: 14px; line-height: 1.3; color: var(--fg-3); overflow-wrap: normal; }

  /* Chips: text with a 2 px copper bar under the current one; never a filled rectangle. */
  .chips { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; }
  .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 2px; color: var(--fg-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
  .chip:hover { color: var(--link-hover); }
  .chip[aria-current], .chip[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }

  /* FAQ: details with a 44 px question row; space, not rules, between items */
  .faq { display: grid; gap: var(--s2); max-width: 44em; }
  .faq details { padding-block: 4px; }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 44px; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--fg); }
  .faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: 45deg; flex: none; margin-top: -4px; transition: rotate var(--t2) var(--ease); }
  .faq details[open] summary::after { rotate: -135deg; margin-top: 4px; }
  .faq summary:hover { color: var(--link-hover); }
  .faq details p { padding: 4px 0 12px; max-width: 36em; color: var(--fg); }
  .faq details p + p { padding-top: 0; }

  /* Film: a video in a 16:9 frame with native controls */
  .film { aspect-ratio: 16 / 9; background: var(--forest); }
  .film video { width: 100%; height: 100%; }
  /* Tab moves from the video into its native controls, which sit in the browser’s shadow tree where :focus-visible
     never reaches the page; the frame draws the ring while one of them has focus (a click on the picture focuses
     the video itself and draws none). */
  .film:focus-within:not(:has(video:focus)) { outline: 2px solid var(--focus); outline-offset: 3px; }

  /* Tool: a form in a paper-2 field, the verdict first. The tracks are minmax(0, 1fr) and the controls fill them, so a
     long option ("Qwen 3.8 Flash-Next (MoE, 180B)") shrinks inside its select instead of widening the column. Two
     columns from 640: the tool sits in the 640 px reading column, where four tracks would be 139 px wide and cut
     "RTX 5090 · 32 GiB" and "Qwen 3.8 27B (dense)" short. */
  .tool { background: var(--field); padding: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tool-verdict { font-size: var(--d3); line-height: var(--d3-lh); }
  .tool-verdict strong { font-weight: 600; }
  .tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* A group of fields the tool shows or hides together (custom hardware, custom model) joins the field grid */
  .tool-fields > div { display: contents; }
  .tool-fields label { display: grid; gap: 4px; align-content: start; font-size: 14px; font-weight: 500; color: var(--fg-2); }
  .tool-fields select, .tool-fields input { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-light); font-size: 16px; font-weight: 400; }
  .tool-fields [aria-invalid="true"] { border-color: var(--copper-ink); box-shadow: inset 3px 0 0 var(--copper-ink); }
  /* A field's error message, under its control */
  .tool-fields label span { color: var(--copper-ink); }
  .tool-numbers { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; color: var(--fg-2); }
  .tool-numbers b { color: var(--fg); font-weight: 600; }
  /* The result's notes and the measurement line under the numbers */
  .tool ul, .tool p:not([class]) { font-size: 16px; line-height: 1.5; }
  @media (max-width: 639px) {
    /* Phones: the verdict stays at the top of the viewport while the fields scroll under it; a control or link reached
       by Shift+Tab stops below it (the calculator writes the verdict's height to --tool-verdict-h) */
    .tool-verdict { position: sticky; top: 0; z-index: 1; margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0; padding: var(--s5) var(--s5) var(--s3); background: var(--field); }
    .tool :is(select, input, a) { scroll-margin-top: calc(var(--tool-verdict-h, 160px) + var(--s3)); }
  }
  @media (min-width: 640px) { .tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Ring: the six-station loop drawn as one circle with HTML labels (every label a link, 14 px or larger) */
  .ring { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin-inline: auto; }
  .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ring circle { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .ring a { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; justify-items: center; gap: 2px; width: max-content; max-width: 180px; min-width: 44px; min-height: 44px; padding: 6px 10px; background: var(--bg); color: var(--fg); text-decoration: none; text-align: center; }
  .ring a strong { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.1; }
  .ring a small { font-size: 14px; font-weight: 500; color: var(--fg-3); }
  .ring a:hover strong { color: var(--link-hover); }
  .ring .ring-centre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-align: center; max-width: 11em; font-size: 14px; font-weight: 500; color: var(--fg-3); }
  .ring .ring-centre b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--fg); }
  @media (max-width: 639px) {
    .ring a strong { font-size: 18px; }
    .ring a small, .ring .ring-centre span { display: none; }
  }

  /* Template card: title, purpose, use when, meta, actions, method */
  .tcards { display: grid; gap: var(--s4); }
  .tcard { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); background: var(--field); scroll-margin-top: 80px; }
  .tcard h3 { font-family: var(--display); font-size: var(--row-title); line-height: 1.15; letter-spacing: -.01em; }
  .tcard p { color: var(--fg-2); font-size: 17px; line-height: 1.5; }
  .tcard .use-when { color: var(--fg); font-size: 16px; }
  .tcard .use-when strong { font-weight: 600; }
  .tcard .meta { font-weight: 500; }
  .tcard .actions { gap: var(--s2) var(--s5); }
  .tcard .link-action { min-height: 44px; min-width: 44px; font-size: 14px; }
  .tpreview summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--link); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
  .tpreview[open] summary { color: var(--link-hover); }
  .tpreview pre a { color: var(--copper); }
  .tpreview pre { margin-top: var(--s3); max-height: 420px; overflow: auto; padding: var(--s4); background: var(--forest); color: var(--ivory); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  .tcard .method { font-size: 15px; color: var(--fg-2); }
  .tcard .method a { color: var(--link); }
  @media (min-width: 821px) { .tcards { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
  @media (min-width: 1280px) { .tcards { grid-template-columns: repeat(3, 1fr); } }

  /* Doors (home) and hub cards: serif title, one sentence, one text action */
  .doors { display: grid; gap: var(--s6); }
  .door { display: grid; gap: 8px; }
  .door h3 { font-family: var(--display); font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
  /* 8 px of padding with -4 px margins: a 46.8 px hit box on the 28 px title without moving a pixel of layout */
  .door h3 a { display: inline-block; padding-block: 8px; margin-block: -4px; color: var(--fg); text-decoration: none; }
  .door h3 a:hover { color: var(--link-hover); }
  .door p { color: var(--fg-2); max-width: 30em; }
  .door .link-action { min-height: 44px; }
  @media (min-width: 1024px) { .doors { gap: var(--s7); } .doors-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

  /* Footer: forest, name at 20 px, one sentence, four columns, fact line */
  .site-footer { background: var(--forest); color: var(--ivory); padding-block: var(--s9) var(--s7); }
  .footer-top { display: grid; gap: var(--s7); }
  .footer-id { display: grid; gap: var(--s3); align-content: start; }
  .footer-id p { color: var(--ivory-2); max-width: 24em; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .footer-cols h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--ivory); }
  .footer-cols ul { list-style: none; display: grid; }
  .footer-cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ivory-2); font-size: 15px; text-decoration: none; }
  .footer-cols a:hover { color: var(--ivory); }
  .footer-bottom { margin-top: var(--s8); display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s5); font-size: 13px; color: var(--ivory-2); }
  .footer-bottom a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ivory-2); text-decoration: none; }
  .footer-bottom a:hover { color: var(--ivory); }
  .footer-bottom .fact { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; }
  @media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1024px) { .footer-top { grid-template-columns: 5fr 7fr; } }

  /* An owner gap: visible, never faked */

  /* Consent prompt (analytics.js appends it to the end of body on a first visit): it stays in page flow after the
     footer, a forest-2 field on the one gutter, 14 px text, 44 px controls, under 96 px tall at 1280. The drawer and
     the overlay make it inert with the rest of the page. Its tokens are the forest set (see the tokens layer). */
  .analytics-consent { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6);
    padding-block: var(--s4); padding-inline: max(var(--gutter), (100% - var(--container)) / 2); background: var(--forest-2); color: var(--ivory); }
  .analytics-consent > div:first-child { flex: 1 1 320px; min-width: 0; }
  .analytics-consent strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
  .analytics-consent p { font-size: 14px; line-height: 1.5; color: var(--ivory-2); max-width: 60em; }
  .analytics-consent a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ivory); text-decoration-color: var(--copper); }
  .analytics-consent a:hover { color: var(--copper); }
  .analytics-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
  .analytics-consent button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
  .analytics-consent [data-analytics-choice="deny"] { color: var(--ivory-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--copper); text-underline-offset: .18em; }
  .analytics-consent [data-analytics-choice="deny"]:hover { color: var(--ivory); }
  .analytics-consent [data-analytics-choice="allow"] { background: var(--ivory); color: var(--forest); transition: transform var(--t1) var(--ease); }
  .analytics-consent [data-analytics-choice="allow"]:active { transform: scale(.98); }

  /* Arabic pages (/ar/*, html[lang="ar"][dir="rtl"]): the Plex Sans Arabic face carries the Arabic runs through
     --arabic, display sizes drop their negative tracking and take the taller Arabic line, the Latin brand name keeps
     the serif, and the English rows inside the drawer and the overlay read left to right. Everything else mirrors
     through the logical properties above. */
  html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .d1, html[lang="ar"] .d2, html[lang="ar"] .d3, html[lang="ar"] .row-title,
  html[lang="ar"] .nav-drawer-head p, html[lang="ar"] .drawer-link strong, html[lang="ar"] .door h3, html[lang="ar"] .lane-head h2 { font-family: var(--arabic); letter-spacing: 0; }
  html[lang="ar"] .d1, html[lang="ar"] .d2, html[lang="ar"] .row-title, html[lang="ar"] .drawer-link strong, html[lang="ar"] .nav-drawer-head p { line-height: 1.3; }
  html[lang="ar"] .brand { font-family: var(--display); }
  html[lang="ar"] .drawer-latest a, html[lang="ar"] .palette-item { direction: ltr; }
  html[lang="ar"] .drawer-latest a { text-align: end; }
  /* The overlay's field follows the page: the Arabic placeholder and caret start at the end edge beside the search
     icon (an LTR field put them at the far edge next to the close button); a typed English query still reads left
     to right because the field takes its direction from its own first strong character. */
  html[lang="ar"] .palette-head input { direction: rtl; unicode-bidi: plaintext; }
  /* The shortcut label is a Latin run: isolated LTR, so it reads ⌘K and not K⌘ inside the RTL header. */
  html[lang="ar"] .nav-search .kbd { direction: ltr; unicode-bidi: isolate; }
  html[lang="ar"] .nav-links { gap: var(--s4); margin-inline-start: var(--s5); }
  /* The Arabic labels are longer: between 821 and 1023 the header keeps the Menu toggle and the drawer, and the
     five links appear at 1024 with the Search label. The brand name and a label never wrap. */
  .brand, .nav-links a { white-space: nowrap; }
  @media (min-width: 821px) {
    html[lang="ar"] .nav-links { display: none; }
    html[lang="ar"] .nav-toggle { display: inline-flex; }
    html[lang="ar"] .nav-drawer { display: grid; }
  }
  @media (min-width: 1024px) {
    html[lang="ar"] .nav-links { display: flex; }
    html[lang="ar"] .nav-toggle { display: none; }
    html[lang="ar"] .nav-drawer { display: none; }
  }
}

@layer pages {
  /* ---------- Home ---------- */
  .hero { background: var(--forest); color: var(--ivory); position: relative; overflow-x: clip; }
  .hero .wrap { min-height: calc(min(100svh, 820px) - var(--header)); display: grid; gap: var(--s5); padding-block: var(--s5) var(--s7); align-content: start; }
  .hero h1 { max-width: 14ch; order: 1; }
  .hero-chart { order: 2; display: grid; gap: 4px; justify-items: center; }
  .hero-copy { order: 3; display: grid; gap: var(--s5); align-content: start; }
  .hero-copy .d3 { color: var(--ivory-2); }
  .hero-facts { display: grid; gap: 6px; font-size: var(--small); line-height: var(--small-lh); font-weight: 500; color: var(--ivory-2); }
  .hero-facts a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ivory); text-decoration-color: var(--copper); }
  .hero-facts a:hover { color: var(--copper); }
  .hero-facts .latest { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
  .hero-facts .latest span { color: var(--copper); }
  .hero .actions { padding-top: var(--s2); }
  .hero .btn-primary { width: 100%; }
  @media (min-width: 640px) { .hero .btn-primary { width: auto; } }
  @media (min-width: 1024px) {
    .hero .wrap { grid-template-columns: 6fr 6fr; gap: var(--s8); align-items: center; align-content: center; padding-block: var(--s7); }
    .hero h1 { grid-column: 1; grid-row: 1; align-self: end; }
    .hero-copy { grid-column: 1; grid-row: 2; align-self: start; }
    .hero-chart { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  }

  /* The star chart: the mark at 10×. The hexagon, its horizon bar and the copper star are the mark's own geometry. */
  .chart { position: relative; aspect-ratio: 1; width: min(100%, 320px); }
  .chart-plate { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .chart-plate .dome { fill: var(--forest-2); }
  .chart-plate .horizon { fill: var(--copper); }
  /* Stars are zero-length round-capped strokes with vector-effect: non-scaling-stroke, so a star keeps its pixel size at every chart width. */
  .chart-plate .star, .chart-plate .star-glow { fill: none; stroke: var(--ivory); stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke var(--t2) var(--ease), opacity var(--t2) var(--ease); }
  .chart-plate .star-glow { opacity: .1; }
  .chart-plate .star-note { stroke: var(--ivory-2); opacity: .62; }
  .chart-plate .star.lit, .chart-plate .star.is-hover { stroke: var(--copper); opacity: 1; }
  .chart-plate .suhail { fill: var(--copper); }
  .chart-plate .suhail-halo { fill: var(--copper); opacity: .22; }
  /* Constellation lines exist only while a star is hovered or focused: the chart stays calm at rest. */
  .chart-plate .links line { stroke: var(--copper); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
  .chart-index { position: absolute; inset: 0; display: none; pointer-events: none; }
  .chart-index a, .chart-names a { pointer-events: auto; }
  .chart-index a { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 28px; height: 28px; display: block; text-decoration: none; color: var(--ivory); }
  .chart-index a[data-kind="note"] { width: 24px; height: 24px; }
  .chart-index a::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; background: rgb(215 148 107 / .35); opacity: 0; transition: opacity var(--t2) var(--ease); }
  .chart-index a:hover::before, .chart-index a:focus-visible::before { opacity: 1; }
  .chart-index a:focus-visible { outline: none; }
  .chart-index a:focus-visible::before { outline: 2px solid var(--copper); outline-offset: 2px; }
  .star-label { position: absolute; left: 30px; top: 50%; translate: 0 -50%; display: grid; gap: 2px; width: max-content; max-width: 220px; padding: 10px 12px; background: var(--forest); color: var(--ivory); font-size: 14px; line-height: 1.35; font-weight: 500; opacity: 0; pointer-events: none; z-index: 3; transition: opacity var(--t2) var(--ease); }
  .star-label small { font-size: 14px; font-weight: 400; color: var(--ivory-2); }
  .flip .star-label { left: auto; right: 30px; }
  .chart-index a:hover .star-label, .chart-index a:focus-visible .star-label { opacity: 1; }
  .chart-index a:hover, .chart-index a:focus-visible { z-index: 4; }
  .chart-names { position: absolute; inset: 0; pointer-events: none; }
  .chart-names a { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ivory-2); text-decoration: none; }
  /* Keep chart labels readable where narrow screens place bright stars behind them. */
  .chart-names a:not(.name-suhail) { background: var(--forest); }
  .chart-names a:hover { color: var(--copper); }
  /* The name has no ground: build-observatory keeps every star out of its glyph footprint (NAME_KEEP_OUT), so the pixel-sampled contrast holds on the 280 and 320 px plates and no disc is cut beside it */
  .chart-names .name-suhail { color: var(--copper); font-family: var(--display); font-size: 18px; font-weight: 400; translate: 0 -50%; }
  .chart-names .name-suhail:hover { color: var(--ivory); }
  .chart-skip { position: absolute; z-index: 5; padding: 10px 14px; background: var(--ivory); color: var(--forest); text-decoration: none; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; }
  .chart-skip:focus { opacity: 1; pointer-events: auto; }
  /* Below 821 the chart is a picture with a tap path: the readout names the nearest star and offers a 44 px link. */
  .chart-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 36px; width: 100%; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ivory-2); }
  .chart-readout strong { color: var(--ivory); font-weight: 500; }
  .chart-readout a { display: inline-flex; align-items: center; min-height: 44px; color: var(--copper); text-decoration-color: var(--copper); }
  @media (min-width: 640px) { .chart { width: min(100%, 420px); } }
  @media (min-width: 821px) {
    .chart-index { display: block; }
    .chart-readout { display: none; }
  }
  @media (min-width: 1024px) { .chart { width: min(100%, 560px); } }

  /* Guides band rows with stills */
  .guides { display: grid; gap: var(--s6); }
  .guide { position: relative; display: grid; gap: var(--s3); }
  .guide img { display: none; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .guide:first-child img { display: block; }
  .guide h3 { font-family: var(--display); font-size: var(--row-title); line-height: 1.15; letter-spacing: -.01em; }
  .guide h3 a { color: var(--ivory); text-decoration: none; }
  .guide h3 a::after { content: ""; position: absolute; inset: 0; }
  .guide:hover h3 a { color: var(--copper); }
  .guide p { color: var(--ivory-2); font-size: 17px; line-height: 1.5; max-width: 40em; }
  .guide-meta { font-size: var(--small); font-weight: 500; color: var(--ivory-2); }
  @media (min-width: 640px) {
    .guide { grid-template-columns: 200px 1fr; gap: 4px var(--s5); align-items: start; }
    .guide img { display: block; width: 200px; height: 133px; grid-row: 1 / span 3; }
    .guide h3 { grid-column: 2; }
    .guide p, .guide-meta { grid-column: 2; }
  }

  /* ---------- Hub pages (Library, Local AI, Templates, Field notes, Now, About, How I work, the sprint) ---------- */
  .hub-head { padding-block: var(--s6) var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hub-head .meta-long { display: none; }
  .hub-head .d3 { color: var(--fg-2); }
  .hub-head .meta { font-weight: 500; }
  .hub-section { padding-block: var(--s6) 0; scroll-margin-top: 80px; }
  /* The 96 px of paper before the footer belongs to the hub, not to its last lane: a filter may hide that lane, and the
     gap must hold in every filter state (design-spec §3), the flat "Newest first" lane and the empty state included. */
  .library { padding-bottom: var(--s9); }
  .lane-head { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s5); align-items: baseline; margin-bottom: var(--s4); }
  .lane-head p { grid-column: 1; }
  .lane-head .lane-count { grid-column: 2; grid-row: 1; }
  .lane-head h2 { font-family: var(--display); font-size: 30px; line-height: 1.1; letter-spacing: -.015em; }
  .lane-head p { color: var(--fg-2); max-width: 36em; }
  .lane-head .lane-count { font-size: var(--small); font-weight: 500; color: var(--fg-3); white-space: nowrap; }
  @media (min-width: 640px) {
    .hub-head { padding-block: var(--s8) var(--s6); }
    .hub-head .meta-long { display: inline; }
    .hub-section { padding-block: var(--s7) 0; }
    .lane-head { margin-bottom: var(--s5); }
    .lane-head h2 { font-size: 36px; }
  }

  /* ---------- Library ---------- */
  /* One sticky element: the 64 px search-and-sort bar. The chips sit under it and scroll away. */
  .filter-bar { position: sticky; top: 0; z-index: 20; background: var(--paper); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-block: 8px; }
  .filter-search { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: var(--paper-2); }
  .filter-search svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
  .filter-search input { flex: 1; min-width: 0; min-height: 46px; background: none; border: 0; outline: none; font-size: 17px; color: var(--ink); }
  .filter-search input::placeholder { color: var(--ink-3); }
  /* The field's ring is drawn on the label (the input itself has outline: none): copper-ink on the bar's paper, 5.1:1 */
  .filter-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  .filter-bar .count { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
  .count-tail { display: none; }
  .filter-sort { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 500; color: var(--ink-3); }
  .library select { min-height: 44px; padding: 0 10px; background: var(--paper-2); border: 0; color: var(--ink); font-size: 14px; font-weight: 500; }
  .filter-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--copper-ink); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; flex: none; }
  .filter-chips-wrap { display: grid; gap: 2px; padding-block: var(--s2) var(--s3); }
  .filter-chips.chips-wrap { flex-wrap: wrap; overflow: visible; }
  .filter-chips { display: flex; flex-wrap: nowrap; gap: 0 20px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; margin: -2px -4px; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip { flex: none; }
  .filter-chips span.lbl { font-size: 14px; font-weight: 500; color: var(--ink-3); flex: none; min-width: 3em; }
  .lane[hidden], .library.is-filtered .lane-count { display: none; }
  .empty { display: none; padding-block: var(--s7) 0; gap: var(--s5); }
  .empty h2 { font-family: var(--display); font-size: 36px; line-height: 1.1; }
  .library.is-empty .empty { display: grid; }
  .library.is-flat .lane-head { display: none; }
  .library.is-flat .lane { padding-block: 0; }
  @media (min-width: 640px) {
    .count-tail { display: inline; }
    .filter-chips { flex-wrap: wrap; overflow: visible; }
  }

  /* ---------- Field notes ---------- */
  .entry { position: relative; display: grid; gap: 8px; scroll-margin-top: 80px; }
  .entry .row-title a::after { content: none; }
  .entry .row-title a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .entry-body { max-width: 42em; color: var(--fg); font-size: 17px; line-height: 1.55; }
  .entry-body a { color: var(--link); }
  .entry-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; font-size: var(--small); font-weight: 500; color: var(--fg-3); }
  .entry-meta a { color: var(--link); display: inline-flex; align-items: center; min-height: 44px; }
  .entries { display: grid; gap: var(--s6); }
  @media (min-width: 640px) {
    .entry { grid-template-columns: 112px 1fr; }
    .entry .row-date { grid-row: 1 / span 3; }
    .entry .row-title, .entry-body, .entry-meta { grid-column: 2; }
  }

  /* ---------- About ---------- */
  .about-hero { display: grid; gap: var(--s6); }
  .about-hero .d1 { max-width: 7ch; }
  .about-lines { display: grid; gap: var(--s4); }
  .about-lines p { max-width: 30em; color: var(--fg-2); }
  .about-contact { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: center; font-size: 15px; font-weight: 500; color: var(--fg-3); }
  .reads { display: grid; gap: var(--s5); }

  /* ---------- 404 ---------- */
  .notfound { background: var(--forest); color: var(--ivory); min-height: calc(100svh - var(--header)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: var(--s8); }
  .notfound .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); width: min(720px, 100% - 2 * var(--gutter)); }
  .notfound p { color: var(--ivory-2); max-width: 34em; }
  .notfound form { display: flex; gap: var(--s2); }
  .notfound input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; background: var(--forest-2); color: var(--ivory); border: 1px solid var(--rule-dark); font-size: 17px; }
  .notfound input::placeholder { color: var(--ivory-2); }
  .notfound .rows { gap: var(--s3); }
  .notfound .row { grid-template-columns: 1fr; }
  .notfound .row-title { font-size: 22px; }
  .notfound .row-title a { display: block; padding-block: 10px; }

  /* ---------- Now ---------- */
  .now-list { list-style: none; display: grid; gap: var(--s3); font-size: 17px; line-height: 1.5; max-width: 42em; }
  .now-list .state { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--fg-3); }
  .changed { list-style: none; display: grid; gap: var(--s3); max-width: 42em; }
  .changed li { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); font-size: 17px; line-height: 1.5; }
  .changed time { font-size: 14px; font-weight: 500; color: var(--fg-3); padding-top: 3px; }

  /* ---------- Styleguide ---------- */
  .sg section { padding-block: var(--s8); scroll-margin-top: 24px; }
  .sg h2.sg-title { font-family: var(--display); font-size: 36px; line-height: 1.1; margin-bottom: var(--s5); }
  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
  .swatch { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
  .swatch i { display: block; aspect-ratio: 3 / 2; }
  .sg-row { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
  .sg-row > small { font-size: 14px; font-weight: 500; color: var(--fg-3); }
  .sg-demo { padding: var(--s6); }
  .sg-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .sg-gap { display: grid; gap: var(--s6); }
  @media (min-width: 640px) { .sg-gap { grid-template-columns: 200px 1fr; } }
}

@layer utilities {
  [hidden] { display: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nowrap { white-space: nowrap; }
  .end { text-align: end; }
  .mt-4 { margin-top: var(--s4); }
  .mt-6 { margin-top: var(--s6); }
  .mw-text { max-width: 36em; }
  .mw-wide { max-width: 720px; }
  @media print {
    .site-header, .nav-drawer, .palette-backdrop, .sections-bar, .skip, .filter-bar, .chart-readout, .analytics-consent { display: none; }
    /* Printed without background graphics, the forest blocks came out as pale text on white: code prints as ink in a
       ruled box, the tail keeps only the author line, and the footer's links are left to the screen. */
    .code { background: none; color: var(--ink); border: 1px solid var(--ink-3); }
    .code figcaption { color: var(--ink-2); }
    .code pre { max-block-size: none; overflow: visible; }
    .code-copy, .tail > :not(.author-line), .site-footer { display: none; }
  }
  @media (forced-colors: active) {
    .row, .guide, .door, .palette-item, .tcard, .entry { border-bottom: 1px solid CanvasText; padding-bottom: 8px; }
    .chart-plate .star, .chart-plate .horizon, .ruler i, .steps, .note, .chip[aria-current] { forced-color-adjust: none; }
  }
}

@layer motion {
  /* One signature move per page: the chart draws once. Entrances are 320 ms, 60 ms apart, from first paint. */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes rise-solid { from { transform: translateY(12px); } to { transform: none; } }
  @keyframes star-in { from { opacity: 0; } }
  @keyframes star-in-note { from { opacity: 0; } to { opacity: .62; } }
  @keyframes star-in-halo { from { opacity: 0; } to { opacity: .22; } }
  @keyframes star-in-glow { from { opacity: 0; } to { opacity: .1; } }
  .rise { animation: rise var(--t3) var(--ease) both; animation-delay: var(--delay, 0ms); }
  /* The h1 is the LCP element: it rises at full opacity from first paint, so no browser discounts it as a hidden candidate. */
  h1.rise { animation-name: rise-solid; }
  .chart-plate .star, .chart-plate .suhail, .chart-plate .suhail-halo, .chart-plate .star-glow { animation: star-in var(--t3) var(--ease) both; animation-delay: calc(140ms + var(--i, 0) * 11ms); }
  .chart-plate .star-note { animation-name: star-in-note; }
  .chart-plate .suhail-halo { animation-name: star-in-halo; }
  .chart-plate .star-glow { animation-name: star-in-glow; }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation-name: star-in; }
    h1.rise { animation: none; }
    .chart-plate .star, .chart-plate .suhail, .chart-plate .suhail-halo, .chart-plate .star-glow { animation: none; }
    .btn-primary, .btn-small, .faq summary::after { transition: none; }
  }
}