@charset "UTF-8";

/* ==========================================================================
   HoneyTea Company — design system
   --------------------------------------------------------------------------
   Palette sampled directly from the live site so the rebuild stays recognisably
   the same brand: cream ground, charcoal ink, the honey-amber band, and the
   stone panels. Flavour accents are sampled from the can artwork.

   Type pairs Cormorant Garamond (display) with Inter (text/UI), self-hosted as
   latin-subset woff2. Everything is fluid; nothing depends on a JS-set width.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------- 2. Tokens */

:root {
  color-scheme: light;

  /* Ground & ink -------------------------------------------------------- */
  --cream:      #fffcee;
  --cream-deep: #fdf6e0;
  --stone:      #ebe7d3;
  --sand:       #e3dfca;
  --ink:        #222830;
  --ink-soft:   #55595d;
  /* Tertiary grey. Chosen so 12px text still clears 4.5:1 on the *darkest*
     surface it is used on (stone #ebe7d3), not just on white — the original
     #8b8d8f measured 2.7:1 there. */
  --ink-faint:  #63666a;
  --line:       #ddd8c4;
  --line-soft:  #ece7d6;
  --white:      #ffffff;

  /* Honey --------------------------------------------------------------- */
  --honey:      #ffd279;
  --honey-warm: #f7bf4e;
  --honey-deep: #a86f0c;   /* AA on cream */

  /* Flavour accents (sampled from can artwork) --------------------------- */
  --lemon:            #d58c3c;
  --lemon-ink:        #8a5410;
  --lemon-tint:       #fbf0dc;
  --cinnamon:         #c3805e;
  --cinnamon-ink:     #8c4a2c;
  --cinnamon-tint:    #f8eae2;
  --elderflower:      #0192c5;
  --elderflower-ink:  #0a5e7e;
  --elderflower-tint: #e4f0f6;

  /* Semantic ------------------------------------------------------------ */
  --accent:      var(--ink);
  --accent-ink:  var(--honey-deep);
  --accent-tint: var(--stone);
  --success:     #2f6b46;
  --alert:       #8c3a2c;

  /* Type ---------------------------------------------------------------- */
  --display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--2: clamp(0.69rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.29vw, 1.38rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.48vw, 1.75rem);
  --step-3:  clamp(1.73rem, 1.57rem + 0.78vw, 2.22rem);
  --step-4:  clamp(2.07rem, 1.83rem + 1.2vw, 2.81rem);
  --step-5:  clamp(2.49rem, 2.11rem + 1.85vw, 3.58rem);
  /* The two largest steps must still fit a long word on a 390px screen —
     "Green tea, honey," at the old 3.58rem minimum overflowed the viewport. */
  --step-6:  clamp(2.35rem, 1.6rem + 3.2vw, 4.4rem);
  --step-7:  clamp(2.7rem, 1.55rem + 5vw, 5.4rem);

  /* Space --------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section: clamp(3.5rem, 2.2rem + 6.2vw, 7.5rem);
  --gutter:  clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --measure: 62ch;
  --wide:    82rem;
  --narrow:  46rem;

  /* Surfaces ------------------------------------------------------------ */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --pill:      999px;
  --shadow-sm: 0 1px 2px rgb(34 40 48 / 0.05), 0 2px 8px rgb(34 40 48 / 0.04);
  --shadow:    0 2px 6px rgb(34 40 48 / 0.05), 0 12px 32px -12px rgb(34 40 48 / 0.14);
  --shadow-lg: 0 4px 12px rgb(34 40 48 / 0.06), 0 32px 64px -24px rgb(34 40 48 / 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;

  --header-h: 68px;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-consent: 100;
}

/* --------------------------------------------------------------- 3. Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body[data-locked] { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
/* :where() keeps this reset at zero specificity. Bare `ul[class]` scores
   (0,1,1) and so beat every single-class rule that set padding or margin on a
   list — .hero__foot, .claims__list and .buy-meta all lost their spacing to it
   silently. Zero specificity still clears the UA defaults, which is all the
   reset is for. */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:where(a) { color: inherit; }
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------- 4. Typography */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-wrap: balance;
  /* Cormorant defaults to old-style figures, which turn "£17.99" into
     something closer to "£i7.99". Prices must use lining figures. */
  font-variant-numeric: lining-nums;
}
.price, .cart-total strong, .drawer__title { font-variant-numeric: lining-nums tabular-nums; }

h4, h5, h6 {
  font-family: var(--text);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.t-hero    { font-size: var(--step-7); }
.t-display { font-size: var(--step-6); }
.t-h1      { font-size: var(--step-5); }
.t-h2      { font-size: var(--step-4); }
.t-h3      { font-size: var(--step-3); }
.t-h4      { font-size: var(--step-2); }

/* Small-caps label used for eyebrows, nav and buttons */
.eyebrow {
  font-family: var(--text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
  display: block;
}
.eyebrow--accent { color: var(--accent-ink); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-3); margin-top: 1.8em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; }
.prose a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--honey-deep); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tnum  { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 5. Layout */

.container {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--narrow); }
.container--flush  { max-width: none; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--stone { background: var(--stone); }
.section--sand  { background: var(--sand); }
.section--deep  { background: var(--ink); color: var(--cream); }
.section--deep .eyebrow,
.section--deep .lede,
.section--deep .muted { color: rgb(255 252 238 / 0.72); }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--sp-7);
}
.section-head__text { max-width: 46rem; }
.section-head h2 + .lede { margin-top: var(--sp-4); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.skip-link {
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  transform: translateY(-200%);
  background: var(--ink); color: var(--cream);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--pill);
  z-index: 200;
  transition: transform 180ms var(--ease);
}
.skip-link:focus { transform: none; }

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

/* -------------------------------------------------------------- 6. Media */

.pic {
  display: block;
  position: relative;
  aspect-ratio: var(--img-ratio, 1);
  overflow: hidden;
  background-color: var(--img-color, var(--stone));
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}
.pic__img {
  width: 100%; height: 100%;
  object-fit: var(--img-fit, cover);
  object-position: var(--img-pos, 50% 50%);
  border-radius: inherit;
}
/* Fade the blur out once the real bitmap has painted. */
.pic__img { animation: pic-in 520ms var(--ease) both; }
@keyframes pic-in { from { opacity: 0; } to { opacity: 1; } }

.pic--contain { --img-fit: contain; }
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone);
}

figure.figure { margin: 0; }
figure.figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ 7. Buttons */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95em 1.9em;
  min-height: 48px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 160ms var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--honey   { --btn-bg: var(--honey); --btn-fg: var(--ink); --btn-bd: var(--honey); }
.btn--honey:hover { --btn-bg: var(--honey-warm); --btn-bd: var(--honey-warm); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.btn--quiet   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--quiet:hover { --btn-bd: var(--ink); --btn-bg: transparent; }
.btn--onDark  { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.btn--block   { display: flex; width: 100%; }
.btn--sm      { padding: 0.7em 1.4em; min-height: 40px; font-size: var(--step--2); }
.btn--lg      { padding: 1.1em 2.4em; min-height: 56px; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.45; pointer-events: none;
}
.btn .icon { flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.link-arrow:hover { gap: 0.95em; color: var(--honey-deep); }
.link-arrow .icon { width: 1.1em; height: 1.1em; }

.text-link {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-link:hover { color: var(--honey-deep); }

/* --------------------------------------------------------- 8. Announcement */

.announce {
  background: var(--ink);
  color: var(--cream);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-align: center;
  position: relative;
  z-index: calc(var(--z-header) + 1);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap;
  min-height: 38px; padding: 0.5rem var(--gutter);
  text-decoration: none;
}
.announce code {
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: 0.14em;
  background: var(--honey);
  color: var(--ink);
  padding: 0.15em 0.6em;
  border-radius: 4px;
}

/* ------------------------------------------------------------- 9. Header */

.header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease), background 260ms var(--ease);
}
.header[data-stuck] { border-bottom-color: var(--line-soft); }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.header__nav { display: none; }
.header__brand { justify-self: center; }
.header__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-1); }

.brand-logo { display: block; width: clamp(120px, 15vw, 156px); }
.brand-logo img { width: 100%; height: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-link {
  position: relative;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-2) 0;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current='page']::after { transform: scaleX(1); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--pill);
  position: relative;
  transition: background 200ms var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

.cart-count {
  position: absolute; top: 5px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: var(--pill);
  font-size: 10px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform 260ms var(--ease-out);
}
.cart-count[data-has] { transform: scale(1); }

@media (min-width: 62em) {
  :root { --header-h: 78px; }
  .header__nav { display: block; justify-self: start; }
  .header__menu-btn { display: none; }
}

/* ------------------------------------------------- 10. Drawers & overlays */

.overlay {
  position: fixed; inset: 0;
  background: rgb(34 40 48 / 0.42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: var(--z-drawer);
}
.overlay[data-open] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; bottom: 0;
  width: min(28rem, 100vw);
  background: var(--cream);
  z-index: calc(var(--z-drawer) + 1);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transition: transform 420ms var(--ease-out), visibility 420ms;
  visibility: hidden;
}
.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left  { left: 0;  transform: translateX(-100%); width: min(24rem, 100vw); }
.drawer[data-open] { transform: none; visibility: visible; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__title { font-family: var(--display); font-size: var(--step-2); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.drawer__foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  background: var(--cream-deep);
}

.drawer-nav { display: grid; gap: var(--sp-2); }
.drawer-nav a {
  font-family: var(--display);
  font-size: var(--step-3);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------- 11. Cart line */

.cart-line {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}
.cart-line:last-child { border-bottom: 0; margin-bottom: 0; }
.cart-line__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.cart-line__title { font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
.cart-line__meta { font-size: var(--step--2); color: var(--ink-soft); margin-top: 2px; }
.cart-line__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3);
}

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--pill);
}
.qty button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--pill);
  transition: background 180ms var(--ease);
}
.qty button:hover { background: var(--stone); }
.qty output {
  min-width: 2ch; text-align: center;
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
}

.cart-empty { text-align: center; padding: var(--sp-8) var(--sp-4); }
.cart-empty .icon { margin-inline: auto; color: var(--ink-faint); }

.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--step-1); margin-bottom: var(--sp-2);
}
.cart-total strong { font-family: var(--display); font-size: var(--step-2); }

/* ---------------------------------------------------------------- 12. Hero */

/* Height is tied to viewport WIDTH, not just height, because the hero video is
   16:9 and object-fit:cover scales it to the hero's width. The bottle occupies
   source rows 45–975 of 1080 — cap down to the honey pool that spreads as the
   clip runs — so the hero must show ~930 of those rows or the product loses its
   cap or its base. 51vw delivers that with ~25px of clearance at both ends; the
   620px floor keeps short-and-wide laptops from collapsing the hero, and 92svh
   stops it running away on tall screens.
   `node tools/hero-crop.mjs` re-checks all of this across viewports. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(92svh, max(620px, 51vw));
  display: grid;
  align-items: end;
  color: var(--cream);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .pic { width: 100%; height: 100%; aspect-ratio: auto; }
/* Sits over the poster and fades in only once it is actually playing, so a
   video that never loads leaves the photograph in place rather than a black
   rectangle. app.js decides whether to attach the source at all. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Whatever vertical crop is left comes off the BOTTOM (the wood table) rather
     than the top, because the bottle cap is the part you cannot lose. */
  object-position: 50% 20%;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
}
/* Phones stack instead of overlaying.
   A 16:9 product shot cropped to a portrait viewport leaves the bottle filling
   the full width, and white copy laid over lit glass is the worst contrast on
   the page. So below 48em the media becomes a 4:5 band and the copy sits on
   solid ink beneath it: the product is seen whole and undimmed, and the text is
   read against a flat background. Nothing overlaps, so no scrim is needed over
   the copy — only a short fade blending the band into the panel below.

   The frame stays far wider than the band, so the crop is horizontal and
   nothing is lost vertically. The product sits at 60–81% across the source
   frame; anchoring at 75% keeps all of it — including the honey pool, which
   spreads right as the clip runs — inside the narrowest phone. */
@media (max-width: 47.99em) {
  .hero {
    display: block;
    min-height: 0;
    background: var(--ink);
  }
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 4 / 5;
  }
  .hero__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 28%;
    background: linear-gradient(to top, var(--ink), rgb(34 40 48 / 0));
    pointer-events: none;
  }
  .hero__video { object-position: 75% 50%; }
  /* The overlay scrim belongs to the overlaid layout only. */
  .hero::after { display: none; }
  .hero__inner { padding-block: var(--sp-7) clamp(2.5rem, 9vw, 3.5rem); }
}
.hero__video[data-playing] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
/* Two scrims: one bottom-weighted for the whole frame, one from the leading
   edge so the headline keeps AA contrast wherever the photograph is bright.
   The photography here is high-key, so a single bottom gradient is not enough. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgb(18 22 28 / 0.86) 0%, rgb(18 22 28 / 0.72) 28%,
      rgb(18 22 28 / 0.30) 58%, rgb(18 22 28 / 0.06) 100%),
    linear-gradient(to top,
      rgb(18 22 28 / 0.62) 0%, rgb(18 22 28 / 0.24) 42%,
      rgb(18 22 28 / 0.05) 70%, rgb(18 22 28 / 0.30) 100%);
}
@media (max-width: 53.99em) {
  /* Narrow viewports have no room for a horizontal falloff — go vertical. */
  .hero::after {
    background:
      linear-gradient(to top,
        rgb(18 22 28 / 0.88) 0%, rgb(18 22 28 / 0.66) 45%,
        rgb(18 22 28 / 0.34) 75%, rgb(18 22 28 / 0.34) 100%);
  }
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem); width: 100%; }
.hero__content { max-width: 40rem; }
.hero h1 { font-size: var(--step-7); margin-bottom: var(--sp-5); }
.hero .eyebrow { color: var(--honey); }
.hero__lede {
  font-size: var(--step-1);
  color: rgb(255 252 238 / 0.86);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 252 238 / 0.22);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 252 238 / 0.78);
}
.hero__foot li { display: flex; align-items: center; gap: 0.55em; }
.hero__foot .icon { width: 18px; height: 18px; color: var(--honey); }

/* -------------------------------------------------------- 13. Claims strip */

.claims {
  background: var(--honey);
  color: var(--ink);
}
.claims__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5) var(--sp-4);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.claim {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); text-align: center;
}
.claim .icon { width: 40px; height: 40px; stroke-width: 1.2; }

/* Stroke-draw on scroll.
   Every drawable element carries pathLength="1" (see icon({ draw: true })), so
   one dasharray value draws all of them at the same rate regardless of their
   real length. Gated behind .has-js for the same reason [data-reveal] is: a
   blocked script must never leave the claims as blank space. The li's own
   --reveal-delay staggers the five across the band. */
.has-js .claim .icon [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--draw, 1);
  transition: stroke-dashoffset 780ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
/* The switch is flipped on the <li>, not on the SVG children, and inherits
   down. Targeting the strokes directly with `.claim[data-shown] .icon [...]`
   silently failed to apply in Chrome even though the same selector matched via
   querySelectorAll — a custom property sidesteps that entirely. */
.has-js .claim[data-shown] { --draw: 0; }

/* Reduced motion keeps the drawn result and drops the drawing. The global
   reduced-motion block collapses animation-duration, and `forwards` holds the
   end state — but state it outright rather than leaning on that interaction. */
@media (prefers-reduced-motion: reduce) {
  .has-js .claim .icon [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.claim span {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 17ch;
  text-wrap: balance;
  hyphens: none;
}

/* ------------------------------------------------------- 14. Product cards */

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}

/* The shop grid is the one grid whose item count changes at runtime: the
   filters set [hidden] on cards. auto-fit would collapse the emptied tracks
   and blow a single surviving card up to the full container width, so this
   grid keeps auto-fill and holds its track count steady while filtering. */
.grid-products[data-grid] {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  /* White on cream is only a 2% step, so without a hairline the card edge
     dissolves and the products read as floating on the page. The border is the
     definition; the shadow stays reserved for hover. */
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out),
              border-color 380ms var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line);
}

.card__media {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.card__media .pic { aspect-ratio: 4 / 5; }
.card__media .pic__img { transition: transform 700ms var(--ease-out); }
.card:hover .card__media .pic__img { transform: scale(1.035); }

/* Second image cross-fades in on hover where a product has one. */
.card__media .pic + .pic {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 480ms var(--ease);
}
.card:hover .card__media .pic + .pic { opacity: 1; }

.card__body {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  flex: 1;
}
.card__flavour {
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--card-accent, var(--ink-soft));
}
.card__title {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.15;
}
.card__title a { text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__note { font-size: var(--step--1); color: var(--ink-soft); }
.card__foot {
  margin-top: auto; padding-top: var(--sp-4);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
}
.card__price { font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.card__price small {
  display: block; font-size: var(--step--2);
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.card__cta {
  position: relative; z-index: 1;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.card__cta:hover { color: var(--honey-deep); }

.badge {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
  background: var(--ink); color: var(--cream);
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4em 0.9em; border-radius: var(--pill);
}
.badge--honey { background: var(--honey); color: var(--ink); }
.badge--quiet { background: var(--stone); color: var(--ink); }
.badge--out   { background: var(--cream-deep); color: var(--ink-soft); }

/* ------------------------------------------------------------ 15. Editorial */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 54em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.split__media { border-radius: var(--radius-lg); overflow: hidden; }
.split__body { max-width: 34rem; }

.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.journey__item { text-align: left; }
.journey__media {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.journey__media .pic { aspect-ratio: 4 / 3; }
.journey__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.journey__head .icon { width: 30px; height: 30px; color: var(--honey-deep); stroke-width: 1.2; }
.journey__item h3 { font-size: var(--step-2); }
.journey__item p { font-size: var(--step--1); color: var(--ink-soft); }
.journey__num {
  counter-increment: step;
  font-size: var(--step--2); letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.journey__num::before { content: '0' counter(step); }

/* -------------------------------------------------------------- 16. Quotes */

.quote {
  max-width: 40rem;
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.3;
}
.quote cite {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--text);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- 17. Forms */

.field { display: grid; gap: var(--sp-2); }
.field > label {
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.input, .select, .textarea {
  width: 100%;
  padding: 0.85em 1.1em;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey) 55%, transparent);
}
.input::placeholder { color: var(--ink-faint); }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222830' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 20px;
  padding-right: 2.6rem;
}
.field__hint { font-size: var(--step--2); color: var(--ink-soft); }
.field__error { font-size: var(--step--2); color: var(--alert); }

.checkbox {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-3); align-items: start;
  font-size: var(--step--1); line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 24px; height: 24px; margin: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--white);
  display: grid; place-content: center;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.checkbox input::after {
  content: '';
  width: 11px; height: 6px;
  border-left: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: rotate(-45deg) scale(0);
  transition: transform 160ms var(--ease-out);
}
.checkbox input:checked { background: var(--ink); border-color: var(--ink); }
.checkbox input:checked::after { transform: rotate(-45deg) scale(1); }

.form-row { display: grid; gap: var(--sp-3); }
@media (min-width: 30em) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.form-status {
  font-size: var(--step--1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-3);
}
.form-status[data-tone='ok']   { background: color-mix(in srgb, var(--success) 12%, var(--cream)); color: var(--success); }
.form-status[data-tone='bad']  { background: color-mix(in srgb, var(--alert) 10%, var(--cream)); color: var(--alert); }

/* ----------------------------------------------------------- 18. Signup CTA */

.signup {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
}
@media (min-width: 56em) { .signup { grid-template-columns: 1.05fr 1fr; } }
.signup__body { padding: clamp(2rem, 4vw, 3.5rem); align-self: center; }
.signup__body h2 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.signup__body p { color: rgb(255 252 238 / 0.76); max-width: 34ch; }
.signup__media { position: relative; min-height: 260px; }
.signup__media .pic { height: 100%; aspect-ratio: auto; }
.signup .input { background: rgb(255 252 238 / 0.08); border-color: rgb(255 252 238 / 0.28); color: var(--cream); }
.signup .input::placeholder { color: rgb(255 252 238 / 0.5); }
.signup .input:focus { border-color: var(--honey); box-shadow: 0 0 0 3px rgb(255 210 121 / 0.28); }
.signup .field > label { color: rgb(255 252 238 / 0.82); }
.signup .field__hint { color: rgb(255 252 238 / 0.72); }
.signup .field__hint a { color: var(--honey); }
.signup .checkbox { color: rgb(255 252 238 / 0.82); }
.signup .checkbox input { background: transparent; border-color: rgb(255 252 238 / 0.4); }
.signup .checkbox input:checked { background: var(--honey); border-color: var(--honey); }
.signup .checkbox input::after { border-color: var(--ink); }

/* --------------------------------------------------------------- 19. Table */

.spec {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.spec th, .spec td {
  text-align: left;
  padding: 0.62em 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec th { font-weight: 400; color: var(--ink-soft); }
.spec td { text-align: right; font-weight: 600; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec .indent th { padding-left: 1.2em; color: var(--ink-faint); }

/* ------------------------------------------------------------ 20. Accordion */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-family: var(--display);
  line-height: 1.25;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon {
  flex: none; color: var(--ink-soft);
  transition: transform 300ms var(--ease-out);
}
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion__panel {
  padding-bottom: var(--sp-5);
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.accordion__panel > * + * { margin-top: 0.9em; }
.accordion details[open] .accordion__panel { animation: acc-in 380ms var(--ease-out) both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- 21. Product page */

.pdp {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 60em) {
  .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .pdp__buy { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}

.gallery { display: grid; gap: var(--sp-3); }
.gallery__main {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery__main .pic { aspect-ratio: 4 / 5; }
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.gallery__thumb {
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.gallery__thumb .pic { aspect-ratio: 1; }
.gallery__thumb:hover { transform: translateY(-2px); }
.gallery__thumb[aria-current='true'] { border-color: var(--ink); }

.pdp__head { margin-bottom: var(--sp-5); }
.pdp__head h1 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.pdp__descriptor {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.price-row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.price {
  font-family: var(--display);
  font-size: var(--step-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-was {
  font-size: var(--step-0);
  color: var(--ink-faint);
  text-decoration: line-through;
}
.price-save {
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--honey); color: var(--ink);
  padding: 0.3em 0.7em; border-radius: var(--pill);
}
.price-unit { font-size: var(--step--1); color: var(--ink-soft); }

.option-group { margin-bottom: var(--sp-5); }
.option-group__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.option-group__value { text-transform: none; letter-spacing: 0.02em; color: var(--ink); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em 1.1em;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--white);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease),
              color 200ms var(--ease);
}
.swatch:hover { border-color: var(--ink-soft); }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatch__dot {
  width: 12px; height: 12px; border-radius: var(--pill);
  background: var(--swatch, var(--ink)); flex: none;
}
.swatch .icon { width: 18px; height: 18px; }

.plans { display: grid; gap: var(--sp-3); }
.plan {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.plan:hover { border-color: var(--ink-soft); }
.plan:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Fills the label rather than sitting as a 13×13 default control, so the
   hit area matches what the user sees. */
.plan input {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.plan__radio {
  width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--pill);
  display: grid; place-content: center; flex: none;
}
.plan__radio::after {
  content: ''; width: 10px; height: 10px; border-radius: var(--pill);
  background: var(--ink); transform: scale(0);
  transition: transform 200ms var(--ease-out);
}
.plan:has(input:checked) .plan__radio { border-color: var(--ink); }
.plan:has(input:checked) .plan__radio::after { transform: scale(1); }
.plan__title { display: block; font-weight: 600; font-size: var(--step-0); }
.plan__meta { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 2px; }
.plan__price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.plan__price small { display: block; font-weight: 400; font-size: var(--step--2); color: var(--ink-soft); }
.plan__extra { grid-column: 2 / -1; }
.plan__flag {
  display: inline-block;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--honey); color: var(--ink);
  padding: 0.25em 0.7em; border-radius: var(--pill);
  margin-top: var(--sp-2);
}

.buy-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.buy-meta {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); color: var(--ink-soft);
}
.buy-meta li { display: flex; gap: var(--sp-3); align-items: start; }
.buy-meta .icon { flex: none; width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }

.oos-panel {
  background: var(--stone);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.oos-panel h3 { font-size: var(--step-1); font-family: var(--display); margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------ 22. Reviews */

.reviews-empty {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--sp-5);
  background: var(--cream-deep);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.reviews-empty .stars { justify-content: center; margin-bottom: var(--sp-4); }
.reviews-empty h3 { font-family: var(--display); font-size: var(--step-2); margin-bottom: var(--sp-3); }
.reviews-empty p { color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }

.stars { display: inline-flex; gap: 2px; color: var(--honey-warm); }
.stars .icon { width: 18px; height: 18px; }
.stars--empty { color: var(--line); }

/* -------------------------------------------------------------- 23. Filters */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
}
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1.1em; min-height: 40px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: transparent;
  font-size: var(--step--1);
  transition: border-color 200ms var(--ease), background 200ms var(--ease),
              color 200ms var(--ease);
}
.chip:hover { border-color: var(--ink-soft); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip .icon { width: 18px; height: 18px; }

.filters__group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filters__legend {
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--sp-1);
}

/* --------------------------------------------------------------- 24. Modal */

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  z-index: var(--z-modal);
  opacity: 0; visibility: hidden;
  transition: opacity 340ms var(--ease), visibility 340ms;
}
.modal[data-open] { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgb(34 40 48 / 0.5); }
.modal__panel {
  position: relative;
  width: min(56rem, 100%);
  max-height: calc(100svh - 2 * var(--gutter));
  overflow: auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  transform: translateY(18px) scale(0.985);
  transition: transform 420ms var(--ease-out);
}
.modal[data-open] .modal__panel { transform: none; }
@media (min-width: 46em) { .modal__panel--split { grid-template-columns: 1fr 1fr; } }
.modal__media { position: relative; min-height: 220px; }
.modal__media .pic { height: 100%; aspect-ratio: auto; }
.modal__body { padding: clamp(1.75rem, 4vw, 3rem); align-self: center; }
.modal__body h2 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.modal__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--cream); border-radius: var(--pill);
  box-shadow: var(--shadow-sm);
}
.modal__decline {
  display: block; margin-top: var(--sp-4);
  font-size: var(--step--2); color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------- 25. Consent */

/* Anchored bottom-right on wide viewports: hero copy and its calls to action
   are left-aligned, and a bottom-left banner sat directly on top of them. */
.consent {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  max-width: 34rem;
  margin-left: auto;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-consent);
  transform: translateY(calc(100% + var(--sp-5)));
  transition: transform 480ms var(--ease-out);
}
.consent[data-open] { transform: none; }
.consent h2 { font-family: var(--text); font-size: var(--step-0); font-weight: 600; margin-bottom: var(--sp-2); }
.consent p { font-size: var(--step--1); color: rgb(255 252 238 / 0.76); margin-bottom: var(--sp-4); }
.consent p a { color: var(--honey); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent__actions .btn { flex: 1 1 auto; }

/* -------------------------------------------------------------- 26. Footer */

.footer {
  background: var(--sand);
  padding-block: var(--section) var(--sp-6);
  margin-top: auto;
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.footer__brand { grid-column: 1 / -1; max-width: 24rem; }
@media (min-width: 62em) { .footer__brand { grid-column: auto; } }
.footer__brand .brand-logo { width: 148px; margin-bottom: var(--sp-4); }
.footer h2 {
  font-family: var(--text);
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
/* Minimum 24px tap targets (WCAG 2.5.8). Padding rather than a taller line
   height so the vertical rhythm is unchanged. */
.footer__links { display: grid; gap: var(--sp-1); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 3px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 180ms var(--ease);
}
.footer__links a:hover { color: var(--ink); }

.socials { display: flex; gap: var(--sp-2); }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.socials a:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.socials .icon { width: 17px; height: 17px; }

.footer__base {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--step--2); color: var(--ink-soft);
}
.pay { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pay li {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35em 0.55em;
  background: color-mix(in srgb, var(--white) 55%, transparent);
}

/* ---------------------------------------------------------- 27. Breadcrumb */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em;
  font-size: var(--step--2);
  color: var(--ink-soft);
  padding-block: var(--sp-5);
}
.crumbs a, .crumbs span {
  display: inline-flex; align-items: center;
  min-height: 24px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .icon { width: 14px; height: 14px; color: var(--ink-faint); }

/* -------------------------------------------------------------- 28. Journal */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.post-card__media { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4); }
.post-card__media .pic { aspect-ratio: 3 / 2; }
.post-card__media .pic__img { transition: transform 700ms var(--ease-out); }
.post-card:hover .post-card__media .pic__img { transform: scale(1.04); }
.post-card__meta {
  display: flex; gap: var(--sp-3); align-items: center;
  font-size: var(--step--2); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.post-card h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.post-card h3 a { text-decoration: none; }
.post-card p { font-size: var(--step--1); color: var(--ink-soft); }

.article { max-width: 44rem; margin-inline: auto; }
.article__head { text-align: center; margin-bottom: var(--sp-7); }
.article__head h1 { font-size: var(--step-5); margin-block: var(--sp-4); }
.article__body { font-size: var(--step-1); line-height: 1.7; }
.article__body > * + * { margin-top: 1.1em; }
.article__body h2 {
  font-size: var(--step-3);
  margin-top: 1.8em; margin-bottom: 0.5em;
}

/* ------------------------------------------------------- 29. Page headers */

.page-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: var(--step-5); margin-bottom: var(--sp-4); }
.page-head .lede { font-size: var(--step-1); }
.page-head--center { text-align: center; }
.page-head--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------- 30. Utility */

.flow-lg { --flow: var(--sp-5); }
.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.tag {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4em 0.85em;
  border-radius: var(--pill);
  background: var(--stone);
}
.tag .icon { width: 15px; height: 15px; }

.note {
  border-left: 2px solid var(--honey);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- 31. Motion */

/* Reveal-on-scroll is gated behind the .has-js class that consent.js sets in
   <head>. Without it, content is simply visible — a broken or blocked script
   must never leave a section invisible. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-js [data-reveal][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .has-js [data-reveal] { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* Fallback for browsers without :has() — never hide the buy controls. */
@supports not selector(:has(*)) {
  .swatch input:checked ~ * { font-weight: 600; }
  .plan input:checked ~ .plan__radio { border-color: var(--ink); }
}

/* ------------------------------------------------------------- 32. Print */

@media print {
  .header, .footer, .announce, .consent, .modal, .drawer, .overlay { display: none !important; }
  body { background: #fff; }
  .pic { break-inside: avoid; }
}