/* page-home.css — page-scoped styles for / (2026-09-06). The two booking
   buttons under the benefits band. Lives here, not inline: the origin's CSP
   is style-src 'self'. */
.cta-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.cta-pair-note { margin: -.25rem 0 1.25rem; }

/* Book is the fifth pillar in "On this site" (2026-09-06): a full-width
   feature card under the four, photo left and copy right from the tablet
   breakpoint up, so the newest offer gets the most room rather than the
   least. Five equal columns left each card 192 px wide. */
.card-grid .card-wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .card-grid .card-wide { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; }
  .card-grid .card-wide .card-thumb { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .card-grid .card-wide .card-body { display: flex; flex-direction: column; justify-content: center; }
}

/* Hero dissolve (2026-09-06): a stack of frames behind the hero text,
   positioned like the base .scene-far image and following its parallax.
   Frames dissolve in over 1.6 s; the destination sits bottom right above
   the scrim. */
.hero-scene .scene-stack { position: absolute; left: 0; right: 0; top: -6%; height: 112%; will-change: transform; }
.hero-scene .fade-slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 38%; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-scene .fade-slide.is-on { opacity: 1; }
.hero-place { position: absolute; right: max(var(--space-5), calc((100% - var(--max-width)) / 2)); bottom: var(--space-5); z-index: 2; color: #fff; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; background: rgba(46, 58, 55, .55); padding: .5rem .9rem; border-left: 2px solid #c9a25e; }
.hero-place:hover { background: rgba(46, 58, 55, .8); }
/* 2026-10-05: on a phone the bottom-right corner is where the hero panel's
   Virtuoso line wraps, and the caption sat on top of it and took its taps.
   Below 700px the caption moves to the top-right corner, over open sky. */
@media (max-width: 699px) { .hero-place { top: var(--space-4); bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .hero-scene .fade-slide { transition: none; } }

/* Proof line under the hero (2026-09-06): the Virtuoso review count and
   rate, linked to the profile it is read from. */
.hero-panel .proof-line { margin: var(--space-3) 0 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: #ecd9b8; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); }
.hero-panel .proof-line a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(236, 217, 184, .7); }
.hero-panel .proof-line a:hover { border-bottom-color: currentColor; }
.proof-sep { margin: 0 .6em; opacity: .6; }
/* Meet Jeannie band: her photograph beside two lines and a link to About. */
.meet-band { padding: var(--space-8) 0; background: #fdf7ec; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.meet-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 700px) { .meet-grid { grid-template-columns: 260px 1fr; gap: var(--space-8); } }
.meet-photo { margin: 0; width: 220px; max-width: 60vw; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(46, 58, 55, .14); justify-self: center; }
@media (min-width: 700px) { .meet-photo { width: 260px; justify-self: start; } }
.meet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.meet-kicker { margin: 0 0 var(--space-2); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-coral-deep); }
.meet-body h2 { margin: 0 0 var(--space-3); padding: 0; }
.meet-body h2::before { display: none; }
.meet-body p { max-width: 38em; }
.meet-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-4) 0 0; }
.meet-more { color: var(--color-coral-deep); text-decoration: none; border-bottom: 1px solid rgba(122, 90, 58, .4); }
.meet-more:hover { border-bottom-color: currentColor; }
.film-sep { margin: 0 .7em; opacity: .6; }

/* The closing call-to-action block is text-centred, but the global paragraph
   measure (p { max-width }) left each paragraph hugging the left edge of the
   wrap, so the buttons, their note and the social row sat off-centre.
   Centre the capped paragraphs themselves. (Restored 2026-09-06 after the
   photo-band rewrite dropped it.) */
.section.text-center p { margin-left: auto; margin-right: auto; }

/* Featured trip report under the hero (Steve, 2026-09-20: "something that stands
   out and drives people to that link, like a picture of the boat"; he chose the
   postcard strip of three mock-ups). A driftwood-ink band, the ship in a
   brass-edged frame, the itinerary as a fact line, and the report's hero
   coordinates in the same brass (#c9a25e) as the LL emblem. Re-point it to the
   next report by editing the one <section class="feat-strip"> in index.html. */
.feat-kicker { margin: 0; font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: #c9a25e; display: flex; align-items: center; gap: .7em; font-weight: 600; }
.feat-kicker::before { content: ""; width: 2.2rem; height: 1px; background: #c9a25e; flex: none; }
.feat-title { margin: 0; font-weight: 600; letter-spacing: var(--track-display); line-height: 1.05; }
.feat-title em { font-style: italic; font-weight: 500; }
.feat-dek { margin: 0; max-width: 40rem; line-height: 1.55; }
.feat-coords { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1.1em; margin: 0; }
.feat-coords .coord { color: #c9a25e; font-weight: 500; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(1.15rem, 1.6vw + .5rem, 1.6rem); }
.feat-coords .coord small { font-size: .55em; font-weight: 400; letter-spacing: .14em; margin-left: .3em; vertical-align: .5em; }
.feat-coords .place { flex-basis: 100%; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; margin-top: .1em; }
.feat-coords svg { width: 1.2em; height: 1.2em; align-self: center; flex: none; }
.feat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-2) 0 0; }
.feat-more { text-decoration: none; border-bottom: 1px solid rgba(201, 162, 94, .7); }
.feat-more:hover { border-bottom-color: currentColor; }

.feat-strip { display: grid; grid-template-columns: 1fr; margin: var(--space-7) 0 var(--space-8); background: var(--color-ink); color: var(--color-on-dark); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .feat-strip { grid-template-columns: 1fr 380px; } }
.feat-strip .feat-body { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: center; order: 2; }
@media (min-width: 760px) { .feat-strip .feat-body { order: 1; padding: var(--space-6) var(--space-7); } }
.feat-strip .feat-photo { margin: 0; order: 1; position: relative; aspect-ratio: 16 / 10; padding: var(--space-4); }
@media (min-width: 760px) { .feat-strip .feat-photo { order: 2; aspect-ratio: auto; } }
.feat-strip .feat-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; border: 1px solid rgba(201,162,94,.55); padding: 6px; box-sizing: border-box; background: var(--color-ink); }
.feat-strip .feat-title { font-size: clamp(1.4rem, 1.9vw + .5rem, 2.1rem); }
.feat-strip .feat-title em { color: #ecd9b8; }
.feat-strip .feat-dek { color: var(--color-on-dark-muted); }
.feat-strip .feat-facts { margin: 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-on-dark-muted); line-height: 1.8; }
.feat-strip .feat-facts .sep { color: #c9a25e; margin: 0 .5em; }
.feat-strip .feat-coords .coord small, .feat-strip .feat-coords .place { color: var(--color-on-dark-muted); }
.feat-strip .feat-more { color: #fff; }