/* Leyla landing page. Cairo '58: madder, marigold, deep madder, black,
   printed in two plates that never quite line up. All faces SIL OFL and
   self-hosted (fonts/OFL.txt). */

@font-face { font-family: "Aref Ruqaa"; src: url("fonts/ArefRuqaa-Regular-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; src: url("fonts/ArefRuqaa-Bold-arabic.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Reem Kufi"; src: url("fonts/ReemKufi-Variable-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular-latin.woff2") format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/SchibstedGrotesk-Variable.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; }

:root {
  --madder: #D63F71;
  --marigold: #F5C25F;
  --deep: #60132E;
  --black: #0B0A0A;
  --night: #161112;
  --paper: #F3EBDD;
  --paper-2: #C9BEB0;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ruqaa: "Aref Ruqaa", "Reem Kufi", serif;
  --kufi: "Reem Kufi", "Aref Ruqaa", sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  /* Stop motion: hold every drawing for two frames at 12 fps. */
  --step: steps(6, end);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--paper);
  font: 400 17px/1.6 var(--sans);
  overflow-x: hidden;
}
/* Paper grain over everything, printed once and never repainted. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; will-change: transform;
}
img, svg { display: block; }
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type ── */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.ar { font-family: var(--ruqaa); font-weight: 700; line-height: 1.5; }
.display { font-size: clamp(38px, 6vw, 84px); line-height: 1.02; text-wrap: balance; }
.display em { color: var(--marigold); }
.huge { font-size: clamp(64px, 13vw, 190px); line-height: .95; }
.lead { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; }
.body { font-size: clamp(17px, 1.35vw, 20px); color: var(--paper-2); max-width: 44ch; text-wrap: pretty; }
.eyebrow { font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2); margin-bottom: 18px; }
.small-ar { font-size: clamp(26px, 2.6vw, 36px); color: var(--marigold); margin-bottom: 4px; text-align: left; }
/* the second plate: a deep madder (or madder) print a hair out of register */
.small-ar, .more-ar, .dawn-ar, .display, .huge { text-shadow: .045em .04em 0 var(--plate, var(--deep)); }
.lights, .kept, .more, .together, .seat { --plate: #4A0F24; }

.button {
  display: inline-block; padding: 15px 26px; border-radius: 999px;
  background: var(--black); color: var(--marigold);
  font: 600 16px/1 var(--sans); text-decoration: none;
  box-shadow: 3px 4px 0 var(--deep);
  transition: transform .17s var(--step), box-shadow .17s var(--step);
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--deep); }
.button:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--deep); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }

/* ── the bar ── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gutter); pointer-events: none;
}
.bar a { pointer-events: auto; }
.bar-reel { width: 46px; height: 46px; border-radius: 50%; background: var(--black); display: grid; place-items: center; }
.bar-reel svg { width: 30px; height: 30px; fill: var(--marigold); }
.bar-spin { transition: transform .25s steps(2, end); transform-box: fill-box; transform-origin: 50% 50%; }
.bar-seat { background: var(--black); color: var(--marigold); padding: 11px 18px; border-radius: 999px; font: 600 14px/1 var(--sans); text-decoration: none; }
.bar-seat:hover { color: var(--paper); }

/* ── scenes ── */
.scene { position: relative; }

/* 1 · dusk */
.dusk { min-height: 100svh; background: var(--madder); color: var(--black); overflow: hidden; }
.dusk-stage { position: absolute; inset: 0; }
.dusk-svg { width: 100%; height: 100%; }
.dusk-copy {
  position: relative; z-index: 2;
  padding: clamp(84px, 12vh, 130px) var(--gutter) 0;
  max-width: min(640px, 52vw);
  opacity: calc(1 - var(--dim, 0) * 1.4);
}
/* the billing block, printed on the black roof like the foot of a poster */
.dusk-bill {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(18px, 3vh, 30px);
  display: flex; justify-content: space-between; align-items: end; gap: 20px 48px;
  color: var(--paper);
}
.mark { position: relative; width: clamp(180px, 21vw, 300px); aspect-ratio: 273 / 194; margin: 0 0 6px -1.5%; }
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-plate { transform: translate(var(--px, 3.5%), var(--py, 3%)); }
.dusk .line { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.3; color: var(--black); }
.dusk .lead { margin: 2px 0 22px; }
.dusk-body { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; max-width: 52ch; color: var(--paper-2); }
.dusk-action { display: flex; align-items: center; gap: 12px 18px; flex: none; }
.dusk-action span { font-size: 13px; line-height: 1.35; color: var(--paper-2); }
.dusk-action .button { background: var(--marigold); color: var(--black); box-shadow: 3px 4px 0 var(--madder); }
.dusk-action .button:hover { box-shadow: 5px 6px 0 var(--madder); }

/* 2 · the lights go down */
.lights-sticky { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: center; }
.lights-stage { position: absolute; inset: 0; }
.lights-stage svg { width: 100%; height: 100%; }
#lights-beam { opacity: 0; transition: opacity .6s steps(5, end); }
.lights.on #lights-beam { opacity: 1; }
.lights-copy { position: relative; margin-left: auto; padding: 0 var(--gutter); width: min(720px, 56%); }
.lights-copy .display { color: var(--paper); margin-bottom: 22px; }
.lights-copy .body { color: var(--paper); opacity: .82; }

/* 3 · the films you kept */
.kept { padding: clamp(110px, 16vh, 180px) var(--gutter) clamp(90px, 14vh, 150px); }
.kept-head { max-width: 900px; margin-bottom: 56px; }
.posters { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.poster svg { width: 100%; height: auto; border-radius: 3px; box-shadow: 4px 6px 0 #000, 0 18px 40px rgb(0 0 0 / .5); transform: rotate(var(--tilt, -1deg)); transition: transform .25s var(--step); }
.poster:nth-child(2) { --tilt: 1.2deg; margin-top: 34px; }
.poster:nth-child(3) { --tilt: -.6deg; margin-top: 10px; }
.poster:nth-child(4) { --tilt: 1.6deg; margin-top: 44px; }
.poster:hover svg { transform: rotate(0deg) translateY(-6px); }
.caption { font: italic 400 clamp(19px, 1.6vw, 24px)/1.25 var(--serif); margin-top: 18px; color: var(--paper); max-width: 22ch; }
.p-title { font: 700 26px var(--ruqaa); fill: var(--black); }
.p-title.light { fill: var(--marigold); }
.kept-body { margin-top: 64px; max-width: 52ch; }

/* 4 · one more */
.more { padding: clamp(90px, 14vh, 160px) var(--gutter); display: grid; grid-template-columns: 1fr minmax(280px, 540px); gap: clamp(32px, 6vw, 110px); align-items: center; }
.more-ar { font-size: clamp(36px, 4.4vw, 60px); color: var(--marigold); }
.more .huge { color: var(--paper); display: flex; align-items: center; gap: .14em; margin-bottom: 28px; }
.dot { width: .2em; height: .2em; border-radius: 50%; background: var(--marigold); flex: none; animation: dot 1.5s steps(1, end) infinite; box-shadow: .02em .02em 0 var(--deep); }
@keyframes dot { 0%, 66% { transform: scale(1); } 75% { transform: scale(1.25); } 83% { transform: scale(.9); } }
.room svg { width: 100%; height: auto; border-radius: 18px; box-shadow: 6px 8px 0 var(--deep), 0 24px 50px rgb(0 0 0 / .55); transform: rotate(1deg); }
.tv-label { font: 600 10px var(--sans); letter-spacing: .2em; fill: var(--paper-2); }
.tv-title { font: 600 18px var(--sans); fill: var(--paper); }
.tv-count { font: 400 13px var(--sans); fill: var(--paper-2); }

/* 5 · two windows */
.together { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.together-stage { position: relative; aspect-ratio: 1200 / 560; max-height: 80vh; }
.together-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.together-copy { padding: 0 var(--gutter) clamp(80px, 12vh, 140px); max-width: 980px; margin-top: -40px; position: relative; }
.together .display { margin-bottom: 22px; }
.code { display: flex; gap: 8px; margin-top: 32px; align-items: center; }
.code span { width: 46px; height: 60px; display: grid; place-items: center; background: var(--marigold); color: var(--deep); font: 700 30px/1 var(--sans); border-radius: 6px; box-shadow: 3px 4px 0 var(--deep); }
.code span:nth-child(even) { transform: rotate(1.5deg); }
.code span:nth-child(3n) { transform: rotate(-1.2deg); }
.code i { width: 14px; }
.star { animation: twinkle 2.5s steps(1, end) infinite; }
.star:nth-child(3n) { animation-delay: -.8s; }
.star:nth-child(4n) { animation-delay: -1.6s; }
@keyframes twinkle { 0%, 70% { opacity: 1; } 80% { opacity: .3; } }

/* 6 · dawn */
.dawn {
  padding-top: clamp(110px, 18vh, 200px);
  background:
    radial-gradient(120% 60% at 50% 100%, rgb(245 194 95 / .55), transparent 70%),
    linear-gradient(var(--black) 0%, var(--deep) 38%, var(--madder) 78%, #E86A6A 100%);
  overflow: hidden;
}
.dawn-copy { padding: 0 var(--gutter); text-align: center; display: grid; justify-items: center; gap: 18px; position: relative; z-index: 1; }
.dawn-ar { font-size: clamp(34px, 5vw, 76px); line-height: 1.45; color: var(--marigold); max-width: 18ch; text-wrap: balance; }
.dawn .lead { color: var(--paper); }
.dawn .body { color: var(--paper); opacity: .85; max-width: 38ch; }
.dawn-stage { height: clamp(300px, 36vw, 560px); margin-top: clamp(-40px, -2vw, 0px); }
.dawn-stage svg { width: 100%; height: 100%; }

/* 7 · the ticket */
.seat { overflow-x: clip; padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(90px, 14vh, 150px); }
.seat-head { max-width: 760px; margin-bottom: 52px; }
.seat-head .display { margin-bottom: 20px; }
.ticket {
  --hole: radial-gradient(circle at 50% 50%, transparent 5px, var(--marigold) 5.5px);
  position: relative; display: grid; grid-template-columns: 1fr 190px;
  max-width: 820px; color: var(--deep);
  filter: drop-shadow(5px 7px 0 var(--deep)) drop-shadow(0 22px 40px rgb(0 0 0 / .55));
  transform: rotate(-.8deg);
}
.ticket-main, .ticket-stub {
  background: var(--marigold);
  /* notches where the ticket was torn from the roll */
  -webkit-mask: radial-gradient(circle 14px at 100% 0, transparent 13.5px, #000 14px) top right / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 13.5px, #000 14px) bottom right / 100% 51% no-repeat;
          mask: radial-gradient(circle 14px at 100% 0, transparent 13.5px, #000 14px) top right / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 13.5px, #000 14px) bottom right / 100% 51% no-repeat;
}
.ticket-main { position: relative; overflow: hidden; padding: 30px 34px 30px; border-radius: 10px 0 0 10px; }
.ticket-stub {
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 13.5px, #000 14px) top left / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, transparent 13.5px, #000 14px) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle 14px at 0 0, transparent 13.5px, #000 14px) top left / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, transparent 13.5px, #000 14px) bottom left / 100% 51% no-repeat;
  border-radius: 0 10px 10px 0; padding: 30px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  border-left: 3px dotted rgb(96 19 46 / .55);
  transition: transform .5s steps(5, end);
}
.ticket.torn .ticket-stub { transform: translate(26px, 16px) rotate(7deg); }
.ticket-stub p { font: 600 12px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ticket-stub p span { display: block; font: 700 22px/1.3 var(--kufi); letter-spacing: 0; text-transform: none; }
.t-no small { display: block; }
.t-no b { font: 700 54px/1 var(--sans); letter-spacing: -.02em; color: var(--madder); text-shadow: 2px 2px 0 var(--deep); }
.t-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; border-bottom: 2px solid rgb(96 19 46 / .35); padding-bottom: 14px; margin-bottom: 14px; }
.t-mark { width: 104px; height: auto; }
.t-kind { text-align: right; font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.t-kind span:first-child { display: block; font: 700 24px/1.3 var(--kufi); letter-spacing: 0; text-transform: none; }
.t-admit { font: italic 400 30px/1.15 var(--serif); margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.t-admit span { font: 700 24px/1.2 var(--ruqaa); font-style: normal; color: var(--madder); }
.t-field { display: block; margin-bottom: 16px; font: 600 13px/1.3 var(--sans); }
.t-field i { font-weight: 400; font-style: normal; opacity: .75; }
.t-field input {
  display: block; width: 100%; margin-top: 6px; padding: 9px 2px;
  border: 0; border-bottom: 2px solid var(--deep); background: transparent; border-radius: 0;
  font: 500 19px/1.3 var(--sans); color: var(--black);
}
.t-field input::placeholder { color: rgb(96 19 46 / .45); }
.t-field input:focus { outline: none; border-bottom-color: var(--madder); background: rgb(255 255 255 / .18); }
.t-trap { position: absolute; left: -9999px; }
.t-button {
  margin-top: 8px; padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--deep); color: var(--marigold); font: 600 16px/1 var(--sans);
  box-shadow: 3px 4px 0 var(--black); transition: transform .17s var(--step), box-shadow .17s var(--step);
}
.t-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--black); }
.t-button:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--black); }
.t-button:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.t-status { min-height: 1.5em; margin-top: 14px; font: 500 15px/1.45 var(--sans); color: var(--black); max-width: 40ch; }
.stamp {
  position: absolute; right: 28px; bottom: 34px; padding: 6px 18px 8px; border: 4px solid var(--madder); border-radius: 10px;
  color: var(--madder); text-align: center; transform: rotate(-12deg) scale(1.8); opacity: 0; pointer-events: none;
  mix-blend-mode: multiply;
}
.stamp span { display: block; font: 700 40px/1.1 var(--kufi); }
.stamp small { display: block; font: 700 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.ticket.stamped .stamp { animation: stamp .42s steps(1, end) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.8); }
  20% { opacity: .5; transform: rotate(-11deg) scale(1.3); }
  40% { opacity: 1; transform: rotate(-13deg) scale(.92); }
  60% { opacity: .95; transform: rotate(-12deg) scale(1.04); }
  80%, 100% { opacity: .92; transform: rotate(-12deg) scale(1); }
}
/* ── the booth: the projectionist's cue cards ── */
.booth { padding: clamp(70px, 12vh, 130px) var(--gutter) clamp(90px, 14vh, 150px); border-top: 1px solid #1E1819; overflow-x: clip; }
.booth-head { max-width: 760px; margin-bottom: clamp(40px, 7vh, 64px); }
.booth-head .display { margin-bottom: 20px; }
.cues { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(22px, 3vw, 36px); }
.cue {
  position: relative; background: var(--paper); color: var(--black);
  padding: 22px 24px 26px; border-radius: 3px;
  box-shadow: 3px 4px 0 var(--deep), 0 14px 26px rgb(0 0 0 / .35);
  rotate: -.6deg;
}
.cue:nth-child(even) { rotate: .7deg; }
.cue:nth-child(3n) { rotate: -.2deg; }
/* the punched hole a card hangs by on the booth wall */
.cue::before { content: ""; position: absolute; top: 12px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--black); box-shadow: inset 1px 1px 0 rgb(255 255 255 / .08); }
.cue-no { font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--madder); margin-bottom: 14px; }
.cue h3 { font: italic 400 26px/1.1 var(--serif); margin-bottom: 10px; text-wrap: balance; }
.cue p { font-size: 15.5px; line-height: 1.55; color: #3A3133; text-wrap: pretty; }
.cue .cue-stat { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgb(96 19 46 / .4); font: 600 14px/1.3 var(--sans); color: var(--deep); letter-spacing: .02em; }
.runs { margin-top: clamp(48px, 8vh, 80px); display: grid; gap: 12px; max-width: 900px; }
.runs p { color: var(--paper-2); font-size: 17px; text-wrap: pretty; }
.runs b { color: var(--paper); font-weight: 600; margin-right: .3em; }
.booth-link { justify-self: start; margin-top: 18px; background: var(--marigold); color: var(--black); }

/* ── booth notes (booth.html): a long read in the same paper ── */
.notes { max-width: 760px; margin: 0 auto; padding: 120px var(--gutter) 100px; box-sizing: content-box; }
.notes-head { margin-bottom: 56px; }
.notes-head .display { margin-bottom: 20px; }
.notes-toc { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 32px; }
.notes-toc a { font: 600 14px/1 var(--sans); text-decoration: none; padding: 10px 14px; border-radius: 999px; background: #1B1517; color: var(--paper); box-shadow: 2px 3px 0 #2E0A17; }
.notes-toc a:hover { color: var(--marigold); }
.notes section { padding: 36px 0 8px; border-top: 1px solid #2A2224; scroll-margin-top: 90px; }
.notes h2 { font: italic 400 clamp(30px, 3.6vw, 40px)/1.1 var(--serif); color: var(--paper); margin-bottom: 18px; }
.notes p { color: var(--paper-2); margin-bottom: 16px; text-wrap: pretty; }
.note-stat { background: var(--paper); color: #3A3133 !important; padding: 16px 20px; border-radius: 3px; box-shadow: 3px 4px 0 var(--deep); rotate: -.3deg; }
.note-stat b { color: var(--madder); font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-right: .6em; }
.note-list { display: grid; gap: 14px; margin: 6px 0 22px; }
.note-list div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.note-list dt { font: italic 400 24px/1.2 var(--serif); color: var(--marigold); }
.note-list dd { margin: 0; color: var(--paper-2); }
.note-table { overflow-x: auto; margin: 6px 0 22px; }
.note-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.note-table th, .note-table td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid #2A2224; vertical-align: top; }
.note-table thead th { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); }
.note-table tbody th { font-weight: 600; color: var(--paper); }
.note-table td { color: var(--paper-2); }
.note-table td:last-child { white-space: nowrap; color: var(--marigold); }
.notes-end { margin-top: 40px; }
@media (max-width: 560px) { .note-list div { grid-template-columns: 1fr; gap: 2px; } }

/* footer */
.foot { padding: 70px var(--gutter) 60px; display: grid; justify-items: center; gap: 14px; text-align: center; border-top: 1px solid #1E1819; }
.foot svg { width: 44px; height: 44px; fill: var(--marigold); }
.foot .serif { font-size: 26px; }
.foot-small { font-size: 13px; color: var(--paper-2); }
.foot-small a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.foot-small a:hover { color: var(--marigold); }
.foot__tt { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* stop-motion reveals: held drawings, not a fade */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--step), transform .5s var(--step); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.in:nth-child(2) { transition-delay: .08s; }
.js .reveal.in:nth-child(3) { transition-delay: .16s; }
.js .reveal.in:nth-child(4) { transition-delay: .25s; }

/* ── narrow screens ── */
@media (max-width: 900px) {
  .posters { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .more { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .dusk { display: flex; flex-direction: column; }
  .dusk-copy { max-width: none; padding-top: 92px; order: 1; }
  /* the scene keeps its own shape on a phone, so the sun is never cropped */
  .dusk-stage { position: relative; inset: auto; order: 2; flex: none; width: 100%; aspect-ratio: 780 / 860; }
  .dusk-svg { position: absolute; inset: 0; -webkit-mask: linear-gradient(transparent, #000 6%); mask: linear-gradient(transparent, #000 6%); }
  .dusk-bill { position: relative; order: 3; flex-direction: column; align-items: start; background: var(--black); padding-top: 4px; margin-top: -2px; }
  .dusk-action { flex-wrap: wrap; }
  .lights-sticky { align-items: end; }
  .lights-stage { inset: 0 0 auto; height: 52%; }
  .lights-copy { width: auto; margin: 0; padding-bottom: 12vh; }
  .ticket { grid-template-columns: 1fr; transform: none; }
  .ticket-main { border-radius: 10px 10px 0 0; -webkit-mask: none; mask: none; padding: 24px 22px; }
  .ticket-stub { border-radius: 0 0 10px 10px; border-left: 0; border-top: 3px dotted rgb(96 19 46 / .55); -webkit-mask: none; mask: none; flex-direction: row; align-items: end; padding: 20px 22px; }
  .stamp { right: 16px; bottom: 90px; }
  .t-admit { font-size: 25px; }
  .together-stage { aspect-ratio: auto; height: 72vw; }
  .together-copy { margin-top: 0; }
  .code span { width: 40px; height: 52px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── guides (start, install, apps, move, help): long reads that have to
   work, so nothing moves and nothing hides until a script says so ── */
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--marigold); color: var(--black); padding: 10px 14px; border-radius: 999px; font: 600 14px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.guide { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(32px, 5vw, 80px); justify-content: center; padding: 120px var(--gutter) 90px; }
.guide-nav { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; display: grid; gap: 28px; font-size: 15px; }
.guide-nav h2 { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2); margin-bottom: 10px; }
.guide-nav ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.guide-nav a { display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--paper-2); border-left: 2px solid transparent; }
.guide-nav a:hover { color: var(--paper); background: #1B1517; }
.guide-nav a[aria-current="page"] { color: var(--marigold); background: #1B1517; font-weight: 600; }
.guide-nav .toc a { padding: 5px 12px; font-size: 14px; border-radius: 0 8px 8px 0; }
.guide-nav .toc a.here { color: var(--paper); border-left-color: var(--madder); }

.guide-main, .guide-nav, .guide-nav > nav { min-width: 0; }
.guide-head { margin-bottom: 44px; }
.guide-head .display { margin-bottom: 18px; }
.guide-head .body { max-width: 52ch; }
.beta-note { margin-top: 24px; display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; border: 1px dashed #4A3A3E; border-radius: 10px; color: var(--paper-2); font-size: 15px; }
.beta-note b { color: var(--marigold); font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; flex: none; }
.beta-note a:hover { color: var(--marigold); }

.guide-main section { padding: 34px 0 6px; border-top: 1px solid #2A2224; scroll-margin-top: 90px; }
.guide-main h2 { font: italic 400 clamp(30px, 3.6vw, 40px)/1.1 var(--serif); color: var(--paper); margin-bottom: 16px; }
.guide-main h3 { font: 600 19px/1.3 var(--sans); color: var(--paper); margin: 26px 0 8px; scroll-margin-top: 90px; }
.guide-main p, .guide-main li { color: var(--paper-2); text-wrap: pretty; }
.guide-main p { margin-bottom: 16px; }
.guide-main ul, .guide-main ol { padding-left: 1.3em; margin-bottom: 18px; display: grid; gap: 6px; }
.guide-main strong { color: var(--paper); font-weight: 600; }
.guide-main a:not(.button):not(.box) { color: var(--paper); text-decoration-color: var(--madder); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.guide-main a:not(.button):not(.box):hover { color: var(--marigold); }
.guide-main code { font: 500 .9em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #1B1517; color: var(--paper); padding: .12em .4em; border-radius: 5px; overflow-wrap: anywhere; }
.guide-main kbd { font: 600 .85em/1 var(--sans); border: 1px solid #4A3A3E; border-bottom-width: 3px; border-radius: 6px; padding: .15em .45em; color: var(--paper); }

/* code you are meant to copy */
.snippet { position: relative; margin: 6px 0 22px; background: #141011; border: 1px solid #2A2224; border-radius: 10px; overflow: hidden; }
.snippet-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; border-bottom: 1px solid #2A2224; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); }
.snippet pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 500 14px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--paper); tab-size: 2; }
.snippet pre code { background: none; padding: 0; font: inherit; overflow-wrap: normal; }
.snippet .c { color: #8C7F78; }
.snippet .p { color: var(--madder); user-select: none; }
.copy { font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--black); background: var(--marigold); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--deep); }
.copy:hover { background: var(--paper); }
.copy[data-done] { background: var(--paper); }

/* numbered steps: a big italic numeral, then the step */
.steps { list-style: none; padding: 0 !important; counter-reset: step; gap: 0 !important; margin: 10px 0 22px; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 22px 64px; min-height: 52px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -6px; width: 46px; text-align: center; font: italic 400 44px/1 var(--serif); color: var(--marigold); text-shadow: .045em .04em 0 var(--deep); }
.steps > li::after { content: ""; position: absolute; left: 22px; top: 46px; bottom: 6px; border-left: 1px dashed #4A3A3E; }
.steps > li:last-child::after { display: none; }
.steps > li > :first-child { margin-top: 0; }
.steps h3 { margin: 4px 0 6px; }

/* the setup's questions, as cue cards on the desk */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; list-style: none; padding: 0 !important; margin: 14px 0 26px; counter-reset: card; }
.cards > li { counter-increment: card; background: var(--paper); color: #3A3133; padding: 16px 18px 18px; border-radius: 3px; box-shadow: 3px 4px 0 var(--deep); rotate: -.4deg; }
.cards > li:nth-child(even) { rotate: .5deg; }
.cards > li:nth-child(3n) { rotate: -.2deg; }
.cards > li::before { content: "Question " counter(card); display: block; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--madder); margin-bottom: 8px; }
.cards b { display: block; font: italic 400 24px/1.15 var(--serif); color: var(--black); margin-bottom: 6px; }
.cards p, .cards li { color: #3A3133 !important; font-size: 15px; line-height: 1.5; margin: 0; }
.cards .opt { display: inline-block; margin-top: 10px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); border: 1px solid rgb(96 19 46 / .35); border-radius: 999px; padding: 5px 8px; }

/* pick your box */
.boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 26px; }
.box { display: grid; gap: 6px; padding: 14px 16px; border-radius: 10px; background: #1B1517; text-decoration: none; color: var(--paper); box-shadow: 2px 3px 0 #2E0A17; transition: transform .17s var(--step), box-shadow .17s var(--step); }
.box:hover { transform: translate(-2px, -2px); box-shadow: 4px 5px 0 var(--deep); }
.box span { font-weight: 600; }
.box small { font-size: 13px; color: var(--paper-2); }
.chip { display: inline-block; justify-self: start; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: #2A2224; color: var(--paper-2); }
.chip.ok { background: var(--marigold); color: var(--black); }
.chip.soon { background: var(--deep); color: var(--paper); }
h2 .chip, h3 .chip { vertical-align: middle; margin-left: 10px; font-style: normal; }

/* a word on the side */
.aside { background: var(--paper); color: #3A3133 !important; padding: 14px 18px; border-radius: 3px; box-shadow: 3px 4px 0 var(--deep); margin: 8px 0 24px; }
.aside b:first-child { color: var(--madder); font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-right: .6em; }
.aside code { background: rgb(96 19 46 / .1); color: var(--deep); }
.aside a { color: var(--deep) !important; }

/* questions and answers */
.qa { border-top: 1px solid #2A2224; }
.qa summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; position: relative; font-weight: 600; color: var(--paper); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font: italic 400 30px/1 var(--serif); color: var(--marigold); }
.qa[open] summary::after { content: "–"; }
.qa summary:hover { color: var(--marigold); }
.qa > div { padding: 0 0 8px; }

.guide-next { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 48px; padding-top: 28px; border-top: 1px solid #2A2224; }
.guide-next a { display: grid; gap: 4px; padding: 14px 18px; border-radius: 10px; background: #1B1517; text-decoration: none; min-width: 200px; flex: 1; }
.guide-next a:last-child { text-align: right; }
.guide-next small { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); }
.guide-next span { font: italic 400 24px/1.2 var(--serif); color: var(--paper); }
.guide-next a:hover span { color: var(--marigold); }

@media (max-width: 960px) {
  .guide { grid-template-columns: minmax(0, 1fr); padding-top: 96px; gap: 0; }
  .guide-nav { position: static; max-height: none; overflow: visible; margin-bottom: 28px; }
  .guide-nav .pages ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .guide-nav .pages a { white-space: nowrap; background: #1B1517; border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 14px; }
  .guide-nav .pages h2, .guide-nav .toc { display: none; }
}
@media (max-width: 560px) {
  .steps > li { padding-left: 50px; }
  .steps > li::before { width: 36px; font-size: 38px; }
  .steps > li::after { left: 17px; }
  .cards > li, .cards > li:nth-child(n) { rotate: 0deg; }
  .guide-next a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .box, .box:hover { transition: none; transform: none; } }
.guide-main .note-table td:last-child { white-space: normal; color: var(--paper-2); }
.guide-main .note-table td:last-child:not(:nth-child(2)) { white-space: nowrap; color: var(--marigold); }
.guide-main .note-table th a { text-decoration-color: var(--madder); }
.guide-main .note-list { margin-bottom: 24px; }
.guide-main .box .chip { font-style: normal; }
.runs a { color: var(--marigold); text-underline-offset: 3px; white-space: nowrap; }
.runs a:hover { color: var(--paper); }
.guide-nav { scrollbar-width: thin; scrollbar-color: #2A2224 transparent; }
.guide-main li, .guide-main dd { min-width: 0; }

/* guides, second pass: pick your box first (one panel at a time), drawn
   tiles, a paper quick-start card, steps with their code beside them */
.guide-page .bar { background: linear-gradient(var(--black) 55%, transparent); }
.box svg { width: 34px; height: 34px; fill: none; stroke: var(--marigold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.box svg circle { fill: var(--marigold); stroke: none; }
.boxes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.box[aria-current="true"] { background: var(--paper); color: var(--black); box-shadow: 3px 4px 0 var(--deep); rotate: -.4deg; }
.box[aria-current="true"] small { color: #3A3133; }
.box[aria-current="true"] svg { stroke: var(--madder); }
.box[aria-current="true"] svg circle { fill: var(--madder); }
div.box { box-shadow: none; background: transparent; border: 1px dashed #3A2E31; }
div.box:hover { transform: none; box-shadow: none; }
.pick-note { font-size: 15px; }
.show-all { white-space: nowrap; }
[data-box] { scroll-margin-top: 90px; }
[data-box][hidden="until-found"] { padding: 0; border: 0; margin: 0; }

.quick { background: var(--paper); color: #3A3133; border-radius: 4px; padding: 22px 24px 4px; box-shadow: 4px 5px 0 var(--deep); rotate: -.25deg; margin: 10px 0 26px; }
.quick-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 18px !important; color: #3A3133 !important; }
.quick-head b { font: italic 400 28px/1 var(--serif); color: var(--black); }
.quick-head span { font-size: 14px; }
.quick .steps > li::before { color: var(--madder); text-shadow: none; }
.quick .steps > li::after { border-color: rgb(96 19 46 / .35); }
.quick h3 { color: var(--black) !important; }
.quick p { color: #3A3133 !important; }
.quick code { background: rgb(96 19 46 / .1); color: var(--deep); }
.quick a { color: var(--deep) !important; }
.quick .snippet code { background: none; color: var(--paper); }

@media (min-width: 1240px) {
  .guide { grid-template-columns: 220px minmax(0, 860px); }
  .steps.split > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 28px; align-items: start; }
  .steps.split > li > :not(.snippet) { grid-column: 1; }
  .steps.split > li > .snippet { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .guide-main > header, .guide-main section > p, .guide-main section > ul, .guide-main section > dl, .qa > div > p { max-width: 720px; }
}
.box { align-content: start; }
.box .chip { align-self: end; margin-top: 6px; }
.boxes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
@media (max-width: 560px) { .boxes { grid-template-columns: 1fr 1fr; } .box { padding: 12px 13px; } }
.quick { rotate: 0deg; padding-bottom: 0; }
.quick .steps { margin-bottom: 0; }