[hidden] { display: none !important; }
  @font-face {
    font-family: 'Rogue Display';
    src: url('/assets/brand/anton.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Rogue Body';
    src: url('/assets/brand/archivo.woff2') format('woff2');
    font-weight: 400 800;
    font-stretch: 100% 125%;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Rogue Poster';
    src: url('/assets/brand/rubik-dirt.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: dark;
    /* Black paper — a black with weight, never pure #000. */
    --ink: #0a0a0a;
    --ink-2: #111110;
    --ink-3: #181816;
    /* Bone white — the mark's paper, as text. */
    --bone: #e8e4da;
    --bone-dim: #a09c92;
    --line: #2a2a28;
    --line-strong: #3a3a36;
    /* The red — the star's red. ONE red, interruption only. */
    --star: #d5232a;
    --star-press: #b01c22;
    --star-wash: rgba(213, 35, 42, 0.12);
    /* The same red lifted for TEXT at label sizes: #d5232a on --ink measures
       3.87:1 and fails AA as small text; this measures 5.61:1. It is the star's
       red, brighter — not a second colour — and it never fills an area. */
    --star-hot: #ff3b41;
    --cta-label: #fff;
    --paper: #e9e4d8;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --display: 'Rogue Display', 'Arial Narrow', 'Impact', sans-serif;
    --body-face: 'Rogue Body', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --poster-face: 'Rogue Poster', 'Rogue Display', 'Arial Narrow', 'Impact', sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  }

  *, *::before, *::after { box-sizing: border-box; }
  /* The sticky header must never cover a jump target (#editions, #roster). */
  html { background: var(--ink); scroll-padding-top: 5rem; }
  /* A SOLID ground, not a gradient: axe cannot compute contrast over a
     background image and reports every text node "incomplete" (audit F05).
     The persuade surfaces paint their own atmosphere on decoration layers. */
  body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font: 16px/1.6 var(--body-face);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1; }

  /* ── focus and selection — the 2 a.m. contract ─────────────────────────── */
  :focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
  ::selection { background: var(--star); color: var(--ink); }
  .skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--bone); color: var(--ink); padding: 0.6rem 1rem; font-weight: 700; text-decoration: none; }
  .skip:focus { left: 1rem; top: 0.5rem; }

  /* ── the chrome ─────────────────────────────────────────────────────────── */
  .site-head {
    border-bottom: 1px solid var(--line);
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .site-head-inner {
    max-width: 82rem;
    min-height: 64px;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 0.45rem;
  }
  .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--bone);
  }
  .brand-mark img { width: 34px; height: 34px; display: block; }
  .brand-word {
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }
  /* The header WRAPS instead of clipping. At 320 px the four tracked-caps doors
     and the brand mark cannot share one line, and the previous repair — shrinking
     the nav to 0.62rem until they did — traded reachability for tidiness: body
     type below 0.7rem is not readable at a glance. Below 34rem the nav takes a
     full row under the brand at the same size it wears everywhere else, and every
     link keeps the global :focus-visible ring. */
  .site-nav { margin-left: auto; display: flex; align-items: center; gap: 0.5rem 1.1rem; flex-wrap: wrap; }
  .site-nav a { white-space: nowrap; }
  .brand-word { white-space: nowrap; }
  @media (max-width: 34rem) {
    .site-head-inner { padding: 0.6rem 1rem 0.55rem; }
    .site-nav { flex-basis: 100%; margin-left: 0; padding-top: 0.45rem; border-top: 1px solid var(--line); gap: 0.5rem 0.85rem; }
  }
  .site-nav a {
    color: var(--bone-dim);
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.35rem 0;
  }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--bone); }
  .site-nav a[aria-current="page"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--star); }
  .site-nav .nav-account { color: var(--bone); border: 1px solid var(--bone); padding: 0.45rem 0.8rem; }
  @media (max-width: 34rem) { .site-nav .nav-account { padding: 0.35rem 0.6rem; } }
  .site-nav .nav-account:hover, .site-nav .nav-account:focus-visible { background: var(--bone); color: var(--ink); }

  main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; width: 100%; }
  main.narrow { max-width: 44rem; }

  footer {
    border-top: 1px solid var(--line);
    max-width: 82rem;
    margin: 0 auto;
    padding: 1.6rem 1.25rem 2.4rem;
    width: 100%;
    color: var(--bone-dim);
    font-size: 0.85rem;
  }
  footer p { margin: 0 0 0.35rem; }
  .footer-nav { margin: 0 0 0.35rem; line-height: 2; }
  .footer-nav a { display: inline-block; min-height: 24px; }
  footer a { color: var(--bone-dim); }
  footer a:hover, footer a:focus-visible { color: var(--bone); }
  .waitlist-legal-head { width: min(68rem, 100%); margin-inline: auto; padding: 1.25rem 1.25rem 0; }
  .waitlist-legal-head a { color: var(--bone); text-decoration: none; }
  .waitlist-legal-head a:hover, .waitlist-legal-head a:focus-visible { text-decoration: underline; }
  .waitlist-legal-footer { text-align: center; }
  .waitlist-legal-footer a { font-weight: 400; text-decoration: none; }
  .footer-line { font-family: var(--display); color: var(--bone); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .footer-meta { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .footer-meta.footer-entity { margin-top: 0.9rem; max-width: 78ch; font-size: 0.8rem; line-height: 1.55; letter-spacing: 0; text-transform: none; }
  footer .footer-entity a { text-decoration: underline; }

  /* ── type system ────────────────────────────────────────────────────────── */
  h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--bone); }
  h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.98; letter-spacing: 0.01em; margin: 0.6rem 0 0.5rem; }
  h2 { font-size: 1.7rem; line-height: 1.05; margin: 2.2rem 0 0.6rem; }
  h3 { font-size: 1.15rem; line-height: 1.15; margin: 1.4rem 0 0.4rem; }
  p { max-width: 68ch; }
  a { color: var(--bone); }
  a:hover { color: var(--bone); text-decoration-color: var(--star); }
  .lede { font-size: 1.1rem; color: var(--bone-dim); max-width: 52ch; }

  /* The one red interruption: a short bar under a heading. Once per section. */
  .rule { width: 28px; height: 3px; background: var(--star); border: 0; margin: 0.35rem 0 1.1rem; }
  h1 + .rule, h2 + .rule { margin-top: 0; }

  /* Tracked-caps micro label — the lookbook's page-header style. */
  .stamp {
    font-family: var(--body-face);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-dim);
    margin: 0;
  }
  .stamp em { color: var(--star); font-style: normal; }

  /* ── buttons — the red CTA and its quiet sibling ────────────────────────── */
  /* THE CTA LABEL IS WHITE, and the reason is contrast rather than taste:
     --bone on --star measures 4.03:1, under AA at this type size (axe flags it
     on the storefront and the product page). White is the same near-paper tone
     at full luminance and clears AA on the SAME red. --star itself is untouched
     — it is the identity's sampled anchor and does not move for a label. */
  .btn {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7rem 1.5rem 0.6rem;
    border: 1px solid var(--star);
    background: var(--star);
    color: var(--cta-label);
    cursor: pointer;
  }
  .btn:hover, .btn:focus-visible { background: var(--star-press); border-color: var(--star-press); color: var(--cta-label); }
  .btn-ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
  .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--bone); background: var(--ink-2); }

  /* ── cards, forms, tables ───────────────────────────────────────────────── */
  article, .card {
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: 1.1rem 1.3rem;
    margin: 1.1rem 0;
  }
  dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem; }
  dt { color: var(--bone-dim); }
  dd { margin: 0; }
  pre { white-space: pre-wrap; font: inherit; margin: 0.25rem 0; }
  input, select, textarea {
    background: var(--ink);
    border: 1px solid var(--line-strong);
    color: var(--bone);
    font: inherit;
    padding: 0.55rem 0.7rem;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--star); outline: none; }
  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem; }
  th { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; }

  .ok { color: var(--bone); font-weight: 600; }
  .error { color: var(--star); font-weight: 600; }
  .notice { border: 1px solid var(--line-strong); padding: 0.7rem 1rem; }
  .notice-draft { background: #f1d35e; color: #121416; border-color: #f1d35e; margin: 0 0 1.4rem; }
  .notice-draft strong { color: #121416; }
  .sha256 { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; color: var(--bone-dim); }
  .state-notice { font-style: italic; color: var(--bone-dim); }
  .muted { color: var(--bone-dim); }

  /* S23, the merch console (v4.7.0). A check reads "Met" or "Not met" in words;
     the colour only repeats it. Unmet text is --star-hot, the star's red lifted
     for text contrast. */
  .adm-merch section { margin: 2.4rem 0; }
  .adm-merch-checks { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.45rem; }
  .adm-merch-checks li { display: flex; gap: 0.9rem; align-items: baseline; }
  .adm-merch-checks li span { flex: 0 0 5.4rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
  .adm-merch-met span, td.adm-merch-met strong { color: var(--bone); }
  .adm-merch-unmet span, td.adm-merch-unmet, .adm-merch-miss { color: var(--star-hot); }
  .adm-merch-refused { color: var(--star-hot); border-color: var(--star-hot); }
  .adm-merch-form { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 32rem); gap: 0.5rem 1rem; align-items: center; margin: 0.8rem 0; }
  .adm-merch-form button, .adm-merch-form .adm-merch-check { grid-column: 2; justify-self: start; }
  .adm-merch-form textarea { width: 100%; }
  .adm-merch-inline { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0.8rem 0; }
  .adm-merch-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.2rem; }
  .adm-merch-facts dt { color: var(--bone-dim); }
  .adm-merch-facts dd { margin: 0; }
  /* A checkerboard behind the web image, so a transparent design shows its edges. */
  .adm-merch-preview { display: block; max-width: 16rem; height: auto; border: 1px solid var(--line-strong); background: repeating-conic-gradient(#2a2a27 0% 25%, #1c1c1a 0% 50%) 0 0 / 16px 16px; }
  .adm-merch-swatch .chip { width: 1rem; height: 1rem; vertical-align: -0.15rem; margin-right: 0.45rem; color: var(--bone-dim); }
  .adm-merch-edit td { border-bottom: 1px solid var(--line-strong); }
  .adm-merch-edit summary { cursor: pointer; color: var(--bone-dim); }
  .adm-merch-stock section { margin: 2rem 0; }
  .adm-merch-stock-scroll { overflow-x: auto; }
  .adm-merch-stock .adm-list { width: 100%; min-width: 52rem; }
  .adm-merch-stock .adm-list ul { margin: 0; padding-left: 1.15rem; }
  .adm-merch-stock-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
  .adm-merch-stock-actions form { display: grid; gap: 0.35rem; min-width: 10rem; }
  .adm-merch-stock-actions label { display: grid; gap: 0.25rem; }
  .adm-merch-stock-actions input { max-width: 14rem; }
  @media (max-width: 700px) {
    .adm-merch-form { grid-template-columns: minmax(0, 1fr); }
    .adm-merch-form button, .adm-merch-form .adm-merch-check { grid-column: 1; }
  }

  /* ── the roster — how the store shows titles ────────────────────────────── */
  .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.4rem 0; }
  .roster-item {
    background: var(--ink-2);
    padding: 1.2rem 1.2rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--bone);
    position: relative;
  }
  .roster-item:hover, .roster-item:focus-within { background: var(--ink-3); }
  .roster-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--star); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; }
  .roster-item:hover::after, .roster-item:focus-within::after { transform: scaleX(1); }
  .roster-item { position: relative; }
  .roster-item .stamp { font-size: 0.6rem; }
  .roster-name { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin: 0.15rem 0 0.2rem; }
  .roster-name a { color: var(--bone); text-decoration: none; }
  .roster-name a:hover, .roster-name a:focus-visible { color: var(--bone); }
  .price { font-family: var(--display); font-size: 1.05rem; color: var(--bone); margin-top: auto; padding-top: 0.5rem; }

  /* ── the featured drop — the home page's authored hierarchy ───────────────
     One title leads, the rest of the roster follows. The lead tile is the same
     card language at full measure; nothing is hidden, and every remaining title
     keeps its name, price, banner and badge in the grid below. */
  .featured { border: 1px solid var(--line); background: var(--ink-2); margin: 1.5rem 0 2.2rem; }
  /* The lead art is capped so the first viewport still shows the title block and
     the top of the roster below it — the art leads, it does not fill the page. */
  .featured .roster-media { width: 100%; margin: 0; height: min(42vh, 340px); object-fit: cover; }
  .featured-body { padding: 1.2rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
  .featured-name { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; line-height: 1; margin: 0.15rem 0 0.3rem; }
  .featured-name a { color: var(--bone); text-decoration: none; }
  .featured-name a:hover, .featured-name a:focus-visible { color: var(--bone); }
  .featured .price { margin-top: 0.1rem; padding-top: 0; }
  .featured .btn { align-self: flex-start; margin-top: 0.9rem; }

  /* ── the editions jump and its table — the buying decision, made scannable ─ */
  .edition-jump { margin: 1.1rem 0 0; }
  .edition-jump a {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone);
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid var(--star);
  }
  .edition-jump a:hover, .edition-jump a:focus-visible { color: var(--star); }
  /* A data table wider than a phone scrolls INSIDE its own frame; the page
     itself never gains a horizontal scrollbar. Column semantics stay intact. */
  .table-scroll { overflow-x: auto; }
  .editions th, .editions td { vertical-align: top; }
  .licence-name { display: block; font-weight: 600; }
  .sku { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--bone-dim); margin-top: 0.2rem; }
  .licence-state { display: block; font-size: 0.8rem; color: var(--bone-dim); margin-top: 0.25rem; }
  .edition-actions { min-width: 11rem; }
  .edition-actions form { display: inline-block; margin: 0.2rem 0.45rem 0.2rem 0; }
  /* The table's controls share ONE treatment, sized for a cell rather than the
     masthead. The signed-out door is styled through .sign-in-to-buy rather than
     carrying a class of its own: that markup string is pinned by
     tests/p7/navigation.test.ts. */
  .edition-actions .btn, .edition-actions .btn-ghost, .sign-in-to-buy a {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 1rem 0.45rem;
    border: 1px solid var(--star);
    background: var(--star);
    color: var(--cta-label);
    cursor: pointer;
  }
  .edition-actions .btn:hover, .edition-actions .btn:focus-visible,
  .sign-in-to-buy a:hover, .sign-in-to-buy a:focus-visible {
    background: var(--star-press);
    border-color: var(--star-press);
    color: var(--cta-label);
  }
  /* The quiet sibling keeps its ghost treatment, after the rule above so equal
     specificity resolves in its favour. */
  .edition-actions .btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--bone);
  }
  .edition-actions .btn-ghost:hover, .edition-actions .btn-ghost:focus-visible {
    background: var(--ink-2);
    border-color: var(--bone);
    color: var(--bone);
  }
  @media (max-width: 34rem) {
    .editions th, .editions td { padding: 0.4rem 0.35rem; }
    .edition-actions { min-width: 0; }
    .edition-actions form, .sign-in-to-buy { display: block; margin: 0.3rem 0; }
    .edition-actions .btn, .edition-actions .btn-ghost, .sign-in-to-buy a { font-size: 0.72rem; padding: 0.45rem 0.7rem 0.4rem; }
  }

  /* ── the product description — the safe Markdown subset's output ─────────── */
  .product-description > :first-child { margin-top: 0; }
  .product-description h3 { font-size: 1.3rem; margin: 1.4rem 0 0.4rem; }
  .product-description h4 { font-size: 1.1rem; margin: 1.2rem 0 0.35rem; }
  .product-description h5 { font-size: 1rem; margin: 1rem 0 0.3rem; }
  .product-description ul { margin: 0.5rem 0; padding-left: 1.3rem; }
  .product-description li { margin: 0.25rem 0; max-width: 68ch; }
  .product-description p { margin: 0.6rem 0; }

  .star-list { list-style: none; padding: 0; margin: 0.4rem 0; }
  .star-list li { padding-left: 1.4rem; position: relative; margin: 0.35rem 0; }
  .star-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.28em;
    width: 0.62em; height: 0.62em;
    background: var(--star);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  /* ── the hero — the storefront's first viewport ─────────────────────────── */
  .hero { padding: 2.2rem 0 1.6rem; }
  .hero img.wordmark { width: min(560px, 100%); height: auto; display: block; margin: 0.8rem 0 0.4rem; }
  .hero .lede { margin: 0.9rem 0 1.2rem; }

  /* ── catalogue media (V-DESIGN-2) ─────────────────────────────────────────
     The generated banners, 1200×630, no text in the art — the name renders
     beside it in the site's display face. The roster tile bleeds its media to
     the tile's edges (the art IS the tile's top), the product page runs it
     full-measure above the masthead. Both hold the SVG's own ratio via the
     intrinsic dimensions; aspect-ratio pins the box before the file loads so
     the layout does not jump. The ink-3 ground shows while it loads and
     behind the art's own wash. */
  .roster-media { display: block; width: calc(100% + 2.4rem); margin: -1.2rem -1.2rem 0.55rem; height: auto; aspect-ratio: 1200 / 630; background: var(--ink-3); }

  /* MOTION LAW (DESIGN.md, amended 2026-09-24): nothing a reader needs ever
     starts invisible. The product page's slots used to fade in on a scroll
     timeline from opacity 0 — the honesty blocks hidden until scrolled, and
     blank in print and in any capture that does not scroll (audit F01). Every
     animation below moves DECORATION, or moves content by transform alone
     from a visible first frame; all of it sits behind
     prefers-reduced-motion: no-preference, and print switches all of it off. */
  @media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ── the product-page slots (Vol 03 §3.4.7) ────────────────────────────────
     The class names are STABLE CONTRACT, not styling detail: the equal-weight
     assertions (REQ-CMP-031, REQ-CRT-016/017, REQ-NFR-030) target the classes
     slot-40-heading, slot-70-heading and slot-70-body BY NAME, and a rename
     would silently orphan the geometry harness (e2e/storefront.spec.ts).
     REQ-CRT-017 compares slot 70's TEXT, heading and body alike, with slot
     40's heading and demands equal computed typeface, size and weight: what we
     did not check is set exactly as loud as what we measured. So the body
     shares the heading's rule — one rule, now the PREMIUM display treatment,
     and the harness measures them equal still. */
  .slot { border: 1px solid var(--line); background: var(--ink-2); padding: 0.9rem 1.1rem; margin: 1rem 0; }
  .slot dt { color: inherit; }
  .slot-40-heading, .slot-40 dd, .slot-70-heading, .slot-70-body { font-family: var(--body-face); font-size: 1.125rem; font-weight: 700; line-height: 1.45; }
  .slot-40-heading, .slot-70-heading { text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; }
  .slot-70-body { margin: 0 0 0.7rem; max-width: 70ch; }
  .slot-70-body:last-child { margin-bottom: 0; }
  /* A measured value and its label may travel as a pair (the product page's
     tiles); everywhere else the pair box is transparent to the dl's grid. */
  dl > div { display: contents; }
  .state-notice { font-style: italic; }
  /* The ARCHIVE badge (§3.5.6): text + exactly one glyph, never a shield or
     seal shape, no colour of its own beyond currentColor. The lists inside
     slot 60 carry NO typography of their own — same box, same typeface, per
     REQ-CRT-016 — so there is deliberately no rule for them. */
  .badge { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.25rem 0; }
  .badge-glyph { width: 1em; height: 1em; }

  /* ════════════════════════════════════════════════════════════════════════
     THE PERSUADE SURFACES (V-DESIGN-2, the founder's picks of 2026-09-24):
     Home 1 "Riot Broadcast" on /, Shop 1's crates on /catalogue (D4, headed
     "The racks" since D5), the tech bench on /support and the track sheet on
     /creators (D5),
     Product 1 "Hero Cinema" on /products/{id}. Every rule below is scoped
     under the body's surface class, which page() sets from its surface option, so the
     account, checkout, legal and admin pages keep the quiet end of the system.
     ════════════════════════════════════════════════════════════════════════ */
  .pg-home main, .pg-shop main, .pg-product main, .pg-support main, .pg-creators main, .pg-merch main { max-width: none; padding: 0 0 3rem; }
  /* One header and one footer, at one width, on every page: the persuade
     surfaces restyle their content, never the frame around it. */
  .wrap { width: min(82rem, 100% - 2rem); margin-inline: auto; }
  .pg-product .wrap { width: min(74rem, 100% - 2rem); }
  .kicker { font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.22em; text-transform: uppercase; }
  .pg-home .btn, .pg-shop .btn, .pg-support .btn, .pg-creators .btn, .pg-merch .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 1rem 1.35rem;
    font: 700 0.75rem/1 var(--body-face);
    font-stretch: 125%;
    letter-spacing: 0.2em;
    transition: transform 0.25s var(--ease), background 0.2s, color 0.2s;
  }
  .pg-home .btn:hover, .pg-shop .btn:hover, .pg-support .btn:hover, .pg-creators .btn:hover, .pg-merch a.btn:hover { transform: translateY(-2px); }
  .pg-home .btn-ghost, .pg-shop .btn-ghost, .pg-support .btn-ghost, .pg-merch .btn-ghost { border: 1.5px solid var(--bone); }
  .pg-home .btn-ghost:hover, .pg-home .btn-ghost:focus-visible,
  .pg-shop .btn-ghost:hover, .pg-shop .btn-ghost:focus-visible,
  .pg-support .btn-ghost:hover, .pg-support .btn-ghost:focus-visible { background: var(--bone); color: var(--ink); }
  .price-usd { font: 700 0.7rem/1 var(--body-face); letter-spacing: 0.1em; text-decoration: none; color: var(--bone-dim); }
  .cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

  /* ── Home 1: RIOT BROADCAST — the label is on air ─────────────────────── */
  .hb-hero { position: relative; min-height: min(calc(100svh - 64px), 56rem); display: grid; align-content: center; overflow: clip; isolation: isolate; padding: 3.5rem 0 6.5rem; background: var(--ink); }
  .hb-scope { position: absolute; inset: 0; z-index: -1; }
  .hb-scope svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
  .hb-w1 { fill: none; stroke: var(--bone); stroke-opacity: 0.18; stroke-width: 1.6; }
  .hb-w2 { fill: none; stroke: var(--star); stroke-opacity: 0.55; stroke-width: 2.2; }
  .hb-scope::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 55% at 70% 45%, rgba(213, 35, 42, 0.22), transparent 70%),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
      linear-gradient(transparent 60%, var(--ink));
  }
  .hb-grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
  }
  .hb-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2rem; align-items: end; }
  .hb-mark { display: block; width: 100%; max-width: 760px; height: auto; transform-origin: 40% 60%; }
  .hb-hero-copy { padding-bottom: 1.2rem; }
  .hb-hero-copy .kicker { color: var(--star-hot); display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
  .hb-tally { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--star-hot); box-shadow: 0 0 12px var(--star-hot); }
  .pg-home .hb-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 0.94; margin: 0 0 1.2rem; }
  .hb-hero h1 span { display: block; }
  .hb-hero h1 span + span { text-shadow: 4px 3px 0 rgba(213, 35, 42, 0.55); }
  .hb-voice { color: var(--bone-dim); max-width: 34ch; margin: 0 0 1.8rem; }
  .hb-lower { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); background: rgba(10, 10, 10, 0.7); }
  .hb-lower .wrap { display: flex; gap: 2.5rem; align-items: center; height: 56px; white-space: nowrap; overflow: hidden; color: var(--bone-dim); }
  .hb-lower b { color: var(--bone); font-weight: 700; }
  .hb-lower .hb-live { color: var(--star-hot); }

  .hb-ticker { border-block: 1px solid var(--line); padding: 1.1rem 0; overflow: clip; background: var(--ink-2); }
  .hb-ticker-row { overflow: clip; white-space: nowrap; }
  .hb-ticker-track { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; }
  .hb-ticker-item { font: 400 clamp(2rem, 4.6vw, 3.8rem)/1.05 var(--display); text-transform: uppercase; }
  .hb-ticker-item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.4px var(--bone); }
  .hb-ticker-star { flex: none; width: 1.4rem; height: 1.4rem; background: var(--star); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

  .hb-sec { padding: clamp(4.5rem, 9vw, 8rem) 0 0; }
  .hb-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
  .hb-sec-head .kicker { color: var(--star-hot); margin: 0; }
  .pg-home .hb-sec-head h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.92; margin: 0.4rem 0 1rem; }
  .hb-sec-head .rule { margin: 0; }
  .hb-sec-head > p { color: var(--bone-dim); max-width: 44ch; margin: 0; }
  .pg-home .ok { margin: 2rem 0 0; }

  .pg-home .featured { display: grid; grid-template-columns: 1.2fr 0.8fr; margin: 0; }
  .hb-drop-media { position: relative; overflow: hidden; min-height: 340px; background: #000; }
  .hb-drop-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hb-drop-media::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px), linear-gradient(90deg, transparent 60%, var(--ink-2)); }
  .hb-drop-flag { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--star); color: #fff; padding: 0.4rem 0.7rem; }
  .pg-home .featured-body { padding: clamp(1.5rem, 3vw, 3rem); justify-content: center; gap: 0.8rem; }
  .pg-home .featured-name { font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 0.95; margin: 0; }
  .pg-home .featured .lede { margin: 0; font-size: 1rem; }
  .hb-drop-price { margin: 0; font: 400 2rem/1 var(--display); }
  .hb-meter { display: flex; align-items: end; gap: 4px; height: 44px; }
  .hb-meter i { flex: 1; height: 100%; background: linear-gradient(var(--star-hot), var(--star) 40%, var(--bone) 41%); transform-origin: bottom; }
  .hb-meter i:nth-child(odd) { transform: scaleY(0.55); }
  .hb-readout { margin: 0; font-size: 0.85rem; color: var(--bone-dim); }
  .hb-readout a { color: var(--bone); }

  .pg-home .roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 1rem; background: none; border: 0; }
  .pg-home .roster-item { grid-column: span 3; padding: 0; gap: 0; border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s, transform 0.35s var(--ease); }
  .pg-home .roster-item.rc-big { grid-column: span 6; }
  .pg-home .roster-item.rc-wide { grid-column: 1 / -1; }
  /* A tile that closes the grid across all twelve columns turns sideways, so
     its art is not a full-width banner the height of a screen. */
  @media (min-width: 641px) {
    .pg-home .roster-item.rc-wide { flex-direction: row; }
    .pg-home .rc-wide .rc-media { flex: 1.2; aspect-ratio: auto; min-height: 16rem; }
    .pg-home .rc-wide .rc-media img { position: absolute; inset: 0; }
    .pg-home .rc-wide .rc-body { flex: 0.8; justify-content: center; }
  }
  .pg-home .roster-item:hover, .pg-home .roster-item:focus-within { border-color: var(--bone-dim); transform: translateY(-4px); background: var(--ink-2); }
  .rc-media { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: #000; }
  .rc-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
  .roster-item:hover .rc-media img, .roster-item:focus-within .rc-media img { transform: scale(1.07); }
  .rc-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
  .rc-maker { margin: 0; color: var(--bone-dim); }
  .pg-home .roster-name { font-size: 1.7rem; margin: 0; }
  .pg-home .rc-big .roster-name, .pg-home .rc-wide .roster-name { font-size: clamp(2rem, 3.4vw, 3rem); }
  /* The WHOLE card is the title's link (a stretched hit area), while the
     report link and the badge stay their own controls above it. */
  .pg-home .roster-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .rc-sum { margin: 0; color: var(--bone-dim); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
  .rc-price { margin: 0; font: 400 1.25rem/1 var(--display); }
  .rc-cpu-bar { display: block; width: 54px; height: 5px; background: var(--line); overflow: hidden; }
  .rc-cpu-bar > span { display: block; width: 0; height: 100%; background: var(--bone); }
  .cpu-q1 > span { width: 10%; } .cpu-q2 > span { width: 20%; } .cpu-q3 > span { width: 30%; }
  .cpu-q4 > span { width: 40%; } .cpu-q5 > span { width: 50%; } .cpu-q6 > span { width: 60%; }
  .cpu-q7 > span { width: 70%; } .cpu-q8 > span { width: 80%; } .cpu-q9 > span { width: 90%; }
  .cpu-q10 > span { width: 100%; }
  .rc-readout { position: relative; z-index: 2; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--bone-dim); }
  .rc-readout a { color: var(--bone); }
  .pg-home .roster-item .badge, .pg-home .featured .badge { position: relative; z-index: 2; align-self: flex-start; min-height: 24px; font: 700 0.75rem/1.2 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; }

  .hb-bands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); isolation: isolate; }
  .hb-bands a { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr auto auto; gap: 1.5rem; align-items: center; padding: 1.3rem 0.4rem; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden; transition: padding 0.35s var(--ease); }
  .hb-bands a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--star); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
  .hb-bands a:hover, .hb-bands a:focus-visible { padding-left: 1.4rem; color: #fff; }
  .hb-bands a:hover::before, .hb-bands a:focus-visible::before { transform: none; }
  .hb-band-name { font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--display); text-transform: uppercase; }
  .hb-band-blurb { color: var(--bone-dim); }
  .hb-bands a:hover .hb-band-blurb, .hb-bands a:focus-visible .hb-band-blurb { color: #fff; }
  .hb-band-arrow { width: 2rem; height: 2rem; }

  .hb-promise { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
  .hb-pr { padding: 2.2rem 1.8rem; border-right: 1px solid var(--line); }
  .hb-pr:last-child { border-right: 0; }
  .hb-pr-num { display: block; font: 400 5rem/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--star); margin-bottom: 1rem; }
  .pg-home .hb-pr h3 { font-size: 1.8rem; line-height: 1; margin: 0 0 0.7rem; }
  .hb-pr p { margin: 0; color: var(--bone-dim); }

  .hb-collective { position: relative; overflow: clip; margin-top: clamp(4.5rem, 9vw, 8rem); background: var(--star); color: #fff; padding: clamp(4rem, 8vw, 7rem) 0; }
  .hb-marquee { white-space: nowrap; overflow: clip; margin-bottom: 2.5rem; }
  .hb-marquee-track { display: inline-block; font: 400 clamp(4rem, 12vw, 11rem)/0.9 var(--display); text-transform: uppercase; }
  .hb-marquee-track span { color: transparent; -webkit-text-stroke: 2px #fff; }
  .hb-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .hb-collective .kicker { color: #fff; margin: 0; }
  .pg-home .hb-collective h2 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 0.95; margin: 0.6rem 0 1rem; }
  .hb-collective p { color: #fff; max-width: 46ch; margin: 0 0 1.5rem; }
  .hb-collective .hb-eea { margin: 1rem 0 0; font-size: 0.9rem; }
  .pg-home .hb-collective .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
  .pg-home .hb-collective .btn-ghost { background: transparent; border-color: #fff; color: #fff; }
  .pg-home .hb-collective .btn:hover, .pg-home .hb-collective .btn:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
  .hb-collective :focus-visible { outline-color: #fff; }
  .hb-crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .hb-crew-slot { aspect-ratio: 1; border: 1.5px dashed rgba(255, 255, 255, 0.8); display: grid; place-items: center; text-align: center; padding: 0.6rem; font: 700 0.75rem/1.35 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; }
  .hb-crew-slot:first-child { background: var(--ink); border: 1.5px solid var(--ink); }
  .hb-crew-slot img { width: 64%; height: auto; }

  @media (prefers-reduced-motion: no-preference) {
    .hb-w1 { animation: hb-sweep 18s linear infinite; }
    .hb-w2 { animation: hb-sweep 11s linear infinite reverse; }
    .hb-mark { animation: hb-slam 1.1s var(--ease) both; }
    .hb-hero-copy > * { animation: hb-rise 0.9s var(--ease) both; }
    .hb-hero-copy > :nth-child(2) { animation-delay: 0.12s; }
    .hb-hero-copy > :nth-child(3) { animation-delay: 0.24s; }
    .hb-hero-copy > :nth-child(4) { animation-delay: 0.36s; }
    .hb-tally { animation: hb-tally 1.6s steps(2, end) infinite; }
    .hb-ticker-track { animation: hb-marquee 42s linear infinite; }
    .hb-ticker-row + .hb-ticker-row .hb-ticker-track { animation-direction: reverse; animation-duration: 55s; }
    .hb-ticker:hover .hb-ticker-track { animation-play-state: paused; }
    .hb-drop-media img { animation: hb-ken 24s ease-in-out infinite alternate; }
    .hb-meter i { animation: hb-vu 1.2s ease-in-out infinite alternate; }
    .hb-meter i:nth-child(3n) { animation-duration: 0.9s; }
    .hb-meter i:nth-child(4n) { animation-duration: 1.5s; }
    .hb-meter i:nth-child(5n) { animation-duration: 0.7s; }
    .hb-marquee-track { animation: hb-marquee 30s linear infinite; }
    @supports (animation-timeline: view()) {
      .pg-home .roster-item { animation: hb-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
      .hb-pr-num { animation: hb-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    }
  }
  @keyframes hb-sweep { to { transform: translateX(-50%); } }
  @keyframes hb-marquee { to { transform: translateX(-50%); } }
  @keyframes hb-slam { from { transform: scale(1.1); } }
  @keyframes hb-rise { from { transform: translateY(24px); } }
  @keyframes hb-tally { 50% { box-shadow: none; background: var(--star); } }
  @keyframes hb-ken { to { transform: scale(1.12) translateX(-3%); } }
  @keyframes hb-vu { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
  @keyframes hb-grow { from { letter-spacing: 0.4em; } }
  @media (max-width: 1024px) {
    .pg-home .roster-item { grid-column: span 6; }
    .pg-home .roster-item.rc-big { grid-column: 1 / -1; }
    .hb-hero-grid, .pg-home .featured, .hb-promise, .hb-col-grid { grid-template-columns: 1fr; }
    .hb-pr { border-right: 0; border-bottom: 1px solid var(--line); }
    .hb-pr:last-child { border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .pg-home .roster-item { grid-column: 1 / -1; }
    .hb-bands a { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
    .hb-band-blurb { grid-column: 1 / -1; order: 3; }
    .hb-band-count { display: none; }
    .hb-lower .wrap { gap: 1.5rem; }
    .hb-hero { padding-bottom: 5rem; }
  }

  /* ── /catalogue: THE CRATE (Shop 1, DESIGN.md D4) — record-store crates on
     a black floor, one per series; the sleeves stand in each crate and flip
     to their back cover on hover or keyboard focus. The numbers never ride
     the flip: the CPU figure, its conditions and its report link sit on the
     strip under the sleeve (REQ-CAT-018). Nothing starts at opacity 0 (F01);
     motion is transform-only and stops under reduced motion. ─────────────── */
  .pg-shop { --crate-wood: #1c1712; --crate-wood-edge: #2a2119; --crate-ink: #121211; }
  /* Every ground under a word is SOLID: axe cannot measure contrast through a
     background image or a pseudo-element layer (audit F05), so the crate's
     warmth is the wood lip and the sleeves themselves, not a glow behind text. */
  .cr { overflow-x: clip; }
  .cr-top { padding: 3.5rem 0 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
  .pg-shop .cr-top h1 { font: 400 clamp(3.4rem, 10vw, 9rem)/0.85 var(--display); margin: 0; text-transform: uppercase; letter-spacing: -0.005em; }
  .cr-top h1 span { color: transparent; -webkit-text-stroke: 2px var(--bone); }
  .cr-intro { margin: 0; max-width: 44ch; color: var(--bone-dim); text-align: right; }
  .cr-intro .kicker { display: block; color: var(--star-hot); margin-bottom: 0.5rem; }
  .cr-dividers { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.4rem; border-bottom: 2px solid var(--bone); }
  .cr-dividers a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    background: var(--crate-ink);
    border: 1px solid var(--line);
    border-bottom: 0;
    color: var(--bone);
    text-decoration: none;
    font: 700 0.8rem/1 var(--body-face);
    font-stretch: 125%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
    transition: transform 0.25s var(--ease), background 0.2s;
  }
  .cr-dividers a:hover { transform: translateY(-4px); }
  /* The tab's slanted clip would cut an outline off, so focus draws inside it. */
  .cr-dividers a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--star-hot); }
  .cr-dividers a[aria-current] { background: var(--bone); color: var(--ink); transform: translateY(-6px); }
  .cr-dividers small, .cr-narrow small { font: inherit; font-size: 0.75rem; color: var(--star-hot); }
  .cr-dividers a[aria-current] small { color: var(--star-press); }
  .cr-narrow { display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; margin: 0.8rem 0 0; }
  .cr-narrow a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--bone-dim); text-decoration: none; font: 700 0.75rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid transparent; }
  .cr-narrow a:hover { color: var(--bone); }
  .cr-narrow a[aria-current] { color: var(--bone); border-bottom-color: var(--star); }
  .cr-empty { margin: 2.5rem 0 3rem; color: var(--bone-dim); }
  .cr-crates { display: grid; gap: 3.5rem; padding: 2.5rem 0 4rem; }
  .crate-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: baseline; margin-bottom: 1rem; }
  .pg-shop .crate-head h2 { font: 400 clamp(2.4rem, 5vw, 4rem)/0.9 var(--display); margin: 0; text-transform: uppercase; }
  .crate-head p { margin: 0; color: var(--bone-dim); }
  .crate-head .kicker { color: var(--bone-dim); }
  .crate-box { position: relative; padding: 2.5rem 1.5rem 0; background: var(--ink); border: 1px solid var(--line); border-bottom: 0; }
  .crate-lip { height: 34px; margin: 0 -1.5rem; background: repeating-linear-gradient(90deg, var(--crate-wood) 0 120px, var(--crate-wood-edge) 120px 122px); border-top: 2px solid #3a2e22; box-shadow: 0 -14px 24px rgba(0, 0, 0, 0.65); }
  .sleeves { list-style: none; margin: 0; padding: 0 0 2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; perspective: 1400px; }
  .slv { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
  .slv-a { display: block; color: var(--bone); text-decoration: none; perspective: 1000px; }
  .slv-a:focus-visible { outline: 3px solid var(--star-hot); outline-offset: 4px; }
  .slv-3d { position: relative; display: block; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(14deg) translateY(10px); transform-origin: 50% 100%; transition: transform 0.7s var(--ease); box-shadow: 0 18px 26px rgba(0, 0, 0, 0.6); }
  .slv-front, .slv-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid #3a3935; overflow: hidden; }
  .slv-front { display: block; background: #000; }
  .slv-front img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.25); }
  .slv-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85)), linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 8%); }
  .slv-name { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; z-index: 2; font: 400 clamp(1.3rem, 1.8vw, 1.8rem)/0.95 var(--display); text-transform: uppercase; }
  .slv-cat { position: absolute; top: 0.6rem; left: 0.7rem; z-index: 2; background: var(--star); color: #fff; padding: 0.3rem 0.45rem; font: 700 0.75rem/1 var(--body-face); letter-spacing: 0.18em; }
  .slv-back { transform: rotateY(180deg); background: var(--bone); color: var(--ink); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .slv-back b { font: 400 1.4rem/1 var(--display); text-transform: uppercase; }
  .slv-back span { font-size: 0.85rem; line-height: 1.35; }
  .slv-back > span:not(.slv-meta) { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .slv-back .slv-meta { margin-top: auto; font: 700 0.7rem/1.45 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; }
  .slv-strip { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.4rem; background: var(--ink); }
  .slv-price { margin: 0; color: var(--bone); font: 400 1.15rem/1 var(--display); letter-spacing: 0.02em; }
  .slv-maker { margin: 0; color: var(--bone-dim); font: 700 0.7rem/1.2 var(--body-face); letter-spacing: 0.14em; text-transform: uppercase; }
  .slv-read { margin: 0; color: var(--bone-dim); font-size: 0.75rem; line-height: 1.35; }
  .slv-read a { color: var(--bone); }
  /* 28px, not 24: "In the vault" is wider than "Archived", and at some widths
     a neighbouring tilted sleeve shaved the target under 24px (target-size). */
  .pg-shop .slv .badge { position: relative; z-index: 3; align-self: flex-start; min-height: 28px; margin: 0; color: var(--bone-dim); font: 700 0.75rem/1.2 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; }
  .cr-join { margin: 0 0 4rem; padding: 2.2rem; border: 1px dashed var(--bone-dim); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
  .pg-shop .cr-join h2 { font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--display); text-transform: uppercase; margin: 0 0 0.4rem; }
  .cr-join p { margin: 0; color: var(--bone-dim); }
  /* The flip is for a pointer that can hover, or a keyboard's focus; a touch
     screen taps straight through to the title, and reduced motion never flips. */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .slv-a:hover .slv-3d, .slv-a:focus-visible .slv-3d { transform: translateY(-14%) rotateX(0) rotateY(180deg); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .pg-shop .cr-top h1 { animation: cr-dig 0.9s var(--ease) both; }
    @supports (animation-timeline: view()) {
      .slv { animation: cr-stand linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    }
  }
  @keyframes cr-dig { from { transform: translateY(30px) rotateX(40deg); } }
  @keyframes cr-stand { from { transform: translateY(60px) rotateX(35deg); } }
  @media (max-width: 1100px) { .sleeves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 700px) {
    .cr-top, .crate-head, .cr-join { grid-template-columns: 1fr; }
    .cr-intro { text-align: left; }
    .cr-dividers, .cr-narrow { flex-wrap: nowrap; overflow-x: auto; }
    .cr-dividers a, .cr-narrow a { flex: none; }
    .sleeves { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; overscroll-behavior-x: contain; }
    .slv { flex: 0 0 72%; scroll-snap-align: start; }
  }

  /* ── /merch: THE MERCH TABLE (D8) — the label's merch wall after the show.
     Garments hang from pegs, drawn in the colour you pick (merch-art.ts); a
     bone hang tag carries the name, the price, the colours and the promise.
     The pegboard is a decoration layer behind the garments and never sits
     under a word: every tag, label and line of text has a SOLID ground (F05).
     Motion is transform-only from a visible first frame, and stops under
     reduced motion and in print (D2). ──────────────────────────────────── */
  .pg-merch { --peg: #1f1e1b; --peg-hole: #070706; --tag-ink: #0a0a0a; }
  .mt { overflow-x: clip; }
  .mt-top { padding: 3.5rem 0 1.5rem; display: grid; grid-template-columns: 1fr minmax(0, 44ch); gap: 0.8rem 2rem; align-items: end; }
  .mt-top .kicker { grid-column: 1 / -1; margin: 0; color: var(--star-hot); }
  .pg-merch .mt-top h1 { font: 400 clamp(3.4rem, 10vw, 9rem)/0.85 var(--display); margin: 0; text-transform: uppercase; letter-spacing: -0.005em; }
  .mt-top h1 span { color: transparent; -webkit-text-stroke: 2px var(--bone); }
  .mt-intro { margin: 0; color: var(--bone-dim); }
  .mt-wall {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 2.5rem 2rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 3rem 2rem;
    background-color: var(--peg);
    background-image: radial-gradient(circle, var(--peg-hole) 0 3.5px, transparent 4px);
    background-size: 28px 28px;
    background-position: 14px 14px;
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 10px var(--ink-2), inset 0 24px 40px rgba(0, 0, 0, 0.55);
  }
  .mt-item { position: relative; min-width: 0; }
  .mt-a { display: flex; flex-direction: column; align-items: center; color: var(--tag-ink); text-decoration: none; }
  .mt-a:focus-visible { outline: 3px solid var(--star-hot); outline-offset: 8px; }
  .mt-hang { position: relative; display: block; width: 100%; padding-top: 2.1rem; transform-origin: 50% 7px; }
  /* The peg, and the wire hanger that meets it. */
  .mt-hook { position: absolute; z-index: 2; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #34332f; box-shadow: inset 0 -3px 0 #000, 0 3px 0 #000; }
  .mt-hang::before { content: ''; position: absolute; z-index: 1; top: 8px; left: 50%; width: 58%; height: 40px; transform: translateX(-50%); border: 3px solid #9d998f; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
  .mt-dad-hat .mt-hang::before, .mt-sticker .mt-hang::before { width: 3px; height: 28px; border: 0; border-radius: 0; background: #9d998f; }
  .mt-hang .ga { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.6)); }
  .mt-dad-hat .ga, .mt-sticker .ga { width: 80%; margin: 0.6rem auto 0; }
  /* The hang tag: the light ground on the wall, so every word on it measures. */
  .mt-tag {
    position: relative;
    display: grid;
    gap: 0.35rem;
    width: min(100%, 14rem);
    margin-top: -0.8rem;
    padding: 1.6rem 1rem 1rem;
    background: var(--paper);
    color: var(--tag-ink);
    clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
    transform: rotate(-2deg);
    transition: transform 0.35s var(--ease);
  }
  .mt-item:nth-child(even) .mt-tag { transform: rotate(1.6deg); }
  .mt-tag::before { content: ''; position: absolute; top: 0.55rem; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #b7b2a6; }
  .mt-type { font: 700 0.7rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--star-press); }
  .mt-name { font: 400 1.7rem/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
  .mt-price { font: 800 1rem/1 var(--body-face); }
  .mt-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; color: rgba(10, 10, 10, 0.55); }
  .mt-chip .chip { display: block; width: 18px; height: 18px; }
  .mt-ship { font: 600 0.75rem/1.3 var(--body-face); color: #4a4740; }
  .pg-merch .mt-sold-out { justify-self: start; padding: 0.3rem 0.5rem; border: 2px solid var(--star-press); color: var(--star-press); font: 800 0.72rem/1 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-3deg); }
  .mt-empty { margin: 1.5rem 0 0; padding: 2rem; border: 1px dashed var(--bone-dim); color: var(--bone-dim); }
  .mt-empty a { color: var(--bone); }
  .mt-foot { margin: 1.6rem 0 0; max-width: 70ch; color: var(--bone-dim); font-size: 0.9rem; }

  /* The product page: the garment on a lit stage, the tag's facts beside it. */
  .mm-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; padding: 3rem 0 2rem; align-items: start; }
  .mm-stage { position: sticky; top: 5.5rem; margin: 0; display: grid; gap: 0.8rem; }
  .mm-spot { position: relative; padding: 2.5rem 2.5rem 3rem; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; }
  .mm-spot::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 55%; background: radial-gradient(ellipse at 50% 0%, rgba(232, 228, 218, 0.1), transparent 70%); pointer-events: none; }
  .mm-spot .ga { position: relative; display: block; width: 100%; height: auto; max-height: 68vh; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.6)); transform-origin: 50% 0; }
  .mm-stage figcaption { margin: 0; color: var(--bone-dim); }
  .mm-crumb { margin: 0 0 0.9rem; color: var(--star-hot); }
  .mm-crumb a { color: inherit; }
  .pg-merch .mm-panel h1 { font: 400 clamp(2.8rem, 6vw, 5.2rem)/0.9 var(--display); text-transform: uppercase; margin: 0 0 0.6rem; }
  .mm-price { margin: 0 0 1.6rem; font: 400 2.4rem/1 var(--display); }
  .mm-price span { font: 700 0.75rem/1 var(--body-face); letter-spacing: 0.2em; color: var(--bone-dim); vertical-align: middle; }
  .mm-opt { margin: 0 0 1.3rem; }
  .pg-merch .mm-opt-h { display: flex; gap: 0.8rem; align-items: baseline; margin: 0 0 0.6rem; font: 700 0.75rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }
  .mm-opt-h span { color: var(--bone); letter-spacing: 0.08em; }
  .mm-chart-link { margin-left: auto; color: var(--bone); letter-spacing: 0.08em; }
  .mm-colours, .mm-sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mm-colour { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--bone); }
  .mm-colour .chip { width: 30px; height: 30px; }
  .mm-colour[aria-current] { border: 2px solid var(--bone); }
  .mm-colour:focus-visible, .mm-size:focus-visible { outline: 3px solid var(--star-hot); outline-offset: 3px; }
  .mm-size { display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 0.7rem; border: 1px solid var(--line-strong); color: var(--bone); text-decoration: none; font: 700 0.9rem/1 var(--body-face); font-stretch: 112%; letter-spacing: 0.06em; }
  a.mm-size:hover { border-color: var(--bone); }
  .mm-size[aria-current] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .mm-size-out { color: var(--bone-dim); text-decoration: line-through; border-style: dashed; }
  .pg-merch .mm-colour-sold-out { border-style: dashed; }
  .pg-merch .mm-option-state { display: block; color: var(--bone); font: 700 0.62rem/1.1 var(--body-face); letter-spacing: 0.02em; }
  .pg-merch .mm-colour { position: relative; }
  .pg-merch .mm-colour .mm-option-state { position: absolute; top: 100%; left: 50%; width: 4rem; text-align: center; transform: translateX(-50%); }
  .pg-merch .mm-colours:has(.mm-option-state) { margin-bottom: 1rem; }
  .pg-merch .mm-size-sold-out { height: auto; min-height: 44px; gap: 0.15rem; border-style: dashed; }
  .pg-merch .mm-size[aria-current] .mm-option-state { color: var(--ink); }
  .pg-merch .mm-sold-out { display: inline-block; margin: 0; padding: 0.6rem 0.9rem; border: 2px solid var(--star-hot); color: var(--bone); font: 700 1rem/1.1 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; }
  /* The promise, as a stamp with the one red rule in it. */
  .mm-ship { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 0.9rem; padding: 0.6rem 0.85rem; border: 2px solid var(--bone); font: 700 0.8rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-1.5deg); }
  .mm-ship::before { content: ''; width: 22px; height: 3px; background: var(--star); }
  .mm-returns { margin: 0 0 1.4rem; max-width: 52ch; color: var(--bone-dim); }
  .mm-soon { cursor: default; color: var(--bone-dim); border-color: var(--line-strong); }
  .mm-desc { margin: 2rem 0 0; max-width: 60ch; }
  /* The care label: a woven label, the one light ground on this page. */
  .mm-label { margin: 2rem 0 0; max-width: 30rem; padding: 1.2rem 1.4rem; background: var(--paper); color: var(--ink); outline: 2px dashed rgba(10, 10, 10, 0.35); outline-offset: -8px; transform: rotate(0.6deg); }
  .pg-merch .mm-label h2 { margin: 0 0 0.6rem; font: 700 0.75rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.22em; text-transform: uppercase; color: var(--star-press); }
  .mm-label dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
  /* The site's dt is dim bone for dark grounds; on the label's paper it is ink. */
  .mm-label dt { font: 700 0.75rem/1.4 var(--body-face); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
  .mm-label dd { margin: 0; }
  .mm-chart { margin: 2rem 0 0; }
  .pg-merch .mm-chart h2 { font: 400 1.8rem/1 var(--display); text-transform: uppercase; margin: 0 0 0.8rem; }
  .mm-chart-scroll { overflow-x: auto; }
  .mm-chart table { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
  .mm-chart th, .mm-chart td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
  .mm-chart thead th { font: 700 0.72rem/1 var(--body-face); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .pg-merch .mt-top h1 { animation: mt-drop 0.9s var(--ease) both; }
    .mt-hang { animation: mt-sway 5.5s ease-in-out infinite; }
    .mt-item:nth-child(3n + 2) .mt-hang { animation-duration: 6.2s; animation-delay: -1.8s; }
    .mt-item:nth-child(3n) .mt-hang { animation-duration: 4.9s; animation-delay: -3.1s; }
    .mt-a:hover .mt-hang, .mt-a:focus-visible .mt-hang { animation: mt-swing 0.9s var(--ease); }
    .mt-a:hover .mt-tag, .mt-a:focus-visible .mt-tag { transform: rotate(0deg) translateY(-3px); }
    .mm-spot .ga { animation: mm-hang 6s ease-in-out infinite; }
  }
  @keyframes mt-drop { from { transform: translateY(-24px) rotate(-1deg); } }
  @keyframes mt-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
  @keyframes mt-swing { 0% { transform: rotate(0deg); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(2.5deg); } 100% { transform: rotate(0deg); } }
  @keyframes mm-hang { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } }
  @media (max-width: 900px) {
    .mt-top { grid-template-columns: 1fr; }
    .mt-wall { padding: 1.6rem 0.8rem 2rem; gap: 2rem 0.8rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    .mt-tag { padding: 1.35rem 0.7rem 0.8rem; gap: 0.3rem; }
    .mt-name { font-size: 1.25rem; }
    .mt-price { font-size: 0.9rem; }
    .mt-type { font-size: 0.62rem; letter-spacing: 0.16em; }
    .mm-grid { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.5rem; }
    .mm-stage { position: static; }
    .mm-spot { padding: 1.5rem; }
  }

  /* The holiday banner (D8, REQ-CAT-117): one plain line, a bone slip with the red rule, above the wall, the stage and the tally. No script. */
  .mt-peak { margin: 0 0 1.4rem; padding: 0.8rem 1rem; border-left: 4px solid var(--star); background: var(--bone); color: var(--tag-ink); font: 700 0.8rem/1.3 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
  .pg-merch .mm > .wrap > .mt-peak { margin-top: 1.2rem; }
  .pg-merch .mc-head + .mt-peak { margin-top: 0; }

  /* The product page's add-to-cart row and the index's cart link (MR2). */
  .mt-cart-link { grid-column: 1 / -1; margin: 0; }
  .mt-cart-link a { color: var(--bone); }
  .mm-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1.4rem; }
  .mm-add { display: flex; align-items: center; gap: 0.6rem; }
  .mm-add label { font: 700 0.75rem/1 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }
  .mm-add select { padding: 0.6rem 0.7rem; background: var(--ink-2); color: var(--bone); border: 1px solid var(--line-strong); }
  .mm-view-cart { color: var(--bone); text-decoration: underline; }

  /* ── /merch/cart and /merch/checkout/done: THE TALLY (D8 amendment, MR2).
     The cart is the merch stand's till receipt, pinned to the black pegboard;
     the done page is a torn ticket stub hanging from a peg. Classes mc-.
     Motion is transform-only from a visible first frame and stops under
     reduced motion and in print (D2); nothing loops. ─────────────────────── */
  .mc, .mc-done { overflow-x: clip; padding-bottom: 4rem; }
  .mc-head { padding: 3.5rem 0 1.8rem; display: grid; gap: 0.5rem; }
  .mc-head .kicker { margin: 0; color: var(--star-hot); }
  .pg-merch .mc-head h1 { font: 400 clamp(2.8rem, 7vw, 6rem)/0.9 var(--display); text-transform: uppercase; margin: 0; }
  .mc-head h1 span { color: transparent; -webkit-text-stroke: 2px var(--bone); }
  /* The board: the /merch pegboard, a decoration layer. No word sits on it:
     the roll and the stub carry their own solid paper (F05). */
  .mc-board {
    margin: 0;
    padding: 2.4rem 1rem 3.4rem;
    background-color: var(--peg);
    background-image: radial-gradient(circle, var(--peg-hole) 0 3.5px, transparent 4px);
    background-size: 28px 28px;
    background-position: 14px 14px;
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 10px var(--ink-2), inset 0 24px 40px rgba(0, 0, 0, 0.55);
  }
  /* The peg and the clip live on an unmasked wrapper: the roll's torn edge is
     a mask, and a mask clips everything drawn outside its own box. The shadow
     is here too, so it follows the torn edge. */
  .mc-hang { position: relative; width: min(100%, 38rem); margin: 0 auto; padding-top: 1.4rem; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55)); }
  .mc-hang::before { content: ''; position: absolute; z-index: 2; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #34332f; box-shadow: inset 0 -3px 0 #000, 0 3px 0 #000; }
  .mc-hang::after { content: ''; position: absolute; z-index: 2; top: 0.95rem; left: 50%; width: 48px; height: 12px; margin-left: -24px; border-radius: 2px; background: #1d1c19; box-shadow: inset 0 -2px 0 #000; }
  .mc-roll {
    --tooth: 14px;
    position: relative;
    padding: 2.6rem 1.8rem calc(2.2rem + var(--tooth));
    background: var(--paper);
    color: var(--tag-ink);
    /* The torn bottom edge: the body, then one row of teeth pointing down. */
    -webkit-mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
  }
  .mc-roll-head { margin: 0; font: 700 0.78rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }
  .mc-roll-head span { color: var(--star-press); }
  .mc-dash { margin: 0.9rem 0 1.4rem; border: none; border-top: 2px dashed rgba(10, 10, 10, 0.35); }
  .mc-note { margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--star); background: rgba(10, 10, 10, 0.04); }
  .mc-empty { margin: 0 0 0.3rem; font: 400 1.4rem/1.2 var(--display); text-transform: uppercase; }
  .mc-empty-sub { margin: 0 0 1rem; color: rgba(10, 10, 10, 0.6); }
  .mc-empty-link a { color: var(--tag-ink); }
  .mc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
  .mc-line { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: start; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(10, 10, 10, 0.15); }
  .mc-chip .chip { width: 26px; height: 26px; }
  .mc-name { display: block; font: 400 1.15rem/1.1 var(--display); text-transform: uppercase; }
  .mc-opt { display: block; margin: 0.15rem 0 0.5rem; font: 700 0.72rem/1 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(10, 10, 10, 0.6); }
  .mc-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
  .mc-qty { display: flex; align-items: center; gap: 0.5rem; }
  .mc-qty label { font: 700 0.68rem/1 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; }
  .mc-qty input { width: 3.4rem; padding: 0.35rem 0.4rem; border: 1px solid rgba(10, 10, 10, 0.35); background: var(--paper); color: var(--tag-ink); }
  /* The ghost button is bone for dark grounds; on the roll it is ink. */
  .mc-qty .btn { min-height: 0; padding: 0.45rem 0.8rem; background: transparent; color: var(--tag-ink); border: 1px solid rgba(10, 10, 10, 0.45); font-size: 0.72rem; }
  .mc-qty .btn:hover { border-color: var(--tag-ink); }
  .mc-remove-btn { border: 0; background: none; padding: 0; color: var(--star-press); text-decoration: underline; cursor: pointer; font: inherit; }
  .mc-total { text-align: right; font-variant-numeric: tabular-nums; }
  .mc-total-amt { display: block; font: 700 1.05rem/1 var(--body-face); }
  .mc-total-calc { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: rgba(10, 10, 10, 0.6); }
  /* The promise stamp's border is bone for dark grounds; on the roll it is ink. */
  .mc-ship { margin-top: 0.4rem; border-color: var(--tag-ink); color: var(--tag-ink); }
  .mc-ship-note { margin: 0.5rem 0 1.2rem; max-width: 46ch; font-size: 0.85rem; color: rgba(10, 10, 10, 0.6); }
  /* One column: the site's dl is a two-column grid for dark grounds. */
  .mc-sums { margin: 1.4rem 0; display: grid; grid-template-columns: 1fr; gap: 0.55rem; font-variant-numeric: tabular-nums; }
  .mc-sum-row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
  /* The site's dt is dim bone for dark grounds; on the roll's paper it is ink. */
  .mc-sum-row dt, .mc-sum-row dd { margin: 0; font-weight: 400; color: var(--tag-ink); }
  /* The rule above the total is the row's own border: a dl holds only its rows. */
  .mc-sum-total { margin-top: 0.3rem; padding-top: 0.8rem; border-top: 2px solid var(--tag-ink); }
  .mc-sum-total dt, .mc-sum-total dd { font: 400 1.3rem/1 var(--display); text-transform: uppercase; }
  .mc-checkout { margin-top: 1.6rem; display: grid; gap: 0.7rem; }
  .mc-checkout-btn { width: 100%; }
  .mc-pay-note { margin: 0; font-size: 0.82rem; color: rgba(10, 10, 10, 0.6); }
  .mc-roll a:focus-visible, .mc-roll button:focus-visible, .mc-roll input:focus-visible { outline: 3px solid var(--star-press); outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .mc-roll { animation: mc-print 0.7s var(--ease) both; }
    .mc-ship { animation: mc-press 0.5s var(--ease) both; }
  }
  @keyframes mc-print { from { transform: translateY(-10px); } }
  @keyframes mc-press { from { transform: rotate(-1.5deg) scale(0.94); } to { transform: rotate(-1.5deg) scale(1); } }
  @media (max-width: 900px) {
    .mc-roll { padding: 2rem 1.1rem 2.6rem; }
  }
  @media (max-width: 640px) {
    .mc-total { text-align: left; grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: baseline; }
  }

  /* The done page: a ticket stub hanging from a peg by a short cord. */
  .mc-board-done { padding-top: 2rem; }
  /* The stub hangs by a cord from a peg; the wrapper carries both, unmasked,
     and swings from the peg's centre. */
  .mc-stub-hang { position: relative; width: min(100%, 32rem); margin: 0 auto; padding-top: 3.4rem; transform-origin: 50% 7px; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55)); }
  .mc-stub-hang::before { content: ''; position: absolute; z-index: 2; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #34332f; box-shadow: inset 0 -3px 0 #000, 0 3px 0 #000; }
  .mc-stub-hang::after { content: ''; position: absolute; z-index: 1; top: 7px; left: 50%; width: 2px; height: calc(3.4rem - 7px); margin-left: -1px; background: #9d998f; }
  .mc-stub {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    background: var(--paper);
    color: var(--tag-ink);
    /* The ticket's two notches, at mid-height on each side. */
    -webkit-mask-image: radial-gradient(circle 7px at 0 50%, transparent 7px, #000 7.5px), radial-gradient(circle 7px at 100% 50%, transparent 7px, #000 7.5px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle 7px at 0 50%, transparent 7px, #000 7.5px), radial-gradient(circle 7px at 100% 50%, transparent 7px, #000 7.5px);
    mask-composite: intersect;
  }
  .mc-stub-band {
    margin: 0;
    padding: 1.4rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-2);
    color: var(--bone);
    font: 700 0.78rem/1.3 var(--body-face);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    border-right: 2px dashed rgba(232, 228, 218, 0.3);
  }
  .mc-stub-body { padding: 2.2rem 1.8rem; display: grid; gap: 0.9rem; }
  .pg-merch .mc-stub-body h1 { font: 400 clamp(2rem, 6vw, 3.2rem)/1 var(--display); text-transform: uppercase; margin: 0; color: var(--tag-ink); }
  .mc-stub-body h1 span { color: var(--star-press); }
  .mc-stub-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin-top: 0.6rem; }
  .mc-stub-support { color: var(--tag-ink); }
  .mc-stub a:focus-visible { outline: 3px solid var(--star-press); outline-offset: 2px; }
  /* The site's stamp is dim bone for dark grounds; on the stub's paper it is the pressed red. */
  .mc-stub-body .stamp { color: var(--star-press); }
  @media (prefers-reduced-motion: no-preference) {
    .mc-stub-hang { animation: mc-swing 0.8s var(--ease) both; }
  }
  @keyframes mc-swing { 0% { transform: rotate(-4deg); } 60% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } }
  @media (max-width: 640px) {
    .mc-stub { grid-template-columns: 1fr; }
    .mc-stub-band { writing-mode: horizontal-tb; border-right: 0; border-bottom: 2px dashed rgba(232, 228, 218, 0.3); }
  }

  /* ── /merch/orders, /merch/find-order: THE DOCKET (D12) — a buyer's own
     status, cancel and find-my-order pages. Quiet Read register, D10's
     paper-receipt vocabulary carried over under its own mo- classes: the
     order is a paper slip on the black page, never the wall's persuade
     volume. No body surface class — these are utility pages, not a new
     persuade surface, so every rule below is scoped by its own mo- class
     rather than a pg-* hook. ───────────────────────────────────────── */
  .mo { padding: 3.5rem 0 4rem; }
  .mo-head { display: grid; gap: 0.5rem; margin-bottom: 1.8rem; }
  .mo-head .kicker { margin: 0; color: var(--star-hot); }
  .mo-head h1 { font: 400 clamp(2rem, 5vw, 3.2rem)/1 var(--display); text-transform: uppercase; margin: 0; }
  /* the star red, as .pr-hero's: the pressed red is paper's, and reads 2.9:1 on black */
  .mo-head h1 span { color: var(--star); }
  .mo-plain { max-width: 44rem; }
  .mo-plain h1 { font: 400 clamp(2rem, 5vw, 3rem)/1 var(--display); text-transform: uppercase; margin: 0.3rem 0 1rem; }
  .mo-plain h1 span { color: var(--star); }
  .mo-notice { margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--star); background: var(--ink-2); }
  .mo-notice-error { border-left-color: var(--star-hot); }
  /* the receipt: a paper card on the black page, D10's .pr-receipt vocabulary */
  .mo-receipt { background: var(--paper); color: var(--ink); padding: 1.7rem 1.8rem 1.9rem; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); max-width: 42rem; }
  .mo-receipt .stamp { color: #3f3b34; margin: 0 0 0.3rem; }
  .mo-state { margin: 0 0 1.2rem; font: 400 1.4rem/1.1 var(--display); text-transform: uppercase; color: var(--ink); }
  .mo-lines { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
  .mo-lines th, .mo-lines td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid #b9b3a4; color: var(--ink); }
  .mo-lines th { font: 700 0.68rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: #3f3b34; }
  /* one column: the site's dl is a two-column grid, which set the sums side by side */
  .mo-sums { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin: 0 0 1.1rem; font-variant-numeric: tabular-nums; }
  .mo-sums > div { display: flex; justify-content: space-between; gap: 1rem; }
  .mo-sums dt, .mo-sums dd { margin: 0; font-weight: 400; color: var(--ink); }
  .mo-sum-total { margin-top: 0.3rem; padding-top: 0.7rem; border-top: 2px solid var(--ink); }
  .mo-sum-total dt, .mo-sum-total dd { font: 400 1.2rem/1 var(--display); text-transform: uppercase; }
  .mo-ship { margin: 0; color: #3f3b34; }
  .mo-packages { display: grid; gap: 1.2rem; margin: 1.6rem 0; max-width: 42rem; }
  .mo-package { border: 1px solid var(--line); background: var(--ink-2); padding: 1.1rem 1.3rem; }
  .mo-package .stamp { color: var(--star-hot); }
  .mo-package h2 { font: 400 1.3rem/1.1 var(--display); text-transform: uppercase; margin: 0.2rem 0 0.7rem; }
  .mo-package dl { grid-template-columns: max-content 1fr; }
  .mo-cancel { margin-top: 1rem; }
  .mo-address-link { margin: 0.8rem 0 0; }
  .mo-address-form, .mo-find-form { display: grid; gap: 0.2rem; max-width: 28rem; }
  .mo-address-form label, .mo-find-form label { margin-top: 0.7rem; font: 700 0.7rem/1.2 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
  .mo-address-form button, .mo-find-form button { margin-top: 1.2rem; justify-self: start; }
  .mo-report { margin: 1rem 0 0; }
  .mo-replacement { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
  .mo-replacement-state { margin: 0 0 0.5rem; font: 700 0.75rem/1.2 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; color: var(--star-hot); }
  .mo-replacement dl { grid-template-columns: max-content 1fr; }
  .mo-problem-form { display: grid; gap: 0.2rem; max-width: 30rem; margin: 0.6rem 0 1.4rem; }
  .mo-problem-form fieldset { border: 1px solid var(--line); background: var(--ink-2); margin: 0 0 0.6rem; padding: 0.9rem 1.1rem 1rem; }
  .mo-problem-form legend { padding: 0 0.4rem; font: 700 0.7rem/1.2 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
  .mo-reason { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.45rem 0; }
  .mo-reason input { margin-top: 0.25rem; accent-color: var(--star); flex: none; }
  .mo-reason label { margin: 0; font: 400 1rem/1.35 var(--body-face); cursor: pointer; }
  .mo-problem-form > label { margin-top: 0.7rem; font: 700 0.7rem/1.2 var(--body-face); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
  .mo-help { margin: 0.3rem 0 0; color: var(--bone-dim); font-size: 0.9rem; }
  .mo-problem-form button { margin-top: 1.2rem; justify-self: start; }
  .mo-fit { color: var(--bone-dim); max-width: 34rem; }
  /* A held package (D12 "A held package"): the two fixes sit together, beside the cancel. */
  .mo-hold-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 1rem; }
  .mo-hold-actions a { font-weight: 700; }
  .mo-hold-note { margin: 0.8rem 0 0; color: var(--bone-dim); }
  .mo-swap { margin: 0 0 1.1rem; }
  .mo-swap .mo-price { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--bone-dim); }
  @media (prefers-reduced-motion: no-preference) {
    .mo-receipt, .mo-plain { animation: mo-rise 0.6s var(--ease) both; }
  }
  @keyframes mo-rise { from { transform: translateY(10px); } }
  @media print {
    .mo-receipt, .mo-plain { animation: none !important; }
  }

  /* ── /support: THE TECH BENCH (D5) — a service manual. Each channel has a
     number on a patch strip and a status lamp that states AVAILABILITY, never
     an outcome: lit means open to you now, dark means not open yet. ────── */
  .sv { padding-bottom: 4rem; }
  .sv-top { padding: 3.5rem 0 2rem; border-bottom: 2px solid var(--bone); display: grid; gap: 0.6rem; }
  .sv-top .kicker { color: var(--star-hot); margin: 0; }
  .pg-support .sv-top h1 { font: 400 clamp(3.4rem, 10vw, 8rem)/0.85 var(--display); text-transform: uppercase; margin: 0; }
  .sv-lede { margin: 0; color: var(--bone-dim); max-width: 48ch; font-size: 1.1rem; }
  .sv-bench { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
  .sv-ch { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); background: var(--ink-2); border: 1px solid var(--line); }
  .sv-strip { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; background: #121211; border-right: 1px solid var(--line); }
  .sv-no { color: var(--bone); font: 400 1.6rem/1 var(--display); letter-spacing: 0.08em; writing-mode: vertical-rl; transform: rotate(180deg); }
  .sv-lamp { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
  .sv-lamp-on { border-color: var(--star); background: var(--star-hot); box-shadow: 0 0 12px rgba(255, 59, 65, 0.7); }
  .sv-body { padding: 1.6rem 1.8rem; max-width: 64ch; }
  .pg-support .sv-body h2 { font: 400 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--display); text-transform: uppercase; margin: 0 0 0.4rem; }
  .sv-state { color: var(--bone-dim); margin: 0 0 1rem; }
  .sv-ch-off .sv-state { color: var(--star-hot); }
  .sv-body > p { margin: 0 0 1rem; }
  .sv-body > p:last-child { margin-bottom: 0; }
  .sv-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; counter-reset: step; }
  .sv-steps li { position: relative; padding-left: 2.6rem; counter-increment: step; }
  .sv-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem; color: var(--star-hot); font: 400 1.2rem/1 var(--display); }
  .sv-steps b { color: var(--bone); }
  .sv-keep { margin-top: 2.5rem; padding: 1.8rem; border: 1px dashed var(--bone-dim); display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 2rem; align-items: center; }
  .pg-support .sv-keep h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; margin: 0; }
  .sv-keep p { margin: 0; color: var(--bone-dim); }
  .sv-keep .cta-row { grid-column: 2; grid-row: 1 / 3; }
  @media (prefers-reduced-motion: no-preference) {
    .sv-lamp-on { animation: sv-glow 2.4s ease-in-out infinite; }
    .sv-ch { animation: sv-in 0.6s var(--ease) both; }
    .sv-ch:nth-child(2) { animation-delay: 0.08s; }
    .sv-ch:nth-child(3) { animation-delay: 0.16s; }
  }
  @keyframes sv-glow { 50% { box-shadow: 0 0 4px rgba(255, 59, 65, 0.35); } }
  @keyframes sv-in { from { transform: translateY(18px); } }
  @media (max-width: 700px) {
    .sv-ch { grid-template-columns: minmax(0, 1fr); }
    .sv-strip { flex-direction: row; padding: 0.8rem 1.2rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .sv-no { writing-mode: horizontal-tb; transform: none; }
    .sv-body { padding: 1.2rem; }
    .sv-keep { grid-template-columns: 1fr; }
    .sv-keep .cta-row { grid-column: 1; grid-row: auto; }
  }

  /* ── /creators: THE TRACK SHEET (D5) — the pitch beside the intake, and
     the form drawn as a studio session sheet: paper, a double rule under the
     header, one numbered channel per field, written on the ruled line. Paper
     is the one light ground on the site; ink on it measures far above AA, and
     the channel numbers use the pressed red, which clears AA on paper. ──── */
  .cx { padding: 3.5rem 0 4rem; }
  .cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
  .cx-pitch .kicker { color: var(--star-hot); margin: 0 0 0.6rem; }
  .pg-creators .cx-pitch h1 { font: 400 clamp(3.2rem, 8vw, 7rem)/0.86 var(--display); text-transform: uppercase; margin: 0 0 1rem; }
  .cx-lede { margin: 0 0 2rem; font-size: 1.1rem; max-width: 44ch; }
  .cx-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .cx-flow li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--line); }
  .cx-flow-no { color: var(--star-hot); font: 400 1.8rem/1 var(--display); }
  .cx-flow b { font: 400 1.25rem/1.1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
  .cx-flow p { margin: 0.25rem 0 0; color: var(--bone-dim); }
  .cx-sheet { background: var(--paper); color: var(--ink); padding: 1.6rem 1.8rem 1.8rem; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); transform: rotate(0.6deg); }
  .cx-sheet-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; padding-bottom: 0.7rem; border-bottom: 3px double var(--ink); font: 700 0.72rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.18em; text-transform: uppercase; }
  .cx-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.25rem 0.8rem; padding: 0.8rem 0; border-bottom: 1px solid #b9b3a4; }
  .cx-ch { grid-row: 1 / 3; padding-top: 0.15rem; color: var(--star-press); font: 400 1.4rem/1 var(--display); }
  .pg-creators .cx-row label { color: #3f3b34; font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; }
  .pg-creators .cx-row input, .pg-creators .cx-row textarea { width: 100%; background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; color: var(--ink); font: 400 1.05rem/1.4 var(--body-face); padding: 0.35rem 0; }
  .pg-creators .cx-row textarea { min-height: 8.5rem; resize: vertical; border: 2px solid var(--ink); padding: 0.6rem; background: #f3efe6; }
  .pg-creators .cx-row input:focus-visible, .pg-creators .cx-row textarea:focus-visible { outline: 3px solid var(--star-press); outline-offset: 2px; border-color: var(--star-press); }
  .cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.4rem; }
  .cx-note { margin: 0; color: #3f3b34; font-size: 0.85rem; max-width: 32ch; }
  .cx-slip-rows { list-style: none; margin: 0; padding: 0; }
  .pg-creators .cx-k { color: #3f3b34; font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; }
  .pg-creators .cx-v { margin: 0; color: var(--ink); font: 400 1.02rem/1.45 var(--body-face); }
  .cx-own { margin: 1.3rem 0 0; padding-top: 0.9rem; border-top: 1px solid #b9b3a4; color: #3f3b34; font-size: 0.9rem; }
  .pg-creators .cx-own a { color: var(--ink); text-decoration-thickness: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .cx-sheet { animation: cx-drop 0.8s var(--ease) both; }
  }
  @keyframes cx-drop { from { transform: translateY(24px) rotate(2deg); } }

  /* ── /privacy/rights and /account/privacy: THE REQUEST SHEET, AND A RECEIPT
     FOR EVERY STEP (DESIGN.md D10) — a Read surface (calm, plain, trustworthy)
     that borrows D5's studio session sheet for the request itself, and answers
     every step after it with a narrow paper receipt slip. The one graphic is
     the clock: the 30/90-day promise drawn as a timeline, so the deadline is
     something you can see. ───────────────────────────────────────────────── */
  .pg-privacy main { max-width: none; padding: 0 0 4rem; }
  .pr { padding: 3rem 0 0; }
  .pr-wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.25rem; }
  .pr-hero { max-width: 46rem; margin: 0 0 2.5rem; }
  .pr-hero .stamp { color: var(--star-hot); margin: 0 0 0.6rem; }
  .pg-privacy .pr-hero h1 { font: 400 clamp(2.6rem, 6vw, 4.6rem)/0.95 var(--display); text-transform: uppercase; margin: 0.4rem 0 0; }
  .pr-hero h1 span { color: var(--star); }
  .pr-hero .rule { transform-origin: left; }
  /* Off the display type's baseline, so it reads as the section's rule, not an underline. */
  .pg-privacy .pr-hero h1 + .rule { margin-top: 0.9rem; }
  @media (prefers-reduced-motion: no-preference) {
    .pr-hero .rule { animation: pr-rule 0.7s var(--ease) both; }
  }
  @keyframes pr-rule { from { transform: scaleX(0.35); } }
  .pr-lede { margin: 1rem 0 0; font-size: 1.125rem; color: var(--bone); max-width: 52ch; }

  /* the clock: a hairline timeline, three stops, vertical on phones. Each tick
     is joined to the next by one connector, drawn from the tick it leaves; the
     connector into day 90 is dashed, because that stop is only for a request
     that needs it. */
  .pr-clock { margin: 0 0 3rem; }
  .pr-clock .stamp { margin: 0 0 1rem; }
  .pr-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0.5rem; }
  .pr-stop { position: relative; padding-top: 1.6rem; }
  .pr-stop:not(:last-child)::before { content: ''; position: absolute; top: calc(0.5rem - 1px); left: 1.3rem; right: -0.2rem; height: 2px; background: var(--line-strong); }
  .pr-stop:has(+ .pr-stop-dashed)::before { height: 0; background: none; border-top: 2px dashed var(--line-strong); }
  .pr-tick { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--bone); background: var(--ink); }
  .pr-tick-solid { background: var(--star); border-color: var(--star); }
  .pr-tick-hollow { background: var(--ink); border-color: var(--bone-dim); }
  .pr-day { display: block; font: 400 1.1rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone); margin: 0 0 0.35rem; }
  .pr-stop .pr-body { margin: 0; color: var(--bone-dim); font-size: 0.92rem; max-width: 22ch; }
  @media (prefers-reduced-motion: no-preference) {
    .pr-tick-solid { animation: pr-ring 1.4s var(--ease) 1; }
  }
  @keyframes pr-ring {
    0% { box-shadow: 0 0 0 0 rgba(213, 35, 42, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(213, 35, 42, 0); }
  }
  @media (max-width: 760px) {
    .pr-track { grid-template-columns: 1fr; gap: 1.4rem; }
    .pr-stop { padding-top: 0; padding-left: 1.8rem; }
    .pr-stop:not(:last-child)::before { top: 1.3rem; bottom: -1.2rem; left: calc(0.5rem - 1px); right: auto; width: 2px; height: auto; }
    .pr-stop:has(+ .pr-stop-dashed)::before { width: 0; background: none; border-top: 0; border-left: 2px dashed var(--line-strong); }
    .pr-stop .pr-body { max-width: 34ch; }
  }

  /* two columns from 1024px: the reading column, then the sheet */
  .pr-grid { display: grid; gap: 3rem; grid-template-areas: "hero" "clock" "sheet" "aside"; }
  .pr-grid .pr-hero { grid-area: hero; }
  .pr-grid .pr-clock { grid-area: clock; margin-bottom: 0; }
  .pr-grid .pr-sheet-col { grid-area: sheet; }
  .pr-grid .pr-aside { grid-area: aside; }
  @media (min-width: 1024px) {
    .pr-grid { grid-template-columns: 5fr 7fr; align-items: start; grid-template-areas: "hero sheet" "clock sheet" "aside sheet"; column-gap: 3.5rem; }
  }

  /* the request sheet: paper, ink, D5's studio session sheet */
  .pr-sheet { background: var(--paper); color: var(--ink); padding: 1.6rem 1.8rem 1.9rem; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); transform: rotate(0.4deg); }
  .pr-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 0 1.1rem; padding-bottom: 0.7rem; border-bottom: 3px double var(--ink); font: 700 0.72rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; }
  .pr-fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; }
  .pg-privacy .pr-fieldset legend { color: #3f3b34; font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 0 0.6rem; }
  .pr-rowset { display: grid; }
  .pr-row { display: grid; grid-template-columns: 1.6rem 2rem minmax(0, 1fr); align-items: start; gap: 0.2rem 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid #b9b3a4; border-left: 3px solid transparent; cursor: pointer; }
  .pr-row input[type="radio"] { grid-row: 1 / 3; margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--star-press); }
  .pr-ch { color: var(--star-press); font: 400 1.3rem/1 var(--display); }
  .pg-privacy .pr-row-title { display: block; color: var(--ink); font: 700 1.02rem/1.3 var(--body-face); }
  .pr-row-desc { display: block; color: #3f3b34; font-size: 0.9rem; line-height: 1.4; margin-top: 0.15rem; }
  .pr-row:hover, .pr-row:focus-within { border-left-color: var(--star-wash); transition: border-color 150ms var(--ease); }
  .pr-row:has(:checked) { border-left-color: var(--star); outline: 2px solid var(--ink); outline-offset: -1px; }
  .pr-row:has(:focus-visible) { outline: 3px solid var(--star-press); outline-offset: 1px; }
  .pr-field { margin: 0 0 1.3rem; }
  .pg-privacy .pr-field label { display: block; color: #3f3b34; font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.4rem; }
  .pg-privacy .pr-field input, .pg-privacy .pr-field textarea { width: 100%; background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; color: var(--ink); font: 400 1.05rem/1.4 var(--body-face); padding: 0.35rem 0; }
  .pg-privacy .pr-field textarea { min-height: 6.5rem; resize: vertical; border: 2px solid var(--ink); padding: 0.6rem; background: #f3efe6; }
  .pg-privacy .pr-field input:focus-visible, .pg-privacy .pr-field textarea:focus-visible { outline: 3px solid var(--star-press); outline-offset: 2px; border-color: var(--star-press); }
  .pr-help { margin: 0.35rem 0 0; color: #3f3b34; font-size: 0.82rem; line-height: 1.4; max-width: 48ch; }
  .pr-alert { margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; background: #f3efe6; color: var(--ink); border-left: 3px solid var(--star); font-size: 0.92rem; }
  .pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.3rem; margin-top: 1.4rem; }
  .pg-privacy .pr-note { margin: 0 0 0.8rem; color: #3f3b34; font-size: 0.85rem; max-width: 42ch; }
  .pr-actions .pr-note { margin: 0; max-width: 30ch; }
  .pr-sheet-col h2 { color: var(--bone); font: 400 1.5rem/1.05 var(--display); text-transform: uppercase; margin: 2rem 0 1rem; }
  .pr-requests { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  .pr-requests th, .pr-requests td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--bone-dim); }
  .pr-requests th { color: var(--bone); font: 700 0.68rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
  .pr-requests td:first-child { color: var(--bone); font-family: monospace; }
  @media (max-width: 700px) {
    .pr-requests { display: block; overflow-x: auto; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .pr-sheet { animation: pr-drop 0.8s var(--ease) both; }
  }
  @keyframes pr-drop { from { transform: translateY(12px) rotate(0.4deg); } }
  @media (prefers-reduced-motion: reduce) {
    .pr-sheet { transform: none; }
  }
  @media (max-width: 700px) {
    .pr-sheet { transform: none; padding: 1.3rem 1.2rem 1.5rem; }
  }

  /* the reading column: three ways to ask, never, not happy */
  .pr-aside > * + * { margin-top: 2rem; }
  .pr-aside h2 { font: 400 1.5rem/1.05 var(--display); text-transform: uppercase; margin: 0 0 1rem; }
  .pr-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .pr-way { border: 1px solid var(--line); padding: 1.1rem 1.3rem; }
  .pr-way-no { display: block; color: var(--star-hot); font: 400 1.6rem/1 var(--display); margin: 0 0 0.4rem; }
  .pr-way p { margin: 0; color: var(--bone-dim); }
  .pr-way a { color: var(--bone); font-weight: 700; }
  .pr-never { margin-top: 0.5rem; }
  .pr-notice p { color: var(--bone-dim); }

  /* the receipt: a centred paper slip, perforated top edge, on the black page */
  .pr-receipt-stage { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
  .pr-receipt-wrap { width: 100%; max-width: 34rem; }
  /* the tear line: a paper band punched with holes the page shows through */
  .pr-perf { height: 0.7rem; background-color: var(--paper); background-image: radial-gradient(circle, var(--ink) 2.2px, transparent 2.6px); background-size: 1.1rem 0.7rem; background-position: 0.25rem 50%; background-repeat: repeat-x; border-bottom: 1px dashed #b9b3a4; }
  .pr-receipt { background: var(--paper); color: var(--ink); padding: 1.8rem 1.9rem 2rem; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); }
  .pr-receipt .stamp { color: #3f3b34; }
  .pg-privacy .pr-receipt-h { font: 400 clamp(2rem, 6vw, 2.8rem)/0.98 var(--display); text-transform: uppercase; color: var(--ink); margin: 0.5rem 0 1.2rem; }
  .pr-receipt-h span { color: var(--star-press); }
  .pr-receipt-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0 0 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid #b9b3a4; }
  .pr-receipt-dl dt { color: #3f3b34; font: 700 0.7rem/1.3 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
  .pr-receipt-dl dd { margin: 0; color: var(--ink); font: 400 1rem/1.4 var(--body-face); }
  .pr-receipt p { color: var(--ink); margin: 0 0 1rem; }
  .pr-receipt p:last-of-type { margin-bottom: 0; }
  .pr-receipt .pr-receipt-actions { margin-top: 1.3rem; }
  .pr-receipt .btn { margin-right: 0.8rem; }
  @media (prefers-reduced-motion: no-preference) {
    .pr-receipt-wrap { animation: pr-rise 0.7s var(--ease) both; }
  }
  @keyframes pr-rise { from { transform: translateY(12px); } }
  @media print {
    .pr-hero .rule, .pr-tick-solid, .pr-sheet, .pr-receipt-wrap { animation: none !important; }
  }

  /* ── LAUNCH LIST (DESIGN.md D7): the founder's painting, as a poster ───────
     A lone listener on the rocks faces a black tower under a red sun. The
     painting is four registered full-canvas layers (scripts/cut-launch-scene.py):
     at rest they reconstruct it exactly; on load the sun rises behind the tower,
     the tower settles and the rocks slide in; then the whole scene pushes in
     slowly, holds, and eases back out, with the listener pushing in further
     than the world behind him — the logo and the words never move with it. On scroll the far
     layers lag behind the near ones. The page is a mystery on purpose: no nav,
     no footer, one Sign in door (chrome: 'bare').

     Mobile first: the painting is a banner and the words sit under it on
     black. From 1200px wide (and no narrower than 3:2) it is the poster: the
     painting covers the viewport, and every position is in painting units
     (cqw on the stage), so the logo, the line and the form keep their places
     at any size. Their ground is the painting's darkest cloud bank, deepened
     by a soft scrim so bone text holds >= 7:1 and the display red >= 3:1. */
  .pg-launch { background: #060505; }
  .pg-launch main { max-width: none; padding: 0; }
  .bare-head { position: absolute; top: 0; right: 0; z-index: 5; padding: clamp(0.8rem, 2vw, 1.4rem) clamp(1rem, 2.4vw, 2rem); }
  /* the one door on the launch pages: the site header's Sign in, as it was —
     white text in a white outline, on a light veil so it reads over any cloud */
  .bare-signin { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: rgba(6, 5, 5, 0.35); color: var(--bone); border: 1px solid var(--bone); font: 700 0.78rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
  .bare-account-icon { display: none; }
  .bare-signin:hover, .bare-signin:focus-visible { background: var(--bone); color: var(--ink); }
  .bare-signin:focus-visible { outline: 3px solid var(--star-hot); outline-offset: 2px; }
  .lx { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: #060505; }
  .lx-stage { position: relative; container-type: inline-size; }
  .lx-art { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; overflow: clip; view-timeline: --lx-art block; }
  .lx-scene { position: absolute; inset: 0; transform-origin: 62% 45%; }
  .lx-layer { position: absolute; inset: 0; }
  .lx-layer img { display: block; width: 100%; height: 100%; }
  .lx-l-sun img { transform-origin: 64.72% 34.3%; }
  .lx-copy { position: static; padding: 1.8rem max(1rem, (100% - 44rem) / 2) 2.6rem; display: flex; flex-direction: column; align-items: flex-start; }
  .lx-mark { position: absolute; left: 3.7cqw; top: 5cqw; z-index: 1; margin: 0; line-height: 0; }
  .lx-mark a { display: block; }
  .lx-mark img { display: block; width: 28cqw; height: auto; }
  .lx-kicker { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; color: var(--bone); font: 700 0.74rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.22em; text-transform: uppercase; }
  .lx-lamp { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--star); box-shadow: 0 0 0 0 rgba(213, 35, 42, 0.6); flex: none; }
  .lx-sub, .lx-head { margin: 0 0 1rem; font: 400 clamp(2.1rem, 6.4cqw, 3.4rem)/0.95 var(--display); text-transform: uppercase; color: var(--bone); letter-spacing: 0.01em; text-wrap: balance; }
  .lx-sub span, .lx-head span { color: var(--star); }
  .lx-lede { margin: 0 0 1rem; max-width: 60ch; color: #d6d0c4; font-size: 1rem; line-height: 1.55; }
  .lx-form { width: 100%; max-width: 34rem; margin: 0 0 0.8rem; }
  .lx-label { display: block; margin: 0 0 0.45rem; color: var(--bone); font: 700 0.75rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; }
  .lx-field { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .lx-field input { flex: 1 1 14rem; min-width: 0; min-height: 3.2rem; padding: 0 1rem; background: #121010; border: 2px solid var(--bone); border-radius: 0; color: var(--bone); font: 400 1.05rem var(--body-face); }
  .lx-field input::placeholder { color: #8f8a80; }
  .lx-field .btn { min-height: 3.2rem; flex: none; }
  .lx input:focus-visible, .lx-sheet input:focus-visible, .lx-sheet textarea:focus-visible, .lx-modal input:focus-visible, .lx-modal textarea:focus-visible { outline: 3px solid var(--star-hot); outline-offset: 2px; }
  .lx-note { margin: 0; max-width: 60ch; color: #cfc9bd; font-size: 0.86rem; line-height: 1.45; }
  .lx-email-note { width: max-content; max-width: min(90vw, 44rem); margin-top: 0.55rem; font-size: 0.8rem; }
  .lx-form label[for="waitlist-age"] { display: block; margin-top: 0.6rem; }
  .lx-textlink { color: var(--bone); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .lx-textlink:hover { color: var(--star-hot); }
  .lx-legal { margin-top: 1rem; }
  .lx-bottom-legal { position: relative; z-index: 2; padding: 0.7rem 1rem max(1.15rem, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(transparent, rgba(6, 5, 5, 0.88)); }
  .lx-bottom-legal .lx-legal { margin: 0 auto; max-width: none; font-size: 0.8rem; }
  .lx-bottom-legal .lx-textlink { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.35rem; margin: 0; border: 0; font-weight: 400; text-decoration: none; }
  .lx-bottom-legal .lx-textlink:focus-visible { outline: 2px solid var(--star-hot); outline-offset: 2px; }
  /* Keep the already deployed closed page's old in-hero legal row at the foot
     until its HTML is replaced. Only that exact three-link paragraph matches. */
  .lx:has(.lx-copy > p.lx-lede > a[href="/legal/privacy-notice"]) { min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-bottom: 4.75rem; }
  .lx-copy > p.lx-lede:has(> a[href="/legal/privacy-notice"]) { position: fixed; animation: none; z-index: 2; right: 0; bottom: 0; left: 0; max-width: none; margin: 0; padding: 0.7rem 1rem max(1.15rem, env(safe-area-inset-bottom)); color: #cfc9bd; font-size: 0.8rem; text-align: center; background: linear-gradient(transparent, rgba(6, 5, 5, 0.88)); }
  .lx-copy > p.lx-lede:has(> a[href="/legal/privacy-notice"]) .lx-textlink { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.35rem; color: var(--bone); font-weight: 400; text-decoration: none; }
  .lx-copy > p.lx-lede:has(> a[href="/legal/privacy-notice"]) .lx-textlink:focus-visible { outline: 2px solid var(--star-hot); outline-offset: 2px; }
  .lx-form label[for="waitlist-age"] a { padding: 0.08rem 0.2rem; border: 1px solid #827b70; color: var(--bone); font-weight: 400; text-decoration: none; }
  .lx-form label[for="waitlist-age"] a:focus-visible { outline: 2px solid var(--star-hot); outline-offset: 2px; }
  @media (min-width: 761px) { .lx-email-note { max-width: none; white-space: nowrap; } }
  .lx-sr, .lx-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lx-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin: 0 0 1rem; font-weight: 400; }
  .lx-place span { color: var(--bone); font: 700 0.76rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.2em; text-transform: uppercase; }
  .lx-place strong { font: 400 clamp(3.4rem, 14cqw, 6rem)/0.85 var(--display); color: var(--star); }
  .lx-maker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin: 0.4rem 0 1rem; }
  .lx-maker-q { margin: 0; font: 400 clamp(1.3rem, 4cqw, 1.8rem)/1 var(--display); text-transform: uppercase; color: var(--bone); }
  .lx-maker-btn { min-height: 3rem; }
  .lx-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin: 0.2rem 0 1.1rem; }
  .lx-invite-btn { min-height: 3.2rem; padding-inline: 1.8rem; font-size: 1.05rem; }
  .lx-tally { margin: 0; color: #d6d0c4; font-size: 0.9rem; }
  .lx-tally strong { color: var(--bone); font: 400 1.3rem/1 var(--display); }
  .lx-maker-btn.btn-ghost { color: var(--bone); border-color: var(--bone); }
  .lx-share-btn.btn-ghost { min-height: 3.2rem; color: var(--bone); border-color: var(--bone); }
  .lx-plus { margin-left: 0.5rem; padding: 0.15rem 0.45rem; border: 1px solid currentColor; font: 700 0.68rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.1em; vertical-align: 0.12em; }
  .lx-lock { margin: 0 0 1rem; max-width: 34rem; color: #d6d0c4; font-size: 0.98rem; line-height: 1.5; }
  .lx-lock b { color: var(--bone); }
  .lx-flash { margin: 0 0 0.9rem; padding: 0.55rem 0.8rem; border-left: 4px solid var(--star); background: rgba(4, 3, 3, 0.72); color: var(--bone); font-size: 0.92rem; }
  .lx-meter { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; color: #d6d0c4; font-size: 0.88rem; }
  .lx-meter progress { flex: 1 1 auto; height: 0.5rem; appearance: none; border: 0; background: #2a2524; }
  .lx-meter progress::-webkit-progress-bar { background: #2a2524; }
  .lx-meter progress::-webkit-progress-value { background: var(--star); }
  .lx-meter progress::-moz-progress-bar { background: var(--star); }
  .lx-sharegrid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .lx-sharegrid a { display: flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 0.6rem; border: 1px solid var(--line-strong); background: #121010; color: var(--bone); text-decoration: none; font: 700 0.76rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
  .lx-sharegrid a:hover, .lx-sharegrid a:focus-visible { background: var(--star); border-color: var(--star); color: #fff; }

  /* the maker pop-over (HTML popover: opens and closes with no script) */
  .lx-modal { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow: auto; margin: auto; padding: 1.4rem 1.6rem 1.5rem; background: #0b0909; color: var(--bone); border: 1px solid var(--line-strong); border-top: 4px solid var(--star); }
  .lx-modal::backdrop { background: rgba(4, 3, 3, 0.74); backdrop-filter: blur(3px); }
  .lx-modal-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .lx-modal-top .lx-kicker { margin: 0; }
  .lx-close { min-width: 2.75rem; min-height: 2.75rem; background: none; border: 1px solid var(--line-strong); color: var(--bone); font: 400 1.5rem/1 var(--body-face); cursor: pointer; }
  .lx-close:hover, .lx-close:focus-visible { border-color: var(--bone); }
  .lx-modal-h { margin: 0.9rem 0 0.4rem; font: 400 clamp(2rem, 6vw, 2.8rem)/0.95 var(--display); text-transform: uppercase; color: var(--bone); }
  .lx-modal-h span { color: var(--star); }
  .lx-modal-lede { margin: 0 0 1.2rem; color: #d6d0c4; line-height: 1.55; }
  .lx-modal .lx-note { margin-top: 1rem; max-width: none; }

  /* ── signing in (D9): the panel over any page, and the pages that carry the form ──
     The header's door is a button that opens the panel with no script; where a
     browser has no popover support, the link beside it takes over. */
  @supports selector(:popover-open) { .si-fallback { display: none; } }
  @supports not selector(:popover-open) { .si-open { display: none; } }
  .si-open { cursor: pointer; }
  .site-nav .si-open { font: inherit; font-size: 0.72rem; line-height: inherit; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; background: none; }
  .si-card .lx-apply { margin-top: 1.2rem; }
  .si-card .lx-modal-lede { margin: 0.2rem 0 0; }
  .si-card .error { margin: 1rem 0 0; padding: 0.55rem 0.8rem; border-left: 4px solid var(--star); background: #1a0b0c; color: var(--bone); font-size: 0.92rem; font-weight: 600; }
  .si-card .si-go { display: inline-flex; align-items: center; margin-top: 1.2rem; min-height: 3.2rem; text-decoration: none; }
  /* the pages: the card alone on black, under the red sun's glow */
  .pg-auth { background: #060505; }
  .pg-auth main { position: relative; isolation: isolate; overflow: clip; max-width: none; min-height: 100svh; display: grid; place-items: center; padding: 5rem 1rem 3rem; }
  .pg-auth main::before { content: ""; position: absolute; z-index: -1; top: -34vmax; right: -26vmax; width: 84vmax; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(213, 35, 42, 0.34), rgba(213, 35, 42, 0.1) 52%, transparent); pointer-events: none; }
  .pg-auth .si-card { margin: 0; max-height: none; overflow: visible; }
  @media (prefers-reduced-motion: no-preference) {
    .pg-auth .si-card { animation: si-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .pg-auth main::before { animation: si-glow 9s ease-in-out infinite alternate; }
  }
  @keyframes si-rise { from { translate: 0 12px; } }
  @keyframes si-glow { to { scale: 1.08; } }

  /* the black sheet under the painting: share links, the standalone form */
  .lx-sheet { background: #070606; padding: 2.8rem 0 3.2rem; border-top: 1px solid var(--line); }
  .lx-sheet .wrap { max-width: 44rem; }
  .lx-sheet h2 { margin: 0 0 1rem; font: 400 clamp(1.5rem, 3vw, 2rem)/1 var(--display); text-transform: uppercase; color: var(--bone); }
  .lx-sheet .lx-note { margin-top: 1rem; }
  .lx-link { width: 100%; min-height: 3rem; padding: 0 0.9rem; background: #121010; border: 2px solid var(--bone); border-radius: 0; color: var(--bone); font: 500 0.95rem var(--body-face); }
  .lx-sharebar { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .lx-sharebar a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--bone); color: var(--bone); text-decoration: none; font: 700 0.78rem/1 var(--body-face); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
  .lx-sharebar a:hover, .lx-sharebar a:focus-visible { background: var(--star); border-color: var(--star); color: #fff; }
  .lx-apply { display: grid; gap: 1rem; }
  .lx-row input, .lx-row textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; background: #121010; border: 2px solid var(--bone); border-radius: 0; color: var(--bone); font: 400 1rem/1.4 var(--body-face); }
  .lx-row input::placeholder, .lx-row textarea::placeholder { color: #8f8a80; }
  .lx-row textarea { min-height: 5.5rem; resize: vertical; }
  .lx-row [aria-invalid="true"] { border-color: var(--star-hot); }
  .lx-err { margin: 0.4rem 0 0; color: #ff8a8e; font-size: 0.9rem; font-weight: 600; }
  .lx-errors { margin: 0 0 1.2rem; padding: 0.8rem 1rem; border-left: 4px solid var(--star); background: #1a0b0c; color: var(--bone); }
  .lx-errors p { margin: 0; }
  .lx-apply .btn { justify-self: start; min-height: 3.2rem; }

  /* motion: one orchestrated arrival, a slow push-in, then depth on scroll */
  @media (prefers-reduced-motion: no-preference) {
    /* the slow push: in, a held breath at full zoom, back out; the listener's
       layer pushes further than the world behind him, so he separates */
    .lx-scene { animation: lx-push 36s 0.3s infinite both; }
    .lx-l-hill { transform-origin: 29% 82%; animation: lx-push-near 36s 0.3s infinite both; }
    .lx-l-sun img { animation: lx-sunrise 3.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both, lx-breathe 9s 3.8s ease-in-out infinite alternate; }
    .lx-l-tower img { animation: lx-settle 2.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .lx-l-hill img { animation: lx-approach 2.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
    /* Keep the mark visible: Safari can retain the opacity-zero first frame. */
    .lx-copy > :not(.lx-mark, .lx-modal) { animation: lx-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    .lx-copy > :nth-child(2) { animation-delay: 0.55s; }
    .lx-copy > :nth-child(3) { animation-delay: 0.65s; }
    .lx-copy > :nth-child(4) { animation-delay: 0.75s; }
    .lx-copy > :nth-child(n + 5) { animation-delay: 0.85s; }
    .lx-lamp { animation: lx-lamp 2.4s ease-out infinite; }
    .lx-modal:popover-open { animation: lx-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lx-l-sky { animation: lx-depth-sky linear both; animation-timeline: --lx-art; animation-range: exit 0% exit 100%; }
      .lx-l-tower { animation: lx-depth-tower linear both; animation-timeline: --lx-art; animation-range: exit 0% exit 100%; }
      .lx-l-sun { animation: lx-depth-sun linear both; animation-timeline: --lx-art; animation-range: exit 0% exit 100%; }
    }
  }
  @keyframes lx-push {
    0% { scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    42%, 58% { scale: 1.06; }
    58% { animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    100% { scale: 1; }
  }
  @keyframes lx-push-near {
    0% { scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    42%, 58% { scale: 1.075; }
    58% { animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    100% { scale: 1; }
  }
  @keyframes lx-sunrise { from { translate: 0 3.2%; } }
  @keyframes lx-breathe { to { scale: 1.014; } }
  @keyframes lx-settle { from { translate: 0 1.8%; } }
  @keyframes lx-approach { from { translate: -1.2% 2.2%; } }
  @keyframes lx-up { from { translate: 0 0.7rem; } }
  @keyframes lx-pop { from { opacity: 0; translate: 0 14px; } }
  /* depth on scroll: the farther the layer, the more it lags the page (the
     rocks travel with it); every offset stays inside what has scrolled away */
  @keyframes lx-depth-sky { to { transform: translateY(22%); } }
  @keyframes lx-depth-tower { to { transform: translateY(14%); } }
  @keyframes lx-depth-sun { to { transform: translateY(30%); } }
  @keyframes lx-lamp { 0% { box-shadow: 0 0 0 0 rgba(213, 35, 42, 0.65); } 80%, 100% { box-shadow: 0 0 0 0.7rem rgba(213, 35, 42, 0); } }

  /* Phone poster: a portrait painting behind the mark and a flowing, readable
     foreground. The form remains in document flow on short screens. */
  @media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    .pg-launch .bare-head { position: fixed; top: max(0.85rem, env(safe-area-inset-top)); right: max(0.85rem, env(safe-area-inset-right)); padding: 0; z-index: 10; }
    .pg-launch .bare-signin { width: 3rem; height: 3rem; min-height: 3rem; padding: 0; justify-content: center; border: 0; background: transparent; }
    .pg-launch .bare-signin span { display: none; }
    .pg-launch .bare-account-icon { display: block; width: 1.8rem; height: 1.8rem; filter: drop-shadow(0 1px 3px #000); }
    .lx { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
    .lx-stage { flex: 1 0 auto; }
    .lx-art { position: absolute; inset: 0 0 auto; height: min(76vh, 43rem); height: min(76svh, 43rem); aspect-ratio: auto; }
    .lx-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 5, 5, 0.18) 0%, transparent 32%, #060505 100%); pointer-events: none; }
    /* Keep the listener and tower in the same registered landscape painting,
       while the sky fills the taller phone canvas behind that composition. */
    .lx-art { background: url('/assets/brand/launch/sky-1280.webp') center top / cover no-repeat; }
    .lx-layer img { position: absolute; width: 165%; height: auto; left: -33%; top: 12%; }
    .lx-l-sky img { mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
    .lx-art::after { background: linear-gradient(to bottom, rgba(6, 5, 5, 0.18) 0%, transparent 55%, #060505 100%); }
    .lx-copy { position: relative; padding: 1rem 1.25rem; padding: max(1rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left)); }
    .lx-mark { position: static; margin: 0 0 clamp(14rem, 39vh, 24rem); margin: 0 0 clamp(14rem, 39svh, 24rem); }
    .lx-mark img { width: min(48vw, 13rem); }
    .lx-kicker { margin-bottom: 0.65rem; }
    .lx-sub, .lx-head { font-size: clamp(2rem, 8.5vw, 3.1rem); line-height: 1; }
    .lx-lede { max-width: 32rem; }
    .lx-form { max-width: 34rem; }
    .lx-field .btn { flex: 1 1 100%; }
    .lx-email-note { width: auto; max-width: none; }
    .lx-form label[for="waitlist-age"], .lx-form label[for="waitlist-newsletter"] { display: block; min-height: 2.75rem; }
    .lx-form label[for="waitlist-age"] a { display: inline-block; white-space: nowrap; }
    .lx-form input[type="checkbox"] { width: 1.25rem; height: 1.25rem; vertical-align: middle; margin-right: 0.35rem; }
    .lx-copy > .lx-legal { align-self: center; margin-top: auto; padding-top: 1rem; text-align: center; font-size: 0.8rem; }
    .lx-copy > .lx-legal .lx-textlink { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.3rem; font-weight: 400; text-decoration: none; }
    .lx-bottom-legal .lx-legal-detail { display: none; }
    .lx-bottom-legal .lx-textlink { display: inline-flex; align-items: center; min-height: 2.75rem; border: 0; padding-inline: 0.35rem; }
    .lx-bottom-legal { margin-top: auto; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  }
  @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    .lx-art { height: 100%; min-height: 100vh; min-height: 100svh; background-position: center 37%; }
    .lx-layer img { width: 90%; left: 5%; top: 0; }
    .lx-copy { padding-top: max(1rem, env(safe-area-inset-top)); }
    .lx-mark { margin-bottom: 3rem; }
    .lx-mark img { width: min(26vw, 12rem); }
  }

  /* the poster: the painting covers the viewport and the words sit on it */
  @media (min-width: 1200px) and (min-aspect-ratio: 3 / 2) {
    .lx { height: 100vh; height: 100svh; min-height: 36rem; }
    .lx-bottom-legal { position: absolute; right: 0; bottom: 0; left: 0; }
    .lx-stage { position: absolute; left: 0; top: min(0px, (100vh - 56.28vw) * 0.3); top: min(0px, (100svh - 56.28vw) * 0.3); width: max(100%, 177.68vh); width: max(100%, 177.68svh); aspect-ratio: 1672 / 941; }
    .lx-art { position: absolute; inset: 0; aspect-ratio: auto; }
    .lx-copy { position: absolute; left: 3.7cqw; top: 7%; width: 31cqw; padding: 0; }
    .lx-copy::before { content: ''; position: absolute; z-index: -1; inset: 30% -7cqw -3cqw -5cqw; background: radial-gradient(closest-side, rgba(4, 3, 3, 0.66), rgba(4, 3, 3, 0.38) 62%, rgba(4, 3, 3, 0)); pointer-events: none; }
    .lx-mark { position: static; margin: 0 0 1.2cqw; }
    .lx-mark img { width: 25cqw; }
    .lx-kicker { margin-bottom: 0.7cqw; font-size: clamp(0.7rem, 0.62cqw, 0.9rem); }
    .lx-sub, .lx-head { margin-bottom: 1cqw; font-size: clamp(2rem, 2.95cqw, 4.2rem); }
    .lx-lede { max-width: 26cqw; font-size: clamp(0.95rem, 0.9cqw, 1.15rem); }
    .lx-form { max-width: none; margin-bottom: 0.8cqw; }
    .lx-field { flex-wrap: nowrap; }
    .lx-field input { flex: 1 1 auto; }
    .lx-note { max-width: 19cqw; }
    .lx-place { margin-bottom: 0.6cqw; }
    .lx-place strong { font-size: clamp(3.4rem, 6.4cqw, 7rem); }
    .lx-maker { margin-top: 0.4cqw; }
    .lx-maker-q { font-size: clamp(1.3rem, 1.7cqw, 2.1rem); }
    .lx-lock { max-width: 28cqw; font-size: clamp(0.92rem, 0.85cqw, 1.1rem); }
    .lx-invite { flex-wrap: wrap; }
  }
  /* Earlier engines without container units retain usable launch typography. */
  @supports not (width: 1cqw) {
    .lx-sub, .lx-head { font: 400 clamp(2.1rem, 6.4vw, 3.4rem)/0.95 var(--display); }
    .lx-place strong { font: 400 clamp(3.4rem, 14vw, 6rem)/0.85 var(--display); }
    .lx-maker-q { font: 400 clamp(1.3rem, 4vw, 1.8rem)/1 var(--display); }
    @media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
      .lx-sub, .lx-head { font-size: clamp(2rem, 8.5vw, 3.1rem); line-height: 1; }
    }
    @media (min-width: 761px) and (min-height: 501px), (min-width: 1001px) {
      .lx-mark { left: 3.7vw; top: 5vw; }
      .lx-mark img { width: 28vw; }
    }
    @media (min-width: 1200px) and (min-aspect-ratio: 3 / 2) {
      .lx-copy { left: 3.7vw; width: 31vw; }
      .lx-mark img { width: 25vw; }
      .lx-sub, .lx-head { font-size: clamp(2rem, 2.95vw, 4.2rem); }
      .lx-lede { max-width: 26vw; }
      .lx-note { max-width: 19vw; }
    }
  }
  @media (max-width: 860px) {
    .cx-grid { grid-template-columns: minmax(0, 1fr); }
    .cx-sheet { transform: none; }
  }

  /* ── /products/{id}: HERO CINEMA — cinematic, and honest on frame one.
     The hero is SHORT on purpose: slot 70 has a fold budget (REQ-CMP-031
     clause 5). Motion lives on decoration only; no disclosure animates
     opacity, filter or clip (clause 3), and slot 70 is never collapsed
     (clause 4). ───────────────────────────────────────────────────────── */
  .pdp-hero { position: relative; height: min(40vh, 420px); min-height: 220px; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
  .pdp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 30% 50%; }
  .pdp-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 25% 60%, transparent, rgba(10, 10, 10, 0.75)), linear-gradient(transparent 55%, var(--ink)); }
  .pdp-hero .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 1.2rem; }
  .pdp-kicker { align-self: flex-start; margin: 0 0 0.7rem; padding: 0.3rem 0.55rem; background: var(--star); color: #fff; }
  .pg-product .pdp-hero h1 { font-size: clamp(3rem, 9vw, 7.4rem); line-height: 0.86; letter-spacing: 0.005em; margin: 0; }

  .pdp-meta { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 1.5rem 3rem; padding: 1.4rem 0 1.2rem; border-bottom: 1px solid var(--line); }
  .pdp-meta .brand { margin: 0 0 0.3rem; color: var(--bone-dim); }
  .pdp-meta .cobrand-lockup { display: inline-block; margin: 0 0 0.55rem; padding: 0.3rem 0.6rem; border: 1px solid var(--bone); color: var(--bone); font: 700 0.78rem/1.2 var(--body-face); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; }
  .pdp-summary { margin: 0; font-size: 1.15rem; max-width: 56ch; }
  .pdp-meta .ok { margin: 0.8rem 0 0; }
  .pdp-buybox { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .pdp-buybox .price { margin: 0; padding: 0; font-size: 2.2rem; line-height: 1; }
  .pdp-buybox .edition-jump { margin: 0; }
  .pdp-buybox .edition-jump a { display: inline-flex; align-items: center; min-height: 44px; }
  .pdp-buybox .badge { margin: 0; font-size: 0.85rem; }

  .pdp-proof { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.75rem; margin: 1.4rem 0 0; }
  .pdp-proof .slot { position: relative; margin: 0; padding: 1.2rem 1.3rem 1.3rem; }
  .pdp-proof .slot::before { content: ''; position: absolute; left: 1.3rem; top: -1px; width: 34px; height: 3px; background: var(--star); transform-origin: left; }
  .pdp-proof .slot-30 { grid-column: span 5; }
  .pdp-proof .slot-40 { grid-column: span 7; grid-row: span 2; }
  .pdp-proof .slot-50 { grid-column: span 5; }
  .pdp-proof .slot-60 { grid-column: span 5; }
  .pdp-proof .slot-70 { grid-column: span 7; }
  .pdp-proof .slot-30 > h2, .pdp-proof .slot-50 > h2, .pdp-proof .slot-60 > h2,
  .pdp-rest .slot > h2 { font-size: 1.25rem; margin: 0 0 0.6rem; }
  .pdp-proof .slot-30 p, .pdp-proof .slot-50 p, .pdp-proof .slot-60 p { margin: 0 0 0.5rem; }
  .pdp-proof .slot-40 dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0; }
  .pdp-proof .slot-40 dl > div { display: grid; align-content: start; position: relative; overflow: hidden; padding: 0.6rem 0.7rem; border: 1px solid var(--line); background: var(--ink); }
  .pdp-proof .slot-40 dl > div::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--star), transparent); transform: scaleX(0.35); transform-origin: left; }
  .pdp-proof .slot-40 dt { color: var(--bone-dim); font: 700 0.72rem/1.2 var(--body-face); letter-spacing: 0.12em; text-transform: uppercase; }
  .pdp-proof .slot-40 dd { margin: 0.25rem 0 0; }
  .pdp-proof .spec-meta { margin: 0.8rem 0 0; color: var(--bone-dim); }
  .pdp-more summary { cursor: pointer; min-height: 44px; padding: 0.2rem 0; color: var(--bone-dim); }
  .pdp-more summary b { color: var(--bone); }
  .pdp-more[open] summary { margin-bottom: 0.4rem; }
  /* The honesty box, ink on bone: at least the contrast of the claim beside
     it (REQ-CMP-031 clause 3), never collapsed, never animated. */
  .pdp-proof .slot-70 { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .pdp-proof .slot-70::before { background: var(--ink); }
  .pdp-proof .slot-70 .slot-70-heading { color: var(--ink); }

  .pdp-rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0.75rem 0 0; }
  .pdp-rest .slot { margin: 0; }
  .pdp-rest .slot p { margin: 0 0 0.5rem; }

  /* Slot 20 — hear it, see it. Pairs sit side by side so the ear compares the
     same passage bypassed and processed; a video is a poster card that opens
     into the player. */
  .pg-product .pdp-media { margin: 0.75rem 0 0; padding: 1.2rem 1.3rem 1.3rem; }
  .pg-product .pdp-media > h2 { font-size: 1.6rem; margin: 0 0 0.9rem; }
  .pdp-ab { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
  .pdp-ab li { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
  .pdp-ab li:last-child { padding-bottom: 0; border-bottom: 0; }
  .pdp-ab-label { grid-column: 1 / -1; margin: 0; color: var(--star-hot); }
  .pdp-ab figure { margin: 0; }
  .pdp-ab figcaption { margin: 0 0 0.35rem; color: var(--bone-dim); font-size: 0.85rem; }
  .pdp-ab audio { display: block; width: 100%; }
  .pdp-videos { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
  .pdp-ab + .pdp-videos { margin-top: 1.4rem; }
  .pdp-video { border: 1px solid var(--line); background: #000; }
  .pdp-video summary { position: relative; display: grid; align-content: end; aspect-ratio: 16 / 9; padding: 1rem; cursor: pointer; list-style: none; overflow: hidden; }
  .pdp-video summary::-webkit-details-marker { display: none; }
  .pdp-video summary img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: transform 0.6s var(--ease), opacity 0.3s; }
  .pdp-video summary:hover img, .pdp-video summary:focus-visible img { transform: scale(1.05); opacity: 0.7; }
  .pdp-video-play { position: absolute; left: 50%; top: 42%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%; background: var(--star); box-shadow: 0 0 0 6px rgba(213, 35, 42, 0.25); }
  .pdp-video-play::after { content: ''; position: absolute; left: 1.65rem; top: 1.25rem; border-style: solid; border-width: 0.85rem 0 0.85rem 1.35rem; border-color: transparent transparent transparent #fff; }
  .pdp-video-label { position: relative; font: 400 1.4rem/1 var(--display); text-transform: uppercase; color: var(--bone); }
  .pdp-video-note { position: relative; margin-top: 0.3rem; font-size: 0.75rem; color: var(--bone-dim); }
  .pdp-video[open] summary { display: none; }
  .pdp-video-frame { aspect-ratio: 16 / 9; }
  .pdp-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
  @media (max-width: 600px) { .pdp-ab li { grid-template-columns: 1fr; } }

  .pdp-about { position: relative; overflow: hidden; margin: 2.2rem 0 0; padding: 1.4rem 0; border-block: 1px solid var(--line); }
  /* The ghost voices drift in the empty right-hand field, never under the
     description's text. */
  .pdp-ghosts { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; z-index: 0; opacity: 0.28; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
  .pdp-about-body > .product-description { max-width: 60ch; }
  .pdp-ghosts svg { width: 200%; height: 100%; }
  .pdp-ghost { fill: none; stroke: var(--bone); stroke-width: 1.2; }
  .pdp-ghost:nth-child(3n) { stroke: var(--star); }
  .pdp-about-body { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: start; }
  .pg-product .pdp-about h2 { font-size: 1.6rem; margin: 0; }

  .pg-product #editions { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 2.2rem 0 1rem; }
  .pg-product .editions { border: 1px solid var(--bone); }
  .pg-product .editions td { padding: 1.1rem 1rem; }
  .pg-product .licence-name { font: 400 1.6rem/1 var(--display); text-transform: uppercase; }
  .pg-product .editions td.price { margin: 0; padding-top: 1.1rem; font-size: 1.8rem; }
  .pwyw-note { display: block; margin-top: 0.45rem; color: var(--bone-dim); font: 600 0.8rem/1.35 var(--body-face); }
  .buy { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
  .buy label, .pwyw-amount label { display: block; font-size: 0.8rem; color: var(--bone-dim); }
  .buy input[name="billingCountry"] { width: 3.4rem; text-transform: uppercase; }
  .pwyw-amount { margin: 0; flex-basis: 100%; }
  .pwyw-amount input { width: 8rem; margin-top: 0.3rem; }
  .buy .error { flex-basis: 100%; margin: 0; }
  .pg-product .edition-actions .btn, .pg-product .edition-actions .btn-ghost, .pg-product .sign-in-to-buy a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.8rem 1.2rem;
    font: 700 0.8rem/1 var(--body-face);
    letter-spacing: 0.14em;
  }
  .pdp-eea { color: var(--bone-dim); font-size: 0.9rem; margin: 0.7rem 0 0; }
  .pdp-seller { color: var(--bone-dim); font-size: 0.9rem; margin: 0.35rem 0 0; max-width: 70ch; }
  .pdp-seller a { color: var(--bone); }
  .pg-product .slot-110, .pg-product .slot-150 { border: 0; background: none; padding: 0; margin: 2rem 0 0; }
  .pg-product .slot-110 > section { position: relative; margin: 0 0 0 0.4rem; padding: 0.2rem 0 0.8rem 1.4rem; border-left: 2px solid var(--line); }
  .pg-product .slot-110 > section::before { content: ''; position: absolute; left: -7px; top: 0.55rem; width: 12px; height: 12px; border-radius: 50%; background: var(--star); }
  .pg-product .slot-110 > section h3 { margin: 0 0 0.2rem; }
  .pg-product .slot-150 { color: var(--bone-dim); }

  @media (prefers-reduced-motion: no-preference) {
    .pdp-hero h1 { animation: pdp-title 0.8s var(--ease) both; }
    .pdp-hero img { animation: pdp-drift 26s ease-in-out infinite alternate; }
    .pdp-ghosts svg { animation: pdp-sway 22s linear infinite; }
    .pdp-proof .slot::before { animation: pdp-rule 1s var(--ease) 0.4s both; }
    .pdp-proof .slot-40 dl > div::after { animation: pdp-meter 1.4s var(--ease) 0.6s both; }
  }
  @keyframes pdp-title { from { transform: translateY(18%); letter-spacing: 0.06em; } }
  @keyframes pdp-drift { to { transform: scale(1.12) translateX(-2%); } }
  @keyframes pdp-sway { to { transform: translateX(-50%); } }
  @keyframes pdp-rule { from { transform: scaleX(0); } }
  @keyframes pdp-meter { from { transform: scaleX(0); } }
  @media (max-width: 900px) {
    .pdp-meta, .pdp-rest, .pdp-about-body { grid-template-columns: 1fr; }
    .pdp-ghosts { display: none; }
    .pdp-proof .slot-30, .pdp-proof .slot-40, .pdp-proof .slot-50, .pdp-proof .slot-60, .pdp-proof .slot-70 { grid-column: 1 / -1; grid-row: auto; }
  }
  @media (min-width: 600px) and (max-width: 900px) {
    .pdp-proof .slot-30, .pdp-proof .slot-50, .pdp-proof .slot-60 { grid-column: span 6; }
  }
  @media (max-width: 600px) {
    .pdp-hero { height: 30vh; }
    .pdp-meta { padding: 1rem 0 0.8rem; }
    .pdp-proof .slot { padding: 0.9rem 1rem; }
    .pdp-proof .slot-30 p, .pdp-proof .slot-50 p, .pdp-proof .slot-60 p { font-size: 0.92rem; line-height: 1.45; }
  }
  /* A phone on its side: the budget is tight, so the head compresses and
     slot 70 rises beside the measurements instead of below them. */
  @media (max-height: 500px) and (orientation: landscape) {
    .site-head-inner { min-height: 48px; padding-block: 0.3rem; }
    .pdp-hero { height: 15vh; min-height: 58px; }
    .pdp-hero .wrap { padding-bottom: 0.4rem; }
    .pg-product .pdp-hero h1 { font-size: 2.2rem; }
    .pdp-kicker { display: none; }
    .pdp-meta { grid-template-columns: 1.4fr 0.6fr; padding: 0.4rem 0; }
    .pdp-summary { font-size: 1rem; }
    .pdp-buybox { gap: 0.2rem; }
    .pdp-buybox .price { font-size: 1.6rem; }
    .pdp-proof { margin-top: 0.6rem; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
    .pdp-proof .slot-30, .pdp-proof .slot-50, .pdp-proof .slot-60 { grid-column: auto; grid-row: auto; }
    .pdp-proof .slot-40 { grid-column: 1 / -1; grid-row: auto; }
    .pdp-proof .slot-70 { grid-column: 2; grid-row: auto; }
    .pdp-proof .slot-40 dl { grid-template-columns: repeat(4, 1fr); }
    .pdp-proof .slot { padding: 0.7rem 0.8rem; }
    .pdp-proof .slot-30 p, .pdp-proof .slot-50 p, .pdp-proof .slot-60 p { font-size: 0.9rem; line-height: 1.45; }
  }