/* ═══════════════════════════════════════════════════════════
   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;}

: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; }
@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; } }