/* Spud & Root — site styles
   Colour tokens come from the Spud & Root design system (brand colour sheet).
   Where a brand colour fails WCAG contrast for body text, a darker "-text"
   companion is defined and used for text-bearing surfaces only. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("../fonts/caveat-brush.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand */
  --ink: #231f20;
  --white: #ffffff;
  --logo-green: #97d700;
  --logo-yellow: #ffde00;
  --potato-gold: #ffb81b;
  --potato-red: #ff4438;
  --potato-russet: #bc6124;
  --potato-white: #5fb4e6;
  --herb-dark: #416631;
  --herb-light: #9bc653;
  --rich-dark: #855ea8;
  --rich-light: #b89ecb;
  --char-yellow: #f8dd00;

  /* Supporting */
  --cream: #fff8ea;
  --ink-soft: #52494b;
  --russet-text: #9a4f1c; /* russet darkened for white text (5.9:1) */
  --line: #e7dcc4;

  /* Type */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "Caveat Brush", "Bradley Hand", "Segoe Script", cursive;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --stroke: 3px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--logo-yellow);
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important;
  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: 12px;
  top: -80px;
  z-index: 100;
  background: var(--logo-yellow);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 18px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
}
.tagline {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.1;
}
.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  max-width: 38em;
}
.section-head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 44rem;
}
.section-head h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--logo-green);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn--ink {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  box-shadow: 4px 4px 0 var(--logo-yellow);
}
.btn--ink:hover {
  box-shadow: 6px 6px 0 var(--logo-yellow);
}
.btn--ink:active {
  box-shadow: 1px 1px 0 var(--logo-yellow);
}
.btn--white {
  --btn-bg: var(--white);
}
.btn .arrow {
  transition: transform 0.2s var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: var(--stroke) solid var(--ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}
.brand-link {
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.brand-link img {
  width: 84px;
  height: auto;
  transition: transform 0.35s var(--ease-spring);
}
.brand-link:hover img {
  transform: rotate(-6deg) scale(1.05);
}
.nav-toggle {
  display: none;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.site-nav a:hover {
  background: var(--logo-yellow);
  border-color: var(--ink);
}
.site-nav a[aria-current="page"] {
  background: var(--logo-yellow);
  border-color: var(--ink);
}

/* Potatoes, Seasonings, Kitchen and Game Room dropdowns (li.nav-group). Each is a link to
   its page (potatoes.html, seasonings/, home/kitchen/, home/game-room.html) with a chevron button beside it that opens
   the list of items. With JavaScript, desktop shows the list in a panel under
   the pair (it also opens on hover) and the phone menu opens it beneath the
   row. Without JavaScript only the link shows. The link and chevron read as
   one pill. li.is-open is set by initNavGroups() and li.is-current by
   scripts/sync-header-footer.py. */
.nav-group__toggle {
  display: none;
}
html:not(.js) .nav-group__menu {
  display: none;
}
/* The Game Room's games need JavaScript, so without it the header leaves the
   Game Room out altogether (the footer still links to it) */
html:not(.js) .site-nav [data-needs-js] {
  display: none;
}
.js .nav-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.js .site-nav .nav-group__link {
  padding-right: 6px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.js .nav-group__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 40px;
  min-height: 44px;
  padding: 8px 12px 8px 4px;
  color: var(--ink);
  background: none;
  border: 2px solid transparent;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
/* Hovering either half, an open list or the current section lights up the
   whole pill */
.js .nav-group:hover > .nav-group__link,
.js .nav-group:hover > .nav-group__toggle,
.js .nav-group.is-open > .nav-group__link,
.js .nav-group.is-open > .nav-group__toggle,
.js .nav-group.is-current > .nav-group__link,
.js .nav-group.is-current > .nav-group__toggle {
  background: var(--logo-yellow);
  border-color: var(--ink);
}
/* ...with no line down the middle. (No side border at all, rather than a
   transparent one, which would leave a notch in the outline where they meet.) */
.js .site-nav .nav-group > .nav-group__link {
  border-right-width: 0;
}
.js .site-nav .nav-group > .nav-group__toggle {
  border-left-width: 0;
}
.nav-group__chevron {
  transition: transform 0.2s var(--ease-out);
}
.nav-group__toggle[aria-expanded="true"] .nav-group__chevron {
  transform: rotate(180deg);
}
.js .site-nav .nav-group__menu a {
  display: flex;
  gap: 14px;
  font-weight: 400;
}
.js .site-nav .nav-group__menu img {
  flex-shrink: 0;
  width: auto;
  height: 56px;
}
/* Kitchen: square recipe thumbnails instead of tall bag and jar shots, and a
   closing "All recipes" row */
.js .site-nav .nav-group__menu--recipes img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.js .site-nav .nav-group__menu--recipes li:not(.nav-group__all) a,
.js .site-nav .nav-group__menu--games li:not(.nav-group__all) a {
  align-items: center;
}
/* Game Room: each game's screen from its machine, set in a little black
   arcade bezel with faint scanlines that light up when hovered */
.nav-group__screen {
  position: relative;
  flex-shrink: 0;
  display: block;
  padding: 3px;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.js .site-nav .nav-group__menu--games img {
  display: block;
  width: auto;
  height: 48px;
  border-radius: 6px;
  filter: saturate(0.9) brightness(0.94);
  transition: filter 0.2s;
}
.nav-group__screen::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.js .site-nav .nav-group__menu--games a:hover img,
.js .site-nav .nav-group__menu--games a:focus-visible img {
  filter: none;
}
.js .site-nav .nav-group__all a {
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--font-display);
}
.nav-group__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}
.nav-group__desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .js .site-nav .nav-group__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: grid;
    gap: 4px;
    width: 340px;
    padding: 8px;
    background: var(--white);
    border: var(--stroke) solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.18s, transform 0.18s var(--ease-out), visibility 0s 0.18s;
  }
  .js .site-nav .nav-group__toggle[aria-expanded="true"] + .nav-group__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.18s, transform 0.18s var(--ease-out);
  }
  /* Keeps the panel open while the pointer crosses the gap from the button */
  .js .site-nav .nav-group__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 16px;
  }
  .js .site-nav .nav-group__menu a {
    padding: 8px 12px;
    border-radius: 10px;
  }
}

@media (max-width: 899px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 16px 8px 14px;
    font: 600 1rem var(--font-display);
    color: var(--ink);
    background: var(--white);
    border: var(--stroke) solid var(--ink);
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  .nav-toggle__bars {
    position: relative;
    width: 20px;
    height: 14px;
  }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.25s var(--ease-out), opacity 0.2s;
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: 5.75px; }
  .nav-toggle__bars span:nth-child(3) { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(5.75px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-5.75px) rotate(-45deg);
  }
  .js .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: var(--stroke) solid var(--ink);
    padding: 12px var(--gutter) 20px;
    display: none;
  }
  .js .site-nav.is-open {
    display: block;
    animation: nav-drop 0.28s var(--ease-out);
  }
  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .js .site-nav a {
    display: flex;
    font-size: 1.125rem;
    padding: 12px 16px;
  }
  /* A dropdown is a row like the others: the link, with the chevron at the
     right end; the list opens beneath it, indented. */
  .js .nav-group__link {
    flex: 1 1 0;
    min-width: 0;
  }
  .js .nav-group__toggle {
    min-width: 56px;
    padding: 12px 18px 12px 8px;
  }
  .js .site-nav .nav-group__menu {
    display: none;
    flex: 1 1 100%;
    margin: 4px 0 8px 22px;
    padding-left: 10px;
    border-left: var(--stroke) solid var(--logo-yellow);
  }
  .js .site-nav .nav-group__toggle[aria-expanded="true"] + .nav-group__menu {
    display: grid;
    gap: 4px;
    animation: nav-drop 0.28s var(--ease-out);
  }
  .js .site-nav .nav-group__menu a {
    padding: 8px 12px;
  }
  .js .site-nav .nav-group__menu img {
    height: 48px;
  }
  .brand-link img {
    width: 70px;
  }
  /* No-JS: let links wrap under the logo */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: 10px;
  }
}
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(48px, 7vw, 80px) 28px;
}
.site-footer a {
  color: var(--white);
}
.site-footer__grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.footer-brand img {
  width: 132px;
  margin-bottom: 16px;
}
.footer-brand .tagline {
  color: var(--logo-green);
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfc8c9;
  margin-bottom: 14px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.site-footer ul a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: none;
  font-weight: 600;
}
.site-footer ul a:hover {
  text-decoration: underline;
  color: var(--logo-green);
}
.site-footer address {
  font-style: normal;
  color: #e6e2e3;
}
.site-footer__base {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #4a4344;
  font-size: 0.875rem;
  color: #cfc8c9;
}

/* ---------- Decorative field (from the bag's plowed-field band) ---------- */
.field {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1400px, 120%);
  translate: -50% 0;
  pointer-events: none;
}

/* ---------- Home: hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--logo-green);
  border-bottom: var(--stroke) solid var(--ink);
}
.hero .field {
  color: #86c000;
  opacity: 0.9;
}
.hero__inner {
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 72px);
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
  }
}
.hero__copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  line-height: 0.98;
}
.hero .lede {
  max-width: 30em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.hero__stage {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(300px, 52vw, 520px);
}
.hero__oval {
  position: absolute;
  inset: 4% 4% 14%;
  background: var(--ink);
  border: clamp(8px, 1.4vw, 14px) solid var(--logo-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 var(--stroke) var(--ink);
}
.hero__bags {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding-bottom: 2%;
}
.hero__bag {
  width: 31%;
  margin-inline: -4%;
  filter: drop-shadow(0 10px 0 rgba(35, 31, 32, 0.35));
  transform-origin: 50% 100%;
  transition: transform 0.35s var(--ease-spring);
}
.hero__bag:nth-child(1) { transform: rotate(-9deg) translateY(4%); z-index: 1; }
.hero__bag:nth-child(2) { transform: rotate(-3deg) translateY(-3%); z-index: 2; }
.hero__bag:nth-child(3) { transform: rotate(3deg) translateY(-3%); z-index: 3; }
.hero__bag:nth-child(4) { transform: rotate(9deg) translateY(4%); z-index: 2; }
.hero__bag:hover { transform: rotate(0deg) translateY(-8%) scale(1.04); z-index: 5; }
.hero__char {
  position: absolute;
  z-index: 6;
  width: clamp(60px, 9vw, 96px);
  left: -9%;
  bottom: 0;
  transform-origin: 50% 100%;
}

/* ---------- Variety strip ---------- */
.strip {
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.strip ul {
  list-style: none;
  margin: 0;
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.strip li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.strip .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--c);
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(56px, 9vw, 112px);
}
.section--cream {
  background: var(--cream);
  border-block: var(--stroke) solid var(--ink);
}

/* Potato cards */
.potato-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.potato-card {
  --c: var(--potato-gold);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.potato-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.potato-card__media {
  position: relative;
  display: grid;
  place-items: end center;
  height: 260px;
  padding-top: 18px;
  background: var(--c);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.potato-card__media::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1.3;
  bottom: -26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.potato-card__media img {
  position: relative;
  width: auto;
  height: 250px;
  margin-bottom: -26px;
  transition: transform 0.4s var(--ease-spring);
}
.potato-card:hover .potato-card__media img {
  transform: translateY(-10px) rotate(-4deg);
}
.potato-card__body {
  display: grid;
  gap: 8px;
  padding: 20px 20px 22px;
  flex: 1;
}
.potato-card h3 {
  font-size: 1.5rem;
}
.potato-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}
.potato-card .more {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.potato-card--gold { --c: var(--potato-gold); }
.potato-card--red { --c: var(--potato-red); }
.potato-card--russet { --c: var(--potato-russet); }
.potato-card--white { --c: var(--potato-white); }

/* Blend cards (home) */
.blend-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 880px) {
  .blend-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.blend-card {
  --bg: var(--herb-dark);
  --accent: var(--herb-light);
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  padding: clamp(22px, 3.4vw, 36px);
  color: var(--white);
  background: var(--bg);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.blend-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.blend-card--rich {
  --bg: var(--rich-dark);
  --accent: var(--rich-light);
}
.blend-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  left: -22%;
  bottom: -30%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
.blend-card__jar {
  width: 100%;
  max-width: 190px;
  justify-self: center;
  filter: drop-shadow(6px 8px 0 rgba(35, 31, 32, 0.45));
  transition: transform 0.4s var(--ease-spring);
}
.blend-card:hover .blend-card__jar {
  transform: rotate(-6deg) translateY(-6px);
}
.blend-card__body {
  display: grid;
  gap: 12px;
  align-content: center;
}
.blend-card h3 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
  line-height: 0.95;
}
.blend-card .descriptor {
  font-size: 1.0625rem;
}
.blend-card .more {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.blend-card__chars {
  position: absolute;
  right: 14px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: -1;
  opacity: 0.95;
}
.blend-card__chars img {
  height: 70px;
  width: auto;
  transform-origin: 50% 100%;
}
@media (max-width: 520px) {
  .blend-card__chars { display: none; }
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
}

/* Super Potato band */
.super {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.super__inner {
  display: grid;
  gap: 36px;
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px);
}
@media (min-width: 900px) {
  .super__inner {
    grid-template-columns: minmax(260px, 0.8fr) 1.4fr;
    gap: 64px;
  }
}
.super__art {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  padding: 28px 36px 0;
  background: var(--potato-gold);
  border: var(--stroke) solid var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--logo-green);
  overflow: hidden;
  isolation: isolate;
}
.super__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -30%;
  width: 120%;
  aspect-ratio: 1.3;
  translate: -50% 0;
  background: var(--logo-yellow);
  border-radius: 50%;
}
.super .eyebrow {
  color: var(--logo-green);
}
.super h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  margin: 10px 0 14px;
}
.super .lede {
  color: #e6e2e3;
}
.fact-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 520px) {
  .fact-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.fact {
  padding: 18px 18px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--cream);
}
.super .fact {
  border-color: #4a4344;
  background: #2d2829;
}
.fact__big {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--logo-green);
  margin-bottom: 8px;
}
.fact__label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.fact p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.super .fact p {
  color: #d9d4d5;
}
.fineprint {
  margin-top: 18px;
  font-size: 0.875rem;
  color: #bfb7b8;
}

/* CTA band */
.cta-band {
  position: relative;
  background: var(--logo-yellow);
  border-block: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  gap: 24px;
  align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}
@media (min-width: 820px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
  }
}
.cta-band h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  margin-bottom: 10px;
}
.cta-band__chars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.cta-band__chars img {
  height: 110px;
  width: auto;
  transform-origin: 50% 100%;
}
.cta-band__side {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Breadcrumb ---------- */
/* ---------- Potatoes page ---------- */
.pdp-hero {
  --c: var(--potato-gold);
  position: relative;
  background: var(--c);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
  transition: background-color 0.5s var(--ease-out);
}
.pdp-hero .field {
  color: rgba(35, 31, 32, 0.1);
}
.pdp-hero__inner {
  position: relative;
  padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px);
}
.pdp-hero__title {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.pdp-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
}
.variant-picker {
  border: 0;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 0;
  min-width: 0;
}
.variant-picker legend {
  font-weight: 700;
  margin-bottom: 12px;
  padding: 0;
}
.variant-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .variant-picker__options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.swatch {
  position: relative;
}
.swatch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.swatch label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 14px 8px 8px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.2s;
}
.swatch__chip {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--sw);
  overflow: hidden;
}
.swatch__chip img {
  height: 40px;
  width: auto;
  margin-top: 10px;
}
.swatch input:hover + label {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
}
.swatch input:checked + label {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.swatch input:focus-visible + label {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--white), 0 0 0 9px var(--ink);
}
.swatch--gold { --sw: var(--potato-gold); }
.swatch--red { --sw: var(--potato-red); }
.swatch--russet { --sw: var(--potato-russet); }
.swatch--white { --sw: var(--potato-white); }

/* Variant panels. Without JS, all four show stacked. */
.variant {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.variant + .variant {
  margin-top: 56px;
}
.js .variant + .variant {
  margin-top: 0;
}
@media (min-width: 860px) {
  .variant {
    grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  }
}
.js .variant[hidden] {
  display: none;
}
.variant__photo {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 36px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.variant__photo img {
  width: min(100%, 320px);
}
.variant__info {
  display: grid;
  gap: 18px;
  align-content: start;
}
.variant__info h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
}
.variant__desc {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  max-width: 34em;
}
.variant__store {
  font-weight: 700;
}
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 6px 0 0;
}
.specs div {
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
}
.specs dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.specs dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 1.0625rem;
}

/* Russet: white text is not needed since hero text is ink; keep ink but
   bump the backdrop so body copy on the russet hero stays readable. */
.pdp-hero[data-variant="russet"] .variant__info h2,
.pdp-hero[data-variant="russet"] .variant__desc,
.pdp-hero[data-variant="russet"] .variant__store,
.pdp-hero[data-variant="russet"] .pdp-hero__title,
.pdp-hero[data-variant="russet"] legend {
  color: var(--white);
}
.pdp-hero[data-variant="russet"] {
  --c: var(--russet-text);
}
.pdp-hero[data-variant="russet"] :focus-visible {
  color: var(--white);
}
.pdp-hero[data-variant="gold"] { --c: var(--potato-gold); }
.pdp-hero[data-variant="red"] { --c: var(--potato-red); }
.pdp-hero[data-variant="white"] { --c: var(--potato-white); }

/* Variant swap animation (added by JS) */
.variant.is-entering .variant__photo img {
  animation: bag-in 0.55s var(--ease-spring) both;
}
.variant.is-entering .variant__info > * {
  animation: rise-in 0.45s var(--ease-out) both;
}
.variant.is-entering .variant__info > *:nth-child(2) { animation-delay: 0.04s; }
.variant.is-entering .variant__info > *:nth-child(3) { animation-delay: 0.08s; }
.variant.is-entering .variant__info > *:nth-child(4) { animation-delay: 0.12s; }
.variant.is-entering .variant__info > *:nth-child(5) { animation-delay: 0.16s; }
@keyframes bag-in {
  from { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Nutrition label ---------- */
.nutrition-layout {
  display: grid;
  gap: 36px;
  align-items: start;
}
@media (min-width: 900px) {
  .nutrition-layout {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 56px;
  }
}
.nf {
  width: 100%;
  max-width: 360px;
  background: var(--white);
  color: #000;
  border: 2px solid #000;
  padding: 8px 10px 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.3;
  box-shadow: var(--shadow);
}
.nf table {
  width: 100%;
  border-collapse: collapse;
}
.nf caption {
  text-align: left;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid #000;
}
.nf .nf-servings td {
  padding-top: 4px;
}
.nf .nf-serving-size td {
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 10px solid #000;
  padding-bottom: 4px;
}
.nf .nf-calories th,
.nf .nf-calories td {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  vertical-align: bottom;
  border-top: 0;
  border-bottom: 5px solid #000;
  padding-block: 0 6px;
}
.nf .nf-amount td {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 4px 0 0;
}
.nf .nf-dv-head td {
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 700;
}
.nf th,
.nf td {
  padding: 3px 0;
  border-top: 1px solid #000;
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
}
.nf td:last-child:not([colspan]) {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.nf td[colspan] {
  text-align: left;
}
.nf .nf-dv-head td {
  text-align: right;
}
.nf .nf-caption-row td,
.nf .nf-caption-row th {
  border-top: 0;
}
.nf th b {
  font-weight: 700;
}
.nf .indent {
  padding-left: 16px;
}
.nf .indent2 {
  padding-left: 32px;
}
.nf .nf-thick th,
.nf .nf-thick td {
  border-top: 10px solid #000;
}
.nf .nf-note td {
  font-size: 0.75rem;
  font-weight: 400;
  text-align: left;
  border-top: 5px solid #000;
  padding-top: 6px;
  white-space: normal;
}
.nf .nf-nosig td {
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: left;
  border-top: 10px solid #000;
  white-space: normal;
}
.ingredients {
  display: grid;
  gap: 10px;
}
.ingredients h3,
.info-block h3 {
  font-size: 1.5rem;
}
.ingredients p {
  max-width: 40em;
}

/* ---------- Blend pages ---------- */
.blend-hero {
  --bg: var(--herb-dark);
  --accent: var(--herb-light);
  position: relative;
  color: var(--white);
  background: var(--bg);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.blend-hero--rich {
  --bg: var(--rich-dark);
  --accent: var(--rich-light);
}
.blend-hero :focus-visible {
  color: var(--white);
}
.blend-hero :focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 6px var(--ink);
}
.blend-hero__inner {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 48px) clamp(48px, 7vw, 88px);
}
@media (min-width: 880px) {
  .blend-hero__inner {
    grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
  }
}
.blend-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 42vw, 440px);
  max-width: 480px;
  width: 100%;
  justify-self: center;
}
.blend-hero__stage::before {
  content: "";
  position: absolute;
  width: min(92%, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  border: var(--stroke) solid var(--ink);
}
.blend-hero__jar {
  position: relative;
  width: min(44%, 200px);
  filter: drop-shadow(8px 10px 0 rgba(35, 31, 32, 0.5));
}
.blend-hero__chars {
  position: absolute;
  z-index: 1;
  bottom: -8px;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.blend-hero__chars img {
  height: clamp(72px, 10vw, 112px);
  width: auto;
  transform-origin: 50% 100%;
}
.blend-hero__chars--left {
  right: auto;
  left: 0;
}
.blend-hero__copy {
  display: grid;
  gap: 18px;
  align-content: center;
}
.blend-hero h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4.6vw, 5.5rem);
  line-height: 0.92;
}
.blend-hero .descriptor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.2;
  color: var(--logo-yellow);
}
.blend-hero .specs div {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
}
.blend-hero .specs dt {
  color: var(--white);
}

.recipe {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.recipe h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
}
.recipe__body {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
}
.recipe figcaption {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.info-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) {
  .info-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
.info-block {
  display: grid;
  gap: 12px;
}

/* Photos: framed like the recipe cards. The pictures have their own
   backgrounds, so they are shown as rectangles, never cut out. */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.section--photos {
  padding-top: 0;
}

/* One tall photo beside two wide ones: the wide ones are 3:2, the tall one
   is 2:3, so the columns come out level. On phones they stack. */
.photo-mosaic,
.photo-pair {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
}
.photo-mosaic .photo,
.photo-pair .photo {
  aspect-ratio: 3 / 2;
}
.photo-mosaic .photo--tall {
  aspect-ratio: 4 / 5;
}
@media (min-width: 600px) {
  .photo-mosaic {
    grid-template-columns: 1fr 1.125fr;
  }
  .photo-mosaic .photo--tall {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .photo-mosaic .photo--tall img {
    position: absolute;
    inset: 0;
  }
  .photo-pair {
    grid-template-columns: 1fr 1fr;
  }
}


/* Related products */
.related {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.related-card {
  --c: var(--logo-green);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 18px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.related-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
}
.related-card__img {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 104px;
  background: var(--c);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.related-card__img img {
  height: 92px;
  width: auto;
  margin-top: 16px;
}
.related-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
}
.related-card span {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
/* A recipe photo instead of a bag */
.related-card__img--photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* ---------- Seasoning Blends page hero ---------- */
.seasonings-hero {
  position: relative;
  background: var(--logo-yellow);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.seasonings-hero .field {
  color: rgba(35, 31, 32, 0.1);
  opacity: 1;
}
.seasonings-hero__inner {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px);
}
.seasonings-hero h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  line-height: 0.98;
}
.seasonings-hero .lede {
  max-width: 30em;
}
.seasonings-hero__chars {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  display: none;
  align-items: flex-end;
}
.seasonings-hero__chars img {
  height: 170px;
  width: auto;
  transform-origin: 50% 100%;
}
@media (min-width: 860px) {
  .seasonings-hero__chars { display: flex; }
}

/* ---------- Kitchen (recipes) ---------- */
/* The room at the top is kitchen.css's. */

/* A note from the potato */
.kitchen-note {
  position: relative;
  display: grid;
  gap: 20px;
  align-items: center;
  max-width: 60rem;
  margin: 0 auto clamp(48px, 7vw, 80px);
  padding: clamp(24px, 4vw, 40px);
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 720px) {
  .kitchen-note {
    grid-template-columns: 150px 1fr;
    gap: clamp(24px, 4vw, 44px);
  }
}
.kitchen-note__potato {
  justify-self: center;
  width: 80px;
  height: auto;
  rotate: -6deg;
}
@media (min-width: 720px) {
  .kitchen-note__potato { width: 140px; }
}
.kitchen-note__body {
  display: grid;
  gap: 12px;
}
.kitchen-note h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
}
.kitchen-note p {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
}
.kitchen-note .sign {
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1;
}

/* Recipe cards (Kitchen page and home) */
.recipe-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 760px) {
  .recipe-grid--pair {
    grid-template-columns: 1fr 1fr;
  }
}
.recipe-grid > li {
  display: flex;
}
.recipe-card {
  --tag: var(--logo-yellow);
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.recipe-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.recipe-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
  background: var(--potato-white);
}
.recipe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 0.5s var(--ease-out);
}
.recipe-card:hover .recipe-card__media img {
  transform: scale(1.05);
}
.recipe-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tag);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
}
.recipe-card__body {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px 22px 24px;
  flex: 1;
}
.recipe-card h3 {
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem);
  line-height: 1.08;
}
.recipe-card__sub {
  font-family: var(--font-script);
  font-size: 1.35rem;
  line-height: 1.1;
}
.recipe-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}
.recipe-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.recipe-card__meta li {
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
}
.recipe-card .more {
  margin-top: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.recipe-card .more .arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}
.recipe-card:hover .more .arrow {
  transform: translateX(3px);
}

/* The "more coming" card */
.recipe-card--soon {
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 28px;
  text-align: center;
  background: var(--cream);
  border-style: dashed;
  box-shadow: none;
}
.recipe-card--soon:hover {
  transform: none;
  box-shadow: none;
}
.recipe-card--soon img {
  width: 96px;
  height: auto;
  transform-origin: 50% 100%;
}
.recipe-card--soon h3 {
  font-size: 1.5rem;
}
.recipe-card--soon p {
  max-width: 18em;
}

.section-foot {
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- Contact ---------- */
.contact-hero {
  position: relative;
  background: var(--logo-yellow);
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.contact-hero .field {
  color: rgba(35, 31, 32, 0.08);
}
.contact-hero__inner {
  position: relative;
  display: grid;
  gap: 16px;
  padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 64px);
}
.contact-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
}
.contact-hero__chars {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  display: none;
  align-items: flex-end;
}
.contact-hero__chars img {
  height: 150px;
  width: auto;
  transform-origin: 50% 100%;
}
@media (min-width: 860px) {
  .contact-hero__chars { display: flex; }
}
.contact-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.4fr 0.8fr;
    gap: 64px;
    align-items: start;
  }
}
.form-card {
  padding: clamp(22px, 4vw, 40px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}
.field-group {
  display: grid;
  gap: 6px;
}
.field-group label {
  font-weight: 700;
}
.field-group .hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  transition: box-shadow 0.15s, background-color 0.15s;
}
.field-group select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23231f20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field-group textarea {
  min-height: 160px;
  resize: vertical;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  background: #fffdf5;
  box-shadow: var(--shadow-sm);
}
.field-group input:focus-visible,
.field-group select:focus-visible,
.field-group textarea:focus-visible {
  outline: 3px solid var(--logo-green);
  outline-offset: 2px;
}
.field-group [aria-invalid="true"] {
  border-color: #b3261e;
  background: #fff5f4;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b3261e;
  font-weight: 700;
  font-size: 0.9rem;
}
.field-error:empty {
  display: none;
}
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.form-actions .btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.form-status {
  margin-top: 20px;
  padding: 16px 18px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.form-status:empty {
  display: none;
}
.form-status[data-tone="success"] {
  background: #e7f7c9;
}
.form-status[data-tone="error"] {
  background: #ffe3e0;
}
.form-status[data-tone="info"] {
  background: var(--cream);
}
.form-status p + p {
  margin-top: 8px;
}
.contact-aside {
  display: grid;
  gap: 24px;
}
.contact-aside .card {
  padding: 24px;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
}
.contact-aside h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.contact-aside a {
  font-weight: 700;
  word-break: break-word;
}

/* ---------- 404 ---------- */
.not-found {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding-block: clamp(56px, 10vw, 120px);
}
.not-found img {
  width: 150px;
}
.not-found h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: only hidden once JS confirms it can reveal them. */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--delay, 0s);
  }
  .reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  .reveal-ready [data-reveal="pop"] {
    transform: scale(0.9) rotate(-3deg);
    transition-timing-function: var(--ease-spring);
  }

  /* Hero entrance */
  .hero__copy > * {
    animation: rise-in 0.7s var(--ease-out) both;
  }
  .hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
  .hero__oval {
    animation: oval-in 0.8s var(--ease-spring) both;
  }
  .hero__bag {
    animation: drop-in 0.8s var(--ease-spring) both;
    animation-delay: calc(0.25s + var(--i) * 0.09s);
  }
  .hero__char {
    animation: peek 0.7s var(--ease-spring) 0.9s both;
  }
  .field {
    animation: field-in 1.1s var(--ease-out) both;
  }

  /* Characters give a small wave on hover of their card */
  .blend-card:hover .blend-card__chars img,
  .cta-band:hover .cta-band__chars img,
  .blend-hero__stage:hover .blend-hero__chars img,
  .contact-hero:hover .contact-hero__chars img,
  .seasonings-hero:hover .seasonings-hero__chars img,
  .recipe-card--soon:hover img {
    animation: wobble 0.7s var(--ease-out);
  }
  .blend-card:hover .blend-card__chars img:nth-child(2),
  .cta-band:hover .cta-band__chars img:nth-child(2),
  .blend-hero__stage:hover .blend-hero__chars img:nth-child(2),
  .contact-hero:hover .contact-hero__chars img:nth-child(2),
  .seasonings-hero:hover .seasonings-hero__chars img:nth-child(2) {
    animation-delay: 0.08s;
  }
  .blend-card:hover .blend-card__chars img:nth-child(3),
  .cta-band:hover .cta-band__chars img:nth-child(3),
  .blend-hero__stage:hover .blend-hero__chars img:nth-child(3),
  .contact-hero:hover .contact-hero__chars img:nth-child(3),
  .seasonings-hero:hover .seasonings-hero__chars img:nth-child(3) {
    animation-delay: 0.16s;
  }
  .seasonings-hero:hover .seasonings-hero__chars img:nth-child(4) {
    animation-delay: 0.24s;
  }
  /* Blend heroes split characters across two groups; stagger by --i instead */
  .blend-hero__stage:hover .blend-hero__chars img[style] {
    animation-delay: calc(var(--i, 0) * 0.08s);
  }
  .blend-hero__jar {
    animation: jar-in 0.8s var(--ease-spring) 0.1s both;
  }
  .blend-hero__stage::before {
    animation: oval-in 0.7s var(--ease-spring) both;
  }
  .blend-hero__chars img {
    animation: peek 0.6s var(--ease-spring) both;
    animation-delay: calc(0.5s + var(--i, 0) * 0.1s);
  }
}

@keyframes drop-in {
  from { opacity: 0; translate: 0 -40%; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes oval-in {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}
@keyframes peek {
  from { opacity: 0; translate: 0 40%; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes jar-in {
  from { opacity: 0; translate: 0 30px; rotate: 8deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes field-in {
  from { opacity: 0; translate: -50% 30%; }
  to { opacity: 1; translate: -50% 0; }
}
@keyframes wobble {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -7deg; }
  60% { rotate: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bag:hover,
  .potato-card:hover .potato-card__media img,
  .blend-card:hover .blend-card__jar,
  .recipe-card:hover .recipe-card__media img,
  .brand-link:hover img {
    transform: none;
  }
}

@media (max-width: 599px) {
  .hero__char {
    display: none;
  }
}

/* Keep the product stage from ballooning in single-column layouts */
.hero__stage {
  width: 100%;
  max-width: 580px;
  justify-self: center;
}
@media (max-width: 859px) {
  .variant__photo {
    max-width: 420px;
    width: 100%;
    justify-self: center;
  }
}