:root { --ink:#1d1009; --cream:#fff2cf; --paper:#f8e6b8; --gold:#f4b82e; --orange:#d76520; --red:#a93422; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.site-header { position:absolute; z-index:10; top:0; left:50%; width:min(1240px,calc(100% - 40px)); transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; border-bottom:1px solid rgba(255,242,207,.22); }
.brand { display:flex; align-items:center; gap:12px; font-weight:950; letter-spacing:.06em; }
.brand img { width:42px; height:42px; border-radius:12px; }
nav { display:flex; gap:30px; font-size:14px; font-weight:750; }
nav a { opacity:.8; }
nav a:hover { opacity:1; color:var(--gold); }
.small-cta { border:1px solid var(--gold); border-radius:999px; padding:10px 17px; color:var(--gold); font-size:13px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.hero { min-height:820px; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(520px,1.15fr); align-items:center; gap:clamp(30px,5vw,80px); padding:140px max(6vw,calc((100vw - 1240px)/2)) 80px; background:radial-gradient(circle at 15% 30%,#7f3a1d 0,transparent 28%),linear-gradient(135deg,#1d1009 30%,#4a2412 100%); }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:160px; background:linear-gradient(transparent,var(--ink)); pointer-events:none; }
.hero-glow { position:absolute; width:520px; height:520px; left:-200px; top:100px; background:var(--orange); opacity:.15; filter:blur(50px); border-radius:50%; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 18px; color:var(--gold); font-size:13px; font-weight:950; letter-spacing:.24em; }
h1,h2,h3,blockquote { font-family:Georgia,"Times New Roman",serif; }
h1 { margin:0; font-size:clamp(78px,10vw,152px); line-height:.75; letter-spacing:-.075em; text-shadow:0 8px 0 rgba(0,0,0,.16); }
h1 span { display:block; color:var(--gold); font-style:italic; transform:translateX(.08em); }
.hero-line { max-width:560px; margin:34px 0 28px; color:#f7dfb0; font-size:clamp(18px,2vw,23px); line-height:1.55; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.play-badge { display:inline-flex; align-items:center; gap:13px; border:2px solid var(--cream); border-radius:14px; padding:10px 18px; background:#110b08; font-weight:900; line-height:1.05; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.play-badge small { display:block; margin-bottom:4px; font-size:9px; letter-spacing:.14em; opacity:.72; }
.play-mark { font-size:24px; color:var(--gold); }
.text-link { font-weight:800; border-bottom:1px solid rgba(255,242,207,.5); padding-bottom:4px; }
.text-link span { color:var(--gold); }
.quick-facts { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 0; padding:0; }
.quick-facts li { border:1px solid rgba(255,242,207,.22); border-radius:999px; padding:8px 12px; color:#e6ca93; font-size:12px; font-weight:760; }
.hero-art { position:relative; z-index:1; margin:0; transform:rotate(1.5deg); }
.hero-art::before { content:""; position:absolute; inset:10px -10px -10px 10px; border:2px solid var(--gold); border-radius:28px; }
.hero-art img { position:relative; aspect-ratio:16/9; object-fit:cover; border-radius:24px; border:2px solid #6f421f; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.hero-art figcaption { position:absolute; right:18px; bottom:18px; max-width:300px; padding:11px 14px; background:rgba(29,16,9,.88); border-radius:12px; color:#f6d999; font-size:12px; line-height:1.4; }
.ticker { overflow:hidden; border-block:1px solid #70451d; background:var(--gold); color:var(--ink); font-weight:950; letter-spacing:.12em; white-space:nowrap; }
.ticker div { width:max-content; min-width:100%; padding:15px 24px; text-align:center; }
.ticker i { padding:0 18px; color:var(--red); }
.section { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:120px 0; }
.intro { display:grid; grid-template-columns:1.1fr .9fr; gap:40px 80px; }
.section-heading h2,.gameplay h2,.final-cta h2 { margin:0; font-size:clamp(44px,6vw,78px); line-height:.98; letter-spacing:-.04em; }
.section-lede { margin:42px 0 0; color:#d9bd89; font-size:19px; line-height:1.75; }
.stage-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.stage-card { position:relative; min-height:330px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:24px; border:1px solid rgba(255,242,207,.15); border-radius:24px; box-shadow:inset 0 -120px 100px rgba(29,16,9,.62); }
.stage-card::before { content:""; position:absolute; inset:0; opacity:.25; background:radial-gradient(circle at 20% 20%,#fff7 0 1px,transparent 2px),linear-gradient(135deg,transparent 35%,#0004 36% 38%,transparent 39%); background-size:27px 27px,auto; }
.stage-card>* { position:relative; z-index:1; }
.stage-desert { background:linear-gradient(160deg,#d97832,#7f281d); }
.stage-hills { background:linear-gradient(160deg,#829553,#32422b); }
.stage-stone { background:linear-gradient(160deg,#b29878,#4f382e); }
.stage-number { align-self:flex-end; font:italic 700 54px Georgia,serif; color:rgba(255,255,255,.48); }
.stage-card h3 { margin:0 0 12px; font-size:34px; }
.stage-card p { margin:0; color:#f6e8c8; line-height:1.6; }
.gameplay { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,8vw,110px); align-items:center; }
.video-column { position:relative; display:flex; justify-content:center; }
.video-shell { width:min(360px,86vw); padding:10px; background:#090604; border:2px solid var(--gold); border-radius:34px; box-shadow:18px 20px 0 #5d301a,0 30px 70px rgba(0,0,0,.4); transform:rotate(-2deg); }
.video-shell video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:24px; background:#000; }
.scribble { position:absolute; left:-15px; bottom:-50px; font:italic 20px Georgia,serif; color:var(--gold); transform:rotate(-7deg); }
.gameplay-copy>p:not(.eyebrow) { max-width:610px; margin:25px 0 34px; color:#d9bd89; font-size:18px; line-height:1.7; }
.loop-list { list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,242,207,.16); }
.loop-list li { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid rgba(255,242,207,.16); }
.loop-list b { color:var(--gold); font:italic 700 22px Georgia,serif; }
.loop-list span { color:#c9ad7d; line-height:1.5; }
.loop-list strong { display:block; color:var(--cream); font-size:17px; }
.duo-section { display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:clamp(40px,8vw,110px); align-items:center; padding:90px max(6vw,calc((100vw - 1180px)/2)); background:var(--paper); color:var(--ink); }
.duo-section img { border-radius:36% 48% 32% 52%; box-shadow:18px 18px 0 var(--orange); }
.duo-section .eyebrow { color:var(--red); }
.duo-section blockquote { margin:0 0 24px; font-size:clamp(38px,5vw,70px); line-height:1.08; letter-spacing:-.04em; }
.duo-section>div>p:last-child { color:#6d4b32; font-weight:750; }
.gallery { width:min(1320px,calc(100% - 40px)); }
.gallery-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:40px; }
.gallery-heading>p { max-width:420px; margin:0; color:#c8aa77; line-height:1.6; }
.screenshot-rail { display:flex; gap:20px; overflow-x:auto; padding:10px 4px 30px; scroll-snap-type:x mandatory; scrollbar-color:var(--gold) #3d2414; }
.screenshot-rail figure { flex:0 0 min(310px,78vw); margin:0; scroll-snap-align:start; }
.screenshot-rail img { width:100%; border-radius:24px; border:1px solid #744922; box-shadow:0 18px 40px rgba(0,0,0,.32); }
.final-cta { width:min(1180px,calc(100% - 40px)); margin:0 auto 80px; display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:30px; padding:32px; border-radius:28px; background:linear-gradient(120deg,var(--red),#6c2119); box-shadow:12px 14px 0 var(--gold); }
.final-cta>img { width:150px; border-radius:24px; transform:rotate(-4deg); }
.final-cta h2 { font-size:clamp(38px,5vw,66px); }
.final-cta p:not(.eyebrow) { margin-bottom:0; color:#f2c69b; }
footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:20px 40px; padding:42px max(6vw,calc((100vw - 1180px)/2)); border-top:1px solid #5f3b20; color:#bd9e6c; }
.footer-brand { color:var(--cream); font-weight:950; letter-spacing:.1em; }
footer p { margin:0; }
footer div { display:flex; gap:20px; }
footer a:hover { color:var(--gold); }
footer small { grid-column:1/-1; opacity:.6; }
.privacy-page { min-height:100vh; padding:56px 20px 100px; background:linear-gradient(145deg,#1d1009,#3a2011); }
.privacy-back { display:block; width:min(820px,100%); margin:0 auto 24px; color:var(--gold); font-weight:800; }
.privacy-page article { width:min(820px,100%); margin:0 auto; padding:clamp(28px,6vw,68px); border:1px solid #70451d; border-radius:28px; background:#fff2cf; color:#332014; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.privacy-page h1 { color:#7e2f1c; font-size:clamp(48px,8vw,80px); line-height:.95; }
.privacy-page h2 { margin-top:36px; color:#8f321e; font-size:26px; }
.privacy-page p { line-height:1.75; }
.privacy-page a { color:#8f321e; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:920px) { nav{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:130px}.hero-copy{max-width:700px}.hero-art{max-width:760px}.intro{grid-template-columns:1fr}.section-lede{margin-top:0}.stage-grid{grid-template-columns:1fr}.stage-card{min-height:260px}.gameplay{grid-template-columns:1fr}.video-column{order:2}.duo-section{grid-template-columns:1fr}.duo-section img{max-width:520px}.final-cta{grid-template-columns:110px 1fr}.final-cta>img{width:110px}.final-cta .play-badge{grid-column:1/-1;justify-self:start}footer{grid-template-columns:1fr}footer small{grid-column:1} }
@media (max-width:560px) { .site-header{width:calc(100% - 28px)}.small-cta{display:none}.brand span{font-size:14px}.hero{padding:120px 18px 62px}h1{font-size:clamp(66px,25vw,105px)}.hero-line{margin-top:26px}.hero-art figcaption{position:relative;right:auto;bottom:auto;margin-top:10px}.section{width:calc(100% - 32px);padding:84px 0}.intro{gap:30px}.gallery-heading{display:block}.gallery-heading>p{margin-top:20px}.duo-section{padding:70px 18px}.final-cta{width:calc(100% - 32px);grid-template-columns:1fr;padding:24px;box-shadow:7px 8px 0 var(--gold)}.final-cta>img{width:100px}footer{padding:38px 18px}footer div{flex-wrap:wrap} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }