/* ══════════════════════════════════════════════════════════════
   MAISON NOIRE — Collection № 9 · L'Heure Noire
   noir #0a0a0a · ivory #f2ede4 · one gold hairline #b9974e
   ══════════════════════════════════════════════════════════════ */

:root{
  --noir:#0a0a0a;
  --noir-2:#111010;
  --ivory:#f2ede4;
  --ivory-dim:#a49c8e;   /* muted body/labels — ≥7:1 on noir */
  --gold:#b9974e;
  --hairline:rgba(242,237,228,.14);
  --hairline-strong:rgba(185,151,78,.48);
  --ease:cubic-bezier(.19,1,.22,1);
  --serif:'Playfair Display', serif;
  --sans:'Jost', sans-serif;
  --wrap:min(1240px, 92vw);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; background:var(--noir); color-scheme:dark;
  scrollbar-color:var(--gold) var(--noir);
  scrollbar-width:thin;
}
::-webkit-scrollbar{ width:10px; background:var(--noir); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(to bottom, rgba(185,151,78,.18), var(--gold), rgba(185,151,78,.18));
  border:3px solid var(--noir);
}
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
body{
  /* body stays transparent: the fixed #silk canvas sits at z-index:-1,
     which paints above the html background but would be buried by a body one */
  background:transparent;
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(185,151,78,.24);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
}
body::before{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(185,151,78,.8) 50%, transparent calc(50% + .5px)),
    radial-gradient(60% 70% at 50% 52%, rgba(242,237,228,.05), transparent 62%),
    var(--noir);
  transform-origin:top;
  animation:curtainlift 1.65s var(--ease) .12s forwards;
}
::selection{ background:var(--gold); color:var(--noir); }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
em{ font-style:italic; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ width:var(--wrap); margin-inline:auto; }
main:focus{ outline:none; }
[id]{ scroll-margin-top:6.5rem; }
@keyframes curtainlift{
  0%{ clip-path:inset(0 0 0 0); opacity:1; }
  72%{ clip-path:inset(0 0 0 0); opacity:1; }
  100%{ clip-path:inset(0 0 100% 0); opacity:.2; }
}

/* skip link — hidden until keyboard focus */
.skip-link{
  position:fixed; top:-100%; left:50%; transform:translateX(-50%); z-index:100;
  background:var(--noir); color:var(--gold);
  border:1px solid var(--gold);
  font-size:.72rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; padding:.9rem 1.6rem; white-space:nowrap;
  transition:top .3s var(--ease);
}
.skip-link:focus-visible{ top:.9rem; outline-offset:2px; }

/* ── the silk — one fixed canvas beneath everything ─────────── */
#silk{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  background:var(--noir);
  display:block;
}
/* WebGL unavailable → slow CSS sheen so knockouts still breathe */
.no-silk #silk{
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(242,237,228,.14), transparent 55%),
    radial-gradient(90% 120% at 85% 80%, rgba(185,151,78,.10), transparent 60%),
    linear-gradient(160deg, #141210 0%, #0a0a0a 45%, #17140f 78%, #0a0a0a 100%);
  background-size:200% 200%;
  animation:silkdrift 26s ease-in-out infinite alternate;
}
@keyframes silkdrift{ from{ background-position:0% 0%; } to{ background-position:100% 100%; } }

.grain{
  position:fixed; inset:-40px; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* ── header ─────────────────────────────────────────────────── */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.1rem, 4vw, 3rem) 1.6rem;
  background:linear-gradient(to bottom, rgba(10,10,10,.96) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,0) 100%);
  transition:transform .9s var(--ease), background .9s var(--ease);
  will-change:transform;
}
.site-head.is-hidden{
  transform:translateY(-115%);
}
.wordmark{
  font-family:var(--sans); font-weight:300;
  font-size:.95rem; letter-spacing:.52em; text-transform:uppercase;
  color:var(--ivory); text-decoration:none;
  padding:.6rem 0; white-space:nowrap;
}
.wordmark em{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.06em; font-size:1.12em; color:var(--gold); }
.menu{
  display:flex; gap:clamp(.4rem, 2vw, 1.6rem); list-style:none;
}
.menu a{
  display:inline-block; padding:.72rem .35rem;
  font-size:.72rem; font-weight:400; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ivory-dim); text-decoration:none;
  transition:color .5s var(--ease), letter-spacing .5s var(--ease);
}
.menu a i{ font-style:normal; color:var(--gold); font-size:.85em; margin-right:.55em; opacity:.8; }
.menu a:hover, .menu a:focus-visible{ color:var(--ivory); letter-spacing:.4em; }
.nav-toggle{ display:none; }

/* ── shared type ────────────────────────────────────────────── */
.label{
  font-size:.72rem; font-weight:400; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:clamp(1.6rem, 4vh, 3rem);
}
.label::after{ content:""; height:1px; flex:0 0 clamp(3rem,8vw,7rem); background:var(--gold); opacity:.7; }
.kicker{
  font-size:.72rem; font-weight:400; letter-spacing:.5em; text-transform:uppercase;
  color:var(--ivory-dim);
}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:stretch; justify-content:center;
  text-align:left;
  padding:7.5rem 0 5.5rem;
  isolation:isolate;
  overflow:hidden;
}
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 86% 62% at 62% 52%, rgba(10,10,10,.32), rgba(10,10,10,0) 66%),
    linear-gradient(90deg, rgba(10,10,10,.82), rgba(10,10,10,.12) 44%, rgba(10,10,10,.74)),
    linear-gradient(to top, rgba(10,10,10,.86), rgba(10,10,10,0) 28%);
}
.silk-tension{
  position:absolute; inset:5.4rem clamp(1rem,4vw,3rem) 4rem; z-index:0; pointer-events:none;
  border:1px solid rgba(185,151,78,.13);
  border-left-color:rgba(185,151,78,.38);
  border-bottom-color:rgba(185,151,78,.26);
  opacity:0;
  animation:fadein 1.8s var(--ease) 1.25s forwards;
}
.silk-tension span{
  position:absolute; display:block; background:linear-gradient(to bottom, transparent, rgba(185,151,78,.54), transparent);
  width:1px; height:38%; top:18%;
}
.silk-tension span:nth-child(1){ left:18%; }
.silk-tension span:nth-child(2){ left:50%; height:52%; top:24%; opacity:.6; }
.silk-tension span:nth-child(3){ right:13%; top:10%; opacity:.45; }
.hero-inner{
  position:relative; z-index:1;
  width:var(--wrap); margin:auto;
  display:grid; grid-template-columns:minmax(0,8fr) minmax(16rem,3fr);
  align-items:end; gap:clamp(1.8rem,5vw,5.5rem);
}
.hero-copy{ align-self:center; }
.hero-k1{
  opacity:0; animation:fadein 1.6s var(--ease) .35s forwards;
}
.hero-no{
  margin-top:clamp(1.4rem,3.5vh,2.4rem);
  font-size:.8rem; letter-spacing:.55em; text-transform:uppercase; color:var(--ivory);
  opacity:0; animation:fadein 1.6s var(--ease) .75s forwards;
}
.hero-no span{ color:var(--gold); letter-spacing:.2em; }
.hero-title{
  margin-top:clamp(.8rem,2vh,1.4rem);
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(5.4rem, 13.8vw, 13rem);
  line-height:.88; letter-spacing:0;
  text-wrap:balance;
}
.hero-title .line{ display:block; overflow:hidden; padding:0 .08em .06em; }
.hero-title .line:nth-child(2){ margin-left:clamp(2.6rem, 15vw, 13rem); }
.rise{
  display:inline-block; transform:translateY(118%);
  animation:rise 1.7s var(--ease) forwards;
}
.r1{ animation-delay:.55s; }
.r2{ animation-delay:.75s; }
.hero-rule{
  width:1px; height:clamp(3rem,8vh,5.5rem); margin:clamp(1.4rem,3.5vh,2.6rem) 0 0 clamp(5rem, 20vw, 18rem);
  background:linear-gradient(to bottom, var(--gold), rgba(185,151,78,0));
  transform:scaleY(0); transform-origin:top;
  animation:drawline 1.6s var(--ease) 1.5s forwards;
}
.hero-line{
  margin-top:clamp(1.2rem,3vh,2rem);
  font-size:clamp(.85rem,1.4vw,1rem); letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory);
  max-width:52ch;
  margin-left:clamp(1.2rem, 12vw, 10rem);
  text-shadow:0 0 4px rgba(10,10,10,.85), 0 1px 16px rgba(10,10,10,.9);
  opacity:0; animation:fadein 1.8s var(--ease) 1.9s forwards;
}
.hero-ledger{
  border-left:1px solid var(--hairline-strong);
  padding-left:clamp(1rem,2.2vw,1.8rem);
  opacity:0; transform:translateY(24px);
  animation:ledgerin 1.4s var(--ease) 2.05s forwards;
}
.hero-ledger div{ padding:1rem 0; border-bottom:1px solid rgba(242,237,228,.12); }
.hero-ledger div:first-child{ border-top:1px solid rgba(242,237,228,.12); }
.hero-ledger dt{
  font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
}
.hero-ledger dd{
  margin-top:.3rem; color:var(--ivory); font-size:.78rem; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
}
.hero .kicker, .hero-no{ text-shadow:0 0 4px rgba(10,10,10,.85), 0 1px 14px rgba(10,10,10,.9); }
.hero .kicker{ color:var(--ivory); }
.hero-corner, .scroll-cue{ text-shadow:0 0 4px rgba(10,10,10,.85); }
.hero-corner{
  position:absolute; bottom:1.6rem;
  font-size:.62rem; letter-spacing:.38em; text-transform:uppercase; color:var(--ivory-dim);
  opacity:0; animation:fadein 1.8s var(--ease) 2.3s forwards;
}
.hc-l{ left:clamp(1.1rem,4vw,3rem); }
.hc-r{ right:clamp(1.1rem,4vw,3rem); text-align:right; }
.scroll-cue{
  position:absolute; left:50%; bottom:1.35rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  min-height:44px; padding:.4rem .8rem;
  font-size:.62rem; letter-spacing:.45em; text-transform:uppercase;
  color:var(--ivory-dim); text-decoration:none;
  opacity:0; animation:fadein 1.8s var(--ease) 2.6s forwards;
  transition:color .5s var(--ease);
}
.scroll-cue:hover, .scroll-cue:focus-visible{ color:var(--ivory); }
.scroll-cue-line{
  width:1px; height:2.4rem; background:var(--ivory-dim);
  animation:cue 2.8s var(--ease) infinite;
  transform-origin:top;
}
@keyframes rise{ to{ transform:translateY(0); } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes drawline{ to{ transform:scaleY(1); } }
@keyframes ledgerin{ to{ opacity:1; transform:none; } }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ── programme strip ───────────────────────────────────────── */
.program-strip{
  position:relative; overflow:hidden;
  background:var(--noir);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.program-grid{
  width:100%;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
}
.program-item{
  min-width:0;
  padding:clamp(1.05rem,2vw,1.55rem) clamp(1rem,3vw,2.4rem);
  border-right:1px solid var(--hairline);
}
.program-item:last-child{ border-right:0; }
.program-item span{
  display:block; font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
.program-item b{
  display:block; margin-top:.32rem;
  font-size:.67rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ivory);
  font-weight:400;
}
.program-item em{
  display:block; margin-top:.55rem; font-size:.78rem; line-height:1.55; color:var(--ivory-dim);
  font-style:normal;
}

/* ── salon proof — the generated editorial asset ────────────── */
.evidence{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100svh;
  display:grid; align-items:center;
  padding:clamp(5.5rem,11vh,8.5rem) 0;
  background:
    radial-gradient(70% 80% at 76% 46%, rgba(242,237,228,.06), transparent 64%),
    radial-gradient(36% 60% at 24% 18%, rgba(185,151,78,.08), transparent 62%),
    linear-gradient(180deg, #070707, var(--noir) 42%, #0d0c0b);
  border-bottom:1px solid var(--hairline);
}
.evidence::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(185,151,78,.26) 50%, transparent calc(50% + .5px)),
    repeating-linear-gradient(90deg, rgba(242,237,228,.035) 0 1px, transparent 1px 14vw);
  opacity:.52;
}
.evidence-grid{
  width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(20rem, .98fr);
  align-items:center; gap:clamp(2.4rem,6vw,6.8rem);
}
.evidence-copy{
  position:relative; z-index:2;
  max-width:45rem;
  margin-right:clamp(-5rem,-6vw,-2rem);
}
.evidence-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3.4rem, 7.6vw, 8.4rem);
  line-height:.92; letter-spacing:0; text-wrap:balance;
}
.evidence-title em{ color:var(--gold); }
.evidence-text{
  margin-top:clamp(1.3rem,3vh,2.1rem);
  max-width:35rem;
  color:var(--ivory);
  font-size:clamp(.9rem,1.2vw,1.04rem);
  letter-spacing:.15em; text-transform:uppercase; line-height:1.85;
  text-shadow:0 0 12px rgba(10,10,10,.92);
}
.evidence-ledger{
  margin-top:clamp(1.8rem,5vh,3.4rem);
  border-top:1px solid var(--hairline-strong);
  max-width:34rem;
}
.evidence-ledger div{
  display:grid; grid-template-columns:7rem 1fr; gap:1.1rem;
  padding:1rem 0; border-bottom:1px solid var(--hairline);
}
.evidence-ledger dt{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
.evidence-ledger dd{
  color:var(--ivory-dim); font-size:.86rem; line-height:1.55;
}
.evidence-stage{
  --probe-x:62%;
  --probe-y:48%;
  position:relative; z-index:1;
  justify-self:end;
  width:min(40vw, 34rem);
  min-width:min(100%, 20rem);
  aspect-ratio:3/4;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(185,151,78,.34);
  background:#080808;
  box-shadow:
    0 3rem 7rem rgba(0,0,0,.56),
    inset 0 0 0 1px rgba(242,237,228,.045);
  cursor:crosshair;
}
.evidence-stage::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(42% 48% at 50% 35%, transparent 0 42%, rgba(10,10,10,.18) 67%, rgba(10,10,10,.72) 100%),
    linear-gradient(90deg, rgba(10,10,10,.22), transparent 36%, rgba(10,10,10,.46)),
    linear-gradient(to top, rgba(10,10,10,.6), transparent 38%);
  mix-blend-mode:multiply;
}
.evidence-stage::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(16rem 16rem at var(--probe-x) var(--probe-y), rgba(242,237,228,.18), transparent 58%),
    linear-gradient(90deg, transparent calc(var(--probe-x) - 2.4rem), rgba(185,151,78,.12), transparent calc(var(--probe-x) + 2.4rem));
  opacity:.22;
  transition:opacity .9s var(--ease);
  mix-blend-mode:screen;
}
.evidence-stage.is-probing::after,
.evidence-stage:hover::after,
.evidence-stage:focus-within::after{ opacity:.86; }
.evidence-video,
.evidence-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 38%;
  filter:grayscale(1) contrast(1.16) brightness(.78) sepia(.07);
  transform:scale(1.012);
}
.evidence-video{ display:block; }
.evidence-poster{ display:none; }
.no-ambient-video .evidence-video{ display:none; }
.no-ambient-video .evidence-poster{ display:block; }
.evidence-thread{
  position:absolute; z-index:4; top:0; bottom:0; left:var(--probe-x);
  width:1px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(185,151,78,.95) 18% 78%, transparent);
  opacity:.82;
  box-shadow:0 0 24px rgba(185,151,78,.26);
  transition:left .75s var(--ease), opacity .75s var(--ease);
}
.evidence-stage figcaption{
  position:absolute; z-index:5; left:clamp(1rem,2.4vw,1.5rem); right:clamp(1rem,2.4vw,1.5rem); bottom:clamp(1rem,2.4vw,1.5rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  color:var(--ivory); text-shadow:0 0 12px rgba(10,10,10,.96);
}
.evidence-stage figcaption span{
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold);
}
.evidence-stage figcaption b{
  max-width:14rem;
  font-size:.64rem; line-height:1.45; letter-spacing:.28em; text-transform:uppercase; font-weight:400;
  text-align:right;
}

/* ── manifesto ──────────────────────────────────────────────── */
.manifesto{
  position:relative; background:var(--noir);
  padding:clamp(5rem,12vh,9rem) 0 clamp(4.5rem,10vh,8rem);
  overflow:hidden;
}
.watermark{
  position:absolute; top:-.12em; right:-2vw; z-index:0;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(18rem, 42vw, 40rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(185,151,78,.13);
  pointer-events:none; user-select:none;
}
.manifesto .wrap{ position:relative; }
.manifesto-grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(16rem,3fr);
  gap:clamp(2rem,6vw,5.5rem); align-items:start;
}
.manifesto-title{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(2.8rem, 6.4vw, 5.8rem); line-height:1.04; letter-spacing:0;
  max-width:18ch;
  text-wrap:balance;
}
.manifesto-title em{ color:var(--gold); }
.manifesto-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.4rem,6vh,4rem);
  max-width:62rem;
}
.manifesto-cols p{ color:var(--ivory-dim); margin-bottom:1.4rem; max-width:38rem; }
.manifesto-cols p:last-child{ margin-bottom:0; }
.manifesto-cols em{ color:var(--ivory); }
.has-cap::first-letter{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:3.4em; line-height:.8; color:var(--ivory);
  float:left; padding:.08em .12em 0 0;
}
.atelier-ledger{
  border-left:1px solid var(--hairline-strong);
  padding-left:clamp(1.1rem,2.4vw,1.9rem);
  margin-top:clamp(.4rem,2vh,1rem);
}
.ledger-kicker{
  font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem;
}
.atelier-ledger ol{ list-style:none; counter-reset:ledger; }
.atelier-ledger li{
  counter-increment:ledger;
  position:relative; padding:1rem 0 1rem 2.2rem;
  border-top:1px solid rgba(242,237,228,.12);
}
.atelier-ledger li::before{
  content:"0" counter(ledger);
  position:absolute; left:0; top:1.15rem;
  font-size:.58rem; letter-spacing:.18em; color:var(--gold);
}
.atelier-ledger li span{
  display:block; font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ivory-dim);
}
.atelier-ledger li b{
  display:block; margin-top:.4rem; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.05rem; line-height:1.35; color:var(--ivory);
}
.thread-sample{
  height:4.8rem; margin-top:1.6rem;
  border-block:1px solid rgba(185,151,78,.34);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(185,151,78,.92) 48% 48.5%, transparent 48.5% 100%),
    repeating-linear-gradient(102deg, rgba(242,237,228,.09) 0 1px, transparent 1px 10px),
    radial-gradient(70% 140% at 15% 20%, rgba(242,237,228,.08), transparent 56%);
}
.ledger-note{
  margin-top:1.1rem; color:var(--ivory-dim); font-size:.82rem; line-height:1.65;
}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(3rem,8vh,5.5rem);
  border-top:1px solid var(--hairline);
}
.stat{ padding:1.6rem 1rem 0 0; border-right:1px solid var(--hairline); padding-right:1.4rem; }
.stat:last-child{ border-right:0; }
.stat dt{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ivory-dim); }
.stat dd{
  margin-top:.5rem;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2rem,3.6vw,3.2rem); color:var(--ivory);
}

/* ── lookbook — knockout rows over the living silk ──────────── */
/* The section background stays transparent; each row's silk layer
   (black bg + white glyphs, mix-blend-mode:multiply) knocks the
   glyphs through to the fixed WebGL canvas beneath. */
.lookbook{ position:relative; background:transparent; }
.lb-cap{
  background:var(--noir);
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(2.9rem,7vh,5rem);
  border-bottom:1px solid var(--hairline);
}
.lb-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(4rem, 11vw, 10.5rem); line-height:.9;
  letter-spacing:0;
}
.lb-title em{ color:var(--gold); }
.lb-hint{ margin-top:1.5rem; max-width:48ch; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ivory-dim); }
.lb-end{ background:var(--noir); height:clamp(3rem,8vh,5rem); border-top:1px solid var(--hairline); }

.looks{ display:block; }
.look{ position:relative; overflow:hidden; }           /* NO z-index/transform here — keeps blend path open */
.look:nth-child(odd){ background:rgba(10,10,10,.92); }
.look-silk{
  position:absolute; inset:0; z-index:0;
  background:#0a0a0a;                 /* hides the silk everywhere except the glyphs */
  mix-blend-mode:multiply;
}
.look-silk .look-row{ color:#fff; opacity:0; transition:opacity .9s var(--ease); }
.look-face{ position:relative; }
.look-face .look-row{ color:var(--ivory); transition:opacity .9s var(--ease); }

.look-row{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.2em clamp(1rem,3vw,2.6rem);
  width:var(--wrap); margin-inline:auto;
  padding:clamp(1.8rem,4.8vh,3.4rem) 0 .35rem;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2.9rem, 8.8vw, 8.4rem);
  line-height:1.04; letter-spacing:-.01em;
}
.look:nth-child(3n+2) .look-row,
.look:nth-child(3n+2) .look-sub{ width:min(1090px, 88vw); }
.look:nth-child(3n) .look-row,
.look:nth-child(3n) .look-sub{ width:min(1160px, 90vw); }
.look-no{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:.24em; letter-spacing:.24em;
  transform:translateY(-.4em); display:inline-block;
}
.look-face .look-no{ color:var(--ivory-dim); }
.look-name, .look-name-h{ display:inline-block; }

.look-sub{
  position:relative; z-index:1;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.4rem;
  width:var(--wrap); margin-inline:auto;
  padding:0 0 clamp(1.7rem,4.5vh,2.9rem);
}
.look-fabric{
  font-size:.74rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ivory-dim);
  transition:letter-spacing 1.1s var(--ease), color 1.1s var(--ease), transform 1.1s var(--ease);
}
.look-meta{
  flex:0 0 auto;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ivory-dim);
}
/* row hairlines + hover gold sweep */
.look::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hairline); z-index:1;
}
.look:first-child::before{ display:none; }   /* .lb-cap border already draws this line */
.look::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold); z-index:1;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease);
}
/* hover / touch-activated state — the silk floods the glyphs */
.look:hover .look-face .look-row,
.look.is-lit .look-face .look-row{ opacity:.14; }
.look:hover .look-silk .look-row,
.look.is-lit .look-silk .look-row{ opacity:1; }
.look:hover::after,
.look.is-lit::after{ transform:scaleX(1); }
.look:hover .look-fabric,
.look.is-lit .look-fabric{ letter-spacing:.34em; color:var(--ivory); transform:translateX(clamp(.4rem,1.4vw,1rem)); }
.look.is-lit{
  box-shadow:inset 0 0 0 1px rgba(185,151,78,.16), inset 0 0 90px rgba(185,151,78,.06);
}
/* № 7 — the one gold look */
.look-gold .look-face .look-name-h{ color:var(--gold); }
.look-gold .look-fabric{ color:#c2a35f; }
.look-gold.is-lit .look-face .look-row,
.look-gold:hover .look-face .look-row{ opacity:.68; }
.look-gold.is-lit .look-silk .look-row,
.look-gold:hover .look-silk .look-row{ opacity:.42; }

/* ── défilé ─────────────────────────────────────────────────── */
.defile{
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(185,151,78,.07), transparent 60%),
    var(--noir);
  border-top:1px solid var(--hairline);
  padding:clamp(5rem,12vh,9rem) 0;
}
.defile-grid{
  display:grid; grid-template-columns:minmax(12rem,.9fr) minmax(22rem,1.2fr) minmax(16rem,.9fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.defile-date{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(3.6rem, 9vw, 8.2rem); line-height:.95; letter-spacing:-.02em;
  white-space:nowrap;
}
.defile-date em{ display:block; }
.defile-year{ display:block; color:var(--ivory-dim); font-size:.5em; font-style:italic; margin-top:.15em; }
.defile-copy{
  margin-top:1.3rem; max-width:22rem; color:var(--ivory-dim); line-height:1.7;
}
.defile-facts{ max-width:34rem; }
.defile-facts div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1.2rem;
  padding:1.05rem 0; border-bottom:1px solid var(--hairline);
}
.defile-facts div:first-child{ border-top:1px solid var(--hairline); }
.defile-facts dt{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); padding-top:.35em; }
.defile-facts dd{ color:var(--ivory-dim); font-size:.98rem; }
.runway-board{
  margin:0; border-block:1px solid var(--hairline-strong);
  padding:1rem 0 0;
}
.runway-board figcaption{
  font-size:.62rem; letter-spacing:.38em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem;
}
.runway-plan{
  position:relative; height:18rem; overflow:hidden;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(185,151,78,.9) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(0deg, rgba(242,237,228,.06) 0 1px, transparent 1px 24px);
}
.runway-line{
  position:absolute; left:50%; top:1rem; bottom:1rem; width:9.5rem; transform:translateX(-50%);
  border-inline:1px solid rgba(242,237,228,.16);
  background:linear-gradient(to bottom, rgba(242,237,228,.04), rgba(185,151,78,.10), rgba(242,237,228,.02));
}
.seat{
  position:absolute; width:.42rem; height:2.8rem;
  border-top:1px solid rgba(242,237,228,.26); border-bottom:1px solid rgba(242,237,228,.26);
}
.s1,.s2,.s3,.s4{ left:14%; }
.s5,.s6,.s7,.s8{ right:14%; }
.s1,.s5{ top:1.1rem; }.s2,.s6{ top:4.7rem; }.s3,.s7{ bottom:4.7rem; }.s4,.s8{ bottom:1.1rem; }
.entrance,.atelier-mark{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ivory-dim);
}
.entrance{ bottom:1.2rem; }
.atelier-mark{
  top:50%; color:var(--gold); font-family:var(--serif); font-style:italic; font-size:2rem; letter-spacing:.04em;
}
.countdown{ margin-top:clamp(3rem,8vh,5.5rem); text-align:center; }
.countdown-label{
  font-size:.7rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.9rem;
}
.countdown-row{
  display:flex; justify-content:center; align-items:stretch;
  gap:clamp(1rem,4vw,3.4rem);
}
.cd-cell{ display:flex; flex-direction:column; gap:.55rem; min-width:4.2ch; }
.cd-num{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:1;
  font-variant-numeric:tabular-nums;
}
.cd-unit{ font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ivory-dim); }
.cd-sep{ width:1px; background:linear-gradient(to bottom, transparent, var(--gold), transparent); opacity:.55; }

/* ── rendez-vous ────────────────────────────────────────────── */
.rendezvous{
  background:
    linear-gradient(180deg, var(--noir-2), #0c0b0a 52%, var(--noir));
  border-top:1px solid var(--hairline);
  padding:clamp(5rem,12vh,9rem) 0;
}
.rdv-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.4rem,6vw,6rem);
}
.rdv-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,4.8vw,4.2rem); line-height:1.08;
}
.rdv-title em{ color:var(--gold); }
.rdv-copy{ margin-top:1.6rem; color:var(--ivory-dim); max-width:30rem; }
.rdv-seal{
  margin-top:clamp(2rem,5vh,3.4rem);
  width:min(18rem,100%);
  border-block:1px solid var(--hairline-strong);
  padding:1.1rem 0;
}
.rdv-seal span{
  display:block; font-family:var(--serif); font-style:italic; font-size:3rem; line-height:1; color:var(--gold);
}
.rdv-seal p{
  margin-top:.7rem; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ivory-dim);
}
.rdv-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.9rem 2.2rem; align-content:start;
  border-top:1px solid rgba(185,151,78,.34);
  padding-top:1.4rem;
}
.field{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.field-full{ grid-column:1/-1; }
.field label{
  font-size:.64rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.field input, .field select, .field textarea{
  appearance:none; -webkit-appearance:none;
  background:linear-gradient(to right, rgba(242,237,228,.025), transparent 42%); border:0; border-bottom:1px solid var(--hairline);
  border-radius:0;
  color:var(--ivory); font-family:var(--sans); font-weight:300;
  font-size:1rem; letter-spacing:.03em;
  padding:.65rem .1rem .8rem; min-height:44px;
  transition:border-color .6s var(--ease), background .6s var(--ease);
}
.field ::placeholder{ color:rgba(177,168,152,.76); font-style:italic; }
.field select{
  color:var(--ivory);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b9974e'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
  padding-right:1.6rem; cursor:pointer;
}
.field select option{ background:var(--noir); color:var(--ivory); }
.field textarea{ resize:vertical; min-height:5.4rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-bottom-color:var(--gold);
  background:linear-gradient(to right, rgba(185,151,78,.08), transparent 52%);
}
.rdv-actions{ grid-column:1/-1; display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:.4rem; }
.rdv-btn{
  cursor:pointer;
  background:transparent; color:var(--ivory);
  border:1px solid rgba(242,237,228,.35);
  font-family:var(--sans); font-weight:400;
  font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  padding:1.05rem 2.4rem 1.05rem 2.6rem; min-height:48px;
  transition:background .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease), letter-spacing .7s var(--ease);
  position:relative; overflow:hidden;
}
.rdv-btn::before{
  content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease);
}
.rdv-btn:hover, .rdv-btn:focus-visible{
  background:var(--ivory); color:var(--noir); border-color:var(--ivory);
  letter-spacing:.46em;
}
.rdv-btn:hover::before, .rdv-btn:focus-visible::before{ transform:scaleX(1); }
.rdv-note{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ivory-dim); }
.rdv-done{
  grid-column:1/-1; display:none;
  font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.5;
  color:var(--ivory);
  border-left:1px solid var(--gold); padding-left:1.4rem;
}
.rdv-form.is-sent .field, .rdv-form.is-sent .rdv-actions{ display:none; }
.rdv-form.is-sent .rdv-done{ display:block; }

/* ── footer ─────────────────────────────────────────────────── */
.site-foot{
  background:var(--noir);
  border-top:1px solid rgba(185,151,78,.4);
  padding:clamp(3rem,7vh,4.5rem) 0 2.6rem;
  text-align:center;
}
.foot-mark{
  font-size:.9rem; letter-spacing:.5em; text-transform:uppercase; font-weight:300;
}
.foot-mark em{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.06em; color:var(--gold); font-size:1.12em; }
.foot-addr{ margin-top:.9rem; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ivory-dim); }
.foot-nav{
  margin-top:1.7rem; display:flex; justify-content:center; align-items:center;
  gap:.9rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
}
.foot-nav span{ color:var(--gold); }
.foot-nav a{
  color:var(--ivory-dim); text-decoration:none; padding:.7rem .2rem;
  transition:color .5s var(--ease);
}
.foot-nav a:hover, .foot-nav a:focus-visible{ color:var(--gold); }
.foot-credit{ margin-top:1.3rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); opacity:.8; }

/* ── scroll reveals ─────────────────────────────────────────── */
.rv{
  opacity:0; transform:translateY(34px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay:calc(var(--d,0)*110ms);
}
.rv.is-in{ opacity:1; transform:none; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero{ padding-top:6.5rem; }
  .hero-inner{ grid-template-columns:1fr; align-content:center; }
  .hero-ledger{
    border-left:0; border-top:1px solid var(--hairline-strong);
    padding-left:0; padding-top:.8rem;
    max-width:44rem;
  }
  .hero-ledger dl{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
  .hero-ledger div{ border-top:0; padding:.5rem 0; }
  .hero-ledger div:first-child{ border-top:0; }
  .evidence{ min-height:auto; }
  .evidence-grid{ grid-template-columns:1fr; }
  .evidence-copy{
    margin-right:0;
    max-width:46rem;
  }
  .evidence-stage{
    justify-self:center;
    width:min(76vw, 34rem);
  }
  .manifesto-grid{ grid-template-columns:1fr; }
  .atelier-ledger{
    border-left:0; border-top:1px solid var(--hairline-strong);
    padding-left:0; padding-top:1.6rem;
  }
  .defile-grid{ grid-template-columns:1fr; }
  .defile-date{ white-space:normal; }
  .runway-board{ max-width:34rem; }
  .rdv-grid{ grid-template-columns:1fr; }
}
@media (max-width:920px){
  .nav-toggle{
    display:flex; align-items:center; gap:.8rem;
    background:transparent; border:0; cursor:pointer;
    color:var(--ivory); font-family:var(--sans); font-weight:400;
    font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
    padding:.8rem .2rem .8rem .8rem; min-height:44px;
  }
  .nav-toggle-bar{
    position:relative; width:1.7rem; height:1px; background:var(--ivory); display:block;
    transition:background .4s var(--ease);
  }
  .nav-toggle-bar::before, .nav-toggle-bar::after{
    content:""; position:absolute; left:0; width:100%; height:1px; background:var(--ivory);
    transition:transform .6s var(--ease);
  }
  .nav-toggle-bar::before{ top:-6px; } .nav-toggle-bar::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{ transform:translateY(-6px) rotate(-45deg); }
  .menu{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:center; gap:.4rem;
    background:rgba(10,10,10,.97);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .7s var(--ease), visibility 0s linear .7s;
  }
  .menu.is-open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .7s var(--ease);
  }
  .menu a{
    font-family:var(--serif); font-style:italic; text-transform:none;
    font-size:2rem; letter-spacing:.02em; color:var(--ivory);
    padding:.7rem 1.4rem;
  }
  .menu a:hover, .menu a:focus-visible{ letter-spacing:.04em; color:var(--gold); }
  .menu a i{ font-size:.68rem; letter-spacing:.3em; vertical-align:.9em; margin-right:.8em; }
}
@media (max-width:760px){
  body{ font-size:1rem; }
  .site-head{ padding-bottom:1rem; }
  .wordmark{ font-size:.78rem; letter-spacing:.42em; }
  .hero{
    min-height:100svh;
    padding:5.8rem 0 4.8rem;
  }
  .silk-tension{ inset:4.8rem 1rem 3.6rem; opacity:.75; animation:none; }
  .hero-title{
    font-size:clamp(4.15rem, 18vw, 5.35rem);
    line-height:.92;
  }
  .hero-title .line:nth-child(2){ margin-left:clamp(2rem, 15vw, 3.6rem); }
  .hero-no, .kicker{ letter-spacing:.38em; }
  .hero-line{
    margin-left:clamp(.8rem, 9vw, 2.4rem);
    max-width:28ch;
    letter-spacing:.16em;
  }
  .hero-rule{ margin-left:clamp(3.2rem, 22vw, 6rem); }
  .hero-ledger{ display:none; }
  .program-grid{ grid-template-columns:1fr 1fr; }
  .program-item:nth-child(2n){ border-right:0; }
  .program-item{ border-bottom:1px solid var(--hairline); }
  .program-item:nth-last-child(-n+2){ border-bottom:0; }
  .evidence{ padding:4.5rem 0 5rem; }
  .evidence-grid{ width:min(100% - 2rem, 38rem); gap:2rem; }
  .evidence-title{ font-size:clamp(3.4rem, 15vw, 5.4rem); }
  .evidence-text{ letter-spacing:.12em; }
  .evidence-ledger div{ grid-template-columns:1fr; gap:.35rem; }
  .evidence-stage{ width:min(100%, 24rem); }
  .evidence-stage figcaption{ align-items:flex-start; flex-direction:column; }
  .evidence-stage figcaption b{ text-align:left; max-width:100%; }
  .manifesto-cols{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; border-top:0; }
  .stat{ border-top:1px solid var(--hairline); }
  .stat:nth-child(2n){ border-right:0; }
  .look-sub{ flex-direction:column; gap:.5rem; }
  .look-row,
  .look:nth-child(3n+2) .look-row,
  .look:nth-child(3n) .look-row,
  .look-sub,
  .look:nth-child(3n+2) .look-sub,
  .look:nth-child(3n) .look-sub{ width:min(100% - 2rem, 38rem); }
  .look-row{ font-size:clamp(2.9rem, 13.5vw, 4.4rem); }
  .look-no{ letter-spacing:.18em; }
  .look-fabric{ letter-spacing:.1em; }
  .look:hover .look-fabric, .look.is-lit .look-fabric{ letter-spacing:.16em; transform:none; }
  .defile-facts div{ grid-template-columns:1fr; gap:.35rem; }
  .runway-plan{ height:14rem; }
  .countdown-row{ gap:1rem; }
  .cd-sep{ display:none; }
  .cd-unit{ letter-spacing:.24em; }
  .rdv-form{ grid-template-columns:1fr; }
  .hero-corner{ display:none; }
  .watermark{ font-size:24rem; right:-14vw; top:auto; bottom:-6rem; }
  .foot-nav{ gap:.55rem; letter-spacing:.18em; }
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body::before{ display:none; }
  .rise, .hero-k1, .hero-no, .hero-rule, .hero-line, .hero-corner, .scroll-cue, .silk-tension, .hero-ledger{
    animation:none; opacity:1; transform:none;
  }
  .scroll-cue-line{ animation:none; }
  .no-silk #silk{ animation:none; }
  .evidence-video{ display:none; }
  .evidence-poster{ display:block; }
  .evidence-stage::after{ opacity:.24; transition:none; }
  .evidence-thread{ transition:none; }
  .rv{ opacity:1; transform:none; transition:none; }
  .look-silk .look-row, .look-face .look-row, .look::after, .look-fabric{ transition:none; }
}