/* ============================================================
   Boston Food Tours - Phase 3 Design System
   IDENTITY: "Brownstone Brick" (approved by Oleg 2026-09-25, research/layout-approval.md).
   Brownstone brick red carries links and structural fills, a warm mustard-gold is the single
   CTA colour, a harbor navy is the dominant secondary hue for section tints, rules and
   iconography (the --sea token, used sitewide), and a deeper gold is reserved for real star
   ratings. Soft 10px radii, hairline rules under headings. Mobile-first, zero heavy deps,
   system fonts.
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Brownstone Brick" (site.config.md, approved by Oleg 2026-09-25).
     Cream ground, brick-red structure, mustard-gold CTA, harbor-navy secondary, deep-gold
     ratings. Every pairing checked >= AA (WCAG contrast, computed against its stated ground). */
  --ink:        #1A2433;   /* primary text: near-black navy */
  --ink-soft:   #4A5568;   /* secondary text: muted slate-navy (6.53:1 on --paper) */
  --paper:      #F5EEE4;   /* page ground: warm cream */
  --paper-2:    #EDE3D3;   /* raised panels, info blocks, table headers: deeper cream tint */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #FBF7F0;   /* inputs: soft warm white */
  --line:       #D9CBB8;   /* hairline borders on light */
  --brand:      #93402F;   /* brownstone brick: links (underlined), structural fills, 6.05:1 on --paper */
  --brand-deep: #6E2F22;   /* deeper brick: nav/footer fills, btn-brand hover, 8.71:1 on --paper */
  --accent:     #B8893A;   /* mustard gold - CTA fill; CTA text is --accent-ink (dark), not white (3.14:1 fails) */
  --accent-deep:#96702B;   /* darker mustard for hover/active */
  --accent-ink: #1A2433;   /* text colour that sits on --accent: dark ink, 4.97:1 */
  --sea:        #24344A;   /* harbor navy - DOMINANT secondary: section tints, rules, icons, link hover */
  --sea-deep:   #16212F;   /* darker navy for hover/active states */
  --gold:       #6E4E12;   /* deep gold - real ratings only, 6.6:1 on --paper */
  --gold-soft:  #F3E8D2;   /* gold wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #6E4E12;   /* text colour that sits on --gold-soft, 6.26:1 */
  --slate:      #57687A;   /* muted steel-navy slate: sparing tertiary tint/borders */
  --footer:     #12181F;   /* near-black navy: footer band, white text */
  --ok:         #2F6B4A;
  --warn:       #9A5A12;

  /* ---- TYPE - assertive sans display + neutral sans body. System stacks, no webfont
     (protects LCP); contrast comes from weight and scale, an editorial feel. ---- */
  --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 rgba(26,36,32,.05), 0 10px 28px rgba(26,36,32,.08);
}

/* ---- 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:var(--paper); 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:var(--paper); }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border:2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---- HEADER / NAV ---- */
.site-header { position: sticky; top:0; z-index:40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
@media (max-width: 344px) { .site-header .brand { font-size: .92rem; letter-spacing: -.01em; } }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo { width:28px; height:28px; border-radius:7px; display:block; }
.brand b { color: var(--accent-deep); }
.nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); }
.nav-links a:hover { color:var(--sea); }
.nav-links a.btn-brand { color:var(--paper); }
.nav-links a.btn-primary { color:var(--accent-ink); }
.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-SCREEN BACKGROUND (this site's first screen, approved 2026-07-25:
        blue ice glittering on black sand, headline overlaid) ---- */
.hero-full {
  min-height: 88svh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.hero-full-inner { padding-block: var(--s7) var(--s6); }
.hero-full h1 { color: #fff; max-width: 21ch; }
.hero-full .lede { color: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); }
.hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); }
.hero-full .author-hook a { color: #fff; }
.hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); }
.hero-full-ghost:hover { border-color:#fff; }
.hero-full .cta-proof { color: rgba(255,255,255,.92); }
.hero-full .cta-proof .gold { color:#E8C170; }
@media (max-width: 640px) { .hero-full { min-height: 78svh; background-position: 64% center !important; } }

/* ---- HERO (money) - asymmetric split ---- */
.hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); }
/* this site's signature: media on the LEFT, taller than wide never; text column right */
.hero--flip { grid-template-columns: .9fr 1.1fr; }
.hero--flip .hero-media { order:-1; }
.eyebrow { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:var(--step--1); color:var(--gold); 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); 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); letter-spacing:2px; }
.stars-num { font-weight:700; color:var(--ink); }
.trust .stars { font-size:1.15rem; margin-top:.2rem; }
.pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; }
@media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } }

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

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

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

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

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

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

/* ---- RELATED TOURS ---- */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.related .rcard .rc-body { padding:var(--s3) var(--s4); }
@media (max-width:600px){ .related{ grid-template-columns:1fr; } }
/* 3-up card grid (homepage / hubs) */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
/* Rule 30: count-aware tracks so 2 or 1 leftover cards never stretch a 3-col grid. */
.cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); }
.cards-3.cards-n1 { grid-template-columns:minmax(0,1fr); max-width:420px; }
.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; }
/* Rule 30 breakpoints: 3-up above 1040, 2-up 761-1040, 1-up below 761 with the
   horizontal image-left card as the phone fallback. */
@media (max-width:1040px){ .cards-3, .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns:1fr; max-width:none; }
  .cards-3 .rcard { flex-direction:row; }
  .cards-3 .rcard .rc-media { width:38%; flex:none; aspect-ratio:1/1; }
  .cards-3 .rcard .rc-body { padding:var(--s3); gap:.5rem; }
  .cards-3 .rcard .rc-body .btn { min-height:44px; display:flex; align-items:center; justify-content:center; }
}

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

/* ---- CTA BANNER ---- */
.cta-banner { background:linear-gradient(120deg,#6E2F22,#16212F); border:1px solid #16212F; 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; }
/* .cta-banner always keeps its own dark gradient regardless of the section's band, so its text
   must always stay white too. `.section[class*="band-"]{color:var(--band-fg)}` and its heading
   :where() rule both out-specify the plain rules above (an attribute selector plus a class beats
   a single class), which silently turned this banner's headline navy-on-navy inside a band-tint
   section: 1.04:1, an AA fail the rendered contrast gate caught. Scoped, higher-specificity
   restatements win back the white text without touching .cta-banner outside a banded section. */
.section[class*="band-"] .cta-banner{color:#fff}
.section[class*="band-"] .cta-banner h2, .section[class*="band-"] .cta-banner h3{color:#fff}
.section[class*="band-"] .cta-banner p{color:rgba(255,255,255,.82)}

/* ---- 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:#CCD6DC; 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:#DDE6EC; 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 #3A4550; border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:#B9C2C9; border-top:1px solid #3A4550; 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(--brand); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:var(--accent-ink); }
.prose a.btn-brand { color:var(--paper); }
.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:#96702B; color:#fff; text-decoration:none; }
.hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hotel-row .hr-name { font-weight:700; color:var(--ink); }
.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; }
.blog-cta h2 { margin-top:0; }
.blog-cta p { margin-bottom:var(--s3); }
.blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

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

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

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

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

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

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

/* ============================================================
   SITE-SPECIFIC LAYER , "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(--s3); border-bottom: 2px solid var(--sea);
  /* --s3 not --s2: at --s2 a descender (the p in "Compared") sat on the rule and read as clipped
     text on the about page. line-height is also pinned so the glyph box never crosses the border. */
  line-height: 1.25;
  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); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--sea); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:var(--accent-ink); }
/* 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) ---- */
/* ---- Hero backdrop (Oleg 2026-09-08: "hero background image on the main page").
   Full-bleed Boston food photograph behind the H1 and booking panel. A scrim keeps every
   glyph on the paper-token ground it was contrast-checked against, so the AA margins in
   site.config.md still hold; the photo never sits directly under text. Decorative only, so it
   is a CSS background with the real <img> still present in .hero-media for the crawler. */
.tour-hero { position: relative; padding-top: var(--s5); padding-bottom: var(--s5); isolation: isolate; }
.tour-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw);
  background-image: var(--hero-bg); background-size: cover; background-position: center 60%;
}
.tour-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 86%, transparent) 0%,
                                       color-mix(in srgb, var(--paper) 94%, transparent) 55%,
                                       var(--paper) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tour-hero::after { background: linear-gradient(180deg, rgba(245,238,228,.90) 0%, rgba(245,238,228,.96) 55%, var(--paper) 100%); }
}
@media (max-width: 760px) { .tour-hero::before { background-position: center 55%; } }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); }
.booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; }
.booking-panel .bp-title { font-family: var(--display); font-weight: 800; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; }
.bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); }
.bp-rating .gold { color: var(--gold); font-weight: 700; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-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); 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(--sea); }
.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:right; 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(--sea); }
.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:rgba(58,90,64,.14); color:var(--sea); }
.glyph.no { background:rgba(107,31,44,.10); 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:rgba(58,90,64,.12); border-color:var(--sea); }
.month-strip li.is-harvest { background:var(--gold-soft); border-color:var(--gold); }
.month-strip li.is-drying { background:rgba(107,31,44,.08); 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, .dish-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); }
.wine-card, .dish-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:#B8893A; }
.wine-card.is-sweet { border-top-color:var(--slate); }
.wine-card h3, .dish-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; }
.wine-card .wc-style, .dish-card .dc-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, .dish-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, .dish-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .wine-grid, .dish-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-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; background:var(--paper-2); margin-top:var(--s3); }
.map-embed iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width:768px){ .map-embed { aspect-ratio:4/3; min-height:0; } }
.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); 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(--sea); }
.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, #24344a)); --dp-line: var(--line, #d9cbb8);
  --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #fbf7f0));
  --dp-ink: var(--ink, #1a2433); --dp-soft: var(--ink-soft, #4a5568);
  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, rgba(20,24,26,.88), rgba(20,24,26,0)); }
.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(--sea); 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-table td.ex-num, .tour-explorer .ex-table th.ex-num { text-align:right; }
.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(--sea); 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,#6b6b6b));font-weight:400}

/* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */
/* rule37:bands {"band-paper":{"key":"paper","bg":"#f5eee4","fg":"#1a2433","link":"#93402f"},"band-tint":{"key":"tint","bg":"#ede3d3","fg":"#1a2433","link":"#93402f"},"band-wash":{"key":"wash","bg":"#e8ddc9","fg":"#1a2433","link":"#93402f"},"band-edge":{"key":"edge","bg":"#ffffff","fg":"#1a2433","link":"#93402f"},"band-inverse":{"key":"inverse","bg":"#12181f","fg":"#f5eee4","link":"#f3e8d2"}} */
/* 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)}
/* card/table/heading title links (rcard, tour-row, cat-card, cmp-table, matrix-table) already
   carry their own component colour (var(--ink) or the default var(--brand)), both of which are
   dark-mode aware; the blanket band recolor below is for PROSE links only (quick-answer, FAQ
   answers, testimonials) and must not reach into those components, or a card sitting in a
   band-tint/paper/wash section (whose own bg is fixed light) inherits a fixed light link colour
   even where the card body itself renders on the root --surface, which follows the scheme and
   can be dark: 2.3:1, an AA fail found by the rendered contrast gate on this homepage. */
.section[class*="band-"] a:not(.btn):not(.nav-link):not(.cat-card):not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(td a):not(th a):not(.tour-row a):not(.cards-3 a):not(.related a):not(.cat-grid a){color:var(--band-link)}
.section[class*="band-"] a:not(.btn):not(.nav-link):not(.cat-card):not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(td a):not(th a):not(.tour-row a):not(.cards-3 a):not(.related a):not(.cat-grid a):hover{color:var(--band-link-hover)}
.section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)}
.band-edge{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
.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-tint/band-wash/band-edge are fixed LIGHT bands by design (--band-bg/--band-fg
   never change with scheme, matching band-inverse's own fully-pinned dark band on the other
   side of the alternation). Without pinning the plain palette tokens too, a component inside one
   of these bands that reads --surface/--ink/--brand/etc directly (a table, a card body) keeps
   following the ROOT scheme instead of the band's own fixed-light ground, which pairs dark-mode
   navy ink with a dark-mode navy surface: 1.0-1.1:1, unreadable. Pinned the same way wash/edge
   already were. */
.band-paper{--band-bg:#f5eee4;--band-fg:#1a2433;--band-muted:#4a5568;--band-line:#d9cbb8;--band-link:#93402f;--band-link-hover:#16212f;--band-surface:#ffffff;--band-rule:#24344a;--band-cta-bg:#b8893a;--band-cta-fg:#ffffff;--ink:#1a2433;--ink-soft:#4a5568;--paper:#f5eee4;--paper-2:#ede3d3;--surface:#ffffff;--surface-2:#fbf7f0;--line:#d9cbb8;--brand:#93402f;--brand-deep:#6e2f22;--accent:#b8893a;--accent-deep:#96702b;--accent-ink:#1a2433;--sea:#24344a;--sea-deep:#16212f;--gold:#6e4e12;--gold-soft:#f3e8d2;--gold-ink:#6e4e12;--slate:#57687a}
.band-tint{--band-bg:#ede3d3;--band-fg:#1a2433;--band-muted:#4a5568;--band-line:#d9cbb8;--band-link:#93402f;--band-link-hover:#16212f;--band-surface:#ffffff;--band-rule:#24344a;--band-cta-bg:#b8893a;--band-cta-fg:#ffffff;--ink:#1a2433;--ink-soft:#4a5568;--paper:#f5eee4;--paper-2:#ede3d3;--surface:#ffffff;--surface-2:#fbf7f0;--line:#d9cbb8;--brand:#93402f;--brand-deep:#6e2f22;--accent:#b8893a;--accent-deep:#96702b;--accent-ink:#1a2433;--sea:#24344a;--sea-deep:#16212f;--gold:#6e4e12;--gold-soft:#f3e8d2;--gold-ink:#6e4e12;--slate:#57687a}
.band-wash{--band-bg:#e8ddc9;--band-fg:#1a2433;--band-muted:#4a5568;--band-line:#d9cbb8;--band-link:#93402f;--band-link-hover:#16212f;--band-surface:#ffffff;--band-rule:#24344a;--band-cta-bg:#b8893a;--band-cta-fg:#ffffff;--paper:#f5eee4;--paper-2:#ede3d3;--surface:#ffffff;--surface-2:#fbf7f0;--line:#d9cbb8;--ink:#1a2433;--ink-soft:#4a5568;--brand:#93402f;--brand-deep:#6e2f22;--accent:#b8893a;--accent-deep:#96702b;--accent-ink:#1a2433;--sea:#24344a;--sea-deep:#16212f;--gold:#6e4e12;--gold-soft:#f3e8d2;--gold-ink:#6e4e12;--slate:#57687a}
.band-edge{--band-bg:#ffffff;--band-fg:#1a2433;--band-muted:#4a5568;--band-line:#d9cbb8;--band-link:#93402f;--band-link-hover:#16212f;--band-surface:#f5eee4;--band-rule:#24344a;--band-cta-bg:#b8893a;--band-cta-fg:#ffffff;--paper:#ffffff;--paper-2:#ede3d3;--surface:#f5eee4;--surface-2:#faf5ea;--line:#d9cbb8;--ink:#1a2433;--ink-soft:#4a5568;--brand:#93402f;--brand-deep:#6e2f22;--accent:#b8893a;--accent-deep:#96702b;--accent-ink:#1a2433;--sea:#24344a;--sea-deep:#16212f;--gold:#6e4e12;--gold-soft:#f3e8d2;--gold-ink:#6e4e12;--slate:#57687a}
.band-inverse{--band-bg:#12181f;--band-fg:#f5eee4;--band-muted:#9aa3ad;--band-line:#35424f;--band-link:#f3e8d2;--band-link-hover:#f7efe2;--band-surface:#1e2733;--band-rule:#f3e8d2;--band-cta-bg:#24344a;--band-cta-fg:#12181f;--ink:#f5eee4;--ink-soft:#9aa3ad;--slate:#9aa3ad;--paper:#12181f;--paper-2:#1e2733;--surface:#1e2733;--surface-2:#1e2733;--line:#35424f;--brand:#f3e8d2;--brand-deep:#f3e8d2;--sea:#f3e8d2;--sea-deep:#f3e8d2;--accent:#24344a;--accent-deep:#24344a;--accent-ink:#12181f;--gold:#f3e8d2;--gold-soft:#1e2733;--gold-ink:#f5eee4;--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%,rgba(36,52,74,0.16) 0%,transparent 70%),radial-gradient(34% 56% at 78% 74%,rgba(147,64,47,0.12) 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 rgba(36,52,74,0.85);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 === */

/* Rule 37 imagery: every major homepage section carries a figure of its own.
   Photographs on the takeaways, why-here, season and dish blocks; code-computed
   SVG charts on the testimonials and stay blocks, where a photograph would either
   read as a picture of a reviewer or stand in for a real hotel's premises. */
.takeaways-split { display:grid; gap:var(--s4); }
.takeaways-split .takeaways-list { margin:0; }
.infographic.tk-figure { width:100%; max-width:52rem; margin:0 auto; }
.infographic.tk-figure img { background:var(--surface); }

.band-figure { margin:var(--s4) 0 0; }
.band-figure img { display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }
.band-figure figcaption { margin-top:.5rem; font-size:var(--step--1); color:var(--ink-soft); }

.season-card .sc-media { display:block; margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; }
.season-card .sc-media img { display:block; width:100%; height:100%; object-fit:cover; }

.dish-card .dc-media { display:block; margin:calc(-1 * var(--s3)) calc(-1 * var(--s4)) .3rem; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; }
.dish-card .dc-media img { display:block; width:100%; height:100%; object-fit:cover; }

.data-figure { margin:var(--s4) 0 0; overflow-x:auto; }
.data-figure svg { display:block; width:100%; min-width:54rem; height:auto; font-family:inherit; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.data-figure figcaption { margin-top:.55rem; font-size:var(--step--1); color:var(--ink-soft); max-width:78ch; }
.dfig-title { fill:var(--ink); font-family:var(--display); font-weight:800; }
.dfig-sub, .dfig-note, .dfig-foot { fill:var(--ink-soft); }
.dfig-label { fill:var(--ink); font-weight:600; }
.dfig-value { fill:var(--brand); font-family:var(--display); font-weight:800; }
.dfig-bar { fill:var(--brand); }
.dfig-track { fill:var(--line); }
@media (max-width:520px){ .season-card .sc-media, .dish-card .dc-media { aspect-ratio:16/9; } .band-figure img { aspect-ratio:3/2; } }

/* ---- DARK MODE: "Brownstone Brick" redefined for a dark ground. Every token below keeps the
   SAME role (ink/paper/brand/accent/sea/gold) so nothing outside :root needs to know a dark
   mode exists; band-inverse already builds its own dark surface the same way. Contrast checked
   the same as the light tokens above (see rendered contrast gate, run in both schemes). ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #F0E9DE;
    --ink-soft:   #C9BBA8;
    --paper:      #141A24;
    --paper-2:    #1E2733;
    --surface:    #1B222D;
    --surface-2:  #232B38;
    --line:       #38424F;
    --brand:      #E38B6E;
    --brand-deep: #F0A588;
    --accent:     #D9A857;
    --accent-deep:#E8C170;
    --accent-ink: #1A2433;
    --sea:        #7FA3C9;
    --sea-deep:   #A8C4E0;
    --gold:       #E8C170;
    --gold-soft:  #2A2113;
    --gold-ink:   #E8C170;
    --slate:      #9AAAB8;
    --footer:     #0B0F14;
    --ok:         #6FBF95;
    --warn:       #E0A860;
  }
}
:root[data-theme="dark"] {
  --ink:        #F0E9DE;
  --ink-soft:   #C9BBA8;
  --paper:      #141A24;
  --paper-2:    #1E2733;
  --surface:    #1B222D;
  --surface-2:  #232B38;
  --line:       #38424F;
  --brand:      #E38B6E;
  --brand-deep: #F0A588;
  --accent:     #D9A857;
  --accent-deep:#E8C170;
  --accent-ink: #1A2433;
  --sea:        #7FA3C9;
  --sea-deep:   #A8C4E0;
  --gold:       #E8C170;
  --gold-soft:  #2A2113;
  --gold-ink:   #E8C170;
  --slate:      #9AAAB8;
  --footer:     #0B0F14;
  --ok:         #6FBF95;
  --warn:       #E0A860;
}

/* tour-detail:start (build/tour-detail/render-tour-sections.mjs, do not hand-edit) */
.td-incl { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; margin:1rem 0 .5rem; }
.td-incl.td-incl-1 { grid-template-columns:1fr; }
.td-col { border:1px solid var(--line, #d9d9d9); border-radius:var(--radius-sm, 8px); background:var(--surface, #fff); padding:.9rem 1.1rem; }
.td-col h3 { margin:0 0 .5rem; font-size:1rem; }
.prose ul.td-list, ul.td-list { list-style:none; padding-left:0; margin:0; }
.td-list li { position:relative; padding-left:1.6rem; margin-bottom:.45rem; }
.td-list li::before { content:""; position:absolute; left:.15rem; top:.35em; width:.95rem; height:.95rem; border-radius:50%; }
.td-yes li::before { background:var(--ok, #2f7d4a); }
.td-yes li::after { content:""; position:absolute; left:.47rem; top:.52em; width:.3rem; height:.52rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.td-no li::before { background:var(--warn, #a4432f); }
.td-no li::after { content:""; position:absolute; left:.3rem; top:.8em; width:.65rem; height:2px; background:#fff; }
.prose ol.td-itin, ol.td-itin { list-style:none; counter-reset:td; padding-left:0; margin:1rem 0; border-left:2px solid var(--line, #d9d9d9); }
.td-itin li { counter-increment:td; position:relative; padding:0 0 1rem 2.4rem; margin:0; }
.td-itin li::before { content:counter(td); position:absolute; left:-.85rem; top:0; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent, #9e3b2f); color:var(--accent-ink, #fff); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.td-itin strong { display:block; }
.td-itin span { display:block; color:var(--ink-soft, inherit); }
.prose ul.td-expect li, ul.td-expect li { margin-bottom:.7rem; }
.td-issues { border-left:3px solid var(--warn, #a4432f); padding:.2rem 0 .2rem 1rem; }
.td-book { margin-top:2rem; padding:1.4rem 1.5rem; border-radius:var(--radius, 12px); background:var(--surface-2, var(--surface, #f5f5f5)); border:1px solid var(--line, #d9d9d9); }
.td-book h2 { margin-top:0; }
@media (max-width: 640px) { .td-incl { grid-template-columns:1fr; } }
/* tour-detail:end */

/* ---- 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: #A82272;  /* magenta, the brand */
  --map-2: #14494F;  /* deep harbour teal */
  --map-3: #8A5A08;  /* ochre */
  --map-4: #43307E;  /* indigo */
  --map-5: #2F6B46;  /* green */
  --map-6: #8E2F2F;  /* brick */

  /* The map's own ground palette, warm-neutral so natural colours read true on it. */
  --mp-land:    #FCF6F8;
  --mp-water:   #C6DBE3;
  --mp-coast:   #568496;
  --mp-green:   #D9E4D1;
  --mp-grid:    #EFE5EA;
  --mp-edge:    #E5DBD3;
  --mp-road:    #B4A79B;
  --mp-road-mj: #8C8076;
  --mp-trail:   #C7AE86;
  --mp-ink:     #4B3C46;
}

/* ---- 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 ---- */
/* Render-quality-gate MAP_LABELS fix (2026-09-28, ported from build/launch-v2/blocks/stop-map.css):
   the svg scales fluidly to its container (.stp-map{width:100%}), so a label sized for a desktop
   plate rendered under 12 CSS px once it shrank on a phone (measured ~5.4px at 390px). The
   renderer sets --map-scale on the <svg> to its real rendered-width / viewBox-width ratio;
   dividing the declared size by that ratio keeps the ON-SCREEN size constant at every viewport.
   0.447 is the no-JS/pre-paint fallback (MOBILE_MAP_W 340 / W 760, matching compile.mjs). Halo
   width also brought down to <=1.8px to match the canonical component (was 2.2-2.8px). */
.stp-lbl { font-size:calc(13.5px / var(--map-scale, 0.447)); fill:var(--mp-ink); font-weight:650; letter-spacing:.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:1.6px; stroke-linejoin:round; }
.stp-lbl-home { font-size:calc(15.5px / var(--map-scale, 0.447)); fill:#2C1E28; font-weight:800; letter-spacing:-.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:1.8px; stroke-linejoin:round; }
.stp-map .stp-num { font-size:calc(13px / var(--map-scale, 0.447)); 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:#2C1E28; 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); }

/* ---- Off-frame edge markers: a stop too far from the rest of the site's pins to share a
   true-scale frame (keywestfishingtours.org, 2026-09-25: a Lower Keys dock ~40 km from the
   Key West/Stock Island cluster). Clamped to the frame edge along its real bearing, drawn as a
   dashed leader from the origin (distance already stated in the label, never re-encoded as a
   to-scale ray) plus a ringed dot so it reads as "elsewhere", never as a normal mapped pin.
   Empty group on every site with no off_frame stop, so this adds nothing there. */
.stp-edge-leader line { stroke-dasharray:4 3.5; stroke-width:1.6; opacity:.55; fill:none; }
.stp-edge-leader .stp-g0 { stroke:var(--map-1); } .stp-edge-leader .stp-g1 { stroke:var(--map-2); }
.stp-edge-leader .stp-g2 { stroke:var(--map-3); } .stp-edge-leader .stp-g3 { stroke:var(--map-4); }
.stp-edge-leader .stp-g4 { stroke:var(--map-5); } .stp-edge-leader .stp-g5 { stroke:var(--map-6); }
.stp-edge-dot { stroke-dasharray:2.5 2; stroke-width:2; }
.stp-edge-lbl { font-style:italic; opacity:.92; }

/* ---- 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 rgba(44,30,40,.05), 0 8px 24px rgba(44,30,40,.07); }

/* ---- 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 { opacity:.75; }
/* 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-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. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-land:    #2A2028;
    --mp-water:   #24404B;
    --mp-coast:   #4E7C8A;
    --mp-green:   #2B4034;
    --mp-grid:    #372B34;
    --mp-edge:    #3E2F3A;
    --mp-road:    #6B5A66;
    --mp-road-mj: #8B7885;
    --mp-trail:   #7E6A4C;
    --mp-ink:     #D8C6D2;
  }
  :root:not([data-theme="light"]) .stp-lbl-home { fill:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-home circle:first-child { stroke:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-home-dot { fill:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-pin:hover .stp-dot { stroke:#F7E0F2; }
}
:root[data-theme="dark"] {
  --mp-land:    #2A2028;
  --mp-water:   #24404B;
  --mp-coast:   #4E7C8A;
  --mp-green:   #2B4034;
  --mp-grid:    #372B34;
  --mp-edge:    #3E2F3A;
  --mp-road:    #6B5A66;
  --mp-road-mj: #8B7885;
  --mp-trail:   #7E6A4C;
  --mp-ink:     #D8C6D2;
}
:root[data-theme="dark"] .stp-lbl-home { fill:#F7E0F2; }
:root[data-theme="dark"] .stp-home circle:first-child { stroke:#F7E0F2; }
:root[data-theme="dark"] .stp-home-dot { fill:#F7E0F2; }
:root[data-theme="dark"] .stp-pin:hover .stp-dot { stroke:#F7E0F2; }