/* Commanding the Century - website
   Kleuren uit het logo: messing/goud, legerrood, staalgrijs op een donker "stafkaart"-fond. */

@font-face { font-family: "Black Ops One"; src: url("../fonts/BlackOpsOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
	--bg: #0d0c0a;
	--bg-2: #15130f;
	--panel: #1c1914;
	--panel-2: #24201a;
	--line: #3a332a;
	--line-2: #554a3b;
	--text: #ece5d8;
	--text-2: #b9ae9c;
	--muted: #8a7f6e;
	--gold: #d9a441;
	--gold-2: #f2c96a;
	--red: #b3202a;
	--red-2: #d6343e;
	--steel: #9aa3ad;
	--green: #6f8f4e;
	--era1: #8b6b43;
	--era2: #6d7f5a;
	--era3: #5d6b4a;
	--era4: #4f6475;
	--era5: #3f5f7a;
	--radius: 6px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--max: 1240px;
	--intl: "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Segoe UI Arabic", "Noto Sans Hebrew", "Arial Hebrew", "Noto Sans Devanagari", "Nirmala UI", "Microsoft YaHei", "PingFang SC",
		"Hiragino Sans", "Yu Gothic UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK SC", sans-serif;
	--display: "Black Ops One", "Oswald", Impact, var(--intl);
	--head: "Oswald", "Arial Narrow", var(--intl);
	--body: "Plus Jakarta Sans", system-ui, -apple-system, var(--intl);
	--shade: 13, 12, 10;          /* rgb van het fond, voor overlays over beelden */
	--header-bg: rgba(13, 12, 10, .86);
	--pic-a: #1f1c17;
	--pic-b: #17150f;
	--footer-bg: #090807;
	--ghost-bg: rgba(0, 0, 0, .3);
	--hover: #fff;                /* tekst onder de muis */
	--hover-bg: rgba(255, 255, 255, .05);
	color-scheme: dark;
}

/* Licht thema: perkament en inkt. Volgt het systeem tenzij de bezoeker zelf kiest (data-theme). */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg: #f3ede1; --bg-2: #ebe2d0; --panel: #fffaf1; --panel-2: #f4ebdb; --line: #ddd1bb; --line-2: #c4b398;
		--text: #1e1a14; --text-2: #4a4235; --muted: #776b57; --gold: #9a6a10; --gold-2: #8a5c08; --red: #a51d26; --red-2: #c0303a;
		--shadow: 0 10px 30px rgba(60, 40, 10, .16); --shade: 243, 237, 225; --header-bg: rgba(243, 237, 225, .9);
		--pic-a: #f1e7d4; --pic-b: #e6dac3; --footer-bg: #e7dcc8; --ghost-bg: rgba(255, 255, 255, .55); --hover: #000; --hover-bg: rgba(60, 40, 10, .07);
		color-scheme: light;
	}
}
:root[data-theme="light"] {
		--bg: #f3ede1; --bg-2: #ebe2d0; --panel: #fffaf1; --panel-2: #f4ebdb; --line: #ddd1bb; --line-2: #c4b398;
		--text: #1e1a14; --text-2: #4a4235; --muted: #776b57; --gold: #9a6a10; --gold-2: #8a5c08; --red: #a51d26; --red-2: #c0303a;
		--shadow: 0 10px 30px rgba(60, 40, 10, .16); --shade: 243, 237, 225; --header-bg: rgba(243, 237, 225, .9);
		--pic-a: #f1e7d4; --pic-b: #e6dac3; --footer-bg: #e7dcc8; --ghost-bg: rgba(255, 255, 255, .55); --hover: #000; --hover-bg: rgba(60, 40, 10, .07);
		color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
	margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--body);
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
	background-image: radial-gradient(1200px 600px at 80% -10%, rgba(217, 164, 65, .07), transparent 60%),
		radial-gradient(900px 500px at -10% 30%, rgba(179, 32, 42, .05), transparent 60%);
}
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }   /* ook als een klasse display: flex/grid zet (filter in de eenhedenencyclopedie) */
a { color: var(--gold-2); text-decoration: none; }
a:hover { color: var(--hover); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; letter-spacing: .02em; line-height: 1.15; margin: 0 0 .5em; text-transform: uppercase; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: .03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.lead { font-size: 1.15rem; color: var(--text-2); max-width: 760px; }
.eyebrow { font: 600 .8rem/1 var(--head); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: inline-flex; gap: 10px; align-items: center; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
/* Visueel verborgen zonder negatieve offset: die maakt in rechts-naar-links (Arabisch) een scrollbare strook naast de pagina */
.sr-only, .hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 100; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ---------- kop en navigatie ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; gap: 2px; margin-inline-start: auto; }
.nav a { font: 500 .92rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 10px 11px; border-radius: 4px; position: relative; }
.nav a:hover { color: var(--hover); background: var(--hover-bg); }
.nav a[aria-current="page"] { color: var(--gold-2); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--red); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: 4px; padding: 8px 10px; font: 600 .85rem var(--head); letter-spacing: .12em; cursor: pointer; }
@media (max-width: 1240px) {
	.nav-toggle { display: block; }
	.nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 12px 16px; }
	.nav.open { display: flex; }
	.nav a { padding: 14px 10px; }
}

/* ---------- knoppen ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 .95rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; padding: 15px 24px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206; box-shadow: 0 6px 20px rgba(217, 164, 65, .25); }
.btn-gold:hover { color: #000; }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: var(--ghost-bg); }
.btn-ghost:hover { border-color: var(--gold); color: var(--hover); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- secties ---------- */
section { padding: 90px 0; position: relative; }
section.tight { padding: 60px 0; }
.band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 44px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } section { padding: 64px 0; } }

/* ---------- hero ---------- */
.hero { --text: #ece5d8; --text-2: #b9ae9c; --line-2: #554a3b; --ghost-bg: rgba(0, 0, 0, .3); --hover: #fff; color: var(--text);
	min-height: min(92vh, 900px); display: flex; align-items: flex-end; padding: 0 0 70px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(13, 12, 10, .35) 0%, rgba(13, 12, 10, .2) 40%, rgba(13, 12, 10, .92) 88%, rgba(var(--shade), 1) 100%),
		linear-gradient(90deg, rgba(13, 12, 10, .7), transparent 60%); }
.hero-logo { width: min(640px, 92%); margin: 0 0 18px -6px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .7)); }
.hero .lead { color: var(--text); font-size: 1.25rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.page-hero { padding: 120px 0 70px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero .bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--shade), .96) 0%, rgba(var(--shade), .78) 55%, rgba(var(--shade), .45) 100%), linear-gradient(0deg, var(--bg), transparent 40%); }

/* ---------- kerncijfers ---------- */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
.stats div { padding: 22px 16px; text-align: center; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font: 400 2.3rem/1 var(--display); color: var(--gold-2); }
.stats span { font: 500 .78rem/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(3, 1fr); } .stats div:nth-child(3) { border-right: 0; } .stats div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }

/* ---------- kaarten ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; }
.card .pad { padding: 22px 22px 20px; }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card img.shot { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-bottom: 1px solid var(--line); }
.feature .icon { font-size: 1.6rem; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; margin-bottom: 14px; background: var(--panel-2); }
.tag { display: inline-block; font: 600 .7rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--text-2); background: var(--ghost-bg); }
.tag.gold { border-color: rgba(217, 164, 65, .5); color: var(--gold-2); }
.tag.red { border-color: rgba(214, 52, 62, .5); color: #ff8a90; }

/* ---------- tijdlijn ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 10px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: linear-gradient(90deg, var(--era1), var(--era2), var(--era3), var(--era4), var(--era5)); }
.timeline a { display: block; padding: 0 12px 0 0; color: var(--text); }
.timeline .year { font: 400 1.9rem/1 var(--display); color: var(--gold-2); display: block; margin-bottom: 18px; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--gold); position: absolute; top: 28px; }
.timeline .name { font: 600 1.05rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .06em; display: block; margin: 22px 0 6px; }
.timeline .sub { color: var(--text-2); font-size: .9rem; }
.timeline > div { position: relative; }
.timeline img { border-radius: 4px; margin-top: 14px; border: 1px solid var(--line); aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .25s; }
.timeline a:hover img { transform: translateY(-3px); }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr; gap: 26px; } .timeline::before { left: 6px; right: auto; width: 2px; top: 0; bottom: 0; height: auto; background: linear-gradient(180deg, var(--era1), var(--era5)); } .timeline > div { padding-left: 32px; } .timeline .dot { left: 0; top: 8px; } }

/* ---------- tijdperk-hoofdstukken ---------- */
.era { padding: 100px 0 80px; border-top: 1px solid var(--line); }
.era-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.era-year { font: 400 clamp(4rem, 11vw, 8.5rem)/.85 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--gold); opacity: .9; }
.era-shot { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.era .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.unlock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 30px; }
.unlock { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 8px 8px 10px; text-align: center; font: 500 .78rem/1.25 var(--head); letter-spacing: .03em; color: var(--text-2); }
.unlock img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; }
.unlock:hover { border-color: var(--gold); color: var(--hover); }
@media (max-width: 860px) { .era-head { grid-template-columns: 1fr; gap: 26px; } }

/* evolutiematrix */
.evo { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.evo table { border-collapse: collapse; width: 100%; min-width: 860px; }
.evo th, .evo td { padding: 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.evo th { font: 600 .8rem/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: var(--panel-2); }
.evo th.row { text-align: left; color: var(--text); white-space: nowrap; }
.evo td img { width: 92px; height: 92px; object-fit: contain; margin: 0 auto 4px; }
.evo td span { font-size: .78rem; color: var(--text-2); display: block; line-height: 1.25; }
.evo td.carry { opacity: .28; }

/* ---------- volken ---------- */
.nation-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nation-pick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font: 500 .78rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); width: 112px; }
.nation-pick img { width: 64px; height: 43px; object-fit: cover; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.nation-pick a:hover { border-color: var(--gold); color: var(--hover); }
.nation { padding: 100px 0; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
.nation-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; flex-wrap: wrap; }
.nation-head .flag { width: 120px; border-radius: 3px; box-shadow: var(--shadow); outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px; }
.nation-head h2 { margin: 0; }
.nation-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; }
@media (max-width: 960px) { .nation-grid { grid-template-columns: 1fr; } }
.era-flags { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 22px 0; }
.era-flags div { text-align: center; font-size: .74rem; color: var(--text-2); line-height: 1.25; }
.era-flags img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 2px; margin-bottom: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px; }
.era-flags b { display: block; color: var(--gold); font: 400 .9rem var(--display); }
.chronicle { border-inline-start: 2px solid var(--line-2); padding-inline-start: 22px; margin: 22px 0; }
.chronicle div { position: relative; margin-bottom: 18px; }
.chronicle div::before { content: ""; position: absolute; inset-inline-start: -29px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.chronicle b { font: 600 .82rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); display: block; margin-bottom: 5px; }
.chronicle p { margin: 0; color: var(--text-2); }
.lineup { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: radial-gradient(ellipse at 50% 85%, rgba(217, 164, 65, .12), transparent 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px 10px; }
.lineup figure { margin: 0; text-align: center; }
.lineup img { width: 100%; aspect-ratio: 3/4; object-fit: contain; }
.lineup figcaption { font: 400 .95rem/1 var(--display); color: var(--gold); margin-top: 4px; }
.arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.arch figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 8px; text-align: center; }
.arch img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.arch figcaption { font-size: .74rem; color: var(--text-2); line-height: 1.25; margin-top: 4px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .92rem; margin: 18px 0; }
.facts dt { color: var(--muted); font: 500 .8rem/1.6 var(--head); letter-spacing: .1em; text-transform: uppercase; }
.facts dd { margin: 0; }
.voices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.voice { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 30px; padding: 7px 14px 7px 8px; font: 500 .86rem var(--body); cursor: pointer; text-align: left; }
.voice::before { content: "▶"; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1206; font-size: .62rem; flex-shrink: 0; }
.voice.playing { border-color: var(--gold); }
.voice.playing::before { content: "■"; background: var(--red-2); color: #fff; }
.voice small { color: var(--muted); font-size: .72rem; display: block; }
.fiction-note { border: 1px dashed var(--line-2); padding: 12px 16px; border-radius: 5px; color: var(--text-2); font-size: .9rem; }

/* ---------- eenheden ---------- */
.filters { position: sticky; top: 68px; z-index: 20; background: rgba(var(--shade), .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 14px 0; }
.filters .wrap { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 .8rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 30px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.search { background: var(--panel); border: 1px solid var(--line-2); color: var(--text); border-radius: 30px; padding: 8px 14px; font: inherit; font-size: .9rem; min-width: 200px; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; padding: 34px 0 80px; }
.unit { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, transform .15s; text-align: left; color: inherit; font: inherit; padding: 0; }
.unit:hover { border-color: var(--gold); transform: translateY(-2px); }
.unit .pic { background: radial-gradient(ellipse at 50% 80%, rgba(217, 164, 65, .14), transparent 70%), linear-gradient(180deg, var(--pic-a), var(--pic-b)); aspect-ratio: 4/3; display: grid; place-items: center; position: relative; }
.unit .pic img { width: 82%; height: 88%; object-fit: contain; }
.unit .era-badge { position: absolute; inset-inline-start: 10px; top: 10px; }
.unit .body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.unit h3 { font-size: 1rem; margin: 0; letter-spacing: .03em; }
.unit .desc { font-size: .83rem; color: var(--text-2); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bars { display: grid; gap: 4px; margin-top: auto; }
.bar { display: grid; grid-template-columns: 62px 1fr 42px; gap: 8px; align-items: center; font: 500 .7rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bar i { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; display: block; }
.bar i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.bar em { font-style: normal; color: var(--text-2); text-align: right; }
.cost { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: var(--text-2); }
.cost span { white-space: nowrap; }
.res { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.res.food { background: #d0623a; } .res.wood { background: #8a5a2b; } .res.gold { background: #f2c94c; } .res.steel { background: #9fb0c0; } .res.oil { background: #3b3b3b; border: 1px solid #777; }
.vs { display: flex; flex-wrap: wrap; gap: 4px; }
.vs .tag { font-size: .62rem; padding: 4px 6px; }
.count-note { color: var(--muted); font-size: .9rem; }
.empty { padding: 60px 0; text-align: center; color: var(--muted); display: none; }

/* dialoog */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 0; max-width: 880px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
dialog::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(3px); }
.dlg { display: grid; grid-template-columns: 1fr 1.1fr; }
.dlg .pic { background: radial-gradient(ellipse at 50% 75%, rgba(217, 164, 65, .18), transparent 70%), var(--pic-b); display: grid; place-items: center; padding: 20px; min-height: 320px; }
.dlg .pic img { max-height: 380px; object-fit: contain; }
.dlg .info { padding: 26px 26px 22px; }
.dlg table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 12px 0; }
.dlg td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.dlg td:first-child { color: var(--muted); font: 500 .76rem var(--head); letter-spacing: .1em; text-transform: uppercase; width: 44%; }
.dlg .close { position: absolute; inset-inline-end: 10px; top: 10px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); color: var(--text); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.dlg .line-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dlg .line-nav button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px; cursor: pointer; }
.dlg .line-nav button[aria-current="true"] { border-color: var(--gold); }
.dlg .line-nav img { width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 720px) { .dlg { grid-template-columns: 1fr; } .dlg .pic { min-height: 220px; } }

/* ---------- gebouwen ---------- */
.bld { display: grid; grid-template-columns: 150px 1fr; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.bld img { width: 150px; height: 150px; object-fit: contain; }
.bld h3 { font-size: 1.05rem; margin-bottom: 4px; }
.bld p { font-size: .88rem; color: var(--text-2); margin-bottom: 8px; }
@media (max-width: 520px) { .bld { grid-template-columns: 1fr; } .bld img { margin: 0 auto; } }
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.strip figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 10px; text-align: center; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.strip figcaption { font-size: .78rem; color: var(--text-2); line-height: 1.3; }
.strip figcaption b { display: block; font: 400 1rem var(--display); color: var(--gold); }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.tech-branch { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.tech-branch h3 { display: flex; align-items: center; gap: 10px; }
.tech { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.tech:last-child { border-bottom: 0; }
.tech b { font-weight: 600; }
.tech .lv { color: var(--muted); font-size: .78rem; text-align: right; white-space: nowrap; }
.tech p { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: .82rem; }

/* ---------- slagveld / features ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } .split.rev > :first-child { order: 0; } }
.split img, .shot-frame { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); width: 100%; }
ul.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
ul.ticks li { padding-inline-start: 26px; position: relative; margin-bottom: 8px; color: var(--text-2); }
ul.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 9px; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
ul.ticks b { color: var(--text); }
.daynight { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); aspect-ratio: 16/9; background: #000; }
.daynight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.daynight img.on { opacity: 1; }
.daynight .clock { position: absolute; left: 14px; top: 14px; background: rgba(0, 0, 0, .65); padding: 8px 12px; border-radius: 4px; font: 600 .85rem var(--head); letter-spacing: .12em; text-transform: uppercase; }
.dn-control { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.dn-control input { flex: 1; accent-color: var(--gold); }
.dn-control span { font: 600 .8rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font: 600 .78rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: var(--panel-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
kbd { font: 600 .8rem var(--head); background: var(--panel-2); border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 4px; padding: 2px 7px; color: var(--text); white-space: nowrap; }
.callout { border-inline-start: 3px solid var(--red); background: var(--panel); padding: 16px 20px; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); color: var(--text-2); }

/* ---------- media ---------- */
.gallery { columns: 3 320px; column-gap: 14px; }
.gallery a { display: block; margin-bottom: 14px; break-inside: avoid; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.gallery img { width: 100%; transition: transform .3s; }
.gallery a:hover img { transform: scale(1.03); }
.gallery a span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); font: 500 .82rem var(--head); letter-spacing: .08em; text-transform: uppercase; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 86vh; border-radius: 4px; box-shadow: var(--shadow); }
.lightbox p { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: var(--text-2); margin: 0; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-2); color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; }
.lightbox .x { top: 16px; right: 16px; }
.lightbox .prev { left: 16px; top: 50%; }
.lightbox .next { right: 16px; top: 50%; }
.video-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #000; }

/* ---------- voet ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--footer-bg); padding: 54px 0 34px; color: var(--text-2); font-size: .9rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.site-footer h4 { font-size: .85rem; letter-spacing: .16em; color: var(--gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--hover); }
.site-footer .c4m { width: 190px; margin-bottom: 14px; }
.site-footer .legal { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px; font-size: .78rem; color: var(--muted); }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* inschuiven bij scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 640px) {
	.filters { position: static; }
	.unit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.unit .body { padding: 10px; }
	.unit .desc, .unit .vs { display: none; }
	.bar { grid-template-columns: 48px 1fr 30px; gap: 5px; font-size: .62rem; }
	.lineup { gap: 0; padding: 10px 2px 8px; }
	.arch { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- taal en thema ---------- */
.tools { display: flex; align-items: center; gap: 8px; margin-inline-start: 10px; }
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; font: 600 .82rem/1 var(--head); letter-spacing: .1em; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 10px; white-space: nowrap; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch .lang-name { display: none; }
.lang-switch[open] summary, .lang-switch summary:hover { color: var(--text); border-color: var(--gold); }
.lang-switch ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--shadow); min-width: 190px; max-height: 70vh; overflow: auto; z-index: 60; }
.lang-switch li a { display: block; padding: 8px 12px; border-radius: 4px; color: var(--text-2); font-size: .92rem; }
.lang-switch li a:hover { background: var(--panel-2); color: var(--text); }
.lang-switch li a[aria-current] { color: var(--gold-2); font-weight: 700; }
.theme-toggle { width: 36px; height: 34px; border: 1px solid var(--line-2); border-radius: 4px; background: none; color: var(--text-2); cursor: pointer; font-size: 1rem; display: grid; place-items: center; }
.theme-toggle:hover { color: var(--text); border-color: var(--gold); }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: inline; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .theme-toggle .sun { display: inline; }
	:root:not([data-theme]) .theme-toggle .moon { display: none; }
}
@media (max-width: 1240px) { .tools { margin-inline-start: auto; } }

/* Schriften zonder hoofdletters of met verbonden letters: geen spatiëring forceren, geen Latijns sierlettertype voor koppen */
html:is([lang="ar"], [lang="he"], [lang="hi"], [lang="zh"], [lang="ja"], [lang="ko"]) * { letter-spacing: 0 !important; }
html:is([lang="ar"], [lang="he"], [lang="hi"], [lang="zh"], [lang="ja"], [lang="ko"]) :is(h1, .era-year) { font-family: var(--head); font-weight: 700; }
html[dir="rtl"] .timeline::before { background: linear-gradient(270deg, var(--era1), var(--era2), var(--era3), var(--era4), var(--era5)); }
html[dir="rtl"] .hero::after { background: linear-gradient(180deg, rgba(13, 12, 10, .35) 0%, rgba(13, 12, 10, .2) 40%, rgba(13, 12, 10, .92) 88%, rgba(var(--shade), 1) 100%), linear-gradient(270deg, rgba(13, 12, 10, .7), transparent 60%); }
html[dir="rtl"] .page-hero::after { background: linear-gradient(270deg, rgba(var(--shade), .96) 0%, rgba(var(--shade), .78) 55%, rgba(var(--shade), .45) 100%), linear-gradient(0deg, var(--bg), transparent 40%); }

/* ---------- formulieren ---------- */
.ctc-form .pad { padding: 26px; }
.field { margin: 0 0 16px; border: 0; padding: 0; }
.field label, .field legend { display: block; font: 600 .8rem/1.3 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field select, .field textarea {
	width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 4px; padding: 11px 12px; font: inherit; font-size: .95rem; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, .18); }
.field .invalid, .field input.invalid, .field textarea.invalid { border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(214, 52, 62, .15); }
.kinds { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.kinds legend { width: 100%; }
.kinds label { display: inline-flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font: 500 .95rem var(--body); color: var(--text); margin: 0; cursor: pointer; }
.kinds input { accent-color: var(--gold); }
.dropzone { position: relative; border: 2px dashed var(--line-2); border-radius: 6px; padding: 22px 16px; text-align: center; background: var(--bg); transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--gold); background: var(--panel-2); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone p { margin: 0; color: var(--text-2); font-size: .92rem; }
.file-list { list-style: none; padding: 0; margin: 8px 0 0; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 6px; font-size: .88rem; background: var(--panel-2); }
.file-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li small { color: var(--muted); }
.file-list button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .9rem; }
.file-list button:hover { color: var(--red-2); }
.form-note { font-size: .88rem; }
.form-status { margin: 14px 0 0; font-size: .95rem; min-height: 1.5em; }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--red-2); }
:root[data-theme="light"] .form-status.ok { color: #3f6b22; }
button[disabled] { opacity: .6; cursor: wait; }

/* ---------- handleiding ---------- */
.manual { display: grid; grid-template-columns: 250px 1fr; gap: 48px; padding-top: 50px; padding-bottom: 80px; }
.toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; border-inline-end: 1px solid var(--line); padding-inline-end: 18px; }
.toc b { font: 600 .8rem var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.toc ol { padding-inline-start: 20px; margin: 10px 0 0; font-size: .9rem; }
.toc li { margin-bottom: 6px; color: var(--muted); }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--gold-2); }
.manual-body section { padding: 0 0 40px; scroll-margin-top: 90px; }
.manual-body h2 { font-size: 1.7rem; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.manual-body p, .manual-body li { color: var(--text-2); }
.manual-body .table-wrap { margin: 14px 0 18px; }
.manual-body code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; font-size: .88em; }
.faq dt { font-weight: 700; color: var(--text); margin-top: 14px; }
.faq dd { margin: 4px 0 0; color: var(--text-2); }
@media (max-width: 900px) { .manual { grid-template-columns: 1fr; gap: 20px; } .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } }

/* Grid-kolommen mogen smaller worden dan hun inhoud (1920px-screenshots), anders duwen ze de pagina breder dan het venster */
.split > *, .era-head > *, .nation-grid > *, .grid > *, .manual > *, .dlg > * { min-width: 0; }