/* ==========================================================================
   Red Feather US - core stylesheet
   Brand system per red-feather-brand.skill. Colours, type and spacing are all
   defined as tokens in :root so a change here updates the whole site.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   RL Limo = headers. Rational Text = body. Both licensed, self hosted.
   Static cuts only, never the variable versions, per the brand rules.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "RL Limo";
  src: url("../fonts/RLLimo-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RL Limo";
  src: url("../fonts/RLLimo-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "RL Limo";
  src: url("../fonts/RLLimo-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RL Limo";
  src: url("../fonts/RLLimo-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-book-webfont.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-bookitalic-webfont.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-semibold-webfont.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-semibolditalic-webfont.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-bold-webfont.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rational Text";
  src: url("../fonts/rationaltext-bolditalic-webfont.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Brand palette */
  --red:          #ad2318;
  --red-deep:     #8c1c13;
  --butter:       #fff2a6;
  --brown:        #442205;
  --gray:         #f0f1f5;
  --cream:        #f5efd7;

  /* Working neutrals derived from the palette */
  --ink:          var(--brown);
  --ink-soft:     #6b4a2c;
  --page:         #fffdf6;
  --rule:         rgba(68, 34, 5, 0.14);

  --font-head: "RL Limo", Lora, Georgia, "Times New Roman", serif;
  --font-body: "Rational Text", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --t-hero:  clamp(2.6rem, 5.1vw, 4.5rem);
  --t-h2:    clamp(2rem, 3.8vw, 3.25rem);
  --t-h3:    clamp(1.25rem, 1.7vw, 1.5rem);
  --t-lead:  clamp(1.075rem, 1.45vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.75rem;

  --shell:   min(92vw, 1200px);
  --shell-narrow: min(92vw, 820px);
  --section: clamp(4.5rem, 9vw, 8rem);

  --radius:  2px;
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters: the width/height attributes on <img> otherwise pin the
   rendered height and any aspect-ratio rule is ignored. */
img, video { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-soft); }

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

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95em 1.9em;
  /* 44px is the minimum comfortable tap target. The padding alone gave 42px,
     which is close enough to look right and just under the line that matters
     on a phone. Set as a minimum rather than a fixed height so a button with
     wrapped text still grows. Added 24 Sep 2026. */
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn-outline { background: transparent; color: var(--ink); border-color: rgba(68, 34, 5, 0.4); }
.btn-outline:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }

.btn-light { background: rgba(255, 253, 246, 0.94); color: var(--ink); border-color: transparent; }
.btn-light:hover { background: #fff; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* --- More recipes -------------------------------------------------------
   Previous / next under each recipe. Three columns on a wide screen, stacked
   on a phone with the "all recipes" link in the middle so it stays reachable
   with a thumb. */

.recipe-nav {
  max-width: var(--shell);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.recipe-nav-link {
  display: grid;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--ink);
}
.recipe-nav-link.is-next { text-align: right; }

.recipe-nav-dir {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--red);
}
.recipe-nav-title {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.25;
}
.recipe-nav-link:hover .recipe-nav-title { text-decoration: underline; text-underline-offset: 3px; }

.recipe-nav-all {
  font-size: var(--t-small);
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .recipe-nav {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }
  .recipe-nav-link.is-next { text-align: center; }
  .recipe-nav-all { order: 1; }
}

/* --- Keyboard focus -------------------------------------------------------
   One visible ring everywhere, for anyone navigating by keyboard. The browser
   default is a thin dark outline, which disappears against the brown hero and
   the red buttons. :focus-visible means it shows for keyboard users without
   putting a ring around every mouse click.

   Two rings, an inner light one and an outer dark one, so it stays visible on
   the page background, on photographs and on the red buttons alike. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(255, 253, 246, 0.9);
}

/* On dark sections the ring inverts, so it never sinks into the background. */
.hero :where(a, button):focus-visible,
.social :where(a, button):focus-visible,
.voices :where(a, button):focus-visible,
.origin :where(a, button):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(40, 18, 3, 0.65);
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              padding 0.35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 253, 246, 0.96);
  backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--rule);
  padding: 0.7rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand-mark { display: block; flex-shrink: 0; }
.brand-mark img {
  height: 44px; width: auto;
  transition: height 0.35s var(--ease), filter 0.35s var(--ease);
  /* Full-color emblem. Over the hero it needs a shadow to separate from the
     photo; once the header goes solid the shadow comes off. */
  filter: drop-shadow(0 2px 10px rgba(40, 18, 3, 0.55));
}
.site-header.is-stuck .brand-mark img { height: 38px; filter: none; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }

.site-nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding-block: 0.4em;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-nav a:hover { border-bottom-color: currentColor; }
.site-header.is-stuck .site-nav a { color: var(--ink); }

.site-header .btn { padding: 0.7em 1.35em; }
.site-header .header-cta { color: #fff; border-color: rgba(255,255,255,0.6); background: transparent; }
.site-header.is-stuck .header-cta { background: var(--red); color: #fff; border-color: var(--red); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer; color: #fff;
  /* 44x44 is the minimum comfortable tap target. The icon is 26px, so the
     padding does the rest; min-width/height guarantee it whatever the icon. */
  padding: 0.6rem;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.site-header.is-stuck .nav-toggle { color: var(--ink); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--brown);
}

.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Framing: sits the tin low and right of the headline column */
  object-position: 12% 58%;
}

/* Warm scrim so the headline holds contrast over any frame of the video.
   Two layers: a bottom lift for the whole width, and a left-hand panel that
   gives the text column its own darker ground. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(40, 18, 3, 0.86) 0%, rgba(40, 18, 3, 0.62) 30%, rgba(40, 18, 3, 0.12) 58%, rgba(40, 18, 3, 0) 74%),
    linear-gradient(to top, rgba(40, 18, 3, 0.6) 0%, rgba(40, 18, 3, 0.24) 34%, rgba(40, 18, 3, 0.06) 62%, rgba(40, 18, 3, 0.34) 100%);
}

/* Keeps the full shell width so the column stays left-aligned. The text
   itself is what gets the measure limit, not the container. */
.hero-content {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  color: #fff;
}

.hero-eyebrow { color: var(--butter); }

.hero h1 {
  font-size: var(--t-hero);
  margin: 0.5em 0 0.36em;
  max-width: 12ch;
  color: #fff;
  text-shadow: 0 2px 26px rgba(40, 18, 3, 0.45);
}

.hero p {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.94);
  max-width: 32ch;
  text-shadow: 0 1px 16px rgba(40, 18, 3, 0.55);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-note {
  margin-top: 1.5rem;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Trust callouts ------------------------------------------------------
   Thin Butter Yellow band directly under the hero. Five facts, scannable in
   a couple of seconds. Icons are inline SVG so they inherit the brand red
   and never load a file. */

.facts {
  background: var(--gray);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

/* Flex rather than grid so that when the row wraps on smaller screens the
   leftover items center themselves instead of stranding on the left. */
.facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
}

.fact {
  flex: 0 1 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.fact svg {
  width: 38px;
  height: 38px;
  margin-bottom: 0.7rem;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fact h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.15;
  color: var(--brown);
}

.fact p {
  font-size: var(--t-small);
  line-height: 1.4;
  color: rgba(68, 34, 5, 0.68);
}

@media (max-width: 560px) {
  .fact { flex: 0 1 8.5rem; }
  .fact svg { width: 32px; height: 32px; }
}

/* --- Standard (intro) ---------------------------------------------------- */

.standard { padding-block: var(--section); background: var(--page); }

.standard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.standard h2 { font-size: var(--t-h2); margin-block: 0.4em 0.6em; }
.standard p + p { margin-top: 1.1em; }

.standard-figure { position: relative; }
.standard-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* --- From pasture to tin -------------------------------------------------
   Deep brown chapter break. Step 01 is a licensed stock pasture photograph,
   steps 02 and 03 are brand photography. All three share a 4/5 frame. */

.origin {
  padding-block: var(--section);
  background: var(--brown);
  color: var(--cream);
}

.origin-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.origin-head .eyebrow { color: var(--butter); }
.origin-head h2 { font-size: var(--t-h2); color: var(--cream); margin-block: 0.4em 0.5em; }
.origin-head .lead { color: rgba(245, 239, 215, 0.75); }

.origin-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.origin-media { margin-bottom: 1.5rem; }
.origin-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--radius);
}

.origin-num {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.19em;
  color: var(--butter);
  margin-bottom: 0.5rem;
}

.origin-step h3 {
  font-size: var(--t-h3);
  color: var(--cream);
  margin-bottom: 0.5em;
}
.origin-step > p:last-child {
  font-size: 0.9875rem;
  color: rgba(245, 239, 215, 0.76);
}

.origin-note {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(245, 239, 215, 0.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.origin-note p {
  flex: 1 1 30rem;
  max-width: 62ch;
  color: rgba(245, 239, 215, 0.82);
}

@media (max-width: 960px) {
  .origin-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .origin-media { max-width: 26rem; }
}

/* --- Product ------------------------------------------------------------- */

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

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.product-figure { order: -1; }
.product-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

.product h2 { font-size: var(--t-h2); margin-block: 0.4em 0.6em; }
.product p + p { margin-top: 1.1em; }

.spec-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.spec-list li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec-list dt, .spec-list .spec-label {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  padding-top: 0.25em;
}
.spec-list .spec-value { font-size: 0.9875rem; }

/* --- Real life band ------------------------------------------------------ */

.reallife { padding-block: var(--section); background: var(--gray); }

.reallife-head { max-width: 48ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.reallife-head h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }

.reallife-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.reallife-grid figure { margin: 0; }
.reallife-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.reallife-grid figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.reallife-grid figure:nth-child(2) img { aspect-ratio: 4 / 5; }

/* --- Recipes ------------------------------------------------------------- */

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

.recipes-head { max-width: 46ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.recipes-head h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }

.recipe-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.recipe-inner { display: block; text-decoration: none; color: inherit; }

.recipe-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
  transition: transform 0.5s var(--ease);
}
a.recipe-inner:hover img { transform: scale(1.02); }

.recipe-card h3 { font-size: var(--t-h3); margin-bottom: 0.35em; }
a.recipe-inner:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

.recipe-card p { font-size: 0.9375rem; color: var(--ink-soft); }

/* Total time and yield under a recipe card. Deliberately quiet: it is the
   thing you scan for, not the thing you read. Excluded from the hover
   underline so only the title reads as the link. */
.recipe-card-meta {
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}

/* --- The time / yield row on a recipe page ----------------------------- */
.recipe-meta {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  border-block: 1px solid var(--rule);
}
.recipe-meta li { font-size: 1rem; color: var(--ink); }
.recipe-meta span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* Buttons at the foot of the contact thank-you page. */
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.recipe-note {
  margin: -0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  font-style: italic;
}

@media (max-width: 480px) {
  .recipe-meta { gap: 1rem 1.75rem; }
}

.recipes-foot { margin-top: clamp(2.25rem, 4vw, 3rem); }

@media (max-width: 860px) {
  .recipe-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* --- Testimonials -------------------------------------------------------- */

.voices { padding-block: var(--section); background: var(--red); color: #fff; }

.voices-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.voices-head .eyebrow { color: var(--butter); }
.voices-head h2 { font-size: var(--t-h2); color: #fff; margin-top: 0.4em; }

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
}

/* Column layout so the attributions line up across cards of unequal length */
.voice { text-align: center; display: flex; flex-direction: column; height: 100%; }
.voice blockquote {
  margin: 0;
  flex-grow: 1;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.25;
  color: #fff;
}
.voice cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--butter);
}

.voices-foot { text-align: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.voices-foot a {
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  text-underline-offset: 4px;
}

/* --- Where to buy -------------------------------------------------------- */

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

.buy-head { text-align: center; max-width: 52ch; margin-inline: auto; }
.buy-head h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }

/* --- Instagram strip ----------------------------------------------------- */

.social {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--brown);
  color: var(--cream);
  text-align: center;
}
.social h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--cream); margin-bottom: 0.5em; }
.social p { color: rgba(245, 239, 215, 0.78); max-width: 46ch; margin-inline: auto; }
.social .btn { margin-top: 1.75rem; }

/* --- Footer -------------------------------------------------------------- */

.site-footer { padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; background: var(--page); }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.footer-brand img { height: 62px; width: auto; margin-bottom: 1.4rem; }
.footer-brand p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 34ch; }

.footer-col h2 {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { font-size: 0.9375rem; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --- Reveal on scroll ---------------------------------------------------- */

/* Only hide content once we know scripting is alive. If site.js fails to load
   the page still renders in full rather than going blank. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .standard-grid, .product-grid { grid-template-columns: 1fr; }
  .product-figure { order: 0; }
  .reallife-grid { grid-template-columns: 1fr 1fr; }
  .reallife-grid figure:last-child { display: none; }
  .voices-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .buy-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem 6vw 2rem;
    background: var(--page);
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease);
  }
  .site-nav.is-open { transform: none; }
  .site-nav a { color: var(--ink); padding-block: 0.9em; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: flex; }   /* flex so the icon centres in the 44px box */
  .site-header .header-cta { display: none; }
  .hero-content { max-width: none; }
  .hero-actions .btn { flex: 1 1 auto; }
  .reallife-grid { grid-template-columns: 1fr; }
  .reallife-grid figure:last-child { display: block; }
  .spec-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   INNER PAGES
   Pages without a dark full-bleed hero need the header opaque from the start
   and the content pushed clear of the fixed header.
   ========================================================================== */

.site-header.is-solid {
  background: rgba(255, 253, 246, 0.96);
  backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header.is-solid .brand-mark img { filter: none; }
.site-header.is-solid .site-nav a { color: var(--ink); }
.site-header.is-solid .nav-toggle { color: var(--ink); }
.site-header.is-solid .header-cta {
  background: var(--red); color: #fff; border-color: var(--red);
}
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

.page-top { padding-top: clamp(5rem, 7vw, 6.5rem); }

/* --- Product page: the buy panel ----------------------------------------- */

.pdp { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }

.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.pdp-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* The tin sits low in the source, so pull from the bottom of the frame */
  object-position: 50% 100%;
  border-radius: var(--radius);
}

.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.pdp-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.pdp-panel h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-block: 0.35em 0.4em;
}
.pdp-panel .lead { margin-bottom: 1em; }

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
/* Sized to its content. This row carried two buttons until the Walmart CTA
   came off in Aug 2026, and flex-grow made the lone survivor span the whole
   panel. A second button added later still sits neatly beside it. */
.pdp-actions .btn { flex: 0 1 auto; }

.pdp-locator {
  margin-top: 1.1rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.pdp-locator a { text-underline-offset: 3px; }

.pdp-panel .spec-list { margin-top: 2.5rem; }

/* --- Product page: nutrition --------------------------------------------- */

/* Rich Red rather than cream. Butter is a warm yellow, so on a warm cream
   ground it disappears. Red is what the studio photography uses for the same
   reason. The facts panel stays page-colored so the table stays readable. */
.nutrition { padding-block: var(--section); background: var(--red); color: #fff; }
.nutrition .eyebrow { color: var(--butter); }
.nutrition-grid h2 { color: #fff; }
.nutrition-grid .lead { color: rgba(255, 255, 255, 0.88); }
.nutrition-grid > div:first-child > p { color: rgba(255, 255, 255, 0.86); }

.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}
.nutrition-grid > div:first-child { display: flex; flex-direction: column; }
.nutrition-grid h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }
.nutrition-grid p + p { margin-top: 1em; }

.nutrition-panel {
  background: var(--cream);
  /* Reset the inherited white from the red section, or the table vanishes */
  color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
}

.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.nutrition-table caption {
  font-family: var(--font-head);
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 0.4rem;
}
.nutrition-table th,
.nutrition-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.nutrition-table thead th {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-align: left;
}
.nutrition-table tbody th { font-weight: 600; text-align: left; }
.nutrition-table tbody th.indent { padding-left: 1.25rem; font-weight: 400; }
.nutrition-table td { text-align: right; }
.nutrition-table td:nth-child(2) { width: 6rem; }
.nutrition-table td:last-child { width: 5rem; }

.nutrition-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .pdp-grid, .nutrition-grid { grid-template-columns: 1fr; }
  .pdp-media { max-width: 32rem; }
}

/* Grows to fill whatever height the facts panel sets, so both columns end
   level at the bottom. */
.nutrition-figure {
  width: 100%;
  flex: 1 1 auto;
  min-height: 16rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) {
  .nutrition-grid > div:first-child { display: block; }
  .nutrition-figure {
    aspect-ratio: 3 / 2;
    min-height: 0;
    margin-top: 1.75rem;
  }
}


/* ==========================================================================
   RECIPES
   ========================================================================== */

.recipe-grid-all {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- A single recipe ----------------------------------------------------- */

.recipe { padding-block: clamp(2rem, 4vw, 3.5rem) var(--section); }

.recipe-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.recipe-media { position: sticky; top: 6.5rem; }
.recipe-media img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
}

.recipe-body .eyebrow a { text-decoration: none; }
.recipe-body .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.recipe-body h1 {
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  margin-block: 0.35em 0.4em;
}
.recipe-body .lead { margin-bottom: 2.5rem; }

.recipe-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.recipe-cols h2 {
  font-size: var(--t-h3);
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--red);
}

.ing-list, .step-list { margin: 0; padding: 0; }
.ing-list { list-style: none; }
.ing-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9875rem;
}
.ing-list li.ing-head {
  margin-top: 1.1rem;
  border-bottom: 0;
  padding-bottom: 0.15rem;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.ing-list li.ing-head:first-child { margin-top: 0; }

.step-list { padding-left: 1.15rem; display: grid; gap: 0.9rem; }
.step-list li { padding-left: 0.35rem; font-size: 0.9875rem; }
.step-list li::marker { font-weight: 700; color: var(--red); }

.recipe-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.recipe-cta p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.recipe-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 900px) {
  .recipe-layout { grid-template-columns: 1fr; }
  .recipe-media { position: static; max-width: 26rem; }
  .recipe-cols { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

/* Two-column opener so the page does not begin with a block of text */
.faq-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
.faq-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.faq-hero h1 { font-size: clamp(2.25rem, 4.2vw, 3.6rem); margin-block: 0.35em 0.4em; }
.faq-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Full-width photographic break between question groups */
.faq-band {
  margin: 0;
  height: clamp(14rem, 26vw, 22rem);
  overflow: hidden;
}
.faq-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.faq { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* --- Legal pages (privacy policy) -------------------------------------
   A plain reading column. Borrows the FAQ's heading rule so a legal page
   still looks like part of the site rather than a pasted-in document. */
.legal { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }
.legal h1 { margin-bottom: 0.75rem; }
.legal .lead { margin-bottom: 0.75rem; }

.legal-date {
  font-size: 0.9rem;
  color: var(--ink-soft, #6b5b4d);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.legal-group + .legal-group { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.legal-group > h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--red);
}

/* No max-width here: .shell-narrow already sets the reading column, and
   a second limit made the text stop short of the heading rules. */
.legal-group p { margin: 0 0 1rem; }
.legal-group p:last-child { margin-bottom: 0; }
.faq-buy { background: var(--cream); padding-block: var(--section); }

.faq-group + .faq-group { margin-top: clamp(2.75rem, 5vw, 4rem); }

.faq-group > h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  color: var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--red);
}

.qa + .qa { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.qa h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 0.5em; }
.qa p { color: var(--ink-soft); }
.qa p + p { margin-top: 0.75em; }
.qa a { text-underline-offset: 3px; }
.qa-more { font-size: var(--t-small); }

/* --- Opening the tin ----------------------------------------------------- */

.opening { padding-block: var(--section); background: var(--gray); }

.opening-head { max-width: 46ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.opening-head h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }

.opening-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.opening-step img {
  width: 100%;
  aspect-ratio: 900 / 630;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.opening-num {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}
.opening-step p:last-child { font-size: 0.9375rem; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .opening-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 560px) {
  .opening-steps { grid-template-columns: 1fr; }
  .opening-step img { max-width: 22rem; }
}


@media (max-width: 900px) {
  .faq-hero-grid { grid-template-columns: 1fr; }
  .faq-hero-media { max-width: 26rem; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-hero {
  position: relative;
  min-height: min(72svh, 640px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--brown);
}
/* The hero image is framed for a wide screen. On a phone the crop is far
   narrower, and at the desktop focal point the tin falls almost entirely
   outside the frame, so the homepage hero showed no product at all. Pulling
   the focal point right keeps the tin in shot. The incoming hero video will
   need the same treatment. */
@media (max-width: 640px) {
  .hero-media img { object-position: 62% 58%; }
}

.about-hero-media { position: absolute; inset: 0; }
.about-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.about-hero-content {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  color: #fff;
}
.about-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  max-width: 16ch;
  margin: 0.45em 0 0.4em;
  color: #fff;
  text-shadow: 0 2px 26px rgba(40, 18, 3, 0.45);
}
.about-hero p:not(.eyebrow) {
  font-size: var(--t-lead);
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 16px rgba(40, 18, 3, 0.55);
}

/* --- Mission pull-quote --------------------------------------------------- */

.mission {
  padding-block: var(--section);
  background: var(--red);
  color: #fff;
  text-align: center;
}
.mission .eyebrow { color: var(--butter); }
.mission blockquote { margin: 1.25rem 0 0; }
.mission blockquote p {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

/* --- Closing ------------------------------------------------------------- */

.closing { padding-block: var(--section); background: var(--cream); }

.closing-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.closing-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.closing h2 { font-size: var(--t-h2); margin-block: 0.4em 0.5em; }
.closing p + p { margin-top: 1em; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

@media (max-width: 900px) {
  .closing-grid { grid-template-columns: 1fr; }
  .closing-media { max-width: 26rem; }
}

/* Framing helper: some portrait frames put the subject low, so a centered
   crop loses it. */
.figure-low { object-position: 50% 82% !important; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

/* Warm ground so the form card has something to sit on */
.contact { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); background: var(--cream); }

.contact-head { max-width: 52ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact h1 { font-size: clamp(2.25rem, 4.2vw, 3.6rem); margin-block: 0.35em 0.4em; }

/* The form sits on a card so it reads as a distinct thing to fill in, rather
   than loose fields floating on the page */
.contact-form-col {
  background: var(--page);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
}

/* --- The form ------------------------------------------------------------ */

.contact-form { display: grid; gap: 1.25rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }

.field label {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--red); }
.field .opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid rgba(68, 34, 5, 0.28);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(173, 35, 24, 0.14);
}

/* The honeypot. Hidden from people without using display:none, which some
   bots check for. Kept out of the tab order and off screen. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: var(--t-small); color: var(--ink-soft); }
.contact-form .btn { justify-self: start; }

.form-status {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  border-left: 3px solid var(--red);
  background: var(--cream);
}
.form-status.is-ok { border-left-color: var(--brown); background: var(--gray); }

/* --- Aside --------------------------------------------------------------- */

.contact-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.contact-block + .contact-block { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.contact-block h2 {
  font-size: var(--t-h3);
  margin-bottom: 0.4em;
}
.contact-block p { font-size: 0.9375rem; color: var(--ink-soft); }
.contact-block a { text-underline-offset: 3px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { max-width: 30rem; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}


/* --- Closing band -------------------------------------------------------- */

.contact-band {
  position: relative;
  height: clamp(17rem, 34vw, 32rem);
  overflow: hidden;
  display: grid;
  align-items: center;
}
.contact-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.contact-band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(40, 18, 3, 0.62) 0%, rgba(40, 18, 3, 0.28) 55%, rgba(40, 18, 3, 0.1) 100%);
}
.contact-band-content { position: relative; }
.contact-band-content p {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(40, 18, 3, 0.5);
}

/* ==========================================================================
   STORE LOCATOR
   ========================================================================== */

/* The locator is now the page. Two bands: the controls on the page
   background, the results on cream so the cards read against something. */

.locator-top {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--page);
}
.locator-top h1 { font-size: clamp(2.25rem, 4.2vw, 3.6rem); margin-block: 0.35em 0.4em; }
.locator-top .lead { max-width: 56ch; margin-bottom: clamp(1.6rem, 3vw, 2.25rem); }

/* The carousel sits between the intro and the search field, full bleed, so
   the shell closes around it. */
.locator-top .logo-scroller { margin-block: clamp(1.5rem, 3vw, 2.25rem); }

.locator-results-band {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) var(--section);
  background: var(--cream);
}

.locator-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.locator-input { flex: 1 1 20rem; position: relative; }

/* Room for the clear button, and the native one hidden so there are never two. */
.locator-input input { padding-right: 2.9em; }
.locator-input input::-webkit-search-cancel-button { display: none; }

.locator-clear {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.locator-clear:hover { background: rgba(68, 34, 5, 0.08); color: var(--ink); }
.locator-clear[hidden] { display: none; }
.locator-input input {
  width: 100%;
  padding: 0.95em 1.1em;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid rgba(68, 34, 5, 0.28);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.locator-input input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(173, 35, 24, 0.14);
}

/* --- Search suggestions ---------------------------------------------------
   A short list of towns, retailers and states, so people can see what the
   field accepts instead of guessing. Sits over the map, hence the z-index. */

.locator-suggest {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  /* Eight rows fit without scrolling, which is the most the list ever
     offers. The overflow is a safety net for very large text settings. */
  max-height: 23.5rem;
  overflow-y: auto;
  background: var(--page);
  border: 1px solid rgba(68, 34, 5, 0.2);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(40, 18, 3, 0.16);
}
.locator-suggest[hidden] { display: none; }

.locator-suggest li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
}
.locator-suggest li:hover,
.locator-suggest li.is-active { background: var(--gray); }

.suggest-label { font-weight: 500; }
.suggest-kind {
  flex-shrink: 0;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Retailer filter chips ----------------------------------------------- */

/* 0.5rem between chips was 8px, which is tight once the chips are 44px tall
   and stacking into four rows on a phone. 0.625rem gives a thumb somewhere
   to miss without hitting the neighbour. */
.locator-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.5rem; }

.chip {
  /* 44px minimum height: these are the locator's main control and they were
     31px, which is a small target for a thumb. inline-flex centres the label
     inside the taller pill; the horizontal padding is unchanged so the chips
     keep their width and the rows wrap the same way. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(68, 34, 5, 0.28);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }

.locator-status {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  min-height: 1.4em;
}

/* --- Results ------------------------------------------------------------- */

.store-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.store {
  background: var(--page);
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.store-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.store-head h3 { font-size: 1.0625rem; line-height: 1.2; }

.store-dist {
  flex-shrink: 0;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
}

/* Ordered but not on shelf yet. Deliberately quiet: it is information, not a
   warning, and these stores sit below the stocked ones anyway. */
.store-soon {
  align-self: flex-start;
  margin: 0.35rem 0 0;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(173, 35, 24, 0.35);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.store-addr { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); flex-grow: 1; }

.store-link {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 74, 44, 0.35);
  padding-bottom: 2px;
}
.store-link:hover { color: var(--red); border-bottom-color: currentColor; }

.store-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  background: var(--page);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

.locator-more { margin-top: 2rem; text-align: center; }

.stores-note { padding-block: var(--section); }
.stores-note h2 { font-size: var(--t-h2); margin-bottom: 0.5em; }
.stores-note p { color: var(--ink-soft); }

/* .btn sets display:inline-flex, which is a class selector and therefore beats
   the browser's own [hidden] rule. Without this, anything hidden in script
   stays visible. */
[hidden] { display: none !important; }

/* --- Locator: map beside the results ------------------------------------- */

.locator-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.locator-map-wrap { position: sticky; top: 6.5rem; }

/* Mapbox unavailable. The column collapses and the list takes the width, so a
   blocked or failed map costs a short notice rather than an empty half-page. */
.locator-body.no-map { grid-template-columns: 1fr; }
.locator-body.no-map .locator-map-wrap { position: static; }
.locator-body.no-map .locator-map { display: none; }
/* With the width freed up, the list reads better in columns than as one very
   wide row per store. */
.locator-body.no-map .store-list { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }

.locator-map {
  width: 100%;
  height: clamp(26rem, 66vh, 42rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray);
}

.locator-map-fallback {
  padding: 2rem;
  background: var(--page);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-align: center;
}

/* The results column scrolls against the fixed map on desktop */
.locator-results { min-width: 0; }
.locator-results .store-list { grid-template-columns: 1fr; }

.store {
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.store:hover, .store.is-active {
  border-left-color: var(--brown);
  transform: translateX(2px);
}
.store.is-active { box-shadow: 0 2px 18px rgba(68, 34, 5, 0.12); }

/* Mapbox's own chrome, nudged toward the brand */
.mapboxgl-popup-content {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.mapboxgl-popup-content strong { font-family: var(--font-head); font-size: 1rem; }
.mapboxgl-popup-content a { color: var(--red); }
.mapboxgl-ctrl-group { border-radius: var(--radius) !important; }

@media (max-width: 900px) {
  /* On a phone the map goes above the list, which is where a thumb expects it */
  .locator-body { grid-template-columns: 1fr; }
  .locator-map-wrap { position: static; }
  .locator-map { height: 20rem; }
  .locator-results .store-list {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

/* Buy actions: replaces the three-card block on the homepage and product
   page. The full retailer detail lives on Where to Buy, so these pages just
   need a clear way through to it. */
.buy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ==========================================================================
   COMPONENTS ADDED IN THE AUG 2026 CHANGE ROUND
   ========================================================================== */

/* --- New Zealand Standard stamp -----------------------------------------
   Sits on the photo in the upper right, as if stamped onto the page, turned a
   few degrees like a hand stamp. It has its own layer so the headline and
   buttons are laid out as if it were not there, and it never takes clicks.

   The brown variant is used because the upper right of this photo is the
   bright window: the white stamp disappears against it, and dark ink is what
   a real stamp looks like. Multiply lets the paper grain of the photo show
   through, the way ink sits on a surface. */

.hero-stamp-layer {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  pointer-events: none;
}

.hero-stamp {
  position: absolute;
  right: 0;
  top: 23%;
  width: clamp(9.5rem, 15vw, 13.5rem);
  height: auto;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
  opacity: 0.92;
}

/* Tablet: smaller, same position. Checked clear of the nav, headline and
   buttons at 1920, 1440, 1180, 1024, 820, 700, 390 and 360 wide. */
@media (max-width: 1100px) {
  .hero-stamp { width: clamp(7.5rem, 14vw, 10rem); }
}

/* Phone: small, upper right of the image, below the nav bar. The hero centres
   its copy vertically, so on a short phone (360x640) the headline rose into
   the stamp. Padding above the copy keeps the headline below the stamp's
   lowest corner at any screen height. */
@media (max-width: 640px) {
  .hero-stamp { width: 6.25rem; top: 6.25rem; }
  .hero-content { padding-top: 10rem; }
}

/* --- Retailer logo row ---------------------------------------------------
   Rendered from assets/data/retailers.js by site.js. A retailer appears here
   only if it has a `logo` line pointing at a file in assets/img/logos.

   Logos come in very different shapes, so they are capped on BOTH height and
   width and centred in a fixed-height box. That keeps a tall square mark and
   a long wordmark reading at the same optical weight without cropping. */

.logo-row {
  list-style: none;
  margin: clamp(2.5rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}

.logo-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(4rem, 6vw, 5rem);
}

.logo-row img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: clamp(7.5rem, 13vw, 9.5rem);
  object-fit: contain;
}

/* --- Retailer logo scroller (Where to Buy) -------------------------------
   The same data, moving. The track is rendered twice by site.js so the loop
   is seamless; the duplicate is aria-hidden so screen readers hear the list
   once. Animation is off entirely for anyone who asks for reduced motion,
   in which case it degrades to the static centred row above. */

.logo-scroller {
  overflow: hidden;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.5rem, 6vw, 5rem);
  animation: logo-marquee 38s linear infinite;
}

.logo-scroller:hover .logo-track { animation-play-state: paused; }

.logo-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(4rem, 6vw, 5rem);
}

.logo-track img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: clamp(7.5rem, 13vw, 9.5rem);
  object-fit: contain;
}

/* --- Per-logo optical sizing ---------------------------------------------
   Retailer logos range from a 1:1 roundel to a 5:1 wordmark. Capping them all
   at one height makes the wide ones a thin illegible strip; capping them all
   at one width makes the square ones tower over everything. So the shape
   outliers get their own limit. `data-logo` is set by site.js from the file
   name, so a new logo only needs a line here if it is an extreme shape. */

/* Very wide wordmarks: more width, or they render about 30px tall. */
.logo-row li[data-logo="jungle-jims"] img,
.logo-track li[data-logo="jungle-jims"] img,
.logo-row li[data-logo="decicco-and-sons"] img,
.logo-track li[data-logo="decicco-and-sons"] img,
.logo-row li[data-logo="kowalskis-markets"] img,
.logo-track li[data-logo="kowalskis-markets"] img,
.logo-row li[data-logo="strack-van-til"] img,
.logo-track li[data-logo="strack-van-til"] img {
  max-width: clamp(9.5rem, 16vw, 12rem);
}

/* Square, badge and arc marks carry far more ink than a wordmark of the same
   height, so they come back a little. Without this, the Detwiler's barn stands
   a full head above every wordmark beside it. */
.logo-row li[data-logo="whole-foods"] img,
.logo-track li[data-logo="whole-foods"] img,
.logo-row li[data-logo="berkeley-bowl"] img,
.logo-track li[data-logo="berkeley-bowl"] img,
.logo-row li[data-logo="robert-fresh-market"] img,
.logo-track li[data-logo="robert-fresh-market"] img,
.logo-row li[data-logo="detwilers-farm-market"] img,
.logo-track li[data-logo="detwilers-farm-market"] img {
  max-height: 84%;
}

.logo-row li[data-logo="shady-maple"] img,
.logo-track li[data-logo="shady-maple"] img {
  max-height: 88%;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(1.25rem, 3vw, 2.5rem))); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Instagram feed ------------------------------------------------------
   PLACEHOLDER LAYOUT. The tiles below are brand photography standing in for
   a live feed widget, which gets chosen and connected at launch. The grid is
   built so the widget can be dropped straight into .ig-grid without any of
   the surrounding section changing. See the comment in index.html. */

.social-head { max-width: 46ch; margin-inline: auto; }

.ig-grid {
  list-style: none;
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1vw, 0.85rem);
}

.ig-grid li { margin: 0; }

.ig-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.ig-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.ig-grid a:hover img { transform: scale(1.05); opacity: 0.88; }

.social .btn { margin-top: clamp(2.25rem, 4vw, 3rem); }

@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}