/*
 * The two hand-authored bands on the branding case study template.
 *
 * Everything else in this folder is generated from Kyle's export. These two are
 * not, because he drew neither a variable gallery nor a palette specimen, so
 * they are written in his LANGUAGE instead: his gap, his ground, his cell ratio,
 * his eyebrow, his type scale. Nothing new enters the system. Same call already
 * made for the previous and next buttons at the foot of every case study.
 *
 * See inc/gallery-band.php for what writes the markup, and shapes/bfabf672653b
 * and shapes/0ca3c67fa14f for the bands themselves.
 */

/* ---------------------------------------------------------------- gallery */

/*
 * The line that names the client, which is the only prose in the band.
 *
 * Capped, because 17px running the full 1,296px of the band is about 150
 * characters a line and nobody reads that. His own body copy sits in a column.
 */
.d4-gallery__lead {
	max-width: 62ch;
}

/*
 * Kyle drew a fixed four-cell mosaic for brand work (Brand v2.dc.html line 61,
 * 1.35fr / 1fr / 1fr, 296px rows, 16px gap). This band has to hold anywhere
 * between one and twenty-four, so it takes his proportions and his gap and lets
 * the browser do the composition.
 *
 * auto-fill, NOT auto-fit, and it is not a preference. With auto-fit the empty
 * tracks collapse, so four images at 1440 come out as three across and one
 * stretched to the full 1,296 on its own row. It only shows up at counts one
 * past a multiple of the column count, so 4, 7, 10 and 13 are the ones to look
 * at and 3, 6 and 9 will all look perfect while it is broken.
 *
 * 340px minimum, and it is arithmetic rather than taste. Measured, not reasoned:
 * the first version said 300 and "that gives exactly three at 1440", which is
 * wrong. 1296 of content fits FOUR 300px tracks (4 x 300 + 3 x 16 = 1248), so
 * every gallery came out as four columns of 312 and gallery.py caught it as an
 * orphan row. The window that gives three at 1440 AND two in the tablet band is
 * narrow: above 312 so a fourth track cannot fit in 1296, and at or below 370 so
 * two still fit in the 757 available at 901. 340 sits in the middle of it and
 * resolves to 421.33px, which is Kyle's own cell to a third of a pixel.
 *
 * The max-width is belt and braces. shapes-wide.css is GENERATED and keyed on
 * shape id, so a hand-authored band gets no rule and runs uncapped above 1440,
 * which at 3840 is twelve columns. There is a rule for it in shape-fixes.css as
 * well, and this means the grid cannot be wrong even if that rule is ever lost.
 */
.d4-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 16px;
	/* Captions run to different lengths and must not stretch their neighbours. */
	align-items: start;
	max-width: 1296px;
	margin-inline: auto;
}

.d4-gallery__cell {
	margin: 0;
}

/*
 * 421 by 300 is his own cell, and it is already what shapes-tablet.css gives
 * d4xbd64c730. aspect-ratio rather than a fixed height, so the band survives the
 * 901 to 1199 tablet range without a rule of its own.
 */
.d4-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 421 / 300;
	object-fit: cover;
	/*
	 * The theme does not set this globally and an artefact cell has padding, so
	 * without it the image is 100% of its cell PLUS 48px and hangs out of the
	 * side of the page. On a phone that is a body that scrolls sideways, which
	 * is what gallery.py found on the first run.
	 */
	box-sizing: border-box;
	/* This one declaration is the whole lightbox. assets/js/main.js collects
	   every image whose computed cursor is zoom-in. */
	cursor: zoom-in;
}

/*
 * AN ARTEFACT SITS INSIDE ITS FRAME. A PHOTOGRAPH FILLS ONE.
 *
 * This is the rule that makes a branding page read as a branding page before a
 * word of it is read. A photograph of a room cropped to a box is still a
 * photograph of that room; a logo cropped to a box is a logo with its edges cut
 * off. The ground is Kyle's own #f4f4f2, from the div he wraps every cell of his
 * brand mosaic in, which only makes sense for a picture that does not fill it.
 *
 * It also keeps two mockups on different grounds from ever touching, which
 * their library needs: Asparta is rendered on tan and Kirkgate on mid grey.
 */
.d4-gallery__cell--artefact .d4-gallery__img {
	object-fit: contain;
	background: #f4f4f2;
	padding: 24px;
}

/*
 * Emphasis, gated above the stacked band, and the gate is load bearing.
 *
 * `span 2` inside a one-column grid makes Grid invent an implicit second column
 * and the page comes out twice as wide as the phone. Silently, with no overflow
 * warning anywhere. 1 / -1 is safe at any count; span 2 is not.
 */
@media (min-width: 901px) {
	.d4-gallery__cell--medium { grid-column: span 2; }
	.d4-gallery__cell--full   { grid-column: 1 / -1; }

	/*
	 * A MEDIUM CELL IS WIDER, NOT TALLER, AND THAT IS THE WHOLE RULE.
	 *
	 * It was 858 by 480 first, on the reasoning that a wider box wants a taller
	 * crop or it is a letterbox. That reasoning is right about the picture and
	 * wrong about the row. A medium only ever shares its row with SMALL cells,
	 * because two mediums are four tracks and the grid is three, so a taller
	 * medium leaves every neighbour hanging 180px short with white underneath
	 * its caption. Measured on the Isle Design Architecture page, the first
	 * real page to mix the two: eight ragged rows across three engines.
	 *
	 * Kyle's own mosaic gets away with a tall cell because it SPANS two rows,
	 * so nothing is left hanging. Auto placement cannot promise that at a count
	 * nobody has chosen in advance, so the mosaic here varies in width only.
	 * Rows then line up at every count and every mix, with no arithmetic asked
	 * of whoever is filling it in.
	 *
	 * 858 is two tracks plus the gap, so a medium is exactly two smalls wide and
	 * exactly one small tall. FULL is untouched at his own 1296 by 560: it takes
	 * a row to itself either way, so it can be as tall as it likes.
	 */
	.d4-gallery__cell--medium .d4-gallery__img { aspect-ratio: 858 / 300; }
	.d4-gallery__cell--full   .d4-gallery__img { aspect-ratio: 1296 / 560; }
}

/*
 * Under the picture, never over it.
 *
 * Text over a photograph is a contrast measurement, and this site has had 147
 * of those fail once already. On the band's own ground there is no question to
 * ask.
 *
 * Two lines are reserved, so the bottoms of a row line up whatever the caption
 * length. Same instrument Alex signed off for the Work tiles on 17 Aug.
 *
 * The "reserve it only when some cell has one" half is decided in PHP rather
 * than here, because the CSS version of that rule is :has, which Safari before
 * 15.4 ignores and Kyle tests on Safari. inc/gallery-band.php writes the element
 * on every cell or on none, so this stays a plain rule with nothing to support.
 */
.d4-gallery__caption {
	margin: 10px 0 0;
	min-height: 3em;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 300;
	color: #1D1D1D;
}

.d4-on-dark .d4-gallery__caption {
	color: #C7C8C1;
}

/* Decoration is not a lightbox target and must not become a keyboard stop with
   no useful name. See the decor toggle in inc/gallery-band.php. */
.d4-gallery__cell--decor .d4-gallery__img {
	cursor: default;
}

/* The note in a row where nobody has picked a photograph yet. Editors only:
   a visitor never gets the cell at all. */
.d4-gallery__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 421 / 300;
	background: #f4f4f2;
	border: 1px dashed #bfbfb9;
	padding: 16px;
	text-align: center;
	font-size: 13px;
	color: #B84836;
}

/* -------------------------------------------------------------- specimen */

.d4-specimen__colours {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
	gap: 24px;
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	max-width: 1296px;
	margin-inline: auto;
}

/*
 * The swatch itself. The colour arrives as a custom property rather than as a
 * background declaration, so a value that fails validation in render.php leaves
 * an invalid property that CSS ignores and the fallback shows, instead of a
 * half-written declaration. Only six hex digits ever get through.
 */
.d4-specimen__swatch {
	display: block;
}

.d4-specimen__swatch::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--d4-swatch, #f4f4f2);
	/*
	 * His own hairline, not a 10% tint of it.
	 *
	 * The White swatch is #FFFFFF on a white band, so the border IS the swatch,
	 * and at 10% opacity it was so faint that the palette looked like three
	 * colours rather than four. Spotted on the Isle Design page, whose palette
	 * is white, black, cream and green. #C7C8C1 is the rule Kyle uses to
	 * separate anything from anything else on this site.
	 */
	border: 1px solid #C7C8C1;
	margin-bottom: 12px;
}

.d4-specimen__name {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	color: #1D1D1D;
}

/* His eyebrow treatment, in his terracotta, at his tracking. */
.d4-specimen__hex {
	display: block;
	margin-top: 4px;
	font-weight: 700;
	letter-spacing: 0.16em;
	font-size: 12px;
	text-transform: uppercase;
	color: #B84836;
}

.d4-specimen__type {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 32px;
	max-width: 1296px;
	margin-inline: auto;
}

.d4-specimen__face {
	border-top: 1px solid #C7C8C1;
	padding-top: 20px;
}

.d4-specimen__facename {
	margin: 0 0 6px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: -0.02em;
	color: #1D1D1D;
}

.d4-specimen__facenote {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #1D1D1D;
}

@media (max-width: 900px) {
	.d4-specimen__colours { gap: 16px; margin-bottom: 36px; }
	.d4-specimen__facename { font-size: 22px; }
}