:root{
  --cream:#f2e8d5; --wood:#8a5a2e; --wood2:#5e3a1c; --ink:#2b1d12; --ink2:#6b5949;
  --orange:#d96c2f; --orange2:#b34f1c; --teal:#2f8c82; --pin:#faf6ec;
  --fd:"Bowlby One",system-ui,sans-serif; --fs:"Pacifico",cursive; --fb:"Inter",system-ui,sans-serif;
  /* precision tokens: one scale, one rhythm, two radii */
  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --rhythm:clamp(110px,18vh,200px); --r1:6px; --r2:14px;
  --t:.4s; --e:cubic-bezier(.2,.9,.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}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,232,213,.9) 0%,rgba(242,232,213,.42) 26%,transparent 44%,transparent 56%,rgba(242,232,213,.42) 74%,rgba(242,232,213,.9) 100%)}
.script{font-family:var(--fs)}

/* strike flash */
.strikeflash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;opacity:0;background:rgba(242,232,213,.55)}
.strikeflash .script{font-size:clamp(4rem,14vw,11rem);color:var(--orange);transform:rotate(-8deg);text-shadow:4px 5px 0 rgba(43,29,18,.25)}
.strikeflash.go{animation:flash 1.6s var(--e) forwards}
@keyframes flash{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.04)}}

.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,52px)}
.brand{font-family:var(--fd);font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.brand span{color:var(--orange)}
.links{display:flex;gap:var(--s4)}
.links a{font-size:.82rem;font-weight:600;color:var(--ink2);text-decoration:none;transition:color var(--t)}
.links a:hover{color:var(--orange)}
.est{color:var(--teal);font-size:1.05rem}

/* scorecard HUD */
.scorecard{position:fixed;bottom:var(--s3);left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:3px;
  background:var(--pin);border:2px solid var(--ink);border-radius:var(--r1);padding:5px;box-shadow:3px 4px 0 rgba(43,29,18,.25)}
.fr{width:30px;height:34px;border:1.5px solid rgba(43,29,18,.35);border-radius:3px;display:grid;place-items:center;
  font-family:var(--fd);font-size:.85rem;color:var(--orange);position:relative}
.fr .n{position:absolute;top:1px;right:3px;font-family:var(--fb);font-size:.5rem;color:var(--ink2)}
.fr.on{background:rgba(217,108,47,.12)}
.fr.tenth{width:40px}
.total{display:grid;place-items:center;font-family:var(--fd);padding:0 8px;color:var(--ink);font-size:1rem}

.btn{font-family:var(--fd);font-size:.9rem;text-decoration:none;cursor:pointer;border:none;display:inline-block;
  padding:13px 24px;border-radius:var(--r2);transition:transform .15s var(--e),box-shadow .15s var(--e);letter-spacing:.02em}
.btn.solid{background:var(--orange);color:var(--pin);box-shadow:0 4px 0 var(--orange2)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--orange2)}
.btn.solid:active{transform:translateY(2px);box-shadow:0 1px 0 var(--orange2)}
.btn.line{background:transparent;border:2.5px solid var(--ink);color:var(--ink);box-shadow:0 4px 0 rgba(43,29,18,.35)}
.btn.line:hover{transform:translateY(-2px)}

/* acts + zones (hero clearance: content lives in side zones, the lane owns the center) */
.act{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;padding:var(--rhythm) clamp(20px,4vw,60px)}
.zone{max-width:30rem}
.zone.left{margin-right:auto}
.zone.right{margin-left:auto;text-align:right}
.zone.wide{max-width:34rem}
.zone.center{margin:0 auto;text-align:center;max-width:44rem}
.kick{color:var(--teal);font-size:1.25rem;display:inline-block}
h1{font-family:var(--fd);font-size:clamp(4rem,13vw,10.5rem);line-height:.88;margin:var(--s3) 0;color:var(--ink);text-shadow:5px 6px 0 rgba(217,108,47,.35)}
.act h2{font-family:var(--fd);font-size:clamp(2rem,5.4vw,3.9rem);line-height:.96;margin:var(--s3) 0;color:var(--ink)}
.act h2.big{font-size:clamp(2.6rem,7.5vw,5.6rem);text-shadow:4px 5px 0 rgba(217,108,47,.3)}
.act p{color:var(--ink2);font-size:1.06rem;line-height:1.65;max-width:38ch}
.zone.right p{margin-left:auto}
.cta{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap}
.cta.center{justify-content:center}
.cue{display:inline-block;margin-top:var(--s5);font-family:var(--fs);color:var(--orange);font-size:1.2rem}

/* the rack — procedural ball cards (tactile, figma) */
.rack{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)}
.ballcard{background:var(--pin);border:2px solid var(--ink);border-radius:var(--r2);padding:var(--s3);text-align:center;
  box-shadow:4px 5px 0 rgba(43,29,18,.22);transition:transform .25s var(--e),box-shadow .25s var(--e);cursor:pointer}
.ballcard:hover{transform:translateY(-6px) rotate(-1.4deg);box-shadow:7px 10px 0 rgba(43,29,18,.26)}
.ballcard canvas{width:96px;height:96px;display:block;margin:0 auto var(--s2)}
.ballcard b{font-family:var(--fd);font-size:.95rem;display:block;color:var(--ink)}
.ballcard span{font-size:.74rem;color:var(--ink2)}
.ballcard .price{font-family:var(--fd);color:var(--orange);font-size:.9rem;display:block;margin-top:4px}

/* fitting steps */
.steps{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s3);counter-reset:st}
.steps li{counter-increment:st;background:var(--pin);border:2px solid var(--ink);border-radius:var(--r2);padding:var(--s3) var(--s4);
  box-shadow:4px 5px 0 rgba(43,29,18,.22);text-align:left;position:relative;padding-left:64px}
.steps li::before{content:counter(st);position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--pin);font-family:var(--fd);display:grid;place-items:center}
.steps b{font-family:var(--fd);color:var(--ink)}
.steps span{display:block;color:var(--ink2);font-size:.86rem}

/* finale */
.shopshot{width:100%;max-width:38rem;margin:var(--s4) auto;border-radius:var(--r2);border:3px solid var(--ink);
  box-shadow:6px 8px 0 rgba(43,29,18,.25);aspect-ratio:16/10;object-fit:cover;display:block;
  filter:sepia(.24) saturate(1.1) contrast(1.04)}
.hours{max-width:24rem;margin:var(--s4) auto 0;display:grid;gap:2px}
.hours div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:2px dashed rgba(43,29,18,.25);font-size:.92rem}
.hours span{color:var(--ink2)}.hours b{font-family:var(--fd);font-size:.85rem}
footer{margin-top:var(--s6);padding-top:var(--s4);border-top:2px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);color:var(--ink2);font-size:.8rem}
footer .script{color:var(--teal)}

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

@media(max-width:820px){
  .links,.est{display:none}
  .scrim{background:linear-gradient(180deg,rgba(242,232,213,.88),rgba(242,232,213,.55))}
  .zone.right{text-align:left;margin-left:0;margin-right:auto}
  .zone.right p{margin-left:0}
  .scorecard{transform:translateX(-50%) scale(.82)}
  .rack{grid-template-columns:repeat(2,1fr)}
}