/* WAW · Wear A Word — storefront styles
   Strict monochrome UI (black / white / greys). Colour only appears in
   the tee mock-up photos.                                                  */
:root{
  --black:#000;--ink:#111;--white:#fff;
  --grey-50:#f7f7f7;--grey-100:#eeeeee;--grey-200:#dddddd;--grey-400:#999999;--grey-600:#666666;--grey-800:#333333;
  --line:var(--grey-200);
  --wrap:1280px;
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 1em}
[hidden]{display:none!important}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--black);color:var(--white);padding:8px 14px;z-index:200;font-weight:600}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.inverse :focus-visible{outline-color:var(--white)}
.header-slot{height:100px;background:var(--white);border-bottom:1px solid var(--line)}

/* placeholder badge: black dashed outline */
.ph{display:inline-block;background:var(--white);color:var(--black);border:1px dashed var(--black);padding:0 6px;font-size:.86em;font-weight:500;line-height:1.5}
.inverse .ph{background:transparent;color:var(--white);border-color:var(--white)}

/* labels */
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--grey-600);margin-bottom:12px}
.lead{font-size:17px;color:var(--grey-600);max-width:40em}
.muted{color:var(--grey-600)}
.fine{font-size:13px;color:var(--grey-600);margin:10px 0 0}
.hl{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em}
.big-dark{font-size:clamp(21px,4.4vw,28px);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.note{border:1px solid var(--line);background:var(--grey-50);padding:12px 14px;font-size:14px}

/* lockup */
.lockup{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;font-size:19px;line-height:1;color:var(--black)}
.lockup-mark{height:30px;width:auto;display:block}
.lockup-bar{width:1px;height:1.2em;background:currentColor}
.lockup-name{font-weight:400;letter-spacing:-.02em}
.lockup-lg{font-size:28px}
.lockup-lg .lockup-mark{height:44px}

/* announcement bar + header */
.announce{background:var(--black);color:var(--white);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:9px 12px;line-height:1.4}
.announce p{margin:0}.announce b{font-weight:600}.announce a{font-weight:600;text-underline-offset:3px}
.site-header{position:sticky;top:0;z-index:60;background:var(--white);color:var(--black);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:10px;height:64px}
.header-inner .lockup{margin-right:auto}
.nav{display:none;gap:28px}
.nav a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:22px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--black)}
.header-icons{display:flex;gap:0}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer;text-decoration:none;font-size:26px;line-height:1;color:inherit}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--grey-100)}
.count{position:absolute;top:5px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--black);color:var(--white);font-size:11px;font-weight:700;display:grid;place-items:center}

/* drawers, search, toast */
.drawer,.search-ov{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0);transition:background .25s}
.drawer.is-open,.search-ov.is-open{background:rgba(0,0,0,.45)}
.drawer-panel{position:absolute;top:0;bottom:0;width:min(92vw,420px);background:var(--white);color:var(--ink);display:flex;flex-direction:column;padding:14px 20px 20px;transition:transform .25s ease;overflow-y:auto}
.drawer-right .drawer-panel{right:0;transform:translateX(100%)}
.drawer-left .drawer-panel{left:0;transform:translateX(-100%)}
.drawer.is-open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.drawer-title{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.menu-links{display:flex;flex-direction:column;margin:0 0 24px}
.menu-links a{text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:15px 0;border-bottom:1px solid var(--line)}
.search-ov .search-box{background:var(--white);padding:18px 16px 22px;transform:translateY(-100%);transition:transform .25s;border-bottom:1px solid var(--line)}
.search-ov.is-open .search-box{transform:none}
.search-box form{display:flex;gap:8px;align-items:center;max-width:820px;margin:auto}
.search-box input{flex:1;min-width:0;height:48px;border:1px solid var(--black);padding:0 16px;font:400 16px var(--font);border-radius:0}
.search-box .btn{height:48px;min-height:48px;padding:0 18px}
.suggest{list-style:none;margin:10px auto 0;padding:0;max-width:820px}
.suggest a{display:flex;gap:12px;align-items:center;padding:8px;text-decoration:none}
.suggest a:hover{background:var(--grey-50)}
.suggest .sg-img,.suggest .sil{width:56px;height:56px;flex:none;overflow:hidden}
.suggest .sil-tag{display:none}
.suggest img{width:100%;height:100%;object-fit:cover}
.suggest small{display:block;color:var(--grey-600)}
.sg-none{padding:10px;color:var(--grey-600)}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);visibility:hidden;opacity:0;background:var(--black);color:var(--white);padding:12px 20px;z-index:120;font-size:14px;transition:transform .3s,opacity .3s}
.toast.show{transform:translate(-50%,0);visibility:visible;opacity:1}

/* buttons: black primary, outlined secondary, inverse on dark */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:700 14px/1.1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;min-height:50px;border-radius:0;text-decoration:none;border:1px solid var(--black);cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn-sm{padding:10px 16px;min-height:40px;font-size:12px}
.btn-lg{min-height:56px}
.btn-primary,.btn-dark{background:var(--black);color:var(--white)}
.btn-primary:hover,.btn-dark:hover{background:var(--grey-800);border-color:var(--grey-800)}
.btn-outline,.btn-wa{background:var(--white);color:var(--black)}
.btn-outline:hover,.btn-wa:hover{background:var(--black);color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--black)}
.btn-light{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-block{width:100%}
.btn-block+.btn-block{margin-top:10px}
.link-btn{background:none;border:0;padding:0;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink)}
.link-arrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}

/* hero (white, editorial) */
.hero{padding:28px 0 48px;overflow:hidden;background:var(--white)}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero h1{font-size:clamp(44px,11vw,84px);letter-spacing:-.045em;line-height:1}
.hero h1 .h-main{display:block;text-wrap:balance}
.h-kicker{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:18px}
.hero-sub{font-size:clamp(22px,5vw,30px);font-weight:300;margin:16px 0;letter-spacing:-.02em}
.hero-body{color:var(--grey-600);max-width:32em;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px}
.hero-actions .btn{flex:1 1 220px}
.hero-perks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-600)}
.hero-perks li::before{content:"✓ ";color:var(--black);font-weight:700}
.hero-media{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-tee{position:relative;display:block;background:var(--grey-100);overflow:hidden;text-decoration:none}
.hero-tee img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s}
.hero-tee:hover img{transform:scale(1.03)}
.hero-tee-label{position:absolute;left:0;bottom:0;background:var(--white);color:var(--black);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-top:1px solid var(--line);border-right:1px solid var(--line)}

/* ticker: thin black band */
.ticker{background:var(--black);color:var(--white);overflow:hidden;padding:11px 0}
.ticker-track{display:flex;align-items:center;gap:30px;width:max-content;animation:tick 45s linear infinite;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker-track i{width:5px;height:5px;background:var(--white);border-radius:50%;flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:56px 0}
.sec-paper{background:var(--white);border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.sec-head h2,.story h2,.next h2,.about-strip h2,.lookbook h2{font-size:clamp(28px,6vw,48px)}
.sec-head .lead{margin:10px 0 0}

/* category tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--grey-100);text-decoration:none}
.tile picture,.tile img,.tile .sil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img{transition:transform .6s}
.tile:hover img{transform:scale(1.03)}
.tile .sil-tag{display:none}
.tile-label{position:absolute;left:0;right:0;bottom:0;background:var(--white);color:var(--black);padding:12px 14px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;border-top:1px solid var(--line)}
.tile-label i{font-style:normal}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 10px}
.pcard{position:relative;display:flex;flex-direction:column}
.pcard-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--grey-100)}
.pcard-media picture,.pcard-media .sil{position:absolute;inset:0;width:100%;height:100%}
.pcard-media img{width:100%;height:100%;object-fit:cover}
.pm-back{opacity:0;transition:opacity .35s}
.pcard:hover .pm-back{opacity:1}
.wish{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:var(--white);display:grid;place-items:center;cursor:pointer}
.wish svg{width:19px;height:19px;fill:none;stroke:var(--black);stroke-width:1.6}
.wish.on svg{fill:var(--black)}
.pcard-body{padding:10px 0 0}
.pcard-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600);margin:0 0 4px;font-weight:600}
.sg-h{font-size:15px;font-weight:600;margin:18px 0 6px;letter-spacing:0}
.tag-new{display:inline-block;background:var(--black);color:var(--white);font-size:9px;letter-spacing:.14em;padding:1px 6px 0;margin-right:4px;vertical-align:1px;line-height:1.6}
.pcard h3{font-size:15px;font-weight:400;letter-spacing:0;line-height:1.35}
.pcard h3 a{text-decoration:none}
.pcard h3 a:hover{text-decoration:underline}
.pcard-price{margin:4px 0 8px;font-weight:700;font-size:15px}
.dots{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.dots li{width:13px;height:13px;border-radius:50%;background:var(--sw);border:1px solid var(--grey-400)}

/* "photo coming soon" silhouette */
.sil{display:grid;place-items:center;background:var(--grey-100);position:relative;width:100%;height:100%}
.sil-dark{background:var(--grey-200)}
.sil svg{width:76%;height:auto}
.sil-shape{stroke:var(--black);stroke-width:2.5;stroke-linejoin:round}
.sil-line{fill:none}
.sil-word{font:500 13px var(--font);fill:var(--black);letter-spacing:-.02em}
.sil-dark .sil-word{fill:var(--white)}
.sil-tag{position:absolute;left:10px;bottom:10px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--white);color:var(--black);padding:5px 8px;border:1px solid var(--black)}

/* the word (story) */
.story{background:var(--white);padding:64px 0;border-top:1px solid var(--line)}
.story-grid{display:grid;gap:36px;align-items:center}
.story-art{max-width:560px;width:100%;margin-inline:auto;background:var(--grey-100)}
.story-art img{width:100%;height:auto}
.story-copy{max-width:620px}
.story-copy p{color:var(--grey-800);font-size:17px}
.story .big,.about-strip .big{font-size:clamp(21px,4.4vw,28px);line-height:1.3;font-weight:500;letter-spacing:-.01em;margin:16px 0 18px;color:var(--ink)}
blockquote{margin:24px 0;padding:6px 0 6px 20px;border-left:2px solid var(--black)}
blockquote p{font-size:19px!important;font-weight:500;line-height:1.45;margin:0 0 8px!important;color:var(--ink)!important}
cite{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-600)}

/* lookbook */
.lookbook{background:var(--white);padding:64px 0;border-top:1px solid var(--line)}
.mockups{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 10px}
.mockups button{display:block;width:100%;padding:0;border:0;background:var(--grey-100);cursor:zoom-in;overflow:hidden}
.mockups img{width:100%;height:auto;transition:transform .6s}
.mockups button:hover img{transform:scale(1.03)}
.mockups p{margin:10px 0 0;font-size:14px}
.mockups p span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh}
.lightbox::backdrop{background:rgba(255,255,255,.96)}
.lightbox img{max-height:88vh;width:auto;margin:auto}
.lb-close{position:fixed;top:14px;right:14px;width:46px;height:46px;border:1px solid var(--black);background:var(--white);font-size:28px;cursor:pointer}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{padding:20px 0;border-bottom:1px solid var(--line)}
.steps b{display:block;font-size:12px;letter-spacing:.14em;color:var(--grey-600);margin-bottom:8px}
.steps h3{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.steps p{margin:0;color:var(--grey-600);font-size:15px}

/* next collection teaser — typographic inverse block */
.next{background:var(--black);color:var(--white);padding:72px 0;text-align:center}
.next .eyebrow{color:var(--grey-400)}
.next-block{max-width:880px}
.next h2{font-size:clamp(64px,17vw,180px);letter-spacing:-.05em;line-height:.9;margin:6px 0 24px}
.next-lines{display:flex;flex-direction:column;gap:4px;font-size:clamp(19px,3.6vw,26px);font-weight:500;line-height:1.3;margin:0 0 18px}
.next-copy{color:#cfcfcf;max-width:34em;margin:0 auto 26px}
.btn-light:hover{background:transparent;color:var(--white);border-color:var(--white)}

/* about strip (inverse block) */
.about-strip{background:var(--white);color:var(--ink);padding:64px 0}
.about-grid{display:grid;gap:20px}
.about-copy p{color:var(--grey-800)}

/* shop & page headers */
.shop-head,.page-hero{background:var(--white);padding:22px 0 26px;border-bottom:1px solid var(--line)}
.shop-head h1,.page-hero h1{font-size:clamp(30px,6.5vw,52px)}
.shop-head .lead,.page-hero .lead{margin:8px 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--grey-600);margin:0 0 14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.shop-body,.page-body{padding:22px 0 64px}
.toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;position:sticky;top:64px;z-index:20;background:var(--white);padding:10px 0;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border:1px solid var(--grey-200);background:var(--white);padding:10px 16px;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.filters button:hover{border-color:var(--black)}
.filters button.on{background:var(--black);color:var(--white);border-color:var(--black)}
.toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar .count{position:static;background:none;color:var(--grey-600);font-size:13px;font-weight:500;margin:0 auto 0 0;display:block;height:auto;padding:0;border-radius:0}
.qchip{margin:0;border:1px solid var(--black);padding:4px 4px 4px 12px;font-size:13px;display:flex;align-items:center;gap:8px}
.qchip a{display:grid;place-items:center;width:24px;height:24px;background:var(--black);color:var(--white);text-decoration:none}
.sort{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-600)}
.sort select,.field select{appearance:none;-webkit-appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--grey-200);border-radius:0;padding:10px 38px 10px 14px;font:500 14px var(--font);color:var(--ink);cursor:pointer;text-transform:none;letter-spacing:0}
.empty{grid-column:1/-1;text-align:center;padding:40px 10px}
.empty-lg{padding:60px 10px}

/* product page */
.pdp{display:grid;gap:24px;padding:4px 0 56px}
.pdp-gallery{display:flex;flex-direction:column;gap:8px}
.pdp-main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grey-100)}
.pdp-main picture,.pdp-main .sil{position:absolute;inset:0;width:100%;height:100%}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{display:flex;gap:8px}
.pdp-thumbs button{position:relative;width:78px;aspect-ratio:4/5;overflow:hidden;border:1px solid transparent;padding:0;cursor:pointer;background:var(--grey-100)}

.pdp-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs button.on{border-color:var(--black)}
.pdp-thumbs span{position:absolute;left:0;right:0;bottom:0;font-size:9px;text-transform:uppercase;letter-spacing:.12em;background:var(--white);padding:2px 4px;font-weight:700}
/* --spin-scale: the loops are 720×720 with wide white margins (tee ≈ 66% of the width).
   1.25 makes the tee exactly the size of the product photos (and the poster, which scales
   with the video), so nothing jumps. Measured over every frame of all 9 loops, the widest
   sleeve angle allows up to 1.358 before anything touches the 4:5 tile edge. */
:root{--spin-scale:1.25}
/* per-category override (C.spinFit in js/config.js) sets --spin-scale / --spin-dy inline on the video */
/* 360° spin loop (first gallery item when a colourway has one). Square box centred
   in the 4:5 frame, so nothing shifts when it loads or when switching to photos. */
.pdp-main.is-spin{background:var(--white)}
.spin{position:absolute;inset:0;background:var(--white)}
.spin-video{position:absolute;left:0;top:50%;transform:translateY(calc(-50% + var(--spin-dy,0) * 100%)) scale(var(--spin-scale));width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--white)}
.spin-badge{position:absolute;left:12px;top:12px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--black);color:var(--white);padding:3px 7px;line-height:1.4}
.spin-toggle{position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--black);border-radius:50%;background:var(--white);color:var(--black);cursor:pointer;padding:0}
.spin-toggle:hover{background:var(--black);color:var(--white)}
.spin-toggle svg{width:16px;height:16px;fill:currentColor}
.spin .i-play,.spin.is-paused .i-pause{display:none}
.spin.is-paused .i-play{display:block}
.pdp-thumbs .th-360 i{position:absolute;inset:0 0 14px;display:grid;place-items:center;pointer-events:none}
.pdp-thumbs .th-360 svg{width:26px;height:26px;fill:none;stroke:var(--black);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;background:rgba(255,255,255,.85);border-radius:50%;padding:4px}
/* 360° tile loops (home: hero tees, collection cards, "New in" cards): white layer over the
   photos, square video centred in the 4:5 box */
.hero-slot,.col-slot{position:relative;display:flex;flex-direction:column}
.col-slot>.col-card{flex:1}
.has-spin>.wish,.has-spin .sil-tag{z-index:2}
.spin-layer{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;background:var(--white);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.spin-layer.is-on{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
/* home 360 tiles spin on hover: no back-photo swap / zoom under the loop, so leaving fades straight back to the front photo (= frame 0) */
.pcard.has-spin:hover .pm-back{opacity:0}
.col-card-media.has-spin img,.col-card:hover .col-card-media.has-spin img,.pcard-media.has-spin img{transform:none}
.spin-layer video{position:absolute;left:0;top:50%;transform:translateY(calc(-50% + var(--spin-dy,0) * 100%)) scale(var(--spin-scale));width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--white)}
/* home tiles: round 360° pause/play button (loops autoplay while on screen); always shown on touch, on hover with a mouse */
.spin-toggle-sm{top:8px;left:8px;right:auto;bottom:auto;width:38px;height:38px;z-index:3}
.spin-toggle-sm svg{width:13px;height:13px}
.spin-toggle-sm .i-360{font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1}
.spin-toggle-sm:not(.is-paused){background:var(--black);color:var(--white)}
@media (hover:hover){.spin-toggle-sm{opacity:0;transition:opacity .2s}.has-spin:hover>.spin-toggle-sm,.spin-toggle-sm:focus-visible,.spin-toggle-sm.is-paused{opacity:1}}
@media (prefers-reduced-motion:reduce){.spin-layer,.spin-layer.is-on{transition:none}}
.spin-toggle .i-play,.spin-toggle.is-paused .i-pause{display:none}
.spin-toggle.is-paused .i-play{display:block}
.pdp-info h1{font-size:clamp(24px,4.6vw,34px);font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.pdp-price{font-size:20px;font-weight:700;margin:0 0 12px}
.pdp-price .ph{font-size:11px;vertical-align:middle;font-weight:500}
.pdp-short{color:var(--grey-600);font-size:16px}
.opt{border:0;padding:0;margin:0 0 20px}
.opt legend,.opt-l{display:flex;align-items:baseline;gap:4px;width:100%;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin-bottom:10px;padding:0}
.opt legend .link-btn{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.opt legend b{text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;margin-left:4px}
.swatch-row{display:flex;gap:10px}
.sw{position:relative}
.sw input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.sw span:not(.sr){display:block;width:38px;height:38px;border-radius:50%;background:var(--sw);border:1px solid var(--grey-400);box-shadow:0 0 0 3px var(--white)}
.sw input:checked+span{box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--black)}
.sw input:focus-visible+span{outline:2px solid var(--black);outline-offset:6px}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.sizes label{position:relative;flex:1 1 0;min-width:52px}
.sizes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sizes span{display:flex;align-items:center;justify-content:center;height:46px;border:1px solid var(--grey-200);font-weight:600;font-size:14px;transition:all .15s}
.sizes input:hover+span{border-color:var(--black)}
.sizes input:checked+span{background:var(--black);border-color:var(--black);color:var(--white)}
.sizes input:focus-visible+span{outline:2px solid var(--black);outline-offset:2px}
/* sold out (only once stock is tracked in the admin) */
.sizes .is-out input{cursor:not-allowed}
.sizes .is-out span{color:var(--grey-400,#9a9a9a);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.05) 6px 7px);text-decoration:line-through}
.sizes .is-out input:hover+span{border-color:var(--grey-200)}
.co-error{border:1px solid #000;padding:10px 12px;margin:0 0 12px;font-size:14px}
.err{color:var(--black);font-size:14px;font-weight:700;margin:8px 0 0}
.err::before{content:"! ";display:inline-grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--black);border-radius:50%;font-size:11px;margin-right:6px;vertical-align:1px;line-height:1}
.qty{display:inline-flex;align-items:center;border:1px solid var(--grey-200);height:46px}
.qty button{width:44px;height:100%;border:0;background:none;font-size:18px;cursor:pointer}
.qty button:hover{background:var(--grey-100)}
.qty output,.qty span{min-width:30px;text-align:center;font-weight:600}
.qty-sm{height:36px}.qty-sm button{width:34px;font-size:16px}
.pdp-actions{display:flex;gap:8px;margin:6px 0 10px}
.pdp-actions .btn{flex:1;min-height:54px}
.wish-lg{position:static;width:54px;height:54px;border-radius:0;border:1px solid var(--grey-200);flex:none}
.wish-lg:hover{border-color:var(--black)}
.perks{list-style:none;padding:0;margin:18px 0;display:grid;gap:6px;font-size:13px;color:var(--grey-600)}
.perks li::before{content:"✓ ";color:var(--black);font-weight:700}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;font-weight:300}
details[open]>summary::after{content:"–"}
details>div{padding:0 0 16px;color:var(--grey-800)}
.acc-big{font-size:18px;color:var(--ink);font-weight:500;line-height:1.4}
.modal{border:1px solid var(--black);border-radius:0;padding:22px;width:min(94vw,560px)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.modal .icon-btn:hover{background:var(--grey-100)}
.size-table{width:100%;border-collapse:collapse;font-size:14px}
.size-table caption{text-align:left;font-size:12px;color:var(--grey-600);margin-bottom:8px}
.size-table th,.size-table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left}
.size-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--grey-600);border-bottom-color:var(--black)}

/* bag */
.lines{list-style:none;padding:0;margin:0}
.line{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.line-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--grey-100);position:relative}
.line-img picture,.line-img .sil{position:absolute;inset:0;width:100%;height:100%}
.line-img img{width:100%;height:100%;object-fit:cover}
.line-img .sil-tag,.sum-lines .sil-tag{display:none}
.line-name{font-weight:500;text-decoration:none;line-height:1.3;display:block}
.line-meta{font-size:13px;color:var(--grey-600);margin:2px 0 8px}
.line-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.line-price{margin:0;font-weight:700}
.line .link-btn{margin-top:8px;color:var(--grey-600)}
.mini-cart{display:flex;flex-direction:column;flex:1}
.mini-cart .lines{flex:1}
.mini-foot{padding-top:16px;position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--line)}
.sum-row{display:flex;justify-content:space-between;margin:0 0 8px;gap:10px;font-size:15px}
.sum-total{font-size:17px;font-weight:700;border-top:1px solid var(--black);padding-top:12px;margin-top:6px}
.cart-grid,.co-grid{display:grid;gap:28px;align-items:start}
.lines-lg .line{grid-template-columns:110px 1fr}
.summary{background:var(--white);border:1px solid var(--line);padding:22px}
.summary h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.co-grid .summary{order:-1}
.summary .btn{margin-top:10px}
.sum-lines{list-style:none;padding:0;margin:0 0 16px}
.sum-lines li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.sum-lines li>picture,.sum-lines li>.sil{width:52px;aspect-ratio:4/5;height:auto;overflow:hidden;display:block;position:relative;background:var(--grey-100)}
.sum-lines li>picture img{width:100%;height:100%;object-fit:cover}
.sum-lines li>.sil svg{width:90%}
.sum-lines b{font-weight:500}
.sum-lines small{display:block;color:var(--grey-600)}
.sum-lines em{font-style:normal;font-weight:700}

/* checkout */
.preview-banner{background:var(--white);border:1px dashed var(--black);padding:14px 16px;font-size:14px;margin-bottom:22px}
.co-form fieldset{border:0;padding:0;margin:0 0 28px}
.co-form legend{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;padding:0}
.co-form legend small,.field small{font-weight:400;color:var(--grey-600);font-size:12px;letter-spacing:0;text-transform:none}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;flex:1}
.field label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-800)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--grey-200);border-radius:0;padding:13px 14px;font:400 16px var(--font);background:var(--white);color:var(--ink)}
.field select{padding:13px 38px 13px 14px;font-size:16px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--black);outline:none;box-shadow:inset 0 0 0 1px var(--black)}
.field input:user-invalid{border-color:var(--black);border-width:2px}
.field-row{display:flex;flex-direction:column;gap:0 14px}
.radio-list{display:grid;gap:8px}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--grey-200);padding:14px;cursor:pointer}
.radio-card:has(input:checked){border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.radio-card input{margin-top:4px;accent-color:#000;width:18px;height:18px}
.radio-card span{flex:1}
.radio-card small{display:block;color:var(--grey-600);font-size:13px}
.radio-card em{font-style:normal;font-weight:700}
.pay-box{border-top:1px solid var(--line);padding-top:20px}
.pay-badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pay-badges span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--grey-200);padding:4px 8px;color:var(--grey-600)}
.or{display:flex;align-items:center;gap:12px;color:var(--grey-600);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* confirmation */
.confirm-wrap{background:var(--grey-50);padding:40px 0 70px}
.confirm-card{background:var(--white);padding:26px 22px;max-width:620px;margin:auto;border:1px solid var(--line)}
.confirm-mark{width:80px;height:auto;margin-bottom:18px}
.confirm-card h1{font-size:clamp(26px,5.6vw,36px);margin-bottom:14px}
.ref{font-size:16px}
.ref b{font-family:ui-monospace,Menlo,monospace;border:1px solid var(--black);padding:2px 8px}
.verify{font-size:14px;color:var(--grey-600)}

/* info pages */
.prose{max-width:780px}
.prose h2{font-size:clamp(20px,4vw,26px);margin:34px 0 12px}
.prose p,.prose li{color:var(--grey-800);font-size:16px}
.prose ul{padding-left:20px}
.template-note{background:var(--white);border:1px dashed var(--black);padding:12px 14px;font-size:14px!important}
.about-tees{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.about-tees picture{background:var(--grey-100)}
.about-tees img{width:100%;height:auto}
.values{list-style:none;padding:0!important;margin:24px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.values li{display:flex;flex-direction:column;padding:12px 0;border-bottom:1px solid var(--line)}
.values b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.values span{color:var(--grey-600);font-size:15px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.dl-list{list-style:none;padding:0!important;display:grid;gap:0;border-top:1px solid var(--line)}
.dl-list li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.dl-list small{color:var(--grey-600);font-size:14px}
.contact-grid{display:grid;gap:10px}
.contact-card{border:1px solid var(--line);padding:20px}
.contact-card h2{margin:0 0 6px;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.plain{list-style:none;padding:0!important}
.contact-form{max-width:640px}

/* footer (light, ASOS-style) */
.site-footer{background:var(--grey-50);color:var(--ink);padding:44px 0 22px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.footer-brand{grid-column:1/-1}
.site-footer .lockup{color:var(--black)}
.footer-tag{color:var(--grey-600);margin:14px 0}
.footer-h{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);font-weight:700;margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer nav a{text-decoration:none;color:var(--grey-800);font-size:14px}
.site-footer nav a:hover{text-decoration:underline}
.socials{display:flex!important;flex-wrap:wrap;gap:8px 18px!important}
.socials a{text-decoration:none;font-weight:600;font-size:14px}
.socials a span{font-weight:400;color:var(--grey-600)}
.site-footer .ph{font-size:12px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--grey-600)}
.footer-base p{margin:0}
.footer-base .pay-badges{margin:0}

/* ≥ 600 */
@media (min-width:600px){
  .wrap{width:min(100% - 48px,var(--wrap))}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 16px}
  .field-row{flex-direction:row}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .confirm-card{padding:36px}
  .hero-actions .btn{flex:0 0 auto}
}
/* ≥ 860 */
@media (min-width:860px){
  .tiles{grid-template-columns:repeat(4,1fr);gap:14px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,1fr);gap:28px;border-top:0}
  .steps li{border-bottom:0;border-top:1px solid var(--black)}
  .mockups{grid-template-columns:repeat(4,1fr);gap:14px}
  .toolbar{flex-direction:row;justify-content:space-between;align-items:center}
  .filters{margin:0;padding:0}
  .pdp{grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
  .pdp-gallery{position:sticky;top:84px;flex-direction:row-reverse}
  .pdp-main{flex:1}
  .pdp-thumbs{flex-direction:column}
  .cart-grid,.co-grid{grid-template-columns:1fr 380px;gap:48px}
  .summary{position:sticky;top:84px}
  .co-grid .summary{order:2}
  .co-grid .co-form{order:1}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .footer-brand{grid-column:auto}
  .sec{padding:80px 0}
}
/* ≥ 1060 */
@media (min-width:1060px){
  .nav{display:flex}
  .burger{display:none}
  .header-inner .lockup{margin-right:0}
  .nav{margin:0 auto}
  .hero{padding:48px 0 72px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:56px}
  .hero-media{gap:12px}
  .story-grid{grid-template-columns:.8fr 1.2fr;gap:80px}
  .story-art{width:100%}
  .story,.lookbook,.about-strip{padding:96px 0}
  .next{padding:120px 0}
  .about-grid{grid-template-columns:1fr 1fr;gap:60px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ===== collections (tiles, banner, menu) ===== */
.col-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 10px}
.col-grid.is-empty{display:block}
.col-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.col-card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grey-100)}
.col-card-media picture{position:absolute;inset:0}
.col-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.col-card:hover .col-card-media img{transform:scale(1.03)}
.col-card-media .sil-tag{position:absolute;left:8px;top:8px}
.col-card-body{padding:12px 0 0}
.col-card-body h3{font-size:clamp(18px,3.6vw,22px);font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.col-card-body p:not(.pcard-cat){color:var(--grey-600);font-size:14px;margin:0 0 10px;display:none}
.col-card-cta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--black);padding-bottom:2px}
.col-card-cta i{font-style:normal}
.col-type{position:absolute;inset:0;display:grid;place-items:center;background:var(--grey-100)}
.col-type span{font-size:clamp(22px,5vw,40px);font-weight:800;letter-spacing:-.03em;text-transform:lowercase}
.coming{border:1px solid var(--line);padding:48px 22px;text-align:center;max-width:640px;margin:0 auto}
.coming h3{font-size:clamp(22px,4.6vw,30px);margin:0 0 10px}
.coming p:not(.eyebrow){color:var(--grey-600);margin:0 0 20px}
.grid.is-empty{display:block}
.pdp-empty{display:block}
.toolbar-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.collection-select,.sort{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.collection-select select{font:500 14px var(--font);border:1px solid var(--grey-200);background:var(--white);padding:9px 34px 9px 12px;border-radius:0;color:var(--ink)}
.collection-banner{display:grid;gap:18px;margin-top:18px;align-items:center}
.collection-banner[hidden]{display:none}
.col-banner-media{position:relative;aspect-ratio:4/5;max-width:300px;background:var(--grey-100);overflow:hidden}
.col-banner-media picture{position:absolute;inset:0}
.col-banner-media img{width:100%;height:100%;object-fit:cover}
.col-desc{font-size:clamp(17px,3.6vw,21px);line-height:1.45;max-width:34em;margin:0 0 12px}
.col-banner-copy blockquote{margin:0;border-left:2px solid var(--black);padding:2px 0 2px 14px}
.col-banner-copy blockquote p{margin:0;font-style:italic}
.col-banner-copy cite{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-600)}
.menu-h{margin:18px 0 0;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-600)}
.menu-links a.sub{font-weight:500;text-transform:none;letter-spacing:0;font-size:16px;padding:12px 0 12px 12px}
.nav-dd{position:relative;display:flex}
.nav-dd-btn span{font-size:9px;vertical-align:2px}
.nav-dd-menu{position:absolute;top:100%;left:-18px;min-width:230px;background:var(--white);border:1px solid var(--line);display:none;flex-direction:column;padding:8px 0;z-index:70}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:flex}
.nav .nav-dd-menu a{padding:11px 18px;border:0;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500}
.nav .nav-dd-menu a:hover{background:var(--grey-50);text-decoration:underline}
.nav .nav-dd-menu a.nav-dd-all{border-top:1px solid var(--line);margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.values a{color:inherit}
@media (min-width:860px){
  .col-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 16px}
  .col-card-body p:not(.pcard-cat){display:block}
  .toolbar-left{flex-direction:row;align-items:center;gap:16px}
  .collection-banner{grid-template-columns:240px 1fr;gap:32px}
}


/* ===== home landing: black hero with white type (home page only) ===== */
/* home: white header like every page; black hairline so the white→black edge is crisp */
body[data-page=home] .header-slot,body[data-page=home] .site-header{border-bottom-color:#000}
.hero-dark{background:#000;color:#fff}
.hero-dark h1{font-size:clamp(34px,9.2vw,72px);letter-spacing:-.035em;line-height:.98;color:#fff}
.hero-dark .eyebrow,.hero-dark .h-kicker,.hero-dark .hero-sub,.hero-dark .hero-body{color:#fff}
.hero-dark .btn-primary{background:#fff;color:#000;border-color:#fff}
.hero-dark .btn-primary:hover{background:#000;color:#fff;border-color:#fff}
.hero-dark .btn-outline{background:transparent;color:#fff;border-color:#fff}
.hero-dark .btn-outline:hover{background:#fff;color:#000}
.hero-dark .hero-tee{background:#fff}
.hero-dark .hero-tee-label{background:transparent;border:0;color:#000;padding:12px 14px;font-size:12px}
body[data-page=home] .ticker{border-top:1px solid #262626}
.hero-dark{padding:36px 0 40px}
.hero-dark h1{margin-top:0}
@media (min-width:1060px){.hero-dark{padding:64px 0}}

/* ===== home landing motion (black & white only).
   Starting states live only inside the keyframes (fill-mode: both), and only
   when <html class="js-anim"> is set, so content is always visible without
   JS and with prefers-reduced-motion (animations are disabled there). ===== */
.hero-dark .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-dark .ln>span{display:inline-block}
.hero-tee .ht-b{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-tee .ht-b img{width:100%;height:100%;object-fit:cover}
.hero-tee .ht-a{display:block;transition:opacity 1.2s ease}
.hero-tee.alt .ht-b{opacity:1}
.hero-tee.alt .ht-a{opacity:0}
.hero-tee-label{z-index:2}
.hero-tee img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-tee:hover img{transform:scale(1.04)}
@keyframes wawLineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes wawFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wawGlide{from{opacity:0;transform:translate(48px,28px)}to{opacity:1;transform:none}}
.js-anim .hero-dark .ln>span{animation:wawLineUp .7s cubic-bezier(.2,.75,.2,1) both}
.js-anim .hero-dark .ln:nth-child(1)>span{animation-delay:.15s}
.js-anim .hero-dark .ln:nth-child(2)>span{animation-delay:.3s}
.js-anim .hero-dark .hero-sub{animation:wawFadeUp .6s ease-out .75s both}
.js-anim .hero-dark .hero-body{animation:wawFadeUp .6s ease-out .9s both}
.js-anim .hero-dark .hero-actions{animation:wawFadeUp .6s ease-out 1.05s both}
.js-anim .hero-dark .hero-slot{animation:wawGlide .9s cubic-bezier(.2,.75,.2,1) .45s both}
.js-anim .hero-dark .hero-slot+.hero-slot{animation-delay:.62s}
/* ticker: pause on hover */
.ticker:hover .ticker-track{animation-play-state:paused}
/* hero buttons: fill sweep */
.hero-dark .btn{background-image:linear-gradient(#000,#000);background-repeat:no-repeat;background-position:left center;background-size:0 100%;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .35s,border-color .35s}
.hero-dark .btn-primary{background-color:#fff;color:#000;border-color:#fff}
.hero-dark .btn-primary:hover{background-color:#fff;background-size:100% 100%;color:#fff;border-color:#fff}
.hero-dark .btn-outline{background-color:transparent;background-image:linear-gradient(#fff,#fff);color:#fff;border-color:#fff}
.hero-dark .btn-outline:hover{background-color:transparent;background-size:100% 100%;color:#000}
@media (prefers-reduced-motion:reduce){
  .hero-tee .ht-b{display:none}
  .hero-dark .btn{transition:none}
}

/* ===== script capitals (W of WHERE, F of FASHION) in the home headline.
   Font: Alex Brush, self-hosted, SIL OFL (assets/fonts/OFL-AlexBrush.txt).
   To switch fonts: replace the woff2 + the font-family name below. ===== */
@font-face{font-family:"WAW Script";src:url(../assets/fonts/alex-brush-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
.hero-dark .h-script{font-family:"WAW Script",cursive;font-weight:400;font-size:1.55em;line-height:0;letter-spacing:0;margin-right:-.03em;color:#fff;position:relative;top:.05em;text-transform:none}
.hero-dark .ln+.ln .h-script{margin-left:.04em;margin-right:-.06em}
/* give the reveal mask room for the script swashes without changing layout */
.hero-dark .ln{padding-top:.4em;margin-top:-.4em;padding-left:.3em;margin-left:-.3em;padding-right:.1em;margin-right:-.1em;padding-bottom:.22em;margin-bottom:-.22em;position:relative}
.hero-dark .ln:first-child{z-index:1}
.hero-dark h1 .h-main{display:flex;flex-direction:column;align-items:flex-start}
.hero-dark h1{line-height:1.12}
.js-anim .hero-dark .ln>span{animation-name:wawLineUpTall}
@keyframes wawLineUpTall{from{transform:translateY(135%)}to{transform:none}}
/* home landing: rounded tee panels (image, crossfade, zoom and label all clip to the curve) */
.hero-dark .hero-tee{border-radius:12px;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
@media (min-width:860px){.hero-dark .hero-tee{border-radius:16px}}

/* ===== header logo loop: a light sheen glides across the slanted WAW every 4.5s,
   with a tiny forward-lean nudge. Transform/background only = no layout shift.
   The sheen is masked by the logo file itself, so it stays inside the letters.
   On a black logo the sheen is light; on a white logo (.logo-anim.on-dark) it is grey. ===== */
.logo-anim{position:relative;display:block;transform-origin:20% 90%;will-change:transform}
.logo-sheen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.08) 58%,transparent 62% 100%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0}
.on-dark .logo-sheen{background-image:linear-gradient(105deg,transparent 0 38%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.05) 58%,transparent 62% 100%)}
@keyframes wawSheen{0%{background-position:100% 0}32%,100%{background-position:0 0}}
@keyframes wawNudge{0%,4%{transform:none}14%{transform:skewX(-7deg) translateX(1px)}26%,100%{transform:none}}
.site-header .logo-sheen{animation:wawSheen 4.5s cubic-bezier(.45,.05,.35,1) 1.2s infinite}
.site-header .logo-anim{animation:wawNudge 4.5s cubic-bezier(.3,.7,.3,1) 1.2s infinite}
@media (prefers-reduced-motion:reduce){.logo-sheen{display:none}.site-header .logo-anim{animation:none}}

/* ===== Collabs page (collabs.html) — same black/white system as the home hero ===== */
.nav a[aria-current=page]{border-bottom-color:var(--black)}
.menu-links a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.collab-hero{background:#000;color:#fff;padding:40px 0 44px;overflow:hidden}
.collab-hero-grid{display:grid;gap:32px;align-items:center}
.collab-hero .eyebrow{color:#bdbdbd}
.collab-hero h1{font-size:clamp(40px,10vw,76px);letter-spacing:-.035em;line-height:1.05;color:#fff}
.collab-hero h1 .ln{display:block}
.collab-hero .h-script{font-family:"WAW Script",cursive;font-weight:400;font-size:1.45em;line-height:0;letter-spacing:0;margin-right:-.02em;position:relative;top:.06em}
.collab-hero .hero-sub{font-size:clamp(20px,4.6vw,28px);font-weight:300;margin:16px 0;letter-spacing:-.02em;color:#fff}
.collab-hero .hero-body{color:#cfcfcf;max-width:34em;font-size:17px}
.collab-hero .hero-body b{color:#fff;font-weight:600}
.collab-hero .hero-perks{color:#fff}
.collab-hero .hero-perks li::before{color:#fff}
.collab-hero .btn-light:hover{background:transparent;color:#fff;border-color:#fff}
.collab-hero-art{position:relative;max-width:min(320px,100%);width:100%;margin-inline:auto;aspect-ratio:1;border:1px solid #262626;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c1c1c,#000 70%)}
.collab-tee{width:82%;height:auto}
.collab-tee path{fill:#fff;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.collab-tee-word{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);font-family:"WAW Script",cursive;font-size:clamp(24px,6vw,34px);color:#000;white-space:nowrap;line-height:1}
.collab-tee-tag{position:absolute;left:14px;bottom:14px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid #fff;color:#fff;padding:5px 8px}
body[data-page=collabs] .header-slot,body[data-page=collabs] .site-header{border-bottom-color:#000}
body[data-page=collabs] .ticker{border-top:1px solid #262626}

.collab-soon-head{flex-direction:column;align-items:flex-start}
.collab-soon{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.collab-card{display:flex;flex-direction:column}
.collab-card-media{position:relative;aspect-ratio:16/10;background:var(--grey-100);display:grid;place-items:center;overflow:hidden;border:1px dashed var(--grey-400)}
.collab-card-media.is-dark{background:#000;color:#fff;border-color:#000}
.collab-card-media .sil-tag{left:10px;top:10px;bottom:auto}
.collab-ph{font-family:"WAW Script",cursive;font-size:clamp(34px,8vw,52px);line-height:1.2;opacity:.9}
.collab-card-body{padding:12px 0 0}
.collab-card-body h3{font-size:clamp(18px,3.6vw,22px);letter-spacing:-.01em;margin:0 0 6px}
.collab-card-body p:not(.pcard-cat){color:var(--grey-600);font-size:14px;margin:0}

.collab-apply{border-top:1px solid var(--line)}
.collab-apply:focus{outline:none}
.collab-apply-grid{display:grid;gap:28px}
.collab-apply-intro h2{font-size:clamp(28px,6vw,48px);margin-bottom:16px;text-wrap:balance}
.collab-apply-intro h2 .hl{white-space:nowrap}
.collab-form select{background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;cursor:pointer}
.collab-apply-intro p:not(.eyebrow):not(.fine){color:var(--grey-800);font-size:17px;max-width:32em}
.collab-form-wrap{border:1px solid var(--line);padding:22px 18px;background:var(--white)}
.collab-form>.fine:first-child{margin:0 0 16px}
.collab-form .field .err{font-size:13px;margin:2px 0 0}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--black);border-width:2px}
.field textarea{resize:vertical;min-height:130px}
.field-hint{margin:0;text-align:right}
.collab-form .btn-block{margin-top:18px}
.collab-status{margin-top:16px;border:2px solid var(--black);padding:12px 14px;font-size:14px;background:var(--grey-50)}
.collab-status b{display:block;margin-bottom:2px}
.collab-done{text-align:left;padding:10px 0}
.collab-done:focus{outline:none}
.collab-done h3{font-size:clamp(26px,5.6vw,36px);margin:0 0 12px}
.collab-done p:not(.eyebrow):not(.fine){color:var(--grey-800)}
.collab-done-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.collab-done-actions .btn{flex:1 1 200px}
@media (min-width:600px){
  .collab-form-wrap{padding:32px}
}
@media (min-width:860px){
  .collab-soon-head{flex-direction:row;align-items:flex-end}
  .collab-hero-art{max-width:440px}
  .collab-soon{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .collab-card-media{aspect-ratio:1}
  .collab-apply-grid{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  .collab-apply-intro{position:sticky;top:96px}
}
@media (min-width:1060px){
  .collab-hero{padding:72px 0}
  .collab-hero-grid{grid-template-columns:1.1fr .9fr;gap:56px}
}

/* ===== home landing: full-bleed photoshoot hero (assets/img/hero-unbothered-*).
   Every width: photo/model on the right, white text on the dark left.
   Phones (<600px): tall 1080x1600 crop (hero-unbothered-phone), buttons below on black.
   Tablet (600–1099px) and desktop (≥1100px): landscape photo covers the section.
   Header height (announce bar + header) ≈ 109px, used for the section height. ===== */
.hero-photo{position:relative;padding:0;background:#000;isolation:isolate}
.hero-photo .hero-bg{position:absolute;left:0;right:0;top:0;overflow:hidden;background:#000;z-index:-1}
.hero-photo .hero-bg picture{display:block;width:100%;height:100%}
.hero-photo .hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 100%}
.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none}
.hero-photo .hero-grid{display:block;grid-template-columns:none;position:relative}
/* phone-only bits of the hero markup (sparkle icon, extra headline break) */
.hero-photo .hero-spark,.hero-photo .br-ph{display:none}
/* phone-only PSD headline + model cut-out: hidden on tablet/desktop (the model <picture> only has phone sources,
   so wider screens load nothing but a 1x1 data URI) */
.ph-head,.ph-model{display:none}
@font-face{font-family:"WAW Display";src:url(../assets/fonts/montserrat-black-latin.woff2) format("woff2");font-weight:900;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+2000-206F}
/* Phone (<600px): WAW's Photoshop landing design (landing-design.psd, 1080x1800 artboard), rebuilt in layers:
   doodle-pattern background -> live headline (logo W + "here" / "Faith Meets" / "Fashion", Montserrat Black,
   166.67px, tracking -50) -> the model cut-out on top (she overlaps "Fashion") -> white bottom bar with the
   black SHOP ALL pill. Everything is placed in artboard px via --u (1 artboard px), so it scales with the width.
   --u is the full-width scale (100vw/1080) unless the screen is so short that the "unbothered" print
   (artboard y 1290) would reach the bottom bar; then the artboard shrinks a little and is centred.
   The artboard is shifted down (--top) so the W clears the transparent header by 14px. Below / right of the
   artboard the model and pattern are simply cropped by the hero (bottom of the model, never the text). */
@media (max-width:599px){
  .hero-photo{--stage:max(520px,calc(100vh - 100px));--stage:max(520px,calc(100svh - 100px));
    --bar:86px;                                  /* white bottom bar: 20 + button 46 + 20 */
    --u:min(calc(100vw / 1080),calc((var(--stage) - var(--bar) - var(--hh,0px) - 26px) / 1170));
    --aw:calc(1080 * var(--u));
    --ax:calc((100vw - var(--aw)) / 2);           /* artboard left edge */
    --top:calc(var(--hh,0px) + 14px - 120 * var(--u));  /* artboard top: W (y 120) 14px under the header */
    display:block;min-height:var(--stage);height:var(--stage);background:#fff;color:#000}
  .hh-home .hero-photo{--stage:max(520px,calc(100vh - var(--ann,52px)));--stage:max(520px,calc(100svh - var(--ann,52px)))}
  .hero-photo .hero-grid,.hero-photo .hero-copy,.hero-photo .hero-text{display:contents}
  /* layer 1: pattern (white + doodles at 18%, flattened from the PSD), full width from the top */
  .hero-photo .hero-bg{position:absolute;inset:0;z-index:0;background:#fff}
  .hero-photo .hero-bg picture{position:absolute;inset:0}
  .hero-photo .hero-bg img{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1080/1973;object-fit:cover;object-position:50% 0}
  .js-anim .hero-photo .hero-bg img{animation:none}
  .hero-photo .hero-bg::after{content:none}
  /* layer 2: the headline (the real h1; its desktop spans are hidden here, the phone spans shown) */
  .hero-photo h1{position:absolute;z-index:1;left:var(--ax);top:var(--top);width:var(--aw);height:calc(620 * var(--u));margin:0;
    font:900 calc(166.6667 * var(--u))/1.218 "WAW Display","Montserrat","Outfit",system-ui,sans-serif;letter-spacing:-.05em;color:#000;pointer-events:none}
  .hero-photo h1 .h-main{display:none}
  .hero-photo .ph-head{display:block;position:absolute;inset:0}
  .ph-w{position:absolute;left:calc(54 * var(--u));top:calc(120 * var(--u));width:calc(219 * var(--u));height:calc(185 * var(--u));color:#000}
  .ph-w svg{display:block;width:100%;height:100%}
  /* each word: an overflow-hidden line box (the mask) placed so its baseline sits where the PSD has it
     (box top = baseline - 161 artboard px), 20px padding each side so the glyphs are never clipped */
  .ph-m{position:absolute;display:block;overflow:hidden;padding:0 calc(20 * var(--u));height:calc(203 * var(--u));white-space:nowrap}
  .ph-m>span{display:block}
  .ph-here{left:calc(181 * var(--u));top:calc(142 * var(--u));
    /* the h's stem is cut on the slant of the W, as in the PSD */
    clip-path:polygon(calc(88.2 * var(--u)) 0,100% 0,100% 100%,0 100%,0 calc(151.3 * var(--u)))}
  .ph-faith{left:calc(25 * var(--u));top:calc(283 * var(--u))}
  .ph-meets{left:calc(485 * var(--u));top:calc(283 * var(--u))}
  .ph-fashion{left:calc(25 * var(--u));top:calc(423 * var(--u))}
  /* layer 3: the model cut-out (PSD bbox 334,461 - 1234,2261), in front of the headline */
  .hero-photo .ph-model{display:block;position:absolute;z-index:2;inset:0;pointer-events:none}
  .ph-model img{position:absolute;left:calc(var(--ax) + 334 * var(--u));top:calc(var(--top) + 461 * var(--u));width:calc(900 * var(--u));height:calc(1800 * var(--u));max-width:none}
  .hero-photo .hero-spark{display:none}
  .hero-photo :focus-visible{outline-color:#000}
  .hero-photo .hero-sub,.hero-photo .hero-body,.hero-photo .hero-actions .btn-outline{display:none}
  /* layer 4: the PSD's white bottom bar, pinned to the bottom of the screen, with the pill in it */
  .hero-photo .hero-actions{position:absolute;z-index:3;left:0;right:0;bottom:0;height:var(--bar);margin:0;padding:20px;display:block;background:#fff;max-width:none;width:auto}
  .hero-photo .hero-actions .btn-primary,.hero-photo .hero-actions .btn-primary:hover{display:flex;width:100%;height:46px;min-height:46px;padding:0 20px;border-radius:0;background:#000;background-image:none;color:#fff;border-color:#000;font-size:15px;font-weight:800;letter-spacing:.08em}
  .hero-photo .hero-actions .btn-primary span{display:none}
  .js-anim .hero-photo .hero-actions{animation:none}
}
/* phone hero motion (CSS only, plays once; without it everything is simply static and visible):
   the W stamps in, then here / Faith / Meets / Fashion rise out of their line masks 120ms apart,
   the model fades and drifts up at the same time, and the pill fades in last. ~1.2s in total. */
@keyframes phStamp{0%{opacity:0;transform:scale(1.45)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes phRise{from{transform:translateY(102%)}to{transform:none}}
@keyframes phModel{from{opacity:0;transform:translateY(calc(40 * var(--u)))}to{opacity:1;transform:none}}
@keyframes phPill{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:599px) and (prefers-reduced-motion:no-preference){
  .ph-w{animation:phStamp .42s cubic-bezier(.2,.8,.2,1) .05s both;transform-origin:50% 55%}
  .ph-m>span{animation:phRise .6s cubic-bezier(.2,.75,.25,1) both}
  .ph-here>span{animation-delay:.24s}
  .ph-faith>span{animation-delay:.36s}
  .ph-meets>span{animation-delay:.48s}
  .ph-fashion>span{animation-delay:.6s}
  .ph-model img{animation:phModel .9s cubic-bezier(.2,.7,.2,1) .15s both}
  .hero-photo .hero-actions .btn-primary{animation:phPill .4s ease-out 1s both}
}
/* Tablet (600-1099px) and desktop (>=1100px): the landscape photo covers the whole section,
   anchored right; text on the empty left, with a soft shade that ends before the model. */
@media (min-width:600px){
  .hero-photo{display:flex;align-items:center;min-height:68vw}
  .hero-photo .hero-bg{bottom:0}
  .hero-photo .hero-bg img{object-position:100% 12%}
  .hero-photo .hero-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 34%,rgba(0,0,0,0) 50%)}
  .hero-photo .hero-grid{padding:48px 0}
  .hero-photo .hero-copy{max-width:44%}
  .hero-photo h1{font-size:clamp(30px,5vw,44px)}
  .hero-photo .hero-sub{font-size:clamp(18px,2.8vw,24px)}
  .hero-photo .hero-body{font-size:clamp(14px,1.9vw,16px)}
  .hero-photo .hero-actions .btn{flex:0 0 auto}
}
/* small tablets (600-767px): less room beside her, so a narrower, smaller text block */
@media (min-width:600px) and (max-width:767px){
  .hero-photo .hero-copy{max-width:40%}
  .hero-photo h1{font-size:4.7vw}
  .hero-photo .hero-sub{font-size:17px;margin:12px 0}
  .hero-photo .hero-body{font-size:13.5px}
  .hero-photo .hero-actions{margin:18px 0 0;gap:8px}
  .hero-photo .hero-actions .btn{font-size:11.5px;padding:12px 14px;min-height:42px;letter-spacing:.08em}
}
@media (min-width:1100px){
  .hero-photo{min-height:max(560px,min(calc(100vh - 109px),820px));min-height:max(560px,min(calc(100svh - 109px),820px))}
  .hero-photo .hero-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,0) 50%)}
  .hero-photo .hero-grid{padding:64px 0;width:min(100% - 64px,var(--wrap))}
  .hero-photo .hero-copy{max-width:min(700px,46vw)}
  .hero-photo h1{font-size:clamp(50px,4.6vw,80px)}
  .hero-photo .hero-sub{font-size:clamp(22px,5vw,30px)}
  .hero-photo .hero-body{font-size:17px}
}
@keyframes wawHeroIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@media (min-width:600px){.js-anim .hero-photo .hero-bg img{animation:wawHeroIn 2.2s cubic-bezier(.2,.7,.2,1) both;transform-origin:72% 35%}}
@media (prefers-reduced-motion:reduce){.js-anim .hero-photo .hero-bg img{animation:none}}

/* hero headline: the W of WHERE is the first W of the WAW logo (inline SVG, white on black).
   Sits on the baseline; ~28% taller than the caps (its top edge slants down to the left), with the slanted right side tucked under the H so it reads as the brand mark. */
.hero-dark .h-logo-w{display:inline-block;color:#fff;margin-right:-.07em;line-height:0}
.hero-dark .h-logo-w svg{display:inline-block;height:.9em;width:auto;aspect-ratio:129/138;vertical-align:baseline;overflow:visible}

/* ===== HOME only (html.hh-home, set by the inline script in index.html): transparent header over the hero photo; solid white once scrolled
   (js/home-header.js adds .is-solid past 60px, or while a drawer/search is open).
   Only colours/opacity transition, so nothing in the layout moves when it switches.
   The header (64px + 1px border) stays in the flow; the hero is pulled up under it. ===== */
.hh-home{--hh:65px;--ann:0px}
/* home has no announcement bar (js/app.js skips it on data-page=home): the pre-JS header placeholder is just the header */
.hh-home .header-slot{height:var(--hh)}
.hh-home .site-header{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.hh-home .site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 36px);background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0));pointer-events:none;z-index:-1;transition:opacity .3s ease}
.hh-home .site-header.is-solid::before{opacity:0}
.hh-home .site-header:not(.is-solid){background-color:transparent;color:#fff;border-bottom-color:transparent}
.hh-home .site-header:not(.is-solid) .nav a{color:#fff}
.hh-home .site-header:not(.is-solid) .nav a:hover{border-bottom-color:#fff}
.hh-home .site-header:not(.is-solid) .icon-btn:hover{background:rgba(255,255,255,.14)}
.hh-home .site-header:not(.is-solid) .count{background:#fff;color:#000}
.hh-home .site-header .nav a{transition:color .3s ease}
/* logo: white copy stacked on the black one, crossfaded; the sheen loop keeps running on both */
.hh-home .site-header .lockup-mark{transition:opacity .3s ease}
.hh-home .site-header .lockup-mark-w{position:absolute;left:0;top:0;opacity:0}
.hh-home .site-header:not(.is-solid) .lockup-mark-w{opacity:1}
.hh-home .site-header:not(.is-solid) .lockup-mark:not(.lockup-mark-w){opacity:0}
.hh-home .site-header:not(.is-solid) .logo-sheen{background-image:linear-gradient(105deg,transparent 0 38%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.05) 58%,transparent 62% 100%)}
/* hero runs up under the header (top of the page; no announcement bar on home) */
.hh-home .hero-photo{margin-top:calc(-1 * var(--hh))}
@media (min-width:600px){
  /* tablet keeps the same section height as before the overlay header (the header just sits over the
     top of the photo), so the model stays as far right as before and clear of the text */
  .hh-home .hero-photo{min-height:68vw}
  .hh-home .hero-photo .hero-grid{padding-top:calc(48px + var(--hh))}
}
@media (min-width:1100px){
  .hh-home .hero-photo{--hero-h:max(625px,min(calc(100vh - var(--ann,44px)),885px));--hero-h:max(625px,min(calc(100svh - var(--ann,44px)),885px));min-height:var(--hero-h)}
  /* centre the text block in the empty dark area left of the model. The photo is cover-scaled
     (s = max(width/1920, height/1080)) and anchored right, so her left edge (x 1097 of 1920 in the
     original) sits at 100% - 823*s; the block is pushed right so its right edge sits 48px before
     that point (toward the screen centre), min 32px from the screen edge, text left-aligned inside. */
  .hh-home .hero-photo .hero-grid{width:calc(100% - 823 * max(100% / 1920, var(--hero-h) / 1080));max-width:none;margin:0;
    padding:calc(64px + var(--hh)) 48px 64px 32px;display:flex;justify-content:flex-end}
  .hh-home .hero-photo .hero-copy{flex:0 1 auto;min-width:0;max-width:min(800px,100%)}
  /* desktop text ~15% bigger than the base hero (logo W and script F scale with the h1 em size) */
  .hh-home .hero-photo h1{font-size:clamp(54px,5.3vw,92px)}
  .hh-home .hero-photo .hero-sub{font-size:clamp(26px,2.4vw,35px)}
  .hh-home .hero-photo .hero-body{font-size:clamp(18px,1.36vw,19.5px)}
  .hh-home .hero-photo .hero-actions .btn{font-size:clamp(15px,1.12vw,16px);padding:17px 30px;min-height:57px}
}

/* ---------- Collection grids: a lone last card (e.g. if a 5th collection is added) ----------
   Instead of leaving an orphan in a half-empty row, it spans the row as a wide card:
   same image size as its neighbours (one column), the text beside it. Grids that fill
   their rows (2 per row on phones, 4 on desktop) are unaffected. */
.col-grid>:nth-child(odd):last-child:not(:first-child){grid-column:1/-1}
.col-grid>:nth-child(odd):last-child:not(:first-child) .col-card,
.col-grid>.col-card:nth-child(odd):last-child:not(:first-child){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;align-items:center}
.col-grid>:nth-child(odd):last-child:not(:first-child) .col-card-body,
.col-grid>.col-card:nth-child(odd):last-child:not(:first-child) .col-card-body{padding:0 4px 0 8px}
.col-grid>:nth-child(odd):last-child:not(:first-child) .col-card-body p:not(.pcard-cat),
.col-grid>.col-card:nth-child(odd):last-child:not(:first-child) .col-card-body p:not(.pcard-cat){display:block}
@media (min-width:860px){
  .col-grid>:nth-child(odd):last-child:not(:first-child){grid-column:auto}
  .col-grid>:nth-child(odd):last-child:not(:first-child) .col-card,
  .col-grid>.col-card:nth-child(odd):last-child:not(:first-child){display:flex}
  .col-grid>:nth-child(odd):last-child:not(:first-child) .col-card-body,
  .col-grid>.col-card:nth-child(odd):last-child:not(:first-child) .col-card-body{padding:12px 0 0}
  .col-grid>:nth-child(4n+1):last-child:not(:first-child){grid-column:1/-1}
  .col-grid>:nth-child(4n+1):last-child:not(:first-child) .col-card,
  .col-grid>.col-card:nth-child(4n+1):last-child:not(:first-child){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;align-items:center}
  .col-grid>:nth-child(4n+1):last-child:not(:first-child) .col-card-body,
  .col-grid>.col-card:nth-child(4n+1):last-child:not(:first-child) .col-card-body{grid-column:2/span 2;padding:0 0 0 24px;max-width:520px}
}

/* phone home hero is a LIGHT photo: header over it uses the black logo and black icons (placed last so it
   overrides the white transparent-header rules above; solid-on-scroll and drawers unchanged) */
@media (max-width:599px){
  /* home header over the light phone photo: black logo and icons (still transparent; turns solid white on scroll as before) */
  .hh-home .site-header:not(.is-solid){color:#000}
  .hh-home .site-header:not(.is-solid)::before{background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,0))}
  .hh-home .site-header:not(.is-solid) .nav a{color:#000}
  .hh-home .site-header:not(.is-solid) .icon-btn:hover{background:rgba(0,0,0,.06)}
  .hh-home .site-header:not(.is-solid) .count{background:#000;color:#fff}
  .hh-home .site-header:not(.is-solid) .lockup-mark-w{opacity:0}
  .hh-home .site-header:not(.is-solid) .lockup-mark:not(.lockup-mark-w){opacity:1}
  .hh-home .site-header:not(.is-solid) .logo-sheen{background-image:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.08) 58%,transparent 62% 100%)}
}

/* ---------- "How it works" strips (home + collabs): black section, white text ----------
   Same #000 as the landing hero; step numbers/body in light grey, dividers white/translucent.
   Layout, spacing and copy unchanged. Neighbours are white, so no extra separation is needed. */
.how-strip{background:#000;color:#fff;border-top:0}
.how-strip .eyebrow{color:#bdbdbd}
.how-strip h2,.how-strip h3{color:#fff}
.how-strip .steps{border-top-color:rgba(255,255,255,.28)}
.how-strip .steps li{border-bottom-color:rgba(255,255,255,.28)}
.how-strip .steps b{color:#bdbdbd}
.how-strip .steps p{color:#cfcfcf}
.how-strip a{color:#fff}
.how-strip :focus-visible{outline-color:#fff}
.how-strip .btn-primary{background:#fff;color:#000;border-color:#fff}
.how-strip .btn-outline,.how-strip .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.how-strip+.collab-apply{border-top:0}
@media (min-width:860px){
  .how-strip .steps li{border-bottom:0;border-top-color:#fff}
}

/* ===== Site background (background-design.psd): white + WAW's doodle pattern at 18%, on every page =====
   site-bg-tile = the PSD's pattern flattened over white and mirrored 2x2, so it repeats seamlessly in both
   directions. A plain body background that scrolls with the page (no fixed layer, no background-attachment:fixed,
   so nothing extra to repaint while scrolling and no iOS issues). Darkest pattern pixel is #ededed, so text keeps
   AA contrast; product cards, text-heavy blocks, forms and drawers sit on white panels anyway. */
/* Pattern strength: --pattern-opacity = how strong the doodles show (the tile itself is baked at .18, as in the PSD).
   A white veil layered over the tile fades it: veil alpha = 1 - opacity/.18. Was .18 (full tile); now .09 (half).
   Change only this number to tweak it site-wide (0 = plain white, .18 = original). The black welcome splash is separate. */
:root{--pattern-opacity:.09;--pattern-veil:rgba(255,255,255,calc(1 - var(--pattern-opacity) / .18))}
body{background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(../assets/img/site-bg-tile.jpg);
  background-image:linear-gradient(var(--pattern-veil),var(--pattern-veil)),image-set(url(../assets/img/site-bg-tile.webp) type("image/webp"),url(../assets/img/site-bg-tile.jpg) type("image/jpeg"));
  background-repeat:repeat;background-position:50% 0;background-size:1104px auto}
@media (max-width:599px){body{background-size:780px auto}}
/* light page sections go transparent so the pattern shows (black sections, the heroes, header and drawers keep theirs) */
.hero:not(.hero-photo),.sec-paper:not(.how-strip),.story,.lookbook,.about-strip,.shop-head,.page-hero,.confirm-wrap{background:transparent}
.site-footer{background:rgba(255,255,255,.86)}
.toolbar{background:rgba(255,255,255,.95)}
/* white panels where there is something to read or click */
.pcard,.col-card,.collab-card{background:#fff}
.collab-card-body{padding:12px 12px 16px}
.pcard-body{padding:10px 10px 2px}
.col-card-body{padding:12px 12px 14px}
.page-body .prose,.faq-list,.contact-card,.co-form,.lines-lg,.cart-empty,.pdp-info,.empty{background:#fff}
.page-body .prose{padding:24px 20px 28px}
.page-body .prose>:first-child{margin-top:0}
.co-form{padding:20px 16px 4px}
.lines-lg{padding:0 16px}
.pdp-info{padding:20px 16px}
@media (min-width:768px){
  .page-body .prose{padding:40px 44px 44px}
  .co-form{padding:28px 28px 8px}
  .pdp-info{padding:28px 28px}
}
/* admin: the pattern behind, the sign-in card and the whole dashboard on solid white (data-dense, so no pattern under it) */
body.admin{background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(../assets/img/site-bg-tile.jpg);
  background-image:linear-gradient(var(--pattern-veil),var(--pattern-veil)),image-set(url(../assets/img/site-bg-tile.webp) type("image/webp"),url(../assets/img/site-bg-tile.jpg) type("image/jpeg"))}
.admin .ad-card,.admin #ad-app{background:#fff}
.admin #ad-app{padding:16px;border:1px solid var(--line)}
@media (min-width:768px){.admin #ad-app{padding:24px 28px}}

/* ===== WELCOME SPLASH (index.html only) =====
   Gucci-style black entry screen before the home page. Markup + tiny inline script live in
   index.html (generated by gen.py: SPLASH). Visible only while <html class="splash-on">, which the
   inline head script sets when sessionStorage "waw_welcomed" is missing. Tapping SHOP sets the flag,
   fades the screen out and reveals the home page. No JS → no splash. */
.splash{display:none}
.splash-on,.splash-on body{overflow:hidden;background:#000}
.splash-on .splash,.splash.is-leaving{display:flex}
.splash{position:fixed;inset:0;z-index:10000;flex-direction:column;align-items:center;justify-content:center;
  background:#000;color:#fff;text-align:center;padding:0;
  /* --u = one CSS px of WAW's 440px-wide iPhone reference; grows with width up to 600px (desktop ≈1.36x phone) */
  --u:calc(min(100vw,600px) / 440);
  opacity:1;transition:opacity .6s ease,visibility 0s linear .6s}
.splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
/* the site-wide doodle pattern (site-bg-tile, already loaded for body), inverted to dark grey lines on black:
   lines ≈ #191919, so it reads as texture only. No extra download. */
.splash::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../assets/img/site-bg-tile.jpg);
  background-image:image-set(url(../assets/img/site-bg-tile.webp) type("image/webp"),url(../assets/img/site-bg-tile.jpg) type("image/jpeg"));
  background-repeat:repeat;background-position:50% 0;background-size:1104px auto;filter:invert(1);opacity:.8}
@media (max-width:599px){.splash::before{background-size:780px auto}}
.splash-inner,.splash-verse{z-index:1}
.splash-inner{position:absolute;left:0;right:0;top:33.4%;display:flex;flex-direction:column;align-items:center;padding:0 20px}
.splash-logo{width:calc(142 * var(--u));height:auto;max-width:none;display:block}
.splash-title{margin:calc(39 * var(--u)) 0 calc(54 * var(--u));font-weight:300;font-size:calc(17.75 * var(--u));
  line-height:1.2;letter-spacing:.01em;color:#fff}
.splash-shop{display:block;width:calc(261 * var(--u));max-width:100%;height:calc(44 * var(--u));padding:0 16px;border:1px solid #fff;border-radius:0;
  background:#fff;color:#000;font-family:var(--font);font-weight:500;font-size:calc(10 * var(--u));letter-spacing:.24em;text-indent:.24em;
  line-height:1;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
.splash-shop:hover{background:transparent;color:#fff}
.splash-shop:focus-visible{outline:2px solid #fff;outline-offset:4px}
.splash-verse{position:absolute;left:0;right:0;top:79.4%;margin:0;padding:0 20px;
  font-weight:300;font-size:calc(10 * var(--u));letter-spacing:.03em;line-height:1.5;color:#9a9a9a}
/* short/landscape screens: stack from the top and keep the verse clear of the button */
@media (max-height:560px){.splash-inner{top:14%}.splash-verse{top:auto;bottom:calc(16px + env(safe-area-inset-bottom))}}
/* hold the hero intro animations until the splash is dismissed, so they play on reveal */
.splash-on .hero,.splash-on .hero *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.splash{transition:none}}

/* ===== PHONE VIDEO LANDING (index.html, <600px only) =====
   Phones: WAW's landing video full-screen (cover) with only a SHOP ALL button over the bottom; the photo
   hero (.hero-photo) is hidden. Tablet/desktop (>=600px): the photo hero exactly as before; this section is
   display:none and its <video> has no sources there (the inline script in index.html only adds them on
   phones), so the video is never downloaded. Video: assets/video/hero/hero-landing-trio-720.(mp4|webm) = WAW's 3 clips (white Unbothered, cream WHAT iF…, black Try Jesus tee) joined into one seamless 45s loop, muted,
   no audio track. Height 100dvh so it fills the screen exactly as the browser toolbar shows/hides.
   Poster = first frame (no blank flash); reduced motion = a still frame, no video. */
.hero-video{display:none}
@media (max-width:599px){
  .hh-home .hero-photo{display:none}
  .hero-video{display:block;position:relative;overflow:hidden;height:100vh;height:100dvh;min-height:520px;
    margin-top:calc(-1 * var(--hh,0px));background-color:#e6e5e8;
    background-image:url(../assets/img/hero-landing-trio-poster.jpg);
    background-image:image-set(url(../assets/img/hero-landing-trio-poster.webp) type("image/webp"),url(../assets/img/hero-landing-trio-poster.jpg) type("image/jpeg"));
    background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
  .hv-media{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;background:transparent}
  .hv-shop{position:absolute;z-index:2;left:20px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:1px solid #000;border-radius:0;
    background:#000;color:#fff;font-weight:600;font-size:14px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;text-decoration:none;
    transition:background .2s ease,color .2s ease}
  .hv-shop:hover{background:#fff;color:#000}
  .hv-shop:focus-visible{outline:2px solid #000;outline-offset:3px}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){
  .hero-video{background-image:url(../assets/img/hero-landing-trio-still.jpg);
    background-image:image-set(url(../assets/img/hero-landing-trio-still.webp) type("image/webp"),url(../assets/img/hero-landing-trio-still.jpg) type("image/jpeg"))}
}

/* ================= TRY THE LOOK (home page, desktop ≥1024px only) =================
   Markup: index.html (#try-the-look, built by waw-build/gen.py) · logic: js/try-the-look.js · data: tryTheLook in js/config.js.
   Hidden below 1024px (tablets/phones keep the existing home layout). The stage is an isolated layer:
   the product photos (white backgrounds) multiply onto the off-white studio gradient, so they read as cut-outs. */
.ttl{display:none}
@media (min-width:1024px){
  .ttl{display:block;padding:56px 0 64px}
  .ttl-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:28px;align-items:stretch}
  .ttl-main{display:flex;flex-direction:column;min-width:0}
  .ttl-stage{position:relative;isolation:isolate;height:clamp(540px,66vh,660px);overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
    background:radial-gradient(115% 85% at 50% 40%,#ffffff 0%,#f7f6f3 46%,#ecebe6 100%)}
  .ttl-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.035));}
  .ttl-stage.is-dragging{cursor:grabbing}
  .ttl-stage:focus-visible{outline:2px solid var(--black);outline-offset:-2px}
  .ttl-title{position:absolute;top:30px;left:34px;z-index:200;margin:0;font-size:clamp(36px,3.4vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1;pointer-events:none}
  .ttl-hint{position:absolute;top:40px;right:30px;z-index:200;margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600);pointer-events:none}
  .ttl-track{position:absolute;inset:0}
  .ttl-look{position:absolute;left:50%;bottom:6%;width:min(480px,56%);display:block;transform-origin:50% 100%;will-change:transform,opacity;mix-blend-mode:multiply;text-decoration:none;-webkit-user-drag:none}
  .ttl-look.is-center{cursor:none}
  .ttl-stage.is-dragging .ttl-look{cursor:grabbing}
  .ttl-fig{position:relative;width:100%;aspect-ratio:10/9}
  .ttl-fig img{width:100%;height:auto;display:block;mix-blend-mode:multiply;pointer-events:none}
  .ttl-pc{position:absolute}
  .ttl-n1 .ttl-pc-0{left:15%;top:0;width:70%}
  .ttl-n2 .ttl-pc-0{left:0;top:2%;width:64%}
  .ttl-n2 .ttl-pc-1{right:0;bottom:3%;width:46%}
  .ttl-n3 .ttl-pc-0{left:0;top:5%;width:62%}
  .ttl-n3 .ttl-pc-1{right:0;top:0;width:40%}
  .ttl-n3 .ttl-pc-2{right:0;bottom:0;width:40%}
  /* a real model photo (config image): fills the frame, standing on the floor */
  .ttl-fig-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
  .ttl-bar{position:relative;height:2px;margin-top:14px;background:var(--grey-200);overflow:hidden}
  .ttl-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--black);will-change:transform}

  .ttl-side{display:flex;flex-direction:column;min-height:0;height:calc(clamp(540px,66vh,660px) + 16px);background:var(--white);border-top:2px solid var(--black)}
  .ttl-side-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 0 14px;border-bottom:1px solid var(--line)}
  .ttl-side-head h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .ttl-count{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600)}
  .ttl-list{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow:auto;min-height:0}
  .ttl-item{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .ttl-thumb{display:block;width:84px;height:84px;background:#f1f1f1;overflow:hidden}
  .ttl-thumb picture,.ttl-thumb img{width:100%;height:100%}
  .ttl-thumb img{object-fit:cover;object-position:50% 40%;mix-blend-mode:multiply;transform:scale(1.18)}
  .ttl-info p{margin:0}
  .ttl-brand{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .ttl-name{display:block;font-size:14px;line-height:1.3;text-decoration:none;margin:2px 0}
  .ttl-name:hover{text-decoration:underline}
  .ttl-meta{font-size:12px;color:var(--grey-600)}
  .ttl-price{font-size:14px;font-weight:700;margin-top:2px!important}
  .ttl-size select{font:inherit;font-size:13px;font-weight:600;height:36px;padding:0 8px;border:1px solid var(--grey-400);border-radius:0;background:var(--white);color:var(--ink);cursor:pointer}
  .ttl-out{margin:0;font-size:12px;font-weight:600;color:var(--grey-600);text-transform:uppercase;letter-spacing:.1em}
  .ttl-cta{position:sticky;bottom:0;background:var(--white);padding:18px 0 0;border-top:1px solid var(--line)}
  .ttl-cta-h{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
  .ttl-sub{margin:2px 0 12px;font-size:13px;color:var(--grey-600)}
  .ttl-err{margin:-6px 0 10px;font-size:13px;font-weight:600;color:var(--black)}
  .ttl-add{display:flex;width:100%;justify-content:center;align-items:center;gap:10px;height:54px;border:0;border-radius:0;background:var(--black);color:var(--white);font-weight:700;font-size:15px;cursor:pointer;transition:background .2s}
  .ttl-add:hover{background:var(--grey-800)}

  .ttl-cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;will-change:transform}
  .ttl-cursor span{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:var(--black);color:var(--white);display:grid;place-items:center;
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:scale(.3);transition:opacity .2s,transform .28s cubic-bezier(.2,.8,.2,1)}
  .ttl.is-view .ttl-cursor span{opacity:1;transform:scale(1)}
}
@media (min-width:1024px) and (hover:none){.ttl-look.is-center{cursor:pointer}.ttl-cursor{display:none}}
@media (prefers-reduced-motion:reduce){.ttl-cursor span,.ttl-add{transition:none}}

/* out of stock (all sizes at 0 in product_stock) */
.oos-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--black);color:var(--white);padding:4px 8px;line-height:1.4;white-space:nowrap}
.pcard-media .oos-badge{position:absolute;left:12px;bottom:12px;z-index:3}
.pcard.is-oos .pcard-media img{opacity:.6}
.oos-text{font-weight:400;color:var(--grey-600)}
.oos-inline{vertical-align:middle;margin-left:8px}
#add.is-oos,#add:disabled{background:var(--grey-200,#e5e5e5);border-color:var(--grey-200,#e5e5e5);color:var(--grey-600,#666);cursor:not-allowed}
.line.is-oos .line-img{opacity:.55}
.line-oos{margin:0 0 8px;font-size:12px;color:var(--grey-600)}
.line-oos .oos-badge{margin-right:6px}
.btn.is-disabled{opacity:.45;pointer-events:none}
.ttl-add:disabled{opacity:.45;cursor:not-allowed}