/* ==========================================================================
   $OLDJIM — style.css
   Concept: the page is a mine shaft. You go down. The rock gets darker,
   then the gold comes back. Every section title is a wooden sign nailed
   to a beam, like the ones in Old Jim's tunnels.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --pit:        #100A06;
  --rock:       #1C1410;
  --rock-lit:   #2C1E15;
  --timber:     #7A4A22;
  --timber-dk:  #45280F;
  --canvas:     #E9D4A6;
  --canvas-dk:  #C08E51;
  --gold:       #FFC21A;
  --gold-hi:    #FFE68A;
  --gold-dk:    #A96C00;
  --bandana:    #D8291C;
  --ink:        #14100C;
  --paper:      #FFFDF5;

  --display: "Alfa Slab One", Georgia, serif;
  --voice:   "Luckiest Guy", "Comic Sans MS", cursive;
  --body:    "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1rem, 5vw, 2.5rem);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--rock);
  color:#F0E2C8;
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.6;
  overflow-x:clip;
}

img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}
a{color:var(--gold); text-decoration:none}
h1,h2,h3{margin:0; line-height:1.02; letter-spacing:.01em}
p{margin:0 0 .8em}
ol,ul{margin:0; padding:0; list-style:none}

:focus-visible{outline:4px solid var(--gold); outline-offset:3px; border-radius:3px}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

[id]{scroll-margin-top:5.5rem}

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

.display{font-family:var(--display); font-weight:400}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.7em 1em; font-family:var(--display);
}
.skip:focus{left:.5rem; top:.5rem}

/* Rock surface used by most sections */
.sec{position:relative; padding:clamp(3.5rem,9vw,7rem) 0; overflow:hidden}
.sec > *{position:relative}
.sec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--noise);
  opacity:.055; mix-blend-mode:overlay;
}

/* ---------- 3. Reusable pieces ------------------------------------------ */

/* Wooden sign — section headings */
.sign{
  font-family:var(--display);
  font-size:clamp(1.45rem,5.2vw,2.9rem);
  color:#3A230F;
  display:inline-block;
  position:relative;
  margin:0 0 clamp(2rem,5vw,3.2rem);
  padding:.5em 1.3em .55em;
  transform:rotate(-1.3deg);
  background:
    repeating-linear-gradient(93deg,
      #CB9C60 0 7px, #BE8E52 7px 12px, #D6AA6E 12px 19px, #C4924F 19px 25px);
  border:5px solid #2A1608;
  border-radius:5px;
  box-shadow:0 11px 0 rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.12), inset 0 -14px 22px rgba(0,0,0,.25);
  text-shadow:0 2px 0 rgba(255,255,255,.18);
}
.sign::before,.sign::after{
  content:""; position:absolute; top:9px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #8b8b8b, #241a12 72%);
  box-shadow:0 1px 1px rgba(255,255,255,.25);
}
.sign::before{left:11px}
.sign::after{right:11px}
.sign--wide{font-size:clamp(1.3rem,4.6vw,2.6rem)}

/* Cartoon buttons: thick outline, hard offset shadow, real press */
.btn{
  font-family:var(--display);
  font-size:clamp(.82rem,2.6vw,1rem);
  line-height:1;
  display:inline-block;
  padding:.85em 1.15em .8em;
  border:4px solid var(--ink);
  border-radius:7px;
  box-shadow:0 6px 0 var(--ink);
  transition:transform .09s ease, box-shadow .09s ease, filter .15s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn--gold{background:linear-gradient(#FFDD70,#FFB300); color:#33200A}
.btn--wood{
  background:repeating-linear-gradient(96deg,#7A4A22 0 7px,#6A3E1B 7px 13px);
  color:var(--canvas);
}
.btn--sm{padding:.62em .8em .58em; box-shadow:0 4px 0 var(--ink)}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--ink); filter:brightness(1.06)}
.btn--sm:hover{box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(5px); box-shadow:0 1px 0 var(--ink)}
.btn[aria-disabled="true"]{filter:grayscale(.35) brightness(.9); cursor:default}
.btn[aria-disabled="true"]:hover{transform:none; box-shadow:0 6px 0 var(--ink)}

.btnrow{display:flex; flex-wrap:wrap; gap:.7rem}
.btnrow--center{justify-content:center}

/* Old Jim's voice */
.bubble{
  font-family:var(--voice);
  font-size:clamp(.95rem,2.9vw,1.35rem);
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:16px;
  padding:.45em .75em .35em;
  display:inline-block;
  position:relative;
  margin:0 0 1.2rem;
  box-shadow:0 5px 0 rgba(0,0,0,.35);
}
.bubble::before,.bubble::after{content:""; position:absolute; border-style:solid; border-color:transparent}
.bubble::before{top:100%; left:24px; border-width:22px 15px 0 0; border-top-color:var(--ink)}
.bubble::after{top:calc(100% - 4px); left:29px; border-width:13px 8px 0 0; border-top-color:var(--paper)}
.bubble--alt{background:var(--gold); }
.bubble--alt::after{border-top-color:var(--gold)}

/* Small chip button */
.chip{
  font-family:var(--body); font-weight:700; font-size:.85rem;
  background:transparent; color:var(--canvas);
  border:2px dashed rgba(233,212,166,.5); border-radius:999px;
  min-height:44px; padding:.42em .95em; cursor:pointer;
}
.chip:hover{border-color:var(--gold); color:var(--gold)}

/* Scroll reveals */
.reveal-up{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal-up.is-in{opacity:1; transform:none}

/* ---------- 4. Top bar --------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:1rem;
  padding-top:max(.55rem,env(safe-area-inset-top));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  padding-bottom:.55rem;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  background:linear-gradient(#2A1A0E,#1B1009);
  border-bottom:4px solid var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--display); color:var(--canvas); font-size:1.05rem; letter-spacing:.03em}
.brand img{width:32px; height:32px}
.nav-toggle{
  min-width:44px; min-height:44px; margin-left:auto; padding:.45rem .65rem;
  display:inline-flex; align-items:center; gap:.5rem;
  border:2px solid #7A4A22; border-radius:6px;
  background:#24170E; color:var(--canvas); font:700 .85rem/1 var(--body); cursor:pointer;
}
.nav-toggle__icon,.nav-toggle__icon::before,.nav-toggle__icon::after{
  display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
}
.nav-toggle__icon{position:relative}
.nav-toggle__icon::before,.nav-toggle__icon::after{content:""; position:absolute; left:0}
.nav-toggle__icon::before{top:-6px}
.nav-toggle__icon::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{top:0; transform:rotate(-45deg)}
.topbar__nav{
  display:none; gap:.35rem; font-weight:700; font-size:.95rem;
  position:absolute; top:100%; left:0; right:0;
  padding:.65rem max(var(--pad),env(safe-area-inset-right)) .8rem max(var(--pad),env(safe-area-inset-left));
  background:linear-gradient(#24170E,#160E09); border-bottom:4px solid var(--ink);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.topbar__nav.is-open{display:flex; flex-direction:column}
.topbar__nav a{color:#D9C39A}
.topbar__nav a:hover{color:var(--gold)}
.topbar__nav a{display:flex; align-items:center; min-height:44px; padding:.35rem .45rem}
.topbar .btn{margin-left:0}
@media (min-width:880px){
  .nav-toggle{display:none}
  .topbar__nav{
    display:flex; flex-direction:row; position:static; margin-left:auto; padding:0;
    gap:1.4rem; background:none; border:0; box-shadow:none;
  }
  .topbar__nav a{display:inline; min-height:0; padding:0}
  .topbar .btn{margin-left:0}
}
@media (max-width:420px){
  .topbar{gap:.55rem}
  .brand span{display:none}
  .topbar .btn--sm{font-size:.72rem; padding:.72em .7em .65em}
  .nav-toggle > span:last-child{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
}

/* ---------- 5. Hero ------------------------------------------------------ */
.hero{
  position:relative;
  min-height:calc(100svh - 56px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,6vw,3.5rem) 0 4.5rem;
  background:
    radial-gradient(120% 85% at 78% 22%, rgba(255,178,40,.30), transparent 58%),
    radial-gradient(70% 60% at 12% 88%, rgba(120,66,24,.42), transparent 70%),
    linear-gradient(#3A2412 0%, #241710 42%, var(--rock) 100%);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--noise); opacity:.07; mix-blend-mode:overlay;
}
.hero__lantern{
  position:absolute; top:-16%; right:6%; width:min(70vw,620px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,196,60,.5), rgba(255,150,20,.14) 45%, transparent 68%);
  filter:blur(6px);
  animation:flicker 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flicker{
  0%,100%{opacity:.85; transform:scale(1)}
  38%{opacity:1; transform:scale(1.04)}
  52%{opacity:.72; transform:scale(.98)}
  71%{opacity:.95; transform:scale(1.02)}
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(1rem,4vw,2rem);
}
.hero__title{
  font-family:var(--display);
  font-size:clamp(2.15rem,9.4vw,5.4rem);
  text-transform:uppercase;
  color:var(--canvas);
  letter-spacing:-.01em;
  text-shadow:
    5px 5px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    0 14px 26px rgba(0,0,0,.55);
  margin-bottom:.45em;
}
.hero__title em{
  font-style:normal;
  color:#FFD44E;
  text-shadow:
    5px 5px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    0 0 34px rgba(255,194,26,.55), 0 14px 26px rgba(0,0,0,.55);
}
.hero__lede{
  font-size:clamp(1rem,3.4vw,1.3rem);
  color:#E6D2AE; max-width:34ch; margin-bottom:1rem;
}
.hero__claim{
  font-family:var(--display);
  font-size:clamp(1.1rem,4vw,1.7rem);
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:1.5rem;
  text-shadow:2px 2px 0 var(--ink);
}
.hero__jim{
  margin:0; position:relative; justify-self:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__jim img{
  width:min(78vw,430px);
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.6));
  animation:jimIn .8s cubic-bezier(.2,.9,.3,1.15) both;
}
.hero__jim figcaption{
  position:relative; z-index:2; align-self:flex-start;
  margin:0 0 -.35rem .25rem;
  max-width:min(64vw,270px); text-align:left;
  animation:bubbleIn .5s .55s cubic-bezier(.2,.9,.3,1.4) both;
}
.bubble--hero::before{left:auto; right:24px; border-width:22px 0 0 15px; border-left-color:var(--ink); border-top-color:transparent}
.bubble--hero::after{left:auto; right:29px; border-width:13px 0 0 8px; border-left-color:var(--paper); border-top-color:transparent}
@keyframes jimIn{from{opacity:0; transform:translateY(38px) rotate(-3deg)} to{opacity:1; transform:none}}
@keyframes bubbleIn{from{opacity:0; transform:scale(.6) rotate(-8deg)} to{opacity:1; transform:none}}

.scrollcue{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  z-index:3; font-family:var(--display); font-size:.85rem; letter-spacing:.12em;
  color:#C9AF80; text-transform:uppercase;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

@media (min-width:900px){
  .hero__inner{grid-template-columns:1.05fr .95fr; align-items:center}
  .hero__jim img{width:min(38vw,470px)}
}

/* Floating dust */
.dust{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.dust i{
  position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%;
  background:rgba(255,214,140,.75); filter:blur(.4px);
  animation:rise linear infinite;
}
@keyframes rise{
  from{transform:translate3d(0,0,0) scale(.6); opacity:0}
  12%{opacity:.85}
  to{transform:translate3d(26px,-104vh,0) scale(1.25); opacity:0}
}

/* ---------- 6. Ticker beam ---------------------------------------------- */
.beam{
  position:relative; overflow:hidden;
  background:repeating-linear-gradient(94deg,#6E4220 0 9px,#5C3618 9px 17px,#7B4E27 17px 26px);
  border-top:5px solid var(--ink); border-bottom:5px solid var(--ink);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.4), inset 0 -10px 20px rgba(0,0,0,.4);
  padding:.55rem 0;
}
.beam__track{display:flex; width:max-content; animation:slide 26s linear infinite}
.beam__track span{
  font-family:var(--display); font-size:clamp(.85rem,2.6vw,1.15rem);
  color:var(--gold-hi); letter-spacing:.04em; white-space:nowrap;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 7. Mini-game ------------------------------------------------ */
.sec--dig{background:linear-gradient(var(--rock),#160F0B)}
.sec--dig .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}

.game{width:100%; max-width:900px; position:relative}

.game__wall{
  position:relative; aspect-ratio:1/1; width:100%;
  border:6px solid var(--ink); border-radius:10px; overflow:hidden;
  background:radial-gradient(ellipse 58% 58% at 46% 58%, #F8C93C, #C98800 40%, #5E3806 70%, #201306);
  cursor:pointer; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  box-shadow:0 14px 0 rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.7);
}
.game__control{
  position:absolute; inset:0; z-index:6; width:100%; height:100%; padding:0;
  border:0; border-radius:7px; background:transparent; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.game__control:focus-visible{outline:4px solid var(--gold); outline-offset:-9px}
@media (min-width:700px){ .game__wall{aspect-ratio:8/5} }
.game__wall.shake{animation:shake .17s linear}
@keyframes shake{
  0%{transform:translate(0,0)} 25%{transform:translate(-5px,3px)}
  50%{transform:translate(4px,-3px)} 75%{transform:translate(-3px,-2px)} 100%{transform:translate(0,0)}
}
.wall__face{
  position:absolute; inset:0;
  background:
    radial-gradient(45% 40% at 22% 28%, #4A362A, transparent 70%),
    radial-gradient(50% 45% at 74% 66%, #433023, transparent 72%),
    radial-gradient(30% 30% at 55% 18%, #3A2A20, transparent 70%),
    linear-gradient(160deg,#3B2A1F,#241811 60%,#1A110C);
}
.wall__face::after{
  content:""; position:absolute; inset:0;
  background-image:var(--noise); opacity:.22; mix-blend-mode:overlay;
}
.wall__glow{
  position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  background:radial-gradient(ellipse 55% 55% at 58% 58%, rgba(255,196,40,.85), rgba(255,140,10,.25) 45%, transparent 72%);
}
.wall__flash{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 42% 79%, rgba(255,242,205,.95), rgba(255,186,52,.38) 30%, transparent 60%);
  mix-blend-mode:screen;
}
.game__wall.hit .wall__flash{animation:flash .13s ease-out}
@keyframes flash{from{opacity:.95} to{opacity:0}}

.wall__cracks,.wall__vein{position:absolute; inset:0; width:100%; height:100%}
.wall__cracks{filter:drop-shadow(2px 2px 0 rgba(255,206,130,.28))}
.wall__cracks path{
  stroke:#090504; stroke-width:9;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .55s ease;
}
.wall__vein .vein-body path{
  fill:none; stroke:var(--gold); stroke-width:13;
  stroke-linecap:round; stroke-linejoin:round;
}
.wall__vein .vein-body,.wall__vein .vein-nuggets{opacity:0; transition:opacity .7s ease}
.wall__vein .vein-nuggets circle{fill:var(--gold-hi); stroke:#7A4A00; stroke-width:3}
.wall__vein{filter:drop-shadow(0 0 9px rgba(255,194,26,.75)) drop-shadow(0 3px 0 rgba(52,26,0,.7))}

/* Stages */
#wall.s1 .crack--1 path{stroke-dashoffset:0}
#wall.s2 .crack--2 path{stroke-dashoffset:0}
#wall.s2 .wall__glow{opacity:.22}
#wall.s3 .wall__glow{opacity:.45}
#wall.s3 .vein-nuggets{opacity:.6}
#wall.s4 .crack--3 path{stroke-dashoffset:0}
#wall.s4 .wall__glow{opacity:.68}
#wall.s4 .vein-nuggets{opacity:1}
#wall.s4 .vein-body{opacity:.4}
#wall.s5 .wall__glow{opacity:1}
#wall.s5 .vein-body,#wall.s5 .vein-nuggets{opacity:1}
#wall.s5 .wall__face{animation:crumble 1s ease forwards}
#wall.s5 .wall__cracks{animation:crumble 1s ease forwards}
@keyframes crumble{
  0%{transform:scale(1); opacity:1; filter:brightness(1)}
  18%{transform:scale(1.03); filter:brightness(2.4)}
  100%{transform:scale(1.16) translateY(9%); opacity:0}
}

/* Jim rig ---------------------------------------------------------------
   The three poses are stacked, not swapped via src: same left edge, same
   height, so the art stays in the registration it was drawn in and no frame
   can pop in late. The box is sized from `aspect-ratio`, not from whichever
   pose is showing, which keeps transform-origin (the boots) rock steady.  */
.jim{
  position:absolute; left:0; bottom:-2%;
  height:88%; aspect-ratio:812/1000;
  pointer-events:none;
  transform-origin:50% 100%;
  will-change:transform;
}
.jim__pose{
  position:absolute; left:0; bottom:0;
  height:100%; width:auto;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.65));
  opacity:0;
  /* A 3-frame cross-fade reads as motion blur and takes the hard edge off the
     cut between drawings. The impact is exempt below: that one must snap. */
  transition:opacity 50ms linear;
}
.jim[data-pose="strike"] .jim__pose{transition:none}
.jim[data-pose="raise"]  .jim__pose--raise,
.jim[data-pose="swing"]  .jim__pose--swing,
.jim[data-pose="strike"] .jim__pose--strike{opacity:1}

.game__prompt{
  position:absolute; top:6%; left:0; right:0; margin:0;
  font-family:var(--voice); font-size:clamp(.9rem,3.2vw,1.4rem);
  color:var(--canvas); text-shadow:3px 3px 0 rgba(0,0,0,.75);
  pointer-events:none; transition:opacity .3s;
}
.game__prompt b{font-weight:400; color:var(--gold-hi)}
.game__wall.started .game__prompt{opacity:0}

.fx{position:absolute; inset:0; pointer-events:none; overflow:visible}
.fx b{
  position:absolute; display:block; width:9px; height:9px; border-radius:2px;
  background:#6B584A; pointer-events:none;
}
.fx b.spark{background:var(--gold-hi); border-radius:50%; box-shadow:0 0 8px rgba(255,200,40,.9)}

.game__hud{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  margin-top:1.6rem;
}
.counter{
  font-family:var(--display); font-size:clamp(1.15rem,4.4vw,1.7rem);
  color:var(--canvas); margin:0; letter-spacing:.02em;
}
.counter span{color:var(--gold)}
.meter{
  width:min(100%,340px); height:16px;
  background:#0E0906; border:4px solid var(--ink); border-radius:999px; overflow:hidden;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.8);
}
.meter i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#C98800,#FFC21A 60%,#FFF0B8);
  transition:width .28s ease;
}
.bubble--hud{margin:.5rem 0 0}
.hud__tools{display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; justify-content:center}

.strike{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(70,38,2,.42), rgba(10,6,4,.88) 78%);
  animation:fadeIn .6s ease both;
  padding:1rem;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.strike__card{
  text-align:center; max-width:520px;
  background:linear-gradient(#3A2614,#241609);
  border:6px solid var(--ink); border-radius:12px;
  box-shadow:0 14px 0 rgba(0,0,0,.5), 0 0 70px rgba(255,180,30,.35);
  padding:clamp(1.2rem,5vw,2.2rem);
  animation:pop .5s cubic-bezier(.2,.9,.3,1.35) both;
}
@keyframes pop{from{transform:scale(.75) rotate(-2deg); opacity:0}to{transform:none; opacity:1}}
.strike__card h3{
  font-size:clamp(1.5rem,6.5vw,2.5rem); color:var(--gold);
  text-shadow:3px 3px 0 var(--ink); margin-bottom:.5em;
}
.strike__line{font-family:var(--voice); font-size:clamp(1rem,3.4vw,1.25rem); color:var(--canvas)}
.strike__claim{font-family:var(--display); color:var(--gold-hi); font-size:clamp(.9rem,3vw,1.1rem); margin-bottom:1.3em; text-transform:uppercase}
.strike__card .chip{display:block; margin:1rem auto 0}

/* ---------- 8. Story ----------------------------------------------------- */
.sec--story{background:linear-gradient(#160F0B,#120C08)}
.strip{display:flex; flex-direction:column; gap:clamp(2rem,6vw,3.5rem)}

.panel{
  position:relative;
  display:grid; gap:0;
  border:6px solid var(--ink); border-radius:10px;
  background:linear-gradient(150deg,#33221A,#1D1410);
  box-shadow:0 12px 0 rgba(0,0,0,.45);
  overflow:hidden;
}
.panel__cap{
  position:absolute; z-index:3; top:0; left:0; margin:0;
  font-family:var(--display); font-size:.82rem; letter-spacing:.09em;
  background:var(--canvas); color:#2A1608;
  border-right:5px solid var(--ink); border-bottom:5px solid var(--ink);
  border-radius:0 0 8px 0;
  padding:.42em .9em .38em;
  text-transform:uppercase;
}
.panel__art{position:relative; min-height:230px; background:#120C08}
.panel__art img{width:100%; height:100%; object-fit:cover; object-position:center}
.panel__art--cut{
  background:
    radial-gradient(70% 70% at 50% 78%, rgba(255,180,40,.28), transparent 68%),
    linear-gradient(160deg,#3E2A1B,#1A110C);
  display:flex; align-items:flex-end; justify-content:center;
  padding-top:1.6rem;
}
.panel__art--cut img{
  width:auto; height:auto; max-height:330px; object-fit:contain;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.6));
}
.panel__text{padding:clamp(1.4rem,5vw,2.2rem)}
.panel__event{
  font-family:var(--display); font-size:clamp(1.15rem,4.6vw,1.8rem);
  color:var(--canvas); margin-bottom:.9em; line-height:1.15;
}
.panel__text .bubble{margin-right:.6rem}
.panel__shout{
  font-size:clamp(2rem,9vw,4rem); color:var(--gold);
  text-shadow:4px 4px 0 var(--ink), 0 0 34px rgba(255,194,26,.5);
  line-height:1;
}
.panel--final{background:linear-gradient(150deg,#4A3116,#20150C); border-color:var(--ink)}

@media (min-width:820px){
  .panel{grid-template-columns:1fr 1fr; align-items:stretch}
  .panel__art{min-height:340px}
  .panel__text{display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
  .panel--flip .panel__art{order:2}
  .panel--flip .panel__cap{left:auto; right:0; border-right:0; border-left:5px solid var(--ink); border-radius:0 0 0 8px}
}

/* Scene panels -----------------------------------------------------------
   The three chronology illustrations carry their dialogue lettered inside
   the artwork, so they run full width instead of sharing the row with the
   text: at half width that lettering gets too small to read on a phone.
   Sized from the real 1448x1086 ratio and shown with `contain`, so no face
   and no speech bubble is ever cropped. Placed after the desktop block so
   the single-column rule wins there too.                                 */
.panel--scene{grid-template-columns:1fr}
.panel--scene .panel__art{order:0; min-height:0; aspect-ratio:1448/1086}
.panel--scene .panel__art--scene{
  background:linear-gradient(160deg,#3E2A1B,#1A110C);
  padding:0;
}
.panel--scene .panel__art--scene img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.panel--scene .panel__text{
  display:flex; flex-direction:column;
  align-items:flex-start; text-align:left;
}
.panel--scene.panel--flip .panel__text{align-items:flex-end; text-align:right}
/* The date rides in the text block, not over the art: every one of these
   scenes has a speech bubble in both top corners, and an overlaid tab
   covered the left one once the panel got narrow. */
.panel--scene .panel__cap{
  position:static; order:-1;
  border:4px solid var(--ink); border-radius:6px;
  margin:0 0 .55em;
}
.panel--scene .panel__event{margin-bottom:.45em}
.panel__line{
  font-family:var(--voice);
  font-size:clamp(.95rem,2.9vw,1.3rem);
  line-height:1.45; color:var(--canvas); margin:0; max-width:52ch;
}

/* ---------- 9. Philosophy ------------------------------------------------ */
.sec--creed{
  background:linear-gradient(#120C08 0%,#0B0705 45%,#150E08 100%);
  text-align:center;
  padding-block:clamp(4.5rem,12vw,9rem);
}
.creed__glow{
  position:absolute; z-index:0; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(120vw,900px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,190,40,.24), transparent 62%);
  animation:flicker 6.5s ease-in-out infinite;
  pointer-events:none;
}
.creed{position:relative; z-index:2}
.creed__line{
  font-family:var(--display);
  font-size:clamp(1.5rem,7vw,3rem);
  color:#8A7458; text-transform:uppercase; line-height:1.1; margin-bottom:.25em;
  transition-delay:calc(var(--i,0) * 110ms);
}
.creed__gold{
  font-size:clamp(1.9rem,8.6vw,4.4rem);
  text-transform:uppercase;
  margin:.35em 0 1.6rem;
  color:#FFD44E;
  text-shadow:
    5px 5px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    0 0 46px rgba(255,194,26,.6);
  transition-delay:420ms;
}
.creed__jim{margin:0; display:inline-flex; flex-direction:column; align-items:center; transition-delay:560ms}
.creed__jim img{width:min(58vw,240px); filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.creed__jim figcaption{order:-1; margin-bottom:.8rem}

/* ---------- 10. How it works -------------------------------------------- */
.sec--how{background:linear-gradient(#150E08,#20150D)}
.sec--how .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}

.steps{
  display:grid; gap:clamp(1.2rem,3.5vw,1.8rem);
  width:100%; margin-bottom:clamp(2.5rem,7vw,4rem);
}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative; padding:2.4rem 1.2rem 1.6rem;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255,180,40,.14), transparent 70%),
    repeating-linear-gradient(94deg,#3B2716 0 9px,#331F11 9px 17px);
  border:5px solid var(--ink); border-radius:9px;
  box-shadow:0 10px 0 rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.05);
}
.step__no{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:1.35rem; line-height:1;
  color:#33200A; background:linear-gradient(#FFDD70,#FFB300);
  border:4px solid var(--ink); border-radius:999px;
  width:52px; height:52px; display:grid; place-items:center;
  box-shadow:0 4px 0 var(--ink);
}
.step img{height:170px; width:auto; margin:.4rem auto 1rem; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.step h3{font-family:var(--display); font-size:clamp(1.05rem,3.6vw,1.3rem); color:var(--gold); margin-bottom:.45em}
.step p{font-family:var(--voice); color:#E3D0AE; font-size:1rem; margin:0}

.how__punch{
  font-size:clamp(1.5rem,6.5vw,3rem); color:var(--canvas);
  text-transform:uppercase; line-height:1.05;
  text-shadow:4px 4px 0 var(--ink);
  margin-bottom:clamp(2rem,5vw,3rem);
}

.notice{
  max-width:62ch; text-align:center;
  background:linear-gradient(#251808,#1A1006);
  border:4px solid #6B4423; border-radius:9px;
  padding:clamp(1.1rem,4vw,1.7rem);
}
.notice p{font-size:.98rem; color:#D8C4A2}
.notice .notice__hard{
  font-family:var(--display); font-size:clamp(1rem,3.4vw,1.25rem);
  color:#000; background:linear-gradient(#FFDD70,#FFB300);
  border:4px solid var(--ink); border-radius:7px;
  padding:.7em .85em; margin:1.1em 0 .9em; line-height:1.25;
}
.notice__tag{
  font-family:var(--voice); color:var(--gold-hi); font-size:1.1rem; margin:0; text-align:center;
}

/* ---------- 11. Gallery -------------------------------------------------- */
.sec--tales{background:linear-gradient(#20150D,#160E09); padding-bottom:clamp(3rem,8vw,5rem)}
.sec--tales .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}
.tales__hint{font-family:var(--voice); color:#A78F6B; margin-top:-1.4rem; margin-bottom:.7rem; font-size:1rem}
.rail-toggle{margin-bottom:1rem}

.rail{
  display:flex; gap:1.2rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:1rem var(--pad) 2rem;
  scrollbar-width:thin; scrollbar-color:var(--timber) #140D08;
}
.rail.is-auto{scroll-snap-type:none}
.rail::-webkit-scrollbar{height:12px}
.rail::-webkit-scrollbar-track{background:#140D08; border-radius:99px}
.rail::-webkit-scrollbar-thumb{background:var(--timber); border-radius:99px; border:3px solid #140D08}
.rail li{flex:0 0 auto; scroll-snap-align:center}

.tile{
  display:block; padding:0; border:5px solid var(--ink); border-radius:8px;
  background:#241811; cursor:pointer; overflow:hidden; position:relative;
  width:min(78vw,380px);
  box-shadow:0 11px 0 rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rail li:nth-child(odd) .tile{transform:rotate(-1.2deg)}
.rail li:nth-child(even) .tile{transform:rotate(1.1deg)}
.tile:hover{transform:rotate(0) translateY(-5px); box-shadow:0 16px 0 rgba(0,0,0,.45)}
.tile img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center}
.tile--cut img{
  object-fit:contain; padding:.8rem .8rem 0;
  background:
    radial-gradient(70% 65% at 50% 88%, rgba(255,180,40,.24), transparent 70%),
    linear-gradient(160deg,#3E2A1B,#1A110C);
}
.tile span{
  display:block; font-family:var(--display); font-size:.9rem; text-transform:uppercase;
  color:#2A1608; background:var(--canvas-dk); border-top:5px solid var(--ink);
  padding:.5em .8em .45em; letter-spacing:.04em;
}

/* ---------- 12. Token ---------------------------------------------------- */
.sec--token{background:linear-gradient(#160E09,#241710)}
.sec--token .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}

.ledger{
  width:100%; max-width:660px;
  background:linear-gradient(#2E1E10,#1D1209);
  border:6px solid var(--ink); border-radius:10px;
  box-shadow:0 12px 0 rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.05);
  padding:clamp(1.2rem,4.5vw,2rem);
}
.ledger dl{margin:0}
.ledger dl div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.62em 0; border-bottom:2px dashed rgba(233,212,166,.24);
}
.ledger dt{font-family:var(--body); font-weight:700; color:#B79E77; text-transform:uppercase; font-size:.85rem; letter-spacing:.07em}
.ledger dd{margin:0; font-family:var(--display); font-size:clamp(1rem,3.4vw,1.25rem); color:var(--gold)}

.ca{margin-top:1.6rem}
.ca__label{font-family:var(--body); font-weight:700; color:#B79E77; text-transform:uppercase; font-size:.85rem; letter-spacing:.07em; margin-bottom:.5em}
.ca__value{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:clamp(.72rem,2.7vw,.92rem);
  color:var(--canvas); background:#0E0906;
  border:3px solid #543115; border-radius:7px;
  padding:.75em .7em; word-break:break-all; margin-bottom:1rem;
}
.ca__warn{font-size:.9rem; color:#A78F6B; margin:1.4rem 0 0}

.stats{
  width:100%; max-width:900px; margin-top:clamp(2rem,5vw,3rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:repeating-linear-gradient(94deg,#3B2716 0 9px,#331F11 9px 17px);
  border:4px solid var(--ink); border-radius:8px; padding:1rem .6rem;
  box-shadow:0 7px 0 rgba(0,0,0,.4);
}
.stat__k{display:block; font-family:var(--display); font-size:clamp(1.1rem,4vw,1.6rem); color:var(--gold)}
.stat__l{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:#B79E77; margin-top:.35em}
.milestones{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.milestones li{
  font-family:var(--voice); font-size:.95rem; color:var(--canvas);
  border:3px solid #6B4423; border-radius:999px; padding:.35em .9em;
}
.milestones li.done{background:var(--gold); color:#2A1608; border-color:var(--ink)}

/* ---------- 13. Footer --------------------------------------------------- */
.foot{
  background:linear-gradient(#241710,var(--pit));
  border-top:6px solid var(--ink);
  padding:clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3rem);
  text-align:center;
}
.foot__creed{
  font-size:clamp(1.25rem,5.2vw,2.4rem); color:var(--canvas);
  text-transform:uppercase; line-height:1.1;
  text-shadow:3px 3px 0 var(--ink); margin-bottom:1.8rem;
}
.foot__legal{max-width:56ch; margin:2rem auto 0; font-size:.85rem; color:#8C7757; line-height:1.55}
.foot__legal--sub{margin-top:.5rem; font-size:.8rem; color:#A78F6B}

/* ---------- 14. Lightbox ------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,5,3,.93);
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  animation:fadeIn .22s ease both;
}
.lightbox figure{margin:0; max-width:min(96vw,1100px); text-align:center}
.lightbox img{
  max-height:78svh; width:auto; margin-inline:auto;
  border:6px solid var(--ink); border-radius:8px; background:#241811;
  box-shadow:0 0 70px rgba(0,0,0,.9);
}
.lightbox figcaption{font-family:var(--voice); color:var(--canvas); margin-top:1rem; font-size:1.05rem}
.lightbox__close{
  position:absolute; top:max(1rem,env(safe-area-inset-top)); right:max(1rem,env(safe-area-inset-right));
  font-size:1.3rem; line-height:1; color:var(--ink);
  background:var(--gold); border:4px solid var(--ink); border-radius:50%;
  width:48px; height:48px; cursor:pointer; box-shadow:0 4px 0 var(--ink);
}
body.lb-open{overflow:hidden}

/* ---------- 15. 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-up{opacity:1; transform:none}
  .dust{display:none}
  .beam__track{animation:none}
}