/* ==========================================================================
   Kitakyushu Street Dance Contest 2026 — theme stylesheet
   ========================================================================== */

:root {
	/* Brand palette: blue + green as the mains, gold/yellow as the accent. */
	--navy: #0d2b40;
	--blue: #1574b1;
	--blue-light: #23ab39; /* now holds the green secondary/pop color */
	--white: #ffffff;
	--ink: #0a1a24;
	--gold: #f8b62b;
	--teal: #23ab39; /* PRIZE section background — same green as --blue-light */

	--font-en: "Anton", "Arial Narrow", sans-serif;
	--font-dream: "Avenir Next", "Avenir", "Montserrat", "Century Gothic", "Arial", sans-serif;
	--font-jp-heading: "Noto Sans JP", "Hiragino Sans", sans-serif;
	--font-jp-body: "Noto Sans JP", "Hiragino Sans", sans-serif;

	--container-w: 1120px;
	--section-pad-y: clamp(56px, 9vw, 120px);
	--radius: 4px;
}

/* ---- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-jp-body);
	color: var(--ink);
	background: var(--white);
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, p, dl, dd {
	margin: 0;
}

button {
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Accessibility helpers ----------------------------------------------- */
.skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	background: var(--white);
	color: var(--navy);
	padding: 10px 18px;
	z-index: 10000;
	border-radius: var(--radius);
	transition: top .2s ease;
	font-weight: 700;
}

.skip-link:focus {
	top: 8px;
}

:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Layout --------------------------------------------------------------- */
.container {
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: 20px;
}

.section {
	padding-block: var(--section-pad-y);
}

.section--navy {
	background: var(--navy);
	color: var(--white);
}

.section--white {
	background: var(--white);
	color: var(--ink);
}

/* Transparent section that floats over the fixed .media-bg (CONCEPT) */
.section--over-media {
	position: relative;
	background: transparent;
	color: var(--white);
}

.section--teal {
	background: var(--teal);
	color: var(--white);
}

/* ---- Section heading (English label + Japanese subline) ------------------ */
.section-heading {
	margin-bottom: clamp(32px, 6vw, 64px);
}

.section-heading--center {
	text-align: center;
}

.section-heading__en {
	font-family: var(--font-en);
	font-style: italic;
	font-size: clamp(2.6rem, 8vw, 5rem);
	letter-spacing: .02em;
	line-height: 1;
	color: var(--blue-light);
	-webkit-text-stroke: 1px currentColor;
}

.section--white .section-heading__en {
	color: var(--blue);
}

.section--teal .section-heading__en {
	color: rgba(255, 255, 255, .92);
}

.section-heading__ja {
	margin-top: 10px;
	font-family: var(--font-jp-heading);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	letter-spacing: .08em;
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 40px;
	font-weight: 700;
	font-family: var(--font-jp-heading);
	border-radius: 999px;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn--entry {
	background: var(--gold);
	color: var(--ink);
}

.btn--entry:hover {
	transform: translateY(-2px);
	background: #f9c14b;
}

.btn--outline {
	border: 2px solid var(--white);
	color: var(--white);
}

.btn--outline:hover {
	background: var(--white);
	color: var(--navy);
}

/* ---- Header ----------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: border-color .3s ease;
}

/* The frosted navy background lives on a pseudo-element: backdrop-filter on
   the header itself would turn it into the containing block for the fixed
   fullscreen nav overlay, trapping the menu inside the header bar. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 43, 64, .92);
	backdrop-filter: blur(6px);
	opacity: 1;
	transition: opacity .3s ease;
}

/* On the front page the header floats transparently over the hero, then
   fades to solid navy once the user scrolls past it (toggled in main.js). */
.home .site-header {
	border-bottom-color: transparent;
}

.home .site-header::before {
	opacity: 0;
}

.home .site-header.is-scrolled {
	border-bottom-color: rgba(255, 255, 255, .08);
}

.home .site-header.is-scrolled::before {
	opacity: 1;
}

.site-header__inner {
	max-width: var(--container-w);
	margin-inline: auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__logo {
	flex-shrink: 0;
	max-width: 160px;
}

.site-header__logo-img {
	max-height: 48px;
	width: auto;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-header__menu a {
	color: var(--white);
	font-family: var(--font-jp-heading);
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .04em;
	white-space: nowrap;
}

.site-header__menu a:hover {
	color: var(--blue-light);
}

/* Desktop inline nav shows only the EN label; the JA sub belongs to the overlay */
.site-header__menu .nav-ja {
	display: none;
}

.site-header__nav-foot {
	display: none;
}

/* ---- Hamburger button (mobile) — asymmetric 2-line morphing into X ---------- */
.hamburger {
	display: none;
	position: relative;
	width: 48px;
	height: 48px;
	z-index: 1100;
}

.hamburger__line {
	position: absolute;
	left: 10px;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
	transform-origin: center;
	transition: transform .45s cubic-bezier(.76, 0, .24, 1), width .3s ease, background .3s ease;
}

.hamburger__line--top {
	top: 19px;
	width: 28px;
}

.hamburger__line--bottom {
	top: 27px;
	width: 18px;
}

.hamburger:hover .hamburger__line--bottom {
	width: 28px;
}

.hamburger[aria-expanded="true"] .hamburger__line--top {
	transform: translateY(4px) rotate(45deg);
	width: 28px;
}

.hamburger[aria-expanded="true"] .hamburger__line--bottom {
	transform: translateY(-4px) rotate(-45deg);
	width: 28px;
}

/* ---- Full-screen overlay nav (mobile) --------------------------------------- */
@media (max-width: 900px) {
	.hamburger {
		display: block;
	}

	.site-header__nav {
		position: fixed;
		inset: 0;
		z-index: 1050;
		margin: 0;
		padding: 96px clamp(28px, 9vw, 64px) 40px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		background:
			radial-gradient(120% 90% at 85% 8%, rgba(21, 116, 177, .38) 0%, rgba(13, 43, 64, 0) 55%),
			linear-gradient(160deg, #123449 0%, var(--navy) 55%, var(--ink) 100%);
		clip-path: circle(0px at calc(100% - 44px) 42px);
		visibility: hidden;
		transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .7s;
		overflow: hidden;
	}

	.site-header__nav.is-open {
		clip-path: circle(150% at calc(100% - 44px) 42px);
		visibility: visible;
		transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s;
	}

	/* Watermark behind the links */
	.site-header__nav::before {
		content: "SDC 2026";
		position: absolute;
		right: -4vw;
		bottom: 4vh;
		font-family: var(--font-en);
		font-style: italic;
		font-size: clamp(4rem, 22vw, 9rem);
		line-height: 1;
		color: transparent;
		-webkit-text-stroke: 1px rgba(35, 171, 57, .18);
		pointer-events: none;
		white-space: nowrap;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(18px, 4.2vh, 30px);
		counter-reset: nav;
	}

	.site-header__menu li {
		counter-increment: nav;
		opacity: 0;
		transform: translateY(34px) skewY(3deg);
		transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
	}

	.site-header__nav.is-open .site-header__menu li {
		opacity: 1;
		transform: translateY(0) skewY(0);
	}

	.site-header__nav.is-open .site-header__menu li:nth-child(1) { transition-delay: .30s; }
	.site-header__nav.is-open .site-header__menu li:nth-child(2) { transition-delay: .38s; }
	.site-header__nav.is-open .site-header__menu li:nth-child(3) { transition-delay: .46s; }
	.site-header__nav.is-open .site-header__menu li:nth-child(4) { transition-delay: .54s; }
	.site-header__nav.is-open .site-header__menu li:nth-child(5) { transition-delay: .62s; }
	.site-header__nav.is-open .site-header__menu li:nth-child(6) { transition-delay: .70s; }

	.site-header__menu a {
		display: flex;
		align-items: baseline;
		gap: 14px;
		font-size: clamp(2rem, 8.5vw, 3rem);
		font-family: var(--font-dream);
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.1;
	}

	/* Gold index number */
	.site-header__menu a::before {
		content: "0" counter(nav);
		font-family: var(--font-en);
		font-style: italic;
		font-size: .85rem;
		color: var(--gold);
		letter-spacing: .1em;
	}

	.site-header__menu .nav-ja {
		display: inline-block;
		font-family: var(--font-jp-heading);
		font-weight: 500;
		font-size: .74rem;
		letter-spacing: .12em;
		color: var(--blue-light);
	}

	/* Overlay footer (Instagram) */
	.site-header__nav-foot {
		display: block;
		margin-top: clamp(30px, 7vh, 56px);
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .5s ease .74s, transform .5s ease .74s;
	}

	.site-header__nav.is-open .site-header__nav-foot {
		opacity: 1;
		transform: translateY(0);
	}

	.site-header__nav-instagram {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--white);
		font-size: .85rem;
		letter-spacing: .06em;
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: 999px;
		padding: 9px 20px;
		transition: border-color .25s ease, color .25s ease;
	}

	.site-header__nav-instagram:hover {
		border-color: var(--blue-light);
		color: var(--blue-light);
	}
}

/* Scroll lock while the overlay is open */
html.nav-open,
html.nav-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__nav,
	.site-header__menu li,
	.site-header__nav-foot,
	.hamburger__line {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}

body {
	padding-top: 72px;
}

/* ---- Fixed background media (spans HERO → CONCEPT) ------------------------- */
.media-bg {
	position: fixed;
	inset: 0;
	z-index: -1; /* behind in-flow content, above the page canvas */
	overflow: hidden;
	background: var(--navy);
}

.media-bg__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	animation: media-cross 21s infinite;
}

.media-bg__slide--1 { animation-delay: 0s; }
.media-bg__slide--2 { animation-delay: 7s; }
.media-bg__slide--3 { animation-delay: 14s; }

@keyframes media-cross {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	29%  { opacity: 1; }
	38%  { opacity: 0; }
	100% { opacity: 0; }
}

.media-bg__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(13, 43, 64, .58) 0%, rgba(10, 26, 36, .5) 42%, rgba(10, 26, 36, .82) 100%),
		radial-gradient(120% 90% at 50% 28%, rgba(21, 116, 177, .3) 0%, rgba(13, 43, 64, 0) 62%);
}

@media (prefers-reduced-motion: reduce) {
	.media-bg__slide { animation: none; }
	.media-bg__slide--1 { opacity: 1; }
}

/* ---- Hero (jillion-inspired: full-bleed bg + animated DREAM logo) ---------- */
.hero {
	position: relative;
	min-height: 100svh;
	margin-top: -72px; /* pull up under the fixed header for a full-bleed hero */
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent; /* the shared .media-bg shows through */
	color: var(--white);
	overflow: hidden;
}

.hero__inner {
	position: relative;
	z-index: 3;
	max-width: var(--container-w);
	margin-inline: auto;
	padding: 96px 24px 80px;
	width: 100%;
	text-align: center;
}

/* Subtitles */
.hero__sub {
	font-family: var(--font-dream);
	font-weight: 500;
	letter-spacing: .18em;
	color: var(--white);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s ease, transform .8s ease;
	transition-delay: 200ms;
}

.hero__sub--top {
	font-size: clamp(1rem, 2.6vw, 1.6rem);
	color: var(--white);
	margin-bottom: clamp(18px, 3vw, 30px);
}

.hero__sub--bottom {
	font-size: clamp(1rem, 3.2vw, 2rem);
	color: var(--white);
	margin-top: clamp(18px, 3vw, 30px);
	transition-delay: 900ms;
}

/* DREAM 夢 logo */
.hero__logo {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(4px, 1.4vw, 14px);
	line-height: .9;
}

.hero__logo-en {
	display: flex;
	justify-content: center;
	font-family: var(--font-dream);
	font-weight: 700;
	font-size: clamp(3.4rem, 15vw, 11rem);
	letter-spacing: .04em;
	color: var(--white);
}

.hero__logo-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.5em) scale(.9);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.hero__logo-ja {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: clamp(1.8rem, 7vw, 5rem);
	color: var(--white);
	letter-spacing: .1em;
	opacity: 0;
	transform: translateY(.4em);
	transition: opacity .7s ease, transform .7s ease;
}

.hero__logo-dash {
	color: var(--white);
	font-family: var(--font-dream);
	font-weight: 800;
}

.hero__logo.is-animated .hero__logo-char,
.hero__logo.is-animated .hero__logo-ja {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Glitch emphasis — a quick RGB-split / slice burst every few seconds
   (starts only after the intro reveal has settled). */
.hero__logo.is-animated .hero__logo-en {
	animation: dream-glitch 1.8s 1.6s infinite steps(1, end);
}

.hero__logo.is-animated .hero__logo-ja {
	animation: yume-glitch 1.8s 1.6s infinite steps(1, end);
}

/* Fine, rapid RGB-split flicker (no slicing) — a brief burst each cycle. */
@keyframes dream-glitch {
	0%, 9%, 100% { transform: translate(0); text-shadow: none; }
	1%  { transform: translate(-2px, 1px);  text-shadow: 3px 0 rgba(255, 45, 85, .85), -3px 0 rgba(0, 225, 255, .85); }
	2%  { transform: translate(2px, -1px);  text-shadow: -3px 0 rgba(255, 45, 85, .85), 3px 0 rgba(0, 225, 255, .85); }
	3%  { transform: translate(-2px, 0);    text-shadow: 2px 0 rgba(255, 45, 85, .75), -2px 0 rgba(0, 225, 255, .75); }
	4%  { transform: translate(2px, 1px);   text-shadow: -2px 0 rgba(255, 45, 85, .75), 2px 0 rgba(0, 225, 255, .75); }
	5%  { transform: translate(-3px, 0);    text-shadow: 3px 0 rgba(255, 45, 85, .7), -3px 0 rgba(0, 225, 255, .7); }
	6%  { transform: translate(2px, -1px);  text-shadow: -2px 0 rgba(255, 45, 85, .7), 2px 0 rgba(0, 225, 255, .7); }
	7%  { transform: translate(-1px, 0);    text-shadow: 2px 0 rgba(255, 45, 85, .6), -2px 0 rgba(0, 225, 255, .6); }
	8%  { transform: translate(1px, 0);     text-shadow: none; }
}

@keyframes yume-glitch {
	0%, 9%, 100% { transform: translate(0); text-shadow: none; }
	2% { transform: translate(2px, 0);  text-shadow: 2px 0 rgba(255, 45, 85, .8), -2px 0 rgba(0, 225, 255, .8); }
	4% { transform: translate(-2px, 0); text-shadow: -2px 0 rgba(255, 45, 85, .8), 2px 0 rgba(0, 225, 255, .8); }
	6% { transform: translate(1px, 0);  text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__logo.is-animated .hero__logo-en,
	.hero__logo.is-animated .hero__logo-ja {
		animation: none;
	}
}

.hero__sub.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Scroll cue */
.hero__scroll {
	position: absolute;
	bottom: 20px;
	left: clamp(16px, 3vw, 44px);
	z-index: 3;
	font-family: var(--font-dream);
	font-weight: 500;
	font-size: .72rem;
	letter-spacing: .3em;
	color: var(--white);
	writing-mode: vertical-rl;
}

.hero__scroll span {
	display: block;
	padding-bottom: 44px;
	position: relative;
}

.hero__scroll span::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 36px;
	background: linear-gradient(var(--white), transparent);
	animation: hero-scroll-line 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-line {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll span::after { animation: none; }
}

/* ---- Banner (contest intro strip — floats over the fixed media) ------------ */
.banner {
	position: relative;
	background: transparent; /* the shared .media-bg shows through */
	color: var(--white);
	padding-block: clamp(48px, 8vw, 88px);
	text-align: center;
}

.banner__kicker {
	font-family: var(--font-jp-heading);
	font-size: clamp(.9rem, 2.2vw, 1.15rem);
	letter-spacing: .12em;
	color: var(--white);
	font-weight: 700;
	margin-bottom: 14px;
}

.banner__logo {
	margin: 8px auto 0;
	max-width: 200px;
}

/* ---- Event info block (date / venue) — styled like the flyer ------------- */
.event-info {
	max-width: 720px;
	margin: clamp(22px, 4vw, 34px) auto 0;
	padding: clamp(16px, 3vw, 26px) clamp(16px, 3.5vw, 30px);
	background: rgba(9, 10, 22, .62);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius);
	color: var(--white);
	backdrop-filter: blur(2px);
}

.event-info__top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(12px, 2.5vw, 26px);
}

.event-info__year {
	writing-mode: vertical-rl;
	font-family: var(--font-en);
	font-size: clamp(.7rem, 1.6vw, .9rem);
	letter-spacing: .24em;
	line-height: 1;
	opacity: .9;
}

.event-info__date {
	display: flex;
	align-items: baseline;
	line-height: .8;
}

.event-info__md {
	font-family: var(--font-en);
	font-size: clamp(3.2rem, 11vw, 6rem);
	letter-spacing: .01em;
}

.event-info__slash {
	margin: 0 .02em;
}

.event-info__dow {
	font-family: var(--font-jp-heading);
	font-weight: 700;
	font-size: clamp(1rem, 2.6vw, 1.5rem);
	margin-left: .1em;
}

.event-info__free {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	border: 2px solid var(--white);
	padding: clamp(6px, 1.4vw, 10px) clamp(10px, 1.8vw, 16px);
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: clamp(1.2rem, 3.4vw, 1.9rem);
	line-height: 1.06;
	letter-spacing: .04em;
}

.event-info__times {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 148px;
}

.event-info__time {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 5px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.event-info__time:last-child {
	border-bottom: 0;
}

.event-info__time dt {
	font-family: var(--font-jp-heading);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .06em;
	white-space: nowrap;
}

.event-info__time dd {
	margin: 0 0 0 auto;
	font-family: var(--font-en);
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	letter-spacing: .02em;
}

.event-info__venue {
	margin-top: clamp(14px, 2.5vw, 20px);
	padding-top: clamp(12px, 2vw, 16px);
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-family: var(--font-jp-heading);
	font-weight: 700;
	font-size: clamp(1rem, 2.6vw, 1.3rem);
}

.event-info__hall {
	font-size: .82em;
}

.event-info__addr {
	margin-top: 6px;
	font-size: clamp(.78rem, 1.9vw, .9rem);
	color: rgba(255, 255, 255, .85);
}

.banner__flyer {
	max-width: 480px;
	margin: clamp(28px, 5vw, 44px) auto 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.banner__flyer img {
	width: 100%;
	display: block;
}

.banner__video {
	max-width: 720px;
	margin: clamp(28px, 5vw, 44px) auto 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.banner__video .sdc-video {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ink);
}

.banner__video .img-placeholder {
	aspect-ratio: 16 / 9;
}

.banner__instagram {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-weight: 700;
	color: var(--white);
}

.banner__instagram:hover {
	color: var(--blue-light);
}

.ig-icon {
	flex-shrink: 0;
	display: block;
}

/* ---- Concept ---------------------------------------------------------------- */
.concept__grid {
	display: grid;
	gap: 40px;
}

.concept__lead {
	font-size: 1.05rem;
	line-height: 2;
	white-space: pre-line;
}

.concept__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
}

@media (min-width: 860px) {
	.concept__grid {
		grid-template-columns: 1.1fr .9fr;
		align-items: center;
	}
}

/* ---- Card grids (guest / judge / mc) ---------------------------------------- */
.cards {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.section--white .card {
	background: #f7f8fc;
	border-color: #e7e9f5;
}

.card__photo {
	aspect-ratio: 3 / 4;
}

.card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.card__name {
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: 1.3rem;
}

.card__desc {
	font-size: .9rem;
	line-height: 1.9;
	opacity: .9;
}

.card__badge {
	align-self: flex-start;
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--gold);
	color: var(--ink);
}

.cards--single {
	grid-template-columns: minmax(260px, 420px);
	justify-content: center;
}

/* Judge panel: flex so 5 cards centre nicely (3 + 2) instead of an orphan */
.cards--judge {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cards--judge > .card {
	flex: 1 1 280px;
	max-width: 340px;
}

.card__name-sub {
	display: inline-block;
	font-size: .82rem;
	font-weight: 500;
	opacity: .8;
	margin-left: .2em;
}

.card__name-reading {
	font-family: var(--font-jp-body);
	font-weight: 400;
	font-size: .74em;
	opacity: .65;
	margin-left: .3em;
}

.card__awards {
	list-style: none;
	margin: 2px 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: .82rem;
	line-height: 1.6;
	opacity: .9;
}

.card__awards li {
	position: relative;
	padding-left: 1em;
}

.card__awards li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
}

.section-lead {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
	line-height: 2;
}

/* ---- Prize ---------------------------------------------------------------------- */
.prize-total {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .6em;
	text-align: center;
	margin: 0 auto 48px;
}

.prize-total__label {
	font-family: var(--font-jp-body);
	font-weight: 700;
	font-size: clamp(.95rem, 2vw, 1.1rem);
	letter-spacing: .05em;
	color: var(--white);
	opacity: .85;
}

.prize-total__amount {
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: clamp(3rem, 9vw, 4.5rem);
	line-height: 1;
	color: var(--gold);
	text-shadow: 0 2px 18px rgba(248,182,43,.35);
}

.prize-total__unit {
	font-size: .38em;
	font-weight: 700;
	margin-left: .1em;
}

.prize-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: 36px;
}

.prize-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--radius);
	padding: 32px 20px 24px;
	background: rgba(255,255,255,.03);
	text-align: center;
	transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.prize-item:hover {
	transform: translateY(-4px);
}

.prize-item__rank {
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: .8rem;
	letter-spacing: .1em;
	color: rgba(255,255,255,.5);
}

.prize-item__title {
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: clamp(1.1rem, 2.6vw, 1.35rem);
	color: var(--white);
}

.prize-item--gold {
	border-color: var(--gold);
	background: linear-gradient(160deg, rgba(248,182,43,.18), rgba(248,182,43,.04));
}

.prize-item--gold .prize-item__rank {
	color: var(--gold);
}

.prize-item--gold .prize-item__title {
	color: var(--gold);
	font-size: clamp(1.25rem, 3vw, 1.55rem);
}

.prize-item--silver {
	border-color: #d7dde6;
	background: linear-gradient(160deg, rgba(215,221,230,.18), rgba(215,221,230,.04));
}

.prize-item--silver .prize-item__rank {
	color: #d7dde6;
}

.prize-item--silver .prize-item__title {
	color: #eef1f5;
}

.prize-item--special .prize-item__rank {
	color: rgba(255,255,255,.6);
}

.prize-note {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.9;
	opacity: .85;
}

/* ---- Outline ------------------------------------------------------------------- */
.outline-dl {
	display: grid;
	gap: 0;
	max-width: 780px;
	margin: 0 auto 40px;
	border-top: 1px solid #e7e9f5;
}

.outline-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 16px;
	padding: 16px 4px;
	border-bottom: 1px solid #e7e9f5;
}

.outline-row dt {
	font-family: var(--font-jp-heading);
	font-weight: 700;
	color: var(--blue);
}

.outline-cta {
	text-align: center;
}

@media (max-width: 560px) {
	.outline-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ---- News ------------------------------------------------------------------------ */
.news-list {
	max-width: 800px;
	margin: 0 auto 40px;
	display: grid;
	gap: 4px;
}

.news-item {
	display: flex;
	gap: 24px;
	align-items: baseline;
	padding: 20px 4px;
	border-bottom: 1px solid #e7e9f5;
}

.news-item__date {
	font-family: var(--font-en);
	color: var(--blue);
	white-space: nowrap;
}

.news-item__title {
	font-weight: 500;
}

.news-item:hover .news-item__title {
	color: var(--blue);
}

.news-empty {
	text-align: center;
	opacity: .7;
	padding: 20px 0 40px;
}

.section-cta {
	text-align: center;
}

/* ---- Sponsor ------------------------------------------------------------------------ */
.sponsor-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: center;
}

@media (min-width: 640px) {
	.sponsor-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sponsor-grid .img-placeholder {
	aspect-ratio: 3 / 2;
}

/* ---- Coming soon (divisions / result) ------------------------------------------------ */
.coming-soon {
	text-align: center;
	margin-top: 32px;
}

.coming-soon__badge {
	display: inline-block;
	font-family: var(--font-en);
	font-style: italic;
	font-size: 1.6rem;
	letter-spacing: .05em;
	color: var(--blue);
	border: 2px solid var(--blue);
	border-radius: 999px;
	padding: 8px 32px;
	margin-bottom: 12px;
}

.coming-soon p {
	opacity: .75;
}

/* ---- Access --------------------------------------------------------------------------- */
.access-grid {
	display: grid;
	gap: 40px;
}

.access-info dt {
	font-weight: 700;
	color: var(--blue-light);
	font-size: .85rem;
	letter-spacing: .05em;
	margin-top: 20px;
}

.access-info dd {
	font-size: 1.05rem;
	margin-top: 4px;
}

.access-map iframe {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: var(--radius);
}

@media (min-width: 860px) {
	.access-grid {
		grid-template-columns: .8fr 1.2fr;
	}
}

/* ---- Footer -------------------------------------------------------------------------- */
.site-footer {
	background: var(--ink);
	color: var(--white);
	padding: 56px 20px 32px;
	text-align: center;
}

.site-footer__inner {
	max-width: var(--container-w);
	margin-inline: auto;
	display: grid;
	gap: 20px;
	justify-items: center;
}

.site-footer__logo-img {
	max-height: 44px;
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	font-size: .9rem;
}

.site-footer__instagram {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
}

.site-footer__org,
.site-footer__copyright {
	font-size: .8rem;
	opacity: .7;
}

/* ---- Image placeholder ----------------------------------------------------------------- */
.img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #d8dae4, #d8dae4 10px, #ccced9 10px, #ccced9 20px);
	color: #565873;
	border-radius: var(--radius);
	text-align: center;
	padding: 12px;
}

.img-placeholder__label {
	font-size: .75rem;
	font-family: monospace;
	background: rgba(255,255,255,.7);
	padding: 3px 10px;
	border-radius: 3px;
}

/* ---- TODO flag -------------------------------------------------------------------------- */
.todo-flag {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	color: var(--ink);
	background: var(--gold);
	padding: 2px 8px;
	border-radius: 3px;
	white-space: nowrap;
}

/* ---- Scroll fade-in ----------------------------------------------------------------------- */
.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Section header spacing for anchor targets (fixed header offset) ------------------------ */
section[id] {
	scroll-margin-top: 80px;
}

/* ---- News archive / single -------------------------------------------------------------------- */
.news-list-full {
	display: grid;
	gap: 4px;
}

.news-list-item {
	padding: 24px 4px;
	border-bottom: 1px solid #e7e9f5;
}

.news-list-item__link {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: baseline;
}

.news-list-item__date {
	font-family: var(--font-en);
	color: var(--blue);
	white-space: nowrap;
}

.news-list-item__title {
	font-weight: 700;
}

.news-list-item:hover .news-list-item__title {
	color: var(--blue);
}

.news-list-item__excerpt {
	margin-top: 8px;
	font-size: .9rem;
	opacity: .8;
}

.news-pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.news-pagination .page-numbers {
	padding: 8px 14px;
	border-radius: var(--radius);
	border: 1px solid #e7e9f5;
}

.news-pagination .page-numbers.current {
	background: var(--navy);
	color: var(--white);
}

.news-single__date {
	font-family: var(--font-en);
	color: var(--blue);
}

.news-single__title {
	font-family: var(--font-jp-heading);
	font-weight: 900;
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	margin: 8px 0 24px;
}

.news-single__thumb {
	margin-bottom: 24px;
	border-radius: var(--radius);
	overflow: hidden;
}

.news-single__content {
	line-height: 2;
}

.news-single__content p {
	margin-bottom: 1.4em;
}

/* ---- Floating entry button (fixed bottom-right, gentle bobbing) ------------- */
.floating-entry {
	position: fixed;
	right: clamp(14px, 2.5vw, 28px);
	bottom: clamp(14px, 2.5vw, 28px);
	z-index: 900;
	display: block;
	width: clamp(82px, 13vw, 104px);
	height: clamp(82px, 13vw, 104px);
	transition: transform .2s ease;
}

.floating-entry__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--gold);
	color: var(--ink);
	text-align: center;
	box-shadow: 0 10px 26px rgba(10, 26, 36, .35);
	animation: floating-bob 2.8s ease-in-out infinite;
}

.floating-entry__label {
	font-family: var(--font-en);
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	letter-spacing: .04em;
	line-height: 1;
}

.floating-entry__sub {
	font-family: var(--font-jp-heading);
	font-weight: 700;
	font-size: clamp(.62rem, 1.6vw, .72rem);
	letter-spacing: .04em;
}

.floating-entry:hover,
.floating-entry:focus-visible {
	transform: scale(1.06);
}

@keyframes floating-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.floating-entry__inner { animation: none; }
}

/* ---- Preloader (logo reveal → progress → panel curtain) -------------------- */
html:has(.preloader:not(.is-done)) {
	overflow: hidden;
}

.preloader {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.preloader__panels {
	position: absolute;
	inset: 0;
	display: flex;
}

.preloader__panels span {
	flex: 1 1 20%;
	background: var(--navy);
	will-change: transform;
	transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}

.preloader.is-done .preloader__panels span {
	transform: translateY(-102%);
}

.preloader.is-done .preloader__panels span:nth-child(1) { transition-delay: 0s; }
.preloader.is-done .preloader__panels span:nth-child(2) { transition-delay: .07s; }
.preloader.is-done .preloader__panels span:nth-child(3) { transition-delay: .14s; }
.preloader.is-done .preloader__panels span:nth-child(4) { transition-delay: .21s; }
.preloader.is-done .preloader__panels span:nth-child(5) { transition-delay: .28s; }

.preloader__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 4vw, 34px);
	transition: opacity .35s ease, transform .45s ease;
}

.preloader.is-done .preloader__inner {
	opacity: 0;
	transform: scale(1.04);
}

.preloader__glow {
	position: absolute;
	top: 44%;
	left: 50%;
	width: min(84vw, 660px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(21, 116, 177, .5) 0%, rgba(13, 43, 64, 0) 62%);
	opacity: 0;
	animation: pre-glow 1.5s ease .2s forwards;
	pointer-events: none;
}

@keyframes pre-glow {
	to { opacity: 1; }
}

.preloader__logo {
	position: relative;
	width: min(64vw, 400px);
	animation: pre-logo 1s cubic-bezier(.2, .7, .2, 1) both;
}

.preloader__logo img {
	width: 100%;
	height: auto;
	display: block;
}

@keyframes pre-logo {
	0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
	60%  { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

.preloader__bar {
	position: relative;
	width: min(64vw, 320px);
	height: 2px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
	border-radius: 2px;
}

.preloader__bar-fill {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, var(--blue-light), var(--gold));
}

.preloader__count {
	font-family: var(--font-dream);
	font-weight: 700;
	color: var(--white);
	font-size: clamp(1rem, 3vw, 1.3rem);
	letter-spacing: .14em;
}

.preloader__count i {
	font-style: normal;
	opacity: .55;
	margin-left: 2px;
	font-size: .7em;
}

@media (prefers-reduced-motion: reduce) {
	.preloader__logo,
	.preloader__glow {
		animation: none;
		opacity: 1;
		clip-path: none;
	}
	.preloader__panels span {
		transition-duration: .01ms;
	}
}