/* Astral Shards: the site of the game and its knowledge base, made as an astral atlas.
   Prussian night for the void between the lands, gold leaf for lines and small type (gold is ink here, never a fill
   except on the one button that downloads the game), vellum for reading. Old Standard, the old Russian book face, sets
   titles and the world's own voice; Ysabeau Office everything read and used; Berry Rotunda, the game's own letter,
   only its name. Item and creature tiers keep their colours from the game. */

@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/old-standard-tt-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/old-standard-tt-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+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: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/old-standard-tt-cyrillic-400-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/old-standard-tt-latin-400-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/old-standard-tt-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/old-standard-tt-latin-700-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ysabeau-office-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ysabeau-office-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+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: "Ysabeau Office"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ysabeau-office-cyrillic-400-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ysabeau-office-latin-400-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ysabeau-office-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ysabeau-office-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+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: "Berry Rotunda"; font-display: swap; src: url("fonts/BerryRotunda.woff2") format("woff2"); }

:root {
  --void: #060b1d;
  --night: #0b1534;
  --vault: #101c40;
  --gold: #c8a35e;
  --gold-hi: #ead29a;
  --gold-lo: #7e602e;
  --gold-line: rgba(200, 163, 94, 0.34);
  --gold-faint: rgba(200, 163, 94, 0.15);
  --vellum: #ece3ce;
  --vellum-dim: #aba390;
  --vellum-faint: rgba(236, 227, 206, 0.1);
  --alliance: #86a9ee;
  --horde: #d8655a;

  --tier-common: #ddd6c6;
  --tier-medium: #7aa7f2;
  --tier-heavy: #6ccf8a;
  --tier-arcane: #b88cff;
  --tier-horror: #cf7d74;
  --tier-war: #e06055;
  --tier-boss: #c99bff;

  --display: "Old Standard TT", "Times New Roman", serif;
  --text: "Ysabeau Office", "Segoe UI", system-ui, sans-serif;
  --mark: "Berry Rotunda", "Old Standard TT", serif;

  --topbar: 64px;
  --sidebar: 272px;
  --gutter: clamp(20px, 5.5vw, 88px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar) + 18px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--vellum);
  font: 400 17px/1.65 var(--text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--gold-hi); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold-line); text-underline-offset: 0.22em; transition: color 0.15s, text-decoration-color 0.15s; }
a:hover { color: #fbeec8; text-decoration-color: var(--gold); }
:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 3px; }
::selection { background: rgba(200, 163, 94, 0.32); color: #fff; }
code { font: 600 0.88em/1 var(--text); background: rgba(236, 227, 206, 0.07); padding: 0.16em 0.42em; border-radius: 2px; color: var(--vellum); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The grain of the paper, over everything, too faint to see as such. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- actions: the gold one downloads the game; the quiet one is a link */
.brush {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 50px; padding: 0 30px;
  font: 600 15.5px/1 var(--text); letter-spacing: 0.02em; color: #1b1407; text-decoration: none;
  background: linear-gradient(180deg, #e2c78c 0%, var(--gold) 55%, #b28c4a 100%);
  border: 0; border-radius: 1px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.55), inset 0 -1px 0 rgba(60, 40, 10, 0.35), 0 12px 26px -18px rgba(200, 163, 94, 0.5);
  transition: filter 0.2s, transform 0.2s;
}
.brush:hover { color: #120d04; filter: brightness(1.08); }
.brush:active { transform: translateY(1px); }
.brush.quiet {
  min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
  color: var(--vellum); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.35em;
}
.brush.quiet:hover { color: var(--gold-hi); text-decoration-color: var(--gold); filter: none; }

/* ===================================================================================================== topbar */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar);
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  background: rgba(6, 11, 29, 0.86); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--gold-faint);
}
.wordmark { font: 400 27px/1 var(--mark); color: var(--gold-hi); text-decoration: none; white-space: nowrap; padding-top: 5px; }
.wordmark:hover { color: #fff1c9; }
.topbar .spacer { flex: 1; }
.topnav { display: flex; gap: 4px; margin-left: 10px; }
.topnav a { padding: 8px 10px; font: 600 14px/1 var(--text); letter-spacing: 0.02em; color: var(--vellum-dim); text-decoration: none; }
.topnav a:hover { color: var(--vellum); }
.topnav a[aria-current="page"] { color: var(--gold-hi); box-shadow: inset 0 -1px 0 var(--gold); }
.landing .topnav { margin-left: 0; }
.menu-toggle { display: none; background: none; border: 1px solid var(--vellum-faint); color: var(--vellum); border-radius: 2px; width: 42px; height: 38px; font-size: 19px; cursor: pointer; }
.search { position: relative; width: min(400px, 36vw); }
.search input {
  width: 100%; height: 40px; padding: 0 40px 0 38px;
  font: 400 15px/1 var(--text); color: var(--vellum);
  background: rgba(236, 227, 206, 0.035) url("img/ui/search.svg") 12px 50% / 15px no-repeat;
  border: 1px solid var(--vellum-faint); border-radius: 2px;
  transition: border-color 0.2s, background-color 0.2s;
}
.search input::placeholder { color: rgba(171, 163, 144, 0.75); }
.search input:focus { outline: none; border-color: var(--gold-line); background-color: rgba(236, 227, 206, 0.06); }
.search kbd { position: absolute; right: 10px; top: 10px; font: 600 11.5px/18px var(--text); color: var(--vellum-dim); border: 1px solid var(--vellum-faint); border-radius: 2px; padding: 0 6px; }
.search-results {
  position: absolute; top: 46px; left: 0; right: 0; max-height: 70vh; overflow: auto; display: none;
  background: #081028; border: 1px solid var(--gold-faint); border-radius: 2px; padding: 6px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.search-results.open { display: block; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--vellum); text-decoration: none; font: 400 15px/1.3 var(--text); }
.search-results a.active, .search-results a:hover { background: rgba(200, 163, 94, 0.1); }
.search-results img { width: 30px; height: 30px; border-radius: 2px; flex: none; background: var(--void); box-shadow: 0 0 0 1px var(--gold-faint); }
.search-results .kind { margin-left: auto; color: var(--vellum-dim); font-size: 12.5px; white-space: nowrap; }
.search-results .empty { padding: 10px; color: var(--vellum-dim); font-size: 14px; }
.lang { display: flex; gap: 2px; font: 600 12.5px/1 var(--text); letter-spacing: 0.06em; }
.lang a { color: var(--vellum-dim); text-decoration: none; padding: 8px 7px; }
.lang a[aria-current="true"] { color: var(--vellum); box-shadow: inset 0 -1px 0 var(--gold); }
.lang a:hover { color: var(--vellum); }
.topbar .brush { min-height: 40px; padding: 0 20px; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.5); }

/* ===================================================================================================== wiki layout */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) 230px; min-height: calc(100vh - var(--topbar)); }
.sidebar {
  position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto;
  padding: 26px 14px 48px 18px; background: var(--void); border-right: 1px solid var(--gold-faint);
  font: 400 14.5px/1.35 var(--text); scrollbar-width: thin; scrollbar-color: #24304f transparent;
}
.sidebar details { margin-bottom: 2px; }
.sidebar summary {
  list-style: none; cursor: pointer; padding: 8px 8px;
  font: 600 13.5px/1.2 var(--text); color: var(--vellum); letter-spacing: 0.02em;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 11px 2px 2px; border: solid var(--gold-lo); border-width: 0 1px 1px 0; transform: rotate(-45deg); transition: transform 0.18s; }
.sidebar details[open] > summary::before { transform: rotate(45deg); border-color: var(--gold); }
.sidebar summary:hover { color: #fff; }
.sidebar ul { list-style: none; margin: 2px 0 12px 13px; padding: 0 0 0 12px; border-left: 1px solid var(--vellum-faint); }
.sidebar li a { display: block; padding: 5px 10px; color: var(--vellum-dim); text-decoration: none; }
.sidebar li a:hover { color: var(--vellum); }
.sidebar li a[aria-current="page"] { color: var(--gold-hi); background: linear-gradient(90deg, rgba(200, 163, 94, 0.13), transparent 85%); box-shadow: inset 1px 0 0 var(--gold); margin-left: -13px; padding-left: 23px; }

.sidebar-more { margin: 22px 8px 0; padding-top: 18px; border-top: 1px solid var(--vellum-faint); display: grid; gap: 4px; }
.sidebar-more a { color: var(--vellum-dim); text-decoration: none; padding: 4px 2px; }
.sidebar-more a:hover { color: var(--gold-hi); }

.content { min-width: 0; padding: 40px clamp(20px, 4.5vw, 64px) 90px; }
.article { max-width: 800px; }
.crumbs { font: 400 13.5px/1.4 var(--text); color: var(--vellum-dim); margin-bottom: 14px; }
.crumbs a { color: var(--vellum-dim); text-decoration: none; }
.crumbs a:hover { color: var(--vellum); }
.article h1 { font: 400 clamp(34px, 4.2vw, 50px)/1.08 var(--display); margin: 0; color: var(--vellum); letter-spacing: -0.01em; }
.article h1 + .stroke {
  display: block; width: 92px; height: 9px; margin: 18px 0 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='9'%3E%3Cpath d='M0 4.5H38M54 4.5H92' stroke='%23c8a35e' stroke-width='1'/%3E%3Cpath d='M46 0.5L50 4.5L46 8.5L42 4.5Z' fill='none' stroke='%23c8a35e'/%3E%3C/svg%3E") left center / 92px 9px no-repeat;
}
.article .lede { font: italic 400 21px/1.5 var(--display); color: var(--vellum-dim); margin: 0 0 26px; max-width: 60ch; }
.article .lede a { text-decoration-color: rgba(200, 163, 94, 0.22); }
.article h2 { font: 400 29px/1.2 var(--display); margin: 2.3em 0 0.7em; color: var(--gold-hi); letter-spacing: -0.005em; }
.article h3 { font: 600 17.5px/1.35 var(--text); margin: 1.8em 0 0.5em; color: var(--vellum); letter-spacing: 0.01em; }
.article p, .article ul, .article ol { margin: 0 0 1.05em; max-width: 68ch; }
.article ul { padding-left: 1.15em; }
.article li { margin-bottom: 0.4em; padding-left: 0.2em; }
.article li::marker { color: var(--gold); }
.article strong { color: #fff6e2; font-weight: 600; }
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps li { counter-increment: step; position: relative; padding-left: 46px; margin-bottom: 16px; min-height: 30px; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: -6px; width: 30px; font: 400 28px/1 var(--display); color: var(--gold); text-align: right; }
aside.note { border-left: 1px solid var(--gold); padding: 12px 20px; background: linear-gradient(90deg, rgba(200, 163, 94, 0.08), transparent 80%); margin: 0 0 1.3em; color: var(--vellum); }

/* --- tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.6em; border: 1px solid var(--vellum-faint); border-radius: 1px; background: rgba(6, 11, 29, 0.42); }
table { border-collapse: collapse; width: 100%; font: 400 15px/1.4 var(--text); }
th { text-align: left; font: 600 12.5px/1.3 var(--text); letter-spacing: 0.04em; color: var(--vellum-dim); background: rgba(200, 163, 94, 0.05); padding: 11px 14px; border-bottom: 1px solid var(--gold-faint); white-space: nowrap; }
td { padding: 9px 14px; border-bottom: 1px solid rgba(236, 227, 206, 0.06); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
tbody tr:hover td { background: rgba(200, 163, 94, 0.04); }
td .muted, .muted { color: var(--vellum-dim); }

/* --- things of the game */
.thing { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; vertical-align: middle; }
.thing img { width: 28px; height: 28px; border-radius: 2px; background: var(--void); box-shadow: 0 0 0 1px var(--gold-faint); }
.thing:hover span { text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.22em; }
.t-common { color: var(--tier-common); }
.t-medium { color: var(--tier-medium); }
.t-heavy { color: var(--tier-heavy); }
.t-arcane { color: var(--tier-arcane); }
.t-horror { color: var(--tier-horror); }
.t-war { color: var(--tier-war); }
.t-boss { color: var(--tier-boss); }
.article h1.t-common, .article h2.t-common { color: var(--tier-common); }
.article h1.t-medium, .article h2.t-medium { color: var(--tier-medium); }
.article h1.t-heavy, .article h2.t-heavy { color: var(--tier-heavy); }
.article h1.t-arcane, .article h2.t-arcane { color: var(--tier-arcane); }
.article h1.t-horror, .article h2.t-horror { color: var(--tier-horror); }
.article h1.t-war, .article h2.t-war { color: var(--tier-war); }
.article h1.t-boss, .article h2.t-boss { color: var(--tier-boss); }
.t-rainbow { background: linear-gradient(90deg, #f4b5a2, #f2dc9c, #a9e0bf, #9fc6ef, #c6abef, #efaccb, #f4b5a2); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 9s linear infinite; }
@keyframes rainbow { to { background-position: 300% 0; } }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 1px;
  font: 600 12.5px/1.5 var(--text); letter-spacing: 0.02em; background: transparent; color: var(--vellum-dim); text-decoration: none; border: 1px solid var(--vellum-faint);
}
a.chip:hover { color: var(--vellum); border-color: var(--gold-line); }
.chip.alliance { border-color: rgba(134, 169, 238, 0.4); color: var(--alliance); }
.chip.horde { border-color: rgba(216, 101, 90, 0.45); color: #eb9a90; }
.chip.pvp { border-color: var(--gold-line); color: var(--gold-hi); }

/* --- the card of one thing (item, spell, creature...) */
.card {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 26px; align-items: start;
  padding: 26px; margin: 0 0 30px; position: relative;
  background: linear-gradient(180deg, rgba(16, 28, 64, 0.72), rgba(6, 11, 29, 0.72)); border: 1px solid var(--vellum-faint);
}
.card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--card-tier, var(--gold)); opacity: 0.85; }
.card .portrait { width: 116px; height: 116px; background: radial-gradient(circle at 50% 38%, #1b2a55, #070d22); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--card-tier, var(--gold-faint)); }
.card .portrait img { width: 96px; height: 96px; }
.card .portrait.map { border-radius: 50%; overflow: hidden; }
.card .portrait.map img { width: 116px; height: 116px; object-fit: cover; }
.card h2 { margin: 0 0 4px !important; font-size: 27px !important; }
.card .kind { font: 400 14px/1.4 var(--text); color: var(--vellum-dim); margin-bottom: 14px; }
.card .desc { font: italic 400 18px/1.5 var(--display); color: var(--vellum-dim); margin: 0 0 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 26px; margin: 0; font: 400 14.5px/1.4 var(--text); }
.stats div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted rgba(200, 163, 94, 0.22); padding: 4px 0; }
.stats dt { color: var(--vellum-dim); }
.stats dd { margin: 0; color: var(--vellum); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.stats .good dd { color: #93dba6; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* --- catalogs */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; font-family: var(--text); }
.filters input { height: 38px; padding: 0 14px; border-radius: 1px; border: 1px solid var(--vellum-faint); background: rgba(236, 227, 206, 0.035); color: var(--vellum); font: 400 15px var(--text); min-width: 230px; }
.filters input:focus { outline: none; border-color: var(--gold-line); }
.filters button { height: 38px; padding: 0 15px; border-radius: 1px; border: 1px solid var(--vellum-faint); background: transparent; color: var(--vellum-dim); font: 600 13.5px var(--text); cursor: pointer; }
.filters button:hover { color: var(--vellum); }
.filters button[aria-pressed="true"] { background: rgba(200, 163, 94, 0.14); border-color: var(--gold-line); color: var(--gold-hi); }
.family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; margin: 0 0 1.8em; background: var(--vellum-faint); border: 1px solid var(--vellum-faint); }
.family-grid a { display: block; padding: 16px 18px; background: var(--night); text-decoration: none; color: var(--vellum); transition: background-color 0.2s; }
.family-grid a:hover { background: #0e1a3e; }
.family-grid strong { display: block; font: 400 21px/1.25 var(--display); margin-bottom: 4px; }
.family-grid span { font: 400 13.5px/1.4 var(--text); color: var(--vellum-dim); }
.minimap-figure { margin: 0 0 28px; }
.minimap-figure img { width: 100%; max-width: 520px; display: block; box-shadow: 0 0 0 1px var(--gold-faint), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.minimap-figure figcaption { font: italic 400 15px/1.4 var(--display); color: var(--vellum-dim); margin-top: 10px; }

/* --- the page's own contents and the way on */
.toc { position: sticky; top: calc(var(--topbar) + 34px); align-self: start; padding: 40px 22px 0 0; font: 400 13.5px/1.4 var(--text); }
.toc p { font: italic 400 15px/1.3 var(--display); color: var(--vellum); margin: 0 0 10px; }
.toc a { display: block; color: var(--vellum-dim); text-decoration: none; padding: 5px 0 5px 13px; border-left: 1px solid var(--vellum-faint); }
.toc a:hover, .toc a.active { color: var(--vellum); border-left-color: var(--gold); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; max-width: 800px; }
.pager a { flex: 1; display: block; padding: 16px 18px; border: 1px solid var(--vellum-faint); text-decoration: none; color: var(--vellum); font: italic 400 19px/1.3 var(--display); transition: border-color 0.2s; }
.pager a span { display: block; font: 600 12.5px/1.4 var(--text); font-style: normal; letter-spacing: 0.03em; color: var(--vellum-dim); margin-bottom: 4px; }
.pager a.next { text-align: right; }
.pager a:hover { border-color: var(--gold-line); }
.wiki-footer { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--vellum-faint); font: 400 13.5px/1.7 var(--text); color: var(--vellum-dim); max-width: 800px; }
.wiki-footer a { color: var(--vellum); }

/* --- the atlas of the lands (also on the page of the world's map) */
.road { margin: 10px 0 34px; }
.atlas { display: block; width: 100%; height: auto; }
.atlas .orbit { fill: none; stroke: var(--gold); stroke-opacity: 0.1; stroke-width: 1; }
.atlas .orbit.fine { stroke-opacity: 0.06; stroke-dasharray: 2 6; }
.atlas .tick { stroke: var(--gold); stroke-opacity: 0.22; stroke-width: 1; }
.atlas .way { fill: none; stroke-linecap: round; }
.atlas .way.alliance { stroke: var(--alliance); stroke-opacity: 0.75; stroke-width: 1.4; }
.atlas .way.horde { stroke: var(--horde); stroke-opacity: 0.75; stroke-width: 1.4; }
.atlas .way.war { stroke: var(--gold); stroke-opacity: 0.6; stroke-width: 1.6; stroke-dasharray: 0.5 7; }
.atlas .gate { fill: var(--void); stroke: var(--gold); stroke-width: 1; }
.atlas .gate.alliance { stroke: var(--alliance); }
.atlas .gate.horde { stroke: var(--horde); }
.atlas .side { font: italic 400 26px var(--display); letter-spacing: 0.01em; }
.atlas .side.alliance { fill: var(--alliance); }
.atlas .side.horde { fill: var(--horde); }
.atlas .land { cursor: pointer; text-decoration: none; }
.atlas .land:focus { outline: none; }
.atlas .shard { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.atlas .edge { fill: none; stroke-width: 1.3; transition: stroke-width 0.3s; }
.atlas .facet { fill: none; stroke: #fff6dc; stroke-opacity: 0.2; stroke-width: 1; }
.atlas .halo { opacity: 0; transition: opacity 0.4s; }
.atlas .land:hover .shard, .atlas .land:focus-visible .shard { transform: translateY(-5px) scale(1.045); }
.atlas .land:hover .halo, .atlas .land:focus-visible .halo { opacity: 1; }
.atlas .land:hover .edge, .atlas .land:focus-visible .edge { stroke-width: 2; }
.atlas .name { font: italic 400 22px var(--display); fill: var(--vellum); transition: fill 0.2s; paint-order: stroke; stroke: var(--void); stroke-width: 5px; stroke-linejoin: round; }
.atlas .meta { font: 600 14.5px var(--text); letter-spacing: 0.04em; fill: var(--vellum-dim); paint-order: stroke; stroke: var(--void); stroke-width: 4px; stroke-linejoin: round; }
.atlas .land:hover .name, .atlas .land:focus-visible .name { fill: var(--gold-hi); }
.atlas.tall .name { font-size: 27px; }
.atlas.tall .meta { font-size: 18px; }
.atlas.tall .side { font-size: 32px; }
.atlas-tall { display: none; }

/* The atlas of the landing draws itself once: the two roads first, from the capitals toward Dreadhollow. */
@keyframes atlas-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes atlas-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes atlas-fade { from { opacity: 0; } }
.atlas.play .way.alliance, .atlas.play .way.horde { stroke-dasharray: var(--len); animation: atlas-draw 2.2s cubic-bezier(0.45, 0.05, 0.25, 1) 0.6s backwards; }
.atlas.play .way.war, .atlas.play .gate, .atlas.play .side { animation: atlas-fade 1.2s ease 2.2s backwards; }
.atlas.play .land { animation: atlas-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--i) * 0.11s); }
.atlas.play .orbits { animation: atlas-fade 2.4s ease backwards; }

/* ===================================================================================================== landing */
.landing { background: var(--void); }
.landing .topbar { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.landing .topbar .wordmark, .landing .topbar .brush { display: none; }
.landing .topbar .menu-toggle { display: none !important; }
.landing main > section { position: relative; }

.atlas-hero {
  position: relative; overflow: hidden; min-height: max(100vh, 760px);
  display: grid; grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 56px); align-items: center;
  padding: calc(var(--topbar) + 30px) var(--gutter) 64px;
  background:
    radial-gradient(ellipse 52% 60% at 66% 52%, rgba(26, 46, 112, 0.55), transparent 72%),
    radial-gradient(ellipse 26% 34% at 47% 38%, rgba(134, 169, 238, 0.09), transparent 70%),
    radial-gradient(ellipse 26% 34% at 88% 40%, rgba(216, 101, 90, 0.08), transparent 70%),
    var(--void);
}
.sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px)); }
.sky circle { fill: #f4ecd6; }
.sky .twinkle { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.15; } }
.atlas-hero .atlas-wrap { position: relative; z-index: 1; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 5px)); }
.atlas-hero .atlas-wide { max-height: calc(100vh - var(--topbar) - 70px); min-height: 560px; }

.cartouche { position: relative; z-index: 2; padding: 50px 48px 44px; max-width: 540px; background: linear-gradient(180deg, rgba(8, 15, 40, 0.72), rgba(6, 11, 29, 0.6)); backdrop-filter: blur(4px); border: 1px solid var(--gold-line); animation: atlas-fade 1.4s ease 0.1s backwards; }
.cartouche::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold-faint); pointer-events: none; }
.cartouche::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0.5L10.5 5.5L5.5 10.5L0.5 5.5Z' fill='%23060b1d' stroke='%23c8a35e'/%3E%3C/svg%3E") 0 0 / 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0.5L10.5 5.5L5.5 10.5L0.5 5.5Z' fill='%23060b1d' stroke='%23c8a35e'/%3E%3C/svg%3E") 100% 0 / 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0.5L10.5 5.5L5.5 10.5L0.5 5.5Z' fill='%23060b1d' stroke='%23c8a35e'/%3E%3C/svg%3E") 0 100% / 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0.5L10.5 5.5L5.5 10.5L0.5 5.5Z' fill='%23060b1d' stroke='%23c8a35e'/%3E%3C/svg%3E") 100% 100% / 11px no-repeat;
}
.cartouche h1 { margin: 0; font: 400 clamp(64px, 6.1vw, 100px)/0.86 var(--mark); color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 60px rgba(234, 210, 154, 0.14); }
.cartouche .sub { margin: 26px 0 14px; font: italic 400 24px/1.35 var(--display); color: var(--vellum); }
.cartouche .pitch { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--vellum-dim); max-width: 40ch; }
.cartouche .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.cartouche .fine { margin: 22px 0 0; font-size: 13.5px; color: var(--vellum-dim); }

.music { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; background: none; color: var(--vellum-dim); cursor: pointer; border-radius: 50%; }
.music .note { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold); font: 400 17px/1 var(--display); transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, background-color 0.3s; }
.music:hover .note { border-color: var(--gold); color: var(--gold-hi); background-color: rgba(200, 163, 94, 0.06); }
.music:focus-visible { outline: none; }
.music:focus-visible .note { outline: 1px solid var(--gold-hi); outline-offset: 3px; }
.music[aria-pressed="true"] .note { color: var(--gold-hi); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200, 163, 94, 0.08), 0 0 22px rgba(234, 210, 154, 0.3); animation: music-glow 2.8s ease-in-out infinite; }
@keyframes music-glow { 50% { box-shadow: 0 0 0 7px rgba(200, 163, 94, 0.03), 0 0 8px rgba(234, 210, 154, 0.12); } }

.atlas-note { margin: 4px 0 0; text-align: center; font: italic 400 15px/1.4 var(--display); color: var(--vellum-dim); animation: atlas-fade 1s ease 2.8s backwards; }

/* --- sections of the landing */
.chapter { padding: clamp(90px, 11vw, 150px) var(--gutter); }
.chapter-head { max-width: 760px; margin: 0 0 clamp(44px, 5vw, 70px); }
.chapter h2 { margin: 0; font: 400 clamp(38px, 4.6vw, 62px)/1.05 var(--display); color: var(--vellum); letter-spacing: -0.015em; }
.chapter .lede { margin: 20px 0 0; font: italic 400 clamp(19px, 1.7vw, 22px)/1.5 var(--display); color: var(--vellum-dim); max-width: 54ch; }

/* The seven shards: the one place of the rainbow's light. */
.epigraph { text-align: center; padding: clamp(110px, 13vw, 170px) 24px; background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(200, 163, 94, 0.07), transparent 70%), var(--night); border-top: 1px solid var(--gold-faint); }
.epigraph .shard-mark { width: 64px; height: 92px; margin: 0 auto 40px; display: block; filter: drop-shadow(0 0 26px rgba(214, 196, 255, 0.35)); }
.epigraph blockquote { margin: 0 auto; max-width: 27ch; font: italic 400 clamp(30px, 3.6vw, 48px)/1.28 var(--display); color: var(--vellum); }
.epigraph figcaption { margin-top: 22px; font-size: 14.5px; color: var(--vellum-dim); }
.epigraph .after { margin: 44px auto 0; max-width: 56ch; color: var(--vellum-dim); font-size: 17px; }

.laws { background: var(--night); }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 46px); margin: 0; padding: 0; list-style: none; }
.plate { margin: 0; }
.plate .frame { padding: 9px; border: 1px solid var(--gold-faint); background: rgba(6, 11, 29, 0.55); }
.plate img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.plate h3 { margin: 26px 0 10px; font: 400 27px/1.2 var(--display); color: var(--vellum); }
.plate p { margin: 0 0 14px; color: var(--vellum-dim); font-size: 16px; max-width: 42ch; }
.plate a { font-weight: 600; font-size: 15px; color: var(--vellum); }

.peoples { padding-left: 0; padding-right: 0; padding-top: 0; background: var(--night); }
.peoples .wide { position: relative; margin: 0; }
.peoples .wide img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.peoples .wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 70%, var(--night) 100%); pointer-events: none; }
.peoples .wide figcaption { position: absolute; z-index: 1; right: var(--gutter); bottom: 26px; font: italic 400 15px/1.4 var(--display); color: var(--vellum-dim); }
.peoples .text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); padding: 10px var(--gutter) 0; align-items: start; }
.peoples h2 { margin: 0 0 20px; }
.peoples .text p { color: var(--vellum-dim); margin: 0 0 16px; max-width: 52ch; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); }
.sides div { background: var(--night); padding: 24px 24px 22px; }
.sides h3 { margin: 0 0 12px; font: italic 400 26px/1.1 var(--display); }
.sides .alliance h3 { color: var(--alliance); }
.sides .horde h3 { color: var(--horde); }
.sides dl { margin: 0; font-size: 15px; }
.sides dt { color: var(--vellum-dim); font-size: 12.5px; letter-spacing: 0.04em; margin-top: 12px; }
.sides dd { margin: 2px 0 0; color: var(--vellum); }

.begin { background: var(--void); border-top: 1px solid var(--gold-faint); }
.begin ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); counter-reset: step; }
.begin li { counter-increment: step; padding-top: 22px; border-top: 1px solid var(--gold-faint); color: var(--vellum); font-size: 16.5px; }
.begin li::before { content: counter(step); display: block; margin-bottom: 18px; font: 400 64px/0.8 var(--display); color: var(--gold); }
.begin .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 60px; }
.begin .cta p { margin: 0; color: var(--vellum-dim); font-size: 14.5px; }

.contents { background: var(--void); padding-top: 0; }
.contents ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(40px, 7vw, 120px); }
.contents li { break-inside: avoid; }
.contents a { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; text-decoration: none; color: var(--vellum); border-bottom: 1px solid rgba(236, 227, 206, 0.06); }
.contents .t { font: 400 24px/1.2 var(--display); white-space: nowrap; transition: color 0.2s; }
.contents .dots { flex: 1; border-bottom: 1px dotted rgba(200, 163, 94, 0.35); transform: translateY(-5px); min-width: 20px; }
.contents .n { font-size: 14.5px; color: var(--vellum-dim); white-space: nowrap; font-variant-numeric: lining-nums; }
.contents a:hover .t { color: var(--gold-hi); }

.colophon { padding: 90px 24px 76px; text-align: center; border-top: 1px solid var(--gold-faint); background: var(--void); color: var(--vellum-dim); font-size: 14px; line-height: 1.8; }
.colophon .mark { display: block; margin: 0 auto 22px; font: 400 40px/1 var(--mark); color: var(--gold-hi); text-decoration: none; }
.colophon p { margin: 0 auto; max-width: 70ch; }
.colophon .author { font: italic 400 19px/1.5 var(--display); color: var(--vellum); margin-bottom: 14px; }
.colophon a { color: var(--vellum); }

/* ===================================================================================================== updates, reviews, the desk */
.plain { background: var(--night); }
.sheet { padding: clamp(40px, 6vw, 80px) var(--gutter) 100px; max-width: 1360px; margin: 0 auto; }
.sheet-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sheet-head h1 { margin: 0; font: 400 clamp(42px, 5.4vw, 70px)/1.04 var(--display); letter-spacing: -0.015em; color: var(--vellum); }
.sheet-head .lede { margin: 20px 0 0; font: italic 400 clamp(19px, 1.7vw, 22px)/1.5 var(--display); color: var(--vellum-dim); max-width: 56ch; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: clamp(36px, 5vw, 80px); align-items: start; }
.sheet-side { position: sticky; top: calc(var(--topbar) + 24px); }
.sheet-h2 { margin: 0 0 24px; font: 400 30px/1.2 var(--display); color: var(--gold-hi); }
.sheet-main section + section { margin-top: 72px; }
.jump { display: none; margin-top: 18px; font-weight: 600; }
.empty { color: var(--vellum-dim); font: italic 400 18px/1.5 var(--display); margin: 0; }

.feed .update { padding: 0 0 34px; margin: 0 0 34px; border-bottom: 1px solid var(--vellum-faint); }
.update-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; font-size: 14px; color: var(--vellum-dim); }
.update-version { color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }
.update-title { margin: 8px 0 12px; font: 400 27px/1.25 var(--display); color: var(--vellum); }
.update p { margin: 0 0 12px; max-width: 68ch; color: var(--vellum); }
.update .update-fixes { color: var(--vellum-dim); font-size: 15px; }

.bugs .bug { padding: 18px 0; border-bottom: 1px solid var(--vellum-faint); }
.bug-head, .desk-item summary { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; font-size: 13.5px; color: var(--vellum-dim); }
.bug-id { font-weight: 600; letter-spacing: 0.03em; color: var(--vellum-dim); font-variant-numeric: lining-nums; }
.bug-status { padding: 1px 9px; border: 1px solid var(--vellum-faint); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; }
.bug-status.s-fixed, .bug-status.s-published { color: #93dba6; border-color: rgba(147, 219, 166, 0.35); }
.bug-status.s-accepted { color: var(--gold-hi); border-color: var(--gold-line); }
.bug-status.s-new { color: var(--alliance); border-color: rgba(134, 169, 238, 0.4); }
.bug-status.s-rejected, .bug-status.s-duplicate, .bug-status.s-hidden { color: var(--vellum-dim); }
.bug-date { margin-left: auto; }
.bug-title { margin: 8px 0 0; font: 400 21px/1.3 var(--display); color: var(--vellum); }
.reply { margin-top: 14px; padding: 12px 18px; border-left: 1px solid var(--gold); background: linear-gradient(90deg, rgba(200, 163, 94, 0.07), transparent 80%); }
.reply-by { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--gold); margin-bottom: 4px; }
.reply p { margin: 0 0 8px; }
.reply p:last-child { margin-bottom: 0; }

.reviews { display: grid; gap: 28px; }
.review { margin: 0; padding: 26px 28px; border: 1px solid var(--vellum-faint); background: rgba(6, 11, 29, 0.35); }
.review .stars { color: var(--gold); letter-spacing: 0.18em; font-size: 17px; }
.review blockquote { margin: 12px 0 14px; font: italic 400 20px/1.5 var(--display); color: var(--vellum); }
.review blockquote p { margin: 0 0 10px; }
.review figcaption { font-size: 14px; color: var(--vellum-dim); }

.report { padding: 30px 30px 26px; border: 1px solid var(--gold-line); background: linear-gradient(180deg, rgba(16, 28, 64, 0.65), rgba(6, 11, 29, 0.6)); position: relative; }
.report::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold-faint); pointer-events: none; }
.report h2 { margin: 0 0 8px; font: 400 28px/1.2 var(--display); color: var(--vellum); }
.report.narrow { max-width: 460px; }
.report.wide { max-width: 860px; }
.form-intro { margin: 0 0 22px; color: var(--vellum-dim); font-size: 15px; }
.field { display: block; margin: 0 0 16px; position: relative; }
.field > span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--vellum); }
.field em, .desk-en em { font-style: normal; font-weight: 400; color: var(--vellum-dim); }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; font: 400 15.5px/1.45 var(--text); color: var(--vellum);
  background: rgba(6, 11, 29, 0.6); border: 1px solid var(--vellum-faint); border-radius: 1px; transition: border-color 0.2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8a35e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field select option { background: #0b1534; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-line); }
.field input::placeholder, .field textarea::placeholder { color: rgba(171, 163, 144, 0.6); }
.field input[type="file"] { padding: 8px; font-size: 14px; color: var(--vellum-dim); }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 1px solid var(--gold-line); background: transparent; color: var(--gold-hi); font: 600 13px var(--text); cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.check { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; font-size: 14.5px; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.robot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 20px; padding: 12px 14px; border: 1px solid var(--vellum-faint); background: rgba(6, 11, 29, 0.55); }
.robot button { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--vellum); font: 600 15px/1.2 var(--text); cursor: pointer; }
.robot .box { width: 22px; height: 22px; flex: none; border: 1px solid var(--gold-line); background: var(--void); display: grid; place-items: center; transition: border-color 0.2s, background-color 0.2s; }
.robot button:hover .box { border-color: var(--gold); }
.robot[data-state="work"] .box { border-color: var(--gold); border-top-color: transparent; border-radius: 50%; animation: robot-spin 0.8s linear infinite; }
.robot[data-state="done"] .box { background: var(--gold); border-color: var(--gold); }
.robot[data-state="done"] .box::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid #1b1407; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.robot-mark { font-size: 12px; color: var(--vellum-dim); text-align: right; }
@keyframes robot-spin { to { transform: rotate(360deg); } }
.report .brush { width: 100%; }
.form-note { margin: 14px 0 0; padding: 10px 14px; font-size: 14.5px; border-left: 1px solid var(--horde); background: rgba(216, 101, 90, 0.08); color: #f0b0a8; }
.form-note[data-good="true"] { border-left-color: #93dba6; background: rgba(147, 219, 166, 0.07); color: #bfe8ca; }
.form-fine { margin: 14px 0 0; font-size: 13px; color: var(--vellum-dim); }

.rating { border: 0; padding: 0; margin: 0 0 16px; }
.rating legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--vellum); }
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label { font-size: 30px; line-height: 1; color: rgba(200, 163, 94, 0.28); cursor: pointer; transition: color 0.15s; }
.stars-input label:hover, .stars-input label:hover ~ label, .stars-input input:checked ~ label { color: var(--gold); }
.stars-input input:focus-visible + label { outline: 1px solid var(--gold-hi); outline-offset: 2px; }

.talk { background: var(--void); padding-top: 0; }
.talk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); }
.talk-grid a { display: block; padding: 34px 36px 32px; background: var(--void); color: var(--vellum); text-decoration: none; transition: background-color 0.25s; }
.talk-grid a:hover { background: #0a1230; }
.talk-grid h2 { margin: 0 0 10px; font: 400 32px/1.15 var(--display); }
.talk-grid a:hover h2 { color: var(--gold-hi); }
.talk-grid p { margin: 0; color: var(--vellum-dim); max-width: 44ch; }
.colophon .links { display: flex; justify-content: center; gap: 28px; margin-bottom: 12px; }
.colophon.small { padding: 50px 24px 46px; }
.colophon.small .mark { font-size: 30px; margin-bottom: 12px; }

.desk-filters { align-items: center; }
.desk-filters .count { color: var(--vellum-dim); margin-left: 4px; }
.linkish { padding: 0 6px; border: 0; background: none; color: var(--vellum-dim); font: 600 13.5px var(--text); text-decoration: underline; text-decoration-color: var(--gold-faint); text-underline-offset: 0.3em; cursor: pointer; }
.linkish:hover { color: var(--vellum); }
#admin-logout { margin-left: auto; }
.desk-items { display: grid; gap: 14px; margin-bottom: 70px; }
.desk-item { border: 1px solid var(--vellum-faint); background: rgba(6, 11, 29, 0.4); }
.desk-item summary { padding: 14px 18px; cursor: pointer; list-style: none; }
.desk-item summary::-webkit-details-marker { display: none; }
.desk-item summary strong { font: 400 19px/1.3 var(--display); color: var(--vellum); flex-basis: 100%; order: 3; }
.desk-body { padding: 0 18px 18px; }
.desk-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 14px; font-size: 14px; }
.desk-facts dt { color: var(--vellum-dim); }
.desk-facts dd { margin: 0; }
.desk-text { margin: 0 0 10px; max-width: 80ch; }
.desk-shot { display: block; max-width: 100%; max-height: 480px; margin: 10px 0 16px; box-shadow: 0 0 0 1px var(--gold-faint); }
.desk-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vellum-faint); max-width: 760px; }
.desk-form .brush { width: auto; }
.desk-saved { margin-left: 14px; color: #93dba6; font-size: 14px; }
.desk-en { margin: 0 0 16px; }
.desk-en summary { cursor: pointer; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.desk-actions { display: flex; align-items: center; gap: 18px; }
.desk-actions .brush { width: auto; }
.desk-updates { margin-top: 26px; display: grid; gap: 10px; max-width: 860px; }
.desk-update { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--vellum-faint); }
.desk-update .bug-date { margin-left: 0; color: var(--vellum-dim); font-size: 13.5px; }

/* ===================================================================================================== narrow screens */
@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .toc { display: none; }
  .atlas-hero { grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.4fr); }
  .cartouche { padding: 42px 36px 38px; }
}
@media (max-width: 980px) {
  .atlas-hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--topbar) + 24px); }
  .cartouche { max-width: none; }
  .atlas-hero .atlas-wide { display: none; }
  .atlas-hero .atlas-tall { display: block; max-width: 560px; margin: 10px auto 0; }
  .plates { grid-template-columns: 1fr; max-width: 560px; }
  .peoples .text { grid-template-columns: 1fr; }
  .begin ol { grid-template-columns: 1fr 1fr; }
  .contents ul { columns: 1; }
  .sheet-grid { grid-template-columns: 1fr; }
  .sheet-side { position: static; }
  .jump { display: inline-block; }
  .talk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .menu-toggle { display: block; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 25; left: 0; top: var(--topbar); width: min(320px, 86vw); transform: translateX(-102%); transition: transform 0.25s ease; box-shadow: 30px 0 60px rgba(0, 0, 0, 0.6); }
  body.nav-open .sidebar { transform: none; }
  .search { width: auto; flex: 1; min-width: 0; }
  .landing .topbar .spacer { display: none; }
  .search kbd, .topbar .brush { display: none; }
  .topbar { gap: 10px; padding: 0 12px; }
  .card { grid-template-columns: 1fr; padding: 20px; }
  .content { padding: 28px 18px 64px; }
  .lang a { padding: 8px 5px; }
  .lang a[aria-current="true"] { display: none; }
  .topnav { display: none; }
  .road .atlas-wide { display: none; }
  .road .atlas-tall { display: block; }
}
@media (max-width: 560px) {
  .wordmark { font-size: 22px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .cartouche { padding: 34px 24px 30px; }
  .cartouche h1 { font-size: 64px; }
  .cartouche .sub { font-size: 21px; }
  .begin ol { grid-template-columns: 1fr; }
  .sides { grid-template-columns: 1fr; }
  .contents .t { font-size: 21px; }
  .field-row { grid-template-columns: 1fr; }
  .report { padding: 24px 20px 22px; }
  .robot { flex-wrap: wrap; }
  .peoples .wide img { aspect-ratio: 4 / 3; }
  .peoples .wide figcaption { left: 18px; right: auto; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .sky, .atlas-hero .atlas-wrap { transform: none !important; }
}

/* ===================================================================================================== missing page */
.lost { min-height: 100vh; display: grid; align-content: center; justify-items: start; padding: 120px var(--gutter) 80px; max-width: 900px; }
.lost .shard-mark { width: 44px; height: 64px; margin-bottom: 34px; }
.lost h1 { font: 400 clamp(46px, 7vw, 84px)/1.02 var(--display); color: var(--vellum); margin: 0 0 24px; letter-spacing: -0.015em; }
.lost p { max-width: 54ch; color: var(--vellum-dim); margin: 0 0 12px; font-size: 17.5px; }