/* ————— Maison Nacre — design system ————— */
:root{
  --ivory:#F1ECE3;
  --ivory-2:#E9E2D4;
  --abyss:#0B191B;
  --abyss-2:#0F2325;
  --charcoal:#22211E;
  --ink:#26241F;
  --ink-soft:#5A564C;
  --gold:#B69157;
  --gold-soft:#CBAA70;
  --gold-deep:#8A6A34; /* gold for ivory grounds — keeps small caps legible */
  --rose:#E7C6CC;
  --sea:#BFDCCB;
  --sky:#C2D3E8;
  --serif:'Cormorant',Georgia,serif;
  --sc:'Cormorant SC',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--abyss)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}

/* labels — letterspaced small caps, the maison voice */
.label{
  font-family:var(--sc);
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:lowercase;
  color:var(--ivory);
  opacity:.85;
}
.label--ink{color:var(--gold-deep)}
.label a{text-decoration:none}
.label a:hover{color:var(--gold-soft)}

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,5.2vw,4.2rem);
  line-height:1.06;
  letter-spacing:.01em;
  margin:.55em 0 .4em;
}
.lede{
  max-width:34em;
  font-size:clamp(1.02rem,1.3vw,1.15rem);
  color:var(--ink-soft);
}
.lede--light{color:rgba(241,236,227,.72)}

/* ————— sheen canvas (signature) ————— */
#sheen{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:40;
}

/* ————— nav ————— */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px clamp(20px,4vw,48px);
  mix-blend-mode:normal;
  transition:background .5s,box-shadow .5s;
}
.nav.is-solid{background:rgba(11,25,27,.86);backdrop-filter:blur(10px)}
.nav__brand{
  font-family:var(--sc);font-size:1.05rem;letter-spacing:.3em;
  color:var(--ivory);text-decoration:none;
}
.nav__links{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center}
.nav__links a{
  font-family:var(--sans);font-weight:400;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,236,227,.75);text-decoration:none;
  transition:color .3s;
}
.nav__links a:hover{color:var(--ivory)}
.nav__cta{
  border:1px solid rgba(203,170,112,.6);border-radius:99px;
  padding:.5em 1.1em;color:var(--gold-soft)!important;
}
.nav__cta:hover{border-color:var(--gold-soft)}

/* ————— hero ————— */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(120% 90% at 78% 8%,var(--abyss-2) 0%,var(--abyss) 55%),
    var(--abyss);
  color:var(--ivory);
  overflow:hidden;
  padding:120px 0 90px;
}
.hero__pearl{
  position:absolute;top:-18vmin;right:-16vmin;
  width:64vmin;height:64vmin;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(241,236,227,.32),rgba(231,198,204,.12) 34%,rgba(191,220,203,.07) 55%,rgba(194,211,232,.04) 72%,transparent 78%);
  filter:blur(2px);
}
.hero__strand{position:absolute;inset:0;width:100%;height:100%}
.hero__inner{position:relative;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,64px);width:100%}
.hero__label{margin-bottom:clamp(20px,3vh,36px)}
.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.9rem,8.2vw,7rem);
  line-height:1.04;letter-spacing:-.005em;
}
.hero__title em{font-style:italic;color:var(--gold-soft)}
.hero__line{display:block;overflow:hidden}
.hero__line>span{display:block;transform:translateY(110%);animation:rise 1.4s var(--ease) forwards}
.hero__line:nth-child(2)>span{animation-delay:.22s}
@keyframes rise{to{transform:translateY(0)}}
.hero__sub{
  margin-top:clamp(22px,3.4vh,40px);max-width:31em;
  font-size:clamp(1rem,1.35vw,1.18rem);color:rgba(241,236,227,.72);
}
.hero__actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:clamp(26px,4vh,46px)}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--sans);font-weight:400;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--abyss);background:var(--ivory);
  padding:1em 1.9em;border-radius:99px;
  transition:transform .4s var(--ease),background .4s,color .4s;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn--ghost{background:transparent;color:var(--ivory);border:1px solid rgba(241,236,227,.35)}
.btn--ghost:hover{background:rgba(241,236,227,.08)}
.btn--gold{background:var(--gold);color:var(--abyss);margin-top:34px}
.btn--gold:hover{background:var(--gold-soft)}

/* ————— culture ————— */
.culture{padding:clamp(90px,14vh,160px) 0;background:var(--ivory)}
.chapters{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,56px);margin-top:clamp(48px,7vh,84px);
}
.chapter{border-top:1px solid rgba(38,36,31,.18);padding-top:26px}
.chapter__num{
  font-family:var(--serif);font-style:italic;font-size:1.5rem;
  color:var(--gold-deep);line-height:1;
}
.chapter__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2vw,1.85rem);margin:.4em 0 .55em;
}
.chapter p{font-size:.98rem;color:var(--ink-soft)}
.chapter p em{font-style:italic}
.chapter__stat{
  margin-top:22px;display:flex;align-items:baseline;gap:14px;
  border-top:1px dotted rgba(38,36,31,.3);padding-top:16px;
}
.chapter__stat strong{
  font-family:var(--serif);font-weight:400;
  font-size:1.9rem;color:var(--ink);white-space:nowrap;
}
.chapter__stat span{font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft)}

/* ————— atlas ————— */
.atlas{
  padding:clamp(90px,14vh,160px) 0;
  background:
    radial-gradient(110% 80% at 20% 0%,var(--abyss-2) 0%,var(--abyss) 60%),
    var(--abyss);
  color:var(--ivory);
}
.atlas__grid{
  display:grid;grid-template-columns:minmax(300px,5fr) 6fr;
  gap:clamp(36px,6vw,90px);margin-top:clamp(44px,6vh,72px);align-items:center;
}
.atlas__list{display:flex;flex-direction:column}
.strand-btn{
  appearance:none;background:none;border:0;border-top:1px solid rgba(241,236,227,.14);
  text-align:left;cursor:pointer;padding:20px 6px;color:var(--ivory);
  font-family:var(--sans);transition:background .35s,padding-left .35s var(--ease);
}
.strand-btn:last-child{border-bottom:1px solid rgba(241,236,227,.14)}
.strand-btn__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.strand-btn__name{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:.02em;
  transition:color .35s;
}
.strand-btn__cm{
  font-size:.78rem;letter-spacing:.22em;color:rgba(241,236,227,.55);
  font-weight:400;white-space:nowrap;
}
.strand-btn__note{
  display:block;margin-top:6px;font-size:.88rem;font-weight:300;
  color:rgba(241,236,227,.55);max-width:30em;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .5s;
}
.strand-btn:hover .strand-btn__name{color:var(--gold-soft)}
.strand-btn[aria-selected="true"]{padding-left:18px}
.strand-btn[aria-selected="true"] .strand-btn__name{color:var(--gold-soft)}
.strand-btn[aria-selected="true"] .strand-btn__cm{color:var(--gold-soft)}
.strand-btn[aria-selected="true"] .strand-btn__note{max-height:4em;opacity:1}
.atlas__figure{margin:0}
.atlas__figure svg{width:100%;height:auto;max-height:74vh;display:block}
.strand path{
  stroke:rgba(241,236,227,.16);
  transition:stroke .6s;
}
/* when a strand is chosen, its pearls roll into place along the string */
@keyframes settle{from{stroke-dashoffset:42}to{stroke-dashoffset:0}}
.strand.is-active path{stroke:var(--ivory);animation:settle 1.3s var(--ease)}
.strand__tag{
  font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.18em;
  fill:var(--gold-soft);opacity:0;transition:opacity .6s;
}
.strand.is-active .strand__tag{opacity:1}
.atlas__caption{margin-top:14px;opacity:.45;font-size:.72rem}

/* ————— pieces ————— */
.pieces{padding:clamp(90px,14vh,160px) 0 clamp(70px,10vh,120px);background:var(--ivory)}
.piece{margin-top:clamp(56px,9vh,110px)}
.piece__media{
  margin:0;overflow:hidden;position:relative;
  border-radius:2px;
}
.piece__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.piece__media::after{ /* nacre sweep on hover */
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 30%,rgba(231,198,204,.14) 42%,rgba(255,255,255,.22) 50%,rgba(191,220,203,.14) 58%,transparent 70%);
  transform:translateX(-70%);
  transition:transform 1.4s var(--ease);
  pointer-events:none;
}
.piece:hover .piece__media::after{transform:translateX(70%)}
.piece:hover .piece__media img{transform:scale(1.025)}
.piece--wide .piece__media{max-height:72vh}
.piece__body{padding-top:34px}
.piece__head{display:flex;flex-direction:column;gap:8px}
.piece__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;
}
.piece__title em{font-style:italic;color:var(--gold)}
.piece__specs{
  margin-top:26px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px 36px;
}
.piece__specs div{border-top:1px dotted rgba(38,36,31,.3);padding-top:12px}
.piece__specs dt{
  font-family:var(--sc);font-size:.78rem;letter-spacing:.28em;
  text-transform:lowercase;color:var(--gold-deep);
}
.piece__specs dd{margin-top:4px;font-size:.92rem;color:var(--ink-soft)}
.piece-pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);margin-top:clamp(56px,9vh,110px);
}
.piece--half{margin-top:0}
.piece--half .piece__media{aspect-ratio:3/4}
.piece--half .piece__head{padding-top:28px}
.piece--half .piece__specs{grid-template-columns:1fr 1fr}

/* ————— rendez-vous ————— */
.rdv{
  padding:clamp(90px,14vh,170px) 0;
  background:
    radial-gradient(120% 100% at 80% 100%,var(--abyss-2) 0%,var(--abyss) 60%),
    var(--abyss);
  color:var(--ivory);
}
.rdv__grid{
  display:grid;grid-template-columns:7fr 4fr;
  gap:clamp(40px,6vw,90px);align-items:start;
}
.rdv__details{display:flex;flex-direction:column;gap:26px;padding-top:12px}
.rdv__details div{border-top:1px solid rgba(241,236,227,.14);padding-top:16px}
.rdv__details dt{
  font-family:var(--sc);font-size:.78rem;letter-spacing:.28em;
  text-transform:lowercase;color:var(--gold-soft);
}
.rdv__details dd{margin-top:6px;font-size:1rem;color:rgba(241,236,227,.8)}
.rdv__details a{color:rgba(241,236,227,.8);text-decoration-color:rgba(203,170,112,.5);text-underline-offset:4px}
.rdv__details a:hover{color:var(--ivory)}

/* ————— footer ————— */
.footer{background:var(--abyss);color:var(--ivory);border-top:1px solid rgba(241,236,227,.1)}
.footer__grid{
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  padding-block:38px;
}
.footer__brand{font-family:var(--sc);letter-spacing:.3em;font-size:1rem}
.footer__note{font-size:.82rem;color:rgba(241,236,227,.62);max-width:44em}
.footer__meta{font-size:.72rem;opacity:.7}
.footer__meta a{color:var(--gold-soft)}

/* ————— reveal on scroll ————— */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.in{opacity:1;transform:none}

/* ————— responsive ————— */
@media (max-width:960px){
  .chapters{grid-template-columns:1fr;gap:40px}
  .atlas__grid{grid-template-columns:1fr;gap:44px}
  .atlas__figure svg{max-height:none}
  .rdv__grid{grid-template-columns:1fr}
  .piece-pair{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:14px;align-items:start}
}
@media (max-width:640px){
  .nav__links a:not(.nav__cta){display:none}
  .hero__strand{transform:translateY(14%);opacity:.75}
  .piece__specs,.piece--half .piece__specs{grid-template-columns:1fr}
}

/* ————— reduced motion ————— */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__line>span{transform:none;animation:none}
  .piece__media::after{display:none}
  .piece:hover .piece__media img{transform:none}
  *{transition-duration:.01s!important;animation-duration:.01s!important}
}