@font-face{font-family:Anton;src:url(Anton.ttf) format("truetype");font-display:swap}
@font-face{font-family:Mono;src:url(Mono.ttf) format("truetype");font-display:swap}
:root{--bg:#0d0b0a;--bg2:#171310;--bone:#EDE6D6;--rust:#B5482C;--char:#3a322c;--mute:#a59c8c}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bone);font:17px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--bone)}
h1,h2,h3,.logo,.btn,.story-num,.countdown b{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.kicker,.small,.badge,.ph,.cd-label,.countdown small,.draftbar,nav a{font-family:Mono,ui-monospace,monospace}
.draftbar{background:var(--rust);color:#fff;text-align:center;font-size:12px;padding:6px;letter-spacing:.08em}
.nav{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 5vw;background:rgba(13,11,10,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--char)}
.logo{text-decoration:none;font-size:1.5rem;color:var(--bone)}.logo span{color:var(--rust);font-size:1rem;letter-spacing:.2em}
nav{display:flex;gap:1.4rem}nav a{text-decoration:none;font-size:13px;text-transform:uppercase;color:var(--mute)}nav a:hover{color:var(--bone)}
.btn{display:inline-block;background:var(--rust);color:#fff;text-decoration:none;padding:.8rem 1.4rem;font-size:1.1rem;text-transform:uppercase;border:2px solid var(--rust);cursor:pointer;transition:.15s}
.btn:hover{background:#cf5737;transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--bone);border-color:var(--char)}.btn.ghost:hover{border-color:var(--bone)}
.btn.sm{padding:.4rem .9rem;font-size:.95rem}.btn.block{display:block;text-align:center;margin-top:auto}
section{padding:5rem 5vw}
h2{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;margin-bottom:1rem;text-transform:uppercase}
.center{text-align:center}
.kicker{color:var(--rust);text-transform:uppercase;font-size:13px;letter-spacing:.12em;margin-bottom:1rem}
.small{font-size:12.5px;color:var(--mute)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;min-height:min(85vh,820px);background:radial-gradient(circle at 75% 40%,#2a1710 0,transparent 60%)}
h1{font-size:clamp(4rem,11vw,8.5rem);line-height:.88;text-shadow:5px 5px 0 var(--rust)}
.rule{display:flex;align-items:center;gap:1rem;margin:1.2rem 0;font-family:Anton;letter-spacing:.5em;max-width:480px}
.rule:before,.rule:after{content:"";flex:1;height:3px;background:var(--rust)}
.lede{font-size:1.2rem;max-width:34rem;margin-bottom:1.6rem}.lede em{color:var(--rust);font-style:normal;font-weight:700}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap}
.status{margin-top:2.2rem;max-width:520px;border:1px solid var(--char);background:var(--bg2);padding:1.2rem}
.countdown b{display:block;font-size:2.4rem;line-height:1}.countdown small{font-size:11px;color:var(--mute);text-transform:uppercase}
.cd-label{font-size:12px;color:var(--mute);text-align:center;margin:.5rem 0 1rem}
.progress-top{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:.4rem}
.ph{font-size:10px;background:#3b2a12;color:#f0c068;padding:2px 6px;border:1px dashed #f0c068}
.bar{position:relative;height:14px;background:#262019;border:1px solid var(--char);margin-bottom:.6rem}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rust),#e06a43);transition:width 1s}
.hero-art img{border:1px solid var(--char);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gift{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--bg2);border-block:1px solid var(--char)}
.gift-art{position:relative}
.gift-tee{width:80%;border:1px solid var(--char)}
.ticks{list-style:none;padding:0;margin:1.2rem 0 1.6rem}.ticks li{padding-left:1.6rem;position:relative;margin:.4rem 0}
.ticks li:before{content:"135°";position:absolute;left:-.6rem;font:10px Mono;color:var(--rust);top:.35rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.card{display:flex;flex-direction:column;gap:1rem;background:var(--bg2);border:1px solid var(--char);padding:1.2rem;position:relative}
.card.feature{border-color:var(--rust);box-shadow:0 0 0 1px var(--rust)}
.badge{position:absolute;top:-12px;left:1.2rem;background:var(--rust);color:#fff;font-size:11px;padding:3px 10px;text-transform:uppercase;letter-spacing:.1em}
.card-img{aspect-ratio:1;overflow:hidden;background:#0a0908;display:grid;place-items:center}.card-img>img{width:100%;height:100%;object-fit:cover}
.card-img.hatbox>img,.card-img.duo>img:last-child{object-fit:contain;padding:12%}
.card-img.duo{grid-template-columns:1fr 1fr}.card-img.duo>img{height:100%}
.card h3{font-size:1.5rem;display:flex;justify-content:space-between;gap:1rem;text-transform:uppercase}.card h3 span{color:var(--rust)}
.card p{color:#cfc7b6;font-size:.95rem}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.5rem 0;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--rust);padding-top:1rem;color:#cfc7b6}
.steps li:before{content:"0" counter(s);display:block;font:2rem Anton;color:var(--rust)}.steps b{color:var(--bone);display:block}
.faq{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--char);padding:1rem 0}
summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none}summary:after{content:"+";float:right;color:var(--rust)}details[open] summary:after{content:"–"}
details p{margin-top:.6rem;color:#cfc7b6}
.story{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:center;background:var(--bg2);border-block:1px solid var(--char)}
.story-num{font-size:clamp(8rem,22vw,16rem);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--bone);text-shadow:8px 8px 0 var(--rust);text-align:center}
.story p{margin:.8rem 0;font-size:1.1rem}.story b{color:var(--rust)}
.notify{text-align:center}
footer{text-align:center;padding:2.5rem 5vw;border-top:1px solid var(--char);font-family:Mono;font-size:13px}
@media(max-width:860px){
  nav{display:none}
  .hero,.gift,.story{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:3rem}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .gift-art{margin-bottom:2rem}
}
@media(max-width:480px){form{flex-direction:column}.steps{grid-template-columns:1fr}.countdown b{font-size:1.9rem}}
.shipnote{margin-top:1.6rem;font-family:Mono,monospace;font-size:13px;color:var(--mute);border-left:3px solid var(--rust);padding-left:.8rem}

/* v2 */
.logo{display:flex;align-items:center;gap:.5rem}.logo img{width:56px;height:auto}.logo span{color:var(--bone);font-size:1.1rem;letter-spacing:.06em}
.gift-art{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}.gift-art img{width:100%;border-radius:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem}
.card{position:relative;display:flex;flex-direction:column}.card-body{display:flex;flex-direction:column;flex:1;gap:.6rem;padding-top:.8rem}.card-body .btn{margin-top:auto}
.card-img{aspect-ratio:1/1;overflow:hidden;background:#d9d4cc;border-radius:6px}.card-img img{width:100%;height:100%;object-fit:cover}
.card-img.duo{display:grid;grid-template-columns:1fr 1fr}.card-img.duo img{object-fit:cover;padding:0}
.story-badge{width:100%;max-width:420px;margin:auto}
footer{text-align:center}footer img{margin:0 auto 1rem}
.notify .btn{margin-top:1rem}
@media(max-width:620px){nav{display:none}.gift-art{grid-template-columns:1fr 1fr}}
.card-img img{object-fit:contain}
@media(min-width:900px){.grid{grid-template-columns:repeat(6,1fr)}.card{grid-column:span 2}.card:nth-child(-n+2){grid-column:span 3}.card:nth-child(-n+2) .card-img{aspect-ratio:4/3}}

body:not(.hats-on) .hats-only{display:none!important}body.hats-on .tee-only{display:none!important}
.teaser .card-img{display:grid;place-items:center;background:var(--bg2)}.teaser .card-img img{width:80%;height:auto}

/* v3: product stage, logo */
.logo img{width:84px}.logo .wm{display:flex;flex-direction:column;line-height:1}.logo .wm b{font-weight:400;font-size:1.55rem;letter-spacing:.04em;color:var(--bone)}.logo .wm small{font-family:Mono,monospace;font-size:.72rem;letter-spacing:.3em;color:var(--rust);margin-top:.25rem}
.nav{padding:.6rem 5vw}
.stage{position:relative;margin:0;background:radial-gradient(ellipse at 50% 40%,#3b332d 0%,#1d1915 55%,#110e0c 100%);border:1px solid #2a231e;border-radius:10px;display:grid;place-items:center;padding:6%;overflow:hidden}
.stage img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))}
.stage figcaption{position:absolute;left:12px;bottom:10px;font-family:Mono,monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.hero-art.stage{aspect-ratio:1/1;padding:4%}
.card-img.stage{background:radial-gradient(ellipse at 50% 40%,#3b332d 0%,#1d1915 55%,#110e0c 100%);aspect-ratio:1/1}
.swap{cursor:pointer}.swap img{grid-area:1/1;transition:opacity .35s}.swap .f{opacity:0}.swap:hover .f,.swap.flipped .f{opacity:1}.swap:hover .b,.swap.flipped .b{opacity:0}
.swap-hint{position:absolute;bottom:10px;right:12px;font-family:Mono,monospace;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.1em}
.sizes{font-family:Mono,monospace;font-size:13px;color:var(--mute)}
@media(max-width:620px){.logo img{width:64px}.logo .wm b{font-size:1.25rem}.logo .wm small{font-size:.62rem}}
.hero-art.stage img{border:0;background:none;box-shadow:none;padding:0;outline:0}
.was{opacity:.6;text-decoration:line-through;text-decoration-thickness:2px;margin-right:.3em;font-weight:inherit}
/* v4: badge-led hero, text-only nav wordmark */
.hero-badge{margin:.6rem 0 1.4rem;line-height:0}
.hero-badge img{display:block;width:clamp(260px,32vw,420px);height:auto}
.logo{display:flex;align-items:center;gap:0}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font-size:1.6rem;letter-spacing:.06em}
.logo .wm small{font-size:.78rem;letter-spacing:.42em;margin-top:.3rem;color:var(--ember,#c0472a)}
@media(max-width:640px){.hero-badge{margin:.4rem auto 1.2rem}.hero-badge img{width:260px;margin:0 auto}.logo .wm b{font-size:1.3rem}.logo .wm small{font-size:.66rem;letter-spacing:.36em}}
/* v5: centered wordmark + centered hero column */
.logo .wm{align-items:center;text-align:center}
.logo .wm b{letter-spacing:.06em;padding-left:.06em}
.logo .wm small{letter-spacing:.5em;padding-left:.5em;font-size:.78rem}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-copy .kicker{padding-left:.2em}
.hero-badge,.hero-badge img{margin-left:auto;margin-right:auto}
.hero-copy .lede{margin-left:auto;margin-right:auto;max-width:34em}
.hero-copy .cta-row{justify-content:center}
.hero-copy .shipnote{border-left:0;padding-left:0}
@media(max-width:640px){.logo .wm small{font-size:.66rem;letter-spacing:.42em;padding-left:.42em}}
/* v6: hat teaser */
.hat-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:8% 6% 6%}
.hat-stage .hat-main{width:82%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.hat-thumbs{display:flex;gap:6%;justify-content:center;width:100%}
.hat-thumbs img{width:38%;height:auto;opacity:.92;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.soon{position:absolute;top:12px;left:12px;background:var(--rust,#b5462c);color:#f1e7d6;font:700 12px/1 inherit;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:3px;z-index:2}
.teaser .card-img.hat-stage{display:flex;aspect-ratio:auto;height:auto;overflow:visible}
.teaser .hat-stage img.hat-main{width:66%}
.teaser .hat-thumbs img{width:34%}
.soon{font-size:11px;padding:6px 9px}
footer img{width:140px;height:auto;display:block;margin:0 auto 1rem}
/* v7: hat picker */
.teaser .hat-stage{padding:13% 5% 5%;gap:1rem;background:radial-gradient(ellipse 70% 55% at 50% 45%,#2a2420 0%,var(--bg2) 70%)}
.teaser .hat-main-wrap{position:relative;width:100%;display:flex;justify-content:center}
.teaser .hat-main-wrap::after{content:"";position:absolute;left:22%;right:22%;bottom:5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);z-index:0}
.teaser .hat-stage img.hat-main{position:relative;z-index:1;width:88%;max-width:520px;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));transition:opacity .2s}
.hat-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%}
.hat-pick button{position:relative;background:radial-gradient(ellipse 80% 60% at 50% 50%,#26201c,#151210);border:1px solid #2e2823;border-radius:8px;padding:.5rem .4rem .55rem;cursor:pointer;color:#cfc3b0;display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:border-color .15s}
.hat-pick button img{width:100%!important;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.hat-pick button span{font:700 11px/1 inherit;letter-spacing:.12em;text-transform:uppercase}
.hat-pick button.on,.hat-pick button:hover{border-color:var(--rust,#b5462c);color:#f1e7d6}
.hat-pick button:focus-visible{outline:2px solid var(--rust,#b5462c);outline-offset:2px}
.hat-pick{grid-template-columns:repeat(3,minmax(0,1fr))}
.hat-pick button span{white-space:nowrap}
@media(max-width:520px){.hat-pick{gap:.4rem}.hat-pick button{padding:.4rem .2rem .5rem}.hat-pick button span{font-size:10px;letter-spacing:.06em}}
/* v8: matched tee + hat cards */
.teaser .hat-stage{aspect-ratio:auto!important}
.teaser .hat-main-wrap{aspect-ratio:760/640;align-items:flex-end}
.teaser .hat-stage img.hat-main{width:auto;max-width:100%;height:100%;object-fit:contain}
.hat-pick{display:flex;justify-content:center;gap:.6rem}
.hat-pick button{flex:0 0 calc((100% - 1.2rem)/3)}
.hat-pick button img{aspect-ratio:760/640;object-fit:contain}
.teaser .card-body h3{min-height:0}
.teaser .hat-main-wrap{display:block;width:100%;max-width:560px;margin:0 auto}
.teaser .hat-stage img.hat-main{position:absolute;inset:0;width:100%!important;max-width:none;height:100%!important;object-fit:contain;object-position:50% 100%}
.hat-pick button img{height:auto!important}
html{scroll-padding-top:72px}