@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #05060B;
  --paper: #EAE7DE;
  --paper-dim: rgba(234, 231, 222, 0.6);
  --hair: rgba(234, 231, 222, 0.16);
  --accent: #8BE8D2;
  --panel: rgba(10, 12, 19, 0.86);
  --horizon: #14152B;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--paper); font-family: var(--serif); }
/* The sky: ink above, deep indigo at the horizon; the canvas is transparent. */
body { background: linear-gradient(to bottom, var(--ink) 0%, #090A14 45%, var(--horizon) 100%); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

.masthead { position: fixed; top: 16px; left: 16px; pointer-events: none; }
/* A soft ink veil behind the title, so it reads over a busy city (a gradient, no shadow). */
.masthead::before { content: ""; position: fixed; z-index: -1; top: 0; left: 0; right: 0; height: 190px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 6, 11, 0.88), rgba(5, 6, 11, 0.5) 50%, rgba(5, 6, 11, 0)); }
.masthead h1 { margin: 0; font-weight: 300; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
/* The new name (M18): the title, and "Jahresringe" under it as its subtitle. */
/* The search's results over the question bar while they show (the start research's Q9: on a phone they opened under
   it, and a tap on one opened the question list). */
.masthead:has(#results:not([hidden])) { z-index: 7; }
.masthead .subtitle, .about-site .subtitle { margin: 2px 0 0; font-style: italic; font-weight: 300; color: var(--paper-dim); }
.eyebrow { margin: 0 0 10px; font: 400 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); }

.places { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.place { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--paper-dim); }
.place[hidden] { display: none; }
.place-district { font: 400 12px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper); opacity: 0.8; }
.place-locality { font: 400 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.place-street { font: italic 300 12px var(--serif); opacity: 0.85; }

.legend { position: fixed; top: 16px; right: 16px; width: 280px; max-height: calc(100vh - 190px); overflow: auto; padding: 14px; background: var(--panel); border: 1px solid var(--hair); }
.legend ul { list-style: none; margin: 0; padding: 0; }
.legend button { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 5px 0; background: none; border: 0; color: var(--paper); font: 400 11px var(--mono); text-align: left; cursor: pointer; }
.legend button.off { opacity: 0.35; }
.legend .pl { padding-right: 6px; }  /* a long class name wraps before it reaches its count */
.legend .sw { width: 12px; height: 12px; }
.legend .pc { color: var(--paper-dim); }
.legend .note { margin: 10px 0 0; font: 400 10px var(--mono); color: var(--paper-dim); }
.legend details.note summary { cursor: pointer; color: var(--paper); }
.legend-more { position: sticky; bottom: -14px; margin: 8px -14px -14px; padding: 18px 14px 8px; text-align: right;
  font: 400 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim);
  background: linear-gradient(to bottom, rgba(10, 12, 19, 0), rgba(10, 12, 19, 0.96) 55%); pointer-events: none; }
.legend-more[hidden] { display: none; }
/* The legend's sentence (lead.js): what the colours show, its colour words in the map's colours, on the panel's colour
   made opaque so they keep 4.5:1 over any roof (tests/js/lead.test.js). On a phone a strip above the tools shows it
   with the sheet closed, two lines at most; the turning hint goes above it. Hidden with the legend. */
.legend-lead { margin: -14px -14px 12px; padding: 12px 14px; background: #0A0C13; border-bottom: 1px solid var(--hair);
  font: 300 13px/1.45 var(--serif); color: var(--paper); }
.legend-lead .lc, .legend-strip .lc { font-weight: 400; }
.legend-lead .nw, .legend-strip .nw { white-space: nowrap; }  /* a range of years on one line (lead.js) */
.legend-strip { display: none; }
@media (max-width: 700px) {
  .legend-strip { display: block; position: fixed; left: 16px; right: 16px; bottom: 158px; margin: 0; padding: 6px 10px;
    background: #0A0C13; border: 1px solid var(--hair); font: 300 12px/1.35 var(--serif); color: var(--paper); pointer-events: none; }
  .legend-strip[hidden], .legend.open + .legend-strip { display: none; }
  .legend-strip:not([hidden]) ~ .hint { bottom: calc(164px + var(--strip-h, 0px)); }
}
body.touring .legend-strip, body.recording .legend-strip, body.panel-open .legend-strip, body.no-webgl .legend-strip,
body.starting .legend-strip, html.jr-play .legend-strip { display: none !important; }

.label { position: fixed; z-index: 5; display: grid; gap: 2px; max-width: 260px; padding: 8px 10px; pointer-events: none; background: var(--panel); border: 1px solid var(--hair); }
.label .lp { font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.label .ly { font-size: 20px; font-style: italic; color: var(--accent); }
.label .ls { font: 400 10px var(--mono); color: var(--paper-dim); }

.tools { position: fixed; right: 16px; bottom: 112px; display: flex; gap: 8px; }
.tool, .play { padding: 8px 12px; background: var(--panel); border: 1px solid var(--hair); color: var(--paper); font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.tool[aria-pressed="true"] { border-color: var(--paper); }
.tool-periods { display: none; }

.timeline { position: fixed; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: end; padding: 10px 12px; background: var(--panel); border: 1px solid var(--hair); }
.play { background: none; }
.play:disabled { opacity: 0.35; cursor: default; }
.track canvas { display: block; width: 100%; height: 56px; touch-action: none; cursor: ew-resize; }
.tally { display: grid; text-align: right; }
.tally-year { font-size: 26px; font-weight: 300; font-style: italic; color: var(--accent); }
.tally-count { font: 400 10px var(--mono); color: var(--paper-dim); }

.loading { position: fixed; left: 16px; bottom: 130px; margin: 0; color: var(--paper-dim); font: 400 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.loading[hidden], .label[hidden] { display: none; }
button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }  /* 2 px over a busy map (the start research's Q11) */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Search: one box under the title, results below it. */
.search { position: relative; display: inline-block; vertical-align: top; margin-top: 14px; width: 300px; pointer-events: auto; }
.lang { display: inline-flex; vertical-align: top; margin: 14px 0 0 8px; pointer-events: auto; }
.lang button { padding: 9px 8px; background: var(--panel); border: 1px solid var(--hair); color: var(--paper-dim); font: 400 11px var(--mono); letter-spacing: 0.1em; cursor: pointer; }
.lang button + button { border-left: 0; }
.lang button[aria-pressed="true"] { border-color: var(--paper); color: var(--paper); }
.lang button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.search input { width: 100%; padding: 9px 10px; background: var(--panel); border: 1px solid var(--hair); color: var(--paper); font: 400 12px var(--mono); }
.search input::placeholder { color: var(--paper-dim); }
.search input:focus { outline: 1px solid var(--paper); outline-offset: 0; }
.results { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--hair); border-top: 0; max-height: 50vh; overflow: auto; }
.results li { display: grid; gap: 2px; padding: 8px 10px; cursor: pointer; border-left: 2px solid transparent; }
.results li[aria-selected="true"] { border-left-color: var(--accent); background: rgba(234, 231, 222, 0.05); }
.sr-label { font-size: 15px; }
.sr-kind, .sr-note, .sr-none { font: 400 10px var(--mono); color: var(--paper-dim); }
.sr-note { color: var(--accent); }

/* The hover label's leader line. */
.leader { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 4; }
.leader line { stroke: var(--paper-dim); stroke-width: 1; }
.leader circle { fill: var(--paper); }

/* Colour modes, at the top of the legend. */
.legend .modes { display: flex; margin: 0 0 12px; }
.legend .modes button { display: block; flex: 1; padding: 6px 0; border: 1px solid var(--hair); text-align: center; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.legend .modes button + button { border-left: 0; }
.legend .modes button { hyphens: auto; overflow-wrap: anywhere; }  /* a long German word (Bodenrichtwert) breaks inside its button */
.legend .modes button[aria-pressed="true"] { border-color: var(--paper); color: var(--paper); }

/* The side panel: a building's record. */
.panel { position: fixed; z-index: 6; top: 16px; right: 16px; bottom: 156px; width: 360px; overflow: auto; padding: 18px; background: #0A0C13; border: 1px solid var(--hair); }
body.panel-open .legend { display: none; }
.panel[hidden] { display: none; }
.panel-close { float: right; padding: 4px 8px; background: none; border: 1px solid var(--hair); color: var(--paper-dim); font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.panel-title { margin: 0 70px 4px 0; font-weight: 300; font-size: 26px; line-height: 1.15; }
.panel-sub { margin: 0 0 14px; font: 400 11px var(--mono); color: var(--paper-dim); }
.panel-date { margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.panel-year { margin: 0 0 6px; font-size: 28px; font-style: italic; font-weight: 300; color: var(--accent); }
.panel-how { margin: 0; font-size: 14px; line-height: 1.45; color: var(--paper-dim); }
.panel-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; }
.panel-facts dt { font: 400 10px/1.8 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.panel-facts dd { margin: 0; font-size: 15px; }
.panel-facts .grain { display: block; font-size: 9px; letter-spacing: 0.08em; text-transform: none; opacity: 0.75; }
.passport-area { margin-top: 4px; }
.panel-wiki figure { margin: 0 0 12px; }
.panel-wiki img { display: block; width: 100%; height: auto; }
.panel-wiki figcaption, .panel-credit { margin: 4px 0 0; font: 400 9px var(--mono); color: var(--paper-dim); }
.panel-wiki figcaption a { color: inherit; }
.panel-intro { margin: 0; font-size: 15px; line-height: 1.5; }
.panel-links { display: flex; gap: 14px; margin: 14px 0 0; }
.panel-links a { font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* Phones: the periods are a bottom sheet behind a button. */
@media (max-width: 700px) {
  .search { width: calc(100vw - 32px - 76px); margin-top: 10px; }
  .lang { margin-top: 10px; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; border-left: 0; border-right: 0; border-bottom: 0; }

  .masthead h1 { font-size: 22px; }
  .masthead .subtitle { font-size: 13px; }
  .legend { display: none; top: auto; bottom: 156px; left: 16px; right: 16px; width: auto; max-height: 50vh; overflow: auto; }
  .legend.open { display: block; }
  .tool-periods { display: block; }
  .tools { left: 16px; right: 16px; bottom: 112px; gap: 6px; }
  .tools .tool { padding: 8px; letter-spacing: 0.08em; white-space: nowrap; }  /* one row, German too, from 360 px */
  .tools .tool-periods { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* The compass (M15): north, turning with the map; drag to turn and tilt, click for north up. */
.tools { align-items: flex-end; }
.compass { flex: none; width: 40px; height: 40px; margin: -6px 4px 0 0; padding: 0; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--hair); cursor: grab; touch-action: none; }
.compass:active { cursor: grabbing; }
.compass:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.compass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.compass circle { fill: none; stroke: none; }
.compass .north { fill: var(--accent); }
.compass .south { fill: var(--paper-dim); }
.compass text { font: 400 6px var(--mono); fill: var(--paper); text-anchor: middle; }
.hint { position: fixed; right: 236px; bottom: 112px; max-width: 320px; margin: 0; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--hair); font: 400 11px/1.4 var(--mono); color: var(--paper); pointer-events: none; }
.hint[hidden] { display: none; }
body.touring .compass, body.touring .hint, body.panel-open .hint { display: none; }
@media (max-width: 700px) {
  .hint { left: 16px; right: 16px; max-width: none; bottom: 158px; }
  .legend.open ~ .hint { display: none; }
}

/* About over the paused map (M15): the page in a frame, the map kept loaded behind it. */
.about-overlay { position: fixed; inset: 0; z-index: 20; background: var(--ink); }
.about-overlay[hidden] { display: none; }
.about-overlay iframe { display: block; width: 100%; height: 100%; border: 0; }
.about-close { position: fixed; top: 16px; right: 16px; z-index: 21; }
body.embedded .lang { display: none; }
.legend li.sheds { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }

/* 1989: the sectors and the Wall on the ground, named under the legend's classes. */
/* The map's two faces: one switch, top centre (owner, 14 Oct 2026; the builder's pick, docs/previews/m10-variants.md). */
.faces { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; background: var(--panel); border: 1px solid var(--hair); }
.faces button { padding: 7px 16px 8px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--paper-dim); font: italic 300 17px var(--serif); cursor: pointer; white-space: nowrap; }
.faces button + button { border-left: 1px solid var(--hair); }
.faces button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--accent); }
@media (max-width: 1000px) and (min-width: 701px) { .faces { top: 122px; left: 16px; transform: none; } }
@media (max-width: 700px) {
  .faces { top: 104px; left: 16px; right: 16px; transform: none; }
  .faces button { flex: 1; padding: 6px 8px 7px; font-size: 15px; }
}
/* The second face's legend (lens.js): the lens's classes, the styles it uses, its sources. */
.legend .unit { margin: -4px 0 8px; font: 400 10px var(--mono); color: var(--paper-dim); }
.legend .unit.city { margin: 0 0 8px; color: var(--paper); }  /* young and old: Berlin's own share above the classes */
.legend .pe { display: block; font: 400 10px var(--mono); color: var(--paper-dim); }
/* Six lenses: three to a row, each kept whole (a long name takes two lines). */
.legend .modes.lenses, .legend .modes.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
/* The first face's seven modes: three in the first row, then two and two. */
.legend .modes.grid { grid-template-columns: repeat(6, 1fr); }
.legend .modes.grid button { grid-column: span 2; }
.legend .modes.grid button:nth-child(n+4) { grid-column: span 3; }
.legend .modes.lenses button, .legend .modes.grid button { padding: 6px 4px; line-height: 1.35; border: 1px solid var(--hair); margin: 0 -1px -1px 0; }
.legend .modes.lenses button[aria-pressed="true"], .legend .modes.grid button[aria-pressed="true"] { position: relative; z-index: 1; }
.legend .tag { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--hair); font: 400 9px var(--mono); letter-spacing: 0.08em; text-transform: lowercase; color: var(--paper-dim); vertical-align: 1px; }
.legend ul li:not(:has(button)) { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font: 400 11px var(--mono); }
.legend ul.lines { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8px; }
.legend ul.lines li:not(:has(button)) { grid-template-columns: 12px 1fr; gap: 6px; padding: 3px 0; }
.legend .sw.full { background: var(--paper); opacity: 0.8; }
.legend .sw.pale { background: var(--paper); opacity: 0.35; }
.legend .sw.hatch { background: repeating-linear-gradient(45deg, rgba(234, 231, 222, 0.8) 0 2px, rgba(234, 231, 222, 0.15) 2px 4px); }
.legend .sw.hatch.grey { background: repeating-linear-gradient(45deg, rgba(90, 94, 104, 0.9) 0 2px, rgba(90, 94, 104, 0.2) 2px 4px); }
.legend .sw.plant { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--paper); box-sizing: border-box; background: rgba(13, 14, 18, 0.25); }
.legend .sw.pvring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; background: rgba(13, 14, 18, 0.35); }
/* Q4 (M18): the gap as one number, the twelve districts to open, the chart of the large systems in the Dusk line style */
.legend .pvgap { margin: 2px 0 6px; font: 300 17px/1.3 var(--serif); color: var(--paper); }
.legend .pvgap b { font-size: 26px; font-weight: 300; font-style: italic; color: var(--accent); }
.legend .pvdistricts ul li:not(:has(button)) { grid-template-columns: 1fr auto; padding: 2px 0; font-size: 10px; }
.legend .pvchart { margin: 14px 0 6px; }
.legend .pvchart figcaption.unit { margin: 0 0 6px; }
.legend .pvgapof { margin-top: 0; }
.legend .pvchart svg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.legend .pvchart .axis, .legend .pvchart .now { stroke: var(--hair); stroke-width: 1; }
.legend .pvchart .now { stroke: var(--paper-dim); }
.legend .pvchart .wash { opacity: 0.1; stroke: none; }
.legend .pvchart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.legend .pvchart .dot { stroke: var(--panel); stroke-width: 2; }
.legend .pvchart .lab { font: 400 9px var(--mono); fill: var(--paper-dim); }
.legend .pvchart .hits rect { fill: transparent; }
.legend .pvchart .note { margin-top: 4px; }
.legend .unit.pvroofs { margin: 10px 0 2px; }
.legend .sources a { color: var(--paper-dim); }
.label .lc { font: 400 11px var(--mono); }
.label .lc b { font-weight: 400; color: var(--paper-dim); }
body.touring .faces { display: none; }
.legend .ground { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hair); }
.legend .ground li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; font: 400 11px var(--mono); color: var(--paper-dim); }
.legend .sw.tint { opacity: 0.45; }
.legend .sw.line { height: 1px; background: var(--paper); }
.legend .sw.line.dim { opacity: 0.4; }
.legend .sw.band { height: 6px; background: rgba(234, 231, 222, 0.25); }
.legend .ground-title { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.legend .ground.plan { margin-top: 2px; padding-top: 0; border-top: 0; }
.legend .sw.street { height: 5px; background: #2B3043; }
.legend .sw.rail { opacity: 0.5; }
.legend .sw.contour { background: #A8C4B4; opacity: 0.45; }
.legend .sw.dot { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: #A8C4B4; opacity: 0.5; }

/* The story: its button under the search; while it plays, its caption takes the place of the tools. */
.story { display: block; margin-top: 10px; pointer-events: auto; }
.tour { position: fixed; z-index: 7; left: 16px; bottom: 112px; width: 440px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--hair); }
.tour[hidden] { display: none; }
.tour-title { margin: 0 70px 8px 0; font-weight: 300; font-size: 24px; line-height: 1.15; }
.tour-caption { margin: 0; font-size: 16px; line-height: 1.5; }
.tour-note { margin: 8px 0 0; font: 400 10px/1.5 var(--mono); color: var(--accent); }
.tour-note:empty { display: none; }
.tour-sources { margin: 10px 0 0; font: 400 9px/1.5 var(--mono); color: var(--paper-dim); }
.tour-sources a { color: inherit; }
.tour .tour-skip { position: absolute; top: 12px; right: 12px; }
.tour-steps { display: flex; gap: 4px; margin: 0 70px 10px 0; padding: 0; list-style: none; }
.tour-steps li { flex: 1; height: 2px; background: var(--hair); }
.tour-steps li.done { background: var(--paper-dim); }
.tour-steps li.on { background: var(--accent); }
.tour-controls { display: flex; gap: 8px; margin-top: 12px; }
.fade { position: fixed; inset: 0; z-index: 0; background: var(--ink); opacity: 0; pointer-events: none; }
body.touring .search, body.touring .lang, body.touring .story, body.touring .legend, body.touring .tools, body.touring .panel,
body.touring .label, body.touring .leader { display: none; }
body.touring .play { visibility: hidden; }
@media (max-width: 700px) {
  .story { position: fixed; top: 16px; right: 16px; margin: 0; }
  .tour { left: 0; right: 0; bottom: 104px; width: auto; border-left: 0; border-right: 0; padding: 14px 16px; }
  .tour-title { font-size: 20px; }
  .tour-caption { font-size: 15px; }
}

/* The About page: a plain reading page in the map's look. */
body.page { height: auto; overflow: auto; background: var(--ink); }
.about { max-width: 720px; margin: 0 auto; padding: 48px 16px 80px; line-height: 1.6; }
.about h1 { margin: 0 0 18px; font-weight: 300; font-size: clamp(32px, 6vw, 48px); }
.about h2 { margin: 40px 0 10px; padding-top: 16px; border-top: 1px solid var(--hair); font-weight: 300; font-size: 24px; }
/* M18: the dating's parts and the 13 questions, each headed as the menu names it and numbered as there (1 to 13). */
.about h3 { margin: 28px 0 8px; font-weight: 400; font-size: 19px; line-height: 1.35; }
.about-body { counter-reset: q; }
.about .q { counter-increment: q; }
.about .q h3 { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; }
.about .q h3::before { content: counter(q); font: 400 11px var(--mono); letter-spacing: 0.1em; color: var(--paper-dim); }
.about .lead { font-size: 19px; }
.about .about-site { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; margin: 0 0 6px; font: 300 20px var(--serif); color: var(--paper); }
.about .about-site .subtitle { margin: 0; }  /* wraps to its own line flush left (the German name on a phone) */
.about .about-dek { font-style: italic; color: var(--paper-dim); }
.about p, .about li { font-size: 16px; }
.about a { color: var(--accent); }
.about .eyebrow a { color: var(--paper-dim); }
.about [data-n] { font-variant-numeric: tabular-nums; }
.about .figures { width: 100%; margin: 12px 0 16px; border-collapse: collapse; font: 400 12px var(--mono); }
.about .figures th, .about .figures td { padding: 6px 8px 6px 0; text-align: left; border-bottom: 1px solid var(--hair); }
.about .figures th { font-weight: 400; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.about .figures td + td, .about .figures th + th { text-align: right; }
.about .sources li { margin-bottom: 8px; }
.about b { font-weight: 500; }
.about > .lang { float: right; margin: 0 0 0 16px; }
html[lang="de"] .lang-block[lang="en"], html:not([lang="de"]) .lang-block[lang="de"] { display: none; }

/* Failures: an area that did not load; a browser without WebGL. */
.notice { position: fixed; left: 16px; bottom: 112px; z-index: 5; display: flex; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; background: var(--panel); border: 1px solid var(--hair); font: 400 11px var(--mono); }
.notice[hidden], .nowebgl[hidden] { display: none; }
.nowebgl { position: fixed; inset: 0; z-index: 8; overflow: auto; padding: 96px 16px 32px; background: var(--ink); }
.nowebgl img { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto 20px; border: 1px solid var(--hair); }
.nowebgl div { max-width: 640px; margin: 0 auto; }
.nowebgl h2 { margin: 0 0 8px; font-weight: 300; font-size: 26px; }
.nowebgl p { line-height: 1.55; }
.nowebgl a { color: var(--accent); }
body.no-webgl .search, body.no-webgl .story, body.no-webgl .tools, body.no-webgl .timeline, body.no-webgl .legend, body.no-webgl .faces { display: none; }
body.no-webgl .masthead { z-index: 9; }
a.tool { text-decoration: none; }
#scene:focus-visible, #hist:focus-visible, .panel:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.panel:focus { outline: none; }
.panel-more { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 24px 18px 8px; background: linear-gradient(to bottom, rgba(10, 12, 19, 0), #0A0C13 60%); font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); text-align: center; pointer-events: none; }
.panel-more[hidden] { display: none; }

/* The Transit mode (transit.js): its legend's styles and the airfields' labels on the map. */
.legend .sw.ubahn { height: 5px; background: var(--paper); }
.legend .sw.sbahn { height: 5px; background: linear-gradient(to bottom, var(--paper) 0 30%, #1A1C22 30% 70%, var(--paper) 70%); }
.legend .sw.station { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px #0D0E12; }
.legend .sw.ghost { width: 9px; height: 9px; margin: 0 1.5px; border-radius: 50%; border: 1.5px solid #C98A8A; background: linear-gradient(45deg, transparent 42%, #C98A8A 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #C98A8A 42% 58%, transparent 58%); box-sizing: border-box; }
.legend .sw.cutline { height: 3px; background: repeating-linear-gradient(to right, #8C5A5A 0 4px, transparent 4px 7px); }
.legend .sw.steam { height: 5px; background: repeating-linear-gradient(to right, var(--paper) 0 6px, transparent 6px 10px); }
.legend .sw.airfield { height: 8px; border: 1px solid var(--paper); box-sizing: border-box; background: linear-gradient(to bottom, transparent 35%, rgba(234, 231, 222, 0.42) 35% 65%, transparent 65%); }
.legend .sw.former { height: 8px; border: 1px dashed rgba(234, 231, 222, 0.5); box-sizing: border-box; }
.legend .sw.tram { height: 3px; background: linear-gradient(90deg, #CDBB91 50%, #C9973F 50%); }  /* two eras' colours (transit.js) */
.legend .sw.tramundated { height: 3px; background: repeating-linear-gradient(to right, var(--paper) 0 2px, transparent 2px 4.5px); }
.legend .sw.tramremoved { height: 2px; background: repeating-linear-gradient(to right, rgba(140, 90, 90, 0.8) 0 4px, transparent 4px 7px); }
.legend .sw.tramevent { width: 8px; height: 8px; margin: 0 2px; background: var(--paper); transform: rotate(45deg) scale(0.8); box-shadow: 0 0 0 1.5px #0D0E12; }
.airfield-name, .runway-number { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--paper); }
.airfield-name { margin: -9px 0 0 10px; font: italic 300 13px var(--serif); text-shadow: 0 0 6px #05060B; }
.airfield-name.closed { opacity: 0.55; }
.runway-number { margin: -7px 0 0 -9px; font: 500 10px var(--mono); letter-spacing: 0.06em; text-shadow: 0 0 4px #05060B; }
.pin-name { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--paper); font: italic 300 13px var(--serif); text-shadow: 0 0 6px #05060B; }
.pin-name[hidden] { display: none; }
.sector-name { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--paper);
  font: 400 11px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.9;
  text-shadow: 0 0 6px #05060B, 0 0 2px #05060B; }
.sector-name[hidden] { display: none; }
.history-name { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--paper); font: italic 300 13px var(--serif); text-shadow: 0 0 6px #05060B, 0 0 2px #05060B; }
.legend .hlayers li + li { margin-top: 4px; }
.legend .hlayers .layer-note { margin: 0 0 4px 22px; }
.legend .ground .sw.outline { background: none; border: 1px solid var(--paper-dim); box-sizing: border-box; }
.legend .ground .sw.outline.dim { opacity: 0.5; }  /* the estates' buffer zones: their faint outline */
/* "You against the city" (M17): where the building's value sits among Berlin's, under the card's line. */
.compare { display: grid; gap: 4px; margin: 4px 0 10px; }
.compare-bar { position: relative; height: 3px; background: var(--hair); }
.compare-mark { position: absolute; top: -3px; width: 2px; height: 9px; margin-left: -1px; background: var(--paper); }
.compare-text { font: 400 10px var(--mono); color: var(--paper-dim); }
/* The recording view (M17, ?record=1): the interface hidden, the story's short cut with large captions, placed for a
   16:9 or a 9:16 screen recording. */
body.recording .masthead, body.recording .masthead::before, body.recording .menu, body.recording .faces,
body.recording .legend, body.recording .tools, body.recording .timeline, body.recording .tour-controls,
body.recording .tour-skip, body.recording .tour-sources, body.recording .hint, body.recording .notice,
body.recording .label, body.recording .leader, body.recording .panel { display: none !important; }
body.recording .tour { left: 4vw; right: 4vw; bottom: 5vh; width: auto; max-width: 1100px; padding: 2.2vmin 2.6vmin;
  background: rgba(5, 6, 11, 0.74); border: 0; }
body.recording .tour-act { font-size: max(12px, 1.5vmin); }
body.recording .tour-title { margin-right: 0; font-size: max(24px, 4.2vmin); }
body.recording .tour-caption { font-size: max(16px, 2.7vmin); line-height: 1.4; }
body.recording .tour-steps { margin-right: 0; }
@media (max-aspect-ratio: 3/4) {
  body.recording .tour { bottom: 9vh; padding: 3vmin 3.4vmin; }
  body.recording .tour-title { font-size: max(24px, 5.6vmin); }
  body.recording .tour-caption { font-size: max(16px, 3.8vmin); }
}
/* The question menu (M17), where the two faces were: the open question and its subtext, Explore or Story, and the
   list of all 13 in their two themes. */
.menu { position: fixed; z-index: 6; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch;
  max-width: min(640px, calc(100vw - 720px)); min-width: 300px; background: var(--panel); border: 1px solid var(--hair); }
.menu .q-now { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 7px 34px 8px 14px; background: none; border: 0;
  color: var(--paper); text-align: left; cursor: pointer; position: relative; }
.menu .q-now::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1px solid var(--paper-dim); border-bottom: 1px solid var(--paper-dim); transform: rotate(45deg); }
.menu .q-now[aria-expanded="true"]::after { margin-top: -1px; transform: rotate(225deg); }
.menu .q-title { font: italic 300 17px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .q-sub { font: 400 10px/1.3 var(--mono); color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .q-mode { display: flex; border-left: 1px solid var(--hair); }
.menu .q-mode button { padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--paper-dim);
  font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.menu .q-mode button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--accent); }
.menu .q-list { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 140px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--hair); }
.menu .q-list[hidden] { display: none; }
.menu .q-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.menu .q-list button { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; width: 100%; padding: 7px 6px; background: none;
  border: 0; border-left: 2px solid transparent; color: var(--paper); text-align: left; cursor: pointer; }
.menu .q-list button:hover, .menu .q-list button[aria-pressed="true"] { background: rgba(234, 231, 222, 0.06); border-left-color: var(--accent); }
.menu .q-n { grid-row: span 2; font: 400 11px var(--mono); color: var(--paper-dim); padding-top: 2px; }
.menu .q-t { font: 300 16px/1.25 var(--serif); }
.menu .q-s { font: 400 10px/1.4 var(--mono); color: var(--paper-dim); }
@media (max-width: 1000px) and (min-width: 701px) { .menu { top: 122px; left: 16px; transform: none; max-width: calc(100vw - 340px); } }
@media (max-width: 700px) {
  .menu { top: 104px; left: 16px; right: 16px; transform: none; max-width: none; min-width: 0; }
  .menu .q-title { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }  /* a long question on two lines, not cut */
  .menu .q-list { left: 0; transform: none; width: calc(100vw - 32px); grid-template-columns: 1fr; max-height: calc(100vh - 260px); }
}
body.touring .menu .q-list { display: none; }
/* The modes drawn as pins (M16, web/js/pins.js): a pin, hollow where it needs checking, dashed where its place is
   approximate, a faint ring after it closed. */
.legend .sw.club { --pin: #C98FD6; width: 10px; height: 10px; margin: 0 1px; border-radius: 50%; background: var(--pin); box-sizing: border-box; }
.legend .sw.club.hollow { background: none; border: 2px solid var(--pin); }
.legend .sw.club.approx { border: 2px dashed var(--pin); background: color-mix(in srgb, var(--pin) 45%, transparent); }
.legend .sw.club.gone { background: none; border: 1px solid color-mix(in srgb, var(--pin) 50%, transparent); }
.legend .sw.event { --pin: #E8B04A; width: 9px; height: 9px; margin: 0 1.5px; transform: rotate(45deg); background: var(--pin); box-sizing: border-box; }
.legend .sw.event.hollow { background: none; border: 2px solid var(--pin); }
.legend [data-pkind] .sw.dot { opacity: 1; }
/* M18: a pin mode's buildings (web/js/sites.js), lit in its colour or outlined on the neutral tone, and the places'
   line icons (web/js/icons.js) with their sight cones. */
.legend .ground .sw.bld { --pin: #C98FD6; width: 11px; height: 11px; margin: 0 0.5px; border: 0; border-radius: 0; transform: none; background: var(--pin); }
.legend .ground .sw.bld.event { --pin: #E8B04A; }
.legend .ground .sw.bld.culture { --pin: #E8A06A; }
.legend .ground .sw.bld.lit2 { --pin: #E2C6EA; }
.legend .ground .sw.bld.roof { background: #3E4250; box-shadow: inset 0 0 0 1px var(--pin); }
.legend .ground .sw.cone { background: conic-gradient(from -30deg at 50% 100%, rgba(124, 199, 184, 0.5) 0 60deg, transparent 60deg); }
.legend .sw .picon { display: block; }
.legend .layer-note .pk { display: block; }
.legend .layer-note .sw.tint { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; }
.picon { vertical-align: -2px; }
.pin-name .picon { margin-right: 4px; }
/* M17: the story is the menu's (Explore or Story); the masthead's old button stays for the story's own controls. */
.masthead .story { display: none; }

/* The card (M18, the owner's pick): the place sheet, its ring at the foot (cards.js, panel.js, ring.js). A panel 380 px
   wide at the top right on a laptop, scrolling inside itself; a bottom sheet on a phone. Radius 0, no shadows. */
.panel { width: 380px; box-sizing: border-box; padding-top: 0; }
.panel-close { position: absolute; z-index: 2; top: 10px; right: 10px; float: none; min-width: 44px; min-height: 44px; background: rgba(5, 6, 11, 0.72); }  /* 44 px (Q5, M3) */
.sheet .panel-title { margin: 18px 70px 4px 0; font-size: 26px; }
.sheet-photo { position: relative; margin: 0 -18px; }
.sheet-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.sheet-photo figcaption { position: absolute; left: 0; bottom: 0; max-width: 85%; margin: 0; padding: 3px 6px; background: rgba(5, 6, 11, 0.66);
  font: 400 9px var(--mono); color: var(--paper-dim); }
.sheet-photo figcaption a { color: inherit; }
.sheet-photo:not([hidden]) + .sheet-handle + .panel-title { margin-right: 0; }  /* without a photo, clear of Close (M1) */
.sheet-handle { display: none; }
.sheet .panel-sub { margin: 0 0 14px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sheet .act { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; box-sizing: border-box;
  background: none; border: 1px solid var(--hair); color: var(--paper); font: 400 10px var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; }
.sheet .act.filled { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--hair); font: 400 11px var(--mono); color: var(--paper); }
.chip .sq { width: 9px; height: 9px; }
.chip-listed { border-color: #9C7FD8; color: #9C7FD8; }  /* the listed buildings' violet (the solar lens, M11) */
.sheet-secs { border-top: 1px solid var(--hair); }
.sheet-sec { border-bottom: 1px solid var(--hair); }
.sheet-sec summary { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 11px 0; cursor: pointer; list-style: none; }
.sheet-sec summary::-webkit-details-marker { display: none; }
.sheet-sec .sec-name { font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.sheet-sec .sec-line { justify-self: end; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-align: right; font: 400 12px var(--mono); color: var(--paper); }
.sheet-sec summary { grid-template-columns: auto minmax(0, 1fr); }
.sheet-sec[open] .sec-line { color: var(--accent); }
.sheet-sec .panel-facts { margin: 0 0 10px; }
.sheet-sec .sec-src { margin: 4px 0 12px; font: 400 9px/1.5 var(--mono); color: var(--paper-dim); }
.compare.ramp .compare-bar { height: 6px; opacity: 0.9; }
.compare.ramp .compare-mark { top: -4px; height: 14px; }
.sheet-ring { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; margin: 18px 0 6px; }
.ring { display: block; overflow: visible; }
.ring .ring-edge { fill: none; stroke: var(--paper); stroke-opacity: 0.2; stroke-width: 0.6; }
.ring .ring-edge.war { stroke-opacity: 0.5; }
.ring .ring-war { stroke: var(--paper); stroke-opacity: 0.1; }
.ring .ring-own { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ring-in 0.9s ease-out; }
@keyframes ring-in { from { stroke-dashoffset: 1; } }
.ring-text .eyebrow { margin: 0 0 6px; }
.ring-year { margin: 0 0 4px; font: italic 300 30px/1 var(--serif); }
.ring-older { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.ring-how { margin: 0 0 10px; font: 400 9px/1.5 var(--mono); color: var(--paper-dim); }
.sheet-said { margin: 8px 0 0; font: 400 10px/1.5 var(--mono); color: var(--accent); word-break: break-all; }
.sheet-said:empty { display: none; }
/* The card as a bottom sheet on a phone (M18): half open on a tap, pulled up by its handle (after the rules above, so
   these win). */
@media (max-width: 700px) {
  .panel { transition: transform 0.25s ease-out; }
  .panel.half { transform: translateY(var(--sheet-off, 0px)); overflow: hidden; touch-action: none; }
  .sheet { display: flex; flex-direction: column; }
  .sheet-handle { display: block; order: -1; align-self: center; width: 44px; height: 4px; margin: 8px 0 10px; background: var(--paper-dim); opacity: 0.6; cursor: grab; }
  .sheet-photo { margin: 0 -18px; }
  .sheet .panel-title { margin-top: 12px; font-size: 24px; }
  .sheet .act { min-height: 44px; flex: 1; }
  .sheet-ring { grid-template-columns: 120px 1fr; }
}

/* The start (start.js; the owner's launch decision: concept 4, The story first). A first visit (html.jr-play, set by
   the page's head script before anything is drawn): the story's first card in type on the ink, the map loading behind
   a veil, its panels aside; the timeline stays. The way in: a panel over the map with its panels. */
.first { display: none; }
html.jr-play .first { display: block; position: fixed; z-index: 4; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(5, 6, 11, 0.9), rgba(5, 6, 11, 0.6) 55%, rgba(5, 6, 11, 0.15)); }
html.jr-play .first > * { position: relative; left: clamp(24px, 5vw, 64px); width: min(620px, calc(100vw - 48px)); }
html.jr-play .first .first-q { margin: clamp(150px, 24vh, 210px) 0 10px; }
.first-q, .first-years { font: 400 11px var(--mono); letter-spacing: 0.04em; color: var(--paper-dim); }
.first-years { margin: 0 0 10px; color: var(--accent); }
.first-title { margin: 0 0 12px; font: 300 clamp(34px, 4.2vw, 54px)/1.08 var(--serif); letter-spacing: -0.01em; color: var(--paper); }
.first-caption { margin: 0; font: 300 17px/1.45 var(--serif); color: var(--paper); }
html:not([lang="de"]) .first [lang="de"], html[lang="de"] .first [lang="en"] { display: none; }
html.jr-play .masthead, html.jr-play .menu, html.jr-play .legend, html.jr-play .tools, html.jr-play .compass,
html.jr-play .hint, html.jr-play .loading { visibility: hidden; }
.way { position: fixed; z-index: 7; left: 16px; top: 132px; width: 340px; padding: 8px 0; background: var(--panel); border: 1px solid var(--hair); }
.way ul { margin: 0; padding: 0; list-style: none; }
.way li + li { border-top: 1px solid var(--hair); }
.way button { display: block; width: 100%; min-height: 44px; padding: 10px 16px; background: none; border: 0; text-align: left;
  color: var(--paper); font: 400 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.way button:hover, .way button:focus-visible { color: var(--accent); }
.way .way-watch { padding: 14px 16px; text-transform: none; letter-spacing: 0; }
.way .way-big { font: 300 26px/1.15 var(--serif); }
.way .way-meta { margin-left: 6px; font: 400 11px var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.way .way-today { text-transform: none; letter-spacing: 0; font: 300 15px/1.35 var(--serif); }
.way .way-today .today-when, .way .way-today .today-date { font: 400 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.resume { position: fixed; z-index: 7; left: 50%; top: 96px; transform: translateX(-50%); min-height: 44px; padding: 8px 16px;
  background: var(--panel); border: 1px solid var(--hair); color: var(--paper); font: 400 11px var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; }
.resume .resume-at { margin-left: 6px; color: var(--accent); }
body.touring .way, body.touring .resume, body.recording .way, body.recording .resume { display: none; }
@media (max-width: 700px) {
  html.jr-play .first .first-q { margin-top: 170px; }
  .first-title { font-size: 34px; }
  .first-caption { font-size: 15px; }
  .way { left: 16px; right: 16px; top: 184px; width: auto; }
  .way .way-big { font-size: 22px; }
  .resume { top: 168px; }
}

/* The links to the imprint and the privacy notice (the launch, pipeline/legal.py), on every view and small: under the
   clock's count on wider screens, beside the subtitle on phones, where the masthead leaves room. Each at least 24 px
   tall to touch. */
.legal { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--paper-dim); font: 400 9px var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.legal a + a::before { content: "·"; padding: 0 0.7em; }
.legal a:hover, .legal a:focus-visible { color: var(--paper); }
.legal a:focus-visible { outline: 1px solid var(--paper); outline-offset: 1px; }
.tally .legal { margin: 0 0 -6px; }
@media (max-width: 700px) { .tally .legal { position: fixed; top: 40px; right: 16px; margin: 0; } }
body.recording .legal { display: none; }
.nowebgl .legal, .about .legal { justify-content: flex-start; }
.nowebgl .legal a, .about .legal a { font-size: 11px; color: var(--paper-dim); }
.about .legal { margin-top: 28px; }

/* The imprint and the privacy notice: About's look, plain HTML without a script. */
.about .lang a { display: inline-block; padding: 9px 8px; background: var(--panel); border: 1px solid var(--hair); color: var(--paper-dim);
  font: 400 11px var(--mono); letter-spacing: 0.1em; text-decoration: none; }
.about .lang a + a { border-left: 0; }
.about .lang a[aria-current="page"] { border-color: var(--paper); color: var(--paper); }
.legal-page h2 { margin-top: 32px; font-size: 21px; }
.legal-page p { overflow-wrap: anywhere; }
.legal-page .legal-address { font-size: 18px; line-height: 1.5; }
.legal-page .legal-box { margin: 32px 0; padding: 14px 16px; border: 1px solid var(--paper-dim); }
.legal-page .legal-updated { margin-top: 32px; font: 400 11px var(--mono); letter-spacing: 0.06em; color: var(--paper-dim); }
.legal-foot { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--hair); }
.about .legal-foot a { display: inline-flex; align-items: center; min-height: 24px; font: 400 11px var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; }