/* ============================================================================
   FrenchCruises.com — production compositions
   Loaded last.

   WHAT THIS FILE IS, AFTER FC1W

   It used to be a stack: FC0B added production states on top of the approved
   FC0A prototype, FC1 added the catalogue compositions on top of that, and
   FC1V added a layer of overrides on top of that again, so the masthead was
   drawn in components.css and then redrawn here, and the profile verdict was
   sized twice in two files. `docs/FC1W_APPLY_DESIGN_MD.md` asks for
   consolidation rather than a fifth layer, so:

     - the FC1V masthead and type overrides were folded back into the rules
       they were overriding, in components.css and base.css, and deleted here;
     - the compositions FC1W replaced were deleted rather than left dark:
       the profile's two-column verdict, the paired-portrait image rhythm, the
       old line and river page heads, the ruled itinerary list;
     - what remains is what it says at the top of each block, and every rule
       in it is reachable from a page this site actually renders.

   Rules for anything added here, unchanged since FC0B and endorsed by
   design.md section 2:
     - it must be built from the tokens;
     - it must be a rule or a type change, not a box, a shadow or a gradient;
     - there is no shadow anywhere and the corners are square;
     - no utility classes. If a rule is not about a named piece of the site,
       it does not belong in this file.
   ========================================================================= */

/* --------------------------------------------------- Footer: pages pending */
/* A river listed in the footer whose guide has not been published yet. It is
   not a link, because linking to nothing is worse than saying so.
   Both values are checked against the footer ground (#0b1f33): 7.1:1 for the
   name and 6.4:1 for the qualifier, so the smaller type still clears AA.
   The qualifier is set off with a comma rather than a dash: the no-em-dash
   rule in docs/FC1V_COPY_STYLE_AMENDMENT.md binds generated content too, and
   this string is prose a reader sees. */
.footer-pending {
  color: #9aa9b6;
  font-style: normal;
}
.footer-pending::after {
  content: ", in preparation";
  color: #90a0ad;
  font-size: 12px;
}

/* --------------------------------------------------- Form validation state */
/* An error summary at the top of a form, and a message under the field it
   belongs to. Both are announced: the summary takes focus on submission and
   the field message is wired to the control with aria-describedby. */
.errorsummary {
  border-top: 2px solid var(--error);
  background: var(--parchment);
  padding: 18px 22px 20px;
  margin-bottom: 32px;
  font-family: var(--font-body);
}
.errorsummary h2 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 650;
  color: var(--error);
  margin-bottom: 10px;
}
.errorsummary ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 14.5px;
  line-height: 1.6;
}
.errorsummary li { margin-bottom: 4px; }
.errorsummary a { color: var(--error); }

.field-error {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--error);
  margin: 0;
}
.field [aria-invalid="true"],
.field select[aria-invalid="true"],
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}

.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  min-height: 168px;
  resize: vertical;
}

/* The honeypot. Off-screen rather than display:none, so a screen reader can
   still reach and skip it, and so a bot that respects display:none is not
   given a free pass. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ Contact page */
.contactpage { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 72px; align-items: start; }
.contactform { max-width: 34rem; }
.contactform .field { max-width: none; }
.confirmation { border-top: 2px solid var(--success); padding-top: 22px; max-width: 40rem; }
.confirmation .label { display: block; color: var(--success); margin-bottom: 10px; }

/* ------------------------------------------------------------ Error pages */
/* Built from the ruled system, not from an illustration. The 404 offers the
   four things a lost visitor most plausibly wanted. */
.errorpage { padding: 72px 0 96px; max-width: 46rem; }
.errorpage .h1 { margin-bottom: 20px; max-width: 16ch; }
.errorpage .standfirst { max-width: 52ch; margin-bottom: 30px; }
.errorcode {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 14px;
}
.errorpage .feature-list { margin-top: 34px; }

/* ------------------------------------------- Comparison: reader-side tradeoff */
/* The two tradeoff headings sit directly under the section's H2, so they are
   H3 elements carrying the `.h4` type treatment. */
.tradeoff h3 { margin-bottom: 8px; }

/* ------------------------------------------------------- Finder: the title */
/* The finder's H1 lives in the step rail: the question headings change as the
   visitor moves through them, and a heading that changes is not a page title.
   The element is an h1 so the page has exactly one, and it is set as a label. */
.steps-title {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 700;
  margin: 0 0 4px;
}

/* ------------------------------------------------- Section opener, narrow */
/* `.opener > .label` sets `white-space: nowrap` so the label and its rule sit
   on one line. That is right at every width the labels were drawn for, and it
   silently overflows the viewport once a label is longer than a narrow phone
   is wide. Below 520px the label is allowed to wrap; the rule follows it down
   and the composition is unchanged everywhere else. */
@media (max-width: 520px) {
  .opener { align-items: start; gap: 12px; }
  .opener > .label { white-space: normal; }
  .opener::after { margin-top: 7px; }
}

/* --------------------------------------------------------- Navigation state */
/* A section item on one of its own child pages. The current-page rule stays
   reserved for the exact page; a page inside the section gets the quieter gold
   rule, so a reader on the Bordeaux guide can see which section they are in
   without being told they are on its index. */
.nav a.nav-section { border-bottom-color: var(--brass); }

/* ===========================================================================
   THE CATALOGUE
   The four river hubs, the six line profiles and the three indexes. Built
   from the tokens, made of rules and type rather than boxes, shadows or
   gradients. The journey card in components.css is the site's only bordered
   box and there is deliberately still no universal card.
   ========================================================================= */

/* ------------------------------------------------------- Route diagrams */
/* Hand-drawn editorial schematics. The type sizes are in viewBox units and the
   drawing is authored portrait so it stays legible when it scales down to a
   phone: at a 320px container the 18-unit place names still render near 14px,
   which is why these are not wide landscape diagrams that would have to be
   scrolled sideways. */
.routemap { max-width: 420px; margin: 0; }
.routemap-art { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-mid); padding: 10px 0 6px; }
.rm { display: block; width: 100%; height: auto; font-family: var(--font-body); }

/* The waterway. One weight, one colour, no gradient: it is a line, not a
   depiction of water. */
.rm-water { fill: none; stroke: var(--river); stroke-width: 2.6; stroke-linecap: round; }
.rm-water--faded { stroke: #8ea3b8; stroke-width: 2; stroke-dasharray: 1 7; }
.rm-water-name {
  fill: var(--river-deep); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; text-anchor: middle;
}

/* Anything reached by road, or not on every sailing. Dashed, never solid: the
   distinction between sailing somewhere and being driven there is the most
   consequential thing these diagrams carry. */
.rm-land { fill: none; stroke: var(--brass-ink); stroke-width: 1.6; stroke-dasharray: 5 5; }
.rm-land-node { fill: var(--brass-ink); }

.rm-tick { stroke: var(--rule-mid); stroke-width: 1; }
.rm-rule { stroke: var(--rule-hair); stroke-width: 1; }
.rm-node { fill: var(--ink); }
.rm-node--gateway { fill: var(--brass-ink); }
.rm-fork { fill: none; stroke: var(--ink); stroke-width: 2; }
.rm-arrow { fill: none; stroke: var(--river); stroke-width: 2.2; stroke-linecap: round; }

.rm-place { fill: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.rm-note { fill: var(--stone); font-size: 13.5px; }
.rm-note--quiet { fill: var(--rule-mid); font-style: italic; }
.rm-key { fill: var(--stone); font-size: 12px; }
.rm-key-swatch { stroke-width: 2.4; }
.rm-caption {
  fill: var(--warning); font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

/* The hub layout that carries a diagram: the map on the left at desktop, the
   route explained beside it. */
.rivermap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: start; }
.rivermap-body > .h3 { margin-bottom: 10px; }
.rivermap-body > p { max-width: 54ch; }

/* --------------------------------------------------------- Index pages */
/* An index is a list with rules and typography. It is never a grid of
   interchangeable rounded cards, on any of the three index pages. */
/* 18px of top padding rather than the 34px this carried before FC4B. The
   breadcrumb above now sets the other 16px itself, so the trail-to-eyebrow
   gap on an index page is unchanged. */
.indexhead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding: 18px 0 40px; }
.indexhead-title .h1 { max-width: 13ch; }
.indexhead-lede { padding-top: 10px; }
.indexhead-lede .standfirst { max-width: 56ch; margin-bottom: 16px; }
.indexhead-lede .small { max-width: 56ch; margin: 0; }

/* ------------------------------------------------ Editorial page headers */
/* About, Contact, How we compare, Privacy, Terms and the affiliate
   disclosure all open on `.riverhead`. It is the stacked sibling of
   `.indexhead`: eyebrow, title, then the lede beneath the title rather than
   beside it, because a single column of prose follows rather than an index.

   Six templates used the composition and no stylesheet defined it, so it
   rendered as three unstyled divs: the breadcrumb sat on the eyebrow, the
   title sat on the standfirst, and the lede ran the full 1180px canvas.

   It sets no bottom padding. The section that follows owns that break, and
   all six pages now open it with `.section--tight`, which is the rhythm every
   other page that starts with a header band already uses. */
.riverhead { padding: 18px 0 0; }
.riverhead-lede { padding-top: 22px; }
.riverhead-lede .standfirst { max-width: 56ch; margin-bottom: 14px; }
.riverhead-lede .small { max-width: 56ch; margin: 0; }

/* The river index: an editorial list, one entry per river, with the
   Loire drawn quieter because it is a special case rather than a fourth equal
   option. Same decision as the homepage index, same reason. */
.riverlist { border-top: 1px solid var(--ink); }
.riverlist-row { display: grid; grid-template-columns: 132px minmax(0, 5fr) minmax(0, 6fr); gap: 28px; padding: 30px 0 28px; border-bottom: 1px solid var(--rule-hair); }
/* The same square cut the homepage index uses, so a reader who has seen one
   recognises the other. The Loire's is smaller because it is a special case,
   not a fourth equal option. The name itself is not: it keeps the shared size,
   weight and line height, so the list reads as one index. */
.riverlist-cut { display: block; align-self: start; padding-top: 4px; }
.riverlist-row--quiet .riverlist-cut { width: 96px; }
.riverlist-name { font-family: var(--font-display); font-size: 32px; line-height: 1.1; letter-spacing: -.014em; font-weight: 500; color: var(--ink); display: block; margin-bottom: 8px; }
.riverlist-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.riverlist-name a:hover { color: var(--river-deep); border-bottom-color: var(--brass); }
.riverlist-places { display: block; font-family: var(--font-body); font-size: 12.5px; letter-spacing: .05em; color: var(--stone); margin-bottom: 14px; }
.riverlist-fit { font-size: 16px; line-height: 1.62; margin: 0 0 14px; }
.riverlist-fit em { font-style: normal; color: var(--stone); font-size: 14.5px; display: block; margin-top: 7px; }
.riverlist-coverage { font-family: var(--font-body); font-size: 13px; line-height: 1.65; color: var(--stone); margin: 0; padding-top: 12px; border-top: 1px solid var(--rule-hair); }
.riverlist-coverage b { color: var(--charcoal); font-weight: 650; }
.riverlist-row--quiet .riverlist-fit { font-size: 15.5px; color: var(--stone); }

/* The cruise-line index: a ruled table of six operators, read down rather than
   across. Same family as the river hub's `.linelist`, with room for the extra
   columns the catalogue verified. */
.linetable { border-top: 1px solid var(--ink); }
.linetable-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 4fr); gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--rule-hair); align-items: start; }
.linetable-name { font-family: var(--font-display); font-size: 25px; line-height: 1.15; color: var(--ink); font-weight: 500; display: block; }
.linetable-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.linetable-name a:hover { color: var(--river-deep); border-bottom-color: var(--brass); }
.linetable-best { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--stone); margin-top: 10px; }
.linetable-fit { margin: 0; font-size: 16px; line-height: 1.62; }
.linetable-facts { margin: 14px 0 0; display: grid; gap: 4px; font-family: var(--font-body); font-size: 12.5px; color: var(--stone); }
.linetable-facts > div { display: grid; grid-template-columns: 132px 1fr; gap: 14px; }
.linetable-facts dt { letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; font-weight: 700; padding-top: 2px; }
.linetable-facts dd { margin: 0; color: var(--charcoal); }
.linetable-act { display: grid; gap: 10px; justify-items: start; }

/* The comparison index: what exists, and an honest account of what does not. */
.cmpindex { border-top: 1px solid var(--ink); }
.cmpindex-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 30px 0; border-bottom: 1px solid var(--rule-hair); align-items: start; }
.cmpindex-title { font-family: var(--font-display); font-size: 27px; line-height: 1.15; color: var(--ink); font-weight: 500; margin: 0 0 10px; }
.cmpindex-title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cmpindex-title a:hover { color: var(--river-deep); border-bottom-color: var(--brass); }
.cmpindex-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--stone); margin: 0; }
.cmpindex-body p { font-size: 16px; line-height: 1.66; margin-bottom: 12px; }

/* The planned comparisons. Not links, because they do not exist yet, and a
   link to nothing is worse than a stated intention. */
.plannedlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-hair); }
.plannedlist li { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule-hair); font-family: var(--font-body); font-size: 14px; color: var(--charcoal); }
.plannedlist span { color: var(--stone); font-size: 12px; letter-spacing: .05em; }

/* ---------------------------------------------------- Cruise-line profile */
/* A buying guide: the verdict first and largest, the sourced facts next, the
   argument after, then what the operator actually publishes. */

/* The metadata line under the profile introduction, centred with it. */
.linehead-checked { justify-content: center; padding-top: 22px; margin-inline: auto; max-width: 74ch; }

/* FC1W's stronger opening verdict. It was a paragraph in a two-column block
   beside a photograph; it is now the first thing under the anchors, set in the
   display face at reading size, on its own rule. The verdict is the page. */
/* Centred as a column and left-aligned as text: the page above it is centred,
   and a left-margin verdict with half the row empty beside it reads as an
   unfinished two-column layout rather than as a deliberate one. */
.verdictlead { border-top: 1px solid var(--ink); padding: 30px 0 0; max-width: 44rem; margin-inline: auto; }
.verdictlead .label { display: block; margin-bottom: 18px; color: var(--brass-ink); }
.verdictlead-body {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: var(--ink);
  margin: 0 0 22px;
}
.verdictlead-note { max-width: 62ch; margin: 0; }

/* The at-a-glance table. Two states and no third: a sourced statement with a
   reference, or a declared gap with the reason in words. There is no dash, no
   tick and no cross anywhere in it. */
.glance { border-top: 1px solid var(--ink); margin: 0; }
.glance > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 16px 0; border-bottom: 1px solid var(--rule-hair); }
.glance dt { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--stone); padding-top: 4px; }
.glance dd { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.66; color: var(--charcoal); }
.glance-open dd { color: var(--stone); }
.glance-open dt { color: var(--warning); }

/* Strengths and tradeoffs: two ruled lists, deliberately the same weight as
   each other. A guide that sets its positives in display type and its
   reservations in small print is an advertisement. */
.casefor { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.casefor > div { padding: 26px 34px 8px; border-left: 1px solid var(--border); }
.casefor > div:first-child { border-left: 0; padding-left: 0; }
.casefor h3 { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brass-ink); margin-bottom: 20px; }
.casefor > div + div h3 { color: var(--stone); }
.caselist { list-style: none; margin: 0; padding: 0; }
.caselist li { padding: 0 0 22px; }
.caselist h4 { margin-bottom: 7px; }
.caselist p { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--charcoal); }

/* Ships, where an operator names one. No rating, and nowhere to put one. */
.shiplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.shiplist li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 28px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule-hair); }
.shiplist b { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); }
.shiplist .ship-figures { font-family: var(--font-body); font-size: 14px; color: var(--ink); font-variant-numeric: lining-nums; }
.shiplist .ship-note { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--stone); }

/* The journeys on a profile are grouped by river, because a line's Seine week
   and its Bordeaux week are two different products. */
.journeys-group + .journeys-group { margin-top: clamp(44px, 5vw, 76px); }
.journeys-group-head { margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-mid); }
.journeys-group-head a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.journeys-group-head a:hover { color: var(--river-deep); border-bottom-color: var(--brass); }

/* The rivers a line publishes for, as a ruled row of onward links rather than
   as coloured pills. design.md rules pills out and so does FC0A. */
.riverchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule-mid); }
.riverchips li { border-bottom: 1px solid var(--rule-mid); flex: 1 1 220px; }
.riverchips li + li { border-left: 1px solid var(--border); }
.riverchips a, .riverchips span {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; min-height: 52px;
  font-family: var(--font-display); font-size: 19px; color: var(--ink); text-decoration: none;
  transition: background-color var(--transition-fast);
}
.riverchips li:first-child a, .riverchips li:first-child span { padding-left: 0; }
.riverchips a:hover { background: rgba(16, 43, 70, .04); color: var(--river-deep); }
.riverchips span { color: var(--stone); }

/* --------------------------------------------------- Review and checked dates */
/* Restrained by policy: a dated line in the same metadata voice the rest of
   the site uses, never a badge, a pill or a coloured chip. */
.reviewline {
  font-family: var(--font-body); font-size: 12px; line-height: 1.65; color: var(--stone);
  font-variant-numeric: lining-nums;
  border-top: 1px solid var(--rule-hair); padding-top: 12px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 24px;
}
.reviewline b { color: var(--charcoal); font-weight: 650; }
/* Attached to the ruled list directly above it rather than ruled again. The
   river index used to draw the last row's bottom border, then a gap, then this
   strip's own top border, which read as two stacked rules with nothing between
   them. The list's own last rule is the separator; the strip sits under it. */
.reviewline--attached { border-top: 0; margin-top: 0; padding-top: 13px; }

/* The Loire's status note. Used once, on the one river that needs it. */
.specialcase { border-left: 2px solid var(--brass); padding: 2px 0 2px 24px; margin: 0; max-width: 46rem; }
.specialcase .label { display: block; margin-bottom: 10px; color: var(--brass-ink); }
.specialcase p { font-size: 16px; line-height: 1.66; }
.specialcase > :last-child { margin-bottom: 0; }

/* ===========================================================================
   PHOTOGRAPHY COMPOSITIONS
   The positions the photography introduced rather than inherited: a wide
   strip inside the reading canvas, and the credits page. Same rules as
   everything above: tokens, rules and type; no box, no shadow, no gradient.
   ========================================================================= */

/* A wide photographic band inside the reading canvas, as opposed to the hero,
   which runs the full width of the viewport. Used where a picture should carry
   a section without taking over the page. */
.riverstrip { margin: 0 0 6px; }
.riverstrip figcaption { max-width: 74ch; }

/* The cruise-line index band sits under the head rather than above it: the
   page opens on the argument, and the picture follows it. */
.indexstrip { margin-top: 26px; }

/* --------------------------------------------------------- Photography page */
/* One row per photograph: what it is, where it is used, who took it and under
   what licence. This is where attribution lives, rather than under every
   picture on the site, and it is the page the CC BY files are credited on. */
.creditlist { border-top: 1px solid var(--ink); margin: 0; }
.creditlist > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 260px);
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-hair);
  align-items: start;
}
.creditlist .photo { width: 132px; }
.creditlist dt {
  font-family: var(--font-display); font-size: 20px; line-height: 1.3;
  font-weight: 500; color: var(--ink);
}
.creditlist dt span {
  display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--stone); margin-top: 8px;
}
.creditlist dd { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.65; color: var(--charcoal); }
.creditlist dd b { display: block; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--stone); font-weight: 700; margin-bottom: 5px; }
.creditlist dd a { overflow-wrap: anywhere; }

/* ===========================================================================
   RESPONSIVE, for everything in this file.
   ========================================================================= */

@media (max-width: 1080px) {
  .rivermap { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; }
  .indexhead { gap: 44px; }
  .linetable-row { gap: 28px; }
}

@media (max-width: 860px) {
  .contactpage { grid-template-columns: 1fr; gap: 40px; }
  .errorpage { padding: 44px 0 64px; }

  /* The diagram goes full width and stays above the prose. It never scrolls
     sideways: it was drawn portrait so that it would not have to. */
  .rivermap { grid-template-columns: 1fr; gap: 30px; }
  .routemap { max-width: none; }

  .indexhead { grid-template-columns: 1fr; gap: 20px; padding: 12px 0 28px; }
  .indexhead-title .h1 { max-width: none; }
  .indexhead-lede { padding-top: 0; }

  /* Compact but still separated: 12px under the breadcrumb and 12px here. */
  .riverhead { padding-top: 12px; }
  .riverhead-lede { padding-top: 16px; }
  .riverhead-lede .standfirst, .riverhead-lede .small { max-width: none; }

  /* The cut leads the entry and the two text columns stack underneath it:
     the same arrangement the homepage index takes. */
  .riverlist-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 0; }
  .riverlist-cut { width: 96px; margin-bottom: 14px; padding-top: 0; }
  .riverlist-row--quiet .riverlist-cut { width: 76px; }
  .riverlist-name { font-size: 26px; }

  .linetable-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .linetable-facts > div { grid-template-columns: 118px 1fr; gap: 12px; }

  .cmpindex-row { grid-template-columns: 1fr; gap: 18px; }

  .glance > div { grid-template-columns: 1fr; gap: 5px; }
  .casefor { grid-template-columns: 1fr; }
  .casefor > div { padding: 22px 0 4px; border-left: 0; border-top: 1px solid var(--rule-mid); }
  .casefor > div:first-child { border-top: 0; padding-top: 22px; }

  .shiplist li { grid-template-columns: 1fr; gap: 5px; }

  .riverchips li { flex-basis: 100%; }
  .riverchips li + li { border-left: 0; }
  .riverchips a, .riverchips span { padding-left: 0; }

  .creditlist > div { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .creditlist .photo { width: 96px; }
  .creditlist dd { grid-column: 2; }
  .creditlist dd:first-of-type { margin-top: 4px; }
}

@media (max-width: 460px) {
  .linetable-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .plannedlist li { grid-template-columns: 1fr; gap: 4px; }
}

/* ===========================================================================
   TOUCH TYPE FLOOR
   Last in the cascade on purpose. design.md section 20 and the FC1W
   acceptance list both put a 16px floor under body copy on a phone, and
   several of the selectors it has to raise are declared earlier in this same
   file, so the floor has to come after them rather than in responsive.css.

   Everything listed is a paragraph, a list item or a sourced statement that a
   reader reads as prose, and most of them sit between 15 and 15.5px on a
   desktop where the measure is wider.

   What is deliberately not listed is not body copy. The eyebrow, the label,
   the breadcrumb, the utility strip, a figure caption, a photograph credit, a
   review-and-checked date line, a table's own annotation and the coverage
   counts are metadata set in the site's metadata voice; raising them to 16px
   would flatten the hierarchy that tells a reader which is which, and WCAG
   sets no minimum size for them.
   ========================================================================= */
@media (max-width: 640px) {
  .small,
  .note p, .note li,
  .glance dd,
  .caselist p,
  .journey-card-teaser,
  .tipgrid dd,
  .linetable-fit,
  .riverlist-fit,
  .riverlist-row--quiet .riverlist-fit,
  .riverindex-row--quiet .riverindex-fit,
  .riverindex-fit,
  .linelist-fit,
  .cmpindex-body p,
  .verdict-facts li,
  .specialcase p,
  .efeature-copy p,
  .finderband-lede,
  .cmpfeature-lede,
  .cmplist li,
  .finderband-steps li,
  .result-cols li,
  .question-help,
  .result-route,
  .errorsummary ul,
  .choice b,
  .choice small,
  .partners-list p,
  .feature-list p,
  .method-list p,
  .journeys-intro,
  .tips-intro,
  .rivermap-body p,
  .shiplist .ship-note,
  .page-compare .prose p,
  .page-compare .prose li,
  .page-compare .facts dd,
  .page-compare .glossary dd,
  .page-compare .tradeoff p,
  .page-compare .note p,
  .page-compare .note li { font-size: 16px; }

  /* The route ribbon is a horizontally scrolled diagram rather than a column
     of prose, but each stop still carries a sentence, so it comes up as far
     as the fixed-width columns allow. */
  .routeline-why { font-size: 15px; max-width: none; }
  .routeline-track { grid-auto-columns: 200px; }
}