/* ============================================================
   Dinner Cruises in Fort Lauderdale - Phase 3 Design System
   IDENTITY: "Sunshine Reef" (locked at the Phase C gate, 2026-09-04, per Oleg: "more into
   turquoise/yellow schema like florida" - replaces the earlier "Lauderdale Twilight" proposal).
   Icy pale aqua-white ground (morning sea-glass), deep teal-charcoal ink, a true Florida
   turquoise for links and structural fills, a sunshine-yellow accent reserved for the one CTA
   (dark ink text on yellow, not white - yellow can't carry white text at AA contrast), a deep
   ocean-blue for secondary structure (rules/icons/hovers, kept a distinct hue lane from the
   turquoise brand), warm amber-bronze gold for real ratings only (deliberately duller than the
   bright CTA yellow so the two never get confused), and dark teal-black night bands (hero,
   stat grid) with warm sand-cream text so the page still carries a hit of sunshine after dark.
   Checked against every live/building dinner-cruise sibling for collision (Miami: champagne
   cream/sunset-red/coral; San Diego: warm ivory/near-black midnight-teal/amber; Boston: warm
   parchment/midnight-navy/brass) - none use turquoise or a bright yellow CTA.
   Serif display over a plain sans body (menu-card register), uppercase letter-spaced sans for
   eyebrows, category links and buttons. Flat, hairline-bordered cards, 4px radii, no shadows.
   Split hero with the booking panel above the fold; single-bar centered-brand nav.
   Mobile-first, zero heavy deps, system fonts (no webfont, LCP protected).
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Sunshine Reef" (site.config.md, locked 2026-09-04). ---- */
  --ink:        #10302B;   /* primary text: deep teal-charcoal, sea-glass at night */
  --ink-soft:   #3F5C56;   /* secondary text: muted teal-grey (6.9:1 on --paper) */
  --paper:      #F3FBFA;   /* page ground: icy pale aqua-white */
  --paper-2:    #E3F3F0;   /* raised panels, aqua-wash bands, table headers */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #FAFEFD;   /* inputs, zebra rows */
  --line:       #CFE7E2;   /* hairline borders on light */
  --brand:      #0B7D79;   /* Florida turquoise: links (underlined), structural fills (5.1:1) */
  --brand-deep: #075E5B;   /* deeper turquoise: btn-brand hover */
  --accent:     #F2B705;   /* sunshine yellow - CTA (dark ink text, ~11:1) ONLY */
  --accent-deep:#D9A400;
  --accent-ink: #10302B;   /* dark ink text on --accent - white would fail contrast on yellow */
  --sea:        #175D72;   /* deep ocean blue - secondary structure: rules, icons, hovers (7.8:1) */
  --sea-deep:   #124A5A;   /* darker ocean blue for hover/active states */
  --gold:       #C08A2E;   /* amber-bronze - real ratings only, kept distinct from the CTA yellow */
  --gold-soft:  #F6E8C8;   /* gold wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #5C4212;   /* text colour that sits on --gold-soft */
  --gold-bright:#E8B94A;   /* brighter gold for eyebrows, rules and numbers on night bands */
  --slate:      #5C7A75;   /* muted teal-grey: sparing tertiary tint/borders */
  --night:      #0A2A27;   /* night reef: hero base, footer, dark bands (dark teal, not navy) */
  --night-2:    #123B37;   /* raised surface on night */
  --night-ink:  #F7EFD9;   /* warm sand-cream text on night bands - a hit of sunshine after dark */
  --footer:     #0A2A27;   /* footer fill (same dark teal) */
  --ok:         #2E7D5B;
  --warn:       #9A5A1E;

  /* ---- TYPE - high-contrast serif display (dinner-menu register) over a plain sans body.
     System stacks, no webfont (protects LCP). ---- */
  /* Display stack, reset 2026-09-05 (Oleg: "font is weird"). The donor led with Didot and
     Bodoni 72: ultra-high-contrast Mac-only display faces whose hairline strokes read thin and
     odd at heading sizes, and which fall back to something completely different off macOS, so
     the site looked like two different brands depending on the machine. Georgia-first is warm,
     universally installed and renders identically everywhere; the remaining faces are
     same-flavour fallbacks, not a different register. */
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale */
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3.2vw, 4.6rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* flat, hairline-bordered surfaces: menu-card corners, no shadows */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: none;
}

/* ---- RESET-ISH ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
h1,h2 { font-family: var(--display); line-height: 1.05; letter-spacing: -.01em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.2; letter-spacing: 0; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: var(--s6); }
h3 { font-size: var(--step-1); margin-top: var(--s4); }
p { margin: 0 0 var(--s3); max-width: 64ch; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- LAYOUT ---- */
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.section { padding-block: var(--s6); }
.section + .section { padding-top: 0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:50; font-weight:700; }
.skip-link:focus { left:8px; top:8px; }

/* ---- FULL-BLEED BANDS on a .section.wrap (keeps the 4.5 section convention): the background
   is painted edge to edge with a box-shadow and clipped to the section's own height. ---- */
.section.band-night, .section.band-linen { padding-block: var(--s6); margin-top: var(--s5); clip-path: inset(0 -100vmax); }
.section.band-night { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); color: var(--night-ink); }
.section.band-linen { background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); }
.section.band-night h2, .section.band-night h3 { color: #fff; }
.section.band-night p { color: var(--night-ink); }
.section.band-night a { color: var(--gold-bright); }

/* ---- CTA ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--body); font-weight:800; font-size: .84rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .9rem 1.5rem; border-radius: var(--radius); text-decoration:none; border:0; cursor:pointer;
  min-height: 48px; transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); }
.btn-brand { background: var(--brand); color:#fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border:1.5px solid var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---- HEADER / NAV: centered-brand (V3.1 Design Director, 2026-09-03).
   One bar: the serif wordmark in the middle, the site's cruise groups on its left, the site
   pages on its right, the CTA as the far-right item (the menu-card composition). Under 1000px
   both link groups collapse into one dropdown driven by base.html's existing
   .nav-toggle / #nav-links data-open script; the toggle sits left, the CTA right. ---- */
/* 2026-09-05: was rgba(251,245,234,.94) -- the DONOR's champagne-cream paper, left behind when
   the palette was reset to "Sunshine Reef". It sat as a warm cream band on top of this site's
   icy aqua-white ground on every page. Now derived from this site's own --paper. */
.site-header { position: sticky; top:0; z-index:40; background: rgba(243,251,250,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav { display:grid; grid-template-columns: 1fr auto 1fr auto; grid-template-areas: "left brand right cta"; align-items:center; column-gap: var(--s4); padding-block:.75rem; }
/* 2026-09-05 (site-recheck f-040/041/050/051/052, mech+vision agreement): a 4-word brand phrase
   ("Dinner Cruises in Fort Lauderdale") with white-space:nowrap and no min-width in a CSS grid
   track never shrinks below its intrinsic width, so it either overflowed the 390px viewport
   (grid forced wider than .wrap, scrollWidth > innerWidth) or, at desktop widths where .wrap
   still caps at var(--maxw)=72rem, overlapped the right nav group ("Fort Lauderdale" running
   into "GUIDES"). min-width:0 lets the grid track actually shrink; a hard max-width plus
   overflow:hidden/ellipsis is the backstop so the header can never force page-level overflow
   again, on this site or a future one whose EMD brand phrase is this long. */
/* 2026-09-05 (Oleg: "logo no need for letters"): the header brand is now the MARK ONLY, so all
   of the wordmark-shrinking machinery above is gone with it -- a 40px square can never force
   page overflow or collide with the nav groups at any width. */
/* SCOPED to .site-header on purpose: the FOOTER reuses .brand for the sitewide brand-anchor
   link ("Dinner Cruises in Fort Lauderdale" -> /), which is a standing requirement and must keep
   its wordmark and normal text rendering. An unscoped rule here silently collapsed it. */
.site-header .brand { grid-area:brand; justify-self:center; min-width:0; display:inline-flex; align-items:center; text-decoration:none; line-height:0; }
.site-header .brand:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:50%; }
.brand-logo { width:40px; height:40px; display:block; }
@media (max-width: 360px) { .brand-logo { width:34px; height:34px; } }
.brand b { color: var(--accent); font-weight:700; }
.nav-cta { grid-area:cta; min-height:40px; padding:.55rem 1rem; font-size:.74rem; }
.nav-links { display:contents; }
.nav-group { display:flex; gap:1.4rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-group--left { grid-area:left; justify-content:flex-end; }
.nav-group--right { grid-area:right; justify-content:flex-start; }
.nav-group a { display:inline-block; padding:.3rem 0; font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; }
.nav-group--right a { color:var(--ink-soft); font-weight:700; }
.nav-group a:hover { color:var(--brand); border-bottom-color:var(--accent); }
.nav-group .nav-cta-mobile { display:none; }
.nav-links a.btn-brand, .nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; grid-area:toggle; background:none; border:0; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); padding:0; place-items:center; }
.nav-toggle svg { width:26px; height:26px; }
@media (max-width: 1000px) {
  .nav { grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand cta"; padding-block:.5rem; column-gap:var(--s2); }
  .nav-toggle { display:grid; }
  .nav-links { display:none; position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; }
  .nav-links[data-open="true"] { display:flex; }
  .nav-group { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.3rem; }
  .nav-group a { padding:.45rem 0; border-bottom:0; font-size:.82rem; }
  .nav-group--right { border-top:1px solid var(--line); padding-top:.9rem; width:100%; }
}
@media (max-width: 520px) {
  .nav-cta { display:none; }
  .nav-group .nav-cta-mobile { display:block; width:100%; margin-top:.4rem; }
  .nav-group .nav-cta-mobile .btn { width:100%; }
}

/* ---- BREADCRUMB ---- */
.crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-current] { color: var(--ink); font-weight:600; }

/* ---- HERO: DUSK SPLIT (split-hero-booking / hero-split-media-panel, approved blueprint 2026-09-03).
   Night-navy band. Left: eyebrow, H1, lede, proof, secondary actions. Right: a white panel that
   stacks the hero image over the compile-emitted booking panel, so the real booking CTA is above
   the fold. On mobile the H1 column comes first and the panel drops below it. ---- */
.hero-dusk { background: radial-gradient(120% 90% at 12% 0%, #2B2A55 0%, var(--night-2) 45%, var(--night) 100%); color: var(--night-ink); border-bottom: 3px solid var(--accent); }
.hero-dusk-inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s5); align-items:center; padding-block: var(--s6); }
.eyebrow { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--gold); font-weight:800; margin-bottom:var(--s2); }
.hero-dusk .eyebrow { color: var(--gold-bright); }
.hero-dusk h1 { color:#fff; max-width: 14ch; margin-bottom: var(--s3); }
.hero-dusk .lede { color: rgba(246,238,220,.84); max-width: 50ch; }
.hero-dusk .cta-proof { color: rgba(246,238,220,.92); }
.hero-dusk .cta-proof .gold { color: var(--gold-bright); }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--s3); align-items:center; margin-top: var(--s4); }
.hero-ghost { color:#fff; border-color: rgba(246,238,220,.55); }
.hero-ghost:hover { border-color:#fff; color:#fff; }
.hero-link { color: var(--gold-bright); font-weight:600; text-underline-offset:4px; }
.hero-panel { background: var(--surface); color: var(--ink); border-radius: var(--radius); overflow:hidden; border:1px solid rgba(246,238,220,.2); }
.hero-media { aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); }
.hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.section-media { aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); margin: var(--s3) 0 var(--s4); }
.section-media img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-panel .hero-media { border-radius:0; }
.hero-panel .booking-panel { border:0; border-radius:0; box-shadow:none; }
@media (max-width: 860px) {
  .hero-dusk-inner { grid-template-columns:1fr; gap:var(--s4); padding-block: var(--s5); }
  .hero-dusk h1 { max-width:none; }
}
@media (max-width: 640px) { .hero-actions .btn { width:100%; } }

/* ---- SECTION HEADING RULE: a short coral bar above each section H2 (menu-card rule) ---- */
.section > h2:first-child, .rule-h2 { position:relative; padding-top: var(--s3); border-bottom:0; }
.section > h2:first-child::before, .rule-h2::before { content:""; position:absolute; top:0; left:0; width:3rem; height:3px; background: var(--accent); }
.section.band-night > h2:first-child::before { background: var(--gold-bright); }
.section h2:first-child { margin-top: 0; }

/* ---- QUICK ANSWER (answer-first) ---- */
.quick-answer { background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s3); }
.quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; }
.quick-answer p + p { margin-top: var(--s3); font-size: var(--step-0); }
.quick-answer .qa-label { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--gold); margin-bottom:var(--s2); font-weight:800; }
.quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4); }
.quick-answer-box p:first-child { margin-top:0; }
.quick-answer-box p:last-child { margin-bottom:0; }

/* ---- KEY TAKEAWAYS ---- */
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.takeaways-list li { position:relative; padding-left:1.6rem; line-height:1.5; max-width:70ch; }
.takeaways-list li::before { content:""; position:absolute; left:0; top:.6em; width:.55rem; height:.55rem; background:var(--accent); border-radius:50%; }

/* ---- KEY FACTS TABLE ---- */
.keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.keyfacts th { width:42%; font-family:var(--body); font-weight:700; color:var(--ink); background:var(--paper-2); }
.keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .keyfacts th { min-width: 9rem; }
}

/* ---- PRODUCT CARD (money component) ---- */
.product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.product-card .pc-media { background:var(--paper-2); overflow:hidden; }
.product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:var(--radius-sm); }
.pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }

/* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */
.stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; }
.stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; }
.stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; }
.stars .stars-fill::before { content:"★★★★★"; color:var(--gold); letter-spacing:2px; }
.stars-num { font-weight:700; color:var(--ink); }
.trust .stars { font-size:1.15rem; margin-top:.2rem; }
.pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; font-family:var(--body); }
@media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } }

/* ---- PRICING & INCLUSIONS ---- */
.incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.incl ul { list-style:none; padding:0; margin:0; }
.incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; }
.incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.incl .no::before  { content:"✕"; position:absolute; left:0; color:var(--accent); font-weight:800; }
@media (max-width:600px){ .incl{ grid-template-columns:1fr; } }

/* ---- ITINERARY ---- */
.timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); }
.timeline li { position:relative; padding:0 0 var(--s4) var(--s4); }
.timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); }
.timeline .t { font-family:var(--body); font-weight:700; }

/* ---- PROS / CONS ---- */
.proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.proscons h3 { margin-top:0; }
.proscons ul { padding-left:1.1rem; margin:0; }
.proscons li { margin-bottom:.5rem; }
.proscons .pros { border-top:3px solid var(--ok); }
.proscons .cons { border-top:3px solid var(--accent); }
@media (max-width:600px){ .proscons{ grid-template-columns:1fr; } }

/* ---- AUTHOR EXPERIENCE ---- */
.author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; }
.author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); }
.author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
@media (max-width:600px){ .author-block{ grid-template-columns:1fr; } }

/* ---- TRUST STRIP ---- */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--gold); }
.trust .lbl { font-size:var(--step--1); color:var(--ink-soft); }
@media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } }

/* ---- FAQ (FAQPage) ---- */
.faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; }
.faq summary { font-family:var(--body); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; }
.faq details[open] summary::after { content:"−"; }

/* ---- RELATED TOURS ---- */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.related .rcard .rc-body { padding:var(--s3) var(--s4); }
@media (max-width:600px){ .related{ grid-template-columns:1fr; } }
/* 3-up card grid (homepage / hubs): flat, hairline-bordered, vertical image-top cards */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.cards-3 .rcard .rc-body .btn { margin-top:auto; }
@media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } }
/* 2026-09-05 (Oleg: "do two cards horizontally same lane, otherwise no proper image visible").
   A 3-column grid holding only TWO cards left each card at a third of the lane with a dead gap
   on the right, which shrank the 4:3 card image to the point it read as decorative. This site
   has exactly 2 real tours, so every tour-card grid hits that case. :has() applies the 2-column
   layout only when the grid really holds exactly two cards, so a 3-card grid elsewhere (and the
   1- or 6-card groups on the guides hub) is untouched. Kept inside min-width:821px so it can
   never outrank the single-column mobile rule above (a :has() selector would otherwise win on
   specificity, since a media query adds none). */
@media (min-width:821px){
  .cards-3:has(> .rcard:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }
}

/* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */
.pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }
.pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:var(--radius-sm); }
.pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; }
.pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; }
.rc-media, .pc-media { position:relative; }
.pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-sm); }
.cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--accent); border-top:3px solid var(--accent); }

/* ---- CTA BANNER (night band, gold rule) ---- */
.cta-banner { background:linear-gradient(120deg, var(--night-2), var(--night)); border:1px solid var(--night); border-top:3px solid var(--gold-bright); color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:rgba(246,238,220,.84); max-width:52ch; margin-inline:auto; }

/* ---- AVAILABILITY WIDGET (date -> affiliate check) ---- */
.availability { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.availability .av-label { font-family:var(--body); font-weight:700; color:var(--ink); }
.availability .av-date { padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; min-height:48px; background:var(--surface-2); color:var(--ink); color-scheme:light; }
.availability .av-go, .availability .av-check { margin-left:auto; }
.availability .av-msg { width:100%; margin:.3rem 0 0; color:var(--ok); font-weight:600; }
@media (max-width:560px){ .availability .av-go, .availability .av-check { margin-left:0; width:100%; } }
/* GetYourGuide live availability widget container (gyg_widget token, guide/blog pages) */
.gyg-avail { margin: var(--s5) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding: var(--s3); max-width:none; }

/* ---- FOOTER (the one deepest surface, night bay navy) ---- */
.site-footer { background:var(--footer); color:#D9D3C4; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:3px solid var(--gold-bright); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#EDE6D6; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; color:var(--gold-bright); }
.site-footer h4, .site-footer .footer-h { font-family:var(--display); font-weight:700; font-size:var(--step-0); color:#fff; margin:0 0 var(--s2); }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:.4rem; }
.socials { display:flex; gap:.8rem; margin-top:var(--s3); }
.socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(246,238,220,.28); border-radius:50%; }
.socials a:hover { border-color:var(--gold-bright); color:var(--gold-bright); }
.disclosure { font-size:var(--step--1); color:#B7B0A2; border-top:1px solid rgba(246,238,220,.18); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); }
.author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; }
.prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--paper-2); font-family:var(--body); font-weight:700; color:var(--ink); }
.prose tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table { min-width: 640px; }
}
.prose a { color:var(--accent); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; }
.prose a.btn-brand { color:#fff; }
.prose a.btn-ghost { color:var(--ink); }
/* Hotel affiliate pill (Expedia via Travelpayouts): champagne gold + outline so it reads as a
   secondary lodging action, distinct from the coral tour buttons. Explicit colors defeat the
   .prose a override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--body); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:var(--radius); border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold-ink); border-color:var(--gold-ink); color:#fff; text-decoration:none; }
.hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hotel-row .hr-name { font-weight:700; color:var(--ink); }
.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; }
.blog-cta h2 { margin-top:0; }
.blog-cta p { margin-bottom:var(--s3); }
.blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* ---- INFOGRAPHIC (generated SVG) ---- */
.infographic { margin:var(--s4) 0; }
.infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; }
.infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); }
.embed + p, .embed + p.small, .video-grid + p { max-width:none; }

/* information-gain block: fresh, sourced data competitors don't carry */
.infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; }
.infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); }
.infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:var(--radius-sm); letter-spacing:.03em; text-transform:uppercase; }
.infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.infogain li { position:relative; padding-left:1.5rem; max-width:66ch; }
.infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); border-radius:50%; }
.infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; }
.infogain .src a { color:var(--ink-soft); }
.infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; }

/* ---- EMBEDS (interactive map + videos) ---- */
.embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } }

/* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */
.btn-xl { font-size: .96rem; padding: 1.05rem 1.9rem; }
@media (max-width: 430px) { .btn-xl { font-size: .84rem; padding: .95rem 1.2rem; } }
.cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; }
.cta-proof .gold { color: var(--gold); font-weight:700; }
.cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; }
.cta-box .cb-h { font-family:var(--display); font-weight:700; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; }
.cta-box p { max-width:44ch; margin-inline:auto; }
.cta-box p:last-child { margin-bottom:0; max-width:none; }
.cta-box .btn { margin-top:.5rem; }
.cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); }
@media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } }
/* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */
.sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(251,245,234,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s ease; }
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta .sc-proof { font-size:var(--step--1); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sc-proof .gold { color:var(--gold); font-weight:700; }
.sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; white-space:nowrap; flex:0 0 auto; }
@media (min-width: 761px) {
  .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid var(--line);
    border-radius:var(--radius); padding:.5rem .6rem .5rem 1.1rem; }
  /* article pages (blog/guides): full-width bottom bar on desktop too, like mobile */
  body.article .sticky-cta { left:0; right:0; bottom:0; border-radius:0; border:0;
    border-top:1px solid var(--line); padding:.55rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } }

/* ---- TESTIMONIALS (real GetYourGuide/Viator reviews, verbatim) ---- */
.reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.review-card .stars { font-size:.95rem; }
.review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; }
.review-card blockquote p { max-width:none; margin:0; }
.review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); }
.review-meta strong { color:var(--ink); }
@media (max-width:760px){ .reviews{ grid-template-columns:1fr; } }

/* utility */
.lede { font-size:var(--step-1); color:var(--ink-soft); }
.small { font-size:var(--step--1); color:var(--ink-soft); }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.text-center{text-align:center}

/* ============================================================
   SITE-SPECIFIC LAYER, "Champagne and Dusk" additions inherited from the structural donor site
   ============================================================ */

/* ---- CATEGORY GRID (cruise-type hubs on the homepage): flat, hairline, coral left rule ---- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.cat-card { display:flex; flex-direction:column; gap:.3rem; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .08s ease; }
.cat-card:hover { border-left-color:var(--sea); transform:translateY(-2px); }
.cat-card .cc-name { font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.15; }
.cat-card .cc-meta { font-size:var(--step--1); color:var(--ink-soft); }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */
.pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); }
.pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem;
  letter-spacing:.03em; text-transform:uppercase; }

/* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */
.honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; }
.honesty .h-h { font-family:var(--display); font-weight:700; font-size:var(--step-1);
  margin:0 0 var(--s2); max-width:none; color:var(--ink); }
.honesty p:last-child { margin-bottom:0; }
.prose .honesty p { max-width:none; }

/* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */
.tour-list { display:grid; gap:var(--s3); }
.tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.tour-row.is-lead { border-color:var(--accent); border-top:3px solid var(--accent); }
.tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); }
.tour-row h3 a { color:var(--ink); text-decoration:none; }
.tour-row h3 a:hover { color:var(--brand); }
.tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; }
.tour-row .tr-desc { margin:0; max-width:58ch; }
.tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; }
.tour-row .tr-price { font-family:var(--display); font-weight:700; font-size:var(--step-1); white-space:nowrap; }
.tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; }
@media (max-width:760px){
  .tour-row { grid-template-columns:1fr; }
  .tour-row .tr-cta { align-items:stretch; text-align:left; }
  .tour-row .tr-cta .btn { width:100%; }
}

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--accent); padding-left:.7rem;
}
.tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } }
.tour-picks .tp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; }
.tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--brand); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:.78rem; padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

/* ---- v2.1: card-style mid-article CTA (image + body) ---- */
.cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; }
.cta-box.cta-card .cb-media { display:block; }
.cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
.cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; }
.cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); }
@media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } }
/* category card: who-it's-for line */
.cat-card .cc-who { display:block; margin-top:.35rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; }

/* ---- v2.2: section intros span the container, rows + cat cards carry images ---- */
.section.wrap > p { max-width: none; }
.tour-row.has-media { grid-template-columns: 220px 1fr auto; }
.tour-row .tr-media { display:block; align-self:stretch; }
.tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
@media (max-width: 860px) {
  .tour-row.has-media { grid-template-columns: 1fr; }
  .tour-row .tr-media img { min-height:0; max-height:210px; }
}
.cat-card { padding-top:0; overflow:hidden; }
.cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); }
.cat-card .cc-media img { width:100%; height:130px; object-fit:cover; display:block; }

/* homepage per-category anchor blocks (inside the group sections) */
.cat-block { margin-top: var(--s5); scroll-margin-top: 5.5rem; }
.cat-block > h3 { margin-bottom: var(--s1); }
.cat-block > p.small { margin-top: 0; color: var(--ink-soft); }
section[id] { scroll-margin-top: 5.5rem; }

/* single mid-article conversion card (gradual blog placements) */
.tp-solo { margin: var(--s5) 0; }
.tp-solo .tp-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media { aspect-ratio:auto; }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; }
.booking-panel .bp-title { font-family: var(--display); font-weight: 700; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; }
.bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); }
.bp-rating .gold { color: var(--gold); font-weight: 700; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); }
.bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; }
.btn-block { display: block; width: 100%; text-align: center; }
.bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); }
.bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
.bp-facts div { min-width: 0; }
.bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); }
.bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; }

/* ============================================================
   V3.1 DESIGN DIRECTOR + homepage blueprint components (04-block-library.md 4.5), 2026-09-03.
   split-hero-booking homepage; destination modules: operator-comparison (#quick-comparison)
   and the season/storm-window calendar (#season). See research/design-blueprint.json.
   ============================================================ */

/* ---- RESPONSIVE COMPARISON TABLE ("table-card-hybrid" archetype): zebra rows and no vertical
   borders on desktop, labeled stacked cards under 768px. CSS-only, no JS. ---- */
.table-hybrid { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.table-hybrid th, .table-hybrid td { text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-hybrid thead th { background:var(--paper-2); font-family:var(--body); font-weight:800; color:var(--ink); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.table-hybrid tbody tr:nth-child(even) td { background:var(--surface-2); }
.table-hybrid tbody tr:last-child td { border-bottom:0; }
.table-hybrid td a { font-weight:700; }
@media (max-width:768px) {
  .table-hybrid thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .table-hybrid, .table-hybrid tbody, .table-hybrid tr, .table-hybrid td { display:block; width:100%; }
  .table-hybrid { border:0; border-radius:0; background:transparent; }
  .table-hybrid tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; }
  .table-hybrid tr:last-child { margin-bottom:0; }
  .table-hybrid td, .table-hybrid tbody tr:nth-child(even) td { background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem .9rem; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); text-align:right; }
  .table-hybrid td:last-child { border-bottom:0; }
  .table-hybrid td::before { content:attr(data-label); font-weight:700; color:var(--ink-soft); text-align:left; flex:0 0 auto; }
}
.checked-date { display:inline-block; font-size:.85rem; font-weight:500; color:var(--ink-soft); font-style:italic; }
.compare-intro { max-width: none; color: var(--ink-soft); }
.compare-table td:first-child a { color: var(--brand); }

/* ---- FEATURED-TOUR SPOTLIGHT: text-led card on the linen band, facts list beside the copy ---- */
.featured-tour-card { display:grid; grid-template-columns:1.35fr .85fr; gap:var(--s5); align-items:start; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:var(--s5); }
.featured-tour-card .ft-badge { display:inline-block; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.32rem .7rem; border-radius:var(--radius-sm); margin-bottom:.7rem; }
.featured-tour-card h3 { font-size: var(--step-2); }
.featured-tour-card .ft-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin: var(--s3) 0 0; }
.ft-facts { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); padding-left:var(--s4); display:grid; gap:.8rem; align-self:stretch; }
.ft-facts li { display:grid; gap:.15rem; }
.ft-facts .ff-k { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ft-facts .ff-v { font-weight:600; color:var(--ink); }
@media (max-width:760px){
  .featured-tour-card { grid-template-columns:1fr; padding:var(--s4); }
  .ft-facts { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:var(--s3); }
  .featured-tour-card .ft-actions .btn { width:100%; }
}

/* ---- DESTINATION STAT GRID ("What Makes ... ") on the night band: number tiles, no icons ---- */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); text-align:left; }
.stat-tile .st-num { display:block; font-family:var(--display); font-weight:700; font-size:var(--step-3); line-height:1; color:var(--brand); margin-bottom:.5rem; }
.stat-tile .st-label { display:block; font-size:var(--step--1); color:var(--ink-soft); line-height:1.45; }
.band-night .stat-tile { background:rgba(255,255,255,.04); border-color:rgba(246,238,220,.2); }
.band-night .stat-tile .st-num { color:var(--gold-bright); }
.band-night .stat-tile .st-label { color:rgba(246,238,220,.82); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stat-grid{ grid-template-columns:1fr; } }

/* Complete-Guide Zone divider. */
.guide-zone-intro { max-width:70ch; }

/* ---- SEASON / STORM-WINDOW CALENDAR: hand-authored CSS timeline against the calendar year ---- */
.season-timeline { display:grid; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.season-timeline .st-row { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); align-items:center; }
.season-timeline .st-label { font-weight:700; color: var(--ink); font-size: var(--step--1); }
.season-timeline .st-track { position:relative; height: 1.6rem; background: var(--paper-2); border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
.season-timeline .st-bar { position:absolute; top:0; bottom:0; background: var(--sea); border-radius: var(--radius-sm); }
.season-timeline .st-bar.is-yearround { background: var(--sea); opacity:.55; }
.season-timeline .st-bar.is-storm { background: var(--accent); opacity:.85; }
.season-timeline .st-months { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); }
.season-timeline .st-scale { display:flex; justify-content:space-between; font-size: .74rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:620px) {
  .season-timeline .st-row, .season-timeline .st-months { grid-template-columns: 1fr; }
  .season-timeline .st-label { margin-bottom: .1rem; }
}

/* ---- MAP SECTION: real Google Maps embed + hand-authored SVG pin schematic side by side ---- */
.spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s3); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.5rem; }
@media (max-width:820px){ .spot-map-wrap{ grid-template-columns:1fr; } }

/* ---- FULL TESTIMONIALS: individual real quotes on the linen band ---- */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.testimonial-card .tc-stars { color:var(--gold); letter-spacing:.1em; margin-bottom:.5rem; }
.testimonial-card blockquote { margin:0 0 .6rem; font-family:var(--display); font-size:var(--step-1); line-height:1.4; max-width:none; }
.testimonial-card .tc-attr { font-size:var(--step--1); color:var(--ink-soft); font-weight:600; margin:0; }
.testimonials-disclaimer { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); max-width:none; }
@media (max-width:680px){ .testimonials-grid{ grid-template-columns:1fr; } }

/* ---- CATEGORIZED "ANSWERED" GUIDES/BLOG GRID ---- */
.answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group h3 { font-size:var(--step-0); font-family:var(--body); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; }
.answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; }
.answered-group li a:hover { text-decoration-color:currentColor; color:var(--brand); }
.answered-group .ag-kind { font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; }
@media (max-width:900px){ .answered-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid{ grid-template-columns:1fr; } }
.pending-line { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); font-style:italic; }

/* ---- Hand-drawn icons + yes/no glyphs (inclusions matrix) ---- */
.ico { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; flex:none; }
.glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; }
.glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; }
.glyph.yes { background:rgba(23,93,114,.14); color:var(--sea); }
.glyph.no { background:rgba(11,125,121,.10); color:var(--brand); }

/* ---- WHERE TO STAY: hotel picks ---- */
.hotel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.hotel-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.5rem; }
.hotel-card .hc-tier { font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--gold-ink); background:var(--gold-soft); align-self:flex-start; padding:.2rem .6rem; border-radius:999px; }
.hotel-card h3 { margin:0; font-size:var(--step-0); }
.hotel-card .hc-area { color:var(--ink-soft); font-size:.85rem; margin:0; display:flex; align-items:center; gap:.35rem; }
.hotel-card .hc-rating { font-size:.85rem; margin:0; }
.hotel-card .hc-rating .gold { color:var(--gold-ink); font-weight:700; }
.hotel-card p { margin:0; font-size:var(--step--1); }
.hotel-card .btn { margin-top:auto; align-self:flex-start; }
@media (max-width:860px){ .hotel-grid { grid-template-columns:1fr; } }

/* Editorial section photo break (text-heavy sections). */
.section-img { width: 100%; max-width: 780px; border-radius: var(--radius); overflow: hidden; margin: var(--s3) 0 var(--s4); border:1px solid var(--line); }
.section-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }

/* ---- PLACEHOLDER SKIN (skeleton only): every .tbd element is unmistakable on screen and must be
   replaced by the homepage copy pass before publishing. Delete this block once no .tbd remains. ---- */
.tbd { outline: 2px dashed var(--accent); outline-offset: 3px; background: rgba(194,75,46,.06); color: var(--ink-soft); font-style: italic; }
.tbd::before { content:"Placeholder"; font-style:normal; font-family:var(--body); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.12rem .4rem; margin-right:.5rem; border-radius:2px; vertical-align:middle; }
.band-night .tbd, .hero-dusk .tbd { color: var(--night-ink); }