/* ============================================================================
   Components — and only where the semantics genuinely repeat: masthead,
   actions, photography, disclosure, side notes, fact lists, breadcrumb,
   footer, and the four pieces FC1W introduced from design.md (the section
   anchor navigation, the alternating editorial feature, the travel-tips
   grid and the journey card).

   The rules the whole file is written under, unchanged since FC0A and
   restated by design.md section 2: thin borders and fine rules rather than
   thick containers, no shadow anywhere, square corners, and nothing that
   reads as a floating panel. There is still no universal card. The journey
   card in section 13 is a specific component for a specific object, and it
   is the only bordered box on the site.
   ========================================================================= */

/* ------------------------------------------------------------- 5. MASTHEAD */
/* Formal and restrained, per design.md section 6: a thin utility strip on
   the deepest navy, then the lockup and a small uppercase navigation on
   ivory, separated from the page by two hairlines rather than by one heavy
   rule. The masthead is about 88px tall, which is the top of the range
   design.md asks for, because the lockup carries a descriptor line. */
.utility {
  background: var(--ink-deep); color: var(--river-lift);
  font-family: var(--font-body); font-size: 11px; letter-spacing: .02em;
  border-bottom: 1px solid rgba(183, 150, 88, .30);
}
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 36px; }
.utility p { margin: 0; letter-spacing: .13em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; color: var(--brass-type); }
.utility nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.utility a {
  color: var(--river-lift); text-decoration: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.utility a:hover { color: #fff; border-bottom-color: var(--brass-lift); }
.utility :focus-visible { outline-color: var(--brass-lift); }

.masthead { background: var(--chalk); border-bottom: 1px solid var(--ink-deep); }
.masthead-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 40px; padding: 22px 0 20px; }
/* The second hairline. Gold, and thin enough to read as a detail rather than
   as a second border. */
.masthead::after { content: ""; display: block; height: 1px; background: var(--rule-brass); }

/* The FC monogram, and the name beside it as ordinary type.
   The gap is the clear space docs/FC1X_LOGO_HARMONIZATION.md asks for: about
   20 per cent of the mark's width, which at a 48px mark is a little under
   10px on the inside edge and is held off the navigation by the masthead's
   own column gap. */
.wordmark { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.wordmark .mark { flex: none; display: block; }
.wordmark-name { display: block; }
/* The name is set in the site's own display face, which is the same face the
   horizontal lockup carries as outlines. 500 is the top of the weight range
   the self-hosted Cormorant covers, so it is a real instance rather than a
   synthesised one. */
.wordmark-type {
  display: block; font-family: var(--font-display); font-size: 27px; line-height: 1;
  letter-spacing: -.012em; font-weight: 500; color: var(--ink);
}
.wordmark-sub {
  display: block; font-family: var(--font-body); font-size: 9.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin-top: 7px;
}

.nav { justify-self: end; }
.nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 14px 0; min-height: 44px; display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav a:hover { color: var(--ink-deep); border-bottom-color: var(--brass); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
/* The one rectangular action in the masthead, and it exists because there is
   a real on-site tool behind it. design.md section 6 rules out a decorative
   booking CTA, and this site has nothing to book. */
.nav .nav-finder a {
  background: var(--ink); color: var(--chalk);
  border: 1px solid var(--ink); border-bottom-color: var(--ink);
  padding: 0 20px; min-height: 44px; letter-spacing: .1em;
}
.nav .nav-finder a:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }

.menu-toggle { display: none; }

/* --------------------------------------------------------------- 6. ACTIONS */
/* Rectangular, uppercase, letter-spaced, navy. No pill, no gradient, no
   shadow, and gold is never the ground of a call to action. design.md
   section 14. */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  min-height: 48px; padding: 14px 26px; border-radius: 0;
  /* A label can be as long as "CroisiEurope's own France pages". Capping the
     button at its container lets a long one wrap rather than push the page
     sideways, which is what it did at 360px once Montserrat replaced the
     narrower system fallback. */
  max-width: 100%; flex-wrap: wrap;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.act--primary { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.act--primary:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }
.act--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.act--secondary:hover { background: var(--ink); color: var(--chalk); }
.act--onink { background: transparent; color: var(--chalk); border-color: rgba(247, 244, 238, .55); }
.act--onink:hover { background: var(--chalk); color: var(--ink-deep); border-color: var(--chalk); }
.act[disabled] { opacity: .45; cursor: not-allowed; }

/* A text link with a rule that moves rather than a button that shouts. */
.textlink {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--river-deep); text-decoration: none;
  border-bottom: 1px solid var(--rule-mid); padding-bottom: 4px;
  display: inline-flex; align-items: baseline; gap: 9px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.textlink:hover { color: var(--ink-deep); border-bottom-color: var(--brass); }
.textlink .arw { transition: transform var(--transition-fast); }
.textlink:hover .arw { transform: translateX(4px); }
.section--ink .textlink { color: var(--chalk); border-bottom-color: rgba(203, 176, 125, .5); }
.section--ink .textlink:hover { color: var(--brass-type); border-bottom-color: var(--brass-lift); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* ---------------------------------------------------- 7. PHOTOGRAPHY */
/* The aspect ratio lives on the wrapper as well as on the <img>, so the box
   is the right shape before the file arrives and nothing on the page moves
   while it loads.

   No shadow, no radius, no gradient scrim. A photograph on this site is a
   rectangle with a hard edge, the same as every other element. */
.photo {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--parchment);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--1x1  { aspect-ratio: 1 / 1; }
.photo--4x3  { aspect-ratio: 4 / 3; }
.photo--3x2  { aspect-ratio: 3 / 2; }
.photo--16x7 { aspect-ratio: 16 / 7; }
.photo--21x9 { aspect-ratio: 21 / 9; }
.photo--32x10 { aspect-ratio: 32 / 10; }

/* The one motion allowed on an image: the crop drifts a little under the
   frame on hover, so a linked photograph reads as a link. It is a scale on
   the picture inside a clipped box, never a shadow and never a lift.
   design.md section 19 puts the ceiling at 1.03. */
@media (hover: hover) {
  .photo img { transition: transform 420ms cubic-bezier(.2, .6, .2, 1); }
  a:hover .photo img,
  a:focus-visible .photo img { transform: scale(1.03); }
}

figure { margin: 0; }
figcaption {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--stone);
  padding-top: 12px; border-top: 1px solid var(--rule-hair); margin-top: 14px;
}
figcaption b { color: var(--charcoal); font-weight: 650; }

/* A caption on a dark ground. */
.section--ink figcaption { color: var(--river-lift); border-top-color: rgba(203, 176, 125, .32); }
.section--ink figcaption b { color: var(--chalk); }

/* ------------------------------------------------ 8. DESTINATION HERO */
/* design.md section 7, layout option A: a panoramic image, then the title
   and the introduction beneath it. Option B, the overlaid headline, is not
   used anywhere on this site: none of the fourteen licensed photographs has
   the negative space for it, and design.md permits the overlay only where
   the picture does.

   The hero is a full-bleed block outside `.wrap`, and its height is the crop
   rather than a fixed value, so the composition of the picture survives. */
/* The figure keeps the page ground rather than a dark letterbox: the caption
   below the picture sits on it, and a caption measured against ivory is a
   caption whose contrast can be stated. */
.hero { width: 100%; background: transparent; }
.hero .photo { aspect-ratio: 32 / 10; }
/* The box changes shape with the file. The 640px number is repeated in
   resources/views/components/photo.php, which is what decides which crop is
   downloaded, and the two have to move together. */
@media (max-width: 640px) { .hero .photo { aspect-ratio: 3 / 2; } }
/* The place line sits under the picture rather than over it. An overlaid
   caption cannot be measured for contrast, because what is behind it changes
   with the crop; a caption on the ivory below it can, and it is also where
   design.md section 7 layout option A puts the words. */
.hero-caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px;
  padding: 12px 0 0; margin: 0; border-top: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.hero-caption b { color: var(--charcoal); font-weight: 700; }
/* The credits link in a hero caption. Same size and letter-spacing as the line
   it sits in, underlined only on hover, so it reads as part of the caption
   rather than as a second piece of furniture. */
.hero-caption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-mid); }
.hero-caption a:hover { color: var(--charcoal); border-bottom-color: var(--brass); }

.herohead { padding: clamp(34px, 4.4vw, 62px) 0 0; }
.herohead .display, .herohead .h1 { max-width: 19ch; margin-inline: auto; text-align: center; }

/* ------------------------------------------ 9. SECTION ANCHOR NAVIGATION */
/* design.md section 8. Uppercase, small, fine rules top and bottom, never a
   pill. Sticky on desktop where it does not fight the composition, and
   horizontally scrollable on a phone rather than wrapped onto three lines. */
.dnav {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--chalk);
}
.dnav-track {
  display: flex; justify-content: center; gap: clamp(20px, 3.4vw, 52px);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dnav-track::-webkit-scrollbar { display: none; }
.dnav a {
  display: block; white-space: nowrap;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 17px 0 15px; min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.dnav a:hover { color: var(--ink-deep); border-bottom-color: var(--brass); }
/* The active section. A gold rule, and the label also darkens, because
   design.md section 21 rules out depending on gold alone for state. */
.dnav a[aria-current="true"] { color: var(--ink-deep); border-bottom-color: var(--brass); font-weight: 700; }

@media (min-width: 1025px) {
  .dnav { position: sticky; top: 0; z-index: 6; }
  :target { scroll-margin-top: 72px; }
}

/* -------------------------------------------- 10. EDITORIAL FEATURE */
/* design.md section 9: image about 55 per cent, copy about 45, alternating
   left and right down the run, vertically centred, no radius and no shadow.
   The alternation is a modifier rather than an `nth-child` rule, because the
   runs on this site are not always even in length and the page decides which
   way each row faces. */
.efeatures { display: grid; gap: clamp(48px, 6vw, 92px); }
.efeature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}
.efeature--flip .efeature-art { order: 2; }
.efeature-art figcaption { max-width: 52ch; }
.efeature-copy .eyebrow { margin-bottom: 14px; }
.efeature-copy h3 { margin-bottom: 18px; max-width: 20ch; }
.efeature-copy p { font-size: 16.5px; line-height: 1.72; max-width: 46ch; color: var(--charcoal); }
.efeature-copy > :last-child { margin-bottom: 0; }
.efeature-copy .textlink { margin-top: 6px; }

/* ------------------------------------------------- 11. TRAVEL TIPS */
/* design.md section 10: practical information set on fine vertical dividers
   rather than in cards. The first column carries no left border, so the run
   reads as one ruled band rather than as four boxes.

   Nothing in here carries a temperature or a rainfall figure. FC1W forbids
   fabricating them and this site has no weather source, so the seasonal
   columns carry the character of each season, which is editorial judgement
   and is labelled as such on the page. */
.tipgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-mid);
}
.tipgrid > div { padding: 24px 26px 26px; border-left: 1px solid var(--border); }
.tipgrid > div:first-child { border-left: 0; padding-left: 0; }
.tipgrid dt {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink);
  margin-bottom: 12px; display: block;
}
.tip-when {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-top: 5px;
}
.tipgrid dd { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--charcoal); }

/* The paragraph that opens the tips section, centred to match its heading. */
.tips-intro {
  max-width: 68ch; margin: 0 auto 44px; text-align: center;
  font-size: 16.5px; line-height: 1.7; color: var(--charcoal);
}

/* The month band and the pre-booking checklist, side by side under the
   seasonal columns. */
.tipchart { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4.4vw, 68px); align-items: start; margin-top: clamp(38px, 4.4vw, 62px); }
.tipchart > div > .h3 { margin-bottom: 18px; }

/* The second row: currency, language, gateway and the rest, as uppercase
   label over concise value with no decoration. */
.tipfacts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 34px 0 0;
  border-top: 1px solid var(--rule-mid);
}
.tipfacts > div { padding: 18px 26px 20px; border-left: 1px solid var(--border); }
.tipfacts > div:first-child { border-left: 0; padding-left: 0; }
.tipfacts dt { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.tipfacts dd { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: var(--ink); }

/* ------------------------------------------------ 12. JOURNEY CARDS */
/* design.md section 13, under the FC1W constraints. The card carries an
   image, the programme name, the route, the published duration, the river,
   the operator and the date the source was read, and there is nowhere in it
   to put a fare, a departure date, a review score or a review count. Those
   are not omissions of styling: this site holds none of them, and a card
   with a slot for one would eventually get one.

   Rectangular, one hairline border, no shadow, no radius. */
.journeygrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.journeygrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.journey-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.journey-card .photo { aspect-ratio: 3 / 2; }
.journey-card-body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }

.journey-card-name {
  font-family: var(--font-display); font-size: 26px; line-height: 1.14;
  letter-spacing: -.01em; font-weight: 500; color: var(--ink); margin: 0;
}
.journey-card-route {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  line-height: 1.5; color: var(--charcoal); margin: 12px 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.journey-card-route i { font-style: normal; color: var(--rule-mid); }
.journey-card-route .journey-card-nodur { font-weight: 400; color: var(--stone); }
.journey-card-teaser { font-size: 15.5px; line-height: 1.62; color: var(--charcoal); margin: 14px 0 0; }

/* Structured metadata, without an icon on every row. design.md is explicit
   that this should read as an editorial itinerary card rather than an app
   dashboard. */
.journey-card-meta {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  display: grid; gap: 7px;
}
.journey-card-meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
/* The published-route row. Its label is a whole clause rather than a word,
   because it says which of three different things the operator published, so
   the row stacks and the label sits above the places. */
.journey-card-meta > div.journey-card-meta-stacked { grid-template-columns: 1fr; gap: 4px; padding-top: 3px; }
.journey-card-meta dt { color: var(--stone); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.journey-card-meta dd { margin: 0; color: var(--charcoal); }
.journey-card-meta a { color: var(--river-deep); }

.journey-card-actions {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  /* Pushed to the bottom of the card so a row of cards lines its actions up
     however uneven the copy above them is. */
  margin-top: auto;
}
.journey-card-actions .act { font-size: 11.5px; padding: 12px 18px; min-height: 44px; }

/* The grid carries no fare and says so, once under the run rather than once
   in every card. It is rendered by the component rather than by the page, so
   a new placement of the cards cannot arrive without it. */
.journeys-nofare {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--stone);
  border-top: 1px solid var(--border); padding-top: 14px; margin: 26px 0 0; max-width: 84ch;
}

/* ------------------------------------------------------ 13. PROTOTYPE MARKING */
.protobar, .noticebar { background: var(--parchment); border-bottom: 1px solid var(--brass); font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: #56400F; }
.protobar .wrap, .noticebar .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; gap: 12px; align-items: baseline; }
.protobar strong, .noticebar strong { color: var(--warning); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; font-weight: 700; }

/* Any block whose values are placeholder rather than sourced fact. */
.sample { border-left: 3px solid var(--warning); padding-left: 20px; }
.sample-flag { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warning); display: block; margin-bottom: 10px; }
.sourced { font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--stone); font-variant-numeric: lining-nums; }

.disclosure { font-family: var(--font-body); font-size: 13px; line-height: 1.65; color: var(--charcoal); background: var(--parchment); border-top: 1px solid var(--brass); padding: 18px 22px; }
.disclosure b { font-weight: 650; }

/* ------------------------------------------------------------ 14. SIDE NOTES */
.note { background: var(--parchment); border-top: 2px solid var(--ink); padding: 24px 26px 26px; }
.note .label { display: block; margin-bottom: 12px; color: var(--brass-ink); }
.note p, .note ul { font-size: 15.5px; line-height: 1.65; }
.note > :last-child { margin-bottom: 0; }
.note--wine { border-top-color: var(--brass-ink); }

/* Facts on a ruled baseline, used instead of icon rows. */
.facts { display: grid; border-top: 1px solid var(--ink); margin: 0; }
.facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule-hair); }
.facts 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; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.62; color: var(--charcoal); }

/* Horizontal ruled fact strip. */
.factstrip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-mid); }
.factstrip > div { padding: 18px 26px 20px; border-left: 1px solid var(--border); }
.factstrip > div:first-child { border-left: 0; padding-left: 0; }
.factstrip dt { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.factstrip dd { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--ink); }

/* ---------------------------------------------------------- 15. BREADCRUMB */
/* The breadcrumb owns the space beneath it. It used to set none, so the gap
   between the trail and whatever opened the page was whatever the next block
   happened to supply: 34px on an index page, and nothing at all on the six
   editorial pages and on every page that opens straight into a panoramic
   hero, where the trail sat on the top edge of the photograph. The page
   header compositions have had this figure taken off their own top padding in
   exchange, so no page's total separation changed except the ones that had
   none.

   The padding is set as longhands on purpose. The element is `.crumb wrap`,
   and the shorthand this rule used to carry overrode `.wrap`'s horizontal
   gutter, so the trail sat out of line with the content under it, and flush
   to the viewport edge on any screen narrower than the canvas. */
.crumb {
  font-family: var(--font-body); font-size: 11.5px; letter-spacing: .06em; color: var(--stone);
  padding-top: 20px; padding-bottom: 16px;
}
.crumb ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.crumb li + li::before { content: "/"; color: var(--rule-mid); margin-right: 10px; }
.crumb a { color: var(--stone); text-decoration: none; border-bottom: 1px solid var(--rule-hair); }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--brass); }

/* --------------------------------------------------------------- 16. FOOTER */
/* design.md section 17: a substantial navy footer, a brand statement on its
   own row, then five link groups, then the legal band. 72px of top padding,
   small type, and no oversized social iconography. */
.footer { background: var(--ink-deep); color: var(--river-lift); padding: 76px 0 44px; }
.footer a { color: var(--river-lift); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); }
.footer a:hover { color: #fff; border-bottom-color: var(--brass-lift); }
.footer :focus-visible { outline-color: var(--brass-lift); }

.footer-brand { padding-bottom: 40px; border-bottom: 1px solid rgba(203, 176, 125, .30); display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 56px; align-items: end; }
.footer-brand .wordmark-type { color: var(--chalk); }
.footer-brand .wordmark-sub { color: var(--brass-type); }
.footer-statement {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.34; color: var(--chalk); margin: 0; max-width: 34ch; justify-self: end; text-align: right;
}

.footer-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; padding: 40px 0; border-bottom: 1px solid rgba(203, 176, 125, .30); }
.footer h2 { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-type); font-weight: 700; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: 13px; line-height: 2.1; }

.footer-legal { padding-top: 28px; font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: #b3c1cd; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; }
.footer-legal p { max-width: 84ch; margin: 0 0 10px; }
.footer-legal p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------- 17. COMMERCIAL (FC2) */
/* The only visual addition FC2 makes to the public site. Nothing above this
   line was changed: no token was touched, no existing rule was edited, and
   every declaration below is composed from variables that already existed.

   design.md section 14 governs how an action looks and FC1W governs what may
   appear on a page. Both are obeyed literally here. A commercial call to
   action reuses `.act--secondary`, the site's existing outline action, so a
   paid link is exactly as loud as an editorial one and no louder. There is no
   badge, no accent fill, no shadow, no pill, no countdown, no price and no
   scarcity line, because this site publishes no fares and no availability and
   a commercial button is not permission to start.

   The block renders only when a real approved partner has a real active link
   assigned to the slot. On a site with none, none of this appears at all. */
.commercial { border-top: 1px solid var(--rule-mid); padding-top: 22px; }

.commercial-label { color: var(--brass-ink); margin-bottom: 14px; }

/* Button and explanation on one line where there is room, stacked where there
   is not. `flex-wrap` rather than a media query: the line breaks when the
   words need it rather than at a width somebody guessed. */
.commercial-line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 20px; margin: 0 0 16px;
}
.commercial-line:last-of-type { margin-bottom: 0; }

/* Who the reader is being sent to, and that we may be paid, beside the button
   rather than after the fold. Capped so it wraps to its own line on a phone
   instead of squeezing the action. */
.commercial-where { max-width: 44ch; }

.commercial-disclosure { margin-top: 20px; }