/* Reel Trouble: the film-history pages (/films/). Loaded after site.css, which brings the fonts, the colours, the
   buttons, the film frames, the cards and the footer. A page here is a printed programme note read in the dark of
   the picture house: a sheet of cream paper on the midnight-blue house, the game's room set into it as a strip of
   film. Nothing on these pages moves but the room's clip. */

.notes {
	--ink: #20180e;
	--ink-soft: #54452c;
	--claret: #6b1a14;
	--sheet-pad: clamp(18px, 6vw, 76px);
	padding-bottom: 0; background: #070b16;
}
.notes .film { min-height: 100vh; background: radial-gradient(120% 70vh at 50% 0, #17305f 0%, #0d1c40 46%, rgba(7, 11, 22, 0) 100%) no-repeat #070b16; }

/* ----------------------------------------------------------------------------- the bar at the top */
.lobby {
	display: flex; align-items: center; gap: clamp(12px, 3vw, 34px);
	padding: 14px calc(var(--edge) + clamp(12px, 4vw, 56px));
}
.lobby__logo { flex: none; }
.lobby__logo img { height: 48px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.lobby__nav { display: flex; gap: clamp(14px, 2.6vw, 32px); margin-left: auto; font: 600 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.lobby__nav a { color: var(--ivory); text-decoration: none; padding: 10px 0 8px; border-bottom: 2px solid transparent; }
.lobby__nav a:hover, .lobby__nav a[aria-current] { color: var(--gold); border-color: var(--gold-2); }
.lobby .btn--bar { white-space: nowrap; }

.crumbs { width: min(900px, 100% - 2 * (var(--edge) + 10px)); margin: 4px auto 14px; font-size: 13px; color: rgba(243, 233, 210, .72); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.crumbs li + li::before { content: "\203A"; margin-right: 8px; opacity: .6; }
.crumbs a { color: rgba(243, 233, 210, .9); }

/* ------------------------------------------------------------------------------------- the sheet */
.sheet {
	position: relative; width: min(900px, 100% - 2 * (var(--edge) + 10px)); margin: 0 auto;
	padding: clamp(30px, 5vw, 64px) var(--sheet-pad) clamp(34px, 5vw, 60px);
	background: linear-gradient(#f5ebd1, #ecdfbd); color: var(--ink);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .6);
}
.sheet::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(107, 26, 20, .4); pointer-events: none; }
.sheet a { color: #7c1b10; text-decoration-thickness: 1px; }
.sheet a:hover { color: var(--ink); }
.sheet :focus-visible { outline-color: var(--claret); }

.sheet__head { text-align: center; padding-bottom: clamp(22px, 3vw, 34px); }
.sheet__over { font: 700 11.5px/1.5 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--claret); padding-left: .3em; }
.sheet h1 { margin-top: 16px; font: 400 clamp(34px, 6.2vw, 66px)/1.03 var(--display); letter-spacing: .005em; text-wrap: balance; }
.sheet h1 span { display: block; margin-top: 14px; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .44em; padding-left: .44em; color: var(--claret); }
.sheet--hub h1 span { letter-spacing: .02em; padding-left: 0; text-wrap: balance; }
.sheet h1 span::before, .sheet h1 span::after { content: ""; display: inline-block; vertical-align: middle; width: clamp(24px, 7vw, 70px); height: 1px; margin: 0 .5em; background: currentColor; opacity: .6; }
.sheet--hub h1 span::before, .sheet--hub h1 span::after { display: none; }
.sheet__deck { max-width: 33em; margin: 18px auto 0; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.48; text-wrap: balance; }
.sheet__by { margin-top: 16px; font-size: 13px; letter-spacing: .03em; color: var(--ink-soft); }

/* "In short": the whole note in three sentences, for readers (and search results) in a hurry. */
.short { padding: 18px 22px 20px; background: rgba(107, 26, 20, .07); border: 1px solid rgba(107, 26, 20, .38); }
.short__label { font: 700 11.5px/1.5 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--claret); margin-bottom: 6px; }
.short p { font-size: 18px; line-height: 1.6; }

/* The facts, set like the back of a ticket. */
.stub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin-top: 26px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.stub div { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dotted rgba(32, 24, 14, .5); font-size: 15px; line-height: 1.42; }
.stub div:last-child, .stub div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.stub dt { font: 700 10.5px/1.75 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--claret); }
.stub dd { margin: 0; }
.watch { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.watch b { font: 700 10.5px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--claret); margin-right: .7em; }

.prose { max-width: 39em; margin: clamp(26px, 4vw, 40px) auto 0; font-size: 18px; line-height: 1.72; }
.prose > * + * { margin-top: 1.05em; }
.prose h2, .faq h2, .sources h2 { font: 400 clamp(26px, 3.3vw, 34px)/1.12 var(--display); color: var(--claret); text-wrap: balance; }
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p { margin-top: .6em; }
.prose > p:first-of-type::first-letter { float: left; margin: .06em .1em 0 0; font: 400 3.5em/.82 var(--display); color: var(--claret); }
.prose blockquote { padding: 2px 0 2px 20px; border-left: 3px solid #b9801f; font-style: italic; }
.prose blockquote cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; color: var(--ink-soft); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }

/* ----------------------------------------------- the room: a strip of film set into the sheet */
.onscreen {
	position: relative; margin: clamp(40px, 6vw, 64px) calc(-1 * var(--sheet-pad)) 0; padding: clamp(46px, 6vw, 70px) var(--sheet-pad);
	background:
		radial-gradient(circle, rgba(243, 233, 210, .42) 3.2px, transparent 4px) 0 9px / 26px 14px repeat-x,
		radial-gradient(circle, rgba(243, 233, 210, .42) 3.2px, transparent 4px) 0 calc(100% - 9px) / 26px 14px repeat-x,
		#0c0b0f;
	color: var(--ivory); text-align: center;
}
.sheet .onscreen a:not(.btn) { color: var(--gold); }
.sheet .onscreen a:not(.btn):hover { color: #fff; }
.sheet .onscreen :focus-visible { outline-color: var(--gold); }
.onscreen h2 { margin-top: 12px; font-size: clamp(30px, 4.6vw, 50px); text-transform: uppercase; color: var(--gold); text-wrap: balance; }
.onscreen__reel { margin-top: 10px; font: 400 17px/1 var(--display); letter-spacing: .3em; padding-left: .3em; color: var(--gold-2); }
.onscreen__grid { display: grid; gap: clamp(22px, 3vw, 34px); margin-top: clamp(22px, 3vw, 34px); text-align: left; }
.onscreen .frame { width: 100%; }
.onscreen__copy { max-width: 39em; margin-inline: auto; }
.onscreen__copy > * + * { margin-top: 14px; }
.onscreen__quip { font: 400 clamp(20px, 2.4vw, 26px)/1.25 var(--display); text-align: center; text-wrap: balance; padding-bottom: 18px; border-bottom: 1px solid rgba(231, 184, 74, .35); }
.onscreen .pan { margin-top: 20px; }
.onscreen .cta { justify-content: center; margin-top: 26px; }
.onscreen .btn { text-align: center; }
.onscreen .cta__note { margin-inline: auto; text-align: center; }
.onscreen .cta__status { text-align: center; }
/* A film that is not a room here: the rooms one can play instead. */
.onscreen--plays h2 { font-size: clamp(26px, 3.8vw, 40px); text-transform: none; }
.onscreen__lede { max-width: 38em; margin: 16px auto 0; }
.plays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); margin-top: clamp(22px, 3vw, 32px); text-align: left; }
.plays__card { display: grid; gap: 4px; align-content: start; height: 100%; padding: 8px 8px 14px; border: 1px solid rgba(231, 184, 74, .5); background: rgba(255, 255, 255, .04); text-decoration: none; transition: border-color .15s, background-color .15s; }
.plays__card:hover { border-color: var(--gold); background: rgba(255, 255, 255, .09); }
.plays__card img { width: 100%; margin-bottom: 6px; }
.plays__year { font: 400 14px/1 var(--display); letter-spacing: .3em; color: var(--gold-2); padding: 0 4px; }
.sheet .onscreen .plays__film { font: 400 clamp(17px, 2vw, 21px)/1.15 var(--display); color: var(--gold); padding: 0 4px; text-wrap: balance; }
.sheet .onscreen .plays__room { font-size: 13px; color: rgba(243, 233, 210, .8); padding: 0 4px; }
.onscreen--plays .onscreen__copy { margin-top: 4px; }

.notes[data-era="silent"] .onscreen h2, .notes[data-era="silent"] .onscreen__reel, .notes[data-era="silent"] .onscreen .card__over { color: #f1f1ee; }
.notes[data-era="daylight"] .onscreen .frame--daylight { box-shadow: 10px 10px 0 rgba(243, 233, 210, .16); }

.faq, .sources { max-width: 39em; margin: clamp(40px, 6vw, 60px) auto 0; }
.faq__item { margin-top: 20px; padding-top: 18px; border-top: 1px dotted rgba(32, 24, 14, .5); }
.faq h2 + .faq__item { border-top: 0; padding-top: 0; }
.faq h3 { font: 700 18px/1.35 var(--body); letter-spacing: 0; }
.faq p { margin-top: 6px; font-size: 17px; line-height: 1.65; }
.sources ol { list-style: decimal; padding-left: 1.4em; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.sources li + li { margin-top: 8px; }
.sources li::marker { color: var(--claret); font-weight: 700; }

/* ------------------------------------------------------------------- earlier / later on the programme */
.turn { width: min(900px, 100% - 2 * (var(--edge) + 10px)); margin: 26px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.turn__card { display: grid; gap: 4px; padding: 18px 22px; border: 1px solid rgba(231, 184, 74, .55); background: rgba(0, 0, 0, .35); color: var(--ivory); text-decoration: none; transition: background-color .15s, border-color .15s; }
.turn__card:last-child { text-align: right; }
.turn__card:hover { background: rgba(0, 0, 0, .6); border-color: var(--gold); color: var(--ivory); }
.turn__dir { font: 600 11px/1.4 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); }
.turn__year { font: 400 15px/1 var(--display); letter-spacing: .3em; color: var(--gold-2); }
.turn__film { font: 400 clamp(20px, 2.4vw, 26px)/1.15 var(--display); color: var(--gold); text-wrap: balance; }

/* --------------------------------------------------------------------------------- the last card */
.curtaincall { padding: clamp(56px, 9vw, 110px) calc(var(--edge) + 16px) clamp(60px, 9vw, 110px); }
.curtaincall .card__over + h2 { margin-top: 14px; }

.footer__notes a { color: var(--gold); }

/* ------------------------------------------------------------------------------- the hub's bills */
.bills { display: grid; gap: 18px; margin-top: 6px; }
.bill__link {
	display: grid; grid-template-columns: 5.4em minmax(0, 220px) minmax(0, 1fr); gap: clamp(14px, 2.6vw, 28px); align-items: center;
	padding: 16px 18px; border: 1px solid rgba(32, 24, 14, .55); background: rgba(255, 255, 255, .28); text-decoration: none;
	transition: background-color .15s, box-shadow .15s, transform .15s;
}
.sheet .bill__link { color: var(--ink); }
.bill__link:hover { background: rgba(255, 255, 255, .6); box-shadow: 6px 6px 0 rgba(32, 24, 14, .85); transform: translate(-2px, -2px); }
.bill__year { font: 400 clamp(26px, 3.4vw, 38px)/1 var(--display); color: var(--claret); text-align: center; }
.bill__pic { width: 100%; border: 5px solid #111; background: #111; }
.bill__copy { display: grid; gap: 5px; }
.bill__film { font: 400 clamp(22px, 2.8vw, 30px)/1.1 var(--display); text-wrap: balance; }
.bill__teaser { font-size: 16px; line-height: 1.5; }
.bill__room { display: inline-flex; align-items: center; gap: 7px; justify-self: start; margin-top: 4px; padding: 5px 10px 5px 8px; border: 1px solid var(--claret); font: 700 11.5px/1.3 var(--body); letter-spacing: .06em; color: var(--claret); }
.bill__room svg { flex: none; width: 11px; height: 11px; fill: currentColor; }
.bill--plain .bill__link { grid-template-columns: 5.4em minmax(0, 1fr); }
.short--hub { margin-top: 26px; }

@media (max-width: 760px) {
	.lobby { flex-wrap: wrap; row-gap: 6px; }
	.lobby__logo img { height: 40px; }
	.lobby__nav { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 26px; }
	.lobby .btn--bar { margin-left: auto; }
	.stub { grid-template-columns: minmax(0, 1fr); }
	.stub div:nth-last-child(2):nth-child(odd) { border-bottom: 1px dotted rgba(32, 24, 14, .5); }
	.prose, .short p { font-size: 17px; }
	.sheet::before { inset: 5px; }
	.onscreen__reel { font-size: 14px; letter-spacing: .2em; padding-left: .2em; line-height: 1.4; }
	.turn { grid-template-columns: minmax(0, 1fr); }
	.plays { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; }
	.bill--plain .bill__link { grid-template-columns: minmax(0, 1fr); }
	.turn__card:last-child { text-align: left; }
	.bill__link { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.bill__year { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.bill__link, .turn__card, .plays__card { transition: none; }
	.bill__link:hover { transform: none; }
}

@media print {
	.lobby, .crumbs, .turn, .curtaincall, .footer, .film__edge, .onscreen .cta, .onscreen video { display: none !important; }
	.notes, .notes .film { background: #fff; }
	.sheet { width: auto; box-shadow: none; background: #fff; }
}