/* Manx Geological Survey -- the refreshed variant.
   The reasoning behind every choice here is in REFRESH-DESIGN.md. */

/* ------------------------------------------------------------- tokens --- */

:root {
  --paper:    #F6F7F4;   /* map paper: cool, no yellow */
  --ink:      #1D2738;   /* survey ink: blue-black */
  --ink-soft: #566175;
  --rule:     #B9C0CB;
  --sea:      #0F5F8A;   /* links, focus -- the Irish Sea */
  --sea-wash: #E3ECF1;   /* the sea inside the neatline, and nowhere else */

  --sheet: 'Encode Sans', system-ui, sans-serif;   /* titles, legend, labels */
  --memoir: Literata, Georgia, serif;               /* reading */

  --measure: 36rem;                                  /* ~66 characters of Literata */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 84rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--memoir);
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--sheet);
  font-weight: 650;
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--sea); text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  background: var(--ink); color: var(--paper);
  font: 600 0.9375rem/1 var(--sheet); padding: 0.75rem 1rem;
}
.skip:focus { top: 1rem; }

/* ----------------------------------------------------- photograph & bar --- */

/* Anchors and the skip link land below the bar, not under it. */
html { scroll-padding-top: calc(var(--bar-offset, 3.5rem) + 1rem); }

/* The live site's photograph of Santon Gorge, full width, with the Survey's
   name set on it as it has been since 2013. 1600x230 is about 7:1; on a phone
   that is a 54px sliver, so below that the band keeps a floor height and crops. */
.coast {
  position: relative;
  height: clamp(8rem, 14.4vw, 14.375rem);
  background: #8c9488;   /* the photograph's own mid-tone, while it loads */
  overflow: hidden;
}
.coast img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
/* A scrim from the lower left only, where the name sits. */
.coast::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(20deg, rgb(29 39 56 / 0.72) 0%, rgb(29 39 56 / 0.35) 38%, rgb(29 39 56 / 0) 62%);
}
.coast__title {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gutter) clamp(0.9rem, 2vw, 1.5rem);
}
.coast__name {
  font: 650 clamp(1.5rem, 1rem + 2.2vw, 2.75rem)/1.02 var(--sheet);
  font-stretch: 118%; letter-spacing: -0.01em;
  color: var(--paper); text-decoration: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.coast__name:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }
.coast__name:focus-visible { outline-color: var(--paper); }
.coast__strap {
  margin: 0.3rem 0 0;
  font: 500 clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem)/1.3 var(--sheet);
  color: var(--paper); text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
}
/* The menu bar sticks to the top, slides away as you scroll down and comes
   back as soon as you scroll up (the script in Masthead.astro). */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: transform 180ms ease-out, box-shadow 180ms;
}
.bar.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 6px 14px -10px rgb(29 39 56 / 0.35); }
.bar.is-hidden { transform: translateY(-100%); box-shadow: none; }
.bar__inner {
  max-width: var(--wide); margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
}
/* The name joins the bar only once the photograph with the name on it has gone. */
.bar__name {
  display: none;
  font: 650 1rem/1.1 var(--sheet); font-stretch: 112%;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.bar.is-stuck .bar__name { display: block; }
.bar__nav { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.bar__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.bar__nav a {
  font: 500 0.9375rem/2.2 var(--sheet);
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.bar__nav a:hover { color: var(--ink); }
.bar__nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--sea); }

.bar__search { display: flex; }
.bar__search input {
  font: 400 0.9375rem/1 var(--sheet);
  width: 9rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule); border-right: 0; border-radius: 2px 0 0 2px;
  background: #fff; color: var(--ink);
}
.bar__search button, .bar__menu {
  font: 600 0.9375rem/1 var(--sheet);
  padding: 0.45rem 0.75rem; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 0 2px 2px 0;
  background: var(--ink); color: var(--paper);
}
.bar__menu { margin-left: auto; border-radius: 2px; background: none; color: var(--ink); }
.bar__menu[aria-expanded='true'] { background: var(--ink); color: var(--paper); }

@media (max-width: 51.99rem) {
  .bar__nav { flex-basis: 100%; flex-direction: column; align-items: stretch; max-height: calc(100svh - 4rem); overflow-y: auto; }
  .bar__nav[hidden] { display: none; }
  .bar__nav ul { flex-direction: column; }
  .bar__nav li { border-top: 1px solid var(--rule); }
  .bar__nav a { display: block; line-height: 2.8; border: 0; }
  .bar__nav a[aria-current='page'] { box-shadow: inset 3px 0 var(--sea); padding-left: 0.75rem; }
  .bar__search { padding-bottom: 0.5rem; }
  .bar__search input { flex: 1; }
}

/* --------------------------------------------------------- the sheet --- */

.sheet { display: block; width: 100%; height: auto; font-family: var(--sheet); }
.sheet__sea { fill: var(--sea-wash); }
.sheet__units path { stroke: var(--ink); stroke-width: 0.7; stroke-linejoin: round; }
.sheet__neatline { fill: none; stroke: var(--ink); stroke-width: 2; }
.sheet__furniture { pointer-events: none; }
.sheet__furniture line { stroke: var(--ink); stroke-width: 1.5; }
.sheet__furniture text {
  font-size: 19px; font-weight: 500;
  fill: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* Orientation overlay -- OpenStreetMap roads and place names. */
.overlay { pointer-events: none; }
.road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road--major { stroke: #fff; stroke-width: 2.4; }
.road--minor { stroke: #fff; stroke-width: 1.4; }
.road--casing.road--major { stroke: rgb(29 39 56 / 0.55); stroke-width: 4.4; }
.road--casing.road--minor { stroke: rgb(29 39 56 / 0.45); stroke-width: 3; }
.place__mark { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.place text {
  fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round;
}
/* Sizes come from the label data -- each set is placed for its own size. */
.place--city text { font-weight: 650; }
.place--town text { font-weight: 600; }
.place--village text { font-weight: 500; }
/* Summits in italic beside a triangle, as a printed map names natural features. */
.place--peak text { font-weight: 500; font-style: italic; fill: #2f3a4d; }
/* The phone set is placed with larger names than the laptop set. */
.overlay--narrow { display: none; }
@media (max-width: 47.99rem) {
  .overlay--wide { display: none; }
  .overlay--narrow { display: inline; }
  .place text { stroke-width: 7px; }
}
/* The toggles above the map, working with or without script. */
.field__map:has([data-layer='places']:not(:checked)) .overlay--places,
.field__map:has([data-layer='roads']:not(:checked)) .overlay--roads { display: none; }

.sheet__scale rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sheet__scale rect.is-solid { fill: var(--ink); }
.sheet__scale text { fill: var(--ink); }

.map-tools {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin: 0 0 0.6rem; padding: 0; border: 0;
  font: 500 0.875rem/1.3 var(--sheet);
}
.map-tools__toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; min-height: 2rem; }
.map-tools__toggle input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ink); }
.map-credit { margin: 0.4rem 0 0; font: 450 0.75rem/1.4 var(--sheet); color: var(--ink-soft); }
.map-credit a { color: inherit; }

/* Interactive on the home page only. */
[data-sheet] .sheet__units path { cursor: pointer; transition: opacity 120ms; }
[data-sheet] .sheet__units path:hover { stroke-width: 2.4; }
[data-sheet].is-highlighting .sheet__units path:not(.is-lit) { opacity: 0.22; }
.sheet__selection { pointer-events: none; fill: none; stroke-linejoin: round; }
.sheet__selection-halo { stroke: var(--paper); stroke-width: 9; }
.sheet__selection-line { stroke: var(--ink); stroke-width: 3.5; }

.sheet--locator .sheet__units path { stroke-width: 1.4; }
.sheet--locator .sheet__units path.is-dim { fill: #D9DEE4; stroke: #A6AFBB; stroke-width: 1; }
.sheet--locator .sheet__neatline { stroke-width: 3; }

/* ------------------------------------------------------------- legend --- */

.legend__title {
  font: 650 0.9375rem/1.3 var(--sheet);
  margin: 0 0 0.5rem;
}
.legend__list { list-style: none; margin: 0; padding: 0; }
.legend__list > li { border-top: 1px solid var(--rule); }
.legend__list > li:last-child { border-bottom: 1px solid var(--rule); }
.legend__list > li > a {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center; gap: 0.7rem;
  padding: 0.45rem 0;
  font: 500 0.9375rem/1.3 var(--sheet);
  color: var(--ink); text-decoration: none;
}
.legend__list > li > a:hover .legend__name { text-decoration: underline; text-decoration-thickness: 0.08em; }
.legend__list > li > a[aria-current='page'] .legend__name { font-weight: 700; color: var(--sea); }

/* The box of a printed legend: flat colour, a fine ink edge. */
.legend__box {
  display: block; width: 1.75rem; height: 1.1rem;
  background: var(--stripes, var(--swatch));
  outline: 1px solid var(--ink); outline-offset: -1px;
}
.legend__list > li.is-active .legend__box,
.legend__list > li > a[aria-current='page'] .legend__box { outline-width: 3px; outline-offset: -3px; }
.legend__list > li.is-active .legend__name { font-weight: 700; }
.legend__age {
  font: 450 0.8125rem/1.3 var(--sheet);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.legend__members { padding: 0 0 0.6rem 2.45rem; }
.legend__members summary {
  font: 500 0.875rem/1.6 var(--sheet);
  color: var(--sea); cursor: pointer; width: fit-content;
}
.legend__members ul { list-style: none; margin: 0.4rem 0; padding: 0; }
.legend__members li {
  display: grid; grid-template-columns: 0.8rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.5rem;
  font: 400 0.8125rem/1.45 var(--sheet);
  padding: 0.12rem 0;
}
.legend__chip {
  display: block; width: 0.8rem; height: 0.6rem;
  background: var(--swatch);
  outline: 1px solid var(--ink); outline-offset: -1px;
}
.legend__members p { margin: 0.3rem 0 0; font: 500 0.875rem/1.4 var(--sheet); }

.side__title {
  font: 650 1rem/1.25 var(--sheet); font-stretch: 108%;
  margin: 0 0 0.6rem;
}
.side__others { margin-top: 1.5rem; }
.side__others ul { list-style: none; margin: 0; padding: 0; }
.side__others li { border-top: 1px solid var(--rule); }
.side__others li:last-child { border-bottom: 1px solid var(--rule); }
.side__others a {
  display: block; padding: 0.4rem 0;
  font: 500 0.9375rem/1.3 var(--sheet);
  color: var(--ink); text-decoration: none;
}
.side__others a:hover { text-decoration: underline; }
.side__others a[aria-current='page'] { font-weight: 700; color: var(--sea); }

/* ----------------------------------------------------------- the page --- */

.page {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 4rem;
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
}
/* Side menu on the left, as on the live site; it stays in view as you read,
   sitting below the bar whenever the bar is showing. Below 64rem it follows
   the article. */
@media (min-width: 64rem) {
  .page { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .page__side {
    position: sticky; top: calc(var(--bar-offset, 0px) + 1.5rem);
    align-self: start; max-height: calc(100vh - var(--bar-offset, 0px) - 3rem); overflow-y: auto;
    transition: top 180ms ease-out;
  }
}
@media (max-width: 63.99rem) {
  .page__side { order: 2; border-top: 1px solid var(--rule); padding-top: 2rem; }
}

/* Where this rock crops out: beside the opening paragraph on a wide screen. */
.locator { margin: 0 0 1.5rem; max-width: 9.5rem; }
@media (min-width: 40rem) {
  .locator { float: right; width: 11.5rem; margin: 0.35rem 0 1rem 1.75rem; }
}
.locator figcaption { font: 450 0.8125rem/1.4 var(--sheet); color: var(--ink-soft); margin-top: 0.4rem; }

.article { min-width: 0; max-width: 46rem; }
.article__title {
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  font-stretch: 118%;
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
.article > :where(p, ul, ol, h2, h3, h4, blockquote, hr) { max-width: var(--measure); }
.article :where(h2) { font-size: 1.75rem; font-stretch: 112%; margin: 2.25em 0 0.5em; }
.article :where(h3) { font-size: 1.375rem; font-weight: 600; margin: 2em 0 0.45em; }
.article :where(h4) { font-size: 1.125rem; font-weight: 600; margin: 1.8em 0 0.4em; }
.article :where(p) { margin: 0 0 1.05em; }
.article :where(ul, ol) { padding-left: 1.25em; }
.article :where(li) { margin-bottom: 0.35em; }
.article :where(strong, b) { font-weight: 650; }
.article :where(hr) { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.article :where(img) { display: block; }

/* Was <span class="blackheads">: the opening sentence. */
.article .lead { font-size: 1.3125rem; line-height: 1.5; }
/* Was <p class="greybody">: a source. */
.article .source {
  font: 450 0.875rem/1.5 var(--sheet);
  color: var(--ink-soft);
}

/* Was a table of photographs beside captions. The photographs are 200px wide
   -- they date from 2003 -- so they are shown at that size, on a mount, and
   never stretched. */
.plates { margin: 2rem 0; max-width: 46rem; }
.plate {
  margin: 0; padding: 1.25rem 0;
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.plate:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 36rem) {
  .plate { grid-template-columns: fit-content(14rem) minmax(0, 1fr); }
}
.plate img, .entries__with-plate img {
  background: #fff; padding: 0.375rem;
  border: 1px solid var(--rule);
}
.plate figcaption { font-size: 1rem; line-height: 1.6; max-width: 32rem; }
.plate figcaption > :last-child { margin-bottom: 0; }

/* Was the colour key beside the map: now the same boxes as the legend. */
.key { list-style: none; margin: 1.75rem 0; padding: 0; max-width: 28rem; }
.key li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; align-items: start;
  padding: 0.4rem 0; border-top: 1px solid var(--rule);
  font: 500 0.9375rem/1.4 var(--sheet);
}
.key li:last-child { border-bottom: 1px solid var(--rule); }
.key .swatch {
  display: block; height: 1.1rem; margin-top: 0.1rem;
  background: var(--swatch); outline: 1px solid var(--ink); outline-offset: -1px;
}
.key-aside { display: block !important; padding-top: 1rem !important; }
.key-label strong { font-weight: 650; }
.key-label { color: var(--ink-soft); }
.key-label strong, .key-label a { color: var(--ink); }

/* Was a usemap. Percent hotspots now, so they stay on target at any width. */
.image-map { position: relative; margin: 1.75rem 0; }
.image-map img { width: 100%; }
.hotspot { position: absolute; border: 2px solid transparent; border-radius: 2px; }
.hotspot:hover, .hotspot:focus-visible { border-color: var(--sea); background: rgb(15 95 138 / 0.16); outline: none; }

/* Was a 240x180 iframe. */
.embed { aspect-ratio: 16 / 9; margin: 2rem 0; background: var(--ink); max-width: 46rem; }
.embed iframe { display: block; width: 100%; height: 100%; border: 0; }

.table-scroll { overflow-x: auto; margin: 1.75rem 0; }
.table-scroll table { border-collapse: collapse; font: 400 0.9375rem/1.5 var(--sheet); }
.table-scroll :where(th, td) { text-align: left; vertical-align: top; padding: 0.45rem 1rem 0.45rem 0; border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------ the home --- */

/* The home page sits in the same frame as every other page: side menu on
   the left (its legend is the map's key), then the map with its words
   beside it. The map's column is sized from the viewport height, so the
   drawing fills its box -- an svg that is wider than its drawing leaves
   empty gutters either side of the Island. 0.83 is the sheet's aspect. */
.home { min-width: 0; }
.field { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.field__map { max-width: min(100%, calc((100svh - 8rem) * 0.83)); }
.field__map .sheet { width: 100%; height: auto; }

/* Narrow: heading, then the map, then its answer. */
@media (max-width: 74.99rem) {
  .field__words { display: contents; }
  .title-block { order: 1; }
  .field__map { order: 2; }
}
/* Wide: map on the left, words beside it. */
@media (min-width: 75rem) {
  .field {
    grid-template-columns: min(calc((100svh - 8rem) * 0.83), calc(100% - 20rem)) minmax(17rem, 1fr);
    gap: 2.5rem;
  }
  .field__map { grid-column: 1; grid-row: 1; max-width: none; }
  .field__words { grid-column: 2; grid-row: 1; max-width: 24rem; }
}

.title-block h1 {
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);
  font-stretch: 118%;
  line-height: 1.02; letter-spacing: -0.012em;
  margin: 0 0 0.75rem;
}
.title-block__lead { font-size: 1.25rem; line-height: 1.5; margin: 0 0 1.25rem; }
.title-block__note { font: 450 0.8125rem/1.4 var(--sheet); color: var(--ink-soft); margin: 0.6rem 0 0; }

.button {
  font: 600 1rem/1 var(--sheet);
  padding: 0.8rem 1.15rem; cursor: pointer;
  border: 0; border-radius: 2px;
  background: var(--ink); color: var(--paper);
}
.button:hover { background: var(--sea); }
.button[disabled] { opacity: 0.6; cursor: progress; }

.answer {
  position: relative;
  margin: 1.5rem 0 2rem; padding: 1rem 1.1rem;
  min-height: 7.75rem;
  background: #fff; border: 1px solid var(--rule);
  font-family: var(--sheet);
}
.answer__body { display: flex; flex-direction: column; gap: 0.2rem; }
.answer__empty { font-size: 0.9375rem; color: var(--ink-soft); }
.answer__note { font-size: 0.9375rem; line-height: 1.45; }
.answer__close { display: none; }

/* On a phone the map fills the screen, so the answer is a card that slides
   up from the foot of it when there is something to say -- the pattern every
   map app uses. It answers a tap, so it is allowed to move. */
@media (max-width: 74.99rem) {
  .answer {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    margin: 0; min-height: 0;
    padding: 1rem 3.5rem calc(1.1rem + env(safe-area-inset-bottom)) var(--gutter);
    border-width: 2px 0 0; border-color: var(--ink);
    box-shadow: 0 -10px 28px -14px rgb(29 39 56 / 0.5);
    transform: translateY(110%); visibility: hidden;
    transition: transform 200ms ease-out, visibility 0s linear 200ms;
  }
  .answer.is-open { transform: none; visibility: visible; transition: transform 200ms ease-out; }
  .answer__empty { display: none; }
  /* Short enough that the whole map stays in view above it. */
  .answer { padding-top: 0.8rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
  .answer__body { gap: 0.1rem; }
  .answer__unit { font-size: 1.1875rem; line-height: 1.2; }
  .answer__link { margin-top: 0.2rem; }
  .answer__close {
    display: block; position: absolute; top: 0.5rem; right: 0.5rem;
    width: 2.75rem; height: 2.75rem;   /* a thumb-sized target */
    border: 0; background: none; cursor: pointer;
    font: 400 1.75rem/1 var(--sheet); color: var(--ink-soft);
  }
  /* Room under the last section so the card never covers the footer for good. */
  .home { padding-bottom: 6rem; }
}
.answer__lead { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.answer__unit { display: flex; gap: 0.55rem; align-items: baseline; font-size: 1.375rem; font-weight: 650; line-height: 1.2; }
.answer__chip {
  flex: none; width: 1.1rem; height: 0.75rem;
  background: var(--swatch); outline: 1px solid var(--ink); outline-offset: -1px;
}
.answer__meta { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.answer__link { font-size: 0.9375rem; font-weight: 500; margin-top: 0.35rem; }

.story { padding-top: clamp(3rem, 6vw, 4.5rem); }
.story h2, .news h2, .activity h2 { font-size: 1.75rem; font-stretch: 112%; margin: 0 0 1rem; }
.story p { font-size: 1.3125rem; line-height: 1.6; max-width: 40rem; margin: 0; }

.columns {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
}
/* Two columns only once the main column, beside the side menu, is wide enough. */
@media (min-width: 80rem) { .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } }

.entries { list-style: none; margin: 0; padding: 0; }
.entries > li { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.entries > li:last-child { border-bottom: 1px solid var(--rule); }
.entries h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.3rem; }
.entries p { font-size: 1rem; line-height: 1.6; margin: 0; max-width: 34rem; }
.entries__link { font: 500 0.9375rem/1.4 var(--sheet); margin-top: 0.45rem !important; }
.entries__with-plate { display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr); align-items: start; }

/* -------------------------------------------------------------- search --- */

.results {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 4rem;
}
.results__status { font: 450 0.9375rem/1.5 var(--sheet); color: var(--ink-soft); }
.results__list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--measure); }
.results__list li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.results__list h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.3rem; }
.results__list p { font-size: 1rem; margin: 0; }
.results__list mark { background: var(--sea-wash); color: inherit; }

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

.footer { background: var(--ink); color: #C7CEDA; font-family: var(--sheet); }
.footer__index {
  max-width: var(--wide); margin: 0 auto;
  padding: 3rem var(--gutter) 2rem;
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.footer h2 { font-size: 0.9375rem; color: var(--paper); margin: 0 0 0.6rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 0.3rem; font-size: 0.875rem; line-height: 1.4; }
.footer a { color: #A9D3EC; }
.footer :focus-visible { outline-color: #A9D3EC; }
.footer__charity {
  max-width: var(--wide); margin: 0 auto;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid #3A4659;
  font-size: 0.875rem; line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}