/* Shared editorial opening for the 27 regional topic pages. */
header.snow-topic-hero[data-topic-hero] {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 420px;
  margin: 0 0 28px;
  padding: 48px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: #18374c;
  box-shadow: 0 12px 32px rgb(16 45 66 / 8%);
}
header.snow-topic-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 29 43 / 88%) 0%, rgb(9 29 43 / 78%) 42%, rgb(9 29 43 / 26%) 75%, rgb(9 29 43 / 10%) 100%);
  pointer-events: none;
}
/* Topic pages: brighten the photograph while retaining contrast behind the copy.
   Overview masks remain unchanged. Values are dark-overlay opacity, not image opacity. */
header.snow-topic-hero:not(.snow-topic-hero--overview)::after {
  background: linear-gradient(90deg, rgb(9 29 43 / 72%) 0%, rgb(9 29 43 / 60%) 42%, rgb(9 29 43 / 18%) 75%, rgb(9 29 43 / 6%) 100%);
}
header.snow-topic-hero .snow-topic-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
header.snow-topic-hero .snow-topic-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: var(--topic-photo-position, 62% 50%);
}
header.snow-topic-hero .snow-topic-hero__media img[hidden] { display: none; }
header.snow-topic-hero[data-hero-state="loading"] .snow-topic-hero__media img[data-independent-hero] { opacity: 0; }
header.snow-topic-hero[data-hero-state="loading"] .snow-topic-hero__caption { visibility: hidden; }
section.hero[data-hero-state="loading"] .hero__caption { visibility: hidden; }
header.snow-topic-hero[data-hero-state="ready"] .snow-topic-hero__media img[data-independent-hero] { opacity: 1; }
header.snow-topic-hero .snow-topic-hero__copy {
  width: min(100%, 530px);
  max-width: 530px;
  min-width: 0;
  align-self: flex-start;
}
header.snow-topic-hero p.snow-topic-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: #f2dba9;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}
header.snow-topic-hero .snow-topic-hero__eyebrow::before {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: currentColor;
}
header.snow-topic-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
header.snow-topic-hero .snow-topic-hero__region {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
}
header.snow-topic-hero .snow-topic-hero__separator {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
header.snow-topic-hero p.snow-topic-hero__lead {
  max-width: 490px;
  margin: 24px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .025em;
}
header.snow-topic-hero p.snow-topic-hero__caption {
  position: absolute;
  right: 18px;
  bottom: 14px;
  max-width: min(48%, 440px);
  margin: 0;
  padding: 5px 9px;
  border-radius: 5px;
  color: #fff;
  background: rgb(9 29 43 / 76%);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}
header.snow-topic-hero p[data-mno-topic-count] {
  margin-top: 12px;
  color: #f2dba9;
  font-size: 12px;
}
.snow-topic-intro { margin: -4px 0 24px; color: #607886; font-size: .9rem; line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  header.snow-topic-hero .snow-topic-hero__eyebrow { animation: topic-copy-in .7s both; }
  header.snow-topic-hero .snow-topic-hero__region { animation: topic-copy-in .7s .08s both; }
  header.snow-topic-hero .snow-topic-hero__title { animation: topic-copy-in .8s .16s both; }
  header.snow-topic-hero .snow-topic-hero__lead { animation: topic-copy-in .8s .24s both; }
  header.snow-topic-hero .snow-topic-hero__media img { animation: topic-photo-in 1.2s ease-out both; }
  header.snow-topic-hero .snow-topic-hero__media img.topic-hero-image-enter { animation: topic-photo-in 1.2s ease-out both; }
}
@keyframes topic-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes topic-photo-in { from { transform: scale(1.035); } to { transform: scale(1); } }
@media (max-width: 900px) {
  header.snow-topic-hero[data-topic-hero] { min-height: 400px; padding: 36px; }
  header.snow-topic-hero .snow-topic-hero__copy { max-width: 460px; }
  header.snow-topic-hero h1 { font-size: 44px; }
  header.snow-topic-hero::after { background: linear-gradient(90deg, rgb(9 29 43 / 88%), rgb(9 29 43 / 76%) 60%, rgb(9 29 43 / 24%)); }
  header.snow-topic-hero:not(.snow-topic-hero--overview)::after { background: linear-gradient(90deg, rgb(9 29 43 / 72%), rgb(9 29 43 / 60%) 60%, rgb(9 29 43 / 16%)); }
}
@media (max-width: 600px) {
  header.snow-topic-hero[data-topic-hero] { min-height: 440px; padding: 136px 24px 66px; border-radius: 16px; margin-bottom: 24px; }
  header.snow-topic-hero .snow-topic-hero__copy { align-self: flex-start; width: 100%; }
  header.snow-topic-hero::after { background: linear-gradient(180deg, rgb(9 29 43 / 3%) 0%, rgb(9 29 43 / 18%) 18%, rgb(9 29 43 / 78%) 35%, rgb(9 29 43 / 94%) 82%); }
  header.snow-topic-hero:not(.snow-topic-hero--overview)::after { background: linear-gradient(180deg, rgb(9 29 43 / 2%) 0%, rgb(9 29 43 / 12%) 18%, rgb(9 29 43 / 62%) 35%, rgb(9 29 43 / 80%) 82%); }
  header.snow-topic-hero .snow-topic-hero__media img { object-position: var(--topic-photo-mobile-position, 62% 35%); }
  header.snow-topic-hero p.snow-topic-hero__eyebrow { margin-bottom: 16px; font-size: 10px; gap: 8px; letter-spacing: .1em; }
  header.snow-topic-hero h1 { font-size: 36px; gap: 10px; }
  header.snow-topic-hero .snow-topic-hero__region { font-size: 14px; letter-spacing: .04em; }
  header.snow-topic-hero p.snow-topic-hero__lead { margin-top: 18px; font-size: 15px; line-height: 1.75; }
  header.snow-topic-hero p.snow-topic-hero__caption { inset-inline: 24px; bottom: 16px; max-width: none; padding: 0; background: transparent; color: #d6e1e7; font-size: 10px; }
}
@media (max-width: 360px) {
  header.snow-topic-hero[data-topic-hero] { padding-inline: 20px; }
  header.snow-topic-hero h1 { font-size: 32px; }
  header.snow-topic-hero p.snow-topic-hero__caption { inset-inline: 20px; }
}

/* Overview uses the same photo, typography and motion system, retaining its two navigation actions. */
header.snow-topic-hero.snow-topic-hero--overview { min-height: 460px; margin-top: 24px; }
header.snow-topic-hero--overview .snow-topic-hero__copy { padding: 0; max-width: 650px; width: 100%; }
header.snow-topic-hero--overview p.snow-topic-hero__eyebrow { min-height: 18px; }
header.snow-topic-hero--overview h1 { display: block; min-height: 63px; }
header.snow-topic-hero--overview p.snow-topic-hero__lead { min-height: 58px; }
header.snow-topic-hero .snow-topic-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
header.snow-topic-hero .snow-topic-hero__actions a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 8px;
  color: #fff;
  background: rgb(255 255 255 / 8%);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
header.snow-topic-hero .snow-topic-hero__actions a:first-child { border-color: #efd79d; background: #efd79d; color: #18374c; }
header.snow-topic-hero .snow-topic-hero__actions a:hover { border-color: #fff; background: rgb(255 255 255 / 20%); }
header.snow-topic-hero .snow-topic-hero__actions a:first-child:hover { background: #f8e6bb; color: #18374c; }
header.snow-topic-hero .snow-topic-hero__actions a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  header.snow-topic-hero .snow-topic-hero__actions { animation: topic-copy-in .8s .32s both; }
}
@media (max-width: 900px) {
  header.snow-topic-hero--overview h1 { min-height: 53px; }
}
@media (max-width: 600px) {
  header.snow-topic-hero.snow-topic-hero--overview { min-height: 480px; margin-top: 20px; }
  header.snow-topic-hero--overview p.snow-topic-hero__eyebrow { min-height: 30px; font-size: 9px; }
  header.snow-topic-hero--overview h1 { min-height: 44px; }
  header.snow-topic-hero--overview p.snow-topic-hero__lead { min-height: 49px; font-size: 14px; }
  header.snow-topic-hero .snow-topic-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  header.snow-topic-hero .snow-topic-hero__actions a { width: 100%; min-height: 46px; padding: 10px 9px; gap: 6px; font-size: 13px; white-space: nowrap; }
  header.snow-topic-hero--overview .snow-topic-hero__media .zpv-hero-image--zao-overview { object-position: 0 50%; }
  header.snow-topic-hero--overview .snow-topic-hero__media .ypv-hero-image--yuzawa-overview { object-position: 100% 50%; }
  header.snow-topic-hero--overview .snow-topic-hero__media .mnp-hero__image--mno-overview { object-position: 0 50%; }
}
@media (max-width: 360px) {
  header.snow-topic-hero.snow-topic-hero--overview { min-height: 520px; }
  header.snow-topic-hero--overview h1 { min-height: 77px; }
  header.snow-topic-hero--overview p.snow-topic-hero__lead { min-height: 98px; }
}