/* ============================================================
   HMY — DESIGN SYSTEM
   A quiet, cinematic dark luxury language.
   Tokens → atmosphere → primitives → components → pages.
   ============================================================ */

/* —— 1 · TOKENS ——————————————————————————————— */
:root{
  --ink:        #08080a;
  --ink-2:      #0c0c10;
  --ink-3:      #121218;
  --cream:      #ece5d6;
  --gold:       #c8a96a;
  --gold-light: #ecd49c;
  --muted:      #9a93a3;
  /* --muted-2 was #6a6474 = 3.51:1 on --ink — it fails WCAG AA, and
     it carries real copy (the "prices in AED · checkout through the
     boutique" line and the footer copyright). #837c8e keeps the same
     dimmed violet-grey but measures 5.10:1. */
  --muted-2:    #837c8e;
  --line:       rgba(200,169,106,.18);
  --line-soft:  rgba(236,229,214,.09);

  --serif:  'Italiana', serif;
  --script: 'Cormorant Garamond', serif;
  --sans:   'Jost', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);

  --pad: clamp(20px, 4vw, 56px);

  /* geometry — one radius language across every component */
  --r-sm: 12px;   /* small controls */
  --r-md: 18px;   /* cards, tiles, forms */
  --r-lg: 24px;   /* media, photography */
}

/* —— 2 · RESET / BASE ————————————————————————— */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:rgba(200,169,106,.28);color:var(--gold-light)}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}

.skip{
  position:fixed;top:-60px;left:16px;z-index:300;background:var(--gold);color:var(--ink);
  padding:10px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:top .3s
}
.skip:focus{top:16px}

/* a heading that exists for structure and screen readers only —
   used where the design carries the section visually but the
   document would otherwise skip a heading level */
.u-vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.wrap{width:min(1280px,92vw);margin-inline:auto}
.wrap-narrow{width:min(820px,92vw);margin-inline:auto}

/* —— 3 · TYPE UTILITIES ———————————————————————— */
.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:400;
}
.eyebrow.muted{color:var(--muted)}
.eyebrow.ruled{display:inline-flex;align-items:center;gap:14px}
.eyebrow.ruled::before{content:'';width:34px;height:1px;background:var(--gold)}

.display{
  font-family:var(--serif);font-weight:400;letter-spacing:-.016em;line-height:.94;
  font-size:clamp(52px,10.5vw,168px);
}
.title{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04;
  font-size:clamp(38px,5.6vw,78px);
}
.title-xl{
  font-family:var(--serif);font-weight:400;letter-spacing:-.014em;line-height:1;
  font-size:clamp(44px,7.4vw,108px);
}
.title-sm{
  font-family:var(--serif);font-weight:400;line-height:1.1;
  font-size:clamp(26px,3.2vw,42px);
}
.it{font-family:var(--script);font-style:italic;font-weight:500;color:var(--gold)}
.it-grad{
  font-family:var(--script);font-style:italic;font-weight:500;
  background:linear-gradient(110deg,var(--gold) 20%,var(--gold-light) 45%,#f6e7bd 50%,var(--gold-light) 55%,var(--gold) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:goldsheen 9s ease-in-out infinite;
}
@keyframes goldsheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.it-grad{animation:none}}
.lead{color:var(--muted);font-size:clamp(15px,1.25vw,17px);line-height:1.85;max-width:56ch}
.lead strong{color:var(--cream);font-weight:400}
.lead .it,.lead .it-grad{font-size:1.08em}

/* —— 4 · ATMOSPHERE (injected by main.js) ————————— */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(0,0,0,.5) 100%);
}
/* the ember line — the page smolders as you read it */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:220;
  background:linear-gradient(90deg,rgba(200,169,106,0),rgba(200,169,106,.5) 60%,var(--gold));
}
.progress::after{
  content:'';position:absolute;right:-3px;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);background:var(--gold-light);
  box-shadow:0 0 12px 3px rgba(236,212,156,.75);
  animation:emberflicker 1.7s ease-in-out infinite alternate;
}
@keyframes emberflicker{from{opacity:.65}to{opacity:1}}
/* page veil — loader + transitions */
.veil{
  position:fixed;inset:0;z-index:400;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:1;pointer-events:none;transition:opacity .7s var(--ease);
}
.veil.lift{opacity:0}
/* the loading mark: the lineage column draws itself, stroke by stroke */
.veil .veil-mark{height:88px;color:var(--cream)}
.veil .veil-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:veildraw 1s var(--ease) forwards}
.veil .veil-mark path:nth-child(2){animation-delay:.12s}
.veil .veil-mark path:nth-child(3){animation-delay:.3s}
.veil .veil-mark path:nth-child(4){animation-delay:.45s}
@keyframes veildraw{to{stroke-dashoffset:0}}

/* —— 5 · BUTTONS ——————————————————————————————— */
.btn{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;font-weight:400;
}
.arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.btn-gold{
  background:linear-gradient(120deg,var(--gold),var(--gold-light));
  color:var(--ink);padding:17px 34px;position:relative;overflow:hidden;
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.18);
  transition:box-shadow .4s,transform .35s var(--ease);
}
.btn-gold:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 40px rgba(200,169,106,.3);
  transform:translateY(-2px);
}
.btn-gold::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn-gold:hover::after{left:160%}

.btn-ghost{
  border:1px solid var(--line);padding:15px 28px;color:var(--cream);
  position:relative;overflow:hidden;
  border-radius:999px;
  background:rgba(18,18,24,.28);backdrop-filter:blur(9px);
  transition:border-color .4s,color .4s,box-shadow .4s,transform .35s var(--ease);
}
.btn-ghost span{position:relative;z-index:1}
.btn-ghost::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,var(--gold),var(--gold-light));
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--ink);box-shadow:0 0 30px rgba(200,169,106,.22)}
.btn-ghost:hover::before{transform:translateY(0)}

.btn-line{
  color:var(--gold-light);padding:6px 0;border-bottom:1px solid var(--line);
  transition:border-color .4s,color .4s;
}
.btn-line:hover{border-color:var(--gold-light);color:var(--cream)}

/* press feedback — every tap feels physical */
@media(pointer:coarse){
  .btn-gold:active,.btn-ghost:active{transform:scale(.965)}
}

/* —— 6 · HEADER ———————————————————————————————— */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);
  border-bottom:1px solid transparent;
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
}
header.site.scrolled{
  padding:14px var(--pad);
  background:rgba(8,8,10,.74);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1;z-index:2}
.brand .mark-svg{height:19px;width:auto;aspect-ratio:280/100;display:block;color:var(--cream);transition:color .35s}
.brand:hover .mark-svg{color:var(--gold-light)}
.brand .sub{font-size:8.5px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.foot-brand .mark-svg{height:26px;width:auto;display:block;color:var(--cream);margin-bottom:18px}

.nav-desktop{display:flex;gap:34px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-desktop a{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);
  position:relative;padding:6px 0;opacity:.8;transition:opacity .3s;
}
.nav-desktop a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease);
}
.nav-desktop a:hover{opacity:1}
.nav-desktop a:hover::after{width:100%}
.nav-desktop a[aria-current="page"]{opacity:1;color:var(--gold-light)}
.nav-desktop a[aria-current="page"]::after{width:100%;background:var(--gold)}

.header-actions{display:flex;align-items:center;gap:14px;z-index:2}

/* burger */
.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:2}
.burger span{width:24px;height:1px;background:var(--cream);transition:transform .4s var(--ease),opacity .3s}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:150;background:rgba(8,8,10,.97);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;padding:0 10vw;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.menu-open .menu{opacity:1;visibility:visible}
.menu a{
  font-family:var(--serif);font-size:clamp(34px,8vw,56px);color:var(--cream);
  padding:8px 0;opacity:.85;display:flex;align-items:baseline;gap:18px;
  transform:translateY(20px);transition:transform .5s var(--slow),opacity .4s;
}
.menu-open .menu a{transform:none;opacity:1}
.menu a i{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--gold)}
.menu a:hover{color:var(--gold-light)}
.menu .menu-foot{margin-top:36px;display:flex;gap:26px}
.menu .menu-foot a{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding:4px 0;transform:none;opacity:1}
.menu .menu-foot a:hover{color:var(--gold-light)}

/* —— 7 · SECTIONS —————————————————————————————— */
main{position:relative;z-index:2}
section.block{padding:clamp(88px,11vw,160px) 0;position:relative}
section.block.tight{padding:clamp(60px,8vw,110px) 0}
.sec-head{margin-bottom:clamp(44px,6vw,72px)}
.sec-head .eyebrow{display:inline-flex;margin-bottom:24px}
.sec-head .lead{margin-top:26px}
.rule-x{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:none}

.sec-index{
  font-family:var(--serif);font-size:clamp(130px,19vw,300px);
  color:transparent;-webkit-text-stroke:1px rgba(200,169,106,.16);
  position:absolute;right:3vw;top:-24px;
  line-height:1;pointer-events:none;user-select:none;z-index:0;
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--slow),transform 1s var(--slow)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
html.no-js .reveal{opacity:1;transform:none}

/* —— 8 · MEDIA SLOTS (motion-ready) ————————————————
   Every .media-slot is a mount point for future Higgsfield
   video/motion. Drop a <video autoplay muted loop playsinline>
   or an <img> inside — the slot handles sizing and tone.  */
.media-slot{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:
    radial-gradient(120% 100% at 60% 0%, #1a160f 0%, var(--ink-2) 55%, var(--ink) 100%);
}
/* full-bleed atmosphere layers stay square — the canvas never rounds */
.hero-media,.section-media,.frag-card .visual .media-slot{border-radius:0}
.media-slot>video,.media-slot>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.media-slot .tone{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.45),rgba(8,8,10,.72));
}
/* hero media melts into the page: darker center for copy, solid ink at the base */
.hero-media .tone{
  background:
    radial-gradient(90% 70% at 50% 46%, rgba(8,8,10,.42), rgba(8,8,10,.2) 60%, transparent 100%),
    linear-gradient(180deg, rgba(8,8,10,.55), rgba(8,8,10,.3) 42%, var(--ink) 97%);
}

/* —— 9 · HERO —————————————————————————————————— */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;position:relative;padding:150px var(--pad) 90px;overflow:hidden;
}
.hero-media{
  position:absolute;inset:0;z-index:0;
  /* the hero film could still meet the next section as a faint
     horizontal edge where the video's glow outlived the tone
     gradient (visible on the Ember page). The whole layer now
     dissolves to nothing over its last fifth — the section below
     begins on pure ink, always. */
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.hero>*:not(.hero-media):not(.scroll-ind):not(.hero-rail):not(.hero-stage){position:relative;z-index:2}
.hero .rules{display:flex;align-items:center;gap:18px;margin-bottom:32px}
.hero .rules .r{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero .rules .r.b{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-sub{max-width:560px;margin:38px auto 0;color:var(--muted);font-size:16px;line-height:1.85}
.hero-sub .it{color:var(--gold-light)}
.hero-cta{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;justify-content:center}
.scroll-ind{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted);
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;z-index:2;
}
.scroll-ind .track{width:1px;height:44px;background:var(--line-soft);position:relative;overflow:hidden}
.scroll-ind .track::after{
  content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--gold);animation:scrolldot 2.2s var(--ease) infinite;
}
@keyframes scrolldot{0%{top:-50%}60%,100%{top:100%}}

/* page hero (interior pages) */
.page-hero{
  padding:clamp(170px,22vh,240px) 0 clamp(60px,8vw,100px);
  text-align:left;position:relative;
}
.page-hero .lead{margin-top:28px}

/* —— 10 · PRODUCT PHOTOGRAPHY ——————————————————— */
.product-frame{
  border:1px solid var(--line-soft);overflow:hidden;position:relative;
  border-radius:var(--r-lg);
  transition:box-shadow .6s var(--slow),border-color .6s;
}
.product-frame:hover{border-color:var(--line);box-shadow:0 24px 70px rgba(200,169,106,.14)}
.product-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--slow)}
.product-frame:hover img{transform:scale(1.03)}
.card .bottle-shot{
  display:block;width:calc(100% + 60px);max-width:none;height:auto;margin:-36px -30px 26px;
  aspect-ratio:1/1;object-fit:cover;
}
.frag-card .visual img.product{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--slow);
}
.frag-card:hover .visual img.product{transform:scale(1.04)}

/* —— 11 · CARDS / GRIDS ———————————————————————— */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:960px;margin-inline:auto}
.align-end{text-align:right}

@media(max-width:560px){.grid-craft .grid-4{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.4));
  padding:36px 30px;position:relative;overflow:hidden;
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.055);
  transition:transform .6s var(--slow),border-color .6s,box-shadow .6s;
}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(200,169,106,.10),transparent 60%);
}
.card:hover{transform:translateY(-8px);border-color:var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}
.card h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:14px 0 10px}
.card p{color:var(--muted);font-size:14px;line-height:1.75}
.card .k{font-family:var(--serif);font-size:30px;color:var(--gold-light);line-height:1}

/* fragrance card (registry-rendered) */
.frag-card{
  border:1px solid var(--line-soft);position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.35));
  border-radius:var(--r-md);
  transition:transform .6s var(--slow),border-color .6s,box-shadow .6s;
}
.frag-card:hover{transform:translateY(-8px);border-color:var(--line);box-shadow:0 34px 70px rgba(0,0,0,.55)}
.frag-card .visual{aspect-ratio:4/4.6;position:relative;overflow:hidden}
.frag-card .visual .media-slot{position:absolute;inset:0}
.frag-card .visual .frag-emblem{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:clamp(46px,5vw,64px);letter-spacing:.14em;color:rgba(236,229,214,.9);
  transition:transform .8s var(--slow);
}
.frag-card:hover .visual .frag-emblem{transform:scale(1.05)}
.frag-card .visual .glowspot{
  position:absolute;inset:20% 10% 0;filter:blur(38px);
  background:radial-gradient(circle at 50% 60%,rgba(200,169,106,.28),transparent 65%);
}
.frag-card .body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.frag-card .chapter{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.frag-card h3{font-family:var(--serif);font-size:30px;font-weight:400}
.frag-card .fam{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.frag-card .desc{color:var(--muted);font-size:14px;line-height:1.75;margin-top:6px;flex:1}
.frag-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.frag-card .price{font-family:var(--serif);font-size:19px}
.frag-card.locked .visual .frag-emblem{color:rgba(236,229,214,.28);letter-spacing:.3em}
.frag-card.locked{border-style:solid;border-color:rgba(236,229,214,.06)}
.frag-card .status-pill{
  position:absolute;top:18px;left:18px;z-index:3;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--line);color:var(--gold-light);background:rgba(8,8,10,.55);backdrop-filter:blur(6px);
  border-radius:999px;
}

/* —— 12 · NOTES PYRAMID ———————————————————————— */
.notes-tabs{display:flex;flex-direction:column;border-left:1px solid var(--line-soft)}
.note-tab{
  text-align:left;padding:24px 0 24px 28px;position:relative;width:100%;
  border-bottom:1px solid var(--line-soft);transition:padding-left .4s var(--ease);
}
.note-tab:last-child{border-bottom:none}
.note-tab::before{
  content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.note-tab.active::before{transform:scaleY(1)}
.note-tab.active{padding-left:38px}
.note-tab .k{display:block;font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);color:var(--muted);transition:color .4s}
.note-tab.active .k{color:var(--cream)}
.note-tab .lbl{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.note-tab.active .lbl{color:var(--gold)}

.note-panels{position:relative;min-height:320px}
.note-panel{
  position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .6s var(--slow),transform .6s var(--slow);
}
.note-panel.show{opacity:1;transform:none;pointer-events:auto}
.note-panel .ph{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.note-panel h3{font-family:var(--script);font-style:italic;font-weight:500;font-size:clamp(34px,4.4vw,54px);margin-bottom:20px}
.note-panel p{color:var(--muted);font-size:16px;line-height:1.85;max-width:440px;margin-bottom:26px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);padding:9px 18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);
  border-radius:999px;transition:border-color .35s,background .35s;
}
.chip:hover{border-color:var(--gold);background:rgba(200,169,106,.07)}

/* —— 13 · ACCORDION (FAQ) ——————————————————————— */
.acc{border-top:1px solid var(--line-soft)}
.acc-item{border-bottom:1px solid var(--line-soft)}
/* each question is an <h2> wrapping the button (WAI-ARIA accordion
   pattern) so the FAQ is navigable by heading and the page no longer
   jumps h1 → h4. The h2 is a pure semantic carrier — it must add no
   box of its own. */
.acc-h{margin:0;font:inherit;letter-spacing:inherit;text-transform:none}
.acc-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;text-align:left;transition:padding-left .35s var(--ease);
}
.acc-q:hover{padding-left:12px}
.acc-q .q{font-family:var(--serif);font-size:clamp(19px,2vw,25px);color:var(--cream)}
.acc-q .ico{
  flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;
  transition:transform .45s var(--ease),background .4s,color .4s;
}
.acc-item.open .acc-q .ico{transform:rotate(45deg);background:var(--gold);color:var(--ink)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.acc-a-inner{padding:0 4px 28px;color:var(--muted);font-size:15px;line-height:1.85;max-width:64ch}
.acc-a-inner a{color:var(--gold-light);border-bottom:1px solid var(--line)}

/* —— 14 · FORMS ———————————————————————————————— */
.form{
  display:flex;max-width:520px;border:1px solid var(--line);background:rgba(18,18,24,.5);
  border-radius:var(--r-md);overflow:hidden;backdrop-filter:blur(8px);
}
.form .btn-gold{border-radius:0}
.form input{
  flex:1;background:none;border:none;color:var(--cream);font-family:var(--sans);
  font-size:14px;letter-spacing:.04em;padding:18px 22px;outline:none;min-width:0;
}
.form input::placeholder{color:var(--muted-2);letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.form .btn-gold{padding:0 26px;white-space:nowrap}
.fine{margin-top:20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.fine a{color:var(--gold)}

/* —— 15 · STATS / SPEC BAND ————————————————————— */
.stats{display:flex;gap:clamp(28px,4vw,52px);flex-wrap:wrap}
.stat .v{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);color:var(--gold-light)}
.stat .l{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* maison spec sheet — facts set like a ledger */
.spec-rows{border-top:1px solid var(--line-soft)}
.spec-rows .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:15px 2px;border-bottom:1px solid var(--line-soft);
}
.spec-rows .l{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.spec-rows .v{font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);color:var(--cream);text-align:right}
.spec-rows .v em{font-style:normal;color:var(--gold-light)}

/* featured — the editorial split: ledger left, photograph right,
   the chapter numeral drawn across the image */
.grid-feature{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(30px,4.5vw,70px);align-items:center}
.grid-feature .copy{position:relative;z-index:2}
.grid-feature .copy .title{margin:24px 0 26px}
.grid-feature .visual{position:relative;z-index:1}
@media(max-width:900px){
  .grid-feature{grid-template-columns:1fr;gap:34px}
  .grid-feature .visual{order:-1}
}

/* the atelier split — the house, photographed, beside its rules */
.grid-craft{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.grid-craft .grid-4{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){
  .grid-craft{grid-template-columns:1fr;gap:34px}
}
.band{
  padding:clamp(64px,8vw,110px) 0;position:relative;
}

/* —— 16 · EDITORIAL / PROSE ————————————————————— */
.prose{max-width:66ch}
.prose p{color:var(--muted);font-size:16px;line-height:1.95;margin-bottom:24px}
.prose p strong{color:var(--cream);font-weight:400}
.prose h2,.prose h3{font-family:var(--serif);font-weight:400;color:var(--cream);margin:52px 0 18px;font-size:clamp(26px,3vw,36px)}
.prose .pull{
  font-family:var(--script);font-style:italic;font-size:clamp(22px,2.6vw,30px);
  color:var(--gold-light);line-height:1.5;border-left:1px solid var(--gold);
  padding:6px 0 6px 28px;margin:40px 0;
}
.dropcap::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.8;
  padding:6px 12px 0 0;color:var(--gold-light);
}

/* timeline */
.timeline{position:relative;padding-left:34px;border-left:1px solid var(--line-soft)}
.tl-item{position:relative;padding-bottom:46px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-38px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px rgba(200,169,106,.6);
}
.tl-item .when{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.tl-item h3{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:8px}
.tl-item p{color:var(--muted);font-size:15px;line-height:1.8;max-width:52ch}

/* ingredient / journal tiles */
.tile{
  border:1px solid var(--line-soft);padding:30px 26px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.35));
  border-radius:var(--r-md);
  transition:transform .5s var(--slow),border-color .5s;
}
.tile:hover{transform:translateY(-6px);border-color:var(--line)}
.tile .thumb{
  display:block;width:calc(100% + 52px);max-width:none;height:auto;margin:-30px -26px 24px;
  aspect-ratio:16/10;object-fit:cover;
  transition:transform .8s var(--slow);
}
.tile:hover .thumb{transform:scale(1.045)}
.tile .origin{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.tile h3{font-family:var(--serif);font-size:23px;font-weight:400;margin-bottom:8px}
.tile p{color:var(--muted);font-size:13.5px;line-height:1.75}
.tile .phase{margin-top:16px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}

/* journal entry */
.entry{padding:clamp(44px,6vw,64px) 0;border-bottom:1px solid var(--line-soft)}
.entry:last-child{border-bottom:none}
.entry .meta{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.entry h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,44px);font-weight:400;margin-bottom:18px}

/* trust strip */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;
}
.trust .t{
  background:var(--ink);padding:34px 26px;text-align:center;
  transition:background .5s;
}
.trust .t:hover{background:var(--ink-2)}
.trust .t .ico{font-size:20px;color:var(--gold);margin-bottom:14px}
.trust .t h3{font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:8px}
.trust .t p{color:var(--muted);font-size:12.5px;line-height:1.7}

/* —— 17 · FOOTER ——————————————————————————————— */
footer.site{border-top:1px solid var(--line-soft);padding:76px 0 40px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
.foot-brand .mark{font-family:var(--serif);font-size:26px;letter-spacing:.4em;margin-bottom:14px}
.foot-brand p{font-family:var(--script);font-style:italic;font-size:19px;color:var(--muted);max-width:26ch}
.foot-col h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot-col a,.foot-col span{display:block;color:var(--muted);font-size:13px;letter-spacing:.04em;margin-bottom:12px;transition:color .3s}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--line-soft);
}
.foot-bottom .copy{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.foot-bottom .stays{font-family:var(--serif);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* —— 17b · EXPERIENCE LAYER ————————————————————— */
/* the universe — a WebGL dust field the homepage scrolls through.
   Sits above the vignette, below all content; content sections keep
   transparent backgrounds so the journey reads between them. */
.universe{position:fixed;inset:0;z-index:1;pointer-events:none;display:block}
/* when the universe is live, atmosphere slots become translucent washes over it */
.gl .hero-media,.gl .section-media{background:transparent}
/* The Letter's drawn mark stays — the dust gathers onto it and ignites it */
.nl-mark svg{height:104px;color:var(--cream);transition:color 1.2s var(--ease),filter 1.2s var(--ease)}
.mark-lit .nl-mark svg{
  color:var(--gold-light);
  filter:drop-shadow(0 0 14px rgba(236,212,156,.6)) drop-shadow(0 0 42px rgba(200,169,106,.35));
}

/* hero copy recedes into the house as you scroll — the first camera move */
.hero-core{display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}

/* dimensional product frames — photographs lean with the hand, light follows */
@media(pointer:fine){
  .product-frame{
    transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:box-shadow .6s var(--slow),border-color .6s,transform .5s var(--slow);
  }
  .product-frame::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(236,212,156,.13),transparent 65%);
  }
  .product-frame:hover::after{opacity:1}
}

/* cursor presence — a candle carried through the house (fine pointers only) */
.cursor-glow{
  position:fixed;left:0;top:0;width:46vmax;height:46vmax;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform;
  background:radial-gradient(circle,rgba(200,169,106,.075),transparent 60%);
}
.cursor-dot{
  position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;z-index:300;
  pointer-events:none;transform:translate(-50%,-50%);will-change:transform;
  background:var(--gold-light);mix-blend-mode:screen;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s,border .35s;
}
.cursor-dot.on{width:38px;height:38px;background:transparent;border:1px solid var(--gold)}
/* the cursor names what it touches */
.cursor-dot.lbl{
  width:64px;height:64px;background:rgba(8,8,10,.6);border:1px solid var(--gold);
  mix-blend-mode:normal;backdrop-filter:blur(5px);
}
.cursor-dot.lbl::after{
  content:attr(data-lbl);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);
}
@media(pointer:coarse){.cursor-glow,.cursor-dot{display:none}}

/* nav links lean toward the hand; section atmospheres dolly with the scroll */
.nav-desktop a{transition:opacity .3s,transform .4s var(--ease)}
.section-media video,.section-media img{will-change:transform}

/* split headlines — words rise from behind an invisible line, as if set by hand */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--slow)}
.split.in .w>span{transform:none}
@media(prefers-reduced-motion:reduce){.split .w>span{transform:none}}

/* hero rails removed by request — the hero holds only the headline */

/* section atmospheres — full-bleed motion behind content, whisper-dim.
   Every layer breathes in and out of pure ink at its edges, so one
   atmosphere melts into the next — no seams, no rules, no borders. */
.section-media{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
.block .wrap,.block .wrap-narrow,.band .wrap,.page-hero .wrap{position:relative;z-index:2}

/* hover hairlines — a gold line draws itself across tiles under the hand */
.trust .t{position:relative}
.tile::after,.trust .t::after{
  content:'';position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.tile:hover::after,.trust .t:hover::after{transform:scaleX(1)}

/* eyebrow rules draw themselves in as sections arrive.
   NOTE the reduced-motion/no-js restore below: the global
   transition kill-switch means `.in` never animates — without an
   explicit resting state these rules would stay at scaleX(0),
   i.e. invisible, for exactly those readers. */
.reveal .eyebrow.ruled::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--slow) .15s}
.reveal.in .eyebrow.ruled::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .reveal .eyebrow.ruled::before,.reveal .figcap::before{transform:none}
}
html.no-js .reveal .eyebrow.ruled::before,
html.no-js .reveal .figcap::before{transform:none}

/* parallax targets get GPU transforms from the frame loop */
[data-plx]{will-change:transform}

/* —— 18 · RESPONSIVE ——————————————————————————— */
@media(max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav-desktop{display:none}
  .burger{display:flex}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .header-cta{display:none}
  .sec-index{opacity:.6}
  .align-end{text-align:left}
  .align-end .lead{margin-left:0;text-align:left}

  /* —— touch targets ——
     At this width the layout is a phone layout. Footer links were
     21px tall, the mobile-menu foot links 26px and the burger 33px —
     all under the 44px minimum, and all stacked closely enough to
     mis-tap. Height comes from min-height + centring rather than
     extra margin, so the visual rhythm is unchanged. */
  .foot-col a,.foot-col span{
    display:flex;align-items:center;min-height:44px;margin-bottom:0;
  }
  .menu .menu-foot a{display:flex;align-items:center;min-height:44px;padding:0}
  .burger{min-width:44px;min-height:44px;justify-content:center;align-items:center}
}
@media(max-width:760px){
  .grid-cards{grid-template-columns:1fr;max-width:460px}
}
@media(max-width:560px){
  .hero-cta{flex-direction:column;width:100%;max-width:300px;margin-inline:auto}
  .hero-cta .btn{justify-content:center;width:100%}
  .form{flex-direction:column}
  .form .btn-gold{padding:16px}
  .grid-4{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}

  /* —— size cards, compacted ——
     Stacked, each card ran ~700px tall (square bottle shot + full
     copy) = three screens of scrolling before the prices could be
     compared. The photograph becomes a wide crop centred on the
     label zone and the rhythm tightens; a card now fits ~450px,
     so two prices share every viewport. */
  .card .bottle-shot{aspect-ratio:16/9;object-position:50% 45%}
  .size-card{padding-top:30px}
  .size-card h3{margin:10px 0 6px}
  .size-card .size-price{margin:18px 0 16px;padding-top:14px}
}

/* —— 19 · REDUCED MOTION ———————————————————————— */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .veil{display:none}
}

/* —— 20 · THE THRESHOLD FILM (scroll-scrubbed hero) ——————
   Default (no JS, reduced motion, Save-Data, persisted Pause,
   video failure): everything below is inert — the hero renders
   exactly as it always has. body.hero-scrub-on (set only by
   hero-scroll.js, before first paint) turns the hero into a
   finite sticky track scrubbed by native scroll. */
:root{
  /* measured from the generated masters: the bottle sits at frame
     centre (desktop ≈ x 44–56%, portrait ≈ y 25–85%), so the copy
     holds x 0–40% on desktop and a scrimmed sheet below the label
     zone on portrait. */
  --hero-focal-x:50%;
  --hero-focal-y:50%;
  --hero-scroll-length:250vh;
  --hero-scroll-length:250svh;
}
/* the stage wrapper is invisible to layout until the film runs */
.hero-stage{display:contents}
/* stage children keep the same paint order the hero always had
   (.hero>* no longer matches through the wrapper) */
.hero-stage>*:not(.hero-media):not(.hero-media-scrub):not(.scroll-ind){position:relative;z-index:2}

.hero-media-scrub{position:absolute;inset:0;z-index:0;overflow:hidden;display:none}
.hero-media-scrub video,.hero-media-scrub .hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focal-x) var(--hero-focal-y);
}
.hero-media-scrub .hero-poster{z-index:2;opacity:1;transition:opacity .6s ease}
.hero-ready .hero-media-scrub .hero-poster{opacity:0}
.hero-media-scrub .copy-scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(320px 200px at 0% 0%, rgba(8,8,10,.98), transparent 72%), /* masks a corner render artifact */
    linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.66) 34%, transparent 50%);
}

.hero-scrub-on .hero{
  display:block;height:var(--hero-scroll-length);
  min-height:0;padding:0;overflow:visible;
}
.hero-scrub-on .hero-stage{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  padding:110px var(--pad) 90px;
}
.hero-scrub-on .hero-media{display:none}       /* the film replaces the vapor loop */
.hero-scrub-on .hero-media-scrub{display:block}
/* copy holds the measured safe zone left of the glass */
.hero-scrub-on .hero-core{
  align-items:flex-start;text-align:left;
  width:100%;max-width:min(560px,40vw);
  margin-inline:clamp(8px,3vw,64px) 0;
}
.hero-scrub-on .hero-core .display{font-size:clamp(44px,4.7vw,74px);line-height:1.02}
.hero-scrub-on .hero-sub{margin-inline:0}
.hero-scrub-on .hero-cta{justify-content:flex-start}
@media(max-width:1180px){
  .hero-scrub-on .hero-core{max-width:min(520px,46vw)}
}

/* skip past the film — rendered only when the film runs */
.skip-experience{
  display:none;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);padding:14px 10px;min-height:44px;align-items:center;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.hero-scrub-on .skip-experience{display:inline-flex}
.skip-experience:hover,.skip-experience:focus-visible{color:var(--gold-light);border-color:var(--line)}

/* portrait (any width): the film owns the upper stage; the copy
   becomes a scrimmed sheet below the bottle's label zone. Phone
   aspects run the portrait master; wider portraits run the
   landscape master, which keeps the bottle proportionate. */
@media(orientation:portrait){
  :root{--hero-scroll-length:185vh;--hero-scroll-length:185svh}
  .hero-media-scrub .copy-scrim{
    background:linear-gradient(180deg, transparent 38%, rgba(8,8,10,.78) 56%, rgba(8,8,10,.97) 74%);
  }
  .hero-scrub-on .hero-stage{justify-content:flex-end;align-items:center;padding:96px var(--pad) 3svh}
  .hero-scrub-on .hero-core{align-items:center;text-align:center;max-width:100%;margin-inline:0}
  /* the header already says who the house is — the film keeps the
     eyebrow's vertical room for the label zone instead */
  .hero-scrub-on .hero-core .rules{display:none}
  .hero-scrub-on .hero-core .display{font-size:clamp(32px,8.6vw,48px)}
  .hero-scrub-on .hero-sub{font-size:13.5px;line-height:1.65;margin-top:12px;max-width:46ch}
  .hero-scrub-on .hero-cta{justify-content:center;margin-top:14px;gap:12px}
  /* bottom-right belongs to the Pause control — Skip takes its own line
     (width, not flex-basis: the ≤560px CTA column would wrap sideways) */
  .hero-scrub-on .skip-experience{flex-basis:auto;width:100%;justify-content:center;padding:4px 10px;min-height:36px}
  /* the sheet is the affordance; the dot would sit on the buttons */
  .hero-scrub-on .scroll-ind{display:none}
}
/* phones: Skip shares its row with the Pause chip — left vs right */
@media(orientation:portrait) and (max-width:560px){
  .hero-scrub-on .skip-experience{justify-content:flex-start;padding-inline:2px;min-height:32px}
}

/* —— 21 · PAUSE MOTION ————————————————————————— */
.motion-toggle{
  position:fixed;z-index:210;bottom:22px;right:22px;
  min-height:44px;display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border:1px solid var(--line);border-radius:999px;
  background:rgba(8,8,10,.65);backdrop-filter:blur(10px);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  transition:border-color .3s,color .3s;
}
.motion-toggle:hover{border-color:var(--gold);color:var(--gold-light)}
.motion-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);transition:background .3s}
.motion-toggle[aria-pressed="true"] .dot{background:var(--muted-2)}
.motion-toggle[hidden]{display:none}
@media(max-width:900px){.motion-toggle{bottom:14px;right:14px;padding:11px 16px}}

/* paused: every autonomous movement holds its breath */
.motion-paused .scroll-ind .track::after,
.motion-paused .it-grad{animation-play-state:paused}

/* —— 22 · CHAPTER RAIL ————————————————————————
   A running head for the Ember story. Sits after the hero in the
   DOM, so it only appears once the film has released the page;
   sticky below the fixed header from there on. The thin gold
   line is the active indicator (aria-current="location"). */
:root{--rail-top:78px} /* scrolled header height (measured) */
@media(max-width:900px){:root{--rail-top:62px}}
.chapter-rail{
  position:sticky;top:var(--rail-top);z-index:120;
  background:rgba(8,8,10,.78);backdrop-filter:blur(14px) saturate(1.15);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.rail-wrap{
  width:min(1280px,92vw);margin-inline:auto;
  display:flex;align-items:stretch;gap:18px;
}
.rail-scroll{
  display:flex;gap:clamp(18px,3vw,38px);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail-scroll::-webkit-scrollbar{display:none}
.rail-scroll a,.rail-buy{
  flex:none;display:inline-flex;align-items:center;position:relative;
  min-height:48px;padding:0 2px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;white-space:nowrap;
}
.rail-scroll a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.rail-scroll a:hover{color:var(--cream)}
.rail-scroll a[aria-current="location"]{color:var(--gold-light)}
.rail-scroll a[aria-current="location"]::after{transform:scaleX(1)}
.rail-buy{margin-left:auto;color:var(--gold);gap:8px}
.rail-buy::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold)}
.rail-buy:hover{color:var(--gold-light)}
/* anchors land clear of header + rail */
#ember,#lineage,#notes,#work,#detail,#sizes,#buy,#journal-teaser,#newsletter{
  scroll-margin-top:calc(var(--rail-top) + 54px);
}

/* —— 23 · EMBER, IN FOUR TRACES ————————————————— */
.traces{position:relative}
.traces-track{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.traces-track::-webkit-scrollbar{display:none}
.traces-track:focus-visible{outline:1.5px solid var(--gold);outline-offset:6px}
.trace{
  flex:1 0 min(300px,80vw);scroll-snap-align:start;
  display:flex;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.4));
  transition:transform .6s var(--slow),border-color .6s,box-shadow .6s;
}
.trace:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 26px 56px rgba(0,0,0,.5)}
.trace-visual{
  position:relative;aspect-ratio:16/11;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 60% 0%,#1a160f 0%,var(--ink-2) 60%,var(--ink) 100%);
}
.trace-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--slow)}
.trace:hover .trace-visual>img{transform:scale(1.045)}
.trace-mark svg{height:64%;width:auto;color:var(--gold-light);opacity:.9}
.trace-movement{flex-direction:column;gap:12px;align-items:flex-start;padding:0 26px}
.trace-movement .mv{display:flex;align-items:center;gap:12px}
.trace-movement .mv i{width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.trace-movement .mv:nth-child(2) i{width:44px}
.trace-movement .mv:nth-child(3) i{width:62px}
.trace-movement .mv b{
  font-family:var(--script);font-style:italic;font-weight:500;font-size:17px;color:var(--gold-light);
}
.trace-trio{gap:8px;padding:0 18px}
.trace-trio img{position:static;width:calc(33.3% - 6px);height:78%;object-fit:cover;border-radius:8px;border:1px solid var(--line-soft)}
.trace-body{display:flex;flex-direction:column;gap:8px;padding:22px 24px 26px}
.trace-k{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.trace-s{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--cream)}
.trace-f{font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:2px}
.traces-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.traces-nav[hidden]{display:none}
.tr-btn{
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold-light);font-size:15px;
  transition:border-color .3s,background .3s,color .3s,opacity .3s;
}
.tr-btn:hover{border-color:var(--gold);background:rgba(200,169,106,.08)}
.tr-btn[disabled]{opacity:.3;pointer-events:none}
html.no-js .traces-nav{display:none}
@media(max-width:900px){.traces-nav{display:none}}

/* —— 24 · THE LINEAGE CHAPTER ——————————————————
   The editorial pause, kept in the house's night palette
   (owner decision 2026-07-18: the earlier cream treatment read
   as disconnected). A single warm ember glow sits behind the
   type; the dust field passes behind the chapter like every
   other dark room; the thin gold line hands the chapter in and
   out. Deliberately static — no motion slot. */
.chapter-lineage{
  position:relative;
  background:
    radial-gradient(72% 58% at 50% 34%, rgba(64,46,22,.32), transparent 68%),
    linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(14,12,9,.55) 46%, rgba(8,8,10,0) 100%);
}
.chapter-lineage::before,.chapter-lineage::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:min(320px,42vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.chapter-lineage::before{top:0}
.chapter-lineage::after{bottom:0}
.lineage-row{
  display:flex;margin:clamp(36px,5vw,54px) 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.lineage-row .ln{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(20px,3vw,32px) 10px;
}
.lineage-row .ln+.ln{border-left:1px solid var(--line-soft)}
.lineage-row .ln b{
  font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,58px);line-height:1;color:var(--cream);
}
.lineage-row .ln i{
  font-style:normal;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}

/* —— 25 · HOW EMBER MOVES (finite sticky sequence) —————— */
.scent-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start;
}
.scent-visual{
  position:sticky;top:calc(var(--rail-top) + 62px);
  height:min(72vh,640px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-soft);
}
.scent-visual .media-slot{position:absolute;inset:0;border-radius:0}
.scent-visual .media-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the light of the scent: cool-pale → rose-warm → deep ember */
.scent-tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  transition:background 1.4s var(--ease);
  background:linear-gradient(200deg,rgba(236,229,214,.14),transparent 45%,rgba(8,8,10,.55) 100%);
}
.scent.stage-2 .scent-tint{
  background:linear-gradient(200deg,rgba(200,140,106,.16),transparent 50%,rgba(8,8,10,.6) 100%);
}
.scent.stage-3 .scent-tint{
  background:linear-gradient(200deg,rgba(200,169,106,.1),rgba(60,30,8,.28) 55%,rgba(8,8,10,.78) 100%);
}
.scent-stages{list-style:none;position:relative}
.scent-stage{
  position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  padding:6vh 0 6vh 34px;
}
.scent-stage .filament{
  position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-soft);
}
.scent-stage .filament::after{
  content:'';position:absolute;left:-3px;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--muted-2);transition:background .8s,box-shadow .8s;
}
.scent-stage.lit .filament{background:linear-gradient(180deg,var(--line-soft),var(--gold),var(--line-soft))}
.scent-stage.lit .filament::after{background:var(--gold-light);box-shadow:0 0 14px rgba(236,212,156,.7)}
.scent-stage .ph{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.scent-stage h3{font-family:var(--script);font-style:italic;font-weight:500;font-size:clamp(32px,3.8vw,50px);margin-bottom:18px}
.scent-stage p{color:var(--muted);font-size:16px;line-height:1.85;max-width:440px;margin-bottom:24px}
@media(max-width:900px){
  .scent-grid{grid-template-columns:1fr;gap:26px}
  .scent-visual{position:relative;top:auto;height:auto;aspect-ratio:16/10}
  .scent-stage{min-height:0;padding:26px 0 26px 26px;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .scent-visual{position:relative;top:auto;height:auto;aspect-ratio:16/10}
  .scent-stage{min-height:0;padding-top:26px;padding-bottom:26px}
  .scent-stage .filament,.scent-stage.lit .filament{background:var(--line)}
  .scent-stage .filament::after{background:var(--gold)}
}

/* —— 26 · CHOOSE EMBER ————————————————————————— */
.size-card{display:flex;flex-direction:column}
.size-card p{flex:1}
.size-card .btn{width:100%;justify-content:center}
.size-price{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:24px 0 20px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.size-price .amt{font-family:var(--serif);font-size:24px}
.size-price .ml{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* selection: a quiet gold edge — mouse click, or keyboard focus within */
.size-card.is-selected,.size-card:focus-within{
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.055),0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.5);
}
.size-card.is-selected::after{
  content:'';position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ============================================================
   27 · THE CHAPTER PLATE
   ------------------------------------------------------------
   The house is a book; every page opens on a plate.

   Until now all eight interior pages opened identically — the
   same dust loop behind the same eyebrow/headline/lead. A plate
   gives each page its own art-directed opening: a folio numeral,
   a framed photograph, and a caption set like an art book.
   ============================================================ */
.plate{
  position:relative;
  padding:clamp(140px,17vh,196px) 0 clamp(48px,7vw,86px);
}
.plate-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,72px);align-items:center;
}
.plate-copy{position:relative;z-index:2}
/* A chapter title is not the house title. The homepage hero owns
   the largest type on the site; interior plates step down a
   register so the hierarchy between them is unmistakable. */
.plate .display{font-size:clamp(42px,6.4vw,92px)}
.plate-copy .display{margin-top:24px}
.plate-copy .lead{margin-top:28px}

/* the folio — a chapter number, drawn as an outline so it reads
   as printing rather than decoration (same ink as .sec-index) */
.folio{
  display:block;font-family:var(--serif);line-height:1;
  font-size:clamp(64px,7vw,104px);
  color:transparent;-webkit-text-stroke:1px rgba(200,169,106,.32);
  margin-bottom:14px;user-select:none;
}
.folio-row{display:flex;align-items:baseline;gap:18px;margin-bottom:6px}
.folio-row .eyebrow{position:relative;top:-.4em}

/* —— the plate figure ————————————————————————————
   A photograph, framed, captioned, and graded into the night. */
.plate-figure{position:relative;margin:0}
.plate-figure .crop{border-radius:var(--r-lg)}
.figcap{
  display:flex;align-items:baseline;gap:12px;margin-top:16px;
  font-family:var(--script);font-style:italic;font-size:15px;color:var(--muted);
}
.figcap::before{content:'';flex:none;width:26px;height:1px;background:var(--gold);opacity:.8;transform:translateY(-4px)}
.figcap b{font-weight:500;font-style:normal;font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}

/* —— CSS crop windows ————————————————————————————
   One master photograph holds several compositions. Rather than
   cutting new files (more bytes, more requests, softer pixels),
   each plate frames the SAME cached image: --ox/--oy pan,
   --z zooms about that same anchor. */
.crop{position:relative;overflow:hidden;background:var(--ink-2)}
/* Plate proportions are CLASSES, never inline styles. Set inline
   they outrank every media query, and a 4:5 plate that is elegant
   beside a column of type becomes a full screen of photograph with
   no text on it the moment the layout stacks. (Same lesson this
   codebase already learned with inline grid columns.) */
.ar-portrait {aspect-ratio:4/5}
.ar-landscape{aspect-ratio:4/3}
.ar-tall     {aspect-ratio:3/4}
@media(max-width:900px){
  .ar-portrait,.ar-landscape,.ar-tall{aspect-ratio:16/10}
}
.crop>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--ox,50%) var(--oy,50%);
  transform:scale(var(--z,1));transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform 1.2s var(--slow);
}
/* framings of assets/img/atelier.jpg (1080×1440) */
.crop-organ  {--ox:24%;--oy:57%;--z:1.5}   /* the rows of bottles       */
.crop-ledger {--ox:70%;--oy:76%;--z:1.9}   /* the open handwritten book */
.crop-funnels{--ox:46%;--oy:76%;--z:2.6}   /* brass funnels on the bench*/
.crop-bench  {--ox:52%;--oy:74%;--z:1.15}  /* the whole working surface */
/* (a "light shaft" framing was tried and cut — that corner of the
   master is bare plaster, and it read as an empty frame.) */
/* framings of the bottle photography (1200×1600). NOTE these are
   calibrated to ember-100.jpg; the 10 ml and 50 ml were shot at
   different distances, so the same values crop them badly — verified
   by testing this framing on all three masters. */
.crop-cap   {--ox:50%;--oy:34%;--z:2.0}    /* cap and shoulder          */
.crop-foot  {--ox:50%;--oy:80%;--z:1.7}    /* glass base on warm marble */

/* —— grading ————————————————————————————————————
   Tested both ways: the bottle photography is lit ivory-bright,
   and grading it down to "fit" the night only turns the ivory a
   muddy grey — it loses the glass without gaining mood. So the
   product shots stay ungraded and FRAMED: a lit artwork on a dark
   wall, which is what the house actually is. Grading is reserved
   for the atelier photograph, which is already a night image and
   only needs to be taken down far enough to carry type. */
.grade-night>img{filter:brightness(.62) contrast(1.06) saturate(.9)}
.grade-night::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.22),rgba(8,8,10,.5)),
             radial-gradient(90% 70% at 50% 40%,rgba(122,84,34,.18),transparent 70%);
}
/* For type over a plate, flat darkening was the wrong instrument —
   at the level that guaranteed contrast the atelier photograph went
   black and stopped being a photograph at all. Instead the image
   keeps its light and a DIRECTIONAL scrim carries the type, exactly
   as the hero's copy-scrim does. */
.grade-deep>img{filter:brightness(.58) contrast(1.06) saturate(.85)}
.grade-deep::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.72) 34%,rgba(8,8,10,.12) 66%,transparent 100%),
    linear-gradient(180deg,rgba(8,8,10,.5),transparent 34%,rgba(8,8,10,.72));
}
/* the same scrim, poured from the bottom — for plates captioned
   underneath rather than beside */
.grade-base>img{filter:brightness(.6) contrast(1.06) saturate(.88)}
.grade-base::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.34) 0%,transparent 30%,rgba(8,8,10,.86) 100%);
}

/* —— why there is no grade for lit product shots ——————
   Two attempts are recorded here so neither is repeated. Flat
   `brightness()` reduction (see .grade-night) turns lit ivory into
   dead GREY — dimmed, not darkened. A warm multiply overlay plus a
   vignette got much closer, but grading can only ever CRUSH
   information, never add it: a frame lit bright-on-white has no
   shadow detail to recover, so its edges keep meeting the page ink
   at a hard line. The fix was upstream — the bottle was RE-LIT
   against a dark ground (assets/img/chapter-ember.jpg) with the real
   photograph as the reference, so the darkness is in the pixels.
   Grade the source, not the CSS. */

/* the plate breathes when the reader arrives. Both the reduced-motion
   and no-JS cases must land on the RESTING scale — otherwise the
   photograph sits permanently 6% over-zoomed for those readers,
   since .in is what returns it and .in never arrives. */
.reveal .crop>img{transform:scale(calc(var(--z,1) * 1.06))}
.reveal.in .crop>img{transform:scale(var(--z,1))}
@media(prefers-reduced-motion:reduce){
  .reveal .crop>img,.reveal.in .crop>img{transform:scale(var(--z,1))}
}
html.no-js .crop>img{transform:scale(var(--z,1))}

/* full-bleed plate: the photograph runs the width of the page and
   the title sits inside it (used where a page opens on an image).
   The caption is a SIBLING of the canvas, not a child: as a child
   of the flex canvas it became a second column beside the title
   and pushed the page 33px wide at 375. Outside the canvas it is
   an ordinary block on small screens and is lifted into the
   photograph's bottom corner only when there is room. */
.plate-bleed{padding-top:0;padding-bottom:clamp(48px,7vw,86px);--canvas-h:clamp(420px,64vh,620px)}
.plate-bleed .plate-canvas{
  position:relative;height:var(--canvas-h);
  display:flex;align-items:flex-end;
}
.plate-bleed .crop,.plate-bleed .plate-motion{
  position:absolute;inset:0;border-radius:0;
  /* the canvas ended in a hard horizontal edge — the one place a
     full-bleed layer didn't use the site's own dissolve rule. The
     image/film now melts into the page ink over its last quarter,
     exactly as every .section-media atmosphere does. */
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.plate-bleed .plate-canvas>.wrap{position:relative;z-index:2;padding-bottom:clamp(30px,5vw,58px)}
.plate-bleed>.figcap{
  position:absolute;right:var(--pad);top:calc(var(--canvas-h) - 40px);z-index:3;margin:0;
  max-width:40ch;justify-content:flex-end;text-align:right;
}
@media(max-width:900px){
  .plate-grid{grid-template-columns:1fr;gap:30px}
  .plate-figure{order:-1}
  .plate{padding-top:clamp(112px,15vh,150px)}
  .plate-bleed{--canvas-h:clamp(320px,46vh,420px)}
  /* below the image, in normal flow, inside the page gutter */
  .plate-bleed>.figcap{
    position:static;margin:14px auto 0;width:min(1280px,92vw);
    text-align:left;justify-content:flex-start;max-width:none;
  }
}

/* ============================================================
   28 · MONOLINE ICONS
   ------------------------------------------------------------
   The house had been using stray dingbats (✦ ✉ ◈) as icons —
   four different typefaces' worth of glyph. These are drawn in
   the wordmark's own language: one stroke weight, butt caps,
   mitred joins, no fills.
   ============================================================ */
.ico-line{
  display:block;width:30px;height:30px;color:var(--gold);
  transition:color .5s var(--ease),transform .6s var(--slow);
}
.ico-line path,.ico-line circle,.ico-line line{
  stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke;
}
.trust .t:hover .ico-line,.card:hover .ico-line{color:var(--gold-light);transform:translateY(-3px)}
.trust .t .ico-line{margin:0 auto 14px}

/* ============================================================
   29 · THE STRATA — how a perfume is built
   ------------------------------------------------------------
   Replaces nine identical ingredient tiles. A perfume is read as
   a cross-section: the opening sits thin and cool at the top,
   the heart holds the middle, the base is deepest and lasts. The
   diagram IS the information — nothing is hidden, so it needs no
   JavaScript and survives reduced motion untouched.
   ============================================================ */
.strata{position:relative;display:grid;gap:2px;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.stratum{
  position:relative;display:grid;
  grid-template-columns:minmax(190px,.86fr) minmax(115px,.58fr) 1.95fr;
  gap:clamp(18px,2.6vw,36px);align-items:center;
  padding:clamp(28px,3.4vw,42px) clamp(22px,3vw,38px);
  background:var(--ink-2);transition:background .7s var(--ease);
}
.stratum::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.9;z-index:1;
  background:linear-gradient(90deg,var(--sg,rgba(200,169,106,.05)),transparent 62%);
}
/* The materials themselves, shot as a matched set — cool for the
   opening, warm for the heart, ember for the base. The photograph
   bleeds to the band's own edges and fades out to the right so the
   type never sits on a busy field and needs no scrim to be read. */
.st-photo{
  position:relative;align-self:stretch;overflow:hidden;min-height:190px;margin:
    calc(-1 * clamp(28px,3.4vw,42px)) 0
    calc(-1 * clamp(28px,3.4vw,42px)) calc(-1 * clamp(22px,3vw,38px));
}
.st-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 50%;
  transition:transform 1.4s var(--slow);
}
.stratum:hover .st-photo img{transform:scale(1.04)}
.st-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 54%,var(--ink-2) 97%);
}
.stratum:hover,.stratum:focus-within{background:var(--ink-3)}
.stratum-1{--sg:rgba(196,214,224,.07)}
.stratum-2{--sg:rgba(198,124,96,.10)}
.stratum-3{--sg:rgba(200,150,66,.14)}
.stratum+.stratum{box-shadow:0 -1px 0 var(--line-soft)}
.stratum .st-mark{position:relative;z-index:1}
.stratum .st-when{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.stratum .st-name{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.05;display:block}
.stratum .st-dur{font-size:11px;letter-spacing:.06em;color:var(--muted-2);display:block;margin-top:8px}
.stratum .st-body{position:relative;z-index:1}
.stratum .st-body p{color:var(--muted);font-size:15px;line-height:1.8;max-width:54ch;margin-bottom:18px}
/* the notes of a stratum, set as a row of named materials */
.st-notes{display:flex;flex-wrap:wrap;gap:10px}
.st-note{
  position:relative;display:inline-flex;align-items:baseline;gap:9px;
  border:1px solid var(--line-soft);border-radius:999px;padding:9px 17px;
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.st-note:hover{border-color:var(--line);background:rgba(200,169,106,.06);transform:translateY(-2px)}
.st-note b{font-family:var(--script);font-style:italic;font-weight:500;font-size:16px;color:var(--gold-light)}
.st-note i{font-style:normal;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
/* the vertical axis: a filament that deepens down the strata */
.strata-axis{
  position:absolute;left:0;top:0;bottom:0;width:2px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,214,224,.35),rgba(198,124,96,.5) 46%,var(--gold) 100%);
}
@media(max-width:980px){
  /* the photograph keeps its own row, full width, above the type.
     The label column stays wide enough that "Bright & brief" does
     not break across two lines. */
  .stratum{grid-template-columns:minmax(158px,.66fr) 1.85fr}
  .st-photo{
    grid-column:1 / -1;aspect-ratio:16/6;min-height:0;
    margin:calc(-1 * clamp(28px,3.4vw,42px)) calc(-1 * clamp(22px,3vw,38px)) 4px;
  }
  .st-photo::after{background:linear-gradient(180deg,transparent 62%,var(--ink-2) 99%)}
  .st-photo img{object-position:34% 46%}
}
@media(max-width:760px){
  .stratum{grid-template-columns:1fr;gap:16px;padding:26px 20px}
  .stratum .st-dur{margin-top:4px}
  .st-photo{aspect-ratio:16/8;margin:-26px -20px 6px}
}

/* ============================================================
   29b · THE LINEAGE KEY
   ------------------------------------------------------------
   The mark is the story, so the story page annotates it: ticks
   run from each stroke of the column out to the man it stands
   for. Positions are tied to the artwork's own geometry — the
   crossbar sits at y49 of the 220-unit viewBox, the M vertex at
   y107, the fork at y164, the tail at y190.
   ============================================================ */
/* ONE variable drives the whole component. The mark used to be
   sized by HEIGHT on a 100×220 viewBox, so its width (≈2.2× smaller)
   was an emergent number nobody controlled — 155px — while the label
   column was a hand-guessed clamp starting at 74–104px. The names and
   their tick rules were therefore drawn 81px ON TOP of the artwork.
   Now the column is derived from the mark's real footprint, so the
   two can never disagree at any width. */
.lineage-key{
  --lk-w:118px;          /* mark width; height follows at ×2.2  */
  --lk-gap:46px;         /* clear space between mark and rules  */
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.35));
  padding:clamp(30px,4vw,44px) clamp(24px,3vw,38px);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.055);
}
.lk-figure{
  position:relative;
  padding-left:calc(var(--lk-w) + var(--lk-gap));
  min-height:calc(var(--lk-w) * 2.2);   /* == the mark's own height */
}
.lk-mark{
  position:absolute;left:0;top:0;
  width:var(--lk-w);height:auto;aspect-ratio:100/220;
  color:var(--cream);opacity:.92;
}
.lk-tick{
  position:absolute;left:calc(var(--lk-w) + var(--lk-gap));right:0;
  display:flex;align-items:baseline;gap:10px;
  font-size:12.5px;color:var(--muted);transform:translateY(-50%);
}
/* the rule reaches back from the name toward the stroke it names,
   stopping clear of the artwork on both sides */
.lk-tick::before{
  content:'';position:absolute;
  left:calc(-1 * var(--lk-gap) + 10px);
  width:calc(var(--lk-gap) - 22px);
  top:.55em;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.lk-tick b{
  font-family:var(--serif);font-weight:400;font-size:19px;color:var(--gold-light);
  min-width:1.1em;display:inline-block;
}
.lk-tick em{font-style:italic;font-family:var(--script);font-size:14px;color:var(--muted-2);margin-left:2px}
.lk-tick-1{top:22.3%}   /* the H crossbar   */
.lk-tick-2{top:48.6%}   /* the M vertex     */
.lk-tick-3{top:74.5%}   /* the Y fork       */
.lk-tick-4{top:86.4%}   /* the single tail  */
.lk-note{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:13px;line-height:1.8;color:var(--muted);
}
@media(max-width:520px){
  /* the mark shrinks; the column follows it automatically.
     (A `display:block` on the descriptor used to live here to wrap it
     onto its own line — it could never work, since the tick is a flex
     ROW and its items are blockified regardless. Measured at 320px the
     full line fits, so it is simply gone rather than left lying.) */
  .lineage-key{--lk-w:82px;--lk-gap:30px}
  .lk-tick{font-size:11.5px}
}

/* ============================================================
   29c · THE GLOSSARY — nine materials, set as a reference
   ------------------------------------------------------------
   The nine notes used to be nine identical cards in a grid. They
   are reference material, so they are set as reference material:
   a definition list, two columns, hairline-ruled.
   ============================================================ */
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px);border-top:1px solid var(--line-soft)}
.gl-item{padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line-soft)}
.gl-item dt{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);color:var(--cream);margin-bottom:10px;
}
.gl-item dt span{
  flex:none;font-family:var(--sans);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}
.gl-item dd{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
@media(max-width:760px){.gloss{grid-template-columns:1fr}}

/* ============================================================
   29d · THE CONCENTRATION CHART
   ------------------------------------------------------------
   Extrait is the fact that explains the price, the size range and
   the wearing instructions all at once — so it is drawn. The axis
   runs 0–45% fragrance oil; each band is the industry's standard
   range, not a claim about any particular competitor.
   ============================================================ */
.conc{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--ink-2),rgba(8,8,10,.4));
  padding:clamp(26px,3.4vw,38px);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.055);
}
.conc-row{display:grid;grid-template-columns:1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.conc-row:last-of-type{border-bottom:none}
.cr-name{font-size:13px;color:var(--muted);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cr-name i{font-style:normal;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.cr-bar{position:relative;display:block;height:8px;border-radius:999px;background:rgba(236,229,214,.06);overflow:hidden}
.cr-fill{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(236,229,214,.22)}
/* axis 0–45%: left = min/45, width = (max−min)/45 */
.cr-extrait{left:44.4%;width:44.4%;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.cr-edp{left:33.3%;width:11.1%}
.cr-edt{left:11.1%;width:22.2%}
.cr-val{font-family:var(--serif);font-size:15px;color:var(--muted)}
.conc-row.is-ours .cr-name{color:var(--cream)}
.conc-row.is-ours .cr-val{color:var(--gold-light);font-size:17px}
.conc-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.7;color:var(--muted-2)}
/* the bands grow in when the chart arrives */
.reveal .cr-fill{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--slow) .2s}
.reveal.in .cr-fill{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.reveal .cr-fill,.reveal.in .cr-fill{transform:none}}
html.no-js .cr-fill{transform:none}
@media(min-width:560px){
  .conc-row{grid-template-columns:minmax(140px,1fr) 2fr auto;gap:18px;align-items:center}
}

/* ============================================================
   30 · THE REGISTER — the house's chapters, as a ledger
   ============================================================ */
.register{border-top:1px solid var(--line)}
/* The register is rendered from config.js, so without JavaScript it
   would be a heading over nothing. Hide the whole section instead:
   the Chapter compositions below it carry the same content
   statically, including working purchase links. */
html.no-js #register{display:none}
.reg-row{
  display:grid;grid-template-columns:auto 1.3fr 1fr auto;
  gap:clamp(16px,3vw,38px);align-items:center;
  padding:clamp(22px,2.6vw,32px) 4px;border-bottom:1px solid var(--line-soft);
  position:relative;transition:padding-left .45s var(--ease);
}
a.reg-row:hover{padding-left:14px}
.reg-row::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);transition:width .6s var(--ease);
}
a.reg-row:hover::after{width:100%}
.reg-row .rg-no{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);color:transparent;-webkit-text-stroke:1px rgba(200,169,106,.5);min-width:2.2em}
.reg-row .rg-name{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.1}
.reg-row .rg-name small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.reg-row .rg-meta{font-size:13px;color:var(--muted);line-height:1.7}
.reg-row .rg-act{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);white-space:nowrap}
.reg-row.is-locked .rg-name,.reg-row.is-locked .rg-act{color:var(--muted)}
.reg-row.is-locked .rg-no{-webkit-text-stroke-color:rgba(236,229,214,.2)}
@media(max-width:820px){
  .reg-row{grid-template-columns:auto 1fr;row-gap:12px}
  .reg-row .rg-meta{grid-column:2}
  .reg-row .rg-act{grid-column:2}
}

/* ============================================================
   31 · EDITORIAL ENTRIES (Journal)
   ------------------------------------------------------------
   The journal had no imagery at all — three walls of text —
   while its three photographs sat unused outside the homepage
   teaser. Each entry now opens on its own plate.
   ============================================================ */
.entry-plate{margin:0 0 clamp(30px,4vw,46px)}
.entry-plate .crop{aspect-ratio:16/7;border-radius:var(--r-lg)}
.entry .prose>p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.2em;float:left;line-height:.82;
  padding:6px 12px 0 0;color:var(--gold-light);
}

/* ============================================================
   32 · CHAPTER COMPOSITIONS (Collections)
   ------------------------------------------------------------
   Was: a text label centred over a video, twice. Now each
   chapter is a real composition — photograph, ledger, status.
   ============================================================ */
.chapter-comp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4.5vw,66px);align-items:center}
.chapter-comp.flip .cc-visual{order:2}
.cc-visual{position:relative}
.cc-visual .crop{aspect-ratio:4/3;border-radius:var(--r-lg);border:1px solid var(--line-soft)}
.cc-seal{
  position:absolute;right:-14px;bottom:-14px;z-index:3;
  width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:rgba(8,8,10,.86);border:1px solid var(--line);backdrop-filter:blur(8px);
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-align:center;
}
.cc-seal b{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:400;color:var(--cream);letter-spacing:.06em}
/* a chapter that has no face yet */
.cc-untitled{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:clamp(32px,4vw,52px);letter-spacing:.42em;
  color:rgba(236,229,214,.26);text-indent:.42em;
}
@media(max-width:900px){
  .chapter-comp{grid-template-columns:1fr;gap:28px}
  .chapter-comp.flip .cc-visual{order:-1}
  .cc-seal{right:12px;bottom:-10px}
}

/* a plate whose image is film rather than a photograph */
.plate-motion{position:absolute;inset:0;border-radius:0;z-index:0}
.plate-motion .tone{
  background:linear-gradient(180deg,rgba(8,8,10,.6),rgba(8,8,10,.35) 44%,var(--ink) 98%),
             linear-gradient(90deg,rgba(8,8,10,.8),transparent 62%);
}

/* the shelf ahead — chapters as slots, most of them still empty.
   Decorative: the same fact is stated in the copy beside it. */
.shelf{display:flex;gap:clamp(10px,1.6vw,18px);justify-content:center;margin-top:clamp(34px,5vw,52px)}
.shelf .sh{
  position:relative;width:clamp(38px,5vw,58px);height:clamp(58px,7.4vw,86px);
  border:1px solid var(--line-soft);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(18,18,24,.5),transparent);
}
.shelf .sh i{font-family:var(--serif);font-style:normal;font-size:15px;color:var(--muted-2)}
.shelf .sh-on{
  border-color:var(--line);
  background:linear-gradient(180deg,rgba(200,169,106,.16),rgba(200,169,106,.03));
  box-shadow:0 0 26px rgba(200,169,106,.16);
}
.shelf .sh-on i{color:var(--gold-light)}
.shelf .sh-next{border-style:dashed;border-color:rgba(236,229,214,.14)}
.shelf .sh-next i{color:var(--muted)}

/* ============================================================
   33 · THE PROOF ROW — what the house can actually stand behind
   ------------------------------------------------------------
   Deliberately NOT testimonials or ratings: none have been
   collected, and inventing them is out of the question. These
   are verifiable facts about how the house works.
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)}
.proof .pf{position:relative;padding-top:22px;border-top:1px solid var(--line-soft);transition:border-color .6s}
.proof .pf:hover{border-color:var(--gold)}
.proof .pf .v{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1;color:var(--cream)}
.proof .pf .v em{font-style:normal;color:var(--gold-light)}
.proof .pf .l{margin-top:12px;font-size:12px;line-height:1.7;color:var(--muted);max-width:26ch}
@media(max-width:900px){.proof{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:460px){.proof{grid-template-columns:1fr}}

/* ============================================================
   33b · CONTACT CARDS
   ------------------------------------------------------------
   These are links, so they behave like links: the whole card is
   the target and each one names its own action rather than
   leaving the reader to guess that a card is clickable.
   ============================================================ */
a.card{display:flex;flex-direction:column}
a.card p{flex:1}
.c-hi{color:var(--gold-light)}
.c-act{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:9px;
}
a.card:hover .c-act{color:var(--gold-light)}
a.card:hover .arrow{transform:translateX(5px)}
/* the closing address */
.c-place{
  font-family:var(--script);font-style:italic;font-size:clamp(24px,3vw,34px);
  color:var(--gold-light);margin-bottom:10px;
}
.c-sub{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   33c · THE MOTION LAYER, EXTENDED
   ------------------------------------------------------------
   Small movements in the house's existing grammar: rules draw,
   plates drift with the scroll, initials arrive in order. Under
   reduced motion the global kill-switch stops every transition;
   the opacity/transform resting states are restored explicitly
   below, because a killed transition never delivers `.in`.
   ============================================================ */
/* plate captions: the rule draws, then the words follow */
.reveal .figcap::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--slow) .35s}
.reveal.in .figcap::before{transform:scaleX(1)}

/* the three initials arrive in generational order, and each
   ignites under the hand — the same gold the mark lights with */
.reveal .lineage-row .ln{opacity:0;transform:translateY(14px);transition:opacity .8s var(--slow),transform .8s var(--slow)}
.reveal.in .lineage-row .ln{opacity:1;transform:none}
.reveal.in .lineage-row .ln:nth-child(2){transition-delay:.14s}
.reveal.in .lineage-row .ln:nth-child(3){transition-delay:.28s}
.lineage-row .ln b{transition:color .5s var(--ease),text-shadow .5s var(--ease)}
.lineage-row .ln:hover b{color:var(--gold-light);text-shadow:0 0 26px rgba(236,212,156,.45)}
@media(prefers-reduced-motion:reduce){.reveal .lineage-row .ln{opacity:1;transform:none}}
html.no-js .reveal .lineage-row .ln{opacity:1;transform:none}

/* glossary entries: a hairline draws under the term at hand */
.gl-item dt{position:relative}
.gl-item dt::after{
  content:'';position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.gl-item:hover dt::after{transform:scaleX(1)}

/* journal plates lean closer while the entry is read */
.entry:hover .entry-plate .crop>img{transform:scale(calc(var(--z,1) * 1.03))}

/* the chapter seal turns slightly under the hand — a stamp, not a sticker */
.cc-seal{transition:transform .7s var(--slow)}
.cc-visual:hover .cc-seal{transform:rotate(7deg)}

/* ============================================================
   34 · QUIET UTILITIES
   ============================================================ */
/* a centred measure for closing statements */
.measure{max-width:60ch;margin-inline:auto}
.center{text-align:center}
.stack-cta{display:flex;gap:16px;flex-wrap:wrap}
.stack-cta.center{justify-content:center}
.mt-l{margin-top:clamp(28px,4vw,44px)}
.mb-l{margin-bottom:clamp(28px,4vw,44px)}
/* a split head: title left, action right, collapsing cleanly */
.head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}