/**
 * LANTHORN — the printed matter.
 *
 * Each block on this site is a physical object printed by a theatre: a pasted
 * playbill, a strip of tickets, a call sheet, a folded seating chart, a roll
 * off the box office printer. This file gives each of them its stock, its
 * edge and its shadow, and then lays them out on the stage.
 *
 * What is deliberately absent, because it is what made the last twenty of
 * these look like each other:
 *
 *   - no hairline rule used as the main separator (objects have edges)
 *   - no grid of equal cards (paper does not stack in equal rectangles)
 *   - no letterspaced uppercase micro-label
 *   - no row of big numbers across the page
 *   - one accent colour is not enough here; there are four inks in real use
 */

/* ==========================================================================
   The paper recipe, applied to everything that is a printed object
   ========================================================================== */

.lan-sheet,
.lan-poster-block,
.lan-rot-row,
.lan-figures,
.lan-plan,
.lan-card,
.lan-diary-day,
.lan-strip-bars,
.lan-page-head,
.lan-empty,
.lan-comments,
.lan-404 {
	position: relative;
	background: var( --lan-news );
	color: var( --lan-ink );
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.5 ),
		0 14px 34px -12px rgba( 0, 0, 0, 0.7 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.55 );
}

.lan-sheet::before,
.lan-poster-block::before,
.lan-rot-row::before,
.lan-figures::before,
.lan-plan::before,
.lan-card::before,
.lan-strip-bars::before,
.lan-page-head::before,
.lan-404::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba( 28, 26, 20, 0.028 ) 0 1px, transparent 1px 3px ),
		repeating-linear-gradient( 90deg,
			rgba( 28, 26, 20, 0.022 ) 0 1px, transparent 1px 4px );
}

.lan-sheet > *,
.lan-poster-block > *,
.lan-rot-row > *,
.lan-figures > *,
.lan-plan > *,
.lan-card > *,
.lan-strip-bars > *,
.lan-page-head > *,
.lan-404 > * { position: relative; z-index: 1; }

/* ==========================================================================
   Ink, and only on paper
   ==========================================================================

   Everything above is a printed object. Inside one, the theme's inks apply;
   outside one, the stage colours from main.css stand. Any new block added to
   this theme is legible by default and has to opt into ink, rather than being
   invisible until somebody happens to look at it.
   ========================================================================== */

.lan-sheet,
.lan-poster-block,
.lan-rot-row,
.lan-figures,
.lan-plan,
.lan-card,
.lan-diary-day,
.lan-strip-bars,
.lan-page-head,
.lan-empty,
.lan-comments,
.lan-404 {
	--lan-on-paper: 1;
}

.lan-sheet .lan-muted,
.lan-poster-block .lan-muted,
.lan-rot-row .lan-muted,
.lan-figures .lan-muted,
.lan-plan .lan-muted,
.lan-card .lan-muted,
.lan-diary-day .lan-muted,
.lan-strip-bars .lan-muted,
.lan-page-head .lan-muted,
.lan-empty .lan-muted,
.lan-comments .lan-muted,
.lan-404 .lan-muted { color: var( --lan-ink-3 ); }

.lan-sheet .lan-label,
.lan-poster-block .lan-label,
.lan-rot-row .lan-label,
.lan-figures .lan-label,
.lan-plan .lan-label,
.lan-card .lan-label,
.lan-strip-bars .lan-label,
.lan-page-head .lan-label,
.lan-comments .lan-label { color: var( --lan-red ); }

/*
 * These three carry ink unconditionally in the old rules, so they are given
 * the stage treatment first and the ink only when they are on a sheet.
 */
.lan-plan-basis,
.lan-plan-note { color: var( --lan-chalk-2 ); }

.lan-plan-warn {
	background: rgba( 217, 164, 65, 0.10 );
	border-left-color: var( --lan-gold );
	color: var( --lan-chalk );
}

.lan-sheet .lan-plan-basis,
.lan-poster-block .lan-plan-basis,
.lan-plan .lan-plan-basis,
.lan-page-head .lan-plan-basis,
.lan-strip-bars .lan-plan-basis,
.lan-plan .lan-plan-note { color: var( --lan-ink-3 ); }

.lan-sheet .lan-plan-warn,
.lan-plan .lan-plan-warn,
.lan-page-head .lan-plan-warn {
	background: rgba( 155, 27, 18, 0.08 );
	border-left-color: var( --lan-red );
	color: var( --lan-ink-2 );
}

/*
 * Ticket stock is the darkest paper: ink-3 measures 3.88:1 on it, under the
 * body-text floor. Anything muted sitting on ticket steps up to ink-2.
 */
.lan-rot-row .lan-muted,
.lan-plan-read .lan-muted,
.lan-plan-read .lan-plan-basis,
.lan-plan-read .lan-plan-note,
.lan-diary-day.is-today .lan-diary-date,
.lan-card:nth-child( 3n + 3 ) .lan-muted { color: var( --lan-ink-2 ); }

/* ==========================================================================
   The notice board — painted on the stage, not printed
   ========================================================================== */

.lan-notice {
	background: var( --lan-stage-3 );
	color: var( --lan-gold );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	text-align: center;
	padding: var( --lan-s-3 ) var( --lan-s-5 );
	border-bottom: 1px solid rgba( 217, 164, 65, 0.28 );
}

/* ==========================================================================
   The masthead — an enamel sign hung above the door
   ========================================================================== */

.lan-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: var( --lan-s-4 );
	background: transparent;
	transition: background 260ms var( --lan-ease );
}

.lan-header.is-stuck {
	background: rgba( 10, 30, 22, 0.92 );
	backdrop-filter: blur( 8px );
	box-shadow: 0 10px 30px -18px rgba( 0, 0, 0, 0.9 );
}

.lan-header-bar {
	display: grid;
	grid-template-columns: minmax( 0, auto ) minmax( 0, 1fr ) minmax( 0, auto );
	align-items: center;
	gap: var( --lan-s-6 );
	min-height: var( --lan-header-h );
	padding-block: var( --lan-s-3 );
}

.lan-brand {
	text-decoration: none;
	color: var( --lan-chalk );
	display: block;

	/* The enamel plate: dark ground, gold keyline, a little depth. */
	background: linear-gradient( 180deg, #16392a 0%, #0d2419 100% );
	border: 1px solid rgba( 217, 164, 65, 0.55 );
	box-shadow:
		inset 0 0 0 3px rgba( 10, 30, 22, 0.9 ),
		inset 0 1px 0 rgba( 217, 164, 65, 0.22 ),
		0 8px 20px -12px rgba( 0, 0, 0, 0.9 );
	padding: var( --lan-s-3 ) var( --lan-s-5 );
}

.lan-brand-name {
	display: block;
	font-family: var( --lan-bill );
	font-size: 1.5rem;
	line-height: 1.06;
	color: var( --lan-gold );
}

.lan-brand-sub {
	display: block;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
	margin-top: 0.15em;
}

.lan-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-5 );
	justify-content: center;
}

.lan-nav a {
	font-family: var( --lan-text );
	font-weight: 600;
	font-size: var( --lan-t-sm );
	color: var( --lan-chalk );
	text-decoration: none;
	padding-block: var( --lan-s-1 );
	border-bottom: 2px solid transparent;
}

.lan-nav a:hover,
.lan-nav .current-menu-item > a,
.lan-nav .current_page_item > a { border-bottom-color: var( --lan-gold ); }

.lan-header-side {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
	text-align: right;
	line-height: 1.5;
}

.lan-nav-toggle {
	display: none;
	background: var( --lan-ticket );
	color: var( --lan-ink );
	border: 0;
	padding: var( --lan-s-2 ) var( --lan-s-3 );
	cursor: pointer;
}

@media ( max-width: 62em ) {
	.lan-header-bar { grid-template-columns: minmax( 0, 1fr ) minmax( 0, auto ); }
	.lan-header-side { display: none; }
	.lan-nav-toggle { display: block; }

	.lan-nav {
		grid-column: 1 / -1;
		display: none;
	}

	.has-lan-nav .lan-nav {
		display: block;
		background: var( --lan-news );
		padding: var( --lan-s-5 );
		box-shadow: 0 14px 34px -12px rgba( 0, 0, 0, 0.7 );
	}

	.has-lan-nav .lan-nav ul { flex-direction: column; gap: var( --lan-s-3 ); justify-content: flex-start; }
	.has-lan-nav .lan-nav a { color: var( --lan-ink ); font-size: var( --lan-t-lg ); }
}

/* ==========================================================================
   The call board — chalked on the stage, above everything
   ========================================================================== */

.lan-strip {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: var( --lan-s-5 );
	padding-block: var( --lan-s-6 ) var( --lan-s-8 );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
}

.lan-strip b {
	display: block;
	font-family: var( --lan-text );
	font-weight: 600;
	font-size: var( --lan-t-md );
	color: var( --lan-chalk );
	margin-top: var( --lan-s-1 );
}

/* ==========================================================================
   The playbill — one big pasted sheet
   ========================================================================== */

/*
 * The hero: sheet on the left, lamp standing on the boards to the right of
 * it. The sheet is deliberately not full width — the dark stage beside it is
 * where the one real light in the building actually shows.
 */
.lan-hero {
	display: grid;
	gap: var( --lan-s-8 );
	margin-bottom: var( --lan-s-12 );
	align-items: center;
}

@media ( min-width: 64em ) {
	.lan-hero { grid-template-columns: minmax( 0, 1fr ) 17rem; gap: var( --lan-s-10 ); }
}

.lan-poster-block {
	padding: var( --lan-s-8 ) var( --lan-s-6 );
	transform: rotate( var( --lan-tilt-c ) );
	min-width: 0;
}

@media ( min-width: 64em ) {
	.lan-poster-block { padding: var( --lan-s-10 ); }
}

.lan-poster-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-2 ) var( --lan-s-5 );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	padding-bottom: var( --lan-s-4 );
	margin-bottom: var( --lan-s-6 );

	/*
	 * The one rule in the design, and it is a printer's rule: a thick-thin
	 * pair under the head of a playbill. It is not a hairline divider used
	 * everywhere — it appears here and nowhere else.
	 */
	border-bottom: 1px solid var( --lan-ink );
	box-shadow: 0 3px 0 -1px var( --lan-ink );
}

.lan-poster { color: var( --lan-ink ); }
.lan-hot    { color: var( --lan-red ); }

.lan-poster-under {
	display: grid;
	gap: var( --lan-s-8 );
	margin-top: var( --lan-s-8 );
	padding-top: var( --lan-s-6 );
	border-top: 3px double var( --lan-ink );
}

@media ( min-width: 64em ) {
	.lan-poster-under { grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); }
}

.lan-poster-lede > * { min-width: 0; }
.lan-poster-lede .lan-lede { color: var( --lan-ink-2 ); margin-top: 0; }

.lan-poster-aside { min-width: 0; }

/*
 * A plain sheet: any block of the theme's own prose that is not already one of
 * the named printed objects. Without it the block sits straight on the boards
 * and every ink in it — body, figures, the red label — lands dark-on-dark.
 */
.lan-sheet {
	padding: var( --lan-s-8 ) var( --lan-s-6 );
	transform: rotate( var( --lan-tilt-b ) );
}

@media ( min-width: 64em ) {
	.lan-sheet { padding: var( --lan-s-10 ); }
}

.lan-sheet .lan-lede,
.lan-sheet p { color: var( --lan-ink-2 ); }

/* ==========================================================================
   The bulb, drawn on the playbill
   ========================================================================== */

.lan-bulb {
	display: grid;
	justify-items: center;
	gap: var( --lan-s-5 );
	min-width: 0;
}

.lan-bulb-art { width: 86px; height: auto; }

.lan-bulb-cap {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
	text-align: center;
	line-height: 1.5;
	margin: 0;
	max-width: 15rem;
}

/* ==========================================================================
   Icons
   ==========================================================================

   An inline SVG with no intrinsic size fills whatever box it is put in. This
   theme has shipped that bug before — a 16px arrow rendered as a 200px red
   square inside a button — so the size lives here rather than on each use.
   ========================================================================== */

.lan-icon {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -0.14em;
}

.lan-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.lan-nav-toggle .lan-icon { width: 1.4rem; height: 1.4rem; }

/* ==========================================================================
   The rotation — a strip of tickets torn off a roll
   ========================================================================== */

.lan-rot {
	display: flex;
	flex-direction: column;
	gap: var( --lan-s-5 );
}

.lan-rot-row {
	background: var( --lan-ticket );
	display: grid;
	gap: var( --lan-s-2 ) var( --lan-s-5 );
	align-items: center;
	padding: var( --lan-s-5 ) var( --lan-s-6 );
	grid-template-columns: minmax( 0, auto ) minmax( 0, 1fr );
}

@media ( min-width: 64em ) {
	.lan-rot-row {
		grid-template-columns:
			3.5rem minmax( 0, 1.5fr ) minmax( 0, 1.2fr ) minmax( 0, 1fr ) minmax( 0, auto );
	}
}

/*
 * Each ticket sits at a different angle and inset, from the fixed set, so the
 * strip reads as torn-off stubs rather than table rows.
 */
.lan-rot-row:nth-child( 3n + 1 ) { transform: rotate( var( --lan-tilt-c ) ); margin-right: var( --lan-s-8 ); }
.lan-rot-row:nth-child( 3n + 2 ) { transform: rotate( var( --lan-tilt-b ) ); margin-left: var( --lan-s-6 ); }
.lan-rot-row:nth-child( 3n + 3 ) { transform: rotate( var( --lan-tilt-a ) ); margin-right: var( --lan-s-5 ); margin-left: var( --lan-s-3 ); }

.lan-rot-no {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-lg );
	color: var( --lan-red );
	margin: 0;
}

.lan-rot-title {
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-xl );
	line-height: 1.02;
	margin: 0;
	color: var( --lan-ink );
}

.lan-rot-title a { text-decoration: none; }
.lan-rot-title a:hover { color: var( --lan-red ); }

.lan-rot-meta,
.lan-rot-run {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-2 );
	margin: 0;
	line-height: 1.55;
}

.lan-rot-book { margin: 0; justify-self: start; }

@media ( min-width: 64em ) {
	.lan-rot-book { justify-self: end; }
}

/* ==========================================================================
   The call sheet — the overlap bars, typed and pinned
   ========================================================================== */

.lan-strip-bars {
	background: var( --lan-receipt );
	padding: var( --lan-s-6 );
	transform: rotate( var( --lan-tilt-b ) );
	font-family: var( --lan-mech );
}

.lan-bar-row {
	display: grid;
	grid-template-columns: minmax( 0, 9rem ) minmax( 0, 1fr );
	gap: var( --lan-s-4 );
	align-items: center;
	padding-block: var( --lan-s-2 );
}

.lan-bar-label {
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-2 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lan-bar-track {
	position: relative;
	display: block;
	height: 1.15rem;
	background: repeating-linear-gradient( 90deg,
		rgba( 28, 26, 20, 0.14 ) 0 1px, transparent 1px 9px );
	box-shadow: inset 0 0 0 1px rgba( 28, 26, 20, 0.22 );
}

.lan-bar-fill {
	position: absolute;
	top: 0; bottom: 0;
	display: block;
}

/*
 * Three runs, three values — not three tints of one accent. The third is
 * ruled rather than solid so it still reads as a filled span against a light
 * track; a pale fill on a pale track is no bar at all.
 */
.lan-bar-row:nth-child( 3n + 1 ) .lan-bar-fill { background: var( --lan-ink ); }
.lan-bar-row:nth-child( 3n + 2 ) .lan-bar-fill { background: var( --lan-red ); }
.lan-bar-row:nth-child( 3n + 3 ) .lan-bar-fill {
	background: repeating-linear-gradient( 90deg,
		var( --lan-green ) 0 3px, var( --lan-receipt ) 3px 6px );
	box-shadow: inset 0 0 0 1px var( --lan-green );
}

.lan-bar-today {
	position: absolute;
	top: -4px; bottom: -4px;
	width: 2px;
	background: var( --lan-mustard );
}

/* ==========================================================================
   The receipt roll — the house figures
   ========================================================================== */

.lan-figures {
	background: var( --lan-receipt );
	padding: var( --lan-s-6 ) var( --lan-s-5 ) var( --lan-s-8 );
	font-family: var( --lan-mech );
	transform: rotate( var( --lan-tilt-a ) );
	display: grid;
	gap: var( --lan-s-5 );
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
}

.lan-figures > div {
	padding-bottom: var( --lan-s-4 );
	border-bottom: 1px dashed rgba( 28, 26, 20, 0.3 );
}

.lan-figure-value {
	font-family: var( --lan-bill );
	font-size: var( --lan-t-2xl );
	line-height: 1;
	color: var( --lan-ink );
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.lan-figure-label {
	font-size: var( --lan-t-sm );
	color: var( --lan-ink );
	margin: var( --lan-s-2 ) 0 0;
}

.lan-figure-note {
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: var( --lan-s-1 ) 0 0;
	line-height: 1.5;
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.lan-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --lan-s-4 );
	margin-bottom: var( --lan-s-8 );
}

.lan-section-head .lan-h1,
.lan-section-head .lan-h2 { color: var( --lan-chalk ); }
.lan-section-head .lan-muted { color: var( --lan-chalk-2 ); }

/* ==========================================================================
   The seating chart — a folded card
   ========================================================================== */

.lan-plan {
	background: var( --lan-fine );
	padding: var( --lan-s-6 );
	display: grid;
	gap: var( --lan-s-6 );
}

@media ( min-width: 68em ) {
	.lan-plan { grid-template-columns: minmax( 0, 1fr ) 21rem; gap: var( --lan-s-8 ); }
}

.lan-plan-house { min-width: 0; }

.lan-plan-stage {
	background: var( --lan-ink );
	color: var( --lan-fine );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	text-align: center;
	padding: var( --lan-s-3 );
	margin: 0 0 var( --lan-s-5 );
}

.lan-plan-bank {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: var( --lan-s-5 ) 0 var( --lan-s-2 );
}

.lan-plan-row {
	display: grid;
	grid-template-columns: 1.5rem repeat( var( --lan-seats ), minmax( 0, 1fr ) );
	gap: 2px;
	align-items: center;
	margin-bottom: 3px;
}

.lan-plan-letter {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
}

.lan-seat {
	aspect-ratio: 1;
	min-width: 0;
	border: 1px solid var( --lan-ink );
	background: var( --lan-fine );
	padding: 0;
	cursor: pointer;
	border-radius: 2px 2px 0 0;
}

.lan-seat--side     { background: #d8cfb8; }
.lan-seat--heads    { background: repeating-linear-gradient( 45deg, var( --lan-ink ) 0 1px, transparent 1px 3px ); }

/*
 * Five states at eighteen pixels square have to differ by pattern type, not
 * by angle: two hatches at plus and minus forty-five degrees are the same
 * seat to anyone who is not comparing them side by side.
 */
.lan-seat--flat {
	background-image: radial-gradient( var( --lan-ink ) 0.9px, transparent 1px );
	background-size: 4px 4px;
}

.lan-seat--overhang { background: var( --lan-ink ); }

.lan-seat.is-on {
	background: var( --lan-red );
	border-color: var( --lan-red );
	box-shadow: 0 0 0 3px rgba( 155, 27, 18, 0.28 );
}

.lan-plan-key {
	list-style: none;
	margin: var( --lan-s-6 ) 0 0;
	padding: var( --lan-s-4 ) 0 0;
	border-top: 1px solid rgba( 28, 26, 20, 0.2 );
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-2 ) var( --lan-s-5 );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-2 );
}

.lan-plan-key li { display: flex; align-items: center; gap: var( --lan-s-2 ); }
.lan-plan-key .lan-seat { width: 14px; aspect-ratio: 1; cursor: default; }

.lan-plan-read {
	background: var( --lan-ticket );
	padding: var( --lan-s-5 );
	align-self: start;
	box-shadow: inset 0 0 0 1px rgba( 28, 26, 20, 0.18 );
}

.lan-plan-seatid {
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-2xl );
	line-height: 1;
	color: var( --lan-ink );
	margin: 0 0 var( --lan-s-2 );
}

.lan-plan-grade {
	font-family: var( --lan-text );
	font-weight: 600;
	font-size: var( --lan-t-lg );
	color: var( --lan-ink );
	margin: 0 0 var( --lan-s-2 );
}

/* The verdict carries its own ink, so the answer is legible before it is read. */
.lan-plan-grade--clear    { color: var( --lan-green ); }
.lan-plan-grade--side,
.lan-plan-grade--flat     { color: var( --lan-ink-2 ); }
.lan-plan-grade--heads,
.lan-plan-grade--overhang { color: var( --lan-red ); }

.lan-plan-note {
	font-size: var( --lan-t-sm );
	color: var( --lan-ink-2 );
	margin: 0;
	line-height: 1.5;
}

.lan-plan-read .lan-h2,
.lan-plan-read .lan-h3 {
	font-family: var( --lan-bill );
	font-weight: 400;
	color: var( --lan-ink );
}

.lan-plan-figures {
	margin: var( --lan-s-4 ) 0 0;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
}

.lan-plan-figures > div {
	display: flex;
	justify-content: space-between;
	gap: var( --lan-s-3 );
	padding-block: var( --lan-s-2 );
	border-bottom: 1px dotted rgba( 28, 26, 20, 0.28 );
}

.lan-plan-figures dt { color: var( --lan-ink-2 ); margin: 0; }
.lan-plan-figures dd {
	margin: 0;
	color: var( --lan-ink );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Layout only. The colours for these two are set once, further up, together
 * with the rest of the on-paper/on-stage decision — declaring them again here
 * put the ink back and silently beat the earlier rule, which is how the
 * warning on a production page ended up at 1.58:1 on the boards.
 */
.lan-plan-basis {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	line-height: 1.55;
	margin: var( --lan-s-4 ) 0 0;
}

.lan-plan-warn {
	border-left: 4px solid;
	padding: var( --lan-s-4 ) var( --lan-s-5 );
	margin: 0;
}

/* ==========================================================================
   Cards — a pile, not a grid
   ========================================================================== */

/*
 * Three cycling widths left a hole whenever the post count did not divide by
 * the pattern — five journal entries ended with one card alone in a row and
 * two thirds of the band empty. Equal tracks always fill; the pile character
 * comes from the stock, the tilt and the vertical offset instead, which is a
 * cheaper way to buy it and does not depend on how many posts exist.
 */
.lan-cards {
	display: grid;
	gap: var( --lan-s-8 ) var( --lan-s-6 );
	grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
	align-items: start;
}

.lan-card {
	background: var( --lan-news );
	padding: var( --lan-s-5 );
	min-width: 0;
}

@media ( min-width: 56em ) {
	.lan-card:nth-child( 3n + 1 ) { transform: rotate( var( --lan-tilt-a ) ); }
	.lan-card:nth-child( 3n + 2 ) {
		transform: rotate( var( --lan-tilt-b ) );
		margin-top: var( --lan-s-6 );
		background: var( --lan-receipt );
	}
	.lan-card:nth-child( 3n + 3 ) {
		transform: rotate( var( --lan-tilt-c ) );
		margin-top: var( --lan-s-3 );
		background: var( --lan-ticket );
	}
	.lan-card:nth-child( 3n + 3 ) .lan-muted { color: var( --lan-ink-2 ); }
}

.lan-card-title {
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-lg );
	line-height: 1.06;
	margin: 0 0 var( --lan-s-3 );
	color: var( --lan-ink );
}

.lan-card-title a { text-decoration: none; }
.lan-card-title a:hover { color: var( --lan-red ); }

.lan-card p { color: var( --lan-ink-2 ); margin: 0 0 var( --lan-s-3 ); }
.lan-card .lan-muted { color: var( --lan-ink-3 ); }

.lan-card-figure { margin: 0 0 var( --lan-s-4 ); }
.lan-card-figure img { width: 100%; }

/* ==========================================================================
   The diary — tear-off dated stubs
   ========================================================================== */

.lan-diary {
	display: flex;
	flex-direction: column;
	gap: var( --lan-s-4 );
}

.lan-diary-day {
	background: var( --lan-receipt );
	display: grid;
	grid-template-columns: 5.5rem minmax( 0, 1fr );
	gap: var( --lan-s-5 );
	padding: var( --lan-s-4 ) var( --lan-s-5 );
	align-items: start;
}

.lan-diary-day.is-today {
	background: var( --lan-ticket );
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.5 ),
		0 14px 34px -12px rgba( 0, 0, 0, 0.7 ),
		inset 0 0 0 2px var( --lan-red );
}

.lan-diary-date {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: 0;
	line-height: 1.3;
}

.lan-diary-date b {
	display: block;
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-xl );
	color: var( --lan-ink );
	line-height: 1;
}

.lan-diary-perfs { display: flex; flex-direction: column; gap: var( --lan-s-2 ); min-width: 0; }

.lan-perf {
	display: grid;
	grid-template-columns: 3.5rem minmax( 0, 1fr ) minmax( 0, auto );
	gap: var( --lan-s-3 );
	align-items: baseline;
	padding-block: var( --lan-s-1 );
}

.lan-perf-time {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-sm );
	color: var( --lan-ink );
	font-variant-numeric: tabular-nums;
}

.lan-perf-title {
	font-family: var( --lan-text );
	font-weight: 600;
	color: var( --lan-ink );
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lan-perf-title a { text-decoration: none; }
.lan-perf-title a:hover { color: var( --lan-red ); }

.lan-tag {
	display: inline-block;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	padding: 0.1em 0.5em;
	border: 1px solid var( --lan-ink-3 );
	color: var( --lan-ink-2 );
}

.lan-tag--access { border-color: var( --lan-green ); color: var( --lan-green ); }
.lan-tag--sold   { border-color: var( --lan-red ); color: var( --lan-red ); }

/* ==========================================================================
   Inner pages
   ========================================================================== */

/*
 * The head of an inner page is a smaller bill pasted up beside the stage, not
 * a slab across the whole shell. Full width left the right half of every
 * inner page empty, which reads as an unfinished page rather than as space.
 */
.lan-page-head {
	padding: var( --lan-s-8 ) var( --lan-s-6 );
	margin-block: var( --lan-s-8 ) var( --lan-s-10 );
	transform: rotate( var( --lan-tilt-c ) );
	max-width: 54rem;
}

@media ( min-width: 64em ) {
	.lan-page-head { padding: var( --lan-s-10 ); }
}

.lan-page-head .lan-h1 { color: var( --lan-ink ); }
.lan-page-head .lan-lede { color: var( --lan-ink-2 ); }
.lan-page-head .lan-label { color: var( --lan-red ); }

/*
 * The class sits on the <nav>; the list is inside it. Styling the nav as the
 * list leaves the ol at its browser default, which is how this shipped with
 * numbered breadcrumbs reading "1. Home  2. What is on".
 */
.lan-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-2 );
	margin: 0 0 var( --lan-s-4 );
	padding: 0;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
}

.lan-crumbs a { text-decoration: none; color: var( --lan-ink-2 ); }
.lan-crumbs li + li::before { content: '/'; margin-right: var( --lan-s-2 ); }

.lan-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-2 ) var( --lan-s-5 );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: 0 0 var( --lan-s-4 );
}

.lan-page-head + .lan-article-figure,
.lan-article-figure { margin: 0 0 var( --lan-s-10 ); }

.lan-article-figure img {
	width: 100%;
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.5 ),
		0 18px 40px -14px rgba( 0, 0, 0, 0.75 );
}

/*
 * The article body is a printed sheet too, so it carries the stock rather
 * than floating as light text on the dark stage — a long read on a dark
 * ground is a long read nobody finishes.
 */
.lan-section.lan-prose {
	background: var( --lan-news );
	color: var( --lan-ink );
	max-width: none;
	padding: var( --lan-s-8 ) var( --lan-s-6 );
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.5 ),
		0 14px 34px -12px rgba( 0, 0, 0, 0.7 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.55 );
}

@media ( min-width: 64em ) {
	/*
	 * A programme page is the width of its text plus its margins, and that is
	 * all. The previous design held the measure inside a full-width slab and
	 * left the right half of the sheet blank, which on real-looking paper
	 * reads as a page that was not finished printing.
	 */
	.lan-section.lan-prose {
		padding: var( --lan-s-12 );
		max-width: calc( var( --lan-measure ) + 2 * var( --lan-s-12 ) );
	}
}

/* ==========================================================================
   The company
   ========================================================================== */

.lan-people {
	display: grid;
	gap: var( --lan-s-6 );
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
}

.lan-person {
	background: var( --lan-news );
	color: var( --lan-ink );
	padding: var( --lan-s-5 );
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.5 ),
		0 12px 28px -12px rgba( 0, 0, 0, 0.7 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.55 );
}

.lan-person:nth-child( 2n )     { transform: rotate( var( --lan-tilt-b ) ); }
.lan-person:nth-child( 2n + 1 ) { transform: rotate( var( --lan-tilt-c ) ); }

.lan-person p { color: var( --lan-ink-2 ); font-size: var( --lan-t-sm ); }
.lan-person .lan-h4 a { text-decoration: none; }
.lan-person .lan-h4 a:hover { color: var( --lan-red ); }

.lan-person-role {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-red );
	margin: var( --lan-s-1 ) 0 0;
}

.lan-monogram {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	background: var( --lan-ink );
	color: var( --lan-news );
	font-family: var( --lan-bill );
	font-size: 1.2rem;
	border-radius: 50%;
}

/* ==========================================================================
   Utility blocks
   ========================================================================== */

.lan-empty,
.lan-404 {
	padding: var( --lan-s-10 ) var( --lan-s-6 );
	text-align: center;
	transform: rotate( var( --lan-tilt-b ) );
}

.lan-404 { display: grid; justify-items: center; gap: var( --lan-s-4 ); }

.lan-404-code {
	font-family: var( --lan-bill );
	font-size: var( --lan-t-bill );
	color: var( --lan-red );
	line-height: 1;
	margin: 0;
}

.lan-404 .lan-h2,
.lan-empty .lan-h3 { color: var( --lan-ink ); }
.lan-404 .lan-lede,
.lan-empty .lan-muted { color: var( --lan-ink-2 ); }

.lan-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-2 );
	padding: 0;
	margin: var( --lan-s-8 ) 0 0;
}

.lan-pagination a,
.lan-pagination span {
	display: block;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-sm );
	padding: var( --lan-s-2 ) var( --lan-s-4 );
	background: var( --lan-ticket );
	color: var( --lan-ink );
	text-decoration: none;
}

.lan-pagination .current { background: var( --lan-red ); color: var( --lan-news ); }

.lan-searchform { display: flex; gap: var( --lan-s-2 ); max-width: 28rem; }
.lan-searchform .lan-input { flex: 1; }

/* ==========================================================================
   Comments
   ========================================================================== */

.lan-comments {
	padding: var( --lan-s-8 ) var( --lan-s-6 );
	margin-top: var( --lan-s-10 );
	color: var( --lan-ink );
}

.lan-comments .lan-h3 { color: var( --lan-ink ); }

.lan-comment-list,
.lan-comment-list ol { list-style: none; padding: 0; margin: var( --lan-s-6 ) 0 0; }
.lan-comment-list ol { padding-left: var( --lan-s-6 ); }

.lan-comment-list li { margin-bottom: var( --lan-s-6 ); }

.lan-comments label {
	display: block;
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-2 );
	margin-bottom: var( --lan-s-2 );
}

.lan-comments input[ type="text" ],
.lan-comments input[ type="email" ],
.lan-comments input[ type="url" ],
.lan-comments textarea {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-sm );
	padding: var( --lan-s-3 );
	background: var( --lan-receipt );
	color: var( --lan-ink );
	border: 0;
	width: 100%;
	box-shadow: inset 0 1px 3px rgba( 28, 26, 20, 0.28 );
}

/* ==========================================================================
   The footer — the back of the programme
   ========================================================================== */

.lan-footer {
	background: var( --lan-stage-3 );
	color: var( --lan-chalk-2 );
	margin-top: var( --lan-s-16 );
	padding-block: var( --lan-s-10 );
	border-top: 1px solid rgba( 217, 164, 65, 0.22 );
}

/*
 * The class in the markup is .lan-footer-top. This file previously styled a
 * .lan-footer-cols that does not exist anywhere, so the four columns fell
 * back to block layout and stacked into a 1200px column down the left edge
 * with the whole right of the page empty. Class names get checked against the
 * markup now, not remembered.
 */
.lan-footer-top {
	display: grid;
	gap: var( --lan-s-8 ) var( --lan-s-6 );
	/*
	 * 11.5rem, not 14: at 1440 the shell is 1360 and six columns with the 2rem
	 * gaps need a 200px track. At 14rem only five fit and the sixth wrapped
	 * onto a row of its own with five columns of nothing beside it.
	 */
	grid-template-columns: repeat( auto-fit, minmax( 11.5rem, 1fr ) );
	align-items: start;
}

/*
 * No explicit column count here. The footer widget area injects however many
 * widgets the site owner added, so a hard-coded five-column template wraps the
 * sixth child onto its own row and leaves most of a row empty. auto-fit takes
 * whatever arrives.
 */

.lan-footer-col { min-width: 0; }

/*
 * The address and the hours come through wpautop, so each line arrives as its
 * own paragraph with a full paragraph margin. On an address that reads as
 * three unrelated lines rather than one block.
 */
.lan-footer-note p { margin: 0 0 var( --lan-s-1 ); }
.lan-footer-note p:last-child { margin-bottom: 0; }

/* Widgets land in the same column shell and must not bring their own look. */
.lan-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lan-footer .widget li { margin-bottom: var( --lan-s-2 ); }

.lan-footer .widget a {
	color: var( --lan-chalk );
	text-decoration: none;
	font-size: var( --lan-t-sm );
}

.lan-footer .widget a:hover { color: var( --lan-gold ); }

.lan-footer .widget h2,
.lan-footer .widget h3,
.lan-footer .widget .wp-block-heading {
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-md );
	color: var( --lan-gold );
	margin: 0 0 var( --lan-s-3 );
}

.lan-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --lan-s-4 );
	margin-top: var( --lan-s-10 );
	padding-top: var( --lan-s-5 );
	border-top: 1px solid rgba( 217, 164, 65, 0.22 );
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
}

.lan-footer-legal p { margin: 0; }

.lan-footer-legal ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --lan-s-5 );
	margin: 0;
	padding: 0;
}

.lan-footer-legal a { color: var( --lan-chalk-2 ); text-decoration: none; }
.lan-footer-legal a:hover { color: var( --lan-gold ); }

/* An alias, because the markup asks for the old name in one place. */
.lan-mono {
	font-family: var( --lan-mech );
	letter-spacing: 0;
}

/* ==========================================================================
   Comments — the whole component had no rules at all
   ========================================================================== */

.lan-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --lan-s-3 );
	margin-bottom: var( --lan-s-2 );
}

.lan-comment-author {
	font-family: var( --lan-text );
	font-weight: 600;
	color: var( --lan-ink );
	margin: 0;
}

.lan-comment-date {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: 0;
	text-decoration: none;
}

.lan-comment-body {
	color: var( --lan-ink-2 );
	margin: 0 0 var( --lan-s-2 );
}

.lan-comment-body p { margin: 0 0 var( --lan-s-3 ); }
.lan-comment-body p:last-child { margin-bottom: 0; }

.lan-comment-reply a {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-red );
	text-decoration: none;
}

.lan-faint {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-ink-3 );
	margin: 0 0 var( --lan-s-2 );
}

.lan-footer-title {
	font-family: var( --lan-bill );
	font-weight: 400;
	font-size: var( --lan-t-md );
	color: var( --lan-gold );
	margin: 0 0 var( --lan-s-3 );
}

.lan-footer-col ul { list-style: none; margin: 0; padding: 0; }
.lan-footer-col li { margin-bottom: var( --lan-s-2 ); }

.lan-footer-col a {
	color: var( --lan-chalk );
	text-decoration: none;
	font-size: var( --lan-t-sm );
}

.lan-footer-col a:hover { color: var( --lan-gold ); }

.lan-footer-note {
	font-family: var( --lan-mech );
	font-size: var( --lan-t-xs );
	color: var( --lan-chalk-2 );
	line-height: 1.6;
	margin: 0 0 var( --lan-s-2 );

	/*
	 * No white-space: pre-line here. These values run through wpautop, which
	 * already emits a <br> and a newline between lines; honouring the newline
	 * a second time double-spaces every address.
	 */
}

/* ==========================================================================
   Mobile — the pile flattens
   ==========================================================================

   Rotation is charming at 1440 and cramped at 390: tilted objects clip each
   other and eat the gutters. Below 56em everything lies flat.
   ========================================================================== */

@media ( max-width: 56em ) {
	.lan-sheet,
	.lan-poster-block,
	.lan-rot-row,
	.lan-figures,
	.lan-strip-bars,
	.lan-page-head,
	.lan-card,
	.lan-person,
	.lan-empty,
	.lan-404 {
		transform: none;
		margin-left: 0;
		margin-right: 0;
	}

	/*
	 * Five call-board items stacked one per row pushed the playbill most of a
	 * screen down. Two columns halves that without shrinking the figures.
	 */
	.lan-strip {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --lan-s-4 );
	}

	.lan-rot-row { grid-template-columns: 2.5rem minmax( 0, 1fr ); }
	.lan-diary-day { grid-template-columns: 4rem minmax( 0, 1fr ); gap: var( --lan-s-3 ); }
	.lan-perf { grid-template-columns: 3rem minmax( 0, 1fr ); }
	.lan-perf > span:last-child { grid-column: 1 / -1; }
}