/* ============================================================
   AVENOIR — Haute Horlogerie
   Design system: pure black + bone white, gold used exactly 3×
   Display: Bebas Neue (brutalist)  ·  Body: Cormorant Garamond (refined serif)
   ============================================================ */

:root{
  --black:   #0a0908;
  --black-2: #100e0c;
  --bone:    #ece4d3;
  --bone-dim:#9a9284;
  --bone-fog:#4a453d;
  --gold:    #c6a15b;     /* accent — used EXACTLY 3 times (logo mark, one manifesto word, footer email) */
  --line:    rgba(236,228,211,.14);

  --ease: cubic-bezier(.16,1,.3,1);
  --disp: "Bebas Neue", "Archivo Black", Impact, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Selection */
::selection{ background:var(--bone); color:var(--black); }

/* ============================================================
   CUSTOM CURSOR — gold dot + trailing ring
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{ width:7px; height:7px; background:var(--gold); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--bone);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .3s;
  opacity:.7;
}
.cursor-ring.is-hover{ width:64px; height:64px; background:rgba(236,228,211,.08); opacity:1; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============================================================
   DUST CANVAS (Three.js)
   ============================================================ */
#dust{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9000; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{ color:var(--bone); opacity:.9; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
.loader__bar{ width:180px; height:1px; background:var(--bone-fog); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--bone); }
.loader__pct{ font-family:var(--disp); letter-spacing:.18em; font-size:13px; color:var(--bone-dim); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.nav.is-hidden{ transform:translateY(-120%); }
/* brand stays out of the first look — the product leads; it fades in once past the hero */
.nav__brand{ display:flex; align-items:center; gap:11px; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.nav.is-scrolled .nav__brand{ opacity:1; pointer-events:auto; }
.nav__mark{ color:var(--gold); display:flex; }              /* GOLD USE #1 */
.nav__word{ font-family:var(--disp); font-size:20px; letter-spacing:.34em; padding-left:.34em; color:var(--bone); }
.nav__links{ display:flex; gap:clamp(18px,2.4vw,40px); }
.nav__links a{
  font-family:var(--disp); font-size:14px; letter-spacing:.22em; color:var(--bone);
  position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--bone);
  transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

/* hamburger toggle (mobile only) */
.nav__toggle{
  display:none; width:34px; height:34px; background:none; border:0; cursor:none;
  position:relative; padding:0;
}
.nav__toggle span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--bone);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__toggle span:nth-child(1){ top:13px; }
.nav__toggle span:nth-child(2){ top:20px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* full-screen mobile menu */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.menu.is-open{ opacity:1; visibility:visible; transform:none; }
.menu__links{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.menu__links a{
  font-family:var(--disp); font-size:14vw; letter-spacing:.02em; color:var(--bone); line-height:1;
}
.menu__mail{ font-family:var(--disp); letter-spacing:.14em; font-size:15px; color:var(--bone-dim); margin-top:20px; }

@media (max-width:640px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
}
@media (min-width:641px){ .menu{ display:none; } }

/* ============================================================
   HERO — sticky scroll-scrub · VISUAL FIRST (product owns the screen)
   ============================================================ */
.hero{ position:relative; height:340vh; }         /* tall track for the scrub */
.hero__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
/* lighter, edge-weighted vignette so the movement stays fully legible */
.hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(135% 100% at 50% 44%, transparent 52%, rgba(10,9,8,.4) 82%, rgba(10,9,8,.86) 100%),
    linear-gradient(to bottom, rgba(10,9,8,.4) 0%, transparent 20%, transparent 55%, rgba(10,9,8,.72) 88%, rgba(10,9,8,.95) 100%);
}
/* fades hero to black at the very end for a seamless hand-off to the manifesto */
.hero__blackout{
  position:absolute; inset:0; z-index:4; background:var(--black); opacity:0; pointer-events:none;
}

/* bottom-left brand lockup — the only text over the product */
.hero__lockup{
  position:absolute; z-index:3; left:clamp(20px,4vw,56px); bottom:clamp(30px,7vh,64px);
  pointer-events:none; will-change:opacity, transform;
}
.hero__wordmark{
  font-family:var(--disp); font-weight:400; color:var(--bone);
  font-size:clamp(52px,9vw,140px); line-height:.86; letter-spacing:.02em;
  text-shadow:0 6px 50px rgba(0,0,0,.55);
}
.hero__tagline{
  margin-top:12px; font-size:clamp(14px,1.5vw,20px); color:var(--bone-dim);
  font-style:italic; letter-spacing:.02em; min-height:1.4em;
}
.hero__tagline .caret{
  display:inline-block; width:2px; height:1em; background:var(--bone);
  margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero__scroll{
  position:absolute; z-index:3; bottom:clamp(30px,7vh,64px); right:clamp(20px,4vw,56px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--disp); letter-spacing:.28em; font-size:11px; color:var(--bone-dim);
  will-change:opacity;
}
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--bone-dim), transparent); animation:drop 2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0); transform-origin:top} 40%{transform:scaleY(1); transform-origin:top} 60%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }
.hero__meta{
  position:absolute; z-index:3; top:clamp(20px,3.4vh,28px); left:clamp(20px,4vw,56px);
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  font-family:var(--disp); letter-spacing:.24em; font-size:11px; color:var(--bone-fog);
}
@media (max-width:640px){
  .hero{ height:300vh; }
  .hero__scroll{ display:none; }
  .hero__meta{ display:none; }
}

/* ============================================================
   MANIFESTO — kinetic crossfade (always one principle on screen)
   ============================================================ */
.manifesto{ position:relative; height:300vh; background:var(--black); }
.manifesto__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.manifesto__eyebrow,.manifesto__foot{
  position:absolute; font-family:var(--disp); letter-spacing:.34em; font-size:12px; color:var(--bone-fog); z-index:3;
}
.manifesto__eyebrow{ top:12vh; }
.manifesto__foot{ bottom:12vh; font-style:normal; }

/* vertical progress rail */
.manifesto__rail{
  position:absolute; right:clamp(20px,4vw,56px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:3;
}
.manifesto__rail i{
  width:1px; height:32px; background:var(--bone-fog);
  transition:background .5s var(--ease), transform .5s var(--ease); transform-origin:center;
}
.manifesto__rail i.is-active{ background:var(--bone); transform:scaleY(1.35); }
@media (max-width:640px){ .manifesto__rail{ right:16px; } }

.manifesto__stage{ position:relative; width:100%; height:66vh; }
.mslide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.6vh;
  opacity:0; will-change:opacity, transform, filter;
}
.mslide__ghost{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-56%);
  font-family:var(--disp); font-size:38vw; line-height:1; color:var(--bone);
  opacity:.035; z-index:0; pointer-events:none;
}
.mslide__word{
  position:relative; z-index:1; font-family:var(--disp); color:var(--bone);
  font-size:clamp(52px,14vw,208px); line-height:.86; letter-spacing:.005em;
}
.mslide__sub{
  position:relative; z-index:1; font-family:var(--serif); font-style:italic;
  font-size:clamp(15px,1.8vw,25px); color:var(--bone-dim); letter-spacing:.01em; text-align:center; padding:0 6vw;
}
.mslide--gold .mslide__word{ color:var(--gold); }        /* GOLD USE #2 */

/* ============================================================
   SECTION HEADS (shared)
   ============================================================ */
.section-head__idx{
  display:inline-block; font-family:var(--disp); letter-spacing:.3em; font-size:12px;
  color:var(--bone-dim); margin-bottom:22px;
}
.section-head__title,.maison__lead,.atelier__title{
  font-family:var(--disp); font-weight:400; line-height:.92; letter-spacing:.005em;
  font-size:clamp(40px,7vw,104px); color:var(--bone);
}

/* ============================================================
   COLLECTION
   ============================================================ */
.collection{ position:relative; z-index:2; padding:clamp(90px,14vh,180px) clamp(20px,4vw,56px); background:var(--black); }
.section-head{ margin-bottom:clamp(40px,7vh,90px); }
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,30px); }
@media (max-width:760px){ .grid{ grid-template-columns:1fr; } }

.card{
  position:relative; overflow:hidden; background:var(--black-2);
  border:1px solid var(--line);
}
.card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#000;
}
.card__poster,.card__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
}
.card__video{ opacity:0; }
.card__poster{ opacity:1; filter:grayscale(.15) contrast(1.03); }
.card:hover .card__video{ opacity:1; }
.card:hover .card__poster{ opacity:0; }
.card:hover .card__media img,.card:hover .card__media video{ transform:scale(1.06); }
.card__body{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:22px clamp(18px,2vw,30px) 26px;
}
.card__no{ font-family:var(--disp); letter-spacing:.2em; font-size:13px; color:var(--bone-dim); }
.card__name{ font-family:var(--disp); font-weight:400; font-size:clamp(26px,3vw,44px); letter-spacing:.01em; color:var(--bone); line-height:1; }
.card__spec{ font-style:italic; color:var(--bone-dim); font-size:clamp(14px,1.4vw,18px); margin-left:auto; }
@media (max-width:520px){ .card__spec{ margin-left:0; width:100%; } }
.card::after{
  content:"View ↗"; position:absolute; top:16px; right:18px; z-index:3;
  font-family:var(--disp); letter-spacing:.2em; font-size:12px; color:var(--bone);
  opacity:0; transform:translateY(-6px); transition:.4s var(--ease); mix-blend-mode:difference;
}
.card:hover::after{ opacity:1; transform:translateY(0); }

/* ============================================================
   MAISON — editorial two-column craft
   ============================================================ */
.maison{ position:relative; z-index:2; padding:clamp(90px,14vh,180px) clamp(20px,4vw,56px); background:var(--black); border-top:1px solid var(--line); }
.maison__intro{ max-width:1100px; margin-bottom:clamp(50px,9vh,120px); }
.maison__lead{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,5.2vw,74px); line-height:1.02; color:var(--bone); letter-spacing:0; }
.maison__lead em{ font-style:italic; color:var(--bone); }
.craft{ list-style:none; border-top:1px solid var(--line); }
.craft__row{
  display:grid; grid-template-columns:90px 1.1fr 2fr; gap:clamp(16px,3vw,60px);
  align-items:baseline; padding:clamp(26px,4vh,46px) 0; border-bottom:1px solid var(--line);
  transition:background .5s var(--ease), padding-left .5s var(--ease);
}
.craft__row:hover{ background:linear-gradient(90deg, rgba(236,228,211,.03), transparent 60%); padding-left:18px; }
.craft__no{ font-family:var(--disp); letter-spacing:.2em; font-size:14px; color:var(--bone-fog); }
.craft__title{ font-family:var(--disp); font-weight:400; font-size:clamp(28px,3.4vw,52px); letter-spacing:.01em; color:var(--bone); line-height:1; }
.craft__desc{ font-size:clamp(16px,1.5vw,21px); line-height:1.5; color:var(--bone-dim); max-width:52ch; }
@media (max-width:760px){
  .craft__row{ grid-template-columns:1fr; gap:10px; }
  .craft__row:hover{ padding-left:12px; }
}

/* ============================================================
   ATELIER — team over video
   ============================================================ */
.atelier{ position:relative; z-index:2; height:100vh; min-height:620px; overflow:hidden; display:flex; align-items:flex-end; }
.atelier__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; filter:grayscale(.2) contrast(1.05) brightness(.72); }
.atelier__scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(10,9,8,.96) 4%, rgba(10,9,8,.35) 46%, rgba(10,9,8,.7)); }
.atelier__content{ position:relative; z-index:3; padding:clamp(40px,8vh,90px) clamp(20px,4vw,56px); max-width:900px; }
.atelier__title{ margin:6px 0 24px; }
.atelier__body{ font-size:clamp(17px,1.7vw,23px); line-height:1.55; color:var(--bone); max-width:56ch; font-style:italic; }
.atelier__stats{ display:flex; gap:clamp(30px,6vw,90px); margin-top:clamp(30px,5vh,54px); }
.atelier__stats div{ display:flex; flex-direction:column; gap:6px; }
.atelier__stats b{ font-family:var(--disp); font-weight:400; font-size:clamp(34px,4vw,60px); letter-spacing:.02em; line-height:1; color:var(--bone); }
.atelier__stats span{ font-family:var(--disp); letter-spacing:.2em; font-size:11px; color:var(--bone-dim); }

/* ============================================================
   FOOTER — oversized CTA
   ============================================================ */
.footer{ position:relative; z-index:2; background:var(--black); padding:clamp(80px,12vh,150px) clamp(20px,4vw,56px) 44px; border-top:1px solid var(--line); }
.footer__cta{ margin-bottom:clamp(60px,10vh,120px); }
.footer__big{
  font-family:var(--disp); font-weight:400; line-height:.86; letter-spacing:.005em;
  font-size:11.5vw; color:var(--bone); margin-top:20px; white-space:nowrap;
  display:inline-block;                 /* shrink-wrap for accurate fit measurement */
}
@media (max-width:760px){ .footer__big{ white-space:normal; font-size:clamp(40px,13vw,80px); } }
.footer__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:48px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; gap:34px; } }
.footer__label{ display:block; font-family:var(--disp); letter-spacing:.28em; font-size:12px; color:var(--bone-fog); margin-bottom:16px; }
.footer__email{
  font-family:var(--disp); font-size:clamp(24px,3.4vw,46px); letter-spacing:.01em;
  color:var(--gold);                    /* GOLD USE #3 */
  position:relative; display:inline-block;
}
.footer__email::after{ content:""; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.footer__email:hover::after{ width:100%; }
.footer__socials{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer__socials a{ font-size:20px; color:var(--bone); position:relative; }
.footer__socials a:hover{ color:var(--bone-dim); }
.footer__addr{ font-style:normal; font-size:19px; line-height:1.7; color:var(--bone-dim); }
.footer__base{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:38px; font-family:var(--disp); letter-spacing:.16em; font-size:12px; color:var(--bone-fog);
}
.footer__mark{ display:inline-flex; align-items:center; gap:10px; color:var(--bone-dim); }
.footer__mark svg{ color:var(--bone-fog); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(38px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
  .mslide{ filter:none; }
}