/* ============================================================
   22PURSUIT — store styles
   Dark-brown vintage palette. Edit the tokens in :root to reskin.
   ============================================================ */
:root{
  --void:#0B0805; --void-2:#120D07; --panel:#17110A; --panel-2:#1F1710;
  --brown:#3A2A18; --brown-line:#4A3620;
  --brass:#C79A54; --brass-hi:#E6B96A; --silver:#D8CDBA;
  --cream:#EBDFC6; --muted:#9A8768; --faint:#6E5F49;
  --shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--void); color:var(--cream);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.6; overflow-x:hidden; position:relative; -webkit-font-smoothing:antialiased;}
img{max-width:100%}

#stars{position:fixed; inset:0; z-index:0; display:block}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
.glow{position:fixed; z-index:0; width:70vmax; height:70vmax; border-radius:50%; filter:blur(90px); pointer-events:none;
  background:radial-gradient(circle, rgba(199,154,84,.14), transparent 62%); top:-26vmax; left:50%; transform:translateX(-50%);}
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:0 clamp(18px,5vw,40px)}

h1,h2,h3{font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; margin:0; letter-spacing:.02em; line-height:.94}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.eyebrow{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--brass)}
a{color:var(--brass-hi); text-decoration:none}

.th{display:inline-grid; place-items:center; font-family:"Bebas Neue",sans-serif; color:var(--silver);
  border:1.5px solid var(--brass); border-radius:4px; letter-spacing:-.06em; line-height:1; text-shadow:0 0 14px rgba(216,205,186,.25)}
.th.sm{width:38px; height:38px; font-size:22px}
.th.lg{width:96px; height:96px; font-size:58px; border-width:2px}

nav{position:relative; z-index:3; display:flex; align-items:center; justify-content:flex-start; max-width:1080px; margin:0 auto; padding:18px clamp(18px,5vw,40px)}
.navlinks{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.navlinks a{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.navlinks a:hover{color:var(--brass-hi)}
@media(max-width:520px){ .navlinks{gap:14px} .navlinks a{font-size:11px} }

/* HERO */
.hero{text-align:center; padding:clamp(40px,8vw,90px) 0 clamp(30px,6vw,56px)}
.hero .kick{justify-content:center; display:flex; gap:14px; align-items:center; margin-bottom:24px}
.hero .kick .line{height:1px; width:46px; background:var(--brown-line)}
.hero h1{font-size:clamp(70px,16vw,180px); color:var(--cream); text-shadow:0 0 48px rgba(230,185,106,.24)}
.hero h1 b{color:var(--brass)}
.hero .tag{font-family:"Space Mono",monospace; color:var(--muted); font-size:clamp(12px,1.7vw,15px); letter-spacing:.18em; text-transform:uppercase; margin-top:14px}
.hero .lede{color:var(--cream); opacity:.8; max-width:52ch; margin:22px auto 32px; font-size:17px}
.cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center}
.btn-ghost{font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream);
  border:1px solid var(--brown-line); padding:15px 24px; border-radius:3px; transition:border-color .15s,color .15s; cursor:pointer; background:none}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass-hi)}
.btn-solid{font-family:"Space Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass)); color:#241706; padding:16px 26px; border-radius:3px;
  box-shadow:0 12px 30px -12px rgba(199,154,84,.5); transition:transform .15s,box-shadow .15s; cursor:pointer; border:none}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(230,185,106,.6)}

section{padding:clamp(38px,6vw,64px) 0; position:relative}
.rule{border:none; border-top:1px solid var(--brown-line); opacity:.5; margin:0}
.sechead{display:flex; align-items:baseline; gap:16px; margin-bottom:26px}
.sechead h2{font-size:clamp(34px,5.5vw,54px); color:var(--cream)}
.sechead .no{font-family:"Space Mono",monospace; color:var(--brass); font-size:12px; letter-spacing:.2em; text-transform:uppercase}

/* NEWSLETTER + TRACK panels */
.letter{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--brown-line); border-radius:12px; padding:clamp(30px,5vw,52px); text-align:center}
.letter .badge{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass)}
.letter h2{font-size:clamp(40px,7vw,72px); color:var(--cream); margin:12px 0 10px}
.letter p{color:var(--muted); max-width:52ch; margin:0 auto 26px}
.subrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:480px; margin:0 auto}
.subrow input{flex:1; min-width:220px; background:var(--void); border:1px solid var(--brown-line); color:var(--cream); font-family:"Space Mono",monospace; font-size:14px; padding:15px 16px; border-radius:3px}
.subrow input:focus{outline:none; border-color:var(--brass)}
.subnote{font-family:"Space Mono",monospace; font-size:11px; color:var(--faint); margin-top:14px; letter-spacing:.06em}

/* I HAVE SOMETHING TO SAY / MY PURSUIT */
.say-intro{color:var(--cream); opacity:.85; max-width:60ch; margin:0 auto 28px; font-size:16px}
.say-intro em{color:var(--brass-hi); font-style:normal}
.pursuit-form{max-width:620px; margin:0 auto; text-align:left}
.anon-row{display:flex; align-items:center; justify-content:center; gap:10px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; cursor:pointer}
.anon-row input{width:16px; height:16px; accent-color:var(--brass); cursor:pointer}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .field-grid{grid-template-columns:1fr} }
.name-field,.from-field{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.field input,.field select,.field textarea{width:100%; background:var(--void); border:1px solid var(--brown-line); color:var(--cream); font-family:"Space Mono",monospace; font-size:14px; padding:13px 14px; border-radius:3px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass)}
.field textarea{resize:vertical; line-height:1.55}
.field.dim{opacity:.4}
.share-choice{border:1px solid var(--brown-line); border-radius:8px; padding:14px 18px 16px; margin-bottom:22px; background:var(--void)}
.share-choice legend{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); padding:0 8px}
.share-choice label{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--cream); opacity:.9; padding:7px 0; cursor:pointer; line-height:1.4}
.share-choice input{margin-top:2px; accent-color:var(--brass); width:16px; height:16px; flex:none; cursor:pointer}
.share-choice strong{color:var(--brass-hi); font-weight:700}
.pursuit-form .btn-solid{width:100%; margin-top:6px}
.pursuit-form .subnote{text-align:center}

/* CHECKOUT MODAL */
.checkout-modal{position:fixed; inset:0; z-index:100; background:rgba(6,4,2,.74); display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto}
.checkout-box{position:relative; width:100%; max-width:560px; margin:auto; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--brown-line); border-radius:14px; padding:clamp(22px,4vw,34px); box-shadow:var(--shadow)}
.checkout-close{position:absolute; top:10px; right:14px; background:none; border:none; color:var(--muted); font-size:28px; line-height:1; cursor:pointer}
.checkout-close:hover{color:var(--brass-hi)}
.checkout-box .badge{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass)}
.checkout-box h2{font-family:"Bebas Neue",sans-serif; font-size:clamp(32px,5vw,48px); color:var(--cream); margin:8px 0 4px; line-height:.95}
.co-summary{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.05em; color:var(--brass-hi); margin:0 0 20px}
.checkout-box .pursuit-form{max-width:none}
.co-error{background:rgba(150,45,32,.2); border:1px solid #7a3b2a; color:#f0c9bd; font-family:"Space Mono",monospace; font-size:12.5px; padding:10px 12px; border-radius:6px; margin-bottom:14px}

/* COLLECTION banner */
.collection{display:flex; align-items:center; gap:22px; background:linear-gradient(120deg,var(--panel),transparent); border:1px solid var(--brown-line); border-left:3px solid var(--brass); border-radius:10px; padding:22px 26px; margin-bottom:22px}
@media(max-width:560px){ .collection{flex-direction:column; text-align:center} }
.collection .meta .l{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.collection .meta h3{font-family:"Bebas Neue",sans-serif; font-size:44px; color:var(--cream); line-height:.9; margin:6px 0}
.collection .meta p{font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); letter-spacing:.06em; margin:0}

/* SHOP */
.shopgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){ .shopgrid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .shopgrid{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--brown-line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.shot{aspect-ratio:1/1; background:radial-gradient(circle at 50% 40%, #1c1510, #0c0906 75%); display:grid; place-items:center; position:relative; overflow:hidden}
.shot img.prod{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.shot .th{border-color:#5a4326}
.shot .ph{position:absolute; bottom:10px; left:0; right:0; text-align:center; font-family:"Space Mono",monospace; font-size:10px; color:var(--faint); letter-spacing:.12em}
/* product gallery thumbnails */
.thumbs{display:flex; gap:8px; padding:10px 10px 0}
.thumb{flex:1; aspect-ratio:1/1; padding:0; border:1px solid var(--brown-line); border-radius:6px; overflow:hidden; background:radial-gradient(circle at 50% 40%, #1c1510, #0c0906 75%); cursor:pointer; transition:border-color .12s}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb:hover{border-color:var(--brass)}
.thumb.active{border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset}

.card .body{padding:20px; display:flex; flex-direction:column; gap:14px; flex:1}
.card .name{font-family:"Bebas Neue",sans-serif; font-size:30px; color:var(--cream); line-height:.95}
.card .name small{display:block; font-family:"Space Mono",monospace; font-size:10px; color:var(--brass); letter-spacing:.16em; text-transform:uppercase; margin-top:6px}
.soon-copy{color:var(--faint); font-size:12px; margin:0}
.card-desc{color:var(--muted); font-size:12.5px; line-height:1.5; margin:0; font-family:"Space Mono",monospace}
.sizes{display:flex; gap:6px; flex-wrap:wrap}
.sizes button{font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); background:none; border:1px solid var(--brown-line); border-radius:3px; padding:7px 11px; cursor:pointer; transition:all .12s}
.sizes button:hover{border-color:var(--brass); color:var(--cream)}
.sizes button[aria-pressed="true"]{background:var(--brass); color:var(--void); border-color:var(--brass); font-weight:700}
.buyrow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.price{font-family:"Bebas Neue",sans-serif; font-size:32px; color:var(--cream)}
.soon{opacity:.55}
.soon .name{color:var(--muted)}

/* MANIFESTO */
.manifesto{text-align:center; max-width:780px; margin:0 auto}
.manifesto .q{font-family:"Bebas Neue",sans-serif; font-size:clamp(40px,7vw,80px); color:var(--cream); line-height:1.0; text-wrap:balance}
.manifesto .q em{color:var(--brass-hi); font-style:normal}
.manifesto p{color:var(--muted); margin-top:20px; font-size:16px; font-family:"Space Mono",monospace; letter-spacing:.08em}

/* FOOTER */
footer{border-top:1px solid var(--brown-line); margin-top:20px}
.foot{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; padding:46px 0 18px}
.foot .col h4{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 14px}
.foot-right{text-align:right}
.contactlink{display:flex; align-items:center; gap:11px; color:var(--cream); font-size:15px; margin-bottom:12px; transition:color .15s}
.contactlink:hover{color:var(--brass-hi)}
.contactlink .ic{width:30px; height:30px; border:1px solid var(--brown-line); border-radius:50%; display:grid; place-items:center; color:var(--brass); flex:none}
.tag-lg{font-family:"Bebas Neue",sans-serif; font-size:56px; color:var(--brown); letter-spacing:.05em; line-height:.8}
.tag-lg b{color:#5a4326}
.legal{font-family:"Space Mono",monospace; font-size:11px; color:var(--faint); padding:14px 0 40px; letter-spacing:.05em; max-width:74ch}

@media (prefers-reduced-motion:reduce){ .btn-solid{transition:none} }

/* WELCOME / PILLARS */
.welcome{padding-top:clamp(18px,3vw,30px)}
.welcome-lead{text-align:center; font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 24px}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){ .pillars{grid-template-columns:1fr} }
.pillar{display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--brown-line); border-radius:12px; padding:24px; transition:border-color .15s, transform .15s}
.pillar:hover{border-color:var(--brass); transform:translateY(-3px)}
.pillar-no{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.2em; color:var(--faint)}
.pillar h3{font-family:"Bebas Neue",sans-serif; font-size:34px; color:var(--cream); line-height:.95; margin:0}
.pillar p{color:var(--muted); font-size:14px; margin:0; flex:1}
.pillar-go{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-hi)}
.enter-row{text-align:center; margin-top:34px}

/* COOKIE BANNER */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--panel-2); border-top:1px solid var(--brown-line); box-shadow:0 -20px 50px -20px rgba(0,0,0,.9)}
.cookie-inner{max-width:1080px; margin:0 auto; padding:16px clamp(18px,5vw,40px); display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cookie-inner p{margin:0; color:var(--cream); opacity:.85; font-size:13px; max-width:66ch}
.cookie-inner a{color:var(--brass-hi)}
.cookie-btns{display:flex; gap:10px; flex:none; flex-wrap:wrap}
.cookie-banner .btn-ghost, .cookie-banner .btn-solid{padding:12px 18px; font-size:12px}

/* LEGAL PAGES */
.legal-page{position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 clamp(18px,5vw,40px) 90px}
.legal-head{padding:30px 0 10px}
.legal-page h1{font-family:"Bebas Neue",sans-serif; font-size:clamp(44px,8vw,82px); color:var(--cream); line-height:.9; margin:14px 0 0}
.legal-page .updated{font-family:"Space Mono",monospace; font-size:12px; color:var(--faint); letter-spacing:.06em; margin-top:10px}
.legal-page h2{font-family:"Bebas Neue",sans-serif; font-size:clamp(26px,4vw,38px); color:var(--brass-hi); margin:36px 0 8px; letter-spacing:.02em}
.legal-page h3{font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin:22px 0 8px}
.legal-page p,.legal-page li{color:var(--cream); opacity:.86; font-size:15.5px; line-height:1.7}
.legal-page ul{padding-left:20px; margin:10px 0}
.legal-page li{margin-bottom:6px}
.legal-page a{color:var(--brass-hi); text-decoration:underline}
.legal-page .note{background:var(--panel); border:1px solid var(--brown-line); border-left:3px solid var(--brass); border-radius:8px; padding:16px 18px; margin:22px 0; font-size:14px; opacity:1}
.legal-page .note p{opacity:.92; font-size:14px}
.legal-page table{width:100%; border-collapse:collapse; margin:14px 0}
.legal-page th,.legal-page td{border:1px solid var(--brown-line); padding:10px 12px; text-align:left; color:var(--cream); opacity:.9; vertical-align:top; font-size:14px}
.legal-page th{color:var(--brass); font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.back-home{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.back-home:hover{color:var(--brass-hi)}