/* hero.css: the hero prototype and the page layer (the mask opens, the spine, behind the mask, the menu).
   Tokens per world switch on <html data-world="ll|gw">; phases on <html data-phase="loading|gate|intro|hero">.
   Cards keep their SIDE's material (LL paper, GW dark) whatever the world; the page chrome follows the world.
   Two curves only: punch (LL) and breath (GW). --lx = the spine (CSS px), --lx0 = the photo line at rest. */

@font-face { font-family: 'Bebas Neue'; src: url('/fonts/bebas-neue.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
/* the hand (the Architect's written words: the home's ABOUT ME; the song page declares the same faces) */
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin.7a0049db.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin-ext.93b3fdd6.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --punch: cubic-bezier(0.34, 1.56, 0.64, 1);
  --breath: cubic-bezier(0.65, 0, 0.35, 1);
  --d-hit: 160ms;
  --d-short: 320ms;
  --d-mid: 520ms;
  --d-long: 860ms;

  --paper: #f4f4f0;
  --ink: #0b0b0c;
  --cyan: #00e5ff;
  --gold: #eebd55;
  --night: #070708;
  --warm-white: #fff9f0;
  --p-orange: #ff5a1f;
  --p-magenta: #ff2e7e;
  --p-yellow: #ffd23f;
  --p-gold: #eebd55;

  --ll-card: #fbfaf5;
  --ll-ink: #0b0b0c;
  --ll-dim: #4a4740;
  --gw-card: #080b0e;
  --gw-fg: #e6f5f7;
  --gw-dim: #8da2a7;

  --display: 'Bebas Neue', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --gutter: 24px;
  --arm: 56px;
  --lx: 720;
  --lx0: 720;
  --ly1: 700;
  --fh: min(92vh, 980px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------- worlds */
html[data-world="ll"] {
  --fg: #0b0b0c;
  --dim: #46443f;
  --eyebrow: #46443f;
  --name-accent: #86601a;
  --line: #0b0b0c;
  --line-glow: 0 0 0 transparent;
  --hair: rgba(11, 11, 12, 0.2);
  --focus: #0b0b0c;
  --accent: #b23a00;           /* the paint accent as text (4.5:1 on paper) */
  --bar-bg: rgba(243, 240, 232, 0.9);
  --ease: var(--punch);
  --ease-d: var(--d-short);
  color-scheme: light;
}
html[data-world="gw"] {
  --fg: #eaf7f9;
  --dim: #8fa3a8;
  --eyebrow: #00e5ff;
  --name-accent: #c8d5d8;
  --line: #00e5ff;
  --line-glow: 0 0 6px rgba(0, 229, 255, 0.75), 0 0 16px rgba(0, 229, 255, 0.35);
  --hair: rgba(234, 247, 249, 0.2);
  --focus: #00e5ff;
  --accent: #00e5ff;
  --bar-bg: rgba(5, 7, 9, 0.86);
  --ease: var(--breath);
  --ease-d: var(--d-mid);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); }
body {
  font-family: var(--mono);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: pinch-zoom;          /* one finger drives the tear on the hero; the scroller allows pan-y */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ol, ul, dl, dd, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* the Worker's crawlable block (main > .ssr[data-ssr]: the page's words and links as plain HTML, for crawlers and
   fetchers without JavaScript): out of sight until the shell removes it before the page mounts (lifecycle.js dropSsr).
   Every page's <noscript> shows it instead (the no-JS reading page). Each value wins over a page's own child rules. */
.ssr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
  border: 0 !important;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }

.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.stage[hidden] { display: none; }
.still {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 48.39% 42%;
  display: block;
}
.still[hidden] { display: none; }

/* ---------------------------------------------------------------- scrim: keeps the hero and footer UI at 4.5:1 on any photo */
.scrim { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: calc(1 - var(--open, 0)); }
.scrim i { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-mid) var(--breath); }
.scrim-ll {
  background:
    radial-gradient(ellipse 46vw 36vh at 0% 100%, rgba(244, 244, 240, 0.94), rgba(244, 244, 240, 0.72) 45%, rgba(244, 244, 240, 0) 100%),
    radial-gradient(ellipse 40vw 34vh at 100% 100%, rgba(244, 244, 240, 0.94), rgba(244, 244, 240, 0.72) 45%, rgba(244, 244, 240, 0) 100%);
}
.scrim-gw {
  background:
    radial-gradient(ellipse 46vw 36vh at 0% 100%, rgba(3, 5, 7, 0.9), rgba(3, 5, 7, 0.6) 45%, rgba(3, 5, 7, 0) 100%),
    radial-gradient(ellipse 40vw 34vh at 100% 100%, rgba(3, 5, 7, 0.9), rgba(3, 5, 7, 0.6) 45%, rgba(3, 5, 7, 0) 100%);
}
.scrim-foot { opacity: 0 !important; }
html[data-phase="hero"][data-world="ll"] .scrim-ll,
html[data-phase="hero"][data-world="gw"] .scrim-gw { opacity: 1; }
html[data-world="ll"] .scrim-foot { background: linear-gradient(to top, rgba(244, 244, 240, 0.96) 0, rgba(244, 244, 240, 0.84) 22%, rgba(244, 244, 240, 0) 44%); }
html[data-world="gw"] .scrim-foot { background: linear-gradient(to top, rgba(3, 5, 7, 0.94) 0, rgba(3, 5, 7, 0.78) 22%, rgba(3, 5, 7, 0) 44%); }
html[data-phase="hero"] .scrim-foot { opacity: var(--foot, 0) !important; transition: none; }
/* the menu brings its own veil: the UI scrims would fog the doors */
html[data-phase="hero"][data-menu="opening"] .scrim i, html[data-phase="hero"][data-menu="open"] .scrim i,
html[data-phase="hero"][data-menu="closing"] .scrim i { opacity: 0 !important; }

/* ---------------------------------------------------------------- the scroller: real HTML over the fixed canvas */
.scroller {
  position: fixed; inset: 0; z-index: 2;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom;
  /* content fades out under the top bar, so the canvas-drawn mark is never covered */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 62px, #000 108px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 62px, #000 108px);
  transition: opacity 240ms var(--breath), visibility 0s linear 0s;
}
.scroller::-webkit-scrollbar { display: none; }
html:not([data-phase="hero"]) .scroller { overflow: hidden; }
html[data-menu="opening"] .scroller, html[data-menu="open"] .scroller, html[data-menu="closing"] .scroller {
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--breath), visibility 0s linear 200ms;
}
html.lenis, html.lenis body { height: auto; }
/* no overflow: clip while Lenis is stopped (the menu): on a wrapper element it would reset the scroll position */
.lenis.lenis-smooth iframe { pointer-events: none; }
.page { position: relative; }

/* ---------------------------------------------------------------- UI shell (top bar + player, fixed) */
.ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity var(--d-mid) var(--breath); }
html[data-phase="hero"] .ui { opacity: 1; }
.ui button, .ui a { pointer-events: auto; }

.top {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: max(18px, env(safe-area-inset-top));
  display: flex; justify-content: space-between; align-items: center;
}
/* the shell (js/shell/): the top bar settles into the next page's place while the page changes (the mark is drawn where
   it is measured, every frame of the change) */
.top { transition: top 420ms var(--breath); }
html[data-rm="1"] .top { transition: none; }
/* the mark, the way back beside it, and on the pages that have one the sound switch pushed to the right */
.top { justify-content: flex-start; gap: 0.85rem; }
.top > .sound { margin-left: auto; }

/* ---------------------------------------------------------------- the way back (js/shell/back.js, owner 2026-09-29)
   ONE control on every page but the home, always here: in the top bar, right after the corner mark (the one place clear
   of the page on every page and size: the mark's own row, above every header, and on the seam pages over the paper half).
   A song: <- All songs, an essay: <- Blog, every other page: <- Home. Its look is the world showing (html[data-world]: a
   world switch restyles it at its midpoint): the Architect's paper chip (an ink keyline and a hard ink shadow, pressed with
   PUNCH, the song page's chip the owner chose), the Ghostwriter's terminal tag (dark glass, a cyan hairline, the words
   lit). The arrow is drawn: one 9 px box holds the line (its middle row) and the head (a 7 px corner turned about its
   own centre, so its point lies on that row). */
.back {
  display: inline-flex; align-items: center; gap: 0.62rem; padding: 0.55rem 0.74rem 0.52rem 0.66rem;
  font: 600 0.6rem/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: opacity 200ms linear, color var(--d-hit) linear, background-color var(--d-hit) linear, border-color var(--d-hit) linear,
    box-shadow 160ms var(--punch), translate 160ms var(--punch);
}
.back[hidden] { display: none; }
.back i {
  display: block; flex: none; width: 18px; height: 9px; position: relative;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; transition: width var(--ease-d) var(--ease);
}
.back i::before { content: ''; position: absolute; left: 1px; top: 1px; width: 7px; height: 7px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.back:hover i, .back:focus-visible i { width: 28px; }
html[data-world="ll"] .back { color: var(--ink); background: rgba(251, 250, 244, 0.9); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
html[data-world="ll"] .back:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--p-magenta); }
html[data-world="ll"] .back:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
html[data-world="ll"] .back:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
html[data-world="gw"] .back {
  color: var(--gw-fg); background: rgba(5, 8, 10, 0.84); border-color: rgba(0, 229, 255, 0.4); border-radius: 3px;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.14), inset 0 0 12px rgba(0, 229, 255, 0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
html[data-world="gw"] .back i { color: var(--cyan); filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.8)); }
html[data-world="gw"] .back:hover, html[data-world="gw"] .back:focus-visible { color: #fff; border-color: var(--cyan); box-shadow: 0 0 20px rgba(0, 229, 255, 0.38), inset 0 0 14px rgba(0, 229, 255, 0.12); }
html[data-world="gw"] .back:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* the menu has its own way home (its small line): the chip steps aside while the menu is up */
html[data-menu="opening"] .back, html[data-menu="open"] .back, html[data-menu="closing"] .back { opacity: 0; pointer-events: none; }
html[data-rm="1"] .back, html[data-rm="1"] .back i { transition: opacity 200ms linear, color 200ms linear, background-color 200ms linear, border-color 200ms linear; }
html[data-rm="1"] .back:hover, html[data-rm="1"] .back:active { translate: none; }
/* the fold (js/shell/transition.js): the brush and the glitch slivers of a page folding into the line, over the page
   (the scroller 2, the rails 3, the menu 4 before it in the document) and under the chrome (.ui 5) */
.shell-fold { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 4; pointer-events: none; }
.shell-fold[hidden] { display: none; }
.mark { width: 44px; height: 44px; border-radius: 50%; position: relative; }
.mark::after {                 /* a hint ring on hover and focus: the mark is the menu */
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--hair); opacity: 0; transform: scale(0.8);
  transition: opacity var(--d-hit) linear, transform var(--ease-d) var(--ease);
}
.mark:hover::after, html[data-menu="open"] .mark::after { opacity: 1; transform: none; }
.mark::before {                /* while the menu is open the empty corner is the close control: a small x */
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: linear-gradient(45deg, transparent 46%, var(--fg) 46%, var(--fg) 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, var(--fg) 46%, var(--fg) 54%, transparent 54%);
  opacity: 0; transform: rotate(-45deg) scale(0.6); transition: opacity var(--d-hit) linear, transform var(--ease-d) var(--ease);
}
html[data-menu="open"] .mark::before { opacity: 1; transform: none; }
.mark:focus-visible { outline-offset: 6px; border-radius: 50%; }

.sound {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.2rem 0.55rem 0.6rem;
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg);
  transition: color var(--d-hit) linear;
}
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.sound-bars i { display: block; width: 2px; height: 2px; background: currentColor; transition: height var(--ease-d) var(--ease); }
html[data-sound="on"] .sound-bars i:nth-child(1) { height: 6px; }
html[data-sound="on"] .sound-bars i:nth-child(2) { height: 10px; transition-delay: 40ms; }
html[data-sound="on"] .sound-bars i:nth-child(3) { height: 4px; transition-delay: 80ms; }
html[data-menu="opening"] .sound, html[data-menu="open"] .sound, html[data-menu="closing"] .sound { opacity: 0; pointer-events: none; }
/* the menu has its own sound switch: the corner one steps aside (beats the hero entrance rule below) */
html[data-phase="hero"][data-menu="opening"] .sound, html[data-phase="hero"][data-menu="open"] .sound, html[data-phase="hero"][data-menu="closing"] .sound { opacity: 0; }

/* ---------------------------------------------------------------- the hero (first screen of the page) */
.hero-sec { position: relative; height: 100vh; height: 100svh; }
.name { position: absolute; left: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom)); pointer-events: none; }
/* the name is printed on the left half of the head: it rides out with it as the mask opens (--half: the halves as drawn) */
html[data-phase="hero"] .name { translate: calc(var(--half, 0) * (var(--lx0, 720) * -1px - 100% - var(--gutter))) 0; }
html[data-rm="1"] .name { translate: none; }
.eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.62rem; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--eyebrow);
  transition: color var(--d-hit) linear;
}
.title {
  display: flex; flex-direction: column;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 4.1rem); line-height: 0.86; letter-spacing: 0.02em;
  color: var(--fg);
  transition: color var(--d-hit) linear;
}
.title .t2 { color: var(--name-accent); transition: color var(--d-hit) linear; }
.title .i { color: var(--line); text-shadow: var(--line-glow); transition: color var(--d-hit) linear, text-shadow var(--d-hit) linear; }
.cue {
  /* just under the line's foot; the ink drop (worlds.js) is short enough to hang above the word */
  position: absolute; left: calc(var(--lx0) * 1px); top: calc(var(--ly1) * 1px + 26px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim);
  opacity: 0; transition: opacity 160ms linear;
  pointer-events: none;
}
/* in the Architect's world the cue sits on the chin's dark skin: light letters with a soft ink shadow (owner 2026-10-06:
   "the scroll label is very invisible") */
html[data-world="ll"] .cue { color: rgba(244, 244, 240, 0.92); text-shadow: 0 0 8px rgba(11, 11, 12, 0.55), 0 1px 1px rgba(11, 11, 12, 0.5); }
html[data-world="ll"] .cue i { background: linear-gradient(rgba(244, 244, 240, 0.95), transparent); box-shadow: 0 0 4px rgba(11, 11, 12, 0.35); }
.cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--line), transparent); transform-origin: 50% 0; animation: cue 2.2s var(--breath) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
html[data-phase="hero"] .cue { opacity: calc(1 - var(--open, 0) * 4); }
/* heat: the cue is long faded out once the bar condenses; its loop stops there (it would keep the compositor ticking) */
html[data-condensed="1"] .cue i { animation: none; }

/* ---------------------------------------------------------------- the player: bottom right on the hero, a hairline after */
.player {
  position: absolute; right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom));
  width: min(21.5rem, calc(100% - 2 * var(--gutter)));
  transition: width var(--ease-d) var(--ease), right var(--ease-d) var(--ease), bottom var(--ease-d) var(--ease),
              padding var(--ease-d) var(--ease), background-color var(--d-short) linear, opacity 200ms var(--breath);
}
.tracks-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--ease-d) var(--ease), opacity var(--d-hit) linear; }
/* the reel (main.js syncRows, owner 2026-10-06): the previous song, the one on (the middle, aria-current), the next one.
   A step slides the rows one pitch inside this window; the row leaving is taken out of the flow (position: absolute)
   while it slides out, so the list never changes height (phones show two rows: below) */
.tracks { position: relative; list-style: none; margin: 0 0 0.55rem; padding: 0; min-height: 0; overflow: hidden; }
.track-row[data-empty="1"] .track { visibility: hidden; }   /* no song either side yet: the row keeps its place */
.track {
  position: relative;
  display: grid; grid-template-columns: 10.2em minmax(0, 1fr) auto; align-items: center;   /* the side: ARCHITECT or GHOSTWRITER */
  width: 100%;
  padding: 0.62rem 0.2rem 0.62rem 0.85rem;
  font-size: 0.68rem; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; text-align: left;
  color: var(--dim);
  transition: color var(--d-hit) linear;
}
.track::before {
  content: ''; position: absolute; left: 0; top: 0.42rem; bottom: 0.42rem; width: 2px;
  background: var(--line); box-shadow: var(--line-glow);
  transform: scaleY(0); transform-origin: 50% 0%;
  transition: transform var(--ease-d) var(--ease), background-color var(--d-hit) linear;
}
.track[aria-current="true"] { color: var(--fg); }
.track[aria-current="true"]::before { transform: scaleY(1); }
.track:hover { color: var(--fg); }
/* the reel's window clips (.tracks: overflow hidden, for the slide and the condensed fold), so the keyboard's ring sits
   inside the row: outside it only a stray edge between two rows showed */
.track:focus-visible { outline-offset: -2px; }
.track .side { font-weight: 600; letter-spacing: 0.2em; }
.track[aria-current="true"] .side { color: var(--line); text-shadow: var(--line-glow); }
.track .len { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--dim); font-variant-numeric: tabular-nums; }

.transport { position: relative; display: flex; align-items: center; gap: 0.85rem; padding-left: 0.85rem; }
.pp {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  color: var(--fg);
  transition: border-color var(--d-hit) linear, color var(--d-hit) linear, transform var(--d-short) var(--ease), width var(--ease-d) var(--ease), height var(--ease-d) var(--ease);
}
.pp:hover { border-color: var(--fg); }
.pp:active { transform: scale(0.94); }
.pp svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.pp .i-pause { display: none; }
html[data-playing="1"] .pp .i-play { display: none; }
html[data-playing="1"] .pp .i-pause { display: block; }
.now {
  display: none; min-width: 0; flex: 1;
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now-side { color: var(--line); text-shadow: var(--line-glow); font-weight: 600; margin-right: 0.9em; }
.bar { position: relative; flex: 1; height: 1px; background: var(--hair); overflow: visible; }
.bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--line); box-shadow: var(--line-glow);
  transform-origin: 0 50%; transform: scaleX(0);
}
html[data-world="ll"] .bar i { top: -0.5px; bottom: -0.5px; }
.time { flex: none; min-width: 3.2em; text-align: right; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--dim); font-variant-numeric: tabular-nums; }

/* condensed: after the hero the player becomes the hairline on the bottom edge */
html[data-condensed="1"] .player {
  right: 0; bottom: 0; width: 100%;
  padding: 0.5rem var(--gutter) max(0.5rem, env(safe-area-inset-bottom));
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
html[data-condensed="1"] .tracks-wrap { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
html[data-condensed="1"] .tracks-wrap button { visibility: hidden; }
/* heat: the on-air dot of the hidden track list stops (the bar's own state still shows the radio) */
html[data-condensed="1"] .tracks-wrap .len::before { animation: none; }
html[data-condensed="1"] .transport { padding-left: 0; gap: 0.8rem; }
html[data-condensed="1"] .pp { width: 1.75rem; height: 1.75rem; }
html[data-condensed="1"] .now { display: block; }
html[data-condensed="1"] .bar { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -0.5rem; flex: none; }
html[data-menu="opening"] .player, html[data-menu="open"] .player, html[data-menu="closing"] .player { opacity: 0; pointer-events: none; }
html[data-menu="opening"] .player button, html[data-menu="open"] .player button, html[data-menu="closing"] .player button { visibility: hidden; }

/* entrance: the world's curve */
.name, .player, .sound { transform: translateY(14px); opacity: 0; transition: transform var(--d-long) var(--punch), opacity var(--d-mid) var(--breath); }
html[data-phase="hero"] .name, html[data-phase="hero"] .player, html[data-phase="hero"] .sound { transform: none; opacity: 1; }
html[data-phase="hero"] .player { transition: transform var(--d-long) var(--punch) 90ms, opacity var(--d-mid) var(--breath) 90ms,
  width var(--ease-d) var(--ease), right var(--ease-d) var(--ease), bottom var(--ease-d) var(--ease), padding var(--ease-d) var(--ease), background-color var(--d-short) linear; }
html[data-phase="hero"] .sound { transition-delay: 180ms; }
html[data-phase="hero"][data-menu="opening"] .player, html[data-phase="hero"][data-menu="open"] .player, html[data-phase="hero"][data-menu="closing"] .player { opacity: 0; }

/* ================================================================ the spine: chapters and rungs */
.chapter { position: relative; padding: 24vh 0 8vh; }
.chapter + .chapter { padding-top: 20vh; }

.rung, .door-row, .foot-row {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr);
}

/* ---------------------------------------------------------------- the headers: whole words that fly in (page-fx.js)
   Centred ON the spine, never cut by it: on desktop the living line yields around them (s.lineGaps). Each header
   carries both languages: .side-ll (ink over an SFV paint ribbon, a brush swipe from the left, PUNCH) and .side-gw
   (light, RGB-split slices from the right, BREATH). The world shows one; the blog's seam shows both, split at the line. */
.page { overflow-x: clip; }       /* ribbons and splayed tines never widen the page */
.ch-head {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  margin: 0 0 10vh calc(var(--lx) * 1px); translate: -50% 0;
}
.ch-meta {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.8rem; width: 100%; min-width: 18rem;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.4rem;
}
.ch-meta > :first-child { justify-self: end; }
.ch-meta > :last-child { justify-self: start; }
.ch-no { color: var(--accent); font-weight: 600; }
.ch-title {
  font-family: var(--display); font-weight: 400; line-height: 0.8;
  font-size: clamp(5.5rem, 15.5vw, 17rem); letter-spacing: 0.005em; color: var(--fg);
}
.ch-title--md { font-size: clamp(4rem, 9.2vw, 10rem); }
.ch-title--sub { font-size: clamp(3rem, 6.2vw, 6.6rem); }
.ch-title--band { font-size: clamp(4.6rem, 12.5vw, 13.5rem); }
.ch-w { position: relative; display: inline-grid; }
.side { grid-area: 1 / 1; position: relative; display: block; isolation: isolate; text-align: center; }
.w, .slice { display: block; white-space: nowrap; padding: 0.03em 0.06em 0; }
/* LL: ink with a paper keyline, so it holds over the ribbon's hue-shadow */
.w-ll {
  color: var(--ll-ink);
  --k: #f6f3ec;
  text-shadow: 0.028em 0 0 var(--k), -0.028em 0 0 var(--k), 0 0.028em 0 var(--k), 0 -0.028em 0 var(--k),
    0.02em 0.02em 0 var(--k), -0.02em 0.02em 0 var(--k), 0.02em -0.02em 0 var(--k), -0.02em -0.02em 0 var(--k);
}
/* GW: light, tracked, lit by the line */
.w-gw, .slice { color: var(--gw-fg); letter-spacing: 0.05em; }
.w-gw { text-shadow: 0 0 2px rgba(0, 229, 255, 0.45), 0 0 26px rgba(0, 229, 255, 0.32); }
.slices { position: absolute; inset: 0; display: none; pointer-events: none; }
.slice { position: absolute; left: 0; right: 0; top: 0; will-change: transform, opacity; }
.fx-root[data-gw="play"] .slices { display: block; }
.fx-root[data-gw="idle"] .w-gw, .fx-root[data-gw="play"] .w-gw { opacity: 0; }
.fx-root[data-ll="idle"] .w-ll { opacity: 0; }
.fx-root[data-ll="idle"] .ribbon { visibility: hidden; }
/* the ribbon sits behind the word, swept along the strike */
.ribbon { position: absolute; display: block; overflow: visible; pointer-events: none; z-index: -1; }
.ribbon--word { left: -16%; width: 132%; top: 11%; height: 95%; }
.rb-chip { transform-box: fill-box; transform-origin: center; transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--spin)) scale(0); transition: transform 380ms var(--punch); }
.rb-chip.on { transform: none; }
html[data-paint="muted"] .ribbon { filter: saturate(0.42) brightness(1.1) contrast(0.88); opacity: 0.78; }
/* one language per world */
html[data-world="ll"] .fx-root .side-gw { display: none; }
html[data-world="gw"] .fx-root .side-ll, html[data-world="gw"] .side-ll-only { display: none; }
/* the seam: paint from the left and glitch from the right meet at the line (phones too: the line moves to the middle) */
html[data-seam="1"] .fx-root[data-seam] .side-ll { display: block; clip-path: inset(-120% 50% -120% -60%); }
html[data-seam="1"] .fx-root[data-seam] .side-gw { display: block; clip-path: inset(-120% -60% -120% 50%); }
html[data-seam="1"] .fx-root[data-seam] .w, html[data-seam="1"] .fx-root[data-seam] .slice { letter-spacing: 0.03em; }
.ch-lead {
  position: relative; margin-top: 2.2rem; max-width: 36rem;
  font-family: var(--body); font-size: 1.14rem; line-height: 1.6; color: var(--fg); text-wrap: pretty;
}
.ch-head--sub { margin-bottom: 8vh; }
/* the owner's words (js/copy.js): while the one settings request is out (at most 0.8 s) the marked words and their tags
   keep their place unseen, so a saved text never shows its default first; a line break in a phrasing element (.copy-p) */
html[data-copy-state="wait"] [data-copy], html[data-copy-state="wait"] [data-copy-tag] { visibility: hidden; }
.copy-p { display: block; }
.copy-p + .copy-p { margin-top: 0.7em; }
/* draft copy: the owner rewrites it (a tag with data-copy-tag hides once every one of its keys has a saved value) */
.draft-tag {
  display: inline-block; vertical-align: 0.2em; margin-left: 0.75em; padding: 0.24rem 0.46rem 0.2rem;
  font-family: var(--mono); font-size: 0.5rem; font-weight: 600; font-style: normal; line-height: 1;
  letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent); border: 1px dashed currentColor; border-radius: 2px;
}
/* a rung: the card hangs off the line; LL left, GW right (mobile: all right of the left-edge spine) */
.rungs { position: relative; }
.rung { position: relative; margin-bottom: 3.2rem; }
.rung.swap { margin-top: calc(var(--overlap, 48px) * -1); }
.card { position: relative; width: min(100%, var(--card-w, 27rem)); }
.rung--ll .card { grid-column: 1; justify-self: end; margin-right: var(--arm); }
.rung--gw .card { grid-column: 2; justify-self: start; margin-left: var(--arm); }
.rung-arm {
  position: absolute; top: 50%; width: var(--arm); height: 2px; margin-top: -1px;
  transition: transform var(--d-mid) var(--ease);
}
.rung--ll .rung-arm { left: calc(var(--lx) * 1px - var(--arm)); transform-origin: 100% 50%; background: var(--ll-ink); }
.rung--gw .rung-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; height: 1px; margin-top: -0.5px; background: var(--cyan); box-shadow: 0 0 6px rgba(0, 229, 255, 0.7); }
html[data-world="gw"] .rung--ll .rung-arm { background: #e8e4da; }
.rung-node {
  position: absolute; left: calc(var(--lx) * 1px); top: 50%; z-index: 1;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
}
.rung--ll .rung-node { background: var(--ll-ink); box-shadow: 0 0 0 3px var(--paint, var(--p-magenta)); }
html[data-world="gw"] .rung--ll .rung-node { background: #e8e4da; }
.rung--gw .rung-node { background: #dffcff; box-shadow: 0 0 0 2px var(--night), 0 0 10px 2px rgba(0, 229, 255, 0.85); }

/* the play button ON the line */
.rung-play {
  position: absolute; left: calc(var(--lx) * 1px); top: 50%; z-index: 2;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease);
}
.rung-play svg.ic { width: 14px; height: 14px; fill: currentColor; position: relative; z-index: 1; }
.rung-play .i-pause { display: none; }
.rung-play[aria-pressed="true"] .i-play { display: none; }
.rung-play[aria-pressed="true"] .i-pause { display: block; }
.rung-play .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.rung-play .ring circle { fill: none; stroke-width: 2; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.rung--ll .rung-play { background: var(--ll-card); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 4px 4px 0 2px var(--paint, var(--p-magenta)); }
.rung--ll .rung-play .ring circle { stroke: var(--paint, var(--p-magenta)); }
.rung--ll .rung-play:hover { transform: scale(1.08) rotate(-4deg); background: var(--paint, var(--p-magenta)); }
.rung--gw .rung-play { background: #04070a; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 18px rgba(0, 229, 255, 0.35); }
.rung--gw .rung-play .ring circle { stroke: var(--cyan); filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.9)); }
.rung--gw .rung-play:hover { transform: scale(1.06); box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0, 229, 255, 0.6); }
.rung-play:focus-visible { outline-offset: 5px; border-radius: 50%; }

/* reveal: LL hits, GW drifts */
.js-reveal .rung .card { opacity: 0; }
.js-reveal .rung--ll .card { transform: translateX(34px) rotate(1.4deg) scale(0.96); }
.js-reveal .rung--gw .card { transform: translateX(-22px); }
.js-reveal .rung .rung-arm { transform: scaleX(0); }
.js-reveal .rung .rung-node, .js-reveal .rung .rung-play { transform: scale(0); }
.rung .card { transition: opacity var(--d-mid) var(--breath), transform var(--d-long) var(--punch); }
.rung--gw .card { transition: opacity var(--d-long) var(--breath), transform 1.1s var(--breath); }
.js-reveal .rung.is-in .card { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
.js-reveal .rung.is-in .rung-arm { transform: none; transition-delay: 60ms; }
.js-reveal .rung.is-in .rung-node, .js-reveal .rung.is-in .rung-play { transform: none; transition: transform var(--d-mid) var(--punch); }

/* ---------------------------------------------------------------- card materials */
.card-hit { display: block; position: relative; }
.card-hit .cover, .card-hit .poster, .card-hit .card-body { display: block; }
.card-title { font-family: var(--display); font-weight: 400; line-height: 0.92; letter-spacing: 0.01em; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; }
.card-abs { font-family: var(--body); font-size: 0.9rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tag { position: relative; font-weight: 700; letter-spacing: 0.2em; }

/* LL: paper, ink, a paint shadow; slams */
.card--ll .card-hit {
  background: var(--ll-card) var(--grain); background-size: auto, 160px 160px;
  color: var(--ll-ink);
  border: 2px solid var(--ll-ink);
  box-shadow: 6px 6px 0 var(--paint, var(--p-magenta));
  transition: transform var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch);
}
.card--ll .card-hit:hover, .card--ll .card-hit:focus-visible { transform: translate(-3px, -3px) rotate(calc(var(--tilt) * -1)); box-shadow: 10px 10px 0 var(--paint, var(--p-magenta)); }
.card--ll .card-meta { color: var(--ll-dim); }
.card--ll .card-abs { color: #33312c; }
.card--ll .tag { color: var(--ll-ink); padding: 0.18rem 0.42rem 0.14rem 0.5rem; }
.card--ll .tag::before {                     /* a paint swash behind the tag */
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--paint, var(--p-magenta));
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%);
  transform: skewX(-12deg);
}
.card--ll .tag { z-index: 0; }

/* GW: dark glass lit from the line's side; drifts */
.card--gw .card-hit {
  background: linear-gradient(180deg, #0c1115, var(--gw-card));
  color: var(--gw-fg);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55), -14px 0 30px -18px rgba(0, 229, 255, 0.55);
  transition: border-color var(--d-mid) var(--breath), box-shadow var(--d-mid) var(--breath), transform var(--d-long) var(--breath);
  overflow: hidden;
}
.card--gw .card-hit::after {                 /* scanlines */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
}
.card--gw .card-hit:hover, .card--gw .card-hit:focus-visible {
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: inset 3px 0 0 var(--cyan), -18px 0 40px -16px rgba(0, 229, 255, 0.8), 0 0 0 1px rgba(0, 229, 255, 0.25);
  transform: translateX(4px);
}
.card--gw .card-title { letter-spacing: 0.05em; }
.card--gw .card-meta { color: var(--gw-dim); }
.card--gw .card-abs { color: #aebfc3; }
.card--gw .tag { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }

/* mobile / narrow: every card is lit on its left (the spine side) */

/* song */
.card--song { --card-w: 27rem; }
.card--song .card-hit { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; padding: 0.9rem 1.1rem 0.95rem 0.9rem; align-items: center; }
.card--song .cover { width: 88px; height: 88px; position: relative; }
.card--song .cover img { width: 100%; height: 100%; object-fit: cover; }
.card--ll.card--song .cover img { border: 2px solid var(--ll-ink); transform: rotate(-2.5deg); transition: transform var(--d-short) var(--punch); }
.card--ll.card--song .card-hit:hover .cover img { transform: rotate(1.5deg) scale(1.04); }
.card--gw.card--song .cover img { filter: grayscale(0.55) contrast(1.08) brightness(0.82); transition: filter var(--d-long) var(--breath); }
.card--gw.card--song .card-hit:hover .cover img { filter: none; }
.card--gw.card--song .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 229, 255, 0.22), transparent 60%); mix-blend-mode: screen; }
.card--song .card-title { font-size: 2.05rem; margin: 0.35rem 0 0.3rem; }
.card--song .card-body { min-width: 0; }

/* video: a poster; LL wheat-pasted on paper, GW a screen */
.card--video { --card-w: 30rem; }
.card--video .poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.card--video .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-long) var(--ease), filter var(--d-long) var(--breath); }
.card--video .poster .play-glyph {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center;
}
.card--video .poster .play-glyph svg { width: 16px; height: 16px; fill: currentColor; margin-left: 3px; }
.card--video .card-body { padding: 0.85rem 1rem 1rem; }
.card--video .card-title { font-size: 1.85rem; margin-top: 0.35rem; }
.card--ll.card--video .card-hit { padding: 10px 10px 0; }
.card--ll.card--video .poster { border: 2px solid var(--ll-ink); }
.card--ll.card--video .card-body { padding: 0.7rem 0.3rem 0.9rem; }
/* the song behind a video: a small chip on the poster's top corner, away from the play glyph */
.card-song {
  position: absolute; z-index: 3; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.6rem 0.38rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  transition: transform var(--d-short) var(--punch), background-color var(--d-short) ease, color var(--d-short) ease;
}
.card-song i { flex: none; width: 14px; height: 9px; position: relative; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
/* the head's point on the line's own row (one 9 px box for both; round 13, the song page's back chip) */
.card-song i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.card--ll .card-song { background: var(--ll-card); color: var(--ll-ink); border: 2px solid var(--ll-ink); box-shadow: 3px 3px 0 var(--paint, var(--p-magenta)); }
.card--ll .card-song:hover, .card--ll .card-song:focus-visible { transform: translate(-2px, -2px); }
.card--gw .card-song { top: 10px; right: 10px; background: rgba(6, 10, 13, 0.82); color: var(--cyan); border: 1px solid rgba(0, 229, 255, 0.45); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
.card--gw .card-song:hover, .card--gw .card-song:focus-visible { background: rgba(0, 229, 255, 0.14); transform: translateX(3px); }
html[data-rm="1"] .card-song { transition: none; }
.card--ll.card--video .play-glyph { background: var(--paint, var(--p-magenta)); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink); transform: rotate(-6deg); }
.card--ll.card--video .card-hit:hover .poster img { transform: scale(1.04); }
.card--gw.card--video .poster img { filter: grayscale(0.6) contrast(1.1) brightness(0.72); }
.card--gw.card--video .poster::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.card--gw.card--video .play-glyph { color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(0, 229, 255, 0.55); background: rgba(3, 6, 8, 0.6); z-index: 1; }
.card--gw.card--video .card-hit:hover .poster img { filter: none; }

/* essay */
.card--essay { --card-w: 29rem; }
.card--essay .card-hit { padding: 1.2rem 1.35rem 1.35rem; }
.card--essay .card-title { font-size: 2.35rem; margin: 0.55rem 0 0.6rem; }
.card--essay .card-abs { -webkit-line-clamp: 3; }
.card--ll.card--essay .card-title span { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--paint, var(--p-yellow)) 70%, transparent) 58%, color-mix(in srgb, var(--paint, var(--p-yellow)) 70%, transparent) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size var(--d-mid) var(--punch); }
.card--ll.card--essay .card-hit:hover .card-title span { background-size: 100% 100%; }

/* ---------------------------------------------------------------- the door at the end of a chapter */
.door-row { margin-top: 9vh; }
.door {
  grid-column: 1 / -1;
  justify-self: start;
  margin-left: calc(var(--lx) * 1px - 12rem);
  display: grid; grid-template-columns: 12rem 12rem; align-items: stretch;
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  min-height: 3.6rem;
}
.door span { display: flex; align-items: center; padding: 0 1.2rem; border: 1px solid var(--fg); transition: transform var(--ease-d) var(--ease), background-color var(--d-hit) linear, color var(--d-hit) linear; }
.door .door-l { justify-content: flex-end; border-right: 0; margin-right: 1px; }
.door .door-r { justify-content: space-between; border-left: 0; font-family: var(--display); font-size: 1.9rem; letter-spacing: 0.04em; }
.door .door-r::after { content: ''; width: 18px; height: 1px; background: currentColor; box-shadow: 0 0 0 transparent; transform: scaleX(0.4); transform-origin: 0 50%; transition: transform var(--ease-d) var(--ease); }
.door:hover .door-l, .door:focus-visible .door-l { transform: translateX(-10px); }
.door:hover .door-r, .door:focus-visible .door-r { transform: translateX(10px); }
.door:hover .door-r::after, .door:focus-visible .door-r::after { transform: none; }
html[data-world="ll"] .door:hover span { background: var(--ll-ink); color: var(--paper); }
html[data-world="gw"] .door span { border-color: rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .door:hover span { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.12); }
.door:focus-visible { outline: none; }
.door:focus-visible span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ================================================================ behind the mask (about) */
.about { position: relative; padding: 24vh 0 10vh; }
.about-stage { position: relative; height: var(--fh); margin-top: 2vh; }
.figure-slot { position: absolute; inset: 0; pointer-events: none; }
.figure-img { position: absolute; bottom: 2.5%; height: 94%; width: auto; left: calc(var(--lx) * 1px); transform: translateX(-59%); opacity: 0; transition: opacity var(--d-mid) var(--breath); }
.about.is-entered .figure-img { opacity: 1; }

.plate {
  position: absolute; bottom: 9%;
  right: calc(100% - var(--lx) * 1px + var(--fh) * 0.25);
  width: min(29rem, calc(var(--lx) * 1px - var(--fh) * 0.25 - var(--gutter)));
  z-index: 1;
}
.plate-persona {
  display: inline-block; font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.08em; line-height: 1;
  padding: 0.42rem 0.9rem 0.3rem; margin-bottom: 0.7rem;
}
.plate-name { font-family: var(--display); font-weight: 400; line-height: 0.8; font-size: clamp(4rem, 8.6vw, 8.4rem); }
.stats { margin-top: 1.3rem; display: grid; gap: 0.7rem; }
.stat { display: grid; grid-template-columns: 5.4rem 3.4rem minmax(0, 1fr); align-items: center; gap: 0.9rem; }
.stat dt { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; }
.stat .num { font-family: var(--display); font-size: 2.3rem; line-height: 0.9; font-variant-numeric: tabular-nums; }
.stat .bar2 { position: relative; height: 12px; display: flex; overflow: hidden; }
.stat .bar2 i { display: block; height: 100%; transform-origin: 0 50%; }
.stat .split { grid-column: 3; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: -0.35rem; }
.stat dd { display: contents; }

html[data-world="ll"] .plate-persona { background: var(--p-magenta); color: var(--ll-ink); transform: skewX(-12deg); box-shadow: 4px 4px 0 var(--ll-ink); }
html[data-world="ll"] .plate-name { color: var(--ll-ink); text-shadow: 5px 5px 0 var(--p-yellow); transform: skewX(-6deg); transform-origin: 0 100%; }
html[data-world="ll"] .stat dt, html[data-world="ll"] .stat .split { color: var(--ll-dim); }
html[data-world="ll"] .stat .bar2 { transform: skewX(-18deg); background: rgba(11, 11, 12, 0.12); box-shadow: 0 0 0 2px var(--ll-ink); }
html[data-world="ll"] .stat .bar2 .b-ll { background: var(--p-orange); }
html[data-world="ll"] .stat .bar2 .b-gw { background: var(--ll-ink); }
html[data-world="gw"] .plate-persona { color: var(--cyan); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; padding: 0.5rem 0.9rem; border: 1px solid rgba(0, 229, 255, 0.5); box-shadow: 0 0 14px rgba(0, 229, 255, 0.25); }
html[data-world="gw"] .plate-name { color: var(--gw-fg); letter-spacing: 0.06em; text-shadow: 0 0 22px rgba(0, 229, 255, 0.35); }
html[data-world="gw"] .stat dt, html[data-world="gw"] .stat .split { color: var(--gw-dim); }
html[data-world="gw"] .stat .num { color: var(--gw-fg); }
html[data-world="gw"] .stat .bar2 { height: 3px; background: rgba(234, 247, 249, 0.12); }
html[data-world="gw"] .stat .bar2 .b-ll { background: rgba(234, 247, 249, 0.55); }
html[data-world="gw"] .stat .bar2 .b-gw { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* entrances of the plate (the figure enters in WebGL, the DOM slams or assembles with it) */
.about .plate, .about .about-aside { opacity: 0; }
.about.is-entered .plate, .about.is-entered .about-aside { opacity: 1; }
.about[data-entry="ll"].is-entered .plate-persona { animation: slamIn 380ms var(--punch) 300ms both; }
.about[data-entry="ll"].is-entered .plate-name { animation: slamName 420ms var(--punch) 360ms both; }
.about[data-entry="ll"].is-entered .stat { animation: slamStat 360ms var(--punch) both; }
.about[data-entry="ll"].is-entered .stat:nth-child(1) { animation-delay: 520ms; }
.about[data-entry="ll"].is-entered .stat:nth-child(2) { animation-delay: 600ms; }
.about[data-entry="ll"].is-entered .stat:nth-child(3) { animation-delay: 680ms; }
.about[data-entry="ll"].is-entered .bar2 i { animation: barFill 520ms var(--punch) 640ms both; }
.about[data-entry="ll"].is-entered .about-aside { animation: slamAside 480ms var(--punch) 440ms both; }
@keyframes slamIn { from { transform: translateX(-120%) skewX(-12deg); opacity: 0; } to { transform: skewX(-12deg); opacity: 1; } }
@keyframes slamName { from { transform: translateX(-40%) skewX(-24deg) scale(1.15); opacity: 0; } to { transform: skewX(-6deg); opacity: 1; } }
@keyframes slamStat { from { transform: scale(1.5) translateX(-12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slamAside { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.about[data-entry="gw"].is-entered .plate-persona { animation: glitchIn 900ms var(--breath) 900ms both; }
.about[data-entry="gw"].is-entered .plate-name { animation: glitchIn 1100ms var(--breath) 1050ms both; }
.about[data-entry="gw"].is-entered .stat { animation: driftIn 900ms var(--breath) both; }
.about[data-entry="gw"].is-entered .stat:nth-child(1) { animation-delay: 1300ms; }
.about[data-entry="gw"].is-entered .stat:nth-child(2) { animation-delay: 1420ms; }
.about[data-entry="gw"].is-entered .stat:nth-child(3) { animation-delay: 1540ms; }
.about[data-entry="gw"].is-entered .bar2 i { animation: barFill 1200ms var(--breath) 1500ms both; }
.about[data-entry="gw"].is-entered .about-aside { animation: driftIn 1300ms var(--breath) 1200ms both; }
@keyframes glitchIn {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(-14px); }
  12% { opacity: 1; clip-path: inset(0 0 62% 0); transform: translateX(10px); }
  22% { clip-path: inset(40% 0 20% 0); transform: translateX(-6px); }
  34% { clip-path: inset(0 0 30% 0); transform: translateX(3px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes driftIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ================================================================ the blog: THE SEAM
   The human is the line between the two masks. worlds.js splits the world while the chapter is on screen (s.seam):
   LL left of the line, GW right of it. The cards straddle the line on a neutral reading ground: torn paper with ink
   on the left edge, a stepped digital cut with a cyan fringe on the right. Hover pulls a little of each side. */
:root { --seam-ground: #ebe8e1; --seam-ink: #1a1917; --seam-dim: #55524b; }
.seam-card { position: relative; display: block; isolation: isolate; color: var(--seam-ink); }
.seam-under {
  position: absolute; top: 0; bottom: 0; left: -16px; right: -16px; z-index: -1; pointer-events: none;
  transition: translate var(--d-short) var(--punch), opacity var(--d-short) linear, filter var(--d-mid) var(--breath);
}
.seam-under i { position: absolute; inset: 0; display: block; }
.seam-ink i { background: var(--ll-ink); }
.seam-paint { opacity: 0; }
.seam-paint i { background: var(--paint, var(--p-magenta)); }
.seam-cyan { filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.8)); }
.seam-cyan i { background: var(--cyan); }
.seam-magenta i { background: #ff2e7e; opacity: 0.9; }
.seam-face { position: relative; display: block; background: var(--seam-ground) var(--grain); background-size: auto, 160px 160px; }
.seam-face .draft-tag { color: #9a3300; }

.chapter--seam .ch-head { margin-bottom: 9vh; }
.ch-own { margin-top: 2.6rem; width: min(35rem, calc(100vw - 2 * var(--gutter) - 2rem)); --paint: var(--p-yellow); }
.ch-own .seam-face { padding: 1.05rem 2.4rem 1.1rem 2rem; font-family: var(--body); font-size: 1.02rem; line-height: 1.55; text-align: left; }

.essays { position: relative; display: flex; flex-direction: column; gap: 3.4rem; }
.essay { position: relative; width: min(44rem, calc(100vw - 2 * var(--gutter) - 4rem)); margin-left: calc(var(--lx) * 1px); translate: calc(-50% + var(--nudge, 0) * 2.4rem) 0; }
.essay:nth-child(4n + 1) { --paint: var(--p-magenta); }
.essay:nth-child(4n + 2) { --paint: var(--p-yellow); }
.essay:nth-child(4n + 3) { --paint: var(--p-orange); }
.essay:nth-child(4n + 4) { --paint: var(--p-gold); }
.essay-face { display: grid; padding: 0; }
.essay-text { display: grid; padding: 1.2rem 2.8rem 1.3rem 2.3rem; }
.essay-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--seam-dim); }
.essay-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 3.1vw, 2.85rem); line-height: 0.92; letter-spacing: 0.01em; margin: 0.55rem 0 0.6rem; }
.essay-abs { font-family: var(--body); font-size: 0.96rem; line-height: 1.5; color: #33312c; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.essay-go { justify-self: end; margin-top: 0.9rem; font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--seam-dim); transition: color var(--d-hit) linear, letter-spacing var(--d-mid) var(--breath); }
.essay-card:hover .seam-ink, .essay-card:focus-visible .seam-ink { translate: -2px 0; }
.essay-card:hover .seam-paint, .essay-card:focus-visible .seam-paint { opacity: 1; translate: -5px 0; }
.essay-card:hover .seam-cyan, .essay-card:focus-visible .seam-cyan { translate: 4px 0; filter: drop-shadow(0 0 9px rgba(0, 229, 255, 1)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.55)); }
.essay-card:hover .seam-magenta, .essay-card:focus-visible .seam-magenta { translate: 1.5px 0; }
.essay-card:hover .essay-go, .essay-card:focus-visible .essay-go { color: var(--seam-ink); letter-spacing: 0.4em; }
.essay-card:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 8px; border-radius: 1px; }
.js-reveal .essay { opacity: 0; transform: translateY(26px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--punch); }
.js-reveal .essay.is-in { opacity: 1; transform: none; }

/* the seam's chrome: each half keeps its own world's colours */
html[data-seam="1"] .sound { color: var(--gw-fg); }
html[data-seam="1"] #blog .ch-meta > :first-child { color: #b23a00; }
html[data-seam="1"] #blog .ch-meta > :last-child { color: var(--gw-dim); }
html[data-seam="1"] #blog .door .door-l { --fg: #0b0b0c; color: #0b0b0c; border-color: #0b0b0c; }
html[data-seam="1"] #blog .door .door-r { --fg: #eaf7f9; color: #eaf7f9; border-color: rgba(0, 229, 255, 0.55); }
html[data-seam="1"] #blog .door:hover .door-l { background: #0b0b0c; color: #f4f4f0; }
html[data-seam="1"] #blog .door:hover .door-r { background: transparent; border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.12); }
/* the bottom bar splits too: LL paper left of the line, GW night right of it (--sx: the seam's line) */
html[data-seam="1"][data-condensed="1"] .player {
  --sx: calc(var(--lx) * 1px);
  background: linear-gradient(to right, rgba(243, 240, 232, 0.92) 0 var(--sx), rgba(5, 7, 9, 0.88) var(--sx) 100%);
}
html[data-seam="1"][data-condensed="1"] .pp { color: #0b0b0c; border-color: rgba(11, 11, 12, 0.3); }
html[data-seam="1"][data-condensed="1"] .now { color: #0b0b0c; max-width: calc(var(--sx) - 2 * var(--gutter) - 2.6rem); }
html[data-seam="1"][data-condensed="1"] .now-side { color: #b23a00; text-shadow: none; }
html[data-seam="1"][data-condensed="1"] .time { color: var(--gw-dim); margin-left: auto; }

/* ================================================================ about, after the locked intro: work, Shotline, (friends)
   WORK (round 5, owner 2026-09-25): the four-lane grid is gone. One compact line on the spine: the Third AI Studios eye
   mark hangs left of the line (LL: ink on a paint swash; GW: light with a cyan iris), the words right of it. */
.work { position: relative; padding: 20vh 0 2vh; }
.work-in { position: relative; display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center; }
.work-mark { position: relative; grid-column: 1; justify-self: end; margin-right: var(--arm); display: block; width: clamp(128px, 11vw, 176px); isolation: isolate; }
.work-mark img { width: 100%; height: auto; transition: transform var(--d-short) var(--punch), filter var(--d-mid) var(--breath); }
.work-mark::before {           /* LL: a paint swash behind the eye */
  content: ''; position: absolute; inset: 4% -9% 2% -7%; z-index: -1; background: var(--p-yellow);
  clip-path: polygon(4% 20%, 22% 6%, 47% 12%, 70% 2%, 96% 14%, 100% 48%, 93% 86%, 66% 98%, 38% 90%, 12% 100%, 0 62%);
  transform: skewX(-10deg) rotate(-3deg); transition: transform var(--d-short) var(--punch), opacity var(--d-hit) linear;
}
html[data-world="ll"] .work-mark img { filter: brightness(0); }
html[data-world="gw"] .work-mark::before { opacity: 0; }
html[data-world="gw"] .work-mark img { filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.55)) drop-shadow(0 0 16px rgba(0, 229, 255, 0.3)); }
.work-in:hover .work-mark img { transform: rotate(-3deg) scale(1.04); }
.work-in:hover .work-mark::before { transform: skewX(-10deg) rotate(2deg) scale(1.05); }
html[data-world="gw"] .work-in:hover .work-mark img { transform: none; filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 26px rgba(0, 229, 255, 0.5)); }
.work-text { grid-column: 2; margin-left: var(--arm); max-width: 27rem; }
.work-h { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.work-line { margin-top: 0.75rem; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 2.7vw, 2.6rem); line-height: 0.98; letter-spacing: 0.02em; color: var(--fg); text-wrap: balance; }
html[data-world="gw"] .work-line { letter-spacing: 0.05em; text-shadow: 0 0 20px rgba(0, 229, 255, 0.25); }
.work-line .draft-tag { vertical-align: 0.5em; }
.work-go { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.05rem; padding: 0.4rem 0; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg); }
.work-go span { padding-bottom: 0.28rem; background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; transition: background-size var(--ease-d) var(--ease); }
/* an arrow, not a dash (round 13: a bare line after the words read as an em-dash): the back chip's 9 px box, the line on
   its middle row growing on hover, the head riding its end */
.work-go i { position: relative; display: block; flex: none; width: 24px; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 50% 1px no-repeat; transition: background-size var(--ease-d) var(--ease); }
.work-go i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-12px) rotate(45deg); transition: transform var(--ease-d) var(--ease); }
.work-go:hover span, .work-go:focus-visible span { background-size: 100% 2px; }
.work-go:hover i, .work-go:focus-visible i { background-size: 100% 1px; }
.work-go:hover i::after, .work-go:focus-visible i::after { transform: rotate(45deg); }
html[data-world="gw"] .work-go:hover, html[data-world="gw"] .work-go:focus-visible { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.6); }
.js-reveal .work-in { opacity: 0; transform: translateY(22px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.js-reveal .work-in.is-in { opacity: 1; transform: none; }

/* ================================================================ ABOUT ME (owner 2026-09-26: "an about me text that scrolls down
   where I can write a bit about me"): after the locked intro, before WORK. His words (copy.js, v3_home_about_me; one <p>
   per line) hang off the spine like the WORK words: the label left of the line, the sheet right of it. The Architect's
   are handwritten on a ruled sheet taped to the page; the Ghostwriter's are a terminal readout with the line as its
   gutter. It arrives as it scrolls in (main.js watchMe: .is-in), on the world's curve: the sheet slapped on (PUNCH), the
   readout scanned in top to bottom (BREATH); Reduce Motion: a 200 ms fade. */
.me {
  position: relative; padding: 16vh 0 0;
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: start;
}
.me-h {
  grid-column: 1; grid-row: 1; justify-self: end; margin: 1.1rem var(--arm) 0 0; text-align: right;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.me-sheet {
  grid-column: 2; grid-row: 1; justify-self: start; position: relative;
  width: min(34rem, calc(100% - var(--arm) - var(--gutter))); margin-left: var(--arm);
}
.me-text p + p { margin-top: 1.1em; }
.me .draft-tag { margin: 0.9rem 0 0; }
.me-tape { position: absolute; z-index: 1; display: block; width: 96px; height: 26px; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.me-tape--a { left: -34px; top: 4px; rotate: -34deg; background: rgba(236, 229, 205, 0.74); }
.me-tape--b { right: -30px; top: -6px; rotate: 30deg; background: rgba(255, 210, 63, 0.7); }
.me-prompt { display: none; }

/* the Architect: ink handwriting on a ruled sheet (the rules sit under the writing's baseline) */
html[data-world="ll"] .me-sheet {
  --me-rule: 2.35rem;
  rotate: -0.8deg;
  padding: calc(var(--me-rule) * 0.75) 2.3rem calc(var(--me-rule) * 0.7) 2.2rem;
  color: #17181c;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--me-rule) - 1px), rgba(88, 124, 168, 0.3) calc(var(--me-rule) - 1px) var(--me-rule)) content-box 0 calc(var(--me-rule) * -0.16) / 100% var(--me-rule) repeat-y,
    #fbfaf4 var(--grain);
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 1px 0 rgba(11, 11, 12, 0.06), 0 24px 38px -24px rgba(11, 11, 12, 0.55);
}
html[data-world="ll"] .me-text { font-family: var(--hand); font-weight: 500; font-size: calc(var(--me-rule) * 0.72); line-height: var(--me-rule); text-wrap: pretty; }
html[data-world="ll"] .me-text p + p { margin-top: var(--me-rule); }
html[data-world="ll"] .me .draft-tag { color: #9a3300; }

/* the Ghostwriter: a readout on a dark screen, the line as its gutter, the caret after the last word */
html[data-world="gw"] .me-tape { display: none; }
html[data-world="gw"] .me-sheet {
  padding: 1.15rem 1.6rem 1.4rem 1.5rem; border-radius: 6px; border-left: 2px solid var(--cyan); color: #c3e8ee;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), rgba(3, 7, 10, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.2), -1px 0 12px rgba(0, 229, 255, 0.35), 0 0 36px rgba(0, 229, 255, 0.07);
}
html[data-world="gw"] .me-prompt { display: block; margin-bottom: 0.95rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gw-dim); }
html[data-world="gw"] .me-gt { color: var(--cyan); margin-right: 0.3em; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
html[data-world="gw"] .me-text { font-family: var(--mono); font-size: 0.84rem; line-height: 1.85; letter-spacing: 0.02em; text-wrap: pretty; }
html[data-world="gw"] .me-text p:last-child::after {
  content: ''; display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.35em; vertical-align: -0.2em;
  background: #dffcff; box-shadow: 0 0 4px #00e5ff, 0 0 10px rgba(0, 229, 255, 0.7);
}
/* the caret blinks only while the readout is on screen (heat), never under Reduce Motion */
html[data-world="gw"]:not([data-rm="1"]) .me.is-in .me-text p:last-child::after { animation: meBlink 1.06s steps(1, end) infinite; }
@keyframes meBlink { 50% { opacity: 0; } }
html[data-world="gw"] .me .draft-tag { color: var(--cyan); }

/* the arrival (JS only: without it the words simply stand) */
.me[data-js] .me-h { opacity: 0; transform: translateY(14px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.me[data-js].is-in .me-h { opacity: 1; transform: none; }
.me[data-js] .me-sheet { opacity: 0; }
.me[data-js].is-in .me-sheet { opacity: 1; }
html[data-world="ll"] .me[data-js] .me-sheet { transform: translateY(30px) rotate(-3.5deg) scale(1.05); transition: opacity 180ms linear 80ms, transform 520ms var(--punch) 80ms; }
html[data-world="ll"] .me[data-js].is-in .me-sheet { transform: none; }
html[data-world="ll"] .me[data-js] .me-tape { opacity: 0; scale: 1.6; transition: opacity 120ms linear 380ms, scale 320ms var(--punch) 380ms; }
html[data-world="ll"] .me[data-js].is-in .me-tape { opacity: 1; scale: 1; }
html[data-world="gw"] .me[data-js] .me-sheet { clip-path: inset(-3rem -3rem 100% -3rem); transition: opacity 320ms linear 120ms, clip-path 1100ms var(--breath) 120ms; }
html[data-world="gw"] .me[data-js].is-in .me-sheet { clip-path: inset(-3rem -3rem -3rem -3rem); }
html[data-rm="1"] .me[data-js] .me-h, html[data-rm="1"] .me[data-js] .me-sheet, html[data-rm="1"] .me[data-js] .me-tape {
  transform: none; scale: none; clip-path: none; transition: opacity 200ms linear;
}

/* ================================================================ RECOGNITION (owner 2026-09-26): one line after the About me,
   before WORK, linking to the press page (key v3_home_recognition). It hangs off the spine like the About me: the label
   left of the line, the words right of it. The Architect's: his words with a marker stroke of paint under them, slapped
   in (PUNCH); the Ghostwriter's: a lit mono line with a cyan underline, faded up (BREATH). Reduce Motion: a 200 ms fade. */
.recog { position: relative; padding: 8vh 0 0; display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: baseline; }
.recog-k {
  grid-column: 1; justify-self: end; margin: 0 var(--arm) 0 0; text-align: right;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.recog-in { grid-column: 2; justify-self: start; margin-left: var(--arm); max-width: min(34rem, calc(100% - var(--arm) - var(--gutter))); }
.recog-a { color: var(--fg); transition: color var(--d-hit) linear, background-size var(--d-mid) var(--ease); }
.recog-a i {
  position: relative; display: inline-block; width: 1.9rem; height: 9px; margin-left: 0.7em; vertical-align: 0.12em;
  background: linear-gradient(currentColor, currentColor) 0 50% / 62% 1px no-repeat; transition: background-size var(--d-mid) var(--ease);
}
.recog-a i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-0.72rem) rotate(45deg); transition: transform var(--d-mid) var(--ease); }
.recog-a:hover i, .recog-a:focus-visible i { background-size: 100% 1px; }
.recog-a:hover i::after, .recog-a:focus-visible i::after { transform: rotate(45deg); }
.recog .draft-tag { margin-left: 0.8em; }
html[data-world="ll"] .recog-a {
  font-family: var(--body); font-size: 1.12rem; font-weight: 500; line-height: 1.55; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 60%, rgba(255, 210, 63, 0.62) 60%, rgba(255, 210, 63, 0.62) 92%, transparent 92%) 0 0 / 100% 100% no-repeat;
}
html[data-world="ll"] .recog-a:hover, html[data-world="ll"] .recog-a:focus-visible {
  background-image: linear-gradient(transparent 60%, rgba(255, 46, 126, 0.42) 60%, rgba(255, 46, 126, 0.42) 92%, transparent 92%);
}
html[data-world="ll"] .recog-a:focus-visible { outline: 2px solid var(--ll-ink); outline-offset: 4px; }
html[data-world="ll"] .recog .draft-tag { color: #9a3300; }
html[data-world="gw"] .recog-a {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.9; letter-spacing: 0.04em; color: #c3e8ee;
  text-decoration: underline; text-decoration-color: rgba(0, 229, 255, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.34em;
}
html[data-world="gw"] .recog-a:hover, html[data-world="gw"] .recog-a:focus-visible { color: var(--cyan); text-decoration-color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .recog-a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
html[data-world="gw"] .recog .draft-tag { color: var(--cyan); }
/* the arrival (JS only: without it the line simply stands) */
.recog[data-js] .recog-k, .recog[data-js] .recog-in { opacity: 0; }
html[data-world="ll"] .recog[data-js] .recog-in { transform: translateY(16px) rotate(-1.2deg); transition: opacity 180ms linear 160ms, transform 520ms var(--punch) 160ms; }
html[data-world="gw"] .recog[data-js] .recog-in { transform: translateX(-10px); transition: opacity 900ms var(--breath) 200ms, transform 1100ms var(--breath) 200ms; }
.recog[data-js] .recog-k { transform: translateY(10px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.recog[data-js].is-in .recog-k, .recog[data-js].is-in .recog-in { opacity: 1; transform: none; }
html[data-rm="1"] .recog[data-js] .recog-k, html[data-rm="1"] .recog[data-js] .recog-in { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .recog-a, html[data-rm="1"] .recog-a i, html[data-rm="1"] .recog-a i::after { transition: none; }

/* Shotline: a band across the page. LL: a full-bleed SFV ribbon under the word; GW: a lit screen. */
.band { position: relative; margin-top: 14vh; padding: 15vh 0 14vh; overflow: clip; }
.band-ground { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--d-mid) var(--breath); }
html[data-world="gw"] .band-ground {
  opacity: 1;
  background:
    radial-gradient(ellipse 60% 70% at calc(var(--lx) * 1px) 42%, rgba(0, 229, 255, 0.1), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(3, 6, 9, 0.95), rgba(5, 9, 12, 0.97));
  border-top: 1px solid rgba(0, 229, 255, 0.4); border-bottom: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 34px rgba(0, 229, 255, 0.14);
}
.band-in { margin-bottom: 0; }
.band-eyebrow { font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 1.2rem; }
.band-title-wrap { position: relative; isolation: isolate; }
.band-ribbon { position: absolute; top: 50%; left: calc(50% - var(--lx) * 1px); width: 100vw; height: clamp(150px, 15vw, 250px); translate: 0 -50%; pointer-events: none; z-index: -1; }
.band-ribbon .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-reel {
  display: block; width: min(38rem, 78vw); height: 13px; margin: 3.4rem 0 1.5rem;
  background:
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 26px);
  opacity: 0.8;
}
html[data-world="gw"] .band-reel { filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)); }
.band-line { font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: 0.02em; color: var(--fg); }
html[data-world="gw"] .band-line { letter-spacing: 0.05em; }
.band-sub { margin-top: 0.9rem; max-width: 30rem; font-family: var(--body); font-size: 1rem; line-height: 1.55; color: var(--dim); }
.band-cta {
  margin-top: 2.2rem; display: inline-grid; grid-template-columns: auto auto; align-items: stretch;
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; min-height: 3.4rem;
  transition: transform var(--ease-d) var(--ease), box-shadow var(--ease-d) var(--ease);
}
.band-cta span { display: flex; align-items: center; padding: 0 1.3rem; }
.band-cta-r { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: none; }
html[data-world="ll"] .band-cta { background: var(--ll-ink); color: var(--paper); box-shadow: 6px 6px 0 var(--p-magenta); transform: skewX(-8deg); }
html[data-world="ll"] .band-cta span { transform: skewX(8deg); }
html[data-world="ll"] .band-cta-r { background: var(--p-yellow); color: var(--ll-ink); }
html[data-world="ll"] .band-cta:hover, html[data-world="ll"] .band-cta:focus-visible { transform: skewX(-8deg) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--p-magenta); }
html[data-world="gw"] .band-cta { color: var(--cyan); border: 1px solid rgba(0, 229, 255, 0.7); box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 14px rgba(0, 229, 255, 0.08); }
html[data-world="gw"] .band-cta-r { color: var(--gw-fg); border-left: 1px solid rgba(0, 229, 255, 0.4); }
html[data-world="gw"] .band-cta:hover, html[data-world="gw"] .band-cta:focus-visible { box-shadow: 0 0 30px rgba(0, 229, 255, 0.5), inset 0 0 18px rgba(0, 229, 255, 0.16); }
.band-cta:focus-visible { outline-offset: 6px; }
.band .draft-tag { margin: 1.6rem 0 0; }

/* friends and collaborators: the people he makes it with (the middle column hangs on the line) */
.friends { position: relative; padding: 22vh 0 6vh; }
.friends-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem 2.1rem;
  width: min(50rem, calc(100vw - 2 * var(--gutter))); margin-left: calc(var(--lx) * 1px); translate: -50% 0;
}
.friend-hit { position: relative; display: block; height: 100%; }
.friend-pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.friend-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-long) var(--ease), filter var(--d-long) var(--breath); }
.friend-body { display: grid; gap: 0.32rem; padding: 0.85rem 0.35rem 0.9rem; }
.friend-role { font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; }
.friend-name { font-family: var(--display); font-size: 1.75rem; line-height: 0.95; letter-spacing: 0.01em; }
.friend-tag { font-family: var(--body); font-size: 0.86rem; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
html[data-world="ll"] .friend-hit {
  padding: 8px 8px 0; background: var(--ll-card) var(--grain); background-size: auto, 160px 160px; color: var(--ll-ink);
  border: 2px solid var(--ll-ink); box-shadow: 6px 6px 0 var(--paint, var(--p-magenta)); rotate: var(--tilt, 0deg);
  transition: rotate var(--d-short) var(--punch), translate var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch);
}
html[data-world="ll"] .friend-pic { border: 2px solid var(--ll-ink); }
html[data-world="ll"] .friend-role { color: var(--ll-dim); }
html[data-world="ll"] .friend-tag { color: #33312c; }
html[data-world="ll"] .friend-hit:hover, html[data-world="ll"] .friend-hit:focus-visible { rotate: 0deg; translate: -3px -3px; box-shadow: 10px 10px 0 var(--paint, var(--p-magenta)); }
html[data-world="ll"] .friend-hit:hover img { transform: scale(1.04); }
html[data-world="gw"] .friend-hit {
  padding: 0; background: linear-gradient(180deg, #0c1115, var(--gw-card)); color: var(--gw-fg);
  border: 1px solid rgba(0, 229, 255, 0.2); box-shadow: inset 0 2px 0 rgba(0, 229, 255, 0.5);
  transition: border-color var(--d-mid) var(--breath), box-shadow var(--d-mid) var(--breath);
}
html[data-world="gw"] .friend-body { padding: 0.85rem 0.9rem 1rem; }
html[data-world="gw"] .friend-pic img { filter: grayscale(0.7) contrast(1.1) brightness(0.78); }
html[data-world="gw"] .friend-pic::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px); pointer-events: none; }
html[data-world="gw"] .friend-role { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .friend-name { letter-spacing: 0.05em; }
html[data-world="gw"] .friend-tag { color: #aebfc3; }
html[data-world="gw"] .friend-hit:hover, html[data-world="gw"] .friend-hit:focus-visible { border-color: rgba(0, 229, 255, 0.65); box-shadow: inset 0 3px 0 var(--cyan), 0 0 26px rgba(0, 229, 255, 0.25); }
html[data-world="gw"] .friend-hit:hover img { filter: none; }
.friend-hit:focus-visible { outline-offset: 5px; }
.js-reveal .friend { opacity: 0; transform: translateY(24px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.js-reveal .friend.is-in { opacity: 1; transform: none; }
.js-reveal .friend:nth-child(3n + 2) { transition-delay: 70ms; }
.js-reveal .friend:nth-child(3n + 3) { transition-delay: 140ms; }

/* ================================================================ the footer: the face returns, the footer sits on the line */
.foot { position: relative; height: 100vh; height: 100svh; }
.foot-row {
  --lx: var(--lx0);
  position: absolute; left: 0; right: 0; top: calc(var(--ly1) * 1px + 26px);
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.foot-row::before {           /* the rung the footer hangs on: across, at the line's end */
  content: ''; position: absolute; top: -26px; height: 1px; left: calc(var(--lx0) * 1px - min(30rem, 42vw)); width: calc(2 * min(30rem, 42vw));
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); box-shadow: var(--line-glow); opacity: 0.8;
}
.foot-l { justify-self: end; align-self: start; padding-right: 2rem; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 0.1rem 1.35rem; max-width: 30rem; }
.foot-r { align-self: start; padding-left: 2rem; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0.1rem 1.4rem; max-width: 30rem; }
.foot-r .shot { flex-basis: 100%; }
.foot a { position: relative; padding: 0.3rem 0; color: var(--fg); transition: color var(--d-hit) linear; }
.foot a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: var(--line); box-shadow: var(--line-glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ease-d) var(--ease); }
.foot a:hover::after, .foot a:focus-visible::after { transform: none; }
.foot-r .big { font-family: var(--display); font-size: 1.9rem; letter-spacing: 0.04em; text-transform: none; line-height: 1; }
.foot-r .shot { display: grid; gap: 0.25rem; text-transform: none; letter-spacing: 0.02em; }
.foot-r .shot b { font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.foot-r .shot span { font-family: var(--body); font-size: 0.86rem; color: var(--dim); }
.foot-note { flex-basis: 100%; margin-top: 0.7rem; font-size: 0.54rem; letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap; }
.foot .foot-note a { color: var(--dim); }
.foot .foot-note a:hover, .foot .foot-note a:focus-visible { color: var(--fg); }

/* ================================================================ the legal line (every footer: js/foot-legal.js builds it
   for the footers made by code, the other pages write it in their markup): PRIVACY, IMPRINT (only once its details are
   saved: copy.js data-copy-if) and COOKIE SETTINGS (a button with data-consent-open: the consent banner opens on it).
   Small, quiet mono; each footer gives it its own colours through --legal (at rest) and --legal-hi (hover, focus, here). */
.foot-legal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.3rem;
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.24em; text-transform: uppercase;
}
.foot-legal a, .foot-legal button {
  position: relative; padding: 0.4rem 0; color: var(--legal, var(--dim)); font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: underline 1px transparent; text-underline-offset: 0.4em;
  transition: color var(--d-hit) linear, text-decoration-color var(--d-hit) linear;
}
.foot-legal a::after { content: none; }
.foot-legal a:hover, .foot-legal a:focus-visible, .foot-legal button:hover, .foot-legal button:focus-visible, .foot-legal [aria-current="page"] {
  color: var(--legal-hi, var(--fg)); text-decoration-color: currentColor;
}
html[data-rm="1"] .foot-legal a, html[data-rm="1"] .foot-legal button { transition: none; }
/* the home: under the links, right of the line; music and video: centred under the note (phones: at the spine) */
.foot-r .foot-legal { flex-basis: 100%; margin-top: 0.1rem; }
.m-foot .foot-legal, .v-foot .foot-legal { justify-content: center; margin-top: -0.5rem; }
/* the seam's footers (blog, press, an essay): on the night half, in its colours */
.b-foot-r .foot-legal, .pr-foot-r .foot-legal, .p-foot > .foot-legal { --legal: var(--gw-dim); --legal-hi: var(--gw-fg); }
.b-foot-r .foot-legal :focus-visible, .pr-foot-r .foot-legal :focus-visible, .p-foot > .foot-legal :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.p-foot > .foot-legal { grid-column: 2; justify-self: start; margin-top: 0.9rem; }
/* the song page: in the foot's own colour (its side's) */
.sp-foot .foot-legal { --legal: currentColor; gap: 0 1.1rem; font-size: inherit; letter-spacing: inherit; }
.sp-foot .foot-legal a, .sp-foot .foot-legal button { padding: 0; }
@media (max-width: 719.98px) {
  .foot-legal { gap: 0 1rem; font-size: 0.5rem; letter-spacing: 0.18em; }
  .foot-r .foot-legal { margin-top: 0; }
  .m-foot .foot-legal, .v-foot .foot-legal { justify-content: flex-start; margin-top: -0.4rem; }
}

/* ================================================================ the menu: the mask opens, the words stand between the halves */
.menu { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.menu[hidden] { display: none; }
html[data-menu="opening"] .menu, html[data-menu="open"] .menu { pointer-events: auto; }
.menu-nav { display: flex; flex-direction: column; align-items: center; }
.menu-word {
  display: block; font-family: var(--display); font-size: clamp(3rem, min(11.5vh, 15vw), 8.4rem); line-height: 0.96;
  letter-spacing: 0.02em; color: var(--fg); position: relative; padding: 0 0.1em;
}
html[data-world="gw"] .menu-word { letter-spacing: 0.08em; text-shadow: 0 0 24px rgba(0, 229, 255, 0.35); }
.menu-word span { display: block; clip-path: inset(0 50% 0 50%); transition: clip-path var(--d-mid) var(--ease), color var(--d-hit) linear; }
.menu-word:nth-child(2) span { transition-delay: 60ms; }
.menu-word:nth-child(3) span { transition-delay: 120ms; }
.menu-word:nth-child(4) span { transition-delay: 180ms; }
html[data-menu="open"] .menu-word span { clip-path: inset(-8% -4% -8% -4%); }
.menu-word:hover span, .menu-word:focus-visible span { color: var(--accent); }
.menu-word:focus-visible { outline: none; }
.menu-word:focus-visible span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.08em; }
.menu-word small { position: absolute; left: 100%; top: 0.9em; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--dim); opacity: 0; transition: opacity var(--d-mid) var(--breath) 200ms; }
html[data-menu="open"] .menu-word small { opacity: 1; }
/* the small secondary line under the big words (owner 2026-09-26: Press is not a fifth big word): mono, tracked, it
   opens out of the centre like the words, after them */
.menu-sub {
  display: block; margin-top: clamp(0.9rem, 2.4vh, 1.6rem); padding: 0.55rem 0.9rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600; line-height: 1; letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--dim); position: relative;
}
.menu-sub span { display: block; padding-left: 0.46em; clip-path: inset(0 50% 0 50%); transition: clip-path var(--d-mid) var(--ease) 240ms, color var(--d-hit) linear; }
.menu-sub::before, .menu-sub::after {
  content: ''; position: absolute; top: 50%; width: 1.4rem; height: 1px; background: currentColor; opacity: 0;
  transition: opacity var(--d-mid) var(--breath) 320ms;
}
.menu-sub::before { right: 100%; }
.menu-sub::after { left: 100%; }
html[data-menu="open"] .menu-sub span { clip-path: inset(-20% -4% -20% -4%); }
html[data-menu="open"] .menu-sub::before, html[data-menu="open"] .menu-sub::after { opacity: 0.5; }
.menu-sub[aria-current="page"] { color: var(--fg); }
.menu-sub:hover, .menu-sub:focus-visible { color: var(--accent); }
.menu-sub:focus-visible { outline: none; }
.menu-sub:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
html[data-world="gw"] .menu-sub { text-shadow: 0 0 14px rgba(0, 229, 255, 0.3); }
/* the small line holds Home and Press side by side (owner 2026-09-29: "the mask menu needs a Home link as well"); the
   hairlines frame its two ends, the second word opens a beat after the first */
.menu-subs { display: flex; justify-content: center; align-items: center; gap: clamp(0.3rem, 1.2vw, 1rem); margin: clamp(0.9rem, 2.4vh, 1.6rem) 0 0; }
.menu-subs .menu-sub { margin-top: 0; }
.menu-subs .menu-sub:not(:first-child)::before, .menu-subs .menu-sub:not(:last-child)::after { display: none; }
.menu-subs .menu-sub + .menu-sub span { transition-delay: 300ms; }
.menu-meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.2rem;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px); transition: opacity var(--d-mid) var(--breath), transform var(--d-mid) var(--ease);
}
html[data-menu="open"] .menu-meta { opacity: 1; transform: none; transition-delay: 160ms; }
.menu-now { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.menu-now .k { color: var(--dim); }
.menu-now .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-now .v b { color: var(--line); text-shadow: var(--line-glow); margin-right: 0.7em; }
.menu-pp { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; flex: none; }
.menu-pp svg { width: 0.72rem; height: 0.72rem; fill: currentColor; }
.menu-pp .i-pause { display: none; }
html[data-playing="1"] .menu-pp .i-play { display: none; }
html[data-playing="1"] .menu-pp .i-pause { display: block; }
.menu-sound { padding: 0.5rem 0.2rem; }
.menu-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 1.1rem; }
.menu-socials a { padding: 0.3rem 0; color: var(--dim); transition: color var(--d-hit) linear; }
.menu-socials a:hover, .menu-socials a:focus-visible { color: var(--fg); }

/* ================================================================ gate */
.gate {
  position: fixed; inset: 0; z-index: 10;
  background: var(--night); color: var(--warm-white);
  transition: opacity 460ms var(--breath), visibility 0s linear 460ms;
}
html[data-phase="intro"] .gate, html[data-phase="hero"] .gate { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-name { position: absolute; left: var(--gutter); top: max(22px, env(safe-area-inset-top)); margin: 0; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #8e8a83; }
.gate-line { position: absolute; left: calc(var(--lx, 50vw) * 1px - 1px); top: calc(var(--ly0, 60) * 1px); height: calc((var(--ly1, 600) - var(--ly0, 60) - var(--gtrim, 0)) * 1px); width: 2px; }
/* the line stops short of the choices (main.js --gtrim); with no choices, and as the intro takes over, it is the world's line */
.gate[data-skip] .gate-line { --gtrim: 0; }
html[data-phase="intro"] .gate-line { --gtrim: 0; transition: height 460ms var(--breath); }
.gate-line::before { content: ''; position: absolute; inset: 0; background: rgba(255, 249, 240, 0.06); }
.gate-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--warm-white); box-shadow: 0 0 4px rgba(255, 249, 240, 0.45), 0 0 22px rgba(255, 249, 240, 0.14); }
.gate-fill::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 22px; height: 22px; transform: translate(-50%, 50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 208, 0.85), rgba(255, 238, 208, 0) 68%); opacity: var(--tip, 1); }
html[data-phase="gate"] .gate-fill { animation: gateBreath 6.6s var(--breath) infinite alternate; }
@keyframes gateBreath {
  from { box-shadow: 0 0 4px rgba(255, 249, 240, 0.45), 0 0 22px rgba(255, 249, 240, 0.14); }
  to { box-shadow: 0 0 6px rgba(255, 249, 240, 0.6), 0 0 34px rgba(255, 249, 240, 0.22); }
}
.gate[data-ignite="gw"] { --ig: #00e5ff; --ig-glow: rgba(0, 229, 255, 0.6); --ig-glow2: rgba(0, 229, 255, 0.24); }
.gate[data-ignite="ll"] { --ig: #ffe6b8; --ig-glow: rgba(238, 189, 85, 0.55); --ig-glow2: rgba(238, 189, 85, 0.2); }
/* the ignition (owner 2026-09-29): the full line flares once, white-hot, and settles into the colour of the world the
   visitor is about to enter (cyan: the Ghostwriter; warm gold-white: the Architect, whose ink would not show on black) */
.gate[data-ignite] .gate-fill { animation: gateIgnite 1.1s linear 1 both, gateBreathIg 6.6s var(--breath) 1.1s infinite alternate; }
@keyframes gateIgnite {
  0% { background: var(--warm-white); box-shadow: 0 0 4px rgba(255, 249, 240, 0.45), 0 0 22px rgba(255, 249, 240, 0.14); }
  14% { background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 64px rgba(255, 255, 255, 0.5); }
  100% { background: var(--ig); box-shadow: 0 0 6px var(--ig-glow), 0 0 34px var(--ig-glow2); }
}
@keyframes gateBreathIg {
  from { background: var(--ig); box-shadow: 0 0 6px var(--ig-glow), 0 0 34px var(--ig-glow2); }
  to { background: var(--ig); box-shadow: 0 0 8px var(--ig-glow), 0 0 46px var(--ig-glow2); }
}
.gate-choices { position: absolute; left: calc(var(--lx, 50vw) * 1px); top: calc(var(--gy, 700) * 1px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.gate-btn { position: relative; padding: 0.8rem 0.9rem 0.8rem calc(0.9rem + 0.3em); font-size: 0.74rem; line-height: 1; letter-spacing: 0.3em; white-space: nowrap; transition: color var(--d-hit) linear, opacity var(--d-mid) var(--breath); }
.gate-sound { text-transform: uppercase; color: var(--warm-white); font-weight: 500; }
.gate-silent { font-size: 0.66rem; letter-spacing: 0.22em; color: #9b978f; }
.gate-btn::after { content: ''; position: absolute; left: 50%; bottom: 0.42rem; width: 2.2rem; height: 1px; margin-left: -1.1rem; background: currentColor; transform: scaleX(0); transition: transform var(--d-short) var(--punch); }
.gate-btn:hover::after, .gate-btn:focus-visible::after { transform: scaleX(1); }
.gate-btn:focus-visible { outline: none; }
.gate-btn:focus-visible::after { height: 2px; box-shadow: 0 0 8px rgba(255, 249, 240, 0.5); }
.gate-silent:hover, .gate-silent:focus-visible { color: #d8d3ca; }
html[data-phase="loading"] .gate-btn { opacity: 0.62; }
.gate[data-chosen] .gate-btn:not([aria-busy="true"]) { opacity: 0; pointer-events: none; }
.gate[data-chosen] .gate-btn[aria-busy="true"] { animation: gateWait 1.3s var(--breath) infinite alternate; }
/* arriving from another page of the site: the gate is only the loader (the line), no choices */
.gate[data-skip] .gate-choices { visibility: hidden; }
@keyframes gateWait { from { opacity: 0.9; } to { opacity: 0.4; } }
/* ---- THE MASK LOADER (main.js egg, mask3d.js startLoader; owner 2026-10-10): with html[data-egg] the loading screen is
   the 3D mask on the canvas under the gate. Until the page decides (data-egg-wait) neither the old line nor the choices
   show, so the old line never flashes. The gate keeps its black until the mask has drawn (data-egg-live), then it is
   see-through: the canvas's black is the mask's own. The old line goes; a three-digit counter sits under the chin (the
   channel intro's credit spot: its grey, tracked wide) and the two choices take its place when everything is in. */
.gate-count { display: none; }
.gate[data-egg-wait] .gate-line, .gate[data-egg-wait] .gate-choices { visibility: hidden; }
html[data-egg] .gate-line { display: none; }
html[data-egg-live] .gate { background: transparent; }
/* reduced motion: the gate fades to the still mask (200 ms), and away from it as fast */
html[data-rm="1"][data-egg] .gate { transition: opacity 200ms linear, visibility 0s linear 200ms, background-color 200ms linear; }
html[data-egg] .gate-count { display: block; position: absolute; left: calc(var(--lx, 50vw) * 1px); top: calc(var(--gy, 700) * 1px); transform: translateX(-50%); margin: 0; padding: 0.8rem 0 0 0.35em; font-size: 0.66rem; line-height: 1; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: #8b8f96; }
html[data-egg] .gate:not([data-egg-ready]) .gate-choices { visibility: hidden; }
/* the beams (gate-loader.js): the egg's outline drawn in light from the crown, one each way round, meeting at the chin;
   near-white cores (235, 245, 255) in two soft glows, the heads brighter (200, 240, 255) with a wider glow (the channel
   intro's look). The layer cools away as the porcelain lights up (its opacity, from the script). */
.gate-beams { display: none; }
html[data-egg] .gate-beams { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gate-beams path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gate-beams .beam-wide { stroke: rgb(150, 210, 255); stroke-width: 9; opacity: 0.07; }
.gate-beams .beam-mid { stroke: rgb(205, 232, 255); stroke-width: 3.2; opacity: 0.22; }
.gate-beams .beam-core { stroke: rgb(235, 245, 255); stroke-width: 1.3; }
.gate-beams .beam-head { fill: rgb(225, 248, 255); }
/* the digits turn into the words in place: the counter goes at once, ENTER WITH SOUND scrambles on its line */
html[data-egg] .gate[data-egg-ready] .gate-count { visibility: hidden; }
/* heat: the gate is gone after the intro; its waiting pulse stops with it */
html[data-phase="intro"] .gate .gate-btn, html[data-phase="hero"] .gate .gate-btn { animation: none; }

/* ================================================================ phones and narrow screens: the spine at the left edge */
@media (max-width: 719.98px) {
  :root { --gutter: 16px; --arm: 18px; --fh: 66svh; }
  .rung, .door-row { grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); }
  .rung, .rung.swap { margin-top: 0; margin-bottom: 1.6rem; }
  .rung--ll .card, .rung--gw .card { grid-column: 2; justify-self: stretch; width: auto; margin: 0 var(--gutter) 0 var(--arm); }
  .rung--ll .rung-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; }
  .js-reveal .rung--ll .card { transform: translateX(-24px) rotate(-1deg) scale(0.97); }
  .rung-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .rung-play .ring circle { stroke-dasharray: 125.7; stroke-dashoffset: 125.7; }
  .card--song .card-hit { grid-template-columns: 72px minmax(0, 1fr); gap: 0.85rem; padding: 0.75rem 0.9rem 0.8rem 0.75rem; }
  .card--song .cover { width: 72px; height: 72px; }
  .card--song .card-title { font-size: 1.75rem; }
  .card--song .card-abs { display: none; }
  .card--essay .card-title { font-size: 2rem; }
  .card--gw .card-hit, .card--ll .card-hit { box-shadow: none; }
  .card--ll .card-hit { box-shadow: 5px 5px 0 var(--paint, var(--p-magenta)); }
  .card--gw .card-hit { box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55); }
  .door { margin-left: calc(var(--lx) * 1px + var(--arm)); grid-template-columns: auto auto; }
  .door span { padding: 0 1rem; }
  .door .door-l { justify-content: flex-start; }

  .about-stage { height: auto; }
  .figure-slot { position: relative; inset: auto; height: var(--fh); }
  .figure-img { left: 50%; transform: translateX(-50%); }
  .plate { position: relative; right: auto; bottom: auto; width: auto; margin: -1.2rem var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .plate-name { font-size: 4.2rem; }
  .stat { grid-template-columns: 4.6rem 2.8rem minmax(0, 1fr); gap: 0.7rem; }
  .stat .split { letter-spacing: 0.08em; }   /* 15 ARCHITECT / 28 GHOSTWRITER on one line at 390 px */

  .foot-row { top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); font-size: 0.56rem; letter-spacing: 0.16em; }
  .foot-row::before { top: -18px; left: var(--gutter); width: calc(100% - 2 * var(--gutter)); }
  .foot-l { padding-right: 0.9rem; gap: 0 0.8rem; }
  .foot-r { padding-left: 0.9rem; gap: 0.2rem; }
  .foot-r .big { font-size: 1.45rem; }
  .foot-r .shot span { display: none; }
  .foot-r .big { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .name { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .player { width: calc(100% - 2 * var(--gutter)); }
  .eyebrow { margin-bottom: 0.55rem; }
  .title { flex-direction: row; gap: 0.22em; font-size: 2.35rem; }
  .track { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .cue { display: none; }
  .scrim-ll { background: linear-gradient(to top, rgba(244, 244, 240, 0.95) 0, rgba(244, 244, 240, 0.8) 30%, rgba(244, 244, 240, 0) 48%); }
  .scrim-gw { background: linear-gradient(to top, rgba(3, 5, 7, 0.92) 0, rgba(3, 5, 7, 0.7) 30%, rgba(3, 5, 7, 0) 48%); }
  .menu-meta { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.8rem; }
  /* (the small line stays inside the opening between the halves) */
  .menu-subs { gap: 0.2rem; }
  .menu-subs .menu-sub { padding: 0.55rem 0.45rem; letter-spacing: 0.36em; }
  .menu-subs .menu-sub span { padding-left: 0.36em; }
  .menu-now { gap: 0.6rem; letter-spacing: 0.16em; }
  .menu-now .k { white-space: nowrap; }
  .menu-socials { justify-content: center; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .title { font-size: 2.2rem; }
  .track { padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

/* ================================================================ reduced motion: a still edition, crossfades only */
@media (prefers-reduced-motion: reduce) {
  .gate[data-ignite] .gate-fill { animation: none; background: var(--ig); box-shadow: 0 0 6px var(--ig-glow), 0 0 34px var(--ig-glow2); transition: background 200ms, box-shadow 200ms; }
  *, *::before, *::after { animation: none !important; }
  .gate { transition-duration: 200ms, 0s; transition-delay: 0s, 200ms; }
  .ui, .scrim i, .name, .player, .sound { transition-duration: 200ms !important; transition-delay: 0s !important; }
  .track::before, .sound-bars i, .gate-btn::after { transition-duration: 0s !important; }
}
html[data-rm="1"] *, html[data-rm="1"] *::before, html[data-rm="1"] *::after { animation: none !important; }
html[data-rm="1"] .name, html[data-rm="1"] .player, html[data-rm="1"] .sound { transform: none; }
html[data-rm="1"] .js-reveal .rung .card, html[data-rm="1"] .js-reveal .rung .rung-arm,
html[data-rm="1"] .js-reveal .rung .rung-node, html[data-rm="1"] .js-reveal .rung .rung-play { clip-path: none; transform: none; transition: opacity 200ms linear !important; }
html[data-rm="1"] .js-reveal .rung.is-in .card { transform: rotate(var(--tilt, 0deg)); }
html[data-rm="1"] .js-reveal .rung .rung-arm, html[data-rm="1"] .js-reveal .rung .rung-node, html[data-rm="1"] .js-reveal .rung .rung-play { opacity: 0; }
html[data-rm="1"] .js-reveal .rung.is-in .rung-arm, html[data-rm="1"] .js-reveal .rung.is-in .rung-node, html[data-rm="1"] .js-reveal .rung.is-in .rung-play { opacity: 1; }
html[data-rm="1"] .about .plate, html[data-rm="1"] .about .about-aside { transition: opacity 200ms linear; }
html[data-rm="1"] .menu-word span { clip-path: none; opacity: 0; transition: opacity 200ms linear; }
html[data-rm="1"][data-menu="open"] .menu-word span { opacity: 1; }
html[data-rm="1"] .menu-sub span { clip-path: none; opacity: 0; transition: opacity 200ms linear; }
html[data-rm="1"][data-menu="open"] .menu-sub span { opacity: 1; }
html[data-rm="1"] .menu-sub::before, html[data-rm="1"] .menu-sub::after { transition: opacity 200ms linear; }
html[data-rm="1"] .menu-meta { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .card-hit, html[data-rm="1"] .door span, html[data-rm="1"] .player { transition-duration: 0s !important; }


/* ================================================================ round 3 on phones: the spine at the left edge, every block to its right */
@media (max-width: 719.98px) {
  .ch-head { width: auto; max-width: none; margin: 0 var(--gutter) 7vh calc(var(--lx) * 1px + var(--arm)); translate: none; align-items: flex-start; text-align: left; }
  .ch-meta { display: flex; gap: 1.1rem; width: auto; min-width: 0; }
  .ch-title { font-size: clamp(4.4rem, 24vw, 7rem); }
  .ch-title--md { font-size: clamp(3rem, 15vw, 4.6rem); }
  .ch-title--sub { font-size: clamp(2.6rem, 12.5vw, 3.8rem); }
  .ch-title--band { font-size: clamp(3.6rem, 19vw, 5.6rem); }
  .ch-title--md .w, .ch-title--md .slice, .ch-title--sub .w, .ch-title--sub .slice { white-space: normal; }
  .side { text-align: left; }
  .ch-lead { font-size: 1.02rem; margin-top: 1.6rem; }
  /* the blog on a phone: the line leaves the edge for the middle of the screen while the seam is open (main.js),
     so the chapter is centred like on desktop: the header, the own-words card and the essays straddle the line */
  .chapter--seam .ch-head { margin: 0 calc(var(--gutter) + 6px) 7vh; align-items: center; text-align: center; }
  .chapter--seam .ch-meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; width: 100%; }
  .chapter--seam .side { text-align: center; }
  .ch-own { width: auto; margin-top: 2rem; }
  .ch-own .seam-face { padding: 0.95rem 1.7rem 1rem 1.5rem; font-size: 0.96rem; }
  .essays { gap: 2rem; }
  .essay { width: auto; margin: 0 calc(var(--gutter) + 6px); translate: none; }
  .chapter--seam .door { margin-left: calc(50% - 9rem); grid-template-columns: 9rem 9rem; }
  .chapter--seam .door .door-l { justify-content: flex-end; }
  html[data-seam="1"][data-condensed="1"] .player { --sx: 50%; }
  /* the bar's paper half is too narrow for the side word and the title: at the seam (the human, not a persona) the
     title alone, so it reads whole */
  html[data-seam="1"][data-condensed="1"] .now-side { display: none; }
  html[data-seam="1"][data-condensed="1"] .now { letter-spacing: 0.05em; }
  .essay-text { padding: 0.95rem 1.9rem 1.05rem 1.6rem; }
  .essay-title { font-size: 1.95rem; }
  .essay-abs { font-size: 0.9rem; }
  .work { padding-top: 14vh; }
  .work-in { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .work-mark { width: 112px; margin: 0 0 0 0.4rem; }
  .work-text { margin: 0; max-width: none; }
  .work-line { font-size: 1.95rem; }
  .me { display: block; padding: 11vh var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .me-h { justify-self: auto; margin: 0 0 1.1rem; text-align: left; }
  .recog { display: block; padding: 6vh var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .recog-k { justify-self: auto; margin: 0 0 0.7rem; text-align: left; }
  .recog-in { justify-self: auto; margin: 0; max-width: none; }
  html[data-world="ll"] .recog-a { font-size: 1.02rem; }
  html[data-world="gw"] .recog-a { font-size: 0.74rem; }
  .me-sheet { justify-self: auto; width: auto; margin: 0 0.4rem 0 0; }
  .me-tape { width: 72px; height: 22px; }
  .me-tape--a { left: -10px; top: -8px; rotate: -20deg; }
  .me-tape--b { right: -14px; top: -8px; rotate: 24deg; }
  html[data-world="ll"] .me-sheet { --me-rule: 2rem; padding: 1.45rem 1.25rem 1.35rem 1.3rem; }
  html[data-world="gw"] .me-sheet { padding: 1rem 1.1rem 1.2rem 1.1rem; }
  html[data-world="gw"] .me-text { font-size: 0.8rem; line-height: 1.8; }
  .band { margin-top: 10vh; padding: 11vh 0 10vh; }
  .band-ribbon { left: calc(-1 * (var(--lx) * 1px + var(--arm))); height: clamp(120px, 34vw, 170px); }
  .band-reel { width: 100%; }
  .band-line { font-size: 1.7rem; }
  .band-sub { font-size: 0.94rem; }
  .band-cta { grid-template-columns: auto; }
  .band-cta-r { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
  .friends { padding-top: 16vh; }
  .friends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.1rem; width: auto; margin: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); translate: none; }
  .friend-name { font-size: 1.35rem; }
  .friend-tag { font-size: 0.8rem; }
  html[data-world="ll"] .friend-hit { padding: 6px 6px 0; }
  .foot-note { margin-top: 0.35rem; font-size: 0.5rem; letter-spacing: 0.2em; }
}
/* round 3, reduced motion: the headers fade (page-fx.js), the blocks crossfade */
html[data-rm="1"] .rb-chip { transition: none; }
html[data-rm="1"] .js-reveal .essay, html[data-rm="1"] .js-reveal .work-in, html[data-rm="1"] .js-reveal .friend { transform: none; transition: opacity 200ms linear !important; }
html[data-rm="1"] .seam-under, html[data-rm="1"] .friend-hit, html[data-rm="1"] .band-cta { transition-duration: 0s !important; }


/* ================================================================ THE PLAYER (player.js): everything comes out of the line
   The screen forms out of the line in the main canvas (player-fx.js: LL a poster pasted on a painted wall, GW a CRT
   in a dark room); this layer is the DOM on top of it: the cropped YouTube iframe, our poster cover, the line under
   the frame as the real progress bar and scrubber, the controls in the mono type. Geometry comes from player.js as
   CSS px: --vx --vy --vw --vh (the picture), --ly (the line), --by (the controls' top), --vb (the border), --crop.
   Without the fx pass (or it failed) the frame brings its own border and simply fades in. */
html[data-vp="opening"] .scroller, html[data-vp="open"] .scroller, html[data-vp="closing"] .scroller {
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--breath), visibility 0s linear 220ms;
}
html[data-phase="hero"][data-vp="opening"] .ui, html[data-phase="hero"][data-vp="open"] .ui, html[data-phase="hero"][data-vp="closing"] .ui { opacity: 0; }
html[data-vp="opening"] .scrim i, html[data-vp="open"] .scrim i, html[data-vp="closing"] .scrim i { opacity: 0 !important; }

.vp {
  --vp-fg: var(--ll-ink); --vp-dim: #4a4740; --vp-line: var(--ll-ink); --vp-track: rgba(11, 11, 12, 0.2);
  --vp-glow: 0 0 0 transparent; --vp-focus: var(--ll-ink); --vp-ease: var(--punch);
  position: fixed; inset: 0; z-index: 7;
  font-family: var(--mono); color: var(--vp-fg);
}
.vp[data-side="gw"] {
  --vp-fg: #e6f5f7; --vp-dim: #8fa3a8; --vp-line: var(--cyan); --vp-track: rgba(0, 229, 255, 0.2);
  --vp-glow: 0 0 6px rgba(0, 229, 255, 0.85), 0 0 18px rgba(0, 229, 255, 0.4); --vp-focus: var(--cyan); --vp-ease: var(--breath);
}
.vp :focus-visible { outline: 2px solid var(--vp-focus); outline-offset: 3px; }
.vp .vp-btn:focus-visible, .vp .vp-fb-link:focus-visible { border-radius: 2px; }

/* outside the frame: a click closes. The fx pass paints the room; without it, a quiet veil */
.vp-veil { position: absolute; inset: 0; cursor: pointer; }
.vp[data-fx="0"] .vp-veil { opacity: 0; transition: opacity 320ms var(--breath); }
.vp[data-fx="0"][data-side="ll"] .vp-veil { background: rgba(244, 244, 240, 0.72); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); }
.vp[data-fx="0"][data-side="gw"] .vp-veil { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 229, 255, 0.07), rgba(2, 4, 6, 0.86) 70%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vp[data-fx="0"]:is([data-stage="form"], [data-stage="fade"], [data-stage="show"]) .vp-veil { opacity: 1; }

/* the picture */
.vp-frame {
  position: absolute; left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh);
  overflow: hidden; background: #000; z-index: 1;
  opacity: 0; transition: opacity 140ms linear;
}
.vp:is([data-stage="fade"], [data-stage="show"]) .vp-frame { opacity: 1; }
.vp[data-stage="hide"] .vp-frame { opacity: 0; transition-duration: 150ms; }
/* no fx: the frame brings its own poster border (LL) or bezel (GW) and grows in on the world's curve */
.vp[data-fx="0"] .vp-frame { transform: scale(0.965); transition: opacity 280ms linear, transform 460ms var(--vp-ease); }
.vp[data-fx="0"]:is([data-stage="fade"], [data-stage="show"]) .vp-frame { transform: none; }
.vp[data-fx="0"][data-side="ll"] .vp-frame {
  overflow: visible;
  box-shadow: 0 0 0 var(--vb) #f6f2e8, 0 0 0 calc(var(--vb) + 2px) var(--ll-ink), 12px 14px 0 calc(var(--vb) + 2px) var(--p-magenta);
}
.vp[data-fx="0"][data-side="gw"] .vp-frame {
  overflow: visible;
  box-shadow: 0 0 0 var(--vb) #05080a, 0 0 0 calc(var(--vb) + 1px) rgba(0, 229, 255, 0.4), 0 0 90px 10px rgba(0, 229, 255, 0.16);
}
.vp[data-fx="0"] .vp-frame > * { border-radius: 0; }
.vp[data-fx="0"][data-stage="hide"] .vp-frame { transform: scale(0.98); transition: opacity 200ms linear, transform 240ms var(--breath); }
/* the fx pass arrived late (compile ahead, player.js fxLate): this video opened plainly; the pass's frame fades in on the
   canvas under this layer while the plain veil, border and line fade out (the same shapes, gone transparent) */
.vp[data-fx="0"][data-fxin="1"]:is([data-stage="form"], [data-stage="fade"], [data-stage="show"]) .vp-veil { opacity: 0; }
.vp[data-fx="0"][data-fxin="1"] .vp-frame { transition: opacity 280ms linear, transform 460ms var(--vp-ease), box-shadow 420ms linear; }
.vp[data-fx="0"][data-fxin="1"][data-side="ll"] .vp-frame {
  box-shadow: 0 0 0 var(--vb) rgba(246, 242, 232, 0), 0 0 0 calc(var(--vb) + 2px) rgba(11, 11, 12, 0), 12px 14px 0 calc(var(--vb) + 2px) rgba(255, 46, 126, 0);
}
.vp[data-fx="0"][data-fxin="1"][data-side="gw"] .vp-frame {
  box-shadow: 0 0 0 var(--vb) rgba(5, 8, 10, 0), 0 0 0 calc(var(--vb) + 1px) rgba(0, 229, 255, 0), 0 0 90px 10px rgba(0, 229, 255, 0);
}

/* YouTube, cropped: taller than the frame by --crop on each side, so its title bar and logo sit outside the box */
.vp-crop { position: absolute; inset: 0; overflow: hidden; background: #000; }
.vp-crop iframe, .vp-crop .vp-yt {
  position: absolute; left: 0; top: calc(-1 * var(--crop, 72px));
  width: 100%; height: calc(100% + 2 * var(--crop, 72px));
  border: 0; display: block; pointer-events: none;
}
.vp-hit { position: absolute; inset: 0; cursor: pointer; }

/* our poster over YouTube until the video really plays, and again on pause and at the end */
.vp-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 1; transition: opacity 260ms linear; cursor: pointer; }
.vp-cover[data-mode="off"] { opacity: 0; pointer-events: none; transition-delay: 90ms; }
.vp-cover-img { width: 100%; height: 100%; object-fit: cover; transition: filter 320ms linear; }
.vp[data-side="gw"] .vp-cover-img { filter: grayscale(0.4) contrast(1.08) brightness(0.74); }
.vp[data-side="gw"] .vp-cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5));
}
.vp-cover[data-mode="load"] .vp-cover-img { filter: brightness(0.86) saturate(0.95); }
.vp[data-side="gw"] .vp-cover[data-mode="load"] .vp-cover-img { filter: grayscale(0.6) brightness(0.55); }
.vp-glyph {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; transform: scale(0.6);
  transition: opacity 160ms linear, transform 360ms var(--vp-ease);
}
.vp-glyph svg { grid-area: 1 / 1; width: 24px; height: 24px; fill: currentColor; }
.vp-glyph .g-play { margin-left: 4px; }
.vp-glyph .g-replay { display: none; }
.vp-cover[data-mode="replay"] .g-play { display: none; }
.vp-cover[data-mode="replay"] .g-replay { display: block; }
.vp-cover:is([data-mode="play"], [data-mode="replay"]) .vp-glyph { opacity: 1; transform: none; }
.vp[data-fallback="1"] .vp-glyph { opacity: 0 !important; }
.vp[data-side="ll"] .vp-glyph { background: var(--p-magenta); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 6px 6px 0 2px var(--ll-ink); rotate: -6deg; }
.vp[data-side="ll"] .vp-cover:hover .vp-glyph { background: var(--p-yellow); }
.vp[data-side="gw"] .vp-glyph { color: var(--cyan); background: rgba(3, 6, 8, 0.62); box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0, 229, 255, 0.6), inset 0 0 18px rgba(0, 229, 255, 0.25); z-index: 1; }
.vp[data-side="gw"] .vp-glyph svg { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.9)); }

/* embedding disabled or the engine could not load: a card with the one way out */
.vp-fallback { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1.5rem; text-align: center; }
.vp[data-side="ll"] .vp-fallback { background: rgba(244, 244, 240, 0.9); }
.vp[data-side="gw"] .vp-fallback { background: rgba(3, 5, 7, 0.86); }
.vp-fb-in { display: grid; justify-items: center; gap: 0.9rem; max-width: 34rem; }
.vp-fb-msg { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vp-dim); }
.vp-fb-title { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 0.95; letter-spacing: 0.02em; color: var(--vp-fg); }
.vp-fb-link {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.3rem; padding: 0.85rem 1.2rem;
  font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; border: 1px solid currentColor;
  transition: background-color var(--d-hit) linear, color var(--d-hit) linear, box-shadow var(--d-short) var(--vp-ease);
}
.vp-fb-link svg { width: 12px; height: 12px; fill: currentColor; }
.vp[data-side="ll"] .vp-fb-link:hover { background: var(--ll-ink); color: var(--paper); }
.vp[data-side="gw"] .vp-fb-link { color: var(--cyan); }
.vp[data-side="gw"] .vp-fb-link:hover { box-shadow: 0 0 22px rgba(0, 229, 255, 0.4), inset 0 0 12px rgba(0, 229, 255, 0.15); }

/* THE LINE under the frame: the real progress bar and the scrubber. With the fx pass the canvas draws the line
   (it draws out of the living line and lights the room); this element is its hit area, its knob and its focus. */
.vp-line {
  position: absolute; left: var(--vx); width: var(--vw); top: calc(var(--ly) - 11px); height: 22px;
  z-index: 2; cursor: pointer; touch-action: none;
  opacity: 0; transition: opacity 240ms linear;
}
.vp-line > i { position: absolute; left: 0; top: 50%; display: block; pointer-events: none; }
.vp-track { right: 0; height: 2px; margin-top: -1px; background: var(--vp-track); }
.vp-fill { width: 100%; height: 2px; margin-top: -1px; background: var(--vp-line); box-shadow: var(--vp-glow); transform-origin: 0 50%; transform: scaleX(var(--vp, 0)); }
.vp[data-side="ll"] .vp-fill { height: 3px; margin-top: -1.5px; }
.vp-head {
  left: calc(var(--vp, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--vp-line); box-shadow: var(--vp-glow); transform: scale(0); transition: transform 180ms var(--vp-ease);
}
.vp[data-side="ll"] .vp-head { box-shadow: 0 0 0 2px #f6f2e8; }
.vp[data-side="gw"] .vp-head { background: #eaffff; }
.vp-line:hover .vp-head, .vp-line:focus-visible .vp-head, .vp[data-scrub="1"] .vp-head { transform: scale(1); }
.vp-line:focus-visible { outline-offset: 2px; }
.vp[data-fx="1"]:not([data-mode="fill"]) .vp-track, .vp[data-fx="1"]:not([data-mode="fill"]) .vp-fill { visibility: hidden; }
.vp[data-fxin="1"]:not([data-mode="fill"]) :is(.vp-track, .vp-fill) { opacity: 0; transition: opacity 320ms linear; }
/* loading: the line breathes (LL an ink pulse runs along it, GW the tube flickers up) */
.vp-line::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; opacity: 0; pointer-events: none; }
.vp[data-busy="1"] .vp-line::after { opacity: 1; }
.vp[data-side="ll"][data-busy="1"] .vp-line::after { background: linear-gradient(90deg, transparent 0 40%, var(--ll-ink) 50%, transparent 60% 100%) 0 0 / 250% 100%; animation: vpRun 1.1s var(--punch) infinite; }
.vp[data-side="gw"][data-busy="1"] .vp-line::after { background: var(--cyan); box-shadow: var(--vp-glow); animation: vpFlick 1.6s var(--breath) infinite alternate; }
@keyframes vpRun { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes vpFlick { from { opacity: 0.12; } to { opacity: 0.55; } }

/* the controls: LL a paper label pasted under the poster, GW the deck under the screen */
.vp-bar {
  position: absolute; left: var(--vx); width: var(--vw); top: var(--by); z-index: 2;
  display: flex; align-items: center; gap: 0.35rem;
  min-height: 44px; padding: 4px 6px 4px 5px;
  font-size: 0.62rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms linear, transform 460ms var(--vp-ease);
}
.vp[data-side="ll"] .vp-bar { background: #f6f2e8 var(--grain); background-size: auto, 160px 160px; border: 2px solid var(--ll-ink); box-shadow: 5px 5px 0 var(--p-yellow); }
.vp[data-side="gw"] .vp-bar { background: rgba(4, 7, 9, 0.84); border: 1px solid rgba(0, 229, 255, 0.22); box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55), 0 0 30px -12px rgba(0, 229, 255, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vp:is([data-stage="fade"], [data-stage="show"]) :is(.vp-bar, .vp-line) { opacity: 1; transform: none; }
.vp[data-fx="1"][data-stage="show"] .vp-bar { transition-delay: 120ms; }
.vp[data-stage="hide"] :is(.vp-bar, .vp-line) { opacity: 0; transition: opacity 140ms linear; }
.vp-pp {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; color: var(--vp-fg);
  transition: transform var(--d-short) var(--vp-ease), background-color var(--d-hit) linear, color var(--d-hit) linear, box-shadow var(--d-short) var(--vp-ease);
}
.vp-pp svg { grid-area: 1 / 1; width: 12px; height: 12px; fill: currentColor; }
.vp-pp .i-play { margin-left: 2px; }
.vp-pp .i-pause, .vp[data-playing="1"] .vp-pp .i-play { display: none; }
.vp[data-playing="1"] .vp-pp .i-pause { display: block; }
.vp[data-side="ll"] .vp-pp:hover { background: var(--ll-ink); color: #f6f2e8; }
.vp[data-side="gw"] .vp-pp { color: var(--cyan); border-color: rgba(0, 229, 255, 0.55); }
.vp[data-side="gw"] .vp-pp:hover { box-shadow: 0 0 16px rgba(0, 229, 255, 0.45), inset 0 0 10px rgba(0, 229, 255, 0.2); }
.vp-pp:active { transform: scale(0.93); }
.vp-time { flex: none; padding: 0 0.55rem 0 0.4rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; white-space: nowrap; }
.vp-dur { color: var(--vp-dim); }
.vp-dur:not(:empty)::before { content: ' / '; }
.vp-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.8em; white-space: nowrap; }
.vp-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vp-side { flex: none; font-weight: 700; letter-spacing: 0.2em; position: relative; }
.vp[data-side="ll"] .vp-side { padding: 0.16rem 0.4rem 0.12rem 0.48rem; z-index: 0; }
.vp[data-side="ll"] .vp-side::before {
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--p-orange);
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%); transform: skewX(-12deg);
}
.vp[data-side="gw"] .vp-side { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.75); }
.vp-btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 34px; padding: 0 0.6rem;
  color: var(--vp-fg); transition: color var(--d-hit) linear, background-color var(--d-hit) linear;
}
.vp-btn svg { width: 13px; height: 13px; fill: currentColor; }
.vp-fs .i-fsx, .vp[data-fs="1"] .vp-fs .i-fs { display: none; }
.vp[data-fs="1"] .vp-fs .i-fsx { display: block; }
.vp[data-side="ll"] .vp-btn:hover { background: var(--ll-ink); color: #f6f2e8; }
.vp[data-side="gw"] .vp-btn:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
.vp-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.vp-bars i { display: block; width: 2px; height: 2px; background: currentColor; transition: height var(--d-short) var(--vp-ease); }
.vp:not([data-muted="1"])[data-playing="1"] .vp-bars i:nth-child(1) { height: 6px; }
.vp:not([data-muted="1"])[data-playing="1"] .vp-bars i:nth-child(2) { height: 10px; }
.vp:not([data-muted="1"])[data-playing="1"] .vp-bars i:nth-child(3) { height: 4px; }
.vp[data-muted="1"] .vp-mute-l { text-decoration: line-through; text-decoration-thickness: 1px; }
.vp-close { margin-left: 0.1rem; }
.vp-close svg { width: 11px; height: 11px; }

/* phones: the frame is full width, the controls in two rows under it */
.vp[data-mode="phone"] .vp-bar {
  left: 10px; width: calc(var(--vw) - 20px);
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'tt tt tt tt tt tt' 'pp tm . mu fs cl';
  row-gap: 4px; padding: 8px 6px 6px 8px;
}
.vp[data-mode="phone"] .vp-title { grid-area: tt; padding: 2px 2px 4px; }
.vp[data-mode="phone"] .vp-pp { grid-area: pp; }
.vp[data-mode="phone"] .vp-time { grid-area: tm; }
.vp[data-mode="phone"] .vp-mute { grid-area: mu; }
.vp[data-mode="phone"] .vp-fs { grid-area: fs; }
.vp[data-mode="phone"] .vp-close { grid-area: cl; }
.vp[data-mode="phone"] .vp-btn { padding: 0 0.5rem; }
.vp[data-mode="phone"] .vp-close-l, .vp[data-mode="phone"] .vp-mute-l { display: none; }
.vp[data-mode="phone"] .vp-btn { min-width: 38px; min-height: 38px; justify-content: center; }

/* full screen (and a phone turned sideways): the picture fills the screen, the line and the controls ride over
   its bottom edge and rest while the video plays */
.vp:fullscreen { background: #000; }
.vp::backdrop { background: #000; }
.vp[data-fs="1"], .vp[data-mode="fill"] { background: #000; }
.vp[data-mode="fill"] .vp-veil { background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vp[data-mode="fill"] .vp-frame { box-shadow: none !important; transform: none !important; }
.vp[data-mode="fill"] .vp-bar {
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto;
  background: rgba(0, 0, 0, 0.55) !important; border-color: transparent !important; box-shadow: none !important; color: #f4f4f0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vp[data-mode="fill"] .vp-line { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; }
.vp[data-mode="fill"][data-side="ll"] { --vp-line: #f6f2e8; --vp-track: rgba(246, 242, 232, 0.25); --vp-fg: #f6f2e8; --vp-focus: #f6f2e8; }
.vp[data-mode="fill"][data-side="ll"] .vp-side { color: var(--ll-ink); }
.vp[data-mode="fill"][data-side="ll"] .vp-btn:hover { background: #f6f2e8; color: var(--ll-ink); }
.vp[data-mode="fill"][data-idle="1"] :is(.vp-bar, .vp-line) { opacity: 0 !important; transition: opacity 500ms linear; }
.vp[data-mode="fill"][data-idle="1"] { cursor: none; }
.vp[data-mode="fill"][data-idle="1"] :is(.vp-hit, .vp-veil) { cursor: none; }

/* reduced motion: the frame fades in and out, nothing grows, the loading line stands still */
.vp[data-rm="1"] .vp-frame, .vp[data-rm="1"] .vp-bar, .vp[data-rm="1"] .vp-glyph { transform: none !important; transition: opacity 200ms linear !important; }
.vp[data-rm="1"] .vp-line::after { animation: none !important; opacity: 0.35; }
.vp[data-rm="1"] .vp-head { transition: none; }

/* a video card is a button now (it opens the player in place) */
button.card-hit { width: 100%; text-align: left; cursor: pointer; }
button.card-hit .card-title { display: block; }
/* our centre glyph over YouTube's own for the seconds its chrome shows after a start or a resume */
.vp-bezel {
  position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 360ms linear;
}
.vp[data-bezel="1"] .vp-bezel { opacity: 1; transition: none; }
.vp-bezel svg { width: 18px; height: 18px; fill: currentColor; }
.vp[data-side="ll"] .vp-bezel { background: var(--ll-ink); color: #f6f2e8; box-shadow: 0 0 0 3px var(--p-magenta), 4px 5px 0 3px var(--p-yellow); rotate: -6deg; }
.vp[data-side="gw"] .vp-bezel { background: #04080a; color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 26px rgba(0, 229, 255, 0.5), inset 0 0 16px rgba(0, 229, 255, 0.22); }
.vp[data-side="gw"] .vp-bezel svg { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.9)); }


/* ================================================================ ROUND 5 (owner notes 2026-09-25) */

/* ---- the essays carry their covers: full-bleed at the top of the seam card, cut by its torn (LL) and stepped (GW)
   edges. The cover's left half is graded paper, its right half a whisper of scanlines and cyan: the seam in the
   picture. Hover lifts both grades and the cover leans in (PUNCH). */
@media (min-width: 720px) { .essay { width: min(46rem, calc(100vw - 2 * var(--gutter) - 4rem)); } }
.essay-cover { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #1a1917; }
.essay-cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; transition: transform var(--d-long) var(--punch), filter var(--d-long) var(--breath); }
.essay-cover::before, .essay-cover::after { content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none; transition: opacity var(--d-mid) var(--breath); }
.essay-cover::before {          /* LL half: paper */
  left: 0; right: 50%;
  background: var(--grain), linear-gradient(90deg, rgba(246, 236, 214, 0.2), rgba(246, 236, 214, 0.04));
  background-size: 160px 160px, auto; mix-blend-mode: multiply; opacity: 0.9;
}
.essay-cover::after {           /* GW half: the screen */
  left: 50%; right: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px), linear-gradient(270deg, rgba(0, 229, 255, 0.14), rgba(0, 229, 255, 0) 75%);
  box-shadow: inset 1px 0 0 rgba(0, 229, 255, 0.28);
}
.essay-card:hover .essay-cover img, .essay-card:focus-visible .essay-cover img { transform: scale(1.035); }
.essay-card:hover .essay-cover::before, .essay-card:hover .essay-cover::after,
.essay-card:focus-visible .essay-cover::before, .essay-card:focus-visible .essay-cover::after { opacity: 0; }
.essay-vid {
  position: absolute; left: 1.5rem; bottom: 0.95rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.72rem 0.38rem 0.6rem; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  background: rgba(11, 11, 12, 0.82); color: #f4f4f0;
}
.essay-vid svg { width: 10px; height: 10px; fill: var(--cyan); filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.9)); }
.essay-text .essay-title { margin-top: 0.5rem; }
html[data-rm="1"] .essay-cover img { transition: none; transform: none !important; }
html[data-rm="1"] .essay-cover::before, html[data-rm="1"] .essay-cover::after { transition-duration: 0s; }

/* ---- SHOTLINE: the I is a glowing cyan light strip (the brand's blade), in LL and GW alike. main.js keeps the letter
   (transparent, so the word keeps its metrics and copies as SHOTLINE) and this draws the strip over its cap height.
   Metrics per face (measured): Bebas Neue cap 0.70em under a 0.90em ascent, I centred 0.096em in; JetBrains Mono
   cap 0.73em under 1.02em, I centred 0.30em in. */
.sl-i { position: relative; color: transparent !important; text-shadow: none !important; --sl-cx: 0.096em; --sl-top: 0.2em; --sl-h: 0.7em; --sl-w: 0.085em; }
.sl-i--mono { --sl-cx: 0.3em; --sl-top: 0.29em; --sl-h: 0.73em; --sl-w: max(1.5px, 0.13em); }
.sl-i::before {
  content: ''; position: absolute; left: var(--sl-cx); top: var(--sl-top); width: var(--sl-w); height: var(--sl-h); translate: -50% 0;
  border-radius: 0.04em; pointer-events: none;
  /* a lit tube: a hot white core, cyan at its edges and ends; the bloom scales with the type, so a display-size
     strip glows like one instead of reading as a bar of metal */
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0) 38%, rgba(0, 229, 255, 0) 62%, rgba(0, 229, 255, 0.95)),
    linear-gradient(180deg, #00e5ff, #f2feff 9%, #ffffff 50%, #f2feff 91%, #00e5ff);
  box-shadow: 0 0 0.03em #00e5ff, 0 0 0.1em rgba(0, 229, 255, 0.95), 0 0 0.26em rgba(0, 229, 255, 0.55), 0 0 0.6em rgba(0, 229, 255, 0.22);
  animation: slFlick 3.6s steps(48) infinite;
}
/* on paper the white core would vanish: the tube runs cyan through, still hot at its middle */
html[data-world="ll"] .sl-i::before {
  background:
    linear-gradient(90deg, #00e5ff, rgba(0, 229, 255, 0.35) 40%, rgba(0, 229, 255, 0.35) 60%, #00e5ff),
    linear-gradient(180deg, #00e5ff, #c4f9ff 12%, #effeff 50%, #c4f9ff 88%, #00e5ff);
  box-shadow: 0 0 0.03em #00e5ff, 0 0 0.1em rgba(0, 229, 255, 0.85), 0 0 0.3em rgba(0, 229, 255, 0.4);
}
/* small mono marks (the CTA, the footer): no taper, or the strip reads as two dots at 7 px */
.sl-i--mono::before { background: linear-gradient(180deg, #9ff4ff, #f2feff 35%, #f2feff 65%, #9ff4ff); box-shadow: 0 0 3px #00e5ff, 0 0 8px rgba(0, 229, 255, 0.85), 0 0 18px rgba(0, 229, 255, 0.45); }
html[data-world="ll"] .sl-i--mono::before { background: linear-gradient(180deg, #00e5ff, #7ff2ff 50%, #00e5ff); box-shadow: 0 0 3px #00e5ff, 0 0 8px rgba(0, 229, 255, 0.7); }
html[data-world="ll"] .band-cta .sl-i--mono::before { background: linear-gradient(180deg, #9ff4ff, #f2feff 35%, #f2feff 65%, #9ff4ff); box-shadow: 0 0 3px #00e5ff, 0 0 8px rgba(0, 229, 255, 0.9), 0 0 18px rgba(0, 229, 255, 0.5); }
/* the CTA styles its own spans as flex cells: the strip's letter stays an inline letter */
html[data-world] .band-cta .sl-i { display: inline; padding: 0; transform: none; background: none; border: 0; }
@keyframes slFlick { 0%, 100% { opacity: 1; } 44% { opacity: 0.9; } 45% { opacity: 1; } 68% { opacity: 0.94; } 90% { opacity: 0.82; } 91% { opacity: 1; } }

/* ---- phones: the reel shows two rows, the song on and the next one (owner 2026-10-06; three lifted the name over the
   photo's line on a small phone, and beside it on a narrow one the player's corner reached the line's foot). The
   previous row waits just above the window, out of sight (.tracks clips it): a step forward carries the song that was
   on up into it, a step back brings it down from there, then it is hidden (out of the reading order, never focused) */
@media (max-width: 719.98px) {
  .track-row[data-slot="prev"] { position: absolute; left: 0; right: 0; bottom: 100%; visibility: hidden; transition: visibility 0s linear var(--ease-d); }
  html[data-rm="1"] .track-row[data-slot="prev"] { transition: none; }
}

/* ---- phones: the top bar is slim and transparent, so the whole head (hood and all) stays clear of it */
@media (max-width: 719.98px) {
  .top { top: max(10px, env(safe-area-inset-top)); }
  .mark { width: 36px; height: 36px; }
  .mark::after { inset: -4px; }
  .top { gap: 0.7rem; }
  .back { gap: 0.5rem; padding: 0.5rem 0.6rem 0.47rem 0.55rem; font-size: 0.55rem; letter-spacing: 0.2em; }
  .back i { width: 14px; }
  .back:hover i, .back:focus-visible i { width: 20px; }
  .sound { padding: 0.4rem 0 0.4rem 0.5rem; font-size: 0.56rem; letter-spacing: 0.22em; gap: 0.5rem; }
  /* round 8, the natural crop: the photo runs up under the bar, so over the Architect's dark hood the ink label keeps a
     soft paper halo (no band across the hood) */
  html[data-world="ll"]:not([data-seam="1"]) .sound { text-shadow: 0 0 3px rgba(244, 244, 240, 0.95), 0 0 9px rgba(244, 244, 240, 0.8); }
  html[data-world="ll"]:not([data-seam="1"]) .sound-bars i { box-shadow: 0 0 3px rgba(244, 244, 240, 0.95); }
  .scroller {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 46px, #000 80px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 46px, #000 80px);
  }
  .gate-name { top: max(16px, env(safe-area-inset-top)); }
  .essay-cover { aspect-ratio: 16 / 9; }
  .essay-vid { left: 1.2rem; bottom: 0.7rem; }
}