/* The desk station · home (DESIGN.md 04; look: home-v7-3.html).
   The Cases, the Sandbox and the Codex as one scene: a clipboard of three
   pages beside ONE monitor (the Cases room's .crt on its PC), whose glass
   holds one channel per page. CH 1 is the Cases glass (its styles live in
   cases.css, under the same [data-cases] root); CH 2 and CH 3 are here.

   Two layouts:
     static  (default: no JS, or a view too short to pin) the clipboard holds
             all three pages one under another, the glass all three channels.
     pinned  (.dk-pinned, set by station.js) the stage is sticky over a
             scroll track; station.js writes one progress number, --p (0 -> 1
             down the track), and data-st (the chapter, 0..2). Pages fly off
             and channels change as calc() off --p. Under reduced motion the
             page and the channel just switch with the chapter.
   Motion: transforms and opacity only; everything at rest is readable. */

.dk {
  /* named sizes, each with its reason (AC P5) */
  --dk-hdr: calc(var(--hdr) + 1px);    /* the sticky header and its rule: the pin sits under it */
  --dk-ph: calc(100svh - var(--dk-hdr));   /* the pinned view; svh so mobile browser chrome never cuts it */
  --dk-air: 18px;                      /* wall between the header and the clip */
  --dk-desk-h: 40px;                   /* the desk top the objects stand on */
  --dk-clip-room: 24px;                /* the steel clip stands this far above the board */
  --dk-board-pad-t: 40px;              /* board above the paper: room for the clip's jaw */
  --dk-board-pad: 14px;                /* board round the paper on the other sides */
  --dk-gap: clamp(36px, 4vw, 72px);    /* clear air between the board and the bezel: nothing overlaps */
  --dk-bz: 20px;                       /* monitor bezel, sides */
  --dk-bz-t: 20px;                     /* monitor bezel, top */
  --dk-bz-b: 42px;                     /* monitor chin: badge, channel numbers, vent, power LED */
  --dk-unit-h: 62px;                   /* the PC the monitor stands on (cases.css .cs-unit) */
  --dk-ratio: 1.4;                     /* glass width / height: a CRT, wide enough for the 35:65 Cases panes */
  --dk-mon-share: .76;                 /* the monitor and PC stand this share of the board's height: the clipboard stays the tall object */
  --dk-board-min: 300px;               /* narrowest board: ~34ch of 14px mono on the paper */
  --dk-board-max: 540px;               /* widest board: past this the page's lines run too long to read */
  --dk-board-w: 36cqw;                 /* the board's share of the station's width, so the monitor keeps room */
  --dk-board-aspect: .62;              /* board width against its height: a clipboard, not a poster */
  --dk-track: 280svh;                  /* the scroll track: the pinned view plus about 0.6 of a view per chapter */
  --dk-lift: 14px;                     /* a page first lifts off the paper under it */
  --dk-toss: 24deg;                    /* ... then turns this far as it is tossed */
  --dk-fly-x: -118%;                   /* tossed up and to the left, away from the monitor */
  --dk-fly-y: -58%;
  --dk-fly-r: -1;
  --dk-w: .05;                         /* the channel change: squash and bloom each take this much of --p */
  --dk-page-gap: 30px;                 /* static: paper between two pages on the board */
  /* paper goods not yet in @theme (DESIGN.md colors) */
  --dk-clipboard: #7a5230;
  --dk-ink-faint: #6f6c5c;             /* page header, 4.6:1 on paper */
  --dk-stamp-amber: #906300;           /* "under construction", 4.61:1 on paper */
  --dk-steel: linear-gradient(#e6e8e4, #9ea39f 60%, #6f7470);
  position: relative;
  z-index: 3;
  margin-top: 130px;
  container: dk / inline-size;
}
.dk-tape { left: 0; top: -40px; --t: -2.5deg; }
.dk-mark { display: none; }
.dk-hint, .dk-dots { display: none; }

/* ════════════ the clipboard ════════════ */
.dk-board {
  position: relative;
  padding: var(--dk-board-pad-t) var(--dk-board-pad) 22px;
  background: linear-gradient(160deg, #9b6c3e, var(--dk-clipboard) 55%, #5e3e22);
  border-radius: 10px;
  box-shadow: var(--sh);
}
.dk-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 20% 10%, rgba(255, 220, 170, .18), transparent 60%);
}
.dk-clip {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 14;
  width: 124px;
  height: 50px;
  margin-left: -62px;
  background: var(--dk-steel);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 3px 6px 8px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
  pointer-events: none;
}
.dk-clip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 40px;
  height: 22px;
  margin-left: -20px;
  border: 5px solid #9ea39f;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.dk-clip::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
}
.dk-pages { position: relative; display: flex; flex-direction: column; gap: var(--dk-page-gap); }

/* a page: lined paper with a red margin rule, body text on the 24px rules */
.dk-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 12px 30px;
  color: var(--color-ink);
  font: 14px/24px var(--font-term);
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(191, 53, 39, .38) 18px 19px, transparent 19px),
    repeating-linear-gradient(transparent 0 23px, rgba(31, 76, 156, .1) 23px 24px) 0 54px,
    var(--color-paper);
  box-shadow: 3px 5px 8px rgba(40, 20, 5, .35);
  transform: rotate(var(--r, 0deg));
  scroll-margin-top: calc(var(--dk-hdr) + 20px);
}
/* the page's lift shadow, grown as it leaves the clip (opacity only) */
.dk-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 18px 30px 34px rgba(40, 20, 5, .5);
  opacity: 0;
  pointer-events: none;
}
.dk-hd {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 700 max(var(--fs-floor, 0px), 11px)/30px var(--font-term);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dk-ink-faint);
}
.dk-key {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 .35em;
  font: inherit;
  line-height: 1.5;
  text-align: center;
  color: var(--color-ink);
  border: 1.5px solid currentColor;
  border-bottom-width: 3px;
  border-radius: 3px;
  letter-spacing: 0;
}
.dk-title { font: 700 34px/1.1 var(--font-term); margin: 2px 0 2px; }
.dk-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(29, 35, 32, .28);
}
.dk-title a:hover { color: var(--color-pen-blue); text-decoration-color: currentColor; }
.dk-sub {
  color: var(--color-ink-soft);
  font: 700 max(var(--fs-floor, 0px), 12px)/24px var(--font-term);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dk-lede { max-width: 62ch; }
.dk-nw { white-space: nowrap; }
.dk-note { color: var(--color-ink); }

/* p. 1: the cases, each one tap to its case, with its own status stamp */
.dk-cases { list-style: none; display: grid; margin: 4px 0 0; }
.dk-case {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto;
  column-gap: 1.2ch;
  align-items: center;
  min-height: var(--touch);
  padding: 0 6px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(29, 35, 32, .2);
}
.dk-cases li:last-child .dk-case { border-bottom: 0; }
.dk-case:hover { background: rgba(31, 76, 156, .07); }
.dk-case-n { color: var(--dk-ink-faint); font-size: max(var(--fs-floor, 0px), 12px); }
.dk-case b { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(31, 76, 156, .45); text-underline-offset: 3px; }
.dk-case:hover b { color: var(--color-pen-blue); }
[data-cases] .dk-case-s { font-size: max(var(--fs-floor, 0px), 10px); letter-spacing: .12em; padding: 4px 5px 3px; transform: rotate(-3deg); }

.dk-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 6px;
}
.dk-go {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-inline-start: auto;
  color: var(--color-pen-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* stamps (DESIGN.md Stamps): uppercase label type in a border, rotated */
.dk-stamp {
  display: inline-block;
  font: 700 max(var(--fs-floor, 0px), 12.5px)/1 var(--font-term);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-stamp-red);
  border: 3px solid currentColor;
  border-radius: 3px;
  padding: 6px 9px 5px;
  background: rgba(244, 239, 226, .6);
  transform: rotate(-4deg);
  flex: 0 1 auto;
  text-align: center;
  line-height: 1.25;
}
.dk-stamp-sandbox { color: var(--dk-stamp-amber); }

/* ════════════ the monitor: the Cases room's .crt on its PC ════════════ */
.dk-mon { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dk-halo { inset: -18% -14%; }
.dk-crt { padding: var(--dk-bz-t) var(--dk-bz) var(--dk-bz-b); }
.dk-glass { padding: 0; display: flex; flex-direction: column; }
.dk-unit { margin: -4px -12px 0; }
/* the channel numbers on the chin; the current one is lit while pinned */
.dk-chs {
  position: absolute;
  left: 50%;
  bottom: 13px;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
  font: 700 max(var(--fs-floor, 0px), 10px)/1 var(--font-term);
  letter-spacing: .1em;
  color: rgba(0, 0, 0, .5);
}
.dk-chs span { border: 1px solid rgba(0, 0, 0, .28); padding: 2px 5px; border-radius: 2px; }

/* every channel's top line: the section, the channel number and its path */
[data-cases] .dk-ch .cs-bar-r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dk-osd { color: var(--color-phosphor-hi); font-weight: 700; letter-spacing: .12em; }

/* CH 2 and CH 3: an abstract picture in phosphor, with captions */
.dk-viz { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dk-art { display: block; width: 100%; height: 200px; overflow: visible; filter: drop-shadow(0 0 3px rgba(150, 255, 120, .55)); }
.dk-art * { transform-box: fill-box; }
.dk-ln { fill: none; stroke: var(--color-phosphor-hi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dk-dim { stroke: var(--color-phosphor-dim); stroke-width: 1.4; }
.dk-faint { stroke: var(--color-phosphor-faint); stroke-width: 1; }
.dk-dash { stroke-dasharray: 3 4; }
.dk-noise { opacity: .2; stroke-width: 1.2; }
.dk-dot { fill: var(--color-phosphor-hi); transform-origin: center; }
.dk-glyph { fill: var(--color-phosphor-hi); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.dk-turn { opacity: 0; transform-origin: left center; }
.dk-cap {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  font: 700 max(var(--fs-floor, 0px), 12px)/1.35 var(--font-term);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-phosphor-dim);
}
.dk-cap b { font-weight: 700; color: var(--color-phosphor); }
.dk-cap-2 span:last-child { text-align: end; }
.dk-cap .tbd { letter-spacing: .04em; }
.dk-ls { font-size: 13px; }
.dk-snow { display: none; }

/* ════════════ STATIC: the stack (no JS, a short view) ════════════ */
.dk-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--dk-gap);
  align-items: start;
}
.dk:not(.dk-pinned) .dk-glass { gap: 0; }
.dk:not(.dk-pinned) .dk-ch + .dk-ch { border-top: 2px dashed var(--color-phosphor-faint); }
.dk:not(.dk-pinned) .dk-desk {
  display: block;
  height: 24px;
  margin: 26px calc(-1 * clamp(0px, 2vw, 32px)) 0;
  background: linear-gradient(180deg, var(--color-wood-hi) 0%, var(--color-wood) 55%, #3f2b1b 100%);
  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);
}
@media (max-width: 899.98px) {
  .dk-stage { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .dk-mon { grid-row: 1; }
}

/* ════════════ PINNED: one still life on a desk, under the header ════════════ */
.dk-pinned {
  /* the clipboard: as tall as the view allows, its width a share of that height and of the station */
  --dk-oh: calc(var(--dk-ph) - var(--dk-air) - var(--dk-desk-h));
  --dk-ch: calc(var(--dk-oh) - var(--dk-clip-room));
  --dk-cw: clamp(var(--dk-board-min), min(calc(var(--dk-oh) * var(--dk-board-aspect)), var(--dk-board-w)), var(--dk-board-max));
  /* the monitor: its glass as tall as its share allows, as wide as the row leaves room for */
  --dk-gh-want: calc(var(--dk-oh) * var(--dk-mon-share) - var(--dk-bz-t) - var(--dk-bz-b) - var(--dk-unit-h));
  --dk-gw: min(calc(var(--dk-gh-want) * var(--dk-ratio)), calc(100cqw - var(--dk-cw) - var(--dk-gap) - 2 * var(--dk-bz)));
  --dk-gh: calc(var(--dk-gw) / var(--dk-ratio));
  --dk-mw: calc(var(--dk-gw) + 2 * var(--dk-bz));
  margin-top: 110px;
}
.dk-pinned .dk-track { position: relative; height: var(--dk-track); }
.dk-pinned .dk-mark {
  display: block;
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  top: calc(var(--m) * (100% - var(--dk-ph)));
  scroll-margin-top: var(--dk-hdr);
  pointer-events: none;
}
.dk-pinned .dk-pin { position: sticky; top: var(--dk-hdr); height: var(--dk-ph); }
.dk-pinned .dk-stage {
  position: absolute;
  inset: var(--dk-air) 0 var(--dk-desk-h);
  grid-template-columns: var(--dk-cw) var(--dk-mw);
  grid-template-rows: minmax(0, 1fr);
  justify-content: center;
  align-items: end;
}
.dk-pinned .dk-board { grid-column: 1; grid-row: 1; height: var(--dk-ch); padding-bottom: var(--dk-board-pad); z-index: 6; }
.dk-pinned .dk-pages { height: 100%; }
.dk-pinned .dk-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container: dkpage / size;
}
.dk-pinned .dk-page:nth-child(1) { z-index: 3; }
.dk-pinned .dk-page:nth-child(2) { z-index: 2; }
.dk-pinned .dk-page:nth-child(3) { z-index: 1; }
.dk-pinned .dk-page.dk-gone { pointer-events: none; }
.dk-pinned .dk-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 8px;
  transform: translateY(50%);
}
.dk-dots i { width: 34px; height: 8px; border-radius: 4px; background: #3a2716; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.dk-pinned[data-st="0"] .dk-dots i:nth-child(1),
.dk-pinned[data-st="1"] .dk-dots i:nth-child(2),
.dk-pinned[data-st="2"] .dk-dots i:nth-child(3) { background: var(--color-amber); box-shadow: 0 0 8px rgba(255, 191, 63, .7); }
.dk-pinned[data-st="0"] .dk-chs span:nth-child(1),
.dk-pinned[data-st="1"] .dk-chs span:nth-child(2),
.dk-pinned[data-st="2"] .dk-chs span:nth-child(3) { background: rgba(0, 0, 0, .6); color: var(--color-plastic); }

.dk-pinned .dk-mon { grid-column: 2; grid-row: 1; width: var(--dk-mw); z-index: 4; }
.dk-pinned .dk-glass { flex: none; height: var(--dk-gh); container: dkglass / size; }
.dk-pinned .dk-ch { position: absolute; inset: 0; }
.dk-pinned .dk-ch:not(.dk-live) { pointer-events: none; }
.dk-pinned .dk-ch:not(.dk-live) * { animation-play-state: paused !important; }

/* the hint: a sticky note stuck to the top of the monitor, on the plastic, never on the glass */
.dk-pinned .dk-hint {
  display: block;
  bottom: calc(100% - var(--dk-bz-t) + 6px);
  right: 9%;
  --r: 4deg;
  transition: opacity var(--fast) var(--ease);
}
.dk-pinned[data-st="2"] .dk-hint { opacity: 0; }

/* the desk the station stands on, out through the wall's side padding */
.dk-pinned .dk-desk {
  display: block;
  position: absolute;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  bottom: 0;
  height: var(--dk-desk-h);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 3%, transparent 97%, rgba(0, 0, 0, .45)),
    radial-gradient(ellipse 36% 140% at 34% 0%, rgba(255, 222, 160, .22), transparent 80%),
    linear-gradient(#9a714a 0 2px, var(--color-wood-hi) 2px 34%, var(--color-wood) 34% 70%, #2c1e12);
  box-shadow: 0 -1px 0 rgba(255, 230, 190, .08), 0 14px 26px rgba(0, 0, 0, .6);
}
.dk-pinned .dk-desk::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent);
}

/* CH 1 in a fixed glass: the panes take what the bar and prompt leave; the scene flexes */
.dk.dk-pinned .dk-ch.cs-scr { padding: 12px 16px 4px; gap: 8px; }
.dk.dk-pinned .cs-panes { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.dk.dk-pinned .cs-drive, .dk.dk-pinned .cs-run { min-height: 0; }
.dk.dk-pinned .cs-scene { flex: 1 1 0; min-height: 0; height: auto; }
.dk.dk-pinned .dk-viz { flex: 1 1 0; }
.dk.dk-pinned .dk-art { flex: 1 1 0; min-height: 0; height: auto; }

/* Pinned pages and glass have a fixed size, so they shed extras as they get short, never clip.
   (Selectors carry .dk.dk-pinned to outrank cases.css's [data-cases] rules.) */
@container dkpage (max-height: 620px) {
  .dk.dk-pinned .dk-page-cases .dk-more { display: none; }
}
@container dkpage ((max-height: 400px) and (max-width: 559px)) or (max-height: 300px) {
  .dk.dk-pinned .dk-more { display: none; }
}
@container dkpage ((max-height: 470px) and (max-width: 559px)) or (max-height: 330px) {
  .dk.dk-pinned .dk-cases { display: none; }
}
/* a wide, short page (a portrait tablet): the cases in two columns */
@container dkpage (min-width: 560px) and (max-height: 620px) {
  .dk.dk-pinned .dk-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .dk.dk-pinned .dk-cases li:nth-last-child(2) .dk-case { border-bottom: 0; }
}
@container dkpage (max-height: 400px) {
  .dk.dk-pinned .dk-page { gap: 2px; }
  .dk.dk-pinned .dk-hd { line-height: 20px; }
  .dk.dk-pinned .dk-end { padding-top: 0; }
}
/* tall pinned pages: the station's reading size (DESIGN.md body-sm, 14.5px+ on the pinned station) */
@container dkpage (min-height: 620px) and (min-width: 420px) {
  .dk.dk-pinned .dk-page { font-size: 15px; line-height: 26px; }
  .dk.dk-pinned .dk-case { min-height: 48px; }
}

/* CH 1 in a glass under ~560px tall: smaller disks, and the drive's hint goes */
@container dkglass (max-height: 560px) {
  .dk.dk-pinned .cs-drive-hint { display: none; }
  .dk.dk-pinned .cs-icon { padding: 5px 2px 4px; gap: 3px; }
  .dk.dk-pinned .cs-fd { width: 38px; }
  .dk.dk-pinned .cs-icon-n { font-size: max(var(--fs-floor, 0px), 12px); }
  .dk.dk-pinned .cs-pane-h { min-height: 22px; margin-bottom: 4px; }
}
/* a short glass: the prompt (the page carries the same link) and the headings' questions go first */
@container dkglass (max-height: 470px) {
  .dk.dk-pinned :is(.cs-prompt, .cs-cap-q, .dk-ls) { display: none; }
}
@container dkglass (max-height: 400px) {
  .dk.dk-pinned .cs-steps li { padding: 5px 0 2px; }
  .dk.dk-pinned .cs-st-t { font-size: max(var(--fs-floor, 0px), 12px); }
}
/* a narrow glass (portrait phones): the panes stack, the drive's label goes, smaller disks; the step
   strip keeps its numbers (the caption names the step; the labels stay for screen readers) */
@container dkglass (max-width: 440px) {
  .dk.dk-pinned .cs-panes { grid-template-rows: auto minmax(0, 1fr); }
  .dk.dk-pinned .cs-drive .cs-pane-h { display: none; }
  .dk.dk-pinned .cs-drive { padding-top: 6px; padding-bottom: 6px; }
  .dk.dk-pinned .cs-icon { min-height: 0; padding: 3px 2px; }
  .dk.dk-pinned .cs-fd { width: 30px; }
  .dk.dk-pinned .cs-icon-n { font-size: max(var(--fs-floor, 0px), 11.5px); line-height: 1.2; }
  .dk.dk-pinned .cs-run { padding-top: 6px; padding-bottom: 6px; }
  .dk.dk-pinned .cs-run .cs-pane-h { min-height: 24px; margin-bottom: 2px; }
  .dk.dk-pinned .cs-pause { min-height: 24px; }
  .dk.dk-pinned .cs-cap-h { font-size: 17px; }
  .dk.dk-pinned .cs-st-t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dk.dk-pinned .cs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
  .dk.dk-pinned .cs-steps li { padding: 4px 0 0; }
  .dk.dk-pinned .cs-bar-h { font-size: 20px; }
}
/* a phone's short glass: the top line goes (the chin numbers the channel, the page names it) */
@container dkglass (max-width: 440px) and (max-height: 420px) {
  .dk.dk-pinned .dk-ch .cs-bar { display: none; }
}

/* ── portrait (< 900 wide): the monitor on top, the clipboard below, one view ── */
@media (max-width: 899.98px) {
  .dk-pinned {
    --dk-air: 8px;
    --dk-desk-h: 8px;
    --dk-gh: clamp(250px, calc(var(--dk-ph) * .5), 470px);
    --dk-fly-x: -72%;
    --dk-fly-y: -104%;
    margin-top: 96px;
  }
  .dk-pinned .dk-stage { display: flex; flex-direction: column; align-items: stretch; gap: calc(8px + var(--dk-clip-room)); }
  .dk-pinned .dk-mon { order: -1; width: 100%; flex: none; }
  .dk-pinned .dk-unit { display: none; }
  .dk-pinned .dk-board { flex: 1 1 0; min-height: 0; height: auto; --dk-board-pad-t: 28px; padding: var(--dk-board-pad-t) 10px 10px; }
  .dk-pinned .dk-clip { transform: scale(.8); top: -14px; }
  .dk-pinned .dk-hint { display: none; }
  .dk-pinned .dk-page { padding: 8px 14px 8px 26px; }
  .dk-title { font-size: 30px; }
}
@media (max-width: 760px) {
  .dk { --dk-bz: 10px; --dk-bz-t: 10px; --dk-bz-b: 26px; }
  .dk-tape { top: -38px; }
  .dk-title { font-size: 24px; }
  .dk-page { padding: 12px 14px 10px 26px; font-size: 13px; line-height: 22px; }
  .dk-hd { font-size: max(var(--fs-floor, 0px), 10px); letter-spacing: .14em; }
  .dk-sub { font-size: max(var(--fs-floor, 0px), 11px); line-height: 20px; }
  .dk-chs { bottom: 5px; font-size: max(var(--fs-floor, 0px), 8.5px); gap: 3px; }
  .dk-chs span { padding: 1px 4px; }
  .dk-stamp { font-size: max(var(--fs-floor, 0px), 10px); letter-spacing: .1em; padding: 4px 6px 3px; border-width: 2px; max-width: 24ch; }
  .dk-cap { font-size: max(var(--fs-floor, 0px), 10.5px); }
}

/* ════════════ motion (pinned, motion allowed): all off --p ════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* the page: lifts off the one under it, then is tossed up and away, fading at the end */
  .dk-pinned .dk-page {
    --t: clamp(0, (var(--p, 0) - var(--f)) / var(--fl), 1);
    --e: min(calc(var(--t) * 3), 1);
    --tt: calc(var(--t) * var(--t));
    transform-origin: 50% 0;
    transform:
      translate(calc(var(--tt) * var(--dk-fly-x)), calc(var(--e) * -1 * var(--dk-lift) + var(--tt) * var(--dk-fly-y)))
      rotate(calc(var(--r, 0deg) + var(--tt) * var(--dk-toss) * var(--dk-fly-r)))
      scale(calc(1 + var(--e) * .04));
    opacity: clamp(0, (1 - var(--t)) * 5, 1);
  }
  .dk-pinned .dk-page::after { opacity: var(--e); }
  /* the channel: the outgoing screen squashes to a line through snow, the incoming blooms out of one */
  .dk-pinned .dk-ch {
    --in: clamp(0, (var(--p, 0) - var(--a)) / var(--dk-w), 1);
    --out: clamp(0, (var(--p, 0) - var(--b) + var(--dk-w)) / var(--dk-w), 1);
    --live: min(var(--in), calc(1 - var(--out)));
    opacity: calc(clamp(0, (var(--p, 0) - var(--a)) * 500, 1) * clamp(0, (var(--b) - var(--p, 0)) * 500, 1));
    transform: scale(calc(.9 + .1 * var(--live)), calc(.015 + .985 * var(--live)));
  }
  .dk-pinned .dk-ch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: calc((1 - var(--live)) * .9);
    mix-blend-mode: screen;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 1  0 0 0 0 .7  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  /* CH 2 and CH 3 play once each time they come on: the noise settles into the figure; a page turns */
  .dk-live .dk-noise { animation: dk-settle 2.6s ease-out .2s backwards; }
  .dk-live .dk-fig { animation: dk-resolve 1.4s var(--ease) 1s backwards; }
  .dk-live .dk-dot { animation: dk-resolve .5s var(--ease) 2.2s backwards; }
  .dk-live .dk-turn { animation: dk-turn 1.3s cubic-bezier(.45, .05, .4, 1) .5s 1; }
}
/* reduced motion, pinned: no flight and no squash; the page and the channel switch with the chapter */
@media (prefers-reduced-motion: reduce) {
  .dk-pinned .dk-page.dk-gone { opacity: 0; }
  .dk-pinned .dk-ch:not(.dk-live) { opacity: 0; }
}
@keyframes dk-settle { from { opacity: 1; } }
@keyframes dk-resolve { from { opacity: 0; transform: scale(.9); } }
@keyframes dk-turn { 0% { opacity: 1; transform: scaleX(1); } 85% { opacity: .9; } 100% { opacity: 0; transform: scaleX(-1); } }

/* ═══════════════ CH 3 and the Codex clipboard page (fragments/codex/counter: channel, page) ═══════════════
   The Codex bake-off r1 merge (p6 + grafts). Scoped to the real surfaces (:not([data-codex-lab])), so
   the bake-off slots (/?codex=pN) keep their own. */

/* CH 3: the thick book at its own proportions (the accepted outline, never stretched), the board's quote
   written on its right page; a long one sits beside the book on a wide glass, or is copied out under it
   on a narrow one (its right page then ruled): never clamped */
.dk-ch-cdx:not([data-codex-lab]) {
  & .cx-ch {
    --bh: min(46cqh, calc(100cqh - 290px));     /* the book's height: what the glass leaves after the rows */
    --cx-book: 1.7313;                          /* the outline's width / height (its 232 x 134 viewBox) */
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    container: cxch / inline-size;
  }
  & .cx-ch-book {
    --bw: min(100%, calc(max(var(--bh), 80px) * var(--cx-book)));
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "l ." "l cmd" "l q" "l by" "l .";
    width: var(--bw);
    aspect-ratio: 232 / 134;
    flex: none;
    margin: 2px auto 4px;
    /* the pages' area inside the outline (padding in % of the width) */
    padding: 5% 4% 11% 3.5%;
  }
  & .cx-ch-plate { position: absolute; inset: 0; }
  & .cx-ch-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(150, 255, 120, .5)); }
  & .cx-ln { fill: none; stroke: var(--color-phosphor); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  & .cx-ln-dim { stroke: var(--color-phosphor-dim); }
  & .cx-ln-faint { stroke: var(--color-phosphor-faint); }
  /* the left page: the section sign */
  & .cx-ch-pl { position: absolute; inset: 9% 50% 19% 3.5%; display: flex; align-items: center; justify-content: center; }
  & .cx-ch-sect { font: 400 max(var(--fs-floor, 0px), min(20cqh, 11cqi))/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: var(--color-phosphor); text-shadow: 0 0 6px rgba(150, 255, 120, .45); }
  /* the right page ruled, when the quote is not written on it */
  & .cx-ch-ruled { position: absolute; inset: 24% 9% 34% 56%; display: none; flex-direction: column; justify-content: space-between; }
  & .cx-ch-ruled i { display: block; border-top: 1px dashed var(--color-phosphor-dim); }
  & .cx-ch-ruled i:last-child { width: 70%; }
  /* the quote on the right page */
  & :is(.cx-ch-qcmd, .cx-ch-bq, .cx-ch-by) { position: relative; min-width: 0; margin: 0; padding-inline: 9% 6%; text-align: start; }
  & .cx-ch-qcmd { grid-area: cmd; font-size: max(var(--fs-floor, 0px), 11px); }
  & .cx-ch-bq { grid-area: q; }
  & .cx-ch-by { grid-area: by; font: max(var(--fs-floor, 0px), 11.5px)/1.3 var(--font-term); color: var(--color-phosphor-dim); }
  & .cx-ch-bq p { margin: 0; font: 400 max(var(--fs-floor, 0px), clamp(11px, 2.8cqi, 15px))/1.35 var(--font-term); color: var(--color-phosphor-hi); overflow-wrap: anywhere; }
  & .cx-qm .cx-ch-bq p { font-size: max(var(--fs-floor, 0px), clamp(10.5px, 2.2cqi, 13px)); }
  & .cx-ch-q-tbd .cx-ch-bq p { display: inline-block; padding: 2px .5em; border: 1px dashed var(--color-phosphor-dim); }
  /* a long quote on a wide glass: beside the book */
  & :is(.cx-ql, .cx-qxl).cx-ch-book {
    --pw: min(44%, calc(max(var(--bh), 80px) * var(--cx-book)));
    grid-template-columns: var(--pw) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "p ." "p cmd" "p q" "p by" "p .";
    column-gap: 18px;
    width: 100%;
    aspect-ratio: auto;
    padding: 0;
  }
  & :is(.cx-ql, .cx-qxl) .cx-ch-plate { position: relative; grid-area: p; align-self: center; width: 100%; aspect-ratio: 232 / 134; }
  & :is(.cx-ql, .cx-qxl) .cx-ch-ruled { display: flex; }
  & :is(.cx-ql, .cx-qxl) :is(.cx-ch-qcmd, .cx-ch-bq, .cx-ch-by) { padding-inline: 0; }
  & .cx-ql .cx-ch-bq p { font-size: max(var(--fs-floor, 0px), clamp(11.5px, 2.4cqi, 14px)); }
  & .cx-qxl .cx-ch-bq p { font-size: max(var(--fs-floor, 0px), 11.5px); line-height: 1.3; }
  & .cx-ch-cmd { font: max(var(--fs-floor, 0px), 12px)/1.4 var(--font-term); color: var(--color-phosphor-dim); margin: 0; }
  & .cx-ch-ls { list-style: none; margin: 0; padding: 0; display: grid; }
  & .cx-ch-row {
    display: grid;
    grid-template-columns: 11ch 3ch minmax(0, 1fr) auto;
    gap: 1.2ch;
    align-items: center;
    min-height: var(--touch);
    font: 13px/1.3 var(--font-term);
    color: var(--color-phosphor);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-phosphor-faint);
  }
  & .cx-ch-k { color: var(--color-phosphor-dim); }
  & .cx-ch-n { color: var(--color-phosphor-hi); font-weight: 700; }
  & .cx-ch-t { min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }
  & .cx-ch-tbd { padding: 0 .4em; border: 1px dashed var(--color-phosphor-dim); color: var(--color-phosphor-hi); }
  & a.cx-ch-row .cx-ch-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-phosphor-dim); }
  & a.cx-ch-row:hover .cx-ch-t { color: var(--color-phosphor-hi); }
  & .cx-ch-prompt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; min-height: var(--touch); font-size: 13px; }
  & .cx-ch-prompt .ph-dim { white-space: nowrap; }
  & .cx-ch-cd { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-phosphor); }
  /* a narrow glass: a medium or long quote is copied out under the book, whose right page is ruled */
  @container cxch (max-width: 559.98px) {
    & :is(.cx-qm, .cx-ql, .cx-qxl).cx-ch-book {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto auto;
      grid-template-areas: "p" "cmd" "q" "by";
      row-gap: 4px;
      width: 100%;
      aspect-ratio: auto;
      padding: 0;
    }
    & :is(.cx-qm, .cx-ql, .cx-qxl) .cx-ch-plate { position: relative; grid-area: p; justify-self: center; width: min(100%, calc(max(var(--bh), 70px) * var(--cx-book))); aspect-ratio: 232 / 134; }
    & :is(.cx-qm, .cx-ql, .cx-qxl) .cx-ch-ruled { display: flex; }
    & :is(.cx-qm, .cx-ql, .cx-qxl) :is(.cx-ch-bq, .cx-ch-by) { padding-inline: 10px 0; border-inline-start: 2px solid var(--color-phosphor-faint); }
    & :is(.cx-qm, .cx-ql, .cx-qxl) .cx-ch-qcmd { display: none; }
    & .cx-qm .cx-ch-bq p { font-size: 13px; }
  }
  /* a very narrow glass (a phone at 200% zoom): the directory and its count, the title under them */
  @container cxch (max-width: 299.98px) {
    & .cx-ch-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8ch; padding: 4px 0; }
    & .cx-ch-t { grid-column: 1 / -1; }
    & .cx-ch-go { display: none; }
  }
  /* the pinned glass is a fixed screen: it sheds before it would clip */
  @container dkglass (max-height: 430px) {
    & :is(.cx-ch-prompt, .cx-ch-ls-h) { display: none; }
    & .cx-ch { --bh: min(46cqh, calc(100cqh - 222px)); }
  }
  @container dkglass (max-height: 400px) {
    & .cx-ch-qcmd { display: none; }
    & :is(.cx-ql, .cx-qxl) .cx-ch-by { display: none; }
  }
  @container dkglass (max-width: 440px) {
    & .cx-ch-row { grid-template-columns: 10ch 3ch minmax(0, 1fr) auto; gap: .8ch; font-size: max(var(--fs-floor, 0px), 12px); }
    & .cx-ch-by { display: none; }
  }
}

/* the Codex clipboard page: the board's quote on a chalk slate taped to the page */
.dk-page-codex:not([data-codex-lab]) {
  & .cx-pg-t { display: inline-flex; align-items: center; min-height: var(--touch); }
  & .cx-pg-q {
    position: relative;
    margin: 10px 4px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px 8px;
    color: var(--color-paper);
    text-align: start;
    background: #202720;                         /* the board's slate (codex.css --cx-slate) */
    border: 4px solid var(--color-wood);
    border-radius: 3px;
    box-shadow: 2px 4px 6px rgba(40, 20, 5, .35);
    transform: rotate(-.8deg);
  }
  & .cx-pg-tape {
    position: absolute;
    top: -11px;
    left: calc(50% - 30px);
    width: 60px;
    height: 18px;
    background: rgba(232, 220, 178, .9);
    clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 0, 98% 90%, 100% 100%, 3% 94%, 0 100%);
    transform: rotate(3deg);
  }
  & .cx-pg-q blockquote { margin: 0; }
  & .cx-pg-q blockquote p { margin: 0; font: 400 18px/23px var(--font-marker); color: var(--color-paper); overflow-wrap: anywhere; }
  & .cx-pg-q.cx-qm blockquote p { font-size: 16px; line-height: 20px; }
  & .cx-pg-q:is(.cx-ql, .cx-qxl) blockquote p { font-size: 14px; line-height: 18px; }
  & .cx-pg-q-tbd blockquote p { display: inline-block; padding: 0 .4em; border: 1.5px dashed rgba(244, 239, 226, .55); }
  & .cx-pg-q figcaption { font: max(var(--fs-floor, 0px), 11.5px)/20px var(--font-term); color: #c9c6b9; }
  & .cx-pg-inv { list-style: none; margin: 2px 0 0; padding: 0; display: grid; }
  & .cx-pg-row {
    display: grid;
    grid-template-columns: 13.5ch 3ch minmax(0, 1fr);
    column-gap: 1.2ch;
    align-items: center;
    min-height: var(--touch);
    padding: 0 6px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(29, 35, 32, .2);
  }
  & .cx-pg-inv li:last-child .cx-pg-row { border-bottom: 0; }
  & .cx-pg-k { color: var(--color-ink-soft); font-size: max(var(--fs-floor, 0px), 12px); letter-spacing: .06em; }
  & .cx-pg-n { font-weight: 700; }
  & .cx-pg-tt { min-width: 0; overflow-wrap: anywhere; line-height: 20px; padding: 2px 0; }
  & a.cx-pg-row .cx-pg-tt { text-decoration: underline; text-decoration-color: rgba(31, 76, 156, .45); text-underline-offset: 3px; }
  & a.cx-pg-row:hover { background: rgba(31, 76, 156, .07); }
  & a.cx-pg-row:hover .cx-pg-tt { color: var(--color-pen-blue); }
  & .cx-pg-body { display: grid; gap: 2px; }
  /* a wide page (a tablet's clipboard): the counter's rows beside the slate */
  @container dkpage (min-width: 540px) {
    & .cx-pg-body { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: 22px; align-items: start; }
    & .cx-pg-q { order: 2; }
  }
  /* a pinned page has a fixed height: it sheds, top to bottom, never clipping the way in */
  @container dkpage (max-height: 600px) {
    & .dk-more { display: none; }
  }
  @container dkpage ((max-height: 500px) and (max-width: 539px)) or (max-height: 380px) {
    & .cx-pg-q figcaption { display: none; }
    & .cx-pg-q:is(.cx-ql, .cx-qxl) { display: none; }
  }
  @container dkpage ((max-height: 440px) and (max-width: 539px)) or (max-height: 300px) {
    & .cx-pg-q { display: none; }
  }
  @container dkpage ((max-height: 380px) and (max-width: 539px)) or (max-height: 330px) {
    & .cx-pg-lede { display: none; }
  }
  @container dkpage (max-height: 300px) {
    & .dk-sub { display: none; }
  }
  /* a phone's short page: the way in moves up beside the title (the rows keep their 44px) */
  @container dkpage (max-height: 270px) {
    & .dk-end { position: absolute; top: 30px; inset-inline-end: 12px; padding: 0; }
    & .dk-stamp-codex { display: none; }
    & .dk-title { margin-block: 0; }
    & .cx-pg-inv { margin-top: 0; }
  }
  @container dkpage (max-width: 380px) {
    & .cx-pg-row { grid-template-columns: 12ch 2.6ch minmax(0, 1fr); column-gap: .8ch; font-size: max(var(--fs-floor, 0px), 12.5px); }
    & .cx-pg-k { font-size: max(var(--fs-floor, 0px), 11.5px); letter-spacing: .02em; }
  }
  /* a very narrow page (200% zoom on a phone): the object and its count, the title under them */
  @media (max-width: 300px) {
    & .cx-pg-row { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 4px; }
    & .cx-pg-tt { grid-column: 1 / -1; }
  }
}