:root{
  --cream:#f3ead8; --cream2:#e9dcc2; --ink:#241a10; --ink2:#6b5940;
  --orange:#c9502c; --orange2:#a83c1e; --teal:#2a8f85; --gold:#d9a441;
  --fd:"Alfa Slab One",serif; --fs:"Yellowtail",cursive; --fb:"Inter",system-ui,sans-serif;
  /* precision tokens */
  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --rhythm:clamp(120px,18vh,200px); --r1:6px; --r2:16px;
  --t:.4s; --e:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--fb);overflow-x:hidden}
#lane{position:fixed;inset:0;z-index:0}
.script{font-family:var(--fs);color:var(--orange);font-size:1.6rem;line-height:1}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) clamp(20px,4vw,48px);mix-blend-mode:multiply}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.pinmark{width:14px;height:26px;background:radial-gradient(circle at 50% 26%,var(--cream) 0 30%,transparent 31%),linear-gradient(180deg,#fff 55%,var(--orange) 55% 70%,#fff 70%);border-radius:45% 45% 40% 40%/60% 60% 35% 35%;border:2px solid var(--ink);display:inline-block}
.links{display:flex;gap:var(--s4)}
.links a{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color var(--t)}
.links a:hover{color:var(--orange)}

.btn{font-family:var(--fb);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;border:none;display:inline-block;
  padding:14px 26px;border-radius:40px;transition:transform .18s var(--e),box-shadow var(--t),background var(--t),color var(--t)}
.btn.solid{background:var(--orange);color:var(--cream);box-shadow:0 6px 0 var(--orange2)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--orange2)}
.btn.solid:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange2)}
.btn.line{background:transparent;border:2.5px solid var(--ink);color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--cream)}
.btn.sm{padding:9px 18px;font-size:.78rem}

/* scorecard */
.scorecard{position:fixed;top:76px;right:clamp(16px,3vw,44px);z-index:25;background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r1);
  padding:8px 10px;box-shadow:5px 6px 0 rgba(36,26,16,.2);display:flex;align-items:center;gap:10px}
.sc-label{font-size:1.15rem;transform:rotate(-4deg)}
#frames{display:flex;gap:4px}
.fr{width:20px;height:24px;border:2px solid var(--ink);border-radius:3px;display:grid;place-items:center;
  font-family:var(--fd);font-size:.72rem;color:var(--orange);background:#fff}
.fr.hit{background:var(--gold)}

/* sections ride beside the lane (lane owns the center-right) */
.sec{position:relative;z-index:10;min-height:100vh;display:flex;align-items:center;padding:var(--rhythm) clamp(20px,4vw,56px)}
.panel{max-width:34rem;width:100%}
.panel.left{margin-right:auto}
.panel.right{margin-left:auto}
.kicker{display:inline-block;margin-bottom:var(--s2)}
h1{font-family:var(--fd);font-size:clamp(3rem,8.5vw,6.8rem);line-height:.95;letter-spacing:.005em;margin:var(--s2) 0 var(--s4)}
h1 em,.strike-title em{font-style:normal;color:var(--orange);text-shadow:4px 4px 0 rgba(36,26,16,.14)}
h2{font-family:var(--fd);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;margin:var(--s2) 0 var(--s3)}
.sec p{color:var(--ink2);font-size:1.05rem;line-height:1.65;max-width:44ch}
.cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.cue{display:inline-block;margin-top:var(--s5);font-size:1.4rem;transform:rotate(-3deg)}

/* the arsenal — forged glossy balls, tactile */
.balls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.ball{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r2);padding:var(--s3);text-align:center;cursor:pointer;
  box-shadow:5px 6px 0 rgba(36,26,16,.16);transition:transform .25s var(--e),box-shadow .25s var(--e)}
.ball:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:7px 10px 0 rgba(36,26,16,.2)}
.ball canvas{width:100%;aspect-ratio:1;display:block}
.ball b{display:block;font-family:var(--fd);font-size:.95rem;margin-top:var(--s2)}
.ball span{font-size:.74rem;color:var(--ink2)}

/* fit steps */
.steps{list-style:none;margin-top:var(--s4);display:grid;gap:2px}
.steps li{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-bottom:2px dashed rgba(36,26,16,.2)}
.steps b{font-family:var(--fd);color:var(--teal);font-size:1.2rem}
.steps span{color:var(--ink2)}

/* alley band — free-gen image, graded + feathered */
.alleyband{position:relative;overflow:hidden;min-height:88vh}
#alleyimg{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:0;
  filter:sepia(.35) saturate(1.15) contrast(1.05) brightness(.82);will-change:transform}
.alleyband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(243,234,216,.92),rgba(243,234,216,.4) 45%,rgba(36,26,16,.25)),
             linear-gradient(0deg,rgba(243,234,216,.9),transparent 30% 70%,rgba(243,234,216,.9))}
.band-in{position:relative;z-index:2;max-width:30rem}
.alleyband.noimg{display:none}

/* creed + stats */
.creed{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r2);padding:var(--s4);box-shadow:6px 7px 0 rgba(36,26,16,.16);transform:rotate(-1deg);margin-top:var(--s3)}
.creed .c1{font-family:var(--fd);font-size:1.2rem;line-height:1.45;color:var(--ink)}
.sig{display:block;margin-top:var(--s3);font-size:1.5rem;color:var(--teal)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.stats div{border-top:3px solid var(--ink);padding-top:var(--s2)}
.stats b{font-family:var(--fd);font-size:1.6rem;color:var(--orange);display:block}
.stats span{font-size:.8rem;color:var(--ink2)}

/* finale */
.finale{flex-direction:column;justify-content:center;text-align:center}
.strikewrap{width:100%;max-width:52rem;margin:0 auto}
.strike-title{font-family:var(--fd);font-size:clamp(3.4rem,12vw,9rem);line-height:1;opacity:0;transform:scale(.6) rotate(-5deg);transition:opacity .5s var(--e),transform .55s cubic-bezier(.2,2.2,.4,1)}
.strike-title.go{opacity:1;transform:scale(1) rotate(-2deg)}
.strike-sub{margin:var(--s3) auto var(--s5)}
.visit-card{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r2);box-shadow:6px 8px 0 rgba(36,26,16,.16);
  padding:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);text-align:left;max-width:40rem;margin:0 auto}
.visit-card .cta{grid-column:1/-1;justify-content:center;margin-top:0}
.visit-card p{font-size:.98rem}
footer{margin-top:var(--s6);display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;color:var(--ink2);font-size:.8rem}
footer .script{font-size:1.3rem}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}

@media(max-width:860px){
  .links{display:none}.scorecard{top:auto;bottom:14px;right:14px}
  .sec{min-height:auto;padding:calc(var(--rhythm)*.7) 20px}
  .panel.left,.panel.right{margin:0 auto}
  #lane{opacity:.5}
  .balls{grid-template-columns:repeat(3,1fr)}
  .visit-card{grid-template-columns:1fr}
}