/* Der Mauritius-Reiseführer. One typeface, Archivo, whose width axis carries the hierarchy: headings wide and heavy,
   text at normal width. Indigo ink on the pale turquoise of the lagoon, white for fields and windows, one scarlet
   (the flamboyant tree) for links and markers. No topic colours, no rounded corners, no shadows. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/Archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #d4ece6;
  --field: #ffffff;
  --ink: #1d2142;
  --ink-soft: #464c6b;
  --scarlet: #c22a23;
  --panel: #c0e0d8;
  --line: #9fcbc2;
  --mark: #ffd4cc;
  --land: #ffffff;
  --wide: 76rem;
  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: light dark;
}
/* very wide screens: a wider column, so the name across the photo keeps its weight */
@media (min-width: 140rem) { :root { --wide: 100rem; } }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c2230;
    --field: #12303f;
    --ink: #e4f1ee;
    --ink-soft: #a3c0bd;
    --scarlet: #ff6f62;
    --panel: #163a4a;
    --line: #2b5162;
    --mark: #5a2430;
    --land: #2c5a6b;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.62 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
  border-top: 6px solid var(--scarlet);
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--scarlet); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--scarlet); }
:focus-visible { outline: 3px solid var(--scarlet); outline-offset: 2px; }
h1, h2, h3, h4 { font-stretch: 112%; font-weight: 780; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.visually-hidden, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; left: 1rem; top: 1rem; z-index: 10; background: var(--paper); padding: 0.5rem 1rem; }

/* ---------- top bar: the name, the topics as plain words, the magnifier ---------- */
.bar {
  max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 2.2rem;
}
.bar::after { content: ""; grid-column: 1 / -1; border-bottom: 2px solid var(--ink); }
.bar__name { font-stretch: 125%; font-weight: 820; font-size: 1.02rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; padding: 0.95rem 0; }
.bar__topics { min-width: 0; }
.bar__topics ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.bar__topics ul::-webkit-scrollbar { display: none; }
.bar__topics li { flex: none; }
.bar__topics a { display: block; font-size: 0.93rem; color: var(--ink-soft); text-decoration: none; padding: 1rem 0 0.8rem; border-bottom: 4px solid transparent; white-space: nowrap; }
.bar__topics a:hover { color: var(--ink); }
.bar__topics a[aria-current] { color: var(--ink); border-bottom-color: var(--scarlet); }
.bar__find { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--ink); justify-self: end; grid-column: -2; grid-row: 1; }
.bar__find:hover, .bar__find[aria-expanded="true"] { color: var(--scarlet); }
@media (max-width: 60rem) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__topics { grid-column: 1 / -1; grid-row: 2; }
  .bar__topics ul { flex-wrap: wrap; gap: 0 1.1rem; overflow: visible; }
  .bar__topics a { padding: 0.25rem 0 0.4rem; }
}
/* the homepage has the register's own topic row right under the hero */
.home .bar__topics { display: none; }
@media (max-width: 24rem) { .bar__name { font-stretch: 108%; font-size: 0.95rem; } }

/* ---------- search: square field, the button in scarlet ---------- */
.search { position: relative; display: flex; }
.search input {
  font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--field);
  border: 2px solid var(--ink); border-right: 0; border-radius: 0; padding: 0.42rem 0.7rem; width: 15rem; min-width: 0;
}
.search input::placeholder { color: var(--ink-soft); }
.search input:focus { outline: none; border-color: var(--scarlet); }
.search button {
  font: inherit; font-stretch: 112%; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  color: #fff; background: var(--scarlet); border: 2px solid var(--scarlet); border-radius: 0; padding: 0 0.9rem;
}
.search button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.search__suggest {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; background: var(--field);
  border: 2px solid var(--ink); padding: 0.25rem 0; margin: 0;
}
.search__suggest a { display: block; padding: 0.5rem 0.75rem; text-decoration: none; font-size: 0.95rem; line-height: 1.35; }
.search__suggest a[aria-selected="true"], .search__suggest a:hover { background: var(--panel); color: var(--ink); }
.search__suggest a span, .search__suggest a small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-soft); font-size: 0.84rem; }
.search__suggest a.all { font-weight: 650; color: var(--scarlet); }

/* ---------- the search window: the field on top, the hits below ---------- */
.finder {
  width: min(44rem, calc(100% - 2rem)); max-height: min(40rem, calc(100dvh - 6rem)); margin: 9vh auto auto; padding: 0;
  border: 3px solid var(--ink); border-radius: 0; background: var(--field); color: var(--ink);
  display: none; flex-direction: column; overflow: hidden;
}
.finder[open] { display: flex; }
.finder::backdrop { background: rgb(29 33 66 / 0.55); }
.finder__form { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-bottom: 2px solid var(--ink); }
.finder__form svg { flex: none; color: var(--scarlet); }
.finder__form input { flex: 1; min-width: 0; font: inherit; font-size: 1.25rem; color: var(--ink); background: transparent; border: 0; padding: 0.2rem 0; }
.finder__form input:focus { outline: none; }
.finder__form input::-webkit-search-cancel-button { display: none; }
.finder__close { flex: none; font: inherit; font-size: 0.78rem; font-weight: 650; color: var(--ink-soft); background: transparent; border: 1.5px solid var(--line); border-radius: 0; padding: 0.15rem 0.45rem; cursor: pointer; }
.finder__close:hover { color: var(--ink); border-color: var(--ink); }
.finder__hits { list-style: none; margin: 0; padding: 0.4rem 0; overflow-y: auto; }
.finder__hits:empty { display: none; }
.finder__hits a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 0.6rem 1.1rem; text-decoration: none; }
.finder__hits li[aria-selected="true"] a, .finder__hits a:hover { background: var(--panel); color: var(--ink); }
.finder__title { font-weight: 700; font-stretch: 106%; }
.finder__topic { font-size: 0.8rem; font-weight: 600; color: var(--scarlet); white-space: nowrap; align-self: baseline; }
.finder__snippet { grid-column: 1 / -1; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.finder mark { background: var(--mark); color: inherit; }
.finder__note { margin: 0; padding: 1rem 1.1rem 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.finder__all { display: block; padding: 0.75rem 1.1rem; border-top: 2px solid var(--ink); font-weight: 700; color: var(--scarlet); text-decoration: none; }
.finder__all:hover { text-decoration: underline; }
.finder__all[hidden] { display: none; }
@media (max-width: 40rem) {
  .finder { width: 100%; max-height: none; height: 100dvh; margin: 0; border: 0; }
  .finder__topic { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- homepage: the lagoon photo across the screen, the island's name standing on its lower edge ---------- */
/* short enough that the search field stays in the first screen of a laptop */
.cover__photo { position: relative; height: clamp(16rem, 58svh, 50rem); background: var(--panel); }
@media (max-width: 30rem) { .cover__photo { height: clamp(14rem, 48svh, 26rem); } }
@media (max-height: 30rem) and (orientation: landscape) { .cover__photo { height: max(11rem, 52svh); } }
.cover__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 24%;
  /* the photo's lagoon runs out into the page's */
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
@media (prefers-color-scheme: dark) {
  /* the light word needs a darker sea behind it */
  .cover__photo img { filter: brightness(0.62) saturate(1.1); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
}
.cover__name {
  /* flow-root keeps the word's negative margin inside: it rises into the photo by most of its height */
  display: flow-root; position: relative; container-type: inline-size;
  max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
.hero__word {
  /* the word spans the column: its width is about 5.7 times the font size */
  margin: -0.62em 0 0 -0.055em; font-size: 17.4cqi; font-stretch: 125%; font-weight: 900;
  line-height: 0.8; letter-spacing: -0.045em; text-wrap: nowrap; color: var(--ink);
}
.hero { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 2.5rem; }
.hero__lead { max-width: 42rem; margin: clamp(1.2rem, 3vw, 2rem) 0 1.4rem; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.42; font-weight: 450; }
.search--big { max-width: 46rem; }
.search--big input { font-size: 1.12rem; padding: 0.85rem 1rem; width: 100%; border-width: 3px; }
.search--big button { font-size: 1.05rem; padding: 0 1.5rem; border-width: 3px; }
@media (max-width: 30rem) {
  .search--big input { font-size: 1rem; padding: 0.75rem 0.7rem; }
  .search--big button { padding: 0 1rem; }
}
.hero__intro { max-width: 46rem; margin-top: 2rem; color: var(--ink-soft); }
.hero__intro p { margin: 0 0 0.8rem; }

/* topic shortcuts, kept at the top of the screen while the register scrolls */
.jump { position: sticky; top: 0; z-index: 4; background: var(--paper); border-bottom: 2px solid var(--ink); }
.jump ul {
  max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0.65rem var(--gutter); list-style: none;
  display: flex; gap: 0.3rem 1.4rem; overflow-x: auto; scrollbar-width: none;
}
.jump a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.jump a span { margin-left: 0.3em; font-weight: 450; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.register { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 1rem var(--gutter) 3rem; }
.reg {
  display: grid; grid-template-columns: minmax(12rem, 17rem) 1fr; gap: 1rem 3.5rem;
  padding: 2.6rem 0 1.5rem; scroll-margin-top: 3.2rem;
}
.reg + .reg { border-top: 2px solid var(--ink); }
.reg__head { align-self: start; position: sticky; top: 4.2rem; }
.reg__head h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-stretch: 125%; font-weight: 850; color: var(--scarlet); }
.reg__count { margin: 0.35rem 0 0.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.reg__blurb { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.entries { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 3rem; }
.entry { break-inside: avoid; margin: 0 0 1.05rem; }
.entry a { display: block; text-decoration: none; line-height: 1.42; }
.entry__title { font-weight: 680; font-stretch: 105%; }
.entry__summary { color: var(--ink-soft); font-size: 0.93rem; }
.entry__topic { font-size: 0.8rem; font-weight: 600; color: var(--scarlet); margin-right: 0.15em; }
.entry a:hover .entry__title { color: var(--scarlet); text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 48rem) {
  .reg { grid-template-columns: 1fr; padding-top: 2rem; }
  .reg__head { position: static; }
}

/* ---------- article: topic and contents in a side column, the text beside it ---------- */
.page {
  max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.2rem) var(--gutter) 3rem;
  display: grid; grid-template-columns: 14rem minmax(0, var(--measure)); gap: 2rem clamp(2rem, 5vw, 5rem);
}
.page--plain { grid-template-columns: minmax(0, var(--measure)); }
.side { align-self: start; position: sticky; top: 1.5rem; font-size: 0.93rem; }
.side__topic a { font-stretch: 118%; font-weight: 800; color: var(--scarlet); text-decoration: none; font-size: 1rem; }
.side__topic a:hover { text-decoration: underline; }
.toc { margin-top: 2rem; }
.toc--inline { display: none; }
.toc h2 { font-size: 0.88rem; font-stretch: 100%; font-weight: 700; color: var(--ink-soft); margin: 0 0 0.6rem; letter-spacing: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li a { display: block; padding: 0.28rem 0 0.28rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-soft); line-height: 1.35; }
.toc li a:hover { color: var(--ink); border-left-color: var(--scarlet); }
@media (max-width: 56rem) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .side { position: static; }
  .side .toc { display: none; }
  .toc--inline { display: block; margin: 1.8rem 0 0; }
  .toc ol { columns: 2 12rem; }
}

.story__head h1 { margin: 0; font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-stretch: 118%; font-weight: 850; letter-spacing: -0.025em; line-height: 1.02; }
.story__lead { margin: 1.1rem 0 0; font-size: 1.22rem; line-height: 1.45; color: var(--ink-soft); }
.story__body { margin-top: 2.2rem; }
.story__body > :first-child { margin-top: 0; }
.story__body h2 { font-size: 1.55rem; margin: 2.6rem 0 0.7rem; scroll-margin-top: 1rem; }
.story__body h3 { font-size: 1.18rem; margin: 2rem 0 0.5rem; }
.story__body h4 { font-size: 1rem; margin: 1.6rem 0 0.4rem; }
.story__body p, .story__body ul, .story__body ol { margin: 0 0 1rem; }
.story__body li { margin: 0.25rem 0; }
.story__body li::marker { color: var(--scarlet); }
.story__body strong { font-weight: 680; }
.story__body blockquote { margin: 1.5rem 0; padding: 0 0 0 1.2rem; border-left: 4px solid var(--scarlet); font-size: 1.12rem; }
.story__body hr { border: 0; border-top: 2px solid var(--line); margin: 2rem 0; }
.story__body p.contact { background: var(--panel); padding: 0.9rem 1.1rem; font-size: 0.95rem; line-height: 1.55; }
.table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.story__body table { border-collapse: collapse; font-size: 0.95rem; min-width: 100%; }
.story__body th, .story__body td { text-align: left; padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.story__body th { font-weight: 700; border-bottom: 2px solid var(--ink); }

/* photos: square-cut, full column width; a small old photo sits beside its caption instead */
.photo { margin: 2rem 0; }
.photo .zoom, .photo .still { display: block; }
.photo img { display: block; width: 100%; background: var(--panel); }
.photo figcaption { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.photo .credit { display: block; margin-top: 0.15rem; font-size: 0.75rem; }
.photo .credit a { color: inherit; }
.photo--small { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: 1rem; align-items: end; }
.photo--small img { width: auto; max-width: 100%; }
.photo--small figcaption { margin: 0; }
@media (max-width: 30rem) { .photo--small { grid-template-columns: 1fr; } }

/* galleries: a grid of square crops; the full photo opens in the viewer */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.4rem; margin: 2rem 0; }
.gallery .zoom, .gallery .still { display: block; aspect-ratio: 1; overflow: hidden; background: var(--panel); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .zoom:hover img { opacity: 0.85; }

/* Google Maps: before it loads, the island with a pin at the place, like the locator map of a printed guide; the
   name and the button sit on the open sea to its left. Google Maps loads only on request. */
.map { position: relative; margin: 2rem 0; aspect-ratio: 3 / 2; max-height: 24rem; width: 100%; background: var(--panel);
  display: grid; justify-items: start; gap: 0.5rem; padding: 1rem 1.2rem 1.1rem; overflow: clip; } /* clip, not hidden: a card with a long name may grow */
.map:has(.map__chart) { grid-template-rows: auto 1fr auto auto auto; }
.map:has(.map__chart) .map__place { align-self: end; }
.map:not(:has(.map__chart)) { align-content: end; }
.map > :not(.map__chart, iframe) { position: relative; max-width: 52%; }
.map__load { white-space: nowrap; }
.map__chart {
  --grid: color-mix(in srgb, var(--line) 70%, transparent); --coast: var(--ink);
  position: absolute; top: 6%; bottom: 6%; right: 6%; aspect-ratio: 516 / 700;
}
.map__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map__pin {
  position: absolute; width: 0.95rem; height: 0.95rem; margin: -0.475rem 0 0 -0.475rem; border-radius: 50%;
  background: var(--scarlet); box-shadow: 0 0 0 3px var(--field), 0 0 0 4.5px var(--ink);
}
.map__where { margin: 0 0 0.6rem; font-size: 0.78rem; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.map__place { font-stretch: 118%; font-weight: 820; font-size: clamp(1.05rem, 3.6vw, 1.3rem); line-height: 1.15; text-decoration: none; }
.map__place:hover { text-decoration: underline; }
.map__load { font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.45rem 0.9rem; color: #fff; background: var(--scarlet); border: 0; border-radius: 0; cursor: pointer; }
.map__load:hover { background: var(--ink); color: var(--paper); }
.map__note { font-size: 0.78rem; color: var(--ink-soft); }
.map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }

/* YouTube links: a row with the thumbnail on the left */
.videos { display: grid; gap: 1rem; margin: 2rem 0; }
.video { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: 1.1rem; align-items: center; text-decoration: none; }
.video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; left: 0.6rem; bottom: 0.6rem; width: 2.4rem; height: 2.4rem; background: var(--scarlet); }
.video__play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -0.45rem 0 0 -0.25rem; border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: transparent transparent transparent #fff; }
.video__dur { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.35rem; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.video__body { display: block; }
.video__title { display: block; font-weight: 700; font-stretch: 108%; line-height: 1.3; }
.video:hover .video__title { color: var(--scarlet); text-decoration: underline; }
.video__meta { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 30rem) { .video { grid-template-columns: 1fr; } }

/* more from the topic, as register lines under the article */
.more { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 2rem var(--gutter) 3rem; }
.more h2 { font-size: 1.3rem; margin: 0 0 1.4rem; padding-top: 1.6rem; border-top: 2px solid var(--ink); }

/* ---------- search results and the 404 ---------- */
.results .search--big { margin-bottom: 2rem; }
.results h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 1rem; }
.hint { color: var(--ink-soft); }
.hits { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.hit { margin: 0 0 1.7rem; }
.hit > a { font-weight: 700; font-stretch: 108%; font-size: 1.15rem; text-decoration: none; }
.hit > a:hover { text-decoration: underline; }
.hit__topic { margin: 0.1rem 0 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--scarlet); }
.hit__text { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
mark { background: var(--mark); color: inherit; padding: 0 0.1em; }

/* ---------- footer ---------- */
.foot {
  background: var(--panel); margin-top: 2rem; padding: 2.4rem max(var(--gutter), calc((100% - var(--wide)) / 2)) 2.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem 3rem;
  font-size: 0.9rem; color: var(--ink-soft);
}
.foot > * { margin: 0; }
.foot__name { font-stretch: 125%; font-weight: 820; color: var(--ink); font-size: 1rem; }
.foot__topics { display: flex; flex-direction: column; gap: 0.25rem; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__legal a { color: var(--ink); font-weight: 600; }
.foot__credit { grid-column: 1 / -1; padding-top: 1rem; border-top: 1.5px solid var(--line); font-size: 0.8rem; }
.foot__credit a { text-decoration: underline; text-decoration-color: var(--line); }

/* ---------- photo viewer: the photo on white, quiet controls ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--field); color: var(--ink); }
.lightbox::backdrop { background: var(--field); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 3.5rem 4.5rem 3rem; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 9rem); }
.lightbox figcaption { max-width: 44rem; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.lightbox button { position: absolute; font: inherit; font-size: 2rem; line-height: 1; width: 3rem; height: 3rem; cursor: pointer; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 0; }
.lightbox button:hover { border-color: var(--ink); }
.lightbox__prev { left: 0.8rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.8rem; top: 50%; transform: translateY(-50%); }
.lightbox__close { right: 0.8rem; top: 0.8rem; }
.lightbox__count { position: absolute; left: 1.2rem; bottom: 0.6rem; margin: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
@media (max-width: 40rem) { .lightbox figure { padding: 3.5rem 0.8rem 3rem; } .lightbox__prev, .lightbox__next { top: auto; bottom: 0.4rem; transform: none; } .lightbox__count { left: 50%; transform: translateX(-50%); } }