/* ============================================================
   Oslofjord Cruises - Phase 3 Design System
   IDENTITY: "Fjord Light" (Design Director, V3.1 blueprint, 2026-09-03).
   Cold sea-fog white ground (not sand, not ivory), fjord-night ink, a deep fjord blue for
   links and structure, steel-blue for section marks and hovers, and ONE warm amber accent,
   the low evening sun on the water, reserved for the CTA. Muted brass for real ratings only.
   Cinematic full-bleed hero with a transparent nav that solidifies on scroll; flat,
   image-led cards with hairline borders; squared buttons; crisp 6px radii.
   Mobile-first, zero heavy deps, system fonts (geometric sans display, serif body).
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Fjord Light" (research/design-blueprint.json, family water-coastal). ---- */
  --ink:        #0F1B26;   /* primary text: fjord-night navy-black */
  --ink-soft:   #4B5B69;   /* secondary text: cool slate (~6.4:1 on --paper) */
  --paper:      #F3F6F7;   /* page ground: sea-fog white, cold not cream */
  --paper-2:    #E5ECEF;   /* raised panels, bands, table headers: pale fjord mist */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #F8FAFB;   /* inputs, zebra rows */
  --line:       #D2DCE2;   /* hairline borders on light */
  --brand:      #1B4D6B;   /* deep fjord blue: links (underlined), structural fills */
  --brand-deep: #133A52;   /* deeper fjord blue: btn-brand hover */
  --accent:     #B4501A;   /* evening-sun amber - CTA (white text, 5.1:1) ONLY */
  --accent-deep:#94400F;
  --accent-ink: #ffffff;   /* text colour that sits on --accent */
  --amber-soft: #F2C98A;   /* light amber: hero eyebrow, brand mark on dark, stat numbers on night */
  --sea:        #2F6A8F;   /* steel fjord blue - secondary accent: rules, icons, hovers (5.4:1) */
  --sea-deep:   #24526F;   /* darker steel blue for hover/active states */
  --gold:       #B8922E;   /* muted brass - real ratings, small warm accents only */
  --gold-soft:  #F2E8C8;   /* brass wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #5A4508;   /* text colour that sits on --gold-soft */
  --slate:      #5E7382;   /* muted slate: sparing tertiary tint/borders */
  --footer:     #0B1F2E;   /* fjord night: footer, night bands, hero scrim base */
  --ok:         #2F6B4F;
  --warn:       #9A5A1C;

  /* ---- TYPE - geometric/humanist sans display (Scandinavian modernist feel) over a serif
     body for the editorial read. System stacks, no webfont (protects LCP). ---- */
  --display: "Avenir Next", Avenir, "Gill Sans", "Segoe UI Variable Display", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --body: ui-serif, Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale */
  --step--1: clamp(.84rem, .8rem + .15vw, .94rem);
  --step-0:  clamp(1.02rem, .98rem + .2vw, 1.14rem);
  --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, 3rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.4vw, 4.8rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  --nav-h: 4.5rem;
  /* crisp Nordic corners: 6px, not soft pills */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(11,31,46,.06);
  --shadow-lift: 0 12px 28px rgba(11,31,46,.12);
}

/* ---- 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.08; letter-spacing: -.015em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -.005em; 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; }
.section[id] { scroll-margin-top: calc(var(--nav-h) + .5rem); }
.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 (squared, not pills) ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--display); font-weight:700; font-size: var(--step-0); letter-spacing:.01em;
  padding: .85rem 1.4rem; 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:2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---- HEADER / NAV (archetype: transparent-hero-nav) ----
   Solid, sticky, blurred on every page. On the homepage (body.home) it starts transparent
   over the cinematic hero, white links, and solidifies once scrolled or when the mobile
   menu is open. The hero pulls itself up under the header by --nav-h. ---- */
.site-header { position: sticky; top:0; z-index:40; background: rgba(243,246,247,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(11,31,46,.08); }
@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; min-height: var(--nav-h); padding-block:.55rem; }
.brand { font-family:var(--display); font-weight:700; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.55rem; transition: color .25s ease; }
.brand-logo { width:30px; height:30px; border-radius:7px; display:block; }
.brand b { color: var(--brand); font-weight:700; transition: color .25s ease; }
.nav-links { display:flex; gap:1.35rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:600; font-size:var(--step--1); letter-spacing:.01em; transition: color .25s ease; }
.nav-links a:hover { color:var(--sea); }
.nav-links a.btn { min-height: 42px; padding: .55rem 1.05rem; font-size: var(--step--1); }
.nav-links a.btn-brand { color:#fff; }
.nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; background:none; border:0; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; transition: color .25s ease; }
.nav-toggle svg { width:26px; height:26px; display:block; }
@media (max-width: 760px) {
  .nav-toggle { display:flex; }
  .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; }
  .nav-links[data-open="true"] { display:flex; }
  .nav-links li { padding-inline: .4rem; }
  .nav-links a.btn { width:100%; }
}
/* transparent state, homepage only, until scrolled or menu open */
body.home .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.home .site-header .brand,
body.home .site-header .nav-links > li > a:not(.btn),
body.home .site-header .nav-toggle { color:#fff; }
body.home .site-header .brand b { color: var(--amber-soft); }
body.home .site-header .nav-links > li > a:not(.btn):hover { color: var(--amber-soft); }
body.home .site-header .brand-logo { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
body.home .site-header.is-scrolled,
body.home .site-header:has(.nav-links[data-open="true"]) { background: rgba(243,246,247,.94); border-bottom-color: var(--line); backdrop-filter: blur(10px); }
body.home .site-header.is-scrolled .brand,
body.home .site-header.is-scrolled .nav-links > li > a:not(.btn),
body.home .site-header.is-scrolled .nav-toggle,
body.home .site-header:has(.nav-links[data-open="true"]) .brand,
body.home .site-header:has(.nav-links[data-open="true"]) .nav-links > li > a:not(.btn),
body.home .site-header:has(.nav-links[data-open="true"]) .nav-toggle { color: var(--ink); }
body.home .site-header.is-scrolled .brand b,
body.home .site-header:has(.nav-links[data-open="true"]) .brand b { color: var(--brand); }
body.home .site-header.is-scrolled .brand-logo,
body.home .site-header:has(.nav-links[data-open="true"]) .brand-logo { box-shadow: none; }
body.home .site-header .nav-links[data-open="true"] > li > a:not(.btn) { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .site-header, .brand, .brand b, .nav-links a, .nav-toggle { transition:none; } }

/* ---- 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: CINEMATIC FULL-BLEED (archetype: hero-full-bleed-image, homepage: cinematic-full)
        Real <img> (LCP, alt text) under a fjord-night scrim, H1 + lede + CTAs bottom-left,
        pulled up under the transparent nav. ---- */
.hero-cinematic { position:relative; min-height: 86svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background: var(--footer); margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); border-bottom: 4px solid var(--accent); }
.hero-cinematic .hc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 60%; }
.hero-cinematic::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,31,46,.58) 0%, rgba(11,31,46,.08) 32%, rgba(11,31,46,.18) 58%, rgba(11,31,46,.86) 100%); }
.hero-cinematic .hc-inner { position:relative; z-index:1; padding-block: var(--s7) var(--s6); }
.hero-cinematic .eyebrow { color: var(--amber-soft); }
.hero-cinematic h1 { color:#fff; max-width: 14ch; margin-bottom: var(--s3); }
.hero-cinematic .lede { color: rgba(255,255,255,.9); max-width: 52ch; font-size: var(--step-1); margin-bottom: var(--s4); }
.hero-cinematic .hc-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.hero-cinematic .btn-ghost { color:#fff; border-color: rgba(255,255,255,.6); }
.hero-cinematic .btn-ghost:hover { border-color:#fff; }
.hero-cinematic .cta-proof { color: rgba(255,255,255,.9); }
.hero-cinematic .cta-proof .gold { color: var(--amber-soft); }
.hero-cinematic .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 0; }
.hero-cinematic .author-hook a { color:#fff; }
.hero-cinematic .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
@media (max-width: 640px) {
  .hero-cinematic { min-height: 76svh; }
  .hero-cinematic .hc-img { object-position: 62% center; }
  .hero-cinematic .hc-actions .btn { width:100%; }
}

/* ---- HERO (money) - asymmetric split ---- */
.hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); }
.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); border:1px solid var(--line); }
.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(--sea); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s5); }
.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) - flat, image-led ---- */
.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); font-family:var(--display); }
.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; }
@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(--sea); 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); }
.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(--brand); }
.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(--sea); 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): card_style card-image-led, flat hairline, image edge-to-edge */
.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; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.cards-3 .rcard:hover { border-color: var(--sea); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.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-family:var(--display);
  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(--sea); 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-family:var(--display);
  font-weight:700; 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(--gold); box-shadow:0 0 0 2px var(--gold); }

/* ---- CTA BANNER (fjord night) ---- */
.cta-banner { background:linear-gradient(120deg, var(--brand-deep), var(--footer)); border:1px solid var(--footer); 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,.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(--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 (fjord night band) ---- */
.site-footer { background:var(--footer); color:#C9D6DE; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:4px solid var(--brand); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#DCE6EC; 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 rgba(255,255,255,.22); border-radius:50%; font-family:var(--display); font-size:.8rem; font-weight:700; }
.socials a:hover { border-color:var(--amber-soft); color:var(--amber-soft); }
.disclosure { font-size:var(--step--1); color:#9FB3BF; border-top:1px solid rgba(255,255,255,.14); 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); border:1px solid var(--line); }
.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; border:1px solid var(--line); }
.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(--sea); 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:nth-child(even) td { background:var(--surface-2); }
.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(--brand); }
/* 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 brass + outline so it reads as a
   secondary lodging action, distinct from the amber 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:700; 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:#8A6A1C; 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(--display); 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: 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: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(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:var(--radius); padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow-lift); }
  /* 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}

/* ============================================================
   SITE-SPECIFIC LAYER , "Fjord Light" additions for oslofjordcruises.com
   ============================================================ */

/* ---- Section heading signature: a short amber bar ABOVE the H2, no rule below.
        (The donor's dashed hairline under headings is deliberately NOT reused.) ---- */
.section > h2:first-child, .rule-h2 { padding-bottom:0; border-bottom:0; }
.section > h2:first-child::before, .rule-h2::before { content:""; display:block; width:2.75rem; height:4px; background:var(--accent); border-radius:2px; margin-bottom:var(--s2); }
.cta-banner h2::before { display:none; }

/* ---- FULL-BLEED BANDS on a constrained .section.wrap (markup contract untouched):
        the box-shadow spread + horizontal clip-path paints the band edge to edge. ---- */
.band-mist { background:var(--paper-2); box-shadow:0 0 0 100vmax var(--paper-2); clip-path:inset(0 -100vmax); }
.band-night { background:var(--footer); color:#fff; box-shadow:0 0 0 100vmax var(--footer); clip-path:inset(0 -100vmax); }
.section.band-mist, .section.band-night { padding-block:var(--s6); }
.band-mist + .section, .band-night + .section { padding-top:var(--s6); }
.band-night h2, .band-night h3 { color:#fff; }
.band-night p { color:rgba(255,255,255,.86); }
.band-night .rule-h2::before, .band-night > h2:first-child::before { background:var(--amber-soft); }
.band-night a:not(.btn) { color:#fff; }

/* ---- CATEGORY GRID (activity hubs on the homepage): card-image-led, flat hairline ---- */
.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-radius:var(--radius);
  padding:0 var(--s4) var(--s3); text-decoration:none; color:var(--ink); overflow:hidden;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.cat-card:hover { border-color:var(--sea); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.cat-card .cc-name { font-family:var(--display); font-weight:700; 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:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem; font-family:var(--display);
  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; }
/* destination-native: two-fleets note (silent electric vs wooden sailing ship) */
.honesty.fleet-note { border-left-color:var(--sea); background:var(--surface-2); }

/* ---- TOUR LIST (category hubs: a dense, scannable row per product), flat ---- */
.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); }
.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(--sea); }
.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; font-family:var(--display);
  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; font-family:var(--display); }
.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: 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; }
}
/* image-led: the category image bleeds to the card's top edge, copy sits below it */
.cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); }
.cat-card .cc-media img { width:100%; height:150px; object-fit:cover; display:block; transition: transform .25s ease; }
.cat-card:hover .cc-media img { transform: scale(1.03); }

/* homepage per-category anchor blocks */
.cat-block { margin-top: var(--s5); scroll-margin-top: calc(var(--nav-h) + .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); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-lift); }
.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; }

/* ============================================================
   HOMEPAGE BLUEPRINT SECTIONS (04-block-library.md 4.5, strict 13-section contract)
   ============================================================ */

/* Quick Answer / Key Takeaways: callout boxes, distinct from plain body paragraphs. */
.quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s4) var(--s5); }
.quick-answer-box p { font-size:var(--step-1); max-width:62ch; }
.quick-answer-box p:first-child { margin-top:0; }
.quick-answer-box p:last-child { margin-bottom:0; }
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.takeaways-list li { position:relative; padding-left:1.7rem; line-height:1.5; max-width:70ch; }
.takeaways-list li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--sea); font-weight:800; font-family:var(--display); }

/* Featured-tour spotlight: image-led card wrapping the real booking panel. */
.featured-tour-card { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.featured-tour-card .ft-media { position:relative; background:var(--paper-2); min-height:100%; }
.featured-tour-card .ft-media img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.featured-tour-card .ft-badge { position:absolute; top:.8rem; left:.8rem; z-index:1; display:inline-block; background:var(--gold-soft); color:var(--gold-ink); font-family:var(--display); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-sm); }
.featured-tour-card .ft-panel { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.featured-tour-card .booking-panel { border:0; border-top:0; box-shadow:none; border-radius:0; padding:0; }
.featured-tour-card .ft-more { margin:0; }
@media (max-width:820px){ .featured-tour-card{ grid-template-columns:1fr; } .featured-tour-card .ft-media img { aspect-ratio:16/10; } }

/* Comparison table (table_style: table-card-hybrid): bordered zebra grid on desktop that
   collapses to labeled stacked cards under 768px. CSS-only, no JS. */
.compare-intro { max-width:none; color:var(--ink-soft); }
.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:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-hybrid thead th { background:var(--footer); color:#fff; font-family:var(--display); font-weight:700; font-size:var(--step--1); letter-spacing:.02em; }
.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 tbody tr:nth-child(even) td { background:var(--surface); }
  .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; font-family:var(--display); }
}
.checked-date { display:inline-block; font-size:.85rem; font-weight:500; color:var(--ink-soft); font-style:italic; }

/* Destination-native chooser strip: daylight sightseeing vs an evening on the water.
   Light card vs night card, the palette doing the explaining. */
.chooser-strip { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin:var(--s4) 0 var(--s5); }
.chooser-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s4); display:flex; flex-direction:column; gap:.45rem; }
.chooser-card .ch-kicker { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--sea); }
.chooser-card h3 { margin:0; font-size:var(--step-1); }
.chooser-card p { margin:0; max-width:none; color:var(--ink-soft); }
.chooser-card .ch-links { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.chooser-card .ch-links a { display:inline-block; padding:.32rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-family:var(--display); font-weight:600; font-size:var(--step--1); color:var(--brand); text-decoration:none; }
.chooser-card .ch-links a:hover { border-color:var(--sea); color:var(--sea); }
.chooser-card.is-evening { background:var(--footer); border-color:var(--footer); color:#fff; }
.chooser-card.is-evening .ch-kicker { color:var(--amber-soft); }
.chooser-card.is-evening h3 { color:#fff; }
.chooser-card.is-evening p { color:rgba(255,255,255,.84); }
.chooser-card.is-evening .ch-links a { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff; }
.chooser-card.is-evening .ch-links a:hover { border-color:var(--amber-soft); color:var(--amber-soft); }
@media (max-width:700px){ .chooser-strip{ grid-template-columns:1fr; } }

/* Destination Stat Grid ("What Makes ... "): number-led tiles, no icons, on the night band. */
.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); letter-spacing:-.02em; }
.stat-tile .st-label { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.45rem; }
.band-night .stat-tile { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.band-night .stat-tile .st-num { color:var(--amber-soft); }
.band-night .stat-tile .st-label { color:rgba(255,255,255,.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; }

/* Map section: real Google Maps embed + hand-authored SVG pin schematic side by side. */
.spot-map-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); align-items:stretch; 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; }
.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 mist 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-style:normal; font-size:var(--step-1); line-height:1.45; max-width:none; }
.testimonial-card .tc-attr { font-family:var(--display); 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); }
@media (max-width:680px){ .testimonials-grid{ grid-template-columns:1fr; } }

/* Categorized guides/blog "Answered" grid. */
.answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group { border-top:3px solid var(--sea); padding-top:var(--s3); }
.answered-group h3 { font-size:var(--step-0); margin:0 0 .5rem; }
.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; color:var(--sea); }
@media (max-width:900px){ .answered-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid{ grid-template-columns:1fr; } }

/* ---- PLACEHOLDER FLAG (pre-publish scaffolding only): visibly marked, never shippable.
        Every .tbd element is paired with a NOTE FOR OLEG comment in the markup. ---- */
.tbd { border:1px dashed var(--warn); background:#FFF6EC; color:var(--warn); padding:.6rem .9rem; border-radius:var(--radius-sm); font-family:var(--display); font-size:var(--step--1); max-width:none; }
.tbd::before { content:"Placeholder: "; font-weight:700; }
div.tbd ul { margin-top:.4rem; color:var(--ink); font-family:var(--body); font-size:var(--step-0); }