/* ————————————————————————————————————————————
   Maison Zéphyr · Ozone Vert
   liquid light — weightless, glassy, expensive silence
——————————————————————————————————————————— */

:root{
  --mist:#EDF2EF;
  --vapor:#C9DCD2;
  --leaf:#7FA394;
  --cedar:#37423D;
  --cedar-deep:#242D29;
  --amber:#DCC7A8;
  --ink:#2A332F;

  --display:"Cormorant Infant", serif;
  --body:"Jost", sans-serif;
  --mono:"Cutive Mono", monospace;

  --ease-out:cubic-bezier(.21,.68,.24,1);
  --maxw:1120px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:linear-gradient(175deg,#F2F6F3 0%,var(--vapor) 34%,var(--leaf) 62%,var(--cedar) 100%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--leaf);color:var(--mist)}

a{color:inherit}
:focus-visible{outline:2px solid var(--leaf);outline-offset:4px;border-radius:2px}

.mono{font-family:var(--mono);font-size:.82rem;letter-spacing:.02em}

/* ——— fixed silk shader ——— */
#silk{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;
  display:block;
}
main,.foot{position:relative;z-index:1}

/* ——— nav ——— */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem clamp(1.25rem,4vw,3.5rem) 1.8rem;
  background:linear-gradient(to bottom,rgba(237,242,239,.88) 20%,rgba(237,242,239,0));
}
body.deep .nav{background:linear-gradient(to bottom,rgba(16,21,18,.66) 20%,rgba(16,21,18,0))}
.wordmark{
  font-family:var(--body);font-weight:500;
  font-size:.85rem;letter-spacing:.42em;text-transform:uppercase;
  text-decoration:none;color:var(--cedar);
  transition:color .8s;
}
.nav nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem);align-items:center}
.nav nav a{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  text-decoration:none;color:var(--cedar);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease-out), color .8s;
}
.nav nav a:hover{border-bottom-color:currentColor}
.nav-cta{
  border:1px solid currentColor;border-radius:999px;
  padding:.42em 1.1em !important;
}
.nav-cta:hover{background:var(--cedar);color:var(--mist) !important;border-bottom-color:transparent !important}
/* dark-water mode (set by JS as page descends) */
body.deep .wordmark, body.deep .nav nav a{color:var(--mist)}
body.deep .nav-cta:hover{background:var(--mist);color:var(--cedar) !important}

/* ——— reveal (only when JS is present to run it) ——— */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ——— hero ——— */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:5.5rem 1.25rem 2rem;
  position:relative;
}
.eyebrow{
  font-family:var(--mono);
  font-size:.8rem;letter-spacing:.18em;text-transform:lowercase;
  color:var(--cedar);
  margin-bottom:1rem;
}
.hero-stage{position:relative;display:grid;place-items:center;width:100%}
.hero h1{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(4.2rem,11.5vw,10.5rem);
  line-height:.88;
  letter-spacing:-.015em;
  color:var(--cedar);
  display:flex;flex-direction:column;
  pointer-events:none;
  z-index:0;
}
.h1-second{transform:translateX(.09em)}
.flacon-wrap{
  position:relative;z-index:1;
  margin-top:calc(clamp(4.2rem,11.5vw,10.5rem) * -1.02);
  width:clamp(150px,18vw,240px);
}
.flacon{
  width:100%;display:block;
  aspect-ratio:300/480;
  filter:drop-shadow(0 4px 8px rgba(24,34,29,.14));
  animation:bob 9s ease-in-out infinite alternate;
}
@keyframes bob{
  from{transform:translateY(-8px)}
  to{transform:translateY(8px)}
}
.flacon-shadow{
  width:58%;height:16px;
  margin:26px auto 0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(31,42,37,.32),rgba(31,42,37,0) 70%);
  animation:shadow-bob 9s ease-in-out infinite alternate;
}
@keyframes shadow-bob{
  from{transform:scaleX(.92);opacity:.75}
  to{transform:scaleX(1.06);opacity:1}
}
.hero-sub{
  margin-top:.75rem;
  font-size:clamp(.95rem,1.4vw,1.12rem);
  font-weight:300;letter-spacing:.02em;
  color:var(--cedar);
  max-width:34em;
}
.descend{
  margin-top:2rem;
  display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;
  color:var(--cedar);text-decoration:none;
}
.descend-line{
  width:1px;height:52px;background:var(--cedar);display:block;
  animation:drip 2.6s var(--ease-out) infinite;
  transform-origin:top;
}
@keyframes drip{
  0%{transform:scaleY(0)}
  45%{transform:scaleY(1);transform-origin:top}
  46%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ——— pyramid intro ——— */
.intro{
  max-width:var(--maxw);margin:0 auto;
  padding:16vh clamp(1.25rem,5vw,3.5rem) 10vh;
  text-align:center;
  background:radial-gradient(ellipse 52% 62% at 50% 50%,rgba(237,242,239,.55),rgba(237,242,239,0) 72%);
}
.kicker{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;
  margin-bottom:1.6rem;
}
.intro-lede{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,2.9vw,2.3rem);
  line-height:1.4;
  max-width:26em;margin:0 auto;
  color:var(--cedar);
}
.intro-lede em{font-style:italic}

/* ——— strata ——— */
.stratum{
  min-height:108svh;
  display:flex;align-items:center;
  position:relative;
  padding:12vh clamp(1.25rem,5vw,3.5rem);
}
.numeral{
  position:absolute;
  top:50%;left:clamp(0rem,6vw,6rem);
  transform:translateY(calc(-52% + var(--par,0px)));
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(11rem,26vw,24rem);
  line-height:1;
  opacity:.14;
  user-select:none;
  pointer-events:none;
}
.stratum-body{
  max-width:34rem;
  margin-left:auto;
  margin-right:clamp(0rem,8vw,8rem);
  padding:2.6rem clamp(1.4rem,3vw,2.6rem);
  border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -30px rgba(16,24,20,.35);
}
.stratum-label{margin-bottom:1.1rem;letter-spacing:.14em}
.evap{opacity:.7;white-space:nowrap}
.stratum h2{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(2.1rem,3.6vw,3rem);
  line-height:1.12;
  margin-bottom:1.1rem;
}
.stratum-copy{font-size:1.02rem;max-width:32em}
.notes{
  list-style:none;
  margin-top:1.8rem;
  font-family:var(--mono);font-size:.82rem;
}
.notes li{
  display:flex;align-items:baseline;gap:.8em;
  padding:.55em 0;
  transition:transform .45s var(--ease-out);
}
.notes li:hover{transform:translateX(4px)}
.notes li:hover span:last-child{opacity:1}
.notes li:hover i{opacity:.8}
.notes span:last-child,.notes i{transition:opacity .45s var(--ease-out)}
.notes li + li{border-top:1px solid}
.notes i{flex:1;border-bottom:1px dotted;opacity:.45;transform:translateY(-.3em)}
.notes span:last-child{opacity:.75;text-align:right}

/* per-stratum ink */
.s-tete{color:var(--cedar)}
.s-tete .stratum-body{background:rgba(237,242,239,.44);border:1px solid rgba(237,242,239,.55)}
.s-tete .notes li + li{border-top-color:rgba(55,66,61,.18)}
.s-tete .numeral{color:var(--cedar)}

.s-coeur{color:var(--mist)}
.s-coeur .stratum-body{background:rgba(38,50,44,.5);border:1px solid rgba(237,242,239,.16)}
.s-coeur .notes li + li{border-top-color:rgba(237,242,239,.16)}
.s-coeur .numeral{color:var(--mist)}

.s-fond{color:var(--mist)}
.s-fond .stratum-body{background:rgba(20,26,23,.55);border:1px solid rgba(220,199,168,.16)}
.s-fond .notes li + li{border-top-color:rgba(237,242,239,.16)}
.s-fond .numeral{color:var(--amber);opacity:.12}
.s-fond .stratum-label{color:var(--amber)}

/* ——— accord equalizer ——— */
.accord{
  padding:14vh clamp(1.25rem,5vw,3.5rem) 16vh;
  color:var(--mist);
  background:
    radial-gradient(58% 46% at 50% 34%,rgba(220,199,168,.07),transparent 70%),
    linear-gradient(180deg,#0F1411 0%,#18201C 55%,var(--cedar-deep) 100%);
}
.glass{
  max-width:46rem;margin:0 auto;
  padding:clamp(2rem,4.5vw,3.6rem);
  border-radius:6px;
  background:rgba(22,29,25,.62);
  border:1px solid rgba(237,242,239,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -30px rgba(8,12,10,.5);
}
.accord .kicker{color:var(--vapor)}
.accord h2{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(2rem,3.4vw,2.8rem);
  line-height:1.15;
  margin-bottom:.8rem;
}
.accord-hint{font-size:.98rem;opacity:.85;max-width:36em;margin-bottom:2.4rem}
.eq{display:flex;flex-direction:column;gap:1.35rem;margin-bottom:2.2rem}
.eq-row{
  display:grid;grid-template-columns:7.5em 1fr 3em;
  align-items:center;gap:1.2em;
}
.eq-row label{letter-spacing:.14em}
.eq-row output{text-align:right;color:var(--amber)}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:1px;background:rgba(237,242,239,.38);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:17px;height:17px;border-radius:50%;
  margin-top:-8px;
  background:radial-gradient(circle at 35% 30%,#fdfffe, var(--vapor) 55%, var(--leaf));
  border:1px solid rgba(237,242,239,.7);
  box-shadow:0 2px 10px rgba(10,14,12,.45);
  transition:transform .3s var(--ease-out);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-track{height:1px;background:rgba(237,242,239,.38)}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fdfffe, var(--vapor) 55%, var(--leaf));
  border:1px solid rgba(237,242,239,.7);
  box-shadow:0 2px 10px rgba(10,14,12,.45);
}
input[type=range]:focus-visible{outline:2px solid var(--vapor);outline-offset:6px}
.eq-desc{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.5;
  min-height:7.5em;
  color:#EAF1ED;
  transition:opacity .4s var(--ease-out);
}

/* ——— ritual ——— */
.rituel{
  background:var(--cedar-deep);
  color:var(--mist);
  padding:16vh clamp(1.25rem,5vw,3.5rem);
  position:relative;
}
.rituel-inner{max-width:var(--maxw);margin:0 auto}
.rituel .kicker{color:var(--vapor)}
.rituel h2{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(2.2rem,4vw,3.4rem);
  margin-bottom:4.5rem;
}
.breaths{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem);
}
.breaths li{border-top:1px solid rgba(220,199,168,.3);padding-top:1.6rem}
.breath-n{
  display:block;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.6rem;line-height:1.15;
  color:var(--amber);
  margin-bottom:1.1rem;
}
.breaths p{font-size:.98rem;opacity:.88;max-width:30em}

/* ——— acquire ——— */
.acquerir{
  background:var(--mist);
  color:var(--ink);
  padding:14vh clamp(1.25rem,5vw,3.5rem);
}
.acq-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.flacon-still{
  width:min(100%,320px);display:block;margin:0 auto;
  aspect-ratio:300/480;
  filter:drop-shadow(0 30px 26px rgba(55,66,61,.25));
}
.acquerir .kicker{color:var(--leaf)}
.acquerir h2{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.12;
  margin-bottom:1.2rem;color:var(--cedar);
}
.acq-copy{max-width:34em;margin-bottom:2.2rem}
.acq-specs{margin-bottom:2.4rem}
.acq-specs div{
  display:flex;justify-content:space-between;gap:2em;
  padding:.6em 0;border-bottom:1px solid rgba(55,66,61,.16);
  font-size:.82rem;
}
.acq-specs div:first-child{border-top:1px solid rgba(55,66,61,.16)}
.acq-specs dt{opacity:.65}
.btn{
  display:inline-block;
  font-family:var(--body);font-weight:400;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
  color:var(--mist);background:var(--cedar);
  border:1px solid var(--cedar);
  border-radius:999px;
  padding:1em 2.4em;
  transition:background .45s var(--ease-out),color .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.btn:hover{background:transparent;color:var(--cedar);box-shadow:0 12px 34px -14px rgba(55,66,61,.5)}
.acq-fine{margin-top:1.6rem;font-size:.85rem;opacity:.65;max-width:32em}

/* ——— footer ——— */
.foot{
  background:var(--cedar);
  color:var(--mist);
  padding:5rem clamp(1.25rem,5vw,3.5rem) 3rem;
}
.foot-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.foot-mark{
  font-weight:500;font-size:.85rem;letter-spacing:.42em;text-transform:uppercase;
  margin-bottom:1rem;
}
.foot-addr{opacity:.6;margin-bottom:2.2rem}
.foot-links{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:3.2rem}
.foot-links a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  opacity:.8;border-bottom:1px solid transparent;
  transition:opacity .3s,border-color .3s;
  padding-bottom:2px;
}
.foot-links a:hover{opacity:1;border-bottom-color:currentColor}
.credit{font-size:.75rem;opacity:.45}
.credit a{color:inherit}

/* ——— responsive ——— */
@media (max-width:1024px){
  .stratum-body{margin-right:0}
}
@media (max-width:720px){
  .nav{padding:1.1rem 1.25rem}
  .nav nav a:not(.nav-cta){display:none}
  .wordmark{letter-spacing:.3em;font-size:.78rem}
  .hero{padding-top:5rem}
  .eyebrow{font-size:.64rem;letter-spacing:.1em;white-space:nowrap}
  .flacon-wrap{width:clamp(140px,40vw,180px);margin-top:calc(clamp(3.4rem,16vw,4.8rem) * -.22)}
  .hero-sub br{display:none}
  .hero h1{font-size:clamp(3.4rem,16vw,4.8rem)}
  .numeral{left:auto;right:.5rem;opacity:.1}
  .stratum{padding-top:8vh;padding-bottom:8vh}
  .stratum-body{padding:1.8rem 1.3rem;margin-left:0}
  .notes span:last-child,.notes i{display:none}
  .eq-row{grid-template-columns:6em 1fr 2.5em;gap:.8em}
  .breaths{grid-template-columns:1fr}
  .acq-grid{grid-template-columns:1fr}
  .flacon-still{width:min(56%,220px)}
  .eq-desc{min-height:0}
}

/* ——— reduced motion ——— */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .flacon,.flacon-shadow{animation:none}
  .descend-line{animation:none;transform:none}
  *{transition-duration:.01ms !important}
}