/* ReTanks — main site.
   The seasonal artwork is a framed picture 2000×520 units; --u is one of those units.
   The launch console hangs from the girder over the calmer left part of the picture, the hero
   tank stands on the right. --k is the component unit: equal to --u on desktop, fixed on
   phones, where the picture shrinks but controls must stay finger-sized.

   Surfaces come in three kinds, and nothing else:
     steel  — raised metal (frames, bars, plates): gradient, light top edge, dark bottom edge
     well   — recessed dark compartment that holds text
     amber  — the one accent: START, numbers, hazard stripes */

:root {
  --u: clamp(1px, calc(100vw / 1750), 1.4px);
  --k: var(--u);
  --wrap: min(100vw - 32px, calc(var(--u) * 1272));
  /* when the window is narrower than the composition, slide the picture right so the tank clears the console */
  --shift: max(0px, calc((var(--u) * 1272 - (100vw - 32px)) / 2));

  --deck: #0a0a09;
  --steel-hi: #32332f;
  --steel: #20211e;
  --steel-lo: #141513;
  --well: #090a09;
  --pit: #040404;
  --rib: #000;
  --seam: #1c1d1a;
  --text: #dcd9ce;
  --dim: #a9a798;
  --white: #f5f2e7;
  --amber: #f5ac1c;
  --ink: #1a1306;
  --green: #8fd63f;
  --link: #f0b440;

  --f-stencil: "Big Shoulders Stencil", "Stencil Std", Impact, "Arial Narrow", sans-serif;
  --f-text: "PT Sans", Tahoma, Verdana, sans-serif;

  --steel-face: linear-gradient(var(--steel-hi), var(--steel) 45%, var(--steel-lo));
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .7);
  --sunk: inset 0 calc(var(--k) * 2) calc(var(--k) * 5) rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .08);
  --bolt: #6c6d66 0, #45463f calc(var(--k) * 1.7), #000000 calc(var(--k) * 2.7), rgba(0, 0, 0, 0) calc(var(--k) * 3.4);
  --hazard: repeating-linear-gradient(-45deg, var(--ink) 0 calc(var(--k) * 7), transparent calc(var(--k) * 7) calc(var(--k) * 14));
}
@media (max-width: 1000px) { :root { --u: calc(100vw / 1000); } }
@media (max-width: 760px)  { :root { --u: 1px; --k: 1px; --shift: 0px; } }

:root[data-season="q1"] { --scene: url(../scenes/q1.jpg); }
:root[data-season="q2"] { --scene: url(../scenes/q2.jpg); }
:root[data-season="q3"] { --scene: url(../scenes/q3.jpg); }
:root[data-season="q4"] { --scene: url(../scenes/q4.jpg); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--deck); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font: max(13px, calc(var(--k) * 14)) / 1.45 var(--f-text);
  -webkit-text-size-adjust: 100%;
  /* blackened steel plating: each plate has its own sheen, a black seam with a light edge, a rivet per corner */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .8)),
    radial-gradient(circle at 14px 14px, #55564f 0, #30312c 1.6px, #000 2.8px, rgba(0, 0, 0, 0) 3.6px) 0 0 / 260px 260px,
    radial-gradient(circle at 246px 14px, #55564f 0, #30312c 1.6px, #000 2.8px, rgba(0, 0, 0, 0) 3.6px) 0 0 / 260px 260px,
    radial-gradient(circle at 14px 246px, #55564f 0, #30312c 1.6px, #000 2.8px, rgba(0, 0, 0, 0) 3.6px) 0 0 / 260px 260px,
    radial-gradient(circle at 246px 246px, #55564f 0, #30312c 1.6px, #000 2.8px, rgba(0, 0, 0, 0) 3.6px) 0 0 / 260px 260px,
    linear-gradient(#000 0 2px, rgba(255, 255, 255, .11) 2px 3px, rgba(0, 0, 0, 0) 3px) 0 0 / 260px 260px,
    linear-gradient(90deg, #000 0 2px, rgba(255, 255, 255, .085) 2px 3px, rgba(0, 0, 0, 0) 3px) 0 0 / 260px 260px,
    linear-gradient(155deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 40%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .4)) 0 0 / 260px 260px,
    #151614;
}
a { color: var(--link); }
a:hover { color: #ffd070; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.page { overflow-x: clip; }
.wrap { width: var(--wrap); margin-inline: auto; }

/* Stencil is for names and headings; small labels use the text face so they stay legible. */
.nav a, .lang a, .plate, .chip, .console__state b, .server__title, .tag, .panel__head, .steps b, .modes > li > b, .links b, .foot__nav a {
  font-family: var(--f-stencil);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.console__servers, .start__sub, .gauges dt, .ranks th, .news time span, .panel__head a {
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ───────────── Girder ───────────── */

.girder {
  position: relative;
  z-index: 6;
  height: calc(var(--k) * 62);
  border-bottom: 1px solid #000;
  background:
    radial-gradient(circle at 50% 50%, var(--bolt)) 0 calc(100% - var(--k) * 2) / calc(var(--k) * 53) calc(var(--k) * 8) repeat-x,
    linear-gradient(rgba(0, 0, 0, 0) calc(100% - var(--k) * 13), rgba(0, 0, 0, .5) calc(100% - var(--k) * 13), rgba(0, 0, 0, .5) calc(100% - var(--k) * 12), rgba(255, 255, 255, .08) calc(100% - var(--k) * 12), rgba(255, 255, 255, .08) calc(100% - var(--k) * 11), rgba(0, 0, 0, .22) calc(100% - var(--k) * 11)),
    var(--steel-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 calc(var(--k) * 4) calc(var(--k) * 12) rgba(0, 0, 0, .75);
}
.girder__in { display: flex; align-items: center; gap: calc(var(--k) * 24); height: calc(100% - var(--k) * 12); }

.logo { display: flex; align-items: center; gap: calc(var(--k) * 10); color: var(--white); text-decoration: none; font-family: var(--f-stencil); text-transform: uppercase; text-shadow: 0 calc(var(--k) * 1.5) 0 #000; }
.logo svg { width: calc(var(--k) * 38); height: calc(var(--k) * 38); filter: drop-shadow(0 1px 0 #000); }
.logo__word { display: grid; line-height: .9; }
.logo__word b { font-size: calc(var(--k) * 29); font-weight: 900; letter-spacing: .05em; }
.logo__word i { color: var(--amber); font-style: normal; }

/* navigation: a row of raised plates */
.nav { display: flex; gap: calc(var(--k) * 3); margin-right: auto; }
.nav a, .lang a, .plate {
  display: block;
  border: 1px solid #000;
  border-radius: calc(var(--k) * 2);
  background: linear-gradient(#383934, #20211e 55%, #171816);
  box-shadow: var(--bevel);
  color: var(--white);
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}
.nav a { padding: calc(var(--k) * 8) calc(var(--k) * 13) calc(var(--k) * 7); font-size: calc(var(--k) * 16); }
.nav a:hover, .nav a:focus-visible, .nav a.is-active, .lang a.is-active, .plate:hover, .plate:focus-visible {
  background: linear-gradient(#ffc93a, #f0a01c 55%, #d98512);
  box-shadow: inset 0 1px 0 rgba(255, 244, 200, .8), inset 0 -1px 0 rgba(90, 45, 0, .5);
  color: var(--ink);
  text-shadow: none;
}
.nav a:active { transform: translateY(1px); }

.lang { display: flex; gap: calc(var(--k) * 3); }
.lang a { padding: calc(var(--k) * 6) calc(var(--k) * 8) calc(var(--k) * 5); color: var(--text); font-size: calc(var(--k) * 13.5); }
.lang a:hover { color: #fff; }
.lang a.is-active:hover { color: var(--ink); }

/* ───────────── Stage: the framed picture and the launch console ───────────── */

.stage {
  height: calc(var(--u) * 520);
  padding-top: calc(var(--k) * 40);
  background: var(--scene) no-repeat calc(50% + var(--shift)) 0 / calc(var(--u) * 2000) calc(var(--u) * 520) var(--deck);
}

.console {
  position: relative;
  z-index: 5;
  width: calc(var(--k) * 496);
  padding: calc(var(--k) * 12);
  border: 1px solid #000;
  border-radius: calc(var(--k) * 3);
  background:
    radial-gradient(circle at calc(var(--k) * 7) calc(var(--k) * 7), var(--bolt)),
    radial-gradient(circle at calc(100% - var(--k) * 7) calc(var(--k) * 7), var(--bolt)),
    radial-gradient(circle at calc(var(--k) * 7) calc(100% - var(--k) * 7), var(--bolt)),
    radial-gradient(circle at calc(100% - var(--k) * 7) calc(100% - var(--k) * 7), var(--bolt)),
    var(--steel-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 calc(var(--k) * 12) calc(var(--k) * 30) rgba(0, 0, 0, .8);
}
/* two struts bolt the console to the girder */
.console::before, .console::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: calc(var(--k) * 16);
  height: calc(var(--k) * 42);
  border-inline: 1px solid #000;
  background: linear-gradient(90deg, #0d0d0c, #3a3b36 40%, #1d1e1b 70%, #0d0d0c);
}
.console::before { left: calc(var(--k) * 46); }
.console::after { right: calc(var(--k) * 46); }

.console__state { display: flex; align-items: center; gap: calc(var(--k) * 9); padding: 0 calc(var(--k) * 12) calc(var(--k) * 9); line-height: 1; text-shadow: 0 1px 0 #000; }
.console__state b { color: var(--white); font-size: calc(var(--k) * 19); }
.console__servers { margin-left: auto; color: #c4c1b3; font-size: max(11px, calc(var(--k) * 11.5)); }
.lamp {
  position: relative;
  flex: none;
  width: calc(var(--k) * 12);
  height: calc(var(--k) * 12);
  border: 1px solid #000;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6ffb0, var(--green) 45%, #3f7d12);
  box-shadow: 0 0 calc(var(--k) * 6) rgba(143, 214, 63, .6), 0 1px 0 rgba(255, 255, 255, .15);
  animation: lamp-glow 1.8s ease-in-out infinite;
}
/* the pulse: a green ring that swells out of the lamp and fades */
.lamp::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  animation: lamp-ring 1.8s ease-out infinite;
}
@keyframes lamp-glow {
  0%, 100% { box-shadow: 0 0 calc(var(--k) * 3) rgba(143, 214, 63, .4), 0 1px 0 rgba(255, 255, 255, .15); }
  18% { box-shadow: 0 0 calc(var(--k) * 11) calc(var(--k) * 2) rgba(160, 235, 70, .85), 0 1px 0 rgba(255, 255, 255, .15); }
}
@keyframes lamp-ring {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(2.9); opacity: 0; }
}
[data-state="busy"] .lamp { background: radial-gradient(circle at 35% 30%, #ffe2a8, #f09a2a 45%, #8a4a08); box-shadow: 0 0 calc(var(--k) * 7) rgba(240, 150, 40, .7); animation: none; }
[data-state="busy"] .lamp::after, [data-state="offline"] .lamp::after { display: none; }
[data-state="offline"] .lamp { background: radial-gradient(circle at 35% 30%, #ffb3a0, #c8321e 45%, #6a1208); box-shadow: 0 0 calc(var(--k) * 7) rgba(200, 50, 30, .7); animation: none; }

/* Battle start: a hazard-amber plate set into the console */
.start {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--k) * 7);
  height: calc(var(--k) * 106);
  padding-inline: calc(var(--k) * 46);
  border: calc(var(--k) * 2) solid #000;
  border-radius: calc(var(--k) * 2);
  background: linear-gradient(#ffcb3c, #f6a81d 48%, #e58f15 52%, #d98110);
  box-shadow: inset 0 calc(var(--k) * 2) 0 rgba(255, 246, 205, .75), inset 0 calc(var(--k) * -3) 0 rgba(100, 48, 0, .45), 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--ink);
  text-decoration: none;
  transition: filter .14s;
}
.start::before, .start::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--k) * 30); background: var(--hazard); }
.start::before { left: 0; }
.start::after { right: 0; transform: scaleX(-1); }
.start__label {
  font: 900 calc(var(--k) * 56) / .82 var(--f-stencil);
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 240, 180, .6);
  white-space: nowrap;
}
.start__sub { font-size: max(11px, calc(var(--k) * 12)); line-height: 1; white-space: nowrap; }
.start__sub i { font-style: normal; opacity: .55; }
a.start:hover, a.start:focus-visible { color: #000; filter: brightness(1.1); }
a.start:active { transform: translateY(1px); filter: brightness(.94); }

.start--locked { background: linear-gradient(#262724, #171816); box-shadow: var(--bevel); color: #c2bfb1; }
.start--locked .start__label { text-shadow: 0 1px 0 #000; }
.start--locked::before, .start--locked::after { opacity: .3; }

/* Server selector */
.server { position: relative; display: flex; align-items: center; gap: calc(var(--k) * 12); margin-top: calc(var(--k) * 7); padding-left: calc(var(--k) * 4); }
.server__title { color: var(--white); font-size: calc(var(--k) * 17); line-height: 1; text-shadow: 0 1px 0 #000; }
.server__current, .server__list button {
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 10);
  width: 100%;
  height: calc(var(--k) * 32);
  padding: 0 calc(var(--k) * 10);
  border: 0;
  background: none;
  color: var(--text);
  font-size: max(13px, calc(var(--k) * 14));
  line-height: 1;
  text-align: left;
  cursor: pointer;
}
.server__current { flex: 1; border: 1px solid #000; border-radius: calc(var(--k) * 2); background: var(--pit); box-shadow: var(--sunk); }
.server__current:hover { color: #fff; }
.server__num { min-width: 1.1em; color: var(--white); font-size: max(14px, calc(var(--k) * 16)); font-weight: 700; text-align: right; }
.server__count { flex: 1; white-space: nowrap; }
.server__drop { width: 0; height: 0; border: calc(var(--k) * 5) solid transparent; border-top-color: var(--dim); border-bottom-width: 0; transition: transform .14s; }
[aria-expanded="true"] .server__drop { transform: rotate(180deg); }

.bars { display: flex; gap: 1px; }
.bars i { width: calc(var(--k) * 4); height: calc(var(--k) * 14); background: #2a2b27; }
.bars i.on { background: linear-gradient(#b4ec5a, #62ab22); }
.bars.is-hot i.on { background: linear-gradient(#ffb445, #dd7414); }

.server__list {
  position: absolute;
  top: calc(100% + var(--k) * 3);
  right: 0;
  z-index: 20;
  width: calc(var(--k) * 290);
  max-width: 100%;
  padding: calc(var(--k) * 3);
  border: 1px solid #000;
  border-radius: calc(var(--k) * 2);
  background: var(--steel-face);
  box-shadow: var(--bevel), 0 calc(var(--k) * 8) calc(var(--k) * 20) rgba(0, 0, 0, .85);
}
.server__list li { background: var(--pit); }
.server__list li + li { border-top: 1px solid var(--seam); }
.server__list button:hover, .server__list button:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; outline: 0; }
.server__list [aria-selected="true"] button, .server__list [aria-selected="true"] .server__num { color: var(--amber); }
.server__list button:disabled { opacity: .45; cursor: default; background: none; color: var(--text); }

/* Counters: three recessed read-outs */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--k) * 5); margin-top: calc(var(--k) * 7); }
.gauges div { padding: calc(var(--k) * 8) calc(var(--k) * 11) calc(var(--k) * 9); border: 1px solid #000; border-radius: calc(var(--k) * 2); background: var(--pit); box-shadow: var(--sunk); }
.gauges dt { color: var(--dim); font-size: max(10.5px, calc(var(--k) * 11)); line-height: 1; }
.gauges dd { margin-top: calc(var(--k) * 6); color: var(--white); font-size: calc(var(--k) * 22); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gauges div:first-child dd { color: var(--amber); }


/* ───────────── Orders: a beam under the picture ───────────── */

.orders {
  position: relative;
  z-index: 2;
  border-block: 1px solid #000;
  background: var(--steel-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 calc(var(--k) * 5) calc(var(--k) * 14) rgba(0, 0, 0, .65);
}
.orders__in { display: flex; align-items: center; gap: calc(var(--k) * 16); height: calc(var(--k) * 40); overflow: hidden; }
.tag {
  flex: none;
  padding: calc(var(--k) * 5) calc(var(--k) * 10) calc(var(--k) * 4) calc(var(--k) * 30);
  border: 1px solid #000;
  background: var(--hazard) 0 0 / calc(var(--k) * 22) 100% no-repeat, linear-gradient(#ffc93a, #e9981a);
  box-shadow: inset 0 1px 0 rgba(255, 244, 200, .7);
  color: var(--ink);
  font-size: calc(var(--k) * 15);
  line-height: 1;
}
.orders ul { display: flex; gap: calc(var(--k) * 28); min-width: 0; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.orders li { display: flex; gap: calc(var(--k) * 8); align-items: baseline; }
.orders time { color: #c4c1b3; font-size: max(12px, calc(var(--k) * 12.5)); font-variant-numeric: tabular-nums; }
.orders a { color: var(--white); text-decoration: none; }
.orders a:hover { color: var(--amber); }

/* ───────────── Chassis: one riveted frame, compartments inside ───────────── */

.deck {
  margin-block: calc(var(--k) * 18) calc(var(--k) * 26);
  padding: calc(var(--k) * 14) calc(var(--k) * 10) calc(var(--k) * 10);
  border: 1px solid #000;
  border-radius: calc(var(--k) * 4);
  background:
    radial-gradient(circle at calc(var(--k) * 8) calc(var(--k) * 7), var(--bolt)),
    radial-gradient(circle at calc(100% - var(--k) * 8) calc(var(--k) * 7), var(--bolt)),
    radial-gradient(circle at 50% calc(var(--k) * 7), var(--bolt)),
    linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .045) 46%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(#30312d, #1b1c1a calc(var(--k) * 60), #131412);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .03), 0 calc(var(--k) * 10) calc(var(--k) * 34) #000;
}

/* a compartment: black-edged recess in the frame */
.briefing, .panel {
  border: 1px solid #000;
  border-radius: calc(var(--k) * 2);
  background: var(--well);
  box-shadow: inset 0 calc(var(--k) * 3) calc(var(--k) * 9) #000, 0 1px 0 rgba(255, 255, 255, .11), 0 0 0 1px rgba(255, 255, 255, .025);
}

.briefing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: stretch;
  margin-bottom: calc(var(--k) * 6);
}
.briefing__lead { padding: calc(var(--k) * 16) calc(var(--k) * 22) calc(var(--k) * 17) calc(var(--k) * 18); }
.briefing h1 {
  margin-bottom: calc(var(--k) * 8);
  color: var(--white);
  font: 900 calc(var(--k) * 31) / .98 var(--f-stencil);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.steps li {
  position: relative;
  padding: calc(var(--k) * 17) calc(var(--k) * 16) calc(var(--k) * 14) calc(var(--k) * 60);
  border-left: 1px solid #000;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: max(13px, calc(var(--k) * 13.5));
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: calc(var(--k) * 16);
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--k) * 32);
  height: calc(var(--k) * 38);
  border: 1px solid #000;
  background: linear-gradient(#ffc93a, #e9981a);
  box-shadow: inset 0 1px 0 rgba(255, 244, 200, .7);
  color: var(--ink);
  font: 900 calc(var(--k) * 30) / calc(var(--k) * 36) var(--f-stencil);
  text-align: center;
}
.steps b { display: block; margin-bottom: calc(var(--k) * 3); color: var(--white); font-size: calc(var(--k) * 18); line-height: 1.1; }

/* the frame shows through the gaps as ribs between compartments */
.grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--k) * 6); align-items: stretch; }
.grid:has(> #ratings[hidden]) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.grid:has(> #ratings[hidden]):has(> .stack[hidden]) { grid-template-columns: minmax(0, 1fr); }
.grid:has(> .stack[hidden]) .news-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--k) * 28); }
.grid:has(> .stack[hidden]) .news:nth-child(2) { border-top: 0; box-shadow: none; }
.stack { display: grid; grid-template-rows: auto 1fr; gap: calc(var(--k) * 6); }
.stack:has(> [hidden]) { grid-template-rows: 1fr; }

.panel { display: flex; flex-direction: column; padding: 0 calc(var(--k) * 14) calc(var(--k) * 10); }
/* raised title bar */
.panel__head {
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 10);
  margin: 0 calc(var(--k) * -14) calc(var(--k) * 2);
  padding: calc(var(--k) * 8) calc(var(--k) * 12) calc(var(--k) * 7);
  border-bottom: 1px solid #000;
  background: linear-gradient(#3a3b36, #222320 50%, #191a18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(255, 255, 255, .06), 0 calc(var(--k) * 3) calc(var(--k) * 6) rgba(0, 0, 0, .45);
  color: var(--white);
  font-size: calc(var(--k) * 20);
  line-height: 1;
  text-shadow: 0 1px 0 #000;
}
.panel__head::before {
  content: "";
  width: calc(var(--k) * 22);
  height: calc(var(--k) * 14);
  border: 1px solid #000;
  background: var(--hazard), var(--amber);
}
.panel__head a { margin-left: auto; font-size: max(11px, calc(var(--k) * 11.5)); text-decoration: none; }
.panel__head a::after { content: " »"; }
.panel__note { margin-top: calc(var(--k) * 9); color: var(--dim); font-size: max(12px, calc(var(--k) * 12.5)); }

/* rows inside a compartment are split by a groove: dark line, light line */
.news + .news, .modes > li + li, .links li + li a, .ranks td { border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); }

.news { display: grid; grid-template-columns: calc(var(--k) * 44) minmax(0, 1fr); gap: calc(var(--k) * 12); padding: calc(var(--k) * 10) 0; }
.news time { align-self: start; padding: calc(var(--k) * 5) 0; border: 1px solid #000; background: var(--steel-face); box-shadow: var(--bevel); line-height: 1; text-align: center; }
.news time b { display: block; color: var(--amber); font: 900 calc(var(--k) * 23) / 1 var(--f-stencil); text-shadow: 0 1px 0 #000; }
.news time span { display: block; margin-top: calc(var(--k) * 2); color: var(--text); font-size: max(10px, calc(var(--k) * 10.5)); }
.news h3 { margin-bottom: calc(var(--k) * 1); font-size: max(14px, calc(var(--k) * 15.5)); line-height: 1.25; }
.news h3 a { text-decoration: none; }
.news h3 a:hover { text-decoration: underline; }
.news p { line-height: 1.4; }

.modes { flex: 1; display: grid; grid-auto-rows: 1fr; }
.modes > li { display: grid; grid-template-columns: calc(var(--k) * 52) minmax(0, 1fr); gap: calc(var(--k) * 12); align-items: center; padding: calc(var(--k) * 8) 0; }
.modes > li > b { padding: calc(var(--k) * 8) 0 calc(var(--k) * 7); border: 1px solid #000; background: var(--steel-face); box-shadow: var(--bevel); color: var(--amber); font-size: calc(var(--k) * 19); font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 0 #000; }
.modes h3 { color: var(--white); font-size: max(14px, calc(var(--k) * 15.5)); line-height: 1.25; }
.modes p { line-height: 1.35; }

.links a { position: relative; display: block; padding: calc(var(--k) * 7) calc(var(--k) * 24) calc(var(--k) * 7) 0; color: var(--text); line-height: 1.35; text-decoration: none; }
.links b { display: block; color: var(--white); font-size: calc(var(--k) * 17); line-height: 1.2; transition: color .12s; }
.links a::after {
  content: "»";
  position: absolute;
  right: calc(var(--k) * 2);
  top: 50%;
  translate: 0 -55%;
  color: var(--dim);
  font: 800 calc(var(--k) * 20) / 1 var(--f-stencil);
  transition: color .12s, translate .12s;
}
.links a:hover b, .links a:hover::after { color: var(--amber); }
.links a:hover::after { translate: calc(var(--k) * 3) -55%; }

.ranks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranks th { padding: calc(var(--k) * 9) calc(var(--k) * 6) calc(var(--k) * 6); color: var(--dim); font-size: max(10.5px, calc(var(--k) * 11)); line-height: 1; text-align: left; }
.ranks td { padding: calc(var(--k) * 5.5) calc(var(--k) * 6); }
.ranks :is(th, td):first-child { width: 2.2em; padding-left: 0; color: var(--dim); }
.ranks :is(th, td):last-child { padding-right: 0; text-align: right; }
.ranks td:nth-child(2) { color: var(--white); font-weight: 700; }
.ranks td:last-child { color: var(--white); }
.ranks tr:nth-child(-n+3) td:first-child { color: var(--amber); font-weight: 700; }

/* ───────────── Inner pages: single post and single page ───────────── */

/* masthead: a slim cut of the seasonal picture, darkened toward the breadcrumb beam */
.stage--slim {
  height: calc(var(--u) * 150);
  padding: 0;
  background-position: calc(50% + var(--shift)) 46%;
  box-shadow: inset 0 calc(var(--k) * -50) calc(var(--k) * 40) rgba(0, 0, 0, .6);
}

.crumbs ol { display: flex; gap: calc(var(--k) * 10); min-width: 0; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.crumbs li { display: flex; gap: calc(var(--k) * 10); overflow: hidden; text-overflow: ellipsis; color: var(--white); }
.crumbs li + li::before { content: "»"; color: var(--amber); font: 800 calc(var(--k) * 15) / 1.3 var(--f-stencil); }
.crumbs a { color: #c4c1b3; text-decoration: none; }
.crumbs a:hover { color: var(--amber); }

/* article compartment on the left, launch console and a list on the right */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--k) * 356); gap: calc(var(--k) * 6); align-items: stretch; }
.doc__side { display: grid; gap: calc(var(--k) * 6); align-content: start; }

.article {
  padding: calc(var(--k) * 22) calc(var(--k) * 30) calc(var(--k) * 24);
  border: 1px solid #000;
  border-radius: calc(var(--k) * 2);
  background: var(--well);
  box-shadow: inset 0 calc(var(--k) * 3) calc(var(--k) * 9) #000, 0 1px 0 rgba(255, 255, 255, .11), 0 0 0 1px rgba(255, 255, 255, .025);
}
.article__head { margin-bottom: calc(var(--k) * 16); padding-bottom: calc(var(--k) * 14); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.article__head h1 {
  color: var(--white);
  font: 900 calc(var(--k) * 40) / 1 var(--f-stencil);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.article__meta { display: flex; align-items: center; gap: calc(var(--k) * 10); margin-block: calc(var(--k) * 8); color: var(--dim); font-size: max(12px, calc(var(--k) * 13)); }
.article__head h1 + .article__meta { margin-bottom: 0; }
.chip { padding: calc(var(--k) * 4) calc(var(--k) * 8) calc(var(--k) * 3); border: 1px solid #000; background: linear-gradient(#ffc93a, #e9981a); color: var(--ink); font-size: calc(var(--k) * 13.5); line-height: 1; text-decoration: none; }
.chip:hover { color: #000; filter: brightness(1.1); }

/* running text */
.prose { max-width: 74ch; font-size: max(14px, calc(var(--k) * 15.5)); line-height: 1.6; }
.prose > * + * { margin-top: calc(var(--k) * 13); }
.prose .lead { color: var(--white); font-size: max(15px, calc(var(--k) * 17.5)); line-height: 1.5; }
.prose h2 {
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 10);
  margin-top: calc(var(--k) * 26);
  color: var(--white);
  font: 800 calc(var(--k) * 24) / 1.1 var(--f-stencil);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.prose h2::before { content: ""; flex: none; width: calc(var(--k) * 5); height: calc(var(--k) * 18); background: var(--amber); }
.prose b { color: var(--white); }
.prose ul { display: grid; gap: calc(var(--k) * 5); }
.prose ul li { position: relative; padding-left: calc(var(--k) * 22); }
.prose ul li::before { content: ""; position: absolute; left: calc(var(--k) * 4); top: .58em; width: calc(var(--k) * 7); height: calc(var(--k) * 7); background: var(--amber); }
.prose table { width: 100%; border: 1px solid #000; border-collapse: collapse; background: var(--pit); font-size: max(13px, calc(var(--k) * 14.5)); line-height: 1.35; }
.prose th {
  padding: calc(var(--k) * 8) calc(var(--k) * 12) calc(var(--k) * 7);
  border-bottom: 1px solid #000;
  background: linear-gradient(#3a3b36, #222320 50%, #191a18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--white);
  font: 700 max(11px, calc(var(--k) * 11.5)) / 1 var(--f-text);
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
}
.prose td { padding: calc(var(--k) * 8) calc(var(--k) * 12); border-top: 1px solid var(--seam); }
.prose td:first-child { color: var(--white); }
.prose .note { padding: calc(var(--k) * 11) calc(var(--k) * 14); border: 1px solid #000; border-left: calc(var(--k) * 5) solid var(--amber); background: linear-gradient(#232421, #171816); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.prose figure { margin: calc(var(--k) * 18) 0; }
.cover { aspect-ratio: 16 / 6; border: 1px solid #000; background: var(--scene) 72% 60% / auto 150%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }
.prose figcaption { margin-top: calc(var(--k) * 6); color: var(--dim); font-size: max(12px, calc(var(--k) * 13)); }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--k) * 8); margin-top: calc(var(--k) * 24); padding-top: calc(var(--k) * 14); border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.plate { padding: calc(var(--k) * 9) calc(var(--k) * 14) calc(var(--k) * 8); font-size: calc(var(--k) * 16); }

/* the launch console at sidebar size */
.console--side { width: auto; padding: calc(var(--k) * 10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .6); }
.console--side::before, .console--side::after { display: none; }
.console--side .console__state { padding: calc(var(--k) * 2) calc(var(--k) * 10) calc(var(--k) * 9); }
.console--side .console__state b { font-size: calc(var(--k) * 17); }
.console--side .start { height: calc(var(--k) * 74); padding-inline: calc(var(--k) * 30); }
.console--side .start::before, .console--side .start::after { width: calc(var(--k) * 22); }
.console--side .start__label { font-size: calc(var(--k) * 41); }
.console--side .server { gap: calc(var(--k) * 9); }
.console--side .server__title { font-size: calc(var(--k) * 15); }
.console--side .gauges div { padding: calc(var(--k) * 7) calc(var(--k) * 8) calc(var(--k) * 8); }
.console--side .gauges dt { font-size: max(10px, calc(var(--k) * 10)); letter-spacing: .06em; }
.console--side .gauges dd { font-size: calc(var(--k) * 17); }

.headlines li, .sections li + li a { border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); }
.headlines li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--k) * 10); align-items: baseline; padding: calc(var(--k) * 8) 0; line-height: 1.3; }
.headlines li:first-child { border-top: 0; box-shadow: none; }
.headlines time { color: var(--dim); font-size: max(12px, calc(var(--k) * 12.5)); font-variant-numeric: tabular-nums; }
.headlines a { text-decoration: none; }
.headlines a:hover { text-decoration: underline; }
.headlines a[aria-current], .sections a[aria-current] { color: var(--white); font-weight: 700; }

.sections a { position: relative; display: block; padding: calc(var(--k) * 8) 0 calc(var(--k) * 8) calc(var(--k) * 16); color: var(--text); text-decoration: none; }
.sections a:hover { color: var(--amber); }
.sections a[aria-current]::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: calc(var(--k) * 5); height: calc(var(--k) * 16); background: var(--amber); }

/* ───────────── Footer: the lower beam ───────────── */

.foot {
  border-top: 1px solid #000;
  background:
    var(--hazard) 0 0 / 100% calc(var(--k) * 7) no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 0 / 100% calc(var(--k) * 7) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--k) * 7) / 100% 1px no-repeat,
    linear-gradient(#222320, #0e0f0d);
  box-shadow: 0 calc(var(--k) * -6) calc(var(--k) * 16) rgba(0, 0, 0, .5);
}
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--k) * 10) calc(var(--k) * 24); padding-block: calc(var(--k) * 24) calc(var(--k) * 18); text-shadow: 0 1px 0 #000; }
.foot__nav { display: flex; flex-wrap: wrap; gap: calc(var(--k) * 6) calc(var(--k) * 22); }
.foot__nav a { color: var(--text); font-size: calc(var(--k) * 16); line-height: 1; text-decoration: none; }
.foot__nav a:hover { color: var(--amber); }
.foot__note { color: #c4c1b3; font-size: max(12px, calc(var(--k) * 13)); }
.foot__note a { margin-left: calc(var(--k) * 12); color: inherit; }

/* ───────────── Narrow windows ───────────── */

@media (max-width: 1100px) {
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #ratings { grid-column: 1 / -1; }
  .briefing { grid-template-columns: 1fr; }
  .steps { border-top: 1px solid #000; }
  .steps li:first-child { border-left: 0; box-shadow: none; }
  .nav a { padding-inline: calc(var(--k) * 9); }
  .doc { grid-template-columns: 1fr; }
  .doc__side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}

@media (max-width: 760px) {
  /* the picture becomes a banner centred on the hero tank; the console sits just under the tank */
  .girder { height: auto; }
  .girder__in { flex-wrap: wrap; gap: 7px 14px; height: auto; padding: 8px 0 20px; }
  .logo { margin-right: auto; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 8px 10px 7px; font-size: 15px; }
  .stage { height: auto; padding: 212px 0 18px; background-size: auto 230px; background-position: 84% 0; }
  .console { width: 100%; max-width: 496px; margin: 0 auto; padding: 10px; }
  .console::before, .console::after { display: none; }
  .start { height: 92px; padding-inline: 34px; }
  .start::before, .start::after { width: 24px; }
  .start__label { font-size: clamp(36px, 12vw, 56px); }
  .start__sub { font-size: clamp(9.5px, 2.9vw, 12px); letter-spacing: .06em; }
  .server__current, .server__list button { height: 38px; }
  .server__list { left: 0; width: auto; }
  .gauges dd { font-size: clamp(17px, 5vw, 22px); }

  .orders__in { height: auto; padding: 9px 0; align-items: start; }
  .orders ul { display: grid; gap: 4px; white-space: normal; }
  .deck { margin-block: 14px 20px; padding: 12px 6px 6px; }
  .briefing h1 { font-size: 28px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0; box-shadow: none; padding-block: 12px; }
  .steps li + li { border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); }
  .grid, .grid:has(> #ratings[hidden]) { grid-template-columns: 1fr; }
  .grid:has(> .stack[hidden]) .news-list { display: block; }
  .grid:has(> .stack[hidden]) .news:nth-child(2) { border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); }
  .stage--slim { height: 96px; padding: 0; background-size: auto 230px; background-position: 84% 52%; }
  .crumbs ol { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .article { padding: 16px 14px 18px; }
  .article__head h1 { font-size: 30px; }
  .console--side { max-width: none; }
  .console--side .start { height: 80px; }
  .console--side .start__label { font-size: clamp(34px, 11vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}