/* ==========================================================================
   AYESHA MUKRI — demo store by Velare
   Bold editorial layout. Near-monochrome chrome so the garments carry colour.
   Scaffold: Bootstrap 5.3 grid + utilities builds only (no components, no
   reboot), loaded before this file — so Bootstrap contributes layout classes
   and nothing visual. Everything painted comes from here + brand.js.
   ========================================================================== */

/* ---------- fonts --------------------------------------------------------
   HOUSE RULE from Jane, 2026-09-01: Glacial Indifference + Poppins ONLY.
   Glacial is not on Google Fonts, so it is self-hosted (SIL OFL licence).
   Only Regular + Bold exist — no true italic, so accents use colour, never
   synthetic italics. Poppins comes from the Google Fonts link in each head. */
@font-face{
  font-family:'Glacial Indifference';
  src:url('../fonts/GlacialIndifference-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('../fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ---------- tokens ------------------------------------------------------ */
:root{
  --wrap:1560px;
  --gut:clamp(20px,4vw,64px);

  --r:0px;                      /* deliberately square — soft corners read retail, not atelier */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.5s var(--ease);

  --hdr-h:64px;
  --ann-h:38px;

  /* type scale — fluid, wide range. The display sizes are the whole design. */
  /* uppercase display runs ~10% wider, so the top sizes sit a notch down */
  --d1:clamp(2.7rem,6.8vw,6.2rem);
  --d2:clamp(1.9rem,4.1vw,3.7rem);
  --d3:clamp(1.5rem,2.4vw,2.4rem);
  --d4:clamp(1.1rem,1.4vw,1.4rem);
  --tiny:.68rem;
}

/* ---------- base -------------------------------------------------------- */
body{
  font-family:var(--sans);
  background:var(--alabaster);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Fraunces carries an optical-size axis (9–144) and a WONK axis for its quirky
   alternates. Both are right at headline size and wrong at text size: locking
   everything to the display cut made 17px product names spindly, cramped and
   hard to read. Three tiers instead, matched to the size each thing is set at. */

/* Tier 1 — display. Glacial Indifference set uppercase and tracked out:
   geometric fashion-minimal, carried by spacing rather than stroke contrast. */
h1,h2,.disp{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.055em;
  text-transform:uppercase;
}

/* Tier 2 — mid (roughly 26–42px). Slightly tighter tracking than display. */
.pdp-info h1,.lead-body h2,.done h1,.prose h2{
  letter-spacing:.035em;
  line-height:1.12;
}

/* Tier 3 — text (roughly 16–24px). This is where product names live. A real
   text cut: no wonk, sturdier strokes, normal fitting. */
h3,h4,
.card-body h3,.line h3,.sheet h3,.summary h3,.tile-in h3,
.sr-item b,.prop b,.step b,.post-body h2,.prose h3{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.24;
}
::selection{background:var(--ink);color:var(--alabaster)}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-full{padding-inline:var(--gut)}
section{padding-block:clamp(56px,7vw,110px)}
.pt0{padding-top:0}

/* the small uppercase label used everywhere as a structural marker */
.kicker{
  font-size:var(--tiny);letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--grey);
}
.kicker.gold{color:var(--rose-deep)}
.kicker.gild{color:var(--gild)}
.rule{height:1px;background:var(--line);border:0}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r);
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--alabaster)}
.btn-primary:hover{background:var(--rose-deep)}
.btn-gold{background:var(--rose-deep);color:#fff}
.btn-gold:hover{background:var(--ink)}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--alabaster)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:19px 40px;font-size:.82rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.35;pointer-events:none}

/* the underlined text link that ends a section */
.more{
  display:inline-block;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding:9px 0 4px;transition:color .25s,border-color .25s;
}
.more:hover{color:var(--rose-deep);border-color:var(--rose-deep)}

/* ---------- announce + header ------------------------------------------- */
.announce{
  background:var(--ink);color:var(--alabaster);height:var(--ann-h);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding-inline:16px;text-align:center;
}
.announce b{color:var(--rose);font-weight:600}

.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--alabaster);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.hdr.scrolled{border-bottom-color:var(--line);background:rgba(247,244,239,.93);backdrop-filter:blur(14px)}
.hdr-in{
  height:var(--hdr-h);display:flex;align-items:center;gap:22px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.brand{
  font-family:var(--serif);font-size:1.06rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
}
.brand small{
  display:block;font-family:var(--sans);font-size:.52rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--grey);margin-top:1px;font-weight:600;
}
.hdr .brand{flex:1 1 0;min-width:0}
.nav{display:flex;gap:30px;flex:0 0 auto;justify-content:center}
.nav a,.nav button{
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding-block:8px;position:relative;color:var(--ink);
}
.nav a::after,.nav button::after{
  content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--ink);transition:right .35s var(--ease);
}
.nav a:hover::after,.nav button:hover::after,.nav a[aria-current]::after{right:0}
.hdr-act{display:flex;align-items:center;gap:4px;flex:1 1 0;justify-content:flex-end}
.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;
  border-radius:var(--r);transition:background .25s;
}
.icon-btn:hover{background:var(--bone)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.badge{
  position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 4px;
  background:var(--rose-deep);color:#fff;border-radius:9px;
  font-size:.6rem;font-weight:700;display:grid;place-items:center;
  opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s;
}
.badge[data-count]:not([data-count="0"]){opacity:1;transform:scale(1)}
.badge.pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
.burger{display:none}

/* ---------- drawer + search --------------------------------------------- */
.scrim{
  position:fixed;inset:0;background:rgba(25,22,20,.45);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(3px);
}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;inset:0 auto 0 0;width:min(400px,86vw);z-index:80;
  background:var(--alabaster);padding:26px 28px;overflow-y:auto;
  transform:translateX(-102%);transition:transform .45s var(--ease);
}
.drawer.open{transform:none}
.drawer h4{font-family:var(--sans);font-size:var(--tiny);letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin:26px 0 12px;font-weight:600}
.drawer a{display:block;padding:11px 0;font-size:1.06rem;border-bottom:1px solid var(--line)}
/* 44px minimum touch target — these sit over content and are easy to miss */
.close{width:44px;height:44px;display:grid;place-items:center;font-size:1.8rem;line-height:1}
.drawer .close{position:absolute;top:10px;right:12px}

.ovl{
  position:fixed;inset:0;z-index:90;background:rgba(25,22,20,.5);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.ovl.open{opacity:1;pointer-events:auto}
.search-panel{background:var(--alabaster);padding:26px var(--gut) 34px;max-height:82vh;overflow-y:auto}
.search-row{display:flex;gap:14px;max-width:900px;margin-inline:auto}
.search-row input{
  flex:1;min-width:0;border-bottom:2px solid var(--ink);padding:12px 2px;
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,2.1rem);
}
#searchResults{max-width:900px;margin:22px auto 0;display:grid;gap:4px}
.sr-item{display:flex;gap:16px;align-items:center;padding:10px;transition:background .2s}
.sr-item:hover{background:var(--bone)}
.sr-item img{width:56px;height:70px;object-fit:cover}
.sr-item b{font-family:var(--serif);font-size:1.1rem;font-weight:400}
.sr-empty{max-width:900px;margin:22px auto 0;color:var(--grey)}

/* ==========================================================================
   COVER — a full wall of her photography, edge to edge.
   Four columns by two rows = eight cells: the copy takes the first column
   full height, the film the second, and four garments fill the rest. The
   headline lives in its own cell so it never fights an image for legibility.
   ========================================================================== */
.cover{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:6px;
  height:min(84vh,720px);
  padding:6px 6px 0;
}
.cover-copy{
  grid-column:1;grid-row:1 / span 2;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,1.6vw,26px);min-width:0;
}
.cover-copy h1{font-size:clamp(1.75rem,2.7vw,3rem);margin:12px 0 0}
.cover-copy h1 em{font-style:italic;color:var(--rose-deep)}
.cover-copy p{max-width:30ch;margin-top:12px;color:var(--grey);font-size:.95rem}
.cover-copy .hero-cta{margin-top:20px}
.cover-copy .btn{padding:13px 20px;font-size:.72rem}

.cover-film{grid-column:2;grid-row:1 / span 2;min-height:0;min-width:0}
.cover-tiles{display:contents}

.cover-tile{position:relative;display:block;overflow:hidden;background:var(--bone);min-height:0}
.cover-tile img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform 1.1s var(--ease)}
.cover-tile:hover img{transform:scale(1.05)}
.cover-cap{
  position:absolute;left:0;right:0;bottom:0;padding:11px 13px;
  background:linear-gradient(to top,rgba(20,16,16,.76),transparent);
  color:var(--alabaster);display:flex;justify-content:space-between;align-items:end;gap:8px;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.cover-tile:hover .cover-cap{opacity:1;transform:none}
.cover-cap b{font-family:var(--serif);font-weight:500;font-size:.9rem;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 16}
.cover-cap i{font-style:normal;font-size:.76rem;opacity:.9}

/* ---------- the film ----------------------------------------------------
   Cross-faded stills standing in for video the client does not have.
   Set BRAND.hero.video and the same box renders a <video> instead.
------------------------------------------------------------------------ */
.film{position:relative;display:block;overflow:hidden;background:var(--bone);width:100%}
.film img,.film video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
}
.film img{opacity:0;transition:opacity var(--fade,1300ms) ease-in-out}
.film img.on{opacity:1;z-index:1;animation:film-drift var(--hold,3900ms) linear both}
.still .film img{animation:none;transform:none}
.still .film img.on{opacity:1}
@keyframes film-drift{from{transform:scale(1.012)}to{transform:scale(1.07)}}
.film .cap{z-index:3}
.film-bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;background:rgba(251,247,246,.22)}
.film-bar i{display:block;height:100%;width:0;background:var(--rose)}

/* the film fills its cell here rather than keeping the 4:5 product ratio */
.cover-film .film{height:100%;max-height:none;margin:0}

.hero-facts{
  display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(22px,3vw,40px);padding-top:22px;border-top:1px solid var(--line);
}
.hero-facts div{font-size:.8rem;line-height:1.4}
.hero-facts b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 60}
.hero-facts span{color:var(--grey)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- section heads ----------------------------------------------- */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(26px,3vw,44px);
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.sec-head h2{font-size:var(--d2)}
.sec-head p{color:var(--grey);max-width:46ch;margin-top:8px}
.sec-head .kicker{margin-bottom:10px;display:block}

/* ==========================================================================
   PRODUCT GRID + CARD
   ========================================================================== */
.grid{
  display:grid;gap:clamp(14px,1.8vw,30px) clamp(12px,1.4vw,24px);
  grid-template-columns:repeat(4,1fr);
}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}

.card{position:relative}
.card-media{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.card-media>a{display:block;height:100%}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.05s var(--ease),opacity .5s;
}
.card:hover .card-media img{transform:scale(1.05)}
/* second photograph revealed on hover, when the product has one */
.card-media .alt{position:absolute;inset:0;opacity:0}
.card:hover .card-media .alt{opacity:1}

.card-tag{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--ink);color:var(--alabaster);
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 12px;
}
.wish{
  position:absolute;top:8px;right:8px;z-index:2;
  width:36px;height:36px;display:grid;place-items:center;
  background:rgba(247,244,239,.9);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s,color .2s;
}
.card:hover .wish,.wish.on{opacity:1;transform:none}
.wish svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.5}
.wish.on svg{fill:var(--rose);stroke:var(--rose)}

/* the quick-buy strip — the shortcut that makes checkout two clicks */
.quick{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--ink);color:var(--alabaster);
  padding:13px;text-align:center;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(101%);transition:transform .38s var(--ease),background .25s;
}
.card:hover .quick{transform:none}
.quick:hover{background:var(--rose)}

.card-body{padding-top:13px;display:flex;flex-direction:column;gap:3px}
.card-body h3{font-size:1.02rem;line-height:1.3}
.card-meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.card-price{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.swatches{display:flex;gap:5px;margin-top:6px}
.sw{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}

/* ---------- collection tiles -------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.tile{position:relative;overflow:hidden;display:block;background:var(--bone);aspect-ratio:3/4}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile-in{
  position:absolute;inset:auto 0 0 0;padding:clamp(16px,2vw,26px);
  background:linear-gradient(to top,rgba(25,22,20,.8),rgba(25,22,20,.06) 72%,transparent);
  color:var(--alabaster);
}
.tile-in h3{font-size:var(--d4);margin-bottom:3px}
.tile-in span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* ---------- the black band (props / manifesto) --------------------------- */
.band{background:var(--ink);color:var(--alabaster)}
.band .kicker{color:var(--rose)}
.band h2{font-size:var(--d2)}
.props-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.prop{border-top:1px solid rgba(247,244,239,.22);padding-top:20px}
.prop .n{font-family:var(--serif);font-size:1.1rem;color:var(--rose);display:block;margin-bottom:10px}
.prop b{display:block;font-family:var(--serif);font-size:var(--d4);font-weight:400;margin-bottom:7px}
.prop span{font-size:.9rem;opacity:.72;line-height:1.55}

/* the 3-step "how it works" strip that proves the click count */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .n{
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--rose-deep);display:block;margin-bottom:10px;
}
.step b{display:block;font-family:var(--serif);font-size:var(--d4);font-weight:400;margin-bottom:6px}
.step span{color:var(--grey);font-size:.93rem}

/* ---------- editorial split (about / story) ------------------------------
   Layout comes from the Bootstrap row/col classes on the markup;
   only the skin lives here. Pages not yet converted keep the grid fallback. */
.split:not(.row){display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split h2{font-size:var(--d2);margin:14px 0 20px}
.split p{color:var(--grey);margin-bottom:16px;max-width:52ch}

/* ==========================================================================
   SHOP / LISTING
   ========================================================================== */
.page-head{padding:clamp(30px,4vw,62px) 0 clamp(20px,2.4vw,34px)}
.page-head h1{font-size:var(--d2);margin-top:10px}
.page-head p{color:var(--grey);margin-top:12px;max-width:56ch}
.crumbs{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.crumbs a:hover{color:var(--ink)}

.shop{display:grid;grid-template-columns:236px 1fr;gap:clamp(24px,3vw,56px);align-items:start}
.filters{position:sticky;top:calc(var(--hdr-h) + 18px)}
.fgroup{border-top:1px solid var(--line);padding:18px 0}
.fgroup:first-child{border-top:0;padding-top:0}
.fgroup h4{font-family:var(--sans);font-size:var(--tiny);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.92rem;cursor:pointer;transition:color .2s}
.fopt:hover{color:var(--rose-deep)}
.fopt input{
  appearance:none;width:15px;height:15px;border:1px solid var(--line);flex:none;
  transition:background .2s,border-color .2s;
}
.fopt input:checked{background:var(--ink);border-color:var(--ink)}
.fopt input:checked::after{content:'';display:block;width:5px;height:9px;margin:1px auto;border:solid var(--alabaster);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.fopt .cnt{margin-left:auto;color:var(--grey);font-size:.76rem}
.fsw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none}

.shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.shop-bar .count{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.shop-bar select{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:11px 4px 11px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);padding:6px 12px;font-size:.76rem;transition:border-color .2s;
}
.chip:hover{border-color:var(--ink)}
.chip b{font-weight:600}
.chip i{font-style:normal;color:var(--grey)}
.filter-toggle{display:none}
.empty{text-align:center;padding:70px 0;color:var(--grey)}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,72px);align-items:start;padding-block:clamp(24px,3vw,44px)}
.pdp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdp-gallery figure{background:var(--bone);overflow:hidden}
.pdp-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp-gallery figure:first-child:nth-last-child(odd){grid-column:span 2}
.pdp-gallery figure.wide{grid-column:span 2}

.pdp-info{position:sticky;top:calc(var(--hdr-h) + 26px)}
.pdp-info h1{font-size:var(--d3);margin:10px 0 14px}
.pdp-price{font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.pdp-price small{font-size:.74rem;font-weight:500;color:var(--grey);letter-spacing:.1em;text-transform:uppercase;margin-left:8px}
.pdp-desc{color:var(--grey);margin:20px 0 26px;line-height:1.68}

.opt{margin-bottom:22px}
.opt-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.opt-head h4{font-family:var(--sans);font-size:var(--tiny);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600}
.opt-head a{font-size:.74rem;color:var(--grey);border-bottom:1px solid var(--line)}
.opt-head a:hover{color:var(--ink);border-color:var(--ink)}
.fit-pill{
  display:inline-block;border:1px solid var(--ink);padding:11px 20px;
  font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size{
  min-width:54px;padding:12px 6px;text-align:center;border:1px solid var(--line);
  font-size:.84rem;font-weight:600;letter-spacing:.06em;
  transition:border-color .2s,background .2s,color .2s;
}
.size:hover{border-color:var(--ink)}
.size.on{background:var(--ink);color:var(--alabaster);border-color:var(--ink)}
.size.err{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:42px;height:44px;font-size:1.1rem}
.qty span{min-width:34px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.pdp-buy{display:grid;gap:10px;margin-top:26px}
.pdp-note{font-size:.78rem;color:var(--grey);margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.pdp-note svg{width:15px;height:15px;flex:none;margin-top:3px;fill:none;stroke:var(--sage);stroke-width:1.7}

.acc{border-top:1px solid var(--line);margin-top:30px}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;text-align:left;font-weight:600;font-size:.9rem}
.acc-q i{font-style:normal;font-size:1.2rem;color:var(--grey);transition:transform .3s}
.acc-item.open .acc-q i{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-a>div{padding-bottom:18px;color:var(--grey);font-size:.92rem}

/* ==========================================================================
   CART / CHECKOUT
   ========================================================================== */
.two-col{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,64px);align-items:start}
.line{display:grid;grid-template-columns:104px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.line img{width:104px;aspect-ratio:4/5;object-fit:cover;background:var(--bone)}
.line h3{font-size:1.1rem;margin-bottom:5px}
.line .card-meta{margin-bottom:10px}
.line .rm{font-size:.74rem;color:var(--grey);border-bottom:1px solid var(--line);margin-top:10px;display:inline-block}
.line .rm:hover{color:var(--ink)}
.line-total{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

.summary{background:var(--bone);padding:clamp(22px,2.6vw,34px);position:sticky;top:calc(var(--hdr-h) + 26px)}
.summary h3{font-size:var(--d4);margin-bottom:18px}
.srow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.93rem}
.srow.tot{
  border-top:1px solid var(--line);margin-top:10px;padding-top:16px;
  font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.ship-bar{height:3px;background:var(--line);margin:6px 0 16px;overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--sage);transition:width .5s var(--ease)}
.pay-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pay-icons span{
  border:1px solid var(--line);padding:5px 10px;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey);background:var(--alabaster);
}

.field{margin-bottom:16px}
.field label{display:block;font-size:var(--tiny);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);background:var(--alabaster);padding:13px 14px;
  transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay-opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:15px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s}
.pay-opt:has(input:checked){border-color:var(--ink);background:var(--bone)}
.pay-opt input{appearance:none;width:16px;height:16px;border:1px solid var(--grey);border-radius:50%;flex:none;transition:border-width .2s,border-color .2s}
.pay-opt input:checked{border:5px solid var(--ink)}
.pay-opt b{font-size:.92rem}
.pay-opt small{display:block;color:var(--grey);font-size:.78rem}

.done{text-align:center;max-width:560px;margin:0 auto;padding:clamp(50px,8vw,110px) 0}
.done .tick{width:64px;height:64px;margin:0 auto 26px;border-radius:50%;background:var(--sage);display:grid;place-items:center}
.done .tick svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.2}
.done h1{font-size:var(--d2);margin-bottom:16px}
.done p{color:var(--grey);margin-bottom:10px}

/* ---------- quick-buy sheet --------------------------------------------- */
.sheet{
  position:fixed;inset:auto 0 0 0;z-index:95;background:var(--alabaster);
  padding:26px var(--gut) 30px;transform:translateY(101%);
  transition:transform .45s var(--ease);max-height:90vh;overflow-y:auto;
}
.sheet.open{transform:none}
.sheet-in{max-width:860px;margin-inline:auto;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.sheet img{width:120px;aspect-ratio:4/5;object-fit:cover;background:var(--bone)}
.sheet h3{font-size:var(--d4);margin-bottom:4px}
.sheet .close{position:absolute;top:10px;right:calc(var(--gut) - 10px)}

/* ---------- prose ------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:var(--d3);margin:40px 0 14px}
.prose h3{font-size:var(--d4);margin:28px 0 10px}
.prose p,.prose li{color:var(--grey);margin-bottom:13px}
.prose ul{list-style:disc;padding-left:20px}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;font-size:.92rem}
.prose th{font-size:var(--tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:600}
.prose td{color:var(--grey)}


/* ---------- blog listing ------------------------------------------------
   Three posts, equal weight. Her featured images run from 400x400 to
   819x1024, so the card image sits in a fixed 3:2 window to keep the row
   even — that crops, but it never stretches one of them into a banner.
------------------------------------------------------------------------ */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,40px);
  padding-bottom:clamp(46px,6vw,86px);
}
.blog-card{display:flex;flex-direction:column}
.blog-media{
  display:block;overflow:hidden;background:var(--bone);
  aspect-ratio:3/2;margin-bottom:16px;
}
.blog-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  transition:transform 1.05s var(--ease);
}
.blog-card:hover .blog-media img{transform:scale(1.04)}
.blog-body{display:flex;flex-direction:column;flex:1}
.blog-meta{
  font-size:var(--tiny);letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin-bottom:9px;
}
.blog-card h2{
  font-size:1.22rem;line-height:1.24;margin-bottom:9px;
  font-family:var(--serif);font-weight:500;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 18;
  letter-spacing:.002em;
}
.blog-card h2 a:hover{color:var(--rose-deep)}
.blog-card p{color:var(--grey);font-size:.93rem;margin-bottom:16px;flex:1}
.blog-card .more{align-self:flex-start;margin-top:auto}

/* ---- article + sidebar ---- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:clamp(28px,4vw,68px);align-items:start}
.article-title{font-size:clamp(1.9rem,3.4vw,3.1rem);max-width:22ch}
.post-hero{
  display:block;width:100%;height:auto;
  margin:0 auto clamp(24px,3vw,40px);
  background:var(--bone);
}
.post-body{max-width:70ch}
.post-body h2{
  font-size:clamp(1.35rem,2vw,1.85rem);margin:44px 0 14px;padding-top:10px;
  border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 24px);
}
.post-body h3{font-size:1.12rem;margin:26px 0 8px;color:var(--ink)}
.post-body p{margin-bottom:15px}
.post-body ul,.post-body ol{margin:6px 0 20px;padding-left:22px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-bottom:9px;color:var(--grey)}
.post-body li strong,.post-body p strong{color:var(--ink);font-weight:600}
.post-body a{border-bottom:1px solid var(--line)}
.post-body a:hover{border-color:var(--rose-deep);color:var(--rose-deep)}
.post-body blockquote{
  border-left:2px solid var(--rose-deep);padding:4px 0 4px 20px;margin:22px 0;
  font-family:var(--serif);font-size:1.15rem;color:var(--ink);
}
.post-fig{margin:26px 0}
.post-fig img{width:100%;height:auto;margin-inline:auto;background:var(--bone)}
.post-foot{max-width:70ch;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}

/* ---- sidebar ---- */
.article-side{position:sticky;top:calc(var(--hdr-h) + 20px);display:grid;gap:18px}
.side-box{border:1px solid var(--line);padding:20px}
.side-box h4{
  font-family:var(--sans);font-size:var(--tiny);letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin-bottom:14px;
}
.toc{list-style:none;counter-reset:t;max-height:44vh;overflow-y:auto}
.toc li{counter-increment:t;margin-bottom:9px;font-size:.88rem;line-height:1.35}
.toc li::before{content:counter(t) ".";color:var(--grey);margin-right:7px;font-variant-numeric:tabular-nums}
.toc a{color:var(--grey);transition:color .2s}
.toc a:hover,.toc a.on{color:var(--ink);font-weight:600}

.side-post{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.side-post:first-of-type{border-top:0;padding-top:0}
.side-post img{width:62px;height:52px;object-fit:cover;flex:none;background:var(--bone)}
.side-post b{
  display:block;font-family:var(--serif);font-weight:500;font-size:.93rem;line-height:1.25;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 16;
}
.side-post i{font-style:normal;font-size:.74rem;color:var(--grey)}
.side-post:hover b{color:var(--rose-deep)}
.side-cta{background:var(--bone);border-color:transparent}
.side-cta p{font-size:.88rem;color:var(--ink);opacity:.75;margin-bottom:14px}

/* ---------- footer ------------------------------------------------------ */
.ftr{background:var(--ink);color:var(--alabaster);padding-top:clamp(48px,6vw,88px)}
.ftr a{color:rgba(247,244,239,.7);transition:color .22s}
.ftr a:hover{color:var(--rose)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,52px);padding-bottom:44px}
.ftr h4{font-family:var(--sans);font-size:var(--tiny);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);font-weight:600;margin-bottom:16px}
.ftr li{margin-bottom:9px;font-size:.92rem}
.ftr-logo{display:block;width:186px;max-width:60%;height:auto;margin-bottom:14px}
.ftr-about p{color:rgba(247,244,239,.6);max-width:34ch;font-size:.93rem}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(247,244,239,.22);transition:background .25s,border-color .25s}
.socials a:hover{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.ftr-bot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(247,244,239,.16);padding:20px 0;
  font-size:.78rem;color:rgba(247,244,239,.5);
}
.velare{color:var(--rose);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;font-weight:600}

/* ---------- newsletter -------------------------------------------------- */
.news{background:var(--bone);text-align:center}
.news h2{font-size:var(--d3);margin-bottom:12px}
.news p{color:var(--grey);max-width:44ch;margin:0 auto 26px}
.news-form{display:flex;gap:10px;max-width:470px;margin-inline:auto}
.news-form input{flex:1;border-bottom:1.5px solid var(--ink);padding:13px 2px;background:none}
.form-msg{margin-top:14px;font-size:.86rem;min-height:20px}
.form-msg.ok{color:var(--sage)}
.form-msg.err{color:#9C3A3A}

/* ---------- floating WhatsApp + toast ----------------------------------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:54px;height:54px;border-radius:50%;background:var(--sage);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(25,22,20,.24);
  transition:transform .25s var(--ease);
}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px;fill:var(--alabaster)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:100;
  background:var(--ink);color:var(--alabaster);padding:13px 22px;
  font-size:.86rem;transition:transform .4s var(--ease);max-width:90vw;text-align:center;
}
.toast.show{transform:translate(-50%,0)}


/* ==========================================================================
   PAGE TRANSITION — the monogram swirls while the next page loads
   ========================================================================== */
.pf{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.pf.on{opacity:1;pointer-events:auto}
.pf-mark{position:relative;width:132px;height:132px;display:grid;place-items:center;
  perspective:340px;transform-style:preserve-3d}
.pf-mark svg{width:66px;height:66px;fill:var(--alabaster);opacity:0}
.pf.on .pf-mark svg{animation:pf-mark .62s var(--ease) .05s both}

/* the swirl: a gold arc orbiting the mark in 3D, like a ring round a planet.
   pf-ring-in's final frame deliberately carries no transform, so once it has
   played the orbit animation owns the transform again. */
.pf-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid transparent;
  border-top-color:var(--rose);
  border-right-color:rgba(168,135,78,.30);
  opacity:0;
}
.pf.on .pf-ring{animation:pf-orbit 1.1s linear infinite, pf-ring-in .4s var(--ease) both}
/* a second, slower ring on the counter-tilted axis — a gyroscope, not a spinner */
.pf-mark::after{
  content:'';position:absolute;inset:13px;border-radius:50%;
  border:1px solid transparent;border-bottom-color:rgba(247,244,239,.30);
  opacity:0;
}
.pf.on .pf-mark::after{animation:pf-orbit-rev 1.7s linear infinite, pf-ring-in .5s var(--ease) .08s both}

@keyframes pf-orbit{from{transform:rotateX(62deg) rotateZ(0)}to{transform:rotateX(62deg) rotateZ(360deg)}}
@keyframes pf-orbit-rev{from{transform:rotateX(-56deg) rotateZ(0)}to{transform:rotateX(-56deg) rotateZ(-360deg)}}
@keyframes pf-ring-in{from{opacity:0;transform:scale(.7)}to{opacity:1}}
@keyframes pf-mark{
  from{opacity:0;transform:scale(.72) rotate(-14deg)}
  to  {opacity:1;transform:none}
}

/* arrival — content rises in so the veil hands over to the page */
main{animation:pf-rise .55s var(--ease) both}
@keyframes pf-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- motion ------------------------------------------------------ */
[data-anim]{opacity:0;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
[data-anim="up"]{transform:translateY(26px)}
[data-anim="scale"]{transform:scale(.975)}
[data-anim].in{opacity:1;transform:none}

/* ==========================================================================
   PREMIUM PASS — 2026-09-01
   Ghost numerals, the ticker, and the three 3D moves: card tilt with sheen,
   the pointer-tracked cover, and the in-the-round gallery. All pointer-fine
   effects sit behind hover/pointer media queries; everything obeys
   prefers-reduced-motion via the global kill-switch at the end of this file.
   ========================================================================== */

/* ---- ghost section numerals — the kicker's number, oversized, outlined -- */
.sec-head{position:relative}
.sec-head>div:first-child,.sec-head .more{position:relative;z-index:1}
.sec-head[data-n]::before{
  content:attr(data-n);
  position:absolute;right:-4px;bottom:-14px;z-index:0;pointer-events:none;
  font-family:var(--serif);font-weight:400;line-height:1;
  font-size:clamp(4.2rem,10vw,8.6rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.2px var(--line);
}
.band .sec-head[data-n]::before,
.atelier .sec-head[data-n]::before{-webkit-text-stroke-color:rgba(247,244,239,.2)}

/* ---- ticker — the atelier facts as a slow editorial ribbon -------------- */
.ticker{
  background:var(--ink);color:var(--alabaster);overflow:hidden;
  padding:13px 0;margin-block:clamp(36px,4.5vw,64px);
}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker span{
  font-family:var(--serif);font-weight:400;white-space:nowrap;
  font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
  padding-inline:1.5rem;
}
.ticker i{font-style:normal;color:var(--gild);align-self:center;font-size:.7rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* ==========================================================================
   HERO 2 — full-bleed. The film wall-to-wall behind an ink veil, the
   headline cascading in word by word, two floating pieces at their own
   parallax depths. Replaced the four-column cover, 2026-09-01.
   ========================================================================== */
.hero2{
  position:relative;background:var(--ink);color:var(--alabaster);
  height:min(92vh,860px);min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero2-media{position:absolute;inset:-16% 0;z-index:0}
.hero2-media .plx{position:absolute;inset:0}
.hero2 .film{position:absolute;inset:0;height:100%;max-height:none;background:var(--ink)}
/* the veil that keeps the headline readable over any frame */
.hero2-media::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(20,16,16,.86) 12%,rgba(20,16,16,.38) 52%,rgba(20,16,16,.5)),
             linear-gradient(to top,rgba(20,16,16,.82),transparent 42%);
}
.hero2 .film .cap{
  position:absolute;right:16px;top:16px;z-index:3;
  display:flex;gap:10px;align-items:baseline;color:var(--alabaster);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8;
}
.hero2 .film-bar{z-index:3}
.hero2-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(44px,7vh,92px)}
.hero2 .kicker{color:var(--rose)}
.hero2 h1{
  font-size:clamp(2.3rem,6vw,5.4rem);line-height:1.06;
  max-width:16ch;margin:16px 0 0;
}
.hero2 h1 span{display:inline-block;opacity:0;transform:translateY(.45em)}
.hero2.play h1 span{animation:wordup .6s var(--ease) both;animation-delay:var(--wd,0ms)}
@keyframes wordup{to{opacity:1;transform:none}}
.hero2 h1 .accent{color:var(--rose)}
.hero2 p{color:rgba(251,247,246,.82);max-width:44ch;margin-top:16px}
.hero2 .hero-cta{margin-top:26px}
.hero2 .btn-veil{border:1px solid rgba(251,247,246,.55);color:var(--alabaster)}
.hero2 .btn-veil:hover{background:var(--alabaster);color:var(--ink)}

.hero2-cards{
  position:absolute;right:clamp(16px,4.5vw,76px);top:11%;z-index:3;
  display:grid;gap:20px;
}
.fcard{
  width:clamp(124px,13vw,192px);display:block;background:var(--bone);
  box-shadow:0 24px 54px rgba(0,0,0,.45);
}
.fcard img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.fcard b{
  display:block;padding:9px 11px;background:var(--alabaster);color:var(--ink);
  font-family:var(--serif);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fcard:nth-child(2){margin-left:clamp(-40px,-3vw,-18px)}

/* ---- parallax ----------------------------------------------------------
   JS (initParallax) sets --py in px on every [data-plx]; elements that need
   to compose it with other movement (the floating cards) override below. */
[data-plx]{transform:translate3d(0,calc(var(--py,0)*1px),0);will-change:transform}
.hero2.gyro .fcard{
  transform:translate3d(calc(var(--hx,0)*-18px),
                        calc(var(--py,0)*1px + var(--hy,0)*-12px),0);
}
.hero2.gyro .fcard:nth-child(2){
  transform:translate3d(calc(var(--hx,0)*-9px),
                        calc(var(--py,0)*1px + var(--hy,0)*-6px),0);
}

/* ---- micro-animations --------------------------------------------------- */
/* a light sweep across any button on hover */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:44%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none;
}
.btn:hover::after{left:125%}
/* collection tiles lift as they zoom */
.tile{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(25,22,20,.35)}

/* ---- 3D card tilt + sheen (mouse only — touch keeps the flat card) ------ */
@media(hover:hover) and (pointer:fine){
  .card-media{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .55s var(--ease),box-shadow .4s var(--ease);
  }
  .card-media.tilting{transition:transform .09s linear,box-shadow .4s var(--ease)}
  /* the sheen follows the pointer across the garment like light on silk */
  .card-media::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    opacity:0;transition:opacity .35s;
    background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),
               rgba(255,255,255,.3),rgba(255,255,255,0) 58%);
  }
  .card:hover .card-media::after{opacity:1}
  .card:hover .card-media{box-shadow:0 26px 52px -20px rgba(25,22,20,.38)}
}

/* ---- pointer-tracked cover — the wall of photographs gains depth -------- */
@media(hover:hover) and (pointer:fine){
  .cover.gyro{
    transform-style:preserve-3d;will-change:transform;
    transform:perspective(1600px)
              rotateX(calc(var(--hy,0)*-1.6deg)) rotateY(calc(var(--hx,0)*2.2deg));
    transition:transform .2s linear;
  }
  .cover.gyro .cover-film{transform:translateZ(26px)}
  .cover.gyro .cover-tile{transform:translateZ(12px)}
  .cover.gyro .cover-tile:nth-child(2n){transform:translateZ(32px)}
}

/* ---- the in-the-round gallery — a real 3D ring of garments -------------- */
.atelier{background:var(--ink);color:var(--alabaster);overflow:hidden}
.atelier .sec-head{border-color:rgba(247,244,239,.2)}
.atelier .kicker{color:var(--gild)}
.atelier .sec-head p{color:rgba(247,244,239,.62)}
.atelier .more{color:var(--alabaster);border-color:var(--gild)}
.atelier .more:hover{color:var(--gild)}
.stage{
  position:relative;height:clamp(380px,44vw,560px);
  perspective:1400px;cursor:grab;
  touch-action:pan-y;                /* horizontal drag spins, vertical still scrolls */
  user-select:none;-webkit-user-select:none;
}
.stage.grabbing{cursor:grabbing}
/* a low champagne glow where a floor would be */
.stage::after{
  content:'';position:absolute;left:50%;bottom:2%;
  width:min(74%,680px);height:84px;transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 50%,rgba(168,135,78,.17),transparent 72%);
  pointer-events:none;
}
.ring{
  --pw:clamp(150px,19vw,246px);
  position:absolute;inset:0;margin:auto;
  width:var(--pw);height:calc(var(--pw)*1.3);
  transform-style:preserve-3d;will-change:transform;
}
.ring>a{
  position:absolute;inset:0;overflow:hidden;background:#241f1d;
  backface-visibility:hidden;      /* the far side of the ring simply vanishes */
  box-shadow:0 20px 46px rgba(0,0,0,.45);
}
.ring img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ring-cap{text-align:center;margin-top:6px;min-height:56px}
.ring-cap b{
  display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 16;
}
.ring-cap span{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gild)}

/* ---- mobile buy bar — the Buy button never leaves the screen on a phone -- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  background:var(--alabaster);border-top:1px solid var(--line);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  gap:14px;align-items:center;
}
.buybar .bb-price{font-weight:700;font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.buybar .bb-price small{display:block;font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.buybar .btn{flex:1}
@media(max-width:640px){
  .buybar{display:flex}
  body.has-buybar{padding-bottom:74px}
  body.has-buybar .fab{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* ---- account page ------------------------------------------------------- */
.acct-box{border:1px solid var(--line);padding:clamp(20px,3vw,30px);display:block;height:100%;background:var(--alabaster)}
.acct-box h3{font-size:var(--d4);margin-bottom:16px}
.acct-box>p{color:var(--grey);font-size:.92rem;margin-top:2px}
.acct-link{transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.acct-link:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(25,22,20,.3)}
.acct-perks{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.acct-perks li{padding:6px 0 6px 22px;font-size:.9rem;color:var(--grey);position:relative}
.acct-perks li::before{content:'';position:absolute;left:2px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.acct-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.acct-note{margin:34px 0 60px;font-size:.82rem;color:var(--grey)}

/* ---- footer lockup — text, so it obeys the Glacial-only rule ------------ */
.ftr-brand{display:block;margin-bottom:14px}
.ftr-brand b{
  display:block;font-family:var(--serif);font-weight:700;font-size:1.4rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--alabaster);
}
.ftr-brand small{
  display:block;font-size:.6rem;letter-spacing:.52em;text-transform:uppercase;
  color:var(--rose);margin-top:4px;font-weight:600;
}

/* ---------- responsive -------------------------------------------------- */
@media(max-width:1180px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .props-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr 1fr}
  .ftr-about{grid-column:1/-1}
}
@media(max-width:960px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-in{position:relative}
  .hdr .brand{position:absolute;left:50%;transform:translateX(-50%);flex:none;text-align:center;max-width:56vw}
  .hdr-act{margin-left:auto}
  /* cover: copy first, then the film, then a 2-up wall of photographs */
  .cover{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto repeat(2,minmax(0,30vh));height:auto}
  .cover-copy{grid-column:1 / span 2;grid-row:1;padding:18px 14px 4px}
  .cover-film{grid-column:1 / span 2;grid-row:2;height:min(50vh,420px)}
  /* hero2: the floating cards would sit on the headline — drop them */
  .hero2-cards{display:none}
  .hero2{height:76vh;min-height:500px}
  .shop{grid-template-columns:1fr}
  .filters{
    position:fixed;inset:0 0 0 auto;width:min(360px,88vw);z-index:80;
    background:var(--alabaster);padding:64px 24px 24px;overflow-y:auto;
    transform:translateX(102%);transition:transform .45s var(--ease);
  }
  .filters.open{transform:none}
  .filter-toggle{display:inline-flex}
  .pdp{grid-template-columns:1fr}
  .pdp-info{position:static}
  .two-col{grid-template-columns:1fr}
  .summary{position:static}
  .split:not(.row){grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .article{grid-template-columns:1fr}
  .article-side{position:static;order:-1}
  .toc{max-height:none}
}
@media(max-width:640px){
  :root{--hdr-h:58px;--d1:clamp(2.3rem,10.5vw,3rem)}
  body{font-size:16px}
  section{padding-block:46px}
  /* every saved pixel here is a pixel of garment on the first screen */
  .announce{font-size:.62rem;letter-spacing:.1em;height:auto;min-height:var(--ann-h);padding-block:7px;line-height:1.5}
  /* decorative depth reads as clutter at this width */
  .sec-head[data-n]::before{display:none}
  .hero{padding-top:22px;padding-bottom:32px;gap:20px}
  /* let the line breaks fall naturally so the headline fills the column
     instead of sitting as three short, tight lines */
  .hero-copy h1{margin-top:12px;line-height:1.1;letter-spacing:-.008em}
  .hero-copy h1 br{display:none}
  .hero-copy p{margin-top:14px;font-size:.98rem}
  .hero-cta{margin-top:20px;gap:10px;flex-wrap:nowrap}
  .hero-cta .btn{flex:1;padding:15px 10px;font-size:.72rem}
  .cover-cap{opacity:1;transform:none}
  .hero2{height:72vh;min-height:460px}
  .hero2 h1{font-size:clamp(1.9rem,8.6vw,2.5rem);letter-spacing:.045em}
  .hero2 .hero-cta .btn{flex:1;padding:15px 10px;font-size:.72rem}
  /* name and price collide when the name wraps — stack them instead */
  .hero-art .cap{z-index:3;flex-direction:column;align-items:flex-start;gap:1px;padding:10px}
  .hero-art .cap b{font-size:.85rem;line-height:1.15}
  .hero-art .cap span{font-size:.7rem;opacity:.85}
  /* A centred wordmark needs equal room either side. Burger + 3 icons leaves
     none at 375px, so the wishlist moves into the drawer on phones. */
  .hdr-act .wish-link{display:none}
  /* uppercase + tracking runs wide, and the account icon makes three icons
     on the right — smaller and tighter so the centred wordmark clears them
     on a 375px screen (measured via CDP below in the README) */
  .hdr .brand{font-size:.78rem;letter-spacing:.09em;max-width:44vw}
  .hdr-act{gap:0}
  .hdr-act .icon-btn{width:36px}
  /* three tight columns instead of a wrapping row */
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px;padding-top:16px}
  .hero-facts b{font-size:1.2rem}
  .hero-facts div{font-size:.68rem;line-height:1.35}
  .sec-head{margin-bottom:20px}
  .grid,.grid.g3{grid-template-columns:repeat(2,1fr)}
  .props-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  /* the gallery becomes a swipeable strip so the buy button is one swipe
     away instead of buried under a vertical stack of photographs */
  .pdp-gallery{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
    margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pdp-gallery::-webkit-scrollbar{display:none}
  .pdp-gallery figure{flex:0 0 82%;scroll-snap-align:center}
  .pdp-gallery figure:first-child:nth-last-child(odd),.pdp-gallery figure.wide{grid-column:auto}
  .line{grid-template-columns:78px 1fr;gap:14px}
  .line img{width:78px}
  .line-total{grid-column:2;text-align:left}
  .row2{grid-template-columns:1fr}
  .sheet-in{grid-template-columns:88px 1fr;gap:16px}
  .sheet img{width:88px}
  .quick{transform:none;padding:10px;font-size:.64rem}  /* no hover on touch — always show the shortcut, slimmer */
  .wish{opacity:1;transform:none}
  .news-form{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .film-bar{display:none}
  [data-anim]{opacity:1;transform:none}
  .pf{display:none}
  main{animation:none}
}