/* =========================================================================
   VESPERTINE — LIGHT design system (serotoninn-inspired)
   Warm white · black · one bright red · Thunder / Space Mono / Inter
   ========================================================================= */

:root{
  /* colour — light */
  --paper:#FFF9F7;        /* warm off-white ground */
  --paper-2:#FDF3EF;      /* faintly deeper panel */
  --ink:#0A0A0A;          /* near-black text */
  --ink-2:#4A4744;        /* secondary text (>=4.5:1 on paper) */
  --ash:#6B6764;          /* meta grey */
  --surface:#F0E7E2;      /* card / image placeholder ground */
  --hairline:rgba(10,10,10,.14);
  --hairline-red:#EEDFDF; /* serotoninn pink hairline */
  --red:#ED3833;          /* THE accent */
  --red-deep:#D8322D;

  /* type */
  --display:"Thunder","Archivo Narrow",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ui:"Inter",system-ui,sans-serif;

  /* fluid scale (Thunder is condensed → can run large) */
  --fs-mono:clamp(.68rem,.63rem + .22vw,.8rem);
  --fs-body:clamp(.95rem,.9rem + .3vw,1.05rem);
  --fs-lead:clamp(1.15rem,1rem + .9vw,1.6rem);
  --fs-h3:clamp(1.6rem,1.1rem + 2vw,2.6rem);
  --fs-h2:clamp(2.6rem,1.4rem + 6vw,6.5rem);
  --fs-hero:clamp(2.8rem,11.5vw,12.5rem);

  --gut:clamp(1.1rem,3vw,2.6rem);
  --sect:clamp(4.5rem,9vw,9rem);
  --maxw:1600px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:400;
  font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--red);color:#fff}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* cursor — blends over light + dark imagery via difference */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor{width:34px;height:34px;border:1px solid #fff;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease)}
.cursor-dot{width:4px;height:4px;background:#fff;transform:translate(-50%,-50%)}
.cursor.is-hot{width:64px;height:64px;background:#fff}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* type helpers */
.mono{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ash)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.serif{font-family:var(--serif)}
.italic{font-style:italic}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:0}
.h2{font-size:var(--fs-h2)}
.accent{color:var(--red)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sect)}
.rule{height:1px;background:var(--hairline);border:0}
.grid{display:grid;gap:var(--gut)}
.serif-em{font-family:var(--serif);font-style:italic;font-weight:300;
  text-transform:none;letter-spacing:-.01em}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:200;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1rem var(--gut);
  transition:background .4s var(--ease),transform .5s var(--ease),border-color .4s}
.nav.is-solid{background:rgba(255,249,247,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline)}
.nav.is-hidden{transform:translateY(-105%)}
.brand{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:0;font-size:clamp(1.1rem,.8rem + 1.1vw,1.7rem);
  display:inline-flex;gap:.35em;align-items:baseline;line-height:1}
.brand b{color:var(--red);font-weight:800}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;position:relative;padding:.4rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--red);transition:width .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-right{display:flex;gap:1.1rem;align-items:center}
.cart-btn{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;gap:.5ch;align-items:center;min-height:44px;padding:0 .2rem}
.cart-count{min-width:1.5em;height:1.5em;padding:0 .35em;display:inline-grid;place-items:center;
  background:var(--red);color:#fff;border-radius:1em;font-size:.7em;
  transform:scale(var(--pop,1));transition:transform .3s var(--ease)}
.cart-count[data-empty="true"]{background:var(--ink);color:var(--paper)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.burger span{height:1.5px;width:24px;background:var(--ink);transition:.3s var(--ease)}
.mobile-menu{position:fixed;inset:0;z-index:190;background:var(--paper);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:var(--gut);pointer-events:none}
.mobile-menu.open{transform:none;pointer-events:auto}
.mobile-menu a{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,12vw,4.5rem);line-height:.95}

/* =========================================================================
   HERO (light)
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--paper)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.9}
.hero-fallback{position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 60% at 70% 20%,#fff 0%,var(--paper) 55%,#f2e7e2 100%)}
/* floating editorial plates behind type */
.hero-plate{position:absolute;z-index:1;overflow:hidden;background:var(--surface);
  border:1px solid var(--hairline);will-change:transform}
.hero-plate img{width:100%;height:100%;object-fit:cover}
.hero-plate.a{width:min(20vw,270px);aspect-ratio:11/15;top:14%;right:8%}
.hero-plate.b{width:min(14vw,190px);aspect-ratio:11/15;top:30%;left:6%}
.hero-inner{position:relative;z-index:3;width:100%;padding:0 var(--gut) clamp(1.6rem,4vw,3rem)}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.82;letter-spacing:-.005em;font-size:var(--fs-hero);color:var(--ink)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;will-change:transform}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;
  text-transform:none;letter-spacing:-.01em;color:var(--red)}
.hero-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:clamp(1.2rem,3vw,2rem);padding-top:1rem;border-top:1px solid var(--hairline)}
.hud{position:absolute;z-index:3;font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.hud.tl{top:calc(1rem + 58px);left:var(--gut)}
.hud.tr{top:calc(1rem + 58px);right:var(--gut);text-align:right}
.hud .live{color:var(--red)}
.scrollcue{position:absolute;left:50%;bottom:1.2rem;z-index:3;transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);display:flex;flex-direction:column;align-items:center;gap:.4rem}
.scrollcue::after{content:"";width:1px;height:34px;background:var(--ink);
  animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee{border-block:1px solid var(--hairline);overflow:hidden;padding:.9rem 0;background:var(--paper);
  transition:transform .5s var(--ease)}
.marquee.red{background:var(--red);border-color:var(--red)}
.marquee.red .marquee-track span{color:#fff}
.marquee.red .marquee-track span::after{color:var(--paper)}
.marquee-track{display:flex;gap:2.5rem;width:max-content;white-space:nowrap;will-change:transform}
.marquee-track span{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,3rem);letter-spacing:0;display:inline-flex;gap:2.5rem;align-items:center;color:var(--ink)}
.marquee-track span::after{content:"✱";color:var(--red);font-size:.6em}

/* =========================================================================
   HORIZONTAL DRAG RAIL
   ========================================================================= */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:0 var(--gut);margin-bottom:1.6rem}
.rail-head h2{font-size:var(--fs-h2)}
.rail-hint{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ash);display:inline-flex;gap:.6ch;align-items:center}
.rail-hint::after{content:"→";animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.rail-vp{overflow:hidden;cursor:grab;padding-inline:var(--gut)}
.rail-vp.dragging{cursor:grabbing}
.rail{display:flex;gap:var(--gut);width:max-content;will-change:transform}

/* =========================================================================
   PRODUCT CARD
   ========================================================================= */
.card{width:clamp(260px,34vw,400px);flex:0 0 auto}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.card-media{display:block;position:relative;aspect-ratio:11/14.5;overflow:hidden;
  background:var(--surface);border:1px solid var(--hairline)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) saturate(1.02);
  transition:transform .9s var(--ease),opacity .6s var(--ease),filter .6s var(--ease)}
.card-media img.alt{opacity:0}
.card:hover .card-media img.main{opacity:0}
.card:hover .card-media img.alt{opacity:1}
.card:hover .card-media img{transform:scale(1.05)}
.card-media .badge{position:absolute;top:.7rem;left:.7rem;z-index:2;font-family:var(--mono);
  font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;
  background:var(--ink);color:var(--paper)}
.card-media .badge.sale{background:var(--red);color:#fff}
.card-media .spec{position:absolute;bottom:.7rem;left:.7rem;z-index:2;
  color:#fff;mix-blend-mode:difference}
.card-media .quick{position:absolute;inset:auto 0 0;z-index:2;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:.9rem;text-align:center;transform:translateY(101%);transition:transform .4s var(--ease);min-height:44px}
.card:hover .quick,.card:focus-within .quick{transform:none}
.card-body{display:flex;justify-content:space-between;gap:1rem;padding-top:.9rem}
.card-title{font-family:var(--serif);font-size:1.1rem;line-height:1.15;font-weight:400}
.card-cat{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ash);margin-top:.3rem}
.price{font-family:var(--mono);font-size:.92rem;letter-spacing:.02em;white-space:nowrap}
.price s{color:var(--ash);margin-right:.5ch}
.price .now{color:var(--red)}

/* =========================================================================
   SCROLLYTELLING — pinned horizontal editorial gallery
   ========================================================================= */
.hscroll{position:relative;background:var(--paper)}
.hscroll-pin{height:100svh;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hscroll-pin::-webkit-scrollbar{display:none}
.hscroll-pin.is-pinned{overflow:hidden}
.hscroll-track{display:flex;gap:clamp(1rem,3vw,2.4rem);padding-inline:var(--gut);will-change:transform}
.panel{position:relative;flex:0 0 auto;height:74svh;aspect-ratio:3/4;overflow:hidden;
  background:var(--surface);border:1px solid var(--hairline)}
.panel.wide{aspect-ratio:16/10}
.panel img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);
  transform:scale(1.12);will-change:transform}
.panel-cap{position:absolute;left:1rem;bottom:1rem;right:1rem;z-index:2;color:#fff;
  mix-blend-mode:difference;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.panel-cap h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:.9}
.panel-cap .mono{color:#fff}
.panel-intro{flex:0 0 auto;height:74svh;display:flex;flex-direction:column;justify-content:center;
  width:min(80vw,520px)}
.panel-intro h2{font-size:var(--fs-h2);margin:.5rem 0 1rem}
.panel-intro p{max-width:38ch;color:var(--ink-2)}
.hscroll-progress{position:absolute;left:var(--gut);right:var(--gut);bottom:2rem;height:1px;
  background:var(--hairline-red);z-index:4}
.hscroll-progress i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red)}

/* =========================================================================
   MANIFESTO — scroll text fill
   ========================================================================= */
.manifesto{padding-block:clamp(6rem,16vw,16rem)}
.manifesto p{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,6.5vw,6.5rem);line-height:.98;letter-spacing:-.01em;max-width:20ch}
.manifesto .w{color:var(--hairline);transition:color .1s linear;display:inline-block}
.manifesto .w.red{color:var(--hairline)}
.manifesto .w.on{color:var(--ink)}
.manifesto .w.red.on{color:var(--red)}

/* =========================================================================
   EDITORIAL SPLIT
   ========================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:center}
.split.rev .split-media{order:2}
.split-media{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hairline);background:var(--surface)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-text h2{font-size:var(--fs-h2);margin:.6rem 0 1.2rem}
.split-text p{max-width:46ch;color:var(--ink-2);margin-bottom:1.6rem}

/* =========================================================================
   CAMPAIGN FILM (light)
   ========================================================================= */
.film{position:relative;min-height:82svh;display:grid;place-items:center;overflow:hidden;background:var(--paper)}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.03);z-index:0;will-change:transform}
.film::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,249,247,.2),rgba(255,249,247,.75))}
.film-inner{position:relative;z-index:2;text-align:center;padding:var(--gut);color:var(--ink)}
.film-inner h2{font-size:var(--fs-hero);line-height:.86}
.film-inner .serif{display:block;font-size:var(--fs-lead);margin-top:1rem;color:var(--ink-2)}

/* =========================================================================
   CATEGORY INDEX
   ========================================================================= */
.cat-list a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,3vw,2rem) 0;border-top:1px solid var(--hairline);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,8vw,6rem);line-height:.9;transition:color .3s var(--ease),padding-left .4s var(--ease)}
.cat-list a:last-child{border-bottom:1px solid var(--hairline)}
.cat-list a:hover{color:var(--red);padding-left:clamp(.5rem,2vw,1.5rem)}
.cat-list a .n{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ash);letter-spacing:.06em;align-self:center}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7ch;min-height:54px;
  padding:0 1.9rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:transparent;color:var(--red)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.added{background:var(--red);border-color:var(--red);color:#fff}

/* =========================================================================
   FOOTER (dark anchor block)
   ========================================================================= */
.foot{background:var(--ink);color:var(--paper);padding-block:var(--sect) 2rem;position:relative;z-index:5}
.news{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:end;padding-bottom:var(--sect)}
.news h2{font-size:var(--fs-h2)}
.news .eyebrow{color:#b6b2af}
.field{display:flex;border-bottom:1px solid var(--paper);gap:1rem;align-items:center}
.field input{flex:1;background:none;border:0;color:var(--paper);font-family:var(--mono);
  font-size:1rem;letter-spacing:.02em;padding:1rem 0;min-height:44px}
.field input::placeholder{color:#8a8683}
.field input:focus{outline:none}
.field button{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;min-height:44px;color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gut);padding-block:var(--sect) 3rem;
  border-top:1px solid rgba(255,255,255,.14)}
.foot-grid h4{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;color:#b6b2af;margin-bottom:1.2rem;font-weight:400}
.foot-grid li{margin-bottom:.7rem}
.foot-grid a{color:var(--paper)}
.foot-grid a:hover{color:var(--red)}
.foot-brand{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,10vw,8rem);line-height:.82;letter-spacing:0}
.foot-brand b{color:var(--red)}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);color:#b6b2af}
.foot-legal.mono span{color:#b6b2af}

/* =========================================================================
   PAGE HEADER
   ========================================================================= */
.pagehead{padding:calc(92px + var(--sect)) 0 var(--sect)}
.pagehead h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:-.005em;font-size:var(--fs-hero)}
.pagehead h1 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;color:var(--red)}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;padding-block:1.4rem;
  border-block:1px solid var(--hairline);position:sticky;top:54px;z-index:100;
  background:rgba(255,249,247,.9);backdrop-filter:blur(12px)}
.filter{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;min-height:40px;padding:0 1rem;border:1px solid var(--hairline);
  color:var(--ash);transition:.3s var(--ease)}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter:hover{color:var(--ink)}

/* =========================================================================
   PDP
   ========================================================================= */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,4rem);padding-top:calc(92px + 2rem)}
.pdp-gallery{display:grid;gap:.8rem}
.pdp-gallery .frame{aspect-ratio:11/14;overflow:hidden;border:1px solid var(--hairline);background:var(--surface)}
.pdp-gallery img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03)}
.pdp-info{position:sticky;top:92px;align-self:start}
.pdp-info h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;margin:.6rem 0}
.pdp-price{font-family:var(--mono);font-size:1.2rem;letter-spacing:.02em;margin-bottom:1.6rem}
.pdp-price s{color:var(--ash);margin-right:.7ch}
.pdp-price .now{color:var(--red)}
.pdp-desc{color:var(--ink-2);max-width:48ch;margin-bottom:2rem}
.opt-label{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ash);margin-bottom:.8rem;display:flex;justify-content:space-between}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.size{min-width:52px;min-height:52px;padding:0 1rem;border:1px solid var(--hairline);
  font-family:var(--mono);font-size:.85rem;transition:.25s var(--ease)}
.size[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.size:hover{border-color:var(--ink)}
.pdp-meta{margin-top:2.4rem;border-top:1px solid var(--hairline)}
.pdp-meta dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 2rem;padding-top:1.4rem}
.pdp-meta dt{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.pdp-meta dd{margin-bottom:.9rem;text-align:right;color:var(--ink-2)}

/* =========================================================================
   CART
   ========================================================================= */
.cart-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(1.5rem,5vw,5rem);padding-top:calc(92px + 2rem)}
.line{display:grid;grid-template-columns:88px 1fr auto;gap:1.2rem;padding:1.4rem 0;
  border-top:1px solid var(--hairline);align-items:center}
.line-thumb{aspect-ratio:11/14;overflow:hidden;background:var(--surface);border:1px solid var(--hairline)}
.line-thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03)}
.line-title{font-family:var(--serif);font-size:1.15rem}
.line-sub{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ash);margin-top:.35rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--hairline);margin-top:.7rem}
.qty button{width:34px;height:34px;font-family:var(--mono)}
.qty span{min-width:2ch;text-align:center;font-family:var(--mono);font-size:.85rem}
.line-right{text-align:right;font-family:var(--mono)}
.line-remove{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ash);margin-top:.7rem;min-height:44px}
.line-remove:hover{color:var(--red)}
.summary{border:1px solid var(--hairline);padding:clamp(1.4rem,3vw,2.2rem);align-self:start;position:sticky;top:92px;background:var(--paper-2)}
.summary h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.7rem;margin-bottom:1.4rem}
.summary-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.9rem;padding:.7rem 0;color:var(--ink-2)}
.summary-row.total{border-top:1px solid var(--hairline);margin-top:.7rem;padding-top:1.2rem;color:var(--ink);font-size:1.15rem}
.cart-empty{padding:calc(92px + var(--sect)) 0;text-align:center}
.cart-empty h2{font-size:var(--fs-h2);margin-bottom:1.4rem}

.modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:var(--gut);
  background:rgba(10,10,10,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{background:var(--paper);border:1px solid var(--hairline);max-width:460px;width:100%;
  padding:clamp(2rem,5vw,3.2rem);text-align:center;transform:translateY(16px);transition:transform .5s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-card .mark{font-family:var(--display);font-weight:800;color:var(--red);font-size:3.4rem;line-height:1;margin-bottom:1rem}
.modal-card h3{font-family:var(--serif);font-size:1.9rem;margin-bottom:.8rem;font-weight:400}
.modal-card p{color:var(--ink-2);margin-bottom:1.8rem}

.toast{position:fixed;left:50%;bottom:2rem;z-index:600;transform:translate(-50%,140%);
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.05em;text-transform:uppercase;padding:1rem 1.6rem;transition:transform .5s var(--ease);
  display:flex;gap:1ch;align-items:center}
.toast.show{transform:translate(-50%,0)}
.toast b{color:var(--red)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mask{display:block;overflow:hidden}
.mask>*{display:block;transform:translateY(105%)}
.mask.in>*{transform:none;transition:transform .9s var(--ease)}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;font-family:var(--mono);font-size:var(--fs-mono)}
.skip:focus{left:1rem;top:1rem}

/* responsive */
@media (max-width:920px){
  .split,.pdp,.cart-grid,.news{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .pdp-info,.summary{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-plate{display:none}
}
@media (max-width:680px){
  .nav-links{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr}
  .hero-meta{font-size:.72rem}
  .hero h1{font-size:clamp(2.2rem,10.2vw,4rem)}
  .card{width:78vw}
  .filters{top:50px}
  .panel{aspect-ratio:3/4.2;height:64svh}
  .panel-intro{height:auto}
  .hscroll-pin{height:auto;padding-block:var(--sect)}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .mask>*{transform:none}
  .rail-hint::after,.scrollcue::after{animation:none}
  .cursor,.cursor-dot{display:none}
  .manifesto .w{color:var(--ink)}
  .manifesto .w.red{color:var(--red)}
  .panel img{transform:none}
}