/* wyrd.dev — the home, the true sky in three dimensions (site98, revision 2, 2026-11-07).
   The house tokens and Norn motion carried over from site.css (wave 87); nothing invented.
   Fonts: Cormorant Garamond and Inter, self-hosted (OFL 1.1). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }

:root {
  --void: #050505; --violet: #1A0B22; --earth: #241B16;
  --bone: #D8D4C8; --mist: #C7CDD4; --slate: #7F98A3;
  --amber: #F5A623; --teal: #1ECBE1; --bronze: #A5805D;
  --bone-dim: rgba(216, 212, 200, 0.70);
  --bone-quiet: rgba(216, 212, 200, 0.62); /* 4.8:1 on the brightest band glow, 5.5:1 on the void */
  --bone-faint: rgba(216, 212, 200, 0.16);
  --amber-faint: rgba(245, 166, 35, 0.34);
  --teal-faint: rgba(30, 203, 225, 0.24);
  --scrim: rgba(5, 5, 5, 0.62);
  --serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --urd: cubic-bezier(0.22, 1, 0.36, 1);
  --verdandi: cubic-bezier(0.37, 0, 0.63, 1);
  --skuld: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --gutter: clamp(16px, 5vw, 72px);
  --measure: 31rem;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--void); color: var(--bone); font-family: var(--serif); font-size: 20px; line-height: 1.58;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-faint); transition: border-color 500ms var(--verdandi), color 500ms var(--verdandi); }
a:hover, a:focus-visible { border-bottom-color: var(--amber); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caps { font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; }
.quiet { color: var(--bone-quiet); font-size: 17px; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 50; padding: 10px 14px; background: var(--void); transform: translateY(-140%); transition: transform 300ms var(--urd); }
.skip:focus { transform: none; }

/* ── the sky, behind everything ─────────────────────────────────────────────── */
.sky3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sky3d canvas { display: block; width: 100%; height: 100%; }
.sky-labels { position: absolute; inset: 0; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; transform: translate3d(-9999px, 0, 0); white-space: nowrap; font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(216, 212, 200, 0.62); will-change: transform, opacity; }
.lbl.aether { color: rgba(30, 203, 225, 0.82); }
.lbl.here { color: var(--bone); }
.lbl.light { letter-spacing: 0.14em; font-size: 11px; }
.lbl.light b { font-weight: 500; }
.lbl.sun { color: var(--amber); } .lbl.moon { color: var(--bone); } .lbl.wyrd { color: var(--teal); }
.lbl.seatlbl { text-transform: none; letter-spacing: 0.04em; font-size: 13px; color: var(--bone); }
.lbl.seatlbl i { font-style: normal; color: var(--amber); }
.lbl.birth { color: var(--amber); }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(5, 5, 5, 0.55) 100%); }
.fallback-sky { position: fixed; inset: 0; z-index: 0; display: none; }
.no-webgl .sky3d { display: none; }
.no-webgl .fallback-sky { display: block; }
.fallback-sky canvas { width: 100%; height: 100%; display: block; }

/* ── the flight: the sky as a picture, under the live sky (revision 4) ───────────── */
.flight { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--void); overflow: hidden; contain: strict; }
.flight .leg { position: absolute; inset: 0; opacity: 0; }
.flight .leg:first-child { opacity: 1; }
.flight picture { display: contents; }
.flight .leg img, .flight .leg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flight .leg img { transform-origin: 50% 45%; }
.flight .leg video { opacity: 0; transition: opacity 240ms linear; }
.flight .leg.has-clip video { opacity: 1; }
/* the live sky is the reading laid on the picture: its black is clear, its lines and labels glow */
.has-flight .sky3d, .has-flight .fallback-sky { mix-blend-mode: screen; opacity: 0; }
/* the words' panel over the flight: dark enough that a bright streak passing behind (a corona ray, the band's
   ring of the live sky) leaves the quiet lines at 4.5:1 or better */
.has-flight .copy { background: rgba(5, 5, 5, 0.8); }
.has-flight .ch-arrival .pin::before, .has-flight .ch-close .pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 52% at 50% 50%, rgba(5, 5, 5, 0.74), rgba(5, 5, 5, 0) 78%); }
/* the closing words stand in front of the dawn, the brightest frame of the flight */
.has-flight .ch-close .pin::before { background: radial-gradient(66% 60% at 50% 47%, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.4) 68%, rgba(5, 5, 5, 0) 94%); }
.has-flight .closing .house { color: var(--bone); text-shadow: 0 1px 14px rgba(5, 5, 5, 0.95); }
.has-flight .hero-live { color: var(--bone-dim); text-shadow: 0 1px 14px rgba(5, 5, 5, 0.95); }
@media (max-width: 860px) { /* a phone holds the words closer to the bright parts of the frame */
  .has-flight .copy { background: rgba(5, 5, 5, 0.84); }
  .has-flight .ch-arrival .pin::before { background: radial-gradient(95% 62% at 50% 50%, rgba(5, 5, 5, 0.8), rgba(5, 5, 5, 0.3) 72%, rgba(5, 5, 5, 0) 96%); }
  .has-flight .ch-close .pin::before { background: radial-gradient(100% 64% at 50% 48%, rgba(5, 5, 5, 0.88), rgba(5, 5, 5, 0.45) 70%, rgba(5, 5, 5, 0) 98%); }
}
.has-flight .hero-title, .has-flight .closing .big { text-shadow: 0 0 30px rgba(5, 5, 5, 0.8); }
@media (prefers-reduced-motion: reduce) { .flight .leg img { transform: none !important; } }
/* the sky notes: what the camera is passing, one line at a time */
.sky-notes { position: fixed; left: var(--gutter); bottom: 20px; z-index: 3; width: min(27rem, calc(100vw - 2 * var(--gutter))); height: 0; pointer-events: none; }
/* where the chapter's words or pictures hold the lower left, the note crosses to the lower right (flight.mjs) */
.sky-notes.flip { left: auto; right: var(--gutter); }
/* a note comes in on Urd and leaves on Skuld */
.sky-notes p { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: 10px 14px 11px; font-size: 15px; line-height: 1.45; font-style: italic;
  color: var(--bone); background: rgba(5, 5, 5, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--skuld), transform 280ms var(--skuld); }
.sky-notes p.on { opacity: 1; transform: none; transition: opacity 700ms var(--urd), transform 800ms var(--urd); }
/* the gold thread: as a note comes up, a hairline of amber is spun down its edge, what is becoming (Verðandi) */
.sky-notes p::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(var(--amber), var(--amber-faint) 64%, rgba(245, 166, 35, 0)); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 240ms var(--skuld); }
.sky-notes p.on::before { transform: none; transition: transform 600ms var(--verdandi) 180ms; }
.sky-notes .caps { display: block; margin-bottom: 3px; font-style: normal; color: var(--amber); }
.sky-notes b { font-weight: 500; font-style: normal; color: var(--bone); }
.sky-notes b.sun { color: var(--amber); }
.no-motion .sky-notes p, .no-motion .sky-notes p::before { transition: none; transform: none; }
html:not(.has-flight) .sky-notes { display: none; }
@media (max-width: 860px) { /* on a phone the words sit low, so the note rides under the header */
  .sky-notes { top: calc(70px + env(safe-area-inset-top)); bottom: auto; }
  .sky-notes p { top: 0; bottom: auto; font-size: 14px; padding: 8px 12px 9px; }
}

/* ── the top ─────────────────────────────────────────────────────────────── */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px var(--gutter); pointer-events: none;
  background: linear-gradient(rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0)); }
.top > * { pointer-events: auto; }
/* over the flight the bar needs a deeper veil: some frames burn bright at the top (the fire of the void, the
   amber of the live sky's lines), the nav is small type, and a tall chapter's words pass under the bar. Near-black
   across the bar itself, then fading into the frame. */
.has-flight .top { background: none; }
.has-flight .top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(140px + env(safe-area-inset-top, 0px)); z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(5, 5, 5, 0.97), rgba(5, 5, 5, 0.94) 50px, rgba(5, 5, 5, 0.5) 90px, rgba(5, 5, 5, 0)); }
.mark { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 21px; letter-spacing: 0.42em; color: var(--amber); border: 0; }
.mark .emblem { width: auto; height: 30px; }
.mark span { text-indent: 0.42em; }
.top-nav { display: flex; gap: 22px; }
.top-nav a { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-quiet);
  border-bottom-color: transparent; padding: 12px 0; }
.top-nav a.on { color: var(--bone); border-bottom-color: var(--amber-faint); }
.top-app { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; padding: 12px 0; }
@media (max-width: 1120px) { .top-nav { display: none; } }

/* ── chapters ────────────────────────────────────────────────────────────── */
main { position: relative; z-index: 2; }
.ch { position: relative; }
/* a pin is never shorter than the screen and grows with its words; main.mjs pins a tall one by its foot */
.pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 76px var(--gutter) 24px; }
.ch-arrival { height: 170vh; }
.ch-band { height: 330vh; }
.ch-now { height: 170vh; }
.ch-finder { height: 190vh; }
.ch-chakras { height: 260vh; }
.ch-seats { height: calc(35 * 17vh + 100vh); }
.ch-inside { height: 340vh; }
.ch-edition { height: 210vh; }
.ch-license { height: 190vh; }
.ch-hand { height: 180vh; }
.ch-app { height: 190vh; }
.ch-close { height: 140vh; }
.no-motion .ch { height: auto; }
.no-motion .pin { position: relative; height: auto; min-height: 100vh; padding-top: 96px; padding-bottom: 72px; }

.copy { position: relative; max-width: var(--measure); padding: 30px 30px 26px; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-left: 1px solid var(--bone-faint);
  transition: opacity 700ms var(--urd), transform 900ms var(--urd); }
.copy.right { margin-left: auto; }
.copy p { margin: 0 0 14px; }
.copy p:last-child { margin-bottom: 0; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; margin: 0 0 18px; color: var(--bone); letter-spacing: 0.005em; }
h2 em { font-style: italic; color: var(--amber); }

/* arrival */
.ch-arrival .pin { justify-content: center; text-align: center; }
.hero { max-width: 46rem; margin-top: -4vh; }
.hero-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 13vw, 168px); line-height: 0.92;
  letter-spacing: 0.34em; text-indent: 0.34em; color: var(--bone); text-shadow: 0 0 60px rgba(5, 5, 5, 0.9); }
.hero-lede { margin: 18px 0 0; font-style: italic; font-size: clamp(24px, 3vw, 34px); color: var(--amber); }
.hero-sub { margin: 18px auto 0; max-width: 34rem; color: var(--bone-dim); font-size: 19px; text-shadow: 0 1px 18px rgba(5, 5, 5, 0.95); }
.hero-live { margin: 26px auto 0; font-family: var(--sans); font-size: 13px; letter-spacing: 0.05em; color: var(--bone-quiet); }
.hero-live b { font-weight: 500; color: var(--bone); }
.hero-live .sun b { color: var(--amber); } .hero-live .wyrd b { color: var(--teal); }
.cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--bone-quiet); }
.cue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--bone-faint), transparent); }

/* the band ruler */
.ruler-fig { margin: 22px 0 0; }
.ruler { display: block; width: 100%; height: auto; overflow: visible; }
.ruler .t rect { fill: rgba(30, 203, 225, 0.10); stroke: rgba(30, 203, 225, 0.55); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.ruler .t rect.aether { fill: rgba(30, 203, 225, 0.32); }
.ruler text { font-family: var(--sans); font-size: 3.1px; letter-spacing: 0.2px; fill: rgba(216, 212, 200, 0.6); }
.ruler-fig figcaption { margin-top: 10px; font-family: var(--sans); font-size: 12px; color: var(--bone-quiet); line-height: 1.5; }
.ruler-fig figcaption span { white-space: normal; }
.key { display: inline-block; width: 18px; height: 8px; margin-right: 6px; vertical-align: 0; }
.key.t { background: rgba(30, 203, 225, 0.3); border: 1px solid rgba(30, 203, 225, 0.7); }

/* now */
.lights { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.lights li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; font-family: var(--sans); font-size: 14px; color: var(--bone-dim); }
.lights img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lights .wyrd-dot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--teal); box-shadow: 0 0 18px var(--teal-faint) inset; }
.lights b { font-weight: 500; color: var(--bone); font-size: 15px; }
.lights .sun b { color: var(--amber); } .lights .wyrd b { color: var(--teal); }
.lights .deg { color: var(--bone-quiet); font-size: 12.5px; }

/* finder */
.finder-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 20px 0 6px; }
.finder-form label { display: grid; gap: 8px; color: var(--bone-quiet); }
.finder-form input { font: 400 18px/1 var(--sans); color: var(--bone); background: rgba(5, 5, 5, 0.6); border: 1px solid var(--bone-faint);
  border-radius: 2px; padding: 12px 14px; min-height: 48px; color-scheme: dark; }
.go { font: 500 11px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--void); background: var(--amber);
  border: 0; border-radius: 2px; padding: 0 20px; min-height: 48px; cursor: pointer; transition: filter 400ms var(--verdandi); }
.go:hover, .go:focus-visible { filter: brightness(1.12); }
a.go { display: inline-flex; align-items: center; border: 0; }
/* the arrow on a way onward is drawn (one stroke), not a glyph, and is not read aloud */
.arw { display: inline-block; width: 15px; height: 10px; margin-left: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; vertical-align: -1px; flex: none; }
.more .arw { width: 18px; height: 12px; margin-left: 8px; vertical-align: 0; }
.answer { margin-top: 18px; opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--urd), transform 700ms var(--urd); }
.answer.shown { opacity: 1; transform: none; }
.answer .sign { display: block; font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--amber); }
.answer .meta { display: block; margin: 8px 0 12px; color: var(--teal); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.06em; }
.answer .mini { display: none; }
.answer .realm { display: block; }
.answer .realm { margin: -4px 0 12px; font-family: var(--sans); font-size: 12.5px; color: var(--bone-dim); }
.answer .realm b { color: var(--bone); font-weight: 500; }
.window { position: absolute; right: var(--gutter); top: 50%; width: min(30vw, 340px); margin: 0; transform: translateY(-46%) scale(0.98);
  opacity: 0; transition: opacity 1200ms var(--urd), transform 1600ms var(--urd); pointer-events: none; }
.window.shown { opacity: 1; transform: translateY(-50%); }
.window img { width: 100%; height: auto; border-radius: 160px 160px 4px 4px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); }
.window figcaption { margin-top: 12px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.05em; color: var(--bone-dim); text-align: center; }
.window figcaption b { color: var(--bone); font-weight: 500; }

/* the seats */
.ch-seats .pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.seats-head { align-self: start; margin-top: 15vh; }
.seat-stack { position: relative; height: min(76vh, 640px); }
.seat { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 0; background: rgba(5, 5, 5, 0.72);
  border: 1px solid rgba(245, 166, 35, 0.16); opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(0.985); transition: opacity 520ms var(--urd), transform 700ms var(--urd); }
.seat.on { opacity: 1; pointer-events: auto; transform: none; }
.seat-art { position: relative; overflow: hidden; background: var(--violet); }
.seat-art .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seat-text { padding: 26px 26px 22px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.seat-n { color: var(--bone-quiet); font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; }
.seat h3 { margin: 10px 0 2px; font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--amber); }
.seat .bayer { margin: 0 0 16px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.06em; color: var(--teal); }
.seats-head .mystery { font-style: italic; color: var(--amber); }
.seat dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0 0 14px; font-family: var(--sans); font-size: 12.5px; }
.seat dt { color: var(--bone-quiet); letter-spacing: 0.08em; text-transform: lowercase; }
.seat dd { margin: 0; color: var(--bone); }
.seat .kind { margin: 0 0 14px; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--bone-dim); }
.seat .photo { display: flex; align-items: center; gap: 12px; margin: auto 0 0; }
.seat .photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 1px solid var(--bone-faint); }
.seat .photo figcaption { font-family: var(--sans); font-size: 11.5px; color: var(--bone-quiet); line-height: 1.4; }
.seat-index { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 14px; justify-content: center; }
/* each dot is a 24px target (WCAG 2.5.8); the 9px dot is drawn inside it */
.seat-index button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.seat-index button::before { content: ""; position: absolute; left: 7.5px; top: 7.5px; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1px solid rgba(216, 212, 200, 0.5); }
.seat-index button.on::before { background: var(--amber); border-color: var(--amber); }
.seat-index button:focus-visible { outline-offset: 0; }
.no-motion .seat-stack { height: auto; display: grid; gap: 18px; }
.no-motion .seat { position: relative; opacity: 1; pointer-events: auto; transform: none; min-height: 440px; }
.no-motion .seat-index { display: none; }

/* inside: the films */
.ch-inside .pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.film { position: relative; justify-self: center; width: min(40vh, 34vw, 400px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px;
  background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75); }
.film .shot { position: absolute; inset: 0; opacity: 0; }
.film .shot img, .film .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .shot video { opacity: 0; transition: opacity 300ms linear; }
.film .shot.has-clip video { opacity: 1; }
.film-cap { margin: 0; min-height: 3.2em; }
.film-cap b { display: block; font-weight: 400; font-size: 30px; color: var(--amber); line-height: 1.1; }
.film-cap span { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.film-progress { display: flex; gap: 6px; margin-top: 16px; }
.film-progress i { flex: 1; height: 1px; background: var(--bone-faint); position: relative; overflow: hidden; }
.film-progress i::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform: scaleX(var(--p, 0)); transform-origin: left; }
.no-motion .film .shot:first-child { opacity: 1; }

/* the First Edition */
.ch-edition .pin { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.edition-card { margin: 0; justify-self: center; width: min(40vh, 26vw, 330px); perspective: 1200px; }
.edition-card .foil { position: relative; border-radius: 10px; overflow: hidden; transform: rotateY(var(--tilt, 0deg)) rotateX(2deg);
  transition: transform 900ms var(--urd); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.7); }
.edition-card .foil img { width: 100%; height: auto; }
.edition-card .foil::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent calc(var(--shine, 40%) - 18%), rgba(255, 236, 196, 0.26) var(--shine, 40%), rgba(245, 166, 35, 0.14) calc(var(--shine, 40%) + 6%), transparent calc(var(--shine, 40%) + 20%)); }
.edition-card figcaption { margin-top: 14px; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.05em; color: var(--bone-dim); }
.edition-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 18px; padding: 0; list-style: none; font-family: var(--sans); font-size: 12.5px; color: var(--bone-dim); }
/* a small drawn lozenge, not a glyph */
.edition-notes li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; background: var(--amber); transform: rotate(45deg); vertical-align: 2px; }
.ch-edition :focus-visible, .ch-license :focus-visible { outline-color: var(--amber); }
.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 0; border-top: 1px solid rgba(216, 212, 200, 0.1); border-bottom: 1px solid rgba(216, 212, 200, 0.1); margin: 0 0 14px; }
.price-row p { margin: 0; }
.price { display: grid; gap: 4px; }
.price .num { font-size: 38px; line-height: 1; color: var(--amber); }
.price .pack { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-quiet); }
.go[disabled] { cursor: not-allowed; color: var(--bone); background: transparent; border: 1px solid rgba(216, 212, 200, 0.5); filter: none; }
.no-motion .edition-card .foil { transform: none; }

/* the creator license */
.ch-license .pin { justify-content: flex-end; }
.ch-license .copy { max-width: 38rem; }
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin: 6px 0 16px; }
.scope h3 { margin: 0 0 6px; color: var(--amber); font-weight: 500; }
.scope div:last-child h3 { color: var(--bone-quiet); }
.scope ul { margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 13px; color: var(--bone); }
.scope li { padding: 4px 0; border-top: 1px solid rgba(216, 212, 200, 0.08); }
.method { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--bone-dim); }

/* the chakras */
.ch-chakras .pin { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.ch-chakras .copy { max-width: 32rem; }
.chakra-film { width: min(40vh, 22vw, 300px); }
.rung-now b { font-weight: 500; color: var(--bone); }
.rung-now b.sun { color: var(--amber); }
.ladder { list-style: none; margin: 0; padding: 14px 18px; display: grid; grid-template-columns: 1fr; gap: 0; font-family: var(--sans); font-size: 12.5px;
  background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-left: 1px solid var(--bone-faint); }
.ladder li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 2px 10px; padding: 5px 0; border-top: 1px solid rgba(216, 212, 200, 0.07); color: var(--bone-dim); }
.ladder li:first-child { border-top: 0; }
.ladder .rung { color: var(--bone); }
.ladder .sign { color: var(--bone-quiet); font-size: 11.5px; letter-spacing: 0.04em; }
.ladder .tag { grid-column: 2 / -1; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.ladder .tag:empty { display: none; }
.ladder li.is-birth .tag { color: var(--teal); }
.orb { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0, var(--g) 38%, var(--g) 62%, rgba(0, 0, 0, 0.35) 100%); box-shadow: 0 0 10px var(--g); }
.ladder li.is-sun .orb, .ladder li.is-moon .orb, .ladder li.is-birth .orb { outline: 1px solid var(--amber); outline-offset: 3px; }
.ladder li.is-birth .orb { outline-color: var(--teal); }
.orb.r1 { --g: #B8C74E; } .orb.r2 { --g: #2F7D5B; } .orb.r3 { --g: #F58A3C; } .orb.r4 { --g: #F5C33B; } .orb.r5 { --g: #8FD8E8; }
.orb.r6 { --g: #6FB9E8; } .orb.r7 { --g: #E04438; } .orb.r8 { --g: #DCE8F5; } .orb.r9 { --g: #5A6BD8; } .orb.r10 { --g: #3FA98F; }
.orb.r11 { --g: #8E2430; } .orb.r12 { --g: #E8B8C8; } .orb.r13 { --g: #E8C24E; } .orb.r14 { --g: #7B5EA7; } .orb.r15 { --g: #F56A2E; }

/* by hand */
.ch-hand .pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.plate { margin: 0; justify-self: center; width: min(46vh, 38vw, 460px); }
.plate img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); opacity: 0.92; }
.offer { list-style: none; margin: 18px 0; padding: 0; }
.offer li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 12px 0; border-top: 1px solid rgba(216, 212, 200, 0.08); }
.offer li:last-child { border-bottom: 1px solid rgba(216, 212, 200, 0.08); }
.offer .name { color: var(--bone); font-size: 20px; }
.offer .what { grid-column: 1; font-family: var(--sans); font-size: 12.5px; color: var(--bone-quiet); }
.offer .price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--amber); font-size: 18px; }

/* the app */
.ch-app .pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.triad { position: relative; height: min(64vh, 520px); }
.triad figure { position: absolute; top: 50%; left: 50%; margin: 0; width: clamp(110px, 12vw, 170px); transition: transform 1100ms var(--urd); }
.triad img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7); }
.triad figcaption { margin-top: 10px; text-align: center; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.triad .sol figcaption { color: var(--amber); } .triad .wyrd figcaption { color: var(--teal); }
.no-motion .triad { display: flex; gap: 14px; height: auto; }
.no-motion .triad figure { position: relative; top: auto; left: auto; transform: none; }

/* the close */
.ch-close .pin { justify-content: center; text-align: center; }
.closing .big { margin: 0; font-size: clamp(34px, 5.4vw, 72px); line-height: 1.08; color: var(--bone); }
.closing .big em { color: var(--amber); }
.closing .house { margin: 22px 0 0; font-style: italic; color: var(--bone-quiet); }
.closing .doors { margin: 34px 0 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ghost { font: 500 11px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--bone-faint);
  border-radius: 2px; padding: 0 18px; min-height: 48px; display: inline-flex; align-items: center; }
.ghost:hover, .ghost:focus-visible { border-color: var(--amber); }

/* foot */
.foot { position: relative; z-index: 2; padding: 40px var(--gutter) 46px; display: grid; gap: 14px; justify-items: center; text-align: center;
  background: linear-gradient(rgba(5, 5, 5, 0), var(--void) 40%); font-family: var(--sans); font-size: 12.5px; color: var(--bone-quiet); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.foot nav a { color: var(--bone-dim); border-bottom-color: transparent; padding: 10px 0; }
.foot .house { font-family: var(--serif); font-style: italic; font-size: 17px; }
.foot .credits { max-width: 46rem; font-size: 11.5px; line-height: 1.55; color: var(--bone-quiet); }

/* ── phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) and (min-width: 861px) {
  .ch-chakras .pin { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .chakra-film { display: none; }
}
@media (max-width: 860px) {
  body { font-size: 18px; }
  /* a pin is never shorter than the screen, and grows with its words; main.mjs pins a tall one by its foot */
  .top { background: linear-gradient(rgba(5, 5, 5, 0.94) 0, rgba(5, 5, 5, 0.94) 62%, rgba(5, 5, 5, 0)); }
  .pin { align-items: flex-end; height: auto; min-height: 100vh; min-height: 100svh; padding-top: 72px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .ch-band .pin { position: relative; } /* the words pass, then the globe turns on its own */
  .copy { padding: 20px 18px 18px; max-width: none; width: 100%; border-left: 0; border-top: 1px solid var(--bone-faint); }
  .copy.right { margin-left: 0; }
  .ch-arrival .pin, .ch-close .pin { align-items: center; }
  .hero-sub { font-size: 17px; }
  .window { display: none; }
  .answer .mini { display: block; float: right; width: 76px; height: auto; margin: 0 0 8px 14px; border-radius: 38px 38px 3px 3px; box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.2); }
  .answer .realm { display: block; }
  .ch-seats .pin { grid-template-columns: 1fr; align-content: end; gap: 10px; }
  .seats-head { margin-top: 0; }
  .seats-head p { display: none; }
  .seats-head h2 { font-size: 26px; margin-bottom: 0; }
  .seat-stack { height: min(68vh, 560px); margin-bottom: 30px; }
  .seat { grid-template-columns: 1fr; grid-template-rows: 44% 56%; }
  .seat-text { padding: 14px 16px 12px; }
  .seat h3 { margin-top: 6px; font-size: 30px; }
  .seat .line { font-size: 16px; margin-bottom: 10px; }
  .seat dl { font-size: 12px; gap: 3px 12px; margin-bottom: 8px; }
  .seat .photo img { width: 46px; height: 46px; }
  .seat .kind { display: none; }
  .seat-index { display: none; } /* on a phone the scroll is the way from seat to seat */
  .ch-inside .pin, .ch-chakras .pin, .ch-edition .pin, .ch-hand .pin, .ch-app .pin { grid-template-columns: 1fr; align-content: end; gap: 14px; }
  .ch-license .pin { justify-content: stretch; }
  .chakra-film { height: 30vh; height: 30svh; width: auto; }
  .ladder { grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 10px 14px; }
  .ladder li:nth-child(2) { border-top: 0; }
  .edition-card { order: 1; width: min(46vw, 210px); }
  .scope { gap: 4px 18px; }
  .film { height: 40vh; height: 40svh; width: auto; order: -1; }
  .plate { display: none; }
  .triad { height: 30vh; order: 1; }
  .triad figure { width: min(22vw, 104px); }
  .no-motion .ch-seats .pin { grid-template-columns: 1fr; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .film { height: 36vh; height: 36svh; }
  .chakra-film { height: 26vh; height: 26svh; }
  .triad { height: 30vh; }
}
@media (prefers-reduced-motion: reduce) {
  .copy, .seat, .answer, .window, .edition-card .foil, .triad figure { transition-duration: 1ms !important; }
}
/* under a finger every way onward is at least 44px each way: the hit area grows, the drawing does not */
@media (pointer: coarse) {
  .mark, .top-app, .more, .foot nav a { position: relative; }
  .mark::after, .top-app::after, .more::after, .foot nav a::after { content: ""; position: absolute; }
  .mark::after { inset: -6px -2px; }
  .top-app::after { inset: -2px -8px; }
  .more::after { inset: -12px -2px; } /* the inset is from inside the link's 1px underline */
  .foot nav a::after { inset: -3px -6px; }
}