/* Shared layout for every page of the game site. style.css is the original
   design foundation (colours, type, hero, sections); this file adds the
   multi-page navigation, status labels and the data-driven components. */
:root{--s-playable:#86cf7f;--s-in-development:#e7ae51;--s-planned:#82b6ea;--s-vision:#c7a0ec;--s-exploring:#9ccabe;--panel-2:#151a14}

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav{position:sticky;top:0;z-index:50;height:76px;padding:0 32px;background:#101210f2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.site-nav .wordmark{flex-shrink:0}
.site-nav .wordmark span{letter-spacing:.2em}
.site-nav nav{gap:4px}
.site-nav nav a{padding:10px 10px;font-size:12px;letter-spacing:.03em;white-space:nowrap;border-bottom:2px solid transparent}
.site-nav nav a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}
.site-nav nav .nav-business{margin-left:10px;border:1px solid #e7ae5166;padding:9px 14px}
.site-nav nav .nav-business[aria-current=page]{background:var(--accent);color:#17170e}
.nav-toggle{display:none;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);color:var(--ink);padding:10px 14px;font-size:12px;font-weight:800;letter-spacing:.08em;min-height:44px}
.nav-toggle i{display:block;width:18px;height:2px;background:currentColor;position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s}
.nav-toggle i::before{top:-6px}.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded=true] i{background:transparent}
.nav-toggle[aria-expanded=true] i::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1180px){
  .js .nav-toggle{display:inline-flex}
  .site-nav{height:68px;padding:0 20px}
  .js .site-nav nav{position:fixed;top:68px;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:14px 20px 40px;background:#0d100ef7;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
  .js .site-nav.is-open nav{display:flex}
  .js .site-nav nav a{font-size:20px;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.04em;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:400}
  .js .site-nav nav a[aria-current=page]{border-bottom-color:var(--line);color:var(--accent)}
  .js .site-nav nav a[aria-current=page]::after{content:"  ●";font-size:10px;vertical-align:middle}
  .js .site-nav nav .nav-business{margin:18px 0 0;text-align:center;border:1px solid var(--accent);color:var(--accent)}
  html:not(.js) .site-nav{height:auto;flex-wrap:wrap;padding-block:14px}
  html:not(.js) .site-nav nav{flex-wrap:wrap}
  body.menu-open{overflow:hidden}
}
@media(max-width:650px){.site-nav{min-height:0}.site-nav .wordmark{font-size:21px}.site-nav .wordmark span{font-size:7px}nav .nav-business{width:auto;text-align:center}}

/* ── Page heroes ────────────────────────────────────────────── */
.page-hero{position:relative;isolation:isolate;overflow:hidden;min-height:520px;display:flex;align-items:flex-end}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#090c0bf0 0%,#090c0bc0 40%,#090c0b30 85%),linear-gradient(0deg,#101210 0%,transparent 45%)}
.page-hero .shell{padding-block:110px 64px}
.page-hero h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(46px,6vw,88px);line-height:.95;margin-top:18px;font-weight:900;letter-spacing:.01em}
.page-hero h1 span{color:var(--accent);display:block}
.page-hero .lead{max-width:620px;margin-top:22px;color:#dfe2d6}
.page-hero .hero-caption{position:static;margin-top:28px;justify-content:flex-start;padding:0}
@media(prefers-reduced-motion:no-preference){.hero-picture img,.page-hero>img{animation:drift 26s ease-out both}@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}}
@media(max-width:650px){.page-hero{min-height:440px}.page-hero .shell{padding-block:80px 40px}.page-hero h1{font-size:46px}.page-hero .lead{font-size:18px}}

/* ── Status labels ──────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;border:1px solid currentColor;line-height:1.3;color:var(--muted);background:#ffffff08}
.badge::before{content:"";width:7px;height:7px;flex-shrink:0;background:currentColor}
.badge[data-status=playable]{color:var(--s-playable)}
.badge[data-status=in-development]{color:var(--s-in-development)}
.badge[data-status=planned]{color:var(--s-planned)}
.badge[data-status=vision]{color:var(--s-vision)}
.badge[data-status=exploring]{color:var(--s-exploring)}
.badge[data-status=planned]::before{background:transparent;border:2px solid currentColor;width:7px;height:7px}
.badge[data-status=vision]::before{border-radius:50%}
.badge[data-status=exploring]::before{transform:rotate(45deg)}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:20px 22px;border:1px solid var(--line);background:var(--panel-2)}
.legend>p{width:100%;font-size:12px;color:var(--muted)}
.legend div{display:flex;flex-direction:column;gap:6px;max-width:220px}
.legend small{font-size:11px;color:var(--muted);line-height:1.5}

/* ── Generic blocks ─────────────────────────────────────────── */
.prose{max-width:720px}
.prose p{color:var(--muted);font-size:15px}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:16px}
.prose ul{color:var(--muted);font-size:15px;padding-left:20px;margin:16px 0 0}
.prose li+li{margin-top:6px}
.prose strong{color:var(--ink)}
.prose .lead{color:var(--ink)}
.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:44px}
.section-intro>p{color:var(--muted);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.flip>figure{order:2}
.split figure{margin:0}
.split figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.split figcaption{font-size:11px;color:var(--muted);margin-top:10px}
.split h2+p,.split h2+.badge{margin-top:22px}
.split .badge+p{margin-top:16px}
.split p+p{margin-top:16px}
.split p:not(.eyebrow){color:var(--muted);font-size:15px}
.split p.lead{color:var(--ink);font-size:19px}
.band{border-top:1px solid var(--line)}
.notice{border-left:3px solid var(--accent);background:var(--panel-2);padding:16px 20px;font-size:13px;color:#d5d9cc;max-width:820px}
.notice strong{color:var(--ink)}
.notice+*{margin-top:30px}
@media(max-width:900px){.section-intro,.split{grid-template-columns:1fr;gap:28px}.split.flip>figure{order:0}}

/* ── Feature cards ──────────────────────────────────────────── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.feature-card{position:relative;padding:22px 22px 24px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1e18,#141813);display:flex;flex-direction:column;gap:14px}
.feature-card h3{font-size:18px}
.feature-card p{font-size:13px;color:var(--muted)}
.feature-card .badge{align-self:flex-start}
.feature-card[data-status=playable]{border-top:2px solid var(--s-playable)}
.feature-card[data-status=in-development]{border-top:2px solid var(--s-in-development)}
.feature-card[data-status=planned]{border-top:2px dashed var(--s-planned)}
.feature-card[data-status=vision]{border-top:2px dotted var(--s-vision)}
.feature-card[data-status=exploring]{border-top:2px dashed var(--s-exploring)}
.feature-group+.feature-group{margin-top:56px}
.feature-group>h3{font-family:Impact,"Arial Narrow",sans-serif;font-size:26px;font-weight:400;letter-spacing:.03em;margin-bottom:18px}
.data-missing{color:var(--muted);font-size:13px;border:1px dashed var(--line);padding:20px}

/* ── Facts strip ────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(6,1fr);border-block:1px solid var(--line)}
.facts div{padding:28px 18px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(30px,3vw,44px);font-weight:400;color:var(--accent);line-height:1}
.facts span{display:block;font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
.facts-note{font-size:11px;color:#8f9b82;margin-top:12px}
@media(max-width:1000px){.facts{grid-template-columns:repeat(3,1fr)}.facts div:nth-child(3n){border-right:0}.facts div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.facts{grid-template-columns:repeat(2,1fr)}.facts div{padding:20px 14px}.facts div:nth-child(3n){border-right:1px solid var(--line)}.facts div:nth-child(2n){border-right:0}.facts div:nth-child(-n+4){border-bottom:1px solid var(--line)}}

/* ── Latest screenshots ─────────────────────────────────────── */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shot-grid a{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#1d211b;text-decoration:none;border:1px solid var(--line)}
.shot-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shot-grid a:hover img{transform:scale(1.04)}
.shot-grid span{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(transparent,#050907e0);font-size:13px;font-weight:650}
.shot-grid small{display:block;font-size:9px;letter-spacing:.12em;color:#f3c785;font-weight:700;text-transform:uppercase}
@media(max-width:800px){.shot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.shot-grid{grid-template-columns:1fr}}

/* ── Roadmap ────────────────────────────────────────────────── */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.road-stage{border:1px solid var(--line);background:var(--panel-2)}
.road-stage header{padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.road-stage header p{font-family:monospace;font-size:11px;color:var(--muted)}
.road-stage h3{font-family:Impact,"Arial Narrow",sans-serif;font-size:24px;font-weight:400;letter-spacing:.02em;margin:6px 0 12px;line-height:1.1}
.road-stage ol{list-style:none;margin:0;padding:6px 0}
.road-stage li{padding:14px 20px;border-bottom:1px solid #ffffff10}
.road-stage li:last-child{border-bottom:0}
.road-stage li b{display:block;font-size:14px;line-height:1.35}
.road-stage li p{font-size:12px;color:var(--muted);margin-top:5px}
.road-stage li .badge{margin-top:8px;font-size:9px}
.road-stage[data-status=playable] header{border-top:3px solid var(--s-playable)}
.road-stage[data-status=in-development] header{border-top:3px solid var(--s-in-development)}
.road-stage[data-status=planned] header{border-top:3px solid var(--s-planned)}
.road-stage[data-status=vision] header{border-top:3px solid var(--s-vision)}
@media(max-width:1100px){.roadmap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.roadmap{grid-template-columns:1fr}}

/* ── Development log ────────────────────────────────────────── */
.devlog{display:grid;gap:0;border-top:1px solid var(--line)}
.log-entry{display:grid;grid-template-columns:170px 1fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--line)}
.log-entry time{font-family:monospace;font-size:12px;color:var(--accent);letter-spacing:.06em;padding-top:4px}
.log-entry h3{font-size:22px}
.log-entry>div>p{color:#d5d9cc;font-size:15px;margin-top:10px;max-width:760px}
.log-entry ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14px;max-width:760px}
.log-entry li+li{margin-top:6px}
.log-shots{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.log-shots a{display:block;width:150px;border:1px solid var(--line)}
.log-shots img{width:100%;aspect-ratio:16/9;object-fit:cover}
.log-tags{display:flex;gap:8px;margin-top:14px}
.log-tags span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 8px}
.devlog.compact .log-entry{grid-template-columns:130px 1fr;padding:24px 0;gap:24px}
.devlog.compact ul,.devlog.compact .log-shots{display:none}
@media(max-width:700px){.log-entry,.devlog.compact .log-entry{grid-template-columns:1fr;gap:8px;padding:26px 0}.log-shots a{width:calc(33.3% - 7px)}}

/* ── Timeline (Rebuilding Doncaster vision) ─────────────────── */
.timeline{border:1px solid var(--line);background:var(--panel-2)}
.timeline-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.timeline-tabs button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted);padding:18px 16px;text-align:left;font-size:13px;font-weight:700;min-height:64px}
.timeline-tabs button:last-child{border-right:0}
.timeline-tabs button span{display:block;font-family:monospace;font-size:11px;color:var(--accent);font-weight:400;margin-bottom:4px}
.timeline-tabs button[aria-selected=true]{background:#e7ae5114;color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.timeline-tabs button:hover{color:var(--ink)}
.timeline-stage{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.timeline-art{position:relative;background:#0b0e0c;border-right:1px solid var(--line);min-height:300px}
.timeline-art svg{display:block;width:100%;height:100%}
.timeline-art .art-tag{position:absolute;left:14px;top:14px;font-size:9px;letter-spacing:.14em;font-weight:800;color:#d8d3be;background:#0b0e0ccc;border:1px solid var(--line);padding:5px 8px}
.timeline-panel{padding:30px}
.timeline-panel h3{font-family:Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:34px;letter-spacing:.02em;margin:14px 0 12px;line-height:1}
.timeline-panel p{color:var(--muted);font-size:14px}
.timeline-panel ul{color:var(--muted);font-size:14px;padding-left:18px;margin:14px 0 0}
.timeline-panel [role=tabpanel][hidden]{display:none}
.timeline svg .ph{transition:opacity .8s ease,transform .8s ease}
@media(max-width:860px){.timeline-tabs{grid-template-columns:repeat(2,1fr)}.timeline-tabs button:nth-child(2){border-right:0}.timeline-tabs button:nth-child(-n+2){border-bottom:1px solid var(--line)}.timeline-stage{grid-template-columns:1fr}.timeline-art{border-right:0;border-bottom:1px solid var(--line);min-height:0;aspect-ratio:16/9}.timeline-panel{padding:22px}}

/* ── Options (building methods) ─────────────────────────────── */
.options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.option{border:1px solid var(--line);padding:28px;background:var(--panel-2)}
.option h3{font-size:22px;margin:14px 0 10px}
.option p,.option li{color:var(--muted);font-size:14px}
.option ul{padding-left:18px;margin:12px 0 0}
@media(max-width:760px){.options{grid-template-columns:1fr}}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:900px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-size:19px;font-weight:650}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;color:var(--accent);font-weight:300;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.faq .answer{padding:0 0 26px;color:var(--muted);font-size:15px;max-width:760px}
.faq .answer p+p{margin-top:12px}
.faq .answer .badge{margin:0 6px 4px 0}
.faq .answer a{color:var(--accent)}

/* ── Partnerships ───────────────────────────────────────────── */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.partner-grid article{border:1px solid #171d1533;padding:22px;background:#e4e7d8}
.partner-grid h3{font-size:17px}
.partner-grid p{font-size:13px;color:#3c4635;margin-top:8px}
.funding{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.funding .enquiry-panel h3{font-size:24px}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr}.funding{grid-template-columns:1fr;gap:28px}}

/* ── Credits / page links / footer ─────────────────────────── */
.credits{border:1px solid var(--line);padding:26px;background:var(--panel-2);max-width:820px}
.credits h3{font-size:16px;margin-bottom:10px}
.credits p,.credits li{font-size:13px;color:var(--muted)}
.credits ul{padding-left:18px;margin:10px 0 0}
.credits a{color:var(--ink)}
.page-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.page-links a{display:block;border:1px solid var(--line);padding:22px;text-decoration:none;background:linear-gradient(180deg,#1a1e18,#141813);transition:border-color .2s,transform .2s}
.page-links a:hover{border-color:var(--accent);transform:translateY(-2px)}
.page-links small{display:block;font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:800}
.page-links b{display:block;font-family:Impact,"Arial Narrow",sans-serif;font-size:26px;font-weight:400;margin-top:8px;letter-spacing:.02em}
.page-links span{display:block;font-size:13px;color:var(--muted);margin-top:6px}
@media(max-width:800px){.page-links{grid-template-columns:1fr}}
.site-footer{display:block;border-top:1px solid var(--line);padding-block:40px 30px}
.site-footer .footer-top{display:flex;gap:28px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.site-footer nav{display:grid;grid-template-columns:repeat(3,auto);gap:8px 28px;margin-left:auto}
.site-footer nav a{font-size:12px;color:var(--muted);font-weight:400;padding:4px 0}
.site-footer nav a:hover{color:var(--accent)}
.site-footer .footer-bottom{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid #ffffff12}
.site-footer .footer-bottom p,.site-footer .footer-bottom small,.site-footer .footer-bottom a{font-size:11px;color:#8f9b82}
.site-footer .footer-bottom div{display:flex;gap:18px;flex-wrap:wrap}
.site-footer .footer-tag{font-size:12px;color:var(--muted);margin-top:10px}
@media(max-width:700px){.site-footer nav{grid-template-columns:repeat(2,auto);margin-left:0;width:100%}}

/* ── Reveal on scroll (only when JS runs) ───────────────────── */
@media(prefers-reduced-motion:no-preference){.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.js .reveal.is-in{opacity:1;transform:none}}
.status span{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.status span{animation:none}}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Screenshots page headings (h1/h2 in place of the old h2/h3) ── */
.gallery-h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(38px,4vw,57px);font-weight:900;line-height:1.03;letter-spacing:.01em}
.gallery-h1 span{color:#9aa18d}
.photo-scene-label h2{font-family:inherit;font-size:clamp(24px,3vw,42px);margin-top:8px;font-weight:650;line-height:1.1;letter-spacing:-.025em}
@media(max-width:650px){.gallery-h1{font-size:38px}.photo-scene-label h2{font-size:26px;max-width:85%}}

/* ── Fixes over style.css's single-page rules ───────────────── */
.split figure img,.page-hero>img{height:auto}
.page-hero>img{height:100%}
.intro-copy p .text-link{margin-top:0;gap:10px}
.site-footer div{margin-left:0}
.site-footer .footer-top>div:first-child{display:block}
.site-footer .footer-bottom div{margin-left:0}
.devlog.compact .text-link{margin-top:12px}
/* A backdrop filter makes the header the containing block for the fixed menu panel. */
@media(max-width:1180px){.site-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#101210}}
.site-footer nav{justify-content:start}
@media(max-width:1180px){.js .site-nav nav{justify-content:flex-start;background:#0d100e}}
.log-shots img,.shot-grid img{height:auto}
.shot-grid img{height:100%}