/* ==========================================================================
   Living in San Mateo
   Palette taken from the ground it describes: reservoir teal, marine-layer
   fog, dry-grass gold, and the pink of the Bay's salt evaporation ponds.
   ========================================================================== */

:root {
  --fog:        #E6E9E4;
  --fog-2:      #D8DDD6;
  --paper:      #F4F6F1;
  --land:       #CCD5CD;
  --ink:        #10343A;
  --ink-2:      #4C6669;
  --ink-3:      #7B8F90;
  --eucalyptus: #3F5F49;
  --salt:       #C4456B;
  --grass:      #A98A2F;
  --rule:       rgba(16, 52, 58, 0.16);
  --rule-2:     rgba(16, 52, 58, 0.30);
  --shadow:     0 1px 0 rgba(16, 52, 58, 0.06);

  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
  --wide: 76rem;
  --step: clamp(3rem, 7vw, 5.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fog:        #0E1B1E;
    --fog-2:      #16292D;
    --paper:      #142528;
    --land:       #1E383C;
    --ink:        #E2E8E1;
    --ink-2:      #A3B5B3;
    --ink-3:      #6F8482;
    --eucalyptus: #8FBE9C;
    --salt:       #F0748F;
    --grass:      #D6B457;
    --rule:       rgba(226, 232, 225, 0.16);
    --rule-2:     rgba(226, 232, 225, 0.32);
    --shadow:     none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }

a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--salt); }

:focus-visible {
  outline: 2px solid var(--salt);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--fog);
  padding: 0.6rem 1rem;
  z-index: 20;
}
.skip:focus { left: 0; }

.mono-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.75rem;
}
.mono-label a { text-decoration: none; border-bottom: 1px solid var(--rule-2); }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--fog);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wordmark {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--display);
}
.wordmark__living {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wordmark__place {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.nav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 1.9rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--rule-2); }
.nav a[aria-current] { border-bottom-color: var(--salt); color: var(--ink); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}
.hero__coords { color: var(--ink-3); }
.hero__title {
  font-size: clamp(2.4rem, 7.2vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.hero__deck {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44ch;
  font-size: clamp(1.125rem, 0.7vw + 1rem, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- the transect -------------------------------------------------------- */

.drawing-label {
  max-width: var(--wide);
  margin: 0 auto 0.6rem;
  padding: 0 var(--gutter);
  color: var(--grass);
}

.transect {
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding: 0 var(--gutter);
  max-width: var(--wide);
}
.transect--compact {
  padding: 0;
  margin: 2rem 0 3rem;
}

.transect__frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 1rem 0 0.25rem;
}
.transect__svg {
  display: block;
  width: 100%;
  min-width: 46rem;
  height: auto;
}
.transect--compact .transect__svg { min-width: 0; }

.transect__fill { fill: var(--land); }
.transect__datum { stroke: var(--rule-2); stroke-width: 1; }
.transect__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.transect__hatch { stroke: var(--ink-3); stroke-width: 0.75; }
.transect__water { opacity: 0.8; }
.transect__sea { stroke: var(--salt); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.55; }
.transect__sea-label,
.transect__grid text,
.transect__spines text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--ink-3);
}
.transect__sea-label { fill: var(--salt); letter-spacing: 0.16em; }
.transect__grid line { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 6; }
.transect__spines line { stroke: var(--rule); stroke-width: 1; }
.transect__spines text { fill: var(--ink-2); font-size: 9.5px; }
.transect__spine-note {
  font-style: italic;
  letter-spacing: 0.02em !important;
  text-transform: none;
  fill: var(--ink-3) !important;
}

.transect__dot { cursor: pointer; }
.transect__hit { fill: transparent; }
.transect__pin {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.15s ease, r 0.15s ease;
}
.transect__dot:hover .transect__pin,
.transect__dot:focus-visible .transect__pin,
.transect__dot.is-lit .transect__pin { fill: var(--salt); stroke: var(--salt); }
.transect__dot.is-here .transect__pin { fill: var(--salt); stroke: var(--salt); }
.transect__leader { stroke: var(--salt); stroke-width: 1; }
.transect__here {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--salt);
}

.transect__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  font-style: italic;
}
.transect__caption .mono-label { margin: 0; font-style: normal; white-space: nowrap; }
.transect__note { flex: 1 1 18rem; text-align: center; }
.transect__hint { display: none; color: var(--salt); }

@media (max-width: 50rem) {
  .transect__end { display: none; }
  .transect__hint { display: block; order: -1; width: 100%; }
  .transect__note { text-align: left; }
}

/* page-load draw, once */
@media (prefers-reduced-motion: no-preference) {
  .transect__line {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: draw 1.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  .transect__fill,
  .transect__water { animation: rise 1.4s 0.5s ease-out backwards; }
  .transect__dot { animation: pop 0.4s ease-out backwards; animation-delay: calc(0.9s + var(--i) * 0.06s); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes rise { from { opacity: 0; } }
  @keyframes pop { from { opacity: 0; transform: translateY(6px); } }
}

/* --- maps (Leaflet) ------------------------------------------------------ */

.map-figure { margin: 0; }

.map {
  width: 100%;
  border: 1px solid var(--rule-2);
  background: var(--fog-2);
  z-index: 0;                 /* keep Leaflet panes under the sticky masthead */
}
.map--tall { height: clamp(24rem, 60vh, 38rem); }
.map--short { height: clamp(16rem, 34vh, 20rem); }

.map__caption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-2);
}
.map__fallback {
  padding: 1.5rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* OSM tiles are drawn for daylight; take the glare off in dark mode. The two
   tile layers are filtered separately rather than together on
   .leaflet-tile-pane: inverting a hillshade moves the sun to the south-east,
   and the eye reads a relief lit from below as the same terrain inside out —
   ridges become valleys. So invert the street layer only, and darken the
   relief while pushing its contrast up to survive the wash. */
@media (prefers-color-scheme: dark) {
  .map-tiles--street { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9); }
  .map-tiles--relief { filter: brightness(0.5) contrast(1.25); }
}

.map-station__box {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}
.map-hood { cursor: pointer; transition: fill 0.15s ease, stroke 0.15s ease; }
.map-hood.is-lit { fill: var(--salt); stroke: var(--salt); }

/* Leaflet's chrome, in the site's voice */
.leaflet-container {
  font-family: var(--body);
  background: var(--fog-2);
}
.leaflet-container a { color: var(--ink); }
.leaflet-control-attribution {
  font-family: var(--mono);
  font-size: 10px !important;
  /* token-driven so it flips with the theme — the attribution sits outside
     the tile pane and so escapes the dark-mode invert filter */
  background: var(--paper) !important;
  color: var(--ink-2) !important;
  padding: 2px 6px;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule-2);
}
.leaflet-bar a:hover { background: var(--fog-2); color: var(--ink); }
.leaflet-tooltip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: var(--fog);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 8px;
}
.leaflet-tooltip-top::before { border-top-color: var(--ink); }
.leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 14px rgba(16, 52, 58, 0.18);
}
.leaflet-popup-tip { background: var(--paper); }
.leaflet-popup-content { margin: 0.9rem 1.1rem; font-size: 0.95rem; line-height: 1.4; }
.leaflet-popup-content strong { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.map-pop__meta {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.map-pop__note { display: block; margin-top: 0.5rem; color: var(--ink-2); }
.map-pop__go {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salt) !important;
}

/* map beside the section drawing on a neighborhood page */
.locator {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.locator__label { margin: 0 0 0.5rem; color: var(--grass); }
.locator .transect--compact,
.locator .map-figure { margin: 0; }
/* the column is narrow whatever the viewport is doing, so drop the end labels;
   the compact drawing scales instead of scrolling, so drop the drag hint too */
.locator .transect__end,
.locator .transect__hint { display: none; }
.locator .transect__note { text-align: left; flex-basis: auto; }
.locator .map--short { height: clamp(15rem, 30vh, 18rem); }
@media (max-width: 44rem) {
  .locator { grid-template-columns: 1fr; }
}

/* the home page's map, with its notes beside it */
.map-block {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .map-block { grid-template-columns: 1fr; }
}
.map-block__notes p { color: var(--ink-2); font-size: 0.98rem; }
.map-block__notes .mono-label { color: var(--grass); }

/* --- photographs --------------------------------------------------------- */

.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--fog-2);        /* holds the slot's colour while it loads */
  box-shadow: 0 0 0 1px var(--rule-2);
}
/* set by the include from `ratio` and the registry's `focus` */
.photo[style*="--photo-ratio"] img {
  aspect-ratio: var(--photo-ratio);
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-focus, 50% 50%);
}

.photo__caption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-2);
}

/* full-measure photograph between sections, aligned with the drawings — brings
   its own gutter, since nothing else out here supplies one */
.photo--wide {
  max-width: var(--wide);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding: 0 var(--gutter);
}
/* the same width inside a .section, which has already paid the gutter */
.photo--block { max-width: var(--wide); margin: 0 auto clamp(2rem, 4vw, 3rem); }
/* ...and one closing a section, under whatever it comments on */
.photo--coda { max-width: var(--wide); margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
/* the establishing photograph on an article page, above the drawings */
.photo--hood { margin: 0 0 clamp(2rem, 5vw, 3rem); }

/* two frames read as one comparison: no gap between them, one caption under */
.photo-pair {
  max-width: var(--wide);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.photo-pair__frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.photo-pair .photo__caption { display: none; }
.photo-pair__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0 0;
}
.photo-pair__label .mono-label { margin: 0; }
.photo-pair__note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-2);
}
@media (max-width: 40rem) {
  .photo-pair__frames { grid-template-columns: 1fr; }
}

/* photographs are exposed for daylight; take the glare off after dark, the
   same courtesy the map tiles get */
@media (prefers-color-scheme: dark) {
  .photo img { filter: brightness(0.86) saturate(0.92); }
}

/* --- sections ------------------------------------------------------------ */

.section {
  padding: var(--step) var(--gutter);
  border-top: 1px solid var(--rule);
}
.section--tint { background: var(--paper); }

.section__head {
  max-width: var(--wide);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.section__head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  max-width: 20ch;
}
.section__deck {
  margin-top: 1.1rem;
  max-width: 52ch;
  color: var(--ink-2);
}
.section__more {
  max-width: var(--wide);
  margin: 2rem auto 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* --- bands (neighborhood index) ------------------------------------------ */

.bands { max-width: var(--wide); margin: 0 auto; }

.band {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.band:last-child { border-bottom: 1px solid var(--rule); }
.band__label h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
.band__label .mono-label { color: var(--grass); margin-bottom: 0.6rem; }
.band__blurb { font-size: 0.9rem; color: var(--ink-2); margin: 0; line-height: 1.45; }

.band__list { list-style: none; margin: 0; padding: 0; }
.band__list > li + li { border-top: 1px dotted var(--rule-2); }
.band__list a {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr auto;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding: 0.7rem 0.6rem 0.7rem 0;
  text-decoration: none;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.band__list a:hover,
.band__list a:focus-visible {
  background: var(--fog-2);
  padding-left: 0.6rem;
}
.band__name { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
.band__note { color: var(--ink-2); font-size: 0.92rem; }
.band__elev { margin: 0; color: var(--ink-3); }
.band__none { color: var(--ink-3); font-style: italic; padding: 0.7rem 0; font-size: 0.95rem; }

/* --- the neighborhoods table --------------------------------------------- */
/* The same eleven as the bands, laid out downhill so fog and canopy can be
   read as a gradient. Wide by nature: it scrolls inside its own frame rather
   than widening the page, the same bargain the transect makes. */

.hood-table__scroll {
  /* narrower than --wide: four columns spread across the full measure leave a
     gulf between a neighborhood and its elevation.

     Deliberately not a scroll container. `overflow-x: auto` would promote
     overflow-y from visible to auto, which paints a scrollbar wherever the OS
     shows them always — for a table that fits. Four columns at min-width 38rem
     clear the narrowest width this layout ever sees (46rem less gutters), and
     narrower than that it stacks instead. */
  max-width: 54rem;
  margin: 0 auto;
}
.hood-table {
  width: 100%;
  min-width: 38rem;   /* four columns fit just above the stacking breakpoint */
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
/* slack belongs to the platform column, not the neighborhood one */
.hood-table thead th:nth-child(1) { width: 36%; }
.hood-table thead th:nth-child(2) { width: 10%; }
.hood-table thead th:nth-child(3) { width: 16%; }
.hood-table thead th:nth-child(4) { width: 38%; }
.hood-table__caption {
  caption-side: top;
  text-align: left;
  max-width: var(--measure);
  margin-bottom: 1rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.45;
}
.hood-table th,
.hood-table td {
  padding: 0.8rem 1.5rem 0.8rem 0;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
  font-weight: 400;
}
.hood-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grass);
}
.hood-table tbody tr:last-child th,
.hood-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.hood-table tbody tr { transition: background 0.15s ease; }
.hood-table tbody tr:hover { background: var(--fog-2); }
.hood-table tbody th[scope="row"] {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hood-table tbody th[scope="row"] a { text-decoration: none; }
.hood-table tbody th[scope="row"] a:hover { text-decoration: underline; }
.hood-table tbody td { color: var(--ink-2); font-size: 0.92rem; }
.hood-table__num {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.hood-table tbody td.hood-table__num { color: var(--ink-3); }
.hood-table__access {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Narrow screens: stop being a grid and become one block per neighborhood.
   Sideways scrolling to read four columns is worse than reading eleven short
   stacks, so the row header goes full width with elevation and band beneath
   it, and the platform gets its column heading back as a label. */
@media (max-width: 46rem) {
  .hood-table { min-width: 0; display: block; }
  .hood-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hood-table caption { display: block; }
  .hood-table tbody { display: block; }
  .hood-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.75rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-top: 1px solid var(--rule);
  }
  .hood-table tbody th,
  .hood-table tbody td { display: block; border: 0; padding: 0; }
  .hood-table tbody th[scope="row"] {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }
  .hood-table tbody td[data-label="Elevation"] { grid-column: 1; text-align: left; }
  .hood-table tbody td[data-label="Band"] { grid-column: 2; }
  .hood-table tbody td[data-label="Nearest platform"] {
    grid-column: 1 / -1;
    margin-top: 0.45rem;
  }
  .hood-table tbody td[data-label="Nearest platform"]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grass);
    margin-bottom: 0.15rem;
  }
  .hood-table__access { margin-top: 0.1rem; }
}

@media (max-width: 46rem) {
  .band { grid-template-columns: 1fr; gap: 1rem; }
  .band__list a { grid-template-columns: 1fr auto; }
  .band__note { grid-column: 1 / -1; }
}

/* --- guide cards --------------------------------------------------------- */

.cards {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1px;
}
.card { background: var(--paper); box-shadow: 0 0 0 1px var(--rule-2); }
.card a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.6rem 1.5rem 1.4rem;
  text-decoration: none;
  transition: background 0.15s ease;
}
.card a:hover, .card a:focus-visible { background: var(--fog); }
.card h3 { font-size: 1.3rem; }
.card p { font-size: 0.94rem; color: var(--ink-2); margin: 0; }
.card .mono-label { color: var(--grass); margin: 0; }
.card__go {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--salt);
}

/* --- notes list ---------------------------------------------------------- */

.notes { max-width: var(--wide); margin: 0 auto; padding: 0; list-style: none; }
.notes > li { border-top: 1px solid var(--rule); }
.notes > li:last-child { border-bottom: 1px solid var(--rule); }
.notes a {
  display: grid;
  grid-template-columns: 8rem minmax(0, 22rem) 1fr;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  text-decoration: none;
}
.notes a:hover .notes__title { text-decoration: underline; text-decoration-color: var(--salt); }
.notes time { margin: 0; color: var(--ink-3); }
.notes__title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.notes__deck { color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 46rem) {
  .notes a { grid-template-columns: 1fr; }
}

/* --- article pages ------------------------------------------------------- */

.prose-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.prose-page--head { padding-bottom: clamp(0.75rem, 2vw, 1.5rem); }
.page-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.prose-page--head .page-head { margin-bottom: 0; }
.page-head h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.032em;
}
.deck {
  margin-top: 1rem;
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 40ch;
}
.stamp {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1.25rem;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.6em;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.prose h3 { font-size: 1.15rem; margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--salt); }
.prose blockquote {
  margin: 1.8em 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--grass);
  font-style: italic;
  color: var(--ink-2);
}
.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--fog-2);
  padding: 0.1em 0.35em;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1.8em 0;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.prose strong { font-weight: 600; }

/* let wide tables lean out of the text column on roomy screens */
@media (min-width: 62rem) {
  .prose table { width: calc(100% + 7rem); }
}

/* --- vitals + glance ----------------------------------------------------- */

/* hairlines come from each cell's own 1px ring, so a half-empty last row
   leaves page background rather than a slab of rule colour */
.vitals, .glance dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.vitals > div, .glance dl > div {
  background: var(--fog);
  box-shadow: 0 0 0 1px var(--rule-2);
  padding: 0.9rem 1rem 1rem;
}
.vitals dt, .glance dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.vitals dd, .glance dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}
/* eight vitals want four columns, so they land as a clean 4 × 2 */
.vitals { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.glance { margin-bottom: clamp(2rem, 5vw, 3rem); }
.glance > .mono-label { color: var(--grass); }
.glance dl > div { background: var(--paper); }

/* --- pagers and sibling lists -------------------------------------------- */

.pager {
  display: flex;
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  flex-wrap: wrap;
}
.pager a {
  flex: 1 1 12rem;
  background: var(--fog);
  box-shadow: 0 0 0 1px var(--rule-2);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  transition: background 0.15s ease;
}
.pager a:hover { background: var(--fog-2); }
.pager .mono-label { display: block; margin-bottom: 0.35rem; color: var(--ink-3); }
.pager em { display: block; font-family: var(--mono); font-style: normal; font-size: 0.72rem; color: var(--salt); margin-top: 0.3rem; }
.pager__next { text-align: right; }

.siblings { margin-top: clamp(2.5rem, 6vw, 4rem); }
.siblings > .mono-label { color: var(--grass); }
.siblings ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.siblings li { border-bottom: 1px solid var(--rule); }
.siblings a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  text-decoration: none;
}
.siblings a:hover span { text-decoration: underline; text-decoration-color: var(--salt); }
.siblings span { font-family: var(--display); font-weight: 600; }
.siblings em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* --- index pages --------------------------------------------------------- */

.index-wide { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) var(--step); }

.feed-link {
  padding-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* --- footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule-2);
  background: var(--paper);
  padding: var(--step) var(--gutter) 2rem;
}
.footer__grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__col .mono-label { color: var(--grass); }
.footer__data { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 0.8rem; }
.footer__links { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.footer__links li { margin-bottom: 0.4rem; }
.footer__rule {
  max-width: var(--wide);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}