:root{
  --void:#070606; --void-2:#0E0C0B; --cream:#EFEAE0; --gold:#C2A05B; --gold-2:#9A7E44;
  --mut:rgba(239,234,224,.55); --line:rgba(239,234,224,.14);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--void);color:var(--cream);font-size:16px;line-height:1.7;font-weight:300;overflow-x:clip;letter-spacing:.01em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--void)}
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:.005em}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,3rem)}
.ey{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.gold{color:var(--gold)}
.italic{font-style:italic}

/* atmospheric spotlight following cursor */
.glow{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(194,160,91,.10),transparent 70%);mix-blend-mode:screen;transition:opacity .6s}
/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
/* column-gap matters: without it the centred wordmark ran into the first nav
   link on any width where the menu was wider than its column. */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(1.5rem,4vw,3.5rem);padding:1.5rem clamp(1.2rem,4vw,3rem);transition:background .5s,padding .5s,transform .55s cubic-bezier(.5,0,0,1)}
.nav.hidden{transform:translateY(-110%)}
.nav.s{background:rgba(7,6,6,.7);backdrop-filter:blur(14px);padding-block:1rem;border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:1.7rem;letter-spacing:.18em;text-transform:uppercase}
.nav .menu{justify-self:end;display:flex;gap:2.4rem}
.nav .menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;transition:color .3s}
.nav .menu a:hover{color:var(--cream)}
.nav .lft{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
@media(max-width:1139px){.nav{grid-template-columns:1fr auto}.nav .lft{display:none}.nav .menu{display:none}.nav .brand{justify-self:start}}

/* ── Mobile navigation ────────────────────────
   Below 820px the inline menu is replaced by a full-screen overlay so every
   section stays reachable on a phone. */
.navbtn{display:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer}
.navbtn:hover{color:var(--cream)}
.navov{position:fixed;inset:0;z-index:900;background:var(--void);
  display:flex;flex-direction:column;justify-content:center;padding:clamp(1.2rem,4vw,3rem);
  transform:translateY(-100%);transition:transform .75s cubic-bezier(.5,0,0,1);visibility:hidden}
.navov.open{transform:translateY(0);visibility:visible}
.navov-in{display:flex;flex-direction:column;gap:.6rem}
.navov-in a{font-family:var(--serif);font-size:clamp(2.2rem,10vw,3.4rem);
  line-height:1.1;color:var(--cream);font-weight:300}
.navov-in a:hover{color:var(--gold)}
.navov-close{position:absolute;top:clamp(1.2rem,4vw,3rem);right:clamp(1.2rem,4vw,3rem);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  background:none;border:0;min-height:44px;cursor:pointer}
@media(max-width:1139px){.navbtn{display:inline-block;justify-self:end}}
@media(prefers-reduced-motion:reduce){.navov{transition:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;z-index:2}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{filter:brightness(.5) contrast(1.05) saturate(.9)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--void),rgba(7,6,6,.2) 50%,rgba(7,6,6,.55))}
.hero .wrap{padding-bottom:clamp(3rem,8vh,7rem);width:100%}
.hero .ey{margin-bottom:1.6rem;display:block}
.hero h1{font-size:clamp(3.4rem,12vw,11rem);line-height:.9}
.hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero .sub p{max-width:40ch;color:var(--mut)}
.scrolldown{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* btn */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:1rem 2rem;border:1px solid var(--gold);color:var(--cream);transition:background .4s,color .4s}
.btn:hover{background:var(--gold);color:var(--void)}
.btn-min{padding:0;border:none;border-bottom:1px solid var(--gold);padding-bottom:.4rem}
.btn-min:hover{background:none;color:var(--gold)}

/* sections */
.sec{padding-block:clamp(5rem,11vw,10rem);position:relative;z-index:2}
.center{text-align:center}
.eyrow{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-bottom:2rem}
.eyrow::before,.eyrow::after{content:"";width:46px;height:1px;background:var(--gold-2)}
.lead{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.25;max-width:20ch;margin-inline:auto;font-weight:300}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2.5rem}}
.split img{aspect-ratio:4/5;filter:brightness(.72) contrast(1.05)}
.split h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:1.4rem}
.split p{color:var(--mut);margin-bottom:1rem}

/* collection */
.coll{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
@media(max-width:820px){.coll{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.vial{text-align:center}
.vial .ph{aspect-ratio:3/4;overflow:hidden;position:relative;border:1px solid var(--line)}
.vial .ph img{filter:brightness(.62) contrast(1.05);transition:transform 1.2s var(--ease),filter .6s}
.vial:hover .ph img{transform:scale(1.05);filter:brightness(.8)}
/* The filtered <img> creates a stacking context, so the numeral needs its own
   z-index — and a scrim, because gold on a bright photograph is unreadable. */
.vial .ph .no{position:absolute;top:1rem;left:1rem;z-index:2;font-size:11px;letter-spacing:.2em;
  color:var(--gold);padding:.35rem .6rem;background:rgba(7,6,6,.62);backdrop-filter:blur(3px)}
.vial h3{font-size:1.7rem;margin-top:1.4rem}
.vial .note{color:var(--mut);font-size:14px;margin-top:.3rem}
.vial .price{font-family:var(--serif);font-size:1.3rem;color:var(--gold);margin-top:.8rem;font-style:italic}

/* quote */
.quote{text-align:center}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,4.5vw,3.6rem);line-height:1.3;max-width:24ch;margin-inline:auto;font-weight:300}
.quote .who{margin-top:2rem;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* newsletter */
.news{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.subf{display:flex;gap:0;max-width:520px;margin:2.4rem auto 0;border-bottom:1px solid var(--gold)}
.subf input{flex:1;background:none;border:none;color:var(--cream);font-family:var(--sans);font-size:15px;padding:1rem .3rem;letter-spacing:.05em}
.subf input::placeholder{color:var(--mut)}
/* A <button> inherits the operating system's chrome unless every part of it is
   reset. Without this it painted as a light-grey 3D box on the black page. */
.subf button{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;
  font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding:0 .6rem;cursor:pointer;transition:color .3s}
.subf button:hover{color:var(--cream)}
.subnote{font-size:12px;color:var(--mut);margin-top:1.2rem;min-height:1.2em;letter-spacing:.05em}

/* ── Mobile ergonomics ────────────────────────
   WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px interactive targets. */
@media(max-width:900px){
  .foot a,.nav a,.scrolldown{display:inline-block;padding-block:6px}
  .subf input,.subf button{min-height:44px}
}

/* footer */
.foot{padding:clamp(3rem,6vw,5rem) 0 2rem;position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding-bottom:3rem;border-bottom:1px solid var(--line)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}}
.foot p{color:var(--mut);max-width:34ch;margin-top:1rem;font-size:14px}
.foot h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.foot ul{list-style:none}
.foot li{padding:.4rem 0}
.foot li a{font-size:14px;color:var(--mut);transition:color .3s}
.foot li a:hover{color:var(--cream)}
.foot .word{font-family:var(--serif);font-size:clamp(3rem,17vw,15rem);line-height:.9;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding-top:clamp(1.5rem,4vw,3rem);color:var(--cream)}
.foot .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* ── Keyboard focus ───────────────────────────
   A visible focus ring on everything focusable. :focus-visible means a mouse
   click does not draw it, but Tab always does. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
.subf:focus-within{border-bottom-color:var(--cream)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js .rv.in,.no-js .rv{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
.no-js .glow{display:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-PAGE COMPONENTS
   Added in 1.1.0, when the single page became seven. Same tokens, same fonts —
   the house rule here is that type carries the page and photography is rationed.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── interior page header ─────────────────── */
.phead{padding-top:clamp(9rem,18vh,14rem);padding-bottom:clamp(2.5rem,6vw,5rem);position:relative;z-index:2}
.phead .mv{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.phead .mv .n{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.6rem);color:var(--gold);
  line-height:1;font-style:italic;font-weight:300}
.phead .mv .t{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mut)}
.phead h1{font-size:clamp(2.8rem,9vw,7.5rem);line-height:.94;max-width:15ch}
.phead .lede{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2rem,5vw,3.4rem);padding-top:1.8rem;border-top:1px solid var(--line)}
@media(max-width:820px){.phead .lede{grid-template-columns:1fr;gap:1.2rem}}
.phead .lede p{color:var(--mut);max-width:44ch}
.phead .lede .aside{color:var(--mut);font-size:13px;letter-spacing:.05em;justify-self:end;text-align:right}
@media(max-width:820px){.phead .lede .aside{justify-self:start;text-align:left}}

/* ── the editorial index — a list, deliberately not a grid of cards ── */
.index{border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 2rem;align-items:baseline;
  padding-block:clamp(1.6rem,3.4vw,2.6rem);border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease),color .4s}
.index a:hover{padding-left:clamp(.6rem,1.6vw,1.6rem)}
.index .n{font-size:11px;letter-spacing:.2em;color:var(--gold);align-self:center}
.index .nm{font-family:var(--serif);font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;font-weight:300}
.index a:hover .nm{color:var(--gold)}
.index .no{grid-column:2;color:var(--mut);font-size:13.5px;letter-spacing:.06em;margin-top:.4rem}
.index .pr{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--gold);align-self:center}
@media(max-width:600px){
  .index a{grid-template-columns:auto 1fr}
  .index .pr{grid-column:2;justify-self:start;margin-top:.5rem}
}

/* floating plate that follows the cursor over the index */
.plate{position:fixed;top:0;left:0;z-index:250;width:270px;height:340px;pointer-events:none;
  overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  box-shadow:0 40px 90px rgba(0,0,0,.7);border:1px solid var(--line)}
.plate.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.plate img{filter:brightness(.78) contrast(1.05)}
@media(hover:none){.plate{display:none}.index a:hover{padding-left:0}}

/* ── asymmetric split: 7/5, not 50/50 ─────── */
.duo{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.duo.flip{grid-template-columns:5fr 7fr}
@media(max-width:820px){.duo,.duo.flip{grid-template-columns:1fr;gap:2.5rem}}
.duo img{filter:brightness(.72) contrast(1.05)}
.duo h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:1.4rem}
.duo p{color:var(--mut);margin-bottom:1rem;max-width:44ch}

/* ── the note pyramid ─────────────────────── */
.notes{border-top:1px solid var(--line)}
.notes .row{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2.4rem;align-items:baseline;
  padding-block:1.5rem;border-bottom:1px solid var(--line)}
.notes .row .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap}
.notes .row .v{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:300;
  font-style:italic}
@media(max-width:560px){.notes .row{grid-template-columns:1fr;gap:.4rem}}

/* ── numbered process ─────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3.5vw,3rem)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.steps .st{border-top:1px solid var(--gold-2);padding-top:1.4rem}
.steps .st .n{font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--gold);
  display:block;line-height:1;margin-bottom:1rem}
.steps .st h3{font-size:1.4rem;margin-bottom:.7rem}
.steps .st p{color:var(--mut);font-size:14px;max-width:32ch}

/* ── stockists ────────────────────────────── */
.stock{border-top:1px solid var(--line)}
.stock .city{display:grid;grid-template-columns:minmax(9rem,1fr) 2fr;gap:1rem 2.4rem;
  padding-block:clamp(1.4rem,2.6vw,2rem);border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:640px){.stock .city{grid-template-columns:1fr;gap:.6rem}}
.stock .city h3{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300}
.stock .city ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.stock .city li{color:var(--mut);font-size:14.5px}
.stock .city li b{color:var(--cream);font-weight:400}

/* ── full-bleed figure ────────────────────── */
.figure{position:relative;height:clamp(50svh,62vh,78svh);overflow:hidden;z-index:2}
.figure img{height:100%;filter:brightness(.6) contrast(1.05)}
.figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--void),transparent 45%,rgba(7,6,6,.35))}
.figure figcaption{position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vw,3rem);z-index:2;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}

/* ── prose ────────────────────────────────── */
.prose{max-width:58ch}
.prose p{color:var(--mut);margin-bottom:1.2rem}
.prose p.first{font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.45;
  color:var(--cream);font-weight:300;margin-bottom:1.8rem}

/* ── mark the page you are on ─────────────── */
.nav .menu a[aria-current="page"]{color:var(--cream)}
.navov-in a[aria-current="page"]{color:var(--gold)}
.foot li a[aria-current="page"]{color:var(--cream)}