/* ============ TOKENS ============ */
:root{
  --kraft:#EEEDE9;
  --kraft-deep:#E1DFD9;
  --mat:#FAF9F6;
  --ink:#0C0C0C;
  --accent:#8C3A2B;
  --accent-soft:#E7DCD8;

  --rule:3px solid var(--ink);
  --rule-thin:2px solid var(--ink);
  --pop:7px 7px 0 var(--ink);
  --pop-sm:4px 4px 0 var(--ink);

  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad: clamp(16px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--kraft);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.frame{position:fixed; inset:0; z-index:800; pointer-events:none}
.frame span{position:absolute; background:
  repeating-linear-gradient(45deg,
    var(--ink) 0 11px, var(--mat) 11px 22px);
}
.frame .t{top:0;left:0;right:0;height:9px}
.frame .b{bottom:0;left:0;right:0;height:9px}
.frame .l{top:0;bottom:0;left:0;width:9px}
.frame .r{top:0;bottom:0;right:0;width:9px}
@media (max-width:640px){ .frame .t,.frame .b{height:6px} .frame .l,.frame .r{width:6px} }

.screen{display:none; min-height:100svh; padding:var(--pad); position:relative; z-index:1}
.screen.on{display:block; animation:screenIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes screenIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.wrap{max-width:1120px; margin:0 auto; width:100%}

.kicker{
  font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
}
.mega{
  font-family:var(--display); font-weight:900;
  line-height:.82; letter-spacing:-.01em; text-transform:uppercase;
  margin:0;
}
.h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:0; margin:0;
  font-size:clamp(30px,6vw,58px);
}

.panel{
  background:var(--kraft); border:var(--rule); box-shadow:var(--pop);
  padding:clamp(16px,3vw,26px);
}
.btn{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(22px,3.4vw,30px); line-height:1;
  padding:16px 26px 13px; background:var(--ink); color:var(--kraft);
  border:var(--rule); box-shadow:var(--pop); letter-spacing:.02em;
  transition:transform .1s ease, box-shadow .1s ease;
  display:inline-flex; align-items:center; gap:14px;
}
.btn:hover{transform:translate(3px,3px); box-shadow:var(--pop-sm)}
.btn:active{transform:translate(7px,7px); box-shadow:0 0 0 var(--ink)}
.btn.brass{background:var(--accent); color:var(--mat)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none; box-shadow:var(--pop)}
:focus-visible{outline:4px solid var(--accent); outline-offset:3px}

.tag{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; padding:5px 10px;
  border:var(--rule-thin); background:var(--kraft);
}
.tag.red{background:var(--ink); color:var(--mat); border-color:var(--ink)}
.tag.brass{background:var(--accent-soft)}
.tag.blue{background:var(--ink); color:var(--mat)}

.ticker{
  border-top:var(--rule); border-bottom:var(--rule); background:var(--ink);
  color:var(--kraft); overflow:hidden; white-space:nowrap; padding:7px 0;
}
.ticker__row{display:inline-block; animation:slide 26s linear infinite}
.ticker span{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.24em; padding:0 18px}
.ticker b{color:var(--kraft-deep); opacity:.5}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

#hero .wrap{padding-block:clamp(28px,5vh,56px)}
.sun{
  position:absolute; top:-14vh; right:-24vw; width:min(78vw,700px); aspect-ratio:1;
  z-index:0; opacity:.38; animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#hero .wrap, #hero .ticker{position:relative; z-index:2}

.nash-icons{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.nash-icon{position:absolute; opacity:.88}
.nash-guitar{width:clamp(52px,9vw,90px); left:3%; bottom:18%; transform:rotate(-12deg)}
.nash-records{width:clamp(90px,16vw,160px); right:6%; top:22%; transform:rotate(8deg)}
.nash-batman{width:clamp(44px,8vw,78px); right:18%; bottom:12%; transform:rotate(3deg)}
@media (max-width:860px){
  .nash-records{top:6%; right:2%; bottom:auto; width:86px}
  .nash-batman{top:36%; right:3%; bottom:auto; width:56px}
  .nash-guitar{top:40%; left:2%; bottom:auto; width:56px}
}

.hero-mega{font-size:clamp(58px,14.5vw,168px)}
.hero-mega em{font-style:normal; display:block; color:var(--accent)}
.hero-mega .out{
  color:transparent; -webkit-text-stroke:2.5px var(--ink);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,3vw,40px);
  align-items:end; margin-top:clamp(20px,4vh,40px);
}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr} }

.brief{border-left:var(--rule); padding-left:18px; max-width:52ch}
.brief p{margin:0 0 14px}
.brief p:last-child{margin-bottom:0}
.brief strong{background:var(--accent-soft); padding:1px 5px}

.steps{display:grid; gap:0; border:var(--rule); box-shadow:var(--pop); background:var(--kraft)}
.step{display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:14px; padding:13px 16px; border-bottom:var(--rule-thin)}
.step:last-child{border-bottom:0}
.step__n{font-family:var(--display); font-weight:900; font-size:40px; line-height:.8}
.step__t{font-family:var(--display); font-weight:700; font-size:22px; text-transform:uppercase; line-height:1}
.step__s{font-size:11px; letter-spacing:.08em; opacity:.72; display:block; font-weight:400; text-transform:none; font-family:var(--mono)}
.step__time{font-size:10px; letter-spacing:.16em; font-weight:700}

.rail{display:flex; align-items:stretch; border:var(--rule); background:var(--kraft); margin-bottom:clamp(18px,3vh,30px); overflow:hidden}
.rail div{
  flex:1; padding:8px 6px; text-align:center; font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; border-right:var(--rule-thin);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail div:last-child{border-right:0}
.rail div.done{background:var(--kraft-deep)}
.rail div.now{background:var(--ink); color:var(--mat)}

.gate-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,38px); align-items:start}
@media (max-width:860px){ .gate-grid{grid-template-columns:1fr} }

.field{margin-bottom:18px}
.field label{display:block; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:6px}
.field input, .field select{
  width:100%; padding:13px 14px; background:var(--kraft-deep);
  border:var(--rule); border-radius:0; font-family:var(--mono); font-size:16px;
  appearance:none;
}
.field input::placeholder{color:#0c0c0c66}
.field input:focus, .field select:focus{background:#fff; outline:4px solid var(--accent); outline-offset:0}
.field.bad input, .field.bad select{background:var(--accent-soft); border-color:var(--accent)}
.err{color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.06em; margin-top:6px; display:none}
.field.bad .err{display:block}

.phone-row{display:grid; grid-template-columns:128px 1fr; gap:8px}
.phone-row select{
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
  cursor:pointer;
}

.confirm-card{
  border:var(--rule); box-shadow:var(--pop); background:var(--mat);
  padding:22px; margin-top:18px;
}
.confirm-card[hidden]{display:none !important}
.confirm-head{
  font-family:var(--display); font-weight:800; font-size:28px;
  text-transform:uppercase; line-height:.95; margin:12px 0 16px;
}
.confirm-list div{
  display:grid; grid-template-columns:80px 1fr; gap:10px;
  border-bottom:var(--rule-thin); padding:10px 0; align-items:baseline;
}
.confirm-list dt{font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.7}
.confirm-list dd{margin:0; font-weight:700; word-break:break-word}
.confirm-card .tag.ok{background:var(--accent); color:var(--mat); border-color:var(--ink)}

.stamp{
  width:150px; aspect-ratio:.82; background:var(--accent); color:var(--mat); position:relative;
  display:grid; place-items:center; text-align:center; padding:16px;
  box-shadow:var(--pop-sm);
}
.stamp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle 4px at 50% 0,    var(--kraft) 97%, transparent) 0 0    /13px 8px repeat-x,
    radial-gradient(circle 4px at 50% 100%, var(--kraft) 97%, transparent) 0 100% /13px 8px repeat-x,
    radial-gradient(circle 4px at 0 50%,    var(--kraft) 97%, transparent) 0 0    /8px 13px repeat-y,
    radial-gradient(circle 4px at 100% 50%, var(--kraft) 97%, transparent) 100% 0 /8px 13px repeat-y;
}
.stamp::after{content:""; position:absolute; inset:11px; border:2px dashed var(--mat); opacity:.6}
.stamp .sv{font-family:var(--display); font-weight:900; font-size:44px; line-height:.85}
.stamp .sl{font-size:8px; font-weight:700; letter-spacing:.16em}

.duel-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.duel-head .h2{font-size:clamp(28px,4vw,42px)}

.arena{
  display:grid;
  grid-template-columns: minmax(120px,190px) minmax(0,1fr) auto minmax(0,1fr) minmax(120px,190px);
  gap:16px; align-items:center;
}
.card-slot{
  width:100%;
  max-width:min(100%, 68vh);
  margin-inline:auto;
  aspect-ratio:1 / 1;
  position:relative;
  min-width:0;
}
@media (max-width:900px){
  .arena{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .arena #slotA{order:1}
  .arena #metaA{order:2}
  .arena .vs{order:3}
  .arena #slotB{order:4}
  .arena #metaB{order:5}
  .card-slot{max-width:min(100%, 82vw)}
}

.card-meta{min-width:0}
.card-meta .card__t{
  font-family:var(--display); font-weight:800; font-size:clamp(20px,2.2vw,32px);
  text-transform:uppercase; line-height:.95; margin:0 0 8px;
}
.card-meta .card__a{font-size:12px; font-weight:700; letter-spacing:.04em}
.card-meta .card__y{font-size:11px; opacity:.65; margin-top:4px}
@media (max-width:900px){
  .card-meta{padding:0 4px 10px}
  .card-meta .card__t{font-size:18px}
}

.card{
  position:absolute; inset:0; width:100%; height:100%;
  border:var(--rule); background:var(--mat);
  box-shadow:var(--pop); padding:0; margin:0;
  overflow:hidden; display:block;
  appearance:none; -webkit-appearance:none;
  transition:transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.card:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink)}
.card__mat{display:block; position:absolute; inset:0; padding:0; overflow:hidden}
.card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; background:var(--mat);
}
.card__pick{
  position:absolute; right:10px; bottom:10px;
  font-family:var(--mono); font-weight:700; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--mat);
  padding:4px 8px; opacity:.0; transition:opacity .15s;
}
.card:hover .card__pick, .card:focus-visible .card__pick{opacity:.55}

.vs{display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:28px; opacity:.7}
@media (max-width:900px){ .vs{font-size:16px; padding:2px} }

.card.win{animation:winPulse .4s ease}
.card.lose{animation:loseFade .38s ease both}
.card.in{animation:cardFade .4s ease both}
@keyframes winPulse{50%{box-shadow:0 0 0 6px var(--accent)} }
@keyframes loseFade{to{opacity:0}}
@keyframes cardFade{from{opacity:0} to{opacity:1}}

.env-stage{display:grid; place-items:center; padding:clamp(14px,4vh,40px) 0; perspective:1400px}
#sealed .env-stage{padding-top:calc(min(92vw,430px) * .74)}
.env{
  position:relative; width:min(92vw,430px); aspect-ratio:1.62/1;
  transform-style:preserve-3d; transition:transform .6s ease;
}
.env__back{position:absolute; inset:0; background:var(--kraft-deep); border:var(--rule); box-shadow:var(--pop)}
.env__photo{
  position:absolute; left:18%; width:64%; aspect-ratio:1 / 1; z-index:2;
  border:var(--rule); background:var(--mat); padding:3%; overflow:hidden;
  top:-118%; transition:top 1.05s cubic-bezier(.5,0,.2,1), opacity .35s ease;
  box-shadow:0 12px 0 rgba(0,0,0,.12);
}
.env__photo img{width:100%;height:100%;object-fit:cover;display:block}
.env.tucked .env__photo{top:28%}
.env.sealed .env__photo{top:42%; opacity:0; pointer-events:none}
.env__front{
  position:absolute; inset:0; z-index:3; background:var(--kraft);
  border:var(--rule);
  clip-path:polygon(0 34%, 50% 76%, 100% 34%, 100% 100%, 0 100%);
}
.env__flap{
  position:absolute; top:0; left:0; right:0; height:62%;
  background:var(--kraft); border:var(--rule);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center; transform:rotateX(180deg);
  transition:transform .85s cubic-bezier(.5,0,.2,1);
  z-index:1;
}
.env.sealed .env__flap{transform:rotateX(0deg); z-index:8; background:var(--kraft-deep)}
.env__seal{
  position:absolute; top:44%; left:50%; z-index:6;
  width:70px; height:70px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; color:var(--mat);
  font-family:var(--display); font-weight:900; font-size:11px; text-align:center; line-height:1;
  border:var(--rule);
  transform:translate(-50%,-50%) scale(0); opacity:0;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s;
  letter-spacing:.04em;
}
.env.sealed .env__seal{transform:translate(-50%,-50%) scale(1); opacity:1; transition-delay:.75s}

.env__addr{
  position:absolute; z-index:6; left:12%; top:46%; width:62%;
  font-family:var(--mono); font-size:clamp(10px,2.4vw,13px); line-height:1.5;
  white-space:pre-wrap; text-align:left; min-height:1px;
}
.env__stamp{
  position:absolute; z-index:6; right:6%; top:8%; width:22%; aspect-ratio:.82;
  background:var(--accent); color:var(--mat); border:var(--rule);
  display:grid; place-items:center; padding:6px;
  transform:scale(0) rotate(-18deg); transition:transform .35s cubic-bezier(.3,1.7,.5,1);
}
.env__stamp svg{width:70%; height:80%; display:block}
.env.stamped .env__stamp{transform:scale(1) rotate(-4deg)}
.env__mark{
  position:absolute; z-index:7; right:2%; top:5%; width:34%; aspect-ratio:1;
  opacity:0; transform:scale(2.2) rotate(-24deg);
  transition:opacity .12s, transform .2s cubic-bezier(.3,1.5,.5,1);
}
.env.marked .env__mark{opacity:.85; transform:scale(1) rotate(-11deg)}
.env__par{position:absolute; z-index:6; left:6%; top:8%;}

.env.flying{animation:fly 2.3s cubic-bezier(.5,0,.4,1) forwards}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0) scale(1); opacity:1}
  18%{transform:translate(0,26px) rotate(-2deg) scale(.98)}
  100%{transform:translate(58vw,-88vh) rotate(-26deg) scale(.16); opacity:0}
}

#launch{background:linear-gradient(180deg,#DEDCD5 0%, var(--kraft) 78%)}
.trail{position:absolute; inset:0; z-index:1; pointer-events:none}
.trail path{fill:none; stroke:var(--ink); stroke-width:3; stroke-dasharray:10 12; stroke-dashoffset:1400; opacity:.7}
.trail.go path{animation:draw 2.3s linear forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.plane{position:absolute; z-index:6; width:70px; opacity:0; left:0; top:0}
.plane.go{animation:planeGo 2.3s cubic-bezier(.5,0,.4,1) forwards}
@keyframes planeGo{
  0%{opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  22%{opacity:1}
  100%{opacity:0; transform:translate(60vw,-86vh) rotate(-22deg) scale(1.1)}
}

.confetti{position:fixed; inset:0; pointer-events:none; z-index:700; overflow:hidden}
.conf{position:absolute; width:12px; height:12px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(760deg)}}

.receipt{
  background:var(--kraft); border:var(--rule); box-shadow:var(--pop);
  max-width:520px; margin:0 auto; padding:0; text-align:left;
}
.receipt__top{background:var(--ink); color:var(--kraft); padding:12px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.receipt__body{padding:18px}
.receipt dl{display:grid; grid-template-columns:96px 1fr; gap:6px 12px; margin:0; font-size:13px}
.receipt dt{font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding-top:4px; opacity:.7}
.receipt dd{margin:0; word-break:break-word}
.perf{height:14px; background:
  radial-gradient(circle at 7px 7px, var(--kraft-deep) 0 6px, transparent 6.5px) 0 0/14px 14px repeat-x;
  border-block:var(--rule-thin)}
.thumbmat{background:var(--mat); border:var(--rule); padding:12px; margin-bottom:14px}
.thumb{width:100%; aspect-ratio:1; object-fit:cover; display:block}

.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media (max-width:560px){
  .two{grid-template-columns:1fr}
  .phone-row{grid-template-columns:110px 1fr}
  .btn{width:100%; justify-content:center}
}
.mt{margin-top:clamp(18px,3vh,30px)}
.center{text-align:center}
.muted{opacity:.7; font-size:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}