/* Layout: editorial storefront. Thin announcement bar, three-zone sticky header (menu, wordmark, icons),
   full-bleed hero with an oversized wordmark, a ticker, a 2/3-column collection grid with placeholder images,
   a made-to-order split, an inverted Simple Wear band, and a large-wordmark footer. Strictly black, white and grey. */
:root{
  --bg:#FFFFFF; --ink:#0A0A0A; --muted:#6A6A6A; --line:#E4E4E4; --soft:#F0F0F0;
  --band-bg:#0A0A0A; --band-fg:#FFFFFF; --band-muted:#A8A8A8; --band-line:#2B2B2B;
  --hero-bg:#0A0A0A; --hero-fg:#FFFFFF; --scrim:rgba(0,0,0,.5); --danger:#B00020;
  --display:'Archivo','Arial Narrow',Arial,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --ink:#F5F5F5; --muted:#9C9C9C; --line:#2A2A2A; --soft:#181818;
    --band-bg:#F5F5F5; --band-fg:#0A0A0A; --band-muted:#5B5B5B; --band-line:#D6D6D6;
    --scrim:rgba(0,0,0,.7); --danger:#FF8A80; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --ink:#F5F5F5; --muted:#9C9C9C; --line:#2A2A2A; --soft:#181818;
  --band-bg:#F5F5F5; --band-fg:#0A0A0A; --band-muted:#5B5B5B; --band-line:#D6D6D6;
  --scrim:rgba(0,0,0,.7); --danger:#FF8A80; color-scheme:dark;
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
h1,h2,h3,p,figure,ol,ul,dl{margin:0}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.caps{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.h2{font-family:var(--display);font-stretch:100%;font-weight:500;font-size:clamp(1.75rem,4vw,3rem);letter-spacing:.01em;text-transform:uppercase;line-height:1.05}
.h3{font-family:var(--display);font-weight:600;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase}
.lede{color:var(--muted);max-width:42rem;font-size:1.0625rem}

.announce{background:var(--band-bg);color:var(--band-fg);text-align:center;font-size:.75rem;letter-spacing:.08em}
.announce .wrap{padding-block:9px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px}
.left{display:flex;align-items:center}
.right{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.mark{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:none;gap:28px}
.nav a{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--ink)}
.iconbtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer}
.iconbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:5px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.6875rem;font-weight:600;display:grid;place-items:center}
.mnav{display:grid;border-top:1px solid var(--line)}
.mnav a{padding:16px max(16px,env(safe-area-inset-left,0px));text-decoration:none;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
@media (min-width:900px){.nav{display:flex}.menu,.mnav{display:none!important}.mark{font-size:.8125rem}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;border:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-light{background:var(--hero-fg);color:var(--hero-bg);border-color:var(--hero-fg)}
.btn-light:hover{background:transparent;color:var(--hero-fg)}
.btn-band{background:var(--band-fg);color:var(--band-bg);border-color:var(--band-fg)}
.btn-band:hover{background:transparent;color:var(--band-fg)}
.btn-block{width:100%}
.link{background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* placeholders */
.ph{position:relative;display:block;width:100%;aspect-ratio:var(--ratio,4/5);background:var(--soft);color:var(--muted);overflow:hidden;transition:transform .7s var(--ease)}
.ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph svg path{fill:none;stroke:currentColor;stroke-width:1;opacity:.32;vector-effect:non-scaling-stroke}
.ph>span{position:absolute;left:12px;bottom:10px;right:12px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ph.mini>span{display:none}
.ph.inv{background:var(--band-bg);color:var(--band-muted)}
.ph.band{background:var(--band-line);color:var(--band-muted)}

/* hero */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(480px,58vw,740px);background:radial-gradient(120% 90% at 72% 8%,#2c2c2c,var(--hero-bg) 62%);color:var(--hero-fg);overflow:hidden}
.hero-ph{position:absolute;inset:0;width:100%;height:100%}
.hero-ph path{fill:none;stroke:var(--hero-fg);stroke-width:1;opacity:.12;vector-effect:non-scaling-stroke}
.hero-tag{position:absolute;top:18px;right:max(16px,env(safe-area-inset-right,0px));font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.hero-in{position:relative;padding-block:56px 44px;display:grid;gap:28px}
.hero h1{font-stretch:125%;font-weight:800;font-size:clamp(2.5rem,9.4vw,8.25rem);line-height:.92;letter-spacing:-.015em;text-transform:uppercase;animation:rise .9s var(--ease) both}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;animation:rise .9s .15s var(--ease) both}
.hero-row p{max-width:30rem;opacity:.85}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.strip{overflow:hidden;border-bottom:1px solid var(--line);white-space:nowrap}
.strip-track{display:inline-flex;animation:marq 42s linear infinite}
.strip-group{display:inline-flex;gap:44px;padding:16px 44px 16px 0;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
@keyframes marq{to{transform:translateX(-50%)}}

section.block{padding-block:clamp(56px,9vw,112px)}
.head{display:grid;gap:18px;margin-bottom:36px}
.tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:6px}
.tab{background:none;border:0;border-bottom:1px solid transparent;padding:12px 0;cursor:pointer;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);transition:color .2s,border-color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 28px}}
.card{display:flex;flex-direction:column;gap:14px;min-width:0;text-decoration:none}
.card-img{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.card:hover .ph,.card-img:hover .ph{transform:scale(1.035)}
.peek{position:absolute;inset:auto 0 0;padding:13px;text-align:center;background:var(--ink);color:var(--bg);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transform:translateY(101%);transition:transform .4s var(--ease)}
.card-img:hover .peek,.card-img:focus-visible .peek{transform:none}
.card-meta{display:grid;gap:2px;font-size:.9375rem}
.price{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.card-meta .price{color:var(--muted)}

.split{display:grid;gap:56px}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:96px;align-items:start}.fig{position:sticky;top:104px}}
.steps{list-style:none;padding:0;margin-top:36px;counter-reset:s;border-bottom:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.8125rem;letter-spacing:.1em;padding-top:2px}
.steps b{display:block;font-weight:600}
.steps span{color:var(--muted)}
.fees{width:100%;border-collapse:collapse;margin-top:16px}
.fees td{padding:13px 0;border-bottom:1px solid var(--line)}
.fees td:last-child{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tablewrap{margin-top:56px;overflow-x:auto}
.note{color:var(--muted);font-size:.9375rem;margin-top:14px}
.fig figcaption{margin-top:12px;color:var(--muted);font-size:.8125rem}

.band{background:var(--band-bg);color:var(--band-fg)}
.band .wrap{padding-block:clamp(56px,9vw,112px);display:grid;gap:44px}
.band-head{display:grid;gap:20px}
@media (min-width:900px){.band-head{grid-template-columns:1.2fr .8fr;align-items:end;gap:72px}}
.band .big{font-stretch:125%;font-weight:800;font-size:clamp(2.5rem,8vw,6.5rem);line-height:.92;letter-spacing:-.015em;margin-top:16px}
.band p{color:var(--band-muted);max-width:34rem}
.tag{display:inline-block;padding:5px 12px;border:1px solid currentColor;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.tag.solid{background:var(--band-fg);color:var(--band-bg);border-color:var(--band-fg)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.band-cta .tlink{color:var(--band-fg)}

details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.25rem;line-height:1;font-weight:400}
details[open] summary::after{content:"\2212"}
details>div{padding:0 0 22px;color:var(--muted);max-width:44rem}
details ul{margin:0;padding-left:20px;display:grid;gap:6px}
.terms-list{margin-top:12px}

footer{background:var(--band-bg);color:var(--band-fg)}
footer .wrap{padding-block:64px 36px;display:grid;gap:48px}
.foot-cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));font-size:.9375rem;color:var(--band-muted)}
.foot-cols b{display:block;color:var(--band-fg);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.foot-cols a{color:var(--band-fg)}
.wordmark{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.9rem,8.4vw,7.5rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.fine{color:var(--band-muted);font-size:.75rem;letter-spacing:.08em}

/* drawer: product, cart, checkout, login */
#overlay{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;justify-content:flex-end}
#panel{width:min(520px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;animation:slide .35s var(--ease)}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#panel,.hero h1,.hero-row{animation:none}.strip-track{animation:none}html{scroll-behavior:auto}.ph,.peek{transition:none}}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.p-head h2{font-size:.8125rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.icon{width:44px;height:44px;border:0;background:none;font-size:1.75rem;line-height:1;cursor:pointer}
.p-body{flex:1;overflow-y:auto;padding:22px max(20px,env(safe-area-inset-right,0px)) 22px max(20px,env(safe-area-inset-left,0px));display:grid;gap:22px;align-content:start}
.p-foot{border-top:1px solid var(--line);padding:16px max(20px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:grid;gap:12px;background:var(--bg)}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field>span,.field>legend{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:0}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:0;background:var(--bg);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:92px;resize:vertical}
.hint{color:var(--muted);font-size:.875rem}
.err{color:var(--danger);font-size:.875rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.opt{display:grid;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--bg);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.opt:hover{border-color:var(--ink)}
.opt span{color:var(--muted);font-size:.8125rem}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opt[aria-pressed="true"] span{color:inherit;opacity:.75}
.drop{display:flex;align-items:center;justify-content:center;min-height:60px;border:1px dashed var(--muted);cursor:pointer;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-align:center;padding:10px}
.drop:focus-within,.drop:hover{border-color:var(--ink);background:var(--soft)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{position:relative;width:68px;height:68px}
.thumb img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);filter:grayscale(1)}
.thumb button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;line-height:1}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:44px;height:44px;border:0;background:none;font-size:1.25rem;cursor:pointer}
.qty output{min-width:36px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--line)}
.line .th{width:72px;height:72px;overflow:hidden;background:var(--soft)}
.line .th img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.line b{display:block;font-weight:600}
.line small{color:var(--muted)}
.line .rm{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px 0;font-size:.875rem}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.sum{display:grid;gap:6px;font-variant-numeric:tabular-nums;font-size:.9375rem}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .big{font-family:var(--display);font-weight:700;font-size:1.125rem;padding-top:10px;border-top:1px solid var(--line)}
.sum .due{background:var(--soft);padding:10px 14px;font-weight:600}
.box{background:var(--soft);padding:14px 16px;font-size:.9375rem}
.track{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.track li{display:flex;gap:12px;align-items:center;color:var(--muted)}
.track li::before{content:"";width:12px;height:12px;border-radius:50%;border:1px solid var(--muted);flex:none}
.track li.on{color:var(--ink);font-weight:600}
.track li.on::before{background:var(--ink);border-color:var(--ink)}
.ordno{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.75rem;letter-spacing:.02em}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bg);padding:12px 20px;font-size:.8125rem;letter-spacing:.08em;max-width:calc(100% - 32px)}