/* Shared public-site layout. Palette/type/spacing stay in players/site-tokens.css. */
:root{
 --marketing-width:1200px;--marketing-gap:24px;--marketing-space:clamp(64px,8vw,112px);
 --marketing-frame:#1d160d;--marketing-cream:#f7eed7;--marketing-gold:#efbd68;--marketing-gold-ink:#241b0d;
 --hero-bg:#092d37;--hero-muted:#e1deca;--hero-copy-top:clamp(144px,13vw,216px);--hero-copy-width:470px;
 --hero-copy-edge:calc(max(0px,(100vw - var(--marketing-width))/2) + var(--hero-copy-width) + var(--s2));
 --hero-scrim:linear-gradient(90deg,rgba(9,45,55,.96),rgba(9,45,55,.9) calc(var(--hero-copy-edge) - var(--s7)),rgba(9,45,55,.75) var(--hero-copy-edge),transparent calc(var(--hero-copy-edge) + var(--s7)*3));
 --marketing-headline:clamp(36px,4.3vw,56px);--marketing-small:14px;--marketing-rule:1px;
 --play-wood-dark:#382416;--play-wood-lit:#4c3320;--play-wood-edge:#ad7a43;--play-wood-ink:#fff0d0;
 --play-grain:url('/characters/wood-grain.svg');--dur-press:150ms;--dur-glint:500ms;--dur-dock:200ms;--ease-out:cubic-bezier(0,0,.2,1);
 --hero-badge:rgba(9,45,55,.72);--hero-badge-edge:rgba(239,189,104,.5);--next-scrim:rgba(9,45,55,.84);
 --frame-shadow:0 6px 0 var(--shadow);--icon:48px;
 --ornament:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 5h46v2H0zM74 5h46v2H74zM58 0h4v2h-4zM56 2h8v2h-8zM54 4h12v4H54zM56 8h8v2h-8zM58 10h4v2h-4z'/%3E%3C/svg%3E");
}

/* A scene-led landing page and a separate, readable build archive. Both use
   the game's pixel lettering, warm palette and shared spacing scale. */
*{box-sizing:border-box}
html{scroll-padding-top:var(--nav-clearance,72px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-m);line-height:1.55;padding-inline:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lagoon)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2,h3,.btn,.brand,.num,.tile strong,.stats strong,.ver,.upd .uv{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
p{margin:0}
.wrap{max-width:var(--marketing-width);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--bg)}}
.nav .wrap{display:flex;align-items:center;gap:var(--s1) var(--s3);flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.02em}
.brand .logo{width:165px;height:44px;image-rendering:pixelated}
.brand .beta{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:var(--r);padding:2px 6px;line-height:1.3;margin-left:-2px}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap}
.nav li a{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px 0}
.nav li a:hover{color:var(--ink)}
.nav li a.play{color:var(--accent-ink);background:var(--accent);padding:6px 12px;border-radius:var(--r);box-shadow:0 3px 0 var(--shadow);font-weight:600}

/* The homepage logo sits on the viewport centre, independently of menu widths. */
.landing-page .nav .wrap{display:grid;grid-template-columns:minmax(0,1fr) 304px minmax(0,1fr);gap:var(--s2)}
.landing-page .nav .brand{position:relative;justify-content:center;padding-bottom:20px}
.landing-page .brand .logo{width:280px;height:auto}
.landing-page .brand .beta{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;font-size:9px}
.landing-page .nav ul{margin:0;flex-wrap:nowrap}
.landing-page .nav-left{justify-content:flex-start}
.landing-page .nav-right{justify-content:flex-end}


/* A calm doorway into the game, with its own island scene. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-width:144px;min-height:56px;padding:var(--s2) var(--s4);font:700 var(--t-l)/1 var(--display);color:var(--marketing-gold-ink);background:var(--marketing-gold);border:2px solid var(--marketing-frame);border-radius:var(--r);text-decoration:none;box-shadow:0 4px 0 var(--marketing-frame)}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--marketing-frame)}
/* Carved teak, shared with the account doorway. The label stays above the glint. */
.landing-page .wood-play,.landing-page .nav li a.wood-play{
 position:relative;isolation:isolate;overflow:hidden;gap:0;
 color:var(--play-wood-ink);border:2px solid var(--play-wood-edge);border-radius:var(--r);
 background:var(--play-grain) center/320px 96px,linear-gradient(180deg,var(--play-wood-lit),var(--play-wood-dark));
 box-shadow:inset 0 2px 0 #e3bd7066,inset 0 -3px 0 #160e08,0 4px 0 var(--marketing-frame);
 text-shadow:0 2px 0 #160e08;transition:transform var(--dur-press) var(--ease-out);
}
.landing-page .wood-play>span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:var(--s2)}
.landing-page .wood-play::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 8px 8px,#e3bd70 0 1px,#75502e 1.5px 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#e3bd70 0 1px,#75502e 1.5px 2.5px,transparent 3px),linear-gradient(165deg,#e3bd7014,transparent 45%);
}
.landing-page .wood-play::after{content:"";position:absolute;z-index:1;inset:-50% 0;width:55%;pointer-events:none;
 background:linear-gradient(90deg,transparent,#fff0d014 45%,#fff0d01f 50%,transparent);
 transform:translateX(-180%) skewX(-20deg);opacity:0;
}
.landing-page .wood-play:hover,.landing-page .nav li a.wood-play:hover{color:var(--play-wood-ink);filter:none}
.landing-page .wood-play:active{transform:translateY(2px)}
@media(prefers-reduced-motion:no-preference){
 .landing-page .wood-play:is(:hover,:focus-visible)::after{animation:wood-glint var(--dur-glint) var(--ease-out)}
 @keyframes wood-glint{0%{transform:translateX(-180%) skewX(-20deg);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(300%) skewX(-20deg);opacity:0}}
}
.site-skip{position:absolute;top:var(--s1);left:var(--s2);z-index:30;transform:translateY(-160%);background:var(--accent);color:var(--accent-ink);padding:var(--s2);min-height:44px}.site-skip:focus{transform:none}
.hero{position:relative;margin-inline:calc(50% - 50vw);min-height:720px;aspect-ratio:1491/1055;display:grid;align-items:start;overflow:hidden;background:var(--hero-bg);padding:0;color:var(--marketing-cream)}
.hero-img{position:absolute;inset:0 0 auto;width:100%;height:auto}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,transparent 50vw,var(--hero-bg) 70.757881vw),var(--hero-scrim)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--marketing-width);margin-inline:auto;padding:var(--hero-copy-top) var(--s2) var(--s6)}
.hero-copy{max-width:var(--hero-copy-width)}
.hero-kicker{font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--marketing-gold);margin-bottom:var(--s3)}
.hero .tag{font:700 clamp(36px,3.75vw,48px)/1.05 var(--display);margin-top:var(--s2);color:var(--marketing-cream);text-wrap:balance}
.hero .lede{margin-top:var(--s3);max-width:44ch;color:var(--hero-muted);font-size:20px;line-height:1.5}
.cta{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s4)}
.hero-explore{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--marketing-cream);text-decoration:underline;text-underline-offset:5px;font-weight:700}
.hero-explore:hover{color:var(--marketing-gold)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;padding:0;margin:var(--s4) 0 0}
.badges li{font:500 var(--t-xs)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--marketing-cream);background:var(--hero-badge);border:1px solid var(--hero-badge-edge);border-radius:var(--r);padding:var(--s1) 10px}
.hero-note{margin-top:var(--s2);font-size:var(--marketing-small);color:var(--hero-muted)}
/* sections */
section{padding-block:var(--s7) var(--s5)}
.sec-h{display:block;margin-bottom:var(--s4)}
.num{font-family:var(--display);font-weight:700;font-size:20px;color:var(--stone-ink);background:var(--stone);border:2px solid #1d160d;outline:1px solid var(--stone-edge);border-radius:var(--r);box-shadow:0 4px 0 var(--shadow);padding:6px 10px;line-height:1;align-self:start;margin-top:4px}
.sec-h h2{font-family:var(--display);font-weight:700;font-size:var(--t-xl);line-height:1.05;color:var(--sand)}
.sec-h p{color:var(--muted);max-width:60ch;font-size:var(--t-m);margin-top:var(--s2)}
.label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;white-space:nowrap;border-radius:var(--r);display:inline-block;line-height:1.4}
.badge.ok{background:#2f6b3a;color:#e8f6ea}
.badge.go{background:#ff981f;color:#1b1004}
.badge.lock{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.stone .badge.lock{color:var(--stone-muted);border-color:var(--stone-edge)}
.panel{background:var(--bg-2);border:2px solid var(--line-2);border-radius:var(--r);box-shadow:0 5px 0 var(--shadow)}


/* The homepage follows the common MMORPG order (see design/landing-mmo-research.md):
   alternating full-bleed bands, centred headings over a small pixel ornament. */
.landing-page main>section:not(.hero){padding-block:var(--marketing-space)}
.landing-page .band{position:relative;isolation:isolate}
.landing-page .band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--bg-2);border-block:var(--marketing-rule) solid var(--line)}
.landing-page .sec-h{max-width:760px;margin:0 auto var(--s5);text-align:center}
.landing-page .sec-h h2{font-size:var(--marketing-headline);max-width:20ch;margin-inline:auto}
.landing-page .sec-h p{margin-inline:auto}
.landing-page .sec-h::after{content:"";display:block;width:120px;height:12px;margin:var(--s3) auto 0;background:var(--accent);-webkit-mask:var(--ornament) center/contain no-repeat;mask:var(--ornament) center/contain no-repeat}
.kicker,.sec-h p.kicker{font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon);margin:0 0 var(--s2)}
.landing-page .sec-h p.kicker{max-width:none}
.sec-h .num{display:none}
.px-icon{width:var(--icon);height:var(--icon);flex:none;image-rendering:pixelated}
/* journey: the map and the chapter cards */
.journey{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.mapbox{padding:8px;background:#1d160d}
.mapbox figcaption{font-family:var(--mono);font-size:11px;color:var(--stone-muted);padding:8px 4px 2px;line-height:1.5}
.mp{display:block;width:100%;height:auto;background:#0e5878}
.mp image{image-rendering:pixelated}
.mp .route{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mp .r-done{stroke:#ff981f;stroke-width:6}
.mp .r-boat{stroke:#ff981f;stroke-width:4;stroke-dasharray:1 8}
.mp .r-next{stroke:#ff981f;stroke-width:4;stroke-dasharray:10 8}
.mp .r-later{stroke:#f3e6bc;stroke-width:3;stroke-dasharray:8 9;opacity:.75}
.mp .r-case{stroke:#1d160d;stroke-width:10;opacity:.55}
.mp .st circle{stroke:#1d160d;stroke-width:3}
.mp .st text{font-family:var(--display);font-weight:700;font-size:15px;text-anchor:middle;dominant-baseline:central}
.mp .s-play circle{fill:#ff981f}.mp .s-play text{fill:#1b1004}
.mp .s-next circle{fill:#0b2a36;stroke:#ff981f}.mp .s-next text{fill:#ff981f}
.mp .s-later circle{fill:#f3e6bc}.mp .s-later text{fill:#3b3226}
.mp .pulse{fill:none;stroke:#ff981f;stroke-width:3}
.mp .lbl{font-family:var(--mono);font-weight:600;font-size:17px;fill:#fbf6e6;letter-spacing:.06em;paint-order:stroke;stroke:#0b2a36;stroke-width:4.5;stroke-linejoin:round}
.mp .sub{font-family:var(--mono);font-size:13px;fill:#ffcf8a;letter-spacing:.06em;paint-order:stroke;stroke:#0b2a36;stroke-width:4;stroke-linejoin:round}
.mp .minor{font-family:var(--mono);font-size:13px;fill:#e3eee9;letter-spacing:.04em;paint-order:stroke;stroke:#0b2a36;stroke-width:3.5;stroke-linejoin:round}
.mp .dot{fill:#fbf6e6;stroke:#0b2a36;stroke-width:2}
.mp .sea{font-family:var(--body);font-style:italic;font-size:19px;fill:#9fd3e0;letter-spacing:.12em}
.mp .land{font-family:var(--mono);font-size:13px;fill:#3b3a2a;letter-spacing:.3em}
.mp .state{font-family:var(--mono);font-size:12px;fill:#f2dc84;letter-spacing:.2em;paint-order:stroke;stroke:#1f4a25;stroke-width:3}
.mp .frame{fill:none;stroke:#f3e6bc;stroke-width:2}
.mp .leader{stroke:#f3e6bc;stroke-width:1.5;stroke-dasharray:4 4}
.mp .inset-t{font-family:var(--mono);font-size:12px;font-weight:600;fill:#f3e6bc;letter-spacing:.12em}
.mp .scale{stroke:#fbf6e6;stroke-width:3}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 4px 4px;padding:0;list-style:none;font-family:var(--mono);font-size:11px;color:var(--stone-muted)}
.legend li{display:flex;align-items:center;gap:6px}
.legend svg{width:30px;height:16px;flex:none}

.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--marketing-gap);list-style:none;padding:0;margin:0}
.ch{display:flex;flex-direction:column;padding:0;overflow:hidden;border:var(--marketing-rule) solid var(--line-2);outline:0;background:var(--bg-2);box-shadow:none;color:var(--ink)}
.ch .thumb{width:100%;aspect-ratio:4/3;object-fit:cover}.ch>div{padding:var(--s3)}
.chapter-label{display:block;font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lagoon);margin-bottom:var(--s1)}
.ch h3,.chapter-future h3{font:700 24px/1.15 var(--display);color:var(--sand)}
.ch p,.chapter-future p{font-size:var(--t-s);color:var(--muted);line-height:1.55;margin-top:var(--s1)}
.chapter-future{padding-top:var(--s2);border-top:var(--marketing-rule) solid var(--line)}
.chapter-future h3{font-size:20px}
/* what is Pendekar: four pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--marketing-gap);list-style:none;margin:0;padding:0}
.pillar{padding:var(--s3);background:var(--bg);border:var(--marketing-rule) solid var(--line-2);border-radius:var(--r)}
.pillar h3,.feature h3,.skill h3,.steps-start h3{font:700 22px/1.15 var(--display);color:var(--sand)}
.pillar h3{margin-top:var(--s2)}
.pillar p,.steps-start p{font-size:var(--t-s);color:var(--muted);line-height:1.55;margin-top:var(--s1)}
/* how it plays: alternating screenshot rows */
.features{display:grid;gap:var(--s6)}
.feature{margin:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:center}
.feature:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.feature:nth-child(even) img{order:2}
.feature img,.news-card img{border:3px solid var(--marketing-frame);outline:var(--marketing-rule) solid var(--stone-edge);border-radius:2px}
.feature img{width:100%;aspect-ratio:16/10;object-fit:cover;box-shadow:var(--frame-shadow)}
.feature h3{font-size:clamp(26px,2.6vw,34px)}
.feature p{color:var(--muted);max-width:44ch;margin-top:var(--s2)}
/* skills: a stone board like the in-game skills panel */
.skill-board{padding:var(--s3);background:var(--stone);color:var(--stone-ink);border:2px solid var(--marketing-frame);outline:var(--marketing-rule) solid var(--stone-edge);border-radius:var(--r);box-shadow:var(--frame-shadow)}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);list-style:none;margin:0;padding:0}
.skill{display:grid;grid-template-columns:var(--icon) minmax(0,1fr);gap:var(--s1) var(--s2);align-content:start;padding:var(--s2);background:var(--stone-2);border:var(--marketing-rule) solid var(--stone-edge);border-radius:var(--r)}
.skill .px-icon{grid-row:1/4}
.skill h3{color:var(--stone-ink)}
.skill h3 span{display:block;margin-top:2px;font:500 var(--t-xs)/1.4 var(--mono);letter-spacing:.06em;color:var(--marketing-gold)}
.skill p{font-size:var(--t-s);line-height:1.45;color:var(--stone-muted)}
.skill .teacher{font:500 var(--t-xs)/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--stone-ink)}
.plaque{margin-top:var(--s3);text-align:center;font:700 20px/1.3 var(--display);color:var(--stone-ink)}
.plaque span{display:block;font:italic 400 var(--t-m)/1.5 var(--body);color:var(--stone-muted)}
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) var(--marketing-gap)}
.person{margin:0;padding:0;border:0;outline:0;background:transparent;box-shadow:none;color:var(--ink)}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--bg-2)}
.person figcaption{padding-top:var(--s2)}.person h3{font:700 24px/1.1 var(--display);color:var(--sand)}
.person .role{display:flex;flex-wrap:wrap;gap:4px var(--s1);margin-top:var(--s1);font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--lagoon)}
.person .role i{font-style:normal;color:var(--muted)}.person p{font-size:var(--t-s);color:var(--muted);line-height:1.5;margin-top:var(--s1)}
.text-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin-top:var(--s3);color:var(--lagoon);font-weight:700;text-underline-offset:5px}
.text-link:hover{color:var(--ink)}
/* latest updates: one lead release and two smaller ones */
.news{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto;gap:var(--marketing-gap)}
.news-lead{grid-row:1/3}
.news-card{display:flex;flex-direction:column;gap:var(--s1);padding-bottom:var(--s3);color:var(--ink);text-decoration:none;background:var(--bg-2);border:var(--marketing-rule) solid var(--line-2);border-radius:var(--r);overflow:hidden}
.news-card img{width:100%;aspect-ratio:16/8;object-fit:cover;margin-bottom:var(--s1)}
.news-lead img{flex:1 1 0;min-height:300px;aspect-ratio:auto}
.news-card>:not(img){margin-inline:var(--s3)}
.news-meta{display:flex;gap:var(--s1);align-items:baseline;font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.news-meta b{font:700 18px/1 var(--display);letter-spacing:0;color:var(--accent)}
.news-card h3{font:700 24px/1.15 var(--display);color:var(--sand)}
.news-lead h3{font-size:clamp(28px,3vw,36px)}
.news-card p{font-size:var(--t-s);color:var(--muted);line-height:1.55}
.news-more{margin-top:auto;padding-top:var(--s1);font-weight:700;color:var(--lagoon)}
.news-card:hover{border-color:var(--accent)}.news-card:hover h3{text-decoration:underline;text-underline-offset:4px}
.landing-page .news-all{display:flex;width:max-content;max-width:100%;margin:var(--s4) auto 0}
/* start playing: three steps and a few questions */
.steps-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--marketing-gap);list-style:none;margin:0;padding:0}
.steps-start li{padding:var(--s3);background:var(--bg);border:var(--marketing-rule) solid var(--line-2);border-radius:var(--r)}
.step-n{display:inline-grid;place-items:center;width:44px;height:44px;font:700 24px/1 var(--display);color:var(--marketing-gold-ink);background:var(--marketing-gold);border:2px solid var(--marketing-frame);border-radius:var(--r);box-shadow:0 3px 0 var(--marketing-frame)}
.steps-start h3{margin-top:var(--s2)}
.faq{max-width:760px;margin:var(--s6) auto 0}
.faq-h{font:700 28px/1.15 var(--display);color:var(--sand);text-align:center;margin-bottom:var(--s3)}
.faq details{border-top:var(--marketing-rule) solid var(--line-2)}.faq details:last-child{border-bottom:var(--marketing-rule) solid var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;padding-block:var(--s1);cursor:pointer;list-style:none;font-weight:700;font-size:var(--t-m);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:700 24px/1 var(--display);color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--sand)}
.faq details p{max-width:62ch;padding-bottom:var(--s3);color:var(--muted)}
/* community: the newest players beside the places people gather */
.community{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s5);align-items:start}
.landing-page .players-heading-row h3{font:700 32px/1.05 var(--display);color:var(--sand);margin:0;font-variant-ligatures:none}
.landing-page .community .players-preview{padding-block:0}.landing-page .players-heading-row{margin-bottom:var(--s1)}
.landing-page .players-intro{font-size:var(--t-s)}.landing-page .players-total{margin-top:var(--s3)}
.links-grid{display:grid;gap:var(--s2);list-style:none;margin:0;padding:0}
.link-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px var(--s2);align-items:start;padding:var(--s2) var(--s3) var(--s2) var(--s2);color:var(--ink);text-decoration:none;background:var(--bg-2);border:var(--marketing-rule) solid var(--line-2);border-radius:var(--r)}
.link-card .px-icon{--icon:40px;grid-row:1/3}
.link-card b{font:700 22px/1.2 var(--display);color:var(--sand)}
.link-card span{font-size:var(--t-s);color:var(--muted);line-height:1.5}
.link-card:hover{border-color:var(--accent)}.link-card:hover b{text-decoration:underline;text-underline-offset:4px}
/* closing band: the harbour behind one last Play */
.landing-page .next-adventure{position:relative;isolation:isolate;overflow:hidden;margin-inline:calc(50% - 50vw);padding:clamp(96px,12vw,160px) var(--s2);text-align:center;color:var(--marketing-cream);background:var(--hero-bg)}
.next-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.next-adventure::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--next-scrim)}
.next-in{max-width:640px;margin-inline:auto}
.next-adventure .kicker{color:var(--marketing-gold)}
.next-adventure h2{font:700 var(--marketing-headline)/1.08 var(--display);color:var(--marketing-cream)}
.next-in>p:not(.kicker){max-width:52ch;margin:var(--s3) auto 0;color:var(--hero-muted)}
.next-adventure .cta{justify-content:center}.next-adventure .cta .text-link{margin:0;color:var(--marketing-cream)}.next-adventure .cta .text-link:hover{color:var(--marketing-gold)}
/* footer: grouped links under the closing band */
.landing-page .site-footer{display:block;margin-top:0;padding-block:var(--s6) var(--s5);border-top:0;font:400 var(--t-s)/1.5 var(--body);letter-spacing:0}
.footer-cols{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--s4)}
.footer-brand img{width:165px;height:auto;image-rendering:pixelated}
.footer-brand p{max-width:36ch;margin-top:var(--s2);color:var(--muted)}
.site-footer h2{margin:0 0 var(--s1);font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li>a,.site-footer li>span{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.landing-page .site-footer li>a{color:var(--ink);text-decoration:none}.landing-page .site-footer li>a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.footer-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);margin-top:var(--s5);padding-top:var(--s3);border-top:var(--marketing-rule) solid var(--line);font:400 var(--t-xs)/1.5 var(--mono);letter-spacing:.04em}
/* a small Play tab once the hero's Play has scrolled away; hidden over the closing band and footer */
.landing-page .dock-play{position:fixed;z-index:15;right:max(var(--s2),env(safe-area-inset-right));bottom:max(var(--s2),env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:var(--s1) var(--s3);font:700 20px/1 var(--display);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(var(--s2));transition:opacity var(--dur-dock) var(--ease-out),transform var(--dur-dock) var(--ease-out),visibility 0s linear var(--dur-dock)}
.landing-page .dock-play.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-dock) var(--ease-out),transform var(--dur-dock) var(--ease-out),visibility 0s}
.landing-page .dock-play.is-shown:active{transform:translateY(2px)}
/* build journal: newest first, a summary line on every entry, older entries folded */
.journal{display:flex;flex-direction:column;gap:var(--gap)}
.entry{margin:0}
.entry>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:4px var(--s2);align-items:center;padding:14px 16px}
.entry>summary::-webkit-details-marker{display:none}
.entry>summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--muted);grid-column:3;grid-row:1/3;align-self:center}
.entry[open]>summary::after{content:"–"}
.entry .ver{font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent);line-height:1;grid-row:1/3}
.entry h3{font-size:var(--t-l);font-weight:700;color:var(--sand);line-height:1.2}
.entry .sum{color:var(--muted);font-size:var(--t-s);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tagl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r);border:1px solid currentColor;line-height:1.4}
.tagl.new{color:var(--accent)}.tagl.world{color:var(--lagoon)}.tagl.people{color:var(--jungle)}.tagl.look{color:var(--sand)}.tagl.site{color:var(--muted)}.tagl.sound{color:var(--ink)}
.entry .body{display:flex;flex-direction:column;gap:14px;padding:4px 16px 20px calc(88px + 32px)}
.entry .body p,.entry .body ul{max-width:64ch}
.entry .body ul{margin:0;padding-left:20px}
.entry .ver.day time{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.entry .ver.day b{font-size:36px;line-height:.9}
.entry .ver.day small{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.upd{display:flex;flex-direction:column;gap:14px;padding-block:0;scroll-margin-top:80px}
.upd+.upd{border-top:1px solid var(--line);padding-top:24px;margin-top:10px}
.upd h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:var(--t-l);font-weight:700;color:var(--sand);line-height:1.2}
.upd .uv{font-family:var(--display);font-size:20px;color:var(--accent)}
.upd .lede{color:var(--muted);font-size:var(--t-s);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.utags{display:contents}
.entry figure{margin:4px 0 0;max-width:760px}
.entry figure.sm{max-width:300px}
.entry figure.md{max-width:480px}
.frame{border:3px solid #1d160d;outline:2px solid var(--stone-edge);background:#1d160d;border-radius:2px}
.entry figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
code{font-family:var(--mono);font-size:.85em;background:var(--bg-3);padding:1px 6px;border:1px solid var(--line)}
.jtools{display:flex;justify-content:flex-end;margin:-8px 0 12px}
.jtools button{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 10px;cursor:pointer}
.jtools button:hover{color:var(--ink);border-color:var(--ink)}

/* what comes next: quest cards */
.quests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.qcard{padding:14px 16px;min-width:0}
.qcard h3{font-family:var(--display);font-size:20px;font-weight:700;display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--stone-ink)}
.qcard p{color:var(--stone-muted);font-size:var(--t-s);margin-top:6px}
.qcard ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--stone-muted)}
.qcard li::before{content:"\25CB  ";color:var(--stone-muted)}
.qcard li.a{color:var(--stone-ink)}.qcard li.a::before{content:"\25B6  ";color:#ff981f}
.qcard li.d{color:#7fd48a;text-decoration:line-through;text-decoration-color:rgba(127,212,138,.5)}.qcard li.d::before{content:"\2713  ";color:#7fd48a}

/* how it is built */
.built{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3) var(--s5)}
.built p{color:var(--ink);max-width:40em}
.built p+p{margin-top:14px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--t-s);align-items:baseline}
.steps li:first-child{border-top:0}
.steps b{font-family:var(--display);color:var(--accent);font-size:20px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--s3)}
.stats div{padding:14px}
.stats strong{display:block;font-family:var(--display);font-size:30px;color:var(--sand);line-height:1}
.stats span{font-size:var(--t-s);color:var(--muted)}

footer{padding-block:var(--s4) var(--s5);border-top:1px solid var(--line);margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em}
footer a{color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.footer-links a{display:inline-flex;align-items:center;min-height:var(--s5);min-width:var(--s5)}


/* Responsive layout preserves the world and journal links at every width. */
@media(max-width:1100px){.nav ul{gap:4px 12px}.nav li a{letter-spacing:.04em}.landing-page .nav-world-detail{display:none}.journey{grid-template-columns:1fr 1.1fr}.hero{aspect-ratio:auto;--hero-scrim:linear-gradient(90deg,rgba(9,45,55,.96),rgba(9,45,55,.9) 50%,rgba(9,45,55,.3) 74%,transparent)}.hero-copy{max-width:430px}.hero .tag{font-size:40px}}
@media(max-width:960px){.journey{grid-template-columns:1fr}.mapbox{max-width:660px;margin-inline:auto}.cast{grid-template-columns:repeat(4,minmax(0,1fr))}.quests,.built{grid-template-columns:1fr}.nav li a{font-size:11px}
 .pillars,.skills{grid-template-columns:repeat(2,minmax(0,1fr))}.news{grid-template-columns:repeat(2,minmax(0,1fr))}.news-lead{grid-column:1/-1;grid-row:auto}.news-lead img{flex:none;min-height:0;aspect-ratio:16/9}.feature{gap:var(--s4)}.community{grid-template-columns:1fr}.links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brand{grid-column:1/-1}
 .landing-page .nav .wrap{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}.landing-page .nav .brand{grid-column:1/-1;grid-row:1;width:280px;justify-self:center}.landing-page .brand .logo{width:248px}.landing-page .nav-left{grid-column:1;grid-row:2;justify-self:start}.landing-page .nav-right{grid-column:2;grid-row:2;justify-self:end}.landing-page .nav li:not(.keep){display:none}
}
@media(max-width:760px){
 .hero{display:block;min-height:0}.hero::before{background:linear-gradient(to bottom,transparent 40vw,rgba(9,45,55,.86) 58vw,var(--hero-bg) 70.757881vw)}.hero-in{padding:58vw var(--s3) var(--s5)}.hero-copy{max-width:560px}.hero-kicker{font-size:11px;margin-bottom:var(--s2)}.hero .tag{font-size:40px;margin-top:var(--s2)}.hero .lede{font-size:18px;max-width:42ch}
 .cast{grid-template-columns:repeat(2,minmax(0,1fr))}.features{gap:var(--s5)}.feature,.feature:nth-child(even){grid-template-columns:1fr;gap:var(--s3)}.feature:nth-child(even) img{order:0}.feature p{max-width:60ch}.steps-start{grid-template-columns:1fr}.landing-page .sec-h{margin-bottom:var(--s4)}
 .mp .minor,.mp .sub,.mp .sea,.mp .land,.mp .state,.mp .inset,.mp .leader{display:none}.mp .lbl{font-size:27px;stroke-width:7}
}
@media(max-width:560px){
 body{font-size:17px}.nav .wrap{justify-content:center;padding-block:var(--s1);gap:0}.nav ul{width:100%;justify-content:space-between;margin:0;gap:var(--s1)}.nav li:not(.keep){display:none}.nav li a{font-size:12px}.nav .brand{min-height:44px}.brand .beta{font-size:10px}.nav ul .play{min-width:80px}.nav{position:sticky}
 .landing-page .nav ul{width:auto}
 .hero-in{padding-inline:var(--s2)}.hero .tag{font-size:clamp(28px,8.6vw,36px)}.badges li{font-size:11px}.hero-note{font-size:13px}.hero-explore{font-size:16px}.cta{gap:var(--s2)}.hero .cta .btn{min-width:132px}
 .chapters{gap:var(--s3) var(--s2)}.ch .thumb{aspect-ratio:1}.ch>div{padding:var(--s2)}.ch h3{font-size:22px}.chapter-label{font-size:10px}.ch p{font-size:15px}.chapter-future h3{font-size:20px}.pillars,.skills,.news,.links-grid{grid-template-columns:1fr}.skill-board{padding:var(--s2)}.landing-page .sec-h p:not(.kicker){font-size:17px}.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-page .dock-play{left:var(--s2);right:var(--s2)}.cast{gap:var(--s4) var(--s2)}.person h3{font-size:22px}.person .role{font-size:10px}.person .role i{display:none}.person p{font-size:15px}
 .entry>summary{grid-template-columns:56px minmax(0,1fr) auto;padding:12px}.entry .ver{font-size:20px}.entry .body{padding:4px 12px 16px}.stats{grid-template-columns:1fr}
 .sec-h{margin-bottom:var(--s3)}.landing-page .players-heading-row h3{font-size:28px}.landing-page .players-heading-row .players-button{font-size:18px}.next-adventure .cta{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.landing-page .wood-play:active{transform:none}*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* Account controls occupy the trailing edge without moving the centred logo. */
.nav .nav-account{display:flex;align-items:center;gap:4px;min-width:0}
.nav .nav-account a{max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;align-content:center;text-align:center;color:var(--ink)}
.nav .nav-account .nav-username{text-transform:none;letter-spacing:0}
.nav-logout{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer}
.nav-logout[hidden]{display:none}
.nav-logout:hover{background:var(--bg-2);color:var(--ink)}
.nav-logout:active{background:var(--bg-3)}
.nav-logout-dialog{width:min(440px,calc(100vw - 32px));padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg);color:var(--ink);box-shadow:0 16px 64px var(--shadow)}
.nav-logout-dialog::backdrop{background:rgba(0,0,0,.65)}
.nav-logout-dialog h2{margin:0 0 var(--s1);font:700 32px/1.15 var(--display)}
.nav-logout-dialog p{margin:0;font:400 18px/1.5 var(--body)}
.nav-logout-dialog .nav-logout-error{color:var(--accent);margin-top:var(--s1)}
.nav-logout-error:empty{display:none}
.nav-logout-actions{display:flex;justify-content:flex-end;gap:var(--s1);margin-top:var(--s3);flex-wrap:wrap}
.nav-logout-actions button{min-height:44px;padding:8px 16px;border:1px solid var(--line-2);border-radius:var(--r);font:600 15px/1.3 var(--body);background:var(--bg-2);color:var(--ink);cursor:pointer}
.nav-logout-actions button:hover{background:var(--bg-3)}
.nav-logout-actions [data-logout-confirm]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);min-width:108px}
.nav-logout-actions [data-logout-confirm]:hover{filter:brightness(1.1)}
.nav-logout-actions button:active{transform:translateY(1px)}
.nav-logout-actions button:disabled{opacity:.65;cursor:wait}
@media(min-width:961px) and (max-width:1250px){.landing-page .nav ul{gap:8px}.landing-page .nav .nav-account a{max-width:96px}}
@media(max-width:960px){
 .landing-page .nav .wrap{position:relative;grid-template-columns:1fr}
 .landing-page .nav .brand{width:auto;justify-self:start;padding-bottom:18px}
 .landing-page .brand .logo{width:165px}
 .landing-page .nav-left{display:none}
 .landing-page .nav-right{grid-column:1;grid-row:2;justify-self:stretch;justify-content:center}
 .landing-page .nav-account{position:absolute;right:0;top:var(--s1)}
 .landing-page .nav .nav-account a{max-width:128px}
}
@media(max-width:420px){
 .landing-page .brand .logo{width:140px}
 .landing-page .nav .nav-account a{max-width:88px}
 .journal-page .nav ul{gap:4px 8px}
 .journal-page .nav .nav-account a{max-width:88px}
}
@media(prefers-reduced-motion:reduce){.nav-logout-actions button:active{transform:none}}

/* A community doorway at the top; two soft pulses draw attention before it settles. */
.community-invite-bar{--dur-community-pulse:2400ms;display:flex;justify-content:center;margin-inline:calc(-1 * var(--s2));padding:var(--s1) var(--s2);background:var(--marketing-frame);border-bottom:1px solid var(--play-wood-edge)}
.community-invite{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);max-width:100%;min-height:var(--s5);padding:var(--s1) var(--s2);border:1px solid var(--marketing-gold);border-radius:var(--r);background:var(--marketing-gold);color:var(--marketing-gold-ink);font:700 var(--t-m)/1.2 var(--body);text-decoration:none;transition:transform var(--dur-press) var(--ease-out)}
.community-invite::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 var(--s2) var(--marketing-gold);opacity:0;pointer-events:none}
.community-invite svg{flex:none;width:var(--s3);height:var(--s3)}
.community-invite-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--s1)}
.community-invite-platform{font:600 var(--t-xs)/1.5 var(--mono);white-space:nowrap}
.community-invite:hover{background:var(--marketing-cream);border-color:var(--marketing-cream);color:var(--marketing-gold-ink)}
.community-invite:focus-visible{outline:2px solid var(--marketing-cream);outline-offset:3px}
.community-invite:active{transform:translateY(2px)}
@media(prefers-reduced-motion:no-preference){
 .community-invite::after{animation:community-pulse var(--dur-community-pulse) ease-in-out 2}
 @keyframes community-pulse{0%,100%{opacity:0}50%{opacity:.65}}
}
@media(prefers-reduced-motion:reduce){.community-invite:active{transform:none}}