/* ELSEWHERE · the landing page, in the Illuminated language (docs/DESIGN.md, src/css/tokens.css, design/board/*). */

:root {
  --ink: #0A0D18;
  --night: #141936;
  --teal: #0F2D31;
  --parchment: #F3EBDD;
  --gold: #E9C46A;
  --gold-hi: #F7E2A6;
  --gold-pale: #FFF1C9;
  --gold-lo: #A97A35;
  --aether: #A6F4E6;
  --ember: #FF8A5B;
  --muted: rgba(243, 235, 221, .78);
  --faint: rgba(243, 235, 221, .62);
  --hair: rgba(243, 235, 221, .12);
  --gold-hair: rgba(233, 196, 106, .32);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gold-fill: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 40%, #C9973F 76%, #A97A35 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.12, .35, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gut: max(16px, min(4.4vw, 64px));
  --pad-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gut), env(safe-area-inset-right, 0px));
  --wrap: 1320px;
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .0388 3.1%, .1334 6.3%, .2576 9.4%, .392 12.5%, .5232 15.6%, .643 18.8%, .7466 21.9%, .8323 25%, .9 28.1%, .9513 31.3%, .9881 34.4%, 1.0129 37.5%, 1.0281 40.6%, 1.0359 43.8%, 1.0384 46.9%, 1.0372 50%, 1.0338 53.1%, 1.0291 56.3%, 1.024 59.4%, 1.0189 62.5%, 1.0142 65.6%, 1.0102 68.8%, 1.0068 71.9%, 1.0041 75%, 1.0021 78.1%, 1.0006 81.3%, .9996 84.4%, .999 87.5%, .9986 90.6%, .9985 93.8%, .9986 96.9%, 1); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; overflow-x: hidden; overflow-x: clip;
  background: var(--ink); color: var(--parchment);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg, picture { display: block; max-width: 100%; }
img { -webkit-user-drag: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(233, 196, 106, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--aether); outline-offset: 3px; border-radius: 6px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding-left: var(--pad-l); padding-right: var(--pad-r); }

/* ─────────────── shared pieces ─────────────── */

.eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.sec-head { max-width: 780px; margin: 0 auto clamp(44px, 5.5vw, 84px); text-align: center; }
.sec-title { margin-top: 18px; font: 360 clamp(36px, 2.6vw + 22px, 66px)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.sec-lede { margin: 20px auto 0; max-width: 33em; font-size: clamp(16px, .3vw + 15px, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* the seam glyph, breathing */
.glyph { position: relative; display: inline-grid; place-items: center; line-height: 0; }
.glyph svg { position: relative; filter: drop-shadow(0 0 2px #FFF1C9) drop-shadow(0 0 9px rgba(255, 214, 140, .9)) drop-shadow(0 0 24px rgba(233, 196, 106, .5)); }
.glyph::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 520%; height: 190%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .38), rgba(233, 196, 106, .12) 55%, rgba(233, 196, 106, 0));
  animation: breathe 5.6s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe { 0%, 100% { opacity: .5; scale: .88; } 50% { opacity: 1; scale: 1.06; } }

/* gold motes drifting up (each one's --x --y --d --t below) */
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #FFE3A3; box-shadow: 0 0 8px 2px rgba(255, 214, 140, .62); opacity: 0;
  animation: mote var(--t, 11s) linear var(--d, 0s) infinite;
}
/* along the key art's seam (in % of the art, so they follow it at any crop) */
.hero .motes i:nth-child(1) { --x: 46%; --y: 62%; --d: 0s; --t: 11s; }
.hero .motes i:nth-child(2) { --x: 48.5%; --y: 74%; --d: 1.7s; --t: 13s; }
.hero .motes i:nth-child(3) { --x: 44.5%; --y: 52%; --d: 3.2s; --t: 10s; }
.hero .motes i:nth-child(4) { --x: 50%; --y: 66%; --d: 4.6s; --t: 12s; }
.hero .motes i:nth-child(5) { --x: 47%; --y: 44%; --d: 6.1s; --t: 11.5s; }
.hero .motes i:nth-child(6) { --x: 49.5%; --y: 84%; --d: 7.4s; --t: 14s; }
.hero .motes i:nth-child(7) { --x: 45.5%; --y: 70%; --d: 8.8s; --t: 12.5s; }
.hero .motes i:nth-child(8) { --x: 51%; --y: 56%; --d: 10.1s; --t: 10.5s; }
@keyframes mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .95; } 70% { opacity: .55; } 100% { transform: translate3d(26px, -300px, 0); opacity: 0; } }

/* buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: 650 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease-out), filter .25s, box-shadow .35s;
}
.btn:active { transform: scale(.97); }
.btn-gold {
  color: #1A1305; background: var(--gold-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 14px 34px rgba(233, 196, 106, .28);
}
.btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 252, 238, .75) 48%, rgba(255, 255, 255, 0) 64%);
  transform: translateX(-120%); transition: transform .9s var(--ease-out);
}
.btn-gold:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 16px 40px rgba(233, 196, 106, .4); }
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:focus-visible { outline: 2px solid var(--aether); outline-offset: 3px; }
.btn-sm { min-height: 40px; height: 40px; padding: 0 18px; font-size: 14px; }
.btn svg { flex: none; transition: transform .35s var(--spring); }
.btn:hover svg { transform: translateX(3px); }

/* "Have an invite? Play the beta →" */
.beta-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14.5px; font-weight: 500; color: rgba(243, 235, 221, .82); text-decoration: none; }
.beta-link span { color: var(--gold-hi); text-decoration: underline 1px rgba(233, 196, 106, .5); text-underline-offset: 5px; transition: text-decoration-color .3s; }
.beta-link svg { color: var(--gold); transition: transform .35s var(--spring); }
.beta-link:hover span { text-decoration-color: var(--gold-hi); }
.beta-link:hover svg { transform: translateX(4px); }

/* the kicker: what it is (gold), then where it is coming */
.kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-shadow: 0 1px 12px rgba(10, 13, 24, .85); }
.kicker-cat { display: flex; align-items: center; gap: 14px; font: 600 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.kicker-cat::before { content: ''; flex: none; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(233, 196, 106, 0), var(--gold)); }
.kicker-plat { padding-left: 54px; font: 500 14.5px/1.35 var(--sans); letter-spacing: .01em; color: rgba(243, 235, 221, .86); }

/* ─────────────── the waitlist form ─────────────── */

.join { position: relative; width: 100%; container-type: inline-size; }
.join-row {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(10, 13, 24, .58); border: 1px solid rgba(233, 196, 106, .34);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 241, 201, .06);
  transition: border-color .3s, box-shadow .4s;
}
.join-row:focus-within { border-color: rgba(233, 196, 106, .78); box-shadow: 0 0 0 4px rgba(233, 196, 106, .13), 0 22px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 241, 201, .08); }
.join-input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; outline: none;
  background: transparent; color: var(--parchment); font-size: 16px; font-weight: 500; letter-spacing: .01em;
}
.join-input::placeholder { color: rgba(243, 235, 221, .58); opacity: 1; }
.join-input:-webkit-autofill { -webkit-text-fill-color: var(--parchment); -webkit-box-shadow: 0 0 0 40px #141936 inset; caret-color: var(--parchment); }
.join-input[aria-invalid='true'] { color: #FFD3C2; }
/* a field that needs fixing: an ember edge and one soft flare (the time-running-out colour) */
.join.is-invalid .join-row, .join.is-invalid .join-row:focus-within { border-color: rgba(255, 138, 91, .72); box-shadow: 0 0 0 4px rgba(255, 138, 91, .12), 0 22px 50px rgba(0, 0, 0, .35); animation: flare .9s var(--ease-out) 1; }
@keyframes flare { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 91, .5), 0 22px 50px rgba(0, 0, 0, .35); } 35% { box-shadow: 0 0 0 7px rgba(255, 138, 91, .2), 0 0 36px rgba(255, 138, 91, .4), 0 22px 50px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 4px rgba(255, 138, 91, .12), 0 22px 50px rgba(0, 0, 0, .35); } }
.join-btn { flex: none; height: 52px; min-width: 176px; }
.join-spin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(26, 19, 5, .22); border-top-color: #1A1305; opacity: 0; transition: opacity .2s; }
.join.is-busy .join-label { opacity: 0; }
.join.is-busy .join-spin { opacity: 1; animation: spin .8s linear infinite; }
.join.is-busy .join-btn { cursor: progress; }
.join.is-busy .btn-gold::after { transition: none; animation: shimmer 1.3s var(--ease-out) infinite; }
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.join-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* the status sits right under the field, where the eye already is; the consent line below it */
.join-status { font-size: 14px; line-height: 1.45; color: var(--muted); text-shadow: 0 1px 10px rgba(10, 13, 24, .8); }
.join-status:not(:empty) { margin-top: 10px; }
.join-status[data-kind='error'] { display: flex; align-items: baseline; gap: 9px; color: #FFC6AE; font-weight: 500; }
.join-status[data-kind='error']::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; translate: 0 -1px; background: var(--ember); box-shadow: 0 0 8px rgba(255, 138, 91, .85); }
.join-consent { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--faint); text-wrap: pretty; }
.join-consent a { color: rgba(243, 235, 221, .84); text-decoration: underline 1px rgba(243, 235, 221, .36); text-underline-offset: 3px; white-space: nowrap; }
.join-consent a:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }
.join-done { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 6px 4px; outline: none; }
.join-done[hidden] { display: none; }
/* a form posted without JavaScript comes back to /?joined=1#joined: the done state shows without any script */
.join-done:target { display: flex; }
.join:has(> .join-done:target) > .join-row, .join:has(> .join-done:target) > .join-consent { display: none; }
.join-done-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.join-done p { font: italic 300 clamp(19px, .5vw + 16px, 23px)/1.3 var(--serif); color: var(--parchment); }
.join-done strong { font-weight: 400; font-style: normal; }
.join-done span { color: var(--gold-hi); }
.join.is-done .join-row, .join.is-done .join-consent { display: none; }
.join.is-done .join-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join.is-done .join-done { animation: arrive 1.1s var(--spring) both; }
.glyph-done::before { width: 600%; }
.share-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(233, 196, 106, .5); background: rgba(10, 13, 24, .45); color: var(--gold-hi);
  font: 600 14px/1 var(--sans); letter-spacing: .01em; transition: border-color .25s, background .25s;
}
.share-btn[hidden] { display: none; }
.share-btn:hover { border-color: var(--gold); background: rgba(233, 196, 106, .1); }
.share-btn svg { color: var(--gold); }
.join-done .share-btn span { color: inherit; }

/* a narrow form stacks the field over the button (the hero's column narrows next to the key art's seam, too) */
@container (max-width: 419px) {
  .join-row { flex-direction: column; align-items: stretch; gap: 6px; border-radius: 28px; }
  .join-input { height: 52px; padding: 0 16px; text-align: center; }
  .join-btn { width: 100%; height: 54px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 479px) {
    .join-row { flex-direction: column; align-items: stretch; gap: 6px; border-radius: 28px; }
    .join-input { height: 52px; padding: 0 16px; text-align: center; }
    .join-btn { width: 100%; height: 54px; }
  }
}

/* ─────────────── the sticky bar ─────────────── */

.bar {
  position: fixed; z-index: 40; left: 0; right: 0; top: 0; padding-top: var(--safe-top);
  background: rgba(10, 13, 24, .74); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(233, 196, 106, .14);
  transform: translateY(-105%); visibility: hidden;
  transition: transform .6s var(--ease-out), visibility 0s .6s;
}
.bar.is-on { transform: none; visibility: visible; transition: transform .7s var(--spring), visibility 0s; }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; max-width: calc(var(--wrap) + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l); }
.bar-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--parchment); }
.bar-glyph { filter: drop-shadow(0 0 4px rgba(255, 214, 140, .9)) drop-shadow(0 0 10px rgba(233, 196, 106, .5)); }
.bar-word { font: 400 15px/1 var(--serif); letter-spacing: .34em; }
.bar-nav { display: flex; align-items: center; gap: 22px; }
.bar-link { font-size: 14px; font-weight: 500; color: rgba(243, 235, 221, .82); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; }
.bar-link:hover { color: var(--gold-hi); }
.bar-play { display: none; }
.is-player .bar-play { display: inline-flex; }
.is-player .bar-join, .is-player .bar-link { display: none; }
.bar.is-on.is-quiet { transform: translateY(-105%); visibility: hidden; transition: transform .6s var(--ease-out), visibility 0s .6s; }
/* narrower screens: "Play the beta" waits for the room; phones share the bar between the wordmark, the invite and the
   Sound button, with a little less air between them */
@media (max-width: 639px) { .bar-link { display: none; } }
@media (max-width: 599px) {
  .bar-inner { gap: 10px; }
  .bar-brand { gap: 10px; }
  .bar-glyph { flex: none; }
  .bar-word { font-size: 13.5px; letter-spacing: .26em; }
  .bar-nav { gap: 6px; }
  .bar .btn-sm { padding: 0 15px; }
}
/* The narrow phones (the 360s and 375s): a little less air, the action's words a size smaller and the Sound button's box
   narrower (its touch stays 44 px), so the seam glyph, the wordmark, the longest actions ("Continue to the beta",
   "Recibe tu invitación") and Sound all keep their room, the same lockup in both languages. Below the common Android
   width the glyph steps aside and the words take a size less. */
@media (max-width: 389px) {
  .bar-inner { gap: 8px; }
  .bar-brand { gap: 9px; }
  .bar-word { letter-spacing: .22em; }
  .bar-nav { gap: 4px; }
  .bar .btn-sm { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  .bar-glyph { display: none; }
  .bar-word { font-size: 12px; letter-spacing: .18em; }
  .bar .btn-sm { padding: 0 11px; font-size: 12px; }
}

/* ─────────────── the language switch: EN / ES ─────────────── */

/* At the top of the page (the bar only arrives later), in the bar once it has the room, and in the footer. The page's own
   language is gold and underlined; a pick is remembered (landing.js), so / stops sending the visitor elsewhere. */
.lang { display: inline-flex; align-items: center; font: 600 12px/1 var(--sans); letter-spacing: .14em; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 6px 0 calc(6px + .14em); color: rgba(243, 235, 221, .76); text-decoration: none; transition: color .2s; }
.lang a:hover { color: var(--gold-hi); }
.lang a[aria-current] { color: var(--gold); text-decoration: underline 1px rgba(233, 196, 106, .7); text-decoration-skip-ink: none; text-underline-offset: 6px; }
.lang-sep { flex: none; width: 1px; height: 12px; background: rgba(243, 235, 221, .26); }
/* the top of the page: one small pill, the Sound button and EN / ES */
.top-tools {
  position: absolute; z-index: 30; top: calc(var(--safe-top) + clamp(10px, 2.2vh, 22px)); right: max(10px, calc(var(--pad-r) - 6px));
  display: flex; align-items: center; padding: 0 4px; border-radius: 999px; background: rgba(10, 13, 24, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22); animation: arrive .9s var(--spring) .45s both;
}
/* the bar: EN / ES once it has the room, the Sound button always (phones keep it next to the invite) */
.bar-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; padding-left: 8px; border-left: 1px solid rgba(243, 235, 221, .14); }
@media (max-width: 599px) { .lang-bar { display: none; } .bar-tools { margin-left: 0; padding-left: 0; border-left: 0; } .no-sound .bar-tools { display: none; } }
.lang-foot a { min-height: 44px; }
/* the footer: Sound and EN / ES travel together, so a narrow footer wraps them as one row */
.foot-tools { display: inline-flex; align-items: center; gap: 24px; }

/* ─────────────── sound: one toggle, in the header, the bar, the footer and the corner in between ─────────────── */

/* A few thin gold bars: they move gently while the music plays, stand still while sound is on and waits (for a first
   touch, or for the audio to run), and lie down into one flat line once sound is off, the four bars still faintly there
   behind it. Each bar's reach (its <i>) springs between those states; the bar inside it (::before) does the moving,
   transforms only. The opacity is the group's, so the line the bars lie down into stays even where they overlap. The
   buttons need JavaScript, Web Audio and the score: .no-sound hides them. Each takes 44 px of touch at least, wherever
   its glyph sits. */
.sound {
  position: relative; display: none; align-items: center; justify-content: center; gap: 9px; min-width: 40px; min-height: 40px; padding: 0 9px;
  border: 0; border-radius: 999px; background: none; color: rgba(243, 235, 221, .76); cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: color .2s;
}
.sound::after { content: ''; position: absolute; inset: -2px 0; }   /* 44 px tall to the touch, in a row of 40 */
.js .sound { display: inline-flex; }
.top-sep { display: none; }
.js .top-sep { display: block; }
.no-sound .sound, .no-sound .top-sep { display: none; }
.sound:hover { color: var(--gold-hi); }
.sound:focus-visible { outline-offset: 2px; border-radius: 999px; }
.sound-top:focus-visible { outline-offset: -3px; }   /* inside the pill, clear of its rim */
.sound-top, .sound-bar { min-width: 44px; }
.sound-label { padding-left: .14em; }   /* the tracking's trailing space, balanced */
.sound-bars { position: relative; flex: none; display: flex; align-items: center; gap: 2.5px; height: 16px; opacity: .6; transition: opacity .5s; }
.sound-bars::before {   /* a still glow behind the bars while it plays */
  content: ''; position: absolute; inset: -8px -9px; border-radius: 50%; opacity: 0; transition: opacity .9s var(--ease-out);
  background: radial-gradient(closest-side, rgba(233, 196, 106, .26), rgba(233, 196, 106, 0));
}
.sound-bars::after {   /* off: the bars, faint, where they stood */
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 50% / 2px 42% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 4.5px 50% / 2px 70% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 9px 50% / 2px 52% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 13.5px 50% / 2px 32% no-repeat;
}
.sound-bars i { position: relative; width: 2px; height: 16px; transform: scale(2.6, .12); transition: transform .8s var(--spring); }
.sound-bars i::before { content: ''; position: absolute; inset: 0; border-radius: 1px; background: linear-gradient(180deg, var(--gold-pale), var(--gold) 45%, var(--gold-lo)); }
.sound-bars i:nth-child(1) { --lo: .34; --hi: .72; --rest: .42; --d: 1.7s; --o: -.9s; }
.sound-bars i:nth-child(2) { --lo: .5; --hi: 1; --rest: .7; --d: 1.25s; --o: -.3s; }
.sound-bars i:nth-child(3) { --lo: .26; --hi: .84; --rest: .52; --d: 2.05s; --o: -1.4s; }
.sound-bars i:nth-child(4) { --lo: .38; --hi: .62; --rest: .32; --d: 1.5s; --o: -.6s; }
.sound[data-state='off'] .sound-bars::after { opacity: .3; }
.sound[data-state='ready'] .sound-bars { opacity: .8; }
.sound[data-state='ready'] .sound-bars i { transform: scaleY(var(--rest)); }
.sound[data-state='on'] .sound-bars { opacity: 1; }
.sound[data-state='on'] .sound-bars i { transform: none; }
.sound[data-state='on'] .sound-bars i::before { animation: sound-bar var(--d) ease-in-out var(--o) infinite alternate; }
.sound[data-state='on'] .sound-bars::before { opacity: 1; }
.sound:hover .sound-bars { opacity: 1; }
@keyframes sound-bar { from { transform: scaleY(var(--lo)); } to { transform: scaleY(var(--hi)); } }
/* where there is room, the word too; elsewhere it is only for screen readers */
@media (max-width: 599px) {
  .sound-top .sound-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 1099px) {
  .sound-bar .sound-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* phones: a narrow box beside the invite, its 44 px of touch reaching into the gutter */
@media (max-width: 599px) {
  .sound-bar { min-width: 32px; padding: 0; }
  .sound-bar::after { inset: -2px -10px -2px -2px; }
}
@media (max-width: 389px) {
  .sound-bar { min-width: 28px; }
  .sound-bar::after { inset: -2px -14px -2px -2px; }
}
.sound-foot { min-height: 44px; margin: 0 -9px; }
.sound-foot::after { inset: 0; }
/* The corner chip (landing.js docks it): the Sound button that holds the corner whenever neither the top's, the bar's
   nor the footer's is on screen. The top pill's glass, on its own; on a phone it sits just where the bar's own button
   arrives, so the bar takes it over in place. */
.sound-dock {
  position: fixed; z-index: 35; top: calc(var(--safe-top) + clamp(10px, 2.2vh, 22px) - 2px); right: max(10px, calc(var(--pad-r) - 6px));
  width: 44px; height: 44px; min-width: 0; padding: 0;
  background: rgba(10, 13, 24, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.9);
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s;
}
.sound-dock::after { inset: 0; }
.sound-dock.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease-out), transform .7s var(--spring), visibility 0s; }
@media (max-width: 599px) { .sound-dock { top: calc(var(--safe-top) + 8px); } }

/* ─────────────── the hero ─────────────── */

/* Wide screens: the text at the left, the key art's seam to its right, tied together. --seam-at is where the seam lands:
   where it sits naturally (49.2vw), or further right when the column needs the room, as far as the art can still cover
   the screen (--seam-max). The column takes the room left of the seam's glow (--room). The stage is then placed so its
   seam (47% of the art, scaled 1.06 about its centre: 46.82% of the stage) lands exactly on --seam-at. */
.hero {
  --zoom-max: 1.2;   /* how far the art may zoom in to make room for the column */
  --col-max: 500px;
  --fs-word: clamp(34px, 2.4vw + 26px, 68px);
  --hero-l: clamp(var(--pad-l), calc(64px + (100vw - 1440px) * .146), 160px);
  --clear: clamp(64px, 7vw, 112px);   /* room for the seam's glow and its torn paper lip */
  --need: max(var(--col-max), var(--fs-word) * 8.92);   /* the column's widest line: the form, or the wordmark */
  --svh: 1vh;
  --stage-min: calc((var(--hero-l) + var(--need) + var(--clear)) / .4982);
  --stage-w: clamp(max(100vw, 150 * var(--svh)), var(--stage-min), max(100vw, 150 * var(--svh)) * var(--zoom-max));
  --seam-at: clamp(49.2vw, calc(var(--hero-l) + var(--need) + var(--clear)), var(--stage-w) * .4982);
  --room: calc(var(--seam-at) - var(--clear) - var(--hero-l));
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: clip;
}
@supports (height: 1svh) { .hero { --svh: 1svh; } }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; background: var(--ink); }
.hero-stage {
  --seam-x: 47%;   /* where the key art's seam runs */
  position: absolute; left: 50%; top: 50%; aspect-ratio: 3 / 2;
  width: clamp(max(100vw, 150vh), var(--stage-min), max(100vw, 150vh) * var(--zoom-max));
  translate: calc(var(--seam-at) - 50vw - 46.82%) calc(-50% + var(--py, 0px)); scale: 1.06; transform-origin: 50% 60%;
}
@supports (width: 1cqw) {
  .hero-stage { width: clamp(max(100cqw, 150cqh), var(--stage-min), max(100cqw, 150cqh) * var(--zoom-max)); translate: calc(var(--seam-at) - 50cqw - 46.82%) calc(-50% + var(--py, 0px)); }
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .hero-stage { opacity: 0; }
.js .hero-stage.is-loaded { animation: hero-arrive 2.4s var(--ease-out) both; }
.js .hero-stage:not(.is-loaded) { animation: show-late .8s 2.5s both; }
@keyframes hero-arrive { 0% { opacity: 0; scale: 1.12; filter: brightness(.72); } 12% { opacity: .8; } 100% { opacity: 1; scale: 1.06; filter: none; } }
@keyframes show-late { to { opacity: 1; } }

.hero-breath {
  position: absolute; top: 0; bottom: 0; left: var(--seam-x); width: 26%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .2), rgba(233, 196, 106, .07) 55%, rgba(233, 196, 106, 0));
  animation: seam-breathe 6.5s ease-in-out 1s infinite both; will-change: opacity;
}
@keyframes seam-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* the scrim follows the seam, so the column reads and the tear still glows */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 24, .9) 0, rgba(10, 13, 24, .74) calc(var(--seam-at) * .5), rgba(10, 13, 24, .34) calc(var(--seam-at) * .86), rgba(10, 13, 24, 0) calc(var(--seam-at) * 1.18)),
    linear-gradient(0deg, var(--ink) 0%, rgba(10, 13, 24, .55) 13%, rgba(10, 13, 24, 0) 34%),
    linear-gradient(180deg, rgba(10, 13, 24, .5) 0%, rgba(10, 13, 24, 0) 20%);
}

.hero-inner {
  position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 4.4vh, 52px);
  width: 100%;
  padding: calc(var(--safe-top) + clamp(88px, 13vh, 140px)) var(--pad-r) calc(var(--safe-bottom) + clamp(88px, 12vh, 132px)) var(--hero-l);
}
.hero-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.4vh, 24px); max-width: max(var(--room), 280px); }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; max-width: min(var(--col-max), var(--room)); }
/* the wordmark (the gilt, the seam's light: "the wordmark" below): it fits the column, as the text did */
.hero .wordmark { font-size: min(var(--fs-word), var(--room) / 9); --wm-delay: .2s; --wm-dur: 1.75s; }
.tagline { max-width: 21em; font: italic 300 clamp(19px, .75vw + 15px, 28px)/1.38 var(--serif); color: rgba(243, 235, 221, .93); text-shadow: 0 1px 16px rgba(10, 13, 24, .7); text-wrap: balance; }
.hero-cta .kicker { margin-bottom: 4px; }
.hero-cta .beta-link { margin-top: -4px; }

/* players who already have the beta on this device: the beta is the main action, the list a quiet second */
.player-cta { display: none; flex-direction: column; align-items: flex-start; gap: 6px; }
.player-btn { height: 56px; padding: 0 28px; font-size: 16.5px; }
.is-player .player-cta { display: flex; }
.is-player .hero .join, .is-player .hero-beta { display: none; }

/* arrival: everything readable by about 0.6 s; the art keeps its slow zoom, drift and motes */
.hero-head > *, .hero-cta > * { animation: arrive .9s var(--spring) both; }
.hero-head > :nth-child(1) { animation-delay: .05s; }
.hero-head > .wordmark { animation: none; }   /* it arrives by its own light */
.hero-head > :nth-child(3) { animation-delay: .22s; }
.hero-cta > :nth-child(1) { animation-delay: .3s; }
.hero-cta > :nth-child(2), .hero-cta > :nth-child(3) { animation-delay: .36s; }
.hero-cta > :nth-child(4) { animation-delay: .42s; }
@keyframes arrive { from { opacity: .01; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* the scroll cue, in the column (only the light inside it moves) */
.hero-cue { position: absolute; left: var(--hero-l); bottom: calc(var(--safe-bottom) + 30px); width: 1px; height: 46px; overflow: hidden; background: rgba(233, 196, 106, .22); animation: arrive 1s var(--ease-out) 1.1s both; }
.hero-cue::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 40%; background: linear-gradient(180deg, rgba(255, 241, 201, 0), #FFF1C9, rgba(255, 241, 201, 0)); box-shadow: 0 0 8px rgba(255, 214, 140, .9); transform: translateY(-100%); animation: cue 2.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { to { transform: translateY(260%); } }

/* short landscape screens (phones on their side): the art zooms in so the seam can sit right of a tighter column */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .hero { --zoom-max: 1.3; --col-max: 440px; --fs-word: clamp(28px, 4vh + 16px, 40px); }
  .hero-inner { gap: 20px; padding-top: calc(var(--safe-top) + 26px); padding-bottom: calc(var(--safe-bottom) + 26px); }
  .hero-head { gap: 12px; }
  .glyph-hero svg { width: 12px; height: 34px; }
  .tagline { font-size: 17px; }
  .hero-cta { gap: 12px; }
  .kicker { gap: 5px; }
  .join-input, .join-btn { height: 46px; }
  .join-consent { margin-top: 8px; }
  .hero-cue { display: none; }
  .hero-scrim { background: linear-gradient(90deg, rgba(10, 13, 24, .93) 0, rgba(10, 13, 24, .82) calc(var(--seam-at) * .7), rgba(10, 13, 24, .34) calc(var(--seam-at) * .95), rgba(10, 13, 24, 0) calc(var(--seam-at) * 1.2)), linear-gradient(0deg, var(--ink) 0%, rgba(10, 13, 24, 0) 30%); }
}

/* portrait screens: the portrait key art, the Main board's composition (title over the ceiling, the call at the bottom).
   The darkening is anchored to the text, not to the screen, so short screens (Safari with its bars, an SE) stay legible. */
@media (max-aspect-ratio: 1/1) {
  .hero-stage { --seam-x: 51%; aspect-ratio: 2 / 3; width: max(100vw, 66.667vh); translate: -50% calc(-50% + var(--py, 0px)); transform-origin: 50% 45%; }
  @supports (width: 1cqw) { .hero-stage { width: max(100cqw, 66.667cqh); translate: -50% calc(-50% + var(--py, 0px)); } }
  .hero-scrim { background: linear-gradient(180deg, rgba(10, 13, 24, .5) 0%, rgba(10, 13, 24, 0) 24%), linear-gradient(0deg, rgba(10, 13, 24, .6) 0%, rgba(10, 13, 24, 0) 28%); }
  .hero-inner { justify-content: space-between; align-items: center; text-align: center; padding: calc(var(--safe-top) + clamp(52px, 8.5vh, 120px)) var(--pad-r) calc(var(--safe-bottom) + clamp(20px, 4vh, 48px)) var(--pad-l); }
  .hero-head { position: relative; align-items: center; max-width: 640px; }
  .hero-head::before {
    content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; top: calc(-1 * var(--safe-top) - 160px); bottom: -90px; pointer-events: none;
    background: linear-gradient(0deg, rgba(10, 13, 24, 0) 0, rgba(10, 13, 24, .62) 90px, rgba(10, 13, 24, .74) 100%);
  }
  .hero .wordmark { font-size: var(--fs-word); }
  .tagline { max-width: 16em; }
  .hero-cta { position: relative; align-items: center; max-width: 460px; margin: 0 auto; }
  .hero-cta::before {
    content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; top: -150px; bottom: calc(-1 * var(--safe-bottom) - 80px); pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 13, 24, 0) 0, rgba(10, 13, 24, .76) 150px, rgba(10, 13, 24, .93) calc(150px + 45%), var(--ink) 100%);
  }
  .kicker { align-items: center; }
  .kicker-cat::after { content: ''; flex: none; width: 40px; height: 1px; background: linear-gradient(270deg, rgba(233, 196, 106, 0), var(--gold)); }
  .kicker-plat { padding-left: 0; }
  .join-consent, .join-status { text-align: center; }
  .join-status[data-kind='error'] { justify-content: center; }
  .hero .join-done { justify-content: center; text-align: left; }
  .player-cta { align-items: center; }
  .hero-cue { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .kicker-cat { gap: 10px; font-size: 11px; letter-spacing: .2em; }
  .kicker-cat::before, .kicker-cat::after { width: 22px; }
  .kicker-plat { font-size: 14px; }
}

/* ─────────────── the wordmark ─────────────── */

/* wordmark: src/css/wordmark.css, copied here by scripts/wordmark.mjs (edit it there, then run the script) */
/* ELSEWHERE's wordmark (docs/DESIGN.md: gold leaf, the seam's light). One treatment for the game's Home and the landing
   page: scripts/wordmark.mjs makes the markup (src/ui/wordmark.js; the landing's hero, inline) and copies this file into
   landing/landing.css between its wordmark comments. Edit it here, then run the script.

   The word is Fraunces drawn as SVG outlines (no font to wait for, the same in Safari, Chrome and both web views, crisp
   at any size). The gilt is one picture, static, rasterized once: leaf with a soft emboss (a rim of light up-left,
   shade down-right), a fine dark edge, ink under it and a warm bloom (an SVG data: URL, generated below; one picture is
   one thing to compose, where the same drawing inline was dozens). Everything that moves is a layer above it that moves
   by transform and opacity only, so the compositor runs it and the page's main thread never wakes for it:
     the entrance   the letters wait unlit; a thread of the seam's light crosses them (--wm-dur, from --wm-delay) and
                    leaves them gilded (the gilt is revealed by a soft edge riding with the light)
     the motes      a few motes drift off the letters, each first as the light passes it
     the sweep      every 11 s a slow specular band glides across the letters (masked to them: the letters as a picture)
     the star       where the markup has one (the landing): a glint on the L as the sweep crosses it
   With reduced motion it is the finished gilt, still. Each page sets --wm-delay, --wm-dur and the font size. */
.wm {
  position: relative; display: block; height: 1em; margin: 0; padding: 0;
  font-family: var(--serif); font-weight: 440; line-height: 1; letter-spacing: 0; text-shadow: none; white-space: nowrap;
  --wm-delay: .1s; --wm-dur: 1.5s;
}
/* the word itself, for screen readers, search, find and copy: transparent, over the art */
.wm-word { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; color: transparent; letter-spacing: .34em; }
.wm-art { position: absolute; inset: 0; pointer-events: none; }
.wm-art > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

/* the letters before the light: the same gilt, unlit (a dark bronze) */
.wm-dim { filter: brightness(.3) saturate(.6); opacity: 0; animation: wm-unlit var(--wm-dur) ease-out var(--wm-delay) both; }
@keyframes wm-unlit { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* the gilt, revealed by the light: a window 1em wider than the word on the left and 2em on the right (the glow is never
   cut), with a soft right edge; it slides across while what it shows slides back, so the letters stay where they are */
.wm-lit { left: -1em; right: -2em; -webkit-mask: linear-gradient(90deg, #000 calc(100% - .8em), transparent); mask: linear-gradient(90deg, #000 calc(100% - .8em), transparent); transform: translateX(-100%); animation: wm-pass var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-lit > span { position: absolute; top: 0; bottom: 0; left: 1em; right: 2em; transform: translateX(calc(100% + 3em)); animation: wm-hold var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-lit i { position: absolute; }
@keyframes wm-pass { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes wm-hold { from { transform: translateX(calc(100% + 3em)); } to { transform: translateX(0); } }

/* the light: a thread of the seam with its halo, riding the window's soft edge (same box, same motion) */
.wm-light { left: -1em; right: -2em; transform: translateX(-100%); animation: wm-pass var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-light::before, .wm-light::after { content: ''; position: absolute; opacity: 0; animation: wm-glow var(--wm-dur) linear var(--wm-delay) both; }
.wm-light::before {
  right: .4em; top: -.2em; bottom: -.14em; width: .06em; margin-right: -.03em; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 246, 222, 0), #FFF6DE 26%, #FFFFFF 50%, #FFF6DE 74%, rgba(255, 246, 222, 0));
  box-shadow: 0 0 .08em .02em rgba(255, 244, 214, .95), 0 0 .36em .08em rgba(255, 210, 130, .6);
}
.wm-light::after { right: -.8em; top: -.25em; bottom: -.25em; width: 2.4em; background: radial-gradient(closest-side, rgba(255, 232, 180, .42), rgba(233, 196, 106, .12) 58%, rgba(233, 196, 106, 0)); }
/* it shows only near the letters: out of nothing at the first E, gone past the last */
@keyframes wm-glow { 0%, 12% { opacity: 0; } 24% { opacity: 1; } 58% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* the sweep: a band of specular light, masked to the letters */
.wm-sheen { overflow: hidden; }
.wm-sheen i { position: absolute; top: -10%; bottom: -10%; background: linear-gradient(100deg, rgba(255, 246, 222, 0) 18%, rgba(255, 248, 230, .45) 42%, rgba(255, 252, 242, .8) 50%, rgba(255, 248, 230, .45) 58%, rgba(255, 246, 222, 0) 82%); transform: translateX(0); }
@supports not ((mask-size: 100%) or (-webkit-mask-size: 100%)) { .wm-sheen { display: none; } }

/* the motes: each rises for half its cycle, then rests */
.wm-motes i { position: absolute; width: .065em; height: .065em; margin: -.0325em; border-radius: 50%; background: #FFE6AE; box-shadow: 0 0 .16em .04em rgba(255, 214, 140, .75); opacity: 0; animation: wm-mote-a 9s linear 0s infinite backwards; }
@keyframes wm-mote-a { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 7% { opacity: .95; transform: translate(.02em, -.12em) scale(1); } 50%, 100% { opacity: 0; transform: translate(.22em, -1.35em) scale(.55); } }
@keyframes wm-mote-b { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 7% { opacity: .9; transform: translate(-.02em, -.12em) scale(1); } 54%, 100% { opacity: 0; transform: translate(-.2em, -1.5em) scale(.5); } }
@keyframes wm-mote-c { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 9% { opacity: .85; transform: translate(0, -.14em) scale(.9); } 46%, 100% { opacity: 0; transform: translate(.06em, -1.2em) scale(.6); } }

/* the star: a four-pointed glint */
.wm-star { position: absolute; right: auto; bottom: auto; width: .44em; height: .44em; margin: -.22em; opacity: 0; }
.wm-star::before, .wm-star::after { content: ''; position: absolute; inset: 0; }
.wm-star::before { background: radial-gradient(circle, #FFFFFF 0, #FFF6DC 26%, rgba(255, 232, 180, 0) 62%); clip-path: polygon(50% 0, 55.5% 44.5%, 100% 50%, 55.5% 55.5%, 50% 100%, 44.5% 55.5%, 0 50%, 44.5% 44.5%); }
.wm-star::after { inset: 40%; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 .06em .04em rgba(255, 244, 214, .95), 0 0 .26em .06em rgba(255, 210, 130, .55); }

/* generated by scripts/wordmark.mjs from the letters: the pictures and the metrics (do not edit by hand) */
.wm { width: 8.9135em; --wm-ease: cubic-bezier(0.42, 0.04, 0.22, 1); }
.wm-dim, .wm-lit i { left: -0.5em; right: -0.5em; top: -0.5em; bottom: -0.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-896 -2723 19827 4000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='g-E' d='M412-739H747Q811-739 838-765Q864-791 873-864Q877-882 886-891Q894-900 908-902Q937-905 946-869L1025-574Q1030-555 1025-543Q1020-532 1005-527Q990-523 977-528Q965-533 956-547Q928-596 904-622Q880-647 851-657Q823-666 779-666H412ZM104-1367Q104-1383 115-1391Q126-1400 148-1400H919Q950-1400 970-1410Q991-1420 1008-1430Q1025-1440 1045-1440Q1067-1440 1078-1428Q1089-1416 1097-1387L1176-1098Q1182-1079 1176-1067Q1170-1055 1154-1050Q1136-1045 1121-1051Q1106-1058 1097-1077Q1058-1157 1026-1206Q993-1255 961-1281Q929-1308 892-1317Q855-1326 807-1326H498V-156Q498-115 523-94Q548-74 599-74H833Q897-74 944-96Q991-119 1036-186Q1082-252 1139-383Q1147-400 1159-407Q1171-413 1186-411Q1204-408 1212-395Q1220-382 1214-361L1129-18Q1121 10 1109 23Q1097 36 1074 36Q1055 36 1038 27Q1021 18 999 9Q978 0 947 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Z'/%3E%3Cpath id='g-L' d='M613-1331 544-1318Q522-1313 509-1301Q497-1288 497-1269V-139Q497-104 518-89Q539-74 584-74H792Q848-74 888-89Q928-105 961-144Q993-183 1025-256L1087-399Q1096-417 1108-424Q1120-431 1137-427Q1155-423 1162-411Q1169-399 1163-377L1076-17Q1068 11 1056 24Q1044 36 1022 36Q1004 36 987 27Q970 18 949 9Q927 0 894 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-99Q253-112 253-131V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H603Q626-1400 637-1391Q647-1383 647-1367Q647-1340 613-1331Z'/%3E%3Cpath id='g-S' d='M644 30Q556 30 494 7Q431-15 393-37Q355-59 339-59Q324-59 313-46Q302-32 293-14Q283 4 272 17Q261 31 245 31Q229 31 219 21Q209 12 205-10L131-342Q128-359 134-371Q141-383 157-389Q174-395 187-388Q201-381 210-362Q267-245 335-176Q403-106 478-76Q553-45 630-45Q741-45 804-105Q867-165 868-265Q868-327 840-380Q812-433 735-481Q659-530 513-580Q363-632 272-696Q181-760 141-843Q100-926 100-1032Q100-1150 156-1239Q211-1327 311-1376Q411-1425 542-1425Q635-1425 694-1405Q754-1384 790-1363Q826-1342 847-1342Q868-1342 878-1363Q889-1384 901-1406Q912-1427 935-1427Q951-1427 961-1417Q972-1407 980-1380L1077-1040Q1083-1021 1076-1006Q1070-991 1054-985Q1036-979 1023-986Q1010-993 1000-1011Q937-1138 867-1213Q796-1287 719-1319Q643-1351 562-1351Q450-1351 382-1285Q314-1220 314-1112Q314-1048 342-993Q371-938 445-887Q520-836 658-785Q815-728 906-664Q997-600 1036-522Q1075-444 1074-346Q1074-242 1024-157Q973-72 878-21Q782 30 644 30Z'/%3E%3Cpath id='g-W' d='M998-1129 1075-1103 775-150Q769-132 765-116Q762-100 762-78V-39Q762-20 752-10Q742 0 725 0H538Q520 0 510-10Q499-20 499-39V-78Q499-95 496-107Q494-119 486-143L147-1268Q140-1293 129-1304Q118-1315 99-1321L50-1334Q33-1340 26-1349Q20-1357 20-1369Q20-1383 30-1392Q41-1400 64-1400H491Q514-1400 525-1391Q536-1383 536-1368Q536-1343 505-1336L427-1324Q403-1319 399-1303Q395-1287 405-1253L738-133L663-73ZM1624-1367Q1624-1383 1635-1391Q1647-1400 1669-1400H1974Q1997-1400 2008-1391Q2018-1382 2018-1368Q2018-1356 2011-1349Q2004-1342 1984-1334L1944-1321Q1914-1309 1894-1283Q1873-1258 1858-1206L1553-150Q1547-127 1543-112Q1540-97 1540-78V-39Q1540-20 1530-10Q1520 0 1503 0H1308Q1291 0 1280-10Q1270-20 1270-39V-78Q1270-93 1269-107Q1268-121 1260-146L935-1268Q926-1298 917-1308Q908-1318 892-1323L844-1336Q826-1342 819-1349Q812-1356 812-1367Q812-1383 824-1391Q835-1400 857-1400H1275Q1298-1400 1309-1391Q1319-1383 1319-1367Q1319-1355 1311-1347Q1303-1339 1286-1334L1211-1323Q1189-1318 1184-1304Q1179-1290 1190-1253L1511-133L1446-81L1774-1213Q1787-1260 1776-1286Q1765-1312 1716-1324L1655-1336Q1638-1340 1631-1348Q1624-1356 1624-1367Z'/%3E%3Cpath id='g-H' d='M361-701H1222V-625H361ZM498-131Q498-112 510-99Q522-87 545-82L614-69Q648-60 648-33Q648-18 637-9Q627 0 604 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Q104-1383 115-1391Q126-1400 148-1400H604Q627-1400 637-1391Q648-1383 648-1367Q648-1340 614-1331L545-1318Q522-1313 510-1301Q498-1288 498-1269ZM1379-131Q1379-112 1391-99Q1404-87 1426-82L1495-69Q1529-60 1529-33Q1529-18 1519-9Q1508 0 1485 0H1029Q1007 0 996-9Q986-18 986-33Q986-60 1019-69L1088-82Q1111-87 1123-99Q1135-112 1135-131V-1269Q1135-1288 1123-1301Q1111-1313 1088-1318L1019-1331Q986-1340 986-1367Q986-1383 996-1391Q1007-1400 1029-1400H1485Q1508-1400 1519-1391Q1529-1383 1529-1367Q1529-1340 1495-1331L1426-1318Q1404-1313 1391-1301Q1379-1288 1379-1269Z'/%3E%3Cpath id='g-R' d='M1278-922Q1278-824 1235-745Q1192-665 1113-613Q1034-561 926-541Q894-535 865-529Q835-523 806-519Q776-515 741-515Q677-515 619-524Q560-533 511-550Q463-567 427-591L435-658Q465-636 507-621Q549-606 598-598Q647-591 699-591Q852-591 939-675Q1026-759 1026-919Q1026-1039 974-1132Q922-1225 827-1278Q732-1331 604-1331H497V-133Q497-112 508-100Q519-87 541-82L627-69Q646-63 653-55Q660-46 660-33Q660 0 616 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-100Q253-112 253-133V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H611Q825-1400 974-1339Q1123-1278 1200-1170Q1278-1062 1278-922ZM750-547 989-576 1265-140Q1285-110 1307-94Q1330-79 1366-70Q1395-63 1405-55Q1414-46 1414-33Q1414-18 1403-9Q1392 0 1369 0H968Q925 0 925-33Q925-43 931-49Q938-56 951-61L990-68Q1012-76 1016-90Q1019-105 1003-130Z'/%3E%3Cg id='g-w'%3E%3Cuse href='%23g-E'/%3E%3Cuse href='%23g-L' x='1954'/%3E%3Cuse href='%23g-S' x='3845'/%3E%3Cuse href='%23g-E' x='5700'/%3E%3Cuse href='%23g-W' x='7645'/%3E%3Cuse href='%23g-H' x='10352'/%3E%3Cuse href='%23g-E' x='12665'/%3E%3Cuse href='%23g-R' x='14619'/%3E%3Cuse href='%23g-E' x='16715'/%3E%3C/g%3E%3ClinearGradient id='g-g' gradientUnits='userSpaceOnUse' x1='0' y1='-1440' x2='0' y2='40'%3E%3Cstop offset='0' stop-color='%23FFFBEA'/%3E%3Cstop offset='0.14' stop-color='%23FAE8B0'/%3E%3Cstop offset='0.34' stop-color='%23EFCB6C'/%3E%3Cstop offset='0.5' stop-color='%23DDAE4C'/%3E%3Cstop offset='0.6' stop-color='%23B98432'/%3E%3Cstop offset='0.68' stop-color='%239A6A2C'/%3E%3Cstop offset='0.78' stop-color='%23C08B3A'/%3E%3Cstop offset='0.9' stop-color='%23EAC775'/%3E%3Cstop offset='1' stop-color='%23F6DDA0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g-s' gradientUnits='userSpaceOnUse' x1='104' y1='-1400' x2='17931' y2='0'%3E%3Cstop offset='0' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%23FFF8E0' stop-opacity='0.2'/%3E%3Cstop offset='.36' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%233B2408' stop-opacity='0'/%3E%3Cstop offset='.72' stop-color='%233B2408' stop-opacity='0.14'/%3E%3Cstop offset='.86' stop-color='%23FFF8E0' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='g-r' maskUnits='userSpaceOnUse' x='-96' y='-1723' width='18227' height='2000'%3E%3Cuse href='%23g-w' fill='%23fff'/%3E%3Cuse href='%23g-w' fill='%23000' transform='translate(-14 34)'/%3E%3C/mask%3E%3Cmask id='g-d' maskUnits='userSpaceOnUse' x='-96' y='-1723' width='18227' height='2000'%3E%3Cuse href='%23g-w' fill='%23fff'/%3E%3Cuse href='%23g-w' fill='%23000' transform='translate(10 -30)'/%3E%3C/mask%3E%3Cfilter id='g-h' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='480'/%3E%3C/filter%3E%3Cfilter id='g-b' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='120'/%3E%3C/filter%3E%3Cfilter id='g-k' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3C/defs%3E%3Cuse href='%23g-w' fill='%23E9C46A' opacity='0.2' filter='url(%23g-h)'/%3E%3Cuse href='%23g-w' fill='%23FFD58A' opacity='0.3' filter='url(%23g-b)'/%3E%3Cuse href='%23g-w' fill='%2305040A' opacity='0.75' transform='translate(0 46)' filter='url(%23g-k)'/%3E%3Cuse href='%23g-w' fill='none' stroke='%2324170A' stroke-width='56' stroke-linejoin='round'/%3E%3Cuse href='%23g-w' fill='url(%23g-g)'/%3E%3Cuse href='%23g-w' fill='url(%23g-s)'/%3E%3Cuse href='%23g-w' fill='%23FFF7DC' opacity='0.85' mask='url(%23g-r)'/%3E%3Cuse href='%23g-w' fill='%235A3A10' opacity='0.55' mask='url(%23g-d)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.wm-sheen { --wm-letters: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1723 17827 2000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='E' d='M412-739H747Q811-739 838-765Q864-791 873-864Q877-882 886-891Q894-900 908-902Q937-905 946-869L1025-574Q1030-555 1025-543Q1020-532 1005-527Q990-523 977-528Q965-533 956-547Q928-596 904-622Q880-647 851-657Q823-666 779-666H412ZM104-1367Q104-1383 115-1391Q126-1400 148-1400H919Q950-1400 970-1410Q991-1420 1008-1430Q1025-1440 1045-1440Q1067-1440 1078-1428Q1089-1416 1097-1387L1176-1098Q1182-1079 1176-1067Q1170-1055 1154-1050Q1136-1045 1121-1051Q1106-1058 1097-1077Q1058-1157 1026-1206Q993-1255 961-1281Q929-1308 892-1317Q855-1326 807-1326H498V-156Q498-115 523-94Q548-74 599-74H833Q897-74 944-96Q991-119 1036-186Q1082-252 1139-383Q1147-400 1159-407Q1171-413 1186-411Q1204-408 1212-395Q1220-382 1214-361L1129-18Q1121 10 1109 23Q1097 36 1074 36Q1055 36 1038 27Q1021 18 999 9Q978 0 947 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Z'/%3E%3Cpath id='L' d='M613-1331 544-1318Q522-1313 509-1301Q497-1288 497-1269V-139Q497-104 518-89Q539-74 584-74H792Q848-74 888-89Q928-105 961-144Q993-183 1025-256L1087-399Q1096-417 1108-424Q1120-431 1137-427Q1155-423 1162-411Q1169-399 1163-377L1076-17Q1068 11 1056 24Q1044 36 1022 36Q1004 36 987 27Q970 18 949 9Q927 0 894 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-99Q253-112 253-131V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H603Q626-1400 637-1391Q647-1383 647-1367Q647-1340 613-1331Z'/%3E%3Cpath id='S' d='M644 30Q556 30 494 7Q431-15 393-37Q355-59 339-59Q324-59 313-46Q302-32 293-14Q283 4 272 17Q261 31 245 31Q229 31 219 21Q209 12 205-10L131-342Q128-359 134-371Q141-383 157-389Q174-395 187-388Q201-381 210-362Q267-245 335-176Q403-106 478-76Q553-45 630-45Q741-45 804-105Q867-165 868-265Q868-327 840-380Q812-433 735-481Q659-530 513-580Q363-632 272-696Q181-760 141-843Q100-926 100-1032Q100-1150 156-1239Q211-1327 311-1376Q411-1425 542-1425Q635-1425 694-1405Q754-1384 790-1363Q826-1342 847-1342Q868-1342 878-1363Q889-1384 901-1406Q912-1427 935-1427Q951-1427 961-1417Q972-1407 980-1380L1077-1040Q1083-1021 1076-1006Q1070-991 1054-985Q1036-979 1023-986Q1010-993 1000-1011Q937-1138 867-1213Q796-1287 719-1319Q643-1351 562-1351Q450-1351 382-1285Q314-1220 314-1112Q314-1048 342-993Q371-938 445-887Q520-836 658-785Q815-728 906-664Q997-600 1036-522Q1075-444 1074-346Q1074-242 1024-157Q973-72 878-21Q782 30 644 30Z'/%3E%3Cpath id='W' d='M998-1129 1075-1103 775-150Q769-132 765-116Q762-100 762-78V-39Q762-20 752-10Q742 0 725 0H538Q520 0 510-10Q499-20 499-39V-78Q499-95 496-107Q494-119 486-143L147-1268Q140-1293 129-1304Q118-1315 99-1321L50-1334Q33-1340 26-1349Q20-1357 20-1369Q20-1383 30-1392Q41-1400 64-1400H491Q514-1400 525-1391Q536-1383 536-1368Q536-1343 505-1336L427-1324Q403-1319 399-1303Q395-1287 405-1253L738-133L663-73ZM1624-1367Q1624-1383 1635-1391Q1647-1400 1669-1400H1974Q1997-1400 2008-1391Q2018-1382 2018-1368Q2018-1356 2011-1349Q2004-1342 1984-1334L1944-1321Q1914-1309 1894-1283Q1873-1258 1858-1206L1553-150Q1547-127 1543-112Q1540-97 1540-78V-39Q1540-20 1530-10Q1520 0 1503 0H1308Q1291 0 1280-10Q1270-20 1270-39V-78Q1270-93 1269-107Q1268-121 1260-146L935-1268Q926-1298 917-1308Q908-1318 892-1323L844-1336Q826-1342 819-1349Q812-1356 812-1367Q812-1383 824-1391Q835-1400 857-1400H1275Q1298-1400 1309-1391Q1319-1383 1319-1367Q1319-1355 1311-1347Q1303-1339 1286-1334L1211-1323Q1189-1318 1184-1304Q1179-1290 1190-1253L1511-133L1446-81L1774-1213Q1787-1260 1776-1286Q1765-1312 1716-1324L1655-1336Q1638-1340 1631-1348Q1624-1356 1624-1367Z'/%3E%3Cpath id='H' d='M361-701H1222V-625H361ZM498-131Q498-112 510-99Q522-87 545-82L614-69Q648-60 648-33Q648-18 637-9Q627 0 604 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Q104-1383 115-1391Q126-1400 148-1400H604Q627-1400 637-1391Q648-1383 648-1367Q648-1340 614-1331L545-1318Q522-1313 510-1301Q498-1288 498-1269ZM1379-131Q1379-112 1391-99Q1404-87 1426-82L1495-69Q1529-60 1529-33Q1529-18 1519-9Q1508 0 1485 0H1029Q1007 0 996-9Q986-18 986-33Q986-60 1019-69L1088-82Q1111-87 1123-99Q1135-112 1135-131V-1269Q1135-1288 1123-1301Q1111-1313 1088-1318L1019-1331Q986-1340 986-1367Q986-1383 996-1391Q1007-1400 1029-1400H1485Q1508-1400 1519-1391Q1529-1383 1529-1367Q1529-1340 1495-1331L1426-1318Q1404-1313 1391-1301Q1379-1288 1379-1269Z'/%3E%3Cpath id='R' d='M1278-922Q1278-824 1235-745Q1192-665 1113-613Q1034-561 926-541Q894-535 865-529Q835-523 806-519Q776-515 741-515Q677-515 619-524Q560-533 511-550Q463-567 427-591L435-658Q465-636 507-621Q549-606 598-598Q647-591 699-591Q852-591 939-675Q1026-759 1026-919Q1026-1039 974-1132Q922-1225 827-1278Q732-1331 604-1331H497V-133Q497-112 508-100Q519-87 541-82L627-69Q646-63 653-55Q660-46 660-33Q660 0 616 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-100Q253-112 253-133V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H611Q825-1400 974-1339Q1123-1278 1200-1170Q1278-1062 1278-922ZM750-547 989-576 1265-140Q1285-110 1307-94Q1330-79 1366-70Q1395-63 1405-55Q1414-46 1414-33Q1414-18 1403-9Q1392 0 1369 0H968Q925 0 925-33Q925-43 931-49Q938-56 951-61L990-68Q1012-76 1016-90Q1019-105 1003-130Z'/%3E%3C/defs%3E%3Cuse href='%23E'/%3E%3Cuse href='%23L' x='1954'/%3E%3Cuse href='%23S' x='3845'/%3E%3Cuse href='%23E' x='5700'/%3E%3Cuse href='%23W' x='7645'/%3E%3Cuse href='%23H' x='10352'/%3E%3Cuse href='%23E' x='12665'/%3E%3Cuse href='%23R' x='14619'/%3E%3Cuse href='%23E' x='16715'/%3E%3C/svg%3E"); -webkit-mask: var(--wm-letters) 0 0 / 100% 100% no-repeat; mask: var(--wm-letters) 0 0 / 100% 100% no-repeat; }
.wm-sheen i { left: -24%; width: 24%; animation: wm-sheen 11s cubic-bezier(0.4, 0, 0.25, 1) calc(var(--wm-delay) + var(--wm-dur) + 1.6s) infinite; }
@keyframes wm-sheen { 0% { transform: translateX(0); } 17%, 100% { transform: translateX(516.67%); } }
.wm-motes i:nth-child(1) { left: 31.0%; top: 30.0%; animation-name: wm-mote-b; animation-duration: 9.4s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.313); }
.wm-motes i:nth-child(2) { left: 79.0%; top: 36.0%; animation-name: wm-mote-a; animation-duration: 10.4s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.505); }
.wm-motes i:nth-child(3) { left: 6.0%; top: 42.0%; animation-name: wm-mote-a; animation-duration: 7.6s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.226); }
.wm-motes i:nth-child(4) { left: 55.0%; top: 52.0%; animation-name: wm-mote-c; animation-duration: 8.2s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.392); }
.wm-motes i:nth-child(5) { left: 96.0%; top: 48.0%; animation-name: wm-mote-b; animation-duration: 8.8s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.656); }
.wm-motes i:nth-child(6) { left: 18.0%; top: 60.0%; animation-name: wm-mote-c; animation-duration: 11.2s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.272); }
.wm-motes i:nth-child(7) { left: 68.0%; top: 28.0%; animation-name: wm-mote-b; animation-duration: 9.8s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.445); }
.wm-star { left: 11.84%; top: 17.15%; animation: wm-star 11s linear calc(var(--wm-delay) + var(--wm-dur) + 1.6s) infinite; }
@keyframes wm-star { 0%, 2.86% { opacity: 0; transform: scale(0) rotate(-35deg); } 4.66% { opacity: 1; transform: scale(1) rotate(0deg); } 9.06%, 100% { opacity: 0; transform: scale(.15) rotate(50deg); } }
/* /generated */

@media (prefers-reduced-motion: reduce) {
  .wm-dim, .wm-light, .wm-sheen, .wm-motes, .wm-star { display: none; }
  .wm-lit, .wm-lit > span { transform: none; animation: none; }
}
/* /wordmark */

/* the landing's own: a slow breath of light behind the word, after the light has crossed it; the star (in its markup
   only); and once the hero has scrolled away, it all rests */
.hero .wm::before {
  content: ''; position: absolute; left: -.6em; right: -.6em; top: -.7em; bottom: -.7em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .15), rgba(233, 196, 106, .05) 58%, rgba(233, 196, 106, 0));
  opacity: 0; animation: wm-breath 6.5s ease-in-out calc(var(--wm-delay) + var(--wm-dur)) infinite both;
}
@keyframes wm-breath { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.hero.is-away .wm-art *, .hero.is-away .wm-art *::before, .hero.is-away .wm-art *::after, .hero.is-away .wm::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero .wm::before { animation: none; opacity: .6; } }

/* ─────────────── how it plays ─────────────── */

.how { position: relative; isolation: isolate; padding: clamp(84px, 10vw, 150px) 0 clamp(56px, 6vw, 96px); }
.how::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 42%, rgba(15, 45, 49, .5) 0%, rgba(20, 25, 54, .22) 46%, rgba(10, 13, 24, 0) 76%); }
.beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 44px); }
/* the caption first, then the frame and its strip; subgrid keeps the three frames level when a title wraps */
.beat { display: flex; flex-direction: column; min-width: 0; }
.beat .beat-copy { order: -1; }
.beat:nth-child(1) { --d: .05s; } .beat:nth-child(2) { --d: .15s; } .beat:nth-child(3) { --d: .25s; }
@supports (grid-template-rows: subgrid) {
  .beats { grid-template-rows: auto auto; }
  .beat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
.frame { position: relative; margin: 0; }
.frame-media {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate; border-radius: 18px; background: #0E1222;
  box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 30px 70px rgba(0, 0, 0, .5);
}
.frame-media picture { position: absolute; inset: 0; }
.frame-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-media::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .16), inset 0 40px 50px -40px rgba(10, 13, 24, .75), inset 0 -40px 50px -40px rgba(10, 13, 24, .75), inset 0 0 90px rgba(10, 13, 24, .45); }
.frame-label {
  position: absolute; z-index: 7; left: 50%; top: 16px; translate: -50% 0; padding: 7px 12px; border-radius: 14px; white-space: nowrap;
  font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  background: rgba(10, 13, 24, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.strip { display: flex; align-items: center; justify-content: center; min-height: 108px; padding: 14px 2px 0; }
.beat-copy { padding: 0 4px 26px; }
.beat-no { display: flex; align-items: center; gap: 12px; font: 400 15px/1 var(--serif); letter-spacing: .12em; color: var(--gold); }
.beat-no::after { content: ''; flex: 0 0 36px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(233, 196, 106, 0)); }
.beat-title { margin-top: 14px; font: 400 clamp(23px, .6vw + 18px, 28px)/1.16 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.beat-text { margin-top: 10px; max-width: 30em; font-size: 16px; line-height: 1.58; color: var(--muted); text-wrap: pretty; }

/* Reality, as DESIGN.md keeps it: your photo stays true, a little cooler and quieter than life, with a fine grain
   (the same grade in all three frames, so the painting is the only thing that glows) */
.reality { filter: saturate(.78) brightness(.8) contrast(1.06); }
.is-reality::before, .rv-before::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain) 0 0 / 180px 180px, linear-gradient(180deg, rgba(40, 58, 110, .55) 0%, rgba(16, 22, 52, .7) 100%);
  mix-blend-mode: soft-light; opacity: .75;
}

/* I · the camera reads the room: the room traced in gold, a scan band igniting the lines as it passes (transforms only) */
.snap-trace { z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.snap-trace-base { opacity: .34; }
.snap-sweep, .snap-sweep-in, .snap-scan { position: absolute; inset: 0; pointer-events: none; }
.snap-sweep { z-index: 2; overflow: hidden; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 110px), rgba(0, 0, 0, 0)); mask-image: linear-gradient(180deg, #000 calc(100% - 110px), rgba(0, 0, 0, 0)); animation: sweep 6.5s cubic-bezier(.45, 0, .25, 1) infinite; will-change: transform, opacity; }
.snap-sweep-in { animation: sweep-in 6.5s cubic-bezier(.45, 0, .25, 1) infinite; will-change: transform; }
.snap-sweep .snap-trace { position: absolute; inset: 0; mix-blend-mode: normal; }   /* the sweep is its own group: it blends as a whole */
@keyframes sweep { 0% { transform: translate3d(0, -100%, 0); opacity: 1; } 76% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
@keyframes sweep-in { 0% { transform: translate3d(0, 100%, 0); } 76%, 100% { transform: translate3d(0, 0, 0); } }
.snap-scan { z-index: 3; animation: scan 6.5s cubic-bezier(.45, 0, .25, 1) infinite; will-change: transform, opacity; }
.snap-scan span { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255, 227, 163, 0) 0%, rgba(255, 239, 196, .95) 50%, rgba(255, 227, 163, 0) 100%); box-shadow: 0 0 18px 4px rgba(233, 196, 106, .42); }
@keyframes scan { 0% { transform: translate3d(0, -100%, 0); opacity: 0; } 6% { opacity: 1; } 70% { opacity: 1; } 76% { transform: translate3d(0, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
.snap-flash { position: absolute; inset: 0; z-index: 5; background: #FFFCF2; opacity: 0; pointer-events: none; }
.corner { position: absolute; z-index: 4; width: 26px; height: 26px; border: 0 solid var(--gold); opacity: .9; filter: drop-shadow(0 0 6px rgba(233, 196, 106, .7)); }
.corner.tl { left: 16px; top: 52px; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; }
.corner.tr { right: 16px; top: 52px; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; }
.corner.bl { left: 16px; bottom: 16px; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; }
.corner.br { right: 16px; bottom: 16px; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; }
.strip-snap { justify-content: space-between; padding-left: 18px; padding-right: 18px; }
.snap-thumb { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(233, 196, 106, .55); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .24), rgba(15, 45, 49, .5) 70%); position: relative; }
.snap-thumb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 18px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(180deg, #FFF1C9, #E9C46A 50%, #A97A35); box-shadow: 0 0 8px rgba(255, 214, 140, .8); }
/* the shutter is real: a flash, and the camera reads the room again */
.shutter { display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(5, 7, 14, .35); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(233, 196, 106, .45); transition: box-shadow .3s; }
.shutter span { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #FFFDF6 0%, #F3EBDD 60%, #D9CDB6 100%); transition: transform .35s var(--spring); }
.shutter:hover { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 36px rgba(233, 196, 106, .7); }
.shutter:active span { transform: scale(.86); transition-duration: .08s; }
.shutter:focus-visible { outline: 2px solid var(--aether); outline-offset: 5px; border-radius: 50%; }
.snap-film { display: flex; flex-direction: column; align-items: center; width: 44px; font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 235, 221, .72); }
.snap-film b { font: 400 22px/1 var(--serif); letter-spacing: 0; color: var(--parchment); margin-bottom: 2px; }

/* II · find the six */
.find-photo { cursor: pointer; -webkit-user-select: none; user-select: none; }
.hit {
  position: absolute; z-index: 3; left: var(--x); top: var(--y); width: max(46px, calc(var(--r) * 2.7%)); aspect-ratio: 1; translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: inherit;
}
.hit:focus-visible { outline: 2px solid var(--aether); outline-offset: 0; }
.hit:nth-of-type(1) { --x: 42%; --y: 30%; --r: 4.1; --k: 0; }
.hit:nth-of-type(2) { --x: 77%; --y: 32%; --r: 4.8; --k: 3; }
.hit:nth-of-type(3) { --x: 24%; --y: 37%; --r: 5.5; --k: 1; }
.hit:nth-of-type(4) { --x: 79%; --y: 57%; --r: 4.8; --k: 4; }
.hit:nth-of-type(5) { --x: 27%; --y: 77%; --r: 4.8; --k: 2; }
.hit:nth-of-type(6) { --x: 68%; --y: 87%; --r: 5.5; --k: 5; }
.hit-ring, .hit-burst { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
.hit-ring { inset: 4px; border: 2px solid #F0CF85; box-shadow: 0 0 0 1px rgba(10, 13, 24, .35), 0 0 18px 4px rgba(233, 196, 106, .6), inset 0 0 14px rgba(233, 196, 106, .4); transform: scale(.2); }
.hit-burst { inset: -14px; border: 1.5px solid rgba(166, 244, 230, .95); }
.hit.is-found { pointer-events: none; }
.hit.is-found .hit-ring { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.2, 1.6, .4, 1), opacity .25s; }
.hit.is-found .hit-burst { animation: burst .9s ease-out both; }
@keyframes burst { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* the things still hiding breathe a faint aether light now and then, as the game's leaks do */
.frame-find.is-hunting .hit:not(.is-found)::before {
  content: ''; position: absolute; inset: -34%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(166, 244, 230, .55), rgba(166, 244, 230, .14) 55%, rgba(166, 244, 230, 0));
  mix-blend-mode: screen; animation: aether 6.4s ease-in-out calc(var(--k) * 1.07s + 1s) infinite;
}
@keyframes aether { 0%, 60%, 100% { opacity: 0; transform: scale(.7); } 76% { opacity: .9; transform: scale(1); } }
.miss { position: absolute; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 1.5px solid rgba(243, 235, 221, .7); pointer-events: none; animation: miss .7s ease-out forwards; }
@keyframes miss { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.find-combo { top: auto; bottom: 16px; padding: 9px 14px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; font: italic 300 15px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--parchment); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s var(--spring); }
.find-combo.is-on { opacity: 1; transform: none; }
.find-combo b { font-weight: 400; color: var(--gold-hi); }
/* a find: the thing lifts out of the photo in aether and flies to its silhouette in the tray (x and y on separate easings, for an arc) */
.fly { position: absolute; z-index: 9; left: 0; top: 0; pointer-events: none; will-change: transform; }
.fly-y { display: block; width: 100%; height: 100%; will-change: transform; }
.fly img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 7px rgba(166, 244, 230, .95)) drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); will-change: transform, opacity; }
/* all six found: the moment to send them somewhere */
.find-next {
  position: absolute; z-index: 8; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 18px; cursor: default;
  background: rgba(10, 13, 24, .8); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .4), 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(233, 196, 106, .14);
  animation: arrive .9s var(--spring) both;
}
.find-next[hidden] { display: none; }
.find-next-line { display: flex; align-items: center; gap: 12px; min-width: 0; font: italic 300 17px/1.25 var(--serif); color: var(--parchment); text-wrap: balance; }
.find-next-line .glyph::before { width: 700%; }
.find-next .btn { flex: none; }
.find-next .btn[hidden] { display: none; }   /* joined: the line stands alone (.btn's display would beat [hidden]) */
.find-next.is-quiet { justify-content: center; padding: 14px 16px; }

.tray { display: block; }
.tray-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; margin-bottom: 10px; }
.tray-title { min-width: 0; font: italic 300 16px/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.tray-count { flex: none; font-size: 14px; font-weight: 650; color: var(--gold); font-variant-numeric: tabular-nums; }
.tray-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(5px, .6vw, 8px); }
.slot:nth-child(1) { --i: 0; } .slot:nth-child(2) { --i: 1; } .slot:nth-child(3) { --i: 2; } .slot:nth-child(4) { --i: 3; } .slot:nth-child(5) { --i: 4; } .slot:nth-child(6) { --i: 5; }
.slot { position: relative; display: grid; place-items: center; height: clamp(46px, 3.9vw, 56px); border-radius: 13px; background: rgba(243, 235, 221, .04); border: 1px solid rgba(243, 235, 221, .12); transition: background .4s, border-color .4s, box-shadow .4s; }
.slot picture { position: static; }
.slot img { width: min(46px, 86%); height: auto; filter: brightness(0) invert(.94); opacity: .28; transition: opacity .3s; }
.slot.is-found { background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .24), rgba(233, 196, 106, .04) 70%); border-color: rgba(233, 196, 106, .85); box-shadow: 0 0 16px rgba(233, 196, 106, .32); }
.slot.is-found img { filter: none; opacity: 1; animation: pop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.slot.is-landed img { animation: none; }
.slot.is-found::after { content: ''; position: absolute; inset: -1px; border-radius: 13px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 241, 201, .9), 0 0 22px 6px rgba(233, 196, 106, .55); animation: flash .7s var(--ease-out) both; }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes flash { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.frame-find.is-complete .slot { animation: slot-glow 1.1s var(--ease-out) calc(var(--i) * 85ms + .15s) backwards; }
@keyframes slot-glow { 0% { box-shadow: 0 0 16px rgba(233, 196, 106, .32); transform: none; } 38% { box-shadow: 0 0 0 1px rgba(255, 241, 201, .9), 0 0 28px 8px rgba(233, 196, 106, .62); transform: translateY(-3px); } 100% { box-shadow: 0 0 16px rgba(233, 196, 106, .32); transform: none; } }

/* III · the tear into its Elsewhere: the hero's light along a torn edge (a paper lip, a bright core, a halo, motes) */
.reveal { --split: 35; container-type: inline-size; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.reveal img { pointer-events: none; }
.rv-before { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); }
.rv-glow {
  position: absolute; z-index: 2; top: -4%; bottom: -4%; left: 0; width: 84px; margin-left: -42px; pointer-events: none;
  translate: calc(var(--hx, 35) * 1cqw) 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 222, 160, .5) 0%, rgba(233, 196, 106, .16) 52%, rgba(233, 196, 106, 0) 100%);
  mix-blend-mode: screen; opacity: .75; transition: opacity .5s var(--ease-out);
}
.reveal.is-dragging .rv-glow, .reveal.is-sweeping .rv-glow { opacity: 1; }
.rv-seam { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 2px #FFF1C9) drop-shadow(0 0 8px rgba(255, 214, 140, .95)) drop-shadow(0 0 22px rgba(233, 196, 106, .6)); }
.rv-lip { fill: none; stroke: rgba(246, 239, 226, .92); stroke-width: 3.2; stroke-linejoin: round; }
.rv-core { fill: none; stroke: #FFF3D2; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.rv-motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rv-motes i { position: absolute; left: 0; top: var(--y); width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #FFE3A3; box-shadow: 0 0 8px 2px rgba(255, 214, 140, .72); opacity: 0; translate: calc(var(--hx, 35) * 1cqw) 0; }
.rv-motes i:nth-child(1) { --y: 30%; --dx: 16px; --d: 0s; }
.rv-motes i:nth-child(2) { --y: 56%; --dx: -12px; --d: .55s; }
.rv-motes i:nth-child(3) { --y: 77%; --dx: 20px; --d: 1.1s; }
.reveal.is-dragging .rv-motes i, .reveal.is-sweeping .rv-motes i { animation: rv-mote 1.6s ease-out var(--d) infinite; }
@keyframes rv-mote { 0% { transform: translate(0, 0); opacity: 0; } 14% { opacity: 1; } 100% { transform: translate(var(--dx), -84px); opacity: 0; } }
.reveal .chip {
  position: absolute; z-index: 4; top: 16px; padding: 7px 12px; border-radius: 14px; pointer-events: none;
  font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(10, 13, 24, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .3s;
}
.chip-l { left: 14px; }
.chip-r { right: 14px; color: var(--gold); }
.rv-handle {
  position: absolute; z-index: 5; left: 0; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  translate: calc(var(--hx, 35) * 1cqw) 0;
  display: grid; place-items: center; color: var(--gold-hi); cursor: grab; touch-action: none;
  background: rgba(10, 13, 24, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 24px rgba(233, 196, 106, .6);
  transition: transform .3s var(--spring), box-shadow .3s;
}
@supports not (width: 1cqw) {
  .rv-handle { left: calc(var(--hx, 35) * 1%); translate: none; }
  .rv-glow { left: calc(var(--hx, 35) * 1%); translate: none; }
  .rv-motes i { left: calc(var(--hx, 35) * 1%); translate: none; }
}
.rv-handle:hover, .reveal.is-dragging .rv-handle { transform: scale(1.08); box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 30px rgba(233, 196, 106, .8); }
.reveal.is-dragging { cursor: grabbing; }
.reveal.is-dragging .rv-handle { cursor: grabbing; }
.rv-handle:focus-visible { outline: 2px solid var(--aether); outline-offset: 4px; border-radius: 50%; }
.strip-reveal { color: rgba(243, 235, 221, .7); }
.drag-hint { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.drag-hint svg { color: var(--gold); }

/* how it plays: tablets read across, phones read down */
@media (max-width: 1099px) {
  .beats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: clamp(64px, 9vw, 96px); max-width: 920px; margin: 0 auto; }
  .beat, .beat:nth-child(n) { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
  .beat .beat-copy { order: 2; padding: 0; }
  .beat:nth-child(2) .beat-copy { order: -1; }
  .strip { min-height: 0; }
}
@media (max-width: 719px) {
  .beats { gap: 72px; }
  .beat, .beat:nth-child(n) { display: flex; flex-direction: column; gap: 0; }
  .beat .beat-copy, .beat:nth-child(2) .beat-copy { order: -1; padding: 0 2px 22px; }
  .frame { width: 100%; max-width: 440px; margin: 0 auto; }
  .beat-copy { width: 100%; max-width: 440px; margin: 0 auto; }
  .strip { padding-top: 14px; }
  .find-next-line { font-size: 16px; }
}

/* ─────────────── realms ─────────────── */

.realms { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 6vw, 96px); }
.realms::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 50% 62%, rgba(20, 25, 54, .7) 0%, rgba(15, 45, 49, .25) 44%, rgba(10, 13, 24, 0) 78%); }
.realm-list {
  --realm-h: clamp(460px, 34vw + 120px, 640px);
  --realm-open: min(calc(var(--realm-h) * 2 / 3), 46vw);   /* the open realm is shown whole, at 2:3 */
  list-style: none; display: flex; gap: 10px; height: var(--realm-h);
  width: 100%; max-width: calc(var(--wrap) + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l);
}
.realm {
  --accent: var(--gold);
  position: relative; flex: 1 1 0px; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 16px; cursor: pointer; outline: none;
  container-type: inline-size;
  background: #0E1222; box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 18px 44px rgba(0, 0, 0, .45);
  transition: flex .95s var(--spring), box-shadow .6s var(--ease-out);
}
.realm.is-active {
  flex: 0 0 var(--realm-open); box-shadow: 0 0 0 1px rgba(233, 196, 106, .55), 0 26px 60px rgba(0, 0, 0, .5), 0 0 44px rgba(233, 196, 106, .14);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 62%, transparent), 0 26px 60px rgba(0, 0, 0, .5), 0 0 48px color-mix(in srgb, var(--accent) 20%, transparent);
}
.realm:nth-child(1) { --accent: #A6F4E6; }
.realm:nth-child(2) { --accent: #7FE6E0; }
.realm:nth-child(3) { --accent: #FFD199; }
.realm:nth-child(4) { --accent: #CFEFFF; }
.realm:nth-child(5) { --accent: #FFB08A; }
.realm:nth-child(6) { --accent: #CDB0FF; }
.realm:nth-child(7) { --accent: #FFF0B8; }
.realm:focus-visible { box-shadow: 0 0 0 2px var(--aether), 0 26px 60px rgba(0, 0, 0, .5); }
.realm picture { position: absolute; inset: 0; z-index: -2; }
.realm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.8) brightness(.66); transform: scale(1.06); transition: filter .8s var(--ease-out), transform 1.4s var(--ease-out); }
.realm.is-active img { filter: none; transform: none; }
.realm::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 13, 24, .94) 0%, rgba(10, 13, 24, .62) 22%, rgba(10, 13, 24, 0) 46%); }
/* while the list tours on its own, a thread of the realm's light measures the stay on each */
.realm::before { content: ''; position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 13px; height: 1.5px; border-radius: 2px; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent)); box-shadow: 0 0 8px var(--accent); }
.realm-list.is-touring .realm.is-active::before { opacity: .9; animation: tour var(--tour, 3.6s) linear both; }
@keyframes tour { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.realm-spine {
  position: absolute; left: 50%; bottom: 24px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap;
  font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(243, 235, 221, .9);
  transition: opacity .35s var(--ease-out);
}
.realm.is-active .realm-spine { opacity: 0; }
.realm-info { position: absolute; left: 0; bottom: 0; width: var(--realm-open); padding: 0 24px 26px; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; }
.realm.is-active .realm-info { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) .28s, transform 1s var(--spring) .22s; }
.realm-ch { display: flex; align-items: center; gap: 8px; font: 600 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.realm-name { margin-top: 10px; font: 400 clamp(26px, .8vw + 18px, 32px)/1.08 var(--serif); }
.realm-tag { margin-top: 8px; max-width: 18em; font: italic 300 16px/1.4 var(--serif); color: rgba(243, 235, 221, .86); }
.realm-badge {
  position: absolute; top: 14px; left: 50%; translate: -50% 0; z-index: 2; padding: 6px 10px; border-radius: 12px; white-space: nowrap;
  font: 650 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #E4D3FF;
  background: rgba(14, 10, 24, .66); box-shadow: 0 0 0 1px rgba(205, 176, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.realm.is-active .realm-badge { left: 16px; translate: 0 0; }
@container (max-width: 118px) { .realm-badge { display: none; } }

/* the seventh: locked, a night sky that has fallen inside, its stars drawn along the same room's edges */
.mythic-sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #FFF4D6, transparent),
    radial-gradient(1px 1px at 72% 14%, rgba(255, 244, 214, .9), transparent),
    radial-gradient(1px 1px at 38% 64%, rgba(255, 244, 214, .7), transparent),
    radial-gradient(1.5px 1.5px at 84% 46%, rgba(255, 244, 214, .85), transparent),
    radial-gradient(1px 1px at 9% 78%, rgba(255, 244, 214, .6), transparent),
    radial-gradient(1px 1px at 58% 88%, rgba(255, 244, 214, .7), transparent),
    radial-gradient(1px 1px at 47% 31%, rgba(255, 244, 214, .5), transparent),
    radial-gradient(1px 1px at 91% 81%, rgba(255, 244, 214, .6), transparent),
    radial-gradient(1px 1px at 27% 47%, rgba(255, 244, 214, .45), transparent),
    radial-gradient(1px 1px at 66% 58%, rgba(255, 244, 214, .5), transparent),
    radial-gradient(.8px .8px at 14% 8%, rgba(255, 244, 214, .5), transparent) 0 0 / 90px 110px,
    radial-gradient(.8px .8px at 61% 47%, rgba(255, 244, 214, .45), transparent) 0 0 / 130px 150px,
    radial-gradient(ellipse 90% 60% at 50% 34%, rgba(169, 193, 255, .2) 0%, rgba(20, 25, 54, .5) 48%, #070A16 82%);
}
.realm .mythic-trace { position: absolute; inset: 0; z-index: auto; }   /* no stacking context: the stars blend with the sky */
.realm.realm-mythic .mythic-trace img {
  object-position: 50% 40%; transform: none; mix-blend-mode: screen; opacity: .42;
  filter: grayscale(1) brightness(.9) contrast(3.2) drop-shadow(0 0 2px rgba(200, 214, 255, .9));
  -webkit-mask: radial-gradient(circle, #000 .8px, rgba(0, 0, 0, 0) 1.4px) 0 0 / 6px 6px; mask: radial-gradient(circle, #000 .8px, rgba(0, 0, 0, 0) 1.4px) 0 0 / 6px 6px;
  transition: opacity 1s var(--ease-out);
}
.realm.realm-mythic.is-active .mythic-trace img { opacity: .8; }
.mythic-star { position: absolute; left: 50%; top: 36%; width: 34px; height: 34px; translate: -50% -50%; }
.mythic-star::before { content: ''; position: absolute; inset: 0; background: #FFF4D6; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 6px #FFF0B8); }
.mythic-star::after { content: ''; position: absolute; left: 50%; top: 50%; width: 520%; height: 520%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 184, .32), rgba(169, 193, 255, .12) 50%, rgba(169, 193, 255, 0)); animation: breathe 6s ease-in-out infinite; }
.realm-mythic .realm-name { letter-spacing: .1em; }
.realm-mythic .realm-ch svg { color: var(--accent); }

/* phones: a rail of cards */
@media (max-width: 719px) {
  .realm-list {
    height: auto; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 6px var(--pad-r) 28px var(--pad-l); scroll-padding: 0 var(--pad-r) 0 var(--pad-l);
  }
  .realm-list::-webkit-scrollbar { display: none; }
  .realm, .realm.is-active { flex: 0 0 min(64vw, 280px); aspect-ratio: 2 / 3; scroll-snap-align: start; }
  .realm img, .realm.is-active img { filter: none; transform: none; }
  .realm-spine { display: none; }
  .realm-info, .realm.is-active .realm-info { width: 100%; padding: 0 16px 16px; opacity: 1; transform: none; transition: none; }
  .realm-name { margin-top: 8px; font-size: 22px; }
  .realm-tag { font-size: 14.5px; }
  .realm-badge, .realm.is-active .realm-badge { left: 12px; translate: 0 0; }
  .realm.is-active { box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 18px 44px rgba(0, 0, 0, .45); }
  .realm.realm-mythic .mythic-trace img { opacity: .55; }
}

/* ─────────────── strays ─────────────── */

.strays { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 6vw, 96px); overflow: clip; }
.strays::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 52%, rgba(233, 196, 106, .14) 0%, rgba(15, 45, 49, .36) 30%, rgba(10, 13, 24, 0) 64%); }
.stray-rail { position: relative; outline: none; }
.stray-rail:focus-visible { outline: 2px solid var(--aether); outline-offset: -4px; border-radius: 20px; }
.stray-list {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(20px, 3.4vw, 56px);
  width: 100%; max-width: calc(1120px + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding: 36px var(--pad-r) 0 var(--pad-l);
}
.stray { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stray-hero { margin-top: -36px; }
.card { width: 100%; max-width: 310px; perspective: 1100px; }
.stray-hero .card { max-width: 336px; }
.card-tilt { transform: rotateX(0deg) rotateY(0deg); will-change: transform; }
.card-foil {
  position: relative; overflow: hidden; isolation: isolate; padding: 7px; border-radius: 22px;
  background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55), 0 0 44px rgba(233, 196, 106, .2);
  transition: box-shadow .5s var(--ease-out);
}
.card:hover .card-foil { box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 64px rgba(233, 196, 106, .34); }
/* the gold leaf itself: a larger sheet of foil sliding under the frame as the card turns, so a glint runs along it */
.card-glint {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(125deg, #A97A35 0%, #E9C46A 14%, #FFF6D8 22%, #C9973F 32%, #8A6428 42%, #E9C46A 50%, #FFFFF4 54%, #FFF6D8 56%, #C9973F 63%, #A97A35 76%, #F7E2A6 88%, #8A6428 100%);
}
.card-inner { position: relative; z-index: 1; aspect-ratio: 286 / 436; overflow: hidden; isolation: isolate; border-radius: 16px; background: var(--ink); }
.card-inner picture { position: absolute; inset: 0; }
.card-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
/* the holographic sheen (aether, gold, ember) and the specular light are larger than the card and slide across it */
.card-sheen {
  position: absolute; left: 0; top: 0; width: 200%; height: 200%; z-index: 2; pointer-events: none; opacity: .46; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(166, 244, 230, .62) 40%, rgba(255, 241, 201, .9) 48%, rgba(255, 138, 91, .5) 56%, rgba(255, 255, 255, 0) 66%);
  transform: translate3d(-25%, -25%, 0); will-change: transform; transition: opacity .5s var(--ease-out);
}
.card:hover .card-sheen { opacity: .7; }
/* the holographic band: an iridescent stripe (aether, gold, ember, a breath of violet) that follows the light; it shows
   on hover, and faintly on touch screens where the card sways with the phone */
.card-holo {
  position: absolute; left: 0; top: 0; width: 200%; height: 200%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(0, 0, 0, 0) 39%, rgba(166, 244, 230, .46) 43.5%, rgba(255, 241, 201, .58) 47.5%, rgba(255, 176, 138, .34) 51.5%, rgba(205, 176, 255, .24) 55%, rgba(0, 0, 0, 0) 59%);
  transform: translate3d(-25%, -25%, 0); will-change: transform; transition: opacity .6s var(--ease-out);
}
.card:hover .card-holo { opacity: .36; }
@media (hover: none) { .card-holo { opacity: .2; } }
.card-spec { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(ellipse 48% 34% at 50% 50%, rgba(255, 252, 240, .55) 0%, rgba(255, 252, 240, .15) 45%, rgba(255, 252, 240, 0) 100%); will-change: transform; }
.card-badge {
  position: absolute; z-index: 3; left: 12px; top: 12px; padding: 5px 10px; border-radius: 12px;
  font: 650 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi);
  background: rgba(10, 13, 24, .66); box-shadow: 0 0 0 1px rgba(233, 196, 106, .18);
}
.card-plate { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 64px 18px 16px; background: linear-gradient(0deg, rgba(10, 13, 24, .96) 0%, rgba(10, 13, 24, .82) 55%, rgba(10, 13, 24, 0) 100%); }
.card-name { font: 400 clamp(24px, .5vw + 20px, 28px)/1 var(--serif); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.card-realm { display: inline-flex; align-items: center; gap: 6px; font: 650 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--aether); white-space: nowrap; }
.card-realm svg { flex: none; color: var(--aether); filter: drop-shadow(0 0 4px rgba(166, 244, 230, .85)); }
.card-from { min-width: 0; font-size: 12px; color: rgba(243, 235, 221, .72); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stray-lore { margin-top: 28px; max-width: 290px; text-align: center; font: italic 300 17px/1.46 var(--serif); color: rgba(243, 235, 221, .88); text-wrap: balance; }

/* tablets: all three fit, a little smaller */
@media (min-width: 700px) and (max-width: 899px) {
  .stray-list { gap: 20px; padding-top: 28px; }
  .stray-hero { margin-top: -28px; }
  .card, .stray-hero .card { max-width: none; }
  .card-foil { padding: 6px; border-radius: 18px; }
  .card-inner { border-radius: 13px; }
  .card-plate { padding: 52px 12px 12px; }
  .card-name { font-size: 21px; }
  .card-row { flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 9px; }
  .card-from { text-align: left; }
  .card-badge { left: 9px; top: 9px; padding: 4px 8px; font-size: 8.5px; }
  .stray-lore { margin-top: 22px; font-size: 15.5px; }
}
/* phones: a rail you can swipe (and reach by keyboard: the rail itself takes focus and scrolls with the arrows) */
@media (max-width: 699px) {
  .stray-rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 var(--pad-r) 0 var(--pad-l); margin: -34px 0 -52px; }
  .stray-rail::-webkit-scrollbar { display: none; }
  .stray-list { display: flex; gap: 18px; width: max-content; max-width: none; margin: 0; padding: 64px var(--pad-r) 72px var(--pad-l); }
  .stray { flex: 0 0 min(72vw, 300px); scroll-snap-align: center; }
  .stray-hero { margin-top: 0; }
  .card, .stray-hero .card { max-width: none; }
  .stray-lore { font-size: 16px; margin-top: 22px; }
}

/* ─────────────── the October event ─────────────── */

.event { position: relative; padding: clamp(28px, 4vw, 56px) 0; }
.event[hidden] { display: none; }
.event-card {
  position: relative; display: grid; grid-template-columns: minmax(200px, 40%) minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 3vw, 40px);
  min-height: 168px; overflow: hidden; isolation: isolate; border-radius: 22px;
  background: linear-gradient(100deg, #0E0A18 0%, #151027 60%, #120D20 100%);
  box-shadow: 0 0 0 1px rgba(205, 176, 255, .24), 0 26px 64px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(228, 211, 255, .06);
}
.event-card::before { content: ''; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 180, 99, .14), rgba(205, 176, 255, .06) 50%, rgba(205, 176, 255, 0)); }
.event-art { position: relative; align-self: stretch; min-height: 168px; }
.event-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 30%; -webkit-mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, 0) 100%); }
.event-copy { padding: 24px 0; min-width: 0; }
.event-eyebrow { display: flex; align-items: center; gap: 9px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #D9C3FF; }
.event-eyebrow svg { flex: none; color: #FFC98A; filter: drop-shadow(0 0 5px rgba(255, 180, 99, .7)); }
.event-title { margin-top: 10px; font: 400 clamp(25px, 1vw + 18px, 34px)/1.1 var(--serif); text-wrap: balance; }
.event-tag { margin-top: 8px; font: italic 300 16.5px/1.45 var(--serif); color: rgba(243, 235, 221, .84); }
.event-act { margin-top: 6px; }
.event-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font: 600 14.5px/1 var(--sans); color: var(--gold-hi); text-decoration: underline 1px rgba(233, 196, 106, .45); text-underline-offset: 5px; transition: text-decoration-color .3s; }
.event-link svg { color: var(--gold); transition: transform .35s var(--spring); }
.event-link:hover { text-decoration-color: var(--gold-hi); }
.event-link:hover svg { transform: translateX(4px); }
.event-play { display: none; }
.is-player .event-play { display: inline-flex; }
.is-player .event-join { display: none; }
.event-count { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 128px; padding: 0 clamp(26px, 3vw, 44px) 0 0; text-align: center; }
.event-count[hidden] { display: none; }
.event-count b { font: 340 clamp(48px, 2vw + 34px, 64px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: #FFE0B0; text-shadow: 0 0 26px rgba(255, 180, 99, .55); }
.event-count span { font: 600 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 235, 221, .7); }

@media (max-width: 719px) {
  .event-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; min-height: 0; }
  .event-art { grid-column: 1 / -1; min-height: 132px; }
  .event-art img { object-position: 22% 26%; -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0) 100%); }
  .event-copy { padding: 0 0 16px 20px; margin-top: -20px; }
  .event-count { min-width: 0; padding: 0 20px 22px 0; margin-top: -20px; align-self: start; gap: 6px; }
  .event-count b { font-size: 46px; }
}

/* ─────────────── the invite ─────────────── */

.finale { position: relative; isolation: isolate; padding: clamp(96px, 11vw, 176px) 0 clamp(88px, 10vw, 150px); text-align: center; overflow: clip; }
.finale-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 62% at 50% 34%, rgba(15, 45, 49, .78) 0%, rgba(20, 25, 54, .36) 46%, rgba(10, 13, 24, 0) 76%); }
.finale-sky::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(60px, 9vw, 130px); translate: -50% 0; background: linear-gradient(180deg, rgba(233, 196, 106, 0), rgba(233, 196, 106, .55)); }
.finale-inner { display: flex; flex-direction: column; align-items: center; }
.glyph-finale { margin-bottom: 30px; }
.finale-title { max-width: 13em; font: 360 clamp(36px, 2.8vw + 22px, 68px)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.finale-text { margin: 20px auto 0; max-width: 31em; font-size: clamp(16px, .3vw + 15px, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.join-wide { max-width: 520px; margin-top: 40px; }
.join-wide .join-consent, .join-wide .join-status { text-align: center; }
.join-wide .join-status[data-kind='error'] { justify-content: center; }
.join-wide .join-done { justify-content: center; text-align: left; }
.finale-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 30px; }
.finale-meta > span { font: 600 11.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* ─────────────── footer ─────────────── */

.foot { position: relative; border-top: 1px solid rgba(243, 235, 221, .08); padding: 34px 0 calc(34px + var(--safe-bottom)); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.foot-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 400 13.5px/1 var(--serif); letter-spacing: .34em; text-decoration: none; color: var(--parchment); }
.foot-brand svg { filter: drop-shadow(0 0 4px rgba(255, 214, 140, .85)); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; }
.foot-nav { display: flex; gap: 26px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: rgba(243, 235, 221, .8); text-decoration: none; transition: color .2s; }
.foot-nav a:hover { color: var(--gold-hi); }
.foot-small { display: flex; flex-wrap: wrap; gap: 4px 10px; width: 100%; font-size: 13px; color: var(--faint); }
.foot-dot { color: rgba(233, 196, 106, .6); }

/* ═══════════════ 1.1: the seal, the tales, the living map, Strays one of a kind, every day, the reel ═══════════════
   Every loop below runs only while its section is on screen (landing.js marks [data-live] sections .is-live) and only
   moves transforms and opacity; with reduced motion each one rests on its last, readable frame. */

.js [data-live]:not(.is-live) *, .js [data-live]:not(.is-live) *::before, .js [data-live]:not(.is-live) *::after { animation-play-state: paused !important; }

/* ─────────────── the seal: a second puzzle in every seam ─────────────── */

.seal { position: relative; isolation: isolate; padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 7vw, 110px); }
.seal::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 72% 50% at 50% 50%, rgba(20, 25, 54, .62) 0%, rgba(15, 45, 49, .2) 50%, rgba(10, 13, 24, 0) 80%); }
.seal-list {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px);
  width: 100%; max-width: calc(var(--wrap) + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l);
}
.seal-plate { display: flex; flex-direction: column; min-width: 0; }
.seal-art {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate; border-radius: 16px; background: #0E1222;
  container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 26px 60px rgba(0, 0, 0, .5);
}
.seal-art::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .16), inset 0 40px 50px -40px rgba(10, 13, 24, .75), inset 0 0 70px rgba(10, 13, 24, .4); }
.seal-art picture { position: absolute; inset: 0; }
.seal-art picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seal-name { margin-top: 22px; font: 400 clamp(21px, .5vw + 17px, 25px)/1.15 var(--serif); letter-spacing: -.004em; }
.seal-text { margin-top: 8px; font-size: 15.5px; line-height: 1.56; color: var(--muted); text-wrap: pretty; }
.seal-realms { margin-top: auto; padding-top: 14px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.seal-realms span { white-space: nowrap; }
.seal-realms span:not(:last-child)::after { content: ' ·'; }
.seal .frame-label { max-width: calc(100% - 28px); }

/* Mend the seam: three pieces of the Elsewhere tear away and glide home, one by one (12 s, transforms only) */
.mend-grid, .mend-hole, .mend-piece { position: absolute; pointer-events: none; }
.mend-grid {
  inset: 0; z-index: 2; opacity: 0;
  background-image: linear-gradient(90deg, rgba(255, 236, 190, .34) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 236, 190, .34) 1px, transparent 1px);
  background-size: calc(100% / 3) calc(100% / 3); background-position: -.5px -.5px;
}
.seal-mend.is-ready .mend-grid { animation: mend-grid 12s var(--ease-out) infinite; }
.mend-hole, .mend-piece { width: calc(100% / 3); height: calc(100% / 3); left: calc(var(--c) * 100% / 3); top: calc(var(--r) * 100% / 3); }
.mend-hole { z-index: 3; opacity: 0; background: rgba(6, 8, 16, .86); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), inset 0 0 26px rgba(0, 0, 0, .7); }
.seal-mend.is-ready .mend-hole { animation: mend-hole 12s var(--ease-out) var(--k) infinite; }
.mend-piece { z-index: 4; overflow: hidden; border-radius: 2px; opacity: 0; will-change: transform; }
.seal-mend.is-ready .mend-piece { opacity: 1; animation: mend-piece 12s var(--spring) var(--k) infinite; }
.mend-piece img { position: absolute; max-width: none; width: 300%; height: 300%; left: calc(var(--c) * -100%); top: calc(var(--r) * -100%); object-fit: cover; }
.h1 { --c: 0; --r: 1; --k: 0s; --tx: 44%; --ty: -50%; --rot: -9deg; }
.h2 { --c: 2; --r: 0; --k: .45s; --tx: -48%; --ty: 46%; --rot: 8deg; }
.h3 { --c: 1; --r: 2; --k: .9s; --tx: 46%; --ty: -44%; --rot: -6deg; }
@keyframes mend-piece {
  0%, 12% { transform: none; box-shadow: none; }
  20%, 50% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.92); box-shadow: 0 0 0 1px rgba(255, 241, 201, .75), 0 18px 32px rgba(0, 0, 0, .65), 0 0 22px rgba(233, 196, 106, .35); }
  62%, 100% { transform: none; box-shadow: none; }
}
@keyframes mend-hole { 0%, 13% { opacity: 0; } 19%, 56% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes mend-grid { 0%, 12% { opacity: 0; } 20%, 60% { opacity: 1; } 74%, 100% { opacity: 0; } }
/* its label says "Drag each piece home", then "Mended." */
.mend-say { display: grid; }
.mend-say > span { grid-area: 1 / 1; text-align: center; }
.mend-say > span:last-child { opacity: 0; }
.seal-mend.is-ready .mend-say > span:first-child { animation: say-a 12s linear infinite; }
.seal-mend.is-ready .mend-say > span:last-child { animation: say-b 12s linear infinite; }
@keyframes say-a { 0%, 70% { opacity: 1; } 72%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes say-b { 0%, 70% { opacity: 0; } 72%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* The Cartographer's riddle: the riddle over the photo, then the answer found (the pencil cup) and a gold ring */
.riddle-q {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px 15px; border-radius: 14px;
  font: italic 300 clamp(15px, 4.9cqw, 17px)/1.38 var(--serif); color: var(--parchment); text-wrap: balance;
  background: rgba(10, 13, 24, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .3), 0 14px 30px rgba(0, 0, 0, .45);
}
.riddle-ring, .riddle-right { position: absolute; z-index: 4; pointer-events: none; }
.riddle-ring { left: 42%; top: 29%; width: 21%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; animation: riddle-ring 9s var(--ease-out) infinite; }
.riddle-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #F0CF85; box-shadow: 0 0 0 1px rgba(10, 13, 24, .35), 0 0 18px 4px rgba(233, 196, 106, .6), inset 0 0 14px rgba(233, 196, 106, .4); }
.riddle-ring::after { content: ''; position: absolute; inset: -22%; border-radius: 50%; border: 1.5px solid rgba(166, 244, 230, .95); opacity: 0; animation: riddle-burst 9s ease-out infinite; }
.riddle-right {
  left: 42%; top: calc(29% + 13cqw); translate: -50% 0; padding: 6px 10px; border-radius: 12px; white-space: nowrap; opacity: 0;
  font: italic 300 14px/1 var(--serif); color: var(--gold-hi); background: rgba(10, 13, 24, .78);
  animation: riddle-right 9s var(--ease-out) infinite;
}
@keyframes riddle-ring { 0%, 38% { opacity: 0; transform: scale(.3); } 44% { opacity: 1; transform: scale(1.08); } 50%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes riddle-burst { 0%, 40% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(.5); } 58%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes riddle-right { 0%, 47% { opacity: 0; transform: translateY(6px); } 53%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* Lantern light: the room in the dark, a circle of light the visitor carries (the pointer, a tap, the phone's tilt), and
   two things to find by it. The darkness is one large gradient moved by transform; landing.js leads it. */
.seal-light { cursor: crosshair; touch-action: manipulation; }
.light-dark { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.light-pool {
  position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgba(4, 6, 12, 0) 0, rgba(4, 6, 12, 0) 6.5%, rgba(4, 6, 12, .52) 10%, rgba(4, 6, 12, .9) 14%, rgba(4, 6, 12, .965) 22%);
  transform: translate3d(-4%, 2%, 0);
}
.light-pool::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .2), rgba(255, 214, 140, .06) 60%, rgba(255, 214, 140, 0)); mix-blend-mode: screen; }
.light-thing { position: absolute; z-index: 2; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 15%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.light-thing img { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(166, 244, 230, .65)) drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.light-thing.t1 { --fx: .24; --fy: .76; }
.light-thing.t2 { --fx: .8; --fy: .34; }
.light-thing::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; border: 2px solid #F0CF85; box-shadow: 0 0 18px 4px rgba(233, 196, 106, .55); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .6s cubic-bezier(.2, 1.6, .4, 1); }
.light-thing.is-found { z-index: 4; }
.light-thing.is-found::after { opacity: 1; transform: none; }
.light-hint {
  position: absolute; z-index: 7; left: 50%; bottom: 14px; translate: -50% 0; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 14px;
  font: 500 12px/1.3 var(--sans); color: rgba(243, 235, 221, .86); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10, 13, 24, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
}
.light-hint:empty { display: none; }

/* Where did it go? Three of the six slip to new places while the room dims; then each is found again (9 s) */
.where-dim, .where-thing { position: absolute; pointer-events: none; }
.where-dim { inset: 0; z-index: 2; background: rgba(5, 7, 14, .66); opacity: 0; animation: where-dim 9s var(--ease-out) infinite; }
.where-thing { z-index: 3; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 14%; aspect-ratio: 1; translate: -50% -50%; animation: where-go 9s cubic-bezier(.45, 0, .25, 1) var(--k) infinite; }
.where-thing img { width: 100%; height: 100%; filter: drop-shadow(0 0 7px rgba(166, 244, 230, .9)) drop-shadow(0 5px 9px rgba(0, 0, 0, .5)); }
.where-thing::after { content: ''; position: absolute; inset: -20%; border-radius: 50%; border: 2px solid #F0CF85; box-shadow: 0 0 16px 3px rgba(233, 196, 106, .55); opacity: 0; animation: where-ring 9s var(--ease-out) var(--k) infinite; }
.where-thing.w1 { --fx: .77; --fy: .32; --dx: -45cqw; --dy: 24cqw; --k: 0s; --back: 0s; }
.where-thing.w2 { --fx: .79; --fy: .57; --dx: -27cqw; --dy: -49cqw; --k: .25s; }
.where-thing.w3 { --fx: .27; --fy: .77; --dx: 42cqw; --dy: 9cqw; --k: .5s; }
@keyframes where-dim { 0%, 14% { opacity: 0; } 20%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes where-go {
  0% { opacity: 0; transform: none; }
  4%, 18% { opacity: 1; transform: none; }
  24% { opacity: 1; transform: scale(1.18); }
  42% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.18); }
  48%, 58% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  64%, 92% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes where-ring { 0%, 4% { opacity: 0; transform: scale(.5); } 8%, 16% { opacity: 1; transform: none; } 22%, 62% { opacity: 0; transform: none; } 66% { opacity: 1; transform: scale(1.12); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* tablets: two by two; phones: a rail of plates */
@media (max-width: 1099px) {
  .seal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(860px + var(--pad-l) + var(--pad-r)); row-gap: clamp(44px, 6vw, 64px); }
}
@media (max-width: 719px) {
  .seal-list {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px var(--pad-r) 8px var(--pad-l); scroll-padding: 0 var(--pad-r) 0 var(--pad-l);
  }
  .seal-list::-webkit-scrollbar { display: none; }
  .seal-list:focus-visible { outline: 2px solid var(--aether); outline-offset: -2px; border-radius: 16px; }
  .map-scroll:focus-visible { outline: none; }
  .map-frame:has(.map-scroll:focus-visible) { outline: 2px solid var(--aether); outline-offset: 3px; }
  .seal-plate { flex: 0 0 min(74vw, 300px); scroll-snap-align: start; }
  .seal-name { margin-top: 18px; }
  .seal-text { font-size: 15px; }
}

/* ─────────────── the tales: The Thinning ─────────────── */

.tales { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 7vw, 110px); overflow: clip; }
.tales::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 46% at 50% 56%, rgba(36, 28, 62, .55) 0%, rgba(20, 25, 54, .32) 44%, rgba(10, 13, 24, 0) 78%); }
.tale-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: calc(-1 * clamp(14px, 2.5vw, 40px)) auto clamp(26px, 3vw, 40px); }
.tale-to, .map-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(243, 235, 221, .78); white-space: nowrap;
  background: rgba(243, 235, 221, .045); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .13);
  transition: color .3s, background .3s, box-shadow .4s;
}
.tale-to:hover, .map-chip:hover { color: var(--parchment); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); }
.tale-to-no { min-width: 1.3em; text-align: center; font: 400 14.5px/1 var(--serif); letter-spacing: .03em; text-transform: none; color: var(--gold); }
.tale-glyph { display: inline-block; vertical-align: -2px; color: var(--gold); }
.tale-to[aria-current='true'], .map-chip[aria-pressed='true'] { color: var(--gold-hi); background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .62), 0 0 24px rgba(233, 196, 106, .14); }
.no-js .tale-index, .no-js .tale-step { display: none; }

.tale-book { --tale-w: min(1060px, calc(100vw - var(--pad-l) - var(--pad-r) - 96px)); position: relative; }
.tale-rail { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.tale-rail::-webkit-scrollbar { display: none; }
.tale-rail:focus-visible { outline: 2px solid var(--aether); outline-offset: -4px; border-radius: 24px; }
.tale-track { display: flex; gap: clamp(18px, 2.4vw, 36px); width: max-content; padding: 12px calc((100vw - var(--tale-w)) / 2) 34px; }
@supports (width: 1cqw) {
  .tale-book { container-type: inline-size; --tale-w: min(1060px, calc(100cqw - var(--pad-l) - var(--pad-r) - 96px)); }
  .tale-track { padding-left: calc((100cqw - var(--tale-w)) / 2); padding-right: calc((100cqw - var(--tale-w)) / 2); }
}
.tale {
  position: relative; flex: 0 0 var(--tale-w); display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); scroll-snap-align: center;
  border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #171C3A 0%, #10142B 58%, #0C1024 100%);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .28), 0 34px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(233, 196, 106, .06);
  transition: opacity .7s var(--ease-out), transform 1s var(--spring), box-shadow .7s var(--ease-out);
}
.js .tale:not(.is-current) { opacity: .4; transform: scale(.955); box-shadow: 0 0 0 1px rgba(243, 235, 221, .08), 0 24px 60px rgba(0, 0, 0, .45); }
.tale-plate { position: relative; aspect-ratio: 2 / 3; isolation: isolate; }
.tale-plate > picture { position: absolute; inset: 0; z-index: -1; }
.tale-plate .tale-img { width: 100%; height: 100%; object-fit: cover; }
.tale-plate::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 13, 24, .82) 0%, rgba(10, 13, 24, .3) 26%, rgba(10, 13, 24, 0) 46%), linear-gradient(90deg, rgba(10, 13, 24, 0) 82%, rgba(10, 13, 24, .55) 100%); }
.tale-page { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4.4vw, 64px) clamp(30px, 4.4vw, 64px); }
.tale-page::before { content: ''; position: absolute; inset: 14px; border-radius: 12px; pointer-events: none; border: 1px solid rgba(233, 196, 106, .2); }
.tale-page::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain) 0 0 / 180px 180px; opacity: .06; mix-blend-mode: soft-light; }
.tale-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 3px .55em; font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.tale-ch span { white-space: nowrap; }
.tale-title { margin-top: 14px; font: 360 clamp(32px, 1.7vw + 19px, 48px)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.tale-text { margin-top: 18px; max-width: 34em; font: 400 clamp(16px, .25vw + 15px, 18px)/1.62 var(--serif); color: rgba(243, 235, 221, .86); text-wrap: pretty; }
.tale-acts { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid rgba(233, 196, 106, .18); }
.tale-acts li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(243, 235, 221, .07); }
.act-no { font: 400 14px/1 var(--serif); letter-spacing: .06em; color: var(--gold); }
.act-name { font: 400 17px/1.3 var(--serif); color: var(--parchment); }
.act-at { font: 600 9.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 235, 221, .62); text-align: right; }

/* the tale's legendary Stray: a small gilt card on the painting */
.tale-legend { position: absolute; left: clamp(16px, 2.2vw, 24px); bottom: clamp(16px, 2.2vw, 24px); display: flex; align-items: flex-end; gap: 14px; margin: 0; max-width: calc(100% - 32px); }
.legend-card { flex: none; width: clamp(92px, 9vw, 120px); padding: 4px; border-radius: 12px; transform: rotate(-4deg); background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 36%, #F7E2A6 52%, #A97A35 68%, #FFF1C9 84%, #C9973F 100%); box-shadow: 0 18px 34px rgba(0, 0, 0, .6), 0 0 28px rgba(233, 196, 106, .28); }
.legend-card img { width: 100%; aspect-ratio: 2 / 3; height: auto; border-radius: 8px; object-fit: cover; }
.legend-back { display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 8px; background: radial-gradient(1px 1px at 22% 30%, #FFF4D6, transparent), radial-gradient(1px 1px at 70% 22%, rgba(255, 244, 214, .8), transparent), radial-gradient(1px 1px at 40% 74%, rgba(255, 244, 214, .7), transparent), radial-gradient(1px 1px at 78% 66%, rgba(255, 244, 214, .7), transparent), radial-gradient(ellipse 80% 60% at 50% 40%, #1D2554 0%, #0B0F24 80%); }
.legend-back svg { filter: drop-shadow(0 0 2px #FFF1C9) drop-shadow(0 0 9px rgba(255, 214, 140, .9)); }
.legend-back svg use { fill: url(#g-seam); }
.tale-legend figcaption { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; min-width: 0; text-shadow: 0 1px 10px rgba(10, 13, 24, .9); }
.legend-tag { font: 650 9.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.legend-name { font: italic 300 clamp(15px, .4vw + 13px, 18px)/1.25 var(--serif); color: var(--parchment); text-wrap: balance; }

/* the arrows, at the open tale's edges */
.tale-step {
  position: absolute; z-index: 3; top: calc(50% - 30px); width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--gold-hi);
  background: rgba(10, 13, 24, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1.5px rgba(233, 196, 106, .7), 0 0 26px rgba(233, 196, 106, .25), 0 14px 30px rgba(0, 0, 0, .5);
  transition: opacity .4s, transform .35s var(--spring), box-shadow .3s;
}
.tale-step[hidden] { display: none; }
.tale-prev { left: calc((100% - var(--tale-w)) / 2 - 26px); }
.tale-next { right: calc((100% - var(--tale-w)) / 2 - 26px); }
.tale-prev svg { transform: rotate(180deg); }
.tale-step:hover { transform: scale(1.07); box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 32px rgba(233, 196, 106, .45), 0 14px 30px rgba(0, 0, 0, .5); }
.tale-step:disabled { opacity: 0; pointer-events: none; }
.tale-coda { max-width: 39em; margin: clamp(24px, 3vw, 40px) auto 0; text-align: center; font: italic 300 clamp(16.5px, .3vw + 15px, 19.5px)/1.6 var(--serif); color: rgba(243, 235, 221, .84); text-wrap: balance; }

/* where the seven names don't fit one row, the chapter buttons show their numerals (the names stay for screen readers;
   es.css widens this for the longer Spanish) */
@media (max-width: 1279px) {
  .tale-to-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tale-to { justify-content: center; min-width: 46px; padding: 0 8px; }
  .tale-to-no { font-size: 15px; }
}
@media (max-width: 1099px) {
  .tale { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .tale-plate { aspect-ratio: auto; min-height: 100%; }
  .tale-page { padding: 34px 34px 32px; }
  .tale-acts li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 3px; padding: 10px 0; }
  .act-at { grid-column: 2; text-align: left; }
}
@media (max-width: 719px) {
  .tale-book { --tale-w: calc(100vw - var(--pad-l) - var(--pad-r) - 20px); }
  @supports (width: 1cqw) { .tale-book { --tale-w: calc(100cqw - var(--pad-l) - var(--pad-r) - 20px); } }
  .tale-track { align-items: flex-start; gap: 12px; padding-top: 6px; padding-bottom: 24px; }
  .tale { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-radius: 20px; }
  .js .tale:not(.is-current) { opacity: .55; transform: scale(.97); }
  .tale-plate { aspect-ratio: 4 / 4.6; min-height: 0; }
  .tale-plate .tale-img { object-position: 50% 30%; }
  .tale-plate::after { background: linear-gradient(0deg, rgba(16, 20, 43, 1) 0%, rgba(16, 20, 43, .6) 16%, rgba(10, 13, 24, 0) 40%); }
  .tale-page { justify-content: flex-start; padding: 8px 22px 26px; }
  .tale-page::before { display: none; }
  .tale-title { margin-top: 10px; font-size: 31px; }
  .tale-text { margin-top: 12px; font-size: 16px; line-height: 1.58; }
  .tale-acts { margin-top: 20px; }
  .tale-acts li { grid-template-columns: 28px minmax(0, 1fr); }
  .legend-card { width: 84px; }
  .tale-step { display: none; }
  .tale-index { gap: 6px; flex-wrap: nowrap; }
  .tale-to { justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; }
  .tale-to-no { font-size: 15px; }
}
@media (max-width: 359px) { .tale-index { gap: 4px; } .tale-to { min-width: 40px; } }

/* ─────────────── the living map ─────────────── */

.atlas { position: relative; isolation: isolate; padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 110px); }
.atlas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 56% at 50% 60%, rgba(15, 45, 49, .42) 0%, rgba(20, 25, 54, .3) 46%, rgba(10, 13, 24, 0) 80%); }
.map-realms { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: calc(-1 * clamp(14px, 2.5vw, 40px)) auto clamp(22px, 2.6vw, 34px); }
.map-chip::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--gold)); box-shadow: 0 0 8px var(--accent, var(--gold)); }
.map-chip[data-map='lantern'] { --accent: #A6F4E6; }
.map-chip[data-map='drowned'] { --accent: #7FE6E0; }
.map-chip[data-map='clockwork'] { --accent: #FFD199; }
.map-chip[data-map='winter'] { --accent: #CFEFFF; }
.map-chip[data-map='ember'] { --accent: #FFB08A; }
.map-chip[data-map='hollow'] { --accent: #CDB0FF; }
.map-chip.is-locked { cursor: default; color: rgba(243, 235, 221, .5); letter-spacing: .12em; }
.map-chip.is-locked::before { display: none; }
.map-chip.is-locked:hover { box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .13); color: rgba(243, 235, 221, .5); }
.no-js .map-realms { display: none; }

.map { position: relative; max-width: 1240px; margin: 0 auto; }
.map-frame {
  position: relative; padding: 5px; border-radius: 24px;
  background: linear-gradient(135deg, #F7E2A6 0%, #A97A35 16%, #5E4419 34%, #E9C46A 52%, #7A5822 70%, #F7E2A6 86%, #8A6428 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 70px rgba(233, 196, 106, .1);
}
.map-scroll { position: relative; overflow: hidden; border-radius: 19px; background: #0B0E1A; }
.map-art { position: relative; aspect-ratio: 3 / 2; }
.map-base, .map-plots { position: absolute; inset: 0; }
.map-base img { width: 100%; height: 100%; object-fit: cover; transition: filter 1.4s var(--ease-out); }
.js .map-art.is-faded .map-base img { filter: saturate(.2) brightness(.36) contrast(1.06); }
.map-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(10, 13, 24, .6), inset 0 0 90px rgba(10, 13, 24, .55); }

.plot { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 17%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.plot-disc { position: absolute; left: 50%; top: 50%; width: calc(100% * .36 / .17); aspect-ratio: 1; translate: -50% -50%; overflow: hidden; border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 37%, rgba(0, 0, 0, .55) 63%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(closest-side, #000 37%, rgba(0, 0, 0, .55) 63%, rgba(0, 0, 0, 0) 100%); opacity: 0; transform: scale(.5); }
.plot-disc img { position: absolute; max-width: none; width: calc(100% / .36); height: auto; left: calc(50% - var(--x) * 100% / .36); top: calc(50% - var(--y) * 100% / .54); filter: saturate(1.08) brightness(1.06); }
.plot-frame {
  position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 3 / 4; translate: -50% -58%; padding: 2px; border-radius: 6px;
  background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 20%, #8A6428 42%, #F7E2A6 60%, #A97A35 80%, #FFF1C9 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .55), 0 0 20px rgba(233, 196, 106, .4);
}
.plot-frame picture, .plot-frame img { display: block; width: 100%; height: 100%; }
.plot-frame img { object-fit: cover; border-radius: 4px; background: #0A0D18; }
.plot-no {
  position: absolute; left: 50%; top: calc(50% + 15%); translate: -50% 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  font: 650 9.5px/17px var(--sans); color: var(--gold-hi); text-align: center; font-variant-numeric: tabular-nums;
  background: var(--ink); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .9), 0 2px 6px rgba(0, 0, 0, .5);
}
.js .plot.is-lit .plot-frame, .js .plot.is-lit .plot-no { opacity: 0; transform: scale(.55); }
.plot.is-on .plot-disc { opacity: 1; transform: none; transition: opacity 1.3s var(--ease-out), transform 1.8s var(--spring); }
.js .plot.is-on .plot-frame, .js .plot.is-on .plot-no { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .25s, transform .9s cubic-bezier(.2, 1.5, .4, 1) .25s; }
.plot.is-on .plot-frame::after { content: ''; position: absolute; inset: -7px; border-radius: 11px; box-shadow: 0 0 0 1.5px rgba(255, 236, 190, .9), 0 0 26px rgba(233, 196, 106, .9); opacity: 0; animation: plot-ring 1.8s var(--ease-out) .35s; }
@keyframes plot-ring { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
/* where each realm's twelve plots are on its painting (shared/maps.mjs) */
.map-art[data-realm="lantern"] .plot:nth-child(1) { --x: 0.161; --y: 0.197; }
.map-art[data-realm="lantern"] .plot:nth-child(2) { --x: 0.382; --y: 0.196; }
.map-art[data-realm="lantern"] .plot:nth-child(3) { --x: 0.624; --y: 0.197; }
.map-art[data-realm="lantern"] .plot:nth-child(4) { --x: 0.844; --y: 0.199; }
.map-art[data-realm="lantern"] .plot:nth-child(5) { --x: 0.166; --y: 0.464; }
.map-art[data-realm="lantern"] .plot:nth-child(6) { --x: 0.398; --y: 0.46; }
.map-art[data-realm="lantern"] .plot:nth-child(7) { --x: 0.646; --y: 0.46; }
.map-art[data-realm="lantern"] .plot:nth-child(8) { --x: 0.888; --y: 0.46; }
.map-art[data-realm="lantern"] .plot:nth-child(9) { --x: 0.144; --y: 0.749; }
.map-art[data-realm="lantern"] .plot:nth-child(10) { --x: 0.377; --y: 0.752; }
.map-art[data-realm="lantern"] .plot:nth-child(11) { --x: 0.614; --y: 0.762; }
.map-art[data-realm="lantern"] .plot:nth-child(12) { --x: 0.852; --y: 0.763; }
.map-art[data-realm="drowned"] .plot:nth-child(1) { --x: 0.175; --y: 0.227; }
.map-art[data-realm="drowned"] .plot:nth-child(2) { --x: 0.39; --y: 0.224; }
.map-art[data-realm="drowned"] .plot:nth-child(3) { --x: 0.598; --y: 0.222; }
.map-art[data-realm="drowned"] .plot:nth-child(4) { --x: 0.823; --y: 0.226; }
.map-art[data-realm="drowned"] .plot:nth-child(5) { --x: 0.12; --y: 0.484; }
.map-art[data-realm="drowned"] .plot:nth-child(6) { --x: 0.381; --y: 0.492; }
.map-art[data-realm="drowned"] .plot:nth-child(7) { --x: 0.622; --y: 0.49; }
.map-art[data-realm="drowned"] .plot:nth-child(8) { --x: 0.866; --y: 0.486; }
.map-art[data-realm="drowned"] .plot:nth-child(9) { --x: 0.159; --y: 0.8; }
.map-art[data-realm="drowned"] .plot:nth-child(10) { --x: 0.391; --y: 0.827; }
.map-art[data-realm="drowned"] .plot:nth-child(11) { --x: 0.622; --y: 0.82; }
.map-art[data-realm="drowned"] .plot:nth-child(12) { --x: 0.861; --y: 0.816; }
.map-art[data-realm="clockwork"] .plot:nth-child(1) { --x: 0.141; --y: 0.234; }
.map-art[data-realm="clockwork"] .plot:nth-child(2) { --x: 0.372; --y: 0.239; }
.map-art[data-realm="clockwork"] .plot:nth-child(3) { --x: 0.619; --y: 0.247; }
.map-art[data-realm="clockwork"] .plot:nth-child(4) { --x: 0.843; --y: 0.246; }
.map-art[data-realm="clockwork"] .plot:nth-child(5) { --x: 0.109; --y: 0.469; }
.map-art[data-realm="clockwork"] .plot:nth-child(6) { --x: 0.371; --y: 0.476; }
.map-art[data-realm="clockwork"] .plot:nth-child(7) { --x: 0.638; --y: 0.485; }
.map-art[data-realm="clockwork"] .plot:nth-child(8) { --x: 0.893; --y: 0.477; }
.map-art[data-realm="clockwork"] .plot:nth-child(9) { --x: 0.122; --y: 0.741; }
.map-art[data-realm="clockwork"] .plot:nth-child(10) { --x: 0.36; --y: 0.762; }
.map-art[data-realm="clockwork"] .plot:nth-child(11) { --x: 0.631; --y: 0.762; }
.map-art[data-realm="clockwork"] .plot:nth-child(12) { --x: 0.879; --y: 0.74; }
.map-art[data-realm="winter"] .plot:nth-child(1) { --x: 0.117; --y: 0.231; }
.map-art[data-realm="winter"] .plot:nth-child(2) { --x: 0.374; --y: 0.232; }
.map-art[data-realm="winter"] .plot:nth-child(3) { --x: 0.624; --y: 0.231; }
.map-art[data-realm="winter"] .plot:nth-child(4) { --x: 0.883; --y: 0.237; }
.map-art[data-realm="winter"] .plot:nth-child(5) { --x: 0.123; --y: 0.487; }
.map-art[data-realm="winter"] .plot:nth-child(6) { --x: 0.377; --y: 0.491; }
.map-art[data-realm="winter"] .plot:nth-child(7) { --x: 0.624; --y: 0.488; }
.map-art[data-realm="winter"] .plot:nth-child(8) { --x: 0.875; --y: 0.49; }
.map-art[data-realm="winter"] .plot:nth-child(9) { --x: 0.116; --y: 0.761; }
.map-art[data-realm="winter"] .plot:nth-child(10) { --x: 0.38; --y: 0.762; }
.map-art[data-realm="winter"] .plot:nth-child(11) { --x: 0.623; --y: 0.761; }
.map-art[data-realm="winter"] .plot:nth-child(12) { --x: 0.883; --y: 0.762; }
.map-art[data-realm="ember"] .plot:nth-child(1) { --x: 0.132; --y: 0.182; }
.map-art[data-realm="ember"] .plot:nth-child(2) { --x: 0.364; --y: 0.18; }
.map-art[data-realm="ember"] .plot:nth-child(3) { --x: 0.654; --y: 0.179; }
.map-art[data-realm="ember"] .plot:nth-child(4) { --x: 0.871; --y: 0.179; }
.map-art[data-realm="ember"] .plot:nth-child(5) { --x: 0.123; --y: 0.469; }
.map-art[data-realm="ember"] .plot:nth-child(6) { --x: 0.368; --y: 0.469; }
.map-art[data-realm="ember"] .plot:nth-child(7) { --x: 0.628; --y: 0.47; }
.map-art[data-realm="ember"] .plot:nth-child(8) { --x: 0.874; --y: 0.47; }
.map-art[data-realm="ember"] .plot:nth-child(9) { --x: 0.129; --y: 0.761; }
.map-art[data-realm="ember"] .plot:nth-child(10) { --x: 0.367; --y: 0.763; }
.map-art[data-realm="ember"] .plot:nth-child(11) { --x: 0.628; --y: 0.763; }
.map-art[data-realm="ember"] .plot:nth-child(12) { --x: 0.869; --y: 0.762; }
.map-art[data-realm="hollow"] .plot:nth-child(1) { --x: 0.155; --y: 0.219; }
.map-art[data-realm="hollow"] .plot:nth-child(2) { --x: 0.388; --y: 0.223; }
.map-art[data-realm="hollow"] .plot:nth-child(3) { --x: 0.608; --y: 0.225; }
.map-art[data-realm="hollow"] .plot:nth-child(4) { --x: 0.844; --y: 0.223; }
.map-art[data-realm="hollow"] .plot:nth-child(5) { --x: 0.154; --y: 0.497; }
.map-art[data-realm="hollow"] .plot:nth-child(6) { --x: 0.39; --y: 0.501; }
.map-art[data-realm="hollow"] .plot:nth-child(7) { --x: 0.605; --y: 0.5; }
.map-art[data-realm="hollow"] .plot:nth-child(8) { --x: 0.849; --y: 0.498; }
.map-art[data-realm="hollow"] .plot:nth-child(9) { --x: 0.152; --y: 0.779; }
.map-art[data-realm="hollow"] .plot:nth-child(10) { --x: 0.388; --y: 0.783; }
.map-art[data-realm="hollow"] .plot:nth-child(11) { --x: 0.606; --y: 0.78; }
.map-art[data-realm="hollow"] .plot:nth-child(12) { --x: 0.846; --y: 0.78; }
/* the next place to light: a soft ring where it will be */
.plot.is-next::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, .55), 0 0 18px rgba(233, 196, 106, .45); opacity: 0; }
.js .map-art.is-done .plot.is-next::before { animation: plot-wait 3.4s ease-in-out infinite; }
@keyframes plot-wait { 0%, 100% { opacity: .25; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.04); } }

.map-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 18px 8px 0; }
.map-cap-eyebrow { font: 600 9.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.map-cap-name { font: 400 clamp(19px, .5vw + 15px, 23px)/1.1 var(--serif); color: var(--parchment); }
.map-count { margin-left: auto; font: 500 13px/1.2 var(--sans); color: rgba(243, 235, 221, .75); font-variant-numeric: tabular-nums; }

@media (max-width: 719px) {
  .map-frame { padding: 4px; border-radius: 20px; }
  .map-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 16px; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, #000 22px, #000 calc(100% - 26px), rgba(0, 0, 0, .3) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, #000 22px, #000 calc(100% - 26px), rgba(0, 0, 0, .3) 100%); }
  .map-scroll::-webkit-scrollbar { display: none; }
  .map-art { width: 172%; }
  .map-cap { margin: 14px 4px 0; column-gap: 12px; }
  .map-cap-eyebrow { width: 100%; }
  .map-realms { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--pad-l)); margin-right: calc(-1 * var(--pad-r)); padding: 2px var(--pad-r) 4px var(--pad-l); }
  .map-realms::-webkit-scrollbar { display: none; }
  .map-chip { flex: none; }
}

/* ─────────────── Strays: one of a kind, and what they do ─────────────── */

.card-from { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.card-one { display: inline-block; margin-left: 7px; padding: 3px 6px 2px; border-radius: 6px; vertical-align: 1px; font: 700 8.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #1A1305; background: var(--gold-fill); }
.stray-keepers { margin-top: 12px; max-width: 290px; text-align: center; font-size: 12.5px; line-height: 1.5; color: rgba(243, 235, 221, .68); }
.stray-keepers span { margin-right: 7px; font: 650 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.powers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); max-width: 1120px; margin: clamp(56px, 6vw, 96px) auto 0; padding: clamp(30px, 3vw, 44px) 0 0; border-top: 1px solid rgba(233, 196, 106, .16); }
.power { min-width: 0; }
.power-icon { display: block; color: var(--gold); filter: drop-shadow(0 0 6px rgba(233, 196, 106, .35)); }
.power-name { margin-top: 14px; font: 400 21px/1.2 var(--serif); }
.power-text { margin-top: 8px; font-size: 15px; line-height: 1.56; color: var(--muted); text-wrap: pretty; }
@media (min-width: 700px) and (max-width: 899px) { .stray-keepers { font-size: 11.5px; } }
@media (max-width: 699px) { .card-row { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 9px; } .card-from { text-align: left; } }
@media (max-width: 1099px) { .powers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; row-gap: 34px; } }
@media (max-width: 599px) {
  .powers { grid-template-columns: minmax(0, 1fr); row-gap: 26px; margin-top: 10px; }
  .power { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; }
  .power-icon { grid-row: span 2; margin-top: 2px; }
  .power-name { margin-top: 0; font-size: 20px; }
  .power-text { margin-top: 6px; }
}

/* ─────────────── every day: Today's Seam and the week's quests ─────────────── */

.daily { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 6vw, 96px); }
.daily::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 58%, rgba(15, 45, 49, .5) 0%, rgba(20, 25, 54, .26) 46%, rgba(10, 13, 24, 0) 78%); }
.daily-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); max-width: 1120px; margin: 0 auto; align-items: stretch; }
.daily-grid > :nth-child(2) { --d: .12s; }
.today, .quests { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; background: linear-gradient(165deg, #161B38 0%, #0F1329 70%, #0D1024 100%); box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 28px 68px rgba(0, 0, 0, .45); }
.today-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.today-art picture, .today-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.today-art img { object-fit: cover; object-position: 50% 52%; }
.today-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(15, 19, 41, 1) 0%, rgba(15, 19, 41, .55) 26%, rgba(15, 19, 41, 0) 52%), linear-gradient(180deg, rgba(10, 13, 24, .5) 0%, rgba(10, 13, 24, 0) 30%); }
.today-no { position: absolute; z-index: 1; left: 22px; top: 18px; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(10, 13, 24, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(233, 196, 106, .3); }
.today-no span { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.today-no b { font: 400 17px/1 var(--serif); color: var(--parchment); font-variant-numeric: lining-nums; }
.today-title { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font: 400 clamp(24px, .8vw + 18px, 30px)/1.1 var(--serif); }
.today-title span { font: 650 10.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--aether); }
.today-body { padding: 18px 26px 26px; }
.today-label { font: 600 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 235, 221, .6); }
.result { margin-top: 10px; padding: 15px 18px 14px; border-radius: 14px; background: rgba(8, 10, 20, .66); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .3), 0 10px 24px rgba(0, 0, 0, .3); font: 500 clamp(14px, .3vw + 13px, 16px)/1.5 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--parchment); }
.result-line { display: block; }
.result-line > span { white-space: nowrap; }
.result-line b { font-weight: 650; letter-spacing: .14em; }
.result-gems { color: var(--aether); letter-spacing: .06em; text-shadow: 0 0 10px rgba(166, 244, 230, .45); }
.result-stars { color: var(--gold); letter-spacing: .06em; text-shadow: 0 0 10px rgba(233, 196, 106, .45); }
.result-link { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(243, 235, 221, .55); }
.rank { list-style: none; margin: 18px 0 0; padding: 0; }
.rank li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 50px; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid rgba(243, 235, 221, .07); font-size: 14.5px; }
.rank-no { font: 400 15px/1 var(--serif); color: var(--gold); font-variant-numeric: lining-nums; }
.rank-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-stars { font-size: 11.5px; letter-spacing: .08em; color: var(--gold); }
.rank-time { text-align: right; font-variant-numeric: tabular-nums; }
.rank li.is-you { margin-top: 6px; border-radius: 10px; border-bottom-color: transparent; background: rgba(233, 196, 106, .09); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .32); }
.rank li.is-you .rank-who { color: var(--gold-hi); font-weight: 600; }
.today-faster { margin-top: 14px; font: italic 300 16.5px/1.4 var(--serif); color: var(--gold-hi); }

.quests { display: flex; flex-direction: column; padding: 28px 28px 28px; }
.quests::before { content: ''; position: absolute; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 196, 106, .12), rgba(233, 196, 106, 0)); pointer-events: none; }
.quests-eyebrow { font: 600 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.quests-title { margin-top: 12px; font: 400 clamp(24px, .6vw + 19px, 28px)/1.14 var(--serif); text-wrap: balance; }
.quest-list { list-style: none; margin: 18px 0 0; padding: 0; }
.quest { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(243, 235, 221, .08); font-size: 16px; color: var(--muted); }
.quest-tick { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(233, 196, 106, .55); }
.quest.is-done { color: var(--parchment); }
.quest.is-done .quest-tick { background: var(--gold-fill); box-shadow: 0 0 14px rgba(233, 196, 106, .42); }
.quest.is-done .quest-tick::after { content: ''; position: absolute; left: 8.5px; top: 5px; width: 5px; height: 10px; border: solid #1A1305; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.quest .quest-name { flex: 1 1 auto; min-width: 0; }
.frame-mini { position: relative; flex: none; width: 42px; aspect-ratio: 2 / 3; padding: 3px; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.frame-mini picture, .frame-mini img { display: block; width: 100%; height: 100%; }
.frame-mini img { object-fit: cover; border-radius: 5px; }
.frame-mini::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 8px; translate: -50% 0; transform: rotate(45deg); border-radius: 2px; background: inherit; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.f-blue { background: linear-gradient(135deg, #DCEBFF 0%, #6F9BE6 22%, #1F3B7A 46%, #A9C9FF 64%, #2C4F9A 84%, #DCEBFF 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, .5), 0 0 18px rgba(111, 155, 230, .38); }
.f-night { background: linear-gradient(135deg, #EDE6FF 0%, #7A6AD1 22%, #1E1850 46%, #C2B6FA 64%, #2E2670 84%, #EDE6FF 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, .5), 0 0 18px rgba(122, 106, 209, .38); }
.f-ember { background: linear-gradient(135deg, #FFE6CC 0%, #E58A4E 22%, #7C3616 46%, #F8B985 64%, #93441F 84%, #FFE6CC 100%); }
.frame-mini.is-locked { filter: grayscale(.85) brightness(.42); }
.quests-note { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.rare { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; padding-top: 22px; }
.rare picture { position: relative; display: block; flex: 1 1 0px; min-height: 170px; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 209, 153, .35), 0 16px 34px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 209, 153, .12); }
.rare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.rare-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 30px 18px 15px; border-radius: 0 0 16px 16px; background: linear-gradient(0deg, rgba(14, 10, 6, .9) 0%, rgba(14, 10, 6, .55) 60%, rgba(14, 10, 6, 0) 100%); font: 400 clamp(17px, .3vw + 15px, 19px)/1.3 var(--serif); color: var(--parchment); }
.rare-tag { display: inline-flex; align-items: center; gap: 7px; font: 650 9.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #FFD199; }
.rare-tag svg { color: #FFD199; filter: drop-shadow(0 0 4px rgba(255, 209, 153, .9)); }

@media (max-width: 899px) {
  .daily-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .rare picture { flex: none; min-height: 0; aspect-ratio: 16 / 6; }
  .rare { flex: none; }
}
@media (max-width: 599px) {
  .today-body { padding: 16px 18px 22px; }
  .today-no { left: 14px; top: 14px; }
  .today-title { left: 18px; right: 18px; }
  .rank li { grid-template-columns: 26px minmax(0, 1fr) auto 44px; gap: 8px; padding: 8px 6px; font-size: 14px; }
  .quests { padding: 24px 20px 24px; }
  .result { padding: 13px 14px 12px; }
}
@media (max-width: 389px) { .result { font-size: 13px; letter-spacing: 0; } .result-line b { letter-spacing: .08em; } }

/* ─────────────── share it: the reel, and the dare ─────────────── */

.sharing { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 130px) 0 clamp(56px, 6vw, 96px); overflow: clip; }
.sharing::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 44% 54% at 34% 52%, rgba(233, 196, 106, .1) 0%, rgba(15, 45, 49, .3) 42%, rgba(10, 13, 24, 0) 76%); }
.sharing-inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 540px); grid-template-areas: 'reel head' 'reel dare'; grid-template-rows: auto 1fr; justify-content: center; column-gap: clamp(48px, 7vw, 120px); row-gap: 30px; }
.sharing-head { grid-area: head; align-self: end; }
.sharing-head .sec-title { margin-top: 18px; }
.sharing-head .sec-lede { margin-left: 0; }
.reel { grid-area: reel; display: flex; flex-direction: column; align-items: center; margin: 0; align-self: center; }
.dare { grid-area: dare; align-self: start; }
.reel-phone {
  position: relative; width: min(300px, 66vw); aspect-ratio: 9 / 16; padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #2C3149 0%, #0C0F1C 32%, #1A1F33 62%, #090B15 100%);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .34), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 4px rgba(0, 0, 0, .5), 0 54px 110px rgba(0, 0, 0, .65), 0 0 90px rgba(233, 196, 106, .14);
}
.reel-phone::before { content: ''; position: absolute; z-index: 3; left: 50%; top: 19px; width: 25%; height: 18px; translate: -50% 0; border-radius: 10px; background: #04050A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.reel-screen { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 37px; background: #05060C; }
.reel-poster, .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-poster img { width: 100%; height: 100%; object-fit: cover; }
.reel-video { display: block; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); }
.reel.is-rolling .reel-video { opacity: 1; }
.reel-screen::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 26%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.reel-toggle {
  position: absolute; z-index: 4; right: 20px; bottom: 20px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--gold-hi); background: rgba(10, 13, 24, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .55), 0 8px 20px rgba(0, 0, 0, .45); transition: transform .3s var(--spring), opacity .3s;
}
.reel-toggle[hidden] { display: none; }
.reel-toggle:hover { transform: scale(1.07); }
.reel-toggle:focus-visible { outline: 2px solid var(--aether); outline-offset: 3px; border-radius: 50%; }
.reel-play { display: none; }
.reel-toggle[data-state='paused'] .reel-play { display: block; }
.reel-toggle[data-state='paused'] .reel-pause { display: none; }
.reel-cap { margin-top: 22px; font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .66); text-align: center; }
.formats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.formats li { padding: 9px 14px 8px; border-radius: 999px; font: 600 10.5px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .42); }
.dare { position: relative; padding: 26px 28px 24px; border-radius: 22px; background: linear-gradient(165deg, rgba(23, 28, 58, .9), rgba(14, 18, 40, .9)); box-shadow: 0 0 0 1px rgba(243, 235, 221, .1), 0 26px 60px rgba(0, 0, 0, .4); }
.dare::before { content: ''; position: absolute; left: 28px; top: 0; width: 64px; height: 1px; background: linear-gradient(90deg, rgba(233, 196, 106, 0), var(--gold), rgba(233, 196, 106, 0)); }
.dare-q { font: italic 300 clamp(22px, .9vw + 16px, 28px)/1.24 var(--serif); color: var(--parchment); text-wrap: balance; }
.dare-text { margin-top: 10px; font-size: 15.5px; line-height: 1.58; color: var(--muted); text-wrap: pretty; }
.dare-news { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: rgba(243, 235, 221, .86); background: rgba(8, 10, 20, .75); box-shadow: 0 0 0 1px rgba(166, 244, 230, .26), 0 12px 30px rgba(0, 0, 0, .35); }
.dare-news b { font-weight: 650; color: var(--parchment); font-variant-numeric: tabular-nums; }
.dare-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aether); box-shadow: 0 0 10px var(--aether); }
.sharing.is-live .dare-dot { animation: breathe 3.2s ease-in-out infinite; }

@media (max-width: 899px) {
  .sharing-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'reel' 'dare'; max-width: 560px; margin: 0 auto; row-gap: 40px; }
  .sharing-head { text-align: center; }
  .sharing-head .sec-lede { margin-left: auto; }
  .formats { justify-content: center; }
}
@media (max-width: 599px) {
  .reel-phone { border-radius: 40px; padding: 8px; }
  .reel-screen { border-radius: 32px; }
  .dare { padding: 22px 20px 20px; }
}

/* ─────────────── 1.1, calm: with reduced motion every loop rests on its readable frame ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .mend-grid, .mend-hole, .seal-mend .mend-piece { animation: none !important; opacity: 0 !important; }
  .seal-mend .mend-say > span:first-child { opacity: 0 !important; animation: none !important; }
  .seal-mend .mend-say > span:last-child { opacity: 1 !important; animation: none !important; }
  .riddle-ring, .riddle-right { animation: none !important; opacity: 1 !important; transform: none !important; }
  .riddle-ring::after, .where-dim { animation: none !important; opacity: 0 !important; }
  .where-thing { animation: none !important; opacity: 1 !important; transform: translate(var(--dx), var(--dy)) !important; }
  .where-thing::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js .tale:not(.is-current) { transform: none; }
  .plot-disc, .plot-frame, .plot-no { transition: none !important; }
  .plot.is-on .plot-frame::after, .js .map-art.is-done .plot.is-next::before { animation: none !important; }
}

/* ─────────────── reveal on scroll ─────────────── */

.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0); }
.realm-list, .stray-list { --d: .1s; }
.reveal-on [data-reveal] { transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.4s var(--spring) var(--d, 0s); }

/* ─────────────── calm: reduced motion ─────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .motes, .hero-breath, .snap-scan, .snap-sweep, .hero-cue, .rv-motes, .snap-flash, .frame-find .hit::before, .realm::before { display: none; }
  .snap-trace-base { opacity: .8; }
  .reveal-on [data-reveal]:not(.is-in) { transform: none; }
  .js .hero-stage, .js .hero-stage:not(.is-loaded) { opacity: 1; scale: 1.06; }
  .sound[data-state='on'] .sound-bars i::before { animation: none; transform: scaleY(var(--hi)); }   /* playing, held still */
}

/* ─────────────── print: everything visible, nothing fixed ─────────────── */

@media print {
  .bar, .top-tools, .sound, .motes, .hero-breath, .hero-cue, .snap-sweep, .snap-scan, .snap-flash, .rv-motes, .rv-glow, .card-holo { display: none !important; }
  [data-reveal], .js .hero-stage { opacity: 1 !important; transform: none !important; }
}