/*
 * The homepage.
 *
 * Four shapes in sequence, no two alike, on an alternating tonal ground:
 *
 *   1. .dcv-open     a photographic band          olive     (dark)
 *   2. .dcv-intents   two columns of ruled rows    canvas
 *   3. .dcv-regions   ruled rows carrying reads    canvas-sunk
 *   4. .dcv-carnets   a numbered index             canvas
 *
 * The olive band is spent exactly twice on this page — the opening and the
 * footer — so the page opens dark and closes dark with light in between, instead
 * of dissolving into the footer.
 */

/* --- 1. the opening -------------------------------------------------------- */

/*
 * Phone: photograph, then type on flat olive. Desktop: the photograph becomes
 * the band's ground and the type sits on the opaque third of the veil.
 *
 * Either way the headline is on flat colour. Nothing about its legibility
 * depends on which photograph loaded, or on whether one loaded at all — with no
 * image the band is uniform olive and reads as intended rather than as a hole.
 */
.dcv-open {
	position: relative;
	background: var(--dcv-olive-deep);
	color: var(--dcv-on-olive);
	isolation: isolate;

	/*
	 * The width of the type column, declared once and read twice: by the type
	 * itself, and by the veil, which turns it into the length of its opaque run.
	 * They cannot drift apart, which is the whole point — the headline is on flat
	 * olive at 1024px and at 2560px alike.
	 *
	 * On a phone there is no veil to stay inside of, and no column to spare: the
	 * type has the full measure. The share is set with the layout, below.
	 */
	--dcv-open-type: 100%;
}

.dcv-open__ground {
	position: relative;
	display: block;
	height: clamp(12rem, 44vw, 19rem);
	overflow: hidden;
}

.dcv-open__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * The photographs are 574 unrelated frames from a decade of publishing. Pulled
	 * back toward the olive and slightly deepened, they read as one family instead
	 * of as whatever each one happened to be.
	 */
	filter: saturate(0.72) contrast(1.04) brightness(0.94);
}

.dcv-open__ground::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--dcv-olive);
	mix-blend-mode: soft-light;
	opacity: 0.62;
	pointer-events: none;
}

.dcv-open__ground::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--dcv-veil-open-foot);
	pointer-events: none;
}

/*
 * The opening is the one full-bleed surface on the page: the photograph crosses
 * to the viewport edge, and so does the gutter the type hangs on. Capping this
 * at the canvas width would centre the type inside the band and slide it off the
 * veil's opaque run on a wide screen — the veil is measured from the band's left
 * edge, so the type has to be too.
 */
.dcv-open__inner {
	position: relative;
	z-index: 3;
	max-width: none;
	/* .dcv-wrap centres itself, and an auto inline margin on a grid item cancels
	   stretch — which would slide the type off the veil's opaque run. */
	margin-inline: 0;
}

.dcv-open__type {
	max-width: var(--dcv-open-type);
	padding-block: var(--dcv-space-md) var(--dcv-space-lg);
}

.dcv-open__eyebrow {
	margin: 0;
	color: var(--dcv-cat-glow);
}

.dcv-open__title {
	margin: var(--dcv-space-xs) 0 0;
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-size: var(--dcv-display-2);
	line-height: var(--dcv-leading-display);
	letter-spacing: -0.022em;
	max-width: 24ch;
	color: var(--dcv-on-olive);
	text-wrap: balance;
}

.dcv-open__title a {
	color: inherit;
	text-decoration: none;
}

.dcv-open__title a:hover,
.dcv-open__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--dcv-cat-glow);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
}

.dcv-open__dek {
	margin: var(--dcv-space-sm) 0 0;
	max-width: 52ch;
	font-size: var(--dcv-text-prose);
	line-height: 1.55;
	color: var(--dcv-on-olive-muted);
}

.dcv-open__action { margin-top: var(--dcv-space-md); }

@media (min-width: 60rem) {
	.dcv-open {
		display: grid;
		/* An explicit column: an implicit auto one sizes to the type block and the
		   band's rows stop spanning its full width. */
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(clamp(24rem, 54vh, 33rem), auto) auto;

		/* The type takes the left three fifths; the photograph gets the rest, and
		   the veil's opaque run is exactly this. */
		--dcv-open-type: min(46rem, 60%);
	}

	/* The photograph stops being a plate and becomes the band itself. */
	.dcv-open__ground {
		position: absolute;
		inset: 0;
		height: auto;
		z-index: 0;
	}

	.dcv-open__ground::after { background: var(--dcv-veil-open); }

	.dcv-open__inner {
		grid-row: 1;
		align-self: end;
	}

	.dcv-open__type { padding-block: var(--dcv-space-lg) var(--dcv-space-xl); }

	.dcv-slate { grid-row: 2; }
}

/* The ruled row of numbered secondary stories, at the band's foot on its own
   opaque ground so the veil has something to land on. */
.dcv-slate {
	position: relative;
	z-index: 3;
	list-style: none;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	/* Full-bleed like the rest of the band, so its first column's text hangs on
	   the same gutter as the headline above it. */
	width: 100%;
	margin-inline: 0;
	background: var(--dcv-olive-deep);
	color: var(--dcv-on-olive);
	border-top: 1px solid var(--dcv-on-olive-line);
}

@media (min-width: 48rem) {
	.dcv-slate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dcv-slate__item {
	padding: var(--dcv-space-sm) var(--dcv-gutter);
	border-top: 1px solid var(--dcv-on-olive-line);
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-slate__item:hover { background-color: var(--dcv-olive-raised); }

@media (min-width: 48rem) {
	.dcv-slate__item {
		border-top: 0;
		border-left: 1px solid var(--dcv-on-olive-line);
	}

	.dcv-slate__item:first-child { border-left: 0; }
}

.dcv-slate .dcv-preview__title,
.dcv-slate .dcv-preview__numeral { color: var(--dcv-on-olive); }
.dcv-slate .dcv-preview__label { color: var(--dcv-cat-glow); }
.dcv-slate .dcv-preview__excerpt { display: none; }

/* --- 2. the WHAT axis: two columns of ruled rows --------------------------- */

/*
 * Eight entries at a size a reader reads, not eight micro-caps columns. Two
 * columns divide eight exactly, so there are no orphans at any width and the
 * rules run continuously down both.
 */
.dcv-intents__list {
	list-style: none;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
}

@media (min-width: 52rem) {
	.dcv-intents__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dcv-intents__item { border-bottom: 1px solid var(--dcv-line); }

@media (min-width: 52rem) {
	.dcv-intents__item:nth-child(even) { border-left: 1px solid var(--dcv-line); }
}

.dcv-intents__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--dcv-space-sm);
	min-height: 44px;
	padding-block: var(--dcv-space-sm);
	text-decoration: none;
	color: inherit;
}

@media (min-width: 52rem) {
	.dcv-intents__item:nth-child(odd) .dcv-intents__link { padding-right: var(--dcv-space-lg); }
	.dcv-intents__item:nth-child(even) .dcv-intents__link { padding-left: var(--dcv-space-lg); }
}

/*
 * The eight Marks in their eight pigments, at rest. This list is the index of
 * the publication's rooms, so it is the one surface where the whole palette is
 * shown at once — and it is shown on the drawn Marks, never as a coloured tile
 * behind them.
 */
.dcv-intents__mark {
	color: var(--dcv-cat-ink);
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            transform var(--dcv-duration) var(--dcv-ease);
}

.dcv-intents__link:hover .dcv-intents__mark,
.dcv-intents__link:focus-visible .dcv-intents__mark { transform: translateX(2px); }

.dcv-intents__intent {
	display: block;
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-size: var(--dcv-display-4);
	line-height: var(--dcv-leading-title);
	color: var(--dcv-ink);
}

.dcv-intents__link:hover .dcv-intents__intent,
.dcv-intents__link:focus-visible .dcv-intents__intent { color: var(--dcv-cat-ink); }

.dcv-intents__detail {
	display: block;
	margin-top: 0.15em;
	font-size: var(--dcv-text-sm);
	line-height: 1.4;
	color: var(--dcv-muted);
}

.dcv-intents__count {
	font-family: var(--dcv-font-display);
	font-size: var(--dcv-text-base);
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

/* --- 3. the WHERE axis: rows that carry their Articles --------------------- */

.dcv-regions { background: var(--dcv-canvas-sunk); }

.dcv-regions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dcv-line);
}

.dcv-regions__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--dcv-space-xs) var(--dcv-space-sm);
	align-items: start;
	padding-block: var(--dcv-space-md);
	border-bottom: 1px solid var(--dcv-line);
}

@media (min-width: 52rem) {
	.dcv-regions__item {
		grid-template-columns: clamp(5rem, 8vw, 6.5rem) minmax(10rem, 17rem) minmax(0, 1fr);
		gap: var(--dcv-space-md);
		align-items: center;
	}
}

/*
 * The plate holds its square whether or not the image arrives — an olive ground
 * behind a lazy image, so a row can never open a hole and nothing shifts when
 * six of them decode.
 */
.dcv-regions__plate {
	position: relative;
	display: block;
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--dcv-radius);
	background: var(--dcv-olive);
	isolation: isolate;
}

.dcv-regions__plate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--dcv-olive);
	mix-blend-mode: soft-light;
	opacity: 0.4;
	pointer-events: none;
}

.dcv-regions__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.75) contrast(1.03);
	transition: transform var(--dcv-duration-slow) var(--dcv-ease);
}

.dcv-regions__item:hover .dcv-regions__image { transform: scale(1.05); }

.dcv-regions__name {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-size: var(--dcv-display-4);
	line-height: var(--dcv-leading-title);
	color: var(--dcv-ink);
	text-wrap: pretty;
}

.dcv-regions__link {
	color: inherit;
	text-decoration: none;
}

.dcv-regions__link:hover,
.dcv-regions__link:focus-visible { color: var(--dcv-cat-ink); }

.dcv-regions__count {
	display: block;
	margin-top: 0.25em;
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	color: var(--dcv-muted);
	font-variant-numeric: tabular-nums;
}

.dcv-regions__reads {
	list-style: none;
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dcv-space-3xs);
}

@media (min-width: 52rem) {
	.dcv-regions__reads {
		grid-column: 3;
		grid-row: 1;
	}
}

.dcv-regions__read {
	font-size: var(--dcv-text-sm);
	line-height: 1.5;
	/* Six rows stay one height each: a long title is cut, never wrapped. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcv-regions__read a {
	color: var(--dcv-muted);
	text-decoration: none;
}

.dcv-regions__read a:hover,
.dcv-regions__read a:focus-visible { color: var(--dcv-cat-ink); }

/* --- 4. recency: a bounded ledger ----------------------------------------- */

.dcv-carnets__list { margin-top: var(--dcv-space-sm); }

.dcv-carnets__more { margin-top: var(--dcv-space-md); }