/* ============================================================
   CHEEREAL, cereal milk chews
   Two layers, deliberately separate:

   1. BRAND WORLD (hero set, lineup, FAQ, footer)
      milk   #FBF6EA   neutral field, the default page background
      cream  #FFFCF2   lifted surfaces
      ink    #191621   type, dark bands
      pop    #E8462F   tags and the LIVE chip (the only accent up here)

   2. COMMERCE (product cards, flavor pages)
      driven entirely by the four flavor palettes below, so a card looks
      like the bag it sells and nothing else on the page has to change.
   ============================================================ */

:root {
  --milk:  #FBF6EA;
  --cream: #FFFCF2;
  --ink:   #191621;
  --pop:   #E8462F;

  /* Flavor palettes. These mirror `palette` in catalog.js, so art direction,
     data and CSS stay in step. */
  --og-blue:      #4FA8E0;
  --og-milk:      #FFFDF7;
  --cocoa-brown:  #4A2C1B;
  --cocoa-tan:    #C68B59;
  --cocoa-cream:  #F2E3CB;
  --fruity-purple:#4B2C83;
  --fruity-pink:  #FF4FA3;
  --fruity-yellow:#FFD23F;
  --fruity-green: #3FCF8E;
  --cinn-orange:  #C4541D;
  --cinn-tan:     #D9A566;
  --cinn-cream:   #F4E5CE;

  /* Panel tints. The bag renders are loud (full-bleed illustration, mascots,
     a wordmark), so the panels they sit on are the palette at low saturation.
     Saturated blocks behind them fought the art and buried the product. */
  --og-tint:     #DDEEFA;
  --cocoa-tint:  #EFE1D0;
  --fruity-tint: #EDE3F7;
  --cinn-tint:   #F6E6D1;

  --display: "Archivo Black", system-ui, sans-serif;
  --text:    "Archivo", system-ui, sans-serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--milk);
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Shared type helpers ---- */
.section-head {
  font-family: var(--display);
  font-weight: 400;               /* Archivo Black is a single-weight face */
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 8vw, 6rem);
}
.section-head--milk { color: var(--milk); }

/* ---- Pills / buttons ---- */
.pill {
  display: inline-block;
  font-family: inherit;            /* <button> pills need this; anchors inherit anyway */
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  font-size: clamp(0.72rem, 1.3vw, 0.85rem);
  padding: 0.85em 1.7em;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.pill--dark {
  background: var(--ink);
  color: var(--milk);
}
.pill--dark:hover { transform: translateY(-2px); background: #000; }
.pill--dark:active { transform: translateY(0); }

/* Outlined secondary. Padding is the base pill's minus the border, so a ghost
   and a solid pill sitting side by side are exactly the same height. */
.pill--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: calc(0.85em - 2px) calc(1.7em - 2px);
}
.pill--ghost:hover { transform: translateY(-2px); background: var(--ink); color: var(--milk); }
.pill--ghost:active { transform: translateY(0); }

/* Slab corners for the site's action buttons (matching the nav CART's 12px)
   instead of full pills. Compound selectors override .pill's 999px without
   touching .pill globally. */
.pill.hero__cta,
.pill.card__cta,
.pill.panel__cta,
.pill.gift__cta,
.pill.preorder__submit,
.pill.cart__checkout,
.pill.pdp__cta { border-radius: 12px; }

/* ---- Utility ---- */
.is-hidden { display: none !important; }

/* ============================================================
   NAV, single-element scroll-morph
   One persistent pill, always centered (left:50% + translateX). It never
   swaps between two elements, that's what keeps the boundary flicker-free.
   JS toggles .is-visible: hidden at the top and while scrolling down, shown
   on any upward scroll. CSS owns the timing, so the speed is constant no
   matter how fast the user scrolls.
   ============================================================ */
:root {
  --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --nav-h: 56px;
  /* = (nav-h 56 − CART button height 30.3) / 2 ≈ 13px, so the button's
     top/bottom/right insets match and the wordmark mirrors it on the left. */
  --nav-pad: 13px;
}

.nav {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  width: min(660px, calc(100% - 24px));
  padding: 0 var(--nav-pad);
  color: var(--ink);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.nav__cta { pointer-events: auto; }

/* Chrome, the cream pill surface. */
.nav__chrome {
  position: absolute;
  inset: 0;
  border-radius: 16px;   /* slab corners, not a pill */
  background: rgba(255, 252, 242, 0.95);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  z-index: -1;
}

.nav__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav__mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;               /* the wordmark never gets squeezed/clipped */
  text-decoration: none;
  color: var(--ink);
  margin-right: clamp(1rem, 3vw, 1.75rem);
}
/* Type, not an image: always renders, no asset dependency. */
.nav__wordmark {
  font-family: var(--display);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 3vw, 2.25rem);
}
.nav__links a {
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 400;
}
.nav__links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
/* Fixed font-size (not the responsive pill clamp) so the button height, and
   therefore its vertical breathing room, is constant across breakpoints. */
.nav__cta { padding: 0.6em 1.4em; font-size: 0.8rem; border-radius: 12px; }

/* Currency status badge: reads as a status indicator, not a nav link. */
.nav__currency {
  margin-left: auto;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.65em;
  border-radius: 8px;
  background: rgba(25, 22, 33, 0.06);
  color: rgba(25, 22, 33, 0.55);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;                 /* purely a status readout */
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition-duration: 0.1s; }
}

/* Mobile: the pill spans nearly full width; wordmark + 4 links + CART fit by
   trimming letterspacing, gap and padding (links stay, never dropped). */
@media (max-width: 640px) {
  .nav { width: calc(100% - 20px); }
  .nav__wordmark { font-size: 0.78rem; }
  .nav__mark { margin-right: 0.38rem; }
  .nav__links { gap: 0.1rem; }
  .nav__links a {
    font-size: 0.72rem;
    letter-spacing: 0;          /* dropped to fit the 4th link, never the link */
    padding: 0.65rem 0.12rem;   /* vertical keeps ≥32px tap target */
  }
  .nav__cta { padding: 0.6em 0.8em; font-size: 0.75rem; }
}

/* ============================================================
   HERO, the living room
   The viewer is the television. The scene slot is full width, edge to edge,
   and cuts between four channels, one per flavor.

   Every channel is a real <a>, so the scene is clickable and keyboard
   reachable with no JS at all, and the page degrades to a single static
   channel if script.js never runs.
   ============================================================ */
.hero {
  position: relative;
  background: var(--milk);
}

.hero__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Floors and ceilings so the set is never a thin strip on a phone or a
     wall-filling slab on a short laptop. When min-height wins, the scene is
     taller than 16:9 and object-fit crops the sides rather than letterboxing. */
  min-height: 300px;
  max-height: 78vh;
  overflow: hidden;
  background: var(--ink);
}

.hero__channels { position: absolute; inset: 0; }

/* Inactive channels are visibility:hidden, which also takes them out of the
   tab order, so only the live channel is focusable. The cut between channels
   is instant on purpose: the static burst covers it, the way a set does. */
.channel {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
  text-decoration: none;
  background: var(--ink);
}
.channel.is-live { visibility: visible; }
.channel:focus-visible { outline: 3px solid var(--milk); outline-offset: -6px; }

/* Fallback state, and what shows until images/channels/chN-*.png exist: the
   flavor's bag render centred on that flavor's palette colour. */
.channel--og     { background: var(--og-blue); }
.channel--cocoa  { background: var(--cocoa-brown); }
.channel--fruity { background: var(--fruity-purple); }
.channel--cinn   { background: var(--cinn-orange); }

.channel__bag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 74%;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.38));
}
/* The composed scene, once it exists, covers the fallback entirely. */
.channel__scene,
.channel__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Static burst between channels. The noise is drawn into this canvas at
   runtime (see script.js), so nothing is loaded from disk or the network. */
.hero__static {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transition: opacity 90ms linear;
}
.hero__scene.is-static .hero__static { opacity: 1; }

/* Permanent scanline + vignette pass. Sits above everything but the chips and
   is pointer-events:none, so a click anywhere still reaches the channel link. */
.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(25, 22, 33, 0.13) 0 1px,
      rgba(25, 22, 33, 0) 1px 4px
    ),
    radial-gradient(130% 105% at 50% 50%, rgba(25, 22, 33, 0) 52%, rgba(25, 22, 33, 0.45) 100%);
}

.hero__live,
.hero__ch {
  position: absolute;
  z-index: 7;
  pointer-events: none;          /* the whole picture stays one click target */
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.55em 0.8em;
  border-radius: 6px;
}
.hero__live {
  top: clamp(0.9rem, 2.5vw, 1.6rem);
  left: clamp(0.9rem, 2.5vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--pop);
  color: #FFFFFF;
}
.hero__live-dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #FFFFFF;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.hero__ch {
  top: clamp(0.9rem, 2.5vw, 1.6rem);
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  background: rgba(25, 22, 33, 0.6);
  color: var(--milk);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hero__live-dot { animation: none; }
  .hero__static { transition: none; }
}

/* Below the set: the brand line and the two calls to action. Modest, so the
   scene stays the loudest thing on the page. */
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
}
.hero__line {
  max-width: 26ch;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.hero__cta { padding: 0.95em 1.9em; font-size: 0.88rem; }
.pill--ghost.hero__cta { padding: calc(0.95em - 2px) calc(1.9em - 2px); }

@media (max-width: 640px) {
  .hero__scene { min-height: 320px; max-height: 62vh; }
  .channel__bag { height: 70%; max-width: 86%; }
}

/* ============================================================
   FLAVOR LINEUP
   Four bags in a row, each one a link to its flavor page.
   ============================================================ */
.lineup {
  background: var(--milk);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
}
.lineup .section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.lineup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 1280px;
}
.lineup__item {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.lineup__item:hover { transform: translateY(-4px); }
.lineup__item:hover .lineup__name,
.lineup__item:focus-visible .lineup__name {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.lineup__name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  margin-bottom: 0.5rem;
}
.lineup__line {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Flavor panel: the bag render on a tinted panel drawn from that flavor's own
   palette. Shared by the lineup and the flavor pages. */
.flavor__media {
  aspect-ratio: 1;
  border-radius: 18px;
  border: 2px solid var(--ink);
  overflow: hidden;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.4rem);
}
.flavor__media img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(25, 22, 33, 0.2));
}
.flavor--og .flavor__media {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, var(--og-tint) 100%);
}
.flavor--cocoa .flavor__media {
  background: radial-gradient(120% 100% at 50% 0%, #FBF3E8 0%, var(--cocoa-tint) 100%);
}
.flavor--fruity .flavor__media {
  background: radial-gradient(120% 100% at 50% 0%, #FDF4FB 0%, var(--fruity-tint) 100%);
}
.flavor--cinn .flavor__media {
  background: radial-gradient(120% 100% at 50% 0%, #FDF5E9 0%, var(--cinn-tint) 100%);
}

@media (max-width: 1024px) {
  .lineup__grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}
@media (max-width: 560px) {
  .lineup__grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ============================================================
   INTERSTITIAL, one line and nothing else
   ============================================================ */
.interstitial {
  background: var(--milk);
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad) clamp(4rem, 9vw, 7rem);
}
.interstitial__line {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  text-wrap: balance;
}

/* ============================================================
   THE BAGS, pricing tiers
   ============================================================ */
.bags {
  background: var(--ink);
  color: var(--milk);
  padding: clamp(4rem, 10vw, 8rem) var(--pad);
}
.bags .section-head { margin-bottom: 0; }

/* Product presiding over the pricing: the bag stands to the left of the
   heading, larger than the type, gently canted, lifted off the dark field by
   a soft pool of light. */
.bags__head {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1280px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.bags__bagwrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bags__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 0;
  width: 115%;
  aspect-ratio: 1;            /* even, circular, shapeless */
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(79, 168, 224, 0.42) 0%,
    rgba(79, 168, 224, 0.22) 40%,
    rgba(79, 168, 224, 0) 70%);
  pointer-events: none;
}
.bags__bag {
  position: relative;
  z-index: 1;
  /* Sized off the render's square canvas, whose bag fills roughly 82% of it. */
  height: clamp(340px, 36vw, 480px);
  width: auto;
  transform: rotate(-3deg);
}
/* Fallback only: a flat bag-shaped block in the OG Flakes palette, drawn if
   the bag render fails to load. */
.bags__bagwrap.is-empty {
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 4 / 5;
}
.bags__bagwrap.is-empty::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 18px 18px;
  transform: rotate(-3deg);
  background:
    linear-gradient(180deg, rgba(25, 22, 33, 0.18) 0 9%, rgba(25, 22, 33, 0) 9%),
    linear-gradient(165deg, var(--og-blue) 0%, #2E7FB4 100%);
  border: 3px solid var(--ink);
}
@media (max-width: 820px) {
  .bags__head {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .bags__bag {
    align-self: center;
    width: min(84vw, 440px);
    height: auto;
  }
  .bags__bagwrap.is-empty { align-self: center; width: min(60vw, 280px); }
}

/* Four tiers, four equal cards. Two-up on tablet, stacked on phones. */
.bags__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1280px;
}
.card {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 34rem;   /* floor so the cards stay level; the CTA is pinned to the bottom */
  box-shadow: 0 10px 20px -14px rgba(25, 22, 33, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* No card hover state (no move/scale); hover lives on the buttons only. */
.card--pop { outline: 3px solid var(--ink); outline-offset: -3px; }

.tag {
  position: absolute;
  top: -0.8rem;
  right: 1.25rem;
  background: var(--pop);
  color: var(--milk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 0.45em 0.9em;
  border-radius: 999px;
}
.tag--a { transform: rotate(-5deg); left: 1.25rem; right: auto; }
.tag--b { transform: rotate(4deg); }
.tag--c { transform: rotate(-4deg); left: 1.25rem; right: auto; }
.tag--d { transform: rotate(5deg); }

/* Product shot at the top of each pricing card. Every image sits in an
   IDENTICAL fixed-height box and is centred inside it, so whatever the art's
   natural size, the empty space falls around it and every element BELOW the
   image lands on the same baseline across all four cards.

   The box itself is the tinted palette panel the bag render sits on. */
.card__imgbox {
  position: relative;
  height: clamp(150px, 13vw, 195px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  border-radius: 16px;
  overflow: hidden;
  padding: 0.5rem;
  background: rgba(25, 22, 33, 0.06);
}
.card__imgbox--og { background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, var(--og-tint) 100%); }
/* Mixed bundles: all four tints, one band each, left to right, so the
   assortment reads even before the bags decode. */
.card__imgbox--mixed {
  background: linear-gradient(90deg,
    var(--og-tint) 0 25%,
    var(--cocoa-tint) 25% 50%,
    var(--fruity-tint) 50% 75%,
    var(--cinn-tint) 75% 100%);
}
.card__img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(25, 22, 33, 0.22));   /* grounds the bag on its panel */
}

/* Composed pack shot: N bag renders overlapped into a fan, standing in for
   multi-bag photography that does not exist yet. Each <img> is decorative
   (alt=""); the wrapping .stack carries role="img" + aria-label, so a screen
   reader hears one description instead of three identical ones.
   The bags sit on a square canvas with transparent margins, so the offsets
   below are a share of the IMAGE width, not the visible bag width. */
.stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.stack img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform-origin: 50% 60%;   /* pivot near the bag's base so the fan splays */
  filter: drop-shadow(0 6px 10px rgba(25, 22, 33, 0.22));
}
.stack--3 img:nth-child(1) { transform: translate(-78%, -50%) rotate(-9deg); z-index: 1; }
.stack--3 img:nth-child(2) { transform: translate(-22%, -50%) rotate(9deg);  z-index: 2; }
.stack--3 img:nth-child(3) { transform: translate(-50%, -50%) rotate(0deg);  z-index: 3; }

.stack--4 img:nth-child(1) { transform: translate(-82%, -50%) rotate(-12deg); z-index: 1; }
.stack--4 img:nth-child(2) { transform: translate(-18%, -50%) rotate(12deg);  z-index: 1; }
.stack--4 img:nth-child(3) { transform: translate(-64%, -50%) rotate(-4deg);  z-index: 2; }
.stack--4 img:nth-child(4) { transform: translate(-36%, -50%) rotate(4deg);   z-index: 3; }

/* Single-column cards are much wider than tall, so give the panel more height
   and let the fan open up instead of stacking the bags on top of each other. */
@media (max-width: 820px) {
  .card__imgbox { height: 210px; }

  .stack--3 img:nth-child(1) { transform: translate(-92%, -50%) rotate(-9deg); }
  .stack--3 img:nth-child(2) { transform: translate(-8%, -50%) rotate(9deg); }
  .stack--4 img:nth-child(1) { transform: translate(-104%, -50%) rotate(-12deg); }
  .stack--4 img:nth-child(2) { transform: translate(4%, -50%) rotate(12deg); }
  .stack--4 img:nth-child(3) { transform: translate(-72%, -50%) rotate(-4deg); }
  .stack--4 img:nth-child(4) { transform: translate(-28%, -50%) rotate(4deg); }
}

.card__name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}
.card__price {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1;
}
.card__per {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink);
  margin-top: -0.2rem;
}
/* Contents line under the name, small, muted, consistent on all four cards */
.card__pieces {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 800;
  color: rgba(25, 22, 33, 0.5);
  margin-top: -0.2rem;
}
/* Shipping line: free on the two bundles, calculated at checkout below that */
.card__ship {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--ink);
  margin-top: -0.1rem;
}
.card__line {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0.4rem 0;
}
/* Small muted footnote under a card's description (the flavor default on the
   two pickable tiers). It takes over the flex-grow so it sits directly under
   the line and the CTA stays aligned with the other cards. */
.card__fine {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(25, 22, 33, 0.5);
  margin: 0.1rem 0 0;
  flex-grow: 1;
}
.card:has(.card__fine) .card__line { flex-grow: 0; }
.card__cta { align-self: flex-start; margin-top: auto; }   /* pinned to the card bottom so the CTAs line up */

/* NUTRITION STRIP, a cream bar under the grid. The one deliberate moment of
   1994 cereal-box enthusiasm on the whole site. */
.panel {
  position: relative;
  max-width: 1280px;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tag--panel {
  left: clamp(1.5rem, 3vw, 2.25rem);
  right: auto;
  transform: rotate(-4deg);
}
.panel__text {
  flex: 1 1 auto;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  font-size: clamp(0.72rem, 1.35vw, 0.95rem);
  color: var(--ink);
  text-align: center;
}
.panel__cta {
  flex: 0 0 auto;
  padding: 0.6em 1.3em;
  font-size: 0.72rem;
}
/* ink-on-cream pill (inverse of the dark card CTAs) */
.pill--cream { background: var(--milk); color: var(--ink); border: 2px solid var(--ink); }
.pill--cream:hover { background: #fff; transform: translateY(-2px); }

/* Loose wrapped chew closing out the section. */
.bags__piece {
  display: block;
  width: 120px;
  height: auto;
  margin: 48px auto 0;
}

/* THE PALLET, buried fine print at the very bottom. No card, just text. */
.pallet {
  max-width: 1280px;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--milk);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0.55;
}
.pallet a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Launch-pricing notice above the grid, no strikethrough, just a heads-up. */
.launch-note {
  max-width: 1280px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: var(--milk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.66rem, 1.3vw, 0.8rem);
  font-weight: 800;
  opacity: 0.9;
}
.launch-note b { color: var(--pop); font-weight: 800; }

/* Featured card emphasis WITHOUT scaling it (a bigger card can't keep its rows
   on the same baseline as the others): a raised shadow, plus the .card--pop
   outline and the tag. Same size as the others, so everything aligns. */
.card--feature {
  z-index: 2;
  box-shadow: 0 30px 50px -22px rgba(25, 22, 33, 0.6);
}

/* Subscribe toggle, radios sitting under the price. Powered by the selling
   plan in catalog.js; the whole block disables itself if that plan is gone. */
.sub {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Extend the box outward into the card padding so the two-decimal subscribe
     line fits on one line. */
  margin: 0.4rem -0.6rem 0.2rem;
  padding: 0.7rem 0.6rem;
  border-radius: 14px;
  background: rgba(25, 22, 33, 0.05);
}
.sub__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.76rem;
  line-height: 1.35;
}
.sub__opt input {
  margin: 0.15rem 0 0;
  accent-color: var(--pop);
  flex: 0 0 auto;
}
.sub__text b { font-weight: 800; }
.sub__save {
  display: inline-block;
  background: var(--pop);
  color: var(--milk);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.58rem;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  white-space: nowrap;
}
.sub__opt:has(input:checked) .sub__text { font-weight: 700; }
.sub__fine {
  font-size: 0.64rem;
  color: rgba(25, 22, 33, 0.55);
  margin: 0.2rem 0 0;
  letter-spacing: 0;
  text-transform: none;
}
/* Subscribe option dimmed when a product has no plan available. */
.sub--noplan .sub__opt:last-of-type { opacity: 0.4; }

/* GIFTING, split band: two equal halves in one cream container. Left = the
   physical standing order (needs an address), right = digital gift card
   (needs only an email). The split makes the choice obvious at a glance. */
.gift {
  max-width: 1280px;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;      /* two EQUAL halves */
}
.gift__half {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.gift__half + .gift__half { border-left: 2px solid rgba(25, 22, 33, 0.12); }

/* Media panel: the same tinted palette treatment as the pricing cards, so the
   gift band reads as part of the commerce layer rather than a separate look. */
.gift__media {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, var(--og-tint) 100%);
  border-radius: 16px;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.9rem;
  margin-bottom: 0.5rem;
}
/* Gift card art does not exist yet, so this half stays a plain tinted panel
   until images/packs/gift-card-*.png land. */
.gift__media--card {
  background: radial-gradient(120% 100% at 50% 0%, #FDF4FB 0%, var(--fruity-tint) 100%);
}
.gift__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

.gift__head {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  line-height: 1;
}
.gift__sub {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--pop);
  margin-bottom: 0.15rem;
}
/* States what actually arrives. */
.gift__note { font-size: 0.82rem; font-weight: 800; color: var(--ink); margin-bottom: 0.45rem; }

/* Selectable option rows, shared by both halves: pick one, then the single
   wide CTA below adds it. Selecting a gift-card row also swaps the card art. */
.gift-pick { display: flex; flex-direction: column; gap: 0.5rem; }
.gift-pick__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.9rem;
  border-radius: 12px;
  background: rgba(25, 22, 33, 0.05);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gift-pick__row input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.gift-pick__row:has(input:checked) { border-color: var(--ink); background: rgba(25, 22, 33, 0.09); }
.gift-pick__row:has(input:focus-visible) { outline: 2px solid var(--pop); outline-offset: 2px; }
.gift-pick__label {
  flex: 1 1 auto;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  font-size: 0.85rem;
}
.gift-pick__label[data-gc] { font-size: 1.05rem; }   /* the denomination is the value, keep it prominent */
.gift__price { font-weight: 800; font-size: 1.05rem; }

/* Single full-width CTA under the rows (both halves), no dead space beside it. */
.gift__cta--wide {
  align-self: stretch;
  text-align: center;
  margin-top: 0.15rem;
  padding: 0.62em 1.2em;
  font-size: 0.72rem;
}

/* The organising distinction of the section (address vs email): prominent,
   not grey fine print. */
.gift__foot {
  margin-top: auto;                       /* pin to the bottom so both halves align */
  padding-top: 0.75rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
}

/* Two-up cards from here down; everything else in the section tracks the
   same column width so the block stays coherent. */
@media (max-width: 1180px) {
  .bags__grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
  .bags__head, .launch-note, .panel, .gift, .pallet { max-width: 820px; }
}

@media (max-width: 820px) {
  .launch-note { max-width: 460px; text-align: center; }
  .gift { grid-template-columns: 1fr; max-width: 460px; }
  /* Stacked: the divider moves to the top edge of the second half. */
  .gift__half + .gift__half { border-left: 0; border-top: 2px solid rgba(25, 22, 33, 0.12); }

  .bags__grid { grid-template-columns: 1fr; max-width: 460px; }
  .panel, .pallet { max-width: 460px; }
  .panel {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding-top: clamp(1.4rem, 5vw, 1.75rem);
  }
  .panel__text { text-align: center; }
}

/* ============================================================
   PRE-ORDER
   ============================================================ */
.preorder {
  background: var(--milk);
  padding: clamp(4rem, 11vw, 8.5rem) var(--pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preorder__head {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 5.5vw, 4rem);
  max-width: 20ch;
  margin-bottom: 1.75rem;
}

.preorder__form {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  max-width: 520px;
  flex-wrap: wrap;
  justify-content: center;
}
.preorder__input {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  /* match the pill: same font-size + 0.85em vertical inset, minus the 1.5px
     border so total height equals the (border-less) button. */
  padding: calc(0.85em - 1.5px) 1.4em;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.72rem, 1.3vw, 0.85rem);
  color: var(--ink);
}
.preorder__input::placeholder { color: rgba(25, 22, 33, 0.5); }
.preorder__input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
.preorder__submit { flex: 0 0 auto; }

.preorder__done {
  max-width: 520px;
  text-align: center;
  align-items: center;
}
.preorder__done-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  letter-spacing: -0.01em;
}
.preorder__done-body {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 0.4rem;
}

/* Footnote at the foot of the pre-order section. */
.preorder__note {
  margin-top: clamp(2.75rem, 7vw, 4.5rem);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  font-weight: 400;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(4rem, 10vw, 8rem) var(--pad);
}
.faq .section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq__list { max-width: 820px; }
.faq__item {
  border-top: 2px solid var(--ink);
  padding: 1.4rem 0;
}
/* Drop the first rule so the "Q" descender in the heading has nothing to hit. */
.faq__item:first-child { border-top: none; }
.faq__item:last-child { border-bottom: 2px solid var(--ink); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-weight: 800;
  font-size: 1.6em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  text-transform: none;             /* answers in sentence case; the questions stay caps */
  letter-spacing: 0;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 1rem;
}
/* Animated collapsible answer (JS sets explicit px heights during the tween;
   closed state falls back to height:0 via this rule). */
.faq__body {
  overflow: hidden;
  transition: height 320ms var(--nav-ease);
}
.faq__item:not([open]) .faq__body { height: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--milk);
  padding: clamp(3rem, 8vw, 6rem) 0 0;
  overflow: hidden;
}

/* Marquee */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid var(--milk);
  border-bottom: 2px solid var(--milk);
  padding: 0.55rem 0;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.marquee__track {
  display: inline-flex;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.6vw, 1rem);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Content-sized columns (flex, not equal 1fr tracks): each column is exactly
   as wide as its content, and justify-between distributes the leftover between
   them so neither outer column is squeezed narrower than its text. */
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;          /* all three columns share a top edge */
  gap: 1rem;
  padding: 0 var(--pad);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.footer__col { flex: 0 0 auto; }    /* size to content; never shrink to force a wrap */
.footer__col--left   { text-align: left; }
.footer__col--center { text-align: center; }
.footer__col--right {
  display: flex;
  align-items: center;              /* three icons then the email, on one level line */
  gap: 0.65rem;
}
.footer__social { color: inherit; display: inline-flex; align-items: center; }
.footer__social:hover { opacity: 0.65; }
.footer__icon { display: block; width: 1.05em; height: 1.05em; }   /* ~cap height of the footer text */
.footer__email { color: inherit; text-decoration: none; margin-left: 0.4rem; }
.footer__email:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.footer__col--center a {
  color: inherit;
  text-decoration: none;
}
.footer__col--center a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Desktop only: keep the legal line on one line. */
@media (min-width: 1220px) {
  .footer__col--left { white-space: nowrap; }
}

/* The seven-link nav plus both outer columns stop fitting side by side just
   over 1200px. Stack below that. */
@media (max-width: 1219px) {
  .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
  }
  .footer__col--left, .footer__col--right { text-align: center; }
  .footer__col--right { align-items: center; }
}

/* Full CHEEREAL as inline SVG. Legibility first: the WHOLE word stays
   identifiable at every width, and only the bottom ~15% crops off the page.
   textLength keeps the box exact regardless of font metrics. */
.footer__word {
  --fw: min(112vw, 1900px);
  width: var(--fw);
  margin-left: calc((100% - var(--fw)) / 2);   /* centre; bleeds evenly if >100% */
  margin-bottom: calc(var(--fw) * -0.024);     /* crop ~15% off the bottom of the word */
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.footer__word svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.footer__word text {
  font-family: var(--display);
  font-weight: 400;
  fill: var(--milk);
  stroke: var(--milk);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* ============================================================
   FLAVOR PAGES (og-flakes.html and the other three)
   ============================================================ */
.pdp {
  position: relative;
  min-height: 100svh;
  background: var(--milk);
  color: var(--ink);
  padding: clamp(4.5rem, 12vh, 7rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.pdp__media {
  border-radius: 24px;
  border: 2px solid var(--ink);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem);
}
.pdp__media img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(25, 22, 33, 0.22));
}
.pdp--og .pdp__media {
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, var(--og-tint) 100%);
}
.pdp--cocoa .pdp__media {
  background: radial-gradient(120% 100% at 50% 0%, #FBF3E8 0%, var(--cocoa-tint) 100%);
}
.pdp--fruity .pdp__media {
  background: radial-gradient(120% 100% at 50% 0%, #FDF4FB 0%, var(--fruity-tint) 100%);
}
.pdp--cinn .pdp__media {
  background: radial-gradient(120% 100% at 50% 0%, #FDF5E9 0%, var(--cinn-tint) 100%);
}
.pdp__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--pop);
  margin-bottom: 0.75rem;
}
.pdp__name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 0.95;
  margin-bottom: 1rem;
}
.pdp__line {
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}
.pdp__body {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 1.5rem;
}
.pdp__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: 1.75rem;
}
.pdp__facts dt {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  padding: 0.6rem 0;
  align-self: baseline;
  border-top: 1px solid rgba(25, 22, 33, 0.14);
}
.pdp__facts dd {
  margin: 0;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(25, 22, 33, 0.14);
}
.pdp__facts dt:first-of-type,
.pdp__facts dd:first-of-type { border-top: 0; }
.pdp__note {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: rgba(25, 22, 33, 0.55);
}

/* The other three flavors, so a flavor page is never a dead end. */
.pdp__others {
  max-width: 1100px;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
}
.pdp__others-head {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.pdp__others-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pdp__other {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.pdp__other:hover { background: var(--ink); color: var(--milk); }
.pdp__other img {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.pdp .mini-foot { margin-top: clamp(3rem, 7vw, 5rem); }

@media (max-width: 820px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__others-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MERCH TEASE (merch.html)
   ============================================================ */
.merch {
  position: relative;
  min-height: 100svh;
  background: var(--milk);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4rem;
  padding: clamp(2rem, 6vw, 5rem) var(--pad);
  overflow: hidden;
}
.merch__back {
  position: absolute;
  top: clamp(1.25rem, 3vw, 2rem);
  left: var(--pad);
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 400;
}
.merch__head {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-size: clamp(3.5rem, 18vw, 13rem);
}
.merch__sub {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  margin-top: -0.6rem;
}
.merch__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  margin-top: 0.6rem;
}
.merch__done {
  max-width: 460px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 800;
}

/* ============================================================
   REVEAL (IntersectionObserver adds .is-visible)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PALLET PAGE (pallet.html)
   ============================================================ */
.pallet-page {
  position: relative;               /* anchors the top-left back link */
  background: var(--milk);
  color: var(--ink);
  overflow-x: hidden;
}
.pallet-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  /* Generous top padding keeps the heading + image clear of the floating
     nav pill on load. */
  padding: clamp(7.5rem, 18vh, 11rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
/* Giant display heading, same SVG treatment as the wordmarks. */
.pallet-hero__head {
  width: min(92vw, 1000px);
  margin: 0;
  line-height: 0;
}
.pallet-hero__head svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pallet-hero__head text {
  font-family: var(--display);
  font-weight: 400;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
}
/* Transparent PNG, no shadow/filter/compositing hacks, so it renders exactly
   as the source file. */
.pallet-img {
  height: 52vh;
  max-height: 560px;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
}
/* Placeholder while images/packs/pallet.png is missing: a flat stacked block
   in the mixed-bundle palette. The real image, once dropped in, sits on top
   of it at the same size, so the page composes identically either way. */
.pallet-slot {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background:
    repeating-linear-gradient(to bottom,
      rgba(25, 22, 33, 0.16) 0 3px,
      rgba(25, 22, 33, 0) 3px 56px),
    linear-gradient(90deg,
      var(--og-blue) 0 25%,
      var(--cocoa-brown) 25% 50%,
      var(--fruity-purple) 50% 75%,
      var(--cinn-orange) 75% 100%);
}
.pallet-slot .pallet-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
}
.pallet-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.pallet-lines__big {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 2.7vw, 1.9rem);
}
.pallet-lines__fine {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  opacity: 0.55;
  margin-top: 0.7rem;
}
.pallet-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 18px 40px -22px rgba(25, 22, 33, 0.6);
}
.pallet-card__text {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
}
.pallet-foot {
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad);
  text-align: center;
}

/* ============================================================
   LEGAL / CONTENT PAGES (privacy, terms, press, story), readability first
   ============================================================ */
.legal {
  position: relative;
  min-height: 100svh;
  background: var(--milk);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(4.5rem, 12vh, 7rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.legal__back {
  position: absolute;
  top: clamp(1.25rem, 3vw, 2rem);
  left: var(--pad);
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}
/* Back link: ← arrow + the wordmark set as type, inline + vertically aligned. */
.legal__back,
.merch__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.back-arrow {
  font-size: 1.7rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.back-mark {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.legal__back:hover .back-arrow,
.merch__back:hover .back-arrow { transform: translateX(-3px); }
/* Display-treatment title: same SVG treatment as the wordmarks. */
.legal__title {
  width: min(86vw, 520px);
  margin: 0;
  line-height: 0;
}
.legal__title svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.legal__title text {
  font-family: var(--display);
  font-weight: 400;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
}
/* Single readable column: sentence-case body text on a cream card. */
.legal__card {
  --card-pad: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--cream);
  color: var(--ink);
  border-radius: 24px;
  overflow: hidden;                 /* clips the full-bleed chapter images to the card corners */
  padding: var(--card-pad);
  width: 100%;
  max-width: 65ch;
  text-align: left;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
}
.legal__note {
  font-style: italic;
  opacity: 0.6;
  margin: 0 0 1.75rem;
}
.legal__card h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  margin: 2rem 0 0.55rem;
}
.legal__card p { margin: 0 0 1rem; }
.legal__card p:last-child { margin-bottom: 0; }
.legal__card a { color: var(--pop); text-underline-offset: 0.2em; }

/* Shared small footer for the secondary pages. */
.mini-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
}
.mini-foot__links a { color: var(--ink); text-decoration: none; }
.mini-foot__links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.mini-foot__copy { opacity: 0.55; letter-spacing: 0.1em; }
/* Merch pins its mini-foot to the bottom, mirroring the top-left back link. */
.merch .mini-foot {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: var(--pad);
  right: var(--pad);
}
/* Single centered, letterspaced line variant. */
.mini-foot--line {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  opacity: 0.7;
}
.mini-foot--line .mini-foot__copy { opacity: 1; letter-spacing: inherit; }
.mini-foot--line a { color: var(--ink); text-decoration: none; }
.mini-foot--line a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* ============================================================
   STORY PAGE (story.html), reuses the .legal layout + card
   ============================================================ */
.story__bag {
  width: min(280px, 64vw);
  height: auto;
}
/* Subtle display-treatment CTA, same face as the wordmarks, ink on the field
   so it reads as a quiet call to action rather than a loud pill. */
.story__cta {
  display: block;
  width: min(92vw, 720px);
  line-height: 0;
}
.story__cta svg { display: block; width: 100%; height: auto; overflow: visible; }
.story__cta text {
  font-family: var(--display);
  font-weight: 400;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.story__cta:hover text { fill: var(--pop); stroke: var(--pop); }

/* Full-bleed chapter illustrations inside the cream card: they cancel the
   card padding to run edge to edge. Each is a 16:9 slot with a flat color
   block behind it, so the page composes before the illustrations exist. */
.story__chapter {
  position: relative;
  display: block;
  width: calc(100% + 2 * var(--card-pad));
  aspect-ratio: 16 / 9;
  margin: 64px calc(-1 * var(--card-pad)) 32px;
  overflow: hidden;
}
.story__chapter img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story__chapter--a { background: linear-gradient(160deg, var(--og-blue) 0%, #2E7FB4 100%); }
.story__chapter--b { background: linear-gradient(160deg, var(--cocoa-tan) 0%, var(--cocoa-brown) 100%); }
.story__chapter--c { background: linear-gradient(160deg, var(--fruity-yellow) 0%, var(--cinn-orange) 100%); }
/* First illustration sits flush at the top of the card. */
.legal__card > .story__chapter:first-child {
  margin-top: calc(-1 * var(--card-pad));
}
/* Centered pill CTA at the end of the story. Overrides the
   .legal__card a { color: pop } link rule so the pill keeps its light text. */
.story__get {
  display: block;
  width: fit-content;
  margin: 64px auto 0;
}
.legal__card .story__get { color: var(--milk); }

/* Small centered wordmark at the very bottom of the subpages. Not a link. */
.page-mark {
  display: flex;
  justify-content: center;
  margin: 80px 0 64px;
}
.page-mark svg {
  display: block;
  width: 180px;
  height: auto;
  overflow: visible;
}
.page-mark text {
  font-family: var(--display);
  font-weight: 400;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* ============================================================
   CART DRAWER, index only
   ============================================================ */
.cart-scrim {
  position: fixed;
  inset: 0;
  background: rgba(25, 22, 33, 0.55);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.cart-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
body.cart-open { overflow: hidden; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--cream);
  color: var(--ink);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* relaxed glide, no bounce */
  box-shadow: -10px 0 46px rgba(25, 22, 33, 0.22);
  font-family: var(--text);
}
.cart.is-open { transform: translateX(0); }

.cart__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  border-bottom: 2px solid var(--ink);
}
.cart__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
}
.cart__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem;
}

.cart__items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 clamp(1.25rem, 3.5vw, 1.75rem);
}
.cart__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(25, 22, 33, 0.15);
}
.cart__item-info { flex: 1 1 auto; min-width: 0; }
.cart__item-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  line-height: 1.2;
}
/* Subscription tag on a cart line, plan name straight from the data module. */
.cart__item-sub {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: var(--pop);
  color: var(--milk);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.58rem;
  font-weight: 800;
}
.cart__item-price {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}
.cart__remove {
  margin-top: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.58rem;
  color: rgba(25, 22, 33, 0.55);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cart__remove:hover { color: var(--ink); }
.cart__qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.cart__qty-btn {
  width: 27px;
  height: 27px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart__qty-btn:hover { background: var(--ink); color: var(--milk); }
.cart__qty-n {
  min-width: 1.3ch;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
}

.cart__empty {
  padding: 2.5rem clamp(1.25rem, 3.5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  opacity: 0.55;
}

.cart__foot {
  flex: 0 0 auto;
  border-top: 2px solid var(--ink);
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
}
.cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}
.cart__subtotal span:last-child { font-size: 1.4rem; }
.cart__checkout {
  display: block;
  width: 100%;
  text-align: center;
}
.cart__checkout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart__checkout:disabled:hover { transform: none; background: var(--ink); }
.cart__note {
  text-align: center;
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6rem;
  opacity: 0.5;
}
/* Raised state used when checkout is not connected yet (see script.js). */
.cart__note.is-loud { opacity: 1; color: var(--pop); }

/* Nav cart count badge */
.nav__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.32rem;
  margin-left: 0.5rem;
  background: var(--pop);
  color: var(--milk);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}
.nav__cart-count[hidden] { display: none; }

/* ============================================================
   ADD-TO-CART BUTTON ANIMATION
   Progressive enhancement: animations.js injects the stage and GSAP
   animates it. Buttons remain functional with no JS/GSAP. Stage pieces
   are pointer-events:none so clicks always reach the <button>.
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.atc { position: relative; overflow: visible; }
.atc:hover { background: #241f2e; }          /* slightly lifted from the base ink */
.atc__text { position: relative; z-index: 2; display: inline-block; will-change: transform, opacity; }
.atc__stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.atc__edge {
  position: absolute;
  left: 0; top: -3px;
  width: 100%; height: 16px;
  overflow: visible;
}
.atc__item {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  transform-origin: 50% 100%;   /* squash-and-stretch from the base */
}
.atc__cart-group {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
}
.atc__cart,
.atc__tickwrap {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}