/* ============================================================
   Osaka Castle Tickets - Phase D1 Design System
   IDENTITY: "Ishigaki Stone & Gold" (research/layout-approval.md section 2, approved by Oleg at
   the Phase C gate 2026-09-07). A LIGHT-GROUND site, and a full inversion of the donor theme:
   the page ground is the granite grey-green of the Toyotomi ishigaki, the great stone wall the
   ticket includes (#D5D8D2). Cards are white, headings and links are dark pine, and the single
   booking colour is a vermilion lacquer red. Gold is reserved for stars, big numerals and the
   closing gold-leaf plate: it is never body text on the ground. One DARK pine band inverts the
   page every few sections so the rhythm never flattens, and the footer runs in that same pine.
   Checked against every sibling ground in the portfolio, which had collapsed into warm creams
   (#F3-#FB) and cool near-whites: #D5D8D2 is the deepest neutral stone ground in the set and
   collides with none of them.
   Every foreground/background pair below was computed at AA or better; ratios are recorded in
   the CONTRAST LEDGER comment at the foot of this file.
   Soft 12px radii, gold hairlines under headings. Mobile-first, zero heavy deps, system fonts.
   ============================================================ */
:root {
  /* ---- Palette "Ishigaki Stone & Gold" ---- */
  /* text */
  --ink:        #1E2622;   /* primary text        (10.76:1 on --paper, 15.49:1 on a white card) */
  --ink-soft:   #4A554E;   /* secondary text      (5.40:1 on --paper, 7.78:1 on card, 4.82 on --paper-2) */

  /* grounds and surfaces (light stone) */
  --paper:      #D5D8D2;   /* page ground: granite grey-green, the ishigaki wall */
  --paper-2:    #C9CDC5;   /* lifted band + table header tint */
  --surface:    #FFFFFF;   /* cards, panels */
  --surface-2:  #EDEFEA;   /* inputs, zebra rows, chips at rest */
  --deep:       #E3E6DF;   /* the wash / edged band: lighter than the ground (ink 12.28:1) */
  --line:       #B7BDB4;   /* hairline borders (decorative) */
  --line-soft:  #C9CDC5;   /* quieter divider inside a card (decorative) */
  --ctl-line:   #9AA396;   /* quiet control hairline: scrollbar thumb, empty states */
  --ctl-strong: #6F7A6C;   /* the border that ALONE identifies a control (4.49:1 on card) */
  --star-track: #B7BDB4;   /* unfilled star track (decorative; the number carries the value) */

  /* dark-pine INVERSE band tokens (consumed by .band-inverse / .band-c and the footer) */
  --inv:        #22302A;   /* inverse band ground: dark pine */
  --inv-2:      #2C3A33;   /* inverse table header tint */
  --inv-zebra:  #364439;   /* inverse zebra row */
  --inv-card:   #2C3A33;   /* card on the inverse band */
  --inv-line:   #3E4C43;
  --inv-ink:    #F0F3EE;   /* text on the inverse band          (12.31:1) */
  --inv-soft:   #B9C4BB;   /* secondary text on inverse          (7.66:1) */
  --inv-link:   #A8C3A6;   /* INVERSE-BAND LINK                  (7.23:1) */
  --inv-cta:    #C2492E;   /* INVERSE-BAND CTA fill, white text  (4.90:1) */
  --inv-cta-deep:#A63A22;  /* its hover */
  --inv-eyebrow:#D9BC6A;   /* eyebrow / small caps on inverse    (7.45:1) */

  /* brand + accents */
  --brand:      #2C3A33;   /* dark pine: links, headings, rules (8.28:1 on paper, 11.93 on card) */
  --brand-fill: #2C3A33;   /* the same pine as a FILL (btn-brand, skip link), white text 11.93:1 */
  --brand-deep: #1E2A24;   /* its hover */
  --accent:     #A63A22;   /* THE CTA vermilion. White text on it 6.46:1. NEVER text on paper. */
  --accent-deep:#8C3019;   /* CTA hover (white 8.23:1) */
  --accent-ink: #FFFFFF;   /* text colour that sits on --accent */
  --sea:        #2C3A33;   /* structural accent: section rules, list ticks, icon strokes */
  --sea-deep:   #1E2A24;
  --gold:       #8A6A17;   /* stars, stat numbers, proof figures (5.05:1 on card). NEVER on paper. */
  --gold-soft:  #EDE3C9;   /* badge ground on light (dark gold ink on top) */
  --gold-ink:   #5A4610;   /* text colour that sits on --gold-soft (7.09:1) */
  --gold-hi:    #D9BC6A;   /* light gold: ONLY over photography and on dark plates */
  --link:       #2C3A33;   /* body link on every light band (8.28:1 on --paper) */
  --slate:      #5F7060;   /* muted structure: disabled pins, closed-stop marks (non-text) */
  --footer:     #22302A;   /* footer band: dark pine, the page's one deep anchor */
  --ok:         #1B6B4A;   /* included / yes glyph (6.46:1 on --surface) */
  --warn:       #8A5405;
  --alert:      #A33418;   /* not-included / no glyph (6.86:1 on --surface) */
  --vine:       #2C3A33;   /* second accent kept as an alias so donor rules stay in-palette */
  --vine-soft:  #EDEFEA;
  --vine-deep:  #1E2A24;
  --band-vine:  #E3E6DF;   /* cool wash stop */
  --band-gold:  #EDE3C9;   /* warm wash stop */
  --focus:      #A63A22;   /* focus ring on light (4.49:1 on --paper, non-text) */
  --focus-inv:  #D9BC6A;   /* focus ring on the inverse band (7.45:1) */

  /* ---- TYPE - assertive sans display + neutral sans body. System stacks, no webfont
     (protects LCP); contrast comes from weight and scale, an editorial feel. ---- */
  --display: "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale. RULE 31: --step-0 is body AND lead copy; --step-1 (h3) starts at 1.3rem and
     --step-3 (h2) at 1.85rem, so an H2 is never less than 1.7x a paragraph at any viewport
     (worst case 320px: h2 1.86rem vs p 1.00rem = 1.86x). A bolded lead paragraph is body copy:
     it is never allowed to climb into the heading range. */
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.16rem + .55vw, 1.6rem);
  --step-2:  clamp(1.5rem, 1.28rem + 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;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(30,38,34,.08), 0 12px 28px rgba(30,38,34,.10);
  color-scheme: light;
}

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

/* ---- LAYOUT ---- */
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.section { padding-block: var(--s6); }
.section + .section { padding-top: 0; }

/* ---- SECTION BANDS (2026-09-06, Oleg: sections were all one flat tone; give the page real
   rhythm). A banded section is an OUTER full-width <section class="section band-X"> with a
   real `background`, wrapping an INNER <div class="wrap"> that holds the constrained-width
   content -- NOT the box-shadow-on-.wrap trick tried first, which by spec only paints outside
   an element's own border-box and therefore never colors the area directly behind that same
   element's own content (confirmed by pixel-sampling the rendered page: the color showed only
   in the page's side gutters, never behind the actual text/cards). A plain `background`
   property has no such exclusion. ---- */
.section[class*="band-"] { background: var(--band-bg, var(--paper)); }
.band-surface-2 { --band-bg: var(--surface-2); }
.band-tint-gold { --band-bg: var(--band-gold); }
.band-tint-vine { --band-bg: var(--band-vine); }
.band-dark {
  --band-bg: var(--deep);
  color: var(--ink);
}
.band-dark .rule-h2, .band-dark h2 { color: var(--ink); border-bottom-color: var(--accent); }
.band-dark p { color: var(--ink-soft); }
.band-dark a:not(.btn) { color: var(--link); }
.band-accent {
  --band-bg: linear-gradient(135deg, #D0A544 0%, #B0862A 100%); /* re-stated on the plate below */
  color: var(--ink);
}
.band-accent .rule-h2, .band-accent h2 { color: var(--ink); border-bottom-color: var(--ink); }
.band-accent p { color: var(--ink-soft); }

/* ---- SECTION FIGURE (2026-09-06, Oleg: every non-interactive homepage section gets an image).
   A wide, shallow band under the section heading: enough to break up the text without pushing
   the section's real content (cards, tables, stat tiles) below the fold. Interactive and
   embedded blocks deliberately have none. ---- */
.section-figure {
  margin: 0 0 var(--s4);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-2);
}
.section-figure img {
  width: 100%;
  height: clamp(160px, 22vw, 300px);
  object-fit: cover;
  display: block;
}

/* ---- MOTION (sparing, both purely decorative -- neither ever hides real content, so neither
   carries any risk to a non-scrolling renderer or crawler: a count-up on clean stat numbers
   that already show their real final value as static text, and a "you are here" pulse ring on
   the route-map station pins. Both respect reduced-motion.) ---- */
@media (prefers-reduced-motion: no-preference) {
  .map-pin.is-city circle.pulse-ring {
    fill: none; stroke: var(--accent); stroke-width: 2;
    transform-origin: center; transform-box: fill-box;
    animation: pin-pulse 2.4s ease-out infinite;
  }
  @keyframes pin-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(2.6); opacity: 0; }
  }
}
.skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:50; font-weight:700; }
.skip-link:focus { left:8px; top:8px; }

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

/* ---- HEADER / NAV ---- */
.site-header { position: sticky; top:0; z-index:40; background: rgba(213,216,210,.93); /* --paper at 93% */ 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; }
.site-header .brand { gap:0; }
.site-footer .brand { color:var(--ink); font-size:var(--step-1); line-height:1.15; }
.site-footer .brand:hover { text-decoration:underline; }
.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(--sea); }
.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:var(--gold-hi); }
@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; }
@media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } }

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

/* ---- CTA BANNER ---- */
.cta-banner { background:linear-gradient(135deg,var(--brand-deep),var(--brand)); border:1px solid var(--brand-deep); color:var(--ink); border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:var(--ink); 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 on the page, below the flooded-stage ground) ---- */
.site-footer { background:var(--footer); color:var(--ink-soft); 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(--ink); 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:var(--ink); 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 var(--ctl-strong); border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:var(--ink-soft); border-top:1px solid var(--line); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

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

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

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

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

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

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

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

/* ============================================================
   SITE-SPECIFIC LAYER , components carried in from the scaffold, re-tokened for "Flooded Stage"
   ============================================================ */

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

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

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

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

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

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

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org
   2026-08-15 and re-tokened for "Flooded Stage"). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--accent); padding-left:.7rem;
}
.tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } }
.tour-picks .tp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; }
.tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--sea); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#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; }

/* ---- GuruWalk free-tour cards (the gw_all / gw_picks / gw_pick tokens). Deliberately a
   different colour from the honey-gold paid CTA so a free third-party walk never reads as one of
   our own booked tours. ---- */
.gw-picks .tp-card.gw { border-top:4px solid var(--ok); }
.gw-picks .tp-card.gw a.btn-primary { background:var(--ok); border-color:var(--ok); }
.gw-picks .tp-card.gw a.btn-primary:hover { background:#14523A; border-color:#14523A; }
.gw-picks .tp-season { border-left:4px solid var(--ok); padding-left:.8rem; }
/* The featured GuruWalk card inherits the shared .tp-solo 34rem cap, which left a wide empty
   margin either side of it inside the full-width panel. Widen this one case only. */
.gw-picks.tp-solo .tp-grid { max-width: 46rem; }


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

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

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

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

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

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

/* Quick answer + key takeaways */
.quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s4) var(--s5); display:grid; gap:.7rem; }
.quick-answer-box p { margin:0; max-width:72ch; font-size:var(--step-0); }
.quick-answer-box p:first-child { font-size:var(--step-0); line-height:1.55; }
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.takeaways-list li { position:relative; padding-left:1.8rem; line-height:1.5; max-width:78ch; }
.takeaways-list li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--sea); font-weight:800; font-family:var(--display); }

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

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

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

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

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

/* Spot map: live embed + hand-drawn pin schematic */
/* One child (the live embed) used to occupy the left half of a two-column grid and leave the
   right half empty at desktop. auto-fit gives the row as many columns as it has children. */
.spot-map-wrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; max-width:100%; background:var(--paper-2); }
/* A 600x360 box stretched to a full 1152px column would be 691px tall, so the embed takes a
   wider ratio once it has the whole column to itself. */
@media (min-width:769px){ .spot-map-wrap .map-embed { aspect-ratio:5/2; } }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap > * { min-width:0; max-width:100%; }
@media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } .spot-map-wrap .map-embed { aspect-ratio:4/3; min-height:0; } }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s2); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-pin { cursor:pointer; }
.map-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease; }
.map-pin.is-city circle { fill:var(--ink); }
.map-pin text { fill:var(--ink); font-family:var(--display); font-size:11px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.map-pin:hover circle, .map-pin:focus circle { fill:var(--sea); r:9; }
.map-pin.is-city:hover circle, .map-pin.is-city:focus circle { r:12; }
/* Transparent hit area so a pin is a >=40px tap target; it must never paint or steal focus. */
.map-pin .pin-hit { fill:transparent; stroke:none; }
.map-pin:hover text, .map-pin:focus text { fill:var(--sea); text-decoration:underline; }
.map-pin:focus { outline:none; }
.map-pin:focus-visible circle { stroke:var(--gold); stroke-width:3; }
.map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.6rem; }
@media (max-width:860px){ .spot-map-wrap { grid-template-columns:1fr; } }

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

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

/* Answered grid */
.answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group { border-top:3px solid var(--sea); padding-top:var(--s3); }
.answered-group h3 { font-size:var(--step-0); margin:0 0 .6rem; }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; }
.answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; }
.answered-group li a:hover { text-decoration-color:currentColor; color:var(--sea); }
.answered-group .ag-kind { font-family:var(--display); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; }
@media (max-width:900px){ .answered-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid { grid-template-columns:1fr; } }

/* Photo collage (rule 32): 4-col mosaic with a 2x2 hero tile on desktop */
.photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:.6rem; margin-top:var(--s3); }
.pcol-tile { position:relative; display:block; border-radius:var(--radius-sm); overflow:hidden; }
.pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; }
.pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.pcol-tile:hover img { transform:scale(1.05); }
.pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem .4rem; font-family:var(--display); font-weight:700; font-size:.82rem; color:#fff; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%); }
.pcol-hero .pcol-cap { font-size:1rem; padding:.8rem .9rem .6rem; }
@media (max-width:900px){
  .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:120px; }
}
@media (max-width:600px){
  .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 1; }
  .pcol-tile:nth-child(n+7) { display:none; }
}

/* ============================================================
   INTERACTIVE BLOCKS (rule 33): tour explorer + departure-point picker.
   Shared chip control, reused by both blocks and by the decision-picker generator.
   ============================================================ */
.chip { font-family:var(--display); font-weight:700; font-size:var(--step--1); min-height:44px; padding:.4rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover { border-color:var(--sea); }
.chip.is-active { background:var(--brand-fill); border-color:var(--brand-fill); color:var(--accent-ink); }
.chip:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* Tour explorer */
.tour-explorer { margin-top:var(--s3); }
.explorer-controls { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.explorer-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.explorer-toggles { display:flex; flex-wrap:wrap; gap:.9rem; }
.explorer-check { display:flex; align-items:center; gap:.4rem; font-size:var(--step--1); min-height:40px; cursor:pointer; }
.explorer-check input { width:18px; height:18px; accent-color:var(--sea); }
.explorer-sort { display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); }
.explorer-sort select { min-height:40px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); padding:.3rem .6rem; font:inherit; }
.explorer-status { font-size:var(--step--1); color:var(--ink-soft); margin:.7rem 0; }
.explorer-table td:first-child a { font-weight:700; }
.explorer-table td.num, .explorer-table th.num { text-align:right; }
.explorer-empty { background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:var(--s4); text-align:center; display:grid; gap:.6rem; justify-items:center; }
@media (max-width:640px){
  .explorer-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .explorer-table, .explorer-table tbody, .explorer-table tr, .explorer-table td { display:block; width:100%; }
  .explorer-table tr { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.6rem; background:var(--surface); }
  .explorer-table td { display:grid; grid-template-columns:6.5rem 1fr; gap:.6rem; padding:.4rem .8rem; border:0; }
  .explorer-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.76rem; }
  .explorer-table td:first-child { grid-template-columns:1fr; padding-top:.7rem; }
  .explorer-table td:first-child::before { display:none; }
}

/* Departure-point picker */
.departure-picker { margin-top:var(--s3); }
.dep-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s4); align-items:start; }
.dep-map svg { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.dep-pin { cursor:pointer; }
.dep-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease, fill .15s ease; }
.dep-pin.is-emilion circle { fill:var(--accent-deep); }
.dep-pin text { fill:var(--ink); font-family:var(--display); font-size:12px; font-weight:800; paint-order:stroke; stroke:#fff; stroke-width:3px; text-anchor:middle; }
.dep-pin:hover circle, .dep-pin.is-active circle { fill:var(--sea); r:11; }
.dep-pin:focus-visible circle { outline:none; stroke:var(--gold); stroke-width:3; }
.dep-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--s3); }
.dep-status { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); }
.dep-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.dep-panel[hidden] { display:none; }
.dep-panel h3 { margin:0 0 .4rem; font-size:var(--step-0); }
.dep-address { display:flex; align-items:center; gap:.4rem; color:var(--ink-soft); font-size:.86rem; margin:0 0 .4rem; }
.dep-note { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .6rem; }
.dep-tour-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; border-top:1px solid var(--line); padding-top:.6rem; }
.dep-tour-list li { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:var(--step--1); }
.dep-tour-list .num { font-family:var(--display); font-weight:700; color:var(--brand); white-space:nowrap; }
@media (max-width:860px){ .dep-grid { grid-template-columns:1fr; } }

/* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */
.decision-picker { --dp-key: var(--brand, var(--sea, #2C3A33)); --dp-line: var(--line, #B7BDB4);
  --dp-surface: var(--surface, #FFFFFF); --dp-surface-2: var(--surface-2, var(--paper-2, #EDEFEA));
  --dp-ink: var(--ink, #1E2622); --dp-soft: var(--ink-soft, #4A554E);
  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:44px;
  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(--brand-fill); border-color:var(--brand-fill); color:var(--accent-ink); }
.decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; }
.decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); }
.decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px);
  background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); }
.decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line);
  border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); }
.decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.decision-picker .dp-card.dp-fold { display:none; }
/* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a
   card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */
.decision-picker .dp-card[hidden] { display:none !important; }

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

/* ============================================================
   SINGLE-PRODUCT BLOCKS (osakacastletickets.org)
   The five ticket options, the station cards, the official fare table, the fare snapshot and
   the true-scale route schematic. Same tokens as the rest of the sheet: paper / ink / stage teal
   / CTA gold / warm gold. Nothing here is a new colour, only new layout.
   ============================================================ */

/* Rule 30: the option band is deliberately NOT a uniform stack. The base ticket is one
   full-width lead row (.tour-row.is-lead.has-media, already styled above) and the rest are
   vertical cards. Two or one card must not stretch across three columns, so the grid is
   count-aware. */
.cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); }
.cards-3.cards-n1 { grid-template-columns:minmax(0,26rem); justify-content:start; }
@media (max-width:820px){ .cards-3.cards-n2, .cards-3.cards-n1 { grid-template-columns:1fr; } }

/* The verified full price range, stated once above the options (rules 13 and 35). */
.opt-range { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 var(--s4);
  font-family:var(--display); max-width:none; }
.opt-range b { font-size:var(--step-2); font-weight:800; color:var(--brand); letter-spacing:-.02em; }
.opt-range span { font-family:var(--body); font-size:var(--step--1); color:var(--ink-soft); }

/* What the base ticket includes, inside the lead row. */
.opt-includes { list-style:none; margin:0 0 var(--s2); padding:0; display:grid; gap:.35rem; }
.opt-includes li { position:relative; padding-left:1.5rem; font-size:var(--step--1); line-height:1.45; }
.opt-includes li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--sea);
  font-weight:800; font-family:var(--display); }
.tour-row .tr-meta .pc-chip { margin-right:.3rem; }
.cards-3 .rcard .pc-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:0; max-width:none; }
.opt-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--brand);
  margin:0; letter-spacing:-.02em; }
.tour-row .tr-cta .tr-price { display:block; }

/* Official gate fares. Inherits .cmp-table (sticky first column, cards under 640px). */
.fare-table td:first-child { font-weight:600; }
.fare-table td.num { font-family:var(--display); font-weight:800; white-space:nowrap; }

/* {{ price_snapshot }}: a compact in-article conversion block, the gate fare against the pass. */
.fare-snapshot { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s5) 0; box-shadow:var(--shadow); }
.fare-snapshot .fs-h { font-family:var(--display); font-weight:800; font-size:var(--step-1);
  margin:0 0 var(--s3); line-height:1.2; max-width:none; }
.fare-snapshot .fs-rows { list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:.15rem; }
.fare-snapshot .fs-rows li { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem .1rem; border-bottom:1px solid var(--line); font-size:var(--step--1); }
.fare-snapshot .fs-rows li:last-child { border-bottom:0; }
.fare-snapshot .fs-rows li b { font-family:var(--display); font-size:var(--step-0); white-space:nowrap; }
.fare-snapshot .fs-rows li.is-key { background:var(--paper-2); border-radius:var(--radius-sm);
  padding-inline:.6rem; border-bottom-color:transparent; }
.fare-snapshot .fs-rows li.is-key b { color:var(--brand); font-size:var(--step-1); }
.fare-snapshot .fs-note { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); max-width:none; }

/* The four passenger stations as data cards. */
.station-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-top:var(--s4); }
.station-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.station-card .stn-media { aspect-ratio:4/3; background:var(--paper-2); }
.station-card .stn-media img { width:100%; height:100%; object-fit:cover; display:block; }
.station-card .stn-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:.55rem; }
.station-card .stn-order { font-family:var(--display); text-transform:uppercase; letter-spacing:.09em;
  font-size:.74rem; color:var(--gold-ink); background:var(--gold-soft); align-self:flex-start;
  padding:.2rem .6rem; border-radius:999px; }
.station-card h3 { margin:0; font-size:var(--step-1); }
.station-card .stn-zh { font-family:var(--body); font-weight:600; font-size:var(--step--1); color:var(--ink-soft); }
.station-card p { margin:0; max-width:none; }
.station-card .stn-transit { display:flex; align-items:flex-start; gap:.4rem; color:var(--ink-soft); }
.station-card .stn-transit .ico { color:var(--sea); margin-top:.15rem; flex:none; }
.station-card .stn-list { list-style:none; margin:0; padding:var(--s2) 0 0; display:grid; gap:.5rem;
  border-top:1px solid var(--line); }
.station-card .stn-list li { font-size:var(--step--1); line-height:1.45; }
.station-card .stn-list li b { font-family:var(--display); display:block; color:var(--ink); }
@media (max-width:820px){ .station-grid { grid-template-columns:1fr; } }

/* Plain station list, kept as the shape a build/interactive.mjs override may still emit. */
.station-list { display:grid; gap:var(--s3); margin-top:var(--s3); }
.station-list .sl-item { background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.station-list .sl-item h3 { margin:0 0 .5rem; font-size:var(--step-0); }
.station-list .sl-zh { font-family:var(--body); font-weight:600; color:var(--ink-soft); font-size:var(--step--1); }
.station-list .sl-item ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.station-list .sl-item li { font-size:var(--step--1); line-height:1.45; }
.station-list .sl-item li b { font-family:var(--display); }

/* Route schematic: an angle station is closed to the public, so it is drawn as a small square
   rather than a clickable pin, and never looks like a stop you can get off at. */
.map-schematic .angle-pin rect { fill:var(--slate); stroke:var(--paper); stroke-width:2; }
.map-schematic .map-pin text { font-size:14px; }


/* ============================================================
   RULE 33 INTERACTIVE BLOCKS, built on this site's own verified data.
   All three server-render their full content and are only NARROWED by script, so every one
   still reads as real content with scripting off. Controls are hidden until the block's own
   script sets data-js on it: an inert control is worse than no control.
   ============================================================ */

/* ---- 1. Seat-zone picker ({{ seat_picker }}), on the decision-picker shell ---- */
.ride-planner .rp-controls { display:none; }
.ride-planner[data-js] .rp-controls { display:block; }
.ride-planner .rp-qs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.ride-planner .rp-q { min-width:0; }
.ride-planner .rp-reset { min-height:44px; padding:.55rem 1.3rem; font-size:var(--step--1); }
.ride-planner .dp-card.is-top { box-shadow:inset 0 0 0 2px var(--accent); }
.ride-planner .dp-media { pointer-events:none; }
@media (max-width:860px){ .ride-planner .rp-qs { grid-template-columns:1fr; } }

/* ---- 2. Performance-date planner ({{ date_planner }}) ---- */
.fare-checker { margin-top:var(--s4); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow); }
.fare-checker .fc-controls { display:none; }
.fare-checker[data-js] .fc-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s4); }
.fare-checker .fc-q { border:0; padding:0; margin:0; min-width:0; }
.fare-checker .fc-q legend { font-family:var(--display); font-weight:800; font-size:var(--step--1);
  color:var(--ink); padding:0 0 .45rem; }
.fare-checker .fc-opts { display:flex; flex-wrap:wrap; gap:.45rem; }
.fare-checker .fc-opt { min-width:44px; }
.fare-checker .fc-reset-wrap { grid-column:1 / -1; }
.fare-checker .fc-reset { min-height:44px; padding:.55rem 1.3rem; font-size:var(--step--1); }
.fare-checker .fc-out { margin-top:var(--s3); border-top:1px solid var(--line); padding-top:var(--s3); }
.fare-checker[data-js] .fc-out { margin-top:var(--s4); }
.fare-checker .fc-verdict { font-family:var(--display); font-weight:800; font-size:var(--step-1);
  line-height:1.25; margin:0 0 var(--s2); max-width:none; }
.fare-checker .fc-nums { list-style:none; margin:0 0 var(--s2); padding:0; display:grid; gap:.45rem; }
.fare-checker .fc-nums li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  gap:.2rem .8rem; padding:.55rem .8rem; background:var(--surface-2); border-radius:var(--radius-sm); }
.fare-checker .fc-nums .fc-k { font-family:var(--display); font-weight:700; }
.fare-checker .fc-nums .fc-v { font-family:var(--display); font-weight:800; font-size:var(--step-0);
  white-space:nowrap; text-align:right; }
.fare-checker .fc-nums small { grid-column:1 / -1; color:var(--ink-soft); font-size:var(--step--1); line-height:1.4; }
.fare-checker .fc-hours, .fare-checker .fc-note { font-size:var(--step--1); color:var(--ink-soft);
  margin:0 0 .55rem; max-width:none; }
.fare-checker .fc-closed-note { display:flex; gap:.5rem; align-items:flex-start; color:var(--ink); font-weight:600; }
.fare-checker .fc-closed-note .ico { color:var(--sea); flex:none; margin-top:.15rem; }
.fare-checker[data-closed="1"] .fc-verdict,
.fare-checker[data-closed="1"] .fc-nums,
.fare-checker[data-closed="1"] .fc-hours { display:none; }
.fare-checker[data-closed="0"] .fc-closed-note { display:none; }
.fare-checker .fc-cta { display:flex; flex-wrap:wrap; gap:.7rem var(--s3); align-items:center;
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); }
.fare-checker .fc-cta-line { font-size:var(--step--1); color:var(--ink-soft); }
.fare-checker .fc-cta .btn { min-height:44px; }
@media (max-width:640px){
  .fare-checker { padding:var(--s3); }
  .fare-checker[data-js] .fc-controls { grid-template-columns:1fr; }
  .fare-checker .fc-cta .btn { width:100%; }
}

/* ---- 3. Getting-there route picker ({{ route_picker }}) ---- */
.station-explorer { margin-top:var(--s4); }
.station-explorer .se-controls { display:none; }
.station-explorer[data-js] .se-controls { display:block; }
.station-explorer .se-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.station-explorer .se-status { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0; max-width:none; }
.station-explorer .se-list { display:grid; gap:var(--s3); }
.station-explorer .se-group { background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.station-explorer .se-group[hidden] { display:none !important; }
.station-explorer .se-group h3 { margin:0 0 .55rem; font-size:var(--step-0); }
.station-explorer .se-zh { font-family:var(--body); font-weight:600; color:var(--ink-soft); font-size:var(--step--1); }
.station-explorer .se-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.station-explorer .se-group li { font-size:var(--step--1); line-height:1.45; }
.station-explorer .se-group li b { font-family:var(--display); display:block; color:var(--ink); }
/* A pin the explorer is currently filtered to, so map and list never disagree. */
.map-pin.is-picked circle { fill:var(--accent); }
.map-pin.is-picked text { fill:var(--accent-deep); font-weight:800; }
@media (max-width:640px){ .station-explorer .se-group { padding:var(--s3); } }

/* ============================================================
   FLOODED STAGE LAYER , Phase D1 (2026-09-06)
   Part 1 of 2. Everything below re-points the donor rules that assumed a LIGHT ground, pins
   the rule-31 type scale, and installs the rule-37 band rhythm. This layer is last in the
   sheet on purpose: at equal specificity the later rule wins, so this is the authority.
   ============================================================ */

/* ---- 1. DARK-GROUND CORRECTIONS ------------------------------------------------ */
body { background: var(--paper); color: var(--ink); }
img { background: var(--paper-2); }               /* no white flash while a photo loads */
a { color: var(--link); }
a:hover { color: var(--sea-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); }
.eyebrow { color: var(--gold); }
hr { border: 0; border-top: 1px solid var(--line); }

.site-header { background: rgba(213,216,210,.93); border-bottom: 1px solid var(--line); }
.nav-links a { color: var(--ink); }
.nav-links a:hover { color: var(--brand); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--accent-ink); }
.nav-links a.btn-brand, .nav-links a.btn-brand:hover { color: #fff; }
.nav-toggle { color: var(--ink); }
@media (max-width: 760px) { .nav-links { background: var(--paper-2); border-bottom-color: var(--line); } }
.skip-link { background: var(--brand-fill); color: #fff; }

.btn-primary, .btn-primary:hover, .prose a.btn-primary, .prose a.btn-primary:hover,
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover,
.cta-box a.btn-primary, .cta-box a.btn-primary:hover { color: var(--accent-ink); }
.btn-brand, .btn-brand:hover, .prose a.btn-brand { background: var(--brand-fill); color: #fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost, .prose a.btn-ghost { color: var(--ink); border-color: var(--ctl-strong); background: transparent; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* star rating: the unfilled track has to read as a track on a dark card */
.stars::before { color: var(--star-track); }
.stars .stars-fill::before { color: var(--gold); }
.stars-num, .pc-rating { color: var(--ink); }

/* semantic marks */
.incl .no::before, .proscons .cons { color: var(--alert); }
.proscons .cons { border-top-color: var(--alert); }
.incl .yes::before, .proscons .pros { color: var(--ok); }
.proscons .pros { border-top-color: var(--ok); }
.glyph.yes { background: rgba(27,107,74,.12); color: var(--ok); }
.glyph.no  { background: rgba(163,52,24,.10); color: var(--alert); }
.glyph.opt { background: var(--gold-soft); color: var(--gold-ink); }
.month-strip li.is-event   { background: rgba(44,58,51,.09); border-color: var(--brand); }
.month-strip li.is-harvest { background: var(--gold-soft); border-color: var(--gold); }
.month-strip li.is-drying  { background: rgba(163,52,24,.08); border-color: var(--alert); }

/* every "big number" reads gold on this site, never the structural teal (which is a fill) */
.stat-tile .st-num, .opt-range b, .opt-price, .tour-row .tr-price,
.dep-tour-list .num, .fare-snapshot .fs-rows li.is-key b, .pc-price { color: var(--gold); }
.stat-tile { border-top-color: var(--brand); }
.pc-price small, .tour-row .tr-price small { color: var(--ink-soft); }

/* map + schematic pins: the halo stroke has to be the band colour, not white */
.map-pin circle { fill: var(--brand); stroke: var(--paper); }
.map-pin.is-city circle { fill: var(--gold); }
.map-pin text { fill: var(--ink); stroke: var(--paper); }
.map-pin:hover circle, .map-pin:focus circle { fill: var(--sea-deep); }
.map-pin:hover text, .map-pin:focus text { fill: var(--brand); }
.map-pin.is-picked circle { fill: var(--accent); }
.map-pin.is-picked text { fill: var(--gold); }
.map-pin:focus-visible circle { stroke: var(--focus); }
.dep-pin circle { stroke: var(--paper); }
.dep-pin text { fill: var(--ink); stroke: var(--paper); }
.dep-pin.is-emilion circle { fill: var(--accent); }
.map-schematic .angle-pin rect { fill: var(--slate); stroke: var(--paper); }

/* form-ish surfaces */
.availability .av-date, .explorer-sort select {
  background: var(--surface-2); color: var(--ink); border-color: var(--ctl-strong); color-scheme: light; }
.explorer-check input { accent-color: var(--accent); }
.explorer-empty { border-color: var(--ctl-strong); background: var(--surface); }
.availability .av-msg { color: var(--ok); }

/* the hotel pill must NOT be gold: gold is the ticket CTA on this site */
.hotel-cta, .prose a.hotel-cta { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); box-shadow: none; }
.hotel-cta:hover, .prose a.hotel-cta:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.hotel-row { background: var(--surface); border-color: var(--line); }
.hotel-row .hr-name { color: var(--ink); }
.hotel-card .hc-rating .gold { color: var(--gold); }

/* footer, the one dark plate on a light page. It re-declares the pine tokens so everything
   inside it (links, gold hovers, the brand accent, the social circles) re-colours itself. */
.site-footer {
  --ink: #F0F3EE; --ink-soft: #B9C4BB;
  --line: #3E4C43; --line-soft: #364439; --ctl-line: #56645A; --ctl-strong: #8FA093;
  --brand: #A8C3A6; --link: #A8C3A6; --gold: #D9BC6A; --accent: #D9BC6A; --focus: #D9BC6A;
  background: var(--footer); color: var(--ink-soft); border-top: 1px solid var(--line);
  color-scheme: dark;
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand b { color: var(--accent); }
.socials a { border-color: var(--ctl-strong); color: var(--ink-soft); }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.disclosure { color: var(--ink-soft); border-top-color: var(--line); }

/* article body */
.prose a { color: var(--link); }
.prose blockquote { border-left-color: var(--accent); color: var(--ink-soft); }
.blog-cta { background: var(--paper-2); border-color: var(--line); border-left-color: var(--accent); }
.keep-reading { border-top-color: var(--line); }
.infographic img, .infographic svg { background: var(--surface); border-color: var(--line); }

/* the closing / mid-article banner is a dark pine plate with a gold edge, never text-on-gold.
   It re-declares its own ink so the shared .cta-banner rules below stay correct. */
.cta-banner {
  background: linear-gradient(150deg, #2C3A33 0%, #22302A 62%, #1E2A24 100%);
  --ink: #F0F3EE; --ink-soft: #B9C4BB; --link: #A8C3A6;
  border: 1px solid #3E4C43; border-top: 3px solid var(--gold-hi); color: var(--ink); }
.cta-banner h2, .cta-banner h3 { color: var(--ink); }
.cta-banner p { color: var(--ink-soft); }
.cta-banner a:not(.btn) { color: var(--link); }

/* ---- 2. RULE 31: a lead paragraph is body copy ---------------------------------- */
/* Body and section leads sit at --step-0. Only the hero lead is allowed above it, and only as
   far as --step-lead, which keeps the smallest H2 at >=1.77x the largest lead at every
   viewport from 320px to 1440px+ (worked in the CONTRAST/TYPE LEDGER at the foot of the file). */
:root { --step-lead: clamp(1.05rem, 1rem + .25vw, 1.22rem); }
.lede, .quick-answer p, .quick-answer-box p, .quick-answer-box p:first-child,
.section > p:first-of-type, .section > .wrap > p:first-of-type {
  font-size: var(--step-0); line-height: 1.62; }
.lede { color: var(--ink-soft); font-weight: 500; }
.hero .lede, .hero-full .lede, .hero--split .lede { font-size: var(--step-lead); line-height: 1.5; }
.quick-answer p, .quick-answer-box p:first-child { font-weight: 600; color: var(--ink); }
/* a bolded lead is bold, not big: never let inline emphasis change the computed size */
p b, p strong, li b, li strong, .lede b, .lede strong { font-size: inherit; font-weight: 700; color: var(--ink); }
.prose p, .prose li { font-size: var(--step-0); }

/* ---- 3. RULE 37: SECTION BANDS -------------------------------------------------- */
/* MECHANICS. A band is an OUTER full-width <section> painting a real background, wrapping an
   INNER .wrap that constrains the content. Some sections in this scaffold carry .wrap on the
   section element itself; a background there would paint only the 72rem column and the page
   would look broken, so those sections are converted to full-bleed and their direct children
   are re-constrained instead. Same geometry, correct paint. */
.section.band, .section[class*="band-"],
#featured-tour, #book, #quick-answer, #key-takeaways, #decision-picker, #decision-picker-section,
#categories, #quick-comparison, #why-here, #when-to-go, #what-you-see, #spot-map,
#testimonials, #stay, #faq, #answered, #closing-cta, #cta {
  position: relative;
  background: var(--band-bg, var(--paper));
  padding-block: var(--s6);
  border-top: var(--band-edge, 0 none);
  border-bottom: var(--band-edge, 0 none);
}
@supports selector(:has(*)) {
  #featured-tour.wrap:not(:has(> .wrap)), #book.wrap:not(:has(> .wrap)),
  #quick-answer.wrap:not(:has(> .wrap)), #key-takeaways.wrap:not(:has(> .wrap)),
  #decision-picker.wrap:not(:has(> .wrap)), #decision-picker-section.wrap:not(:has(> .wrap)),
  #categories.wrap:not(:has(> .wrap)), #quick-comparison.wrap:not(:has(> .wrap)),
  #why-here.wrap:not(:has(> .wrap)), #when-to-go.wrap:not(:has(> .wrap)),
  #what-you-see.wrap:not(:has(> .wrap)), #spot-map.wrap:not(:has(> .wrap)),
  #testimonials.wrap:not(:has(> .wrap)), #stay.wrap:not(:has(> .wrap)),
  #faq.wrap:not(:has(> .wrap)), #answered.wrap:not(:has(> .wrap)),
  #closing-cta.wrap:not(:has(> .wrap)), #cta.wrap:not(:has(> .wrap)),
  .section.wrap.band:not(:has(> .wrap)) {
    width: 100%; max-width: none; padding-inline: 1rem;
  }
  #featured-tour.wrap:not(:has(> .wrap)) > *, #book.wrap:not(:has(> .wrap)) > *,
  #quick-answer.wrap:not(:has(> .wrap)) > *, #key-takeaways.wrap:not(:has(> .wrap)) > *,
  #decision-picker.wrap:not(:has(> .wrap)) > *, #decision-picker-section.wrap:not(:has(> .wrap)) > *,
  #categories.wrap:not(:has(> .wrap)) > *, #quick-comparison.wrap:not(:has(> .wrap)) > *,
  #why-here.wrap:not(:has(> .wrap)) > *, #when-to-go.wrap:not(:has(> .wrap)) > *,
  #what-you-see.wrap:not(:has(> .wrap)) > *, #spot-map.wrap:not(:has(> .wrap)) > *,
  #testimonials.wrap:not(:has(> .wrap)) > *, #stay.wrap:not(:has(> .wrap)) > *,
  #faq.wrap:not(:has(> .wrap)) > *, #answered.wrap:not(:has(> .wrap)) > *,
  #closing-cta.wrap:not(:has(> .wrap)) > *, #cta.wrap:not(:has(> .wrap)) > *,
  .section.wrap.band:not(:has(> .wrap)) > * {
    width: min(100%, var(--maxw)); margin-inline: auto;
  }
}

/* THE FIVE TREATMENTS. A = base ground, B = lifted teal, C = warm-paper inverse,
   D = gradient wash, E = edged well (deeper than the ground, gold hairlines). Plus the stage
   variant of A for the hero and the gold plate for the closing CTA. */
.band-base,  .band-a { --band-bg: var(--paper); }
.band-lift,  .band-b, .band-surface-2 { --band-bg: var(--paper-2); }
.band-wash,  .band-d, .band-tint-vine { --band-bg: linear-gradient(155deg, #E7EAE4 0%, #DCE0D8 58%, #E3E6DF 100%); }
.band-tint-gold { --band-bg: linear-gradient(155deg, #EFE9D8 0%, #E6E2D2 58%, #EDE9DC 100%); }
.band-edged, .band-e, .band-dark {
  --band-bg: var(--deep);
  --band-edge: 1px solid rgba(138,106,23,.34);
}
.band-dark p { color: var(--ink-soft); }
.band-dark a:not(.btn) { color: var(--link); }
.band-stage { --band-bg: var(--paper); }

/* C , the dark-pine INVERSE band. Every token flips inside it, so cards, tables, chips,
   badges and glyphs re-colour themselves. It carries its OWN link colour (--inv-link, a pale
   sage) and its OWN CTA fill (--inv-cta, white text), because the light-band pine and the
   ground gold would both be unreadable here. */
.band-inverse, .band-c, #decision-picker, #decision-picker-section, #what-you-see {
  --ink: #F0F3EE; --ink-soft: #B9C4BB;
  --paper: #22302A; --paper-2: #2C3A33;
  --surface: #2C3A33; --surface-2: #364439; --deep: #1A241F;
  --line: #3E4C43; --line-soft: #364439; --ctl-line: #56645A; --ctl-strong: #8FA093; --star-track: #56645A;
  --brand: #A8C3A6; --brand-fill: #3E5246; --brand-deep: #2C3A33;
  --accent: #C2492E; --accent-deep: #A63A22; --accent-ink: #FFFFFF;
  --sea: #A8C3A6; --sea-deep: #C6D9C4;
  --gold: #D9BC6A; --gold-soft: rgba(255,255,255,.14); --gold-ink: #F0E3C2;
  --gold-hi: #D9BC6A;
  --link: #A8C3A6; --focus: #D9BC6A;
  --ok: #6FD3A5; --alert: #F4A08D; --warn: #E0B65C; --slate: #8FA093;
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.34);
  --band-bg: var(--inv);
  color: var(--inv-ink);
  color-scheme: dark;
}
.band-inverse .eyebrow, .band-c .eyebrow, #decision-picker .eyebrow, #what-you-see .eyebrow { color: var(--inv-eyebrow); }
.band-inverse .btn-brand, .band-c .btn-brand, #decision-picker .btn-brand, #what-you-see .btn-brand { background: var(--brand-fill); color: var(--accent-ink); }
.band-inverse img, .band-c img, #decision-picker img, #what-you-see img { background: var(--inv-2); }

/* The closing plate: a gold-leaf gradient, dark ink, and a DARK PINE button so the CTA still
   separates from its own band. Its link colour is the same dark ink, underlined. The gradient
   is deliberately not darkened: ink reads 4.64:1 on its dark end, which is AA but tight. */
.band-cta, .band-accent, #closing-cta, #cta {
  --band-bg: linear-gradient(135deg, #D0A544 0%, #B0862A 100%);
  --ink: #1E2622; --ink-soft: #1E2622;
  --link: #1E2622; --focus: #1E2622;
  --surface: rgba(255,255,255,.30); --surface-2: rgba(255,255,255,.22);
  --line: rgba(30,38,34,.30); --ctl-line: rgba(30,38,34,.45); --ctl-strong: rgba(30,38,34,.60);
  --accent: #22302A; --accent-deep: #1E2622; --accent-ink: #FFFFFF;
  --brand-fill: #22302A; --brand-deep: #1E2622; --brand: #22302A;
  --gold: #1E2622; --gold-soft: rgba(255,255,255,.34); --gold-ink: #1E2622;
  color: var(--ink);
}
.band-cta h2, .band-accent h2, #closing-cta h2, #cta h2,
.band-cta h3, .band-accent h3, #closing-cta h3, #cta h3 { color: var(--ink); }
.band-cta p, .band-accent p, #closing-cta p, #cta p { color: var(--ink-soft); }
.band-cta a:not(.btn), .band-accent a:not(.btn), #closing-cta a:not(.btn), #cta a:not(.btn) {
  color: var(--ink); text-decoration: underline; }
.band-cta .btn-primary, .band-accent .btn-primary, #closing-cta .btn-primary, #cta .btn-primary {
  background: #22302A; color: #fff; }
.band-cta .btn-primary:hover, .band-accent .btn-primary:hover, #closing-cta .btn-primary:hover, #cta .btn-primary:hover {
  background: #1E2622; color: #fff; }
.band-cta .btn-ghost, .band-accent .btn-ghost, #closing-cta .btn-ghost, #cta .btn-ghost {
  color: var(--ink); border-color: rgba(30,38,34,.60); }
.band-cta .cta-proof .gold, #closing-cta .cta-proof .gold { color: var(--ink); }

/* THE HOMEPAGE RHYTHM, in document order. No two adjacent sections share a treatment:
   1 featured-tour A-stage | 2 quick-answer B | 3 key-takeaways E | 4 decision-picker C |
   5 categories B | 6 quick-comparison D | 7 why-here A | 8 when-to-go B | 9 what-you-see C |
   10 spot-map E | 11 testimonials D | 12 stay B | 13 faq A | 14 answered E | 15 closing CTA gold.
   Ids beat the band-* classes on specificity, so the rhythm holds even if the page markup
   labels a section differently. */
#featured-tour, #book { --band-bg: var(--paper); overflow: clip; }
#quick-answer, #categories, #when-to-go, #stay { --band-bg: var(--paper-2); }
#key-takeaways, #spot-map, #answered {
  --band-bg: var(--deep);
  --band-edge: 1px solid rgba(138,106,23,.34);
}
#quick-comparison { --band-bg: linear-gradient(155deg, #E7EAE4 0%, #DCE0D8 58%, #E3E6DF 100%); }
#testimonials     { --band-bg: linear-gradient(155deg, #EFE9D8 0%, #E6E2D2 58%, #EDE9DC 100%); }
#why-here, #faq   { --band-bg: var(--paper); }

/* A banded section's own intro copy spans the band, and its figure gets a band-matched frame. */
.section[class*="band-"] > p, .section.band > p { max-width: none; }
.section-figure { background: var(--paper-2); border: 1px solid var(--line); }

/* ============================================================
   FLOODED STAGE LAYER , Part 2 of 2
   Heading rule, rule-27 tables, rule-30 mixed card grid, collage, sticky bar, the interactive
   blocks' controls, and the page's motion (with its reduced-motion guard).
   ============================================================ */

/* ---- 4. HEADING RULE (replaces the donor's dashed border-image, which was built for a light
   ground). A gold-to-teal hairline that fades out to the right, so the H2 reads as a stage
   edge rather than a boxed heading. This is also animated element #2 (see MOTION). ---- */
.section > h2:first-child, .section > .wrap > h2:first-child, .rule-h2 {
  position: relative;
  border-bottom: 0;
  border-image: none;
  padding-bottom: var(--s2);
}
.section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 26%, rgba(44,58,51,0) 64%);
  background-size: 220% 100%;
  background-position: 0% 0;
}
.band-inverse .rule-h2::after, .band-c .rule-h2::after,
#decision-picker .rule-h2::after, #what-you-see .rule-h2::after {
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 26%, rgba(168,195,166,0) 64%);
  background-size: 220% 100%;
}

/* ---- 5. RULE 27: TABLES ARE DESIGNED ------------------------------------------- */
/* Container: rounded, bordered, its own horizontal scroll on phones (compile.mjs wraps every
   bare <table> in .table-scroll). Header row: the paper-2 tint in the display font. Rows:
   zebra + a hover lift. Numbers: right-aligned tabular figures. */
.table-scroll {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--ctl-line) var(--surface);
}
.table-scroll > table, .prose table, .keyfacts, .cmp-table, .matrix-table, .fare-table, .explorer-table {
  background: var(--surface); color: var(--ink);
}
table th, table td, .prose th, .prose td { border-bottom: 1px solid var(--line-soft); padding: .8rem 1rem; }
table thead th, .prose thead th {
  background: var(--paper-2); font-family: var(--display); font-weight: 700; color: var(--ink);
  letter-spacing: .01em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table tbody tr:nth-child(even) > td { background: var(--surface-2); }
table tbody tr:hover > td { background: rgba(44,58,51,.06); }
.band-inverse table tbody tr:hover > td, #decision-picker table tbody tr:hover > td,
#what-you-see table tbody tr:hover > td { background: rgba(240,243,238,.07); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.keyfacts { border-color: var(--line); border-radius: var(--radius); }
.keyfacts th { background: var(--paper-2); }
.cmp-table th:first-child, .cmp-table td:first-child { box-shadow: 1px 0 0 var(--line); }
.matrix-table { border-color: var(--line); }
.matrix-table thead th { box-shadow: 0 1px 0 var(--line); }
.fare-table td.num, .explorer-table td.num { color: var(--gold); }

/* Homepage: the seat-zone comparison and the what-your-seat-includes matrix both STACK into
   cards under 640px instead of scrolling. Any other table with per-cell data-labels inside
   those two sections gets the same treatment. */
@media (max-width: 640px) {
  .cmp-table, .matrix-table, .stack-cards { font-size: var(--step--1); }
  .stack-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
  .stack-cards, .stack-cards tbody, .stack-cards tr, .stack-cards td { display: block; width: 100%; }
  .stack-cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); overflow: hidden; }
  .stack-cards tbody tr:nth-child(even) > td { background: transparent; }
  .stack-cards td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; align-items: baseline; padding: .5rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
  .stack-cards td:last-child { border-bottom: 0; }
  .stack-cards td::before { content: attr(data-label); font-family: var(--display); font-weight: 700; color: var(--ink-soft); font-size: .78rem; }
  .stack-cards td:first-child { grid-template-columns: 1fr; background: var(--paper-2); font-size: var(--step-0); padding-top: .7rem; }
  .stack-cards td:first-child::before { display: none; }
  .stack-cards td.num { text-align: left; white-space: normal; }
  /* the .matrix-table stack already exists above at 768px; make sure it never re-scrolls */
  .matrix-table { border: 0; background: transparent; }
  /* a stacked table must not also try to scroll sideways inside its container */
  .table-scroll:has(> .cmp-table), .table-scroll:has(> .matrix-table), .table-scroll:has(> .stack-cards) {
    overflow-x: visible; border: 0; background: transparent; box-shadow: none;
  }
}
@supports selector(:has(*)) {
  @media (max-width: 640px) {
    #quick-comparison table:has(td[data-label]), #categories table:has(td[data-label]) { display: block; }
    #quick-comparison table:has(td[data-label]) thead, #categories table:has(td[data-label]) thead {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
    #quick-comparison table:has(td[data-label]) tbody, #categories table:has(td[data-label]) tbody,
    #quick-comparison table:has(td[data-label]) tr, #categories table:has(td[data-label]) tr,
    #quick-comparison table:has(td[data-label]) td, #categories table:has(td[data-label]) td { display: block; width: 100%; }
    #quick-comparison table:has(td[data-label]) tr, #categories table:has(td[data-label]) tr {
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); overflow: hidden; }
    #quick-comparison table:has(td[data-label]) td, #categories table:has(td[data-label]) td {
      display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; text-align: left; padding: .5rem .9rem; }
    #quick-comparison table:has(td[data-label]) td::before, #categories table:has(td[data-label]) td::before {
      content: attr(data-label); font-family: var(--display); font-weight: 700; color: var(--ink-soft); font-size: .78rem; }
  }
}

/* ---- 6. RULE 30: MIXED LAYOUT, NEVER A UNIFORM STACK ---------------------------- */
/* A listing of 2+ items is one full-width LEAD row plus a count-aware card grid.
   3-up above 1040px, 2-up 761-1040px, 1-up below 761px as an image-LEFT horizontal card. */
.cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; }
.cards-3 .rcard { background: var(--surface); border-color: var(--line); }
.cards-3 .rcard:hover { border-color: var(--brand); }
.cards-3 .rcard .rc-media, .related .rcard .rc-media { background: var(--paper-2); }
.cards-3 .rcard.is-popular, .product-card.is-popular, .tour-row.is-lead {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
@media (min-width: 761px) and (max-width: 1040px) {
  .cards-3, .cards-3.cards-n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards-3.cards-n1 { grid-template-columns: minmax(0, 30rem); justify-content: start; }
}
@media (max-width: 760px) {
  .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns: 1fr; }
  .cards-3 .rcard { flex-direction: row; align-items: stretch; }
  .cards-3 .rcard .rc-media { width: 38%; flex: none; aspect-ratio: 1/1; }
  .cards-3 .rcard .rc-media img { height: 100%; }
  .cards-3 .rcard .rc-body { padding: var(--s3); gap: .4rem; }
  .cards-3 .rcard .rc-body .btn { width: 100%; }
}
/* the lead row: wider media, gold edge, its price and includes list carrying the weight */
.tour-row { background: var(--surface); border-color: var(--line); }
.tour-row h3 a { color: var(--ink); }
.tour-row h3 a:hover { color: var(--brand); }
.tour-row.is-lead { background: linear-gradient(180deg, var(--surface) 0%, var(--paper-2) 100%); }
.tour-row.is-lead.has-media { grid-template-columns: minmax(240px, 34%) 1fr auto; gap: var(--s4); }
.tour-row.is-lead .tr-media img { min-height: 200px; border-radius: var(--radius-sm); }
.tour-row.is-lead h3 { font-size: var(--step-1); }
.tour-row.is-lead .tr-price { font-size: var(--step-2); }
@media (max-width: 860px) { .tour-row.is-lead.has-media { grid-template-columns: 1fr; } }
.pc-chip { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.tour-picks { background: var(--paper-2); border-color: var(--line); }
.tour-picks .tp-card { background: var(--surface); border-color: var(--line); }
.tour-picks .tp-title a { color: var(--ink); }
.tour-picks .tp-title a:hover { color: var(--brand); }
.tour-picks .tp-proof .gold, .cta-proof .gold, .sticky-cta .sc-proof .gold, .bp-rating .gold { color: var(--gold); }
.cta-box { background: var(--paper-2); border-color: var(--line); border-top-color: var(--accent); }
.cta-box .cb-h { color: var(--ink); }
.booking-panel, .quick-answer, .quick-answer-box, .honesty, .fare-snapshot, .infogain,
.review-card, .testimonial-card, .station-card, .season-card, .hotel-card, .wine-card,
.faq details, .dep-panel, .fare-checker, .decision-picker, .author-block, .trust {
  background: var(--surface); border-color: var(--line);
}
.author-block, .trust, .explorer-controls { background: var(--paper-2); }
.author-block img.avatar { border-color: var(--surface); }
.infogain { background: var(--paper-2); border-left-color: var(--gold); }
.infogain .tag { background: var(--gold-soft); color: var(--gold-ink); }
.cat-card { background: var(--surface); border-color: var(--line); border-left-color: var(--brand); color: var(--ink); }
.cat-card:hover { border-left-color: var(--accent); }
.answered-group { border-top-color: var(--brand); }
.answered-group li a { color: var(--ink); text-decoration-color: var(--line); }
.answered-group li a:hover { color: var(--brand); }
.takeaways-list li::before, .opt-includes li::before { color: var(--brand); }
.timeline { border-left-color: var(--line); }
.timeline li::before { background: var(--accent); border-color: var(--paper); }

/* photo collage (rule 32): 4-col mosaic with a 2x2 hero tile, 3-col tablet, 2-col phone */
.photo-collage { gap: .55rem; }
.pcol-tile { background: var(--paper-2); box-shadow: 0 0 0 1px var(--line) inset; }
.pcol-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pcol-cap { background: linear-gradient(180deg, rgba(30,38,34,0) 0%, rgba(30,38,34,.86) 100%); color: #fff; }

/* ---- 7. STICKY MOBILE BAR ------------------------------------------------------- */
.sticky-cta {
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(30,38,34,.18);
}
.sticky-cta .sc-proof { color: var(--ink); white-space: normal; line-height: 1.25;
  /* Was max-height + overflow:hidden, which cut the line mid-word with no ellipsis.
     A line clamp ends the visible text with a real ellipsis instead. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  max-height: 3.9em; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn-primary { color: var(--accent-ink); }
@media (min-width: 761px) { .sticky-cta { border: 1px solid var(--line); } }
@media (max-width: 360px) { .sticky-cta { gap: .55rem; padding-inline: .6rem; } .sticky-cta .btn { padding-inline: .9rem; } }

/* ---- 8. THE THREE INTERACTIVE BLOCKS' CONTROLS ---------------------------------- */
/* Chips are >=44px tall, carry a visible focus ring, and the active state is the CTA gold with
   dark ink (never white-on-teal, which failed AA). Every block's status line is an aria-live
   region and is styled as one so a filter change is visible, not just audible. */
.chip, .decision-picker .dp-opt, .fare-checker .fc-opt, .station-explorer .se-chip {
  min-height: 44px; background: var(--surface-2); border: 1.5px solid var(--ctl-strong); color: var(--ink);
  font-family: var(--display); font-weight: 700;
}
.chip:hover, .decision-picker .dp-opt:hover, .fare-checker .fc-opt:hover, .station-explorer .se-chip:hover {
  border-color: var(--brand); color: var(--brand); background: var(--surface); }
.chip.is-active, .chip[aria-pressed="true"], .decision-picker .dp-opt.is-on,
.fare-checker .fc-opt.is-on, .station-explorer .se-chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip:focus-visible, .decision-picker .dp-opt:focus-visible, .fare-checker .fc-opt:focus-visible,
.station-explorer .se-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.decision-picker .dp-q legend, .fare-checker .fc-q legend, .ride-planner .rp-q legend { color: var(--ink); }
.decision-picker .dp-summary, .decision-picker .dp-facts span { background: var(--surface-2); color: var(--ink); }
.decision-picker .dp-card { background: var(--paper-2); border-color: var(--line); }
.decision-picker[data-state="picked"] .dp-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.decision-picker .dp-media { background: var(--paper-2); }
.ride-planner .dp-card.is-top { box-shadow: inset 0 0 0 2px var(--accent); }
.fare-checker .fc-nums li { background: var(--surface-2); }
.fare-checker .fc-nums .fc-v, .fare-checker .fc-verdict { color: var(--gold); }
.fare-checker .fc-closed-note { color: var(--ink); }
.station-explorer .se-group, .station-list .sl-item { background: var(--surface); border-color: var(--line); border-left-color: var(--brand); }
p[aria-live], .js-status, .explorer-status, .se-status, .dep-status, .picker-status {
  display: block; max-width: none; margin: var(--s3) 0; padding: .55rem .85rem;
  background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
  color: var(--ink); font-size: var(--step--1); font-weight: 600;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  p[aria-live], .js-status, .explorer-status, .se-status, .dep-status, .picker-status {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
  }
}

/* ---- 9. MOTION ------------------------------------------------------------------
   Three animated elements, all CSS-only, all decorative, none of them ever gating content:
   (1) STAGE DRIFT , a slow warm/teal light wash behind the hero band (#featured-tour /
       .band-stage). Absolutely positioned, transform+opacity only, so zero layout shift.
   (2) HEADING SHEEN , the gold hairline under every section H2 slowly sweeps its gradient.
       The rule is fully painted at every frame; the animation only moves the highlight.
   (3) CARD RISE , a staggered settle on card grids, driven by the scroll timeline where the
       browser supports it. TRANSFORM ONLY, never opacity: a card is 100% visible at progress
       0, so with JS off, an unsupported browser, or a crawler, every card still reads.
   (4) PIN PULSE on the route map's "you are here" ring (kept from the scaffold).
   All four are declared inside prefers-reduced-motion: no-preference AND explicitly switched off
   in the reduce block below, which also pins each one to its end state. ------------------- */
#featured-tour::before, .band-stage::before {
  content: ""; position: absolute; inset: -12% -8% auto -8%; height: 145%; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 62% at 22% 10%, rgba(138,106,23,.13), rgba(138,106,23,0) 62%),
    radial-gradient(42% 56% at 78% 2%,  rgba(44,58,51,.09), rgba(44,58,51,0) 66%);
}
#featured-tour > *, .band-stage > * { position: relative; z-index: 1; }
@keyframes stage-drift {
  from { transform: translate3d(-2.4%, 0, 0) scale(1); opacity: .82; }
  to   { transform: translate3d(2.4%, 1.6%, 0) scale(1.07); opacity: 1; }
}
@keyframes h-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes card-rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  #featured-tour::before, .band-stage::before { animation: stage-drift 26s ease-in-out infinite alternate; }
  .section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after {
    animation: h-sheen 11s ease-in-out infinite alternate; }
  .map-pin.is-city circle.pulse-ring {
    fill: none; stroke: var(--accent); stroke-width: 2;
    transform-origin: center; transform-box: fill-box;
    animation: pin-pulse 2.4s ease-out infinite; }
  @supports (animation-timeline: view()) {
    .cards-3 > .rcard, .stat-grid > .stat-tile, .testimonials-grid > .testimonial-card,
    .hotel-grid > .hotel-card, .photo-collage > .pcol-tile, .answered-grid > .answered-group,
    .season-grid > .season-card, .station-grid > .station-card, .cat-grid > .cat-card,
    .tour-list > .tour-row, .decision-picker .dp-results > .dp-card {
      animation: card-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #featured-tour::before, .band-stage::before { animation: none; transform: none; opacity: 1; }
  .section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after {
    animation: none; background-position: 0% 0; }
  .cards-3 > .rcard, .stat-grid > .stat-tile, .testimonials-grid > .testimonial-card,
  .hotel-grid > .hotel-card, .photo-collage > .pcol-tile, .answered-grid > .answered-group,
  .season-grid > .season-card, .station-grid > .station-card, .cat-grid > .cat-card,
  .tour-list > .tour-row, .decision-picker .dp-results > .dp-card {
    animation: none; transform: none; }
  .map-pin.is-city circle.pulse-ring { animation: none; opacity: 0; }
  .pcol-tile img, .cat-card, .btn, .chip, .sticky-cta { transition: none; }
}

/* ============================================================
   CONTRAST + TYPE LEDGER (computed, not estimated , WCAG 2.x relative luminance)
   91 pairings were machine-checked against the tokens as they stand in this file: 0 failures.
   LIGHT BASE (:root)
     ink #1E2622      on paper #D5D8D2 10.76 | lift #C9CDC5 9.61 | card #FFFFFF 15.49
                      on surface-2 #EDEFEA 13.38 | wash/deep #E3E6DF 12.28
     ink-soft #4A554E on paper 5.40 | lift 4.82 | card 7.78 | surface-2 6.72 | deep 6.17
     link/brand #2C3A33 on paper 8.28 | card 11.93 | surface-2 10.30 | deep 9.46
     gold #8A6A17     on card 5.05. NEVER on paper (3.51): stars, numerals and rules only.
     accent #A63A22   is a FILL, never text on paper (4.49). White on it 6.46 | hover #8C3019 8.23
     btn-brand #fff   on brand-fill #2C3A33 11.93 | on hover #1E2A24 14.87
     badges: gold-ink #5A4610 on gold-soft #EDE3C9 7.09
     glyphs: ok #1B6B4A on card 6.46 / zebra 5.58 | alert #A33418 on card 6.86 / zebra 5.92
     non-text: ctl-strong #6F7A6C 4.49 on card, 3.12 on paper (the border that alone identifies
     a control); focus ring #A63A22 4.49 on paper, 6.46 on card. line/line-soft/star-track are
     decorative hairlines and carry no information.
     sticky bar: ink on the white plate 15.49 | photo scrim: #fff and gold-hi #D9BC6A on
     rgba(30,38,34,.86) 15.49 / 8.37
   DARK PINE INVERSE BAND (#decision-picker, #what-you-see, .band-inverse, and the footer)
     ink #F0F3EE on paper #22302A 12.31 | lift/card #2C3A33 10.66 | surface-2 #364439 9.18
                 on deep #1A241F 14.25
     ink-soft #B9C4BB on paper 7.66 | card 6.63 | surface-2 5.72 | deep 8.87
     link/brand #A8C3A6 on paper 7.23 | card 6.26 | surface-2 5.40 | deep 8.37
     gold #D9BC6A on card 6.45 | eyebrow + focus ring on paper 7.45
     CTA #fff on accent #C2492E 4.90 | hover #A63A22 6.46 | btn-brand #fff on #3E5246 8.40
     glyphs: ok #6FD3A5 6.55 / 5.65 | alert #F4A08D 5.60 / 5.02
     footer: body 7.66 | heading and link 12.31 | gold hover 7.45 | social border #8FA093 5.00
   CLOSING GOLD PLATE (#closing-cta, .band-cta)
     gradient #D0A544 to #B0862A. ink #1E2622 6.75 on the light end, 4.64 on the dark end, so
     the plate carries ONE ink (ink-soft is set to the same value) and the gradient is never
     darkened further. Button #22302A with white 13.78 | hover #1E2622 15.49
   ARTICLE CLOSING PLATE (.cta-banner) , scoped pine gradient #2C3A33 / #22302A / #1E2A24
     ink 10.66-13.29 | muted 6.63-8.27 | link 6.26-7.81
   Lowest text pair shipped anywhere: 4.64 (plate ink on the gradient's dark end). AA floor 4.5.
   TYPE (rule 31): lead p = --step-lead clamp(1.05,1+.25vw,1.22)rem; H2 = --step-3
   clamp(1.85,1.5+1.8vw,3.1)rem. Ratio H2/lead: 1.77x at 320px, 1.91x at 500px, 2.26x at 976px,
   2.52x at 1400px. Body p and section leads sit at --step-0, one step below that again.
   ============================================================ */

/* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */
/* rule37:bands {"band-paper":{"key":"paper","bg":"#d5d8d2","fg":"#1e2622","link":"#2c3a33"},"band-tint":{"key":"tint","bg":"#c9cdc5","fg":"#1e2622","link":"#2c3a33"},"band-wash":{"key":"wash","bg":"#c4c8c2","fg":"#1e2622","link":"#2c3a33"},"band-edge":{"key":"edge","bg":"#ffffff","fg":"#1e2622","link":"#2c3a33"},"band-inverse":{"key":"inverse","bg":"#22302a","fg":"#d5d8d2","link":"#ede3c9"}} */
/* Rule 37: adjacent sections never share a ground. The colour lives on the OUTER
   full-width <section>; .wrap moved to an inner div that only constrains width.
   Never reintroduce a box-shadow 0 0 0 100vmax full-bleed here: an outer box-shadow
   paints only outside the border box, so none of it lands behind the content. */
.section[class*="band-"]{background:var(--band-bg);color:var(--band-fg);position:relative;isolation:isolate;overflow-x:clip}
.section[class*="band-"]>.wrap{position:relative;z-index:1}
/* a banded section needs air on both sides, so the usual collapsed top padding is restored */
.section[class*="band-"]+.section[class*="band-"]{padding-top:var(--s6,4rem)}
.section[class*="band-"] a:not(.btn):not(.nav-link){color:var(--band-link)}
.section[class*="band-"] a:not(.btn):not(.nav-link):hover{color:var(--band-link-hover)}
.section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)}
.band-edge{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
.band-inverse :where(hr,table,th,td){border-color:var(--band-line)}
.band-inverse :where(.card,.rcard,.tcard,.stat-tile,.quick-answer-box,details,.tp-card){background:var(--band-surface);border-color:var(--band-line)}

/* the 5 treatments, driven only by this site's own palette tokens */
.band-paper{--band-bg:#d5d8d2;--band-fg:#1e2622;--band-muted:#4a554e;--band-line:#b7bdb4;--band-link:#2c3a33;--band-link-hover:#212c26;--band-surface:#ffffff;--band-rule:#2c3a33;--band-cta-bg:#a63a22;--band-cta-fg:#ffffff}
.band-tint{--band-bg:#c9cdc5;--band-fg:#1e2622;--band-muted:#4a554e;--band-line:#b7bdb4;--band-link:#2c3a33;--band-link-hover:#212c26;--band-surface:#ffffff;--band-rule:#2c3a33;--band-cta-bg:#a63a22;--band-cta-fg:#ffffff}
.band-wash{--band-bg:#c4c8c2;--band-fg:#1e2622;--band-muted:#4a554e;--band-line:#b7bdb4;--band-link:#2c3a33;--band-link-hover:#212c26;--band-surface:#ffffff;--band-rule:#2c3a33;--band-cta-bg:#a63a22;--band-cta-fg:#ffffff;--surface:#ffffff}
.band-edge{--band-bg:#ffffff;--band-fg:#1e2622;--band-muted:#4a554e;--band-line:#b7bdb4;--band-link:#2c3a33;--band-link-hover:#212c26;--band-surface:#d5d8d2;--band-rule:#2c3a33;--band-cta-bg:#a63a22;--band-cta-fg:#ffffff;--paper:#ffffff;--surface:#d5d8d2;--surface-2:#eaece9}
.band-inverse{--band-bg:#22302a;--band-fg:#d5d8d2;--band-muted:#a3a9a3;--band-line:#49554f;--band-link:#ede3c9;--band-link-hover:#f3eddc;--band-surface:#323f39;--band-rule:#ede3c9;--band-cta-bg:#767f7a;--band-cta-fg:#000000;--ink:#d5d8d2;--ink-soft:#a3a9a3;--slate:#a3a9a3;--paper:#22302a;--paper-2:#323f39;--surface:#323f39;--surface-2:#323f39;--line:#49554f;--brand:#ede3c9;--brand-deep:#ede3c9;--sea:#ede3c9;--sea-deep:#ede3c9;--accent:#767f7a;--accent-deep:#767f7a;--accent-ink:#000000;--gold:#ede3c9;--gold-soft:#323f39;--gold-ink:#d5d8d2;--shadow:none}

/* selectors that used to match the combined .section.wrap element, re-pointed at the split form */
.section > .wrap > p, .section > .wrap > .wrap > p{max-width: none;}
.section > .wrap > h2:first-child{padding-bottom: var(--s2); border-bottom: 2px solid var(--sea); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1;}
.section > .wrap > p, .section > .wrap > .wrap > p{max-width: none;}
.section > .wrap > p:first-of-type, .section > .wrap > .wrap > p:first-of-type{font-size: var(--step-0); line-height: 1.62;}
@supports selector(:has(*)){.section > .wrap.band:not(:has(> .wrap)){width: 100%; max-width: none; padding-inline: 1rem;}}
@supports selector(:has(*)){.section > .wrap.band:not(:has(> .wrap)) > *{width: min(100%, var(--maxw)); margin-inline: auto;}}
.section[class*="band-"] > .wrap > p, .section.band > .wrap > p{max-width: none;}
.section > .wrap > h2:first-child, .section > .wrap > .wrap > h2:first-child{position: relative; border-bottom: 0; border-image: none; padding-bottom: var(--s2);}
.section > .wrap > h2:first-child::after, .section > .wrap > .wrap > h2:first-child::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 26%, rgba(44,58,51,0) 64%); background-size: 220% 100%; background-position: 0% 0;}
@media (prefers-reduced-motion: no-preference){.section > .wrap > h2:first-child::after, .section > .wrap > .wrap > h2:first-child::after{animation: h-sheen 11s ease-in-out infinite alternate;}}
@media (prefers-reduced-motion: reduce){.section > .wrap > h2:first-child::after, .section > .wrap > .wrap > h2:first-child::after{animation: none; background-position: 0% 0;}}

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