/* My Travel Chronicle — direction A · Dispatch
   Colour values are the ones verified against WCAG AA during design; the
   secondary greys in particular are load-bearing. Do not lighten them for
   "subtlety": the previous values failed at 2.5–3.6:1. */

:root {
  color-scheme: light;

  --ground: #FFFFFF;
  --ink: #16130F;
  --accent: #8C2F1F;
  --accent-dark: #5E1E12;
  --hairline: #E0DACF;
  --panel: #F6F3EC;
  --score-track: #E9E4DA;  /* scorecard bar track — decoration only */

  /* secondary text — measured contrast on --ground in comments */
  --ink-body: #221E18;   /* 16.6:1 */
  --ink-dek: #3A342B;    /* 12.3:1 */
  --ink-meta: #58513F;   /*  7.9:1 */
  --ink-quiet: #6B6455;  /*  5.9:1 */
  --ink-faint: #6E6754;  /*  5.6:1 */
  --ink-kicker: #6F6759; /*  5.6:1 */

  --display: "Bodoni Moda", "Bodoni Fallback", "Didot", "Times New Roman", serif;
  --display-set: "opsz" 8, "wght" 500;   /* see 'Display type is set STURDIER' below */
  --body: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --ui: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 720px;        /* review pages: text column beside a live margin */
  --measure-read: 800px;   /* journal: the reading column beside the rail */
  --gutter: 64px;
  --rule: 1px solid var(--hairline);
}

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

/* WCAG 2.2 SC 2.4.11 (Focus Not Obscured): an anchor jump must not land the
   target under anything sticky. Also gives in-page links breathing room. */
html { scroll-padding-top: 32px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.18em; }

/* Links inside prose are underlined ALWAYS, not on hover.
   The accent is 8.05:1 on the ground, which is fine for reading, but only
   2.01:1 against the surrounding body ink — well under the 3.0:1 that lets
   colour alone distinguish a link. WCAG 1.4.1 Use of Color. Chrome, nav and
   listing links are exempt: they are not inline in a run of text, so their
   position and context already mark them. */
.prose a,
.standfirst a,
.article-body .prose a,
figcaption a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--ground);
  padding: 12px 18px; font-family: var(--ui); font-size: 14px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- shell ---------- */

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  /* This element also carries `.wrap`; keep its responsive side gutters. */
  gap: 24px; padding: 22px var(--gutter) 18px; flex-wrap: wrap;
}
.masthead__word {
  font-family: var(--display); font-size: clamp(23px, 2vw, 27px); font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink);
}
.masthead__word:hover { text-decoration: none; }
.masthead__nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; }
/* Generous 44px nav targets for one-handed use. */
.masthead__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.masthead__nav a { color: var(--ink-kicker); }
.masthead__nav a:hover { color: var(--accent); }
.masthead + .rule { margin-bottom: 0; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------- editorial primitives ---------- */

.kicker {
  font-family: var(--ui);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.kicker a { color: inherit; }
.kicker .keyword-link,
.entry-list__meta .keyword-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.kicker .keyword-link:hover,
.entry-list__meta .keyword-link:hover { color: var(--accent); }
.kicker--quiet { color: var(--ink-kicker); }

/* Display type is set STURDIER than Bodoni's default.

   Bodoni is a didone: its whole character is extreme thick/thin contrast, and
   at a 62px headline the thins land on about one pixel, so parts of letters
   drop out. Matt raised this on the real page and it is a genuine legibility
   problem, not a preference.

   The fix keeps the face. Weight goes to 500, and the optical-size axis is
   PINNED LOW instead of tracking the type size — a didone's small-text cut is
   drawn with sturdier hairlines precisely because they have to survive at
   small sizes, and borrowing that cut for large type thickens the thins while
   leaving the shapes alone. Costs nothing: both axes are already in the
   self-hosted variable file.

   Set as one token so display type cannot drift out of agreement with itself.
   Never apply it to body text — Newsreader has no opsz axis left after
   instancing, so only the weight would land, and it would land wrong. */
h1, h2, h3,
.masthead__word,
.site-footer__word,
.affiliate__subject,
.newsletter__heading,
.related__list a,
.pull-quote p,
.scorecard__value,
.scorecard__overall,
.review-list__score,
.review-list__title {
  font-family: var(--display);
  font-variation-settings: var(--display-set);
}
h1, h2, h3 { font-weight: 400; }

.headline {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* An ARTICLE headline is set smaller than a lead headline.

   `.headline` tops out at 68px, which is a front-page size: it belongs to the
   homepage lead, where the column is wide and the job is to shout. Inside the
   800px reading column it fits about twenty characters, so a factual journal
   title ("Trip Report Kings Dominion - Friday, June 26 and Saturday, June 27,
   2026") ran to four lines and about 300px before the reader reached a word of
   the entry. Both long-form page types share this header, so both step down.

   Set at 38px, not the 46px first tried — Matt looked at the real Kings
   Dominion entry and said it was still too big. 38px is 1.9x the 20px body,
   which is an article headline rather than a poster.

   Line-height opens to 1.1 with the size. 0.98 is a negative-leading trick
   that only reads at display sizes; below about 40px it reads as cramped. */
.article__head .headline {
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.1;
}

.standfirst {
  font-size: 21px; line-height: 1.5; color: var(--ink-dek);
  max-width: 52ch; margin: 16px 0 0;
}
/* Steps down with the 38px article headline; 21px was sized for the 68px lead. */
.article__head .standfirst { font-size: 18px; line-height: 1.45; margin-top: 12px; }

.byline {
  font-family: var(--ui); font-size: 13.5px; line-height: 1.65;
  color: var(--ink-meta); margin: 0;
}
.byline a { color: var(--ink); font-weight: 500; }

/* Air before a major heading is what makes the layer-cake scan work: the
   heading has to read as a lid on the section below, not as a line in the one
   above. */
.section-heading { font-size: 30px; line-height: 1.1; margin: 56px 0 16px; }
.article-body > .block-heading:first-child .section-heading { margin-top: 0; }

/* ---------- article layout: one column plus a margin ---------- */

.article-grid {
  display: grid;
  grid-template-columns: var(--measure) 1fr;
  gap: var(--gutter);
  align-items: start;
}
.article-grid > .full { grid-column: 1 / -1; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 20px; color: var(--ink-body); text-wrap: pretty; }
.article-body > div:first-child .prose p:first-child::first-letter {
  font-family: var(--display);
  font-variation-settings: var(--display-set);
  float: left;
  font-size: 82px;
  line-height: 0.76;
  padding: 7px 14px 0 0;
}

/* A journal entry has no scorecard or fact panel, so there is nothing to put
   in a margin column. It reads as a single centred column instead — putting it
   in the review grid leaves a dead half-page and a needlessly narrow measure. */
.article--railed .filed-under,
.article--railed .evidence { max-width: none; }

/* Full-bleed blocks break out of the reading column to the page edges. */

/* ---------- the reading rail ---------- */
/* Journal entries only. Reviews are a single centred column with the scorecard
   and evidence stacked below the article — the right-hand margin they were
   first built with was empty on most rows and read as a hole in the page. */

.article--railed {
  display: grid;
  grid-template-columns: 260px minmax(0, var(--measure-read));
  gap: 0 72px;
  justify-content: center;
  align-items: start;
  padding-top: 48px;
}

/* Explicit placement, so the DOM can be in the order a phone needs — headline,
   answer, aids, article — while the desktop still shows the rail alongside.
   The previous attempt hoisted the rail with `order`, which put a contents
   list above the headline. Reading order is the constraint; the grid bends
   around it, not the other way about. */
.article--railed > .article__head { grid-column: 2; grid-row: 1; }
.article--railed > .quick        { grid-column: 2; grid-row: 2; }
.article--railed > .rail         { grid-column: 1; grid-row: 1 / span 3; }
.article--railed > .article__main { grid-column: 2; grid-row: 3; }

.rail {
  position: sticky;
  top: 32px;
  align-self: start;
  font-family: var(--ui);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Sections are separated by whitespace, not rules. The same call as the review
   topics: a stack of hairlines in a narrow column reads as clutter, and the
   headings already do the dividing. */
.rail__section + .rail__section { margin-top: 34px; }
.rail__heading {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-kicker);
  margin: 0 0 10px;
}
.rail ul { list-style: none; margin: 0; padding: 0; }

/* SC 2.5.8 Target Size: every rail link clears 24px of height. */
.rail a, .rail__contents a {
  display: block;
  min-height: 24px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-meta);
}
.rail a:hover { color: var(--accent); text-decoration: none; }

/* In the narrow rail, lead with the useful place name and put its context on
   a quieter second line. Chevron breadcrumbs looked like collapsed controls. */
.rail-location { display: block; }
.rail-location .rail-location__primary { color: var(--ink); font-weight: 600; }
.rail-location__context {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.45;
}
.rail .rail-location__context a {
  display: inline;
  min-height: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.rail__contents a { border-left: 2px solid var(--hairline); padding-left: 12px; }
.rail__contents a[aria-current="true"] {
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.rail__contents .is-h3 { padding-left: 24px; font-size: 13.5px; }

.rail__meta { font-size: 13px; color: var(--ink-faint); line-height: 1.7; }

.rail__related a { font-family: var(--body); font-size: 15px; color: var(--ink); padding: 7px 0; }
.rail__related a:hover { color: var(--accent); }

@media (max-width: 1100px) {
  .article--railed { grid-template-columns: minmax(0, 1fr); max-width: var(--measure-read); margin: 0 auto; gap: 0; }
  .article--railed > .article__head,
  .article--railed > .quick,
  .article--railed > .rail,
  .article--railed > .article__main { grid-column: 1; grid-row: auto; }
  .rail { position: static; max-height: none; order: 2; margin-top: 44px; padding-top: 24px; border-top: 2px solid var(--ink); }
}

/* ---------- blocks ---------- */

.photo { margin: 30px 0; }
.photo--inset { max-width: var(--measure); }
.photo__caption, figcaption {
  font-size: 14px; font-style: italic; line-height: 1.55;
  color: var(--ink-quiet); padding-top: 8px; margin: 0;
  max-width: 55ch;
}
.photo__credit {
  font-style: normal; font-family: var(--ui);
  font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.photo__credit::before { content: "\2002\00B7\2002"; letter-spacing: 0; }

.gallery__grid { display: grid; gap: 12px; }
.gallery--feature .gallery__grid { grid-template-columns: 2fr 1fr; }
.gallery--grid .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.video { margin: 30px 0; max-width: var(--measure); }
.video__frame { position: relative; background: #1B1713; overflow: hidden; }
.video__frame img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 12, 0.28);
}
.video__play:hover { background: rgba(20, 16, 12, 0.14); text-decoration: none; }
.video__play-icon {
  width: 74px; height: 52px; border-radius: 9px;
  background: rgba(253, 252, 249, 0.93);
  display: flex; align-items: center; justify-content: center;
}
.video__play-icon::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 19px solid var(--ink);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video__play-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pull-quote {
  margin: 30px 0; padding-left: 18px;
  border-left: 2px solid var(--accent);
  max-width: var(--measure);
}
.pull-quote p {
  font-family: var(--display); font-size: 25px; line-height: 1.22;
  font-style: italic; margin: 0; color: var(--ink);
}
.pull-quote cite {
  display: block; font-family: var(--ui); font-style: normal;
  font-size: 13px; color: var(--ink-meta); padding-top: 8px;
}

.verdict, .fact-panel, .affiliate {
  max-width: var(--measure); margin: 30px 0;
  border-top: 2px solid var(--ink); padding-top: 18px;
}
.verdict__heading, .fact-panel__heading, .affiliate__heading, .related__heading {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.verdict__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.verdict h3 {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-kicker); margin: 0 0 8px;
}
.verdict ul, .fact-panel dl, .related__list { margin: 0; padding: 0; list-style: none; }
.verdict li { font-size: 15.5px; line-height: 1.55; margin-bottom: 6px; }

.fact-panel__row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 5px 0; border-bottom: var(--rule);
}
.fact-panel dt { font-family: var(--ui); font-size: 13px; color: var(--ink-kicker); }
.fact-panel dd { margin: 0; font-size: 15.5px; color: var(--ink-body); }
.fact-panel__checked, .checked {
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint);
  margin: 10px 0 0;
}

.affiliate { border: 1px solid var(--ink); border-top-width: 1px; padding: 20px 22px; }
.affiliate__subject { font-family: var(--display); font-size: 22px; margin: 0 0 4px; }
.affiliate__detail { font-size: 14.5px; color: var(--ink-meta); margin: 0 0 14px; }
.affiliate__button {
  display: inline-block; background: var(--ink); color: var(--ground);
  padding: 11px 18px; font-family: var(--ui); font-size: 13px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.affiliate__button:hover { background: var(--accent); color: var(--ground); text-decoration: none; }
.affiliate__disclosure {
  font-family: var(--ui); font-size: 13px; line-height: 1.65;
  color: var(--ink-quiet); margin: 16px 0 0; padding-top: 10px;
  border-top: var(--rule);
}

.newsletter {
  max-width: var(--measure); margin: 40px 0;
  border-top: 2px solid var(--ink); border-bottom: var(--rule); padding: 24px 0;
}
.newsletter__heading { font-family: var(--display); font-size: 30px; line-height: 1.15; margin: 0 0 8px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.newsletter__body { font-size: 16px; color: var(--ink-meta); margin: 0; }

.ad { border: 1px dashed var(--hairline); margin: 30px 0; }

.related { max-width: var(--measure); margin: 36px 0 0; border-top: 2px solid var(--ink); padding-top: 14px; }
.related__list li { padding: 12px 0; border-bottom: var(--rule); }
.related__list a { color: var(--ink); font-family: var(--display); font-size: 21px; }
.related__list a:hover { color: var(--accent); text-decoration: none; }
.related__arrow { color: var(--accent); display: inline-block; transition: transform .16s ease; }
.related__list a:hover .related__arrow { transform: translateX(5px); }

/* ---------- listings ---------- */

.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list__item { padding: 20px 0; border-bottom: var(--rule); }
.entry-list__item h2 { margin: 0 0 6px; font-size: 30px; line-height: 1.12; }
.entry-list__item h2 a { color: var(--ink); }
.entry-list__item h2 a:hover { color: var(--accent); text-decoration: none; }
.entry-list__meta {
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-meta); margin: 8px 0 0;
}

.breadcrumb {
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); padding: 20px 0 0;
}
.breadcrumb a { color: var(--ink-faint); }

.filed-under { max-width: var(--measure); margin: 40px 0 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.filed-under h2 {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-kicker); margin: 0 0 10px;
}
.filed-under ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- index listings with sorting ---------- */

.region { padding: 26px 0; border-bottom: var(--rule); }

.place-list { list-style: none; margin: 14px 0 0; padding: 0; }
.place-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name meta" "where meta";
  align-items: baseline; column-gap: 20px;
  min-height: 40px; padding: 9px 0;
  border-bottom: var(--rule);
  color: var(--ink);
}
.place-list a:hover { color: var(--accent); text-decoration: none; }
.place-list__name { grid-area: name; font-family: var(--body); font-size: 20px; }
.place-list__where {
  grid-area: where;
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.place-list__meta {
  grid-area: meta;
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint); white-space: nowrap;
}
.region__empty {
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint);
  padding: 26px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
}
.region__empty a { color: var(--ink-quiet); min-height: 24px; display: inline-flex; align-items: center; }

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

.site-footer { background: var(--ink); color: #C8C0B0; margin-top: 64px; padding: 32px 0; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.site-footer__word { font-family: var(--display); font-size: 17px; color: var(--ground); letter-spacing: 0.04em; }
.site-footer__links { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--ui); font-size: 13px; letter-spacing: 0.06em; }
.site-footer a { color: #C8C0B0; }
.site-footer a:hover { color: var(--ground); }

/* ---------- reviews ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.review-byline { padding-top: 0; }
.review-status {
  font-family: var(--ui); font-size: 13px; line-height: 1.5;
  color: var(--accent); margin: 12px 0 0;
  border-left: 2px solid var(--accent); padding-left: 10px;
}

/* The hero photograph.

   Capped by HEIGHT, not just width. A portrait frame at full column width is
   around 880px tall on a 800px column, which pushes the headline, standfirst
   and the entire opening of the article off the screen. Constraining the
   height and letting the width follow keeps the whole photograph visible and
   uncropped — the figure shrinks to the image, so the caption sits directly
   under it at the same width rather than running the full column. */
.photo--hero { margin: 30px 0 0; }
.photo--hero figcaption { max-width: 60ch; }

/* Every photograph in a review, hero or inline, is capped the same way: the
   figure shrinks to the image so its caption sits under it at the same width,
   and a tall frame never grows past the viewport. */
.article--railed .photo--hero,
.article--railed .photo--inset { width: fit-content; max-width: 100%; }
/* A fixed cap, not a viewport one: at 68vh the photograph's size depended on
   how tall the window happened to be, which is not a layout. 560px is roughly
   what a landscape frame occupies at this column width, so wide photographs
   are untouched and only tall ones are brought back into proportion. */
.article--railed .photo--hero img { max-height: 560px; width: auto; }
.article--railed .photo--inset img { max-height: 620px; width: auto; }

/* A TALL photograph is a different problem from a big one. Capping its height
   leaves a narrow column of picture with dead space either side, so instead it
   floats and the prose sets around it — which is what a magazine does with a
   portrait frame, and what stops it eating the top of the article. Only
   paragraphs wrap; every structural block clears. */
/* The HERO floats: the opening paragraphs always follow it, so there is always
   prose to set around it. */
.article--railed .photo--hero.photo--tall {
  float: left; width: 44%; max-width: 340px; margin: 8px 34px 20px 0;
}
.article--railed .photo--hero.photo--tall img { max-height: none; width: 100%; }

/* An INLINE tall photograph is a CENTRED PLATE: capped, middle of the column,
   caption underneath at the image's own width.

   Two things were tried first and both left a hole. Floating it only fills
   when prose follows, and a photograph placed just before a heading had
   nothing beside it at all. Pairing it with its caption filled the column on
   paper but left an obvious rectangle of white above the caption. Centring
   makes the leftover space symmetrical, which reads as framing rather than as
   a layout that has gone wrong. */
.article--railed .block-photo .photo--tall {
  float: none;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 34px auto;
}
.article--railed .block-photo .photo--tall img { max-height: 460px; width: auto; }
.article--railed .block-photo .photo--tall figcaption { text-align: center; }

.article-body > .block-heading,
.article-body > .block-photo,
.article-body > .block-gallery,
.article-body > .block-fact_panel,
.article-body > .block-video,
.article-body > .block-affiliate_cta,
.article-body > .block-pull_quote,
.article-body > .block-related_pages,
.article-body > .block-newsletter,
.article-body > .block-ad_slot,
.verdict { clear: both; }

.review-evidence { margin-top: 34px; }

/* The scorecard is a table because the bars alone would encode the scores in
   length and colour only. The number beside each bar is the value; the bar is
   aria-hidden decoration. */
/* Deliberately narrower than the reading column. Stretched to the full 800px
   the label sits at one end and its number at the other, with a long thin bar
   between them — the three parts of one row stop reading as one row. */
.scorecard { width: 100%; max-width: 560px; border-collapse: collapse; margin: 4px 0 0; }
.scorecard th, .scorecard td { padding: 6px 0; vertical-align: middle; }
.scorecard th[scope="row"] {
  font-family: var(--ui); font-size: 13px; font-weight: 400;
  color: var(--ink-dek); text-align: left; width: 108px;
}
.scorecard__bar { padding-left: 16px; padding-right: 16px; }
.scorecard__bar > span {
  display: block; height: 7px; background: var(--ink);
  min-width: 2px;
}
.scorecard tbody .scorecard__bar {
  background-image: linear-gradient(var(--score-track), var(--score-track));
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: calc(100% - 32px) 7px;
}
.scorecard__value {
  font-family: var(--display); font-size: 16px;
  text-align: right; width: 56px; white-space: nowrap;
}
.scorecard__note td {
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint);
  padding: 0 0 8px;
}
.scorecard tfoot th, .scorecard tfoot td { border-top: var(--rule); padding-top: 10px; }
.scorecard tfoot th[scope="row"] {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.scorecard__scheme {
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint);
  padding-left: 16px;
}
.scorecard__overall {
  font-family: var(--display); font-size: 38px; line-height: 1;
  text-align: right; white-space: nowrap;
}
.scorecard__override {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-body);
  border-left: 2px solid var(--accent); padding-left: 12px; margin: 16px 0 0;
}
.verdict__summary { font-size: 18px; line-height: 1.55; color: var(--ink-body); margin: 0 0 18px; }

.evidence { border-top: 2px solid var(--ink); padding-top: 18px; }
.evidence__line { font-size: 15.5px; line-height: 1.6; color: var(--ink-body); margin: 0 0 10px; }
.evidence__updates {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--ui); font-size: 13px; line-height: 1.8; color: var(--ink-quiet);
}

/* Index: a ledger, score first. Capped, because across the full 1440px wrap
   the date ends up a hand's width from the title it belongs to. */
.review-list { list-style: none; margin: 0; padding: 0; }
.reviews-index .review-list { max-width: 1000px; }
.review-list a {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 92px;
  grid-template-areas: "score body date" ". read read";
  align-items: baseline; column-gap: 20px;
  padding: 16px 0; border-bottom: var(--rule);
  color: var(--ink);
}
.review-list a:hover { background: var(--panel); text-decoration: none; }
.review-list a:hover .review-list__title { color: var(--accent); }
.review-list__score { grid-area: score; font-family: var(--display); font-size: 26px; }
.review-list__body { grid-area: body; }
.review-list__title { display: block; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.review-list__where {
  display: block; font-family: var(--ui); font-size: 13px;
  color: var(--ink-quiet); padding-top: 4px;
}
.review-list__date {
  grid-area: date; font-family: var(--ui); font-size: 13px;
  color: var(--ink-meta); text-align: right;
}
.review-list__read {
  grid-area: read; font-family: var(--ui); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  padding-top: 8px;
}
.review-list__empty { color: var(--ink-quiet); padding: 24px 0; }

.related--first { margin-top: 0; }


/* "Elsewhere" links on an author page: 44px targets, readable size. */
.related__list li a, .related__list li span { font-size: 17px; }
.related__list li { padding: 4px 0; }
.related__list li a { display: inline-flex; align-items: center; min-height: 44px; }

/* Secondary prose keeps the site's reading size. Dropping it to 16px because
   it is "supporting" makes the credentials and the practical notes — the two
   things a reader actually checks — the hardest text on the page to read. */
.prose--secondary { font-size: 18px; line-height: 1.65; }

/* ---------- destination atlas: places first; geography as linked context ---------- */

[hidden] { display: none !important; }
.index-head--wide { max-width: var(--measure-read); padding: 48px 0 0; }
.atlas-tools {
  display: flex; justify-content: space-between; align-items: end;
  gap: 28px; margin-top: 38px; padding: 18px 0;
  border-top: 2px solid var(--ink); border-bottom: var(--rule);
}
.atlas-search { flex: 1 1 540px; max-width: 680px; }
.atlas-search label,
.atlas-sort > span {
  display: block; font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-kicker);
}
.atlas-search__control { display: flex; align-items: end; gap: 12px; }
.atlas-search input[type="search"] {
  flex: 1 1 12ch; min-width: 0; height: 48px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 20px/1.2 var(--body);
  -webkit-appearance: none; appearance: none;
}
.atlas-search input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.atlas-search button,
.atlas-empty button {
  min-height: 44px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--ground); font: 600 12px/1 var(--ui);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.atlas-search button:hover,
.atlas-empty button:hover { background: var(--accent); }
.atlas-sort { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.atlas-sort > span { margin-right: 2px; }
.atlas-sort a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-meta); font: 13px/1.2 var(--ui);
}
.atlas-sort a[aria-current="page"] {
  color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent);
}
.atlas-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 18px 0 8px;
}
.atlas-summary {
  margin: 0; color: var(--ink-meta); font: 600 12px/1.4 var(--ui);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.atlas-jumps { display: flex; gap: 18px; flex-wrap: wrap; justify-content: end; }
.atlas-jumps a { color: var(--ink-meta); font: 13px/1.4 var(--ui); }
.atlas-region {
  display: grid; grid-template-columns: minmax(170px, 0.26fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); padding: 38px 0 48px;
  border-top: 2px solid var(--ink); scroll-margin-top: 24px;
}
.atlas-region__head .kicker { margin-bottom: 8px; }
.atlas-region__head h2 { margin: 0; font-size: clamp(30px, 3vw, 43px); line-height: 1; }
.atlas-region__head h2 a { color: var(--ink); }
.atlas-region__head h2 a:hover { color: var(--accent); text-decoration: none; }
.atlas-region__head > p:last-child {
  margin: 14px 0 0; color: var(--ink-meta); font: 13px/1.5 var(--ui);
}
.atlas-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; container-type: inline-size;
}
.atlas-card {
  display: flex; flex-direction: column; min-width: 0; padding: 21px 22px 22px;
  border-top: 3px solid var(--accent); background: var(--panel);
}
.atlas-card__path {
  display: flex; flex-wrap: wrap; gap: 4px 7px;
  color: var(--ink-faint); font: 11px/1.4 var(--ui);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.atlas-card__path a { color: var(--ink-faint); }
.atlas-card h3 { margin: 9px 0 0; font-size: clamp(27px, 3vw, 36px); line-height: 1; }
.atlas-card h3 a { color: var(--ink); }
.atlas-card h3 a:hover { color: var(--accent); text-decoration: none; }
.atlas-card h3 span { color: var(--accent); font-family: var(--ui); font-size: 0.55em; }
.atlas-card__meta {
  margin: 10px 0 0; color: var(--ink-meta); font: 12px/1.5 var(--ui);
  letter-spacing: 0.03em;
}
.atlas-card__intro { margin: 15px 0 0; color: var(--ink-body); font-size: 16px; line-height: 1.5; }
.atlas-card__subjects { margin-top: auto; padding-top: 20px; }
.atlas-card__subjects > p {
  margin: 0 0 5px; color: var(--ink-kicker); font: 600 11px/1.4 var(--ui);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.atlas-card__subjects ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.atlas-card__subjects li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 6px 0; border-bottom: var(--rule); font-size: 15px; line-height: 1.35;
}
.atlas-card__subjects small {
  color: var(--ink-faint); font: 10px/1.2 var(--ui); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.atlas-empty { padding: 42px 0; border-top: 2px solid var(--ink); }
.atlas-empty p { margin: 0 0 12px; color: var(--ink-body); }

@container (max-width: 760px) { .atlas-card__subjects li { align-items: start; flex-direction: column; } }

/* ---------- index pages (filters live in listings.css) ---------- */

.index-head { padding: 44px 0 0; max-width: 720px; }


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

.masthead__search { margin: 0; display: flex; }
.masthead__search { flex: 0 1 auto; min-width: 0; }
.masthead__search input,
.search-form input {
  font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 0 4px; min-height: 44px; width: 130px; min-width: 0;
  border-radius: 0;                      /* iOS rounds search inputs by default */
  -webkit-appearance: none; appearance: none;
}
.masthead__search input { border-bottom: 0; }
.masthead__search input:focus,
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.masthead__search input::placeholder,
.search-form input::placeholder { color: var(--ink-faint); }

.search-page { padding-top: 44px; }
.search-head { max-width: 720px; }
.search-form { display: flex; gap: 14px; align-items: center; padding-top: 8px; flex-wrap: wrap; }
/* min-width: 0 is load-bearing. A flex item will not shrink below its
   min-content width, and an <input>'s is about twenty characters — so on a
   320px screen the field refused to narrow and pushed the Search button off
   the side of the page, where it could not be tapped. */
.search-form input {
  flex: 1 1 12ch; min-width: 0; width: auto;
  font-size: 22px; font-family: var(--body);
}
.search-form button {
  flex: 0 0 auto;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--ground);
  border: 0; padding: 0 20px; min-height: 44px; cursor: pointer;
}
.search-form button:hover { background: var(--accent); }
.search-count {
  font-family: var(--ui); font-size: 13px; color: var(--ink-meta);
  margin: 28px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.search-results { margin-top: 0; }
.search-results__kind {
  grid-area: score;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.search-results a { grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "score body" ". read"; }
.pagination {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  font-family: var(--ui); font-size: 13px; color: var(--ink-meta);
  padding: 28px 0 0;
}
.pagination a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- the quick verdict ---------- */
/* Sits above the photograph and the article, at every width. */

.quick {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 30px 0 0;
  padding: 22px 0 24px;
  border-top: 0;
  border-bottom: 1px solid var(--hairline);
}
.quick__number {
  font-family: var(--display);
  font-variation-settings: var(--display-set);
  font-size: 62px; line-height: 0.9; margin: 0;
}
.quick__number span { font-family: var(--ui); font-size: 15px; color: var(--ink-faint); }
.quick__scheme { font-family: var(--ui); font-size: 13px; margin: 8px 0 0; }
.quick__scheme a { color: var(--ink-meta); }
.quick__body { border-left: 2px solid var(--accent); padding-left: 24px; }
.quick__label {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.quick__verdict {
  font-family: var(--body); font-size: 19.5px; font-weight: 400;
  font-style: italic; line-height: 1.55; color: var(--ink-dek);
  margin: 0 0 20px; max-width: 52ch;
}
.quick__facts { margin: 0; display: grid; gap: 8px; }
.quick__facts > div {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px;
  padding-top: 8px; border-top: var(--rule);
}
.quick__facts dt {
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-kicker);
}
.quick__facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-body); }
.quick__independent { color: var(--ink-meta); }

/* Let the at-a-glance answer finish before the review itself begins. The
   article's own opening margin then adds to this deliberate section break. */
.review-page .article__main { padding-top: 32px; }

/* Review topics are separated by headings and whitespace, not heavy rules.
   The outlined affiliate card remains intact because its border defines an
   actionable component rather than dividing one topic from the next. */
.review-page .fact-panel,
.review-page .verdict,
.review-page .evidence,
.review-page .filed-under {
  border-top: 0;
  padding-top: 0;
}

/* ---------- homepage compositions ---------- */
/* Named, so the mobile rules below can actually reach them. These were inline
   styles, which outrank media queries — the lead column stayed 720px wide on a
   320px phone. WCAG 1.4.10. */

.home-lead {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-top: 40px;
}
.home-lead--text-only { grid-template-columns: minmax(0, 800px); }
.home-lead__image,
.home-lead__image picture { display: block; }
.home-lead__image { width: 100%; max-width: 400px; }
.home-lead__image img { width: 100%; height: auto; }
.home-lead__text { padding-top: 8px; }
.home-lead__headline { font-size: clamp(30px, 4vw, 54px); }
.home-lead__headline a { color: var(--ink); }
.home-lead__headline a:hover { color: var(--accent); text-decoration: none; }
.home-byline { margin-top: 9px; }

/* The lead review answers the two questions that distinguish it from a journal
   entry — what was reviewed and how it scored — without reproducing the full
   scorecard from the article. */
.home-review-highlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--rule);
}
.home-review-highlight__score {
  font-family: var(--display);
  font-variation-settings: var(--display-set);
  font-size: 48px;
  line-height: 0.9;
  margin: 0;
}
.home-review-highlight__score span {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-faint);
}
.home-review-highlight__subject {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: 0 0 3px;
}
.home-review-highlight__verdict {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0;
  max-width: 54ch;
}

.home-empty { padding: 56px 0 0; max-width: 640px; }
.home-empty__note { color: var(--ink-quiet); padding-top: 20px; }

.home-journal { padding-top: 48px; }
.home-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  padding-top: 24px;
}
.home-featured--single { grid-template-columns: minmax(0, 1fr); }
.home-featured--single .home-featured__item {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.home-featured--single .home-featured__text { padding-top: 6px; }
.home-featured__item > a,
.home-featured__item > a picture { display: block; }
.home-featured__item > a img { width: 100%; }
.home-featured__kicker { padding-top: 12px; }
.home-featured__title { font-size: 32px; line-height: 1.08; margin: 0; }
.home-featured__title a { color: var(--ink); }
.home-featured__title a:hover { color: var(--accent); text-decoration: none; }
.home-featured__dek { color: var(--ink-dek); font-size: 17px; margin: 10px 0 0; }
.home-latest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-top: 56px;
}
.home-section-head { border-top: 2px solid var(--ink); padding-top: 14px; }
.home-section-head .kicker { color: var(--ink); margin-bottom: 0; }
.home-section-head--spread {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.home-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-review-archive {
  max-width: 58ch;
  padding: 20px 0;
  border-bottom: var(--rule);
}
.home-review-archive > p:first-child {
  color: var(--ink-body);
  margin: 0;
}
.home-review-archive .read-more { margin-top: 8px; }
.home-destinations { list-style: none; margin: 0; padding: 0; }
.home-destination {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "path meta" "name meta";
  column-gap: 16px; align-items: center; min-height: 66px;
  padding: 10px 0; border-bottom: var(--rule); color: var(--ink);
}
.home-destination:hover { text-decoration: none; }
.home-destination:hover .home-destination__name { color: var(--accent); }
.home-destination__path {
  grid-area: path; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-faint); font: 11px/1.35 var(--ui); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-destination__name {
  grid-area: name; font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 21px; line-height: 1.2;
}
.home-destination__meta {
  grid-area: meta; max-width: 12ch; color: var(--ink-meta);
  font: 12px/1.45 var(--ui); text-align: right;
}

/* The recent-entry row. Title and metadata side by side on desktop, stacked on
   a phone — a fixed 190px metadata column beside a title is unreadable at
   320px. */
.home-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 24px;
  align-items: baseline;
  color: var(--ink);
  padding: 2px 0;
}
.home-row:hover { text-decoration: none; }
.home-row:hover .home-row__title { color: var(--accent); }
.home-row__title { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.home-row__meta {
  font-family: var(--ui); font-size: 13px; color: var(--ink-meta);
  text-align: right;
}

/* `.home-newsletter`, `.home-newsletter__note` and `.newsletter--full` lived
   here until 1 Oct 2026. The homepage band they styled is gone; the in-article
   `.newsletter` block is unaffected. */

/* An explicit read affordance everywhere a listing links out. Hover is not an
   affordance on a touch screen. */
.read-more {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 14px 0 0;
}
.read-more a { color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- responsive ---------- */
/* Verified at 320, 375, 768, 1024 and 1440. WCAG 1.4.10 Reflow requires
   ordinary content to work at 320 CSS pixels without two-dimensional
   scrolling. Every layout below is a named class, because inline styles beat
   media queries and that is precisely how the homepage came to keep a 720px
   column on a 320px screen. */

@media (max-width: 1100px) {
  .article--railed { grid-template-columns: minmax(0, 1fr); max-width: var(--measure-read); margin: 0 auto; gap: 0; }

  /* The rail comes BEFORE the article, not after.
     It used to be order: 2, which was defensible while it held only navigation
     The rail now carries navigation only, while the answer stays in the quick
     verdict and practical facts remain in the article flow. */
  .rail {
    position: static; max-height: none; overflow: visible;
    display: flex; flex-direction: column;
    margin: 0 0 8px; padding-bottom: 20px;
    border-bottom: 2px solid var(--ink);
  }
  .rail__contents { order: -2; }
  .rail__section + .rail__section { margin-top: 26px; }

  .home-latest { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prose, .photo--inset, .verdict, .fact-panel, .affiliate, .newsletter, .related, .video, .pull-quote, .filed-under { max-width: none; }
  .verdict__columns { grid-template-columns: 1fr; gap: 18px; }
  .article--railed .photo--tall,
  .article--railed .photo--hero.photo--tall,
  .article--railed .block-photo .photo--tall {
    float: none; width: auto; max-width: 100%; margin: 24px auto;
  }
  .article--railed .photo--hero.photo--tall img,
  .article--railed .block-photo .photo--tall img { max-height: 62vh; width: auto; margin: 0 auto; }
  .gallery--feature .gallery__grid, .gallery--grid .gallery__grid { grid-template-columns: 1fr; }
  .home-lead { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-lead__image { justify-self: center; }
  .quick { grid-template-columns: 110px minmax(0, 1fr); gap: 22px; }
  .quick__number { font-size: 48px; }
  body { font-size: 18.5px; }
}

/* Featured stories stack here rather than at 900px: two 32px headlines side by
   side in a 800px viewport are already too tight to read comfortably. */
@media (max-width: 800px) {
  .home-featured,
  .home-featured--single .home-featured__item { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home-featured--single .home-featured__item > a {
    width: 100%; max-width: 500px; justify-self: center;
  }
  .home-featured--single .home-featured__text { padding-top: 0; }
  .scorecard { max-width: none; }
  .atlas-tools { align-items: stretch; flex-direction: column; gap: 12px; }
  .atlas-search { flex-basis: auto; max-width: none; }
  .atlas-region { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .atlas-region__head > p:last-child { margin-top: 8px; }
}

/* Below this, any row that reserves a fixed right-hand column has to stack.
   A 190px metadata column beside a title, or a 92px date column beside a
   review name, does not survive a 375px screen. */
@media (max-width: 700px) {
  .atlas-grid { grid-template-columns: minmax(0, 1fr); }
  .quick { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .quick__score { display: flex; align-items: baseline; gap: 14px; }
  .quick__scheme { margin: 0; }
  .quick__body { padding-left: 18px; }
  .quick__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .masthead__search { flex: 1 0 100%; }
  .masthead__search input { width: 100%; }
  .search-form input { font-size: 19px; }

  .home-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .home-row__meta { text-align: left; }

  .review-list a {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "score date" "body body" "read read";
    gap: 4px 14px;
  }
  .review-list__date { text-align: left; align-self: center; }
  .review-list__body { padding-top: 6px; }

  .place-list a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "where" "meta";
    gap: 2px;
  }

  .place-list__meta { text-align: left; }

  .fact-panel__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .scorecard th[scope="row"] { width: 92px; }
  .scorecard__bar { padding-left: 10px; padding-right: 10px; }
  .scorecard tbody .scorecard__bar { background-position: 10px center; background-size: calc(100% - 20px) 7px; }
}

@media (max-width: 500px) {
  .home-review-highlight { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
  .home-review-highlight__score { font-size: 42px; }
  .atlas-search__control { align-items: stretch; flex-direction: column; gap: 8px; }
  .atlas-search button { align-self: start; }
  .atlas-sort { gap: 8px 16px; }
  .atlas-sort > span { flex-basis: 100%; }
  .atlas-summary-row { align-items: start; flex-direction: column; gap: 10px; }
  .atlas-jumps { justify-content: start; }
  .atlas-card { padding: 18px; }
  .home-destination { grid-template-columns: minmax(0, 1fr); grid-template-areas: "path" "name" "meta"; }
  .home-destination__meta { max-width: none; padding-top: 3px; text-align: left; }
}

/* 320px: the WCAG 1.4.10 floor. */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .headline { font-size: clamp(28px, 8.5vw, 38px); }
  .quick__number { font-size: 42px; }
  .masthead { gap: 10px; padding-bottom: 12px; }
  .masthead__nav { gap: 16px; font-size: 13.5px; }
  .masthead__search { flex: 1 0 100%; }
  .masthead__search input { width: 100%; }
  .scorecard__overall { font-size: 30px; }
  body { font-size: 18px; }
}

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

/* ---------- an entry's place in its trip ---------- */

/* The rail lists every part of the trip, numbered, with this one marked. */
.rail__parts { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.rail__parts li { counter-increment: part; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
.rail__parts li::before {
  content: counter(part); font-family: var(--ui); font-size: 12px;
  color: var(--ink-meta); padding-top: 4px;
}
.rail__parts span {
  display: block; padding: 4px 0; font-family: var(--ui);
  font-size: 13px; line-height: 1.45; color: var(--ink);
}

/* Previous / next at the foot of the article, so a trip reads in order
   without going back to the archive. */
.trip-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; clear: both;
  margin-top: 56px; padding-top: 18px; border-top: 2px solid var(--ink);
}
.trip-nav__link { display: flex; flex-direction: column; gap: 4px; color: var(--ink); min-height: 44px; }
.trip-nav__link--next { text-align: right; }
.trip-nav__link:hover { text-decoration: none; }
.trip-nav__link:hover .trip-nav__title { color: var(--accent); }
.trip-nav__label {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.trip-nav__title {
  font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 22px; font-weight: 500; line-height: 1.2;
}
@media (max-width: 600px) {
  .trip-nav { grid-template-columns: minmax(0, 1fr); }
  .trip-nav__link--next { text-align: left; }
}