/* ============================================================
   Self-hosted type. Replaces the fonts.googleapis.com request
   that Lighthouse measured at 780 ms — and stops every visitor's
   IP reaching Google before they have consented to anything.
   Subset to Latin + Latin Extended, static instances.
   ============================================================ */
@font-face{ font-family:'Libre Franklin'; src:url(../fonts/franklin-600.woff2) format('woff2');
	font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Libre Franklin'; src:url(../fonts/franklin-700.woff2) format('woff2');
	font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Source Serif 4'; src:url(../fonts/serif-400.woff2) format('woff2');
	font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Source Serif 4'; src:url(../fonts/serif-600.woff2) format('woff2');
	font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Source Serif 4'; src:url(../fonts/serif-400i.woff2) format('woff2');
	font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url(../fonts/mono-400.woff2) format('woff2');
	font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url(../fonts/mono-500.woff2) format('woff2');
	font-weight:500; font-style:normal; font-display:swap; }

/* ============================================================
   Ida Rolf — Mother of Fascia
   Tokens
   ============================================================ */
:root{
	--ink:      #120620;   /* deepest aubergine — page ground */
	--deep:     #1E0A33;   /* section ground */
	--violet:   #43206B;   /* structural violet — type and rules on parchment */
	--brass:    #B08F42;   /* muted gold — plumb line, hairlines, labels */
	--parch:    #EAE2CE;   /* parchment — reading ground */
	--gold:     #D9AE45;   /* gold — actions and emphasis */

	--on-dark:  #D9CFE4;
	--on-light: #2E1B44;

	--wrap: 1560px;
	--gut: clamp(18px, 2.6vw, 44px);
	--inset: clamp(16px, 2.1vw, 38px);
	--pad: clamp(72px, 11vh, 148px);

	--display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
	--body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	background:var(--ink);
	color:var(--on-dark);
	font-family:var(--body);
	font-size:clamp(17px,1.05vw,19px);
	line-height:1.68;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

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

::selection{ background:var(--gold); color:var(--ink); }

:where(a,button,input,textarea,summary):focus-visible{
	outline:3px solid var(--gold);
	outline-offset:3px;
}

.wrap{
	max-width:var(--wrap);
	margin:0 auto;
	padding-left:calc(var(--gut) + var(--inset));
	padding-right:calc(var(--gut) + var(--inset));
}

.skip{
	position:absolute; left:-9999px; top:0; z-index:100;
	background:var(--gold); color:var(--ink);
	padding:14px 20px; font-family:var(--mono); font-size:14px;
}
.skip:focus{ left:0; }

/* Hidden from view, still part of the accessible name. Used by the language
   switcher so its button reads "Language: EN" rather than losing the "EN". */
.vh{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
	white-space:nowrap; border:0;
}

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

/* ============================================================
   Signature — the plumb line
   Every Structural Integration photograph since the 1960s is
   shot against a vertical reference. This page uses the same
   reference as its layout spine.
   ============================================================ */
.plumb{
	position:fixed; inset:0; z-index:3; pointer-events:none;
}
.plumb__inner{
	position:relative; height:100%;
	max-width:var(--wrap); margin:0 auto;
	padding:0 var(--gut);
}
.plumb__line{
	position:absolute; top:0; bottom:0; left:var(--gut);
	width:1px; background:rgba(176,143,66,.55);
	transform-origin:top;
	animation:drop 1s cubic-bezier(.4,0,.1,1) both;
}
.plumb__line--right{
	left:auto; right:var(--gut);
	background:rgba(176,143,66,.22);
	animation-delay:.12s;
}
@keyframes drop{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

@media (prefers-reduced-motion:reduce){
	.plumb__line{ animation:none; }
}
@media (max-width:720px){
	.plumb__line--right{ display:none; }
}

/* ============================================================
   Masthead
   ============================================================ */
.masthead{
	position:fixed; top:0; left:0; right:0; z-index:10;
	background:rgba(18,6,32,.72);
	backdrop-filter:saturate(150%) blur(14px);
	-webkit-backdrop-filter:saturate(150%) blur(14px);
	border-bottom:1px solid rgba(176,143,66,.24);
	transition:background .3s ease;
}
.masthead__inner{
	display:flex; align-items:center; gap:24px;
	height:62px;
	max-width:var(--wrap); margin:0 auto; padding:0 calc(var(--gut) + var(--inset));
}
.masthead__mark{
	font-family:var(--display);
	font-weight:700;
	font-size:15px; letter-spacing:.09em; text-transform:uppercase;
	color:#fff; text-decoration:none; white-space:nowrap;
}
.masthead__mark span{ color:var(--brass); }
.masthead__nav{
	margin-left:auto;
	display:flex; align-items:center; gap:clamp(14px,2vw,30px);
}
.masthead__nav a{
	font-family:var(--mono); font-size:13px; letter-spacing:.02em;
	color:var(--on-dark); text-decoration:none;
	padding:6px 0; border-bottom:1px solid transparent;
	transition:color .2s,border-color .2s;
}
.masthead__nav a:hover{ color:#fff; border-bottom-color:var(--brass); }
.masthead__nav a.is-cta{
	background:var(--gold); color:var(--ink);
	padding:9px 18px; border:0; font-weight:500;
}
.masthead__nav a.is-cta:hover{ background:#fff; }

.masthead__toggle{
	display:none; margin-left:auto;
	background:none; border:1px solid rgba(176,143,66,.5);
	color:#fff; font-family:var(--mono); font-size:12px;
	letter-spacing:.08em; text-transform:uppercase;
	padding:9px 14px; cursor:pointer;
}

@media (max-width:1000px){
	.masthead__toggle{ display:block; }
	.masthead__nav{
		position:absolute; top:62px; left:0; right:0;
		flex-direction:column; align-items:stretch; gap:0;
		background:var(--ink);
		border-bottom:1px solid rgba(176,143,66,.3);
		padding:8px calc(var(--gut) + var(--inset)) 22px;
		margin-left:0;
	}
	.masthead__nav[hidden]{ display:none; }
	.masthead__nav a{
		padding:15px 0; font-size:15px;
		border-bottom:1px solid rgba(176,143,66,.16);
	}
	.masthead__nav a.is-cta{
		margin-top:16px; text-align:center; padding:15px;
	}
}

/* ============================================================
   Shared section furniture
   ============================================================ */
.band{ padding:var(--pad) 0; position:relative; }
.band--ink{ background:var(--ink); }
.band--deep{ background:var(--deep); }
.band--parch{ background:var(--parch); color:var(--on-light); }
/* A parchment band running on from the one above: no colour change to mark
   the join, so the separation has to come from space. */
.band--flow{ padding-top:clamp(64px,9vh,116px); }

.eyebrow{
	font-family:var(--mono); font-size:12px;
	letter-spacing:.16em; text-transform:uppercase;
	color:var(--brass);
	display:flex; align-items:center; gap:14px;
	margin-bottom:26px;
}
.eyebrow::after{
	content:""; flex:1; height:1px;
	background:currentColor; opacity:.32;
}
.band--parch .eyebrow{ color:var(--violet); }

h2.head{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(29px,4.1vw,50px);
	line-height:1.03; letter-spacing:-.015em;
	color:#fff; margin-bottom:28px;
	text-wrap:balance;
}
.band--parch h2.head{ color:var(--ink); }

h3.sub{
	font-family:var(--display);
	font-weight:600;
	font-size:clamp(18px,1.9vw,23px);
	line-height:1.25; color:#fff; margin-bottom:12px;
}
.band--parch h3.sub{ color:var(--ink); }

.lede{
	font-size:clamp(19px,1.7vw,24px);
	line-height:1.55; max-width:34ch;
}

.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.15em; }
.prose a{ color:var(--gold); text-underline-offset:3px; }
.band--parch .prose a{ color:var(--violet); }

/* Buttons */
.btn{
	display:inline-flex; align-items:center; gap:10px;
	font-family:var(--display);
	font-weight:600;
	font-size:16px; letter-spacing:.01em;
	padding:15px 28px; text-decoration:none;
	border:1px solid transparent; cursor:pointer;
	transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--gold); color:var(--ink); }
.btn--primary:hover{ background:#fff; }
.btn--ghost{ border-color:rgba(217,207,228,.45); color:#fff; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.band--parch .btn--ghost{ border-color:rgba(67,32,107,.45); color:var(--violet); }
.band--parch .btn--ghost:hover{ border-color:var(--violet); background:var(--violet); color:var(--parch); }

/* Scroll reveal */
.js .rise{ opacity:0; transform:translateY(22px); }
html .rise.in{ opacity:1; transform:none; transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){
	.js .rise{ opacity:1; transform:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
	position:relative;
	min-height:100svh;
	display:flex; align-items:flex-end;
	padding:140px 0 clamp(48px,8vh,90px);
	overflow:hidden;
	background:var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video{
	width:100%; height:100%; object-fit:cover;
	filter:saturate(.55) contrast(1.05);
}
.hero__scrim{
	position:absolute; inset:0; z-index:1;
	background:
		linear-gradient(180deg, rgba(18,6,32,.86) 0%, rgba(18,6,32,.42) 32%, rgba(18,6,32,.9) 78%, var(--ink) 100%),
		linear-gradient(90deg, rgba(18,6,32,.8) 0%, rgba(18,6,32,.18) 62%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }

.hero__dates{
	font-family:var(--mono); font-size:13px;
	letter-spacing:.22em; color:var(--brass);
	margin-bottom:20px;
}
.hero__title{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(34px,5.9vw,80px);
	line-height:.92; letter-spacing:-.028em;
	color:#fff; text-transform:uppercase;
	margin-bottom:26px;
}
.hero__title span{ display:block; }
.hero__title .t2{
	color:var(--gold);
	font-weight:400;
}
.hero__lede{
	font-size:clamp(18px,2vw,26px);
	line-height:1.45; color:#EFE7F5;
	max-width:30ch; margin-bottom:34px;
	border-left:2px solid var(--brass); padding-left:22px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }
.hero__meta{
	font-family:var(--mono); font-size:13px;
	letter-spacing:.04em; color:var(--on-dark);
	display:flex; flex-wrap:wrap; gap:8px 18px;
}
.hero__meta span::after{ content:" ·"; opacity:.4; margin-left:16px; }
.hero__meta span:last-child::after{ content:""; }

.hero__laurels{
	display:flex; align-items:center; gap:clamp(18px,4vw,52px);
	margin-top:44px; flex-wrap:wrap;
}
.hero__laurels img{ height:clamp(52px,7vw,86px); width:auto; opacity:.92; }
/* Laurel3.png ships as pure black artwork — invisible on a dark ground. */
.hero__laurels img.laurel--invert{ filter:brightness(0) invert(1); }

.videobtn{
	position:absolute; right:calc(var(--gut) + var(--inset)); bottom:26px; z-index:4;
	background:rgba(18,6,32,.6); border:1px solid rgba(217,207,228,.4);
	color:#fff; width:44px; height:44px; cursor:pointer;
	font-family:var(--mono); font-size:13px;
	display:grid; place-items:center;
	transition:border-color .2s,background .2s;
}
.videobtn:hover{ border-color:var(--gold); background:var(--ink); }

/* ============================================================
   Thesis — the film's own argument, full bleed
   ============================================================ */
.thesis{
	background:var(--deep);
	padding:clamp(96px,16vh,190px) 0;
	position:relative;
}
.thesis blockquote{
	font-family:var(--display);
	font-weight:600;
	font-size:clamp(25px,4.2vw,53px);
	line-height:1.08; letter-spacing:-.02em;
	color:#fff; max-width:19ch;
	text-wrap:balance;
}
.thesis blockquote em{
	font-style:normal; color:var(--gold);
	font-weight:400;
}
.thesis__note{
	font-family:var(--mono); font-size:13px; line-height:1.9;
	color:var(--brass); margin-top:38px; max-width:46ch;
}
.thesis__note a{ color:var(--gold); }

/* ============================================================
   Watch — the page's primary job, stated once
   ============================================================ */
.watch__grid{
	display:grid; gap:clamp(28px,4vw,64px);
	grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
	align-items:start;
}
@media (max-width:860px){ .watch__grid{ grid-template-columns:1fr; } }

.platforms{ display:grid; gap:1px; background:rgba(67,32,107,.28); border:1px solid rgba(67,32,107,.28); }
.platform{
	background:var(--parch);
	position:relative;
	display:flex; align-items:baseline; gap:16px;
	padding:22px 46px 22px 24px; text-decoration:none;
	transition:background .2s;
}
.platform:hover{ background:#DFD5BC; }
.platform__name{
	font-family:var(--display);
	font-weight:600;
	font-size:19px; color:var(--ink);
}
.platform__note{ font-family:var(--mono); font-size:12.5px; color:var(--violet); }
/* The arrow sits outside the flex flow, in a 46px gutter reserved by the row's
   padding. Inside the flow, a long name plus a long note pushed it onto a
   second line and stretched the row: "Google Play" with the Europe note in en,
   "Alle Moeglichkeiten zum Ansehen" in de. */
.platform__go{
	position:absolute; right:24px; top:21px;
	color:var(--violet); font-size:19px; line-height:1;
}

/* Vimeo is the only platform that carries the subtitles, so the language
   chips live inside its card. The card is a wrapper, not the link itself,
   which keeps the nine chips out of the link's accessible name. */
.platform--vimeo{ display:block; padding:0; }
.platform--vimeo:hover{ background:var(--parch); }
.platform__link{
	position:relative;
	display:flex; align-items:baseline; gap:16px;
	padding:22px 46px 15px 24px; text-decoration:none;
	transition:background .2s;
}
.platform__link:hover{ background:#DFD5BC; }
.platform__langs{
	display:flex; flex-wrap:wrap; gap:6px;
	margin:0; padding:0 24px 20px;
}
.platform__langs li{
	list-style:none; font-family:var(--mono); font-size:11.5px;
	letter-spacing:.04em; padding:5px 9px;
	border:1px solid rgba(67,32,107,.32); color:var(--violet);
}

/* ============================================================
   Trailer
   ============================================================ */
.frame{
	position:relative; width:100%; padding-top:56.25%;
	background:#000; border:1px solid rgba(176,143,66,.3);
}
.frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.frame__nojs{
	position:absolute; inset:0; z-index:2; display:flex;
	align-items:flex-end; justify-content:center; padding:0 16px 22px;
	font-family:var(--mono); font-size:13px; color:var(--gold);
	text-align:center; text-decoration:underline; text-underline-offset:3px;
}
.frame__cap{
	font-family:var(--mono); font-size:12.5px;
	color:var(--brass); margin-top:14px;
	display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
/* Escape hatch. YouTube refuses to play some embeds — age gates, regional
   blocks, hardened browsers — and the frame then shows a sign-in prompt that
   goes nowhere. This link gives the visitor one click to the video itself. */
.frame__alt{
	color:var(--gold); text-decoration:underline;
	text-underline-offset:3px; text-decoration-thickness:1px;
	white-space:nowrap;
}
.frame__alt:hover,.frame__alt:focus-visible{ color:var(--parch); }

/* ============================================================
   Reviews
   ============================================================ */
.quotes{
	columns:2; column-gap:clamp(28px,3vw,52px);
}
@media (min-width:1180px){ .quotes{ columns:3; } }
@media (max-width:820px){ .quotes{ columns:1; } }
.quote{
	break-inside:avoid; margin-bottom:clamp(28px,3.4vw,44px);
	padding-left:20px; border-left:2px solid rgba(67,32,107,.4);
}
.quote p{
	font-size:clamp(17px,1.4vw,20px); line-height:1.5;
	color:var(--on-light); margin-bottom:10px;
}
.quote cite{
	font-family:var(--mono); font-style:normal;
	font-size:12.5px; letter-spacing:.08em;
	text-transform:uppercase; color:var(--violet);
}

/* ============================================================
   About + fact table
   ============================================================ */
.about__grid{
	display:grid; gap:clamp(32px,5vw,72px);
	grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
	align-items:start;
}
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }

.facts{ border-top:1px solid rgba(67,32,107,.32); }
.facts div{
	display:grid; grid-template-columns:104px 1fr; gap:18px;
	padding:13px 0; border-bottom:1px solid rgba(67,32,107,.18);
	align-items:baseline;
}
.facts dt{
	font-family:var(--mono); font-size:11.5px;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--violet);
}
.facts dd{ font-size:16.5px; line-height:1.45; }
.facts a{ color:var(--violet); }

/* ============================================================
   Cast portraits + credits
   ============================================================ */
.cast{
	display:grid; gap:clamp(16px,2.2vw,30px);
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	margin-bottom:clamp(56px,8vw,96px);
}
.person figure{ margin:0; }
.person img{
	width:100%; aspect-ratio:1/1; object-fit:cover;
	background:var(--violet);
	filter:grayscale(1) contrast(1.06);
	transition:filter .45s ease;
}
.person:hover img{ filter:grayscale(0) contrast(1); }
.person figcaption{
	font-family:var(--mono); font-size:12.5px;
	letter-spacing:.03em; color:var(--on-dark);
	margin-top:10px; line-height:1.4;
}

.credits{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:clamp(22px,3vw,44px);
	border-top:1px solid rgba(176,143,66,.28); padding-top:34px;
}
.credit dt{
	font-family:var(--mono); font-size:11.5px;
	letter-spacing:.13em; text-transform:uppercase;
	color:var(--brass); margin-bottom:7px;
}
.credit dd{ font-size:16.5px; line-height:1.5; color:#fff; }
.credit + .credit{ margin-top:0; }

.historic{
	margin-top:clamp(40px,5vw,68px);
	border-top:1px solid rgba(176,143,66,.28); padding-top:30px;
}
.historic p{
	font-size:15.5px; line-height:1.85; color:var(--on-dark);
	max-width:76ch;
}

/* ============================================================
   Read more cards
   ============================================================ */
.reads{
	display:grid; gap:1px; background:rgba(67,32,107,.26);
	border:1px solid rgba(67,32,107,.26);
	grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.read{
	background:var(--parch); padding:30px 26px 34px;
	text-decoration:none; display:flex; flex-direction:column; gap:10px;
	transition:background .2s;
}
.read:hover{ background:#DFD5BC; }
.read__n{
	font-family:var(--mono); font-size:11.5px;
	letter-spacing:.14em; color:var(--violet);
}
.read__t{
	font-family:var(--display);
	font-weight:600;
	font-size:20px; line-height:1.2; color:var(--ink);
}
.read__d{ font-size:15.5px; line-height:1.5; color:var(--on-light); }

/* ============================================================
   Contact
   ============================================================ */
.contact__grid{
	display:grid; gap:clamp(32px,5vw,72px);
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:start;
}
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:16px; }
.field label{
	display:block; font-family:var(--mono);
	font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
	color:var(--brass); margin-bottom:7px;
}
.field input,.field textarea{
	width:100%; background:rgba(255,255,255,.05);
	border:1px solid rgba(217,207,228,.35);
	color:#fff; font-family:var(--body); font-size:16.5px;
	padding:13px 15px;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(217,207,228,.5); }
.field input:focus,.field textarea:focus{ border-color:var(--gold); }
.field textarea{ min-height:148px; resize:vertical; }
.field-invalid input,.field-invalid textarea,input.field-invalid,textarea.field-invalid{ border-color:#FF8A6B; }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .row2{ grid-template-columns:1fr; } }

.hp-field{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.submit-btn{
	display:inline-flex; align-items:center; gap:10px;
	background:var(--gold); color:var(--ink);
	font-family:var(--display); font-weight:600;
	font-size:16px; padding:15px 30px; border:0; cursor:pointer;
	transition:background .2s;
}
.submit-btn:hover{ background:#fff; }
.loading-btn{
	display:inline-block; width:22px; height:22px;
	border:2px solid rgba(217,174,69,.3); border-top-color:var(--gold);
	border-radius:50%; animation:spin .8s linear infinite; margin-left:14px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.is-sending{ opacity:.6; cursor:progress; }

.form-error{
	color:#FFD7D0; background:rgba(150,30,20,.3);
	border-left:3px solid #FF6B57; padding:13px 16px;
	margin-top:16px; font-size:16px; line-height:1.5;
}
.form-error a{ color:var(--gold); }

.form-thankyou{
	background:rgba(255,255,255,.06);
	border-left:3px solid var(--gold);
	padding:30px 32px; margin-top:24px;
}
.form-thankyou h3{
	font-family:var(--display); font-weight:600;
	font-size:23px; line-height:1.25; color:#fff; margin-bottom:12px; outline:none;
}
.form-thankyou p{ font-size:16.5px; line-height:1.6; margin-bottom:12px; }
.form-thankyou a{ color:var(--gold); }
.form-thankyou .thankyou-signoff{ font-style:italic; color:var(--brass); margin:18px 0 0; }

.presskit{
	border:1px solid rgba(217,207,228,.3); padding:30px 28px;
}
.presskit h3{
	font-family:var(--display); font-weight:600;
	font-size:21px; color:#fff; margin-bottom:10px;
}
.presskit p{ font-size:16px; line-height:1.55; margin-bottom:20px; }
.presskit__links{ display:flex; flex-direction:column; gap:11px; }
.presskit__links a{
	font-family:var(--mono); font-size:13.5px;
	color:var(--gold); text-decoration:none;
	display:flex; gap:10px; align-items:baseline;
}
.presskit__links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.presskit__links span{ color:var(--brass); }

/* ============================================================
   Footer
   ============================================================ */
.foot{ background:var(--ink); padding:clamp(56px,8vh,88px) 0 42px; border-top:1px solid rgba(176,143,66,.2); }
.foot__top{
	display:flex; justify-content:space-between; gap:28px;
	flex-wrap:wrap; align-items:flex-start;
	padding-bottom:34px; border-bottom:1px solid rgba(176,143,66,.2);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.foot__nav a{
	font-family:var(--mono); font-size:13.5px;
	color:var(--on-dark); text-decoration:none;
	border-bottom:1px solid rgba(176,143,66,.4); padding-bottom:2px;
}
.foot__nav a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.foot__social{ display:flex; gap:10px; }
.foot__social a{
	width:40px; height:40px; display:grid; place-items:center;
	border:1px solid rgba(176,143,66,.4); color:var(--on-dark);
	text-decoration:none; font-family:var(--mono); font-size:12px;
	transition:border-color .2s,color .2s;
}
.foot__social a:hover{ border-color:var(--gold); color:var(--gold); }
.foot__base{
	margin-top:28px; font-family:var(--mono); font-size:12px;
	line-height:1.9; color:#8B77A0;
	display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}

/* ============================================================
   Article pages
   Dark masthead band, parchment reading ground. Long-form
   prose sets on parchment because 3,000 words does not read
   well on aubergine.
   ============================================================ */
.artichead{
	background:var(--ink);
	padding:calc(62px + clamp(56px,9vh,104px)) 0 clamp(48px,7vh,84px);
}
.artichead .eyebrow{ margin-bottom:22px; }
.artichead h1{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(30px,4.6vw,60px);
	line-height:1.02; letter-spacing:-.025em;
	color:#fff; text-wrap:balance; max-width:20ch;
}
.artichead .standfirst{
	font-size:clamp(18px,1.75vw,23px); line-height:1.5;
	color:#EFE7F5; max-width:52ch; margin-top:24px;
	border-left:2px solid var(--brass); padding-left:22px;
}

.articbody{ background:var(--parch); color:var(--on-light); padding:clamp(56px,8vh,96px) 0 clamp(72px,10vh,120px); }

.artic{
	display:grid; gap:clamp(32px,5vw,72px);
	grid-template-columns:minmax(0,1fr);
	align-items:start;
}
@media (min-width:1120px){
	.artic{ grid-template-columns:minmax(0,1fr) 232px; }
}

.page{ max-width:68ch; }
.page > p{ margin-bottom:1.1em; }
.page a{ color:var(--violet); text-underline-offset:3px; }
.page a:hover{ color:var(--ink); }
.page em{ font-style:italic; }
.page strong{ font-weight:600; color:var(--ink); }

.page h2{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(23px,2.5vw,32px); line-height:1.14;
	color:var(--ink); letter-spacing:-.012em;
	margin:2.1em 0 .7em; scroll-margin-top:86px;
}
.page h2:first-child{ margin-top:0; }
.page h3{
	font-family:var(--display);
	font-weight:600;
	font-size:clamp(18px,1.6vw,21px); color:var(--ink);
	margin:1.7em 0 .5em;
}

.page ul,.page ol{ margin:0 0 1.3em 0; padding-left:1.15em; }
.page li{ margin-bottom:.5em; }
.page ul li::marker{ color:var(--brass); }
.page ol li::marker{ color:var(--violet); font-family:var(--mono); font-size:.85em; }

/* Pull quote */
.page .pull{
	margin:2em 0; padding:0 0 0 26px;
	border-left:3px solid var(--brass);
}
.page .pull p{
	font-family:var(--display);
	font-weight:600;
	font-size:clamp(20px,2.2vw,28px); line-height:1.22;
	color:var(--ink); letter-spacing:-.015em; margin:0;
	text-wrap:balance;
}

.page .note{
	font-size:15.5px; line-height:1.65; color:#5B4A70;
	border-top:1px solid rgba(67,32,107,.22);
	padding-top:14px; margin-top:2em;
}

/* Timeline — a real sequence, so the years carry the structure */
.page .timeline{ margin:1.6em 0 2em; border-top:1px solid rgba(67,32,107,.24); }
.page .timeline .entry{
	display:grid; grid-template-columns:104px 1fr; gap:22px;
	padding:16px 0; border-bottom:1px solid rgba(67,32,107,.14);
}
@media (max-width:600px){
	.page .timeline .entry{ grid-template-columns:1fr; gap:4px; }
}
.page .timeline .entry-year{
	font-family:var(--mono); font-size:13px; letter-spacing:.04em;
	color:var(--violet); margin:0; padding-top:3px;
}
.page .timeline .entry p:not(.entry-year){ margin:0; font-size:16.5px; line-height:1.6; }

/* Question and answer */
.page .qa{
	border-top:1px solid rgba(67,32,107,.2);
	padding-top:22px; margin-bottom:34px;
}
.page .qa h2{ margin-top:0; font-size:clamp(20px,2vw,26px); }

/* Numbered steps */
.page .steps{ counter-reset:s; list-style:none; padding-left:0; margin:1.4em 0 1.8em; }
.page .steps > li{
	counter-increment:s; position:relative;
	padding-left:46px; margin-bottom:1em;
}
.page .steps > li::before{
	content:counter(s,decimal-leading-zero);
	position:absolute; left:0; top:2px;
	font-family:var(--mono); font-size:12px; letter-spacing:.1em;
	color:var(--brass);
	border:1px solid rgba(176,143,66,.5); padding:3px 7px;
}

/* Closing call to action */
.page .watch{
	margin-top:clamp(48px,7vh,80px);
	background:var(--ink); color:var(--on-dark);
	padding:clamp(30px,4vw,44px);
}
.page .watch h2{ color:#fff; margin:0 0 .5em; font-size:clamp(21px,2.1vw,27px); }
.page .watch p{ margin-bottom:1.1em; }
.page .watch a{ color:var(--gold); }
.page .watch a:hover{ color:#fff; }
.page .watch-links{
	list-style:none; padding:0; margin:0;
	display:flex; flex-wrap:wrap; gap:10px 26px;
}
.page .watch-links li{ margin:0; }
.page .watch-links a{
	font-family:var(--mono); font-size:13.5px; text-decoration:none;
	border-bottom:1px solid rgba(217,174,69,.45); padding-bottom:2px;
}

/* Sticky section index */
.toc{ display:none; }
@media (min-width:1120px){
	.toc{
		display:block; position:sticky; top:92px;
		border-top:1px solid rgba(67,32,107,.28); padding-top:16px;
	}
}
.toc p{
	font-family:var(--mono); font-size:11px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--violet); margin-bottom:12px;
}
.toc ol{ list-style:none; padding:0; margin:0; counter-reset:t; }
.toc li{ margin-bottom:9px; }
.toc a{
	font-size:14.5px; line-height:1.35; color:#5B4A70;
	text-decoration:none; display:block;
	border-left:2px solid transparent; padding-left:12px;
	transition:color .2s,border-color .2s;
}
.toc a:hover,.toc a.is-here{ color:var(--ink); border-left-color:var(--brass); }

/* ============================================================
   Trailer facade
   The YouTube iframe is injected on click. Nothing loads from
   Google — and no cookie is set — until the visitor presses play.
   ============================================================ */
.frame__play{
	position:absolute; inset:0; width:100%; height:100%;
	padding:0; border:0; background:#000; cursor:pointer;
	display:block; overflow:hidden;
}
.frame__play img{
	width:100%; height:100%; object-fit:cover;
	opacity:.72; transition:opacity .35s ease,transform .6s ease;
}
.frame__play:hover img,.frame__play:focus-visible img{ opacity:.92; transform:scale(1.02); }
.frame__btn{
	position:absolute; left:50%; top:50%;
	transform:translate(-50%,-50%);
	width:clamp(62px,7vw,86px); height:clamp(62px,7vw,86px);
	border:1px solid var(--gold); border-radius:50%;
	background:rgba(18,6,32,.55);
	display:grid; place-items:center;
	transition:background .25s ease,transform .25s ease;
}
.frame__btn::before{
	content:""; display:block;
	border-left:16px solid var(--gold);
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	margin-left:5px;
}
.frame__play:hover .frame__btn,.frame__play:focus-visible .frame__btn{
	background:var(--gold); transform:translate(-50%,-50%) scale(1.06);
}
.frame__play:hover .frame__btn::before,.frame__play:focus-visible .frame__btn::before{
	border-left-color:var(--ink);
}
.frame noscript iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   The Line — Rolf's central proposition, and this page's spine
   ============================================================ */
.line__grid{
	display:grid; gap:clamp(32px,5vw,80px);
	grid-template-columns:minmax(0,1fr) minmax(0,240px);
	align-items:center;
}
@media (max-width:860px){
	.line__grid{ grid-template-columns:1fr; }
	.line__figure{ order:-1; }
}
.line__figure{ margin:0; text-align:center; color:var(--gold); }
.line__figure svg{ width:clamp(64px,9vw,104px); height:auto; display:block; margin:0 auto; }
.line__figure figcaption{
	font-family:var(--mono); font-size:12.5px; line-height:1.7;
	color:var(--brass); margin-top:20px; max-width:26ch;
	margin-left:auto; margin-right:auto;
}

/* Attribution lines carry a role as well as a name */
.quote cite .who{ display:block; }
.quote cite .role{
	display:block; margin-top:3px;
	font-family:var(--body); font-size:13.5px;
	letter-spacing:0; text-transform:none; color:#5B4A70;
}
.person figcaption .who{ display:block; }
.person figcaption .role{
	display:block; margin-top:3px;
	font-size:11.5px; color:var(--brass); letter-spacing:.02em;
}

/* Qualifying note inside a fact row */
.facts .qual{
	display:block; font-family:var(--mono); font-size:11.5px;
	line-height:1.6; color:#5B4A70; margin-top:3px;
}

.presskit__direct{
	font-family:var(--mono); font-size:13px; line-height:2;
	margin-top:18px; padding-top:16px;
	border-top:1px solid rgba(217,207,228,.25);
}
.presskit__direct a{ color:var(--gold); text-decoration:none; }
.presskit__direct a:hover{ text-decoration:underline; text-underline-offset:3px; }
.presskit__direct span{ color:var(--brass); }

.page .signoff{
	font-family:var(--mono); font-size:14px;
	color:var(--violet); margin-top:1.6em;
}

/* motheroffascia i18n build 2026-09-03 */


/* ============================================================
   Language switcher
   On the content pages it lives inside .masthead__nav, between the
   last nav link and the gold CTA, in two forms: a <details> dropdown
   for desktop, and a flat row inside the open hamburger panel below
   860px. Exactly one shows at any width.

   The 404 pages carry the dropdown alone, directly in the bar, and
   run no panel at all — hence the .masthead__nav scoping further down.
   ============================================================ */
.langsw{ position:relative; font-family:var(--mono); margin-left:2px; }
/* The 404 pages have no nav to push the switcher across, so the switcher
   does it itself. Keeps the dropdown anchored to the right edge, where its
   right:0 positioning expects to sit. */
.masthead__inner > .langsw{ margin-left:auto; }
/* The mobile row lives in a named <nav> wrapper. The wrapper carries the
   visibility, so the list itself needs no display juggling. */
.langsw-m{ display:none; }
.langsw-flat{ list-style:none; margin:0; padding:0; }
.langsw > summary{
	list-style:none; cursor:pointer;
	display:flex; align-items:center; gap:7px;
	font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--on-dark); background:none;
	border:1px solid rgba(176,143,66,.5); padding:8px 12px;
	transition:color .2s, border-color .2s;
}
.langsw > summary::-webkit-details-marker{ display:none; }
/* Drawn, not typed: the subsetted fonts have no caret glyph. */
.langsw > summary::after{
	content:""; width:0; height:0; flex:none;
	border-left:4px solid transparent; border-right:4px solid transparent;
	border-top:5px solid var(--brass);
}
.langsw > summary:hover,
.langsw[open] > summary{ color:#fff; border-color:var(--brass); }
.langsw > summary:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.langsw ul{
	position:absolute; top:calc(100% + 6px); right:0; z-index:20;
	margin:0; padding:6px 0; list-style:none; min-width:158px;
	background:var(--ink); border:1px solid rgba(176,143,66,.3);
}
.langsw a{
	display:block; padding:10px 15px; font-size:13px;
	color:var(--on-dark); text-decoration:none;
}
.langsw a:hover{ background:rgba(176,143,66,.14); color:#fff; }
.langsw a[aria-current]{ color:var(--gold); }

/* .masthead__nav a carries a transparent bottom border that turns brass on
   hover. Inherited by the switcher's links it underlines every language in
   the dropdown, and draws a divider under each entry in the mobile row.
   Cancel it in both forms. */
.masthead__nav .langsw a,
.masthead__nav .langsw a:hover,
.masthead__nav .langsw-flat a,
.masthead__nav .langsw-flat a:hover{ border-bottom:0; }

/* Belt and braces: the flat form is for the open hamburger panel only.
   If the base rule above is ever lost, this keeps it off desktop. */
@media (min-width:1001px){
	.masthead__nav .langsw-m{ display:none; }
}

@media (max-width:1000px){
	.masthead__toggle{ margin-left:auto; }
	/* Inside the open panel the dropdown gives way to a flat row. Both rules
	   stay scoped to .masthead__nav on purpose: the 404 pages carry the
	   switcher in the bar itself and have no panel to hold a flat row, so
	   unscoped rules dropped six language names into a 62px bar. There the
	   dropdown now keeps working at every width. */
	.masthead__nav .langsw{ display:none; }
	.masthead__nav .langsw-m{
		display:block; width:100%;
		margin:10px 0 0; padding:14px 0 0;
		border-top:1px solid rgba(176,143,66,.16);
	}
	.langsw-flat{ display:flex; flex-wrap:wrap; gap:0 22px; }
	.langsw-flat a{
		display:block; padding:9px 0;
		font-family:var(--mono); font-size:14px;
		color:var(--on-dark); text-decoration:none;
	}
	.langsw-flat a[aria-current]{ color:var(--gold); }
}
/* The wordmark keeps its brass slash; the tail stays white. */
.masthead__mark .mark__sep{ color:var(--brass); }
.masthead__mark .mark__tail{ color:#fff; }

/* Below 520px the bar carries wordmark + Menu, plus the switcher on the 404
   pages, which run without a panel. Tighten the gaps, swap the word "Menu"
   for a glyph, and drop the wordmark tail so nothing collides on a 375px
   iPhone SE. */
@media (max-width:520px){
	.masthead__inner{ gap:10px; }
	.masthead__mark{ min-width:0; overflow:hidden; text-overflow:ellipsis;
		letter-spacing:.04em; }
	.langsw > summary{ padding:9px 8px; gap:5px; }
	.masthead__toggle{
		margin-left:8px; padding:9px 10px;
		font-size:0; line-height:1; letter-spacing:0;
	}
	/* Three drawn bars. The subsetted fonts carry no U+2630, so the glyph
	   rendered as tofu. The word "Menu" stays in the DOM at font-size:0,
	   so the button keeps its accessible name. */
	.masthead__toggle::after{
		content:""; display:block; width:18px; height:2px;
		margin:6px 0; background:currentColor;
		box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
}
@media (max-width:360px){
	.masthead__mark .mark__sep,
	.masthead__mark .mark__tail{ display:none; }
	.langsw ul{ right:auto; left:auto; }
}

/* ------------------------------------------------------------------
   Background-video button. The source markup used U+25B6 / U+275A,
   neither of which exists in the subsetted fonts, so both showed as
   tofu. Both states are now drawn.
   ------------------------------------------------------------------ */
.videobtn{ font-size:0; line-height:0; }
.videobtn::before{
	content:""; display:inline-block; vertical-align:middle;
	width:0; height:0;
	border-top:6px solid transparent; border-bottom:6px solid transparent;
	border-left:10px solid currentColor;
	margin-left:2px;
}
.videobtn.is-playing::before{
	width:9px; height:11px; border:0; margin-left:0;
	background:currentColor;
	-webkit-mask:linear-gradient(#000 0 0) 0 0/3px 11px no-repeat,
	             linear-gradient(#000 0 0) 6px 0/3px 11px no-repeat;
	mask:linear-gradient(#000 0 0) 0 0/3px 11px no-repeat,
	     linear-gradient(#000 0 0) 6px 0/3px 11px no-repeat;
}

/* ============================================================
   SMALL-SCREEN AND TAP-TARGET CORRECTIONS — 2026-09-05
   Added after an audit found the page forcing a zoom-out on
   320px and 360px handsets. body{overflow-x:hidden} hid the
   symptom: no scrollbar appeared, so the browser widened the
   layout viewport instead and scaled the whole page down.
   Measured innerWidth reported 369px inside a 320px viewport.
   Each block below removes one hard minimum width.
   ============================================================ */

/* --- 1. Long words ------------------------------------------
   Polish compounds do not fit a 192px column. The worst,
   "Dziewięćdziesięcioośmiominutowy", measured 305px min-content
   and alone pushed every Polish inner page to 369px. Czech and
   German carry the same risk. hyphens:auto reads the lang
   attribute already present on <html>, so each language
   hyphenates by its own dictionary.
   ------------------------------------------------------------ */
.prose,
.page p,
.page li,
.page .watch p,
.page .watch h2,
.artichead h1,
.artichead .standfirst,
h2.head, h3.sub, .lede{
	overflow-wrap:break-word;
	-webkit-hyphens:auto;
	hyphens:auto;
}
/* Never hyphenate the wordmark or a monospaced label. */
.masthead__mark, .eyebrow, .credit dt, .langsw, .platform__langs{ hyphens:none; }

/* --- 2. Watch platform rows ---------------------------------
   .platform is a flex row with no wrap, so name, note and arrow
   locked to one line. In German "Alle Möglichkeiten zum Ansehen"
   plus "idarolf.eu" plus the arrow needed 306px against 252px.
   ------------------------------------------------------------ */
.platform, .platform__link{ flex-wrap:wrap; }
.platform__name{ overflow-wrap:break-word; }
@media (max-width:430px){
	.platform{ gap:4px 16px; padding:22px 40px 22px 18px; }
	.platform__link{ gap:4px 16px; padding:20px 40px 13px 18px; }
	.platform__note{ flex:1 1 100%; }
	.platform__go{ right:18px; top:19px; }
	.platform__langs{ padding:0 18px 17px; gap:5px; }
}

/* --- 3. Contact block ---------------------------------------
   At <=860px the grid collapsed to 1fr, which resolves to
   minmax(auto,1fr); auto refuses to shrink below min-content.
   Two items held it at 288px against 252px available:
   an unbreakable email address and a bare <input>, whose
   browser default size=20 sets a 263px min-content that
   width:100% does not override.
   ------------------------------------------------------------ */
@media (max-width:860px){
	.contact__grid{ grid-template-columns:minmax(0,1fr); }
}
.field input, .field textarea{ min-width:0; }
.presskit{ min-width:0; }
.presskit__direct a{ overflow-wrap:anywhere; }

/* --- 4. Credits column --------------------------------------
   "Veröffentlicht" and "Auszeichnungen" overran their 104px
   auto-fit column by 13px.
   ------------------------------------------------------------ */
.credit dt{ overflow-wrap:break-word; }
@media (max-width:600px){
	.credits{ grid-template-columns:minmax(0,1fr); }
}

/* --- 5. Timeline --------------------------------------------
   The 104px year column has no lower bound of its own.
   ------------------------------------------------------------ */
.page .timeline .entry{ grid-template-columns:104px minmax(0,1fr); }
@media (max-width:600px){
	.page .timeline .entry{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   TAP TARGETS — WCAG 2.2 AA, 2.5.8 Target Size (Minimum), 24px
   Links sitting inside a sentence are exempt under the "inline"
   clause and are deliberately left alone, so prose keeps its
   line rhythm. Everything below is a standalone control that
   measured under 24px.
   ============================================================ */
.page .watch-links a{
	display:inline-block;
	padding-top:4px;
}
.presskit__links a{ padding-block:2px; }
.presskit__direct a{ display:inline-block; padding-block:3px; }
.facts dd a,
.credit dd a{
	display:inline-block;
	padding:3px 5px;
	margin:0 -5px;
	min-width:24px;
	text-align:center;
}
.foot__nav a{ display:inline-block; padding-block:4px; }
.masthead__mark{ display:inline-block; padding-block:5px; }
.langsw > summary{ min-height:24px; }

/* --- 6. Auto-fit tracks on very narrow screens ---------------
   repeat(auto-fit,minmax(230px,1fr)) sets a hard 230px floor
   per track. On a 280px Galaxy Fold cover screen the content
   box measures 212px, so the track overflowed. min() lets the
   track fall back to the container width when that is smaller,
   which is the only case the fixed floor was wrong about.
   ------------------------------------------------------------ */
.cast{ grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); }
.credits{ grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
.reads{ grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr)); }
@media (max-width:600px){
	.credits{ grid-template-columns:minmax(0,1fr); }
}

/* --- 7. Remaining bare 1fr tracks ----------------------------
   In grid, "1fr" means minmax(auto,1fr), and the auto minimum
   refuses to shrink below the track's min-content. Every
   single-column collapse below therefore inherited the widest
   unbreakable word in its content as a hard floor. minmax(0,1fr)
   removes the floor; the content still wraps normally.
   ------------------------------------------------------------ */
@media (max-width:900px){
	.about__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px){
	.watch__grid{ grid-template-columns:minmax(0,1fr); }
	.line__grid{ grid-template-columns:minmax(0,1fr); }
}
.row2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:600px){
	.row2{ grid-template-columns:minmax(0,1fr); }
}
.facts div{ grid-template-columns:104px minmax(0,1fr); }
@media (max-width:480px){
	.facts div{ grid-template-columns:minmax(0,1fr); gap:2px; }
}

/* --- 8. Headings inside article pages ------------------------
   German compounds ("Dokumentarfilmprogramme") exceeded the
   reading column on the narrowest screens. The body copy was
   already covered; the headings were not.
   ------------------------------------------------------------ */
.page h2, .page h3, .page h4,
.page .qa h2, .page dt, .page dd{
	overflow-wrap:break-word;
	-webkit-hyphens:auto;
	hyphens:auto;
}

/* --- 9. Press-kit block safety -------------------------------
   Belt and braces below 280px (Galaxy Fold cover screen and
   narrower). Nothing here changes the layout at normal widths.
   ------------------------------------------------------------ */
.presskit h3, .presskit p{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.presskit__direct{ overflow-wrap:break-word; }
.presskit__links a{ flex-wrap:wrap; }

/* --- 9a. Privacy page + footer legal link --------------------- */
.foot__base a{ color:#8B77A0; text-decoration:none;
	border-bottom:1px solid rgba(176,143,66,.4); display:inline-block; padding-block:5px; }
.foot__base a:hover,.foot__base a:focus-visible{ color:var(--gold); border-bottom-color:var(--gold); }
.privacy-addr{ font-style:normal; font-family:var(--mono); font-size:14px; line-height:1.85; }
.privacy-addr p{ margin:0; }
.privacy-legal{ font-family:var(--mono); font-size:13px; opacity:.82; }
.privacy-updated{ font-family:var(--mono); font-size:12.5px; opacity:.7; margin-top:34px; }

/* --- 9b. OPTIONAL: hero on short phones ----------------------
   At 320x568 the hero CTAs sit at roughly y=572, i.e. just past
   the fold, and they did so before the privacy notice existed:
   .hero is min-height:100svh with 140px of top padding and the
   content bottom-aligned inside it. Uncommenting the block below
   pulls the buttons into the first screen on short viewports, at
   the cost of a smaller title and no hero meta line there. It is
   a design decision, so it ships switched off.
   ------------------------------------------------------------ */
/*
@media (max-width:600px) and (max-height:720px){
	.hero{ padding-top:86px; padding-bottom:24px; }
	.hero__dates{ margin-bottom:12px; }
	.hero__title{ font-size:30px; }
	.hero__lede{ font-size:16px; }
	.hero__actions{ margin-bottom:20px; }
	.hero__meta{ display:none; }
}
*/

/* --- 10. Reading width inside the closing call to action -----
   .page .watch padded 30px a side, leaving 192px of column on a
   320px screen. Polish and German then wrapped every two or
   three words. Below 480px the padding gives way; the block
   still reads as a panel because of its dark ground.
   ------------------------------------------------------------ */
@media (max-width:480px){
	.page .watch{ padding:26px 18px 30px; }
	.presskit{ padding:26px 20px; }
}

/* --- 11. Masthead breakpoint ---------------------------------
   The nav collapsed to the hamburger only below 861px, but the
   full row needs about 1000px once "Watch the film" and the
   language switcher sit beside five links. Between 861 and 991
   the CTA ran off the right edge -- 113px off in German, where
   the link wording is longest -- with no horizontal scrollbar to
   reveal it, so the button simply could not be reached. The three
   masthead-scoped queries above now switch at 1000px instead.
   ------------------------------------------------------------ */