/* GTA Playbook
 *
 * Alle waarden komen van artboard 2j (kleur, type, de twee effecten) en 2i
 * (het beeldcontract per slot). Waar een getal hier staat, staat het daar ook.
 */

/* ---------- fonts ---------- */

@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/bodoni-moda-var-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/bodoni-moda-var-latin-ext.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var-latin.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- tokens ---------- */

:root {
	--gtap-ground: #000000;
	--gtap-panel: #0a0a0c;
	--gtap-panel-2: #101013;
	--gtap-border: #1f1f24;
	--gtap-border-soft: #2b2b31;

	--gtap-action: #f976b0;
	--gtap-action-deep: #f361a2;
	--gtap-provenance: #8cdbf3;
	--gtap-counts: #50c8e8;

	--gtap-text: #ffffff;
	--gtap-muted: #b3a7ac;
	--gtap-muted-2: #c2b7bb;

	--gtap-display: 'Bodoni Moda', 'Times New Roman', serif;
	--gtap-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--gtap-body: 'Archivo', system-ui, -apple-system, sans-serif;

	--gtap-glow-count: 0 0 42px rgba(249, 118, 176, 0.55);
	--gtap-glow-button: 0 0 0 1px var(--gtap-action), 0 0 30px rgba(249, 118, 176, 0.4);

	--gtap-gap: clamp(16px, 3vw, 30px);
	--gtap-max: 1440px;
}

/* Kadence levert deze klasse zelf, maar de sjablonen mogen er niet van
   afhangen: een label dat per ongeluk zichtbaar wordt is een zichtbare fout. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- basis ---------- */

body.gtap {
	background: var(--gtap-ground);
	color: var(--gtap-text);
	font-family: var(--gtap-body);
}

body.gtap h1,
body.gtap h2,
body.gtap h3,
body.gtap .gtap-display {
	font-family: var(--gtap-display);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

.gtap-mono,
body.gtap .gtap-meta {
	font-family: var(--gtap-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-muted);
}

body.gtap a {
	color: var(--gtap-provenance);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body.gtap a:hover {
	color: var(--gtap-action);
}

/* Toetsenbordfocus. Staat op geen enkel artboard, dus dit is van mij: zichtbaar
   genoeg om te volgen, in de kleur die al "bevestigd" betekent. */
body.gtap :focus-visible {
	outline: 2px solid var(--gtap-provenance);
	outline-offset: 2px;
	border-radius: 2px;
}

.gtap-wrap {
	max-width: var(--gtap-max);
	margin-inline: auto;
	padding-inline: max(16px, 2vw);
}

.gtap-grain::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: url('../img/noise.png');
	opacity: 0.05;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* ---------- kop ---------- */

.gtap-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--gtap-gap);
	padding: 12px max(16px, 2vw);
	background: var(--gtap-panel);
	border-bottom: 1px solid var(--gtap-border);
}
.gtap-header__logo svg {
	height: 34px;
	width: auto;
	display: block;
}
/* De regel onder het woordmerk is op telefoonformaat niet te lezen; daar draagt
   het compacte merk de kop. Artboard 2g. */
.gtap-logo-compact {
	display: none;
}
@media (max-width: 560px) {
	.gtap-logo-full {
		display: none;
	}
	.gtap-logo-compact {
		display: block;
	}
	.gtap-header__logo svg {
		height: 26px;
	}
}
.gtap-header__nav {
	display: flex;
	gap: 18px;
	margin-left: auto;
	font-family: var(--gtap-mono);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.gtap-header__nav a {
	color: var(--gtap-muted);
	text-decoration: none;
}
.gtap-header__nav a[aria-current='page'],
.gtap-header__nav .current-menu-item > a,
.gtap-header__nav .current_page_item > a {
	color: var(--gtap-action);
	border-bottom: 1px solid var(--gtap-action);
}
/* wp_nav_menu levert een <ul>; die moet zich als de rij gedragen. */
.gtap-header__nav .gtap-menu {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gtap-countdown {
	font-family: var(--gtap-mono);
	font-size: 0.72rem;
	color: var(--gtap-action);
	white-space: nowrap;
}

/* ---------- hero ---------- */

.gtap-hero {
	/* Zonder dit vallen het beeld en de gradient terug op de viewport in plaats
	   van op deze sectie, en loopt de hero over de halve pagina door. */
	position: relative;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--gtap-gap);
	overflow: hidden;
	background: var(--gtap-panel);
}
.gtap-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/*
 * Het ontwerp schreef "gradient to #000000 at 97%" voor, en op het artboard
 * klopte dat: daar was het beeld onderin al donker. Onze 19 frames zijn dat
 * niet. Bij de Alvino staat de titel op lucht, en dan haalt de fabrikantregel
 * 2,09:1 contrast waar 4,5:1 nodig is -- op het lichtste punt verdwijnt de
 * titel helemaal.
 *
 * Per beeld bijstellen kan niet, dus de sluier moet het ergste geval aankunnen:
 * onder de tekst zwart op ~0,85, en daarboven snel terug naar niets zodat het
 * beeld zelf niet vermodderd raakt.
 */
.gtap-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	/*
	 * Zonder z-index schildert een ::before vóór de inhoud van het element, dus
	 * onder de <img>. De sluier lag daarmee achter de foto en deed niets --
	 * wat verklaart waarom hem donkerder maken geen enkel verschil gaf.
	 */
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.76) 70%, rgba(0,0,0,0.92) 82%, #000000 100%);
}
/* Alleen de tekst boven de gradient tillen. Een regel op `.gtap-hero > *` deed
   dat ook met het beeld, en overschreef daarmee zijn position:absolute --
   waarna de hero op ware grootte uitklapte in plaats van 420 px hoog te zijn. */
.gtap-hero__make,
.gtap-hero__title {
	position: relative;
	z-index: 3;
}
.gtap-hero__make {
	font-family: var(--gtap-mono);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gtap-action);
	margin: 0 0 4px;
	/* Redt de losse lichte plek die een sluier over het hele beeld niet haalt
	   zonder de foto dood te maken. */
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.8);
}
.gtap-hero__title {
	font-size: clamp(2.6rem, 7vw, 5.75rem);
	margin: 0;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.92), 0 0 4px rgba(0, 0, 0, 0.55);
}

/* ---------- herkomstregel ---------- */

.gtap-provenance {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
	padding: 10px max(16px, 2vw);
	background: var(--gtap-panel);
	border-block: 1px solid var(--gtap-border);
	font-family: var(--gtap-mono);
	font-size: 0.7rem;
	color: var(--gtap-muted);
}
.gtap-provenance strong {
	color: var(--gtap-provenance);
	font-weight: 400;
}

/* ---------- statusblok ---------- */

.gtap-status {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	border: 1px solid var(--gtap-border);
	margin: var(--gtap-gap) 0;
}
.gtap-status > div {
	padding: 18px 20px;
	border-right: 1px solid var(--gtap-border);
}
.gtap-status > div:last-child {
	border-right: 0;
}
.gtap-status dt {
	font-family: var(--gtap-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-muted);
	margin-bottom: 6px;
}
.gtap-status dd {
	margin: 0;
	font-family: var(--gtap-display);
	font-size: 1.35rem;
}
.gtap-status dd.is-confirmed {
	color: var(--gtap-provenance);
}
.gtap-status dd.is-placeholder {
	color: var(--gtap-action-deep);
	font-family: var(--gtap-body);
	font-size: 0.92rem;
	line-height: 1.45;
}

/* ---------- feitentabel ---------- */

.gtap-facts {
	width: 100%;
	border-collapse: collapse;
}
.gtap-facts th,
.gtap-facts td {
	text-align: left;
	padding: 13px 16px;
	border: 1px solid var(--gtap-border);
	vertical-align: top;
}
.gtap-facts th {
	width: 220px;
	font-family: var(--gtap-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtap-muted);
	font-weight: 400;
}
.gtap-facts .gtap-credit {
	font-family: var(--gtap-mono);
	font-size: 0.68rem;
	color: var(--gtap-provenance);
	margin-left: 10px;
}

/* ---------- "nog niet gemeten" ---------- */

.gtap-pending {
	border: 1px solid var(--gtap-action);
	background: linear-gradient(160deg, #1a0a12 0%, #0a0a0c 70%);
	padding: 24px;
}
.gtap-pending__label {
	font-family: var(--gtap-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-action);
	margin-bottom: 10px;
}
.gtap-pending h2 {
	font-size: 2.1rem;
	margin: 0 0 12px;
}
.gtap-pending p {
	color: var(--gtap-muted-2);
	font-size: 0.94rem;
	line-height: 1.6;
	margin: 0 0 16px;
}
.gtap-pending form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.gtap-pending input[type='email'] {
	flex: 1 1 190px;
	background: var(--gtap-panel);
	border: 1px solid var(--gtap-border-soft);
	color: var(--gtap-text);
	font-family: var(--gtap-body);
	padding: 11px 13px;
}
.gtap-button {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--gtap-action);
	color: #000000;
	font-family: var(--gtap-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 12px 20px;
	box-shadow: var(--gtap-glow-button);
}
.gtap-fineprint {
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	color: var(--gtap-muted);
	margin-top: 10px;
}

/* ---------- index ---------- */

.gtap-index__head {
	padding: var(--gtap-gap) 0 10px;
}
.gtap-index__counts {
	font-family: var(--gtap-mono);
	font-size: 0.74rem;
	color: var(--gtap-muted);
}
.gtap-index__counts b {
	color: var(--gtap-counts);
	font-weight: 500;
}

/* ---------- lopende tekst ----------
   Twee plekken, en het is dezelfde tekst: de hubtekst bij een klasse en de
   redactietekst op een voertuigpagina. Stond tot nu toe ongestijld, wat op de
   voertuigpagina niet opviel omdat er nog geen lopende tekst in stond -- op een
   hub is het de hele pagina.

   Merk op wat er niet in staat: koppen. WordPress haalt blok-HTML uit een
   termbeschrijving (wp_filter_kses op pre_term_description), dus daar komen
   alleen alinea's uit. De pagina heeft zijn koppen al: de H1 erboven en de
   sectiekoppen onder het raster. */
.gtap-prose {
	max-width: 74ch;
	margin-top: 14px;
	font-size: 1.02rem;
	line-height: 1.66;
	color: var(--gtap-muted-2);
}
.gtap-lead,
.gtap-prose > :first-child {
	/* Het antwoord bovenaan, en dat hoort ook zo te lezen. URLS.md 4a. */
	font-size: 1.16rem;
	line-height: 1.55;
	color: var(--gtap-text);
}
/* Koppen binnen de tekst. Op een hub bestaan ze niet -- WordPress haalt ze uit
   een termbeschrijving -- maar in post_content wel, en daar dragen ze de
   voertuigpagina: wat we zien, waar het vandaan komt, wat we niet weten. */
/* Twee koppen staan buiten .gtap-prose omdat ze niet uit de tekst komen maar
   uit de dataset: "Where to find it" en "Every frame we have". Zonder deze
   tweede selector erven ze de kale h2 van het moederthema, en dan plakken ze
   tegen de alinea erboven met hun staarten afgeknipt -- precies wat er onder
   "A note on this record" gebeurde. */
.gtap-prose h2,
.gtap-main > h2 {
	font-family: var(--gtap-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--gtap-text);
	margin: 1.7em 0 0.6em;
}
.gtap-main > h2 + p {
	margin: 0 0 1em;
}
.gtap-prose ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	border-top: 1px solid var(--gtap-border);
}
.gtap-prose li {
	position: relative;
	padding: 9px 0 9px 22px;
	border-bottom: 1px solid var(--gtap-border);
}
.gtap-prose li::before {
	/* Geen bolletje maar een streep in de herkomstkleur: elk punt hieronder is
	   iets dat je zelf in het frame kunt nakijken, en dat mag het uitstralen. */
	content: '';
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 12px;
	height: 1px;
	background: var(--gtap-provenance);
}
.gtap-prose p {
	margin: 0 0 1em;
}
.gtap-prose p:last-child {
	margin-bottom: 0;
}
.gtap-prose strong {
	color: var(--gtap-text);
	font-weight: 500;
}
.gtap-prose a {
	color: var(--gtap-action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gtap-filters {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: var(--gtap-gap);
	border-bottom: 1px solid var(--gtap-border);
}
.gtap-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.gtap-filter-row__label {
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-muted);
	width: 108px;
	flex-shrink: 0;
}
.gtap-chip {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--gtap-border);
	border-radius: 999px;
	color: var(--gtap-muted-2);
	font-family: var(--gtap-body);
	font-size: 0.8rem;
	padding: 6px 14px;
}
.gtap-chip[aria-pressed='true'] {
	background: var(--gtap-action);
	border-color: var(--gtap-action);
	color: #000000;
}
.gtap-search {
	width: 100%;
	background: var(--gtap-panel);
	border: 1px solid var(--gtap-border);
	color: var(--gtap-text);
	font-family: var(--gtap-body);
	font-size: 0.95rem;
	padding: 12px 16px;
}

.gtap-section-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: var(--gtap-gap) 0 14px;
}
.gtap-section-title h2 {
	font-size: 1.6rem;
	margin: 0;
}
.gtap-section-title span {
	font-family: var(--gtap-mono);
	font-size: 0.7rem;
	color: var(--gtap-muted);
}

.gtap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 16px;
	padding-bottom: var(--gtap-gap);
}

/* Beeldcontract per slot, artboard 2i. */
.gtap-card {
	display: flex;
	flex-direction: column;
	background: var(--gtap-panel);
	border: 1px solid var(--gtap-border);
	text-decoration: none;
	color: inherit;
}
a.gtap-card:hover {
	border-color: var(--gtap-action);
	box-shadow: 0 0 0 1px var(--gtap-action);
}
.gtap-card__media {
	position: relative;
	height: 146px;
	background: var(--gtap-panel-2);
	overflow: hidden;
}
.gtap-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gtap-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--gtap-action);
	color: #000000;
	font-family: var(--gtap-mono);
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 7px;
}
.gtap-card__prov {
	font-family: var(--gtap-mono);
	font-size: 0.62rem;
	color: var(--gtap-provenance);
	padding: 7px 12px;
	border-top: 1px solid var(--gtap-border);
	border-bottom: 1px solid var(--gtap-border);
}
.gtap-card__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.gtap-card__make {
	font-family: var(--gtap-mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-action);
}
.gtap-card__name {
	font-family: var(--gtap-display);
	font-size: 1.19rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}
.gtap-card__foot {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: 0.76rem;
	color: var(--gtap-muted);
	margin-top: auto;
}
.gtap-tag {
	font-family: var(--gtap-mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 1px solid var(--gtap-border-soft);
	padding: 2px 6px;
	color: var(--gtap-muted-2);
}

/* Een kaart zonder naam: geen link, en hij zegt waarom. Artboard 2i, "Rule". */
.gtap-card--unnamed .gtap-card__name {
	font-family: var(--gtap-body);
	font-weight: 400;
	font-size: 0.98rem;
	color: var(--gtap-muted-2);
}
.gtap-card--empty .gtap-card__media {
	display: grid;
	place-items: center;
	color: var(--gtap-action-deep);
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	text-align: center;
	line-height: 1.7;
}

.gtap-more {
	display: grid;
	place-content: center;
	gap: 8px;
	text-align: center;
	padding: 24px;
	border: 1px solid var(--gtap-border);
	background: var(--gtap-panel);
}
.gtap-more b {
	font-family: var(--gtap-display);
	font-size: 2.2rem;
	color: var(--gtap-counts);
	font-weight: 700;
}
.gtap-more span {
	font-size: 0.82rem;
	color: var(--gtap-muted);
	line-height: 1.5;
}

/* ---------- voertuiglayout ---------- */

.gtap-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--gtap-gap);
	align-items: start;
	padding-bottom: 48px;
}
.gtap-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.gtap-panel {
	border: 1px solid var(--gtap-border);
	background: var(--gtap-panel);
	padding: 18px;
}
.gtap-panel h2 {
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-muted);
	margin: 0 0 12px;
	font-weight: 400;
}
.gtap-waiting {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gtap-waiting li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--gtap-border);
	font-size: 0.92rem;
}
.gtap-waiting li:last-child {
	border-bottom: 0;
}
.gtap-waiting em {
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	font-style: normal;
	color: var(--gtap-action-deep);
	text-align: right;
	max-width: 48%;
	flex-shrink: 0;
}

/* Dezelfde rijen, maar met feiten erin in plaats van een datum. De waarde mag
   hier meer ruimte nemen en gewoon wit zijn: "Ram 1500 (DT)" is geen belofte
   voor later maar iets dat nu vaststaat. */
.gtap-waiting--facts em {
	color: var(--gtap-text);
	max-width: 62%;
	font-family: var(--gtap-body);
	font-size: 0.82rem;
}
.gtap-waiting--facts .gtap-credit {
	display: block;
	font-family: var(--gtap-mono);
	font-size: 0.62rem;
	color: var(--gtap-muted);
	margin-top: 2px;
}

.gtap-evidence {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.gtap-evidence figure {
	margin: 0;
}
.gtap-evidence img {
	width: 100%;
	height: 130px;
	/* contain, niet cover. Een staande uitsnede van 152x290 werd met cover een
	   horizontaal reepje uit het midden, en een van 96x54 werd opgeblazen. Een
	   bewijsminiatuur hoort de hele uitsnede te tonen, ook als dat betekent dat
	   er zwart naast staat. */
	object-fit: contain;
	background: var(--gtap-panel-2);
	display: block;
	border: 1px solid var(--gtap-border);
}
.gtap-evidence figcaption {
	font-family: var(--gtap-mono);
	font-size: 0.62rem;
	color: var(--gtap-provenance);
	margin-top: 6px;
	line-height: 1.5;
}

.gtap-footer {
	border-top: 1px solid var(--gtap-border);
	padding: 18px max(16px, 2vw);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	color: var(--gtap-muted);
}

/* ---------- smal ---------- */

@media (max-width: 900px) {
	.gtap-single {
		grid-template-columns: minmax(0, 1fr);
	}
	.gtap-hero {
		min-height: 300px;
	}
	.gtap-facts th {
		width: 140px;
	}
}

@media (max-width: 560px) {
	.gtap-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.gtap-card__media {
		height: 104px;
	}
	.gtap-filter-row__label {
		width: 100%;
	}
	.gtap-header__nav {
		display: none;
	}
	/* De nav droeg margin-left:auto; zonder nav moet de teller dat overnemen,
	   anders plakt de countdown tegen het logo. */
	.gtap-countdown {
		margin-left: auto;
	}
	.gtap-facts,
	.gtap-facts tbody,
	.gtap-facts tr,
	.gtap-facts th,
	.gtap-facts td {
		display: block;
		width: auto;
	}
	.gtap-facts th {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gtap * {
		animation: none !important;
		transition: none !important;
	}
}

/* Naamhypothese
   ------------------------------------------------------------------
   Staat boven de statusregels, want op een voertuig zonder bevestigde naam
   is dit het eerste wat een lezer wil weten. Bewust niet in het roze van
   .gtap-pending: dat is een belofte, dit is een voorbehoud. */
.gtap-guess {
	max-width: var(--gtap-max);
	margin: 28px auto 0;
	padding: 22px max(16px, 2vw);
	border-left: 3px solid var(--gtap-border-soft);
	background: linear-gradient(100deg, var(--gtap-panel-2) 0%, var(--gtap-panel) 62%);
}
.gtap-guess__label {
	font-family: var(--gtap-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gtap-muted);
	margin: 0 0 8px;
}
.gtap-guess h2 {
	font-size: 1.5rem;
	margin: 0 0 10px;
}
.gtap-guess p {
	color: var(--gtap-muted-2);
	font-size: 0.94rem;
	line-height: 1.65;
	margin: 0 0 10px;
	max-width: 68ch;
}
.gtap-guess__confidence {
	font-family: var(--gtap-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.gtap-guess__promise {
	border-top: 1px solid var(--gtap-border);
	padding-top: 10px;
	margin-bottom: 0;
	font-size: 0.86rem;
}

/* De hero als wassing
   ------------------------------------------------------------------
   Zeventig van de achtentachtig uitsnedes zijn te klein of te staand voor een
   band van 1440x420. Die worden hier bewust onscherp: een zichtbaar
   decoratieve wassing liegt niet, een negen keer opgeblazen "foto" wel. Het
   scherpe frame staat eronder in .gtap-frame. */
.gtap-hero--wash .gtap-hero__img {
	/* Niet extra verdonkeren: de sluier hierboven doet dat al, en samen werd het
	   een zwart vlak. Alleen onscherp en iets ingehouden van kleur. */
	filter: blur(26px) saturate(0.75);
	/* Opschalen zodat de vervaagde rand buiten beeld valt. */
	transform: scale(1.25);
}
/* Zonder scherp beeld hoeft de band ook niet zo hoog: hij draagt alleen nog de
   titel, en het echte frame staat er vlak onder. */
.gtap-hero--bare,
.gtap-hero--wash {
	min-height: 260px;
}
/* En met een frame op de pagina draagt hij alleen nog de titel. Geen beeld, dus
   ook geen sluier nodig: die bestaat om tekst van een foto te scheiden. */
.gtap-hero--title {
	min-height: 0;
	padding-block: clamp(26px, 5vw, 54px);
	border-bottom: 1px solid var(--gtap-border);
}
.gtap-hero--title::before {
	display: none;
}
.gtap-hero--title .gtap-hero__title {
	text-shadow: none;
}
.gtap-hero--title .gtap-hero__make {
	text-shadow: none;
}

/* Het hoofdbeeld: het frame met een kader, het detail ernaast
   ------------------------------------------------------------------
   Stond hier eerst als de uitsnede op ware grootte, hooguit twee keer vergroot.
   Eerlijk, maar zichtbaar zacht: de mediaan is 557 px breed. Het hele frame is
   1920x1080 en wordt op deze kolom verkleind in plaats van uitvergroot, en dat
   is altijd scherp -- dus toont de pagina het frame, en wijst een kader aan
   waar het voertuig staat. De uitsnede blijft ernaast staan als detail: dat is
   het bewijs, en op ware grootte klopt het.

   De uitsnede-variant hieronder is de terugval voor zolang een frame nog niet
   in de mediabibliotheek staat. */
.gtap-frame {
	margin: 0 0 28px;
}
.gtap-frame__pair {
	display: grid;
	/* Het frame krijgt wat overblijft; het detail nooit meer dan 260 px, want
	   verder opblazen dan twee keer doen we niet en de helft is kleiner dan dat. */
	grid-template-columns: minmax(0, 1fr) minmax(130px, 260px);
	gap: 18px;
	/* Gecentreerd en niet bovenaan: een liggende uitsnede als de Sentinel is
	   260x81 en liet anders een halve kolom leegte onder zich. */
	align-items: center;
	padding: 18px;
	background: linear-gradient(180deg, var(--gtap-panel-2) 0%, var(--gtap-panel) 100%);
	border: 1px solid var(--gtap-border);
}
/* Het anker van het kader. De coördinaten zijn relatief aan het frame, dus dit
   element moet exact zo groot zijn als de foto -- geen padding, geen regelhoogte
   eronder. */
.gtap-frame__shot {
	position: relative;
	display: block;
	line-height: 0;
	/* Klemt de sluier van het kader hieronder binnen het beeld. */
	overflow: hidden;
}
.gtap-frame__shot img {
	display: block;
	width: 100%;
	height: auto;
}
.gtap-frame__marker {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid var(--gtap-provenance);
	/*
	 * Drie lagen, en alle drie doen werk:
	 *   binnen  een donkere haarlijn, zodat het kader ook op een lichte lucht leest
	 *   buiten  dezelfde haarlijn tegen een donkere ondergrond
	 *   spread  dempt alles buiten het kader, zonder het weg te gooien -- waar
	 *           het voertuig stond is de halve reden dat het frame er staat
	 */
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(0, 0, 0, 0.55),
		0 0 0 100vmax rgba(0, 0, 0, 0.34);
	pointer-events: none;
}
.gtap-frame__detail {
	margin: 0;
}
.gtap-frame__detail img {
	display: block;
	/* De bovengrens staat inline: de ware pixelbreedte van de uitsnede, hooguit
	   de kolombreedte. Meestal is dat smaller dan de kolom -- de helft van de
	   uitsnedes is kleiner dan 557 px -- vandaar dat hij zijn eigen breedte
	   houdt in plaats van te vullen. */
	width: 100%;
	height: auto;
	border: 1px solid var(--gtap-border);
	background: var(--gtap-panel-2);
}
.gtap-frame__detail figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	justify-content: space-between;
	margin-top: 8px;
	font-family: var(--gtap-mono);
	font-size: 0.64rem;
	color: var(--gtap-muted);
}
.gtap-frame__detail-label {
	color: var(--gtap-provenance);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Naast elkaar past niet meer: onder 900 px zou het frame smaller worden dan het
   detail dat het uitlicht -- op 400 px hield het er 52 van de 332 px over. Deze
   regels staan bewust NA de definities hierboven en niet in het mediablok
   halverwege dit bestand: gelijke specificiteit, dus daar verloor de override
   het van de latere regel en deed hij niets. */
@media (max-width: 900px) {
	.gtap-frame__pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.gtap-frame__detail img {
		margin-inline: auto;
	}
	.gtap-frame__detail figcaption {
		justify-content: center;
		gap: 2px 14px;
	}
}

/* De terugval: alleen de uitsnede, zolang het frame nog niet geüpload is. De
   breedtelimiet staat inline per beeld (twee keer de eigen pixelbreedte,
   hooguit 1180), want die verschilt per uitsnede en hoort dus bij het beeld en
   niet bij de stylesheet. */
.gtap-frame--crop .gtap-frame__stage {
	display: grid;
	place-items: center;
	padding: 20px;
	/* Een minimum, zodat een uitsnede van 96 px geen postzegelpodium krijgt. */
	min-height: 220px;
	background:
		linear-gradient(180deg, var(--gtap-panel-2) 0%, var(--gtap-panel) 100%);
	border: 1px solid var(--gtap-border);
}
.gtap-frame--crop .gtap-frame__stage img {
	display: block;
	width: 100%;
	height: auto;
}
/* Twee regels: herkomst links met het auteursrecht rechts, daaronder de
   uitleg over het formaat over de volle breedte. Met flex liepen die drie in
   elkaar over zodra een van de drie lang werd. */
.gtap-frame__cap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 18px;
	align-items: baseline;
	padding-top: 10px;
	border-top: 1px solid var(--gtap-border);
	margin-top: -1px;
}
.gtap-frame__note {
	grid-column: 1 / -1;
}
.gtap-frame__prov {
	font-family: var(--gtap-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--gtap-muted-2);
}
.gtap-frame__note {
	font-size: 0.78rem;
	color: var(--gtap-muted);
	max-width: 70ch;
}
.gtap-frame__rights {
	font-family: var(--gtap-mono);
	font-size: 0.68rem;
	color: var(--gtap-provenance);
	text-align: right;
}

/* ---------- het vergrootglas ----------
   Wat opengaat is het bronframe met het kader erop, niet de uitsnede. De
   markup is een gewone link; deze regels maken er een knop van die eruitziet
   als een beeld, en zonder javascript blijft die link gewoon werken. */
.gtap-frame__shot,
.gtap-frame__detail a,
.gtap-evidence a {
	display: block;
	position: relative;
}
.gtap-frame__shot {
	/* Blijft het anker van het kader; overflow klemt de sluier eromheen. */
	line-height: 0;
	overflow: hidden;
}
/* Het vergrootglas alleen aanbieden waar het ook werkt. Staat een frame nog
   niet in de mediabibliotheek, dan levert gtaplaybook_zoom_attrs() niets en
   blijft er een link over zonder adres; die hoort dan geen loep te tonen. */
.gtap-frame__shot[data-zoom],
.gtap-frame__detail a[data-zoom],
.gtap-evidence a[data-zoom] {
	cursor: zoom-in;
}
.gtap-zoom__hint {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
	padding: 3px 8px;
	font-family: var(--gtap-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--gtap-text);
	background: rgba(0, 0, 0, 0.62);
	border: 1px solid var(--gtap-border-soft);
	opacity: 0;
	transition: opacity 0.14s ease;
	pointer-events: none;
}
a:hover > .gtap-zoom__hint,
a:focus-visible > .gtap-zoom__hint {
	opacity: 1;
}
.gtap-frame__shot[data-zoom]:focus-visible,
.gtap-frame__detail a[data-zoom]:focus-visible,
.gtap-evidence a[data-zoom]:focus-visible {
	outline: 2px solid var(--gtap-provenance);
	outline-offset: 3px;
}

.gtap-zoom[open] {
	display: flex;
	flex-direction: column;
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000000;
	color: var(--gtap-text);
}
.gtap-zoom::backdrop {
	background: rgba(0, 0, 0, 0.92);
}
.gtap-zoom__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px max(12px, 2vw);
	border-bottom: 1px solid var(--gtap-border);
	flex-shrink: 0;
}
.gtap-zoom__count {
	margin: 0;
	font-family: var(--gtap-mono);
	font-size: 0.7rem;
	color: var(--gtap-muted);
}
/* Met !important, en dat is hier geen luiheid: Kadence kleurt elke <button> met
   zijn eigen knopstijl en won van deze regels -- het kruisje kwam roze gevuld
   in beeld. De dialoog hoort zwart te zijn, verder niets. */
.gtap-zoom__close,
.gtap-zoom__nav {
	appearance: none;
	background: rgba(0, 0, 0, 0.55) !important;
	border: 1px solid var(--gtap-border-soft) !important;
	border-radius: 0 !important;
	color: var(--gtap-text) !important;
	box-shadow: none !important;
	cursor: pointer;
}
.gtap-zoom__close {
	font-size: 1rem;
	line-height: 1;
	padding: 8px 12px;
}
.gtap-zoom__close:hover,
.gtap-zoom__nav:hover {
	border-color: var(--gtap-provenance) !important;
	color: var(--gtap-provenance) !important;
}
/* De hele middenzone is klikbaar om te sluiten, dus de figure vult wat er
   overblijft in plaats van alleen het beeld te omsluiten. */
.gtap-zoom__stage {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: max(12px, 2vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: zoom-out;
}
/* Krimpt mee met het beeld, want het kader rekent in procenten daarvan.
   fit-content en niet inline-block: dat laatste gaf een doos die zijn hoogte
   hield van vóór het laden, waarna het beeld eruit stak en het kader er los
   onder zweefde. */
.gtap-zoom__wrap {
	position: relative;
	display: block;
	width: fit-content;
	height: fit-content;
	max-width: 100%;
	/* De balk, het bijschrift en de marges eraf. */
	max-height: calc(100dvh - 190px);
	line-height: 0;
	cursor: default;
}
/* De doos vóór het eerste frame binnen is. Zonder dit klapt het toneel dicht
   tot een streepje en springt het open zodra de foto er staat -- op een koude
   cache een halve seconde lang. De breedte volgt uit de hoogte die het beeld
   straks krijgt maal zijn eigen verhouding, dus de doos staat meteen goed. */
.gtap-zoom.is-loading .gtap-zoom__wrap {
	width: min(100%, calc((100dvh - 190px) * var(--gtap-ratio, 1.78)));
	height: auto;
	background: rgba(255, 255, 255, 0.035);
	box-shadow: inset 0 0 0 1px var(--gtap-border-soft);
}
.gtap-zoom__wrap img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 190px);
	width: auto;
	height: auto;
}
.gtap-zoom__marker {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid var(--gtap-provenance);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
.gtap-zoom__cap {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	justify-content: center;
	text-align: center;
	font-family: var(--gtap-mono);
	font-size: 0.68rem;
	color: var(--gtap-muted-2);
	cursor: default;
}
.gtap-zoom__rights {
	color: var(--gtap-provenance);
}
.gtap-zoom__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	line-height: 1;
	padding: 14px 16px;
}
.gtap-zoom__nav--prev { left: max(8px, 1.5vw); }
.gtap-zoom__nav--next { right: max(8px, 1.5vw); }

@media (max-width: 700px) {
	/* Op een telefoon vallen de pijlen over het beeld; onderaan hebben ze
	   ruimte en zijn ze met een duim te raken. */
	.gtap-zoom__nav {
		top: auto;
		bottom: max(10px, 2vw);
		transform: none;
		font-size: 1.3rem;
		padding: 10px 20px;
	}
	.gtap-zoom__wrap img {
		max-height: calc(100dvh - 250px);
	}
}