/* Width-based geometry is settled before paint and unaffected by browser bars. */
html:has(body.concept-a) { overflow-y: scroll; }
.concept-a .sb-hero[data-progressive-hero] {
  height: clamp(460px, calc(100vw * 801 / 1964 + 40px), 840px);
  min-height: 0;
  padding: 0;
  background: #f8dfc5;
}
.concept-a [data-progressive-hero] .hero-art { background: none; }
.concept-a [data-progressive-hero] .hero-art picture {
  position: absolute;
  inset: 0;
}
.concept-a [data-progressive-hero] .hero-full {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.concept-a [data-progressive-hero][data-hero-ready] .hero-full { opacity: 1; }
.concept-a [data-progressive-hero] .hero-preview { pointer-events: none; }
.concept-a [data-progressive-hero] h1 {
  color: #ff593b;
}
.concept-a [data-progressive-hero] .hero-outline-title {
  /* Only the hidden accessible text uses a font; visible lettering is paths. */
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.concept-a [data-progressive-hero] .hero-title-line { height: 1.12em; }
.concept-a [data-progressive-hero] .hero-lettering {
  display: block;
  flex: none;
  max-width: none;
  overflow: visible;
  stroke: none;
  fill: currentColor;
}
.concept-a [data-progressive-hero] .hero-outline-primary {
  filter: drop-shadow(0 3px 0 #fff);
}
.concept-a [data-progressive-hero] .hero-title-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.concept-a [data-progressive-hero] h1 em { color: inherit; }
.concept-a [data-progressive-hero] .sb-hero-copy > p,
.concept-a [data-progressive-hero] .hero-watch {
  font-family: 'Hero Nunito', Arial, sans-serif;
  font-weight: 700;
}
.concept-a [data-progressive-hero] .sb-hero-copy > p { color: #493c34; }
.concept-a [data-progressive-hero] .hero-watch { background: #ff593b; }
.concept-a [data-progressive-hero] .hero-watch:hover { background: #ee482c; }
@media (min-width: 1900px) {
  .concept-a .sb-hero[data-progressive-hero] { height: min(calc(100vw * 801 / 1964), 840px); }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .concept-a .sb-hero[data-progressive-hero] { height: clamp(360px, calc(54vw + 30px), 560px); }
}
@media (min-width: 481px) and (max-width: 600px) {
  .concept-a .sb-hero[data-progressive-hero] { height: 400px; }
}
@media (max-width: 480px) {
  .concept-a .sb-hero[data-progressive-hero] { height: clamp(520px, calc(150vw + 40px), 680px); }
}
@media (prefers-reduced-motion: reduce) {
  .concept-a [data-progressive-hero] .hero-full { transition: none; }
}