/* WetBulb design system.

   The subject is water turning into air, and the finding is an absence — a
   register nobody keeps. So the ground is daylight: bone-white paper under a
   north window, the accent is a deep vapour teal, and the void colour does the
   rhetorical work: the things Denmark doesn't know are always grey, never
   dramatized.

   Light only, on purpose, same reasoning as OneHop: the accents are the
   argument and the surfaces are ink overlays whose opacities only make sense
   against a pale ground. Every accent that carries text or a hairline is
   pushed past 4.5:1 on --bg; the brighter sibling is for fills and pins only.
   `color-scheme: light` keeps scrollbars and form controls in theme.

   THE FRONT PAGE IS A SHEET. It used to be four floating cards over a canvas —
   a caption, a legend, a hint, a panel — each with its own plate, blur, radius
   and shadow, all competing and none telling the eye where to begin. It is now
   set like a printed page: paper at the head, paper at the foot, the map
   running as the plate between them, and hairline RULES doing every job a box
   used to do. Nothing on the map has a border or a corner radius except the
   one thing that genuinely sits on top of the sheet — the detail slip. */

:root {
  color-scheme: light;

  --tower: #0891b2;
  --tower-fg: #0e7490;
  /* The teal that may sit ON the canvas. --tower-fg clears 4.5:1 on the page
     ground but only reaches 4.3:1 over a fading wash with the dark side of the
     extrusion orbited underneath it; this one holds 4.8:1 there. Measured, not
     guessed: the darkest thing the reader can bring under the head wash is the
     shadowed extrusion side, about #565049. */
  --tower-deep: #0b5f75;
  --tower-glow: rgba(8, 145, 178, 0.07);
  --evapcond: #2563eb;
  --evap: #7e22ce;
  --adiabatic: #5b6675;
  --osm: #c2660b;
  --osm-fg: #b45309;
  --void: #64748b;
  --void-glow: rgba(100, 116, 139, 0.05);

  --bg: #eff2f6;
  --bg-2: #e4e9f0;

  /* The paper the head and foot washes are printed on: a hair warmer than the
     page so it reads as stock rather than as a white box, but nowhere near
     warm enough to look yellow against the cool sea. Kept as a raw triplet so
     every wash can pick its own alpha from the same ink. */
  --paper: 252, 252, 250;

  --surface: rgba(17, 26, 42, 0.032);
  --surface-2: rgba(17, 26, 42, 0.058);
  --surface-3: rgba(17, 26, 42, 0.09);
  --hover: rgba(17, 26, 42, 0.046);

  --line: rgba(17, 26, 42, 0.13);
  --line-2: rgba(17, 26, 42, 0.22);
  --gridline: rgba(17, 26, 42, 0.07);

  --ink: #0f172a;
  --ink-2: #37414f;
  --ink-3: #454e5c;
  --ink-4: #4f5866;
  --on-accent: #f4feff;

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1160px;
  /* Set from JS: the measured height of the colophon, so the detail slip can
     sit ON the sheet rather than across its foot rule. */
  --colo-h: 104px;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  --shadow: 0 1px 2px rgba(15, 23, 42, 0.07), 0 14px 34px rgba(15, 23, 42, 0.13);
}

* { box-sizing: border-box; }

/* `overflow-x: clip`, NOT `hidden` — on body, `hidden` forces the other axis
   to `auto` and breaks `position: sticky` in the masthead. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The wash is `position: fixed`, so it ends at the viewport fold and flat --bg
   takes over below it. On a dark ground that step was invisible; on a light one
   it drew a hard horizontal band across the method page. Two fixes, both
   needed: paint the same gradient on `body` itself so there is no un-washed
   region to fall through to, and end the fixed layer transparent rather than on
   a different colour so the handover has nothing to reveal. */
body { background: linear-gradient(var(--bg), var(--bg-2)) fixed; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70rem 42rem at 16% -10%, var(--tower-glow), transparent 60%),
    radial-gradient(56rem 34rem at 90% 0%, var(--void-glow), transparent 58%);
}

a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.16; letter-spacing: -0.021em; margin: 0; font-weight: 640; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-variant-ligatures: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- masthead */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  background: rgba(var(--paper), 0.80);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 22px; height: 58px; }
.brandmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 660; letter-spacing: -0.02em; text-decoration: none; font-size: 15.5px;
}
.brandmark .glyph { width: 22px; height: 22px; display: block; flex: none; }
.masthead nav { display: flex; gap: 21px; }
.masthead nav a {
  padding: 3px 0 2px; text-decoration: none;
  font-size: 13.5px; color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.masthead nav a[aria-current] { color: var(--ink); font-weight: 560; border-bottom-color: var(--ink); }
.masthead-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Set as small caps rather than telemetry: the date is a colophon fact, not a
   readout. --ink-2 rather than --ink-3 because on the map page this sits on a
   fading wash and has to clear 4.5:1 at the wash's thinnest. */
.badge-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.badge-live .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tower);
}

/* -------------------------------------------------------------------- hero */
.hero { padding: 84px 0 30px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-3); text-transform: none; margin-bottom: 18px;
}
.eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tower); box-shadow: 0 0 10px var(--tower);
}
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); max-width: 20ch; }
.hero .lede {
  margin-top: 22px; max-width: 68ch;
  font-size: 17.5px; color: var(--ink-2);
}
.hero .lede strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------- the hover label */
.map-tip {
  position: absolute; z-index: 8; pointer-events: none;
  max-width: 320px;
  background: rgba(var(--paper), 0.96);
  border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);
  padding: 7px 11px; font-size: 12.5px; line-height: 1.45;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0; transition: opacity 90ms;
}
.map-tip .t-name { font-weight: 620; color: var(--ink); }
.map-tip .t-sub { color: var(--ink-3); font-size: 11.5px; margin-top: 1px; }

/* ---------------------------------------------------------------- sections */
section { padding: 54px 0; }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 12px; }
.section-note { color: var(--ink-2); max-width: 72ch; }
.small { font-size: 13px; }
.dim { color: var(--ink-3); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.card.raised { box-shadow: var(--shadow); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* --------------------------------------------------------------- receipts */
.receipt {
  display: grid; grid-template-columns: 130px 1fr; gap: 4px 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.receipt:last-child { border-bottom: 0; }
.receipt .k { color: var(--ink-4); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.receipt .v { color: var(--ink-2); }
.receipt .v strong { color: var(--ink); }

/* ----------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 44px; margin-top: 30px;
  color: var(--ink-4); font-size: 13px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
footer a { color: var(--ink-3); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding-top: 54px; }
  .receipt { grid-template-columns: 1fr; }
  .masthead nav { gap: 16px; }
}

/* ================================================================== THE SHEET
   The map IS the front page: full viewport, no scroll. Over it, two washes of
   paper — one at the head, one at the foot — and between them nothing but the
   plate. Every separation below is a 1px rule at the page measure. */
body.stage-page { overflow: hidden; }
#stage { position: fixed; inset: 0; }
#stage #map-canvas-holder { position: absolute; inset: 0; }
/* The renderer sets the canvas BACKING size (w x h x devicePixelRatio) with
   updateStyle:false; without an explicit CSS size the canvas displays at its
   attribute size — 2x too big on retina, Denmark shoved into a corner. */
#map-canvas-holder canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

/* The head wash. Full width but deliberately WEAK — the northern pins live
   about 300px down and a strong full-width veil bleaches them. It carries the
   masthead on its own; the caption tops itself up with a second, left-weighted
   layer, and the two multiply where the type actually sits. */
.sheet-head {
  position: absolute; left: 0; right: 0; top: 0; height: 270px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--paper), 0.62) 0%,
    rgba(var(--paper), 0.44) 26%,
    rgba(var(--paper), 0.11) 62%,
    rgba(var(--paper), 0) 100%);
}

/* The masthead tops its own ground up, because .sheet-head alone is too thin
   to carry 4.5:1 if the reader orbits the dark side of the extrusion up under
   the nav. Every wash on this page is the SAME paper and every one ends at
   alpha 0, so they stack without a seam — two gradients ending on different
   colours is exactly the hard horizontal band this site has been bitten by
   twice, and this is the version that cannot produce one. */
.masthead--overlay {
  position: fixed; top: 0; left: 0; right: 0;
  border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  height: 94px; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--paper), 0.80) 0%,
    rgba(var(--paper), 0.72) 55%,
    rgba(var(--paper), 0) 100%);
}
.masthead--overlay .wrap { height: 58px; pointer-events: auto; }
.masthead--overlay .masthead-right { padding-left: 18px; }

/* -------------------------------------------------------- the wall label */
/* The label has a HARD height budget, and it is set by the map, not by taste:
   above y≈285px the top-left quadrant is open sea at the default framing, and
   below it Thy and its pins begin. Everything here — the figure size, the unit
   set beside the figure rather than under it, the two-line lede — exists to
   land the last line above that mark, so the paper only ever covers water. */
.stage-caption {
  position: absolute; z-index: 5;
  top: 88px; left: max(20px, calc(50vw - var(--maxw) / 2 + 22px));
  width: min(374px, calc(100vw - 40px));
}
/* The local top-up. Left-weighted so it never reaches the pins, and masked
   away at the bottom so it has no edge to reveal — a single mask layer, no
   `mask-composite`, so a browser that ignores it degrades to a soft band
   rather than to a white rectangle. */
.stage-caption::before {
  content: ''; position: absolute; z-index: -1;
  /* Two edges, two lessons, both found by SAMPLING THE PIXELS rather than
     looking at the screenshot:
       - -30vw, so the paper always clears the left margin. The first version
         stopped 46px short of the type and drew a hard vertical seam down the
         whole sheet.
       - the box must be WIDER than the gradient's last stop. It was not, so
         the paper was cut off at 0.39 alpha: a 4-level step down the whole
         right side that read as a soft edge and measured as a line.
     Stops are in px, not %, so the paper holds the same alpha under every line
     of type whatever the box turns out to be. */
  left: -30vw; right: -280px; top: -88px; bottom: -70px;
  background: linear-gradient(to right,
    rgba(var(--paper), 0.93) 0,
    rgba(var(--paper), 0.93) calc(30vw + 350px),
    rgba(var(--paper), 0) calc(30vw + 520px));
  /* The falloff is set by WHAT SITS IN IT, bottom-first: the paper only has to
     stay above 0.58 as far down as the last --ink-2 line, and below that it is
     free to get out of the way of the pins it would otherwise bleach. An
     earlier version held full paper 80px further down and turned the whole of
     Thy into fog. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
.stage-caption .over {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; letter-spacing: 0.115em; text-transform: uppercase;
  font-weight: 560; color: var(--ink-3);
}
.stage-caption .over .pip {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tower);
}
/* The figure is typeset, not coloured: 217 carries the page at display size in
   plain ink, tracked in tight and set on tabular figures so it does not jump a
   pixel sideways when the scan finds another one. The teal it used to be wore
   the emphasis that the size should have been doing.
   Figure and unit sit on ONE baseline, the way a set of accounts prints a
   total: the number stacked on top of its own words cost 30px of height the
   label does not have, and read as two statements rather than one sentence. */
.stage-caption h1 {
  margin: 0; letter-spacing: normal; font-weight: inherit;
  display: flex; align-items: baseline; gap: 15px;
}
.stage-caption h1 strong {
  flex: none;
  font-size: 76px; line-height: 0.86; font-weight: 320;
  letter-spacing: -0.045em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.stage-caption h1 span {
  font-size: 19px; line-height: 1.3; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink);
  text-wrap: balance;
}
.stage-caption .lede {
  margin: 15px 0 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty;
}
.stage-caption .onward { margin: 9px 0 0; font-size: 13px; }
.stage-caption .onward a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--tower-deep); padding-bottom: 2px;
}
.stage-caption .onward a::after { content: ' →'; color: var(--tower-deep); }
.stage-caption .onward a:hover { color: var(--tower-deep); }

/* ------------------------------------------------------------- the foot */
/* Signature and colophon, where a printed map has always kept them. This is
   also where the coverage figures went: they are the method's receipts, not
   the headline, and standing them under a rule at 11.5px is the difference
   between stating them and shouting them. */
.colophon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 62px 0 14px;
  background: linear-gradient(to top,
    rgba(var(--paper), 0.95) 0%,
    rgba(var(--paper), 0.93) 44%,
    rgba(var(--paper), 0.55) 74%,
    rgba(var(--paper), 0) 100%);
  pointer-events: none;
}
.colophon .wrap { pointer-events: none; }
.colophon .rule {
  border-top: 1px solid var(--line-2);
  padding-top: 9px;
  display: grid; grid-template-columns: 1fr auto; gap: 5px 26px; align-items: baseline;
}
.key {
  grid-column: 1 / -1; pointer-events: auto;
  display: flex; flex-wrap: wrap; gap: 2px 6px; margin-left: -7px;
}
.key .item {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; margin: 0; padding: 3px 7px; border-radius: 4px;
  font: inherit; font-size: 12.5px; letter-spacing: -0.005em; color: var(--ink-2);
  cursor: pointer;
}
.key .item:hover { background: var(--hover); color: var(--ink); }
.key .item:focus-visible { outline: 2px solid var(--tower); outline-offset: 1px; }
/* An "off" toggle is an enabled control, so its label must stay readable — the
   state lives in the hollowed swatch, not in a 40%-opacity row nobody can read. */
.key .item.off { color: var(--ink-4); }
.key .item.off .dot { background: transparent !important; box-shadow: inset 0 0 0 2px currentColor; }
.key .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.key .n {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
  font-size: 12.5px;
}
.key .item.off .n { color: var(--ink-4); font-weight: 500; }

/* Figures, not telemetry: the numerals are set in the text face on tabular
   figures and given the weight, while the words they count stay quiet. */
.counts {
  grid-column: 1; margin: 0;
  font-size: 11.5px; line-height: 1.55; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.counts b { font-weight: 600; color: var(--ink-2); }
/* Real spaces do the spacing; the separator only has to be visible. Giving
   it padding instead made every `word·word` pair unbreakable. */
.counts .sep { color: var(--line-2); }
.hint {
  grid-column: 2; margin: 0; text-align: right; white-space: nowrap;
  font-size: 11.5px; color: var(--ink-4);
}

/* ---------------------------------------------------------- the detail slip
   The one thing here allowed to be an object: it is a slip laid ON the sheet,
   so it gets an edge and a shadow that nothing else on the page has. Bottom
   LEFT — bottom right is exactly where the Copenhagen cluster sits, so the
   panel used to cover the region you had just clicked into. */
.site-panel {
  position: absolute; z-index: 7; display: none;
  left: max(20px, calc(50vw - var(--maxw) / 2 + 22px));
  bottom: calc(var(--colo-h) + 14px);
  width: min(392px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - var(--colo-h) - 190px));
  overflow-y: auto;
  background: rgba(var(--paper), 0.985);
  border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.15);
  padding: 17px 19px 16px;
}
.site-panel.open { display: block; }
.site-panel .close {
  position: absolute; top: 11px; right: 12px;
  background: none; border: 0; color: var(--ink-4);
  width: 24px; height: 24px; cursor: pointer; font-size: 17px; line-height: 1;
  border-radius: 4px;
}
.site-panel .close:hover { background: var(--hover); color: var(--ink); }
.site-panel h3 {
  font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em;
  padding-right: 26px; line-height: 1.25;
}
.site-panel .addr { color: var(--ink-3); font-size: 13px; margin: 5px 0 0; }
/* Rules, not filled boxes. The coordinate row used to be a grey pill; it is
   now a line of figures between two hairlines, which is what a caption block
   on a printed plate looks like. */
.site-panel .coords {
  display: flex; align-items: baseline; gap: 12px;
  margin: 12px 0 0; padding: 9px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.site-panel .coords .ax { color: var(--ink-4); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-panel .coords .copy {
  margin-left: auto; background: none; border: 0; padding: 0;
  color: var(--ink-3); border-bottom: 1px solid var(--line-2);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.site-panel .coords .copy:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.site-panel .quote {
  border-left: 2px solid var(--tower);
  padding: 2px 0 2px 13px; margin: 14px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.site-panel .quote .src {
  display: block; margin-top: 7px; font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.site-panel .quote .src a { color: var(--ink-3); }
.site-panel .quote mark {
  background: rgba(8, 145, 178, 0.15); color: var(--ink);
  padding: 0 2px; border-radius: 2px; font-weight: 600;
}
.site-panel .links {
  margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-4);
}
.site-panel .links a { color: var(--ink-3); }

/* Interior pages: one measure. The receipts — the densest prose on the site —
   ran at 129 characters and the grey notes at 167, while the 2-up cards read
   beautifully at 76. The page already knew the right measure. */
.receipt .v, .section-note, section > .wrap > .small { max-width: 78ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------- the sheet, narrowed */
@media (max-width: 900px) {
  .stage-caption { top: 88px; left: 16px; width: calc(100vw - 32px); }
  /* Full-bleed here, so the wash is vertical only — a horizontal falloff on a
     block that already reaches both margins just darkens one corner. */
  .stage-caption::before {
    left: -16px; right: -16px; top: -88px; bottom: -110px;
    background: rgba(var(--paper), 0.93);
  }
  .stage-caption h1 strong { font-size: 62px; }
  .stage-caption h1 span { font-size: 17.5px; }
  .stage-caption .lede { font-size: 13px; max-width: 30em; }
  .sheet-head { height: 300px; }

  .colophon { padding-top: 60px; }
  .colophon .rule { grid-template-columns: 1fr; }
  .counts, .hint { grid-column: 1; }
  .hint { text-align: left; white-space: normal; }

  .site-panel { left: 16px; width: calc(100vw - 32px); max-height: 52vh; }
  .masthead--overlay .wrap { padding: 0 16px; gap: 16px; }
  .masthead--overlay nav { gap: 16px; }
  /* Measured at a real 375px viewport: brandmark + three nav items + the badge
     came to 391px, so the date hung 16px off the right edge. It is not load-
     bearing on the map page — the interior pages still carry it. */
  .masthead--overlay .masthead-right { display: none; }
}

/* A phone gives the label about 260px before it starts covering Jutland, and
   the desktop setting spends 300. Everything shrinks a step; the hierarchy is
   in the ratios, not the absolute sizes. */
@media (max-width: 560px) {
  .stage-caption { top: 80px; }
  .stage-caption::before { top: -80px; bottom: -96px; }
  .stage-caption .over { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 10px; padding-bottom: 8px; }
  .stage-caption h1 { gap: 11px; }
  .stage-caption h1 strong { font-size: 54px; }
  .stage-caption h1 span { font-size: 16px; }
  .stage-caption .lede { font-size: 12.5px; margin-top: 12px; }
  .stage-caption .onward { font-size: 12.5px; }
  .colophon { padding-top: 48px; }
  .key .item { font-size: 12px; padding: 3px 6px; }
  .key .n { font-size: 12px; }
  .counts, .hint { font-size: 11px; }
}