/* ============================================================
   CARTER SOCIETY — THE FINAL ARCHIVE
   Prototype: full site — home, collection, product, cart
   ============================================================ */

:root{
  /* base field — 70-80% of the page */
  --ink:      #07080A;
  --washed:   #0B0D10;
  --graphite: #14171B;
  --charcoal: #22262C;
  --steel:    #33383F;

  /* light register — 15-20% */
  --bone:     #E9E4D9;
  --bone-2:   #D6D0C2;
  --grey:     #8A8D93;
  --grey-2:   #5A5E65;

  /* signature — 5-10% max, sampled from the concept pack */
  --orange:   #F83A00;
  --orange-h: #FF5C21;
  --orange-d: #B82A00;

  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hand:  'Caveat', 'Segoe Script', cursive;

  --pad: clamp(18px, 4.2vw, 68px);
  --rail-h: 1px;
}
:root:not([data-theme="light"]){ color-scheme: dark; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- global texture: film grain + vignette ---------- */
.grain, .vig{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.grain{
  opacity:.055; mix-blend-mode:overlay;
  background-image:var(--grain-url);
  background-size:180px 180px;
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate3d(0,0,0) }
  33%{ transform:translate3d(-3%,2%,0) }
  66%{ transform:translate3d(2%,-3%,0) }
  100%{ transform:translate3d(0,0,0) }
}
.vig{ box-shadow:inset 0 0 26vw 8vw rgba(0,0,0,.72); z-index:89; }

/* ---------- desktop crosshair cursor ---------- */
.cur{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; mix-blend-mode:difference; display:none; }
.cur i{ position:absolute; background:var(--orange); }
.cur i:nth-child(1){ width:17px; height:1px; transform:translate(-8px,0) }
.cur i:nth-child(2){ width:1px; height:17px; transform:translate(0,-8px) }
.cur span{
  position:absolute; left:16px; top:9px; white-space:nowrap;
  font-size:8.5px; letter-spacing:.2em; color:var(--orange);
  text-transform:uppercase; font-weight:500;
}
@media (hover:hover) and (pointer:fine) and (min-width:861px){
  body.hide-native .cur{ display:block }
  body.on-home.hide-native, body.on-home.hide-native *{ cursor:none!important }
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding:16px var(--pad);
  opacity:0; transform:translateY(-100%);
  background:linear-gradient(180deg, rgba(7,8,10,.92) 0%, rgba(7,8,10,.62) 62%, transparent 100%);
  backdrop-filter:blur(7px);
}
.nav.up{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.nav .mark{
  font-family:var(--serif); font-size:clamp(12px,1.25vw,15px);
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
}
.nav .links{ display:flex; gap:22px; margin-left:auto; }
.nav .links a{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); transition:color .25s;
}
.nav .links a:hover{ color:var(--orange) }
.nav .bag{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--steel); padding:8px 13px; transition:.25s;
}
.nav .bag:hover{ border-color:var(--orange); color:var(--orange) }
.nav .bag b{ color:var(--orange); font-weight:500 }
@media (max-width:860px){ .nav .links{ display:none } }

/* ---------- scene progress rail ---------- */
.prog{
  position:fixed; right:calc(var(--pad) * .55); top:50%; z-index:100;
  transform:translateY(-50%); display:flex; flex-direction:column; gap:20px;
  opacity:0; transition:opacity .6s;
}
.prog.up{ opacity:1 }
.prog b{
  display:block; font-size:8.5px; letter-spacing:.16em; font-weight:500;
  color:var(--grey-2); writing-mode:vertical-rl; transition:color .4s;
}
.prog .u{ position:relative; width:1px; height:44px; background:var(--steel); margin-left:4px; }
.prog .u i{
  position:absolute; inset:0 0 auto 0; height:0%;
  background:var(--orange); transition:height .14s linear;
}
.prog .on b{ color:var(--bone) }
@media (max-width:760px){ .prog{ display:none } }

/* ============================================================
   PINNING PRIMITIVES
   ============================================================ */
.stage{ position:relative; }
.pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  transform:translate3d(0,0,0);
}

/* ============================================================
   SCENE 01 — CINEMATIC OPENING
   ============================================================ */
#s1{ height:320svh }
#s1 .pin{ background:var(--ink) }

.plate{ position:absolute; inset:-8% -6%; will-change:transform,opacity; }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate.back{ filter:blur(7px) brightness(.5) saturate(.4); }
.plate.mid{ }
.plate.mid::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,8,10,.86) 0%, rgba(7,8,10,.12) 34%, rgba(7,8,10,.3) 62%, rgba(7,8,10,.94) 100%),
    linear-gradient(90deg, rgba(7,8,10,.7) 0%, transparent 26%, transparent 74%, rgba(7,8,10,.7) 100%);
}
.bloom{
  position:absolute; left:50%; top:52%; width:130vmax; height:130vmax;
  transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(248,58,0,.22) 0%, rgba(248,58,0,.08) 32%, transparent 62%);
  mix-blend-mode:screen;
}

/* scattered archive frames around the edges */
.frames{ position:absolute; inset:0; pointer-events:none; }
.fr{
  position:absolute; width:clamp(74px,9.5vw,148px);
  padding:5px 5px 20px; background:#0E1013;
  box-shadow:0 26px 54px rgba(0,0,0,.72);
  opacity:0; will-change:transform,opacity;
}
.fr img{ aspect-ratio:3/4; object-fit:cover; filter:grayscale(.42) contrast(1.06) }
.fr em{
  position:absolute; left:6px; bottom:5px; font-style:normal;
  font-size:7px; letter-spacing:.14em; color:var(--grey-2); text-transform:uppercase;
}
.fr:nth-child(1){ left:3.5%;  top:13% }
.fr:nth-child(2){ left:10.5%; top:58% }
.fr:nth-child(3){ right:4%;   top:9%  }
.fr:nth-child(4){ right:9%;   top:52% }
.fr:nth-child(5){ left:26%;   top:76% }
.fr:nth-child(6){ right:27%;  top:74% }
@media (max-width:760px){
  .fr:nth-child(5),.fr:nth-child(6){ display:none }
  .script{ font-size:clamp(19px,5.6vw,26px); max-width:80vw; line-height:1.15 }
}

/* type stack */
.s1type{
  position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:0 var(--pad); pointer-events:none;
}
.s1type > *{ grid-area:1/1 }
.years{
  align-self:start; margin-top:20svh; opacity:0;
  font-size:10px; letter-spacing:.44em; color:var(--grey); font-weight:400;
}
.wordmark{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(46px,12.2vw,186px); line-height:.82;
  letter-spacing:.02em; text-transform:uppercase;
  will-change:transform;
}
.wordmark .ln{ display:block; overflow:hidden; padding:.02em .05em .06em; line-height:.9; }
.wordmark .ch{ display:inline-block; will-change:transform,filter,opacity; }
.script{
  align-self:end; margin-bottom:13svh;
  font-family:var(--hand); font-weight:600;
  font-size:clamp(22px,3.5vw,46px); color:var(--orange);
  transform:rotate(-3.4deg);
  clip-path:inset(0 100% 0 0);
}
.tfa{ opacity:0; will-change:transform,opacity }
.tfa .rule{ width:clamp(40px,7vw,96px); height:1px; background:var(--orange); margin:0 auto 20px }
.tfa h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,4.9vw,66px); line-height:1;
  text-transform:uppercase; letter-spacing:.14em;
}
.tfa p{
  margin:18px 0 0; font-size:9.5px; letter-spacing:.34em;
  color:var(--grey); text-transform:uppercase;
}

/* corner meta */
.s1meta{ position:absolute; inset:0; pointer-events:none; }
.s1meta div{
  position:absolute; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey-2); line-height:2.1;
}
.s1meta .tl{ left:var(--pad); top:78px }
.s1meta .tr{ right:var(--pad); top:78px; text-align:right }
.s1meta .bl{ left:var(--pad); bottom:30px }
.s1meta .tr b{ color:var(--orange); font-weight:500 }
@media (max-width:760px){ .s1meta .tr{ display:none } }

/* scroll cue */
.cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:8.5px; letter-spacing:.32em; color:var(--grey); text-transform:uppercase;
}
.cue .t{ position:relative; width:1px; height:44px; background:var(--steel); overflow:hidden }
.cue .t i{ position:absolute; inset:0 0 auto; height:12px; background:var(--orange); animation:tick 1.9s cubic-bezier(.7,0,.3,1) infinite }
@keyframes tick{ 0%{ transform:translateY(-14px) } 100%{ transform:translateY(46px) } }

/* vault doors — the transition device into scene 02 */
.door{ position:absolute; left:0; right:0; height:52%; background:var(--ink); z-index:8; will-change:transform; }
.door.t{ top:0;    transform:translateY(-100%) }
.door.b{ bottom:0; transform:translateY(100%) }
.door::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(248,58,0,.55),transparent); opacity:0;
}
.door.t::after{ bottom:0 } .door.b::after{ top:0 }

/* ============================================================
   SCENE 02 — ENTER THE ARCHIVE
   ============================================================ */
#s2{ height:430svh }
#s2 .pin{
  background:
    radial-gradient(120% 78% at 50% 112%, rgba(248,58,0,.055) 0%, transparent 58%),
    linear-gradient(180deg, #050608 0%, #0B0D10 46%, #060709 100%);
  clip-path:inset(48% 0 48% 0);
}
.room{ position:absolute; inset:0; perspective:1500px; perspective-origin:50% 48%; }

/* ceiling light rig */
.rig{ position:absolute; left:0; right:0; top:0; height:34%; pointer-events:none; overflow:hidden }
.rig i{
  position:absolute; top:0; width:2px; height:26%;
  background:linear-gradient(180deg, rgba(255,214,170,.5), transparent);
}
.rig i::after{
  content:''; position:absolute; left:-46px; top:22%; width:94px; height:210px;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,198,140,.2) 0%, transparent 68%);
}
/* floor */
.floorp{
  position:absolute; left:0; right:0; bottom:0; height:31%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.66) 46%, rgba(0,0,0,.9) 100%);
}
.floorp::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 84px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 74%);
}

/* the horizontal rail of vitrines */
.rail{
  position:absolute; top:50%; left:0; display:flex; align-items:center;
  gap:clamp(18px,3.4vw,58px); padding:0 6vw;
  transform:translate3d(0,-50%,0); will-change:transform;
  transform-style:preserve-3d;
}
.case{
  position:relative; flex:0 0 auto;
  width:clamp(178px,20.5vw,310px); height:clamp(264px,30vw,448px);
  transform-style:preserve-3d; will-change:transform;
  cursor:pointer; pointer-events:auto;
}
.glass{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(168deg, #16191E 0%, #0B0D10 58%, #070809 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
  transition:box-shadow .5s ease;
}
/* warm vitrine edge glow */
.glass::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,196,132,.42),
    inset 0 -1px 0 rgba(255,196,132,.22),
    inset 1px 0 0 rgba(255,196,132,.2),
    inset -1px 0 0 rgba(255,196,132,.2);
  opacity:.4; transition:opacity .5s ease;
}
/* interior spill */
.glass::after{
  content:''; position:absolute; left:50%; top:-14%; width:150%; height:80%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,186,120,.2) 0%, transparent 66%);
  opacity:.5; transition:opacity .5s ease; pointer-events:none;
}
.case .gar{
  position:absolute; left:8%; right:8%; top:9%; bottom:20%;
  will-change:transform;
}
.case .gar img{
  width:100%; height:100%; object-fit:contain;
  filter:brightness(.82) contrast(1.1) saturate(.8);
  transition:filter .5s ease;
}
/* campaign frame that appears behind the garment on focus */
.case .camp{
  position:absolute; inset:9% 8% 20%; opacity:0;
  transition:opacity .55s ease;
}
.case .camp img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.5) brightness(.45) }
/* plinth label */
.case .plate2{
  position:absolute; left:0; right:0; bottom:0; padding:11px 12px 12px;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.78));
}
.case .lot{
  display:flex; align-items:center; gap:7px;
  font-size:7.5px; letter-spacing:.2em; color:var(--grey-2); text-transform:uppercase;
}
.case .lot i{ width:0; height:1px; background:var(--orange); transition:width .5s cubic-bezier(.16,1,.3,1) }
.case .cat{
  margin:6px 0 0; font-family:var(--sans); font-weight:500;
  font-size:clamp(10px,1.15vw,13px); letter-spacing:.2em; text-transform:uppercase;
  transition:letter-spacing .55s cubic-bezier(.16,1,.3,1), color .4s;
}
.case .from{
  margin-top:5px; font-size:9px; letter-spacing:.08em; color:var(--grey-2);
  opacity:0; transition:opacity .5s ease .08s;
}
.case .from s{ color:var(--grey-2); opacity:.8 }
.case .from b{ color:var(--orange); font-weight:600 }
/* floor reflection */
.case .refl{
  position:absolute; left:6%; right:6%; top:100%; height:26%;
  background:linear-gradient(180deg, rgba(255,190,130,.1), transparent 72%);
  filter:blur(7px); opacity:.5; pointer-events:none;
}

/* focused state (driven by JS, not :hover, so scroll position governs it) */
.case.foc .glass{ box-shadow:inset 0 0 0 1px rgba(255,206,150,.34), 0 40px 90px rgba(0,0,0,.6) }
.case.foc .glass::before{ opacity:1 }
.case.foc .glass::after{ opacity:1 }
.case.foc .gar img{ filter:brightness(1.05) contrast(1.12) saturate(.94) }
.case.foc .lot i{ width:26px }
.case.foc .cat{ letter-spacing:.34em }
.case.foc .from{ opacity:1 }
.case:hover .camp{ opacity:.7 }
.case:hover .gar{ transform:translateZ(38px) translateY(-9px) }
.case .gar{ transition:transform .6s cubic-bezier(.16,1,.3,1) }

/* room heading + index */
.s2scrim{
  position:absolute; left:0; top:0; bottom:0; width:min(52vw,640px); z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(6,7,9,.93) 0%, rgba(6,7,9,.72) 38%, transparent 100%);
}
@media (max-width:860px){ .s2scrim{ width:100%; bottom:44%;
  background:linear-gradient(180deg, rgba(6,7,9,.94) 0%, rgba(6,7,9,.7) 62%, transparent 100%) } }
.s2head{
  position:absolute; left:var(--pad); top:clamp(72px,11svh,118px);
  z-index:6; pointer-events:none; max-width:min(38ch,42vw);
}
.s2head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,5.4vw,78px); line-height:.94; text-transform:uppercase;
  letter-spacing:.005em;
}
.s2head p{
  margin:16px 0 0; font-size:10px; line-height:2.2; letter-spacing:.2em;
  color:var(--grey); text-transform:uppercase;
}
.s2note{
  position:absolute; right:var(--pad); top:clamp(76px,13svh,140px); z-index:6;
  font-family:var(--hand); font-weight:600; font-size:clamp(17px,2.3vw,31px);
  color:var(--orange); text-align:right; line-height:1.15;
  transform:rotate(2.6deg); pointer-events:none;
}
.s2idx{
  position:absolute; left:var(--pad); bottom:clamp(26px,5svh,58px); z-index:6;
  display:flex; flex-direction:column; gap:1px;
}
.s2idx a{
  display:flex; align-items:center; gap:10px; padding:5px 0;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey);
  transition:color .3s;
}
.s2idx a i{ width:0; height:1px; background:var(--orange); transition:width .45s cubic-bezier(.16,1,.3,1) }
.s2idx a.on{ color:var(--bone) } .s2idx a.on i{ width:22px }
.s2idx a:hover{ color:var(--orange) }
.s2cta{
  position:absolute; right:var(--pad); bottom:clamp(26px,5svh,58px); z-index:6;
  display:inline-flex; align-items:center; gap:11px;
  background:var(--orange); color:#0A0500; padding:13px 20px;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  transition:background .25s;
}
.s2cta:hover{ background:var(--orange-h) }
@media (max-width:860px){
  .s2note{ display:none }
  .s2idx{ display:none }
  .s2head{ max-width:none; right:var(--pad) }
}

/* ============================================================
   SCENE 03 — FINAL DAYS  (the bright break)
   ============================================================ */
#s3{ height:340svh }
#s3 .pin{ background:var(--ink) }
.fdfield{ position:absolute; inset:0; background:var(--bone); opacity:0; }
.fdphoto{
  position:absolute; inset:0; overflow:hidden;
  clip-path:circle(0% at 50% 50%);
  will-change:clip-path,transform;
}
.fdphoto img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.fdphoto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(233,228,217,.72) 0%, rgba(233,228,217,.2) 40%, rgba(233,228,217,.55) 100%);
}
.fdwrap{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(76px,12svh,120px) var(--pad) clamp(24px,5svh,56px);
  color:var(--ink); opacity:0;
}
.fdwrap h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(46px,11.5vw,168px); line-height:.86; letter-spacing:-.01em;
  text-transform:uppercase;
}
.fdwrap .sub{
  margin:20px 0 0; max-width:34ch;
  font-size:clamp(11px,1.15vw,13px); line-height:1.75; letter-spacing:.02em;
  color:#31353B;
}
/* countdown — set on a baseline grid, not as a widget */
.cd{
  display:flex; gap:clamp(16px,3.4vw,54px); margin:clamp(26px,4.4svh,48px) 0 0;
  border-top:1px solid rgba(7,8,10,.24); padding-top:14px;
}
.cd .u{ min-width:0 }
.cd .n{
  font-family:var(--serif); font-weight:400; font-variant-numeric:tabular-nums;
  font-size:clamp(34px,7.4vw,102px); line-height:.88; color:var(--ink);
  display:block; overflow:hidden;
}
.cd .n span{ display:inline-block }
.cd .l{
  margin-top:8px; font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; color:#63676E;
}
.cd .u:first-child .n{ color:var(--orange) }
.fdbot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:auto }
.scar{ display:flex; flex-direction:column; gap:3px }
.scar b{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:#2A2E34; overflow:hidden; display:block;
}
.scar b span{ display:inline-block }
.fdcta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--bone); padding:16px 26px;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  transition:background .25s, color .25s; white-space:nowrap;
}
.fdcta:hover{ background:var(--orange); color:#0A0500 }
.fdhand{
  position:absolute; right:var(--pad); top:clamp(300px,54svh,560px);
  font-family:var(--hand); font-weight:700; font-size:clamp(22px,3.5vw,50px);
  color:var(--orange); line-height:.98; text-align:right;
  transform:rotate(-5deg); transform-origin:100% 50%; pointer-events:none;
  padding-right:2px;
}
@media (max-width:760px){
  .fdwrap{ justify-content:flex-start; padding-top:clamp(84px,13svh,120px) }
  .fdwrap h2{ font-size:clamp(40px,13vw,64px) }
  .fdwrap .sub{ font-size:11.5px; line-height:1.7; max-width:30ch; margin-top:14px }
  .cd{ gap:0; margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr) }
  .cd .n{ font-size:clamp(26px,9vw,40px) }
  .cd .l{ font-size:7px; letter-spacing:.16em }
  .fdbot{ flex-direction:column; align-items:stretch; gap:20px; margin-top:28px }
  .fdcta{ justify-content:center; padding:16px 18px }
  .fdhand{
    top:auto; bottom:clamp(20px,4svh,46px); right:var(--pad);
    font-size:clamp(19px,6vw,30px); transform:rotate(-4deg);
  }
}

/* ============================================================
   SCENE 04 — HERO PRODUCTS
   ============================================================ */
#s4{ position:relative; background:var(--ink); padding:clamp(64px,10svh,120px) 0 clamp(40px,7svh,80px); }
.s4head{ padding:0 var(--pad) clamp(40px,7svh,88px); max-width:680px; }
.s4head p{ margin:0 0 14px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--orange); }
.s4head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,5.2vw,64px); line-height:1.02; letter-spacing:.005em;
}
.prod{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  min-height:88svh; border-top:1px solid #14171b;
}
.prod:last-child{ border-bottom:1px solid #14171b; }
.prod-media{ position:relative; overflow:hidden; background:var(--washed); }
.prod-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.prod-img.on{ opacity:1; }
.prod-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(7,8,10,.5) 0%, transparent 22%);
}
.prod-tabs{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:0; border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(0deg, rgba(7,8,10,.7), transparent);
}
.prod-tabs button{
  flex:1; padding:14px 8px; font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey); text-align:center;
  border-right:1px solid rgba(255,255,255,.06); transition:color .25s;
}
.prod-tabs button:last-child{ border-right:0 }
.prod-tabs button.on{ color:var(--orange) }
.prod-info{
  display:flex; flex-direction:column; justify-content:center;
  gap:0; padding:clamp(32px,5vw,64px) clamp(24px,4.5vw,72px);
}
.prod-eyebrow{ margin:0 0 10px; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-2); }
.prod-name{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,44px); line-height:1.04; letter-spacing:.005em;
}
.prod-price{ margin:16px 0 0; display:flex; align-items:baseline; gap:11px; }
.prod-price s{ font-size:14px; color:var(--grey-2); }
.prod-price b{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,32px); color:var(--orange); }
.prod-tag{ margin:5px 0 0; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--orange); }
.prod-copy{ margin:22px 0 0; max-width:42ch; font-size:12.5px; line-height:1.85; color:var(--grey); }
.prod-copy[hidden]{ display:none; }
.prod-row{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.prod-swatch{ display:flex; align-items:center; gap:10px; }
.prod-swatch span:first-child{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); margin-right:4px; }
.prod-swatch i{
  width:18px; height:18px; border-radius:50%; display:inline-block;
  border:1px solid rgba(255,255,255,.16); cursor:pointer;
}
.sz{ display:flex; gap:8px; }
.sz button{
  width:38px; height:34px; font-size:10px; letter-spacing:.04em;
  border:1px solid var(--steel); color:var(--bone-2); transition:.2s;
}
.sz button.on{ border-color:var(--orange); color:var(--orange); }
.sz button:hover{ border-color:var(--grey); }
.prod-cta{
  margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--orange); color:#0A0500; padding:15px 22px; width:100%; max-width:340px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  transition:background .25s;
}
.prod-cta:hover{ background:var(--orange-h); }
.prod-stock{ margin-top:11px; font-size:9.5px; letter-spacing:.1em; color:var(--grey-2); }
.prod-stock b{ color:var(--orange); font-weight:600; }
@media (max-width:860px){
  .prod{ grid-template-columns:1fr; min-height:0; }
  .prod-media{ aspect-ratio:4/5; }
  .prod-info{ padding:26px var(--pad) 40px; }
}

/* ============================================================
   SCENE 05 — THE ARCHIVE GAZETTE
   ============================================================ */
#s5{ position:relative; background:var(--paper); }
:root{ --paper:#EDE7D6; --paper-2:#DFD8C3; --ink-p:#1C1914; --ink-p2:#4A4438; --rule:#C9C0A6; }
.gmast{
  position:relative; padding:clamp(56px,9svh,104px) var(--pad) clamp(30px,5svh,56px);
  text-align:center; color:var(--ink-p); border-bottom:3px double var(--rule);
}
.gmast .kick{ margin:0 0 16px; font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--orange-d); font-weight:600; }
.gmast h2{
  margin:0; font-family:var(--serif); font-weight:600; letter-spacing:.01em;
  font-size:clamp(40px,8.4vw,120px); line-height:.94; color:var(--ink-p);
}
.gmast .sub{
  margin:18px auto 0; max-width:52ch; font-family:Georgia,var(--serif); font-style:italic;
  font-size:clamp(13px,1.5vw,17px); line-height:1.6; color:var(--ink-p2);
}
.gmast .issue{
  margin:22px 0 0; display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-p2);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:9px 0;
}

.s5stack{ position:relative; }
.sheet-wrap{ position:relative; height:168svh; }
.sheet-wrap:last-child{ height:100svh; }
.sheet{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:stretch; background:var(--paper);
  will-change:transform,opacity;
}
.sheet::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(28,25,20,.05), transparent 6%, transparent 94%, rgba(28,25,20,.07)),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(28,25,20,.05) 100%);
}
.sheet-link{ position:absolute; inset:0; z-index:5; display:flex; }
.sheet-grid{
  position:relative; z-index:1; width:100%; display:grid;
  grid-template-columns:1fr 1.08fr; align-items:stretch; pointer-events:none;
}
.sheet-photo{ position:relative; overflow:hidden; }
.sheet-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sheet-photo .cap{
  position:absolute; left:16px; right:16px; bottom:14px;
  font-family:Georgia,var(--serif); font-style:italic; font-size:10.5px;
  color:#F2EEE0; text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.sheet-photo::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 -80px 70px -40px rgba(0,0,0,.55); }
.sheet-copy{
  padding:clamp(28px,4.6vw,68px) clamp(24px,4.4vw,64px);
  display:flex; flex-direction:column; justify-content:center; color:var(--ink-p);
}
.sheet-copy .vol{ margin:0 0 12px; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--orange-d); font-weight:700; }
.sheet-copy h3{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,46px); line-height:1.03; color:var(--ink-p);
}
.sheet-copy .byline{
  margin:12px 0 0; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-p2); padding-bottom:16px; border-bottom:1px solid var(--rule);
}
.sheet-body{
  margin-top:18px; font-family:Georgia,var(--serif); font-size:12.5px; line-height:1.68; color:#2B2720;
  column-count:2; column-gap:22px; column-rule:1px solid var(--rule);
  max-width:56ch;
}
.sheet-body p{ margin:0 0 .9em; }
.sheet-body p:first-of-type::first-letter{
  float:left; font-family:var(--serif); font-weight:600; font-size:2.9em;
  line-height:.78; padding:.03em .07em 0 0; color:var(--ink-p);
}
.sheet-pull{
  margin:20px 0 0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.9vw,24px); color:var(--orange-d); line-height:1.3;
  border-left:2px solid var(--orange-d); padding-left:16px;
}
.sheet-cta{
  margin-top:24px; display:inline-flex; align-items:center; gap:9px; width:fit-content;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--ink-p); padding-bottom:3px; border-bottom:1px solid var(--ink-p);
}
.sheet:hover .sheet-cta,.sheet:focus-within .sheet-cta{ color:var(--orange-d); border-color:var(--orange-d); }
.sheet-cta svg{ width:12px; height:12px; transition:transform .3s ease; }
.sheet:hover .sheet-cta svg{ transform:translateX(4px); }
@media (max-width:860px){
  .sheet-wrap{ height:auto; }
  .sheet{ position:relative; height:auto; min-height:100svh; }
  .sheet-grid{ grid-template-columns:1fr; }
  .sheet-photo{ aspect-ratio:5/4; }
  .sheet-body{ column-count:1; max-width:none; }
  .gmast h2{ font-size:clamp(34px,12vw,54px); }
}
@media (prefers-reduced-motion:reduce){
  .sheet-wrap{ height:auto; }
  .sheet{ position:relative; height:auto; min-height:auto; }
}

/* ============================================================
   SCENE 06 — THIS WEEK'S ARCHIVE
   ============================================================ */
#s6{ position:relative; background:var(--ink); padding:clamp(64px,10svh,116px) 0 clamp(70px,11svh,120px); border-top:1px solid #14171b; }
.s6head{
  padding:0 var(--pad) clamp(36px,6svh,64px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.s6head p{ margin:0 0 12px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--orange); }
.s6head h2{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.8vw,58px); line-height:1; }
.s6nav{ display:flex; gap:8px; }
.s6nav button{
  width:38px; height:38px; border:1px solid var(--steel); color:var(--bone-2);
  display:grid; place-items:center; transition:border-color .2s, color .2s;
}
.s6nav button:hover{ border-color:var(--orange); color:var(--orange); }
.s6nav svg{ width:14px; height:14px; }

.rail6{
  display:flex; gap:14px; overflow-x:auto; padding:2px var(--pad) 18px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.rail6::-webkit-scrollbar{ display:none; }
.deal{
  scroll-snap-align:start; flex:0 0 auto; width:clamp(216px,26vw,296px);
  min-height:200px; padding:22px 20px; position:relative; overflow:hidden;
  background:var(--graphite); border:1px solid #23272d; transition:border-color .3s, transform .3s;
  display:flex; flex-direction:column;
}
.deal:hover{ border-color:var(--orange); transform:translateY(-4px); }
.deal .tag{
  display:inline-flex; align-self:flex-start; font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:#0A0500; background:var(--orange); padding:5px 9px; margin-bottom:auto;
}
.deal .tag.alt{ background:transparent; color:var(--orange); border:1px solid var(--orange); }
.deal h3{ margin:18px 0 0; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.08; }
.deal p{ margin:8px 0 0; font-size:11px; letter-spacing:.03em; color:var(--grey); }
.deal .go{ margin-top:16px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); display:inline-flex; align-items:center; gap:6px; }
.deal:hover .go{ color:var(--orange); }
.deal .go svg{ width:11px; height:11px; transition:transform .25s; }
.deal:hover .go svg{ transform:translateX(3px); }
.deal-link{ position:absolute; inset:0; z-index:2; }

.s6sub{ margin:clamp(48px,7svh,84px) 0 0; padding:0 var(--pad); }
.s6sub p{ margin:0; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--grey); }
.s6sub h3{ margin:10px 0 0; font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.2vw,32px); }

.cal{ display:flex; gap:0; overflow-x:auto; margin:clamp(24px,4svh,40px) var(--pad) 0; scrollbar-width:none; }
.cal::-webkit-scrollbar{ display:none; }
.ev{
  flex:0 0 auto; width:clamp(150px,17vw,192px); padding:18px 18px 20px 0;
  border-left:1px solid var(--steel); position:relative;
}
.ev::before{ content:''; position:absolute; left:-1px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--steel); transform:translateX(-50%); }
.ev.next::before{ background:var(--orange); box-shadow:0 0 0 4px rgba(248,58,0,.18); }
.ev.past{ opacity:.4; }
.ev .d{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); }
.ev.next .d{ color:var(--orange); }
.ev .t{ margin-top:8px; font-family:var(--serif); font-weight:400; font-size:16px; line-height:1.2; }
.ev .badge{
  display:inline-block; margin-top:9px; font-size:7.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); border:1px solid var(--orange); padding:3px 7px;
}
@media (max-width:760px){
  .s6head{ flex-direction:column; align-items:flex-start; }
  .deal{ width:78vw; }
  .ev{ width:44vw; }
}

/* ============================================================
   SCENE 07 — BE PART OF THE FINAL CHAPTER
   ============================================================ */
#s7{ position:relative; background:var(--ink); overflow:hidden; }
.s7photo{ position:absolute; inset:0; }
.s7photo img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.s7photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,8,10,.94) 0%, rgba(7,8,10,.74) 42%, rgba(7,8,10,.32) 72%, rgba(7,8,10,.12) 100%),
              linear-gradient(0deg, rgba(7,8,10,.5), transparent 40%);
}
.s7in{
  position:relative; z-index:1; min-height:92svh; display:flex; align-items:center;
  padding:clamp(90px,14svh,150px) var(--pad) clamp(56px,8svh,96px);
}
.s7box{ max-width:560px; }
.s7box p.kick{ margin:0 0 16px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--orange); }
.s7box h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.6vw,68px); line-height:1.04;
}
.s7box .lede2{ margin:18px 0 0; max-width:42ch; font-size:13px; line-height:1.8; color:var(--grey); }
.s7form{ margin-top:30px; display:flex; gap:0; max-width:420px; border-bottom:1px solid var(--steel); }
.s7form input{
  flex:1; background:none; border:0; color:var(--bone); padding:13px 4px;
  font-size:13px; letter-spacing:.01em;
}
.s7form input::placeholder{ color:var(--grey-2); }
.s7form input:focus{ outline:none; }
.s7form button{
  flex:0 0 auto; padding:0 6px; color:var(--orange); display:flex; align-items:center;
}
.s7form button svg{ width:19px; height:19px; transition:transform .25s; }
.s7form button:hover svg{ transform:translateX(4px); }
.s7note{ margin:12px 0 0; font-size:9.5px; letter-spacing:.05em; color:var(--grey-2); }
.s7done{ display:none; margin-top:30px; max-width:420px; font-size:12.5px; color:var(--orange); border-top:1px solid var(--steel); padding-top:14px; }
.s7done.on{ display:block; }
.s7close{ margin-top:44px; font-family:var(--hand); font-size:clamp(17px,2vw,22px); color:var(--orange); transform:rotate(-1.6deg); max-width:34ch; line-height:1.3; }

/* ---------- real site footer ---------- */
.sitefoot{ position:relative; background:var(--washed); border-top:1px solid #191c21; padding:clamp(48px,7svh,80px) var(--pad) 0; }
.sf-top{ display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:32px; padding-bottom:clamp(36px,6svh,60px); }
.sf-brand .mk{ font-family:var(--serif); font-size:17px; letter-spacing:.14em; text-transform:uppercase; }
.sf-brand p{ margin:14px 0 0; max-width:32ch; font-size:11.5px; line-height:1.75; color:var(--grey); }
.sf-social{ display:flex; gap:14px; margin-top:18px; }
.sf-social a{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); transition:color .2s; }
.sf-social a:hover{ color:var(--orange); }
.sf-col h4{ margin:0 0 16px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); }
.sf-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sf-col a{ font-size:12px; color:var(--bone-2); transition:color .2s; }
.sf-col a:hover{ color:var(--orange); }
.sf-bottom{
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  padding:20px 0; border-top:1px solid #191c21;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2);
}
.sf-bottom .legal{ display:flex; gap:18px; flex-wrap:wrap; }
.sf-bottom a{ color:var(--grey-2); transition:color .2s; }
.sf-bottom a:hover{ color:var(--orange); }
@media (max-width:860px){
  .sf-top{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .sf-brand{ grid-column:1/-1; }
}

/* ============================================================
   ROUTER / VIEWS — collection, product, cart
   ============================================================ */
.view[hidden]{ display:none; }
.view{ min-height:100svh; }
.vhead{
  padding:clamp(120px,18svh,180px) var(--pad) clamp(28px,5svh,52px);
  border-bottom:1px solid #14171b;
}
.crumb{ margin:0 0 14px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); }
.crumb a{ color:var(--grey-2); transition:color .2s; }
.crumb a:hover{ color:var(--orange); }
.vhead h1{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(32px,5.6vw,64px); line-height:1; }
.vhead p{ margin:14px 0 0; max-width:56ch; font-size:12.5px; line-height:1.75; color:var(--grey); }

/* ---- collection grid ---- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px;
  background:#14171b; border-top:1px solid #14171b;
}
.gcard{ position:relative; background:var(--ink); padding-bottom:20px; }
.gcard .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--washed); }
.gcard .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gcard:hover .ph img{ transform:scale(1.04); }
.gcard .sale{
  position:absolute; left:10px; top:10px; z-index:2; background:var(--orange); color:#0A0500;
  font-size:7.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:4px 8px;
}
.gcard .gi{ position:absolute; inset:0; z-index:3; }
.gcard .info{ padding:14px 16px 0; }
.gcard h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:16px; }
.gcard .pr{ margin-top:7px; display:flex; gap:8px; font-size:12px; }
.gcard .pr s{ color:var(--grey-2); }
.gcard .pr b{ color:var(--orange); font-weight:500; }
.gempty{ grid-column:1/-1; padding:60px var(--pad); text-align:center; color:var(--grey); font-size:12.5px; }
.gempty a{ color:var(--orange); }

/* ---- product view ---- */
.pv{ display:grid; grid-template-columns:1fr 1fr; min-height:100svh; }
.pv-media{ position:relative; }
.pv-media .main{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--washed); }
.pv-media .main img.mimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s; }
.pv-media .main img.mimg.on{ opacity:1; }
.pv-thumbs{ position:absolute; left:20px; top:92px; z-index:4; display:flex; flex-direction:column; gap:8px; }
.pv-thumbs button{ width:52px; height:52px; overflow:hidden; border:1px solid var(--steel); opacity:.6; transition:.2s; }
.pv-thumbs button.on{ border-color:var(--orange); opacity:1; }
.pv-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pv-info{ padding:clamp(120px,16svh,160px) clamp(28px,4.5vw,64px) 80px; }
.pv-info .crumb{ padding:0 }
.pv-info h1{ margin:14px 0 0; font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,42px); line-height:1.05; }
.pv-price{ margin-top:16px; display:flex; align-items:baseline; gap:11px; }
.pv-price s{ font-size:15px; color:var(--grey-2); }
.pv-price b{ font-family:var(--serif); font-weight:400; font-size:28px; color:var(--orange); }
.pv-tag{ margin:5px 0 0; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--orange); }
.pv-row{ margin-top:26px; display:flex; flex-direction:column; gap:16px; padding-bottom:26px; border-bottom:1px solid #1c1f24; }
.pv-cta{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--orange); color:#0A0500; padding:16px 22px; width:100%; max-width:400px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; transition:background .2s;
}
.pv-cta:hover{ background:var(--orange-h); }
.pv-cta.added{ background:var(--bone); }
.pv-stock{ margin-top:11px; font-size:9.5px; letter-spacing:.1em; color:var(--grey-2); }
.pv-stock b{ color:var(--orange); font-weight:600; }
.acc{ margin-top:26px; border-top:1px solid #1c1f24; }
.acc button{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:15px 0; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2);
  border-bottom:1px solid #1c1f24;
}
.acc button svg{ width:12px; height:12px; transition:transform .25s; }
.acc button[aria-expanded="true"] svg{ transform:rotate(45deg); }
.acc .pnl{ display:none; padding:0 0 18px; font-size:12px; line-height:1.75; color:var(--grey); }
.acc .pnl.on{ display:block; }
.pv-also{ padding:60px var(--pad) 90px; border-top:1px solid #14171b; }
.pv-also h4{ margin:0 0 20px; font-family:var(--serif); font-weight:400; font-size:20px; }
@media (max-width:860px){
  .pv{ grid-template-columns:1fr; }
  .pv-media .main{ position:relative; height:78vw; }
  .pv-info{ padding-top:36px; }
}

/* ---- cart view ---- */
.cv{ max-width:920px; margin:0 auto; padding:clamp(120px,17svh,168px) var(--pad) 100px; }
.cv h1{ margin:0 0 30px; font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.4vw,46px); }
.citem{ display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid #1c1f24; }
.citem .ph{ width:88px; height:104px; overflow:hidden; background:var(--washed); }
.citem .ph img{ width:100%; height:100%; object-fit:cover; }
.citem h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:16px; }
.citem .meta{ margin-top:5px; font-size:10.5px; color:var(--grey-2); }
.citem .pr{ margin-top:8px; font-size:12px; color:var(--orange); }
.citem .rm{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); margin-top:6px; }
.citem .rm:hover{ color:var(--orange); }
.citem .right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; }
.cempty{ padding:60px 0; text-align:center; color:var(--grey); }
.cempty a{ color:var(--orange); }
.csum{ margin-top:28px; padding-top:22px; border-top:1px solid var(--steel); display:flex; justify-content:space-between; align-items:baseline; }
.csum b{ font-family:var(--serif); font-size:22px; color:var(--orange); font-weight:400; }
.cnote{ margin-top:10px; font-size:10.5px; color:var(--grey-2); line-height:1.6; }
.ccta{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--orange); color:#0A0500; padding:17px 22px; width:100%;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; transition:background .2s;
}
.ccta:hover{ background:var(--orange-h); }
@media (max-width:600px){ .citem{ grid-template-columns:64px 1fr auto } .citem .ph{ width:64px; height:78px } }

/* ---------- handoff panel ---------- */
.next{ position:relative; background:var(--ink); padding:clamp(60px,11svh,128px) var(--pad); border-top:1px solid #15181C }
.next .in{ max-width:1180px; margin:0 auto }
.next h3{
  margin:0 0 8px; font-family:var(--serif); font-weight:400;
  font-size:clamp(23px,3.3vw,42px); text-transform:uppercase; letter-spacing:.01em;
}
.next .lede{ margin:0 0 40px; max-width:62ch; font-size:12.5px; line-height:1.85; color:var(--grey) }
.qs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:#15181C; border:1px solid #15181C }
.qs div{ background:var(--ink); padding:20px 18px }
.qs h4{ margin:0 0 8px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); font-weight:600 }
.qs p{ margin:0; font-size:11.5px; line-height:1.8; color:var(--grey) }
.qs p b{ color:var(--bone-2); font-weight:500 }
.foot{ margin-top:38px; padding-top:22px; border-top:1px solid #15181C; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center }
.foot span{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2) }
.foot a{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--orange) }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none }
  .cue .t i{ animation:none; transform:translateY(16px) }
  #s1,#s2,#s3{ height:auto!important }
  #s1 .pin,#s2 .pin,#s3 .pin{ position:relative; height:auto; min-height:100svh; clip-path:none!important }
  .plate{ position:absolute; inset:0 }
  .plate.back{ display:none }
  .fr,.years,.fdwrap{ opacity:1!important }
  .tfa{ display:none }
  .script{ clip-path:none!important }
  .fdphoto{ clip-path:none!important }
  .fdfield{ opacity:1!important }
  .rail{ position:relative; top:auto; transform:none!important; overflow-x:auto; padding:120px 24px 60px; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory }
  .case{ scroll-snap-align:center }
  .case,.case .gar{ transform:none!important }
  .door{ display:none }
  .s1type{ position:relative; min-height:100svh }
  #s2 .pin{ padding-bottom:40px }
}

/* ============================================================
   LIVE BUILD ADDITIONS — menu, packshots, stock states, bag, toasts
   ============================================================ */
.menu-btn{ display:none; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--steel); padding:8px 13px; min-height:36px; }
.menu-btn:hover{ border-color:var(--orange); color:var(--orange); }
@media (max-width:860px){
  .menu-btn{ display:inline-flex; align-items:center; }
  .nav .bag{ margin-left:auto; }
}
.mnav{
  position:fixed; inset:0; z-index:99; background:rgba(7,8,10,.97);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:90px var(--pad) 40px;
}
.mnav[hidden]{ display:none; }
.mnav a{ font-family:var(--serif); font-size:clamp(28px,8vw,44px); line-height:1.25; color:var(--bone); padding:4px 0; }
.mnav a:hover, .mnav a:focus-visible{ color:var(--orange); }
body.menu-open{ overflow:hidden; }

/* cursor + crosshair only on the home view */
body:not(.on-home) .cur{ display:none!important; }

/* Shopify packshots sit on a bone mat so dark garments stay visible */
.gcard .ph.pack{ background:#E4DED2; }
.gcard .ph.pack img{ object-fit:contain; padding:8%; }
.pv-media .main img.mimg.pack{ object-fit:contain; padding:7% 9%; background:#E4DED2; }
.pv-thumbs button.pack{ background:#E4DED2; }
.pv-thumbs button.pack img{ object-fit:contain; padding:4px; }
.citem .ph.pack{ background:#E4DED2; display:block; }
.citem .ph.pack img{ object-fit:contain; padding:6px; }

.gcard .info .clr{ margin:4px 0 0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); }
.gcard .sale.sold{ background:var(--steel); color:var(--bone); }
.gcard.is-sold .ph img{ opacity:.45; filter:grayscale(1); }
.pv-thumbs{ max-height:calc(100svh - 140px); overflow-y:auto; scrollbar-width:none; }
.pv-thumbs::-webkit-scrollbar{ display:none; }
@media (max-width:860px){
  .pv-thumbs{ top:auto; bottom:14px; left:14px; right:14px; flex-direction:row; overflow-x:auto; max-height:none; }
  .pv-thumbs button{ flex:0 0 auto; width:46px; height:46px; }
}

/* sizes */
.sz button:disabled{ opacity:.32; text-decoration:line-through; cursor:not-allowed; }
.sz button{ min-width:38px; width:auto; padding:0 8px; }
.prod-cta:disabled, .pv-cta:disabled{ background:var(--steel); color:var(--grey); cursor:not-allowed; }
.prod-swatch{ flex-wrap:wrap; }
.prod-swatch em{ font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-left:4px; }
.prod-swatch a.sw{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1px solid transparent; }
.prod-swatch a.sw i{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.prod-swatch a.sw.on{ border-color:var(--orange); }
.prod-swatch a.sw:hover{ border-color:var(--grey); }

/* collection chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chips a{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  border:1px solid #23272d; padding:9px 12px; transition:.2s; }
.chips a:hover{ color:var(--bone); border-color:var(--grey-2); }
.chips a.on{ color:var(--orange); border-color:var(--orange); }
.lnk{ color:var(--orange); }
.lnk:hover{ text-decoration:underline; }

/* product description from Shopify */
.acc .pnl .desc{ margin-top:12px; }
.acc .pnl p{ margin:0 0 .8em; }
.acc .pnl ul{ margin:0 0 .8em; padding-left:18px; }

/* bag */
.citem .qty{ display:inline-flex; align-items:center; margin-top:10px; border:1px solid var(--steel); }
.citem .qty button{ width:32px; height:30px; font-size:14px; color:var(--bone-2); }
.citem .qty button:hover:not(:disabled){ color:var(--orange); }
.citem .qty button:disabled{ opacity:.3; cursor:not-allowed; }
.citem .qty span{ min-width:26px; text-align:center; font-size:12px; }
.citem .pr s{ color:var(--grey-2); margin-left:6px; }
.citem.gone{ opacity:.6; }
.citem .warn{ color:var(--orange); }
.ccta:disabled{ background:var(--steel); color:var(--grey); cursor:not-allowed; }
.cerr{ margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--orange); }
.cerr:empty{ display:none; }
.cerr a{ text-decoration:underline; }

/* sign-up error */
.s7err{ margin:12px 0 0; font-size:11px; color:var(--orange); }
.s7err:empty{ display:none; }
.s7form input:disabled{ opacity:.6; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:130; transform:translate(-50%,20px);
  background:var(--bone); color:var(--ink); padding:13px 18px; font-size:11.5px; letter-spacing:.02em;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:calc(100vw - 32px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast a{ font-weight:600; text-decoration:underline; }

/* preview marker (only when Shopify isn't connected) */
.mode-pill{
  position:fixed; left:14px; bottom:14px; z-index:125; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(20,23,27,.92); color:var(--grey); border:1px solid var(--steel); padding:7px 10px; pointer-events:none;
}

.loaderr{ padding:40px var(--pad); color:var(--grey); font-size:12.5px; }
.loaderr a{ color:var(--orange); }
.case .from:empty{ display:none; }
h1[tabindex="-1"]:focus{ outline:none; }