/* Royal Honey — colours taken from the packaging: label gold, the red Royal
   hexagon, and the dark brown of forest honey. One typeface (Anek Malayalam)
   covers both English and the Malayalam product names. */

/* Malayalam: only the letters of തേൻ, കാട്ടുതേൻ and ചെറുതേൻ (27 KB instead of
   the full 196 KB). A new Malayalam letter needs a new subset; see README. */
@font-face {
  font-family: "Anek Malayalam";
  src: url("assets/fonts/anek-malayalam-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0B83, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}
@font-face {
  font-family: "Anek Malayalam";
  src: url("assets/fonts/anek-malayalam-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --gold: #f2ae1c;
  --gold-deep: #e69f0e;
  --gold-light: #ffc94d;
  --red: #c4161c;
  --red-deep: #9e0f14;
  --brown: #2a1608;
  --brown-mid: #4a2a12;
  --brown-soft: #5c3b1e;
  --wax: #fff4d6;
  /* Deep forest green behind the header and hero, from the owner's mockup. */
  --forest: #131d0c;
  --forest-deep: #0c1407;
  --forest-line: rgba(242, 174, 28, .3);
  --rule: rgba(42, 22, 8, .2);
  --font: "Anek Malayalam", "Noto Sans Malayalam", "Segoe UI", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 22px;
  --section: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wax);
  color: var(--brown);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, figure, address { margin: 0; }
h1, h2, h3 {
  font-weight: 750;
  font-stretch: 115%;
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
.container { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--brown);
  color: var(--wax);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.button svg { flex: none; }
.button-red { background: var(--red); color: #fff; }
.button-red:hover { background: var(--red-deep); }
.button-line { border-color: var(--brown); color: var(--brown); }
.button-line:hover { background: var(--brown); color: var(--wax); }
.button-gold { background: var(--gold); color: var(--brown); }
.button-gold:hover { background: var(--gold-light); }
.button-white { background: #fff; color: var(--red); }
.button-white:hover { background: var(--wax); }
.button-line-light { border-color: #fff; color: #fff; }
.button-line-light:hover { background: #fff; color: var(--red); }
.button-brown { background: var(--brown); color: var(--wax); }
.button-brown:hover { background: var(--brown-mid); }

/* Header */
.site-header { position: relative; z-index: 5; background: var(--forest); color: var(--wax); }
.site-header :focus-visible { outline-color: var(--gold); }
.header-inner { display: flex; align-items: center; gap: 32px; padding-block: 14px; }
.brand { display: flex; flex: none; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { width: 84px; height: auto; }
.site-nav { display: flex; gap: 28px; margin-left: auto; }
.site-nav a {
  padding-block: 4px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat;
  font-weight: 600;
  text-decoration: none;
  transition: background-size .2s ease;
}
.site-nav a:hover { background-size: 100% 2px; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  color: var(--wax);
  font-weight: 700;
  font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.header-call svg { color: var(--gold); }
.header-call:hover { background: var(--gold); color: var(--brown); }
.header-call:hover svg { color: inherit; }
.menu-toggle { display: none; }

/* Hero, after the owner's mockup: a deep forest field with the jar photograph
   on the right, a serif headline with "Royal Honey." in gold, and a strip of
   facts along the bottom. It ends in a gold drip edge. */
.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--forest);
  color: var(--wax);
}
.hero::after,
.story-head::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  height: 72px;
  background: var(--gold);
  -webkit-mask: url("assets/drip.svg") 0 0 / 480px 72px repeat-x;
  mask: url("assets/drip.svg") 0 0 / 480px 72px repeat-x;
  pointer-events: none;
}
.hero :focus-visible { outline-color: var(--gold); }
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 46%;
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: -2px 0 0 -2px;
  background:
    linear-gradient(90deg, var(--forest) 0%, rgba(19, 29, 12, .6) 16%, rgba(19, 29, 12, 0) 42%),
    linear-gradient(0deg, rgba(12, 20, 7, .85) 0%, rgba(12, 20, 7, 0) 26%);
}
.hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 44vw, 600px);
  padding-block: clamp(32px, 4.5vw, 64px);
}
.hero-copy { position: relative; max-width: min(620px, 52%); }
.hero h1 { font-family: var(--font-display); font-stretch: 100%; letter-spacing: 0; }
.hero-title-lead {
  display: block;
  color: #fff8e6;
  font-size: clamp(2.25rem, 3.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
}
.hero-title-brand {
  position: relative;
  display: inline-block;
  margin-top: .06em;
  padding: 0 .12em .22em 0;
  background: linear-gradient(180deg, #ffe7a3 10%, #f6c443 46%, #dc950f 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(3.25rem, 5.6vw, 5.5rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.02;
  white-space: nowrap;
}
.hero-title-brand::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 0;
  bottom: 0;
  height: .14em;
  background: url("assets/hero-swash.svg") 0 0 / 100% 100% no-repeat;
}
.hero-lede { max-width: 38ch; margin-top: 22px; color: rgba(255, 244, 214, .88); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button-line-gold { border-color: var(--gold); background: rgba(12, 20, 7, .45); color: var(--wax); }
.button-line-gold svg { color: var(--gold); }
.button-line-gold:hover { background: var(--gold); color: var(--brown); }
.button-line-gold:hover svg { color: inherit; }
.hero-trust-band {
  border-top: 1px solid var(--forest-line);
  border-bottom: 6px solid var(--gold);
  background: rgba(12, 20, 7, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 0;
  padding-block: 20px;
  list-style: none;
}
.hero-trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 12px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.hero-trust li + li { border-left: 1px solid var(--forest-line); }
.hero-trust svg { flex: none; color: var(--gold); }

/* Product range */
.range { padding-block: calc(72px + clamp(40px, 6vw, 88px)) var(--section); }
.range-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1.5px solid var(--rule);
}
.range-intro h2 { font-size: clamp(2.75rem, 6vw, 5rem); }
.range-intro p { max-width: 40ch; margin-top: 24px; color: var(--brown-soft); font-size: 1.125rem; }
.range-stall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.range-stall figcaption { margin-top: 10px; color: var(--brown-soft); font-size: .9375rem; }

.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.product-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.ml-name { margin-bottom: 10px; color: var(--red); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.2; }
.product-copy h3 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.product-copy > p:not(.ml-name) { max-width: 38ch; margin-top: 16px; }
.product-copy > .button { margin-top: 28px; }

.specs { margin-top: 28px; border-top: 1.5px solid var(--rule); }
.specs > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1.5px solid var(--rule);
}
.specs dt { color: var(--brown-soft); font-size: .9375rem; font-weight: 600; }
.specs dd { font-weight: 600; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sizes li {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--gold);
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.forest { background: var(--brown); color: var(--wax); }
.forest-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: var(--section);
}
.forest .ml-name { color: var(--gold); }
.forest :focus-visible { outline-color: var(--gold); }

.cheruthen {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: center;
  padding-block: var(--section);
}
.cheruthen-word {
  color: var(--red);
  font-size: clamp(3rem, 7.2vw, 6.5rem);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.15;
  white-space: nowrap;
}
.cheruthen h3 span {
  display: block;
  margin-top: 8px;
  color: var(--brown-soft);
  font-size: .5em;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
}

/* Wholesale: large cans and retailer rates, on the header's forest green */
.wholesale { background: var(--forest); color: var(--wax); }
.wholesale-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: var(--section);
}
.wholesale .honey-kind { background: var(--gold); color: var(--brown); }
.wholesale h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.wholesale-copy > p:not(.honey-kind) { max-width: 44ch; margin-top: 20px; color: rgba(255, 244, 214, .88); }
.wholesale-copy > .wholesale-lede { font-size: clamp(1.125rem, 1.4vw, 1.25rem); }
.wholesale-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.wholesale-list li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 20px;
  border: 1.5px solid var(--forest-line);
  border-radius: 16px;
  background: rgba(255, 244, 214, .04);
}
.wholesale-list strong { color: var(--gold-light); font-size: 1.125rem; line-height: 1.25; }
.wholesale-list span { color: rgba(255, 244, 214, .8); font-size: .9375rem; }
.wholesale-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.wholesale-art svg { width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.wholesale-art text { font-family: var(--font); font-stretch: 112%; }
.wholesale :focus-visible { outline-color: var(--gold); }

/* Visit */
/* Visit: heading on top, then the map beside the address card at the same
   height. Phones stack copy, map, card. The map is Leaflet with
   OpenStreetMap tiles and the logo as its pin (visit-map.js). */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "copy copy" "map card";
  gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
  padding-block: var(--section);
}
.visit-copy { grid-area: copy; }
.visit-map {
  position: relative;
  /* Keeps Leaflet's panes (z-index 400+) under the header and quick bar. */
  isolation: isolate;
  grid-area: map;
  min-height: 360px;
  overflow: hidden;
  /* A ring, not a border: a 1.5 px border puts the tiles half a pixel off
     and Chrome then shows hairline seams between them. */
  border-radius: var(--radius);
  box-shadow: 0 0 0 1.5px var(--rule);
  background: #f2e6c4;
}
.visit-map.leaflet-container { font-family: var(--font); background: #f2e6c4; }
/* No CSS filter on the tiles or the pin: until 2026-11-11 a sepia tint and a
   drop shadow froze scrolling for up to 0.3 s when the map first appeared. */
.visit-map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.visit-map-fallback img { width: 96px; height: auto; }
.visit-map .leaflet-marker-pane .logo-pin img { display: block; width: 56px; height: auto; }
.map-popup { display: grid; gap: 2px; font-family: var(--font); font-size: .9375rem; }
.map-popup strong { font-size: 1.0625rem; }
.map-popup a { margin-top: 6px; color: var(--red); font-weight: 700; }
.visit h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.visit-copy p { max-width: 38ch; margin-top: 20px; color: var(--brown-soft); font-size: 1.125rem; }
.visit-card { grid-area: card; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); background: var(--gold); }
address { font-size: 1.25rem; font-style: normal; line-height: 1.5; }
address strong { display: block; margin-bottom: 6px; font-size: 1.5rem; font-stretch: 112%; }
.visit-phones { margin-top: 16px; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.7; }
.visit-phones a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.text-link { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-thickness: 3px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; }
.social-link svg { flex: none; }

/* Footer */
.site-footer { padding-block: 56px; background: var(--brown); color: var(--wax); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 28px 56px; align-items: center; }
.site-footer p { font-size: .9375rem; line-height: 1.65; }
.site-footer a { text-decoration: none; }
.footer-brand img { width: 108px; }
.site-footer p a:hover { text-decoration: underline; }
.footer-social { display: inline-flex; align-items: center; gap: 6px; vertical-align: top; }
.footer-social svg { flex: none; }
.site-footer :focus-visible { outline-color: var(--gold); }

.mobile-actions { display: none; }

/* Tablet */
@media (max-width: 900px) {
  .range-intro,
  .product,
  .forest-inner,
  .cheruthen,
  .wholesale-inner,
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit { grid-template-areas: "copy" "map" "card"; }
  .visit-map { min-height: 300px; }
  .wholesale-art svg { max-width: 320px; margin-inline: 0; }
  .header-inner { gap: 20px; }
  .site-nav { gap: 16px; font-size: .9375rem; }
  .header-call { padding-inline: 14px; }
  .site-nav a { white-space: nowrap; }
  .hero-copy { max-width: 56%; }
  .hero-media { width: 44%; }
  .hero-media img { object-position: 50% 84%; }
  .hero-trust li { flex-direction: column; gap: 6px; }
  .range-intro { align-items: start; }
  .range-stall, .product-photo { width: min(100%, 460px); }
  .forest-inner .product-photo { order: -1; }
  .cheruthen { gap: 8px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 720px) {
  .header-inner { gap: 10px; padding-block: 10px; }
  .brand-mark { width: 70px; }
  .site-nav { display: none; }
  .header-call { margin-left: auto; padding: 8px 14px; font-size: .9375rem; }
  .menu-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
  }
  .menu-icon-close, .is-open .menu-icon-open { display: none; }
  .is-open .menu-icon-close { display: block; }
  .site-header.is-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px var(--gutter) 20px;
    border-top: 1px solid var(--forest-line);
    background: var(--forest);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7);
  }
  .site-header.is-open .site-nav a {
    padding-block: 14px;
    border-bottom: 1px solid rgba(255, 244, 214, .12);
    background: none;
    font-size: 1.1875rem;
  }
  .hero-title-lead { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero-title-brand { font-size: clamp(3rem, 14.2vw, 4.25rem); }
  .hero-actions .button, .wholesale-actions .button { flex: 1 1 100%; }
  .wholesale-list { grid-template-columns: minmax(0, 1fr); }
  .wholesale-art svg { max-width: 260px; }
  /* Phones stack the copy, the photograph and the facts strip. */
  .hero-inner { order: 1; min-height: 0; padding-bottom: 36px; }
  .hero-copy { max-width: none; }
  .hero-media { position: relative; order: 2; width: 100%; aspect-ratio: 4 / 5; margin-top: -56px; }
  .hero-media img { object-position: 50% 80%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, var(--forest) 0%, rgba(19, 29, 12, 0) 24%),
      linear-gradient(0deg, rgba(12, 20, 7, .9) 0%, rgba(12, 20, 7, 0) 22%);
  }
  .hero-trust-band { order: 3; }
  .hero-trust { padding-block: 14px; }
  .hero-trust li { flex-direction: column; gap: 6px; padding-inline: 4px; font-size: .8125rem; }
  .specs > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .visit-actions .button { flex: 1 1 100%; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

  .mobile-actions {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--brown);
    box-shadow: 0 14px 30px -12px rgba(42, 22, 8, .7);
  }
  .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 999px;
    color: var(--wax);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-actions a:first-child { background: var(--red); color: #fff; }
  .mobile-actions :focus-visible { outline-color: var(--gold); }
  .mobile-actions { transition: transform .25s ease, opacity .25s ease, visibility 0s; }
  .mobile-actions.is-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(140%);
    transition: transform .25s ease, opacity .25s ease, visibility 0s .25s;
  }
}

/* Small phones: keep the logo, call button and menu on one row. */
@media (max-width: 360px) {
  .brand-mark { width: 60px; }
  .header-call { gap: 6px; padding: 7px 11px; font-size: .875rem; }
}

/* One entrance moment: the hero copy settles as the photograph fades in. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: settle 1s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-media img { animation: glow 1.6s ease-out both; }
  @keyframes glow { from { opacity: 0; } to { opacity: 1; } }
  @keyframes settle { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Raw or processed label, and the honey blends */
.honey-kind {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--brown);
  color: var(--wax);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.product-copy > p.honey-kind { margin-top: 0; max-width: none; }
.forest .honey-kind { background: var(--gold); color: var(--brown); }

.blends { padding-bottom: var(--section); }
.blends-intro { padding-top: clamp(40px, 6vw, 80px); border-top: 1.5px solid var(--rule); }
.blends-intro h3 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.blends-intro > p:not(.honey-kind) { max-width: 46ch; margin-top: 16px; color: var(--brown-soft); font-size: 1.125rem; }
.blend-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px clamp(16px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 1100px) {
  .blend-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.blend-feature { display: flex; flex-direction: column; min-width: 0; }
.blend-image { overflow: hidden; border-radius: var(--radius); background: var(--brown); }
.blend-image img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.blend-feature-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 0 0; }
.blend-feature h4 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 750; line-height: 1.15; }
.blend-feature-copy p { flex: 1; margin-top: 12px; color: var(--brown-soft); }
.blend-feature-copy .button { min-height: 44px; margin-top: 20px; padding: 9px 16px; font-size: .9375rem; }
.blend-art-caption { margin-bottom: 8px; color: var(--brown-soft); font-size: .8125rem; }
@media (max-width: 720px) {
  .blend-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .blend-feature { width: 100%; }
  .blend-image { border-radius: 14px; }
  .blend-feature-copy { padding-top: 14px; }
  .blend-feature h4 { font-size: 1.2rem; line-height: 1.2; }
  .blend-feature-copy p { margin-top: 8px; font-size: 1rem; line-height: 1.5; }
  .blend-feature-copy .button { width: 100%; gap: 6px; margin-top: 14px; padding: 8px; font-size: .875rem; white-space: normal; }
  .blend-feature-copy .button svg { flex-shrink: 0; }
}
/* Story pages: a gold head with the drip edge, then a plain reading body */
.story-head { position: relative; z-index: 2; background: var(--gold); }
.story-head-inner { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.story-kicker { font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.story-kicker a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story-head h1 { max-width: 16ch; margin-top: 14px; font-size: clamp(2.6rem, 6vw, 4.75rem); }
.story-lede { max-width: 48ch; margin-top: 20px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.story-body { padding-block: calc(72px + clamp(32px, 5vw, 64px)) var(--section); }
.story-body > section + section {
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1.5px solid var(--rule);
}
.story-body h2 { font-size: clamp(2rem, 4vw, 3rem); }
.story-body section > p:not(.honey-kind) { max-width: 62ch; margin-top: 16px; font-size: 1.125rem; }
.story-body section > p.story-caption,
.story-body figcaption { color: var(--brown-soft); font-size: .9375rem; }

.story-figure { margin-top: 32px; }
.story-figure img { width: 100%; border-radius: var(--radius); }
.story-body figcaption { margin-top: 10px; }

.story-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 20px); margin-top: 48px; }
.story-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: clamp(12px, 2vw, 22px); }
.story-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 28px); margin-top: 32px; }
.story-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(12px, 2vw, 22px); }

.story-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fbe6ad;
  text-decoration: none;
}
.story-card a:focus-visible { border-radius: var(--radius); }
.story-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.story-card h2 { margin: 20px 24px 0; font-size: clamp(1.625rem, 2.6vw, 2rem); }
.story-card p { margin: 10px 24px 24px; color: var(--brown-soft); }
.story-card a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Home: stories teaser */
.stories-teaser { background: var(--gold); }
.stories-teaser-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-block: var(--section);
}
.stories-teaser h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.stories-teaser-inner > div > p { max-width: 34ch; margin-top: 16px; font-size: 1.125rem; }
.stories-teaser .text-link { display: inline-block; margin-top: 20px; }
.teaser-list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--rule); }
.teaser-list li { border-bottom: 1.5px solid var(--rule); }
.teaser-list a { display: block; padding-block: 18px; text-decoration: none; }
.teaser-list strong { display: block; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 750; font-stretch: 112%; line-height: 1.15; }
.teaser-list span { display: block; margin-top: 4px; color: var(--brown-mid); }
.teaser-list a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 900px) {
  .stories-teaser-inner { grid-template-columns: minmax(0, 1fr); }
}

.faq-index ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.faq-index a {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.faq-index a:hover { background: var(--brown); color: var(--wax); }
.faq-index + section { margin-top: clamp(48px, 6vw, 80px); }
.story-body section[id] { scroll-margin-top: 24px; }