/* ==========================================================================
   Derry atlas: core components v0.1
   Uses only variables from tokens.css. Plain CSS, BEM-ish names, no JS needed
   for styling. State comes from ARIA attributes (aria-pressed, aria-selected,
   aria-current), so templates stay accessible by construction.
   ========================================================================== */

/* Ported in block 01 (foundation): base, typography, links, buttons, chips,
   form fields, badges, the number token, breadcrumbs, blue pencil.
   Place list rows, cards, tabs, the site shell and the map sections arrive
   with blocks 02 and 05–13, each as its own named section below. */

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: var(--weight-regular) var(--text-m) / var(--leading-ui) var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--color-link); }
button, input, select, textarea { font-family: inherit; }
.page { margin: 0 auto; }

:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* ---- Typography --------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.t-display { font-size: var(--display); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: 0.02em; }
.t-h1 { font-size: var(--h1); line-height: var(--leading-tight); }
.t-h2 { font-size: var(--h2); line-height: 1.1; }
.t-h3 { font-size: var(--h3); }
.t-h4 { font-size: var(--h4); }
.eyebrow {
  font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.eyebrow--cat { color: var(--cat, var(--color-ink-2)); }
.t-lead { margin: 0; font: var(--text-xl) / var(--leading-read) var(--font-read); max-width: var(--measure); }
.t-meta { font-size: var(--text-xs); color: var(--color-ink-2); }
.t-data { font-family: var(--font-display); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.prose { font: var(--text-l) / var(--leading-read) var(--font-read); max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font: var(--weight-semibold) var(--h3) / var(--leading-snug) var(--font-display); margin-top: var(--space-8); }
.prose p { margin: 0; }

/* ---- Links ------------------------------------------------------------- */
.link, .prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-1) var(--ease-out);
}
.link:hover, .prose a:hover { text-decoration-color: var(--color-link-hover); text-decoration-thickness: 2px; }
.link--quiet { color: var(--color-ink-2); }
.link--arrow { text-decoration: none; font-weight: var(--weight-medium); }
.link--arrow::after { content: " →"; }
.link--arrow:hover { text-decoration: underline; text-decoration-color: var(--color-link-hover); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target);
  padding: 0 var(--space-5);
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--color-ink);
  font: var(--weight-semibold) var(--text-m) / 1.1 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-1) var(--ease-out), border-color var(--duration-1) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--color-ink); color: var(--color-ink-inverse); }
.btn--primary:hover { background: var(--color-ink-hover); }
.btn--secondary { border-color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-surface-sunk); }
.btn--quiet { border-color: var(--color-control); font-weight: var(--weight-medium); background: var(--color-surface); }
.btn--quiet:hover { border-color: var(--color-ink); }
.btn--compact { min-height: var(--target-compact); padding: 0 var(--space-3); font-size: var(--text-s); position: relative; }
.btn--compact::after { content: ""; position: absolute; inset: -4px 0; }
.btn--icon { width: var(--target); padding: 0; }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---- Chips (filters: <button aria-pressed>) ---------------------------- */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: var(--border-1) solid var(--color-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--weight-medium) var(--text-s) / 1.1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
.chip::after { content: ""; position: absolute; inset: -4px 0; }  /* 44px hit area */
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
.chip__count { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.chip[aria-pressed="true"] .chip__count { color: var(--color-ink-inverse-2); }
.chip svg { width: 14px; height: 14px; flex: none; }

/* ---- Form fields -------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: var(--weight-medium) var(--text-s) / 1.3 var(--font-ui); }
.field__hint { font-size: var(--text-xs); color: var(--color-ink-2); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); font-weight: var(--weight-medium); }
.input {
  width: 100%;
  min-height: var(--target);
  padding: 0 14px;
  border: var(--border-2) solid var(--color-control);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--weight-regular) var(--text-m) / 1.2 var(--font-ui);
}
.input::placeholder { color: var(--color-ink-3); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { border-color: var(--color-ink); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
/* Select: native element, own chevron 16px from the edge (follows theme via currentColor) */
.select-wrap { position: relative; display: block; color: var(--color-ink); }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.search { position: relative; }
.search .input { padding-left: 42px; }
.search__icon { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; color: var(--color-ink-2); }
/* Clear button: render it hidden and show it (JS) only when the field has a value.
   Click or Esc clears the field and returns focus to the input. */
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search--filled .input { padding-right: 46px; }
.search__clear {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--target); height: var(--target);
  border: 0; border-radius: var(--radius-2);
  background: transparent; color: var(--color-ink-2); cursor: pointer;
}
.search__clear:hover { color: var(--color-ink); }
.search__clear svg { width: 18px; height: 18px; }
.search__clear[hidden] { display: none; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); font-size: var(--text-s); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }

/* ---- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: var(--border-1) solid var(--color-line);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--weight-medium) var(--text-xs) / 1.1 var(--font-ui);
  white-space: nowrap;
}
.badge b { font: var(--weight-bold) var(--text-xs) / 1 var(--font-display); }
.badge svg { width: 16px; height: 16px; flex: none; }
.badge--period { border-color: transparent; border-radius: var(--radius-pill); background: var(--color-surface-sunk); }
.badge--lg { min-height: 34px; font-size: var(--text-s); padding: 0 12px 0 8px; }
.conf--u { border-style: dashed; border-color: var(--color-control); background: transparent; color: var(--color-ink-2); }

/* Category dot label */
.cat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.cat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); flex: none; }
.cat--civic, .num--civic, .mk--civic { --cat: var(--cat-civic); }
.cat--homes, .num--homes, .mk--homes { --cat: var(--cat-homes); }
.cat--barrens, .num--barrens, .mk--barrens { --cat: var(--cat-barrens); }
.cat--encounters, .num--encounters, .mk--encounters { --cat: var(--cat-encounters); }
.cat--historical, .num--historical, .mk--historical { --cat: var(--cat-historical); }
.cat--outlying, .num--outlying, .mk--outlying { --cat: var(--cat-outlying); }

/* ---- Number token: the map marker, as HTML, for lists and cards -------- */
.num {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  font: var(--weight-bold) var(--text-2xs) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.num--a { background: var(--cat); color: #FFFFFF; }
.num--b { background: var(--color-surface); color: var(--cat); box-shadow: inset 0 0 0 2.5px var(--cat); outline: 1.5px dotted var(--color-pencil); outline-offset: 2px; }
.num--c { background: var(--color-surface); color: var(--cat); border: 1.5px dashed var(--cat); outline: 1.5px dashed var(--color-pencil); outline-offset: 2px; }
.num--u { border-radius: var(--radius-1); border: 1.5px dashed var(--color-control); color: var(--color-ink-2); }

/* ---- Breadcrumbs -------------------------------------------------------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--color-ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-control); }
.crumbs a { color: var(--color-ink-2); text-underline-offset: 0.2em; }
.crumbs [aria-current="page"] { color: var(--color-ink); overflow-wrap: anywhere; }
.crumbs li { display: flex; min-width: 0; align-items: baseline; }

/* ---- Blue pencil: reconstruction ---------------------------------------- */
.pencil { color: var(--color-pencil); font-family: var(--font-read); font-style: italic; }
.pencil-note {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-2) dashed var(--color-pencil);
  border-radius: var(--radius-1);
  background: var(--color-pencil-tint);
  color: var(--color-pencil);
}
.pencil-note__label { font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pencil-note p { margin: 0; font: italic var(--text-l) / var(--leading-read) var(--font-read); }

/* ==========================================================================
   SITE SHELL (block 02): skip link, header, About Derry dropdown, menu panel,
   breadcrumbs on the phone, cross-links, footer, cookie notice.
   Content pages use .site-header. The map page keeps its own header until
   block 09 and takes only the footer and the cookie notice from here.
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-toast); padding: var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-ink-inverse); font-weight: var(--weight-semibold); text-decoration: none; }
.skip-link:focus { top: var(--space-3); }
main:focus { outline: none; } /* the skip link's target, not a control */
.shell main { scroll-margin-top: var(--header-h); } /* the sticky header must not cover it after the skip link */
.explore .explore__titles h2 { max-width: none; margin: 0; font: var(--weight-semibold) var(--h2) / 1.1 var(--font-display); }

/* Page frame: short pages keep the footer at the bottom */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.shell > main { flex: 1 0 auto; width: 100%; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink); text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__name { font: var(--weight-bold) 1.5rem / 1 var(--font-display); letter-spacing: var(--tracking-wordmark); }
.brand__tag { padding-left: var(--space-3); border-left: var(--border-1) solid var(--color-line); font-size: var(--text-xs); line-height: 1.35; color: var(--color-ink-2); }

/* Language switch: the current language is a span, the other one a link */
.lang { display: inline-flex; flex: none; border: var(--border-1) solid var(--color-control); border-radius: var(--radius-2); overflow: hidden; font: var(--weight-semibold) var(--text-xs) / 1 var(--font-ui); }
.lang > * { display: grid; place-items: center; min-width: 40px; min-height: 36px; color: var(--color-ink); text-decoration: none; }
.lang a:hover { background: var(--color-surface-sunk); }
.lang [aria-current="true"] { background: var(--color-ink); color: var(--color-ink-inverse); }

/* Content-page header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  background: var(--color-surface);
  border-bottom: var(--border-2) solid var(--color-line-strong);
}
.site-header .brand { min-width: 0; }
.nav { display: flex; align-items: center; gap: var(--space-1); }
.site-header .nav { margin-left: auto; flex-wrap: nowrap; }
.site-header .nav .lang { margin-left: var(--space-3); }
.nav__link {
  display: flex; align-items: center; min-height: var(--header-h); padding: 0 14px;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  font: var(--weight-medium) var(--text-m) / 1 var(--font-ui);
}
.nav__link:hover { box-shadow: inset 0 -3px 0 var(--color-line); }
.nav__link[aria-current="page"], .nav__link[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-benchmark); }
.site-header .menu-btn { display: none; margin-left: auto; }
@media (max-width: 74.99em) { .site-header .brand__tag { display: none; } }
@media (max-width: 63.99em) {
  .site-header .nav { display: none; }
  .site-header .menu-btn { display: inline-flex; }
}
@media (max-width: 37.49em) {
  .site-header .brand__mark { width: 28px; height: 28px; }
  .site-header .brand__name { font-size: 1.25rem; }
}

/* About Derry: a disclosure, not an ARIA menu */
.nav__item { position: relative; }
.nav__disclosure { border: 0; background: transparent; cursor: pointer; gap: 6px; }
.nav__disclosure svg { width: 14px; height: 14px; transition: transform var(--duration-1) var(--ease-out); }
.nav__disclosure[aria-expanded="true"] { background: var(--color-surface-sunk); }
.nav__disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__disclosure.is-section { box-shadow: inset 0 -3px 0 var(--color-benchmark); } /* the current page is one of its links */
.dropdown {
  position: absolute; top: 100%; right: 0; z-index: var(--z-header);
  min-width: 22rem; padding: var(--space-2) 0;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-control);
  box-shadow: var(--shadow-float);
}
.dropdown[hidden] { display: none; }
.dropdown a { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--space-4); color: var(--color-ink); text-decoration: none; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--color-surface-sunk); }
.dropdown a:focus-visible { outline-offset: -2px; }
.dropdown a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-benchmark); }
.dropdown__title { font: var(--weight-semibold) var(--text-m) / 1.3 var(--font-ui); }
.dropdown__desc { font-size: var(--text-xs); line-height: 1.35; color: var(--color-ink-2); }
.dropdown__sep { display: block; height: 1px; margin: var(--space-2) 0; background: var(--color-line); }

/* Menu button (content header under 1024px) */
.menu-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 0 var(--space-3); border: var(--border-1) solid var(--color-control); border-radius: var(--radius-2); background: var(--color-surface); color: var(--color-ink); font: var(--weight-semibold) var(--text-s) / 1 var(--font-ui); cursor: pointer; }
.menu-btn:hover { border-color: var(--color-ink); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn--icon { width: var(--target); padding: 0; justify-content: center; }

/* Map page, desktop: the head of the index panel is the site header */
.index-head { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border-bottom: var(--border-2) solid var(--color-line-strong); background: var(--color-surface); }
.index-head__row { display: flex; align-items: center; gap: var(--space-2); }
.index-head__row .brand { margin-right: auto; }
.index-head__tag { margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--color-ink-2); }

/* Phone map: floating brand chip that opens the menu */
.brand-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 0 var(--space-2) 0 var(--space-3); background: var(--color-surface); border: var(--border-1) solid var(--color-control); border-radius: var(--radius-3); box-shadow: var(--shadow-float); color: var(--color-ink); cursor: pointer; }
.brand-chip .brand__mark { width: 24px; height: 24px; }
.brand-chip .brand__name { font-size: 1.0625rem; }
.brand-chip__div { width: 1px; align-self: stretch; margin: 10px 2px; background: var(--color-line); }
.brand-chip__menu, .brand-chip__menu svg { display: block; width: 22px; height: 22px; }

/* Menu panel: one panel for every page and size; div[role=dialog][aria-modal] */
.scrim { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--scrim); }
.panel {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-dialog);
  width: min(var(--panel-w), 100%);
  display: flex; flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  overflow-y: auto; overscroll-behavior: contain;
  animation: panel-in var(--duration-2) var(--ease-out);
}
.scrim[hidden], .panel[hidden] { display: none; }
@keyframes panel-in { from { transform: translateX(-100%); } }
@media (max-width: 37.49em) { .panel { width: 100%; } }
.panel__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding: 0 var(--space-2) 0 var(--space-5); border-bottom: var(--border-2) solid var(--color-line-strong); flex: none; }
.panel__head .brand__mark { width: 28px; height: 28px; }
.panel__head .brand__name { font-size: 1.25rem; }
.panel__head .btn--icon svg { width: 22px; height: 22px; }
.panel__nav { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.panel__nav a { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-5); color: var(--color-ink); text-decoration: none; font: var(--weight-medium) var(--text-l) / 1.25 var(--font-ui); }
.panel__nav a:hover { background: var(--color-surface-sunk); }
.panel__nav a:focus-visible { outline-offset: -2px; }
.panel__nav a[aria-current="page"], .panel__nav a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--color-benchmark); font-weight: var(--weight-semibold); }
.panel__group { margin: var(--space-2) 0; padding: var(--space-3) 0 var(--space-2); border-top: var(--border-1) solid var(--color-line); border-bottom: var(--border-1) solid var(--color-line); }
.panel__group .eyebrow { display: block; padding: 0 var(--space-5) var(--space-1); }
.panel__group a { min-height: 48px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-top: 6px; padding-bottom: 6px; font-size: var(--text-m); }
.panel__group small { font: var(--text-xs) / 1.3 var(--font-ui); color: var(--color-ink-2); }
.panel__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface-sunk); font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-2); }
.panel__foot p { margin: 0; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
html.is-menu-open .cookie { display: none; } /* the notice must not sit over the modal panel */

/* "Cookie settings": a button that reads as a link */
.cookie-settings { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.panel__foot .cookie-settings { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }

/* Breadcrumbs on the phone: the H1 repeats the last item */
@media (max-width: 37.49em) { .crumbs li:last-child:not(:first-child) { display: none; } }

/* Cross-links block at the end of content pages */
.explore { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-8); border-top: var(--border-2) solid var(--color-line-strong); }
.explore__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.explore__titles { display: flex; flex-direction: column; gap: 6px; }
.explore__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.explore__card { height: 100%; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-top: var(--border-3) solid var(--color-ink); color: var(--color-ink); text-decoration: none; }
.explore__card:hover { border-color: var(--color-ink); }
.explore__title { font: var(--weight-semibold) var(--h5) / 1.2 var(--font-display); }
.explore__desc { font-size: var(--text-s); line-height: 1.45; color: var(--color-ink-2); }
.explore__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); font: var(--weight-semibold) var(--text-s) / 1 var(--font-ui); }
.explore__go svg { width: 18px; height: 18px; }
.explore__card--download { border-top-style: dashed; }

/* Footer (inverse) */
.site-footer { background: var(--color-surface-inverse); color: var(--color-ink-inverse-2); font-size: var(--text-s); line-height: 1.6; }
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
@media (max-width: 63.99em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__about { grid-column: 1 / -1; } }
@media (max-width: 37.49em) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.site-footer .brand { color: var(--color-ink-inverse); }
.site-footer h2 { margin: 0 0 var(--space-3); font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-inverse-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer a, .site-footer .cookie-settings { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-ink-inverse); text-decoration: none; text-align: left; }
.site-footer a:hover, .site-footer .cookie-settings:hover { text-decoration: underline; text-decoration-color: var(--color-benchmark); text-underline-offset: 0.2em; }
.site-footer :focus-visible { outline-color: var(--color-ink-inverse); }
.site-footer__about p { margin: var(--space-3) 0 0; max-width: 46ch; }
.site-footer__about b { color: var(--color-ink-inverse); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-1) solid rgb(255 255 255 / 0.16); font-size: var(--text-xs); }
.lang--inverse { border-color: rgb(255 255 255 / 0.4); }
.lang--inverse > * { color: var(--color-ink-inverse); }
.site-footer .lang > * { display: grid; place-items: center; min-width: 40px; min-height: 36px; } /* beat .site-footer a */
.lang--inverse a:hover { background: rgb(255 255 255 / 0.12); }
.lang--inverse [aria-current="true"] { background: var(--color-ink-inverse); color: var(--color-ink); }

/* Cookie notice: non-blocking, equal-weight choices */
.cookie {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: var(--z-toast);
  width: min(28rem, calc(100% - 2 * var(--gutter)));
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-2) solid var(--color-line-strong);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-float);
}
.cookie[hidden] { display: none; }
.cookie__title { margin: 0; font: var(--weight-semibold) var(--h4) / 1.2 var(--font-display); }
.cookie__text { margin: 0; font-size: var(--text-s); line-height: 1.5; }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cookie__actions .btn { width: 100%; }
.cookie__actions .btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-ink-inverse); } /* the stored choice, when reopened */
@media (max-width: 37.49em) { .cookie { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); width: auto; padding: var(--space-4); } }
@media print { .cookie, .skip-link, .panel, .scrim { display: none !important; } }

/* ==========================================================================
   EDITORIAL (block 03): article template, table of contents, answer box,
   map card, comparison table, screen note, book entries, reading order,
   sources, "Keep reading" and the /articles/ listing.
   Printable map and method pages (pass 6) share the hero, the map card and Keep reading.
   ========================================================================== */
.page.page--editorial { max-width: var(--container); padding: var(--space-6) var(--gutter) var(--space-11); }
.page--editorial .explore { margin-top: var(--space-9); }

/* Hero: text on the left, the answer and the map card on the right */
.article__hero, .listing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-9); align-items: start; }
.listing-hero { align-items: end; }
.article__intro, .listing-hero__intro { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.article__intro .t-lead, .listing-hero__intro .t-lead { max-width: 680px; }
.article__aside { display: flex; flex-direction: column; gap: var(--space-4); padding-top: 34px; }
.answer-box { display: flex; flex-direction: column; gap: var(--space-2); padding: 18px 22px; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-left: 4px solid var(--color-ink); border-radius: var(--radius-1); }
.answer-box p { margin: 0; font: var(--weight-medium) var(--text-l) / 1.55 var(--font-ui); }

/* Map card: the same door into the map on every editorial page */
.map-card { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-2); color: var(--color-ink); text-decoration: none; }
.map-card__img { display: block; width: 100%; height: 140px; object-fit: cover; border-bottom: var(--border-1) solid var(--color-line); }
.map-card__body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 14px; }
.map-card__text { display: flex; flex-direction: column; gap: 2px; }
.map-card__title { font: var(--weight-semibold) var(--text-l) / 1.2 var(--font-display); }
.map-card__arrow { margin-left: auto; font-size: 1.25rem; line-height: 1; }
.map-card:hover .map-card__title { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.2em; }

/* Body: sticky table of contents + reading column */
.article__body { display: flex; align-items: flex-start; gap: var(--space-10); margin-top: var(--space-8); padding-top: 28px; border-top: var(--border-3) solid var(--color-ink); }
.toc { position: sticky; top: calc(var(--header-h) + var(--space-6)); flex: none; width: 220px; display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.90625rem; }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.page--editorial .toc__link { display: block; padding: 6px 0 6px var(--space-3); border-left: var(--border-3) solid var(--color-line); color: var(--color-ink-2); text-decoration: none; line-height: 1.35; }
.page--editorial .toc__link:hover { color: var(--color-ink); border-left-color: var(--color-control); }
.page--editorial .toc__link[aria-current="true"] { border-left-color: var(--color-ink); color: var(--color-ink); font-weight: var(--weight-semibold); }
.toc-details { display: none; margin-top: var(--space-6); background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); }
.toc-details summary { display: flex; align-items: center; min-height: var(--target); padding: 0 14px; font: var(--weight-semibold) var(--text-m) / 1.2 var(--font-ui); cursor: pointer; }
.toc-details .toc__list { padding: 0 14px var(--space-3); }
.page--editorial .toc-details .toc__link { display: flex; align-items: center; min-height: var(--target); }

.article__text { flex: 1; min-width: 0; max-width: 800px; display: flex; flex-direction: column; gap: var(--space-5); }
.article__text h2 { margin: var(--space-3) 0 0; font: var(--weight-semibold) 1.875rem / 1.15 var(--font-display); text-wrap: balance; scroll-margin-top: 80px; }
.article__text > p { margin: 0; font: 1.125rem / 1.65 var(--font-read); }

/* Comparison table; under 700px the same rows become stacked cards */
.compare { overflow: hidden; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); }
.compare__table { width: 100%; border-collapse: collapse; font-size: var(--text-m); line-height: 1.5; }
.compare__table th, .compare__table td { padding: var(--space-3) 14px; border-bottom: var(--border-1) solid var(--color-line); text-align: left; vertical-align: top; }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table thead th { background: var(--color-surface-sunk); font: var(--weight-semibold) var(--text-2xs) / 1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.compare__table tbody th { width: 120px; font: var(--weight-semibold) var(--text-m) / 1.4 var(--font-display); }
.compare__table td:last-child { color: var(--color-ink-2); }
@media (max-width: 43.74em) {
  .compare { overflow: visible; background: none; border: 0; border-radius: 0; }
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; width: auto; }
  .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare__table tbody { display: flex; flex-direction: column; gap: 10px; }
  .compare__table tr { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 14px; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); }
  .compare__table th, .compare__table td { padding: 0; border: 0; }
  .compare__table tbody th { width: auto; font-size: var(--text-l); }
  .compare__table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2); }
}

/* Screen note: film and TV caveats */
.screen-note { display: flex; gap: 14px; padding: var(--space-4) 18px; border: var(--border-1) dashed var(--color-control); border-radius: var(--radius-2); }
.screen-note svg { width: 22px; height: 22px; flex: none; color: var(--color-ink-2); }
.screen-note p { margin: 0; font: 1rem / 1.6 var(--font-read); color: var(--color-ink-2); }
.screen-note b { color: var(--color-ink); font-family: var(--font-ui); }

/* Book entries (Books article) */
.book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) 0; border-top: var(--border-1) solid var(--color-line); }
.book__year { font: var(--weight-semibold) 1.875rem / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.book--central .book__year { color: var(--color-ink); }
.book__main { display: flex; flex-direction: column; gap: var(--space-2); }
.book__role { align-self: flex-start; display: inline-block; min-height: 26px; padding: 4px 10px; border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-ink-2); font: var(--weight-medium) var(--text-xs) / 1.2 var(--font-ui); }
.book--central .book__role { background: var(--color-ink); color: var(--color-ink-inverse); }
.book__title { margin: 0; font: italic var(--weight-semibold) 1.625rem / 1.2 var(--font-read); }
.book p { margin: 0; font: var(--text-l) / 1.6 var(--font-read); color: var(--color-ink-2); }

/* Reading order: numbered stations joined by a line; the first one is filled */
.reading-order { list-style: none; margin: var(--space-1) 0 0; padding: 0; counter-reset: station; }
.reading-order li { position: relative; padding: 6px 0 18px 54px; font: 1.09375rem / 1.55 var(--font-read); counter-increment: station; }
.reading-order li:last-child { padding-bottom: 0; }
.reading-order li::before { content: counter(station); position: absolute; left: 0; top: 0; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: var(--border-3) solid var(--color-ink); border-radius: 50%; background: var(--color-paper); font: var(--weight-semibold) var(--text-m) / 1 var(--font-display); }
.reading-order li:first-child::before { background: var(--color-ink); color: var(--color-ink-inverse); }
.reading-order li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--color-line-strong); }
.reading-order b { font-weight: var(--weight-semibold); }
.article__text .pencil-note p { font-size: 1.03125rem; }

/* Sources: numbered external links with a visible arrow */
.sources { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); padding-top: 22px; border-top: var(--border-1) solid var(--color-line); }
.article__text .sources h2 { margin: 0; font-size: 1.375rem; }
.sources ol { margin: 0; padding-left: 22px; font-size: 0.96875rem; line-height: 1.75; }
.sources a { text-underline-offset: 0.2em; text-decoration-color: var(--color-link-underline); }
.sources a:hover { text-decoration-color: var(--color-link-hover); }
.sources .ext { display: inline-block; margin-left: 0.3em; color: var(--color-ink-2); text-decoration: none; }

/* Keep reading: two other articles + the printable map as a product card */
.explore--reading { border-top: var(--border-3) solid var(--color-ink); padding-top: 28px; }
.explore.explore--reading .explore__titles h2 { font-size: 2rem; }
.explore--reading .explore__grid { grid-template-columns: 1fr 1fr 2fr; gap: var(--space-5); align-items: stretch; }
.explore--reading .explore__card { gap: 10px; padding: 22px 22px 20px; border: 0; border-top: var(--border-3) solid var(--color-ink); }
.explore--reading .explore__title { font-size: 1.4375rem; }
.explore--reading .explore__desc { font: 1rem / 1.55 var(--font-read); color: var(--color-ink-2); }
.explore--reading .explore__go { font-size: var(--text-m); }
.explore__back--end { display: none; }
.print-card { height: 100%; display: flex; overflow: hidden; background: var(--color-surface); border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-2); }
.print-card__sheet { flex: none; width: 300px; padding: 14px 22px 22px 14px; background: #EFEBDD; }
.print-card__sheet img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: 40% 50%; box-shadow: 0 1px 2px rgb(31 48 41 / 0.25), 3px 3px 0 #FFFEF7, 4px 4px 0 #CFC6B2, 7px 7px 0 #FFFEF7, 8px 8px 0 #CFC6B2; }
.print-card__body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5) 22px; }
.print-card__title { font: var(--weight-semibold) 1.4375rem / 1.2 var(--font-display); }
.print-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.print-card__actions .btn svg { width: 16px; height: 16px; }

/* /articles/ listing */
.listing { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.listing > li { border-top: var(--border-1) solid var(--color-line); }
.listing > li:first-child { border-top: var(--border-3) solid var(--color-ink); }
.listing__item { display: flex; flex-direction: column; gap: 10px; max-width: 880px; padding: var(--space-7) 0; }
.listing__title { margin: 0; font: var(--weight-semibold) 2rem / 1.15 var(--font-display); text-wrap: balance; }
.page--editorial .listing__title a { color: var(--color-ink); text-decoration: none; }
.page--editorial .listing__title a:hover { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.15em; }
.listing__topics { display: flex; flex-wrap: wrap; gap: var(--space-1) 14px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 0.90625rem; color: var(--color-ink-2); }
.listing__topics li { display: flex; align-items: center; gap: 6px; }
.listing__topics li::before { content: ""; width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--color-control); }
.listing__go { align-self: flex-start; margin-top: var(--space-1); font: var(--weight-semibold) var(--text-m) / 1.4 var(--font-ui); }

/* Printable map: hero, sheet preview on a stack of sheets, PDF and SVG cards */
.printable, .method-page { display: flex; flex-direction: column; gap: var(--space-4); }
.printable__intro { display: flex; flex-direction: column; gap: 14px; }
.printable__intro .t-lead { max-width: 760px; }
.printable__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
.sheet-preview { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sheet-preview__stack { display: block; padding: 22px 30px 30px 22px; background: #EFEBDD; border-radius: var(--radius-2); }
.sheet-preview__stack img { display: block; width: 100%; height: auto; max-height: 560px; aspect-ratio: 1200 / 848; object-fit: contain; background: #F6F2E6; box-shadow: 0 1px 3px rgb(31 48 41 / 0.3), 4px 4px 0 #FFFEF7, 5px 5px 0 #CFC6B2, 9px 9px 0 #FFFEF7, 10px 10px 0 #CFC6B2; }
.printable__files { display: flex; flex-direction: column; gap: var(--space-5); }
.download-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-2); }
.download-card--primary { gap: 14px; border: var(--border-3) solid var(--color-ink); }
.download-card h2 { margin: 0; font: var(--weight-semibold) 1.625rem / 1.2 var(--font-display); }
.download-card > p { margin: 0; font: 1rem / 1.55 var(--font-read); color: var(--color-ink-2); }
.download-card__button { align-self: flex-start; gap: var(--space-2); }
.download-card__button svg { width: 18px; height: 18px; }
.download-card > .download-card__tip { display: flex; gap: var(--space-2); font: var(--text-s) / 1.45 var(--font-ui); }
.download-card__tip svg { width: 18px; height: 18px; flex: none; }
.sheet-list { list-style: none; margin: 6px 0 0; padding: 0; }
.printable .sheet-list__link { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: var(--space-2) 0; border-top: var(--border-1) solid var(--color-line); color: var(--color-ink); text-decoration: none; }
.sheet-list__num { width: 26px; flex: none; font: var(--weight-semibold) var(--text-m) / 1 var(--font-display); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.sheet-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-list__text b { font-size: 0.96875rem; font-weight: var(--weight-semibold); }
.sheet-list__go { display: inline-flex; align-items: center; gap: 6px; flex: none; font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); }
.sheet-list__go svg { width: 16px; height: 16px; }
.sheet-list__link:hover b { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.2em; }
.download-language { margin: 0; font-size: var(--text-m); }
.printable__text { max-width: 800px; display: flex; flex-direction: column; gap: 18px; margin-top: var(--space-6); }
.printable__text h2, .method-page__section h2 { margin: var(--space-3) 0 0; font: var(--weight-semibold) 1.75rem / 1.15 var(--font-display); text-wrap: balance; scroll-margin-top: 80px; }
.method-page__section h2 { font-size: 1.875rem; }
.printable__text > p, .method-page__text { margin: 0; font: 1.125rem / 1.65 var(--font-read); }

/* Method: intro, A/B/C/U matrix with map examples, sources with role chips, "Using the map" */
.method-page__lead { margin: 0; font: 1.1875rem / 1.65 var(--font-read); }
.method-page__section { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.method-page__section--first { margin-top: var(--space-8); padding-top: 28px; border-top: var(--border-3) solid var(--color-ink); }
.matrix { width: 100%; border-collapse: collapse; background: var(--color-surface); border: var(--border-1) solid var(--color-line); font-size: 0.96875rem; line-height: 1.5; }
.matrix thead th { padding: var(--space-3) var(--space-4); background: var(--color-surface-sunk); text-align: left; font: var(--weight-semibold) var(--text-2xs) / 1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.matrix tbody th, .matrix td { padding: var(--space-4); border-top: var(--border-1) solid var(--color-line); text-align: left; vertical-align: top; }
.matrix__mark { width: 220px; }
.matrix__mark b { font: var(--weight-semibold) var(--text-l) / 1.3 var(--font-display); vertical-align: middle; }
.matrix__glyph { display: inline-block; margin-right: var(--space-3); vertical-align: middle; }
.matrix__glyph svg { display: block; width: 26px; height: 26px; }
.matrix__adds { color: var(--color-pencil); }
.matrix__example { width: 240px; }
.matrix__link { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-s); text-decoration: none; }
.matrix__name { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 0.2em; }
.matrix__link:hover .matrix__name { text-decoration-color: var(--color-link-hover); }
.matrix__crop { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 220 / 110; object-fit: cover; border: var(--border-1) solid var(--color-line); border-radius: var(--radius-1); background: var(--map-land); }
.matrix__crop--none { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1.5px dashed var(--color-control); background: repeating-linear-gradient(135deg, var(--color-surface) 0 10px, var(--color-surface-sunk) 10px 20px); color: var(--color-ink-2); font-size: var(--text-xs); }
.matrix__crop--none .locator__glyph svg { width: 22px; height: 22px; }
.matrix__count { font: var(--weight-semibold) 1.125rem / 1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.matrix__unit { display: none; }
.method-page__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.method-card, .usage__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); }
.method-card h3 { margin: 0; font: var(--weight-semibold) 1.1875rem / 1.25 var(--font-display); }
.method-card p { margin: 0; font: 1rem / 1.6 var(--font-read); color: var(--color-ink-2); }
.source-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; border-top: var(--border-3) solid var(--color-ink); }
.source-list__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px; gap: var(--space-5); align-items: start; padding: var(--space-4) 0; border-bottom: var(--border-1) solid var(--color-line); }
.source-list__code { font: var(--weight-semibold) var(--text-m) / 1.4 var(--font-display); color: var(--color-ink-2); }
.source-list__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.source-list__title { font: var(--weight-semibold) var(--text-l) / 1.3 var(--font-display); text-underline-offset: 3px; text-decoration-color: var(--color-link-underline); }
.source-list__title:hover { text-decoration-color: var(--color-link-hover); }
.source-list__title .ext { margin-left: 0.3em; font-weight: var(--weight-regular); }
.source-list__role { font: 0.96875rem / 1.55 var(--font-read); color: var(--color-ink-2); }
.role-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: var(--border-1) solid var(--color-ink-2); border-radius: var(--radius-pill); color: var(--color-ink-2); font: var(--weight-medium) var(--text-xs) / 1.2 var(--font-ui); white-space: nowrap; }
.role-chip--inspiration { border-color: var(--color-ink); color: var(--color-ink); }
.role-chip--analogue { border-color: var(--color-pencil); color: var(--color-pencil); background: var(--color-pencil-tint); }
.role-chip--excluded { border-style: dashed; border-color: var(--color-danger); color: var(--color-danger); }
.usage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.usage__card { padding: var(--space-4); }
.usage__card h3 { margin: 0; font: var(--weight-semibold) var(--text-l) / 1.25 var(--font-display); }
.usage__card p { margin: 0; font-size: var(--text-m); line-height: 1.8; color: var(--color-ink-2); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border: var(--border-1) solid var(--color-line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--color-surface); color: var(--color-ink); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-ui); }
.explore--reading.explore--three .explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tablet and phone: one column, the table of contents folds into <details> */
@media (max-width: 63.99em) {
  .article__hero, .listing-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .article__aside { padding-top: 0; }
  .map-card__img { height: 150px; }
  .toc { display: none; }
  .toc-details { display: block; }
  .article__body { display: block; margin-top: var(--space-6); padding-top: 0; border-top: 0; }
  .explore--reading .explore__grid { grid-template-columns: 1fr 1fr; }
  .explore--reading .explore__print { grid-column: 1 / -1; }
  .printable__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The matrix turns into one card per level */
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix { background: none; border: 0; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix tbody { display: flex; flex-direction: column; gap: var(--space-3); }
  .matrix tbody .matrix__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding-bottom: 14px; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); overflow: hidden; }
  .matrix tbody th, .matrix td { border: 0; padding: 0 var(--space-4); }
  .matrix tbody .matrix__mark { grid-column: 1; grid-row: 1; padding: 14px 0 14px var(--space-4); }
  .matrix .matrix__count { grid-column: 2; grid-row: 1; align-self: center; font: var(--text-xs) / 1.3 var(--font-ui); color: var(--color-ink-2); }
  .matrix__unit { display: inline; }
  .matrix__gives, .matrix__adds, .matrix__example { grid-column: 1 / -1; }
  .matrix__gives, .matrix__adds { margin-bottom: var(--space-2); }
  .matrix__gives::before, .matrix__adds::before { content: attr(data-label); display: block; font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2); }
  .matrix__adds::before { color: var(--color-pencil); }
  .matrix__crop { width: 100%; aspect-ratio: 324 / 120; }
}
@media (max-width: 37.49em) {
  .page.page--editorial { padding: var(--space-3) var(--gutter) var(--space-8); }
  .article__intro .t-h1, .listing-hero__intro .t-h1 { font-size: 2rem; }
  .article__intro .t-lead, .listing-hero__intro .t-lead { font-size: 1.125rem; }
  .answer-box { padding: var(--space-4) 18px; }
  .answer-box p { font-size: 1.03125rem; }
  .article__text h2 { font-size: 1.5rem; }
  .article__text > p { font-size: var(--text-l); }
  .book { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .book__year { font-size: 1.5rem; }
  .book__title { font-size: 1.375rem; }
  .explore--reading { gap: 6px; padding-top: var(--space-6); }
  .explore.explore--reading .explore__titles h2 { font-size: 1.625rem; }
  .explore--reading .explore__head > .explore__back { display: none; }
  .explore__back--end { display: inline-block; align-self: flex-start; padding-top: var(--space-3); }
  .explore--reading .explore__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .explore--reading .explore__card { padding: var(--space-4) 0; background: none; border-top: var(--border-1) solid var(--color-line); }
  .explore--reading .explore__title { font-size: 1.25rem; }
  .explore--reading .explore__print { margin-top: var(--space-3); }
  .print-card { flex-direction: column; }
  .print-card__sheet { width: auto; height: 200px; }
  .print-card__title { font-size: 1.25rem; }
  .listing { margin-top: var(--space-6); }
  .listing__item { padding: var(--space-6) 0; }
  .listing__title { font-size: 1.5rem; }
  .printable__intro .t-h1 { font-size: 1.875rem; }
  .sheet-preview__stack img { max-height: 250px; }
  .download-card { padding: 18px; }
  .download-card h2 { font-size: 1.375rem; }
  .download-card__button { align-self: stretch; }
  .sheet-list__text .t-meta { display: none; }
  .printable__text h2 { font-size: 1.5rem; }
  .method-page__section h2 { font-size: 1.625rem; }
  .printable__text > p, .method-page__text { font-size: var(--text-l); }
  .method-page__lead { font-size: 1.09375rem; }
  .method-page__cards, .usage { grid-template-columns: minmax(0, 1fr); }
  .explore--reading.explore--three .explore__grid { grid-template-columns: minmax(0, 1fr); }
  .source-list__item { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .source-list__chip { grid-column: 2; }
}
@media print { .toc, .toc-details, .map-card, .explore { display: none !important; } }


/* ---- 02 Map: map key (confidence key + filter), from the foundation ----------------------
   One white pill along the bottom of the map. A, B, C are toggles (aria-pressed): off = faded
   and struck through, disabled = none of that kind in the current selection. */
.key { display: inline-flex; align-items: stretch; gap: 2px; padding: 4px; background: #FFFFFF; border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); }
.key__item { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 7px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); font: var(--weight-medium) var(--text-s) / 1.2 var(--font-ui); white-space: nowrap; cursor: pointer; }
.key__item::after { content: ""; position: absolute; inset: -2px 0; }
.key__item:hover { background: var(--color-surface-sunk); }
.key__glyph { display: inline-flex; width: 26px; height: 26px; flex: none; }
.key__glyph svg { width: 26px; height: 26px; }
.key__count { font: var(--weight-regular) var(--text-xs) / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.key__item[aria-pressed="false"] { color: var(--color-ink-2); }
.key__item[aria-pressed="false"] .key__glyph, .key__item[aria-pressed="false"] .key__label { opacity: 0.4; }
.key__item[aria-pressed="false"] .key__label { text-decoration: line-through; text-decoration-thickness: 1px; }
.key__item:disabled { cursor: default; opacity: 0.38; }
.key__item:disabled:hover { background: none; }
.key__sep { width: 1px; margin: 10px 0; background: var(--color-line); }
.key__go { display: inline-flex; width: 14px; height: 14px; flex: none; margin-left: -2px; color: var(--color-ink-2); }
.key__go svg { width: 14px; height: 14px; }
.key__item--link:hover .key__go { color: var(--color-ink); }
.key--grid { display: inline-grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-3); }
.key--grid .key__item { border-radius: var(--radius-2); padding-right: 8px; font-size: 13px; }
.key--grid .key__sep { display: none; }

/* ==========================================================================
   PLACE PAGE (block 05): a reading column and a sticky fact panel.
   .place-meta, .card-sec, .refs, .card-photo, .segmented and the toggletip are
   the map card's parts from the foundation (block 02); the map reuses them in pass 17
   (.refs is scoped to the panel until then: map.js still renders the old plain list).
   ========================================================================== */
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface); border: var(--border-1) solid var(--color-control); border-radius: var(--radius-3); }
.segmented [role="tab"] { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-2); background: transparent; color: var(--color-ink); font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); cursor: pointer; }
.segmented [role="tab"][aria-selected="true"] { background: var(--color-ink); color: var(--color-ink-inverse); }
.place-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.place-meta .num { width: 28px; height: 28px; font-size: var(--text-2xs); }
.place-meta__sep { color: var(--color-line-strong); }
.place-meta__conf { display: inline-flex; align-items: center; gap: 6px; }
.place-meta__conf .conf-glyph svg { width: 18px; height: 18px; }
.place-meta__conf .eyebrow { color: var(--color-ink); }
button.place-meta__conf { position: relative; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
button.place-meta__conf::after { content: ""; position: absolute; inset: -10px -6px; } /* 44 px target */
.place-meta__info { display: inline-flex; color: var(--color-ink-2); }
.place-meta__info svg { width: 15px; height: 15px; }
button.place-meta__conf:hover .place-meta__info, button.place-meta__conf[aria-expanded="true"] .place-meta__info { color: var(--color-ink); }
.place-meta__tipwrap { position: relative; display: inline-flex; }
.key__tip { position: absolute; z-index: 6; width: 280px; padding: 10px 12px; background: var(--color-ink); color: #FFFFFF; border-radius: var(--radius-2); box-shadow: var(--shadow-float); font: var(--weight-regular) var(--text-xs) / 1.45 var(--font-ui); }
.key__tip b { font-weight: var(--weight-semibold); }
.key__tip a { color: #FFFFFF; text-decoration: underline; white-space: nowrap; }
.key__tip a:focus-visible { outline-color: #FFFFFF; }
.place-meta__tip { top: calc(100% + 12px); left: -8px; }
.place-meta__tip::after { content: ""; position: absolute; left: 20px; top: -6px; width: 12px; height: 12px; background: var(--color-ink); transform: rotate(45deg); }
.place-meta__tip[hidden] { display: none; }
.place-when { font-size: var(--text-s); color: var(--color-ink-2); }
.conf-glyph { display: inline-flex; flex: none; }
.conf-glyph svg { display: block; width: 26px; height: 26px; }
.card-sec { border-top: var(--border-1) solid var(--color-line); }
.card-sec summary { display: flex; align-items: center; gap: 10px; min-height: var(--target); list-style: none; cursor: pointer; font: var(--weight-semibold) var(--text-2xs) / 1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); }
.card-sec summary::-webkit-details-marker { display: none; }
.card-sec summary small { margin-left: auto; font: var(--weight-regular) var(--text-xs) / 1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--color-ink-2); }
.card-sec summary::after { content: "−"; display: grid; place-items: center; width: 22px; height: 22px; border: var(--border-1) solid var(--color-control); border-radius: 50%; font: var(--weight-regular) 15px / 1 var(--font-ui); color: var(--color-ink); }
.card-sec:not([open]) summary::after { content: "+"; }
.fact-panel .refs { list-style: none; margin: 0 0 6px; padding: 0; }
.fact-panel .refs li { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-top: var(--border-1) solid var(--color-line); font-size: var(--text-s); line-height: 1.35; }
.refs__ch { font: var(--weight-semibold) var(--text-xs) / 1.35 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.refs__part { font-size: var(--text-2xs); color: var(--color-ink-2); white-space: nowrap; }
.card-photo { display: block; width: var(--photo-w, 140px); padding: 6px 6px 22px; background: #FFFEF7; box-shadow: 0 1px 3px rgb(31 48 41 / 0.32); position: relative; text-decoration: none; transition: transform 0.15s; }
.card-photo:hover, .card-photo:focus-visible { transform: scale(1.03); }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #E8E4D4; }
.card-photo__cap { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: italic var(--text-2xs) var(--font-read); color: #6B5D49; }
@media (prefers-reduced-motion: reduce) { .card-photo { transition: none; } }

.page.page--place { max-width: var(--container); padding: var(--space-6) var(--gutter) var(--space-11); }
.page--place .crumbs { margin: 0; }
.page--place .explore { margin-top: var(--space-11); }
.place-page { display: flex; flex-direction: column; gap: 72px; }
.place-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: var(--space-9); align-items: start; }
.place-page__intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-9); min-width: 0; }
.place-page__body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: var(--space-9); min-width: 0; }
.place-page__head { display: flex; flex-direction: column; gap: 14px; }
.place-page__title { margin: 0; font-size: 3.5rem; }
.place-when { font-size: var(--text-m); }

/* Cover: one year, or two with a 1958 | 1985 switch; the years crossfade */
.place-cover { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-2); background: var(--color-surface-sunk); }
.place-cover__panel { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; }
.place-cover__panel.is-on { opacity: 1; }
.place-cover__panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-cover__years { position: absolute; right: 14px; bottom: 14px; background: rgb(255 255 255 / 0.94); }
@media (prefers-reduced-motion: reduce) { .place-cover__panel { transition: none; } }

/* Fact panel: locator, number and kind, confidence, "In the novel", the map button */
.fact-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - 2 * var(--space-4)); display: flex; flex-direction: column; overflow: hidden auto; overscroll-behavior: contain; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); box-shadow: var(--shadow-float); }
.fact-panel__map { position: relative; border-bottom: var(--border-1) solid var(--color-line); }
.fact-panel__map .locator { aspect-ratio: 380 / 270; }
.fact-panel__map .locator img { height: 100%; object-fit: cover; }
.fact-panel__map--none .locator--away, .fact-panel__map--none .locator--none { border: 0; border-radius: 0; aspect-ratio: auto; min-height: 200px; }
.fact-panel__open { position: absolute; right: 10px; top: 10px; background: #FFFFFF; }
.fact-panel__map .locator-town { position: absolute; left: 10px; bottom: 10px; border: var(--border-2) solid #FFFFFF; border-radius: 3px; box-shadow: var(--shadow-float); }
.fact-panel__facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 0; padding: 6px 18px 0; font-size: 0.90625rem; line-height: 1.4; }
.fact-panel__facts dt, .fact-panel__facts dd { margin: 0; padding: 10px 0; border-bottom: var(--border-1) solid var(--color-line); }
.fact-panel__facts dt { color: var(--color-ink-2); }
.fact-panel__num { font-family: var(--font-display); font-weight: var(--weight-semibold); }
.fact-panel__conf { display: flex; gap: var(--space-3); padding: 14px 18px; border-bottom: var(--border-1) solid var(--color-line); }
.fact-panel__conf-text { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-s); line-height: 1.45; color: var(--color-ink-2); }
.fact-panel__conf-text b { font-size: var(--text-m); color: var(--color-ink); }
.page--place .fact-panel__why { align-self: flex-start; color: var(--color-ink); font-weight: var(--weight-medium); text-decoration: none; }
.page--place .fact-panel__why:hover { text-decoration: underline; text-decoration-color: var(--color-link-hover); }
.fact-panel__refs { margin: 4px 18px 6px; border-top: 0; }
.fact-panel__action { padding: 14px 18px 18px; border-top: var(--border-1) solid var(--color-line); }

/* Photographs: square polaroids with captions; "+N" tile when there are more */
.place-photos, .place-section { display: flex; flex-direction: column; gap: var(--space-4); }
.place-photos h2, .place-section h2, .related h2 { margin: 0; font-size: 1.625rem; scroll-margin-top: 80px; }
.place-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 250px)); gap: var(--space-5); }
.place-photos__item { display: flex; flex-direction: column; gap: 10px; }
.place-photos__item .card-photo { --photo-w: 100%; }
.place-photos__caption { font-size: var(--text-s); line-height: 1.45; color: var(--color-ink-2); }
.place-photos__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); aspect-ratio: 1; padding: var(--space-4); border: var(--border-1) dashed var(--color-control); border-radius: var(--radius-2); background: var(--color-surface); color: var(--color-ink); text-align: center; text-decoration: none; font-size: var(--text-s); }
.place-photos__more b { font: var(--weight-semibold) 1.75rem / 1 var(--font-display); }
.place-photos__more:hover span { text-decoration: underline; text-decoration-color: var(--color-link-hover); }
.is-phone-only { display: none; }
.place-photos__all, .place-section .link--arrow { align-self: flex-start; font-size: var(--text-m); }
.place-section .prose { font-size: 1.0625rem; }
.place-section__line { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: var(--text-m); line-height: 1.5; color: var(--color-ink-2); }
.place-section__line .conf-glyph svg { width: 22px; height: 22px; }
.place-section__line b { color: var(--color-ink); }

/* Related places: two rows of map cards; swipe rows on the phone */
.related { display: flex; flex-direction: column; gap: var(--space-4); }
.related__row { display: flex; flex-direction: column; gap: 10px; }
.related__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-4); }
.related__head h3 { margin: 0; }
.related__head .link--arrow { margin-left: auto; font-size: var(--text-s); }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.related-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); color: var(--color-ink); text-decoration: none; }
.related-card .locator { aspect-ratio: 270 / 120; border-bottom: var(--border-1) solid var(--color-line); }
.related-card .locator img { height: 100%; object-fit: cover; }
.related-card .locator--none { min-height: 0; padding: var(--space-2); }
.related-card__body { display: flex; align-items: center; gap: 10px; padding: var(--space-3) 14px; }
.related-card__body .num { width: 28px; height: 28px; flex: none; font-size: var(--text-2xs); }
.related-card__text { display: flex; flex-direction: column; min-width: 0; }
.related-card__text b { font-size: var(--text-m); font-weight: var(--weight-semibold); }
.related-card:hover .related-card__text b { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.2em; }

@media (max-width: 63.99em) {
  .place-page { gap: var(--space-9); }
  .place-page__layout { display: flex; flex-direction: column; gap: var(--space-8); }
  .place-page__intro, .place-page__body { gap: var(--space-8); }
  .place-page__intro { width: 100%; }
  .fact-panel { position: static; max-height: none; overflow: hidden; width: 100%; box-sizing: border-box; box-shadow: none; }
  .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.49em) {
  .page.page--place { padding: var(--space-3) var(--gutter) var(--space-8); }
  .page--place .crumbs li:last-child { display: none; }
  .place-page__title { font-size: 2.125rem; }
  .place-page__lead { font-size: 1.125rem; }
  .place-cover { aspect-ratio: 3 / 2; }
  .place-meta__tipwrap { position: static; }
  .place-meta { position: relative; }
  .place-meta__tip { left: 0; max-width: calc(100vw - 2 * var(--gutter)); box-sizing: border-box; }
  .fact-panel__map .locator { aspect-ratio: 358 / 230; }
  .place-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .place-photos__item.is-desktop-only { display: none; }
  .place-photos__item.is-phone-only { display: flex; }
  .place-photos h2, .place-section h2, .related h2 { font-size: 1.375rem; }
  .related__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-3); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-2); scroll-padding: 0 var(--gutter); }
  .related__item { flex: none; width: 240px; scroll-snap-align: start; }
}
@media print { .fact-panel__open, .place-meta__tip { display: none !important; } .fact-panel { position: static; box-shadow: none; } }

/* ==========================================================================
   PLACE INDEX (block 06): hero, sticky filter sidebar, tiles (Cards) or rows
   (Compact), empty state, owner bar (?audit=1), "About this list".
   Without JS every tile is in the HTML and the filter controls stay hidden.
   ========================================================================== */
.page.page--index { max-width: var(--container); padding: var(--space-6) var(--gutter) var(--space-11); }
.page--index .crumbs { margin: 0; }
.page--index .eyebrow { font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); color: var(--color-ink-2); }
.page.page--index .explore { margin-top: var(--space-11); }
html:not(.js) .js-only { display: none !important; }
.index-sheet-only { display: none; }

.index-hero { display: flex; flex-direction: column; gap: var(--space-3); }
.index-hero h1 { margin: 0; }
.index-hero__lead { max-width: 760px; }
.page--index .index-hero__more { font: var(--weight-medium) var(--text-m) / 1 var(--font-ui); white-space: nowrap; color: var(--color-ink); }
.index-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-5); font-size: var(--text-m); }
.index-hero__facts b { font-weight: var(--weight-semibold); }

/* Owner bar: only with ?audit=1 */
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-pencil-tint); border: var(--border-1) dashed var(--color-pencil); border-radius: var(--radius-2); color: var(--color-pencil); font-size: var(--text-s); }
.owner-bar__title { font-weight: var(--weight-semibold); }
.owner-bar__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The index filters use the pill chip */
.page--index .chip { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-surface); font: var(--weight-medium) var(--text-s) / 1.1 var(--font-ui); color: var(--color-ink); }
.page--index .chip--set { padding-right: 10px; }
.page--index .chip:hover { background: var(--color-surface); border-color: var(--color-ink); }
.page--index .chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
.page--index .chip.chip--pencil { border-color: var(--color-pencil); color: var(--color-pencil); background: var(--color-surface); }
.page--index .chip.chip--pencil[aria-pressed="true"] { background: var(--color-pencil); border-color: var(--color-pencil); color: #FFFFFF; }
.page--index .owner-bar__exit { margin-left: auto; color: var(--color-pencil); font-weight: var(--weight-medium); }

/* Results area: sidebar + list under a 2px rule */
.index-layout { display: flex; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-3) solid var(--color-ink); }
.index-filters { position: sticky; top: calc(var(--header-h) + var(--space-4)); flex: none; width: 272px; display: flex; flex-direction: column; }
.index-filters__head, .index-filters__foot { display: none; }
.index-phonebar__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--color-ink-inverse); color: var(--color-ink); font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-ui); }
.index-phonebar__n[hidden] { display: none; }
.index-filters__body { display: flex; flex-direction: column; gap: 14px; }
.index-filters__group { margin: 0; padding: 14px 0 6px; border: 0; border-top: var(--border-1) solid var(--color-line); }
.index-filters__search + .index-filters__group, .index-filters__group[data-group="sure"] { border-top: 0; padding-top: 4px; }
.index-filters__group legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; } /* below the rule, not on it */
.index-filters__group legend + * { clear: both; }
.filter-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; cursor: pointer; font-size: 0.9375rem; }
.filter-opt__input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.filter-opt .menu__box svg { visibility: hidden; }
.filter-opt__input:checked + .menu__box { background: var(--color-ink); border-color: var(--color-ink); }
.filter-opt__input:checked + .menu__box svg { visibility: visible; }
.filter-opt__input:focus-visible + .menu__box { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.filter-opt:has(.filter-opt__input:checked) .filter-opt__label { font-weight: var(--weight-semibold); }
.filter-opt:has(.filter-opt__input:disabled) { color: var(--color-ink-3); cursor: default; }
.filter-opt__lead { display: inline-flex; }
.filter-opt__lead .conf-glyph svg { width: 22px; height: 22px; }
.filter-opt__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--cat); }
.filter-opt__label { flex: 1; }
.menu__box { width: 18px; height: 18px; flex: none; box-sizing: border-box; border: 1.5px solid var(--color-control); border-radius: 4px; display: grid; place-items: center; background: var(--color-surface); }
.menu__box svg { width: 12px; height: 12px; color: #FFFFFF; }
.index-filters__clear-all { align-self: flex-start; }

.index-results { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.index-phonebar { display: none; }
.index-results__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-3); min-height: var(--target); }
.index-results__status { font: var(--weight-semibold) var(--text-m) / 1.3 var(--font-ui); }
.index-results__chips { display: contents; }
.chip--set { padding-right: 10px; }
.chip--set svg { width: 14px; height: 14px; }
.index-results__clear { min-height: var(--target); padding: 0 6px; border: 0; background: none; color: var(--color-ink); font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 0.2em; cursor: pointer; }
.index-results__tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.index-sort { position: relative; }
.sort-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); padding: 0 10px; border: 0; border-radius: var(--radius-2); background: none; color: var(--color-ink); font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); white-space: nowrap; cursor: pointer; }
.sort-btn:hover, .sort-btn[aria-expanded="true"] { background: var(--color-surface-sunk); }
.sort-btn svg { width: 16px; height: 16px; flex: none; }
.menu { position: absolute; z-index: 5; min-width: 220px; padding: var(--space-2) 0; background: var(--color-surface); border: var(--border-1) solid var(--color-line-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-float); }
.index-sort__menu { right: 0; top: calc(100% + 4px); }
.menu[hidden] { display: none; }
.menu__opt { display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 var(--space-4); color: var(--color-ink); font: var(--weight-regular) var(--text-s) / 1.25 var(--font-ui); cursor: pointer; white-space: nowrap; }
.menu__opt:hover, .menu__opt:focus { background: var(--color-surface-sunk); outline: none; }
.menu__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); }
.menu__opt svg { width: 16px; height: 16px; flex: none; visibility: hidden; }
.menu__opt[aria-selected="true"] { font-weight: var(--weight-semibold); }
.menu__opt[aria-selected="true"] svg { visibility: visible; }
.segmented [aria-pressed] { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-2); background: transparent; color: var(--color-ink); font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); cursor: pointer; }
.segmented [aria-pressed="true"] { background: var(--color-ink); color: var(--color-ink-inverse); }
.segmented--fill { display: flex; width: 100%; box-sizing: border-box; }
.segmented--fill > * { flex: 1 1 0; }

/* Tiles (Cards): image, marker number, name, meta, two-line note; one link */
.index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tile[hidden] { display: none; }
.tile__link { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: var(--border-1) solid var(--color-line); border-radius: var(--radius-2); color: var(--color-ink); text-decoration: none; }
.page--index .tile__link { color: var(--color-ink); }
.tile__media { height: 180px; overflow: hidden; border-bottom: var(--border-1) solid var(--color-line); background: var(--map-land); }
.tile__img, .tile__media .locator img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__media .locator { height: 100%; }
.tile__media .locator--none { height: 100%; box-sizing: border-box; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.tile__media .locator--away p { font-size: var(--text-s); }
.tile__body { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-4) var(--space-4); }
.tile__body .num { width: 30px; height: 30px; flex: none; font-size: var(--text-2xs); }
.tile__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tile__name { margin: 0; font: var(--weight-semibold) 1.125rem / 1.2 var(--font-display); }
.tile__link:hover .tile__name { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.15em; }
.tile__conf--b, .tile__conf--c { color: var(--color-pencil); }
.tile__note { font: 0.90625rem / 1.5 var(--font-read); color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__audit { font: italic var(--text-xs) / 1.4 var(--font-read); color: var(--color-pencil); }
.tile__polaroid { display: none; }

/* Rows (Compact): number, text, a small polaroid when there is a picture */
.index-list--compact { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--border-1) solid var(--color-line); }
.index-list--compact .tile__link { flex-direction: row; border: 0; border-bottom: var(--border-1) solid var(--color-line); border-radius: 0; background: none; }
.index-list--compact .tile__media { display: none; }
.index-list--compact .tile__body { flex: 1; align-items: center; padding: var(--space-3) var(--space-1); }
.index-list--compact .tile__body .num { width: 32px; height: 32px; }
.index-list--compact .tile__text { flex: 1; }
.index-list--compact .tile__polaroid { display: block; --photo-w: 76px; padding: 4px 4px 10px; transform: rotate(1.4deg); }

/* Empty state */
.index-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); border: var(--border-1) dashed var(--color-line-strong); border-radius: var(--radius-2); }
.index-empty[hidden] { display: none; }
.index-empty__title { margin: 0; font: var(--weight-semibold) var(--text-xl) / 1.2 var(--font-display); }
.index-empty__text { margin: 0; color: var(--color-ink-2); }
.index-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }

/* About this list */
.index-about { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-9); padding-top: var(--space-7); border-top: var(--border-3) solid var(--color-ink); }
.index-about h2 { margin: 0; font-size: 1.625rem; }
.index-about .prose { font-size: 1.0625rem; max-width: 760px; }

@media (max-width: 63.99em) {
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-filters { width: 232px; }
  .index-layout { gap: var(--space-6); }
  .index-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 47.99em) {
  .page.page--index { padding: var(--space-3) var(--gutter) var(--space-8); }
  .page--index .crumbs li:last-child { display: none; }
  .index-hero h1 { font-size: 2.125rem; }
  .index-hero__lead { font-size: 1.125rem; }
  .index-layout { display: block; padding-top: var(--space-4); }
  .index-filters { display: none; }
  .index-phonebar { display: flex; gap: var(--space-2); }
  .index-phonebar .search { flex: 1; }
  .index-phonebar__filters { gap: 6px; }
  .index-phonebar__filters svg { width: 18px; height: 18px; }
  .index-results__tools { display: none; }
  .index-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tile__media { height: 190px; }
  /* Filter sheet: a near full-screen modal dialog from the bottom (places.js) */
  html.has-sheet { overflow: hidden; }
  .index-filters.is-sheet-open { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: var(--space-6); width: auto; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-3) var(--radius-3) 0 0; box-shadow: 0 0 0 100vmax rgb(24 38 46 / 0.45), var(--shadow-sheet); }
  .is-sheet-open .index-filters__head { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--gutter) var(--space-3); border-bottom: var(--border-1) solid var(--color-line); }
  .index-filters__grabber { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--color-control); }
  .index-filters__title { margin: 0 auto 0 0; font: var(--weight-semibold) var(--text-xl) / 1.2 var(--font-display); }
  .index-filters__close { display: grid; place-items: center; width: var(--target); height: var(--target); padding: 0; border: 0; border-radius: var(--radius-2); background: none; color: var(--color-ink); cursor: pointer; }
  .index-filters__close svg { width: 22px; height: 22px; }
  .is-sheet-open .index-filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--gutter) var(--space-5); gap: var(--space-2); }
  .is-sheet-open .index-sheet-only { display: block; }
  .is-sheet-open .index-filters__search, .is-sheet-open .index-filters__clear-all { display: none; }
  .is-sheet-open .index-filters__group[data-group="sure"] { padding-top: 14px; border-top: var(--border-1) solid var(--color-line); }
  .is-sheet-open .filter-opt { min-height: var(--target); }
  .is-sheet-open .index-filters__foot { display: block; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--border-1) solid var(--color-line); background: var(--color-surface); }
}
@media print { .index-filters, .index-phonebar, .index-results__tools, .owner-bar { display: none !important; } }

/* ==========================================================================
   LOCATORS (block 04): static map crops from atlas/static/atlas/locators/.
   Pages place them (blocks 03, 05, 06); the size comes from width/height,
   so nothing shifts while the image loads.
   ========================================================================== */
.locator { display: block; overflow: hidden; background: var(--map-land); color: var(--color-ink-2); }
.locator img { display: block; width: 100%; height: auto; }
a.locator:focus-visible { outline-offset: 2px; }
/* No crop: the same hatching as the place-index tile, or "Off the map" with a direction */
.locator--none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 120px; padding: var(--space-5); background: repeating-linear-gradient(135deg, var(--color-surface) 0 10px, var(--color-surface-sunk) 10px 20px); font-size: var(--text-xs); text-align: center; }
.locator__glyph svg { display: block; width: 26px; height: 26px; }
/* A block in a frame's slot keeps the frame's shape */
.locator--none.locator--panel { aspect-ratio: 380 / 270; }
.locator--none.locator--card { aspect-ratio: 270 / 120; min-height: 0; }
.locator--none.locator--tile { aspect-ratio: 480 / 360; }
.locator--none.locator--example { aspect-ratio: 220 / 110; min-height: 0; }
.locator--away { align-items: flex-start; gap: 10px; border: var(--border-2) dashed var(--color-control); border-radius: var(--radius-2); background: var(--color-surface); text-align: left; }
.locator--away p { margin: 0; font: 1rem / 1.5 var(--font-read); color: var(--color-ink); }
.locator__dir { font-size: var(--text-xs); color: var(--color-ink-2); }
/* Whole-town inset: 112 × 80 in the bottom-left of the panel; the red frame is the panel crop */
.locator-town { position: relative; display: block; width: 112px; height: 80px; overflow: hidden; border: var(--border-1) solid var(--color-line-strong); background: var(--map-land); }
.locator-town img { display: block; width: 100%; height: 100%; }
.locator-town__frame { position: absolute; min-width: 6px; min-height: 5px; border: var(--border-2) solid var(--color-benchmark); }


/* ==========================================================================
   GALLERY (block 07): /photos/ and single-filter pages. Sticky filter sidebar
   (every option is a link to its single-filter page), status with chips,
   uncropped grid in columns, empty state.
   ========================================================================== */
.page.page--gallery { max-width: var(--container); padding: var(--space-6) var(--gutter) var(--space-11); }
.page--gallery .crumbs { margin: 0; }
.page--gallery .eyebrow { font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-caps); color: var(--color-ink-2); }
.page--gallery .explore { margin-top: var(--space-11); }

.gallery-head { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-head h1 { margin: 0; }
.gallery-head [hidden] { display: none !important; }
.gallery-head__intro { max-width: 760px; margin: 0; font: var(--text-l) / 1.55 var(--font-read); color: var(--color-ink-2); }
.gallery-head__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-m); }

.gallery-layout { display: flex; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-3) solid var(--color-ink); }
.gallery-filters { position: sticky; top: calc(var(--header-h) + var(--space-4)); flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; }
.gallery-filters__group { margin: 0; padding: 12px 0 6px; border: 0; border-top: var(--border-1) solid var(--color-line); }
.gallery-filters__head, .gallery-filters__foot { display: none; }
.gallery-filters__body { display: flex; flex-direction: column; gap: 10px; }
html:not(.js) .gallery-filters__group:first-child { border-top: 0; padding-top: 0; }
button.filter-opt { width: 100%; padding: 0; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: 0.9375rem; text-align: left; }
button.filter-opt:hover .filter-opt__label { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.15em; }
.filter-opt[aria-disabled="true"], .chip[aria-disabled="true"] { cursor: default; }
.filter-opt[aria-disabled="true"]:hover .filter-opt__label { text-decoration: none; }
.gallery-filters__group legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.gallery-filters__group legend + * { clear: both; }
a.filter-opt { color: var(--color-ink); text-decoration: none; }
a.filter-opt:hover .filter-opt__label { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.15em; }
.filter-opt[aria-current="true"] .menu__box, .filter-opt[aria-checked="true"] .menu__box { background: var(--color-ink); border-color: var(--color-ink); }
.filter-opt[aria-current="true"] .menu__box svg, .filter-opt[aria-checked="true"] .menu__box svg { visibility: visible; }
.filter-opt[aria-current="true"] .filter-opt__label, .filter-opt[aria-checked="true"] .filter-opt__label { font-weight: var(--weight-semibold); }
.filter-opt.is-empty:not([aria-current="true"]):not([aria-checked="true"]) { color: var(--color-ink-3); }
.filter-opt.is-empty:not([aria-current="true"]):not([aria-checked="true"]) .menu__box { border-color: var(--color-line); }
/* Character face: a 22px circle cut from one of the character's photos */
.face { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--color-surface-sunk) no-repeat; box-shadow: 0 0 0 1.5px #FFFEF7, 0 1px 2px rgb(31 48 41 / 0.3); }
.face--initial { display: grid; place-items: center; font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-display); color: var(--color-ink-2); }
.gallery-filters__more > summary { display: inline-flex; align-items: center; min-height: var(--target-compact); font-size: var(--text-s); cursor: pointer; list-style: none; }
.gallery-filters__more > summary::-webkit-details-marker { display: none; }
.gallery-filters__more[open] > summary { display: none; }
.gallery-filters__chips { gap: 6px; padding-bottom: 4px; }
.page--gallery .chip { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-surface); font: var(--weight-medium) var(--text-s) / 1.1 var(--font-ui); color: var(--color-ink); text-decoration: none; }
.page--gallery .chip--sm { min-height: 32px; padding: 0 12px; font-size: var(--text-xs); }
.page--gallery .chip--set { padding-right: 10px; }
.page--gallery .chip[aria-current="true"], .page--gallery .chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
.page--gallery .chip[aria-current="true"] .chip__count, .page--gallery .chip[aria-pressed="true"] .chip__count { color: var(--color-ink-inverse-2); }
.page--gallery .chip.is-empty:not([aria-current="true"]):not([aria-pressed="true"]) { color: var(--color-ink-3); border-color: var(--color-line); }

.gallery-results { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gallery-results__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--target); }
.gallery-results__status { font: var(--weight-semibold) var(--text-m) / 1.3 var(--font-ui); }
.gallery-results__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery-results__clear { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 4px; border: 0; background: none; color: var(--color-ink); font: var(--weight-medium) var(--text-m) / 1 var(--font-ui); text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 0.2em; cursor: pointer; }
.page--gallery .gallery-results__clear { color: var(--color-ink); }
.gallery-results__clear[hidden] { display: none; }

/* Grid: uncropped photos in CSS columns; gallery.js places them in reading order */
.gallery-grid { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--space-6); }
.gallery-item { break-inside: avoid; margin-bottom: var(--space-6); }
.gallery-item[hidden], .gallery-grid[hidden] { display: none; }
.gallery-grid.is-laid-out { columns: auto; position: relative; }
.gallery-grid.is-laid-out .gallery-item { position: absolute; margin: 0; }
.gallery-item__link { display: block; color: var(--color-ink); text-decoration: none; }
.page--gallery .gallery-item__link { color: var(--color-ink); }
.gallery-item__img { display: block; width: 100%; height: auto; border-radius: var(--radius-1); background: var(--color-surface-sunk); }
.gallery-item__caption { display: -webkit-box; margin-top: 10px; font: var(--text-m) / 1.45 var(--font-read); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-item__link:hover .gallery-item__caption { text-decoration: underline; text-decoration-color: var(--color-link-hover); text-underline-offset: 0.15em; }
.gallery-item .t-meta { display: block; margin-top: 2px; }

/* Show more: count, then the button (D25) */
.gallery-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: var(--space-2); }
.gallery-more[hidden] { display: none; }
.gallery-more__btn { min-width: 240px; }
.gallery-phonebar { display: none; }

/* Empty state */
.gallery-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--space-7); border: 1.5px dashed var(--color-control); border-radius: var(--radius-2); background: var(--color-surface); }
.gallery-empty[hidden] { display: none; }
.gallery-empty__title { margin: 0; font: var(--weight-semibold) 1.375rem / 1.25 var(--font-display); }
.gallery-empty__text { margin: 0; font: 1rem / 1.55 var(--font-read); color: var(--color-ink-2); }
.gallery-empty__actions { margin: var(--space-1) 0 0; }
.page--gallery .gallery-empty .btn { color: var(--color-ink); text-decoration: none; }

@media (max-width: 63.99em) {
  .gallery-filters { width: 232px; }
  .gallery-layout { gap: var(--space-6); }
  .gallery-grid { columns: 2; }
}
@media (max-width: 47.99em) {
  .page.page--gallery { padding: var(--space-3) var(--gutter) var(--space-8); }
  .page--gallery .crumbs li:last-child:not(:first-child) { display: none; }
  .gallery-head h1 { font-size: 2.125rem; }
  .gallery-layout { display: block; padding-top: var(--space-4); }
  .gallery-filters { position: static; width: auto; margin-bottom: var(--space-5); }  /* without JS: above the grid */
  html.js .gallery-filters { display: none; }
  .gallery-grid { column-gap: var(--space-3); }
  .gallery-item { margin-bottom: var(--space-3); }  /* = the 12px gap gallery.js uses */
  .gallery-results { gap: var(--space-3); }
  .gallery-results__head { min-height: 32px; }
  .gallery-phonebar { display: flex; gap: var(--space-2); }
  .gallery-phonebar .search { flex: 1; }
  .gallery-phonebar__filters { gap: 6px; flex: none; }
  .gallery-phonebar__filters svg { width: 18px; height: 18px; }
  /* Filter sheet: a near full-screen modal dialog from the bottom (gallery.js), as on /places/ */
  html.js .gallery-filters.is-sheet-open { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: var(--space-6); width: auto; margin: 0; flex-direction: column; gap: 0; background: var(--color-surface); border-radius: var(--radius-4) var(--radius-4) 0 0; box-shadow: 0 0 0 100vmax rgb(24 38 46 / 0.45), var(--shadow-sheet); }
  .is-sheet-open .gallery-filters__head { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-2) var(--space-2) var(--gutter); }
  .gallery-filters__grabber { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--color-control); }
  .gallery-filters__title { margin: 0 auto 0 0; font: var(--weight-semibold) var(--text-xl) / 1.2 var(--font-display); }
  .gallery-filters__clear { border-color: transparent; }
  .gallery-filters__close { display: grid; place-items: center; width: var(--target); height: var(--target); padding: 0; border: 0; border-radius: var(--radius-2); background: none; color: var(--color-ink); cursor: pointer; }
  .gallery-filters__close svg { width: 22px; height: 22px; }
  .is-sheet-open .gallery-filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--space-5); gap: 0; }
  .is-sheet-open .gallery-filters__search { display: none; }
  .is-sheet-open .gallery-filters__group { padding: 12px 0 10px; }
  /* Character and Year as chips (full names, D24); Place stays a list */
  .is-sheet-open [data-group="character"] .gallery-filters__options, .is-sheet-open [data-group="year"] .gallery-filters__options { display: flex; flex-wrap: wrap; gap: 6px; }
  .is-sheet-open [data-group="character"] .filter-opt, .is-sheet-open [data-group="year"] .filter-opt { width: auto; min-height: 36px; gap: 6px; padding: 0 12px; border: var(--border-1) solid var(--color-control); border-radius: var(--radius-pill); background: var(--color-surface); font: var(--weight-medium) var(--text-s) / 1.1 var(--font-ui); }
  .is-sheet-open [data-group="character"] .filter-opt { padding-left: 4px; }
  .is-sheet-open [data-group="character"] .menu__box, .is-sheet-open [data-group="year"] .menu__box { display: none; }
  .is-sheet-open [data-group="character"] .filter-opt__label, .is-sheet-open [data-group="year"] .filter-opt__label { flex: none; }
  .is-sheet-open [data-group="character"] .filter-opt[aria-checked="true"], .is-sheet-open [data-group="year"] .filter-opt[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
  .is-sheet-open [data-group] .filter-opt[aria-checked="true"] .chip__count { color: var(--color-ink-inverse-2); }
  .is-sheet-open .filter-opt { min-height: var(--target); }
  .is-sheet-open .gallery-filters__foot { display: block; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--border-1) solid var(--color-line); background: var(--color-surface); }
}
@media print {
  .gallery-filters, .gallery-phonebar, .gallery-more { display: none !important; }
  .gallery-grid.is-laid-out { position: static; height: auto !important; columns: 3; }
  .gallery-grid.is-laid-out .gallery-item { position: static; width: auto !important; margin-bottom: var(--space-6); }
}

/* ==========================================================================
   PHOTO VIEWER (block 08): /photos/<id>/ as a dark page. Top bar with crumbs,
   counter and Close; the photo uncropped with ← →; facts panel; a short
   bottom line instead of the footer (AI note, cookie settings, language, D27).
   ========================================================================== */
body.viewer-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--viewer-bg); color: var(--viewer-text); }
.viewer-page :focus-visible { outline: var(--focus-width) solid #FFFFFF; outline-offset: 2px; }
.viewer-page .cookie :focus-visible { outline-color: var(--color-focus); }  /* light notice on the dark page */
.viewer-page a { color: var(--viewer-text); }
.viewer-bar { flex: none; display: flex; align-items: center; gap: var(--space-5); height: 56px; padding: 0 var(--space-6); border-bottom: var(--border-1) solid var(--viewer-line); }
.viewer-page .viewer-bar__brand { gap: 10px; color: var(--viewer-text); }
.viewer-bar__brand .brand__mark { width: 26px; height: 26px; }
.viewer-bar__brand .brand__name { font-size: 1.25rem; }
.viewer-bar .crumbs { margin: 0; font-size: var(--text-s); color: var(--viewer-text-2); }
.viewer-page .viewer-bar .crumbs a { color: var(--viewer-text-2); text-decoration-color: var(--viewer-line); }
.viewer-bar .crumbs [aria-current] { color: var(--viewer-text); }
.viewer-bar .crumbs li + li::before { color: var(--viewer-text-3); }
.viewer-bar__crumbs { min-width: 0; }
.viewer-bar .crumbs ol { flex-wrap: nowrap; }
.viewer-bar .crumbs li:last-child { min-width: 0; }
.viewer-bar .crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.viewer-bar__back { display: none; }
.viewer-bar__count { margin-left: auto; color: var(--viewer-text-2); font: var(--weight-medium) var(--text-s) / 1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-page .viewer-bar__close, .viewer-page .viewer-bar__back { align-items: center; gap: 6px; min-height: var(--target); color: var(--viewer-text); font-size: var(--text-s); text-decoration: none; }
.viewer-bar__close { display: inline-flex; }
.viewer-bar svg { width: 18px; height: 18px; flex: none; }

main.viewer { flex: 1; display: flex; min-height: 0; }
.viewer__stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); }
.viewer__figure { flex: 1; min-width: 0; margin: 0; display: flex; justify-content: center; }
.viewer__original { display: block; max-width: 100%; }
/* The whole frame: portrait photos fit the height, landscape ones the stage width */
.viewer__img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100vh - 56px - 48px - 46px); max-height: calc(100dvh - 56px - 48px - 46px); background: #000; }
.viewer__nav { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: var(--border-1) solid #3A423C; border-radius: 50%; color: var(--viewer-text); }
.viewer__nav:hover { border-color: var(--viewer-text-2); }
.viewer__nav[hidden] { display: grid; visibility: hidden; }  /* keeps the photo centred */
.viewer__nav svg { width: 22px; height: 22px; }
.viewer__dots { display: none; }

.viewer__panel { flex: none; width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-left: var(--border-1) solid var(--viewer-line); }
.viewer__caption { margin: 0; font: var(--weight-regular) 1.375rem / 1.4 var(--font-read); color: var(--viewer-text); }
.viewer__facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 0; font-size: 0.90625rem; line-height: 1.45; }
.viewer__facts dt, .viewer__facts dd { padding: 9px 0; border-bottom: var(--border-1) solid var(--viewer-line); }
.viewer__facts dt { color: var(--viewer-text-3); }
.viewer__facts dd { margin: 0; overflow-wrap: anywhere; }
.viewer__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.viewer-page .viewer__tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: var(--border-1) solid #4A544D; border-radius: var(--radius-pill); font-size: var(--text-xs); text-decoration: none; }
.viewer-page .viewer__tag:hover { border-color: var(--viewer-text-2); }
.viewer-page .viewer__quiet { color: var(--viewer-text-2); }
.viewer__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.viewer-page .viewer__map { gap: 8px; background: var(--viewer-accent); border-color: var(--viewer-accent); color: var(--viewer-bg); }
.viewer-page .viewer__map:hover { background: #F0D184; }
.viewer__map svg { width: 18px; height: 18px; }
.viewer-page .viewer__place { background: transparent; border-color: #5A655D; color: var(--viewer-text); }
.viewer-page .viewer__place:hover { border-color: var(--viewer-text-2); }
.viewer__more { display: flex; flex-direction: column; gap: var(--space-2); }
.viewer__more-title { margin: 0; color: var(--viewer-text-3); font: var(--weight-semibold) var(--text-2xs) / 1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.viewer__more-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.viewer__more-list a { display: block; }
.viewer__more-list img { display: block; width: 92px; height: 92px; object-fit: cover; background: var(--viewer-line); }
.viewer__hint { margin: auto 0 0; color: var(--viewer-text-3); font-size: var(--text-2xs); }

.viewer-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-2) var(--space-6); border-top: var(--border-1) solid var(--viewer-line); color: var(--viewer-text-3); font-size: var(--text-2xs); }
.viewer-page .viewer-foot__cookie { min-height: 28px; padding: 0; border: 0; background: none; color: var(--viewer-text-2); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.viewer-foot .lang { margin-left: auto; }

@media (max-width: 63.99em) {
  .viewer-bar { height: 52px; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); }
  .viewer-bar__brand, .viewer-bar__crumbs { display: none; }
  .viewer-page .viewer-bar__back { display: inline-flex; gap: 4px; font-size: var(--text-m); }
  .viewer-bar__close { justify-content: center; width: var(--target); }
  .viewer-bar__close-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .viewer-bar__close svg { width: 22px; height: 22px; }
  main.viewer { display: block; }
  .viewer__stage { position: relative; display: block; padding: 0; background: #000; }
  /* No arrows on the phone (swipe), but the links stay for screen readers and keyboards */
  .viewer__nav:not([hidden]) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .viewer__nav:not([hidden]):focus-visible { top: 8px; width: 44px; height: 44px; margin: 0; clip: auto; overflow: visible; background: var(--viewer-bg); }
  .viewer__nav--prev:focus-visible { left: 8px; }
  .viewer__nav--next:focus-visible { right: 8px; }
  .viewer__nav[hidden] { display: none; }
  .viewer__img { width: 100%; max-height: 520px; object-fit: contain; }
  .viewer__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .viewer__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(237 233 222 / 0.4); }
  .viewer__dot.is-current { background: var(--viewer-text); }
  .viewer__panel { width: auto; gap: 14px; padding: var(--space-4) var(--gutter) var(--space-6); border-left: 0; }
  .viewer__caption { font-size: 1.125rem; }
  .viewer__facts { font-size: var(--text-s); }
  .viewer__hint { display: none; }
  .viewer-foot { padding: var(--space-3) var(--gutter); }
}
@media print { .viewer__nav, .viewer__hint, .viewer-foot__cookie { display: none !important; } }