/* ============================================================
   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 {
  /* "Fjord Chart" palette: birch chart paper, spruce ink, teal fjord, falu-red CTA, sand highlights. */
  --ink:        #1B2A28;
  --ink-soft:   #485956;
  --paper:      #F2F3EC;
  --paper-2:    #E4E8DD;
  --surface:    #FBFBF7;
  --surface-2:  #F5F6EF;
  --line:       #C9D1C3;
  --brand:      #2B5E5B;
  --brand-deep: #1E4543;
  --accent:     #A63A2B;
  --accent-deep:#862B1F;
  --accent-ink: #ffffff;
  --amber-soft: #E9CE98;
  --sea:        #3A6E7A;
  --sea-deep:   #2B5560;
  --gold:       #B58A2A;
  --gold-soft:  #F1E7C9;
  --gold-ink:   #58420A;
  --slate:      #5E7471;
  --footer:     #14292A;
  --ok:         #2F6B4F;
  --warn:       #9A5A1C;
  /* chart paint + boat-type colours */
  --ofc-water:#D3E3E3; --ofc-land:#E3E8D6; --ofc-line:#A8B8A6; --ofc-cont:#8FB0B3; --ofc-halo:#F2F3EC;
  --t-elec:#2F6F7C; --t-sail:#8B5A2E; --t-eve:#7A4F82; --t-priv:#8A6410;

  /* type: serif headings, humanist sans body + UI, mono for chart labels. System stacks. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, serif;
  --display: "Seravek", "Gill Sans Nova", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Seravek", "Gill Sans Nova", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --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);

  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 68rem;
  --nav-h: 5.5rem;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(20,41,42,.06);
  --shadow-lift: 0 12px 28px rgba(20,41,42,.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); }

/* ============================================================
   FJORD CHART (ofc-) design layer, 2026-10-31 design pass.
   Nordic chart-paper palette (birch paper, spruce ink, teal fjord, falu-red CTA), serif headings
   over a humanist sans, mono chart labels. Full tokens above; dark scheme below.
   ============================================================ */
html { color-scheme: light dark; }
html.js { scroll-behavior: smooth; }
main p { max-width: none; }
h1,h2,h3,h4 { font-family: var(--serif); }
h1,h2 { letter-spacing: -.012em; }
.section > h2:first-child::before, .rule-h2::before { display:none; }
.rule-h2, .section > h2:first-child { position:relative; padding-bottom:.55rem; margin-bottom:var(--s3); border-bottom:1px solid var(--line); }
.rule-h2::after, .section > h2:first-child::after { content:""; position:absolute; left:0; bottom:-2px; width:3.2rem; height:3px; background:var(--accent); }
.cta-banner h2::after { display:none; }
.section { padding-block: var(--s5); }
.section[id] { scroll-margin-top: 8.5rem; }
@media (max-width:760px){ .section[id] { scroll-margin-top: 4.5rem; } }
.btn { font-family: var(--display); }
.btn-brand { background: var(--brand); color:#fff; }
.stars::before { color: var(--line); }

/* ---- HEADER: two tiers, title bar over an index-tab rail ---- */
.ofc-head { position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line); }
.ofc-head-in { display:grid; grid-template-columns:1fr auto; grid-template-areas:"brand cta" "rail rail"; align-items:center; column-gap:1rem; }
.ofc-brand { grid-area:brand; display:flex; align-items:center; gap:.7rem; padding:.55rem 0; text-decoration:none; color:var(--ink); min-width:0; }
.ofc-brand svg { width:38px; height:38px; flex:0 0 auto; }
.ofc-brand strong { display:block; font-family:var(--serif); font-size:1.3rem; line-height:1.1; letter-spacing:-.01em; }
.ofc-brand strong em { font-style:normal; color:var(--accent); }
.ofc-brand small { display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-soft); margin-top:.1rem; }
.ofc-cta { grid-area:cta; min-height:42px; padding:.5rem 1.1rem; font-size:.95rem; }
.ofc-rail { grid-area:rail; border-top:1px solid var(--line); }
.ofc-links { display:flex; list-style:none; margin:0; padding:0; }
.ofc-links li { margin:0; }
.ofc-links a { display:block; padding:.62rem 1.05rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--ink); text-decoration:none; border-right:1px solid var(--line); min-height:44px; line-height:1.9; }
.ofc-links li:first-child a { border-left:1px solid var(--line); }
.ofc-links a:hover, .ofc-links a:focus-visible { background:var(--paper-2); box-shadow:inset 0 -3px 0 var(--accent); }
.ofc-links .ofc-only-m { display:none; }
.nav-toggle { display:none; grid-area:cta; align-items:center; gap:.45rem; min-height:44px; padding:0 .9rem; border:1px solid var(--ink); border-radius:var(--radius-sm); background:transparent; color:var(--ink); font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.nav-toggle svg { width:20px; height:20px; }
@media (max-width:760px){
  .ofc-head-in { grid-template-areas:"brand cta"; }
  .ofc-cta { display:none; }
  .nav-toggle { display:inline-flex; }
  .ofc-rail { display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--ink); box-shadow:0 14px 24px rgba(0,0,0,.18); }
  .ofc-rail[data-open="true"] { display:block; }
  .ofc-links { display:grid; grid-template-columns:1fr 1fr; }
  .ofc-links a { border:0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:.8rem 1rem; }
  .ofc-links li:first-child a { border-left:0; }
  .ofc-links .ofc-only-m { display:block; grid-column:1 / -1; }
  .ofc-links .ofc-only-m a { background:var(--accent); color:#fff; text-align:center; border:0; box-shadow:none; }
  .ofc-brand strong { font-size:1.12rem; }
}

/* ---- HERO: compact, copy beside a hand-drawn chart of the inner fjord ---- */
.ofc-hero { background:linear-gradient(180deg,var(--paper),var(--paper-2)); border-bottom:1px solid var(--line); padding-block:clamp(1.2rem,2.6vw,2.2rem); }
.ofc-hero-grid { display:grid; grid-template-columns:1.3fr .95fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:center; }
.ofc-hero h1 { font-size:clamp(1.7rem,1.15rem + 1.8vw,2.55rem); line-height:1.12; margin:0 0 .7rem; max-width:none; }
.ofc-hero .lede { font-size:var(--step-0); color:var(--ink); margin:0 0 .9rem; }
.ofc-chips { list-style:none; margin:0 0 1rem; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.ofc-chips li { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--sea); border-radius:var(--radius-sm); padding:.5rem .7rem; }
.ofc-chips b { display:block; font-family:var(--serif); font-size:1.2rem; line-height:1.15; color:var(--ink); }
.ofc-chips span { display:block; font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); line-height:1.3; margin-top:.15rem; }
.ofc-hero-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.7rem; }
.ofc-hero .cta-proof { margin:0; font-size:var(--step--1); color:var(--ink-soft); }
.ofc-hero .cta-proof .gold { color:var(--ink); font-weight:700; }
.ofc-chart { margin:0; background:var(--ofc-water); border:1px solid var(--ofc-line); border-radius:var(--radius); overflow:hidden; }
.ofc-chart svg { display:block; width:100%; height:auto; }
.ofc-chart figcaption { background:var(--surface); border-top:1px solid var(--line); font-family:var(--mono); font-size:.74rem; line-height:1.4; color:var(--ink-soft); padding:.45rem .7rem; }
.ofc-chart figcaption i { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:var(--accent); vertical-align:-1px; margin-right:.25rem; }
.ofc-chart figcaption .lh { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; border:2px solid var(--ink); vertical-align:-1px; margin:0 .25rem 0 .6rem; }
@media (max-width:860px){ .ofc-hero-grid { grid-template-columns:1fr; } .ofc-chart { max-width:34rem; } }
@media (max-width:520px){ .ofc-chips { grid-template-columns:1fr 1fr; } .ofc-chips li:last-child { grid-column:1 / -1; display:flex; align-items:baseline; gap:.6rem; } .ofc-chips li:last-child span { margin-top:0; } .ofc-hero-actions .btn { flex:1 1 100%; } }

/* chart svg paint (all vars, so light and dark both work) */
.c-water { fill:var(--ofc-water); }
.c-land { fill:var(--ofc-land); stroke:var(--ofc-line); stroke-width:1.2; }
.c-cont { fill:none; stroke:var(--ofc-cont); stroke-width:1; stroke-dasharray:3 4; }
.c-lbl { font-family:var(--display); font-size:14px; fill:var(--ink); paint-order:stroke; stroke:var(--ofc-halo); stroke-width:4px; stroke-linejoin:round; }
.c-lbl.lg { font-size:17px; }
.c-lbl.it { font-style:italic; fill:var(--ink-soft); }
.c-pin { fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.c-pin-t { font-family:var(--mono); font-size:13px; font-weight:700; fill:#fff; text-anchor:middle; }
.c-lh { fill:var(--surface); stroke:var(--ink); stroke-width:2.4; }
.c-line { stroke:var(--ink-soft); stroke-width:1; fill:none; }
.c-jetty { fill:var(--ink-soft); }
.c-bld { fill:var(--ink-soft); }

/* ---- FLEET: filter switch + cards ---- */
.ofc-seg { display:none; flex-wrap:wrap; gap:.5rem; margin:var(--s3) 0 var(--s3); align-items:center; }
.js .ofc-seg { display:flex; }
.ofc-seg button { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.4rem .95rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-family:var(--display); font-weight:600; font-size:.95rem; cursor:pointer; white-space:nowrap; }
.ofc-seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ofc-seg button:hover { border-color:var(--ink); }
.ofc-seg .ofc-count { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin-left:auto; }
.ofc-dot { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; background:var(--tc,var(--sea)); flex:0 0 auto; }
.ofc-seg button[aria-pressed="true"] .ofc-dot { box-shadow:0 0 0 2px var(--paper); }
.tour-row[data-cat="guided-silent-electric-cruise"], .tour-row[data-cat="electric-sightseeing-cruise"] { --tc:var(--t-elec); }
.tour-row[data-cat="traditional-sailing-sightseeing"] { --tc:var(--t-sail); }
.tour-row[data-cat="evening-shrimp-buffet-cruise"], .tour-row[data-cat="evening-dinner-cruise"] { --tc:var(--t-eve); }
.tour-row[data-cat="private-cruise"] { --tc:var(--t-priv); }
.ofc-fleet .tour-list { gap:var(--s3); margin-bottom:var(--s3); }
.ofc-fleet .tour-row { border-left:6px solid var(--tc,var(--sea)); padding:var(--s3) var(--s4) var(--s3) var(--s3); box-shadow:none; }
.ofc-fleet .tour-row.is-lead { border-color:var(--line); border-left-color:var(--tc); box-shadow:0 0 0 2px var(--gold); }
.ofc-fleet .tour-row.has-media { grid-template-columns:230px 1fr auto; align-items:stretch; }
.ofc-fleet .tour-row .tr-media img { min-height:0; height:100%; max-height:190px; }
.ofc-fleet .tour-row .tr-desc { font-size:var(--step--1); }
.ofc-fleet .tour-row h3 { font-size:1.15rem; margin-top:0; }
.ofc-fleet .tr-cta { justify-content:center; min-width:11rem; }
.ofc-fleet [hidden] { display:none !important; }
@media (max-width:860px){
  .ofc-fleet .tour-row.has-media { grid-template-columns:1fr; }
  .ofc-fleet .tour-row .tr-media img { max-height:none; height:auto; aspect-ratio:3/2; }
  .ofc-fleet .tr-cta { align-items:stretch; text-align:left; }
}

/* ---- TABS / SWITCH (situation picker, shrimp or jazz) ---- */
.ofc-tablist { display:none; gap:.4rem; flex-wrap:wrap; margin:var(--s3) 0 var(--s3); }
.js .ofc-tablist { display:flex; }
.ofc-tablist button { min-height:44px; padding:.45rem 1rem; border:1px solid var(--line); border-bottom:3px solid var(--line); border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--surface-2); color:var(--ink); font-family:var(--display); font-weight:600; font-size:.95rem; cursor:pointer; }
.ofc-tablist button[aria-selected="true"] { background:var(--surface); border-bottom-color:var(--accent); }
.ofc-panel { margin-bottom:var(--s4); }
.ofc-panel[hidden] { display:none; }
.ofc-pg { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s4); align-items:stretch; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ofc-pg.flip { grid-template-columns:1fr 1.25fr; }
.ofc-pg.flip .ofc-ph { order:-1; }
.ofc-pt { padding:var(--s3) 0 var(--s3) var(--s4); align-self:center; }
.ofc-pg.flip .ofc-pt { padding:var(--s3) var(--s4) var(--s3) 0; }
.ofc-pt h3 { margin-top:0; }
.ofc-pt p:last-child { margin-bottom:0; }
.ofc-ph { margin:0; position:relative; min-height:230px; }
.ofc-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .ofc-pg, .ofc-pg.flip { grid-template-columns:1fr; gap:0; }
  .ofc-pt, .ofc-pg.flip .ofc-pt { padding:var(--s3) var(--s3) var(--s3); }
  .ofc-pg .ofc-ph, .ofc-pg.flip .ofc-ph { order:-1; min-height:0; aspect-ratio:3/2; }
  .ofc-tablist button { flex:1 1 calc(50% - .4rem); }
}
.ofc-facts { list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; }
.ofc-facts li { border-top:1px solid var(--line); padding-top:.4rem; font-size:var(--step--1); line-height:1.35; }
.ofc-facts b { display:block; font-family:var(--serif); font-size:1.15rem; color:var(--ink); line-height:1.2; }
@media (max-width:480px){ .ofc-facts { grid-template-columns:1fr 1fr; } }

/* ---- STEPS (boarding to return) ---- */
.ofc-steps { list-style:none; counter-reset:st; margin:var(--s3) 0 var(--s4); padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.ofc-steps li { counter-increment:st; position:relative; padding:2.6rem .8rem 0 0; font-size:var(--step--1); line-height:1.4; }
.ofc-steps li::before { content:counter(st); position:absolute; top:0; left:0; width:2rem; height:2rem; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--mono); font-weight:700; display:grid; place-items:center; z-index:1; }
.ofc-steps li::after { content:""; position:absolute; top:1rem; left:2rem; right:0; height:0; border-top:2px dashed var(--ofc-cont); }
.ofc-steps li:last-child::after { display:none; }
.ofc-steps b { display:block; font-family:var(--serif); font-size:1.08rem; color:var(--ink); margin-bottom:.15rem; }
@media (max-width:760px){
  .ofc-steps { grid-template-columns:1fr; gap:.9rem; }
  .ofc-steps li { padding:0 0 0 2.9rem; min-height:2rem; }
  .ofc-steps li::after { top:2rem; bottom:-.9rem; left:1rem; right:auto; height:auto; border-top:0; border-left:2px dashed var(--ofc-cont); }
}

/* ---- BAR CHARTS (time on the water, price) ---- */
.ofc-fig { margin:var(--s3) 0 var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.ofc-fig figcaption { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); line-height:1.45; margin-top:var(--s2); }
.ofc-fig h4 { font-family:var(--serif); font-size:1.1rem; margin:0 0 .6rem; }
.ofc-leg { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; list-style:none; margin:0 0 .7rem; padding:0; font-size:.85rem; }
.ofc-leg li { white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; }
.ofc-bars { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ofc-bars li { display:grid; grid-template-columns:15rem 1fr; gap:.2rem .9rem; align-items:center; }
.ofc-bars .bl { font-size:.92rem; line-height:1.25; }
.ofc-bars .bl small { display:block; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.ofc-track { position:relative; height:1.5rem; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--tick,16.6667%) - 1px),var(--line) calc(var(--tick,16.6667%) - 1px),var(--line) var(--tick,16.6667%)); }
.ofc-bar { position:absolute; top:2px; bottom:2px; left:0; width:var(--w); background:var(--tc,var(--sea)); border-radius:2px; }
.ofc-bar.rng { left:var(--l); width:var(--w); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 4px,transparent 4px,transparent 8px); }
.ofc-bar .v { position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:.4rem; font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.ofc-bar.in .v { left:auto; right:.4rem; margin:0; color:#fff; }
.ofc-axis { display:grid; grid-template-columns:15rem 1fr; gap:.9rem; margin-top:.3rem; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.ofc-axis div { display:flex; justify-content:space-between; }
.ofc-pill { display:inline-block; font-family:var(--mono); font-size:.78rem; border:1px dashed var(--ink-soft); border-radius:999px; padding:.15rem .7rem; color:var(--ink); }
@media (max-width:640px){
  .ofc-bars li { grid-template-columns:1fr; gap:.15rem; }
  .ofc-axis { grid-template-columns:1fr; }
  .ofc-fig { padding:var(--s3); }
}

/* ---- STAT TILES WITH ICONS (silent boat) ---- */
.ofc-stats { list-style:none; margin:var(--s3) 0 var(--s4); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.ofc-stats li { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .8rem; display:flex; flex-direction:column; gap:.2rem; }
.ofc-stats svg { width:34px; height:34px; stroke:var(--sea); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ofc-stats b { font-family:var(--serif); font-size:1.25rem; line-height:1.15; }
.ofc-stats span { font-size:var(--step--1); color:var(--ink-soft); line-height:1.3; }
@media (max-width:900px){ .ofc-stats { grid-template-columns:1fr 1fr; } }

/* ---- VERSUS (two audio boats) ---- */
.ofc-vs { display:grid; grid-template-columns:9rem 1fr 1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin:var(--s3) 0 var(--s4); overflow:hidden; }
.ofc-vs > div { padding:.6rem .9rem; border-bottom:1px solid var(--line); font-size:var(--step--1); line-height:1.35; }
.ofc-vs > div:nth-last-child(-n+3) { border-bottom:0; }
.ofc-vs .vh { font-family:var(--serif); font-weight:700; font-size:1.1rem; background:var(--paper-2); }
.ofc-vs .vh.e { border-top:4px solid var(--t-elec); }
.ofc-vs .vk { font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); background:var(--surface-2); }
@media (max-width:640px){
  .ofc-vs { grid-template-columns:1fr 1fr; }
  .ofc-vs .vk { grid-column:1 / -1; padding:.35rem .9rem; }
  .ofc-vs > div:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }
  .ofc-vs > div:nth-last-child(-n+2) { border-bottom:0; }
  .ofc-vs .vh.blank { display:none; }
}

/* ---- INCLUDES / EXCLUDES ---- */
.ofc-inex { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.ofc-inex div { background:var(--surface-2); border-radius:var(--radius-sm); padding:.7rem .9rem; }
.ofc-inex h4 { font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .4rem; color:var(--ink-soft); }
.ofc-inex ul { list-style:none; margin:0; padding:0; font-size:var(--step--1); }
.ofc-inex li { padding:.2rem 0 .2rem 1.3rem; position:relative; line-height:1.35; }
.ofc-inex .yes li::before { content:"+"; position:absolute; left:0; font-weight:700; color:var(--ok); font-family:var(--mono); }
.ofc-inex .no li::before { content:"\2212"; position:absolute; left:0; font-weight:700; color:var(--accent); font-family:var(--mono); }
@media (max-width:480px){ .ofc-inex { grid-template-columns:1fr; } }

/* ---- NO-LISTING DIAGRAM ---- */
.ofc-gone { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s3); align-items:stretch; margin:var(--s3) 0 var(--s4); }
.ofc-gone-box { border:2px dashed var(--ink-soft); border-radius:var(--radius); padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:.35rem; background:var(--surface-2); }
.ofc-gone-box strong, .ofc-gone-next b { font-family:var(--serif); font-size:1.15rem; line-height:1.2; }
.ofc-gone-box span { font-size:var(--step--1); color:var(--ink-soft); }
.ofc-stamp { align-self:flex-start; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border:1px solid var(--accent); padding:.1rem .5rem; border-radius:3px; transform:rotate(-2deg); }
.ofc-arrow { align-self:center; font-family:var(--mono); font-size:1.8rem; color:var(--ink-soft); }
.ofc-gone-next { border:1px solid var(--line); border-left:6px solid var(--t-eve); border-radius:var(--radius); padding:var(--s3) var(--s4); background:var(--surface); display:flex; flex-direction:column; gap:.4rem; }
.ofc-gone-next a { font-weight:700; }
@media (max-width:760px){ .ofc-gone { grid-template-columns:1fr; } .ofc-arrow { transform:rotate(90deg); justify-self:center; } }

/* ---- PIERS: chart + list + map ---- */
.ofc-piers-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
.ofc-piers-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-2); min-height:340px; position:relative; }
.ofc-piers-wrap .map-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ofc-pierchart { margin:0; background:var(--ofc-water); border:1px solid var(--ofc-line); border-radius:var(--radius); overflow:hidden; }
.ofc-pierchart svg { display:block; width:100%; height:auto; }
.ofc-pierchart g[data-pier] { transition:opacity .15s; }
.ofc-pierchart.has-sel g[data-pier]:not(.is-on) { opacity:.3; }
.ofc-pierlist { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-top:0; }
.ofc-pierlist li { border-top:1px solid var(--line); }
.ofc-pierlist li:first-child { border-top:0; }
.ofc-pierlist button { all:unset; box-sizing:border-box; display:block; width:100%; padding:.6rem .9rem; cursor:default; font-size:var(--step--1); line-height:1.4; }
.js .ofc-pierlist button { cursor:pointer; min-height:44px; }
.ofc-pierlist button b { font-family:var(--serif); font-size:1.02rem; display:block; }
.ofc-pierlist li.is-on button { background:var(--paper-2); box-shadow:inset 5px 0 0 var(--accent); }
.ofc-pierlist button:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
@media (max-width:860px){ .ofc-piers-wrap { grid-template-columns:1fr; } .ofc-piers-wrap .map-embed { min-height:300px; } }

/* ---- CARDS + CHOOSER restyle ---- */
.chooser-card.is-evening { background:var(--footer); border-color:var(--footer); color:#fff; }
.table-hybrid thead th { font-family:var(--display); }
.answered-group p strong { font-family:var(--serif); }

/* ---- FOOTER: colophon index ---- */
.ofc-foot { background:var(--footer); color:#C9D6D2; margin-top:var(--s6); border-top:4px solid var(--accent); }
.ofc-foot a { color:#E3ECE8; text-decoration:none; }
.ofc-foot a:hover { text-decoration:underline; }
.ofc-foot-lead { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s5); padding-block:var(--s5) var(--s4); align-items:start; }
.ofc-foot .ofc-brand { color:#fff; padding:0; }
.ofc-foot .ofc-brand small { color:#9FB4AF; }
.ofc-foot-lead p { color:#C9D6D2; max-width:none; font-size:var(--step--1); margin:.8rem 0 0; }
.ofc-foot .socials a { border-color:rgba(255,255,255,.28); border-radius:4px; }
.ofc-foot-idx { margin:0; border-top:1px solid rgba(255,255,255,.18); }
.ofc-foot-idx > div { display:grid; grid-template-columns:9rem 1fr; gap:var(--s3); padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.18); }
.ofc-foot-idx dt { font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:#E9CE98; padding-top:.15rem; }
.ofc-foot-idx dd { margin:0; display:flex; flex-wrap:wrap; gap:.3rem 0; }
.ofc-foot-idx dd a { padding:.3rem 1rem .3rem 0; margin-right:1rem; border-right:1px solid rgba(255,255,255,.22); min-height:32px; font-size:var(--step--1); }
.ofc-foot-idx dd a:last-child { border-right:0; }
.ofc-foot .disclosure { color:#B7C7C2; border-top:0; margin-top:0; padding-block:var(--s3) var(--s4); }
.ofc-foot .disclosure strong { color:#fff; }
@media (max-width:760px){
  .ofc-foot-lead { grid-template-columns:1fr; gap:var(--s3); }
  .ofc-foot-idx > div { grid-template-columns:1fr; gap:.3rem; }
  .ofc-foot-idx dd a { padding-block:.5rem; min-height:44px; display:inline-flex; align-items:center; }
}
@media (prefers-reduced-motion: reduce){ html.js { scroll-behavior:auto; } .ofc-pierchart g[data-pier] { transition:none; } }

/* ---- DARK SCHEME ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#E8EEEA; --ink-soft:#AABCB7; --paper:#0E1819; --paper-2:#152426; --surface:#182B2D; --surface-2:#122022; --line:#2F4749;
    --brand:#8FCBC2; --brand-deep:#B6E0DA; --accent:#C2503C; --accent-deep:#A63F2D; --sea:#8FBEC9; --sea-deep:#AAD2DB;
    --gold:#D4AA4A; --gold-soft:#3A3114; --gold-ink:#F0DEA8; --slate:#8FA7A3; --footer:#091213; --ok:#7CC9A0;
    --ofc-water:#12292E; --ofc-land:#1F3430; --ofc-line:#3C5A55; --ofc-cont:#3A5C62; --ofc-halo:#0E1819;
    --t-elec:#5FA7B5; --t-sail:#B58450; --t-eve:#A98BB0; --t-priv:#C9A44E;
  }
  :root:not([data-theme="light"]) .btn-brand { background:#2B5E5B; color:#fff; }
  :root:not([data-theme="light"]) .ofc-bar .v { color:var(--ink); }
  :root:not([data-theme="light"]) .ofc-bar.in .v { color:#0E1819; }
  :root:not([data-theme="light"]) .ofc-bar.rng { background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 4px,transparent 4px,transparent 8px); }
  :root:not([data-theme="light"]) .ofc-seg button[aria-pressed="true"] { background:var(--ink); color:#0E1819; }
  :root:not([data-theme="light"]) .ofc-tablist button[aria-selected="true"] { background:var(--surface); }
  :root:not([data-theme="light"]) .ofc-links .ofc-only-m a { color:#fff; }
}
:root[data-theme="dark"] {
  --ink:#E8EEEA; --ink-soft:#AABCB7; --paper:#0E1819; --paper-2:#152426; --surface:#182B2D; --surface-2:#122022; --line:#2F4749;
  --brand:#8FCBC2; --brand-deep:#B6E0DA; --accent:#C2503C; --accent-deep:#A63F2D; --sea:#8FBEC9; --sea-deep:#AAD2DB;
  --gold:#D4AA4A; --gold-soft:#3A3114; --gold-ink:#F0DEA8; --slate:#8FA7A3; --footer:#091213; --ok:#7CC9A0;
  --ofc-water:#12292E; --ofc-land:#1F3430; --ofc-line:#3C5A55; --ofc-cont:#3A5C62; --ofc-halo:#0E1819;
  --t-elec:#5FA7B5; --t-sail:#B58450; --t-eve:#A98BB0; --t-priv:#C9A44E;
}

/* ---- polish pass 1 ---- */
.section > h2:first-child { margin-top:0; }
.section { padding-block:var(--s4) var(--s4); }
.section + .section { padding-top:var(--s4); }
@media (max-width:520px){
  .ofc-hero h1 { font-size:1.62rem; }
  .ofc-hero .lede { font-size:1rem; margin-bottom:.7rem; }
  .ofc-hero-actions .btn-ghost { display:none; }
  .ofc-chips li { padding:.4rem .6rem; }
  .ofc-chips b { font-size:1.05rem; }
  .ofc-seg { gap:.35rem; margin:var(--s2) 0; }
  .ofc-seg button { min-height:40px; padding:.25rem .7rem; font-size:.85rem; }
  .ofc-seg .ofc-count { flex:1 1 100%; margin:0; }
}

/* ---- polish pass 2 (contrast) ---- */
.ofc-bar.rng .v { background:var(--tc); padding:0 .35rem; border-radius:2px; color:#fff; }
.ofc-foot .ofc-brand strong em { color:#E9CE98; }
.cta-banner strong, .cta-banner .cta-title { color:#fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ofc-head .ofc-brand strong em { color:#EBA593; }
  :root:not([data-theme="light"]) .ofc-bar.rng .v { color:#0E1819; }
}

.cta-banner { background:linear-gradient(120deg,#1E4543,#14292A); border-color:#14292A; }

/* CRO module boxes keep their light surfaces in dark mode, so their text must stay dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body :is(.cro-summary,.cro-widget,.cro-support,#cro-exit,.cro-floating) { color:#20241f; }
  :root:not([data-theme="light"]) body :is(.cro-summary,.cro-widget,.cro-support,#cro-exit,.cro-floating) :is(h2,h3,p,label,summary,span,div,output) { color:#20241f; }
  :root:not([data-theme="light"]) body .cro-widget .cro-eyebrow { color:#15586a; }
  :root:not([data-theme="light"]) body :is(.cro-text,.cro-bridge) .cro-link { color:var(--brand) !important; }
  :root:not([data-theme="light"]) body .cro-text { border-left-color:var(--brand); }
  :root:not([data-theme="light"]) body .cro-image figcaption { color:var(--ink-soft); }
  :root:not([data-theme="light"]) body .cro-image .cro-eyebrow { color:var(--brand); }
}
.cta-proof .gold, .bp-rating .gold, .tour-picks .tp-proof .gold { color:var(--gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.cta-proof,.bp-rating,.tp-proof) .gold { color:var(--gold); } }

.ofc-ban { margin:var(--s3) 0 var(--s4); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.ofc-ban img { width:100%; height:300px; object-fit:cover; object-position:center 45%; }
.ofc-ban figcaption { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); padding:.5rem .8rem; }
@media (max-width:640px){ .ofc-ban img { height:auto; aspect-ratio:3/2; } }

/* Bygdoy timeline */
.ofc-tl { margin:.4rem 0 .7rem; }
.ofc-tl-bar { position:relative; height:1.1rem; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; }
.ofc-tl-seg { position:absolute; left:0; top:0; bottom:0; width:var(--w); background:var(--t-elec); border-radius:2px 0 0 2px; }
.ofc-tl-pin { position:absolute; top:-5px; left:var(--l); width:.9rem; height:.9rem; margin-left:-.45rem; border-radius:50%; background:var(--accent); border:2px solid var(--surface); }
.ofc-tl-lbl { display:flex; justify-content:space-between; gap:.6rem; margin-top:.5rem; font-family:var(--mono); font-size:.78rem; line-height:1.35; color:var(--ink); }
.ofc-tl-lbl .stop { color:var(--accent); font-weight:700; }
@media (max-width:640px){ .ofc-tl-lbl { flex-direction:column; } }
.ofc-tl-lbl .stop { color:var(--ink); }

/* ---- fix round (10-31) ---- */
/* cards: one price block, equal heights, CTA pinned to the bottom */
.ofc-fleet .tour-row .tr-cta { justify-content:flex-end; align-self:stretch; }
.ofc-fleet .tour-row .tr-price { min-height:3.1rem; }
/* FAQ: label and plus sign share a flex row, never absolutely placed */
.faq summary { display:flex; align-items:center; gap:.8rem; }
.faq summary::after { float:none; flex:none; margin-left:auto; }
/* More answers: two balanced columns */
.answered-grid { grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .answered-grid { grid-template-columns:1fr; } }
/* daylight / evening cards: no empty bottoms */
.chooser-strip { margin:var(--s3) 0 var(--s4); }
.chooser-card { padding:var(--s3) var(--s4); }
.chooser-card .ch-links { margin-top:auto; padding-top:.4rem; }
/* dinner section: plain paragraph after the dashed note */
.ofc-gone { grid-template-columns:1fr; margin-bottom:var(--s2); }
.ofc-gone-p { margin:0 0 var(--s3); }
/* pier chart labels stay readable on phones */
.ofc-pierchart .c-lbl { font-size:17px; }
.ofc-pierchart .c-lbl.lg { font-size:20px; }
.ofc-pierchart .c-pin-t { font-size:15px; }
/* dark scheme: dim the map embed so it does not glare */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-embed iframe { filter:invert(.9) hue-rotate(180deg) brightness(.85) contrast(.9); } }
:root[data-theme="dark"] .map-embed iframe { filter:invert(.9) hue-rotate(180deg) brightness(.85) contrast(.9); }
@media (min-width:900px){ .compare-table td[data-label="From"] { white-space:nowrap; } }
@media (max-width:520px){ .ofc-chips li:last-child b { white-space:nowrap; } .ofc-chips li:last-child span { flex:1; min-width:0; } }