/* Phase 4E: the designated stadium and transparent collage remain separate pictures. */
:root {
  --midnight: #091526;
  --navy: #10243e;
  --steel: #547995;
  --copper: #a5673f;
  --champagne: #d7b98a;
}

/* Keep the localized logos on one shared canvas within the native menu flow. */
.site-header {
  border-bottom-color: rgb(207 225 240 / .15);
  background: var(--midnight);
  box-shadow: 0 .35rem 1.4rem rgb(4 12 25 / .12);
}
.site-header__inner { min-height: 6rem; gap: .45rem 1.15rem; padding-block: .35rem; }
.mintsuku-brand { flex-basis: 14.5rem; width: 14.5rem; min-width: 14.5rem; }
.mintsuku-brand__link { height: 4.25rem; color: #fff; }
.mintsuku-brand__image { filter: drop-shadow(0 .12rem .4rem rgb(0 0 0 / .25)); }
.site-menu { justify-content: center; gap: .25rem 1rem; }
.site-menu a, .language-links a { color: #f4f7fb; }
.site-menu a:hover, .language-links a:hover { color: #d9e7f7; }
.player-menu-toggle { color: #f4f7fb; }
.player-menu-toggle:hover { color: #d9e7f7; }
.player-menu-toggle[aria-current="page"] { color: #d7b98a; }
.language-links { gap: .45rem; color: #f4f7fb; }
.language-links__unavailable { color: #b9c9da; }
.nav-toggle { border-color: rgb(217 232 245 / .45); background: #172c48; color: #fff; }
.nav-toggle:hover { background: #244162; }

/* The left HTML copy is on a dark overlay; no artwork is baked into the stadium. */
.mintsuku-hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  background: #091526;
}
.mintsuku-hero__stadium {
  display: block;
  position: absolute;
  inset: -16px;
  z-index: 0;
  pointer-events: none;
}
.mintsuku-hero__light {
  position: absolute;
  inset: -16px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 25% 36% at 82% 32%, rgb(81 146 202 / .18), transparent 92%),
    radial-gradient(ellipse 21% 38% at 72% 58%, rgb(198 133 69 / .15), transparent 92%);
}
.mintsuku-hero__stadium img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
.mintsuku-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgb(5 16 34 / .89), rgb(5 16 34 / .72) 32%, rgb(5 16 34 / .18) 61%, transparent 83%);
}
.mintsuku-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #739ac0 30%, var(--champagne) 65%, transparent);
  box-shadow: 0 -.35rem 1.2rem rgb(151 181 213 / .18);
}
.mintsuku-hero__inner.gallery-wrap {
  position: relative;
  z-index: 3;
  min-height: 42rem;
  gap: 1.25rem 1.8rem;
  padding-block: 3rem 1rem;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}
.mintsuku-hero__copy { position: relative; z-index: 4; grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: none; }
.mintsuku-hero__inner > .button-primary { position: relative; z-index: 4; grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
.mintsuku-hero__visual-wrap { grid-column: 2; grid-row: 2; }
.hero .eyebrow { color: #b7d4ee; letter-spacing: .18em; }
.hero h1 {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.05rem, 3vw, 3.1rem);
  letter-spacing: -.055em;
  line-height: 1.17;
  text-shadow: 0 .15rem .9rem rgb(0 0 0 / .18);
}
.hero .eyebrow, .hero__lead, .hero .button-primary { font-family: var(--font-ui); }
.hero__phrase:nth-child(2) { color: #87c5f4; }
.hero__lead { width: 100%; max-width: none; color: #e9f0f7; line-height: 1.65; }
.mintsuku-hero__unbroken { white-space: nowrap; }
.hero .button-primary {
  min-height: 3.45rem;
  padding-inline: 1.55rem;
  border: 1px solid #a8d7ff;
  border-radius: 99rem;
  background: linear-gradient(105deg, #1e64ba, #2778c9);
  color: #fff;
  box-shadow: inset 0 1px rgb(255 255 255 / .45), 0 .7rem 1.7rem rgb(20 67 135 / .38);
}
.hero .button-primary::after { content: "↗"; margin-left: .7rem; font-size: 1.15rem; line-height: 1; }
.hero .button-primary:hover { background: linear-gradient(105deg, #174e92, #2778c9); color: #fff; }
.mintsuku-hero__visual-wrap {
  position: relative;
  justify-self: start;
  align-self: end;
  width: min(57vw, 51.875rem);
  max-width: none;
  margin-left: clamp(-130px, calc(-32px - (100vw - 1024px) * .236), -32px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
}
.mintsuku-hero__visual-wrap::before {
  content: "";
  position: absolute;
  left: 10%; right: 5%; bottom: 5%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(2 9 22 / .48), transparent 75%);
  pointer-events: none;
}
.mintsuku-hero__visual {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  pointer-events: none;
}
.mintsuku-hero__visual img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

@media (min-width: 901px) {
  .site-nav { flex: 1 1 auto; }
  .site-menu { flex-wrap: nowrap; }
  .site-menu a { white-space: nowrap; }
  .mintsuku-hero__inner { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mintsuku-hero__inner {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    min-height: 37rem;
    gap: 1rem;
    padding-block: 2rem 1rem;
  }
  .mintsuku-hero__visual-wrap { width: 58vw; margin-left: -32px; aspect-ratio: 920 / 613; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .site-header__inner { min-height: 5.125rem; }
  .mintsuku-brand__link { height: 3.75rem; }
}
@media (max-width: 900px) {
  .site-menu { flex-direction: row; }
  .site-menu li { flex: 0 1 calc(50% - .5rem); }
  .has-js .site-nav.is-open .site-menu { flex-direction: column; }
  .has-js .site-nav.is-open .site-menu li { flex: none; }
  .has-js .site-nav.is-open .player-submenu li { flex: none; }
  .has-js .site-nav { background: #172c48; }
  .has-js .site-nav.is-open { padding: .5rem 1rem; border: 1px solid rgb(207 225 240 / .25); border-radius: .45rem; }
}
@media (max-width: 600px) {
  .site-header__inner { min-height: 4.25rem; }
  .mintsuku-brand__link { height: 3.15rem; }
}
@media (max-width: 450px) {
  .site-header__inner { column-gap: .375rem; }
  .mintsuku-brand { flex-basis: 10.5rem; width: 10.5rem; min-width: 10.5rem; }
  .has-js .nav-toggle { position: relative; justify-content: center; min-width: 2.75rem; }
  .has-js .nav-toggle__icon { margin-right: 0; }
  .has-js .nav-toggle > span:not(.nav-toggle__icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .language-links { font-size: .8rem; }
}
@media (max-width: 350px) {
  .site-header__inner.wrap { width: min(100% - 1rem, 70rem); }
  .mintsuku-brand { flex-basis: 9.5rem; width: 9.5rem; min-width: 9.5rem; }
}
@media (max-width: 768px) {
  .mintsuku-hero__stadium, .mintsuku-hero__visual, .mintsuku-hero__light { transform: none !important; }
  .hero__phrase { white-space: normal; }
  .mintsuku-hero__inner.gallery-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100% - 2rem, 40.625rem);
    min-height: 0;
    gap: .9rem;
    padding-block: 1.8rem .75rem;
  }
	.mintsuku-hero__copy,
	.mintsuku-hero__inner > .button-primary,
	.mintsuku-hero__inner > .hero-stats,
	.mintsuku-hero__visual-wrap { grid-column: auto; grid-row: auto; }
	.mintsuku-hero__copy { width: 100%; margin: 0; }
	.mintsuku-hero__copy .eyebrow { margin-bottom: .55rem; }
	.mintsuku-hero__copy h1 { margin-bottom: .85rem; }
	.mintsuku-hero__copy .hero__lead { margin-bottom: 0; }
	.mintsuku-hero__inner > .button-primary {
		align-self: flex-start;
		width: auto;
		max-width: 100%;
		min-height: 3rem;
		padding: .68rem 1.1rem;
		border-radius: .8rem;
		justify-self: start;
		white-space: nowrap;
	}
  .mintsuku-hero__shade {
    background:
      linear-gradient(180deg, rgb(5 16 34 / .96), rgb(5 16 34 / .88) 39%, rgb(5 16 34 / .25) 81%, transparent),
      linear-gradient(90deg, rgb(5 16 34 / .55), transparent 86%);
  }
  .mintsuku-hero__stadium img { object-position: center 45%; }
  .mintsuku-hero__visual-wrap {
		display: flex;
		justify-content: center;
		align-self: center;
    justify-self: center;
		width: 100%;
		max-width: 100%;
		margin: -.1rem auto 0;
    aspect-ratio: 650 / 433;
  }
	.mintsuku-hero__visual,
	.mintsuku-hero__visual img { width: 100%; max-width: 100%; object-position: center; }
  .hero h1 { font-size: clamp(1.7rem, 6.5vw, 2.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mintsuku-hero__light { transform: none !important; }
}
@media (max-width: 375px) {
	.mintsuku-hero__inner.gallery-wrap { gap: .75rem; padding-top: 1.5rem; }
	.mintsuku-hero__inner > .button-primary { font-size: .92rem; }
}
@media print {
  .mintsuku-hero__light { transform: none !important; }
}