/* ============================================================
   Napali Coast Boat Tours - Phase 3 Design System
   IDENTITY: "Indigo Dusk And Sunset Coral"
   Deep indigo for the ocean at dusk, a sunset coral reserved for the one CTA, on a warm
   sand ground. Support tokens are DERIVED from the nine approved cores by
   build/lib/palette-apply.mjs, which measures every contrast pair and refuses to write
   when one misses its floor.
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* Focus ring. Used by .stp-pin:focus-visible. Was UNDEFINED in the scaffold, which makes
     the whole `outline: 3px solid var(--focus)` declaration INVALID, so keyboard users got no
     visible focus ring on the map pins at all. 16 of 250 portfolio sites carry the same gap. */
  --focus:      #B04A33;


  /* ---- CORE COLOUR TOKENS ----------------------------------------------------------------
     AUTHORED HERE, not inherited. The scaffold arrived with NO :root colour block at all: every
     --brand / --paper / --ink reference in this file resolved to nothing outside a `.band-*`
     section, so links fell back to the browser's default blue and the body to the browser's
     default white. The donor site ships the same hole to production, so
     this is a lineage defect, not a local one. Values are the nine approved cores from
     research/layout-approval.md plus the support set build/lib/palette-apply.mjs derives from
     them by relationship, every pair measured against its contrast floor before writing.
     Palette "Indigo Dusk And Sunset Coral": deep indigo reads as ocean at dusk, the sunset coral
     is spent on the one CTA and is earned by the product (9 of 27 tours are sunset sails), and
     the ground is warm sand rather than the donor's cool white (Oleg's standing rule: vary the
     background per site). Indigo was chosen against a real collision scan of 154 siblings:
     240-269deg was the emptiest band in the portfolio at 5 sites, tropical turquoise the most
     crowded at 42. ---- */
  --ink:#141C2B; --ink-soft:#4A576F; --slate:#5A6270;
  --paper:#F6F1E7; --paper-2:#EFE4CF; --surface:#FFFFFF; --surface-2:#FCFBF8; --line:#EDE2CC;
  --brand:#283A66; --brand-deep:#1E2B4C;
  --accent:#B04A33; --accent-deep:#96402C; --accent-ink:#FFFFFF;
  --sea:#6E8FB5; --sea-deep:#436184;
  --gold:#C98A3A; --gold-deep:#7B5422; --gold-light:#D3AF81; --gold-soft:#F3EDE6; --gold-ink:#63431B;
  --footer:#14192B;
  --ok:#274385; --warn:#B03A22;
  /* ---- Palette "Indigo Dusk & Sunset Coral". Deep indigo for ocean at dusk, a sunset coral reserved for the one CTA, on a warm sand ground. ---- */
  --display: "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale */
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* soft round: stone-and-stucco curves, not hard-edged brochure */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent);
}

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

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

/* ---- CTA ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--display); font-weight:700; font-size: var(--step-0);
  padding: .85rem 1.4rem; border-radius: 999px; text-decoration:none; border:0; cursor:pointer;
  min-height: 48px; transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); }
.btn-brand { background: var(--brand); color:#fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border:2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---- HEADER / NAV ---- */
/* The two fixed overlays are the only surfaces whose OWN EDGE has to be visible against the
   page: --line is a card hairline and measures 1.1:1 against the ground, which is nothing. Both
   edges below are mixed to ~3:1 (WCAG 1.4.11) in light AND dark, and both are color-mix over the
   site tokens rather than hand-typed rgba, which is what rule 41 exists to prevent. */
.site-header { position: sticky; top:0; z-index:40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper)); }
@media (max-width: 344px) { .site-header .brand { font-size: .92rem; letter-spacing: -.01em; } }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo { width:28px; height:28px; border-radius:7px; display:block; }
.brand b { color: var(--accent); }
.nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); }
.nav-links a:hover { color:var(--brand-deep); }
.nav-links a.btn-brand { color:#fff; }
.nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); }
/* Widened from 760px (2026-09-04, Rule-21 recheck): the full brand text + 5 nav links + CTA
   button do not fit in one row between 761-900px, causing visible overlap on tablet widths.
   960px keeps the collapsed menu through that range without touching desktop nav spacing. */
@media (max-width: 960px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; }
  .nav-links[data-open="true"] { display:flex; }
}

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

/* ---- HERO: FULL-BLEED IMAGE (Oleg, 2026-09-16) ----------------------------------------
   Rebuilt, not inherited. The block that was here came from a two-generations-back Iceland
   site, was referenced by nothing, and had three faults this one must not repeat: it was a CSS
   background-image (so no fetchpriority, no responsive source, no intrinsic size), it put white
   text DIRECTLY on photography with no scrim, and it had no reserved height so the H1 reflowed
   when the image arrived.

   Contrast is the whole risk here. Photography is not a colour token: a bright patch of sea
   under the headline will fail AA no matter what the stylesheet says, so the scrim below is
   opaque enough at the bottom that the measured ratio holds on THIS hero at 390/768/1440, and
   it was measured in a headless browser rather than reasoned about. If the hero image is ever
   replaced, re-measure. */
.hero-full {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Reserved height, so the H1 never reflows when the image lands. svh not vh: on iOS vh
     includes the retracting toolbar and the hero jumps on first scroll. */
  min-height: clamp(30rem, 76svh, 46rem);
  /* Clips the hero image AND the copy wash, whose negative inset otherwise pushes 19px of
     horizontal page scroll at 390 and 768 (measured, not assumed). */
  overflow: hidden;
  /* Painted BEFORE the image decodes, so there is no white flash and the scrim has something
     to sit on if the image 404s. */
  background: #0B1222;
  border-bottom: 3px solid var(--accent);
}
.hero-full-img, .hero-full-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-full-img img {
  object-fit: cover;
  /* Bias upward: the cliffs are the subject and the copy sits over the lower third. */
  object-position: 50% 38%;
}
/* Scrim. Four stops rather than two: a single linear fade either greys the whole photograph or
   leaves the headline band too light. Kept in ::after so no extra element is needed. */
.hero-full::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, #0B1222 92%, transparent) 0%,
    color-mix(in srgb, #0B1222 78%, transparent) 30%,
    color-mix(in srgb, #0B1222 42%, transparent) 62%,
    color-mix(in srgb, #0B1222 10%, transparent) 88%,
    transparent 100%);
}
.hero-full-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: var(--s7) var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s5);
  align-items: end;
}
/* The copy column carries its OWN wash, not just the page-wide scrim.
   MEASURED, not reasoned: with the gradient scrim alone, the H1 came back at 1.18:1 at 390px and
   1.26:1 at 768px against the real rendered pixels, because the stacked layout lifts the headline
   out of the strong (bottom) end of the gradient and onto a bright patch of sea. It read fine in
   the stylesheet and fine at 1440 (4.95:1), which is exactly the trap rule 43 exists for.
   A local wash is also robust to the hero image being replaced later, which a tuned page-wide
   gradient is not. z-index -1 sits behind the text but still inside .hero-full-inner's stacking
   context, so it stays above the scrim and below the copy. */
.hero-full-copy { min-width: 0; position: relative; }
.hero-full-copy::before {
  content: ""; position: absolute; z-index: -1;
  inset: -1.1rem -1.4rem -1.1rem -1.4rem;
  border-radius: var(--radius);
  background: linear-gradient(105deg,
    color-mix(in srgb, #0B1222 88%, transparent) 0%,
    color-mix(in srgb, #0B1222 80%, transparent) 55%,
    color-mix(in srgb, #0B1222 46%, transparent) 84%,
    transparent 100%);
}
.hero-full h1 { color: #fff; max-width: 18ch; margin-bottom: var(--s3); }
.hero-full .lede {
  color: #F3F1EC;           /* not pure white: 100% white on a dark scrim vibrates at this size */
  max-width: 54ch;
  font-size: var(--step-0); /* rule 31: a lead paragraph is body copy, never near-heading scale */
  margin: 0;
}
/* The booking panel keeps its OWN solid surface. Glass over a busy photograph is the single
   most common way this layout becomes unreadable, and this is the highest-intent element on
   the page. No translucency, no backdrop-filter: a backdrop-filter here would also become the
   containing block for anything fixed inside it. */
.hero-full .booking-panel {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgb(6 12 26 / .46);
}
/* The paragraph that used to sit inside the hero now runs below it on the page ground, where a
   long measure is actually readable. */
.hero-follow { padding-block: var(--s5); }
.hero-follow p { max-width: 68ch; margin: 0; }

@media (max-width: 900px) {
  .hero-full-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-full h1 { max-width: 22ch; }
  /* Stacked layout puts the copy near the middle of the frame, so the gradient has to reach
     much further up than it does on desktop. */
  .hero-full::after {
    background: linear-gradient(to top,
      color-mix(in srgb, #0B1222 94%, transparent) 0%,
      color-mix(in srgb, #0B1222 86%, transparent) 46%,
      color-mix(in srgb, #0B1222 62%, transparent) 78%,
      color-mix(in srgb, #0B1222 30%, transparent) 100%);
  }
  .hero-full-copy::before { inset: -1rem -1.2rem; background: color-mix(in srgb, #0B1222 78%, transparent); }
}
@media (max-width: 640px) {
  .hero-full { min-height: clamp(26rem, 72svh, 34rem); }
  .hero-full-img img { object-position: 56% 40%; }
  .hero-full-inner { padding-block: var(--s6) var(--s5); }
}
/* Gradient drift on the scrim, the page's one animated element (rule 37). Motion only, no
   layout shift, and the end state is the resting state so disabling it loses nothing. */
@media (prefers-reduced-motion: no-preference) {
  .hero-full::after { animation: heroDrift 18s ease-in-out infinite alternate; }
  @keyframes heroDrift { from { opacity: .94; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-full::after { animation: none; opacity: 1; }
}

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

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

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

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

/* ---- 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-deep); letter-spacing:2px; }
.stars-num { font-weight:700; color:var(--ink); }
.trust .stars { font-size:1.15rem; margin-top:.2rem; }
.pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; }
@media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } }

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

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

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

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

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

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

/* ---- RELATED TOURS ---- */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.related .rcard .rc-body { padding:var(--s3) var(--s4); }
@media (max-width:600px){ .related{ grid-template-columns:1fr; } }
/* 3-up card grid (homepage / hubs) */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.cards-3 .rcard .rc-body .btn { margin-top:auto; }
@media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } }

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

/* ---- CTA BANNER ---- */
/* Dark grounds invert the gold pair: --gold-deep is unreadable on ink, --gold is AA on it. */
.hero-full .eyebrow, .cta-banner .eyebrow, .band-ink .eyebrow,
.hero-full .stars .stars-fill::before, .cta-banner .stars .stars-fill::before,
.band-ink .stars .stars-fill::before, .cta-banner .cta-proof .gold,
.hero-full .cta-proof .gold, .band-ink .gold { color:var(--gold-light); }
.cta-banner { background:linear-gradient(120deg,#0E5045,#083029); border:1px solid #083029; color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:rgba(255,255,255,.82); max-width:52ch; margin-inline:auto; }

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

/* ---- FOOTER (the one deepest surface, deep aubergine cellar band) ---- */
.site-footer { background:var(--footer); color:#C2D8CE; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#DCEBE3; 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 #143029; border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:#A9C4B9; border-top:1px solid #143029; margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; }
/* ---- SITEWIDE TABLE STANDARD (Oleg 2026-09-04): header row in paper-2 with the display font,
   zebra rows, comfortable padding, rounded bordered container (compile.mjs wraps every bare
   <table> in .table-scroll, which scrolls sideways on phones), and bare numbers / prices
   right-aligned via class="num" (added at compile time). ---- */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s4) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.table-scroll > table, .prose table { width:100%; min-width:0; border-collapse:collapse; background:var(--surface); margin:0; font-size:var(--step--1); border:0; }
table th, table td, .prose th, .prose td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; }
table thead th, .prose thead th { background:var(--paper-2); font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.01em; }
table tbody tr:nth-child(even) > td { background:var(--surface-2); }
table tbody tr:last-child > td { border-bottom:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.prose a { color:var(--accent); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; }
.prose a.btn-brand { color:#fff; }
.prose a.btn-ghost { color:var(--ink); }
/* Hotel affiliate pill (Expedia via Travelpayouts): deliberately amber + outline so it reads as a
   secondary lodging action, distinct from the cyan GetYourGuide tour buttons. Explicit colors
   defeat the .prose a override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:#3C6B50; 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 (data-rendered SVG) ---- */
.infographic { margin:var(--s4) 0; }
.infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; }
.infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); }
.embed + p, .embed + p.small, .video-grid + p { max-width:none; }

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

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

/* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */
.btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; }
@media (max-width: 430px) { .btn-xl { font-size: var(--step-0); padding: .95rem 1.2rem; } }
.cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; }
.cta-proof .gold { color: var(--gold-light); font-weight:700; }  /* .cta-proof only ever sits on a dark ground */
.cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; }
.cta-box .cb-h { font-family:var(--display); font-weight:800; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; }
.cta-box p { max-width:44ch; margin-inline:auto; }
.cta-box p:last-child { margin-bottom:0; max-width:none; }
.cta-box .btn { margin-top:.5rem; }
.cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); }
@media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } }
/* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */
.sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 97%, transparent); backdrop-filter:blur(8px); border-top:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper));
  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-deep); 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 color-mix(in srgb, var(--ink) 50%, var(--paper));
    border-radius:999px; padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow); }
  /* 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 color-mix(in srgb, var(--ink) 50%, var(--paper)); 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 , "Arctic Rust" additions for svalbardtours.org
   ============================================================ */

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

/* ---- Editorial hairline under section headings (the industrial detail) ---- */
.section > h2:first-child, .rule-h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--sea);
  border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; }

/* A .section right after a non-.section intro block (h1+lede hero) keeps its own padding-top,
   so its first h2 does not also need its default margin-top; skipping this doubles the gap
   above the heading. Adjacent .section+.section pairs are unaffected: there the section's own
   padding-top is already zeroed and the h2 margin is the sole spacer. */
:not(.section) + .section > h2:first-child { margin-top: 0; }

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

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

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

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

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org
   2026-08-15 and re-tokened for "Arctic Rust"). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--accent); padding-left:.7rem;
}
.tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } }
.tour-picks .tp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; }
.tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
/* nowrap REMOVED: it is safe only for a genuinely short label, and this chip used to be fed a
   sentence, which nowrap then clipped at the card edge. Duration is short enough to wrap
   gracefully on the rare narrow card, and wrapping is always better than invisible text. */
.tour-picks .tp-chips .pc-chip { white-space:normal; }
/* The product one-liner that used to be crammed into a chip. A real paragraph, clamped to two
   lines so a long note cannot unbalance the grid, and clamping degrades to simply showing the
   text where line-clamp is unsupported. */
.tour-picks .tp-note {
  font-size: var(--step--1); color: var(--ink-soft); margin: .35rem 0 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--brand-deep); 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-deep); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

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


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

/* homepage per-category anchor blocks */
.cat-block { margin-top: var(--s5); scroll-margin-top: 5rem; }
.cat-block > h3 { margin-bottom: var(--s1); }
.cat-block > p.small { margin-top: 0; color: var(--ink-soft); }

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

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); }
.booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; }
.booking-panel .bp-title { font-family: var(--display); font-weight: 800; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; }
.bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); }
.bp-rating .gold { color: var(--gold-deep); font-weight: 700; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-urgency { margin: 0 0 var(--s2); font-size: var(--step--1); font-weight: 700; color: var(--brand); }
.bp-urgency::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--brand); margin-right: .45em; vertical-align: middle; }
.tr-urgency { margin: 0 0 var(--s1); font-size: var(--step--1); font-weight: 700; color: var(--brand); }
/* Phones: price + button come before the reason and the urgency line (tour-page-cro spec 1). */
@media (max-width: 859px) {
  .booking-panel { display: flex; flex-direction: column; }
  .booking-panel h1, .booking-panel .bp-title { order: 0; }
  .booking-panel .bp-rating { order: 1; }
  .booking-panel .bp-reason { order: 2; }
  .booking-panel .bp-price { order: 3; }
  .booking-panel .btn-block { order: 4; }
  .booking-panel .bp-next { order: 5; }
  .booking-panel .bp-urgency { order: 6; }
  .booking-panel .bp-facts { order: 7; }
}
.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; }

/* Keep-reading: deterministic sibling-article links at the end of every article */
.keep-reading{margin:var(--s5) auto 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.keep-reading h2{font-size:1.1rem;margin:0 0 .6rem}
.keep-reading ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.keep-reading li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.keep-reading a{font-weight:600}
.keep-reading .kr-kind{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}

/* ============================================================
   HOMEPAGE BLUEPRINT (Oleg 2026-09-04): quick answer, takeaways, category compare table,
   inclusions matrix, stat grid, season strip + cards, wine cards, spot map, testimonials,
   hotels, answered grid. Same tokens as the rest of the sheet: paper / ink / brand / accent / gold.
   ============================================================ */
.ico { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; flex:none; }

/* Quick answer + key takeaways */
.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); display:grid; gap:.7rem; }
.quick-answer-box p { margin:0; max-width:72ch; font-size:var(--step-0); }
.quick-answer-box p:first-child { font-size:var(--step-1); line-height:1.4; }
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.takeaways-list li { position:relative; padding-left:1.8rem; line-height:1.5; max-width:78ch; }
.takeaways-list li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--sea-deep); font-weight:800; font-family:var(--display); }

/* Category comparison table (.cmp-table): sticky first column while it scrolls sideways, cards under 640px */
.cmp-table .cat-name { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:800; color:var(--ink); }
.cmp-table .cat-name:hover span { color:var(--brand-deep); }
.cmp-table .cat-name .ico { color:var(--sea); width:1.45em; height:1.45em; }
.cmp-table th:first-child, .cmp-table td:first-child { position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line); }
.cmp-table thead th:first-child { background:var(--paper-2); }
.cmp-table tbody tr:nth-child(even) > td:first-child { background:var(--surface-2); }
.cmp-table td a:not(.cat-name) { font-weight:600; }
@media (max-width:640px){
  .cmp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display:block; width:100%; }
  .cmp-table tr { border-bottom:1px solid var(--line); padding:.5rem 0 .6rem; }
  .cmp-table tr:last-child { border-bottom:0; }
  .cmp-table td { display:grid; grid-template-columns:7rem 1fr; gap:.6rem; border:0; padding:.3rem .9rem; background:transparent !important; position:static; box-shadow:none; }
  .cmp-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; }
  .cmp-table td.num { text-align:left; white-space:normal; }
  .cmp-table td:first-child { grid-template-columns:1fr; padding-top:.6rem; }
  .cmp-table td:first-child::before { display:none; }
}

/* Inclusions matrix (.matrix-table): sticky header under the site header, glyph cells, cards under 768px */
.matrix-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--radius); overflow:clip; background:var(--surface); margin-top:var(--s4); font-size:var(--step--1); }
.matrix-table thead th { position:sticky; top:3.6rem; z-index:2; background:var(--paper-2); box-shadow:0 1px 0 var(--line); }
.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align:center; }
.matrix-table td:first-child a { font-weight:700; color:var(--ink); }
.matrix-table td:first-child a:hover { color:var(--brand-deep); }
.matrix-table td.num, .matrix-table th.num { text-align:right; font-family:var(--display); font-weight:800; font-size:var(--step-0); }
.matrix-table small { display:block; color:var(--ink-soft); font-size:.74rem; line-height:1.25; margin-top:.25rem; }
.glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; }
.glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; }
.glyph.yes { background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--sea); }
.glyph.no { background:color-mix(in srgb, var(--slate) 12%, transparent); color:var(--brand); }
.glyph.opt { background:var(--gold-soft); color:var(--gold-ink); }
@media (max-width:768px){
  .matrix-table { border:0; border-radius:0; background:transparent; overflow:visible; }
  .matrix-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .matrix-table, .matrix-table tbody, .matrix-table tr, .matrix-table td { display:block; width:100%; }
  .matrix-table tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; }
  .matrix-table tbody tr:nth-child(even) > td { background:var(--surface); }
  .matrix-table td { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); text-align:right !important; padding:.55rem .9rem; border-bottom:1px solid var(--line); }
  .matrix-table td:last-child { border-bottom:0; }
  .matrix-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; text-align:left; flex:0 0 auto; }
  .matrix-table td:first-child { display:block; text-align:left !important; background:var(--paper-2); font-size:var(--step-0); }
  .matrix-table td:first-child::before { display:none; }
  .matrix-table small { display:inline; margin:0 0 0 .4rem; }
}

/* Destination stat grid */
.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-top:4px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; align-items:start; }
.stat-tile .st-ico { grid-row:1 / span 2; width:2rem; height:2rem; color:var(--sea); margin-top:.15rem; }
.stat-tile .st-num { font-family:var(--display); font-weight:800; font-size:var(--step-2); line-height:1.05; color:var(--brand); letter-spacing:-.02em; }
.stat-tile .st-label { font-size:var(--step--1); color:var(--ink-soft); line-height:1.4; }
@media (max-width:760px){ .stat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .stat-grid { grid-template-columns:1fr; } }

/* Season: 12-month strip + four season cards */
.month-strip { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin:var(--s4) 0; padding:0; list-style:none; }
.month-strip li { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.45rem .25rem; text-align:center; display:grid; gap:.2rem; align-content:start; }
.month-strip li b { font-family:var(--display); font-size:.85rem; }
.month-strip li span { color:var(--ink-soft); font-size:.8rem; line-height:1.15; }
.month-strip li.is-event { background:color-mix(in srgb, var(--brand) 16%, transparent); border-color:var(--sea); }
.month-strip li.is-harvest { background:var(--gold-soft); border-color:var(--gold); }
.month-strip li.is-drying { background:color-mix(in srgb, var(--slate) 10%, transparent); border-color:var(--brand); }
@media (max-width:760px){ .month-strip { grid-template-columns:repeat(6,1fr); } }
@media (max-width:420px){ .month-strip { grid-template-columns:repeat(4,1fr); } }
.season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.season-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.6rem; }
.season-card .sc-head { display:flex; align-items:center; gap:.6rem; }
.season-card .sc-head .ico { width:1.8rem; height:1.8rem; color:var(--sea); }
.season-card h3 { margin:0; font-size:var(--step-1); }
.season-card .sc-months { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--gold-ink); background:var(--gold-soft); padding:.2rem .6rem; border-radius:999px; align-self:flex-start; }
.season-card p { margin:0; font-size:var(--step--1); }
.season-card .sc-fits { margin-top:auto; border-top:1px solid var(--line); padding-top:.6rem; }
@media (max-width:900px){ .season-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .season-grid { grid-template-columns:1fr; } }

/* Wine cards */
.wine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); }
.wine-card { background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--brand); border-radius:var(--radius); padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:.5rem; }
.wine-card.is-white { border-top-color:var(--gold); }
.wine-card.is-rose { border-top-color:#C4728F; }
.wine-card.is-sweet { border-top-color:var(--slate); }
.wine-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; }
.wine-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); }
.wine-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem .6rem; font-size:.84rem; }
.wine-card dt { font-weight:700; color:var(--ink-soft); }
.wine-card dd { margin:0; }
.wine-card p { margin:0; font-size:var(--step--1); }
.wine-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; }
@media (max-width:1000px){ .wine-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .wine-grid { grid-template-columns:1fr; } }

/* Spot map: live embed + hand-drawn pin schematic */
.spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; 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:600/360; min-height:280px; background:var(--paper-2); }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap > * { min-width:0; max-width:100%; }
@media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } .spot-map-wrap .map-embed { aspect-ratio:4/3; min-height:0; } }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s2); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-pin { cursor:pointer; }
.map-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease; }
.map-pin.is-city circle { fill:var(--ink); }
.map-pin text { fill:var(--ink); font-family:var(--display); font-size:11px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.map-pin:hover circle, .map-pin:focus circle { fill:var(--sea); r:8; }
.map-pin:hover text, .map-pin:focus text { fill:var(--sea); text-decoration:underline; }
.map-pin:focus { outline:none; }
.map-pin:focus-visible circle { stroke:var(--gold); stroke-width:3; }
.map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.6rem; }
@media (max-width:860px){ .spot-map-wrap { grid-template-columns:1fr; } }

/* Testimonials */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.6rem; }
.testimonial-card .tc-stars { color:var(--gold-deep); letter-spacing:.12em; margin:0; font-size:1.05rem; }
.testimonial-card blockquote { margin:0; padding:0; border:0; font-style:normal; font-size:var(--step-0); line-height:1.5; color:var(--ink); max-width:none; }
.testimonial-card .tc-attr { font-family:var(--display); font-size:.84rem; color:var(--ink-soft); font-weight:600; margin:auto 0 0; }
.testimonials-disclaimer, .pending-line { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
@media (max-width:900px){ .testimonials-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .testimonials-grid { grid-template-columns:1fr; } }

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

/* 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 .6rem; }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; }
.answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; }
.answered-group li a:hover { text-decoration-color:currentColor; color:var(--brand-deep); }
.answered-group .ag-kind { font-family:var(--display); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; }
@media (max-width:900px){ .answered-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid { grid-template-columns:1fr; } }

/* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */
.decision-picker { --dp-key: var(--brand, var(--sea, #0C544C)); --dp-line: var(--line, #C3E4EC);
  --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #C6E6EE));
  --dp-ink: var(--ink, #0E1C1E); --dp-soft: var(--ink-soft, #436064);
  background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:var(--radius, 10px);
  padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06)); }
.decision-picker .dp-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; }
.decision-picker .dp-q legend { font-family:var(--display, inherit); font-weight:800;
  font-size:var(--step-0, 1rem); color:var(--dp-ink); padding:0 0 .45rem; }
.decision-picker .dp-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.decision-picker .dp-opt { font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600;
  color:var(--dp-ink); background:var(--dp-surface); border:1.5px solid var(--dp-line); border-radius:999px;
  padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height:40px;
  transition:border-color .15s ease, background .15s ease, color .15s ease; }
.decision-picker .dp-opt:hover { border-color:var(--dp-key); color:var(--dp-key); }
.decision-picker .dp-opt.is-on { background:var(--dp-key); border-color:var(--dp-key); color:#fff; }
.decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; }
.decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); }
.decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px);
  background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); }
.decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line);
  border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); }
.decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.decision-picker .dp-card.dp-fold { display:none; }
/* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a
   card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */
.decision-picker .dp-card[hidden] { display:none !important; }

.decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); }
.decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; }
.decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; }
.decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; }
.decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; }
.decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; }
.decision-picker .dp-facts span { font-size:.72rem; font-weight:600; background:var(--dp-surface);
  color:var(--dp-soft); border:1px solid var(--dp-line); border-radius:999px; padding:.2rem .55rem; }
.decision-picker .dp-price { margin:0; font-size:var(--step--1, .9rem); max-width:none; }
.decision-picker .dp-price strong { font-family:var(--display, inherit); font-size:var(--step-0, 1rem); }
.decision-picker .dp-rev { color:var(--dp-soft); }
.decision-picker .dp-body .btn { margin-top:auto; text-align:center; }
@media (max-width:900px){ .decision-picker .dp-results { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .decision-picker { padding:var(--s3, 1rem); }
  .decision-picker .dp-results { grid-template-columns:1fr; }
  .decision-picker .dp-card { flex-direction:row; }
  .decision-picker .dp-media { width:38%; flex:none; aspect-ratio:1/1; }
}

/* ============================================================
   PHOTO COLLAGE + TOUR EXPLORER + DEPARTURE-POINT PICKER
   Ported from dinnercruisessandiego.org's photo-collage/tour-explorer/pier-picker blocks
   (2026-09-05), renamed pier -> departure-point for a wine-tour site and re-themed onto this
   site's own --ink/--paper/--brand/--accent/--sea/--gold/--slate/--footer tokens. All three
   blocks are vanilla CSS over server-rendered markup: content is real with scripting off, and
   JS only narrows or reorders what is already there.
   ============================================================ */

.btn-sm { padding:.5rem .85rem; font-size:var(--step--1); }

/* ---- PHOTO COLLAGE (reusable block) ---- */
.photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:9rem; gap:.55rem; margin:var(--s4) 0 var(--s4); }
.photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--paper-2); box-shadow:var(--shadow); text-decoration:none; }
.photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.photo-collage .pcol-tile:hover img, .photo-collage .pcol-tile:focus-visible img { transform:scale(1.05); }
.photo-collage .pcol-cap { position:absolute; inset:auto 0 0 0; padding:1.6rem .6rem .5rem; color:#fff;
  font-family:var(--display); font-weight:700; font-size:.78rem; line-height:1.2;
  background:linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent), color-mix(in srgb, var(--ink) 0%, transparent)); }
.photo-collage .pcol-tile:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.photo-collage .pcol-tile:nth-child(1) .pcol-cap { font-size:.95rem; padding-top:2.4rem; }
.photo-collage .pcol-tile:nth-child(6) { grid-column:span 2; }
@media (max-width:900px){
  .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:7.4rem; }
  .photo-collage .pcol-tile:nth-child(6) { grid-column:span 1; }
}
@media (max-width:560px){
  .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:6.2rem; gap:.4rem; }
  .photo-collage .pcol-tile:nth-child(1) { grid-column:span 2; grid-row:span 2; }
  .photo-collage .pcol-tile:nth-child(n+7) { display:none; }
  .photo-collage .pcol-cap { font-size:.7rem; padding:1.2rem .45rem .4rem; }
}

/* ---- SHARED CHIP CONTROL (explorer + departure picker) ---- */
.ex-chip, .dep-chip { font-family:var(--body); font-size:var(--step--1); font-weight:600; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem;
  cursor:pointer; line-height:1.25; min-height:40px; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.ex-chip:hover, .dep-chip:hover { border-color:var(--sea); color:var(--sea-deep); }
.ex-chip.is-on, .dep-chip.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }
.ex-chip:focus-visible, .dep-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ---- TOUR EXPLORER (filter and sort table) ---- */
.tour-explorer { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); box-shadow:var(--shadow); }
.tour-explorer .ex-controls { display:flex; flex-direction:column; gap:.7rem; }
.tour-explorer .ex-row { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.tour-explorer .ex-lab { font-family:var(--display); font-weight:800; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-right:.3rem; min-width:5.2rem; }
.tour-explorer .ex-count { margin:var(--s3) 0 .6rem; font-size:var(--step--1); font-weight:600; color:var(--ink-soft); max-width:none; }
.tour-explorer .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tour-explorer .ex-table { width:100%; border-collapse:collapse; font-size:var(--step--1); min-width:44rem; }
.tour-explorer .ex-table th, .tour-explorer .ex-table td { padding:.6rem .7rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.tour-explorer .ex-table thead th { background:var(--paper-2); font-family:var(--display); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); border-bottom:2px solid var(--line); white-space:nowrap; }
.tour-explorer .ex-table tbody th { font-weight:700; max-width:16rem; }
.tour-explorer .ex-table tbody th a { color:var(--ink); text-decoration:none; }
.tour-explorer .ex-table tbody th a:hover { color:var(--brand-deep); text-decoration:underline; }
.tour-explorer .ex-table tbody tr:nth-child(even) { background:var(--surface-2); }
.tour-explorer .ex-sub { display:block; font-weight:500; font-size:.72rem; color:var(--ink-soft); }
.tour-explorer .ex-num { white-space:nowrap; font-family:var(--display); font-weight:700; }
.tour-explorer .ex-num .gold { color:var(--gold-ink, var(--gold)); font-weight:700; }
.tour-explorer .ex-table .btn { white-space:nowrap; }
.tour-explorer #ex-empty td { text-align:center; color:var(--ink-soft); font-style:italic; padding:var(--s4) var(--s3); }
@media (max-width:560px){ .tour-explorer { padding:var(--s3); } .tour-explorer .ex-lab { min-width:100%; } }

/* ---- DEPARTURE-POINT PICKER (rule-33c) ---- */
.departure-picker { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s4); align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow); }
.departure-picker .dep-map svg { width:100%; height:auto; display:block; border-radius:var(--radius-sm); border:1px solid var(--line); }
.departure-picker .dep-label { font-family:var(--display); font-size:12px; font-weight:700; fill:var(--sea-deep); pointer-events:none; }
.departure-picker .dep-pin { cursor:pointer; }
.departure-picker .dep-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:fill .15s ease, r .15s ease; }
.departure-picker .dep-pin text { fill:#fff; font-size:11px; font-weight:800; font-family:var(--display); pointer-events:none; }
.departure-picker .dep-pin:hover circle, .departure-picker .dep-pin:focus-visible circle { fill:var(--sea); }
.departure-picker .dep-pin.is-on circle { fill:var(--accent); r:13; }
.departure-picker .dep-pin:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.departure-picker .dep-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:var(--s3) 0; }
.departure-picker .dep-n { display:inline-block; margin-left:.3rem; font-size:.7rem; font-weight:800; opacity:.75; }
.departure-picker .dep-detail { margin:0; padding:.65rem .85rem; border-radius:var(--radius-sm);
  background:var(--paper-2); font-size:var(--step--1); line-height:1.5; max-width:none; }
.departure-picker .dep-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.departure-picker .dep-item { padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
.departure-picker .dep-item a { font-weight:700; color:var(--ink); text-decoration:none; }
.departure-picker .dep-item a:hover { color:var(--brand-deep); text-decoration:underline; }
.departure-picker .dep-meta { display:block; font-size:.74rem; color:var(--ink-soft); margin-top:.15rem; }
@media (max-width:860px){ .departure-picker { grid-template-columns:1fr; padding:var(--s3); } }

/* decision-names: tour-official (rule 36) */
.tour-official{margin:.35rem 0 0;font-size:var(--step-0,1rem);line-height:1.45;color:var(--ink-soft,var(--slate,#4E6166));font-weight:400}

/* Cellar-door picker (third interactive block) and the two-panel departure plot. */
.cellar-doors{margin-top:1.2rem}
.cd-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.cd-chip{min-height:44px;padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--step--1);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem}
.cd-chip:hover{border-color:var(--brand)}
.cd-chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.cd-chip .cd-n{opacity:.72;font-variant-numeric:tabular-nums}
.cd-status{margin:.2rem 0 1rem;color:var(--slate);font-size:var(--step--1)}
.cd-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.cd-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.85rem 1rem}
.cd-name{font-weight:650;text-decoration:underline}
.cd-meta{display:block;color:var(--slate);font-size:var(--step--1);margin:.15rem 0 .45rem}
.cd-stops{display:flex;flex-wrap:wrap;gap:.35rem}
.cd-stop{font-size:var(--step--1);background:var(--paper-2);border-radius:7px;padding:.16rem .5rem}
.cd-stop.is-maybe{background:transparent;border:1px dashed var(--line);color:var(--slate)}
.cd-stop.is-maybe em{font-style:normal;opacity:.8}
.cd-stop.is-none{background:transparent;color:var(--slate);font-style:italic}
.dep-plot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.dp-panel{margin:0}
.dp-panel svg{width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.dp-panel figcaption{font-size:var(--step--1);color:var(--slate);margin-top:.4rem;text-align:center}
.dp-pin circle{fill:var(--brand)}
.dp-pin text{fill:#fff;font-size:11px;font-weight:700}
.dp-pin:hover circle{fill:var(--accent)}
.dp-note{font-size:var(--step--1);color:var(--slate);margin-top:.6rem}
@media (max-width:560px){.cd-chip{font-size:.9rem}}

/* ---- Stop map: styled as a cartographic figure (2026-09-10) ---------------------------------
   Oleg: "now it looks like a map but the css styling is a bit off, make it visually nice".

   The core styling error was using the SITE surface (--surface, a pink white) as the land ground.
   A map's ground is the reference every other colour is judged against: over pink, the sage green
   went muddy, the water read grey, and plum-tinted roads looked like stains rather than streets.
   So the map gets its OWN small palette: a warm paper ground, muted natural tones for land and
   water, neutral warm greys for the street hierarchy, and the brand magenta spent on exactly one
   thing, the tram line and the pins. That is also the cartographic convention: everything recedes
   except the subject.

   Kept deliberately: the six-slot pin series (validated for separation and white numerals), the
   scroll mask on the visible box, the legend outside the scroller, and the honest furniture. */
:root {
  /* Pin series: six genuinely separated hues. Closest pair is 44 RGB units apart; the earlier
     version reused --accent/--gold and --brand-fill/--brand-deep and produced two teals and two
     plums, so the legend matched its pins exactly and still told the reader nothing. */
  --map-1: #253F7E;  /* magenta, the brand */
  --map-2: #7E5225;  /* deep harbour teal */
  --map-3: #64257E;  /* ochre */
  --map-4: #257E35;  /* indigo */
  --map-5: #6F7A24;  /* green */
  --map-6: #7E254E;  /* brick */

  /* The map's own ground palette, warm-neutral so natural colours read true on it. */
  --mp-land:    #FDFDFC;
  --mp-water:   #AFCBDE;
  --mp-coast:   #436184;
  --mp-green:   #AFD4BD;
  --mp-grid:    #EBE8E0;
  --mp-edge:    #E0D9CA;
  --mp-road:    #A9ABB0;
  --mp-road-mj: #8D9199;
  --mp-trail:   #BD9F79;
  --mp-ink:     #4A576F;
}

/* ---- The figure itself ---- */
.stp-map { width:100%; height:auto; display:block; }
.stp-frame { fill:var(--mp-land); stroke:var(--mp-edge); stroke-width:1.25; }
.stp-grid line { stroke:var(--mp-grid); stroke-width:1; }
.stp-leader line { stroke:var(--mp-ink); stroke-width:1; opacity:.45; stroke-dasharray:2 2; }

/* ---- Basemap, real OSM geometry. Weight order runs lightest to heaviest so the eye lands on the
   tram line last and stays there: water, green, trails, lanes, streets, coast, funicular. ---- */
.bm-water path { fill:var(--mp-water); stroke:none; }
.bm-green path { fill:var(--mp-green); stroke:none; }
.bm-trail path { fill:none; stroke:var(--mp-trail); stroke-width:.85; opacity:.55; stroke-dasharray:3.5 3; stroke-linecap:round; }
.bm-lane path { fill:none; stroke:var(--mp-road); stroke-width:.9; opacity:.55; }
.bm-road-minor path { fill:none; stroke:var(--mp-road); stroke-width:1.3; opacity:.85; }
.bm-road-major path { fill:none; stroke:var(--mp-road-mj); stroke-width:2.2; opacity:.95; stroke-linecap:round; }
.bm-coast path { fill:none; stroke:var(--mp-coast); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* Linear water (rivers, canals). Drawn as a stroked line, not a fill, because a river is a way
   and not a polygon. Slightly narrower than the shoreline so the lake still reads as the dominant
   edge, and in the water colour so the eye groups it with the lake rather than with the roads. */
.bm-river path { fill:none; stroke:var(--mp-water); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* The funicular is the subject. A pale casing under it is the standard way to lift a route line
   off a busy street network without thickening it. */
.bm-funicular path { fill:none; stroke:var(--map-1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95)); }
.bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; }

/* ---- Pins and labels ---- */
.stp-lbl { font-size:12.5px; fill:var(--mp-ink); font-weight:650; letter-spacing:.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.2px; stroke-linejoin:round; }
.stp-lbl-home { font-size:14.5px; fill:#2C1E29; font-weight:800; letter-spacing:-.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.8px; stroke-linejoin:round; }
.stp-num { font-size:10px; font-weight:700; fill:#fff; paint-order:fill; }
.stp-dot { stroke:var(--mp-land); stroke-width:1.75; }
/* THE FILTER MUST MOVE THE MAP. The picker JS has always toggled `is-on` on every pin, but no
   rule ever styled it, so clicking a group narrowed the card list while the plate stayed pixel
   for pixel identical. Putting the group colour inside the filter chips made that worse: the
   chips then PROMISED they drive the map. Dim, never hide: the points stay on the plate so the
   spatial picture is preserved and the block still works with scripting off. */
.stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition: opacity .16s ease; }
.stp-pin:not(.is-on) .stp-dot { opacity:.16; }
.stp-pin:not(.is-on) .stp-num { opacity:.2; }
.stp-labels text[data-group]:not(.is-on) { opacity:.22; }
/* A label the scroller's edge would bisect is HIDDEN, not clipped. Specificity is deliberate:
   `.stp-map` in front makes this (0,3,1) so it beats the group-dimming rule above at (0,2,1). */
.stp-map .stp-labels text.is-cut { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition:none; }
}
.stp-pin { cursor:pointer; }
.stp-pin .stp-dot { transition: r .14s ease, stroke-width .14s ease; }
.stp-pin:hover .stp-dot, .stp-pin:focus-visible .stp-dot { stroke:#2C1E29; stroke-width:2.5; }
.stp-pin:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .stp-pin .stp-dot { transition:none; } }
.stp-home circle:first-child { fill:var(--mp-land); stroke:var(--map-1); stroke-width:2; }
.stp-home-dot { fill:var(--map-1); }

.stp-g0 .stp-dot { fill:var(--map-1); } .stp-legend .stp-g0 .stp-key { background:var(--map-1); }
.stp-g1 .stp-dot { fill:var(--map-2); } .stp-legend .stp-g1 .stp-key { background:var(--map-2); }
.stp-g2 .stp-dot { fill:var(--map-3); } .stp-legend .stp-g2 .stp-key { background:var(--map-3); }
.stp-g3 .stp-dot { fill:var(--map-4); } .stp-legend .stp-g3 .stp-key { background:var(--map-4); }
.stp-g4 .stp-dot { fill:var(--map-5); } .stp-legend .stp-g4 .stp-key { background:var(--map-5); }
.stp-g5 .stp-dot { fill:var(--map-6); } .stp-legend .stp-g5 .stp-key { background:var(--map-6); }

/* ---- Container: the map reads as a card, like every other block on the page ---- */
.stp-wrap { position:relative; margin-top:var(--s3); }
.ix .ix-map, .ix-map { border-radius:var(--radius); background:var(--mp-land);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent); }

/* ---- Legend: chips, not loose dots ---- */
.stp-legend { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.45rem .5rem; align-items:center; position:relative; }
.stp-legend li { display:inline-flex; align-items:center; gap:.42rem; font-size:var(--step--2, .72rem);
  color:var(--ink-soft); font-weight:500; line-height:1.3; }
/* The group colour now lives INSIDE the filter chip, so one row both explains and filters. The
   legend used to repeat the same four words 60px above an identical pill row. */
.stp-chip .stp-key { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto;
  margin-right:.45rem; box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset; }
.stp-chip { display:inline-flex; align-items:center; }
.stp-g0 .stp-key { background:var(--map-1); } .stp-g1 .stp-key { background:var(--map-2); }
.stp-g2 .stp-key { background:var(--map-3); } .stp-g3 .stp-key { background:var(--map-4); }
.stp-g4 .stp-key { background:var(--map-5); } .stp-g5 .stp-key { background:var(--map-6); }
/* In-plate furniture: a scale bar that scales with the SVG, unlike a fixed-width HTML bar. */
.stp-bar-line { stroke:var(--mp-ink); stroke-width:1.6; opacity:.75; }
.stp-north-head { fill:var(--mp-ink); opacity:.75; }
.stp-furn-lbl { font-weight:600; opacity:.85; stroke-width:0; }
/* Furniture rows read as notes, not as another category chip. */
.stp-legend li.stp-attrib {
  /* ODbL REQUIRES this credit to be visible. It previously inherited opacity:.75 on top of an
     already-muted 11.5px legend, computing to ~3.9:1, under AA for small text. A legally
     required attribution is the last thing that should be hard to read, so it renders at full
     opacity in the body ink colour. Do not re-mute it. */
  opacity:1; color:var(--ink-soft); font-size:.78rem;
}
/* Specificity matters: `.stp-legend li { display:inline-flex }` is (0,1,1) and outranked a bare
   `.stp-swipe { display:none }` at (0,1,0), so the hint rendered on every desktop width and told
   readers to swipe a map that does not scroll. Both rules are qualified to match. */
.stp-legend li.stp-swipe { display:none; }

/* ---- Narrow screens ---- */
@media (max-width: 620px) {
  /* A mask on the SCROLL BOX, anchored to the visible box. An ::after overlay was wrong: it is a
     child of the scroller, so it travelled with the content and landed as a bleach column down
     the middle of the map at the offset the page actually loads in. */
  .ix-map {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .stp-lbl { font-size:11.5px; }
  .stp-legend li.stp-swipe { display:inline-flex; }
  .stp-legend { gap:.4rem .45rem; }
}

/* ---- Dark theme: the map keeps its own ground, darkened, so it never becomes a glowing white
   slab on a dark page and the natural tones stay believable. ---- */
/* ---- Dark theme, core tokens. Declared for BOTH signals: the explicit [data-theme="dark"]
   choice and the default "system" setting, which stamps nothing on the root and is separated
   only by prefers-color-scheme. Same identity, inverted deliberately: indigo ground, warm
   sand ink, and a lighter coral so the one CTA still carries dark text at AA. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --focus:      #E8865F;

  --ink:#F2EDE3; --ink-soft:#B9C2D4; --slate:#9AA4B8;
  --paper:#101828; --paper-2:#16203A; --surface:#1A2440; --surface-2:#141D33; --line:#2E3C5E;
  --brand:#A8BDE8; --brand-deep:#C8D5F2;
  --accent:#E8896C; --accent-deep:#F2A88F; --accent-ink:#1A0E08;
  --sea:#8FAAC9; --sea-deep:#A9BEDA;
  --gold:#D9A85E; --gold-deep:#E7C08A; --gold-light:#E7C08A; --gold-soft:#2A2214; --gold-ink:#EBD3A6;
  --footer:#0B1120;
  --ok:#A8BDE8; --warn:#E8896C;
  }
}
:root[data-theme="dark"] {
  --focus:      #E8865F;

  --ink:#F2EDE3; --ink-soft:#B9C2D4; --slate:#9AA4B8;
  --paper:#101828; --paper-2:#16203A; --surface:#1A2440; --surface-2:#141D33; --line:#2E3C5E;
  --brand:#A8BDE8; --brand-deep:#C8D5F2;
  --accent:#E8896C; --accent-deep:#F2A88F; --accent-ink:#1A0E08;
  --sea:#8FAAC9; --sea-deep:#A9BEDA;
  --gold:#D9A85E; --gold-deep:#E7C08A; --gold-light:#E7C08A; --gold-soft:#2A2214; --gold-ink:#EBD3A6;
  --footer:#0B1120;
  --ok:#A8BDE8; --warn:#E8896C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-land:    #FDFDFC;
    --mp-water:   #AFCBDE;
    --mp-coast:   #436184;
    --mp-green:   #AFD4BD;
    --mp-grid:    #EBE8E0;
    --mp-edge:    #E0D9CA;
    --mp-road:    #A9ABB0;
    --mp-road-mj: #8D9199;
    --mp-trail:   #BD9F79;
    --mp-ink:     #4A576F;
  }
  :root:not([data-theme="light"]) .stp-lbl-home { fill:#F7E0F3; }
  :root:not([data-theme="light"]) .stp-home circle:first-child { stroke:#F7E0F3; }
  :root:not([data-theme="light"]) .stp-home-dot { fill:#F7E0F3; }
  :root:not([data-theme="light"]) .stp-pin:hover .stp-dot { stroke:#F7E0F3; }
}
:root[data-theme="dark"] {
  --mp-land:    #FDFDFC;
  --mp-water:   #AFCBDE;
  --mp-coast:   #436184;
  --mp-green:   #AFD4BD;
  --mp-grid:    #EBE8E0;
  --mp-edge:    #E0D9CA;
  --mp-road:    #A9ABB0;
  --mp-road-mj: #8D9199;
  --mp-trail:   #BD9F79;
  --mp-ink:     #4A576F;
}
:root[data-theme="dark"] .stp-lbl-home { fill:#F7E0F3; }
:root[data-theme="dark"] .stp-home circle:first-child { stroke:#F7E0F3; }
:root[data-theme="dark"] .stp-home-dot { fill:#F7E0F3; }
:root[data-theme="dark"] .stp-pin:hover .stp-dot { stroke:#F7E0F3; }

/* --- el yunque: chip sizing + filter status (rule 46) --- */
.stp-filter { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.75rem 0 .35rem; }
.stp-filter-lbl { font-weight:700; font-size:var(--step--1); color:var(--slate); }
.stp-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.stp-chip { min-height:44px; padding:.45rem .85rem; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:var(--step--1); cursor:pointer; }
.stp-chip:hover { border-color:var(--slate); }
.stp-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.stp-chip[aria-pressed="false"] { opacity:.5; }
.stp-status { margin:.15rem 0 0; font-size:var(--step--1); color:var(--slate); flex-basis:100%; }
/* (0,1,1) to beat the installer's own li rule; an unqualified .stp-swipe{display:none} lost the
   cascade on an earlier site and told desktop readers to swipe a map that cannot scroll. */
@media (min-width: 761px) { ul.stp-legend li.stp-swipe { display:none !important; } }

/* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */
/* rule37:bands {"band-paper":{"key":"paper","bg":"#DFF0F4","fg":"#0E1C1E","link":"#0C544C"},"band-tint":{"key":"tint","bg":"#C6E6EE","fg":"#0E1C1E","link":"#0C544C"},"band-wash":{"key":"wash","bg":"#E0EBE7","fg":"#0E1C1E","link":"#0C544C"},"band-edge":{"key":"edge","bg":"#FFFFFF","fg":"#0E1C1E","link":"#0C544C"},"band-inverse":{"key":"inverse","bg":"#08161A","fg":"#DFF0F4","link":"#C9A03A"}} */
/* Rule 37: adjacent sections never share a ground. The colour lives on the OUTER
   full-width <section>; .wrap moved to an inner div that only constrains width.
   Never reintroduce a box-shadow 0 0 0 100vmax full-bleed here: an outer box-shadow
   paints only outside the border box, so none of it lands behind the content. */
.section[class*="band-"]{background:var(--band-bg);color:var(--band-fg);position:relative;isolation:isolate;overflow-x:clip}
.section[class*="band-"]>.wrap{position:relative;z-index:1}
/* a banded section needs air on both sides, so the usual collapsed top padding is restored */
.section[class*="band-"]+.section[class*="band-"]{padding-top:var(--s6,4rem)}
.section[class*="band-"] a:not(.btn):not(.nav-link){color:var(--band-link)}
.section[class*="band-"] a:not(.btn):not(.nav-link):hover{color:var(--band-link-hover)}
.section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)}
.band-edge{--band-bg:#FFFFFF;--band-fg:#141C2B;--band-muted:#4A576F;--band-line:#EDE2CC;--band-link:#283A66;--band-link-hover:#1E2B4C;--band-surface:#FBF8F1;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF;--paper:#FFFFFF;--surface:#FBF8F1;--surface-2:#F6F1E7}
.band-inverse :where(hr,table,th,td){border-color:var(--band-line)}
.band-inverse :where(.card,.rcard,.tcard,.stat-tile,.quick-answer-box,details,.tp-card){background:var(--band-surface);border-color:var(--band-line)}

/* the 5 treatments, driven only by this site's own palette tokens */
.band-paper{--band-bg:#F6F1E7;--band-fg:#141C2B;--band-muted:#4A576F;--band-line:#EDE2CC;--band-link:#283A66;--band-link-hover:#1E2B4C;--band-surface:#FFFFFF;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF}
.band-tint{--band-bg:#EFE4CF;--band-fg:#141C2B;--band-muted:#4A576F;--band-line:#E2D3B6;--band-link:#283A66;--band-link-hover:#1E2B4C;--band-surface:#FFFFFF;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF}
.band-wash{--band-bg:#EDEDE6;--band-fg:#141C2B;--band-muted:#4A576F;--band-line:#DEDED3;--band-link:#283A66;--band-link-hover:#1E2B4C;--band-surface:#FFFFFF;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF;--surface:#FFFFFF}
.band-edge{--band-bg:#F6F1E7;--band-fg:#141C2B;--band-muted:#4A576F;--band-line:#EDE2CC;--band-link:#283A66;--band-link-hover:#1E2B4C;--band-surface:#FFFFFF;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF;--paper:#F6F1E7;--surface:#FFFFFF;--surface-2:#FCFBF8}
.band-inverse{--band-bg:#141C2B;--band-fg:#F6F1E7;--band-muted:#C2CAD9;--band-line:#2E3C5E;--band-link:#A8BDE8;--band-link-hover:#C8D5F2;--band-surface:#1C2740;--band-rule:#6E8FB5;--band-cta-bg:#B04A33;--band-cta-fg:#FFFFFF;--ink:#F6F1E7;--ink-soft:#C2CAD9;--slate:#9AA4B8;--paper:#141C2B;--paper-2:#1C2740;--surface:#1C2740;--surface-2:#182236;--line:#2E3C5E;--brand:#A8BDE8;--brand-deep:#C8D5F2;--sea:#8FAAC9;--sea-deep:#A9BEDA;--accent:#E8896C;--accent-deep:#F2A88F;--accent-ink:#1A0E08;--gold:#D9A85E;--gold-soft:#2A2214;--gold-ink:#EBD3A6;--gold-deep:#E7C08A;--shadow:none}

/* selectors that used to match the combined .section.wrap element, re-pointed at the split form */
.section > .wrap > h2:first-child{padding-bottom: var(--s2); border-bottom: 2px solid var(--sea); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1;}
:not(.section) + .section > .wrap > h2:first-child{margin-top: 0;}
.section > .wrap > p{max-width: none;}

/* ---- motion layer. Both effects are decoration only: nothing here can leave real
   content hidden if the animation never runs (memory: a broad opacity:0 scroll reveal
   stays invisible forever for any renderer that does not scroll). ---- */
@keyframes r37-drift{from{transform:translate3d(-4%,0,0) scale(1.02);opacity:.5}to{transform:translate3d(4%,0,0) scale(1.09);opacity:.95}}
.band-wash::before{content:"";position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(38% 60% at 22% 28%,color-mix(in srgb, var(--sea) 16%, transparent) 0%,transparent 70%),radial-gradient(34% 56% at 78% 74%,color-mix(in srgb, var(--brand) 12%, transparent) 0%,transparent 72%);animation:r37-drift 22s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes r37-pulse{0%{transform:scale(.55);opacity:.8}70%{transform:scale(2);opacity:0}100%{transform:scale(2);opacity:0}}
.map-pin,.spot-pin,.pin,[data-pulse]{position:relative}
.map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid color-mix(in srgb, var(--sea) 85%, transparent);pointer-events:none;animation:r37-pulse 2.6s ease-out infinite}
[data-countup],.st-num,.stat-num,.kpi-num{font-variant-numeric:tabular-nums}
/* reduced motion: animation off, END STATE shown, nothing hidden */
@media (prefers-reduced-motion: reduce){
  .band-wash::before{animation:none;transform:none;opacity:.75}
  .map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{animation:none;transform:translate(0,0) scale(1);opacity:.5}
  [data-countup],.st-num,.stat-num,.kpi-num{transition:none}
}
/* === END rule37 section bands === */