/* Shared choice-page hero geometry: food page is the source of truth.
   Center the title + description as one block, so varying description lengths
   remain naturally centered without per-page offsets. Keep artwork independent. */
.choice-page-hero.intro {
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  min-height:260px;
  padding:44px 12px 38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.choice-page-hero.intro h1,
.choice-page-hero.intro h1:first-child {
  flex:none;
  margin:0 0 15px;
  font-size:clamp(34px,5vw,46px);
  line-height:1.25;
  letter-spacing:-2px;
}
.choice-page-hero.intro > p,
.choice-page-hero.intro > p.intro {
  flex:none;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.8;
  text-align:center;
}
/* Art stays behind the heading, not in the title/description flow. */
.choice-page-hero.intro > .hero-art {
  position:absolute;
  z-index:-1;
  right:-30px;
  top:-32px;
  width:350px;
  height:320px;
  margin:0;
  pointer-events:none;
}
.choice-page-hero.intro > .choice-hero-icon.hero-art {
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  background:none;
  color:var(--choice-accent);
  font-size:clamp(135px,18vw,220px);
  line-height:1;
  opacity:.22;
  transform:rotate(-9deg);
  filter:saturate(.8);
}
@media(max-width:600px){
  .choice-page-hero.intro {min-height:235px;padding:38px 4px 30px}
  .choice-page-hero.intro > p,
  .choice-page-hero.intro > p.intro {font-size:14px}
  .choice-page-hero.intro > .hero-art {width:265px;height:265px;right:-85px;top:-12px}
  .choice-page-hero.intro > .choice-hero-icon.hero-art {font-size:145px;opacity:.19}
}

/* v11 — single source of truth for all Choice hero positions.
   The heading is anchored at the Food page's original visual position;
   descriptions flow beneath it without re-centering the heading. */
main:has(> .choice-page-hero){padding-top:32px}
.choice-page-hero.intro,
.choice-intro.intro.choice-page-hero{
  min-height:260px;
  padding:71px 12px 38px;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
}
.choice-page-hero.intro > h1,
.choice-intro.intro.choice-page-hero > h1{
  margin:0 0 15px;
  font-size:clamp(34px,5vw,46px);
  line-height:normal;
  letter-spacing:-2px;
}
/* The description uses one neutral color, never the category accent. */
.choice-page-hero.intro > p,
.choice-page-hero.intro > p.intro,
.choice-intro.intro.choice-page-hero > p.intro{
  color:#bfc0c6;
  margin:0;
  font-size:15px;
  line-height:1.8;
}
@media(max-width:600px){
  main:has(> .choice-page-hero){padding-top:23px}
  .choice-page-hero.intro,
  .choice-intro.intro.choice-page-hero{min-height:235px;padding:64px 4px 30px}
  .choice-page-hero.intro > p,
  .choice-page-hero.intro > p.intro,
  .choice-intro.intro.choice-page-hero > p.intro{font-size:14px}
}

/* All current and future Choice hero images use one shared opacity. */
.choice-page-hero.intro > img.choice-hero-image.hero-art { opacity: .19; }
@media (max-width:600px) {
  .choice-page-hero.intro > img.choice-hero-image.hero-art { opacity: .19; }
}