/* Monsters VS Guards website. Tokens and shared components: brand.css (design-chart.md). */

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.4) blur(10px);
}
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.site-header__brand { display: inline-flex; flex: none; }
.site-nav { flex: 1; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a, .nav-menu__panel a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m);
  color: var(--text-muted); font-weight: 600; text-decoration: none;
}
.site-nav a:hover, .nav-menu__panel a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"], .nav-menu__panel a[aria-current="page"] { color: var(--monster-ink); background: var(--monster-soft); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-header__link { color: var(--text-muted); font-weight: 600; text-decoration: none; padding: var(--space-2); }
.site-header__link:hover { color: var(--text); }
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-2); padding: var(--space-2);
}
.nav-menu__panel ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1020px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 480px) {
  .site-header__link { display: none; }
  .site-header .wordmark { height: 32px; }
  .site-header__bar { gap: var(--space-2); }
}
@media (max-width: 380px) {
  .site-header__cta { display: none; }
  .site-header__actions { gap: 0; }
}

/* ---------------------------------------------------------------- page structure */
main { display: block; outline: none; }
.section { padding: var(--space-8) 0; }
.section--tinted { background: var(--surface); border-block: 1px solid var(--border); }
.section__head { max-width: 70ch; margin-bottom: var(--space-5); }
.section__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); max-width: none; }
.section__head--row h2 { margin: 0; }
.section__more { margin: var(--space-5) 0 0; }
.eyebrow {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--monster-ink); font-size: var(--fs-s); margin-bottom: var(--space-2);
}
.lede { font-size: var(--fs-l); color: var(--text-muted); max-width: 62ch; }
.split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; } }
.page-head { padding: var(--space-7) 0 var(--space-5); }
.page-head h1 { margin-bottom: var(--space-3); }
.empty { color: var(--text-muted); padding: var(--space-5); border: 2px dashed var(--border); border-radius: var(--radius-l); text-align: center; }
.breadcrumbs { font-size: var(--fs-s); color: var(--text-muted); margin: var(--space-5) 0; }
.breadcrumbs a { color: var(--text-muted); }

/* ---------------------------------------------------------------- hero */
.hero {
  padding: var(--space-8) 0;
  background:
    radial-gradient(60rem 30rem at 0% 0%, color-mix(in srgb, var(--mvg-monster) 18%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at 100% 100%, color-mix(in srgb, var(--mvg-guard) 18%, transparent), transparent 60%);
}
.hero__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 860px) { .hero__inner { grid-template-columns: auto 1fr; gap: var(--space-8); } }
.hero__mark { justify-self: center; filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.25)); }
@media (max-width: 859px) { .hero__mark { width: 160px; height: 160px; } }
.hero h1 { margin-bottom: var(--space-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* the server address */
.address {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  max-width: 560px;
}
.address__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); width: 100%; }
.address__value { font-size: var(--fs-l); font-weight: 700; color: var(--text); word-break: break-all; }
.address__version { font-size: var(--fs-s); color: var(--text-muted); margin-left: auto; }
.address--missing { display: block; box-shadow: none; }

/* ---------------------------------------------------------------- facts, steps, sides */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.facts li { display: grid; grid-template-columns: 4.6rem 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.facts strong { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--monster-ink); white-space: nowrap; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps li { counter-increment: step; position: relative; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-l); }
.steps li::before {
  content: counter(step); position: absolute; top: calc(-1 * var(--space-4)); left: var(--space-4);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-s);
  font-family: var(--font-display); font-weight: 700; background: var(--monster-fill); color: var(--on-monster); box-shadow: var(--bevel);
}
.steps h3 { font-size: var(--fs-l); margin-top: var(--space-2); }
.steps p { margin: 0; color: var(--text-muted); }
.sides { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 860px) { .sides { grid-template-columns: 1fr auto 1fr; } }
.side { padding: var(--space-6); border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--surface); height: 100%; }
.side--monsters { border-top: 6px solid var(--mvg-monster); }
.side--guards { border-top: 6px solid var(--mvg-guard); }
.side__head { width: 72px; height: 72px; margin-bottom: var(--space-3); }
.sides__vs { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--text-faint); text-align: center; margin: 0; }

/* ---------------------------------------------------------------- kit cards */
.kit-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.kit-card {
  position: relative; display: grid; grid-template-columns: 64px 1fr 92px; gap: var(--space-4); align-items: center;
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--mvg-monster); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.kit-card--guards { border-left-color: var(--mvg-guard); }
.kit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kit-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.kit-card[hidden] { display: none; }
.kit-card__icon { display: grid; place-items: center; width: 64px; height: 64px; background: var(--surface-2); border-radius: var(--radius-m); }
.kit-card__icon img { width: 48px; height: 48px; }
.kit-card__body { min-width: 0; }
.kit-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.kit-card__name { font-size: var(--fs-xl); margin: 0 0 var(--space-1); }
.kit-card__name a { color: var(--text); text-decoration: none; }
.kit-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kit-card__name a:focus-visible { outline: none; }
.kit-card__desc { font-size: var(--fs-s); color: var(--text-muted); margin: 0 0 var(--space-2); }
.kit-card__abilities { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.kit-card__abilities li { font-size: var(--fs-xs); padding: 1px var(--space-2); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); }
.kit-card__access { font-size: var(--fs-xs); color: var(--text-faint); margin: 0; }
.kit-card__model { align-self: stretch; display: grid; place-items: end center; }
.kit-card__model img { height: 150px; width: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.25)); }
@media (max-width: 420px) {
  .kit-card { grid-template-columns: 48px 1fr 64px; gap: var(--space-3); padding: var(--space-3); }
  .kit-card__icon { width: 48px; height: 48px; }
  .kit-card__icon img { width: 40px; height: 40px; }
  .kit-card__model img { height: 116px; }
}

/* the Kits page's filter */
.kit-filter { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 900px) { .kit-filter { grid-template-columns: auto 1fr; align-items: center; } }
.side-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.side-picker__option {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: var(--space-2) var(--space-4);
  font: 600 var(--fs-m) var(--font-ui); color: var(--text); background: var(--surface);
  border: 2px solid var(--border); border-radius: var(--radius-l); cursor: pointer; box-shadow: var(--bevel);
}
.side-picker__option img { width: 32px; height: 32px; image-rendering: pixelated; }
.side-picker__heads { display: inline-flex; }
.side-picker__heads img + img { margin-left: -10px; }
.side-picker__option[aria-pressed="true"] { border-color: var(--monster-fill); background: var(--monster-soft); }
.side-picker__option--guards[aria-pressed="true"] { border-color: var(--guard-fill); background: var(--guard-soft); }
.side-picker__count { color: var(--text-muted); font-weight: 400; margin-left: var(--space-1); }
.kit-filter__search { display: flex; gap: var(--space-2); }
.kit-results { color: var(--text-muted); font-size: var(--fs-s); }

/* ---------------------------------------------------------------- a kit's page */
.kit-page__grid { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .kit-page__grid { grid-template-columns: 1fr 300px; } }
.kit-page__head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.kit-page__head h1 { margin: 0 0 var(--space-2); }
.kit-page__icon { width: 72px; height: 72px; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.kit-page__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.kit-page__main > section { margin-top: var(--space-6); }
.kit-page__model {
  display: grid; justify-items: center; align-content: start; gap: var(--space-3); padding: var(--space-5);
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--mvg-monster) 22%, transparent), transparent) center 40% / 100% 70% no-repeat,
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-l);
}
.kit-page--guards .kit-page__model { background: radial-gradient(closest-side, color-mix(in srgb, var(--mvg-guard) 26%, transparent), transparent) center 40% / 100% 70% no-repeat, var(--surface); }
@media (min-width: 960px) { .kit-page__model { position: sticky; top: 88px; } }
.kit-page__model img { width: 220px; height: auto; filter: drop-shadow(0 16px 18px rgb(0 0 0 / 0.3)); }
.kit-page__wearing { font-size: var(--fs-s); text-align: center; margin: 0; }
.kit-page__wearing .muted { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; }
.stats div { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.stats dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); }
.stats small { font-family: var(--font-ui); font-size: var(--fs-s); color: var(--text-muted); }
.abilities { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ability { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.ability__facts { color: var(--text-muted); font-size: var(--fs-s); }

/* ---------------------------------------------------------------- the Minecraft hotbar (the game's own HUD sprites) */
.hotbar { --hb: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(6px * var(--hb)); margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-2); }
@media (max-width: 700px) { .hotbar { --hb: 2; } }
@media (max-width: 420px) { .hotbar { --hb: 1.5; } }
.hotbar__bar, .hotbar__offhand { position: relative; image-rendering: pixelated; background-repeat: no-repeat; background-size: 100% 100%; }
.hotbar__bar { width: calc(182px * var(--hb)); height: calc(22px * var(--hb)); background-image: url("../imgs/minecraft_ui/hotbar.png"); }
.hotbar__offhand { width: calc(29px * var(--hb)); height: calc(24px * var(--hb)); background-image: url("../imgs/minecraft_ui/hotbar_offhand_left.png"); }
.mc-slot {
  position: absolute; top: calc(1px * var(--hb)); width: calc(20px * var(--hb)); height: calc(20px * var(--hb));
  padding: calc(2px * var(--hb)); margin: 0; border: 0; background: transparent; color: inherit; cursor: help;
  font: inherit; line-height: 0;
}
.hotbar__offhand .mc-slot { top: calc(2px * var(--hb)); left: calc(1px * var(--hb)); }
.hotbar__bar > :nth-child(1) { left: calc(1px * var(--hb)); }
.hotbar__bar > :nth-child(2) { left: calc(21px * var(--hb)); }
.hotbar__bar > :nth-child(3) { left: calc(41px * var(--hb)); }
.hotbar__bar > :nth-child(4) { left: calc(61px * var(--hb)); }
.hotbar__bar > :nth-child(5) { left: calc(81px * var(--hb)); }
.hotbar__bar > :nth-child(6) { left: calc(101px * var(--hb)); }
.hotbar__bar > :nth-child(7) { left: calc(121px * var(--hb)); }
.hotbar__bar > :nth-child(8) { left: calc(141px * var(--hb)); }
.hotbar__bar > :nth-child(9) { left: calc(161px * var(--hb)); }
.mc-slot img { width: 100%; height: 100%; }
.mc-slot:hover::after, .mc-slot:focus-visible::after {
  content: ""; position: absolute; inset: calc(2px * var(--hb)); background: rgb(255 255 255 / 0.35); pointer-events: none;
}
.mc-slot:focus-visible { outline-offset: -2px; }
.mc-slot__count {
  position: absolute; right: calc(1px * var(--hb)); bottom: calc(1px * var(--hb));
  font: 700 calc(8px * var(--hb)) / 1 var(--font-display); color: #FFFFFF; text-shadow: calc(1px * var(--hb)) calc(1px * var(--hb)) 0 #3F3F3F;
}
.mc-slot--glint img { animation: glint 2.4s ease-in-out infinite; }
@keyframes glint {
  0%, 100% { filter: drop-shadow(0 0 1px rgb(193 102 231 / 0.55)); }
  50% { filter: drop-shadow(0 0 4px rgb(193 102 231 / 0.95)) brightness(1.12); }
}
/* the tooltip over its slot: open on hover and keyboard focus, closed by Escape (site.js) */
.mc-slot .mc-tooltip {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: max-content; text-align: left; line-height: 1.35; pointer-events: none; cursor: default;
}
.hotbar__bar > :nth-child(-n+3) .mc-tooltip, .hotbar__offhand .mc-tooltip { left: 0; transform: none; }
.hotbar__bar > :nth-child(n+7) .mc-tooltip { left: auto; right: 0; transform: none; }
.mc-slot:hover .mc-tooltip, .mc-slot:focus .mc-tooltip { display: block; }
.mc-slot.mc-slot--dismissed .mc-tooltip { display: none; }
.mc-tooltip > span { display: block; }

/* ---------------------------------------------------------------- modifiers */
.modifier-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.modifier-card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.section--tinted .modifier-card { background: var(--bg); }
.modifier-card img { width: 48px; height: 48px; flex: none; padding: var(--space-1); background: #1B1520; border-radius: var(--radius-m); }
.modifier-card__name { font-size: var(--fs-l); margin: 0 0 var(--space-1); padding: 2px var(--space-2); display: inline-block; background: #1B1520; border-radius: var(--radius-s); text-shadow: 1px 1px 0 rgb(0 0 0 / 0.5); }
.modifier-card p { margin: 0; color: var(--text-muted); font-size: var(--fs-s); }

/* ---------------------------------------------------------------- news and balance changes */
.updates { display: grid; gap: var(--space-7); }
@media (min-width: 960px) { .updates { grid-template-columns: 1.4fr 1fr; } }
.post-list { display: grid; gap: var(--space-3); }
.post-list--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.post-card { position: relative; padding: var(--space-4) var(--space-5); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-l); }
.post-list--wide .post-card { background: var(--surface); }
.post-card__date { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--space-1); }
.post-card__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-l); margin: 0 0 var(--space-2); }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a { color: var(--monster-ink); }
.post-card__excerpt { margin: 0; color: var(--text-muted); font-size: var(--fs-s); }
/* Balance changes look like a changelog, not like articles. */
.changelog { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--border-strong); }
.changelog li { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding: var(--space-2) 0 var(--space-2) var(--space-4); }
.changelog li::before { content: ""; position: absolute; left: -7px; top: 1.05em; width: 11px; height: 11px; background: var(--mvg-guard); border: 2px solid var(--bg); }
.changelog time { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--text-muted); padding-top: 2px; }
.changelog--full h2 { font-family: var(--font-ui); font-size: var(--fs-l); margin: 0 0 var(--space-1); }
.changelog--full p { margin: 0; color: var(--text-muted); font-size: var(--fs-s); }
@media (max-width: 480px) { .changelog li { grid-template-columns: 1fr; gap: 0; } }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-6) 0; }

.post { max-width: 76ch; padding-bottom: var(--space-6); }
.post__head h1 { font-size: var(--fs-2xl); }
.post__media { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.post__media img { border-radius: var(--radius-m); border: 1px solid var(--border); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
.prose h3 { font-size: var(--fs-l); margin-top: var(--space-5); }
.prose h4 { font-family: var(--font-ui); margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-1); }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); border-left: 4px solid var(--border-strong); color: var(--text-muted); }
.prose pre { overflow-x: auto; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-m); }
.prose code { background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-s); }
.prose pre code { background: none; padding: 0; }
.spoiler { background: var(--text); color: transparent; border-radius: var(--radius-s); cursor: pointer; }
.spoiler:hover, .spoiler:focus { background: var(--surface-3); color: var(--text); }

/* ---------------------------------------------------------------- community, calls to action */
.link-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.link-card { display: grid; gap: var(--space-1); height: 100%; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); color: var(--text); text-decoration: none; }
.link-card:hover { border-color: var(--monster-fill); }
.link-card strong { font-family: var(--font-display); font-size: var(--fs-l); }
.link-card span { color: var(--text-muted); font-size: var(--fs-s); }
.community-rules { margin-top: var(--space-6); }
.play-cta { padding: var(--space-6); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--monster-soft), var(--guard-soft)); border: 1px solid var(--border); }
.store-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); }
.store-cta h2 { margin-bottom: var(--space-2); }
.store-cta p { margin: 0; color: var(--text-muted); max-width: 60ch; }

/* ---------------------------------------------------------------- how to play */
.guide { display: grid; gap: var(--space-6); padding-bottom: var(--space-6); }
@media (min-width: 960px) { .guide { grid-template-columns: 220px 1fr; } }
.guide__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.guide__toc a { display: block; padding: var(--space-1) var(--space-3); border-left: 3px solid var(--border); color: var(--text-muted); text-decoration: none; }
.guide__toc a:hover { border-left-color: var(--monster-fill); color: var(--text); }
@media (min-width: 960px) { .guide__toc { position: sticky; top: 88px; align-self: start; } }
.guide__body { max-width: 76ch; }
.guide__body section { scroll-margin-top: 88px; padding-bottom: var(--space-4); }
.guide__body section + section { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; }

/* ---------------------------------------------------------------- footer extras, errors */
.site-footer__tagline { margin-top: var(--space-3); }
.site-footer__theme { display: grid; gap: var(--space-1); font-weight: 400; }
.site-footer__theme select { min-height: 36px; padding: var(--space-1) var(--space-2); max-width: 180px; }
.error-page { padding: var(--space-8) 0; text-align: center; }
.error-page__code { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--monster-ink); margin: 0; }
.error-page .lede { margin-inline: auto; }

/* The footer's language selector and a legal page's translation notice. */
.site-footer__language { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.site-footer__language label { display: grid; gap: var(--space-1); }
.legal-translation-notice { margin-bottom: var(--space-5); }