/* ═══════════════════════════════════════════════════════════════════════════
   PEACE INTEL · REFERENCE CHROME
   The specimen sheet's own furniture, shared by brand-guide.html and
   archive.html: plate numbering, spec heads, the theme bar, the archive sheet.
   Not part of the delivered system; a product page never loads it.
   ═══════════════════════════════════════════════════════════════════════════ */
  /* ── Reference-page chrome only. Not part of the delivered system. ────────── */
  body { padding-bottom: var(--sp-26) }

  .ctrl {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-8);
    display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap;
  }
  .ctrl-g { display: flex; align-items: center; gap: var(--sp-3) }
  .ctrl-l {
    font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls);
    text-transform: uppercase; color: var(--ink-55); white-space: nowrap;
  }
  .ctrl .spacer { margin-left: auto }
  .ctrl .seg button { font-size: var(--eb-4); padding: var(--sp-2) var(--sp-3) }
  /* A control that is only a word: the label's own type, an underline that
     firms up on hover. The archive and the sheet's actions use it, so the bar
     reads as one line of labels rather than a row of buttons. */
  .ctrl-meta { gap: var(--sp-4) }
  .ctrl-link {
    font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls);
    text-transform: uppercase; white-space: nowrap; color: var(--ink-70);
    background: none; border: 0; padding: var(--sp-2) 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--line-2);
    text-decoration-thickness: 1px; text-underline-offset: var(--sp-1);
    transition: color var(--mo-fast), text-decoration-color var(--mo-fast);
  }
  .ctrl-link:hover { color: var(--ink); text-decoration-color: currentColor }

  /* Plate numbering. Borrowed from a printed specimen sheet — it gives the
     document a spine and makes it feel compiled rather than generated. */
  .ref { border-top: 1px solid var(--line); padding: var(--sp-16) 0; position: relative }
  .ref > .wrap { position: relative }
  .plate {
    font-family: var(--mono); font-size: var(--eb-4); letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-55);
    display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5);
  }
  .plate .pl-n { color: var(--accent-text); font-weight: 700 }
  .plate .pl-r { margin-left: auto; color: var(--ink-55) }
  .ref-t {
    font-family: var(--serif); font-weight: var(--serif-w);
    font-size: var(--t-h2); line-height: var(--t-h2-lh); margin-bottom: var(--sp-3);
    max-width: 22ch;
  }
  .ref-d { font-size: var(--t-ui); line-height: 1.7; color: var(--ink-55); max-width: 62ch; margin-bottom: var(--sp-10) }

  /* An asymmetric two-column: body left, margin notes right. */
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-10); align-items: start }

  .spec { margin-bottom: var(--sp-12) }
  .spec-h {
    display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
    padding-bottom: var(--sp-2); margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .spec-h .sh-n { font-family: var(--mono); font-size: var(--eb-3); letter-spacing: var(--eb-3-ls); text-transform: uppercase; color: var(--ink) }
  .spec-h .sh-d { font-size: var(--t-sm); color: var(--ink-55) }
  .demo { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center }
  .demo.col { flex-direction: column; align-items: flex-start }
  .demo.block { display: block }

  .surf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4) }
  .surf { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--bg) }
  .surf.panel { background: var(--ground); border: var(--edge) }
  .surf-l {
    font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls);
    text-transform: uppercase; color: var(--ink-55); margin-bottom: var(--sp-4); display: block;
  }

  .sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-2) }
  .sw { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md) }
  .sw-c { width: 42px; height: 42px; border-radius: var(--r-md); border: 1px solid var(--line-2); flex: none }
  .sw-b { min-width: 0; flex: 1 }
  .sw-n { font-family: var(--mono); font-size: var(--t-sm); font-weight: 700; color: var(--ink) }
  .sw-r { font-size: 11px; color: var(--ink-55); margin-top: 1px }
  .sw-v { font-family: var(--mono); font-size: 10.5px; color: var(--ink-55); margin-top: 1px }
  .cr { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex: none }
  .cr.pass { color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) }
  .cr.warn { color: var(--ink-55); border: 1px dashed var(--ink-35) }
  .cr.fail { color: #fff; background: #B3261E; border: 1px solid #B3261E }

  .ts { display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line) }
  .ts-m { font-family: var(--mono); font-size: 10px; color: var(--ink-55); width: 118px; flex: none; letter-spacing: .04em }
  .ts-s { min-width: 0 }

  .scale-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2) }
  .scale-row .sl { font-family: var(--mono); font-size: 10px; color: var(--ink-55); width: 86px; flex: none }
  .scale-bar { height: 14px; background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px }
  /* Motion comparisons go two up, never more: the point is watching two things
     at once, and a third in the row means you miss all three. */
  .mo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sp-8) var(--sp-10) }
  .radii-row { display: flex; gap: var(--sp-4); flex-wrap: wrap }
  /* The label sits under the shape: inside a 74px circle a two-word label had
     nowhere to go and broke out of the curve (Matt, 16 Oct). */
  .radii-f { margin: 0; display: grid; justify-items: start; gap: var(--sp-3) }
  .radii-c { width: var(--sp-18); height: var(--sp-18); border: 1px solid var(--line-2); background: var(--fill) }
  .radii-f figcaption { font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-55) }
  .elev-row { display: flex; gap: var(--sp-6); flex-wrap: wrap }
  .elev-c { width: 130px; height: 84px; border-radius: var(--r-lg); background: var(--bg); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--ink-55) }

  .dont { border-left: 2px solid var(--dont); background: color-mix(in srgb, var(--dont) 5%, transparent); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: var(--sp-3) }
  .dont .dl { font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--dont); display: block; margin-bottom: var(--sp-2) }
  .dont p { font-size: var(--t-ui); line-height: 1.6; color: var(--ink-70) }
  /* Inline code carries its own wash, which in dark LIGHTENS the surface under
     it and dropped inherited --ink-55 to 4.25:1. It takes --ink-70 explicitly
     rather than inheriting: a token name inside a muted line is a thing you are
     meant to be able to read. */
  code { font-family: var(--mono); font-size: .92em; color: var(--ink-70); background: var(--wash-2); padding: 1px 5px; border-radius: 3px }

  /* The specimen sheet's own error red. #B3261E is 6.4:1 on paper and 2.83:1 on
     the dark page, so every Don't label and every "Wrong" marker was failing in
     dark. Page chrome, not part of the shipped catalog, which is why it lives
     here rather than in tokens.css — but it still has to obey the rule the page
     is written to teach. */
  :root { --dont: #B3261E }
  

  .note { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-55); max-width: 62ch; margin-top: var(--sp-3) }
  .demo-stage { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-8); background: var(--bg) }
  /* Mounts need air around them to be judged at all — several of them ARE the
     air. Two columns with a whole step between, never three. */
  .mount-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-10) var(--sp-12) }
  /* A head-to-head needs both columns in one viewport or it is two demos. */
  .vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--sp-12); align-items: start }
  /* Registered cards need --sp-16 under them; corner-mounted ones do not. The
     gap is set for the louder case so the comparison is fair rather than
     flattering to the quiet one. */
  .vs-stack { display: flex; flex-direction: column; gap: var(--sp-16) }
  /* The spec header already draws a rule. A mount landing straight under it
     reads as a double rule, and several of these mounts ARE a rule. */
  .mount-row .spec > .mount, .spec > .mount { margin-top: var(--sp-6) }

  @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) } .marginal { max-width: none } }
  @media (max-width: 720px) {
    .ctrl { padding: var(--sp-3) var(--sp-4); gap: var(--sp-4) }
    .ctrl-g { flex-direction: column; align-items: flex-start; gap: var(--sp-2); width: 100%; max-width: 100% }
    .ctrl-g.ctrl-meta { flex-direction: row; align-items: center; gap: var(--sp-4) }
    .ctrl .seg { max-width: 100%; flex-wrap: wrap }
    .ctrl .seg button { flex: 1 1 auto; text-align: center }
    .ctrl .seg button + button { border-left: none }
    .ctrl .spacer { display: none }
    .ts { flex-direction: column; gap: var(--sp-1) }
    .ts-m { width: auto }
    .surf-row { grid-template-columns: minmax(0, 1fr) }
  }

  /* The archive sheet. archive.html in a frame, pulled up over the reference.
     It is a separate page because its styles are retired: loading them here
     would put the cut classes back into this page's cascade. */
  .sheet {
    width: 100%; max-width: none; height: 88vh; max-height: none;
    margin: auto 0 0; padding: 0; border: 0; border-top: 1px solid var(--line-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--bg); color: var(--ink); box-shadow: var(--elev-3);
  }
  .sheet[open] { display: flex; flex-direction: column }
  .sheet::backdrop { background: rgba(var(--sh), .38) }
  .sheet-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-8); border-bottom: 1px solid var(--line) }
  .sheet-bar .spacer { margin-left: auto }
  .sheet iframe { flex: 1; display: block; width: 100%; border: 0; background: var(--bg) }
  /* Inside the sheet the archive's own theme bar is redundant: the theme
     follows the reference. */
  [data-embedded] .ctrl { display: none }
  @media (max-width: 720px) { .sheet { height: 94vh } .sheet-bar { padding: var(--sp-3) var(--sp-4) } }

  /* explore-elevation.html: two frames of the same sections, one per theme,
     with the option's note above them. */
  .frames { display: grid; gap: var(--sp-10); padding: var(--sp-8) var(--sp-8) 0; max-width: calc(var(--col-max) + var(--sp-16)); margin: 0 auto }
  .frame-note { max-width: var(--measure-prose) }
  .frame-note .note { margin-top: var(--sp-2) }
  .frame-h { margin-bottom: var(--sp-3) }
  .frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg) }
  @media (max-width: 720px) { .frames { padding: var(--sp-6) var(--sp-4) 0 } }

  /* Pl. 06: the tray shown on each surface it can land on. */
  .tray-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-8) }
  .tray-proof > div { padding: var(--sp-6) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg) }
  .tray-proof > div:has(> .card) { padding: 0; border: 0 }
  .tray-proof .pills { margin-top: var(--sp-3) }

  /* explore-cta.html: a real page in a frame under the control bar. */
  .cta-shell { display: flex; flex-direction: column; height: 100svh; padding-bottom: 0 }
  .cta-shell .ctrl { position: static }
  .cta-note { padding: var(--sp-3) var(--sp-8); border-bottom: 1px solid var(--line); max-width: none }
  .cta-frame { flex: 1; display: block; width: 100%; border: 0; background: var(--bg) }
  @media (max-width: 720px) { .cta-note { padding: var(--sp-3) var(--sp-4) } }

  /* ── Moved here from components.css on 2026-10-15 ─────────────────────────
     No page used either, so they left the catalog; the reference keeps them as
     its own furniture. The marginal note is the reference speaking in the
     voice of whoever made a decision, and the tight band spaces its specimen
     bands. */
  .marginal {
    font-family: var(--serif); font-style: italic;
    font-size: var(--t-ui); line-height: 1.65; color: var(--ink-55);
    border-left: 1px solid var(--line-2); padding-left: var(--sp-3);
    max-width: 34ch;
  }
  .band--tight { padding: var(--band-y-tight) 0 }

  /* The console in Pl. 08 is drawn at the product's own proportions, so it
     breaks out of the 1120px column: the rail and the pane are fixed widths,
     and inside the column they would leave the chat 350px. */
  .app-wide { width: min(1400px, calc(100vw - var(--sp-12))); margin-left: 50%; transform: translateX(-50%); height: 880px }
  @media (max-width: 1080px) { .app-wide { height: 760px } }
  .app-notes { margin-top: var(--sp-10) }
  /* The plate menu. One control in the bar that jumps to any plate and says
     which one you are on. A <details> so it opens and the links work with
     script off; script only closes it and tracks the current plate. */
  .plate-nav { position: relative }
  .plate-nav > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2) }
  .plate-nav > summary::-webkit-details-marker { display: none }
  .plate-nav > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--mo-fast) }
  .plate-nav[open] > summary::after { transform: translateY(1px) rotate(-135deg) }
  .plate-nav .pn-cur { color: var(--ink) }
  .plate-menu {
    position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: 120;
    width: min(460px, calc(100vw - var(--sp-8))); max-height: min(72vh, 620px); overflow: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
    padding: var(--sp-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--elev-3);
  }
  .plate-menu a { display: grid; grid-template-columns: var(--sp-7) 1fr; align-items: baseline; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--t-ui); color: var(--ink-70) }
  .plate-menu a span { font-family: var(--mono); font-size: var(--eb-4); color: var(--ink-55) }
  .plate-menu a:hover { background: var(--wash-1); color: var(--ink) }
  .plate-menu a[aria-current="true"] { background: var(--tray); color: var(--ink) }
  .plate-menu a.retired { color: var(--ink-55) }
  /* On a phone the summary sits mid-bar, so the menu pins to the screen edges
     instead of to it. */
  @media (max-width: 620px) { .plate-menu { position: fixed; top: var(--sp-12); left: var(--sp-4); right: var(--sp-4); width: auto; grid-template-columns: minmax(0, 1fr) } }
  /* Anchored plates land below the sticky bar, not under it. */
  section.ref[id], .ref-cont[id] { scroll-margin-top: var(--sp-16) }
  .mask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-5) }
  .tint-dark { padding: var(--sp-5); border-radius: var(--r-md) }

  /* ── Rev 11 (2026-10-15) ─────────────────────────────────────────────────── */
  /* Pl. 06: the buttons as a design system shows them. One panel per surface,
     sizes across, colours down, then the states at the medium size and the
     fixed-size controls. Hover and focus are held with .is-hover / .is-focus,
     which the page's script makes from the components' own :hover and
     :focus-visible rules, so the specimen cannot drift from the CSS. */
  .bm { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg) }
  .bm + .bm { margin-top: var(--sp-4) }
  .bm-h { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4) }
  .bm-h .eyebrow { margin: 0 }
  .bm-h code { font-size: var(--eb-3) }
  .bm-scroll { overflow-x: auto }
  .bm-t { border-collapse: collapse; min-width: 680px; width: 100% }
  .bm-t th, .bm-t td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; text-align: left; vertical-align: middle; border-top: 1px solid var(--line) }
  .bm-t thead th { border-top: 0; padding-top: 0; font-family: var(--mono); font-weight: 400; font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-55) }
  .bm-t thead th span { display: block; margin-top: var(--sp-1); color: var(--ink-55); text-transform: none; letter-spacing: 0 }
  .bm-t tbody th { width: 168px; font-weight: 600; font-size: var(--t-ui); color: var(--ink) }
  .bm-t tbody th code, .bm-t tbody th .bm-cr { display: block; margin-top: var(--sp-1); font-weight: 400 }
  .bm-cr { font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); color: var(--ink-55) }
  .bm-na::before { content: ""; display: block; width: var(--sp-4); border-top: 1px solid var(--line-2) }
  .bm-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-6) var(--sp-5); padding-top: var(--sp-5); margin-top: var(--sp-2); border-top: 1px solid var(--line) }
  .bm-row > .bm-l { flex-basis: 100%; font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-55) }
  .bm-row figure { display: grid; justify-items: start; gap: var(--sp-2); margin: 0 }
  .bm-row figcaption { font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-55) }
  .bm-gap { width: var(--sp-4) }

  /* Pl. 08: the prototype's announcements, for a screen reader only. */
  .sr, .proto-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .proto-try { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--t-sm); color: var(--ink-55) }
  .proto-try b { font-weight: 600; color: var(--ink-70) }

  /* Pl. 20: a page in a frame of its own height, so the strip and the
     numerals can be scrolled through without leaving the plate. */
  .st-frame { height: 720px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); --st-top: var(--sp-6) }
  .st-frame .band { padding: var(--sp-16) var(--sp-10) }
  .st-frame .band + .band { padding-top: 0 }
  .st-frame .band.on-dark, .st-frame .band.textured, .st-frame .band.on-dark + .band, .st-frame .band.textured + .band { padding-top: var(--sp-16) }
  .st-frame .st-sec .sec-head h2 { max-width: 22ch }
  @media (max-width: 760px) {
    .st-frame { height: 640px }
    .st-frame .band { padding: var(--sp-10) var(--sp-5) }
  }
  .st-details { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-8) var(--sp-6) }
  .st-details .st-wide { grid-column: 1 / -1 }
  .st-details > div { min-width: 0 }
  .st-details .st-demo { padding: var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg) }
  .st-details .note { margin-top: var(--sp-3) }
  @media (max-width: 1000px) { .st-details { grid-template-columns: minmax(0, 1fr) } }
  .st-details .st-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: var(--t-h3); line-height: var(--t-h3-lh); text-wrap: balance }
  .bm-set { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-5) }
  /* Pl. 08: the object mark on each kind of object, on the panel. */
  .obj-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--sp-6) var(--sp-4); padding: var(--sp-8) var(--sp-6) var(--sp-6); background: var(--ground-2); border-radius: var(--r-md); --obj-ground: var(--ground-2) }
  .obj-demo .lib-item, .obj-demo .pj-doc { cursor: default }
  @media (max-width: 1000px) { .obj-demo { grid-template-columns: minmax(0, 1fr) } }
  /* Pl. 01: clickable cards, three levels. */
  .go-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); align-items: start }
  .go-demo .card .px-icon { margin-bottom: var(--sp-5) }
  .go-demo .card + .note, .go-demo .lib-item + .note { margin-top: var(--sp-3) }
  .go-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; margin-top: var(--sp-10) }
  @media (max-width: 900px) { .go-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) } }
  @media (max-width: 1100px) { .go-demo { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
  @media (max-width: 600px) { .go-demo { grid-template-columns: minmax(0, 1fr) } }
  .sf-card p { font-family: "PI Marks", var(--sf), Georgia, serif; color: var(--ink); text-wrap: balance }
  .sf-grid { --sf-w: 400 }
  .sf-en { font-weight: var(--sf-w); font-size: var(--t-h1); line-height: var(--t-h1-lh) }
  .sf-fr { margin-top: var(--sp-4); font-weight: var(--sf-w); font-size: var(--t-h3); line-height: var(--t-h3-lh) }
  .sf-names { margin-top: var(--sp-3); font-size: var(--t-h4); line-height: var(--t-h4-lh) }
  .sf-num { margin-top: var(--sp-4); font-size: var(--t-h1); line-height: 1; font-variant-numeric: lining-nums tabular-nums }
  .sf-card figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  .sf-card figcaption b { font-family: var(--mono); font-weight: 400; font-size: var(--eb-3); letter-spacing: var(--eb-3-ls); text-transform: uppercase; color: var(--ink) }
  .sf-card .sf-cov { color: var(--ink-70) }
  .sf-card.sf-bad .sf-cov { color: var(--ink) }
  /* Pl. 22: the charts side by side. */
  /* The reference's own chrome never prints. */
  @media print { .ctrl, .plate-nav { display: none !important } body { padding-bottom: 0 } }
  /* Pl. 08: the six hovers for a project's chats, on the project page's own
     raised surface. */
  /* Pl. 16: line work. Two demos a row, each the same lockup and row. */
  .lw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-6) }
  .lw-grid figure { margin: 0; min-width: 0 }
  .lw-stage { padding: var(--sp-10) var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg) }
  .lw-stage .lk-head { font-size: var(--t-h3); line-height: var(--t-h3-lh) }
  .lw-stage .lk-lede { font-size: var(--t-body); line-height: var(--t-body-lh) }
  .lw-stage .rule-row > * { padding-bottom: 0 }
  .lw-grid figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  .lw-grid figcaption b { font-family: var(--mono); font-weight: 400; font-size: var(--eb-3); letter-spacing: var(--eb-3-ls); text-transform: uppercase; color: var(--ink) }
  .lw-grid .lw-pick { grid-column: 1 / -1 }
  @media (max-width: 1000px) { .lw-grid { grid-template-columns: minmax(0, 1fr) } }
  @media (max-width: 600px) { .lw-stage { padding: var(--sp-8) var(--sp-6) } }
  /* Pl. 07: still figures as a series, on each surface, and beside a step. */
  .im-series { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6) }
  .im-surf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) }
  :is(.im-series, .im-surf) figure { margin: 0; min-width: 0 }
  :is(.im-series, .im-surf) figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  :is(.im-series, .im-surf) figcaption b { font-family: var(--mono); font-weight: 400; font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink) }
  .im-stage { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg) }
  .im-stage.surface--ground { background: var(--ground) }
  .im-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-10); align-items: center; max-width: calc(var(--col-text) * 1.4); margin-bottom: var(--sp-6) }
  .im-pair .step { border-bottom: 0 }
  @media (max-width: 900px) { .im-series { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
  @media (max-width: 620px) { .im-series { grid-template-columns: repeat(2, minmax(0, 1fr)) } .im-surf, .im-pair { grid-template-columns: minmax(0, 1fr) } }
  /* Pl. 16: line work. The bleed and the folder draw lines past the stage. */
  .lw-stage { overflow: clip }
  /* Pl. 16 to 22: the code that names each exploration (18 · A2), so feedback can
     point at it. Ink, in the mono, a step under the spec heading. */
  .xc { display: inline-block; flex: none; padding: 0 var(--sp-2); margin-right: var(--sp-2); background: var(--ink); color: var(--bg); border-radius: var(--r-sm); font-family: var(--mono); font-size: var(--eb-3); line-height: 1.7; letter-spacing: var(--eb-3-ls); text-transform: uppercase; font-weight: 400; vertical-align: 1px }
  /* Pl. 21: the console at phone width, in a phone-sized frame. */
  .cp-row { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: var(--sp-10); align-items: start }
  .cp-phone { width: 390px; height: 760px; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--bg) }
  .cp-phone iframe { display: block; width: 100%; height: 100%; border: 0 }
  .cp-notes { grid-template-columns: minmax(0, 1fr) }
  .cp-notes > div { display: block; max-width: 56ch }
  .cp-notes > div p { margin-top: var(--sp-2) }
  @media (max-width: 900px) { .cp-row { grid-template-columns: minmax(0, 1fr) } .cp-phone { width: 100%; max-width: 390px } }
  /* Pl. 18: documentary images. */
  .doc-band { padding: var(--sp-10) }
  .doc-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-10); align-items: center }
  /* .doc-fig and its caption moved to explorations.css (16 Oct, home.html). */
  .doc-fig--sm { width: min(100%, calc(var(--sp-16) * 5)); margin-top: var(--sp-10) }
  .doc-fig--lg { margin-bottom: var(--sp-6) }
  @media (max-width: 900px) { .doc-pair { grid-template-columns: minmax(0, 1fr) } .doc-band { padding: var(--sp-6) } }
  /* Pl. 19: the floating bar's frame, a short window onto a page. */
  .fn-frame { position: relative; height: calc(var(--sp-16) * 8); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); container-type: inline-size }
  .fn-frame .band { padding-block: var(--sp-16) }
  .fn-frame .fn-hero { padding-top: calc(var(--sp-16) * 1.75) }
  .fn-frame .lk-head { font-size: var(--t-h1); line-height: var(--t-h1-lh) }
  /* Pl. 20: the margin specimen's switch. */
  .st-switch { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4) }

  /* Plate chrome for the rendered grid: comparison tiles at about 3x the
     production stroke, so the build is visible at thumbnail size. */
  /* ───────────────────────────────────────────────────────────────────────────
     SHARED TILES

     Both explorations need a repeating texture as a data URI. --grid and
     --gridinv in tokens.css already establish that a literal hex inside an SVG
     data URI is the one place a raw colour is unavoidable, because a data URI
     cannot read a custom property. These follow that precedent and nothing else
     in the file uses a raw value.
     ─────────────────────────────────────────────────────────────────────────── */
  :root,
  .console-root {

    /* Production weight for the dashed grid is deliberately near-invisible: 5%
       stroke, then masked into a vignette. That is right on a real band and
       useless on a 280px comparison tile, where all three variants would look
       identical and blank. These are the same tiles at roughly 3x, used ONLY by
       the plate and labelled as such. Nothing ships at this weight. */
    --gridloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='0' y1='10' x2='20' y2='10' stroke='%23141310' stroke-opacity='0.17' stroke-width='0.7' stroke-dasharray='3 2'/%3E%3Cline x1='10' y1='0' x2='10' y2='20' stroke='%23141310' stroke-opacity='0.17' stroke-width='0.7' stroke-dasharray='3 2'/%3E%3Ccircle cx='10' cy='10' r='0.9' fill='%23141310' fill-opacity='0.2'/%3E%3C/svg%3E");
  }

  /* Comparison weight. Plate only, so the render is visible at thumbnail size:
     at the real 5% stroke it would look blank there. */
  .gx--loud { --gx-gain: 3; --gx-tile: var(--gridloud) }
  /* ═══ PLATE CHROME ══════════════════════════════════════════════════════════
     Demo sizing only. Does not ship. */
  .xdemo { height: 280px; display: flex; align-items: flex-end;
    padding: var(--sp-6); border: 1px solid var(--line); overflow: hidden }
  /* The demo label sits ON a field, so it takes an opaque face. Same rule the
     plate states in its own copy, applied to itself. */
  .xdemo .xlab { font-family: var(--mono); font-size: var(--eb-4);
    letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-70);
    background: var(--bg); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs) }
  .xdemo--tall { height: 380px }

  /* ── THE HANDOFF STRUCTURE (Rev 19) ──────────────────────────────────────
     Parts divide the plates (Foundations, Components, Templates); a plate
     that absorbed another carries it as a continuation under a hairline. */
  .ref-part { border-top: 2px solid var(--ink); padding: var(--sp-12) 0 var(--sp-4) }
  .ref-part .ref-d { margin-bottom: 0 }
  .ref-part-t { font-family: var(--serif); font-weight: var(--serif-w-display); font-size: var(--t-display); line-height: var(--t-display-lh); color: var(--ink); margin: var(--sp-3) 0 var(--sp-4) }
  .ref-cont { margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 1px solid var(--line) }
  /* A two-column list of names and what they are for. */
  /* Pl. 04: the line inventory. Each row draws its line in a small cell. */
  .ln-t { border-top: 1px solid var(--line) }
  .ln-t > div { display: grid; grid-template-columns: var(--sp-26) minmax(0, 14rem) minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line) }
  .ln-t b { display: block; font-weight: 600; font-size: var(--t-ui); color: var(--ink) }
  .ln-t code { font-size: var(--eb-4) }
  .ln-t p { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-70) }
  .ln { position: relative; display: block; height: var(--sp-10) }
  .ln-div::before, .ln-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line) }
  .ln-tab::before { border-top-color: var(--line-2) }
  .ln-tab::after { content: ""; position: absolute; left: 0; width: 38%; top: 50%; height: 2px; margin-top: -1px; background: var(--ink) }
  .ln-edge { border: var(--edge); border-radius: var(--r-md) }
  .ln-hover { border: 1px solid var(--ink-35); border-radius: var(--r-md) }
  .ln-row { background: linear-gradient(var(--line-2), var(--line-2)) top / 100% 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) center / 1px 100% no-repeat }
  .ln-ledger { background: linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat }
  .ln-accent { border-left: 2px solid var(--accent); background: var(--warm) }
  .ln-legend { border: var(--edge); border-radius: var(--r-md); margin-top: var(--sp-2); height: var(--sp-8) }
  .ln-legend::after { content: "KIND"; position: absolute; right: var(--sp-2); top: 0; transform: translateY(-50%); padding: 0 var(--sp-1); background: var(--bg); font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); color: var(--ink-55); line-height: 1 }
  .ln-under { height: auto; justify-self: start; width: fit-content; font-family: var(--serif); font-size: var(--t-h4); line-height: 1.2; color: var(--ink); border-bottom: 2px solid var(--ink) }
  .ln-bk { width: var(--sp-10); --c: var(--sp-3); background:
    linear-gradient(var(--ink), var(--ink)) left top / var(--c) 2px, linear-gradient(var(--ink), var(--ink)) left top / 2px var(--c),
    linear-gradient(var(--ink), var(--ink)) right top / var(--c) 2px, linear-gradient(var(--ink), var(--ink)) right top / 2px var(--c),
    linear-gradient(var(--ink), var(--ink)) left bottom / var(--c) 2px, linear-gradient(var(--ink), var(--ink)) left bottom / 2px var(--c),
    linear-gradient(var(--ink), var(--ink)) right bottom / var(--c) 2px, linear-gradient(var(--ink), var(--ink)) right bottom / 2px var(--c);
    background-repeat: no-repeat }
  @media (max-width: 760px) { .ln-t > div { grid-template-columns: var(--sp-18) minmax(0, 1fr) } .ln-t > div > p { grid-column: 2 } }
  .files-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-8); border-top: 1px solid var(--line) }
  .files-t > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line) }
  .files-t b { font-weight: 600; font-size: var(--t-ui); color: var(--ink) }
  .files-t p { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-70) }
  @media (max-width: 760px) { .files-t { grid-template-columns: minmax(0, 1fr) } .files-t > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) } }
  /* Logo & favicon. */
  .logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) }
  .logo-tile { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: calc(var(--sp-26) * 2); padding: var(--sp-6); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg) }
  .logo-tile.on-dark { background: var(--bg); border-color: var(--line) }
  .logo-tile > img, .logo-cs img { height: var(--logo-h); width: auto; align-self: center; justify-self: center }
  .logo-tile figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  .logo-sizes figcaption, .fav-row figcaption { margin-top: var(--sp-3); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  .logo-tile figcaption b { font-family: var(--mono); font-weight: 400; font-size: var(--eb-3); letter-spacing: var(--eb-3-ls); text-transform: uppercase; color: var(--ink) }
  .logo-tile code { justify-self: start }
  /* Clear space, drawn: a dashed box half the logo's height outside it. */
  .logo-cs { align-self: center; justify-self: center; padding: calc(var(--logo-h) / 2); outline: 1px dashed var(--ink-35); outline-offset: 0; background: var(--wash-1) }
  .logo-cs img { display: block }
  .logo-sizes, .fav-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-10) }
  .logo-sizes figure, .fav-row figure { margin: 0 }
  .logo-sizes img { display: block; width: auto }
  .logo-fav { image-rendering: pixelated; width: var(--sp-8); height: var(--sp-8) }
  .fav-row .logo-fav { width: calc(var(--sp-26) + var(--sp-6)); height: calc(var(--sp-26) + var(--sp-6)) }
  .fav-row img { display: block }
  @media (max-width: 900px) { .logo-grid { grid-template-columns: minmax(0, 1fr) } }
  /* Product states: each state on a quiet stage, with its rule beneath. */
  .states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) }
  .ps-card { margin: 0 }
  .ps-stage { display: grid; align-content: center; min-height: calc(var(--sp-26) * 2); padding: var(--sp-6); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg) }
  .ps-stage .app-empty { min-height: 0 }
  .ps-stage .act { justify-self: start }
  .ps-card figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
  .ps-card figcaption b { font-family: var(--mono); font-weight: 400; font-size: var(--eb-3); letter-spacing: var(--eb-3-ls); text-transform: uppercase; color: var(--ink) }
  @media (max-width: 1000px) { .states { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
  @media (max-width: 600px) { .states { grid-template-columns: minmax(0, 1fr) } }
  /* Templates: a thumbnail of each worked page, and the console's snapshots. */
  .tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6) }
  .tpl { display: grid; gap: var(--sp-2); align-content: start; color: var(--ink) }
  .tpl img, .snap-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); margin-bottom: var(--sp-2); transition: border-color var(--mo-base) }
  .tpl:hover img, .snap-grid a:hover img { border-color: var(--ink-35) }
  .tpl-n { font-family: var(--serif); font-weight: var(--serif-w); font-size: var(--t-h4); line-height: var(--t-h4-lh) }
  .tpl-d { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-70) }
  .tpl code { justify-self: start }
  .snap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-8) }
  .snap-grid a { display: grid; color: var(--ink) }
  @media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .snap-grid { grid-template-columns: minmax(0, 1fr) } }
  @media (max-width: 600px) { .tpl-grid { grid-template-columns: minmax(0, 1fr) } }
/* 18 · D: the twelve glitches, small. */
.gl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5) }
.gl-cell figcaption { margin-top: var(--sp-2); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
.gl-cell figcaption b { color: var(--ink); font-weight: 600 }
@media (max-width: 900px) { .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* Pl. 22: the console framed at desk and phone sizes, scaled down. */
.pv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-8) }
.pv-row--phone { grid-template-columns: auto auto minmax(0, 1fr); align-items: start }
.pv-fig figcaption { margin-top: var(--sp-2); font-family: var(--mono); font-size: var(--eb-4); letter-spacing: var(--eb-4-ls); text-transform: uppercase; color: var(--ink-55) }
.pv-frame { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg) }
.pv-desk .pv-frame { aspect-ratio: 1440 / 900 }
.pv-desk iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--pv-s, .42)) }
.pv-phone .pv-frame { width: 390px; height: 760px }
.pv-phone iframe { display: block; width: 100%; height: 100%; border: 0 }
@media (max-width: 1200px) { .pv-row--phone { grid-template-columns: minmax(0, 1fr) } .pv-phone .pv-frame { width: 100%; max-width: 390px } }
@media (max-width: 900px) { .pv-row { grid-template-columns: minmax(0, 1fr) } .pv-desk { display: none } }
/* Pl. 06: the brand line, set under the logo. */
.bl-spec { display: flex; flex-direction: column; align-items: flex-start; gap: var(--logo-h); padding: var(--sp-12) var(--sp-10); margin: var(--sp-6) 0 var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-md) }
.bl-logo { height: var(--logo-h) }
.bl-line { font-family: var(--serif); font-weight: var(--serif-w-display); font-size: var(--t-h1); line-height: var(--t-h1-lh); color: var(--ink); max-width: 18ch; text-wrap: balance }
@media (max-width: 620px) { .bl-spec { padding: var(--sp-8) var(--sp-5) } .bl-line { font-size: var(--t-h2); line-height: var(--t-h2-lh) } }
/* Pl. 16: line work, the structures as they stand. */
.ls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); margin-top: var(--sp-8) }
.ls-stage { padding: var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); min-width: 0 }
.ls-fig figcaption { margin-top: var(--sp-3); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
.ls-fig figcaption b { display: block; margin-bottom: var(--sp-1); font-weight: 600; color: var(--ink) }
.ls-stage .step { grid-template-columns: var(--sp-10) minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0 }
@media (max-width: 900px) { .ls-grid { grid-template-columns: minmax(0, 1fr) } .ls-stage { padding: var(--sp-5) } }
/* Pl. 17: the ask, four forms. */
.ask-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); margin-top: var(--sp-8) }
.ask-stage { padding: var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); min-width: 0 }
.ask-stage .ask { max-width: none }
.ask-stage .ask .pills.tray { flex-wrap: wrap }
.ask-fig figcaption { margin-top: var(--sp-3); font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--ink-55) }
.ask-fig figcaption b { display: block; margin-bottom: var(--sp-1); font-weight: 600; color: var(--ink) }
@media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr) } .ask-stage { padding: var(--sp-5) } }