/* ==========================================================================
   MASTEREDTRAX — base.css
   Foundation: tokens, reset, type scale, layout, motion primitives
   ========================================================================== */

:root{
  /* --- surface ------------------------------------------------------ */
  --black:#060607;
  --black-2:#0b0b0d;
  --black-3:#111113;
  --black-4:#191919;

  /* --- gold: one material, five states ------------------------------ */
  --gold:#c6a24a;
  --gold-lit:#e3cb85;
  --gold-deep:#6f5518;
  /* Gold is built in two layers: a symmetric base ramp with many close stops
     (many stops = no banding), and a wide, soft sheen floating over it.
     The old version put a bright band between two dark ones in 11% of the
     width — that hard edge is what read as a cheap gradient. */
  --gold-grad:
    linear-gradient(100deg,
      rgba(255,250,232,0) 8%,
      rgba(255,250,232,.06) 26%,
      rgba(255,250,232,.13) 42%,
      rgba(255,250,232,.15) 50%,
      rgba(255,250,232,.13) 58%,
      rgba(255,250,232,.06) 74%,
      rgba(255,250,232,0) 92%),
    linear-gradient(100deg,
      #a3823a 0%,  #a9883f 9%,  #af8e44 18%, #b59449 27%,
      #ba994e 36%, #be9d52 45%, #c0a054 54%, #be9d52 63%,
      #b99850 72%, #b3924a 81%, #ac8b44 90%, #a4833b 100%);
  --gold-grad-v:
    linear-gradient(180deg,
      #d3ba7d 0%,  #cfb576 11%, #cab070 22%, #c5aa69 33%,
      #c0a462 44%, #bb9e5c 55%, #b59855 66%, #b0924f 77%,
      #aa8b48 88%, #a48441 100%);

  --white:#f4f2ed;
  --muted:#8e8a82;
  --muted-2:#5d5a55;

  --line:rgba(198,162,74,.20);
  --line-soft:rgba(244,242,237,.07);

  /* --- type --------------------------------------------------------- */
  --serif:"Cormorant Garamond",Didot,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  /* --- rhythm ------------------------------------------------------- */
  --container:1440px;
  --gutter:clamp(20px,4.5vw,72px);
  --header-h:84px;

  /* --- motion: one easing vocabulary, used everywhere --------------- */
  --ease:cubic-bezier(.22,.61,.36,1);        /* general */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* reveals — long tail */
  --ease-io:cubic-bezier(.76,0,.24,1);       /* curtains, transforms */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--sans);font-size:15px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:#1a1305}

/* Native smooth-scroll is off — JS drives an eased scroll instead. */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--black-4);border:2px solid var(--black)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(90px,13vh,190px);position:relative}

/* ==========================================================================
   Film grain — a single fixed layer. Luxury print has tooth; flat digital
   black does not. Kept at 3.5% so it registers without being seen.
   ========================================================================== */
.grain{
  position:fixed;inset:-150%;z-index:9;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}      16%{transform:translate(-3%,-6%)}
  33%{transform:translate(-8%,3%)}        50%{transform:translate(4%,-4%)}
  66%{transform:translate(-2%,7%)}        83%{transform:translate(6%,2%)}
}

/* ==========================================================================
   Preloader — the brand holds the screen for a beat before releasing it.
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--black);
  display:grid;place-items:center;
}
.loader__mark{text-align:center;overflow:hidden}
.loader__mark span{
  display:block;font-family:var(--serif);font-size:clamp(21px,6.4vw,74px);
  letter-spacing:.3em;text-indent:.3em;line-height:1.2;
  transform:translateY(105%);animation:loadUp 1s var(--ease-out) .15s forwards;
}
@keyframes loadUp{to{transform:none}}
.loader__bar{
  width:min(280px,60vw);height:1px;margin:34px auto 0;background:var(--line-soft);
  position:relative;overflow:hidden;
}
.loader__bar i{position:absolute;inset:0;background:var(--gold-grad-v);
  transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
.loader__pct{
  margin-top:16px;font-size:10px;letter-spacing:.34em;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
/* Curtain lifts from the bottom — the page is revealed, not faded in. */
.loader.is-done{transform:translateY(-100%);transition:transform 1.1s var(--ease-io) .2s}

/* ==========================================================================
   Custom cursor — desktop pointer devices only
   ========================================================================== */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;will-change:transform;
}
.cursor{width:34px;height:34px;border:1px solid rgba(244,242,237,.55);
  transition:width .38s var(--ease),height .38s var(--ease),
             background-color .38s var(--ease),border-color .38s var(--ease)}
.cursor-dot{width:4px;height:4px;background:var(--white)}
.cursor.is-hover{width:66px;height:66px;background:rgba(244,242,237,.12);border-color:transparent}
.cursor.is-hide{opacity:0}
@media(hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ==========================================================================
   Typography
   ========================================================================== */
.display{
  font-family:var(--serif);font-weight:300;line-height:.92;
  letter-spacing:-.015em;margin:0;
}
.eyebrow{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:0;
}
.eyebrow--muted{color:var(--muted-2)}
/* numbered eyebrow: a hairline that draws itself in */
.eyebrow--num{display:inline-flex;align-items:center;gap:16px}
.eyebrow--num::after{
  content:"";width:clamp(30px,5vw,68px);height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .25s;
}
.is-in .eyebrow--num::after,.eyebrow--num.is-in::after{transform:scaleX(1)}

.gold-text{
  background:var(--gold-grad-v);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.italic{font-style:italic}

/* ==========================================================================
   Motion primitives
   -------------------------------------------------------------------------
   .lines  — headline split into masked lines that rise on reveal
   .fade   — general element fade + lift
   .clip   — image uncovered by a moving curtain
   ========================================================================== */
.line{display:block;overflow:hidden}
.line > span{
  display:block;transform:translateY(110%);
  transition:transform 1.15s var(--ease-out);
}
.is-in .line > span{transform:none}
.line:nth-child(2) > span{transition-delay:.09s}
.line:nth-child(3) > span{transition-delay:.18s}
.line:nth-child(4) > span{transition-delay:.27s}

.fade{opacity:0;transform:translateY(24px);
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.is-in.fade,.is-in .fade{opacity:1;transform:none}
.fade--d1{transition-delay:.12s}.fade--d2{transition-delay:.24s}
.fade--d3{transition-delay:.36s}.fade--d4{transition-delay:.48s}

.clip{position:relative;overflow:hidden}
.clip > img,.clip > .clip__inner{
  transform:scale(1.18);transition:transform 1.6s var(--ease-out);
}
.is-in.clip > img,.is-in.clip > .clip__inner{transform:scale(1)}
.clip::after{
  content:"";position:absolute;inset:0;background:var(--black-2);z-index:2;
  transform-origin:bottom;transition:transform 1.25s var(--ease-io);
}
.is-in.clip::after{transform:scaleY(0)}

/* ==========================================================================
   Buttons — struck metal
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:17px 38px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;border:1px solid rgba(198,162,74,.45);color:var(--gold-lit);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-grad);
  transform:translateY(101%);transition:transform .55s var(--ease-io);
}
.btn:hover{color:#33280b;border-color:transparent;text-shadow:0 1px 0 rgba(255,248,222,.3)}
.btn:hover::after{transform:translateY(0)}

.btn--solid{
  color:#33280b;border:0;background:var(--gold-grad);
  background-size:220% 100%,100% 100%;background-position:22% 0,0 0;
  text-shadow:0 1px 0 rgba(255,248,222,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,248,226,.26),inset 0 -1px 0 rgba(80,58,12,.2),
    inset 1px 0 0 rgba(255,246,214,.07),inset -1px 0 0 rgba(80,58,12,.1),
    0 1px 2px rgba(0,0,0,.45),0 14px 34px -16px rgba(150,118,42,.5);
  transition:background-position 1.1s var(--ease),box-shadow .6s var(--ease);
}
/* The sheen drifts slowly across on hover — a lit surface turning, not a flash. */
.btn--solid:hover{background-position:82% 0,0 0;
  box-shadow:inset 0 1px 0 rgba(255,251,236,.34),inset 0 -1px 0 rgba(80,58,12,.2),
    0 1px 2px rgba(0,0,0,.45),0 18px 38px -16px rgba(176,140,52,.55)}
.btn--solid:active{background-position:50% 0,0 0;
  box-shadow:inset 0 2px 6px rgba(66,48,10,.4)}
.btn--ghost{border-color:var(--line-soft);color:var(--white)}
.btn--ghost:hover{color:#33280b}

/* text link with a rule that wipes through on hover */
.link{
  display:inline-block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);padding-bottom:7px;position:relative;
}
.link::before,.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
}
.link::before{background:var(--line)}
.link::after{background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease-io)}
.link:hover::after{transform:scaleX(1);transform-origin:left}

/* ==========================================================================
   Announcement — rotating, not scrolling. Marquees read as fast fashion.
   ========================================================================== */
.announce{
  background:#000;border-bottom:1px solid var(--line-soft);
  height:38px;display:grid;place-items:center;overflow:hidden;
}
.announce__item{
  grid-area:1/1;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.announce__item b{color:var(--gold-lit);font-weight:500}
.announce__item.is-on{opacity:1;transform:none}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed;top:38px;left:0;right:0;z-index:70;height:var(--header-h);
  display:flex;align-items:center;
  transition:height .5s var(--ease),background-color .5s var(--ease),
             border-color .5s var(--ease),transform .6s var(--ease-io);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  height:66px;background:rgba(6,6,7,.82);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line-soft);top:0;
}
.header.is-up{transform:translateY(-140%)}
.header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}

/* Gold brackets open around the word. They need more air between items than
   an underline does, since the brackets travel outward past the label. */
.nav{display:flex;gap:46px;align-items:center}
.nav a{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  position:relative;padding-block:8px;color:var(--white);
  transition:color .4s var(--ease);
}
.nav a::before,.nav a::after{
  position:absolute;top:50%;translate:0 -50%;font-size:13px;line-height:1;
  color:var(--gold);opacity:0;transition:.5s var(--ease-io);pointer-events:none;
}
.nav a::before{content:"[";left:-6px}
.nav a::after{content:"]";right:-6px}
.nav a:hover{color:var(--gold-lit)}
.nav a:hover::before{opacity:1;left:-16px}
.nav a:hover::after{opacity:1;right:-16px}

.brand{justify-self:center;text-align:center;line-height:1}
.brand__mark{
  font-family:var(--serif);font-size:clamp(20px,2.1vw,27px);
  letter-spacing:.34em;text-indent:.34em;display:block;
}
.brand__sub{
  display:block;margin-top:6px;font-size:7.5px;letter-spacing:.52em;
  text-transform:uppercase;color:var(--muted-2);text-indent:.52em;
  transition:opacity .4s var(--ease);
}
.header.is-stuck .brand__sub{opacity:0}

.header__actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;
  color:var(--white);transition:color .4s var(--ease)}
.icon-btn:hover{color:var(--gold)}
.icon-btn__count{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;background:var(--gold-grad-v);
  color:#33280b;font-size:9px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,248,226,.24);
}
.burger{display:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;height:100svh;min-height:640px;overflow:hidden;
  display:flex;align-items:flex-end;isolation:isolate;
}
.hero__media{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.38) contrast(1.06) brightness(.76) saturate(.9)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,6,7,.8) 0%,rgba(6,6,7,.25) 34%,rgba(6,6,7,.9) 84%,var(--black) 100%),
    radial-gradient(90% 70% at 50% 58%,transparent 0%,rgba(6,6,7,.55) 100%);
}
/* A single gold hairline framing the composition — the cheapest luxury signal
   in print, and it costs one pixel here. */
.hero__frame{
  position:absolute;inset:clamp(18px,3vw,42px);z-index:1;pointer-events:none;
  border:1px solid rgba(198,162,74,.16);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(60px,9vh,110px)}
.hero__title{font-size:clamp(56px,10.5vw,168px);margin:26px 0 0}
.hero__row{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-top:44px;flex-wrap:wrap;
}
.hero__copy{max-width:42ch;color:var(--muted);font-size:14px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__meta{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(18px,3vw,42px);z-index:2;
  display:flex;justify-content:center;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);
  border-top:1px solid var(--line-soft);padding-top:18px;align-items:center;
}
/* Vertical track with a gold dash falling down it — the gesture the cue asks for. */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:11px;
  text-indent:.3em}
.scroll-cue i{display:block;width:1px;height:30px;background:var(--line-soft);
  position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;left:0;right:0;top:0;height:45%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:cue 2.4s var(--ease-io) infinite;
}
/* -100% clears the top of the track, 222% clears the bottom (45% tall dash). */
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(222%)}}

/* ==========================================================================
   Section heads
   ========================================================================== */
.head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  flex-wrap:wrap;margin-bottom:clamp(44px,6vw,80px);
}
.head h2{font-size:clamp(38px,6.2vw,90px)}
.head__side{text-align:right;max-width:34ch}
.head__side p{color:var(--muted);font-size:13px;margin:0 0 18px}

/* ==========================================================================
   Product grid
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3.4vw,54px) clamp(18px,1.8vw,28px)}
.card{position:relative;display:flex;flex-direction:column}
.card__media{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--black-3);
}
.card__media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) contrast(1.04) brightness(.94);
  transition:transform 1.3s var(--ease-out),opacity .4s var(--ease),filter 1s var(--ease)}
.card:hover .card__media img{filter:saturate(1) contrast(1) brightness(1)}
.card__media img.card__alt{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card:hover .card__alt{opacity:1}
/* hairline that draws along the bottom of the frame on hover */
.card__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:3;
  transition:transform .8s var(--ease-io);
}
.card:hover .card__media::after{transform:scaleX(1)}

.card__num{
  position:absolute;top:14px;left:16px;z-index:3;font-size:9px;letter-spacing:.22em;
  color:rgba(244,242,237,.5);font-variant-numeric:tabular-nums;
}
.card__badge{
  position:absolute;top:14px;right:16px;z-index:3;padding:6px 12px;
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);color:var(--gold-lit);
  background:rgba(6,6,7,.55);backdrop-filter:blur(6px);
}
.card__badge--sale{background:var(--gold-grad);background-size:220% 100%,100% 100%;background-position:40% 0,0 0;
  border-color:transparent;color:#33280b;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,248,226,.24)}
.card__quick{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px;
  background:rgba(6,6,7,.72);backdrop-filter:blur(10px);
  text-align:center;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-lit);
  transform:translateY(101%);transition:transform .6s var(--ease-io);
}
.card:hover .card__quick{transform:none}

.card__body{padding-top:20px;display:flex;flex-direction:column;gap:7px}
.card__title{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.005em;margin:0}
.card__meta{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin:0}
.card__price{font-size:12.5px;letter-spacing:.12em;color:var(--white);margin:2px 0 0}
.card__price del{color:var(--muted-2);margin-right:10px}
.card__price ins{text-decoration:none;color:var(--gold-lit)}

/* ==========================================================================
   Colour variants
   ========================================================================== */
.colors{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.chip{
  position:relative;width:17px;height:17px;border-radius:50%;padding:0;
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.22),0 1px 3px rgba(0,0,0,.5);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.chip:hover{transform:scale(1.18)}
.chip.is-on{box-shadow:inset 0 0 0 1px rgba(244,242,237,.3),0 0 0 2px var(--black),0 0 0 3px var(--gold)}
.chip[data-light="1"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4)}
.chip[data-light="1"].is-on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 2px var(--black),0 0 0 3px var(--gold)}
.colors--lg{gap:14px;margin-top:0}
.colors--lg .chip{width:30px;height:30px}
.color-name{margin:9px 0 0;min-height:13px;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted-2);transition:color .4s}
.card:hover .color-name{color:var(--gold)}
.card__media img.is-swapping{opacity:0}

/* ==========================================================================
   Collections — horizontal drag/scroll rail
   ========================================================================== */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:clamp(14px,1.6vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);padding-bottom:6px;
  scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail__item{
  flex:0 0 clamp(270px,30vw,440px);scroll-snap-align:center;
  position:relative;aspect-ratio:3/4.1;overflow:hidden;
}
.rail__item img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.45) brightness(.86);
  transition:transform 1.5s var(--ease-out),filter 1s var(--ease)}
.rail__item:hover img{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.rail__item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,6,7,.9) 100%)}
.rail__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.4vw,34px)}
.rail__body h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.5vw,34px);
  margin:10px 0 14px;line-height:1.05}
.rail__progress{
  height:1px;background:var(--line-soft);margin:34px var(--gutter) 0;position:relative;
}
.rail__progress i{position:absolute;left:0;top:-1px;height:3px;width:20%;
  background:var(--gold-grad-v);transition:transform .15s linear}

/* ==========================================================================
   Editorial split with parallax
   ========================================================================== */
/* Held deliberately smaller than the product sections — this is the aside,
   not the headline act. */
.editorial{position:relative;overflow:hidden;
  padding-block:clamp(70px,9vh,132px)}
.editorial__grid{display:grid;grid-template-columns:.74fr 1fr;align-items:center;
  gap:clamp(26px,4vw,64px)}
.editorial__media{position:relative;aspect-ratio:4/5;overflow:hidden;
  max-width:380px;width:100%}
.editorial__media img{width:100%;height:110%;object-fit:cover;
  filter:grayscale(.5) brightness(.9);will-change:transform}
.editorial__body h2{font-size:clamp(30px,3.7vw,54px);margin:20px 0 18px}
.editorial__body > p{color:var(--muted);max-width:46ch;margin:0;font-size:13px;line-height:1.68}
/* Three beats of the brand story. The numeral hangs in the margin so the
   text column stays clean — the way a chapter opens in print. */
.story{margin:32px 0 34px;max-width:430px;border-top:1px solid var(--line-soft)}
.chapter{display:grid;grid-template-columns:38px 1fr;gap:15px;
  padding:17px 0;border-bottom:1px solid var(--line-soft)}
.chapter__n{font-size:9px;letter-spacing:.2em;color:var(--gold-deep);
  padding-top:5px;font-variant-numeric:tabular-nums;
  transition:color .6s var(--ease)}
.chapter:hover .chapter__n{color:var(--gold)}
.chapter h3{margin:0 0 6px;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-lit);font-weight:600}
.chapter p{margin:0;font-size:12.5px;line-height:1.58;color:var(--muted)}

/* ==========================================================================
   Countdown
   ========================================================================== */
.drop{text-align:center;position:relative;overflow:hidden}
.drop::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(1100px,110vw);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse,rgba(198,162,74,.09),transparent 68%);
}
.drop h2{font-size:clamp(46px,9vw,140px);margin:22px 0 0;position:relative}
.clock{display:flex;justify-content:center;gap:clamp(20px,5vw,72px);margin:54px 0 46px;position:relative}
.clock__u{min-width:80px}
.clock__n{font-family:var(--serif);font-weight:300;font-size:clamp(42px,7.5vw,84px);
  line-height:1;font-variant-numeric:tabular-nums}
.clock__n span{display:inline-block}
.clock__l{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.news{text-align:center;position:relative}
.news h2{font-size:clamp(36px,6vw,86px);margin:24px 0 22px}
.news > .container > p{color:var(--muted);max-width:44ch;margin-inline:auto}
.news__form{display:flex;max-width:540px;margin:44px auto 0;
  border-bottom:1px solid var(--line);position:relative}
.news__form input{flex:1;background:none;border:0;padding:18px 4px;color:var(--white);
  font-size:13px;letter-spacing:.08em;outline:none}
.news__form input::placeholder{color:var(--muted-2);letter-spacing:.24em;
  text-transform:uppercase;font-size:10px}
.news__form button{padding:0 6px 0 26px;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
  transition:color .4s var(--ease)}
.news__form button:hover{color:var(--gold-lit)}
.news__note{margin-top:20px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:#000;border-top:1px solid var(--line-soft);
  padding-top:clamp(64px,8vw,110px)}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(30px,4vw,60px)}
.footer h4{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin:0 0 22px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.footer li a{font-size:12.5px;color:var(--muted);transition:color .4s var(--ease)}
.footer li a:hover{color:var(--white)}
.footer__brand .brand__mark{font-size:24px}
.footer__brand p{color:var(--muted);font-size:12.5px;max-width:32ch;margin:22px 0 0}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line-soft);color:var(--muted);transition:.45s var(--ease)}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.footer__bottom{margin-top:clamp(48px,6vw,80px);padding:24px 0;
  border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}

/* ==========================================================================
   Responsive
   -------------------------------------------------------------------------
   1180 · four columns become three
    900 · nav collapses, editorial stacks
    700 · hero furniture thins out
    560 · phone proper
    380 · small phone
   ========================================================================== */
@media(max-width:1180px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .header__inner{grid-template-columns:auto 1fr auto}
  .grid{grid-template-columns:repeat(2,1fr)}
  .editorial__grid{grid-template-columns:1fr}
  .editorial__media{aspect-ratio:16/11;max-width:none}
  .head__side{text-align:left;max-width:none}
  .brand__mark{font-size:17px;letter-spacing:.26em;text-indent:.26em}
}

@media(max-width:700px){
  /* the hero is bottom-anchored, so it only needs to clear the fold */
  .hero{min-height:520px}
  .hero__frame{inset:12px}
  .hero__row{flex-direction:column;align-items:flex-start;gap:26px;margin-top:32px}
  .hero__cta .btn{padding-inline:26px}
  .hero__meta{font-size:8px}
}

@media(max-width:560px){
  :root{--header-h:64px}
  .announce{height:34px}
  .announce__item{font-size:8.5px;letter-spacing:.2em;padding-inline:14px;text-align:center}
  .header{top:34px}
  .header.is-stuck{height:58px}

  /* the wordmark competes with the burger and the action icons */
  .brand__mark{font-size:13px;letter-spacing:.18em;text-indent:.18em}
  .brand__sub{font-size:6.5px;letter-spacing:.3em;text-indent:.3em}
  .icon-btn{width:38px;height:38px}
  .header__actions{gap:0}

  .section{padding-block:clamp(56px,11vw,86px)}
  .grid{gap:26px 12px}
  .card__body{padding-top:14px;gap:5px}
  .card__title{font-size:16px}
  .card__num{top:10px;left:11px}
  .card__badge{top:10px;right:11px;padding:5px 9px;font-size:7.5px;letter-spacing:.18em}

  .head{margin-bottom:34px;gap:18px}
  .rail__item{flex:0 0 76vw}
  .rail__progress{margin-top:24px}

  .story{margin:30px 0 34px}
  .chapter{grid-template-columns:32px 1fr;gap:14px;padding:19px 0}
  .chapter p{font-size:12.5px}
  .clock{gap:10px;margin:36px 0 34px}
  .clock__u{min-width:0;flex:1}
  .clock__l{font-size:7.5px;letter-spacing:.2em;margin-top:9px}

  .news__form{margin-top:32px}
  .news__form button{padding-left:16px;letter-spacing:.2em}

  .footer{padding-top:56px}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;gap:10px;text-align:center;align-items:center}
}

@media(max-width:380px){
  :root{--gutter:16px}
  .grid{grid-template-columns:1fr;gap:34px}
  .card__title{font-size:19px}
  /* wordmark + burger + three icons have to share 320px */
  .brand__mark{font-size:12px;letter-spacing:.14em;text-indent:.14em}
  .icon-btn{width:34px;height:34px}
  .hero__title{font-size:44px}
  .btn{padding:15px 24px;letter-spacing:.2em}
}

/* ==========================================================================
   Touch devices — hover is not available, so anything hidden behind it
   must be shown outright or dropped.
   ========================================================================== */
@media(hover:none),(pointer:coarse){
  .card__quick{transform:none;background:rgba(6,6,7,.62);font-size:8.5px;padding:13px}
  .card__media::after{transform:scaleX(1)}
  .card__media img{filter:saturate(.88) contrast(1.02)}
  .rail__item img{filter:none}
  /* thumb-sized targets for the colour chips */
  .chip{width:26px;height:26px}
  .colors{gap:12px}
  .colors--lg .chip{width:34px;height:34px}
  .nav a::before,.nav a::after{display:none}
}

/* iOS zooms the page when a focused input renders under 16px. Only the small
   inputs need raising — the search field is already far larger than 16px and
   must not be flattened by a blanket rule. */
@media(max-width:900px){
  .news__form input{font-size:16px}
  .news__form input::placeholder{font-size:11px}
  .qty input{font-size:16px}
}

/* Notched phones: keep the fixed furniture out of the system insets. */
@supports(padding:max(0px)){
  .hero__meta{
    left:max(var(--gutter),env(safe-area-inset-left));
    right:max(var(--gutter),env(safe-area-inset-right));
    bottom:max(clamp(18px,3vw,42px),env(safe-area-inset-bottom));
  }
  .toasts{bottom:max(34px,calc(env(safe-area-inset-bottom) + 18px))}
}

/* ==========================================================================
   Reduced motion — hold the design, drop the movement
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .grain{animation:none}
  .line > span,.fade{transform:none!important;opacity:1!important}
  .clip::after{transform:scaleY(0)!important}
  .clip > img{transform:none!important}
}