/* ═══════════════════════════════════════════════════════════
   Pixel Doodles — shared stylesheet
   © 2026 Pixel Doodles — All rights reserved.
   Design system: dark lava / amber / cream.
   Fonts: Libre Baskerville (titles) · Figtree (body) · JetBrains Mono (UI labels)
   ═══════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONTS (woff2, served locally — no Google CDN, no IP leak) ── */
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/figtree-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/figtree-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/figtree-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/figtree-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/figtree-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/figtree-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jbmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jbmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jbmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jbmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/libreb-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/libreb-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/libreb-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/libreb-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/libreb-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/libreb-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Caveat — the handwriting in the workshop sketches on the plugins page and devlog #05.
   Subset to the 71 glyphs those sketches actually use: 73 KB down to 16 KB. The sketches
   used to embed the whole font five times over (678 KB); they are inlined now and share
   this one file. A @font-face costs nothing until something on the page asks for the
   family, so declaring it here does not weigh on the other pages.
   One file for both weights: the source embedded byte-identical regular and bold. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/caveat-latin.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/caveat-latin.woff2') format('woff2');}

:root {
  --bg:           #0a0806;
  --bg-2:         #111009;
  --bg-3:         #181410;
  --lava:         #d44020;
  --lava-light:   #e8602a;
  --lava-dim:     rgba(212,64,32,0.14);
  --amber:        #e09828;
  --amber-light:  #f0c050;
  --amber-dim:    rgba(224,152,40,0.10);
  --cream:        #f0e8d8;
  --cream-dim:    rgba(240,232,216,0.72);
  --cream-mid:    rgba(240,232,216,0.62);
  --cream-faint:  rgba(240,232,216,0.42);
  --rule:         rgba(240,232,216,0.08);
  --font-title:   'Libre Baskerville', serif;
  --font-body:    'Figtree', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --max-w:        860px;
  --max-w-wide:   1280px;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--cream); font-family:var(--font-body); font-size:17px; line-height:1.82; font-weight:400; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── SKIP LINK (a11y) ── */
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--lava); color:#fff; padding:10px 16px; font-family:var(--font-mono); font-size:12px; }
.skip:focus { left:8px; top:8px; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(10,8,6,0.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav-in { max-width:1180px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; height:88px; }
.nav-logo { display:flex; align-items:center; transition:opacity 0.2s; }
.nav-logo:hover { opacity:0.8; }
.nav-logo img { height:72px; width:auto; }
.nav-links { display:flex; gap:22px; list-style:none; align-items:center; }
.nav-links a { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-faint); transition:color 0.2s; position:relative; padding-bottom:2px; white-space:nowrap; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--lava); transition:width 0.3s; }
.nav-links a:hover { color:var(--cream-dim); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--cream-dim); }

/* mobile nav toggle (CSS-only) */
.nav-toggle { display:none; background:transparent; border:1px solid var(--rule); border-radius:3px; color:var(--cream-dim); font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:7px 12px; cursor:pointer; }
#nav-check { display:none; }

/* ── BUTTONS ── */
.btn-lava { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:var(--lava); color:#fff; padding:12px 26px; border-radius:3px; font-weight:500; transition:opacity 0.2s, transform 0.15s; display:inline-flex; align-items:center; gap:8px; }
.btn-lava:hover { opacity:0.88; transform:translateY(-1px); }
.btn-ghost { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:transparent; color:var(--cream-dim); padding:12px 26px; border-radius:3px; border:1px solid var(--rule); transition:border-color 0.2s, color 0.2s, transform 0.15s; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost:hover { border-color:rgba(240,232,216,0.2); color:var(--cream); transform:translateY(-1px); }

/* ── HERO ── */
.hero { min-height:88vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:100px 32px 80px; position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:380px; background:radial-gradient(ellipse at 50% 0%, rgba(212,64,32,0.13) 0%, rgba(224,152,40,0.05) 40%, transparent 70%); pointer-events:none; }
.hero-logo { width:216px; height:216px; margin:0 auto 30px; position:relative; opacity:0; animation:fadeDown 0.9s ease 0.1s both; }
.hero-logo img { width:100%; height:100%; object-fit:contain; }
.hero-logo::after { content:''; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(212,64,32,0.15) 0%, transparent 70%); animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:1;transform:scale(1.08);} }
.hero-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--lava-light); margin-bottom:16px; opacity:0; animation:fadeUp 0.8s ease 0.3s both; }
.hero-h1 { font-family:var(--font-title); font-size:clamp(32px,4.8vw,60px); font-weight:700; line-height:1.08; color:var(--cream); margin-bottom:6px; opacity:0; animation:fadeUp 0.8s ease 0.4s both; }
.hero-h1-sub { font-family:var(--font-title); font-size:clamp(17px,2.2vw,28px); font-weight:400; font-style:italic; color:var(--amber-light); margin-bottom:28px; opacity:0; animation:fadeUp 0.8s ease 0.46s both; }
.hero-tagline { font-family:var(--font-body); font-style:italic; font-weight:400; font-size:clamp(15px,1.7vw,19px); color:var(--cream-dim); line-height:1.65; max-width:760px; text-wrap:balance; margin:0 auto 36px; opacity:0; animation:fadeUp 0.8s ease 0.54s both; }
.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s ease 0.62s both; }
.hero-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-faint); opacity:0; animation:fadeUp 1s ease 1.2s both; }
.hero-scroll-line { width:1px; height:28px; background:linear-gradient(to bottom,rgba(212,64,32,0.4),transparent); }

/* ── ORNAMENTAL RULE ── */
.rule { display:flex; align-items:center; gap:16px; max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.rule-line { flex:1; height:1px; background:var(--rule); }
.rule-diamond { width:6px; height:6px; background:rgba(212,64,32,0.35); transform:rotate(45deg); flex-shrink:0; }
.rule-icon { width:20px; height:20px; opacity:0.2; flex-shrink:0; }
.rule-icon img { width:100%; height:100%; object-fit:contain; }
.rule-wide { display:flex; align-items:center; gap:16px; max-width:var(--max-w-wide); margin:0 auto; padding:0 32px; }

/* ── WIDE CONTAINER + PAGE HEADER ── */
.container { max-width:var(--max-w-wide); margin:0 auto; padding:0 32px; }
.page-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--lava-light); margin-bottom:14px; }
.page-header { padding:80px 32px 56px; text-align:center; position:relative; overflow:hidden; }
.page-header-glow { position:absolute; top:0; left:50%; transform:translateX(-50%); width:500px; height:300px; background:radial-gradient(ellipse at 50% 0%, rgba(212,64,32,0.11) 0%, transparent 70%); pointer-events:none; }
.page-title { font-family:var(--font-title); font-size:clamp(28px,4vw,48px); font-weight:700; line-height:1.1; color:var(--cream); margin-bottom:8px; }
.page-title-sub { font-family:var(--font-title); font-size:clamp(15px,1.8vw,20px); font-weight:400; font-style:italic; color:var(--amber-light); }
.page-lead { font-size:18px; font-weight:400; color:var(--cream-dim); line-height:1.75; max-width:600px; margin:20px auto 0; }

/* ── PROSE ── */
.prose { max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.prose-h2 { font-family:var(--font-title); font-size:clamp(17px,2vw,22px); font-weight:700; letter-spacing:0.01em; color:var(--cream); margin-bottom:18px; }
.prose-h3 { font-family:var(--font-title); font-size:clamp(15px,1.6vw,18px); font-weight:700; color:var(--amber-light); margin-bottom:10px; margin-top:28px; letter-spacing:0.02em; }
.prose p { font-size:17px; font-weight:400; color:var(--cream-dim); line-height:1.85; margin-bottom:18px; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--cream); font-weight:600; }
.prose em { color:var(--amber-light); font-style:italic; font-weight:400; }
.prose a { color:var(--lava-light); border-bottom:1px solid rgba(212,64,32,0.3); transition:border-color 0.2s; }
.prose a:hover { border-color:var(--lava-light); }

/* ── FULL-FRAME SCREENSHOT ── */
.img-full { width:100%; max-width:1100px; margin:0 auto; position:relative; overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.img-full img { width:100%; height:auto; display:block; aspect-ratio:21/9; object-fit:cover; object-position:center; }
.img-full-cap { padding:10px 28px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cream-faint); }

/* ── EDITORIAL PULL-QUOTE ── */
.big-quote { text-align:center; padding:68px 32px; max-width:740px; margin:0 auto; }
.big-quote p { font-family:var(--font-title); font-style:italic; font-size:clamp(17px,2.3vw,25px); line-height:1.5; color:var(--cream-dim); font-weight:400; }
.big-quote strong { color:var(--cream); font-style:normal; font-weight:700; }
.big-quote em { color:rgba(240,232,216,0.38); font-style:italic; }

/* ── 3-SCREENSHOT GRID ── */
.shots-3 { display:grid; grid-template-columns:2fr 1fr; gap:4px; max-width:1100px; margin:0 auto; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.shot-main { position:relative; overflow:hidden; }
.shot-main img { width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; display:block; }
.shot-side { display:flex; flex-direction:column; gap:4px; }
.shot-sm { position:relative; overflow:hidden; flex:1; }
.shot-sm img { width:100%; height:100%; object-fit:cover; display:block; min-height:140px; }
.shot-cap { position:absolute; bottom:8px; left:12px; font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(240,232,216,0.5); text-shadow:0 1px 4px rgba(0,0,0,0.8); }

/* ── LINK TO GAME PAGE ── */
.game-link { max-width:var(--max-w); margin:32px auto 0; padding:0 32px; }
.game-link a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; background:var(--bg-2); border:1px solid var(--rule); border-radius:4px; transition:border-color 0.2s, background 0.2s; }
.game-link a:hover { border-color:rgba(212,64,32,0.28); background:var(--bg-3); }
.gl-left { display:flex; flex-direction:column; gap:3px; }
.gl-tag { font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--lava-light); }
.gl-title { font-family:var(--font-title); font-size:17px; font-weight:700; color:var(--cream); }
.gl-sub { font-size:14.5px; font-weight:400; color:var(--cream-mid); }
.gl-arrow { font-family:var(--font-mono); font-size:17px; color:var(--lava-light); flex-shrink:0; }

/* ── DUSK SCREENSHOT ── */
.img-dusk { width:100%; max-width:1100px; margin:0 auto; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.img-dusk img { width:100%; display:block; aspect-ratio:21/9; object-fit:cover; object-position:center 30%; }

/* ── FEATURE PILLARS (cards) ── */
.pillars { max-width:1100px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pillar { background:var(--bg-2); border:1px solid var(--rule); border-radius:4px; padding:22px 20px; transition:border-color 0.2s, transform 0.15s; }
.pillar:hover { border-color:rgba(212,64,32,0.24); transform:translateY(-2px); }
.pillar-icon { font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--lava-light); margin-bottom:10px; }
.pillar-h { font-family:var(--font-title); font-size:16px; font-weight:700; color:var(--cream); margin-bottom:8px; }
.pillar p { font-size:15px; font-weight:400; color:var(--cream-mid); line-height:1.72; }

/* ── STUDIO DETAIL ── */
.studio-block { max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:28px; }
.studio-col-h { font-family:var(--font-title); font-size:14px; font-weight:700; color:var(--amber-light); letter-spacing:0.03em; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--rule); }
.studio-col p { font-size:15.5px; font-weight:400; color:var(--cream-mid); line-height:1.78; margin-bottom:10px; }
.studio-col p:last-child { margin-bottom:0; }
.studio-col strong { color:var(--cream-dim); font-weight:600; }
.tech-stack { margin-top:28px; padding-top:20px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:6px; }
.tech-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cream-faint); border:1px solid var(--rule); padding:4px 10px; border-radius:2px; }

/* ── MUSIC ── */
.music-block { max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.tracks { border-top:1px solid var(--rule); margin-top:20px; }
.track { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.track-title { font-family:var(--font-title); font-size:15px; font-weight:700; color:var(--cream); }
.track-type { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); white-space:nowrap; }
.soundcloud-note { margin-top:14px; font-size:14.5px; font-weight:400; color:var(--cream-mid); }
.soundcloud-note a { color:var(--lava-light); border-bottom:1px solid rgba(212,64,32,0.3); }

/* ── CTA ── */
.cta { text-align:center; padding:88px 32px 72px; position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); width:460px;height:460px;border-radius:50%;border:1px solid var(--rule);pointer-events:none; }
.cta::after { content:''; position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); width:250px;height:250px;border-radius:50%;border:1px solid rgba(212,64,32,0.07);pointer-events:none; }
.cta-logo { width:68px;height:68px;margin:0 auto 26px;opacity:0.42;position:relative;z-index:1; }
.cta-logo img { width:100%;height:100%;object-fit:contain; }
.cta-h2 { font-family:var(--font-title);font-size:clamp(20px,2.8vw,34px);font-weight:700;color:var(--cream);margin-bottom:14px;position:relative; }
.cta-p { font-size:17px;font-weight:400;color:var(--cream-dim);max-width:400px;margin:0 auto 30px;line-height:1.82;position:relative; }
.cta-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative; }
.cta-note { margin-top:16px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--cream-faint); position:relative; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--rule); padding:30px 32px; }
.foot { max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; }
/* width:auto is required: the img carries width/height attributes (so the browser
   reserves space and the layout does not shift), and those act as presentational
   hints that would otherwise stretch the square emblem to its 512px width. */
.foot-logo img { height:36px;width:auto;opacity:0.62;transition:opacity 0.2s; }
.foot-logo:hover img { opacity:0.65; }
.foot-links { display:flex;gap:20px;list-style:none;flex-wrap:wrap; }
.foot-links a { font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-faint);transition:color 0.2s; }
.foot-links a:hover { color:var(--cream-dim); }
.foot-copy { font-family:var(--font-mono);font-size:10px;color:var(--cream-faint); }

/* ── SPACING UTILITIES ── */
.mt-sm{margin-top:40px}.mt-md{margin-top:64px}.mt-lg{margin-top:88px}
.mb-sm{margin-bottom:40px}.mb-md{margin-bottom:64px}.mb-lg{margin-bottom:88px}

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ── SCROLL REVEAL (Apple-style on-scroll fade-up) ──
   Hidden state is gated by html.reveal-on, which assets/reveal.js only
   adds when IntersectionObserver is available and motion is allowed.
   No-JS / reduced-motion users always see content (no hidden state). */
@media (prefers-reduced-motion: no-preference) {
  /* Top-level blocks reveal as a unit; grid items (pillars, cards, list
     items) reveal individually with a stagger. Uses `animation` (not
     `transition`) so it never clobbers an element's own hover transition. */
  html.reveal-on :is(
    main > section, main > .img-full, main > .img-dusk, main > .shots-3,
    main > .big-quote, main > .dl-note, main > .contact-layout,
    .pillars > *, .studio-grid > *, .post-list > *, .labs-grid > *,
    .islands-grid > *, .guardians-grid > *, .sanctuary-grid > *,
    .tech-grid > *, .steps > *, .feat-list > *, .team > *
  ):not(.is-in) {
    opacity:0;
  }
  html.reveal-on :is(
    main > section, main > .img-full, main > .img-dusk, main > .shots-3,
    main > .big-quote, main > .dl-note, main > .contact-layout,
    .pillars > *, .studio-grid > *, .post-list > *, .labs-grid > *,
    .islands-grid > *, .guardians-grid > *, .sanctuary-grid > *,
    .tech-grid > *, .steps > *, .feat-list > *, .team > *
  ).is-in {
    animation: pdReveal .8s cubic-bezier(.16,.84,.44,1) backwards;
  }

  /* Newer browsers: drive the SAME reveal by scroll position (view-timeline)
     so it follows the reading. Falls back to the IntersectionObserver path
     above where scroll-driven animations aren't supported (e.g. older Safari).
     Both selectors below (with and without .is-in) so this wins over the
     time-based .is-in rule regardless of whether reveal.js has tagged it. */
  @supports (animation-timeline: view()) {
    html.reveal-on :is(
      main > section, main > .img-full, main > .img-dusk, main > .shots-3,
      main > .big-quote, main > .dl-note, main > .contact-layout,
      .pillars > *, .studio-grid > *, .post-list > *, .labs-grid > *,
      .islands-grid > *, .guardians-grid > *, .sanctuary-grid > *,
      .tech-grid > *, .steps > *, .feat-list > *, .team > *
    ),
    html.reveal-on :is(
      main > section, main > .img-full, main > .img-dusk, main > .shots-3,
      main > .big-quote, main > .dl-note, main > .contact-layout,
      .pillars > *, .studio-grid > *, .post-list > *, .labs-grid > *,
      .islands-grid > *, .guardians-grid > *, .sanctuary-grid > *,
      .tech-grid > *, .steps > *, .feat-list > *, .team > *
    ).is-in {
      animation: pdReveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
  }
}
@keyframes pdReveal { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }

/* ── RESPONSIVE ── */
@media (max-width:920px) {
  .pillars { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .nav-toggle { display:block; }
  .nav-links {
    position:absolute; top:88px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(10,8,6,0.98); border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden; transition:max-height 0.3s ease;
  }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:14px 32px; width:100%; font-size:12px; }
  #nav-check:checked ~ .nav-links { max-height:520px; }
}
@media (max-width:760px) {
  .shots-3 { grid-template-columns:1fr; }
  .shot-side { flex-direction:row; }
  .studio-grid { grid-template-columns:1fr; gap:28px; }
  .pillars { grid-template-columns:1fr; }
}

/* hero emblem cap on small screens */
@media (max-width:600px) { .hero-logo { width:150px; height:150px; } }

/* devlog work-in-progress note */
.dl-note { max-width:var(--max-w); margin:24px auto; padding:16px 20px; border:1px solid var(--rule); border-left:3px solid var(--amber); border-radius:4px; background:var(--bg-2); font-size:15px; font-weight:400; color:var(--cream-mid); line-height:1.66; }
.dl-note strong { color:var(--cream); font-weight:600; }

/* ── TEAM STRIP (roles only — no names/photos) ── */
.team { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:var(--max-w); margin:6px auto 30px; }
.team-card { background:var(--bg-2); border:1px solid var(--rule); border-radius:6px; padding:22px 20px; text-align:center; transition:border-color 0.2s, transform 0.15s; }
.team-card:hover { border-color:rgba(212,64,32,0.24); transform:translateY(-2px); }
.team-avatar { width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:17px; background:rgba(212,64,32,0.12); color:var(--lava-light); border:1px solid rgba(212,64,32,0.32); }
.team-role { font-family:var(--font-title); font-size:16px; font-weight:700; color:var(--cream); margin-bottom:6px; }
.team-line { font-size:14.5px; font-weight:400; color:var(--cream-mid); line-height:1.6; }

/* ── REAL PEOPLE vs FICTION ──
   The team grid and the character grids (.pillars on the universe page) shared the
   exact same treatment, so readers took the studio's three people for characters in
   the game. Real people are amber; everything fictional keeps the lava red. The
   .grid-eyebrow / .grid-intro pair labels each grid so the distinction also survives
   in words, not just in colour. */
.team-card { border-color:rgba(212,160,23,0.2); }
.team-card:hover { border-color:rgba(212,160,23,0.42); }
.team-avatar { background:rgba(212,160,23,0.12); color:var(--amber-light); border-color:rgba(212,160,23,0.34); }

.grid-eyebrow { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--amber); margin-bottom:10px; }
.grid-eyebrow.fic { color:var(--lava-light); }
.grid-intro { font-size:14.5px; font-weight:400; color:var(--cream-mid); line-height:1.7; margin:0 0 18px; max-width:640px; }
.grid-intro strong { color:var(--cream-dim); font-weight:400; }
@media (max-width:680px) { .team { grid-template-columns:1fr; } }

/* ── NEWSLETTER (inline email capture) ── */
.nl-form { display:flex; gap:10px; max-width:460px; margin:20px auto 0; flex-wrap:wrap; justify-content:center; }
.nl-form input[type="email"] { flex:1; min-width:220px; background:var(--bg-2); border:1px solid var(--rule); border-radius:3px; padding:11px 14px; color:var(--cream); font-family:var(--font-body); font-size:15px; outline:none; transition:border-color 0.2s; }
.nl-form input[type="email"]:focus { border-color:rgba(212,64,32,0.4); }
.nl-form input[type="email"]::placeholder { color:var(--cream-faint); }
.nl-hp { position:absolute; left:-9999px; }
.nl-note { margin-top:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:var(--cream-faint); }

/* ── BREADCRUMBS ── */
.crumbs { max-width:var(--max-w-wide); margin:0 auto; padding:14px 32px 0; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-faint); }
.crumbs a { color:var(--lava-light); transition:color 0.2s; }
.crumbs a:hover { color:var(--lava); }
.crumbs span[aria-current] { color:var(--cream-dim); }

/* ── MORE DEVLOGS (related posts) ── */
.more-devlogs { max-width:var(--max-w); margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.md-card { display:block; background:var(--bg-2); border:1px solid var(--rule); border-radius:5px; padding:16px; transition:border-color 0.2s, transform 0.15s; }
.md-card:hover { border-color:rgba(212,64,32,0.3); transform:translateY(-2px); }
.md-tag { font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--lava-light); }
.md-title { font-family:var(--font-title); font-size:15px; font-weight:700; color:var(--cream); margin-top:5px; line-height:1.25; }
@media (max-width:680px) { .more-devlogs { grid-template-columns:1fr; } }