/* ============================================================
   MAZELESS — $MAZELESS
   Material: one sheet of pressed paper. Everything on this page
   is either raised out of it or debossed into it. The only ink
   is black, and one jade line that never turns.
   ============================================================ */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  /* The ground is limestone — cold, mineral, the maze wall you are standing on.
     The paper is warm and sits ON it. That is the relationship in the artwork,
     and it keeps this build off Sol94's uniformly warm sunlit sand. */
  --field:      #D2D1C9;
  --field-lo:   #C0BFB6;

  /* paper (sampled from the artwork with ffmpeg) */
  --paper:      #DFD4C4;
  --paper-hi:   #EFE7DA;
  --paper-mid:  #D6CAB8;
  --paper-lo:   #C4B7A2;
  --paper-edge: #AC9E88;

  /* ink */
  --ink:   #191916;
  --ink-2: #4B473F;
  --ink-3: #7C7566;

  /* the one accent */
  --jade:      #0C6F42;
  --jade-lit:  #2FA45F;
  --jade-deep: #063C25;

  /* relief light source, moved by the pointer */
  --lx: -1px;  --ly: -1px;

  --shell: min(1220px, 92vw);
  --r: 4px;

  --f-display: 'Funnel Display', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:clip;
  background:var(--field); color:var(--ink);
  font:400 17px/1.65 var(--f-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{list-style:none; padding:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--jade); color:#F2EDE3}
:focus-visible{outline:2.5px solid var(--jade); outline-offset:3px; border-radius:2px}
[hidden]{display:none !important}

/* paper fibre — the material, not a film grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E");
}
/* the sheet is never perfectly flat */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,252,245,.5), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(88,72,48,.16), transparent 62%);
}

/* custom scrollbar — a corridor */
html{scrollbar-color:var(--jade) var(--field-lo); scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--field-lo)}
::-webkit-scrollbar-thumb{background:var(--jade); border:3px solid var(--field-lo)}

/* ── shared type ────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-display); font-weight:800; line-height:1.02; letter-spacing:-.022em}
h1{font-size:clamp(2.35rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.85rem,4vw,3.05rem)}
h3{font-size:1.16rem; font-weight:700; letter-spacing:-.01em}
h1 em,h2 em{font-style:normal; color:var(--jade); position:relative; white-space:nowrap}
h1 em::after{
  content:""; position:absolute; left:0; right:-.06em; bottom:.06em; height:.075em;
  background:var(--jade-lit); transform:scaleX(var(--u,0)); transform-origin:0 50%;
  transition:transform .9s var(--ease) .5s;
}
.reveal.in h1 em::after,h1 em::after{--u:1}

.eyebrow,.kicker,.wk-day,.r-label,.ca-tag,.v-kicker,.esc-kicker,.toy-stats dt{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
}
.wrap{width:var(--shell); margin-inline:auto}

/* ── the paper material ─────────────────────────────────── */
.raised{
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 62%,var(--paper-mid));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.62),
    inset -1px -1px 0 rgba(90,72,48,.13),
    0 2px 0 var(--paper-lo),
    0 16px 30px -22px rgba(52,40,24,.85);
}
.pressed{
  background:linear-gradient(158deg,var(--paper-mid),var(--paper) 55%);
  box-shadow:
    inset 2px 2px 5px rgba(96,78,52,.30),
    inset -2px -2px 4px rgba(255,255,255,.55);
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --bg1:var(--paper-hi); --bg2:var(--paper-mid);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.15rem; border:none; border-radius:var(--r); cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:.93rem; letter-spacing:.005em;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.6),
    inset -1px -1px 0 rgba(90,72,48,.16),
    0 3px 0 var(--paper-lo),
    0 12px 20px -16px rgba(52,40,24,.9);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s;
}
.btn:hover{transform:translateY(-2px); box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(90,72,48,.16),0 5px 0 var(--paper-lo),0 20px 26px -18px rgba(52,40,24,.9)}
/* every control physically presses into the sheet */
.btn:active{transform:translateY(2px); box-shadow:inset 2px 2px 5px rgba(96,78,52,.34),inset -1px -1px 3px rgba(255,255,255,.4)}
.btn img{opacity:.85}
.btn-jade{
  --bg1:var(--jade-lit); --bg2:var(--jade); color:#F4EFE4;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(0,0,0,.22),0 3px 0 var(--jade-deep),0 14px 22px -16px rgba(6,60,37,.95);
}
.btn-jade:hover{box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(0,0,0,.22),0 5px 0 var(--jade-deep),0 22px 28px -18px rgba(6,60,37,.95)}
.btn-jade:active{box-shadow:inset 2px 2px 6px rgba(0,0,0,.35)}
.btn-jade img{filter:invert(1) brightness(1.6); opacity:.95}
.btn-lg{padding:.95rem 1.6rem; font-size:1.02rem}
.link-btn{
  background:none; border:none; padding:.3rem 0; cursor:pointer;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1.5px solid var(--paper-edge); transition:color .2s,border-color .2s;
}
.link-btn:hover{color:var(--jade); border-color:var(--jade)}
kbd{
  font-family:var(--f-mono); font-size:.82em; padding:.12em .42em; border-radius:3px;
  background:var(--paper-hi); box-shadow:inset 1px 1px 0 #fff, 0 1.5px 0 var(--paper-edge);
}

/* ── preloader ──────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:120; background:var(--field);
  display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.done{opacity:0; visibility:hidden}
.pre-inner{width:min(340px,74vw)}
.pre-maze{width:100%; height:auto; overflow:visible}
.pre-route{
  fill:none; stroke:var(--jade); stroke-width:3.2; stroke-linecap:square; stroke-linejoin:miter;
  stroke-dasharray:var(--len,640); stroke-dashoffset:var(--len,640);
}
.pre-label{display:flex; justify-content:space-between; align-items:baseline; margin:1.5rem 0 .55rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.pre-label b{color:var(--ink); font-weight:500}
.pre-bar{height:5px; border-radius:99px; background:linear-gradient(160deg,var(--paper-mid),var(--paper));
  box-shadow:inset 2px 2px 4px rgba(96,78,52,.3),inset -1px -1px 2px rgba(255,255,255,.5); overflow:hidden}
.pre-bar i{display:block; height:100%; width:0; background:var(--jade); transition:width .25s linear}

/* ── scroll route ───────────────────────────────────────── */
.route-rail{
  position:fixed; left:max(14px,calc((100vw - var(--shell))/2 - 52px)); top:0;
  width:40px; height:100vh; z-index:4; pointer-events:none; overflow:visible;
}
.route-rail path{
  fill:none; stroke:var(--jade); stroke-width:2.5; stroke-linecap:square; stroke-linejoin:miter;
  opacity:.62;
  stroke-dasharray:var(--rlen,3000); stroke-dashoffset:var(--rlen,3000);
}
/* mobile: a single line across the top */
.scroll-line{position:fixed; top:0; left:0; height:3px; width:0; background:var(--jade); z-index:60; display:none}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.1rem;
  width:100%; padding:.72rem max(18px,calc((100vw - var(--shell))/2));
  background:linear-gradient(180deg,var(--paper-hi),var(--paper));
  border-bottom:1.5px solid var(--paper-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 22px -20px rgba(52,40,24,.9);
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:800;
  letter-spacing:.11em; font-size:.94rem}
.brand img{border-radius:3px; box-shadow:0 1.5px 0 var(--paper-edge)}
.nav-links{display:flex; gap:.15rem; margin-left:auto}
.nav-links a{
  position:relative; padding:.5rem .68rem; border-radius:3px;
  font-size:.86rem; font-weight:600; color:var(--ink-2); transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:.68rem; right:.68rem; bottom:.34rem; height:2px;
  background:var(--jade); transform:scaleX(0); transform-origin:0 50%; transition:transform .28s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--jade)}
.nav-cta{padding:.55rem .95rem; font-size:.85rem}
.burger{display:none; width:42px; height:38px; border:none; border-radius:3px; cursor:pointer;
  background:linear-gradient(160deg,var(--paper-hi),var(--paper-mid));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),0 2px 0 var(--paper-lo);
  padding:10px 10px; margin-left:auto}
.burger span{display:block; height:2.2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:4.6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:clamp(1.2rem,3vw,2.4rem) 0 clamp(2rem,5vw,3.6rem)}
.sheet{
  position:relative; width:var(--shell); margin-inline:auto; border-radius:6px; overflow:hidden;
  padding:clamp(1.6rem,4.4vw,3.6rem);
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 58%,var(--paper-mid));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.7),
    inset -1px -1px 0 rgba(90,72,48,.14),
    0 3px 0 var(--paper-lo),
    0 40px 60px -46px rgba(52,40,24,.95);
}
.relief{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.relief .r-dark{stroke:rgba(96,78,52,.30)}
.relief .r-light{stroke:rgba(255,255,255,.72)}
.relief g{transition:transform .5s var(--ease)}

.hero-grid{position:relative; z-index:1; display:grid; gap:clamp(1.6rem,3.4vw,2.8rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center}
.eyebrow{display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem}
.dot{width:7px; height:7px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 0 rgba(47,164,95,.6);
  animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(47,164,95,0)}100%{box-shadow:0 0 0 0 rgba(47,164,95,0)}}
.lede{margin-top:1.15rem; font-size:clamp(1.02rem,1.6vw,1.16rem); color:var(--ink-2); max-width:32ch}

.ca{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.7rem; cursor:pointer;
  padding:.6rem .7rem .6rem .8rem; border-radius:var(--r); max-width:100%;
  background:linear-gradient(158deg,var(--paper-mid),var(--paper) 55%);
  box-shadow:inset 2px 2px 5px rgba(96,78,52,.30),inset -2px -2px 4px rgba(255,255,255,.55);
  transition:box-shadow .2s;
}
.ca:hover{box-shadow:inset 2px 2px 5px rgba(96,78,52,.34),inset -2px -2px 4px rgba(255,255,255,.6),0 0 0 1.5px var(--jade)}
.ca-tag{color:var(--jade); font-weight:500}
.ca-val{font-family:var(--f-mono); font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ca-copy{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding:.28rem .5rem; border-radius:3px; background:var(--paper-hi);
  box-shadow:0 1.5px 0 var(--paper-edge)}
.hero-btns{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem}
.hint{margin-top:1.5rem; font-size:.86rem; color:var(--ink-3)}

.hero-art{position:relative}
.hero-art img{width:100%; height:auto; border-radius:5px;
  box-shadow:0 2px 0 var(--paper-lo), 0 30px 44px -34px rgba(52,40,24,.9)}
.hero-art figcaption{margin-top:.85rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); text-align:right}

/* ── marquee ────────────────────────────────────────────── */
.marquee{
  overflow:hidden; padding:.85rem 0; margin:clamp(1rem,3vw,2rem) 0;
  background:linear-gradient(180deg,var(--jade),var(--jade-deep));
  box-shadow:inset 0 2px 4px rgba(0,0,0,.28), inset 0 -2px 3px rgba(255,255,255,.12);
}
.marquee-track{display:flex; align-items:center; gap:1.5rem; width:max-content;
  animation:slide 34s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track span{font-family:var(--f-display); font-weight:800; font-size:clamp(1rem,2.1vw,1.55rem);
  letter-spacing:.06em; color:#EFE9DC; white-space:nowrap}
.marquee-track i{color:var(--jade-lit); font-style:normal; font-size:.8rem}

/* ── the walk out, full bleed ───────────────────────────── */
.bleed{position:relative; margin:clamp(1rem,3vw,2.2rem) 0 0}
.bleed img{width:100%; height:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--paper-lo)}
.bleed figcaption{
  width:var(--shell); margin:.85rem auto 0; text-align:right;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* ── sections ───────────────────────────────────────────── */
.section,.cta,#top{scroll-margin-top:84px}
.section{padding:clamp(3.2rem,7vw,6rem) 0}
.sec-head{max-width:min(64ch,100%); margin-bottom:clamp(2rem,4vw,3.2rem)}
.kicker{display:inline-block; margin-bottom:.95rem; padding:.32rem .62rem; border-radius:3px;
  background:linear-gradient(158deg,var(--paper-mid),var(--paper));
  box-shadow:inset 1.5px 1.5px 3px rgba(96,78,52,.26),inset -1px -1px 2px rgba(255,255,255,.5)}
.sec-sub{margin-top:1.05rem; color:var(--ink-2); font-size:1.03rem; max-width:52ch}

/* ── story chambers ─────────────────────────────────────── */
/* explicit column counts so the 7 chambers + the double-wide exit always tile flush */
.chambers{display:grid; gap:1px; background:var(--paper-edge); border:1px solid var(--paper-edge);
  border-radius:6px; overflow:hidden; grid-template-columns:repeat(4,1fr)}
.chamber.is-exit{grid-column:span 2}
@media (max-width:1080px){.chambers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.chambers{grid-template-columns:1fr}.chamber.is-exit{grid-column:span 1}}
.chamber{
  position:relative; padding:1.7rem 1.5rem 1.8rem; min-height:190px;
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 65%);
  transition:background .35s var(--ease);
}
.chamber:hover{background:linear-gradient(158deg,#F5EEE2,var(--paper-hi) 70%)}
.chamber b{display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em;
  color:var(--ink-3); margin-bottom:.9rem}
.chamber p{font-size:1rem; line-height:1.6; color:var(--ink-2)}
.chamber em{font-style:normal; color:var(--ink); font-weight:600; box-shadow:inset 0 -.42em 0 rgba(47,164,95,.22)}
/* the turn, and the exit */
.chamber.is-turn{background:linear-gradient(158deg,#F3EFE0,var(--paper-hi) 70%)}
.chamber.is-turn::before{
  content:""; position:absolute; right:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--jade-lit),var(--jade));
}
.chamber.is-exit{background:linear-gradient(158deg,var(--jade),var(--jade-deep))}
.chamber.is-exit b{color:rgba(240,235,222,.6)}
.chamber.is-exit p{color:#F1ECE0; font-family:var(--f-display); font-weight:700; font-size:1.16rem; line-height:1.28}
.chamber.is-exit:hover{background:linear-gradient(158deg,var(--jade-lit),var(--jade))}

/* ── the toy ────────────────────────────────────────────── */
.section-toy{position:relative}
.toy{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:clamp(1.2rem,2.4vw,2rem); align-items:start}
.toy-stage{position:relative; border-radius:6px; overflow:hidden;
  background:linear-gradient(158deg,var(--paper-mid),var(--paper) 55%);
  box-shadow:inset 3px 3px 8px rgba(96,78,52,.32),inset -2px -2px 5px rgba(255,255,255,.55)}
#mazeCanvas{display:block; width:100%; height:auto; touch-action:none; cursor:crosshair}
#mazeCanvas:focus-visible{outline:2.5px solid var(--jade); outline-offset:-4px}
.toy-verdict{
  position:absolute; inset:0; display:grid; align-content:center; justify-items:center; text-align:center;
  gap:.6rem; padding:2rem; background:rgba(223,212,196,.94);
  animation:vin .5s var(--ease) both;
}
@keyframes vin{from{opacity:0; transform:scale(.98)}}
.toy-verdict h3{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.toy-verdict p{color:var(--ink-2)}
.toy-verdict .btn{margin-top:.8rem}
.toy-side{display:grid; gap:1.15rem; align-content:start}
.toy-say{min-height:3.2em; font-size:.97rem; color:var(--ink-2); border-left:2.5px solid var(--jade); padding-left:.85rem}
.toy-stats{display:grid; gap:.5rem}
.toy-stats div{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.5rem .7rem; border-radius:3px;
  background:linear-gradient(158deg,var(--paper-mid),var(--paper));
  box-shadow:inset 1.5px 1.5px 3px rgba(96,78,52,.24),inset -1px -1px 2px rgba(255,255,255,.5)}
.toy-stats dd{margin:0; font-family:var(--f-mono); font-weight:500; font-size:1.02rem}
.dpad{display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; max-width:170px}
.dpad button{
  aspect-ratio:1; border:none; border-radius:3px; cursor:pointer; font-size:1.1rem;
  background:linear-gradient(160deg,var(--paper-hi),var(--paper-mid));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),0 2.5px 0 var(--paper-lo);
  transition:transform .12s,box-shadow .12s;
}
.dpad button:active{transform:translateY(2px); box-shadow:inset 2px 2px 4px rgba(96,78,52,.32)}
.dpad button[data-dir="n"]{grid-column:2}
.dpad button[data-dir="w"]{grid-column:1; grid-row:2}
.dpad button[data-dir="s"]{grid-column:2; grid-row:2}
.dpad button[data-dir="e"]{grid-column:3; grid-row:2}
.toy-help{font-size:.8rem; color:var(--ink-3)}

/* ── weekly ritual ──────────────────────────────────────── */
.week{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.week-card{
  padding:1.7rem 1.5rem; border-radius:5px;
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 62%,var(--paper-mid));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.62),inset -1px -1px 0 rgba(90,72,48,.13),
    0 2px 0 var(--paper-lo),0 18px 30px -26px rgba(52,40,24,.9);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.week-card:hover{transform:translateY(-4px);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.62),0 5px 0 var(--paper-lo),0 28px 40px -28px rgba(52,40,24,.9)}
.wk-day{display:block; margin-bottom:.95rem; color:var(--jade)}
.week-card h3{margin-bottom:.6rem}
.week-card p{font-size:.97rem; color:var(--ink-2)}
.week-card.is-canon{background:linear-gradient(158deg,var(--jade),var(--jade-deep));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),0 3px 0 var(--jade-deep),0 20px 34px -26px rgba(6,60,37,.9)}
.week-card.is-canon .wk-day{color:rgba(240,235,222,.62)}
.week-card.is-canon h3{color:#F2EDE2}
.week-card.is-canon p{color:rgba(240,235,222,.82)}

/* ── floor plan ─────────────────────────────────────────── */
.plan{
  display:grid; gap:1px; background:var(--paper-edge);
  border:1.5px solid var(--paper-edge); border-radius:5px; overflow:hidden;
  grid-template-columns:repeat(6,1fr);
}
.room{
  position:relative; padding:1.5rem 1.4rem 1.6rem; display:grid; align-content:start; gap:.55rem;
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 68%);
}
.room::after{ /* plan dimension tick */
  content:""; position:absolute; left:1.4rem; right:1.4rem; bottom:.85rem; height:1px;
  background:repeating-linear-gradient(90deg,var(--paper-edge) 0 5px,transparent 5px 10px);
}
.room-a{grid-column:span 3}
.room-b{grid-column:span 3}
.room-c{grid-column:span 2}
.room-d{grid-column:span 4}
.r-val{font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.5rem);
  letter-spacing:-.02em; line-height:1}
.room-d .r-val{color:var(--jade)}
.r-note{font-size:.9rem; color:var(--ink-2); max-width:44ch}

/* ── how to buy ─────────────────────────────────────────── */
.steps{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{
  position:relative; padding:1.6rem 1.4rem; border-radius:5px;
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 62%,var(--paper-mid));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.62),0 2px 0 var(--paper-lo),0 18px 30px -26px rgba(52,40,24,.9);
}
.step img{margin-bottom:1rem; opacity:.9}
.step b{position:absolute; top:1.35rem; right:1.35rem; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--ink-3)}
.step h3{margin-bottom:.5rem}
.step p{font-size:.94rem; color:var(--ink-2)}

/* ── roadmap ────────────────────────────────────────────── */
.road{display:grid; gap:0}
.rd{
  position:relative; display:grid; grid-template-columns:96px 1fr; gap:1.4rem; align-items:start;
  padding:1.7rem 0 1.7rem 1.4rem; border-top:1.5px solid var(--paper-edge);
}
.rd:last-child{border-bottom:1.5px solid var(--paper-edge)}
.rd::before{ /* the route runs down the roadmap and turns at each chamber */
  content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--paper-edge);
}
.rd.in::before{background:var(--jade)}
.rd:last-child.in::before{background:linear-gradient(180deg,var(--jade),transparent)}
.rd b{grid-column:1; grid-row:1; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em;
  color:var(--jade); padding-top:.25rem}
.rd h3{grid-column:2; grid-row:1; margin-bottom:.45rem}
.rd p{grid-column:2; grid-row:2; color:var(--ink-2); font-size:.98rem; max-width:62ch}

/* ── cta ────────────────────────────────────────────────── */
.cta{padding:clamp(3.4rem,7vw,6rem) 0;
  background:linear-gradient(180deg,var(--jade),var(--jade-deep));
  box-shadow:inset 0 3px 6px rgba(0,0,0,.24)}
.cta-in{text-align:center; display:grid; justify-items:center; gap:1.15rem}
.cta h2{color:#F3EEE3}
.cta p{color:rgba(240,235,222,.8); max-width:48ch}
.cta-btns{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:.6rem}
.cta .btn:not(.btn-jade){--bg1:#F0E9DC; --bg2:#DDD3C3; box-shadow:0 3px 0 #A99B85,0 16px 24px -18px rgba(0,0,0,.6)}
.cta .btn-jade{--bg1:var(--jade-lit); --bg2:#0F8A52; box-shadow:inset 0 0 0 1.5px rgba(240,235,222,.5),0 3px 0 rgba(0,0,0,.3)}

/* ── footer ─────────────────────────────────────────────── */
.foot{padding:clamp(2.6rem,5vw,4rem) 0 2.4rem; border-top:1.5px solid var(--paper-edge)}
.foot-in{display:grid; gap:1.5rem}
.foot-brand{display:flex; align-items:center; gap:.85rem}
.foot-brand img{border-radius:4px; box-shadow:0 2px 0 var(--paper-lo)}
.foot-brand b{display:block; font-family:var(--f-display); font-weight:800; letter-spacing:.1em}
.foot-brand span{font-family:var(--f-mono); font-size:.74rem; color:var(--ink-3)}
.foot-links{display:flex; flex-wrap:wrap; gap:1.3rem}
.foot-links a{font-size:.92rem; font-weight:600; color:var(--ink-2); border-bottom:1.5px solid var(--paper-edge);
  padding-bottom:2px; transition:color .2s,border-color .2s}
.foot-links a:hover{color:var(--jade); border-color:var(--jade)}
.disclaimer{font-size:.82rem; line-height:1.7; color:var(--ink-3); max-width:88ch}
.copyright{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* ── escape overlay (the easter egg) ────────────────────── */
.escape{position:fixed; inset:0; z-index:110; display:grid; place-items:center}
.esc-wall{position:absolute; top:0; bottom:0; width:50vw;
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 60%,var(--paper-mid));
  box-shadow:0 0 60px -10px rgba(52,40,24,.6); transition:transform .72s var(--ease)}
.esc-l{left:0; transform:translateX(0)}
.esc-r{right:0; transform:translateX(0)}
.escape.open .esc-l{transform:translateX(-46%)}
.escape.open .esc-r{transform:translateX(46%)}
.esc-line{position:absolute; left:0; right:0; top:50%; height:4px; width:100%; overflow:visible}
.esc-line path{fill:none; stroke:var(--jade-lit); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .8s var(--ease) .12s}
.escape.open .esc-line path{stroke-dashoffset:0}
.esc-card{position:relative; text-align:center; padding:2.2rem 2.4rem; border-radius:6px; max-width:min(430px,86vw);
  background:linear-gradient(158deg,var(--paper-hi),var(--paper) 62%);
  box-shadow:0 3px 0 var(--paper-lo),0 40px 60px -34px rgba(52,40,24,.95);
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease) .55s, transform .5s var(--ease) .55s}
.escape.open .esc-card{opacity:1; transform:none}
.esc-kicker{margin-bottom:.7rem}
.esc-kicker b{color:var(--jade); font-weight:500}
.esc-card h3{font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:.6rem}
.esc-card p{color:var(--ink-2); margin-bottom:1.3rem}

/* ── toast ──────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:130; transform:translate(-50%,18px);
  padding:.72rem 1.1rem; border-radius:4px; opacity:0; pointer-events:none;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em;
  color:#F2EDE2; background:var(--jade); box-shadow:0 3px 0 var(--jade-deep),0 20px 30px -18px rgba(6,60,37,.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ── reveal ─────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.chamber.reveal{transform:translateY(14px)}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .route-rail{display:none}
  .scroll-line{display:block}
  .toy{grid-template-columns:1fr}
  .toy-side{grid-template-columns:1fr 1fr; align-items:start}
  .toy-say{grid-column:1/-1}
  .toy-help,.link-btn{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .lede{max-width:none}
  .room-a,.room-b,.room-c,.room-d{grid-column:span 6}
}
@media (max-width:820px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;   /* absolute under the sticky nav — never fixed */
    display:none; flex-direction:column; gap:0; margin:0; padding:.5rem;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper));
    border-bottom:1.5px solid var(--paper-edge);
    box-shadow:0 22px 30px -24px rgba(52,40,24,.95);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem .7rem; font-size:1rem}
  .nav-links a::after{display:none}
  .nav-cta{display:none}
  .burger{display:block}
}
@media (max-width:640px){
  body{font-size:16px}
  .sheet{padding:1.3rem 1.1rem 1.6rem}
  .rd{grid-template-columns:1fr; gap:.5rem}
  .toy-side{grid-template-columns:1fr}
  .dpad{max-width:none; justify-self:center; width:min(210px,60vw)}
  .hero-art figcaption{text-align:left}
  /* the CA is 44 characters — let it wrap rather than ellipsis it into uselessness */
  .ca{width:100%; flex-wrap:wrap; row-gap:.35rem}
  .ca-val{white-space:normal; word-break:break-all; font-size:.78rem; flex:1 1 100%; order:3}
  .ca-copy{margin-left:auto}
}

/* ── motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-force){scroll-behavior:auto}
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html:not(.motion-force) .reveal{opacity:1; transform:none}
  html:not(.motion-force) .marquee-track{animation:none}
}
/* headless capture mode */
html.shot .preloader{display:none}
html.shot .reveal{opacity:1 !important; transform:none !important}
html.shot .route-rail path{stroke-dashoffset:0}