/* bwgriffiths.com — "The Ledger"
   Purple accent on lilac-tinted paper. Baskervville (display) ·
   Cardo (body, a Bembo-flavoured serif) · IBM Plex Mono (labels/dates). */

:root {
  --paper:      #f4f0fa;
  --paper-deep: #e9e2f4;
  --ink:        #1c1230;
  --ink-soft:   #463857;
  --accent:     #6d24d6;
  --teal:       #0ea5a5;
  --teal-deep:  #0a8181;
  --lilac:      #c79cef;
  --lilac-soft: #e7d8f6;
  --line:       rgba(28, 18, 48, 0.16);

  --serif:   "Cardo", Georgia, "Times New Roman", serif;
  --display: "Baskervville", "Cardo", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }   /* clears the sticky jump-nav on #anchor jumps */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background-color: var(--paper);
  /* Titcomb Basin (Wind River Range) — shaded relief + 100 m contours, baked ~7% over paper.
     WebP (≈3 KB) and NOT fixed: iOS Safari ignores fixed, and fixed+cover causes scroll jank. */
  background-image: url('terrain.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--lilac-soft); }

a { color: inherit; }

/* keyboard focus rings (shown only for keyboard users — none existed before) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.masthead :focus-visible, .lb :focus-visible { outline-color: #fff; }   /* light ring on the dark backgrounds */
.gallery .ph:focus-visible { outline-width: 3px; outline-offset: -3px; }   /* inset so it reads inside the tile */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); }

.disp  { font-family: var(--display); font-weight: 400; }
.ital  { font-style: italic; }
.mono  { font-family: var(--mono); }
.kicker {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── Top bar (site name + nav) ─────────────────────────────────────── */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.topbar__brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-decoration: none; }
nav.nav { display: flex; gap: clamp(16px, 3vw, 28px); }
nav.nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; padding-bottom: 4px;
  border-bottom: 2px dashed transparent;
}

/* dark variant — on the purple masthead */
.masthead .topbar__brand { color: rgba(255,255,255,0.82); }
.masthead nav.nav a { color: rgba(255,255,255,0.82); }
.masthead nav.nav a:hover { color: #fff; }
.masthead nav.nav a[aria-current="page"] { color: #fff; border-bottom-color: rgba(255,255,255,0.9); }

/* light variant — on paper */
.topbar--light .topbar__brand { color: var(--ink); }
.topbar--light nav.nav a { color: var(--ink-soft); }
.topbar--light nav.nav a:hover { color: var(--accent); }
.topbar--light nav.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--teal); }

/* ── Masthead (home) ───────────────────────────────────────────────── */
.masthead { background: var(--accent); color: #fff; padding: clamp(28px, 4vw, 44px) 0 clamp(32px, 5vw, 42px); }   /* top padding matches .pagehead so the nav sits at the same height on every page */
.masthead .topbar { margin-bottom: clamp(20px, 4vw, 30px); }
.masthead h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(54px, 9vw, 96px); line-height: 0.94; letter-spacing: -0.01em;
}
.masthead .tagline {
  margin: 16px 0 0; font-family: var(--display); font-style: italic;
  font-size: clamp(19px, 2.6vw, 25px); line-height: 1.3; color: rgba(255,255,255,0.92);
  max-width: 720px;
}

/* hero route line — a dashed trail with waypoints ending at a summit */
.route { display: flex; align-items: center; margin-top: clamp(24px, 4vw, 32px); }
.route .seg { flex: 1; border-top: 2px dashed rgba(255,255,255,0.55); }
.route .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #fff; }
.route .way { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.75); background: transparent; flex: 0 0 auto; }
.route .peak { width: 0; height: 0; flex: 0 0 auto; margin-left: 2px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #fff; }

/* paper variant — the same route reused as the interior-page header divider
   (replaces the old double rule; continuity with the home masthead) */
.pagehead .route { margin-top: 0; }
.pagehead .route .seg  { border-top-color: var(--accent); opacity: 0.5; }
.pagehead .route .dot  { background: var(--accent); }
.pagehead .route .way  { border-color: var(--accent); }
.pagehead .route .peak { border-bottom-color: var(--accent); }

/* contour-line divider between sections / places */
/* wavy contour divider — painted in the theme accent via a mask (was a hardcoded
   purple stroke baked into the SVG; the mask lets it follow --accent per theme) */
.contour-rule { height: 24px; margin: clamp(26px, 4vw, 38px) 0; border: 0;
  background-color: var(--accent); opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='24' viewBox='0 0 124 24'%3E%3Cpath d='M0 12 C 18 5 44 5 62 12 C 80 19 106 19 124 12' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x center / 124px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='24' viewBox='0 0 124 24'%3E%3Cpath d='M0 12 C 18 5 44 5 62 12 C 80 19 106 19 124 12' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x center / 124px 24px; }

/* ── Interior page header (archive / snapshots) ────────────────────── */
.pagehead { padding-top: clamp(28px, 4vw, 44px); }   /* longhand: keep .wrap's side padding (so mobile keeps gutters) */
.pagehead .topbar { margin-bottom: clamp(28px, 4vw, 40px); }
.pagehead__title { padding-bottom: 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pagehead__kicker { color: var(--teal); margin-bottom: 12px; }
.pagehead h1 { margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 8vw, 78px); line-height: 0.95; }
.pagehead__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* ── Home: two co-equal columns ────────────────────────────────────── */
.home-body { padding-top: clamp(40px, 6vw, 56px); }
.twocol { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(28px, 4vw, 44px); }
.twocol .rule { background: var(--line); }
.colhead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.colhead .num { font-family: var(--display); font-size: 52px; line-height: 1; color: var(--teal); }
.colhead .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); }
.lede { margin: 0; font-size: 20px; line-height: 1.62; }
.sub  { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.ph { position: relative; display: flex; align-items: flex-end; overflow: hidden;
  background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(-45deg, transparent 0 9px,
    var(--lilac-soft) 9px 10px); }
.ph > span { margin: 10px; padding: 4px 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: lowercase; color: var(--ink);
  background: rgba(255,255,255,0.82); border-radius: 2px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 36px);
  margin: clamp(34px, 5vw, 46px) 0 0; padding-top: clamp(28px, 4vw, 34px); border-top: 1px solid var(--line); }
.fact .fact__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lilac); margin-bottom: 8px; }
.fact .fact__body { font-size: 17px; line-height: 1.5; }
.fact b { font-weight: 400; color: var(--accent); }

/* ── In-page jump nav (sticky) — archive sections / snapshot regions ─ */
.secnav { position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(16px, 3vw, 26px);
  margin: 0 0 clamp(22px, 3.5vw, 32px); padding: 11px 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);   /* ~92% --paper so rows scroll under cleanly; tracks the theme */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.secnav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 1.5px dashed transparent; padding-bottom: 1px; }
.secnav a:hover { color: var(--accent); border-bottom-color: var(--teal); }

/* ── Archive: ledger rows ──────────────────────────────────────────── */
.archive-body { padding-top: clamp(34px, 5vw, 40px); }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin: 0 0 22px;
  border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.sec-head .roman { font-family: var(--display); font-size: 26px; color: var(--teal); }
.sec-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); flex: 1; }
.sec-head .count { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.sec-gap { height: 40px; }

.row { display: grid; grid-template-columns: 58px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > .row:last-child { border-bottom: 0; }   /* no straight rule above the wavy section divider */
ol.rows > .row { counter-increment: rownum -1; }          /* seeded per-section in markup → counts down */
ol.rows > .row::before { content: counter(rownum);
  font-family: var(--display); font-size: 40px; line-height: 1; color: var(--teal); text-align: right; }
.row .docket { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 5px; }
.row .title { font-family: var(--display); font-size: clamp(20px, 2.6vw, 24px); line-height: 1.2; }
.row .pubtitle { display: flex; gap: 14px; align-items: baseline; }
.row .pubtitle .year { font-family: var(--mono); font-size: 13px; color: var(--accent); flex: 0 0 auto; }
.row .cite { font-style: italic; font-size: 15.5px; color: var(--ink-soft); margin-top: 5px; }
.row .items { margin-top: 8px; }
.row .item { display: flex; gap: 12px; margin-top: 7px; }
.row .item:first-child { margin-top: 0; }
.row .item .meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  white-space: nowrap; flex: 0 0 auto; min-width: 168px; }
.row .item .note { font-style: italic; font-size: 16px; color: var(--ink-soft); }
.row .behalf { font-family: var(--mono); font-size: 11px; color: var(--teal-deep); margin-top: 9px; }

/* ── Snapshots ─────────────────────────────────────────────────────── */
.snap-body { padding-top: clamp(30px, 4vw, 34px); }
.place { padding: clamp(22px, 3vw, 26px) 0;
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 3vw, 32px); align-items: start; }
.place__label .name { font-family: var(--display); font-size: clamp(26px, 3vw, 30px); line-height: 1.05; }
.place__label .region { font-style: italic; font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
/* spot height + coordinates — optional; add class "show-geo" to <body> to reveal */
.place__geo { display: none; }
body.show-geo .place__geo { display: block; }
.place__label .feat { font-family: var(--mono); font-size: 12px; color: var(--teal-deep);
  margin-top: 10px; line-height: 1.5; }
.place__label .feat .tri { color: var(--teal); margin-right: 2px; }
.place__label .feat .peak { color: var(--ink-soft); }
.place__label .feat .peak::before { content: "·\00a0"; }
.place__label .coord { font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.02em; margin-top: 4px; }
.place__label .when { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); opacity: 0.7; margin-top: 8px; }

/* irregular mosaic — 6-col grid, big tile + smaller tiles, flipped on alt rows */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px;
  gap: 14px; grid-auto-flow: dense; }
.gallery .ph { width: 100%; height: 100%; }
/* gentle tonal variety so a wall of placeholders doesn't read flat */
.gallery .ph:nth-child(3n+2) { background-color: var(--lilac-soft);
  background-image: repeating-linear-gradient(-45deg, transparent 0 9px, var(--lilac) 9px 10px); }
.gallery .ph:nth-child(3n+3) { background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(-45deg, transparent 0 9px, var(--lilac-soft) 9px 10px); }

/* triple (3 photos): big 4×2 + two 2×1 stacked */
.gallery.triple .ph:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery.triple .ph:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.gallery.triple .ph:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.gallery.triple.flip .ph:nth-child(1) { grid-column: 3 / span 4; grid-row: span 2; }
.gallery.triple.flip .ph:nth-child(2) { grid-column: 1 / span 2; }
.gallery.triple.flip .ph:nth-child(3) { grid-column: 1 / span 2; }

/* pair (2 photos): big 4×2 + tall 2×2 */
.gallery.pair .ph:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery.pair .ph:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.gallery.pair.flip .ph:nth-child(1) { grid-column: 3 / span 4; grid-row: span 2; }
.gallery.pair.flip .ph:nth-child(2) { grid-column: 1 / span 2; grid-row: span 2; }

/* ── Footer — two ruled rows: contact/nav, then copyright/scale bar ── */
.colophon { margin-top: clamp(34px, 5vw, 44px); padding-bottom: clamp(40px, 6vw, 52px); }   /* side padding inherited from .wrap → footer lines up with the columns, keeps mobile gutters */
.colophon__main { display: flex; justify-content: space-between; align-items: center;
  gap: clamp(28px, 6vw, 72px); border-top: 1px solid var(--line); padding-top: clamp(26px, 4vw, 34px); }

/* left — "get in touch" label + aligned email / linkedin rows */
.footcontact__head { margin: 0 0 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.footcontact__rows { display: grid; grid-template-columns: auto auto; justify-content: start;
  align-items: baseline; column-gap: clamp(18px, 3vw, 34px); row-gap: 11px; }
.footcontact__rows .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); }
.footlink { font-size: 17px; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px dashed var(--teal); padding-bottom: 1px; }
.footlink:hover { color: var(--accent); border-bottom-color: var(--teal-deep); border-bottom-style: solid; }

/* right — nav, right-aligned */
.footnav { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: 0 0 auto; }
.footnav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; }
.footnav a:hover { color: var(--accent); }

/* baseline — second rule, then copyright (left) · scale bar (right) */
.colophon__base { display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-top: clamp(26px, 4vw, 34px); padding-top: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--line); }
.footcopy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }

/* cartographic scale bar — distance only (the 1:25 000 ratio is gone) */
.scalebar { display: inline-flex; flex-direction: column; gap: 4px; margin-left: auto; }
.scalebar .bar { display: flex; height: 7px; border: 1px solid var(--ink-soft); width: 96px; }
.scalebar .bar i { flex: 1; border-right: 1px solid var(--ink-soft); }
.scalebar .bar i:last-child { border-right: 0; }
.scalebar .bar i:nth-child(odd) { background: var(--ink-soft); }
.scalebar .ticks { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-soft); width: 96px; white-space: nowrap; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .twocol { grid-template-columns: 1fr; gap: 36px; }
  .twocol .rule { display: none; }
  .facts { grid-template-columns: 1fr; gap: 22px; }
  .place { grid-template-columns: 1fr; gap: 16px; }
  .place__label { text-align: left; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .gallery.triple .ph:nth-child(1),
  .gallery.triple.flip .ph:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; }
  .gallery.triple .ph:nth-child(n+2),
  .gallery.triple.flip .ph:nth-child(n+2) { grid-column: span 1; grid-row: span 1; }
  .gallery.pair .ph,
  .gallery.pair.flip .ph { grid-column: span 1; grid-row: span 1; }
  .colophon__main { flex-direction: column; gap: 26px; align-items: flex-start; }
  .footnav { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
  .row { grid-template-columns: 44px 1fr; gap: 12px; }
  ol.rows > .row::before { font-size: 32px; }
  .row .entry-meta { gap: 14px 22px; }       /* extra room between clustered links on touch */
  .row .item { flex-direction: column; gap: 2px; }
  .row .item .meta { min-width: 0; }
}

/* ── Real photos inside .ph tiles (added for the photo CMS) ─────────── */
.ph > picture, .ph > img { position: absolute; inset: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph > span { position: relative; z-index: 1; }      /* caption stays above the image */
.gallery .ph { cursor: zoom-in; }                     /* lightbox affordance */
/* gallery tiles are real <button>s for keyboard/AT operability — strip the button chrome */
.gallery button.ph { -webkit-appearance: none; appearance: none; padding: 0; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; }
/* allow up to two lines on the tile; the lightbox still shows the full caption */
.gallery .ph > span { max-width: calc(100% - 20px);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* single (1 photo): one wide tile */
.gallery.single .ph:nth-child(1) { grid-column: span 6; grid-row: span 2; }

/* mosaic (4+ photos): lead big tile, then uniform wide tiles, dense flow */
.gallery.mosaic .ph:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery.mosaic .ph:nth-child(n+2) { grid-column: span 2; grid-row: span 1; }
.gallery.mosaic.flip .ph:nth-child(1) { grid-column: 3 / span 4; grid-row: span 2; }

/* empty place placeholder (kept for the "coming soon" option) */
.gallery.empty .ph:nth-child(1) { grid-column: span 6; grid-row: span 1; }
.gallery.empty .ph { background: var(--paper-deep); cursor: default; }
.gallery.empty .ph > span { background: none; color: var(--ink-soft); font-style: italic; }

@media (max-width: 760px) {
  .gallery.single .ph:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; }
  .gallery.mosaic .ph:nth-child(1),
  .gallery.mosaic.flip .ph:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; }
  .gallery.mosaic .ph:nth-child(n+2) { grid-column: span 1; grid-row: span 1; }
}

/* ── Archive: generic entries + section intro + document links ─────── */
.sec-intro { font-style: italic; font-size: 15.5px; color: var(--ink-soft); margin: -10px 0 18px; }
.row--plain { grid-template-columns: 1fr; }       /* unnumbered sections (experience, education) */
.row .entry-meta { margin-top: 10px; display: flex; gap: 12px 20px; align-items: baseline; flex-wrap: wrap; }
.row .entry-meta .when { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.doclink { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--accent);
  text-decoration: none; border-bottom: 1.5px dashed var(--teal); padding-bottom: 1px; }
.doclink:hover { border-bottom-style: solid; border-bottom-color: var(--teal-deep); }

/* light HTML the owner can drop into editable blurbs (links, <p>, <em>…) */
.lede a, .sub a, .cite a, .sec-intro a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--lilac); }
.lede a:hover, .sub a:hover, .cite a:hover, .sec-intro a:hover { border-bottom-color: var(--accent); }
.lede p, .sub p, .cite p { margin: 0 0 0.7em; }
.lede p:last-child, .sub p:last-child, .cite p:last-child { margin-bottom: 0; }
.masthead .tagline a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.55); }

/* archive abstract — collapsible "more" disclosure (keeps the ledger rhythm tight) */
.row .abstract { margin-top: 8px; }
.row .abstract > summary { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal-deep); cursor: pointer; list-style: none; display: inline-block; }
.row .abstract > summary::-webkit-details-marker { display: none; }
.row .abstract > summary::after { content: " ▸"; }
.row .abstract[open] > summary::after { content: " ▾"; }
.row .abstract .abstract-body { margin-top: 8px; font-style: italic; font-size: 16px;
  color: var(--ink-soft); line-height: 1.55; max-width: 64ch; }
.row .abstract .abstract-body p { margin: 0 0 0.6em; }

/* ── Lightbox (dependency-free, progressive enhancement) ───────────── */
.lb { position: fixed; inset: 0; z-index: 100; display: none; align-items: center;
  justify-content: center; background: rgba(28,18,48,0.92); padding: 4vmin; }
.lb.open { display: flex; }
.lb img { max-width: 94vw; max-height: 84vh; object-fit: contain;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5); }
.lb .cap { position: fixed; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.92);
  letter-spacing: 0.03em; padding: 0 24px; }
.lb button { position: fixed; background: none; border: 0; color: rgba(255,255,255,0.7);
  cursor: pointer; padding: 14px; line-height: 1; }
.lb .x { top: 14px; right: 18px; font-size: 30px; }
.lb .prev, .lb .next { top: 50%; transform: translateY(-50%); font-size: 42px; }
.lb .prev { left: 8px; } .lb .next { right: 8px; }
.lb button:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   SwissTopo "Bernina" theme — switched in /admin/home (revert = "Original
   purple"). Inks sampled from the Swiss national map of the Bernina massif:
   glacier-white paper, rock-ink, a ski-route-pink accent, lake-blue 2nd and
   forest-green 3rd. The home masthead drops from a solid colour block to glacier
   paper — the calm interior-page treatment carried to the front door. Only this
   block is theme-specific; everything else reads the tokens, so reverting to the
   original purple is a single flag (data-theme / the admin toggle).
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="bernina"] {
  --paper:      #f3f5f4;
  --paper-deep: #d4e0e6;
  --ink:        #20201d;
  --ink-soft:   #4f4d47;
  --accent:     #b14d80;
  --teal:       #2b6da4;
  --teal-deep:  #215780;
  --lilac:      #79a85d;
  --lilac-soft: #d9e7cb;
  --line:       rgba(32, 32, 29, 0.16);
}

/* the baked terrain.webp still carries the old lilac paper; `luminosity` keeps its
   relief shading but takes the hue from the new glacier --paper */
:root[data-theme="bernina"] body { background-blend-mode: luminosity; }

/* a two-tone route-pink band along the very top edge — echoes the SwissTopo
   ski-route overprint (a soft magenta corridor with a saturated edge line) */
:root[data-theme="bernina"] body::before { content: ""; display: block; height: 9px;
  background: color-mix(in srgb, var(--accent) 36%, #fff);
  border-bottom: 3px solid var(--accent); }

/* home masthead → glacier paper (ink title, rose route), mirroring .pagehead */
:root[data-theme="bernina"] .masthead { background: var(--paper-deep); color: var(--ink); }
:root[data-theme="bernina"] .masthead .tagline { color: var(--ink-soft); }
:root[data-theme="bernina"] .masthead .topbar__brand,
:root[data-theme="bernina"] .masthead nav.nav a { color: var(--ink-soft); }
:root[data-theme="bernina"] .masthead nav.nav a:hover { color: var(--accent); }
:root[data-theme="bernina"] .masthead nav.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--teal); }
:root[data-theme="bernina"] .masthead :focus-visible { outline-color: var(--accent); }
:root[data-theme="bernina"] .masthead .tagline a { color: var(--accent); border-bottom-color: var(--lilac); }
:root[data-theme="bernina"] .masthead .route .seg  { border-top-color: var(--accent); opacity: 0.5; }
:root[data-theme="bernina"] .masthead .route .dot  { background: var(--accent); }
:root[data-theme="bernina"] .masthead .route .way  { border-color: var(--accent); }
:root[data-theme="bernina"] .masthead .route .peak { border-bottom-color: var(--accent); }