/* ============================================================
   HERO — standout element: living tea flow-field
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 78% 18%, oklch(34% 0.050 168 / 0.55) 0%, transparent 55%),
    linear-gradient(168deg, var(--band-deep) 0%, var(--band) 58%, oklch(23% 0.046 168) 100%);
  color: var(--on-dark);
  overflow: hidden;
}
#teaField {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 46%, transparent 40%, oklch(20% 0.042 168 / 0.55) 100%),
    linear-gradient(to bottom, oklch(20% 0.042 168 / 0.5) 0%, transparent 18%, transparent 78%, oklch(20% 0.042 168 / 0.7) 100%);
}
.hero-content {
  position: relative; z-index: var(--z-content);
  /* longhands only — a `padding` shorthand here would zero out the
     horizontal padding inherited from .wrap and let text hit the viewport edge */
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(5rem, 10vh, 7rem);
  max-width: 880px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 600 .75rem var(--sans); letter-spacing: .30em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem;
  animation: heroFadeUp .8s var(--ease-out) both;
}
.hero-kicker::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9.2vw, 7.6rem);
  font-weight: 300; line-height: 1.0; letter-spacing: -.018em;
  margin-bottom: 1.8rem; text-wrap: balance;
}
.hero-headline em { font-style: italic; color: var(--gold); }
.hl-line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.hl-line > span {
  display: inline-block; transform: translateY(112%);
  animation: hlRise 1.1s var(--ease-out) forwards;
}
.hl-line:nth-child(2) > span { animation-delay: .14s; }
@keyframes hlRise { to { transform: translateY(0); } }

.hero-sub {
  font-size: 1.08rem; color: var(--on-dark-soft);
  max-width: 480px; line-height: 1.7; margin-bottom: 2.6rem;
  animation: heroFadeUp .9s .35s var(--ease-out) both;
}
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  animation: heroFadeUp .9s .45s var(--ease-out) both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* vertical 茶 side glyph */
.hero-glyph {
  position: absolute; right: clamp(1.5rem, 5vw, 4.5rem); top: 50%;
  transform: translateY(-50%); z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  animation: heroFadeUp 1.2s .6s var(--ease-out) both;
}
.hero-glyph .glyph {
  font-family: var(--serif); font-size: clamp(3rem, 6vw, 5rem);
  color: oklch(95.9% 0.008 79 / 0.14); line-height: 1;
}
.hero-glyph .glyph-label {
  writing-mode: vertical-rl; font: 500 .68rem var(--sans);
  letter-spacing: .42em; text-transform: uppercase;
  color: oklch(95.9% 0.008 79 / 0.38);
}
@media (max-width: 780px) {
  .hero-glyph { display: none; }
  .hero-content { text-align: center; }
  /* centered layout: the leading dash would sit stranded at the left edge */
  .hero-kicker::before { display: none; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
}
@media (max-width: 420px) {
  .hero-headline { font-size: clamp(2.6rem, 13vw, 3.4rem); }
}

.scroll-cue {
  /* centered via left/right + flex, NOT translateX(-50%) — the heroFadeUp
     animation overwrites `transform`, which would undo a translate-based center */
  position: absolute; left: 0; right: 0; bottom: 2.2rem;
  z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: oklch(95.9% 0.008 79 / 0.5);
  font: 600 .62rem var(--sans); letter-spacing: .34em; text-transform: uppercase;
  animation: heroFadeUp 1s .9s var(--ease-out) both;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, oklch(95.9% 0.008 79 / 0.55), transparent);
  animation: cueDrip 2.4s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes cueDrip {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ============================================================
   VARIETY RIBBON — static

   Formerly a scrolling marquee of eight teas. Now the four the steep timer
   actually brews, spread across the site's content column so the band does
   not read as a small cluster marooned in a lot of empty green.
   ============================================================ */
.marquee {
  background: var(--band-deep);
  border-top: 1px solid oklch(95.9% 0.008 79 / 0.08);
  padding: 1.1rem clamp(1rem, 5vw, 3rem);
  position: relative; z-index: 3;
}
/* Each name is its own flex item so the four can be distributed across the
   site's 1200px content width, rather than clustering in the middle of a
   full-bleed band. This also lines the ribbon up with every other section. */
.marquee-track {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: .4rem 1rem;
  max-width: 1200px; margin-inline: auto;
}
.marquee-item {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 1.15rem; color: oklch(95.9% 0.008 79 / 0.55);
  letter-spacing: 0.06em; white-space: nowrap;
}
.marquee .dot {
  color: var(--gold); font-style: normal; font-size: .7rem;
}

/* Below 480px the four names no longer fit at full size and one would drop to
   a second line on its own, trailing an orphaned dot. Shrink the type instead
   so the ribbon stays a single, even row. */
@media (max-width: 480px) {
  .marquee-track { gap: 0 .7rem; }
  .marquee-item { font-size: .98rem; letter-spacing: .03em; }
}

@media (max-width: 420px) {
  .marquee { padding-inline: 1rem; }
  .marquee-track { gap: 0 .5rem; }
  .marquee-item { font-size: .86rem; letter-spacing: .02em; }
  .marquee .dot { font-size: .55rem; }
}