/* ==========================================================================
   VANILLAMONSTER — "THE WILD"
   Minecraft-material design system. Sharp geometry, inventory-slot surfaces,
   real screenshots as the visual content, restrained motion.

   CONTENTS
   01  Tokens
   02  Reset & base type
   03  Textures & block edges
   04  Buttons & chips
   05  Navigation
   06  Hero
   07  Reveal
   08  Philosophy (protect / avoid)
   09  Core systems
   10  Northern Wildport showcase
   11  Monster Transit
   12  World & BlueMap
   13  Gallery & lightbox
   14  Roadmap
   15  Oceanbound
   16  FAQ
   17  Final CTA & footer
   18  Toast
   19  Responsive
   20  Motion preferences
   ========================================================================== */

/* ── 01 Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Materials */
  --deepslate:    #111713;
  --spruce-dark:  #1B2118;
  --spruce:       #2A3524;
  --moss:         #657F49;
  --moss-light:   #8FAF66;
  --stone:        #6E746B;
  --stone-dark:   #303730;
  --parchment:    #E8DFC8;
  --lantern:      #E2A642;
  --ember:        #C86F32;
  --emerald:      #2FBF71;
  --water:        #397B88;
  --oak:          #8A6440;
  --spruce-wood:  #4A3A26;

  /* Ink */
  --ink:          #E8DFC8;
  --ink-dim:      #AFB6A2;
  --ink-mute:     #838C79;

  /* Structure */
  --edge:         rgba(232,223,200,.10);
  --edge-strong:  rgba(232,223,200,.20);
  --bevel-light:  rgba(232,223,200,.13);
  --bevel-dark:   rgba(0,0,0,.55);
  --glass:        rgba(17,23,19,.82);

  /* Type */
  --f-body:  "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pixel: "Pixelify Sans", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --t-hero:  clamp(2.3rem, 5.6vw, 4.5rem);
  --t-h2:    clamp(1.75rem, 3.4vw, 2.9rem);
  --t-h3:    clamp(1.1rem, 1.6vw, 1.32rem);
  --t-body:  clamp(1rem, 1.05vw, 1.06rem);
  --t-sm:    .92rem;
  --t-xs:    .78rem;
  --t-px:    .8rem;      /* pixel-font label size */

  /* Rhythm */
  --gut:   clamp(1.1rem, 3.6vw, 2.25rem);
  --pad-y: clamp(4.5rem, 9vw, 8rem);
  --max:   1240px;
  --measure: 66ch;

  /* Block geometry — deliberately small radii */
  --r1: 2px;
  --r2: 4px;
  --r3: 6px;
  --r4: 8px;
  --r5: 12px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.35,1);
  --fast: .16s;
  --med:  .32s;
  --slow: .7s;

  /* Depth */
  --sh-1: 0 2px 0 rgba(0,0,0,.45);
  --sh-2: 0 8px 24px -10px rgba(0,0,0,.7);
  --sh-3: 0 26px 60px -24px rgba(0,0,0,.85);
}

/* ── 02 Reset & base type ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--deepslate);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
[hidden]{ display:none !important }   /* beats component display values */
svg{ display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-body);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
}
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); line-height:1.3; letter-spacing:-.01em }
p{ margin:0 }

::selection{ background:rgba(226,166,66,.3); color:var(--parchment) }

:focus-visible{
  outline:3px solid var(--lantern);
  outline-offset:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  padding:.85rem 1.3rem;
  background:var(--lantern); color:#14100A;
  font-weight:700; font-size:var(--t-sm);
}
.skip:focus{ left:0 }

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  position:relative;
}

.section{ padding-block:var(--pad-y); position:relative }
.section--alt{ background:var(--spruce-dark) }
.section--deep{ background:#0D120F }

.head{ max-width:52ch; margin-bottom:clamp(2.5rem,5vw,3.75rem) }
.head--wide{ max-width:64ch }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--f-pixel);
  font-size:var(--t-px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lantern);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:10px; height:10px;
  background:var(--lantern);
  box-shadow:0 0 0 3px rgba(226,166,66,.18);
  flex:none;
}

.lede{
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  color:var(--ink-dim);
  max-width:var(--measure);
  margin-top:1.15rem;
}

.muted{ color:var(--ink-dim) }

.px-label{
  font-family:var(--f-pixel);
  font-size:var(--t-px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.mono{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.04em }

/* ── 03 Textures & block edges ─────────────────────────────────────────── */

/* Very light film grain across the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:2 }

/* Spruce plank grain — horizontal board lines */
.tex-plank{
  background-image:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.22) 0 1px,
      transparent 1px 14px),
    repeating-linear-gradient(90deg,
      rgba(232,223,200,.025) 0 2px,
      transparent 2px 9px);
}

/* Stone brick — offset block courses */
.tex-stone{
  background-image:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.28) 0 1px,
      transparent 1px 16px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.2) 0 1px,
      transparent 1px 32px);
}

/* Moss speckle */
.tex-moss{
  background-image:
    radial-gradient(circle at 12% 22%, rgba(143,175,102,.09) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 58%, rgba(101,127,73,.08) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 82%, rgba(143,175,102,.06) 0 3px, transparent 4px);
  background-size:120px 120px;
}

/* Castellated block edge between sections. Teeth take the colour of the
   surface they belong to, so the seam reads as stacked blocks. */
.pxedge{
  height:10px;
  background:
    repeating-linear-gradient(90deg,
      var(--tooth,var(--spruce-dark)) 0 10px,
      transparent 10px 20px);
  position:relative;
  z-index:3;
  margin-bottom:-1px;
}
.pxedge--alt{ --tooth:var(--spruce-dark) }
.pxedge--deep{ --tooth:#0D120F }
.pxedge--base{ --tooth:var(--deepslate) }

/* Inventory-slot surface: light bevel top-left, dark bevel bottom-right */
.slot{
  background:linear-gradient(180deg,#232B1E,#1A2016);
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    var(--sh-1);
}

/* Raised stone panel */
.panel{
  background:linear-gradient(180deg,#28312300,#1D2419);
  background-color:#20281C;
  border:1px solid #0C110B;
  border-radius:var(--r3);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    var(--sh-2);
}

/* ── 04 Buttons & chips ────────────────────────────────────────────────── */
.btn{
  --bg:#28311F;
  --fg:var(--ink);
  --bd:#0B100A;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.92rem 1.5rem;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bd);
  border-radius:var(--r2);
  font-family:var(--f-pixel);
  font-size:.95rem;
  letter-spacing:.03em;
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    0 3px 0 rgba(0,0,0,.5);
  transition:transform var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease),
             background-color var(--fast) var(--ease),
             filter var(--fast) var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none }

.btn:hover{ filter:brightness(1.12) }
.btn:active{
  transform:translateY(3px);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    0 0 0 rgba(0,0,0,.5);
}

.btn--primary{ --bg:var(--lantern); --fg:#17110A; --bd:#8A5F1D }
.btn--emerald{ --bg:var(--emerald); --fg:#06170D; --bd:#1A7A46 }
.btn--ghost{ --bg:rgba(232,223,200,.06); --bd:#0B100A }
.btn--sm{ padding:.6rem 1rem; font-size:.85rem }

.btn.is-disabled{
  --bg:#232A1E; --fg:var(--ink-mute); --bd:#0B100A;
  cursor:not-allowed;
  filter:none;
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.05), inset -1px -1px 0 rgba(0,0,0,.4);
}
.btn.is-disabled:active{ transform:none }

.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.34rem .62rem;
  background:#1A2016;
  border:1px solid #0B100A;
  border-radius:var(--r1);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.07);
  font-family:var(--f-pixel);
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--ink-dim);
}
.chip--emerald{ color:var(--emerald) }
.chip--lantern{ color:var(--lantern) }
.chip--water{ color:#6FB6C4 }

/* Status pill with a live-looking but honest state dot */
.status{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem .85rem;
  background:rgba(17,23,19,.78);
  border:1px solid var(--edge-strong);
  border-radius:var(--r2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--f-pixel);
  font-size:var(--t-px);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--parchment);
}
.status i{
  width:8px; height:8px;
  background:var(--lantern);
  flex:none;
  animation:blink 2.4s steps(1,end) infinite;
}
@keyframes blink{ 0%,70%{opacity:1} 71%,100%{opacity:.28} }

/* ── 05 Navigation ─────────────────────────────────────────────────────── */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color var(--med) var(--ease),
             border-color var(--med) var(--ease);
}
.nav.is-stuck{
  background:var(--glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:#0A0E09;
  box-shadow:0 1px 0 rgba(232,223,200,.06);
}
.nav__in{
  max-width:var(--max);
  margin-inline:auto;
  padding:.7rem var(--gut);
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.nav__logo{ flex:none; display:block }
.nav__logo img{ height:34px; width:auto }

.nav__links{
  display:flex;
  align-items:center;
  gap:1.6rem;
  margin-left:auto;
  font-family:var(--f-pixel);
  font-size:.92rem;
  letter-spacing:.03em;
  color:var(--ink-dim);
}
.nav__links a{ padding:.35rem 0; border-bottom:2px solid transparent; transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease) }
.nav__links a:hover,
.nav__links a.is-active{ color:var(--parchment); border-bottom-color:var(--lantern) }

.nav__cta{ flex:none }

.nav__burger{
  display:none;
  width:42px; height:42px;
  margin-left:auto;
  align-items:center; justify-content:center;
  background:#1A2016;
  border:1px solid #0B100A;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.08);
}
.nav__burger span{ display:block; width:16px; height:2px; background:var(--parchment); position:relative }
.nav__burger span::before,
.nav__burger span::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:var(--parchment);
  transition:transform var(--med) var(--ease);
}
.nav__burger span::before{ top:-6px }
.nav__burger span::after{ top:6px }
.nav__burger[aria-expanded="true"] span{ background:transparent }
.nav__burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:rgba(13,18,15,.98);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gut);
  gap:.25rem;
  opacity:0; visibility:hidden;
  transition:opacity var(--med) var(--ease), visibility var(--med);
}
.drawer.is-open{ opacity:1; visibility:visible }
.drawer a{
  font-family:var(--f-pixel);
  font-size:clamp(1.5rem,6vw,2rem);
  padding:.6rem 0;
  border-bottom:1px solid var(--edge);
  transition:color var(--fast) var(--ease), padding-left var(--med) var(--ease);
}
.drawer a:hover{ color:var(--lantern); padding-left:.5rem }
.drawer .btn{ margin-top:1.75rem; align-self:flex-start }

/* ── 06 Hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

.hero__media{
  position:absolute; inset:0; z-index:-3;
  overflow:hidden;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  will-change:transform;
}

/* Dark treatment that keeps the blocks readable as Minecraft */
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,18,15,.86) 0%, rgba(13,18,15,.28) 26%, rgba(13,18,15,.12) 46%, rgba(17,23,19,.9) 88%, var(--deepslate) 100%),
    radial-gradient(ellipse 80% 60% at 50% 78%, rgba(226,166,66,.1), transparent 70%);
}

/* Slow low fog band */
.hero__fog{
  position:absolute; z-index:-1;
  left:-25%; right:-25%;
  bottom:8%;
  height:34%;
  pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 60%, rgba(200,214,196,.13), transparent 72%);
  filter:blur(26px);
  animation:fogdrift 78s linear infinite;
}
@keyframes fogdrift{
  0%   { transform:translate3d(-8%,0,0) }
  50%  { transform:translate3d(8%,-2%,0) }
  100% { transform:translate3d(-8%,0,0) }
}

/* Square drifting dust — blocky, never round */
.hero__particles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.dust{
  position:absolute;
  background:var(--parchment);
  opacity:0;
  animation:dustrise linear infinite;
}
@keyframes dustrise{
  0%   { transform:translate3d(0,10px,0); opacity:0 }
  15%  { opacity:.55 }
  85%  { opacity:.35 }
  100% { transform:translate3d(var(--dx,16px), calc(-1 * var(--rise,60vh)), 0); opacity:0 }
}

.hero__in{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:7rem var(--gut) clamp(4rem,9vh,7rem);
  position:relative;
  z-index:2;
}

.hero__logo{
  width:min(430px,74vw);
  margin-bottom:1.5rem;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
}

.hero__title{
  font-size:var(--t-hero);
  font-weight:800;
  letter-spacing:-.028em;
  max-width:16ch;
  text-shadow:0 4px 24px rgba(0,0,0,.7);
}

.hero__sub{
  margin-top:1.25rem;
  max-width:56ch;
  color:#D6DAC9;
  font-size:clamp(1rem,1.35vw,1.14rem);
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.hero__sub b{ color:var(--parchment); font-weight:700 }

.hero__acts{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:2rem;
}

.hero__addr{
  margin-top:1.75rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem;
}
.hero__addr .px-label{ color:var(--ink-dim) }

.scrolldown{
  position:absolute;
  left:50%; bottom:1.25rem;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--f-pixel);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  transition:color var(--fast) var(--ease), opacity var(--med) var(--ease);
}
.scrolldown:hover{ color:var(--lantern) }
.scrolldown b{ display:block; width:6px; height:6px; background:currentColor; animation:stepdown 1.8s steps(3,end) infinite }
@keyframes stepdown{ 0%{transform:translateY(0)} 100%{transform:translateY(12px)} }

/* ── 07 Reveal ─────────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none }
.no-js .reveal{ opacity:1; transform:none }

/* ── 08 Philosophy ─────────────────────────────────────────────────────── */
.philo__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.pcol{ padding:clamp(1.4rem,2.6vw,2rem) }
.pcol h3{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1.15rem;
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.pcol--keep h3{ color:var(--emerald) }
.pcol--avoid h3{ color:var(--ember) }

.plist{ list-style:none; margin:0; padding:0 }
.plist li{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.7rem 0;
  border-top:1px solid var(--edge);
  font-size:var(--t-sm);
  color:var(--ink-dim);
  line-height:1.55;
}
.plist li:first-child{ border-top:0; padding-top:0 }
.plist b{ display:block; color:var(--ink); font-weight:700 }
.pmark{
  flex:none;
  width:14px; height:14px;
  margin-top:.35rem;
  background:currentColor;
}
.pcol--keep .pmark{
  color:var(--emerald);
  clip-path:polygon(14% 50%,0 64%,36% 100%,100% 26%,86% 12%,36% 72%);
}
.pcol--avoid .pmark{
  color:var(--ember);
  clip-path:polygon(14% 0,0 14%,36% 50%,0 86%,14% 100%,50% 64%,86% 100%,100% 86%,64% 50%,100% 14%,86% 0,50% 36%);
}

/* ── 09 Core systems ───────────────────────────────────────────────────── */
.systems{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.sys{
  padding:clamp(1.3rem,2.4vw,1.75rem);
  transition:transform var(--med) var(--ease), filter var(--med) var(--ease);
}
.sys:hover{ transform:translateY(-3px); filter:brightness(1.08) }

.sys__icon{
  width:46px; height:46px;
  margin-bottom:1.1rem;
  display:grid; place-items:center;
  background:#141A11;
  border:1px solid #0A0E09;
  border-radius:var(--r1);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.09), inset -1px -1px 0 rgba(0,0,0,.5);
}
.sys__icon svg{ width:28px; height:28px }

.sys h3{ margin-bottom:.5rem }
.sys p{ font-size:var(--t-sm); color:var(--ink-dim) }
.sys__meta{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem }

@media (min-width:900px){
  .systems{ grid-template-columns:repeat(6,1fr) }
  .sys{ grid-column:span 2 }
  .sys--wide{ grid-column:span 3 }
}

/* ── 10 Northern Wildport showcase ─────────────────────────────────────── */
.showcase__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.frame{
  position:relative;
  border:1px solid #0A0E09;
  border-radius:var(--r3);
  overflow:hidden;
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    var(--sh-3);
  background:#151B12;
}
.frame img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.frame__tag{
  position:absolute;
  left:.6rem; bottom:.6rem;
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.showcase__stack{ display:grid; gap:1rem }
.showcase__facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.5rem;
  margin-top:1.5rem;
}
.fact{
  padding:.7rem .8rem;
  background:#171E14;
  border:1px solid #0A0E09;
  border-radius:var(--r1);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.06);
  font-family:var(--f-pixel);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--ink-dim);
}

/* ── 11 Monster Transit ────────────────────────────────────────────────── */
.board{
  padding:clamp(1.5rem,3.5vw,2.5rem);
  background-color:#221B12;
  border:1px solid #0C0A06;
  border-radius:var(--r3);
  box-shadow:
    inset 1px 1px 0 rgba(232,223,200,.1),
    inset -1px -1px 0 rgba(0,0,0,.6),
    var(--sh-2);
}
.board__head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(232,223,200,.12);
  margin-bottom:1.75rem;
}
.board__head h3{
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:1.15rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lantern);
}

.route{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.stop{
  flex:1 1 190px;
  padding:1rem 1.1rem;
  background:#1A2016;
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.09), inset -1px -1px 0 rgba(0,0,0,.5);
}
.stop .px-label{ color:var(--ink-mute); display:block; margin-bottom:.3rem }
.stop b{ font-family:var(--f-pixel); font-weight:400; font-size:1.08rem; letter-spacing:.03em; color:var(--parchment) }

/* Rail between the two stops */
.rail{
  flex:1 1 120px;
  min-width:90px;
  height:22px;
  position:relative;
  background:
    repeating-linear-gradient(90deg, #6B5230 0 4px, transparent 4px 12px) 0 50%/100% 10px no-repeat,
    linear-gradient(180deg, transparent 44%, #9AA096 44% 50%, transparent 50%),
    linear-gradient(180deg, transparent 62%, #9AA096 62% 68%, transparent 68%);
}
.rail::after{
  content:"";
  position:absolute;
  top:50%; right:0;
  width:0; height:0;
  transform:translateY(-50%);
  border-left:9px solid var(--lantern);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}

.board__meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.6rem;
  margin-top:1.5rem;
}
.meta{
  padding:.85rem 1rem;
  background:#1A2016;
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.07);
}
.meta .px-label{ display:block; margin-bottom:.25rem }
.meta b{ font-family:var(--f-pixel); font-weight:400; font-size:1.02rem; color:var(--parchment) }
.meta b.emerald{ color:var(--emerald) }

.board__note{
  margin-top:1.25rem;
  font-size:var(--t-sm);
  color:var(--ink-dim);
}
.transit__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}

/* ── 12 World & BlueMap ────────────────────────────────────────────────── */
.map__frame{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid #0A0E09;
  border-radius:var(--r3);
  overflow:hidden;
  background:#141A12;
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    var(--sh-3);
}
.map__frame iframe{ width:100%; height:100%; border:0; display:block }

.map__ph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  padding:2rem;
  background-color:#151C13;
  background-image:
    repeating-linear-gradient(90deg, rgba(232,223,200,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(180deg, rgba(232,223,200,.05) 0 1px, transparent 1px 32px),
    radial-gradient(circle at 50% 50%, rgba(101,127,73,.12), transparent 68%);
}
.map__ph h3{
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:1.2rem;
  letter-spacing:.05em;
  margin:1rem 0 .5rem;
}
.map__ph p{ font-size:var(--t-sm); color:var(--ink-dim); max-width:44ch; margin-inline:auto }
.map__ph .mono{ display:block; margin-top:.9rem; color:var(--ink-mute) }

.world__facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.6rem;
  margin-top:1.5rem;
}

/* ── 13 Gallery & lightbox ─────────────────────────────────────────────── */
.gal{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}
.gal__item{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  text-align:left;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid #0A0E09;
  border-radius:var(--r3);
  background:#151B12;
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    var(--sh-2);
  transition:transform var(--med) var(--ease), filter var(--med) var(--ease);
}
.gal__item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--slow) var(--ease);
}
.gal__item:hover{ transform:translateY(-3px) }
.gal__item:hover img{ transform:scale(1.045) }

.gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem;
  display:flex; align-items:flex-end; gap:.75rem;
  background:linear-gradient(180deg, transparent, rgba(9,13,10,.9));
}
.gal__cap b{
  display:block;
  font-family:var(--f-body);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
}
.gal__cap i{
  display:block;
  font-style:normal;
  font-family:var(--f-pixel);
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--lantern);
  margin-top:.2rem;
}
.gal__zoom{
  margin-left:auto; flex:none;
  width:30px; height:30px;
  display:grid; place-items:center;
  background:rgba(20,26,17,.9);
  border:1px solid var(--edge-strong);
  border-radius:var(--r1);
  opacity:0;
  transition:opacity var(--med) var(--ease);
}
.gal__zoom svg{ width:14px; height:14px }
.gal__item:hover .gal__zoom{ opacity:1 }

/* Empty screenshot slot — honest placeholder, styled like an empty inventory cell */
.gal__item--empty{
  display:grid;
  place-items:center;
  text-align:center;
  padding:1.5rem;
  background:
    repeating-linear-gradient(45deg, rgba(232,223,200,.022) 0 8px, transparent 8px 16px),
    linear-gradient(180deg,#1A2016,#141A11);
  cursor:default;
}
.gal__item--empty:hover{ transform:none }
.gal__item--empty b{
  display:block;
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:1rem;
  letter-spacing:.05em;
  color:var(--ink-dim);
  margin-top:.75rem;
}
.gal__item--empty span{
  display:block;
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--ink-mute);
  margin-top:.35rem;
}
.gal__ph-icon{ width:34px; height:34px; opacity:.5; margin-inline:auto }

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:var(--gut);
  background:rgba(9,13,10,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0; visibility:hidden;
  transition:opacity var(--med) var(--ease), visibility var(--med);
}
.lightbox.is-open{ opacity:1; visibility:visible }
.lightbox__stage{
  width:min(1120px,100%);
  border:1px solid #0A0E09;
  border-radius:var(--r3);
  overflow:hidden;
  background:#141A11;
  box-shadow:var(--sh-3);
}
.lightbox__stage img{ width:100%; display:block }
.lightbox__cap{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.25rem;
  border-top:1px solid var(--edge);
}
.lightbox__cap b{ font-weight:700 }
.lightbox__cap i{
  font-style:normal;
  font-family:var(--f-pixel);
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--lantern);
}
.lightbox__cap p{ font-size:var(--t-sm); color:var(--ink-dim); flex:1 1 100% }

.lb-btn{
  position:absolute;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:#1A2016;
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.08);
  transition:filter var(--fast) var(--ease);
}
.lb-btn:hover{ filter:brightness(1.3) }
.lb-btn svg{ width:18px; height:18px }
.lb-close{ top:1.1rem; right:1.1rem }
.lb-prev{ left:1.1rem; top:50%; transform:translateY(-50%) }
.lb-next{ right:1.1rem; top:50%; transform:translateY(-50%) }

/* ── 14 Roadmap ────────────────────────────────────────────────────────── */
.road{ display:grid; gap:1rem }
.stage{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  padding:clamp(1.25rem,2.4vw,1.75rem);
}
.stage__mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:#141A11;
  border:1px solid #0A0E09;
  border-radius:var(--r1);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.08);
  font-family:var(--f-pixel);
  font-size:.9rem;
  color:var(--ink-mute);
}
.stage--now .stage__mark{ color:var(--lantern); border-color:#7A5520; background:#231A0E }
.stage__head{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem }
.stage h3{ font-size:clamp(1.1rem,2vw,1.35rem) }
.stage p{ font-size:var(--t-sm); color:var(--ink-dim); max-width:62ch }
.stage__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem }

/* ── 15 Oceanbound ─────────────────────────────────────────────────────── */
.ocean{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, #0B1417 0%, #10222A 48%, #0C171C 100%);
}
.ocean::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 46% at 50% 100%, rgba(57,123,136,.34), transparent 70%),
    radial-gradient(circle at 22% 18%, rgba(226,166,66,.09), transparent 55%);
}
/* Blocky wave band — decorative overlay, not a fake screenshot */
.ocean__waves{
  position:absolute;
  left:0; right:0; bottom:0;
  height:64px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(57,123,136,.5) 0 16px, transparent 16px 32px) 0 0/32px 16px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(57,123,136,.34) 16px 32px) 0 16px/32px 16px repeat-x,
    repeating-linear-gradient(90deg, rgba(57,123,136,.22) 0 16px, transparent 16px 32px) 0 32px/32px 16px repeat-x;
  animation:waveshift 12s steps(2,end) infinite;
}
@keyframes waveshift{ 0%{background-position-x:0,16px,0} 100%{background-position-x:32px,48px,32px} }

.ocean__in{ position:relative; z-index:2; max-width:70ch }
.ocean h2{ margin-top:.5rem }
.ocean .lede{ color:#BFD3D6 }
.ocean__list{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.5rem;
}
.ocean__list li{
  padding:.7rem .85rem;
  background:rgba(10,20,24,.66);
  border:1px solid rgba(232,223,200,.12);
  border-radius:var(--r1);
  font-family:var(--f-pixel);
  font-size:.85rem;
  letter-spacing:.04em;
  color:#CFE0E2;
}

/* ── 16 FAQ ────────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:.6rem; max-width:82ch }
.faq details{
  background:#1A2016;
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.07);
  overflow:hidden;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.05rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  font-weight:700;
  font-size:1rem;
  transition:background-color var(--fast) var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ background:#1F261A }
.faq summary::after{
  content:"";
  margin-left:auto; flex:none;
  width:12px; height:12px;
  background:var(--lantern);
  clip-path:polygon(0 25%,100% 25%,100% 45%,0 45%,0 25%,40% 0,60% 0,60% 100%,40% 100%);
  transition:transform var(--med) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{
  padding:0 1.25rem 1.25rem;
  font-size:var(--t-sm);
  color:var(--ink-dim);
  max-width:72ch;
}

/* ── 17 Final CTA & footer ─────────────────────────────────────────────── */
.cta{ text-align:center; position:relative; overflow:hidden }
.cta::before{
  content:"";
  position:absolute; left:50%; bottom:-40%;
  width:min(900px,130vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(226,166,66,.16), rgba(200,111,50,.05) 45%, transparent 68%);
  pointer-events:none;
}
.cta .wrap{ position:relative; z-index:2 }
.cta h2{ max-width:20ch; margin-inline:auto }
.cta .lede{ margin-inline:auto; text-align:center }
.cta__acts{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:2rem }
.cta__note{ margin-top:1.75rem; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-mute) }

.foot{
  background:#0C110E;
  border-top:1px solid #060907;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.foot__grid{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:2rem;
  padding-bottom:2.5rem;
}
.foot__brand img{ width:180px; margin-bottom:1rem }
.foot__brand p{ font-size:var(--t-sm); color:var(--ink-mute); max-width:38ch }
.foot__tagline{
  font-family:var(--f-pixel);
  font-size:.9rem;
  letter-spacing:.06em;
  color:var(--lantern);
  margin-bottom:.5rem !important;
}
.foot h4{
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:.9rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.foot ul a,
.foot ul span{ font-size:var(--t-sm); color:var(--ink-mute); transition:color var(--fast) var(--ease) }
.foot ul a:hover{ color:var(--parchment) }
.foot ul span{ opacity:.65 }
.foot__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.75rem;
  border-top:1px solid var(--edge);
  font-size:var(--t-xs);
  color:var(--ink-mute);
}

/* ── 18 Toast ──────────────────────────────────────────────────────────── */
.toast{
  position:fixed;
  left:50%; bottom:1.5rem;
  transform:translate(-50%,150%);
  z-index:300;
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1.2rem;
  background:#1F2718;
  border:1px solid #0A0E09;
  border-radius:var(--r2);
  box-shadow:inset 1px 1px 0 rgba(232,223,200,.1), var(--sh-3);
  font-family:var(--f-pixel);
  font-size:.85rem;
  letter-spacing:.04em;
  transition:transform var(--med) var(--ease);
}
.toast.is-up{ transform:translate(-50%,0) }
.toast svg{ width:14px; height:14px; color:var(--emerald) }

/* ── 19 Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .philo__grid,
  .showcase__grid,
  .transit__grid{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:860px){
  .nav__links,
  .nav__cta{ display:none }
  .nav__burger{ display:flex }
  .nav__logo img{ height:28px }
  .hero{ align-items:flex-end }
}
@media (max-width:560px){
  .foot__grid{ grid-template-columns:1fr }
  .lb-prev{ left:.5rem }
  .lb-next{ right:.5rem }
  .route{ flex-direction:column; align-items:stretch }
  .rail{ height:34px; width:100%; transform:rotate(90deg) scaleX(.4); margin:-.5rem 0 }
}

/* ── 20 Motion preferences ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .hero__fog,
  .hero__particles,
  .ocean__waves{ display:none }
}


/* ── 21 Document pages ────────────────────────────────────────────────── */
.doc-body{ background:#0D120F }
.doc-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,18,15,.94);
  border-bottom:1px solid #060907;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.doc-nav__in{
  max-width:var(--max); margin-inline:auto; padding:.75rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.doc-nav img{ height:30px; width:auto }
.doc-hero{
  padding:clamp(7rem,13vw,10rem) 0 clamp(3.5rem,7vw,5.5rem);
  background:
    linear-gradient(180deg,rgba(13,18,15,.4),var(--deepslate)),
    url("assets/hero-vanillamonster.webp") center 42%/cover;
  border-bottom:1px solid #060907;
}
.doc-hero h1{ font-size:clamp(2.25rem,5vw,4rem); max-width:18ch }
.doc-hero .lede{ color:#D6DAC9 }
.doc-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem }
.doc-main{ padding:clamp(3rem,7vw,6rem) 0 }
.doc-layout{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(2rem,5vw,4rem); align-items:start }
.doc-content{ max-width:78ch }
.doc-content section{ padding:0 0 2rem; margin:0 0 2rem; border-bottom:1px solid var(--edge) }
.doc-content section:last-child{ border-bottom:0 }
.doc-content h2{ font-size:clamp(1.35rem,2.2vw,1.8rem); margin-bottom:.9rem }
.doc-content h3{ margin:1.4rem 0 .55rem }
.doc-content p + p{ margin-top:.85rem }
.doc-content ul,.doc-content ol{ margin:.8rem 0 0; padding-left:1.25rem }
.doc-content li{ margin:.45rem 0; color:var(--ink-dim) }
.doc-content strong{ color:var(--ink) }
.doc-note{
  padding:1rem 1.1rem; margin:1rem 0;
  background:#1A2016; border:1px solid #0A0E09; border-left:4px solid var(--lantern);
  border-radius:var(--r2); color:var(--ink-dim);
}
.doc-note--warn{ border-left-color:var(--ember) }
.doc-table{ width:100%; border-collapse:collapse; margin:1rem 0 0; font-size:var(--t-sm) }
.doc-table th,.doc-table td{ text-align:left; vertical-align:top; padding:.75rem; border:1px solid var(--edge) }
.doc-table th{ background:#1A2016; color:var(--parchment); font-family:var(--f-pixel); font-weight:400 }
.doc-table td{ color:var(--ink-dim) }
.doc-side{ position:sticky; top:82px; padding:1.1rem }
.doc-side h2{ font-family:var(--f-pixel); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.75rem; color:var(--lantern) }
.doc-side ol{ margin:0; padding-left:1.1rem; display:grid; gap:.4rem }
.doc-side a{ font-size:.86rem; color:var(--ink-dim) }
.doc-side a:hover{ color:var(--parchment) }
.doc-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem }
.map__open{ margin-top:1.15rem }
@media (max-width:900px){
  .doc-layout{ grid-template-columns:1fr }
  .doc-side{ display:none }
}