:root {
  --bj-sangria: #C41E3A;
  --bj-sangria-deep: #8B1325;
  --bj-boot-red: #E52421;
  --bj-orange: #F47A1F;
  --bj-yellow: #FFC72C;
  --bj-grape: #6B2D8F;
  --bj-grape-light: #A855C9;
  --bj-kiwi: #2BB673;
  --bj-magenta: #E6197F;
  --bj-cobalt: #1F4FC4;
  --bj-cream: #FFF4E0;
  --bj-paper: #FBE9CF;
  --bj-ink: #141414;
  --border-w: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bj-cream);
  color: var(--bj-ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overflow-x: hidden;
}

a { color: inherit; }

.halftone {
  background-image: radial-gradient(var(--bj-ink) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.halftone-light {
  background-image: radial-gradient(rgba(20,20,20,0.18) 1.2px, transparent 1.3px);
  background-size: 10px 10px;
}

.page { max-width: 1320px; margin: 0 auto; padding: 28px 28px 60px; }

/* ===== TOP BAR ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border: var(--border-w) solid var(--bj-ink);
  padding: 10px 18px;
  background: var(--bj-ink); color: var(--bj-cream);
  font-family: 'Bungee', sans-serif; letter-spacing: 0.08em;
  font-size: 13px;
  box-shadow: 6px 6px 0 var(--bj-boot-red);
  position: relative;
  z-index: 5;
}
.topbar .blink { color: var(--bj-yellow); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.topbar .dots { display: flex; gap: 6px; }
.topbar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.topbar .dots i:nth-child(1) { background: var(--bj-boot-red); }
.topbar .dots i:nth-child(2) { background: var(--bj-yellow); }
.topbar .dots i:nth-child(3) { background: var(--bj-kiwi); }
.topbar .dots i:nth-child(4) { background: var(--bj-magenta); }

.topbar-left { display: flex; gap: 14px; align-items: center; }

/* ===== MARQUEE: LOGO + LIVE HERO (single integrated scene) =====
   The logo sits in normal flow on the left; the animation stage is
   absolutely positioned to fill the entire marquee, so the bottle
   flies across the full width and the mascot stands on the same
   ground line as the logo's boot. They share one scene. */
.marquee {
  margin-top: 28px;
  position: relative;
  border: var(--border-w) solid var(--bj-ink);
  box-shadow: 8px 8px 0 var(--bj-ink);
  background: var(--bj-paper);
  background-image: radial-gradient(rgba(20,20,20,0.18) 1.2px, transparent 1.3px);
  background-size: 10px 10px;
  overflow: hidden;
  isolation: isolate;
  min-height: 520px;
}
.marquee::before {
  /* sunburst behind logo, bleeds rightward across the scene */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 18% 22%,
    rgba(255,199,44,0.32) 0deg 8deg,
    transparent 8deg 18deg);
  mask-image: radial-gradient(ellipse 95% 80% at 18% 22%,
    black 22%, rgba(0,0,0,0.32) 68%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 18% 22%,
    black 22%, rgba(0,0,0,0.32) 68%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Logo block: pinned to the upper-LEFT corner of the marquee. The
   mascot stands BELOW it on the left, so the kick swings rightward
   into open space (where the bottle is rolling). */
.marquee-logo {
  position: relative;
  z-index: 3;
  display: inline-flex; flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 18px 36px;
  width: max-content;
  max-width: 60%;
}
.marquee-logo .logo {
  padding: 8px 14px 30px;
  margin: 0;
}
.marquee-logo .logo-caption {
  position: relative; z-index: 1;
  font-family: 'Shrikhand', serif;
  font-size: clamp(11px, 1.1vw, 16px);
  color: var(--bj-ink);
  text-align: center;
  width: 100%;
  margin-top: 14px;
  transform: rotate(-2deg);
  letter-spacing: 0.01em;
  line-height: 1.1;
  opacity: 1;
}

/* Scaled-down logo for marquee */
.marquee-logo .letter {
  font-size: clamp(56px, 7.2vw, 110px);
  -webkit-text-stroke: 4px var(--bj-ink);
  text-shadow: 5px 5px 0 var(--bj-ink);
}
.marquee-logo .letter.B {
  font-size: clamp(64px, 8.4vw, 130px);
  padding-left: clamp(20px, 2.6vw, 30px);
}
.marquee-logo .logo .boot-overlay {
  width: clamp(44px, 5.4vw, 78px);
  bottom: -10px;
}
.marquee-logo .juice-tag {
  font-size: clamp(20px, 2.6vw, 32px);
  text-shadow: 2px 2px 0 var(--bj-ink);
}

/* Animation stage: absolute, fills the entire marquee */
.marquee-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.marquee-stage > .hero-stage {
  position: absolute; inset: 0;
  background: transparent;
}

/* Animation positions — MIRRORED orientation. Mascot lives on the
   right side, faces left, and kicks the bottle LEFTWARD. Bottle
   starts at right:0 and flies left across the scene with a new
   keyframe set that negates the original X translates. */
.marquee-stage .mascot {
  width: clamp(160px, 16vw, 230px);
  height: auto; aspect-ratio: 280/320;
  left: auto; right: 6%; bottom: 22%;
  transform: scaleX(-1);   /* face left */
}
.marquee-stage .stage-bottle {
  width: clamp(50px, 5.6vw, 72px);
  left: auto; right: 0; bottom: 22%;
  animation-name: bottleLaunchLeft;
}

@keyframes bottleLaunchLeft {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
  8%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  22%  { transform: translate(-120px, 0) rotate(6deg); }
  28%  { transform: translate(-260px, -120px) rotate(-110deg); }
  45%  { transform: translate(-560px, -200px) rotate(-360deg); }
  62%  { transform: translate(-780px, -80px) rotate(-540deg); }
  78%  { transform: translate(-900px, 0) rotate(-720deg); }
  85%  { transform: translate(-960px, 0) rotate(-720deg); opacity: 1; }
  100% { transform: translate(-1100px, 0) rotate(-720deg); opacity: 0; }
}

.marquee-stage .sun {
  width: clamp(64px, 7.2vw, 100px);
  height: auto; aspect-ratio: 1;
  top: 12%; left: auto; right: 24%;
}
.marquee-stage .pow {
  font-size: clamp(36px, 4.4vw, 60px);
  bottom: 48%; left: auto; right: 28%;
}
.marquee-stage .splash {
  width: clamp(90px, 10vw, 130px); height: auto; aspect-ratio: 1;
  bottom: 28%; left: auto; right: 26%;
}
.marquee-stage .cloud { top: 16%; left: 30%; }
.marquee-stage .cloud.c2 { top: 28%; left: 60%; }

/* hero-corner / hero-badge — corner stays upper-right; badge moves
   away from the mascot's new spot to the upper-right area */
.marquee .hero-corner { z-index: 5; top: 16px; right: 16px; }
.marquee .hero-badge {
  z-index: 5;
  width: 80px; height: 80px;
  top: 14px; left: auto; right: 130px;
}

/* Stack on small screens — animation collapses below logo */
@media (max-width: 900px) {
  .marquee { min-height: 0; margin-top: 20px; }
  .marquee-logo { max-width: 100%; padding: 22px 18px 18px; }
  .marquee-stage {
    position: relative; inset: auto;
    min-height: 260px;
    border-top: var(--border-w) dashed var(--bj-ink);
  }
  .marquee-stage .mascot { width: 140px; left: auto; right: 6%; bottom: 22%; }
  .marquee-stage .sun { width: 56px; top: 14%; left: 8%; right: auto; }
  .marquee-stage .pow { left: auto; right: 36%; bottom: 50%; }
  .marquee-stage .splash { left: auto; right: 32%; bottom: 30%; }
  .marquee .hero-badge { width: 64px; height: 64px; right: 12px; top: 12px; }
  .marquee .hero-corner { top: auto; bottom: 12px; right: 12px; }
}

.logo {
  position: relative;
  display: inline-block;
  z-index: 2;
  padding: 14px 22px 30px;
}
.logo-row {
  display: flex; align-items: flex-end; gap: 0; line-height: 0;
}
.letter {
  font-family: 'Ultra', serif;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.85;
  color: #fff;
  -webkit-text-stroke: 4px var(--bj-ink);
  position: relative;
  letter-spacing: -0.02em;
  text-shadow: 6px 6px 0 var(--bj-ink);
  paint-order: stroke fill;
}
.letter.B {
  font-size: clamp(96px, 14vw, 190px);
  margin-right: -6px;
  padding-left: clamp(26px, 4vw, 40px);
}
.logo .boot-overlay {
  position: absolute; left: -4px; bottom: -12px;
  width: clamp(64px, 8vw, 100px); height: auto; z-index: 2;
  aspect-ratio: 100/170;
}
.ocontent {
  position: absolute; inset: 20% 18%;
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
}
.ocontent svg { width: 100%; height: 100%; }
.juice-tag {
  position: absolute; bottom: 2px; left: 48%;
  font-family: 'Shrikhand', serif;
  color: var(--bj-boot-red);
  font-size: clamp(26px, 3.6vw, 44px);
  transform: rotate(-5deg);
  text-shadow: 3px 3px 0 var(--bj-ink);
  -webkit-text-stroke: 1px var(--bj-ink);
  paint-order: stroke fill;
  white-space: nowrap;
}
.tm {
  position: absolute; right: -4px; top: 6%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; color: var(--bj-ink);
}
.logo-caption {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  text-align: center; margin-top: 22px;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.02em;
  position: relative; z-index: 2;
  opacity: 0.85;
}

.brand-stack {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

/* ===== HERO ===== */
.hero {
  margin-top: 48px;
  position: relative;
  border: var(--border-w) solid var(--bj-ink);
  background: var(--bj-paper);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--bj-ink);
}
.hero-inner { position: relative; aspect-ratio: 21/9; min-height: 360px; }
.hero-stage { position: absolute; inset: 0; }

.hero-corner {
  position: absolute; top: 14px; right: 14px;
  background: var(--bj-ink); color: var(--bj-cream);
  font-family: 'Bungee', sans-serif; font-size: 10px;
  padding: 6px 10px; letter-spacing: 0.1em;
  border: 2px solid var(--bj-ink); z-index: 5;
}
.hero-corner b { color: var(--bj-yellow); }

.hero-badge {
  position: absolute; left: 16px; top: 16px; z-index: 5;
  width: 92px; height: 92px;
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-slogan {
  position: absolute; bottom: 18px; left: 24px; right: 24px;
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  z-index: 5;
  pointer-events: none;
}
.hero-slogan .kick {
  font-family: 'Shrikhand', serif;
  font-size: clamp(22px, 3.4vw, 42px);
  line-height: 0.95;
  color: var(--bj-ink);
  text-shadow: 3px 3px 0 var(--bj-yellow);
}
.hero-slogan .kick em {
  color: var(--bj-boot-red);
  font-style: normal;
  text-shadow: 3px 3px 0 var(--bj-ink);
}
.hero-slogan .yr {
  font-family: 'Ultra', serif;
  font-size: clamp(36px, 5.4vw, 78px);
  line-height: 0.85;
  color: var(--bj-boot-red);
  -webkit-text-stroke: 2px var(--bj-ink);
  text-shadow: 5px 5px 0 var(--bj-ink);
  white-space: nowrap;
}

/* checker strip */
.checker {
  height: 22px;
  background: repeating-linear-gradient(
    90deg, var(--bj-ink) 0 22px, var(--bj-yellow) 22px 44px
  );
  border-left: var(--border-w) solid var(--bj-ink);
  border-right: var(--border-w) solid var(--bj-ink);
  border-bottom: var(--border-w) solid var(--bj-ink);
}

/* ===== SECTION HEADERS ===== */
section { margin-top: 110px; scroll-margin-top: 20px; }
.section-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.section-head .num {
  background: var(--bj-ink); color: var(--bj-yellow);
  font-family: 'Bungee', sans-serif;
  padding: 6px 12px; font-size: 14px; letter-spacing: 0.08em;
  border: 2px solid var(--bj-ink);
}
.section-head h2 {
  margin: 0;
  font-family: 'Ultra', serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.95;
  color: var(--bj-ink);
}
.section-head h2 .pink { color: var(--bj-magenta); }
.section-head h2 .red { color: var(--bj-boot-red); }
.section-head h2 .grape { color: var(--bj-grape); }
.section-head h2 .kiwi { color: var(--bj-kiwi); }
.section-head .rule {
  flex: 1; min-width: 60px; height: 4px; background: var(--bj-ink);
}

/* ===== CARDS ===== */
.card {
  border: var(--border-w) solid var(--bj-ink);
  background: #fff;
  box-shadow: 6px 6px 0 var(--bj-ink);
  padding: 32px;
  position: relative;
}
.card.yellow { background: var(--bj-yellow); }
.card.cream { background: var(--bj-paper); }
.card.ink { background: var(--bj-ink); color: var(--bj-cream); }
.card.red { background: var(--bj-boot-red); color: #fff; }
.card .label {
  font-family: 'Bungee', sans-serif; font-size: 11px;
  letter-spacing: 0.1em; color: var(--bj-ink);
  opacity: 0.7; margin-bottom: 8px;
}
.card.ink .label, .card.red .label { color: var(--bj-yellow); opacity: 1; }
.card h3 {
  font-family: 'Ultra', serif; font-size: 28px; margin: 0 0 10px;
  line-height: 1;
}
.card p { margin: 6px 0 0; }

/* ===== STORY ===== */
.story-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
}
.story-lead {
  font-family: 'Ultra', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  margin: 6px 0 16px;
}
.story-lead .red { color: var(--bj-boot-red); }
.story-lead .magenta { color: var(--bj-magenta); }
.story-body { font-size: 17px; max-width: 54ch; }
.story-body p + p { margin-top: 12px; }

.anniversary-panel {
  position: relative;
  padding: 28px;
  background: var(--bj-yellow);
  border: var(--border-w) solid var(--bj-ink);
  box-shadow: 6px 6px 0 var(--bj-ink);
  display: flex; flex-direction: column; justify-content: center;
  gap: 10px;
  overflow: hidden;
  min-height: 280px;
}
.anniversary-panel::before {
  content: "";
  position: absolute; inset: -20px;
  background: repeating-conic-gradient(
    from 0deg at 80% 90%,
    rgba(229,36,33,0.22) 0deg 6deg,
    transparent 6deg 14deg);
  mask-image: radial-gradient(circle at 80% 90%, black 10%, transparent 60%);
  pointer-events: none;
}
.anniversary-panel .yrs {
  font-family: 'Ultra', serif;
  font-size: clamp(64px, 11vw, 150px);
  line-height: 0.85;
  color: var(--bj-boot-red);
  -webkit-text-stroke: 3px var(--bj-ink);
  text-shadow: 6px 6px 0 var(--bj-ink);
  position: relative;
}
.anniversary-panel .line {
  font-family: 'Bungee', sans-serif; letter-spacing: 0.1em;
  font-size: 16px;
  position: relative;
}
.anniversary-panel .big {
  font-family: 'Shrikhand', serif;
  font-size: clamp(28px, 4.6vw, 44px);
  color: var(--bj-ink);
  line-height: 1;
  transform: rotate(-2deg);
  position: relative;
}
.anniversary-panel .range {
  font-family: 'Ultra', serif;
  font-size: 26px;
  color: var(--bj-ink);
  letter-spacing: 0.02em;
  position: relative;
}

/* ===== INGREDIENTS PANEL (single consolidated card) ===== */
.ingredients-panel {
  border: var(--border-w) solid var(--bj-ink);
  background: #fff;
  box-shadow: 8px 8px 0 var(--bj-ink);
  overflow: hidden;
}
.ing-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 36px;
  padding: 40px 44px;
  align-items: center;
  border-bottom: var(--border-w) dashed var(--bj-ink);
}
.ing-row:last-child { border-bottom: 0; }

.ing-label { display: flex; flex-direction: column; align-items: flex-start; }
.ing-step {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bj-ink);
  background: var(--bj-yellow);
  padding: 5px 10px;
  border: 2px solid var(--bj-ink);
  margin-bottom: 14px;
}
.ing-name {
  font-family: 'Ultra', serif;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 0.9;
  color: var(--bj-ink);
  margin-bottom: 10px;
}
.ing-cap {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  max-width: 30ch;
  opacity: 0.85;
}

.ing-content {
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  border: var(--border-w) solid var(--bj-ink);
  min-height: 140px;
  position: relative;
}
.ing-content.cream { background: var(--bj-paper); }
.ing-content.white { background: #fff; }
.ing-content.sangria,
.ing-content.beverage {
  background: linear-gradient(180deg, var(--bj-sangria-deep), var(--bj-sangria) 70%, var(--bj-boot-red));
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 36px;
  overflow: hidden;
  gap: 8px;
}
.ing-content.sangria::before,
.ing-content.beverage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.2px, transparent 1.3px);
  background-size: 12px 12px;
  pointer-events: none;
}

/* fruit row visual inside ingredients panel — strip the chip-style frame */
.ing-content .fruit-row {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.ing-content .fruit-row .fruit-icon {
  width: 56px; height: 56px;
  filter: drop-shadow(2px 2px 0 var(--bj-ink));
}

.ing-content .juice-list {
  margin: 0;
  justify-content: center;
}

.proof-line { position: relative; line-height: 1; }
.proof-num {
  font-family: 'Ultra', serif;
  font-size: clamp(54px, 7vw, 88px);
  line-height: 0.85;
  color: var(--bj-yellow);
  -webkit-text-stroke: 3px var(--bj-ink);
  text-shadow: 5px 5px 0 var(--bj-ink);
  display: inline-block;
}
.proof-tag {
  font-family: 'Shrikhand', serif;
  font-size: clamp(22px, 2.6vw, 34px);
  color: #fff;
  -webkit-text-stroke: 1.5px var(--bj-ink);
  text-shadow: 3px 3px 0 var(--bj-ink);
  transform: rotate(-3deg);
  display: inline-block;
  margin-left: 8px;
}
.soco-brand {
  font-family: 'Ultra', serif;
  font-size: clamp(24px, 3.2vw, 40px);
  color: #fff;
  -webkit-text-stroke: 2px var(--bj-ink);
  text-shadow: 4px 4px 0 var(--bj-ink);
  position: relative;
  line-height: 1;
}

/* fruit row — small inline strip used inside cards */
.fruit-row {
  display: flex; gap: 8px;
  justify-content: center; align-items: center;
  margin-top: 18px; padding: 8px 10px;
  background: rgba(255,255,255,0.55);
  border: 2px solid var(--bj-ink);
  flex-wrap: nowrap;
}
.fruit-row .fruit-icon {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: block;
}

/* floating fruit accents (positioned inside parent) */
.fruit-accent {
  position: absolute;
  width: 56px; height: 56px;
  z-index: 1;
  filter: drop-shadow(2px 2px 0 var(--bj-ink));
}
.fruit-accent.fa-tl { top: 14px; left: 14px; transform: rotate(-12deg); }
.fruit-accent.fa-tr { top: 14px; right: 14px; transform: rotate(10deg); }
.fruit-accent.fa-bl { bottom: 14px; left: 14px; transform: rotate(8deg); }
.fruit-accent.fa-br { bottom: 14px; right: 14px; transform: rotate(-8deg); }

/* fruit garnish strip — sits between sections */
.fruit-garnish {
  display: flex; justify-content: space-around; align-items: center;
  gap: 18px; margin-top: 80px; padding: 22px 24px;
  border-top: 3px dashed var(--bj-ink);
  border-bottom: 3px dashed var(--bj-ink);
  flex-wrap: wrap;
}
.fruit-garnish .fruit-icon {
  width: 44px; height: 44px;
  transform: rotate(var(--r, 0deg));
  flex: 0 0 auto;
}

/* juice list styled as tags */
.juice-list {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
}
.juice-list.jugs { gap: 18px; align-items: flex-end; }
.juice-jug {
  width: clamp(64px, 7.5vw, 92px);
  height: auto; aspect-ratio: 1;
  flex: 0 0 auto;
  display: block;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(3px 3px 0 var(--bj-ink));
}
.chip {
  border: 3px solid var(--bj-ink);
  background: #fff;
  padding: 10px 16px;
  font-family: 'Bungee', sans-serif;
  font-size: 13px; letter-spacing: 0.08em;
  transform: rotate(var(--r, -2deg));
  box-shadow: 4px 4px 0 var(--bj-ink);
  display: inline-block;
}
.chip.kiwi { background: var(--bj-kiwi); color: #fff; }
.chip.grape { background: var(--bj-grape); color: #fff; }
.chip.magenta { background: var(--bj-magenta); color: #fff; }
.chip.cobalt { background: var(--bj-cobalt); color: #fff; }
.chip.orange { background: var(--bj-orange); color: var(--bj-ink); }
.chip.yellow { background: var(--bj-yellow); color: var(--bj-ink); }

/* ===== MEMORIAL DAY TEASE ===== */
.memorial {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: stretch;
}
.memorial .card {
  padding: 28px;
}
.memorial .big-date {
  font-family: 'Ultra', serif;
  font-size: clamp(42px, 5.2vw, 64px);
  color: var(--bj-boot-red);
  -webkit-text-stroke: 2px var(--bj-ink);
  line-height: 0.9;
  text-shadow: 4px 4px 0 var(--bj-ink);
  margin: 4px 0 8px;
}
.memorial .weekend {
  font-family: 'Shrikhand', serif;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--bj-ink);
  transform: rotate(-2deg);
  display: inline-block;
  margin: 6px 0 14px;
}
.memorial ul {
  font-family: 'Space Grotesk', sans-serif;
  padding-left: 20px; line-height: 1.6; margin: 10px 0 0;
}
.memorial ul b { color: var(--bj-magenta); }
.countdown {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.countdown .cell {
  flex: 1; min-width: 80px;
  border: 3px solid var(--bj-ink);
  background: #fff;
  padding: 14px 8px 10px;
  text-align: center;
}
.countdown .n {
  font-family: 'Ultra', serif;
  font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1;
  color: var(--bj-ink);
}
.countdown .u {
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.08em;
  font-size: 10px;
  margin-top: 6px;
  opacity: 0.7;
}

/* ===== TICKER ===== */
.ticker {
  border: var(--border-w) solid var(--bj-ink);
  background: var(--bj-boot-red);
  color: #fff;
  overflow: hidden; white-space: nowrap;
  font-family: 'Bungee'; font-size: 22px; letter-spacing: 0.08em;
  padding: 14px 0;
  position: relative;
}
.ticker-bottom {
  width: 100%;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: tick 28s linear infinite;
}
.ticker-track span { margin-right: 40px; }
.ticker-track .star { color: var(--bj-yellow); }
@keyframes tick { to { transform: translateX(-100%); } }

/* ===== STARBURST ===== */
.starburst {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 150px; height: 150px;
  background: var(--bj-yellow);
  text-align: center;
  font-family: 'Bungee', sans-serif;
  font-size: 13px; letter-spacing: 0.05em;
  padding: 18px; line-height: 1.15;
  clip-path: polygon(
    50% 0%, 58% 10%, 68% 4%, 72% 16%, 84% 14%, 84% 26%, 96% 30%, 90% 42%,
    100% 50%, 90% 58%, 96% 70%, 84% 74%, 84% 86%, 72% 84%, 68% 96%, 58% 90%,
    50% 100%, 42% 90%, 32% 96%, 28% 84%, 16% 86%, 16% 74%, 4% 70%, 10% 58%,
    0% 50%, 10% 42%, 4% 30%, 16% 26%, 16% 14%, 28% 16%, 32% 4%, 42% 10%
  );
  color: var(--bj-ink);
}
.starburst.red { background: var(--bj-boot-red); color: #fff; }
.starburst.magenta { background: var(--bj-magenta); color: #fff; }

/* ===== CONTACT / RESPECT ===== */
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
}
.contact-form label {
  display: block;
  font-family: 'Bungee', sans-serif; font-size: 11px; letter-spacing: 0.08em;
  margin-bottom: 6px;
  margin-top: 14px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 3px solid var(--bj-ink);
  background: #fff;
  padding: 12px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  box-shadow: 4px 4px 0 var(--bj-ink);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--bj-boot-red);
}
.btn {
  font-family: 'Bungee', sans-serif; letter-spacing: 0.08em;
  font-size: 15px;
  padding: 14px 22px;
  border: var(--border-w) solid var(--bj-ink);
  background: var(--bj-yellow);
  color: var(--bj-ink);
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--bj-ink);
  transition: transform 80ms, box-shadow 80ms;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-top: 18px;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--bj-ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--bj-ink); }
.btn.red { background: var(--bj-boot-red); color: #fff; }
.btn.grape { background: var(--bj-grape); color: #fff; }

.form-note {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px;
  margin-top: 12px; opacity: 0.7;
}

/* ===== DISCLAIMER ===== */
.disclaimer {
  border: var(--border-w) dashed var(--bj-ink);
  padding: 28px;
  margin-top: 60px;
  background: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.disclaimer b {
  font-family: 'Bungee', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  display: block; margin-bottom: 8px;
}

/* ===== FOOTER ===== */
.bj-footer {
  margin-top: 40px; border-top: var(--border-w) dashed var(--bj-ink);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: 'Bungee'; font-size: 12px; letter-spacing: 0.08em;
  flex-wrap: wrap;
}
.bj-footer .stars { color: var(--bj-boot-red); }

/* ===== HERO ANIMATION (mascot) ===== */
.ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28%;
  background:
    linear-gradient(to bottom, transparent 0, transparent 10%, rgba(0,0,0,0.05) 12%, transparent 13%),
    linear-gradient(to bottom, var(--bj-orange), var(--bj-sangria));
  border-top: 4px solid var(--bj-ink);
}
.ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--bj-ink) 0 18px, transparent 18px 30px);
}

.speed-lines {
  position: absolute; left: 0; right: 0; top: 18%; bottom: 32%;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 40px,
    rgba(20,20,20,0.08) 40px 42px,
    transparent 42px 80px
  );
  mask-image: linear-gradient(to right, black, transparent 70%);
  animation: speedSlide 0.6s linear infinite;
}
@keyframes speedSlide { to { background-position-x: -80px; } }

.sun {
  position: absolute; top: 14%; right: 18%;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bj-yellow);
  border: 3px solid var(--bj-ink);
  box-shadow: 0 0 0 0 var(--bj-yellow);
  animation: sunPulse 2.6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,199,44,0.55); }
  50% { box-shadow: 0 0 0 32px rgba(255,199,44,0); }
}
.sun-rays {
  position: absolute; inset: -40px;
  pointer-events: none;
  animation: spin 18s linear infinite;
}

.stage-bottle {
  position: absolute; bottom: 27%; left: 0;
  width: 64px;
  transform-origin: 50% 100%;
  animation: bottleLaunch 3.8s cubic-bezier(.4,.1,.3,1) infinite;
}
@keyframes bottleLaunch {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
  8%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  22%  { transform: translate(120px,0) rotate(-6deg); }
  28%  { transform: translate(260px,-120px) rotate(110deg); }
  45%  { transform: translate(560px,-200px) rotate(360deg); }
  62%  { transform: translate(780px,-80px) rotate(540deg); }
  78%  { transform: translate(900px, 0) rotate(720deg); }
  85%  { transform: translate(960px, 0) rotate(720deg); opacity: 1; }
  100% { transform: translate(1100px, 0) rotate(720deg); opacity: 0; }
}

.mascot {
  position: absolute; bottom: 26%; left: 12%;
  width: 190px; height: 218px;
  transform-origin: 50% 100%;
  animation: mascotBounce 3.8s cubic-bezier(.4,.1,.3,1) infinite;
}
@keyframes mascotBounce {
  0%, 20%   { transform: translateY(0) rotate(0); }
  25%       { transform: translateY(-6px) rotate(-3deg); }
  30%       { transform: translateY(0) rotate(2deg); }
  32%       { transform: translateY(2px) rotate(1deg); }
  45%, 100% { transform: translateY(0) rotate(0); }
}

.splash {
  position: absolute; bottom: 32%; left: 30%;
  width: 100px; height: 100px;
  opacity: 0;
  animation: splashFlash 3.8s infinite;
}
@keyframes splashFlash {
  0%, 26% { opacity: 0; transform: scale(0.6) rotate(0); }
  29%     { opacity: 1; transform: scale(1.1) rotate(12deg); }
  34%     { opacity: 0.9; transform: scale(1.3) rotate(-8deg); }
  40%     { opacity: 0; transform: scale(1.6) rotate(20deg); }
  100%    { opacity: 0; }
}

.pow {
  position: absolute; bottom: 46%; left: 28%;
  font-family: 'Ultra', serif;
  font-size: 44px;
  color: var(--bj-yellow);
  -webkit-text-stroke: 3px var(--bj-ink);
  transform-origin: 50% 50%;
  opacity: 0;
  animation: powFlash 3.8s infinite;
  text-shadow: 4px 4px 0 var(--bj-ink);
  z-index: 6;
}
@keyframes powFlash {
  0%, 27% { opacity: 0; transform: scale(0.2) rotate(-18deg); }
  30%     { opacity: 1; transform: scale(1.15) rotate(-12deg); }
  40%     { opacity: 1; transform: scale(1) rotate(-12deg); }
  50%     { opacity: 0; transform: scale(1.4) rotate(-20deg); }
  100%    { opacity: 0; }
}

.droplet {
  position: absolute; border-radius: 50%;
  background: var(--bj-boot-red);
  border: 2px solid var(--bj-ink);
  animation: dropFly 3.8s infinite;
  opacity: 0;
}
@keyframes dropFly {
  0%, 26% { opacity: 0; transform: translate(0,0); }
  31%     { opacity: 1; transform: var(--d-mid); }
  45%     { opacity: 1; transform: var(--d-end); }
  55%     { opacity: 0; transform: var(--d-end); }
  100%    { opacity: 0; }
}

.cloud {
  position: absolute;
  width: 80px; height: 32px;
  background: #fff;
  border: 3px solid var(--bj-ink);
  border-radius: 40px;
  top: 16%; left: 8%;
  animation: drift 14s linear infinite;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fff;
  border: 3px solid var(--bj-ink); border-radius: 50%;
}
.cloud::before { width: 34px; height: 34px; top: -22px; left: 14px; }
.cloud::after { width: 24px; height: 24px; top: -15px; left: 44px; }
.cloud.c2 { top: 30%; left: 60%; transform: scale(0.8); animation-duration: 22s; animation-delay: -8s; }

@keyframes drift {
  0%   { transform: translateX(-180px); }
  100% { transform: translateX(calc(100vw + 180px)); }
}

@keyframes kick {
  0%, 22%   { transform: rotate(0deg); }
  26%       { transform: rotate(-18deg); }
  30%       { transform: rotate(45deg); }
  36%       { transform: rotate(32deg); }
  45%, 100% { transform: rotate(0deg); }
}
@keyframes headBob {
  0%, 24%   { transform: translate(0,0) rotate(0); }
  28%       { transform: translate(-4px,-2px) rotate(-4deg); }
  32%       { transform: translate(2px,0) rotate(3deg); }
  45%, 100% { transform: translate(0,0) rotate(0); }
}
@keyframes sparkleFlash {
  0%, 28% { opacity: 0; }
  32%     { opacity: 1; }
  40%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .page { padding: 16px 16px 80px; }
  .story-grid, .memorial, .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .ing-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 24px;
  }
  .ing-content { padding: 22px; min-height: 0; }
  .ing-content .fruit-row .fruit-icon { width: 42px; height: 42px; }
  .hero-inner { min-height: 300px; }
  .brand-header { min-height: 180px; padding: 22px 12px 28px; }
  .mascot { width: 140px; height: 160px; left: 6%; }
  .stage-bottle { width: 50px; }
  .sun { width: 60px; height: 60px; }
  .hero-badge { width: 72px; height: 72px; }
  .topbar { font-size: 11px; padding: 8px 12px; }
  .hero-slogan { flex-direction: column; align-items: flex-start; gap: 8px; }
  section { margin-top: 72px; }
  .card { padding: 22px; }
  .fruit-row .fruit-icon { width: 22px; height: 22px; }
  .fruit-garnish { gap: 12px; padding: 16px 12px; margin-top: 56px; }
  .fruit-garnish .fruit-icon { width: 32px; height: 32px; }
  .fruit-accent { width: 40px; height: 40px; }
}

@media (max-width: 600px) {
  .fruit-row { gap: 4px; padding: 6px; }
  .fruit-row .fruit-icon { width: 18px; height: 18px; }
  .hero-corner { font-size: 9px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}