@font-face{font-family:GravityDisplay;src:url('./assets/fonts/Anton-Regular.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Archivo;src:url('./assets/fonts/Archivo-var.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Space Mono';src:url('./assets/fonts/SpaceMono-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--color-bg:#f8f8f6;--color-surface:#fff;--color-surface-2:#eeeeeb;--color-text:#151515;--color-muted:#555;--color-border:#d8d8d4;--color-accent:#e3dacd;--radius-lg:2px;--radius-md:2px;--font-display:GravityDisplay,Impact,sans-serif}
[data-theme=dark]{--color-bg:#151515;--color-surface:#202020;--color-surface-2:#292929;--color-text:#f7f7f3;--color-muted:#bcbcb6;--color-border:#41413d;--color-accent:#e3dacd}
img{max-width:100%;height:auto}
.wrap{width:min(calc(100% - 56px),1600px)}
.header{background:#111e;color:#fff;border-color:#ffffff28;backdrop-filter:blur(14px)}
.header__row{height:72px}
.header .brand .mark,.header .brand__word,.footer .brand .mark,.footer .brand__word{display:none}
.header .brand,.footer .brand{width:230px;height:48px;background:url('./assets/reference-wordmark.webp?v=clarity2') center/contain no-repeat;flex-shrink:0}
.nav{gap:clamp(14px,2vw,30px);font-size:11px;text-transform:uppercase;letter-spacing:.035em}
.header .icon-btn{color:white}
.header .icon-btn:hover{background:#ffffff20}
.cart-btn{background:transparent;color:white;padding:0 8px;border-radius:0;font-size:12px}
.cart-count{background:#e3dacd;color:#111}
.menu-btn{display:none}
.mobile-nav{position:sticky;top:64px;z-index:39;background:#151515;color:#fff;padding:12px 22px;border-bottom:1px solid #666}
.mobile-nav:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-nav a{font-size:13px;padding:12px 0;text-transform:uppercase}
.hero{position:relative;display:block;min-height:560px;height:clamp(530px,47vw,720px);overflow:hidden;background:#101010;color:white}
.hero__media{position:absolute;inset:0 12.5% 0 43%;height:auto}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero:after{content:"";position:absolute;inset:0 12.5% 0 0;background:linear-gradient(90deg,#0c0c0c 0%,#101010f5 28%,#10101090 48%,transparent 67%);pointer-events:none}
.hero__copy{position:relative;z-index:2;padding:clamp(45px,5vw,80px) 0 30px clamp(28px,3.7vw,60px);width:62%;background:none;display:block}
.hero .kicker{color:#eee;font-size:9px;letter-spacing:.24em;margin-bottom:20px}
.hero__title{font-family:GravityDisplay,Impact,sans-serif;font-weight:400;font-stretch:normal;font-size:clamp(64px,7.5vw,118px);line-height:1.02;letter-spacing:-.025em;text-transform:uppercase;margin:0}
.hero__title span{font-size:.81em;color:#e3dacd;white-space:nowrap}
.hero__lede{max-width:490px;font-size:clamp(16px,1.5vw,21px);line-height:1.4;color:#eee;margin:18px 0 25px}
.btn{border-radius:1px;min-height:46px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:0 26px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn--primary{background:#fff;color:#111;gap:22px}
.hero .btn--ghost{border:1px solid #ccc;color:white;background:#1117}
.btn:hover{transform:translateY(-2px)}
.hero__details{display:flex;gap:25px;margin-top:32px;max-width:600px}
.hero__details span{font-size:8px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;color:#ddd;border-left:1px solid #777;padding-left:12px}
.hero__details b{display:block;font-size:10px;color:#fff}
.hero__rail{position:absolute;right:0;top:0;bottom:0;width:12.5%;display:grid;grid-template-rows:1fr 1fr 1fr;gap:3px;z-index:3;background:#ddd}
.hero__rail img{width:100%;height:100%;min-height:0;object-fit:cover}
.hero__rail img:nth-child(2){object-position:center top}
.hero__ticker{display:none}
.size-banner{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-accent);color:var(--ink);font-size:var(--text-xs);line-height:1.5;text-align:center;letter-spacing:.025em}
.size-banner strong{font-weight:800}
.fit-range{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2);padding:0;margin:var(--space-6) 0}
.fit-range li{border:1px solid var(--color-border);padding:var(--space-2);text-align:center;font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.category-strip{padding:5px 10px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--color-bg)}
.category-tile{position:relative;min-height:250px;overflow:hidden;background:#151515;color:white}
.category-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease}
.category-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,#000a 70%,#000e)}
.category-tile:hover>img{transform:scale(1.055)}
.category-tile>div{position:absolute;bottom:20px;left:22px;right:14px;z-index:1}
.category-tile h2{font:400 clamp(21px,2vw,29px)/1.05 GravityDisplay,sans-serif;text-transform:uppercase;margin:0 0 8px}
.category-tile p{font-size:10px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.category-tile span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.featured{padding-block:30px 20px}
.featured__head{display:flex;align-items:end;gap:32px;margin-bottom:20px}
.featured__head .kicker{font-size:9px;margin-bottom:9px;color:var(--color-text)}
.featured h2{font-family:Archivo,sans-serif;font-size:clamp(22px,2.4vw,34px);font-weight:850;text-transform:uppercase;letter-spacing:.07em;line-height:1.1}
.featured__head>p{font-size:12px;line-height:1.5;padding-left:20px;border-left:1px solid var(--color-border);max-width:310px;margin-bottom:0}
.featured__arrows{display:flex;gap:8px;margin-left:auto}
.featured__arrows button{width:34px;height:34px;border:1px solid var(--color-border);border-radius:50%}
.featured__arrows button:hover{background:var(--color-text);color:var(--color-bg)}
.featured__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 16px)/6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:10px;list-style:none}
.featured__track .card{scroll-snap-align:start}
.featured__track .card__row{display:block}
.featured__track .card__price{margin-top:5px}
.featured__track .card__name{font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.featured__track .card__color{font-size:10px;margin-top:4px}
.featured__track .card__tag{font-size:8px;padding:3px 6px;bottom:auto;top:8px;left:8px;border-radius:0}
.card__img{border-radius:1px;background:#efefec}
.card__img img{object-fit:contain}
.card__tag{border-radius:0;font-size:9px;padding:5px 7px;letter-spacing:.06em}
.card__name{font-size:14px}
.card__price{font-size:13px;white-space:nowrap}
.card__color{font-size:11px}
.card{animation:none}
.card button:hover .card__img img{transform:none}
.shop{padding-block:50px 60px;border-top:1px solid var(--color-border)}
.section-title{font-family:GravityDisplay,sans-serif;font-weight:400;font-stretch:normal;letter-spacing:.01em;line-height:1.1}
.section-head{margin-bottom:24px}
.filters{gap:6px}
.filters button{border-radius:1px;min-height:34px;padding:0 13px;font-size:11px}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
.fit-note{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-block:55px;border-top:1px solid var(--color-border)}
.fit-note>.kicker{grid-column:1/-1;margin:0}
.fit-note h2{font:400 clamp(54px,6vw,88px)/1 GravityDisplay,sans-serif;text-transform:uppercase}
.fit-note h2 span{color:var(--color-muted)}
.fit-note>div{max-width:530px;font-size:15px;line-height:1.65}
.fit-note p{margin-bottom:18px}
.story{padding-block:65px}
.story__badge{max-width:260px}
.badge-svg{animation:none}
.band{max-height:390px}
.band__quote{font-family:GravityDisplay,sans-serif;font-weight:400;max-width:800px;line-height:1.05}
.drop{padding-block:55px}
.drop__form input,.pdp,.sizes button,.drawer{border-radius:1px}
.footer{background:#101010;color:#ddd;padding-block:28px}
.footer .brand{width:200px}
@media(min-width:1500px){.hero__copy{padding-top:70px}.category-tile{min-height:290px}}
@media(max-width:1100px){.header .brand{width:190px}.nav{gap:12px;font-size:9px}.hero__title{font-size:8vw}.hero__copy{width:67%}.hero__details{gap:12px}.category-tile{min-height:220px}.category-tile>div{left:14px}.featured__head>p{display:none}.featured__track{grid-auto-columns:calc((100% - 3 * 16px)/4)}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .wrap{width:calc(100% - 32px)}.header__row{height:64px;gap:6px}.header .brand{width:165px;height:40px}.header__tools{gap:0}.nav{display:none}.menu-btn{display:grid;font-size:10px;width:40px}.cart-btn{font-size:10px;gap:4px;padding:0 4px}.cart-count{min-width:18px;height:18px;padding:0 4px}.header .icon-btn{width:32px;height:38px}.hero{height:640px;min-height:0}.hero__media{inset:0 0 0 14%;opacity:.8}.hero__media img{object-position:55% top}.hero:after{inset:0;background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0bf5 26%,#0b0b0b66 75%,#0b0b0b22)}.hero__copy{position:absolute;inset:auto 16px 26px;width:auto;padding:0}.hero .kicker{font-size:8px;margin-bottom:12px}.hero__title{font-size:clamp(52px,13.7vw,90px)}.hero__title span{font-size:.77em}.hero__lede{font-size:15px;margin:14px 0 20px;max-width:290px}.hero__rail{display:none}.hero__details{gap:12px;margin-top:24px}.hero__details span{font-size:7px;padding-left:9px}.hero__details b{font-size:8px}.hero .btn{min-height:43px;padding:0 18px;font-size:10px}.category-strip{padding:4px;grid-template-columns:1fr 1fr;gap:4px}.category-tile{min-height:215px}.category-tile>div{left:12px;bottom:15px;right:10px}.category-tile h2{font-size:23px}.category-tile p{font-size:8px;line-height:1.4;max-width:135px}.category-tile span{font-size:8px}.featured{padding-block:28px 22px}.featured__head{align-items:end;gap:12px}.featured h2{font-size:21px;line-height:1.2;letter-spacing:.035em}.featured__head .kicker{font-size:8px}.featured__arrows{gap:5px}.featured__arrows button{width:28px;height:28px}.featured__track{grid-auto-columns:calc((100% - 12px)/2);gap:12px}.featured__track .card__tag{font-size:7px}.featured__track .card__name{font-size:11px}.featured__track .card__color{font-size:9px}.shop{padding-block:35px}.section-head{gap:18px}.section-title{font-size:34px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}.card__name{font-size:13px}.card__color{font-size:10px}.card__tag{font-size:8px;left:7px;padding:4px 6px}.card__price{font-size:12px}.fit-note{grid-template-columns:1fr;gap:20px;padding-block:36px}.fit-note h2{font-size:62px}.fit-note>div{font-size:14px}.story{padding-block:40px}.band__quote{font-size:42px}.footer__row{gap:20px}.pdp__info{padding:25px 20px}.pdp__name{font-size:34px}.pdp__price{font-size:20px}.drop{padding-block:40px}
}
@media(max-width:760px){
 .hero__media{inset:0;opacity:1}
 .hero__media img{object-position:center top}
 .hero:after{background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0bf5 26%,#0b0b0b55 60%,transparent 82%)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}