/* ============================================================
   SUPA — supaferments.com
   Art direction: Indian truck art and film poster maximalism.
   Type: Anton (display) · Sancreek (plate) · Roboto Condensed (body)
   ============================================================ */

@font-face {
  font-family: 'Sancreek';
  src: url('../assets/fonts/Sancreek-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand palette. Magenta is the logo colour, sampled from LOGO color.png.
     Magenta carries text well as a background but fails as text on dark,
     so it fills buttons and bands while marigold does the fine work. */
  --magenta: #D60C8C;
  --magenta-deep: #8E0A5E;
  --marigold: #FFCF33;
  --maroon: #8E1F22;
  /* A deep red that still reads on near black. --maroon is the right hue but
     only reaches 2.3:1 against --ink, which is unreadable even at display
     sizes; this sits at about 4.2:1. Used for display type, with --maroon
     kept underneath it as the shadow plate. */
  --chilli: #D43F2A;
  --leaf: #1B5E32;
  --poster-blue: #163A6B;
  --cream: #FFF3B3;

  --ink: #0C0A0B;
  --ink-soft: rgba(255, 243, 179, 0.82);
  --ink-faint: rgba(255, 243, 179, 0.58);
  --line: rgba(255, 207, 51, 0.22);

  /* Spacing scale */
  --s-25: 2px;  --s-50: 4px;  --s-75: 8px;  --s-100: 12px;
  --s-200: 16px; --s-300: 24px; --s-400: 32px; --s-500: 40px;
  --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --plate: 'Sancreek', 'Anton', serif;
  --body: 'Roboto Condensed', system-ui, sans-serif;

  --wrap: 1200px;
  --edge: clamp(16px, 5vw, 48px);
  --nav-h: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 24px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

a { color: inherit; }

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

.skip {
  position: absolute;
  left: var(--s-200);
  top: -100px;
  z-index: 999;
  background: var(--marigold);
  color: var(--ink);
  padding: var(--s-100) var(--s-200);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip:focus { top: var(--s-200); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.icon { width: 20px; height: 20px; flex: none; }
.icon--xl { width: 32px; height: 32px; }

/* ---------- Type ---------- */

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 48px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 var(--s-200);
  max-width: 680px;
}

.eyebrow {
  font-family: var(--plate);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marigold);
  margin: 0 0 var(--s-100);
}

.lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 62ch;
  margin: 0 0 var(--s-200);
}

.section-head { margin-bottom: var(--s-600); }
.section-head--center { text-align: center; }
.section-head--center .h2,
.section-head--center .lede { margin-inline: auto; }

/* Split-word headings: the readable copy lives in .sr, the animated words are decorative. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
/* Each word rides inside its own mask, so a reveal never clips the line below. */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word { display: inline-block; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    transform 140ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.btn--lg { padding: var(--s-100) var(--s-300); min-height: 52px; }

.btn--primary { background: var(--magenta); color: #fff; border-color: var(--marigold); }
.btn--light { background: var(--marigold); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--marigold); color: var(--ink); }
  .btn--light:hover { background: var(--cream); }
  .btn:hover { box-shadow: 0 6px 0 rgba(12, 10, 11, 0.5); transform: translateY(-2px); }
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: var(--s-300) var(--edge) 0;
  pointer-events: none;
}

.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-200);
  width: max-content;
  max-width: 100%;
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 10, 11, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.nav.is-stuck .nav__pill { background: rgba(12, 10, 11, 0.92); border-color: rgba(255, 207, 51, 0.4); }

.nav__brand { display: flex; align-items: center; flex: none; }
.nav__brand img { width: 88px; height: auto; border-radius: 6px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-300);
  margin: 0;
  padding: 0 var(--s-100);
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  padding: var(--s-50) 0;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 200ms var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--marigold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--cream); }
  .nav__links a:hover::after { transform: scaleX(1); }
}
.nav__links a[aria-current="true"] { color: var(--marigold); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

/* Compact Buy now inside the pill; it scrolls to the sauces. */
.nav__cta {
  flex: none;
  min-height: 40px;
  padding: var(--s-50) var(--s-200);
  font-size: 14px;
  line-height: 20px;
}

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  flex: none;
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 12px;
  width: 20px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 420ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__pill { width: 100%; justify-content: space-between; }
  .nav__cta { margin-left: auto; }
}

/* ---------- Mobile menu overlay ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-400);
  padding: var(--s-900) var(--edge) var(--s-600);
  background: rgba(12, 10, 11, 0.86);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease-out);
}
/* Closed state uses opacity and inert rather than visibility, so the first
   link is focusable the moment the menu opens. */
.menu.is-open { opacity: 1; pointer-events: auto; }

.menu__list { margin: 0; padding: 0; list-style: none; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block;
  padding: var(--s-100) 0;
  font-family: var(--display);
  font-size: clamp(36px, 11vw, 60px);
  line-height: 1.08;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  transform: translateY(48px);
  opacity: 0;
  transition: transform 560ms var(--ease-out), opacity 460ms var(--ease-out), color 200ms var(--ease-out);
}
.menu.is-open .menu__list a { transform: translateY(0); opacity: 1; }
.menu.is-open li:nth-child(1) a { transition-delay: 80ms; }
.menu.is-open li:nth-child(2) a { transition-delay: 130ms; }
.menu.is-open li:nth-child(3) a { transition-delay: 180ms; }
.menu.is-open li:nth-child(4) a { transition-delay: 230ms; }
.menu.is-open li:nth-child(5) a { transition-delay: 280ms; }
@media (hover: hover) and (pointer: fine) { .menu__list a:hover { color: var(--marigold); } }

.menu__foot {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--s-600)) var(--edge) var(--s-700);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* The source clip carries a generator watermark in its bottom right corner,
   measured at 0.936 to 0.966 of frame height, so its top sits 6.4% up from
   the bottom. Pushing the content DOWN is what hides it; moving it up would
   reveal the bottom edge. Scale 1.12 gives 6% of overflow each way, and
   sinking 4% hides 10% at the bottom while still cropping 2% off the top.
   The poster gets the same transform so the two stay registered. */
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12) translateY(4%);
}
.hero__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero__video.is-ready { opacity: 1; }

/* Scrim over media, for text contrast. Not a decorative background. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 10, 11, 0.96) 6%, rgba(12, 10, 11, 0.7) 38%, rgba(12, 10, 11, 0.28) 66%, rgba(12, 10, 11, 0.62) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

/* One h1 holds both lines so search engines read "Fermented Indian hot sauce"
   as part of the main heading; each line keeps its own look. */
.hero__h1 { margin: 0; font: inherit; }
.hero__h1 > span { display: block; }

.hero__kicker {
  margin: 0 0 var(--s-200);
  font-family: var(--plate);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marigold);
}

/* Lettered to match the painted lockup in the closing section
   (assets/img/tagline-mirchi-ka-level-up.webp): Sancreek, the western wood
   type already used for the small plate text, with flat colour plates offset
   against each other rather than a gradient. Three plates, as a screen printer
   would pull them:

   1. a maroon edge just off the letterform;
   2. a hard black shadow further down and to the LEFT, which is the direction
      the lockup throws it;
   3. a dark bloom, only because this sits on a photograph and the lockup does
      not.

   The lockup fills its letters brick red on a marigold ground. That inverts
   here: on the dark hero photo a red fill would disappear, so marigold carries
   the fill and red drops to the edge plate. Same print, reversed ground.

   The plates are a filter on the headline rather than shadows on each word,
   because .mask clips anything a word paints outside its own box while a
   filter on the parent runs on the already assembled result. Offsets are in em
   so the effect scales with the clamped size instead of burying the phone
   headline under a desktop sized shadow. */
.hero__title {
  margin: 0 0 var(--s-300);
  max-width: 1060px;
  font-family: var(--plate);
  font-weight: 400;
  font-size: clamp(60px, 14vw, 158px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--marigold);
  -webkit-text-stroke: 0.012em var(--ink);
  paint-order: stroke fill;
  filter:
    drop-shadow(-0.028em 0.036em 0 var(--maroon))
    drop-shadow(-0.066em 0.082em 0 var(--ink))
    drop-shadow(0 0 0.16em rgba(12, 10, 11, 0.85));
}

.hero__sub {
  margin: 0 0 var(--s-400);
  max-width: 680px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Solid marigold on the photograph so it reads as a notice rather than more
   hero copy. Sits above the proof row, which puts it on the first screen for
   anyone arriving from a QR code at the stall. */
.hero__event {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-75) var(--s-100);
  width: max-content;
  max-width: 100%;
  margin: 0 0 var(--s-300);
  padding: var(--s-75) var(--s-200);
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-family: var(--plate);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__event-tag {
  padding: 0 var(--s-75);
  border-radius: 999px;
  background: var(--ink);
  color: var(--marigold);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100) var(--s-300);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__proof li { display: flex; align-items: center; gap: var(--s-75); }
.hero__proof .icon { color: var(--marigold); }

/* Treated as a physical sticker slapped on the hero: a dark disc behind it so
   it reads against the video, a cast shadow, and a slow sway with the pin at
   the top left corner. It is decorative, seen once, so a little life is fine. */
.hero__badge {
  position: absolute;
  top: calc(var(--nav-h) + var(--s-400));
  right: var(--edge);
  width: clamp(168px, 20vw, 300px);
  height: auto;
  padding: var(--s-100) var(--s-200);
  border-radius: 999px;
  background: rgba(12, 10, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(12, 10, 11, 0.55);
  transform-origin: 18% 10%;
  animation: sway 7s var(--ease-in-out) infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(5deg); }
  50%      { transform: rotate(-2.5deg); }
}
@media (max-width: 860px) {
  .hero__badge {
    top: calc(var(--nav-h) + var(--s-300));
    width: 150px;
    padding: var(--s-75) var(--s-100);
  }
}
@media (max-width: 560px) { .hero__badge { display: none; } }

/* ---------- Ticker ---------- */

.ticker {
  overflow: hidden;
  padding: var(--s-100) 0;
  background: var(--magenta);
  border-block: 2px solid var(--marigold);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--s-300);
  width: max-content;
  animation: marquee 32s linear infinite;
  font-family: var(--plate);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.ticker .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--marigold); flex: none; }
.ticker__track span:not(.dot) { color: #fff; }
/* The brand line stands out in the band. 24px keeps marigold on magenta
   readable, since it counts as large text for contrast. */
.ticker__track span.ticker__em { color: var(--marigold); font-size: 24px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Tagline reveal ---------- */

/* A six word proverb, so this is set as a statement rather than a paragraph:
   the old scale was sized for three sentences and left the line stranded in
   the middle of the section. Words start nearly invisible and strike marigold
   as they light, each one lifting slightly, so the line builds as you scroll
   instead of simply appearing. */
.tagline { padding: var(--s-900) 0; }
.tagline__text {
  margin: 0 auto;
  max-width: 1000px;
  font-family: var(--display);
  font-size: clamp(40px, 8.4vw, 104px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(255, 243, 179, 0.16);
}
.tagline .word {
  color: rgba(255, 243, 179, 0.16);
  transform: translateY(0.06em);
  transition: color 420ms var(--ease-out), transform 420ms var(--ease-out),
              text-shadow 420ms var(--ease-out);
}
.tagline .word.is-lit {
  color: var(--marigold);
  transform: translateY(0);
  text-shadow: 0 0 0.5em rgba(255, 207, 51, 0.28);
}

/* The payoff — "hota hai" — lands in deep red against the marigold of the
   setup, so the line reads as two halves rather than one colour. Targeted by
   position because the words are split from plain text by script, so there is
   no markup to hook: they are the 5th and 6th of "Sabr ka phal teekha hota
   hai." Recount if that line changes.

   Fill is --chilli rather than --maroon for legibility, with --maroon as the
   plate beneath it, which is what keeps the whole thing reading deep red. */
.tagline .mask:nth-of-type(5) .word.is-lit,
.tagline .mask:nth-of-type(6) .word.is-lit {
  color: var(--chilli);
  -webkit-text-stroke: 0.012em var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
  filter:
    drop-shadow(-0.018em 0.024em 0 var(--maroon))
    drop-shadow(-0.04em 0.052em 0 var(--ink));
}

@media (prefers-reduced-motion: reduce) {
  .tagline .word { transform: none; transition: color 160ms linear; }
}

/* ---------- Sauces ---------- */

.sauces { padding: var(--s-800) 0 var(--s-900); }

.panels { display: grid; gap: var(--s-800); }

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-500);
  align-items: center;
  /* --char-drop sinks a cut out further behind the frame's bottom edge.
     Ghas Phoos keeps 0: her artwork already ends below the crop. */
  --sunburst: url('../assets/img/sunburst-curry-daddy.webp');
  --frame: url('../assets/img/border-curry-daddy.webp');
  --char-drop: 1cm;
}
.panel--ghas {
  --sunburst: url('../assets/img/sunburst-ghas-phoos.webp');
  --frame: url('../assets/img/border-ghas-phoos.webp');
  --char-drop: 0cm;
}
.panel--naarang {
  --sunburst: url('../assets/img/sunburst-naarang.webp');
  --frame: url('../assets/img/border-naarang.webp');
  --char-drop: 1cm;
}
.panel--rev .panel__stage { order: 2; }

/* The label's own ornate border becomes the frame of the panel itself,
   drawn with border-image so the corner ornaments stay intact at any size.
   Slice values are source pixels on the 760x411 artwork. */
.panel__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background-image: var(--sunburst);
  background-size: cover;
  background-position: center;
  background-clip: padding-box;
  border-style: solid;
  border-width: clamp(15px, 3.4vw, 26px) clamp(18px, 4.2vw, 32px);
  border-color: var(--marigold);
  border-image-source: var(--frame);
  border-image-slice: 35 43;
  border-image-repeat: round;
  overflow: hidden;
}

/* The cut outs end in a flat edge where the artwork was cropped. Hanging them
   below the frame's inner edge puts that edge outside the clip, and the
   overhang is deep enough that the parallax never lifts it back into view. */
.panel__char {
  position: absolute;
  left: 50%;
  bottom: calc(-9% - var(--char-drop, 0cm));
  width: auto;
  height: 104%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 12px 24px rgba(12, 10, 11, 0.45));
  z-index: 2;
  will-change: transform;
}


/* The photograph, filling the same framed stage as the character so one can
   dissolve into the other as you scroll: the illustration resolves into the
   real thing. It covers the sunburst rather than floating on it, because
   these are full 4:5 scenes with their own ground, not cut outs — the ornate
   border survives either way, being drawn as border-image.

   Hidden unless the script sets the swap up, so with no JS the panel stays
   exactly as it was: a character in a frame. */
.panel__scene { display: none; }
.panel--swap .panel__scene {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* The character is the control. A transparent button is laid over the framed
   stage rather than wrapped around the cut out, so the parallax that animates
   .panel__char is left completely alone. It carries a visible pill, because an
   invisible hit area reads as decoration and nobody clicks it. */
.panel__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-200);
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.js .panel__reveal { display: flex; }
/* Clamped rather than fixed: the pill sits inside the framed stage, which is
   a lot narrower on a phone, so a size that reads well on desktop would run
   into the ornate border at 375px. */
.panel__reveal-label {
  padding: var(--s-100) var(--s-400);
  border: 2px solid var(--marigold);
  border-radius: 999px;
  background: rgba(12, 10, 11, 0.92);
  font-family: var(--plate);
  font-size: clamp(16px, 2.1vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marigold);
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .panel__reveal:hover .panel__reveal-label { transform: translateY(-3px); background: var(--ink); }
}
.panel__reveal:active .panel__reveal-label { transform: translateY(0) scale(0.97); }
.panel__reveal:focus-visible { outline: 3px solid var(--marigold); outline-offset: -8px; border-radius: 16px; }

/* Collapsible detail block. Animating grid-template-rows 1fr -> 0fr gives a
   real height transition without hard coding a max-height that would be wrong
   the moment the copy changes. It collapses only when JS is present, so with
   scripts off every card stays open and nothing is unreachable. */
.panel__more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 520ms var(--ease-out), opacity 300ms var(--ease-out);
}
.panel__more-in { overflow: hidden; min-height: 0; }
.js .panel__more { grid-template-rows: 0fr; opacity: 0; }
.js .panel--open .panel__more { grid-template-rows: 1fr; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .panel__reveal-label { transition: none; }
  .panel__more { transition: none; }
  .versus--stepped .versus__row { transition: none; }
  .versus__pip { transition: none; }
}

/* "Full details" sits beside Buy as a plain link, not a second button: one
   primary action per card, with the quieter route to the sauce's own page
   next to it. */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200); }
.buy__more {
  font-family: var(--plate);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marigold);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .buy__more:hover { color: var(--cream); }
}

.panel__card {
  padding: var(--s-400);
  border: 2px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 243, 179, 0.04);
}

.panel__desc {
  margin: 0 0 var(--s-75);
  font-family: var(--plate);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marigold);
}
.panel__name {
  margin: 0 0 var(--s-100);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  text-transform: uppercase;
}
.panel__blurb {
  margin: 0 0 var(--s-300);
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.heat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-75) var(--s-100);
  margin-bottom: var(--s-300);
}
.heat__label,
.heat__num {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.heat__num { grid-column: 1 / -1; }
.heat__num b { color: var(--marigold); font-variant-numeric: tabular-nums; }
/* Near black track: magenta is a dark hue, so it separates best against this. */
.heat__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(12, 10, 11, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 179, 0.18);
  overflow: hidden;
}
/* Every Scoville bar runs brand magenta, so heat reads as one scale
   across flavours instead of changing meaning with the artwork. */
.heat__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: 999px;
  background: var(--magenta);
  transform: scaleX(var(--w));
  transform-origin: left;
}
/* 3000ms on an even ease-in-out (easeInOutCubic), matched by countTo() in
   main.js so the bar and number move together and land together. */
.heat.is-live .heat__bar i { transition: transform 3000ms cubic-bezier(0.65, 0, 0.35, 1); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-75); margin: 0 0 var(--s-300); padding: 0; list-style: none; }
.chips li {
  padding: var(--s-50) var(--s-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Allergen note sits with the product, not buried in the FAQ. */
.allergen {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  margin: 0 0 var(--s-300);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.allergen .icon { color: var(--marigold); }

.ing { margin: 0 0 var(--s-300); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ing summary {
  padding: var(--s-100) 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marigold);
}
.ing p { margin: 0 0 var(--s-100); font-size: 14px; line-height: 20px; color: var(--ink-soft); }

.buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-100); }

/* ---------- Bundle ---------- */

/* Two bundle cards sit side by side on wide screens and stack on phones. The
   top margin that used to belong to the single card now belongs to the group.
   Each card is a column with its button pushed to the bottom, so the two CTAs
   line up however much copy sits above them. */
.bundles { display: grid; gap: var(--s-300); margin-top: var(--s-800); }
@media (min-width: 900px) { .bundles { grid-template-columns: 1fr 1fr; } }

.bundle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-300);
  padding: var(--s-400);
  border: 2px solid var(--marigold);
  border-radius: 24px;
  background: var(--magenta);
}
.bundle .btn { margin-top: auto; }
/* White, not marigold: marigold on magenta fails contrast at this size. */
.bundle .bundle__eyebrow {
  margin: 0 0 var(--s-75);
  font-family: var(--plate);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.bundles__note {
  display: flex;
  align-items: center;
  gap: var(--s-100);
  margin: var(--s-300) 0 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bundles__note .icon { flex: none; color: var(--marigold); }
.bundle__title {
  margin: 0 0 var(--s-75);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
}
.bundle p { margin: 0; color: #fff; }
/* The "5 or more" link sits inside white copy on magenta. It stays white and
   carries a heavy underline rather than switching colour: marigold on
   magenta would fail contrast. */
.bundle__link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bundle__link:hover { text-decoration-color: var(--marigold); }
}
.bundle__link:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 2px; }
/* The card is already magenta, so its action flips to marigold to separate. */
.bundle .btn--primary { background: var(--marigold); color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .bundle .btn--primary:hover { background: var(--cream); color: var(--ink); }
}

/* ---------- Why / versus ---------- */

.why { padding: var(--s-900) 0; background: var(--poster-blue); }

/* Two columns compared row by row: Heat against Heat, Label against Label.
   The left column is deliberately flatter so the eye lands on the right. */
/* Both cards share one row grid (subgrid), so they are the same height and
   each row lines up with its partner: Heat beside Heat, Flavour beside
   Flavour. Six rows per card: the tag, then the five comparison rows. */
/* Why SUPA carries the whole argument for the product, so its header is set
   larger than the other sections rather than at the shared scale. */
.why .eyebrow {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.2em;
  margin-bottom: var(--s-100);
}
.why .h2 { font-size: clamp(38px, 6.6vw, 68px); }
.why .lede { font-size: 20px; line-height: 30px; }

/* Stepped scroll. The section holds still while the five comparisons arrive
   one pair at a time, left and right together, then lets go. Everything below
   is scoped to .versus--stepped, a class the script only adds once it has
   actually built the scroller, so if GSAP is missing, the viewport is narrow
   or the visitor asked for reduced motion, the rows are simply all visible. */
.versus__progress:empty { display: none; }
.versus__progress {
  display: flex;
  justify-content: center;
  gap: var(--s-75);
  margin: 0 0 var(--s-400);
}
.versus__pip {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 243, 179, 0.22);
  transition: background-color 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.versus__pip.is-on { background: var(--marigold); transform: scaleY(1.6); }

.versus--stepped .versus__row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.versus--stepped .versus__row.is-on { opacity: 1; transform: none; }

.versus { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-300); row-gap: var(--s-300); }

.versus__col {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  padding: var(--s-400);
  border: 2px solid rgba(255, 243, 179, 0.2);
  border-radius: 20px;
  background: rgba(12, 10, 11, 0.24);
}
.versus__col--supa {
  border-color: var(--marigold);
  background: rgba(255, 207, 51, 0.1);
}

.versus__tag {
  margin: 0;
  padding-bottom: var(--s-100);
  border-bottom: 1px solid rgba(255, 243, 179, 0.2);
  font-family: var(--display);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.versus__col--supa .versus__tag { color: var(--marigold); border-bottom-color: var(--marigold); }

.versus__list { margin: 0; display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.versus__row { display: grid; gap: var(--s-50); align-content: start; }
.versus__row dt {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.versus__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.versus__row dd strong { color: var(--cream); }
.versus__col--other .icon { color: rgba(255, 243, 179, 0.55); }
.versus__col--supa .versus__row dt { color: var(--marigold); }
.versus__col--supa .icon { color: var(--marigold); }

/* ---------- Benefits ---------- */

.benefits { padding: var(--s-900) 0; }

/* A staggered editorial list, not six equal cards. Rows alternate between
   the left and right of a 12 column grid, so the eye travels down the
   section in a zig-zag instead of scanning a flat block of boxes.

   No card chrome and no hover: these items are not clickable, and a border
   that lifts on hover promises an action that is not there. */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: var(--s-600);
  margin: var(--s-200) 0 0;
  padding: 0;
  list-style: none;
}
.benefit {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-300);
  align-items: start;
}
.benefit:nth-child(even) { grid-column: 6 / span 7; }
.benefit .icon--xl {
  grid-row: span 2;
  color: var(--marigold);
  /* The icon box is taller than its glyph. Without this it sits visibly low
     against the cap height of the heading beside it. */
  margin-top: 2px;
}
.benefit h3 {
  margin: 0 0 var(--s-75);
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  text-wrap: balance;
}
.benefit p { margin: 0; max-width: 52ch; color: var(--ink-soft); text-wrap: pretty; }

@media (max-width: 860px) {
  .benefit-grid { row-gap: var(--s-500); }
  .benefit,
  .benefit:nth-child(even) { grid-column: 1 / -1; }
}

/* ---------- Process ---------- */

.process { padding: var(--s-900) 0; background: var(--leaf); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-700); align-items: center; }

.steps { margin: var(--s-400) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-300); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-200); align-items: start; }
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 2px solid var(--marigold);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 20px;
  line-height: 28px;
  color: var(--marigold);
}
.step h3 {
  margin: 0 0 var(--s-50);
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
}
.step p { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

.process__media { margin: 0; }
.arch {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 4px solid var(--marigold);
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  background: var(--ink);
}
.arch img,
.arch video { display: block; width: 100%; height: 100%; object-fit: cover; }
.process__media figcaption {
  margin-top: var(--s-100);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Story ---------- */

.story { padding: var(--s-900) 0; }
.story__grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--s-700); align-items: center; }
.story__art img {
  width: 100%;
  border: 4px solid var(--marigold);
  border-radius: 20px;
}
.story__copy p { color: var(--ink-soft); text-wrap: pretty; max-width: 62ch; }
.story__marks {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  margin-top: var(--s-400);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
}
.story__marks img { width: 96px; height: auto; }
.story__marks p {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- FAQ ---------- */

.faq { padding: var(--s-900) 0; background: var(--maroon); }
.faq__grid { display: grid; gap: var(--s-600); }
.faq .section-head { margin-bottom: 0; max-width: 680px; }

/* Questions down the left, the open answer beside its question on the right.

   Built on <details name="faq">, which buys three things for free: it works
   with no script at all, every answer stays in the HTML where search engines
   can read it, and the browser itself keeps only one question open. Below
   961px it falls back to a plain stacked disclosure. */
.faq__list { position: relative; margin: 0; padding-bottom: var(--s-200); }

.q {
  position: relative;
  border-top: 2px solid rgba(255, 243, 179, 0.16);
}
.q:last-child { border-bottom: 2px solid rgba(255, 243, 179, 0.16); }

.q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-200) 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-soft);
  list-style: none;
  transition: color 300ms var(--ease-out);
}
.q summary::-webkit-details-marker { display: none; }
.q[open] summary { color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .q summary:hover { color: var(--cream); } }
.q summary:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 4px;
  border-radius: 4px;
}
.q summary::after {
  content: '';
  width: 10px; height: 10px;
  flex: none;
  border-right: 2px solid var(--marigold);
  border-bottom: 2px solid var(--marigold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 500ms var(--ease-out);
}
.q[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.q p { margin: 0; padding: 0 0 var(--s-300); max-width: 62ch; color: var(--ink-soft); text-wrap: pretty; }

@media (min-width: 961px) {
  .q { width: 42%; }

  /* The open answer leaves its row and sits in the right hand column, level
     with its own question. Width is expressed against the question's 42%,
     so the answer's right edge lands exactly on the list's right edge:
       left  = 100% of the question + the gap
       width = (58 / 42) of the question - the gap  ~=  138% - gap */
  .q[open] > p {
    position: absolute;
    top: var(--s-200);
    left: calc(100% + var(--s-600));
    width: calc(138% - var(--s-600));
    max-width: none;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--cream);
    animation: faq-in 600ms var(--ease-out) both;
  }

  /* The marker turns to point at the answer rather than down. */
  .q[open] summary::after { transform: rotate(-45deg); }
}

@keyframes faq-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q[open] > p { animation: none; }
}

/* ---------- Final CTA ---------- */

/* The tagline artwork is dark ink, so this section runs marigold. */
.final { padding: var(--s-900) 0; background: var(--marigold); color: var(--ink); text-align: center; }
.final__inner { display: flex; flex-direction: column; align-items: center; }
.final__logo { width: clamp(200px, 30vw, 320px); height: auto; margin-bottom: var(--s-300); }
.final .lede { color: rgba(12, 10, 11, 0.78); }
.final .btn--light { background: var(--magenta); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .final .btn--light:hover { background: var(--magenta-deep); color: #fff; }
}
.final :focus-visible { outline-color: var(--ink); }

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

.footer { padding: var(--s-700) 0 var(--s-400); border-top: 2px solid var(--line); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-400);
}
.footer__brand img { width: 120px; height: auto; border-radius: 6px; margin-bottom: var(--s-200); }
.footer__brand p { margin: 0 0 var(--s-100); color: var(--ink-soft); }
.footer__legal { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.footer__h {
  margin: 0 0 var(--s-100);
  font-family: var(--plate);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marigold);
}
.footer nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-75); }
.footer nav a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .footer nav a:hover { color: var(--marigold); } }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-100);
  margin-top: var(--s-600);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-faint);
}
.footer__base p { margin: 0; }

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 700ms var(--ease-out) var(--d, 0ms),
    transform 800ms var(--ease-out) var(--d, 0ms),
    filter 700ms var(--ease-out) var(--d, 0ms);
}

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

@media (max-width: 960px) {
  .panel,
  .process__grid,
  .story__grid,
  .faq__grid,
  .versus { grid-template-columns: 1fr; }
  .panel--rev .panel__stage { order: 0; }
  .panel { gap: var(--s-400); }
  .panels { gap: var(--s-700); }
  .faq .section-head { position: static; margin-bottom: var(--s-400); }
  .story__art { max-width: 420px; }
  .process__media { max-width: 420px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --s-900: 64px; --s-800: 56px; }
  .panel__card { padding: var(--s-300); }
  .footer__grid { grid-template-columns: 1fr; }
  .bundle { flex-direction: column; align-items: flex-start; }
  .bundle .btn { width: 100%; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .tagline .word { color: var(--cream); }
  .menu__list a { transform: none; }
  .hero__badge { animation: none; transform: rotate(4deg); }
  .panel__char { transform: translateX(-50%); }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 160ms !important;
  }
  .hero__video { display: none; }
}