/* ============================================================
   Victoria Peak Hong Kong - Phase D1 Design System (palette "Bauhinia Dusk")
   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 (#F4C0E9) drawn from the
   vermillion torii of Fushimi Inari and Kasuga Taisha, the ink is sumi brown (#241122), 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:        #23101F;   /* primary text on every light surface (12.5:1 on --paper) */
  --ink-soft:   #5A3E54;   /* secondary text                      (6.7:1 on --paper)  */

  /* grounds and surfaces (light) */
  --paper:      #F7D8F5;   /* page ground: persimmon / kaki */
  --paper-2:    #FCEDFB;   /* lifted band + table header tint */
  --surface:    #FDF1FA;   /* cards, panels */
  --surface-2:  #F8E1F3;   /* inputs, zebra rows, chips at rest */
  --deep:       #E8A6D9;   /* the edged band: deeper than the ground */
  --line:       #D995CA;   /* hairline borders on light */
  --line-soft:  #E7B2DB;   /* quieter divider inside a card */

  /* sumi-ink INVERSE band (light text on dark, its own link + CTA below) */
  --inv:        #2A1227;   /* inverse band ground: deep sumi brown */
  --inv-2:      #3A1936;   /* inverse table header tint */
  --inv-zebra:  #33162F;   /* inverse zebra row */
  --inv-card:   #401939;   /* card on the inverse band */
  --inv-line:   #572950;
  --inv-ink:    #F7E0F2;   /* text on the inverse band          (14.4:1) */
  --inv-soft:   #D3A4C9;   /* secondary text on inverse          (8.8:1) */
  --inv-link:   #F096DC;   /* INVERSE-BAND LINK                  (9.8:1) */
  --inv-cta:    #C42EB4;   /* INVERSE-BAND CTA fill, white text  (4.9:1) */
  --inv-cta-deep:#A62499;  /* its hover */
  --inv-eyebrow:#E976CF;   /* eyebrow / small caps on inverse    (8.0:1) */

  /* brand + accents */
  --brand:      #9C1F68;   /* torii vermillion: link-adjacent text, icons, rules (4.9:1) */
  --brand-fill: #A82272;   /* the same vermillion as a FILL (btn-brand, skip link), white 6.0:1 */
  --brand-deep: #7E1854;   /* its hover, white 8.7:1 */
  --accent:     #14494F;   /* temple moss / bamboo green as a FILL, white text 7.2:1 */
  --accent-deep:#0E353A;
  --accent-ink: #FFFFFF;
  --sea:        #3F5D5D;   /* alias kept so donor rules stay in-palette */
  --sea-deep:   #2F4949;
  --gold:       #125A61;   /* kincha: eyebrow / small caps on light (4.8:1) */
  --gold-soft:  #DCEEEF;
  --gold-ink:   #0B2E32;
  --link:       #93205F;   /* body links on light (5.5:1 on --paper, 7.2:1 on --surface) */
  --slate:      #6B4465;
  --footer:     #240F21;
  --ok:         #2F646B;
  --warn:       #8A0859;
  --alert:      #A32299;   /* not-included / no glyph */
  --vine:       #3F5D5D;   /* second accent kept as an alias so donor rules stay in-palette */
  --vine-soft:  #DEECEC;
  --vine-deep:  #2F4949;
  --band-vine:  #DEECEC;   /* cool wash stop */
  --band-gold:  #FBD5F1;   /* warm wash stop */
  --focus:      #9C1F68;   /* focus ring on light */
  --focus-inv:  #F096DC;   /* 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,14,53,.10), 0 14px 34px rgba(60,14,53,.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: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
@media (max-width: 344px) { .site-header .brand { font-size: .92rem; letter-spacing: -.01em; } }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
.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:#7A1051; }
@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:#E3C4DC; 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:#F7E0F2; 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 #572950; border-radius:50%; }
.socials a:hover { border-color:var(--gold); color:var(--gold); }
.disclosure { font-size:var(--step--1); color:#D3A4C9; border-top:1px solid #572950; 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:#8A1E5C; 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 (data 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:normal; overflow-wrap:anywhere; max-width:100%; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--sea); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

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

/* ---- GuruWalk free-tour cards (the gw_all / gw_picks / gw_pick tokens). Deliberately a
   different colour from the honey-gold paid CTA so a free third-party walk never reads as one of
   our own booked tours. ---- */
.gw-picks .tp-card.gw { border-top:4px solid var(--accent); }
.gw-picks .tp-card.gw a.btn-primary { background:var(--accent); border-color:var(--accent); }
.gw-picks .tp-card.gw a.btn-primary:hover { background:var(--accent-deep); border-color:var(--accent-deep); }
.gw-picks .tp-season { border-left:4px solid var(--accent); 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,87,90,.14); color:var(--sea); }
.glyph.no { background:rgba(103,31,107,.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,87,90,.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(103,31,107,.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:#C67BC9; }
.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 */
/* auto-fit, NOT a hard 1fr 1fr: this wrap has ONE child on this site (the schematic renders
   further down the section), and a fixed two-column grid left 562px of dead ground beside the
   embed at every width above 861px. auto-fit collapses to a single full-width column with one
   child and splits cleanly if a second is ever added. */
.spot-map-wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
/* The embed and the schematic plate below it are ONE design: same radius, same shadow, no
   competing hairline border, and matched heights so the section reads as a pair. */
.spot-map-wrap .map-embed { border:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; background:var(--paper-2);
  box-shadow:0 1px 2px rgba(44,30,40,.05), 0 8px 24px rgba(44,30,40,.07); }
/* Above the single-column breakpoint the embed must STRETCH, not sit at its aspect-ratio width.
   With aspect-ratio still driving the box it resolved to 666px inside a 1152px track and left
   485px of bare ground beside it: the same lopsided void the two-column grid used to make. */
@media (min-width: 621px) { .spot-map-wrap .map-embed { aspect-ratio: auto; height: 440px; } }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap > * { min-width:0; max-width:100%; }
/* The single-column collapse and the 4/3 aspect are SEPARATE concerns and must not share a
   breakpoint. Keeping aspect-ratio:4/3 up to 768px re-asserted it AFTER the 621px rule above
   (equal specificity, later wins), which pinned the embed to 533px inside a full-width track and
   put 56-203px of dead ground beside it in the 621-768 band. The aspect now stops at 620px,
   exactly where the height rule takes over. */
@media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } }
@media (max-width:620px){ .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 (victoriapeakhongkong.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: color-mix(in srgb, var(--paper) 93%, transparent); 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,199,214,.16); color: var(--ok); }
.glyph.no  { background: rgba(245,123,235,.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,123,235,.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: #E3C4DC; border-top: 1px solid var(--inv-line); }
.site-footer a { color: #F7E0F2; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand b { color: var(--accent); }
.socials a { border-color: #572950; color: #E3C4DC; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.disclosure { color: #D3A4C9; border-top-color: #572950; }

/* 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, #3A1936 0%, #2A1227 62%, #35122F 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, #F1E1EA 0%, #EDDEE6 58%, #E9DCE2 100%); }
.band-tint-gold { --band-bg: linear-gradient(155deg, #FDDDF3 0%, #FBD5F0 58%, #F8CBEC 100%); }
.band-edged, .band-e, .band-dark {
  --band-bg: var(--deep);
  --band-edge: 1px solid rgba(168,34,161,.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: #F7E0F2; --ink-soft: #D3A4C9;
  --paper: #2A1227; --paper-2: #3A1936;
  --surface: #401939; --surface-2: #33162F; --deep: #1E0C1C;
  --line: #572950; --line-soft: #461F41; --ctl-line: #6E3666; --star-track: #5A2A53;
  --brand: #F096DC; --brand-fill: #C42EB4; --brand-deep: #A62499;
  --accent: #C42EB4; --accent-deep: #A62499; --accent-ink: #FFFFFF;
  --sea: #8CB0B0; --sea-deep: #A9C9C9;
  --gold: #E976CF; --gold-soft: #4A1E43; --gold-ink: #F3A9E0;
  --link: #F096DC; --focus: #F096DC;
  --ok: #7FBEC7; --alert: #F086E4; --warn: #E976BE; --slate: #B48EAD;
  --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, #C42EB4 0%, #93178D 100%);
  --ink: #FFECFB; --ink-soft: #F6CBEE;
  --link: #FFECFB; --focus: #FFECFB;
  --surface: rgba(255,255,255,.16); --surface-2: rgba(255,255,255,.11);
  --line: rgba(255,236,251,.34); --ctl-line: rgba(255,236,251,.52);
  --accent: #2A1227; --accent-deep: #1E0C1C; --accent-ink: #FFFFFF;
  --brand-fill: #2A1227; --brand-deep: #1E0C1C; --brand: #2A1227;
  --gold: #F6CBEE; --gold-soft: rgba(255,255,255,.20); --gold-ink: #FFECFB;
  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: #2A1227; color: #fff; }
.band-cta .btn-primary:hover, .band-accent .btn-primary:hover, #closing-cta .btn-primary:hover, #cta .btn-primary:hover {
  background: #1E0C1C; color: #fff; }
.band-cta .btn-ghost, .band-accent .btn-ghost, #closing-cta .btn-ghost, #cta .btn-ghost {
  color: var(--ink); border-color: rgba(255,236,251,.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,34,161,.34);
}
#quick-comparison { --band-bg: linear-gradient(155deg, #F1E1EA 0%, #EDDEE6 58%, #E9DCE2 100%); }
#testimonials     { --band-bg: linear-gradient(155deg, #FDDDF3 0%, #FBD5F0 58%, #F8CBEC 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 ------------------------------------------------------- */
/* The sticky bar is a DELIBERATE inverse surface, built from the palette's own inverse tokens.
   It previously carried a hand-typed donor RGB (a dark teal) while its text stayed var(--ink),
   which is near-black: dark text on a dark bar, unreadable. A hue rotation over the stylesheet
   could not catch it because the value was an rgba() literal, not a hex, and its hue already sat
   in the "cool, leave alone" band. Tokens only from here on. */
.sticky-cta {
  background: color-mix(in srgb, var(--inv) 97%, transparent); border-top: 1px solid var(--inv-line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.sticky-cta .sc-proof { color: var(--inv-ink); white-space: normal; line-height: 1.25; max-height: 2.6em; overflow: hidden; }
.sticky-cta .sc-proof .gold { color: var(--inv-eyebrow); }
.sticky-cta .btn-primary { background: var(--brand-fill); color: #fff; border-color: var(--brand-fill); }
.sticky-cta .btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
@media (min-width: 761px) { .sticky-cta { border: 1px solid var(--inv-line); } }
@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,107,189,.20), rgba(242,107,189,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 #F57EC5     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 #F26BBD     on paper 10.15 | lift 8.70 | surface 7.84
     CTA: ink #0A1F27 on accent #F02EA0 8.80 | on hover #D81689 6.91
     btn-brand #fff   on brand-fill #1E5A6B 7.10 | on hover #164654 9.51
     badges: gold-ink #F7A6D6 on gold-soft #3B122A 10.00
     glyphs: ok #63C7D6 on surface 7.10 | alert #F57BEB on surface 5.43 / surface-2 4.84
     chips: ink on surface-2 10.53 | active ink #0A1F27 on gold #F26BBD 10.41
     footer: body #B9D2D8 11.42 | heading #F1F7F7 16.68 | link #F57EC5 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 #F4E4ED 13.78 | card #FFF8FC 15.55 | head #E9D0DF 12.15 | zebra #EFDCE7 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 #9C066A 5.41 | hover #83065B 7.19 | btn-brand #fff on #0A4C5E 9.51
     eyebrow #8A055B on inv 5.47 | stars #8A055B on card 6.16
     ok #1B606B 5.64/6.36 | alert #A31892 5.98/6.75 | gold-ink #5A053A on #F0C4DE 8.02
   CLOSING GOLD PLATE (#closing-cta, .band-cta) , its OWN link and CTA
     ink #0A1F27 on gradient stops #F240AB 9.39 and #D90F8A 6.57
     muted #330A21 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.
   ============================================================ */

/* ---- Closure notice (src/data/closures.json -> {{ closure_notice }}) -------------------
   Dated operator notices only, self-expiring: an entry renders while today is on or before
   its `to` date and then removes itself. Uses the teal accent family so it reads as
   information rather than as a brand CTA, and stacks its entries on narrow screens. */
.closure-notice-wrap { padding-top: 0; }
.closure-notice-wrap { display: grid; gap: var(--s3); }
.closure-notice { background: var(--gold-soft); border: 1px solid var(--gold); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: var(--s3) var(--s4); color: var(--gold-ink); }
.closure-notice p { margin: 0 0 .4rem; max-width: none; }
.closure-notice p:last-child { margin-bottom: 0; }
.closure-notice .cn-head { font-weight: 700; }

/* ---- Stop map: styled as a cartographic figure (2026-09-10) ---------------------------------
   Oleg: "now it looks like a map but the css styling is a bit off, make it visually nice".

   The core styling error was using the SITE surface (--surface, a pink white) as the land ground.
   A map's ground is the reference every other colour is judged against: over pink, the sage green
   went muddy, the water read grey, and plum-tinted roads looked like stains rather than streets.
   So the map gets its OWN small palette: a warm paper ground, muted natural tones for land and
   water, neutral warm greys for the street hierarchy, and the brand magenta spent on exactly one
   thing, the tram line and the pins. That is also the cartographic convention: everything recedes
   except the subject.

   Kept deliberately: the six-slot pin series (validated for separation and white numerals), the
   scroll mask on the visible box, the legend outside the scroller, and the honest furniture. */
:root {
  /* Pin series: six genuinely separated hues. Closest pair is 44 RGB units apart; the earlier
     version reused --accent/--gold and --brand-fill/--brand-deep and produced two teals and two
     plums, so the legend matched its pins exactly and still told the reader nothing. */
  --map-1: #A82272;  /* magenta, the brand */
  --map-2: #14494F;  /* deep harbour teal */
  --map-3: #8A5A08;  /* ochre */
  --map-4: #43307E;  /* indigo */
  --map-5: #2F6B46;  /* green */
  --map-6: #8E2F2F;  /* brick */

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

/* ---- The figure itself ---- */
.stp-map { width:100%; height:auto; display:block; }
.stp-frame { fill:var(--mp-land); stroke:var(--mp-edge); stroke-width:1.25; }
.stp-grid line { stroke:var(--mp-grid); stroke-width:1; }
.stp-leader line { stroke:var(--mp-ink); stroke-width:1; opacity:.45; stroke-dasharray:2 2; }

/* ---- Basemap, real OSM geometry. Weight order runs lightest to heaviest so the eye lands on the
   tram line last and stays there: water, green, trails, lanes, streets, coast, funicular. ---- */
.bm-water path { fill:var(--mp-water); stroke:none; }
.bm-green path { fill:var(--mp-green); stroke:none; }
.bm-trail path { fill:none; stroke:var(--mp-trail); stroke-width:.85; opacity:.55; stroke-dasharray:3.5 3; stroke-linecap:round; }
.bm-lane path { fill:none; stroke:var(--mp-road); stroke-width:.9; opacity:.55; }
.bm-road-minor path { fill:none; stroke:var(--mp-road); stroke-width:1.3; opacity:.85; }
.bm-road-major path { fill:none; stroke:var(--mp-road-mj); stroke-width:2.2; opacity:.95; stroke-linecap:round; }
.bm-coast path { fill:none; stroke:var(--mp-coast); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* The funicular is the subject. A pale casing under it is the standard way to lift a route line
   off a busy street network without thickening it. */
.bm-funicular path { fill:none; stroke:var(--map-1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95)); }
.bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; }

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

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

/* ---- Container: the map reads as a card, like every other block on the page ---- */
.stp-wrap { position:relative; margin-top:var(--s3); }
.ix .ix-map, .ix-map { border-radius:var(--radius); background:var(--mp-land);
  box-shadow:0 1px 2px rgba(44,30,40,.05), 0 8px 24px rgba(44,30,40,.07); }

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

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

/* ---- Dark theme: the map keeps its own ground, darkened, so it never becomes a glowing white
   slab on a dark page and the natural tones stay believable. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-land:    #2A2028;
    --mp-water:   #24404B;
    --mp-coast:   #4E7C8A;
    --mp-green:   #2B4034;
    --mp-grid:    #372B34;
    --mp-edge:    #3E2F3A;
    --mp-road:    #6B5A66;
    --mp-road-mj: #8B7885;
    --mp-trail:   #7E6A4C;
    --mp-ink:     #D8C6D2;
  }
  :root:not([data-theme="light"]) .stp-lbl-home { fill:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-home circle:first-child { stroke:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-home-dot { fill:#F7E0F2; }
  :root:not([data-theme="light"]) .stp-pin:hover .stp-dot { stroke:#F7E0F2; }
}
:root[data-theme="dark"] {
  --mp-land:    #2A2028;
  --mp-water:   #24404B;
  --mp-coast:   #4E7C8A;
  --mp-green:   #2B4034;
  --mp-grid:    #372B34;
  --mp-edge:    #3E2F3A;
  --mp-road:    #6B5A66;
  --mp-road-mj: #8B7885;
  --mp-trail:   #7E6A4C;
  --mp-ink:     #D8C6D2;
}
:root[data-theme="dark"] .stp-lbl-home { fill:#F7E0F2; }
:root[data-theme="dark"] .stp-home circle:first-child { stroke:#F7E0F2; }
:root[data-theme="dark"] .stp-home-dot { fill:#F7E0F2; }
:root[data-theme="dark"] .stp-pin:hover .stp-dot { stroke:#F7E0F2; }