/* ============================================================
   Kyoto Nara Day Tour - Phase D1 Design System
   IDENTITY: "Vermillion Gate" (site.config.md / research/layout-approval.md, approved by Oleg
   at the Phase C gate 2026-09-07). A LIGHT-GROUND site: the subject is a daylight temple and
   deer-park day out, so the page ground is a persimmon / kaki tint (#F4D3C0) drawn from the
   vermillion torii of Fushimi Inari and Kasuga Taisha, the ink is sumi brown (#241511), the
   structural accent is that same torii vermillion and the second accent is temple-moss green.
   One deep sumi inverse band drops the page out of the light every few sections so the rhythm
   never flattens, and the closing plate is a vermillion gradient with white type.
   Checked against all 216 sibling grounds in the portfolio (114 distinct): the nearest ground in
   use sits 33 RGB units away, and the red/vermillion region is the least occupied in the set.
   Every foreground/background pair below was computed at AA or better; the lowest ratio in the
   palette is 4.8:1. Ratios are recorded in the CONTRAST LEDGER comment at the foot of this file.
   Soft 12px radii, vermillion hairlines under headings. Mobile-first, zero heavy deps, system fonts.
   ============================================================ */
:root {
  /* ---- Palette "Vermillion Gate" ----
     Drawn from the vermillion (shu-iro) torii of Fushimi Inari and Kasuga Taisha over sumi ink,
     with temple-moss green as the second accent. Light ground, dark inverse band: the reverse of
     the donor lineage, so every --inv-* token is a DARK band here. Every pair below was contrast
     checked; the lowest ratio in the set is 4.8:1, all AA. */
  /* text */
  --ink:        #241511;   /* primary text on every light surface (12.5:1 on --paper) */
  --ink-soft:   #5C4038;   /* secondary text                      (6.7:1 on --paper)  */

  /* grounds and surfaces (light) */
  --paper:      #F4D3C0;   /* page ground: persimmon / kaki */
  --paper-2:    #FAE6DA;   /* lifted band + table header tint */
  --surface:    #FDF6F1;   /* cards, panels */
  --surface-2:  #F8EAE1;   /* inputs, zebra rows, chips at rest */
  --deep:       #E8BFA6;   /* the edged band: deeper than the ground */
  --line:       #D9AE95;   /* hairline borders on light */
  --line-soft:  #E7C6B2;   /* quieter divider inside a card */

  /* sumi-ink INVERSE band (light text on dark, its own link + CTA below) */
  --inv:        #2A1712;   /* inverse band ground: deep sumi brown */
  --inv-2:      #3A2019;   /* inverse table header tint */
  --inv-zebra:  #331C16;   /* inverse zebra row */
  --inv-card:   #402419;   /* card on the inverse band */
  --inv-line:   #573429;
  --inv-ink:    #F7E9E0;   /* text on the inverse band          (14.4:1) */
  --inv-soft:   #D3B4A4;   /* secondary text on inverse          (8.8:1) */
  --inv-link:   #F0B896;   /* INVERSE-BAND LINK                  (9.8:1) */
  --inv-cta:    #C4482E;   /* INVERSE-BAND CTA fill, white text  (4.9:1) */
  --inv-cta-deep:#A63A24;  /* its hover */
  --inv-eyebrow:#E9A176;   /* eyebrow / small caps on inverse    (8.0:1) */

  /* brand + accents */
  --brand:      #A82D22;   /* torii vermillion: link-adjacent text, icons, rules (4.9:1) */
  --brand-fill: #B7332A;   /* the same vermillion as a FILL (btn-brand, skip link), white 6.0:1 */
  --brand-deep: #8E241C;   /* its hover, white 8.7:1 */
  --accent:     #4A5D3F;   /* temple moss / bamboo green as a FILL, white text 7.2:1 */
  --accent-deep:#38492F;
  --accent-ink: #FFFFFF;
  --sea:        #4A5D3F;   /* alias kept so donor rules stay in-palette */
  --sea-deep:   #38492F;
  --gold:       #7A5410;   /* kincha: eyebrow / small caps on light (4.8:1) */
  --gold-soft:  #F6E4CC;
  --gold-ink:   #4A3308;
  --link:       #9A2A1F;   /* body links on light (5.5:1 on --paper, 7.2:1 on --surface) */
  --slate:      #6B4E44;
  --footer:     #24140F;
  --ok:         #2F6B46;
  --warn:       #8A5A08;
  --alert:      #A33322;   /* not-included / no glyph */
  --vine:       #4A5D3F;   /* second accent kept as an alias so donor rules stay in-palette */
  --vine-soft:  #E4E8DE;
  --vine-deep:  #38492F;
  --band-vine:  #EDE9DE;   /* cool wash stop */
  --band-gold:  #FBE7D5;   /* warm wash stop */
  --focus:      #A82D22;   /* focus ring on light */
  --focus-inv:  #F0B896;   /* focus ring on the inverse band */

  /* ---- 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(60,26,14,.10), 0 14px 34px rgba(60,26,14,.13);
  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(--brand-deep);
  color: var(--ink);
}
.band-dark .rule-h2, .band-dark h2 { color: var(--ink); border-bottom-color: var(--brand); }
.band-dark p { color: var(--ink-soft); }
.band-dark a:not(.btn) { color: var(--link); }
.band-accent {
  --band-bg: linear-gradient(135deg, var(--brand-deep), var(--accent-deep));
  color: #fff;
}
.band-accent .rule-h2, .band-accent h2 { color: #fff; border-bottom-color: #fff; }
.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(221,228,214,.92); /* --paper at 92% */ 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:#fff; 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:#7A5410; }
@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(--accent-deep)); border:1px solid var(--brand-deep); color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:rgba(255,255,255,.82); max-width:52ch; margin-inline:auto; }

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

/* ---- FOOTER (the one deepest surface on the page, below the flooded-stage ground) ---- */
.site-footer { background:var(--footer); color:#E3CFC4; 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:#F7E9E0; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.site-footer h4, .site-footer .footer-h { font-family:var(--display); font-weight:700; font-size:var(--step-0); color:#fff; margin:0 0 var(--s2); }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:.4rem; }
.socials { display:flex; gap:.8rem; margin-top:var(--s3); }
.socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid #573429; border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:#D3B4A4; border-top:1px solid #573429; 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:#8A6A1E; color:#fff; text-decoration:none; }
.hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hotel-row .hr-name { font-weight:700; color:var(--ink); }
.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; }
.blog-cta h2 { margin-top:0; }
.blog-cta p { margin-bottom:var(--s3); }
.blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

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

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

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

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

/* ---- 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 "Vermillion Gate"). 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 #1a8f6b; }
.gw-picks .tp-card.gw a.btn-primary { background:#14795a; border-color:#14795a; }
.gw-picks .tp-card.gw a.btn-primary:hover { background:#0F6147; border-color:#0F6147; }
.gw-picks .tp-season { border-left:4px solid #1a8f6b; 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(58,90,64,.14); color:var(--sea); }
.glyph.no { background:rgba(107,31,44,.10); color:var(--brand); }
.glyph.opt { background:var(--gold-soft); color:var(--gold-ink); }
@media (max-width:768px){
  .matrix-table { border:0; border-radius:0; background:transparent; overflow:visible; }
  .matrix-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .matrix-table, .matrix-table tbody, .matrix-table tr, .matrix-table td { display:block; width:100%; }
  .matrix-table tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; }
  .matrix-table tbody tr:nth-child(even) > td { background:var(--surface); }
  .matrix-table td { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); text-align:right !important; padding:.55rem .9rem; border-bottom:1px solid var(--line); }
  .matrix-table td:last-child { border-bottom:0; }
  .matrix-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; text-align:left; flex:0 0 auto; }
  .matrix-table td:first-child { display:block; text-align:left !important; background:var(--paper-2); font-size:var(--step-0); }
  .matrix-table td:first-child::before { display:none; }
  .matrix-table small { display:inline; margin:0 0 0 .4rem; }
}

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

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

/* Wine cards */
.wine-grid { 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:#C97B84; }
.wine-card.is-sweet { border-top-color:var(--slate); }
.wine-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; }
.wine-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); }
.wine-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem .6rem; font-size:.84rem; }
.wine-card dt { font-weight:700; color:var(--ink-soft); }
.wine-card dd { margin:0; }
.wine-card p { margin:0; font-size:var(--step--1); }
.wine-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; }
@media (max-width:1000px){ .wine-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .wine-grid { grid-template-columns:1fr; } }

/* Spot map: live embed + hand-drawn pin schematic */
.spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; background:var(--paper-2); }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap > * { min-width:0; max-width:100%; }
@media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } .spot-map-wrap .map-embed { aspect-ratio:4/3; min-height:0; } }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s2); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-pin { cursor:pointer; }
.map-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease; }
.map-pin.is-city circle { fill:var(--ink); }
.map-pin text { fill:var(--ink); font-family:var(--display); font-size:11px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.map-pin:hover circle, .map-pin:focus circle { fill:var(--sea); r: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(--sea); border-color:var(--sea); color:#fff; }
.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, #24506a)); --dp-line: var(--line, #dfe3e6);
  --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #f5f6f7));
  --dp-ink: var(--ink, #1b1f23); --dp-soft: var(--ink-soft, #5b6570);
  background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:var(--radius, 10px);
  padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06)); }
.decision-picker .dp-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; }
.decision-picker .dp-q legend { font-family:var(--display, inherit); font-weight:800;
  font-size:var(--step-0, 1rem); color:var(--dp-ink); padding:0 0 .45rem; }
.decision-picker .dp-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.decision-picker .dp-opt { font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600;
  color:var(--dp-ink); background:var(--dp-surface); border:1.5px solid var(--dp-line); border-radius:999px;
  padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height: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(--dp-key); border-color:var(--dp-key); color:#fff; }
.decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; }
.decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); }
.decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px);
  background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); }
.decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line);
  border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); }
.decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.decision-picker .dp-card.dp-fold { display:none; }
/* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a
   card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */
.decision-picker .dp-card[hidden] { display:none !important; }

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

/* ============================================================
   SINGLE-PRODUCT BLOCKS (kyotonaradaytour.com)
   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); } }

/* ============================================================
   VERMILLION GATE 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(4,34,43,.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-line); 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(99,214,162,.16); color: var(--ok); }
.glyph.no  { background: rgba(245,140,123,.14); color: var(--alert); }
.glyph.opt { background: var(--gold-soft); color: var(--gold-ink); }
.month-strip li.is-event   { background: rgba(134,224,228,.14); border-color: var(--brand); }
.month-strip li.is-harvest { background: var(--gold-soft); border-color: var(--gold); }
.month-strip li.is-drying  { background: rgba(245,140,123,.12); 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-line); color-scheme: light; }
.explorer-check input { accent-color: var(--accent); }
.explorer-empty { border-color: var(--ctl-line); 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 deepest surface on the page */
.site-footer { background: var(--footer); color: #E3CFC4; border-top: 1px solid var(--inv-line); }
.site-footer a { color: #F7E9E0; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand b { color: var(--accent); }
.socials a { border-color: #573429; color: #E3CFC4; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.disclosure { color: #D3B4A4; border-top-color: #573429; }

/* 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 plate with a gold edge, never white-on-gold */
.cta-banner {
  background: linear-gradient(150deg, #3A2019 0%, #2A1712 62%, #351C12 100%);
  border: 1px solid var(--inv-line); border-top: 3px solid var(--brand); color: var(--inv-ink); }
.cta-banner h2, .cta-banner h3 { color: var(--inv-ink); }
.cta-banner p { color: var(--inv-soft); }
.cta-banner a:not(.btn) { color: var(--inv-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, #F1EDE1 0%, #EDE9DE 58%, #E9E7DC 100%); }
.band-tint-gold { --band-bg: linear-gradient(155deg, #FDEDDD 0%, #FBE7D5 58%, #F8DFCB 100%); }
.band-edged, .band-e, .band-dark {
  --band-bg: var(--deep);
  --band-edge: 1px solid rgba(168,45,34,.34);
}
.band-dark p { color: var(--ink-soft); }
.band-dark a:not(.btn) { color: var(--link); }
.band-stage { --band-bg: var(--paper); }

/* C , the warm-paper 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) and its
   OWN CTA fill (--inv-cta, white text), because the dark-band gold would be unreadable here. */
.band-inverse, .band-c, #decision-picker, #decision-picker-section, #what-you-see {
  --ink: #F7E9E0; --ink-soft: #D3B4A4;
  --paper: #2A1712; --paper-2: #3A2019;
  --surface: #402419; --surface-2: #331C16; --deep: #1E100C;
  --line: #573429; --line-soft: #46281F; --ctl-line: #6E4436; --star-track: #5A362A;
  --brand: #F0B896; --brand-fill: #C4482E; --brand-deep: #A63A24;
  --accent: #C4482E; --accent-deep: #A63A24; --accent-ink: #FFFFFF;
  --sea: #9DB08C; --sea-deep: #B9C9A9;
  --gold: #E9A176; --gold-soft: #4A2A1E; --gold-ink: #F3C9A9;
  --link: #F0B896; --focus: #F0B896;
  --ok: #7FC79E; --alert: #F09A86; --warn: #E9BE76; --slate: #B49A8E;
  --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.30);
  --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: #fff; }
.band-inverse img, .band-c img, #decision-picker img, #what-you-see img { background: var(--inv-2); }

/* The closing plate: warm gold gradient, dark ink, and a DARK button so the CTA still
   separates from its own band. Its link colour is the same dark ink, underlined. */
.band-cta, .band-accent, #closing-cta, #cta {
  --band-bg: linear-gradient(135deg, #C4482E 0%, #932117 100%);
  --ink: #FFF3EC; --ink-soft: #F6D9CB;
  --link: #FFF3EC; --focus: #FFF3EC;
  --surface: rgba(255,255,255,.16); --surface-2: rgba(255,255,255,.11);
  --line: rgba(255,243,236,.34); --ctl-line: rgba(255,243,236,.52);
  --accent: #2A1712; --accent-deep: #1E100C; --accent-ink: #FFFFFF;
  --brand-fill: #2A1712; --brand-deep: #1E100C; --brand: #2A1712;
  --gold: #F6D9CB; --gold-soft: rgba(255,255,255,.20); --gold-ink: #FFF3EC;
  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: #2A1712; color: #fff; }
.band-cta .btn-primary:hover, .band-accent .btn-primary:hover, #closing-cta .btn-primary:hover, #cta .btn-primary:hover {
  background: #1E100C; color: #fff; }
.band-cta .btn-ghost, .band-accent .btn-ghost, #closing-cta .btn-ghost, #cta .btn-ghost {
  color: var(--ink); border-color: rgba(255,243,236,.52); }
.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(168,45,34,.34);
}
#quick-comparison { --band-bg: linear-gradient(155deg, #F1EDE1 0%, #EDE9DE 58%, #E9E7DC 100%); }
#testimonials     { --band-bg: linear-gradient(155deg, #FDEDDD 0%, #FBE7D5 58%, #F8DFCB 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); }

/* ============================================================
   VERMILLION GATE 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(134,224,228,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(10,76,94,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(134,224,228,.07); }
.band-inverse table tbody tr:hover > td, #decision-picker table tbody tr:hover > td,
#what-you-see table tbody tr:hover > td { background: rgba(10,76,94,.06); }
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(3,24,31,0) 0%, rgba(3,24,31,.82) 100%); color: #fff; }

/* ---- 7. STICKY MOBILE BAR ------------------------------------------------------- */
.sticky-cta {
  background: rgba(7,42,52,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.sticky-cta .sc-proof { color: var(--ink); white-space: normal; line-height: 1.25; max-height: 2.6em; overflow: hidden; }
.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-line); 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(242,196,107,.20), rgba(242,196,107,0) 62%),
    radial-gradient(42% 56% at 78% 2%,  rgba(134,224,228,.16), rgba(134,224,228,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)
   DARK BANDS
     ink #F1F7F7      on paper #04222B 15.28 | lift #0A2F3A 13.09 | surface #0C3743 11.80
                      on surface-2 #123F4C 10.53 | deep #03181F 16.80 | wash #123236 12.63
     ink-soft #A9C4CB on paper 9.02 | lift 7.73 | surface 6.97 | surface-2 6.22 | deep 9.92 | wash 7.46
     link #F5CE7E     on paper 11.04 | lift 9.46 | surface 8.53 | deep 12.14 | wash 9.13
     brand #86E0E4    on paper 10.87 | lift 9.32 | surface 8.40
     gold #F2C46B     on paper 10.15 | lift 8.70 | surface 7.84
     CTA: ink #0A1F27 on accent #F0B32E 8.80 | on hover #D89A16 6.91
     btn-brand #fff   on brand-fill #1E5A6B 7.10 | on hover #164654 9.51
     badges: gold-ink #F7DDA6 on gold-soft #3B2E12 10.00
     glyphs: ok #63D6A2 on surface 7.10 | alert #F58C7B on surface 5.43 / surface-2 4.84
     chips: ink on surface-2 10.53 | active ink #0A1F27 on gold #F2C46B 10.41
     footer: body #B9D2D8 11.42 | heading #F1F7F7 16.68 | link #F5CE7E 12.05  (on #021920)
     sticky bar ink on #072A34 13.95
     non-text: ctl-line #5AA0B2 3.86-5.60 on the dark surfaces; star-track #4A8697 3.13-4.06
   INVERSE BAND (#decision-picker, #what-you-see, .band-inverse) , its OWN link and CTA
     ink #08262F on inv #F4EFE4 13.78 | card #FFFDF8 15.55 | head #E9E1D0 12.15 | zebra #EFE9DC 13.07
     soft #3C5A62 on inv 6.47 | card 7.30 | zebra 6.13 | head 5.70
     LINK #0A4C5E on inv 8.29 | card 9.35
     CTA #fff on inv-cta #9C5A06 5.41 | hover #834906 7.19 | btn-brand #fff on #0A4C5E 9.51
     eyebrow #8A5405 on inv 5.47 | stars #8A5405 on card 6.16
     ok #1B6B4A 5.64/6.36 | alert #A33418 5.98/6.75 | gold-ink #5A3A05 on #F0E2C4 8.02
   CLOSING GOLD PLATE (#closing-cta, .band-cta) , its OWN link and CTA
     ink #0A1F27 on gradient stops #F2B740 9.39 and #D9930F 6.57
     muted #33280A on the same stops 8.02 and 5.61
     CTA #fff on #0A2F3A 14.18 | hover #04222B 16.55
   Lowest text pair shipped anywhere: 4.84 (alert glyph on surface-2). AA floor is 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.
   ============================================================ */