/* ===========================================================================
   FairTrees — Empty Basin Tracker

   Styled to fairtrees.org: Montserrat, an off-white plane, and cards drawn as
   black-outlined panels with a hard offset shadow, filled from the site's
   pastel set (green, amber, cyan, coral, lilac).

   Two rules the brand does not get to break, because this page carries data
   the brand site does not:

   1. Case status stays a reserved colour. Coral is the brand's warm accent,
      but it fails contrast on white at body size, so "still open" keeps a
      true red. The pastels are chrome; they never encode a value.
   2. Internal divisions (table rows, field groups) stay hairline grey. The
      2px black outline is for the edge of a panel only — applied to every
      rule it turns a 250-row table into a grid of boxes.
   =========================================================================== */

:root {
  color-scheme: light;

  --plane:          #fafafa;
  --surface:        #ffffff;
  --surface-sunk:   #f1f0f4;
  --ink:            #000000;
  --ink-2:          #3c3b42;
  --ink-muted:      #6e6d76;
  --rule:           #e2e1e6;
  --rule-strong:    #c2c1c9;
  --ring:           rgba(0, 0, 0, 0.12);

  /* The panel edge. fairtrees.org draws every card as a black-outlined block
     with a hard offset shadow and no blur; that outline is the brand. */
  --outline:        #000000;
  --outline-w:      2px;

  /* Brand chrome, taken from the live site's button and panel fills. */
  --brand:          #5cb85c;
  --brand-hover:    #449d44;
  --brand-ink:      #000000;
  --brand-wash:     #e7f4e7;
  --amber:          #fedb8a;
  --amber-2:        #fecb5a;
  --cyan:           #bff6fd;
  --cyan-2:         #9ee6ed;
  --coral:          #ff8c69;
  --coral-2:        #ff7f50;
  --lilac:          #c3a0fe;

  /* Magnitude bars are a single series, so a single hue — the brand lilac,
     which no status colour uses. */
  --series-1:       #a578f7;
  --series-1-wash:  #efe6ff;

  /* Status is not brand. Coral reads as a warning but only clears 2.3:1 on
     white, so the open state keeps a red that passes at body size. */
  --status-open:    #cf3016;  /* critical — an unresolved hazard */
  --status-closed:  #6e6d76;
  --status-good:    #1f8f2f;  /* a tree was actually planted */

  /* Hard offset, no blur: the shadow is a drawn edge, not depth. */
  --shadow-sm: 2px 2px 0 var(--outline);
  --shadow-md: 4px 4px 0 var(--outline);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.3);

  /* The fine grid the site lays over its coloured panels. */
  --hatch: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32"%3E%3Cpath d="M32 0H0v32" stroke="rgba(0,0,0,0.07)" stroke-width="1" fill="none"/%3E%3C/svg%3E');
  --hatch-size: 32px 32px;

  --radius: 8px;      /* 0.5rem, as on the site */
  --radius-sm: 6px;
  --wrap: 1280px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dark mode is a selected set of steps, not an inversion. Declared under both
   the OS query and the explicit toggle so the toggle wins either direction. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:        #100f13;
    --surface:      #1b1a20;
    --surface-sunk: #161519;
    --ink:          #ffffff;
    --ink-2:        #c8c6d0;
    --ink-muted:    #918f9b;
    --rule:         #2e2d35;
    --rule-strong:  #3c3b45;
    --ring:         rgba(255, 255, 255, 0.12);
    --outline:      #4a4854;
    --outline-w:    1.5px;
    --brand:        #6cc96c;
    --brand-hover:  #57b657;
    --brand-ink:    #06170a;
    --brand-wash:   #16281a;
    --amber:        #4a3c1c;
    --amber-2:      #6a5526;
    --cyan:         #17383d;
    --cyan-2:       #1f4c53;
    --coral:        #4d2418;
    --coral-2:      #6b3020;
    --lilac:        #362a52;
    --series-1:     #a578f7;
    --series-1-wash:#2a2140;
    --status-open:  #ff7a5c;
    --status-closed:#918f9b;
    --status-good:  #5ac96a;
    --hatch:        none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #100f13;
  --surface:      #1b1a20;
  --surface-sunk: #161519;
  --ink:          #ffffff;
  --ink-2:        #c8c6d0;
  --ink-muted:    #918f9b;
  --rule:         #2e2d35;
  --rule-strong:  #3c3b45;
  --ring:         rgba(255, 255, 255, 0.12);
  --outline:      #4a4854;
  --outline-w:    1.5px;
  --brand:        #6cc96c;
  --brand-hover:  #57b657;
  --brand-ink:    #06170a;
  --brand-wash:   #16281a;
  --amber:        #4a3c1c;
  --amber-2:      #6a5526;
  --cyan:         #17383d;
  --cyan-2:       #1f4c53;
  --coral:        #4d2418;
  --coral-2:      #6b3020;
  --lilac:        #362a52;
  --series-1:     #a578f7;
  --series-1-wash:#2a2140;
  --status-open:  #ff7a5c;
  --status-closed:#918f9b;
  --status-good:  #5ac96a;
  --hatch:        none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.7);
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;   /* one variable file covers the whole axis */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--plane);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.22; letter-spacing: -0.005em; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4.2vw, 2.85rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
/* Brand green is a fill colour, not a text colour: it clears only 2:1 on
   white. Links stay near-black and lean on the underline. */
a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--surface-sunk); padding: 0.1em 0.35em; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--brand-ink); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------- buttons ------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  font: inherit; font-weight: 550; line-height: 1;
  padding: 0.62em 1.05em; border-radius: var(--radius);
  border: var(--outline-w) solid var(--outline); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap; transition: background-color 0.15s, box-shadow 0.12s, transform 0.12s;
}
/* Pressing pushes the panel into its own shadow. */
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--outline); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-ghost:hover { background: var(--amber); }
.btn-lg { padding: 0.8em 1.4em; font-size: 1.02rem; }
.btn-sm { padding: 0.5em 0.85em; font-size: 0.86rem; }

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

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: var(--outline-w) solid var(--outline);
}
.masthead-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand-mark { font-size: 1.35rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 1.02rem; letter-spacing: -0.02em; }
.brand-sub { font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.masthead-nav { display: flex; align-items: center; gap: 6px; }
.masthead-nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding: 0.5em 0.7em; border-radius: var(--radius-sm);
}
.masthead-nav a:not(.btn):hover { background: var(--surface-sunk); color: var(--ink); }
.theme-toggle {
  background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.95rem;
  display: grid; place-items: center; flex: none;
}
.theme-toggle:hover { background: var(--surface-sunk); color: var(--ink); }
.theme-toggle svg { display: block; }
@media (max-width: 860px) {
  .masthead-nav a:not(.btn) { display: none; }
}
@media (max-width: 460px) {
  /* The wordmark alone is enough; the subtitle wrapped to a second line. */
  .brand-sub { display: none; }
  .btn { padding: 0.55em 0.8em; font-size: 0.9rem; }
}

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

/* The site's signature block: a lilac panel under the cross-hatch. */
.hero {
  background-color: var(--lilac);
  background-image: var(--hatch);
  background-size: var(--hatch-size);
  border-bottom: var(--outline-w) solid var(--outline);
}
.hero .lede, .hero .lede-muted { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.hero .lede strong { color: var(--ink); }
.hero-inner { padding-block: clamp(40px, 7vw, 76px) clamp(32px, 5vw, 52px); max-width: 820px; }
.lede { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink-2); max-width: 68ch; }
.lede-muted { color: var(--ink-muted); font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }

/* ------------------------------- stats -------------------------------- */

.stats-section { padding-block: clamp(28px, 4vw, 40px) 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 14px; }
/* Outlined panels, each capped with one of the brand's accent fills. The
   accent is a band rather than the tile's background so the status colours
   inside keep a white field to sit on. */
.stat {
  background: var(--surface); border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px; position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 8px;
  background: var(--amber); border-bottom: 1px solid var(--outline);
}
.stat:nth-child(2)::before { background: var(--coral); }
.stat:nth-child(3)::before { background: var(--cyan); }
.stat:nth-child(4)::before { background: var(--lilac); }
.stat-label { margin-top: 4px; }
.stat-label { font-size: 0.78rem; font-weight: 550; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
/* Hero figures stay in the system sans, tabular so they don't jitter on filter. */
.stat-value {
  font-size: clamp(1.75rem, 3.4vw, 2.3rem); font-weight: 680; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.05;
}
.stat-note { font-size: 0.82rem; color: var(--ink-2); margin-top: 4px; }
.stat-value.is-open { color: var(--status-open); }
/* Canopy cover is reference data from a separate City source, not a count drawn
   from these reports, so the tile is tinted to say so. */
.stat-canopy { background: var(--brand-wash); }
.stat-canopy::before { background: var(--brand); }
.stats-scope { font-size: 0.85rem; color: var(--ink-muted); margin: 12px 0 0; }

/* ------------------------------- filters ------------------------------ */

.filters-section {
  position: sticky; top: 60px; z-index: 30;
  background: color-mix(in srgb, var(--plane) 94%, transparent);
  backdrop-filter: blur(8px);
  border-block: var(--outline-w) solid var(--outline);
  padding-block: 14px;
  margin-top: 24px;
}
/* A grid rather than a wrapping flex row: fields stay the same width and line
   up in columns instead of leaving a ragged gap at the end of each row. */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-grow { grid-column: span 2; }
@media (max-width: 620px) { .field-grow { grid-column: span 1; } }
.field label { font-size: 0.73rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select {
  font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface);
  border: var(--outline-w) solid var(--outline); border-radius: var(--radius-sm);
  padding: 0.5em 0.65em; min-height: 38px; max-width: 100%;
}
.field select { cursor: pointer; }
.field input::placeholder { color: var(--ink-muted); }

.filters-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px;
}
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.check { color: var(--ink); }

.view-switch { display: inline-flex; background: var(--surface-sunk); border: var(--outline-w) solid var(--outline); border-radius: var(--radius-sm); padding: 2px; margin-left: auto; }
.view-switch button {
  font: inherit; font-size: 0.86rem; font-weight: 550; color: var(--ink-2);
  background: transparent; border: 0; cursor: pointer; padding: 0.42em 0.85em; border-radius: 4px;
}
.view-switch button[aria-selected="true"] { background: var(--amber); color: var(--ink); font-weight: 700; }

/* ------------------------------- results ------------------------------ */

.results-section { padding-block: 30px 10px; scroll-margin-top: 285px; }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.results-head h2 { margin: 0; }
.results-count { margin: 0; font-size: 0.9rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface); border: var(--outline-w) solid var(--outline); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s;
  /* Keeps long galleries cheap to scroll: offscreen cards skip layout/paint. */
  content-visibility: auto;
  contain-intrinsic-size: auto 330px;
}
.card:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }

/* A fixed ratio frame means the grid never reflows as photographs arrive. */
.card-figure {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  background: var(--surface-sunk); overflow: hidden; cursor: zoom-in; border: 0; padding: 0; width: 100%;
  display: block;
}
.card-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.35s ease;
}
.card-figure img.is-loaded { opacity: 1; }
.card-figure.is-pending::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--rule) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.card-figure.is-failed { cursor: default; }
.card-figure.is-failed::after {
  content: "Photograph unavailable"; position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center; padding: 12px;
  font-size: 0.8rem; color: var(--ink-muted);
}

.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-addr { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.card-addr a { color: inherit; text-decoration: none; }
.card-addr a:hover { text-decoration: underline; }
.card-place { font-size: 0.8rem; color: var(--ink-muted); }
.card-dates { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }

/* Status never relies on colour alone: every chip carries a glyph and a label. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-weight: 600; padding: 0.26em 0.6em; border-radius: 100px;
  border: 1.5px solid var(--ring); background: var(--surface-sunk); color: var(--ink-2);
}
.chip-open { color: var(--status-open); border-color: color-mix(in srgb, var(--status-open) 35%, transparent); background: color-mix(in srgb, var(--status-open) 8%, transparent); }
.chip-good { color: var(--status-good); border-color: color-mix(in srgb, var(--status-good) 35%, transparent); background: color-mix(in srgb, var(--status-good) 8%, transparent); }
.card-ticket { font-size: 0.76rem; color: var(--ink-muted); text-decoration: none; margin-left: auto; }
.card-ticket:hover { color: var(--brand); }

.sentinel { height: 1px; }
.gallery-more { display: flex; flex-direction: column; align-items: center; padding: 26px 0 4px; }
.loading-more { text-align: center; color: var(--ink-muted); font-size: 0.9rem; padding: 22px 0; }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.empty-title { font-size: 1.1rem; font-weight: 600; color: var(--ink); }

/* --------------------------------- map -------------------------------- */

.map { height: min(68vh, 620px); border: var(--outline-w) solid var(--outline); border-radius: var(--radius); background: var(--surface-sunk); box-shadow: var(--shadow-sm); }
.map-note { font-size: 0.82rem; color: var(--ink-muted); margin-top: 10px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }
.dot-open { background: var(--status-open); }
.dot-closed { background: var(--status-closed); }
.leaflet-popup-content { font-family: var(--font); font-size: 0.85rem; }
.leaflet-popup-content b { display: block; margin-bottom: 2px; }

/* -------------------------------- table ------------------------------- */

.table-scroll { overflow-x: auto; border: var(--outline-w) solid var(--outline); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); font-weight: 700; background: var(--amber); border-bottom: var(--outline-w) solid var(--outline); position: sticky; top: 0; }
.data-table tbody tr:hover { background: var(--surface-sunk); }
.data-table td:first-child { white-space: normal; min-width: 200px; }
.data-table .num { font-variant-numeric: tabular-nums; }

/* ------------------------------ breakdown ----------------------------- */

.breakdown-section { padding-block: clamp(34px, 5vw, 56px); scroll-margin-top: 285px; }
.section-lede { color: var(--ink-2); max-width: 66ch; }
.breakdown { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.bar-row {
  display: grid; grid-template-columns: minmax(140px, 290px) 1fr auto;
  align-items: center; gap: 14px; padding: 5px 0;
}
.bar-label { font-size: 0.88rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--surface-sunk); border: 1px solid var(--outline); border-radius: 4px; height: 20px; overflow: hidden; }
/* Thin mark, rounded data-end, anchored to the baseline at left. */
.bar-fill { height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 2px; transition: width 0.3s ease; }
.bar-value { font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.bar-value span { color: var(--ink-muted); }
@media (max-width: 560px) {
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-track { grid-column: 1 / -1; }
}

/* -------------------------------- method ------------------------------- */

.method-section { padding-block: clamp(30px, 4vw, 48px); border-top: var(--outline-w) solid var(--outline); scroll-margin-top: 285px; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 34px; margin-top: 8px; }
.method-grid p { font-size: 0.92rem; color: var(--ink-2); }
.updated { font-size: 0.82rem; color: var(--ink-muted); margin-top: 18px; }

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

.footer { border-top: var(--outline-w) solid var(--outline); background: var(--surface); margin-top: 20px; }
.footer-inner { padding-block: 28px 34px; display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: baseline; justify-content: space-between; }
.footer p { font-size: 0.86rem; color: var(--ink-muted); margin: 0; max-width: 62ch; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------- lightbox ------------------------------ */

.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 8, 8, 0.9); backdrop-filter: blur(3px); }
.lightbox-figure {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: clamp(16px, 4vw, 48px);
}
.lightbox-figure img {
  max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #111;
}
.lightbox-figure figcaption {
  color: #f2f1ed; font-size: 0.9rem; text-align: center; max-width: 64ch; line-height: 1.5;
}
.lightbox-figure figcaption b { display: block; font-size: 1rem; margin-bottom: 3px; }
.lightbox-figure figcaption a { color: #9ec5f4; }
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 2; background: rgba(20, 20, 20, 0.72); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; line-height: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(40, 40, 40, 0.92); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 1.7rem; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
@media (max-width: 600px) {
  .lightbox-nav { top: auto; bottom: 18px; transform: none; }
  .lightbox-prev { left: 24px; }
  .lightbox-next { right: 24px; }
}

/* ---------------------------- narrow screens ----------------------------
   These override base rules of equal specificity, so they must come last. */

@media (max-width: 860px) {
  /* Stacked, the filter bar grows to roughly 400px — half a phone screen.
     Pinning that costs more than it saves, and it would bury anchor targets
     underneath it, so below this width it scrolls away with the page. */
  .filters-section { position: static; }

  /* Only the masthead stays pinned, so anchors need to clear just that. */
  .results-section,
  .breakdown-section,
  .method-section { scroll-margin-top: 72px; }
}

/* Print: the gallery is the point, so keep it and drop the chrome. */
@media print {
  .masthead, .filters-section, .footer, .hero-actions, .view-switch, .theme-toggle { display: none; }
  .card { break-inside: avoid; box-shadow: none; }
}