:root {
  /* Sputnik's palette (W219, 21 Oct): basalt and navy, titanium and slate,
     bench-coil amber, telemetry cyan, instrument brass. --line and --green
     are POE's additions: a visible edge, and a "done/live" tick. */
  --bg: #0b101b;
  --panel: #111722;
  --panel-hi: #161b22;
  --line: #243041;
  --dim: #8b949e;
  --text: #cbd5e1;
  --white: #f1f5f9;
  --amber: #f59e0b;
  --hot: #ea580c;
  --cyan: #38bdf8;
  --cyan-deep: #06b6d4;
  --brass: #d4af37;
  --brass-deep: #ca8a04;
  --violet: #d4af37;
  --green: #4ade80;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.5 "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: #000; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* ---- top and bottom bars ---- */
.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar.foot { border-bottom: 0; border-top: 1px solid var(--line); height: 36px; }
.bar b { color: var(--text); font-weight: 500; }
.bar .hot { color: var(--amber); }
.bar .sp { flex: 1; }
.nav { padding: 3px 9px; border: 1px solid var(--line); color: var(--text); }
.nav:hover, .nav.on { border-color: var(--amber); color: var(--amber); }
.nav.on { background: rgba(245, 158, 11, .08); }

/* ---- panels ---- */
.panel {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 9px 10px;
  transition: border-color .15s, background .15s;
}
a.panel:hover { border-color: var(--amber); background: var(--panel-hi); }
a.panel::after {
  content: "\2197";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--dim);
}
a.panel:hover::after { content: "OPEN \2197"; color: var(--amber); letter-spacing: .14em; }

.lbl { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.big { font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--white); }
.big small { margin-left: 5px; font-size: 10px; font-weight: 400; color: var(--dim); }
.meter { height: 4px; margin-top: 6px; background: #161d23; }
.meter i { display: block; height: 100%; background: var(--amber); }
.kvrow { display: flex; justify-content: space-between; gap: 8px; }
.kvrow span:last-child { color: var(--white); }
.rowlink { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.rowlink:hover { color: var(--amber); }
.rowlink span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlink span:last-child { color: var(--dim); flex: none; }

/* ---- dashboard ---- */
.dash { display: grid; grid-template-rows: 34px minmax(0, 1fr) 36px; height: 100vh; }
.main { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; gap: 8px; padding: 8px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.center { display: grid; grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
.trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }

.scope { padding: 0; overflow: hidden; }
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.scope .cap { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.scope .cap a { pointer-events: auto; }
.scope .cap a:hover { color: var(--amber); }
.tip { position: absolute; bottom: 8px; left: 10px; color: var(--cyan); pointer-events: none; }

.stream { display: flex; flex-direction: column; overflow: hidden; }
.stream .head { display: flex; gap: 12px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.stream .head b { color: var(--amber); font-weight: 500; }
.stream .head span { color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream .lines { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ln { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 2px 0; }
.ln .tag { font-size: 10px; }
.ln.old { opacity: .55; }
.t-STATE .tag { color: var(--dim); }
.t-DONE .tag { color: var(--green); }
.t-WHY .tag { color: var(--violet); }
.t-OBS .tag { color: var(--cyan); }
.t-PLAN .tag { color: var(--amber); }
.caret::after { content: "\2588"; color: var(--amber); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin-top: 6px; }
.bars i { flex: 1; min-height: 1px; background: var(--amber); opacity: .8; }
.bars i.zero { background: var(--line); }
.dial { display: block; width: 150px; height: 150px; margin: 4px auto; }
.chip { padding: 2px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.chip.live { border-color: var(--green); color: var(--green); }

/* ---- inner pages ---- */
.split { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 34px); }
.list { overflow-y: auto; border-right: 1px solid var(--line); }
.list input {
  position: sticky; top: 0; width: 100%; padding: 9px 12px;
  background: var(--panel); color: var(--amber);
  border: 0; border-bottom: 1px solid var(--line);
  font: inherit; outline: none;
}
.list input::placeholder { color: var(--dim); }
.row { display: block; padding: 7px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; cursor: pointer; }
.row:hover { background: var(--panel-hi); }
.row.on { background: var(--panel-hi); border-left-color: var(--amber); }
.row .lbl { display: flex; justify-content: space-between; }
.row .unseen { color: var(--dim); }
.read { overflow-y: auto; padding: 26px 34px 60px; }
.read > * { max-width: 820px; }
.single { max-width: 900px; margin: 0 auto; padding: 22px 20px 60px; }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }

.prose { font-size: 13px; line-height: 1.7; }
.prose h1 { font-size: 20px; color: var(--white); margin: 0 0 14px; line-height: 1.3; }
.prose h2 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.prose h3, .prose h4 { font-size: 13px; color: var(--cyan); margin: 18px 0 6px; }
.prose ul { margin: 6px 0; padding-left: 20px; }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--dim); }
.prose b { color: var(--white); font-weight: 600; }
.prose code { color: var(--green); font: inherit; }
.ref { color: var(--cyan); border-bottom: 1px dotted var(--cyan); }
.ref:hover { color: var(--amber); border-color: var(--amber); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 12px 0 8px; }
.kv dt { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.kv dd { margin: 0; }
.kv a { color: var(--cyan); margin-right: 10px; }
.kv a:hover { color: var(--amber); }
.entry { padding: 14px 0; border-bottom: 1px solid var(--line); }
.entry p { margin: 6px 0 0; }

@media (max-width: 900px) {
  .dash { height: auto; grid-template-rows: 34px auto 36px; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .center { grid-template-rows: 340px 320px auto; }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .col { overflow: visible; }
  .split { grid-template-columns: minmax(0, 1fr); height: auto; }
  .list { max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .read { padding: 20px 16px 50px; }
}

/* ---- calibration brackets (menu idea: codepen.io/yexx/pen/bNdyVmL, own code) ----
   Brass corners sit on every menu item and openable box, and close in on hover. */
.nav, a.panel { position: relative; }
.nav::before, a.panel::before {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  --c: var(--brass-deep);
  background:
    linear-gradient(var(--c), var(--c)) top left / 7px 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px 7px,
    linear-gradient(var(--c), var(--c)) top right / 7px 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px 7px,
    linear-gradient(var(--c), var(--c)) bottom left / 7px 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 7px,
    linear-gradient(var(--c), var(--c)) bottom right / 7px 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 7px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: inset .18s ease-out, opacity .18s;
}
a.panel::before { opacity: .55; }
.nav:hover::before, .nav.on::before, a.panel:hover::before { --c: var(--brass); opacity: 1; inset: -6px; }
.nav:focus-visible, a.panel:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

/* ---- live boxes ---- */
.feed { display: flex; flex-direction: column; min-height: 220px; }
.feed .lines { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.fl { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 2px 0; }
.fl a:hover { color: var(--cyan); }
.fl .tag { font-size: 10px; color: var(--cyan); }
.fl.k-note .tag { color: var(--amber); }
.fl.k-move .tag, .fl.k-go_home .tag { color: var(--dim); }
.fl.old { opacity: .55; }
.state { font-size: 9px; letter-spacing: .14em; color: var(--dim); }
.state.err { color: var(--hot); }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); margin-right: 6px; animation: beat 2s ease-out infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); } 100% { box-shadow: 0 0 0 9px rgba(56, 189, 248, 0); } }
.note-body { white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) {
  .caret::after, .pulse, .nav::before, a.panel::before { animation: none; transition: none; }
}

details summary { cursor: pointer; list-style: none; }
details summary:hover { color: var(--amber); }
details[open] summary { margin-bottom: 8px; }

/* =====================================================================
   HUD layer (21 Oct, S68). Design notes: 02 future-builds/WEBSITE-DESIGN-NOTES.md
   Colour roles: amber = him (where he is, the next wake); cyan = live and
   links; brass = structure (ticks, brackets); slate = ordinary data.
   Spacing on a 4 px grid; type on a 1.25 scale, golden step for the hero.
   ===================================================================== */
:root {
  --line: #2e3b4f;
  --label: #7cc4e8;
  --slate: #64748b;
  --glass: rgba(11, 16, 27, .64);
  --glass-hi: rgba(22, 27, 34, .78);
}
* { font-variant-numeric: tabular-nums; }
.nav:hover, .nav.on { border-color: var(--cyan); color: var(--cyan); }
.nav.on { background: rgba(56, 189, 248, .08); }
.ref, .kv a { color: var(--cyan); }

/* the map behind everything */
body.hud { background: var(--bg); overflow: hidden; }
.scope-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 42%, transparent 55%, rgba(5, 8, 14, .75) 100%),
    linear-gradient(transparent 0 calc(100% - 2px), rgba(56, 189, 248, .025) 0) 0 0 / 100% 3px;
}
body.hud .dash { position: relative; z-index: 1; }
body.hud .bar { background: linear-gradient(rgba(11, 16, 27, .85), rgba(11, 16, 27, .55)); border-color: transparent; backdrop-filter: blur(4px); }
body.hud .bar.foot { background: linear-gradient(rgba(11, 16, 27, .55), rgba(11, 16, 27, .85)); }

/* glass panels: no hard box, the label carries the edge */
.panel {
  background: var(--glass);
  border: 0;
  padding: 8px 12px 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
a.panel:hover { background: var(--glass-hi); }
.panel > .lbl:first-child, .panel > .kvrow:first-child > .lbl {
  display: block;
  margin: 0 -12px 8px;
  padding: 4px 12px 4px 10px;
  border-left: 2px solid var(--label);
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 85%);
  color: var(--label);
  text-shadow: 0 0 8px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
}
.panel > .kvrow:first-child { margin: 0 -12px 8px; }
.panel > .kvrow:first-child > .lbl { margin: 0; flex: 1; }
.panel.live > .lbl:first-child, .panel.live > .kvrow:first-child > .lbl { border-left-color: var(--cyan); color: var(--cyan); }
.micro { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kvrow { margin-top: 4px; }
.big { font-size: 24px; letter-spacing: .02em; }
.hero .big { font-size: 39px; line-height: 1.1; }
.big.here { font-size: 15px; color: var(--amber); margin: 4px 0 2px; }
.hot { color: var(--amber); }
.quote { color: var(--text); }
.goal { margin-top: 4px; padding-left: 12px; position: relative; }
.goal::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--brass); }

/* ordinary data is slate; only today and live data get colour */
.meter { background: rgba(100, 116, 139, .18); height: 3px; }
.meter i { background: var(--slate); }
.bars i { background: var(--slate); opacity: 1; }
.bars i.today { background: var(--amber); }
.panel.live .bars i { background: var(--cyan); opacity: .75; }
.bars i.zero { background: rgba(100, 116, 139, .25); }
.chip { border-radius: 0; }
.chip.live { border-color: var(--cyan); color: var(--cyan); }

/* the empty window onto the map */
body.hud .center { grid-template-rows: minmax(0, 1.618fr) minmax(0, 1fr) auto; }
.viewport { position: relative; min-height: 220px; cursor: crosshair; touch-action: none; }
.viewport .cap { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.viewport .cap .lbl { padding: 4px 10px; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); border-left: 2px solid var(--label); color: var(--label); text-shadow: 0 0 8px #000; }
.viewport .cap a { pointer-events: auto; border-left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .55), transparent); border-right: 2px solid var(--label); }
.viewport .cap a:hover { color: var(--cyan); }
.viewport .tip { position: absolute; bottom: 4px; left: 0; padding: 4px 10px; color: var(--cyan); text-shadow: 0 0 8px #000; pointer-events: none; }
/* registration marks at the four corners of the window, and a reticle at its centre */
.viewport::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --c: rgba(212, 175, 55, .6);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 16px,
    linear-gradient(var(--c), var(--c)) top right / 16px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 16px,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 16px,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 16px;
  background-repeat: no-repeat;
}
.reticle { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: .5; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--brass); }
.reticle::before { left: 0; right: 0; top: 50%; height: 1px; mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%); -webkit-mask: linear-gradient(90deg, #000 0 35%, transparent 35% 65%, #000 65%); }
.reticle::after { top: 0; bottom: 0; left: 50%; width: 1px; mask: linear-gradient(#000 0 35%, transparent 35% 65%, #000 65%); -webkit-mask: linear-gradient(#000 0 35%, transparent 35% 65%, #000 65%); }

/* the log stream sits on glass too */
.stream .lbl b { color: var(--amber); font-weight: 500; }
.stream .lbl span { color: var(--white); }
.t-WHY .tag { color: var(--brass); }
.fl .tag { color: var(--cyan); }
.fl.k-note .tag { color: var(--cyan); font-weight: 600; }

@media (max-width: 900px) {
  body.hud { overflow: auto; }
  body.hud .center { grid-template-rows: 56vh 320px auto; }
}
.panel > .kvrow:first-child { align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 85%); }
.panel > .kvrow:first-child > .lbl { background: none; white-space: nowrap; }
.panel > .kvrow:first-child > .state { padding-right: 12px; white-space: nowrap; }

/* ---- type, after Death Stranding's terminals (21 Oct) ----
   Text and labels in Barlow (a thin, DIN-like sans); titles in light small
   capitals; numbers in a light mono with their leading zeros dimmed. */
html, body { font: 400 13px/1.5 "Barlow", "Segoe UI", sans-serif; letter-spacing: .01em; }
.lbl, .micro, .bar, .state, .chip, .nav, .tag {
  font-family: "Barlow Semi Condensed", "Barlow", sans-serif;
  font-weight: 500;
}
.lbl { font-size: 11px; letter-spacing: .12em; }
.micro { font-size: 11px; letter-spacing: .1em; }
.bar { font-size: 12px; letter-spacing: .1em; }
.big, .kvrow span:last-child, .rowlink span:last-child, .fl .lbl, #t-next, #t-last, #t-wake, .bars, .dial text {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 300;
}
.big { font-size: 27px; letter-spacing: -.01em; color: var(--white); }
.hero .big { font-size: 44px; }
.big small { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 500; letter-spacing: .1em; }
.z { opacity: .32; }
.big.here { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .04em; }
.prose { font-size: 15px; line-height: 1.65; }
.prose h1 { font-weight: 300; font-variant: small-caps; text-transform: none; font-size: 30px; letter-spacing: .06em; }
.prose h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; }
.ln, .fl { font-size: 13px; }
.goal, .quote, .rowlink { font-size: 13px; }

/* the page title, like a terminal's: thin small capitals on a hairline that runs off the edge */
.bar.title { height: 64px; align-items: flex-end; padding: 0 20px 6px; text-transform: none; letter-spacing: 0; overflow: visible; }
.bar.title > span:not(.sp) { text-transform: uppercase; letter-spacing: .1em; }
.ttl { position: relative; }
.ttl small { display: block; font: 500 10px "Barlow Semi Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.ttl h1 {
  margin: 0; font: 300 30px/1.05 "Barlow", sans-serif;
  font-variant: small-caps; text-transform: none; letter-spacing: .07em; color: var(--white);
  text-shadow: 0 0 12px rgba(0, 0, 0, .8);
}
.bar.title::after {
  content: ""; position: absolute; left: 20px; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(203, 213, 225, .55), rgba(203, 213, 225, .12) 40%, rgba(203, 213, 225, .3));
}
.bar.title { position: relative; }
.online { color: var(--cyan); font-family: "Barlow Semi Condensed", sans-serif; letter-spacing: .2em !important; }
.online.off { color: #ff4d4d; }
body.hud .dash { grid-template-rows: 64px minmax(0, 1fr) 36px; }

/* selected menu item: a solid cyan bar with a pointed end */
.nav.on {
  background: var(--cyan); color: #04121c; border-color: var(--cyan);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right: 16px;
}
.nav.on::before { display: none; }

/* tick marks on the screen's edges, like the game's frame */
body.hud::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(transparent 0 119px, rgba(203, 213, 225, .5) 119px 120px) left 6px top 0 / 8px 100% no-repeat,
    repeating-linear-gradient(transparent 0 119px, rgba(203, 213, 225, .5) 119px 120px) right 6px top 0 / 8px 100% no-repeat;
}

@media (max-width: 900px) {
  body.hud .dash { grid-template-rows: 64px auto 36px; }
  body.hud .center { order: -1; }
  .ttl h1 { font-size: 24px; }
}
@media (max-width: 900px) {
  .bar.title { overflow: hidden; }
  .bar.title > span:not(.sp):not(.online) { display: none; }
  html, body.hud { overflow-x: hidden; }
}

/* ---- menus after codepen.io/yexx/pen/bNdyVmL (own code) ----
   Four small corner dots at rest; on hover the item fills and the dots
   step outward. A faint dot grid lies over the screen. */
.nav::before {
  --c: rgba(203, 213, 225, .8);
  background:
    linear-gradient(var(--c), var(--c)) top left / 2px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 2px;
  background-repeat: no-repeat;
  opacity: 1;
  inset: -4px;
}
.nav { border-color: transparent; transition: background .15s, color .15s; }
.nav:hover { background: var(--cyan-deep); color: #fff; border-color: var(--cyan-deep); }
.nav:hover::before { --c: #fff; inset: -8px; opacity: 1; }
body.hud .vignette {
  background:
    linear-gradient(rgba(203, 213, 225, .015) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(203, 213, 225, .015) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(ellipse 70% 65% at 50% 42%, transparent 55%, rgba(5, 8, 14, .75) 100%);
  background-blend-mode: normal;
}
body.hud .vignette { opacity: 1; }
body.hud .vignette::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 42%, transparent 55%, rgba(5, 8, 14, .75) 100%);
}
.count { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.count .big { font-size: 22px; color: var(--amber); }

/* side columns turn slightly in towards the map, like the pen's tilted menu */
@media (min-width: 901px) {
  body.hud .main { perspective: 1400px; }
  body.hud #left { transform: rotateY(7deg); transform-origin: left center; }
  body.hud #right { transform: rotateY(-7deg); transform-origin: right center; }
}

/* ---- one family (21 Oct): everything in Barlow. Size and weight do the
   work; numbers use Barlow's fixed-width figures so they still line up. ---- */
html, body, .lbl, .micro, .bar, .state, .chip, .nav, .tag, .big, .big small,
.kvrow span:last-child, .rowlink span:last-child, .fl .lbl, #t-next, #t-last, #t-wake,
.bars, .dial text, .ttl small, .online, .prose h2, .prose code, .list input {
  font-family: "Barlow", "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.lbl, .micro, .bar, .state, .chip, .nav, .tag, .ttl small { font-weight: 500; letter-spacing: .14em; }
.big { font-weight: 300; letter-spacing: 0; }
.hero .big { font-weight: 200; }
.big small { font-weight: 500; letter-spacing: .12em; }
.kvrow span:last-child, .rowlink span:last-child, .fl .lbl, #t-next, #t-last, #t-wake { font-weight: 400; }
.prose code { color: var(--green); }

/* ---- type (21 Oct, Audrie): Courier ----
   --f-text: body and labels; --f-num: numbers; --f-show: the title and hero. */
html, body, .lbl, .micro, .bar, .state, .chip, .nav, .tag, .ttl small, .online,
.prose h2, .prose code, .list input, .rowlink, .goal, .quote, .ln, .fl {
  font-family: var(--f-text);
}
.lbl, .micro, .bar, .state, .chip, .nav, .tag, .ttl small { letter-spacing: var(--lbl-track); }
.big, .kvrow span:last-child, .rowlink span:last-child, .fl .lbl, #t-next, #t-last, #t-wake, .dial text, .count .big {
  font-family: var(--f-num); font-weight: var(--w-num);
}
.big small { font-family: var(--f-text); font-weight: 400; }
.ttl h1, .prose h1 {
  font-family: var(--f-show); font-weight: var(--w-show);
  font-variant: normal; text-transform: var(--show-case); letter-spacing: .02em;
}

:root .big.here { font-family: var(--f-text); font-size: 16px; font-weight: 700; line-height: 1.3; }

/* D: Courier (Audrie, 21 Oct): bold for headers, labels and numbers;
   the words in italic, a size smaller. */
:root {
  --f-text: "Courier Prime", "Courier New", monospace; --f-num: "Courier Prime", "Courier New", monospace;
  --f-show: "Courier Prime", "Courier New", monospace;
  --w-show: 700; --w-num: 700; --lbl-track: .06em; --show-case: uppercase;
}
.lbl, .bar, .nav,
.chip, .tag, .ttl small,
.prose h2, .online { font-weight: 700; font-style: normal; }
.ttl h1 { font-size: 30px; letter-spacing: .04em; }
.big { font-size: 28px; }
.hero .big { font-size: 46px; }
.ln span:last-child, .fl .tx, .goal,
.quote, .rowlink span:first-child, .prose p,
.prose li, .micro, .big small,
#n-what, .note-body {
  font-style: italic; font-size: 12px; letter-spacing: 0;
}
.prose p, .prose li, .note-body { font-size: 14px; }
.big, .hero .big { font-weight: 700; }

/* Numbers in Barlow light (Audrie, 21 Oct); everything else in Courier */
:root { --f-num: "Barlow", sans-serif; --w-num: 300; }
.big, .hero .big { font-weight: 300; font-feature-settings: "tnum" 1, "lnum" 1; }
.hero .big { font-weight: 200; }
/* boxes more see-through (Audrie, 21 Oct) */
:root { --glass: rgba(11, 16, 27, .15); --glass-hi: rgba(22, 27, 34, .3); }
/* each box darkens a little towards its edges, a slight vignette on the glass */
.panel { background: radial-gradient(ellipse 85% 85% at 50% 50%, var(--glass) 40%, rgba(11, 16, 27, .42) 100%); }
a.panel:hover { background: radial-gradient(ellipse 85% 85% at 50% 50%, var(--glass-hi) 40%, rgba(22, 27, 34, .55) 100%); }
.viewport .credit { position: absolute; right: 8px; bottom: 4px; font-size: 9px; color: var(--dim); opacity: .7; pointer-events: none; text-shadow: 0 0 6px #000; }

/* the city named in the header links to it */
a.city { text-decoration: underline dotted; text-underline-offset: 2px; }
a.city:hover { color: var(--cyan); }