/* Field Notes read surface (M4 §4, M5 shelf; visual identity + motion + print
   are M8). Mobile-first, editorial, warm — earns "you'd send the link". */

/* Soft crossfade between pages via the View Transitions API (M8). Turbo Drive
   drives it; unsupported browsers just cut, as before. */
@view-transition { navigation: auto; }

:root {
  color-scheme: light dark; /* form controls & UA chrome follow the scheme (M10) */
  --ink: #23201b;
  --ink-soft: #5c554a;
  --faint: #8a8175;
  --paper: #faf7f1;
  --card: #fffdf9;
  --rule: #e5ddd0;
  --accent: #7a5c3e;
  --accent-soft: #b08b5f;
  --gold: #b8862f;
  --measure: 40rem;
  --wide: 58rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ---- Nav / crumbs (M10: a sticky translucent material — content scrolls
   under it; the bottom edge is a faded mask, not a hard 1px rule) ---- */
.note-nav, .shelf-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 0 -1.25rem 0.5rem; padding: 1.1rem 1.25rem 0.9rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.6rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 0.6rem), transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .note-nav, .shelf-nav { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .note-nav, .shelf-nav {
    background: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.shelf-nav { justify-content: flex-end; }
.crumb {
  display: inline-block; font-family: var(--sans); font-size: 0.8125rem;
  letter-spacing: 0.02em; color: var(--faint); text-decoration: none;
}
.crumb:hover { color: var(--accent); }
.crumb-list { color: var(--accent); font-weight: 600; }

/* The page title surfaces in the bar once the masthead scrolls away
   (.titled is toggled by the site-map controller's masthead observer). */
.nav-title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 0.95rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.note-nav.titled .nav-title { opacity: 1; transform: none; }

.note, .lens-page, .shelf, .favorites {
  max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem 4rem;
}
.shelf { max-width: var(--wide); }

/* ---- The note ---- */
.note-masthead { padding: 0.5rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
/* Per-lens identity (M8): the eyebrow + a hairline carry the note's lens accent.
   var(--lens) is set inline per lens; falls back to the house accent. */
.eyebrow {
  font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--lens, var(--accent-soft)); margin: 0 0 0.5rem;
}
.note[style] .note-masthead, .lens-page[style] .lens-masthead {
  border-bottom-color: color-mix(in srgb, var(--lens, var(--rule)) 45%, var(--rule));
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--accent); }
/* Display sizes carry tighter tracking and leading than body (optical sizing). */
.note-masthead h1 { font-size: 2.25rem; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
.note-place {
  margin: 0.45rem 0 0; font-family: var(--sans); font-size: 0.82rem;
  font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em;
}
.epigraph {
  font-style: italic; color: var(--ink-soft); margin: 1rem 0 0;
  padding-left: 1rem; border-left: 2px solid var(--lens, var(--accent-soft));
}
.also-lenses { font-family: var(--sans); font-size: 0.85rem; color: var(--faint); margin: 1rem 0 0; }

.note-part { margin: 2.5rem 0; }
.note-part > h2 {
  font-family: var(--sans); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--faint); font-weight: 600;
  margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule);
}
.note-part p { margin: 0 0 1rem; }

/* ---- Map ---- */
.map-fig { margin: 0 0 1.75rem; }
svg.site-map {
  width: 100%; height: auto; display: block;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
}
.sm-num { font-family: var(--sans); font-size: 12px; font-weight: 700; fill: #fff; }
.sm-coast { fill: none; stroke: #6c93a6; stroke-width: 1.1; stroke-opacity: 0.7; stroke-linejoin: round; stroke-linecap: round; }
/* Quiet geography (M11): line work behind the frame, never louder than it. */
.sm-lake { fill: #6c93a6; fill-opacity: 0.12; stroke: none; }
.sm-contour { fill: none; stroke: #a08c6a; stroke-opacity: 0.3; stroke-width: 0.7; stroke-linejoin: round; }
.sm-contour-index { stroke-opacity: 0.45; stroke-width: 1; }
.sm-river { fill: none; stroke: #6c93a6; stroke-opacity: 0.55; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.sm-road { fill: none; stroke: #8a8175; stroke-opacity: 0.4; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.sm-boundary { fill: none; stroke: #5a7f52; stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 5 4; stroke-linejoin: round; }
/* The one geography label: the largest river, small and italic. */
.sm-rname { font: italic 11px var(--serif); fill: #52788a; }
.sm-grid { stroke: var(--rule); stroke-width: 1; }
.sm-glabel { font-family: var(--sans); font-size: 10px; fill: var(--faint); }
.sm-scale line { stroke: var(--ink-soft); stroke-width: 1.5; }
.sm-slabel, .sm-nlabel { font-family: var(--sans); font-size: 10px; font-weight: 600; fill: var(--ink-soft); }
.sm-north line { stroke: var(--ink-soft); stroke-width: 1.5; }
.sm-north path { fill: var(--ink-soft); }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.35rem;
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft);
}
.filter-legend {
  align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}
.filter-label {
  margin-right: 0.15rem; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint);
}
/* Legend chips are buttons (hover spotlights; tap/Enter sticks it) styled as
   quiet labels — the affordance is in the response, not chrome. */
.legend-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.legend-item:hover { color: var(--ink); }
.legend-item[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.filter-legend .legend-item {
  min-height: 2.25rem; padding: 0.35rem 0.7rem; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--card);
  transition: border-color 0.12s ease-out, background 0.12s ease-out, transform 0.1s ease-out;
}
.filter-legend .legend-item:hover { border-color: var(--accent-soft); }
.filter-legend .legend-item:active { transform: scale(0.97); }
.filter-legend .legend-item[aria-pressed="true"] {
  color: var(--ink); border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 10%, var(--card));
}
.swatch { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }

/* ---- The living map (M10) ---- */
/* Markers are anchors: hover/focus grows them, press compresses, a saved
   site wears a gold ring, and a legend hover dims everyone else. */
.sm-marker {
  cursor: pointer; outline: none;
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.15s ease-out, opacity 0.2s ease-out;
}
.sm-marker:hover, .sm-marker:focus-visible { transform: scale(1.2); }
.sm-marker:active { transform: scale(0.92); }
.sm-marker:focus-visible circle { stroke: var(--ink); }
.sm-marker.selected circle { stroke: var(--ink); stroke-width: 3; }
.sm-marker.saved circle { stroke: var(--gold); }
.sm-marker.dim { opacity: 0.35; }
.sm-marker.filtered-out { display: none; }
.overview-map .sm-marker:hover, .overview-map .sm-marker:focus-visible { transform: scale(1.35); }
/* Count-badge: an overview cluster standing in for co-located places of one
   lens. It is a link (into that lens), grows on hover/focus, and names itself
   lens-first in the caption. */
.sm-cnum { font-family: var(--sans); font-size: 10px; font-weight: 700; fill: #fff; pointer-events: none; }

/* Plate caption: names the marker under the pointer/focus; reserves its line
   so the figure never shifts. At rest it's a quiet hint; when it names a mark
   it becomes legible feedback — full-ink, weightier, with a dot in that mark's
   colour so it's obvious which pin is speaking (Apple: causality). */
.map-caption {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; min-height: 1.4rem; margin: 0.55rem 0 0;
  transition: color 0.12s ease-out;
}
.map-caption.named {
  color: var(--ink); font-weight: 600; letter-spacing: 0.005em;
}
.map-caption.named::before {
  content: ""; flex: none; width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: var(--cap-dot, var(--accent)); box-shadow: 0 0 0 2px var(--card);
}
.map-selection {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.35rem; padding: 0.7rem 0.85rem; border-radius: 8px;
  background: var(--card); border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.82rem;
}
.map-selection[hidden] { display: none; }
.map-selection span { color: var(--ink-soft); }
.map-selection a { flex: none; font-weight: 600; text-decoration: none; }

/* Anchor jumps (marker ↔ card) land clear of the sticky bar; the no-JS
   fallback still shows which card was meant. */
.site, .map-fig { scroll-margin-top: 4.5rem; }
.site:target { border-color: var(--lens, var(--accent-soft)); }

/* ---- Sites ---- */
.site-group { margin: 1.5rem 0 2rem; scroll-margin-top: 4.5rem; }

/* Jump list: the note's own structure (site groups; a guide's sections) as
   quiet in-page links — the reader's map of a long page. */
.jump-list {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem;
  margin: 0 0 1.25rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem;
}
.jump-list a {
  color: var(--lens, var(--accent)); text-decoration: none;
}
.jump-list a:hover { color: var(--ink); text-decoration: underline; }
.jump-list a + a::before { content: "· "; color: var(--faint); font-style: normal; }
.group-label {
  font-family: var(--serif); font-style: italic; font-weight: normal;
  font-size: 1.2rem; color: var(--lens, var(--accent)); margin: 0 0 1rem;
}
.group-label a { color: inherit; }
.site {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.1rem 1.25rem; margin: 0 0 1rem; transition: border-color 0.15s;
}
.site.saved { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.site-head { display: flex; align-items: center; gap: 0.6rem; }
.site-num {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--sans);
  font-size: 0.8rem; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
/* When a map renders, the chip is a link back to it (site-map#showOnMap). */
a.site-num { color: #fff; text-decoration: none; transition: transform 0.12s ease-out; }
a.site-num:hover { transform: scale(1.15); }
a.site-num:active { transform: scale(0.92); }
.site-head h4 { font-size: 1.2rem; margin: 0; line-height: 1.2; flex: 1 1 auto; }
/* The star is a drawn glyph, not a font character: identical on every
   platform, fill animates on save, ≥44px touch target via padding (the
   negative margin keeps the card layout tight). */
.star {
  flex: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0;
  margin: -0.6rem -0.7rem -0.6rem 0;
  color: var(--gold); transition: transform 0.12s ease-out;
}
.star svg {
  width: 1.35rem; height: 1.35rem; fill: transparent;
  stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
  transition: fill 0.15s ease-out;
}
.site.saved .star svg { fill: currentColor; }
.star:hover { transform: scale(1.12); }
.star:active { transform: scale(0.88); }
.site-geo { font-family: var(--sans); font-size: 0.75rem; color: var(--faint); margin: 0.35rem 0 0 2.1rem; }
.site-body { margin: 0.5rem 0 0; }
.site-body p { margin: 0.5rem 0; }

/* "Look for" is the signature element — it wears the lens, not generic gray. */
.observation {
  margin: 0.85rem 0 0; padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--lens, var(--accent-soft)) 4%, var(--paper));
  border-radius: 8px; border: 1px solid var(--rule);
  border-left: 2px solid var(--lens, var(--accent-soft));
}
.obs-tag { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lens, var(--accent-soft)); margin-bottom: 0.25rem; }
.obs-body p { margin: 0.25rem 0; }

.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; }
.badge {
  font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.2rem 0.65rem 0.2rem 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem;
}
.b-kind { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }

.go-deeper { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 1.25rem 1.4rem; }
.go-deeper h2 { border: none; }
.go-deeper p { font-size: 0.95rem; color: var(--ink-soft); }

.colophon {
  font-family: var(--sans); font-size: 0.75rem; color: var(--faint);
  text-align: center; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}

/* ---- The shelf ---- */
.shelf-masthead, .lens-masthead, .fav-masthead { padding: 1.5rem 0; }
.shelf-masthead h1 { font-size: 2.5rem; margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
.tagline { color: var(--ink-soft); font-style: italic; margin: 0.5rem 0 0; }
.shelf-compose {
  display: inline-block; margin-top: 1rem; padding: 0.55rem 0.9rem;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 650; text-decoration: none;
  transition: transform 0.12s ease-out, background 0.15s ease-out;
}
.shelf-compose:hover { background: var(--ink); color: var(--paper); }
.shelf-compose:active { transform: scale(0.97); }

/* First-visit orientation: one quiet card that says what the objects are.
   Hidden pre-paint once dismissed (html[data-oriented], set in the layout head). */
.orientation {
  margin: 0.25rem 0 1.5rem; padding: 1rem 1.25rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  border-left: 4px solid var(--accent-soft);
}
.orientation p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.orientation strong { color: var(--ink); }
.orientation-dismiss {
  margin-top: 0.6rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 650; color: var(--faint);
  text-decoration: underline; text-underline-offset: 2px;
}
.orientation-dismiss:hover { color: var(--ink); }
:root[data-oriented] .orientation { display: none; }

.shelf-map-section, .lens-map-section { margin: 1.5rem 0 2rem; }
.browse-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.browse-heading h2 {
  margin: 0; font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint);
}
.browse-heading p { margin: 0; color: var(--faint); font-size: 0.86rem; font-style: italic; }
.lens-heading { margin: 2.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.shelf-map, .lens-map { margin-bottom: 0; }

.lens-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.lens-card {
  display: block; background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.25rem 1.4rem 1.25rem 1.55rem; text-decoration: none; color: var(--ink);
  border-left: 4px solid var(--lens, var(--accent-soft));
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lens-card:hover {
  border-color: var(--rule); border-left-color: var(--lens, var(--accent-soft));
  transform: translateY(-2px); box-shadow: 0 6px 18px -12px var(--lens, var(--accent-soft));
}
.lens-card:active { transform: scale(0.985); box-shadow: none; }
.lens-card h2 { font-size: 1.4rem; margin: 0; color: var(--lens, var(--ink)); }
.lens-card .invitation { color: var(--accent); font-style: italic; margin: 0.3rem 0 0.75rem; }
.lens-counts {
  margin: 0 0 0.2rem; font-family: var(--sans); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
/* An editorial run-in of the lens's most distinctive places — prose, not
   chips, so nothing inside the card pretends to be its own button. */
.lens-places-line { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* The dial's card on the shelf: same grammar as a lens, visibly an instrument
   rather than a shelfful of notes (dashed rule, house accent). */
.compose-card { border-style: dashed; border-left-style: solid; }
.compose-card h2 { color: var(--accent); }
.compose-open { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--accent); margin: 0.75rem 0 0; }
.compose-card:hover .compose-open { color: var(--ink); }

/* ---- Lens page ---- */
.lens-masthead h1 { font-size: 2.25rem; margin: 0; }
.invitation.big { font-size: 1.15rem; color: var(--accent); font-style: italic; margin: 0.5rem 0 0; }
.note-cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
/* The <li> is the card frame, so a place-link footer can live in the SAME
   bordered unit as the note it belongs to — an anchor can't nest an anchor, so
   the footer sits beside the card anchor yet reads as one card. */
.note-cards li {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; transition: border-color 0.15s, transform 0.15s;
}
.note-cards li:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.note-cards li:active { transform: scale(0.985); }
.note-card {
  display: block; padding: 1.15rem 1.35rem; text-decoration: none; color: var(--ink);
}
.nc-title { font-size: 1.3rem; margin: 0; }
.nc-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin: 0.2rem 0 0.5rem; font-family: var(--sans); font-size: 0.82rem;
}
.nc-region { color: var(--ink-soft); font-weight: 600; }
.nc-count { flex: none; color: var(--faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.nc-teaser { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
/* Multi-lens affordance: a footer row on the note's own card, divided from the
   note by a hairline so the tie to its Place page reads as part of the card. */
.nc-also {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 1.35rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nc-also .nc-also-go { font-size: 0.95rem; line-height: 1; transition: transform 0.15s; }
.nc-also:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.nc-also:hover .nc-also-go { transform: translateX(2px); }
.empty { color: var(--faint); font-style: italic; }

/* ---- Place page (M12) ---- */
/* A place is many ways of seeing, so the masthead stays neutral; each lens
   card wears its own accent (lens_style). */
.place-lenses-line { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); margin: 0.75rem 0 0; }
.place-lens-tag { font-weight: 600; color: var(--lens, var(--ink)); }
.place-lenses, .place-map-section { margin: 1.75rem 0 0; }
.place-lenses .lens-card h2 { font-size: 1.25rem; }
.place-plan { margin: 1.75rem 0 0; }
.place-nearby { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.nearby-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nearby-chip {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.55rem 0.9rem; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
.nearby-chip:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.nearby-chip:active { transform: scale(0.985); }
.nearby-name { font-weight: 600; font-size: 0.98rem; }
.nearby-context { font-family: var(--sans); font-size: 0.75rem; color: var(--faint); }

/* ---- Atlas index (M12 Phase 3) ---- */
.shelf-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
.atlas-counts {
  margin: 0.5rem 0 0; font-family: var(--sans); font-size: 0.78rem;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
.atlas-index { margin: 2.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.atlas-country { margin: 1.5rem 0 0; }
.country-head {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.6rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--ink);
}
.country-count {
  font-size: 0.72rem; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* State/area sub-heading inside a large country's list. */
.area-head {
  margin: 1rem 0 0.4rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.01em;
}
.area-head:first-of-type { margin-top: 0.5rem; }
.place-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.place-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.85rem;
  padding: 0.7rem 0.9rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: 10px; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
.place-row:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.place-row:active { transform: scale(0.99); }
.pr-main { display: flex; align-items: baseline; gap: 0.5rem; flex: 1 1 12rem; min-width: 0; }
.pr-name { font-weight: 600; font-size: 1rem; }
.pr-context { font-family: var(--sans); font-size: 0.75rem; color: var(--faint); }
.pr-lenses { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; }
.pr-lens {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sans); font-size: 0.74rem; color: var(--ink-soft);
}
.pr-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--lens, var(--accent)); flex: none; }
.pr-count {
  font-family: var(--sans); font-size: 0.72rem; color: var(--faint);
  font-variant-numeric: tabular-nums; margin-left: auto;
}

/* ---- Interactive atlas (M12 Phase 3b) ---- */
.atlas-viewport { position: relative; }
/* Once the controller takes over, the SVG is a pannable instrument. */
.atlas-map .site-map.atlas-live { cursor: grab; touch-action: none; }
.atlas-map .site-map.atlas-live.panning { cursor: grabbing; }
.atlas-map .site-map.atlas-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The static server markers become the no-JS fallback and hide when live. */
.atlas-hidden { display: none; }
.atlas-layer .sm-marker { cursor: pointer; }
/* Level-of-detail geography: drawn behind the marks, never interactive, shown
   only once zoomed in. Fades in so it doesn't pop. */
.atlas-geo { pointer-events: none; display: none; }
.atlas-geo.shown { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .atlas-geo.shown { animation: fade 0.35s ease-out both; }
}
/* Zoom controls exist only once the map is live (they do nothing without JS). */
.atlas-zoom {
  position: absolute; top: 0.6rem; right: 0.6rem; display: none; flex-direction: column; gap: 0.3rem;
}
.atlas-viewport:has(.site-map.atlas-live) .atlas-zoom { display: flex; }
.atlas-zbtn {
  width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer;
  font-family: var(--sans); font-size: 1.1rem; line-height: 1; color: var(--ink);
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--rule);
  border-radius: 8px; backdrop-filter: blur(4px); transition: background 0.15s, transform 0.1s;
}
.atlas-zbtn:hover { background: var(--card); border-color: var(--accent-soft); }
.atlas-zbtn:active { transform: scale(0.94); }

/* ---- Favorites ---- */
.fav-masthead h1 { font-size: 2rem; margin: 0; }
.print-btn {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 0.4rem 1rem;
  transition: background 0.15s ease-out, transform 0.12s ease-out;
}
.print-btn:hover { background: var(--ink); }
.print-btn:active { transform: scale(0.96); }
.fav-group { margin: 1.75rem 0; }
.fav-group h2 { font-size: 1.25rem; margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.fav-group h2 a { text-decoration: none; }
.fav-lens { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-left: 0.5rem; }
.fav-sites { list-style: none; margin: 0; padding: 0; }
.fav-site { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.85rem 1rem; margin: 0 0 0.6rem; }
.fav-site-head { display: flex; align-items: center; gap: 0.6rem; }
.fav-name { font-size: 1.05rem; flex: 1 1 auto; }
.fav-geo { font-family: var(--sans); font-size: 0.75rem; color: var(--faint); margin: 0.3rem 0 0 2.1rem; display: block; }
.fav-remove { flex: none; background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--faint); padding: 0 0.2rem; transition: color 0.15s ease-out, transform 0.12s ease-out; }
.fav-remove:hover { color: var(--accent); }
.fav-remove:active { transform: scale(0.88); }

/* ---- Compose: the dial ---- */
.dial { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem 1.4rem; margin: 1.5rem 0; }
.dial fieldset { border: none; padding: 0; margin: 0 0 1.25rem; }
.dial legend { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); padding: 0; margin-bottom: 0.75rem; }
.legend-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }
/* One row = one instrument: name, slider, readout share a line (the name and
   readout bracket the slider on mobile; all three sit inline when wide). */
.dial-row {
  display: grid; align-items: center; gap: 0.3rem 0.75rem;
  grid-template-areas: "name pct" "slider slider";
  grid-template-columns: 1fr auto;
  padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
}
.dial-row:last-child { border-bottom: none; }
.dial-name { grid-area: name; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.dial-row.active .dial-name { color: var(--accent); }
.dial-hint { display: block; font-weight: 400; font-size: 0.8rem; color: var(--faint); font-style: italic; }
.dial-row input[type="range"], .dial-row select { grid-area: slider; width: 100%; }
.dial-row input[type="range"] { accent-color: var(--accent); }
.dial-pct { grid-area: pct; font-family: var(--sans); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--faint); min-width: 2.5rem; text-align: right; }
.dial-row.active .dial-pct { color: var(--accent); font-weight: 600; }
.dial-where select { font-family: var(--sans); font-size: 0.95rem; padding: 0.5rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.dial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.dial-go { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 9px; padding: 0.7rem 1.4rem; cursor: pointer; transition: background 0.15s ease-out, transform 0.12s ease-out; }
.dial-go:hover:not(:disabled) { background: var(--ink); }
.dial-go:active:not(:disabled) { transform: scale(0.97); }
.dial-go:disabled { background: var(--rule); color: var(--faint); cursor: default; }
/* The live readout: what this mix would assemble, before committing. */
.dial-status { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0; }

/* ---- Compose: saved mixes ---- */
.saved-mixes { margin: 2rem 0; }
.saved-mixes h2 { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); }
.saved-empty { color: var(--faint); font-style: italic; }
.saved-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.saved-mix { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.saved-mix a { flex: 1 1 auto; font-family: var(--sans); font-size: 0.9rem; }

/* ---- Compose: the assembled guide ---- */
.guide-masthead h1 { font-size: 1.9rem; }
/* The counts are provenance, not the title — a quiet subline under the name. */
.guide-counts {
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin: 0.5rem 0 0;
}
.mix-bars { list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
.mix-row { display: grid; grid-template-columns: 8rem 1fr 2.5rem; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }
.mix-label { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.mix-track { background: var(--rule); border-radius: 5px; height: 0.55rem; overflow: hidden; }
.mix-fill { display: block; height: 100%; width: var(--fill, 0); background: var(--accent-soft); border-radius: 5px; }
.mix-pct { font-family: var(--sans); font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--faint); text-align: right; }
.save-mix { display: inline-flex; align-items: center; gap: 0.4rem; margin: 1.25rem 0 0; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--accent-soft); border-radius: 8px; padding: 0.45rem 0.9rem; cursor: pointer; transition: background 0.15s ease-out, color 0.15s ease-out, transform 0.12s ease-out; }
/* The same drawn star as the site cards — one glyph for "keep this". */
.save-mix svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.save-mix:hover:not(:disabled) { background: var(--accent); color: #fff; }
.save-mix:active:not(:disabled) { transform: scale(0.97); }
.save-mix:disabled { color: var(--faint); border-color: var(--rule); cursor: default; }
.guide-section > h2 { text-transform: none; letter-spacing: -0.01em; font-size: 1.5rem; color: var(--lens, var(--ink)); }
.section-intro { font-style: italic; color: var(--ink-soft); max-width: var(--measure); }
.group-lens { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lens, var(--faint)); margin-left: 0.5rem; }

@media (min-width: 34rem) {
  .note-masthead h1 { font-size: 2.75rem; }
  .guide-masthead h1 { font-size: 2.1rem; }
  .lens-grid { grid-template-columns: repeat(2, 1fr); }
  /* Wide: name, slider, readout inline — the slider stretches to fill, so
     the row reads left-to-right as one instrument with no dead gulf. */
  .dial-row {
    grid-template-areas: "name slider pct";
    grid-template-columns: minmax(11rem, 16rem) 1fr 3rem;
    gap: 1rem;
  }
}
@media (min-width: 50rem) {
  .lens-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Motion (M8): life, not decoration. All gated behind reduced-motion,
   all short and eased, never blocking input. ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Cards + guide sections rise-and-fade in, lightly staggered. */
  .lens-card, .note-cards li, .guide-section { animation: rise 0.4s ease-out both; }
  .lens-grid .lens-card:nth-child(2), .note-cards li:nth-child(2) { animation-delay: 0.05s; }
  .lens-grid .lens-card:nth-child(3), .note-cards li:nth-child(3) { animation-delay: 0.10s; }
  .lens-grid .lens-card:nth-child(4), .note-cards li:nth-child(4) { animation-delay: 0.15s; }
  .lens-grid .lens-card:nth-child(5) { animation-delay: 0.20s; }
  .lens-grid .lens-card:nth-child(n+6) { animation-delay: 0.25s; }
  .guide-section:nth-of-type(2) { animation-delay: 0.06s; }
  .guide-section:nth-of-type(n+3) { animation-delay: 0.12s; }

  /* Guide mix bars grow from zero, so a guide visibly assembles. */
  .mix-fill { animation: grow 0.7s 0.1s ease-out both; }

  /* The saved star pops when toggled (JS adds .pop, retriggered each time). */
  .star.pop { animation: pop 0.3s ease; }

  /* The living map's arrival (M10): the first time the map scrolls into view
     (.in-view, added once by the site-map controller) the coast draws itself,
     the graticule fades up, and the markers land in itinerary order with a
     slight overshoot — the journey assembles in front of you. All animations
     fill backwards only, so the settled map is plain styles (hover/press keep
     working) and no-JS pages simply show the finished map. */
  svg.site-map.in-view .sm-coast,
  svg.site-map.in-view .sm-river { animation: draw 1.1s ease-out backwards; }
  svg.site-map.in-view .sm-grid,
  svg.site-map.in-view .sm-glabel,
  svg.site-map.in-view :is(.sm-lake, .sm-contour, .sm-road, .sm-boundary, .sm-rname) {
    animation: fade 0.8s ease-out backwards;
  }
  svg.site-map.in-view .sm-marker:not(.filtered-out) {
    animation: land 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
    animation-delay: calc(0.3s + var(--i, 0) * 60ms);
  }
  .map-fig[data-filter-groups="true"].has-active-filter svg.site-map.in-view .sm-marker:not(.filtered-out) {
    animation: filter-reveal 0.16s ease-out both;
    animation-delay: 0s;
  }

  /* Marker ↔ card conversation: the tapped marker's card takes a brief
     lens-tinted wash; a chip tap pulses its marker on the map. */
  .site.flash { animation: site-flash 1.4s ease-out; }
  .sm-marker.pulse { animation: marker-pulse 0.7s ease; }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow { from { width: 0; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes land { from { opacity: 0; transform: scale(0); } }
@keyframes filter-reveal { from { opacity: 0; transform: scale(0.82); } }
@keyframes marker-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes site-flash {
  0%, 25% {
    background-color: color-mix(in srgb, var(--lens, var(--accent)) 12%, var(--card));
    border-color: var(--lens, var(--accent));
  }
}

/* Named view-transition pairs (shelf ↔ lens ↔ note titles) respect reduced
   motion: the navigation falls back to a plain cut. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- Print (M8): a note and a guide print as clean, self-contained field
   documents — map included, badges as text, chrome removed. ---- */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  * { animation: none !important; }

  /* Strip the interactive chrome. */
  .note-nav, .shelf-nav, .print-btn, .fav-remove, .star, .map-caption,
  .map-selection, .save-mix, .dial, .saved-mixes, .compose-card, .jump-list, .dial-status,
  .also-lenses { display: none !important; }

  .note, .guide, .favorites, .shelf, .lens-page { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }

  /* Keep a site, a group, or a section from splitting across a page. */
  .site, .site-group, .go-deeper, .mix-row { break-inside: avoid; }
  .guide-section, .note-part { break-inside: avoid-page; }

  /* Print-legible ink; accents flatten to black so any lens prints the same. */
  .eyebrow, .group-label, .group-lens, .guide-section > h2,
  .lens-card h2, .mix-label, .mix-pct { color: #000 !important; }
  .site { border: 1px solid #bbb; box-shadow: none; background: #fff; }
  .observation { background: #f4f4f4; border: 1px solid #ddd; }
  .badge { border: 1px solid #999; }
  .site-map { border: 1px solid #999; }
  .sm-marker.filtered-out { display: inline; }
  /* Geography flattens to grays; the plate stays legible in one ink. */
  .sm-coast, .sm-river, .sm-boundary { stroke: #666; }
  .sm-road, .sm-contour { stroke: #999; }
  .sm-lake { fill: #e5e5e5; }
  .sm-rname { fill: #333; }
  .mix-fill { background: #666 !important; }

  /* Favourites list: a compact field checklist. */
  .fav-site { border: none; border-bottom: 1px solid #ccc; border-radius: 0; padding: 0.4rem 0; }

  /* A quiet footer on every printed page. */
  .colophon { border-top: 1px solid #ccc; padding-top: 0.5rem; margin-top: 1.5rem; color: #333; }
}

/* Draft preview banner (local authoring aid; see FieldNotesController#preview).
   Deliberately not part of the published note surface. */
.draft-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 1rem;
  background: #fbf1d9;
  border-bottom: 1px solid var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.draft-banner .draft-tag {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: var(--gold);
  color: #fffdf9;
}
.draft-banner .draft-link {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.draft-banner .draft-link:hover { text-decoration: underline; }
/* On preview pages the banner owns the sticky top edge; the nav scrolls away. */
.draft-banner ~ .note .note-nav { position: static; }
@media print { .draft-banner { display: none; } }

/* ---- Night mode (M10; user-toggleable in M11). The same warm field-journal,
   read after dark — the Night Sky lens is literally used outdoors at night.
   Paper deepens to ink, ink warms to bone. Applied via [data-theme="dark"] on
   <html>: the head script sets it from the saved choice or the OS preference
   before first paint, and the corner toggle flips it live. Print is untouched
   (browsers print the light scheme). ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7e1d4;
  --ink-soft: #b3a996;
  --faint: #857b6b;
  --paper: #181510;
  --card: #211d16;
  --rule: #3a3326;
  --accent: #c79d6d;
  --accent-soft: #9c8259;
  --gold: #d2a63f;
}
:root[data-theme="light"] { color-scheme: light; }

/* The lens accents were tuned for paper; lift them toward bone so colored type
   keeps its contrast on ink. color-mix resolves the per-element var(--lens) at
   the usage site, so every lens self-adjusts. */
:root[data-theme="dark"] :is(.eyebrow, .group-label, .obs-tag, .lens-card h2,
                             .group-lens, .guide-section > h2, .jump-list a) {
  color: color-mix(in srgb, var(--lens, var(--accent-soft)) 62%, var(--ink));
}
:root[data-theme="dark"] .observation { background: color-mix(in srgb, var(--lens, var(--accent-soft)) 9%, var(--card)); }

/* The accent is now light, so filled chips/buttons flip to dark ink text. */
:root[data-theme="dark"] :is(.site-num, a.site-num, .print-btn, .dial-go) { color: #221c11; }
:root[data-theme="dark"] .shelf-compose { color: #221c11; }
:root[data-theme="dark"] .shelf-compose:hover { color: var(--paper); }
:root[data-theme="dark"] .dial-go:disabled { color: var(--faint); }
:root[data-theme="dark"] :is(.print-btn, .dial-go):hover { color: var(--paper); }
:root[data-theme="dark"] .save-mix:hover:not(:disabled) { color: #221c11; }

/* The map reads as a chart at night: water brightens a step, relief recedes. */
:root[data-theme="dark"] :is(.sm-coast, .sm-river) { stroke: #82a9bd; }
:root[data-theme="dark"] .sm-lake { fill: #82a9bd; fill-opacity: 0.14; }
:root[data-theme="dark"] .sm-contour { stroke-opacity: 0.22; }
:root[data-theme="dark"] .sm-contour-index { stroke-opacity: 0.35; }
:root[data-theme="dark"] .sm-rname { fill: #8fb3c4; }

:root[data-theme="dark"] .draft-banner { background: #322a12; }
:root[data-theme="dark"] .draft-banner .draft-tag { color: #221c11; }

/* ---- Theme toggle (M11): a small translucent control fixed clear of the
   sticky top nav; the moon shows in light mode (tap for dark), the sun in
   dark. Same material + reduced-transparency fallbacks as the nav. ---- */
.theme-toggle {
  position: fixed; z-index: 30; right: 1rem; bottom: 1rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease-out, color 0.15s ease-out;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle svg {
  width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-toggle { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-toggle {
    background: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media print { .theme-toggle { display: none; } }

/* ---- Open-licensed imagery (M13): an identification aid, not decoration.
   Every image is additive — with images off (or none licensed) the layout is
   byte-for-byte the pre-M13 design. Figures use the card material + rule so
   they sit quietly among the prose. ---- */
figure.media-figure, figure.place-hero { margin: 0; }
figure.media-figure img, figure.place-hero img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  background: var(--card); border: 1px solid var(--rule);
}

/* The place-page hero: one credited image under the masthead, wide but calm. */
.place-hero { margin: 0 auto 2rem; max-width: var(--wide); }
.place-hero img { border-radius: 8px; max-height: 22rem; object-fit: cover; }

/* "The names behind what you saw" — one uniform photo per species. Equal tiles
   (fixed aspect + object-fit: cover) read as an orderly identification key, not
   a ragged wall of thumbnails. */
.species-media { border-top: 1px solid var(--rule); }
.species-media-lede {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft);
  margin: 0 0 1.5rem; max-width: var(--measure);
}
.species-grid {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}
.species-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.species-figure { margin: 0; }
.species-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; background: var(--card); border: 1px solid var(--rule);
}
.species-names { display: flex; flex-direction: column; gap: 0.05rem; margin-top: 0.4rem; }
.species-common { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; color: var(--ink); line-height: 1.25; }
.species-sci { font-style: italic; font-size: 0.82rem; color: var(--ink-soft); }
.species-card .media-credit { margin-top: 0; }

/* Attribution: quiet, mandatory for anything but public domain. */
.media-credit {
  font-family: var(--sans); font-size: 0.7rem; line-height: 1.4;
  color: var(--faint); margin-top: 0.35rem;
}
.media-credit a { color: var(--faint); text-decoration: underline; text-underline-offset: 1px; }
.media-credit a:hover { color: var(--accent); }
.media-author { color: var(--ink-soft); }

/* Print: the image + its credit survive; no page controls (they're already
   handled above). The grid collapses to a readable two-up. */
@media print {
  .species-grid { grid-template-columns: repeat(2, 1fr); }
  figure.media-figure img, figure.place-hero img { border: 1px solid #ccc; }
  .media-credit a { text-decoration: none; }
}

/* Image attribution hidden from view for now (M13 follow-up request). The
   credit markup — author, license link, source — STAYS in the DOM/source, so
   it's present and this is a one-line revert. Re-expose before publishing
   publicly: CC-BY / CC-BY-SA / CC-BY-NC require visible attribution. */
.media-credit { display: none; }