/* TOKENS (ui-ux-pro-max suggested Abril/Merriweather vintage poster mood; overridden to Rye + Baskerville to match the engraving)
   paper #EADBB6  paper-deep #DCC896  ink #2B2118  sepia #6B4E2E  red #A63A2B  gold #C99A2E
   space 8 / 16 / 24 / 40 / 72 px   radius 0-2px   motion: print-lunge 220ms, puck 700ms overshoot */
@font-face{font-family:"Rye";src:url(/fonts/rye-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Baskerville";src:url(/fonts/libre-baskerville-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Baskerville";src:url(/fonts/libre-baskerville-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Baskerville";src:url(/fonts/libre-baskerville-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JBMono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{--paper:#eadbb6;--deep:#dcc896;--ink:#2b2118;--sepia:#6b4e2e;--red:#a63a2b;--gold:#c99a2e}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 "Baskerville",Georgia,serif;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .3  0 0 0 0 .18  0 0 0 .13 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
code{font-family:"JBMono",ui-monospace,Menlo,monospace}
h1,h2{font-family:"Rye",Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:.01em}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* top strip */
.strip{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);padding:8px 24px;font:500 12px/1.3 "JBMono",monospace;letter-spacing:.08em}
.strip-m{color:var(--gold)}
.strip-r{display:flex;gap:16px;align-items:center}
.spk{background:none;border:1px solid var(--paper);padding:2px 10px;font:500 12px "JBMono",monospace;letter-spacing:.08em;color:var(--paper);border-radius:0}
.spk[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) 232px minmax(0,5fr);grid-template-areas:"poster striker head";gap:24px 48px;max-width:1360px;margin:0 auto;padding:40px 24px 72px;align-items:start}
.hero-head{grid-area:head;padding-top:8px}
.kicker{font:500 12px "JBMono",monospace;letter-spacing:.18em;color:var(--red);margin-bottom:16px}
h1{font-size:clamp(2.2rem,3.9vw,3.7rem);color:var(--ink)}
h1 span{color:var(--red);display:inline-block;transform:rotate(-1.5deg);border-bottom:4px double var(--ink);padding-bottom:2px}
.lede{max-width:34em;margin:24px 0;font-style:italic;color:var(--sepia)}
.ca{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--deep);border:2px dashed var(--ink);padding:10px 16px;text-align:left;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% 38%,98% 50%,100% 62%,100% 100%,0 100%,0 62%,2% 50%,0 38%)}
.ca-label{font:500 11px "JBMono",monospace;letter-spacing:.18em;color:var(--red)}
.ca code{font-size:15px;word-break:break-all;user-select:all}
.ca-hint{font:500 11px "JBMono",monospace;letter-spacing:.12em;color:var(--sepia);margin-left:auto}
.ca:hover{background:#d3bc84}

.poster{grid-area:poster;position:relative;transform:rotate(-1.2deg);max-width:560px;justify-self:start}
.poster img{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);transform-origin:80% 90%}
.poster.lunge img{animation:lunge .24s cubic-bezier(.2,.9,.3,1)}
@keyframes lunge{0%{transform:none}35%{transform:translate(-14px,5px) rotate(-1.6deg) scale(1.025)}100%{transform:none}}

/* striker tower */
.striker{grid-area:striker;align-self:start}
.tower{position:relative;width:232px;height:560px;padding-top:128px}
.bell{position:absolute;top:0;left:50%;width:132px;transform:translateX(-50%);transform-origin:50% 8%;}
.bell.ring{animation:ring 1.4s ease-out}
@keyframes ring{0%,100%{transform:translateX(-50%) rotate(0)}12%{transform:translateX(-50%) rotate(14deg)}28%{transform:translateX(-50%) rotate(-11deg)}44%{transform:translateX(-50%) rotate(7deg)}62%{transform:translateX(-50%) rotate(-4deg)}80%{transform:translateX(-50%) rotate(2deg)}}
.post{position:absolute;left:50%;transform:translateX(-50%);top:122px;bottom:0;width:78px;background:repeating-linear-gradient(90deg,#8e3524 0 10px,#a63a2b 10px 22px);border:2px solid var(--ink);border-bottom-width:12px}
.slot{position:absolute;left:50%;top:8px;bottom:8px;width:12px;transform:translateX(-50%);background:var(--ink)}
.puck{position:absolute;left:50%;bottom:calc(var(--lvl,0%) * .9 + 2%);width:44px;height:30px;margin-left:-22px;background:var(--gold);border:2px solid var(--ink);border-radius:50%;
  transition:bottom .7s cubic-bezier(.2,1.4,.4,1)}
.rungs{list-style:none;padding:0;position:absolute;inset:122px 0 12px 0;pointer-events:none}
.rungs li{position:absolute;left:0;bottom:var(--p);width:68px;font:500 9.5px/1.15 "JBMono",monospace;letter-spacing:.04em;text-align:right;border-bottom:1px solid var(--sepia);padding-bottom:2px;color:var(--sepia)}
.rungs li:first-child{color:var(--red)}
.panel{margin-top:32px;max-width:420px}
.swing{display:block;width:100%;background:var(--red);color:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  font:400 clamp(1.8rem,3vw,2.5rem)/1 "Rye",serif;letter-spacing:.06em;padding:18px 24px;border-radius:0;transition:transform .08s,box-shadow .08s}
.swing:active,.swing.down{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.hint{font:italic 13px "Baskerville",serif;color:var(--sepia);margin:8px 0 24px}
.tally{display:grid;gap:8px}
.tally div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted var(--sepia);padding-bottom:4px}
.tally dt{font:500 11px "JBMono",monospace;letter-spacing:.14em;color:var(--sepia);align-self:end}
.tally dd{font:400 1.9rem/1 "Rye",serif;font-variant-numeric:tabular-nums}
.raised{min-height:1.6em;margin-top:16px;font:700 14px "Baskerville",serif;color:var(--red);letter-spacing:.04em}

body.shake main{animation:shake .32s linear}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}

/* broadside */
.rules{background:var(--deep);border-block:3px double var(--ink);padding:72px 24px}
.bill{max-width:640px;margin:0 0 0 max(24px,calc(50% - 560px + 160px));background:var(--paper);border:6px double var(--ink);padding:40px 40px 32px;transform:rotate(.6deg)}
.bill-top{font:500 11px "JBMono",monospace;letter-spacing:.3em;text-align:center;color:var(--red)}
.bill h2{font-size:clamp(2rem,4.5vw,3.3rem);text-align:center;margin:8px 0 24px;border-block:2px solid var(--ink);padding:8px 0}
.bill ol{list-style:none;padding:0;display:grid;gap:16px}
.bill li b{font-family:"Rye",serif;font-weight:400;color:var(--red);margin-right:6px}
.bill-foot{margin-top:24px;text-align:center;font-style:italic;font-size:13px;color:var(--sepia);border-top:1px solid var(--ink);padding-top:8px}

/* faq */
.faq{max-width:760px;margin:0 auto;padding:72px 24px 40px 24px}
.faq h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:24px}
details{border-top:2px solid var(--ink);padding:12px 0}
details:last-of-type{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Rye",serif;color:var(--red)}
details[open] summary::after{content:"-"}
details p{margin-top:8px;color:var(--sepia);max-width:36em}

/* plates */
.plates{max-width:1100px;margin:0 auto;padding:40px 24px 72px;display:grid;grid-template-columns:5fr 7fr;gap:24px 40px;align-items:start}
.plates h2{grid-column:1/-1;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.plate img{border:2px solid var(--ink)}
.plate figcaption{font:italic 13px "Baskerville",serif;color:var(--sepia);margin-top:8px}
.plate-a{transform:rotate(1.4deg)}
.plate-b{transform:rotate(-.8deg);margin-top:64px}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;background:var(--ink);padding:24px}
.tkt{background:var(--gold);color:var(--ink);text-decoration:none;font:400 1.1rem/1 "Rye",serif;letter-spacing:.05em;padding:14px 22px;
  clip-path:polygon(0 0,100% 0,100% 36%,97% 50%,100% 64%,100% 100%,0 100%,0 64%,3% 50%,0 36%)}
.tkt:hover{background:var(--paper)}
.xlink{display:flex;align-items:center;gap:12px;margin-left:auto;text-decoration:none;color:var(--paper);font:500 12px "JBMono",monospace;letter-spacing:.12em}
.xlink img{width:44px;height:auto;border:2px solid var(--paper)}
.ns{padding:16px;text-align:center;font-style:italic}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

@media (max-width:1100px){
  .hero{grid-template-columns:232px minmax(0,1fr);grid-template-areas:"head head" "striker poster"}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-areas:"head" "striker" "poster";gap:24px;padding-top:24px}
  .striker{justify-self:center}
  .poster{max-width:100%}
  .bill{margin:0 auto}
  .plates{grid-template-columns:1fr}.plate-b{margin-top:0}
  .strip{padding:8px 16px}.strip-m{order:3;flex-basis:100%}
}
@media (max-width:420px){
  .ca-hint{margin-left:0}
  .bill{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}