/* intotheunwritten.com, the game's public site (12 Oct 2026). The game's own look: soot and ash, bone for words, gold
   only as foil, blood red for the one thing that matters. Its fonts are the game's (IM Fell English for the book and the
   boards' titles, EB Garamond to read, Cormorant SC for labels), served from here. No inline styles anywhere: the
   site's CSP allows only this file and the ones beside it. */

@font-face { font-family: "IM Fell English SC"; src: url("/assets/fonts/im-fell-english-sc-400.woff2?v=f0f85c4edd") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/assets/fonts/im-fell-english-400.woff2?v=248300df16") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/assets/fonts/im-fell-english-400-italic.woff2?v=8fc678575e") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-400-600.woff2?v=8860338416") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-400-500-italic.woff2?v=c664773f7e") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("/assets/fonts/cormorant-sc-500.woff2?v=8c674c81ba") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("/assets/fonts/cormorant-sc-600.woff2?v=12e0111fad") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("/assets/fonts/cormorant-sc-700.woff2?v=1948d191eb") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --page: #08080a;
  --soot: #0b0c0e;
  --ash-1: #131417;
  --ash-2: #1b1c20;
  --ash-3: #2a2c31;
  --ash-4: #3b3d43;
  --cinder: #8f9096;
  --bone: #e2dbcd;
  --bone-dim: #b4aea3;
  --blood: #a3352a;
  --blood-deep: #5e1c16;
  --gold: #c9a35b;
  --gold-hi: #ecd594;
  --gold-lo: #8c6a39;
  --brine: #8aa9b4;
  --paper-ink: #2b2925;
  --f-display: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --f-book: "IM Fell English", "EB Garamond", Georgia, serif;
  --f-body: "EB Garamond", Garamond, Georgia, serif;
  --f-label: "Cormorant SC", "EB Garamond", Georgia, serif;
  --gutter: clamp(16px, 4.2vw, 56px);
  --max: 1240px;
  --bar: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.6, 0, .25, 1);
  --foil: linear-gradient(100deg, #8c6a39 0%, #d9b56b 22%, #f3e3ad 38%, #c9a35b 52%, #9a7840 70%, #e2c37f 88%, #a8853f 100%);
}

*, *::before, *::after { box-sizing: border-box; }
/* the root clips what runs out sideways; the body must stay no scroll container (no overflow on it), or every sticky
   part (the storybook's pin, the loop's stage, the board's side) sticks to the body instead of the window */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 12px); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh;
  background: var(--page); color: var(--bone);
  font: 400 1.125rem/1.62 var(--f-body);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gold-hi); text-decoration-color: rgba(236, 213, 148, 0.4); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold-hi); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(201, 163, 91, 0.35); color: #fff6dc; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--soot); border: 1px solid var(--gold); color: var(--gold-hi); font: 600 0.95rem/1 var(--f-label); letter-spacing: 0.14em; transition: top 0.2s; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the veil: the page waits behind the U, then fades in */
.veil { display: none; }
.js .veil {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #050506;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
  animation: veil-late 0.7s ease 3.2s forwards;   /* if the script never comes, the page still shows */
}
.veil svg { width: 74px; fill: none; stroke: var(--gold); stroke-width: 9; stroke-linejoin: round; stroke-dasharray: 3600; stroke-dashoffset: 3600; animation: u-write 2.2s var(--ease-io) infinite; opacity: 0.9; }
.veil.out { opacity: 0; visibility: hidden; }
@keyframes u-write { 0% { stroke-dashoffset: 3600; } 55% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes veil-late { to { opacity: 0; visibility: hidden; } }

/* ---------------------------------------------------------------- type and small parts */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.label {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 600 0.82rem/1.2 var(--f-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.label::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex: none; }
.foil { background: var(--foil); background-size: 220% 100%; background-position: 30% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.foil.glint { animation: foil-glint 9s ease-in-out infinite; }
@keyframes foil-glint { 0%, 55% { background-position: 30% 0; } 80% { background-position: 95% 0; } 100% { background-position: 30% 0; } }
.h2 { font: 400 clamp(2.1rem, 4.6vw, 3.9rem)/1.06 var(--f-display); letter-spacing: 0.01em; margin-bottom: 0.5em; }
.h3 { font: 400 clamp(1.45rem, 2.3vw, 1.95rem)/1.15 var(--f-display); letter-spacing: 0.02em; color: var(--bone); }
.lede { font-size: clamp(1.18rem, 1.6vw, 1.38rem); line-height: 1.6; color: var(--bone); max-width: 38em; }
.copy { max-width: 36em; color: var(--bone-dim); }
.copy strong { color: var(--bone); font-weight: 500; }
.quote { font: italic 400 clamp(1.3rem, 2.4vw, 1.9rem)/1.45 var(--f-book); color: var(--bone); }
.rule { display: flex; align-items: center; gap: 14px; color: var(--gold-lo); }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, currentColor); }
.rule::after { background: linear-gradient(270deg, transparent, currentColor); }
.rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; }

/* buttons: a gold plate with a hairline inside, as the boards frame their titles */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 15px 28px 13px; border: 1px solid rgba(201, 163, 91, 0.6); border-radius: 1px;
  background: linear-gradient(180deg, rgba(201, 163, 91, 0.14), rgba(201, 163, 91, 0.05));
  color: var(--gold-hi); text-decoration: none; font: 600 1.02rem/1 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.btn::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(201, 163, 91, 0.22); pointer-events: none; transition: border-color 0.3s ease; }
.btn:hover { background: linear-gradient(180deg, rgba(201, 163, 91, 0.26), rgba(201, 163, 91, 0.1)); border-color: var(--gold); box-shadow: 0 0 24px rgba(201, 163, 91, 0.18); color: #fff3cf; }
.btn:hover::after { border-color: rgba(236, 213, 148, 0.4); }
.btn.quiet { border-color: rgba(226, 219, 205, 0.18); background: rgba(255, 255, 255, 0.02); color: var(--bone); }
.btn.quiet::after { border-color: rgba(226, 219, 205, 0.07); }
.btn.quiet:hover { border-color: rgba(226, 219, 205, 0.4); color: #fff; box-shadow: none; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn .arrow { font-family: var(--f-body); font-size: 1.1em; letter-spacing: 0; transform: translateY(-1px); }

/* ---------------------------------------------------------------- the top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--bar);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
  border-bottom: 1px solid transparent;
}
.bar.solid { background: rgba(7, 7, 9, 0.84); border-bottom-color: rgba(201, 163, 91, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.u-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(8, 8, 9, 0.7); border: 1px solid rgba(214, 178, 108, 0.42); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.u-btn:hover { border-color: rgba(236, 213, 148, 0.85); box-shadow: 0 0 16px rgba(214, 178, 108, 0.35), 0 6px 16px rgba(0, 0, 0, 0.55); }
.u-btn svg, .u-mark { width: 64%; height: auto; fill: #d9b56b; }
.bar-name { font: 400 1.08rem/1 var(--f-display); letter-spacing: 0.06em; color: var(--bone); text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease, transform 0.5s ease; }
.bar.solid .bar-name, .bar.always .bar-name { opacity: 1; transform: none; }
.bar-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); margin-left: auto; }
.bar-nav a { font: 600 0.84rem/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.bar-nav a:hover, .bar-nav a[aria-current="page"] { color: var(--gold-hi); border-bottom-color: rgba(201, 163, 91, 0.5); }
.bar-nav .btn { min-height: 40px; padding: 11px 18px 9px; font-size: 0.84rem; color: var(--gold-hi); }
.bar-nav .btn::after { inset: 3px; }
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; background: rgba(8, 8, 9, 0.7); border: 1px solid rgba(214, 178, 108, 0.35); color: var(--bone); font: 600 0.84rem/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; }
.menu-toggle i { position: relative; width: 16px; height: 1px; background: currentColor; }
.menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transition: transform 0.3s ease; }
.menu-toggle i::before { top: -5px; } .menu-toggle i::after { top: 5px; }
.menu-toggle[aria-expanded="true"] i { background: transparent; }
.menu-toggle[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
.drawer {
  position: fixed; inset: 0; z-index: 90; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 90px 24px 40px;
  background: rgba(6, 6, 7, 0.97); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.drawer.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.drawer a { font: 400 1.7rem/1.2 var(--f-display); letter-spacing: 0.04em; color: var(--bone); text-decoration: none; }
.drawer a:hover { color: var(--gold-hi); }
.drawer .btn { margin-top: 10px; font-size: 0.95rem; }
@media (max-width: 900px) {
  .bar-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
/* the smallest phones: the name and the menu still fit beside the U (at 360px the menu ran 19px off the screen) */
.bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-block: 0.2em; }
@media (max-width: 400px) {
  .bar { gap: 12px; }
  .bar-name { font-size: 0.94rem; letter-spacing: 0.03em; }
  .menu-toggle { padding: 0 11px; gap: 8px; letter-spacing: 0.16em; }
}

/* ---------------------------------------------------------------- reveal: what comes into view fades up, never pops */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.seen { opacity: 1; transform: none; }
.ink .w { opacity: 0; filter: blur(5px); transition: opacity 0.9s ease var(--d, 0s), filter 1.2s ease var(--d, 0s); }
.ink.on .w { opacity: 1; filter: blur(0); }

/* ---------------------------------------------------------------- the hero: the title screen */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--bar) + 24px) var(--gutter) 120px; overflow: hidden; isolation: isolate; }
.hero-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-glow { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 48% at 50% 44%, rgba(90, 40, 14, 0.2), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.8) 100%); }
.hero-in { width: min(100%, 980px); display: grid; justify-items: center; text-align: center; }
.hero h1 { margin: 0; width: min(620px, 82vw); }
.hero-mark { position: relative; }
.hero-mark img { width: 100%; filter: drop-shadow(0 0 30px rgba(201, 146, 70, 0.18)); }
.hero-mark .shine { position: absolute; inset: 0; -webkit-mask: url("/assets/img/logo-640.webp?v=f64de2452b") center / 100% 100% no-repeat; mask: url("/assets/img/logo-640.webp?v=f64de2452b") center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 40%, rgba(255, 242, 205, 0.7) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 140% 0; mix-blend-mode: screen; animation: shine 7.5s ease-in-out 2.6s infinite; pointer-events: none; }
@keyframes shine { 0% { background-position: 140% 0; } 35%, 100% { background-position: -40% 0; } }
.js .hero-mark { opacity: 0; transform: translateY(6px) scale(0.985); filter: blur(4px); }
.js .ready .hero-mark { opacity: 1; transform: none; filter: none; transition: opacity 2.2s var(--ease) 0.2s, transform 2.4s var(--ease) 0.2s, filter 2.2s ease 0.2s; }
.hook { margin: clamp(26px, 5vh, 46px) 0 0; max-width: 30em; text-wrap: balance; font: italic 400 clamp(1.25rem, 2.3vw, 1.85rem)/1.5 var(--f-book); color: var(--bone); text-shadow: 0 2px 18px #000; }
.hero-sub { margin: 22px 0 0; max-width: 34em; text-wrap: balance; color: var(--bone-dim); font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
.hero-sub strong { font-weight: 500; color: var(--bone); }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.js .hero-sub, .js .hero-act { opacity: 0; transform: translateY(8px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .hero-sub.on, .js .hero-act.on { opacity: 1; transform: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; color: var(--cinder); text-decoration: none; font: 600 0.72rem/1 var(--f-label); letter-spacing: 0.3em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 1px; height: 54px; background: linear-gradient(rgba(201, 163, 91, 0.12), rgba(201, 163, 91, 0.5)); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold-hi); animation: cue 2.6s var(--ease-io) infinite; }
@keyframes cue { to { top: 110%; } }
.sound {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid rgba(226, 219, 205, 0.16); background: rgba(8, 8, 9, 0.55); color: var(--bone-dim);
  font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.3s, border-color 0.3s;
}
.sound:hover { color: var(--bone); border-color: rgba(226, 219, 205, 0.4); }
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.sound .on-w { display: none; }
.sound[aria-pressed="true"] { color: var(--gold-hi); border-color: rgba(201, 163, 91, 0.6); }
.sound[aria-pressed="true"] .on-w { display: inline; }
.sound[aria-pressed="true"] .off-w { display: none; }
.sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound .bars b { width: 2px; height: 3px; background: currentColor; }
.sound[aria-pressed="true"] .bars b { animation: bars 1.1s ease-in-out infinite; }
.sound[aria-pressed="true"] .bars b:nth-child(2) { animation-delay: 0.2s; }
.sound[aria-pressed="true"] .bars b:nth-child(3) { animation-delay: 0.45s; }
@keyframes bars { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.hero .sound { position: absolute; right: var(--gutter); bottom: 26px; }

/* ---------------------------------------------------------------- acts: the long page's sections */
.act { position: relative; padding-block: clamp(80px, 10vw, 150px); isolation: isolate; }
.act + .act { margin-top: 0; }
.act-head { max-width: 46em; margin-bottom: clamp(36px, 5vw, 64px); }
.act-head.center { margin-inline: auto; text-align: center; }
.act-head.center .label { justify-content: center; }
.act-head.center .lede, .act-head.center .copy { margin-inline: auto; }

/* films that melt into the page: no frame; the picture dissolves into the page's black at every edge */
.film { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.film video, .film .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { opacity: 0; transition: opacity 1.4s ease; }
.film video.playing { opacity: 1; }
.film .poster { transition: opacity 1.4s ease; }
.film.live .poster { opacity: 0; }
.film-mask { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 76%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), radial-gradient(ellipse 68% 80% at var(--fx, 60%) 50%, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 76%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), radial-gradient(ellipse 68% 80% at var(--fx, 60%) 50%, #000 50%, transparent 100%); -webkit-mask-composite: source-in, source-in; mask-composite: intersect; }
.film-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.86) 34%, rgba(8, 8, 10, 0.5) 52%, rgba(8, 8, 10, 0) 70%); }
.film-shade.right { background: linear-gradient(270deg, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.72) 30%, rgba(8, 8, 10, 0) 58%); }
.act-film { min-height: min(108vh, 1080px); display: grid; align-items: center; }
.act-film .act-copy { position: relative; max-width: 34em; }
.act-film .act-copy.right { margin-left: auto; }
.film-tools { position: absolute; right: var(--gutter); bottom: clamp(24px, 4vw, 48px); z-index: 2; display: flex; gap: 10px; }
.film-play { display: none; }
.still .film-play { display: inline-flex; }
@media (max-width: 760px) {
  .act-film { min-height: 0; align-items: end; padding-top: 0; }
  .act-film .film { position: relative; inset: auto; width: 100%; height: 62vh; min-height: 340px; margin: 0 0 -16vh; z-index: -1; }
  .film-mask { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .film-shade { display: none; }
  .film-tools { position: static; margin-top: 22px; }
}

/* the three parts of a moon, under the opening film */
.trio { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.trio li { position: relative; padding: 22px 22px 20px; background: linear-gradient(180deg, rgba(19, 20, 23, 0.82), rgba(11, 12, 14, 0.66)); border: 1px solid rgba(201, 163, 91, 0.16); }
.trio li::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201, 163, 91, 0.07); pointer-events: none; }
.trio h3 { font: 400 1.32rem/1.1 var(--f-display); color: var(--gold-hi); margin-bottom: 10px; letter-spacing: 0.03em; }
.trio p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--bone-dim); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the opening: the storybook, read as you scroll */
.book-act { position: relative; padding: 0; }
.book-scroll { position: relative; height: 760vh; }
.book-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.book-pin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 52% at 50% 52%, rgba(70, 40, 18, 0.18), transparent 70%); pointer-events: none; }
.book-intro { position: absolute; top: calc(var(--bar) + 4vh); left: 0; right: 0; text-align: center; transition: opacity 0.8s ease; }
.book-intro .label { justify-content: center; margin-bottom: 0; }
.book { --bw: min(92vw, 1180px, 150vh); position: relative; width: var(--bw); aspect-ratio: 1460 / 705; margin-top: 4vh; }
.book img { max-width: none; user-select: none; -webkit-user-drag: none; }
.book-closed picture, .book-closed img { display: block; width: 100%; height: auto; }
.book-open > picture, .book-open > picture img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.book-closed { position: absolute; left: 15.72%; top: 0; width: 68.57%; transition: opacity 1.2s ease, transform 1.6s var(--ease), filter 1.2s ease; }
.book-closed .shine { position: absolute; inset: 0 0 14.84% 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 190, 0.6) 50%, transparent 58%) no-repeat; background-size: 320% 100%; background-position: 130% 0; mix-blend-mode: overlay; pointer-events: none; }
.book.glint .book-closed .shine { transition: background-position 2.8s cubic-bezier(.45, .05, .35, 1); background-position: -30% 0; }
.book-open { position: absolute; inset: 0; opacity: 0; transform: scale(0.97); transition: opacity 1.2s ease, transform 1.6s var(--ease); }
.book.is-open .book-closed { opacity: 0; transform: scale(1.02); filter: blur(2px); }
.book.is-open .book-open { opacity: 1; transform: none; }
.book-page { position: absolute; top: 0.284%; height: 82.84%; background: url("/assets/img/page-frame.svg?v=cfcaf8195d") center / 100% 100% no-repeat; }
.book-page.l { left: 1.233%; width: 47.123%; }
.book-page.r { left: 51.644%; width: 46.507%; }
.book-spread { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9% 9% 7%; opacity: 0; transition: opacity 0.9s ease; }
.book-spread.on { opacity: 1; }
.book-spread figure { margin: 0; width: 100%; }
.book-spread figure picture { display: block; }
/* the book comes in as its pictures are ready (book.js marks them), never a frame of black and then the cover */
.js .book-closed picture img, .js .book-open > picture img { opacity: 0; transition: opacity 0.9s ease; }
.js .book-closed picture img.ready, .js .book-open > picture img.ready { opacity: 1; }
/* the pictures carry their own loose ink edge in their alpha (assets.mjs): only their opacity moves, once loaded */
.book-spread figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; opacity: 0; transform: scale(0.985); transition: opacity 1.4s ease 0.15s, transform 2.4s var(--ease) 0.15s; }
.book-spread.on figure img.ready { opacity: 1; transform: none; }
.book-line { margin: 0; max-width: 21em; text-align: center; color: var(--paper-ink); font: italic 400 calc(var(--bw) * 0.0205)/1.42 var(--f-book); text-wrap: balance; }
.book-folio { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font: 600 calc(var(--bw) * 0.0098)/1 var(--f-label); letter-spacing: 0.22em; color: rgba(43, 41, 37, 0.62); }
.book-note { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; color: var(--cinder); font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.3em; text-transform: uppercase; transition: opacity 0.6s ease; }
.book-last { position: absolute; left: 50%; top: 50%; width: min(90vw, 760px); transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.book-last.on { opacity: 1; }
.book-act.done .book, .book-act.done .book-intro, .book-act.done .book-note { opacity: 0; transition: opacity 1.2s ease; }
.book-list { list-style: none; margin: 0; padding: 0; }
.js .book-list { display: none; }
/* without the script, or with less motion: the pages one under another */
.book-static { display: grid; gap: 48px; padding: clamp(80px, 12vw, 160px) var(--gutter); }
@media (max-width: 760px) {
  .book { --bw: 94vw; aspect-ratio: 688 / 584; margin-top: 2vh; }
  .book-closed { left: 4%; width: 92%; top: 10%; }
  .book-open > picture { display: none; }
  .book-open { background: url("/assets/img/page-right-688.webp?v=cb8a916628") center / 100% 100% no-repeat; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04); border-radius: 3px; }
  .book-page.l { display: none; }
  .book-page.r { left: 0; width: 100%; top: 0; height: 100%; }
  .book-spread { padding: 11% 10% 12%; justify-content: flex-start; }
  .book-spread.r { justify-content: flex-start; }
  .book-line { font-size: calc(var(--bw) * 0.048); }
  .book-folio { font-size: calc(var(--bw) * 0.024); bottom: 5%; }
}

/* ---------------------------------------------------------------- one moon: the loop */
.loop-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.loop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: step; }
.loop-steps li { counter-increment: step; }
.loop-step { position: relative; width: 100%; display: grid; grid-template-columns: 54px 1fr; gap: 4px 18px; align-items: start; padding: 18px 16px 18px 0; background: none; border: 0; border-top: 1px solid rgba(201, 163, 91, 0.12); text-align: left; color: var(--bone-dim); }
.loop-step:hover { color: var(--bone); }
.loop-step .hex { grid-row: span 2; width: 54px; aspect-ratio: 1 / 0.9; display: grid; place-items: center; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: var(--ash-3); color: var(--bone-dim); font: 400 1.2rem/1 var(--f-display); transition: background 0.4s, color 0.4s; }
.loop-step .hex::before { content: counter(step); }
.loop-step b { font: 400 1.45rem/1.1 var(--f-display); letter-spacing: 0.03em; color: var(--bone); transition: color 0.4s; }
.loop-step span { font-size: 1.02rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.7s var(--ease), opacity 0.6s ease; }
.loop-step[aria-selected="true"] .hex { background: linear-gradient(160deg, #e8cf8e, #a8823f); color: #1a140b; }
.loop-step[aria-selected="true"] b { color: var(--gold-hi); }
.loop-step[aria-selected="true"] span { max-height: 12em; opacity: 1; }
.loop-stage { position: sticky; top: calc(var(--bar) + 4vh); aspect-ratio: 16 / 9; }
.loop-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.loop-shot.on { opacity: 1; }
.loop-shot img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 58%, transparent 100%); }
.loop-shot figcaption { position: absolute; left: 0; right: 0; bottom: -2.4em; text-align: center; font: italic 0.95rem/1.4 var(--f-book); color: var(--cinder); }
@media (max-width: 900px) {
  .loop-wrap { grid-template-columns: 1fr; }
  .loop-stage { position: relative; top: auto; order: -1; margin-bottom: 40px; }
}

/* ---------------------------------------------------------------- built like a board game */
.table-act { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 32, 22, 0.25), transparent 70%); }
.table { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; }
.tbl-board { position: relative; aspect-ratio: 2730 / 2051; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.75)); }
.tbl-board > img { width: 100%; height: 100%; border-radius: 6px; }
.slot { position: absolute; perspective: 1400px; }
.flip { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: 4%; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.flip > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.flip .face { transform: rotateY(180deg); }
.flip.up { transform: rotateY(180deg); }
.flip:disabled { cursor: default; }
.slot.next .flip { animation: next-glow 2.4s ease-in-out infinite; }
@keyframes next-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(236, 213, 148, 0.25), 0 0 12px rgba(236, 213, 148, 0.08); } 50% { box-shadow: 0 0 0 1px rgba(236, 213, 148, 0.9), 0 0 26px rgba(236, 213, 148, 0.35); } }
.lift-veil { position: absolute; inset: 0; z-index: 4; background: rgba(5, 5, 6, 0.62); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; border-radius: 6px; }
.lift-veil.on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.lifted { position: absolute; z-index: 5; perspective: 1600px; pointer-events: none; }
.lifted img { width: 100%; border-radius: 4.5%; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.85); }
.tbl-side { display: grid; gap: 18px; position: sticky; top: calc(var(--bar) + 20px); }
.tray { position: relative; aspect-ratio: 1; width: 100%; padding: 0; border: 0; background: none; border-radius: 6px; }
.tray > img { width: 100%; height: 100%; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.7)); }
.tray-felt { position: absolute; left: 13%; top: 13%; width: 74%; height: 74%; }
.tray-hint { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(236, 213, 148, 0.55); transition: opacity 0.4s; pointer-events: none; }
.tray.cue { animation: tray-glow 2.2s ease-in-out infinite; }
@keyframes tray-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(236, 213, 148, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(236, 213, 148, 0.35)); } }
.dice3 { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.flat-die { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #efe5cd, #c9b98f 70%, #9c8a62); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); color: #2b2117; font: 700 1.6rem/1 var(--f-label); }
.reading { min-height: 168px; padding: 20px 22px; background: linear-gradient(180deg, rgba(232, 222, 199, 0.95), rgba(214, 202, 176, 0.95)); color: var(--paper-ink); border-radius: 2px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); position: relative; }
.reading::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(43, 41, 37, 0.25); pointer-events: none; }
.reading .r-kick { font: 600 0.72rem/1.2 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: #8e2f22; margin: 0 0 6px; }
.reading h3 { font: 400 1.35rem/1.15 var(--f-book); margin: 0 0 10px; color: var(--paper-ink); }
.reading ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 1rem; line-height: 1.35; }
.reading li { display: grid; grid-template-columns: 3.2em 1fr; padding: 2px 6px; border-radius: 2px; transition: background 0.5s ease, color 0.5s ease; }
.reading li b { color: #8e2f22; font-weight: 500; font-variant-numeric: tabular-nums; }
.reading li.hit { background: rgba(142, 47, 34, 0.14); color: #1b1916; }
.reading li.hit b { color: #6e1f16; }
.reading p { margin: 0; font: italic 1rem/1.45 var(--f-book); color: #4a443d; }
.tbl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tbl-actions .btn { flex: 1 1 auto; min-height: 46px; padding: 13px 18px 11px; font-size: 0.86rem; }
@media (max-width: 900px) {
  .table { grid-template-columns: 1fr; }
  .tbl-side { position: static; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .tbl-actions { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .tbl-side { grid-template-columns: 1fr; }
  .tray { width: 58%; justify-self: center; }
}

/* the components, laid out like a rulebook's spread */
.parts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(70px, 9vw, 120px); }
.part { margin: 0; display: grid; align-content: start; gap: 14px; }
.part .pic { position: relative; display: grid; place-items: center; min-height: 100%; }
.part figcaption b { display: block; font: 400 1.2rem/1.15 var(--f-display); color: var(--gold-hi); letter-spacing: 0.03em; margin-bottom: 4px; }
.part figcaption span { display: block; font-size: 0.98rem; line-height: 1.5; color: var(--bone-dim); text-wrap: balance; }
/* every part's caption sits under its own picture (Henrik, 13 Oct 2026): the picture and its caption share one width
   (--pw, the picture's own width where it is narrower than the column) and one left edge, and no line ends alone */
.part { justify-items: center; }
.part > * { width: min(100%, var(--pw, 100%)); }
.part figcaption span { max-width: 46em; }
.part .board-pic.tall img { width: 100%; max-height: none; }
.part:has(.board-pic.tall) { --pw: 373px; }
.part:has(> .tokens) { --pw: 400px; }
.part:has(> .fan) { --cw: clamp(110px, 11.5vw, 160px); --pw: calc(var(--cw) * 3.3); }
.part:has(> .bx) { --pw: min(100%, (100vh - 150px) * 1.5); }
.company span { text-wrap: pretty; }
.part.w4 { grid-column: span 4; } .part.w5 { grid-column: span 5; } .part.w6 { grid-column: span 6; } .part.w7 { grid-column: span 7; } .part.w8 { grid-column: span 8; } .part.w3 { grid-column: span 3; } .part.w12 { grid-column: span 12; }
.fan { position: relative; display: flex; justify-content: center; align-items: flex-end; height: clamp(220px, 24vw, 330px); }
.fan .card { position: absolute; bottom: 0; width: var(--cw, clamp(110px, 11.5vw, 160px)); transform-origin: 50% 120%; transition: transform 0.6s var(--ease); }
.fan .card img { width: 100%; border-radius: 5%; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6); }
.fan .card:nth-child(1) { transform: translateX(-62%) rotate(-12deg); }
.fan .card:nth-child(2) { transform: translateX(-21%) rotate(-4deg); }
.fan .card:nth-child(3) { transform: translateX(21%) rotate(4deg); }
.fan .card:nth-child(4) { transform: translateX(62%) rotate(12deg); }
.fan:hover .card:nth-child(1) { transform: translateX(-84%) rotate(-16deg) translateY(-6px); }
.fan:hover .card:nth-child(2) { transform: translateX(-29%) rotate(-5deg) translateY(-12px); }
.fan:hover .card:nth-child(3) { transform: translateX(29%) rotate(5deg) translateY(-12px); }
.fan:hover .card:nth-child(4) { transform: translateX(84%) rotate(16deg) translateY(-6px); }
.fan.mini .card { width: clamp(96px, 9.5vw, 130px); }
.turn { position: relative; width: 100%; aspect-ratio: var(--ar, 7 / 12); padding: 0; border: 0; background: none; perspective: 1400px; }
.turn .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.turn img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6); }
.turn .face { transform: rotateY(180deg); }
.turn[aria-pressed="true"] .in { transform: rotateY(180deg); }
@media (hover: hover) { .turn:hover .in { transform: rotateY(180deg); } .turn[aria-pressed="true"]:hover .in { transform: rotateY(180deg); } }
.turns { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.turns.mini { --ar: 44 / 68; }
.tokens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.token { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; }
.token img { width: min(100%, 120px); border-radius: 50%; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65); }
.token figcaption { font: 600 0.8rem/1.2 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.board-pic img { width: 100%; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7); }
.board-pic.tall img { max-height: 620px; width: auto; margin-inline: auto; }
.screen-pic img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 80% 82% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 80% 82% at 50% 50%, #000 62%, transparent 100%); }
.dream { margin-top: clamp(50px, 7vw, 90px); text-align: center; }
.dream p { margin: 0 auto; max-width: 34em; font: italic 1.25rem/1.55 var(--f-book); color: var(--bone-dim); }
@media (max-width: 900px) {
  .part.w3, .part.w4, .part.w5 { grid-column: span 6; }
  .part.w6, .part.w7, .part.w8 { grid-column: span 12; }
}
@media (max-width: 560px) {
  .part.w3, .part.w4, .part.w5 { grid-column: span 12; }
  .fan { height: 210px; }
  .part:has(> .fan) { --cw: 104px; }
}

/* ---------------------------------------------------------------- the binder (scripts/binder.mjs, js/binder.js)
   The game's binder cut out (Henrik, 12 Oct 2026): its open leather a picture, its pages the game's own sheets
   (binder-sheet.css), laid out at the picture's own size (1536 x 1024, the stage) and scaled to fit; three spreads,
   and between them two leaves, each a page with a face on either side, turned round the rings in 3D. */
.bx-part { gap: 18px; margin-top: clamp(10px, 2vw, 30px); }
.bx { --bone: #ddd6c9; --bone-dim: #aaa59b; --cinder: #a29d94; --ember: #c79650; --ember-dim: #8c6a39;
  position: relative; width: min(100%, (100vh - 150px) * 1.5); margin-inline: auto; }
.bx-book { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; }
.bx-leather img { width: 100%; height: auto; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.72)); }
.bx-stage { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; scale: tan(atan2(100cqw, 1536px));
  container-type: inline-size; perspective: 2800px; perspective-origin: 767px 490px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* the two pages that never turn (the first spread's left, the last's right), and the leaves, on the picture's pages */
.bx-under, .bx-leaf { position: absolute; top: 88px; width: 611px; height: 805px; }
.bx-under { z-index: 1; }
.bx-under-l { left: 81px; }
.bx-under-r, .bx-leaf { left: 843px; }
.bx-leaf { z-index: 3; transform-origin: -75.5px 50%; transform-style: preserve-3d; will-change: transform; cursor: grab; }
.bx-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bx-front { background: url("/assets/img/binder-leaf-r-611.webp?v=588bc7d4fc") 0 0 / 100% 100% no-repeat; }
.bx-back { background: url("/assets/img/binder-leaf-l-611.webp?v=2aaaf1df74") 0 0 / 100% 100% no-repeat; transform: rotateY(180deg); }
/* a page as the game sets it on the binder: 39.5% of the binder wide, 77.7% high, its padding in the binder's own
   measure (the game: 1.6% 1.8%, the right page 4.5% from the rings) */
.bx-page { position: absolute; left: 0; top: 3px; width: 606px; height: 796px; padding: 24.6px 27.6px; overflow: hidden; color: var(--bone); line-height: 1.3; text-align: left; }
.bx-page.bx-r { padding-left: 69px; }
.bx .card-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 8% / 5.2%; box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.45); }
.bx .tc > .card-img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.bx .sh svg, .bx .sh img { max-width: none; }
.bx img { -webkit-user-drag: none; }
.bx .sh-pen-lines { min-height: calc(4 * 1.7em); white-space: pre-wrap; }
/* the light on a turning page, and its shadow on the page under it */
.bx-dim { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: opacity; }
.bx-front .bx-dim { background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.82)); }
.bx-back .bx-dim { background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.82)); }
.bx-cast { position: absolute; top: 88px; width: 611px; height: 805px; z-index: 8; overflow: hidden; pointer-events: none; }
.bx-cast-l { left: 81px; } .bx-cast-r { left: 843px; }
.bx-cast > i { position: absolute; top: 0; bottom: 0; width: 260px; opacity: 0; will-change: transform, opacity; }
.bx-cast-r > i { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28) 30%, transparent); }
.bx-cast-l > i { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28) 30%, transparent); }
.bx-leaf.moving { cursor: grabbing; }
/* the index tabs, written on the picture's own leather tabs */
.bx-tabs { position: absolute; left: 1484px; top: 115px; z-index: 30; display: grid; grid-template-rows: repeat(3, 135px); gap: 2px; width: 34px; }
.bx-tabs button { writing-mode: vertical-rl; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 0 6px 6px 0;
  font: 600 13px/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(162, 157, 148, 0.85); transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.bx-tabs button:hover { color: var(--bone); }
.bx-tabs button[aria-selected="true"] { color: #f0e3c4; background: linear-gradient(90deg, rgba(199, 150, 80, 0.06), rgba(199, 150, 80, 0.16)); box-shadow: inset -2px 0 0 rgba(199, 150, 80, 0.55); }
.bx-tabs button:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
/* the tabs again, under the binder, where the binder is small */
.bx-pick { display: none; justify-content: center; gap: 8px; margin-top: 14px; }
.bx-pick button { min-width: 6.5em; padding: 9px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(226, 219, 205, 0.18); color: var(--bone-dim);
  font: 600 0.82rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; }
.bx-pick button[aria-current="true"] { color: var(--gold-hi); border-color: rgba(201, 163, 91, 0.6); }
.bx.fading .bx-stage > :is(.bx-under, .bx-leaf) { opacity: 0; }
.bx-stage > :is(.bx-under, .bx-leaf) { transition: opacity 0.22s ease; }
@media (max-width: 900px) { .bx-pick { display: flex; } }
@media (max-width: 760px) {
  .bx { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  /* the ink's wear and the pen's unevenness are too fine to see on a phone, and each costs a filter to draw */
  .bx .sh *, .bx .sh *::before, .bx .sh *::after { filter: none !important; }
}

/* ---------------------------------------------------------------- the Lily Mere and the Kneeling Knight */
.knight-act .act-copy { max-width: 31em; }
.phases { list-style: none; margin: clamp(60px, 8vw, 110px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); counter-reset: ph; }
.phase { counter-increment: ph; margin: 0; }
.phase .pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.phase .pic picture { display: block; height: 100%; }
.phase .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1s ease; filter: saturate(0.92) brightness(0.86); -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.phase:hover .pic img { transform: scale(1.04); filter: none; }
.phase h3 { display: flex; align-items: baseline; gap: 12px; margin: -26px 0 8px; position: relative; font: 400 1.5rem/1.1 var(--f-display); color: var(--bone); }
.phase h3::before { content: counter(ph, upper-roman); font: 600 0.82rem/1 var(--f-label); letter-spacing: 0.2em; color: var(--gold); }
.phase p { margin: 0; color: var(--bone-dim); font-size: 1.02rem; line-height: 1.55; }
.arena { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(80px, 10vw, 140px); }
.arena-pic { position: relative; aspect-ratio: 1536 / 1024; }
.arena-pic > img { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 55%, transparent 100%); }
.arena-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-pic .hx { fill: rgba(236, 213, 148, 0); stroke: rgba(236, 213, 148, 0.24); stroke-width: 1; transition: fill 0.35s ease, stroke 0.35s ease; }
.arena-pic .hx.zone { fill: rgba(163, 53, 42, 0.32); stroke: rgba(230, 120, 96, 0.7); }
.arena-pic .hx.lit { fill: rgba(236, 213, 148, 0.16); stroke: rgba(236, 213, 148, 0.75); }
.arena-pic image { pointer-events: none; }
.quests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); margin-top: clamp(80px, 10vw, 130px); }
.quest { margin: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: center; }
.quest img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 50%, transparent 100%); }
.quest blockquote { margin: 0; font: italic 1.12rem/1.55 var(--f-book); color: var(--bone); }
.quest figcaption { margin-top: 10px; font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cinder); }
@media (max-width: 900px) {
  .phases { grid-template-columns: 1fr; gap: 40px; }
  .phase .pic { aspect-ratio: 3 / 4; max-width: 520px; }
  .arena { grid-template-columns: 1fr; }
  .quests { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .quest { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the land: the Lily Mere open, the rest rumours */
.land-act { padding-bottom: clamp(60px, 8vw, 110px); }
.land { position: relative; margin-inline: auto; width: min(100%, 1680px); }
.land-scroll { position: relative; overflow: hidden; }
.land-map { position: relative; aspect-ratio: 1672 / 941; }
.land-map > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.land-map > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.land-edge { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--page) 0%, transparent 12%, transparent 86%, var(--page) 100%), linear-gradient(90deg, var(--page) 0%, transparent 7%, transparent 93%, var(--page) 100%); }
.spot { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 6px; background: none; border: 0; color: var(--bone); }
.spot .seal { position: relative; width: 24px; height: 24px; border: 1.5px solid rgba(221, 214, 201, 0.75); background: rgba(11, 12, 14, 0.78); transform: rotate(45deg); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.spot .seal span { transform: rotate(-45deg); font: 600 0.75rem/1 var(--f-label); color: var(--bone-dim); }
.spot .name { padding: 4px 10px 3px; background: rgba(11, 12, 14, 0.8); border: 1px solid var(--ash-3); font: 600 0.72rem/1.2 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.spot.open .seal { background: var(--gold); border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(236, 213, 148, 0.55); }
.spot.home .seal { background: radial-gradient(circle, #ffcf87, #c46d2a); border-color: #ffdca0; box-shadow: 0 0 16px rgba(255, 170, 90, 0.6); }
.spot.gate .seal { border-color: rgba(205, 80, 60, 0.9); background: rgba(70, 14, 10, 0.85); }
.spot:hover .seal, .spot[aria-expanded="true"] .seal { border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(236, 213, 148, 0.5); }
.spot.rumour .name { color: var(--bone-dim); }
.place-card { position: absolute; z-index: 5; width: min(340px, 86vw); padding: 0; background: rgba(9, 9, 11, 0.95); border: 1px solid rgba(201, 163, 91, 0.3); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
.place-card.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease; }
.place-card .pc-pic { position: relative; aspect-ratio: 700 / 388; overflow: hidden; background: #0d0d0f; }
.place-card .pc-pic img { width: 100%; height: 100%; object-fit: cover; }
.place-card .pc-pic.blur img { filter: blur(3px) brightness(0.8); transform: scale(1.06); }
.place-card .pc-body { padding: 16px 18px 18px; }
.place-card .pc-kick { margin: 0 0 4px; font: 600 0.72rem/1.2 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.place-card .pc-kick.red { color: #d0604a; }
.place-card h3 { margin: 0 0 8px; font: 400 1.4rem/1.1 var(--f-display); }
.place-card p { margin: 0; font: italic 1.05rem/1.5 var(--f-book); color: var(--bone-dim); }
.place-card .pc-close { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; border: 1px solid rgba(226, 219, 205, 0.2); background: rgba(8, 8, 9, 0.7); color: var(--bone); font: 1.1rem/1 var(--f-body); }
.land-list { display: none; }
@media (max-width: 760px) {
  .land-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .land-scroll::-webkit-scrollbar { display: none; }
  .land-map { width: 230vw; }
  .spot .name { display: none; }
  .place-card { position: fixed; left: 50%; bottom: 16px; top: auto !important; transform: translate(-50%, 8px); width: calc(100vw - 32px); max-width: 420px; }
  .place-card.on { transform: translate(-50%, 0); }
  .land-hint { display: block; }
}
.land-hint { display: none; margin: 14px 0 0; text-align: center; font: 600 0.72rem/1 var(--f-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--cinder); }

/* ---------------------------------------------------------------- the sanctum grows */
.sanctum-view { position: relative; aspect-ratio: 1672 / 941; width: min(100%, 1500px); margin-inline: auto; }
.sanctum-view .stage { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.sanctum-view .stage.on { opacity: 1; }
.sanctum-view .stage img { width: 100%; height: 100%; }
.sanctum-view .mask-edge { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 72% 78% at 50% 50%, transparent 60%, var(--page) 100%), linear-gradient(to bottom, var(--page), transparent 12%, transparent 86%, var(--page)), linear-gradient(90deg, var(--page), transparent 10%, transparent 90%, var(--page)); }
.sanctum-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; padding: 0; list-style: none; }
.stages button { min-height: 42px; padding: 10px 16px 8px; background: rgba(19, 20, 23, 0.8); border: 1px solid var(--ash-3); color: var(--bone-dim); font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.stages button:hover { color: var(--bone); border-color: var(--ash-4); }
.stages button[aria-pressed="true"] { color: #1b150c; background: linear-gradient(160deg, #e8cf8e, #a8823f); border-color: var(--gold-hi); }
.stage-note { margin: 18px auto 0; max-width: 40em; text-align: center; font: italic 1.12rem/1.5 var(--f-book); color: var(--bone-dim); min-height: 3em; text-wrap: balance; }
.companies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(60px, 8vw, 100px); }
.company { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.company img { width: 64px; border-radius: 50%; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6); }
.company b { display: block; font: 400 1.2rem/1.15 var(--f-display); color: var(--bone); }
.company span { font-size: 0.98rem; color: var(--bone-dim); }
@media (max-width: 900px) { .companies { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the Kickstarter */
.ks-act { overflow: hidden; }
.ks-act .ks-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.ks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.ks-book { position: relative; }
.ks-book img { width: 100%; filter: drop-shadow(0 50px 70px rgba(0, 0, 0, 0.85)); }
.ks-book .shine { position: absolute; inset: 0 0 14.84% 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 190, 0.55) 50%, transparent 58%) no-repeat; background-size: 320% 100%; background-position: 130% 0; mix-blend-mode: overlay; animation: book-shine 8s ease-in-out 1s infinite; pointer-events: none; }
@keyframes book-shine { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
.when { display: flex; width: fit-content; align-items: baseline; gap: 14px; margin: 0 0 26px; padding: 10px 16px 8px; border-top: 1px solid rgba(201, 163, 91, 0.35); border-bottom: 1px solid rgba(201, 163, 91, 0.35); font: 600 0.92rem/1 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.when i { width: 6px; height: 6px; background: var(--blood); transform: rotate(45deg); }
.ks-go { margin: 30px 0 0; }
.signup { margin-top: 28px; }
.signup .row { display: flex; gap: 10px; flex-wrap: wrap; }
.field { flex: 1 1 260px; min-height: 54px; padding: 14px 16px 12px; background: rgba(5, 5, 6, 0.75); border: 1px solid rgba(201, 163, 91, 0.35); border-radius: 1px; color: var(--bone); font: 400 1.08rem/1.3 var(--f-body); transition: border-color 0.25s, box-shadow 0.25s; }
.field::placeholder { color: #7d7e84; }
.field:focus { outline: none; border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(236, 213, 148, 0.18); }
textarea.field { min-height: 190px; resize: vertical; line-height: 1.5; }
select.field { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select.field option { background: #111; color: var(--bone); }
.trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 14px 0 0; font-size: 0.98rem; color: var(--bone-dim); min-height: 1.5em; }
.form-note.ok { color: #cfe0b8; }
.form-note.err { color: #f0a08f; }
.fine { margin: 14px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--cinder); }
.fine a { color: var(--bone-dim); }
@media (max-width: 900px) { .ks { grid-template-columns: 1fr; } .ks-book { max-width: 520px; margin-inline: auto; } }

/* ---------------------------------------------------------------- follow, and the foot */
.follow { text-align: center; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.socials a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(226, 219, 205, 0.14); background: rgba(255, 255, 255, 0.02); color: var(--bone-dim); text-decoration: none; font: 600 0.82rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.25s, border-color 0.25s; }
.socials a:hover { color: var(--gold-hi); border-color: rgba(201, 163, 91, 0.55); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.foot { position: relative; padding: clamp(60px, 8vw, 90px) 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(201, 163, 91, 0.12); background: linear-gradient(180deg, rgba(14, 14, 17, 0.6), var(--page)); }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: end; }
.foot-mark { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.foot-mark img { width: 220px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; justify-content: flex-end; }
.foot-links a { color: var(--bone-dim); text-decoration: none; font: 600 0.82rem/1 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 0; display: inline-block; }
.foot-links a:hover { color: var(--gold-hi); }
.foot-small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(226, 219, 205, 0.06); font-size: 0.9rem; color: #77787e; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } .foot-mark img { width: 180px; } }

/* ---------------------------------------------------------------- inner pages: account, contact, privacy, terms */
.page-head { padding: calc(var(--bar) + clamp(60px, 9vw, 120px)) 0 clamp(30px, 4vw, 50px); position: relative; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(70, 40, 18, 0.22), transparent 70%); }
.page-head .h2 { margin-bottom: 0.35em; }
.folio { position: relative; padding: clamp(26px, 4vw, 48px); background: linear-gradient(180deg, rgba(20, 21, 24, 0.92), rgba(12, 13, 15, 0.92)); border: 1px solid rgba(201, 163, 91, 0.2); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); }
.folio::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 163, 91, 0.08); pointer-events: none; }
.folio + .folio { margin-top: 26px; }
.narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.stack { display: grid; gap: 18px; }
.stack label { display: grid; gap: 8px; font: 600 0.8rem/1.2 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); }
.code-in { letter-spacing: 0.5em; font: 400 1.6rem/1 var(--f-book); text-align: center; }
.acct-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.acct-grid dt { font: 600 0.8rem/1.9 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cinder); }
.acct-grid dd { margin: 0; color: var(--bone); word-break: break-word; }
.owned { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.owned li { padding: 10px 14px; border: 1px solid var(--ash-3); background: rgba(255, 255, 255, 0.02); }
.owned li.none { color: var(--cinder); font-style: italic; border-style: dashed; }
.prose { color: var(--bone-dim); }
.prose h2 { font: 400 1.6rem/1.2 var(--f-display); color: var(--bone); margin: 2em 0 0.6em; letter-spacing: 0.02em; }
.prose h3 { font: 600 0.9rem/1.3 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 1.6em 0 0.5em; }
.prose p, .prose li { color: var(--bone-dim); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose strong { color: var(--bone); font-weight: 500; }
.updated { font: 600 0.78rem/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cinder); }
/* a legal page still waiting on the company's details (the audit of 12 Oct 2026): the draft says so, and what is missing
   is marked where it goes */
.draft { margin: 1.2em 0 0; padding: 12px 16px; border: 1px dashed rgba(199, 150, 80, 0.55); background: rgba(199, 150, 80, 0.07); color: var(--bone); font-size: 1rem; line-height: 1.5; }
.draft b { color: var(--gold-hi); font-weight: 600; }
.tbd { padding: 0 4px; border: 1px dashed rgba(199, 150, 80, 0.6); color: var(--gold-hi); font-style: italic; white-space: nowrap; }
.message-page { min-height: 100vh; display: grid; align-items: center; padding: calc(var(--bar) + 40px) 0 60px; }
.message-page .folio { text-align: center; }
.message-page .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.message-page form { display: inline; }

/* ---------------------------------------------------------------- less motion: everything still, nothing missing */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .ink .w { opacity: 1; filter: none; }
  .js .hero-mark, .js .hero-sub, .js .hero-act { opacity: 1; transform: none; filter: none; }
  .hero-mark .shine, .scroll-cue i::after { display: none; }
}

/* ---------------------------------------------------------------- the storybook's small parts */
.locked { overflow: hidden; }
.book-intro.gone { opacity: 0; }
.book-spread .sm-only { display: none; }
@media (max-width: 760px) {
  .book-spread.r .sm-only { display: block; width: 100%; margin-bottom: 6%; }
  .book-spread.r .sm-only img { aspect-ratio: 3 / 2; }
}
.book-act.static .book-scroll { display: none; }
.book-act.static .book-list { display: grid; gap: clamp(28px, 5vw, 60px); width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding-block: clamp(80px, 12vw, 160px); }
.book-act.static .book-list li { padding: 8% 9%; background: url("/assets/img/page-right-688.webp?v=cb8a916628") center / 100% 100% no-repeat; color: var(--paper-ink); text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.book-act.static .book-list figure { margin: 0 0 6%; }
.book-act.static .book-list picture { display: block; }
.book-act.static .book-list img { width: 100%; }
.book-act.static .book-list p { margin: 0; font: italic 1.3rem/1.45 var(--f-book); }
.no-js .book-scroll { display: none; }
.no-js .book-list { display: grid; gap: 28px; width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding-block: 100px; text-align: center; font: italic 1.3rem/1.5 var(--f-book); }
.slot.pile .pile-card { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.slots { position: absolute; inset: 0; }
.arena-pic .hx.water { fill: rgba(138, 169, 180, 0.3); stroke: rgba(170, 205, 218, 0.75); }
.arena-pic .hx.land { fill: rgba(236, 213, 148, 0.25); stroke: var(--gold-hi); }
.arena-pic .hx:hover { fill: rgba(236, 213, 148, 0.12); stroke: rgba(236, 213, 148, 0.6); }
/* the pieces as the game draws them (the big bodies, 14 Oct 2026; showdown.css .tk and .tk-guard): an outer group set
   where the piece stands, glided there; an inner one that scales round its middle (Falling Star) */
.arena-pic .tk { transition: transform 0.9s cubic-bezier(.5, -0.2, .3, 1.2); transform-box: view-box; transform-origin: 0 0; }
.arena-pic .tk.set { transition: none; }
.arena-pic .tk-in { transform-box: view-box; transform-origin: 0 0; }
.arena-pic .tk-pick { fill: none; stroke: var(--gold-hi); stroke-width: 0; opacity: 0; transition: opacity 0.12s ease, stroke-width 0.12s ease; }
.arena-pic .tk.pick .tk-pick { opacity: 1; stroke-width: 5; }
.arena-pic .g-body { fill: rgba(16, 14, 12, 0.35); stroke: rgba(242, 234, 216, 0.5); stroke-width: 1.2; stroke-dasharray: 3 2; }
.arena-pic .g-divider { stroke: #d0392b; stroke-linecap: round; opacity: 0.9; }
.arena-pic .g-band { fill: none; stroke: #d0392b; stroke-linecap: butt; }
.arena-pic .g-name { fill: #fff6ea; font-family: var(--f-book, Georgia, serif); font-variant: small-caps; letter-spacing: 0.06em; text-anchor: middle; dominant-baseline: central; }
.arena-pic .g-arrow { fill: #111; stroke: #f2ead8; stroke-width: 1.2; }
.arena-pic .fx { pointer-events: none; }
.arena-pic .tk-say { font: 600 24px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; fill: var(--gold-hi); stroke: rgba(8, 8, 10, 0.85); stroke-width: 6px; paint-order: stroke; pointer-events: none; transform-box: fill-box; }
.arena .tbl-actions .sound { align-self: center; }

.land-map > canvas { z-index: 1; }
.sanctum-view canvas { z-index: 1; }
.follow { padding-top: clamp(40px, 5vw, 70px); }
/* the loop's picture bleeds out to the right of the column on a wide screen */
@media (min-width: 1500px) { .loop-stage { margin-right: -120px; } }
/* a storybook page for the quests: the picture printed on the paper, the words under it */
.quest { grid-template-columns: 1fr; }
.quest .paper { position: relative; padding: 9% 10% 10%; background: url("/assets/img/page-right-688.webp?v=cb8a916628") center / 100% 100% no-repeat; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); color: var(--paper-ink); text-align: center; }
.quest .paper::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/page-frame.svg?v=cfcaf8195d") center / 100% 100% no-repeat; pointer-events: none; }
.quest .paper img { width: 86%; margin: 0 auto 4%; mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none; }
.quest .paper blockquote { color: var(--paper-ink); font-size: clamp(1.02rem, 1.3vw, 1.18rem); text-wrap: balance; }
.quest .quest-card { width: min(78%, 360px); margin: 0 auto; }
.quest figcaption { text-align: center; }
.parts { align-items: center; }

/* the road film behind the board's opening words, melting off to the right */
.table-film { inset: 0 0 auto auto; width: min(60%, 1120px); height: min(84vh, 780px); --fx: 62%; }
.table-shade { inset: 0 0 auto 0; height: min(84vh, 780px); }
.table-act .act-head { position: relative; min-height: min(56vh, 520px); }
.table-act .act-head .copy, .table-act .act-head .lede { max-width: 30em; }
.table-act .act-head::before { content: ""; position: absolute; inset: -40px max(-60px, -1 * var(--gutter)) -40px -200px; z-index: -1; background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(8, 8, 10, 0.85), transparent 75%); pointer-events: none; }
@media (max-width: 760px) {
  .table-film { position: relative; inset: auto; width: 100%; height: 50vh; min-height: 300px; margin: calc(-1 * clamp(80px, 10vw, 150px)) 0 -12vh; }
  .table-act .act-head { min-height: 0; }
  .table-act .act-head::before { inset: -40px calc(-1 * var(--gutter)); }
}

/* parallax: the drifting things get room to move, and lean on the GPU */
[data-drift] { will-change: transform; }
.phase .pic img[data-drift] { height: 112%; margin-top: -6%; }
.ks-book [data-drift] { position: relative; }
/* the inner pages leave room before the foot */
body.inner main { padding-bottom: clamp(70px, 9vw, 130px); }
body.inner main.message-page { padding-bottom: 60px; }
/* the open place on the land breathes, so it is clear where to begin */
.spot.open .seal { animation: open-glow 2.8s ease-in-out infinite; }
@keyframes open-glow { 0%, 100% { box-shadow: 0 0 10px rgba(236, 213, 148, 0.35); } 50% { box-shadow: 0 0 26px rgba(236, 213, 148, 0.8); } }
.loop-shot.contain img { object-fit: contain; }
#shot-return img { -webkit-mask-image: none; mask-image: none; }