/* ============================================================
   Galveston Ghost Tours - Design System
   PALETTE: "Strand Nocturne" (locked at the Phase C gate 2026-09-20):
   warm paper ground, storm-indigo brand and deep bands, one spectral-teal
   CTA (white text), gold reserved for real ratings.
   Soft 10px radii, hairline rules under headings.
   Mobile-first, zero heavy deps, system fonts to protect LCP.
   ============================================================ */
/* ---- COLOR TOKENS: "Strand Nocturne" (site.config.md > PALETTE, gate 2026-09-20) ---- */
:root {
  /* ---- Strand Nocturne: paper ground, storm indigo, spectral teal CTA, ratings gold. ---- */
  --ink:        #14202D;   /* primary text: night ink */
  --ink-soft:   #4A5766;   /* secondary text: soft ink (6.0:1 on --paper) */
  --paper:      #F2EDE2;   /* page ground: warm paper */
  --paper-2:    #E6DECC;   /* raised panels (info blocks, table headers) */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #ffffff;   /* inputs */
  --line:       #D3C8B1;   /* hairline borders on light */
  --brand:      #1B3A57;   /* storm indigo: links, secondary buttons, structural fills */
  --brand-deep: #0A1624;   /* deep indigo: footer fills, inverse bands */
  --accent:     #8A4B05;   /* spectral teal - CTA ONLY (white text, 5.9:1) */
  --accent-deep:#6A3803;   /* deeper teal for CTA hover */
  --accent-ink: #ffffff;   /* text colour that sits on --accent */
  --gold:       #B08628;   /* ratings only - real ratings (3.9:1 on white, large/bold) */
  --gold-soft:  #EDE3CC;   /* gold wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #5C4715;   /* text colour that sits on --gold-soft */
  --ok:         #2F6B46;  /* status yes: accent family */
  --warn:       #96711F;  /* 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: "Didot", "Bodoni 72", "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --lantern: #F3A93C; --midnight: #0A1624; --gulf: #10263B; --bone: #F2EDE2;
  --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 rgba(30,34,48,.05), 0 10px 28px rgba(30,34,48,.08);  /* 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.08; letter-spacing: -.012em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.22; letter-spacing: 0; 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: rgba(244,243,240,.92);  /* paper */ 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: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); }
.hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); }
.hero-full .author-hook a { color: #fff; }
.hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); }
.hero-full-ghost:hover { border-color:#fff; }
.hero-full .cta-proof { color: rgba(255,255,255,.92); }
.hero-full .cta-proof .gold { color:#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); 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:rgba(255,255,255,.82); max-width:52ch; margin-inline:auto; }

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

/* ---- FOOTER (the one deepest surface, 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); }
/* 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:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s ease; }
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta .sc-proof { font-size:var(--step--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 (Strand Nocturne); 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 */
.band-wash { background:color-mix(in srgb, var(--brand) 6%, var(--paper)); border:1px solid var(--line); border-radius:var(--radius); }
.band-paper-2 { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); }

/* ---- 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 { background:var(--surface); }
.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 { background:var(--paper-2); box-shadow:0 1px 0 var(--line); }
.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align:center; }
.matrix-table td:first-child a { font-weight:700; color:var(--ink); }
.matrix-table td:first-child a:hover { color:var(--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); }
.tour-explorer .ex-num { white-space:nowrap; font-family:var(--display); font-weight:700; }
.tour-explorer .ex-table .btn { white-space:nowrap; }
.tour-explorer #ex-empty td { text-align:center; color:var(--ink-soft); font-style:italic; padding:var(--s4) var(--s3); }
@media (max-width:560px){ .tour-explorer { padding:var(--s3); } .tour-explorer .ex-lab { min-width:100%; } }

/* ---- 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); }
.pier-picker .pp-label { font-family:var(--display); font-size:12px; 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:11px; 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; }
@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(--s2); border-bottom: 2px solid var(--ink);
  border-image: none; }

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

.decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); }
.decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; }
.decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; }
.decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; }
.decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; }
/* 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;  /* strand: storm 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 rgba(255,255,255,.95)); }
.bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; }

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

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

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

/* Map dark palette removed 2026-09-22: the page has no dark theme, so a dark map on a light page
   read as a slab, and the paper-coloured halo below smeared its light labels. */

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

/* 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/hero-galveston-ghost-tours.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 on a paper wash (AA unchanged). */
#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) 96%, transparent) 30%, color-mix(in srgb, var(--paper) 78%, transparent) 100%),
    url("/images/uploaded/cat-walking-ghost-tours.jpg") center 30% / cover no-repeat; }

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

/* 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: paper halo so close labels stay legible instead of mushing. */
.stp-labels text { paint-order: stroke; stroke: var(--mp-land); stroke-width: 3px; stroke-linejoin: round; }
.stp-map text.stp-grat, .stp-map .stp-grat text { paint-order: stroke; stroke: var(--paper); stroke-width: 2.5px; stroke-linejoin: round; }
.stp-lbl { font-family: var(--ui); }

/* Departure picker: map text never mashes (halo + collision-placed short labels). */
.pp-label { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; 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-chips-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-chips-title { flex-basis: 100%; }
}

/* ---- 2026-09-22 layout pass: map size, label legibility, clean table grid ---- */
/* The SVG scales with its box; at 1152px wide a 12px label rendered at 18px and the plate ran
   ~950px tall. Cap it at its design width so text renders at its true size. */
.stp-wrap { max-width: 760px; margin-inline: auto; }
.stp-lbl { font-size: 12px; font-weight: 600; }
@media (max-width: 620px) {
  /* At phone width the plate renders at ~45% scale, so 12px labels became 5px smudges. Pins keep
     their numbers (bigger), names come from the numbered cards directly below. */
  .stp-labels { display: none; }
  .stp-pin .stp-dot { r: 17px; }
  .stp-pin .stp-num { font-size: 19px; }
  .ix-map { -webkit-mask-image: none; mask-image: none; }
  .stp-legend li.stp-swipe { display: none; }
}

.mx-wrap { overflow-x: auto; margin-top: var(--s4); }
.matrix-table { margin-top: 0; }
.matrix-table th, .matrix-table td { padding: .7rem .9rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align: left; }
.matrix-table thead th { font-family: var(--display); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid var(--line); }
.matrix-table thead th.num { font-size: .72rem; font-weight: 700; }
.matrix-table td.num, .matrix-table th.num { text-align: right; }
.matrix-table tbody tr:nth-child(even) > td { background: var(--surface-2); }
.matrix-table tbody tr:last-child > td { border-bottom: 0; }
.matrix-table td:first-child { min-width: 14rem; }
.matrix-table .mx-flag { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.matrix-table .mx-flag small, .matrix-table td small { display: inline; margin: 0; font-size: .78rem; color: var(--ink-soft); }
.matrix-table .glyph { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.matrix-table .glyph .ico { width: .85rem; height: .85rem; }
.matrix-table .mx-rate { font-weight: 700; white-space: nowrap; }
.mx-note { font-size: var(--step--1); color: var(--ink-soft); margin: .6rem 0 0; }
.cmp-table .cat-name span { white-space: nowrap; }
.cmp-table th, .cmp-table td { padding: .75rem .9rem; vertical-align: middle; }
.cmp-table tbody tr:last-child > td { border-bottom: 0; }
@media (max-width: 640px) {
  .mx-wrap { overflow: visible; }
  .matrix-table th, .matrix-table td { padding: .55rem .9rem; }
  .matrix-table td.num { text-align: right; }
  .matrix-table td:first-child { min-width: 0; }
  .matrix-table tbody tr:nth-child(even) > td { background: var(--surface); }
  .matrix-table tbody tr > td:first-child { background: var(--paper-2); }
}
.matrix-table thead th { position: static; }
.matrix-table td.num { font-family: inherit; font-weight: 500; font-size: inherit; }
.matrix-table td.mx-price { font-family: var(--display); font-weight: 800; font-size: var(--step-0); }
.cmp-table td[data-label="Typical length"] { white-space: nowrap; }
/* Article tables: numeric columns (decided per column at build time) right-align with their header. */
.prose th.num, .prose td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Phones: the 8-column tour explorer and the wide key-facts table stack into labelled cards
   instead of hiding rating, price and the booking button behind an unannounced sideways scroll. */
@media (max-width: 640px) {
  .tour-explorer .ex-table { min-width: 0; }
  .tour-explorer .ex-table thead, .keyfacts.wide thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .tour-explorer .ex-table, .tour-explorer .ex-table tbody, .tour-explorer .ex-table tr,
  .tour-explorer .ex-table th, .tour-explorer .ex-table td { display:block; width:100%; max-width:none; }
  .tour-explorer .ex-table tr { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); background:var(--surface) !important; overflow:hidden; }
  .tour-explorer .ex-table tbody th { background:var(--paper-2); padding:.7rem .9rem; font-size:var(--step-0); }
  .tour-explorer .ex-table td { display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:right; padding:.5rem .9rem; border-top:1px solid var(--line); }
  .tour-explorer .ex-table td::before { font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--ink-soft); text-align:left; flex:0 0 auto; }
  .tour-explorer .ex-table td:nth-of-type(1)::before { content:"Kind"; }
  .tour-explorer .ex-table td:nth-of-type(2)::before { content:"On the night"; }
  .tour-explorer .ex-table td:nth-of-type(3)::before { content:"Length"; }
  .tour-explorer .ex-table td:nth-of-type(4)::before { content:"Meets"; }
  .tour-explorer .ex-table td:nth-of-type(5)::before { content:"From"; }
  .tour-explorer .ex-table td:nth-of-type(6)::before { content:"Rating"; }
  .tour-explorer .ex-table td:nth-of-type(7) { justify-content:stretch; }
  .tour-explorer .ex-table td:nth-of-type(7) .btn { width:100%; justify-content:center; }
  .tour-explorer .ex-table .ex-sub { display:block; }
  .tour-explorer .ex-table td .ex-sub { display:inline; margin-left:.35rem; }
  .keyfacts.wide { display:block; table-layout:auto; border:0; background:transparent; overflow:visible; }
  .keyfacts.wide tbody, .keyfacts.wide tr, .keyfacts.wide th, .keyfacts.wide td { display:block; width:100% !important; }
  .keyfacts.wide tr { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); background:var(--surface); overflow:hidden; }
  .keyfacts.wide th[scope="row"] { white-space:normal; }
  .keyfacts.wide td { display:flex; justify-content:space-between; gap:1rem; text-align:right !important; background:var(--surface) !important; }
  .keyfacts.wide td::before { font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--ink-soft); text-align:left; flex:0 0 auto; }
  .keyfacts.wide td:nth-of-type(1)::before { content:"Tours"; }
  .keyfacts.wide td:nth-of-type(2)::before { content:"Format"; }
  .keyfacts.wide td:nth-of-type(3)::before { content:"From"; }
}
@media (max-width: 640px) { .tour-explorer #ex-empty td::before { content:none; } .tour-explorer #ex-empty td { justify-content:center; } }
@media (max-width: 640px) {
  .tour-explorer .ex-table tbody th { max-width:none; }
  .tour-explorer .ex-table td { justify-content:flex-start; gap:.4rem; }
  .tour-explorer .ex-table td::before { margin-right:auto; }
}
/* Mobile hero: the flex column inherited align-items:center from the grid, which centred the
   21ch H1 box and left it visibly indented against the full-width proof line and panel. */
@media (max-width: 900px) {
  .hero-photo-grid { align-items: stretch; }
  .hero-photo h1 { max-width: none; }
}
/* Phones: a keyfacts table with a header row (Tour / From / Rating / Reviews) is short enough to
   fit as a real table once the name column may wrap; the block+scroll fallback hid half of it. */
@media (max-width: 640px) {
  .keyfacts:has(thead):not(.wide) { display: table; overflow: visible; font-size: var(--step--1); }
  .keyfacts:has(thead):not(.wide) th, .keyfacts:has(thead):not(.wide) td { padding: .55rem .5rem; }
  .keyfacts:has(thead):not(.wide) th { width: auto; min-width: 0; }
  .keyfacts:has(thead):not(.wide) thead th { font-size: .72rem; }
}
/* Meeting-point picker without its schematic plate: chips and list sit side by side. */
.pier-picker .pp-chips { margin-top: 0; }
.pier-picker { grid-template-columns: 1fr; }
.pier-picker .pp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
/* Inline links inside the indigo CTA banner inherited the indigo link colour: invisible. */
.cta-banner a:not(.btn) { color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; font-weight: 600; }
.cta-banner a:not(.btn):hover { text-decoration-color: #fff; }
/* Gap above the footer was ~220px (last section's 64px padding + a 96px footer margin). */
.site-footer { margin-top: 2.5rem; }
main > section:last-child { padding-bottom: 2.5rem; }
@media (max-width: 640px) { .site-footer { margin-top: 1.25rem; } main > section:last-child { padding-bottom: 1.75rem; } }
@media (max-width: 640px) {
  .tour-picks { padding: var(--s2, .75rem); }
  /* Article tables: each row becomes a labelled card (labels are the column headers, written
     onto every cell at build time), so no column is ever cropped off the right edge. */
  .prose table.md-table { display: block; overflow: visible; border: 0; background: transparent; }
  .prose table.md-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .prose table.md-table tbody, .prose table.md-table tr, .prose table.md-table td { display: block; width: 100%; }
  .prose table.md-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); overflow: hidden; background: var(--surface); }
  .prose table.md-table td { display: grid; grid-template-columns: 38% 1fr; gap: .75rem; padding: .5rem .85rem; border: 0; border-top: 1px solid var(--line); text-align: left !important; background: transparent !important; }
  .prose table.md-table td:first-child { display: block; border-top: 0; background: var(--paper-2) !important; font-weight: 700; font-family: var(--display); }
  .prose table.md-table td::before { content: attr(data-label); font-family: var(--display); font-weight: 700; font-size: .78rem; color: var(--ink-soft); }
  .prose table.md-table td:first-child::before { content: none; }
}
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .tp-solo .tp-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .prose table.md-table { width: 100% !important; max-width: 100%; min-width: 0 !important; table-layout: auto; }
  .prose table.md-table td { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); overflow-wrap: anywhere; white-space: normal !important; }
}

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

/* contrast fixes (r50 rollout) */
.tour-picks .tp-proof .gold, .bp-rating .gold, .sticky-cta .sc-proof .gold, .testimonial-card .tc-stars, .quick-answer .qa-label, .trust .num { color:#7a5a12; }
.hero-proof .hp-stars { color:#f0c070; }
.cta-banner p a { color:#fff; text-decoration:underline; }
.stp-legend li.stp-attrib, .stp-legend li.stp-attrib * { color:#4a4f5c; opacity:1; }
.wrap-narrow ul li { color:var(--ink); }
.wrap-narrow ul li a { text-decoration-thickness:1px; }

/* =====================================================================================
   GALVESTON "LANTERN ROUTE" DESIGN (2026-10-31): midnight gulf blue, lantern amber, bone white.
   Own class prefix gvg-. Header, hero, footer and the homepage visuals. Nothing here is sticky
   except the header itself.
   ===================================================================================== */
/* ---- header: centred wordmark, split nav ---- */
.gvg-head { position: sticky; top: 0; z-index: 40; background: rgba(10,22,36,.97); color: var(--bone);
  border-bottom: 1px solid color-mix(in srgb, var(--lantern) 34%, transparent); }
.gvg-head-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; gap: 1rem; }
.gvg-mark { grid-column: 2; display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--bone); padding: .35rem .2rem; }
.gvg-lantern { color: var(--lantern); flex: 0 0 auto; }
.gvg-mark-t { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.gvg-mark-1 { font-family: var(--display); font-size: 1.32rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gvg-mark-2 { font-family: var(--ui); font-size: .66rem; letter-spacing: .42em; text-transform: uppercase; color: var(--lantern); margin-top: .28rem; padding-left: .08em; }
.gvg-nav { display: contents; }
.gvg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.5rem; }
.gvg-nav-l { grid-column: 1; grid-row: 1; justify-self: start; }
.gvg-nav-r { grid-column: 3; grid-row: 1; justify-self: end; }
.gvg-nav a { color: var(--bone); text-decoration: none; font-family: var(--ui); font-weight: 600; font-size: .92rem; letter-spacing: .02em; padding: .6rem .1rem; border-bottom: 2px solid transparent; }
.gvg-nav a:hover { color: var(--lantern); border-bottom-color: var(--lantern); }
.gvg-nav a.gvg-cta { background: var(--lantern); color: #1A1205; border: 0; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 700; }
.gvg-nav a.gvg-cta:hover { background: #FFBE5C; color: #1A1205; }
.gvg-head :focus-visible { outline-color: var(--lantern); }
.gvg-head-pad, .gvg-burger { display: none; }
@media (max-width: 860px) {
  .gvg-head-in { grid-template-columns: 48px 1fr 48px; min-height: 58px; gap: .4rem; }
  .gvg-head-pad { display: block; grid-column: 1; }
  .gvg-mark { grid-column: 2; justify-self: center; }
  .gvg-mark-1 { font-size: 1.12rem; }
  .js .gvg-burger { display: grid; place-items: center; grid-column: 3; justify-self: end; position: relative; z-index: 80; width: 48px; height: 48px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--bone); }
  .gvg-burger-bars, .gvg-burger-bars::before, .gvg-burger-bars::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .gvg-burger-bars { position: relative; }
  .gvg-burger-bars::before, .gvg-burger-bars::after { content: ""; position: absolute; left: 0; }
  .gvg-burger-bars::before { top: -7px; } .gvg-burger-bars::after { top: 7px; }
  .gvg-burger[aria-expanded="true"] .gvg-burger-bars { background: transparent; }
  .gvg-burger[aria-expanded="true"] .gvg-burger-bars::before { top: 0; transform: rotate(45deg); }
  .gvg-burger[aria-expanded="true"] .gvg-burger-bars::after { top: 0; transform: rotate(-45deg); }
  /* no-JS fallback: both link groups sit in a wrapped row under the wordmark */
  .gvg-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.2rem; grid-column: 1 / -1; padding-bottom: .5rem; }
  .gvg-nav ul { gap: 1.1rem; }
  /* JS: full-screen dark overlay */
  .js .gvg-nav { display: none; position: fixed; inset: 0; z-index: 70; flex-direction: column; justify-content: center; align-items: stretch; gap: 1.6rem; counter-reset: gvgnav;
    padding: 5.5rem 1.5rem 2.5rem; background: radial-gradient(90% 50% at 50% 0%, rgba(243,169,60,.16), transparent 70%), var(--midnight); overflow-y: auto; }
  .js .gvg-nav[data-open="true"] { display: flex; }
  .js .gvg-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .gvg-nav li { border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); counter-increment: gvgnav; }
  .js .gvg-nav li:last-child { border-bottom: 0; }
  .js .gvg-nav a { display: flex; align-items: baseline; gap: .9rem; min-height: 56px; font-family: var(--display); font-size: 1.9rem; font-weight: 700; padding: .55rem .2rem; border: 0; }
  .js .gvg-nav a::before { content: counter(gvgnav, decimal-leading-zero); font-family: var(--ui); font-size: .78rem; letter-spacing: .12em; color: var(--lantern); min-width: 1.6rem; }
  .js .gvg-nav a.gvg-cta { justify-content: center; margin-top: .9rem; font-family: var(--ui); font-size: 1.05rem; padding: .95rem 1.2rem; }
  .js .gvg-nav a.gvg-cta::before { content: none; }
  .js .gvg-nav-r li:last-child { border-bottom: 0; }
  html.gvg-menu-open { overflow: hidden; }
}

/* ---- hero: Lantern Route ---- */
.gvg-hero { position: relative; isolation: isolate; color: var(--bone);
  background: radial-gradient(60% 90% at 82% 30%, rgba(243,169,60,.14), transparent 70%), linear-gradient(160deg, #0A1624 0%, #10263B 100%);
  border-bottom: 3px solid var(--lantern); }
.gvg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 2.4rem; align-items: center; padding-block: 2.1rem 2.3rem; }
.gvg-hero h1 { color: var(--bone); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.08; max-width: 24ch; margin: 0 0 .9rem; text-wrap: balance; }
.gvg-hero .lede { color: color-mix(in srgb, var(--bone) 88%, transparent); font-size: .98rem; line-height: 1.6; max-width: 62ch; margin: 0 0 1.1rem; }
.gvg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; }
.gvg-chips li { border: 1px solid color-mix(in srgb, var(--lantern) 55%, transparent); border-radius: 999px; padding: .38rem .85rem; font-family: var(--ui); font-size: .86rem; color: var(--bone); background: rgba(243,169,60,.08); white-space: nowrap; }
.gvg-chips b { color: var(--lantern); font-weight: 700; }
.gvg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem; }
.gvg-actions .btn-primary { background: var(--lantern); color: #1A1205; }
.gvg-actions .btn-primary:hover { background: #FFBE5C; color: #1A1205; }
.gvg-jump { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-family: var(--ui); font-size: .88rem; }
.gvg-jump a { color: var(--bone); text-decoration-color: color-mix(in srgb, var(--lantern) 70%, transparent); padding: .5rem 0; }
.gvg-jump a:hover { color: var(--lantern); }
.gvg-schem { margin: 0; background: rgba(5,12,20,.55); border: 1px solid color-mix(in srgb, var(--lantern) 28%, transparent); border-radius: 14px; padding: .8rem .9rem .7rem; }
.gvg-map { display: block; width: 100%; height: auto; }
.gvg-map .gvg-water { fill: #12304D; }
.gvg-map .gvg-st { stroke: #2C4A66; stroke-width: 1.4; }
.gvg-map .gvg-st-major { stroke: var(--lantern); stroke-opacity: .6; stroke-width: 3; }
.gvg-map .gvg-arrow { stroke: var(--lantern); stroke-width: 2.2; stroke-dasharray: 4 4; }
.gvg-map .gvg-lab { fill: #B8C7D6; font-family: var(--ui); font-size: 16px; }
.gvg-map .gvg-lab-s { fill: var(--bone); }
.gvg-map .gvg-bulb { fill: var(--lantern); stroke: #0A1624; stroke-width: 2; }
.gvg-map .gvg-num { fill: #1A1205; font-family: var(--ui); font-size: 15px; font-weight: 800; }
.gvg-map a:hover .gvg-bulb, .gvg-map a:focus-visible .gvg-bulb { fill: #FFD28A; }
.gvg-cap { color: #B8C7D6; font-size: .8rem; margin: .35rem 0 .4rem; }
.gvg-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem .8rem; font-family: var(--ui); font-size: .8rem; color: var(--bone); }
.gvg-legend li { display: flex; align-items: baseline; gap: .4rem; line-height: 1.35; }
.gvg-legend span { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--lantern); color: #1A1205; font-weight: 800; font-size: .72rem; }
.gvg-legend em { color: #B8C7D6; font-style: normal; white-space: nowrap; }
.gvg-legend em::before { content: "\00b7\00a0"; }
@media (max-width: 1000px) { .gvg-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gvg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-block: 1.4rem 1.6rem; }
  .gvg-hero h1 { font-size: 1.7rem; max-width: none; }
  .gvg-hero .lede { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .gvg-chips { gap: .4rem; }
  .gvg-legend { font-size: .76rem; }
  .gvg-schem { padding: .6rem .7rem .5rem; }
  .gvg-chips li { white-space: normal; font-size: .82rem; }
  .gvg-actions .btn { width: 100%; }
}

/* quick answer sits right under the hero */
.quick-answer { border-left-color: var(--lantern); border-radius: 4px 14px 14px 4px; padding: 1rem 1.3rem; margin-top: 1.4rem; background: var(--surface); }
.quick-answer p { font-size: var(--step-0); max-width: none; }
.quick-answer .qa-label { margin-bottom: .3rem; }
@media (max-width: 640px) { .quick-answer { padding: .85rem 1rem; margin-top: 1rem; } .quick-answer p { font-size: .95rem; } }
#which-tour { padding-top: 1.6rem; }
#which-tour h2.rule-h2 { margin-top: 0; }

/* homepage prose runs the full container width (Oleg 10-30 rule 2) */
@media (min-width: 900px) {
  main:has(#which-tour) section.wrap > p, main:has(#which-tour) section.wrap > ul, main:has(#which-tour) section.wrap > ol { max-width: none; }
}

/* ---- footer: walk-type strip, 3-column band, disclosure ---- */
.gvg-foot { background: var(--midnight); border-top: 3px solid var(--lantern); padding-block: 0 var(--s4); color: color-mix(in srgb, var(--bone) 84%, transparent); }
.gvg-foot a { color: var(--bone); }
.gvg-foot a:hover { color: var(--lantern); }
.gvg-walks { padding-block: 1.6rem 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); }
.gvg-walks-h { font-family: var(--ui); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lantern); margin: 0 0 .8rem; }
.gvg-walks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.gvg-walks a { display: block; text-decoration: none; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--lantern) 36%, transparent); border-radius: 12px; background: rgba(243,169,60,.05); min-height: 64px; transition: border-color .15s, background .15s; }
.gvg-walks a:hover { border-color: var(--lantern); background: rgba(243,169,60,.12); text-decoration: none; }
.gvg-walks-k { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--bone); line-height: 1.15; }
.gvg-walks-s { display: block; font-family: var(--ui); font-size: .82rem; color: #B8C7D6; margin-top: .2rem; }
.gvg-band { padding-block: 2rem 1rem; grid-template-columns: 1.7fr 1fr 1fr; }
.gvg-foot-brand { font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em; color: var(--bone) !important; }
.gvg-foot-blurb { color: color-mix(in srgb, var(--bone) 78%, transparent); margin-top: .8rem; max-width: 46ch; }
.gvg-foot .footer-h { font-family: var(--ui); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lantern); margin-bottom: .7rem; }
.gvg-foot .footer-nav li { margin-bottom: .1rem; }
.gvg-foot .footer-nav a { display: inline-block; padding: .3rem 0; }
.gvg-foot .socials a { border-color: color-mix(in srgb, var(--lantern) 40%, transparent); color: var(--bone); }
.gvg-foot .socials a:hover { border-color: var(--lantern); color: var(--lantern); }
.gvg-foot .disclosure { color: color-mix(in srgb, var(--bone) 70%, transparent); margin-top: 1rem; }
@media (max-width: 860px) { .gvg-walks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gvg-band { grid-template-columns: 1fr; } }

/* ---- homepage visuals (gvg-fig): charts are HTML/CSS so text keeps real pixel sizes at 390 and 1440 ---- */
.gvg-fig { margin: 1.2rem 0 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem 1rem; color: var(--ink); }
.gvg-fig figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: .8rem; max-width: none; line-height: 1.5; }
.gvg-fig-t { font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 .7rem; max-width: none; }
.gvg-fig a { color: var(--brand); }
/* rows: label | track | value */
.gvg-rows { display: grid; gap: .1rem; }
.gvg-r { display: grid; grid-template-columns: minmax(8.5rem, 15rem) minmax(0, 1fr) minmax(7rem, 13rem); align-items: center; gap: .9rem; min-height: 2.5rem; }
.gvg-rl { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.gvg-rl small { color: var(--ink-soft); font-weight: 500; margin-left: .25rem; }
.gvg-rv { font-size: .9rem; color: var(--ink-soft); }
.gvg-rv-t { line-height: 1.25; }
.gvg-trk { position: relative; height: 2.3rem; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.gvg-trk::before, .gvg-trk::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.gvg-trk::before { left: 0; } .gvg-trk::after { right: 0; }
.gvg-bar { position: absolute; top: 50%; height: 12px; transform: translateY(-50%); border-radius: 6px; background: color-mix(in srgb, var(--brand) 78%, var(--paper)); }
.gvg-bar.gvg-soft { background: color-mix(in srgb, var(--lantern) 45%, var(--paper)); height: 18px; border-radius: 9px; }
.gvg-bar.gvg-dash { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink-soft) 55%, transparent) 0 6px, transparent 6px 11px); }
.gvg-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lantern); border: 2px solid var(--midnight); }
.gvg-x { position: absolute; top: -.2rem; transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--ink); }
.gvg-tick { position: absolute; top: 20%; bottom: 20%; width: 3px; margin-left: -1px; background: var(--lantern); border-radius: 2px; }
.gvg-axisrow { min-height: 1.6rem; }
.gvg-axis { position: relative; height: 1.4rem; }
.gvg-axis span { position: absolute; transform: translateX(-50%); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.gvg-axis span:first-child { transform: none; } .gvg-axis span:last-child { transform: translateX(-100%); }
@media (max-width: 700px) {
  .gvg-fig { padding: .95rem .9rem .85rem; }
  .gvg-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: .1rem .6rem; padding: .35rem 0; }
  .gvg-r .gvg-rl { grid-area: l; } .gvg-r .gvg-rv { grid-area: v; text-align: right; } .gvg-r .gvg-trk { grid-area: t; }
  .gvg-axisrow { grid-template-columns: minmax(0, 1fr); } .gvg-axisrow .gvg-rl, .gvg-axisrow .gvg-rv { display: none; } .gvg-axisrow .gvg-axis { grid-area: auto; }
  .gvg-axis span { font-size: .75rem; }
}
/* dot rows */
.gvg-dots { display: flex; flex-wrap: nowrap; gap: .35rem; }
.gvg-dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--lantern); border: 2px solid var(--midnight); display: block; flex: 0 0 auto; }
.gvg-opsfig .gvg-r { grid-template-columns: minmax(9rem, 17rem) minmax(0, 1fr) 2rem; }
.gvg-opsfig .gvg-rv { font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 700px) { .gvg-opsfig .gvg-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; } .gvg-opsfig .gvg-dots { grid-area: t; } }
/* lantern strip */
.gvg-grps { display: grid; grid-template-columns: 7fr 3fr 2fr; gap: 1rem; }
.gvg-grp { border-top: 3px solid var(--lantern); padding-top: .6rem; min-width: 0; }
.gvg-lamps { display: flex; gap: .45rem; flex-wrap: nowrap; color: var(--brand); margin-bottom: .5rem; }
.gvg-lamps svg { flex: 0 1 auto; height: 28px; width: auto; }
.gvg-grp-n { margin: 0; font-weight: 700; max-width: none; } .gvg-grp-n b { font-family: var(--display); font-size: 1.7rem; color: var(--accent); margin-right: .2rem; }
.gvg-grp-d { margin: 0; font-size: .86rem; color: var(--ink-soft); max-width: none; }
@media (max-width: 700px) { .gvg-grps { grid-template-columns: minmax(0, 1fr); gap: .9rem; } }
/* photo + facts */
.gvg-duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.4rem; align-items: stretch; padding: 1rem; }
.gvg-duo-ph { border-radius: 10px; overflow: hidden; min-height: 100%; }
.gvg-duo-ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.gvg-duo-tx { display: flex; flex-direction: column; justify-content: center; }
.gvg-duo figcaption { grid-column: 1 / -1; margin-top: 0; }
.gvg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; margin: 0; }
.gvg-facts div { border-top: 2px solid var(--lantern); padding-top: .45rem; min-width: 0; }
.gvg-facts dt { font-family: var(--display); font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.1; color: var(--brand); overflow-wrap: anywhere; }
.gvg-facts dd { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 760px) { .gvg-duo { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: .8rem; } .gvg-duo-ph { min-height: 0; } .gvg-duo-ph img { height: auto; } .gvg-facts { gap: .7rem .9rem; } }
.gvg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
.gvg-pair img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.gvg-pair p { font-size: .86rem; color: var(--ink-soft); margin: .5rem 0 0; max-width: none; }
@media (max-width: 700px) { .gvg-pair { grid-template-columns: minmax(0, 1fr); padding: .8rem; } }
/* venn */
.gvg-venn-g { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.gvg-v { border: 2px solid var(--line); padding: 1rem 1.1rem; background: var(--surface); }
.gvg-v-a { border-radius: 60px 0 0 60px; padding-left: 1.6rem; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.gvg-v-b { border-radius: 0 60px 60px 0; padding-right: 1.6rem; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.gvg-v-x { background: color-mix(in srgb, var(--lantern) 20%, var(--surface)); border-color: var(--lantern); margin-inline: -1px; }
.gvg-v-h { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .4rem; max-width: none; }
.gvg-v ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; } .gvg-v li { margin-bottom: .25rem; }
@media (max-width: 760px) { .gvg-venn-g { grid-template-columns: minmax(0, 1fr); } .gvg-v-a, .gvg-v-b, .gvg-v-x { border-radius: 16px; padding: .9rem 1rem; margin: 0 0 -1px; } }
/* gates */
.gvg-road { position: relative; height: 4.6rem; margin: .4rem 0 1rem; border-radius: 8px; background: #2B3642; }
.gvg-road::after { content: ""; position: absolute; left: 1rem; right: 1rem; top: 38%; border-top: 3px dashed #E6DECC; opacity: .75; }
.gvg-road-l { position: absolute; left: .8rem; top: .25rem; font-size: .76rem; color: #E6DECC; letter-spacing: .08em; text-transform: uppercase; z-index: 1; }
.gvg-stop { position: absolute; top: 38%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lantern); border: 2px solid var(--midnight); z-index: 1; }
.gvg-stop i { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .8rem; font-weight: 700; color: #fff; white-space: nowrap; }
.gvg-stop-a { left: 32%; } .gvg-stop-b { left: 68%; }
.gvg-road { margin-bottom: 1.8rem; }
.gvg-gates-g { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gvg-gate { border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 10px; padding: .8rem 1rem; background: color-mix(in srgb, var(--paper) 55%, var(--surface)); }
.gvg-gate-h { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .4rem; max-width: none; }
.gvg-gate ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; } .gvg-gate li { margin-bottom: .2rem; }
@media (max-width: 700px) { .gvg-gates-g { grid-template-columns: minmax(0, 1fr); } }
/* this or that */
.gvg-this-g { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
.gvg-sc { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; color: var(--brand); background: color-mix(in srgb, var(--paper) 55%, var(--surface)); }
.gvg-sc-h { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: .3rem 0 .5rem; max-width: none; color: var(--ink); }
.gvg-sc ul { list-style: none; margin: 0; padding: 0; }
.gvg-sc li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.gvg-sc li span { color: var(--ink-soft); } .gvg-sc li b { color: var(--ink); text-align: right; }
.gvg-vs { align-self: center; font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--accent); }
@media (max-width: 700px) { .gvg-this-g { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .gvg-vs { justify-self: center; } }
/* stats */
.gvg-st4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.gvg-st4 div { border-top: 3px solid var(--lantern); padding-top: .5rem; }
.gvg-st4 b { display: block; font-family: var(--display); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); color: var(--brand); line-height: 1.05; }
.gvg-st4 span { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: .25rem; }
@media (max-width: 700px) { .gvg-st4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* hurricane months */
.gvg-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; }
.gvg-months span { height: 3.2rem; border-radius: 8px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink-soft); font-weight: 700; }
.gvg-months span.on { background: color-mix(in srgb, var(--brand) 82%, #000); color: #fff; }
.gvg-months span.pk { background: var(--lantern); color: #1A1205; }
.gvg-mlab { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-soft); margin-top: .4rem; }
.gvg-pk { font-weight: 700; color: var(--accent); }
/* accessibility squares */
.gvg-sqs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; max-width: 40rem; }
.gvg-sq { display: inline-grid; place-items: center; min-height: 2.6rem; border-radius: 8px; font-weight: 800; border: 2px solid transparent; }
.gvg-sq-yes { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); border-color: var(--brand); }
.gvg-sq-no { background: #F6DADA; color: #7A1F1F; border-color: #7A1F1F; }
.gvg-sq-na { background: repeating-linear-gradient(45deg, var(--paper-2) 0 5px, var(--surface) 5px 10px); color: var(--ink); border-color: var(--ink-soft); border-style: dashed; }
.gvg-key { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.gvg-key .gvg-sq { min-height: 1.6rem; width: 1.8rem; vertical-align: middle; margin-right: .4rem; font-size: .85rem; }
.gvg-key li { max-width: none; }
@media (max-width: 700px) { .gvg-sqs { gap: .25rem; } .gvg-sq { min-height: 2.2rem; font-size: .8rem; } }
.gvg-tk { position: absolute; top: 50%; width: 4px; height: 20px; margin: -10px 0 0 -2px; border-radius: 2px; background: var(--lantern); border: 1px solid var(--midnight); }

/* ---- review round 1 (2026-10-31) ---- */
.gvg-fig { padding: 1.7rem 1.9rem 1.5rem; margin: 1.6rem 0 2rem; }
.gvg-duo, .gvg-pair { padding: 1.5rem; }
.gvg-duo figcaption, .gvg-pair figcaption { padding-top: .2rem; }
.gvg-fig > :last-child { margin-bottom: 0; }
@media (max-width: 700px) { .gvg-fig { padding: 1.1rem 1.1rem 1rem; margin: 1.2rem 0 1.5rem; } .gvg-duo, .gvg-pair { padding: 1rem; } }
.gvg-rv, .gvg-rl, .gvg-axis span, .gvg-mlab, .gvg-facts dd { font-size: max(.8rem, 12px); }
h2.rule-h2, .section > h2:first-child { border-bottom: 2px solid var(--ink); border-image: none; padding-bottom: .5rem; margin-bottom: 1.2rem; }
h2.rule-h2::after, h2.rule-h2::before { content: none; display: none; }
.section { padding-block: 2.5rem; } .section + .section { padding-top: 0; }
@media (max-width: 640px) { .section { padding-block: 1.6rem; } }
/* gazebo/body facts: fill the photo height, bold body text for addresses */
.gvg-duo-b .gvg-facts { height: 100%; align-content: stretch; grid-auto-rows: 1fr; }
.gvg-duo-b .gvg-duo-tx { justify-content: stretch; }
.gvg-duo-b .gvg-facts dt { font-family: var(--body); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
/* time chart */
.gvg-times .gvg-axis span:first-child, .gvg-times .gvg-axis span:last-child, .gvg-times .gvg-axis span { transform: translateX(-50%); }
.gvg-lg { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0 0 .6rem; padding: 0; font-size: .86rem; color: var(--ink-soft); }
.gvg-lg li { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; max-width: none; }
.gvg-dot-s { position: static; display: inline-block; margin: 0; width: 14px; height: 14px; }
.gvg-sw { display: inline-block; width: 26px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--lantern) 45%, var(--paper)); }
.gvg-nolist { font-size: .9rem; margin: .8rem 0 0; max-width: none; color: var(--ink-soft); }
.gvg-nolist b { color: var(--ink); }
/* map + landmark cards */
.gvg-maph { margin: 1.6rem 0 .8rem; }
.stp-wrap, .ix-map { max-width: none; width: 100%; }
.ix-map svg { display: block; width: 100%; height: auto; }
.stp-cap { font-size: .86rem; color: var(--ink-soft); margin: .6rem 0 1rem; max-width: none; }
.stp-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 .8rem; }
.stp-controls .ex-chip { width: auto; flex: 0 0 auto; }
.stp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.stp-card { padding: .9rem 1.1rem; }
.stp-card h3 { font-size: 1.05rem; margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.stp-line { font-size: .9rem; margin: 0; max-width: none; line-height: 1.45; }
@media (max-width: 900px) { .stp-results { grid-template-columns: minmax(0, 1fr); } }
/* meeting picker */
.pier-picker { gap: 1rem; margin-top: 1.4rem; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pp-chips-title { flex: 0 0 100%; margin: 0 0 .2rem; }
.pp-chip { width: auto; flex: 0 0 auto; }
.pp-list { display: flex; flex-wrap: wrap; gap: .4rem .6rem; list-style: none; margin: 0; padding: 0; }
.pier-picker .pp-list li.pp-item { display: inline-flex; padding: 0; border: 0; background: none; }
.pier-picker .pp-item a { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; background: var(--surface); text-decoration: none; }
.pp-meta { display: none; }
/* price table: one zebra tone, no frame within the panel */
.price-ladder tbody tr:nth-child(even) td, .price-ladder tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--paper-2) 55%, var(--surface)); }
.price-ladder tbody tr:nth-child(odd) td, .price-ladder tbody tr:nth-child(odd) th { background: var(--surface); }
.hotel-card .hc-rating .gold { color: #7a5a12; font-weight: 700; }

.pier-picker .pp-chips { flex-direction: row; align-items: center; }
.pier-picker .pp-chips-title { flex: 0 0 100%; }
.gvg-duo-b .gvg-facts div { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 8px; padding: .8rem 1rem; background: color-mix(in srgb, var(--paper) 45%, var(--surface)); }
.stp-legend .stp-ring { display: flex; align-items: center; gap: .5rem; }
.stp-ring i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--brand); position: relative; flex: 0 0 auto; }
.stp-ring i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }

.pier-picker .pp-chips-title { display: block; width: 100%; flex: 0 0 100%; }
.pier-picker .pp-list { display: flex; flex-wrap: wrap; grid-template-columns: none; }

.price-ladder { table-layout: auto; }
.price-ladder tbody th[scope="row"] { width: 30%; min-width: 11rem; white-space: normal; overflow-wrap: break-word; max-width: none; }
.price-ladder td { white-space: normal; }
/* picker results: compact names-only rows linking to the tour pages (one card per tour on the page) */
.decision-picker .dp-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.decision-picker .dp-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .7rem 1rem; }
.decision-picker .dp-card .dp-name { margin: 0; font-size: 1rem; flex: 1 1 100%; }
.decision-picker .dp-card .dp-price { margin: 0; font-size: .9rem; max-width: none; }
.decision-picker .dp-card .dp-d { color: var(--ink-soft); }
@media (max-width: 700px) {
  .ix-map { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ix-map svg { width: 680px; max-width: none; min-width: 680px; }
}
@media (max-width: 640px) {
  .keyfacts.wide.price-ladder td::before { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--ink-soft); text-align: left; flex: 0 0 auto; }
  .keyfacts.wide.price-ladder td:nth-of-type(1)::before { content: "Kind"; }
  .keyfacts.wide.price-ladder td:nth-of-type(2)::before { content: "Length"; }
  .keyfacts.wide.price-ladder td:nth-of-type(3)::before { content: "From"; }
  .keyfacts.wide.price-ladder td:nth-of-type(4)::before { content: "Rating"; }
  .keyfacts.wide.price-ladder td:nth-of-type(5)::before { content: "Reviews"; }
  .keyfacts.wide.price-ladder td { padding-block: .35rem; }
}

/* ======== fix3 (2026-10-31): panels, tables, cards, hero legend, map, FAQ, small text ======== */
/* tinted panels: real inner padding, no dead band under the last child */
.section.band-wash, .section.band-paper-2 { padding: 2rem 1.75rem; }
.section.band-wash > :last-child, .section.band-paper-2 > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .section.band-wash, .section.band-paper-2 { padding: 1.4rem 1.1rem; } }

/* hero: show the whole lede; legend = number, name, right-hand count column */
.gvg-hero .lede { display: block; -webkit-line-clamp: unset; overflow: visible; }
.gvg-legend { grid-template-columns: minmax(0, 1fr); gap: .3rem 0; font-size: max(.8125rem, 13px); }
.gvg-legend li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 4.5rem; align-items: center; column-gap: .55rem; }
.gvg-legend li b { font-weight: 500; }
.gvg-legend em { grid-column: 3; text-align: right; white-space: nowrap; font-size: max(.75rem, 12px); }
.gvg-legend em::before { content: none; }
@media (max-width: 1000px) { .gvg-legend { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .gvg-legend { font-size: max(.8125rem, 13px); } }

/* header sub-label */
.gvg-mark-2 { font-size: .75rem; letter-spacing: .3em; }

/* tables: whole-row zebra, sans label column, no panel-in-panel */
.keyfacts tbody tr:nth-child(odd) > th, .keyfacts tbody tr:nth-child(odd) > td { background: var(--surface); }
.keyfacts tbody tr:nth-child(even) > th, .keyfacts tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--paper-2) 55%, var(--surface)); }
.band-paper-2 .keyfacts.latest-data, .band-paper-2 .keyfacts.price-ladder { border: 0; border-radius: 0; background: transparent; }
.band-paper-2 .keyfacts tbody tr:nth-child(odd) > th, .band-paper-2 .keyfacts tbody tr:nth-child(odd) > td { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.band-paper-2 .keyfacts tbody tr:nth-child(even) > th, .band-paper-2 .keyfacts tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.band-paper-2 .keyfacts thead th { background: transparent; border-bottom: 2px solid var(--ink); }
.keyfacts.latest-data th[scope="row"] { font-family: var(--ui); font-size: max(.875rem, 13px); font-weight: 600; width: 42%; }
.keyfacts.latest-data td { font-size: max(.9375rem, 13px); }
.keyfacts.latest-data { margin-bottom: 0; }
.keyfacts.wide.price-ladder { table-layout: fixed; }
.keyfacts.wide.price-ladder thead th { white-space: normal; }
.keyfacts.wide.price-ladder thead th:nth-child(1) { width: 34%; }
.keyfacts.wide.price-ladder thead th:nth-child(2) { width: 15%; }
.keyfacts.wide.price-ladder thead th:nth-child(3) { width: 13%; }
.keyfacts.wide.price-ladder thead th:nth-child(4) { width: 10%; }
.keyfacts.wide.price-ladder thead th:nth-child(5) { width: 11%; }
.keyfacts.wide.price-ladder thead th:nth-child(6) { width: 17%; }
.keyfacts.wide.price-ladder tbody th[scope="row"] { width: auto; min-width: 0; white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.keyfacts.wide.price-ladder td:nth-child(2), .keyfacts.wide.price-ladder td:last-child { width: auto; }

/* phone: each price row is a two-line card, name then "from $24 · 4.7 (75 reviews) · 1.5 hours · Walking tour" */
@media (max-width: 640px) {
  .keyfacts.wide.price-ladder tr { display: flex; flex-wrap: wrap; align-items: baseline; padding: .75rem .95rem; margin-bottom: .6rem; background: var(--surface); }
  .keyfacts.wide.price-ladder tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--surface)); }
  .keyfacts.wide.price-ladder tbody th[scope="row"] { flex: 0 0 100%; width: 100% !important; padding: 0 0 .3rem; border: 0; background: transparent !important; font-size: 1rem; }
  .keyfacts.wide.price-ladder td { display: inline !important; flex: 0 0 auto; width: auto !important; padding: 0 !important; border: 0; background: transparent !important; text-align: left !important; font: 400 max(.8125rem, 13px)/1.55 var(--ui); color: var(--ink); white-space: pre; justify-content: flex-start; gap: 0; }
  .keyfacts.wide.price-ladder td::before, .keyfacts.wide.price-ladder td::after { font: 400 max(.8125rem, 13px)/1.55 var(--ui); color: var(--ink-soft); white-space: pre; text-align: left; }
  .keyfacts.wide.price-ladder tr::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  .keyfacts.wide.price-ladder td:nth-of-type(3) { order: 1; font-weight: 700; }
  .keyfacts.wide.price-ladder td:nth-of-type(4) { order: 2; }
  .keyfacts.wide.price-ladder td:nth-of-type(5) { order: 3; }
  .keyfacts.wide.price-ladder td:nth-of-type(2) { order: 5; }
  .keyfacts.wide.price-ladder td:nth-of-type(1) { order: 6; }
  .keyfacts.wide.price-ladder td:nth-of-type(3)::before { content: "from"; font-weight: 400; margin-right: .3em; }
  .keyfacts.wide.price-ladder td:nth-of-type(4)::before { content: "\00b7"; margin: 0 .45em; }
  .keyfacts.wide.price-ladder td:nth-of-type(4)::after { content: "\2605"; margin-left: .2em; color: #7a5a12; }
  .keyfacts.wide.price-ladder td:nth-of-type(5)::before { content: "("; margin-left: .35em; }
  .keyfacts.wide.price-ladder td:nth-of-type(5)::after { content: "reviews)"; margin-left: .25em; }
  .keyfacts.wide.price-ladder td:nth-of-type(1)::before { content: "\00b7"; margin: 0 .45em; }
}

/* at-a-glance stat grids: top aligned with the photo and stretched to its height */
.gvg-duo { align-items: stretch; }
.gvg-duo-tx { justify-content: flex-start; }
.gvg-duo .gvg-fig-t { margin-top: 0; }
.gvg-duo:not(.gvg-duo-b) .gvg-facts { flex: 1 1 auto; align-content: stretch; grid-auto-rows: 1fr; }
.gvg-duo:not(.gvg-duo-b) .gvg-facts div { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 8px; padding: .7rem .9rem; background: color-mix(in srgb, var(--paper) 45%, var(--surface)); }
@media (max-width: 760px) { .gvg-duo:not(.gvg-duo-b) .gvg-facts { grid-auto-rows: auto; } }

/* tour-card rows: one card runs full width and horizontal, two cards share two equal columns */
.cards-3:has(> .rcard:only-child) { grid-template-columns: minmax(0, 1fr); }
.cards-3:has(> .rcard:only-child) .rcard { flex-direction: row; }
.cards-3:has(> .rcard:only-child) .rc-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
.cards-3:has(> .rcard:only-child) .rc-body { justify-content: center; max-width: 46rem; }
.cards-3:has(> .rcard:only-child) .rc-body .btn { margin-top: .6rem; align-self: flex-start; }
.cards-3:has(> .rcard:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .cards-3, .cards-3:has(> .rcard:nth-child(2):last-child), .cards-3:has(> .rcard:only-child) { grid-template-columns: minmax(0, 1fr); }
  .cards-3:has(> .rcard:only-child) .rcard { flex-direction: column; }
  .cards-3:has(> .rcard:only-child) .rc-media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}

/* FAQ: full width, photo above as a banner */
.hv-faq { grid-template-columns: minmax(0, 1fr); }
.hv-faq-list { grid-column: 1; grid-row: 2; }
.hv-faq-img { grid-column: 1; grid-row: 1; aspect-ratio: 21 / 7; }
@media (max-width: 640px) { .hv-faq-img { aspect-ratio: 16 / 9; } }

/* map */
.stp-lab-lead line { stroke-dasharray: none; opacity: .8; }
@media (max-width: 620px) {
  .ix-map { overflow: hidden; }
  .ix-map svg { width: 111.76%; min-width: 0; max-width: none; margin-left: -5.88%; }
  .stp-pin .stp-dot { r: 15px; }
  .stp-pin .stp-num { font-size: 17px; }
  .stp-map text.stp-furn-lbl { font-size: 19px; }
}

/* ---- fix3 text-run visuals ---- */
.gvg-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gvg-sp { border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 8px; padding: .9rem 1.1rem; background: color-mix(in srgb, var(--paper) 45%, var(--surface)); }
.gvg-sp:last-child { border-top-color: var(--brand); }
.gvg-sp-h { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem; color: var(--ink); }
.gvg-sp ul { margin: 0; padding-left: 1.1rem; }
.gvg-sp li { font-size: max(.9rem, 13px); line-height: 1.45; margin: .25rem 0; max-width: none; }
.gvg-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; }
.gvg-cell { border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 8px; padding: .8rem 1rem; background: color-mix(in srgb, var(--paper) 45%, var(--surface)); }
.gvg-cell-h { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .3rem; color: var(--ink); }
.gvg-cell p:last-child { margin: 0; font-size: max(.9rem, 13px); line-height: 1.45; max-width: none; }
.gvg-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.gvg-big { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); line-height: 1; color: var(--brand); margin: 0; white-space: nowrap; }
.gvg-callout-t { margin: 0; font-size: max(.95rem, 13px); line-height: 1.5; max-width: none; }
@media (max-width: 560px) { .gvg-callout { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }
.gvg-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: rt; }
.gvg-route li { position: relative; padding: 2.4rem .8rem 0 0; counter-increment: rt; max-width: none; }
.gvg-route li::before { content: counter(rt); position: absolute; top: 0; left: 0; z-index: 1; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--lantern); color: #1A1205; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.gvg-route li::after { content: ""; position: absolute; top: .82rem; left: 1.7rem; right: 0; height: 2px; background: var(--lantern); }
.gvg-route li:last-child::after { content: none; }
.gvg-route b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.gvg-route span { display: block; font-size: max(.875rem, 13px); color: var(--ink-soft); line-height: 1.4; margin-top: .15rem; }
.gvg-pill { display: inline-block; margin: 1rem 0 0; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: max(.85rem, 13px); background: var(--surface); max-width: none; }
@media (max-width: 560px) {
  .gvg-route { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .gvg-route li { padding: 0 0 0 2.4rem; }
  .gvg-route li::after { top: 1.7rem; bottom: -.9rem; left: .82rem; right: auto; width: 2px; height: auto; }
}
.gvg-chips-n { margin: 0 0 .7rem; font-size: max(.95rem, 13px); max-width: none; }
.gvg-chips-n b { font-family: var(--display); font-size: 1.3rem; color: var(--brand); }
.gvg-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gvg-chiplist li { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: max(.9rem, 13px); max-width: none; }
.gvg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.gvg-checks li { display: flex; align-items: center; gap: .7rem; font-size: max(.95rem, 13px); max-width: none; }
.gvg-checks i { flex: 0 0 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--brand); position: relative; }
.gvg-checks .y i::after { content: ""; position: absolute; left: .38rem; top: .12rem; width: .32rem; height: .6rem; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gvg-checks .n i { border-color: #9B2C2C; }
.gvg-checks .n i::before, .gvg-checks .n i::after { content: ""; position: absolute; left: .27rem; top: .55rem; width: .62rem; height: 2px; background: #9B2C2C; transform: rotate(45deg); }
.gvg-checks .n i::after { transform: rotate(-45deg); }
.gvg-dw { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .8rem; align-items: center; margin: .5rem 0; }
.gvg-dw-l { margin: 0; font-size: max(.9rem, 13px); font-weight: 600; max-width: none; }
.gvg-dw-b { display: flex; gap: 3px; }
.gvg-dw-b i { display: block; min-width: 0; padding: .45rem 0; text-align: center; font-style: normal; font-size: max(.8rem, 12px); font-weight: 700; background: color-mix(in srgb, var(--lantern) 55%, var(--paper)); color: #1A1205; border-radius: 4px; }
@media (max-width: 560px) { .gvg-dw { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }
.gvg-cx { display: grid; grid-template-columns: 7fr 3fr auto; gap: 3px; margin-bottom: .9rem; align-items: stretch; }
.gvg-cx > div { padding: .7rem .9rem; border-radius: 6px; display: flex; flex-direction: column; font-size: max(.9rem, 13px); }
.gvg-cx-a { background: color-mix(in srgb, var(--brand) 18%, var(--paper)); }
.gvg-cx-b { background: color-mix(in srgb, #9B2C2C 18%, var(--paper)); }
.gvg-cx-s { background: var(--ink); color: var(--paper); justify-content: center; }
@media (max-width: 560px) { .gvg-cx { grid-template-columns: minmax(0, 1fr); } }
.gvg-moneyfig .gvg-rl small, .gvg-capsfig .gvg-rl small { font-size: inherit; color: var(--ink-soft); }
.gvg-moneyfig .gvg-r, .gvg-capsfig .gvg-r { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 4.2rem; }

@media (max-width: 560px) { .gvg-split { grid-template-columns: minmax(0, 1fr); } }
.gvg-moneyfig .gvg-r, .gvg-capsfig .gvg-r { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 5.4rem; }
.gvg-capsfig .gvg-rv, .gvg-moneyfig .gvg-rv { white-space: nowrap; }
@media (max-width: 640px) { .keyfacts.wide.price-ladder td:nth-of-type(2)::before { content: none; } }

/* ======== fix4 ======== */
/* panel top padding, no void above the panel H2 */
.section.band-wash, .section.band-paper-2 { padding-top: 1.5rem; }
.section.band-wash > :first-child, .section.band-paper-2 > :first-child { margin-top: 0; }
/* FAQ summary: room for the plus, vertically centred */
.faq summary { position: relative; padding-right: 44px; }
.faq summary::after { float: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); line-height: 1; }
/* small text */
.gvg-mark-2 { font-size: max(.75rem, 12px); }
.answered-group .ag-kind { font-size: max(.75rem, 12px); }
.hotel-card .hc-tier { white-space: nowrap; font-size: max(.75rem, 12px); letter-spacing: .06em; }
.decision-picker .dp-card .dp-d { white-space: nowrap; }
/* grids */
.gvg-cellsfig .gvg-cells { align-items: stretch; }
@media (min-width: 761px) { .gvg-cellsfig:has(.gvg-cell:nth-child(6)) .gvg-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gvg-venn-g { gap: .9rem; }
.gvg-v, .gvg-v-a, .gvg-v-b, .gvg-v-x { border-radius: 12px; margin: 0; padding: 1rem 1.1rem; }
.gvg-v-x { background: color-mix(in srgb, var(--lantern) 20%, var(--surface)); }
/* hurricane strip labels under first and last in-season month */
.gvg-mlab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: .15rem; }
.gvg-mlab .m-a { grid-column: 6 / span 3; grid-row: 1; justify-self: start; }
.gvg-mlab .m-b { grid-column: 9 / span 3; grid-row: 1; justify-self: end; text-align: right; }
.gvg-mlab .m-pk { grid-column: 1 / -1; grid-row: 2; text-align: center; }
.gvg-months { position: relative; }
/* refund line: clearer tints, text contrast above 4.5:1 */
.gvg-cx-a { background: #CDEBD3; color: #10331A; }
.gvg-cx-b { background: #F6D2CE; color: #571212; }
.gvg-cx-a b, .gvg-cx-b b, .gvg-cx-a span, .gvg-cx-b span { color: inherit; }
/* storm stats */
.gvg-stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.gvg-stat3 > div { border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: 8px; padding: .8rem 1rem; background: color-mix(in srgb, var(--paper) 45%, var(--surface)); }
.gvg-stat3 b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.1; color: var(--brand); }
.gvg-stat3 span { display: block; margin-top: .3rem; font-size: max(.875rem, 13px); color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 560px) { .gvg-stat3 { grid-template-columns: minmax(0, 1fr); } }
/* map, phone: pins 22px, digits 12px (map renders at about .53 scale) */
@media (max-width: 620px) {
  .stp-pin .stp-dot { r: 21px; }
  .stp-pin .stp-num { font-size: 23px; }
}
.gvg-mlab .m-pk { grid-column: 7 / span 5; text-align: center; white-space: nowrap; }
@media (max-width: 560px) { .gvg-mlab .m-pk { grid-column: 6 / span 7; } }
@media (max-width: 560px) { .gvg-mlab .m-pk { grid-column: 7 / span 5; } }