@layer reset, base, layout, component;

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body, h1, h2, h3, p { margin: 0; }
	img { display: block; height: auto; max-width: 100%; }
}

@layer base {
	:root { --color-ink: #171717; --color-paper: #fffdf8; --color-accent: #8d174c; --color-accent-contrast: #ffffff; --line: #d5cec3; --space: clamp(1rem, 3vw, 2rem); --measure: 72rem; }
	html { scroll-behavior: smooth; }
	body { background: var(--color-paper); color: var(--color-ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 1rem; line-height: 1.7; }
	a { color: var(--color-accent); text-decoration-thickness: .12em; text-underline-offset: .15em; }
	a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}
	.skip-link { left: var(--space); position: absolute; top: -5rem; z-index: 2; }
	.skip-link:focus { background: #fff; top: var(--space); }
}

@layer layout {
	.site-header__inner, .site-footer__inner, .section__inner, .hero__inner { margin-inline: auto; max-width: var(--measure); padding: var(--space); }
	.site-header, .site-footer { border-block: 1px solid var(--line); }
	.site-header__inner { align-items: center; display: flex; gap: var(--space); justify-content: space-between; }
	.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
	.hero { padding-block: clamp(4rem, 14vw, 10rem); }
}

@layer component {
	.site-title { color: inherit; font-weight: 700; text-decoration: none; }
	.eyebrow { color: var(--color-accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
	.hero h1 { font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1.1; margin-block: .2em; }
	.hero__copy { font-size: clamp(1.125rem, 2vw, 1.5rem); max-width: 38rem; }
	.section--accent { background: #f5e9ed; }
	.button { background: var(--color-accent); color: var(--color-accent-contrast); display: inline-block; margin-top: 1rem; padding: .75rem 1rem; text-decoration: none; }
	.button--secondary { background: var(--color-ink); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Front-page maintenance screen */
.maintenance-page {
	min-height: 100vh;
}
.maintenance {
	align-items: center;
	display: grid;
	min-height: 100vh;
	padding: clamp(1.25rem, 5vw, 4rem);
}
.maintenance-card {
	--corner-pop: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--line);
	box-shadow: .75rem .75rem 0 rgb(0 0 0 / 32%);
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin-inline: auto;
	max-width: 42rem;
	overflow: hidden;
	padding: clamp(1.5rem, 6vw, 3.5rem);
	position: relative;
	width: 100%;
}
.maintenance-card::after {
	background: var(--corner-pop);
	content: "";
	height: .25rem;
	inset: 0 0 auto;
	position: absolute;
}
.maintenance-card__heading {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}
.maintenance-card__number,
.maintenance-card__site {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .75rem;
	letter-spacing: .08em;
}
.maintenance-card__number {
	color: var(--corner-pop);
}
.maintenance-card__site {
	color: var(--color-muted);
	text-align: right;
}
.maintenance-card__visual {
	color: var(--corner-pop);
	display: grid;
	filter: drop-shadow(.4rem .4rem 0 rgb(0 0 0 / 45%));
	justify-items: start;
	position: relative;
	transform: rotate(-2deg);
	width: fit-content;
}
.maintenance-card__visual::before {
	border: 2px solid currentcolor;
	content: "";
	inset: -.65rem -.8rem;
	position: absolute;
	transform: skew(-4deg);
}
.maintenance-card__visual::after {
	background: radial-gradient(circle, currentcolor 0 .12rem, transparent .14rem) 0 0 / .65rem .65rem;
	content: "";
	height: 3rem;
	opacity: .38;
	position: absolute;
	right: -3.75rem;
	top: -.9rem;
	width: 3rem;
}
.maintenance-card__visual strong {
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: clamp(3.75rem, 15vw, 7.5rem);
	font-style: italic;
	letter-spacing: -.055em;
	line-height: .72;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}
.maintenance-card__visual span {
	background: var(--corner-pop);
	color: #080808;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .16em;
	padding: .4rem .5rem;
	position: absolute;
	right: -1rem;
	top: calc(100% + .15rem);
	white-space: nowrap;
	z-index: 1;
}
.maintenance-card__content {
	border-left: 2px solid var(--corner-pop);
	padding-left: clamp(1rem, 3vw, 1.5rem);
}
.maintenance-card__content h1 {
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	letter-spacing: -.02em;
	line-height: 1.3;
}
.maintenance-card__content p {
	color: var(--color-muted);
	margin-top: .65rem;
}
@media (max-width: 30rem) {
	.maintenance-card__visual::after { display: none; }
	.maintenance-card__visual strong { font-size: clamp(3rem, 18vw, 4.75rem); }
}

.corner-list { display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: var(--space); }
.corner-card { border-top: 3px solid var(--color-accent); display: grid; gap: .75rem; padding-top: 1rem; }
.corner-card h3 { font-size: 1.25rem; line-height: 1.4; }
.text-link { font-weight: 700; }
.status { color: #665c52; font-size: .875rem; }

/* Content and Contact Form 7 */
.content { margin-inline: auto; max-width: 48rem; }
.content > * + * { margin-top: 1.25rem; }
.wpcf7 { margin-top: 2rem; }
.wpcf7-form { display: grid; gap: 1.25rem; max-width: 42rem; }
.wpcf7-form label { display: grid; font-weight: 700; gap: .5rem; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 select, .wpcf7 textarea { background: #fff; border: 1px solid var(--line); border-radius: 0; color: var(--color-ink); font: inherit; max-width: 100%; padding: .75rem; width: 100%; }
.wpcf7 textarea { min-height: 10rem; resize: vertical; }
.wpcf7 input[type="checkbox"] { accent-color: var(--color-accent); block-size: 1.2rem; inline-size: 1.2rem; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 input[type="submit"] { appearance: none; background: var(--color-accent); border: 2px solid var(--color-accent); color: var(--color-accent-contrast); cursor: pointer; font: inherit; font-weight: 700; padding: .8rem 1.25rem; }
.wpcf7 input[type="submit"]:hover { background: #681039; border-color: #681039; }
.wpcf7-not-valid-tip { color: #a20b0b; font-weight: 700; margin-top: .35rem; }
.wpcf7-response-output { margin: 0 !important; }

@media (max-width: 47.99rem) {
  .site-header__inner { align-items: flex-start; flex-direction: column; }
  .site-header nav ul { display: flex; flex-wrap: wrap; gap: .75rem 1rem; list-style: none; margin: 0; padding: 0; }
  .hero { padding-block: 4rem; }
  .hero__media--has-mobile-image > picture > img { aspect-ratio: 4 / 5; }
  .corner-list { grid-template-columns: 1fr; }
}

@media (min-width: 48rem) {
  .corner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corner-card { min-height: 15rem; }
  .wpcf7-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpcf7-form > label:nth-of-type(4), .wpcf7-form > label:nth-of-type(5), .wpcf7-form > p, .wpcf7-response-output { grid-column: 1 / -1; }
}

/* Episode detail */
.episode { max-width: 56rem; }
.episode__header { border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 5vw, 4rem); padding-bottom: 1.5rem; }
.episode__header h1 { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.2; margin-top: .25rem; }
.episode__lead { font-size: 1.125rem; margin-top: 1rem; }
.episode__player, .episode__video, .episode__corners, .episode__next-theme { margin-top: clamp(2rem, 5vw, 4rem); }
.episode__player { background: #f5e9ed; padding: var(--space); }
.episode__player audio { display: block; max-width: 100%; width: 100%; }
.episode__video iframe { aspect-ratio: 16 / 9; border: 0; height: auto; max-width: 100%; width: 100%; }
.entry-content > * + * { margin-top: 1.25rem; }
.episode__corners ul { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.episode__corners li { border: 1px solid var(--line); padding: .35rem .65rem; }
.episode__next-theme { border-left: .35rem solid var(--color-accent); padding-left: var(--space); }
.episode__navigation { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 4rem; }

/* Visual placeholders */
.hero__media, .episode__media { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero__media > img, .hero__media > picture > img, .episode__media > img { display: block; height: auto; max-width: 100%; width: 100%; }
.media-placeholder { align-items: center; aspect-ratio: 16 / 8; background: linear-gradient(135deg, #31111f, #8d174c 55%, #e9c2cf); color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 20rem; overflow: hidden; padding: var(--space); position: relative; text-align: center; }
.media-placeholder::before, .media-placeholder::after { border: 1px solid rgb(255 255 255 / 35%); content: ""; height: 150%; position: absolute; transform: rotate(35deg); width: 16%; }
.media-placeholder::before { left: 17%; }
.media-placeholder::after { right: 17%; }
.media-placeholder span, .media-placeholder small { position: relative; z-index: 1; }
.media-placeholder span { font-size: clamp(1.25rem, 3vw, 2.25rem); font-weight: 700; }
.media-placeholder small { letter-spacing: .12em; margin-top: .5rem; }
@media (max-width: 47.99rem) { .media-placeholder { aspect-ratio: 4 / 3; min-height: 18rem; } }

/* Personalities */
.personality-list { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: var(--space); }
.personality-card { align-items: center; border-top: 1px solid var(--line); display: grid; gap: var(--space); padding-top: var(--space); }
.personality-card__image img { display: block; height: auto; max-width: 100%; width: 100%; }
.personality-card__body { max-width: 38rem; }
.personality-card__body h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: .75rem; }
.personality-card__body p + p { margin-top: .75rem; }
@media (min-width: 48rem) { .personality-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .personality-card { align-items: start; grid-template-rows: auto 1fr; } .personality-card__image { aspect-ratio: 4 / 5; overflow: hidden; } .personality-card__image img { height: 100%; object-fit: cover; } }

/* Home-page hierarchy */
.home--broadcast, .home--teaser { display: flex; flex-direction: column; }
.hero { order: 1; }
.home--broadcast > section[aria-labelledby="latest-episode-heading"] { order: 2; }
.home--broadcast > section[aria-labelledby="message-heading"] { order: 3; }
.home--broadcast > .personalities { order: 4; }
.home--broadcast > section[aria-labelledby="corners-heading"] { order: 5; }
.home--teaser > .teaser-video { order: 2; }
.home--teaser > .personalities { order: 3; }
.home--teaser > section[aria-labelledby="corners-heading"] { order: 4; }
.home--teaser > section[aria-labelledby="message-heading"] { order: 5; }
.section h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; }
.episode-card { border-top: 3px solid var(--color-accent); display: grid; gap: .75rem; max-width: 46rem; padding: clamp(1.25rem, 3vw, 2rem) 0; }
.episode-card h3 { font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.35; }
.hero__copy { margin-top: 1rem; }
@media (min-width: 64rem) { .hero__inner { max-width: 80rem; } .hero__media { margin-inline: auto; max-width: 72rem; } .corner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .corner-card { min-height: 13rem; } }

.personality-card__links { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.personality-card__links a { border-bottom: 2px solid currentcolor; font-weight: 700; text-decoration: none; }

/* Cool dark visual direction */
@layer base {
	:root {
		--color-ink: #f4f4f0;
		--color-paper: #080808;
		--color-surface: #111213;
		--color-surface-raised: #181a1c;
		--color-muted: #a3a7aa;
		--color-accent: #b8ff2c;
		--color-accent-contrast: #080808;
		--line: #303235;
	}

	body {
		background:
			radial-gradient(circle at 85% 5%, rgb(184 255 44 / 8%), transparent 22rem),
			var(--color-paper);
		color: var(--color-ink);
	}

	a { color: inherit; }
}

@layer layout {
	.site-header {
		background: rgb(8 8 8 / 88%);
		border-block: 0 1px solid var(--line);
		position: relative;
		z-index: 10;
	}

	.site-footer {
		background: #050505;
		border-color: var(--line);
		color: var(--color-muted);
	}

	.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
	.section + .section { border-top: 1px solid var(--line); }
	.hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(5rem, 10vw, 8rem); }
}

@layer component {
	.site-title {
		font-size: .78rem;
		letter-spacing: .18em;
		text-transform: uppercase;
	}

	.site-header nav ul,
	.site-footer ul {
		display: flex;
		flex-wrap: wrap;
		gap: .75rem 1.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-header nav a,
	.site-footer a {
		color: var(--color-muted);
		font-size: .82rem;
		text-decoration: none;
	}

	.hero__inner { position: relative; }
	.hero__intro { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
	.hero__media {
		border: 1px solid var(--line);
		margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
		overflow: hidden;
		position: relative;
	}
	.hero__media::after {
		background: linear-gradient(135deg, transparent 65%, rgb(184 255 44 / 10%));
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}
	.hero__media > picture { display: block; }
	.hero__media > img, .hero__media > picture > img {
		aspect-ratio: 16 / 8;
		object-fit: cover;
	}
	.countdown {
		align-items: center;
		background:
			linear-gradient(90deg, rgb(184 255 44 / 7%), transparent 35%),
			#0c0d0d;
		border-top: 1px solid var(--line);
		display: grid;
		gap: clamp(1rem, 3vw, 2.5rem);
		grid-template-columns: minmax(6rem, .65fr) 2fr;
		padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem);
		position: relative;
		z-index: 1;
	}
	.countdown::before {
		background: var(--color-accent);
		block-size: .35rem;
		box-shadow: 0 0 1.25rem rgb(184 255 44 / 55%);
		content: "";
		inline-size: .35rem;
		inset: 50% auto auto 0;
		position: absolute;
		transform: translateY(-50%);
	}
	.countdown__label {
		color: var(--color-accent);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: clamp(.68rem, 1.2vw, .82rem);
		font-weight: 700;
		letter-spacing: .22em;
		white-space: nowrap;
	}
	.countdown__display {
		position: relative;
	}
	.countdown__units {
		align-items: start;
		display: grid;
		grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	}
	.countdown__unit {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		min-width: 0;
	}
	.countdown__unit strong {
		font-size: clamp(1.75rem, 5vw, 4.5rem);
		font-weight: 500;
		letter-spacing: -.08em;
	}
	.countdown__unit small {
		color: var(--color-muted);
		font-size: clamp(.55rem, 1vw, .68rem);
		letter-spacing: .16em;
		margin-top: .55rem;
	}
	.countdown__separator {
		color: #55595c;
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: clamp(1.5rem, 4vw, 3.5rem);
		line-height: 1;
	}
	.countdown--complete .countdown__label { color: var(--color-ink); }
	.countdown--pending .countdown__units {
		filter: blur(.6px);
		opacity: .22;
	}
	.countdown__coming-soon {
		align-items: center;
		background: var(--color-accent);
		box-shadow: .35rem .35rem 0 rgb(0 0 0 / 65%);
		color: var(--color-accent-contrast);
		display: flex;
		gap: clamp(.65rem, 2vw, 1.25rem);
		inset: 50% auto auto 50%;
		justify-content: center;
		max-width: 36rem;
		padding: clamp(.55rem, 1.5vw, .8rem) clamp(.85rem, 2.5vw, 1.5rem);
		position: absolute;
		text-align: left;
		transform: translate(-50%, -50%) rotate(-3deg);
		width: max-content;
		z-index: 1;
	}
	.countdown__coming-soon strong {
		border-right: 1px solid currentcolor;
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: clamp(.78rem, 1.5vw, 1rem);
		letter-spacing: .15em;
		padding-right: clamp(.65rem, 2vw, 1.25rem);
		white-space: nowrap;
	}
	.countdown__coming-soon span {
		font-size: clamp(.68rem, 1.2vw, .82rem);
		font-weight: 700;
		line-height: 1.55;
		white-space: nowrap;
	}
	.hero-recruitment {
		background: #0c0d0d;
		border-top: 1px solid var(--line);
		display: grid;
		gap: 1rem;
		grid-template-columns: minmax(7rem, .45fr) 2fr;
		padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
		position: relative;
		z-index: 1;
	}
	.hero-recruitment__heading {
		align-self: center;
		display: grid;
		gap: .2rem;
	}
	.hero-recruitment__heading p {
		color: var(--color-accent);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .16em;
	}
	.hero-recruitment__heading strong {
		font-size: clamp(.9rem, 1.5vw, 1.05rem);
		letter-spacing: .06em;
	}
	.hero-recruitment__cards {
		display: grid;
		gap: .65rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.hero-recruitment__card {
		--corner-pop: var(--color-accent);
		align-items: center;
		background: var(--color-surface-raised);
		border: 1px solid #3a3d3f;
		border-left: .25rem solid var(--corner-pop);
		color: var(--color-ink);
		display: grid;
		gap: .3rem .65rem;
		grid-template-columns: 1fr auto;
		min-height: 7rem;
		padding: .75rem .8rem;
		text-decoration: none;
		transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
	}
	.hero-recruitment__card--free-ota { --corner-pop: #b8ff2c; }
	.hero-recruitment__card--why { --corner-pop: #59d8ff; }
	.hero-recruitment__card--decode { --corner-pop: #ff9c50; }
	.hero-recruitment__card--love-sos { --corner-pop: #ff69b4; }
	.hero-recruitment__card:hover {
		background: #202326;
		border-color: var(--corner-pop);
		transform: translateY(-2px);
	}
	.hero-recruitment__status {
		color: var(--corner-pop);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: .58rem;
		font-weight: 700;
		letter-spacing: .12em;
	}
	.hero-recruitment__card strong {
		font-size: clamp(.78rem, 1.25vw, .95rem);
		line-height: 1.35;
	}
	.hero-recruitment__copy {
		color: var(--color-muted);
		display: -webkit-box;
		font-size: .7rem;
		grid-column: 1;
		line-height: 1.55;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.hero-recruitment__arrow {
		align-items: center;
		border: 1px solid var(--corner-pop);
		border-radius: 50%;
		color: var(--corner-pop);
		display: flex;
		font-size: .75rem;
		grid-column: 2;
		grid-row: 1 / 4;
		height: 1.75rem;
		justify-content: center;
		transition: transform .2s ease;
		width: 1.75rem;
	}
	.hero-recruitment__card:hover .hero-recruitment__arrow { transform: translateY(.2rem); }
	.hero h1 {
		font-size: clamp(1.75rem, 4vw, 3.5rem);
		font-weight: 650;
		letter-spacing: -.035em;
		line-height: 1.08;
		margin-block: 0;
		max-width: 18ch;
	}
	.hero__copy {
		color: #d4d6d2;
		font-size: clamp(1rem, 1.6vw, 1.25rem);
		margin-top: 1.25rem;
	}
	.hero__copy--below-media {
		border-left: 2px solid var(--color-accent);
		margin: 0;
		max-width: 52rem;
		padding-left: clamp(1rem, 2vw, 1.5rem);
	}
	.hero__copy + p { color: var(--color-muted); margin-top: .5rem; }
	.home--teaser .hero__title {
		color: var(--color-muted);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .2em;
		line-height: 1.4;
		max-width: none;
		text-transform: uppercase;
	}

	.eyebrow {
		color: var(--color-accent);
		font-size: .7rem;
		letter-spacing: .18em;
	}

	.button {
		align-items: center;
		background: var(--color-accent);
		border: 1px solid var(--color-accent);
		border-radius: 999px;
		color: var(--color-accent-contrast);
		display: inline-flex;
		font-size: .82rem;
		font-weight: 750;
		gap: 1rem;
		justify-content: space-between;
		letter-spacing: .04em;
		min-width: 10rem;
		padding: .78rem 1.15rem;
		transition: background-color .2s ease, color .2s ease, transform .2s ease;
	}
	.button:hover {
		background: transparent;
		color: var(--color-accent);
		transform: translateY(-2px);
	}
	.button--secondary { background: transparent; color: var(--color-ink); }

	.section--accent { background: var(--color-surface); }
	.episode-card { border-color: var(--color-accent); }
}

.media-placeholder {
	background:
		linear-gradient(120deg, transparent 48%, rgb(184 255 44 / 18%) 49%, transparent 51%),
		radial-gradient(circle at 65% 40%, #303725, #111 32%, #050505 70%);
}
.media-placeholder::before,
.media-placeholder::after { border-color: rgb(184 255 44 / 20%); }
.section h2 {
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	letter-spacing: -.035em;
}
.section h2::after {
	color: var(--color-accent);
	content: " /";
}

/* Teaser video loads the YouTube player only after an explicit play action. */
.teaser-video {
	background:
		linear-gradient(145deg, rgb(184 255 44 / 4%), transparent 45%),
		var(--color-surface);
}
.teaser-video__frame {
	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid var(--line);
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	max-width: 64rem;
	overflow: hidden;
	position: relative;
}
.teaser-video__trigger {
	appearance: none;
	background: #000;
	border: 0;
	color: var(--color-ink);
	cursor: pointer;
	display: block;
	height: 100%;
	padding: 0;
	position: relative;
	width: 100%;
}
.teaser-video__trigger::after {
	background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 45%));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}
.teaser-video__trigger img {
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease, transform .3s ease;
	width: 100%;
}
.teaser-video__trigger:hover img {
	opacity: .82;
	transform: scale(1.01);
}
.teaser-video__play {
	background: var(--color-accent);
	border-radius: 50%;
	box-shadow: 0 0 2rem rgb(184 255 44 / 30%);
	height: clamp(3.5rem, 8vw, 5.5rem);
	inset: 50% auto auto 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
	width: clamp(3.5rem, 8vw, 5.5rem);
	z-index: 1;
}
.teaser-video__play::after {
	border-block: .65rem solid transparent;
	border-left: 1rem solid var(--color-accent-contrast);
	content: "";
	inset: 50% auto auto 53%;
	position: absolute;
	transform: translate(-50%, -50%);
}
.teaser-video__trigger:hover .teaser-video__play {
	transform: translate(-50%, -50%) scale(1.06);
}
.teaser-video__frame iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}
.teaser-video__external {
	margin-top: 1rem;
	max-width: 64rem;
	text-align: right;
}

/* Personalities are self-contained profile panels. */
.personality-list { gap: clamp(1.25rem, 3vw, 2rem); }
.personality-card {
	align-items: stretch;
	background: linear-gradient(145deg, var(--color-surface-raised), #0e0f10);
	border: 1px solid var(--line);
	gap: 0;
	overflow: hidden;
	padding: 0;
}
.personality-card__image { background: #0d0d0d; }
.personality-card__body {
	display: flex;
	flex-direction: column;
	max-width: none;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.personality-card__body h3 {
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	letter-spacing: -.03em;
	margin: .4rem 0 1rem;
}
.personality-card__profile { color: #c4c7c8; }
.personality-card__links {
	gap: .55rem;
	margin-top: auto;
	padding-top: 2rem;
}
.personality-card__links a {
	border: 1px solid #494c4f;
	border-radius: 999px;
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .04em;
	padding: .55rem .85rem;
	transition: border-color .2s ease, color .2s ease;
}
.personality-card__links a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Each corner reads as one complete introduction, without a detail-page jump. */
.corner-list {
	grid-template-columns: 1fr;
	gap: 1rem;
}
.corner-card { scroll-margin-top: 2rem; }
.corner-card {
	--corner-pop: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--line);
	display: grid;
	gap: 1.25rem;
	min-height: 0;
	overflow: hidden;
	padding: clamp(1.4rem, 4vw, 2.25rem);
	position: relative;
	transition: border-color .2s ease, transform .2s ease;
}
.corner-card:hover {
	border-color: var(--corner-pop);
	transform: translateY(-2px);
}
.corner-card--free-ota { --corner-pop: #b8ff2c; }
.corner-card--why { --corner-pop: #59d8ff; }
.corner-card--decode { --corner-pop: #ff9c50; }
.corner-card--love-sos { --corner-pop: #ff69b4; }
.corner-card__heading {
	align-items: baseline;
	display: flex;
	gap: 1rem;
}
.corner-card__number {
	color: var(--corner-pop);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .75rem;
}
.corner-card h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	letter-spacing: -.02em;
}
.corner-card__visual {
	align-items: center;
	align-self: start;
	color: var(--corner-pop);
	display: flex;
	filter: drop-shadow(.35rem .35rem 0 rgb(0 0 0 / 45%));
	justify-self: start;
	position: relative;
	transform: rotate(-2deg);
}
.corner-card__visual::before,
.corner-card__visual::after {
	content: "";
	pointer-events: none;
	position: absolute;
}
.corner-card__visual::before {
	border: 2px solid currentcolor;
	inset: -.45rem -.6rem;
	transform: skew(-4deg);
}
.corner-card__visual::after {
	background:
		radial-gradient(circle, currentcolor 0 .12rem, transparent .14rem)
		0 0 / .65rem .65rem;
	height: 2.5rem;
	opacity: .38;
	right: -3.25rem;
	top: -.8rem;
	width: 2.5rem;
}
.corner-card__visual strong {
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: clamp(2.7rem, 8vw, 5.5rem);
	font-style: italic;
	letter-spacing: -.055em;
	line-height: .82;
	text-transform: uppercase;
}
.corner-card__visual span {
	background: var(--corner-pop);
	color: #080808;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .16em;
	padding: .35rem .45rem;
	position: absolute;
	right: -.9rem;
	top: calc(100% - .2rem);
	white-space: nowrap;
}
.corner-card--why .corner-card__visual { transform: rotate(2deg); }
.corner-card--why .corner-card__visual::before { border-radius: 50%; inset: -.65rem -1rem; transform: none; }
.corner-card--decode .corner-card__visual::before {
	box-shadow: .55rem .55rem 0 -2px var(--color-surface), .55rem .55rem 0 var(--corner-pop);
}
.corner-card--love-sos .corner-card__visual { transform: rotate(-4deg); }
.corner-card--love-sos .corner-card__visual::before { border-radius: 1.5rem; }
.corner-card__content { color: #c4c7c8; }
.corner-card__content > * + * { margin-top: .75rem; }
.corner-card__recruitment {
	border-left: 2px solid var(--corner-pop);
	color: var(--color-ink);
	font-size: .9rem;
	padding-left: 1rem;
}
.button--message { margin-top: auto; width: fit-content; }
.status {
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--color-muted);
	font-size: .75rem;
	padding: .45rem .75rem;
	width: fit-content;
}

/* Dark contact form */
.content { max-width: 52rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	background: var(--color-surface);
	border-color: #474a4d;
	color: var(--color-ink);
}
.wpcf7 input[type="submit"] {
	background: var(--color-accent);
	border-color: var(--color-accent);
	border-radius: 999px;
	color: var(--color-accent-contrast);
}
.wpcf7 input[type="submit"]:hover {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

@media (min-width: 48rem) {
	.personality-card { grid-template-rows: auto 1fr; }
	.corner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.corner-card__visual strong { font-size: clamp(3.25rem, 6vw, 5.5rem); }
}

@media (max-width: 47.99rem) {
	.countdown {
		gap: .8rem;
		grid-template-columns: 1fr;
		padding-block: 1rem 1.25rem;
	}
	.countdown__label { padding-left: .2rem; }
	.countdown__unit strong { font-size: clamp(1.55rem, 9vw, 2.6rem); }
	.countdown__separator { font-size: clamp(1.4rem, 7vw, 2.2rem); }
	.countdown__coming-soon {
		gap: .5rem;
		padding: .5rem .65rem;
	}
	.countdown__coming-soon strong {
		font-size: clamp(.62rem, 2.8vw, .76rem);
		letter-spacing: .1em;
		padding-right: .5rem;
	}
	.countdown__coming-soon span {
		font-size: clamp(.58rem, 2.7vw, .72rem);
	}
	.hero-recruitment {
		grid-template-columns: 1fr;
	}
	.hero-recruitment__heading {
		align-items: baseline;
		display: flex;
		gap: .75rem;
	}
	.hero-recruitment__cards { grid-template-columns: 1fr; }
	.hero-recruitment__card { min-height: 0; }
}

@media (min-width: 64rem) {
	.corner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.corner-card { min-height: 22rem; }
}