/* ── Defaults (the studio overrides these live on <html>) ── */
  :root {
    --spot-accent: #ff6a2b;
    --spot-mark-size: 26px;
    --spot-aside-width: 15rem;
    --spot-aside-gap: 2.5rem;
    --spot-aside-size: 0.95rem;
    --spot-aside-opacity: 0.5;
    --spot-plate-radius: 0px;  /* square: every picture is a sheet of paper, not a card */
    --spot-plate-ratio: 1.5;
    --spot-plate-bleed: 0px;

    /* the fog: a smoked sheet over the whole page */
    --veil-tint: #0c0c0c73;
    --veil-blur: 7px;
    --veil-bright: 0.72;
    --veil-contrast: 0.78;
    --veil-sat: 0.5;

    /* the slip: vellum laid on top */
    --slip-tint: #ffffffe0;   /* nearly white, a little see-through so the frost behind shows */
    --slip-blur: 7px;         /* the frost: what lies behind the paper goes soft */
    --slip-bright: 1.35;
    --slip-contrast: 0.55;
    --slip-sat: 0.3;
    --slip-sepia: 0;
    --slip-ink: #1c1c1c;
    --slip-grain: 0.08;
    --slip-fibre: 0.08;
    --slip-width: 34rem;
    --slip-aside-size: 3.625rem; /* the thought on a main slip */
    --slip-aside-leading: 0.862; /* its line height: 50px at 58px */
    --slip-tilt: 7;           /* degrees, the most any slip leans either way */
    --slip-scatter: 60px;     /* how far a slip lands off-centre */
    --fold-amount: 1;         /* how deep the folds go; 0 = flat sheets */
    --unfold-ms: 650;         /* how long a sheet takes to unfold */
    --flap-opacity: 0.4;      /* how solid the folded-over paper is: thin, so the page shows through */
    --slip-feather: 0px;      /* crisp paper edges: no feather for now */
    --slip-depth: 4;          /* slips kept in the pile */
    --chapter-scale: 0.84;    /* a chapter sheet, against its page */
    /* chapter papers: saturated booklet colours printed on vellum (after
       The Next Wave), each chapter its own. Ink flips light / dark by itself.
       The studio's Palette panel can rename, add, remove and reorder them. */
    --chapter-count: 6;
    --chapter-color1: #c6f03a;    /* acid lime */
    --chapter-color2: #ff3fb0;    /* magenta */
    --chapter-color3: #3d63ff;    /* ultramarine */
    --chapter-color4: #8b5cff;    /* violet */
    --chapter-color5: #39d0f5;    /* cyan */
    --chapter-color6: #ff4a5e;    /* hot red */
    --chapter-alpha: 0.82;        /* how much colour the vellum holds */
    --verso-opacity: 0.16;        /* a chapter's title on the back of its sheet */
    --verso-blur: 0px;
    --duotone-depth: 62%;         /* how dark a chapter picture's shadows go */
    --chapter-reach: 70px;    /* how far a chapter lands toward the hotspot that opened it */
    --chapter-spread: 11rem;  /* desktop: page steps left, chapter right, by this much each */
    --slip-step: 18px;        /* how far each older slip sits behind */
    --slip-under: 0.55;       /* ink of the slips underneath */
    --ink-blur: 0px;          /* the thought's text; above 0 it never quite comes into focus */
    --headline-blur: 0px;     /* the main headline, scaled to its size */
    --plate-radius: 0px;      /* images on the paper are square-cornered, like prints */
    --plate-feather: 12px;    /* how far in their edges fade */
    --blur-scale: 1;          /* phones: type and plates are smaller, so their blurs shrink with them */
    --plate-haze: 8px;        /* the faint blurred halo behind them */

    /* the mystery */
    --back-ink: #f0f0f0;      /* the mirrored print and the bar, on the fog */
    --back-opacity: 0.07;
    --back-blur: 0px;
    --surface-ms: 900;        /* lines surfacing from blur; 0 = off */
    --sheet-ms: 520;
  }
  /* the overlays are always the dark theme's. Over a light essay the fog only
     has to go darker, so it lands where the dark one does */
  :root[data-theme="light"] { --veil-bright: 0.12; --veil-contrast: 0.9; }
  /* Safari reads no variables in -webkit-backdrop-filter, so the light values are spelled out */
  :root[data-theme="light"] .sheaf__veil { -webkit-backdrop-filter: blur(7px) brightness(0.12) contrast(0.9) saturate(0.5); }
  /* and the page itself goes dark under every overlay on this essay (the sheets,
     the enlarged picture; the look path does its own), so the edges and a phone's
     browser bar match. Not while the sheets are lifted to look through at the essay. */
  :root[data-theme="light"].sheaf-open:not(.sheaf-lifted), :root[data-theme="light"].sheaf-open:not(.sheaf-lifted) body,
  :root[data-theme="light"]:has(.lightbox.is-open), :root[data-theme="light"]:has(.lightbox.is-open) body { background-color: #0c0c0c; }
  /* the browser's own bars pick their colour from color-scheme (see Base.astro),
     so it turns dark too while any overlay is open, the look path's included */
  :root[data-theme="light"]:is(.sheaf-open:not(.sheaf-lifted), .look-open, :has(.lightbox.is-open)) { color-scheme: dark; }
  :root[data-theme="light"], :root[data-theme="light"] body { transition: background-color 0.6s var(--ease); }
  /* the nav keeps no background of its own under the fog, so it never shows as a
     lighter (or, in light mode, white) strip above the darkened page */
  :root.sheaf-open:not(.sheaf-lifted) .topbar { background: transparent; }

  /* ── The plate in the essay ── */
  .spot--plate { position: relative; margin: 2.4rem calc(var(--spot-plate-bleed) * -1); }
  /* two plates side by side (`::spot a b`): same shop, two smiths. Each note sits
     under its own picture, like a caption, so the two don't crowd the margin */
  .spot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin: 2.4rem calc(var(--spot-plate-bleed) * -1); }
  .spot-pair .spot--plate { margin: 0; }
  /* side by side, the pair breaks out of the text column on both sides, centred on it */
  @media (min-width: 700px) {
    .spot-pair { --pair-w: min(62rem, calc(100vw - 4rem)); width: var(--pair-w); margin: 3.2rem calc((100% - var(--pair-w)) / 2); gap: 1.5rem; }
  }
  /* with the contents list on the left (fixed, wider screens), the pair keeps clear
     of it: centred where there's room, otherwise starting past the list and
     reaching further right */
  @media (min-width: 1101px) {
    .spot-pair {
      --toc-clear: calc(clamp(1.25rem, 3vw, 2.25rem) + 14rem);
      --pair-w: min(62rem, calc(100vw - 2rem - var(--toc-clear)));
      margin-left: calc(max((100vw - var(--pair-w)) / 2, var(--toc-clear)) - (100vw - 100%) / 2);
      margin-right: 0;
    }
  }
  @media (max-width: 699px) { .spot-pair { grid-template-columns: 1fr; gap: 2rem; } }
  @media (max-width: 1099px) { .spot--plate { margin-inline: 0; } }
  .spot__plate {
    position: relative; display: block; width: 100%;
    padding: 0; border: 0; background: none; color: inherit; font: inherit;
    cursor: pointer; border-radius: var(--spot-plate-radius);
  }
  /* a plate's dream picture (see dream.py) is already blurred and textured;
     it only wants square corners, a sheet of paper and not a rounded card */
  .spot__paper { display: block; position: relative; }
  /* a folded plate (see the script): the picture clipped along its crease, the paper's back over it */
  .spot__plate[data-plate-fold] { --flap-tone: #ece7dd; }
  .spot__plate.has-fold .spot__paper { clip-path: var(--front-fold); }
  .spot__plate:not(.has-fold) .slip__flap { display: none; }
  .spot__plate .slip__flap-face { pointer-events: none; cursor: inherit; }
  .spot__plate[data-plate-dream] { --spot-plate-radius: 0px; border-radius: 0; }
  .spot__plate:focus-visible { outline: 2px solid var(--spot-color, var(--spot-accent)); outline-offset: 3px; }

  .spot-plate {
    display: block; width: 100%;
    aspect-ratio: var(--spot-plate-ratio);
    object-fit: cover;
    border-radius: var(--spot-plate-radius);
  }

  /* posters on the page (plate 09): the four prints as loose sheets, a little tilted,
     each lying over the one before it the way the sheets lie in the stories. The
     plate breaks out of the text column, wider than the pair above it; its line
     sits under it, like the pair's. Hovering pulls the sheets apart a touch. */
  @media (min-width: 700px) {
    .spot--wide { --wide-w: min(76rem, calc(100vw - 4rem)); width: var(--wide-w); margin: 3.6rem calc((100% - var(--wide-w)) / 2); }
  }
  @media (min-width: 1101px) {
    .spot--wide {
      --toc-clear: calc(clamp(1.25rem, 3vw, 2.25rem) + 14rem);
      --wide-w: min(76rem, calc(100vw - 2rem - var(--toc-clear)));
      margin-left: calc(max((100vw - var(--wide-w)) / 2, var(--toc-clear)) - (100vw - 100%) / 2);
      margin-right: 0;
    }
  }
  .spot-posters { position: relative; display: block; width: 100%; aspect-ratio: 1.6; }
  .spot-posters__sheet {
    position: absolute; left: var(--x); top: var(--y); width: 29%; aspect-ratio: 2 / 3;
    transform: rotate(var(--r));
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.14), 0 8px 18px rgb(0 0 0 / 0.16), 0 26px 48px -14px rgb(0 0 0 / 0.34);
    transition: transform 450ms var(--ease);
  }
  /* until the plate comes into view the sheets lie a little apart; then they settle,
     one after another, so a reader on a phone sees four sheets, not one picture */
  .spot--wide:not(.is-seen) .spot-posters__sheet { transform: translate(calc((var(--i) - 1.5) * 4%), 1.5%) rotate(calc(var(--r) * 1.5)); }
  .spot--wide.is-seen .spot-posters__sheet { animation: poster-settle 700ms var(--ease) calc(var(--i) * 70ms) backwards; }
  @keyframes poster-settle { from { transform: translate(calc((var(--i) - 1.5) * 4%), 1.5%) rotate(calc(var(--r) * 1.5)); } }
  .spot-posters__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  @media (hover: hover) and (pointer: fine) {
    .spot__plate:hover .spot-posters__sheet {
      transition-delay: calc(var(--i) * 25ms);  /* hover-in only: letting go puts them back together at once */
      transform: translate(calc((var(--i) - 1.5) * 2.4%), calc((var(--i) - 1.5) * -0.8%)) rotate(calc(var(--r) * 0.6));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .spot-posters__sheet { transition: none; animation: none !important; }
    .spot--wide:not(.is-seen) .spot-posters__sheet { transform: rotate(var(--r)); }
  }

  /* Placeholder until a plate has its image: a blade blank that goes from a
     cold grey smudge (forge 0) through hot (0.5) to sharp, cooled steel (1). */
  /* the placeholder until a plate has its picture: a grey box with an X from
     corner to corner, the plain sign for "an image goes here" */
  .spot-plate--ph {
    position: relative; overflow: hidden;
    background: color-mix(in oklab, var(--fg) 7%, var(--bg));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 16%, transparent);
  }
  .spot-plate__x { position: absolute; inset: 0; width: 100%; height: 100%; }
  .spot-plate__x path { fill: none; stroke: color-mix(in oklab, var(--fg) 18%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .spot-plate__label {
    position: absolute; left: 14px; bottom: 12px;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.01em;
    color: var(--fg-dim);
  }
  /* on a sheet of paper the placeholder is printed: light grey, a grey X, no glow */
  .slip .spot-plate--ph { background: #e2e2e0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16); }
  .slip .spot-plate__x path { stroke: rgb(0 0 0 / 0.22); }
  .slip .spot-plate__label { color: rgb(0 0 0 / 0.5); }
  .slip__plate:has(.spot-plate--ph) .slip__plate-haze { display: none; }

  /* ── The mark on a plate ── */
  /* the mark rides a rail the height of the picture: it stays in view below the
     top bar while the picture scrolls past, and stops at the picture's bottom */
  .spot__mark-rail { position: absolute; top: 12px; left: 12px; bottom: 12px; pointer-events: none; }
  :root[data-spot-mark="dot"] .spot__mark-rail { top: 16px; left: 16px; bottom: 16px; }
  .spot__mark {
    position: sticky; top: var(--spot-stick, 4.5rem);
    display: grid; place-items: center;
    min-width: var(--spot-mark-size); height: var(--spot-mark-size); padding: 0 0.45em;
    border-radius: 999px;
    background: var(--spot-color, var(--spot-accent)); color: oklch(from var(--spot-color, var(--spot-accent)) clamp(0.16, calc((0.72 - l) * 999), 0.97) 0.02 h);
    font: 500 calc(var(--spot-mark-size) * 0.44) / 1 var(--font-mono);
    transition: transform 0.25s var(--ease);
  }
  .spot.is-current .spot__mark { transform: scale(1.12); }
  /* hover only with a real pointer: a tap would leave the mark stuck large */
  @media (hover: hover) and (pointer: fine) { .spot__plate:hover .spot__mark { transform: scale(1.12); } }
  .spot__mark { width: max-content; }
  :root[data-spot-mark="dot"] .spot__mark { min-width: 0; width: calc(var(--spot-mark-size) * 0.42); height: calc(var(--spot-mark-size) * 0.42); padding: 0; }
  :root[data-spot-mark="dot"] .spot__mark span { display: none; }
  :root[data-spot-mark="ring"] .spot__mark { background: transparent; color: var(--spot-color, var(--spot-accent)); box-shadow: inset 0 0 0 1.5px var(--spot-color, var(--spot-accent)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  /* a slow pulse so a first-time reader knows it's alive */
  :root:not([data-spot-pulse="off"]) .spot__mark::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 1.5px var(--spot-color, var(--spot-accent));
    opacity: 0;
  }
  /* a first-time cue: three pulses once the plate is in view, then it rests */
  :root.fonts-ready:not([data-spot-pulse="off"]) .spot.is-seen .spot__mark::after { animation: spot-pulse 2.6s var(--ease) 3; }
  @keyframes spot-pulse { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
  /* reduced motion: no ring growing outward, just a soft glow twice */
  @keyframes spot-pulse-soft { 0%, 100% { opacity: 0; } 50% { opacity: 0.6; } }
  @media (prefers-reduced-motion: reduce) {
    :root.fonts-ready:not([data-spot-pulse="off"]) .spot.is-seen :is(.spot__mark, .spot__sup)::after { animation: spot-pulse-soft 1.6s var(--ease) 2; }
  }

  /* ── The aside: the monologue line in the margin ── */
  .spot__aside {
    display: flex; gap: 0.6em; align-items: baseline;
    padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
    color: var(--fg);
    font-family: var(--font-serif); font-style: italic; font-weight: 300;
    font-size: var(--spot-aside-size); line-height: 1.4;
    opacity: var(--spot-aside-opacity);
    transition: opacity 0.35s var(--ease);
  }
  :root[data-spot-font="sans"] .spot__aside { font-family: var(--font-text); font-style: normal; font-weight: 400; }
  :root[data-spot-font="mono"] .spot__aside { font-family: var(--font-mono); font-style: normal; font-weight: 400; font-size: calc(var(--spot-aside-size) * 0.86); }
  .spot__aside-n { flex: none; font: 500 0.72em / 1 var(--font-mono); font-style: normal; color: var(--spot-color, var(--spot-accent)); }
  /* on white, the bright inks (lime above all) wash out: the numbers go deeper, the notes a little firmer */
  :root[data-theme="light"] { --spot-aside-opacity: 0.66; }
  :root[data-theme="light"] .spot__aside-n { color: oklch(from var(--spot-color, var(--spot-accent)) min(l, 0.52) c h); }
  .spot.is-near .spot__aside, .spot.is-current .spot__aside, .spot:hover .spot__aside, .spot__aside:focus-visible { opacity: 1; }
  .spot__aside:focus-visible { outline: 2px solid var(--spot-color, var(--spot-accent)); outline-offset: 4px; border-radius: 4px; }
  :root[data-spot-aside="off"] .spot--plate .spot__aside { display: none; }
  .spot__aside-rail { display: contents; }
  :root[data-spot-aside="off"] .spot--note .spot__aside-text { display: none; }

  /* inline (narrow screens, or chosen): under the plate / under the paragraph */
  .spot--plate .spot__aside { margin-top: 0.8rem; }
  .spot--note { margin: -0.5em 0 1.4em; }

  /* margin: trails the column on the right, top-aligned with its spot */
  @media (min-width: 1100px) {
    :root:not([data-spot-aside="inline"]) .spot--plate .spot__aside,
    :root:not([data-spot-aside="inline"]) .spot--note .spot__aside {
      position: absolute; margin: 0;
      left: calc(100% + var(--spot-aside-gap));
      width: min(var(--spot-aside-width), calc((100vw - 36rem) / 2 - var(--spot-aside-gap) - 2rem));
    }
    /* a plate's line rides down beside the picture too, and stops at its bottom */
    :root:not([data-spot-aside="inline"]) .spot--plate .spot__aside-rail {
      display: block; position: absolute; top: 0; bottom: 0;
      left: calc(100% + var(--spot-aside-gap));
      width: min(var(--spot-aside-width), calc((100vw - 36rem) / 2 - var(--spot-aside-gap) - 2rem));
    }
    :root:not([data-spot-aside="inline"]) .spot--plate .spot__aside { position: sticky; top: var(--spot-stick, 4.5rem); left: auto; width: auto; }
    :root:not([data-spot-aside="inline"]) :is(.spot-pair, .spot--wide) .spot__aside-rail { display: contents; }
    :root:not([data-spot-aside="inline"]) :is(.spot-pair .spot--plate, .spot--wide) .spot__aside { position: static; width: auto; margin-top: 0.8rem; }
    /* a note sits on the last line of the paragraph above it */
    /* lifted by `top`, not a negative margin: a margin would cancel the gap
       to whatever follows (a paragraph butted up, a heading crowded) */
    :root:not([data-spot-aside="inline"]) .spot--note { position: relative; height: 0; margin: 0; top: -1.4em; }
    :root:not([data-spot-aside="inline"]) .spot--note .spot__aside { bottom: 0; }
  }

  /* ── The title's spot: a numbered mark beside the title, its line in the margin ── */
  .article__title.has-spot { position: relative; }
  .spot--title { display: inline; }
  .spot__sup {
    position: relative; top: -1.5em; margin-left: 0.3em;
    display: inline-grid; place-items: center;
    min-width: 2.3em; height: 1.75em; padding: 0 0.5em;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--spot-color, var(--spot-accent)); color: oklch(from var(--spot-color, var(--spot-accent)) clamp(0.16, calc((0.72 - l) * 999), 0.97) 0.02 h);
    font: 500 max(0.24em, 0.68rem) / 1 var(--font-mono); letter-spacing: 0;
    vertical-align: baseline;
    transition: transform 0.25s var(--ease);
  }
  @media (hover: hover) and (pointer: fine) { .spot__sup:hover { transform: scale(1.1); } }
  .spot--title.is-current .spot__sup { transform: scale(1.1); }
  /* pressed: the pill, the chapter tabs and the bar's buttons give a little under the finger */
  :is(.spot__sup, .slip__chip, .sheaf__nav button:not(:disabled)):active { transform: scale(0.97); }
  @media (prefers-reduced-motion: reduce) { :is(.spot__sup, .slip__chip, .sheaf__nav button:not(:disabled)):active { transform: scale(0.985); } }
  /* a finger-sized target around the small pill */
  @media (hover: none) { .spot__sup::before { content: ""; position: absolute; inset: -12px -10px; } }
  .spot__sup:focus-visible { outline: 2px solid var(--spot-color, var(--spot-accent)); outline-offset: 3px; }
  :root[data-spot-mark="dot"] .spot__sup { min-width: 0; width: 0.55rem; height: 0.55rem; padding: 0; top: -1.6em; }
  :root[data-spot-mark="dot"] .spot__sup span { display: none; }
  :root[data-spot-mark="ring"] .spot__sup { background: transparent; color: var(--spot-color, var(--spot-accent)); box-shadow: inset 0 0 0 1.5px var(--spot-color, var(--spot-accent)); }
  :root:not([data-spot-pulse="off"]) .spot__sup::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 1.5px var(--spot-color, var(--spot-accent));
    opacity: 0;
  }
  :root.fonts-ready:not([data-spot-pulse="off"]) .spot.is-seen .spot__sup::after { animation: spot-pulse 2.6s var(--ease) 3; }
  /* its aside lives in the margin on wide screens only; narrower, the mark is enough */
  .spot--title .spot__aside { display: none; letter-spacing: normal; }
  @media (min-width: 1100px) {
    :root:not([data-spot-aside="inline"]):not([data-spot-aside="off"]) .spot--title .spot__aside {
      display: flex; position: absolute; top: 0.6rem;
      left: calc(100% + var(--spot-aside-gap));
      width: min(var(--spot-aside-width), calc((100vw - 36rem) / 2 - var(--spot-aside-gap) - 2rem));
    }
  }

  /* ── The sheaf: every layer a sibling, so each blur sees the essay ── */
  .sheaf {
    position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden;
    /* stays visible until the layers have faded out */
    transition: visibility 0s linear calc(var(--sheet-ms) * 1ms);
  }
  :root.sheaf-open .sheaf { visibility: visible; transition-delay: 0s; }
  /* waiting on a sheet's pictures: the fog and a small word, nothing else */
  :root.sheaf-waiting .sheaf { visibility: visible; transition-delay: 0s; }
  :root.sheaf-waiting .sheaf__veil { opacity: 1; }
  .sheaf__loading {
    position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%);
    font: 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--back-ink) 72%, transparent);
    opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
  }
  .sheaf.is-loading .sheaf__loading { opacity: 1; animation: sheaf-breathe 1.6s var(--ease) infinite alternate; }
  @keyframes sheaf-breathe { to { color: color-mix(in srgb, var(--back-ink) 40%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .sheaf.is-loading .sheaf__loading { animation: none; } }
  /* the essay stays put under the sheets: no scrolling it by dragging the fog or a sheet */
  :root.sheaf-open, :root.sheaf-open body { overflow: hidden; overscroll-behavior: none; }
  .sheaf__veil, .sheaf__bar { touch-action: none; }

  /* the fog */
  .sheaf__veil {
    position: absolute; inset: 0;
    background: var(--veil-tint);
    -webkit-backdrop-filter: blur(7px) brightness(0.72) contrast(0.78) saturate(0.5);
    backdrop-filter: blur(var(--veil-blur)) brightness(var(--veil-bright)) contrast(var(--veil-contrast)) saturate(var(--veil-sat));
    opacity: 0;
    transition: opacity calc(var(--sheet-ms) * 1ms) var(--ease);
  }
  /* no texture laid over the stories: the paper and the frost read clean (Oct 18) */
  :root.sheaf-open .sheaf__veil { opacity: 1; pointer-events: auto; }
  :root.sheaf-open.sheaf-lifted .sheaf__veil { opacity: 0.18; }

  /* printed on the back of the sheet, seen reversed through it */
  /* the stage name printed huge and mirrored on the fog behind the pile: off for now */
  .sheaf__back { display: none !important; }
  .sheaf__back {
    position: absolute; inset: 0; place-items: center; overflow: hidden;
    font-family: var(--font-serif); font-style: italic; font-weight: 300;
    font-size: clamp(7rem, 26vw, 22rem); line-height: 0.85; letter-spacing: -0.03em;
    color: var(--back-ink); white-space: nowrap;
    transform: scaleX(-1);
    filter: blur(calc(var(--back-blur) * var(--blur-scale)));
    opacity: 0;
    transition: opacity calc(var(--sheet-ms) * 1.6ms) var(--ease);
  }
  :root.sheaf-open .sheaf__back { opacity: var(--back-opacity); }
  /* an overlay is always dark: the page's light/dark (browser bar, scrollbars, controls) follows it while open */
  :root:is(.sheaf-open, .look-open) { color-scheme: dark; }
  :root.sheaf-open.sheaf-lifted .sheaf__back { opacity: 0; }

  /* ── The slips ── */
  .sheaf__slips { position: absolute; inset: 0; }
  /* the board behind the pile: string from pin to pin, under the paper, as on the look path */
  .sheaf__thread { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }  /* under every sheet */
  .sheaf__string { stroke-width: 1.15; stroke-linecap: round; opacity: 0.9; }
  /* the pin: part of the sheet, flat, in the sheet's colour on the board */
  .slip__pin {
    position: absolute; left: 50%; top: 16px; z-index: 4; pointer-events: none;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: var(--pin, var(--spot-accent));
  }
  .slip {
    --depth: 0;
    position: absolute; left: 50%; top: 50%;
    width: min(var(--slip-width), calc(100vw - 32px));
    transform:
      translate(-50%, -50%)
      translate(var(--drag-x, 0px), var(--drag-y, 0px))
      translate(calc(var(--lie-x) * var(--slip-scatter) - var(--depth) * var(--slip-step)), calc(var(--lie-y) * var(--slip-scatter) - var(--depth) * var(--slip-step)))
      translate(calc(var(--hx, 0) * var(--chapter-reach)), calc(var(--hy, 0) * var(--chapter-reach)))
      translate(calc(var(--side, 0) * var(--chapter-spread)), 0)
      rotate(calc(var(--lie-rot) * var(--slip-tilt) * var(--tilt-scale, 1) * 1deg));
    transition: transform calc(var(--sheet-ms) * 1ms) var(--ease);
  }
  /* side by side with some overlap, where there is room for it */
  @media (min-width: 1000px) {
    .slip.is-chapter { --side: 1; }
    .slip.is-spread { --side: -1; }
  }
  .slip.is-chapter { width: calc(min(var(--slip-width), calc(100vw - 32px)) * var(--chapter-scale)); }
  /* a chapter is coloured paper: its colour replaces the vellum's tint, and its
     ink goes light on the deep colours and dark on the light ones (by lightness) */
  .slip.is-chapter {
    --slip-ink: oklch(from var(--chapter-color, #ccc) clamp(0.18, calc((0.72 - l) * 999), 0.97) 0.02 h);
  }
  .slip.is-chapter .slip__sheet { background: color-mix(in srgb, var(--chapter-color, #ccc) calc(var(--chapter-alpha) * 100%), transparent); }
  .slip.is-chapter .slip__sheet { container-type: inline-size; }

  /* its title, printed big on the back of the sheet and read through it, reversed */
  .slip__verso {
    position: absolute; inset: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0.5rem;
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: clamp(2.6rem, 19cqi, 8rem); line-height: 0.86; letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--slip-ink);
    opacity: var(--verso-opacity);
    filter: blur(calc(var(--verso-blur) * var(--blur-scale)));
    transform: scaleX(-1);
  }
  /* layered like the printed sheet: picture, then the title from the back, then the words */
  .slip.is-chapter .slip__ink > :not(.slip__verso) { position: relative; z-index: 3; }
  .slip.is-chapter .slip__ink > .slip__plate { z-index: 1; }
  .slip.is-chapter .slip__verso { z-index: 2; }
  /* the title seen through from the back of the sheet: left out, the sheets read cleaner without it */
  .slip__verso { display: none; }

  /* its picture in its colour: grey tones mapped from a deep shade of the
     colour (shadows) to the colour itself (highlights) */
  /* crisp edges, no feather: a faded edge left a light halo between picture and colour */
  .slip.is-chapter .slip__plate { isolation: isolate; --plate-feather: 0px; }
  .slip.is-chapter .slip__plate-core { filter: grayscale(1) contrast(1.4) brightness(1.12); }
  /* no glow behind the picture here: it spilled past the colour as a white blur, so it sits flat */
  .slip.is-chapter .slip__plate-haze { display: none; }
  .slip.is-chapter .slip__plate::before, .slip.is-chapter .slip__plate::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: var(--plate-radius);
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent),
      linear-gradient(to bottom, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent),
      linear-gradient(to bottom, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent);
    mask-composite: intersect;
  }
  .slip.is-chapter .slip__plate::before { background: var(--chapter-color); mix-blend-mode: multiply; }
  .slip.is-chapter .slip__plate::after { background: color-mix(in srgb, var(--chapter-color), #000 var(--duotone-depth)); mix-blend-mode: lighten; }
  .slip.is-dragging, .slip.is-coasting { transition: none; }
  .slip.is-dragging .slip__sheet, .slip.is-dragging .slip__flap-face { cursor: grabbing; }

  /* folds: the front clipped along the crease, the flap (the paper's back) over it */
  .slip.has-fold .slip__sheet { clip-path: var(--front-fold); }
  .slip__flap {
    position: absolute; inset: 0; pointer-events: none;
    transition: opacity calc(var(--sheet-ms) * 1ms) var(--ease);
  }
  /* the shadow the fold casts: its own layer, blurred, under the face */
  .slip__flap-shadow {
    position: absolute; left: var(--flap-l); top: var(--flap-t); width: var(--flap-w); height: var(--flap-h);
    filter: blur(5px); opacity: calc(0.25 + var(--flap-opacity) * 0.5);
  }
  .slip__flap-shadow > span {
    position: absolute; inset: 0; transform: translate(0, 3px);
    background: rgb(0 0 0 / 0.32);
    clip-path: var(--flap-fold);
    transition: clip-path calc(var(--unfold-ms) * 1ms) var(--ease);
  }
  .slip.is-unfolded .slip__flap-shadow > span, .slip:has(:focus-visible) .slip__flap-shadow > span, .slip.is-dragging .slip__flap-shadow > span { clip-path: var(--flap-flat); }
  .slip:not(.has-fold) .slip__flap { display: none; }
  /* the fold is vellum too: translucent, blurring and softening the page it lies on */
  .slip__flap-face {
    position: absolute; left: var(--flap-l); top: var(--flap-t); width: var(--flap-w); height: var(--flap-h);
    pointer-events: auto; cursor: grab; touch-action: none;
    clip-path: var(--flap-fold);
    --tone-a: calc(var(--flap-opacity) * 100%);
    background: linear-gradient(var(--flap-angle, 0deg),
      color-mix(in srgb, color-mix(in srgb, var(--flap-tone), #000 16%) var(--tone-a), transparent) var(--flap-from, 0%),
      color-mix(in srgb, var(--flap-tone) var(--tone-a), transparent) calc((var(--flap-from, 0%) + var(--flap-to, 100%)) / 2),
      color-mix(in srgb, color-mix(in srgb, var(--flap-tone), #fff 32%) var(--tone-a), transparent) var(--flap-to, 100%));
    /* frosted: the page under the fold shows through, soft and pale */
    -webkit-backdrop-filter: blur(12px) brightness(1.12) contrast(0.6) saturate(0.5);
    backdrop-filter: blur(12px) brightness(1.12) contrast(0.6) saturate(0.5);
    transition: clip-path calc(var(--unfold-ms) * 1ms) var(--ease);
  }
  .slip__flap-face::after {
    content: ""; position: absolute; inset: 0;
    background: url("/textures/paper-fibre.png") 0 0 / 384px, url("/textures/paper-grain.png") 0 0 / 128px;
    opacity: 0.35;
  }
  .slip { --flap-tone: #efefef; }
  .slip.is-chapter { --flap-tone: color-mix(in srgb, var(--chapter-color), #fff 18%); }
  /* the crease left in opened paper: a soft valley along the fold, not a drawn
     line. Across it: a faint shadow settling into the middle, the ridge catching
     a thin light on one side, both falling away over a few pixels. Along it:
     uneven, the way paper creases (stronger here, weaker there), and soft at both
     ends where the fold ran out to the paper's edge. Plain alpha only: no blend
     modes inside the paper (it would cut off its frost). */
  .slip__crease {
    position: absolute; left: var(--crease-x); top: var(--crease-y); width: var(--crease-len); height: 16px;
    transform-origin: 0 50%; transform: translateY(-8px) rotate(var(--crease-rot));
    background: linear-gradient(to bottom,
      rgb(0 0 0 / 0) 18%,
      rgb(0 0 0 / 0.035) 36%,
      rgb(0 0 0 / 0.11) 47%,
      rgb(0 0 0 / 0.05) 50%,
      rgb(255 255 255 / 0.42) 53%,
      rgb(255 255 255 / 0.12) 62%,
      rgb(255 255 255 / 0) 78%);
    -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.9) 9%, rgb(0 0 0 / 0.55) 22%, #000 38%, rgb(0 0 0 / 0.75) 57%, #000 74%, rgb(0 0 0 / 0.6) 88%, transparent);
    mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.9) 9%, rgb(0 0 0 / 0.55) 22%, #000 38%, rgb(0 0 0 / 0.75) 57%, #000 74%, rgb(0 0 0 / 0.6) 88%, transparent);
    opacity: 0; pointer-events: none;
    transition: opacity calc(var(--unfold-ms) * 1ms) var(--ease);
  }
  .slip:not(.has-fold) .slip__crease { display: none; }
  /* unfolded: on hover (desktop), on tap (phones), while focused or dragged */
  .slip.has-fold.is-unfolded .slip__sheet, .slip.has-fold:has(:focus-visible) .slip__sheet, .slip.has-fold.is-dragging .slip__sheet { clip-path: var(--front-flat); }
  .slip.is-unfolded .slip__flap-face, .slip:has(:focus-visible) .slip__flap-face, .slip.is-dragging .slip__flap-face { clip-path: var(--flap-flat); }
  .slip.is-unfolded .slip__crease, .slip:has(:focus-visible) .slip__crease, .slip.is-dragging .slip__crease { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .slip.has-fold:hover .slip__sheet { clip-path: var(--front-flat); }
    .slip:hover .slip__flap-face, .slip:hover .slip__flap-shadow > span { clip-path: var(--flap-flat); }
    .slip:hover .slip__crease { opacity: 1; }
  }
  .slip.is-arriving .slip__flap, .slip.is-leaving .slip__flap { opacity: 0; }
  :root.sheaf-lifted .slip__flap { opacity: 0.1; }

  .slip.is-arriving { transform: translate(-50%, -46%) rotate(calc(var(--lie-rot) * var(--slip-tilt) * var(--tilt-scale, 1) * 2deg)); }
  .slip.is-leaving { transform: translate(-50%, -56%) rotate(calc(var(--lie-rot) * var(--slip-tilt) * var(--tilt-scale, 1) * -1deg)); }

  .slip__sheet {
    position: relative; display: block;
    max-height: min(78vh, 46rem);
    overflow: hidden;
    pointer-events: auto;
    color: var(--slip-ink);
    background: var(--slip-tint);
    -webkit-backdrop-filter: blur(7px) brightness(1.35) contrast(0.55) saturate(0.3) sepia(0);
    backdrop-filter: blur(var(--slip-blur)) brightness(var(--slip-bright)) contrast(var(--slip-contrast)) saturate(var(--slip-sat)) sepia(var(--slip-sepia));
    /* no hard edge: the paper feathers out on all four sides */
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 var(--slip-feather), #000 calc(100% - var(--slip-feather)), transparent),
      linear-gradient(to bottom, transparent, #000 var(--slip-feather), #000 calc(100% - var(--slip-feather)), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 var(--slip-feather), #000 calc(100% - var(--slip-feather)), transparent),
      linear-gradient(to bottom, transparent, #000 var(--slip-feather), #000 calc(100% - var(--slip-feather)), transparent);
    mask-composite: intersect;
    opacity: 1;
    cursor: grab; touch-action: none;
    transition: opacity calc(var(--sheet-ms) * 1ms) var(--ease), clip-path calc(var(--unfold-ms) * 1ms) var(--ease);
    outline: none;
  }
  .slip__sheet::before { opacity: calc(var(--slip-fibre) * 4); }
  .slip__sheet::after { opacity: calc(var(--slip-grain) * 4); }
  .slip.is-arriving .slip__sheet, .slip.is-leaving .slip__sheet { opacity: 0; }
  :root.sheaf-lifted .slip__sheet { opacity: 0.1; }

  .slip__ink {
    position: relative;
    max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.6rem 1.8rem 2rem;
    /* no blur on the text: even a 0px blur filter makes type go soft while a sheet moves */
    transition: opacity calc(var(--sheet-ms) * 1ms) var(--ease);
  }
  .slip:not(.is-top) .slip__ink { opacity: var(--slip-under); }

  /* lines fade up on the slip just laid (no blur for now) */
  .slip.is-top .slip__ink > :not(.slip__verso) { animation: slip-surface calc(var(--surface-ms) * 1ms) var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes slip-surface { from { opacity: 0; } to { opacity: 1; } }

  .slip__stage { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; opacity: 0.55; margin-bottom: 0.9rem; }
  /* the headline on a sheet: Monument Grotesk by default (the studio can switch it) */
  .slip__aside {
    font-family: var(--font-display); font-style: normal; font-weight: 400;
    font-size: min(var(--slip-aside-size), 9.5vw); line-height: 1.02; letter-spacing: -0.025em;
    text-wrap: balance;
  }
  /* the main page's headline sits tight: 50px lines at its 58px size (scales on phones) */
  .slip:not(.is-chapter) .slip__aside {
    line-height: var(--slip-aside-leading); text-transform: uppercase;
  }
  :root[data-slip-caps="off"] .slip:not(.is-chapter) .slip__aside { text-transform: none; }
  :root[data-slip-font="serif"] .slip__aside { font-family: var(--font-serif); font-style: italic; font-weight: 300; line-height: 1.06; letter-spacing: -0.01em; }
  :root[data-slip-font="mono"] .slip__aside { font-family: var(--font-mono); font-weight: 400; letter-spacing: -0.02em; font-size: min(calc(var(--slip-aside-size) * 0.76), 7.5vw); }
  /* images on the paper are soft rounded rectangles: rounded corners, edges that
     fade in over a short feather, a faint blurred copy behind so they sit in the
     paper rather than on it */
  /* chapter hotspots on a slip: the phrase, underlined in dots, with its number */
  .slip__ch {
    /* an inline link (not a button, which can't wrap): a long phrase breaks like words */
    display: inline; padding: 0; border: 0; margin: 0; background: none; cursor: pointer;
    /* a link wears the colour of the sheet it opens */
    font: inherit; color: var(--c, inherit); text-align: inherit; text-transform: inherit; letter-spacing: inherit;
    text-decoration: none;  /* no hover treatment: the colour alone says it's a link */
  }
  .slip__ch sup {
    font: 500 0.48em / 1 var(--font-mono); font-style: normal; color: var(--c, var(--spot-accent));
    margin-left: 0.18em; vertical-align: 0.9em;
  }
  /* a dot of the chapter's colour, so you know which paper is coming */
  .slip__ch sup::before, .slip__chip::before {
    content: ""; display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%;
    background: var(--c);  /* flat: no ring round the dot */
    margin-right: 0.3em; vertical-align: -0.05em;
  }
  .slip__chip::before { width: 0.6rem; height: 0.6rem; margin-right: 0; align-self: center; }
  .slip__ch:focus-visible, .slip__chip:focus-visible { outline: 1.5px solid var(--c, var(--spot-accent)); outline-offset: 3px; border-radius: 3px; }
  .slip__chapters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.3rem; }
  /* a chapter tab is a scrap of the paper it opens: its colour, its ink */
  .slip__chip {
    display: inline-flex; align-items: baseline; gap: 0.45em;
    padding: 0.38rem 0.7rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 400 0.74rem / 1.2 var(--font-mono);
    background: color-mix(in srgb, var(--c, var(--slip-ink)) calc(var(--chapter-alpha) * 100%), transparent);
    color: oklch(from var(--c, #ccc) clamp(0.18, calc((0.72 - l) * 999), 0.97) 0.02 h);
    transition: background 0.2s var(--ease), filter 0.2s var(--ease), transform 160ms var(--ease);
  }
  @media (hover: hover) and (pointer: fine) { .slip__chip:hover { filter: brightness(1.08) saturate(1.1); } }
  .slip__chip span { opacity: 0.7; }
  .slip__chip::before { display: none; }
  .slip.is-chapter .slip__aside { font-size: 1.28rem; }

  .slip__plate { position: relative; margin: 1.6rem 0; }
  /* a picture on a sheet never comes away by itself: grabbing it moves the sheet */
  .slip img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
  /* no blur on the white sheets' pictures for now: crisp edges, no glow behind
     (wins over any feather a picture sets for itself) */
  .slip:not(.is-chapter) .slip__plate, .slip__outtakes { --plate-feather: 0px; }
  .slip:not(.is-chapter) .slip__plate-haze { display: none; }
  /* the eye: the path's frosted disc, bottom left of the picture, on every sheet */
  .slip__real { z-index: 2; left: 0.7rem; bottom: 0.7rem; visibility: visible; opacity: 1; transition: transform 160ms var(--ease); }
  /* always shown on a sheet: the path's own rule hides an eye until its sheet is in front */
  :is(.slip__plate, .slip__gallery-pic, .slip__outtakes figure) .slip__real { visibility: visible; opacity: 1; }
  .slip-view { pointer-events: auto; }
  .slip__plate .spot-plate { border-radius: 0; }
  .slip__plate-core, .slip__plate-haze, .slip__outtakes img {
    border-radius: var(--plate-radius);
    overflow: hidden;
    --soft-rect:
      linear-gradient(to right, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent),
      linear-gradient(to bottom, transparent, #000 calc(var(--plate-feather) * var(--blur-scale)), #000 calc(100% - var(--plate-feather) * var(--blur-scale)), transparent);
    -webkit-mask-image: var(--soft-rect);
    -webkit-mask-composite: source-in;
    mask-image: var(--soft-rect);
    mask-composite: intersect;
  }
  .slip__plate-core { position: relative; }
  .slip__plate-haze {
    position: absolute; inset: 0;
    filter: blur(calc(var(--plate-haze) * var(--blur-scale)));
    transform: scale(1.03);
    opacity: 0.5;
  }
  /* `onPaper: "ink"`: on its white sheet the picture prints into the paper. Grey,
     its whites lifted to the paper's, multiplied in, its edges let go softly; no glow */
  .slip__plate.is-ink { --plate-feather: 46px; }
  .slip__plate.is-ink .slip__plate-core { filter: grayscale(1) contrast(0.82) brightness(1.42); mix-blend-mode: multiply; }
  .slip__plate.is-ink .slip__plate-haze { display: none; }
  /* links across to the first story: one per line, its sheet number in mono */
  .slip__see dd { display: grid; gap: 0.3rem; }
  .slip__see-link { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  .slip__see-link span { font: 0.72rem var(--font-mono); margin-right: 0.35em; text-decoration: none; display: inline-block; }
  /* a row's pictures: a quiet link, then the pictures in small groups, each with the eye */
  .slip__more {
    display: inline; margin-left: 0.35em; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  }
  .slip__gallery { margin: 0.9rem 0 0.4rem; display: grid; gap: 1rem; }
  .slip__gallery[hidden] { display: none; }
  /* "See all" lays the pictures out instead of popping them in; hiding them stays instant */
  .slip__gallery:not([hidden]) { transition: opacity 200ms var(--ease), translate 240ms var(--ease); }
  @starting-style { .slip__gallery:not([hidden]) { opacity: 0; translate: 0 0.5rem; } }
  @media (prefers-reduced-motion: reduce) { @starting-style { .slip__gallery:not([hidden]) { translate: none; } } }
  .slip__gallery figure { margin: 0; }
  .slip__gallery figcaption { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; opacity: 0.5; margin-bottom: 0.4rem; }
  .slip__gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .slip__gallery-pic { position: relative; display: block; }
  .slip__gallery-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
  /* the eye, smaller to sit on a small picture */
  .slip__gallery-pic .slip__real { left: 0.3rem; bottom: 0.3rem; width: 1.5rem; height: 1.5rem; visibility: visible; opacity: 1; }
  .slip__gallery-pic .slip__real svg { width: 0.8rem; height: 0.8rem; }
  @media (max-width: 767px) { .slip__gallery-grid { grid-template-columns: repeat(2, 1fr); } }
  .slip__outtakes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: -0.4rem 0 1.4rem; }
  .slip__outtakes img { display: block; width: 100%; opacity: 0.7; }
  .slip__outtakes figure { position: relative; margin: 0; }
  .slip__outtakes figcaption { margin-top: 0.4rem; font-family: var(--font-text); font-size: 0.75rem; opacity: 0.7; }
  .slip__log { display: flex; flex-direction: column; gap: 1rem; border-top: 0.5px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); padding-top: 1.1rem; }
  .slip__row dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; opacity: 0.5; margin-bottom: 0.25rem; }
  .slip__row dd { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 1.05rem; line-height: 1.45; }
  .slip__row dd.is-todo { opacity: 0.45; font-style: italic; }

  /* ── The bar: count, lift / lay, put away ── */
  .sheaf__bar {
    position: absolute; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 40;  /* over the strings */
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 1.1rem;
    font-family: var(--font-mono); font-size: 0.72rem; color: color-mix(in srgb, var(--back-ink) 72%, transparent);
    opacity: 0; transition: opacity calc(var(--sheet-ms) * 1ms) var(--ease);
    white-space: nowrap;
  }
  :root.sheaf-open .sheaf__bar { opacity: 1; pointer-events: auto; }
  .sheaf__n { color: var(--spot-accent); transition: color 0.3s var(--ease); }
  .sheaf__count { font-variant-numeric: tabular-nums; }
  .sheaf__nav { display: flex; gap: 0.2rem; }
  .sheaf__nav button {
    display: grid; place-items: center; width: 2rem; height: 2rem;
    padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
    color: inherit; transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 160ms var(--ease);
  }
  .sheaf__nav button:hover:not(:disabled) { color: var(--back-ink); background: color-mix(in srgb, var(--back-ink) 10%, transparent); }
  .sheaf__nav button:disabled { opacity: 0.3; cursor: default; }
  .sheaf__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sheaf__nav button:focus-visible { outline: 1.5px solid var(--spot-accent); outline-offset: 2px; }
  /* the sound switch in each story's bar: waves when on, a cross when off */
  [data-sound-switch][aria-pressed="true"] .sound-off, [data-sound-switch][aria-pressed="false"] .sound-on { display: none; }

  /* ── Phones: the slip takes the width, the pile steps less ── */
  @media (max-width: 767px) {
    /* a phone has no room for a steep lean: sheets lean 40% as far */
    .slip { --slip-step: 10px; --slip-scatter: 8px; --chapter-reach: 10px; --tilt-scale: 0.4; }
    /* leave room for the lean and the scatter, so no sheet touches the screen edge */
    .slip { width: calc(100vw - 48px); }
    .slip.is-chapter { width: calc((100vw - 48px) * var(--chapter-scale)); }
    /* the headline is ~60% of its desktop size here, so every blur on the paper follows */
    :root { --blur-scale: 0.6; }
    .slip__sheet { max-height: min(72vh, 40rem); }
    .slip__ink { padding: 1.3rem 1.3rem 1.6rem; }

  }

  /* phones: the bar laid out like the look path's, so every overlay is driven the
     same way: count flush left, arrows flush right on frosted discs, × top-left */
  @media (max-width: 767px) and (orientation: portrait) {
    .sheaf__bar { left: 1rem; right: 1rem; transform: none; justify-content: space-between; }
    .sheaf__nav { gap: 0.5rem; }
    .sheaf__nav button {
      background: rgb(20 20 20 / 0.5);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 0.5px solid rgb(255 255 255 / 0.1);
    }
    .sheaf__nav [data-spot-close] { position: fixed; top: calc(0.75rem + env(safe-area-inset-top, 0px)); left: 0.75rem; }
  }
  /* bigger targets for fingers, the same size as the look path's */
  @media (hover: none) { .sheaf__nav button { width: 2.75rem; height: 2.75rem; } }

  /* short screens (phones on their side): a sheet stays clear of the bar */
  /* short screens: sheets land closer to the middle, a little higher, and shorter, so they clear the bar */
  @media (max-height: 760px) {
    :root { --slip-scatter: 28px; --chapter-reach: 28px; }
    .slip { top: calc(50% - 1.6rem); }
    .slip__sheet { max-height: calc(100dvh - 12rem); }
  }
  @media (max-height: 500px) { :root { --slip-scatter: 14px; --chapter-reach: 14px; } .slip__sheet { max-height: calc(100dvh - 7rem); } }
  /* where a sheet can still reach the bar, the bar rides on its own frosted pill, so
     the count and the arrows never go white on white paper (upright phones have
     their discs already; a filter here would pin their × to the bar) */
  @media (max-height: 760px) and (min-width: 768px), (max-height: 760px) and (orientation: landscape) {
    .sheaf__bar {
      padding: 0.2rem 0.25rem 0.2rem 1rem; border-radius: 99px;
      background: rgb(20 20 20 / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 0.5px solid rgb(255 255 255 / 0.1);
    }
  }

  /* ── Fallbacks ── */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sheaf__veil { background: rgb(12 12 12 / 0.9); }
    .slip__sheet { background: #c6c6c6; }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .sheaf__veil { background: rgb(12 12 12 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .sheaf__veil::before, .slip__sheet::before, .sheaf__veil::after, .slip__sheet::after, .sheaf__back { display: none; }
    .slip__sheet { background: #d4d4d4; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sheaf__veil, .sheaf__back, .slip, .slip__sheet, .slip__ink, .sheaf__bar, .slip__flap, .slip__flap-face, .slip__flap-shadow > span, .slip__crease { transition-duration: 1ms !important; }
    .slip.is-top .slip__ink > :not(.slip__verso) { animation: none; }
  }
  @media (forced-colors: active) {
    .sheaf__veil, .sheaf__back, .slip__plate-haze, .slip__flap, .slip__crease { display: none; }
    .slip__sheet { border: 1px solid CanvasText; background: Canvas; -webkit-mask-image: none; mask-image: none; clip-path: none !important; }
  }:root {
    /* the ink the path is burnt in: a gradient along it, orange to hot red (it was
       orange alone, then magenta). Give both ends the same colour for a single ink */
    --ink-a: #ff6a2b;         /* the first sheet, the first line of the conversation */
    --ink-b: #ff4a5e;         /* the last */
    --burn-ink: var(--ink-a);
    --burn-glow: 0.45;        /* how hot the lines being read glow */
    --burn-ash: 0.42;         /* the rest of the conversation, cooled */
    --log-w: var(--log-w-set, clamp(17rem, 26.5vw, 23rem));  /* --log-w-set: the width the reader dragged it to */
    --look-step: 19rem;       /* how far apart stops lie along the path */
    --look-lane: 27vh;        /* how far off the path the side stops sit */
    --look-y: 1vh;            /* a stop's own `y` nudge, per unit */
    --outro-w: min(30.6rem, calc(100vw - 3rem));   /* the closing note's width */
    --outro-gap: 22rem;       /* from the last sheet's middle to the note */
    --stop-w: 19rem;
    --stop-shot-w: 23rem;
    --track-mid: 50%;         /* where the path runs, top to bottom */
  }
  .spot--look { --spot-color: var(--burn-ink); }
  /* everything burnt takes the ink at its place: a sheet and a log line by where they
     sit (--t, 0 to 1), the panel and bar by the sheet being read, the closing note the end */
  .look__stop, .look__line, .look__log, .look__bar, .look__outro { --burn-ink: color-mix(in oklch, var(--ink-a), var(--ink-b) calc(var(--t, 0) * 100%)); }
  .look__log, .look__bar { --t: var(--now-t, 0); }
  .look__outro { --t: 1; }
  .look__ink-a { stop-color: var(--ink-a); }
  .look__ink-b { stop-color: var(--ink-b); }

  .look {
    position: fixed; inset: 0; z-index: 45; visibility: hidden; pointer-events: none;
    transition: visibility 0s linear 0.6s;
  }
  :root.look-open .look { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  /* touches on the path only ever move the path (sideways) or the log (up and
     down), never the essay underneath; set in CSS so scrolling stays off the
     main thread */
  .look { touch-action: none; }
  .look__track { touch-action: pan-x; }
  .look__log-list { touch-action: pan-y; }
  :root.look-open, :root.look-open body { overflow: hidden; overscroll-behavior: none; }
  /* the path is always the dark theme's: over a light essay the page goes dark
     under the fog too, so it lands where the dark one does */
  :root[data-theme="light"].look-open, :root[data-theme="light"].look-open body { background-color: #0c0c0c; }
  :root[data-theme="light"], :root[data-theme="light"] body { transition: background-color 0.6s var(--ease); }
  .look__defs { position: absolute; }
  .look { outline: none; }

  /* the same fog the sheets sit on */
  /* the fog: a tint over the essay, and the essay itself put out of focus while
     the path is open. Blurring the essay once (a filter, drawn and kept) is far
     lighter than a fog that re-blurs it behind every frame of scrolling. */
  .look__veil {
    position: absolute; inset: 0;
    background: var(--veil-tint);
    opacity: 0; transition: opacity 0.6s var(--ease);
  }
  :is(.topbar, .toc, main.article, .site-footer) { transition: filter 0.6s var(--ease); }
  :root.look-open :is(.topbar, .toc, main.article, .site-footer) {
    filter: blur(var(--veil-blur)) brightness(var(--veil-bright)) contrast(var(--veil-contrast)) saturate(var(--veil-sat));
  }
  /* the nav's own solid background would come through that filter lighter than
     the page around it (lower contrast pulls near-black toward grey; white stays
     white in light mode): while the path is open it sits on the page's black instead */
  :root.look-open .topbar { background: transparent; }
  :root.look-open .look__veil { opacity: 1; }
  .look__track, .look__bar { opacity: 0; transition: opacity 0.6s var(--ease); }
  :root.look-open .look__track, :root.look-open .look__bar { opacity: 1; }
  /* The log never fades as a whole: anything fading as a whole can't blur what's
     behind it, so its blur layers would arrive sharp and then snap to blurred.
     Each piece fades on its own instead (the blur layers included), so the panel
     comes in already frosted. --log-on is how present the panel is. */
  .look__log { --log-on: 0; }
  :root.look-open .look__log { --log-on: 1; }
  .look__log > :not(.look__log-list), .look__log::before, .look__log::after { opacity: var(--log-on); transition: opacity 0.9s var(--ease); }
  /* loading: only the fog and a small word on it; everything else waits, then comes in together */
  .look__loading {
    position: absolute; left: 50%; top: 50%; z-index: 4; margin: 0; transform: translate(-50%, -50%);
    font: 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--back-ink) 72%, transparent);
    opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
  }
  :root.look-open .look.is-loading .look__loading { opacity: 1; animation: look-breathe 1.6s var(--ease) infinite alternate; }
  @keyframes look-breathe { to { color: color-mix(in srgb, var(--back-ink) 40%, transparent); } }
  :root.look-open .look.is-loading :is(.look__track, .look__bar, .look__intro) { opacity: 0; transition-duration: 0.15s; }
  :root.look-open .look.is-loading .look__log { --log-on: 0; }
  @media (prefers-reduced-motion: reduce) { :root.look-open .look.is-loading .look__loading { animation: none; } }

  /* ── The log: burnt into the fog in one ink ── */
  .look__log {
    position: absolute; right: 0; top: 0; bottom: 0; width: var(--log-w);  /* on the right (desktop) */
    display: flex; flex-direction: column;
    /* the whole height of the window: the header up top, the lines down to the bottom edge */
    padding: 2.15rem 2.1rem 1.1rem 1.6rem;
    font: 400 0.7rem / 1.55 var(--font-mono);
    color: var(--burn-ink);
    z-index: 2;  /* over the path: sheets slide under the log's scrim, never cut */
  }
  /* the scrim: the fog chars deeper where the log is burnt in, so the ink holds,
     and fades out well past the log's edge, so nothing ends on a hard line */
  .look__log::before, .look__log::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(100% + 18rem);
    pointer-events: none;
  }
  .look__log::before {
    z-index: -1;
    /* gentle: dark under the panel, then a long, soft fall-off into the path */
    background: linear-gradient(to left, rgb(12 12 12 / 0.75), rgb(12 12 12 / 0.6) calc(100% - 18rem), rgb(12 12 12 / 0.3) calc(100% - 11rem), rgb(12 12 12 / 0.1) calc(100% - 5rem), transparent);
  }
  /* the panel: a dark pane that lit from inside, its edges never quite in focus.
     Its own layer, beside the blur layers rather than around them (a filter on
     an ancestor would cut their backdrop off). */
  .look__panel {
    position: absolute; inset: 0.9rem 0.9rem 0.9rem 0; z-index: -1; pointer-events: none;
    border-radius: 22px;
    background:
      radial-gradient(120% 70% at 50% 0%, rgb(from var(--burn-ink) r g b / 0.07), transparent 60%),
      radial-gradient(140% 100% at 50% 50%, rgb(17 13 11 / 0.62), rgb(10 8 7 / 0.74));  /* thin enough to see the lens through */
    box-shadow:
      inset 0 0 0 1px rgb(from var(--burn-ink) r g b / 0.16),
      inset 0 0 18px rgb(from var(--burn-ink) r g b / 0.12),
      inset 0 0 70px rgb(from var(--burn-ink) r g b / 0.08),
      0 0 40px rgb(from var(--burn-ink) r g b / 0.05);
    /* soft at every edge, like something only half remembered */
    filter: blur(1.5px);
  }
  /* the lens layer: the view behind bent (Chrome, Edge, Firefox), then softened
     just enough for the conversation to stay readable over it. Safari can't bend
     a backdrop, so there it's only that soft blur. */
  .look__warp {
    position: absolute; inset: 0.9rem 0.9rem 0.9rem 0; z-index: -1; pointer-events: none;
    border-radius: 22px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: url(#look-lens) blur(30px);
  }
  /* the edge to pull the panel wider by: a faint tick that warms when reached for */
  .look__grip {
    position: absolute; top: 0.9rem; bottom: 0.9rem; left: -0.55rem; width: 1.1rem; z-index: 3;
    display: grid; place-items: center; cursor: ew-resize; touch-action: none; outline: none;
  }
  .look__grip span {
    width: 3px; height: 3.6rem; border-radius: 99px; background: var(--burn-ink); opacity: 0.25;
    transform: scaleY(0.72);  /* rests shorter, grows to full when reached for (transform, not height) */
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  @media (hover: hover) and (pointer: fine) { .look__grip:hover span { opacity: 0.6; transform: none; } }
  .look__grip:focus-visible span, .look.is-resizing .look__grip span { opacity: 0.9; transform: none; }
  .look.is-resizing { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
  .look.is-resizing :is(.look__stop, .look__bar) { transition: none; }
  /* the glow breathes, slowly, the way a dream holds still and doesn't */
  .look__panel i {
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 34px rgb(from var(--burn-ink) r g b / 0.2), inset 0 0 120px rgb(from var(--burn-ink) r g b / 0.07);
    animation: look-glow 7s ease-in-out infinite alternate;
  }
  @keyframes look-glow { from { opacity: 0.35; } to { opacity: 1; } }  /* its own name: "look-breathe" is the loading word's */
  :root:not(.look-open) .look__panel i { animation-play-state: paused; }
  /* the ink blooms a little, the way light does through a haze */
  .look__log-list { text-shadow: 0 0 9px rgb(from var(--burn-ink) r g b / 0.28); }
  /* progressive blur: whatever slides under the log goes out of focus by degrees,
     softest at the scrim's far edge and deepest under the text. Four stacked
     layers, each blurring more and reaching less far. */
  /* only along the scrim's edge, where sheets are still visible: under the text
     the scrim is near-solid, so blurring there would cost and show nothing */
  .look__blur { position: absolute; top: 0; bottom: 0; right: 100%; width: 18rem; z-index: -1; pointer-events: none; }
  .look__blur i { position: absolute; inset: 0; }
  .look__blur i:nth-child(1) {
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent);
  }
  .look__blur i:nth-child(2) {
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 60%); mask-image: linear-gradient(to left, #000 10%, transparent 60%);
  }
  .look__blur i:nth-child(3) {
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to left, #000, transparent 35%); mask-image: linear-gradient(to left, #000, transparent 35%);
  }

  /* grain over the ink, so it reads scorched into the surface, not printed on it,
     fading out with the scrim. (No blend modes anywhere in here: one would cut
     the fog's blur off from the essay.) */
  .look__log::after {
    background: url("/textures/paper-grain.png") 0 0 / 128px;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 18rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 18rem), transparent);
  }
  .look__log-head {
    display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 0.8rem;
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .look__log-list {
    /* the conversation starts right under the header; room below lets the last lines rise to the top */
    flex: 1; min-height: 0; margin: 0; padding: 1rem 0.5rem 0 0; list-style: none;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  }
  .look__log-list::-webkit-scrollbar { display: none; }
  /* the room below the last line, so it can rise to the top: a spacer, not padding,
     so the list can still be as short as its panel */
  .look__log-list::after { content: ""; display: block; height: var(--log-tail, 45vh); }
  .look__log-list.is-mine .look__line:not(.is-rafael) { display: none; }
  .look__log-list.is-mine .look__line.is-rafael { margin-bottom: 1.6rem; }
  .look__line.has-mark { margin-top: 2.6rem; }
  /* where a stretch of the conversation is left out: a quiet break, in either view */
  .look__line.is-gap { margin: 2.8rem 0; padding: 1rem 0; border-block: 0.5px dashed color-mix(in srgb, var(--burn-ink) 35%, transparent); }
  .look__log-list.is-mine .look__line.is-gap { display: block; }
  .look__gap { margin: 0; font-style: italic; opacity: 0.6; text-wrap: pretty; }
  .look__line.has-mark:first-child { margin-top: 0; }
  /* with just Rafael's lines on, a chapter starting on a hidden agent line starts on his next one */
  .look__log-list.is-mine .look__line.is-rafael:has(.look__mark--mine) { margin-top: 2.6rem; }
  .look__log-head > span:not(.look__filter) { opacity: 0.6; }
  .look__log-head > span:first-child { font-size: 0.78rem; opacity: 0.85; }
  /* its own layer: Safari otherwise can leave the old pill lit beside the blur layers */
  .look__filter { will-change: transform; transform: translateZ(0); }
  .look__filter { display: flex; gap: 0.2rem; margin-top: 0.5rem; text-transform: none; letter-spacing: 0.04em; }
  .look__filter button {
    padding: 0.3rem 0.65rem; border: 0.5px solid color-mix(in srgb, var(--burn-ink) 40%, transparent); border-radius: 99px;
    background: none; color: inherit; font: inherit; cursor: pointer; opacity: 0.7;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  /* pressed: buttons give a little under the finger */
  .look__nav button, .look__mark, .look__intro-go { transition: transform 160ms var(--ease); }
  .look__filter button { transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease), transform 160ms var(--ease); }
  :is(.look__nav button, .look__filter button, .look__mark, .look__intro-go):active { transform: scale(0.97); }
  @media (prefers-reduced-motion: reduce) { :is(.look__nav button, .look__filter button, .look__mark, .look__intro-go):active { transform: scale(0.985); } }
  /* the swap between everything and just Rafael's lines: out quick, back in */
  /* it fades in with the panel; a switch between Everything / Just Rafael is quicker */
  .look__log-list { opacity: var(--log-on); transition: opacity 0.9s var(--ease); }
  .look__log-list.is-swapped { transition-duration: 180ms; }
  .look__log-list.is-swapping { opacity: 0; transition-duration: 120ms; }
  /* a long reply opens to its full height where the browser can ease to "auto" */
  @supports (interpolate-size: allow-keywords) {
    .look__line.is-claude .look__say {
      interpolate-size: allow-keywords;
      display: block; -webkit-line-clamp: unset; height: 4lh; overflow: hidden;
      -webkit-mask-image: linear-gradient(#000 calc(100% - 1lh), transparent); mask-image: linear-gradient(#000 calc(100% - 1lh), transparent);
      transition: height 200ms var(--ease);
    }
    .look__line.is-claude.is-open .look__say { height: auto; -webkit-mask-image: none; mask-image: none; }
    @media (prefers-reduced-motion: reduce) { .look__line.is-claude .look__say { transition: none; } }
  }
  .look__filter button[aria-pressed="true"] { background: var(--burn-ink); color: oklch(from var(--burn-ink) clamp(0.16, calc((0.72 - l) * 999), 0.97) 0.02 h); opacity: 1; }
  .look__filter button:hover { opacity: 1; }
  .look__filter button:focus-visible { outline: 1px solid var(--burn-ink); outline-offset: 2px; }
  .look__line {
    position: relative; margin: 0 0 1.25rem;
    opacity: var(--burn-ash);
    /* only opacity eases: cheap to animate, even over many lines */
    transition: opacity 0.9s var(--ease);
  }
  .look__line:hover { opacity: 0.85; }
  .look__line.is-hot {
    opacity: 1;
    text-shadow: 0 0 0.4px currentColor, 0 0 10px color-mix(in srgb, var(--burn-ink) calc(var(--burn-glow) * 100%), transparent);
  }
  .look__who { display: flex; gap: 0.7rem; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.15rem; }
  .look__when { letter-spacing: 0.02em; }
  .look__filter button { white-space: nowrap; }
  .look__voice { display: inline-flex; align-items: center; gap: 1.5px; letter-spacing: 0.06em; }
  .look__voice i { display: block; width: 1.5px; height: 0.55rem; background: currentColor; border-radius: 1px; }
  .look__voice i:nth-child(1), .look__voice i:nth-child(5) { height: 0.25rem; }
  .look__voice i:nth-child(2), .look__voice i:nth-child(4) { height: 0.45rem; }
  .look__voice span { margin-left: 0.35rem; }
  .look__say { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
  .look__line.is-rafael .look__say { font-size: 12px; line-height: 1.45; }
  .look__line.is-claude .look__say { font-size: 11px; }
  .look__line.is-rafael.is-aside .look__who::after { content: "while it worked"; letter-spacing: 0.04em; text-transform: none; }
  .look__line.is-claude .look__say { opacity: 0.72; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .look__line.is-claude.is-open .look__say { display: block; }
  .look__line.is-act { opacity: calc(var(--burn-ash) * 0.7); font-size: 0.62rem; }
  .look__line.is-act.is-hot { opacity: 0.6; }
  .look__line.is-act .look__who { display: inline; margin-right: 0.4rem; }
  .look__line.is-act .look__say { display: inline; }
  .look__picked { display: block; margin-top: 0.2rem; font-size: 0.6rem; opacity: 0.6; }
  .look__thumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
  /* screenshots in the log: the same single ink, sunk into the fog */
  /* fixed size, so the log never shifts as they load (and its scroll target holds) */
  .look__thumb { position: relative; display: block; }
  /* the eye on a log screenshot: smaller, always there */
  .look__thumb .look__real { visibility: visible; opacity: 1; left: 0.25rem; bottom: 0.25rem; width: 1.4rem; height: 1.4rem; }
  /* in the conversation panel the eye takes the panel's ember, like everything burnt into it */
  .look__log .look__real { color: var(--burn-ink); background: color-mix(in srgb, var(--burn-ink) 14%, rgb(20 12 8 / 0.7)); }
  @media (hover: hover) and (pointer: fine) { .look__log .look__real:hover { color: #fff; background: color-mix(in srgb, var(--burn-ink) 45%, rgb(20 12 8 / 0.8)); } }
  .look__log .look__real:focus-visible { outline-color: var(--burn-ink); }
  .look__thumb .look__real svg { width: 0.75rem; height: 0.75rem; }
  .look__thumbs img { width: 7.5rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0; opacity: 0; }
  .look__thumb-ink {
    position: absolute; inset: 0; pointer-events: none; background: var(--burn-ink);
    -webkit-mask: var(--shot, none) top / cover no-repeat; mask: var(--shot, none) top / cover no-repeat;
  }
  .look__thumb-ink:not([style]) { background: none; }
  /* the dots to try inks with (local preview only) */
  .look__inks {
    position: absolute; z-index: 5; top: calc(0.8rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.45rem; border-radius: 99px;
    background: rgb(20 20 20 / 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 0.5px solid rgb(255 255 255 / 0.1);
    opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease);
  }
  :root.look-open .look__inks { opacity: 1; pointer-events: auto; }
  .look__inks button { width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 99px; background: var(--c); cursor: pointer; transition: transform 160ms var(--ease); }
  .look__inks button[data-ink*=","] { width: 2.2rem; background: linear-gradient(90deg, var(--c)); }
  .look__inks button[aria-checked="true"] { box-shadow: 0 0 0 2px #0c0c0c, 0 0 0 3.5px var(--c); }
  .look__inks button:active { transform: scale(0.9); }
  .look__inks button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .look__inks-name { margin-left: 0.3rem; font: 0.68rem var(--font-mono); color: rgb(255 255 255 / 0.7); white-space: nowrap; }
  .look__mark--mine { display: none; }
  .look__log-list.is-mine .look__mark--mine { display: block; }
  /* a chapter's number sits above the name that starts it */
  .look__mark {
    display: block; width: max-content; margin: 0 0 0.45rem;
    padding: 0.1rem 0.3rem; border: 0.5px solid currentColor; border-radius: 99px; background: none;
    font: inherit; font-size: 0.55rem; color: inherit; cursor: pointer; line-height: 1.2;
  }
  .look__log-list { padding-left: 0.2rem; }

  /* ── The path ── */
  .look__track {
    /* the full width: sheets scroll on under the log's scrim instead of being cut at its edge */
    position: absolute; inset: 0; z-index: 1;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
    scrollbar-width: none; cursor: grab;
  }
  .look__track::-webkit-scrollbar { display: none; }
  .look__track.is-panning { cursor: grabbing; user-select: none; }
  .look__lane {
    position: relative; height: 100%;
    /* room after the last sheet for the closing note */
    width: calc(100vw + (var(--count) - 1) * var(--look-step) + var(--outro-gap) + var(--outro-w) / 2 + 2rem + var(--outro-more, 0px));
  }
  /* behind the sheets: the string runs under the paper, pin to pin (the pins
     sit on the paper, so a string seems to go through its pin and under) */
  .look__thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
  .look__string { stroke: url(#look-ink); stroke-width: 1.15; stroke-linecap: round; }
  .look__string.is-gone { display: none; }  /* a spare line from the pool, not in use */
  .look__string.is-path { opacity: 0.85; }
  .look__string.is-spur { opacity: 0.7; }
  .look__string.is-out { opacity: 0.55; stroke-dasharray: 1 5; }
  .look__string.is-tie-strong, .look__string.is-tie { opacity: 0.1; stroke-width: 0.9; transition: opacity 0.5s var(--ease); }
  .look__string.is-tie-strong.is-lit { opacity: 0.85; stroke-width: 1.5; }
  .look__string.is-tie.is-lit { opacity: 0.55; }
  /* the pin: part of the sheet, flat ember, placed on paper the fold left showing */
  .look__pin {
    position: absolute; left: 50%; top: 14px; z-index: 3; pointer-events: none;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: var(--burn-ink);
  }

  .look__stop {
    position: absolute; width: var(--stop-w);
    left: calc((100vw - var(--log-w)) / 2 + var(--i) * var(--look-step) + var(--jx) * 2.5rem);
    top: calc(var(--track-mid) + var(--lane) * var(--look-lane) + var(--jy) * 3vh + var(--y) * var(--look-y));
    /* left/top is the stop's middle: the thread runs through it */
    transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) translate(-50%, calc(-50% + var(--nudge, 0px))) rotate(calc(var(--rot) * 4deg)) scale(0.94);
    z-index: calc(10 + var(--i));
    outline: none; cursor: pointer;
    transition: transform 0.4s var(--ease);
  }
  .look__stop.has-shot { width: var(--stop-shot-w); }
  .look__stop.is-off { z-index: calc(5 + var(--i)); }
  .look__stop.is-active { z-index: 100; transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) translate(-50%, calc(-50% + var(--nudge, 0px))) rotate(calc(var(--rot) * 1.5deg)) scale(var(--fit, 1)); }
  /* picked up: follows the hand exactly (no easing), lifted a touch */
  .look__stop.is-dragging, .look__stop.is-coasting { transition: none; cursor: grabbing; }
  .look__stop.is-held { cursor: grabbing; }
  /* picked up (a mouse grab, or a finger's press-and-hold arming): the shadow
     lifts at once, so the hand feels the sheet leave the board */
  .look__stop:is(.is-held, .is-dragging) .look__shadow {
    transform: translate(calc(var(--shadow-drop) * 0.9), calc(var(--shadow-drop) * 2.2)) scale(1.04);
    opacity: calc(var(--shadow-strength) * 0.75);
    transition-duration: 160ms;
  }
  .look__stop img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

  /* each stop is a sheet of the same vellum as the pile */
  .look__paper {
    position: relative; overflow: hidden;
    max-height: 74vh;
    padding: 1.05rem 1.2rem 1.25rem;
    color: var(--slip-ink);
    background: var(--slip-tint);
    -webkit-backdrop-filter: blur(7px) brightness(1.35) contrast(0.55) saturate(0.3) sepia(0);
    backdrop-filter: blur(var(--slip-blur)) brightness(var(--slip-bright)) contrast(var(--slip-contrast)) saturate(var(--slip-sat)) sepia(var(--slip-sepia));
    border-radius: 2px;
  }
  .look__paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/textures/paper-grain.png") 0 0 / 128px, url("/textures/paper-fibre.png") 0 0 / 384px; opacity: 0.32; /* raked light brings the tooth up; light enough that the paper reads #efefef */ }
  .look__stop:not(.is-active) .look__paper > :not(.look__pin) { opacity: 0.7; }
  .look__stop.is-out .look__paper { background: color-mix(in srgb, var(--slip-tint), #3a3a3a 22%); }
  .look__stop:focus-visible .look__paper { outline: 1.5px solid var(--burn-ink); outline-offset: 3px; }

  .look__meta { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font: 0.62rem / 1 var(--font-mono); letter-spacing: 0.02em; }
  .look__n { opacity: 0.6; }
  .look__out { padding: 0.15rem 0.4rem; border: 0.5px solid currentColor; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.55rem; opacity: 0.7; }
  .look__title {
    margin: 0 0 0.8rem;
    font: 400 1.6rem / 0.9 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase;
    text-wrap: balance;
  }
  .look__stop.is-out .look__title { text-decoration: line-through; text-decoration-thickness: 1px; }
  /* ── Light ── one soft lamp above and a little to the left of the path. It
     lights the fog in a wide pool, rakes across each sheet (bright toward it,
     dimmer away, so the paper's grain and fibre show), and every sheet casts a
     soft shadow down and to the right onto whatever lies under it. Sheets closer
     to the light (the one being read) cast a longer, softer shadow. */
  :root {
    --light-x: 38%;           /* where the lamp hangs over the path */
    --light-y: -12%;
    --light-glow: 0.11;       /* how much it lifts the fog */
    --light-on-paper: 0.2;    /* how bright the near side of a sheet gets */
    --shadow-strength: 0.42;
    --shadow-blur: 18px;
    --shadow-drop: 16px;
  }
  .look__light {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 85% at var(--light-x) var(--light-y), rgb(255 255 255 / var(--light-glow)), rgb(255 255 255 / calc(var(--light-glow) * 0.35)) 45%, transparent 75%),
      radial-gradient(ellipse 120% 100% at var(--light-x) var(--light-y), transparent 55%, rgb(0 0 0 / 0.28));
    opacity: 0; transition: opacity 0.9s var(--ease);
  }
  :root.look-open .look__light { opacity: 1; }
  .look__shadow {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
    filter: blur(var(--shadow-blur));
    transform: translate(calc(var(--shadow-drop) * 0.45), var(--shadow-drop));
    opacity: var(--shadow-strength);
    /* the blur never changes (re-blurring is costly); lifting a sheet only moves its shadow */
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .look__shadow > span {
    position: absolute; inset: 0; background: #000;
    transition: clip-path calc(var(--unfold-ms) * 1ms) var(--ease);
  }
  .look__stop.has-fold .look__shadow > span { clip-path: var(--front-fold); }
  .look__stop.has-fold:is(.is-unfolded, .is-dragging) .look__shadow > span, .look__stop.has-fold:focus-visible .look__shadow > span { clip-path: var(--front-flat); }
  .look__stop.is-active .look__shadow { transform: translate(calc(var(--shadow-drop) * 0.7), calc(var(--shadow-drop) * 1.7)) scale(1.03); opacity: calc(var(--shadow-strength) * 0.8); }
  /* the light raking across the paper: brighter toward the lamp, falling off away */
  .look__paper::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(165deg, rgb(255 255 255 / var(--light-on-paper)), rgb(255 255 255 / 0) 42%, rgb(30 30 30 / 0.1));
  }
  /* the shadow is the light's now: no drawn shadows under the folds */
  .look__stop .slip__flap-shadow { display: none; }

  /* folds (the shapes come from src/lib/fold.ts; the flap's look is the pile's) */
  .look__stop { --flap-tone: #efefef; }
  .look__stop.is-out { --flap-tone: color-mix(in srgb, #efefef, #3a3a3a 22%); }
  .look__paper { transition: background 0.6s var(--ease), clip-path calc(var(--unfold-ms) * 1ms) var(--ease); }
  .look__stop.has-fold .look__paper { clip-path: var(--front-fold); }
  .look__stop:not(.has-fold) .slip__flap, .look__stop:not(.has-fold) .slip__crease { display: none; }
  /* the path's folds skip the flap's own blur: a dozen live blurs moving at once
     is what made scrolling stutter. A touch more paper in the flap makes up for it. */
  .look__stop .slip__flap-face { cursor: pointer; -webkit-backdrop-filter: none; backdrop-filter: none; --flap-opacity: 0.86; }
  /* the sheet in front gets the pile's frosted fold: thin, the page under it soft
     and pale (one live blur, not a dozen, so scrolling stays smooth) */
  .look__stop.is-active .slip__flap-face {
    -webkit-backdrop-filter: blur(12px) brightness(1.12) contrast(0.6) saturate(0.5);
    backdrop-filter: blur(12px) brightness(1.12) contrast(0.6) saturate(0.5);
    --flap-opacity: 0.4;
  }
  .look__stop:is(.is-unfolded, .is-dragging) .look__paper, .look__stop:focus-visible .look__paper { clip-path: var(--front-flat); }
  .look__stop:is(.is-unfolded, .is-dragging) :is(.slip__flap-face, .slip__flap-shadow > span), .look__stop:focus-visible :is(.slip__flap-face, .slip__flap-shadow > span) { clip-path: var(--flap-flat); }
  .look__stop:is(.is-unfolded, .is-dragging) .slip__crease, .look__stop:focus-visible .slip__crease { opacity: 1; }

  /* pictures on the paper: burnt in, one tone */
  .look__shots { display: grid; margin: 0 0 0.85rem; }
  .look__shot { grid-area: 1 / 1; position: relative; display: block; }
  .look__shots img { display: block; width: 100%; height: auto; border-radius: 0; }  /* square, like prints */
  /* a tall picture (a phone screenshot) shows its top, so the words below it stay on the sheet; the eye opens it whole */
  .look__shots img { max-height: 36vh; object-fit: cover; object-position: top; }
  @media (max-height: 720px) { .look__shots img { max-height: 30vh; } }
  .look__shot + .look__shot { width: 72%; justify-self: end; align-self: end; transform: translate(10%, 22%) rotate(3deg); }
  .look__shots:has(.look__shot + .look__shot) { margin-bottom: 2.4rem; }
  /* the button to the original: bottom left of each picture, on the sheet in front only */
  .look__real {
    position: absolute; left: 0.5rem; bottom: 0.5rem; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
    /* the same frosted disc as the arrows and × on phones */
    background: rgb(20 20 20 / 0.5); color: rgb(255 255 255 / 0.85);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 0.5px solid rgb(255 255 255 / 0.1);
    visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), transform 160ms var(--ease), visibility 0s 0.3s;
  }
  .look__stop.is-active .look__real { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease), transform 160ms var(--ease); }
  .look__real svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
  .look__real:active { transform: scale(0.97); }
  @media (hover: hover) and (pointer: fine) { .look__real:hover { background: rgb(20 20 20 / 0.8); color: #fff; } }
  .look__real:focus-visible, .look__mark:focus-visible, .look__view-close:focus-visible, .look__nav button:focus-visible, .look__intro-go:focus-visible { outline: 2px solid var(--burn-ink); outline-offset: 2px; }

  /* ── The original, full size over everything ── */
  .look__view {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; align-content: center; gap: 0.9rem;
    padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
    background: rgb(8 8 8 / 0.97); cursor: zoom-out; opacity: 0; transition: opacity 200ms var(--ease);
  }
  .look__view[hidden] { display: none; }
  .look__view.is-on { opacity: 1; }
  .look__view img { max-width: min(100%, 72rem); max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: 0; transform: scale(0.97); transition: transform 200ms var(--ease); }
  .look__view.is-on img { transform: none; }
  .look__view-note { margin: 0; font: 0.72rem var(--font-mono); color: rgb(255 255 255 / 0.5); }
  /* a long picture: full width, scrolled through, the × staying put */
  .look__view.is-long {
    place-items: start center; align-content: start;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; cursor: auto;
  }
  .look__view.is-long img { width: min(100%, 64rem); height: auto; max-height: none; }
  .look__view.is-long .look__view-close { position: fixed; }
  /* a very tall picture doesn't grow from its middle (its top would slide ~150px):
     it rises a little from just below, its top where it lands */
  .look__view.is-long img { transform: translateY(12px); }
  .look__view.is-long.is-on img { transform: none; }
  .look__view-close {
    position: absolute; top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: 0.75rem;
    display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 99px;
    background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.85); cursor: pointer;
  }
  .look__view-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  /* on a phone its × sits where every overlay's × does: top-left, on a frosted disc, finger-sized */
  @media (max-width: 767px) and (orientation: portrait) {
    .look__view-close {
      right: auto; left: 0.75rem;
      background: rgb(20 20 20 / 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 0.5px solid rgb(255 255 255 / 0.1);
    }
  }
  @media (hover: none) { .look__view-close { width: 2.75rem; height: 2.75rem; } }
  @media (prefers-reduced-motion: reduce) {
    .look__view, .look__view img { transition: none; } .look__view img, .look__view.is-long img { transform: none; }
    .look__stop .look__shadow { transition-property: opacity; }  /* the lift fades, it doesn't move */
  }
  /* printed solid in orange (tone): the print stays full strength, never dimmed with the paper */
  .look__stop.is-toned .look__shots { position: relative; z-index: 2; }  /* above the paper's grain and light, so black stays black */
  .look__stop.is-toned .look__shots img { border-radius: 0; }
  .look__stop.is-toned:not(.is-active) .look__paper > .look__shots { opacity: 0.85; }
  .look__said {
    margin: 0 0 0.7rem; padding-left: 0.7rem; border-left: 1px solid color-mix(in srgb, var(--slip-ink) 40%, transparent);
    font: italic 300 0.98rem / 1.35 var(--font-serif);
  }
  .look__said span { display: block; font: normal 0.55rem / 1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
  .look__text { margin: 0; font: 300 0.98rem / 1.42 var(--font-serif); }

  /* ── The introduction: straight on the fog, flush left, the log away, the path off to the right ── */
  :root { --intro-left: clamp(1.5rem, 7vw, 7rem); }
  .look__intro {
    position: absolute; z-index: 2; left: var(--intro-left); top: 50%; width: min(30.6rem, calc(100vw - 3rem));  /* 15% narrower than it was */
    transform: translate(0, -50%);
    color: color-mix(in srgb, var(--back-ink) 86%, transparent);
    font: 300 1.2rem / 1.5 var(--font-serif);
    text-wrap: pretty;
    filter: blur(calc(var(--ink-blur) * var(--blur-scale)));
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease), visibility 0s linear 0.9s;
  }
  /* only while the path is open: a child set visible would show through the closed path */
  :root.look-open .look.is-intro .look__intro { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  /* leaving, it drifts left and out of focus, the way the path then moves */
  .look:not(.is-intro) .look__intro { transform: translate(-6rem, -50%); filter: blur(8px); }
  .look__intro-title {
    margin: 0 0 1.6rem;
    /* the same headline as a main sheet in the pile: size, leading, tracking, blur */
    font: 400 min(calc(var(--slip-aside-size) * 1.1), 9.5vw) / calc(var(--slip-aside-leading) + 0.16) var(--font-display); letter-spacing: -0.025em;  /* more leading than the pile's */
    text-transform: uppercase; color: var(--back-ink);
    white-space: pre-line;  /* a \n in the title breaks the line */
    filter: blur(calc(var(--headline-blur) * var(--blur-scale)));
  }
  .look__intro p { margin: 0 0 1em; }
  /* the closing note: set on the fog like the intro, after the last sheet */
  .look__outro {
    position: absolute; z-index: 2; top: var(--track-mid); width: var(--outro-w);
    left: calc((100vw - var(--log-w)) / 2 + (var(--count) - 1) * var(--look-step) + var(--outro-gap));
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--back-ink) 86%, transparent);
    font: 300 1.2rem / 1.5 var(--font-serif); text-wrap: pretty;
  }
  .look__outro p { margin: 0 0 1em; }
  .look__count-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.6rem; margin: 1.6rem 0; }
  .look__count-list div { margin: 0; transition: opacity 400ms var(--ease), translate 500ms var(--ease); transition-delay: calc(var(--k, 0) * 60ms); }
  /* hidden only once the script has said it will reveal them: without it they just show */
  .look.has-outro-reveal .look__outro:not(.is-reached) .look__count-list div { opacity: 0; translate: 0 0.6rem; }
  .look__count-list dt { font: 400 2.1rem / 1 var(--font-display); letter-spacing: -0.03em; color: var(--burn-ink); font-variant-numeric: proportional-nums; }  /* set tight: proportional figures (tabular ones leave gaps round a 1) */
  .look__count-list dd { margin: 0.35rem 0 0; font: 0.72rem / 1.4 var(--font-mono); letter-spacing: 0.02em; opacity: 0.75; }
  .look__outro-foot { font: 0.72rem / 1.5 var(--font-mono); letter-spacing: 0.02em; opacity: 0.6; }
  .look.is-intro .look__outro { opacity: 0; }
  /* short screens (laptops with little height, phones on their side): stacked, the
     note is taller than the room; side by side, a step apart, like an upright phone */
  @media (max-height: 720px) and (min-width: 768px), (max-height: 720px) and (orientation: landscape) {
    :root { --outro-col-gap: 3rem; --outro-more: calc(var(--outro-w) + var(--outro-col-gap)); }
    .look__outro { display: flex; align-items: flex-start; gap: var(--outro-col-gap); width: auto; font-size: 1rem; }
    .look__outro-col { flex: none; width: var(--outro-w); }
    .look__outro .look__intro-title { font-size: 2rem; margin-bottom: 0.9rem; }
    .look__count-list { margin: 0 0 1.2rem; gap: 1rem 1.4rem; }
    .look__count-list dt { font-size: 1.8rem; }
  }
  .look__intro-go {
    margin-top: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--burn-ink);
  }
  .look__intro-go span { display: inline-block; }
  /* only while the intro shows: a hidden infinite animation restyles the page every frame */
  :root.look-open .look.is-intro .look__intro-go span { animation: look-nudge 1.8s var(--ease) infinite; }
  @keyframes look-nudge { 50% { transform: translateX(0.35rem); } }

  .look__log { transition: transform 0.9s var(--ease); }
  .look__track { transition: opacity 0.6s var(--ease), transform 1s var(--ease); }
  :root.look-open .look.is-intro .look__log { --log-on: 0; transform: translateX(3rem); pointer-events: none; }
  .look.is-intro .look__track { transform: translateX(var(--intro-push)); }
  /* far enough that the first sheet never touches the intro's text */
  /* the first sheet waits just past the text's right edge (a sheet is at most ~11.5rem
     either side of its middle), and the path moves at least a little on the way in */
  :root { --intro-push: max(4rem, calc(var(--intro-left) + 54rem - (100vw - var(--log-w)) / 2)); }  /* the first sheet sits well clear of the text */
  /* closing from the intro: it goes quickly, so it never doubles over the essay */
  :root:not(.look-open) .look__intro { transition-duration: 0.25s; }

  /* ── The bar ── */
  .look__bar {
    position: absolute; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; z-index: 3;
    font: 0.72rem var(--font-mono); color: color-mix(in srgb, var(--back-ink) 72%, transparent);
    touch-action: none;
  }
  .look__now { color: var(--burn-ink); }
  .look__nav { display: flex; gap: 0.2rem; }
  .look__nav button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 99px; background: none; color: inherit; cursor: pointer; }
  .look__nav button:hover { color: var(--back-ink); background: color-mix(in srgb, var(--back-ink) 10%, transparent); }
  .look__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .look__nav [data-sound-switch] svg { width: 1.1rem; height: 1.1rem; }

  /* ── Phones: the path on top, the log burnt in below it ── */
  @media (max-width: 767px) and (orientation: portrait) {
    :root { --log-w: 0px; --log-h: var(--log-h-set, 38vh); --look-step: 14.5rem; --look-lane: 2.5vh; --look-y: 0.2vh; --outro-gap: 11rem; --stop-w: 15rem; --stop-shot-w: 16.5rem; }
    /* the path runs through the space above the bar; the log's scrim covers the rest */

    .look__paper { max-height: 50vh; }
    .look__log { top: auto; left: 0; right: 0; width: auto; height: var(--log-h); padding: 2.6rem 1.3rem calc(0.9rem + env(safe-area-inset-bottom, 0px)) 1.4rem; }
    /* the scrim rises out of transparent above the log instead of starting on a line */
    .look__log::before, .look__log::after { top: -7rem; width: 100%; }
    .look__log::before { background: linear-gradient(transparent, rgb(12 12 12 / 0.3) 4rem, rgb(12 12 12 / 0.65) 8.7rem, rgb(12 12 12 / 0.8)); }
    .look__log::after { -webkit-mask-image: linear-gradient(transparent, #000 9rem); mask-image: linear-gradient(transparent, #000 9rem); }
    .look__panel, .look__warp { inset: 1.7rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); border-radius: 18px; }
    /* on a phone the grip lies along the panel's top: pull it up for more of the conversation */
    .look__grip { top: 1.15rem; bottom: auto; left: 0.5rem; right: 0.5rem; width: auto; height: 1.1rem; cursor: ns-resize; }
    .look__grip span { width: 3.6rem; height: 3px; opacity: 0.45; transform: scaleX(0.72); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
    .look__grip:focus-visible span, .look.is-resizing .look__grip span { opacity: 0.9; transform: none; }
    .look.is-resizing { cursor: ns-resize; }
    /* on a phone the blur deepens downward, from the scrim's top into the log */
    .look__blur { top: -7rem; bottom: auto; left: 0; width: 100%; height: 8.7rem;  /* ends where the panel begins */ }
    .look__blur i:nth-child(1) { -webkit-mask-image: linear-gradient(transparent, #000 4rem); mask-image: linear-gradient(transparent, #000 4rem); }
    .look__blur i:nth-child(2) { -webkit-mask-image: linear-gradient(transparent 2rem, #000 6.5rem); mask-image: linear-gradient(transparent 2rem, #000 6.5rem); }
    .look__blur i:nth-child(3) { -webkit-mask-image: linear-gradient(transparent 4rem, #000 9rem); mask-image: linear-gradient(transparent 4rem, #000 9rem); }
    /* and the top of the screen fades too, so a sheet never meets a hard edge */
    .look__track::before { content: none; }
    .look::after {
      content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4.5rem; z-index: 2; pointer-events: none;
      background: linear-gradient(rgb(12 12 12 / 0.75), transparent);
      opacity: 0; transition: opacity 0.6s var(--ease);
    }
    :root.look-open .look::after { opacity: 1; }
    .look__log-list { padding: 1rem 0 0 0.2rem; --log-tail: 30vh; }
    /* the bar sits between the path and the log */
    .look__bar { bottom: calc(var(--log-h) - 1.4rem); z-index: 3; }
    .look__paper { max-height: 54vh; padding: 0.9rem 1rem 1rem; }
    .look__shots img { max-height: 14vh; object-fit: cover; object-position: top; }
    .look__shots { margin-bottom: 0.6rem; }
    .look__said { font-size: 0.85rem; margin-bottom: 0.5rem; }
    .look__title { font-size: 1.25rem; }
    .look__text, .look__said { font-size: 0.9rem; }
    /* the bar spans the width: the count flush left, the arrows flush right */
    .look__bar { left: 1rem; right: 1rem; transform: none; justify-content: space-between; }
    :root { --intro-push: 94vw; }
    /* the log's header on one line, so more of the conversation shows */
    .look__log { height: var(--log-h); padding-top: 2.6rem; }
    .look__log-head { flex-direction: column; align-items: flex-start; row-gap: 0.45rem; padding-bottom: 0.5rem; }
    .look__log-head > span:first-child { display: none; }
    .look__filter { margin-top: 0; }  /* flush left, under the count */
    .look__log-list { padding-top: 0.6rem; }
    .look__bar { bottom: calc(var(--log-h) - 1.4rem); }
    :root { --track-mid: calc((100% - var(--log-h) - 1.4rem) / 2); }
    .look__intro { font-size: 1.02rem; top: 46%; }
    /* the closing note in two columns along the path, a swipe apart: the words,
       then the count. Each fits the room above the panel (and scrolls inside,
       faded at the foot, if a very short screen leaves too little) */
    :root { --outro-col-gap: 3rem; --outro-more: calc(var(--outro-w) + var(--outro-col-gap)); }
    .look__outro {
      display: flex; gap: var(--outro-col-gap); width: auto;
      font-size: 0.98rem; line-height: 1.45;
      top: calc(4.2rem + env(safe-area-inset-top, 0px)); transform: none;
    }
    .look__outro-col {
      flex: none; width: var(--outro-w);
      max-height: calc(100dvh - var(--log-h) - 4.2rem - 3rem - env(safe-area-inset-top, 0px));
      overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
      -webkit-mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent);
      padding-bottom: 1.5rem;
    }
    .look__outro-col::-webkit-scrollbar { display: none; }
    .look__outro .look__intro-title { font-size: 2rem; margin-bottom: 0.9rem; }
    .look__count-list { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.2rem; margin: 0 0 1.2rem; }
    .look__count-list dt { font-size: 1.9rem; }
    .look__count-list dd { font-size: 0.7rem; }
    .look__intro-title { margin-bottom: 1.1rem; }
    /* during the intro the bar waits at the bottom, clear of the text */
    /* moved by transform (from its place above the log down to the screen's foot), not by bottom */
    /* the count and arrows move, not the bar: a transform on the bar would carry the × (fixed, top-left) with it */
    .look.is-intro :is(.look__count, .look__nav button:not([data-look-close])) { translate: 0 calc(var(--log-h) - 2.5rem - env(safe-area-inset-bottom, 0px)); }
    /* × goes to the top-left corner of the screen */
    .look__nav [data-look-close] { position: fixed; top: calc(0.75rem + env(safe-area-inset-top, 0px)); left: 0.75rem; }
    /* the arrows and × sit on frosted discs, so whatever passes behind them is ghosted */
    .look__nav button {
      background: rgb(20 20 20 / 0.5);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 0.5px solid rgb(255 255 255 / 0.1);
    }
    .look__nav { gap: 0.5rem; }
    .look__count { transition: translate 0.4s var(--ease); }
    .look__nav button { transition: translate 0.4s var(--ease), transform 160ms var(--ease); }
  }

  /* short screens: the intro a size down, so all of it fits between the top and the bar */
  @media (max-height: 760px) {
    .look__intro { font-size: 0.98rem; line-height: 1.45; }
    .look__intro p { margin-bottom: 0.8em; }
    .look__intro-title { font-size: min(2.6rem, 9vw); margin-bottom: 1rem; }
    .look__intro-go { margin-top: 0.8rem; }
  }
  /* small upright phones: smaller still, and centred a little low, clear of the × */
  @media (max-width: 767px) and (orientation: portrait) and (max-height: 760px) {
    .look__intro { font-size: 0.9rem; top: calc(50% + 1rem); }
  }
  @media (max-height: 560px) {
    .look__intro { font-size: 0.86rem; line-height: 1.4; width: min(40rem, calc(100vw - 3rem)); }
    .look__intro-title { font-size: 1.5rem; margin-bottom: 0.6rem; }
    .look__intro-go { margin-top: 0.4rem; }
    .look__shots img { max-height: 18vh; object-fit: cover; object-position: top; }
    .look__log { padding-top: 1.7rem; }
    /* a sheet's words in a smaller size, so they fit the little height there is */
    .look__paper { max-height: calc(100dvh - 5.5rem); padding: 0.8rem 0.95rem 0.9rem; }
    .look__title { font-size: 1.05rem; }
    .look__text, .look__said { font-size: 0.8rem; line-height: 1.38; }
    .look__said { margin-bottom: 0.4rem; }
    .look__shots { margin-bottom: 0.5rem; }
  }
  /* bigger targets for fingers */
  @media (hover: none) {
    .look__nav button { width: 2.75rem; height: 2.75rem; }
    .look__intro-go { padding: 0.8rem 0; }
    .look__filter button { padding: 0.5rem 0.8rem; }
    .look__mark { padding: 0.25rem 0.45rem; }
    .look__filter button { padding: 0.65rem 0.85rem; }
    .look__real { width: 2.4rem; height: 2.4rem; }
    /* reach past the drawn edge, so a fingertip lands without the button growing */
    :is(.look__real, .look__mark)::after { content: ""; position: absolute; inset: -0.4rem; }
    .look__mark { position: relative; }
    .look__grip::before { content: ""; position: absolute; inset: -0.7rem 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .look__stop, .look__line, .look__veil, .look__log, .look__track, .look__bar { transition: none; }
    /* no slide, but the intro still fades: a hard cut is harder to follow than a fade */
    .look__intro { transition: opacity 200ms var(--ease), visibility 200ms; }
    .look__count-list div { transition: opacity 200ms var(--ease); transition-delay: 0s; }
    .look.has-outro-reveal .look__outro:not(.is-reached) .look__count-list div { translate: none; }
    .look__panel i { animation: none; opacity: 0.75; }
    .look__intro-go span { animation: none; }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .look__veil { background: #0c0c0cf2; }
    .look__paper { background: #efefef; }
    .look__line { filter: none; opacity: 0.7; }
    .look__panel { background: rgb(12 10 9 / 0.96); }
    .look__warp { display: none; }
  }#article-root[data-astro-cid-z7xolria] {
  transition: opacity .3s;
}

html:not(.fonts-ready) #article-root[data-astro-cid-z7xolria] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #article-root[data-astro-cid-z7xolria] {
    transition: none;
  }
}

.topbar[data-astro-cid-z7xolria] {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--bg);
  font-family: var(--font-text);
  font-size: .9rem;
}

.topbar__crumb[data-astro-cid-z7xolria] {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--fg-muted);
}

.topbar__home[data-astro-cid-z7xolria] {
  display: inline-flex;
  align-items: center;
  gap: .32em;
  color: var(--fg-muted);
  transition: color .2s var(--ease);
}

.topbar__arrow[data-astro-cid-z7xolria] {
  width: .85em;
  height: .85em;
}

.topbar__home[data-astro-cid-z7xolria]:hover {
  color: var(--fg);
}

.topbar__sep[data-astro-cid-z7xolria] {
  color: var(--fg-dim);
}

.topbar__here[data-astro-cid-z7xolria] sup[data-astro-cid-z7xolria] {
  font-size: .68em;
  margin-left: .1em;
  line-height: 0;
}

.topbar__share[data-astro-cid-z7xolria] {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color .2s var(--ease);
}

.topbar__share[data-astro-cid-z7xolria]:hover, .topbar__share[data-astro-cid-z7xolria].is-copied {
  color: var(--fg);
}

.topbar__actions[data-astro-cid-z7xolria] {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.topbar__theme[data-astro-cid-z7xolria] {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color .2s var(--ease);
}

.topbar__theme[data-astro-cid-z7xolria]:hover {
  color: var(--fg);
}

.topbar__theme[data-astro-cid-z7xolria] .theme-icon[data-astro-cid-z7xolria] {
  width: .99rem;
  height: .99rem;
  display: block;
}

.topbar__theme[data-astro-cid-z7xolria], .topbar__share[data-astro-cid-z7xolria] {
  position: relative;
}

.topbar__theme[data-astro-cid-z7xolria]:after, .topbar__share[data-astro-cid-z7xolria]:after {
  content: "";
  position: absolute;
  inset: -.85rem -.5rem;
}

[data-astro-cid-z7xolria]:is(.topbar__home, .topbar__share, .topbar__theme):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

:root[data-theme="light"] .theme-icon[data-astro-cid-z7xolria] {
  transform: scaleX(-1);
}

.toc[data-astro-cid-z7xolria] {
  position: fixed;
  left: clamp(1.25rem, 3vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  max-width: 12rem;
  z-index: 15;
}

.toc__link[data-astro-cid-z7xolria] {
  font-family: var(--font-text);
  font-size: .9rem;
  line-height: 1.25;
  color: var(--fg-dim);
  transition: color .2s var(--ease);
  align-self: stretch;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc__link[data-astro-cid-z7xolria]:hover {
  color: var(--fg-muted);
}

.toc__link[data-astro-cid-z7xolria].is-active {
  color: var(--fg);
}

@media (width <= 1100px) {
  .toc[data-astro-cid-z7xolria] {
    display: none;
  }
}

.article[data-astro-cid-z7xolria] {
  max-width: 40rem;
  margin: 0 auto;
  padding-top: clamp(2.5rem, 8vh, 5rem);
  padding-bottom: clamp(5rem, 16vh, 10rem);
  padding-left: clamp(1.25rem, 5vw, 2rem);
  padding-right: clamp(1.25rem, 5vw, 2rem);
}

.article__title[data-astro-cid-z7xolria] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--fg);
  margin-bottom: .6rem;
}

.article__meta[data-astro-cid-z7xolria] {
  font-family: var(--font-text);
  font-size: .8rem;
  color: var(--fg-dim);
}

.article__rule[data-astro-cid-z7xolria] {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 1.75rem 0 2.25rem;
}

.article__prose[data-astro-cid-z7xolria] {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 2.3vw, 1.28rem);
  line-height: 1.46;
  color: var(--fg);
}

.article__prose[data-astro-cid-z7xolria] p[data-astro-cid-z7xolria] {
  margin-bottom: 1.4em;
}

.article__prose[data-astro-cid-z7xolria] p[data-astro-cid-z7xolria]:last-child {
  margin-bottom: 0;
}

.article__follow[data-astro-cid-z7xolria] {
  margin-top: 6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}

.article__follow[data-astro-cid-z7xolria] p[data-astro-cid-z7xolria] {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 2.3vw, 1.28rem);
  color: var(--fg);
  margin-bottom: .9rem;
}

.article__follow-links[data-astro-cid-z7xolria] {
  display: flex;
  gap: .6rem;
}

.article__follow-links[data-astro-cid-z7xolria] a[data-astro-cid-z7xolria] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: #ffffff1a;
  color: #ffffffb3;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.article__follow-links[data-astro-cid-z7xolria] a[data-astro-cid-z7xolria]:hover {
  background: #fff3;
  color: #fff;
}

:root[data-theme="light"] .article__follow-links[data-astro-cid-z7xolria] a[data-astro-cid-z7xolria] {
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  color: var(--glass-ink);
}

:root[data-theme="light"] .article__follow-links[data-astro-cid-z7xolria] a[data-astro-cid-z7xolria]:hover {
  background: var(--glass);
  color: var(--glass-ink);
}

.article__follow-links[data-astro-cid-z7xolria] svg[data-astro-cid-z7xolria] {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.article__h[data-astro-cid-z7xolria] {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--fg);
  margin: 2.6rem 0 1.1rem;
  scroll-margin-top: 5.5rem;
}

.article__figure[data-astro-cid-z7xolria] {
  margin: 2rem 0;
}

.article__figure[data-astro-cid-z7xolria] img[data-astro-cid-z7xolria] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: zoom-in;
}

.article__figure[data-astro-cid-z7xolria] video[data-astro-cid-z7xolria] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.article__caption[data-astro-cid-z7xolria] {
  margin-top: .6rem;
  font-family: var(--font-text);
  font-size: .8rem;
  color: var(--fg-muted);
}

.article__caption[data-astro-cid-z7xolria] a[data-astro-cid-z7xolria] {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.article__tweet[data-astro-cid-z7xolria] {
  display: block;
  margin: 2rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color .2s var(--ease), background-color .25s var(--ease);
}

.article__tweet[data-astro-cid-z7xolria]:hover {
  border-color: #ffffff40;
  background-color: #ffffff1a;
}

:root[data-theme="light"] .article__tweet[data-astro-cid-z7xolria]:hover {
  border-color: #00000040;
  background-color: #0000000a;
}

.article__tweet[data-astro-cid-z7xolria] + .article__tweet[data-astro-cid-z7xolria] {
  margin-top: -1rem;
}

.article__tweet-head[data-astro-cid-z7xolria] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-text);
  font-size: .85rem;
  margin-bottom: .8rem;
}

.article__tweet-id[data-astro-cid-z7xolria] {
  display: inline-flex;
  align-items: center;
  gap: .55em;
}

.article__tweet-avatar[data-astro-cid-z7xolria] {
  width: 1.9em;
  height: 1.9em;
  border-radius: 6px;
  object-fit: cover;
}

.article__tweet-name[data-astro-cid-z7xolria] {
  color: var(--fg);
}

.article__tweet-handle[data-astro-cid-z7xolria] {
  color: var(--fg-muted);
}

.article__tweet-cta[data-astro-cid-z7xolria] {
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.article__tweet-cta[data-astro-cid-z7xolria] svg[data-astro-cid-z7xolria] {
  width: .9em;
  height: .9em;
  margin-left: .04em;
}

.article__tweet[data-astro-cid-z7xolria]:hover .article__tweet-cta[data-astro-cid-z7xolria] {
  color: var(--fg);
}

.article__tweet[data-astro-cid-z7xolria] video[data-astro-cid-z7xolria] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.article__figure[data-astro-cid-z7xolria] .article__widget[data-astro-cid-z7xolria] {
  margin: 0;
}

.lightbox[data-astro-cid-z7xolria] {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: #000000eb;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  cursor: zoom-out;
}

.lightbox[data-astro-cid-z7xolria].is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox[data-astro-cid-z7xolria] img[data-astro-cid-z7xolria] {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.article__widget[data-astro-cid-z7xolria] {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3.55;
}

.article__widget[data-astro-cid-z7xolria] iframe[data-astro-cid-z7xolria] {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.article__demo[data-astro-cid-z7xolria] {
  width: min(72rem, 100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

.article__demo-frame[data-astro-cid-z7xolria] {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.article__demo-frame[data-astro-cid-z7xolria] iframe[data-astro-cid-z7xolria] {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
}

.article__demo-frame[data-astro-cid-z7xolria].is-mobile {
  aspect-ratio: 9 / 16;
}

.article__demo-frame[data-astro-cid-z7xolria].is-mobile iframe[data-astro-cid-z7xolria] {
  width: 100%;
  height: 100%;
}

.demo-cap--mobile[data-astro-cid-z7xolria] {
  display: none;
}

@media (width <= 767px), (hover: none) and (pointer: coarse) {
  .demo-cap--desktop[data-astro-cid-z7xolria] {
    display: none;
  }

  .demo-cap--mobile[data-astro-cid-z7xolria] {
    display: inline;
  }
}

.article__grid[data-astro-cid-z7xolria] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.article__grid[data-astro-cid-z7xolria] img[data-astro-cid-z7xolria] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: zoom-in;
}

.article__prose[data-astro-cid-z7xolria] code, .article__code[data-astro-cid-z7xolria] {
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: .78em;
}

.article__prose[data-astro-cid-z7xolria] p code {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--surface);
}

.article__code[data-astro-cid-z7xolria] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 1.4em;
  padding: .9rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  line-height: 1.6;
  font-size: .72em;
}

.article__code[data-astro-cid-z7xolria] + .article__code[data-astro-cid-z7xolria] {
  margin-top: -.75em;
}

.article__code[data-astro-cid-z7xolria] pre[data-astro-cid-z7xolria] {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  font: inherit;
}

.article__copy[data-astro-cid-z7xolria] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6em;
  background: none;
  border: 0;
  padding: 0 0 0 .25rem;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color .2s var(--ease);
}

.article__copy[data-astro-cid-z7xolria]:hover, .article__copy[data-astro-cid-z7xolria].is-copied {
  color: var(--fg);
}

.article__copy[data-astro-cid-z7xolria] svg[data-astro-cid-z7xolria] {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article__copy-done[data-astro-cid-z7xolria] {
  display: none !important;
}

.article__copy[data-astro-cid-z7xolria].is-copied .article__copy-icon[data-astro-cid-z7xolria] {
  display: none;
}

.article__copy[data-astro-cid-z7xolria].is-copied .article__copy-done[data-astro-cid-z7xolria] {
  display: block !important;
}

.article__prose[data-astro-cid-z7xolria] a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}

.article__table[data-astro-cid-z7xolria] {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.article__table[data-astro-cid-z7xolria] th[data-astro-cid-z7xolria] {
  text-align: left;
  font-weight: 400;
  color: var(--fg-muted);
}

.article__table[data-astro-cid-z7xolria] th[data-astro-cid-z7xolria], .article__table[data-astro-cid-z7xolria] td[data-astro-cid-z7xolria] {
  padding: .55rem .75rem .55rem 0;
  border-bottom: 1px solid var(--hairline);
}

.article__table[data-astro-cid-z7xolria] th[data-astro-cid-z7xolria]:not(:first-child), .article__table[data-astro-cid-z7xolria] td[data-astro-cid-z7xolria]:not(:first-child) {
  text-align: right;
}

@media (width <= 820px) {
  .article__h[data-astro-cid-z7xolria] {
    font-size: 1.62rem;
  }
}

@media (width <= 560px) {
  .article__widget[data-astro-cid-z7xolria] {
    aspect-ratio: 1 / 1.25;
  }
}