/* Interior-page title panels use the supplied festival blue. */
body:not([data-page="home"]) .page-intro {
  --title-wave-height: clamp(34px, 4.5vw, 64px);
  background: var(--action-blue);
  color: #fff;
  border-bottom: 0;
  overflow: visible;
  padding-bottom: clamp(20px, 3vw, 38px);
  margin-bottom: var(--title-wave-height);
}
/* Mirror the footer's edge, keeping a one-pixel overlap to prevent a seam. */
body:not([data-page="home"]) .page-intro::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  inset-inline: 0;
  height: calc(var(--title-wave-height) + 1px);
  background: var(--action-blue);
  -webkit-mask: url("../../images/decorations/footer-wave.svg") center / 100% 100% no-repeat;
  mask: url("../../images/decorations/footer-wave.svg") center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
body:not([data-page="home"]) .page-intro :is(h1, .page-title-icon, .eyebrow, .breadcrumb, .page-lead) {
  color: inherit;
}
body:not([data-page="home"]) .page-intro .four-point {
  background: #fff;
}
/* The same Lucide pictograms used in the menu and footer. */
h1.page-title-with-icon {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  min-width: 0;
  flex: 1;
}
.page-title-with-icon > .page-title-icon {
  --icon-stroke-width: 1.1;
  display: block;
  flex: 0 0 auto;
  width: clamp(28px, 4.3vw, 56px);
  height: clamp(28px, 4.3vw, 56px);
  color: var(--blue, #2448c5);
}
.page-title-with-icon > .page-title-text {
  display: block;
  min-width: 0;
}
/* Secondary English labels sit below the Japanese heading at every size. */
body.spark-v2 :is(h1, h2, h3, h4) .heading-en {
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 0.5em;
  /* Align the visible letter edge with the Japanese glyphs above. */
  padding-inline-start: 0.25em;
  color: inherit;
  font-size: clamp(12px, 0.42em, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
h1.page-title-with-icon:has(.heading-en) {
  align-items: flex-start;
}
.page-title-with-icon:has(.heading-en) > .page-title-icon {
  margin-top: 0.2em;
}
.legacy-contact-row h2:has(.heading-en) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  row-gap: 0;
}
.legacy-contact-row h2 > .heading-en {
  grid-column: 2;
}
body.spark-v2 .calendar-filter-label .heading-en {
  font-size: 10px;
}
@media (max-width: 640px) {
  .page-title-row:has(> .page-title-with-icon) {
    gap: 12px;
  }
}