/**
 * Factum — front-end styles.
 *
 * Colour and type tokens come from theme.json, which means the block editor and
 * the front end share one source of truth. Anything hardcoded below is a value
 * theme.json cannot express (states, layout, one-off components).
 */

/* ==========================================================================
   Tokens and reset
   ========================================================================== */

:root {
	--paper:  #FFFFFF;
	--wash:   #F6F7F8;
	--rule:   #E8EAED;
	/* Metadata grey. Darkened from the original #9AA0A6, which read at only
	   2.64:1 on white — below the 4.5:1 the quality bar asks for. At #6C7178
	   it clears 4.92:1 on paper and 4.58:1 on wash. */
	--faint:  #6C7178;
	/* The same role on the dark blocks, where the original value is already
	   well clear (6.86:1) and the darkened one would not be. */
	--faint-on-dark: #9AA0A6;
	--muted:  #6A6F76;
	--ink:    #14161A;
	--accent: #CE1126;
	--accent-dark: #A50D1E;

	--wrap: 1240px;

	/* Armenian ascenders and descenders sit taller than Latin, so the default
	   1.5 crowds them. */
	--lh-body: 1.7;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Noto Sans Armenian", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-dark);
}

h1, h2, h3 {
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

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

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 1.5rem;
}

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

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--ink);
	color: #fff;
	padding: 0.7rem 1.2rem;
}

/* ==========================================================================
   Shared components
   ========================================================================== */

.eyebrow {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.8rem;
}

.btn {
	display: inline-block;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	padding: 0.72rem 1.4rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Red does exactly one job on this site: it marks an ask. */
.btn-ask {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.btn-ask:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

/* Every block gets a head with a thick rule. This is what makes a sparse page
   read as edited rather than unfinished. */
.section-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	border-top: 2px solid var(--ink);
	padding-top: 0.7rem;
	margin-bottom: 1.6rem;
}

.section-head h2 {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

.section-head .more {
	margin-left: auto;
	font-size: 0.84rem;
	font-weight: 500;
}

/* A number stated plainly carries more weight than an argument about it. */
.stat-line {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--muted);
	margin: -0.8rem 0 1.6rem;
	font-variant-numeric: tabular-nums;
}

/* Placeholder for films with no still yet: a small frame mark, so an absent
   image reads as pending rather than broken. */
.is-empty {
	background: var(--wash);
	border: 1px solid var(--rule);
	position: relative;
}

.is-empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 26px;
	transform: translate(-50%, -50%);
	border: 1.5px solid #C9CDD2;
	border-radius: 3px;
	background: radial-gradient(circle at 50% 58%, #C9CDD2 0 4.5px, transparent 4.5px);
}

.hero-still.is-empty::after {
	width: 54px;
	height: 42px;
}

/* ==========================================================================
   Premiere strip
   ========================================================================== */

/* The thinnest of the bars, and it should look it. */
.premiere {
	background: var(--ink);
	color: #fff;
	font-size: 0.78rem;
}

.premiere-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.premiere strong {
	font-weight: 500;
}

.premiere .place {
	color: var(--faint-on-dark);
}

.premiere .countdown {
	color: #FF6B6B;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.premiere a {
	margin-left: auto;
	color: #fff;
	opacity: 0.92;
}

.premiere a:hover {
	color: #fff;
	opacity: 1;
}

/* ==========================================================================
   Masthead and navigation
   ========================================================================== */

/* One row, one baseline: wordmark, tagline, language. Presence comes from the
   wordmark being several times the navigation size, not from a tall header. */
.masthead-inner {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	min-width: 0;
}

/* Baseline alignment suits a text wordmark; an image has no matching baseline,
   so the tagline sat level with the bottom of the logo instead of beside it. */
.brand.has-logo {
	align-items: center;
}

.lang-switcher {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.lang-switcher a {
	color: var(--ink);
	opacity: 0.5;
	text-decoration: none;
}

.lang-switcher a:hover {
	opacity: 1;
}

.lang-switcher a[aria-current="true"] {
	color: var(--ink);
	opacity: 1;
}

.brand-name {
	display: inline-block;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
	margin: 0;
}

/* Only the masthead wordmark stays on one line. The footer reuses this class
   for the full organisation name, which must be free to wrap — held to one
   line it pushed narrow screens sideways. */
.masthead .brand-name {
	white-space: nowrap;
}

.brand-name:hover {
	color: var(--ink);
}

.brand-tagline {
	font-size: 0.8rem;
	color: var(--muted);
	margin: 0;
	padding-left: 1.2rem;
	border-left: 1px solid var(--rule);
	max-width: 44ch;
}

.custom-logo {
	max-height: 40px;
	width: auto;
}

.nav-wrap {
	border-bottom: 1px solid var(--rule);
}

.nav-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Not overflow-x: auto. Scrolling here creates a clipping context, and the
	   section dropdown — absolutely positioned and taller than the bar — was
	   being clipped out of sight entirely. The bar wraps instead. */
	overflow: visible;
}

.nav-list a {
	display: block;
	padding: 0.62rem 0;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease;
}

.nav-list a:hover,
.nav-list .current-menu-item a {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Dropdown on hover and on keyboard focus alike. No JavaScript: :focus-within
   keeps it reachable by tab, and with scripts off it still works. */
/* WordPress emits .menu-item-has-children/.sub-menu for admin-built menus;
   the fallback nav emits .has-submenu/.submenu. Both are styled. */
.nav-list .has-submenu,
.nav-list .menu-item-has-children {
	position: relative;
}

.submenu,
.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: -0.9rem;
	z-index: 60;
	min-width: 13rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(20, 22, 26, 0.09);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.submenu a,
.nav-list .sub-menu a {
	padding: 0.5rem 0.9rem;
	border-bottom: 0;
	font-size: 0.86rem;
	color: var(--muted);
	white-space: nowrap;
}

.submenu a:hover,
.nav-list .sub-menu a:hover {
	color: var(--ink);
	background: var(--wash);
	border-bottom: 0;
}

.nav-actions {
	margin-left: auto;
}

.nav-actions .btn {
	padding: 0.48rem 1.1rem;
	font-size: 0.84rem;
}

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.hero {
	padding: 3rem 0 5rem;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3rem;
	align-items: center;
}

.hero-figure {
	margin: 0;
}

/* Publications caption their images; templates don't. */
.hero-figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--faint);
}

.hero-still {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wash);
}

.hero-still img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-play span {
	background: rgba(20, 22, 26, 0.85);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.7rem 1.3rem;
	border-radius: 3px;
}

.hero-play:hover span {
	background: var(--accent);
}

/* The hero headline dominates, but at 5rem it ran to roughly 4.7x the body
   text — where EVN Report and OC Media both sit nearer 2.5–3x. Pulled back to
   about 3.4x, which still leads the page without shouting. Armenian reads
   optically smaller than Latin, so this stays above a Latin-only setting. */
.hero-title {
	font-size: clamp(2.3rem, 4.4vw, 3.6rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0 0 0.6rem;
}

.hero-title a {
	color: var(--ink);
}

.hero .eyebrow {
	margin-bottom: 0.6rem;
}

/* Marks content shown in a language the reader did not ask for. */
.lang-note {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	border: 1px solid var(--rule);
	border-radius: 2px;
	padding: 0.15rem 0.45rem;
	margin: 0 0 0.9rem;
}

.hero-dek {
	font-size: 1.05rem;
	color: var(--muted);
	line-height: 1.62;
	max-width: 46ch;
	margin: 0 0 1.7rem;
}

.hero-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   The three asks
   ========================================================================== */

/* Columns divided by hairlines, not cards. Three grey boxes were the most
   template-like thing on the page. */
.asks {
	padding: 3rem 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.asks-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* Three asks laid out as hairline-divided columns read as body copy with
   numbers in front of it. Each one is a thing to do, so each one is an
   object: its own surface, its own button. The palette stays where it was —
   red already marks the ask in the hero and the nav, and spending it three
   more times here would leave the page with no strongest signal at all. */
.ask {
	padding: 1.6rem;
	background: var(--wash);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Numbering states the funnel visually: come, fund, follow.
   Two classes deep on purpose: ".ask p" below is more specific than a lone
   ".ask-num", so the numbers were quietly rendering as ordinary body copy. */
.ask .ask-num {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	margin: 0 0 0.9rem;
	line-height: 1;
}

.ask h3 {
	font-size: 1.15rem;
	letter-spacing: -0.015em;
	margin: 0 0 0.45rem;
}

.ask p {
	font-size: 0.94rem;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 1.2rem;
}

/* Pushed to the bottom so the three buttons sit on one line even when the
   copy above them runs to different lengths. */
.ask-btn {
	margin-top: auto;
	background: var(--paper);
}

/* ==========================================================================
   Film grid
   ========================================================================== */

/* Varied vertical rhythm. Four sections with identical padding read as a
   template; the support block gets the most room because it matters most. */
.archive-strip {
	padding: 4.5rem 0 3rem;
}

.film-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 2.2rem 1.7rem;
}

.film-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.film-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wash);
	margin-bottom: 0.7rem;
}

.film-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

/* Opacity, not a zoom. Scaling an image on hover is a marketing gesture. */
.film-card:hover .film-thumb img {
	opacity: 0.82;
}

.film-year {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--faint);
	margin: 0 0 0.2rem;
}

.film-title {
	font-size: 1.15rem;
	letter-spacing: -0.015em;
	margin: 0 0 0.35rem;
}

.film-title a {
	color: var(--ink);
}

.film-excerpt {
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.film-langs {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0;
}

.film-langs a {
	color: var(--faint);
}

/* Names the fact, so the term does not read as "switch this page to Armenian". */
.film-langs-label {
	color: var(--faint);
	opacity: 0.75;
}

.film-langs a {
	text-decoration-color: var(--rule);
	text-underline-offset: 0.2em;
}

.film-card.is-unavailable .film-title,
.film-card.is-unavailable .film-excerpt {
	color: var(--muted);
}

/* ==========================================================================
   Archive spine
   --------------------------------------------------------------------------
   The catalogue is a chronology, so it is set as one. Films with no public
   copy stay visible as empty frames: the gaps in the record are the record.
   ========================================================================== */

.spine {
	position: relative;
	padding: 0.5rem 0 4rem;
}

.spine::before {
	content: "";
	position: absolute;
	left: 76px;
	top: 0;
	bottom: 4rem;
	width: 1px;
	background: var(--rule);
}

.spine-row {
	position: relative;
	display: grid;
	grid-template-columns: 76px 200px 1fr;
	gap: 0 2rem;
	padding: 1.9rem 0;
	align-items: start;
}

.spine-row + .spine-row {
	border-top: 1px solid var(--rule);
}

.spine-row .year {
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--faint);
	text-align: right;
	padding-right: 0.9rem;
	margin: 0;
}

.spine-row .year::after {
	content: "";
	position: absolute;
	left: 72px;
	top: 2.15rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

/* A repeated year keeps its tick but drops the label, so the column reads as
   a sequence rather than a stutter. */
.spine-row .year.is-repeat {
	color: transparent;
}

.spine-row .year.is-repeat::after {
	width: 5px;
	height: 5px;
	left: 74px;
	top: 2.3rem;
	background: #C9CDD2;
}

.spine-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wash);
}

/* Decade markers break twenty-two years into something scannable. They sit on
   the spine itself rather than interrupting it. */
.spine-decade {
	position: relative;
	padding: 2.4rem 0 0.9rem;
	margin-bottom: 0.6rem;
}

.spine-decade:first-child {
	padding-top: 0.5rem;
}

.spine-decade h2 {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--faint);
	margin: 0;
	padding-left: 108px;
	font-variant-numeric: tabular-nums;
}

.spine-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.spine-row:hover .spine-thumb img {
	opacity: 0.82;
}

.spine-thumb.is-frame {
	background: transparent;
	border: 1.5px dashed #C9CDD2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.spine-thumb.is-frame span {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--faint);
	padding: 0 0.75rem;
	line-height: 1.4;
}

.spine-title {
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem;
}

.spine-title a {
	color: var(--ink);
}

.spine-excerpt {
	font-size: 0.9rem;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 0.5rem;
}

.spine-row.is-unavailable .spine-title,
.spine-row.is-unavailable .spine-excerpt {
	color: var(--muted);
}

/* ==========================================================================
   Support block
   ========================================================================== */

.support-block {
	background: var(--ink);
	color: #fff;
	padding: 6rem 0;
}

.support-block .eyebrow {
	color: #FF6B6B;
}

.support-block h2 {
	color: #fff;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	max-width: 20ch;
}

.support-lede {
	color: #C6C9CD;
	max-width: 52ch;
	margin: 0;
}

.meter {
	margin: 2rem 0 0;
	max-width: 420px;
}

.meter-track {
	height: 5px;
	background: #2E3238;
	border-radius: 4px;
	overflow: hidden;
}

.meter-fill {
	height: 100%;
	background: var(--accent);
	border-radius: 4px;
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.meter-label {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--faint-on-dark);
	margin: 0.7rem 0 0;
	font-variant-numeric: tabular-nums;
}

.meter-label strong {
	color: #fff;
	font-weight: 600;
}

.meter-label span {
	margin-left: auto;
}

.rails {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 1.8rem;
}

.rail {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid #3A3F45;
	border-radius: 5px;
	color: #fff;
	min-width: 150px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.rail:hover {
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
}

.rail strong {
	font-size: 0.96rem;
	font-weight: 600;
}

.rail span {
	font-size: 0.76rem;
	color: var(--faint-on-dark);
}

.rails-pending {
	margin-top: 1.8rem;
	font-size: 0.9rem;
	color: var(--faint-on-dark);
}

/* ==========================================================================
   Signup
   ========================================================================== */

/* Button on the dark support block: outlined in white, not ink. */
.btn-on-dark {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.btn-on-dark:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

.support-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* On wash, so the last ask on the page reads as a block rather than as
   leftover white space. */
.signup {
	padding: 4rem 0;
	background: var(--wash);
	border-top: 1px solid var(--rule);
}

.signup-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
}

.signup-dek {
	color: var(--muted);
	margin: 0 0 1.4rem;
	max-width: 42ch;
}

/* What a subscriber actually gets. "Subscribe" on its own is not a reason. */
.signup-points {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.signup-points li {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: 0 0.4rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--rule);
}

.signup-point-num {
	grid-row: span 2;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.signup-points strong {
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.signup-points span:not(.signup-point-num) {
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.5;
}

.signup-inner {
	max-width: 620px;
}

.signup-standalone {
	margin: 0 auto 4rem;
}

.signup-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.signup p {
	color: var(--muted);
}

.signup-form {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.signup-form input[type="email"] {
	flex: 1 1 260px;
	padding: 0.72rem 1rem;
	border: 1.5px solid #D6D9DD;
	border-radius: 4px;
	background: transparent;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--ink);
}

.signup-form input[type="email"]:focus {
	border-color: var(--ink);
	outline: none;
}

.signup-message {
	flex-basis: 100%;
	font-size: 0.88rem;
	margin: 0.3rem 0 0;
	min-height: 1.2em;
}

.signup-message.is-success {
	color: #1a7f37;
}

.signup-message.is-error {
	color: var(--accent);
}

/* ==========================================================================
   Articles and pages
   ========================================================================== */

.page-head {
	max-width: 760px;
	padding: 3.5rem 0 2rem;
}

.page-title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0;
}

.page-dek {
	font-size: 1.15rem;
	color: var(--muted);
	line-height: 1.6;
	margin: 0.9rem 0 0;
	max-width: 56ch;
}

.page-head .stat-line {
	margin: 1rem 0 0;
}

/* The opening passage of a page carries a little more weight than the body
   that follows it. */
.article-body-lead > p:first-of-type {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--muted);
}

.newsletter-recent {
	padding: 1rem 0 4rem;
}

.error-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin: 1.6rem 0 0;
}

.error-suggestions {
	padding-bottom: 4rem;
}

.article-head {
	max-width: 820px;
	padding: 3rem 0 2rem;
}

.article-title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0;
}

.article-head .eyebrow a {
	color: inherit;
}

.article-head .eyebrow a:hover {
	color: var(--accent-dark);
}

.article-dek {
	font-size: 1.15rem;
	color: var(--muted);
	line-height: 1.6;
	margin: 0.9rem 0 0;
	max-width: 60ch;
}

.article-figure {
	margin: 0 0 2.5rem;
}

/* Publications caption their images; templates don't. */
.article-figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--faint);
}

.article-figure img {
	width: 100%;
}

.article-body {
	max-width: 680px;
	font-size: 1.05rem;
	padding-bottom: 3.5rem;
}

.article-body > * + * {
	margin-top: 1.3em;
}

.article-body h2 {
	font-size: 1.5rem;
	margin-top: 2em;
}

.article-body h3 {
	font-size: 1.2rem;
	margin-top: 1.7em;
}

.article-body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body blockquote {
	margin-left: 0;
	padding-left: 1.3rem;
	border-left: 3px solid var(--accent);
	color: var(--muted);
}

.film-more {
	padding: 0 0 4rem;
	border-top: 1px solid var(--rule);
	padding-top: 2.5rem;
}

/* Sharp edges read as documentary; rounded corners read as software. */
.embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink);
	overflow: hidden;
	margin: 0;
}

.embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.notice-unavailable {
	max-width: 680px;
	background: var(--wash);
	border-left: 2px solid var(--accent);
	padding: 1.1rem 1.3rem;
	font-size: 0.92rem;
	color: var(--muted);
	margin: 0 0 2rem;
}

/* A stacked reference list in the margin, hairline-separated. */
.film-facts {
	border-top: 2px solid var(--ink);
	padding: 0;
	margin: 0;
	display: block;
}

.film-facts > div {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--rule);
}

.film-facts dt {
	font-size: 0.68rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.25rem;
}

.film-facts dd {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
}

.error-wrap {
	padding: 6rem 0;
	text-align: center;
}

.error-code {
	font-size: 5rem;
	font-weight: 600;
	color: var(--rule);
	margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--ink);
	padding: 3.5rem 0 2.5rem;
	font-size: 0.88rem;
}

.footer-grid {
	display: grid;
	/* The contact column appears only once Factum fills it in, so the track
	   list has to tolerate three columns or four. */
	grid-template-columns: 1.5fr;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 2.5rem;
}

.footer-heading {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0 0 0.9rem;
}

.footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-list li {
	margin-bottom: 0.5rem;
}

.footer-list a,
.footer-grid a {
	color: var(--muted);
}

.footer-list a:hover {
	color: var(--ink);
}

.footer-brand .brand-name {
	font-size: 1.4rem;
}

.footer-brand p {
	color: var(--muted);
	max-width: 38ch;
	margin: 0.5rem 0 0;
}

.footer-bottom {
	border-top: 1px solid var(--rule);
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	color: var(--faint);
	font-size: 0.8rem;
}

/* ==========================================================================
   News
   ========================================================================== */

/* Story list beside a rail, the way a newsroom front is read: one column to
   follow, one to browse. */
.news-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 3.5rem;
	align-items: start;
}

/* Sections stated plainly, not hidden behind a hover menu.
   The row scrolls when it outgrows the viewport, so it carries the classic
   scroll shadow: the fade only shows while there is more to reach, and
   clears at each end. Without it the last section is simply cut off mid-word
   with nothing to say it continues. */
.section-bar {
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-bottom: 2rem;
	overflow-x: auto;
	scrollbar-width: none;
	background-image:
		linear-gradient(to right, var(--paper), rgba(255, 255, 255, 0)),
		linear-gradient(to left, var(--paper), rgba(255, 255, 255, 0)),
		linear-gradient(to right, rgba(20, 22, 26, 0.16), rgba(20, 22, 26, 0)),
		linear-gradient(to left, rgba(20, 22, 26, 0.16), rgba(20, 22, 26, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
	background-attachment: local, local, scroll, scroll;
}

.section-bar::-webkit-scrollbar {
	display: none;
}

.section-bar ul {
	display: flex;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.section-bar a {
	display: block;
	padding: 0.7rem 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.section-bar a:hover {
	color: var(--ink);
}

.section-bar a[aria-current="page"] {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

/* News list, following OC Media: a small thumbnail left of the text, the
   category as a tag above the headline, byline beneath. */
.news-list,
.news-rows {
	border-top: 2px solid var(--ink);
}

.news-row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 0 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--rule);
}

.news-row.has-no-image {
	grid-template-columns: minmax(0, 1fr);
}

.news-row-thumb {
	display: block;
	overflow: hidden;
	background: var(--wash);
	aspect-ratio: 3 / 2;
}

.news-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.news-row:hover .news-row-thumb img {
	opacity: 0.82;
}

/* A tag, not a coloured chip: red on this site marks an ask and nothing else,
   so the category earns its emphasis from case and weight instead. */
.news-tag {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--wash);
	border: 1px solid var(--rule);
	padding: 0.2rem 0.5rem;
	margin: 0 0 0.5rem;
}

.news-tag:hover {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}

.news-row-title {
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.28;
	margin: 0 0 0.35rem;
}

.news-row-title a {
	color: var(--ink);
}

.news-row-title a:hover {
	color: var(--accent);
}

.news-row-standfirst {
	margin: 0 0 0.5rem;
	font-size: 0.94rem;
	color: var(--muted);
	max-width: 68ch;
}

/* Date and reading time, the way a newsroom bylines a story. */
.news-byline {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--faint);
}

.news-byline .news-readtime::before {
	content: "·";
	margin-right: 0.55rem;
}

/* The lead story on the archive: full-width image, headline at display size. */
.news-lead {
	padding: 1.8rem 0 2.2rem;
	border-bottom: 1px solid var(--rule);
}

.news-lead-thumb {
	display: block;
	overflow: hidden;
	background: var(--wash);
	aspect-ratio: 16 / 9;
	margin-bottom: 1.1rem;
}

.news-lead-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.news-lead:hover .news-lead-thumb img {
	opacity: 0.9;
}

.news-lead-title {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0 0 0.5rem;
}

.news-lead-title a {
	color: var(--ink);
}

.news-lead-title a:hover {
	color: var(--accent);
}

.news-lead-standfirst {
	font-size: 1.05rem;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 0.6rem;
	max-width: 68ch;
}

.news-home {
	padding: 0 0 4rem;
}

/* A grid on the homepage, not a list. Stacked rows left two thirds of the
   width empty and made the section twice the height of the hero; three across
   fills the measure and keeps the whole block shorter than the film it sits
   under. The archive keeps the full-width rows. */
.news-home .news-rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.7rem;
	border-top: 0;
}

.news-home .news-row {
	display: block;
	padding: 0;
	border-bottom: 0;
}

.news-home .news-row-thumb {
	aspect-ratio: 16 / 9;
	margin-bottom: 0.75rem;
}

.news-home .news-row-title {
	font-size: 1.08rem;
	line-height: 1.3;
	margin-bottom: 0.35rem;
}

.news-home .news-row-standfirst {
	font-size: 0.88rem;
	margin-bottom: 0.45rem;
}

.news-more {
	margin: 1.6rem 0 0;
}

.news-more .btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}
/* The rail: browsable, never louder than the stories beside it. */
.news-rail {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
}

.rail-block {
	border-top: 1px solid var(--ink);
	padding-top: 0.7rem;
}

.rail-head {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rail;
}

.rail-list li {
	counter-increment: rail;
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 0 0.6rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--rule);
}

.rail-list li::before {
	content: counter( rail );
	font-size: 1rem;
	font-weight: 600;
	color: var(--accent);
	line-height: 1.35;
}

.rail-list a {
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
}

.rail-list a:hover {
	color: var(--accent);
}

.rail-list time {
	grid-column: 2;
	font-size: 0.75rem;
	color: var(--faint);
	margin-top: 0.2rem;
}

.rail-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rail-cats a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--rule);
	font-size: 0.92rem;
	color: var(--ink);
}

.rail-cats a:hover {
	color: var(--accent);
}

.rail-cats span {
	color: var(--faint);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.news-rail .signup-form {
	flex-wrap: wrap;
}

.news-single .article-body {
	margin-top: 1.5rem;
}

.news-nav {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	border-top: 1px solid var(--rule);
	margin-top: 3rem;
	padding-top: 1.4rem;
}

.news-nav-link {
	max-width: 22rem;
	font-weight: 500;
	color: var(--ink);
}

.news-nav-link.is-prev {
	margin-left: auto;
	text-align: right;
}

.news-nav-link span {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.25rem;
}

.news-nav-link:hover {
	color: var(--accent);
}

/* ==========================================================================
   Campaign banner
   ========================================================================== */

/* Wash ground, ink text, one accent button — it must read as part of the page,
   not as an overlay pasted on top of it. */
.campaign-banner {
	position: relative;
	background: var(--wash);
	border: 1px solid var(--rule);
	border-radius: 4px;
	margin: 2.5rem 0;
	padding: 1.4rem 3rem 1.4rem 1.5rem;
}

.campaign-banner[hidden] {
	display: none;
}

.campaign-heading {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.25rem;
	color: var(--ink);
}

.campaign-body {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	color: var(--muted);
	max-width: 60ch;
}

.campaign-banner .wp-block-buttons {
	margin: 0;
}

.campaign-close {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	width: 1.9rem;
	height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--faint);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.campaign-close:hover {
	color: var(--ink);
	background: var(--rule);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.asks-grid,
	.film-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The rail drops under the stories rather than squeezing both. */
	.news-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.news-home .news-rows {
		grid-template-columns: repeat(2, 1fr);
	}

	.signup-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.2rem;
	}

	/* The tagline is not load-bearing on a small screen, and keeping it forces
	   the masthead onto a second line. */
	.brand-tagline {
		display: none;
	}

	/* Vertical hairlines only make sense while the asks sit side by side. */
	.ask {
		padding: 0 1.4rem;
	}

	.news-rail {
		position: static;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	/* Touch targets. Text links sit at 15–23px tall, under the 24px minimum,
	   and a finger is not a cursor — so the hit area is padded out without
	   moving the text itself. Kept tight: every rem here is header height. */
	.footer-list a,
	.lang-switcher a,
	.section-head .more,
	.premiere a,
	.film-langs a,
	.rail-cats a,
	.news-tag,
	.page-numbers,
	.film-facts dd a,
	.film-strip dd a,
	.eyebrow a,
	.rail-list a,
	.news-row-title a,
	.news-nav-link {
		display: inline-block;
		padding-top: 0.28rem;
		padding-bottom: 0.28rem;
	}

	.lang-switcher {
		gap: 1rem;
	}

	/* Every section visible rather than hidden behind a sideways scroll most
	   people never discover. The nav links already clear 24px from their own
	   padding, so they are left alone. */
	.nav-inner {
		flex-wrap: wrap;
		gap: 0 0.9rem;
	}

	.nav-list {
		flex-wrap: wrap;
		gap: 0 0.9rem;
		overflow-x: visible;
	}

	/* Take the whole row so the four items fit on one line; the Support button
	   drops beneath. Without this the list shares the row with the button and
	   wraps to two lines — it used to shrink and scroll instead, but scrolling
	   clipped the section dropdown. */
	.nav-list {
		flex: 1 1 100%;
	}

	.nav-list a {
		padding: 0.55rem 0;
		font-size: 0.78rem;
	}

	.masthead-inner {
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}

	.nav-actions .btn {
		padding: 0.4rem 0.9rem;
	}

	.hero {
		padding: 2.5rem 0 3rem;
	}

	.brand-name {
		font-size: 1.9rem;
	}

	.asks-grid,
	.film-grid,
	.film-grid-3,
	.footer-grid {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}

	/* Message, countdown and link fit one line; the venue is what has to go,
	   otherwise the strip doubles in height and pushes the film down. */
	.premiere .place {
		display: none;
	}

	.premiere-inner {
		gap: 0.6rem;
	}

	/* Pushing the link to the far right forces a second line at this width;
	   let it sit directly after the countdown instead. */
	.premiere a {
		margin-left: 0;
	}

	/* Stacked, so the dividing rules move from the side to between. */
	.ask {
		padding: 1.4rem 0;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	.ask:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.ask:last-child {
		padding-bottom: 0;
	}

	/* The thumbnail stacks above the headline once the row is too narrow to
	   hold both. The homepage variant needs the same treatment explicitly —
	   its own rule is more specific and would otherwise keep the two columns
	   and push the page sideways. */
	.news-row {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}

	.news-home .news-rows {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.news-row-thumb {
		aspect-ratio: 16 / 9;
	}

	/* No hover on a touch screen, and inlining the categories turned the bar
	   into a long scroll with News listed twice. They stay one tap away in the
	   rail on the news pages instead. */
	.submenu,
	.nav-list .sub-menu {
		display: none;
	}

	.news-nav {
		flex-direction: column;
	}

	.news-nav-link.is-prev {
		margin-left: 0;
		text-align: left;
	}

	.campaign-banner {
		padding: 1.2rem 2.6rem 1.2rem 1.2rem;
	}

	.signup,
	.support-block {
		padding: 3rem 0;
	}

	.spine::before {
		left: 6px;
	}

	.spine-row {
		grid-template-columns: 1fr;
		gap: 0.85rem;
		padding-left: 30px;
	}

	/* Align the decade label with the rows once the year column collapses. */
	.spine-decade h2 {
		padding-left: 30px;
	}

	.spine-row .year {
		text-align: left;
		padding-right: 0;
	}

	.spine-row .year::after {
		left: 2px;
		top: 2.1rem;
	}

	.spine-row .year.is-repeat {
		color: var(--muted);
	}

	.spine-row .year.is-repeat::after {
		left: 3px;
	}

	.spine-thumb {
		max-width: 280px;
	}

	.premiere a {
		margin-left: 0;
	}
}

/* Narrow phones. At 375px the header ran to 276px — a third of the screen
   before any content — because both the announcement strip and the navigation
   needed a second line. Nothing is removed; the type just tightens enough to
   fit one line each. */
@media (max-width: 430px) {
	.premiere {
		font-size: 0.72rem;
	}

	.premiere-inner {
		gap: 0.45rem;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.premiere-inner::-webkit-scrollbar {
		display: none;
	}

	.nav-list {
		gap: 0 0.7rem;
	}

	.nav-list a {
		font-size: 0.72rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   About page
   --------------------------------------------------------------------------
   Two blocks built from the catalogue, not from copy: a funder landing here
   should be able to check the claim without taking anyone's word for it.
   ========================================================================== */

.about-figures,
.about-timeline {
	margin-top: 3.5rem;
}

.figure-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 0;
}

.figure-grid > div {
	background: var(--wash);
	padding: 1.4rem;
}

.figure-grid dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0 0 0.6rem;
}

.figure-grid dd {
	margin: 0;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.figure-note {
	font-size: 0.85rem;
	color: var(--faint);
	margin: 0.9rem 0 0;
}

.decade-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.decade-list li {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) 6.5rem;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rule);
}

.decade-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

/* The bar is decoration; the count beside it carries the number for anyone
   who cannot see it. */
.decade-bar {
	display: block;
	height: 10px;
	background: var(--rule);
}

.decade-bar > span {
	display: block;
	height: 100%;
	background: var(--ink);
}

.decade-count {
	font-size: 0.85rem;
	color: var(--muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.figure-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.decade-list li {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		row-gap: 0.35rem;
	}

	.decade-count {
		grid-column: 2;
		text-align: left;
	}
}

/* ==========================================================================
   Support page
   --------------------------------------------------------------------------
   The rails sit in the first screen: a donation page that makes you scroll to
   find the button is a donation page that does not work. Everything after
   them is evidence rather than persuasion.
   ========================================================================== */

.support-hero {
	background: var(--ink);
	color: #fff;
	padding: 4.5rem 0 5rem;
}

.support-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

.support-hero .eyebrow {
	color: #FF6B6B;
}

.support-hero-title {
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 1.1rem;
	max-width: 16ch;
}

.support-hero-lede p {
	color: #C6C9CD;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 1rem;
}

.rails-lead {
	margin-top: 2rem;
}

/* One rail carries the accent so the eye lands somewhere. A row of identical
   red buttons is a row of no buttons. */
.rail-primary {
	background: var(--accent);
	border-color: var(--accent);
}

.rail-primary:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.rail-primary span {
	color: rgba(255, 255, 255, 0.85);
}

.rails-note {
	font-size: 0.82rem;
	color: var(--faint-on-dark);
	margin: 1rem 0 0;
	max-width: 42ch;
}

.support-hero-aside {
	border-left: 1px solid #2E3238;
	padding-left: 2.2rem;
}

.support-hero-figure {
	display: block;
	font-size: clamp(3rem, 7vw, 4.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.support-hero-caption {
	display: block;
	font-size: 0.85rem;
	color: var(--faint-on-dark);
	margin: 0.5rem 0 1.6rem;
	max-width: 22ch;
}

/* ==========================================================================
   Frames wall
   --------------------------------------------------------------------------
   Most of these films have no still, and that is the information: the empty
   frame is the gap in the record. Used on dark and on paper, so the frame
   takes its colours from whatever it sits on.
   ========================================================================== */

.frames-wall {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1.1rem;
}

.frame a {
	display: block;
	color: inherit;
}

.frame-still {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wash);
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.frame-still img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frame.frame-empty .frame-still::after {
	content: "";
	position: absolute;
	inset: 22% 30%;
	border: 1.5px solid #C9CDD2;
	border-radius: 3px;
}

.frame-year {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.frame-title {
	display: block;
	font-size: 0.86rem;
	line-height: 1.35;
	margin-top: 0.15rem;
}

.frame a:hover .frame-title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* On the dark hero the frame reverses and the titles drop away: it reads as
   a stack of missing films, not as a list to be read. */
.support-hero .frames-wall {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
}

.support-hero .frame-still {
	background: #22262B;
	margin-bottom: 0.35rem;
}

.support-hero .frame.frame-empty .frame-still::after {
	border-color: #454B52;
	inset: 26% 32%;
}

.support-hero .frame-year {
	color: var(--faint-on-dark);
}

.support-hero .frame-title {
	display: none;
}

.locked-films {
	padding: 4.5rem 0 1rem;
}

.section-dek {
	color: var(--muted);
	max-width: 62ch;
	margin: 0 0 2.2rem;
	line-height: 1.6;
}

/* ==========================================================================
   Reserve page
   ========================================================================== */

.screening {
	background: var(--ink);
	color: #fff;
	padding: 3.5rem 0 4rem;
}

.screening-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.screening-figure {
	margin: 0;
}

.screening-still {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #22262B;
	overflow: hidden;
}

.screening-still img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.screening-still.screening-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 42px;
	border: 1.5px solid #454B52;
	border-radius: 3px;
}

.screening-figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--faint-on-dark);
}

.screening .eyebrow {
	color: #FF6B6B;
}

.screening-title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 0.7rem;
}

.screening-film {
	margin: 0 0 1.8rem;
	font-size: 1.05rem;
}

.screening-film a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: #4A5058;
	text-underline-offset: 0.2em;
}

.screening-film a:hover {
	text-decoration-color: var(--accent);
}

.screening-facts {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 1.6rem;
	margin: 0 0 1.6rem;
	justify-content: start;
}

.screening-facts dt {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint-on-dark);
	margin-bottom: 0.35rem;
}

.screening-facts dd {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* The countdown is the one number that changes, so it is the one that grows. */
.screening-countdown dd {
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.01em;
}

.screening-note {
	font-size: 0.86rem;
	color: var(--faint-on-dark);
	margin: 0;
	max-width: 40ch;
	line-height: 1.55;
}

.reserve-ask {
	padding: 4rem 0;
}

.reserve-ask-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

.reserve-form-title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: -0.015em;
	margin: 0 0 0.7rem;
}

.reserve-lede p {
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 1.4rem;
	max-width: 52ch;
}

/* Numbered because the sequence is the reassurance: a reader wants to know
   what will land in their inbox before handing the address over. */
.reserve-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.reserve-steps li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--rule);
}

.step-num {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.4rem;
}

.reserve-steps strong {
	display: block;
	font-size: 1rem;
	margin-bottom: 0.2rem;
}

.reserve-steps span:not(.step-num) {
	display: block;
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.5;
}

.screening-about {
	padding: 0 0 4.5rem;
}

.screening-synopsis {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--muted);
	max-width: 62ch;
	margin: 0;
}

@media (max-width: 900px) {
	.support-hero-grid,
	.screening-grid,
	.reserve-ask-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.support-hero-aside {
		border-left: 0;
		border-top: 1px solid #2E3238;
		padding-left: 0;
		padding-top: 2rem;
	}

	/* The film should lead on a phone, not sit under the heading. */
	.screening-figure {
		order: -1;
	}
}

@media (max-width: 560px) {
	.screening-facts {
		grid-template-columns: repeat(2, auto);
		gap: 1.2rem 2rem;
	}

	.frames-wall {
		grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
		gap: 0.8rem;
	}

	.support-hero .frames-wall {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}
}

/* The film leads the screen, so the ask needs a way up to the top of it. */
.screening-actions {
	margin: 0 0 1.4rem;
}

/* Anchor jumps land under the sticky-ish masthead otherwise. */
.reserve-ask {
	scroll-margin-top: 1.5rem;
}

/* 23px tall unpadded, a pixel under the 24px minimum for a touch target
   (WCAG 2.5.8). Padded without moving the text off its line. */
.screening-film a {
	display: inline-block;
	padding: 0.15rem 0;
}

/* ==========================================================================
   Newsletter page
   --------------------------------------------------------------------------
   The box was the last thing on a 2,500px page, below every recent article.
   It leads now, with what a subscriber gets stated beside it.
   ========================================================================== */

.signup-hero {
	background: var(--ink);
	color: #fff;
	padding: 4rem 0 4.5rem;
}

.signup-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

.signup-hero .eyebrow {
	color: #FF6B6B;
}

.signup-hero-title {
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 1rem;
}

.signup-hero-lede,
.signup-hero-lede p {
	color: #C6C9CD;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 44ch;
	margin: 0;
}

.signup-hero-form .signup-form {
	margin-top: 1.8rem;
}

/* The input is on ink here, so it cannot borrow the light-surface styling. */
.signup-hero-form .signup-form input[type="email"] {
	border-color: #454B52;
	background: #1B1E23;
	color: #fff;
}

.signup-hero-form .signup-form input[type="email"]::placeholder {
	color: #8B9198;
}

.signup-hero-form .signup-form input[type="email"]:focus {
	border-color: #fff;
}

.signup-hero-note {
	font-size: 0.82rem;
	color: var(--faint-on-dark);
	margin: 1.1rem 0 0;
	max-width: 46ch;
	line-height: 1.55;
}

/* The numbered list reverses on the dark column. */
.signup-points-dark {
	border-top-color: #2E3238;
}

.signup-points-dark li {
	border-bottom-color: #2E3238;
}

.signup-points-dark strong {
	color: #fff;
}

.signup-points-dark span:not(.signup-point-num) {
	color: var(--faint-on-dark);
}

.newsletter-recent {
	padding: 4rem 0 4.5rem;
}

/* Six full-width rows ran longer than the whole ask above them. Three across
   turns the same content into evidence you can scan. */
.newsletter-recent .news-rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.7rem;
	border-top: 0;
}

.newsletter-recent .news-row {
	display: block;
	padding: 0;
	border-bottom: 0;
}

.newsletter-recent .news-row-thumb {
	width: 100%;
	margin: 0 0 0.7rem;
}

.newsletter-recent .news-row-title {
	font-size: 1.02rem;
	line-height: 1.3;
}

.newsletter-recent .news-row-standfirst {
	font-size: 0.9rem;
}

@media (max-width: 900px) {
	.signup-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.newsletter-recent .news-rows {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.newsletter-recent .news-rows {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}
}

/* The accent red reads 3.22:1 on ink — fine as a mark, not as text. The dark
   column uses the same lifted red the eyebrows use, which clears AA. */
.signup-points-dark .signup-point-num {
	color: #FF6B6B;
}

/* ==========================================================================
   Newsroom front
   --------------------------------------------------------------------------
   A lead to start on, two beside it, then the list. Run full width the lead
   filled the whole first screen on its own; sharing the band with two
   secondaries puts three ways in above the fold without shrinking the story
   that matters most.
   ========================================================================== */

.page-head-tight {
	padding-bottom: 1.2rem;
}

.news-top {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 2.4rem;
	align-items: start;
	padding-bottom: 2rem;
	margin-bottom: 0.4rem;
	border-bottom: 2px solid var(--ink);
}

/* Inside the band the lead carries its own weight, so it drops the rule and
   the padding it needs when it sits alone in a column. */
.news-top .news-lead {
	padding: 0;
	border-bottom: 0;
}

.news-top .news-lead-title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.news-seconds {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Stacked, not thumb-left: the column is too narrow for a 180px thumbnail
   and a headline to sit side by side without both getting squeezed. */
.news-seconds .news-row {
	display: block;
	padding: 0;
	border-bottom: 0;
}

.news-seconds .news-row + .news-row {
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

.news-seconds .news-row-thumb {
	width: 100%;
	margin: 0 0 0.65rem;
	aspect-ratio: 16 / 9;
}

.news-seconds .news-row-title {
	font-size: 1.02rem;
	line-height: 1.3;
}

.news-seconds .news-row-standfirst {
	font-size: 0.88rem;
}

/* The rail was 1,065px against 2,512px of stories, leaving a long empty
   column. Sticky, it stays useful the whole way down. */
@media (min-width: 901px) {
	.news-rail {
		position: sticky;
		top: 1.5rem;
		align-self: start;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

@media (max-width: 900px) {
	.news-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.8rem;
	}

	.news-seconds {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4rem;
	}

	.news-seconds .news-row + .news-row {
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 560px) {
	.news-seconds {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-seconds .news-row + .news-row {
		padding-top: 1.3rem;
		border-top: 1px solid var(--rule);
	}
}

/* Secondaries carry image, headline and byline only. With a standfirst each
   ran 388px against the lead's 530px, so the pair outgrew the story they sit
   beside — the column stopped reading as secondary. */
.news-seconds .news-row-standfirst {
	display: none;
}


/* ==========================================================================
   Films archive — decade navigation
   --------------------------------------------------------------------------
   The spine stays a chronology; twenty-seven films across twenty-two years
   just needed a way in that is not 6,500px of scrolling.
   ========================================================================== */

.decade-nav {
	margin: 0 0 2rem;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	overflow-x: auto;
	scrollbar-width: none;
}

.decade-nav::-webkit-scrollbar {
	display: none;
}

.decade-nav ul {
	display: flex;
	gap: 2.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.decade-nav a {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.85rem 0;
	color: var(--ink);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.decade-nav a:hover {
	border-bottom-color: var(--accent);
}

.decade-nav-label {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

/* The count is the useful part: it says how much of the archive sits where. */
.decade-nav-count {
	font-size: 0.74rem;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

/* The marker is what the jump lands on, so it needs to clear the top edge
   and read as a section start rather than a caption. */
.spine-decade {
	scroll-margin-top: 1.5rem;
}

.spine-decade h2 {
	font-size: 0.8rem;
}

/* ==========================================================================
   Single film
   ========================================================================== */

/* Year, language and availability, stated with the title. */
.film-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 2.4rem;
	margin: 1.4rem 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rule);
}

.film-strip > div {
	min-width: 0;
}

.film-strip dt {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.3rem;
}

.film-strip dd {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Availability is the one fact with a state, so it is the one that shows it. */
.film-strip-status dd {
	color: var(--accent);
}

.film-strip-status.is-published dd {
	color: #1a7f37;
}

/* A 36-word synopsis in an 876px column is a very long line for very little
   text. Measured instead. */
.film-body {
	margin-top: 2.5rem;
}

.film-body .article-body,
.film-body .notice-unavailable {
	max-width: 68ch;
}

/* ==========================================================================
   Walking the archive
   --------------------------------------------------------------------------
   Newer film on the left, older on the right, because the spine above reads
   newest first and the pair should not contradict it.
   ========================================================================== */

.film-walk {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}

.film-walk-link {
	display: block;
	padding: 1.2rem 1.4rem;
	background: var(--wash);
	color: var(--ink);
}

.film-walk-link:hover {
	background: var(--rule);
}

.film-walk-link.is-next {
	text-align: right;
}

/* When only the older neighbour exists it should still sit on the right,
   where the reader is looking for it. */
.film-walk-link.is-next:only-child {
	grid-column: 2;
}

.film-walk-dir {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.45rem;
}

.film-walk-title {
	display: block;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.3;
}

.film-walk-year {
	display: block;
	font-size: 0.8rem;
	color: var(--muted);
	margin-top: 0.25rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.film-walk {
		grid-template-columns: minmax(0, 1fr);
	}

	.film-walk-link.is-next,
	.film-walk-link.is-next:only-child {
		text-align: left;
		grid-column: 1;
	}

	.decade-nav ul {
		gap: 1.6rem;
	}
}

/* Same scroll shadow the newsroom section bar uses: on a narrow screen the
   decades outrun the viewport, and a hidden scrollbar says nothing. */
.decade-nav {
	background-image:
		linear-gradient(to right, var(--paper), rgba(255, 255, 255, 0)),
		linear-gradient(to left, var(--paper), rgba(255, 255, 255, 0)),
		linear-gradient(to right, rgba(20, 22, 26, 0.16), rgba(20, 22, 26, 0)),
		linear-gradient(to left, rgba(20, 22, 26, 0.16), rgba(20, 22, 26, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* ==========================================================================
   Homepage identity band
   --------------------------------------------------------------------------
   The homepage led with a film and then asked for three things, without ever
   saying what the organisation is. The copy here is the theme's own tagline
   and funding line; the figures come from the catalogue, so they cannot drift
   away from the archive they describe.
   ========================================================================== */

.identity {
	background: var(--wash);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 3.5rem 0;
}

.identity-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.identity-title {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0.9rem;
	max-width: 20ch;
}

.identity-lede {
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 1.5rem;
}

/* Two by two beside the copy rather than four across: at this width four
   columns squeezed the year range onto two lines. */
.figure-grid-pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.figure-grid-pair > div {
	background: var(--paper);
}

.figure-grid-pair dd {
	font-size: 1.7rem;
}

@media (max-width: 900px) {
	.identity-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.2rem;
	}
}

/* ==========================================================================
   Single news article
   --------------------------------------------------------------------------
   The head now carries what the listing row already promised: a section tag
   you can click, the standfirst that sold the piece, and the byline with the
   reading time. Opening a story used to lose all three.
   ========================================================================== */

.article-head .news-tag {
	display: inline-block;
	margin-bottom: 0.9rem;
}

.article-head .article-dek {
	margin-bottom: 1rem;
}

.article-head .news-byline {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule);
}

/* A 14-word announcement across the full column is a very long line for very
   little text; the measure holds whatever the length. */
.news-single .article-body,
.news-single .article-dek {
	max-width: 68ch;
}

/* On a thin section the rail was taller than the stories beside it, so the
   page read as a sidebar with some news attached. Letting it sit at its own
   height stops it setting the height of the page. */
@media (min-width: 901px) {
	.archive .news-rail,
	.category .news-rail {
		align-self: start;
	}
}

/* ==========================================================================
   Header subscribe, About identity
   ========================================================================== */

/* Sits beside the red Support button, so it stays outlined: two filled asks
   in one row means neither is the ask. */
.btn-subscribe {
	padding: 0.55rem 1rem;
	font-size: 0.85rem;
	border-width: 1px;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* The tagline that used to open the homepage. */
.about-tagline {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.9rem;
	max-width: 22ch;
}

.about-lede {
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 0 1.6rem;
}

/* At narrow widths the row has a wordmark and a language switcher to fit
   alongside; the second button is the one that gives way. */
@media (max-width: 560px) {
	.btn-subscribe {
		display: none;
	}
}

/* Two figure columns need about 320px of content width. On a 320px phone,
   once the scrollbar is taken off, they do not fit and the page scrolls
   sideways. Below that they stack. */
@media (max-width: 360px) {
	.figure-grid,
	.figure-grid-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Armenian compounds are long and carry no spaces: «Քաղաքականություն» is one
   word 16 letters long. At 320px a heading like that is wider than its own
   box, and although the box stays put the text pushes the document sideways.
   Headings and titles may break mid-word rather than overflow. */
h1, h2, h3, h4,
.page-title,
.article-title,
.hero-title,
.news-lead-title,
.news-row-title,
.spine-title,
.film-title,
.identity-title,
.about-tagline,
.signup-hero-title,
.support-hero-title,
.screening-title {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Donation progress panel
   --------------------------------------------------------------------------
   The appeal ran full width with an empty right half. The panel fills it with
   the one thing that can be stated truthfully today: how much of the archive
   is public. It becomes the money meter as soon as a real raised figure is
   entered in the Customizer.
   ========================================================================== */

.support-block-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4rem;
	align-items: center;
}

/* The second column only exists when the meter does. Without this the text
   sat in 1.25fr and the remaining 1fr stayed empty. */
@media (min-width: 901px) {
	.support-block-grid:has(.support-progress) {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}
}

.support-progress {
	border-left: 1px solid #2E3238;
	padding-left: 2.4rem;
}

.progress-caption {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint-on-dark);
	margin: 0 0 0.8rem;
}

.progress-figure {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.progress-figure strong {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.progress-figure span {
	font-size: 0.9rem;
	color: #C6C9CD;
	max-width: 18ch;
}

/* The bar is a picture of the number stated above it, so it carries the
   accent and the number carries the meaning. */
.support-progress .meter-track {
	height: 8px;
	background: #2E3238;
	border-radius: 4px;
	overflow: hidden;
}

.support-progress .meter-fill {
	height: 100%;
	background: var(--accent);
	border-radius: 4px;
}

.progress-note {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--faint-on-dark);
	margin: 1rem 0 0;
	max-width: 34ch;
}

@media (max-width: 900px) {
	.support-block-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.support-progress {
		border-left: 0;
		border-top: 1px solid #2E3238;
		padding-left: 0;
		padding-top: 2rem;
	}
}

/* ---------- Front page intro ----------
   The homepage's own words, between the featured film and the news. Slim on
   purpose: it sits inside an approved section order and must not read as a
   sixth band. */

.home-intro {
	padding: 1.6rem 0 0;
}

.home-intro-inner {
	max-width: 62ch;
}

.home-intro p {
	margin: 0 0 0.6rem;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.6;
}

.home-intro p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Screening landing page
   --------------------------------------------------------------------------
   A page with one job, reached from a phone by somebody who has seen one reel
   and knows nothing.

   Every band pairs an explanation on the left with the thing to act on at the
   right, so nobody meets a form without being told first what it is for. On a
   phone the pair stacks, explanation first.

   The palette is the theme's, not the reference mockup's: red marks an ask and
   nothing else, which is why the reserve and support buttons are the only red
   on the page. No keyframes anywhere — the reference leans on motion, and this
   page carries attention with the still and one clear ask instead.
   ========================================================================== */

.screening-page,
.sc-topbar,
.sc-footer {
	/*
	 * Denser than the rest of the site. The theme sets 1.7 because Armenian
	 * ascenders and descenders crowd at the usual 1.5; 1.58 keeps that clear
	 * while taking roughly 90px out of a page this long.
	 */
	font-size: 1rem;
	line-height: 1.58;
}

.screening-page {
	--sc-gutter: 1.25rem;
	--sc-tint: #EEF1F5;
	--sc-radius: 14px;
	--sc-radius-sm: 9px;
	--sc-shadow: 0 1px 2px rgba(20, 22, 26, 0.05);
	--sc-shadow-lift: 0 10px 30px -14px rgba(20, 22, 26, 0.28);
}

/* ---------- Sticky top bar ---------- */

.sc-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--rule);
}

.sc-topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
}

.sc-brandmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--ink);
	text-decoration: none;
	flex: none;
}

.sc-brandmark img {
	display: block;
	height: 30px;
	width: auto;
}

.sc-brandmark::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--accent);
	flex: none;
}

/* The date and venue are supporting detail, so they are the first thing to go
   when the bar runs out of room. */
.sc-topbar-meta {
	display: none;
	font-size: 0.85rem;
	color: var(--muted);
}

.sc-topbar-end {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex: none;
}

.sc-topbar .sc-topbar-cta {
	display: none;
}

/* ---------- Buttons ---------- */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 48px;
	padding: 0 1.5rem;
	border: 1px solid var(--accent);
	border-radius: var(--sc-radius-sm);
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sc-btn:hover,
.sc-btn:focus-visible {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

.sc-btn-outline {
	background: var(--paper);
	border-color: var(--rule);
	color: var(--ink);
}

.sc-btn-outline:hover,
.sc-btn-outline:focus-visible {
	background: var(--wash);
	border-color: var(--ink);
	color: var(--ink);
}

.sc-btn-sm {
	width: auto;
	min-height: 40px;
	padding: 0 1rem;
	font-size: 0.88rem;
}

/* ---------- Bands ---------- */

.sc-section {
	padding: 2rem 0;
}

.sc-section-wash {
	background: var(--wash);
}

.sc-section-tint {
	background: var(--sc-tint);
}

/* ---------- Section headers ---------- */

.sc-head {
	margin-bottom: 1rem;
}

.sc-head h2 {
	font-size: clamp(1.2rem, 2.8vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.018em;
	margin: 0;
	overflow-wrap: break-word;
}

.sc-head p {
	max-width: 56ch;
}

/* The rule before the label is the page's one repeated ornament. It is what
   makes six unrelated bands read as one document. */
.sc-kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.75rem;
}

.sc-kicker::before {
	content: "";
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	flex: none;
}

/* ---------- Text utilities ---------- */

.sc-lede {
	font-size: 1rem;
	line-height: 1.5;
}

.sc-sm {
	font-size: 0.88rem;
	line-height: 1.55;
}

.sc-muted {
	color: var(--muted);
}

.sc-stack > * + * {
	margin-top: 0.6rem;
}

.sc-prose p {
	margin: 0 0 0.75rem;
}

.sc-prose p:last-child {
	margin-bottom: 0;
}

/* ---------- Split layout ---------- */

.sc-split {
	display: grid;
	gap: 1.75rem;
	align-items: start;
}

/* ---------- Hero ---------- */

.sc-hero {
	padding: 1.5rem 0 2rem;
	background: linear-gradient(180deg, var(--wash) 0%, var(--paper) 78%);
}

.sc-hero-inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.sc-stamp {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 999px;
	box-shadow: var(--sc-shadow);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink);
}

.sc-stamp i {
	font-style: normal;
	color: var(--rule);
}

/* The last separator has nothing after it once the row wraps. */
.sc-stamp span:last-child + i,
.sc-stamp i:last-child {
	display: none;
}

.sc-h1 {
	font-size: clamp(1.8rem, 4.8vw, 2.45rem);
	line-height: 1.1;
	letter-spacing: -0.022em;
	font-weight: 700;
	margin: 0;
	overflow-wrap: break-word;
}

.sc-hero .sc-lede {
	margin: 0.7rem 0 0;
	max-width: 46ch;
	color: var(--muted);
}

.sc-hero-actions {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.1rem;
	max-width: 24rem;
}

.sc-hero-foot {
	margin: 0.75rem 0 0;
	font-size: 0.88rem;
	color: var(--muted);
}

.sc-hero-visual {
	margin-top: 1.1rem;
}

/* ---------- Image frames ----------
   One treatment for every image on the page. The empty state is a frame rather
   than a broken box: several of these will stay empty for weeks. */

.sc-ph {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius-sm);
	background: var(--wash);
}

.sc-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-ph:not(.has-image)::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42px;
	height: 32px;
	border: 1.5px solid var(--rule);
	border-radius: 3px;
}

.sc-ph-hero {
	aspect-ratio: 16 / 10;
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow-lift);
}

@media (min-width: 768px) {
	.sc-ph-hero {
		aspect-ratio: 4 / 3;
	}
}

.sc-ph-wide {
	aspect-ratio: 16 / 9;
}

.sc-ph-sq {
	aspect-ratio: 1 / 1;
}

.sc-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--sc-radius-sm);
	overflow: hidden;
	background: var(--ink);
}

.sc-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

figure {
	margin: 0;
}

.sc-gallery figcaption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ---------- About ---------- */

.sc-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.sc-gallery-lead {
	grid-column: 1 / -1;
}

.sc-pull {
	margin: 1.1rem 0 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 3px solid var(--accent);
}

.sc-pull p {
	margin: 0;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.sc-pull cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 400;
	color: var(--muted);
}

.sc-where {
	margin: 1.1rem 0 0;
	color: var(--muted);
}

.sc-where strong {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 0.25rem;
}

/* Standalone link, so WCAG 2.5.8 applies and the inline exception does not. */
.sc-where a {
	display: inline-block;
	min-height: 24px;
	padding: 3px 0;
}

/* ---------- Cards ---------- */

.sc-card,
.sc-split-aside .reserve-box,
.sc-split-aside .reserve-done {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius);
	padding: 1.25rem;
	box-shadow: var(--sc-shadow);
}

.sc-card-title {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.sc-card-title-sub {
	margin-top: 1.1rem;
}

/* ---------- Seat counter ---------- */

.sc-seats {
	margin-bottom: 1rem;
}

.sc-seats-label {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ink);
}

.sc-seats-label span:last-child {
	color: var(--muted);
	font-weight: 500;
}

.sc-seats-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--rule);
	overflow: hidden;
}

.sc-seats-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
}

/* ---------- Support ---------- */

.sc-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.sc-tier {
	min-height: 66px;
	padding: 0.75rem 0.25rem;
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius-sm);
	background: var(--paper);
	font-family: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.sc-tier b {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}

.sc-tier span {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--muted);
}

.sc-tier:hover {
	border-color: var(--ink);
}

.sc-tier[aria-pressed="true"] {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.sc-chosen {
	margin: 0 0 0.25rem;
	font-size: 0.82rem;
	color: var(--muted);
	min-height: 1.3em;
}

.sc-rails {
	display: grid;
	gap: 0.5rem;
}

.sc-formnote {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

.sc-formnote-empty {
	padding: 0.75rem;
	border: 1px dashed var(--rule);
	border-radius: var(--sc-radius-sm);
	background: var(--wash);
}

.sc-impact {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.sc-impact li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	font-size: 0.88rem;
}

.sc-impact b {
	flex: none;
	min-width: 6rem;
	font-weight: 700;
	color: var(--ink);
}

/* ---------- Newsletter ---------- */

.sc-newsletter-inner {
	max-width: 46rem;
}

/* ---------- Team ---------- */

.sc-people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem 0.9rem;
}

.sc-person .sc-ph {
	margin-bottom: 0.75rem;
}

.sc-person h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.25rem;
	overflow-wrap: break-word;
}

.sc-person p {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--muted);
}

.sc-partners {
	margin-top: 1.5rem;
}

.sc-partners-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.75rem;
}

.sc-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.84rem;
	color: var(--muted);
}

/* ---------- Footer ---------- */

.sc-footer {
	background: var(--ink);
	color: #BFC4CB;
	padding: 2rem 0;
	font-size: 0.88rem;
}

.sc-footer h3 {
	color: #fff;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
}

.sc-footer p {
	margin: 0;
	line-height: 1.65;
}

.sc-footer a {
	display: inline-block;
	padding: 3px 0;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.sc-footer a:hover {
	border-bottom-color: var(--accent);
}

.sc-footer .sc-brandmark {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

.sc-footer-grid {
	display: grid;
	gap: 1.2rem;
}

.sc-footer-legal {
	margin-top: 1.4rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.8rem;
	color: #8B9099;
}

/* ---------- Floating action bar, phones only ---------- */

.sc-actionbar {
	position: fixed;
	z-index: 40;
	left: var(--sc-gutter);
	right: var(--sc-gutter);
	bottom: var(--sc-gutter);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: saturate(1.4) blur(10px);
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow-lift);
}

.sc-actionbar-meta {
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.sc-actionbar-meta b {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink);
}

.sc-actionbar-meta span {
	font-size: 0.78rem;
	color: var(--muted);
}

/* The bar is fixed over the page, so the footer needs room to clear it. */
.is-screening {
	padding-bottom: 5.5rem;
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
	.is-screening {
		padding-bottom: 0;
	}

	.sc-actionbar {
		display: none;
	}

	.sc-topbar-meta {
		display: inline;
	}

	.sc-topbar .sc-topbar-cta {
		display: inline-flex;
	}

	.sc-section {
		padding: 2.6rem 0;
	}

	.sc-hero {
		padding: 2.6rem 0 2.8rem;
	}

	.sc-hero-inner {
		grid-template-columns: 1.02fr 1fr;
		gap: 2.4rem;
	}

	.sc-hero-visual {
		margin-top: 0;
	}

	.sc-hero-actions {
		grid-template-columns: 1fr 1fr;
		max-width: 27rem;
	}

	.sc-split {
		grid-template-columns: 1fr 1fr;
		gap: 2.4rem;
	}

	/* The form column carries more weight than the words beside it. */
	.sc-split-form {
		grid-template-columns: 0.92fr 1.08fr;
	}

	.sc-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.sc-people {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sc-footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.sc-card,
	.sc-split-aside .reserve-box,
	.sc-split-aside .reserve-done {
		padding: 1.5rem;
	}
}

/* ---------- The reservation form ----------
   Shared with the main site's reserve page, so these are the component's own
   styles rather than screening-page overrides. */

.reserve-box {
	background: var(--wash);
	border-radius: var(--sc-radius, 14px);
	padding: 1.5rem;
}

.reserve-box-title {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1rem;
	overflow-wrap: break-word;
}

.reserve-box-dek {
	margin: 0 0 1.2rem;
	color: var(--muted);
	line-height: 1.6;
}

.reserve-errors {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--accent);
	background: var(--paper);
	border-radius: 0 4px 4px 0;
}

.reserve-errors p {
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	color: var(--ink);
}

.reserve-errors p:last-child {
	margin-bottom: 0;
}

.reserve-field {
	margin: 0 0 0.75rem;
}

.reserve-field label,
.reserve-consent span {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ink);
	margin-bottom: 0.25rem;
}

.reserve-field input,
.reserve-field select {
	width: 100%;
	min-height: 48px;
	padding: 0 0.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius-sm, 9px);
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: 1rem;
}

.reserve-field input:focus,
.reserve-field select:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.12);
}

.reserve-field input[aria-invalid="true"] {
	border-color: var(--accent);
}

.reserve-field-seats select {
	padding-right: 1.5rem;
}

.reserve-help {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
}

.reserve-consent {
	margin: 1rem 0;
}

.reserve-consent label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	cursor: pointer;
}

.reserve-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	accent-color: var(--accent);
}

.reserve-consent span {
	margin-bottom: 0;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--muted);
}

.reserve-note {
	margin: 0 0 1rem;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--muted);
}

.reserve-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 1.5rem;
	border: 1px solid var(--accent);
	border-radius: var(--sc-radius-sm, 9px);
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.reserve-submit:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.reserve-submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.reserve-message {
	margin: 0.75rem 0 0;
	font-size: 0.88rem;
	color: var(--muted);
}

.reserve-message.is-error {
	color: var(--accent);
}

.reserve-done {
	background: var(--wash);
	border-radius: var(--sc-radius, 14px);
	padding: 1.5rem;
}

.reserve-done:focus {
	outline: none;
}

.reserve-done-mark {
	display: inline-block;
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	color: var(--accent);
}

.reserve-done .reserve-box-title {
	margin-bottom: 0.6rem;
}

.reserve-done-facts {
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--rule);
}

.reserve-done-facts dt {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.2rem;
}

.reserve-done-facts dd {
	margin: 0 0 0.7rem;
	font-weight: 500;
}

.reserve-done-sent {
	margin: 1rem 0 0;
	font-size: 0.82rem;
	color: var(--muted);
}

.reserve-done-warning {
	margin: 0.6rem 0 0;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--accent);
	background: var(--paper);
	font-size: 0.82rem;
}

.reserve-ask-donate {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule);
}

.reserve-ask-donate h3 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}

.reserve-ask-donate p {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--muted);
}

.reserve-declare {
	margin: 1rem 0 0;
	font-size: 0.82rem;
}

.reserve-declare a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.reserve-declare a:hover {
	color: var(--ink);
}

/* ---------- Newsletter form, shared ---------- */

.sc-newsletter .signup-form {
	display: grid;
	gap: 0.5rem;
}

.sc-newsletter .signup-form input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: 0 0.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--sc-radius-sm);
	background: var(--paper);
	font-family: inherit;
	font-size: 1rem;
}

.sc-newsletter .signup-form input[type="email"]:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.12);
}

.sc-newsletter .signup-form .btn {
	min-height: 48px;
	border-radius: var(--sc-radius-sm);
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
	font-weight: 600;
}

.sc-newsletter .signup-form .btn:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.sc-newsletter .signup-message {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.88rem;
	color: var(--muted);
}

@media (min-width: 768px) {
	.sc-newsletter .signup-form {
		grid-template-columns: 1fr auto;
		align-items: start;
	}

	.sc-newsletter .signup-form .btn {
		width: auto;
		min-width: 10rem;
	}
}
/* ==========================================================================
   Screening page — donation and newsletter sections
   --------------------------------------------------------------------------
   Both sit below the reservation form. The seat is the page's job; an ask
   placed above the form competes with it. These catch the people the form
   never reaches: anyone who cannot come, and anyone who found the page and
   did not fill it in.
   ========================================================================== */

.sc-donate {
	background: var(--ink);
	color: #fff;
	padding: 3.5rem 0;
	margin-top: 1rem;
}

.sc-donate-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

/* Same as the support block: the meter column exists only when the meter
   does, which it does not until a real figure is entered. */
@media (min-width: 901px) {
	.sc-donate-grid:has(.support-progress) {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}

.sc-donate .eyebrow {
	color: #FF6B6B;
}

.sc-donate-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0.8rem;
	max-width: 18ch;
}

/* The donate page keeps the plain heading rather than the screening page's
   kicker-and-rule pair; it is reached deliberately, not scrolled through. */
.sc-heading {
	font-size: clamp(1.35rem, 3vw, 1.8rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 1rem;
	overflow-wrap: break-word;
}

.sc-donate-lede {
	color: #C6C9CD;
	line-height: 1.6;
	max-width: 48ch;
	margin: 0 0 1.8rem;
}

@media (max-width: 900px) {
	.sc-donate-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.2rem;
	}

	/* The meter is evidence for the ask above it, so it follows rather than
	   leading once the columns stack. */
	.sc-donate .support-progress {
		border-left: 0;
		border-top: 1px solid #2E3238;
		padding-left: 0;
		padding-top: 1.8rem;
	}
}

/* The theme pads text links for touch below 640px only, which is right for a
   site read mostly on desktop. This page is the opposite: it is reached from
   phones and tablets, and the switcher is one of three controls on it. Padded
   at every width here rather than changing the rule site-wide. */
.is-screening .lang-switcher a {
	display: inline-block;
	padding-top: 0.28rem;
	padding-bottom: 0.28rem;
}

/* ==========================================================================
   Screening page — concept, quotes, team, support hand-off
   --------------------------------------------------------------------------
   No motion anywhere in here. The reference the brief pointed at leans on
   animation to carry attention; this page carries it with the film still and
   one clear ask, which also survives a slow connection and a reduced-motion
   setting without special cases.
   ========================================================================== */
/* ---------- Donate and subscribe pages ---------- */

.donate-lead {
	margin-top: 0;
}

.donate-why {
	padding: 3rem 0 1rem;
}

.donate-why-lede {
	color: var(--muted);
	line-height: 1.6;
	max-width: 62ch;
	margin: 0 0 2rem;
}

.donate-declare {
	padding-bottom: 3rem;
	font-size: 0.88rem;
}

.sub-lead {
	padding: 3rem 0 2rem;
	max-width: 40rem;
}

.sub-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0.9rem;
}

.sub-lede,
.sub-lede p {
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
}

.sub-form {
	margin-top: 1.6rem;
}

.sub-note {
	font-size: 0.82rem;
	color: var(--faint);
	margin: 1rem 0 0;
}

.sub-points {
	padding-bottom: 3.5rem;
}