/*
 * The Index and the contact sheet beside it.
 */

.index {
	padding-top: var(--seam-section);
	padding-bottom: var(--seam-section);
}

.index__title {
	margin: 0 0 .4em;
	font-size: clamp(1.8rem, 4cqi, 3rem);
}

.index__intro {
	max-width: 52ch;
	color: var(--ink-2);
}

.index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.index__views,
.index__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

/*
 * 44px of hit area. In the prototype these were 12x22 and 29x22 — the two
 * smallest targets in the build (10-ui-quality-report.md, targets).
 */
.index__view,
.index__filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 0;
	color: var(--ink-3);
	border-bottom: 1px solid transparent;
	transition: color var(--move), border-color var(--move);
}

.index__view[aria-pressed="true"],
.index__filter[aria-pressed="true"] {
	color: var(--ink);
	border-bottom-color: var(--acc);
	font-style: italic;
}

/*
 * The seam below the controls belongs to the controls, not to a live region
 * that says nothing.
 */
.index__filters {
	margin-bottom: var(--seam-block);
}

.index__status {
	margin: 0 0 var(--seam-block);
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
	min-height: 1.5em;
}

/*
 * At rest the region is empty, and a reserved 21.12px line plus its own 18px
 * margin put 39.1px of nothing above a 14.83px month label — 2.64x the heading
 * it introduces, at all four measured widths and the last gap in the build over
 * its allowance.
 *
 * The reserve was insuring against a jump it could never prevent: the click
 * that fills this line is the same click that pulls entries out of the flow and
 * hides whole months, so the list below it re-lays by hundreds of pixels in the
 * same frame. Twenty-one pixels of held-open space bought nothing and cost a
 * void no reader could account for.
 */
.index__status:empty {
	min-height: 0;
	margin: 0;
}

.month {
	margin-bottom: var(--seam-block);
}

.month__label {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: var(--label-lead);
	font-weight: 300;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.entry {
	display: grid;
	grid-template-columns: 4ch 1fr 120px;
	align-items: center;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}

/*
 * Filtering removes an entry from the flow. Muting it to opacity .16 and
 * leaving it focusable is a keyboard trap with a nice name.
 */
.entry[hidden],
.frame[hidden] {
	display: none;
}

.entry__day {
	font-family: var(--serif);
	font-size: 1.4rem;
	line-height: 1;
	text-align: center;
}

.entry__day small {
	display: block;
	font-family: var(--sans);
	font-size: var(--label-fine);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.entry__rubric {
	display: block;
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.entry__title {
	display: block;
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.16;
	transition: color var(--move);
}

.entry__frame {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--paper-3);
}

.entry__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery view: the same entries, as frames. */
.index.is-gallery .month__rows {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
	gap: 22px;
}

.index.is-gallery .entry {
	display: block;
	border-bottom: 0;
	padding: 0;
}

.index.is-gallery .entry__day {
	display: none;
}

.index.is-gallery .entry__frame {
	margin-bottom: 10px;
}

@media (max-width: 900px) {
	.entry {
		grid-template-columns: 4ch 1fr;
	}

	.entry__frame {
		display: none;
	}
}

/* ---------- The contact sheet on the plate ---------- */

/* .plate--index's ink polarity is set in plate.css, beside .plate--plain's. */

.plate--index .brand__wordmark text {
	fill: var(--ink);
}

.plate--index .plate__rule {
	border-top-color: var(--rule);
	color: var(--ink-3);
}

.sheet__title {
	margin: 18px 0 .2em;
	font-size: clamp(1.4rem, 3cqi, 2rem);
}

.sheet__count {
	margin: 0 0 16px;
	font-family: var(--sans);
	font-size: var(--label-fine);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/*
 * The grid is bounded on BOTH axes.
 *
 * The plate is exactly the viewport tall and does not scroll, so an unbounded
 * row count guillotines the last row at almost every window shape — measured at
 * 84px and four cut frames at 1920x1080, sliced directly above the perforation
 * so it reads as a printing error. Rows share the box; the frames give up their
 * fixed aspect ratio instead. 09-art-direction-review.md, G3.
 */
.sheet {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	/*
	 * FOUR ROWS, WHATEVER IS IN THEM.
	 *
	 * A version of this sized the rows to the frame count, so a section with
	 * four stories got one row — and `1fr` of a flex child that fills the plate
	 * made that one row 900px tall: four columns of stretched photograph with
	 * the pick's circle drawn as a 600px ellipse. Measured in the owner-review
	 * screenshot, which is where it belongs.
	 *
	 * A contact sheet with four frames on it is a contact sheet with four
	 * frames on it. The paper under them is paper — that is what an unexposed
	 * sheet looks like — and the frames keep the proportion the design gives
	 * them. `--sheet-rows` is still written by the template and still read
	 * below, for the narrow layout where the columns change.
	 */
	grid-template-rows: repeat(4, minmax(0, 1fr));
	align-content: start;
	gap: 8px;
	padding: 14px 10px;
	background: var(--paper-3);
	background-image:
		repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in oklab, var(--ink) 45%, transparent) 4px 10px),
		repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in oklab, var(--ink) 45%, transparent) 4px 10px);
	background-size: 100% 6px, 100% 6px;
	background-position: top left, bottom left;
	background-repeat: repeat-x, repeat-x;
	overflow: hidden;
}

.frame {
	position: relative;
	aspect-ratio: auto;
	min-height: 0;
	overflow: hidden;
	background: color-mix(in oklab, var(--ink) 12%, transparent);
}

.frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The frame number sits on its own chip, not on the raw photograph.
 *
 * Accent type straight onto a frame measured 1.10-4.17:1 across all sixteen
 * frames in both editions — the single largest block of contrast failures in
 * the build, and effectively invisible. The chip is the ground the number
 * needs, and it keeps the champagne the specification asks for.
 * 10-ui-quality-report.md, m1.
 */
.frame__no {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	padding: 2px 5px;
	background: color-mix(in oklab, var(--sheet) 88%, transparent);
	color: var(--acc);
	font-family: var(--sans);
	font-size: var(--label-fine);
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.2;
}

.frame--pick::after {
	content: "";
	position: absolute;
	inset: 6%;
	border: 1.5px solid var(--acc);
	border-radius: 50%;
	transform: rotate(-6deg);
	pointer-events: none;
}

@media (max-width: 1120px) {
	.sheet {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, minmax(0, 1fr));
	}
}

/* ==================================================================
 * A SECTION'S LANDING PAGE
 *
 * A section is a designed opening, a lead, the stories beside it and then the
 * run — not a heading over a chronological list (§A4). The lead is drawn in
 * the same language as the cover, and deliberately: it is the same engine, on
 * the same crop, measured the same way, so the colours `Tone\pick()` chose for
 * `756x982` and `390x783` describe the box this actually draws.
 * =============================================================== */

.section-page {
	padding-top: var(--seam-section);
	padding-bottom: var(--seam-section);
}

.section-page__open {
	margin-bottom: var(--seam-block);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule-2);
}

.section-page__name {
	margin: 0 0 .24em;
	font-size: clamp(2.4rem, 7cqi, 4.6rem);
	line-height: .96;
	letter-spacing: -.012em;
}

.section-page__standfirst {
	max-width: 46ch;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.28rem;
	line-height: 1.42;
	color: var(--ink-2);
}

.section-page__count {
	margin: 14px 0 0;
	font-family: var(--sans);
	font-size: var(--label-fine);
	font-weight: 300;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/*
 * THE LEAD, REMOVED — §29's release cleanup.
 *
 * `.section-lead` and its eleven descendants were 118 lines of stylesheet and
 * 57 more under "The lead's measured colours", for a component no template has
 * printed since the section landing was rebuilt in 1.3.0. `parts/section-body`
 * draws `.section-page` and `.plate--section` instead, and nothing anywhere in
 * the theme, the plugin or the block styles emits the string `section-lead`.
 *
 * The `--fg-*` slots it read are still read — by `.plate--cover` in plate.css,
 * character for character in the same two media queries — so `tone-check.php`'s
 * rule that every measured slot is consumed still holds.
 *
 * §29 asks for exactly this and warns against "aggressive cleanup that breaks
 * migration compatibility". Nothing migrates through a class name that is never
 * written: this is a stylesheet nobody's markup can reach.
 */

/* ---------- The stories beside the lead ---------- */

.section-beside {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: clamp(18px, 3cqi, 34px);
	margin-bottom: var(--seam-block);
}

/*
 * The four compositions the owner can choose, on the Sections screen.
 *
 * Each is a different answer to how many stories share the top of the page, so
 * each is a different grid — not the same grid with a different gap.
 */
.section-page--duo .section-beside {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.section-page--stack .section-beside {
	grid-template-columns: 1fr;
}

.section-page--stack .section-beside .card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	align-items: center;
	gap: clamp(16px, 3cqi, 32px);
}

.section-page--gallery .section-beside {
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
	gap: 14px;
}

/*
 * Photographs first: a card with no frame would leave a hole in a grid whose
 * whole subject is the pictures, so it keeps the headline and closes up.
 */
.section-page--gallery .section-beside .card__title {
	font-size: 1rem;
	line-height: 1.14;
}

/* ---------- The run ---------- */

.section-page__more {
	margin: 0 0 14px;
	font-family: var(--sans);
	font-size: var(--label-lead);
	font-weight: 300;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.section-run .entry {
	grid-template-columns: 4ch 1fr 120px;
}

.entry__dek {
	display: block;
	margin-top: .3em;
	max-width: 62ch;
	font-family: var(--serif);
	font-size: .98rem;
	line-height: 1.4;
	color: var(--ink-3);
}

.section-page__empty {
	margin: 0;
	padding: 22px 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--ink-3);
}

/*
 * A way out of a section with nothing in it.
 *
 * The same list the empty search page offers, set the same way, because it is
 * the same offer: a reader on a page with nothing on it, and the sections that
 * do have something. It shares `.search-empty__list`'s rules rather than
 * repeating them so the two cannot drift apart.
 */
.section-page__elsewhere {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}

.section-page__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.section-page__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	padding: 10px 0;
	font-family: var(--serif);
	font-size: 1.15rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--move);
}

.section-page__list small {
	font-family: var(--sans);
	font-size: var(--label-fine);
	color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
	.section-page__list a:hover {
		border-bottom-color: var(--acc);
	}
}

/* ---------- A search with nothing in it (1.3.1) ---------- */

/*
 * The page a reader lands on when they press Enter on an empty field, or follow
 * the header's `/?s=` link with no JavaScript. It used to be the whole archive
 * under the heading `Results for “”`.
 */
.index--empty {
	max-width: 46em;
}

.search-empty {
	margin: var(--seam-section) 0 0;
}

.search-empty__label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--sans);
	font-size: var(--label);
	font-weight: 300;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.search-empty__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.search-empty__field {
	flex: 1 1 16em;
	min-width: 0;
	padding: 14px 16px;
	font-family: var(--serif);
	font-size: 1.2rem;
	color: var(--ink);
	background: var(--paper-2);
	border: 1px solid var(--rule-2);
	border-radius: 0;
}

.search-empty__field::placeholder {
	color: var(--ink-3);
}

.search-empty__sections {
	margin: var(--seam-section) 0 0;
	padding-top: var(--seam-quiet);
	border-top: 1px solid var(--rule);
}

.search-empty__or {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: var(--label-fine);
	font-weight: 300;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.search-empty__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-empty__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 44px;
	padding: 10px 0;
	font-family: var(--serif);
	font-size: 1.15rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--move);
}

.search-empty__list small {
	font-family: var(--sans);
	font-size: var(--label-fine);
	color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
	.search-empty__list a:hover {
		border-bottom-color: var(--acc);
	}
}