/* Pendekar homepage: a kampung house wall of overlapping timber boards (papan susun sirih), with the game's
   lacquered teak, ukiran relief, brass and lining hung on it, songket hems and paper notices pinned up.
   Palette, type and spacing tokens come from players/site-tokens.css; the shared navigation and journal layout
   stay in marketing.css. Page order follows design/landing-mmo-research.md. Dark stained boards by default; pale
   boards with ink text in the light scheme, where the teak, lining, paper and brass keep their own colours. */
:root{
 --l-teak:url('/img/landing/teak.webp');--l-corner:url('/img/landing/ukiran-corner.svg');--l-divider:url('/img/landing/ukiran-divider.svg');
 --l-songket:url('/img/landing/songket.svg');--l-paper:url('/img/landing/paper.webp');
 --l-wall:url('/img/landing/wall.webp');--l-deckle:url('/img/landing/deckle.svg');--l-deckle-end:url('/img/landing/deckle-bottom.svg');
 --sea:#0b2a36;--wall-base:#4a250e;--wall-stain:rgba(10,5,2,.38);--sheet-bleed:max(calc(-1 * var(--s4)),calc(50% - 50vw + 6px));
 --muted:#efe2c4;--lagoon:#f0cf8a;
 --wood-dark:#1c130d;--wood-edge:#392217;--wood-ivory:#f6ecd2;--wood-muted:#d3bf9b;--brass:#e3bd70;--brass-dim:#c4a066;--brass-line:rgba(227,189,112,.45);
 --lining:#202922;--lining-dark:#121914;
 --paper-ink:#2a2112;--paper-muted:#4f402a;--paper-red:#8e1f2c;--paper-rule:rgba(42,33,18,.3);
 --wood-surface:linear-gradient(110deg,rgba(22,12,7,.42),rgba(22,12,7,.66)),var(--l-teak) 0 0/512px;
 --wood-panel:linear-gradient(rgba(16,9,5,.56),rgba(16,9,5,.72)),var(--l-teak) 0 0/512px;
 --wood-bevel:inset 0 1px 0 rgba(255,221,161,.32),inset 0 -2px 0 rgba(14,8,4,.65);
 --wood-lift:0 0 0 1px var(--wood-dark),0 0 0 2px rgba(227,189,112,.26),0 10px 20px rgba(8,4,2,.55);
 --well:radial-gradient(ellipse at 50% 0%,var(--lining),var(--lining-dark));
 --well-sink:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,221,161,.16);
 --serif:'Alegreya',Georgia,'Times New Roman',serif;
 --songket-h:38px;--corner:56px;--medal:88px;--icon:48px;
 --hero-bg:#092d37;--hero-muted:#e1deca;--hero-copy-top:clamp(132px,12vw,200px);--hero-copy-width:560px;
 --hero-copy-edge:calc(max(0px,(100vw - var(--marketing-width))/2) + var(--hero-copy-width) + var(--s2));
 --hero-scrim:linear-gradient(90deg,rgba(7,31,41,.97),rgba(7,31,41,.9) calc(var(--hero-copy-edge) - var(--s7)),rgba(7,31,41,.72) var(--hero-copy-edge),transparent calc(var(--hero-copy-edge) + var(--s7)*3));
 --next-scrim:radial-gradient(ellipse at center,rgba(7,31,41,.8),rgba(7,31,41,.9) 70%);
 --l-heading:var(--wood-ivory);--l-kicker:#f0cf8a;
 --dur-press:150ms;--dur-hover:240ms;--dur-glint:500ms;--dur-dock:200ms;--dur-community-pulse:2400ms;--ease-out:cubic-bezier(0,0,.2,1);
}
.landing-page{background:var(--l-wall) 0 0/1024px,var(--wall-base)}

/* Wood, lining and the night bands are dark materials in both schemes: shared components inside them keep the night tokens. */
.landing-page .nav,.teak-frame,.well,.ch,.steps-start li,.link-card,.hero,.next-adventure,.site-footer{color-scheme:dark;--bg:#0b2a36;--bg-2:#10394a;--bg-3:#154658;--ink:#eadfc2;--muted:#a9bdb8;--line:rgba(234,223,194,.16);--line-2:rgba(234,223,194,.3);--accent:#ff981f;--accent-ink:#1b1004;--lagoon:#3fd0d8;--jungle:#7fd48a;--sand:#f3e6bc;--shadow:#06161d}
/* the day page: pale boards, ink headings and deep songket-red accents */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--l-text-shadow:none;--l-wall:url('/img/landing/wall-day.webp');--wall-base:#d4bb9d;--wall-stain:rgba(70,40,15,.1);--l-heading:var(--paper-ink);--l-kicker:#5a1019;--l-heading-shadow:none;--muted:#3d2f1c;--lagoon:#5a1019}}
:root[data-theme="light"]{--l-text-shadow:none;--l-wall:url('/img/landing/wall-day.webp');--wall-base:#d4bb9d;--wall-stain:rgba(70,40,15,.1);--l-heading:var(--paper-ink);--l-kicker:#5a1019;--l-heading-shadow:none;--muted:#3d2f1c;--lagoon:#5a1019}

/* navigation: a carved teak lintel */
.landing-page .nav{background:linear-gradient(180deg,rgba(14,8,4,.7),rgba(14,8,4,.86)),var(--l-teak) 0 30%/512px;border-bottom:2px solid #6b4a20;box-shadow:inset 0 -1px 0 var(--brass-line),0 4px 10px rgba(3,10,13,.4)}
.landing-page .nav li a{color:var(--wood-muted)}
.landing-page .nav li a:hover{color:var(--wood-ivory)}
.landing-page .nav .nav-account a{color:var(--wood-ivory)}
.landing-page .brand .beta{color:var(--brass)}

/* A community doorway at the top; two soft pulses draw attention before it settles. */
.community-invite-bar{display:flex;justify-content:center;margin-inline:calc(-1 * var(--s2));padding:var(--s1) var(--s2);background:var(--wood-dark);border-bottom:1px solid var(--brass-line)}
.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(--brass);border-radius:var(--r);background:var(--brass);color:var(--paper-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(--brass);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(--wood-ivory);border-color:var(--wood-ivory);color:var(--paper-ink)}
.community-invite:focus-visible{outline:2px solid var(--wood-ivory);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}}

/* section rhythm: one continuous board wall; every other band is stained darker, and notices are pinned paper */
.landing-page main>section.l-band{position:relative;isolation:isolate;padding-block:var(--marketing-space)}
.l-band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none}
.l-deep::before{background:linear-gradient(to bottom,transparent,var(--wall-stain) 96px,var(--wall-stain) calc(100% - 96px),transparent)}
.landing-page .l-band .sec-h h2,.landing-page .l-band .sec-h p,.pillar,.feature figcaption,.person figcaption,.faq-h{text-shadow:var(--l-text-shadow,0 1px 2px rgba(8,4,2,.7))}
.landing-page .sec-h{max-width:780px;margin:0 auto var(--s5);text-align:center}
.kicker,.sec-h p.kicker{max-width:none;margin:0 0 var(--s2);font:600 var(--t-xs)/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--l-kicker)}
.landing-page .sec-h h2{max-width:20ch;margin-inline:auto;font:800 clamp(38px,4.6vw,60px)/1.02 var(--serif);letter-spacing:-.01em;color:var(--l-heading);text-shadow:var(--l-heading-shadow,0 2px 0 rgba(0,0,0,.25))}
.landing-page .sec-h p:not(.kicker){max-width:60ch;margin:var(--s2) auto 0;color:var(--muted)}
.landing-page .sec-h::after{content:"";display:block;width:min(320px,80%);aspect-ratio:400/36;margin:var(--s3) auto 0;background:var(--l-kicker);-webkit-mask:var(--l-divider) center/contain no-repeat;mask:var(--l-divider) center/contain no-repeat}
.chapter-label{display:block;margin-bottom:var(--s1);font:600 var(--t-xs)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.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(--wood-ivory)}
.px-icon{width:var(--icon);height:var(--icon);flex:none;image-rendering:pixelated}

/* materials */
.teak-frame{position:relative;padding:14px;background:var(--wood-surface);border:1px solid var(--wood-edge);border-radius:8px;box-shadow:var(--wood-bevel),var(--wood-lift)}
.teak-frame::before,.teak-frame::after{content:"";position:absolute;z-index:2;width:var(--corner);height:var(--corner);background:var(--l-corner) center/contain no-repeat;pointer-events:none}
.teak-frame::before{left:-3px;top:-3px}
.teak-frame::after{right:-3px;bottom:-3px;transform:rotate(180deg)}
.shot{overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px #0d0805,0 0 0 2px var(--brass-line)}
.shot img{width:100%;transition:transform var(--dur-hover) var(--ease-out)}
.well{background:var(--well);border:1px solid #0b0f0c;border-radius:6px;box-shadow:var(--well-sink)}
.medal{display:grid;place-items:center;width:var(--medal);height:var(--medal);border-radius:50%;background:var(--wood-surface);box-shadow:inset 0 0 0 3px #8a6a32,inset 0 0 0 5px var(--wood-dark),inset 0 0 0 7px var(--brass-line),inset 0 6px 12px rgba(0,0,0,.55),0 8px 18px rgba(3,10,13,.5)}
.medal .px-icon{--icon:44px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.brass-plate{display:inline-block;padding:var(--s1) var(--s3);font:700 18px/1.3 var(--serif);color:#2a1a0c;background:linear-gradient(180deg,#f3d896,#d2a75e 60%,#bf914b);border:1px solid #5d3f18;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,246,214,.7),inset 0 -2px 0 rgba(80,52,20,.5),0 3px 0 var(--wood-dark),0 8px 18px rgba(0,0,0,.35)}

/* Play: carved teak with brass pins and a short glint on hover or focus. The label stays above the glint. */
.landing-page .wood-play{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:176px;min-height:60px;padding:var(--s2) var(--s4);font:700 24px/1 var(--display);color:var(--wood-ivory);text-decoration:none;border:2px solid #ad7a43;border-radius:6px;background:linear-gradient(180deg,rgba(255,214,150,.12),rgba(20,10,4,.42)),linear-gradient(rgba(20,10,4,.32),rgba(20,10,4,.32)),var(--l-teak) 0 40%/512px;box-shadow:inset 0 2px 0 #e3bd7066,inset 0 -3px 0 #160e08,0 4px 0 var(--wood-dark),0 10px 24px rgba(0,0,0,.35);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 9px 9px,#e3bd70 0 1.5px,#75502e 2px 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#e3bd70 0 1.5px,#75502e 2px 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 9px) 9px,#e3bd70 0 1.5px,#75502e 2px 3px,transparent 3.5px),radial-gradient(circle at 9px calc(100% - 9px),#e3bd70 0 1.5px,#75502e 2px 3px,transparent 3.5px)}
.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%,#fff0d026 50%,transparent);transform:translateX(-180%) skewX(-20deg);opacity:0}
.landing-page .wood-play:hover{color:var(--wood-ivory);filter:none;border-color:var(--brass)}
.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}}
}

/* hero: the island art, a dark tide behind the words and a songket hem */
.hero{position:relative;margin-inline:calc(50% - 50vw);min-height:740px;aspect-ratio:1491/1055;display:grid;align-items:start;overflow:hidden;padding:0;background:var(--hero-bg);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::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:var(--songket-h);background:var(--l-songket) 0 0/auto 100% repeat-x;box-shadow:0 -8px 20px rgba(0,0,0,.35)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--marketing-width);margin-inline:auto;padding:var(--hero-copy-top) var(--s2) calc(var(--s7) + var(--songket-h))}
.hero-copy{max-width:var(--hero-copy-width)}
.hero-announce{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin-bottom:var(--s4);padding:var(--s1) var(--s2) var(--s1) var(--s1);color:var(--wood-ivory);font-weight:700;font-size:var(--t-s);text-decoration:none;background:rgba(7,31,41,.78);border:1px solid var(--brass-line);border-radius:999px}
.hero-announce b{padding:4px 10px;font:700 13px/1 var(--display);letter-spacing:.04em;color:var(--wood-ivory);background:#8e1f2c;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(227,189,112,.6)}
.hero-announce:hover{border-color:var(--brass);color:#fff}
.hero-kicker{margin-bottom:var(--s2);font:600 var(--t-xs)/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.hero .tag{font:800 clamp(44px,4.3vw,64px)/1 var(--serif);letter-spacing:-.015em;color:var(--wood-ivory);text-wrap:balance;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.hero .lede{max-width:42ch;margin-top:var(--s3);font-size:20px;line-height:1.5;color:var(--hero-muted)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.hero-explore{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:700;color:var(--marketing-cream);text-decoration:underline;text-underline-offset:5px}
.hero-explore:hover{color:var(--brass)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:var(--s4) 0 0;padding:0}
.badges li{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) 12px;font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--marketing-cream);background:rgba(7,31,41,.75);border:1px solid var(--brass-line);border-radius:4px}
.badges li::before{content:"";width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}
.hero-note{margin-top:var(--s2);font-size:var(--marketing-small);color:var(--hero-muted)}
.hero-support{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--s5);margin-top:var(--s1);font-size:var(--t-s);font-weight:700;color:var(--brass);text-underline-offset:var(--r)}
.hero-support:hover{color:var(--wood-ivory)}

/* what is Pendekar: four pillars under brass-ringed medallions */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) var(--marketing-gap);list-style:none;margin:0;padding:0;text-align:center}
.pillar .medal{margin:0 auto var(--s3)}
.pillar h3{font:700 24px/1.15 var(--serif);color:var(--l-heading)}
.pillar p{max-width:32ch;margin:var(--s1) auto 0;font-size:var(--t-s);line-height:1.6;color:var(--muted)}

/* how it plays: framed screenshots, alternating sides */
.features{display:grid;gap:var(--s7)}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:center;margin:0}
.feature:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.feature:nth-child(even) .teak-frame{order:2}
.feature .shot img{aspect-ratio:16/10;object-fit:cover}
.feature:hover .shot img{transform:scale(1.03)}
.feature-n{display:block;margin-bottom:var(--s1);font:700 56px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--l-kicker)}
.feature h3{font:800 clamp(30px,3vw,42px)/1.05 var(--serif);color:var(--l-heading)}
.feature .chapter-label,.chapter-future .chapter-label{color:var(--l-kicker)}
.feature p{max-width:44ch;margin-top:var(--s2);color:var(--muted)}

/* skills: the in-game skills panel, life size */
.skill-board{padding:var(--s4) var(--s4) var(--s3);border-radius:12px;text-align:center}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);list-style:none;margin:0;padding:0;text-align:left}
.skill{display:grid;grid-template-columns:var(--icon) minmax(0,1fr);align-content:start;gap:var(--s1) var(--s2);padding:var(--s2)}
.skill .px-icon{grid-row:1/4;box-sizing:content-box;padding:6px;margin:-6px 0 0 -6px;background:rgba(0,0,0,.28);border-radius:4px;box-shadow:inset 0 0 0 1px var(--brass-line)}
.skill h3{font:700 22px/1.1 var(--serif);color:var(--wood-ivory)}
.skill h3 span{display:block;margin-top:2px;font:italic 500 16px/1.2 var(--serif);color:var(--brass)}
.skill p{font-size:var(--t-s);line-height:1.45;color:var(--wood-muted)}
.skill .teacher{font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-dim)}
.skill-board .brass-plate{margin-top:var(--s4)}
.skill-note{margin-top:var(--s2);font:italic 500 var(--t-m)/1.4 var(--serif);color:var(--wood-muted)}

/* the world: route map and chapter cards */
.journey{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.mapbox{margin:0}
.mapbox figcaption{padding:var(--s1) 4px 2px;font:11px/1.5 var(--mono);color:var(--wood-muted)}
.mp{display:block;width:100%;height:auto;background:#0e5878;border-radius:3px;box-shadow:0 0 0 1px #0d0805,0 0 0 2px var(--brass-line)}
.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-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-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:11px/1.4 var(--mono);color:var(--wood-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;margin:0;padding:0}
.ch{display:flex;flex-direction:column;overflow:hidden;background:var(--wood-panel);border:1px solid var(--wood-edge);border-radius:8px;box-shadow:var(--wood-bevel),var(--wood-lift)}
.ch .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:2px solid var(--brass-line)}
.ch>div{padding:var(--s3)}
.ch h3,.chapter-future h3{font:700 24px/1.15 var(--serif);color:var(--wood-ivory)}
.chapter-future h3{color:var(--l-heading)}
.ch p,.chapter-future p{margin-top:var(--s1);font-size:var(--t-s);line-height:1.55;color:var(--wood-muted)}
.chapter-future p{color:var(--muted)}
.chapter-future{align-self:stretch;padding:var(--s3);border:1px dashed var(--brass-line);border-radius:8px}

/* people: portraits in arched windows of carved teak */
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--marketing-gap)}
.person{margin:0;text-align:center}
.arch{padding:10px;background:var(--wood-surface);border:1px solid var(--wood-edge);border-radius:50% 50% 10px 10px/30% 30% 10px 10px;box-shadow:var(--wood-bevel),var(--wood-lift)}
.arch img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--sea);border-radius:50% 50% 5px 5px/30% 30% 5px 5px;box-shadow:0 0 0 1px #0d0805,0 0 0 2px var(--brass-line)}
.person figcaption{padding-top:var(--s2)}
.person h3{font:700 24px/1.1 var(--serif);color:var(--l-heading)}
.person .role{display:flex;flex-wrap:wrap;justify-content:center;gap:4px var(--s1);margin-top:var(--s1);font:600 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--l-kicker)}
.person .role i{font-style:normal;color:var(--muted)}
.person p{max-width:32ch;margin:var(--s1) auto 0;font-size:var(--t-s);line-height:1.5;color:var(--muted)}

/* latest updates: a sheet of paper with torn edges, inked like a notice */
.l-paper{--ink:var(--paper-ink);--muted:var(--paper-muted);--lagoon:var(--paper-red);--accent:var(--paper-red);--brass:var(--paper-red);--line:var(--paper-rule);--line-2:rgba(42,33,18,.42);color:var(--paper-ink)}
.landing-page main>section.l-paper{margin-block:var(--s5);padding-block:calc(var(--marketing-space) + var(--s3));box-shadow:0 18px 36px 22px rgba(8,4,2,.42)}
.l-paper::after{content:"";position:absolute;z-index:-1;inset:var(--s3) var(--sheet-bleed) auto;height:var(--s4);pointer-events:none;background:radial-gradient(circle at var(--s4) 50%,#fbe7b0 0 2px,#c99a4c 3px 6px,#6b4a20 7px,rgba(30,15,5,.3) 8px,transparent 10px),radial-gradient(circle at calc(100% - var(--s4)) 50%,#fbe7b0 0 2px,#c99a4c 3px 6px,#6b4a20 7px,rgba(30,15,5,.3) 8px,transparent 10px)}
.l-paper::before{inset:0 var(--sheet-bleed);background:var(--l-paper) 0 0/480px;-webkit-mask:var(--l-deckle) top/600px 20px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 38px) no-repeat,var(--l-deckle-end) bottom/600px 20px repeat-x;mask:var(--l-deckle) top/600px 20px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 38px) no-repeat,var(--l-deckle-end) bottom/600px 20px repeat-x}
.l-paper{--l-text-shadow:none;--l-kicker:var(--paper-red)}
.l-paper .sec-h h2{color:var(--paper-ink);text-shadow:none}
.news{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto;gap:var(--s3) var(--s4)}
.news-lead{grid-row:1/3;padding-right:var(--s4);border-right:1px solid var(--paper-rule)}
.news-card{display:flex;flex-direction:column;gap:var(--s1);color:var(--paper-ink);text-decoration:none}
.news-card img{width:100%;aspect-ratio:16/8;object-fit:cover;margin-bottom:var(--s1);border:2px solid var(--paper-ink);border-radius:2px;box-shadow:4px 4px 0 rgba(42,33,18,.18)}
.news-lead img{flex:1 1 0;min-height:300px;aspect-ratio:auto}
.news-meta{display:flex;align-items:baseline;gap:var(--s1);font:600 var(--t-xs)/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted)}
.news-meta b{font:700 18px/1 var(--display);letter-spacing:0;color:var(--paper-red)}
.news-card h3{font:800 28px/1.1 var(--serif);color:var(--paper-ink)}
.news-lead h3{font-size:clamp(32px,3.4vw,44px)}
.news-card p{font-size:var(--t-s);line-height:1.6;color:var(--paper-muted)}
.news-more{margin-top:auto;padding-top:var(--s1);font-weight:700;color:var(--paper-red)}
.news-card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.news-card+.news-card:not(.news-lead){padding-top:var(--s3);border-top:1px solid var(--paper-rule)}
.news-card:nth-child(2){padding-top:0;border-top:0}
.landing-page .news-all{display:flex;width:max-content;max-width:100%;margin:var(--s5) auto 0;color:var(--paper-red)}
.landing-page .news-all:hover{color:var(--paper-ink)}

/* start playing: three teak plaques on a brass route, and a lined drawer of questions */
#start>p .text-link:hover{color:var(--l-heading)}
.steps-start{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);list-style:none;margin:0;padding:0}
.steps-start::before{content:"";position:absolute;z-index:-1;top:28px;left:16%;right:16%;border-top:3px dotted var(--brass-line)}
.steps-start li{padding:0 var(--s3) var(--s3);text-align:center;background:var(--wood-panel);border:1px solid var(--wood-edge);border-radius:8px;box-shadow:var(--wood-bevel),var(--wood-lift);margin-top:28px}
.step-n{display:grid;place-items:center;width:56px;height:56px;margin:-28px auto 0;font:700 28px/1 var(--display);color:#2a1a0c;background:radial-gradient(circle at 35% 30%,#f6dc9c,#cfa35a 55%,#a07a3c);border:2px solid var(--wood-dark);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,246,214,.7),0 4px 10px rgba(0,0,0,.45)}
.steps-start h3{margin-top:var(--s2);font:700 26px/1.15 var(--serif);color:var(--wood-ivory)}
.steps-start p{max-width:32ch;margin:var(--s1) auto 0;font-size:var(--t-s);line-height:1.55;color:var(--wood-muted)}
.faq{max-width:820px;margin:var(--s7) auto 0}
.faq-h{margin-bottom:var(--s3);text-align:center;font:800 32px/1.1 var(--serif);color:var(--l-heading)}
.faq .well{padding:var(--s1) var(--s4)}
.faq details+details{border-top:1px solid rgba(227,189,112,.22)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px;padding-block:var(--s1);cursor:pointer;list-style:none;font:700 20px/1.3 var(--serif);color:var(--wood-ivory)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;font:700 20px/1 var(--display);color:var(--brass);border:1px solid var(--brass-line);border-radius:50%}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--brass)}
.faq details p{max-width:62ch;padding-bottom:var(--s3);color:var(--wood-muted)}

/* community: the newest players in a lined drawer, beside brass-ringed doorways */
.community{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s5);align-items:start}
.community .well{padding:var(--s3)}
.landing-page .community .players-preview{padding-block:0}
.landing-page .players-heading-row{margin-bottom:var(--s1)}
.landing-page .players-heading-row h3{margin:0;font:800 32px/1.05 var(--serif);color:var(--wood-ivory)}
.landing-page .players-eyebrow{color:var(--brass)}
.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:64px minmax(0,1fr);align-items:center;gap:2px var(--s2);padding:var(--s2) var(--s3) var(--s2) var(--s2);color:var(--wood-ivory);text-decoration:none;background:var(--wood-panel);border:1px solid var(--wood-edge);border-radius:8px;box-shadow:var(--wood-bevel),var(--wood-lift);transition:transform var(--dur-hover) var(--ease-out)}
.link-card .medal{--medal:64px;grid-row:1/3}
.link-card .medal .px-icon{--icon:32px}
.link-card b{align-self:end;font:700 22px/1.2 var(--serif);color:var(--wood-ivory)}
.link-card span:not(.medal){align-self:start;font-size:var(--t-s);line-height:1.5;color:var(--wood-muted)}
.link-card:hover{transform:translateY(-2px);border-color:var(--brass)}
.link-card:hover b{text-decoration:underline;text-underline-offset:4px}

/* closing band: the harbour under a songket hem */
.landing-page .next-adventure{position:relative;isolation:isolate;overflow:hidden;margin-inline:calc(50% - 50vw);padding:calc(clamp(96px,12vw,160px) + var(--songket-h)) var(--s2) clamp(96px,12vw,160px);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-adventure::after{content:"";position:absolute;inset:0 0 auto;height:var(--songket-h);background:var(--l-songket) 0 0/auto 100% repeat-x}
.next-in{max-width:680px;margin-inline:auto}
.next-adventure h2{font:800 clamp(42px,5vw,68px)/1.02 var(--serif);color:var(--wood-ivory);text-shadow:0 3px 0 rgba(0,0,0,.3)}
.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(--brass)}

/* optional support and a personal note from the maker */
.support-grid,.developer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.landing-page :is(.support-grid,.developer-grid) .sec-h{max-width:none;margin:0;text-align:left}
.landing-page :is(.support-grid,.developer-grid) .sec-h h2{margin-inline:0}
.landing-page :is(.support-grid,.developer-grid) .sec-h::after{margin-inline:0}
.landing-page .support-grid .sec-h p:not(.kicker){margin-inline:0}
.support-card{padding:var(--s4)}
.support-card h3{font:700 var(--t-l)/1.2 var(--serif);color:var(--wood-ivory)}
.support-card>p:not(.chapter-label){margin-top:var(--s2);color:var(--wood-muted)}
.support-actions{margin-top:var(--s3)}
.support-socials{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.social-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-width:var(--s5);min-height:var(--s5);padding:var(--s1) var(--s2);border:1px solid var(--brass-line);border-radius:var(--r);font-weight:700;color:var(--wood-ivory);text-decoration:none}
.social-link:hover{color:var(--brass);border-color:var(--brass);text-decoration:underline;text-underline-offset:var(--r)}
.social-link:active{background:var(--lining)}
.social-link:focus-visible,.support-share:focus-visible{outline-color:var(--brass)}
.support-share{gap:var(--s2);width:100%;min-width:0;line-height:1.2;cursor:pointer}
.support-share[hidden]{display:none}
.support-share:disabled{cursor:wait;filter:none;transform:none}
.support-card .support-status{min-height:3em;margin-top:var(--s2);font-size:var(--t-s);line-height:1.5;color:var(--wood-muted)}
.support-sharing{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--brass-line)}
.support-sharing .text-link{margin-top:var(--s1)}
.developer-grid{--l-kicker:var(--paper-red);grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}
.landing-page .developer-grid .sec-h h2{max-width:none;color:var(--paper-ink);text-shadow:none}
.developer-story{max-width:60ch;color:var(--paper-ink)}
.developer-story p+p{margin-top:var(--s3)}
.developer-thanks{font-style:italic}
.developer-story .text-link{color:var(--paper-red)}
.developer-story .text-link:hover{color:var(--paper-ink)}
.developer-story .text-link:focus-visible{outline-color:var(--paper-red)}
.developer-contact{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--paper-rule)}
.developer-socials{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.developer-socials .social-link{color:var(--paper-red);border-color:currentColor}
.developer-socials .social-link:hover{color:var(--paper-ink)}
.developer-socials .social-link:active{color:var(--paper-ink);background:var(--paper-rule)}
.developer-socials .social-link:focus-visible{outline-color:var(--paper-red)}
.developer-contact svg{flex:none;width:var(--s3);height:var(--s3)}
.developer-contact .developer-discord{margin-top:var(--s3)}
.developer-discord .text-link{margin-top:var(--s1)}

/* footer: dark teak with a carved divider */
.landing-page .site-footer{position:relative;isolation:isolate;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;color:var(--wood-muted)}
.site-footer::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:linear-gradient(rgba(12,7,4,.84),rgba(12,7,4,.92)),var(--l-teak) 0 0/512px;border-top:2px solid #6b4a20}
.site-footer::after{content:"";position:absolute;top:var(--s3);left:50%;width:min(320px,70%);aspect-ratio:400/36;transform:translateX(-50%);background:var(--l-divider) center/contain no-repeat;opacity:.9}
.footer-cols{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--s4);padding-top:var(--s4)}
.footer-brand img{width:165px;height:auto;image-rendering:pixelated}
.footer-brand p{max-width:36ch;margin-top:var(--s2)}
.site-footer h2{margin:0 0 var(--s1);font:600 var(--t-xs)/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.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(--wood-ivory);text-decoration:none}
.landing-page .site-footer li>a:hover{color:var(--brass);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:1px solid rgba(227,189,112,.22);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));min-width:0;min-height:56px;padding:var(--s1) var(--s3);font-size:20px;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[hidden]{display:none}
.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)}

/* responsive */
@media(max-width:1100px){
 .journey{grid-template-columns:1fr 1.1fr}
 .hero{aspect-ratio:auto;--hero-scrim:linear-gradient(90deg,rgba(7,31,41,.97),rgba(7,31,41,.9) 50%,rgba(7,31,41,.3) 74%,transparent)}
 .hero-copy{max-width:500px}
}
@media(max-width:960px){
 .support-grid,.developer-grid{grid-template-columns:1fr;gap:var(--s4)}
 .support-frame{width:100%;max-width:660px;justify-self:center}
 .journey{grid-template-columns:1fr}.mapbox{max-width:660px;margin-inline:auto}
 .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;padding:0 0 var(--s3);border-right:0;border-bottom:1px solid var(--paper-rule)}.news-lead img{flex:none;min-height:0;aspect-ratio:16/9}
 .news-card:nth-child(n){padding-top:0;border-top:0}
 .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}
}
@media(max-width:760px){
 :root{--corner:44px;--songket-h:30px}
 .hero{display:block;min-height:0}
 .hero::before{background:linear-gradient(to bottom,transparent 40vw,rgba(7,31,41,.86) 58vw,var(--hero-bg) 70.757881vw)}
 .hero-in{padding:58vw var(--s3) calc(var(--s6) + var(--songket-h))}
 .hero-copy{max-width:560px}
 .hero .tag{font-size:clamp(40px,10vw,56px)}
 .hero .lede{max-width:42ch;font-size:18px}
 .features{gap:var(--s6)}
 .feature,.feature:nth-child(even){grid-template-columns:1fr;gap:var(--s3)}
 .feature:nth-child(even) .teak-frame{order:0}
 .feature p{max-width:60ch}
 .feature-n{font-size:44px}
 .cast{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps-start{grid-template-columns:1fr;gap:var(--s5)}.steps-start::before{display:none}
 .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){
 .support-card{padding:var(--s3) var(--s2)}
 :root{--medal:76px}
 .hero-in{padding-inline:var(--s2)}
 .hero-announce{font-size:14px}
 .hero-note{font-size:13px}.hero-explore{font-size:16px}
 .cta{gap:var(--s2)}
 .badges li{font-size:11px}
 .pillars,.skills,.news,.links-grid{grid-template-columns:1fr}
 .skill-board{padding:var(--s3) var(--s2) var(--s2)}
 .teak-frame{padding:10px}
 .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}
 .cast{gap:var(--s4) var(--s2)}.arch{padding:6px}.person h3{font-size:22px}.person .role{font-size:10px}.person .role i{display:none}.person p{font-size:15px}
 .faq .well{padding:var(--s1) var(--s2)}.faq summary{font-size:18px}
 .community .well{padding:var(--s2)}
 .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}
 .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .landing-page .dock-play{left:var(--s2);right:var(--s2)}
}
@media(prefers-reduced-motion:reduce){.landing-page .wood-play:active,.landing-page .dock-play.is-shown:active{transform:none}.feature:hover .shot img,.link-card:hover{transform:none}}