/* Shared components: buttons, trailer, cards, studio band, social tiles.
   Home-only parts (hero, gallery, newsletter, community strip) are in
   home.css.
   Hover zooms (transforms) sit in their own
   `(hover: hover) and (prefers-reduced-motion: no-preference)` block next to
   the hover rule, so reduced motion never depends on which sheet loads last. */

/* ---------- 5. Buttons ---------- */
.btn {
	--btn-h: 52px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	min-height: var(--btn-h);
	padding: 0 var(--s-6);
	border-radius: var(--r-pill);
	border: 1.5px solid transparent;
	font-family: var(--font-head);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med);
}

.btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.btn--sm {
	--btn-h: 40px;
	padding: 0 var(--s-5);
	font-size: var(--fs-sm);
}

/* Primary: silver pill with the four-forces glow underneath (fire left, water right, earth below) */
.btn--primary {
	--glow-a: 0.35;
	background: var(--c-heading);
	color: var(--c-bg);
	box-shadow:
		-10px 4px 22px -6px rgba(179, 90, 80, var(--glow-a)),
		10px 4px 22px -6px rgba(95, 162, 201, var(--glow-a)),
		0 10px 24px -8px rgba(94, 158, 94, var(--glow-a));
}

/* Hover states skip buttons that are not live yet (.btn--soon carries
   aria-disabled="true"; a disabled <button> matches :disabled). */
.btn--primary:not([aria-disabled="true"], :disabled):hover {
	--glow-a: 0.75;
	background: #FFFFFF;
	color: var(--c-bg);
}

/* Secondary: outline */
.btn--secondary {
	background: rgba(255, 255, 255, 0.03);
	color: var(--c-heading);
	border-color: var(--c-line-strong);
}

.btn--secondary:not([aria-disabled="true"], :disabled):hover {
	color: var(--c-heading);
	border-color: var(--c-heading);
	background: rgba(255, 255, 255, 0.07);
}

/* Steam wishlist: the primary pill when live, the secondary outline while
   it is coming soon (the macro adds the variant). Text only, no Steam
   colours, per Valve's brand guidelines. */
.btn--steam { gap: var(--s-3); }

.btn--steam .btn__kicker {
	display: block;
	font-size: var(--fs-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4A5058;               /* 7.4:1 on the silver pill */
	line-height: 1;
	margin-bottom: 3px;
}

.btn--steam .btn__stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	text-align: left;
}

/* Not-yet-live state for any button (a span, never a dead link) */
.btn--soon,
.btn[aria-disabled="true"],
.btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
	border-style: dashed;
}

/* On the Steam button the kicker is the only text that says "coming soon",
   so it keeps full strength: the dashed frame and label fade by colour,
   not by opacity. */
.btn--steam.btn--soon {
	opacity: 1;
	color: var(--c-text-muted);
}

.btn--steam.btn--soon .btn__kicker { color: var(--c-heading); }

.btn:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 4px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
}

/* Phones: a label may wrap rather than push the pill past the screen, and
   a row of buttons stacks at one width. */
@media (max-width: 480px) {
	.btn {
		white-space: normal;
		text-align: center;
		padding: var(--s-1) var(--s-5);
	}

	/* The small Steam button's two-line stack already fills its 40 px. */
	.btn--sm { padding: 0 var(--s-4); }

	.btn-row > .btn { width: 100%; }
}

/* A standalone text link, set a little heavier than running text */
.link-strong {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-link);
	text-underline-offset: 0.25em;
}

/* List with diamond bullets, the four forces in turn (newsletter perks,
   press features). */
.list-forces li {
	position: relative;
	padding-left: var(--s-5);
}

.list-forces li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: var(--c-fire-lit);
}

.list-forces li:nth-child(4n+2)::before { background: var(--c-earth-lit); }
.list-forces li:nth-child(4n+3)::before { background: var(--c-water-lit); }
.list-forces li:nth-child(4n+4)::before { background: var(--c-air-lit); }

/* ---------- 8. Trailer facade ---------- */
/* The image pipeline wraps every <img> in <picture>. The trailer poster and
   the studio-band face size the <img> itself (height: 100%), so the wrapper
   must not take a box. */
:where(.trailer, .studio-band__faces) picture { display: contents; }

.trailer {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	cursor: pointer;
	background: var(--c-surface);
	box-shadow: var(--shadow-media);
	outline-offset: 6px;
	text-align: left;
	font: inherit;
	color: inherit;
	/* The disc and label size by the trailer's own width (see the
	   container query below): the press tile is phone-narrow on laptops. */
	container-type: inline-size;
}

.trailer::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 3;
	pointer-events: none;
}

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

.trailer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(10, 11, 13, 0.05), rgba(10, 11, 13, 0.55) 90%);
}

/* With a label, a bottom scrim (the gallery captions' gradient) keeps it
   readable over a bright poster. */
.trailer:has(.trailer__meta)::after {
	background:
		linear-gradient(to top, rgba(10, 11, 13, 0.85), transparent 45%),
		radial-gradient(circle at 50% 50%, rgba(10, 11, 13, 0.05), rgba(10, 11, 13, 0.55) 90%);
}

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

.trailer__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 96px;
	height: 96px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--c-heading);
	color: var(--c-bg);
	box-shadow: 0 0 0 10px rgba(242, 244, 246, 0.15), 0 20px 40px rgba(0, 0, 0, 0.5);
	transition: transform var(--t-med), box-shadow var(--t-med);
}

.trailer__play svg {
	width: 34px;
	height: 34px;
	margin-left: 5px;
}

.trailer:hover .trailer__play {
	box-shadow: 0 0 0 14px rgba(242, 244, 246, 0.18), 0 20px 40px rgba(0, 0, 0, 0.5);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.trailer:hover .trailer__play { transform: translate(-50%, -50%) scale(1.06); }
}

.trailer__meta {
	position: absolute;
	left: var(--s-5);
	bottom: var(--s-5);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

/* The injected player (trailer.js) reuses the facade box. */
.trailer--playing {
	cursor: auto;
}

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

/* No video ID yet: a still with a "coming soon" pill, not a button. No play
   icon, pointer or hover zoom, so nothing suggests it can be pressed. */
.trailer--soon { cursor: default; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.trailer--soon:hover img { transform: none; }
}

/* Near the bottom, not centred: the poster has the title at the top and
   the monk's face in the middle, so the pill sits over the robes.
   Recheck with a new poster. */
.trailer__soon {
	position: absolute;
	left: 50%;
	bottom: 7%;
	z-index: 2;
	transform: translateX(-50%);
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pill);
	background: rgba(15, 17, 19, 0.8);
	border: 1px solid var(--c-line);
	color: var(--c-heading);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.trailer-note {
	margin-top: var(--s-3);
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.trailer-note svg {
	width: 16px;
	height: 16px;
	flex: none;
	/* Centred on the first line (23.1 px), not on the whole note. */
	margin-top: 4px;
}

@media (max-width: 768px) {
	.trailer { border-radius: var(--r-md); }

	.trailer__play {
		width: 68px;
		height: 68px;
	}

	.trailer__play svg {
		width: 26px;
		height: 26px;
	}

	.trailer__meta {
		left: var(--s-4);
		bottom: var(--s-3);
	}

	.trailer__label { font-size: var(--fs-base); }

	/* Clear of the label at the bottom on a short phone frame (a compact
	   trailer has no label, so its pill stays centred). */
	/* Its left edge lines up with the label's. */
	.trailer:has(.trailer__meta) .trailer__soon {
		left: var(--s-4);
		top: var(--s-3);
		transform: none;
		padding: var(--s-1) var(--s-3);
		font-size: var(--fs-xs);
	}
}

/* A trailer 480 px wide or less (phones, and the press tile from 961 to
   about 1100 px): the play disc would cover the label's end (white on
   white), so the disc shrinks and the label and duration share one line. */
@container (max-width: 480px) {
	.trailer__play {
		width: 56px;
		height: 56px;
	}

	.trailer__play svg {
		width: 22px;
		height: 22px;
		margin-left: 4px;
	}

	.trailer__meta {
		left: var(--s-4);
		bottom: var(--s-3);
		flex-flow: row wrap;
		align-items: baseline;
		column-gap: var(--s-3);
	}

	.trailer__label { font-size: var(--fs-base); }

	/* A poster this small puts the label halfway up: reach higher. */
	.trailer:has(.trailer__meta)::after {
		background:
			linear-gradient(to top, rgba(10, 11, 13, 0.85), rgba(10, 11, 13, 0.6) 50%, transparent 80%),
			radial-gradient(circle at 50% 50%, rgba(10, 11, 13, 0.05), rgba(10, 11, 13, 0.55) 90%);
	}
}

/* ---------- 11. Cards (Contact, press) ---------- */
.card {
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-6);
}

.section--surface .card { background: var(--c-surface-2); }

/* No hover state: no card is a link, so none may look pressable. */

.card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--r-icon);
	display: grid;
	place-items: center;
	margin-bottom: var(--s-5);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--c-line);
}

.card__icon svg {
	width: 22px;
	height: 22px;
}

.card h3 { margin-bottom: var(--s-3); }

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

/* Each card takes one force for its accent — four cards, four forces */
.card--fire   .card__icon { color: var(--c-fire-lit);  border-color: rgba(232, 144, 127, 0.35); }
.card--earth  .card__icon { color: var(--c-earth-lit); border-color: rgba(143, 201, 140, 0.35); }
.card--water  .card__icon { color: var(--c-water-lit); border-color: rgba(140, 198, 232, 0.35); }
.card--air    .card__icon { color: var(--c-air-lit);   border-color: rgba(163, 185, 224, 0.35); }

.card--fire::before,
.card--earth::before,
.card--water::before,
.card--air::before {
	content: "";
	position: absolute;
	left: var(--s-6);
	right: var(--s-6);
	top: -1px;
	height: 2px;
	border-radius: 2px;
}

.card--fire::before  { background: var(--c-fire); }
.card--earth::before { background: var(--c-earth); }
.card--water::before { background: var(--c-water); }
.card--air::before   { background: var(--c-air); }

@media (max-width: 480px) {
	.card { padding: var(--s-5); }
}

/* Email cards: two .card tiles, each with a big address (Contact, press). */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5);
}

.contact-grid .card p:not(:last-child) { margin-bottom: var(--s-4); }

.contact-mail {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-lg);
	overflow-wrap: anywhere;
}

.contact-mail + p { margin-top: var(--s-2); }

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

/* ---------- 12. Studio band ---------- */
.studio-band {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-6);
	padding: var(--s-6);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	background-image: var(--glow-elements);
}

.studio-band__faces {
	display: flex;
}

.studio-band__faces img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--c-surface);
	box-shadow: 0 0 0 1px var(--c-line-strong);
}


.studio-band__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--s-2);
}

.studio-band p {
	color: var(--c-text-muted);
	max-width: 620px;
}

/* Tablets keep the photo beside the text, the link under the text;
   phones stack all three. */
@media (max-width: 768px) {
	.studio-band {
		grid-template-columns: auto 1fr;
		gap: var(--s-3) var(--s-5);
		padding: var(--s-5);
	}

	.studio-band > .link-strong {
		grid-column: 2;
		justify-self: start;
	}
}

@media (max-width: 480px) {
	.studio-band {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	.studio-band > .link-strong { grid-column: auto; }
}

/* ---------- 15. Social tiles (home community strip, Contact) ---------- */
/* Social tiles on a 6-column grid. The Discord card, if present, takes its
   own row; the small tiles go three to a row, and the last row never
   strands one: with 3n+2 small tiles the last two share a row, with 3n+1
   the last four pair up (2 + 2), and a lone tile takes the row. The
   :where()s keep every count rule at the same specificity, so the phone
   layout below overrides them by source order. */
.socials {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--s-3);
}

.socials > :where(.social) { grid-column: span 2; }

.socials:where(:has(> :nth-child(1 of .social:not(.social--discord)):nth-last-child(3n+2 of .social:not(.social--discord))))
	> :where(:nth-last-child(-n+2 of .social:not(.social--discord))),
.socials:where(:has(> :nth-child(1 of .social:not(.social--discord)):nth-last-child(3n+4 of .social:not(.social--discord))))
	> :where(:nth-last-child(-n+4 of .social:not(.social--discord))) {
	grid-column: span 3;
}

.socials:where(:has(> :nth-child(1 of .social:not(.social--discord)):nth-last-child(1 of .social:not(.social--discord))))
	> :where(.social) {
	grid-column: 1 / -1;
}

.social {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
	background: rgba(26, 29, 33, 0.8);
	color: var(--c-heading);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-sm);
	transition: border-color var(--t-fast), background-color var(--t-fast);
}

.social svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--c-text-muted);
	transition: color var(--t-fast);
}

.social:hover {
	color: var(--c-heading);
	border-color: var(--c-line-strong);
	background: var(--c-surface-2);
}

.social:hover svg { color: var(--c-heading); }

.socials .social--discord {
	grid-column: 1 / -1;
	padding: var(--s-4) var(--s-5);
	font-size: var(--fs-base);
	border-color: rgba(88, 101, 242, 0.55);
	background: linear-gradient(135deg, rgba(88, 101, 242, 0.22), rgba(26, 29, 33, 0.85));
}

.social--discord svg {
	width: 26px;
	height: 26px;
	color: #FFFFFF;
}

.social--discord .social__sub {
	display: block;
	font-weight: 400;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* Phones: two small tiles to a row; with an odd count the last one takes
   the whole row. */
@media (max-width: 480px) {
	.socials > :where(.social) { grid-column: span 3; }

	.socials:where(:has(> :nth-child(1 of .social:not(.social--discord)):nth-last-child(odd of .social:not(.social--discord))))
		> :where(:nth-last-child(1 of .social:not(.social--discord))) {
		grid-column: 1 / -1;
	}
}

/* Network glyphs (social tiles, press links, About): muted or white at rest,
   the network's own colour on hover and focus. Instagram, TikTok, Steam and
   X allow only black or white, so they turn white. */
.brand--discord { --brand: #5865F2; }
.brand--youtube { --brand: #FF0000; }
.brand--bluesky { --brand: #1185FE; }
.brand--instagram,
.brand--tiktok,
.brand--steam,
.brand--x { --brand: #FFFFFF; }

:is(a:hover, a:focus-visible) > .brand { color: var(--brand); }

/* ---------- Screenshot viewer (js/lightbox.js) ---------- */
.lightbox {
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	padding: var(--s-4);
	border: 0;
	background: transparent;
	display: none;
	place-items: center;
}

.lightbox[open] { display: grid; }

/* The page behind stays put while the viewer is open. */
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox::backdrop { background: rgba(10, 11, 13, 0.92); }

.lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-media);
}

.lightbox__close {
	position: fixed;
	top: var(--s-4);
	right: var(--s-4);
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-surface-2);
	color: var(--c-heading);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.lightbox__close:hover { background: var(--c-surface); }