/* ============================================================
   Lake Lucerne Boat Cruises - Design System
   IDENTITY: "Snowline & Steamer" (V3.1 Design Director, research/design-blueprint.json,
   palette family: alpine). Crisp snowline-white ground, lake-depth ink, deep lake blue for
   links and structure, glacier blue as the working secondary (section rules, icons, hovers),
   ONE warm accent (alpenglow red) reserved for the CTA, and steamer brass for real ratings
   only. Flat, hairline-bordered cards (card-flat-bordered), no drop shadows, editorial-nav
   header, editorial homepage opening with the pier chooser embedded in the hero slot.
   Mobile-first, zero heavy deps, system fonts.
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Snowline & Steamer" (alpine family; rationale in design-blueprint.json). ---- */
  --ink:        #14202B;   /* primary text: lake-depth ink, a cold near-black */
  --ink-soft:   #4B5A68;   /* secondary text: wet-slate grey (~6.7:1 on --paper) */
  --paper:      #F7F9FB;   /* page ground: snowline white, cool not cream */
  --paper-2:    #E8EEF3;   /* raised panels (info blocks, table headers): morning mist */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #F1F5F8;   /* inputs */
  --line:       #D3DCE5;   /* hairline borders on light */
  --brand:      #1F4E79;   /* deep lake blue: links (underlined), structural fills */
  --brand-deep: #173B5C;   /* deeper lake blue: btn-brand hover */
  --accent:     #B8312F;   /* alpenglow red - CTA (white text, 5.9:1) ONLY */
  --accent-deep:#922423;
  --accent-ink: #ffffff;   /* text colour that sits on --accent */
  --sea:        #3B6E94;   /* glacier blue - working secondary: section rules, icons, hovers */
  --sea-deep:   #2C5675;   /* darker glacier for hover/active states */
  --gold:       #B07D1C;   /* steamer brass - real ratings, small warm accents only */
  --gold-soft:  #F3E8CC;   /* brass wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #5C420E;   /* text colour that sits on --gold-soft */
  --slate:      #5B7080;   /* wet granite: sparing tertiary tint/borders */
  --footer:     #0F1F2E;   /* the lake at night: footer fill, deep bands */
  --ok:         #2E6B4F;
  --warn:       #9A5A1C;

  /* ---- TYPE - Swiss grotesque display + neutral sans body + one serif reserved for the
     editorial opening. System stacks, no webfont (protects LCP); contrast comes from weight,
     scale and tracked uppercase eyebrows rather than colour. ---- */
  --display: "Helvetica Neue", Helvetica, "Liberation Sans", Arial, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", 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.45rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* precise, small radii: Swiss-poster crispness, not whitewash curves */
  --radius: 6px;
  --radius-sm: 4px;
  /* card-flat-bordered: cards carry a hairline border and NO shadow. --shadow is kept as a
     valid no-op so every shared component that lists it (is-popular rings, is-lead rings)
     still parses; only floating overlays use --shadow-float. */
  --shadow: 0 0 0 0 rgba(0,0,0,0);
  --shadow-float: 0 8px 24px rgba(20,32,43,.14);
}

/* ---- 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: -.03em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -.01em; 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; }

/* ---- CTA ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--display); font-weight:700; font-size: var(--step-0);
  padding: .85rem 1.4rem; border-radius: 999px; text-decoration:none; border:0; cursor:pointer;
  min-height: 48px; transition: transform .08s ease, background .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:2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---- HEADER / NAV ---- */
.site-header { position: sticky; top:0; z-index:40; background: rgba(247,249,251,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
@media (max-width: 344px) { .site-header .brand { font-size: .92rem; letter-spacing: -.01em; } }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo { width:32px; height:32px; border-radius:0; display:block; }
.brand b { color: var(--brand); }
.nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); }
.nav-links a:hover { color:var(--sea); }
.nav-links a.btn-brand { color:#fff; }
.nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); }
@media (max-width: 760px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; }
  .nav-links[data-open="true"] { display:flex; }
}

/* ---- 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: FULL-SCREEN BACKGROUND (this site's first screen, approved 2026-07-25:
        blue ice glittering on black sand, headline overlaid) ---- */
.hero-full {
  min-height: 88svh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.hero-full-inner { padding-block: var(--s7) var(--s6); }
.hero-full h1 { color: #fff; max-width: 21ch; }
.hero-full .lede { color: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); }
.hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); }
.hero-full .author-hook a { color: #fff; }
.hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); }
.hero-full-ghost:hover { border-color:#fff; }
.hero-full .cta-proof { color: rgba(255,255,255,.92); }
.hero-full .cta-proof .gold { color:#DFB758; }
@media (max-width: 640px) { .hero-full { min-height: 78svh; background-position: 64% center !important; } }

/* ---- HERO (money) - asymmetric split ---- */
.hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); }
/* this site's signature: media on the LEFT, taller than wide never; text column right */
.hero--flip { grid-template-columns: .9fr 1.1fr; }
.hero--flip .hero-media { order:-1; }
.eyebrow { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:var(--step--1); color:var(--sea); font-weight:700; margin-bottom:var(--s2); }
.hero h1 { margin-bottom: var(--s3); }
.hero .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s4); }
.hero .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.hero-media { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.hero-media img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 820px){ .hero{ grid-template-columns:1fr; align-items:start; } .hero--flip .hero-media { order:0; } }

/* ---- QUICK ANSWER (answer-first) ---- */
.quick-answer { background: var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s5); box-shadow: var(--shadow); }
.quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; }
.quick-answer .qa-label { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--sea); margin-bottom:var(--s2); font-weight:700; }

/* ---- 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(--display); 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; box-shadow:var(--shadow); }
.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:999px; }
.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); }
/* Freshness tag on a rating/price/review figure (volatile-data-audit.mjs): a quiet inline
   aside, not a page-level "Verified/Updated" stamp -- deliberately understated. */
.freshness { font-weight:400; color:var(--ink-soft); font-size:.78em; opacity:.75; }

/* ---- 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:800; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; }
@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(--display); 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:4px solid var(--ok); }
.proscons .cons { border-top:4px 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); box-shadow:var(--shadow); }
.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:800; 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(--display); 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; box-shadow:var(--shadow); }
.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) */
.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; box-shadow:var(--shadow); 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; } }

/* 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:999px; }
.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:999px; box-shadow:var(--shadow); }
.cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow); }

/* ---- CTA BANNER ---- */
.cta-banner { background:linear-gradient(120deg,var(--brand),var(--footer)); border:1px solid var(--brand-deep); 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(255,255,255,.82); 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); box-shadow:var(--shadow); }
.availability .av-label { font-family:var(--display); 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%; } }

/* ---- FOOTER (the one deepest surface: the lake at night) ---- */
.site-footer { background:var(--footer); color:#C5D3DF; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#DCE6EE; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.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 #2A4258; border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:#9FB3C4; border-top:1px solid #2A4258; 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); box-shadow:var(--shadow); }
.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); }
.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; box-shadow:var(--shadow); }
.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(--display); 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): deliberately amber + outline so it reads as a
   secondary lodging action, distinct from the cyan GetYourGuide 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(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:#8A6115; 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:800; 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:999px; 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); box-shadow:var(--shadow); 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); }
.video-grid .embed { box-shadow:none; }
@media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } }

/* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */
.btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; }
@media (max-width: 430px) { .btn-xl { font-size: var(--step-0); 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:800; 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(255,255,255,.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:999px; padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow-float); }
  /* 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); box-shadow:none; padding:.55rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } }

/* ---- TESTIMONIALS (real GetYourGuide/Tripadvisor 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}

/* ============================================================
   SHARED COMPONENT LAYER (category grid, tour rows, tour picks, honesty callout), re-tokened
   for "Snowline & Steamer". Site-specific design-director rules are at the end of this file.
   ============================================================ */

/* ---- FLIPPED SPLIT HERO (this site's first screen, approved 2026-08-07).
        Tall photo LEFT, headline + proof + XL CTA RIGHT. On mobile the H1 comes first
        and the photo drops below, so the primary-keyword H1 is above the fold. ---- */
.hero--split { display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--s5);
  align-items:center; padding-block: var(--s5) var(--s6); }
.hero--split .hero-media { order:-1; aspect-ratio:3/4; border-radius:var(--radius);
  overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); }
.hero--split .hero-media img { width:100%; height:100%; object-fit:cover; }
.hero--split h1 { margin-bottom: var(--s3); max-width: 16ch; }
.hero--split .lede { max-width: 46ch; margin-bottom: var(--s4); }
.hero--split .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.hero--split .author-hook { display:flex; align-items:center; gap:.6rem;
  font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s4); }
.hero--split .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
@media (max-width: 860px) {
  .hero--split { grid-template-columns:1fr; gap:var(--s4); padding-block:var(--s4) var(--s5); }
  /* The media div is FIRST in the DOM so it can sit left on desktop. On mobile it has to
     drop BELOW the text, or the primary-keyword H1 is pushed off the first screen. */
  .hero--split .hero-media { order:2; aspect-ratio:4/3; }
  .hero--split h1 { max-width:none; }
}

/* ---- Section-heading rule: one short alpenglow tick, then a glacier hairline. The single
        recurring "Swiss poster" detail, distinct from a dashed or solid full-width rule. ---- */
.section > h2:first-child, .rule-h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--line);
  border-image: linear-gradient(90deg, var(--accent) 0 3rem, var(--sea) 3rem 3.2rem, var(--line) 3.2rem 100%) 1; }

/* ---- CATEGORY GRID (8 activity hubs on the homepage) ---- */
.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:4px solid var(--sea); 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-deep); transform:translateY(-2px); }
.cat-card .cc-name { font-family:var(--display); font-weight:800; font-size:var(--step-0); line-height:1.2; }
.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:999px;
  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:800; 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(--gold); box-shadow:0 0 0 2px var(--gold-soft), var(--shadow); }
.tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); }
.tour-row h3 a { color:var(--ink); text-decoration:none; }
.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:800; 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, ported from niagarafallsboattours.org
   2026-08-15 and re-tokened for "Snowline & Steamer"). 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:999px; 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(--sea); 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:var(--step--1); 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 (Oleg, 2026-08-18): 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 */
.cat-block { margin-top: var(--s5); scroll-margin-top: 5rem; }
.cat-block > h3 { margin-bottom: var(--s1); }
.cat-block > p.small { margin-top: 0; color: var(--ink-soft); }

/* 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 img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); }
.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: 800; 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 LAYER for boatcruiseslakelucerne.com (research/design-blueprint.json)
   homepage editorial-intro / hero hero-module-embed / nav editorial-nav / cards card-flat-bordered /
   tables table-card-hybrid / palette alpine "Snowline & Steamer". Destination modules:
   departure-area chooser (#hero, the embedded module), seasonal calendar (#season, inside the Complete-Guide
   zone), route-distance matrix (#spot-map). Structural hooks match the pipeline's strict
   homepage section contract so the money-page writer's markup lands styled.
   ============================================================ */

/* ---- EDITORIAL NAV: slim utility bar (trust line + secondary links) above a wordmark-led
        main row. The site is author-less, so the utility line carries the site's own honest
        model statement, never a phone/address. ---- */
.utility-bar { background: var(--footer); color: #C5D3DF; font-size: var(--step--1); }
.utility-inner { display:flex; align-items:center; justify-content:space-between; gap: var(--s4); min-height: 2.2rem; }
.utility-trust { margin:0; max-width:none; color:#C5D3DF; line-height:1.3; padding-block:.35rem; }
.utility-links { list-style:none; margin:0; padding:0; display:flex; gap: var(--s4); flex:0 0 auto; }
.utility-links a { color:#DCE6EE; text-decoration:none; font-weight:600; letter-spacing:.02em; }
.utility-links a:hover { color:#fff; text-decoration:underline; }
.site-header--editorial .nav { padding-block: .85rem; }
.site-header--editorial .brand { font-weight:700; letter-spacing:-.02em; }
.site-header--editorial .brand-text { display:inline-block; line-height:1.05; }
.site-header--editorial .nav-links { gap: var(--s4); }
.nav-list { display:flex; gap: 1.25rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-list a { position:relative; padding-block:.25rem; }
.nav-list a::after { content:""; position:absolute; left:0; right:0; bottom:-.15rem; height:2px; background: var(--accent); transform:scaleX(0); transform-origin:left; transition: transform .15s ease; }
.nav-list a:hover::after { transform:scaleX(1); }
.nav-cta { padding:.6rem 1.1rem; min-height:40px; font-size: var(--step--1); }
.nav-links a.nav-cta { color: var(--accent-ink); }
.nav-more { display:none; }
@media (max-width: 760px) {
  .utility-bar { display:none; }
  .nav-more { display:block; }
  .site-header--editorial .nav-links { gap: var(--s3); align-items:stretch; }
  .nav-list { flex-direction:column; gap:.2rem; align-items:stretch; }
  .nav-list a { display:block; padding:.6rem .2rem; font-size: var(--step-0); border-bottom:1px solid var(--line); }
  .nav-list a::after { display:none; }
  .nav-cta { width:100%; margin-top:.4rem; }
}

/* ---- EDITORIAL HERO WITH EMBEDDED MODULE (hero-module-embed): a fact-led copy block (eyebrow,
        grotesque H1 left, serif lede right on desktop, CTA pair under both), then the hero slot's
        live module, the departure-pier chooser, full width beneath it. No hero image, so the LCP
        element is text. The full booking panel deliberately stays in #featured-tour, after the
        quick answer and key takeaways (editorial-intro logic). ---- */
.hero-editorial { padding-top: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); display:grid; gap: var(--s5); }
.hero-editorial .hero-copy { display:flex; flex-direction:column; }
.hero-editorial h1 { max-width: 14ch; font-size: var(--step-4); margin-bottom: var(--s4); }
.hero-editorial .lede-editorial { font-family: var(--editorial); font-size: var(--step-1); line-height: 1.35; color: var(--ink); max-width: 40ch; margin-bottom: var(--s4); padding-left: var(--s3); border-left: 3px solid var(--sea); }
.hero-editorial .cta-proof { margin: 0 0 var(--s2); font-size: var(--step-0); }
.hero-editorial .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; max-width:none; margin:0; }
.hero-module { min-width:0; }
.hero-module .pier-chooser { margin:0; background: var(--surface); }
.hero-module .pier-card { background: var(--paper-2); }
@media (min-width: 900px) {
  .hero-editorial .hero-copy { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: var(--s6); align-items:end; }
  .hero-editorial .eyebrow, .hero-editorial h1 { grid-column: 1; }
  .hero-editorial h1 { margin-bottom: 0; }
  .hero-editorial .lede-editorial { grid-column: 2; grid-row: 1 / span 2; align-self:end; margin-bottom: 0; }
  .hero-editorial .cta-proof, .hero-editorial .hero-actions { grid-column: 1 / -1; margin-top: var(--s4); }
  .hero-editorial .cta-proof + .hero-actions { margin-top: 0; }
}
@media (max-width: 480px) { .hero-editorial .hero-actions .btn { width:100%; } }

/* ---- FLAT BORDERED CARD SKIN (card-flat-bordered): hairline border, flat fill, no shadow,
        hover = border darkens. Applied to every shared card component on the site. ---- */
.cards-3 .rcard, .related .rcard, .product-card, .booking-panel, .review-card, .tour-row,
.cat-card, .tour-picks .tp-card, .availability, .embed, .quick-answer, .honesty, .infographic img, .infographic svg { box-shadow:none; }
.cards-3 .rcard:hover, .related .rcard:hover, .tour-row:hover, .tour-picks .tp-card:hover { border-color: var(--slate); }
.hero-media, .tour-hero .hero-media img, .blog-hero img, .prose img { box-shadow:none; border:1px solid var(--line); }
.cards-3 .rcard.is-popular, .product-card.is-popular { box-shadow:none; border:2px solid var(--gold); }
.tour-row.is-lead { box-shadow:none; border:2px solid var(--gold); }
.cat-card { border-left-width: 3px; }

/* ---- STRICT HOMEPAGE SECTIONS (04-block-library.md 4.5), flat skin ---- */
.quick-answer-box { background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.quick-answer-box .qa-label { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--sea); margin:0 0 var(--s2); font-weight:700; }
.quick-answer-box p { max-width: 64ch; }
.quick-answer-box p:last-child { margin-bottom:0; }
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; max-width: 70ch; }
.takeaways-list li { position:relative; padding-left:1.7rem; line-height:1.5; }
.takeaways-list li::before { content:""; position:absolute; left:0; top:.55em; width:.9rem; height:2px; background: var(--accent); }

.featured-tour-card { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items:start; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.featured-tour-card .ft-media { aspect-ratio:4/3; background: var(--paper-2); }
.featured-tour-card .ft-media img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-tour-card .ft-body { padding: var(--s4) var(--s5) var(--s4) 0; display:flex; flex-direction:column; gap: var(--s2); }
.featured-tour-card .ft-badge { align-self:flex-start; margin:0; 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:999px; }
.featured-tour-card .booking-panel { border:0; border-top:1px solid var(--line); border-radius:0; padding: var(--s3) 0 0; }
.featured-tour-card .ft-more { margin:0; }
@media (max-width:760px){ .featured-tour-card { grid-template-columns:1fr; } .featured-tour-card .ft-body { padding: var(--s4); } }

/* Departure-area chooser (destination module): pier cards, pure CSS, every card visible. */
.pier-chooser { margin: var(--s4) 0 var(--s5); padding: var(--s4); background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius); }
.pier-chooser .pier-q { font-family: var(--display); font-weight:700; font-size: var(--step-1); margin:0 0 var(--s3); max-width:none; color: var(--ink); }
.pier-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.pier-card { display:flex; flex-direction:column; gap:.35rem; background: var(--surface); border:1px solid var(--line); border-top:3px solid var(--sea); border-radius: var(--radius-sm); padding: var(--s3); }
.pier-card .pier-name { font-family: var(--display); font-weight:700; margin:0; max-width:none; }
.pier-card .pier-time { font-size: var(--step--1); color: var(--ink-soft); margin:0; max-width:none; }
.pier-card ul { margin:.2rem 0 0; padding-left:1.1rem; font-size: var(--step--1); }
.pier-card li { margin-bottom:.25rem; }
@media (max-width:900px){ .pier-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .pier-cards { grid-template-columns: 1fr; } }

/* Comparison + route tables (table-card-hybrid): bordered grid on desktop, labeled stacked
   cards under 768px via each td's data-label. CSS only. */
.table-hybrid { width:100%; border-collapse:collapse; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; margin-top: var(--s3); }
.table-hybrid caption { caption-side: top; text-align:left; font-family: var(--display); font-weight:700; color: var(--ink); padding: 0 0 var(--s2); }
.table-hybrid th, .table-hybrid td { text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-hybrid thead th { background: var(--paper-2); font-family: var(--display); font-weight:700; color: var(--ink); font-size: var(--step--1); text-transform:uppercase; letter-spacing:.04em; }
.table-hybrid tbody tr:last-child td { border-bottom:0; }
.table-hybrid td a { font-weight:700; }
.compare-intro { max-width:none; color: var(--ink-soft); }
.checked-date { display:inline-block; font-size:.85rem; font-weight:500; color: var(--ink-soft); font-style:italic; }
@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 caption { display:block; }
  .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 { 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; }
}

/* Destination stat grid: flat tiles, brass-free numbers in lake blue. */
.stat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s3); margin-top: var(--s3); }
.stat-tile { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: var(--s4); text-align:center; }
.stat-tile .st-icon { font-size:1.5rem; line-height:1; margin-bottom:.4rem; color: var(--sea); }
.stat-tile .st-num { display:block; font-family: var(--display); font-weight:700; font-size: var(--step-2); color: var(--brand); letter-spacing:-.02em; }
.stat-tile .st-label { display:block; font-size: var(--step--1); color: var(--ink-soft); margin-top:.15rem; }
@media (max-width:760px){ .stat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .stat-grid { grid-template-columns: 1fr; } }

.guide-zone-intro { max-width:70ch; }
.section-img { width:100%; max-width:780px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); margin: var(--s3) 0 var(--s4); }
.section-img img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }

/* Seasonal calendar (destination module): hand-authored CSS timeline, no image. */
.season-timeline { display:grid; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.st-row { display:grid; grid-template-columns: 12rem 1fr; gap: var(--s3); align-items:center; }
.season-timeline .st-label { font-weight:700; color: var(--ink); font-size: var(--step--1); }
.st-track { position:relative; height:1.5rem; background: var(--paper-2); border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
.st-bar { position:absolute; top:0; bottom:0; background: var(--sea); border-radius: var(--radius-sm); }
.st-bar.is-yearround { background: var(--brand); }
.st-bar.is-closed { background: var(--accent); opacity:.85; }
.st-months { display:grid; grid-template-columns: 12rem 1fr; gap: var(--s3); }
.st-months .st-scale { display:flex; justify-content:space-between; font-size:.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
@media (max-width:620px) { .st-row, .st-months { grid-template-columns:1fr; } .season-timeline .st-label { margin-bottom:.1rem; } }

/* Map section: real Google Maps embed + hand-authored pin schematic / route matrix. */
.spot-map-wrap { display:grid; grid-template-columns: 1.1fr .9fr; 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; background: var(--paper-2); }
.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; }
.spot-map-wrap .map-schematic .table-hybrid { border:0; margin-top: var(--s2); }
.map-schematic-note { font-size: var(--step--1); color: var(--ink-soft); margin: .5rem 0 0; max-width:none; }
@media (max-width:820px){ .spot-map-wrap { grid-template-columns:1fr; } }

/* Testimonials: real quotes, flat cards, brass stars. */
.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(--editorial); font-size: var(--step-0); line-height:1.5; max-width:none; }
.testimonial-card .tc-attr { font-size: var(--step--1); color: var(--ink-soft); font-weight:600; }
.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; } }

/* "Answered" grid: categorized internal links. */
.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); margin:0 0 .5rem; padding-bottom:.35rem; border-bottom:2px solid var(--sea); }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.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; }
@media (max-width:900px){ .answered-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid { grid-template-columns:1fr; } }

/* Section rhythm: alternate the mist ground on the comparison, stat and map bands so a long
   text-heavy homepage reads as distinct movements rather than one scroll of paragraphs. */
#quick-comparison, #why-here, #spot-map, #answered { padding-block: var(--s5); }
#complete-guide { border-top:1px solid var(--line); margin-top: var(--s4); padding-top: var(--s5); }