@font-face { font-family: Figtree; src: url(../assets/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
/* Every colour on the page is a token with a light and a dark value. The dark values are the site's dark theme
   (src/styles/global.css): the warm ground #232221, white text, the warm greys, and white at 4 to 14% for surfaces.
   Every dark value is a colour from docs/brand-guidelines.md, alone, at an alpha, or mixed over the ground. */
:root {
  color-scheme: light dark; /* the page has both themes, so no browser force-darkens it */
  --ink: #222222; --ink2: #6A6A6A; --line: #DDDDDD; --line2: #EBEBEB; --bg2: #F7F7F7; --rausch: #FF385C; --rausch-d: #E00B41;
  --logo: #FF385C; /* the wordmark: Rausch on white, white on a dark surface */
  /* ground, raised surfaces, and what sits on an ink fill */
  --bg: #fff; --card: #fff; --card-quiet: #fff; --seg-on: #fff; --on-ink: #fff; --ink-press: #000; --ink-rgb: 34,34,34;
  --grey: #B0B0B0; --mute: #8a8a8a; --dot-mute: #9a9a9a; --ink-hatch: #454545;
  --r: 12px; --r2: 16px; --r3: 24px; --shadow: 0 6px 20px rgba(0,0,0,.12); --shadow2: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
  --pill-shadow: 0 1px 2px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.16); --sheet-shadow: 0 -10px 40px rgba(0,0,0,.18);
  /* hatches: a blocked pin, the max effort, a calendar cell that is running, the blocked band on the effort chart */
  --hatch-a: #efefef; --hatch-b: #fff; --hatch-ink: #555; --max-a: #E2E2E2; --max-a-on: #CFCFCF; --max-b: #fff;
  --run-a: #D2D2D2; --run-b: #EDEDED; --band: rgba(0,0,0,.085); --band-edge: #B8B8B8; --band-ink: #5E5E5E;
  /* charts in the listing */
  --plot: #F7F7F7; --plot-line: #E3E3E3; --bar-bad: #C9C9C9; --z-keep: #DDE9D4; --z-res: #F1EFE9; --z-drop: #D9D9D9;
  --wrong-bg: #FFF0F3; --wrong-ink: #8f0e33; --wrong-ring: #B4123E;
  /* the map, which js/map-core.js reads and paints on its canvas */
  --map-land: #F4F2EC; --map-park: #D9EBCF; --map-water: #BEE3F3; --map-road: #FFFFFF; --map-casing: #E4E0D6;
  --map-label: #6A6A6A; --map-chip: rgba(255,255,255,.94); --map-halo: rgba(255,255,255,.95);
  --map-wash: rgba(34,34,34,.09); --map-wash-ink: rgba(34,34,34,.78); --map-ring: rgba(34,34,34,.55); --map-ring-fill: rgba(34,34,34,.10); --map-leader: rgba(34,34,34,.38);
  --chrome: 88px; --top: var(--chrome); --mh: max(50svh, 264px); --col: 620px;
}
/* The dark theme: the system setting, unless the visitor chose a theme with the blog's toggle (data-theme on <html>,
   src/lib/theme-script.ts). A media query and an attribute cannot share one rule, so the tokens come twice: keep the
   two copies the same. */
@media screen { :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo: #ffffff;
    /* white over the ground at 4, 6, 10 and 14%, opaque */
    --w4: color-mix(in srgb, #fff 4%, #232221); --w6: color-mix(in srgb, #fff 6%, #232221); --w10: color-mix(in srgb, #fff 10%, #232221); --w14: color-mix(in srgb, #fff 14%, #232221);
    --ink: #ffffff; --ink2: #c5c1bb; --line: #6e6a66; --line2: rgb(197 193 187 / .18); --bg2: rgb(255 255 255 / .06);
    /* raised surfaces are white at 10% on the ground, and the quiet ones at 6%, opaque because the map shows under them */
    --bg: #232221; --card: var(--w10); --card-quiet: var(--w6); --seg-on: rgb(255 255 255 / .14); --on-ink: #222222; --ink-press: #dfdcd6; --ink-rgb: 255,255,255;
    --grey: #8c8c8c; --mute: #c1c1c1; --dot-mute: #8c8c8c; --ink-hatch: #c1c1c1;
    --shadow: 0 6px 20px rgba(0,0,0,.4); --shadow2: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.36);
    --pill-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 2px 8px rgba(0,0,0,.4); --sheet-shadow: 0 -1px 0 rgb(197 193 187 / .18), 0 -10px 40px rgba(0,0,0,.5);
    --hatch-a: var(--w14); --hatch-b: var(--w6); --hatch-ink: #c5c1bb; --max-a: rgb(255 255 255 / .16); --max-a-on: rgb(255 255 255 / .3); --max-b: transparent;
    --run-a: #6e6a66; --run-b: var(--w14); --band: rgb(255 255 255 / .1); --band-edge: #8c8c8c; --band-ink: #c5c1bb;
    --plot: var(--w6); --plot-line: rgb(197 193 187 / .18); --bar-bad: #6e6a66; --z-keep: #6e6a66; --z-res: var(--w14); --z-drop: var(--w4);
    --wrong-bg: rgb(255 255 255 / .06); --wrong-ink: #ffffff; --wrong-ring: #FF385C;
    /* the map keeps to the neutrals: land and parks are white over the ground at 4 and 8%, roads at 14%, and water is black over it at 25% */
    --map-land: var(--w4); --map-park: color-mix(in srgb, #fff 8%, #232221); --map-water: color-mix(in srgb, #000 25%, #232221); --map-road: var(--w14); --map-casing: #232221;
    --map-label: #c5c1bb; --map-chip: color-mix(in srgb, var(--w10) 94%, transparent); --map-halo: rgb(35 34 33 / .95);
    --map-wash: rgb(255 255 255 / .08); --map-wash-ink: rgb(255 255 255 / .82); --map-ring: rgb(255 255 255 / .55); --map-ring-fill: rgb(255 255 255 / .10); --map-leader: rgb(255 255 255 / .38);
  }
}
@media screen {
  :root[data-theme="dark"] {
    --logo: #ffffff;
    /* white over the ground at 4, 6, 10 and 14%, opaque */
    --w4: color-mix(in srgb, #fff 4%, #232221); --w6: color-mix(in srgb, #fff 6%, #232221); --w10: color-mix(in srgb, #fff 10%, #232221); --w14: color-mix(in srgb, #fff 14%, #232221);
    --ink: #ffffff; --ink2: #c5c1bb; --line: #6e6a66; --line2: rgb(197 193 187 / .18); --bg2: rgb(255 255 255 / .06);
    /* raised surfaces are white at 10% on the ground, and the quiet ones at 6%, opaque because the map shows under them */
    --bg: #232221; --card: var(--w10); --card-quiet: var(--w6); --seg-on: rgb(255 255 255 / .14); --on-ink: #222222; --ink-press: #dfdcd6; --ink-rgb: 255,255,255;
    --grey: #8c8c8c; --mute: #c1c1c1; --dot-mute: #8c8c8c; --ink-hatch: #c1c1c1;
    --shadow: 0 6px 20px rgba(0,0,0,.4); --shadow2: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.36);
    --pill-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 2px 8px rgba(0,0,0,.4); --sheet-shadow: 0 -1px 0 rgb(197 193 187 / .18), 0 -10px 40px rgba(0,0,0,.5);
    --hatch-a: var(--w14); --hatch-b: var(--w6); --hatch-ink: #c5c1bb; --max-a: rgb(255 255 255 / .16); --max-a-on: rgb(255 255 255 / .3); --max-b: transparent;
    --run-a: #6e6a66; --run-b: var(--w14); --band: rgb(255 255 255 / .1); --band-edge: #8c8c8c; --band-ink: #c5c1bb;
    --plot: var(--w6); --plot-line: rgb(197 193 187 / .18); --bar-bad: #6e6a66; --z-keep: #6e6a66; --z-res: var(--w14); --z-drop: var(--w4);
    --wrong-bg: rgb(255 255 255 / .06); --wrong-ink: #ffffff; --wrong-ring: #FF385C;
    /* the map keeps to the neutrals: land and parks are white over the ground at 4 and 8%, roads at 14%, and water is black over it at 25% */
    --map-land: var(--w4); --map-park: color-mix(in srgb, #fff 8%, #232221); --map-water: color-mix(in srgb, #000 25%, #232221); --map-road: var(--w14); --map-casing: #232221;
    --map-label: #c5c1bb; --map-chip: color-mix(in srgb, var(--w10) 94%, transparent); --map-halo: rgb(35 34 33 / .95);
    --map-wash: rgb(255 255 255 / .08); --map-wash-ink: rgb(255 255 255 / .82); --map-ring: rgb(255 255 255 / .55); --map-ring-fill: rgb(255 255 255 / .10); --map-leader: rgb(255 255 255 / .38);
  }
}
@media print { :root { color-scheme: only light; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
body { margin: 0; font-family: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* On a touch screen sliders move only from their thumb, so a vertical swipe that starts on one scrolls the page. With a mouse, the whole track works. Thumbs keep a 44 px target. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; touch-action: pan-y; cursor: pointer; --tk: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; cursor: grab; box-sizing: border-box; width: 44px; height: 44px; margin-top: calc((var(--tk) - 44px) / 2); border-radius: 50%; border: 8px solid transparent; background: #fff padding-box; box-shadow: inset 0 0 0 1px #B0B0B0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.28)); }
input[type=range]::-moz-range-thumb { pointer-events: auto; cursor: grab; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 8px solid transparent; background: #fff padding-box; box-shadow: inset 0 0 0 1px #B0B0B0; }
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
@media (pointer: coarse) { input[type=range] { pointer-events: none; } }
input[type=range]::-webkit-slider-runnable-track { height: var(--tk); border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--p, 0%), var(--line) var(--p, 0%)); }
input[type=range]::-moz-range-track { height: var(--tk); border-radius: 2px; background: var(--line); }
input[type=range]::-moz-range-progress { height: var(--tk); border-radius: 2px; background: var(--ink); }

/* There is no header of the page's own: the blog's nav pill stays fixed at the top (src/lib/post-frame.ts). --chrome is
   the band it covers (14px above it, 60px of pill, and a gap below), and what sticks to the top of the window sticks
   under it: on a wide screen --top is that band; on a phone the map runs under the pill, so --top is 0 there. */

/* split layout */
.shell { display: grid; grid-template-columns: minmax(0, 1fr) 48vw; align-items: start; }
.col { min-width: 0; padding: 0 clamp(24px, 4vw, 64px); }
.col > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.mapwrap { position: sticky; top: var(--top); height: calc(100vh - var(--top)); z-index: 20; }

/* story type */
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 12px; }
h1 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.1; letter-spacing: -.024em; font-weight: 750; margin-bottom: 16px; }
.lede { font-size: 20px; line-height: 1.42; }
.body { font-size: 17px; line-height: 1.55; }
.seg { display: inline-flex; background: var(--bg2); border-radius: 999px; padding: 4px; gap: 2px; max-width: 100%; }
.seg button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.18); }

@media (max-width: 979px) {
  :root { --chrome: 80px; --top: 0px; }
  body { font-size: 16.5px; }
  .shell { display: block; }
  .mapwrap { position: fixed; top: 0; left: 0; right: 0; height: var(--mh); transition: height .35s cubic-bezier(.2,.8,.2,1); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
  .map-big { --mh: 72svh; }
  .col { padding: calc(max(50svh, 264px) + 4px) 20px 0; }
  .lede { font-size: 18.5px; line-height: 1.4; }
}

/* Belobucks */
.belo { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.belo-i { flex: none; vertical-align: -2px; }
.belo b { font-weight: 700; }
/* The coin is the colour of the text beside it, and its mark is the colour of whatever the text sits on. */
.belo-i path { fill: var(--on-ink); }