/* Dear World — the one-page website. The look is the game's own (dearworld/DESIGN.md §4 and §6): parchment cards with
   one brass hairline, teal enamel plaques and pucks in brass rims, brass tokens with serif numerals, ballasted track.
   Without JavaScript or WebGL the page is a complete static site; `.has-world` turns on the 3D journey behind it. */

@font-face{font-family:DearSerif;src:url('../fonts/dearworld-serif.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:DearSans;src:url('../fonts/dearworld-sans.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}

:root{
  /* Theme.swift and BoardLook: the game's palette */
  --room:#241a14;--oak:#8c6a48;--cork:#c8a27a;--ballast:#9c958b;--parchment:#f2e8d6;--cream:#fff9ed;
  --enamel:#125c59;--enamel-deep:#0c4744;--launch:#043030;--brass:#c9a363;--brass-light:#e3c78d;--brass-dark:#8d6b34;
  --terracotta:#964f40;--oxblood:#5a2420;--ink:#173c35;--muted:#5d675e;--sleeper:#7a5634;--steel:#d9d4c8;
  --serif:DearSerif,Georgia,'Times New Roman',serif;--sans:DearSans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gutter:clamp(18px,5vw,84px);--header:76px;--ease:cubic-bezier(.22,.7,.22,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header);background:var(--launch);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--launch);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(38px,4.4vw,64px)}
h3{font-size:22px;letter-spacing:-.01em}
em{font-style:normal;color:var(--enamel)}
p+p{margin-top:14px}
::selection{color:var(--cream);background:var(--enamel)}
/* the selected square has a brass ring (DESIGN.md §6) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:6px;box-shadow:0 0 0 6px rgba(201,163,99,.22)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:12px;left:12px;z-index:200;padding:12px 20px;background:var(--parchment);color:var(--ink);transform:translateY(-160%);border:1px solid var(--brass);border-radius:6px;text-decoration:none}
.skip-link:focus{transform:none}
.eyebrow{font-family:var(--serif);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--brass-dark);margin-bottom:18px}

/* ---------------------------------------------------------------------------------------------------------------
   The loading screen (DESIGN.md, Loading): deep teal, one small globe, thin brass rails, one train, LOADING ... */
.loader{position:fixed;inset:0;z-index:150;display:grid;place-content:center;justify-items:center;gap:28px;background:radial-gradient(circle at 50% 47%,#073c3b 0,var(--launch) 46%,#032625 100%);color:var(--cream);transition:opacity .6s var(--ease),visibility 0s .6s;animation:loader-fallback .6s 9s forwards}
html.world-managed .loader{animation:none}
html.is-ready .loader{opacity:0;visibility:hidden}
@keyframes loader-fallback{to{opacity:0;visibility:hidden}}
.ring-wrap{position:relative;width:min(46vw,200px);aspect-ratio:1}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-globe{position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;box-shadow:0 0 0 14px rgba(10,74,72,.55)}
.ring-rail{fill:none;stroke:rgba(201,163,99,.55);stroke-width:1.1}
.ring-sleepers{fill:none;stroke:rgba(201,163,99,.42);stroke-width:9;stroke-dasharray:.35 .65}
.ring-train{transform-origin:100px 100px;animation:ring-turn 5.6s linear infinite}
.ring-train rect:first-child{fill:var(--cream)}
.ring-window{fill:var(--launch)}
.ring-legs{stroke:var(--cream);stroke-width:2;stroke-linecap:round}
@keyframes ring-turn{to{transform:rotate(360deg)}}
.loader-label,.tunnel-label{font-family:var(--serif);letter-spacing:.32em;font-size:15px;text-transform:uppercase;padding-left:.32em}

/* the same ring, small, while the camera travels between the study and the city boards */
.tunnel{position:fixed;inset:0;z-index:5;display:none;place-content:center;justify-items:center;gap:22px;background:radial-gradient(circle at 50% 47%,#073c3b 0,var(--launch) 50%,#032625 100%);color:var(--cream);opacity:0;pointer-events:none}
.has-world .tunnel{display:grid}
.tunnel-ring{position:relative;width:104px;height:104px;border-radius:50%;border:1px solid rgba(201,163,99,.55);background:repeating-conic-gradient(from 0deg,rgba(201,163,99,.45) 0 1.6deg,transparent 1.6deg 10deg);-webkit-mask:radial-gradient(circle,#000 0 52%,transparent 53% 80%,#000 81% 100%);mask:radial-gradient(circle,#000 0 52%,transparent 53% 80%,#000 81% 100%)}
.tunnel-ring img{position:absolute;inset:24%;width:52%;height:52%;border-radius:50%}

/* ---------------------------------------------------------------------------------------------------------------
   The world: one WebGL canvas behind the page */
.world{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:none;touch-action:pan-y}
.has-world .world{display:block}
.has-world body,.has-world{background:var(--room)}
.hint-layer{position:fixed;inset:0;z-index:4;pointer-events:none}
.hint-ring{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:2px solid #4fb3a9;box-shadow:0 0 0 4px rgba(18,92,89,.35),inset 0 0 0 2px rgba(255,249,237,.35);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hint-ring::after{content:'';width:8px;height:8px;border-radius:50%;background:#4fb3a9}
.hint-ring.is-on{opacity:1;transform:scale(1);animation:hint-pulse 1.8s var(--ease) infinite}
.hint-ring span{position:absolute;top:100%;margin-top:6px;white-space:nowrap;font-family:var(--serif);font-size:13px;color:var(--cream);background:rgba(4,48,48,.82);border:1px solid rgba(201,163,99,.6);border-radius:4px;padding:2px 8px}
@keyframes hint-pulse{50%{box-shadow:0 0 0 9px rgba(18,92,89,.12),inset 0 0 0 2px rgba(255,249,237,.35)}}
.world.is-pointing{cursor:pointer}

/* ---------------------------------------------------------------------------------------------------------------
   Header: the wordmark, the chapters, and the desk's own controls in the top corner (the camera and the radio stand in
   the top corners at home; the glass bulb is the board's hint) */
.site-header{position:fixed;inset:0 0 auto;z-index:20;color:var(--cream);transition:background .4s var(--ease),transform .5s var(--ease)}
.site-header::before{content:'';position:absolute;inset:0 0 -34px;background:linear-gradient(rgba(4,36,35,.78),rgba(4,36,35,.38) 62%,transparent);pointer-events:none;transition:opacity .35s}
.site-header::after{content:'';position:absolute;inset:0;background:rgba(4,40,39,.96);border-bottom:1px solid rgba(201,163,99,.45);opacity:0;transition:opacity .35s;pointer-events:none}
.site-header.is-solid::before{opacity:0}
.site-header.is-solid::after{opacity:1}
.header-inner{position:relative;z-index:1;display:flex;align-items:center;gap:28px;min-height:var(--header);padding-inline:var(--gutter)}
.wordmark{font-family:var(--serif);font-size:29px;letter-spacing:-.02em;white-space:nowrap;line-height:1;text-decoration:none;display:inline-flex;align-items:center}
/* a city pin: teal enamel turning gold, as on the desk globe */
.wordmark-pin{display:inline-block;width:11px;height:11px;margin-left:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5dfa6,var(--brass) 55%,var(--brass-dark));box-shadow:0 1px 0 rgba(0,0,0,.35)}
.main-nav{display:flex;gap:30px;margin-left:auto;font-size:14px}
.main-nav a{text-decoration:none;padding-block:10px;opacity:.88;position:relative}
.main-nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.main-nav a:hover{opacity:1}
.main-nav a:hover::after,.main-nav a.is-current::after{transform:scaleX(1)}
.desk-controls{display:flex;gap:4px;align-items:center}
.desk-thing{position:relative;width:52px;height:52px;padding:4px;border:0;background:none;border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--ease)}
.desk-thing img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transition:transform .35s var(--ease)}
/* a tap lifts it a little, as on the desk */
.desk-thing:hover img,.desk-thing:focus-visible img{transform:translateY(-3px)}
.desk-thing:active img{transform:translateY(-6px) scale(1.04)}
.desk-thing[data-radio]::after{content:'';position:absolute;right:6px;bottom:8px;width:9px;height:9px;border-radius:50%;background:#4b5a55;border:1.5px solid var(--brass);transition:background .3s}
.desk-thing[data-radio][aria-pressed=true]::after{background:#f0c25c;box-shadow:0 0 8px #f0c25c}
.desk-thing .bulb-on{display:none}
.desk-thing[data-bulb][aria-pressed=true] .bulb-on{display:block}
.desk-thing[data-bulb][aria-pressed=true] .bulb-off{display:none}
.desk-thing[data-bulb][aria-pressed=true]{filter:drop-shadow(0 0 12px rgba(255,214,130,.7))}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;min-height:44px;align-items:center;gap:10px;font-size:14px;color:var(--cream)}
.menu-icon{width:18px;height:10px;border-block:1.5px solid var(--brass)}

/* the chapters as stops on a brass line */
.line{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;z-index:15;transform:translateY(-50%);height:min(64vh,560px);width:28px}
.line-rails{position:absolute;left:50%;top:0;bottom:0;width:9px;transform:translateX(-50%);border-inline:1px solid rgba(201,163,99,.6);background:repeating-linear-gradient(transparent 0 7px,rgba(201,163,99,.35) 7px 9px)}
.line-train{position:absolute;left:50%;top:0;width:16px;height:22px;margin:-11px 0 0 -8px;border-radius:5px 5px 3px 3px;background:var(--cream);box-shadow:0 2px 6px rgba(0,0,0,.45);transform:translateY(calc(var(--line, 0) * min(64vh, 560px)));transition:transform .25s linear}
.line-train::before{content:'';position:absolute;left:3px;right:3px;top:4px;height:6px;border-radius:2px;background:var(--launch)}
.line-train::after{content:'';position:absolute;left:3px;right:3px;bottom:4px;height:3px;background:radial-gradient(circle,var(--launch) 0 1.3px,transparent 1.6px) 0 0/5px 3px repeat-x}
.line ol{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.line li{display:flex;justify-content:center}
.line a{position:relative;display:grid;place-items:center;width:28px;height:28px;text-decoration:none}
.line a::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--launch);border:1.5px solid var(--brass);transition:background .3s,transform .3s var(--ease)}
.line a.is-city::before{background:var(--enamel)}
.line a.is-passed.is-city::before{background:radial-gradient(circle at 35% 30%,#f5dfa6,var(--brass) 60%)}
.line a.is-current::before{transform:scale(1.35)}
.line a span{position:absolute;right:34px;white-space:nowrap;font-family:var(--serif);font-size:14px;color:var(--cream);background:rgba(4,48,48,.86);border:1px solid rgba(201,163,99,.55);border-radius:4px;padding:2px 10px;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.line a:hover span,.line a:focus-visible span,.line a.is-current span{opacity:1;transform:none}
.line a.is-current span{opacity:.0}
.line a.is-current:hover span,.line a.is-current:focus-visible span{opacity:1}

/* ---------------------------------------------------------------------------------------------------------------
   Shared pieces: parchment card, plaque (the Continue plaque), puck, brass token, ballasted track */
.card{position:relative;width:min(470px,100%);background:linear-gradient(var(--parchment),#efe3cd);border:1px solid rgba(201,163,99,.85);border-radius:6px;padding:clamp(24px,3vw,38px);box-shadow:0 18px 40px -22px rgba(20,10,4,.65)}
.card::before{content:'';position:absolute;inset:7px;border:1px solid rgba(201,163,99,.35);border-radius:3px;pointer-events:none}
.card h2{margin-bottom:16px;font-size:clamp(34px,3.3vw,52px)}
.card > p:not(.eyebrow):not(.piece):not(.reward):not(.egg-note):not(.livery){font-size:16px;line-height:1.6}
.card p{color:#3d4a42}
.plaque{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:12px 38px;border-radius:999px;border:0;background:linear-gradient(180deg,#1a6d68,var(--enamel) 45%,var(--enamel-deep));color:var(--cream);font-family:var(--serif);font-size:19px;letter-spacing:-.005em;text-decoration:none;box-shadow:inset 0 0 0 2.5px var(--brass),inset 0 0 0 3.5px rgba(70,46,12,.45),inset 0 2px 0 3.5px rgba(255,240,200,.25),0 10px 22px -10px rgba(0,0,0,.6);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plaque::before,.plaque::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e0aa,var(--brass) 55%,var(--brass-dark))}
.plaque::before{left:15px}.plaque::after{right:15px}
.plaque:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2.5px var(--brass-light),inset 0 0 0 3.5px rgba(70,46,12,.45),inset 0 2px 0 3.5px rgba(255,240,200,.3),0 16px 26px -12px rgba(0,0,0,.6)}
.plaque:active{transform:translateY(1px)}
.plaque-chevron{font-size:24px;line-height:1;color:var(--brass-light);margin-left:4px}
.plaque-icon{width:18px;height:22px;border-radius:5px 5px 3px 3px;border:2px solid var(--brass-light);position:relative}
.plaque-icon::after{content:'';position:absolute;left:2px;right:2px;top:3px;height:5px;border-radius:1px;background:var(--brass-light);opacity:.75}
.plaque-camera{width:22px;height:16px;border-radius:3px}
.plaque-camera::after{left:5px;right:5px;top:3px;height:6px;border-radius:50%;background:none;border:2px solid var(--brass-light)}
.plaque-small{min-height:48px;font-size:17px;padding:10px 32px}
.plaque-outline{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--brass)}
.puck{width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;font-family:var(--serif);font-size:24px;line-height:1;color:var(--brass-light);background:radial-gradient(circle at 40% 35%,#22807a,var(--enamel) 60%,var(--enamel-deep));box-shadow:inset 0 0 0 2.5px var(--brass),inset 0 0 0 3.5px rgba(70,46,12,.4),0 6px 14px -6px rgba(0,0,0,.6)}
.puck:hover{box-shadow:inset 0 0 0 2.5px var(--brass-light),inset 0 0 0 3.5px rgba(70,46,12,.4),0 8px 16px -6px rgba(0,0,0,.6)}
.puck:disabled{opacity:.4;cursor:default}
.token{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--serif);font-size:16px;line-height:1;color:#3c2a0e;background:radial-gradient(circle at 38% 30%,#f7e3b0,var(--brass) 52%,#a8813f);box-shadow:inset 0 -2px 0 rgba(90,60,20,.35),0 2px 3px rgba(40,25,5,.3)}
.egg-note{display:flex;align-items:center;gap:10px;margin-top:20px;font-family:var(--serif);font-size:15px;color:var(--enamel)}
/* the board's hint: a miniature glass bulb */
.egg-note::before,.bulb-icon{content:'';flex:none;width:26px;height:26px;background:url('../images/desk/bulb-on.webp') center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.bulb-icon{display:inline-block}
.text-link{display:inline-flex;gap:8px;margin-top:22px;color:var(--brass-light);text-decoration:none;border-bottom:1px solid rgba(201,163,99,.5);padding-bottom:3px}
.text-link:hover{border-color:var(--brass-light)}
/* one track used everywhere: timber sleepers on grey ballast, steel rails that catch the light */
.track-divider{position:relative;z-index:1;height:30px;margin-inline:auto;width:min(1180px,calc(100% - 2*var(--gutter)));background:linear-gradient(transparent 9px,var(--steel) 9px 11px,rgba(60,50,40,.5) 11px 12px,transparent 12px 18px,var(--steel) 18px 20px,rgba(60,50,40,.5) 20px 21px,transparent 21px),repeating-linear-gradient(90deg,transparent 0 6px,var(--sleeper) 6px 14px,transparent 14px 22px),radial-gradient(circle at 30% 40%,#a9a297 0 1.4px,transparent 1.6px) 0 0/5px 5px,linear-gradient(90deg,transparent,#8d867c 6%,#8d867c 94%,transparent);background-size:auto,auto,5px 5px,auto;background-repeat:no-repeat,repeat-x,repeat,no-repeat;background-position:0 0,0 4px,0 6px,0 6px;background-clip:border-box;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);opacity:.85}
.has-world .track-divider{display:none}

/* ---------------------------------------------------------------------------------------------------------------
   Chapters. Static first (no WebGL): each is a full section with its own background. */
main{position:relative;z-index:1}
.chapter{position:relative;padding:clamp(110px,14vh,170px) var(--gutter) clamp(80px,10vh,130px)}
.chapter-inner{position:relative;max-width:1320px;margin-inline:auto}
/* without the world, each chapter shows a still of its scene, rendered from the same models */
:root:not(.has-world) .chapter:not(.hero) .chapter-inner{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.still{order:2;border-radius:6px;overflow:hidden;box-shadow:0 26px 50px -26px rgba(0,0,0,.8);border:1px solid rgba(201,163,99,.45)}
.still img{width:100%;height:auto}
.has-world .still{display:none}
.hero{min-height:100svh;display:flex;align-items:center;color:var(--cream);overflow:hidden;isolation:isolate;background:var(--launch)}
.poster{position:absolute;inset:0;z-index:-2}
.poster img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,30,29,.82),rgba(3,30,29,.35) 46%,transparent 70%),linear-gradient(0deg,rgba(3,26,25,.65),transparent 30%)}
.hero .chapter-inner{width:100%}
.hero-copy{max-width:640px}
.hero .eyebrow{color:var(--brass-light)}
.hero h1{font-size:clamp(46px,5.2vw,80px);line-height:1.02}
.hero h1 em{color:var(--brass-light)}
.hero-intro{margin-top:26px;max-width:470px;font-size:18px;color:rgba(255,249,237,.86)}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px}
.hero-hint{margin-top:30px;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:15px;color:rgba(255,249,237,.72)}
.hero-hint .bulb-icon{width:24px;height:24px}
/* a short length of track, the little train running down it */
.scroll-cue{position:absolute;left:50%;bottom:22px;width:22px;height:58px;margin-left:-11px;border-inline:1.5px solid rgba(201,163,99,.75);background:repeating-linear-gradient(transparent 0 6px,rgba(201,163,99,.45) 6px 8px);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.cue-train{position:absolute;left:50%;top:6px;width:12px;height:16px;margin-left:-6px;border-radius:4px 4px 2px 2px;background:var(--cream);box-shadow:0 2px 5px rgba(0,0,0,.4);animation:cue 2.2s var(--ease) infinite}
.cue-train::before{content:'';position:absolute;left:2px;right:2px;top:3px;height:4px;border-radius:1px;background:var(--launch)}
@keyframes cue{0%{transform:translateY(-8px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.journey,.layout{background:linear-gradient(var(--launch),#06393a)}
.city,.workshop{background:radial-gradient(ellipse at 50% 40%,#6e5238,var(--room) 70%)}
.city:nth-of-type(even){background:radial-gradient(ellipse at 40% 50%,#6e5238,var(--room) 70%)}
.steps{margin-top:18px;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps h3{font-size:20px;margin-bottom:2px;color:var(--ink)}
.steps p{font-size:15px;line-height:1.55}
.facts{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(201,163,99,.55);padding-top:12px}
.facts dt{font-family:var(--serif);font-size:30px;line-height:1;color:var(--enamel)}
.facts dd{font-size:13px;color:var(--muted)}
.city h2{font-size:clamp(48px,5vw,76px)}
.piece{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;color:var(--enamel);margin-bottom:14px}
.piece .token{width:24px;height:24px;font-size:11px}
.reward{margin-top:18px!important;padding-top:14px;border-top:1px solid rgba(201,163,99,.5);font-family:var(--serif);font-size:18px;color:var(--ink)!important}
.reward strong{font-weight:400;color:var(--terracotta)}
.livery{margin-top:18px!important;font-family:var(--serif);font-size:18px}
.livery strong{font-weight:400;color:var(--terracotta)}
/* a beautiful delivery: three brass stars on a paper slip, as the board says it */
.delivery{position:absolute;right:-14px;top:-20px;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;background:var(--cream);border:1px solid var(--brass);border-radius:4px;font-family:var(--serif);font-size:15px;color:var(--ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transform:rotate(2deg) scale(.7);opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.delivery b{font-weight:400;color:var(--brass-dark);letter-spacing:2px;font-size:14px}
.is-delivered .delivery{opacity:1;transform:rotate(2deg)}

/* ---------------------------------------------------------------------------------------------------------------
   The album: oxblood leather round a paper page, a stamp for every route delivered */
.album{position:relative;z-index:1;padding:clamp(90px,12vh,140px) var(--gutter);background:radial-gradient(ellipse at 30% 0,#6c2c26,var(--oxblood) 55%,#3d1714);color:var(--cream)}
.album::before{content:'';position:absolute;inset:clamp(10px,1.4vw,18px);border:1px solid rgba(201,163,99,.55);border-radius:10px;pointer-events:none}
.album-inner{max-width:1320px;margin-inline:auto;background:linear-gradient(#f6eddb,#efe3cc);color:var(--ink);border-radius:6px;padding:clamp(28px,4vw,64px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(201,163,99,.6)}
.album-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 60px;align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.album-heading .eyebrow{grid-column:1/-1;margin:0}
.album-heading p:last-child{color:var(--muted);max-width:420px}
.stamps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.stamp{position:relative;display:block;padding:10px 10px 46px;background:var(--cream);text-decoration:none;color:var(--ink);transition:transform .45s var(--ease);
  /* perforated edges */
  -webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 50% 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 50% 100%/14px 51% repeat-x;
  filter:drop-shadow(0 6px 8px rgba(60,30,10,.25))}
.stamp img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 58%;border:1px solid rgba(201,163,99,.6)}
.stamp-label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:16px}
.stamp-label small{font-size:12px;color:var(--brass-dark);letter-spacing:.1em}
.stamps li:nth-child(odd) .stamp{transform:rotate(-1.2deg)}
.stamps li:nth-child(even) .stamp{transform:rotate(1deg)}
.stamps li .stamp:hover,.stamps li .stamp:focus-visible{transform:rotate(0) translateY(-6px)}
.stamp-empty{display:grid;place-items:center;border:1.5px dashed rgba(141,107,52,.55);border-radius:4px;min-height:200px;font-family:var(--serif);color:rgba(93,103,94,.8)}

/* ---------------------------------------------------------------------------------------------------------------
   Postcard, promise, footer */
.postcard-section{position:relative;z-index:1;padding:clamp(90px,12vh,150px) var(--gutter);background:linear-gradient(#efe3cc,var(--parchment))}
.postcard-inner{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(40px,7vw,110px);align-items:center}
.postcard-copy p:not(.eyebrow){max-width:470px;color:#3d4a42;margin-top:20px}
.postcard-copy .plaque{margin-top:30px}
.postcard-frame{position:relative;padding:14px;background:var(--cream);box-shadow:0 30px 50px -28px rgba(40,20,5,.6);transform:rotate(1.6deg)}
.postcard-mark{position:absolute;width:34%;right:-8%;top:-7%;opacity:.55;mix-blend-mode:multiply;transform:rotate(-14deg)}
.promise{position:relative;z-index:1;padding:clamp(80px,11vh,130px) var(--gutter);background:var(--launch);color:var(--cream)}
.promise-inner{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:end}
.promise .eyebrow{color:var(--brass-light)}
.promise em{color:var(--brass-light)}
.promise p:not(.eyebrow){color:rgba(255,249,237,.8);margin-top:18px;max-width:520px}
.promise-support{border-left:1px solid rgba(201,163,99,.45);padding-left:clamp(24px,4vw,56px)}
.promise-support h3{font-size:28px}
.promise-support .plaque{margin-top:24px}
.fine{font-size:13px!important;color:rgba(255,249,237,.6)!important;margin-top:26px!important}
.fine a{color:var(--brass-light)}
.site-footer{position:relative;z-index:1;background:#032625;color:rgba(255,249,237,.82);padding:44px var(--gutter) 30px;border-top:1px solid rgba(201,163,99,.3)}
.footer-inner{max-width:1180px;margin-inline:auto}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.footer-top p{font-family:var(--serif);font-size:16px;color:rgba(255,249,237,.65)}
.footer-top nav{margin-left:auto;display:flex;gap:26px;font-size:14px}
.footer-top nav a{text-decoration:none;padding-block:10px}
.footer-top nav a:hover{color:var(--brass-light)}
.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(201,163,99,.2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-size:12px;color:rgba(255,249,237,.5)}
/* the home's tray: an oak frame round green baize, the desk's things standing on it */
.tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:620px;margin:0 auto 40px;padding:10px 14px 8px;border-radius:26px;background:radial-gradient(ellipse at 50% 30%,#3c6b5c,#24473d 75%);box-shadow:inset 0 0 0 6px #a4743f,inset 0 0 0 8px #6e4a26,inset 0 6px 18px rgba(0,0,0,.45),0 18px 30px -18px rgba(0,0,0,.8)}
.tray a{display:grid;justify-items:center;gap:0;padding:4px 0 6px;text-decoration:none;color:var(--cream);font-family:var(--serif);font-size:16px;border-radius:14px}
.tray img{width:72px;height:72px;object-fit:contain;transition:transform .35s var(--ease);filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.tray a:hover img,.tray a:focus-visible img{transform:translateY(-5px)}
.tray span{margin-top:-4px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* the small brass nameplate on the front edge of every base */
.nameplate{display:inline-block;padding:4px 14px;border-radius:2px;font-family:var(--serif);font-size:12px;letter-spacing:.04em;color:#3a2a10;background:linear-gradient(180deg,#ecd29a,var(--brass) 55%,#a37d3d);box-shadow:inset 0 0 0 1px rgba(90,60,20,.45),0 1px 0 rgba(255,255,255,.15)}

/* ---------------------------------------------------------------------------------------------------------------
   Dialogs: the album's page and the postcard */
dialog{border:0;padding:0;background:transparent;color:var(--cream);max-width:none;max-height:none}
dialog::backdrop{background:rgba(3,20,19,.86)}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100vw;height:100svh;padding:16px}
.lightbox-toolbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);letter-spacing:.2em}
.lightbox-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:0}
.lightbox-image{max-height:100%;max-width:100%;margin:auto;object-fit:contain;border:10px solid var(--cream);border-radius:2px;min-height:0}
#lightbox-caption{text-align:center;font-family:var(--serif);font-size:20px;padding:12px}
.postcard-dialog[open]{display:grid;gap:16px;justify-items:center;width:min(92vw,980px);padding:12px}
.postcard-result{width:100%;height:auto;max-height:76svh;object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform:rotate(-.8deg)}
.postcard-actions{display:flex;gap:14px;align-items:center}

/* ---------------------------------------------------------------------------------------------------------------
   With the world: chapters become transparent over the canvas; each card holds still while the camera travels. */
.has-world .chapter{background:none;padding:0;min-height:var(--chapter,200vh)}
.has-world .hero{--chapter:190vh;display:block;color:var(--cream)}
.has-world .hero::before{background:linear-gradient(90deg,rgba(12,8,5,.84),rgba(12,8,5,.55) 30%,rgba(12,8,5,.12) 52%,transparent 66%);opacity:var(--reveal,1)}
.has-world .poster{display:none}
.has-world .journey{--chapter:230vh}
.has-world .city{--chapter:210vh}
.has-world .layout{--chapter:230vh}
.has-world .workshop{--chapter:210vh}
.has-world .chapter-inner{position:sticky;top:0;height:100svh;max-width:none;display:flex;align-items:center;padding:calc(var(--header) + 10px) var(--gutter) 30px}
.has-world .hero .chapter-inner{align-items:center}
.has-world .chapter .card,.has-world .hero-copy{opacity:var(--reveal,1);transform:translate3d(0,calc((1 - var(--reveal,1)) * 26px),0);will-change:opacity,transform}
.has-world .chapter[data-side=right] .chapter-inner{justify-content:flex-end;padding-right:calc(var(--gutter) + 40px)}
.has-world .scroll-cue{position:fixed;opacity:var(--cue,1)}
.has-world .hero .scroll-cue{display:block}

/* ---------------------------------------------------------------------------------------------------------------
   Smaller screens */
@media (max-width:1100px){
  .main-nav{gap:20px}
  .stamps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stamp-empty:last-child{display:none}
}
@media (max-width:860px){
  :root{--header:64px}
  .menu-toggle{display:inline-flex}
  .main-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gutter) 18px;background:rgba(4,40,39,.97);border-bottom:1px solid rgba(201,163,99,.4);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
  .main-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s var(--ease)}
  .main-nav a{padding:12px 0;border-bottom:1px solid rgba(201,163,99,.18);font-family:var(--serif);font-size:20px}
  .desk-controls{order:3}
  .menu-toggle{order:2}
  .header-inner{gap:6px}
  .wordmark{font-size:23px}
  .wordmark-pin{width:9px;height:9px;margin-left:7px}
  .menu-toggle{margin-left:auto;padding-inline:6px}
  .menu-label{display:none}
  .desk-controls{gap:0}
  .desk-thing{width:44px;height:44px;padding:3px}
  .desk-thing img{width:34px;height:34px}
  .line{display:none}
  .album-heading,.postcard-inner,.promise-inner,:root:not(.has-world) .chapter:not(.hero) .chapter-inner{grid-template-columns:1fr}
  .still{order:0}
  .promise-support{border-left:0;padding-left:0;border-top:1px solid rgba(201,163,99,.45);padding-top:30px}
  .stamps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tray img{width:54px;height:54px}
  .tray a{font-size:13px}
  .stamp-empty{display:none}
  .postcard-frame{max-width:420px;margin-inline:auto}
  /* the model above, the card below it */
  .has-world .chapter-inner{align-items:flex-end;padding:calc(var(--header) + 8px) 14px max(14px,env(safe-area-inset-bottom))}
  .has-world .hero .chapter-inner{align-items:flex-end;padding-bottom:max(70px,10svh)}
  .has-world .hero::before{background:linear-gradient(0deg,rgba(12,8,5,.9),rgba(12,8,5,.62) 42%,transparent 66%)}
  .has-world .chapter[data-side=right] .chapter-inner{justify-content:center;padding-right:14px}
  .has-world .card{width:100%;padding:20px 20px 18px;max-height:56svh;overflow:auto}
  .has-world .card h2{font-size:clamp(32px,9vw,44px);margin-bottom:10px}
  .has-world .city h2{font-size:clamp(40px,11vw,54px)}
  .has-world .card p{font-size:15px;line-height:1.55}
  .has-world .steps{gap:10px;margin-top:14px}
  .has-world .steps p{font-size:14px}
  .has-world .facts{margin-top:14px;padding-top:10px}
  .has-world .facts dt{font-size:26px}
  .has-world .egg-note{margin-top:12px}
  .hero h1{font-size:clamp(38px,10.6vw,58px)}
  .hero .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:12px}
  .hero-intro{font-size:15px;margin-top:14px;line-height:1.55}
  .hero-hint{margin-top:18px;font-size:14px}
  .stamp{padding:7px 7px 40px}
  .stamp-label{left:9px;right:9px;bottom:9px;font-size:13px;flex-direction:column;align-items:flex-start;gap:0;line-height:1.2}
  .hero-actions{margin-top:24px}
  .plaque{font-size:17px;padding:11px 32px;min-height:52px}
  .has-world .scroll-cue{display:none}
}
@media (max-width:520px){
  .stamp-label small{display:none}
  .has-world .journey .facts,.has-world .journey .card > p:not(.eyebrow):not(.egg-note){display:none}
  .stamp-label{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ring-train,.tunnel-ring{animation:none!important}
  .has-world .chapter .card,.has-world .hero-copy{transform:none}
}

/* the world answers taps where the page is empty: chapters let the pointer through to the canvas */
.has-world main,.has-world .chapter,.has-world .chapter-inner{pointer-events:none}
.has-world .card,.has-world .hero-copy,.has-world .scroll-cue,.has-world .album,.has-world .postcard-section,.has-world .promise{pointer-events:auto}
.hint-ring{pointer-events:auto;padding:0;background:none;cursor:pointer}

/* 404: the loading ring with a length of track missing, the train stopped at a buffer */
.detour{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#073c3b 0,var(--launch) 48%,#032625 100%);color:var(--cream);text-align:center;padding:40px 20px}
.detour-inner{display:grid;justify-items:center;gap:18px;max-width:560px}
.detour .ring-wrap{width:170px;margin-bottom:18px}
.detour h1{font-size:clamp(40px,7vw,64px)}
.detour h1 em{color:var(--brass-light)}
.detour .eyebrow{color:var(--brass-light);margin:0}
.detour p:not(.eyebrow){color:rgba(255,249,237,.78);max-width:420px}
.detour .plaque{margin-top:14px}
.ring-gap{fill:none;stroke:#053634;stroke-width:15}
.ring-buffer{fill:var(--terracotta)}
.ring-car{fill:var(--cream)}