/* =====================================================================
   SELF-HOSTED FONTS (latin subset, variable)
   Served from our own origin: no third-party font requests, no
   font-swap layout shift, and no visitor IP sent to Google.
   ===================================================================== */
/* UNIFIED TYPE SYSTEM (2026-07-29): one voice across landing + commerce.
   Display serif = Cormorant Garamond, body sans = Inter, brand caps = Cinzel —
   the same three families as styles-v2.css. Bodoni Moda / Manrope retired. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('assets/fonts/cinzel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #070a08;
  --ink-soft: #101611;
  --forest: #0b2118;
  --forest-light: #16372a;
  --paper: #f5f0e7;
  --paper-deep: #e9dfcf;
  --paper-light: #fcf9f3;
  --stone: #cbbda8;
  --gold: #aa8238;
  --gold-light: #d7bb77;
  --gold-text: #715419;
  --oxblood: #5b2028;
  --text: #151712;
  --muted: #625f57;
  --line: rgba(21, 23, 18, .17);
  --dark-line: rgba(244, 239, 229, .17);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-brand: Cinzel, "Trajan Pro", Georgia, serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --max: 1400px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.drawer-open,
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: -70px;
  left: 16px;
  z-index: 200;
  padding: 11px 15px;
  color: var(--paper);
  background: var(--ink);
}
.skip-link:focus { top: 16px; }

.preview-bar {
  position: relative;
  z-index: 60;
  display: flex;
  justify-content: center;
  gap: 34px;
  min-height: 31px;
  padding: 8px 22px;
  color: rgba(244, 239, 229, .64);
  background: linear-gradient(90deg, var(--ink), #101a14 60%, var(--ink));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}
.preview-bar p { margin: 0; }
.preview-bar p span { margin-right: 8px; color: var(--gold-light); }
.preview-bar button {
  padding: 0;
  color: rgba(244, 239, 229, .78);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.commerce-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  background: rgba(244, 239, 229, .95);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.commerce-brand {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  justify-self: start;
  text-decoration: none;
}
.commerce-brand img {
  width: 33px;
  height: 53px;
  object-fit: contain;
  background: #000;
  border: 1px solid rgba(170, 130, 56, .42);
}
.commerce-brand span { display: grid; line-height: 1.18; }
.commerce-brand strong {
  font-family: var(--font-brand);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.commerce-brand small {
  color: var(--gold-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.commerce-nav { display: flex; gap: 32px; }
.commerce-nav a {
  position: relative;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.commerce-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.commerce-nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-self: end;
}
.header-access,
.interest-button {
  padding: 11px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.interest-button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  margin-left: 7px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 50%;
}
.menu-button {
  display: none;
  width: 32px;
  height: 32px;
  padding: 7px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu-button span {
  display: block;
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: var(--text);
  transition: transform .25s ease;
}
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { display: none; }

.commerce-kicker {
  margin: 0 0 16px;
  color: var(--gold-text);
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2, h3, blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.052em;
}
.section-shell {
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(320px, .62fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: end;
}
.section-heading h2,
.framework-intro h2,
.craft-copy h2,
.coffee-story h2,
.edition-panel h2,
.gifting-copy h2,
.access-intro h2,
.questions h2 {
  font-size: clamp(52px, 6.25vw, 88px);
  line-height: .91;
}

.commerce-hero {
  position: relative;
  display: grid;
  min-height: calc(100vh - 113px);
  min-height: calc(100svh - 113px);
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}
.hero-background,
.hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-background {
  object-fit: cover;
  object-position: center;
  animation: heroArrival 1.5s cubic-bezier(.2,.7,.2,1) both;
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 7, 5, .94) 0%, rgba(5, 7, 5, .78) 31%, rgba(5, 7, 5, .2) 63%, rgba(5, 7, 5, .08) 100%),
    linear-gradient(0deg, rgba(5, 7, 5, .55) 0%, transparent 36%);
}
.hero-insignia {
  position: absolute;
  top: clamp(42px, 6vw, 86px);
  right: max(38px, calc((100vw - var(--max)) / 2));
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 126px;
  padding: 11px 10px 10px;
  color: var(--gold-light);
  background: rgba(5, 7, 5, .76);
  border: 1px solid rgba(215, 187, 119, .34);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-insignia img {
  width: 96px; height: 96px; object-fit: contain;
  background: #000; border: 1px solid rgba(215, 187, 119, .28);
}
.hero-insignia span {
  margin-top: 6px;
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
}
.hero-content {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(900px, 70vw);
  padding: clamp(48px, 6vw, 88px) max(40px, calc((100vw - var(--max)) / 2));
}
.commerce-hero h1 {
  max-width: 900px;
  font-size: clamp(66px, 7vw, 108px);
  line-height: .86;
  text-wrap: balance;
}
.hero-intro {
  max-width: 610px;
  margin: 26px 0 0;
  color: rgba(244, 239, 229, .73);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 27px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.commerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}
.commerce-button.light { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.commerce-button.light:hover { color: var(--paper); background: transparent; }
.commerce-text-link {
  padding: 11px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.commerce-text-link.light { color: rgba(244, 239, 229, .76); border-color: rgba(244, 239, 229, .3); }

.hero-details {
  display: grid;
  grid-template-columns: 1.35fr .7fr 1fr;
  max-width: 700px;
  margin: clamp(34px, 5vh, 52px) 0 0;
  border-top: 1px solid rgba(244, 239, 229, .25);
}
.hero-details div { padding: 16px 18px 0 0; }
.hero-details div + div { padding-left: 18px; border-left: 1px solid rgba(244, 239, 229, .19); }
.hero-details dt {
  color: rgba(244, 239, 229, .84);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-details dd {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
}
.hero-caption {
  position: absolute;
  right: max(24px, calc((100vw - var(--max)) / 2));
  bottom: 22px;
  z-index: 2;
  margin: 0;
  color: rgba(244, 239, 229, .5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-caption span { margin-right: 15px; color: var(--gold-light); }

.experience-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: var(--paper);
  background: var(--forest);
  border-top: 1px solid var(--dark-line);
  border-left: 1px solid var(--dark-line);
}
.experience-rail article {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 10px;
  min-height: 125px;
  padding: 24px clamp(20px, 3.2vw, 55px);
  border-right: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}
.experience-rail article > span { color: var(--gold-light); font-size: 11px; font-weight: 700; }
.experience-rail strong {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
}
.experience-rail p { margin: 7px 0 0; color: rgba(244, 239, 229, .66); font-size: 13px; }

.flagship-section { padding: clamp(100px, 12vw, 180px) 0; }
.heading-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.15;
}
.text-action,
.collection-copy > [data-save-product] {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  padding: 13px 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.text-action.is-saved,
.collection-copy > [data-save-product].is-saved { color: var(--gold-text); }

.journal-interior {
  margin: clamp(58px, 8vw, 105px) 0 0;
  overflow: hidden;
  background: var(--paper-deep);
}
.journal-interior img {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.journal-interior:hover img { transform: scale(1.012); }
.journal-interior figcaption {
  display: flex;
  justify-content: space-between;
  padding: 13px 2px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journal-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(55px, 7vw, 95px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.journal-purpose-grid article {
  min-height: 270px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.journal-purpose-grid span { color: var(--gold-text); font-size: 11px; font-weight: 700; }
.journal-purpose-grid h3 { margin-top: 60px; font-size: 37px; line-height: .95; }
.journal-purpose-grid p { max-width: 340px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }

.framework-section {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  color: var(--paper);
  background: var(--ink);
}
.commerce-hero .commerce-kicker,
.framework-section .commerce-kicker,
.founder-editorial .commerce-kicker,
.collection-house-standard .commerce-kicker,
.craft-section .commerce-kicker,
.gifting-section .commerce-kicker { color: var(--gold-light); }
.framework-intro { padding: clamp(80px, 10vw, 150px) max(36px, calc((100vw - var(--max)) / 2)); }
.framework-intro > p:last-child {
  max-width: 500px;
  margin: 30px 0 0;
  color: rgba(244, 239, 229, .58);
  font-size: 15px;
}
.framework-list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--dark-line); }
.framework-list li {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 15px;
  min-height: 126px;
  padding: 26px clamp(35px, 6vw, 90px);
  border-bottom: 1px solid var(--dark-line);
}
.framework-list li > span { color: var(--gold-light); font-size: 11px; font-weight: 700; }
.framework-list strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.framework-list p { margin: 5px 0 0; color: rgba(244, 239, 229, .66); font-size: 13px; }

.founder-editorial {
  position: relative;
  min-height: min(84vw, 930px);
  overflow: hidden;
  color: var(--paper);
  background: var(--forest);
}
.founder-editorial figure { position: absolute; inset: 0; margin: 0; }
.founder-editorial figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 8, .86) 0%, rgba(8, 10, 8, .55) 35%, rgba(8, 10, 8, .05) 69%);
  content: "";
}
.founder-editorial img { width: 100%; height: 100%; object-fit: cover; }
.founder-editorial-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(610px, 48vw);
  min-height: inherit;
  margin-left: max(28px, calc((100vw - var(--max)) / 2));
  padding: 80px 0;
}
.founder-editorial blockquote { font-size: clamp(48px, 5.6vw, 82px); line-height: .9; }
.founder-editorial-copy > p:not(.commerce-kicker) { max-width: 500px; margin: 30px 0; color: rgba(244, 239, 229, .64); }
.founder-editorial-copy > a {
  align-self: flex-start;
  padding: 10px 0;
  color: var(--paper);
  border-bottom: 1px solid rgba(244, 239, 229, .35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.coffee-section {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: 980px;
  color: var(--paper);
  background: var(--forest);
}
.coffee-stage {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 42%, rgba(180, 139, 66, .2), transparent 24%),
    radial-gradient(circle at 28% 76%, rgba(88, 58, 34, .35), transparent 22%),
    linear-gradient(145deg, #15261d 0%, #09110d 56%, #060806 100%);
  isolation: isolate;
}
.coffee-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(216, 188, 121, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 188, 121, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 87%);
}
.coffee-stage::after {
  position: absolute;
  right: -9%;
  bottom: 7%;
  left: -9%;
  height: 31%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .72), transparent 67%);
  content: "";
  filter: blur(20px);
}
.coffee-orbit {
  position: absolute;
  border: 1px solid rgba(216, 188, 121, .2);
  border-radius: 50%;
}
.coffee-orbit::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--gold-light);
  border: 3px solid rgba(13, 27, 21, .9);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(216, 188, 121, .7);
  content: "";
}
.coffee-orbit-one {
  top: 13%;
  left: 8%;
  width: 78%;
  aspect-ratio: 1;
  transform: rotate(-20deg);
}
.coffee-orbit-one::before { transform: translate(230px, -4px); }
.coffee-orbit-two {
  top: 26%;
  left: 21%;
  width: 54%;
  aspect-ratio: 1;
  transform: rotate(25deg);
}
.coffee-orbit-two::before { transform: translate(-158px, -4px); }
.coffee-package {
  position: absolute;
  top: 15%;
  left: 25%;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(360px, 43vw);
  min-height: 540px;
  padding: 63px 35px 35px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03), transparent 18%, rgba(255, 255, 255, .035) 50%, transparent 78%),
    linear-gradient(155deg, #163024 0%, #0b1c14 59%, #06100b 100%);
  border: 1px solid rgba(216, 188, 121, .31);
  border-radius: 8px 8px 23px 23px;
  box-shadow: 0 52px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: rotate(-4deg);
}
.coffee-package::before {
  position: absolute;
  top: 17px;
  right: 15px;
  left: 15px;
  height: 15px;
  border-top: 1px solid rgba(216, 188, 121, .3);
  border-bottom: 1px solid rgba(216, 188, 121, .16);
  content: "";
}
.coffee-package::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, .05) 48%, transparent 55%);
  content: "";
  pointer-events: none;
}
.coffee-package-seal {
  display: grid;
  place-items: center;
  width: 98px;
  height: 112px;
  border-bottom: 1px solid rgba(216, 188, 121, .3);
}
.coffee-package-seal img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  background: #000;
}
.coffee-package p {
  margin: 24px 0 15px;
  color: var(--gold-light);
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .27em;
  text-transform: uppercase;
}
.coffee-package strong {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .76;
}
.coffee-package span {
  margin-top: 29px;
  color: rgba(244, 239, 229, .82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.coffee-package small {
  margin-top: auto;
  color: rgba(244, 239, 229, .84);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.coffee-cup {
  position: absolute;
  right: 10%;
  bottom: 15%;
  z-index: 4;
  width: 250px;
  height: 145px;
  background: linear-gradient(115deg, #111513, #030403 73%);
  border: 1px solid rgba(216, 188, 121, .2);
  border-radius: 12px 12px 90px 90px;
  box-shadow: 0 39px 44px rgba(0, 0, 0, .5), inset 10px -18px 30px rgba(0, 0, 0, .55);
  transform: rotate(3deg);
}
.coffee-cup::before {
  position: absolute;
  top: -25px;
  right: -74px;
  width: 102px;
  height: 87px;
  border: 17px solid #080b09;
  border-left-color: transparent;
  border-radius: 50%;
  content: "";
}
.coffee-cup::after {
  position: absolute;
  top: -25px;
  right: -2px;
  left: -2px;
  height: 50px;
  background: radial-gradient(ellipse at 52% 42%, #87512b 0%, #3f2416 48%, #130d09 72%);
  border: 5px solid #0b0e0c;
  border-radius: 50%;
  box-shadow: inset 0 8px 12px rgba(255, 255, 255, .08);
  content: "";
}
.coffee-cup span {
  position: absolute;
  bottom: -20px;
  left: -30px;
  width: 320px;
  height: 45px;
  background: #090b09;
  border: 1px solid rgba(216, 188, 121, .15);
  border-radius: 50%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .52);
}
.coffee-beans { position: absolute; bottom: 14%; left: 12%; z-index: 5; width: 250px; height: 130px; }
.coffee-beans i {
  position: absolute;
  display: block;
  width: 38px;
  height: 54px;
  background: linear-gradient(115deg, #744729, #24130c 68%, #110906);
  border-radius: 52% 48% 49% 51%;
  box-shadow: 0 12px 14px rgba(0, 0, 0, .35), inset 6px 5px 8px rgba(255, 255, 255, .08);
  transform: rotate(34deg);
}
.coffee-beans i::after {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 48%;
  width: 2px;
  background: rgba(10, 5, 3, .55);
  border-radius: 50%;
  content: "";
  transform: rotate(6deg);
}
.coffee-beans i:nth-child(1) { bottom: 14px; left: 10px; transform: rotate(61deg); }
.coffee-beans i:nth-child(2) { bottom: 48px; left: 67px; transform: rotate(-13deg); }
.coffee-beans i:nth-child(3) { bottom: 4px; left: 117px; transform: rotate(19deg); }
.coffee-beans i:nth-child(4) { bottom: 59px; left: 157px; transform: rotate(76deg); }
.coffee-beans i:nth-child(5) { bottom: 18px; left: 204px; transform: rotate(-32deg); }
.coffee-stage-caption {
  position: absolute;
  right: 28px;
  bottom: 25px;
  left: 28px;
  margin: 0;
  color: rgba(244, 239, 229, .64);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}
.coffee-story {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(80px, 8vw, 130px);
  background: #eee5d7;
  color: var(--text);
}
.coffee-story h2 { font-size: clamp(62px, 6.8vw, 98px); line-height: .79; }
.coffee-lead {
  max-width: 660px;
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.25vw, 31px);
  line-height: 1.08;
}
.coffee-story > p:not(.commerce-kicker):not(.coffee-lead):not(.coffee-verification) {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.coffee-profile { margin-top: 29px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.coffee-profile p {
  margin: 0 0 12px;
  color: var(--gold-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.coffee-profile > div { display: flex; gap: 8px; flex-wrap: wrap; }
.coffee-profile span {
  padding: 7px 10px;
  background: rgba(250, 247, 240, .67);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
}
.coffee-standard { margin: 24px 0 0; }
.coffee-standard > div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.coffee-standard > div:last-child { border-bottom: 1px solid var(--line); }
.coffee-standard dt {
  color: var(--gold-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.coffee-standard dd { margin: 0; color: var(--muted); font-size: 13px; }
.coffee-offer { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 26px; border: 1px solid var(--line); }
.coffee-offer > div { display: grid; padding: 17px; }
.coffee-offer > div + div { border-left: 1px solid var(--line); }
.coffee-offer span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.coffee-offer strong {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.coffee-offer small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.coffee-save {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding: 16px 17px;
  color: var(--paper);
  background: var(--forest);
  border: 1px solid var(--forest);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.coffee-save:hover,
.coffee-save.is-saved { color: var(--forest); background: transparent; }
.coffee-verification {
  margin: 16px 0 0;
  color: rgba(23, 24, 18, .62);
  font-size: 11px;
  line-height: 1.5;
}

/* =====================================================================
   QUARTERLY OPERATING INSERT
   The consumable half of the flagship. Set on paper rather than forest:
   it breaks the run of dark sections between The Standard and the coffee
   ritual, and a paper ground is the honest register for a paper product.
   Story leads on the left so the direction alternates against the coffee
   section, which runs stage-first.
   ===================================================================== */
.insert-section {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  min-height: 940px;
  background: var(--paper);
}
.insert-story {
  align-self: center;
  padding: clamp(80px, 7vw, 116px) clamp(24px, 5vw, 84px);
}
.insert-story h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.1vw, 62px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
}
.insert-lead {
  max-width: 30em;
  margin: 30px 0 0;
  font-size: 17px;
  line-height: 1.66;
}
.insert-story > p:not(.insert-lead):not(.commerce-kicker):not(.insert-verification) {
  max-width: 32em;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* Two-part explainer — the architecture stated as a pair, because the
   pairing is the product. */
.insert-architecture {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 38px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.insert-architecture > div { padding: 22px 24px 22px 0; }
.insert-architecture > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.insert-architecture span {
  display: block;
  color: var(--gold-text);
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.insert-architecture strong {
  display: block;
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
.insert-architecture small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.insert-standard { margin: 34px 0 0; }
.insert-standard > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
}
.insert-standard > div:last-child { border-bottom: 1px solid var(--line); }
.insert-standard dt {
  color: var(--gold-text);
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.insert-standard dd {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.75;
}

.insert-offer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 34px 0 0;
  border: 1px solid var(--line);
}
.insert-offer > div { padding: 22px 24px; }
.insert-offer > div + div { border-left: 1px solid var(--line); }
.insert-offer span {
  display: block;
  color: var(--muted);
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.insert-offer strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}
.insert-offer small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }

.insert-save {
  margin: 28px 0 0;
  padding: 15px 30px;
  color: var(--paper);
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--forest);
  border: 1px solid var(--forest);
  cursor: pointer;
  transition: background .4s ease, color .4s ease;
}
.insert-save:hover { color: var(--forest); background: transparent; }
.insert-verification {
  max-width: 34em;
  margin: 18px 0 0;
  color: rgba(23, 24, 18, .62);
  font-size: 11px;
  line-height: 1.5;
}

/* --- Stage: cover in front, spent quires behind, live quarter in front --- */
.insert-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 940px;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 34%, rgba(170, 130, 56, .13), transparent 42%),
    linear-gradient(155deg, var(--paper-light) 0%, var(--paper) 52%, var(--paper-deep) 100%);
  isolation: isolate;
}
.insert-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(21, 23, 18, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 18, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.insert-stage::after {
  position: absolute;
  right: -8%;
  bottom: 9%;
  left: -8%;
  height: 26%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(21, 23, 18, .17), transparent 68%);
  content: "";
  filter: blur(22px);
}
/* The arrangement lives in a fixed-height box centred in the stage. The stage
   itself stretches to whatever height the story column needs, so positioning
   the cover and leaf as percentages OF THE STAGE pulls them apart on tall
   viewports. Anchoring them to this box keeps the composition intact. */
.insert-composition {
  position: relative;
  width: min(560px, 92%);
  height: 620px;
}
.insert-rule {
  position: absolute;
  border: 1px solid rgba(170, 130, 56, .26);
  border-radius: 50%;
}
.insert-rule-one { top: -6%; left: -4%; width: 86%; aspect-ratio: 1; transform: rotate(-14deg); }
.insert-rule-two { top: 18%; left: 22%; width: 60%; aspect-ratio: 1; transform: rotate(19deg); }

/* Spent quarters, stacked and offset behind the cover. */
.insert-quires {
  position: absolute;
  top: 34px;
  left: 132px;
  z-index: 2;
}
.insert-quires i {
  position: absolute;
  display: block;
  width: min(300px, 36vw);
  height: 452px;
  background: linear-gradient(160deg, #fcf9f3 0%, #efe7d9 100%);
  border: 1px solid rgba(21, 23, 18, .13);
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 20px 38px rgba(21, 23, 18, .12);
}
.insert-quires i::after {
  position: absolute;
  top: 26px;
  right: 20px;
  color: var(--gold-text);
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: .18em;
  content: attr(data-quarter);
}
.insert-quires i:nth-child(1) { transform: translate(74px, -26px) rotate(9deg); }
.insert-quires i:nth-child(2) { transform: translate(48px, -14px) rotate(6deg); }
.insert-quires i:nth-child(3) { transform: translate(24px, -6px) rotate(3deg); }

.insert-cover {
  position: absolute;
  top: 22px;
  left: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(330px, 40vw);
  min-height: 492px;
  padding: 54px 32px 32px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 16%, rgba(255, 255, 255, .04) 52%, transparent 80%),
    linear-gradient(155deg, #163024 0%, #0b1c14 60%, #06100b 100%);
  border: 1px solid rgba(216, 188, 121, .34);
  border-radius: 3px 9px 9px 3px;
  box-shadow: 0 46px 74px rgba(21, 23, 18, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: rotate(-3deg);
}
/* Leather spine down the binding edge. */
.insert-cover::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  background: linear-gradient(90deg, #05100b 0%, #0a1a12 62%, rgba(216, 188, 121, .22) 100%);
  content: "";
}
.insert-cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 44%, rgba(255, 255, 255, .05) 49%, transparent 56%);
  content: "";
  pointer-events: none;
}
.insert-cover-seal {
  display: grid;
  place-items: center;
  width: 92px;
  height: 104px;
  border-bottom: 1px solid rgba(216, 188, 121, .3);
}
.insert-cover-seal img { width: 88px; height: 88px; object-fit: contain; background: #000; }
.insert-cover p {
  margin: 16px 0 11px;
  color: var(--gold-light);
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.insert-cover strong {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.06;
}
.insert-cover span {
  margin-top: 20px;
  color: rgba(245, 240, 231, .66);
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.insert-cover small {
  margin-top: auto;
  color: rgba(245, 240, 231, .5);
  font-size: 10px;
  letter-spacing: .06em;
}

/* The live quarter, drawn part-way out of the cover. */
.insert-leaf {
  position: absolute;
  right: 4px;
  bottom: 34px;
  z-index: 5;
  width: min(214px, 26vw);
  height: 296px;
  padding: 22px 20px;
  background: linear-gradient(160deg, #fffdf8 0%, #f3ece0 100%);
  border: 1px solid rgba(21, 23, 18, .14);
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 28px 46px rgba(21, 23, 18, .2);
  transform: rotate(5deg);
}
.insert-leaf em {
  display: block;
  margin-bottom: 16px;
  color: var(--gold-text);
  font-family: var(--font-brand);
  font-size: 13px;
  font-style: normal;
  letter-spacing: .2em;
}
.insert-leaf b {
  display: block;
  height: 1px;
  margin-bottom: 21px;
  background: rgba(21, 23, 18, .13);
}
.insert-leaf b:nth-child(3) { width: 76%; }
.insert-leaf b:nth-child(5) { width: 88%; }
.insert-leaf b:last-child { width: 54%; }
.insert-stage-caption {
  position: absolute;
  right: 26px;
  bottom: 24px;
  left: 26px;
  margin: 0;
  color: rgba(21, 23, 18, .5);
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: .1em;
  text-align: right;
}

.collection { padding: clamp(90px, 10vw, 150px) 0; }
.collection-heading > p { max-width: 580px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.collection-house-standard {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 78px);
  padding: 27px 30px;
  color: var(--paper);
  background:
    radial-gradient(circle at 8% 50%, rgba(215, 187, 119, .12), transparent 24%),
    linear-gradient(105deg, var(--forest), #0a1712);
  border-top: 1px solid rgba(215, 187, 119, .42);
  border-bottom: 1px solid rgba(215, 187, 119, .24);
}
.collection-house-standard > img {
  width: 126px;
  height: 126px;
  object-fit: contain;
  background: #000;
  border: 1px solid rgba(215, 187, 119, .28);
}
.collection-house-standard .commerce-kicker { margin-bottom: 7px; }
.collection-house-standard h3 { font-size: clamp(29px, 3vw, 42px); line-height: 1; }
.collection-house-standard div > p:last-child {
  max-width: 690px;
  margin: 11px 0 0;
  color: rgba(245, 240, 231, .72);
  font-size: 14px;
}
.collection-house-standard > span {
  padding-left: 28px;
  color: var(--gold-light);
  border-left: 1px solid var(--dark-line);
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 22px;
  margin-top: clamp(48px, 6vw, 76px);
}
.collection-card-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr);
  grid-column: 1 / -1;
  background: var(--paper-deep);
}
.collection-card-featured .collection-media { min-height: 650px; aspect-ratio: auto; }
.collection-card-featured .collection-media img { object-position: center 58%; }
.collection-card-featured .collection-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(45px, 5vw, 78px);
}
.collection-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-deep);
}
.collection-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .22s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.collection-media img.is-changing { opacity: .3; }
.collection-card:hover .collection-media img { transform: scale(1.015); }
.status-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 10px;
  color: var(--paper);
  background: rgba(7, 15, 11, .92);
  border-left: 2px solid var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.product-insignia {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 94px;
  padding: 7px 7px 8px;
  color: var(--gold-light);
  background: rgba(5, 7, 5, .93);
  border: 1px solid rgba(215, 187, 119, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Product stamps carry the crowned shield — the crop of the crest that stays
   legible at this size, and the mark actually struck on goods. Box matches the
   art's 0.63 aspect so there is no letterbox against the glass panel. */
.product-insignia img {
  width: 46px; height: 72px; object-fit: contain;
  background: #000; border: 1px solid rgba(215, 187, 119, .28);
}
.product-insignia small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.collection-card-featured .product-insignia { width: 106px; padding: 8px 8px 9px; }
.collection-card-featured .product-insignia img { width: 54px; height: 84px; }
.collection-copy { padding-top: 19px; }
.collection-copy > p:first-child { margin: 0 0 8px; color: var(--gold-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.collection-copy > div { display: flex; justify-content: space-between; gap: 22px; }
.collection-copy h3 { font-size: clamp(28px, 2.6vw, 39px); line-height: 1; }
.collection-card-featured .collection-copy h3 { font-size: clamp(42px, 4.2vw, 64px); line-height: .94; }
.collection-copy strong { flex: 0 0 auto; font-size: 13px; text-align: right; }
.collection-copy strong small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.product-description { max-width: 620px; margin: 15px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.collection-card-featured .product-description { font-size: 16px; }
.product-proof {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.product-proof p {
  min-width: 0;
  margin: 0;
  padding: 12px;
  color: var(--text);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.25;
}
.product-proof span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.collection-copy > [data-save-product] { margin-top: 22px; }
.colorway-picker {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.colorway-picker > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.colorway-picker > p strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.colorway-picker > div {
  display: flex;
  gap: 9px;
}
.color-swatch {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--swatch);
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(23, 24, 18, .24);
  cursor: pointer;
}
.color-swatch::after {
  position: absolute;
  inset: -5px;
  border: 1px solid transparent;
  border-radius: 50%;
  content: "";
  transition: border-color .2s ease;
}
.color-swatch:hover::after,
.color-swatch.is-active::after { border-color: var(--gold); }

.craft-section {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 850px;
  color: var(--paper);
  background: var(--forest);
}
.craft-image { overflow: hidden; }
.craft-image img { width: 100%; height: 100%; object-fit: cover; object-position: 69% center; }
.craft-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 8vw, 120px); }
.craft-lead { margin: 28px 0 0; color: rgba(244, 239, 229, .64); font-size: 14px; }
.material-list { margin: 35px 0 0; }
.material-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--dark-line);
}
.material-list div:last-child { border-bottom: 1px solid var(--dark-line); }
.material-list dt { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.material-list dd { margin: 0; font-family: var(--font-display); font-size: 20px; }
.development-note { margin: 26px 0 0; color: rgba(244, 239, 229, .55); font-size: 11px; }

.edition-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(50px, 9vw, 140px);
  padding: clamp(100px, 12vw, 180px) 0;
}
.edition-panel > p:last-child { max-width: 480px; margin: 30px 0 0; color: var(--muted); }
.edition-benefits { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.edition-benefits article { min-height: 235px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.edition-benefits span { color: var(--gold-text); font-size: 11px; font-weight: 700; }
.edition-benefits h3 { margin-top: 48px; font-size: 31px; line-height: .95; }
.edition-benefits p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.gifting-section {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 790px;
  color: var(--paper);
  background: var(--ink);
}
.gifting-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 9vw, 130px) max(38px, calc((100vw - var(--max)) / 2)); }
.gifting-copy > p:not(.commerce-kicker) { max-width: 630px; margin: 28px 0 0; color: rgba(244, 239, 229, .62); }
.gifting-copy ul { display: grid; gap: 9px; margin: 28px 0 34px; padding: 0; color: rgba(244, 239, 229, .7); font-size: 11px; list-style: none; }
.gifting-copy li::before { margin-right: 10px; color: var(--gold-light); content: "—"; }
.gifting-copy .commerce-button { align-self: flex-start; }
.gifting-visual { position: relative; overflow: hidden; }
.gifting-visual img { width: 100%; height: 100%; object-fit: cover; }
.gifting-visual > div {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  color: var(--paper);
  background: rgba(8, 10, 8, .87);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.gifting-visual span { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gifting-visual p { margin: 0; font-family: var(--font-display); font-size: 19px; }

.service-standard {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px, 8vw, 120px);
  padding: clamp(95px, 11vw, 160px) 0;
}
.service-standard-intro h2 {
  max-width: 620px;
  font-size: clamp(42px, 4.7vw, 70px);
  line-height: .94;
}
.service-standard-intro > p:last-child {
  max-width: 540px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.service-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.service-standard-grid article {
  min-height: 260px;
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-standard-grid span {
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
}
.service-standard-grid h3 {
  margin-top: 58px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: .95;
}
.service-standard-grid p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.first-access {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(55px, 10vw, 150px);
  padding: clamp(95px, 12vw, 170px) max(28px, calc((100vw - var(--max)) / 2));
  background: var(--paper-deep);
}
.access-intro > p:not(.commerce-kicker) { max-width: 520px; margin: 28px 0 0; color: var(--muted); }
.privacy-note { display: flex; gap: 14px; max-width: 510px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.privacy-note > span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: var(--gold-text); border: 1px solid var(--gold-text); border-radius: 50%; font-family: var(--font-brand); font-size: 10px; font-weight: 700; }
.privacy-note p { margin: 0; color: var(--muted); font-size: 13px; }

.access-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.field-full { grid-column: 1 / -1; }
.field-group { display: grid; gap: 7px; }
.field-group label,
.access-form legend {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.field-group label span { font-weight: 400; }
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  min-height: 51px;
  padding: 13px 14px;
  color: var(--text);
  background: rgba(250, 247, 240, .6);
  border: 1px solid rgba(23, 24, 18, .35);
  border-radius: 0;
  outline: none;
}
.field-group textarea { min-height: 95px; resize: vertical; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--gold); }
.access-form fieldset { margin: 0; padding: 0; border: 0; }
.access-form legend { margin-bottom: 9px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.choice-grid label { position: relative; display: block; min-height: 95px; cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  transition: color .2s ease, background .2s ease;
}
.choice-grid small { margin-top: 7px; color: var(--muted); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.choice-grid input:checked + span { color: var(--paper); background: var(--forest); }
.choice-grid input:checked + span small { color: var(--gold-light); }
.choice-grid input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -3px; }
.choice-grid label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.access-submit {
  display: flex;
  justify-content: space-between;
  min-height: 57px;
  padding: 0 18px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.form-note { margin: -12px 0 0; color: var(--muted); font-size: 11px; }

.questions {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(60px, 10vw, 150px);
  padding: clamp(95px, 11vw, 160px) 0;
}
.question-list { border-top: 1px solid var(--line); }
.question-list details { border-bottom: 1px solid var(--line); }
.question-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 25px;
  list-style: none;
}
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary span { color: var(--gold-text); font-family: var(--font-body); font-size: 17px; font-weight: 300; transition: transform .2s ease; }
.question-list details[open] summary span { transform: rotate(45deg); }
.question-list details p { max-width: 650px; margin: -8px 0 25px; color: var(--muted); font-size: 14px; }

.commerce-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 42px 70px;
  align-items: center;
  padding: 55px max(28px, calc((100vw - var(--max)) / 2));
  color: var(--paper);
  background: var(--forest);
}
.footer-house > p { margin: 10px 0 0; color: rgba(244, 239, 229, .64); font-size: 13px; }
.commerce-footer nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.commerce-footer nav a { color: rgba(244, 239, 229, .68); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.commerce-legal { grid-column: 1 / -1; margin: 0; padding-top: 22px; color: rgba(244, 239, 229, .5); border-top: 1px solid var(--dark-line); font-size: 11px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5, 6, 5, .63); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.interest-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(480px, 100%);
  color: var(--text);
  background: var(--paper);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .28);
  transform: translateX(102%);
  transition: transform .36s cubic-bezier(.2,.7,.2,1), visibility .36s;
}
/* The closed drawer is only translated off-screen, so on browsers without
   `inert` its buttons would still be keyboard-reachable. visibility:hidden
   removes it from the focus order; it is restored before the slide-in. */
.interest-drawer { visibility: hidden; }
.interest-drawer.is-open { transform: none; visibility: visible; }
.interest-drawer > header { display: flex; justify-content: space-between; padding: 27px; border-bottom: 1px solid var(--line); }
.interest-drawer header p { margin: 0; color: var(--gold-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.interest-drawer h2 { font-size: 43px; line-height: .9; }
.interest-drawer header button { align-self: start; padding: 0; background: transparent; border: 0; cursor: pointer; font-size: 34px; font-weight: 300; line-height: .8; }
.interest-items { overflow-y: auto; padding: 27px; }
.interest-empty { display: grid; justify-items: start; gap: 8px; padding-top: 25px; }
.interest-empty span { display: grid; place-items: center; width: 50px; height: 50px; color: var(--gold-text); border: 1px solid var(--gold-text); border-radius: 50%; font-family: var(--font-brand); font-size: 11px; }
.interest-empty p { margin: 10px 0 0; font-family: var(--font-display); font-size: 27px; }
.interest-empty small { max-width: 310px; color: var(--muted); font-size: 10px; }
.interest-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.interest-item strong { font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.interest-item > span { color: var(--gold-text); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.interest-item small { color: var(--muted); font-size: 10px; }
.interest-item button { grid-column: 1 / -1; justify-self: start; padding: 0; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 10px; text-transform: uppercase; }
.interest-drawer > footer { padding: 27px; border-top: 1px solid var(--line); }
.interest-drawer footer p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.interest-drawer footer button { width: 100%; min-height: 52px; color: var(--paper); background: var(--ink); border: 0; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.interest-drawer footer button:disabled { opacity: .35; cursor: not-allowed; }

.mobile-sticky-cta { display: none; }

.reveal { opacity: 1; transform: none; }
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.js-ready .reveal.is-visible { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@keyframes heroArrival {
  from { opacity: .68; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1100px) {
  .commerce-nav { gap: 19px; }
  .header-access { display: none; }
  .hero-content { width: min(720px, 67vw); }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-card-featured { grid-template-columns: 1.1fr .9fr; }
  .craft-copy { padding: 70px 55px; }
}

@media (max-width: 900px) {
  .commerce-header { grid-template-columns: 1fr auto; }
  .commerce-nav { display: none; }
  .menu-button { display: block; }
  .mobile-menu {
    position: fixed;
    inset: 113px 0 0;
    z-index: 65;
    display: grid;
    align-content: start;
    padding: 35px 28px;
    color: var(--paper);
    background: rgba(8, 10, 8, .98);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a {
    padding: 19px 0;
    border-bottom: 1px solid var(--dark-line);
    font-family: var(--font-display);
    font-size: 31px;
    text-decoration: none;
  }
  .hero-content { width: 72vw; }
  .experience-rail { grid-template-columns: repeat(2, 1fr); }
  .section-heading,
  .framework-section,
  .coffee-section,
  .insert-section,
  .craft-section,
  .edition-section,
  .gifting-section,
  .service-standard,
  .first-access,
  .questions { grid-template-columns: 1fr; }
  /* Story first, stage beneath — the stage is illustrative, the copy is load-bearing. */
  .insert-story { order: 1; padding: 90px 55px; }
  .insert-stage { order: 2; min-height: 800px; }
  .insert-standard > div { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
  .framework-list { border-top: 1px solid var(--dark-line); border-left: 0; }
  .founder-editorial { min-height: 840px; }
  .founder-editorial img { object-position: 61% center; }
  .founder-editorial-copy { width: 54vw; }
  .coffee-stage { min-height: 820px; }
  .coffee-package { left: 25%; width: 350px; }
  .coffee-story { padding: 90px 55px; }
  .collection-house-standard { grid-template-columns: 100px 1fr; }
  .collection-house-standard > img { width: 96px; height: 96px; }
  .collection-house-standard > span { grid-column: 2; padding: 15px 0 0; border-top: 1px solid var(--dark-line); border-left: 0; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card-featured { grid-template-columns: 1fr; }
  .collection-card-featured .collection-media { min-height: 600px; }
  .craft-image { min-height: 620px; }
  .gifting-visual { min-height: 620px; }
  .edition-section,
  .questions { gap: 65px; }
  .service-standard { gap: 55px; }
  .commerce-footer { grid-template-columns: 1fr; }
  .commerce-footer nav { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .preview-bar { min-height: 42px; padding: 8px 12px; }
  .preview-bar p { max-width: 330px; line-height: 1.4; }
  .preview-bar button { display: none; }
  .commerce-header { min-height: 73px; padding: 0 15px; }
  .commerce-brand img { width: 27px; height: 44px; }
  .commerce-brand strong { font-size: 10px; }
  .commerce-brand small { font-size: 10px; }
  .header-actions { gap: 12px; }
  .interest-button { font-size: 10px; }
  .mobile-menu { inset: 115px 0 0; }
  .section-shell { width: calc(100% - 30px); }
  .section-heading h2,
  .framework-intro h2,
  .craft-copy h2,
  .coffee-story h2,
  .edition-panel h2,
  .gifting-copy h2,
  .access-intro h2,
  .questions h2 { font-size: clamp(52px, 16vw, 70px); }

  .commerce-hero {
    min-height: 760px;
    padding-top: 330px;
  }
  .hero-background { height: 360px; object-position: 69% center; }
  .hero-insignia {
    top: 22px;
    right: 15px;
    width: 88px;
    padding: 7px 6px;
  }
  .hero-insignia img { width: 74px; height: 74px; }
  .hero-insignia span { display: none; }
  .hero-shade {
    background:
      linear-gradient(0deg, var(--ink) 0%, var(--ink) 52%, rgba(8, 10, 8, .05) 78%, rgba(8, 10, 8, .04) 100%);
  }
  .hero-content {
    align-self: stretch;
    width: 100%;
    padding: 52px 15px 42px;
  }
  .commerce-hero h1 { font-size: clamp(58px, 17vw, 72px); line-height: .86; }
  .hero-intro { margin-top: 25px; font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 13px; margin-top: 28px; }
  .commerce-button { width: 100%; }
  .commerce-text-link { align-self: flex-start; }
  .hero-details { grid-template-columns: 1fr; margin-top: 43px; }
  .hero-details div { padding: 11px 0; border-bottom: 1px solid rgba(244, 239, 229, .15); }
  .hero-details div + div { padding-left: 0; border-left: 0; }
  .hero-caption {
    top: 310px;
    right: 15px;
    bottom: auto;
    left: 15px;
    display: flex;
    justify-content: space-between;
  }
  .experience-rail { grid-template-columns: 1fr; }
  .experience-rail article { min-height: 102px; padding: 20px 15px; }

  .flagship-section,
  .collection { padding: 90px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 32px; }
  .heading-copy > p { font-size: 23px; }
  .journal-interior { margin-top: 50px; }
  .journal-interior img { aspect-ratio: 4 / 5; object-position: center; }
  .journal-interior figcaption { gap: 12px; font-size: 10px; }
  .journal-purpose-grid { grid-template-columns: 1fr; margin-top: 55px; }
  .journal-purpose-grid article { min-height: 220px; padding: 23px; }
  .journal-purpose-grid h3 { margin-top: 42px; }

  .framework-intro { padding: 80px 15px 55px; }
  .framework-list li { min-height: 112px; padding: 23px 15px; }
  .framework-list strong { font-size: 24px; }

  .founder-editorial { min-height: 780px; }
  .founder-editorial figure { height: 450px; }
  .founder-editorial figure::after { background: linear-gradient(0deg, var(--forest) 0%, transparent 49%); }
  .founder-editorial img { object-position: 66% center; }
  .founder-editorial-copy {
    justify-content: flex-end;
    width: auto;
    min-height: 780px;
    margin: 0;
    padding: 410px 15px 70px;
  }
  .founder-editorial blockquote { font-size: 48px; }

  .coffee-stage { min-height: 690px; }
  .coffee-orbit-one { top: 13%; left: -16%; width: 116%; }
  .coffee-orbit-two { top: 26%; left: 9%; width: 80%; }
  .coffee-package {
    top: 11%;
    left: 50%;
    width: 250px;
    min-height: 390px;
    padding: 47px 22px 25px;
    transform: translateX(-50%) rotate(-3deg);
  }
  .coffee-package-seal { width: 78px; height: 82px; }
  .coffee-package-seal img { width: 74px; height: 74px; }
  .coffee-package p { margin: 17px 0 12px; font-size: 10px; }
  .coffee-package strong { font-size: 40px; }
  .coffee-package span { margin-top: 21px; font-size: 10px; }
  .coffee-package small { font-size: 10px; }
  .coffee-cup { right: 3%; bottom: 13%; width: 165px; height: 98px; }
  .coffee-cup::before { top: -18px; right: -50px; width: 73px; height: 62px; border-width: 12px; }
  .coffee-cup::after { top: -18px; height: 37px; border-width: 4px; }
  .coffee-cup span { bottom: -14px; left: -22px; width: 215px; height: 33px; }
  .coffee-beans { bottom: 12%; left: 3%; transform: scale(.72); transform-origin: left bottom; }
  .coffee-stage-caption { right: 15px; bottom: 18px; left: 15px; font-size: 10px; }
  .coffee-story { padding: 80px 15px; }
  .coffee-lead { margin-top: 27px; }
  .coffee-standard > div { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  .coffee-standard dd { font-size: 11px; }
  .coffee-offer { grid-template-columns: 1fr; }
  .coffee-offer > div + div { border-top: 1px solid var(--line); border-left: 0; }

  .insert-story { padding: 80px 15px; }
  .insert-lead { margin-top: 27px; }
  .insert-architecture { grid-template-columns: 1fr; }
  .insert-architecture > div { padding: 18px 0; }
  .insert-architecture > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .insert-standard > div { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  .insert-standard dd { font-size: 11px; }
  .insert-offer { grid-template-columns: 1fr; }
  .insert-offer > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .insert-stage { min-height: 620px; }
  .insert-composition { width: min(360px, 94%); height: 470px; }
  .insert-rule-one { top: -5%; left: -12%; width: 104%; }
  .insert-rule-two { top: 16%; left: 18%; width: 68%; }
  /* Rotation widens the bounding box (~+48px at 9deg on a 304px-tall card),
     so the stack is sized and offset to keep the last quire inside the stage
     rather than clipped by overflow. */
  .insert-quires { top: 24px; left: 70px; }
  .insert-quires i { width: 196px; height: 304px; }
  .insert-quires i:nth-child(1) { transform: translate(40px, -16px) rotate(9deg); }
  .insert-quires i:nth-child(2) { transform: translate(26px, -9px) rotate(6deg); }
  .insert-quires i:nth-child(3) { transform: translate(13px, -4px) rotate(3deg); }
  .insert-cover {
    top: 14px;
    left: 4px;
    width: 226px;
    min-height: 350px;
    padding: 36px 20px 22px;
  }
  .insert-cover-seal { width: 74px; height: 84px; }
  .insert-cover-seal img { width: 70px; height: 70px; }
  .insert-cover p { margin: 13px 0 9px; font-size: 9px; }
  .insert-cover strong { font-size: 27px; }
  .insert-cover span { margin-top: 15px; font-size: 9px; }
  .insert-cover small { font-size: 9px; }
  .insert-leaf {
    right: 0;
    bottom: 22px;
    width: 148px;
    height: 206px;
    padding: 17px 15px;
  }
  .insert-leaf em { margin-bottom: 12px; font-size: 11px; }
  .insert-leaf b { margin-bottom: 15px; }
  .insert-stage-caption { right: 15px; bottom: 18px; left: 15px; font-size: 10px; }

  .collection-grid { grid-template-columns: 1fr; gap: 57px; margin-top: 55px; }
  .collection-card-featured { grid-column: auto; }
  .collection-card-featured { background: transparent; }
  .collection-card-featured .collection-media { min-height: 0; aspect-ratio: 1 / 1; }
  .collection-card-featured .collection-media img { object-position: center; }
  .collection-card-featured .collection-copy { padding: 19px 0 0; }
  .collection-copy > div { align-items: start; }
  .collection-copy h3 { font-size: 31px; }
  .collection-card-featured .collection-copy h3 { font-size: 39px; }
  .collection-house-standard {
    grid-template-columns: 72px 1fr;
    gap: 17px;
    padding: 22px 17px;
  }
  .collection-house-standard > img { width: 72px; height: 72px; }
  .collection-house-standard h3 { font-size: 27px; }
  .collection-house-standard div > p:last-child { font-size: 10px; }
  .collection-house-standard > span { grid-column: 1 / -1; }
  .product-insignia { width: 76px; padding: 6px; }
  .product-insignia img { width: 36px; height: 58px; }
  .collection-card-featured .product-insignia { width: 82px; padding: 6px; }
  .collection-card-featured .product-insignia img { width: 40px; height: 64px; }
  .product-insignia small { font-size: 10px; }
  .product-proof { grid-template-columns: 1fr; }

  .craft-image,
  .gifting-visual { min-height: 440px; }
  .craft-image img { object-position: 72% center; }
  .craft-copy,
  .gifting-copy { padding: 75px 15px; }
  .material-list div { grid-template-columns: 105px 1fr; }
  .material-list dd { font-size: 18px; }

  .edition-section { gap: 50px; padding: 90px 0; }
  .edition-benefits { grid-template-columns: 1fr; }
  .edition-benefits article { min-height: 200px; }
  .gifting-visual > div { right: 15px; bottom: 15px; left: 15px; flex-direction: column; gap: 5px; }

  .first-access { gap: 55px; padding: 85px 15px; }
  .access-form { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-grid label { min-height: 78px; }
  .questions { gap: 45px; padding: 85px 0; }
  .question-list summary { font-size: 22px; }
  .commerce-footer { gap: 34px; padding: 45px 15px; }
  .commerce-footer nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
  body { padding-bottom: 74px; }
  .service-standard { padding: 85px 0; }
  .service-standard-grid { grid-template-columns: 1fr; }
  .service-standard-grid article { min-height: 210px; }
  .service-standard-grid h3 { margin-top: 42px; }
  .mobile-sticky-cta {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 10px 10px 14px;
    color: var(--paper);
    background: rgba(7, 10, 8, .94);
    border: 1px solid rgba(215, 187, 119, .45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  body.menu-open .mobile-sticky-cta { visibility: hidden; pointer-events: none; }
  .mobile-sticky-cta span {
    color: rgba(244, 239, 229, .68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--ink);
    background: var(--paper);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .color-swatch { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-background { animation: none; }
  .reveal,
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .collection-media img,
  .journal-interior img,
  .interest-drawer,
  .menu-button span { transition: none; }
}

/* Netlify Forms honeypot — visually hidden but not display:none, so bots fill it. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================
   PROGRESSIVE ENHANCEMENT — JS-only affordances
   `.js-ready` is set by commerce.js and removed again if initialisation
   throws. Anything that only works with JavaScript is hidden unless the
   enhancement actually succeeded, so a visitor is never shown a control
   that silently does nothing (save/vote, colourway swatches, the saved
   drawer, and the scroll-to shortcuts).
   ===================================================================== */
html:not(.js-ready) [data-save-product],
html:not(.js-ready) [data-open-interest],
html:not(.js-ready) [data-corporate-inquiry],
html:not(.js-ready) [data-scroll-to],
html:not(.js-ready) [data-colorway-picker],
html:not(.js-ready) .interest-drawer,
html:not(.js-ready) .drawer-backdrop,
html:not(.js-ready) .mobile-sticky-cta { display: none !important; }

/* Without JS the quantity field can never be revealed, so show it and let
   JavaScript take over hiding/disabling it for personal purchases. */
html:not(.js-ready) .quantity-field[hidden] { display: block !important; }

/* Reveal stagger delays as classes (no inline styles under CSP). */
.d04 { --d: .04s; }
.d05 { --d: .05s; }
.d06 { --d: .06s; }
.d1 { --d: .1s; }
.d12 { --d: .12s; }
.d16 { --d: .16s; }
.d18 { --d: .18s; }
.d2 { --d: .2s; }
.d22 { --d: .22s; }
.d24 { --d: .24s; }
.d3 { --d: .3s; }
.d38 { --d: .38s; }

/* Without JavaScript (or if enhancement failed) the mobile menu can never be
   toggled open, so show it inline instead. Previously an inline <style> in a
   <noscript> block; moved here so the CSP can forbid inline styles. */
@media (max-width: 900px) {
  html:not(.js-ready) .mobile-menu[hidden] {
    position: static;
    display: grid !important;
    padding: 24px 20px;
  }
}

/* Colourway swatch colours as classes (no inline styles under CSP). */
.sw-heritage-green { --swatch: #24352d; }
.sw-oxblood { --swatch: #5b2025; }
.sw-midnight-navy { --swatch: #111d36; }
.sw-walnut-forest { --swatch: linear-gradient(135deg, #493426 0 50%, #3d492d 50%); }
.sw-ebonized-oak-oxblood { --swatch: linear-gradient(135deg, #191817 0 50%, #64242a 50%); }
.sw-natural-oak-saddle { --swatch: linear-gradient(135deg, #b38d60 0 50%, #ad632e 50%); }
.sw-smoked-glass-brass { --swatch: linear-gradient(135deg, #2c302d 0 50%, #ae8645 50%); }
.sw-amber-blackened-brass { --swatch: linear-gradient(135deg, #8a461d 0 50%, #302d29 50%); }
.sw-alabaster-aged-gold { --swatch: linear-gradient(135deg, #e5dcc9 0 50%, #aa7e39 50%); }
.sw-obsidian-black { --swatch: #171817; }
.sw-oxblood-2 { --swatch: #572127; }
.sw-midnight-navy-2 { --swatch: #111d32; }

/* =====================================================================
   LUXURY INTERACTION LAYER (2026-07-29)
   Benchmarked against Hermès / Louis Vuitton / ALO / Apple Store.
   1. Cormorant optical compensation after the Bodoni→Cormorant swap
   2. Slow ken-burns on the commerce hero (motion-safe)
   3. Deepened product hover zoom + gold hairline reveal
   4. Horizontal scroll-snap product rail on small screens (ALO/LV mobile)
   All motion is gated behind prefers-reduced-motion.
   ===================================================================== */

/* 1 — Cormorant reads lighter and smaller than Bodoni at the same size.
   Compensate on display headings only; body text is untouched. */
.commerce-hero h1,
.flagship-heading h2,
.section-heading h2,
.access-intro h2,
.framework-intro h2,
.founder-editorial blockquote,
.craft-copy h2,
.insert-story h2,
.collection-copy h3 {
  font-weight: 500;
  letter-spacing: -.015em;
}
.commerce-hero h1 { font-size: clamp(46px, 6.4vw, 92px); }

/* 2 — Ken-burns hero: a slow, luxurious settle toward the product.
   Runs once on load, not a loop — restraint over spectacle. */
.commerce-hero picture { overflow: hidden; }
.commerce-hero .hero-background {
  transform-origin: 62% 42%;
  animation: rf-kenburns 22s cubic-bezier(.19, 1, .22, 1) both;
}
@keyframes rf-kenburns {
  from { transform: scale(1.085); }
  to   { transform: scale(1); }
}

/* 3 — Product hover: deeper zoom + a gold hairline that draws itself. */
.collection-card .collection-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(215, 187, 119, 0);
  transition: border-color .6s ease, inset .6s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
}
.collection-card:hover .collection-media img { transform: scale(1.05); }
.collection-card:hover .collection-media::after {
  inset: 10px;
  border-color: rgba(215, 187, 119, .55);
}
.collection-media img {
  transition: opacity .22s ease, transform 1.1s cubic-bezier(.19, 1, .22, 1);
}

/* Editorial figures get the same quiet zoom language. */
.journal-interior picture,
.founder-editorial figure picture,
.craft-image picture { overflow: hidden; }
.journal-interior img,
.founder-editorial img,
.craft-image img {
  transition: transform 1.4s cubic-bezier(.19, 1, .22, 1);
}
.journal-interior:hover img,
.founder-editorial figure:hover img,
.craft-image:hover img { transform: scale(1.03); }

/* 4 — Product rail on small screens: swipeable, snap-aligned cards. */
@media (max-width: 900px) {
  .collection-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 82vw);
    grid-template-columns: none;
    gap: 18px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .collection-grid::-webkit-scrollbar { display: none; }
  .collection-card { scroll-snap-align: start; }
  .collection-card-featured {
    grid-column: auto;
    grid-template-columns: none;
    grid-auto-rows: auto;
  }
  .collection-card-featured .collection-media { min-height: 0; aspect-ratio: 1 / 1; }
}

/* Motion safety: no ken-burns, no zoom transitions for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .commerce-hero .hero-background { animation: none; }
  .collection-card:hover .collection-media img,
  .journal-interior:hover img,
  .founder-editorial figure:hover img,
  .craft-image:hover img { transform: none; }
  .collection-media img,
  .journal-interior img,
  .founder-editorial img,
  .craft-image img { transition: opacity .22s ease; }
}