/* ============================================================
   IMAGE SLOTS — swap `none` for url("...").
   Wired already: --img-hero, --img-founder, --img-serum
   ============================================================ */
:root{
  --img-bouquet:url("/images/home/bouquet.webp");
  --img-wordmark:url("/images/home/wordmark.webp");
  --img-photo:url("/images/home/photo.webp");
  --img-lineup:url("/images/home/lineup.webp");
  --img-hero:url("/images/home/hero.jpg");
  --img-founder:url("/images/home/founder.jpg");
  --img-serum:url("/images/home/serum.jpg");

  /* Espresso confirmed by the mockup — warm brown, not plum.
     Works because the dark only ever appears as a full-width band;
     the mauve packaging always sits on cream or blush. */
  --espresso:#322A33;
  --espresso-deep:#272029;
  --cream:#FDFAFB;
  --cream-2:#EFE4DA;
  --blush:#F3E1D6;
  --mauve:#9A8A9C;
  --terra:#8B7686;
  --gold:#B98A4A;
  --cocoa:#5A4C58;
  --text:#5C5460;
  --muted:#8C8290;
  --ink:#3D2B3E;
  --line:rgba(87,76,90,.14);
  --line-lt:rgba(255,255,255,.13);

  --paper:#FDF8FA;
  --mount:#F1EAD9;
  --terra-warm:#8C6636;
  --paper-2:#FAF1F5;
  --plum-num:#7E5C6E;
  --band:#4A3F4B;
  --band-ink:#EFE3E2;
  --gold-soft:#CBB79A;
  --plum-band:#9C7B8A;
  --tape:rgba(196,168,128,.55);

  --display:"Bodoni Moda", Didot, "Times New Roman", serif;
  --headline:"Playfair Display", "Bodoni Moda", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --hand:"Sacramento", cursive;
  --type:"Courier Prime", "Courier New", monospace;
  --pad:clamp(18px, 4.4vw, 64px);
  --r:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--text);
  font-family:var(--sans); font-weight:300; font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:3px}

/* ---------- The house typographic move ----------
   Sans for the plain words, high-contrast serif italic for the one
   word that carries the meaning. Never more than one per headline. */
.h{font-family:var(--headline); font-weight:700; line-height:1.12; letter-spacing:.015em;
   text-transform:uppercase; color:var(--ink); margin:0}
.h em{font-style:italic; text-transform:none}
.h--xl{font-size:clamp(28px,4.3vw,53px)}
.h--lg{font-size:clamp(24px,3.1vw,42px)}
.h--md{font-size:clamp(19px,2.1vw,28px)}
.eyebrow{font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--terra); margin:0}
.eyebrow--lt{color:rgba(255,255,255,.55)}
.lede{font-size:clamp(14px,1.4vw,16px); line-height:1.85; color:var(--muted); margin:0}
.lede--lt{color:rgba(255,255,255,.66)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; border-radius:999px;
  padding:14px 27px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn--solid{background:var(--espresso); color:var(--cream)}
.btn--solid:hover{background:var(--cocoa)}
.btn--outline{
  border:1px solid var(--ink); color:var(--ink); border-radius:999px;
  padding:15px 30px; letter-spacing:.17em;
}
.btn--outline:hover{background:var(--ink); color:var(--paper)}
.btn--ghost{border:1px solid var(--line); color:var(--text)}
.btn--ghost:hover{background:var(--espresso); color:var(--cream); border-color:var(--espresso)}
.btn--ghost-lt{border:1px solid var(--line-lt); color:#fff}
.btn--ghost-lt:hover{background:var(--cream); color:var(--espresso)}
.plus{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; background:rgba(255,255,255,.72); flex:none;
  transition:background .3s, color .3s, border-color .3s;
}
.plus:hover{background:var(--espresso); color:var(--cream); border-color:var(--espresso)}
/* pill spec tags — lifted from the mockup */
.pills{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 32px; padding:0; list-style:none}
.pills li{
  border:1px solid rgba(94,58,49,.26); border-radius:999px; padding:9px 17px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cocoa); line-height:1.5;
}

/* ---------- Frame ---------- */
.block{padding:clamp(30px,3.6vw,54px) var(--pad)}
.block--dark{background:var(--espresso); color:#fff}
.block--cream2{background:var(--cream-2)}
.empty-page{
  min-height:62vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-top:clamp(48px,8vw,96px);
  padding-bottom:clamp(64px,10vw,120px);
}
.empty-page .wrap{max-width:560px}
.empty-page .h{margin-top:8px}
.empty-page-lead{margin:18px 0 28px; line-height:1.8}
.empty-page-note{
  margin-top:22px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.auth-page{
  min-height:62vh;
  display:grid;
  place-items:center;
  padding-top:clamp(40px,7vw,80px);
  padding-bottom:clamp(56px,9vw,100px);
}
.auth-card{width:min(100%,440px); text-align:center}
.auth-lead{margin:14px 0 0; line-height:1.8}
.auth-notice{
  margin:22px 0 0;
  padding:12px 14px;
  background:var(--cream-2);
  color:var(--ink);
  font-size:13.5px;
  line-height:1.6;
}
.auth-form{display:grid; gap:18px; margin-top:28px; text-align:left}
.auth-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.auth-field label{
  display:block;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"]{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:8px 0 10px;
  font:inherit;
  color:var(--ink);
}
.auth-field input:focus{outline:none; border-bottom-color:var(--gold)}
.auth-form .btn{width:100%; justify-content:center; margin-top:4px}
.auth-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text);
}
.auth-check input{margin-top:3px; flex:none}
.auth-switch{margin:22px 0 0; font-size:14px; color:var(--text)}
.auth-switch a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
a.icon-btn{color:inherit}
.wrap{max-width:1180px; margin:0 auto}
.center{text-align:center}
.rv{opacity:0; transform:translateY(20px); transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky; top:0; z-index:90; background:var(--cream); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px var(--pad)}
.brand{display:block; width:104px}
.brand img{width:100%; height:auto}
.footer .brand{width:150px; margin-bottom:16px}
.footer .brand img{filter:brightness(0) invert(1); opacity:.88}
.footer-lockup{width:100%; margin-bottom:10px; opacity:.5; filter:brightness(0) invert(1)}
.nav-links{display:flex; gap:clamp(14px,2.3vw,32px); list-style:none; margin:0; padding:0}
.nav-links a{font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); transition:color .3s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex; align-items:center; gap:6px}
.icon-btn{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; transition:background .3s}
.icon-btn:hover{background:var(--cream-2)}
.burger{display:none}
.drawer{
  position:fixed; inset:0; z-index:120; background:var(--espresso); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  transform:translateY(-100%); transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.drawer.open{transform:none}
.drawer ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.drawer a{font-family:var(--display); font-size:clamp(25px,7vw,38px); line-height:1.5}
.drawer-close{position:absolute; top:20px; right:var(--pad); color:#fff}

/* ============================================================
   HERO — "The Beauty Diary". A paper page: taped photograph,
   a handwritten note, the range laid out along the bottom.
   ============================================================ */
.hero{
  position:relative; overflow:hidden; background:var(--paper);
  padding:clamp(20px,2.8vw,38px) var(--pad) 0;
}
/* real grain, generated — no texture image to ship */
.grain{position:absolute; inset:0; width:100%; height:100%; opacity:.022; mix-blend-mode:multiply; pointer-events:none}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 22% 24%, rgba(255,252,246,.85) 0%, rgba(255,252,246,0) 58%);
}
.hero-in{
  position:relative; z-index:2; max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(18px,2.4vw,36px); align-items:center;
}
.hero-left{padding:clamp(8px,1.6vw,20px) 0 0; position:relative; z-index:3; container-type:inline-size}
.entry{
  font-family:var(--type); font-style:italic; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--terra); margin:0 0 18px;
}
.entry b{font-weight:400; border-bottom:1px solid var(--gold); padding-bottom:2px}
.hero-kicker{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:400; color:var(--muted); margin:0 0 22px;
}
.hero h1{
  margin:0;
  font-family:var(--headline); font-weight:700;
  /* sized against the column, not the viewport, so it always sets on one line */
  font-size:clamp(24px,8.2cqw,54px); line-height:1.08; letter-spacing:.012em;
  white-space:nowrap; text-transform:uppercase; color:var(--ink);
}
.rule{width:74px; height:1px; background:var(--gold); border:0; margin:clamp(22px,3vw,34px) 0}
.hero-sub{margin:0 0 clamp(26px,3.4vw,36px); font-size:clamp(14px,1.5vw,17px); line-height:1.7; color:var(--text); max-width:340px}
.hero-left .btn{border-radius:999px; padding:16px 30px; letter-spacing:.18em}

/* ---------- hero carousel ---------- */
/* Slides are stacked; only the current one is visible and focusable. Slide 1
   keeps the diary composition (lineup + torn note); slides 2-4 use the
   taped-print + note-card composition from the banners. */
.hero-deck{position:relative; z-index:2; display:grid}
/* every slide sits in the same grid cell, so the hero is as tall as the
   tallest slide and never jumps height when the carousel advances */
.hslide{
  grid-area:1 / 1; opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.hslide.is-on{opacity:1; visibility:visible}

/* the simpler layout used by slides 2-4 */
.hslide--plate .hero-in{align-items:center}
.hplate{position:relative; display:flex; justify-content:flex-end; padding-bottom:clamp(14px,2vw,26px)}
.hplate figure{
  position:relative; margin:0; rotate:-.8deg;
  background:#fff; padding:10px 10px 12px; border-radius:2px;
  box-shadow:0 18px 44px rgba(80,58,42,.18), 0 2px 6px rgba(80,58,42,.1);
}
/* every slide's print is the same size — the widest source (slide 4) sets it,
   and the narrower ones are cover-cropped, with the focal point set per slide */
.hplate img{
  display:block; width:min(100%, clamp(300px,46vw,668px));
  aspect-ratio:1.5; height:auto; object-fit:cover; border-radius:1px;
}
.hplate .tape{top:-14px; left:44%}

/* the little handwritten card hanging off the print */
.hcard{
  position:absolute; right:-4%; bottom:-6%; z-index:4; width:clamp(112px,15vw,190px);
  rotate:2.2deg; background:linear-gradient(150deg,#F7F2E6,#EDE3D0);
  padding:clamp(14px,1.6vw,20px) clamp(10px,1.2vw,16px);
  box-shadow:0 12px 26px rgba(80,58,42,.16);
  text-align:center;
}
.hcard p{
  margin:0; font-family:var(--hand); font-size:clamp(14px,1.5vw,20px);
  line-height:1.45; color:var(--cocoa);
}
.hcard span{display:block; margin-top:8px; color:var(--mauve); font-size:13px}

/* dots */
.hero-dots{
  position:relative; z-index:5; display:flex; justify-content:center; align-items:center;
  gap:14px; padding:clamp(10px,1.6vw,20px) 0 clamp(12px,1.8vw,22px);
}
.hero-dots button{
  width:11px; height:11px; padding:0; border-radius:50%;
  border:1px solid var(--mauve); background:transparent;
  transition:background .3s, transform .3s, border-color .3s;
}
.hero-dots button:hover{transform:scale(1.18)}
.hero-dots button[aria-current="true"]{background:var(--terra); border-color:var(--terra)}
.hero-dots button:focus-visible{outline:2px solid var(--terra); outline-offset:3px}

@media (max-width:900px){
  .hplate{justify-content:center; padding-bottom:clamp(26px,7vw,44px)}
  .hplate img{width:min(100%, 78vw)}
  .hcard{right:-2%; bottom:-9%; width:clamp(104px,26vw,150px)}
}

/* the giant script watermark, cropped by the page edge */
.script-mark{
  position:absolute; left:-3%; bottom:-3%; z-index:1; pointer-events:none;
  width:min(52vw,620px); aspect-ratio:460/111;
  background:var(--img-wordmark) left bottom/contain no-repeat; opacity:.2;
}

/* taped photograph */
.hero-right{position:relative}
/* slide 1's print is sized and mounted exactly like the plates on slides 2-4,
   so the frame stays put as the carousel advances */
.photo{
  position:relative; margin:0 0 0 auto; width:min(96%,500px); rotate:-.8deg;
  background:#fff; padding:10px 10px 12px; border-radius:2px;
  box-shadow:0 18px 44px rgba(80,58,42,.18), 0 2px 6px rgba(80,58,42,.1);
}
.photo-img{
  aspect-ratio:1; border-radius:1px;
  /* square crop, as drawn — taller than the other slides' prints */
  background:var(--img-photo) center/cover no-repeat, linear-gradient(140deg,#6a4c50,#2c1d20);
}
.tape{
  position:absolute; top:-15px; left:50%; translate:-50% 0; rotate:-2.4deg;
  width:118px; height:32px; background:var(--tape);
  box-shadow:0 1px 3px rgba(80,58,42,.16);
  clip-path:polygon(3% 0,97% 4%,100% 96%,2% 100%);
}
.tape::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 5px);
}

/* handwritten note — a square sticky, torn along the edges */
.note{
  position:absolute; left:-6%; bottom:38%; z-index:6; width:min(23%,186px);
  aspect-ratio:.76;
  rotate:-3.2deg; background:linear-gradient(150deg,#F6F0E2,#EADFC9);
  padding:clamp(14px,1.7vw,22px); box-shadow:0 12px 26px rgba(80,58,42,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  clip-path:polygon(1% 3%,97% 0,100% 96%,54% 100%,3% 97%);
}
.note p{
  margin:0; font-family:var(--hand); font-size:clamp(15px,1.7vw,21px);
  line-height:1.35; color:var(--cocoa);
}
.note span{display:block; margin-top:10px; color:var(--mauve); font-size:15px}

/* botanical sketch + dried petal */
.sketch{
  position:absolute; top:4%; right:-3%; width:min(26vw,290px); aspect-ratio:440/285;
  background:var(--img-bouquet) center/contain no-repeat; opacity:.5; z-index:1; pointer-events:none;
}
.petal{
  position:absolute; right:2%; bottom:9%; z-index:1; width:clamp(58px,7vw,96px); aspect-ratio:1/1.5;
  background:linear-gradient(150deg,#EBD3CE,#DDBDBA); border-radius:60% 40% 55% 45%/70% 65% 35% 30%;
  rotate:18deg; opacity:.72; filter:blur(.3px); box-shadow:0 8px 18px rgba(120,80,70,.16);
}

/* the range, standing in front of the photograph */
.lineup{
  /* aligned to the print's left edge so no bottle floats off it */
  position:absolute; left:47%; right:1%; bottom:0; z-index:5;
  aspect-ratio:1500/587;
  background:var(--img-lineup) center bottom/contain no-repeat;
  filter:drop-shadow(0 16px 22px rgba(96,70,52,.22));
}

/* ============================================================
   CHAPTER INDEX — replaces the marquee
   ============================================================ */
/* ---------- the marquee under the hero ---------- */
.chapters{
  background:var(--plum-band); position:relative; z-index:4;
  overflow:hidden; padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.chapters .track{
  display:flex; width:max-content;
  animation:marquee 34s linear infinite;
}
.chapters .track:hover{animation-play-state:paused}
.chapters .run{
  display:flex; align-items:center; flex:none;
  gap:clamp(16px,2.6vw,40px); padding-right:clamp(16px,2.6vw,40px);
  color:#fff; font-size:11px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
.chapters .run span{display:inline-flex; align-items:center; gap:clamp(16px,2.6vw,40px)}
.chapters .run i{font-style:normal; color:rgba(255,255,255,.5); font-size:9px}
/* two identical runs sit side by side; shifting by exactly one run loops seamlessly */
@keyframes marquee{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .chapters .track{animation:none; width:100%; justify-content:center}
  .chapters .track > .run:nth-child(2){display:none}
  .chapters{-webkit-mask-image:none; mask-image:none}
  .chapters .run{white-space:normal; flex-wrap:wrap; justify-content:center; padding-right:0}
}

/* ============================================================
   CHAPTER FURNITURE — the left rail, notes, stamps and sketches
   that recur on every diary spread.
   ============================================================ */
.spread{
  display:grid; grid-template-columns:58px minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px); align-items:stretch; max-width:none;
}
.spread > :last-child{max-width:1240px; min-width:0}
.rail{display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:4px}
.rail .lbl{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:0}
.rail .num{font-family:var(--display); font-size:clamp(28px,3.2vw,42px); line-height:1; color:var(--plum-num); margin:0}
.rail .line{width:1px; flex:1; min-height:46px; background:rgba(185,138,74,.42)}
.rail .vtxt{
  writing-mode:vertical-rl; transform:rotate(180deg); margin:0;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.rail .pg{font-size:10px; letter-spacing:.18em; color:var(--plum-num); margin:0}
.rail--lt .lbl,.rail--lt .vtxt{color:rgba(255,255,255,.45)}
.rail--lt .num,.rail--lt .pg{color:var(--gold)}
.rail--lt .line{background:var(--line-lt)}

.hand{
  font-family:var(--hand); color:var(--plum-num); line-height:1.3;
  font-size:clamp(18px,2vw,26px); margin:0;
}
.hand--lt{color:var(--gold-soft)}
.hand-rule{width:110px; height:1px; background:currentColor; opacity:.4; border:0; margin:14px 0 0}
.sketch-sm{
  position:absolute; pointer-events:none; aspect-ratio:440/285; opacity:.34;
  background:var(--img-bouquet) center/contain no-repeat;
}

.kicker{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  font-weight:400; margin:0 0 10px;
}
.kicker--lt{color:var(--gold)}
.kicker-rule{width:74px; height:1px; background:var(--gold); border:0; margin:0 0 clamp(18px,2.4vw,28px)}
.kicker-rule--c{margin-left:auto; margin-right:auto}

/* ============================================================
   ENTRY 01 — THE FOUNDER
   ============================================================ */
.founder{background:var(--paper); position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,54px)}
.founder-cols{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.3fr); gap:clamp(24px,3.4vw,54px); align-items:center}
.shot{width:100%; height:auto; border-radius:2px; display:block}
.serum-media .shot{
  border:1px solid rgba(185,138,74,.3); border-radius:10px;
  background:var(--mount); padding:3.2%;
}

/* the paper-clipped print, with the smaller frame tucked behind it */
.fstack{position:relative; padding:0 0 11% 0}
.polaroid{
  position:relative; z-index:2; width:81%; margin-left:auto; rotate:1.2deg;
  background:var(--mount); padding:2.6% 2.6% 3%; border-radius:2px;
  box-shadow:0 14px 34px rgba(80,66,74,.18), 0 2px 5px rgba(80,66,74,.1);
}
.polaroid img{width:100%; height:auto; display:block}
/* washi tape holds the big print */
.tape-f{
  position:absolute; top:-4.5%; left:29%; width:28%; aspect-ratio:4.4;
  background:#DCC9A6; rotate:-.6deg; z-index:4;
  clip-path:polygon(2% 0,98% 5%,100% 95%,1% 100%);
  box-shadow:0 1px 3px rgba(80,66,74,.14);
}
.tape-f::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 2px, transparent 2px 5px);
}
/* the smaller frame is clipped on top, overlapping the print's left edge */
.filmstrip{
  position:absolute; left:0; bottom:0; z-index:3; width:31%; rotate:-1.4deg;
  background:var(--mount); padding:4% 4% 5%; border-radius:2px;
  box-shadow:0 12px 28px rgba(80,66,74,.2);
}
.filmstrip .frame{position:relative; overflow:hidden}
.filmstrip img{width:100%; height:auto; display:block}
/* the sprocketed edge sits over the print, not around the mount */
.filmstrip .frame::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:9%;
  background:#15110F;
}
.filmstrip .frame::after{
  content:""; position:absolute; top:2%; bottom:2%; left:2.4%; width:4%;
  background:repeating-linear-gradient(180deg,#CFC5AF 0 3%, transparent 3% 8%);
}
.clip{position:absolute; top:-9%; left:11%; z-index:5; width:clamp(20px,2.2vw,30px); color:#C0A87F}
.founder-body{position:relative}
.founder-body h2{margin:0 0 18px}
.founder-body p:where(:not(.kicker,.entry,.hand)){margin:0 0 14px; max-width:460px; font-size:clamp(14px,1.5vw,16.5px); line-height:1.8; color:var(--cocoa)}
.founder-body .said{color:var(--cocoa); margin-top:22px}
.founder-note{position:absolute; right:var(--pad); top:13%; width:clamp(140px,13vw,178px); text-align:center; z-index:2}
.attrs{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(18px,2.2vw,28px);
  border:1px solid rgba(185,138,74,.32); border-radius:10px; padding:clamp(16px,2vw,24px) 0;
}
.attr{text-align:center; padding:0 clamp(4px,.8vw,12px); border-left:1px solid rgba(185,138,74,.24)}
.attr:first-child{border-left:0}
.attr .ic{
  width:clamp(38px,4vw,52px); aspect-ratio:1; margin:0 auto 12px; border-radius:50%;
  border:1px solid rgba(185,138,74,.42); display:grid; place-items:center; color:var(--gold);
}
.attr h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; margin:0 0 8px; color:var(--espresso)}
.attr p{margin:0; font-size:11.5px; line-height:1.6; color:var(--muted); max-width:none}

/* ============================================================
   ENTRY 02 — INSIDE K-SPA  (light now, not the dark block)
   ============================================================ */
/* ============================================================
   ENTRY 02 · INSIDE K-SPA  — follows the pink-glow banner:
   inline entry header (no side rail), small-caps serif headline,
   three white credential cards, and a tinted agency panel.
   ============================================================ */
.kspa{
  background:linear-gradient(160deg,#FBF3F4 0%, #F7E9EE 46%, #F3E2EA 100%);
  position:relative; overflow:hidden; padding-block:clamp(24px,2.6vw,40px);
}
.kspa-leaf{
  position:absolute; pointer-events:none; z-index:0; opacity:.3;
  aspect-ratio:440/285; background:var(--img-bouquet) center/contain no-repeat;
  filter:sepia(.5) saturate(2.4) hue-rotate(-16deg);
}
.kspa-leaf--a{left:-6%; top:-8%; width:min(24vw,290px); rotate:-12deg}
.kspa-leaf--b{right:-4%; bottom:-10%; width:min(20vw,240px); rotate:16deg}

/* entry header sits inline above the headline */
.kspa .rail .lbl,.kspa .rail .vtxt{color:var(--muted)}
.kspa .rail .num,.kspa .rail .pg{color:var(--gold)}
.kspa .rail .line{background:rgba(185,138,74,.42)}
.kicker--split{color:var(--muted); margin-bottom:10px}
.kicker--split b{font-weight:500; color:var(--ink); letter-spacing:.24em; margin-right:.5em}

.kspa-text{container-type:inline-size}
.kspa-cols{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(24px,3.4vw,54px); align-items:center;
}
/* the headline is set in small caps, as drawn — the closing full stop is rose */
.kspa h2{
  color:var(--ink); margin:0 0 16px; text-transform:none;
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
  letter-spacing:.012em; line-height:1.1;
}
.kspa h2 .dot{color:var(--terra-warm)}
.kspa p:where(:not(.kicker,.entry,.hand)){margin:0 0 14px; max-width:500px; font-size:clamp(14px,1.5vw,16.5px); line-height:1.8; color:var(--cocoa)}
/* the pull line is an italic serif here, not the script face */
/* sized against its own column and set nowrap, so it always holds one line */
.kspa .pull{
  margin:clamp(10px,1.3vw,16px) 0 0; max-width:none; white-space:nowrap;
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(13px,4.65cqw,26px); line-height:1.35; color:var(--terra-warm);
}

/* three credential cards */
.creds{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.1vw,16px);
  margin:clamp(16px,1.9vw,24px) 0 clamp(10px,1.3vw,16px);
}
.cred{
  background:rgba(255,255,255,.74); border-radius:16px; text-align:center;
  padding:clamp(14px,1.7vw,20px) clamp(10px,1.3vw,18px) clamp(14px,1.7vw,19px);
  box-shadow:0 10px 26px rgba(146,104,124,.1);
}
.kspa .cred-no{
  font-family:var(--display); font-size:clamp(18px,2vw,26px); line-height:1;
  color:var(--gold); margin:0 0 clamp(5px,.7vw,8px); max-width:none;
}
.cred .ic{display:block; margin:0 auto clamp(7px,.9vw,11px); color:var(--terra-warm)}
.cred h4{
  font-size:clamp(9.5px,1vw,11px); letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; margin:0 0 clamp(10px,1.2vw,14px); color:var(--ink); line-height:1.55;
}
.cred p{margin:0; font-size:11.5px; line-height:1.65; color:var(--muted); max-width:none}

/* the entertainment-ecosystem panel */
.agencies{
  border:0; border-radius:12px;
  background:linear-gradient(120deg, rgba(246,230,238,.92), rgba(238,216,229,.92));
  padding:clamp(12px,1.5vw,18px) clamp(12px,1.6vw,22px) clamp(13px,1.6vw,19px);
}
.agencies .agencies-hd{
  margin:0 0 clamp(12px,1.5vw,18px)!important; text-align:center; max-width:none!important;
  font-size:clamp(9.5px,1vw,11px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cocoa); line-height:1.65;
}
.agencies ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1.8vw,30px);
}
.agencies li{
  display:flex; align-items:center; gap:clamp(10px,1.8vw,30px);
  border:0; font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.7vw,24px); letter-spacing:.03em; color:var(--ink);
}
.agencies li::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--terra-warm); opacity:.6;
}
.agencies li:last-child::after{display:none}

/* the collage, now with softened corners */
.kspa-media{position:relative; padding:0 0 18% 0}
.mount{
  background:#fff; padding:1.6%; border-radius:18px;
  box-shadow:0 12px 30px rgba(146,104,124,.14), 0 1px 3px rgba(146,104,124,.08);
}
.mount img{width:100%; height:auto; display:block; border-radius:13px}
.kspa-big{position:relative; z-index:2; width:87%; margin-left:auto; rotate:-.5deg}
.kspa-sm-a{position:absolute; left:6%; bottom:0; z-index:4; width:26%; rotate:-2.4deg}
.kspa-sm-b{position:absolute; left:33%; bottom:1%; z-index:3; width:30%; rotate:2.6deg}
.kspa-media .kspa-chip{
  position:absolute; right:9%; top:8%; z-index:6;
  background:var(--ink); color:var(--blush); padding:11px 16px; rotate:-.5deg;
  border:1px solid rgba(203,183,154,.45); border-radius:6px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; line-height:1.9;
  text-align:center; box-shadow:0 6px 16px rgba(60,40,56,.16);
}
.stamp{
  position:absolute; right:4%; bottom:2%; z-index:6;
  width:clamp(66px,13%,108px); height:auto; opacity:.95;
}

/* petals falling across the section */
.petals{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.kspa-petal{
  position:absolute; top:-8%; will-change:transform;
  width:var(--w,15px); height:calc(var(--w,15px) * 1.42);
  border-radius:58% 42% 60% 40% / 64% 40% 60% 36%;
  background:linear-gradient(142deg, rgba(248,206,220,.95), rgba(234,158,187,.62));
  box-shadow:inset 0 0 5px rgba(214,132,166,.22);
  opacity:0;
}
/* a few small four-point glints, as in the banner */
.kspa-glint{
  position:absolute; pointer-events:none; z-index:1;
  width:var(--w,10px); height:var(--w,10px); opacity:.5;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), transparent 70%),
    conic-gradient(from 0deg, transparent 0 6%, rgba(255,255,255,.85) 12%, transparent 18% 31%,
                   rgba(255,255,255,.85) 37%, transparent 43% 56%, rgba(255,255,255,.85) 62%,
                   transparent 68% 81%, rgba(255,255,255,.85) 87%, transparent 93%);
}
@media (prefers-reduced-motion:no-preference){
  .kspa-petal{animation:petalFall var(--dur,17s) linear var(--delay,0s) infinite}
  .kspa-glint{animation:glintPulse 4.5s ease-in-out var(--delay,0s) infinite}
}
/* reduced motion: no fall, just a scatter of still petals */
@media (prefers-reduced-motion:reduce){
  .kspa-petal{opacity:.5; top:var(--rest,20%)}
}
@keyframes petalFall{
  0%{transform:translate3d(0,0,0) rotate(0deg); opacity:0}
  8%{opacity:.75}
  50%{transform:translate3d(var(--sway,-38px),58vh,0) rotate(190deg); opacity:.7}
  88%{opacity:.5}
  100%{transform:translate3d(calc(var(--sway,-38px) * .3),118vh,0) rotate(390deg); opacity:0}
}
@keyframes glintPulse{
  0%,100%{opacity:.15; transform:scale(.7)}
  50%{opacity:.7; transform:scale(1)}
}

@media (max-width:1000px){
  .kspa-cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  .creds{grid-template-columns:1fr}
  .agencies ul{gap:12px 18px}
  .agencies li{gap:12px 18px}
  .kspa-media{padding-bottom:24%}
  .kspa-big{width:100%}
  .kspa-sm-a{width:38%}
  .kspa-sm-b{width:46%; left:34%}
  .kspa-media .kspa-chip{top:5%; right:0; font-size:8.5px; padding:9px 12px; letter-spacing:.16em}
  .stamp{width:20%; right:0; bottom:0}
}


.ritual{
  background:linear-gradient(170deg,#F7EBF1 0%, #EFE1E9 100%);
  position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,54px);
}
.ritual-head{text-align:center; position:relative}
.ritual-head h2{margin:0 0 12px}
.ritual-head > p:where(:not(.kicker,.entry,.hand)){margin:0 auto; max-width:560px; font-size:clamp(13.5px,1.4vw,15.5px); line-height:1.8; color:var(--cocoa)}
.ritual-note{position:absolute; right:0; top:-12%; width:170px; text-align:center}
.ritual-note svg{display:block; margin:2px auto 0; color:var(--plum-num); opacity:.6}
.ritual .petals,.hero .petals{z-index:0}
.ritual-rail{margin-top:clamp(22px,2.6vw,36px)}
.pcards{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1.1vw,16px); list-style:none; margin:0; padding:0}
.pcard{display:flex; perspective:1400px}

/* the whole card is the button, so it flips on click and on Enter/Space */
.flip{
  flex:1; position:relative; display:block; padding:0; border:0; background:none;
  text-align:center; transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.72,.24,1);
}
.flip.is-flipped{transform:rotateY(180deg)}
/* on hover the card lifts and tips just far enough to show there is a back */
.flip:hover{transform:translateY(-5px) rotateY(-13deg)}
.flip.is-flipped:hover{transform:translateY(-5px) rotateY(193deg)}
.flip:focus-visible{outline:none}
.flip:focus-visible .face{outline:2px solid var(--terra); outline-offset:3px}

.face{
  border:1px solid rgba(185,138,74,.34); border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:border-color .35s, box-shadow .35s;
}
.flip:hover .face{border-color:rgba(185,138,74,.65); box-shadow:0 18px 34px rgba(120,84,104,.14)}

.face--front{
  position:relative; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  padding:clamp(14px,1.6vw,22px) clamp(8px,1vw,14px) 26px;
  display:flex; flex-direction:column; align-items:center;
}
.face--back{
  position:absolute; inset:0; z-index:1; transform:rotateY(180deg);
  background:#F1E8E1; display:block;
}
.face--back img{position:absolute; inset:0}
.face--back img{width:100%; height:100%; object-fit:cover; object-position:center}

.pfig{
  width:100%; height:clamp(120px,13.5vw,186px);
  display:flex; align-items:flex-end; justify-content:center; margin-bottom:clamp(10px,1.4vw,18px);
}
.pfig img{max-width:100%; width:auto; object-fit:contain}
.pcard-no{font-family:var(--display); font-size:clamp(17px,1.9vw,25px); color:var(--ink); margin:0 0 10px}
.pcard .rule{display:block; width:100%; height:1px; background:rgba(185,138,74,.3); margin:0 0 11px}
.pcard-nm{margin:0; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; line-height:1.6; text-align:center; color:var(--text)}

/* ---- the "there is something on the back" cue ---- */
.flip-cue{
  position:absolute; top:9px; right:9px; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(185,138,74,.55); color:var(--gold);
  display:grid; place-items:center; background:rgba(255,255,255,.7);
  transition:background .3s, color .3s, border-color .3s;
}
.flip-cue svg{display:block}
/* the closed cards breathe; the one that is already open stays still */
.flip.is-flipped .flip-cue{animation:cuePulse 2.8s ease-in-out infinite}
@keyframes cuePulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(185,138,74,.34)}
  55%{transform:scale(1.09); box-shadow:0 0 0 6px rgba(185,138,74,0)}
}
.flip:hover .flip-cue{background:var(--ink); color:var(--blush); border-color:var(--ink); animation:none}

.flip-hint{
  position:absolute; left:0; right:0; bottom:8px; margin:0;
  font-size:8px; letter-spacing:.19em; text-transform:uppercase; color:var(--gold);
  opacity:0; transition:opacity .3s;
}
.flip:hover .flip-hint{opacity:1}
@media (hover:none), (pointer:coarse){
  .flip-hint{opacity:.8}
  .flip:hover{transform:none}
  .flip.is-flipped:hover{transform:rotateY(180deg)}
}

/* one nudge when the row first scrolls in — each card tips and settles back.
   Two keyframe sets, because the closed cards rest at 180deg. */
.pcards.peek .flip:not(.is-flipped){animation:cardPeek 1.15s cubic-bezier(.3,.7,.3,1) both}
.pcards.peek .flip.is-flipped{animation:cardPeekBack 1.15s cubic-bezier(.3,.7,.3,1) both}
@keyframes cardPeek{
  0%,12%{transform:rotateY(0deg)}
  42%{transform:rotateY(-26deg)}
  76%,100%{transform:rotateY(0deg)}
}
@keyframes cardPeekBack{
  0%,12%{transform:rotateY(180deg)}
  42%{transform:rotateY(152deg)}
  76%,100%{transform:rotateY(180deg)}
}
.pcards.peek .flip:hover{animation:none}

@media (prefers-reduced-motion:reduce){
  .flip.is-flipped .flip-cue{animation:none}
  .pcards.peek .flip,
  .pcards.peek .flip.is-flipped{animation: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;
}

@media (max-width:1000px){
  /* the founder and serum spreads had no stacking rule and were squeezing on phones */
  .founder-cols{grid-template-columns:1fr; gap:clamp(24px,5vw,36px)}
  .founder-note{position:static; width:auto; max-width:300px; margin:0 0 clamp(18px,3vw,26px)}
  .founder-note .hand-rule{margin-left:0!important}
  .fstack{max-width:520px; margin:0 auto; padding-bottom:13%}
  .serum .serum-cols{grid-template-columns:1fr; gap:clamp(26px,5vw,40px)}
  .serum .serum-media{max-width:520px; margin:0 auto}
  .serum .serum-note{position:static; width:auto; margin:14px 0 0; text-align:left}
  .pcards{grid-template-columns:repeat(3,1fr); gap:14px}
  .ritual-note{position:static; width:auto; margin:14px auto 0}
}
@media (max-width:760px){
  .serum .specs{grid-template-columns:1fr 1fr; padding:0}
  .serum .specs li{padding:16px clamp(8px,3vw,14px); border-left:0; border-top:1px dotted rgba(185,138,74,.6)}
  .serum .specs li:nth-child(-n+2){border-top:0}
  .serum .specs li:nth-child(even){border-left:1px dotted rgba(185,138,74,.6)}
  .attrs{grid-template-columns:1fr 1fr; padding:0}
  .attr{padding:18px clamp(8px,3vw,16px); border-top:1px solid rgba(185,138,74,.24)}
  .attr:nth-child(-n+2){border-top:0}
  .attr:nth-child(odd){border-left:0}
  .pcards{grid-template-columns:1fr 1fr}
}


/* ============================================================
   ENTRY 03 — SUN SERUM
   ============================================================ */
.serum{background:#FDF7FA; position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,54px)}
.serum-sprig{opacity:.42; filter:sepia(.45) saturate(2.2) hue-rotate(-14deg)}
.serum-cols{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,3.6vw,58px); align-items:center}
/* the print is square, and the handwritten line now sits inside its lower corner */
.serum-media{position:relative}
.serum-media .shot{aspect-ratio:1; object-fit:cover}
.serum-note{
  position:absolute; right:7%; bottom:7%; width:44%; max-width:210px;
  text-align:right; z-index:3; color:var(--cocoa);
}
.serum-note .hand{color:var(--cocoa); font-size:clamp(16px,1.7vw,22px)}
.serum-note svg{display:block; margin:4px 0 0 auto; color:var(--cocoa); opacity:.55}

.serum .kicker{color:var(--terra-warm); margin-bottom:10px}
.serum h2{margin:0 0 18px; line-height:1.02}
/* two weights of the same headline — the product name carries the size */
.serum h2 .nm{display:block; font-size:clamp(28px,3.8vw,54px); letter-spacing:.01em}
.serum h2 .co{display:block; font-size:clamp(20px,2.6vw,37px); letter-spacing:.02em; margin-bottom:.12em}
.serum-body > p:where(:not(.kicker,.entry,.hand)){margin:0 0 clamp(22px,2.6vw,32px); max-width:560px; font-size:clamp(14px,1.5vw,16.5px); line-height:1.8; color:var(--cocoa)}

/* the spec strip is a tinted band now, not a bordered box */
.specs{
  display:grid; grid-template-columns:repeat(4,1fr); border:0;
  background:#F3EAF0; border-radius:2px;
  margin:0 0 clamp(22px,2.6vw,30px); padding:clamp(18px,2.2vw,26px) 0; list-style:none;
}
.specs li{text-align:center; padding:0 clamp(6px,1vw,14px); border-left:1px dotted rgba(185,138,74,.65)}
.specs li:first-child{border-left:0}
.specs .ic{
  width:clamp(34px,3.4vw,46px); aspect-ratio:1; margin:0 auto clamp(9px,1.1vw,13px);
  border-radius:50%; border:1px solid rgba(185,138,74,.6);
  display:grid; place-items:center; color:var(--gold);
}
.specs svg{display:block}
.specs b{display:block; font-weight:400; font-size:clamp(10px,1.05vw,11.5px); letter-spacing:.1em; text-transform:uppercase; line-height:1.6; color:var(--ink)}
.btn--plum{background:var(--ink); color:#fff; border-radius:999px; padding:16px 30px; letter-spacing:.17em}
.btn--plum:hover{background:var(--cocoa)}
.btn--plum svg{transition:transform .35s ease}
.btn--plum:hover svg{transform:translateX(4px)}

@media (max-width:760px){
  .serum-note{position:static; width:auto; max-width:none; text-align:left; margin-top:14px}
  .serum-note svg{margin-left:0}
}

/* ============================================================
   WORDMARK BAND
   ============================================================ */
.mark-band{
  background:var(--band); color:var(--band-ink); overflow:hidden; position:relative;
  border-top:1px solid rgba(203,183,154,.3); border-bottom:1px solid rgba(203,183,154,.3);
  display:flex; align-items:center; gap:clamp(16px,2.6vw,44px);
  padding:clamp(14px,2vw,26px) 0 clamp(14px,2vw,26px) var(--pad);
}
.mark-band .pg{font-size:10px; letter-spacing:.18em; opacity:.6; flex:none}
.mark-band .stamp-sm{width:clamp(56px,6vw,84px); flex:none; opacity:.85}
.mark-band .line{
  margin:0; font-family:var(--display); font-size:clamp(14px,1.9vw,27px);
  line-height:1.45; letter-spacing:.05em; text-transform:uppercase; flex:none;
}
.mark-band .big{
  margin:0 0 0 auto; font-family:var(--display); font-style:italic; line-height:.8;
  font-size:clamp(52px,10vw,140px); letter-spacing:-.01em; white-space:nowrap;
  translate:6% 4%; color:var(--blush);
}

/* ============================================================
   ENTRY 05 — MALAYSIA
   ============================================================ */
.my{
  background:linear-gradient(160deg,#F2EAEF 0%, #ECE2E9 100%);
  position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,54px);
  /* the banner sits closer to the edges than the rest of the page, which is
     what buys the photo column its width */
  padding-inline:clamp(18px,2.8vw,40px);
}
.my .spread{gap:clamp(14px,1.6vw,24px)}
.my-cols{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(16px,1.8vw,26px); align-items:center}
.my-body{container-type:inline-size}
/* The headline runs a touch under the shared scale: the photo column takes
   the banner's 54% share, so the text column is narrow and anything past
   48px breaks "comes to Malaysia." onto a third line. */
.my h2{margin:0 0 22px; color:var(--ink); font-size:clamp(22px,8.5cqw,46px); white-space:nowrap}
.my-body > p:where(:not(.kicker,.entry,.hand)){margin:0 0 clamp(22px,2.6vw,30px); font-size:clamp(14px,1.5vw,16.5px); line-height:1.8; color:var(--cocoa)}
.my .btn--solid{background:var(--band); border-radius:999px; padding:15px 28px; letter-spacing:.16em}
.my .btn--solid:hover{background:var(--ink)}
.my .hand{
  margin-top:clamp(22px,2.6vw,32px); color:var(--plum-num);
  font-family:var(--hand); font-size:clamp(19px,2.1vw,27px); line-height:1.25;
}
.flight{margin-top:14px; width:100%; max-width:430px; color:var(--plum-num)}
.flight text{font-family:var(--sans); font-size:9px; letter-spacing:.16em; text-transform:uppercase; fill:var(--muted)}

/* Geometry measured off the Entry 05 banner: a tall narrow skyline print at
   28% of the column and a wide vanity print at 73%, barely overlapping, with
   the arrival stamp on the seam and hanging below both. */
.my-media{position:relative; padding:0 0 10.8% 0}
.my-kl{
  position:relative; z-index:2; width:28.1%; margin:0; rotate:-1deg;
  background:#fff; padding:3.2% 3.2% 3.6%; border-radius:2px;
  box-shadow:0 8px 22px rgba(90,70,86,.11), 0 1px 3px rgba(90,70,86,.06);
}
/* the banner crops the skyline far narrower than the source, so cover-crop it */
.my-kl img{width:100%; height:auto; display:block; aspect-ratio:.53; object-fit:cover; object-position:center 42%}
.tape-my{
  position:absolute; top:-3.5%; left:26%; width:44%; aspect-ratio:3.6;
  background:rgba(250,248,244,.86); rotate:1.4deg; z-index:4;
  clip-path:polygon(3% 0,97% 4%,100% 96%,1% 100%);
  box-shadow:0 1px 4px rgba(90,70,86,.14);
}
.my-vanity{
  position:absolute; right:0; bottom:2%; z-index:3; width:72.9%; rotate:1deg;
  background:#fff; padding:1.7%; border-radius:2px;
  box-shadow:0 10px 26px rgba(90,70,86,.13), 0 1px 3px rgba(90,70,86,.06);
}
.my-vanity img{width:100%; height:auto; display:block}
.arrived{
  position:absolute; left:25%; bottom:0; z-index:5;
  width:clamp(78px,13.5%,150px); height:auto; rotate:-2deg;
  background:#FDFAFB; border-radius:50%;
  box-shadow:0 4px 14px rgba(90,70,86,.14);
}
.postmark{position:absolute; right:16%; top:2%; z-index:1; width:clamp(50px,7.4%,84px); color:var(--plum-num); opacity:.45}
.my-sprig{position:absolute; right:4%; top:0; z-index:1; width:min(8.2%,96px); opacity:.38}

@media (max-width:1000px){
  .my-cols{grid-template-columns:1fr}
  .my-media{padding-bottom:14%}
  .my-kl{width:38%}
  .my-vanity{width:62%; right:0}
  .arrived{left:28%}
}
@media (max-width:600px){
  .my-kl{width:60%}
  .my-vanity{position:static; width:92%; margin:-10% 0 0 auto; rotate:-1.4deg}
  .arrived{left:2%; bottom:2%; width:clamp(66px,20%,104px)}
  .my-sprig{display:none}
}

/* ============================================================
   FINAL ENTRY — closing note on the left, the answered card on the right
   ============================================================ */
.close{
  background:linear-gradient(150deg,#F0E2E8 0%, #E9DAE2 100%);
  position:relative; overflow:hidden;
  padding-block:clamp(46px,5.4vw,80px);
  border-top:1px solid rgba(87,76,90,.09);
  isolation:isolate;
}
/* the marble hall, held well back so the type stays the subject */
.close-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-position:center 34%; background-size:cover; background-repeat:no-repeat; background-image:url("/images/home/close-bg.webp");
  opacity:.24; filter:saturate(.7);
  -webkit-mask-image:radial-gradient(125% 100% at 64% 42%, #000 22%, rgba(0,0,0,.4) 68%, transparent 100%);
          mask-image:radial-gradient(125% 100% at 64% 42%, #000 22%, rgba(0,0,0,.4) 68%, transparent 100%);
}
/* a wash of the section colour over the top keeps contrast where the type sits */
.close-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(240,226,232,.74) 0%, rgba(240,226,232,.26) 48%, rgba(233,218,226,.44) 100%);
}
.close-sprig{
  position:absolute; z-index:1; pointer-events:none; aspect-ratio:440/285; opacity:.3;
  background:var(--img-bouquet) center/contain no-repeat;
}
.close-sprig--a{left:-7%; top:-12%; width:min(20vw,240px); rotate:-14deg}
.close-sprig--b{right:-5%; bottom:-16%; width:min(22vw,268px); rotate:8deg}

.close-cols{
  position:relative; z-index:2; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.4vw,74px); align-items:center;
}
.close-body .entry{margin-bottom:clamp(18px,2.2vw,26px)}
.close-body h2{margin:0 0 clamp(16px,2vw,22px); color:var(--ink)}
.close-body > p:where(:not(.kicker,.entry,.hand)){
  margin:0 0 clamp(24px,3vw,34px); font-size:clamp(14px,1.45vw,16px);
  line-height:1.85; color:var(--cocoa); max-width:400px;
}
.close-acts{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.2vw,34px)}
.close-acts .btn--solid{background:var(--ink); color:var(--cream); border-radius:999px; padding:16px 30px; letter-spacing:.17em}
.close-acts .btn--solid:hover{background:var(--cocoa)}
.link-u{
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--cocoa);
  border-bottom:1px solid rgba(87,76,90,.4); padding-bottom:4px; transition:color .3s, border-color .3s;
}
.link-u:hover{color:var(--ink); border-color:var(--ink)}
.close-body .hand{margin-top:clamp(26px,3.2vw,38px); display:flex; align-items:center; gap:12px}
.close-body .hand span{color:var(--mauve); font-size:.72em}

/* the answered card */
.faq{
  background:var(--paper); border-radius:12px;
  padding:clamp(24px,3.2vw,44px) clamp(20px,2.8vw,40px);
  box-shadow:0 20px 50px rgba(90,70,86,.1), 0 2px 6px rgba(90,70,86,.05);
}
.faq h2{margin:0 0 clamp(14px,2vw,22px); color:var(--ink)}
.faq details{border-top:1px solid var(--line)}
.faq details:first-of-type{border-top:0}
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:clamp(15px,1.8vw,20px) 52px clamp(15px,1.8vw,20px) 0;
  font-size:clamp(13px,1.4vw,15px); line-height:1.6; color:var(--text);
  transition:color .3s;
}
.faq summary:hover{color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; translate:0 -50%;
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(87,76,90,.28);
  display:grid; place-items:center; font-size:15px; line-height:1; color:var(--muted);
  transition:transform .35s ease, background .3s, color .3s, border-color .3s;
}
.faq summary:hover::after{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open] summary{color:var(--ink)}
.faq details > p{margin:0 0 clamp(16px,2vw,22px); font-size:12.5px; line-height:1.85; color:var(--muted); padding-right:44px}

@media (max-width:1000px){
  .close-cols{grid-template-columns:1fr; gap:clamp(26px,4vw,40px)}
  .close-body > p:where(:not(.kicker,.entry,.hand)){max-width:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--espresso-deep); color:rgba(255,255,255,.58); border-top:1px solid rgba(203,183,154,.14); padding:clamp(38px,4.6vw,58px) var(--pad) 24px}
.footer-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.25fr repeat(4,1fr); gap:clamp(22px,3vw,40px)}
.footer .brand{color:#fff; display:block; margin-bottom:14px}
.footer-about{font-size:12.5px; line-height:1.8; max-width:230px; margin:0}
.footer h4{font-family:var(--sans); font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer ul a{font-size:12.5px; transition:color .3s}
.footer ul a:hover{color:#fff}
.socials{display:flex; gap:9px}
.socials a{width:32px; height:32px; border-radius:50%; border:1px solid var(--line-lt); display:grid; place-items:center; transition:background .3s, color .3s}
.socials a:hover{background:var(--cream); color:var(--espresso)}
.news{display:flex; border-bottom:1px solid var(--line-lt); margin-top:18px}
.news input{flex:1; background:none; border:0; color:#fff; padding:9px 0; font:inherit; font-size:12.5px}
.news input::placeholder{color:rgba(255,255,255,.34)}
.news input:focus{outline:none}
.news button{padding:9px 0 9px 12px; color:#fff; font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.footer-base{
  max-width:1180px; margin:clamp(32px,4vw,50px) auto 0; padding-top:20px; border-top:1px solid var(--line-lt);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:11px;
}
.footer-base ul{display:flex; gap:20px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:grid; place-items:center}
  .hero-in{grid-template-columns:1fr; gap:clamp(24px,4.4vw,36px)}
  .hero h1{white-space:normal; font-size:clamp(25px,6.6vw,38px)}
  .hero-right{order:-1}
  .photo{margin:0 auto; width:min(72%,370px)}
  .photo-img{aspect-ratio:1/1}
  .note{left:0; bottom:auto; top:2%; width:clamp(126px,28vw,164px)}
  .lineup{position:static; left:auto; right:auto; width:100%; margin:-6% 0 clamp(10px,3vw,20px)}
  .script-mark{font-size:clamp(80px,22vw,180px); bottom:auto; top:-2%; left:-4%; opacity:.22}
  .sketch{width:min(30vw,180px); top:auto; bottom:12%; right:-6%}
  .petal{display:none}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:760px){
  .photo{width:min(86%,340px)}
  .note{width:clamp(118px,32vw,150px); top:0}
  .chapters .run{font-size:9.5px; letter-spacing:.17em}
  .footer-grid{grid-template-columns:1fr}
  .auth-row{grid-template-columns:1fr}
}
/* ============================================================
   THE QUILL — a feather for a cursor, trailing violet sparks.
   Mouse only: coarse pointers keep the native touch behaviour, and
   anyone who asks for reduced motion gets the quill without the sparks.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body,
  .btn, a, button, summary, label, [role="button"]{
    /* a quill — cream halo under the outline so it still reads on the dark bands */
    cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cg fill='none' stroke='%23FCFBFA' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round' opacity='.92'%3E %3Cpath d='M27.4 3.6C29.6 10 25.6 17.4 18.2 21.4c-4 2.1-6.9 1.8-7.5-.5-.6-2.6 2.4-7.6 6.6-11.2 3.6-3.1 7.5-5.4 10.1-6.1Z'/%3E %3Cpath d='M3.3 29.1c2.6-4.4 6.3-9 10.6-13.2'/%3E %3C/g%3E %3Cpath d='M27.4 3.6C29.6 10 25.6 17.4 18.2 21.4c-4 2.1-6.9 1.8-7.5-.5-.6-2.6 2.4-7.6 6.6-11.2 3.6-3.1 7.5-5.4 10.1-6.1Z' fill='%23E9BFD2'/%3E %3Cpath d='M27.4 3.6c-2.6.7-6.5 3-10.1 6.1-1.9 1.6-3.6 3.5-4.8 5.3 4.6-.8 9.6-4 12.5-7.6.9-1.1 1.7-2.4 2.4-3.8Z' fill='%23E7B96A'/%3E %3Cg fill='none' stroke='%235A4C58' stroke-width='.75' stroke-linecap='round' opacity='.55'%3E %3Cpath d='M24.6 7.2 16 12.4M25.4 11.2 15.4 16.6M23.6 15.2 15.6 19.6'/%3E %3C/g%3E %3Cpath d='M27.4 3.6C29.6 10 25.6 17.4 18.2 21.4c-4 2.1-6.9 1.8-7.5-.5-.6-2.6 2.4-7.6 6.6-11.2 3.6-3.1 7.5-5.4 10.1-6.1Z' fill='none' stroke='%233D2B3E' stroke-width='1.05' stroke-linejoin='round'/%3E %3Cpath d='M3.3 29.1c2.6-4.4 6.3-9 10.6-13.2 4.3-4.2 9.2-8.1 13.5-12.3' fill='none' stroke='%233D2B3E' stroke-width='1.5' stroke-linecap='round'/%3E %3C/svg%3E") 3 29, auto;
  }
  input, textarea, select{cursor:text}
  select{cursor:pointer}
}
/* the sparks sit above the page but never intercept a click */
.ink{position:fixed; inset:0; z-index:80; pointer-events:none}
.confetti{position:fixed; inset:0; z-index:85; pointer-events:none}
@media (hover:none), (pointer:coarse){ .ink{display:none} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
}