/* medium · studio atlas
   Identity taken from the studio's own decks: red lowercase grotesk, stacked tight,
   over greyscale. The map borrows from Mark Lombardi's network drawings. */

:root {
  --paper: #f3f1ec;
  --card: #fbfaf7;
  --ink: #131312;
  --soft: #45433f;
  --mute: #77736b;
  --line: #d9d5cc;
  --red: #e2231b;
  --green: #1f7a4d;
  --red-soft: rgba(226, 35, 27, 0.5);
  --shade: #e7e3da;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bar: 64px;
  --drawer: min(680px, 100vw);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { padding: 2rem; }

/* ───────────────────────────── header */

.bar {
  position: relative;
  z-index: 5;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mark {
  display: grid;
  color: var(--red);
  text-decoration: none;
  font-size: 23px;
  font-weight: 300;
  line-height: 0.7;
  letter-spacing: -0.01em;
  padding: 6px 0 9px;
}
.bar-note {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.35;
  max-width: 30ch;
  flex: 1;
}
.tabs { display: flex; gap: 22px; }
.tabs a {
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  color: var(--soft);
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }

.search { position: relative; width: 190px; }
.search input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 0;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--mute); }
.search input:focus { outline: none; border-bottom-color: var(--ink); }
.results {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(20, 18, 12, 0.12);
  padding: 6px;
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  line-height: 1.3;
}
.results button:hover, .results button:focus-visible, .results li[aria-selected="true"] button { background: var(--shade); outline: none; }
.results .r-kind { display: block; font-size: 11px; color: var(--mute); }
.results .r-empty { padding: 8px 10px; color: var(--mute); font-size: 13px; }
.results .r-more { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.results .r-more button { font-size: 13px; color: var(--mute); }
.results .r-more button:hover, .results .r-more button:focus-visible { color: var(--ink); }

/* ───────────────────────────── views */

main { position: relative; height: calc(100% - var(--bar)); }
.view { position: absolute; inset: 0; }
.view[hidden] { display: none; }
.view-scroll { overflow-y: auto; overscroll-behavior: contain; }

/* ───────────────────────────── map */

/* After Mark Lombardi: small hollow circles joined by shallow arcs, in pencil weights.
   Lines are drawn in the map's own units, so lines and lettering stay in proportion. */

.view-map { overflow: hidden; }
.map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.map.panning { cursor: grabbing; }

.link { fill: none; stroke: var(--ink); stroke-width: 0.6; transition: opacity 0.18s; }
.link-spine { stroke-width: 1; opacity: 0.9; }
.link-arc { stroke-width: 0.9; opacity: 0.7; }
.link-issue { stroke: var(--ink); stroke-width: 0.55; opacity: 0.34; }
.link-ref { stroke: var(--ink); stroke-width: 0.5; opacity: 0.2; }
.link-people { stroke: var(--red); stroke-width: 0.8; opacity: 0.85; }
.link.dim { opacity: 0.045; }
.link-spine.dim { opacity: 0.9; }
.link-arc.dim { opacity: 0.7; }
.link.lit { opacity: 1; stroke-width: 0.95; marker-end: url(#arrow); }
.link-ref.lit { stroke: var(--ink); stroke-width: 0.8; }
.link-people.lit { marker-end: none; }

.node { cursor: pointer; transition: opacity 0.18s; }
.node:focus { outline: none; }
.node text { font-family: var(--font); }
.node .hit { fill: transparent; stroke: none; }
.node.dim { opacity: 0.2; }

.node-root { cursor: default; }
.node-root text { fill: var(--red); font-weight: 300; letter-spacing: -0.01em; }
.node-root text.after { fill: var(--mute); font-size: 9.5px; font-style: italic; font-weight: 400; letter-spacing: 0; }

.node-year circle.ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; }
.node-year text.num { font-size: 10px; font-weight: 500; fill: var(--red); letter-spacing: 0.02em; }
.node-year text.line { font-size: 10px; font-style: italic; fill: var(--mute); }
.node-year:hover circle.ring, .node-year.lit circle.ring, .node-year.sel circle.ring, .node-year:focus-visible circle.ring { stroke: var(--red); stroke-width: 1.3; }

.node-project .ground { fill: var(--paper); }
.node-project .pin { fill: var(--paper); stroke: var(--ink); stroke-width: 0.8; }
.node-project text.title { font-size: 12px; font-weight: 400; fill: var(--ink); }
.node-project text.sub { font-size: 10px; fill: var(--mute); }
.node-project:hover .pin, .node-project.lit .pin, .node-project.sel .pin, .node-project:focus-visible .pin { fill: var(--red); stroke: var(--red); }
.node-project:focus-visible text.title, .node-project:hover text.title, .node-project.sel text.title { fill: var(--red); }

.node-issue .dot { fill: var(--paper); stroke: var(--red); stroke-width: 0.9; }
.node-issue text { font-size: 13px; font-weight: 400; fill: var(--red); letter-spacing: 0.005em; }
.node-issue:hover .dot, .node-issue.lit .dot, .node-issue.sel .dot, .node-issue:focus-visible .dot { fill: var(--red); }

.node-ref .dot { fill: var(--paper); stroke: var(--ink); stroke-width: 0.8; }
.node-ref text { font-size: 10px; fill: var(--soft); }
.node-ref.own text { font-style: italic; }
.node-ref:hover .dot, .node-ref.lit .dot, .node-ref.sel .dot, .node-ref:focus-visible .dot { fill: var(--ink); stroke: var(--ink); }
.node-ref:hover text, .node-ref.lit text, .node-ref.sel text, .node-ref:focus-visible text { fill: var(--ink); }

.layer-off { display: none; }

.map-ui { position: absolute; z-index: 2; }
.map-layers { left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; color: var(--soft); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}
.chip:hover { border-color: var(--mute); }
.map-layers .chip[aria-pressed="false"] { color: var(--mute); text-decoration: line-through; }
.map-layers .chip[aria-pressed="false"] .key { opacity: 0.35; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.legend { display: inline-flex; align-items: center; gap: 7px; }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.key-issue { border: 1.2px solid var(--red); }
.key-ref { border: 1px solid var(--ink); width: 7px; height: 7px; }
.key-own { font-style: italic; color: var(--mute); width: auto; height: auto; border-radius: 0; font-size: 11px; }
.key-project { border: 1.2px solid var(--ink); width: 8px; height: 8px; }
.key-people { width: 18px; height: 0; border-radius: 0; border-top: 1.4px solid var(--red); }

.map-zoom { right: 14px; bottom: 14px; display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; }
.map-zoom button { min-width: 34px; height: 30px; padding: 0 10px; font-size: 14px; color: var(--soft); }
.map-zoom button + button { border-left: 1px solid var(--line); }
.map-zoom button:hover { background: var(--shade); color: var(--ink); }
.map-zoom button[data-zoom="fit"] { font-size: 12px; }
.map-hint { right: 148px; bottom: 21px; font-size: 12px; color: var(--mute); white-space: nowrap; pointer-events: none; transition: opacity 0.4s; }
.map-hint.gone { opacity: 0; }
.map-hint a { pointer-events: auto; color: inherit; text-underline-offset: 3px; }

.peek {
  position: absolute;
  z-index: 3;
  width: 232px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(20, 18, 12, 0.16);
  pointer-events: none;
}
.peek[hidden] { display: none; }
.peek .peek-img { aspect-ratio: 4 / 3; background: var(--shade); overflow: hidden; }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.peek .peek-text { padding: 9px 11px 11px; }
.peek strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.peek span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mute); line-height: 1.35; }

/* ───────────────────────────── shared pieces */

.kicker { font-size: 12px; color: var(--mute); letter-spacing: 0.01em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tag { color: var(--red); font-size: 14px; text-decoration: none; }
.tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border: 1.2px solid var(--red); border-radius: 50%; vertical-align: 1px; }
button.tag:hover, a.tag:hover { text-decoration: underline; text-underline-offset: 3px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 22px; }
.card { display: block; text-decoration: none; }
.card-img { position: relative; aspect-ratio: 4 / 3; background: var(--shade); overflow: hidden; margin-bottom: 11px; }
.card-film { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px 3px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; line-height: 1.4; }
.card-film::before { content: ""; display: inline-block; margin-right: 5px; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-img img { transform: scale(1.035); }
.card h3 { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.card:hover h3 { color: var(--red); }
.card .card-sub { font-size: 13.5px; color: var(--soft); line-height: 1.3; margin-top: 1px; }
.card .card-by { font-size: 12.5px; color: var(--mute); margin-top: 5px; line-height: 1.4; }
.card .card-tags { margin-top: 6px; font-size: 12.5px; color: var(--red); }

/* ───────────────────────────── index */

.page { max-width: 1320px; margin: 0 auto; padding: 44px 32px 96px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters + .filters { margin-bottom: 44px; }
.year-block { margin-top: 56px; }
.year-block:first-of-type { margin-top: 0; }
.year-head { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 12px 40px; align-items: end; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.year-num { font-size: clamp(64px, 9vw, 116px); font-weight: 300; color: var(--red); line-height: 0.8; letter-spacing: -0.04em; }
.year-line { font-size: 19px; line-height: 1.3; color: var(--ink); max-width: 44ch; }
.year-line small { display: block; margin-top: 6px; font-size: 13px; color: var(--mute); }
.empty { color: var(--mute); padding: 24px 0; }

/* ───────────────────────────── about */

.about { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.5fr); gap: 56px 72px; align-items: start; }
.about-mark { color: var(--red); font-weight: 300; font-size: clamp(72px, 10vw, 148px); line-height: 0.7; letter-spacing: -0.03em; display: grid; padding-bottom: 0.12em; }
.about-side { position: sticky; top: 44px; }
.about-side .kicker { margin-top: 30px; font-size: 13.5px; line-height: 1.5; color: var(--soft); max-width: 30ch; }
.statements { margin-top: 30px; font-size: 19px; line-height: 1.3; }
.statements li + li { margin-top: 8px; }
.about-body { max-width: 66ch; }
.about-body h2 { font-size: 12px; font-weight: 400; color: var(--mute); margin: 54px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-body h2:first-child { margin-top: 0; }
.about-body p + p { margin-top: 0.9em; }
.about-body p { font-size: 16px; line-height: 1.58; }
.question, .about-body p.question { font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.about-body .source { font-size: 12.5px; color: var(--mute); margin-top: 12px; }
.about-year { display: grid; grid-template-columns: 92px 1fr; gap: 6px 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.about-year:first-of-type { border-top: 0; padding-top: 0; }
.about-year .n { font-size: 30px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -0.02em; }
.about-year p { font-size: 15px; line-height: 1.5; }
.stages { margin-top: 12px; display: grid; gap: 7px; }
.stages li { font-size: 14px; line-height: 1.45; color: var(--soft); }
.stages .code { font-size: 11px; color: var(--mute); padding-top: 3px; letter-spacing: 0.03em; }
.stages b { font-weight: 600; color: var(--ink); }
.reading li { padding: 9px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 16px; font-size: 14.5px; line-height: 1.4; }
.reading li:first-child { border-top: 0; }
.reading .who { font-weight: 600; }
.reading .yrs { color: var(--mute); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.colophon { margin-top: 54px; font-size: 12.5px; color: var(--mute); line-height: 1.5; }

/* ───────────────────────────── drawer */

.drawer {
  position: fixed;
  z-index: 10;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer);
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(20, 18, 12, 0.09);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slide 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer[hidden] { display: none; }
@keyframes slide { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-in { padding: 26px 32px 72px; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.close { font-size: 13px; color: var(--soft); padding: 5px 0 5px 12px; }
.close:hover { color: var(--red); }
.drawer h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.drawer h2.big-red { color: var(--red); font-size: 76px; line-height: 0.82; letter-spacing: -0.04em; }
.drawer .subtitle { font-size: 19px; line-height: 1.25; color: var(--soft); margin-top: 8px; }
.drawer .authors { margin-top: 14px; font-size: 14.5px; }
.drawer .summary { margin-top: 20px; font-size: 16px; line-height: 1.55; max-width: 60ch; }
.drawer .tags { margin-top: 16px; }
.editor-note { margin-top: 16px; font-size: 12.5px; line-height: 1.45; color: var(--mute); padding-left: 10px; border-left: 2px solid var(--line); }
.lead { margin: 26px -32px 0; background: var(--shade); display: block; width: calc(100% + 64px); cursor: zoom-in; }
.lead img { width: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; }
.work { margin-top: 30px; }
.work.along { margin-top: 46px; }
.work-head { font-size: 12px; font-weight: 400; color: var(--mute); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.work > .doc:first-child { margin-top: 0; }
.doc { margin-top: 22px; }
.doc h4 { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.doc h4 span { font-size: 12px; font-weight: 400; color: var(--mute); white-space: nowrap; }
.film video { display: block; width: 100%; max-height: 72vh; margin-top: 9px; background: #0d0d0c; }
.anim { display: block; margin-top: 9px; background: var(--shade); border: 1px solid var(--line); cursor: pointer; max-width: 100%; }
.anim:hover { border-color: var(--ink); }
.anim img { width: 100%; }
.strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.strip::after { content: ""; flex: 10 1 0; }
.thumb { display: block; background: var(--shade); border: 1px solid var(--line); cursor: zoom-in; overflow: hidden; max-width: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--ink); }
.more { margin-top: 10px; font-size: 12.5px; color: var(--soft); padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; }
.more:hover { border-color: var(--ink); color: var(--ink); }
.reads { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.reading { margin-top: 22px; max-width: 40em; }
.reading h3 { font-size: 11.5px; font-weight: 400; color: var(--mute); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.reading p { font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.reading + .reading { margin-top: 16px; }
.reads-line { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.reads-line span { color: var(--mute); margin-right: 4px; }
.reads-line a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.reads-line a:hover { border-color: var(--ink); }
.reads a { text-decoration: none; border-bottom: 1px solid var(--line); }
.reads a:hover { border-bottom-color: var(--ink); }
.reading a.who { text-decoration: none; }
.reading a.who:hover { text-decoration: underline; text-underline-offset: 3px; }
.drawer .cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 16px; margin-top: 22px; }
.drawer .block { margin-top: 30px; }
.drawer .block > h3 { font-size: 12px; font-weight: 400; color: var(--mute); padding-bottom: 9px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.drawer .question { font-size: 22px; margin-top: 22px; }
.drawer .stages li { font-size: 13.5px; }

/* ───────────────────────────── lightbox */

.lightbox { position: fixed; inset: 0; z-index: 20; background: #0d0d0c; color: #f0eee9; display: grid; grid-template-rows: auto 1fr; }
.lightbox[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; font-size: 13px; }
.lb-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-title b { font-weight: 600; }
.lb-title span { color: #9c988f; margin-left: 8px; }
.lb-count { color: #9c988f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-bar button { color: #f0eee9; padding: 6px 10px; border: 1px solid #3a3835; border-radius: 999px; font-size: 12.5px; }
.lb-bar button:hover { border-color: #f0eee9; }
.lb-stage { position: relative; overflow: auto; display: grid; place-items: center; padding: 0 16px 16px; }
.lb-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 78px); cursor: zoom-in; background: #fff; }
.lb-stage.zoomed { display: block; padding: 0; cursor: grab; }
.lb-stage.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 76px; color: #f0eee9; font-size: 26px; background: rgba(13, 13, 12, 0.55); z-index: 21; }
.lb-nav:hover { background: rgba(60, 58, 54, 0.9); }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb-nav[disabled] { opacity: 0.2; cursor: default; }

/* ───────────────────────────── medium map */

.view-medium { overflow: hidden; }
.mm-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.mm-find { position: absolute; left: 14px; top: 10px; width: 238px; z-index: 3; }
.mm-find input {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; -webkit-appearance: none; appearance: none;
}
.mm-find input:focus { outline: none; border-color: var(--ink); }
.mm-find input::placeholder { color: var(--mute); }

.mm-index { position: absolute; left: 14px; top: 50px; width: 238px; max-height: calc(100% - 64px); z-index: 2; display: flex; flex-direction: column; }
.mm-index-toggle {
  align-self: flex-start; font-size: 12px; line-height: 1.3; padding: 4px 11px 5px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--soft);
}
.mm-index-toggle:hover { border-color: var(--ink); color: var(--ink); }
.mm-index-toggle::after { content: ' +'; }
.mm-index.open .mm-index-toggle::after { content: ' –'; }
.mm-index-body { display: none; margin-top: 8px; padding: 13px 14px 14px; background: rgba(243, 241, 236, 0.95); border: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.mm-index.open .mm-index-body { display: block; }
.mm-title { font-size: 19px; font-weight: 300; color: var(--red); line-height: 1.1; letter-spacing: -0.01em; }
.mm-sub { font-size: 12px; color: var(--soft); margin-top: 3px; }
.mm-count { margin-top: 6px; font-size: 11.5px; line-height: 1.42; color: var(--soft); }
.mm-index h6 { margin: 13px 0 5px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 400; color: var(--mute); }
.mm-groups li { margin: 0 -6px; }
.mm-groups button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 2.5px 6px; font-size: 12.5px; line-height: 1.25; text-align: left; color: var(--ink); border-radius: 3px; }
.mm-groups button:hover, .mm-groups button[aria-pressed="true"] { background: var(--shade); }
.mm-groups span { margin-left: auto; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.mm-index select {
  width: 100%; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px;
}
.mm-key li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.3; color: var(--soft); padding: 1.5px 0; }
.mm-key li span { margin-left: auto; padding-left: 6px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.mm-key .k { flex: none; width: 26px; height: 0; border-top: 1.5px solid var(--ink); }
.mm-key .k-dashed { border-top-style: dashed; }
.mm-key .k-made { border-top-color: #78726a; }
.mm-key .k-beside { border-top-color: #78726a; border-top-style: dotted; }
.mm-key .k-same { border-top-color: var(--red); }
.mm-key .k-reasoned { border-top-color: var(--red); border-top-style: dotted; }
.mm-key .dot { flex: none; width: 9px; height: 9px; margin: 0 8.5px; border-radius: 50%; border: 1.2px solid var(--ink); }
.mm-key .dot-shared { background: var(--ink); }
.mm-credit { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.4; color: var(--mute); }

.mm-tip {
  position: absolute; z-index: 5; max-width: 250px; padding: 8px 10px 9px; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(20, 18, 12, 0.14); pointer-events: none; line-height: 1.3;
}
.mm-tip[hidden] { display: none; }
.mm-tip strong { display: block; font-size: 13px; font-weight: 600; }
.mm-tip span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); }
.mm-tip em { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: var(--red); }
.mm-panel {
  position: absolute; z-index: 4; top: 10px; right: 14px; bottom: 58px; width: min(330px, calc(100% - 28px));
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(20, 18, 12, 0.12);
  padding: 14px 16px 20px; overflow-y: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.4;
}
.mm-panel[hidden] { display: none; }
.mm-panel h3 { font-size: 20px; font-weight: 300; line-height: 1.15; margin: 4px 0 6px; letter-spacing: -0.01em; text-wrap: balance; }
.mm-panel h5 { margin: 15px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 400; color: var(--mute); }
.mm-panel h4 { font-size: 12.5px; font-weight: 500; color: var(--red); margin-top: 8px; line-height: 1.3; }
.mm-panel ul { margin-top: 2px; }
.mm-panel li { line-height: 1.3; padding: 2px 0; }
.mm-panel li button { text-align: left; color: var(--ink); line-height: 1.3; }
.mm-panel li button:hover { color: var(--red); }
.mm-panel li span { color: var(--mute); font-size: 11.5px; }
.mm-panel a { color: var(--ink); text-underline-offset: 3px; }
.mm-link { color: var(--mute); font-size: 12px; }
.mm-link:hover { color: var(--red); }
.mm-note { color: var(--soft); font-size: 12.5px; margin-bottom: 6px; }
.mm-from li { font-size: 13px; color: var(--mute); }
.mm-pairs li button { display: inline-flex; align-items: center; gap: 7px; }
.mm-close { float: right; font-size: 12.5px; color: var(--soft); padding: 0 0 4px 10px; }
.mm-close:hover { color: var(--red); }
.mm-why { color: var(--mute); font-size: 12px; margin-top: 6px; }
.mm-said { margin: 2px 0 4px; padding-left: 11px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink); }
.mm-source { margin: 0 0 12px 13px; font-size: 12.5px; color: var(--soft); }
.mm-source .mm-link { font-size: 12.5px; color: var(--soft); }
.mm-about { margin: 2px 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.mm-page { display: block; width: 100%; margin: 4px 0 12px; padding: 0; text-align: left; cursor: zoom-in; }
.mm-page img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; background: var(--shade); border: 1px solid var(--line); }
.mm-page:hover img { border-color: var(--ink); }
.mm-page span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--soft); }
.mm-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; }
.mm-zoom button { min-width: 34px; height: 30px; padding: 0 10px; font-size: 14px; color: var(--soft); }
.mm-zoom button + button { border-left: 1px solid var(--line); }
.mm-zoom button:hover { background: var(--shade); color: var(--ink); }
.mm-zoom button[data-zoom="fit"] { font-size: 12px; }
.mm-route { display: grid; gap: 5px; }
.mm-field { position: relative; }
.mm-field input {
  width: 100%; padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
}
.mm-field input:focus { outline: none; border-color: var(--ink); }
.mm-field input::placeholder { color: var(--mute); }
.mm-suggest {
  position: absolute; left: 0; right: -60px; top: calc(100% + 2px); z-index: 5; max-height: 260px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 6px 18px rgba(19, 19, 18, 0.12);
}
.mm-suggest[hidden] { display: none; }
.mm-suggest button { display: block; width: 100%; padding: 5px 8px; text-align: left; font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.mm-suggest button span { display: block; font-size: 11px; color: var(--mute); }
.mm-suggest button:hover, .mm-suggest li.on button { background: var(--shade); }
.mm-surprise { justify-self: start; margin-top: 2px; font-size: 12px; color: var(--red); padding: 2px 0; }
.mm-surprise:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-key .k-building { border-top: none; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 9.5px, var(--ink) 9.5px 11px, transparent 11px 13.5px); }
.mm-key .k-route { border-top: 2px solid var(--red); }
.mm-key .k-change, .mm-change .k-change { border-top: 2px solid var(--green); }
.mm-change-intro { font-size: 12px; line-height: 1.4; color: var(--mute); margin: 2px 0 8px; }
.mm-change { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.3; padding: 5px 11px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); background: var(--paper); }
.mm-change .k-change { display: inline-block; width: 22px; height: 0; }
.mm-change:hover { border-color: var(--green); color: var(--ink); }
.mm-change[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.mm-change-note { color: var(--green); font-size: 12.5px; line-height: 1.4; margin: 6px 0 4px; }
.mm-panel h5.mm-change-head { color: var(--green); }
.mm-change-list li button { color: var(--green); }
.mm-key .sq { flex: none; width: 7px; height: 7px; margin: 0 9.5px; border: 1.1px solid var(--ink); }
.mm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mm-actions button { font-size: 12px; color: var(--soft); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.mm-actions button:hover { border-color: var(--ink); color: var(--ink); }
.mm-actions .mm-walk { color: var(--red); border-color: var(--red-soft); }
.mm-panel h3 .mm-to { color: var(--mute); }
.mm-steps { margin-top: 12px; list-style: none; padding: 0; }
.mm-steps li { padding: 0; }
.mm-stop { display: grid; grid-template-columns: 22px 1fr; column-gap: 4px; padding: 3px 0 !important; }
.mm-stop .mm-n { grid-row: span 2; font-size: 11px; font-weight: 600; color: var(--red); padding-top: 1px; font-variant-numeric: tabular-nums; }
.mm-stop button { font-size: 13.5px; }
.mm-stop.on button { color: var(--red); }
.mm-stop > span:last-child { grid-column: 2; }
.mm-via { margin: 1px 0 1px 9px; padding: 3px 0 3px 17px !important; border-left: 2px solid var(--red-soft); font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.mm-pic { display: block; margin: 10px 0 8px; background: var(--shade); }
.mm-pic img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; }
@media (max-width: 900px) { .mm-pic img { max-height: 130px; } }
.mm-what { font-size: 13px; line-height: 1.45; color: var(--soft); }

/* ───────────────────────────── small screens */

@media (max-width: 900px) {
  .bar { gap: 16px; padding: 0 16px; }
  .bar-note { display: none; }
  .tabs { margin-left: auto; gap: 16px; }
  .search { width: 120px; }
  .page { padding: 28px 16px 80px; }
  .about { grid-template-columns: 1fr; gap: 36px; }
  .about-side { position: static; }
  .year-head { grid-template-columns: 1fr; }
  .legend { display: none; }
  .mm-find, .mm-index { width: 210px; left: 10px; }
  .mm-panel { top: auto; left: 10px; right: 10px; bottom: 54px; width: auto; max-height: 46%; }
  .tabs a { white-space: nowrap; }
  .map-layers { left: 12px; bottom: 12px; }
  .map-zoom { right: 12px; bottom: 12px; }
}
@media (max-width: 1240px) {
  .map-hint { display: none; }
}
@media (max-width: 560px) {
  .search { display: none; }
  .bar { gap: 10px; padding: 0 12px; }
  .mark { font-size: 19px; }
  .tabs { gap: 11px; }
  .tabs a { font-size: 13px; }
  .drawer-in { padding: 20px 16px 64px; }
  .lead { margin: 22px -16px 0; width: calc(100% + 32px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .drawer h2.big-red { font-size: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.about-body .about-lead { font-size: 21px; line-height: 1.42; font-weight: 300; max-width: 36em; margin: 0 0 30px; color: var(--ink); text-wrap: pretty; }
.bar-note a, .about-side .kicker a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bar-note a:hover, .about-side .kicker a:hover { color: var(--red); }
.link-arc.orbit { opacity: 0.75; stroke-dasharray: 1.5 3.5; }
.reading .on-map { margin-top: 12px; }
.to-map { color: var(--ink); font-size: 14px; line-height: 1.4; text-align: left; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.to-map:hover { color: var(--green); }