/* Last Kilometre, a dark label sheet for a simulation.

   The page is built as a portal: it opens onto the field of orders the whole
   argument is about, then walks down through the evidence. Two accents only,
   amber and teal, both pulled out of the map itself so the interface and the
   artefact share one palette. A third colour, rust, exists only where the data
   demands a "this one missed" state. It is a data value, not decoration.

   Everything in the hero is bound to scroll POSITION, so it plays in reverse on
   the way back up. Everything else reveals once and stays revealed. Both are
   scoped to .motion, a class JS adds only after checking prefers-reduced-motion,
   so the reduced-motion render is the finished page rather than a broken one. */

:root {
  --ground: #0A0C0E;
  --ground-2: #101317;
  --ground-3: #151A1F;
  --ink: #EDE7DC;
  --ink-2: #9EA5A8;
  --muted: #6C7378;

  --amber: #E8913C;
  --teal: #2E6B72;
  --teal-lit: #4F9AA1;   /* teal, lifted for legibility on the map */
  --rust: #D8563F;       /* only ever means "missed the promise" */

  --hair: rgba(237, 231, 220, .13);
  --hair-2: rgba(237, 231, 220, .07);

  --display: "Syne", "Trebuchet MS", system-ui, sans-serif;
  --sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --nav: 58px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 30px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
}

.label {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 18px;
}
.label.amber { color: var(--amber); }

.lede { color: var(--ink-2); font-size: 15px; max-width: 62ch; margin: 0; }
h2 + .lede, .statement + .lede, h2 + .body { margin-top: 22px; }
.lede strong, .body strong { color: var(--ink); font-weight: 600; }
.body { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; }
.body.wide { max-width: 76ch; }
.amber { color: var(--amber); }
.ok-t { color: var(--teal-lit); }
.late-t { color: var(--rust); }
.mono { font-family: var(--mono); }

.loading {
  color: var(--muted); font-family: var(--mono); font-size: 12.5px;
  padding: 20px 0; letter-spacing: .04em;
}

/* ---------------- nav ---------------- */

.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--nav); z-index: 90;
  background: rgba(10, 12, 14, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.bar-in {
  max-width: 1180px; margin: 0 auto; padding: 0 30px; height: 100%;
  display: flex; align-items: center; gap: 26px;
}
.mark {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.mark i { color: var(--amber); font-style: normal; }
.bar-links { display: flex; gap: 22px; margin-left: auto; }
.bar-links a {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; transition: color .18s ease;
}
.bar-links a:hover { color: var(--amber); }
.pill {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px;
  transition: border-color .18s ease, color .18s ease;
}
.pill:hover { border-color: var(--amber); color: var(--amber); }

/* ---------------- portal hero ---------------- */

.portal { height: 250vh; position: relative; }

.stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
}

.field { position: absolute; inset: 0; z-index: 1; }
.field svg { width: 100%; height: 100%; display: block; }

.wash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, var(--teal) 0%, transparent 46%, var(--amber) 100%);
  mix-blend-mode: overlay;
  opacity: .3;
}
.veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 8%, rgba(10,12,14,.62) 62%, rgba(10,12,14,.95) 100%);
}

.shutter {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 6;
  background: var(--ground);
  will-change: transform;
}
.shutter-l { left: 0; border-right: 1px solid var(--hair); transform: translateX(-102%); }
.shutter-r { right: 0; border-left: 1px solid var(--hair); transform: translateX(102%); }

/* Sat just under the wordmark rather than behind it, so they are visible while
   the portal is still closed and read as the two things about to travel. */
.pdot {
  position: absolute; z-index: 7; width: 7px; height: 7px; border-radius: 50%;
  top: 58%; left: 50%; margin: -3.5px 0 0 -3.5px; will-change: transform;
}
.pdot-a { background: var(--amber); box-shadow: 0 0 16px 2px rgba(232,145,60,.55); margin-left: -13px; }
.pdot-b { background: var(--teal-lit); box-shadow: 0 0 16px 2px rgba(79,154,161,.5); margin-left: 6px; }

/* Sized so the closed wordmark sits inside the frame with a margin: it has to
   be a title before it is an animation. The growth then carries it out to the
   edges, which is the point. */
.portal-title {
  position: relative; z-index: 8;
  font-family: var(--display); font-weight: 800;
  font-size: min(5.8vw, 112px);
  letter-spacing: -.03em;
  line-height: 1; white-space: nowrap;
  display: flex; gap: .22em; align-items: baseline;
  will-change: transform, letter-spacing;
  text-shadow: 0 0 60px rgba(10, 12, 14, .5);
}
.portal-title span { display: inline-block; will-change: transform; }

.corner {
  position: absolute; z-index: 8;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); line-height: 1.9;
}
.corner.tl { top: calc(var(--nav) + 24px); left: 30px; }
.corner.tr { top: calc(var(--nav) + 24px); right: 30px; text-align: right; }
.corner.bl { bottom: 28px; left: 30px; }
.corner.br { bottom: 28px; right: 30px; text-align: right; color: var(--amber); }

/* Motion binding. --p runs 0 (closed) to 1 (fully open) off scroll position,
   so scrolling back up closes the portal again. */
.motion .shutter-l { transform: translateX(calc(-102% * var(--p, 0))); }
.motion .shutter-r { transform: translateX(calc(102% * var(--p, 0))); }
.motion .field {
  transform: scale(calc(1.14 - .14 * var(--p, 0)));
  will-change: transform;
}
.motion .wash { opacity: calc(.34 * var(--p, 0)); }
.motion .pdot-a { transform: translate(calc(-38vmin * var(--p, 0)), calc(-26vmin * var(--p, 0))); }
.motion .pdot-b { transform: translate(calc(38vmin * var(--p, 0)), calc(26vmin * var(--p, 0))); }

/* The signature move: the title grows while its tracking tightens and its two
   halves walk out to opposite edges. Growing without tightening reads as a
   plain zoom; the two together read as a title opening. */
.motion .portal-title {
  transform: scale(calc(1 + .3 * var(--p, 0)));
  letter-spacing: calc(-.012em - .034em * var(--p, 0));
}
.motion .pt-a { transform: translateX(calc(-52% * var(--p, 0))); }
.motion .pt-b { transform: translateX(calc(52% * var(--p, 0))); }
.motion .corner { opacity: calc(1 - .75 * var(--p, 0)); }
.motion .corner.br { opacity: calc(1 - 1.6 * var(--p, 0)); }

/* ---------------- strip + sections ---------------- */

.strip { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 34px 0; }

.topline {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--hair);
}
.topline .tl { padding: 16px 18px 4px 0; min-width: 0; }
.topline .tl + .tl { border-left: 1px solid var(--hair); padding-left: 18px; }
.topline .tl b {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  display: block; letter-spacing: -.03em; white-space: nowrap; line-height: 1.15;
}
.topline .tl span {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: block; line-height: 1.5; margin-top: 7px;
}

.section { padding: 96px 0; border-top: 1px solid var(--hair); }
.section h2 { font-size: clamp(26px, 3.4vw, 44px); }

.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  align-items: start;
}
.head-col { margin-bottom: 48px; }
.head-col .lede { padding-top: 6px; }

/* ---------------- 01 statement fold ---------------- */

.fold {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; border-top: 1px solid var(--hair);
  padding: 90px 0;
}
.fold-in { position: relative; width: 100%; }
.fold-text { max-width: 62ch; position: relative; z-index: 2; }
.statement {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 52px); line-height: 1.1;
  letter-spacing: -.03em; max-width: 22ch; margin: 0 0 30px;
}
.fold .lede { max-width: 54ch; }

.index-num {
  position: absolute; right: 4%; bottom: -34px; z-index: 1;
  font-family: var(--display); font-weight: 800; font-size: clamp(120px, 20vw, 300px);
  line-height: .8; color: transparent;
  -webkit-text-stroke: 1px rgba(237, 231, 220, .13);
  pointer-events: none; user-select: none;
}
.orb {
  position: absolute; right: -13%; top: -18%; z-index: 1;
  width: min(46vw, 480px); aspect-ratio: 1; border-radius: 50%;
  opacity: .38; pointer-events: none;
  will-change: transform;
}
.orb svg { width: 100%; height: 100%; display: block; }
.motion .orb {
  transform: translateY(calc(-70px * var(--s, 0))) rotate(calc(26deg * var(--s, 0)));
}

/* ---------------- buttons ---------------- */

.btn {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 12px 22px; cursor: pointer;
  text-decoration: none; display: inline-block; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-solid { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); }
.btn-solid:hover { background: var(--amber); border-color: var(--amber); color: var(--ground); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn-row.end { justify-content: flex-end; }

/* ---------------- 02 simulator ---------------- */

.sim-layout { display: flex; gap: 40px; flex-wrap: wrap; }
.map-col { flex: 1 1 480px; min-width: 300px; }
.ctrl-col { flex: 0 1 260px; min-width: 230px; }

.map-shell {
  position: relative; border: 1px solid var(--hair);
  background: #070809; overflow: hidden;
}
#map { width: 100%; height: auto; display: block; }

.clock {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--mono); font-size: 13px; color: var(--amber);
  letter-spacing: .1em;
}

.transport { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
#scrub { flex: 1; accent-color: var(--amber); }
#scrub-label {
  font-size: 11px; color: var(--muted); min-width: 40px; text-align: right;
  letter-spacing: .08em;
}

.livestats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hair); margin-top: 22px;
}
.livestats .s { padding: 14px 14px 4px 0; min-width: 0; }
.livestats .s + .s { border-left: 1px solid var(--hair); padding-left: 14px; }
.livestats .s b {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  display: block; letter-spacing: -.02em;
}
.livestats .s span {
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: 5px; line-height: 1.4;
}

.ctrl { margin-bottom: 17px; }
.ctrl label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.ctrl output { font-family: var(--mono); color: var(--ink); letter-spacing: 0; font-size: 12px; }
.ctrl input[type=range] { width: 100%; accent-color: var(--teal-lit); }
.ctrl select {
  width: 100%; background: var(--ground-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 4px; padding: 9px 10px;
  font-family: var(--sans); font-size: 12.5px;
}
#rerun { width: 100%; text-align: center; margin-top: 4px; }
.policy-desc {
  font-size: 12px; color: var(--muted); margin: 16px 0 0; line-height: 1.6;
  border-left: 1px solid var(--hair); padding-left: 14px;
}

/* ---------------- 03 the deck ---------------- */

.deck-col { align-items: start; }
.deck-side { position: sticky; top: calc(var(--nav) + 30px); }

.deck {
  position: relative; width: 100%; aspect-ratio: 1;
  touch-action: pan-y; outline: none;
}
.deck:focus-visible { outline: 1px solid var(--amber); outline-offset: 14px; }
.deck-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 1px dashed var(--hair); color: var(--muted);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 30px;
}

.deck-card {
  position: absolute; inset: 0;
  background: var(--ground-2); border: 1px solid var(--hair);
  padding: 30px; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  transform-origin: 50% 90%;
  will-change: transform;
  cursor: grab;
}
.deck-card.top { cursor: grab; }
.deck-card.dragging { cursor: grabbing; }
.deck-card .c-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: 14px;
}
.deck-card .c-top .tag { color: var(--teal-lit); }
.deck-card.geo .c-top .tag { color: var(--amber); }
.deck-card .c-id {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.03em;
  margin: 22px 0 4px; line-height: 1;
}
.deck-card .c-why {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.02em; line-height: 1.25; color: var(--ink);
  margin: 0; max-width: 22ch;
}
.deck-card .c-scale { width: 100%; height: auto; display: block; margin: 26px 0 0; }
.deck-card .c-rows { margin: auto 0 0; padding-top: 4px; border-top: 1px solid var(--hair); }
.deck-card .c-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hair-2);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.deck-card .c-row:last-child { border-bottom: 0; }
.deck-card .c-row b {
  font-family: var(--mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.deck-card .c-row b.rust { color: var(--rust); }
.deck-card .c-fix {
  font-size: 12px; color: var(--ink-2); margin: 16px 0 0; line-height: 1.5;
  border-left: 1px solid var(--amber); padding-left: 12px;
}

.deck-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; gap: 16px;
}
.hint {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hair); display: block;
}
.dots i.on { background: var(--amber); }

/* ---------------- blame breakdown ---------------- */

.cause-bars { margin: 60px 0 0; border-top: 1px solid var(--hair); }
.cause {
  display: grid; grid-template-columns: 260px 1fr 92px;
  gap: 20px; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--hair); font-size: 13px;
}
.cause .lbl {
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  letter-spacing: -.01em; color: var(--ink);
}
.cause .track { height: 1px; background: var(--hair); position: relative; }
.cause .fill { position: absolute; inset: 0 auto 0 0; height: 1px; }
.cause .num {
  font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink-2);
}

.split-note {
  border-left: 1px solid var(--amber); padding: 4px 0 4px 20px;
  margin: 34px 0 0; font-size: 15px; max-width: 76ch; color: var(--ink-2);
}
.split-note strong { color: var(--ink); }

/* ---------------- 04 network, hairline roster ---------------- */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.vs .card { border-top: 1px solid var(--hair); padding-top: 20px; }
.vs .card h4 {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -.025em; margin: 0 0 6px; line-height: 1.2;
}
.vs .card .verdict {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.vs .card.win .verdict { color: var(--teal-lit); }
.vs .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--hair-2);
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted);
}
.vs .row b {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.vs .row b.good { color: var(--teal-lit); }
.vs .row b.bad { color: var(--rust); }

/* ---------------- tables ---------------- */

table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
th, td { text-align: right; padding: 13px 14px; border-bottom: 1px solid var(--hair-2); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--hair);
  vertical-align: bottom;
}
td { font-family: var(--mono); color: var(--ink-2); }
td.name {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: -.015em; color: var(--ink);
}

/* ---------------- charts ---------------- */

svg.chart { width: 100%; height: auto; display: block; min-width: 580px; }
.chart-scroll { width: 100%; overflow-x: auto; }
.legend {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-2);
}
.legend i {
  display: inline-block; width: 14px; height: 1px; margin-right: 9px;
  vertical-align: middle;
}
#staffing-note, #promise-lever { margin-top: 26px; }

/* ---------------- close ---------------- */

.close { padding: 110px 0 0; border-top: 1px solid var(--hair); overflow: hidden; }
.close-h { font-size: clamp(26px, 3.6vw, 46px); max-width: 18ch; }
.fine {
  color: var(--muted); font-size: 12.5px; max-width: 74ch; margin: 26px 0 0;
  line-height: 1.75;
}
.close-strip {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--hair); margin-top: 60px; padding-top: 18px;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
/* Full width, then pushed down so the bottom of the page cuts it off. The crop
   is the point: the name runs off the end of the sheet rather than sitting
   politely above a margin. */
.close-mark {
  font-family: var(--display); font-weight: 800;
  font-size: 7.1vw; line-height: .78;
  letter-spacing: -.045em; color: var(--ink);
  white-space: nowrap; text-align: center; width: 100%;
  margin-top: 54px; transform: translateY(.17em);
  user-select: none;
}

/* ---------------- entry reveals ----------------
   Fire once and never un-reveal. Scoped to .motion, so with reduced motion the
   page simply renders finished. */

.motion .section, .motion .fold-in, .motion .strip .wrap {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.motion .section.in, .motion .fold-in.in, .motion .strip .wrap.in {
  opacity: 1; transform: none;
}

/* ---------------- responsive ---------------- */

@media (max-width: 1000px) {
  .topline { grid-template-columns: repeat(3, 1fr); }
  .topline .tl:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .two-col { grid-template-columns: 1fr; gap: 26px; }
  .head-col { margin-bottom: 38px; }
  .deck-side { position: static; max-width: 460px; }
  .vs { grid-template-columns: 1fr; gap: 34px; }
  .bar-links { display: none; }
  .orb { right: -22%; top: auto; bottom: -14%; width: 62vw; opacity: .22; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .bar-in { padding: 0 20px; gap: 14px; }
  /* The wordmark and the button together are wider than a phone, so both step
     down rather than letting the button run off the edge. */
  .mark { font-size: 13px; }
  .pill { padding: 7px 13px; font-size: 9.5px; letter-spacing: .1em; }
  .section { padding: 68px 0; }
  .portal { height: 220vh; }
  .corner.tl, .corner.bl { left: 20px; }
  .corner.tr, .corner.br { right: 20px; }
  .corner { font-size: 9px; letter-spacing: .1em; }
  .livestats { grid-template-columns: repeat(3, 1fr); }
  .livestats .s:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .cause { grid-template-columns: 1fr 70px; gap: 10px; }
  .cause .track { display: none; }
  .deck-card { padding: 22px; }
  .deck-card .c-rows { margin-top: 16px; }
  /* Every table row becomes two columns of its own so nothing scrolls sideways
     just to read a number. */
  table { min-width: 0; }
  thead { display: none; }
  tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
    padding: 14px 0; border-bottom: 1px solid var(--hair);
  }
  tbody td { border: 0; padding: 3px 0; text-align: left; }
  tbody td.name { grid-column: 1 / -1; margin-bottom: 6px; }
  tbody td::before {
    content: attr(data-h) " ";
    font-family: var(--sans); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); display: block;
  }
  tbody td.name::before { content: none; }
}

@media (max-width: 560px) {
  .topline { grid-template-columns: repeat(2, 1fr); }
  .topline .tl { border-left: 0 !important; padding-left: 0 !important; }
  .topline .tl b { font-size: 20px; }
  .livestats { grid-template-columns: repeat(2, 1fr); }
  .livestats .s { border-left: 0 !important; padding-left: 0 !important; }
  .transport { flex-wrap: wrap; }
  #play { width: 100%; text-align: center; }
}