/* L44 Case Study — the sections.
 * -------------------------------------------------------------------------
 * Every section stands on the same thousand-pixel measure as the rest of the
 * site, so a case study reads as part of the page rather than a run of things
 * dropped into it.
 *
 * The theme skins headings, paragraphs and spans throughout, so each of these
 * says outright what it is. Left to inherit, a title comes out at whatever size
 * the theme has decided headings are — which is the whole of what these
 * settings exist to control.
 */

.l44cs {
	/* The gutter, and it is added to the thousand rather than taken out of it.

	   Written the other way round — a thousand-pixel maximum with the padding
	   inside it — the measure came out at 970 and every heading in a case study
	   sat fifteen pixels in from the gallery headings above and below it, which
	   are built the way this now is. The rest of the suite already agrees on
	   this shape: the rails, the calendar, the poster wall and the info box all
	   add their inset outside. This was the one that did not.

	   Thirty-five rather than nothing, so a window between a thousand and this
	   maximum narrows gently instead of putting the text against both edges at
	   1001. */
	--l44cs-inset: 35px;

	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #181617;
}

.l44cs__inner {
	width: 100%;
	max-width: calc( 1000px + var(--l44cs-inset, 35px) * 2 );
	margin: 0 auto;
	padding-left: var(--l44cs-inset, 35px);
	padding-right: var(--l44cs-inset, 35px);
	box-sizing: border-box;
}

/* Below the measure there is nothing left to hold, so the inset becomes the
   phone's gutter — the same fifteen the rest of the suite uses. */
@media (max-width: 1000px) {
	.l44cs { --l44cs-inset: 15px; }
}

/* ---- the header ---- */

/* A section at the top of a page is given room under the site's header by the
   script, which measures it — the header is one height on a desktop and another
   on a phone. This is only the space a section wants of its own. */
.l44cs--header { margin: 30px 0; }

/* The name on the left, the dates against the right edge, both sitting on the
   same top line — so a title running to three rows grows downward and the dates
   stay where they were. */
.l44cs-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.l44cs-header__left { min-width: 0; }

.l44cs-header__title {
	margin: 0 !important;
	padding: 0 !important;

	/* Never larger than the measure can hold: a long name at a size chosen for
	   a short one would otherwise run off the side rather than wrap. */
	font-size: min( var(--l44cs-title, 70px), 9.2vw ) !important;
	font-weight: 700 !important;
	font-family: "CoFoSans Bold", "CoFo Sans", inherit !important;
	line-height: 0.98 !important;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.l44cs-header__sub {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	font-size: min( var(--l44cs-sub, 25px), 3.6vw ) !important;
	font-weight: 400 !important;
	line-height: 1.22 !important;
	text-transform: uppercase;
}

/* The dates: against the right edge, and never wrapped by the browser — where
   a line breaks in them is written into the field, not left to chance. */
.l44cs-header__dates {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-size: min( var(--l44cs-date, 50px), 6.6vw ) !important;
	font-weight: 400 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.01em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.l44cs--header { margin: 20px 0; }

	/* Stacked, with the dates under the name rather than squeezed beside it:
	   two columns on a phone leaves a long name in a column too narrow to read
	   and the dates broken across lines nobody chose. */
	.l44cs-header {
		display: block;
	}

	.l44cs-header__title { font-size: min( var(--l44cs-title, 70px), 13vw ) !important; }
	.l44cs-header__sub { font-size: min( var(--l44cs-sub, 25px), 5vw ) !important; }

	/* Still against the right edge, and still right-aligned.
	   
	   Stacking the block put the dates under the name, and left-aligning them
	   there put the run of the show in the same column as everything else —
	   which reads as a third line of the subtitle rather than the other half of
	   a header. Kept to the right, they stay the thing the eye goes to after
	   the name, as they are across a page. */
	.l44cs-header__dates {
		display: block;
		margin-top: 16px !important;
		margin-left: auto !important;
		font-size: min( var(--l44cs-date, 50px), 9vw ) !important;
		text-align: right;
	}
}

/* ---- the artist bio ----
 *
 * A photograph on the left and a few lines beside it, on a band of its own. The
 * band's colour is what separates it from the page rather than a rule or a box,
 * which is how the rest of the site marks a section off.
 */

.l44cs--bio {
	margin: 30px 0;
	background: #efefef;
}

.l44cs-bio {
	display: grid;
	grid-template-columns: var(--l44cs-bio-shot, 500px) 1fr;

	/* Both columns start at the top, so the name sits level with the top of the
	   photograph rather than the two being centred against each other. */
	align-items: start;
	gap: 40px;

	/* The band's height is set rather than left to its contents, so a run of
	   bios stands to the same measure whether one of them has four lines or
	   eight. A longer piece of writing than the band can hold makes it taller
	   rather than being cut — a bio with its last line missing is worse than a
	   row of bands that are not quite equal. */
	min-height: var(--l44cs-bio-tall, 370px);
	padding: 35px 0;
	box-sizing: border-box;
}

.l44cs-bio__shot { min-width: 0; }

.l44cs-bio__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc( var(--l44cs-bio-tall, 370px) - 70px );
	object-fit: cover;
}

.l44cs-bio__words { min-width: 0; }

.l44cs-bio__name {
	/* Lifted by a hair.
	   
	   A line of text sits inside a box taller than the letters themselves, with
	   a little space above the capitals — so aligning the boxes leaves the name
	   looking a touch low against the photograph's edge, which is a straight
	   line with nothing above it. Taking that space back off levels what the eye
	   compares, which is the top of the letters and the top of the picture. */
	margin: -0.12em 0 22px !important;
	padding: 0 !important;
	font-size: var(--l44cs-bio-title, 35px) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	text-transform: uppercase;
}

.l44cs-bio__text p {
	margin: 0 0 1em !important;
	padding: 0 !important;
	font-size: var(--l44cs-bio-text, 20px) !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;

	/* Set justified, as the design has it. Hyphenation with it, since justified
	   text without it opens rivers of white space between short words. */
	text-align: justify;
	hyphens: auto;
}

.l44cs-bio__text p:last-child { margin-bottom: 0 !important; }

@media (max-width: 700px) {
	.l44cs--bio { margin: 20px 0; }

	/* Stacked, and the band's height given up: holding a phone to a figure
	   chosen for a page across leaves either a photograph too small to see or a
	   column of white under the writing. */
	.l44cs-bio {
		grid-template-columns: 1fr;
		gap: 20px;
		min-height: 0;
		padding: 20px 0;
	}

	.l44cs-bio__img { max-height: none; }

	.l44cs-bio__name { margin-bottom: 14px !important; }

	/* Ragged on a phone. Justified text in a narrow column is mostly gaps. */
	.l44cs-bio__text p { text-align: left; }
}

/* ---- the curatorial text ----
 *
 * The picture stands to the right and the writing runs beside it, then carries
 * on underneath once it is past — so a statement longer than the poster is tall
 * finishes across the whole measure rather than in a narrow column with white
 * space beside it.
 *
 * Which is why this is a float and not a grid. A grid keeps its columns to the
 * bottom of the row: the writing would stay in its half however far it ran,
 * leaving a tall column of nothing beside it. A float is the one arrangement
 * where text goes round a thing and then closes over it.
 */

.l44cs--text { margin: 30px 0; }

.l44cs--text .l44cs-bio {
	display: block;
	min-height: var(--l44cs-bio-tall, 745px);
	padding: 0;
}

/* The floated picture is taken out of the flow, so the block would otherwise
   end above it. This holds the bottom of the block below whatever is floated
   inside it. */
.l44cs--text .l44cs-bio::after {
	content: "";
	display: block;
	clear: both;
}

.l44cs--text .l44cs-bio__shot {
	float: right;
	width: var(--l44cs-bio-shot, 470px);

	/* The room the picture keeps to itself.
	   
	   The side gap keeps the writing off its edge. The one underneath decides
	   where the text closes over — and because a line is either beside the
	   picture or below it, a few pixels there move a whole line from one to the
	   other. Below nothing brings that line up. */
	margin: 0 0 var(--l44cs-bio-under, 0px) var(--l44cs-bio-side, 25px);
}

/* A poster is worth seeing whole, so it is fitted rather than filled — a crop
   across an illustration is a crop across the work. */
.l44cs--text .l44cs-bio__img {
	max-height: var(--l44cs-bio-tall, 745px);
	object-fit: contain;
}

.l44cs--text .l44cs-bio__words { min-width: 0; }

@media (max-width: 700px) {
	.l44cs--text { margin: 20px 0; }

	/* Laid out as a column on a phone, so the writing can be put before the
	   picture — which the markup does not do, because a float needs the picture
	   first. Two orders for two arrangements, and the one a reader meets is the
	   one that suits the screen they are on. */
	.l44cs--text .l44cs-bio {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.l44cs--text .l44cs-bio__words { order: 1; }
	.l44cs--text .l44cs-bio__shot { order: 2; }

	/* No float on a phone: a picture beside text in a column that narrow leaves
	   room for three or four words a line. The writing comes first and the
	   poster follows it. */
	.l44cs--text .l44cs-bio__shot {
		float: none;
		width: 100%;
		margin: 20px 0 0;
	}

	.l44cs--text .l44cs-bio__img { max-height: none; }
}

/* ---- a 3D object ----
 *
 * Turning on its own, on the page's own ground rather than in a box of its own
 * — the model is the thing to look at and a frame around it would be one more
 * edge competing with the object's.
 */

.l44cs--object { margin: 30px 0; }

/* With words behind it, the two are stacked in one box: the writing fills it,
   the object stands in the middle of it. */
.l44cs--object.has-words .l44cs__inner {
	position: relative;
	height: var(--l44cs-object-tall, 560px);
	overflow: hidden;
}

.l44cs-object__words {
	/* Held to the inset rather than to the box.

	   An absolutely placed child is measured against its parent's padding box,
	   which the gutter is outside of — so left:0 put this against the edge of
	   the 1070 rather than the edge of the thousand, and the 15px it carried
	   was standing in for a gutter it could not see. Written as the inset, it
	   lands on the measure at every width and follows it down to the phone. */
	position: absolute;
	left: var(--l44cs-inset, 35px);
	right: var(--l44cs-inset, 35px);
	top: 0;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	overflow: hidden;

	/* The size in one place, so the line height and the block height are both
	   worked out from whatever it happens to be — including the smaller one a
	   narrow screen uses. */
	--l44cs-fs: var(--l44cs-words, 70px);
	--l44cs-line: calc( var(--l44cs-fs) * 1.05 );

	/* As many whole lines as fit, and not a pixel more.
	   
	   Filling the band to its own height cuts the last line wherever it happens
	   to fall, and a few pixels of the tops of letters along the bottom edge is
	   worse than a little space — it reads as a mistake rather than as a wall
	   that ends. The height PHP works out is the fallback; this is the same sum
	   done where the size may have changed since. */
	height: var(--l44cs-words-h, var(--l44cs-object-tall, 560px));

	font-size: var(--l44cs-fs) !important;
	font-weight: 700 !important;
	font-family: "CoFoSans Bold", "CoFo Sans", inherit !important;
	line-height: 1.05 !important;
	color: var(--l44cs-words-ink, #999999) !important;
	text-transform: uppercase;

	/* Every line reaching both edges, the last one included — which justify
	   alone does not do, and a short last line would give the whole thing away
	   as writing rather than as a wall. */
	text-align: justify;
	text-align-last: justify;

	/* Not to be selected, not to be caught by a pointer, not to be read out.
	   It is a texture the object stands on; a reader dragging across the page
	   should no more select it than they would select a photograph. */
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

/* Where the browser can do the arithmetic itself, it does — the size on a
   narrow screen depends on the width of the window, which PHP cannot know. */
@supports ( height: round( down, 10px, 3px ) ) {
	.l44cs-object__words {
		height: round( down, var(--l44cs-object-tall, 560px), var(--l44cs-line) );
	}
}

.l44cs--object.has-words .l44cs-object__view {
	/* On the measure, not on the box — the same reason as the words above it.
	   inset: 0 stretched the object across the gutter as well. */
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--l44cs-inset, 35px);
	right: var(--l44cs-inset, 35px);

	/* The width comes from the two edges, not from the base rule's 100% —
	   which is 100% of the padding box and would put the object back across
	   the gutter with its left edge in the right place and its right edge
	   seventy pixels past the measure. */
	width: auto;
	height: 100%;
}

.l44cs-object__view {
	display: block;
	width: 100%;
	height: var(--l44cs-object-tall, 560px);
	background: transparent;

	/* The poster fades rather than being swapped for the model, so the moment
	   it arrives is not a flash. */
	--poster-color: transparent;
}

/* Before the viewer's script has arrived the tag means nothing to the browser,
   which would leave the poster at whatever size it happens to be. This holds
   the space either way, so the page does not jump when the model appears. */
model-viewer:not(:defined) {
	display: block;
	width: 100%;
	height: var(--l44cs-object-tall, 560px);
}

@media (max-width: 700px) {
	.l44cs--object { margin: 20px 0; }

	/* The writing comes down with the screen, or a sentence set for a
	   thousand-pixel measure gives three words a line on a phone. */
	/* Redefined rather than overridden, so the line height and the block
	   height follow it down together. */
	.l44cs-object__words { --l44cs-fs: min( var(--l44cs-words, 70px), 9vw ); }

	/* Shorter on a phone: a tall model on a narrow screen is a screenful of one
	   object before a reader has reached anything else. */
	.l44cs-object__view,
	model-viewer:not(:defined) { height: min( var(--l44cs-object-tall, 560px), 62vh ); }
}

/* ---- planning and production ----
 *
 * A heading, an account of how the show was made, and two pictures pinned to
 * the wall under it.
 *
 * Each picture is a sheet of paper with tape across its corners. The tape runs
 * past the paper and off the edge of its own box — which is what makes it read
 * as tape holding something up rather than as a yellow shape beside it. So the
 * box is bigger than the paper on every side, the paper sits inside it where
 * the design puts it, and the tape is laid over the top of both.
 *
 * The two boxes are different widths and the same height, which is what lines
 * the two sheets up: neither is positioned against the other, they simply both
 * begin their paper the same distance down.
 *
 * The tape comes from the stylesheet by a relative path rather than being
 * handed in as a custom property. Combine & Minify moves the stylesheet to a
 * cache folder and rewrites the paths in it, and a path it never saw — one
 * arriving from PHP on the element — is left pointing where the file is not.
 */

.l44cs--planning { margin: 30px 0; }

.l44cs-plan__title {
	/* Set exactly as the bio's and the curatorial text's headings are — same
	   size, same leading, same lift, no tracking of its own. They are headings
	   of the same rank on the same page, and a page where two of them are set
	   differently reads as two pages.
	   
	   The lift: a line of text sits in a box taller than the letters, with a
	   little space above the capitals. Taking that space back off levels the
	   top of the letters with whatever the eye compares them against. */
	margin: -0.12em 0 22px !important;
	padding: 0 !important;
	font-size: var(--l44cs-plan-title, 35px) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.l44cs-plan__text p {
	/* The same leading and the same gap between paragraphs as the bio and the
	   curatorial text.
	   
	   The design draws this one tighter, at about 1.22 — but a case study is
	   read as one page, and two kinds of body text on it set to two different
	   leadings reads as a mistake in whichever one comes second. So it follows
	   its siblings rather than its own artboard. */
	margin: 0 0 1em !important;
	padding: 0 !important;
	font-size: var(--l44cs-plan-text, 20px) !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;

	/* Justified, as the design has it, with hyphenation — justified text
	   without it opens rivers of white space between the short words. */
	text-align: justify;
	hyphens: auto;
}

.l44cs-plan__text p:last-child { margin-bottom: 0 !important; }

/* ---- the wall ---- */

.l44cs-plan__wall {
	display: flex;

	/* One against each edge of the measure, with whatever is left between
	   them. Both boxes are the same height, so starting them level is what
	   puts the two sheets on the same line. */
	align-items: flex-start;
	justify-content: space-between;

	margin-top: var(--l44cs-plan-air, 26px);
}

.l44cs-paper {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* The tape, over the picture rather than under it. Nothing here is clickable,
   so it takes no pointer either. */
.l44cs-paper::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	pointer-events: none;
}

/* The boxes, as fractions of the thousand-pixel measure, and each the shape
   the artwork was drawn at. */
.l44cs-paper--square {
	width: 31.543%;
	aspect-ratio: 315.43 / 315.51;
}

.l44cs-paper--wide {
	width: 52.326%;
	aspect-ratio: 523.26 / 315.51;
}

.l44cs-paper--square::after { background-image: url( "planning/tape-square.svg" ); }
.l44cs-paper--wide::after { background-image: url( "planning/tape-wide.svg" ); }

/* The paper itself: white, wherever in its box the design puts it, and cast
   down and to one side as a sheet stuck to a wall is. */
.l44cs-paper__sheet {
	position: absolute;
	overflow: hidden;
	background: #ffffff;
	box-shadow: var(--l44cs-plan-cast, -3px 5px 10px rgba( 0, 0, 0, 0.3 ));
}

.l44cs-paper--square .l44cs-paper__sheet {
	left: 9.758%;
	top: 11.699%;
	width: 79.256%;
	height: 79.236%;
}

.l44cs-paper--wide .l44cs-paper__sheet {
	left: 2.729%;
	top: 11.699%;
	width: 95.554%;
	height: 79.236%;

	/* Taped along the top with nothing at its corners, so it hangs straight
	   and throws no shadow to either side of itself. */
	--l44cs-plan-cast: 0 5px 10px rgba( 0, 0, 0, 0.32 );
}

/* Filled rather than fitted: the hole is a fixed shape and a picture fitted
   into it would leave white down one side.
   
   Every size said outright, since the theme gives images a width and a height
   of its own throughout — and an image left at its own height has nothing for
   object-fit to crop against. */
.l44cs-paper__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 700px) {
	.l44cs--planning { margin: 20px 0; }

	/* As the bio's name does on a phone: closer to what follows it. The size
	   only comes down on a screen narrower than the heading itself, which a
	   phone at its usual width is not. */
	.l44cs-plan__title {
		margin-bottom: 14px !important;
		font-size: min( var(--l44cs-plan-title, 35px), 9vw ) !important;
	}

	/* Ragged on a phone, at the same size it is set to — justified text in a
	   column this narrow is mostly gaps. The bio does the same, and nothing
	   else about the writing changes between them. */
	.l44cs-plan__text p { text-align: left; }

	/* Stacked. Side by side on a phone leaves the square one about a hundred
	   pixels across, which is smaller than the thumbnail it was made from.
	   
	   Both sheets stand to the same height on two rows as they do on one, and
	   the square one is centred under the wide one.
	   
	   The figure: the two artboards are the same height, so two sheets are the
	   same height when their boxes are. The wide box at the full measure
	   stands 315.51 / 523.26 of it, or 60.297%; a square box that tall is
	   60.297% × 315.43 / 315.51 = 60.282% wide. Which is also why the square
	   one is not simply given the same width — it would then stand a third
	   taller than the other.
	   
	   Nothing between the two rows: the room each box keeps below and above
	   its own sheet already comes to about a fifth of a sheet's height. */
	.l44cs-plan__wall {
		/* The wide one on top and the square under it. Turned round rather
		   than reordered, so the markup stays one thing: side by side there is
		   no reading order to speak of, and the order only arises here. */
		display: flex;
		flex-direction: column-reverse;

		/* Closer to the writing than on a desktop, by a third. This is the
		   distance to the top of the tape, which is the top of the sheet as a
		   thing on the wall; the paper itself sits lower by its overhang.
		   
		   A plain multiplication of a figure that is never below nought, so
		   there is no sign for calc to trip over. */
		margin-top: calc( var(--l44cs-plan-air, 26px) * 0.7 );
	}

	.l44cs-paper--square {
		width: 60.282%;
		margin-left: auto;
		margin-right: auto;

		/* The sheet sits a little left of its box's middle — the box is drawn
		   round the tape as well, and the tape is not even either side. So the
		   box is centred and then moved back by the difference, which puts the
		   sheet on the middle of the screen rather than the paper and tape
		   together. 0.614% of the box is that difference. */
		transform: translateX( 0.614% );
	}

	.l44cs-paper--wide { width: 100%; }
}

/* ---- text & media ----
 *
 * Six arrangements of a heading, some writing and up to three pictures. They
 * all divide the same thousand-pixel measure the same way, so several of them
 * down one page line up with each other and with every other section:
 *
 *   63.2% + 3% + 33.8%      the writing beside a tall picture
 *   47.627% + 4.747% + …    two squares inside that 632, which is 301 + 30 + 301
 *   48% + 4% + 48%          two columns of writing
 *
 * Shares rather than pixels, so the whole arrangement comes down together on a
 * narrow screen with its proportions kept.
 */

.l44cs--media { margin: 30px 0; }

/* Set as the bio's and the curatorial text's headings are. They are headings
   of the same rank on the same page. */
.l44cs-tm__title {
	margin: -0.12em 0 22px !important;
	padding: 0 !important;
	font-size: var(--l44cs-tm-title, 35px) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.l44cs-tm__text p {
	margin: 0 0 1em !important;
	padding: 0 !important;
	font-size: var(--l44cs-tm-text, 20px) !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-align: justify;
	hyphens: auto;
}

.l44cs-tm__text p:last-child { margin-bottom: 0 !important; }

/* ---- a hole with something in it ---- */

/* Everything is cropped to fill rather than fitted inside. The hole is a fixed
   shape — that is what an arrangement is — and something fitted into it would
   leave a band of page down one side, which reads as a mistake rather than as
   a margin. What is in the middle of the frame is what survives. */
.l44cs-tm__hole {
	position: relative;
	overflow: hidden;
	background: #efefef;
}

/* Every size said outright: the theme gives images and videos a width and a
   height of their own throughout, and one left at its own height has nothing
   for object-fit to crop against. */
.l44cs-tm__shot,
.l44cs-tm__reel {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
	object-position: center;
}

/* A film on Vimeo, which has no object-fit of its own: over-sized in whichever
   direction falls short, centred, and cut off by the hole's edge. How far
   over-size is worked out in PHP and written on the element, since it depends
   on the shape of the particular film.
   
   Nothing here can be touched. Vimeo's background mode already takes away the
   controls and the link out, and the hole then lays a pane of nothing over the
   top so a tap cannot reach the player at all. */
.l44cs-tm__film {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	border: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

.l44cs-tm__hole::after {
	content: "";
	position: absolute;
	inset: 0;
}

.l44cs-tm__hole--wide { aspect-ratio: 16 / 9; margin-top: var(--l44cs-tm-air, 30px); }
.l44cs-tm__hole--tall { aspect-ratio: 338 / 600; }
.l44cs-tm__hole--square { aspect-ratio: 1 / 1; }

/* ---- two columns of writing ---- */

.l44cs-tm__pair {
	display: grid;
	grid-template-columns: 48% 48%;
	column-gap: 4%;
}

.l44cs-tm__col { min-width: 0; }

/* ---- a gallery in the room left for one ---- */

/* The gallery keeps its own height. It is sized from the screen by its own
   script, and holding it to a figure from here would either crop the wheel or
   leave a band of empty page under it — how tall it stands belongs to the
   gallery's own settings. */
.l44cs-tm__band { margin: var(--l44cs-tm-air, 30px) 0; }

/* Inside the section it sits in the room the arrangement leaves, so it keeps
   nothing of the space it would take standing alone on a page. */
.l44cs-tm__band .l44g { margin: 0 !important; }

.l44cs-tm__band--narrow { margin-bottom: 0; }

/* ---- the writing beside a tall picture ---- */

/* Three cells rather than two columns side by side.
   
   The tall picture begins level with the top of the writing, not with the top
   of the heading — so the heading has a row of its own that the picture's
   column simply does not enter. Doing it by pushing the picture down by the
   height of a heading would need that height known, and it is not: a heading
   that wraps to two lines is twice as tall, and the picture would be out by a
   line with nothing to say why. */
.l44cs-tm__row {
	display: grid;
	grid-template-columns: 63.2% 33.8%;
	column-gap: 3%;
	grid-template-rows: auto 1fr;
	align-items: stretch;
}

.l44cs-tm__head { grid-column: 1; grid-row: 1; min-width: 0; }

.l44cs-tm__body {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;

	/* So that whatever goes under the writing can be pushed to the foot of
	   the row, which is the foot of the tall picture beside it. */
	display: flex;
	flex-direction: column;
}

.l44cs-tm__tall { grid-column: 2; grid-row: 2; min-width: 0; }

/* Level with the foot of the tall picture, whatever length the writing runs
   to — and never closer to it than the room the section is set to keep. */
.l44cs-tm__under {
	margin-top: auto;
	padding-top: var(--l44cs-tm-air, 30px);
	display: grid;
	grid-template-columns: 47.627% 47.627%;
	column-gap: 4.746%;
}

/* One thing under the writing rather than two: it takes the whole column. */
.l44cs-tm__under > .l44cs-tm__band { grid-column: 1 / -1; }

/* The gallery, moved from where the arrangement puts it.
 *
 * It sits level with the foot of the tall picture beside it, and the tall
 * picture is 600 deep — so with short writing the gallery lands a long way
 * below the last line, which is right for two square pictures and often too
 * far for a gallery. This takes it up towards the writing, or further down.
 *
 * Moved by shifting it from where it sits rather than by transform. A
 * transform makes its element the ground that anything fixed inside it is
 * measured from, and the gallery's lightbox is fixed: it would open trapped
 * inside this column instead of covering the window.
 *
 * The figure arrives with its sign already on it, so there is nothing to add
 * up here. */
.l44cs--media-strip .l44cs-tm__under {
	position: relative;
	top: var(--l44cs-tm-lift, 0px);
}

/* The other way round: the tall picture on the left, the writing on the
   right. Only the cells move — nothing about the pictures or the writing
   changes, so there is one arrangement here and not two. */
.l44cs--media.is-flipped .l44cs-tm__row { grid-template-columns: 33.8% 63.2%; }
.l44cs--media.is-flipped .l44cs-tm__head,
.l44cs--media.is-flipped .l44cs-tm__body { grid-column: 2; }
.l44cs--media.is-flipped .l44cs-tm__tall { grid-column: 1; }

@media (max-width: 700px) {
	.l44cs--media { margin: 20px 0; }

	.l44cs-tm__title {
		margin-bottom: 14px !important;
		font-size: min( var(--l44cs-tm-title, 35px), 9vw ) !important;
	}

	/* Ragged on a phone: justified text in a column this narrow is mostly
	   gaps. */
	.l44cs-tm__text p { text-align: left; }

	/* Everything in one column. Two columns of writing on a phone is two
	   columns of about twenty characters, which is a newspaper's worth of
	   hyphenation for no gain. */
	.l44cs-tm__pair { display: block; }
	.l44cs-tm__col + .l44cs-tm__col { margin-top: 26px; }

	/* Everything in one column — beside each other on a phone leaves the
	   writing about a hundred pixels across. Which also means there is
	   nothing left to flip, so the other way round is the same way round
	   here. */
	.l44cs-tm__row,
	.l44cs--media.is-flipped .l44cs-tm__row { display: block; }

	/* The order changes as well as the arrangement: heading, then the squares
	   or the gallery, then the writing, then the tall picture last.
	   
	   Read down a phone, the pictures are what says what the section is about
	   and the writing is what explains it — so the pictures come first and the
	   tall one closes it. Beside each other none of that arises: the eye takes
	   the column and the picture in together and there is no order to speak
	   of.
	   
	   Done by turning the column round rather than by moving anything, so the
	   markup is the same for both and there is one thing to read, not two. */
	.l44cs-tm__body { flex-direction: column-reverse; }

	/* The two squares stay side by side: they are small enough to hold their
	   own at half a phone's width, and stacking them would make the section
	   four screens long. */
	.l44cs-tm__under {
		/* Both undone. They belong to standing the block level with the foot
		   of the tall picture, and beside a tall picture is not where it is. */
		margin-top: 0;
		padding-top: 0;

		margin-bottom: var(--l44cs-tm-air, 30px);
	}

	/* The slider belongs to that levelling too, so it stops here rather than
	   dragging the gallery across the writing on a phone. */
	.l44cs--media-strip .l44cs-tm__under { top: 0; }

	/* The gallery sits straight under the heading on a phone, and the two
	   spaces that fall between them — the heading's own, and the gallery's —
	   come to more room than a heading and the thing it names want.
	   
	   Both are cut by a third rather than one of them being cut by more, so
	   the gap closes evenly and the room the section is set to keep still
	   tells in it. Both are multiplications of figures that are never below
	   nought. */
	.l44cs--media-strip .l44cs-tm__title { margin-bottom: calc( 14px * 0.7 ) !important; }

	.l44cs--media-strip .l44cs-tm__under .l44cs-tm__band { margin-top: calc( var(--l44cs-tm-air, 30px) * 0.7 ); }

	.l44cs-tm__tall { margin-top: var(--l44cs-tm-air, 30px); }
}

/* ---- a picture across the band, drifting or still ----
 *
 * The gallery in this slot works its own height out from the screen. A picture
 * cannot, so it is given a shape — how tall it stands at the full measure —
 * and keeps it at every width.
 *
 * The drifting is a layer taller than the hole it shows through, moved against
 * the page as it is scrolled past. A seventh again in height, half of it above
 * and half below, and that spare seventh is the whole of what there is to
 * move: past it the layer's own edge would come into the hole.
 */
.l44cs-tm__band--shot {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--l44cs-tm-band, 1000 / 300);
}

.l44cs-tm__band--shot .l44cs-tm__drift {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/* Only the drifting one is oversized. A still picture given the same spare
   height would simply be cropped by it for nothing.
   
   How far it hangs over is the same figure the script moves it by, handed down
   from the band — one number, so the travel can never outrun the spare height
   and bring the layer's own edge into view. */
.l44cs-tm__band--shot.is-drifting .l44cs-tm__drift {
	top: var(--l44cs-tm-room-up, -7%);
	bottom: var(--l44cs-tm-room-up, -7%);
}

/* The promise of movement, made only while the band is near the window.

   will-change asks the browser to hold the layer on its own texture, and it
   holds it for as long as the rule applies — so a page of a dozen drifting
   bands kept a dozen textures alive from load, every one of them off screen
   and none of them moving. That is what the trace counted as Layerize, and it
   was most of it.

   The class is put on by the script as the band comes within a screen of view
   and taken off as it leaves, so at most two or three ever hold a layer at
   once. Nothing else moves with it: the spare height above stays on
   is-drifting, or the picture would change size on the way in. */
.l44cs-tm__band--shot.is-drifting.is-near .l44cs-tm__drift {
	will-change: transform;
}

/* Held still on a machine set to keep motion down — said here as well as in
   the script, so the layer sits square in its hole rather than wherever the
   last frame before the setting was noticed had left it. */
@media (prefers-reduced-motion: reduce) {
	.l44cs-tm__band--shot.is-drifting .l44cs-tm__drift {
		top: 0;
		bottom: 0;
		transform: none !important;
	}
}

/* ---- Text & media: a picture beside the column gallery ----
 *
 * 338 + 27 + 635 is the thousand-pixel measure; 600 tall is the column
 * gallery's own height with its arrows. So the two stand level without either
 * being stretched to meet the other.
 */
.l44cs-tm__cg {
	display: flex;
	align-items: flex-start;
	gap: 27px;
	margin-top: 10px;
}

.l44cs-tm__cgmedia { flex: 0 0 338px; }
.l44cs-tm__cgmedia .l44cs-tm__hole--cg { width: 338px; height: 600px; }
.l44cs-tm__cggal { flex: 0 0 auto; min-width: 0; }

/* The gallery keeps its own margins out of this: the section spaces it. */
.l44cs-tm__cggal .l44g--column { margin: 0 !important; padding: 0 !important; }
.l44cs-tm__cggal .l44g-cg { justify-content: flex-start; }

/* Which way round, and which side of the gallery its thumbnails sit on — on a
 * desktop only.
 *
 * The thumbnails go to the gallery's outer edge, so they never stand between
 * the two blocks looking as if they belong to both. And these are fenced to the
 * desktop because on a phone the gallery stacks its picture, thumbnails and
 * arrows in a column of its own; told to lie in a row there it lays the three
 * side by side, and only the picture fits. */
@media (min-width: 761px) {
	.l44cs-tm__cg.is-flipped { flex-direction: row-reverse; }
	.l44cs-tm__cg:not(.is-flipped) .l44cs-tm__cggal .l44g-cg { flex-direction: row; }
	.l44cs-tm__cg.is-flipped .l44cs-tm__cggal .l44g-cg { flex-direction: row-reverse; }

	/* Thumbnails on the left: the small ones line up with the right-hand edge
	   of the large one, against the picture, and it grows away from them.
	   
	   The gallery does this itself when its own side is set to left. Here the
	   section is what turns it round, and the gallery never hears about it —
	   so the small thumbnails stayed against the left edge while the large one
	   grew out of line with them. Said here as well, for the case the gallery
	   cannot see. */
	.l44cs-tm__cg.is-flipped .l44cs-tm__cggal .l44g-cg__track { align-items: flex-end; }
	.l44cs-tm__cg.is-flipped .l44cs-tm__cggal .l44g-cg__thumb { transform-origin: right center; }
}

@media (max-width: 760px) {
	.l44cs-tm__cg,
	.l44cs-tm__cg.is-flipped { flex-direction: column; gap: 22px; }
	.l44cs-tm__cgmedia { flex: none; width: 100%; }
	.l44cs-tm__cgmedia .l44cs-tm__hole--cg { width: 100%; height: auto; aspect-ratio: 338 / 600; }
	.l44cs-tm__cggal { width: 100%; }
}

/* ---- a Reveal gallery in one of the two squares ----
 *
 * The gallery has its own width and height, set for when it stands alone.
 * In a square it takes the square instead — the square is the shape this
 * arrangement is drawn around, and a Reveal of another shape would break it.
 */
.l44cs-tm__hole--reveal { position: relative; overflow: hidden; }
.l44cs-tm__hole--reveal .l44g--reveal { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; }
.l44cs-tm__hole--reveal .l44g-rv { width: 100% !important; height: 100%; aspect-ratio: 1 / 1 !important; margin: 0; }

/* ---- Text & media: a square and two tall ones ----
 *
 * Widths of 16, 9 and 9 parts put a square and two 9-by-16 pictures at one
 * height in any order. With 10 between them on the 1000 measure: a square of
 * 461 and two of 259 by 461.
 */
.l44cs-tm__trio { display: grid; gap: 10px; margin-top: 10px; }
.l44cs-tm__trio--svv { grid-template-columns: 16fr 9fr 9fr; }
.l44cs-tm__trio--vsv { grid-template-columns: 9fr 16fr 9fr; }
.l44cs-tm__trio--vvs { grid-template-columns: 9fr 9fr 16fr; }

.l44cs-tm__cell { position: relative; overflow: hidden; min-width: 0; }
.l44cs-tm__cell--sq { aspect-ratio: 1 / 1; }
.l44cs-tm__cell--v  { aspect-ratio: 9 / 16; }
.l44cs-tm__cell .l44cs-tm__hole--trio { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; }
.l44cs-tm__cell .l44cs-tm__hole--trio img,
.l44cs-tm__cell .l44cs-tm__hole--trio video,
.l44cs-tm__cell .l44cs-tm__hole--trio iframe { width: 100%; height: 100%; object-fit: cover; }

/* A phone: the square on a row of its own, the two tall ones side by side
 * beneath it in the order they had. */
@media (max-width: 760px) {
	.l44cs-tm__trio,
	.l44cs-tm__trio--svv,
	.l44cs-tm__trio--vsv,
	.l44cs-tm__trio--vvs { grid-template-columns: 1fr 1fr; }
	.l44cs-tm__cell--sq { grid-column: 1 / -1; order: -1; }
}