/* ═══════════════════════════════════════════════════════════
   ASF COLLECTION — Haute Denim Manufacture
   Structural DNA: Staged Object on a Plinth
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #0A0B0E;
  --bg-2:      #0E1016;
  --panel:     #10131A;
  --hair:      rgba(236,230,218,.10);
  --hair-2:    rgba(236,230,218,.06);
  --ink:       #ECE6DA;
  --muted:     #8A8578;
  --gold:      #C9A96A;
  --gold-soft: rgba(201,169,106,.35);
  --indigo:    #33415E;

  --serif: 'Cormorant Garamond', 'Didot', Georgia, serif;
  --sans:  'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-snap:  cubic-bezier(.77,0,.175,1);
  --pad-x: clamp(1.4rem, 7vw, 8rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--gold);color:#0A0B0E}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#0A0B0E}
::-webkit-scrollbar-thumb{background:#23262e;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

@media (hover:hover) and (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button,
  body.cursor-on input, body.cursor-on textarea, body.cursor-on canvas{cursor:none}
}

/* ── grain ─────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9990;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,2%)} 30%{transform:translate(-1%,3%)}
  40%{transform:translate(2%,-2%)} 50%{transform:translate(-3%,1%)}
  60%{transform:translate(3%,3%)} 70%{transform:translate(-2%,2%)}
  80%{transform:translate(1%,-3%)} 90%{transform:translate(-3%,-1%)}
}

/* ── cursor ────────────────────────────────────────────── */
#cursorDot,#cursorRing{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  opacity:0;transition:opacity .4s;
  visibility:hidden;
}
body.cursor-live #cursorDot, body.cursor-live #cursorRing{visibility:visible}
body.cursor-on #cursorDot, body.cursor-on #cursorRing{opacity:1}
#cursorDot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  transform:translate(-100px,-100px);
}
#cursorRing{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold-soft);
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             border-color .35s, background .35s, opacity .4s;
}
#cursorRing span{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  color:var(--gold);opacity:0;transition:opacity .3s;
}
#cursorRing.is-link{width:56px;height:56px;border-color:var(--gold)}
#cursorRing.is-drag{width:84px;height:84px;border-color:var(--gold);background:rgba(10,11,14,.35)}
#cursorRing.is-drag span{opacity:1}

/* ── progress hairline ─────────────────────────────────── */
.progress-line{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--indigo),var(--gold));
  z-index:9995;
}

/* ── preloader ─────────────────────────────────────────── */
#preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:clip-path 1s var(--ease-snap);
  clip-path:inset(0 0 0 0);
}
#preloader.done{clip-path:inset(0 0 100% 0)}
.pre-inner{text-align:center;width:min(420px,80vw)}
.pre-mark{font-family:var(--serif);font-size:clamp(4rem,10vw,6.5rem);
  font-weight:400;letter-spacing:.14em;color:var(--ink);line-height:1}
.pre-letter{display:inline-block;opacity:0;transform:translateY(30px);
  animation:preIn .9s var(--ease-out) forwards}
.pre-letter:nth-child(2){animation-delay:.12s}
.pre-letter:nth-child(3){animation-delay:.24s}
@keyframes preIn{to{opacity:1;transform:translateY(0)}}
.pre-sub{font-family:var(--mono);font-size:10px;letter-spacing:.42em;
  color:var(--muted);margin-top:1.1rem}
.pre-track{height:1px;background:var(--hair);margin:2.4rem 0 .8rem;overflow:hidden}
.pre-bar{height:100%;width:0;background:var(--gold);transition:width .3s ease}
.pre-pct{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.2em}

/* ── topbar ────────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem var(--pad-x);
  transition:background .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(10,11,14,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair-2);
  padding:1rem var(--pad-x);
}
.wordmark{
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.3em;
  font-weight:500;color:var(--ink);
}
.wordmark em{color:var(--gold);font-weight:300;letter-spacing:.3em}
.topbar-right{display:flex;align-items:center;gap:2rem}
.topbar-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--muted)}
.burger{
  background:none;border:0;width:34px;height:26px;position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.burger span{display:block;height:1px;background:var(--ink);
  transition:transform .45s var(--ease-snap),background .3s;transform-origin:center}
.burger:hover span{background:var(--gold)}
body.menu-open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ── left rail ─────────────────────────────────────────── */
.rail{
  position:fixed;left:2rem;top:50%;transform:translateY(-50%);
  z-index:800;display:flex;flex-direction:column;gap:2rem;
}
.rail-item{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  color:var(--muted);transition:color .4s;
}
.rail-item i{font-style:normal;color:var(--gold);opacity:0;transition:opacity .4s}
.rail-item b{font-weight:400;text-transform:uppercase}
.rail-item:hover,.rail-item.active{color:var(--ink)}
.rail-item.active i{opacity:1}
@media(max-width:1200px){.rail{display:none}}

/* ── menu overlay ──────────────────────────────────────── */
.menu-overlay{
  position:fixed;inset:0;z-index:950;background:var(--bg-2);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad-x);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-snap);
  visibility:hidden;
}
body.menu-open .menu-overlay{clip-path:inset(0 0 0 0);visibility:visible}
.menu-inner{display:flex;flex-direction:column;gap:.2rem}
.menu-link{
  font-family:var(--serif);font-size:clamp(2.4rem,7vw,4.6rem);
  font-weight:300;color:var(--muted);line-height:1.25;
  display:flex;align-items:baseline;gap:1.6rem;
  transition:color .4s,letter-spacing .6s var(--ease-out);
  opacity:0;transform:translateY(24px);
}
body.menu-open .menu-link{opacity:1;transform:translateY(0);
  transition:color .4s,letter-spacing .6s var(--ease-out),
             opacity .7s var(--ease-out) var(--md,.15s),
             transform .7s var(--ease-out) var(--md,.15s)}
body.menu-open .menu-link:nth-child(1){--md:.1s}
body.menu-open .menu-link:nth-child(2){--md:.16s}
body.menu-open .menu-link:nth-child(3){--md:.22s}
body.menu-open .menu-link:nth-child(4){--md:.28s}
body.menu-open .menu-link:nth-child(5){--md:.34s}
body.menu-open .menu-link:nth-child(6){--md:.4s}
body.menu-open .menu-link:nth-child(7){--md:.46s}
body.menu-open .menu-link:nth-child(8){--md:.52s}
.menu-link:hover{color:var(--ink);letter-spacing:.04em}
.menu-num{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.2em}
.menu-foot{
  position:absolute;bottom:2.2rem;left:var(--pad-x);right:var(--pad-x);
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.25em;color:var(--muted);
}

/* ═══════════ HERO — THE STAGE ═══════════ */
.hero{height:210vh;position:relative}
.hero-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(51,65,94,.24), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(201,169,106,.05), transparent 60%),
    var(--bg);
}
.hero-stage{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;
}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jean-wrap{
  position:relative;height:86vh;width:min(92vw,70vh);
  will-change:transform;
  /* blend on the transformed wrapper itself — children of a transformed
     element cannot blend with the page, the wrapper can */
  mix-blend-mode:screen;
  filter:contrast(1.14) brightness(1.03) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 60% 68% at 50% 50%, #000 55%, transparent 78%);
  mask-image:radial-gradient(ellipse 60% 68% at 50% 50%, #000 55%, transparent 78%);
}
.jean-poster,.jean-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.jean-video{opacity:0;transition:opacity .9s ease}
body.video-ready .jean-video{opacity:1}
body.video-ready .jean-poster{opacity:0;transition:opacity .9s ease .25s}
.hero-floor{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  width:min(54vw,660px);height:10vh;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(201,169,106,.15), rgba(201,169,106,.04) 55%, transparent 75%);
  filter:blur(2px);pointer-events:none;
}
.hero-bigword{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(14rem,38vw,34rem);letter-spacing:.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(236,230,218,.07);
  z-index:1;user-select:none;white-space:nowrap;
}
/* the S threads IN FRONT of the jean through a masked band —
   top and bottom of the letter stay behind: a 3D wrap illusion */
.hero-bigword-front{
  z-index:4;pointer-events:none;
  -webkit-text-stroke:1.5px rgba(201,169,106,.72);
  text-shadow:0 0 26px rgba(201,169,106,.18);
  -webkit-mask-image:linear-gradient(175deg,
    transparent 32%, #000 41%, #000 60%, transparent 69%);
  mask-image:linear-gradient(175deg,
    transparent 32%, #000 41%, #000 60%, transparent 69%);
}
.hero-bigword-front i{visibility:hidden;font-style:normal}

.hero-eyebrow{
  position:absolute;top:7.2rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.2rem;z-index:5;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.42em;color:var(--muted);
  white-space:nowrap;
}
.hero-eyebrow .line{width:52px;height:1px;background:var(--hair)}

.hero-title{
  position:absolute;left:var(--pad-x);bottom:26vh;z-index:5;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6vw,5.4rem);
  line-height:1.04;letter-spacing:-.015em;
  max-width:14ch;
}
.hero-title em{color:var(--gold)}
.hero-title .w{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero-title .w span{display:inline-block;transform:translateY(115%);
  transition:transform 1.1s var(--ease-snap)}
body.ready .hero-title .w:nth-child(1) span{transition-delay:.15s}
body.ready .hero-title .w:nth-child(2) span{transition-delay:.25s}
body.ready .hero-title .w:nth-child(3) span{transition-delay:.35s}
body.ready .hero-title .w span{transform:translateY(0)}

.hero-copy{
  position:absolute;left:var(--pad-x);bottom:5.5vh;z-index:5;max-width:34ch;
}
.hero-copy p{font-size:.92rem;color:var(--muted);margin-bottom:1.4rem}
.hero-specs{
  position:absolute;right:var(--pad-x);bottom:5.5vh;z-index:5;
  display:flex;flex-direction:column;gap:.9rem;text-align:right;
}
.hero-specs div{display:flex;flex-direction:column;gap:.15rem}
.hero-specs i{font-family:var(--mono);font-style:normal;font-size:8.5px;
  letter-spacing:.34em;color:var(--gold)}
.hero-specs b{font-family:var(--serif);font-weight:400;font-size:1.05rem;
  font-style:italic;color:var(--ink)}

.scroll-cue{
  position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.4em;
  color:rgba(236,230,218,.75);text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.scroll-cue i{width:1px;height:44px;background:var(--hair);position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--gold);animation:cue 2.2s var(--ease-snap) infinite;
}
@keyframes cue{0%{top:-100%}55%{top:100%}100%{top:100%}}

[data-hero]{opacity:0;transform:translateY(20px);
  transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
body.ready [data-hero]{opacity:1;transform:translateY(0);transition-delay:.55s}

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
  overflow:hidden;padding:1.35rem 0;background:var(--bg-2);
  position:relative;z-index:6;
}
.marquee-track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee-track span{
  font-family:var(--serif);font-size:1.25rem;font-style:italic;font-weight:300;
  color:var(--muted);white-space:nowrap;letter-spacing:.06em;
}
.marquee-track b{color:var(--gold);font-style:normal;font-weight:400;margin:0 1.6rem;font-size:.8rem;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* ═══════════ SHARED SECTION PIECES ═══════════ */
.section{padding:clamp(6rem,12vw,11rem) var(--pad-x);position:relative}
.eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.42em;
  color:var(--gold);margin-bottom:3.2rem;display:flex;align-items:center;gap:1.1rem;
}
.eyebrow::after{content:"";flex:0 0 64px;height:1px;background:var(--gold-soft)}
.section-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:3.4rem;
}
.section-title em{color:var(--gold)}
.mono-label{font-family:var(--mono);font-size:9px;letter-spacing:.32em;color:var(--muted);display:block;margin-bottom:1rem}

[data-reveal]{opacity:0;transform:translateY(42px);
  transition:opacity 1.1s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* buttons */
.btn{
  display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.3em;color:var(--ink);
  border:1px solid rgba(236,230,218,.28);padding:1.05rem 2.1rem;
  transition:border-color .45s,color .45s,background .45s;
  position:relative;background:transparent;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn-solid{background:var(--gold);color:#0A0B0E;border-color:var(--gold)}
.btn-solid:hover{background:transparent;color:var(--gold)}

/* ═══════════ SECTION TURNTABLES ═══════════ */
.side-jean{
  position:absolute;z-index:2;aspect-ratio:3/4;
  mix-blend-mode:screen;
  filter:contrast(1.14) brightness(1.03) saturate(1.05);
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 55%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 55%, transparent 78%);
  touch-action:pan-y;
}
.side-jean .sj-poster,.side-jean .sj-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.side-jean .sj-video{opacity:0;transition:opacity .9s ease}
.side-jean.sj-ready .sj-video{opacity:1}
.side-jean.sj-ready .sj-poster{opacity:0;transition:opacity .9s ease .25s}
.side-jean--inflow{position:relative;margin-top:2.2rem}

.house .side-jean{top:7rem;right:var(--pad-x);height:44vh}
.craft .side-jean{top:6.5rem;right:var(--pad-x);height:38vh}
.collections .side-jean{top:6.5rem;right:var(--pad-x);height:38vh}
.contact .side-jean{top:5.5rem;right:var(--pad-x);height:32vh}
.atelier .side-jean--inflow{height:36vh}

/* mobile: turntables flow inline at the top of each section */
@media(max-width:1024px){
  .section .side-jean{
    position:relative;display:block;
    top:auto;right:auto;bottom:auto;left:auto;
    height:42vh;width:100%;
    margin:0 auto 2.6rem;
  }
}

/* ═══════════ 01 · HOUSE ═══════════ */
.house{background:var(--bg)}
.statement{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.8rem,7vw,6.2rem);line-height:1.08;letter-spacing:-.015em;
  max-width:16ch;margin-bottom:5rem;
}
.statement em{color:var(--gold)}
.s-line{display:block}
.house-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;
  margin-left:auto;max-width:900px;margin-bottom:6rem;
}
.house-text p{font-size:1.02rem;color:var(--muted);max-width:52ch;margin-bottom:1.4rem;font-weight:300}
.house-text p:first-child{color:var(--ink)}

.ledger{border-top:1px solid var(--hair)}
.ledger-row{
  display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;
  padding:1.7rem 0;border-bottom:1px solid var(--hair);
  transition:padding .5s var(--ease-out),background .5s;
}
.ledger-row:hover{padding-left:1.2rem;background:rgba(236,230,218,.015)}
.ledger-i{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.2em}
.ledger-k{font-family:var(--sans);font-weight:300;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ledger-v b{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);color:var(--ink);font-variant-numeric:tabular-nums}
.ledger-v i{font-style:normal;color:var(--gold);font-size:1.4rem}

/* ═══════════ 03 · CRAFT ═══════════ */
.craft{background:var(--bg)}
.craft-lede{color:var(--muted);max-width:52ch;margin:-1.6rem 0 3rem;font-size:1rem}
.stages{border-top:1px solid var(--hair);margin-top:1rem}
.stage-row{
  display:grid;grid-template-columns:80px 1.1fr 1.6fr 90px;
  gap:2.4rem;align-items:center;
  padding:2.4rem 0;border-bottom:1px solid var(--hair);
  position:relative;transition:background .5s;
}
.stage-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease-snap);
}
.stage-row:hover{background:rgba(236,230,218,.018)}
.stage-row:hover::before{transform:scaleY(1)}
.stage-num{
  font-family:var(--serif);font-size:1.9rem;font-weight:300;
  color:var(--gold);font-style:italic;text-align:center;
}
.stage-name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.01em;
}
.stage-desc{font-size:.9rem;color:var(--muted);max-width:52ch}
.swatch{
  width:64px;height:64px;justify-self:end;
  border:1px solid var(--hair);
  transition:transform .6s var(--ease-out),border-color .5s;
}
.stage-row:hover .swatch{transform:rotate(6deg) scale(1.08);border-color:var(--gold-soft)}
.swatch-1{background:repeating-linear-gradient(63deg,#1c2740 0 2px,#232f4d 2px 4px)}
.swatch-2{background:repeating-linear-gradient(63deg,#141a2b 0 2px,#1b2338 2px 4px)}
.swatch-3{background:repeating-linear-gradient(63deg,#26324e 0 2px,#2e3c5e 2px 4px)}
.swatch-4{background:repeating-linear-gradient(63deg,#39496e 0 2px,#455879 2px 4px)}
.swatch-5{background:repeating-linear-gradient(63deg,#556685 0 2px,#64779a 2px 4px)}
.swatch-6{background:repeating-linear-gradient(63deg,#6e7f9e 0 2px,#8093b4 2px 4px)}

.materials{margin-top:5rem}
.materials .mono-label{color:var(--gold);margin-bottom:1.4rem;display:flex;align-items:center;gap:.9rem}
.materials .mono-label::after{content:"";flex:0 0 44px;height:1px;background:var(--gold-soft)}
.materials .services{margin-top:0}

.pull{
  margin:7rem auto 0;max-width:30ch;text-align:center;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.35;color:var(--ink);
}
.pull em{color:var(--gold)}

/* ═══════════ 04 · COLLECTIONS ═══════════ */
.collections{background:var(--bg-2)}
.col-grid{
  display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;
  gap:1.4rem;min-height:88vh;
}
.panel{
  position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--hair-2);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.panel-men{grid-row:1/3}
.panel-art{
  position:absolute;inset:0;
  transition:transform 1.4s var(--ease-out);
  display:flex;align-items:center;justify-content:center;
}
.panel:hover .panel-art{transform:scale(1.06)}
.panel-art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.9;
  filter:saturate(.92) contrast(1.03);
}
.panel-art .giant{position:relative;z-index:1}
.art-indigo{
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(84,105,150,.35), transparent 60%),
    repeating-linear-gradient(63deg,#151d31 0 2px,#1b2540 2px 4px),
    #10141f;
}
.art-stone{
  background:
    radial-gradient(ellipse 90% 70% at 70% 25%, rgba(140,150,170,.22), transparent 60%),
    repeating-linear-gradient(63deg,#181d29 0 2px,#202737 2px 4px),
    #12151d;
}
.art-wash{
  background:
    radial-gradient(ellipse 90% 70% at 40% 30%, rgba(120,150,200,.28), transparent 60%),
    repeating-linear-gradient(63deg,#20283d 0 2px,#293351 2px 4px),
    #161b28;
}
.giant{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(9rem,22vw,22rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(236,230,218,.12);
  user-select:none;transition:-webkit-text-stroke-color .6s;
}
.panel:hover .giant{-webkit-text-stroke-color:rgba(201,169,106,.4)}
.panel::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px dashed var(--gold-soft);opacity:0;
  transition:opacity .7s;
}
.panel:hover::after{opacity:1}
.panel-body{
  position:relative;z-index:2;padding:2.4rem;
  background:linear-gradient(transparent,rgba(10,11,14,.88) 55%);
}
.panel-body h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin-bottom:.7rem;
}
.panel-body p{font-size:.88rem;color:var(--muted);max-width:34ch;margin-bottom:1.2rem}
.panel-cta{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--gold);
  display:inline-flex;align-items:center;gap:.6rem;
}
.panel-cta i{font-style:normal;transition:transform .45s var(--ease-out)}
.panel:hover .panel-cta i{transform:translateX(8px)}
.panel-hit{position:absolute;inset:0;z-index:3}
.panel-cta{position:relative;z-index:4}

/* ═══════════ COLLECTION SUB-PAGES ═══════════ */
.hero--sub{height:150vh}
.topbar-label a{color:inherit;transition:color .4s}
.topbar-label a:hover{color:var(--gold)}
@media(min-width:769px){
  .topbar-label.back{display:inline-block;white-space:nowrap}
}
.fit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,3rem);margin-top:1rem;
}
.fit-grid--two{grid-template-columns:repeat(2,minmax(0,480px));justify-content:center}
.fit-card{text-align:center}
.fit-grid .side-jean{
  display:block;position:relative;height:46vh;width:100%;
}
.fit-photo{
  border:1px solid var(--hair);padding:10px;background:#0e1016;
  height:46vh;display:flex;align-items:center;justify-content:center;
  transition:border-color .5s;
}
.fit-card:hover .fit-photo{border-color:var(--gold-soft)}
.fit-photo img{width:100%;height:100%;object-fit:contain;display:block}
.fit-card h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.8rem);margin:1.4rem 0 .6rem;
}
.fit-card .mono-label{color:var(--gold)}
.fit-card p{color:var(--muted);font-size:.88rem;line-height:1.7;max-width:40ch;margin:0 auto}
.fac-media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:saturate(.95) contrast(1.02);
}
.cta-band{text-align:center;padding-bottom:2rem}
.cta-band h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.1;margin-bottom:1.2rem;
}
.cta-band h2 em{color:var(--gold)}
.cta-band p{color:var(--muted);max-width:52ch;margin:0 auto 2.4rem}
@media(max-width:1024px){
  .fit-grid{grid-template-columns:1fr}
  .fit-grid--two{grid-template-columns:1fr}
  .fit-grid .side-jean{display:block;height:52vh}
}

/* — archive index — */
.archive{margin-top:4.5rem}
.archive .mono-label{color:var(--gold);margin-bottom:1.3rem;display:flex;align-items:center;gap:.9rem}
.archive .mono-label::after{content:"";flex:0 0 44px;height:1px;background:var(--gold-soft)}
.archive-row{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.archive-row a{
  flex:1 0 auto;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--muted);
  padding:1.15rem 1.2rem;
  border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);
  transition:color .4s,background .4s;
}
.archive-row a:hover{color:var(--gold);background:rgba(236,230,218,.025)}

/* ═══════════ 04 · LOOKBOOK ═══════════ */
.lookbook{background:var(--bg-2);overflow:hidden}
.lb-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;margin-bottom:3.4rem;
}
.lb-head .section-title{margin-bottom:1.6rem}
.lb-lede{color:var(--muted);max-width:52ch;font-size:1rem}
.lb-lede em{color:var(--gold);font-style:italic}
.lb-nav{display:flex;gap:.8rem;flex:0 0 auto}
.lb-btn{
  width:54px;height:54px;border:1px solid var(--hair);
  background:transparent;color:var(--ink);font-size:1.15rem;
  font-family:var(--serif);
  transition:border-color .4s,color .4s,background .4s;
}
.lb-btn:hover{border-color:var(--gold);color:var(--gold)}

.lb-stage{
  position:relative;height:clamp(430px,60vh,640px);
  perspective:1500px;margin-top:.4rem;
  touch-action:pan-y;cursor:grab;
}
.lb-stage:active{cursor:grabbing}
.lb-glow{
  position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);
  width:min(72%,780px);height:18%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(201,169,106,.13), transparent 72%);
  filter:blur(3px);pointer-events:none;
}
.lb-carousel{position:absolute;inset:0;transform-style:preserve-3d}
.lb-item{
  position:absolute;top:50%;left:50%;
  width:min(58vw,330px);aspect-ratio:3/4;
  padding:10px;background:#0e1016;border:1px solid var(--hair);
  will-change:transform,opacity;user-select:none;
  transition:border-color .5s,box-shadow .5s;
}
.lb-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02);
  pointer-events:none;-webkit-user-drag:none;
}
.lb-item.active{
  border-color:var(--gold-soft);
  box-shadow:0 34px 90px rgba(0,0,0,.6);
}
.lb-caption{
  max-width:62ch;margin:2.8rem auto 0;text-align:center;
  min-height:150px;transition:opacity .24s ease;
}
.lb-caption.switching{opacity:0}
.lb-caption .mono-label{color:var(--gold);margin-bottom:.4rem}
.lb-caption h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.8rem;
}
.lb-caption p{color:var(--muted);font-size:.95rem;line-height:1.7}
.lb-count{
  display:inline-block;margin-top:1.2rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted);
}
.lb-count b{color:var(--gold);font-weight:400}
.lb-progress{
  height:1px;background:var(--hair-2);margin-top:2rem;position:relative;
}
.lb-progress i{
  position:absolute;top:-1px;height:3px;left:0;width:8%;
  background:linear-gradient(90deg,var(--indigo),var(--gold));
  transition:left .3s ease;
}
@media(max-width:768px){
  .lb-head{flex-direction:column;align-items:flex-start}
  .lb-stage{height:56vh}
  .lb-item{width:64vw}
}

/* ═══════════ 05 · ATELIER ═══════════ */
.atelier{background:var(--bg)}
.atelier-grid{
  display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(3rem,7vw,7rem);
  align-items:start;
}
.atelier-sticky{position:sticky;top:16vh}
.atelier-lede{color:var(--muted);max-width:36ch;font-size:1.02rem}
.atelier-photo{
  margin-top:2.8rem;max-width:460px;
  border:1px solid var(--hair);padding:10px;
  transition:border-color .5s;
}
.atelier-photo:hover{border-color:var(--gold-soft)}
.atelier-photo img{width:100%;display:block;filter:saturate(.95)}
.atelier-photo figcaption{margin:.95rem 2px 0}
.atelier-list{border-top:1px solid var(--hair)}
.cap-row{
  display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;
  padding:1.8rem 0;border-bottom:1px solid var(--hair);
  transition:padding .5s var(--ease-out);
}
.cap-row:hover{padding-left:1rem}
.cap-row i{
  grid-row:1/3;font-family:var(--mono);font-style:normal;
  font-size:10px;color:var(--gold);letter-spacing:.15em;padding-top:.5rem;
}
.cap-row b{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.01em}
.cap-row span{font-size:.85rem;color:var(--muted);margin-top:.3rem}
/* — inside the walls: facility tour — */
.facilities{margin-top:7rem}
.fac-intro{margin-bottom:4rem}
.fac-intro .mono-label{
  color:var(--gold);display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem;
}
.fac-intro .mono-label::after{content:"";flex:0 0 44px;height:1px;background:var(--gold-soft)}
.fac-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;
}
.fac-title em{color:var(--gold)}
.fac-row{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
  margin-bottom:clamp(4rem,7vw,6.5rem);
}
.fac-row--flip .fac-media{order:2}
.fac-media{
  border:1px solid var(--hair);padding:10px;background:#0e1016;
  position:relative;transition:border-color .5s;
}
.fac-row:hover .fac-media{border-color:var(--gold-soft)}
.fac-media video{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:saturate(.95) contrast(1.02);background:#0e1016;
}
.fac-num{
  position:absolute;top:-10px;left:20px;
  background:var(--bg);padding:0 12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--gold);
}
.fac-text .mono-label{color:var(--gold)}
.fac-text h4{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.2;
  margin:.4rem 0 1.1rem;
}
.fac-text p{color:var(--muted);font-size:.95rem;line-height:1.75;max-width:52ch}
.fac-spec{
  display:inline-block;margin-top:1.3rem;padding-top:.9rem;
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:rgba(236,230,218,.55);
}
@media(max-width:900px){
  .fac-row{grid-template-columns:1fr;gap:1.6rem}
  .fac-row--flip .fac-media{order:0}
}

.services{
  margin-top:6rem;display:flex;flex-wrap:wrap;gap:1rem;
}
.service{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--ink);
  border:1px solid var(--hair);padding:.9rem 1.6rem;
  transition:border-color .45s,color .45s;
}
.service:hover{border-color:var(--gold);color:var(--gold)}

/* ═══════════ 05 · CONTACT ═══════════ */
.contact{background:var(--bg)}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(3rem,8vw,8rem);
  align-items:start;
}
.addr{margin-bottom:3.4rem}
.contact-info .mono-label{
  color:var(--gold);display:flex;align-items:center;gap:.9rem;
}
.contact-info .mono-label::after{content:"";flex:0 0 34px;height:1px;background:var(--gold-soft)}
.addr p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.55;margin-bottom:1.6rem;
}
.direct a{
  position:relative;transition:color .4s;
}
.direct a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-snap);
}
.direct a:hover{color:var(--gold)}
.direct a:hover::after{transform:scaleX(1)}
.socials{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.socials a{
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--muted);
  border:1px solid var(--hair);padding:.75rem 1.2rem;
  transition:color .4s,border-color .4s;
}
.socials a:hover{color:var(--gold);border-color:var(--gold)}
/* — the dossier card — */
.form-card{
  position:relative;
  background:linear-gradient(160deg, rgba(236,230,218,.035), rgba(236,230,218,.008) 55%), var(--panel);
  border:1px solid var(--hair);
  padding:clamp(1.8rem,3.4vw,3.4rem);
}
.form-card::after{
  content:"";position:absolute;inset:12px;pointer-events:none;
  border:1px dashed rgba(201,169,106,.22);
  transition:border-color .6s;
}
.form-card:focus-within::after{border-color:rgba(201,169,106,.5)}
.form-head{margin-bottom:2.6rem;padding-bottom:1.8rem;border-bottom:1px solid var(--hair-2)}
.form-head .mono-label{color:var(--gold);margin-bottom:.9rem}
.form-lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;
}
.form-lede em{color:var(--gold)}

.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}

.contact-form .field{margin-bottom:2.3rem;position:relative}
.contact-form label{
  display:flex;align-items:baseline;gap:.65rem;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.3em;color:var(--muted);margin-bottom:.55rem;
  transition:color .4s;
}
.contact-form label i{font-style:normal;color:var(--gold);letter-spacing:.12em}
.contact-form label s{text-decoration:none;opacity:.55;letter-spacing:.2em}
.contact-form .field:focus-within > label{color:var(--ink)}
.contact-form input,.contact-form textarea{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:1.35rem;font-weight:400;
  color:var(--ink);padding:.55rem 2px;resize:vertical;
  transition:background .45s;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{background:rgba(236,230,218,.025)}
.contact-form ::placeholder{color:rgba(138,133,120,.55);font-style:italic;font-size:1.05rem}
.f-line{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold),#8a6a35);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-snap);
}
.field:focus-within .f-line{transform:scaleX(1)}

/* — topic chips — */
.f-topic{margin-top:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;padding-top:.5rem}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
  display:inline-block;
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  color:var(--muted);border:1px solid var(--hair);
  padding:.75rem 1.3rem;
  transition:color .4s,border-color .4s,background .4s;
}
.chip:hover span{color:var(--ink);border-color:rgba(236,230,218,.3)}
.chip input:checked + span{
  color:#0A0B0E;background:var(--gold);border-color:var(--gold);
}
.chip input:focus-visible + span{outline:1px dashed var(--gold);outline-offset:3px}

.hp{position:absolute;left:-9999px;opacity:0;height:0;pointer-events:none}
.btn-send{
  width:100%;margin-top:1.4rem;padding:1.3rem 2rem;
  font-size:10.5px;letter-spacing:.34em;
  display:flex;justify-content:center;align-items:center;gap:.9rem;
}
.btn-send b{font-weight:400;transition:transform .45s var(--ease-out)}
.btn-send:hover b{transform:translateX(8px)}
.form-note{
  margin-top:1.3rem;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--muted);
}

/* ═══════════ 06 · THE COMMISSION ═══════════ */
.commission{background:var(--bg-2)}
.cm-lede{
  color:rgba(236,230,218,.72);max-width:58ch;
  font-size:1.06rem;line-height:1.85;margin:-1.4rem 0 3.8rem;
}

/* calmer palette inside the configurator — gold as accent, not fill */
.commission .chip span{
  font-size:10px;letter-spacing:.2em;
  color:rgba(236,230,218,.72);
  border-color:rgba(236,230,218,.14);
  padding:.8rem 1.35rem;
}
.commission .chip:hover span{color:var(--ink);border-color:rgba(236,230,218,.35)}
.commission .chip input:checked + span{
  background:transparent;color:var(--ink);
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}
.commission ::placeholder{color:rgba(138,133,120,.7);font-size:1rem}
.cm-grid{
  display:grid;grid-template-columns:.9fr 1.35fr;
  gap:clamp(2rem,4vw,4rem);align-items:start;
}

/* — live spec sheet / tailor's ticket — */
.cm-ticket{
  position:sticky;top:12vh;
  background:linear-gradient(165deg, rgba(236,230,218,.04), rgba(236,230,218,.008) 60%), var(--panel);
  border:1px solid var(--hair);padding:2rem 1.8rem;
}
.cm-ticket::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px dashed rgba(236,230,218,.12);
}
.cm-ticket-head{border-bottom:1px solid var(--hair);padding-bottom:1.2rem;margin-bottom:.4rem}
.cm-ticket-head .mono-label{color:rgba(236,230,218,.85);margin-bottom:.7rem;letter-spacing:.3em}
.cm-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--muted)}
.cm-no b{color:var(--gold);font-weight:400}
.cm-trow{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--hair-2);
}
.cm-trow i{font-family:var(--mono);font-style:normal;font-size:9px;
  letter-spacing:.26em;color:rgba(236,230,218,.5);flex:0 0 auto}
.cm-trow b{font-family:var(--serif);font-weight:400;font-size:1.12rem;
  color:var(--ink);text-align:right;transition:color .3s}
.cm-trow b.tick{color:var(--gold)}
.cm-ticket-note{
  margin-top:1.4rem;font-family:var(--sans);font-size:.8rem;
  letter-spacing:.02em;line-height:1.8;color:rgba(236,230,218,.55);
}

/* — configurator — */
.cm-group{margin-bottom:2.8rem}
.cm-label{
  display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;
  color:rgba(236,230,218,.9);margin-bottom:1.1rem;
}
.cm-label i{font-style:normal;color:var(--gold);letter-spacing:.12em}
.cm-label s{text-decoration:none;opacity:.55;letter-spacing:.2em}
.cm-sub{margin-top:.7rem}
.cm-form .field{margin-bottom:1.2rem;position:relative}
.cm-form input,.cm-form textarea{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:1.2rem;font-weight:400;
  color:var(--ink);padding:.5rem 2px;resize:vertical;outline:none;
  transition:background .45s;
}
.cm-form input:focus,.cm-form textarea:focus{background:rgba(236,230,218,.025)}
.cm-mini{
  display:flex;gap:.5rem;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.26em;color:var(--muted);margin-bottom:.4rem;
}
.cm-mini s{text-decoration:none;opacity:.55}
.cm-measure{
  margin-top:1.4rem;padding:1.4rem 1.4rem .4rem;
  border:1px dashed rgba(201,169,106,.3);
}
.cm-mrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.6rem}
.cm-half{display:grid;grid-template-columns:1fr 1.4fr;gap:2.4rem;align-items:start}
.cm-form .btn-send{margin-top:.4rem}

@media(max-width:1024px){
  .cm-grid{grid-template-columns:1fr}
  .cm-ticket{position:static}
}
@media(max-width:640px){
  .cm-mrow{grid-template-columns:1fr}
  .cm-half{grid-template-columns:1fr}
}

/* ═══════════ THE ARCHIVE PAGE ═══════════ */
.ar-head{padding-top:11rem;padding-bottom:2rem}
.ar-index{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.ar-index a{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  color:var(--muted);border:1px solid var(--hair);padding:.8rem 1.3rem;
  transition:color .4s,border-color .4s;
}
.ar-index a:hover{color:var(--gold);border-color:var(--gold)}
.ar-chapter{padding-top:5rem}
.ar-chapter:nth-child(odd){background:var(--bg-2)}
.ar-grid{
  columns:4 260px;column-gap:1.4rem;margin-top:2.4rem;
}
.ar-item{
  break-inside:avoid;margin:0 0 1.4rem;cursor:pointer;
  border:1px solid var(--hair);padding:8px;background:#0e1016;
  transition:border-color .5s,transform .5s var(--ease-out);
  position:relative;
}
.ar-item:hover{border-color:var(--gold-soft);transform:translateY(-4px)}
.ar-item img{width:100%;display:block;filter:saturate(.96)}
.ar-item figcaption{
  padding:.6rem 2px .1rem;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;color:var(--muted);
  display:flex;justify-content:space-between;
}
.ar-item:hover figcaption{color:var(--gold)}

.ar-lightbox{
  position:fixed;inset:0;z-index:9996;background:rgba(6,7,10,.96);
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ar-lightbox.open{display:flex}
.ar-lightbox img{
  max-width:88vw;max-height:84vh;object-fit:contain;
  border:1px solid var(--hair);padding:10px;background:#0e1016;
}
.ar-cap{
  position:absolute;bottom:3.2vh;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--gold);
  white-space:nowrap;
}
.ar-close,.ar-prev,.ar-next{
  position:absolute;z-index:2;
  width:54px;height:54px;border:1px solid var(--hair);
  background:rgba(10,11,14,.6);color:var(--ink);
  font-family:var(--serif);font-size:1.2rem;
  transition:border-color .4s,color .4s;
}
.ar-close:hover,.ar-prev:hover,.ar-next:hover{border-color:var(--gold);color:var(--gold)}
.ar-close{top:2.4rem;right:2.4rem}
.ar-prev{left:2.4rem;top:50%;transform:translateY(-50%)}
.ar-next{right:2.4rem;top:50%;transform:translateY(-50%)}
@media(max-width:768px){
  .ar-grid{columns:2 150px;column-gap:.9rem}
  .ar-item{margin-bottom:.9rem;padding:5px}
  .ar-prev{left:.7rem}.ar-next{right:.7rem}
  .ar-close{top:.9rem;right:.9rem}
  .ar-cap{font-size:8px;letter-spacing:.18em}
}

/* — from the archive: film strip on index — */
.arstrip{
  padding:4.5rem 0 5rem;overflow:hidden;background:var(--bg);
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
}
.arstrip-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:1.4rem;flex-wrap:wrap;
  padding:0 var(--pad-x);margin-bottom:2.6rem;
}
.arstrip-head .mono-label{color:var(--gold);margin:0}
.arstrip-row{overflow:hidden}
.arstrip-row + .arstrip-row{margin-top:1.2rem}
.arstrip-track{
  display:flex;gap:1.2rem;width:max-content;padding:0 .6rem;
  animation:marq 75s linear infinite;
}
.arstrip-row--rev .arstrip-track{animation-direction:reverse}
.arstrip-row:hover .arstrip-track{animation-play-state:paused}
.arstrip-item{
  flex:0 0 auto;border:1px solid var(--hair);padding:6px;background:#0e1016;
  transition:border-color .4s,transform .5s var(--ease-out);
}
.arstrip-item:hover{border-color:var(--gold);transform:translateY(-4px)}
.arstrip-item img{height:210px;width:auto;display:block;filter:saturate(.96)}
@media(max-width:768px){
  .arstrip-item img{height:140px}
  .arstrip-track{gap:.8rem;animation-duration:55s}
}

/* archive CTA on index */
.archive-more{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:1.6rem;padding:1.6rem 1.8rem;
  border:1px solid var(--hair);flex-wrap:wrap;
  transition:border-color .5s;
}
.archive-more:hover{border-color:var(--gold-soft)}
.archive-more b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
}
.archive-more b em{color:var(--gold)}

/* ═══════════ THE JOURNAL (blog) ═══════════ */
.j-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,2.8rem);
}
.j-card{display:block}
.j-frame{
  border:1px solid var(--hair);padding:8px;background:#0e1016;
  overflow:hidden;transition:border-color .5s;
}
.j-card:hover .j-frame{border-color:var(--gold-soft)}
.j-frame img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:saturate(.95);transition:transform 1.2s var(--ease-out);
}
.j-card:hover .j-frame img{transform:scale(1.05)}
.j-card .mono-label{color:var(--gold);margin:1.2rem 0 .5rem}
.j-card h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.25;margin-bottom:.6rem;
  transition:color .4s;
}
.j-card:hover h2{color:var(--gold)}
.j-card p{color:var(--muted);font-size:.88rem;line-height:1.7;max-width:44ch}
.j-more{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--muted);
  transition:color .4s;
}
.j-card:hover .j-more{color:var(--gold)}
.j-more i{font-style:normal;transition:transform .4s var(--ease-out)}
.j-card:hover .j-more i{transform:translateX(6px)}
@media(max-width:1024px){.j-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.j-grid{grid-template-columns:1fr}}

/* — article page — */
.post{max-width:1060px}
.post-meta{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;
  color:var(--muted);margin:-1.6rem 0 2.4rem;
}
.post-hero{
  border:1px solid var(--hair);padding:10px;background:#0e1016;
  margin-bottom:3rem;
}
.post-hero img{width:100%;max-height:520px;object-fit:cover;display:block;filter:saturate(.95)}
.post-body{max-width:70ch}
.post-body p{
  color:rgba(236,230,218,.78);font-size:1.02rem;line-height:1.9;
  margin-bottom:1.6rem;
}
.post-body strong{color:var(--ink);font-weight:500}
.post-body em{color:var(--gold)}
.post-body h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25;
  margin:2.8rem 0 1.1rem;
}
.post-body ul{margin:0 0 1.6rem 1.1rem}
.post-body li{
  color:rgba(236,230,218,.78);font-size:1rem;line-height:1.85;
  margin-bottom:.6rem;
}
.post-body a{color:var(--gold);border-bottom:1px solid var(--gold-soft);transition:border-color .3s}
.post-body a:hover{border-bottom-color:var(--gold)}
.post-cta{
  margin:3.5rem 0;padding:2.2rem;
  border:1px solid var(--hair);position:relative;
}
.post-cta::after{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px dashed rgba(201,169,106,.2);
}
.post-cta .cm-lede{margin:0 0 1.4rem}
.post-related{margin-top:3.5rem}
.post-related .mono-label{color:var(--gold);margin-bottom:1.2rem}
.post-rel{
  display:block;padding:1.3rem 0;border-top:1px solid var(--hair);
  transition:padding .4s var(--ease-out);
}
.post-rel:last-child{border-bottom:1px solid var(--hair)}
.post-rel:hover{padding-left:1rem}
.post-rel .mono-label{margin-bottom:.3rem;color:var(--muted)}
.post-rel b{
  font-family:var(--serif);font-weight:400;font-size:1.25rem;
  transition:color .4s;
}
.post-rel:hover b{color:var(--gold)}

/* ═══════════ FAQ (manufacturer page) ═══════════ */
.faq-list{border-top:1px solid var(--hair);max-width:920px}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.6rem 0;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:400;
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:0 0 auto;
  font-family:var(--serif);color:var(--gold);font-size:1.7rem;
  transition:transform .4s var(--ease-out);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--gold)}
.faq-item p{
  color:var(--muted);font-size:.95rem;line-height:1.75;
  max-width:68ch;padding:0 0 1.8rem;
}
.faq-item a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}

/* ═══════════ FOOTER ═══════════ */
.footer{
  border-top:1px solid var(--hair-2);
  padding:6rem var(--pad-x) 2.4rem;overflow:hidden;background:var(--bg-2);
}
.footer-mark{
  font-family:var(--serif);font-weight:600;white-space:nowrap;
  font-size:clamp(3rem,10.5vw,11rem);line-height:1;letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px rgba(236,230,218,.14);
  text-align:center;user-select:none;
  transition:-webkit-text-stroke-color .8s;
}
.footer-mark:hover{-webkit-text-stroke-color:var(--gold-soft)}
.footer-line{
  text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--gold);
  margin:2.6rem 0 5rem;
}
.footer-row{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--muted);
  border-top:1px solid var(--hair-2);padding-top:2rem;
}
.footer-row b{font-weight:400}
.to-top{transition:color .4s}
.to-top:hover{color:var(--gold)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1024px){
  .stage-row{grid-template-columns:56px 1fr 90px;grid-template-rows:auto auto}
  .stage-desc{grid-column:2/3}
  .swatch{grid-row:1/3;align-self:center}
  .atelier-grid{grid-template-columns:1fr}
  .atelier-sticky{position:static}
  .contact-grid{grid-template-columns:1fr}
  .house-grid{grid-template-columns:1fr;gap:1.5rem;margin-left:0}
}
@media(max-width:768px){
  .topbar-label{display:none}
  .hero{height:170vh}
  .jean-wrap{height:58vh;margin-bottom:20vh}
  .hero-title{bottom:36vh;font-size:clamp(2.2rem,10vw,3.2rem)}
  .hero-title,.hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.85)}
  .hero-copy{bottom:8vh;left:1.4rem;right:1.4rem;max-width:none}
  .hero-copy p{font-size:.85rem;max-width:none}
  .hero-specs{display:none}
  .hero-eyebrow{
    top:5.6rem;font-size:8px;letter-spacing:.3em;
    left:0;right:0;transform:none;justify-content:center;
  }
  .hero-eyebrow .line{display:none}
  .scroll-cue{display:none}
  .col-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .f-grid{grid-template-columns:1fr}
  .panel{min-height:56vw}
  .panel-men{grid-row:auto}
  .ledger-row{grid-template-columns:36px 1fr auto}
  .stage-row{grid-template-columns:40px 1fr;gap:1.2rem}
  .swatch{display:none}
  .stage-desc{grid-column:2/3}
  .marquee-track span{font-size:1rem}
}
@media(max-width:520px){
  .hero-title{left:1.4rem}
  .hero-copy{left:1.4rem}
  .footer-row{flex-direction:column;gap:.9rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}