/* build/city-home/home.css - the Rule 51 homepage stylesheet, shared by every city guide.
   Ported from the approved city-guide homepage mockup (2026-09-29). Every colour is a --h-* token.
   The core tokens read the site's OWN palette (styles.css :root), so each site keeps its colours;
   the tints default to color-mix() of those core tokens. A site can pin any --h-* value through
   research/home/home-data.json "palette" (render.mjs appends those after this block).
   The tokens are declared on body.home, so they resolve ONCE against :root: a band that re-points
   --gold-soft or --ink for its own surface (band-teal, band-dusk) cannot flip the home cards. */
body.home {
  --h-ink: var(--ink, #1F1D1B);
  --h-soft: var(--ink-soft, #4A433B);
  --h-brand: var(--brand, #164F45);
  --h-accent: var(--accent, #7A2E1F);
  --h-paper: var(--paper, #F6F0E7);
  --h-gold: var(--gold-soft, #E3C27E);
  --h-line: var(--line, #CBB68F);
  --h-paper2: var(--paper-2, #EAE0D0);
  --h-deep: var(--brand-deep, #16211D);
  --h-dusk-lede: color-mix(in srgb, var(--h-accent) 14%, var(--h-paper));
  --h-hero2-kicker: color-mix(in srgb, var(--h-gold) 57%, #fff);
  --h-hero2-lede: color-mix(in srgb, var(--h-paper2) 54%, #fff);
  --h-badge-glass: color-mix(in srgb, var(--h-paper) 94%, transparent);
  --h-lb-dot-bg: #2E8B57;
  --h-lb-k: color-mix(in srgb, var(--h-paper2) 10%, var(--h-soft));
  --h-od-rule-bg: color-mix(in srgb, var(--h-accent) 14%, var(--h-paper2));
  --h-h-strip-bd: color-mix(in srgb, var(--h-accent) 4%, var(--h-paper2));
  --h-h-cta-bg: color-mix(in srgb, var(--h-accent) 77%, #000);
  --h-mc-l: color-mix(in srgb, var(--h-paper) 57%, var(--h-paper2));
  --h-mood-tab: color-mix(in srgb, var(--h-brand) 62%, var(--h-ink));
  --h-mood-intro: color-mix(in srgb, var(--h-brand) 16%, #fff);
  --h-mc-line: color-mix(in srgb, var(--h-brand) 24%, #fff);
  --h-free-chips-bg: color-mix(in srgb, var(--h-line) 59%, #fff);
  --h-fc-l: color-mix(in srgb, var(--h-ink) 11%, var(--h-paper2));
  --h-stp-cards-rule: color-mix(in srgb, var(--h-accent) 18%, var(--h-paper2));
  --h-wy-bar-fill: color-mix(in srgb, var(--h-brand) 34%, #fff);
  --h-stay-hotels-list-rule: color-mix(in srgb, var(--h-line) 17%, var(--h-paper));
  --h-lb-ground: color-mix(in srgb, var(--h-brand) 9%, #fff);
  --h-lb-ink: color-mix(in srgb, var(--h-brand) 34%, var(--h-ink));
  --h-lb-soft: color-mix(in srgb, var(--h-deep) 76%, #fff);
  --h-lb-rule: color-mix(in srgb, var(--h-brand) 26%, #fff);
  --h-lb-brand: color-mix(in srgb, var(--h-accent) 92%, var(--h-gold));
  --h-lb-accent: color-mix(in srgb, var(--h-brand) 97%, #fff);
  --h-lf-map-bg: color-mix(in srgb, var(--h-ink) 6%, var(--h-paper));
  --h-row-rule: color-mix(in srgb, var(--h-ink) 14%, transparent);
  --h-leaflet-control-attribution: #333;
  --h-leaflet-control-attribution-2: #1F4E79;
}
/* Rule 51: Manrope. The site loads it (Google Fonts link in base.html, see WIRING.md). */
body.home:not(#z) { --maxw: 80rem; font-family: "Manrope", var(--body, system-ui, sans-serif); }
body.home:not(#z) .section { padding-block: 100px; }
body.home:not(#z) .section + .section { padding-top: 100px; }
body.home:not(#z) main, body.home:not(#z) { padding-bottom: 0; }

/* ---- Section headings: mockup H2 = 48px / 700 / -0.025em, no ruled underline ---- */
body.home:not(#z) .rule-h2,
body.home:not(#z) .section > .wrap > h2:first-child,
body.home:not(#z) .section > h2:first-child {
  border: 0; border-image: none; padding-bottom: 0;
  font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; margin: 0;
}
body.home:not(#z) .h-kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--h-accent); margin: 0 0 14px; }
body.home:not(#z) .band-teal .h-kicker, body.home:not(#z) .band-dusk .h-kicker { color: var(--h-gold); }
.h-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.h-head-l { display: flex; flex-direction: column; max-width: 760px; }
.h-head-l .h-kicker { margin-bottom: 14px; }
body.home:not(#z) .h-lede { font-size: 18px; line-height: 1.55; color: var(--h-soft); margin: 14px 0 0; max-width: 720px; }
body.home:not(#z) .band-dusk .h-lede { color: var(--h-dusk-lede); }
body.home:not(#z) a.h-side { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--h-brand); text-decoration: none; }
body.home:not(#z) .band-dusk a.h-side { color: var(--h-gold); }
body.home:not(#z) .h-cta { font-size: 14px; font-weight: 700; color: var(--h-accent); text-decoration: none; white-space: nowrap; }
body.home:not(#z) .h-cta:hover { text-decoration: underline; }

/* ---- HERO ---- */
.hero2 { position: relative; min-height: 720px; display: flex; align-items: flex-end; padding: 0 0 72px; background-size: cover; background-position: center; }
.hero2 .hero-inner { position: relative; z-index: 1; padding-block: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero2-copy { display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.hero2-kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--h-hero2-kicker); margin: 0; }
body.home:not(#z) .hero2 h1 { color: #fff; font-size: 72px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; max-width: none; margin: 0; }
.hero2-lede { color: var(--h-hero2-lede); font-size: 20px; max-width: 640px; line-height: 1.5; margin: 0; }
.hero2-pills { display: flex; flex-wrap: wrap; gap: 10px; }
body.home:not(#z) .hero2-pills a { padding: 11px 18px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.hero2-pills a:hover { background: rgba(255,255,255,.24); }
.live-badge { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--h-badge-glass); color: var(--h-ink); max-width: 340px; flex: 0 0 auto; }
.live-badge .lb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--h-lb-dot-bg); flex: 0 0 auto; }
.live-badge .lb-txt { display: flex; flex-direction: column; gap: 2px; }
.live-badge .lb-k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--h-lb-k); font-weight: 600; }
.live-badge .lb-v { font-size: 15px; font-weight: 500; line-height: 1.4; }

/* ---- ONE DAY ---- */
.oneday-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.oneday-step { display: flex; flex-direction: column; gap: 16px; }
.od-row { display: flex; align-items: center; gap: 12px; }
.od-n { width: 34px; height: 34px; border-radius: 50%; background: var(--h-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.od-time { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--h-accent); }
.od-rule { flex-grow: 1; height: 1px; background: var(--h-od-rule-bg); }
.oneday-step img { width: 100%; height: 250px; object-fit: cover; border-radius: 16px; display: block; }
body.home:not(#z) .oneday-step h3 { font-size: 24px; margin: 0; letter-spacing: -0.025em; }
body.home:not(#z) .oneday-step h3 a { color: var(--h-ink); text-decoration: none; }
body.home:not(#z) .oneday-step h3 a:hover { text-decoration: underline; }
.oneday-step p { font-size: 15px; color: var(--h-soft); line-height: 1.55; margin: 0; }
.od-badge { font-size: 13px; font-weight: 600; color: var(--h-brand); }

/* One-row tour strip (One Day "Rather go with a guide?", Free walk) */
.h-strip { display: flex; align-items: center; gap: 24px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--h-h-strip-bd); margin-top: 48px; }
.h-strip img { width: 150px; height: 104px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.h-strip-body { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-strip-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--h-accent); }
.h-strip-t { font-weight: 700; letter-spacing: -0.015em; font-size: 22px; color: var(--h-ink); line-height: 1.25; }
.h-strip-m { font-size: 14px; color: var(--h-soft); }
body.home:not(#z) .h-strip .h-cta { padding: 13px 22px; border-radius: 999px; background: var(--h-accent); color: #fff; font-size: 15px; font-weight: 600; flex: 0 0 auto; }
body.home:not(#z) .h-strip .h-cta:hover { text-decoration: none; background: var(--h-h-cta-bg); }
.h-strip-free { margin-top: 0; gap: 18px; padding: 16px; border-radius: 18px; }
.h-strip-free img { width: 112px; height: 84px; }
.h-strip-free .h-strip-t { font-size: 20px; }
body.home:not(#z) .h-strip-free .h-cta { padding: 12px 18px; background: transparent; border: 1.5px solid var(--h-brand); color: var(--h-brand); font-size: 14px; }
body.home:not(#z) .h-strip-free .h-cta:hover { background: var(--h-brand); color: #fff; }

/* ---- SIGHTS MOSAIC ---- */
.mosaic-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 250px; gap: 20px; }
.mosaic-tile { position: relative; overflow: hidden; border-radius: 18px; display: block; text-decoration: none; }
.mosaic-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,22,0) 45%, rgba(20,24,22,.78) 100%); }
.mosaic-badge { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--h-paper); color: var(--h-ink); font-size: 13px; font-weight: 600; }
.mosaic-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.mosaic-cap .mc-t { font-weight: 700; letter-spacing: -0.015em; font-size: 24px; color: #fff; }
.mosaic-cap .mc-l { font-size: 14px; color: var(--h-mc-l); }
.mosaic-span2 { grid-column: span 2; }
.mosaic-row2 { grid-row: span 2; }

/* ---- PROOF STRIP + PICKER ---- */
.proof-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--h-h-strip-bd); margin: 0 0 56px; }
.proof-strip .ps-item { display: flex; align-items: center; gap: 12px; }
.proof-strip .ps-big { font-size: 15px; font-weight: 600; }
.proof-strip .ps-small { font-size: 15px; color: var(--h-lb-k); }
.picker-head { margin-bottom: 28px; max-width: 760px; }
body.home:not(#z) #picker .rule-h2 { font-size: 40px; line-height: 1.1; }

@media (min-width: 1000px) {
  body.home:not(#z) #picker .decision-picker { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); column-gap: 40px; row-gap: 18px; align-items: start; padding: 0; border: 0; background: none; box-shadow: none; }
  body.home:not(#z) #picker .decision-picker > * { grid-column: 1; margin: 0; }
  body.home:not(#z) #picker .decision-picker > .dp-summary { grid-column: 2; grid-row: 1; }
  body.home:not(#z) #picker .decision-picker > .dp-list,
  body.home:not(#z) #picker .decision-picker > .dp-results { grid-column: 2; grid-row: 2 / span 6; }
  body.home:not(#z) #picker .dp-row { grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr) max-content max-content; column-gap: 14px; }
}
body.home:not(#z) #picker .dp-list { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--h-h-strip-bd); }

/* ---- PLAN BY MOOD ---- */
.mood-panel-block .wrap { position: relative; }
.mood-panel-block .h-kicker { margin-bottom: 14px; }
.mood-tabs { position: absolute; right: 0; top: 30px; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 0; }
.mood-tab { padding: 11px 20px; border-radius: 999px; border: none; background: transparent; color: var(--h-paper); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mood-tab[aria-selected="true"] { background: var(--h-paper); color: var(--h-mood-tab); }
.mood-panel { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; align-items: start; }
.mood-panel + .mood-panel { margin-top: 64px; }
.mood-panel[hidden] { display: none; }
.mood-panel-set h2.rule-h2 { grid-column: 1 / -1; color: #fff; padding-right: 470px; }
.mood-panel .mood-intro { grid-column: 1 / -1; font-size: 18px; line-height: 1.55; max-width: 720px; color: var(--h-mood-intro); margin: 18px 0 18px; }
.mood-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.mood-card .mcw { position: relative; display: block; }
.mood-card img { width: 100%; height: 230px; object-fit: cover; border-radius: 16px; display: block; }
.mood-card .mc-badge { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px; background: var(--h-gold); color: var(--h-ink); font-size: 12px; font-weight: 600; }
.mood-card .mc-title { font-weight: 700; letter-spacing: -0.015em; font-size: 22px; color: #fff; line-height: 1.25; }
.mood-card .mc-line { font-size: 15px; color: var(--h-mc-line); line-height: 1.5; }
body.home:not(#z) .mood-card .h-cta { color: var(--h-gold); font-size: 15px; }
a.mood-card:hover .mc-title { text-decoration: underline; }

/* ---- FREE ---- */
.free-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 48px; align-items: center; }
.free-collage { grid-column: span 6; position: relative; height: 460px; }
.free-collage .fc-a { position: absolute; left: 0; top: 0; width: 72%; height: 380px; object-fit: cover; border-radius: 20px; }
.free-collage .fc-b { position: absolute; right: 0; bottom: 0; width: 50%; height: 260px; object-fit: cover; border-radius: 20px; border: 8px solid var(--h-paper); box-sizing: border-box; }
.free-copy { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.free-copy .h-kicker, .free-copy .h-lede { margin: 0; }
.free-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body.home:not(#z) .free-chips a { padding: 9px 16px; border-radius: 999px; background: var(--h-paper2); color: var(--h-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
body.home:not(#z) .free-chips a:hover { background: var(--h-free-chips-bg); }

/* ---- FOOD AND EVENING ---- */
body.home:not(#z) #evening .rule-h2 { color: #fff; }
.food-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
body.home:not(#z) a.food-card { display: flex; flex-direction: column; gap: 12px; color: var(--h-paper); text-decoration: none; }
.food-card img { width: 100%; height: 240px; object-fit: cover; border-radius: 16px; display: block; }
.food-card .fc-k, .food-dusk .fd-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--h-gold); }
.food-card .fc-t { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: #fff; line-height: 1.25; }
.food-card .fc-l { font-size: 15px; line-height: 1.5; color: var(--h-fc-l); text-decoration: none; }
a.food-card:hover .fc-t { text-decoration: underline; }
body.home:not(#z) a.food-dusk { position: relative; border-radius: 18px; overflow: hidden; min-height: 400px; display: block; color: #fff; text-decoration: none; }
.food-dusk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.food-dusk .fd-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,10,.1) 20%, rgba(20,14,10,.62) 45%, rgba(20,14,10,.85) 70%, rgba(20,14,10,.9) 100%); }
.food-dusk .fd-body { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.food-dusk .fd-t { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #fff; line-height: 1.2; }
.food-dusk .fd-l { font-size: 15px; line-height: 1.5; color: var(--h-dusk-lede); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.food-dusk .fd-go { font-size: 14px; font-weight: 700; color: var(--h-gold); }

/* ---- MAP: the 22 stops as a compact index under the map, not a tall list ---- */
body.home:not(#z) #map .rule-h2 { margin-bottom: 32px; }
body.home:not(#z) #map .stp-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px 22px; margin-top: 24px; padding: 0; list-style: none; }
body.home:not(#z) #map .stp-cards li { margin: 0; padding: 0; border: 0; background: none; grid-column: auto; display: block; }
body.home:not(#z) #map .stp-cards li a { grid-column: auto; display: flex; flex-direction: column; padding: 8px 0; border: 0; border-top: 1px solid var(--h-stp-cards-rule); background: none; box-shadow: none; border-radius: 0; text-decoration: none; }
body.home:not(#z) #map .stp-cards .sl-name { font-size: 14px; font-weight: 600; color: var(--h-ink); }
body.home:not(#z) #map .stp-cards .sl-note { font-size: 12px; color: var(--h-soft); text-align: left; }

/* ---- DAY TRIPS: horizontal row of 380px cards ---- */
.trips-scroll { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; margin-right: calc((100vw - min(100vw - 2rem, var(--maxw))) / -2); }
.trip-card { flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
.trip-media { position: relative; display: block; }
.trip-media img { width: 100%; height: 280px; object-fit: cover; border-radius: 18px; display: block; }
.trip-chip { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--h-paper); color: var(--h-ink); font-size: 13px; font-weight: 600; }
body.home:not(#z) .trip-card h3 { font-size: 24px; letter-spacing: -0.015em; margin: 0; }
body.home:not(#z) .trip-card h3 a { color: var(--h-ink); text-decoration: none; }
body.home:not(#z) .trip-card h3 a:hover { text-decoration: underline; }
.trip-card p { font-size: 15px; color: var(--h-soft); line-height: 1.5; margin: 0; }
.trip-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 8px; }
.trip-meta .tm-m { font-size: 14px; font-weight: 600; color: var(--h-ink); }
.trips-all { margin: 28px 0 0; }
body.home:not(#z) .trips-all a { font-size: 15px; font-weight: 700; color: var(--h-brand); text-decoration: none; }

/* ---- MONTH BY MONTH: text left, chart right, data table below ---- */
body.home:not(#z) #when-to-go .wrap { display: grid; grid-template-columns: 4fr 8fr; column-gap: 48px; }
body.home:not(#z) #when-to-go .wrap > * { grid-column: 1; }
body.home:not(#z) #when-to-go .h-kicker { margin-bottom: 14px; }
body.home:not(#z) #when-to-go .month-note { font-size: 16px; line-height: 1.55; color: var(--h-soft); margin-top: 16px; }
body.home:not(#z) #when-to-go .wy { display: contents; }
body.home:not(#z) #when-to-go .wy-claim { grid-column: 1; margin-top: 12px; padding: 24px; border-radius: 18px; background: var(--h-paper); font-size: 16px; line-height: 1.55; }
body.home:not(#z) #when-to-go .wy-fig { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: end; }
body.home:not(#z) #when-to-go .wy-tscroll, body.home:not(#z) #when-to-go .lb-src { grid-column: 1 / -1; }
body.home:not(#z) #when-to-go .wy-tscroll { margin-top: 40px; }
body.home:not(#z) #when-to-go .wy-fig { border: 0; background: none; box-shadow: none; padding: 0; }
body.home:not(#z) #when-to-go .wy-bar { fill: var(--h-wy-bar-fill); }
body.home:not(#z) #when-to-go .wy-table th, body.home:not(#z) #when-to-go .wy-table td { padding-block: 6px; font-size: 14px; }

/* ---- WHERE TO STAY ---- */
.stay-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; align-items: stretch; }
.stay-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--h-h-strip-bd); }
.stay-card > img { width: 100%; height: 220px; object-fit: cover; display: block; }
.stay-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
body.home:not(#z) .stay-name { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.2; }
.stay-best { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--h-accent); }
.stay-line { font-size: 15px; color: var(--h-soft); line-height: 1.5; margin: 0; }
.stay-hotels { font-size: 14px; color: var(--h-ink); margin: 0; }
.stay-hotels-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stay-hotels-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--h-stay-hotels-list-rule); font-size: 14px; margin: 0; }
.stay-hotels-list .sh-n { flex: 1 1 auto; min-width: 0; color: var(--h-ink); }
.stay-hotels-list .sh-s { font-weight: 700; color: var(--h-brand); }
body.home:not(#z) .stay-hotels-list a { font-weight: 700; color: var(--h-accent); text-decoration: none; white-space: nowrap; }
body.home:not(#z) a.stay-link { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; color: var(--h-accent); text-decoration: none; }
body.home:not(#z) .stay-hotels-list a:hover, body.home:not(#z) a.stay-link:hover { text-decoration: underline; }

/* ---- FAMOUS FOR ---- */
body.home:not(#z) #famous-for .rule-h2 { margin-bottom: 40px; }
.famous-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.famous-tile { padding: 28px; border-radius: 20px; background: var(--h-paper); display: flex; gap: 20px; align-items: flex-start; }
.famous-n { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; background: var(--h-brand); color: var(--h-hero2-kicker); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
body.home:not(#z) .famous-tile h3 { font-size: 22px; letter-spacing: -0.015em; margin: 0 0 6px; }
.famous-tile p { font-size: 15px; color: var(--h-soft); line-height: 1.5; margin: 0; }
body.home:not(#z) #famous-for .home-faq { margin-top: 48px; }

/* ---- GUIDES ---- */
.guides-grid2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
body.home:not(#z) a.guide-card2 { display: flex; gap: 18px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--h-h-strip-bd); color: var(--h-ink); text-decoration: none; }
.guide-card2 img { width: 104px; height: 80px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.guide-card2 .gc-b { display: flex; flex-direction: column; gap: 4px; }
.guide-card2 .gc-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--h-accent); }
.guide-card2 .gc-t { font-weight: 700; letter-spacing: -0.015em; font-size: 19px; line-height: 1.25; color: var(--h-ink); }
a.guide-card2:hover .gc-t { text-decoration: underline; }
body.home:not(#z) #testimonials:not(:has(*:not(.wrap))) { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .mood-tabs { position: static; margin: 0 0 28px; width: max-content; max-width: 100%; }
  .mood-panel-set h2.rule-h2 { padding-right: 0; }
}
@media (max-width: 900px) {
  body.home:not(#z) .section, body.home:not(#z) .section + .section { padding-block: 64px; }
  body.home:not(#z) .rule-h2, body.home:not(#z) #picker .rule-h2 { font-size: 34px; }
  body.home:not(#z) .hero2 h1 { font-size: 48px; }
  .hero2 { min-height: 600px; }
  .hero2 .hero-inner { flex-direction: column; align-items: flex-start; }
  .oneday-grid, .mood-panel, .food-grid, .stay-grid, .famous-grid, .guides-grid2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mosaic-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 200px; }
  .free-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .free-collage, .free-copy { grid-column: 1; }
  body.home:not(#z) #when-to-go .wrap { display: block; }
  body.home:not(#z) #when-to-go .wy { display: block; }
  body.home:not(#z) #map .stp-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .h-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
}
@media (max-width: 560px) {
  body.home:not(#z) .rule-h2, body.home:not(#z) #picker .rule-h2 { font-size: 30px; }
  body.home:not(#z) .hero2 h1 { font-size: 38px; }
  .hero2-lede { font-size: 17px; }
  .hero2 { min-height: 560px; padding-bottom: 40px; }
  .hero2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,22,.5) 0%, rgba(20,24,22,.66) 40%, rgba(20,24,22,.8) 100%); }
  .live-badge { max-width: 100%; }
  .oneday-grid, .food-grid, .stay-grid, .famous-grid, .guides-grid2 { grid-template-columns: 1fr; }
  .oneday-step img { height: 220px; }
  .mosaic-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .mosaic-span2 { grid-column: span 1; }
  .mosaic-row2 { grid-row: span 1; }
  .mood-panel { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .mood-card img { height: 150px; }
  .mood-card .mc-title { font-size: 18px; }
  .mood-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .mood-tab { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
  .trip-card { flex-basis: 290px; }
  .trip-media img { height: 220px; }
  .trips-scroll { margin-right: -1rem; }
  .h-strip { flex-wrap: wrap; }
  .h-strip img { width: 96px; height: 72px; }
  .h-strip-body { flex: 1 1 160px; }
  body.home:not(#z) .h-strip .h-cta { width: 100%; text-align: center; }
  .free-collage { height: 320px; }
  .free-collage .fc-a { height: 260px; }
  .free-collage .fc-b { height: 180px; }
  .proof-strip { padding: 14px 16px; gap: 10px; }
  body.home:not(#z) #map .stp-cards { grid-template-columns: 1fr; }
  .food-card img { height: 200px; }
}

/* ---- THIS SEASON (freshness block, build/freshness/render.mjs) + freshness extras ---- */
body.home:not(#z) .section.fresh-band { padding-top: 0; }
body.home:not(#z) .fresh-band .fresh { padding: 32px 36px 26px; }
body.home:not(#z) .fresh-band .fresh-title { font-size: 30px; }
.food-card .fc-v { font-size: 14px; font-weight: 600; color: var(--h-gold); line-height: 1.4; }
@media (max-width: 600px) { body.home:not(#z) .fresh-band .fresh { padding: 22px 16px 18px; } body.home:not(#z) .fresh-band .fresh-title { font-size: 24px; } }

/* Month By Month (2026-09-29): the live-block's own dark-mode palette (light ink for a dark
   .wy-fig ground) leaked onto this section, whose figure ground is removed above and whose band
   stays light in every scheme. Pin the block to its light palette here so the chart labels, key
   and caption stay dark on the light band in dark mode too. */
body.home:not(#z) #when-to-go .lb { --lb-ground:var(--h-lb-ground); --lb-ink:var(--h-lb-ink); --lb-soft:var(--h-lb-soft); --lb-rule:var(--h-lb-rule); --lb-brand:var(--h-lb-brand); --lb-accent:var(--h-lb-accent); --lb-on-accent:#FFFFFF; color: var(--lb-ink); }
body.home:not(#z) #when-to-go .wy-fig figcaption { color: var(--h-lb-soft); }
.stay-hotels-list .sh-t { display: block; font-size: 12px; letter-spacing: .04em; color: var(--h-lb-k); margin-top: 2px; }

/* ---- Map section: Leaflet on CARTO Voyager tiles (2026-09-29) ---- */
.lf-block { margin-top: 28px; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.home:not(#z) .lf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--h-line); background: #FFFFFF; color: var(--h-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
body.home:not(#z) .lf-chip:not(.is-on) { background: transparent; color: var(--h-soft); border-style: dashed; }
body.home:not(#z) .lf-chip.is-on.lf-all { background: var(--h-deep); border-color: var(--h-deep); color: #FFFFFF; }
.lf-key { width: 12px; height: 12px; border-radius: 50%; background: var(--lf-c, var(--h-brand)); }
.lf-chip:not(.is-on) .lf-key { opacity: .45; }
.lf-n { font-weight: 500; opacity: .85; }
.lf-map { position: relative; height: 520px; border-radius: 18px; overflow: hidden; background: var(--h-lf-map-bg); border: 1px solid var(--h-line); z-index: 0; }
.lf-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--h-soft); font-size: 15px; }
.lf-map.is-live .lf-hint { display: none; }
body.home:not(#z) .lf-note { font-size: 14px; color: var(--h-soft); margin: 10px 0 0; }
.lf-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.lf-list li { margin: 0; min-width: 0; }
.lf-list li.is-off { opacity: .45; }
body.home:not(#z) .lf-row { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--h-row-rule); color: var(--h-ink); text-decoration: none; }
.lf-num, .lf-pin span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lf-c, var(--h-brand)); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1; }
.lf-num { grid-row: span 2; }
.lf-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
body.home:not(#z) a.lf-row:hover .lf-name { text-decoration: underline; }
.lf-line { font-size: 13px; line-height: 1.4; color: var(--h-soft); }
.lf-pin { background: none; border: 0; }
.lf-pin span { border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.lf-block .leaflet-popup-content { margin: 12px 14px; font-family: inherit; display: flex; flex-direction: column; gap: 4px; }
.lf-pop-t { font-size: 15px; color: var(--h-ink); }
.lf-pop-l { font-size: 13px; color: var(--h-soft); }
body.home:not(#z) .lf-block .lf-pop-a { font-size: 13px; font-weight: 700; color: var(--h-accent); }
.lf-block .leaflet-control-attribution { font-size: 11px; color: var(--h-leaflet-control-attribution); }
.lf-block .leaflet-control-attribution a { color: var(--h-leaflet-control-attribution-2); }
@media (max-width: 900px) { .lf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lf-map { height: 420px; } .lf-list { grid-template-columns: 1fr; } }

/* ---- Dark band fallbacks (Rule 51 moods + evening bands) ----
   Zero-specificity :where() so a site whose rule-37 band set already defines .band-teal /
   .band-dusk (a site with a real band set) wins on every property; a site without them still gets
   readable dark bands derived from its own palette instead of white text on a light band.
   The generic `.section[class*="band-"]{background:var(--band-bg);color:var(--band-fg)}` rule
   from the rule-37 band set applies the colours. */
:where(body.home .band-teal) {
  --band-bg: color-mix(in srgb, var(--h-brand) 72%, #000); --band-fg: var(--h-paper);
  --band-muted: color-mix(in srgb, var(--h-paper) 78%, var(--h-brand)); --band-line: color-mix(in srgb, var(--h-brand) 80%, #fff);
  --band-link: var(--h-gold); --band-rule: var(--h-gold); --band-surface: color-mix(in srgb, var(--h-brand) 88%, #000);
  --ink: var(--h-paper); --ink-soft: color-mix(in srgb, var(--h-paper) 78%, var(--h-brand)); --line: color-mix(in srgb, var(--h-brand) 80%, #fff);
}
:where(body.home .band-dusk) {
  --band-bg: color-mix(in srgb, var(--h-accent) 34%, #000); --band-fg: var(--h-paper);
  --band-muted: color-mix(in srgb, var(--h-paper) 82%, var(--h-accent)); --band-line: color-mix(in srgb, var(--h-accent) 45%, #000);
  --band-link: var(--h-gold); --band-rule: var(--h-gold); --band-surface: color-mix(in srgb, var(--h-accent) 45%, #000);
  --ink: var(--h-paper); --ink-soft: color-mix(in srgb, var(--h-paper) 82%, var(--h-accent)); --line: color-mix(in srgb, var(--h-accent) 45%, #000);
}