/* Uninvited — Sagres Studio, trial 1. An inked graphic novel on paper.
   Type: Anton (sticker display) · Archivo (text, condensed for captions) · IBM Plex Mono (labels). */
@property --c { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --u { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --ink: #121110; --paper: #e9e4d6; --sheet: #f4f0e6; --back: #f1ede4;
  --tape: rgba(242, 194, 48, .74); --tape-ink: #2a2412;
  --gut: max(16px, 2.2vw);
  --t-xl: max(54px, min(8.6vw, 15.2vh)); --t-l: max(40px, 5.6vw); --t-m: max(30px, 3.4vw);
  --t-text: max(16px, 1.14vw); --t-cap: max(13px, .92vw); --t-label: max(10.5px, .68vw);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: hidden; overflow-x: clip; }
/* Lenis (smooth wheel on desktop; touch stays native) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 var(--t-text)/1.5 "Archivo", system-ui, sans-serif; overflow-x: hidden; overflow-x: clip; }
.stage, .who { overflow-x: clip; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }

.label { font: 500 var(--t-label)/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- header: a small sticker + a mail link */
.bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) var(--gut) 0; pointer-events: none; }
/* over the paper pages (chapters, who) the text scrolls up under the header: a band of paper behind it, faded at the
   foot, so captions slide under the mark instead of colliding with it (body.bar-paper, set on scroll in main.js) */
.bar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 30px);
  background: linear-gradient(var(--paper) 64%, rgba(233,228,214,0)); opacity: 0; transition: opacity .25s; pointer-events: none; }
body.bar-paper .bar::before { opacity: 1; }
.bar > * { pointer-events: auto; }
.mark { text-decoration: none; display: inline-block; transform: rotate(-1.2deg); }
.mark span { display: inline-block; font: 400 max(17px, 1.25vw)/1 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em;
  background: var(--ink); color: var(--paper); padding: .215em .34em .205em; clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 96%); }
.write { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  background: var(--sheet); border: 1.5px solid var(--ink); padding: .9em 1.1em .85em; transition: background .2s, color .2s; }
.write i { font-style: normal; display: inline-block; transition: transform .25s cubic-bezier(.2,.9,.2,1.3); }
.write:hover { background: var(--ink); color: var(--paper); }
.write:hover i { transform: translateX(4px); }
/* the shortcut past the story to the work: quieter than the mail link, gone once the work is on screen */
.bar-r { display: flex; gap: .6rem; align-items: center; }
.skip { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); padding: .9em 1.1em .85em; opacity: .9;
  transition: background .2s, color .2s, opacity .35s, visibility .35s; }
.skip i { font-style: normal; display: inline-block; transition: transform .25s cubic-bezier(.2,.9,.2,1.3); }
.skip:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.skip:hover i { transform: translateY(3px); }
body.past-story .skip { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) { .skip-l { display: none; } .skip { padding: .8em .9em; } .bar-r { gap: .4rem; } }
.folio { position: fixed; z-index: 5; right: var(--gut); bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
.folio b { font-weight: 600; }

/* ---------- beats */
.beat { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.beat-title { height: 100vh; height: 100svh; }
.beat-title .stage { position: relative; }
.beat-night { height: 760vh; }
.beat-chapter { height: 300vh; }
.beat-dawn { height: 560vh; }
.beat-bench { height: 260vh; }
.slot { position: absolute; }
.slot-title { right: 7vw; top: 22vh; width: 34vw; height: 46vh; transform: rotate(1.4deg); }
.slot-scene { left: 50%; top: 50%; width: min(46vw, 62vh * 1.6); aspect-ratio: 16 / 10; transform: translate(-50%, -54%); }

/* ---------- title page */
.title-block { position: absolute; left: var(--gut); top: 50%; transform: translateY(-46%); width: min(62vw, 980px); }
.kicker { margin: 0 0 2.6em .2em; }
.lede { max-width: 34ch; margin: 1.8em 0 0 .2em; font-size: max(17px, 1.3vw); line-height: 1.38; font-weight: 450; }
.cue { position: absolute; left: var(--gut); bottom: max(22px, 4vh); margin: 0; }
.cue em { font-style: normal; }
.cue span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; margin: 0 .6em; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ---------- sticker titles (Nocturnal grammar, our build): every line its own black box, applied like vinyl */
.stk { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; width: fit-content; }
/* Box metrics, measured on Anton: caps are .86em tall; at line-height .9 the cap top sits .015em under the line box top
   and the baseline .025em above its bottom; a diaeresis/acute climbs .2em above the caps. Every box shows the caps with
   the same .11em of ink above and below (the next line overlaps the box above by .04em, so non-last lines carry .04em
   more at the bottom); lines with accents (.acc, set by prepStickers) get the room for them on top. */
.stk .ln { position: relative; display: block; font: 400 var(--t-xl)/.9 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .005em;
  color: var(--paper); white-space: nowrap; margin-top: -.04em; opacity: 0; transform-origin: 0% 100%; --c: 0px; --u: 1em; }
.stk .ln:first-of-type { margin-top: 0; }
.stk .ln b { display: block; font-weight: 400; background: var(--ink); padding: .095em .16em .125em .155em;
  clip-path: polygon(0 1%, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, .4% 100%); }
.stk .ln:last-of-type b { padding-bottom: .085em; }
.stk .ln.acc b { padding-top: .265em; }
.stk .ln::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--c); height: var(--c); background: linear-gradient(135deg, #fffdf6, var(--back) 60%, #d8d2c3);
  clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.25)); }
.stk .ln:nth-of-type(2n) { transform-origin: 100% 100%; margin-left: .18em; }
.stk .ln:nth-of-type(2n) b { clip-path: polygon(0 0, 100% 1%, 99.6% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.stk .ln:nth-of-type(2n)::after { right: auto; left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.stk .ln:nth-of-type(3n) { margin-left: -.06em; }
.stk-l .ln { font-size: var(--t-l); }
.stk-m .ln { font-size: var(--t-m); }
.stk.on .ln { animation: stick .7s cubic-bezier(.25,.8,.3,1) both, corner 1.4s linear both; animation-delay: calc(var(--i, 0) * .13s), calc(var(--i, 0) * .13s + .5s); }
.stk.on .ln:nth-of-type(2n) { animation-name: stick2, corner; }
@keyframes stick {
  0% { opacity: 0; transform: perspective(900px) translate(-.25em, -.35em) rotate3d(1, -1, 0, 62deg) scale(1.06); filter: drop-shadow(8px 14px 10px rgba(0,0,0,.35)); }
  12% { opacity: 1; }
  62% { transform: perspective(900px) rotate3d(1, -1, 0, -4deg) scale(1.01); filter: drop-shadow(3px 5px 4px rgba(0,0,0,.25)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
}
@keyframes stick2 {
  0% { opacity: 0; transform: perspective(900px) translate(.25em, -.35em) rotate3d(1, 1, 0, 62deg) scale(1.06); filter: drop-shadow(-8px 14px 10px rgba(0,0,0,.35)); }
  12% { opacity: 1; }
  62% { transform: perspective(900px) rotate3d(1, 1, 0, -4deg) scale(1.01); filter: drop-shadow(-3px 5px 4px rgba(0,0,0,.25)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
}
/* the last corner springs back up a little and stays lifted */
@keyframes corner { 0% { --c: 0px; } 18% { --c: .3em; } 34% { --c: .09em; } 48% { --c: .2em; } 62% { --c: .13em; } 100% { --c: .16em; } }

/* masking tape: translucent yellow, torn zig-zag ends, crinkles; laid after the stickers */
.tape { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1.55em; z-index: 2; font: 500 max(10px, .7vw)/1.55em "IBM Plex Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tape-ink); font-style: normal; white-space: nowrap; padding: 0 1.4em; text-align: center;
  background:
    linear-gradient(97deg, transparent 0 31%, rgba(90,60,0,.10) 31.4%, transparent 32.4% 63%, rgba(255,255,255,.18) 63.5%, transparent 64.6%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%, rgba(80,50,0,.10)),
    var(--tape);
  clip-path: polygon(0 6%, 3% 0, 6% 9%, 9% 0, 91% 0, 94% 8%, 97% 0, 100% 7%, 98% 22%, 100% 38%, 97.5% 55%, 100% 72%, 98% 88%, 100% 100%, 0 100%, 2% 86%, 0 70%, 2.5% 52%, 0 36%, 2% 20%);
  transform: rotate(var(--r)); transform-origin: 0 50%; opacity: 0; pointer-events: none; mix-blend-mode: normal; }
.tape-static { opacity: 1; animation: tape .5s 1.2s cubic-bezier(.3,.7,.3,1) both; }
.tape-txt { width: auto; font-size: max(10.5px, .74vw); }
.stk.on .tape { animation: tape .5s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(.72s + var(--k, 0) * .16s); }
/* tapes live inside a line (prepStickers moves them there) and are placed in that line's em (--u), so they always cross
   a corner or ride the top edge of the box — never the letters, at any size. Each corner tape is a diagonal across the
   corner; the left end is the rotation origin, so top = centre - half the tape's height. */
/* --t = the tape's own unit: the line's em, capped so tapes on the huge titles stay tape-sized (the letters sit ≥ .11em
   from every edge, so a smaller tape only gets further away from them) */
.ln > .tape:not(.tape-txt) { --t: min(var(--u), 118px); height: calc(var(--t) * .17); padding: 0; }
.ln > .tape-tl { left: calc(var(--t) * -.3); top: calc(var(--t) * .165); width: calc(var(--t) * .86); --r: -44deg; }
.ln > .tape-tr { left: calc(100% - var(--t) * .3); top: calc(var(--t) * -.435); width: calc(var(--t) * .86); --r: 44deg; }
.ln > .tape-br { left: calc(100% - var(--t) * .26); top: calc(100% + var(--t) * .065); width: calc(var(--t) * .82); --r: -45deg; }
.ln > .tape-bl { left: calc(var(--t) * -.3); top: calc(100% - var(--t) * .335); width: calc(var(--t) * .86); --r: 46deg; }
.ln > .tape-txt { left: var(--x, 30%); top: -1.12em; width: auto; --r: var(--rt, -3deg); }
@keyframes tape {
  0% { opacity: 1; transform: rotate(calc(var(--r) - 3deg)) scaleX(.05) translateY(-6px); }
  70% { transform: rotate(calc(var(--r) + .6deg)) scaleX(1.01) translateY(0); }
  100% { opacity: 1; transform: rotate(var(--r)) scaleX(1); }
}
.tape-inline { background: var(--tape); padding: .05em .4em; font: 500 .78em/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tape-ink); white-space: nowrap; }

/* ---------- comic caption boxes */
.cap { position: absolute; z-index: 3; margin: 0; max-width: min(25em, 80vw); text-wrap: balance; background: var(--sheet); border: 2px solid var(--ink);
  padding: .9em 1.15em .85em; font: 640 var(--t-cap)/1.42 "Archivo", sans-serif; font-stretch: 78%; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 rgba(18,17,16,.9); transform: rotate(-.5deg); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.cap.on { opacity: 1; visibility: visible; transition: opacity .15s; }
.cap .tw { visibility: hidden; }
.cap .tw.v { visibility: visible; }
.beat .cap-a { left: 7vw; top: 13vh; }
.beat .cap-b { right: 6vw; top: 36vh; transform: rotate(.6deg); }
.beat .cap-c { left: 9vw; bottom: 14vh; transform: rotate(.3deg); }
.stk-night { position: absolute; right: 7vw; bottom: 12vh; align-items: flex-end; }
.stk-rev .ln { color: var(--ink); }
.stk-rev .ln b { background: var(--paper); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.stk-rev .ln::after { background: linear-gradient(135deg, #3a3833, #121110 60%, #000); }
.stk-dawn { position: absolute; left: 7vw; bottom: 12vh; }
/* prologue: the desk, the turn — the desk is the opening: the title sits on its first shot */
.beat-desk { height: 480vh; }
.beat-open .kicker { color: var(--paper); text-shadow: 0 1px 0 #000; }
.beat-open .lede { color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); padding: .7em .9em .75em; max-width: 30ch; box-shadow: 5px 5px 0 rgba(0,0,0,.45); transform: rotate(-.4deg); }
.beat-open .cue { color: var(--paper); text-shadow: 0 1px 0 #000; }
.beat-open .title-block, .beat-open .cue { transition: opacity .4s, transform .5s cubic-bezier(.3,.7,.3,1); }
.beat-open .title-block.off, .beat-open .cue.off { opacity: 0; transform: translateY(calc(-46% - 18px)); pointer-events: none; }
.beat-open .cue.off { transform: translateY(8px); }
.beat-turn { height: 380vh; }
.beat-desk .ch-aside, .beat-turn .ch-aside { background: var(--ink); color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(233,228,214,.18); }
.beat .dk-a { right: 7vw; top: 15vh; transform: rotate(.8deg); }
.beat .dk-b { left: 9vw; bottom: 14vh; transform: rotate(-.6deg); }
.beat .dk-c { right: 7vw; top: 15vh; transform: rotate(-.7deg); }
.stk-desk { position: absolute; right: 7vw; bottom: 12vh; align-items: flex-end; }
.beat .dw-c { right: 7vw; bottom: 14vh; transform: rotate(-.4deg); }

/* ---------- chapters: a comic page — the text column on paper at the left, the big panel at the right.
   The panel starts small and inked (.slot), grows into .ch-fin and washes into the real site in colour; nothing of
   ours ever sits on top of the site's own type. */
.beat-chapter .stage { --finw: min(64vw, calc((100svh - 150px) * 16 / 9)); }
.ch-fin { position: absolute; right: var(--gut); top: 50%; width: var(--finw); aspect-ratio: 16 / 9; transform: translateY(-48%); }
.ch-fin .slot { left: 50%; top: 50%; width: 60%; aspect-ratio: 16 / 10; transform: translate(-50%, -50%); }
.ch-col { position: absolute; z-index: 3; left: var(--gut); top: max(92px, 11vh); bottom: max(36px, 6vh);
  width: calc(100vw - var(--finw) - 3 * var(--gut) - 1.5vw); display: flex; flex-direction: column; align-items: flex-start; gap: max(14px, 1.6vh); }
.ch-col .ch-no { margin: 0 0 .4em; }
.ch-col .cap { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: 100%; }
.ch-col .ch-cap2 { margin-left: max(14px, 1.4vw); transform: rotate(.5deg); }
/* the narrator's aside: the same caption, reversed — the deadpan line after the facts */
.ch-col .ch-aside { margin-left: max(30px, 3vw); background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(18,17,16,.28); transform: rotate(-.8deg); }
.ch-title { position: relative; margin-top: auto; padding-top: 2.4em; }
.ch-title .stk .ln { font-size: max(36px, min(4.6vw, 8.6vh)); }
.ch-go { display: inline-flex; gap: .7em; align-items: center; margin: 1.4em 0 0 .3em; font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); padding: 1em 1.2em;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .2s, box-shadow .2s; opacity: 0; pointer-events: none; }
.ch-title.on .ch-go { opacity: 1; pointer-events: auto; transition: opacity .3s .9s, transform .2s, box-shadow .2s; }
.ch-go:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ch-go:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
/* tablets held upright (and any tall window wider than a phone): the side-by-side page left a thin text column and a
   small panel in a sea of paper → the captions and the title side by side on top, the panel full width under them */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .beat-chapter .stage { --finw: calc(100vw - 2 * var(--gut)); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto); align-content: center; column-gap: 4vw; row-gap: max(12px, 1.3vh); padding: 84px var(--gut) 44px; box-sizing: border-box; }
  .ch-col { display: contents; }
  .beat-chapter .ch-no { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .beat-chapter .ch-cap { grid-column: 1; grid-row: 2; justify-self: start; }
  .beat-chapter .ch-cap2 { grid-column: 1; grid-row: 3; justify-self: start; }
  .beat-chapter .ch-aside { grid-column: 1; grid-row: 4; justify-self: start; }
  .ch-title { grid-column: 2; grid-row: 2 / 5; align-self: end; margin: 0; padding: 0; }
  .ch-title .stk .ln { font-size: min(6.8vw, 5.6vh); }
  .ch-fin { grid-column: 1 / -1; grid-row: 5; position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: 2.4vh; }
}

/* ---------- bench */
.term { position: absolute; z-index: 3; left: 50%; bottom: max(28px, 7vh); transform: translateX(-50%); display: flex; align-items: stretch; gap: 0;
  background: var(--sheet); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); width: min(560px, calc(100vw - 2 * var(--gut))); }
.term label { display: flex; align-items: center; padding: 0 1em; border-right: 2px solid var(--ink); white-space: nowrap; }
.term input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 max(16px, 1.05vw)/1 "IBM Plex Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; padding: 1em .9em; color: var(--ink); outline: none; }
.term input::placeholder { color: rgba(18,17,16,.38); }
.go { border: 0; border-left: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .18em;
  text-transform: uppercase; padding: 0 1.2em; cursor: pointer; }
.go i { font-style: normal; }
.answer { position: absolute; z-index: 3; right: 6vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 1em; }
.answer .stk .ln { font-size: var(--t-m); }
.answer .ch-go { opacity: 1; pointer-events: auto; }

/* ---------- who: the name across the page, the contents of the story at the left, the card at the right */
.beat-who { min-height: 100vh; min-height: 100svh; padding: 16vh var(--gut) 8vh; }
.who { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 5vh 5vw; align-items: start; }
.who-head { grid-column: 1 / -1; }
.who-head .label { margin: 0 0 3.2em .2em; }
.contents { padding-top: .4em; }
.contents ol { list-style: none; margin: 1.1em 0 0; padding: 0; border-top: 2px solid var(--ink); }
.contents li { display: flex; align-items: baseline; gap: 1em; border-bottom: 1px solid rgba(18,17,16,.28); }
.toc-row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .8em; padding: .7em 0 .62em; text-decoration: none; }
.toc-no { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .14em; }
.toc-nm { font: 400 max(22px, 1.9vw)/1 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; transition: transform .25s cubic-bezier(.2,.9,.2,1.2); }
.toc-dots { flex: 1; min-width: 1em; border-bottom: 2px dotted rgba(18,17,16,.45); transform: translateY(-.25em); }
.toc-pg, .toc-out { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.toc-out { text-decoration: none; padding: .5em .6em; border: 1.5px solid var(--ink); background: var(--sheet); transition: background .2s, color .2s; }
.toc-out:hover { background: var(--ink); color: var(--paper); }
.toc-row:hover .toc-nm { transform: translateX(6px); }
.who-text { background: var(--sheet); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: max(22px, 2.2vw); transform: rotate(.4deg); }
.who-text p { margin: 0 0 1em; max-width: 46ch; }
.who-text .big { font: 600 max(21px, 1.7vw)/1.25 "Archivo", sans-serif; font-stretch: 86%; letter-spacing: -.005em; }
.links { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1.6em !important; }
.btn { font: 500 var(--t-label)/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--paper);
  padding: 1.1em 1.3em; border: 2px solid var(--ink); transition: transform .2s; display: inline-block; }
.btn:hover { transform: translateY(-2px) rotate(-.5deg); }
.btn-ghost { background: transparent; color: var(--ink); }
.foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.4em 2.4em; border-top: 2px solid var(--ink); padding-top: 1.4em; margin-top: 4vh; }

.noscript { position: fixed; inset: auto 0 0; padding: 16px; background: var(--ink); color: var(--paper); z-index: 9; margin: 0; }

/* ---------- phone: a vertical webtoon strip */
@media (max-width: 760px) {
  :root { --t-xl: 13.4vw; --t-l: 11vw; --t-m: 9vw; --t-cap: 13.5px; --t-label: 10.5px; }
  .beat-title { height: auto; min-height: 100svh; }
  .beat-title .stage { height: auto; min-height: 100svh; overflow: visible; padding: 92px 0 40px; }
  .title-block { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 0 var(--gut); }
  .slot-title { position: relative; display: block; right: auto; top: auto; width: calc(100% - 2 * var(--gut)); height: auto; aspect-ratio: 4 / 3.3; margin: 34px auto 40px; transform: rotate(-1deg); }
  .cue { position: relative; left: auto; bottom: auto; margin: 26px var(--gut) 0; }
  .lede { font-size: 17px; }
  .beat-night { height: 660vh; }
  .beat-dawn { height: 480vh; }
  .beat-bench { height: 200vh; }
  .slot-scene { width: calc(100vw - 2 * var(--gut)); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); }
  .beat .cap-a { left: var(--gut); top: 86px; }
  .beat .cap-b { right: var(--gut); top: auto; bottom: 22vh; }
  .beat .cap-c { left: var(--gut); right: var(--gut); bottom: 12vh; }
  .stk-night { right: var(--gut); bottom: 30vh; }
  .stk-dawn { left: var(--gut); bottom: 18vh; }
  .beat-desk { height: 440vh; }
  .beat-open .title-block { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 var(--gut); }
  .beat-open .title-block.off { transform: translateY(calc(-50% - 18px)); }
  .beat-open .cue { position: absolute; left: var(--gut); bottom: max(18px, 3vh); margin: 0; }
  .beat-turn { height: 340vh; }
  .beat .dk-a, .beat .dk-c { right: var(--gut); left: auto; top: 150px; }
  .beat .dk-b { left: var(--gut); right: var(--gut); bottom: 13vh; }
  .stk-desk { right: var(--gut); bottom: 30vh; }
  .stk-desk .tape-txt { left: -16% !important; }   /* "Feedback · round 9" ran off the right edge */
  .beat .dw-c { right: var(--gut); left: var(--gut); bottom: 9vh; }
  /* dawn: "The visionary ones write back." takes cap-a's place at the top (it sat on the inbox sticker) */
  .beat-dawn .cap-b { top: 86px; bottom: auto; }
  /* chapters become strip panels with gutters on paper: no pinning, they reveal as they cross the middle */
  .beat-chapter { height: auto; padding: 14vh 0 10vh; }
  .beat-chapter .stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .ch-col { display: contents; }
  .beat-chapter .ch-no { order: 1; position: relative; left: auto; top: auto; margin: 0 var(--gut) 12px; }
  .beat-chapter .ch-cap { order: 2; }
  .ch-fin { order: 3; position: relative; right: auto; top: auto; transform: none; width: calc(100% - 2 * var(--gut)); aspect-ratio: 4 / 4.4; margin: 14px auto 0; }
  .ch-fin .slot { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .beat-chapter .ch-aside { order: 4; margin-top: 14px !important; margin-left: calc(var(--gut) + 36px) !important; max-width: calc(100% - 2 * var(--gut) - 36px); }
  .beat-chapter .ch-cap2 { order: 4; margin-top: -22px !important; margin-left: calc(var(--gut) + 22px) !important; max-width: calc(100% - 2 * var(--gut) - 22px); }
  .beat-chapter .cap { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0 var(--gut); align-self: flex-start; }
  .ch-title { order: 5; position: relative; left: auto; bottom: auto; padding: 0 var(--gut); margin-top: 34px; }
  .ch-title .stk .ln { font-size: var(--t-l); }
  .ch-title .tape-txt { left: 12% !important; }
  .title-block .tape-txt { left: 22% !important; }
  .slot-title .tape-txt { left: 3% !important; }
  .term { bottom: max(18px, env(safe-area-inset-bottom)); }
  .term label { display: none; }
  .answer { right: var(--gut); left: var(--gut); top: 92px; transform: none; align-items: flex-start; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 6vh; }
  .who-head .stk .ln { font-size: 12vw; }
  .toc-nm { font-size: 22px; }
  .toc-pg { display: none; }
  .beat-who { padding-top: 12vh; }
  .folio { display: none; }
  .write { padding: .8em .9em; }
}
@media (hover: none) { .cue-ptr { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .stk.on .ln, .stk.on .tape { animation-duration: .01s !important; animation-delay: 0s !important; }
}
/* dawn, desktop: the first caption sat on the STAGE 2 stencil; down on the road with the night's last caption */
@media (min-width: 761px) { .beat-dawn .cap-a { top: auto; bottom: 14vh; } }