/*
 * Découverte V2 — base: reset, typography roles, focus, motion, and the two
 * layout primitives every surface is built from (the Rail and the canvas).
 *
 * Everything here is stylesheet-driven and server-rendered. No JavaScript
 * transforms a generic render into V2 after load.
 */

/* --- reset ----------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--dcv-canvas);
	color: var(--dcv-ink);
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-base);
	line-height: var(--dcv-leading-ui);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

/* --- typography roles ------------------------------------------------------ */

h1, h2, h3, h4 {
	font-family: var(--dcv-font-display);
	color: var(--dcv-ink);
	font-weight: 700;
	line-height: var(--dcv-leading-title);
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin: 0;
}

h1 { font-size: var(--dcv-display-2); line-height: var(--dcv-leading-display); letter-spacing: -0.02em; }
h2 { font-size: var(--dcv-display-3); }
h3 { font-size: var(--dcv-display-4); letter-spacing: -0.006em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

p { margin: 0; }

/*
 * The micro-label. Eyebrows, kickers, Context labels, Rail titles, buttons — one
 * treatment, used everywhere the interface speaks in small capitals.
 */
.dcv-label {
	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;
	line-height: 1.3;
	color: var(--dcv-muted);
	margin: 0;
}

.dcv-label--accent { color: var(--dcv-cat-ink); }
.dcv-label--on-dark { color: var(--dcv-cat-glow); }

/* --- links ----------------------------------------------------------------- */

a {
	color: inherit;
	text-decoration-line: none;
	text-decoration-color: var(--dcv-line-strong);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--dcv-duration-fast) var(--dcv-ease),
	            text-decoration-color var(--dcv-duration-fast) var(--dcv-ease);
}

a:hover { text-decoration-color: var(--dcv-cat-ink); }

/*
 * THE LINK GESTURE — one movement for every link on the site.
 *
 * A rule is DRAWN under the label from the left, in the pigment of the section
 * that link belongs to, over the long ease-out the rest of the design uses. It
 * is the same gesture as the plate on an action and the marker on a Rail row:
 * something arrives, from one direction, rather than switching on. A row of
 * links crossed by a pointer therefore reads as movement in one direction
 * instead of a row of lamps blinking.
 *
 * Drawn with a background rather than `text-decoration`, for two reasons: the
 * rule can be animated from zero width, and it sits at a fixed distance from the
 * baseline instead of skipping descenders at three different offsets on three
 * different faces.
 *
 * WHERE IT DOES NOT APPLY: prose, where the underline is permanent because it is
 * the only thing marking a link inside a paragraph; and the composed components
 * that already own a gesture (the preview title, the action, the pagination).
 *
 * Every rule here is a `:focus-visible` rule too. Nothing in this gesture
 * carries meaning that is not already in the label.
 */
.dcv-wipe,
.dcv-footer__list a,
.dcv-toc__list a,
.dcv-wayfinding__cell a,
.dcv-article__breadcrumbs a,
.dcv-empty-state__paths a,
.dcv-regions__read a,
.dcv-regions__link,
.dcv-countries__row-link {
	background-image: linear-gradient(var(--dcv-wipe-colour, var(--dcv-cat-ink)), var(--dcv-wipe-colour, var(--dcv-cat-ink)));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	text-decoration: none;
	transition: background-size var(--dcv-duration) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-wipe:hover,
.dcv-wipe:focus-visible,
.dcv-footer__list a:hover,
.dcv-footer__list a:focus-visible,
.dcv-toc__list a:hover,
.dcv-toc__list a:focus-visible,
.dcv-wayfinding__cell a:hover,
.dcv-wayfinding__cell a:focus-visible,
.dcv-article__breadcrumbs a:hover,
.dcv-article__breadcrumbs a:focus-visible,
.dcv-empty-state__paths a:hover,
.dcv-empty-state__paths a:focus-visible,
.dcv-regions__read a:hover,
.dcv-regions__read a:focus-visible,
.dcv-regions__link:hover,
.dcv-regions__link:focus-visible,
.dcv-countries__row-link:hover,
.dcv-countries__row-link:focus-visible {
	background-size: 100% 1px;
}

/* On olive the mid-tone pigment would disappear, so the rule is drawn in the
   same pigment's light cut. One declaration, both grounds. */
.dcv-band,
.dcv-footer,
.dcv-rail,
.dcv-sheet,
.dcv-open,
.dcv-slate { --dcv-wipe-colour: var(--dcv-cat-glow); }

/*
 * And the focus ring with it, for the same reason and on the same grounds.
 *
 * The ring is the pigment's mid cut, which is right on the canvas and measures
 * 2.2:1 against the olive — under WCAG 1.4.11's 3:1 for a focus indicator, so
 * a keyboard reader in the Rail or the footer could not see where they were.
 * The light cut is 7.9:1. This became worth stating the moment the footer
 * carried a form rather than only links.
 */
.dcv-band,
.dcv-footer,
.dcv-rail,
.dcv-sheet,
.dcv-open,
.dcv-slate { --dcv-focus-ring: var(--dcv-cat-glow); }

/*
 * Hover and focus produce the same affordance, and focus is always visibly
 * ringed. Everything reachable by mouse is reachable by keyboard.
 */
:focus-visible {
	outline: var(--dcv-focus-width) solid var(--dcv-focus-ring);
	outline-offset: var(--dcv-focus-offset);
	border-radius: 1px;
}

.dcv-skip-link {
	position: absolute;
	left: var(--dcv-space-sm);
	top: var(--dcv-space-sm);
	z-index: 100;
	transform: translateY(-200%);
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
	padding: var(--dcv-space-2xs) var(--dcv-space-sm);
	border-radius: var(--dcv-radius);
}

.dcv-skip-link:focus-visible { transform: translateY(0); }

/* --- motion: never required for comprehension ------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- primitive 1: the Rail ------------------------------------------------- */

/*
 * A permanent vertical column, always olive, in both themes. It carries the
 * brand and the whole information architecture, so the canvas never spends
 * vertical space on a header. Its contents belong to ticket 09; what is here is
 * the ground, the geometry and the three degradation states.
 */
.dcv-rail {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 40;
	width: var(--dcv-rail-offset);
	display: none;
	flex-direction: column;
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
	border-right: 1px solid var(--dcv-on-olive-line);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Beside prose the Rail keeps its width and steps back in intensity (ADR-0023). */
.dcv-rail[data-intensity="reduced"] { color: var(--dcv-on-olive-muted); }

.dcv-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--dcv-space-sm);
	min-height: var(--dcv-topbar-height);
	padding-inline: var(--dcv-gutter);
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
}

@media (min-width: 60rem) {
	.dcv-rail { display: flex; }
	.dcv-topbar { display: none; }
}

/* --- primitive 2: the canvas ----------------------------------------------- */

/*
 * One editorial surface read top to bottom, not a stack of self-contained
 * modules. The Rail provides the only left margin the page needs, which is what
 * lets photography cross to the viewport edge on the canvas side.
 */
.dcv-canvas {
	margin-left: var(--dcv-rail-offset);
	min-height: 100vh;
	background: var(--dcv-canvas);
}

.dcv-wrap {
	max-width: var(--dcv-canvas-max);
	margin-inline: auto;
	padding-inline: var(--dcv-gutter);
}

.dcv-measure { max-width: var(--dcv-measure); }
.dcv-breakout { max-width: var(--dcv-breakout); }

/* Sections are separated by tonal change and a hairline, never by a gap. */
.dcv-section {
	padding-block: var(--dcv-space-section);
	border-top: 1px solid var(--dcv-line);
}

.dcv-section:first-of-type { border-top: 0; }

.dcv-section__title {
	font-family: var(--dcv-font-display);
	font-weight: 700;
	font-style: normal;
	color: var(--dcv-ink);
	font-size: var(--dcv-display-3);
	margin: 0 0 var(--dcv-space-md);
	padding: 0;
}

/* The single strongest transition available. Used sparingly so it keeps force. */
.dcv-band {
	background: var(--dcv-olive);
	color: var(--dcv-on-olive);
}

.dcv-band a { text-decoration-color: var(--dcv-on-olive-line); }
.dcv-band a:hover { text-decoration-color: var(--dcv-cat-glow); }
.dcv-band .dcv-label { color: var(--dcv-cat-glow); }

/* --- primitive 3: prose ---------------------------------------------------- */

.dcv-prose {
	max-width: var(--dcv-measure);
	font-size: var(--dcv-text-prose);
	line-height: var(--dcv-leading-prose);
}

.dcv-prose > * + * { margin-top: 1.1em; }

.dcv-prose h2,
.dcv-prose h3 { margin-top: 2em; }

.dcv-prose a {
	text-decoration-line: underline;
	text-decoration-color: var(--dcv-cat-ink);
}

/* --- the scrim: mandatory wherever type sits on a photograph --------------- */

.dcv-scrim { position: relative; }

.dcv-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dcv-scrim-bottom);
	pointer-events: none;
}

.dcv-scrim--left::after { background: var(--dcv-scrim-left); }

.dcv-scrim > * { position: relative; z-index: 1; }

/* --- the engraved Mark ----------------------------------------------------- */

.dcv-mark {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.dcv-mark--lg { width: 1.9em; height: 1.9em; }