/* =====================================================================
   TRIMOND — THEME STYLES
   Colours + fonts are injected from config/site.config.js as CSS
   variables (see js/core.js → applyTheme). Defaults below are fallbacks.
   ===================================================================== */
:root{
  --bg:#F5F4F0; --surface:#EBEAE5; --ink:#0E0E0E; --muted:#6E6C67; --line:#DCDAD4;
  --dark:#0B0B0B; --on-dark:#F5F4F0;
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,2.4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ann-h:34px; --head-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.is-locked{overflow:hidden}

/* ---------- Type helpers ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--muted)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
.btn svg{width:14px;height:14px;flex:none}
.btn--light{background:var(--on-dark);color:var(--ink)}
.btn--light::before{background:var(--ink)}
.btn--light:hover{color:var(--on-dark)}
.btn--dark{background:var(--ink);color:var(--on-dark)}
.btn--dark::before{background:#3a3a38}
.btn--outline{border:1px solid currentColor}
.btn--outline::before{background:var(--ink)}
.btn--outline:hover{color:var(--on-dark)}
.btn--block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.link-arrow svg{transition:transform .4s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.u-line{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.u-line:hover{background-size:100% 1px}

/* ---------- Pixel page transition ---------- */
.pixels{position:fixed;inset:0;z-index:999;pointer-events:none;background:var(--bg)}
.pixels.is-built{background:transparent}
.pixels>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pixels.is-done{visibility:hidden}
.pixels.is-leaving,.pixels.is-intro{pointer-events:all}
.pixels:not(.is-built){animation:pxSafety 0s 2.5s forwards}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:block}

/* intro loader */
.loader{position:absolute;inset:0;z-index:2;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.loader__top,.loader__bottom{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:20px}
.loader__top{top:22px;transition:opacity .4s,transform .6s var(--ease)}
.loader__bottom{bottom:22px;align-items:flex-end}
.loader__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:28px}
.loader__mark{display:block;width:clamp(72px,8.5vw,124px);height:auto;overflow:visible;transition:transform 1.05s cubic-bezier(.7,0,.2,1),color .4s .6s,stroke-width 1s var(--ease),opacity .35s}
.loader__mark path{stroke-dasharray:1 1;stroke-dashoffset:1}
.loader__word{display:flex;font-family:var(--sans);font-weight:600;font-size:clamp(24px,3.4vw,54px);letter-spacing:.34em;padding-left:.34em;line-height:1}
.loader__word span{display:inline-block;min-width:.72em;text-align:center;color:var(--muted);transition:transform .9s var(--ease),opacity .6s,filter .7s;transition-delay:calc(var(--i)*30ms)}
.loader__word span.is-locked{color:var(--ink)}
.loader__count{overflow:hidden;font-family:var(--sans);font-weight:500;font-size:clamp(72px,12vw,200px);letter-spacing:-.06em;line-height:.82;font-variant-numeric:tabular-nums;padding-top:.04em}
.loader__count span{display:block;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.loader__status{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-bottom:6px;transition:opacity .4s,transform .6s var(--ease)}
.loader__bar{position:relative;width:clamp(120px,18vw,260px);height:1px;background:rgba(0,0,0,.12);overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.loader.is-out .loader__top,.loader.is-out .loader__status{opacity:0;transform:translateY(-10px)}
.loader.is-out .loader__count span{transform:translateY(105%)}
.loader.is-out .loader__word span{opacity:0;filter:blur(10px);transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0))}
.header .logo svg,.header .logo img{transition:opacity .35s}
html.fx-intro .header .logo svg,html.fx-intro .header .logo img{opacity:0}
.hero__media{transition:filter 1.8s var(--ease)}
html.fx-intro:not(.fx-out) .hero__media{filter:blur(18px) brightness(1.3) saturate(.2)}
@keyframes pxSafety{to{visibility:hidden}}

/* ---------- Top bar + header ---------- */
.site-top{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .55s var(--ease)}
.site-top.is-hidden{transform:translateY(-100%)}
.announcement{height:var(--ann-h);background:var(--ink);color:var(--on-dark);overflow:hidden;display:flex;align-items:center}
.announcement__track{display:flex;gap:56px;white-space:nowrap;padding-left:56px;animation:marquee var(--marquee,38s) linear infinite;will-change:transform}
.announcement__track span{display:inline-flex;align-items:center;gap:56px}
.announcement__track span::after{content:"◆";font-size:7px;opacity:.6}
@keyframes marquee{to{transform:translateX(-50%)}}
.header{height:var(--head-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line);transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.site-top.is-overlay .header{background:transparent;color:var(--on-dark);border-color:transparent}
.header__nav{display:flex;gap:28px}
.header__nav a{font-size:13px;font-weight:500}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:.28em;padding-left:.28em}
.logo svg{width:18px;height:18px}
.logo img{height:22px;width:auto}
.header__actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.icon-btn{position:relative;width:44px;height:44px;display:inline-grid;place-items:center}
.icon-btn svg{width:20px;height:20px}
.cart-count{position:absolute;top:6px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:currentColor;display:grid;place-items:center}
.cart-count b{font:600 10px/1 var(--sans);color:var(--bg)}
.site-top.is-overlay .cart-count b{color:var(--ink)}
.cart-count.is-empty{display:none}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.menu-toggle{display:none}
.page-offset{padding-top:calc(var(--ann-h) + var(--head-h))}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--on-dark);padding:calc(var(--head-h) + 32px) var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io);visibility:hidden}
.mobile-menu.is-open{clip-path:inset(0);visibility:visible}
.mobile-menu__close{position:absolute;top:10px;right:var(--gutter)}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{font-size:clamp(36px,10vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.05;overflow:hidden}
.mobile-menu nav a span{display:inline-block;transform:translateY(110%);transition:transform .7s var(--ease);transition-delay:calc(var(--i)*60ms + .2s)}
.mobile-menu.is-open nav a span{transform:none}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Split words ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;transform:translateY(105%);filter:blur(8px);transition:transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--i)*80ms + var(--base,300ms))}
.is-in .split .w>span,.split.is-in .w>span{transform:none;filter:none}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--dark);color:var(--on-dark)}
.hero__media{position:absolute;inset:-4% 0 0;will-change:transform}
.hero__media img,.hero__media video{width:100%;height:104%;object-fit:cover}
.hero__media.slow-zoom img{animation:slowZoom 18s var(--ease) both}
@keyframes slowZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,var(--shade,.38)) 60%,rgba(0,0,0,.55))}
.hero__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.hero__eyebrow{opacity:0;transform:translateY(10px);transition:all .9s var(--ease) .2s}
.hero__title{margin:14px 0 26px;font-size:clamp(46px,7.4vw,118px);line-height:.95;font-weight:600;letter-spacing:-.05em}
.hero__cta{opacity:0;transform:translateY(14px);transition:all .9s var(--ease) .85s}
.hero.is-in .hero__eyebrow,.hero.is-in .hero__cta{opacity:1;transform:none}
.hero__scroll{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);width:1px;height:44px;background:rgba(255,255,255,.25);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;inset:0;background:var(--on-dark);animation:scrollLine 2.2s var(--ease-io) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- SHOWCASE ---------- */
.showcase{position:relative;height:max(640px,92vh);background:var(--surface);overflow:hidden;user-select:none;touch-action:pan-y;outline:none}
.showcase__text{position:absolute;z-index:3;left:var(--gutter);top:13%;width:min(30vw,420px)}
.showcase__swap{position:relative}
.showcase__item{transition:opacity .6s var(--ease),transform .7s var(--ease)}
.showcase__item.is-out{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transform:translateY(-18px)}
.showcase__item.is-enter{opacity:0;transform:translateY(22px)}
.showcase__title{margin:14px 0 14px;font-size:clamp(34px,3.9vw,62px);line-height:1;font-weight:500;letter-spacing:-.04em}
.showcase__price{font-size:17px;margin-bottom:22px}
.showcase__shop{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line);background:var(--bg);font-size:12px;font-weight:500;transition:border-color .3s}
.showcase__shop:hover{border-color:var(--ink)}
.showcase__stage{position:absolute;inset:0}
.showcase__track{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform}
.showcase__track.is-snapping{transition:transform .9s var(--ease)}
.showcase__slide{flex:0 0 var(--slide-w);height:100%;background:var(--surface);display:flex;align-items:center;justify-content:center;transform-origin:50% 60%}
.showcase__track.is-snapping .showcase__slide{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.showcase__slide img{height:84%;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none}
.showcase__bottom{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.showcase__count{display:flex;align-items:center;gap:14px}
.showcase__bar{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden}
.showcase__bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transition:transform .8s var(--ease)}
.showcase__arrows{display:flex;gap:4px}
.drag-cursor{--x:-200px;--y:-200px;position:fixed;z-index:40;left:0;top:0;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;background:var(--ink);color:var(--on-dark);display:grid;place-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transform:translate(var(--x),var(--y)) scale(0);transition:transform .35s var(--ease) ,width .3s,height .3s;will-change:transform}
.drag-cursor.is-on{transform:translate(var(--x),var(--y)) scale(1)}
.drag-cursor.is-down{transform:translate(var(--x),var(--y)) scale(.75)}
.has-drag-cursor,.has-drag-cursor *{cursor:none!important}

/* ---------- PRODUCT ROW / GRID ---------- */
.section{padding:56px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gutter);margin-bottom:22px}
.section__title{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.03em}
.section__tools{display:flex;align-items:center;gap:18px}
.arrow-btn{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;transition:border-color .3s,background-color .3s,color .3s}
.arrow-btn:hover{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.arrow-btn svg{width:14px;height:14px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--gutter)*2 - 12px*4)/5.4);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter) 6px;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail.is-dragging a{pointer-events:none}
.rail>*{scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 12px;padding:0 var(--gutter)}

.card{position:relative;min-width:0}
.card__frame{position:relative}
.card__media{position:relative;display:block;aspect-ratio:4/5;background:var(--surface);overflow:hidden}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
.card__media .card__alt{opacity:0}
.card:hover .card__media img{transform:scale(1.045)}
.card__badge{position:absolute;z-index:2;top:10px;left:10px;padding:4px 7px;background:var(--bg);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.card__quick{position:absolute;z-index:3;right:8px;bottom:8px;width:34px;height:34px;display:grid;place-items:center;background:var(--bg);transition:transform .4s var(--ease),background-color .3s,color .3s}
.card__quick:hover{background:var(--ink);color:var(--on-dark)}
.card__quick svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.card.is-quick .card__quick svg{transform:rotate(45deg)}
.card__sizes{position:absolute;z-index:2;left:8px;right:50px;bottom:8px;display:flex;flex-wrap:wrap;gap:4px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.card.is-quick .card__sizes{opacity:1;transform:none;pointer-events:auto}
.card__sizes button{min-width:34px;height:34px;padding:0 8px;background:var(--bg);font-size:11px;font-weight:500;transition:background-color .25s,color .25s}
.card__sizes button:hover{background:var(--ink);color:var(--on-dark)}
.card__info{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;font-weight:500}
.card__price{white-space:nowrap}
.card__meta{font-size:12px;color:var(--muted);margin-top:2px}
.card__swatches{display:flex;gap:6px;margin-top:8px}
.swatch{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);position:relative}
.swatch::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid transparent;transition:border-color .25s}
.swatch.is-active::after{border-color:var(--ink)}
.swatch-hit{display:inline-grid;place-items:center;width:22px;height:22px;margin:-4px}

/* ---------- BRAND REVEAL ---------- */
.reveal-scene{position:relative;height:240vh;background:var(--dark);color:var(--on-dark)}
.reveal-scene__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.reveal-scene__media{position:absolute;inset:0;clip-path:inset(var(--iy,24%) var(--ix,32%));will-change:clip-path}
.reveal-scene__media img{width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1.25));will-change:transform}
.reveal-scene__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.reveal-scene__type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.reveal-scene__word{display:flex;font-size:clamp(64px,15vw,260px);font-weight:600;letter-spacing:-.045em;line-height:.86;transform:scale(var(--ws,1.2))}
.reveal-scene__word span{display:inline-block;transform:translateY(var(--ly,60%));opacity:var(--lo,0)}
.reveal-scene__desc{margin-top:18px;font-family:var(--mono);font-size:clamp(11px,1vw,14px);letter-spacing:var(--dls,.8em);text-transform:uppercase;opacity:var(--do,0);padding-left:var(--dls,.8em)}
.reveal-scene__caption{position:absolute;left:var(--gutter);bottom:28px;max-width:320px;font-size:13px;opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0))*12px))}

/* ---------- STATEMENT ---------- */
.statement{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--dark);color:#fff;display:grid;place-items:center}
.statement__media{position:absolute;inset:-12% 0;will-change:transform}
.statement__media img{width:100%;height:100%;object-fit:cover}
.statement__media::after{content:"";position:absolute;inset:0;background:rgba(10,12,14,.32)}
.statement__text{position:relative;z-index:2;margin:0;padding:0 var(--gutter);max-width:1000px;text-align:center;font-size:clamp(30px,4.2vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1.04}
.statement__text span{opacity:.18;transition:opacity .5s var(--ease)}
.statement__text span.is-lit{opacity:1}

/* ---------- SOCIAL ---------- */
.social{padding:72px 0 40px}
.social__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gutter);margin-bottom:24px}
.social__handle{margin:0;font-size:clamp(34px,4.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.social__text{margin:10px 0 0;color:var(--muted);font-size:14px}
.social .rail{grid-auto-columns:calc((100% - var(--gutter)*2 - 12px*3)/4.3)}
.look{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--dark);color:#fff;display:block}
.look img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.look:hover img{transform:scale(1.06)}
.look__cap{position:absolute;left:16px;right:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.55;white-space:pre-line;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.look__cap--top{top:16px}.look__cap--bottom{bottom:16px}
.look--brand{display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:var(--ink)}
.look--brand>svg{width:46%;height:auto;margin:auto;opacity:.9;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.look--brand .logo{color:#fff;font-size:15px}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:56px var(--gutter) 0;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer__news h3{margin:0 0 6px;font-size:22px;font-weight:500;letter-spacing:-.03em}
.footer__news p{margin:0 0 18px;color:var(--muted);font-size:14px}
.news-form{display:flex;max-width:380px;border-bottom:1px solid var(--ink)}
.news-form input{flex:1;min-width:0;height:44px;border:0;background:transparent;outline:none;font-size:14px}
.news-form button{width:44px;height:44px;display:grid;place-items:center}
.footer__col h4{margin:0 0 14px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.footer__col a{display:block;width:max-content;font-size:14px;padding:4px 0}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer__bottom nav{display:flex;gap:18px}
.footer__mark{display:flex;justify-content:space-between;margin:28px 0 -0.16em;font-size:21.5vw;font-weight:600;letter-spacing:-.06em;line-height:.8;color:var(--ink)}
.footer__mark span{display:inline-block;transform:translateY(100%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--i)*55ms)}
.footer__mark.is-in span{transform:none}

/* ---------- STICKY ADD-TO-CART PILL ---------- */
.pill{position:fixed;z-index:45;left:50%;bottom:18px;display:flex;align-items:center;gap:14px;padding:6px 6px 6px 6px;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.12);transform:translate(-50%,calc(100% + 40px));transition:transform .7s var(--ease)}
.pill.is-visible{transform:translate(-50%,0)}
.pill__thumb{width:40px;height:40px;background:var(--surface);flex:none;overflow:hidden}
.pill__thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pill__body{display:flex;align-items:center;gap:22px;min-width:0;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.pill__body.is-swapping{opacity:0;transform:translateY(6px)}
.pill__name{font-size:12px;font-weight:600;line-height:1.2;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill__sub{font-size:11px;color:var(--muted)}
.pill__price{font-size:13px;font-weight:500}
.pill .btn{min-height:40px;padding:0 16px;gap:8px}
.pill .btn svg{width:14px;height:14px}

/* ---------- CART DRAWER ---------- */
.overlay{position:fixed;inset:0;z-index:70;background:rgba(10,10,10,.2);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.overlay.is-open{opacity:1;visibility:visible}
.drawer{position:fixed;z-index:71;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--ease-io)}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);padding:0 12px 0 22px;border-bottom:1px solid var(--line)}
.drawer__head h2{margin:0;font-size:16px;font-weight:500}
.drawer__ship{padding:14px 22px;border-bottom:1px solid var(--line);font-size:12px}
.drawer__ship .bar{height:2px;background:var(--line);margin-top:8px;overflow:hidden}
.drawer__ship .bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transition:transform .8s var(--ease)}
.drawer__items{flex:1;overflow:auto;padding:8px 22px}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);animation:lineIn .6s var(--ease) both}
@keyframes lineIn{from{opacity:0;transform:translateX(16px)}}
.line__img{aspect-ratio:4/5;background:var(--surface)}
.line__img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.line__name{font-size:13px;font-weight:600}
.line__opts{font-size:12px;color:var(--muted);margin:2px 0 10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:32px;height:32px;display:grid;place-items:center}
.qty span{min-width:22px;text-align:center;font-size:12px}
.line__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;font-size:13px}
.line__remove{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:32px}
.drawer__empty{padding:48px 0;text-align:center}
.drawer__empty p{margin:0 0 18px;font-size:22px;letter-spacing:-.02em}
.drawer__foot{padding:18px 22px 22px;border-top:1px solid var(--line)}
.drawer__total{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.drawer__foot small{display:block;margin:4px 0 14px;color:var(--muted);font-size:12px}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:80;left:var(--gutter);bottom:18px;padding:12px 16px;background:var(--ink);color:var(--on-dark);font-size:12px;transform:translateY(calc(100% + 40px));transition:transform .6s var(--ease)}
.toast.is-on{transform:none}

/* ---------- COLLECTION PAGE ---------- */
.coll-head{padding:48px var(--gutter) 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.coll-head h1{margin:0;font-size:clamp(44px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.coll-head p{margin:12px 0 0;max-width:420px;color:var(--muted);font-size:14px}
.coll-head .count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.toolbar{position:sticky;top:calc(var(--ann-h) + var(--head-h));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px var(--gutter);margin-bottom:24px;background:var(--bg);border-bottom:1px solid var(--line);transition:top .55s var(--ease)}
.site-top.is-hidden ~ main .toolbar{top:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:36px;padding:0 14px;border:1px solid var(--line);font-size:12px;font-weight:500;transition:all .3s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.toolbar__right{display:flex;gap:8px;align-items:center}
.search-field{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);min-width:220px}
.search-field svg{width:14px;height:14px;flex:none}
.search-field input{border:0;outline:0;background:transparent;font-size:13px;width:100%}
.select{height:36px;padding:0 10px;border:1px solid var(--line);background:var(--bg);font-size:12px}
.grid .card{animation:cardIn .7s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
.empty-state{grid-column:1/-1;padding:64px 0;text-align:center;color:var(--muted)}

/* ---------- PRODUCT PAGE ---------- */
.crumbs{padding:18px var(--gutter);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.pdp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:clamp(24px,4vw,64px);padding:0 var(--gutter)}
.pdp__gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdp__gallery figure{margin:0;aspect-ratio:4/5;background:var(--surface);overflow:hidden;position:relative}
.pdp__gallery figure:only-child{grid-column:1/-1;aspect-ratio:auto;height:min(88vh,980px)}
.pdp__gallery figure img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform 1.2s var(--ease),opacity .5s}
.pdp__gallery figure:only-child img{object-fit:contain}
.pdp__gallery figure::after{content:"";position:absolute;inset:0;background:var(--surface);transform-origin:top;transition:transform 1.1s var(--ease-io);transition-delay:var(--d,0ms)}
.pdp__gallery.is-in figure::after{transform:scaleY(0)}
.pdp__info{position:sticky;top:calc(var(--ann-h) + var(--head-h) + 20px);align-self:start;padding-bottom:40px}
.pdp__title{margin:12px 0 8px;font-size:clamp(30px,2.8vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.pdp__price{font-size:18px}
.pdp__desc{margin:18px 0 24px;font-size:14px;color:var(--muted);max-width:440px}
.opt{margin-bottom:20px}
.opt__label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:10px}
.opt__label b{font-weight:600}
.colors{display:flex;gap:8px}
.color-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);transition:border-color .3s}
.color-btn span{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.color-btn.is-active{border-color:var(--ink)}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.size-btn{height:44px;border:1px solid var(--line);font-size:13px;font-weight:500;transition:all .25s var(--ease)}
.size-btn:hover{border-color:var(--ink)}
.size-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.opt.is-error .opt__label{color:#C2412F}
.opt.is-error .sizes{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pdp__notes{display:flex;flex-direction:column;gap:6px;margin:16px 0 26px;font-size:12px;color:var(--muted)}
.pdp__notes span::before{content:"— "}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;min-height:50px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;text-align:left}
.acc__btn svg{width:12px;height:12px;transition:transform .45s var(--ease)}
.acc.is-open .acc__btn svg{transform:rotate(45deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden;font-size:13px;color:var(--muted)}
.acc__panel ul{margin:0;padding:0 0 16px 18px}
.acc__panel p{margin:0 0 16px}
.recs .section__title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,46px);letter-spacing:-.01em}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .rail{grid-auto-columns:calc((100% - var(--gutter)*2 - 12px*2)/3.3)}
  .social .rail{grid-auto-columns:calc((100% - var(--gutter)*2 - 12px*2)/2.6)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__news{grid-column:1/-1}
}
@media (max-width:820px){
  :root{--head-h:56px;--ann-h:30px}
  .header__nav{display:none}
  .menu-toggle{display:inline-grid;margin-left:-10px}
  .header{grid-template-columns:auto 1fr auto}
  .header .logo{justify-self:center}
  .showcase{height:auto;min-height:0;padding:36px 0 84px}
  .showcase__text{position:relative;left:auto;top:auto;width:auto;padding:0 var(--gutter);min-height:168px}
  .showcase__stage{position:relative;height:62vh;min-height:380px}
  .showcase__title{font-size:34px}
  .pdp{grid-template-columns:1fr}
  .pdp__gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);gap:0;scrollbar-width:none}
  .pdp__gallery::-webkit-scrollbar{display:none}
  .pdp__gallery figure,.pdp__gallery figure:only-child{flex:0 0 100%;height:auto;aspect-ratio:4/5;scroll-snap-align:start}
  .pdp__info{position:static}
  .search-field{min-width:0;flex:1}
  .toolbar__right{width:100%}
}
@media (max-width:640px){
  .rail{grid-auto-columns:calc((100% - var(--gutter)*2 - 12px)/1.7)}
  .social .rail{grid-auto-columns:calc((100% - var(--gutter)*2 - 12px)/1.35)}
  .grid{grid-template-columns:repeat(2,1fr);gap:24px 8px}
  .section__head .arrow-btn{display:none}
  .social__head{flex-direction:column;align-items:flex-start}
  .footer__top{grid-template-columns:1fr 1fr}
  .pill{left:10px;right:10px;transform:translateY(calc(100% + 40px));justify-content:space-between}
  .pill.is-visible{transform:none}
  .pill__price{display:none}
  .pill__body{gap:10px}
  .pill__name{max-width:150px}
  .reveal-scene{height:200vh}
  .showcase__bar{width:64px}
  .showcase__bottom .eyebrow.muted{display:none}
  .loader__center{gap:20px}
  .loader__word{letter-spacing:.24em;padding-left:.24em}
  .loader__top span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  [data-reveal]{opacity:1;transform:none}
  .split .w>span{transform:none;filter:none}
}

/* =====================================================================
   FOUND-STYLE MOTION LAYER (config → motion)
   ===================================================================== */
/* image mosaic canvas (js/blocks.js → Mosaic) */
canvas.fx-mosaic{position:absolute;z-index:1;pointer-events:none;display:block}
html.fx-mz .grid .card{animation:none}
html.fx-mz .pdp__gallery figure::after{display:none}

/* text scramble: characters flicker in at random */
[data-sc] .sc{opacity:0}
.is-sc .sc{animation:scIn .55s steps(1,end) both;animation-delay:var(--sd,0s)}
@keyframes scIn{0%{opacity:0}25%{opacity:1}40%{opacity:0}55%{opacity:.45}70%{opacity:0}85%,100%{opacity:1}}

/* button glitch build: the button assembles in jittery slices */
[data-gl]{clip-path:inset(0 100% 0 0)}
.is-gl{animation:glBuild .62s steps(1,end) both;animation-delay:var(--gd,0ms)}
@keyframes glBuild{
  0%{clip-path:inset(0 100% 0 0)}
  12%{clip-path:inset(0 78% 0 0);transform:translateX(-4px)}
  24%{clip-path:inset(35% 52% 25% 0);transform:translateX(3px)}
  36%{clip-path:inset(0 60% 0 0);transform:none}
  48%{clip-path:inset(0 30% 50% 0);transform:translateX(-2px)}
  60%{clip-path:inset(0 22% 0 0);transform:translateX(2px)}
  72%{clip-path:inset(50% 0 0 0);transform:none}
  84%{clip-path:inset(0 6% 0 0);transform:translateX(-1px)}
  100%{clip-path:inset(0);transform:none}
}

/* header: transparent, progressive blur, never hides */
.site-top.has-blur .header{position:relative;isolation:isolate;background:transparent;border-bottom-color:transparent}
.site-top.has-blur .header::before{content:"";position:absolute;inset:0 0 -26px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent),color-mix(in srgb,var(--bg) 30%,transparent) 70%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);transition:opacity .45s var(--ease)}
.site-top.has-blur.is-overlay .header::before{opacity:0}
.site-top.has-blur ~ main .toolbar{background:color-mix(in srgb,var(--bg) 92%,transparent)}

/* hero: quick-cut reel + centred wordmark */
.hero__shot{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity}
.hero--reel .hero__shot{opacity:0}
.hero--reel .hero__shot.is-on{opacity:1}
.hero__media .hero__shot img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.hero__flash{position:absolute;inset:0;z-index:1;background:#fff;opacity:0;pointer-events:none}
.hero__word{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fff}
.hero__word span{display:block;font-family:var(--sans);font-weight:600;font-size:clamp(40px,7vw,132px);letter-spacing:.28em;line-height:1;white-space:nowrap;margin-right:-.28em}
.hero__word.is-docking{position:fixed;inset:auto;left:0;top:0;display:block;width:max-content;height:auto;z-index:52;transform-origin:0 0;will-change:transform}
.hero__word.is-docking span{margin-right:0}
.hero__word.is-docked{visibility:hidden}
.site-top.has-dock:not(.is-docked) .header .logo span{opacity:0}
.site-top.has-dock .header .logo span{transition:none}
.hero__bar{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:var(--on-dark);opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.hero.is-in .hero__bar{opacity:1;transform:none}
.hero__bar .eyebrow{margin:0}
.hero__link{color:var(--on-dark)}
.hero--word .hero__scroll{bottom:26px}

/* collection tiles: a thin band opens vertically */
.tiles-sec{padding:64px var(--gutter) 4px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tile{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface);color:#fff}
.tiles:not(.is-in) .tile{clip-path:inset(50% 50% 50% 50%)}
.tiles.is-in .tile{animation:tileBand 1.5s cubic-bezier(.76,0,.24,1) backwards;animation-delay:var(--d,0ms)}
@keyframes tileBand{0%{clip-path:inset(49.8% 50% 49.8% 50%)}22%{clip-path:inset(49.6% 0 49.6% 0)}100%{clip-path:inset(0 0 0 0)}}
.tile__media{position:absolute;inset:0}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tiles.is-in .tile__media img{animation:tileZoom 1.9s var(--ease) backwards;animation-delay:var(--d,0ms)}
@keyframes tileZoom{from{transform:scale(1.25)}}
.tile:hover .tile__media img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.32));pointer-events:none}
.tile__cap{position:absolute;z-index:2;right:18px;bottom:16px;display:flex;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tile__title{font-weight:600}
.tile__sub{opacity:.7}

/* lookbook: tall tiles rise from the bottom, outer ones first */
.lbk-sec{padding:4px var(--gutter) 72px}
.lbk-sec .section__head{padding:0;margin-top:52px}
.lbk{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.lbk__item{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--surface);color:#fff}
.lbk:not(.is-in) .lbk__item{clip-path:inset(100% 0 0 0)}
.lbk.is-in .lbk__item{animation:lbkRise 1.25s cubic-bezier(.76,0,.24,1) backwards;animation-delay:var(--d,0ms)}
@keyframes lbkRise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.lbk__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lbk.is-in .lbk__item img{animation:lbkImg 1.7s var(--ease) backwards;animation-delay:var(--d,0ms)}
@keyframes lbkImg{from{transform:translateY(16%) scale(1.18)}}
.lbk__item:hover img{transform:scale(1.04)}
.lbk__item::after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.38));pointer-events:none}
.lbk__cap{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* product cards: horizontal wipe to the alt image, wishlist heart, hover sizes */
.card__media .card__alt{opacity:1;clip-path:inset(0 0 0 100%);transition:clip-path .75s var(--ease-io),transform 1.1s var(--ease)}
.card__media .card__main{clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease-io),transform 1.1s var(--ease),opacity .6s var(--ease)}
.card.has-alt:hover .card__alt{clip-path:inset(0 0 0 0)}
.card.has-alt:hover .card__main{clip-path:inset(0 100% 0 0)}
.card__wish{position:absolute;z-index:3;top:8px;right:8px;width:34px;height:34px;display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--bg) 88%,transparent);transition:color .25s,opacity .3s,transform .3s var(--ease)}
.card__wish svg{width:17px;height:17px;transition:fill .25s}
.card__wish:hover{transform:scale(1.1)}
.card__wish.is-on{color:#E0352B}
.card__wish.is-on svg{fill:currentColor}
.card__wish.pop svg{animation:heartPop .45s var(--ease)}
@keyframes heartPop{30%{transform:scale(1.4)}60%{transform:scale(.9)}}
@media (hover:hover) and (pointer:fine){
  .card__wish:not(.is-on){opacity:0}
  .card__frame:hover .card__wish,.card__wish:focus-visible{opacity:1}
  .card__frame:hover .card__sizes{opacity:1;transform:none;pointer-events:auto}
}

/* cart drawer: light dim, lines stagger in when it opens */
.line{animation:none}
.drawer__items.is-anim .line{animation:lineIn .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + 220ms)}

/* dark footer */
.footer--dark{background:var(--dark);color:var(--on-dark);border-top:0}
.footer--dark .footer__news p,.footer--dark .footer__col h4,.footer--dark .footer__bottom{color:rgba(245,244,240,.55)}
.footer--dark .news-form{border-bottom-color:rgba(245,244,240,.6)}
.footer--dark .news-form input::placeholder{color:rgba(245,244,240,.45)}
.footer--dark .footer__bottom{border-top-color:rgba(245,244,240,.14)}
.footer--dark .footer__mark{color:var(--on-dark)}
.footer--dark :focus-visible{outline-color:var(--on-dark)}

@media (max-width:820px){
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:4/3}
  .lbk{grid-template-columns:1fr 1fr}
  .hero__word span{font-size:clamp(34px,11vw,64px)}
}
@media (max-width:640px){
  .hero__bar{flex-direction:column;align-items:flex-start;gap:10px;bottom:22px}
  .hero--word .hero__scroll{display:none}
  .tile__cap{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .tiles:not(.is-in) .tile,.lbk:not(.is-in) .lbk__item{clip-path:none}
  [data-sc] .sc{opacity:1}
  [data-gl]{clip-path:none}
}