/* Cases · the home station's CH 1 glass, /cases (the workstation and the shelf) and
   /cases/{slug} (the disk, read). Merge of the bake-off finalists (2026-09-30):
   p7 "The Floppy Shelf, Booted" as the base, p6's disk craft, shelf tags, lit
   step wash, title clamp and staggered prints, p8's scene motion, tablet index
   layout, act headings and identity colophon.
   Halden's room (tokens from input.css / room.css) holds a computer and a shelf
   of disks; each disk and each case page wears its own case's palette
   (content.Case.Identity, sealed as --c-* custom properties on the case's own
   element). Halden tokens are never recoloured by a case; screenshots are never
   filtered, blended or dithered (AC O4).
   Every rule sits under [data-cases]. Keyframes are prefixed cs-. Motion only
   inside prefers-reduced-motion: no-preference, transforms and opacity only; at
   rest (no JS, reduced motion) all content is visible. */

[data-cases] {
  /* named sizes, each with its reason (AC P5) */
  --cs-desk-max: 1680px;            /* the index station: the wall's column, so the monitor and a shelf of full-size disks sit side by side */
  --cs-plank: 18px;                 /* shelf plank thickness: reads as wood, not a rule line */
  --cs-disk-max: 184px;             /* a disk on the shelf: big enough for its label word and tagline, three to a plank; the monitor is the big object */
  --cs-bz: 22px;                    /* monitor bezel (sides and top) on the index glass */
  --cs-bz-b: 44px;                  /* monitor chin: room for the badge, vent and power LED */
  --cs-glass-pad: 20px;             /* text inset from the glass edge */
  --cs-rad: 22px;                   /* monitor corner radius (room.css .crt) */
  --cs-st-top: 64px;                /* /cases: the wall's top to the station (room for the tape label) */
  /* The camera. A case page scales the station by --cs-a so the monitor fills the view under the
     header with --cs-m of wall on every side; the monitor's own size is that frame over --cs-a,
     so the zoom lands on it exactly. */
  --cs-a: 1.8;                      /* the zoom: the index monitor stays the big object beside a full shelf */
  --cs-m: clamp(8px, 1.6vw, 30px);  /* case page: wall round the monitor, under 4% a side from 900px */
  --cs-hdr: calc(var(--hdr) + 1px); /* the sticky header and its rule */
  --cs-bay-h: 56px;                 /* case page: the top bezel's drive bay, eject a 44px key with air */
  --cs-ws: min(100vw - 2 * var(--pad), var(--cs-desk-max));
  --cs-mw: calc((100vw - 2 * var(--cs-m)) / var(--cs-a));
  --cs-mh: calc((100svh - var(--cs-hdr) - 2 * var(--cs-m)) / var(--cs-a));   /* svh: mobile browser chrome never cuts it */
  --cs-bz-t: max(var(--cs-bz), calc(var(--cs-bay-h) / var(--cs-a)));          /* top bezel: room for the bay once zoomed */
  --cs-cyc: 20s;                    /* the home abstract case: four steps of 5s, long enough to read each caption */
  --cs-boot: 360ms;                 /* home: a disk boots the pane for one short beat before the page follows */
  --cs-plastic: linear-gradient(170deg, var(--color-plastic) 0%, var(--color-plastic) 55%, var(--color-plastic-lo) 100%);
  --cs-bevel: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -3px -4px 0 rgba(0, 0, 0, .18);
  --cs-wood: linear-gradient(180deg, var(--color-wood-hi) 0%, var(--color-wood) 55%, #3f2b1b 100%);
  --cs-frame-mute: #4f4c41;         /* muted ink on the beige plastic: 5:1 on its lightest and darkest shade */
  @media (max-width: 1099px) { --cs-a: 1.9; --cs-st-top: 56px; --cs-bz-b: 34px; }
  @media (max-width: 899px) { --cs-a: 1.08; --cs-st-top: 60px; --cs-ws: var(--cs-mw); --cs-bay-h: 48px; }   /* the monitor already spans a phone: the camera mostly pans */
  @media (max-width: 760px) { --cs-bz: 10px; --cs-bz-b: 28px; --cs-glass-pad: 12px; --cs-rad: 15px; }

  /* ════════════ shared objects ════════════ */

  /* status stamp (DESIGN.md Stamps): red in progress, green complete, on opaque paper so it keeps 4.5:1 */
  & .cs-stamp {
    display: inline-block;
    font: 700 max(var(--fs-floor, 0px), 11.5px)/1 var(--font-term);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-stamp-red);
    background: var(--color-paper);
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: 5px 7px 4px;
    white-space: nowrap;
    transform: rotate(-3.5deg);
  }
  & .cs-stamp.cs-stamp-done { color: #1b6f38; }  /* stamp green, 5.4:1 on paper */

  /* the 3.5" disk, moulded in its case's accent */
  & .cs-disk {
    position: relative;
    display: block;
    width: 100%;
    max-width: var(--cs-disk-max);
    color: var(--c-ink);
    text-decoration: none;
    transform: rotate(var(--tilt, 0deg));
    transform-origin: 50% 100%;
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, .5));
  }
  & .cs-disk-body {
    position: relative;
    display: block;
    aspect-ratio: 90 / 94;           /* a real 3.5" disk is 90 x 94 mm */
    background:
      /* moulded edge: a lip catches the lamp top-left, shade bottom-right */
      linear-gradient(180deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px calc(100% - 3px), rgba(0, 0, 0, .3) calc(100% - 3px)),
      linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px calc(100% - 2px), rgba(0, 0, 0, .26) calc(100% - 2px)),
      /* a fine matte grain, not a gloss */
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 3px),
      linear-gradient(165deg, color-mix(in oklab, var(--c-accent) 90%, white) 0%, var(--c-accent) 38%, color-mix(in oklab, var(--c-accent) 80%, black) 100%);
    clip-path: polygon(0 1.5%, 1.5% 0, 93% 0, 100% 6.5%, 100% 98.5%, 98.5% 100%, 1.5% 100%, 0 98.5%);
  }
  /* the sliding metal shutter, brushed */
  & .cs-disk-sh {
    position: absolute;
    left: 22%;
    width: 56%;
    top: 0;
    height: 34%;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
      linear-gradient(90deg, #8a8f8b 0%, #d2d6d2 34%, #b9beb9 60%, #8e938f 100%);
    border-radius: 0 0 1.5px 1.5px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 1px 1px 2px rgba(0, 0, 0, .25);
  }
  & .cs-disk-sh i {
    position: absolute;
    right: 16%;
    top: 15%;
    width: 20%;
    height: 62%;
    background: #1b1d1c;
    border-radius: 1px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .8);
  }
  /* the label sticker: the case's own ground, glyph (right), word and tagline */
  & .cs-disk-lb {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 42%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .3em;
    padding: 12% 9% 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--c-font);
    border-radius: 1.5px 1.5px 0 0;
    box-shadow: inset 0 3px 0 var(--c-accent), 0 -1px 0 rgba(0, 0, 0, .18);  /* a printed band at the top edge */
    container-type: inline-size;
    overflow: hidden;
  }
  & .cs-disk-g {
    position: absolute;
    right: 8%;
    top: 12%;
    font-size: max(15px, 15cqi);
    line-height: 1;
    color: var(--c-soft, var(--c-accent));
  }
  & .cs-tone-light .cs-disk-g { color: var(--c-accent); }
  & .cs-disk-w {
    padding-right: 18cqi;
    font-weight: 700;
    font-size: max(13px, 10.5cqi);
    line-height: 1.08;
    letter-spacing: .05em;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  & .cs-disk-t {
    font-size: max(var(--fs-floor, 0px), max(11px, 7.2cqi));
    line-height: 1.28;
    color: color-mix(in oklab, var(--c-ink) 82%, var(--c-bg));
  }
  /* a narrow label (its content box; the disk under ~175px) keeps glyph and word whole, the word on its
     own line sized to fit "COMPASSION"; the tagline is on the case page and in the link's name */
  @container (max-width: 112px) {
    & .cs-disk-t { display: none; }
    & .cs-disk-g { position: static; font-size: max(14px, 16cqi); margin-bottom: 2px; }
    & .cs-disk-w { padding-right: 0; font-size: max(var(--fs-floor, 0px), min(14cqi, 15px)); letter-spacing: .02em; overflow-wrap: normal; }
  }
  & .cs-disk-wp {
    position: absolute;
    left: 3.5%;
    bottom: 3%;
    width: 4.5%;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, .55);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .6);
  }
  /* the moulded grip ridges beside the shutter */
  & .cs-disk-grip {
    position: absolute;
    left: 5%;
    top: 8%;
    width: 11%;
    height: 22%;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 1px, rgba(255, 255, 255, .1) 1px 2px, transparent 2px 5px);
    opacity: .8;
  }

  /* the cases' own type, never Halden's mono (DESIGN.md Typography: system stacks only) */
  & .cs-type-sans { --c-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --c-head: var(--c-font); }
  & .cs-type-serif {
    --c-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --c-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  }
  & .cs-disk.cs-type-serif .cs-disk-w { font-family: var(--c-head); letter-spacing: .03em; }

  /* the PC base, its 3.5" drive and LED */
  & .cs-unit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 62px;
    margin: -4px -12px 0;
    padding: 0 22px;
    background: var(--cs-plastic);
    border-radius: 6px 6px 8px 8px;
    box-shadow: var(--cs-bevel), var(--sh);
  }
  & .cs-unit-badge { font: 700 max(var(--fs-floor, 0px), 10.5px) var(--font-term); letter-spacing: .3em; color: rgba(0, 0, 0, .5); white-space: nowrap; }
  & .cs-drive-bay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(56%, 300px);
    height: 30px;
    padding: 0 12px;
    background: linear-gradient(180deg, #bdb398, #cfc6ab);
    border-radius: 3px;
    box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .5);
  }
  & .cs-slot-mouth {
    flex: 1;
    height: 6px;
    background: #111311;
    border-radius: 2px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .8);
  }
  & .cs-drive-btn {
    width: 16px;
    height: 9px;
    background: linear-gradient(180deg, #e4dcc4, #a99f83);
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  }
  & .cs-drive-led {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b4637;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  }
  & .cs-drive-led.cs-led-on, & .cs-drive-led.cs-busy {
    background: var(--color-power-led);
    box-shadow: 0 0 7px var(--color-power-led);
  }

  /* a disk booting on a screen: the case's own ground, glyph, word and tagline, then the page follows */
  & .cs-splash {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 8% 9%;
    background: var(--c-bg, var(--color-screen));
    color: var(--c-ink, var(--color-phosphor));
    font-family: var(--c-font, system-ui, sans-serif);
    text-shadow: none;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(.02);
    pointer-events: none;
  }
  & .cs-splash.cs-on { visibility: visible; opacity: 1; transform: none; transition: transform 150ms cubic-bezier(.2, .9, .3, 1), opacity 80ms linear; }
  /* ejecting: the glass is just the case's ground as the camera pulls back */
  & .cs-splash.cs-on.cs-blank { transition: none; }
  & .cs-splash.cs-blank > * { visibility: hidden; }
  & .cs-sp-path { font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--c-ink) 72%, var(--c-bg)); }
  & .cs-sp-g { font-size: clamp(40px, 5vw, 76px); line-height: 1; color: var(--c-soft, var(--c-accent)); }
  & .cs-sp-w { max-width: 100%; font: 700 clamp(24px, 3.2vw, 48px)/1.05 var(--c-head, var(--c-font)); letter-spacing: .06em; overflow-wrap: break-word; }
  & .cs-sp-t { font-size: clamp(15px, 1.3vw, 19px); color: color-mix(in oklab, var(--c-ink) 80%, var(--c-bg)); }
  & .cs-sp-bar { width: min(340px, 72%); height: 6px; margin-top: 12px; background: color-mix(in oklab, var(--c-ink) 16%, var(--c-bg)); }
  & .cs-sp-bar i { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }
  & .cs-splash.cs-fill .cs-sp-bar i { transform: scaleX(1); transition: transform var(--cs-boot) steps(8, end); }

  /* ════════════ HOME · CH 1 on the desk station's monitor, split 35:65 (station.css places it) ════════════ */
  & .cs-scr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px 6px;
    font: 14px/1.5 var(--font-term);
  }
  & .cs-scr > * { position: relative; z-index: 1; }
  & .cs-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--color-phosphor-faint);
    padding-bottom: 7px;
  }
  & .cs-bar-h {
    font: 700 clamp(22px, 2vw, 30px)/1 var(--font-term);
    letter-spacing: .04em;
    color: var(--color-phosphor-hi);
  }
  & .cs-bar-r { color: var(--color-phosphor-dim); font-size: max(var(--fs-floor, 0px), 12.5px); }
  & .cs-panes {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    border: 1px solid var(--color-phosphor-faint);
  }
  & .cs-drive { grid-column: 1; grid-row: 1; }
  & .cs-run { grid-column: 2; grid-row: 1; }
  & .cs-panes > .cs-splash { grid-column: 2; grid-row: 1; }
  & .cs-pane { min-width: 0; padding: 10px clamp(12px, 1.2vw, 18px) 12px; }
  & .cs-drive { display: flex; flex-direction: column; border-right: 1px solid var(--color-phosphor-faint); }
  & .cs-pane-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin-bottom: 8px;
    font: 700 max(var(--fs-floor, 0px), 11px)/1.2 var(--font-term);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-phosphor-dim);
  }
  & .cs-icons {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }
  & .cs-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: var(--touch);
    padding: 10px 4px 8px;
    color: var(--color-phosphor);
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
  }
  & .cs-fd {
    width: clamp(44px, 4.2vw, 62px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 4px rgba(140, 255, 120, .35));
    transition: transform var(--fast) var(--ease);
  }
  & .cs-fd-b { fill: rgba(166, 245, 154, .06); stroke: var(--color-phosphor); stroke-width: 1.6; }
  & .cs-fd-sh { fill: var(--color-screen); stroke: var(--color-phosphor); stroke-width: 1.4; }
  & .cs-fd-win { fill: var(--color-phosphor-dim); }
  /* the one colour on this screen: each disk's label, filled with its own case's accent */
  & .cs-fd-lb { fill: var(--c-accent); stroke: var(--color-phosphor); stroke-width: .8; }
  & .cs-icon-n { font-size: 13px; line-height: 1.25; padding: 1px 4px; color: var(--color-phosphor-hi); }
  & .cs-icon:hover .cs-icon-n, & .cs-icon:focus-visible .cs-icon-n {
    background: var(--color-phosphor);
    color: var(--color-phosphor-ink);
    text-shadow: none;
  }
  & .cs-icon:hover .cs-fd, & .cs-icon:focus-visible .cs-fd { transform: translateY(-4px); }
  & .cs-drive-hint { margin-top: auto; padding-top: 8px; font-size: max(var(--fs-floor, 0px), 12px); color: var(--color-phosphor-dim); text-align: center; }

  & .cs-run { position: relative; display: flex; flex-direction: column; container: csrun / inline-size; }
  & .cs-pause {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-phosphor-faint);
    background: transparent;
    color: var(--color-phosphor-dim);
    font: 700 max(var(--fs-floor, 0px), 11px) var(--font-term);
    letter-spacing: .1em;
    white-space: nowrap;
    cursor: pointer;
  }
  & .cs-pause[hidden] { display: none; }
  & .cs-pause:hover { color: var(--color-phosphor-hi); border-color: var(--color-phosphor-dim); }
  & .cs-pause[aria-pressed="true"] { color: var(--color-amber); border-color: var(--color-amber); }

  /* the caption: Zach's step words, big, amber numeral, over the verbatim case heading.
     Sized to the pane so the longest step stays on one line wherever the pane is wide enough. */
  & .cs-caps { display: grid; }
  & .cs-cap {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    visibility: hidden;
    opacity: 0;
  }
  & .cs-cap:nth-child(4) { visibility: visible; opacity: 1; }  /* at rest: delivered */
  & .cs-cap-h {
    font: 700 clamp(18px, calc(100cqi / 22.5), 30px)/1.12 var(--font-term);
    color: var(--color-phosphor-hi);
    text-shadow: 0 0 10px rgba(140, 255, 120, .45);
    text-wrap: balance;
  }
  @container csrun (min-width: 420px) {
    & .cs-cap-h { white-space: nowrap; }
  }
  & .cs-cap-h b { color: var(--color-amber); text-shadow: 0 0 8px rgba(255, 191, 63, .35); margin-right: .2em; }
  & .cs-cap-q { font: 13px/1.45 var(--font-term); color: var(--color-phosphor-dim); }

  /* the scene, drawn in phosphor on the glass; its resting state is the delivered frame. */
  & .cs-scene {
    display: block;
    width: 100%;
    height: clamp(170px, 22vw, 280px);   /* the static stack; pinned, the scene flexes to fill the glass (station.css) */
    margin: 4px 0 0;
  }
  & .cs-scene * { transform-box: fill-box; }
  & .cs-grid path { stroke: rgba(39, 66, 42, .55); stroke-width: 1; }
  & .cs-frag { fill: var(--color-phosphor-dim); opacity: 0; transform-origin: center; }
  & .cs-ret-pos { transform-box: view-box; transform: translate(320px, 164px); }
  & .cs-reticle { opacity: 0; fill: none; stroke: var(--color-amber); stroke-width: 2; }
  & .cs-guides { fill: none; stroke: var(--color-phosphor-dim); stroke-width: 1; stroke-dasharray: 4 6; opacity: .35; }
  & .cs-build rect { fill: rgba(166, 245, 154, .2); stroke: var(--color-phosphor); stroke-width: 2; transform-origin: left center; }
  & .cs-links { fill: none; stroke: var(--color-phosphor); stroke-width: 1.4; }
  & .cs-nodes circle { fill: var(--color-phosphor-hi); transform-origin: center; }
  & .cs-core-sq { fill: var(--color-phosphor-hi); transform-origin: center; filter: drop-shadow(0 0 6px rgba(160, 255, 130, .7)); }
  & .cs-core-ring { fill: none; stroke: var(--color-phosphor); stroke-width: 1.4; opacity: 0; transform-origin: center; }
  & .cs-ground { fill: var(--color-phosphor-dim); transform-origin: left center; }
  & .cs-trace { fill: none; stroke: var(--color-phosphor); stroke-width: 2; stroke-linejoin: round; }

  /* the step strip: the lit step gets a faint wash (opacity only); every step keeps full contrast */
  & .cs-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
  }
  & .cs-steps li {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--color-phosphor-faint);
  }
  & .cs-steps li::after {
    content: "";
    position: absolute;
    inset: 0 -5px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(166, 245, 154, .12), rgba(166, 245, 154, 0));
    opacity: 0;
    pointer-events: none;
  }
  & .cs-st-n { font: 700 max(var(--fs-floor, 0px), 11px)/1 var(--font-term); letter-spacing: .14em; color: var(--color-amber); }
  & .cs-st-t { font: 700 13.5px/1.25 var(--font-term); color: var(--color-phosphor-hi); }
  & .cs-st-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--color-amber);
    transform: scaleX(0);
    transform-origin: left;
  }
  & .cs-prompt { font-size: 13.5px; }
  & .cs-prompt a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    color: var(--color-phosphor-hi);
    text-decoration: underline dotted;
    text-underline-offset: 4px;
  }
  & .cs-prompt a:hover { background: var(--color-phosphor); color: var(--color-phosphor-ink); text-shadow: none; }

  /* ════════════ THE ROOM · /cases and /cases/{slug}, one scene ════════════
     The station (monitor, PC, desk, shelf) is one element. /cases shows it as laid out; a case
     page (data-cases="case") puts ONE transform on it, the camera: scale(--cs-a) about its top-left,
     moved so the monitor, bezels and all, fills the view under the header with --cs-m of wall round
     it. The monitor's own size is that final frame divided by the zoom, so the zoom lands exactly,
     at every size, with no JS. cases.js animates only that transform. */
  &.cs-room { max-width: none; padding: var(--wall-top) 0 72px; }
  & .cs-station {
    display: grid;
    grid-template-columns: var(--cs-mw) minmax(0, 1fr);   /* the monitor, the shelf beside it */
    grid-template-rows: var(--cs-mh) auto auto;
    column-gap: clamp(28px, 3.4vw, 64px);
    width: var(--cs-ws);
    margin: var(--cs-st-top) auto 0;
    transform-origin: 0 0;
  }
  & .cs-off { display: contents; }   /* the PC, desk and shelf: inert while the camera is in */
  & .cs-idx-tape { left: 0; top: -40px; --t: -2deg; }
  & .cs-idx-halo { grid-column: 1; grid-row: 1; }
  & .cs-monitor {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    height: var(--cs-mh);
    padding: var(--cs-bz-t) var(--cs-bz) var(--cs-bz-b);
    border-radius: var(--cs-rad);
  }
  & .cs-screen {
    min-height: 0;
    padding: 0;
    container: csscreen / size;   /* the directory fits itself to the glass */
  }
  & .cs-glass-slot { position: relative; z-index: 1; height: 100%; }
  & .cs-idx-splash {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    pointer-events: none;
  }
  & .cs-unit { grid-column: 1; grid-row: 2; }
  & .cs-pc-desk {
    grid-column: 1;
    grid-row: 3;
    display: block;
    height: 22px;
    margin: 0 -40px;
    background: var(--cs-wood);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .08);
  }
  & .cs-shelf { grid-column: 2; grid-row: 1 / 4; align-self: center; position: relative; min-width: 0; }
  & .cs-disk.cs-loaded { visibility: hidden; }   /* in the drive: its case is on the monitor */

  /* the directory on the glass */
  & .cs-dirview {
    height: 100%;
    overflow-y: auto;
    padding: 14px var(--cs-glass-pad) 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-phosphor-dim) transparent;
  }
  & .cs-cmd { font-size: 13px; color: var(--color-phosphor); text-shadow: 0 0 6px rgba(140, 255, 120, .35); }
  & .cs-dir-h {
    font: 700 clamp(26px, 2.4vw, 40px)/1.1 var(--font-term);
    color: var(--color-phosphor-hi);
    text-shadow: 0 0 6px rgba(140, 255, 120, .35);
    margin: 4px 0 8px;
  }
  & .cs-dir-list { list-style: none; border-top: 1px solid var(--color-phosphor-faint); font: 14px/1.5 var(--font-term); }
  & .cs-dir-list li { border-bottom: 1px dashed var(--color-phosphor-faint); }
  & .cs-row {
    display: block;
    padding: 8px 8px 9px;
    color: var(--color-phosphor);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(140, 255, 120, .3);
  }
  & .cs-row-top { display: flex; align-items: baseline; gap: 12px; }
  & .cs-row-n { font-weight: 700; color: var(--color-phosphor-hi); text-transform: uppercase; letter-spacing: .04em; }
  & .cs-row-y { font-size: max(var(--fs-floor, 0px), 12.5px); }
  & .cs-row-s { margin-left: auto; font-size: max(var(--fs-floor, 0px), 12px); color: var(--color-phosphor-dim); white-space: nowrap; }
  & .cs-row-s::before { content: "["; }
  & .cs-row-s::after { content: "]"; }
  & .cs-row-done { color: var(--color-phosphor-hi); }
  & .cs-row-o { display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; }
  /* a short or narrow glass: name, year and status only (the one-liners are on the case pages and in each disk's name) */
  @container csscreen (max-height: 470px) or (max-width: 480px) {
    & .cs-row-o { display: none; }
    & .cs-row { padding: 7px 8px; }
  }
  /* a very short glass (a landscape tablet): the directory tightens so all six rows and the prompt fit */
  @container csscreen (max-height: 330px) {
    & .cs-dirview { padding-top: 10px; padding-bottom: 6px; }
    & .cs-dir-h { font-size: 22px; margin: 2px 0 4px; }
    & .cs-row { padding: 4px 8px; }
    & .cs-cmd-end { margin-top: 4px; }
  }
  & .cs-row:hover, & .cs-row:focus-visible, & .cs-row.cs-lit {
    background: var(--color-phosphor);
    color: var(--color-phosphor-ink);
    text-shadow: none;
  }
  & .cs-row:hover *, & .cs-row:focus-visible *, & .cs-row.cs-lit * { color: var(--color-phosphor-ink); }
  & .cs-cmd-end { margin-top: 10px; }

  /* the shelf: planks of wood, three disks to a plank, on twin-slot rails screwed to the wall */
  & .cs-brk {
    position: absolute;
    top: -26px;
    bottom: -40px;
    width: 12px;
    background:
      repeating-linear-gradient(180deg, transparent 0 10px, #202320 10px 17px) 3px 0 / 6px 100% no-repeat,
      linear-gradient(90deg, var(--color-steel-lo), var(--color-steel-hi) 45%, var(--color-steel));
    border-radius: 2px;
    box-shadow: var(--sh-s);
  }
  & .cs-brk-l { left: 16%; }
  & .cs-brk-r { right: 16%; }
  & .cs-disks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(52px, 4vw, 64px);
    padding: 0 6px 34px;
  }
  & .cs-slot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 26px clamp(6px, .8vw, 14px) 0;
    margin-bottom: var(--cs-plank);
  }
  /* each cell carries its piece of the plank; three pieces join into one board */
  & .cs-slot::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: calc(-1 * var(--cs-plank));
    height: var(--cs-plank);
    background: var(--cs-wood);
    box-shadow: 0 12px 16px -6px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .25);
    z-index: 0;
  }
  & .cs-slot .cs-disk { z-index: 1; transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease); }
  & .cs-slot .cs-disk:hover, & .cs-slot .cs-disk:focus-visible, & .cs-slot .cs-disk.cs-lit {
    transform: translateY(-12px) rotate(0deg);
    filter: drop-shadow(5px 12px 8px rgba(0, 0, 0, .5));
  }
  & .cs-disk.cs-going { z-index: 40; transition: none; }
  /* a paper tag tacked to the plank's front edge: shelf number and status stamp */
  & .cs-tag {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 10px;
    background: var(--color-paper);
    color: var(--color-ink);
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .1em;
    white-space: nowrap;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, .4);
    transform: translateX(-50%) rotate(var(--tt, 0deg));
  }
  & .cs-tag .cs-stamp { font-size: max(var(--fs-floor, 0px), 11px); padding: 4px 6px 3px; transform: rotate(-2deg); }

  /* ════════════ CASE · the camera in on the monitor ════════════ */
  &[data-cases="case"] { height: 100%; overflow: clip; padding-bottom: 0; }
  &[data-cases="case"] .cs-station {
    transform:
      translate(calc(var(--cs-m) - (100vw - var(--cs-ws)) / 2), calc(var(--cs-m) - var(--wall-top) - var(--cs-st-top)))
      scale(var(--cs-a));
  }
  /* with the case on it, the glass drops its phosphor: no scanlines over the case's screenshots (AC O4), no green glow */
  & .cs-screen:has(.cs-scroll) { box-shadow: 0 0 0 2px #0b0d0a; }
  & .cs-screen:has(.cs-scroll)::before { display: none; }

  /* The glass and the top bezel's drive bay are drawn at their final size: each is
     --cs-a times its box and scaled back by 1/--cs-a, so under the camera it is 1:1 and
     its text is laid out and rasterised crisp, never a scaled-up bitmap. */
  & .cs-bay {
    position: absolute;
    left: var(--cs-bz);
    right: var(--cs-bz);
    top: 0;
    height: var(--cs-bz-t);
  }
  & .cs-bay-in {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% * var(--cs-a));
    height: calc(100% * var(--cs-a));
    transform: scale(calc(1 / var(--cs-a)));
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 4px;
    color: var(--color-ink);
    font: 14px/1.3 var(--font-term);
    white-space: nowrap;
  }
  & .cs-bay-drive {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    width: 190px;
    height: 30px;
    padding: 0 12px;
    background: linear-gradient(180deg, #bdb398, #cfc6ab);
    border-radius: 3px;
    box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .5);
  }
  & .cs-bay-mouth {
    position: relative;
    flex: 1;
    height: 6px;
    background: #111311;
    border-radius: 2px;
    overflow: hidden;
  }
  /* the loaded disk's edge, in its own colour, showing in the slot */
  & .cs-bay-disk { position: absolute; left: 18%; right: 18%; top: 1px; height: 3px; background: var(--c-accent); }
  & .cs-bay-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; }
  & .cs-bay-path .ph-dim { color: var(--cs-frame-mute); }
  & .cs-bay-st { font-weight: 400; margin-left: 12px; }
  & .cs-bay-stamp { flex: none; transform: rotate(-3deg); }
  & .cs-eject {
    margin-left: auto;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .45em;
    min-height: var(--touch);
    padding: 0 16px;
    background: linear-gradient(180deg, #e7dfc8, #b9af93);
    color: var(--color-ink);
    font: 700 max(var(--fs-floor, 0px), 12.5px)/1 var(--font-term);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #8e8469, 0 3px 4px rgba(0, 0, 0, .3);
  }
  & .cs-eject span[aria-hidden] { font-size: 1.35em; line-height: 1; letter-spacing: 0; }
  & .cs-eject:hover { transform: translateY(1px); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), 0 1px 0 #8e8469, 0 2px 3px rgba(0, 0, 0, .3); }

  /* the glass: the case's own page, the scroll container. Scrollbar: thin, in the case's own accent. */
  & .cs-scroll {
    --c-surf: var(--c-surface, color-mix(in oklab, var(--c-bg) 93%, var(--c-ink)));
    --c-mute: color-mix(in oklab, var(--c-ink) 74%, var(--c-bg));
    --c-rule: color-mix(in oklab, var(--c-ink) 17%, var(--c-bg));
    --c-hi: var(--c-soft, var(--c-accent));
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% * var(--cs-a));
    height: calc(100% * var(--cs-a));
    transform: scale(calc(1 / var(--cs-a)));
    transform-origin: 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-bg);
    color: var(--c-ink);
    font: 17px/1.62 var(--c-font);
    text-shadow: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 0 40px rgba(0, 0, 0, .35);
    scrollbar-width: thin;
    scrollbar-color: var(--c-hi) transparent;
    container: cssealed / inline-size; /* the case sizes to the glass, not the view */
  }
  & .cs-scroll.cs-tone-light { --c-hi: color-mix(in oklab, var(--c-accent) 58%, var(--c-ink)); }
  & .cs-scroll:focus-visible { outline: 2px solid var(--c-hi); outline-offset: -3px; }
  & .cs-scroll[data-cs-arrived]:focus-visible { outline: none; }   /* focused on arrival: no ring until a key is pressed */
  & .cs-sealed {
    position: relative;
    padding: clamp(24px, 6cqi, 84px) clamp(18px, 6cqi, 84px) clamp(40px, 7cqi, 96px);
  }
  & .cs-sealed :is(h1, h2, h3, h4) { font-family: var(--c-head); color: var(--c-ink); }
  & .cs-sealed p { overflow-wrap: break-word; }

  & .cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  /* a narrow glass: the poster goes under the title (the title keeps its words whole) */
  @container cssealed (max-width: 720px) {
    & .cs-hero { grid-template-columns: minmax(0, 1fr); }
  }
  & .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  & .cs-tags span {
    border: 1px solid var(--c-hi);
    color: var(--c-hi);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.3;
  }
  & .cs-title {
    font-size: clamp(40px, 9cqi, 116px);
    line-height: .94;
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: 22px;
    overflow-wrap: break-word;
  }
  & .cs-type-serif .cs-title { font-weight: 600; letter-spacing: -.01em; }
  & .cs-one { font-size: clamp(19px, 1.8vw, 25px); line-height: 1.42; max-width: 32ch; }
  & .cs-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; color: var(--c-mute); font-size: 15px; }
  & .cs-meta span + span::before { content: "·"; margin-inline-end: 18px; }
  & .cs-poster {
    background: var(--c-surf);
    border-top: 4px solid var(--c-accent);
    padding: clamp(20px, 2.4vw, 32px);
    min-width: 0;
  }
  & .cs-poster-g { display: block; font-size: 64px; line-height: 1; color: var(--c-hi); margin-bottom: 14px; }
  & .cs-poster-w { font: 700 clamp(20px, 2vw, 28px)/1.1 var(--c-head); letter-spacing: .12em; }
  & .cs-poster-t { color: var(--c-mute); font-style: italic; margin-top: 6px; }
  & .cs-poster-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--c-rule);
  }
  & .cs-poster-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
  & .cs-poster-stats dd { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1; color: var(--c-hi); overflow-wrap: anywhere; }
  & .cs-poster-stats dt { font-size: max(var(--fs-floor, 0px), 12px); line-height: 1.3; color: var(--c-mute); }
  & .cs-hero-shot { grid-column: 1 / -1; margin-top: clamp(8px, 1.5vw, 20px); }
  & .cs-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
    border-top: 1px solid var(--c-rule);
  }
  & .cs-facts div { padding: 14px 0 16px; border-bottom: 1px solid var(--c-rule); min-width: 0; }
  & .cs-facts dt { font-size: max(var(--fs-floor, 0px), 12px); letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute); margin-bottom: 3px; }
  & .cs-facts dd { font-size: 16px; line-height: 1.45; overflow-wrap: break-word; }
  & .cs-chapnav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
  & .cs-chapnav a {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    min-height: var(--touch);
    padding: 0 16px;
    border: 1px solid var(--c-rule);
    color: var(--c-ink);
    text-decoration: none;
    font-size: 15px;
  }
  & .cs-chapnav b { color: var(--c-hi); }
  & .cs-chapnav a:hover { border-color: var(--c-hi); }

  & .cs-mat {
    display: block;
    background: var(--c-screen);
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px var(--c-rule), 0 22px 44px -24px rgba(0, 0, 0, .55);
  }
  & .cs-mat img { display: block; width: 100%; height: auto; }
  & .cs-fig { min-width: 0; }
  & .cs-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  & .cs-fig figcaption b { display: block; font-weight: 700; }
  & .cs-fig figcaption span { color: var(--c-mute); }

  /* an act: a sticky column (roman numeral, name, its contents) beside the act's parts */
  & .cs-act {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: clamp(28px, 4.4vw, 72px);
    margin-top: clamp(64px, 8vw, 112px);
    padding-top: 28px;
    border-top: 3px solid var(--c-accent);
    scroll-margin-top: 16px;
  }
  & .cs-act-pin { position: sticky; top: 24px; align-self: start; }
  & .cs-act-n { display: block; font: 400 clamp(72px, 8vw, 132px)/.9 var(--c-head); color: var(--c-hi); letter-spacing: -.02em; }
  & .cs-act-pin h2 { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.02; margin-top: 10px; }
  & .cs-act-k { display: block; font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--c-font); letter-spacing: .18em; text-transform: uppercase; color: var(--c-mute); margin-bottom: 8px; }
  & .cs-toc { list-style: none; margin-top: 22px; border-inline-start: 1px solid var(--c-rule); }
  & .cs-toc a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: var(--touch);
    padding-block: 11px; padding-inline: 16px 0;
    font-size: 15px;
    line-height: 1.35;
    color: var(--c-mute);
    text-decoration: none;
    transition: color var(--fast) var(--ease);
  }
  & .cs-toc a::before {
    content: "";
    position: absolute;
    inset-inline-start: -2px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--c-accent);
    transform: scaleY(0);
    transition: transform var(--fast) var(--ease);
  }
  & .cs-toc a span { font-size: max(var(--fs-floor, 0px), 12.5px); font-weight: 700; color: var(--c-hi); font-variant-numeric: tabular-nums; }
  & .cs-toc a:hover, & .cs-toc a.cs-on { color: var(--c-ink); }
  & .cs-toc a.cs-on::before { transform: none; }
  & .cs-act-b { min-width: 0; display: flex; flex-direction: column; gap: clamp(52px, 6vw, 88px); }
  & .cs-sub { scroll-margin-top: 24px; }
  /* each part: its old number and title as a kicker, its verbatim question as the display heading */
  & .cs-sub-h { margin-bottom: clamp(22px, 2.6vw, 34px); }
  & .cs-sub-k { display: flex; gap: 10px; font-size: max(var(--fs-floor, 0px), 12.5px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); }
  & .cs-sub-k span { color: var(--c-hi); font-variant-numeric: tabular-nums; }
  & .cs-sub-h h3 { font-size: clamp(28px, 3vw, 46px); line-height: 1.08; letter-spacing: -.015em; font-weight: 600; max-width: 22ch; margin-top: 10px; text-wrap: balance; }
  & .cs-prose p { max-width: 68ch; }
  & .cs-prose p + p { margin-top: 1em; }
  & .cs-lead p { font-size: clamp(18px, 1.5vw, 20px); }
  & .cs-sealed code {
    font: max(var(--fs-floor, 0px), .86em) var(--font-term);
    background: var(--c-surf);
    padding: .1em .35em;
    border-radius: 3px;
  }
  & .cs-items, & .cs-learn {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px clamp(24px, 3vw, 44px);
    margin-top: 28px;
  }
  & .cs-items li, & .cs-learn li { border-top: 1px solid var(--c-rule); padding-top: 14px; min-width: 0; }
  & .cs-item-n { font-size: 13px; font-weight: 700; color: var(--c-hi); font-variant-numeric: tabular-nums; }
  & .cs-sealed h4 { font-size: 19px; line-height: 1.25; margin: 4px 0 6px; }
  & .cs-items p, & .cs-learn p { font-size: 16px; }
  & .cs-benefits { margin-top: 36px; }

  & .cs-arch { margin: 40px 0 0; }
  & .cs-arch-l {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
  }
  & .cs-arch-l li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--c-surf);
    border-inline-start: 3px solid var(--c-accent);
    padding: 16px 18px 18px;
    min-width: 0;
  }
  & .cs-arch-l li:not(:last-child)::after {
    content: "→";
    position: absolute;
    inset-inline-end: -26px;
    top: 50%;
    translate: 0 -50%;
    color: var(--c-hi);
    font-size: 18px;
  }
  & .cs-arch-i {
    align-self: flex-start;
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .1em;
    color: var(--c-hi);
    border: 1.5px solid var(--c-hi);
    padding: 4px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
  }
  & .cs-arch-l b { font-size: 17px; }
  & .cs-arch-s { color: var(--c-mute); font-size: 14px; }
  & .cs-arch-t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  & .cs-arch-t span { font-size: max(var(--fs-floor, 0px), 12px); border: 1px solid var(--c-rule); padding: 2px 8px; border-radius: 999px; }
  & .cs-arch figcaption { margin-top: 14px; color: var(--c-mute); font-style: italic; font-size: 14.5px; text-align: center; }
  & .cs-pillars {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
  }
  & .cs-pillars li { display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--c-accent); padding-top: 12px; min-width: 0; }
  & .cs-pillar-i { font-size: 26px; color: var(--c-hi); line-height: 1.1; }
  & .cs-pillars span:last-child { color: var(--c-mute); font-size: 14px; }
  & .cs-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
  & .cs-stack li { border: 1px solid var(--c-rule); padding: 5px 13px; font-size: 14px; border-radius: 999px; }
  & .cs-preview { margin-top: 40px; }
  & .cs-kicker { font-size: max(var(--fs-floor, 0px), 12px); letter-spacing: .14em; text-transform: uppercase; color: var(--c-hi); margin-bottom: 14px; }
  & .cs-shots { display: grid; gap: 30px 26px; align-items: start; }
  & .cs-shots-1 { margin-top: 36px; }
  /* screens staggered like prints laid on a desk (never rotated) */
  & .cs-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); }
  & .cs-prints > .cs-fig:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
  & .cs-prints-g > .cs-fig:nth-child(2n) { margin-top: clamp(28px, 4vw, 64px); }

  & .cs-tl { list-style: none; }
  & .cs-tl li { position: relative; padding-block: 0 28px; padding-inline: 34px 0; }
  & .cs-tl li::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 16px;
    bottom: -2px;
    width: 2px;
    background: var(--c-rule);
  }
  & .cs-tl li:last-child::before { display: none; }
  & .cs-tl-dot {
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--c-rule);
    background: var(--c-bg);
  }
  & .cs-tl-done .cs-tl-dot { background: var(--c-accent); border-color: var(--c-accent); }
  & .cs-tl-current .cs-tl-dot { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-accent) 30%, transparent); }
  & .cs-tl-k { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-mute); }
  & .cs-tl-k span:first-child { color: var(--c-hi); font-weight: 700; }
  & .cs-tl p:last-child { max-width: 68ch; font-size: 16px; }

  & .cs-ch { list-style: none; }
  & .cs-ch li { border-top: 1px solid var(--c-rule); padding: 20px 0 24px; }
  & .cs-ch h4 { font-size: 20px; margin-bottom: 12px; }
  & .cs-ch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 3vw, 44px); font-size: 16px; }
  & .cs-lbl { display: block; font-size: max(var(--fs-floor, 0px), 11.5px); letter-spacing: .16em; text-transform: uppercase; color: var(--c-hi); margin-bottom: 4px; font-weight: 700; }
  & .cs-ch-pair p:first-child { color: var(--c-mute); }

  & .cs-ba { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  & .cs-ba-t { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
  & .cs-ba-t th {
    text-align: start;
    font-size: max(var(--fs-floor, 0px), 12px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-mute);
    padding: 0 14px 8px 0;
    border-bottom: 2px solid var(--c-accent);
  }
  & .cs-ba-t td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--c-rule); width: 50%; overflow-wrap: break-word; }
  & .cs-ba-t td:first-child { color: var(--c-mute); }
  & .cs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
    margin-bottom: 12px;
  }
  & .cs-kpis div { display: flex; flex-direction: column; border-top: 3px solid var(--c-accent); padding-top: 12px; min-width: 0; }
  & .cs-kpis dt { order: 2; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
  & .cs-kpi-v { order: 1; font: 700 clamp(32px, 3.2vw, 46px)/1 var(--c-head); color: var(--c-hi); overflow-wrap: anywhere; }
  & .cs-kpi-s { order: 3; color: var(--c-mute); font-size: 14px; }

  & .cs-show { margin-top: clamp(72px, 9vw, 130px); padding-top: 28px; border-top: 1px solid var(--c-rule); scroll-margin-top: 16px; }
  & .cs-show-h { margin-bottom: 30px; max-width: 64ch; }
  & .cs-show-h h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; }
  & .cs-deck { color: var(--c-mute); font-style: italic; font-size: 18px; margin-top: 8px; }
  & .cs-flow { margin: 0 0 34px; }
  & .cs-flow figcaption { font-size: max(var(--fs-floor, 0px), 12.5px); letter-spacing: .14em; text-transform: uppercase; color: var(--c-hi); font-weight: 700; margin-bottom: 12px; }
  & .cs-flow ol { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  & .cs-flow li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--c-surf);
    padding: 14px 14px 16px;
    min-width: 0;
    border: 2px solid transparent;
  }
  & .cs-flow li:not(:last-child)::after {
    content: "›";
    position: absolute;
    inset-inline-end: -13px;
    top: 50%;
    translate: 0 -50%;
    color: var(--c-hi);
    font-size: 20px;
  }
  & .cs-flow li.cs-gate { border-color: var(--c-accent); }
  & .cs-flow-n { font-size: max(var(--fs-floor, 0px), 12px); font-weight: 700; color: var(--c-hi); }
  & .cs-flow b { font-size: 15px; line-height: 1.25; overflow-wrap: break-word; }
  & .cs-flow li > span:last-child { color: var(--c-mute); font-size: 13.5px; line-height: 1.4; }
  & .cs-demos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  & .cs-demos li { display: flex; flex-direction: column; gap: 6px; background: var(--c-surf); padding: 18px; min-width: 0; }
  & .cs-demos li > span:last-child { color: var(--c-mute); font-size: 14.5px; }
  /* a small abstract mark for each of The Cave's interaction demos (decorative) */
  & .cs-demo-v { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-bottom: 8px; }
  & .cs-demo-v i { display: block; width: 14px; height: 100%; background: var(--c-accent); opacity: .85; transform-origin: bottom; }
  & .cs-demo-v i:nth-child(2) { height: 70%; opacity: .6; }
  & .cs-demo-v i:nth-child(3) { height: 45%; opacity: .4; }
  & .cs-v-radial i { border-radius: 50%; width: 30px; height: 30px !important; }

  /* the end of the case: the next disk, eject, and the identity colophon, in the case's own palette */
  & .cs-end {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 28px clamp(18px, 6cqi, 84px) 8px;
    border-top: 3px solid var(--c-accent);
    color: var(--c-ink);
  }
  & .cs-end-next {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    flex: 1 1 420px;
    color: var(--c-ink);
    text-decoration: none;
  }
  /* the next disk is a picture: glyph and word, sized to its label so nothing is cut */
  & .cs-end-disk { flex: none; width: 124px; padding-top: 6px; }
  & .cs-end-disk .cs-disk { --tilt: -3deg; transition: transform var(--fast) var(--ease); }
  & .cs-end-disk .cs-disk-t { display: none; }
  & .cs-end-disk .cs-disk-w { font-size: max(var(--fs-floor, 0px), 11cqi); padding-right: 0; letter-spacing: .03em; }
  & .cs-end-disk .cs-disk-g { font-size: max(var(--fs-floor, 0px), 17cqi); top: 10%; }
  & .cs-end-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--font-term); }
  & .cs-end-k { font: 700 max(var(--fs-floor, 0px), 11.5px)/1.2 var(--font-term); letter-spacing: .16em; text-transform: uppercase; color: var(--c-hi); }
  & .cs-end-n { font: 700 22px/1.2 var(--font-term); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--c-ink) 35%, transparent); text-underline-offset: 4px; }
  & .cs-end-o { font-size: 13.5px; line-height: 1.45; max-width: 60ch; color: var(--c-mute); }
  & .cs-end-next:hover .cs-end-n { text-decoration-color: currentColor; }
  & .cs-end-next:hover .cs-disk { transform: translateY(-6px) rotate(0deg); }

  /* the identity colophon: Halden's note of the disk's own palette; unknowns muted */
  & .cs-colo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 16px clamp(18px, 6cqi, 84px) 0;
    padding: 14px 0 clamp(28px, 5cqi, 64px);
    border-top: 1px solid var(--c-rule);
    color: var(--c-ink);
    font: max(var(--fs-floor, 0px), 12.5px)/1.4 var(--font-term);
  }
  & .cs-colo div { display: flex; align-items: center; gap: 8px; min-width: 0; }
  & .cs-colo dt { color: var(--c-mute); text-transform: uppercase; letter-spacing: .1em; font-size: max(var(--fs-floor, 0px), 12px); }
  & .cs-colo dd { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; overflow-wrap: anywhere; }
  & .cs-colo-h dd { font-weight: 400; }
  & .cs-colo-tbd dd { color: var(--c-mute); font-weight: 400; }
  & .cs-sw { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 2px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
  /* ════════════ responsive ════════════ */
  @media (max-width: 1099px) {
    /* tablet: three disks to a plank, the h1 and all six disks in one screen */
    & .cs-dir-h { font-size: 26px; margin: 4px 0 6px; }
    & .cs-disks { row-gap: 56px; padding-bottom: 30px; }
    & .cs-slot { padding: 26px 6px 0; }
    & .cs-tag { gap: 6px; padding: 3px 6px 3px 7px; font-size: max(var(--fs-floor, 0px), 11px); }
    & .cs-tag .cs-stamp { font-size: max(var(--fs-floor, 0px), 10px); letter-spacing: .08em; padding: 3px 5px 2px; }
    & .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .cs-act { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    & .cs-act-pin { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: end; }
    & .cs-act-n { grid-row: 1 / span 2; font-size: 72px; }
    & .cs-toc { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; border-inline-start: 0; }
    & .cs-toc a { padding-inline-start: 0; }
    & .cs-toc a::before { display: none; }
    & .cs-flow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & .cs-flow li:nth-child(3n)::after { display: none; }
    & .cs-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 1240px) {
    & .cs-eject-sub { display: none; }   /* the bay keeps one row: the eject key's tail goes first, then the status line */
  }
  @media (max-width: 899px) {
    /* one column, the monitor first: the heading and directory on its glass, the PC and desk, then the shelf */
    & .cs-station { grid-template-columns: var(--cs-mw); grid-template-rows: var(--cs-mh) auto auto auto; }
    & .cs-shelf { grid-column: 1; grid-row: 4; margin-top: 64px; }
    & .cs-pc-desk { margin: 0 -20px; }
    & .cs-bay-st { display: none; }
    & .cs-hero { grid-template-columns: minmax(0, 1fr); }
    & .cs-ba { grid-template-columns: minmax(0, 1fr); }
    & .cs-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    & .cs-scr { padding: 12px 12px 6px; }
    & .cs-panes { grid-template-columns: minmax(0, 1fr); }
    & .cs-drive { grid-column: 1; grid-row: 1; border-right: 0; border-bottom: 1px solid var(--color-phosphor-faint); }
    & .cs-run { grid-column: 1; grid-row: 2; }
    & .cs-panes > .cs-splash { grid-column: 1; grid-row: 1; }
    & .cs-drive-hint { display: none; }
    & .cs-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & .cs-bar-r { display: none; }
    & .cs-steps { gap: 4px 12px; }
    & .cs-scene { height: auto; }
    & .cs-unit-badge { display: none; }
    & .cs-unit { margin: -4px -6px 0; padding: 0 14px; height: 54px; }
    & .cs-drive-bay { width: 100%; }
    & .cs-disks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .cs-brk-l { left: 22%; }
    & .cs-brk-r { right: 22%; }
    & .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .cs-items, & .cs-learn, & .cs-ch-pair, & .cs-prints { grid-template-columns: minmax(0, 1fr); }
    & .cs-prints > .cs-fig:nth-child(2), & .cs-prints-g > .cs-fig:nth-child(2n) { margin-top: 0; }
    & .cs-arch-l { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    & .cs-arch-l li:not(:last-child)::after { content: "↓"; inset-inline-end: auto; inset-inline-start: 24px; top: auto; bottom: -26px; translate: 0 0; }
    & .cs-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .cs-flow li:nth-child(3n)::after { display: block; }
    & .cs-flow li:nth-child(2n)::after { display: none; }
    & .cs-demos { grid-template-columns: minmax(0, 1fr); }
    & .cs-act-pin { grid-template-columns: minmax(0, 1fr); }
    & .cs-act-n { grid-row: auto; font-size: 60px; }
    & .cs-bay-in { gap: 12px; }
    & .cs-bay-drive { width: 96px; }
    & .cs-bay-stamp { display: none; }
    & .cs-end-disk { width: 92px; }
    & .cs-end-n { font-size: 18px; }
  }
  @media (max-width: 420px) {
    & .cs-wide { display: none; }
    & .cs-cap-q { font-size: max(var(--fs-floor, 0px), 12px); }
    & .cs-icon-n { font-size: max(var(--fs-floor, 0px), 12px); padding: 1px 2px; }
    & .cs-slot { padding: 26px 6px 0; }
    & .cs-disk-w { letter-spacing: .02em; }
    & .cs-facts { grid-template-columns: minmax(0, 1fr); }
    & .cs-poster-stats { grid-template-columns: minmax(0, 1fr); }
    & .cs-poster-stats div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; }
    & .cs-bay-drive { display: none; }
  }

  /* ════════════ motion (never under reduced motion; at rest everything shows) ════════════ */
  @media (prefers-reduced-motion: no-preference) {
    /* the abstract case: 01 discovery 0-25%, 02 strip down 25-50%, 03 design 50-75%, 04 deliver 75-100%.
       cases.js adds .cs-play while the monitor is in view, .cs-hold when paused or off screen. */
    & .cs-play .cs-frag { animation: cs-frag var(--cs-cyc) linear infinite both; animation-delay: var(--d, 0s); }
    & .cs-play .cs-reticle { animation: cs-ret var(--cs-cyc) ease-in-out infinite both; }
    & .cs-play .cs-core-sq { animation: cs-core var(--cs-cyc) var(--ease) infinite both; }
    & .cs-play .cs-core-ring { animation: cs-ring var(--cs-cyc) ease-out infinite both; }
    & .cs-play .cs-guides { animation: cs-guides var(--cs-cyc) linear infinite both; }
    & .cs-play .cs-l1 { animation: cs-build1 var(--cs-cyc) ease-out infinite both; }
    & .cs-play .cs-l2 { animation: cs-build2 var(--cs-cyc) ease-out infinite both; }
    & .cs-play .cs-links { animation: cs-links var(--cs-cyc) linear infinite both; }
    & .cs-play .cs-nodes circle { animation: cs-nodes var(--cs-cyc) var(--ease) infinite both; }
    & .cs-play .cs-ground { animation: cs-ground var(--cs-cyc) ease-in-out infinite both; }
    & .cs-play .cs-trace-box { animation: cs-tracevis var(--cs-cyc) linear infinite both; }
    & .cs-play .cs-trace { animation: cs-run 1.6s linear infinite; }
    & .cs-play .cs-cap { visibility: visible; animation: cs-cap var(--cs-cyc) linear infinite both; animation-delay: calc(var(--i) * var(--cs-cyc) / 4 - var(--cs-cyc)); }
    & .cs-play .cs-steps li::after { animation: cs-wash var(--cs-cyc) linear infinite both; animation-delay: calc(var(--i) * var(--cs-cyc) / 4 - var(--cs-cyc)); }
    & .cs-play .cs-st-bar { animation: cs-bar var(--cs-cyc) linear infinite both; animation-delay: calc(var(--i) * var(--cs-cyc) / 4 - var(--cs-cyc)); }
    & .cs-hold :is(.cs-frag, .cs-reticle, .cs-core-sq, .cs-core-ring, .cs-guides, .cs-l1, .cs-l2, .cs-links, .cs-nodes circle, .cs-ground, .cs-trace-box, .cs-trace, .cs-cap, .cs-st-bar),
    & .cs-hold .cs-steps li::after { animation-play-state: paused; }

    & .cs-drive-led.cs-busy { animation: cs-blink .12s steps(2) 4; }
    &.cs-arrive .cs-sealed { animation: cs-read .5s var(--ease) both; }
    &.cs-arrive .cs-bay .cs-drive-led { animation: cs-blink .16s steps(2) 5; }

    & .cs-v-frame-seq i { animation: cs-flick 1.2s steps(3) infinite; }
    & .cs-v-radial i { animation: cs-pop 2.4s var(--ease) infinite; }
    & .cs-v-radial i:nth-child(2) { animation-delay: .3s; }
    & .cs-v-radial i:nth-child(3) { animation-delay: .6s; }
    & .cs-v-scenes i { animation: cs-rise 2.4s var(--ease) infinite; }
    & .cs-v-scenes i:nth-child(2) { animation-delay: .4s; }
    & .cs-v-scenes i:nth-child(3) { animation-delay: .8s; }
    & .cs-v-morph i:first-child { animation: cs-morph 2.6s var(--ease) infinite alternate; }
    & .cs-v-pipeline i { animation: cs-slide 2.4s var(--ease) infinite; }
    & .cs-v-lenis i { animation: cs-glide 3s ease-in-out infinite alternate; }
    & .cs-v-lenis i:nth-child(2) { animation-delay: .25s; }
    & .cs-v-lenis i:nth-child(3) { animation-delay: .5s; }
  }
}

/* the abstract case (20s): 01 discovery 0-25%, 02 strip down 25-50%, 03 design 50-75%, 04 deliver 75-100% */
@keyframes cs-frag {
  0% { opacity: 0; transform: none; }
  3% { opacity: .9; transform: none; }
  13% { transform: translate(calc(var(--tx) * -.05), calc(var(--ty) * -.05)); }
  25% { opacity: .9; transform: none; }
  34%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); }
}
@keyframes cs-ret {
  0% { opacity: 0; transform: translate(-180px, -54px); }
  3% { opacity: 1; transform: translate(-180px, -54px); }
  9% { transform: translate(120px, -68px); }
  15% { transform: translate(190px, 86px); }
  21% { transform: translate(-130px, 98px); }
  26% { opacity: 1; transform: none; }
  31%, 100% { opacity: 0; transform: none; }
}
@keyframes cs-core {
  0%, 28% { opacity: 0; transform: scale(0); }
  34% { opacity: 1; transform: scale(1.3); }
  38% { transform: scale(1); }
  96% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes cs-ring {
  0%, 36% { opacity: 0; transform: scale(.6); }
  39% { opacity: .9; transform: scale(1); }
  45% { opacity: 0; transform: scale(1.7); }
  46% { opacity: 0; transform: scale(.6); }
  47% { opacity: .7; transform: scale(1); }
  50%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes cs-guides { 0%, 50% { opacity: 0; } 55%, 75% { opacity: 1; } 82%, 96% { opacity: .35; } 100% { opacity: 0; } }
@keyframes cs-build1 { 0%, 54% { opacity: 0; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(0); } 62%, 96% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cs-build2 { 0%, 60% { opacity: 0; transform: scaleX(0); } 61% { opacity: 1; transform: scaleX(0); } 69%, 96% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cs-links { 0%, 68% { opacity: 0; } 73%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cs-nodes { 0%, 62% { opacity: 0; transform: scale(0); } 66% { opacity: 1; transform: scale(1.4); } 69%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes cs-ground { 0%, 75% { opacity: 1; transform: scaleX(0); } 81%, 96% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cs-tracevis { 0%, 80% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cs-run { to { transform: translateX(-80px); } }
/* each caption holds its quarter, then gives way */
@keyframes cs-cap {
  0% { opacity: 0; transform: translateY(6px); }
  2%, 23.5% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes cs-wash { 0% { opacity: 0; } 1.5%, 24% { opacity: 1; } 25.5%, 100% { opacity: 0; } }
@keyframes cs-bar { 0% { transform: scaleX(0); } 24.5% { transform: scaleX(1); opacity: 1; } 25.5%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cs-blink { from { opacity: 1; } to { opacity: .2; } }
@keyframes cs-read { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes cs-flick { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .5; } }
@keyframes cs-pop { 0%, 100% { transform: scale(.5); } 40%, 60% { transform: scale(1); } }
@keyframes cs-rise { 0% { transform: scaleY(.2); } 40%, 70% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }
@keyframes cs-morph { from { transform: scale(1, 1); } to { transform: scale(2.4, .5); } }
@keyframes cs-slide { 0% { transform: translateX(0); } 50% { transform: translateX(40px); } 100% { transform: translateX(0); } }
@keyframes cs-glide { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* A case page is the room with the camera in: the view is the monitor, so the page itself never
   scrolls (the glass does). The room fills the view under the header; the floor and footer, below
   it, are left out. */
html:has([data-cases="case"]) { overflow: hidden; overscroll-behavior: none; }
html:has([data-cases="case"]) body.room { height: 100dvh; min-height: 0; }
html:has([data-cases="case"]) body.room > #main-content { flex: 1 1 0; min-height: 0; }
html:has([data-cases="case"]) :is(body.room > .floor, body.room > .foot) { display: none; }