/*
 * Découverte V2 — the shell: the Rail, the mobile top bar, the footer.
 *
 * The Rail is brand, not furniture. Ticket 09 fills it with the information
 * architecture; what is styled here is the column itself, its identity block and
 * the ground the rest hangs from.
 */

/* --- the Rail -------------------------------------------------------------- */

/*
 * THE RAIL NEVER SCROLLS. Everything in it fits the shortest realistic viewport,
 * and it fits two ways at once: nothing is in the column that a reader would not
 * act on, and every vertical measure in it is a clamp against `vh`, so the column
 * tightens on a short window instead of overflowing it. The `overflow-y: auto` on
 * .dcv-rail in base.css is a last resort for a 400px-tall window, not a layout.
 */

/*
 * THE IDENTITY CARRIES THE SECTION (ADR-0029). The compass is the brand device
 * and it is drawn in the pigment of the Hub being read, so the reader's own
 * position is stated by the one element that is on screen at every moment. The
 * wordmark, the geometry and the ground do not move: one thing changes, and it
 * changes for a reason.
 *
 * The hairline under it is the same pigment at rule weight — the section's
 * colour reaching the full width of the column before the architecture starts.
 */
.dcv-rail__identity {
	padding: clamp(0.9rem, 2.4vh, 1.75rem) var(--dcv-space-sm);
	border-bottom: 1px solid var(--dcv-on-olive-line);
	box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--dcv-cat-glow) 55%, transparent);
}

.dcv-rail__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dcv-space-2xs);
	text-decoration: none;
	color: var(--dcv-on-olive);
}

.dcv-rail__compass {
	color: var(--dcv-cat-glow);
	transition: transform var(--dcv-duration-slow) var(--dcv-ease),
	            color var(--dcv-duration) var(--dcv-ease);
}

.dcv-rail__brand:hover .dcv-rail__compass,
.dcv-rail__brand:focus-visible .dcv-rail__compass { transform: rotate(24deg); }

/*
 * The same rule the whole site draws under a link, at brand scale: it is drawn
 * from the left rather than switched on, in the section's own pigment.
 */
.dcv-rail__wordmark {
	font-family: var(--dcv-font-display);
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: -0.01em;
	background-image: linear-gradient(var(--dcv-cat-glow), var(--dcv-cat-glow));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--dcv-duration) var(--dcv-ease);
}

.dcv-rail__brand:hover .dcv-rail__wordmark,
.dcv-rail__brand:focus-visible .dcv-rail__wordmark { background-size: 100% 1px; }

/* Icon-only state: the wordmark goes, the compass stays. Never a squeezed rail. */
@media (max-width: 74.99rem) {
	.dcv-rail__wordmark { display: none; }

	.dcv-rail__identity {
		padding-inline: 0;
		display: flex;
		justify-content: center;
	}
}

/* --- the mobile top bar ---------------------------------------------------- */

.dcv-topbar__brand {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	text-decoration: none;
	color: var(--dcv-on-olive);
}

.dcv-topbar__brand .dcv-mark { color: var(--dcv-cat-glow); }

.dcv-topbar__wordmark {
	font-family: var(--dcv-font-display);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

/* --- account menu --------------------------------------------------------- */

.dcv-account-corner { display: none; }

.dcv-topbar__actions {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
}

.dcv-account-menu { position: relative; color: var(--dcv-on-olive); font-family: var(--dcv-font-ui); }

/*
 * The member's portrait, at the one size a control this small can carry it.
 * The initial stands in until a portrait is chosen — a silhouette says nothing
 * a letter does not say better, and it is the same plate the account page and
 * the discussion use.
 */
.dcv-account-menu__face {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--dcv-olive-deep);
	object-fit: cover;
}

.dcv-account-menu__face--initial {
	display: grid;
	place-items: center;
	color: var(--dcv-cat-glow);
	font-family: var(--dcv-font-display);
	font-size: 0.8125rem;
	line-height: 1;
	user-select: none;
}

.dcv-account-menu__identity .dcv-account-menu__face {
	display: inline-grid;
	vertical-align: -0.35em;
	margin-inline-end: 0.35em;
}

/*
 * ON A PHONE THE PORTRAIT REPLACES THE NAME, IT DOES NOT JOIN IT.
 *
 * The Topbar carries the wordmark, this control and « Menu » on one line, and
 * at 360px that line was already 29px wider than the viewport before a face
 * was added to it — measured, not estimated. A 24-character handle is the one
 * thing on the row that can go, because the portrait says the same thing and
 * the panel below states the handle in full the moment the control is opened.
 *
 * The name stays in the accessible tree rather than being removed: the control
 * has to keep announcing WHOSE account it opens.
 */
@media (max-width: 34rem) {
	.dcv-topbar .dcv-account-menu__name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dcv-topbar .dcv-account-menu__trigger { padding-inline: var(--dcv-space-2xs); }
}
.dcv-account-menu summary { list-style: none; }
.dcv-account-menu summary::-webkit-details-marker { display: none; }

.dcv-account-menu__trigger {
	display: flex;
	min-height: 44px;
	align-items: center;
	gap: var(--dcv-space-2xs);
	padding: var(--dcv-space-2xs) var(--dcv-space-xs);
	border: 1px solid var(--dcv-on-olive-line);
	border-radius: var(--dcv-radius);
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
	cursor: pointer;
	font-size: var(--dcv-text-sm);
	font-weight: 700;
	transition: border-color var(--dcv-duration-fast) var(--dcv-ease), background-color var(--dcv-duration-fast) var(--dcv-ease), color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-account-menu__trigger:hover,
.dcv-account-menu__trigger:focus-visible,
.dcv-account-menu[open] .dcv-account-menu__trigger {
	border-color: var(--dcv-cat-glow);
	background: var(--dcv-olive-raised);
	color: var(--dcv-cat-glow);
}

.dcv-account-menu__chevron {
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.12rem) rotate(45deg);
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-account-menu[open] .dcv-account-menu__chevron { transform: translateY(0.1rem) rotate(225deg); }

.dcv-account-menu__panel {
	position: absolute;
	inset: calc(100% + var(--dcv-space-2xs)) 0 auto auto;
	z-index: 50;
	width: min(18rem, calc(100vw - 2 * var(--dcv-gutter)));
	padding: var(--dcv-space-xs);
	border: 1px solid var(--dcv-line-strong);
	border-radius: var(--dcv-radius);
	background: var(--dcv-canvas);
	color: var(--dcv-ink);
}

.dcv-account-menu__identity {
	margin: 0;
	padding: var(--dcv-space-xs);
	border-bottom: 1px solid var(--dcv-line-strong);
	color: var(--dcv-cat-ink);
	font-size: var(--dcv-text-sm);
	font-weight: 750;
}

.dcv-account-menu__panel nav { display: grid; }
.dcv-account-menu__panel a {
	display: flex;
	min-height: 44px;
	align-items: center;
	padding-inline: var(--dcv-space-xs);
	border-radius: var(--dcv-radius);
	color: var(--dcv-ink);
	font-size: var(--dcv-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease), color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-account-menu__panel a:hover,
.dcv-account-menu__panel a:focus-visible { background: var(--dcv-cat-wash); color: var(--dcv-cat-ink); }
.dcv-account-menu__logout { margin-top: var(--dcv-space-2xs); border-top: 1px solid var(--dcv-line); }

@media (min-width: 60rem) {
	.dcv-account-corner {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dcv-space-sm));
		right: var(--dcv-space-sm);
		z-index: 45;
		display: block;
	}
}

/* --- the footer ------------------------------------------------------------ */

/*
 * The footer is the last thing on every page and it is read by exception, not
 * by intention: it carries four lists and a form, and at `--dcv-space-xl` top
 * and bottom it was spending 128px of pure padding to say so. Tightened to the
 * step above, with the closing side tighter than the opening one, because the
 * band's own edge already closes the page.
 */
.dcv-footer {
	margin-left: var(--dcv-rail-offset);
	padding-block: var(--dcv-space-lg) var(--dcv-space-md);
}

.dcv-footer__colophon {
	font-size: var(--dcv-text-xs);
	letter-spacing: 0.08em;
	color: var(--dcv-on-olive-muted);
}

/* --- the information architecture ------------------------------------------ */

.dcv-ia {
	display: flex;
	flex-direction: column;
	padding: clamp(0.8rem, 2vh, 1.5rem) var(--dcv-space-xs);
	flex: 1;
	min-height: 0;
}

.dcv-ia__title {
	color: var(--dcv-cat-glow);
	margin: 0 0 var(--dcv-space-xs);
	padding-inline: var(--dcv-space-2xs);
}

.dcv-ia__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* Rhythm on a tall window, nothing on a short one. */
	gap: clamp(0px, 0.55vh, 0.375rem);
}

/*
 * One line per entry: the reader-facing name in the display face, its engraved
 * Mark, and its real count. The Marks are the travel register — one drawn glyph
 * per editorial concept, the same glyph wherever that concept appears — and they
 * do that job at a size a reader can actually read the name beside.
 *
 * The row is a single line by design, not by truncation: the column is wide
 * enough for the longest label in the architecture, so nothing is ever cut.
 */
.dcv-ia__link {
	position: relative;
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.625rem;
	padding: clamp(0.34rem, 0.85vh, 0.6rem) var(--dcv-space-2xs) clamp(0.34rem, 0.85vh, 0.6rem) var(--dcv-space-xs);
	border-radius: var(--dcv-radius);
	text-decoration: none;
	color: var(--dcv-on-olive-muted);
	transition: background-color var(--dcv-duration-fast) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The marker grows out of the row's left edge rather than switching a border on:
 * a hairline appearing at full strength is the dashboard tell. It is drawn in
 * the ROW's pigment, not the page's — each entry in this column is scoped to its
 * own Hub, so addressing a row is answered in the colour of the room it opens.
 */
.dcv-ia__link::before {
	content: "";
	position: absolute;
	inset: 18% auto 18% 0;
	width: 2px;
	border-radius: 2px;
	background: var(--dcv-cat-glow);
	transform: scaleY(0);
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The ground under an addressed row is the olive it has always been, pulled a
 * few percent toward that row's pigment. Not a coloured tile: at 10% the hue is
 * felt rather than seen, and the marker and the Mark carry the statement.
 */
.dcv-ia__link:hover,
.dcv-ia__link:focus-visible {
	color: var(--dcv-on-olive);
	background-color: var(--dcv-olive-raised);
	background-color: color-mix(in oklab, var(--dcv-cat-glow) 10%, var(--dcv-olive-raised));
}

.dcv-ia__link:hover::before,
.dcv-ia__link:focus-visible::before { transform: scaleY(0.6); }

.dcv-ia__link:hover .dcv-ia__mark,
.dcv-ia__link:focus-visible .dcv-ia__mark { color: var(--dcv-cat-glow); }

.dcv-ia__link[aria-current="page"] {
	color: var(--dcv-on-olive);
	background-color: var(--dcv-olive-raised);
	background-color: color-mix(in oklab, var(--dcv-cat-glow) 14%, var(--dcv-olive-raised));
}

.dcv-ia__link[aria-current="page"]::before { transform: scaleY(1); }
.dcv-ia__link[aria-current="page"] .dcv-ia__mark { color: var(--dcv-cat-glow); }

.dcv-ia__mark {
	width: 1.35rem;
	height: 1.35rem;
	color: var(--dcv-on-olive-muted);
	transition: color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-ia__lines { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }

.dcv-ia__intent {
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	letter-spacing: -0.004em;
}

.dcv-ia__detail {
	font-size: var(--dcv-text-sm);
	line-height: 1.35;
	color: var(--dcv-on-olive-muted);
}

/* Real quantities, kept quiet until the row is addressed. */
.dcv-ia__count {
	font-family: var(--dcv-font-display);
	font-size: 0.75rem;
	color: var(--dcv-on-olive-muted);
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
	transition: opacity var(--dcv-duration-fast) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-ia__link:hover .dcv-ia__count,
.dcv-ia__link:focus-visible .dcv-ia__count,
.dcv-ia__link[aria-current="page"] .dcv-ia__count {
	opacity: 1;
	color: var(--dcv-cat-glow);
}

/*
 * Search: a labelled action opening a focused surface, never a permanent input.
 * `margin-top: auto` puts the column's slack between the architecture and this,
 * so a short window tightens the rows and a tall one simply breathes.
 */
.dcv-ia__search {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	margin-top: auto;
	padding: clamp(0.45rem, 1vh, 0.7rem) var(--dcv-space-xs);
	border: 1px solid var(--dcv-on-olive-line);
	border-radius: var(--dcv-radius);
	color: var(--dcv-on-olive-muted);
	text-decoration: none;
	transition: border-color var(--dcv-duration-fast) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease);
}

/*
 * The same plate as an action, at the volume chrome is allowed. It arrives from
 * the left and leaves to the right like every other one on the site; what it does
 * not do is invert, because this control lives in the column permanently and a
 * cream plate appearing under the pointer nine times a session is a flash, not a
 * gesture.
 */
.dcv-ia__search::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--dcv-olive-raised);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-ia__search:hover::before,
.dcv-ia__search:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
	transition-duration: var(--dcv-duration);
}

.dcv-ia__search:hover,
.dcv-ia__search:focus-visible {
	color: var(--dcv-on-olive);
	border-color: var(--dcv-cat-glow);
}

.dcv-ia__search:hover .dcv-mark,
.dcv-ia__search:focus-visible .dcv-mark { color: var(--dcv-cat-glow); }

.dcv-ia__search .dcv-mark { transition: color var(--dcv-duration-fast) var(--dcv-ease); }
.dcv-ia__search .dcv-label { color: inherit; }

/* --- the foot of the Rail -------------------------------------------------- */

/*
 * One control. The invented coordinate and the percentage readout that used to
 * sit here were the two things in the column a reader could do nothing with, and
 * together they were most of the reason it scrolled.
 */
.dcv-rail__foot {
	padding: clamp(0.6rem, 1.5vh, 1.125rem) var(--dcv-space-xs);
	border-top: 1px solid var(--dcv-on-olive-line);
}

/* --- the theme override ---------------------------------------------------- */

.dcv-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dcv-space-2xs);
	width: 100%;
	padding: var(--dcv-space-2xs);
	background: none;
	border: 0;
	color: var(--dcv-on-olive-muted);
	cursor: pointer;
	font: inherit;
}

.dcv-theme-toggle {
	border-radius: var(--dcv-radius);
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-theme-toggle:hover,
.dcv-theme-toggle:focus-visible {
	color: var(--dcv-on-olive);
	background-color: var(--dcv-olive-raised);
}

.dcv-theme-toggle:hover .dcv-theme-toggle__switch,
.dcv-theme-toggle:focus-visible .dcv-theme-toggle__switch { border-color: var(--dcv-cat-glow); }

.dcv-theme-toggle__switch { transition: border-color var(--dcv-duration-fast) var(--dcv-ease); }
.dcv-theme-toggle .dcv-label { color: inherit; font-size: 0.65rem; }

.dcv-theme-toggle__switch {
	position: relative;
	width: 2rem;
	height: 1rem;
	flex: none;
	border: 1px solid var(--dcv-on-olive-line);
	border-radius: 1rem;
}

.dcv-theme-toggle__switch::after {
	content: "";
	position: absolute;
	inset: 2px auto 2px 2px;
	width: 0.625rem;
	border-radius: 50%;
	background: var(--dcv-on-olive-muted);
	transition: transform var(--dcv-duration) var(--dcv-ease),
	            background-color var(--dcv-duration) var(--dcv-ease);
}

.dcv-theme-toggle[aria-pressed="true"] .dcv-theme-toggle__switch::after {
	transform: translateX(0.94rem);
	background: var(--dcv-cat-glow);
}

/* --- the reduced intensity state, beside prose ----------------------------- */

/*
 * The Rail keeps its full width beside an Article and steps back in tone. It
 * does not narrow: the brand stays permanently present without competing with
 * the reading column (ADR-0023).
 */
.dcv-rail[data-intensity="reduced"] .dcv-ia__count { opacity: 0.4; }
.dcv-rail[data-intensity="reduced"] .dcv-ia__mark { opacity: 0.7; }
.dcv-rail[data-intensity="reduced"] .dcv-ia__intent { color: var(--dcv-on-olive-muted); }

/* Addressing the column brings it fully back, so nothing is lost — only quiet. */
.dcv-rail[data-intensity="reduced"]:hover .dcv-ia__count,
.dcv-rail[data-intensity="reduced"]:focus-within .dcv-ia__count { opacity: 1; }

.dcv-rail[data-intensity="reduced"]:hover .dcv-ia__mark,
.dcv-rail[data-intensity="reduced"]:focus-within .dcv-ia__mark { opacity: 1; }

/* --- the icon-only state --------------------------------------------------- */

@media (min-width: 60rem) and (max-width: 74.99rem) {
	.dcv-ia { padding-inline: 0; align-items: center; }
	.dcv-ia__title { display: none; }

	.dcv-ia__link {
		grid-template-columns: auto;
		justify-items: center;
		padding-inline: 0;
	}

	/* The marker moves to the canvas-facing edge, where the eye already is. */
	.dcv-ia__link::before { inset: 18% 0 18% auto; }

	.dcv-ia__lines,
	.dcv-ia__count { display: none; }

	.dcv-ia__mark { width: 1.5em; height: 1.5em; margin: 0; }

	.dcv-ia__search { justify-content: center; }
	.dcv-ia__search .dcv-label { display: none; }

	.dcv-rail__foot { align-items: center; }
	.dcv-theme-toggle__label { display: none; }
	.dcv-theme-toggle { justify-content: center; }
}

/* --- the mobile sheet ------------------------------------------------------ */

.dcv-topbar { justify-content: space-between; }

.dcv-topbar__toggle {
	display: flex;
	align-items: center;
	gap: var(--dcv-space-2xs);
	color: var(--dcv-on-olive);
	text-decoration: none;
	padding: var(--dcv-space-2xs) var(--dcv-space-xs);
	min-height: 44px;
	border-radius: var(--dcv-radius);
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            background-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-topbar__toggle:hover,
.dcv-topbar__toggle:focus-visible {
	color: var(--dcv-cat-glow);
	background-color: var(--dcv-olive-raised);
}

.dcv-topbar__bars {
	position: relative;
	display: block;
	width: 1.1rem;
	height: 1px;
	background: currentColor;
}

.dcv-topbar__bars::before,
.dcv-topbar__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
}

.dcv-topbar__bars::before { top: -5px; }
.dcv-topbar__bars::after { top: 5px; }

/*
 * A real full-screen surface, not a dropdown, carrying the identical IA.
 * `:target` opens it with no JavaScript at all; the script upgrades the toggle
 * to proper button semantics with focus management.
 */
.dcv-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	flex-direction: column;
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dcv-sheet:target,
.dcv-sheet[data-open="true"] { display: flex; }

@media (min-width: 60rem) {
	.dcv-sheet,
	.dcv-sheet:target { display: none; }
}

.dcv-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dcv-space-sm);
	min-height: var(--dcv-topbar-height);
	padding-inline: var(--dcv-gutter);
	border-bottom: 1px solid var(--dcv-on-olive-line);
}

.dcv-sheet__brand {
	font-family: var(--dcv-font-display);
	font-size: 1.15rem;
}

.dcv-sheet__close {
	color: var(--dcv-on-olive);
	text-decoration: none;
	padding: var(--dcv-space-2xs);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.dcv-sheet .dcv-ia { padding-inline: var(--dcv-gutter); }
.dcv-sheet .dcv-ia__link { padding-block: var(--dcv-space-xs); min-height: 44px; }

.dcv-sheet__foot {
	padding: var(--dcv-space-sm) var(--dcv-gutter) var(--dcv-space-lg);
	border-top: 1px solid var(--dcv-on-olive-line);
}

/* --- the footer ------------------------------------------------------------ */

.dcv-footer__inner {
	display: grid;
	gap: var(--dcv-space-md) var(--dcv-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	padding-bottom: var(--dcv-space-md);
}

/*
 * The fifth column exists only where a fifth column fits.
 *
 * Four of the five are lists of links and share the auto-fit track above. The
 * newsletter is a form, and a form has a floor: Turnstile's widget will not
 * render below 300px, so a 12rem track would hang it out of the column. Below
 * this width it takes a row of its own instead (newsletter.css), which is the
 * shape change, not a squeeze.
 */
@media (min-width: 82rem) {
	.dcv-footer__inner {
		grid-template-columns: 1.15fr repeat(3, minmax(8rem, 0.8fr)) minmax(20rem, 1.15fr);
	}

	/* Pinned to the last track rather than left to flow: the Destinations column
	   is omitted when no Region resolves, and the form would inherit an 8rem
	   track it cannot live in. */
	.dcv-footer__inner .dcv-news { grid-column: -2 / -1; }
}

.dcv-footer__compass { color: var(--dcv-cat-glow); }

.dcv-footer__wordmark {
	font-family: var(--dcv-font-display);
	font-size: 1.3rem;
	line-height: 1.15;
	margin: var(--dcv-space-3xs) 0 var(--dcv-space-3xs);
}

.dcv-footer__line {
	margin: 0;
	max-width: 26ch;
	font-size: var(--dcv-text-sm);
	color: var(--dcv-on-olive-muted);
}

.dcv-footer__title {
	color: var(--dcv-cat-glow);
	margin: 0 0 var(--dcv-space-2xs);
}

/*
 * The tallest of these columns sets the footer's height — eight Rubriques, at
 * the interface leading, ran to 231px on their own. The rows keep a 24px
 * target for a finger and lose the rest: the step between two links in one
 * list is grouping, and this group is already stated by its own title.
 */
.dcv-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.dcv-footer__list a {
	display: block;
	padding-block: 0.15rem;
	font-size: var(--dcv-text-sm);
	line-height: 1.35;
	color: var(--dcv-on-olive-muted);
	text-decoration: none;
}

/* The rule is drawn by the shared link gesture in base.css; the colour is all
   this component still has to say. */
.dcv-footer__list a:hover,
.dcv-footer__list a:focus-visible { color: var(--dcv-on-olive); }

/*
 * The legal line, and the one control that has to be reachable from every page:
 * the cookie panel. Two ends of one rule, wrapping to a stack when the line
 * cannot hold both.
 */
.dcv-footer__colophon-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dcv-space-2xs) var(--dcv-space-md);
	padding-top: var(--dcv-space-xs);
	border-top: 1px solid var(--dcv-on-olive-line);
}