/* ============================================================
   Free Things To Do In Manchester - Phase 3 Design System.
   IDENTITY: "Basalt + Glacier Blue" (approved by Oleg 2026-09-10).
   Ground: pale glacial ash, the washed-out light this city sits under for most of the year.
   Dominant colour: deep basalt blue, used structurally (links, fills, nav, footer, section
   rules). Glacier teal is the CTA fill carrying white text and NOTHING else, so the one
   teal thing on a screen is always the thing to click. The only secondary hue is mid glacier
   blue,
   a sibling of the brand rather than a second family. Warm amber-brown carries real ratings
   and nothing louder. Soft 10px radii, hairline rules under headings. Mobile-first, zero
   heavy deps, system fonts.
   Collision check across the portfolio: --brand #1D4E68, --accent #0E7490 and
   --paper #EFF3F6 are used by no sibling site (verified 2026-09-10).
   basil green, bestrestaurantsinrome.org is brick-ochre and cypress green. Nothing in this
   sheet is green, and no warm tone is used as an ochre-brick ground.
   ------------------------------------------------------------
   CONTRAST - WCAG 2.1 relative luminance, computed with a script, not eyeballed.
   Bar: text >= 4.5:1, large text and UI boundaries (borders, hairlines, focus rings) >= 3:1.
   Every pair below passes its own bar.

     --ink on --paper                          15.07:1  (min 4.5)  body text on page ground
     --ink-soft on --paper                     6.36:1  (min 4.5)  secondary text on page ground
     --brand on --paper                        8.04:1  (min 4.5)  links on page ground
     --sea on --paper                          5.18:1  (min 4.5)  section rules / icons / hovers
     --slate on --paper                        5.22:1  (min 4.5)  tertiary text
     --gold on --paper                         5.94:1  (min 4.5)  ratings text
     --ok on --paper                           5.79:1  (min 4.5)  availability confirm text
     --warn on --paper                         6.08:1  (min 4.5)  caution text
     --ink on --paper-2                        12.94:1  (min 4.5)  text on raised panel
     --brand on --paper-2                      6.90:1  (min 4.5)  links on raised panel
     --ink on --surface                        16.82:1  (min 4.5)  text on card
     --brand on --surface                      8.97:1  (min 4.5)  links on card
     --gold on --surface                       6.63:1  (min 4.5)  ratings on card
     --ink on --surface-2                      16.04:1  (min 4.5)  text in inputs
     --accent-ink on --accent                  5.36:1  (min 4.5)  white on CTA fill
     --accent-ink on --accent-deep             7.75:1  (min 4.5)  white on CTA hover
     #ffffff on --brand                      12.31:1  (min 4.5)  white on brand fill (.btn-brand)
     #ffffff on --brand-deep                 15.50:1  (min 4.5)  white on brand hover
     #ffffff on --footer                     18.11:1  (min 4.5)  white on footer
     --footer-ink on --footer                  11.65:1  (min 4.5)  footer body text
     --footer-link on --footer                 10.24:1  (min 4.5)  footer links
     --footer-line on --footer                 1.46:1  (min 3)  footer hairline (UI boundary)
     --gold-ink on --gold-soft                 11.51:1  (min 4.5)  badge text on rating wash
     #ffffff on --gold-fill                   5.85:1  (min 4.5)  white on hotel CTA
     #ffffff on --gold-deep                   7.88:1  (min 4.5)  white on hotel CTA hover
     --line on --paper                         3.74:1  (min 3)  hairline / input border on ground
     --line on --paper-2                       3.21:1  (min 3)  hairline on raised panel
     --line on --surface                       4.17:1  (min 3)  card + input border on white
     --line on --surface-2                     3.98:1  (min 3)  input border on pale ground
     --line on --band-wash                     3.52:1  (min 3)  hairline on wash band
     --ink on --band-wash                      14.18:1  (min 4.5)  body text on wash band
     --brand on --band-wash                    7.56:1  (min 4.5)  links on wash band
     --ink-soft on --band-wash                 5.98:1  (min 4.5)  muted text on wash band
     --inverse-head on --inverse-bg            17.54:1  (min 4.5)  headings on inverse band
     --inverse-ink on --inverse-bg             12.90:1  (min 4.5)  body text on inverse band
     --inverse-link on --inverse-bg            10.24:1  (min 4.5)  links on inverse band
     --inverse-muted on --inverse-bg           7.21:1  (min 4.5)  muted text on inverse band
     --inverse-line on --inverse-bg            1.46:1  (min 3)  hairline on inverse band
     --gold-lift on --inverse-bg               9.05:1  (min 4.5)  ratings on inverse band
     --accent-ink on --accent                  5.36:1  (min 4.5)  white on CTA inside inverse band
     --inverse-head on --inverse-surface       15.71:1  (min 4.5)  card headings on inverse band
     --inverse-ink on --inverse-surface        11.55:1  (min 4.5)  card text on inverse band
     --inverse-link on --inverse-surface       9.17:1  (min 4.5)  card links on inverse band
     --inverse-muted on --inverse-surface      6.46:1  (min 4.5)  card muted text on inverse band
     --inverse-line on --inverse-surface       1.31:1  (min 3)  card border on inverse band
     --inverse-head on --inverse-surface-2     14.02:1  (min 4.5)  table head text on inverse band
     --gold-soft on --gold-ink                 11.51:1  (min 4.5)  rating badge inverted inside inverse band
     #ffffff on --gold-fill                   5.85:1  (min 4.5)  hotel CTA fill inside inverse band (--gold-fill never remaps)
     --gold-lift on --footer                   9.05:1  (min 4.5)  hero/footer amber proof on dark
     #ffffff on --sea-deep                   11.42:1  (min 4.5)  white on the CTA banner gradient (start)
     #ffffff on --inverse-bg                 17.21:1  (min 4.5)  white on the CTA banner gradient (end)
     --gold on --paper-2                       5.10:1  (min 4.5)  stat numbers on the trust strip
     --inverse-muted on --footer               7.21:1  (min 4.5)  footer disclosure text
     --gold on --gold-soft                     5.50:1  (min 3)  rating badge border on its own wash
   ============================================================ */
/* ACCENT DISCIPLINE (approved palette rule, Oleg 2026-09-09): --accent #C2551B is the CTA
   fill with white text and NOTHING else. It measures 3.88:1 as text on --paper, which fails
   AA, and using it for rules and markers dilutes the one thing on the page that should read
   as clickable. Five decorative left/top rules and one timeline marker were retargeted to
   --sea (mid glacier blue). The only remaining var(--accent) uses are .btn-primary on light and
   .btn-primary inside the inverse band. */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Red Brick + Mill Slate" (site.config.md, Oleg 2026-09-23). Warm Victorian
     red-brick accent, slate-grey ink, soft stone paper. Bracketed figures are MEASURED WCAG
     contrast ratios (relative luminance formula), computed and checked before this file was
     written, not estimated: never edit a hex here without recomputing. Collision-checked
     against every freethingstodoin*.com sibling: Edinburgh/Rome run aubergine + burnt orange,
     Paris runs Wallace-fountain green, Reykjavik runs basalt blue + glacier teal. Mill slate is
     a desaturated cool grey (15% sat) versus Reykjavik's saturated basalt blue (56% sat), and
     red-brick's hue (11 deg) sits visibly apart from Edinburgh/Rome's burnt orange (29 deg). ---- */
  --ink:        #2A2D30;   /* primary text: slate near-black (11.79:1 on --paper) */
  --ink-soft:   #585C60;   /* secondary text: mid slate-grey (5.74:1 on --paper) */
  --paper:      #F2ECE3;   /* page ground: soft stone paper */
  --paper-2:    #E6DBC9;   /* raised panels (info blocks, table headers): deeper stone */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #FAF6EF;   /* inputs: palest stone */
  --line:       #697479;   /* hairline AND input/card borders (3.74:1 on --paper, 4.39:1 on white): real UI boundaries, so a real 3:1, not a wisp */
  --brand:      #3E4A54;   /* mill slate: links, structural fills, nav, DOMINANT (7.73:1 on --paper) */
  --brand-deep: #2A333B;   /* darker slate: btn-brand hover (white 12.84:1) */
  --accent:     #A03E28;   /* red brick - CTA FILL WITH WHITE TEXT ONLY. Never body text, never a rule, never
                              a glyph, never a border. Not a contrast limit (as text it measures 5.56:1 on
                              --paper and passes AA) but a design rule: one brick-red thing per screen, so
                              the brick-red thing is always the thing to click. (white 6.53:1) */
  --accent-deep:#84331F;   /* deeper red brick: CTA hover (white 8.49:1) */
  --accent-ink: #FFFFFF;   /* the only text colour allowed on --accent */
  --sea:        #57666F;   /* mid mill slate, a SIBLING of --brand and not a second hue: section rules, icons, hovers, quote and card edges (5.06:1 on --paper) */
  --sea-deep:   #3F4C54;   /* deeper mill slate: hover/active, CTA banner gradient (white 8.85:1) */
  --gold:       #7A5613;   /* warm amber-brown, the one warm note distinct from the brick accent: real ratings only (5.64:1 on --paper, 4.84:1 on --paper-2) */
  --gold-fill:  #8A6218;   /* amber FILL that always carries white text (hotel CTA) (white 5.47:1) */
  --gold-deep:  #6B4B12;   /* amber fill hover (white 7.95:1) */
  --gold-lift:  #E0B457;   /* the amber that survives a dark ground (8.47:1 on --inverse-bg) */
  --gold-soft:  #F4E9D2;   /* amber wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #3A2A08;   /* the dark text that sits on --gold-soft (11.51:1) */
  --slate:      #5B646B;   /* tertiary text (5.14:1 on --paper) */
  --footer:     #1B2024;   /* near-black slate: footer fill, deepest band (white 16.42:1) */
  --footer-ink: #CDD3D6;   /* footer body text (10.86:1 on --footer) */
  --footer-link:#E3A98F;   /* footer links, a warm brick-tinted tan (8.08:1 on --footer) */
  --footer-line:#707A80;   /* footer hairlines, a real boundary on dark (3.74:1) */
  --ok:         #1B6B4A;   /* availability confirm text (5.50:1 on --paper) */
  --warn:       #8A4B12;   /* caution text (5.78:1 on --paper) */

  /* ---- INVERSE BAND (rule 37, treatment 3). Slate text on a slate ground would be
     invisible, so the dark band gets its own full set: heading, body, link, muted, hairline
     and two card surfaces. The band remaps the light tokens onto these, which is why the
     cards, tables and chips inside it need almost no rules of their own. ---- */
  --inverse-bg:        #1B2024; /* dark slate ground */
  --inverse-head:      #FFFFFF; /* headings (16.42:1) */
  --inverse-ink:       #D8DCDE; /* body text (11.90:1) */
  --inverse-link:      #E3A98F; /* brick-tinted tan that reads on the dark band (8.08:1) */
  --inverse-muted:     #A3AAAF; /* muted/secondary text (6.98:1) */
  --inverse-line:      #707A80; /* hairlines and card borders (3.74:1 on the band, 3.39:1 on a card) */
  --inverse-surface:   #22282D; /* cards inside the band */
  --inverse-surface-2: #292F35; /* table headers, media placeholders, inputs */
  --inverse-badge-bg:  #2C333A; /* rating badge flips: dark amber ground ... */
  --inverse-badge-ink: #E9DACE; /* ... with the pale wash as its text (9.37:1) */
  --band-wash:         #E9E2D6; /* brand-tinted wash for the rule-37 section rhythm (10.76:1 for --ink) */

  /* ---- 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. --step--2 is a FLOOR, not a step: 12px is the smallest type this site is
     allowed to render anywhere (chips, micro-labels, table captions, attribution lines). Recheck
     round 3 lens 3 found 25 nodes between 10.88px and 11.84px at 390px; every one of them now
     resolves through this token, so the floor cannot drift back down rule by rule. */
  --step--2: .75rem;
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* soft round: whitewash curves, not hard-edged brochure */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(26,36,32,.05), 0 10px 28px rgba(26,36,32,.08);
}

/* ---- DARK-MODE PALETTE, "Red Brick + Mill Slate" (added 2026-09-23). Ratios below are
   measured, not estimated. The accent cannot keep one hex for both jobs in dark mode: a red
   dark enough to carry white CTA text reads with almost no contrast against a near-black page,
   and a red light enough to read as text against that same dark page is too pale to carry white
   text. So dark mode uses a brighter terracotta (--accent) with DARK brick-ink text on top
   (--accent-ink flips to a near-black brick tone here), which still measures >= 4.5:1 both as
   text against --paper and as the CTA-fill/text pair. Guarded per the artifact dark-mode
   contract: first the prefers-color-scheme query (respects the OS/browser setting unless the
   page has been explicitly pinned to light), then the explicit [data-theme="dark"] override
   (for a future manual toggle), both carrying the identical value set. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #E7E2D9;   /* primary text: warm stone-white (12.54:1 on --paper) */
    --ink-soft:   #B7BEC3;   /* secondary text (8.60:1 on --paper) */
    --paper:      #1E2124;   /* page ground: near-black slate */
    --paper-2:    #262B2F;   /* raised panels: lighter slate */
    --surface:    #262B2F;   /* cards */
    --surface-2:  #2E343A;   /* inputs */
    --line:       #828B91;   /* hairline AND input/card borders (4.66:1 on --paper, 4.12:1 on --surface) */
    --brand:      #A7B4BC;   /* pale mill slate: links, structural fills, nav (7.62:1 on --paper) */
    --brand-deep: #C7D1D7;   /* lighter still: btn-brand hover state on dark */
    --accent:     #E08064;   /* bright terracotta - CTA FILL, carries DARK text here, not white (5.73:1 on --paper as text too) */
    --accent-deep:#EAA08A;   /* brighter terracotta: CTA hover (accent-ink 8.54:1 on it) */
    --accent-ink: #2A0D06;   /* near-black brick text: the only text colour on --accent in dark mode (6.42:1 on --accent) */
    --sea:        #94A3AC;   /* pale mill slate sibling of --brand for dark mode */
    --sea-deep:   #B0BDC4;   /* hover/active on dark */
    --gold:       #D9A94F;   /* warm amber that survives dark: ratings only (7.50:1 on --paper) */
    --gold-fill:  #D9A94F;
    --gold-deep:  #E8BE72;
    --gold-lift:  #E0B457;
    --gold-soft:  #3A2E14;   /* amber wash, dark mode: LIGHT text on top */
    --gold-ink:   #F4E9D2;   /* the light text that sits on --gold-soft in dark mode */
    --slate:      #B7BEC3;   /* tertiary text */
    --footer:     #141719;   /* deepest band, darker still than --paper */
    --footer-ink: #CDD3D6;
    --footer-link:#E3A98F;
    --footer-line:#4A5257;
    --ok:         #4FAE83;   /* availability confirm text, brightened for dark */
    --warn:       #D9A94F;   /* caution text, brightened for dark */
  }
}
:root[data-theme="dark"] {
  --ink:        #E7E2D9;
  --ink-soft:   #B7BEC3;
  --paper:      #1E2124;
  --paper-2:    #262B2F;
  --surface:    #262B2F;
  --surface-2:  #2E343A;
  --line:       #828B91;
  --brand:      #A7B4BC;
  --brand-deep: #C7D1D7;
  --accent:     #E08064;
  --accent-deep:#EAA08A;
  --accent-ink: #2A0D06;
  --sea:        #94A3AC;
  --sea-deep:   #B0BDC4;
  --gold:       #D9A94F;
  --gold-fill:  #D9A94F;
  --gold-deep:  #E8BE72;
  --gold-lift:  #E0B457;
  --gold-soft:  #3A2E14;
  --gold-ink:   #F4E9D2;
  --slate:      #B7BEC3;
  --footer:     #141719;
  --footer-ink: #CDD3D6;
  --footer-link:#E3A98F;
  --footer-line:#4A5257;
  --ok:         #4FAE83;
  --warn:       #D9A94F;
}

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

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

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

/* ---- HEADER / NAV ---- */
.site-header { position: sticky; top:0; z-index:40; background: rgba(242,236,225,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
@media (max-width: 430px) { .site-header .brand { font-size: 1.1rem; letter-spacing: -.015em; } }
@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; }
/* The brand is a flex row (logo + name). The NAME MUST BE ITS OWN FLEX ITEM: with the words
   sitting as loose flex children, "Free Things To Do In" wrapped inside its anonymous item and
   the <b> was a separate item, so 390px got an orphan "In" line with the blue city word pushed
   up beside the menu button (recheck round 3, lens 3). Inside .brand-name the &nbsp; keeps
   "In Manchester" together, and the phone ramp below fits the whole name on one line at 390. */
.brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
.brand-name { display:inline-block; }
.brand-logo { width:28px; height:28px; border-radius:7px; display:block; }
.brand b { color: var(--brand); }
.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); white-space:nowrap; }
.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: 920px) {
  .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; }
  /* drawer rows are tap targets: as bare inline links they measured 16px high, under the 40px
     floor this stylesheet claims for every control. The pill CTA already carries its own 48px. */
  .nav-links a:not(.btn) { display:flex; align-items:center; min-height:44px; }
}

/* ---- 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 (the first screen: one full-bleed photograph with the
        headline overlaid on it, white text over a dark scrim) ---- */
.hero-full {
  min-height: 88svh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  color: #fff;
  border-bottom: 3px solid var(--sea);
}
.hero-full-inner { padding-block: var(--s7) var(--s6); }
.hero-full h1 { color: #fff; max-width: 21ch; }
.hero-full .lede { color: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); }
.hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); }
.hero-full .author-hook a { color: #fff; }
.hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); }
.hero-full-ghost:hover { border-color:#fff; }
.hero-full .cta-proof { color: rgba(255,255,255,.92); }
.hero-full .cta-proof .gold { color:var(--gold-lift); }
@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(--sea); 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:var(--step--2); 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:var(--step--2); 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(--warn); 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(--sea); 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(--warn); }
@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); }
/* Article Q&A accordions ship as bare <details> inside .prose, so the summary carried no padding
   at all and measured 26.6px high: below the 40px tap target on a phone. */
.prose details > summary { padding-block:.55rem; cursor:pointer; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; float:right; color:var(--brand); 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). Count-aware modifiers (rule 30, launch-site SKILL v2.4
   addenda #30 / 04-block-library.md > 4.5c.A): a 2-leftover or 1-leftover remainder after a
   lead row sits 2-up or capped-single rather than stretching a 3-column track. Breakpoints:
   3-up above 1040px, 2-up 761-1040px, 1-up below 761px with the horizontal image-left card
   as the phone fallback (Tour/Product Card rule, 04-block-library.md, unchanged). */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); }
/* A lone card is centred rather than parked at the left of an empty row: at 768 the /guides/
   walks card filled 420 of 736px and the empty right half read as a layout fault (recheck
   round 3, lens 3). Same count-aware treatment the walk band already uses (.tp-grid.tp-n1). */
.cards-3.cards-n1 { grid-template-columns:minmax(0,1fr); max-width:420px; margin-inline:auto; }
.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:1040px){
  .cards-3, .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); }
  /* in the 2-up band a single card takes the wider measure, so the row does not read half-empty */
  .cards-3.cards-n1 { max-width:min(100%, 34rem); }
}
@media (max-width:760px){
  .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns:1fr; max-width:none; }
  .cards-3 .rcard { flex-direction:row; }
  .cards-3 .rcard .rc-media { width:38%; flex:none; aspect-ratio:1/1; }
  .cards-3 .rcard .rc-body { padding:var(--s3); gap:.5rem; }
  .cards-3 .rcard .rc-body .btn { min-height:44px; display:flex; align-items:center; justify-content:center; }
}

/* 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:var(--step--2); 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(--brand); 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:var(--step--2); text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:999px; box-shadow:var(--shadow); }
.cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow); }

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

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

/* ---- FOOTER (the one deepest surface, near-black basalt band) ---- */
.site-footer { background:var(--footer); color:var(--footer-ink); margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:var(--footer-link); 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 var(--footer-line); border-radius:50%; }
.socials a:hover { border-color:var(--gold-lift); color:var(--gold-lift); }
.disclosure { font-size:var(--step--1); color:var(--inverse-muted); border-top:1px solid var(--footer-line); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--sea); color:var(--ink-soft); font-style:italic; }
.prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); }
.prose tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table { min-width: 640px; }
}
/* links in prose run basalt blue (8.04:1). Glacier teal as text measures 4.80:1 and would
   technically pass AA, but it is still banned as text by design,
   and orange is reserved for the CTA fill in any case. */
.prose a { color:var(--brand); }
/* 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 primary walk tour buttons. Explicit colors
   defeat the .prose a override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold-fill); color:#fff; background:var(--gold-fill); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold-deep); 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); }
/* ---- RELATED ARTICLES ------------------------------------------------------------------
   Editorial navigation, never a conversion surface. It closes the article layer's inbound-link
   floor structurally (see build/gen-related-articles.mjs) and sits between the article body and
   the closing CTA, so the two commercial surfaces on an article are never neighbours. It must
   not read as a third CTA, so it carries no button, no image, no --accent and no card shadow:
   a plain list of siblings on a wash ground.
   Rule 37: the wash is a different treatment from the ash page ground the prose sits on and
   from the tint / inverse panel of the CTA below, so no two adjacent surfaces share a colour. */
.related-articles { background:var(--band-wash); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s5) 0 0; }
.related-articles .ra-h { font-family:inherit; font-size:1rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 var(--s3); }
.related-articles ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.related-articles li { display:grid; gap:.2rem; padding-left:.9rem; border-left:2px solid var(--sea); }
.related-articles a { font-weight:700; text-decoration:none; }
.related-articles a:hover { text-decoration:underline; }
.related-articles .ra-note { color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
@media (min-width:760px) { .related-articles ul { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); } }

.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--sea); 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 (rendered 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(--sea);
  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);
    /* the pill must never grow past the viewport: at 768 the proof line pushed it 12px off the
       left edge (recheck round 1, lens 3 mech: CTA/button sits off-screen) */
    max-width:calc(100vw - 2.4rem);
    /* HIDDEN STATE: translateY(110%) only clears the pill's own height, so the 1.2rem bottom
       offset left a ~13px sliver of white pill and the tops of its letters parked over the page
       at 768 (recheck round 3, lens 3 HIGH on /guides/). Move it by its height plus the offset
       plus the shadow, so nothing shows until .visible brings it back to translateY(0). */
    transform:translateY(calc(100% + 3rem)); }
  /* 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 GuruWalk/Tripadvisor reviews, verbatim) ---- */
.reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.review-card .stars { font-size:.95rem; }
.review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; }
.review-card blockquote p { max-width:none; margin:0; }
.review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); }
.review-meta strong { color:var(--ink); }
@media (max-width:760px){ .reviews{ grid-template-columns:1fr; } }

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

/* ============================================================
   SITE-SPECIFIC LAYER , "Arctic Rust" additions for svalbardtours.org
   ============================================================ */

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

/* ---- Editorial hairline under section headings (the industrial detail) ---- */
.section > h2:first-child, .rule-h2 { padding-bottom: max(var(--s2), .3em); border-bottom: 2px solid var(--sea);
  border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--sea) 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:var(--step--2);
  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(--sea);
  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; }

/* ---- AUTHOR BIO (the named writer, on /about/) ---- */
.author-bio { display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:var(--s4) var(--s5);
  align-items:start; margin:var(--s4) 0 0; }
.author-bio-photo { margin:0; }
.author-bio-photo img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line); display:block; }
.author-bio-text p:last-child { margin-bottom:0; }
@media (max-width:640px){ .author-bio { grid-template-columns:1fr; }
  .author-bio-photo { max-width:320px; } }

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

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org
   2026-08-15 and re-tokened for "Arctic Rust"). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--sea); 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:var(--step--2); font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--sea); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:var(--step--2); 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; }
/* ---- count-aware card grids ---------------------------------------------------------------
   The walk band on this site is TWO cards (the third listing is Spanish-only), and an
   attraction solo tile is one. Both would sit in a three-column grid with a hole beside them. */
@media (min-width:700px) {
  .tour-picks .tp-grid.tp-n2 { grid-template-columns:repeat(2,1fr); max-width:46rem; margin-inline:auto; }
  .tour-picks .tp-grid.tp-n1 { grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
}

/* ---- attraction cards -----------------------------------------------------------------------
   Same card shell as the walk cards (.tour-picks / .tp-card), so the two surfaces cannot drift.
   What differs is what the data forces: no rating, no affiliate button, and a status chip plus
   the record's own verified free_scope / paid_parts text, which is never truncated because the
   condition IS the claim. */
.attraction-picks .ac-card .tp-body { gap:.4rem; }
.attraction-picks .ac-why { margin:0; font-size:var(--step--1); color:var(--ink); }
.attraction-picks .ac-note { margin:0; font-size:.78rem; line-height:1.5; color:var(--ink-soft); }
.attraction-picks .ac-note .ac-label {
  display:block; font-weight:700; font-size:var(--step--2); letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.85;
}
.attraction-picks .ac-cost .ac-label { color:var(--ink); }
.pc-chip-cond { background:transparent; color:var(--brand); border-color:var(--brand); }
.pc-chip-paid { background:var(--paper-2); color:var(--ink); border-color:var(--ink-soft); }

/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

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


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

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

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

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.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; }
/* Tour page second line (Oleg 2026-09-05): the operator's own platform title sits directly under
   the decision-name H1 so the click-through still matches the walk it opens. Body scale, muted, never
   heading-scale (rule 31). */
.booking-panel h1:has(+ .tour-official) { margin-bottom: .3rem; }
.booking-panel .tour-official { margin: 0 0 var(--s2); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.35; max-width: none; }
.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-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; }

/* ============================================================
   HOMEPAGE BLUEPRINT (Oleg 2026-09-04): quick answer, takeaways, category compare table,
   inclusions matrix, stat grid, season strip + cards, sight cards, spot map, testimonials,
   hotels, answered grid. Same tokens as the rest of the sheet: paper / ink / brand / sea / gold.
   Ported from veronawine.tours's styles.css (generic component CSS, keyed only by class name;
   it inherits this file's own "Basalt + Glacier Blue" token values automatically).
   ============================================================ */
.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-1); line-height:1.4; }
.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 compare 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:var(--step--2); 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(156,78,28,.14); color:var(--sea); }
.glyph.no { background:rgba(138,58,34,.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(156,78,28,.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(138,58,34,.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; } }

/* Sight cards ("What You'll See") */
.sight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); }
.sight-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; }
.sight-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; }
.sight-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); }
.sight-card p { margin:0; font-size:var(--step--1); }
.sight-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; }
@media (max-width:1000px){ .sight-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sight-grid { grid-template-columns:1fr; } }

/* Spot map: live embed + hand-drawn pin schematic */
.spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; background:var(--paper-2); }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap > * { min-width:0; max-width:100%; }
@media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } .spot-map-wrap .map-embed { aspect-ratio:4/3; min-height:0; } }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s2); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-pin { cursor:pointer; }
.map-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease; }
.map-pin.is-city circle { fill:var(--ink); }
.map-pin text { fill:var(--ink); font-family:var(--display); font-size:11px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.map-pin:hover circle, .map-pin:focus circle { fill:var(--sea); r:8; }
.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); }
/* Placeholder flag. The global rule allows a placeholder ONLY when it is visually obvious and
   paired with a NOTE FOR OLEG comment in the source, so this must never look like finished copy:
   a warm rule, a tinted ground and the word Placeholder in bold. Used by the city-costs
   table while its transport, water and wifi figures are still unverified. */
.placeholder-flag { border:2px dashed var(--warn); border-radius:var(--radius); background:var(--paper-2);
  color:var(--ink); padding:var(--s3) var(--s4); margin:var(--s4) 0; max-width:none; font-size:var(--step--1); }
.placeholder-flag strong { color:var(--warn); text-transform:uppercase; letter-spacing:.06em; }
@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; } }

/* Richer table-scroll wrapper for wrapTables() output (overrides the thin donor rule above) */
.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 { width:100%; min-width:560px; border-collapse:collapse; background:var(--surface); margin:0; font-size:var(--step--1); border:0; }
.table-scroll th, .table-scroll td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; }
.table-scroll thead th { background:var(--paper-2); font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.01em; }
.table-scroll tbody tr:nth-child(even) > td { background:var(--surface-2); }
.table-scroll tbody tr:last-child > td { border-bottom:0; }
.table-scroll td.num, .table-scroll th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

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

.decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); }
.decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; }
.decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; }
.decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; }
.decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; }
.decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; }
.decision-picker .dp-facts span { font-size:var(--step--2); 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; }
}

/* ---- PHOTO COLLAGE (rule 32, build/compile.mjs photoCollageHtml) ---- */
.photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:.6rem; margin:var(--s3, 1rem) 0 var(--s4, 1.5rem); }
.photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm, 8px); background:var(--paper-2); }
.photo-collage .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; }
.photo-collage .pcol-tile.pcol-wide { grid-column:span 2; }
.photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.photo-collage .pcol-tile:hover img { transform:scale(1.04); }
.photo-collage .pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:1.4rem .6rem .5rem; font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); line-height:1.25; }
@media (max-width:900px){
  .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; }
  .photo-collage .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; }
  .photo-collage .pcol-tile.pcol-wide { grid-column:span 1; }
}
@media (max-width:560px){
  .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; }
  .photo-collage .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; }
  .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; }
  .photo-collage .pcol-tile:nth-child(n+7) { display:none; }
}

/* ---- TOUR EXPLORER (rule 33 block 2, build/compile.mjs tourExplorerHtml) ---- */
.tour-explorer { margin:var(--s3, 1rem) 0; }
.tour-explorer .tex-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem; margin:0 0 .75rem; }
.tour-explorer .tex-cats { display:flex; flex-wrap:wrap; gap:.4rem; }
.tour-explorer .tex-chip { font-size:var(--step--1, .9rem); font-weight:600; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem; min-height:40px; cursor:pointer; }
.tour-explorer .tex-chip:hover { border-color:var(--sea); color:var(--sea); }
.tour-explorer .tex-chip.is-on { background:var(--sea); border-color:var(--sea); color:#fff; }
.tour-explorer .tex-chip:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.tour-explorer .tex-meal, .tour-explorer .tex-sort { display:flex; align-items:center; gap:.4rem; font-size:var(--step--1, .9rem); font-weight:600; min-height:40px; }
.tour-explorer .tex-meal input[type="checkbox"] { width:20px; height:20px; }
.tour-explorer .tex-sort select { min-height:40px; padding:.35rem .5rem; border-radius:var(--radius-sm, 6px); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; }
.tour-explorer .tex-status { margin:0 0 .6rem; padding:.55rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.tour-explorer .tex-table { width:100%; min-width:640px; }
.tour-explorer .tex-table .tex-name a { font-weight:700; color:var(--ink); text-decoration:none; }
.tour-explorer .tex-table .tex-name a:hover { color:var(--sea); text-decoration:underline; }
.tour-explorer .tex-rev { color:var(--ink-soft); font-weight:500; }
.tour-explorer .tex-table tr[hidden] { display:none !important; }
.tour-explorer .tex-empty { margin:.75rem 0 0; padding:.9rem 1rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); color:var(--ink-soft); font-weight:600; }
@media (max-width:560px){ .tour-explorer .tex-controls { gap:.6rem; } }


/* ---- BLOCK: meeting-point picker (rule 33 block 3, replaces the donor's budget slider,
   which is meaningless where every walk is free). The plot is drawn from the real published
   coordinates of each walk's meeting point; a walk with no resolvable coordinate is left off
   the map entirely rather than pinned somewhere plausible. ---- */
.mpp { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s4, 1.5rem); align-items:start; margin:var(--s3, 1rem) 0; }
.mpp-map { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius, 10px); padding:.6rem; }
.mpp-svg { display:block; width:100%; height:auto; }
.mpp-svg .mpp-bg { fill:var(--paper-2); }
.mpp-svg .mpp-pin { cursor:pointer; }
.mpp-svg .mpp-dot { fill:var(--sea); stroke:var(--surface); stroke-width:2.5; transition:fill .15s ease, r .15s ease; }
.mpp-svg .mpp-num { fill:#fff; font-family:var(--display); font-size:14px; font-weight:700; pointer-events:none; }
.mpp-svg .mpp-pin:hover .mpp-dot, .mpp-svg .mpp-pin:focus .mpp-dot { fill:var(--brand); }
.mpp-svg .mpp-pin.is-on .mpp-dot { fill:var(--sea); r:18; }
.mpp-svg .mpp-pin:focus { outline:none; }
.mpp-svg .mpp-pin:focus-visible .mpp-dot { stroke:var(--ink); stroke-width:3; }
.mpp-svg .mpp-scale line, .mpp-svg .mpp-north path { stroke:var(--ink-soft); stroke-width:1.5; fill:none; }
.mpp-svg .mpp-scale text, .mpp-svg .mpp-north text { fill:var(--ink-soft); font-size:12px; font-weight:600; }
.mpp-status { margin:0 0 .7rem; padding:.55rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.mpp-list { display:flex; flex-direction:column; gap:.3rem; max-height:26rem; overflow:auto; }
.mpp-btn { display:grid; grid-template-columns:2rem 1fr auto; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--radius-sm, 6px); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--step--1, .9rem); cursor:pointer; }
.mpp-btn:hover { border-color:var(--sea); }
.mpp-btn.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }
.mpp-bnum { font-family:var(--display); font-weight:700; color:var(--sea); }
.mpp-btn.is-on .mpp-bnum, .mpp-btn.is-on .mpp-bcount { color:#fff; }
.mpp-bcount { font-weight:700; color:var(--ink-soft); }
.mpp-results { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3, 1rem); }
.mpp-card { border:1px solid var(--line); border-radius:var(--radius-sm, 8px); padding:.9rem; background:var(--surface); display:flex; flex-direction:column; gap:.45rem; }
.mpp-card[hidden] { display:none !important; }
.mpp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; }
.mpp-name a { color:var(--ink); text-decoration:none; }
.mpp-name a:hover { color:var(--sea); text-decoration:underline; }
.mpp-meta { margin:0; display:flex; flex-wrap:wrap; gap:.45rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); max-width:none; }
.mpp-meta span::after { content:"\00B7"; margin-left:.45rem; color:var(--line); }
.mpp-meta span:last-child::after { content:""; margin:0; }
.mpp-where { margin:0; font-size:.82rem; color:var(--ink-soft); max-width:none; }
.mpp-card .btn { margin-top:auto; text-align:center; }
@media (max-width:1000px){ .mpp { grid-template-columns:1fr; } .mpp-results { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .mpp-results { grid-template-columns:1fr; } .mpp-list { max-height:18rem; } }

/* ---- BLOCK: the 67-walk directory on /free-walking-tours/ (rule 27 table standard:
   tinted header, zebra rows, rounded bordered container, right-aligned numerics,
   horizontal scroll on phones via .table-scroll). ---- */
.walk-directory { margin:var(--s3, 1rem) 0; }
.wd-controls { display:flex; flex-wrap:wrap; align-items:end; gap:1rem; margin:0 0 .8rem; }
.wd-sel { display:flex; flex-direction:column; gap:.3rem; font-size:var(--step--1, .9rem); font-weight:700; color:var(--ink); }
.wd-sel select { font:inherit; font-weight:500; padding:.45rem .6rem; border:1px solid var(--line); border-radius:var(--radius-sm, 6px); background:var(--surface-2); color:var(--ink); }
.wd-status { margin:0 0 .8rem; padding:.55rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.wd-table { width:100%; border-collapse:collapse; font-size:var(--step--1, .92rem); }
.wd-table caption { caption-side:bottom; padding:.7rem .2rem 0; text-align:left; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }
.wd-table th { background:var(--paper-2); text-align:left; font-family:var(--display); font-size:.8rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); padding:.6rem .7rem; border-bottom:2px solid var(--line); white-space:nowrap; }
.wd-table td { padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
.wd-table tbody tr:nth-child(even) { background:var(--surface-2); }
.wd-table th.num, .wd-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.wd-table tr[hidden] { display:none !important; }
.wd-name a { color:var(--ink); font-weight:600; }
.wd-out { display:inline-block; margin-left:.35rem; font-size:var(--step--2); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.wd-empty { margin:.75rem 0 0; padding:.9rem 1rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); color:var(--ink-soft); font-weight:600; }

/* ---- GuruWalk attribution + the free price label. Every card, row, tile and CTA block
   carries the attribution line: on this site the platform is named on purpose
   (concept-decisions.md D4), because that is what keeps "these are not our walks" honest. ---- */
.gw-attrib { margin:.5rem 0 0; font-size:.8rem; line-height:1.45; color:var(--ink-soft); max-width:none; }
.gw-attrib::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.4rem; border-radius:50%; background:var(--sea); vertical-align:.05rem; }
.gw-attrib-sm { font-size:var(--step--2); margin-top:.4rem; }
.pc-chip-free { background:var(--brand); color:#fff; border-color:var(--brand); }
.tr-free strong, .bp-free strong, .dp-free strong { font-family:var(--display); color:var(--brand); }
.tr-free small { display:block; color:var(--ink-soft); font-weight:600; }
.tr-chips, .rc-chips { margin:.4rem 0 .2rem; display:flex; flex-wrap:wrap; gap:.35rem; max-width:none; }

/* ---- Homepage: the seven kinds grid, and the walk-category blocks nested under the
   free-walking-tours H2 (each carries the anchor CATEGORIES[key].url points at). ---- */
.kinds-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s3, 1rem); margin:var(--s3, 1rem) 0; }
.kind-card { display:flex; flex-direction:column; gap:.3rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm, 8px); background:var(--surface); text-decoration:none; color:var(--ink); }
.kind-card:hover { border-color:var(--sea); background:var(--surface-2); }
.kc-name { font-family:var(--display); font-weight:700; font-size:var(--step-0, 1rem); }
.kc-meta { font-size:.82rem; color:var(--ink-soft); line-height:1.45; }
.cat-block { margin:var(--s5, 2.2rem) 0 0; scroll-margin-top:5rem; }
.cat-block > h3 { font-size:var(--step-1, 1.3rem); margin:0 0 .3rem; }
@media (max-width:1000px){ .kinds-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .kinds-grid { grid-template-columns:1fr; } }

/* ---- Explorer: the language / length / theme selects that replaced the meal checkbox. ---- */
.tour-explorer .tex-sel { display:flex; flex-direction:column; gap:.3rem; font-size:var(--step--1, .9rem); font-weight:700; color:var(--ink); }
.tour-explorer .tex-sel select { font:inherit; font-weight:500; padding:.45rem .6rem; border:1px solid var(--line); border-radius:var(--radius-sm, 6px); background:var(--surface-2); color:var(--ink); }

/* ---- FREE-ATTRACTION DATASET BLOCKS (build/compile.mjs, src/data/free-attractions.json) ----
   .fa-table rides the shared .table-scroll treatment from wrapTables(): tinted header row,
   zebra rows, rounded bordered container, right-aligned numerics, horizontal scroll on phones
   (rule 27). Only the extras below are new. */
.fa-table td:first-child { font-weight:650; color:var(--ink); }
.fa-note { margin:.85rem 0 0; padding:.75rem .95rem; border-left:4px solid var(--brand); background:var(--surface-2); border-radius:var(--radius-sm, 8px); font-size:var(--step--1); line-height:1.5; }

/* The honest contrast strip: what a "free things to do" list would quietly have called free. */
.free-contrasts { list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s3, 1rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.fc-item { display:flex; flex-direction:column; gap:.4rem; padding:.9rem 1rem; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm, 8px); }
.fc-name { font-family:var(--display); font-weight:800; color:var(--ink); display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.fc-arr { font-family:inherit; font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.fc-cost { font-size:var(--step--1); line-height:1.5; color:var(--ink); }
.fc-free { font-size:var(--step--1); line-height:1.5; color:var(--ink-soft); }

/* The seven-kinds compare table keeps .cmp-table's card layout on phones. Without this the shared
   .table-scroll min-width forces those cards to 560px and the container scrolls sideways for
   no reason, which reads on a 390px screen as a broken table. */
@media (max-width:640px){
  .table-scroll > .cmp-table { min-width:0; }
}

/* Explorer filter dropdowns were 34px tall on a phone, under the 40px tap-target floor the
   decision picker's own chips already meet. */
.tour-explorer select, .tex-sel select, .wd-sel select, .wd-controls select, .walk-directory select { min-height:44px; }

/* ============================================================
   RULE 37 - SECTION BANDS: two touching sections must never share a ground.
   Five treatments, used either by hand (.band plus a modifier) or automatically by wrapping
   a run of sections in .bands, which rotates them:
     5n+1 paper -> 5n+2 inverse -> 5n+3 tint -> 5n+4 rule -> 5n+5 wash -> 5n+1 paper ...
   That order is chosen so the two ash-ground treatments (plain and bordered) are never
   neighbours, including across the wrap point where 5n+5 meets the next 5n+1.
   This site's markup is <section class="section wrap">, i.e. the section IS the
   width-limited element, so a painted band bleeds edge to edge with a 100vmax ring shadow
   and clips that ring back to its own top and bottom. Two consequences: nothing with
   position:fixed may live inside a painted band (the clip-path would become its containing
   block, and the sticky CTA sits on <body> for exactly that reason), and .band--rule draws
   its rules across the content column by design.
   ============================================================ */
.band, .bands > section { position:relative; background:var(--band-bg, transparent); }
/* .section + .section zeroes padding-top; a band has to own its vertical rhythm again */
.section.band, .section.band + .section,
.bands > section.section, .bands > section.section + .section { padding-block:var(--s6); }

/* full bleed, but only for the treatments that actually paint a ground */
.band.wrap:not(.band--paper):not(.band--rule),
.bands > section.wrap:nth-of-type(5n+2),
.bands > section.wrap:nth-of-type(5n+3),
.bands > section.wrap:nth-of-type(5n+5) {
  box-shadow:0 0 0 100vmax var(--band-bg, transparent);
  clip-path:inset(0 -100vmax);
}

/* 1 - plain ash, the page ground itself */
.band--paper, .bands > section:nth-of-type(5n+1) { --band-bg:var(--paper); }
/* 3 - deeper ash tint */
.band--tint,  .bands > section:nth-of-type(5n+3) { --band-bg:var(--paper-2); }
/* 5 - light plum wash */
.band--wash,  .bands > section:nth-of-type(5n+5) { --band-bg:var(--band-wash); }
/* 4 - bordered band: ash ground held between two heavy basalt rules */
.band--rule,  .bands > section:nth-of-type(5n+4) { --band-bg:var(--paper);
  border-top:3px solid var(--brand); border-bottom:3px solid var(--brand); }

/* 2 - INVERSE BAND. Basalt on basalt is invisible, so the band remaps the light-ground
   tokens for everything inside it. Cards, tables, chips, badges and pills already read those
   tokens, which is why almost no component needs a dark rule of its own. */
.band--inverse, .bands > section:nth-of-type(5n+2) {
  --band-bg:var(--inverse-bg);
  color:var(--inverse-ink);
  --ink:var(--inverse-ink); --ink-soft:var(--inverse-muted); --slate:var(--inverse-muted);
  --paper:var(--inverse-bg); --paper-2:var(--inverse-surface-2);
  --surface:var(--inverse-surface); --surface-2:var(--inverse-surface-2);
  --line:var(--inverse-line);
  --brand:var(--inverse-link); --brand-deep:var(--inverse-head);
  --sea:var(--inverse-link);   --sea-deep:var(--inverse-head);
  --gold:var(--gold-lift); --gold-soft:var(--inverse-badge-bg); --gold-ink:var(--inverse-badge-ink);
  --ok:var(--inverse-link); --warn:var(--gold-lift);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
}
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(h1,h2,h3,.footer-h,.bp-title,.infogain-h) { color:var(--inverse-head); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) a { color:var(--inverse-link); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(th,td) { border-color:var(--inverse-line); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) thead th { color:var(--inverse-head); }
/* the burnt-orange CTA already clears AA on this ground (white 4.56:1), so it does not change */
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(a,button,.btn).btn-primary {
  background:var(--accent); color:var(--accent-ink); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(a,button,.btn).btn-primary:hover {
  background:var(--accent-deep); color:var(--accent-ink); }
/* .btn-brand cannot stay a basalt fill on a basalt ground, so it becomes an outline */
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(a,button,.btn).btn-brand {
  background:transparent; color:var(--inverse-link); border:2px solid var(--inverse-line); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(a,button,.btn).btn-brand:hover {
  background:var(--inverse-link); color:var(--inverse-bg); border-color:var(--inverse-link); }
:is(.band--inverse, .bands > section:nth-of-type(5n+2)) :is(a,button,.btn).btn-ghost {
  color:var(--inverse-ink); border-color:var(--inverse-line); }

/* ============================================================
   MOTION - one CSS-only reveal, one slow drift. No JS, no library, nothing that can move
   layout: only opacity, transform and background-position animate.
   The finished state is the DEFAULT. The start state and the keyframes live only inside
   prefers-reduced-motion: no-preference, so a reduced-motion visitor, or any engine that
   never runs the animation, gets the final frame with no content hidden behind it.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes band-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  .reveal > *, .cards-3 > * { animation:band-rise .5s cubic-bezier(.2,.7,.3,1) both; }
  .reveal > *:nth-child(2), .cards-3 > *:nth-child(2) { animation-delay:.07s; }
  .reveal > *:nth-child(3), .cards-3 > *:nth-child(3) { animation-delay:.14s; }
  .reveal > *:nth-child(4), .cards-3 > *:nth-child(4) { animation-delay:.21s; }
  .reveal > *:nth-child(5), .cards-3 > *:nth-child(5) { animation-delay:.28s; }
  .reveal > *:nth-child(n+6), .cards-3 > *:nth-child(n+6) { animation-delay:.35s; }
  /* the CTA banner's plum gradient drifts across itself; the box never moves a pixel */
  @keyframes plum-drift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
  .cta-banner { background-size:220% 100%; background-position:0% 50%;
    animation:plum-drift 26s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal > *, .cards-3 > * { animation:none; opacity:1; transform:none; }
  .cta-banner { animation:none; background-position:0% 50%; background-size:auto; }
}

/* ============================================================================================
   THE THREE INTERACTIVE BLOCKS (rule 33) + the attraction decision picker (rule 34).
   Built over src/data/free-attractions.json (44 verified records) and over the walks' own
   published timetables, because the donor's roster-driven blocks cannot run on a three-walk city.
   Every control clears a 40px tap target, every list is server-rendered and every [hidden]
   rule carries !important, since an author display rule otherwise beats the UA stylesheet and
   a "hidden" card stays on screen.
   ============================================================================================ */

/* ---- shared control furniture ---- */
.attraction-picker, .attraction-explorer, .walk-schedule { margin:var(--s4, 1.5rem) 0; }
.ap-opt, .ax-chip, .ws-chip {
  font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600; line-height:1.25;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:999px;
  padding:.55rem .95rem; min-height:44px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ap-opt:hover, .ax-chip:hover, .ws-chip:hover { border-color:var(--sea); color:var(--sea); }
.ap-opt.is-on, .ax-chip.is-on, .ws-chip.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }
.ap-opt:focus-visible, .ax-chip:focus-visible, .ws-chip:focus-visible { outline:3px solid var(--accent, var(--brand)); outline-offset:2px; }
.ap-status, .ax-status, .ws-status {
  margin:0 0 .75rem; padding:.6rem .9rem; border-radius:var(--radius-sm, 6px);
  background:var(--paper-2); color:var(--ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none;
}
.ax-empty, .ws-empty {
  margin:.85rem 0 0; padding:.9rem 1rem; border-radius:var(--radius-sm, 6px);
  background:var(--paper-2); color:var(--ink-soft); font-weight:600; max-width:none;
}

/* ---- BLOCK 1: attraction decision picker ---- */
.attraction-picker {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius, 10px);
  padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06));
}
.attraction-picker .ap-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; }
.attraction-picker .ap-q legend { font-family:var(--display, inherit); font-weight:800; font-size:var(--step-0, 1rem); color:var(--ink); padding:0 0 .5rem; }
.attraction-picker .ap-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.attraction-picker .ap-controls { margin:0 0 var(--s3, 1rem); }
.attraction-picker .ap-results { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3, 1rem); }
.attraction-picker .ap-card {
  border:1px solid var(--line); border-radius:var(--radius, 10px); background:var(--surface-2);
  padding:.9rem; display:flex; flex-direction:column; gap:.45rem; min-width:0;
}
.attraction-picker[data-picked] .ap-card { border-color:var(--brand); }
.attraction-picker .ap-card[hidden] { display:none !important; }
.attraction-picker .ap-chips { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; }
.attraction-picker .ap-name { margin:0; font-family:var(--display, inherit); font-weight:700; font-size:var(--step-0, 1rem); line-height:1.3; max-width:none; }
.attraction-picker .ap-name a { color:var(--ink); text-decoration:none; }
.attraction-picker .ap-name a:hover { color:var(--brand); text-decoration:underline; }
.attraction-picker .ap-line { margin:0; font-size:.84rem; line-height:1.45; color:var(--ink); max-width:none; overflow-wrap:anywhere; }
.attraction-picker .ap-cost { color:var(--ink-soft); }
.attraction-picker .ap-label { display:block; font-family:var(--display, inherit); font-size:var(--step--2); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- BLOCK 2: attraction explorer ---- */
.attraction-explorer .ax-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1.1rem; margin:0 0 .8rem; }
.attraction-explorer .ax-cats { display:flex; flex-wrap:wrap; gap:.4rem; }
.attraction-explorer .ax-sel { display:flex; flex-direction:column; gap:.3rem; font-size:var(--step--1, .9rem); font-weight:700; color:var(--ink); }
.attraction-explorer .ax-sel select {
  font:inherit; font-weight:500; min-height:44px; padding:.45rem .6rem; max-width:100%;
  border:1.5px solid var(--line); border-radius:var(--radius-sm, 6px); background:var(--surface); color:var(--ink);
}
.attraction-explorer .ax-sel select:focus-visible { outline:3px solid var(--accent, var(--brand)); outline-offset:2px; }
.attraction-explorer .ax-table { width:100%; min-width:820px; }
.attraction-explorer .ax-table td:first-child a { font-weight:700; color:var(--ink); text-decoration:none; }
.attraction-explorer .ax-table td:first-child a:hover { color:var(--brand); text-decoration:underline; }
.attraction-explorer .ax-flag { margin-left:.35rem; vertical-align:middle; }
.attraction-explorer .ax-table tr[hidden] { display:none !important; }
@media (max-width:640px){
  .attraction-explorer .table-scroll { overflow-x:visible; }
  .attraction-explorer .ax-table { min-width:0; }
  .attraction-explorer .ax-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .attraction-explorer .ax-table, .attraction-explorer .ax-table tbody, .attraction-explorer .ax-table tr, .attraction-explorer .ax-table td { display:block; width:100%; }
  .attraction-explorer .ax-table tr { border-bottom:1px solid var(--line); padding:.5rem 0 .7rem; }
  .attraction-explorer .ax-table tr:last-child { border-bottom:0; }
  .attraction-explorer .ax-table td { border:0; padding:.3rem .9rem; background:transparent !important; overflow-wrap:anywhere; }
  .attraction-explorer .ax-table td::before { content:attr(data-label); display:block; font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:var(--step--2); letter-spacing:.05em; text-transform:uppercase; }
  .attraction-explorer .ax-table td:first-child::before { display:none; }
  .attraction-explorer .ax-table td:first-child { padding-top:.7rem; font-size:var(--step-0, 1rem); }
}

/* ---- BLOCK 3: walk departure comparator ---- */
.walk-schedule .ws-controls { display:flex; flex-direction:column; gap:.6rem; margin:0 0 .8rem; }
.walk-schedule .ws-group { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.walk-schedule .ws-legend { font-family:var(--display, inherit); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-right:.3rem; }
.walk-schedule .ws-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3, 1rem); align-items:start; }
.walk-schedule .ws-card { border:1px solid var(--line); border-radius:var(--radius, 10px); background:var(--surface); padding:1rem; display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.walk-schedule .ws-card[hidden] { display:none !important; }
.walk-schedule .ws-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.3; }
.walk-schedule .ws-name a { color:var(--ink); text-decoration:none; }
.walk-schedule .ws-name a:hover { color:var(--brand); text-decoration:underline; }
.walk-schedule .ws-proof { margin:0; max-width:none; }
.walk-schedule .ws-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; }
.walk-schedule .ws-facts span { font-size:var(--step--2); font-weight:700; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:.22rem .6rem; }
.walk-schedule .ws-where { margin:0; font-size:.82rem; color:var(--ink-soft); max-width:none; overflow-wrap:anywhere; }
.walk-schedule .ws-notes { margin:0; font-size:.8rem; color:var(--ink-soft); max-width:none; }
.walk-schedule .ws-caveat { margin:.9rem 0 0; font-size:.82rem; color:var(--ink-soft); max-width:none; }
.walk-schedule .table-scroll { margin:.2rem 0; }
.walk-schedule .ws-table { width:100%; min-width:0; font-size:.82rem; }
.walk-schedule .ws-table .ws-cap { caption-side:top; text-align:left; padding:.5rem .8rem 0; font-family:var(--display, inherit); font-weight:700; font-size:var(--step--2); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.walk-schedule .ws-table th, .walk-schedule .ws-table td { padding:.4rem .8rem; }
.walk-schedule .ws-table tbody th { font-weight:600; color:var(--ink); }
.walk-schedule .ws-table .ws-go { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.walk-schedule .ws-table .ws-some, .walk-schedule .ws-table .ws-no { color:var(--ink-soft); font-size:.76rem; }
.walk-schedule .ws-table tr.is-day > * { background:var(--band-wash, var(--paper-2)) !important; }
.walk-schedule .ws-card .btn { margin-top:auto; text-align:center; }
@media (max-width:1000px){
  .attraction-picker .ap-results { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .walk-schedule .ws-grid { grid-template-columns:1fr; }
}
@media (max-width:640px){
  .attraction-picker { padding:var(--s3, 1rem); }
  .attraction-picker .ap-results { grid-template-columns:1fr; }
  .attraction-explorer .ax-sel { width:100%; }
  .attraction-explorer .ax-sel select { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-opt, .ax-chip, .ws-chip { transition:none; }
}
.walk-schedule .ws-proof .ws-score { font-family:var(--display, inherit); font-weight:800; color:var(--gold, var(--ink)); }
.walk-schedule .ws-proof .ws-rev { font-size:.82rem; color:var(--ink-soft); }

/* ---- 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; }
/* Linear water (rivers, canals). Drawn as a stroked line, not a fill, because a river is a way
   and not a polygon. Slightly narrower than the shoreline so the lake still reads as the dominant
   edge, and in the water colour so the eye groups it with the lake rather than with the roads. */
.bm-river path { fill:none; stroke:var(--mp-water); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* The funicular is the subject. A pale casing under it is the standard way to lift a route line
   off a busy street network without thickening it. */
.bm-funicular path { fill:none; stroke:var(--map-1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95)); }
.bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; }

/* ---- Pins and labels ---- */
.stp-lbl { font-size:12.5px; fill:var(--mp-ink); font-weight:650; letter-spacing:.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.2px; stroke-linejoin:round; }
.stp-lbl-home { font-size:14.5px; fill:#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; }