/* Hearthfarer site. Ink-green night that warms to dawn as you walk down the page. */
@font-face { font-family: "Cinzel"; src: url("assets/fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("assets/fonts/Spectral-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("assets/fonts/Spectral-Italic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("assets/fonts/Spectral-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ink: #0b120e;
  --ink-2: #111c16;
  --moss: #1a2b21;
  --line: rgba(233, 180, 76, .28);
  --gold: #e9b44c;
  --gold-hi: #ffe2a0;
  --gold-lo: #9a6a1c;
  --ember: #ff8a3d;
  --parch: #efe3c4;
  --parch-dim: #b9ae90;
  --text: #d9d2bd;
  --mx: 50vw; --my: 40vh;          /* where the light is (Wick) */
  --dawn: 0;                        /* 0 night .. 1 dawn, set from scroll */
  --march: #8fa3b8; --march-deep: #1a222b;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 500 clamp(17px, 1.05vw + 13px, 20px)/1.6 var(--body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--parch); margin: 0; line-height: 1.12; letter-spacing: .02em; }
h2 { font-size: clamp(30px, 4.2vw, 60px); text-wrap: balance; }
p { margin: 0 0 1em; }
::selection { background: var(--gold); color: var(--ink); }

/* grain over everything, so flat colour never looks like a template */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

.chapter {
  font-family: var(--display); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
}
.chapter::before, .chapter::after { content: ""; height: 1px; width: 46px; background: linear-gradient(90deg, transparent, var(--gold)); }
.chapter::after { transform: scaleX(-1); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
  font: 700 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 18px 30px; border: 1px solid var(--line); color: var(--parch); background: rgba(11,18,14,.55);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition: transform .25s, filter .25s, background .25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.btn.gold {
  color: #2a1a04; border: 0; padding: 20px 36px;
  background: linear-gradient(180deg, #fff0c2 0%, #f3c661 22%, #d99a2b 62%, #a66d17 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  filter: drop-shadow(0 10px 26px rgba(233,150,40,.35));
  position: relative; overflow: hidden;
}
.btn.gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); }
.btn.gold:hover::after { transform: translateX(120%); transition: transform .8s; }
.btn.small { padding: 12px 22px; font-size: 12px; }
.btn.wide { width: 100%; }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 44px) 14px;
  transition: background .5s, transform .5s; transform: translateY(-110%);
}
.top.show { transform: none; background: linear-gradient(180deg, rgba(11,18,14,.92), rgba(11,18,14,0)); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--parch); }
.mark svg { width: 20px; height: 20px; color: var(--gold); }

/* ---------- quest rail ---------- */
.rail { position: fixed; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; gap: 22px; }
.rail { opacity: 0; pointer-events: none; transition: opacity .6s; }
.rail.show { opacity: 1; pointer-events: auto; }
.rail::before { content: ""; position: absolute; right: 8px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--line), transparent 90%); }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; text-decoration: none; }
.rail em { order: -1; font: 700 11px var(--display); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--parch); opacity: 0; transform: translateX(8px); transition: .3s; white-space: nowrap; text-shadow: 0 1px 8px #000; }
.rail a:hover em, .rail a.here em { opacity: 1; transform: none; }
.lantern { width: 17px; height: 17px; transform: rotate(45deg); border: 1px solid var(--gold-lo); background: var(--ink); transition: .6s; position: relative; z-index: 1; }
.lantern.king { width: 21px; height: 21px; margin-right: -2px; }
.rail a.lit .lantern { background: radial-gradient(circle, #fff3c9, var(--gold) 55%, var(--ember)); border-color: var(--gold-hi); box-shadow: 0 0 18px 4px rgba(255,170,60,.65); }
@media (max-width: 760px) { .rail { display: none; } }

/* ---------- Wick, the coal-spirit that carries the light ---------- */
#wick, .wick-big { --s: 26px; position: fixed; left: 0; top: 0; width: var(--s); height: var(--s); pointer-events: none; z-index: 55; will-change: transform; }
#wick { opacity: 0; transition: opacity .8s; }
#wick.awake { opacity: 1; }
.glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,180,80,.22), rgba(255,140,50,.08) 35%, transparent 65%); mix-blend-mode: screen; }
.body { position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 62% 62% 42% 42%; background: radial-gradient(circle at 50% 68%, #fff6d8 0 18%, #ffc45a 42%, #ff7a2b 78%, rgba(255,90,20,0)); box-shadow: 0 0 22px 6px rgba(255,150,50,.7); animation: lick 1.3s ease-in-out infinite alternate; transform-origin: 50% 80%; }
.body::before { content: ""; position: absolute; left: 50%; bottom: 60%; width: 46%; height: 90%; margin-left: -23%; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: linear-gradient(#ffb04a00, #ffb04a); animation: tongue .7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.eye { position: absolute; top: 56%; width: 13%; height: 17%; border-radius: 50%; background: #2a1205; animation: blink 5s infinite; }
.eye.l { left: 30%; } .eye.r { right: 30%; }
@keyframes lick { to { transform: scale(1.06, .95) rotate(2deg); } }
@keyframes tongue { from { transform: scaleY(.8) rotate(-7deg); } to { transform: scaleY(1.15) rotate(8deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero-sky, .hero-mist, .hero-shade { position: absolute; inset: -8% -4%; z-index: -1; }
.hero-sky { background: url("assets/img/sky.webp") 50% 38% / cover no-repeat; animation: breathe 38s ease-in-out infinite alternate; }
@media (max-width: 900px) { .hero-sky { background-image: url("assets/img/sky-sm.webp"); } }
@keyframes breathe { from { scale: 1.02; } to { scale: 1.1; } }
.hero-mist { background: radial-gradient(60% 30% at 30% 62%, rgba(255,236,190,.28), transparent 70%), radial-gradient(50% 25% at 75% 55%, rgba(255,220,170,.2), transparent 70%); animation: drift 26s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes drift { to { translate: 5% -1%; } }
.hero-shade { inset: 0; background:
  radial-gradient(90% 70% at 50% 42%, rgba(11,18,14,.08), rgba(11,18,14,.62) 78%),
  linear-gradient(180deg, rgba(11,18,14,.55) 0, rgba(11,18,14,0) 26%, rgba(11,18,14,0) 58%, var(--ink) 100%); }
.hero-inner { text-align: center; padding: 16vh 20px 14vh; width: 100%; display: grid; justify-items: center; }
.eyebrow { font: 700 13px var(--display); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 14px rgba(0,0,0,.8); margin-bottom: 20px; }
.wordmark { display: grid; justify-items: center; gap: 4px; max-width: 100%; }
.word { white-space: nowrap; }
.crest { width: clamp(34px, 4vw, 54px); color: var(--gold-hi); filter: drop-shadow(0 0 16px rgba(255,200,100,.9)); animation: turn 60s linear infinite; }
@keyframes turn { to { rotate: 360deg; } }
.word {
  font-size: clamp(40px, 9.3vw, 196px); line-height: .9; letter-spacing: .035em; text-transform: uppercase; padding: .06em .04em 0;
  background: linear-gradient(180deg, #fffbe6 6%, #f6dc93 38%, #c98b2a 68%, #6f4510 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60,30,0,.75)) drop-shadow(0 16px 34px rgba(0,0,0,.7));
}
.word::first-letter { font-size: 1.16em; }
.sub { font-size: clamp(14px, 2.1vw, 28px); letter-spacing: .5em; text-transform: uppercase; color: var(--parch); padding-left: .5em; text-shadow: 0 2px 14px #000; display: flex; align-items: center; gap: 18px; }
.sub::before, .sub::after { content: ""; width: clamp(24px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); }
.sub::after { transform: scaleX(-1); }
.tagline { font-style: italic; font-size: clamp(19px, 2.3vw, 30px); line-height: 1.35; color: #fff7e1; margin: 34px 0 38px; text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.6); }
.tagline span { color: var(--gold-hi); }
.platforms { font: 700 12px var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--parch); margin: 20px 0 0; text-shadow: 0 1px 10px #000; }
.hero .reveal:nth-child(2) { --d: .15s; } .hero .reveal:nth-child(3) { --d: .5s; } .hero .reveal:nth-child(4) { --d: .8s; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; translate: -50%; display: grid; justify-items: center; gap: 10px; font: 700 11px var(--display); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--parch-dim); }
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--gold-hi), transparent); animation: fall 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes fall { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

/* ---------- the Dimming: text you can only read by the light you carry ---------- */
.dimming { position: relative; min-height: 120svh; display: grid; place-items: center; padding: 18vh 22px; background: radial-gradient(120% 60% at 50% 0, #0e1712, var(--ink) 60%), var(--ink); }
.dim-inner { max-width: 980px; }
.dimming .chapter { justify-content: center; }
.carved p {
  font-family: var(--display); font-size: clamp(24px, 3.7vw, 54px); line-height: 1.28; text-align: center; margin: 0 0 .62em; text-wrap: balance;
  background: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 50%), #fff5d6 0, #f0c56a 34%, #6b6a52 62%, #26302a 100%) no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.carved p.you { font-family: var(--body); font-style: italic; font-size: clamp(20px, 2.5vw, 34px); margin-top: 1.3em; }
.carved p.strong { font-family: var(--display); font-style: normal; font-size: clamp(26px, 4.4vw, 64px); margin-top: .1em; }
.hint { text-align: center; font-style: italic; font-size: 15px; color: #56604f; margin-top: 46px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }

/* ---------- the knight ---------- */
.knight { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; max-width: 1320px; margin: 0 auto; padding: 8vh clamp(20px, 5vw, 60px) 16vh; }
.knight-art { margin: 0; position: relative; }
.knight-art img { width: 100%; border: 1px solid var(--line); box-shadow: 0 40px 90px -30px #000, 0 0 0 10px var(--ink), 0 0 0 11px var(--line); }
.knight-art::before, .knight-art::after { content: ""; position: absolute; width: 54px; height: 54px; border: 2px solid var(--gold); z-index: 2; }
.knight-art::before { left: -18px; top: -18px; border-right: 0; border-bottom: 0; }
.knight-art::after { right: -18px; bottom: 26px; border-left: 0; border-top: 0; }
figcaption { font-style: italic; font-size: 15px; color: var(--parch-dim); margin-top: 22px; text-align: center; }
.knight-copy h2 { margin-bottom: 26px; }
.facts { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts b { font: 700 14px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.facts span { font-style: italic; color: var(--parch-dim); text-align: right; }
@media (max-width: 860px) { .knight { grid-template-columns: 1fr; } }

/* ---------- the Four Marches ---------- */
.marches { position: relative; padding: 16vh clamp(20px, 5vw, 60px); overflow: hidden; isolation: isolate; transition: --march .8s; }
.marches[data-march="north"] { --march: #a9bccd; --march-deep: #161d25; }
.marches[data-march="east"]  { --march: #f0a438; --march-deep: #2a1707; }
.marches[data-march="south"] { --march: #6fd0a2; --march-deep: #0a1f18; }
.marches[data-march="west"]  { --march: #c9b79a; --march-deep: #1d1a16; }
.marches-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 68% 55%, color-mix(in srgb, var(--march) 26%, transparent), transparent 70%), linear-gradient(180deg, var(--ink), var(--march-deep) 40%, var(--march-deep) 70%, var(--ink)); transition: background 1s; }
.marches-head { max-width: 1320px; margin: 0 auto 8vh; }
.marches-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 960px) { .marches-grid { grid-template-columns: 1fr; } }

.compass { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.rose { position: absolute; inset: 11%; width: 78%; height: 78%; overflow: visible; }
.rose .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.rose .ring.thin { stroke-dasharray: 2 9; stroke: color-mix(in srgb, var(--march) 60%, transparent); transition: stroke 1s; }
.rose .ticks line { stroke: var(--gold-lo); stroke-width: 1.5; }
.needle { transform-origin: 200px 200px; transition: transform 1.1s cubic-bezier(.3,1.5,.5,1); }
.n-top { fill: var(--march); transition: fill 1s; filter: drop-shadow(0 0 12px var(--march)); }
.n-bot { fill: #3a4038; } .n-pin { fill: var(--gold); }
.dir { position: absolute; background: none; border: 0; cursor: pointer; color: var(--parch-dim); display: grid; justify-items: center; gap: 2px; padding: 8px; font-family: var(--display); transition: color .4s, transform .4s; }
.dir b { font-size: clamp(26px, 3.4vw, 42px); line-height: 1; }
.dir span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.dir.n { left: 50%; top: 0; translate: -50% -20%; } .dir.s { left: 50%; bottom: 0; translate: -50% 20%; }
.dir.e { right: 0; top: 50%; translate: 12% -50%; } .dir.w { left: 0; top: 50%; translate: -12% -50%; }
.dir.e span, .dir.w span { writing-mode: vertical-rl; letter-spacing: .26em; }
@media (max-width: 560px) { .dir span { font-size: 9px; letter-spacing: .14em; } .compass { width: 86%; } }
.dir.e { grid-auto-flow: column; align-items: center; gap: 8px; } .dir.w { grid-auto-flow: column; align-items: center; gap: 8px; }
.dir.w b { order: 2; }
.dir.w span { rotate: 180deg; }
.dir:hover { color: var(--parch); }
.dir[aria-selected="true"] { color: var(--march); text-shadow: 0 0 22px color-mix(in srgb, var(--march) 70%, transparent); }
.hub { position: absolute; left: 50%; top: 50%; translate: -50% 64px; display: grid; justify-items: center; gap: 4px; font: 700 10px var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); pointer-events: none; }
.hub svg { width: 18px; height: 18px; color: var(--ember); filter: drop-shadow(0 0 8px var(--ember)); }

.phone { position: relative; border-radius: clamp(14px, 2.2vw, 30px); padding: clamp(5px, .7vw, 10px); background: linear-gradient(145deg, #3b3a36, #0c0c0b 40%, #26251f); box-shadow: 0 50px 90px -40px #000, 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 60px -10px color-mix(in srgb, var(--march) 45%, transparent); }
.phone img { border-radius: clamp(10px, 1.7vw, 22px); width: 100%; }
.march-card { transition: opacity .35s, transform .35s; }
.march-card.swap { opacity: 0; transform: translateY(10px); }
.march-dir { font: 700 12px var(--display); letter-spacing: .4em; text-transform: uppercase; color: var(--march); margin: 30px 0 6px; transition: color 1s; }
.march-card h3 { font-size: clamp(30px, 4vw, 54px); }
.march-line { font-size: 1.06em; margin: 16px 0 24px; max-width: 46ch; }
.march-card dl { margin: 0; border-top: 1px solid var(--line); }
.march-card dl div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.march-card dt { font: 700 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-top: 5px; }
.march-card dd { margin: 0; font-style: italic; color: var(--parch); }
@media (max-width: 560px) { .march-card dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- the blade ---------- */
.blade { padding: 14vh clamp(20px, 5vw, 60px) 16vh; max-width: 1400px; margin: 0 auto; }
.blade-head { margin-bottom: 7vh; }
.blade-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
@media (max-width: 960px) { .blade-stage { grid-template-columns: 1fr; } }
.phone.big { aspect-ratio: 1600 / 739; --march: var(--ember); }
.phone.big img { position: absolute; inset: clamp(5px, .7vw, 10px); width: calc(100% - 2 * clamp(5px, .7vw, 10px)); height: calc(100% - 2 * clamp(5px, .7vw, 10px)); object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .9s, scale 1.6s; }
.phone.big img.on { opacity: 1; scale: 1; }
.moves { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.moves li { position: relative; padding: 20px 0 20px 62px; border-top: 1px solid var(--line); cursor: pointer; opacity: .5; transition: opacity .4s; counter-increment: m; }
.moves li:last-child { border-bottom: 1px solid var(--line); }
.moves li::before { content: counter(m, upper-roman); position: absolute; left: 0; top: 20px; width: 40px; font: 700 20px var(--display); color: var(--gold); text-align: center; }
.moves li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold-hi); }
.moves li.on { opacity: 1; }
.moves li.on::after { width: 100%; transition: width 5.2s linear; }
.moves b { display: block; font: 700 clamp(17px, 1.6vw, 22px) var(--display); letter-spacing: .04em; color: var(--parch); margin-bottom: 6px; }
.moves span { color: var(--parch-dim); font-size: .95em; }

/* ---------- Wick's aside ---------- */
.wick-sec { padding: 10vh 22px; background: radial-gradient(50% 80% at 50% 50%, rgba(255,140,50,.12), transparent 70%); }
.wick-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
.wick-big { position: relative; --s: clamp(70px, 10vw, 120px); z-index: 1; animation: bob 3.4s ease-in-out infinite alternate; }
.wick-big .glow { width: 420%; height: 420%; margin: -210%; }
@keyframes bob { to { translate: 0 -12px; } }
blockquote { margin: 0; }
#wick-line { font-style: italic; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.2; color: #ffe9bd; margin-bottom: 18px; transition: opacity .5s; min-height: 2.4em; }
blockquote footer { font-size: .92em; color: var(--parch-dim); max-width: 52ch; }
blockquote footer b { font: 700 13px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 600px) { .wick-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- the board ---------- */
.board { padding: 14vh clamp(20px, 5vw, 60px) 16vh; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 180px),
  linear-gradient(180deg, var(--ink), #1c140c 18%, #24180d 82%, var(--ink)); }
.board-head { max-width: 1320px; margin: 0 auto 8vh; }
.notices { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px 26px; }
.notice {
  position: relative; rotate: var(--r); padding: 34px 24px 22px; color: #3b2a14;
  background: linear-gradient(170deg, #f4e6c2, #e2cd9c 60%, #cdb37c); box-shadow: 0 22px 34px -16px #000, inset 0 0 44px rgba(120,80,20,.28);
  clip-path: polygon(0 2%, 4% 0, 31% 1.4%, 62% 0, 97% 1.6%, 100% 30%, 98.6% 66%, 100% 98%, 70% 100%, 38% 98.6%, 3% 100%, 1.2% 62%);
  transition: rotate .4s, translate .4s, scale .4s;
}
.notice.reveal.in:hover { rotate: 0deg; translate: 0 -8px; scale: 1.03; z-index: 2; }
.pin { position: absolute; left: 50%; top: 10px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, #8a5a12 70%); box-shadow: 0 3px 4px rgba(0,0,0,.5); }
.where { font: 700 10px var(--display); letter-spacing: .22em; text-transform: uppercase; color: #8a5a12; margin-bottom: 8px; }
.notice h3 { color: #2a1a08; font-size: 22px; margin-bottom: 10px; }
.notice p { font-size: 16px; line-height: 1.45; }
.pay { font-style: italic; font-size: 14px !important; border-top: 1px dashed rgba(60,40,10,.4); padding-top: 10px; margin: 0; color: #5d4420; }
.notice.king { background: linear-gradient(170deg, #2a2118, #17110b); color: #d8c8a0; box-shadow: 0 22px 44px -16px #000, 0 0 50px -8px rgba(255,170,60,.35); }
.notice.king h3 { color: var(--gold-hi); } .notice.king .where { color: var(--gold); } .notice.king .pay { color: #a8966e; border-color: rgba(233,180,76,.3); }
.quote { font-style: italic; font-size: 18px !important; color: #fff0c8; }
.mapshot { max-width: 880px; margin: 11vh auto 0; }
.mapshot .phone { --march: var(--gold); }

/* ---------- the hearth ---------- */
.hearth { position: relative; padding: 18vh 22px 20vh; isolation: isolate; overflow: hidden; }
.hearth-sky { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 50% 100%, rgba(255,186,90,.5), rgba(214,120,50,.2) 45%, transparent 75%),
  linear-gradient(180deg, var(--ink) 0, #1b1a1c 30%, #3a2a25 62%, #7a4a2c 86%, #c98442 100%); }
.hearth-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.hearth .chapter { justify-content: center; }
.great-lantern { position: relative; width: 104px; margin: 0 auto 30px; color: var(--gold-lo); transition: color 1.4s; }
.great-lantern svg { width: 100%; display: block; }
.great-lantern .flame { position: absolute; left: 50%; top: 52%; width: 26px; height: 38px; margin: -22px 0 0 -13px; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(circle at 50% 70%, #fff6d8 0 20%, #ffc45a 48%, #ff7a2b 82%, transparent); opacity: .16; scale: .5; transition: opacity 1.4s, scale 1.4s cubic-bezier(.3,1.6,.5,1); animation: lick 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.hearth.lit .great-lantern { color: var(--gold-hi); filter: drop-shadow(0 0 40px rgba(255,170,60,.8)); }
.hearth.lit .great-lantern .flame { opacity: 1; scale: 1; box-shadow: 0 0 60px 26px rgba(255,160,60,.55); }
.lede { color: #e6dcc4; margin: 20px auto 36px; max-width: 46ch; }
form { display: grid; gap: 22px; text-align: left; }
.field span, legend { display: block; font: 700 11px var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 10px; padding: 0; }
input[type="email"] { width: 100%; font: 500 20px var(--body); color: var(--parch); background: rgba(11,18,14,.6); border: 1px solid var(--line); border-bottom: 2px solid var(--gold); padding: 18px 20px; border-radius: 0; }
input[type="email"]::placeholder { color: #7d745f; font-style: italic; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
fieldset legend { float: left; width: 100%; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: block; cursor: pointer; padding: 12px 22px; border: 1px solid var(--line); font: 700 12px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--parch-dim); background: rgba(11,18,14,.5); transition: .25s; }
.chip input:checked + span { color: #2a1a04; background: var(--gold); border-color: var(--gold-hi); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.form-msg { min-height: 1.5em; margin: 0; font-style: italic; color: #ffd0a8; text-align: center; }
.thanks h3 { font-size: clamp(28px, 4vw, 44px); color: var(--gold-hi); margin: 10px 0 14px; }
.thanks p { font-style: italic; font-size: 1.15em; color: #fff0d0; }

/* ---------- footer ---------- */
.foot { background: #c98442; color: #3a2208; text-align: center; padding: 0 22px 60px; }
.foot-mark { display: inline-flex; align-items: center; gap: 12px; font: 700 26px var(--display); letter-spacing: .24em; text-transform: uppercase; }
.foot-mark svg { width: 24px; height: 24px; }
.foot-line { font-style: italic; margin: 10px 0 28px; }
.socials { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; padding: 0; margin: 0 0 22px; font: 700 12px var(--display); letter-spacing: .26em; text-transform: uppercase; }
.socials span { opacity: .55; }
.small { font-size: 14px; opacity: .8; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  #wick, #embers { display: none; }
}

@media (max-width: 560px) {
  .sub { letter-spacing: .3em; white-space: nowrap; gap: 10px; font-size: 13px; }
  .word { font-size: 10.2vw; }
  .btn.gold { padding: 18px 26px; font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
  .hero-inner { padding-inline: 14px; }
}

/* ================= second pass: footage ================= */
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0; transition: opacity 1.6s; }
.hero-film.playing { opacity: 1; }
.hero-shade { z-index: -1; }
.hero .hero-mist { display: none; }
.hero:has(.hero-film.playing) .hero-shade { background:
  radial-gradient(80% 60% at 50% 46%, rgba(11,18,14,.5), rgba(11,18,14,.3) 60%, rgba(11,18,14,.62)),
  linear-gradient(180deg, rgba(11,18,14,.6) 0, rgba(11,18,14,.05) 26%, rgba(11,18,14,.05) 62%, var(--ink) 100%); }
.sub-lede { font-style: italic; color: var(--parch-dim); margin: 14px 0 0; }

/* the marches: each land plays behind its own words */
.marches { min-height: 100svh; display: grid; align-content: center; }
.marches-film { position: absolute; inset: 0; z-index: -2; }
.marches-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s; }
.marches-film video.on { opacity: 1; }
.marches-bg { background:
  linear-gradient(180deg, var(--ink) 0, transparent 22%, transparent 74%, var(--ink) 100%),
  linear-gradient(90deg, color-mix(in srgb, var(--march-deep) 70%, transparent) 0, color-mix(in srgb, var(--march-deep) 22%, transparent) 46%, color-mix(in srgb, var(--march-deep) 50%, transparent) 100%); }
.marches-head h2, .march-card h3, .march-line { text-shadow: 0 2px 22px rgba(0,0,0,.85); }
.march-card { padding: clamp(22px, 3vw, 40px); background: color-mix(in srgb, var(--march-deep) 62%, transparent); border: 1px solid var(--line); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); position: relative; }
.march-card::before, .march-card::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--march); transition: border-color 1s; }
.march-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .march-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.march-card .march-dir { margin-top: 0; }
.march-line { color: #efe8d4; }
.compass { filter: drop-shadow(0 4px 30px rgba(0,0,0,.8)); }
.compass::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(11,18,14,.72), rgba(11,18,14,.35) 62%, transparent 72%); }
.dir { color: #ddd5bf; text-shadow: 0 1px 12px #000; }

/* seen from the road */
.places { padding: 14vh 0 12vh; }
.places-head { max-width: 1320px; margin: 0 auto 5vh; padding: 0 clamp(20px, 5vw, 60px); position: relative; }
.places-nav { position: absolute; right: clamp(20px, 5vw, 60px); bottom: 6px; display: flex; gap: 10px; }
.places-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11,18,14,.6); color: var(--gold-hi); font-size: 20px; cursor: pointer; transition: .25s; }
.places-nav button:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 700px) { .places-nav { display: none; } }
.strip { display: flex; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(20px, calc((100vw - 1320px) / 2 + 60px)) 30px; scrollbar-width: none; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.drag { cursor: grabbing; scroll-snap-type: none; }
.strip figure { position: relative; flex: 0 0 min(82vw, 1040px); margin: 0; scroll-snap-align: center; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 70px -40px #000; }
.strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale 6s ease-out; pointer-events: none; }
.strip figure:hover img { scale: 1.06; }
.strip figcaption { position: absolute; inset: auto 0 0 0; margin: 0; padding: 70px clamp(16px, 2.4vw, 34px) clamp(14px, 2vw, 26px); text-align: left; background: linear-gradient(transparent, rgba(8,12,10,.9)); display: grid; gap: 2px; }
.strip figcaption b { font: 700 clamp(17px, 2vw, 28px) var(--display); letter-spacing: .06em; color: var(--parch); }
.strip figcaption span { font-style: italic; font-size: clamp(14px, 1.3vw, 18px); color: var(--gold-hi); }

/* the blade: a film frame instead of a phone */
.frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); box-shadow: 0 50px 90px -40px #000, 0 0 70px -20px rgba(255,138,61,.5); }
.frame::before, .frame::after { content: ""; position: absolute; width: 44px; height: 44px; border: 2px solid var(--gold); z-index: 3; }
.frame::before { left: -10px; top: -10px; border-right: 0; border-bottom: 0; } .frame::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; }
.frame .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; }
.frame .m.on { opacity: 1; }

/* the beast */
.ride { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; padding: 12vh clamp(20px, 5vw, 60px) 10vh; }
.ride > video:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ride-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0, transparent 22%, transparent 45%, rgba(11,18,14,.88) 82%, var(--ink) 100%), linear-gradient(90deg, rgba(11,18,14,.7), transparent 60%); }
.ride-copy { max-width: 620px; grid-row: 1; grid-column: 1; }
.ride-copy h2 { font-size: clamp(38px, 6vw, 92px); margin-bottom: 18px; text-shadow: 0 3px 30px #000; }
.ride-copy p:last-child { font-size: 1.1em; color: #f3ecd8; text-shadow: 0 1px 14px #000; }
.ride-inset { grid-row: 1; grid-column: 1; justify-self: end; width: min(38vw, 460px); aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--gold); box-shadow: 0 30px 60px -20px #000, 0 0 0 8px rgba(11,18,14,.7); rotate: 1.5deg; }
@media (max-width: 860px) { .ride { align-items: end; } .ride-inset { grid-row: 2; justify-self: start; width: min(86vw, 460px); margin-top: 26px; rotate: -1deg; } }


/* ================= third pass: a land picker anyone can read ================= */
.marches-grid { grid-template-columns: minmax(0, 640px); justify-content: start; }
.marches { padding-bottom: 6vh; }
.lands { max-width: 1320px; width: 100%; margin: 6vh auto 0; }
.lands-hint { display: flex; align-items: center; gap: 12px; font: 700 13px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); margin: 0 0 16px; text-shadow: 0 1px 10px #000; }
.lands-hint svg { width: 16px; height: 16px; animation: turn 12s linear infinite; }
.lands-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); }
.land { position: relative; display: grid; align-content: end; text-align: left; min-height: clamp(110px, 13vw, 190px); padding: 14px 16px; border: 1px solid var(--line); background: #0b120e; color: var(--parch); cursor: pointer; overflow: hidden; font-family: var(--display); transition: translate .3s, border-color .3s, box-shadow .3s; }
.land img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s, scale 1.2s; }
.land::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(8,12,10,.92)); }
.land span { position: relative; z-index: 1; }
.land-dir { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.land-name { font-size: clamp(14px, 1.5vw, 21px); letter-spacing: .04em; line-height: 1.15; }
.land:hover { translate: 0 -6px; border-color: var(--gold); }
.land:hover img { opacity: .85; scale: 1.06; }
.land[aria-selected="true"] { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 18px 50px -18px color-mix(in srgb, var(--march) 80%, transparent); }
.land[aria-selected="true"] img { opacity: 1; }
.land-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold-hi); z-index: 2; }
.land[aria-selected="true"] .land-bar { width: 100%; transition: width 7s linear; }
.marches.chosen .land[aria-selected="true"] .land-bar { transition: none; }
@media (max-width: 700px) { .lands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .land { min-height: 104px; } }

.blade { max-width: 1640px; }
.blade-stage { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
@media (max-width: 960px) { .blade-stage { grid-template-columns: 1fr; } }


/* ================= in your hand: real play, the whole interface ================= */
.hand { max-width: 1640px; margin: 0 auto; padding: 4vh clamp(20px, 5vw, 60px) 16vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.hand-copy h2 { margin-bottom: 20px; }
.hand-keys { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hand-keys li { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.hand-keys b { font: 700 12px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.hand-keys span { color: var(--parch-dim); font-style: italic; }
.hand-phone { --march: var(--gold); padding: clamp(7px, 1vw, 14px); border-radius: clamp(18px, 2.8vw, 44px); }
.hand-phone video { display: block; width: 100%; aspect-ratio: 1688 / 780; border-radius: clamp(12px, 2.1vw, 32px); background: #000; }
@media (max-width: 960px) { .hand { grid-template-columns: 1fr; } }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-fine { margin: 0; text-align: center; font-size: 13px; color: #d9c9a8; }
.form-fine a, .foot .small a { color: inherit; }