/* The Medieval Kingdoms wiki. The same look as Chancery and the Discord panels: warm near-black
   with the game's panel face, the kit's gold (#D6C59C) only where it matters, Lora for titles,
   IBM Plex Sans to read, the diamond divider, the kit's frame round the info box. Dark only,
   like the game. Fonts are served from here, so nothing loads from anywhere else. */

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora-latin-wght-normal.woff2) format('woff2'); 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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 Sans'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #0c0b0a;
  --surface: #151311;
  --surface-2: #1b1916;
  --line: #262320;
  --line-2: #322e29;
  --line-3: #48423a;
  --text: #ece5d5;
  --text-2: #b4a991;
  --text-3: #948a73;
  --gold: #d6c59c;
  --gold-hi: #ebdcb3;
  --gold-lo: #a8946a;
  --gold-line: rgba(214, 197, 156, 0.3);
  --gold-wash: rgba(214, 197, 156, 0.08);
  --pewter: #6e6352;
  --edge: #0b0908;
  --display: 'Lora', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --face: url(/kit/face.webp);
  --plate: linear-gradient(rgba(25, 22, 19, 0.9), rgba(18, 16, 14, 0.94)), var(--face);
  --plate-edge: inset 0 1px 0 rgba(236, 222, 186, 0.055), inset 0 0 0 1px rgba(214, 197, 156, 0.07), 0 1px 0 rgba(0, 0, 0, 0.6), 0 14px 28px -18px rgba(0, 0, 0, 0.9);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); background-image: linear-gradient(rgba(11, 10, 8, 0.86), rgba(11, 10, 8, 0.86)), var(--face); background-size: auto, 400px; color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(214, 197, 156, 0.35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 140ms ease, text-decoration-color 140ms ease; }
a:hover { color: #fff3d6; text-decoration-color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(214, 197, 156, 0.28); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.25; margin: 0; color: var(--text); }
p { margin: 0 0 14px; }
img { max-width: 100%; }
small { font-size: 13px; }
.t3 { color: var(--text-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; }
.skip { position: fixed; left: 12px; top: -48px; z-index: 100; background: var(--gold); color: #1a150b; padding: 7px 12px; border-radius: 3px; font-weight: 600; text-decoration: none; transition: top 120ms ease; }
.skip:focus { top: 12px; }
kbd { display: inline-block; font: 500 13px/1.5 var(--sans); color: var(--text); padding: 0 6px; border-radius: 3px; background: linear-gradient(#2a2620, #1f1c18); box-shadow: inset 0 1px 0 rgba(236, 222, 186, 0.08), inset 0 0 0 1px rgba(214, 197, 156, 0.16), 0 1px 0 #000; white-space: nowrap; }

/* ------------------------------------------------------------------ the divider and frame */
.rule { display: flex; align-items: center; height: 10px; width: 168px; }
.rule span { flex: 1; height: 1px; background: var(--pewter); transform-origin: center; animation: draw 260ms var(--ease) backwards; }
.rule span:first-of-type { transform-origin: right; }
.rule span:last-of-type { transform-origin: left; }
.rule b { width: 7px; height: 7px; margin: 0 6px; flex: none; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--edge); }
.rule i { width: 4px; height: 4px; margin: 0 3px; flex: none; background: var(--gold-lo); transform: rotate(45deg); }
@keyframes draw { from { transform: scaleX(0); } }
.framed { position: relative; }
.framed::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 12px solid transparent; border-image: url(/kit/frame.webp) 24 stretch; opacity: 0.85; }

/* ------------------------------------------------------------------ top */
.top { position: sticky; top: 0; z-index: 20; background: rgba(13, 12, 10, 0.86); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(214, 197, 156, 0.06); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 34px; height: 34px; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(214, 197, 156, 0.28); }
.brand b { display: block; font: 600 13px/1.1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hi); }
.brand small { display: block; font: 500 10.5px/1.2 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.brand:hover b { color: #fff3d6; }
.site-nav { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { display: block; padding: 8px 12px 10px; color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; position: relative; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current] { color: var(--gold-hi); }
.site-nav a[aria-current]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--gold); border-radius: 2px 2px 0 0; }

/* ------------------------------------------------------------------ search */
.search { position: relative; flex: 1; max-width: 460px; margin-left: auto; display: flex; align-items: center; }
.search > svg { position: absolute; left: 12px; color: var(--text-3); pointer-events: none; }
.search input { width: 100%; height: 38px; padding: 0 40px 0 38px; font: inherit; font-size: 15px; color: var(--text); background: rgba(8, 7, 6, 0.65); border: 1px solid var(--line-2); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55); outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; -webkit-appearance: none; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--gold-line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--gold-wash); }
.search input::-webkit-search-cancel-button { display: none; }
.search > kbd { position: absolute; right: 9px; font-size: 12px; color: var(--text-3); }
.search.big { max-width: 560px; margin: 0; }
.search.big input { height: 50px; font-size: 16.5px; padding-left: 44px; }
.search.big > svg { left: 15px; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background-color: #1d1a16; background-image: var(--plate); background-size: auto, 400px; border: 1px solid #000; border-radius: 3px; box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(214, 197, 156, 0.1); padding: 6px; max-height: min(70vh, 480px); overflow-y: auto; animation: open 180ms var(--ease); }
.results a { display: flex; align-items: baseline; gap: 10px; padding: 9px 11px; border-radius: 3px; text-decoration: none; color: var(--text); }
.results a b { font-weight: 500; }
.results a small { margin-left: auto; color: var(--text-3); font-size: 12px; flex: none; font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.results a.on, .results a:hover { background: linear-gradient(90deg, rgba(214, 197, 156, 0.12), rgba(214, 197, 156, 0.02)); color: var(--gold-hi); }
.results .none { padding: 12px; color: var(--text-3); }
.results mark { background: none; color: var(--gold-hi); }
@keyframes open { from { opacity: 0; transform: translateY(6px); } }
.page-search { margin-bottom: 24px; }
.page-search { flex-wrap: wrap; }
.page-search .results, .page-search .results[hidden] { position: static; flex-basis: 100%; animation: none; margin-top: 10px; max-height: none; }
.page-search .results[hidden] { display: none; }

/* ------------------------------------------------------------------ page */
main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 30px 24px 56px; animation: page-in 260ms var(--ease) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--text-3); margin-bottom: 10px; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--gold-hi); }
.crumbs svg { color: var(--text-3); }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: clamp(28px, 4.2vw, 38px); letter-spacing: 0.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.title-rule { margin: 12px 0 0; }
.lead { color: var(--text-2); font-size: 17px; margin: 14px 0 0; max-width: 68ch; }
.item-body > .lead { margin-top: 0; color: var(--text); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 26px; font-size: 14px; }
.toc span { font: 600 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-right: 6px; }
.toc a { padding: 4px 10px; border-radius: 3px; text-decoration: none; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.toc a:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-line); }

/* the written page */
.article { max-width: 760px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 23px; margin: 36px 0 12px; padding-top: 4px; }
.prose h3 { font-size: 18.5px; margin: 26px 0 8px; }
.prose h4 { font-size: 16px; margin: 20px 0 6px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 5px 0; }
.prose ul li::marker { content: '\25C6  '; color: var(--gold-lo); font-size: 0.7em; }
.prose ul.lines { list-style: none; padding-left: 0; }
.prose ul.lines li { position: relative; padding-left: 20px; }
.prose ul.lines li::marker { content: none; }
.prose ul.lines li::before { content: ''; position: absolute; left: 3px; top: 0.66em; width: 6px; height: 6px; background: var(--gold-lo); transform: rotate(45deg); }
.prose ol li::marker { color: var(--gold); font-family: var(--display); font-weight: 600; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .small, p.small { font-size: 13.5px; color: var(--text-3); }
.note { margin: 0 0 18px; padding: 12px 16px; border-left: 2px solid var(--gold-lo); background: var(--gold-wash); border-radius: 0 3px 3px 0; }
.note p { margin: 4px 0; }
.prose .rule { margin: 28px 0; }
.intro { margin-bottom: 28px; color: var(--text-2); }

/* sections of an item page */
.part { margin-top: 34px; }
.part > h2 { font-size: 22px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.part > h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.facts { list-style: none; margin: 0 0 8px; padding: 0; }
.facts li { position: relative; padding-left: 20px; margin: 7px 0; }
.facts li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 6px; height: 6px; background: var(--gold-lo); transform: rotate(45deg); }

/* an item: the info box at the top right, the text beside it */
.item { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'head head' 'body box'; column-gap: 40px; align-items: start; }
.item > .crumbs, .item > .page-head { grid-column: 1 / -1; }
.item > .page-head { grid-area: head; }
.item-body { grid-area: body; min-width: 0; }
.infobox { grid-area: box; background-color: var(--surface); background-image: var(--plate); background-size: auto, 400px; border: 1px solid #000; border-radius: 3px; box-shadow: var(--plate-edge); padding: 22px 22px 18px; position: sticky; top: 112px; animation: settle 300ms var(--ease) 60ms backwards; }
.infobox h2 { font-size: 18px; text-align: center; margin-bottom: 14px; }
.infobox figure { margin: 0 0 16px; display: grid; justify-items: center; gap: 8px; padding: 16px 0 14px; border-top: 1px solid rgba(214, 197, 156, 0.08); border-bottom: 1px solid rgba(214, 197, 156, 0.08); }
.infobox figcaption { color: var(--text-2); font: italic 500 15px var(--display); text-align: center; }
.infobox dl { margin: 0; display: grid; gap: 0; }
.infobox dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(214, 197, 156, 0.06); font-size: 14.5px; }
.infobox dl > div:last-child { border-bottom: 0; }
.infobox dt { color: var(--text-3); }
.infobox dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.infobox .btn { margin-top: 16px; }
.emblem { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 197, 156, 0.1), transparent 70%); }
.type-badge { width: 64px; height: 64px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.swatch { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; box-shadow: 0 0 0 1px #000; border-radius: 2px; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }

/* flags */
.flag { display: block; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }
.flag.lg { width: 132px; height: 176px; }
.flag.sm { width: 36px; height: 48px; flex: none; }
.flag.xs { width: 18px; height: 24px; flex: none; }
img.flag.lg { width: 200px; height: auto; max-height: 200px; }
img.flag.sm { width: 48px; height: 48px; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 3px; font: 500 15px var(--sans); color: var(--text); text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.75); background: linear-gradient(#25221d, #1b1915); box-shadow: inset 0 1px 0 rgba(236, 222, 186, 0.07), inset 0 0 0 1px rgba(214, 197, 156, 0.12), 0 1px 1px rgba(0, 0, 0, 0.4); transition: box-shadow 160ms ease, background 160ms ease, transform 100ms ease; }
.btn:hover { color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(236, 222, 186, 0.09), inset 0 0 0 1px rgba(214, 197, 156, 0.3), 0 1px 1px rgba(0, 0, 0, 0.4); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#e6d8b2, #cbb98c); border-color: #3a2f1a; color: #1a140a; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 246, 222, 0.35); box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.55), inset 0 -1px 0 rgba(110, 88, 44, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55); }
.btn.primary:hover { background: linear-gradient(#efe3c0, #d6c59c); color: #1a140a; }
.btn.primary svg { color: #3a2d14; }
.btn.block { display: flex; width: 100%; }
.show-more { display: block; margin: 12px 0 0; padding: 4px 0; background: none; border: 0; color: var(--gold); font: 500 14px var(--sans); cursor: pointer; }
.show-more:hover { color: var(--gold-hi); }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin: 0 0 8px; border-radius: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
table.data, table.plain { background-color: var(--surface); background-image: var(--plate); background-size: auto, 400px; box-shadow: var(--plate-edge); border: 1px solid #000; }
th { text-align: left; font-weight: 500; font-size: 13px; color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid rgba(214, 197, 156, 0.1); white-space: nowrap; background: rgba(0, 0, 0, 0.18); }
td { padding: 10px 14px; border-bottom: 1px solid rgba(214, 197, 156, 0.06); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover td { background: rgba(214, 197, 156, 0.035); }
th.right, td.right { text-align: right; }
th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: inherit; }
th button:hover { color: var(--text); }
th button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
th button i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--line-3); transition: transform 160ms ease; }
th[aria-sort] { color: var(--gold-hi); }
th[aria-sort] button i { border-top-color: var(--gold); }
th[aria-sort='ascending'] button i { transform: rotate(180deg); }
td a { text-decoration-color: transparent; }
td a:hover { text-decoration-color: var(--gold); }
.cell-icon { display: inline-flex; align-items: center; gap: 9px; }
.type-icon { flex: none; opacity: 0.9; }
tr.more[hidden] { display: none; }

/* ------------------------------------------------------------------ lists and grids */
.plain-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.type-head { display: flex; align-items: center; gap: 9px; font-size: 16px; margin: 18px 0 8px; }
.type-head a { color: var(--text); text-decoration: none; }
.type-head a:hover { color: var(--gold-hi); }
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { padding: 5px 11px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; }
.pill-list small { color: var(--text-3); margin-left: 4px; }

.nation-grid, .type-grid, .map-grid, .tiles { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.nation-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nation-grid a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: var(--text); border-radius: 3px; background-color: var(--surface); background-image: var(--plate); background-size: auto, 400px; box-shadow: var(--plate-edge); border: 1px solid #000; transition: box-shadow 160ms ease, transform 160ms var(--ease); }
.nation-grid b { display: block; font: 600 16px/1.2 var(--display); }
.nation-grid small { display: block; color: var(--text-3); margin-top: 2px; }
.nation-grid a:hover, .type-grid a:hover, .map-grid a:hover, .tiles a:hover, .chapters a:hover, .newhere a:hover { box-shadow: inset 0 1px 0 rgba(236, 222, 186, 0.07), inset 0 0 0 1px var(--gold-line), 0 10px 22px -12px rgba(0, 0, 0, 0.9); transform: translateY(-2px); color: var(--gold-hi); }
.type-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 10px; }
.map-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.type-grid a, .map-grid a, .tiles a { display: flex; flex-direction: column; gap: 6px; padding: 18px; text-decoration: none; color: var(--text); border-radius: 3px; background-color: var(--surface); background-image: var(--plate); background-size: auto, 400px; box-shadow: var(--plate-edge); border: 1px solid #000; height: 100%; transition: box-shadow 160ms ease, transform 160ms var(--ease); }
.type-grid b, .map-grid b, .tiles b { font: 600 18px/1.25 var(--display); margin-top: 6px; }
.type-grid small, .map-grid small, .tiles small { color: var(--text-3); font-size: 14px; }

.medal-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px 8px; }
.medal-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13px; color: var(--text-2); line-height: 1.3; }
.medal-grid img { width: 72px; height: 72px; image-rendering: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); transition: transform 180ms var(--ease); }
.medal-grid li:hover img { transform: translateY(-2px) scale(1.06); }
.medal-nations details { border-bottom: 1px solid rgba(214, 197, 156, 0.08); }
.medal-nations summary { display: flex; align-items: center; gap: 12px; padding: 12px 4px; cursor: pointer; list-style: none; }
.medal-nations summary::-webkit-details-marker { display: none; }
.medal-nations summary b { font: 600 17px var(--display); }
.medal-nations summary small { color: var(--text-3); }
.medal-nations summary .chev { margin-left: auto; color: var(--text-3); transition: transform 200ms var(--ease); }
.medal-nations details[open] .chev { transform: rotate(180deg); }
.medal-nations summary:hover b { color: var(--gold-hi); }
.medal-nations .medal-grid { padding: 6px 0 16px; animation: settle 240ms var(--ease); }

/* the campaign */
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 680px; counter-reset: c; }
.chapters a { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: var(--text); border-radius: 3px; background-color: var(--surface); background-image: var(--plate); background-size: auto, 400px; box-shadow: var(--plate-edge); border: 1px solid #000; transition: box-shadow 160ms ease, transform 160ms var(--ease); }
.chapters b { font: 600 17px var(--display); }
.chapters svg { margin-left: auto; color: var(--text-3); }
.n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; font: 600 14px var(--display); color: var(--gold); position: relative; }
.n::before { content: ''; position: absolute; inset: 3px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--gold-line); border-radius: 2px; }
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.prev-next a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 160ms ease; }
.prev-next a:hover { box-shadow: inset 0 0 0 1px var(--gold-line); color: var(--gold-hi); }
.prev-next a.next { justify-content: flex-end; text-align: right; grid-column: 2; }
.prev-next small { display: block; font: 600 10.5px/1.4 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.path-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(214, 197, 156, 0.1); }
.path-next > span { font: 600 11px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }

/* the box of relatives at the bottom */
.navbox { margin-top: 52px; padding: 20px 22px; border-radius: 3px; background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(214, 197, 156, 0.08); }
.navbox > h2 { font: 600 11.5px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lo); margin-bottom: 14px; }
.navbox-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid rgba(214, 197, 156, 0.06); }
.navbox-row:first-of-type { border-top: 0; }
.navbox-row:not(:has(h3)) { grid-template-columns: 1fr; }
.navbox h3 { font: 500 13.5px var(--sans); color: var(--text-3); padding-top: 1px; }
.navbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14.5px; }
.navbox a { color: var(--text-2); text-decoration: none; }
.navbox a:hover { color: var(--gold-hi); }
.navbox strong { color: var(--gold-hi); font-weight: 600; }

/* ------------------------------------------------------------------ front page */
.front main { padding-top: 24px; }
.hero { position: relative; margin-bottom: 28px; border-radius: 3px; overflow: hidden; border: 1px solid #000; background: #0a0908 url(/art/clash.webp) center 30% / cover no-repeat; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 9, 8, 0.94) 0%, rgba(10, 9, 8, 0.72) 48%, rgba(10, 9, 8, 0.3) 100%), linear-gradient(0deg, rgba(10, 9, 8, 0.7), transparent 60%); }
.hero-in { position: relative; z-index: 1; padding: 56px 48px 52px; max-width: 640px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: 0.01em; text-shadow: 0 2px 0 #000; }
.hero-rule { margin: 14px 0 16px; }
.hero p { color: var(--text-2); font-size: 17.5px; margin-bottom: 24px; }
.newhere { margin-bottom: 30px; }
.newhere h2, .front-nations h2 { font: 600 12px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lo); margin-bottom: 14px; }
.newhere ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.newhere a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px; height: 100%; text-decoration: none; color: var(--text); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 160ms ease, transform 160ms var(--ease); }
.newhere .n { grid-row: 1 / 3; }
.newhere b { font: 600 16px/1.25 var(--display); }
.newhere small { color: var(--text-3); font-size: 13px; line-height: 1.35; }
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 36px; }
.tiles svg { width: 30px; height: 30px; }
.banner-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 8px; }
.banner-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text-2); font-size: 13px; text-align: center; line-height: 1.25; }
.banner-row a:hover { color: var(--gold-hi); }
.banner-row .flag { transition: transform 180ms var(--ease); }
.banner-row a:hover .flag { transform: translateY(-3px); }

/* settling into place: grids and rows arrive one after another, the first few only */
.tiles li, .nation-grid li, .type-grid li, .map-grid li, .newhere li, .chapters li { animation: settle 280ms var(--ease) backwards; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(2) { animation-delay: 30ms; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(3) { animation-delay: 60ms; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(4) { animation-delay: 90ms; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(5) { animation-delay: 120ms; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(6) { animation-delay: 150ms; }
:is(.tiles, .nation-grid, .type-grid, .map-grid, .newhere ol, .chapters) li:nth-child(n+7) { animation-delay: 180ms; }

/* ------------------------------------------------------------------ foot */
.foot { border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(214, 197, 156, 0.06); background: rgba(0, 0, 0, 0.25); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 26px 24px 34px; color: var(--text-2); font-size: 14px; }
.foot-rule { margin-bottom: 16px; }
.foot p { margin: 0 0 6px; max-width: 70ch; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 980px) {
  .item { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'box' 'body'; }
  .infobox { position: relative; top: auto; margin-bottom: 26px; max-width: 520px; }
  .newhere ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .top-in { padding: 8px 16px; gap: 10px; }
  .brand small { display: none; }
  .brand b { font-size: 12px; letter-spacing: 0.14em; }
  .search > kbd { display: none; }
  .site-nav { padding: 0 8px; }
  .site-nav ul { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
  .site-nav a { padding: 6px 10px 9px; font-size: 14px; }
  main { padding: 20px 16px 44px; }
  .hero-in { padding: 34px 20px 30px; }
  .hero::after { background: linear-gradient(0deg, rgba(10, 9, 8, 0.95) 10%, rgba(10, 9, 8, 0.6)); }
  .newhere ol { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 8px; }
  .tiles a { padding: 14px; }
  .tiles b { font-size: 16px; }
  .tiles small { font-size: 13px; }
  .hide-sm { display: none; }
  th, td { padding: 9px 10px; }
  table { font-size: 14px; }
  .infobox { padding: 18px 18px 14px; }
  .infobox dl > div { grid-template-columns: 100px 1fr; }
  .navbox { padding: 16px; }
  .navbox-row { grid-template-columns: 1fr; gap: 6px; }
  .prev-next { grid-template-columns: 1fr; }
  .prev-next a.next { grid-column: 1; }
  .nation-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .type-grid, .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results { position: fixed; left: 12px; right: 12px; top: 112px; }
  .page-search .results { position: static; }
}
@media (max-width: 420px) {
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .top, .foot, .navbox, .search { display: none; }
  body { background: #fff; color: #000; }
}