/* Layout: container, sections, header + mobile menu, footer. */

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.section {
	padding: var(--section-y) 0;
	position: relative;
}

.section--trailer { padding: var(--s-6) 0 var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--surface {
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}

/* ---------- Page head: About, Contact, Privacy, Terms ----------
   The press hero's rhythm, without the art. */
.page-head {
	position: relative;
	padding: var(--s-9) 0 var(--s-7);
	border-bottom: 1px solid var(--c-line);
	background-image: var(--glow-elements);
}

.page-head h1 {
	font-size: var(--fs-4xl);
	margin-bottom: var(--s-4);
}

.page-head .lede { max-width: 640px; }

/* The first section belongs to the head above it: the tight step, as
   the legal body. */
.page-head + .section { padding-top: var(--section-y-tight); }

@media (max-width: 768px) {
	.page-head { padding: var(--s-8) 0 var(--s-6); }
}

/* ---------- 6. Header / nav ---------- */
/* Over a full-bleed hero (front matter `headerOverlay: true`, the home page) the
   header is absolute against the page; elsewhere it is the solid sticky bar. */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: var(--s-4) 0;
}

/* Scrim over the hero, reaching 40 px below the header so it fades out past
   the text: the brand (its muted "Studio" line included) and the nav keep AA
   contrast over the brightest cloud at every width. */
.site-header:not(.site-header--solid)::before {
	content: "";
	position: absolute;
	inset: 0 0 -40px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(10, 11, 13, 0.9) 0%, rgba(10, 11, 13, 0.82) 50%, rgba(10, 11, 13, 0.4) 75%, rgba(10, 11, 13, 0) 100%);
}

/* Under the sticky header, anchor targets and keyboard focus (Shift+Tab
   scrolls a link to the top edge) both land below it: the root's scroll
   padding covers both, a per-target scroll-margin only the anchors. The
   home header is not sticky, so home keeps no padding. */
:root:has(.site-header--solid) {
	scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

.site-header--solid {
	position: sticky;
	background: rgba(15, 17, 19, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
}

/* Short screens (landscape phones, 400 % zoom): a sticky header would cover
   a third of the view, so it scrolls with the page (WCAG Understanding
   1.4.10 suggests static positioning at small sizes). */
@media (max-width: 960px) and (max-height: 500px) {
	.site-header--solid { position: relative; }

	:root:has(.site-header--solid) { scroll-padding-top: var(--s-5); }
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	text-decoration: none;
	color: var(--c-heading);
}

.brand img {
	width: 44px;
	height: 44px;
}

/* The image pipeline wraps the logos in <picture>. Not display: contents
   here: its <source> children would become flex items and add gaps. */
.brand picture,
.footer-brand picture { display: block; }

.brand__name {
	white-space: nowrap;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: var(--fs-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.25;
}

.nav__links {
	display: flex;
	align-items: center;
	gap: var(--s-6);
}

.nav__links a:not(.btn) {
	position: relative;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-base);
	text-decoration: none;
	color: var(--c-text);
	padding: var(--s-2) 0;
}

.nav__links a:not(.btn)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--grad-elements);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-med);
}

.nav__links a:not(.btn):hover,
.nav__links a[aria-current="page"] {
	color: var(--c-heading);
}

.nav__links a:not(.btn):hover::after,
.nav__links a[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav__cta { margin-left: var(--s-3); }

.nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	border: 1px solid var(--c-line-strong);
	background: rgba(15, 17, 19, 0.6);
	color: var(--c-heading);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

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


/* Mobile. Without JS the links stay a compact, wrapping row under the brand
   (the page works as is). The head script adds `js` to <html> (and takes it
   back if nav.js never marks itself ready); only then does the
   toggle appear and the links become a full-screen menu. */
@media (max-width: 960px) {
	.brand__name { display: none; }

	.nav { flex-wrap: wrap; }

	.nav__links {
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-5);
	}

	.nav__links a:not(.btn) { font-size: var(--fs-sm); }

	.nav__cta { margin-left: 0; }

	/* The no-JS row makes the header up to 229 px tall on phones: too tall
	   to stick, so it scrolls away, and nothing offsets for it. */
	html:not(.js) { --header-h: 0px; }

	html:not(.js) .site-header--solid { position: relative; }

	.js .nav { flex-wrap: nowrap; }

	.js .nav__toggle { display: inline-flex; }

	.js .nav__links {
		position: fixed;
		inset: 0;
		z-index: 2000;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: calc(var(--header-h) + var(--s-3)) var(--gutter) var(--s-6);
		background: var(--c-bg);
		background-image: var(--glow-elements);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear 280ms;
	}

	.js .nav.is-open .nav__links {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--t-med), transform var(--t-med), visibility 0s;
	}

	.js .nav__links a:not(.btn) {
		font-size: var(--fs-xl);
		padding: var(--s-4) 0;
		border-bottom: 1px solid var(--c-line);
	}

	.js .nav__links a:not(.btn)::after { display: none; }

	.js .nav__links a[aria-current="page"] {
		color: var(--c-heading);
		box-shadow: inset 3px 0 0 var(--c-water-lit);
		padding-left: var(--s-4);
	}

	.js .nav__cta {
		margin: var(--s-6) 0 0;
		width: 100%;
		max-width: 400px;
	}

	.js .nav__links .btn {
		--btn-h: 52px;
		font-size: var(--fs-base);
	}

	.js .nav.is-open .nav__toggle,
	.js .nav.is-open .brand {
		position: relative;
		z-index: 2100;
	}

	/* backdrop-filter would make the solid header the containing block of the
	   fixed menu panel; drop it while the menu is open. */
	.nav-open .site-header--solid {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.nav-open body { overflow: hidden; }
}

/* Where the no-JS row wraps, the home header takes its own band above the
   hero instead of lying over the title and logo. */
@media (max-width: 768px) {
	html:not(.js) .site-header { position: relative; }
}

/* Forced colours drop the gradient underline and the menu's inset bar,
   so the current page is underlined as text instead. */
@media (forced-colors: active) {
	.nav__links a[aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}
}

/* ---------- 16. Footer ---------- */
.site-footer {
	background: var(--c-bg-deep);
	padding: var(--s-8) 0 var(--s-6);
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--grad-elements);
	opacity: 0.7;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--s-6);
}

.footer-brand img {
	width: 64px;
	height: 64px;
	margin-bottom: var(--s-4);
}

.footer-brand p {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	max-width: 300px;
}

.footer-col__title { margin-bottom: var(--s-4); }

.footer-col ul {
	display: grid;
	gap: var(--s-2);
}

.footer-col a {
	/* Taller tap targets; the padding of an inline link moves nothing. */
	padding-block: var(--s-1);
	color: var(--c-text);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.footer-col a:hover {
	color: var(--c-heading);
	text-decoration: underline;
}

.footer-legal {
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
	display: grid;
	justify-items: start;
	gap: var(--s-3);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* Tablets: the brand row, then the three columns in one row. Phones:
   Explore and Legal side by side, then Follow across the full width with
   its seven links in two columns (4 + 3), so no column runs long. */
@media (max-width: 960px) {
	.footer-grid { grid-template-columns: repeat(3, 1fr); }

	.footer-brand { grid-column: 1 / -1; }
}

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

	.footer-col--follow {
		grid-column: 1 / -1;
		order: 1;
	}

	.footer-col--follow ul {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		column-gap: var(--s-6);
	}
}