/* ============================================================
   Washington DC Night Tours - Design System
   PALETTE (Oleg-approved, research/layout-approval.md, 2026-09-25): "Midnight indigo +
   lamplight amber". Moon-paper ground, a midnight-indigo brand for links/structure, one
   amber CTA accent darkened for AA (white text), a separate darker amber-gold reserved for
   real ratings so it never reads as the same colour as the CTA. Retargeted from the prior
   gaslight navy + brass donor palette.
   Soft 10px radii, hairline rules under headings.
   Mobile-first, zero heavy deps, system fonts to protect LCP.
   ============================================================ */
/* ---- COLOR TOKENS: locked at the Phase C gate (Oleg, 2026-09-25) ---- */
:root {
  --ink:        #1B2340;   /* primary text: midnight indigo (13.5:1 on --paper) */
  --ink-soft:   #4B5178;   /* secondary text: slate indigo (5.9:1 on --paper-2, passes AA) */
  --paper:      #F2F0EA;   /* page ground: moon-paper */
  --paper-2:    #E6E1D3;   /* raised panels (info blocks, table headers): deeper moon-paper tint */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #ffffff;   /* inputs */
  --line:       #D9D3C0;   /* hairline borders on light */
  --brand:      #1B2340;   /* midnight indigo: links, secondary buttons, structural fills (13.5:1 on paper) */
  --brand-deep: #11162B;   /* deeper indigo: footer fills, inverse bands */
  --accent:     #9C6518;   /* lamplight amber, darkened for AA - CTA ONLY (white text, 4.9:1) */
  --accent-deep:#7E5112;   /* deeper amber for CTA hover */
  --accent-glow:#E8B04B;   /* the approved lamplight amber itself: decorative glows, badges, dividers only, never CTA text-bearing surfaces */
  --accent-ink: #ffffff;   /* text colour that sits on --accent */
  --gold:       #8A5A17;   /* ratings only - real ratings (5.2:1 on paper), distinct shade from --accent */
  --gold-soft:  #F1E0BE;   /* gold wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #4A3208;   /* text colour that sits on --gold-soft */
  --ok:         #3F6B52;  /* status yes: a muted indigo-green, distinct from both brand and accent families */
  --warn:       #8A5A17;  /* status opt: gold family */

  /* ---- 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;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", 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: whitewash curves, not hard-edged brochure */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent);  /* ink-tinted */
}

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

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

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

/* ---- HEADER / NAV ---- */
.site-header { position: sticky; top:0; z-index:40; background: 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); }
.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(--accent); }
.nav-links a.btn-brand { color:#fff; }
.nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); }
@media (max-width: 760px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; }
  .nav-links[data-open="true"] { display:flex; }
}

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

/* ---- HERO: FULL-SCREEN BACKGROUND (this site's first screen, approved 2026-07-25:
        blue ice glittering on black sand, headline overlaid) ---- */
.hero-full {
  min-height: 88svh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.hero-full-inner { padding-block: var(--s7) var(--s6); }
.hero-full h1 { color: #fff; max-width: 21ch; }
.hero-full .lede { color: color-mix(in srgb, #ffffff 90%, transparent); max-width: 56ch; font-size: var(--step-1); }
.hero-full .author-hook { color: color-mix(in srgb, #ffffff 85%, transparent); 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 color-mix(in srgb, #ffffff 50%, transparent); }
.hero-full-ghost { color:#fff; border-color: color-mix(in srgb, #ffffff 55%, transparent); }
.hero-full-ghost:hover { border-color:#fff; }
.hero-full .cta-proof { color: color-mix(in srgb, #ffffff 92%, transparent); }
.hero-full .cta-proof .gold { color:#D0B67E; }  /* lightened --gold for dark bands */
@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); }
/* Only the true header row gets the solid paper-2 band; a row-header th (scope=row, the first
   "Kind" column of a body row) must NOT also carry it, or the whole first column reads as a
   permanent tint block instead of taking part in the same zebra striping as the rest of the
   row (rule 27 fix, 2026-09-26: "first column carries a different tint block"). */
.keyfacts thead th { 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); }
.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 count-aware card grid (hub pages): 2 leftovers sit two-up, 1 sits at reading width. */
.cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); }
.cards-3.cards-n1 { grid-template-columns:minmax(0,32rem); }
@media (max-width:820px){ .cards-3, .cards-3.cards-n2, .cards-3.cards-n1 { grid-template-columns:1fr; } }

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

/* ---- CTA BANNER ---- */
.cta-banner { background:linear-gradient(120deg, var(--brand), var(--brand-deep)); border:1px solid var(--brand-deep); color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:color-mix(in srgb, #ffffff 82%, transparent); max-width:52ch; margin-inline:auto; }

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

/* ---- FOOTER (the one deepest surface, near-black glacier navy) ---- */
.site-footer { background: var(--brand-deep); color: var(--paper-2); 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: var(--paper); 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 color-mix(in srgb, var(--paper) 18%, transparent); border-radius:50%; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.disclosure { font-size:var(--step--1); color:color-mix(in srgb, var(--paper) 72%, transparent); border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; }
.prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); }
.prose tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table { min-width: 640px; }
}
.prose a { color:var(--accent-deep); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; }
.prose a.btn-brand { color:#fff; }
.prose a.btn-ghost { color:var(--ink); }
/* Hotel affiliate pill (Expedia via Travelpayouts): deliberately amber + outline so it reads as a
   secondary lodging action, distinct from the cyan GetYourGuide tour buttons. Explicit colors
   defeat the .prose a override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); }
.hotel-cta:hover, .prose a.hotel-cta:hover { background: var(--gold-ink); 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 (hand-authored 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--2); color:var(--ink); flex:1 1 auto; min-width:0; line-height:1.25; }
.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; }
  .sticky-cta .sc-proof { font-size:var(--step--1); white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } }

/* ---- TESTIMONIALS (real listing 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; } }

/* ---- TESTIMONIALS band ({{ testimonials }}, rule 26; ported from dinnercruisessandiego.org,
   token-based colours only) ---- */
.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; }
.testimonial-card .tc-attr a { color:var(--ink); }
.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 band ({{ hotels }}, rule 26; three cards) ---- */
.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; }
.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; } }

/* ============================================================
   HOMEPAGE BLUEPRINT BLOCKS (D1 2026-09-20): booking panel facts, comparison
   and matrix tables, photo collage, tour explorer, meeting-point picker,
   answered grid, section bands. Ported from dinnercruisessandiego.org, all
   colours token-based (PLACEHOLDER palette); the collage placeholder tiles carry
   the page's CSS-only animation (respects prefers-reduced-motion).
   ============================================================ */
.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; }
.btn-sm { padding:.5rem .85rem; font-size:var(--step--1); }

/* Section bands (rule 37 rhythm): boxed wash / raised bands so adjacent sections never share a ground */
/* Site-specific data section (rule "unique section", 2026-09-26): real computed/sourced stat
   tiles, one surface, no nested card border since it already lives inside a band. */
.stat-figs { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s3); }
.stat-fig { display:flex; flex-direction:column; gap:.25rem; padding:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.stat-num { font-family:var(--display); font-weight:800; font-size:var(--step-3); color:var(--accent-deep); line-height:1; }
.stat-lbl { font-size:var(--step--1); color:var(--ink); line-height:1.35; }
.stat-src { font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:auto; }
@media (max-width:860px){ .stat-figs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stat-figs { grid-template-columns:1fr; } }

/* Sunset-times month picker (rule "unique section", 2026-09-26): server-rendered complete, the
   inline JS only swaps which month's pre-rendered panel is visible. */
.sunset-picker { margin-top:var(--s3); }
.sun-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 var(--s3); padding:0; list-style:none; }
.sun-chip { font-family:var(--ui); font-size:var(--step--1); font-weight:600; padding:.4rem .85rem;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.sun-chip.is-on { background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.sun-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sun-panel { display:none; padding:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.sun-panel.is-on { display:block; }
.sun-panel dl { display:grid; grid-template-columns:auto 1fr; gap:.35rem var(--s3); margin:0 0 var(--s3); }
.sun-panel dt { font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:var(--step--1); }
.sun-panel dd { margin:0; font-size:var(--step-0); font-weight:700; }
.sun-panel p { margin:0; font-size:var(--step--1); color:var(--ink); }
.sun-src { display:block; margin-top:var(--s3); font-size:.72rem; color:var(--ink-soft); }

/* Rule-37 alternating section bands: a colour change only, never a boxed panel. A border +
   border-radius here used to turn the WHOLE section into an outer "card", and any real card
   inside it (matrix-table, keyfacts, stp-wrap, pier-picker, cta-box, all of which keep their
   own border) then rendered as a box nested inside that outer box: "a frame around the
   attached section" (Oleg, 2026-09-26). One surface per section: the band is a flat background,
   full section height, no edge of its own. */
.band-wash { background:color-mix(in srgb, var(--brand) 6%, var(--paper)); }
.band-paper-2 { background:var(--paper-2); }

/* ---- Category comparison table (.cmp-table): sticky first column, cards under 640px ---- */
.cmp-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:var(--s4); font-size:var(--step--1); }
.cmp-table th, .cmp-table td { padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--line); }
.cmp-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; }
.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(--accent-deep); }
.cmp-table .cat-name .ico { color:var(--accent-deep); 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; }
.cmp-table td.num { text-align:right; font-family:var(--display); font-weight:800; font-size:var(--step-0); white-space:nowrap; }
@media (max-width:640px){
  .cmp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display:block; width:100%; }
  .cmp-table tr { border-bottom:1px solid var(--line); padding:.5rem 0 .6rem; }
  .cmp-table tr:last-child { border-bottom:0; }
  .cmp-table td { display:grid; grid-template-columns:7rem 1fr; gap:.6rem; border:0; padding:.3rem .9rem; background:transparent !important; position:static; box-shadow:none; }
  .cmp-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; }
  .cmp-table td.num { text-align:left; white-space:normal; }
  .cmp-table td:first-child { grid-template-columns:1fr; padding-top:.6rem; }
  .cmp-table td:first-child::before { display:none; }
}

/* ---- Inclusions matrix (.matrix-table): sticky header, glyph cells, cards under 640px ---- */
.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); }
/* Rule 27 fix (2026-09-26): no th/td padding was ever declared for this table, so "Tour" sat
   flush on the left border and "From" sat flush on the right border while the centred glyph
   columns kept normal room. Match .ex-table's discipline: real padding everywhere, extra on the
   two edge columns so text never touches the frame. */
.matrix-table th, .matrix-table td { padding:.65rem .85rem; }
.matrix-table th:first-child, .matrix-table td:first-child { padding-left:1rem; }
.matrix-table th:last-child, .matrix-table td:last-child { padding-right:1rem; }
.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(--accent-deep); }
.matrix-table td.num, .matrix-table th.num { text-align:right; font-family:var(--display); font-weight:800; font-size:var(--step-0); white-space:nowrap; }
.matrix-table small { display:block; color:var(--ink-soft); font-size:.74rem; line-height:1.25; margin-top:.25rem; }
.glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; }
.glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; }
.glyph.yes { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-deep); }
.glyph.no { background:color-mix(in srgb, var(--brand) 10%, transparent); color:var(--brand); }
.glyph.opt { background:var(--gold-soft); color:var(--gold-ink); }
@media (max-width:640px){
  .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; }
}

/* ---- PHOTO COLLAGE (4-col desktop with 2x2 hero tile, 3-col tablet, 2-col phone, tail hidden) ---- */
.photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:9rem; gap:.55rem; margin:var(--s4) 0 var(--s4); }
.photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--paper-2); box-shadow:var(--shadow); text-decoration:none; }
.photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.photo-collage .pcol-tile:hover img, .photo-collage .pcol-tile:focus-visible img { transform:scale(1.05); }
.photo-collage .pcol-cap { position:absolute; inset:auto 0 0 0; padding:1.6rem .6rem .5rem; color:#fff;
  font-family:var(--display); font-weight:700; font-size:.78rem; line-height:1.2;
  background:linear-gradient(to top, color-mix(in srgb, var(--brand-deep) 88%, transparent), transparent); }
.photo-collage .pcol-tile:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.photo-collage .pcol-tile:nth-child(1) .pcol-cap { font-size:.95rem; padding-top:2.4rem; }
.photo-collage .pcol-tile:nth-child(6) { grid-column:span 2; }
/* Placeholder tile until the D3 image phase generates /images/tour/card-<slug>.jpg:
   a token-tinted wash with the page's CSS-only shimmer animation. */
.photo-collage .pcol-ph { position:absolute; inset:0; display:block;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--paper-2)), color-mix(in srgb, var(--accent) 14%, var(--paper-2))); }
.photo-collage .pcol-ph::after { content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--surface) 45%, transparent) 50%, transparent 60%);
  background-size:220% 100%; animation:pcol-shimmer 2.8s linear infinite; }
@keyframes pcol-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }
@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 + meeting-point picker); 40px tap targets ---- */
.ex-chip, .pp-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, .pp-chip:hover { border-color:var(--accent); color:var(--accent-deep); }
.ex-chip.is-on, .pp-chip.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }
.ex-chip:focus-visible, .pp-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ---- INTERACTIVE: FILTER AND SORT EXPLORER (server-rendered table, JS only narrows) ---- */
.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:52rem; }
.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(--accent-deep); text-decoration:underline; }
.tour-explorer .ex-table tbody tr:nth-child(even) { background:var(--surface-2); }
.tour-explorer .ex-sub { display:block; font-weight:500; font-size:.72rem; color:var(--ink-soft); }
/* Rule 27 fix (2026-09-26): this cell's own "From" price used the table's pre-existing ex-num
   class, not the generic num class the header auto-tagger recognises, so the "From" header
   rendered right (it matched NUM_HDR) while every price cell under it stayed left (render-
   quality-gate.mjs TABLE_ALIGN). Align this column's own class instead of relying on num. */
.tour-explorer .ex-table td.ex-num { white-space:nowrap; font-family:var(--display); font-weight:700; text-align:right; }
.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%; } }

/* ---- INTERACTIVE: MEETING-POINT PICKER (schematic SVG plan, pins filter the list) ---- */
.pier-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); }
.pier-picker .pp-map svg { width:100%; height:auto; display:block; border-radius:var(--radius-sm); border:1px solid var(--line); }
/* Counter-scaled the same way as the stop map's .stp-lbl (see that rule's comment); this svg
   sets its OWN --map-scale (mapScaleObserverScript('.pier-picker .pp-map svg')). */
.pier-picker .pp-label { font-family:var(--display); font-size:calc(13.5px / var(--map-scale, 0.5)); font-weight:700; fill:var(--accent-deep); pointer-events:none; }
.pier-picker .pp-pin { cursor:pointer; }
.pier-picker .pp-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:fill .15s ease, r .15s ease; }
.pier-picker .pp-pin text { fill:#fff; font-size:calc(13px / var(--map-scale, 0.5)); font-weight:800; font-family:var(--display); pointer-events:none; }
.pier-picker .pp-pin:hover circle, .pier-picker .pp-pin:focus-visible circle { fill:var(--accent); }
.pier-picker .pp-pin.is-on circle { fill:var(--accent-deep); r:13; }
.pier-picker .pp-pin:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.pier-picker .pp-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:var(--s3) 0; }
.pier-picker .pp-n { display:inline-block; margin-left:.3rem; font-size:.7rem; font-weight:800; opacity:.75; }
.pier-picker .pp-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; }
.pier-picker .pp-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pier-picker .pp-item { padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
.pier-picker .pp-item a { font-weight:700; color:var(--ink); text-decoration:none; }
.pier-picker .pp-item a:hover { color:var(--accent-deep); text-decoration:underline; }
.pier-picker .pp-meta { display:block; font-size:.74rem; color:var(--ink-soft); margin-top:.15rem; }
.pier-picker .pp-side { min-width: 0; }
@media (max-width:860px){ .pier-picker { grid-template-columns:1fr; padding:var(--s3); } }

/* ---- ANSWERED GRID ("<EMD>, Answered"; populates when D2 writes content) ---- */
.answered-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group { border-top:3px solid var(--accent); 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(--accent-deep); }
.answered-group .ag-kind { font-family:var(--display); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; }
@media (max-width:900px){ .answered-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid { grid-template-columns:1fr; } }

/* Motion discipline: the shimmer and tile zoom are decorative; drop them for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .pcol-ph::after { animation:none; }
  .pcol-tile img { transition:none; }
  .pp-pin circle { transition:none; }
}


/* 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(--ink);
  border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; }
/* A section already carries its own padding-block gap from the section before it (rule 76
   zeroes a stacked section's own top padding, so the previous section's padding-bottom IS
   the gap). Without this, h2's generic margin-top:var(--s6) (4rem) stacks on top of that
   same 4rem section gap, doubling the whitespace between the intro paragraph and the next
   heading to ~150px on every guide/blog page (recheck f-100, f-129). */
.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(--brand); 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(--accent); 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(--accent); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

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


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

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

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

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.tour-hero .hero-banner { margin-bottom: var(--s4); }
.tour-hero .hero-banner img { display: block; width: 100%; height: auto; max-height: clamp(200px, 33vh, 360px); object-fit: cover; 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; }
.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; margin-right: .3em; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--ui); }
.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; }

/* 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}

/* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */
.decision-picker { --dp-key: var(--brand, var(--sea, #24506a)); --dp-line: var(--line, #dfe3e6);
  --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #f5f6f7));
  --dp-ink: var(--ink, #1b1f23); --dp-soft: var(--ink-soft, #5b6570);
  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 color-mix(in srgb, var(--ink) 6%, transparent)); }
.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 color-mix(in srgb, var(--ink) 6%, transparent); }
.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; }
/* Rule 33 floor applies to the card's title LINK too, not only to the chips. Measured at
   39.2px on a 390px viewport (kualalumpuraquarium.com, 2026-09-05) while every chip sat at
   exactly 40px, so the highest-intent target in the block was the one under the floor. */
@media (max-width: 760px) {
  .decision-picker .dp-name a { display:block; min-height:44px; line-height:1.35; padding-block:9px; }
}
.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; }
}

/* ---- 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: #2E3A5F;  /* PLACEHOLDER: deep indigo, the brand */
  --map-2: #8A5A08;  /* cemeteries: ochre */
  --map-3: #14494F;  /* harbor and pier: deep teal */
  --map-4: #6E3A7A;  /* mansions and landmarks: plum */
  --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:    #FAF8F4;
  --mp-water:   #C6DBE3;
  --mp-coast:   #568496;
  --mp-green:   #D9E4D1;
  --mp-grid:    #EFEBE3;
  --mp-edge:    #E2DCD2;
  --mp-road:    #B4A79B;
  --mp-road-mj: #8C8076;
  --mp-trail:   #C7AE86;
  --mp-ink:     #3E3A46;
}

/* ---- 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 color-mix(in srgb, #ffffff 95%, transparent)); }
.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-26): the svg scales fluidly to its container
   (.stp-map{width:100%}), so a label sized for a desktop-width plate rendered well under 12 CSS
   px once the whole thing shrunk on a phone. mapScaleObserverScript() (build/compile.mjs) sets
   --map-scale on the <svg> to its true rendered-width / viewBox-width ratio; dividing the
   declared size by that ratio keeps the ON-SCREEN size constant at every viewport instead of
   shrinking with the plate. 0.5 is the no-JS/pre-paint fallback (close to this component's
   typical phone-width shrink), corrected to the exact value within one frame. */
.stp-lbl { font-size:calc(13.5px / var(--map-scale, 0.5)); 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.5)); fill:var(--brand-deep); 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.5)); 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:var(--ink); stroke-width:2.5; }
.stp-pin:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .stp-pin .stp-dot { transition:none; } }
.stp-home circle:first-child { fill:var(--mp-land); stroke:var(--map-1); stroke-width:2; }
.stp-home-dot { fill:var(--map-1); }

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

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

/* ---- Legend: chips, not loose dots ---- */
.stp-legend { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.45rem .5rem; align-items:center; position:relative; }
.stp-legend li { display:inline-flex; align-items:center; gap:.42rem; font-size:var(--step--2, .72rem);
  color:var(--ink-soft); font-weight:500; line-height:1.3; }
/* The group colour now lives INSIDE the filter chip, so one row both explains and filters. The
   legend used to repeat the same four words 60px above an identical pill row. */
.stp-chip .stp-key { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto;
  margin-right:.45rem; box-shadow:0 0 0 1.5px color-mix(in srgb, #ffffff 60%, transparent) 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; }

/* ---- Stop map section furniture: chips, status line, numbered stop cards ---------------- */
.stp-controls { display:flex; flex-wrap:wrap; gap:.45rem; margin:var(--s3) 0; }
.stp-status { margin:0 0 var(--s3); font-size:var(--step--1); font-weight:600; color:var(--ink-soft); max-width:none; }
.stp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.stp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:.45rem; }
.stp-card h3 { margin:0; font-size:var(--step-0); display:flex; align-items:center; gap:.5rem; }
.stp-card[hidden] { display:none; }
.stp-num { width:1.7rem; height:1.7rem; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:.82rem; flex:none; }
.stp-cg0 { background:var(--map-1); } .stp-cg1 { background:var(--map-2); }
.stp-cg2 { background:var(--map-3); } .stp-cg3 { background:var(--map-4); }
.stp-facts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.2rem 1rem; font-size:var(--step--1); color:var(--ink-soft); }
.stp-card p { margin:0; font-size:var(--step--1); }
@media (max-width:820px){ .stp-results { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stp-results { grid-template-columns:1fr; } }

/* Rule 27 table polish: zebra rows and right-aligned tabular numerics sitewide. */
.prose tbody tr:nth-child(even) > td,
.prose tbody tr:nth-child(even) > th[scope="row"],
.keyfacts tbody tr:nth-child(even) > td,
.keyfacts tbody tr:nth-child(even) > th[scope="row"] {
  background: color-mix(in srgb, var(--paper-2) 55%, var(--surface));
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th[scope="col"].num { text-align: right; }
/* Rule 27 fix (2026-09-26): `.cmp-table th, .cmp-table td { text-align:left }` (0,2,2) and
   `.tour-explorer .ex-table th, .tour-explorer .ex-table td { text-align:left }` (0,3,2) both
   OUTRANK the generic `td.num, th.num` rule above (0,1,1), so the auto-tagged "From" column
   kept rendering left-aligned in the includes matrix and the tour explorer despite carrying
   class="num" (render-quality-gate.mjs, TABLE_ALIGN). Match or beat their specificity here. */
.cmp-table td.num, .cmp-table th.num,
.tour-explorer .ex-table td.num, .tour-explorer .ex-table th.num { text-align: right; }

/* Photo hero (Oleg 2026-09-20): first section is a full-bleed background photograph. */
.hero-photo { position: relative; isolation: isolate; overflow: clip; }
.hero-photo-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("/images/uploaded/home-hero.jpg") center 38% / cover no-repeat;
  transform: scale(1.04);
  animation: hero-drift 26s ease-in-out infinite alternate;
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--brand-deep) 90%, transparent) 0%,
    color-mix(in srgb, var(--brand-deep) 72%, transparent) 46%,
    color-mix(in srgb, var(--brand-deep) 34%, transparent) 100%);
}
.hero-photo-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: var(--s5, 2.5rem); align-items: center;
  padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 5.5rem);
  min-height: min(78vh, 640px);
}
.hero-photo .hero-kicker {
  font-family: var(--ui); font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--gold) 80%, var(--paper));
  margin: 0 0 var(--s2, 1rem);
}
.hero-photo h1 { color: var(--paper); max-width: 21ch; text-wrap: balance; margin: 0 0 var(--s3, 1.25rem); }
.hero-photo .lede {
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  max-width: 58ch; margin: 0; text-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 60%, transparent);
}
@keyframes hero-drift { from { background-position: 50% 34%; } to { background-position: 54% 42%; } }
@media (max-width: 900px) {
  .hero-photo-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero-photo::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand-deep) 88%, transparent) 0%,
      color-mix(in srgb, var(--brand-deep) 70%, transparent) 70%,
      color-mix(in srgb, var(--brand-deep) 55%, transparent) 100%);
  }
  .hero-photo .lede { font-size: var(--step--1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-bg { animation: none; transform: none; }
}

/* Smooth in-page travel (chip nav anchors). */
html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 4.5rem; }

/* Section chip nav (server-rendered anchors, works with scripting off). */
.chip-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding: .9rem 1rem; background: var(--paper-2); border-block: 1px solid var(--line); }
.chip-nav a { font-family: var(--ui); font-size: var(--step--1); font-weight: 600;
  color: var(--ink); text-decoration: none; padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); min-height: 40px;
  display: inline-flex; align-items: center; transition: border-color .18s, color .18s, transform .18s; }
.chip-nav a:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); }
.chip-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hero roster proof line (numbers from tours.json only). */
.hero-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem;
  margin: 0 0 var(--s3); font-family: var(--ui); font-weight: 600; }
.hero-proof .hp-stars { color: var(--gold); letter-spacing: .08em; }
.hero-proof .hp-rest { color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: var(--step--1); }

/* Mobile fold: booking panel rises above the clamped lede (Oleg 2026-09-20). */
@media (max-width: 900px) {
  .hero-photo-grid { display: flex; flex-direction: column; padding-top: 1.6rem; }
  .hero-photo .hero-copy { display: contents; }
  .hero-photo .hero-kicker { order: 1; }
  .hero-photo h1 { order: 2; font-size: var(--step-1); }
  .hero-photo .hero-proof { order: 3; }
  .hero-photo-grid > aside, .hero-photo-grid > div[class*="panel"], .hero-photo-grid > [id*="cta"] { order: 4; }
  .hero-photo .lede { order: 5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; }
  .hero-photo-bg { background-position: 55% 30%; }
}
@media (max-width: 640px) {
  .hero-photo h1 { font-size: 1.42rem; line-height: 1.12; margin-bottom: .6rem; }
  .hero-photo .hero-proof { margin-bottom: .7rem; }
}

/* Lantern glow behind the hero booking panel (token-derived, decorative only). */
.hero-photo-grid > aside, .hero-photo-grid > div[class*="panel"] { position: relative; }
.hero-photo-grid > aside::before, .hero-photo-grid > div[class*="panel"]::before {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: calc(var(--radius) + 8px);
  background: radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 72%);
  pointer-events: none;
}

/* Card hover affordance. */
.rcard, .tour-row, .tp-card, .hotel-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.rcard:hover, .tour-row:hover, .tp-card:hover, .hotel-card:hover {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent);
}
.ex-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* Why-here band: photo backdrop, content kept legible with a light wash + text halo
   instead of a near-opaque paper fill (2026-09-24 fix: the old 96%/78% paper-color
   overlay measured mean~205 rendered vs mean~76 in the source photo, i.e. the photo
   was almost fully obscured; this is the "white transparent wash" Oleg flagged). */
#why-here { position: relative; isolation: isolate; }
#why-here::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 46%, transparent) 30%, color-mix(in srgb, var(--paper) 20%, transparent) 100%),
    url("/images/uploaded/cat-monuments.jpg") center 30% / cover no-repeat; }
#why-here h2, #why-here p {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--paper) 95%, transparent),
    0 0 16px color-mix(in srgb, var(--paper) 85%, transparent),
    0 0 32px color-mix(in srgb, var(--paper) 60%, transparent);
}

/* FAQ accordion polish: rotating chevron, soft open. */
details summary::-webkit-details-marker { display: none; }
details summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.2rem; }
details summary::after { content: "+"; position: absolute; right: .2rem; top: 0;
  font-family: var(--ui); font-weight: 600; color: var(--accent-deep);
  transition: transform .2s ease; font-size: 1.25em; line-height: 1; }
details[open] summary::after { transform: rotate(45deg); }
details[open] > *:not(summary) { animation: faq-open .26s ease both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Consistent focus ring. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* Count-up numbers: static text ships; the animation only enhances. */
.num[data-count] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  details[open] > *:not(summary) { animation: none; }
}

/* Multi-column keyfacts (3 Kinds table): fixed tracks so columns align crisply. */
.keyfacts.wide { table-layout: fixed; }
.keyfacts.wide th[scope="row"] { width: 26%; white-space: nowrap; }
.keyfacts.wide td:nth-child(2) { width: 10%; }
.keyfacts.wide td:last-child { width: 15%; }
.keyfacts.wide thead th { white-space: nowrap; }

/* Three-column PROSE comparison (tour vs DIY, etc): a genuinely different shape from the
   narrow-numeric .wide table above, so it gets its own width split instead of inheriting
   .wide's 10%/15% data-column widths, which were tuned for single numbers, not sentences. */
.keyfacts.cmp3 { table-layout: fixed; }
.keyfacts.cmp3 thead th:first-child { width: 20%; }
.keyfacts.cmp3 thead th:not(:first-child) { width: 40%; }
.keyfacts.cmp3 th[scope="row"] { width: 20%; }
.keyfacts.cmp3 td { width: 40%; }
@media (max-width: 720px) { .keyfacts.cmp3 { table-layout: auto; } }

/* Breathing room: blueprint tables never sit flush to section edges or each other. */
.section > table, .section > .table-scroll { margin-block: var(--s4); }
.section > h2 + table, .section > h2 + .table-scroll { margin-top: var(--s3); }
table + .table-scroll, .table-scroll + table, .table-scroll + .table-scroll { margin-top: var(--s4); }

/* Stop-map text: THIN halo matching the plate colour (var(--mp-land), not var(--paper), which
   is a different, mismatched hue in dark mode and read as a heavy pink-white outline, rule 2
   fix 2026-09-26). paint-order:stroke keeps the halo behind the fill; .stp-lbl/.stp-lbl-home
   already set the correct per-mode stroke colour and now win here too since this selector no
   longer sets `stroke` at all, only the shared paint-order/join plumbing. */
.stp-labels text { paint-order: stroke; stroke-linejoin: round; }
.stp-map text.stp-grat, .stp-map .stp-grat text { paint-order: stroke; stroke: var(--mp-land); stroke-width: 1.6px; stroke-linejoin: round; }
.stp-lbl { font-family: var(--ui); }

/* Departure picker: map text never mashes (thin halo matching the plate + collision-placed short
   labels). The pp-map plate really is var(--paper) (see the pp-map svg's <rect>), so the halo
   colour is correct here; only the width was too heavy. */
.pp-label { paint-order: stroke; stroke: var(--paper); stroke-width: 1.6px; stroke-linejoin: round; }
.pp-map-head { font-family: var(--display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep);
  margin: 0 0 .4rem; }
.pp-chips { flex-direction: column; align-items: flex-start; }
.pp-filter-title { font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .2rem; }
.pp-chips .pp-chip { margin: 0; }
.pp-chips { display: flex; }
@media (min-width: 641px) {
  .pp-chips { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .pp-filter-title { flex-basis: 100%; }
}

/* 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 */

/* ---- home visuals r26 (2026-10-05): photos inside the text-only homepage blocks of the rule-26 blueprint. Same look as home-visuals.css ---- */
.hv-mosaic, .hv-strip { display: grid; gap: var(--s3, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; margin: var(--s3, 1rem) 0 var(--s4, 1.5rem); }
.hv-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; }
.hv-ph, .hv-season, .hv-faq-img { margin: 0; overflow: hidden; border-radius: var(--radius, 12px); }
.hv-ph img, .hv-faq-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 761px) { .hv-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; } }
@media (max-width: 560px) { .hv-strip { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 180px; } }
.hv-seasons { display: grid; gap: var(--s3, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s4, 1.5rem); }
@media (min-width: 761px) { .hv-seasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hv-season { background: var(--surface, #fff); border: 1px solid var(--line, #ddd); }
.hv-season img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hv-season figcaption { padding: .5rem .75rem; font-weight: 800; font-size: var(--step--1, .9rem); color: var(--ink, #111); }
.hv-faq { display: grid; gap: var(--s4, 1.5rem); grid-template-columns: minmax(0, 1fr); }
.hv-faq-list { min-width: 0; }
.hv-faq-img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .hv-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
  .hv-faq-list { grid-column: 1; grid-row: 1; }
  .hv-faq-img { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; position: sticky; top: 90px; }
}
.answered-group ul.hv-gl { gap: .6rem; }
.answered-group li.hv-gc { display: flex; align-items: center; gap: .6rem; padding: .5rem; border: 1px solid var(--line, #ddd); border-radius: var(--radius, 12px); background: var(--surface, #fff); min-height: 44px; }
.answered-group .hv-gc a { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.answered-group .hv-gc img { flex: 0 0 auto; width: 88px; height: 64px; object-fit: cover; border-radius: calc(var(--radius, 12px) / 1.5); display: block; }
.answered-group .hv-gc span:not(.ag-kind) { min-width: 0; font-weight: 700; line-height: 1.3; }
.answered-group .hv-gc a:hover span { text-decoration: underline; }
.hv-hc-img { margin: 0 0 .2rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius, 12px) / 1.5); }
.hv-hc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stp-legend li.stp-attrib{opacity:1}
.hero-proof .hp-stars{color:#FFD76A}