/* ==========================================================================
   MONA BELLE LUX core stylesheet
   Palette + type scale + components. One source of truth.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Warm neutral field, drawn from the mood board */
  --ivory:#F8F4EE;
  --cream:#EFE6D9;
  --oat:#E4DACB;
  --sand:#D5C6B1;
  --taupe:#B3A493;
  --camel:#BC996E;
  --espresso:#4C3A2B;
  --brass:#9B7B48;        /* rules, ornament, hairlines: decorative only */
  --brass-ink:#75592F;    /* the same accent, darkened to clear 4.5:1 on every warm ground */

  /* Black carries the packaging DNA */
  --ink:#141110;
  --ink-70:rgba(20,17,16,.78);
  --ink-52:rgba(20,17,16,.64);
  --ink-38:rgba(20,17,16,.48);
  --line:rgba(20,17,16,.15);
  --line-soft:rgba(20,17,16,.08);
  --paper:var(--ivory);

  /* Type */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --script:"Italianno",cursive;  /* one use only: the founder's signature */
  --sans:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Rhythm */
  --gut:clamp(18px,4vw,52px);
  --wide:1440px;
  --mid:1120px;
  --narrow:760px;
  --sect:clamp(44px,5.4vw,80px);
  --img-gap:clamp(6px,.62vw,9px);  /* the space between any two adjacent photographs */
  --nav-h:70px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.62;
  letter-spacing:.002em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}

::selection{background:var(--ink);color:var(--ivory)}

:focus-visible{outline:1.5px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--ivory);
  padding:12px 20px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}
.wrap--mid{max-width:var(--mid)}
.wrap--narrow{max-width:var(--narrow)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(32px,3.8vw,56px)}
.section--flush-top{padding-top:0}
.bg-cream{background:var(--cream)}
.bg-ink{background:var(--ink);color:var(--ivory)}
.bg-ink a{color:var(--ivory)}
.bg-ink .eyebrow{color:rgba(248,244,238,.72)}
.bg-ink .lede,.bg-ink .body-lg{color:rgba(248,244,238,.86)}
.bg-ink .small{color:rgba(248,244,238,.74)}

.grid{display:grid;gap:var(--gut)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:center}
.split--wide-left{grid-template-columns:1.25fr 1fr}
.split--wide-right{grid-template-columns:1fr 1.25fr}
.split--top{align-items:start}
.center{text-align:center}
.stack-sm>*+*{margin-top:10px}
.stack>*+*{margin-top:18px}
.stack-lg>*+*{margin-top:32px}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-52);margin:0 0 14px;display:block;
}
.eyebrow--brass{color:var(--brass-ink)}
/* Headlines sit in sentence case. Uppercase is reserved for short brand moments
   via .display--caps, and for the small sans labels. */
.display{
  font-family:var(--display);font-weight:500;
  line-height:1.08;letter-spacing:-.008em;
  font-size:clamp(32px,5vw,78px);
}
.display--xl{font-size:clamp(36px,5.8vw,86px);line-height:1.02}
.display--md{font-size:clamp(26px,3.1vw,44px);line-height:1.2}
.display--sm{font-size:clamp(23px,2.4vw,33px);line-height:1.16}
.display--caps{text-transform:uppercase;letter-spacing:.045em;line-height:1.12}
.title{
  font-family:var(--display);font-weight:500;line-height:1.22;
  font-size:clamp(19px,1.8vw,25px);letter-spacing:0;
}
.lede{font-size:clamp(16px,1.05vw,17.5px);line-height:1.7;color:var(--ink-70);font-weight:400;max-width:54ch}
.body-lg{font-size:16.5px;line-height:1.7;color:var(--ink-70)}
.small{font-size:14px;line-height:1.66;color:var(--ink-52)}
.micro{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-52)}
.num{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--ink-52)}
.measure{max-width:62ch}


/* ---------- Plates (image slots) ----------
   Every photograph on this site sits in a .plate. Drop a real file in and the
   art direction does not move. See assets/README for the swap. */
.plate{
  position:relative;overflow:hidden;background:var(--oat);
  --focal:50% 50%;
  max-height:min(72vh,620px);   /* photography is allowed to be large */
}
.plate--free{max-height:none}   /* opt out for the hero and the two statement images */
.plate--tallcap{max-height:min(72vh,620px)}
.plate img{width:100%;height:100%;object-fit:cover;object-position:var(--focal);display:block}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 12%,rgba(255,247,232,.55),transparent 58%);
  mix-blend-mode:screen;opacity:.7}
.plate--empty{
  background:
    radial-gradient(72% 62% at 76% 12%,rgba(255,244,222,.92),transparent 58%),
    radial-gradient(85% 80% at 12% 92%,rgba(96,74,52,.42),transparent 62%),
    linear-gradient(158deg,#CDB99F,#BFA88C 44%,#D9CBB6);
}
.plate--empty.plate--deep{
  background:
    radial-gradient(70% 60% at 72% 16%,rgba(255,238,206,.72),transparent 60%),
    linear-gradient(160deg,#6E5741,#3F3126 62%,#221A14);
}
.plate--empty.plate--pale{
  background:
    radial-gradient(78% 66% at 72% 10%,rgba(255,250,238,.95),transparent 60%),
    radial-gradient(80% 70% at 10% 95%,rgba(120,98,74,.26),transparent 62%),
    linear-gradient(155deg,#E7DCCB,#DCCDB6 62%,#CBB89C);
}
.plate--empty::before{ /* grain + directional light, keeps the field from reading as flat filler */
  content:"";position:absolute;inset:0;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ar-hero{aspect-ratio:21/9}
.ar-wide{aspect-ratio:3/2}
.ar-land{aspect-ratio:4/3}
.ar-sq{aspect-ratio:1/1}
.ar-port{aspect-ratio:4/5}
.ar-tall{aspect-ratio:2/3}
.ar-band{aspect-ratio:5/2;max-height:min(40vh,340px)}
@media(max-width:760px){
  .ar-hero{aspect-ratio:4/5}
  .ar-tall{aspect-ratio:4/5}
}

/* Internal build notes and image slot names stay in the source for the team and are
   never rendered. To read them during development, delete these two rules. */
.plate .slot{display:none !important}
.todo,.todo--i{display:none !important}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--ivory);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:14px 26px;font-size:11.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;border-radius:0;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn:hover{--bg:transparent;--fg:var(--ink)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--ivory)}
.btn--light{--bg:var(--ivory);--fg:var(--ink);--bd:var(--ivory)}
.btn--light:hover{--bg:transparent;--fg:var(--ivory)}
.btn--ghost-light{--bg:transparent;--fg:var(--ivory);--bd:rgba(248,244,238,.5)}
.btn--ghost-light:hover{--bg:var(--ivory);--fg:var(--ink);--bd:var(--ivory)}
.btn--wide{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.34;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link{
  display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--ink-38);
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.link:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.hdr--solid{background:rgba(248,244,238,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.hdr--over{color:var(--ivory)}
.hdr--over.hdr--solid{color:var(--ink)}
.brand{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.3em;
  text-transform:uppercase;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.34em;opacity:.62;margin-top:4px}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__util{display:flex;align-items:center;gap:20px}
.hdr__cta{border:1px solid currentColor;padding:12px 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease)}
.hdr__cta:hover{background:currentColor}
.hdr__cta:hover span{color:var(--paper);mix-blend-mode:normal}
.hdr--over .hdr__cta:hover span{color:var(--ink)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;transition:transform .35s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:79;background:var(--paper);color:var(--ink);
  padding:calc(var(--nav-h) + 32px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-101%);transition:transform .6s var(--ease);
}
.drawer[data-open="true"]{transform:translateY(0)}
.drawer a{display:block;font-family:var(--display);font-size:clamp(26px,7vw,40px);
  text-transform:uppercase;letter-spacing:.02em;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.drawer .drawer__util a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;border:0;padding:8px 0}

@media(max-width:1040px){
  .nav,.hdr__util .hdr__cta,.hdr__util .nav-util{display:none}
  .burger{display:block}
}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--ivory);padding-block:clamp(40px,4.6vw,66px) 26px}
.ftr nav{display:flex;flex-direction:column;align-items:flex-start}
.ftr nav a{display:block;width:100%;padding:5px 0;line-height:1.4}
.ftr a{color:rgba(248,244,238,.78);font-size:14px;transition:color .3s}
.ftr a:hover{color:var(--ivory)}
.ftr__top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(24px,4vw,64px);
  padding-bottom:clamp(28px,3.4vw,44px);border-bottom:1px solid rgba(248,244,238,.14)}
.ftr__brand .brand{font-size:18px;margin-bottom:16px}
.ftr h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,238,.58);margin-bottom:14px;font-weight:400}
.ftr__bot a{font-size:inherit;letter-spacing:inherit}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:20px;
  font-size:11px;letter-spacing:.12em;color:rgba(248,244,238,.55);text-transform:uppercase}
@media(max-width:900px){
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}

/* ---------- Page mast (interior page hero) ---------- */
.mast{padding-top:calc(var(--nav-h) + clamp(34px,4.6vw,64px));padding-bottom:clamp(22px,2.8vw,40px)}
.mast__in{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end}
.mast .lede{margin-top:16px}
@media(max-width:860px){.mast__in{grid-template-columns:1fr}}

/* ---------- Editorial pieces ---------- */
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-52);margin-bottom:9px}
.stat dd{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.3}

.step{border-top:1px solid var(--line);padding-top:20px}
.step__n{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--ink-52);display:block;margin-bottom:12px}
.step h3{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:0;margin-bottom:7px}

.pill{display:inline-block;border:1px solid var(--line);padding:8px 15px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}


/* ---------- Fragrance index ---------- */
.frag{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.2vw,30px);align-items:baseline;
  padding:clamp(14px,1.7vw,22px) 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.frag:first-child{border-top:1px solid var(--line)}
.frag:hover{padding-left:14px}
.frag__n{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.2em;color:var(--brass-ink)}
.frag__t{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,27px);letter-spacing:0;line-height:1.12}
.frag__d{font-size:14.5px;color:var(--ink-52);margin-top:9px;max-width:44ch}
@media(max-width:640px){.frag{grid-template-columns:auto 1fr}.frag__meta{grid-column:2}}

/* ---------- Forms ---------- */
.form{display:grid;gap:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.f-row--3{grid-template-columns:2fr 1fr 1fr}
.field label,.legend{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-52);margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 0;font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ink);
  border-radius:0;transition:border-color .35s var(--ease);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-52) 50%),
  linear-gradient(135deg,var(--ink-52) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px;cursor:pointer}
.field textarea{min-height:118px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px}
.field .hint{font-size:13px;color:var(--ink-52);margin-top:8px}
.field .err{font-size:13px;color:#8C2F1E;margin-top:8px;display:none}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-bottom-color:#8C2F1E}
.field[data-invalid="true"] .err{display:block}
fieldset{border:0;padding:0;margin:0}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:block;border:1px solid var(--line);padding:12px 18px;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:all .3s var(--ease)}
.choice input:checked + span{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.choice input:focus-visible + span{outline:1.5px solid var(--brass);outline-offset:3px}
@media(max-width:700px){.f-row,.f-row--3{grid-template-columns:1fr}}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;padding:19px 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.45vw,19px);line-height:1.36}
.acc__ic{flex:0 0 auto;width:11px;height:11px;position:relative}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:var(--ink-52);transition:transform .4s var(--ease)}
.acc__ic::before{left:0;right:0;top:5px;height:1px}
.acc__ic::after{top:0;bottom:0;left:5px;width:1px}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:rotate(90deg)}
.acc__panel{overflow:hidden;height:0;transition:height .45s var(--ease)}
.acc__panel > div{padding:0 0 22px;max-width:64ch;color:var(--ink-70);font-size:16px;line-height:1.7}


/* ---------- Account / orders ---------- */
.acct{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.acct__nav a{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink-52);transition:color .3s}
.acct__nav a:hover,.acct__nav a[aria-current="page"]{color:var(--ink)}
.rec{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr auto;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.rec:first-child{border-top:1px solid var(--line)}
.rec dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-52);margin-bottom:6px}
.rec dd{margin:0;font-size:15.5px}
.rec dd.mono{font-family:var(--display);font-weight:500;font-size:19px}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);padding:6px 11px;color:var(--ink-70)}
.tag--live{border-color:var(--brass);color:var(--brass)}
/* Information is organised with a rule and space, not a box. */
.card{border:0;border-top:1px solid var(--line);padding:18px 0 0}
@media(max-width:860px){
  .acct{grid-template-columns:1fr}
  .acct__nav{display:flex;flex-wrap:wrap;gap:20px}
  .acct__nav a{border:0;padding:0}
  .rec{grid-template-columns:1fr 1fr;gap:16px}
}

/* ---------- Prose (policy pages) ---------- */
.prose{max-width:68ch}
.prose h2{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.8vw,24px);
  letter-spacing:0;margin:36px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-52);margin:28px 0 10px}
.prose p,.prose li{color:var(--ink-70);font-size:16px;line-height:1.72}
.prose ul{margin:0 0 1.15em;padding-left:20px;list-style:none}
.prose li{position:relative;margin-bottom:9px}
.prose li::before{content:"";position:absolute;left:-20px;top:12px;width:8px;height:1px;background:var(--brass)}

/* ---------- Motion ---------- */
[data-rise]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rise].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-rise]{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr}
  .g-2,.g-3{grid-template-columns:1fr}
  .split--keep{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .g-4{grid-template-columns:1fr}
}

/* Reference tables and code blocks */
.tbl{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:15px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-52);font-weight:400;padding:0 18px 12px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-70);
  vertical-align:top;line-height:1.55}
.tbl td:first-child{color:var(--ink);width:38%}
.prose pre{background:var(--cream);border-left:1px solid var(--brass);padding:20px 22px;
  margin:0 0 1.4em;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.7;color:var(--ink-70);white-space:pre}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--cream);padding:2px 5px}
.prose pre code{background:none;padding:0}
@media(max-width:640px){.tbl td:first-child{width:auto}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl thead{display:none}.tbl td{padding:6px 0;border:0}
  .tbl tr{padding:14px 0;border-bottom:1px solid var(--line-soft);display:block}}

strong,b{font-weight:500}
.prose strong{color:var(--ink)}

/* Prices and quantities read clearer with lining figures than with the serif's
   default old-style numerals. */
.display,.title,.stat dd,.tier__p,.summary dd,.rec dd.mono,.qty input,.acc__btn,.prose h2{
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 0}

/* ---------- Benefit band: what the product does, stated early and compactly ---------- */
.bene{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.bene > div{border-top:1px solid var(--line);padding-top:14px}
.bene h3{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:0;margin-bottom:6px}
.bene p{font-size:14px;line-height:1.6;color:var(--ink-70)}
.bene--light > div{border-color:rgba(248,244,238,.22)}
.bene--light p{color:rgba(248,244,238,.76)}
@media(max-width:860px){.bene{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.bene{grid-template-columns:1fr}}

/* ---------- Transformation: rough skin, polish, rinse, soft skin ---------- */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,26px)}
.flow span{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.5vw,20px);line-height:1.28}
.flow i{flex:0 0 auto;width:26px;height:1px;background:var(--ink-38)}
.flow--light i{background:var(--camel)}

/* ---------- Product card: one now, a grid when the catalog grows ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(20px,2.6vw,36px)}
.pcard{display:block;color:inherit}
.pcard .plate{max-height:none;transition:opacity .4s var(--ease)}
.pcard:hover .plate{opacity:.9}
.pcard__meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pcard h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.22}
.pcard .price{font-family:var(--display);font-weight:500;font-size:19px;white-space:nowrap}
.pcard .sub{font-size:13.5px;color:var(--ink-52);margin-top:5px}

/* ---------- Compact spec row ---------- */
.specs{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.specs span{position:relative;padding-left:20px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-52);line-height:2}
.specs span::before{content:"";position:absolute;left:0;top:50%;width:9px;height:1px;
  background:var(--line)}
.specs span:first-child{padding-left:0}
.specs span:first-child::before{display:none}

/* ---------- Founder story ---------- */
.story p{font-size:17px;line-height:1.78;color:var(--ink-70);margin-bottom:1.1em}
.story p:last-child{margin-bottom:0}
.sig{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-52)}
.sig::before{content:"";width:26px;height:1px;background:var(--brass);flex:0 0 auto}
.pull{margin:16px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2vw,26px);line-height:1.38;letter-spacing:0;color:var(--ink)}
.bg-ink .story p{color:rgba(248,244,238,.82)}

/* Real photography: no tonal wash over it, and figures carry no default margin */
.plate--photo{margin:0}
.plate--photo::after{display:none}


/* --- Contrast fixes found in audit --- */
/* Buttons inside dark sections were inheriting the section's link color. */
.bg-ink a.btn{color:var(--fg)}
/* The darkened accent is for light grounds; on ink it flips to camel. */
.bg-ink .step__n,.bg-ink .num,.bg-ink .frag__n{color:var(--camel)}
/* Navigation sitting over photography gets its own guarantee, not the photo's. */
.hdr--over:not(.hdr--solid){background:linear-gradient(180deg,rgba(20,17,16,.34),rgba(20,17,16,0))}


/* ---------- Ordering gate: purchasing belongs to approved retailers ---------- */
.gate{border:0;border-top:1px solid var(--ink);padding:20px 0 0}
.gate__prices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px}
.gate__prices dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-52);margin-bottom:6px}
.gate__prices dd{margin:0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1}
.gate .btn{flex:1;min-width:180px;justify-content:center}
@media(max-width:420px){.gate__prices{grid-template-columns:1fr}}

/* ---------- Contact: the email is the primary action ---------- */
.contactcard{border:0;padding:0}
.contactcard__email{display:inline-block;font-family:var(--display);font-weight:500;
  font-size:clamp(21px,2.6vw,32px);line-height:1.2;letter-spacing:-.005em;word-break:break-word;
  padding-bottom:4px;border-bottom:1px solid var(--ink-38);transition:border-color .35s var(--ease)}
.contactcard__email:hover{border-color:var(--ink)}

/* ---------- Enquiry form ---------- */
.fsec{border-top:1px solid var(--line);padding-top:20px;margin-top:30px}
.fsec:first-of-type{margin-top:0}
.fsec__h{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.fsec__n{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  color:var(--ink-52)}
.fsec__t{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.2}
.formnote{border-top:1px solid var(--line);padding-top:14px;font-size:13.5px;line-height:1.6;
  color:var(--ink-52);margin-top:22px;max-width:56ch}
.sent{display:none;border-top:1px solid var(--ink);padding-top:26px}
.sent h2{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.2vw,28px);
  margin-bottom:10px}
.sent p{color:var(--ink-70);max-width:56ch}
[data-form-state="sent"] .enquiry{display:none}
[data-form-state="sent"] .sent{display:block}
.copybox{width:100%;min-height:150px;margin-top:16px;padding:14px;border:1px solid var(--line);
  background:var(--ivory);font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-70);
  border-radius:0;resize:vertical}

/* ==========================================================================
   Editorial layout. Asymmetry, scale contrast and quiet captions, so the page
   reads as a spread rather than a stack of equal components.
   ========================================================================== */

/* Uneven columns. The narrow side carries the words, the wide side the picture. */
.split--7030{grid-template-columns:1.55fr 1fr}
.split--3070{grid-template-columns:1fr 1.55fr}
.split--6040{grid-template-columns:1.28fr 1fr}
.split--4060{grid-template-columns:1fr 1.28fr}
@media(max-width:860px){
  .split--7030,.split--3070,.split--6040,.split--4060{grid-template-columns:1fr}
}

/* Photography at full measure, with room to breathe above and below. */
.full{position:relative;margin-block:0}
/* Height is set directly rather than by ratio, so the picture always fills the
   measure and the crop does the adapting. */
.full .plate{aspect-ratio:auto;width:100%;height:clamp(340px,46vw,680px);max-height:none}
.full--edge{padding-inline:0}
.full__cap{display:flex;justify-content:space-between;gap:24px;margin-top:14px}
@media(max-width:640px){.full__cap{flex-direction:column;gap:6px}}

/* A caption is small, set in the sans, and never competes with the picture. */
.cap{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-52)}
.cap--r{text-align:right}

/* An overlaid line on a full-bleed image, for a closing moment. */
.overlay{position:relative;color:var(--ivory)}
.overlay .plate{aspect-ratio:auto;width:100%;height:clamp(420px,50vw,720px);max-height:none}
.overlay__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,16,.26) 0%,rgba(20,17,16,.04) 22%,
    rgba(20,17,16,.52) 50%,rgba(20,17,16,.92) 100%)}
.overlay__in{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3.4vw,52px) 0}


/* An indented column, so text does not always begin at the same left edge. */
.inset{padding-left:clamp(0px,6vw,88px)}
@media(max-width:860px){.inset{padding-left:0}}


/* ==========================================================================
   Editorial pairing. A photograph running to the edge of the page against a
   panel of quiet copy, and a flush band of images between them. No gutters,
   no cards: the pictures butt against the type and against each other.
   ========================================================================== */
.pair{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;background:var(--cream)}
.pair__img .plate{width:100%;height:100%;aspect-ratio:auto;max-height:none;
  min-height:clamp(280px,33vw,450px)}
.pair__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,5vw,84px) clamp(24px,5vw,80px)}
.pair__copy .lede{max-width:34ch}
.pair--rev{grid-template-columns:1fr 1.2fr}
.pair--rev .pair__copy{order:-1}
@media(max-width:860px){
  .pair,.pair--rev{grid-template-columns:1fr}
  .pair--rev .pair__copy{order:0}
  .pair__img .plate{min-height:clamp(260px,58vw,420px)}
}

/* Three frames, unequal widths, almost touching. */
.band{display:grid;grid-template-columns:1.05fr .95fr 1.25fr;gap:var(--img-gap)}
.band .plate{width:100%;height:clamp(230px,25vw,350px);aspect-ratio:auto;max-height:none}
@media(max-width:760px){
  .band{grid-template-columns:1fr 1fr}
  .band > *:last-child{grid-column:1 / -1}
  .band .plate{height:clamp(180px,42vw,260px)}
}

/* A link that points somewhere. */
.link--arrow::after{content:" \2192";margin-left:8px}

/* ==========================================================================
   Three columns divided by a hairline: an image, a short accent rule, a label
   and one line of explanation. Used where three things need equal weight.
   ========================================================================== */
/* Every column keeps identical padding so the images and labels line up; the
   container pulls back by the same amount so the outer edges stay flush. */
.cols{display:grid;grid-template-columns:repeat(3,1fr);
  margin-inline:calc(-1 * clamp(18px,2.4vw,38px))}
.cols > div{padding-inline:clamp(18px,2.4vw,38px)}
.cols > div + div{border-left:1px solid var(--line)}
.cols .plate{max-height:none}
.cols__t{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.7;color:var(--ink)}
.cols p{font-size:15px;line-height:1.66;color:var(--ink-70);margin-top:10px;max-width:30ch}
@media(max-width:760px){
  .cols{grid-template-columns:1fr;gap:clamp(26px,6vw,40px);margin-inline:0}
  .cols > div{padding-inline:0}
  .cols > div + div{border-left:0}
}

/* A short brass rule, the one place the accent still earns its keep. */
.rule-s{width:52px;height:1px;background:var(--brass);margin:18px 0 12px}
.center .rule-s{margin-inline:auto}

/* An italic serif line, used only as a subtitle beneath a caps heading. */
.sub-i{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(16px,1.4vw,19px);color:var(--brass-ink);margin-top:6px}

/* The stockist band: heading one side, the offer and the actions the other. */
.ctab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
.ctab__r{border-left:1px solid rgba(248,244,238,.22);padding-left:clamp(26px,4vw,64px)}
@media(max-width:860px){
  .ctab{grid-template-columns:1fr}
  .ctab__r{border-left:0;padding-left:0}
}

/* ==========================================================================
   Hero card. The copy sits on its own ground rather than on the photograph,
   so the picture keeps its full range and the type never fights the image.
   ========================================================================== */
.herocard{background:var(--ivory);color:var(--ink);
  padding:clamp(26px,3.4vw,50px) clamp(24px,3vw,46px);
  width:min(430px,46vw);box-shadow:0 24px 60px rgba(20,17,16,.18)}
.herocard .eyebrow{margin-bottom:0}
.herocard__rule{width:100%;height:1px;background:var(--line);margin:16px 0 22px}
.herocard .lede{color:var(--ink-70);margin-top:14px;max-width:30ch}
.herocard .link{margin-top:24px}
@media(max-width:860px){
  .herocard{width:100%;max-width:none;box-shadow:none}
}

/* A quiet link on a photograph. */
.hero .link:hover{border-color:var(--ivory);color:var(--ivory)}

/* ==========================================================================
   The formula block: a column of copy beside three numbered ingredients.
   ========================================================================== */
.formula{display:grid;grid-template-columns:1.12fr 2fr;gap:clamp(28px,4.4vw,72px);align-items:start}
@media(max-width:900px){.formula{grid-template-columns:1fr;gap:clamp(26px,5vw,44px)}}

/* The rule from the label, heart and all, used once per page at most. */
.rule-heart{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--brass-ink)}
.rule-heart::before,.rule-heart::after{content:"";height:1px;width:60px;background:currentColor}
.rule-heart span{font-size:11px;line-height:1}

.cols__n{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.22em;
  color:var(--brass-ink);display:block;margin-top:18px}
.cols__n + .rule-s{margin-top:8px}

/* The origin line, with the small leaf from the label. */
.origin{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,238,.72)}
.origin__leaf{display:inline-flex;color:var(--camel)}

/* ==========================================================================
   A hero built as a pair: the photograph on one side, the copy on its own
   ground beside it. The picture is never darkened and the type never sits
   on skin.
   ========================================================================== */
.heropair{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
  background:var(--cream);margin-top:var(--nav-h)}
.heropair__img .plate{width:100%;height:100%;aspect-ratio:auto;max-height:none;
  min-height:clamp(360px,44vw,620px)}
.heropair__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,5vw,86px) clamp(26px,5vw,78px)}
.heropair__copy .lede{max-width:32ch;margin-top:16px}
.heropair .btn-row{margin-top:28px}
@media(max-width:900px){
  .heropair{grid-template-columns:1fr}
  .heropair__img .plate{min-height:clamp(300px,74vw,460px)}
  .heropair__copy{padding:clamp(28px,7vw,44px) var(--gut) clamp(34px,8vw,48px)}
}

/* ---------- Our Story ---------- */
.sig-script{font-family:var(--script);font-size:clamp(34px,3.4vw,46px);line-height:.78;
  color:var(--ink);margin:26px 0 0}
.sig-role{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-52);margin-top:10px}

/* Four values, divided by hairlines, each with a small drawn mark. */
.values{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.values > div{padding:0 clamp(16px,2.2vw,34px)}
.values > div + div{border-left:1px solid var(--line)}
.values__ic{color:var(--brass-ink);display:flex;justify-content:center;margin-bottom:16px}
.values__t{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.7;color:var(--ink)}
.values p{font-size:14.5px;line-height:1.7;color:var(--ink-70);margin-top:10px}
@media(max-width:860px){
  .values{grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,40px) 0}
  .values > div + div{border-left:0}
  .values > div:nth-child(2n){border-left:1px solid var(--line)}
}
@media(max-width:520px){
  .values{grid-template-columns:1fr}
  .values > div:nth-child(n){border-left:0;padding:0}
}

/* A promise card sitting on a photograph. */
.promise{position:relative}
.promise .plate{width:100%;aspect-ratio:auto;height:clamp(380px,42vw,560px);max-height:none}
.promise__in{position:absolute;inset:0;display:flex;align-items:center}
.promise__card{background:var(--ivory);padding:clamp(28px,3.6vw,52px);width:min(430px,46vw)}
@media(max-width:760px){
  .promise .plate{height:clamp(280px,60vw,380px)}
  .promise__in{position:static}
  .promise__card{width:100%;padding:clamp(26px,7vw,40px) var(--gut)}
}

/* The mission, set centred between two rules. */
.mission{text-align:center}
.mission__eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;
  color:var(--ink-52)}
.mission__eyebrow::before,.mission__eyebrow::after{content:"";height:1px;width:clamp(30px,5vw,70px);
  background:var(--line)}

/* ---------- Section head: title left, the supporting line and link right ---------- */
.sechead{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.sechead__r{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,48px)}
.sechead__r .lede{max-width:34ch}
@media(max-width:860px){
  .sechead{grid-template-columns:1fr;gap:clamp(20px,4vw,28px)}
  .sechead__r{border-left:0;padding-left:0}
}

.eyebrow--brass{color:var(--brass-ink)}
.link--brass{color:var(--brass-ink);border-color:var(--brass)}
.link--brass:hover{color:var(--ink);border-color:var(--ink)}

/* The stockist band carries a photograph that fades into the ink. */
.ctab-wrap{position:relative;overflow:hidden}
.ctab-wrap > .wrap{position:relative;z-index:2}
.ctab__art{position:absolute;right:0;top:0;bottom:0;width:38%;z-index:1}
.ctab__art .plate{width:100%;height:100%;aspect-ratio:auto;max-height:none}
.ctab__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(20,17,16,.96) 34%,rgba(20,17,16,.62) 78%,
    rgba(20,17,16,.46) 100%)}
.ctab__rule{width:56px;height:1px;background:var(--brass);margin:20px 0 0}
@media(max-width:860px){.ctab__art{display:none}}

/* ---------- How to use: five steps, numbered, divided by hairlines ---------- */
.steps5{display:grid;grid-template-columns:repeat(5,1fr);margin-inline:calc(-1 * clamp(12px,1.6vw,26px))}
.steps5 > div{padding-inline:clamp(12px,1.6vw,26px);text-align:center}
.steps5 > div + div{border-left:1px solid var(--line)}
.steps5__n{width:30px;height:30px;border-radius:50%;background:var(--brass-ink);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  font-family:var(--sans);font-size:12px;font-weight:500}
.steps5__t{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.65;color:var(--ink);min-height:2.6em}
.steps5 .plate{margin-top:14px;aspect-ratio:4/5}
.steps5 p{font-size:14.5px;line-height:1.65;color:var(--ink-70);margin-top:14px}
@media(max-width:900px){
  .steps5{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,36px) 0;margin-inline:0}
  .steps5 > div{padding-inline:clamp(10px,3vw,20px)}
  .steps5 > div + div{border-left:0}
  .steps5 > div:nth-child(2n){border-left:1px solid var(--line)}
  .steps5__t{min-height:0}
}
@media(max-width:560px){
  .steps5{grid-template-columns:1fr}
  .steps5 > div:nth-child(n){border-left:0;padding-inline:0}
}

/* ---------- Scent trio: a mark, a name, three words ---------- */
.scent{text-align:center}
.scent__ic{width:64px;height:64px;border-radius:50%;background:var(--oat);color:var(--brass-ink);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.scent__n{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink)}
.scent__w{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-52);margin-top:8px}
.scent .plate{margin-top:18px}

/* Four marks in a row beneath. */
.marks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(28px,3.6vw,48px);
  border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,34px)}
.marks > div{display:flex;align-items:center;justify-content:center;gap:12px;
  padding-inline:clamp(10px,1.6vw,24px)}
.marks > div + div{border-left:1px solid var(--line)}
.marks span{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.6;color:var(--ink)}
.marks svg{color:var(--brass-ink);flex:0 0 auto}
@media(max-width:860px){
  .marks{grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,28px) 0}
  .marks > div + div{border-left:0}
  .marks > div:nth-child(2n){border-left:1px solid var(--line)}
}
@media(max-width:480px){
  .marks{grid-template-columns:1fr}
  .marks > div:nth-child(n){border-left:0;justify-content:flex-start}
}

/* A portrait sits taller than a landscape frame, so the crop stays gentle. */
/* A head-and-shoulders portrait is set inside the panel rather than bled to the
   edge, so the face reads at a natural size instead of filling the column. */
.heropair--portrait{grid-template-columns:.92fr 1.08fr;align-items:center}
.heropair--portrait .heropair__img{display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,4vw,72px) clamp(24px,3.4vw,56px)}
/* The founder photograph runs uncropped, so the frame matches the file's own
   3:4 and is kept to a modest width. It sits in a column with its own caption
   and note, against a hairline, so the side reads as composed rather than empty. */
.heropair--portrait .heropair__img{justify-content:flex-end}
.founder{width:min(440px,100%);border-right:0}
.founder .plate{min-height:0;width:100%;max-width:none;aspect-ratio:3/4;height:auto}
.founder__cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-52)}
.founder__note{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.35vw,18px);
  line-height:1.5;color:var(--ink-70);margin-top:22px}
.heropair--portrait .heropair__copy{border-left:1px solid var(--line)}
@media(max-width:900px){
  .heropair--portrait .heropair__copy{border-left:0}
  .founder{width:min(300px,100%)}
}

/* Three plain facts under the signature, set on rules. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line)}
.facts > div{padding:16px 0 0}
.facts > div + div{border-left:1px solid var(--line);padding-left:clamp(14px,1.8vw,26px)}
.facts b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.7vw,22px);
  line-height:1.2;color:var(--ink)}
.facts span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-52);margin-top:8px}
@media(max-width:640px){
  .facts{grid-template-columns:1fr}
  .facts > div + div{border-left:0;border-top:1px solid var(--line);padding-left:0;margin-top:14px}
}
@media(max-width:900px){
  .heropair--portrait{grid-template-columns:1fr}
  .heropair--portrait .heropair__img{padding:clamp(26px,7vw,44px) var(--gut) 0}
  .founder{width:min(280px,100%)}
}

/* A pair whose picture side is a grid of four rather than one frame. */
/* When the picture side is a grid of four it gets a larger share of the row. */
.pair--media{grid-template-columns:.8fr 1.4fr}
/* The copy column is narrower here, so the heading is set a size down to keep
   its intended two-line break. */
.pair--media .display--md{font-size:clamp(23px,2.4vw,34px)}
.pair--media .pair__copy{padding-inline:clamp(24px,3.4vw,56px)}
.pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--img-gap);height:100%;
  min-height:clamp(340px,46vw,660px)}
.pair__grid .plate{width:100%;height:100%;aspect-ratio:auto;max-height:none}
@media(max-width:860px){
  .pair--media{grid-template-columns:1fr}
  .pair__grid{min-height:clamp(280px,72vw,460px)}
}

/* The gap between two photographs is the same whether they sit side by side
   inside a block or stack as two full-width blocks. */
.heropair + .pair,
.heropair + .band,
.pair + .band,
.band + .pair,
.pair + .pair,
.band + .band,
.pair + .promise,
.band + .promise,
.promise + .pair,
.section + .pair,
.pair + .section.bg-cream,
.section + .heropair,
.band + .howto,
.howto + .band,
.full + .band,
.band + .full{margin-top:var(--img-gap)}

/* ==========================================================================
   Product page: photography leads, copy follows.
   ========================================================================== */

/* A quiet title block beneath the opening photograph. */
.phero{text-align:center;padding-block:clamp(16px,1.8vw,26px) 0}
.phero .display{margin-top:6px}
.phero__line{font-family:var(--sans);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-70);margin-top:16px}
.phero__meta{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-52);margin-top:10px}

/* The three scents: image, name, two words. */
.scents{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--img-gap)}
.scents__n{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.9vw,25px);
  line-height:1.2;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.scents__w{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-52);margin:7px 0 0}
.scents .plate{margin-bottom:14px}
@media(max-width:760px){.scents{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}}

/* What's inside: the ingredient names carry the section. */
.ingr{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--img-gap)}
.ingr__n{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.3vw,32px);
  line-height:1.22;margin:0;padding-top:16px;border-top:1px solid var(--line);
  min-height:calc(2.44em + 16px)}
.ingr__d{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-52);margin:9px 0 0}
.ingr .plate{margin-bottom:16px}
@media(max-width:760px){.ingr{grid-template-columns:1fr;gap:clamp(26px,5vw,36px)}}

/* How to use: one image, three steps beside it. */
.howto{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;background:var(--cream)}
.howto__img .plate{width:100%;height:100%;aspect-ratio:auto;max-height:none;
  min-height:clamp(300px,34vw,470px)}
.howto__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,4.4vw,76px) clamp(26px,4vw,64px)}
.howto__step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--line)}
.howto__step:last-child{border-bottom:1px solid var(--line)}
.howto__step b{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  color:var(--brass-ink)}
.howto__step span{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,22px);
  line-height:1.25}
@media(max-width:860px){
  .howto{grid-template-columns:1fr}
  .howto__img .plate{min-height:clamp(260px,62vw,420px)}
  .howto__copy{padding:clamp(28px,7vw,44px) var(--gut)}
}

/* Product details: description and the three accordions, nothing else. */
.details{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:860px){.details{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}}

/* The product page opens as a wide banner, not a full screen, and its sections
   sit closer together than the rest of the site. */
/* The opening frame is shown whole rather than cropped: the plate keeps the
   photograph's own proportion and is held to a width that keeps it a banner. */
.full--banner{padding-inline:var(--gut)}
.full--banner .plate{height:auto;aspect-ratio:3/2;max-height:none;
  width:min(880px,100%);margin-inline:auto}
main .full:not(.full--banner) .plate{height:min(54vh, clamp(280px,33vw,480px))}
.section--tight--pdp{padding-block:clamp(22px,2.6vw,38px)}

/* ==========================================================================
   Surface texture. Three very quiet layers so large flat areas read as paper
   and plaster rather than as flat colour. Nothing here is strong enough to
   change a measured contrast ratio; all of it is drawn, not photographed.
   ========================================================================== */

/* 1. A fine grain over the whole page, like the tooth of uncoated stock. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* 2. A soft bloom across cream sections, so the light appears to fall across
      them the way it falls across the photographs. */
.bg-cream{position:relative;isolation:isolate}
.bg-cream::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(90% 80% at 100% 100%, rgba(188,153,110,.10), transparent 66%)}

/* 3. Dark bands get their own grain, a touch stronger, since flat ink shows
      banding on wide screens. */
.bg-ink{position:relative;isolation:isolate}
.bg-ink::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}


/* ==========================================================================
   Water light. A caustic pattern, drawn rather than photographed, laid very
   faintly over the pale surfaces so they read like plaster with light moving
   across it. This is the theme of the reference imagery, not the imagery.
   ========================================================================== */
.bg-cream::after,
.caustics::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.62;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0.15 1 0.15 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:1250px 1250px}

.caustics{position:relative;isolation:isolate}

/* On ink the same pattern reads as reflected light, so it runs a little
   stronger and warmer. */
.bg-ink::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0.15 1 0.15 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:1600px 1600px}

/* ==========================================================================
   Ambient depth. Layers that sit behind everything, so the pale ground is
   never a flat colour anywhere on the site.
   ========================================================================== */

/* The page itself holds the colour; the body sits on top of it transparently
   so a fixed light layer can live between the two. */
html{background:var(--ivory)}
body{background:transparent}

/* Water light across the whole page, weaker than on the cream panels, so the
   ivory ground shares the same character without repeating it. */
html::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0.15 1 0.15 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:1500px 1500px}

/* A slow warm falloff, as if the light in the room comes from above. */
html::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% -10%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(70% 60% at 100% 108%, rgba(188,153,110,.08), transparent 72%)}

/* A fine weave on the dark bands, the scale of linen, so the ink has a fabric
   rather than a screen surface. */
.bg-ink::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='%23ffffff' opacity='0.5'/%3E%3Cpath d='M0 0v6h1V0zM3 0v6h1V0z' fill='%23ffffff' opacity='0.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:6px 6px, 180px 180px;
  opacity:.05}

/* Photographs are seated rather than pasted: a hairline of their own edge and
   the faintest lift off the page. */
.plate{box-shadow:0 1px 2px rgba(20,17,16,.05), 0 0 0 1px rgba(20,17,16,.035)}
.plate--free{box-shadow:none}

/* Section changes get an edge, so one surface reads as sitting on another. */
.bg-cream,.bg-ink{box-shadow:inset 0 1px 0 rgba(20,17,16,.05)}

/* Product information set as a two-column table, so it sits level with the
   copy beside it instead of running twice its height. */
.spec2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,40px);
  margin-top:clamp(14px,1.8vw,22px)}
.spec2 .stat{padding:14px 0;border-top:1px solid var(--line)}
@media(max-width:640px){.spec2{grid-template-columns:1fr}}

/* The closing block on the stockist page: two ways in, and the address. */
.close{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
.close__r{border-left:1px solid rgba(248,244,238,.22);padding-left:clamp(26px,4vw,64px)}
@media(max-width:860px){
  .close{grid-template-columns:1fr}
  .close__r{border-left:0;padding-left:0}
}

/* Who the brand is made for: four kinds of shop, set on rules. */
.forwho{display:grid;grid-template-columns:repeat(4,1fr);
  margin-inline:calc(-1 * clamp(14px,1.8vw,28px))}
.forwho > div{padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,28px) 0;
  border-top:1px solid var(--line)}
.forwho > div + div{border-left:1px solid var(--line)}
.forwho b{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,1.8vw,24px);line-height:1.2;color:var(--ink)}
.forwho p{font-size:14.5px;line-height:1.65;color:var(--ink-70);margin-top:10px;max-width:26ch}
@media(max-width:860px){
  .forwho{grid-template-columns:1fr 1fr;margin-inline:0}
  .forwho > div{padding-inline:0 clamp(14px,3vw,26px)}
  .forwho > div + div{border-left:0}
  .forwho > div:nth-child(2n){border-left:1px solid var(--line);padding-left:clamp(14px,3vw,26px)}
}
@media(max-width:520px){
  .forwho{grid-template-columns:1fr}
  .forwho > div:nth-child(n){border-left:0;padding-left:0}
}

/* A line of Mona's, set large and alone. */
.saying{text-align:center}
.saying__q{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.6vw,34px);
  line-height:1.32;max-width:26ch;margin:0 auto;color:var(--ink)}
.saying .sig-role{margin-top:20px}

/* Where two content sections meet on the same ground, a hairline marks the
   join. Sections that carry their own colour already have an edge. */
.section + .section:not(.bg-cream):not(.bg-ink){border-top:1px solid var(--line)}

/* A short line beneath each numbered step. */
.howto__step em{grid-column:2;display:block;font-family:var(--sans);font-style:normal;
  font-size:14.5px;line-height:1.6;color:var(--ink-70);margin-top:6px}

/* A taller frame for the standing image on the stockist page, so a portrait
   subject is not cut by a shallow band. */
main .full.full--tall .plate{height:min(70vh, clamp(360px,48vw,700px))}


.route[hidden]{display:none}