/* ==========================================================================
   GENERATION BEE
   One stylesheet, seven layers, in cascade order:
   1 TOKENS · 2 BASE · 3 THEMES · 4 LAYOUT · 5 COMPONENTS · 6 SECTIONS · 7 MOTION
   Rules of the house:
   - Colors exist only as custom properties in :root. Everything else
     references tokens, directly or through color-mix.
   - Components read theme variables (--text, --muted, --accent-label),
     never raw surface tokens, so a component dropped on any surface
     inherits an AA-safe pairing automatically.
   - Every transition and animation lives in layer 7 behind a
     prefers-reduced-motion gate. Layers 1 to 6 define states only.
   ========================================================================== */

/* 1 · TOKENS --------------------------------------------------------------- */

:root {
  --ink-900: #141210;         /* deepest surface, footer and hero base */
  --ink-800: #1C1814;         /* primary dark section surface */
  --ink-700: #262019;         /* raised dark surfaces, cards on dark */
  --cream: #F6F0E3;           /* primary light surface */
  --cream-deep: #EDE4D0;      /* cards and panels on cream */
  --gold: #B08D3F;            /* antique gold, rules and labels */
  --gold-bright: #C6A35B;     /* hover states and fine details */
  --amber: #D98E2B;           /* honey glow, Hive to Table band only */
  --text-on-dark: #F2EDE3;    /* body copy on dark surfaces */
  --text-on-light: #221C12;   /* body copy on cream surfaces */
  --text-muted-dark: #B5AC9C; /* secondary text on dark */
  --text-muted-light: #6E6354;/* secondary text on cream */

  --font-serif: "Bodoni Moda", "Bodoni Moda Fallback", Didot, Georgia, serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --w-content: 1200px;
  --w-wide: 1360px;
  --pad-section: clamp(72px, 40px + 7vw, 150px);
  --gap: 32px;
  --radius: 2px;
  --nav-h: 76px;

  --dur-hover: 250ms;
  --dur-reveal: 500ms;
  --dur-thread: 600ms;
  --ease: cubic-bezier(0.33, 0.12, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
  :root { --gap: 20px; --nav-h: 64px; }
}

/* 2 · BASE ------------------------------------------------------------------ */

/* Local fonts stand in while the webfonts load. The size-adjust values
   are measured width ratios (Bodoni Moda/Didot, Inter/Helvetica Neue),
   so the swap lands without the text blocks changing size. Didot is a
   didone too, so even the style of the flash is right on Apple devices. */
@font-face {
  font-family: "Bodoni Moda Fallback";
  src: local("Didot");
  size-adjust: 99.5%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue");
  size-adjust: 106.2%;
  ascent-override: 91%;
  descent-override: 23%;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font: 400 17px/1.65 var(--font-sans);
  background: var(--ink-900);
  color: var(--text-on-dark);
}
@media (max-width: 767px) { body { font-size: 16px; } }

img { display: block; max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; }
/* Bodoni Moda is a didone: hairlines want air, so tracking stays near
   neutral and display weight sits just under 500. Optical sizing is
   automatic via the variable opsz axis. */
h1 { font-size: clamp(54px, 11vw, 160px); line-height: 0.98; letter-spacing: -0.008em; font-weight: 460; }
h2 { font-size: clamp(42px, 12px + 5.5vw, 96px); line-height: 1.02; letter-spacing: -0.005em; font-weight: 480; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
blockquote, figure { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On cream, gold alone is below the 3:1 non-text bar. A muted outer band
   keeps the indicator gold while clearing SC 1.4.11. */
.t-cream :focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--text-muted-light);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink-900);
  color: var(--text-on-dark);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font: 500 12px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* 3 · THEMES ----------------------------------------------------------------- */

.t-dark {
  --surface: var(--ink-800);
  --text: var(--text-on-dark);
  --muted: var(--text-muted-dark);
  --accent-label: var(--gold);
  --accent-label-hover: var(--gold-bright);
  --panel: var(--ink-700);
  --edge: color-mix(in srgb, var(--text-on-dark) 8%, transparent);
  background: var(--surface);
  color: var(--text);
}
.t-dark--deep { --surface: var(--ink-900); }

.t-cream {
  --surface: var(--cream);
  --text: var(--text-on-light);
  --muted: var(--text-muted-light);
  /* Gold fails AA at label sizes on cream. Labels go muted here and the
     gold lives in the tick, rule, border, and underline instead. */
  --accent-label: var(--text-muted-light);
  --accent-label-hover: var(--text-on-light);
  --panel: var(--cream-deep);
  --edge: color-mix(in srgb, var(--text-on-light) 8%, transparent);
  background: var(--surface);
  color: var(--text);
}

/* 4 · LAYOUT ----------------------------------------------------------------- */

.wrap {
  width: min(100% - 48px, var(--w-content));
  margin-inline: auto;
}
/* Cap the side gutter at ~120px so wide monitors don't push content far in
   from the edges (content widens past --w-wide instead of growing the gutter). */
.wrap--wide { width: min(100% - 48px, max(var(--w-wide), 100% - 240px)); }
@media (max-width: 480px) {
  .wrap, .wrap--wide { width: calc(100% - 40px); }
}

.section { padding-block: var(--pad-section); }

.grid { display: grid; gap: var(--gap); }

main section { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* 5 · COMPONENTS ------------------------------------------------------------- */

/* Eyebrow label */
.eyebrow {
  font: 500 11.5px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-label);
}

/* The gold thread. A 1px vertical rule each section eyebrow hangs from.
   IntersectionObserver adds .is-lit once; the brighten transition is in
   layer 7. On mobile it degrades to a 32px tick. */
.thread {
  display: block;
  width: 1px;
  height: 72px;
  background: var(--gold);
}
.thread.is-lit { background: var(--gold-bright); }
.thread--hero { height: 120px; }
.tick {
  display: block;
  width: 1px;
  height: 24px;
  background: var(--gold);
}
@media (max-width: 767px) {
  .thread { height: 32px; }
  .thread--hero { height: 56px; }
}

/* Section header: thread, eyebrow hanging from it, heading, optional intro */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(48px, 6vw, 84px);
}
.sec-head--center { align-items: center; text-align: center; }
.sec-head h2 { max-width: 13em; }
.sec-head .sec-intro { max-width: 52ch; font-size: 18px; color: var(--muted); }

/* Primary button: transparent fill, 1px gold border, label in eyebrow style */
.btn {
  display: inline-block;
  padding: 19px 44px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--accent-label);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.btn:hover {
  border-color: var(--gold-bright);
  color: var(--accent-label-hover);
  background: color-mix(in srgb, var(--gold) 4%, transparent);
}

/* Text link: eyebrow style with a thin offset gold underline */
.link {
  display: inline-block;
  font: 500 12px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-label);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.link:hover {
  color: var(--accent-label-hover);
  text-decoration-color: var(--gold-bright);
  text-decoration-thickness: 2px;
}

/* Product card, editorial: no box around the whole card. The packshot
   sits on its cream-deep plate (packshots stay on cream surfaces) and the
   name, price, and View link float on the section surface beneath it. */
.card {
  display: block;
  background: transparent;
  text-decoration: none;
  color: inherit;
}
.card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 10%;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--edge);
}
.card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* White-background packshots melt into the cream panel instead of
     printing a white box. The slight brightness lift clips off-white
     backgrounds to pure white first so the blend leaves no gray edge.
     Black and gold packaging is visually unaffected. */
  mix-blend-mode: multiply;
  filter: brightness(1.06);
}
.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 2px 0;
}
.card__name {
  font: 500 clamp(22px, 12px + 1.2vw, 28px)/1.18 var(--font-serif);
  letter-spacing: 0;
}
.card__price { font: 500 13.5px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--muted); }
.card__view { margin-top: 12px; }
.card:hover .card__view {
  color: var(--accent-label-hover);
  text-decoration-color: var(--gold-bright);
  text-decoration-thickness: 2px;
}
.card:hover .card__media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent); }

.card--dark .card__media { background: var(--cream-deep); }
/* Photographic dark-scene art: no plate, no blend, full-bleed cover. */
.card__media--photo, .card--dark .card__media--photo { background: var(--panel); padding: 0; }
.card__media--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
  filter: none;
}

/* Accordion: 1px gold top rule per row, serif label, CSS plus-to-minus */
.acc { border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.acc__item { border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 2px;
  background: none;
  border: 0;
  color: inherit;
  font: 500 21px/1.3 var(--font-serif);
  text-align: left;
}
.acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.acc__icon::before { left: 0; right: 0; top: 6px; height: 1px; }
.acc__icon::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.acc__item.is-open .acc__icon::after { opacity: 0; transform: rotate(90deg); }
.acc__panel { display: grid; grid-template-rows: 1fr; }
.js .acc__panel { grid-template-rows: 0fr; }
.js .acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__content { padding: 2px 2px 26px; color: var(--muted); font-size: 15.5px; }
.no-js .acc__icon { display: none; }

/* Pull quotes, asymmetric: the first set enormous and left, the second
   smaller and pushed right, a vertical gold tick between them. */
.quote { text-align: left; }
.quote blockquote {
  font: italic 400 clamp(30px, 18px + 3vw, 60px)/1.25 var(--font-serif);
  letter-spacing: -0.008em;
  max-width: 17em;
}
.quote + .rule + .quote { margin-left: auto; max-width: min(640px, 88%); }
.quote + .rule + .quote blockquote {
  font-size: clamp(24px, 16px + 1.6vw, 36px);
  line-height: 1.35;
}
.quote figcaption {
  margin-top: 24px;
  font: 500 11.5px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Short vertical gold tick, used as a quiet divider on the thread motif */
.rule {
  width: 1px;
  height: clamp(48px, 6vw, 72px);
  background: var(--gold);
  border: 0;
  margin: clamp(40px, 5vw, 56px) auto;
}

/* Lightbox dialog (product page) */
.lightbox {
  border: 0;
  padding: 0;
  margin: auto;  /* centre in the viewport (global reset zeroes the UA margin) */
  background: transparent;
  max-width: min(94vw, 1080px);
  max-height: 92vh;
}
.lightbox::backdrop { background: color-mix(in srgb, var(--ink-900) 82%, transparent); }
.lightbox img {
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: var(--cream);
  border-radius: var(--radius);
}
.lightbox__close {
  margin: 0 0 12px auto;
  display: block;
  padding: 10px 18px;
  background: var(--ink-900);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox__close:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

/* Welcome modal: tasteful split layout (product | offer), shown once, gentle entrance. */
.welcome {
  width: min(860px, calc(100% - 36px));
  max-height: 92vh;
  margin: auto;  /* centre in the viewport (a global reset zeroes the UA margin) */
  padding: 0; border: 0; border-radius: var(--radius); overflow: auto;  /* scroll if a short screen cannot fit it */
  background: var(--cream); color: var(--text-on-light);
  box-shadow: 0 34px 90px color-mix(in srgb, var(--ink-900) 55%, transparent);
}
.welcome::backdrop { background: color-mix(in srgb, var(--ink-900) 74%, transparent); }
.welcome[open] { display: grid; }
@media (min-width: 720px) { .welcome[open] { grid-template-columns: 1fr 1.08fr; } }
.welcome__media { background: var(--ink-900); min-height: 220px; }
.welcome__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.welcome__body { position: relative; padding: clamp(30px, 4vw, 52px); }
.welcome__close { position: absolute; top: 12px; right: 14px; z-index: 2; padding: 8px; background: none; border: 0; cursor: pointer; font: 500 10.5px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted-light); }
.welcome__close:hover { color: var(--text-on-light); }
.welcome__h { margin: 12px 0 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; }
.welcome__h i { font-weight: 400; }
.welcome__sub { margin: 16px 0 22px; max-width: 34ch; font: 400 15px/1.55 var(--font-sans); color: var(--text-muted-light); }
.welcome__fine { margin: 14px 0 0; font: 400 11.5px/1.5 var(--font-sans); color: var(--text-muted-light); }
/* Phones: shrink the image and tighten copy so the whole offer fits without clipping.
   The Join button goes full width so it reads as one confident bar instead of a
   small control hanging in dead space. */
@media (max-width: 719px) {
  .welcome__media { min-height: 0; }
  .welcome__media img { height: 22vh; max-height: 170px; }
  .welcome__body .thread { height: 20px; }
  .welcome__h { margin-top: 8px; font-size: clamp(28px, 8vw, 38px); }
  .welcome__sub { margin: 10px 0 16px; }
  .welcome__body { padding: 22px 20px 22px; }
  .welcome .join { margin-top: 18px; }
  .welcome .join__row { gap: 14px; }
  .welcome .join__row .btn { flex: 1 1 100%; padding: 16px 32px; }
  .welcome__fine { margin-top: 12px; }
}
/* Short viewports (small/older phones, landscape): trim further so Join stays in view. */
@media (max-height: 660px) {
  .welcome__media img { height: 16vh; max-height: 120px; }
  .welcome__sub { margin: 10px 0 14px; }
  .welcome__body { padding: 18px 22px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .welcome { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
  @starting-style { .welcome[open] { opacity: 0; transform: translateY(10px) scale(0.985); } }
}

/* 6 · SECTIONS ---------------------------------------------------------------- */

/* 6.1 Announcement bar: static, no motion */
.announce {
  background: var(--ink-900);
  color: var(--cream);
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 11px 20px;
}

/* 6.2 Navigation: transparent over the hero, solid ink-900 with a 1px gold
   rule after 80px of scroll (class set by JS) */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
}
.site-head.is-solid, .site-head.is-open {
  background: var(--ink-900);
  box-shadow: 0 1px 0 var(--gold);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 500 21px/1 var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.12em;
  color: var(--text-on-dark);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .gem {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
/* The official logo, used as is at the brand's request. */
.wordmark__logo {
  display: block;
  height: clamp(36px, 4vw, 44px);
  width: auto;
}
.menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}
/* Search is a button and the rest of the nav are links, so every rule here has
   to name both. Styling only .menu a left Search inheriting the body font, so
   it sat larger and in mixed case beside the uppercase links. */
.menu a, .menu .srch__open {
  font: 500 11.5px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-decoration: none;
}
.menu a:hover, .menu .srch__open:hover { color: var(--gold-bright); }
@media (min-width: 920px) {
  .menu a, .menu .srch__open { position: relative; }
  .menu a::after, .menu .srch__open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: var(--gold-bright);
    transform: scaleX(0);
    transform-origin: left;
  }
  .menu a:hover::after, .menu a:focus-visible::after,
  .menu .srch__open:hover::after, .menu .srch__open:focus-visible::after { transform: scaleX(1); }
}
.nav-toggle {
  display: none;
  position: relative;
  z-index: 45;
  padding: 11px 18px;
  background: none;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 919px) {
  .nav-toggle { display: inline-block; }
  .menu {
    position: fixed;
    inset: 0;
    z-index: 30;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: calc(var(--nav-h) + 40px) clamp(24px, 9vw, 72px) 64px;
    background: var(--ink-900);
    visibility: hidden;
    opacity: 0;
  }
  html.menu-open .menu { visibility: visible; opacity: 1; }
  html.menu-open { overflow: hidden; }
  .menu a, .menu .srch__open {
    font: 500 clamp(30px, 7.5vw, 40px)/1.5 var(--font-serif);
    letter-spacing: 0.01em;
    text-transform: none;
  }
  /* Without JavaScript the toggle is dead, so the menu renders as a quiet
     static row under the wordmark instead of disappearing entirely. */
  html.no-js .nav { flex-wrap: wrap; }
  html.no-js .nav-toggle { display: none; }
  html.no-js .menu {
    position: static;
    visibility: visible;
    opacity: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 0 0 16px;
    background: none;
  }
  html.no-js .menu a, html.no-js .menu .srch__open {
    font: 500 11px/1.6 var(--font-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

/* 6.3 Hero */
.s-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 56px) 0 clamp(56px, 9vh, 96px);
  background: var(--ink-900);
  overflow: hidden;
}
.s-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}
.s-hero__video {
  /* Sits over the still poster, under the scrim. Hidden by default so the
     still is the fallback; shown only on desktop with motion allowed. */
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .s-hero__video { display: block; }
}
.s-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      94deg,
      var(--ink-900) 10%,
      color-mix(in srgb, var(--ink-900) 84%, transparent) 40%,
      color-mix(in srgb, var(--ink-900) 34%, transparent) 66%,
      color-mix(in srgb, var(--ink-900) 8%, transparent) 88%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--ink-900) 88%, transparent),
      color-mix(in srgb, var(--ink-900) 30%, transparent) 36%,
      transparent 62%
    );
  background-size: 130% 100%, 100% 100%;
}
.s-hero__content { position: relative; width: 100%; }
.s-hero__content h1 { margin-top: 22px; max-width: 9.5em; }
.s-hero h1 i {
  font-style: italic;
  font-weight: 400;
  padding-left: clamp(28px, 9vw, 150px);
}
.s-hero .thread--hero { margin: 36px 0 32px; }
.s-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
}
.s-hero__sub {
  max-width: 30em;
  font-size: 18px;
  color: var(--text-on-dark);
}
.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 36px;
}
@media (max-width: 767px) {
  .s-hero { align-items: flex-end; padding-bottom: 84px; }
  .s-hero__img { object-position: 92% 50%; }
  .s-hero__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--ink-900) 82%, transparent),
      color-mix(in srgb, var(--ink-900) 56%, transparent) 42%,
      var(--ink-900) 94%
    );
    background-size: 100% 130%;
  }
  .s-hero .thread--hero { margin: 24px 0 22px; }
}

/* 6.4 Provenance strip: one quiet line of facts, set like a colophon,
   separated by gold diamonds. */
.s-provenance {
  background: var(--ink-800);
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.s-provenance .wrap { padding-block: clamp(26px, 3.4vw, 42px); }
.s-provenance__award {
  text-align: center;
  margin: 0 0 16px;
  font: 600 12.5px/1.5 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.s-provenance ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(24px, 3.2vw, 48px);
  row-gap: 14px;
}
.s-provenance li { display: flex; align-items: center; }
.s-provenance li:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-left: clamp(24px, 3.2vw, 48px);
}
.s-provenance p {
  font: 500 12px/1.6 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}

/* 6.5 The collection: aligned rows, generous row rhythm. */
.s-collection__grid { grid-template-columns: 1fr; gap: clamp(48px, 5vw, 68px) var(--gap); }
@media (min-width: 640px) { .s-collection__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .s-collection__grid { grid-template-columns: repeat(3, 1fr); } }
.s-collection__grid:not(:empty) { min-height: 200px; }
.s-collection__foot { margin-top: clamp(44px, 5vw, 60px); text-align: center; }
.noscript-list { list-style: none; display: grid; gap: 12px; padding-block: 8px; }
.noscript-list a { color: inherit; }

/* 6.6 Ingredient transparency band, set like a tasting menu: numbered
   courses, large serif names, one benefit line, gold hairlines between.
   The chef is the brand fact; the typography says it. */
.s-ingredients { background: var(--ink-800); }
.s-ingredients .sec-head p { max-width: 54ch; font-size: 18px; color: var(--text); }
.ing {
  list-style: none;
  counter-reset: ing;
  max-width: 920px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.ing li {
  counter-increment: ing;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 20px;
  align-items: baseline;
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding: clamp(20px, 2.6vw, 30px) 0;
}
.ing li::before {
  content: counter(ing, decimal-leading-zero);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  color: var(--gold);
}
.ing h3 {
  font: 500 clamp(24px, 14px + 1.8vw, 36px)/1.12 var(--font-serif);
  letter-spacing: 0;
}
.ing p { grid-column: 2; font-size: 14.5px; color: var(--muted); }
@media (min-width: 800px) {
  .ing li { grid-template-columns: 64px 1fr minmax(220px, 34%); }
  .ing p { grid-column: auto; }
}
.ing .ing__in {
  grid-column: 2 / -1;
  margin-top: 2px;
  font: 500 10.5px/1.7 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.s-ingredients__foot { margin-top: clamp(44px, 5vw, 64px); }
.acc__more { margin-top: 20px; }

/* 6.6b Manifesto: one line, full size, nothing else. */
.s-manifesto__line {
  margin-top: 20px;
  font: italic 400 clamp(40px, 16px + 6.4vw, 112px)/1.08 var(--font-serif);
  letter-spacing: -0.01em;
  max-width: 11em;
}

/* 6.7 The beekeeper and the chef */
.s-story { background: var(--ink-900); }
.s-story__inner { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 980px) {
  .s-story__inner { grid-template-columns: 1.08fr 0.92fr; }
}
.s-story__fig {
  position: relative;
  /* The documentary photo bleeds to the viewport edge. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
@media (min-width: 980px) {
  .s-story__fig {
    width: auto;
    margin-left: calc(-1 * (100vw - min(100vw - 48px, 1360px)) / 2);
  }
}
.s-story__fig img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  /* Quiet film grade so the temporary photography sits in one palette. */
  filter: saturate(0.92) sepia(0.05) contrast(1.02);
}
.s-story__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink-900) 70%, transparent),
    transparent 58%
  );
}
.s-story .sec-head h2 { max-width: 11em; }
.s-story__copy p { max-width: 50ch; font-size: 17.5px; }
.s-story__copy .link { margin-top: 34px; }

/* 6.8 Hive to Table: the amber moment. The thread descends from the header
   toward the jar, and the one radial glow on the page sits behind it. */
.s-hive { background: var(--ink-900); text-align: center; overflow: hidden; }
.s-hive__body { max-width: 52ch; margin-inline: auto; }
.s-hive__fig {
  position: relative;
  width: min(520px, 86%);
  margin: clamp(48px, 6vw, 76px) auto;
}
.s-hive__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--amber) 38%, transparent) 18%,
    color-mix(in srgb, var(--amber) 16%, transparent) 52%,
    transparent 74%
  );
  pointer-events: none;
}
.s-hive__fig img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
}
.s-hive__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .s-hive__video { display: block; }
}
.s-hive__grid {
  max-width: 700px;
  margin-inline: auto;
  text-align: left;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .s-hive__grid { grid-template-columns: repeat(2, 1fr); } }
.s-hive__foot { margin-top: clamp(40px, 5vw, 52px); }

/* 6.9 Words from the hive */
.s-quotes .wrap { max-width: 1080px; }
.s-quotes__rating { margin: 12px 0 0; font: 500 13px/1.5 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-light); }
.s-quotes__stars { color: var(--gold); letter-spacing: 0.14em; margin-right: 6px; }
.quote__src { color: var(--muted); }
/* Reviews rotator: one quote at a time, gentle crossfade loop (luxury, slow).
   Items share one grid cell so the box holds the tallest quote, no layout jump. */
.reviews-rotator { display: grid; align-items: center; justify-items: center; text-align: center; margin-top: clamp(44px, 6vw, 80px); }
.reviews-rotator .review {
  grid-area: 1 / 1; margin: 0; max-width: 22em;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
  pointer-events: none;
}
.reviews-rotator .review.is-active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reviews-rotator blockquote { font: italic 400 clamp(22px, 16px + 1.4vw, 38px)/1.34 var(--font-serif); letter-spacing: -0.005em; }
.reviews-rotator figcaption { margin-top: 24px; font: 500 11.5px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* No rotation under reduced motion: show every review, stacked and static. */
@media (prefers-reduced-motion: reduce) {
  .reviews-rotator { display: block; }
  .reviews-rotator .review { opacity: 1; transform: none; max-width: 30em; margin: 0 auto; }
  .reviews-rotator .review + .review { margin-top: clamp(28px, 4vw, 48px); }
}

/* 6.10 The Honeycomb Press */
.s-press { background: var(--ink-800); text-align: center; }
.s-press .wrap { max-width: 640px; }
.s-press__body { color: var(--text); }
.join {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 40px auto 0;
  text-align: left;
}
.join label {
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.join__row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.join input {
  flex: 1 1 220px;
  padding: 12px 2px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 0;
  color: var(--text);
  font: 400 17px/1.4 var(--font-sans);
}
.join input:hover { border-bottom-color: var(--gold); }
.join input:focus-visible {
  outline: none;
  border-bottom-color: var(--gold-bright);
  box-shadow: 0 2px 0 0 var(--gold-bright);
}

/* 6.11 Footer */
.s-footer {
  background: var(--ink-900);
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  padding: clamp(64px, 7vw, 96px) 0 40px;
}
/* The sign-off: the official logo. Left on mobile, top-left of the grid on desktop. */
.s-footer__sign {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  padding-bottom: clamp(28px, 4.5vw, 52px);
  margin-bottom: clamp(44px, 6vw, 76px);
}
.s-footer__sign .wordmark__logo { height: clamp(64px, 9vw, 110px); }
.s-footer__top {
  display: grid;
  gap: 48px var(--gap);
  margin-bottom: clamp(48px, 6vw, 72px);
}
@media (min-width: 960px) {
  /* Logo sits top-left; link columns fill the row beside it; bar spans below. */
  .s-footer .wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(56px, 7vw, 112px);
    align-items: start;
  }
  .s-footer__sign {
    grid-column: 1; grid-row: 1;
    width: auto; align-self: start;
    border-bottom: none; padding-bottom: 0; margin-bottom: 0;
  }
  .s-footer__top {
    grid-column: 2; grid-row: 1; margin-bottom: 0;
    grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px var(--gap);
  }
  .s-footer__bottom { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(52px, 6vw, 80px); }
}
.s-footer__tagline {
  max-width: 22em;
  font: italic 400 clamp(19px, 12px + 1vw, 24px)/1.5 var(--font-serif);
  color: var(--text-muted-dark);
}
.s-footer__col h3 {
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.s-footer__col ul { list-style: none; }
.s-footer__col li { margin-bottom: 11px; }
.s-footer__col a {
  font-size: 13.5px;
  color: var(--text-muted-dark);
  text-decoration: none;
}
.s-footer__col a:hover { color: var(--text-on-dark); }
.s-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  padding-top: 26px;
  font-size: 12.5px;
  color: var(--text-muted-dark);
}
.s-footer__social { display: flex; gap: 26px; list-style: none; }
.s-footer__social a {
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  text-decoration: none;
}
.s-footer__social a:hover { color: var(--gold-bright); }
.s-footer__credit { width: 100%; margin-top: 6px; font-size: 12px; }
.s-footer__credit a {
  color: var(--text-muted-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
  text-underline-offset: 4px;
}
.s-footer__credit a:hover { color: var(--text-on-dark); }

/* 6.12 Product page */
.site-head--static {
  background: var(--ink-900);
  box-shadow: 0 1px 0 var(--gold);
}
.s-product__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 980px) {
  .s-product__grid { grid-template-columns: 1.08fr 0.92fr; }
  .s-product__details { position: sticky; top: calc(var(--nav-h) + 28px); }
}
.gallery { display: grid; gap: var(--gap); }
.gallery a { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery img { width: 100%; border-radius: var(--radius); }
.gallery__fig--pack a {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 9%;
  background: var(--cream-deep);
  box-shadow: 0 0 0 1px var(--edge);
  border-radius: var(--radius);
}
.gallery__fig--pack img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(1.06);
}
/* Gallery figures show the whole photograph, never a crop of it. Forcing a
   1/1, 16/9 or 2/3 frame onto a photo that is not that shape threw away up to
   58% of it: it sliced the corners off the gift box and cut two of the three
   products out of the gift card shot. That is what Gia meant by the pictures
   looking cut off. Every product lead is square anyway, so dropping the
   ratios changes nothing except that nothing is lost.
   tests/crop-check.mjs guards this. */
.gallery__fig--photo img { box-shadow: 0 0 0 1px var(--edge); }
.gallery__fig--tall img { filter: saturate(0.88) sepia(0.04); }
.gallery__fig--wide img { box-shadow: 0 0 0 1px var(--edge); }
.gallery__fig--video { position: relative; }
.gallery__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--edge);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .gallery__video { display: block; }
}

.s-product__details .eyebrow { margin-bottom: 16px; }
.s-product__details h1 {
  font-size: clamp(42px, 24px + 3.4vw, 76px);
  line-height: 1.02;
}
.s-product__price { margin-top: 16px; font: 500 18px/1 var(--font-sans); }
.s-product__desc { margin-top: 24px; max-width: 46ch; }
.s-product__cta { margin-top: 32px; }
/* Buy block: variant (flavor/scent) selector + quantity stepper + add-to-cart */
.s-product__buy { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pv, .pq { display: flex; flex-direction: column; gap: 12px; }
.pv__label, .pq__label {
  font: 500 11px/1.4 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.pv__opts { display: flex; flex-wrap: wrap; gap: 10px; max-width: 34em; }
.pv__opt {
  font: 500 13.5px/1 var(--font-sans); letter-spacing: 0.02em; color: var(--text);
  background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 100px; padding: 10px 18px; cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.pv__opt:hover { border-color: var(--gold); }
.pv__opt.is-selected { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
.pv__opt[data-soldout] { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; pointer-events: none; }
.pv__opt:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.pq__ctl {
  display: inline-flex; align-items: center; border-radius: 100px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.pq__btn {
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
  font: 400 20px/1 var(--font-sans); color: var(--text);
  transition: background-color var(--dur-hover) var(--ease);
}
.pq__btn:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.pq__btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.pq__num {
  width: 46px; height: 44px; text-align: center; border: 0; background: transparent;
  color: var(--text); font: 500 15px/1 var(--font-sans);
  border-inline: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.pq__num:focus-visible { outline: none; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.s-product__note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.s-product__batchline { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.s-product__batchline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.s-product__batchline a:hover { color: var(--text); }
.s-product__details .acc { margin-top: 44px; }

.glossary { display: grid; gap: 16px 36px; margin: 0; }
@media (min-width: 1100px) { .glossary { grid-template-columns: 1fr 1fr; } }
.glossary dt { font: 500 14px/1.45 var(--font-sans); color: var(--text); }
.glossary dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.pairs { margin-top: clamp(60px, 7vw, 110px); }
.pairs h2 { font-size: clamp(30px, 18px + 2vw, 46px); margin-bottom: 32px; }
.pairs .grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pairs .grid { grid-template-columns: repeat(2, 1fr); } }

/* 6.13 Story page */
.s-opener { background: var(--ink-900); }
.s-opener .wrap { padding-block: clamp(96px, 14vw, 180px) clamp(72px, 9vw, 120px); }
.s-opener h1 { max-width: 12em; }
.s-opener .sec-head { margin-bottom: 0; }
.s-opener .sec-body { margin-top: 28px; max-width: 58ch; font-size: 17px; }

.s-keepers__inner { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 980px) {
  .s-keepers__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.s-keepers__panel {
  background: var(--cream-deep);
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--edge);
}
.s-keepers__panel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 1px;
  filter: saturate(0.92) sepia(0.05) contrast(1.02);
}
.s-keepers__copy .sec-head { margin-bottom: 26px; }
.s-keepers__copy h2 { font-size: clamp(36px, 18px + 2.6vw, 60px); }
.s-keepers__copy p { max-width: 54ch; }
.s-keepers__copy .link { margin-top: 34px; display: inline-block; }

.s-standard { background: var(--ink-800); }
.standard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px) var(--gap);
}
@media (min-width: 760px) { .standard-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 5vw, 56px) clamp(48px, 5vw, 72px); } }
.standard-grid > div {
  border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  padding-top: 20px;
}
.standard-grid h3 { font: 500 15px/1.4 var(--font-sans); letter-spacing: 0.01em; }
.standard-grid p { margin-top: 8px; font-size: 15.5px; color: var(--muted); max-width: 44ch; }
.pull-line {
  margin-top: 14px;
  font: italic 400 clamp(26px, 14px + 1.8vw, 40px)/1.3 var(--font-serif);
  color: var(--gold-bright);
  max-width: 18em;
}

.s-cta { background: var(--ink-900); text-align: center; }
.s-cta .sec-head { margin-bottom: 36px; }

/* 6.14 Ingredient library */
.s-library { background: var(--ink-800); }
.s-library .sec-head p { max-width: 54ch; font-size: 18px; color: var(--text); }
.s-library .ing { max-width: 1040px; }
.s-library__note { margin-top: clamp(40px, 5vw, 56px); font-size: 13px; color: var(--muted); }
.ing__group { margin: clamp(52px, 6vw, 76px) 0 clamp(6px, 1.5vw, 12px); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); }
.s-library__lead { max-width: 62ch; font-size: 15px; color: var(--muted); margin: 0 0 clamp(20px, 2.5vw, 28px); }
.ing-all { list-style: none; margin: 0; padding: 0; max-width: 1040px; column-width: 210px; column-gap: 40px; }
.ing-all li { break-inside: avoid; padding: 9px 2px; font-size: 14.5px; line-height: 1.35; color: var(--text); border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.ing-all--honey { column-width: 190px; }
.ing__fn { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }

/* 6.15 Batch lookup */
.s-batch { background: var(--ink-900); }
.s-batch .wrap { max-width: 780px; }
.s-batch .sec-body { max-width: 50ch; font-size: 17.5px; }
.s-batch .join { margin: 32px 0 0; }
.s-batch__sample { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.batch-card {
  margin-top: clamp(36px, 5vw, 56px);
  /* The honeycomb line pattern from the brand's own gift box, at whisper
     opacity. Packaging language on the provenance card only. */
  background: var(--ink-700) url("../img/brand/honeycomb.svg");
  background-size: 49px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--edge);
  padding: clamp(28px, 4.5vw, 48px);
  outline: none;
}
.batch-card .eyebrow { margin-bottom: 12px; }
.batch-card h2 {
  font-size: clamp(28px, 18px + 1.8vw, 42px);
  max-width: none;
  margin-bottom: 22px;
}
.batch-card dl { display: grid; gap: 12px; margin: 0 0 26px; }
.batch-card dl div {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 16px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  padding-top: 12px;
}
.batch-card dt {
  font: 500 11px/1.9 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.batch-card dd { margin: 0; font-size: 15.5px; }
.batch-card__miss { font-size: 16.5px; }
.batch-card__miss a { text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* 6.16 Mobile buy bar, product page. A fixed quiet bar, not a popup:
   nothing is overlaid or blocked, it appears only after the primary
   call to action scrolls out of view on small screens. */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(20px, 5vw, 28px) calc(12px + env(safe-area-inset-bottom));
  background: var(--ink-900);
  border-top: 1px solid var(--gold);
}
.js .buybar {
  display: flex;
  transform: translateY(102%);
  visibility: hidden;
}
.buybar.is-visible { transform: none; visibility: visible; }
@media (min-width: 920px) { .js .buybar { display: none; } }
.buybar__price { font: 500 15px/1.3 var(--font-sans); color: var(--text-on-dark); white-space: nowrap; }
.buybar .btn { padding: 13px 26px; }

/* Inline newsletter validation in the design language */
.join__error {
  min-height: 1.3em;
  margin-top: 2px;
  font-size: 13px;
  color: var(--gold-bright);
}
.join.is-invalid input {
  border-bottom-color: var(--gold-bright);
  box-shadow: 0 1px 0 0 var(--gold-bright);
}
/* Confirmation state: collapse the row, show the thank-you (color inherits so
   it reads on both the dark press section and the cream welcome modal). */
.join.is-sent .join__row,
.join.is-sent label,
.join.is-sent .join__error { display: none; }
.join__success { margin: 8px 0 0; font: 500 15px/1.55 var(--font-sans); }

/* 6.17 The journal */
.s-journal { background: var(--ink-900); }
.s-journal .wrap { max-width: 880px; }
.entry-card {
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding: 30px 0;
  display: grid;
  gap: 10px;
}
.entry-card time {
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry-card h2 { font-size: clamp(30px, 16px + 2.6vw, 54px); max-width: none; }
.entry-card h2 a { text-decoration: none; color: inherit; }
.entry-card h2 a:hover { color: var(--gold-bright); }
.entry-card p { color: var(--muted); max-width: 60ch; }
.entry-card .link { justify-self: start; margin-top: 6px; }

.article { background: var(--ink-900); }
.article .wrap { max-width: 760px; }
.article h1 { font-size: clamp(40px, 20px + 4vw, 88px); }
.article__date {
  display: block;
  margin-top: 20px;
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.article__body { margin-top: clamp(36px, 5vw, 56px); }
.article__body p { font-size: 17.5px; max-width: 60ch; }
.article__body p + p { margin-top: 22px; }
.article__foot { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 18px 40px; }

.s-press__more { margin-top: 28px; }

.article__media { margin-top: clamp(32px, 4vw, 48px); }
.article__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* Brand element previews */
.element-video, .element-img {
  display: block;
  width: min(560px, 100%);
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.element-swatch {
  width: min(560px, 100%);
  height: 180px;
  border-radius: var(--radius);
  background: var(--ink-700) url("../img/brand/honeycomb.svg");
  background-size: 49px;
  box-shadow: 0 0 0 1px var(--edge);
}
.element-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }

/* 6.18 Storefront: cart, accounts, pagination, merchant rich text.
   Used by the Shopify theme; harmless and inert on the static site. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(44px, 5vw, 64px);
}
.pagination__count {
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart-table, .data-table { width: 100%; border-collapse: collapse; }
.cart-table th, .data-table th {
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.cart-table td, .data-table td {
  padding: 20px 12px 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  vertical-align: top;
  font-size: 15px;
}
.data-table tfoot td { border-bottom: 0; padding: 14px 12px 6px 0; }
.cart-table__num { text-align: right; padding-right: 0; }
th.cart-table__num { padding-right: 0; }
.cart-table__media { width: 92px; }
.cart-table__media img {
  background: var(--panel);
  padding: 6px;
  border-radius: 1px;
  width: 80px;
  height: 80px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.cart-table__title {
  font: 500 20px/1.3 var(--font-serif);
  color: inherit;
  text-decoration: none;
}
.cart-table__title:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.cart-table__variant, .cart-table__each { margin-top: 4px; font-size: 13px; color: var(--muted); }
.cart-table__remove {
  display: inline-block;
  margin-top: 10px;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.qty {
  width: 76px;
  padding: 8px 2px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 0;
  color: var(--text);
  font: 500 16px/1.2 var(--font-sans);
  text-align: center;
}

.cart-foot {
  display: grid;
  gap: 40px;
  margin-top: clamp(36px, 5vw, 52px);
}
@media (min-width: 760px) { .cart-foot { grid-template-columns: 1fr minmax(320px, 420px); } }
.join__label-quiet, .cart-foot__note label {
  display: block;
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cart-foot__note textarea {
  width: 100%;
  padding: 10px 2px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 0;
  color: var(--text);
  font: 400 16px/1.5 var(--font-sans);
  resize: vertical;
}
.cart-foot__subtotal {
  display: flex;
  justify-content: space-between;
  font: 500 24px/1.2 var(--font-serif);
}
.cart-foot__shipping { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cart-foot__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.form-stack { display: grid; gap: 20px; max-width: 480px; }
.form-field label {
  display: block;
  font: 500 11px/1.6 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.form-field input {
  width: 100%;
  padding: 10px 2px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 0;
  color: var(--text);
  font: 400 16px/1.4 var(--font-sans);
}
.form-field input:hover { border-bottom-color: var(--gold); }
.form-field input:focus-visible {
  outline: none;
  border-bottom-color: var(--gold-bright);
  box-shadow: 0 2px 0 0 var(--gold-bright);
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 6px; }
.form-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.form-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.form-section {
  margin-top: clamp(44px, 6vw, 64px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  padding-top: 30px;
  max-width: 640px;
}
.form-section__title { font-size: clamp(24px, 16px + 1.2vw, 32px); max-width: none; margin-bottom: 10px; }
.form-section__note { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.address-edit { margin-top: 14px; }
.address-edit summary { cursor: pointer; list-style: none; }
.address-edit summary::-webkit-details-marker { display: none; }
.address-edit[open] summary { margin-bottom: 18px; }

/* Merchant rich text from the Shopify editor */
.rte p { margin: 0 0 18px; max-width: 60ch; }
.rte h2, .rte h3 { font-size: clamp(24px, 16px + 1.4vw, 36px); max-width: none; margin: 32px 0 12px; }
.rte ul, .rte ol { margin: 0 0 18px; padding-left: 22px; max-width: 58ch; }
.rte li { margin-bottom: 8px; }
.rte a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.rte img { border-radius: var(--radius); margin: 24px 0; }
.rte blockquote {
  margin: 28px 0;
  font: italic 400 clamp(22px, 16px + 1.4vw, 32px)/1.35 var(--font-serif);
  max-width: 22em;
}

/* 7 · MOTION ------------------------------------------------------------------
   Every transition and animation on the site lives inside this gate.
   With prefers-reduced-motion: reduce, all of it collapses to instant. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .site-head { transition: background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }

  .btn { transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
  .link, .card__view { transition: color var(--dur-hover) var(--ease), text-decoration-color var(--dur-hover) var(--ease); }
  .menu a, .s-footer a, .lightbox__close { transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
  .menu a::after { transition: transform 280ms var(--ease-out); }
  .join input { transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }

  /* The thread draws itself in like a slow drip, then brightens once.
     Both ride the same IntersectionObserver class. */
  .js .thread {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 800ms var(--ease-out), background-color var(--dur-thread) ease;
  }
  .js .thread.is-lit { transform: scaleY(1); }
  .js .s-hero .thread--hero { transition-delay: 240ms, 0ms; }

  .buybar { transition: transform 300ms var(--ease-out), visibility 0s linear 300ms; }
  .buybar.is-visible { transition: transform 300ms var(--ease-out); }

  .acc__panel { transition: grid-template-rows 300ms var(--ease); }
  .acc__icon::before { transition: transform 300ms var(--ease); }
  .acc__icon::after { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }

  /* Section content fades up 16px on first reveal. The .js gate means a
     visitor without JavaScript never sees hidden content. */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Cards and gallery frames breathe on hover. Movement is scale only,
     clipped by their frames, and exists solely inside this gate. */
  .card__media { transition: box-shadow var(--dur-hover) var(--ease); }
  .card__media img { transition: transform 700ms var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.02); }
  .gallery a img { transition: transform 700ms var(--ease-out); }
  .gallery a:hover img { transform: scale(1.015); }

  /* The overlay menu is a veil: it fades, then the serif links rise in
     sequence. Visibility waits for the fade on the way out. */
  @media (max-width: 919px) {
    .menu { transition: opacity 340ms var(--ease), visibility 0s linear 340ms; }
    html.menu-open .menu { transition: opacity 340ms var(--ease); }
    .js .menu li {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
    }
    html.menu-open .menu li { opacity: 1; transform: none; }
    .menu li:nth-child(1) { transition-delay: 50ms; }
    .menu li:nth-child(2) { transition-delay: 100ms; }
    .menu li:nth-child(3) { transition-delay: 150ms; }
    .menu li:nth-child(4) { transition-delay: 200ms; }
    .menu li:nth-child(5) { transition-delay: 250ms; }
  }

  /* The lightbox arrives, it does not pop. */
  .lightbox[open] {
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  }
  .lightbox[open]::backdrop {
    opacity: 1;
    transition: opacity 250ms var(--ease);
  }
  @starting-style {
    .lightbox[open] { opacity: 0; transform: scale(0.985); }
    .lightbox[open]::backdrop { opacity: 0; }
  }

  /* The hero image settles once on load. Scale only, so the largest
     paint is never delayed, and a screenshot after it ends is identical. */
  .js .s-hero__img { animation: hero-settle 1400ms var(--ease-out) both; }
  @keyframes hero-settle {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
  }

  /* First-visit entrance: an ink veil with the wordmark that lifts after
     a beat. Injected by JS once per session, motion-allowed only, and
     pointer-events: none so nothing is ever blocked. Not a popup: it is
     a load transition with no content and no dismissal. */
  .curtain {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: var(--ink-900);
    pointer-events: none;
    animation: curtain-lift 600ms var(--ease-out) 700ms forwards;
  }
  .curtain__mark {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font: 500 clamp(22px, 3vw, 34px)/1 var(--font-serif);
    font-variant-caps: small-caps;
    letter-spacing: 0.14em;
    color: var(--text-on-dark);
    opacity: 0;
    animation: curtain-mark 450ms ease-out 100ms forwards;
  }
  .curtain__mark .gem {
    width: 0.28em;
    height: 0.28em;
    background: var(--gold);
    transform: rotate(45deg);
  }
  .curtain__logo { display: block; height: clamp(64px, 9vw, 104px); width: auto; }
  @keyframes curtain-lift {
    to { transform: translateY(-101%); }
  }
  @keyframes curtain-mark {
    to { opacity: 1; }
  }

  /* Scroll signature: the gold thread drawn down the left margin as the
     page is read. The element is injected by JS only on wide viewports
     with motion allowed, so it never exists for reduced motion or phones. */
  .thread-progress {
    position: fixed;
    top: 0;
    left: clamp(14px, 1.8vw, 30px);
    width: 1px;
    height: calc(var(--read, 0) * 100vh);
    background: color-mix(in srgb, var(--gold) 65%, transparent);
    z-index: 35;
    pointer-events: none;
  }

  /* One slow ambient drift in the hero scrim. Subtle enough that a
     screenshot looks identical to the live page. */
  .s-hero__scrim { animation: hero-drift 12s ease-in-out infinite alternate; }
  @keyframes hero-drift {
    from { background-position: 0% 0; }
    to { background-position: 16% 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* 8 · SHOP PAGE -------------------------------------------------------------- */
.s-shophero {
  background: var(--cream);
  color: var(--text-on-light);
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(24px, 4vw, 48px);
}
.s-shophero__h { font-size: clamp(34px, 9vw, 120px); margin: 18px 0 0; }
.s-shophero__h i { font-weight: 400; }
.s-shophero__sub {
  margin-top: clamp(20px, 3vw, 32px); max-width: 56ch;
  font: 400 clamp(15px, 13px + 0.4vw, 18px)/1.6 var(--font-sans);
  color: var(--text-muted-light);
}
.s-shop { background: var(--cream); color: var(--text-on-light); padding-block: clamp(40px, 6vw, 80px); }
.s-shop:nth-of-type(even) { background: var(--cream-deep); }
.s-shop__head { margin-bottom: clamp(28px, 4vw, 44px); }
.s-shop__head .thread { display: block; width: 1px; height: 56px; background: var(--gold); margin-bottom: 18px; }
.s-shop__intro {
  margin-top: 10px; max-width: 48ch;
  font: 400 clamp(14px, 12px + 0.4vw, 17px)/1.55 var(--font-sans);
  color: var(--text-muted-light);
}
.grid--shop {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 48px) var(--gap);
}
@media (min-width: 760px) { .grid--shop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) { .grid--shop { grid-template-columns: repeat(4, 1fr); } }

/* 9 · HONEY LANDING ---------------------------------------------------------- */
.s-honeyhero { position: relative; min-height: clamp(520px, 82vh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.s-honeyhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.s-honeyhero__video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) { .s-honeyhero__video { display: block; } }
.s-honeyhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 30%, transparent) 0%, color-mix(in srgb, var(--ink-900) 14%, transparent) 42%, color-mix(in srgb, var(--ink-900) 88%, transparent) 100%); }
.s-honeyhero .wrap { position: relative; z-index: 2; padding-bottom: clamp(40px, 7vw, 92px); padding-top: calc(var(--nav-h) + 40px); }
.s-honeyhero__content { max-width: 40ch; }
.s-honeyhero h1 { font-size: clamp(48px, 9vw, 132px); }
.s-honeyhero h1 i { font-weight: 400; }
.s-honeyhero__sub { margin: 0 0 28px; max-width: 46ch; font: 400 clamp(15px, 13px + 0.5vw, 19px)/1.55 var(--font-sans); color: var(--text-on-dark); }
/* Eyebrow sits over the bright pour, where gold blends in; use cream + a soft
   shadow so the label reads against the honey. */
.s-honeyhero .eyebrow { color: var(--text-on-dark); text-shadow: 0 1px 12px color-mix(in srgb, var(--ink-900) 60%, transparent); }
.s-honeystory { background: var(--cream); color: var(--text-on-light); }
.s-honeystory__inner { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 860px) { .s-honeystory__inner { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.s-honeystory h2 { font-size: clamp(34px, 5vw, 72px); margin-top: 14px; }
.s-honeystory__copy p { margin: 0 0 18px; max-width: 56ch; font: 400 clamp(15px, 13px + 0.4vw, 18px)/1.65 var(--font-sans); color: var(--text-muted-light); }
.s-honeystory .thread { display: block; width: 1px; height: 56px; background: var(--gold); }

/* product page breadcrumb */
.s-product__crumb { margin: 0 0 clamp(20px, 3vw, 36px); font: 500 11.5px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted-light); }
.s-product__crumb a { color: var(--accent-label); text-decoration: none; }
.s-product__crumb a:hover { color: var(--accent-label-hover); }

/* Legal / statement pages (accessibility, etc.) */
.s-legal .wrap { max-width: 760px; }
.s-legal h1 { margin: 4px 0 6px; }
.s-legal__body { margin-top: clamp(20px, 3vw, 30px); }
.s-legal__body h2 { font-size: clamp(18px, 14px + 0.6vw, 23px); margin: clamp(26px, 3vw, 36px) 0 8px; }
.s-legal__body p { margin: 0 0 12px; max-width: 64ch; }
.s-legal__body ul { margin: 0 0 14px; padding-left: 20px; }
.s-legal__body li { margin: 0 0 6px; max-width: 64ch; }
.s-legal__date { font-size: 13px; color: var(--muted); margin-top: 20px; }
.join__fine { margin: 12px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--muted); }
/* Fine-print links read inline, not as loud uppercase CTAs. */
.join__fine .link, .welcome__fine .link {
  display: inline; font: inherit; letter-spacing: 0; text-transform: none;
  color: var(--text); text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .s-press .join__row .btn { flex: 1 1 100%; }
}

/* 6.30 Site search ------------------------------------------------------- */
/* Opened from the header. Overlay so it works identically on every page
   without reserving header width on narrow screens. */
/* Strip the button chrome only. Font, letter-spacing and colour are set with
   the nav links further up, so this must not reset them back to inherit. */
.menu .srch__open { background: none; border: 0; padding: 0; cursor: pointer; }

.srch { position: fixed; inset: 0; z-index: 120; display: none;
        background: color-mix(in srgb, var(--ink-900) 72%, transparent); }
.srch.is-open { display: block; }
body.search-open { overflow: hidden; }

.srch__panel { max-width: 640px; margin: 12vh auto 0; background: var(--cream);
               border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
               padding: 26px 26px 22px; }
.srch__row { display: flex; align-items: center; gap: 14px; }
.srch__field { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--gold);
               padding: 10px 2px; font-family: inherit; font-size: 19px; color: var(--text-on-light); }
.srch__field:focus { outline: none; border-bottom-color: var(--gold-bright); }
.srch__field::placeholder { color: var(--text-muted-light); }
.srch__close { background: none; border: 0; cursor: pointer; font-size: 12px; letter-spacing: 0.18em;
               text-transform: uppercase; color: var(--text-muted-light); padding: 6px; }
.srch__close:hover { color: var(--text-on-light); }

.srch__list { list-style: none; margin: 18px 0 0; padding: 0; }
.srch__list li + li { border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.srch__hit { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
             padding: 12px 2px; text-decoration: none; color: var(--text-on-light); }
.srch__hit:hover { color: var(--gold); }
.srch__name { font-size: 15.5px; }
.srch__price { font-size: 13px; color: var(--text-muted-light); white-space: nowrap; }
.srch__none { margin: 18px 0 0; font-size: 14.5px; color: var(--text-muted-light); }

@media (max-width: 620px) {
  .srch__panel { margin: 0; max-width: none; min-height: 100%; border: 0; padding: 20px 18px; }
}