/* Home page (/). Loaded only on pages that list it in `extraCss`, after
   the shared sheets. The home-only components: hero, gallery, newsletter
   and form fields, community strip. */

/* ---------- Image pipeline wrappers ----------
   The image pipeline wraps every <img> in <picture>; these rules size the
   <img> itself (height: 100%), so the wrapper must not take a box
   (the trailer and studio-band ones are in components.css). */
:where(.hero__art, .hero__title, .shot) picture { display: contents; }

/* ---------- Trailer section ---------- */
.trailer-wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.trailer__duration .stand-in { margin-top: 2px; }

/* ---------- 7. Home hero ---------- */
.hero {
	position: relative;
	background: var(--c-bg);
	padding-bottom: var(--s-8);
}

.hero__art {
	position: relative;
	height: clamp(440px, 44vw, 680px);
	overflow: hidden;
}

.hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
}

/* Fade the art's bottom (characters' chests) into graphite, keep faces clear */
.hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(15, 17, 19, 0) 70%, rgba(15, 17, 19, 0.35) 84%, rgba(15, 17, 19, 0.85) 95%, var(--c-bg) 100%),
		radial-gradient(42% 26% at 50% 21%, rgba(10, 20, 40, 0.42), rgba(10, 20, 40, 0) 100%);
	pointer-events: none;
}

.hero__title {
	position: absolute;
	top: clamp(96px, 7.6vw, 120px);
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: 0 var(--gutter);
	text-align: center;
}

.hero__title h1 {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* The shadowless title (Cyryl, 2026-10-03): no baked shade and no CSS
   drop-shadow over the key art. */
.hero__logo {
	width: min(700px, 72vw);
	height: auto;
}

.hero__body {
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * var(--s-5));
	text-align: center;
}

.hero__pitch {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
	line-height: 1.35;
	color: var(--c-heading);
	max-width: 760px;
	margin: 0 auto var(--s-6);
	text-wrap: balance;
}

.hero__ctas {
	justify-content: center;
}

.hero__steam-note {
	margin-top: var(--s-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

@media (max-width: 768px) {
	.hero__art { height: 460px; }

	.hero__art img { object-position: 41% 100%; }

	.hero__title { top: 92px; }

	/* A deeper navy scrim behind the logo: the phone crop puts it over the
	   brightest sky. */
	.hero__art::after {
		background:
			linear-gradient(to bottom, rgba(15, 17, 19, 0) 70%, rgba(15, 17, 19, 0.35) 84%, rgba(15, 17, 19, 0.85) 95%, var(--c-bg) 100%),
			radial-gradient(60% 26% at 50% 21%, rgba(10, 20, 40, 0.5), rgba(10, 20, 40, 0) 100%);
	}

	.hero__logo { width: min(92vw, 560px); }

	.hero__body { margin-top: calc(-1 * var(--s-4)); }
}

/* Hero crop per breakpoint. The keyart is 3.1:1 and cuts the cast at the
   chest; A anchors it to the bottom (faces clear, chests fade to graphite)
   with its own focus on phones (above). Between phone and desktop the box
   is short, so the logo is capped to stay clear of the monk's hat. */
@media (max-width: 1100px) and (min-width: 769px) {
	.hero__logo { width: min(620px, 60vw); }
}

/* ---------- 9. Gallery ---------- */
.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
}

.shot {
	position: relative;
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-surface-2);
	box-shadow: var(--shadow-card);
	aspect-ratio: 16 / 9;
}

/* The whole tile links to the full-size file (js/lightbox.js). */
.shot__link {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.shot__link:focus-visible {
	outline-offset: -2px;
	border-radius: var(--r-md);
}

.shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.shot:hover img { transform: scale(1.03); }
}

@media (max-width: 960px) {
	.gallery { gap: var(--s-3); }
}

@media (max-width: 600px) {
	.gallery { grid-template-columns: 1fr; }
}

/* ---------- 13. Newsletter ---------- */
.newsletter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: center;
}

.newsletter__list {
	margin-top: var(--s-5);
	display: grid;
	gap: var(--s-3);
}

.form-card {
	padding: var(--s-6);
	border-radius: var(--r-lg);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
}

@media (max-width: 960px) {
	.newsletter {
		grid-template-columns: 1fr;
		gap: var(--s-6);
	}

	.form-card { padding: var(--s-5); }

	/* Stacked, the text keeps a readable measure; the card itself stays
	   full width, in line with the gallery and socials. */
	.newsletter > div:first-child { max-width: 640px; }

	.consent { max-width: 38rem; }
}

/* ---------- 14. Form fields ----------
   .field__error and .form-success (with src/icons/check.svg) are
   Error and success states, unused until the live
   newsletter form. Kept on purpose, not dead code. */
.field {
	display: grid;
	gap: var(--s-2);
}

.field__label {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--c-heading);
}

.field__row {
	display: flex;
	gap: var(--s-3);
}

.input {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--s-4);
	border-radius: var(--r-md);
	border: 1.5px solid var(--c-line-strong);
	background: var(--c-bg);
	color: var(--c-heading);
	font: inherit;
	font-size: var(--fs-base);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input::placeholder { color: var(--c-placeholder); }

.input:hover {
	border-color: var(--c-text-muted);
}

/* A transparent outline, not none: forced colours drop the box-shadow
   ring but paint the outline in the system colour. */
.input:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--c-focus);
	box-shadow: 0 0 0 3px rgba(140, 198, 232, 0.28);
}

.input[aria-invalid="true"] {
	border-color: var(--c-error);
}

.input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(242, 147, 133, 0.25);
}

.input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	border-style: dashed;
}

.field__hint {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.field__error {
	display: flex;
	gap: var(--s-2);
	align-items: center;
	font-size: var(--fs-sm);
	color: var(--c-error);
}

.consent {
	margin-top: var(--s-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.55;
}

.optin-note {
	margin-top: var(--s-4);
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	background: rgba(140, 198, 232, 0.06);
	border: 1px solid rgba(140, 198, 232, 0.2);
	font-size: var(--fs-sm);
	color: var(--c-text);
}

.optin-note svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--c-water-lit);
}

.form-success {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	padding: var(--s-5);
	border-radius: var(--r-md);
	border: 1px solid rgba(143, 201, 140, 0.4);
	background: rgba(143, 201, 140, 0.06);
}

.form-success svg {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--c-success);
}

.form-success strong {
	display: block;
	font-family: var(--font-head);
	color: var(--c-heading);
	margin-bottom: 2px;
}

@media (max-width: 480px) {
	.field__row { flex-direction: column; }

	.field__row .btn { width: 100%; }
}

/* ---------- 15. Community strip ---------- */
.community {
	position: relative;
	overflow: hidden;
	background: var(--c-bg-deep);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}

.community canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.9;
}

.community__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--s-7);
	align-items: center;
}

.community__inner h2 { margin-bottom: var(--s-4); }

@media (max-width: 960px) {
	.community__inner {
		grid-template-columns: 1fr;
		gap: var(--s-6);
	}

	.community__inner > div:first-child { max-width: 640px; }
}