/* ===========================================================
   L'ÉCRIN DORÉ — Parfumerie de luxe, Cotonou, Bénin
   Design tokens
   =========================================================== */
:root{
  --ink:      #1C130E;
  --ink-soft: #241A13;
  --sand:     #F6ECDD;
  --sand-100: #EFE1CB;
  --card:     #FFFBF4;
  --gold:     #B9822F;
  --gold-soft:#D9A94E;
  --ruby:     #7A1F2B;
  --ruby-soft:#A83246;
  --sapphire: #1E3A5F;
  --brown-900:#2B1D14;
  --brown-700:#5A4231;
  --bronze:   #8C6A3A;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-label: "Marcellus", var(--font-display);
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --gutter: clamp(24px, 5vw, 96px);
  --ease: cubic-bezier(.22,.61,.18,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--sand);
  color:var(--brown-900);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer;}
::selection{background:var(--gold); color:var(--card);}
:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

.eyebrow{
  font-family:var(--font-label); font-size:.8rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ruby); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); display:inline-block;}
.eyebrow.on-dark{color:var(--gold-soft);}

h1,h2,h3,.serif{font-family:var(--font-display); font-weight:400; color:var(--brown-900); letter-spacing:.005em;}
h1{font-size:clamp(2.7rem, 6vw, 5.4rem); line-height:1.06;}
h2{font-size:clamp(2rem, 3.6vw, 3.2rem); line-height:1.16;}
h3{font-size:clamp(1.25rem, 2vw, 1.55rem);}
em,.italic{font-style:italic; color:var(--ruby);}
p{max-width:40ch; color:var(--brown-700);}
p.wide{max-width:58ch;}
.on-dark, .on-dark p{color:var(--sand-100);}
.on-dark h1, .on-dark h2, .on-dark h3{color:var(--card);}
.on-dark em{color:var(--gold-soft);}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--font-label); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05em 2.2em; border:1px solid var(--brown-900); color:var(--brown-900);
  overflow:hidden; z-index:1; transition:color .5s var(--ease);
}
.btn::before{content:""; position:absolute; inset:0; background:var(--brown-900); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1;}
.btn:hover{color:var(--card);}
.btn:hover::before{transform:translateY(0);}
.btn.ghost{border-color:var(--bronze); color:var(--brown-700);}
.btn.on-dark{border-color:var(--gold); color:var(--gold-soft);}
.btn.on-dark::before{background:var(--gold);}
.btn.on-dark:hover{color:var(--ink);}
.btn svg{width:14px; height:14px; transition:transform .4s var(--ease);}
.btn:hover svg{transform:translateX(4px);}

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:26px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .5s var(--ease), padding .4s var(--ease), backdrop-filter .5s;
  color:var(--card);
}
.site-header.scrolled{
  background:rgba(28,19,14,.88); backdrop-filter:blur(14px);
  padding:16px var(--gutter); box-shadow:0 1px 0 rgba(217,169,78,.25);
}
.logo{font-family:var(--font-display); font-style:italic; font-size:1.6rem; letter-spacing:.05em; color:var(--gold-soft); display:flex; align-items:center; gap:.5rem;}
.logo .crest{width:22px; height:22px;}
.nav-links{display:flex; gap:2.6rem; font-family:var(--font-label); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;}
.nav-links a{position:relative; padding-bottom:6px; color:var(--sand-100);}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
.nav-links a:hover, .nav-links a.active{color:var(--gold-soft);}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-actions{display:flex; align-items:center; gap:1.4rem; font-family:var(--font-label); font-size:.8rem; letter-spacing:.1em; color:var(--sand-100);}
.nav-toggle{display:none;}

/* On light (non-hero) pages the header needs dark text until scrolled */
body.light-top .site-header:not(.scrolled){color:var(--brown-900);}
body.light-top .site-header:not(.scrolled) .nav-links a{color:var(--brown-900);}
body.light-top .site-header:not(.scrolled) .nav-actions{color:var(--brown-900);}
body.light-top .site-header:not(.scrolled) .logo{color:var(--ruby);}

@media (max-width:860px){
  .nav-links{position:fixed; inset:0; background:var(--ink-soft); flex-direction:column; justify-content:center; align-items:center; gap:2.2rem; font-size:1.1rem; transform:translateY(-100%); transition:transform .5s var(--ease); z-index:90;}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{color:var(--sand-100) !important;}
  .nav-toggle{display:flex; flex-direction:column; gap:5px; z-index:101; position:relative;}
  .nav-toggle span{width:22px; height:1px; background:var(--gold); transition:.3s;}
}

/* ===========================================================
   Dark hero band
   =========================================================== */
.hero{
  position:relative; min-height:100vh; background:var(--ink); color:var(--card);
  display:flex; flex-direction:column; justify-content:center;
  padding:140px var(--gutter) 80px; overflow:hidden;
}
.blob-field{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.38; animation:drift 24s ease-in-out infinite;}
.blob.b1{width:46vw; height:46vw; top:-14%; left:-10%; background:radial-gradient(circle, var(--ruby), transparent 70%);}
.blob.b2{width:40vw; height:40vw; bottom:-16%; right:-8%; background:radial-gradient(circle, var(--sapphire), transparent 70%); animation-delay:-9s; animation-duration:28s;}
.blob.b3{width:26vw; height:26vw; top:22%; right:16%; background:radial-gradient(circle, var(--gold), transparent 72%); opacity:.24; animation-delay:-15s; animation-duration:20s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(3%,4%) scale(1.06);} 66%{transform:translate(-3%,-2%) scale(.96);}}
@media (prefers-reduced-motion:reduce){.blob{animation:none;}}

.crest-mark{position:absolute; z-index:1; opacity:.45; pointer-events:none; animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.crest-mark{animation:none;}}

.dust{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.dust span{position:absolute; width:3px; height:3px; border-radius:50%; background:var(--gold-soft); opacity:0; animation:rise linear infinite;}
@keyframes rise{0%{opacity:0; transform:translateY(0) translateX(0);} 10%{opacity:.8;} 90%{opacity:.4;} 100%{opacity:0; transform:translateY(-120px) translateX(20px);}}
@media (prefers-reduced-motion:reduce){.dust span{animation:none; display:none;}}

.hero-inner{position:relative; z-index:2; max-width:840px;}
.hero-inner--split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:4rem; align-items:center;
  max-width:1180px;
}
.hero-photo{
  border-radius:14px; overflow:hidden; aspect-ratio:3/4;
  border:1px solid rgba(217,169,78,.3);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
@media (max-width:960px){
  .hero-inner--split{grid-template-columns:1fr; gap:2.4rem;}
  .hero-photo{max-width:320px; margin:0 auto; aspect-ratio:3/4;}
}
.newsletter-split{align-items:stretch;}
.newsletter-split .visual{border-radius:12px;}
.newsletter-split .newsletter{border-radius:12px; padding:60px clamp(24px,4vw,64px); text-align:left; height:100%; display:flex; flex-direction:column; justify-content:center;}
.newsletter-split .news-form{margin:0;}
@media (max-width:860px){.newsletter-split .newsletter{text-align:center;}}
.hero .eyebrow{margin-bottom:1.8rem;}
.hero h1{margin-bottom:1.8rem; color:var(--card);}
.hero p{margin-bottom:2.6rem; color:var(--sand-100);}
.hero-actions{display:flex; gap:1.2rem; flex-wrap:wrap;}

.scroll-cue{position:absolute; bottom:40px; left:var(--gutter); display:flex; align-items:center; gap:.8rem; font-family:var(--font-label); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sand-100); z-index:2;}
.scroll-cue .line{width:1px; height:38px; background:var(--bronze); overflow:hidden; position:relative;}
.scroll-cue .line::after{content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold); animation:scrollline 2.4s ease-in-out infinite;}
@keyframes scrollline{50%{top:100%;} 100%{top:100%;}}

/* ===========================================================
   Reveal / sections
   =========================================================== */
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
section{position:relative; padding:120px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:4rem; flex-wrap:wrap;}

/* ---------- Product grid (real photography) ---------- */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.2rem;}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid{grid-template-columns:1fr;}}

.card{position:relative; display:block;}
.card-frame{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  background:var(--card); border:1px solid rgba(185,130,47,.35);
  box-shadow:0 12px 28px -18px rgba(43,29,20,.5);
}
.card-frame img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.card:hover .card-frame img{transform:scale(1.05);}
.card-tag{position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; background:var(--ink); border:1px solid var(--gold); padding:.45em 1em; border-radius:2px; color:var(--gold-soft);}
.card h3{margin:1rem 0 .2rem;}
.card .brand-tag{font-family:var(--font-label); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ruby);}
.card .notes{font-size:.82rem; color:var(--brown-700); margin:.3rem 0 .5rem;}
.card .price{font-family:var(--font-label); font-size:.92rem; letter-spacing:.05em; color:var(--brown-900);}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:3rem;}}
.split .visual{aspect-ratio:4/5; border-radius:10px; overflow:hidden; border:1px solid rgba(185,130,47,.35); box-shadow:0 20px 40px -24px rgba(43,29,20,.5);}
.split .visual img{width:100%; height:100%; object-fit:cover;}

/* ---------- Olfactory pyramid ---------- */
.pyramid{display:flex; flex-direction:column; max-width:640px; margin:0 auto;}
.pyramid-row{display:grid; grid-template-columns:150px 1fr; align-items:center; gap:2rem; padding:2.2rem 0; border-top:1px solid rgba(185,130,47,.3); opacity:0; transform:translateX(-24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.pyramid-row.in{opacity:1; transform:translateX(0);}
.pyramid-row:last-child{border-bottom:1px solid rgba(185,130,47,.3);}
.pyramid-row .label{font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--ruby);}
.pyramid-row .bar-wrap{position:relative; height:6px; background:rgba(185,130,47,.16); border-radius:3px; overflow:hidden;}
.pyramid-row .bar{position:absolute; inset:0; width:0%; border-radius:3px; background:linear-gradient(90deg, var(--ruby), var(--gold)); transition:width 1.4s var(--ease) .2s;}
.pyramid-row.in .bar{width:var(--w, 60%);}
.pyramid-row .notes-list{grid-column:2; font-size:.85rem; color:var(--brown-700); margin-top:.6rem;}
@media (max-width:600px){.pyramid-row{grid-template-columns:100px 1fr;}}

/* ---------- Journal ---------- */
.journal-card .card-frame{aspect-ratio:4/3;}
.journal-card .date{font-family:var(--font-label); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; display:block;}

/* ---------- Newsletter ---------- */
.newsletter{
  background:linear-gradient(135deg, var(--ruby) 0%, var(--ink) 55%, var(--sapphire) 100%);
  border:1px solid rgba(217,169,78,.4); border-radius:12px; padding:80px var(--gutter); text-align:center; margin:0 var(--gutter);
}
.newsletter h2{color:var(--card);}
.newsletter p{color:var(--sand-100); margin:1rem auto 2.2rem;}
.news-form{display:flex; max-width:440px; margin:0 auto; border-bottom:1px solid rgba(217,169,78,.5); padding-bottom:.6rem;}
.news-form input{flex:1; background:none; border:none; color:var(--card); font-family:var(--font-body); font-size:.95rem; padding:.4em;}
.news-form input::placeholder{color:rgba(246,236,221,.55);}
.news-form button{font-family:var(--font-label); color:var(--gold-soft); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;}

/* ===========================================================
   Footer (dark bookend)
   =========================================================== */
footer{padding:100px 0 40px; background:var(--ink); color:var(--sand-100); margin-top:120px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:60px; border-bottom:1px solid rgba(217,169,78,.25); margin-bottom:2rem;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-family:var(--font-label); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.2rem; color:var(--gold);}
.footer-grid ul li{margin-bottom:.7rem; font-size:.9rem; color:var(--sand-100);}
.footer-grid ul li a:hover{color:var(--gold-soft);}
.footer-bottom{display:flex; justify-content:space-between; font-size:.75rem; color:var(--bronze); flex-wrap:wrap; gap:1rem;}

/* ===========================================================
   Page hero (dark, non-home) / product
   =========================================================== */
.page-hero{padding:180px var(--gutter) 90px; position:relative; background:var(--ink); color:var(--card); overflow:hidden;}
.page-hero h1{max-width:820px; color:var(--card);}

.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding:60px var(--gutter) 0;}
@media (max-width:900px){.product-detail{grid-template-columns:1fr; gap:2.6rem;}}
.product-visual{position:sticky; top:120px; align-self:start; aspect-ratio:4/5; border-radius:10px; overflow:hidden; border:1px solid rgba(185,130,47,.35); box-shadow:0 20px 40px -24px rgba(43,29,20,.5);}
.product-visual img{width:100%; height:100%; object-fit:cover;}
.product-info .brand-tag{font-family:var(--font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ruby); font-size:.82rem;}
.product-info .price-tag{font-family:var(--font-label); font-size:1.35rem; color:var(--brown-900); margin:1rem 0 2rem;}
.accordion{border-top:1px solid rgba(185,130,47,.3);}
.accordion-item{border-bottom:1px solid rgba(185,130,47,.3);}
.accordion-head{display:flex; justify-content:space-between; align-items:center; padding:1.4rem 0; cursor:pointer; font-size:.95rem;}
.accordion-head .plus{transition:transform .4s var(--ease); font-size:1.2rem; color:var(--gold);}
.accordion-item.open .plus{transform:rotate(45deg);}
.accordion-body{max-height:0; overflow:hidden; transition:max-height .5s var(--ease); font-size:.9rem; color:var(--brown-700);}
.accordion-body-inner{padding-bottom:1.4rem;}

.mt-lg{margin-top:5rem;}
.center-copy{max-width:640px; margin:0 auto; text-align:center;}
.center-copy p{max-width:none;}