/* The field manual. Shares the landing page's palette and type so it reads as
   the same object, but lays out for reading rather than for selling: one
   measure of text, a contents rail that stays put, and numbers that are
   visibly numbers. */

:root {
  --void: #0B0D0B;
  --panel: #121612;
  --raised: #1A211A;
  --line: #263026;
  --bone: #E5E4DA;
  --muted: #7E877B;
  --toxic: #86C232;
  --toxic-hi: #A8E063;
  --arterial: #E33B2E;
  /* The manual's diagrams use this and it lived only in landing.css, so every
     Survive bar on the wave chart fell back to black. */
  --gore: #8E1F16;
  --amberish: #E8C15A;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cond: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Impact, sans-serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--void); color: var(--bone);
  font-family: var(--sans); font-size: 16px; line-height: 1.68; }
a { color: inherit; }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--line); background: rgba(10,13,10,.9);
  position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.mast-in { width: min(1180px, 92vw); margin: 0 auto; padding: 14px 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mast .wordmark { font-family: var(--cond); font-weight: bold; font-size: 20px; letter-spacing: .2em;
  line-height: 1; text-decoration: none; }
.mast .wordmark small { display: block; font-size: 8px; letter-spacing: .42em; color: var(--toxic); margin-top: 4px; }
.mast-stamp { font-family: var(--cond); text-transform: uppercase; letter-spacing: .24em;
  font-size: 10px; font-weight: bold; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 10px; }
.mast-play { margin-left: auto; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: bold; font-size: 13px; color: #FF7A6E; text-decoration: none;
  border: 1px solid rgba(227,59,46,.55); border-radius: 999px; padding: 8px 18px; }
.mast-play:hover { border-color: var(--arterial); box-shadow: 0 0 22px rgba(227,59,46,.25); }
/* On a phone the masthead was wrapping to three rows and eating a third of the
   first screen. The clearance stamp is flavour; the wordmark and the way into
   the game are not. */
@media (max-width: 560px) {
  .mast-in { flex-wrap: nowrap; gap: 12px; }
  .mast-stamp { display: none; }
  .mast .wordmark { font-size: 16px; letter-spacing: .13em; }
  .mast-play { margin-left: auto; font-size: 12px; padding: 7px 13px; white-space: nowrap; }
}

/* ---------- page hero ---------- */
/* A 12:5 plate across the full width with the title sitting on it. The picture
   is the fastest way to know which page you are on, so it comes before the
   words and it is never decorative-only — every plate is captioned. */
.pagehero { position: relative; margin: 0; isolation: isolate;
  min-height: clamp(300px, 42vw, 520px); display: flex; align-items: flex-end; overflow: hidden; }
.pagehero img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%; z-index: -2; }
.pagehero-scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,13,11,.72) 0%, rgba(11,13,11,.15) 34%, rgba(11,13,11,.82) 78%, var(--void) 100%),
    linear-gradient(90deg, rgba(11,13,11,.8) 0%, rgba(11,13,11,.15) 62%, transparent 100%); }
.pagehero-in { position: relative; width: min(1460px, 94vw); margin: 0 auto; padding: 0 0 30px; }
.pagehero .kicker { margin-bottom: 8px; }
.pagehero h1 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(38px, 7.2vw, 82px); line-height: .93; margin: 0 0 10px; text-wrap: balance;
  text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.pagehero .standfirst { max-width: 60ch; margin: 0; font-size: clamp(16px, 1.5vw, 19px);
  color: #D2D6C8; text-shadow: 0 2px 20px rgba(0,0,0,.9); }
.pagehero figcaption { position: absolute; right: 0; bottom: 0; z-index: 1;
  font-family: var(--mono); font-size: 10px; color: rgba(229,228,218,.5);
  background: rgba(6,8,6,.62); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  padding: 6px 12px; max-width: min(46ch, 80vw); }
.pagehero figcaption span { color: var(--toxic); text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 700px) {
  .pagehero { min-height: 340px; }
  .pagehero figcaption { display: none; }
}

/* ---------- shell ---------- */
/* Three columns at desk width: where you are in the manual, the argument, and
   what is on this page. The middle column keeps a reading measure — using the
   whole width should not mean setting body text 140 characters wide. */
.shell { width: min(1460px, 94vw); margin: 0 auto; display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 236px; gap: 56px; padding: 46px 0 90px; }
@media (max-width: 1180px) {
  .shell { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .onpage { display: none; }
}
/* minmax(0, …) rather than 1fr: a bare 1fr track takes its minimum from the
   item's min-content, and the widest table in here carries min-width: 380px —
   which on a 375px phone pushed the whole page sideways. */
@media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 26px; } }

/* search */
/* Sits at the head of the rail, so the two ways of finding a page — browse the
   list, or name the thing — are in the same place. */
.search { position: relative; margin: 0 0 22px; }
.search input { width: 100%; background: var(--panel); color: var(--bone);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 30px 8px 10px;
  font-family: var(--sans); font-size: 13.5px; }
.search input::placeholder { color: #5C6659; }
.search input:focus { outline: none; border-color: var(--toxic); }
.search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.search kbd { position: absolute; right: 8px; top: 8px; pointer-events: none;
  font-family: var(--mono); font-size: 10px; color: #4A5547;
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.search input:focus ~ kbd { display: none; }
/* The results overlay the page rather than pushing the rail around: the list
   under it should still be where it was when you started typing. */
.search-out { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0;
  width: max(100%, 320px); max-height: min(60vh, 460px); overflow-y: auto;
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.search-out a { display: block; padding: 9px 12px; text-decoration: none; border: none;
  border-bottom: 1px solid var(--line); }
.search-out a:last-child { border-bottom: none; }
.search-out a:hover, .search-out a.on { background: var(--panel); }
.search-out .s-t { display: block; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; font-weight: bold; color: var(--bone); }
.search-out .s-w { text-transform: none; letter-spacing: 0; font-family: var(--sans);
  font-size: 11.5px; font-weight: normal; color: var(--toxic-hi); }
.search-out .s-w::before { content: '› '; color: #4A5547; }
.search-out .s-d { display: block; color: var(--muted); font-size: 12.5px;
  line-height: 1.45; margin-top: 3px; }
.search-out mark { background: rgba(134,194,50,.22); color: var(--toxic-hi); border-radius: 2px; }
.search-none { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; }

/* contents rail */
/* The scroll lives on the list, not on the rail: an overflow container clips
   anything absolutely positioned inside it, and the search results drop out of
   the top of this one. */
.rail { position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 100px);
  display: flex; flex-direction: column; }
.rail-scroll { overflow-y: auto; min-height: 0; }
@media (max-width: 900px) {
  .rail { position: static; max-height: none; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
  .rail-scroll { overflow-y: visible; }
}
.rail-head { font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; font-weight: bold; color: var(--muted); margin: 0 0 10px; }
.rail ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: sec; }
.rail li { counter-increment: sec; }
.rail li a { display: flex; gap: 9px; padding: 5px 0; font-size: 14px; color: var(--muted);
  text-decoration: none; line-height: 1.35; }
.rail li a::before { content: counter(sec, decimal-leading-zero); font-family: var(--mono);
  font-size: 10px; color: #3E4A3C; flex: none; padding-top: 3px; }
.rail li a:hover { color: var(--bone); }
.rail li a.here { color: var(--toxic-hi); }
.rail li a.here::before { color: var(--toxic); }

/* ---------- article ---------- */
article { max-width: 74ch; font-size: 16.5px; }
.kicker { font-family: var(--cond); text-transform: uppercase; letter-spacing: .22em;
  font-size: 10px; font-weight: bold; color: var(--toxic); margin: 0 0 10px; }
.standfirst { color: #C2C6B8; font-size: 18px; margin: 0 0 30px; text-wrap: pretty; }
article > *:first-child { margin-top: 0; }
article h2 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: 26px; margin: 46px 0 12px; padding-top: 24px; border-top: 1px solid var(--line);
  scroll-margin-top: 84px; }
article h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em;
  font-size: 16px; margin: 26px 0 8px; color: #C2C6B8; }
article p { margin: 0 0 15px; }
article ul, article ol { margin: 0 0 15px; padding-left: 20px; }
article li { margin-bottom: 7px; }
article strong { color: #fff; font-weight: 600; }
article em { color: var(--amberish); font-style: normal; }
article a { color: var(--toxic-hi); text-decoration: none; border-bottom: 1px solid rgba(168,224,99,.3); }
article a:hover { border-bottom-color: var(--toxic-hi); }
article code { font-family: var(--mono); font-size: .87em; background: var(--raised);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: #C7D3BB; }

/* A live number: rendered from the game's own constants, not typed by hand. */
.n { font-family: var(--mono); font-size: .92em; color: var(--toxic-hi); font-weight: 600;
  white-space: nowrap; }

/* ---------- figures ---------- */
/* Photographic plates and drawn diagrams share a frame so a page reads as one
   document. Both break out slightly wider than the text measure — a figure that
   is exactly as wide as the prose reads as an interruption rather than an aside. */
/* No breakout. The three-column shell puts a rail immediately to the right of
   the text, and a figure wider than its column lands on top of it. */
.fig { margin: 30px 0; width: 100%; }
.fig-plate { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0E120E; }
.fig-plate img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5;
  object-fit: cover; filter: saturate(.78); }
.fig figcaption { font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: var(--muted); padding: 9px 14px; }
.fig-plate figcaption { border-top: 1px solid var(--line); background: rgba(6,8,6,.5); }
.fig figcaption span { color: var(--toxic); text-transform: uppercase; letter-spacing: .13em; }
.fig figcaption b { color: var(--bone); font-weight: 600; }
.fig figcaption em { color: var(--amberish); font-style: normal; }
/* A real panel from the game, mounted in a shadow root (see ui-specimen.js).
   Framed like a specimen rather than dressed up as a screenshot: a hairline
   box, a corner tab, and no drop shadow pretending it is a photograph. */
.fig-ui { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0B0D0B; position: relative; }
.fig-ui .ui-mount { display: block; min-height: 2px; }
.fig-ui figcaption { border-top: 1px solid var(--line); background: rgba(6,8,6,.5); }
/* Until the mount succeeds there is nothing to look at, so the frame stays out
   of the way; if it fails outright the figure is just its caption. */
.fig-ui:not(.ui-on) { border-style: dashed; }
.fig-ui.ui-off .ui-mount { display: none; }

.fig-body { border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), #0E120E); padding: 18px 20px; }
.dsvg { display: block; width: 100%; height: auto; overflow: visible; }

/* shared diagram type */
.dsvg .head { font-family: var(--cond); font-size: 10px; font-weight: bold; letter-spacing: .18em;
  fill: var(--muted); text-transform: uppercase; }
.dsvg .head.ok { fill: var(--toxic); }
.dsvg .head.bad { fill: #FF7A6E; }
.dsvg .tick { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.dsvg .note { font-family: var(--mono); font-size: 9px; fill: var(--toxic); }
.dsvg .note.bad { fill: #FF7A6E; }
.dsvg .sub { font-family: var(--mono); font-size: 8px; fill: #55604F; }
/* Legend swatches must match the thing they label, so the map's keys reuse the
   map's own cell fills rather than the chart palette. */
.dsvg .key.surv { fill: var(--gore); }
.dsvg .key.ward { fill: rgba(232,193,90,.55); }
.dsvg .key.road { fill: #2C3A2C; }
.dsvg .key.block { fill: #1A211A; stroke: var(--line); }
.dsvg .key.run { fill: #24331F; stroke: var(--toxic); }
.dsvg .divider { stroke: var(--line); stroke-width: 1; }

/* sections diagram */
.dsvg .cell rect { fill: #1A211A; stroke: var(--line); stroke-width: 1; }
.dsvg .cell.ok rect { fill: rgba(134,194,50,.14); stroke: rgba(134,194,50,.5); }
.dsvg .cell.you rect { fill: rgba(134,194,50,.3); stroke: var(--toxic); stroke-width: 1.5; }
.dsvg .cell.open rect { fill: rgba(227,59,46,.09); stroke: rgba(227,59,46,.45); stroke-dasharray: 3 3; }
.dsvg .cell .lvl { font-family: var(--cond); font-size: 17px; font-weight: bold; fill: var(--bone); text-anchor: middle; }
.dsvg .cell.open .lvl { fill: #FF7A6E; }
.dsvg .cell .tag { font-family: var(--mono); font-size: 7px; fill: var(--muted); text-anchor: middle; }
.dsvg .ingress path { stroke: var(--arterial); stroke-width: 1.5; fill: none; }
.dsvg .ingress marker path, .dsvg marker path { fill: var(--arterial); stroke: none; }

/* clock diagram */
.dsvg .band.day { fill: rgba(232,193,90,.35); stroke: rgba(232,193,90,.6); }
.dsvg .band.night { fill: #161D1B; stroke: #2B3A38; }
.dsvg .band.convoy { fill: rgba(134,194,50,.3); stroke: var(--toxic); }
.dsvg .band.ap { fill: rgba(134,194,50,.28); stroke: rgba(134,194,50,.65); }
.dsvg .inband { font-family: var(--cond); font-size: 10px; font-weight: bold; letter-spacing: .14em;
  fill: var(--bone); text-anchor: middle; }
.dsvg .inband.dim { fill: #8C978A; }

/* wave diagram */
.dsvg .wbar.surv { fill: var(--gore); }
.dsvg .wbar.ward { fill: rgba(232,193,90,.55); }
.dsvg .wnum { font-family: var(--mono); font-size: 8px; text-anchor: middle; }
.dsvg .wnum.surv { fill: #FF7A6E; }
.dsvg .wnum.ward { fill: var(--amberish); }

/* map diagram */
.dsvg .mc.block { fill: #1A211A; }
.dsvg .mc.road { fill: #2C3A2C; }
.dsvg .mc.run.block { fill: #24331F; }
.dsvg .mc.run.road { fill: #3A5030; }
.dsvg .mdiv { stroke: rgba(227,59,46,.45); stroke-width: 1; stroke-dasharray: 4 3; }
.dsvg .mq { font-family: var(--cond); font-size: 8px; font-weight: bold; letter-spacing: .1em;
  fill: #7E877B; text-anchor: middle; text-transform: uppercase; }
.dsvg .mq.run { fill: var(--toxic-hi); }

/* grades diagram */
.dsvg .gband { stroke-width: 1; }
.dsvg .gband.lost { fill: #2A2F29; stroke: #3E4A3C; }
.dsvg .gband.pyrrhic { fill: rgba(142,31,22,.5); stroke: var(--gore); }
.dsvg .gband.survivors { fill: rgba(232,193,90,.3); stroke: rgba(232,193,90,.6); }
.dsvg .gband.holdfast { fill: rgba(134,194,50,.28); stroke: rgba(134,194,50,.6); }
.dsvg .gband.sanctuary { fill: rgba(168,224,99,.5); stroke: var(--toxic-hi); }
.dsvg .gtick { font-family: var(--mono); font-size: 8px; fill: var(--muted); }
.dsvg .glabel { font-family: var(--cond); font-size: 9.5px; font-weight: bold; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--bone); }
.dsvg .glabel.sanctuary { fill: var(--toxic-hi); }
.dsvg .glabel.holdfast { fill: var(--toxic); }
.dsvg .glabel.survivors { fill: var(--amberish); }
.dsvg .glabel.pyrrhic { fill: #FF7A6E; }

/* ---------- tables ---------- */
.tw { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 380px; font-size: 14px; }
thead th { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: 10px;
  color: var(--muted); text-align: left; padding: 10px 14px; background: var(--raised);
  border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td { padding: 9px 14px; border-bottom: 1px solid #1A211A; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--bone); }
tbody td.num { font-family: var(--mono); color: var(--toxic-hi); white-space: nowrap; }

/* ---------- furniture ---------- */
/* The in-fiction chrome sits AROUND the rules, never in place of them: an order
   in the Authority's voice, and the plain-English rule directly under it. */
.order { border-left: 2px solid rgba(227,59,46,.5); background: rgba(227,59,46,.05);
  padding: 12px 16px; margin: 0 0 20px; border-radius: 0 8px 8px 0; }
.order b { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em;
  font-size: 10px; color: #FF7A6E; margin-bottom: 4px; }
.order p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #D6D9CB; }

.short { border: 1px solid rgba(232,193,90,.35); border-radius: 12px; background: rgba(232,193,90,.05);
  padding: 16px 20px; margin: 36px 0 0; }
.short b { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: 10px; color: var(--amberish); margin-bottom: 8px; }
.short ul { margin: 0; padding-left: 18px; }
.short li { margin-bottom: 5px; }
.short li::marker { color: var(--amberish); }

.warn { border-left: 2px solid var(--amberish); background: rgba(232,193,90,.06);
  padding: 12px 16px; margin: 0 0 20px; border-radius: 0 8px 8px 0; font-size: 15px; }
.warn b { color: var(--amberish); }

/* ---------- mode scope ---------- */
/* Which way of playing a page (or a boxed rule) belongs to. Red is the Drill's
   colour everywhere on the site, so run-scoped things wear red here too. */
.toc-legend { max-width: 74ch; color: var(--muted); font-size: 14px; margin: 0 0 6px; }

/* A rule that only exists inside a run, sitting on an all-modes page. Same
   furniture as .warn, in the run colour, always opening with the same words. */

/* ---------- on this page ---------- */
.onpage { position: sticky; top: 78px; align-self: start; display: flex; flex-direction: column; gap: 22px; }
.onpage-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.onpage-list li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px;
  border-left: 1px solid transparent; font-size: 13px; line-height: 1.35;
  color: var(--muted); text-decoration: none; }
.onpage-list li a:hover { color: var(--bone); border-left-color: var(--toxic); }

.glance { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; }
.glance dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin: 0; }
.glance dt { font-size: 12px; color: var(--muted); }
.glance dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--toxic-hi); text-align: right; }
.glance-cta { display: block; text-align: center; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .12em; font-weight: bold; font-size: 13px; color: #FF7A6E; text-decoration: none;
  border: 1px solid rgba(227,59,46,.5); border-radius: 999px; padding: 10px 14px; }
.glance-cta:hover { border-color: var(--arterial); box-shadow: 0 0 22px rgba(227,59,46,.22); }

/* ---------- contents page ---------- */
/* No plate above it and no aside beside it, so the grid is rail + page. */
.shell:has(.toc-article) { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 900px) { .shell:has(.toc-article) { grid-template-columns: minmax(0, 1fr); } }
.toc-article { max-width: 80ch; }

/* The head a page wears when it has no photograph to sit on. Same type as the
   plate's, one step down, on the page's own background. */
.pagehead { margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(34px, 5vw, 58px); line-height: .95; margin: 6px 0 12px; }
.pagehead .standfirst { max-width: 62ch; margin: 0; color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; }

/* Twelve lines, readable in one screen. A row is a rule, a number, a title and
   a sentence — the same furniture as the rail, at reading size. */
.toc { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0 16px;
  padding: 13px 10px 14px 2px; text-decoration: none; border: none;
  transition: background-color .14s ease; }
.toc a:hover { background: var(--panel); }
.toc .i { font-family: var(--mono); font-size: 12px; color: #3E4A3C; padding-top: 4px; }
.toc a:hover .i { color: var(--toxic); }
.toc .t { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: 19px; font-weight: bold; color: var(--bone); }
.toc a:hover .t { color: var(--toxic-hi); }
.toc .d { grid-column: 2; color: var(--muted); font-size: 13.5px; margin-top: 2px; line-height: 1.5; }

/* ---------- pager + footer ---------- */
.pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 44px;
  padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--cond);
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: bold; }
.pager a { color: var(--muted); text-decoration: none; border: none; }
.pager a:hover { color: var(--toxic-hi); }
.pager .sp { margin-left: auto; }

footer { border-top: 1px solid var(--line); }
.foot-in { width: min(1180px, 92vw); margin: 0 auto; padding: 22px 0 56px;
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); }
.foot-in a { color: var(--muted); text-decoration: none; }
.foot-in a:hover { color: var(--toxic-hi); }