@font-face{font-family:"XELO Display";src:url("assets/fonts/bowlby-one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"XELO Sans";src:url("assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"XELO Mono";src:url("assets/fonts/azeret-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--lime:#c9f711;--ink:#10110e;--cream:#f2ebd7;--red:#ff5050;--blue:#5d7cff;--purple:#7c45ff;--white:#fff;--line:3px;--pad:clamp(18px,3.2vw,52px);--display:"XELO Display",Impact,sans-serif;--sans:"XELO Sans",Arial,sans-serif;--mono:"XELO Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);overflow-x:clip;max-width:100%}
body{margin:0;background:var(--lime);color:var(--ink);font-family:var(--sans);font-weight:600;overflow-x:clip;max-width:100%}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
button{cursor:pointer}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:999;transform:translateY(-180%);background:var(--ink);color:var(--lime);padding:12px 18px;border:2px solid var(--lime);font-family:var(--mono);font-size:12px}
.skip:focus{transform:translateY(0)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;margin:0 0 20px}

/* stitched surface language: hard geometry lifted directly from the character outlines */
.topbar{position:fixed;z-index:100;left:0;right:0;top:0;height:76px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:var(--lime);border-bottom:var(--line) solid var(--ink)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:27px;line-height:1;letter-spacing:.025em}
.brand-mark{width:38px;height:38px;fill:var(--ink)}
.brand-mark .mark-cut{fill:var(--lime)}
.desktop-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:32px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.desktop-nav a{position:relative;padding:8px 0}
.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:3px;background:var(--ink);transition:right .2s}
.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after{right:0}
.header-actions{display:flex;align-items:center;gap:16px}
.menu-button{display:none;width:42px;height:42px;border:2px solid var(--ink);background:transparent;padding:9px}
.menu-button span:not(.sr-only){display:block;height:2px;background:var(--ink);margin:4px 0;transition:.2s}
.mobile-menu{position:absolute;left:0;right:0;top:73px;background:var(--cream);border-bottom:3px solid var(--ink);padding:20px var(--pad)}
.mobile-menu a{display:block;font:700 20px var(--mono);padding:14px 0;border-bottom:1px solid var(--ink)}

.hero{position:relative;min-height:100svh;padding:112px var(--pad) 28px;background:var(--lime);overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:76px 0 0;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(16,17,14,.13) calc(50% - 1px),rgba(16,17,14,.13) calc(50% + 1px),transparent calc(50% + 1px));z-index:-2}
.hero-seam{position:absolute;z-index:-1;top:58%;left:-3%;width:106%;height:34px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:repeating-linear-gradient(135deg,var(--ink) 0 5px,var(--lime) 5px 12px);transform:rotate(-2deg)}
.hero-kicker{display:flex;justify-content:space-between;margin:0;font:700 11px var(--mono);letter-spacing:.12em}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(150px,24vw,390px);letter-spacing:-.07em;line-height:.74;margin:clamp(72px,10vh,120px) 0 0;text-align:center;white-space:nowrap;position:relative;z-index:-1;transform:scaleX(1.02);transform-origin:center}
.hero h1 span{display:inline-block;-webkit-text-stroke:4px var(--ink);color:var(--lime)}
.hero h1 span:nth-child(2){transform:translateY(.03em)}
.hero h1 span:nth-child(3){transform:translateY(-.02em)}
.hero-art{position:absolute;inset:88px 0 0;pointer-events:none;z-index:2}
.hero-person{position:absolute;bottom:-12%;width:min(52vw,760px);filter:drop-shadow(0 8px 0 rgba(16,17,14,.95));transform-origin:bottom center}
.hero-person-a{left:-9%;transform:rotate(-5deg)}
.hero-person-b{left:50%;transform:translateX(-50%);z-index:3;width:min(48vw,700px)}
.hero-person-c{right:-10%;transform:rotate(6deg)}
.hero-copy{position:absolute;left:var(--pad);bottom:28px;z-index:5;width:min(310px,28vw)}
.hero-copy p{margin:0 0 20px;font-size:clamp(17px,1.4vw,22px);line-height:1.08}
.hero-cta{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--lime);height:54px;padding:0 18px;border:2px solid var(--ink);font:700 12px var(--mono);letter-spacing:.06em;box-shadow:6px 6px 0 var(--cream)}
.hero-cta:hover span{transform:translateY(4px)}
.hero-cta span{font-size:22px;transition:transform .2s}
.garment-tag{position:absolute;z-index:5;background:var(--cream);border:2px solid var(--ink);padding:7px 9px;min-width:72px;box-shadow:4px 4px 0 var(--ink);font-family:var(--mono);transform:rotate(6deg)}
.garment-tag b,.garment-tag span{display:block;font-size:9px}.garment-tag span{font-size:16px;font-weight:700}
.garment-tag-one{right:6%;top:26%}.garment-tag-two{right:13%;bottom:7%;transform:rotate(-5deg)}

.fit-lab{background:var(--cream);padding:clamp(76px,10vw,150px) var(--pad);border-top:var(--line) solid var(--ink)}
.section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;margin-bottom:52px}
.section-head h2,.lineup h2,.superior h2{font:400 clamp(58px,8.5vw,138px)/.79 var(--display);letter-spacing:-.045em;margin:0}
.section-intro{font-size:clamp(17px,1.65vw,25px);line-height:1.1;margin:0 0 6px;max-width:530px}
.mixer{display:grid;grid-template-columns:1.1fr .9fr;min-height:680px;border:3px solid var(--ink);background:var(--lime);box-shadow:12px 12px 0 var(--ink)}
.mixer-stage{position:relative;overflow:hidden;border-right:3px solid var(--ink);min-height:680px;background:var(--lime)}
.mixer-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(16,17,14,.18) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(16,17,14,.18) 50%,transparent 50.2%);pointer-events:none}
.mixer-stage img{position:absolute;width:92%;height:92%;object-fit:contain;object-position:center bottom;left:4%;bottom:0;transition:opacity .16s,transform .22s}
.mixer-stage.is-changing img{opacity:0;transform:translateY(18px) scale(.98)}
.stage-code{position:absolute;z-index:2;top:18px;left:18px;font:700 10px var(--mono);padding:7px 10px;border:2px solid var(--ink);background:var(--cream)}
.stage-name{position:absolute;z-index:2;bottom:15px;right:16px;font:400 clamp(27px,3.5vw,56px) var(--display);letter-spacing:-.03em;-webkit-text-stroke:5px var(--lime);paint-order:stroke fill}
.stage-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 89px,rgba(16,17,14,.08) 89px 90px);pointer-events:none}
.mixer-panel{background:var(--ink);color:var(--cream);display:flex;flex-direction:column}
.mixer-panel-head{height:58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(242,235,215,.34);font:700 10px var(--mono);letter-spacing:.1em}
.trait-readout{margin:0;padding:16px 22px;flex:1}
.trait-readout div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(242,235,215,.25)}
.trait-readout dt{font:500 10px var(--mono);color:var(--lime);letter-spacing:.12em}
.trait-readout dd{margin:0;font:800 clamp(17px,1.5vw,23px)/1.05 var(--sans);text-transform:uppercase}
.mixer-actions{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--cream)}
.mixer-actions button{height:62px;padding:0 18px;border:0;display:flex;align-items:center;justify-content:space-between;font:700 11px var(--mono)}
.shuffle-button{background:var(--lime);color:var(--ink)}.detail-button{background:var(--cream);color:var(--ink);border-left:2px solid var(--ink)!important}
.mixer-actions button span{font-size:20px}.mixer-actions button:hover span{transform:rotate(18deg)}
.swatch-rail{display:grid;grid-template-columns:repeat(6,1fr);background:var(--cream);border-top:2px solid var(--cream)}
.swatch{aspect-ratio:1;border:0;border-right:1px solid var(--ink);padding:0;background:var(--lime);overflow:hidden;position:relative}
.swatch img{width:100%;height:100%;object-fit:contain}.swatch.active{box-shadow:inset 0 0 0 5px var(--red)}.swatch:hover img{transform:scale(1.08)}

.lineup{padding:clamp(78px,11vw,170px) 0;background:var(--red);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;contain:paint;max-width:100vw}
.lineup-title-row{padding:0 var(--pad);display:grid;grid-template-columns:.4fr 1.2fr .4fr;gap:40px;align-items:end;margin-bottom:64px}
.lineup-title-row .eyebrow{align-self:start}.lineup-title-row p:last-child{font-size:18px;line-height:1.1;margin:0 0 5px}
.rack{display:flex;width:max-content;gap:0;padding-left:var(--pad);animation:rackDrift 42s linear infinite}.rack:hover{animation-play-state:paused}
.rack-loading{font:400 60px var(--display)}
.rack-card{width:clamp(230px,23vw,380px);flex:0 0 auto;border:3px solid var(--ink);border-right:0;background:var(--lime);position:relative;overflow:hidden;cursor:pointer;transform-origin:bottom;transition:transform .2s}
.rack-card:last-child{border-right:3px solid var(--ink)}
.rack-card:nth-child(3n+2){background:var(--cream)}.rack-card:nth-child(3n){background:#9b85ff}
.rack-card:hover{transform:translateY(-16px) rotate(-1deg);z-index:2}
.rack-card img{width:100%;aspect-ratio:1;object-fit:contain;object-position:center bottom}
.rack-card footer{height:58px;border-top:3px solid var(--ink);padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:inherit;font:700 10px var(--mono)}
@keyframes rackDrift{to{transform:translateX(calc(-50% - 0px))}}

.manifesto{display:grid;grid-template-columns:.35fr 1.2fr .55fr;min-height:720px;padding:clamp(70px,10vw,150px) var(--pad);background:var(--ink);color:var(--cream);gap:40px;align-items:start}
.manifesto-small{font:700 10px var(--mono);letter-spacing:.14em;writing-mode:vertical-rl;margin:0;border-left:2px solid var(--lime);padding-left:12px}
.manifesto-big{margin:0;font:400 clamp(70px,10vw,160px)/.78 var(--display);letter-spacing:-.06em}.manifesto-big span{color:var(--lime);-webkit-text-stroke:2px var(--cream)}
.manifesto-copy{align-self:end}.manifesto-copy>p{font-size:clamp(18px,1.7vw,26px);line-height:1.12;margin:0 0 48px}
.fact-row{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid rgba(242,235,215,.36);font:700 11px var(--mono)}.fact-row b{color:var(--lime)}

.superior{padding:clamp(78px,10vw,150px) var(--pad);background:var(--cream);border-bottom:3px solid var(--ink)}
.superior-head{display:grid;grid-template-columns:.35fr 1.1fr .55fr;gap:34px;align-items:end;margin-bottom:54px}.superior-head .eyebrow{align-self:start}.superior-head p:last-child{font-size:18px;line-height:1.15;margin:0 0 4px}
.superior-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.superior-card{position:relative;border:3px solid var(--ink);background:var(--lime);box-shadow:7px 7px 0 var(--ink);cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s}
.superior-card:nth-child(even){transform:translateY(24px)}.superior-card:hover{transform:translate(4px,4px)!important;box-shadow:3px 3px 0 var(--ink)}
.superior-card img{aspect-ratio:1;object-fit:cover;width:100%;filter:saturate(1.05)}
.superior-label{position:absolute;left:10px;right:10px;bottom:10px;background:var(--cream);border:2px solid var(--ink);padding:9px 10px;display:flex;justify-content:space-between;font:700 9px var(--mono)}

body>footer{min-height:96px;padding:25px var(--pad);display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:22px;background:var(--ink);color:var(--cream);font:500 9px var(--mono);letter-spacing:.1em}.footer-brand{font-size:22px;color:var(--lime)}body>footer p{margin:0}

.item-dialog{width:min(980px,calc(100vw - 36px));padding:0;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:14px 14px 0 var(--lime);overflow:visible}.item-dialog::backdrop{background:rgba(16,17,14,.82)}.item-dialog[open]{display:grid;grid-template-columns:1fr 1fr;max-height:calc(100vh - 60px)}
.dialog-close{position:absolute;right:-18px;top:-18px;width:44px;height:44px;border:3px solid var(--ink);background:var(--red);font:700 24px var(--mono);z-index:2}
.dialog-art-wrap{background:var(--lime);min-height:520px;display:grid;place-items:center;border-right:3px solid var(--ink);overflow:hidden}.dialog-art-wrap img{width:100%;height:100%;object-fit:contain}
.dialog-copy{padding:clamp(28px,4vw,56px);overflow:auto}.dialog-copy h2{font:400 clamp(48px,6vw,85px)/.85 var(--display);letter-spacing:-.05em;margin:0 0 34px}.dialog-traits div{display:grid;grid-template-columns:110px 1fr;gap:14px;border-top:1px solid var(--ink);padding:12px 0}.dialog-traits span:first-child{font:700 9px var(--mono);color:#45483d}.dialog-traits span:last-child{font-weight:800;text-transform:uppercase}.dialog-copy>a{display:inline-block;margin-top:28px;border:2px solid var(--ink);background:var(--lime);padding:14px 16px;font:700 10px var(--mono);box-shadow:4px 4px 0 var(--ink)}

@media(max-width:980px){.desktop-nav{display:none}.menu-button{display:block}.hero{min-height:860px}.hero h1{font-size:clamp(130px,27vw,250px);margin-top:140px}.hero-person{width:72vw}.hero-person-a{left:-20%}.hero-person-b{width:67vw}.hero-person-c{right:-20%}.mixer{grid-template-columns:1fr}.mixer-stage{border-right:0;border-bottom:3px solid var(--ink);min-height:600px}.lineup-title-row,.superior-head{grid-template-columns:1fr 1fr}.lineup-title-row .eyebrow,.superior-head .eyebrow{grid-column:1/-1}.lineup-title-row p:last-child,.superior-head p:last-child{align-self:end}.manifesto{grid-template-columns:.14fr 1fr}.manifesto-copy{grid-column:2}.superior-track{grid-template-columns:repeat(2,1fr)}body>footer{grid-template-columns:1fr 1fr}.item-dialog[open]{grid-template-columns:1fr 1fr}}

@media(max-width:640px){:root{--pad:18px}.topbar{height:68px}.brand{font-size:23px}.brand-mark{width:32px;height:32px}.mobile-menu{top:65px}.hero{min-height:780px;padding-top:96px}.hero:before{inset:68px 0 0}.hero-kicker span:last-child{display:none}.hero h1{font-size:clamp(95px,31vw,165px);margin-top:104px;letter-spacing:-.1em}.hero h1 span{-webkit-text-stroke:2px var(--ink)}.hero-art{inset:120px 0 0}.hero-person{width:100vw;bottom:3%}.hero-person-a{left:-42%;transform:rotate(-7deg)}.hero-person-b{width:94vw}.hero-person-c{right:-45%;transform:rotate(7deg)}.hero-copy{left:18px;bottom:19px;width:230px}.hero-copy p{font-size:16px}.hero-cta{height:48px;font-size:10px}.garment-tag-one{right:12px;top:19%}.garment-tag-two{display:none}.hero-seam{top:61%;height:26px}.section-head{grid-template-columns:1fr;gap:28px}.section-head h2,.lineup h2,.superior h2{font-size:clamp(49px,15vw,76px)}.section-intro{font-size:17px}.mixer{box-shadow:7px 7px 0 var(--ink)}.mixer-stage{min-height:430px}.mixer-stage img{width:106%;height:106%;left:-3%}.stage-name{font-size:27px;-webkit-text-stroke:3px var(--lime)}.trait-readout div{grid-template-columns:92px 1fr;gap:12px;padding:14px 0}.trait-readout dd{font-size:15px}.mixer-actions{grid-template-columns:1fr}.detail-button{border-left:0!important;border-top:2px solid var(--ink)!important}.swatch-rail{grid-template-columns:repeat(6,1fr)}.lineup-title-row,.superior-head{grid-template-columns:1fr;gap:24px}.lineup-title-row .eyebrow,.superior-head .eyebrow{grid-column:auto}.rack-card{width:260px}.manifesto{grid-template-columns:1fr;gap:30px}.manifesto-small{writing-mode:horizontal-tb;border-left:0;border-bottom:2px solid var(--lime);padding:0 0 10px}.manifesto-big{font-size:clamp(56px,17vw,88px)}.manifesto-copy{grid-column:auto}.superior-track{gap:12px}.superior-card:nth-child(even){transform:translateY(10px)}body>footer{grid-template-columns:1fr;gap:14px}.item-dialog[open]{grid-template-columns:1fr;max-height:calc(100vh - 24px)}.dialog-art-wrap{min-height:300px;height:40vh;border-right:0;border-bottom:3px solid var(--ink)}.dialog-copy{padding:24px}.dialog-copy h2{font-size:48px;margin-bottom:22px}.dialog-close{right:4px;top:4px}.dialog-traits div{grid-template-columns:92px 1fr}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rack{animation:none}.mixer-stage img,.rack-card,.desktop-nav a:after{transition:none}}