/* ═══════════════════════════════════════════
   TOKENS & BASE SETTINGS (THEME FRAMEWORK)
   Editorial travel-magazine system: each theme owns
   color + type pairing; body text always stays readable.
═══════════════════════════════════════════ */
:root {
  /* Default: Midnight Atlas — ink navy, brass, editorial cream */
  --bg-base:     #07101c;
  --bg-surface:  #0d1829;
  --bg-surface-2:#142338;
  --bg-card:     rgba(246, 240, 228, 0.035);
  --bg-card-hov: rgba(201, 162, 89, 0.08);

  --accent-1:    #c9a259;
  --accent-1-lt: #e0c48a;
  --accent-1-dk: #9a7840;
  --accent-2:    #b85c42;

  --text-main:   #f4efe4;
  --text-dim:    rgba(244, 239, 228, 0.72);
  --text-mute:   rgba(244, 239, 228, 0.48);
  --text-inv:    #0a1220;

  --border-light: rgba(201, 162, 89, 0.16);
  --border-med:   rgba(201, 162, 89, 0.38);

  --nav-bg:      rgba(7, 16, 28, 0.88);
  --modal-bg:    rgba(5, 10, 18, 0.96);

  /* Licensed web fonts only (Google Fonts + generic fallbacks) */
  --ff-display:  'Fraunces', 'Noto Serif SC', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --ff-serif:    'Special Elite', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;

  --radius:      6px;
  --radius-lg:   12px;
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.22);
  --hairline:    1px solid var(--border-light);

  /*
   * Layout rhythm (fluid type + caps)
   * - section-x grows with viewport, then stops so content never becomes a
   *   stretched reading line on ultra-wide screens
   * - content-max keeps side margins on large displays
   */
  --content-max: 72rem;          /* ~1152px at 16px root */
  --prose-max:    68ch;           /* comfortable ~65–75 characters */
  --prose-wide:   40rem;          /* ~640px alternate measure */
  --section-y:   clamp(4.5rem, 4rem + 4vw, 8.25rem);
  --section-x:   clamp(1rem, 0.6rem + 3.5vw, 3.75rem);

  --body-weight: 400;
  /* Hybrid fluid body: rem floor + viewport lean, rem ceiling (respects user zoom) */
  --body-size:   clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* ~15–17px */
  --body-leading: 1.7;

  /* Type scale — clamp(min, rem + vw, max); preferred always includes rem */
  --fs-hero:     clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --fs-display:  clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-title:    clamp(1.65rem, 1.25rem + 1.4vw, 2.5rem);
  --fs-lead:     clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  --fs-body:     var(--body-size);
  --fs-small:    clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
  --fs-micro:    clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
  --fs-btn:      clamp(0.6875rem, 0.65rem + 0.12vw, 0.75rem);

  /* Regional Gradients Base */
  --rc-ne: #1a3a5c; --rc-so: #2a1a0a; --rc-mw: #1a3020; --rc-we: #1a1038; --rc-sw: #2a1008;
}

/* Theme: Gallery Daylight — light product palette
   Cool silver white + soft black type + confident blue accent. */
[data-theme="minimal"] {
  --bg-base:     #f5f5f7;
  --bg-surface:  #ffffff;
  --bg-surface-2:#e8e8ed;
  --bg-card:     #ffffff;
  --bg-card-hov: #f5f5f7;

  --accent-1:    #0071e3;
  --accent-1-lt: #2997ff;
  --accent-1-dk: #0066cc;
  --accent-2:    #6e6e73;

  --text-main:   #1d1d1f;
  --text-dim:    #6e6e73;
  --text-mute:   #86868b;
  --text-inv:    #ffffff;

  --border-light: rgba(0, 0, 0, 0.08);
  --border-med:   rgba(0, 0, 0, 0.18);

  --nav-bg:      rgba(255, 255, 255, 0.78);
  --modal-bg:    rgba(255, 255, 255, 0.97);

  /* Public Sans only — licensed Google Font; not system product fonts */
  --ff-display:  'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --ff-serif:    'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --body-weight: 400;
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);

  /* Soft neutral region tints (cool, not muddy) */
  --rc-ne: #e8eef6; --rc-so: #f3efe9; --rc-mw: #e9f0ea; --rc-we: #eceaf3; --rc-sw: #f2ebe8;
}

/* Theme: Classic Elegant — warm paper, burgundy, readable sans body (never all-serif) */
[data-theme="elegant"] {
  --bg-base:     #f6f1e8;
  --bg-surface:  #efe8db;
  --bg-surface-2:#e4d9c8;
  --bg-card:     #fffdf8;
  --bg-card-hov: #f8f2e8;

  --accent-1:    #7a2e2e;
  --accent-1-lt: #9b4444;
  --accent-1-dk: #541f1f;
  --accent-2:    #b8956a;

  --text-main:   #241f1b;
  --text-dim:    #5a524a;
  --text-mute:   #8f8578;
  --text-inv:    #fffdf8;

  --border-light: rgba(122, 46, 46, 0.14);
  --border-med:   rgba(122, 46, 46, 0.36);

  --nav-bg:      rgba(246, 241, 232, 0.94);
  --modal-bg:    rgba(239, 232, 219, 0.97);

  --ff-display:  'Fraunces', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-serif:    'Special Elite', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --body-weight: 400;
  --shadow-card: 0 16px 40px rgba(36, 31, 27, 0.1);

  --rc-ne: #e4e8f0; --rc-so: #f3e4de; --rc-mw: #e4eee6; --rc-we: #ebe4f0; --rc-sw: #efe6df;
}

/* Theme: Luxury Travel — charcoal, antique gold, ivory (high contrast, no neon gold glow) */
[data-theme="luxury"] {
  --bg-base:     #0c0c0c;
  --bg-surface:  #151515;
  --bg-surface-2:#1c1c1c;
  --bg-card:     rgba(245, 240, 230, 0.04);
  --bg-card-hov: rgba(196, 164, 98, 0.1);

  --accent-1:    #c4a462;
  --accent-1-lt: #dfc98a;
  --accent-1-dk: #94763f;
  --accent-2:    #a8a29a;

  --text-main:   #f5f0e6;
  --text-dim:    rgba(245, 240, 230, 0.72);
  --text-mute:   rgba(245, 240, 230, 0.45);
  --text-inv:    #0c0c0c;

  --border-light: rgba(196, 164, 98, 0.18);
  --border-med:   rgba(196, 164, 98, 0.42);

  --nav-bg:      rgba(12, 12, 12, 0.9);
  --modal-bg:    rgba(8, 8, 8, 0.96);

  --ff-display:  'Fraunces', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-serif:    'Special Elite', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --body-weight: 400;
  --shadow-card: 0 20px 48px rgba(0, 0, 0, 0.45);

  --rc-ne: #141820; --rc-so: #1a1410; --rc-mw: #121816; --rc-we: #16141c; --rc-sw: #1a1210;
}

/* Theme: Twilight Glass — dark twin of Gallery Daylight
   Apple product-night palette (MacBook Pro–style): pure black stage,
   graphite elevated surfaces, soft white type, system blue accents.
   Same clean sans stack as Daylight — not brass/magazine glass. */
[data-theme="glass"] {
  /* Near-black stage + elevated graphite (Apple dark UI) */
  --bg-base:     #000000;
  --bg-surface:  #1d1d1f;
  --bg-surface-2:#2c2c2e;
  --bg-card:     #1d1d1f;
  --bg-card-hov: #2c2c2e;

  /* Apple dark-mode blue family */
  --accent-1:    #0a84ff;
  --accent-1-lt: #64b5ff;
  --accent-1-dk: #0071e3;
  --accent-2:    #98989d;

  /* Soft white + mid grays on black */
  --text-main:   #f5f5f7;
  --text-dim:    #a1a1a6;
  --text-mute:   #6e6e73;
  --text-inv:    #ffffff;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-med:   rgba(255, 255, 255, 0.16);

  /* Frosted dark nav (blur + translucent graphite) */
  --nav-bg:      rgba(22, 22, 23, 0.72);
  --modal-bg:    rgba(29, 29, 31, 0.96);

  /* Match Gallery Daylight type — product-page sans only */
  --ff-display:  'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --ff-serif:    'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --body-weight: 400;
  --shadow-card: 0 2px 24px rgba(0, 0, 0, 0.45);

  /* Soft dark region tints (cool graphite, not muddy) */
  --rc-ne: #141a22; --rc-so: #1a1614; --rc-mw: #141a16; --rc-we: #16141c; --rc-sw: #1a1412;
}

/* Theme: Nature Field Notes — forest ink, sage (readable, not neon green) */
[data-theme="nature"] {
  --bg-base:     #141c18;
  --bg-surface:  #1b2620;
  --bg-surface-2:#24322a;
  --bg-card:     rgba(232, 236, 228, 0.04);
  --bg-card-hov: rgba(143, 168, 132, 0.1);

  --accent-1:    #8fa884;
  --accent-1-lt: #b0c4a6;
  --accent-1-dk: #6a8262;
  --accent-2:    #c9a66b;

  --text-main:   #e8ece4;
  --text-dim:    rgba(232, 236, 228, 0.74);
  --text-mute:   rgba(232, 236, 228, 0.48);
  --text-inv:    #141c18;

  --border-light: rgba(143, 168, 132, 0.16);
  --border-med:   rgba(143, 168, 132, 0.4);

  --nav-bg:      rgba(20, 28, 24, 0.92);
  --modal-bg:    rgba(14, 20, 17, 0.96);

  --ff-display:  'Fraunces', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-serif:    'Special Elite', 'Noto Serif SC', 'Noto Serif JP', Georgia, serif;
  --ff-body:     'Public Sans', 'Noto Sans SC', 'Noto Sans JP', Helvetica, Arial, sans-serif;
  --body-weight: 400;
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.3);

  --rc-ne: #1a2824; --rc-so: #24241c; --rc-mw: #1a2a1e; --rc-we: #182624; --rc-sw: #262018;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  color-scheme: dark;
  /* Stop iOS/Android from auto-inflating text and breaking layouts */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prefer dynamic viewport units where supported (mobile URL bars) */
  height: 100%;
  /* Stable root for rem-based fluid type (user zoom still scales everything) */
  font-size: 100%;
}
/* Phones / coarse pointers: instant scroll is more reliable than CSS smooth */
@media (max-width: 900px), (pointer: coarse) {
  html { scroll-behavior: auto; }
  .dest-track, .regions-track { scroll-behavior: auto; }
}
/* Used while restoring scroll after closing overlays — must win over smooth. */
html.scroll-instant,
html.scroll-instant * { scroll-behavior: auto !important; }
html[data-theme="minimal"],
html[data-theme="elegant"] { color-scheme: light; }
body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--ff-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background 0.45s ease, color 0.45s ease;
  /* Prevent horizontal rubber-band overscroll that reveals empty gutters */
  overscroll-behavior-x: none;
  min-height: 100%;
  min-height: 100dvh;
  /* Prefer soft wrapping over mid-word breaks for body copy */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── Typography primitives (display vs reading) ── */
h1, h2, h3, h4, h5, h6,
.hero-h1,
.section-header h2,
.intro-left h2,
.seasons-left h2,
.culture-intro h2,
.tips-header h2,
.fun-facts-header h2,
.settings-header h2,
.modal-title,
.dest-name,
.region-name,
.nav-logo,
.nav-mobile a,
.nav-mobile-settings {
  /* Never hyphenate brand / display type */
  hyphens: none;
  -webkit-hyphens: none;
  /* Prefer whole-word wraps; avoid letter-by-letter breaks */
  overflow-wrap: normal;
  word-break: normal;
  /* Modern browsers: balance multi-line headlines */
  text-wrap: balance;
}

p, .intro-body, .hero-desc, .tips-header p, .fun-facts-header p,
.section-header p, .dest-desc, .tip-body, .prac-body, .legal-doc p {
  /* Reading measure: caps line length; wide screens grow side margins instead */
  max-width: var(--prose-max);
  text-wrap: pretty;
  hyphens: manual;
}

/* Primary CTAs stay one unit when possible — wrap as a whole block, not mid-phrase */
.btn-primary,
.btn-ghost,
.gallery-teaser-cta {
  white-space: nowrap;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Media never forces horizontal scroll across languages / breakpoints */
img, video, canvas, svg { max-width: 100%; height: auto; }
/* Cursor trail keeps explicit full-viewport sizing */
#cursorCanvas { max-width: none; height: 100%; }
/* Lightbox image uses its own max-width rules (don't let height:auto collapse it oddly) */
.lightbox .lightbox-img { height: auto; }

/* Quiet editorial paper grain — desktop only (fixed full-viewport layers cost GPU on phones). */
body { isolation: isolate; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 0 0.5px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.65) 0 0.6px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.45) 0 0.5px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 90px 90px;
  mix-blend-mode: soft-light;
}
html[data-theme="minimal"] body::before,
html[data-theme="elegant"] body::before {
  opacity: 0.055;
  mix-blend-mode: multiply;
}
@media (max-width: 900px), (pointer: coarse) {
  body::before { display: none; }
}
html[data-mobile-lite="true"] body::before { display: none; }

/* Skip link — fully removed from the visual layout until keyboard focus.
   Uses the classic clip technique (not off-screen transform), so it never
   “peeks” during load, reduced-motion, or accidental :focus from the mouse. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  /* Keep out of paint until focused */
  pointer-events: none;
  background: var(--accent-1);
  color: var(--text-inv);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  z-index: 10001;
}
/* Keyboard only — :focus-visible avoids random mouse/programmatic flashes */
.skip-link:focus-visible {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  pointer-events: auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  outline: 2px solid var(--text-main);
  outline-offset: 3px;
}
/* Older engines without :focus-visible still get a working skip target */
@supports not selector(:focus-visible) {
  .skip-link:focus {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    pointer-events: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}
/* Skip target: allow focus without a visible ring on the whole page chrome */
#main:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY SECTION
   Filter pills + a responsive photo grid + a fullscreen lightbox.
   Matches the site's existing visual language:
     - "reveal on scroll" fade/rise (same feel as .reveal elsewhere)
     - hover image zoom (same trick as .dest-card / .region-card)
     - lightbox open/close styled like #modal-overlay (blur + scale)
   ═══════════════════════════════════════════════════════════════ */

/* Search + sort row above category filters */
.gallery-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: stretch;
  max-width: var(--content-max);
  margin: 8px auto 8px;
  padding: 0 4px;
}
.gallery-search-wrap {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gallery-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-med, var(--border-light));
  background: var(--bg-card);
  color: var(--text-main);
  font: 500 14px/1.3 var(--ff-body);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gallery-search::placeholder { color: var(--text-dim); opacity: .85; }
.gallery-search:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent);
}
.gallery-sort-wrap {
  flex: 0 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.gallery-sort-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gallery-sort {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-med, var(--border-light));
  background: var(--bg-card);
  color: var(--text-main);
  font: 600 13px/1.3 var(--ff-body);
  cursor: pointer;
  outline: none;
}
.gallery-sort:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 12px auto 36px; max-width: var(--content-max);
  position: sticky; top: 72px; z-index: 40;
  padding: 12px 4px;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .gallery-filters { background: var(--bg-base); }
}
.gallery-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--bg-card); color: var(--text-dim); font-family: var(--ff-body);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .25s cubic-bezier(0.2,0.8,0.2,1);
  -webkit-tap-highlight-color: transparent; user-select: none;
  min-height: 44px;
}
.gallery-filter:hover { background: var(--bg-card-hov); color: var(--text-main); transform: translateY(-2px); border-color: var(--border-med); }
.gallery-filter.active {
  background: var(--accent-1); color: var(--text-inv); border-color: var(--accent-1);
  animation: filterPop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gallery-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; height: 1.4em; padding: 0 5px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  background: rgba(0,0,0,.18); color: inherit; opacity: .85;
}
.gallery-filter.active .gallery-filter-count { background: rgba(0,0,0,.22); }
@keyframes filterPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Masonry-style columns: each tile keeps its natural photo aspect ratio, but
   items pack top-to-bottom so mixed portrait/landscape never leave blank holes
   (unlike a flat CSS grid with uneven row heights). */
.gallery-grid {
  column-count: 3;
  column-gap: 16px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.gallery-actions { max-width: var(--content-max); margin: 40px auto 0; display: flex; justify-content: center; }
.gallery-expand-btn { background: var(--bg-card); }

.gallery-empty-state {
  display: none; text-align: center; max-width: 420px; margin: 48px auto 0;
  color: var(--text-mute); font-size: 14px; line-height: 1.6;
  padding: 28px 24px; border: 1px dashed var(--border-light); border-radius: 12px;
  background: var(--bg-card);
}
.gallery-empty-state.show { display: block; }

/* Each photo tile: natural height from the image; break-inside avoids so a
   card never splits across columns.
   ── Stability notes (black-hover / paint bugs) ──
   Do NOT: opacity on the tile + opacity on the img + dark ::after overlay +
   box-shadow/hover layer promotion + backface-visibility. That combination
   causes intermittent black tiles on Safari/Chrome when GPU re-composites
   large color-managed photos. Keep the image layer dead-simple. */
.gallery-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  /* Neutral skeleton — never pure black */
  background: var(--bg-surface-2);
  border: 1px solid var(--border-light);
  /* Visible as soon as it enters layout; no tile-level opacity animation */
  opacity: 1;
  transition: border-color .2s ease;
  /* Skeleton height until the real photo dimensions are known */
  min-height: 140px;
  -webkit-tap-highlight-color: transparent;
}
.gallery-item.img-ready { min-height: 0; }
/* Soft entrance only after first paint of the image (class toggled in JS) */
.gallery-item.is-revealed .gallery-caption { opacity: 1; }

/* Hover: border only — no shadow, no transform, no filter on the photo.
   Shadows force a new compositing layer and were a common black-flash trigger. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover,
  .gallery-item:focus-visible {
    border-color: var(--border-med);
    outline: none;
  }
  .gallery-item:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
  }
  .gallery-item:hover .gallery-zoom-hint,
  .gallery-item:focus-visible .gallery-zoom-hint { opacity: 1; }
}

/* Filtering a category out: fade, then display:none. */
.gallery-item.fade-out {
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.gallery-item.hidden { display: none; }

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  /* Natural aspect ratio — no crop in the grid */
  object-fit: contain;
  object-position: center;
  /* Solid underpaint so any decode frame never shows black */
  background-color: var(--bg-surface-2);
  /* Fade-in only the first time the thumb arrives — never on hover */
  opacity: 0;
  transition: opacity .35s ease;
  /* Explicitly avoid GPU “layer tricks” that black-out wide-gamut JPEGs */
  transform: none;
  filter: none;
  backface-visibility: visible;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* clicks hit the tile, not the img */
}
.gallery-item img.loaded { opacity: 1; }

/* No full-tile dark ::after overlay — that was a major black-flash source.
   Caption carries its own soft gradient background instead. */
.gallery-zoom-hint {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Solid bg — no backdrop-filter over the photo */
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.22);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.gallery-zoom-hint svg { width: 15px; height: 15px; }

/* If a photo's file is missing/broken (e.g. you referenced a filename you
   haven't uploaded to images/gallery/ yet), show a deliberate "no photo yet"
   placeholder instead of an empty box - so an unfinished gallery still reads
   as intentional, styled work rather than looking broken. */
.gallery-item.load-error { border: 1px dashed var(--border-med); cursor: default; min-height: 180px; }
.gallery-item.load-error:hover { border-color: var(--border-med); }
.gallery-item.load-error img { display: none; }
.gallery-item-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
  color: var(--text-mute); font-family: var(--ff-body); z-index: 2;
  min-height: 180px;
  background: var(--bg-surface);
}
.gallery-item-placeholder .ph-icon { font-size: 1.8rem; opacity: .5; }
.gallery-item-placeholder .ph-text { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 14px 12px;
  color: #fff; font-family: var(--ff-body); font-size: 13px; font-weight: 600;
  letter-spacing: .01em; line-height: 1.3;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  /* Gradient lives on the caption, not a pseudo over the whole image */
  background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 55%, transparent 100%);
}

@media (hover: none) {
  .gallery-zoom-hint { display: none; }
  /* Touch: always show captions once revealed */
  .gallery-item.is-revealed .gallery-caption { opacity: 1; }
}

/* Segmented control (Gas / EV) */
.tool-seg {
  display: flex; gap: 6px; margin-bottom: 4px;
  padding: 4px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--bg-base);
}
.tool-seg-btn {
  flex: 1; min-height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-dim); font: 600 12px var(--ff-body);
  letter-spacing: .04em; transition: background .2s ease, color .2s ease;
}
.tool-seg-btn:hover { color: var(--text-main); }
.tool-seg-btn.active {
  background: var(--accent-1); color: var(--text-inv);
}
html[data-theme="minimal"] .tool-seg-btn.active,
html[data-theme="elegant"] .tool-seg-btn.active { color: #fff; }
.tool-field-hint { font-size: 11px; color: var(--text-mute); margin-top: 4px; line-height: 1.4; }
.tool-card[data-drive-mode="ev"] .drive-gas-field { display: none !important; }
.tool-card[data-drive-mode="gas"] .drive-ev-field { display: none !important; }

/* ── LIGHTBOX ──
   Same open/close mechanics as #modal-overlay: opacity + visibility +
   pointer-events (not display:none) so the fade/scale can actually animate. */
.lightbox {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
  /* Fill dynamic viewport on mobile browsers with collapsing chrome */
  min-height: 100%;
  min-height: 100dvh;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }

.lightbox-counter {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12);
  z-index: 2;
}

.lightbox-stage {
  display: flex; flex-direction: column; align-items: center; max-width: min(1200px, 100%);
  width: 100%;
  min-height: 120px;
  position: relative;
}
.lightbox.open .lightbox-stage { opacity: 1; }

/* Image frame: progress overlays the center of the current (thumb/full) photo */
.lightbox-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 100%, 1600px);
  max-height: min(82dvh, 1200px);
}

.lightbox-img {
  max-width: min(92vw, 100%, 1600px); max-height: min(82dvh, 1200px); width: auto; height: auto;
  border-radius: 8px; touch-action: pan-y pinch-zoom;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  object-fit: contain;
  background: #141414;
  min-width: min(28vw, 200px);
  min-height: min(22vh, 160px);
  display: block;
}
.lightbox-img.is-loading {
  cursor: progress;
}

/* Centered pill over the photo while full-res loads */
.lightbox-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(260px, 70%);
  min-width: 160px;
  max-width: 300px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(8, 10, 14, 0.78);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  pointer-events: none;
}
.lightbox-progress[hidden] { display: none !important; }
.lightbox-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.lightbox-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-1-dk, #9a7840), var(--accent-1, #c9a259), var(--accent-1-lt, #e0c48a));
  /* JS eases the width every frame — keep CSS transition short so it feels fluid */
  transition: width .08s linear;
  will-change: width;
  position: relative;
}
/* Soft sheen while decode/render is the long wait — bar feels alive even if % holds */
.lightbox-progress.is-decoding .lightbox-progress-fill {
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.28) 50%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(90deg, var(--accent-1-dk, #9a7840), var(--accent-1, #c9a259), var(--accent-1-lt, #e0c48a));
  background-size: 220% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  animation: lightboxDecodeSheen 1.35s ease-in-out infinite;
}
@keyframes lightboxDecodeSheen {
  0%   { background-position: 120% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
.lightbox-progress.is-indeterminate .lightbox-progress-fill {
  width: 35% !important;
  animation: lightboxIndeterminate 1s ease-in-out infinite;
}
@keyframes lightboxIndeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.lightbox-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88);
}
.lightbox-progress-pct {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--accent-1-lt, #e0c48a);
  min-width: 3.2em;
  text-align: right;
  flex-shrink: 0;
}
.lightbox-progress-msg {
  color: rgba(255,255,255,.82);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .lightbox-progress {
    width: min(220px, 78%);
    min-width: 140px;
    padding: 10px 12px;
  }
  .lightbox-progress-msg { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-progress-fill { transition: none; }
  .lightbox-progress.is-decoding .lightbox-progress-fill { animation: none; }
  .lightbox-progress.is-indeterminate .lightbox-progress-fill { animation: none; width: 50% !important; }
}

.lightbox-info {
  text-align: center; margin-top: 16px; max-width: min(640px, 92vw);
  padding: 0 8px;
}
.lightbox-caption { color: #fff; font-family: var(--ff-body); font-size: clamp(14px, 1.6vw, 16px); font-weight: 600; }
.lightbox-meta { color: rgba(255,255,255,.62); font-family: var(--ff-body); font-size: 12.5px; margin-top: 6px; letter-spacing: .02em; }
.lightbox-hd-btn {
  appearance: none;
  margin: 12px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  font: 650 12px/1.2 var(--ff-body);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.lightbox-hd-btn:hover,
.lightbox-hd-btn:focus-visible {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.45);
  outline: none;
}
.lightbox-hd-btn:active { transform: scale(.98); }
.lightbox-hd-btn[hidden] { display: none !important; }
.lightbox-hd-btn.is-loading {
  opacity: .7;
  pointer-events: none;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 22px;
  cursor: pointer; padding: 10px; opacity: .85; transition: all .25s cubic-bezier(0.2,0.8,0.2,1);
  min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; user-select: none; border-radius: 50%;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  opacity: 1; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.35);
}
/* Keep base translateY(-50%) on prev/next when hovering so buttons don't jump */
.lightbox-close:hover, .lightbox-close:focus-visible { transform: rotate(90deg); }
.lightbox-prev:hover, .lightbox-prev:focus-visible { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover, .lightbox-next:focus-visible { transform: translateY(-50%) translateX(2px); }
.lightbox-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.lightbox-prev { left: max(8px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }

/* ── Responsiveness across breakpoints ── */
@media (max-width: 1024px) {
  .gallery-grid { column-count: 2; column-gap: 14px; }
  .gallery-item { margin-bottom: 14px; }
  .gallery-filters { top: 64px; }
}
@media (max-width: 640px) {
  .gallery-filters { gap: 8px; margin: 20px auto 24px; padding: 8px 0; top: 58px; }
  .gallery-filter { padding: 8px 14px; font-size: 12px; min-height: 40px; }
  .gallery-grid { column-count: 2; column-gap: 10px; }
  .gallery-item { margin-bottom: 10px; border-radius: 8px; }
  .gallery-caption { font-size: 11.5px; padding: 14px 10px 10px; }
  .lightbox-prev, .lightbox-next { font-size: 18px; min-width: 44px; min-height: 44px; }
  .lightbox-close { font-size: 18px; min-width: 44px; min-height: 44px; }
  .lightbox-counter { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); font-size: 9px; }
  .lightbox-img { max-width: 96vw; max-height: 68dvh; border-radius: 6px; }
}
/* Single-column gallery on very narrow devices (watch / mini browsers). */
@media (max-width: 360px) {
  .gallery-grid { column-count: 1; column-gap: 0; }
  .gallery-item { margin-bottom: 12px; }
  .gallery-filter { padding: 8px 12px; font-size: 11px; }
  .gallery-filters { top: 52px; }
}
/* Phones in landscape have very little vertical space - shrink the image
   so the caption/controls never get squeezed off-screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .lightbox-img { max-height: 56dvh; }
  .lightbox-info { margin-top: 8px; }
  .lightbox-prev, .lightbox-next { min-width: 40px; min-height: 40px; font-size: 16px; }
  .gallery-filters { position: static; }
}
/* Large TVs / ultra-wide desktops: four columns of natural-ratio photos. */
@media (min-width: 1600px) {
  .gallery-grid { column-count: 4; column-gap: 18px; max-width: 1400px; }
  .gallery-item { margin-bottom: 18px; }
  .gallery-filters { max-width: 1400px; }
  .lightbox-img { max-height: min(82dvh, 1100px); max-width: min(90vw, 1600px); }
}

/* Short viewports generally (landscape phones/tablets, small laptop windows,
   foldables) - #hero's 700px minimum was tuned for portrait phones and full
   desktop windows, so on anything shorter it pushed real content below an
   extra scroll before the page even begins. Ease it back in two steps and
   tighten the hero's own spacing to match. */
@media (max-height: 640px) {
  #hero { min-height: 460px; }
  .hero-content { padding-bottom: 56px; }
  .hero-h1 { margin-bottom: 18px; }
  .hero-stats { bottom: 56px; gap: 16px; }
  .hero-scroll { display: none; }
}
@media (max-height: 420px) {
  #hero { min-height: 360px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-cta { gap: 8px 12px; }
}

/* Accessibility: Focus outlines */
:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 4px;
  border-radius: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-1); }
::selection { background: var(--accent-1); color: var(--text-inv); }

/* ═══ GALLERY SECTION ═══ */
#gallery { padding: var(--section-y) var(--section-x); position: relative; }

/* Homepage teaser — single editorial card linking to the full gallery */
.gallery-teaser-section { padding: var(--section-y) var(--section-x); }
.gallery-teaser {
  position: relative; display: block; max-width: var(--content-max); margin: 0 auto;
  min-height: clamp(280px, 42vw, 420px); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: #fff;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease;
  isolation: isolate;
}
.gallery-teaser:hover,
.gallery-teaser:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border-med);
  box-shadow: 0 28px 56px rgba(0,0,0,.32);
  outline: none;
}
.gallery-teaser:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-1), 0 28px 56px rgba(0,0,0,.32);
}
.gallery-teaser-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(120deg, rgba(7,16,28,.88) 0%, rgba(7,16,28,.45) 48%, rgba(7,16,28,.7) 100%),
    url('../../images/gallery/thumbs/SFgolden_gate_bridge.jpeg') center / cover no-repeat,
    linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-base) 100%);
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.gallery-teaser:hover .gallery-teaser-bg,
.gallery-teaser:focus-visible .gallery-teaser-bg { transform: scale(1.06); }
.gallery-teaser-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 12px; min-height: inherit;
  padding: clamp(28px, 5vw, 52px);
  max-width: 560px;
}
.gallery-teaser-content .section-eyebrow { color: var(--accent-1-lt); margin-bottom: 4px; }
.gallery-teaser-content .section-eyebrow::after { background: var(--accent-1-lt); }
.gallery-teaser-content h2 {
  font-family: var(--ff-display); font-size: var(--fs-display);
  font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: #fff; margin: 0;
}
.gallery-teaser-content h2 em { font-style: italic; color: var(--accent-1-lt); font-weight: 400; }
.gallery-teaser-content p {
  margin: 0; font-size: var(--fs-small); line-height: 1.7; color: rgba(255,255,255,.82);
  max-width: var(--prose-max);
}
.gallery-teaser-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; align-self: flex-start;
  padding: 12px 18px; border-radius: 2px;
  background: var(--accent-1); color: var(--text-inv);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}
.gallery-teaser-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.gallery-teaser:hover .gallery-teaser-cta { background: var(--accent-1-lt); }
.gallery-teaser:hover .gallery-teaser-cta svg { transform: translateX(4px); }
html[data-theme="minimal"] .gallery-teaser-cta,
html[data-theme="elegant"] .gallery-teaser-cta { color: #fff; }
@media (max-width: 540px) {
  .gallery-teaser { min-height: 300px; }
  .gallery-teaser-content { padding: 24px 20px; }
}

/* ═══ MINI-APP CHROME (gallery + tools) ═══
   Shared fixed bar / footer for dedicated pages — not a clone of the guide nav. */
.gallery-app-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.gallery-app-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: var(--ff-body);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  /* Never shrink the control into a half-read label */
  flex-shrink: 0;
}
.gallery-app-back svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
/* Full phrase only — never ellipsis (“Back to the g…”) */
.gallery-app-back-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.gallery-app-back:hover,
.gallery-app-back:focus-visible {
  color: var(--accent-1); border-color: var(--border-med); background: var(--bg-card-hov); outline: none;
}
.gallery-app-back:hover svg,
.gallery-app-back:focus-visible svg { transform: translateX(-3px); }
.gallery-app-title {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700;
  color: var(--text-main); letter-spacing: -.01em; white-space: nowrap;
  /* Center title can yield; back/actions stay intact */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
}
.gallery-app-mark { color: var(--accent-1); font-style: italic; }
.gallery-app-actions {
  justify-self: end;
  margin-left: 0 !important;
}
body.page-gallery #gallery,
body.page-tools #tools.tools-page {
  /* Clear the fixed mini-app bar (min-height 64px + vertical padding + shadow)
     so the section eyebrow never sits under “Back to the Guide”. */
  padding-top: calc(104px + env(safe-area-inset-top, 0px));
  padding-bottom: 72px;
}
body.page-gallery .gallery-app-header,
body.page-tools .tools-app-header {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.25rem;
  margin-bottom: 28px;
  /* Mini-app pages already have a title in the app bar; keep the in-page
     eyebrow/heading band airy and free of the global section-header underline
     crowding the chrome. */
  border-bottom: none;
  padding-bottom: 0;
}
/* Eyebrow sits in its own row with room to breathe under the fixed bar */
body.page-gallery .gallery-app-header .section-eyebrow,
body.page-tools .tools-app-header .section-eyebrow {
  margin-bottom: 14px;
  position: relative;
  z-index: 0;
}
/* Sticky filters sit just under the mini-app bar */
body.page-gallery .gallery-filters {
  top: calc(64px + env(safe-area-inset-top, 0px));
}
/* Slimmer loader subcopy on mini-app pages */
body.page-gallery .loader-sub,
body.page-tools .loader-sub { letter-spacing: .18em; }
body.page-gallery #progress-bar,
body.page-tools #progress-bar { height: 2px; }

/* Tools page — full scrollable layout (not a modal panel).
   Horizontal inset matches #gallery (var(--section-x)) so cards don’t hug the
   viewport edges the way a zero-padded panel did. */
body.page-tools #tools.tools-page {
  padding-left: var(--section-x);
  padding-right: var(--section-x);
  max-width: none;
  margin: 0 auto;
  box-sizing: border-box;
}
body.page-tools .tools-page .tools-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
/* Mini-app pages: slightly roomier gutters on phones (matches gallery comfort) */
@media (max-width: 860px) {
  body.page-gallery #gallery,
  body.page-tools #tools.tools-page {
    padding-left: max(1.25rem, var(--section-x));
    padding-right: max(1.25rem, var(--section-x));
  }
}
@media (max-width: 540px) {
  body.page-gallery #gallery,
  body.page-tools #tools.tools-page {
    padding-left: max(1.35rem, var(--section-x));
    padding-right: max(1.35rem, var(--section-x));
  }
}
/* Match gallery mini-app card language: softer radius, calm borders, subtle depth */
body.page-tools .tools-page .tool-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  min-height: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-med, var(--border-light));
  padding: 24px 22px;
}
body.page-tools .tools-page .tool-card .settings-group-label {
  letter-spacing: .14em;
  margin-bottom: 8px;
}
body.page-tools .tools-page .tool-card .settings-group-sub {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}
body.page-tools .tools-page .tool-card-wide {
  grid-column: 1 / -1;
}
body.page-tools .tools-page .clock-list {
  max-height: min(320px, 50vh);
}
/* Tools inputs align with gallery search/sort chrome */
body.page-tools .tool-field span {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  color: var(--text-dim);
}
body.page-tools .tool-field input,
body.page-tools .tool-field select {
  border-radius: 12px;
  border: 1px solid var(--border-med, var(--border-light));
  background: var(--bg-base);
  min-height: 46px;
  padding: 11px 14px;
  font: 500 16px/1.3 var(--ff-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-tools .tool-field input:focus,
body.page-tools .tool-field select:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent);
}
body.page-tools .tool-swap {
  border-radius: 12px;
  border: 1px solid var(--border-med, var(--border-light));
  background: var(--bg-base);
  color: var(--text-main);
  min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .2s ease;
}
body.page-tools .tool-swap:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 16%, transparent);
}
body.page-tools .tool-result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
body.page-tools .tool-meta {
  font-size: 12.5px;
  line-height: 1.55;
}
body.page-tools .tool-info-list li {
  border-radius: 12px;
  border: 1px solid var(--border-med, var(--border-light));
  padding: 12px 14px;
}
body.page-tools .clock-row {
  padding: 12px 0;
}
body.page-tools .clock-city { font-size: 14px; }
body.page-tools .clock-time { font-size: 18px; font-family: var(--ff-display); }
@media (max-width: 900px) {
  body.page-tools .tools-page .tools-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* Phone: compact currency row — From | ⇄ | To (no giant full-width swap bar) */
@media (max-width: 720px) {
  body.page-tools .tools-page .tool-card {
    padding: 20px 16px;
    border-radius: 14px;
  }
  body.page-tools .currency-tool {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    grid-template-areas:
      "amount amount amount"
      "from   swap   to";
    gap: 12px 10px;
    align-items: end;
  }
  body.page-tools .currency-tool > .tool-field:nth-child(1) { grid-area: amount; }
  body.page-tools .currency-tool > .tool-field:nth-child(2) { grid-area: from; }
  body.page-tools .currency-tool > .tool-swap { grid-area: swap; }
  body.page-tools .currency-tool > .tool-field:nth-child(4) { grid-area: to; }
  body.page-tools .currency-tool .tool-swap {
    width: 48px;
    height: 46px;
    min-height: 46px;
    border-radius: 50%;
    justify-self: center;
    align-self: end;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
  }
  body.page-tools .tool-field select {
    /* Long localized currency labels need a bit more room */
    font-size: 14px;
    padding-left: 12px;
    padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                      linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1600px) {
  body.page-tools .tools-app-header,
  body.page-tools .tools-page .tools-grid {
    max-width: 1400px;
  }
}
.gallery-app-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--section-x) calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-light);
}
.gallery-app-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.gallery-app-footer-home {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-1); text-decoration: none;
  font-family: var(--ff-display); font-size: 15px; font-weight: 600;
  transition: color .2s ease, transform .2s ease;
}
.gallery-app-footer-home:hover { color: var(--accent-1-lt); transform: translateX(-2px); }
.gallery-app-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 0;
}
.gallery-app-footer-copy {
  font-size: 12px; color: var(--text-mute); margin: 0;
  flex: 1 1 200px; text-align: center;
}
.gallery-app-footer .footer-legal-links {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
/* Below ~720px the full “Back to the Guide” label collides with the title.
   Prefer icon-only (aria-label still announces the action) — never truncate. */
@media (max-width: 720px) {
  .gallery-app-back-label { display: none; }
  .gallery-app-back {
    padding: 10px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
}
@media (max-width: 640px) {
  .gallery-app-bar {
    grid-template-columns: auto 1fr auto;
    padding-left: 12px; padding-right: 12px;
    gap: 8px;
  }
  .gallery-app-title { font-size: 1rem; }
  .gallery-app-footer { text-align: center; }
  .gallery-app-footer-row { flex-direction: column; text-align: center; }
  .gallery-app-footer-copy { text-align: center; }
  .gallery-app-footer .footer-legal-links { justify-content: center; }
}
@media (max-width: 400px) {
  .gallery-app-title { font-size: 0.95rem; }
  .gallery-app-actions { gap: 6px; }
}
@media (min-width: 1600px) {
  body.page-gallery .gallery-app-header,
  body.page-gallery .gallery-filters,
  body.page-gallery .gallery-grid,
  body.page-tools .tools-app-header,
  body.page-tools .tools-page .tools-grid,
  .gallery-app-footer { max-width: 1400px; }
}

/* ═══ PROGRESS BAR ═══ */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(to right, var(--accent-1-dk), var(--accent-1), var(--accent-1-lt));
  z-index: 9998; transition: width .1s linear;
  box-shadow: 0 0 12px var(--border-med);
}

/* ═══ SETTINGS DIALOG ═══ */
.settings-overlay {
  position: fixed; inset: 0; z-index: 1002; padding: 24px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(0,0,0,.58); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
  overscroll-behavior: contain;
}
@media (max-width: 900px), (pointer: coarse) {
  .settings-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,.72);
  }
}
.settings-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.settings-panel {
  width: min(1120px, 100%); max-height: min(86dvh, 900px); overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 42px); background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: 0 36px 80px rgba(0,0,0,.4); position: relative;
  transform: translateY(14px) scale(.985); transition: transform .28s cubic-bezier(.22,1,.36,1);
  color: var(--text-main);
}
.settings-panel,
.settings-panel input,
.settings-panel select,
.settings-panel button {
  font-family: var(--ff-body);
}
.settings-overlay.open .settings-panel { transform: translateY(0) scale(1); }
.settings-header { max-width: var(--content-max); margin: 0 auto 34px; }
.settings-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.settings-header h2 { font-family: var(--ff-display); font-size: var(--fs-title); font-weight: 700; line-height: 1.12; margin-bottom: 16px; }
.settings-header h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.settings-header p { font-size: 14px; color: var(--text-dim); max-width: 580px; line-height: 1.8; }
.settings-close {
  flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-card);
  color: var(--text-main); cursor: pointer; font-size: 18px; transition: all .25s;
}
.settings-close:hover { border-color: var(--accent-1); color: var(--accent-1); transform: rotate(90deg); }
.settings-grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; align-items: stretch; }
.settings-group { padding: 32px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-card); display: flex; flex-direction: column; }
.settings-group-label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.settings-group-sub { font-size: 12.5px; color: var(--text-mute); margin-bottom: 22px; line-height: 1.6; }


/* Travel tools (page layout; legacy .tools-panel kept harmless if ever reused) */
.tools-panel { width: min(1180px, 100%); max-height: min(88dvh, 920px); }
.tools-grid {
  max-width: var(--content-max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
/* On the dedicated tools page, never clamp height like a dialog.
   Keep horizontal section-x inset (same rhythm as gallery) — do not zero sides. */
body.page-tools .tools-panel,
body.page-tools #tools.tools-page {
  max-height: none;
  width: 100%;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}
.tool-card {
  padding: 22px 20px; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--bg-card); min-width: 0; display: flex; flex-direction: column;
}
.tool-card-wide { grid-column: 1 / -1; grid-row: auto; }
.tool-form { display: grid; gap: 12px; }
.currency-tool {
  grid-template-columns: minmax(100px, 1.1fr) minmax(90px, .8fr) 44px minmax(90px, .8fr);
  align-items: end;
}
.tool-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tool-field span { color: var(--text-mute); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tool-field input, .tool-field select {
  width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: var(--bg-base); color: var(--text-main);
  /* 16px minimum prevents iOS Safari from zooming the page on focus */
  font: 500 16px var(--ff-body); outline: none;
  color-scheme: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Ensure select options stay readable on dark & light themes */
.tool-field option { background: var(--bg-surface); color: var(--text-main); }
.tool-field input:focus, .tool-field select:focus { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1); }
.tool-swap { width: 44px; height: 44px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-card); color: var(--text-main); cursor: pointer; font-size: 18px; transition: all .25s; }
.tool-swap:hover { border-color: var(--accent-1); color: var(--accent-1); transform: translateY(-2px); }
.tool-result { margin-top: 16px; color: var(--text-main); font-family: var(--ff-display); font-size: clamp(1.45rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.tool-result-sm { font-size: clamp(1.15rem, 2vw, 1.55rem); }
.tool-meta { margin-top: 8px; color: var(--text-mute); font-size: 12px; line-height: 1.6; }
.clock-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.clock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.clock-row:last-child { border-bottom: 0; }
.clock-city { color: var(--text-main); font-weight: 600; font-size: 13px; }
.clock-zone { color: var(--text-mute); font-size: 11px; margin-top: 3px; }
.clock-time { color: var(--accent-1); font-weight: 700; font-size: 17px; white-space: nowrap; }
.stacked { gap: 12px; }
.tool-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-info-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin: 4px 0 0; padding: 0; flex: 1;
}
.tool-info-list li {
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
  padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--bg-base);
}
.tool-info-list strong { color: var(--accent-1); font-family: var(--ff-body); font-weight: 700; letter-spacing: .02em; }

/* Tools: single column on narrower widths */
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card-wide { grid-column: auto; }
  /* From | swap | To on one row (amount still full width via page-tools rules) */
  .currency-tool {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: end;
  }
  .currency-tool .tool-field:first-child { grid-column: 1 / -1; }
  .currency-tool .tool-swap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    justify-self: center;
  }
}
/* Landscape phones / short viewports: denser multi-column, less vertical waste */
@media (max-height: 520px) and (orientation: landscape) {
  .tools-panel { max-height: calc(100dvh - 12px); padding: 16px 18px; width: min(96vw, 1180px); }
  .settings-header { margin-bottom: 14px; }
  .settings-header h2 { font-size: clamp(1.4rem, 3.5vh, 1.9rem); margin-bottom: 6px; }
  .settings-header p { display: none; }
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .tool-card-wide { grid-column: 1 / -1; }
  .tool-card { padding: 14px 12px; }
  .tool-result { margin-top: 10px; font-size: 1.2rem; }
  .tool-field input, .tool-field select { min-height: 38px; padding: 8px 10px; font-size: 13px; }
  .currency-tool { grid-template-columns: minmax(80px, 1fr) minmax(80px, .7fr) 40px minmax(80px, .7fr); }
  .clock-list { max-height: 140px; }
  .tool-info-list { gap: 6px; }
  .tool-info-list li { padding: 7px 9px; font-size: 12px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-eyebrow { margin-bottom: 6px; }
}

/* Theme swatches */
.theme-swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-swatch {
  border: 1px solid var(--border-light); border-radius: 8px; padding: 12px 10px; cursor: pointer;
  background: var(--bg-surface-2); transition: all .3s cubic-bezier(0.2,0.8,0.2,1); text-align: left;
  display: flex; flex-direction: column; gap: 10px; font-family: var(--ff-body); color: var(--text-dim);
}
.theme-swatch:hover { transform: translateY(-3px); border-color: var(--border-med); }
.theme-swatch.active { border-color: var(--accent-1); background: var(--bg-card-hov); box-shadow: 0 0 0 1px var(--accent-1); }
.theme-swatch-preview { height: 34px; border-radius: 5px; display: flex; overflow: hidden; border: 1px solid rgba(128,128,128,0.15); }
.theme-swatch-preview span { flex: 1; }
.theme-swatch-name { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.theme-swatch.active .theme-swatch-name { color: var(--text-main); }
.theme-swatch-check { opacity: 0; color: var(--accent-1); font-size: 13px; transition: opacity .2s; flex-shrink: 0; }
.theme-swatch.active .theme-swatch-check { opacity: 1; }

/* Pill button groups (language / units) */
.pill-group { display: flex; flex-direction: column; gap: 8px; }
.pill-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-light);
  background: var(--bg-surface-2); color: var(--text-dim); font-family: var(--ff-body); font-size: 13.5px;
  font-weight: 500; transition: all .25s cubic-bezier(0.2,0.8,0.2,1); text-align: left; width: 100%;
  white-space: nowrap; /* keep 日本語 / 中文 on one line */
  line-height: 1.3;
}
.pill-btn:hover { border-color: var(--border-med); color: var(--text-main); }
.pill-btn.active { border-color: var(--accent-1); background: var(--bg-card-hov); color: var(--text-main); }
.pill-btn.active .pill-check { opacity: 1; transform: scale(1); }
.pill-btn-native { font-size: 11.5px; color: var(--text-mute); font-weight: 400; }
.pill-check { opacity: 0; transform: scale(.5); color: var(--accent-1); font-size: 14px; transition: all .25s cubic-bezier(0.2,0.8,0.2,1); flex-shrink: 0; }
.settings-subgroup + .settings-subgroup { margin-top: 20px; }
.settings-subgroup-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; }
.units-row { display: flex; gap: 8px; flex-wrap: wrap; }
.units-row .pill-btn {
  text-align: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 4.5em;
  width: auto;
  white-space: nowrap;
}

/* Accessibility group spans the full grid width and lays its two toggles
   side by side on wide screens, stacking on narrow ones. */
.settings-group-wide { grid-column: 1 / -1; }
.settings-subgroup-row { display: flex; gap: 24px 32px; flex-wrap: wrap; }
.settings-subgroup-row .settings-subgroup { flex: 1 1 220px; margin-top: 0; }

/* ═══ LOADER ═══ */
#loader {
  position: fixed; inset: 0; background: var(--bg-base); z-index: 9997;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px;
  transition: opacity .8s ease, visibility .8s ease;
}
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-flag { font-size: 3.5rem; }
.loader-text {
  font-family: var(--ff-display); font-size: clamp(2rem, 5vw, 3.5rem); font-style: italic; 
  color: var(--accent-1); letter-spacing: .05em; animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader-sub { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim); }
.loader-bar { width: 240px; height: 2px; background: var(--border-light); border-radius:1px; overflow:hidden; }
.loader-fill { height:100%; background: linear-gradient(to right,var(--accent-1-dk),var(--accent-1-lt)); animation: loaderFill 2s ease-in-out forwards; }
@keyframes loaderPulse { 0%,100%{opacity:.6} 50%{opacity:1; text-shadow: 0 0 20px var(--border-light);} }
@keyframes loaderFill  { from{width:0} to{width:100%} }

/* ═══ NAV ═══
   Scope fixed chrome to #navbar only — never all <nav> tags.
   Footer legal strip uses <nav class="footer-legal-links"> and must stay in flow. */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 20px var(--section-x);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: var(--nav-bg); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  padding: 12px var(--section-x); border-bottom-color: var(--border-light);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
@media (max-width: 900px), (pointer: coarse) {
  #navbar.scrolled {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.nav-logo {
  font-family: var(--ff-display); font-size: 21px; font-style: italic;
  color: var(--accent-1); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.nav-logo:hover { color: var(--accent-1-lt); }
.nav-logo span { font-style: normal; font-weight: 800; }
.nav-links { display: flex; gap: clamp(10px, 1.2vw, 22px); list-style: none; align-items: center; }
.nav-links a {
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 500;
  color: var(--text-dim); text-decoration: none; transition: color .25s; position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--accent-1);
  transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links a:hover, .nav-links a.active-link { color: var(--text-main); }
.nav-links a:hover::after, .nav-links a.active-link::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 20px; }
.nav-settings-btn, .nav-tool-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); border-radius: 999px; background: var(--bg-card);
  color: var(--text-main); cursor: pointer; font-size: 17px; line-height: 1; transition: all .25s;
  text-decoration: none; /* tools/gallery icons may be <a> links */
  flex-shrink: 0;
  box-sizing: border-box;
}
.nav-settings-btn:hover, .nav-tool-btn:hover,
.nav-settings-btn:focus-visible, .nav-tool-btn:focus-visible {
  border-color: var(--accent-1); color: var(--accent-1); background: var(--bg-card-hov); transform: translateY(-2px); outline: none;
}

/* Hamburger */
.nav-hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; min-width: 44px; min-height: 44px; padding: 4px; background: none; border: none; z-index: 201; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--text-main); border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--accent-1); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--accent-1); }
.nav-mobile {
  position: fixed; inset: 0; top: 0; background: var(--modal-bg); backdrop-filter: blur(24px); z-index: 190;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(18px, 4vh, 34px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility .4s;
  overflow-y: auto; padding: 100px 24px 60px;
}
.nav-mobile.open { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-mobile a { font-family: var(--ff-display); font-size: clamp(1.6rem, 7vw, 2.5rem); font-style: italic; color: var(--text-dim); text-decoration: none; transition: color .25s, transform .25s; }
.nav-mobile a:hover,
.nav-mobile a.active-link { color: var(--accent-1); }
.nav-mobile a:hover { transform: translateY(-4px); }
.nav-mobile-settings {
  font-family: var(--ff-display); font-size: clamp(1.6rem, 7vw, 2.5rem); font-style: italic; color: var(--text-dim);
  background: none; border: 0; cursor: pointer; transition: color .25s, transform .25s;
}
.nav-mobile-settings:hover { color: var(--accent-1); transform: translateY(-4px); }

/* ═══ HERO ═══ */
#hero {
  height: 100vh; height: 100dvh;
  min-height: clamp(32rem, 70vh, 44rem);
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
}
.hero-bg {
  position: absolute; inset: 0;
  /* Layered depth: soft gold wash + deep navy falloff + bottom vignette for type */
  background:
    radial-gradient(ellipse 90% 70% at 18% 28%, color-mix(in srgb, var(--accent-1) 14%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 78% 72%, color-mix(in srgb, var(--border-light) 55%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 40% 100%, rgba(0, 0, 0, .35) 0%, transparent 55%),
    linear-gradient(165deg, var(--bg-surface) 0%, var(--bg-base) 42%, var(--bg-surface-2) 100%);
  /* Static — continuous bg breathe + will-change was a free GPU tax on every visit */
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg-base) 72%, transparent) 0%, transparent 42%);
}
/* Full-viewport overlay for the particle trail. Explicit width/height keep
   CSS pixels aligned with the JS DPR-scaled drawing buffer (without this,
   some browsers size the canvas to its bitmap and misplace particles). */
#cursorCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9000;
  display: block;
}
#cursorCanvas.is-disabled { visibility: hidden; }

.hero-content {
  position: relative; z-index: 5;
  padding: 0 var(--section-x) clamp(4.5rem, 8vh, 6.75rem);
  max-width: min(57.5rem, 100%);
  min-width: 0; width: 100%;
}
.hero-eyebrow {
  font-family: var(--ff-serif);
  font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
  color: var(--accent-1); margin-bottom: 22px; opacity: 0;
  animation: slideUp .7s .15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before { content:''; display:inline-block; width: 36px; height: 1px; background: var(--accent-1); opacity: .85; }
.hero-h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.75rem);
  opacity: 0;
  animation: slideUp .75s .25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  /* Fluid until min size, then whole lines wrap as units (no mid-word splits) */
  max-width: 18ch;
}
/* Editorial italic emphasis — solid accent color, no animated gradient text */
.hero-h1 em {
  display: block; font-style: italic; font-weight: 400;
  color: var(--accent-1);
  letter-spacing: -.02em;
}
.hero-desc {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: var(--prose-max);
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  font-weight: 400; opacity: 0;
  animation: slideUp .75s .38s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  opacity: 0; animation: slideUp .7s .5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.btn-primary {
  padding: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--accent-1); color: var(--text-inv);
  font-family: var(--ff-body); font-size: var(--fs-btn); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-radius: 2px; position: relative; overflow: hidden;
  max-width: 100%;
}
.btn-primary:hover { background: var(--accent-1-lt); color: var(--text-inv); transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-1) 28%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  font-size: var(--fs-btn); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--text-dim);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-light);
  padding: clamp(0.75rem, 0.65rem + 0.3vw, 0.9rem) clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border-radius: 2px;
  transition: all .28s ease; background: transparent;
  max-width: 100%;
}
.btn-ghost:hover { color: var(--text-main); border-color: var(--accent-1); background: var(--bg-card-hov); transform: translateY(-2px); }
/* Very narrow viewports: allow CTA wrap instead of overflowing */
@media (max-width: 360px) {
  .btn-primary, .btn-ghost { white-space: normal; text-align: center; }
}

.hero-stats {
  position: absolute; right: var(--section-x); bottom: clamp(4.5rem, 8vh, 6.75rem);
  z-index: 5; display: flex; flex-direction: column; gap: 28px; align-items: flex-end;
  opacity: 0; animation: slideUp .7s .6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.stat-item { text-align: right; cursor: default; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color .25s; }
.stat-item:hover { border-bottom-color: var(--border-med); }
.stat-num {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 700; color: var(--accent-1); line-height: 1; letter-spacing: -.02em; transition: color .25s;
}
.stat-item:hover .stat-num { color: var(--accent-1-lt); }
.stat-label { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin-top: 6px; font-weight: 500; }
.stat-bar { height: 2px; background: var(--border-light); margin-top: 8px; border-radius: 1px; overflow: hidden; width: 70px; }
.stat-bar-fill { height: 100%; background: var(--accent-1); transform: scaleX(0); transform-origin: right; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.stat-item:hover .stat-bar-fill { transform: scaleX(1); transform-origin: left; }

.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeIn .8s .85s ease forwards; cursor: pointer; }
.scroll-line { width: 2px; height: 60px; background: linear-gradient(to bottom, transparent, var(--accent-1)); animation: scrollPulse 2.2s ease-in-out infinite; transform-origin: bottom; }
.scroll-text { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); transition: color 0.3s; }
.hero-scroll:hover .scroll-text { color: var(--accent-1); }
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:.6} 50%{transform:scaleY(1.3);opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* ═══ INTRO ═══ */
#intro { padding: var(--section-y) var(--section-x); position: relative; }
.intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 80px); max-width: var(--content-max); margin: 0 auto; align-items: center; }
.section-eyebrow {
  font-family: var(--ff-serif); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-1);
  margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
}
.section-eyebrow::after { content:''; flex:1; max-width:48px; height:1px; background:var(--accent-1); opacity:.45; }
.intro-left h2 {
  font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 700;
  line-height: 1.12; letter-spacing: -.025em; margin-bottom: 28px;
}
.intro-left h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.intro-pull {
  font-family: var(--ff-display); font-size: var(--fs-lead); line-height: 1.6;
  letter-spacing: -.01em; font-style: italic; color: var(--text-main);
  border-left: 2px solid var(--accent-1); padding-left: 24px; margin-bottom: 32px;
  max-width: var(--prose-max);
}
.intro-body {
  font-size: var(--fs-body); line-height: var(--body-leading); color: var(--text-dim);
  margin-bottom: 20px; font-weight: 400; max-width: var(--prose-max);
}
.intro-body strong { color: var(--text-main); font-weight: 600; }
.intro-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; }
.fact-card { background: var(--bg-card); border: 1px solid var(--border-light); padding: 22px 18px; border-radius: var(--radius); transition: all .3s ease; cursor: pointer; position: relative; overflow: hidden; }
.fact-card::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, var(--border-light) 0%, transparent 60%); opacity: 0; transition: opacity .35s; }
.fact-card:hover { border-color: var(--border-med); background: var(--bg-card-hov); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.fact-card:hover::before { opacity: 1; }
.fact-card-num { font-family: var(--ff-display); font-size: 1.8rem; font-weight: 700; color: var(--accent-1); line-height: 1; }
.fact-card-label { font-size: 11px; color: var(--text-dim); margin-top: 8px; letter-spacing:.06em; font-weight: 500; text-transform: uppercase; }

/* Intro photo stack — heights live in CSS only (no inline styles). */
.intro-right { display: flex; flex-direction: column; gap: 16px; position: relative; }
.img-card { border-radius: 6px; overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.img-card-tall { height: clamp(320px, 38vw, 400px); }
.img-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.img-card-sm { height: clamp(180px, 22vw, 220px); border-radius: 6px; overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.img-scene { width: 100%; height: 100%; position: relative; overflow: hidden; }
.scene-label {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font-family: var(--ff-serif); font-size: 10px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  padding: 6px 10px; border-radius: 4px;
}
.scene-canyon {
  /* Photo + gradient fallback so the card never goes blank if the file is missing. */
  background-image:
    url('../../images/SFgolden_gate_bridge_with_pelican-by_timg.jpeg'),
    linear-gradient(180deg, #9fb6c9 0%, #e6a866 34%, #c05a3c 56%, #6e3548 76%, #241f33 100%);
  background-size: cover, cover;
  background-position: center, center;
}
/* Real trip photos (fallbacks keep the card filled if a path fails) */
.scene-nyc {
  background-image:
    url('../../images/harbor_blvd.jpg'),
    linear-gradient(180deg, #1a3040 0%, #0d1820 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.scene-yellow {
  background-image:
    url('../../images/mirage-apple.jpg'),
    linear-gradient(160deg, #2a2a2e 0%, #121216 100%);
  background-size: cover, cover;
  background-position: center, center;
}

/* ═══ DIVIDER ═══ */
.section-divider { max-width: var(--content-max); margin: 0 auto; height: 1px; background: linear-gradient(to right, transparent, var(--border-med), transparent); }

/* ═══ REGIONS ═══ */
#regions { padding: var(--section-y) var(--section-x); }
.section-header {
  max-width: var(--content-max); margin: 0 auto clamp(2.75rem, 2.5rem + 1.5vw, 3.75rem);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-light);
}
.section-header h2 {
  font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 700;
  line-height: 1.12; letter-spacing: -.025em;
}
.section-header h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.section-header p {
  font-size: var(--fs-small); color: var(--text-dim);
  max-width: min(22rem, var(--prose-max)); text-align: right;
  line-height: 1.7; font-weight: 400;
}
/* Shared section titles (replaces ad-hoc inline styles on dest/practical etc.) */
.section-title {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-top: 8px;
}
.section-title em {
  font-style: italic;
  color: var(--accent-1);
  font-weight: 400;
}
.regions-scroll-wrapper { max-width: var(--content-max); margin: 0 auto; }
/* Title | intro copy (+ optional scroll nav). Avoids a lonely mid-column paragraph. */
.regions-header-wrapper {
  max-width: var(--content-max);
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  grid-template-areas:
    "title copy"
    "title nav";
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 14px;
  align-items: end;
}
.regions-header-wrapper > div:first-child { grid-area: title; min-width: 0; }
.regions-header-wrapper > p {
  grid-area: copy;
  margin: 0;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 0.98rem);
  color: var(--text-dim);
  max-width: 28rem;
  justify-self: end;
  width: 100%;
  text-align: left;
  line-height: 1.65;
  text-wrap: pretty;
}
.regions-header-wrapper > .regions-nav-btns {
  grid-area: nav;
  justify-self: end;
  align-self: start;
}
.regions-nav-btns { display: none; }
.regions-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.region-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); cursor: pointer; height: 480px; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; border: 1px solid transparent; }
.region-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); border-color: var(--border-med); z-index: 10; }
.region-card-bg { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.region-card:hover .region-card-bg { transform: scale(1.1); }
.rc-northeast { background: linear-gradient(170deg, var(--rc-ne), var(--bg-surface-2), var(--bg-base)); }
.rc-south     { background: linear-gradient(170deg, var(--rc-so), var(--bg-surface-2), var(--bg-base)); }
.rc-midwest   { background: linear-gradient(170deg, var(--rc-mw), var(--bg-surface-2), var(--bg-base)); }
.rc-west      { background: linear-gradient(170deg, var(--rc-we), var(--bg-surface-2), var(--bg-base)); }
.rc-southwest { background: linear-gradient(170deg, var(--rc-sw), var(--bg-surface-2), var(--bg-base)); }

.region-deco { position: absolute; inset: 0; opacity: 0.55; transition: opacity .5s; }
.region-card:hover .region-deco { opacity: 1; }
.deco-northeast { background: radial-gradient(circle at 50% 15%, rgba(255,255,255,0.1) 0%, transparent 50%), linear-gradient(180deg, transparent 25%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%); }
.deco-south { background: radial-gradient(ellipse 70% 45% at 50% 35%, rgba(255,255,255,0.1) 0%, transparent 70%), linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8) 100%); }
.deco-midwest { background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 40%, rgba(0,0,0,0.8) 100%); }
.deco-west { background: radial-gradient(ellipse 100% 30% at 50% 65%, rgba(255,255,255,0.1) 0%, transparent 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8) 100%); }
.deco-southwest { background: radial-gradient(ellipse 80% 50% at 50% 55%, rgba(255,255,255,0.1) 0%, transparent 70%), linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8) 100%); }

.region-svg { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 55%; opacity: 0.4; transition: opacity .5s, transform .5s; filter: grayscale(50%) brightness(1.2); }
.region-card:hover .region-svg { opacity: 0.8; transform: translateY(-5px); filter: grayscale(0%); }

/* Always-legible type over region art (works on light pastel themes too). */
.region-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.35) 42%, rgba(8, 10, 14, 0.12) 100%);
}
.region-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 22px; }
.region-tag { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-1-lt); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.region-name { font-family: var(--ff-display); font-size: 1.55rem; font-weight: 700; line-height: 1.12; margin-bottom: 12px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.region-desc { font-size: 13px; color: rgba(255,255,255,0.86); line-height: 1.65; margin-bottom: 16px; max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .45s; opacity: 0; }
.region-card:hover .region-desc { max-height: 140px; opacity: 1; }
/* Touch devices have no hover — keep a short description readable without hover */
@media (hover: none) {
  .region-desc { max-height: 4.8em; opacity: 1; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }
}
.region-spots { display: flex; gap: 8px; flex-wrap: wrap; }
.region-spot { font-size: 11px; font-weight: 500; letter-spacing: .04em; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.32); color: rgba(255,255,255,0.88); border-radius: 999px; transition: all .25s; cursor: pointer; backdrop-filter: blur(6px); background: rgba(0,0,0,.18); }
.region-card:hover .region-spot:hover { border-color: var(--accent-1); color: var(--text-inv); background: var(--accent-1); }
.region-num { position: absolute; top: 18px; right: 18px; z-index: 2; font-family: var(--ff-display); font-size: 4.5rem; font-weight: 800; color: rgba(255,255,255,0.12); line-height: 1; pointer-events: none; transition: color .4s, transform .4s; }
.region-card:hover .region-num { color: rgba(255,255,255,0.2); transform: scale(1.04); }

/* ═══ DESTINATIONS (Horizontal Carousel) ═══ */
#destinations { padding: var(--section-y) var(--section-x); background: var(--bg-surface); position: relative; overflow: hidden; }
#destinations::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(to right, transparent, var(--border-light), transparent); }
#destinations::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background: linear-gradient(to right, transparent, var(--border-light), transparent); }

.dest-header-wrapper { max-width: var(--content-max); margin: 0 auto 36px; display: flex; justify-content: space-between; align-items: flex-end;}
.dest-filter-bar { max-width: var(--content-max); margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.dest-filter-btn {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-card);
  color: var(--text-dim); font-family: var(--ff-body); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; transition: all .25s ease; white-space: nowrap; min-height: 40px;
}
.dest-filter-btn:hover { border-color: var(--border-med); color: var(--text-main); }
.dest-filter-btn.active { background: var(--accent-1); border-color: var(--accent-1); color: var(--text-inv); font-weight: 600; }
.dest-filter-saved { margin-left: 4px; border-left: 1px solid var(--border-med); padding-left: 20px; }
.dest-filter-saved.active { background: #e0455f; border-color: #e0455f; color: #fff; }
.dest-empty-state { display: none; text-align: center; max-width: var(--content-max); margin: -10px auto 20px; color: var(--text-mute); font-size: 14px; }
.dest-empty-state.show { display: block; }
.dest-card.filtered-out { display: none; }
.dest-carousel-wrapper { position: relative; max-width: 1300px; margin: 0 auto; }
.dest-track { 
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; 
  padding: 20px 60px 40px; scroll-behavior: smooth; margin: 0 -60px;
  -ms-overflow-style: none; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.dest-track::-webkit-scrollbar { display: none; }
.dest-card { 
  flex: 0 0 300px; height: 400px; position: relative; overflow: hidden; border-radius: var(--radius-lg); 
  scroll-snap-align: center; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: var(--shadow-card); border: 1px solid var(--border-light);
}
.dest-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,0.28); border-color: var(--border-med); z-index: 2;}

.dest-nav-btns { display: flex; gap: 12px; }
.dest-nav-btn { 
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-med);
  background: var(--bg-card); color: var(--text-main); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .3s;
}
.dest-nav-btn:hover { background: var(--accent-1); color: var(--text-inv); border-color: var(--accent-1); transform: scale(1.1); }
.dest-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; background: transparent; color: var(--text-dim); }

/* Destination cards — designed to look rich even without photography */
.dest-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  background-color: #0c1220;
  --sky: rgba(255,255,255,0.14);
  --glow: rgba(255,255,255,0.12);
  --accent-line: rgba(255,255,255,0.35);
}
.dest-card:hover .dest-bg { transform: scale(1.05); }

/* Soft vignette + light bloom (shared) */
.dest-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 28%),
    radial-gradient(ellipse 90% 70% at 12% 8%, rgba(255,255,255,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 78%, rgba(0,0,0,0.3) 0%, transparent 50%),
    linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 48%);
}

/* Large monogram watermark (city initials) — pure CSS via data-dest */
.dest-bg::before {
  content: '';
  position: absolute;
  right: -4%;
  top: 6%;
  z-index: 0;
  font-family: var(--ff-display);
  font-size: clamp(4.6rem, 12vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: rgba(255,255,255,0.13);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transform: rotate(-10deg);
  text-shadow: 0 12px 48px rgba(0,0,0,0.25);
  transition: color .35s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.dest-card:hover .dest-bg::before {
  color: rgba(255,255,255,0.18);
  transform: rotate(-8deg) scale(1.04);
}
.dest-card[data-dest="nyc"] .dest-bg::before { content: 'NYC'; }
.dest-card[data-dest="la"] .dest-bg::before { content: 'LA'; }
.dest-card[data-dest="chicago"] .dest-bg::before { content: 'CHI'; }
.dest-card[data-dest="miami"] .dest-bg::before { content: 'MIA'; }
.dest-card[data-dest="nola"] .dest-bg::before { content: 'NOLA'; }
.dest-card[data-dest="vegas"] .dest-bg::before { content: 'LV'; }
.dest-card[data-dest="sf"] .dest-bg::before { content: 'SF'; }
.dest-card[data-dest="seattle"] .dest-bg::before { content: 'SEA'; }
.dest-card[data-dest="austin"] .dest-bg::before { content: 'ATX'; }
.dest-card[data-dest="dc"] .dest-bg::before { content: 'DC'; }
.dest-card[data-dest="honolulu"] .dest-bg::before { content: 'HNL'; }
.dest-card[data-dest="boston"] .dest-bg::before { content: 'BOS'; }

/*
 * Layered CSS art (no photo required):
 * 1–8 skyline bars, 9 glow orb, 10 diagonal sheen, 11 accent hairline, 12 city gradient
 */
.dest-card .dest-bg {
  background-image:
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    linear-gradient(var(--sky), var(--sky)),
    radial-gradient(ellipse 55% 42% at 78% 18%, var(--glow) 0%, transparent 70%),
    linear-gradient(125deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%),
    linear-gradient(var(--accent-line), var(--accent-line)),
    var(--dest-grad, linear-gradient(160deg, #1a2438 0%, #0a101c 100%));
  background-size:
    9% 26%, 6% 36%, 11% 20%, 7% 42%, 10% 30%, 5% 24%, 8% 38%, 13% 22%,
    100% 100%,
    100% 100%,
    100% 2px,
    100% 100%;
  background-position:
    5% 100%, 16% 100%, 26% 100%, 38% 100%, 50% 100%, 62% 100%, 74% 100%, 86% 100%,
    0 0,
    0 0,
    0 0,
    0 0;
  background-repeat: no-repeat;
}

/* Per-city color stories — vivid even without photos */
.db-nyc {
  --dest-grad: linear-gradient(145deg, #2a4a78 0%, #152038 40%, #1a1030 100%);
  --sky: rgba(212,175,100,0.28);
  --glow: rgba(201,162,89,0.32);
  --accent-line: rgba(201,162,89,0.55);
}
.db-la {
  --dest-grad: linear-gradient(155deg, #9a4a6e 0%, #4a1e38 42%, #1a0c18 100%);
  --sky: rgba(255,190,130,0.26);
  --glow: rgba(255,140,100,0.28);
  --accent-line: rgba(255,170,120,0.5);
}
.db-chi {
  --dest-grad: linear-gradient(150deg, #1e5a7a 0%, #0c2c40 48%, #061018 100%);
  --sky: rgba(150,200,230,0.28);
  --glow: rgba(100,180,220,0.28);
  --accent-line: rgba(140,200,230,0.5);
}
.db-mia {
  --dest-grad: linear-gradient(150deg, #1290a0 0%, #0a4550 45%, #051820 100%);
  --sky: rgba(100,240,220,0.24);
  --glow: rgba(80,220,200,0.3);
  --accent-line: rgba(80,230,210,0.5);
}
.db-nola {
  --dest-grad: linear-gradient(150deg, #6e3488 0%, #321450 48%, #0e0618 100%);
  --sky: rgba(230,170,255,0.24);
  --glow: rgba(200,120,255,0.28);
  --accent-line: rgba(210,150,255,0.5);
}
.db-veg {
  --dest-grad: linear-gradient(140deg, #a83828 0%, #541810 38%, #1a0806 100%);
  --sky: rgba(255,140,90,0.26);
  --glow: rgba(255,90,60,0.3);
  --accent-line: rgba(255,120,80,0.55);
}
.db-sf {
  --dest-grad: linear-gradient(155deg, #4a7a9c 0%, #2a4a5c 35%, #8a4a38 72%, #1a0e12 100%);
  --sky: rgba(210,225,255,0.26);
  --glow: rgba(160,200,255,0.28);
  --accent-line: rgba(180,210,255,0.5);
}
.db-sea {
  --dest-grad: linear-gradient(150deg, #1e7058 0%, #0e3830 48%, #061610 100%);
  --sky: rgba(120,230,190,0.24);
  --glow: rgba(80,200,160,0.28);
  --accent-line: rgba(100,220,180,0.5);
}
.db-aus {
  --dest-grad: linear-gradient(150deg, #a06a30 0%, #543818 45%, #1c1208 100%);
  --sky: rgba(255,210,110,0.26);
  --glow: rgba(255,180,80,0.28);
  --accent-line: rgba(255,190,100,0.5);
}
.db-dc {
  --dest-grad: linear-gradient(150deg, #364a72 0%, #182038 48%, #080c14 100%);
  --sky: rgba(190,210,245,0.26);
  --glow: rgba(140,170,230,0.28);
  --accent-line: rgba(180,200,240,0.5);
}
.db-hon {
  --dest-grad: linear-gradient(150deg, #1ea088 0%, #0e5848 42%, #062018 100%);
  --sky: rgba(90,250,210,0.22);
  --glow: rgba(60,220,180,0.3);
  --accent-line: rgba(80,240,200,0.5);
}
.db-bos {
  --dest-grad: linear-gradient(150deg, #7a3430 0%, #401818 48%, #140808 100%);
  --sky: rgba(255,170,150,0.24);
  --glow: rgba(230,120,100,0.28);
  --accent-line: rgba(255,150,130,0.5);
}

.dest-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.5) 40%,
    rgba(0,0,0,0.1) 68%,
    transparent 100%
  );
}
.dest-tag { font-family: var(--ff-serif); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 8px; }
.dest-name {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  font-weight: 700; line-height: 1.15; margin-bottom: 12px; color: #fff;
}
.dest-desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Helpful links inside destination modals */
.modal-links {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}
.modal-links-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 12px;
}
.modal-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-links-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.modal-links-list a::after {
  content: '↗';
  font-size: 12px;
  opacity: 0.55;
  margin-left: auto;
  flex-shrink: 0;
}
.modal-links-list a:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: var(--bg-card-hov);
  transform: translateX(2px);
}
.modal-links-list a:hover::after { opacity: 1; }
.modal-links-list a:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}
.dest-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.dest-meta-item { display: flex; flex-direction: column; gap: 4px; }
.dest-meta-label { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.dest-meta-val { font-size: 11px; font-weight: 600; color: #fff; }
.dest-arrow { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; transition: all .3s; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.dest-card:hover .dest-arrow { background: var(--accent-1); color: var(--text-inv); border-color: var(--accent-1); transform: rotate(45deg) scale(1.1); }
.dest-fav-btn { position: absolute; top: 14px; left: 14px; width: 42px; height: 42px; z-index: 5; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); cursor: pointer; transition: all .25s cubic-bezier(0.2,0.8,0.2,1); }
.dest-fav-btn:hover { transform: scale(1.15); background: rgba(0,0,0,0.55); }
.dest-fav-btn.active { background: #e0455f; border-color: #e0455f; color: #fff; }
.dest-fav-btn.active svg { fill: currentColor; }
.dest-fav-btn svg { transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dest-fav-btn.pulse svg { animation: favPulse .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes favPulse { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.dest-rating { display: flex; gap: 4px; margin-bottom: 10px; }
.dest-star { color: var(--accent-1); font-size: 12px; }
.dest-star.half { position: relative; color: rgba(255,255,255,0.25); }
.dest-star.half::before { content: '★'; position: absolute; inset: 0; width: 50%; overflow: hidden; color: var(--accent-1); }

/* ═══ PRACTICAL CARDS ═══ */
#practical { padding: var(--section-y) var(--section-x); }
.practical-grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.prac-card { padding: 48px 32px 56px; background: var(--bg-surface); transition: background .4s; position: relative; cursor: pointer; outline: none; overflow: hidden; }
.prac-card:hover, .prac-card:focus-visible { background: var(--bg-surface-2); }
.prac-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--accent-1); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.prac-card:hover::before, .prac-card:focus-visible::before { transform: scaleX(1); }
.prac-icon { font-size: 2.5rem; margin-bottom: 24px; display: inline-flex; transition: transform .35s ease; }
.prac-card:hover .prac-icon { transform: scale(1.06); }
.prac-title { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
.prac-body { font-size: 14px; color: var(--text-dim); line-height: 1.8; }
.prac-body strong { color: var(--text-main); font-weight: 500; }
.prac-more { margin-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: all .4s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 6px 12px; border-radius: 20px; border: 1px solid transparent; }
.prac-card:hover .prac-more { opacity: 1; transform: translateY(0); border-color: var(--border-med); background: var(--bg-card-hov); }
.prac-num { position: absolute; bottom: 16px; right: 24px; font-family: var(--ff-display); font-size: 4rem; font-weight: 900; color: var(--border-light); line-height: 1; transition: color .4s, transform .4s; }
.prac-card:hover .prac-num { color: var(--border-med); transform: scale(1.05) translate(-4px, -4px); }

/* ═══ SEASONS ═══ */
#seasons { padding: var(--section-y) var(--section-x); background: var(--bg-surface); position: relative; }
.seasons-grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 2.4fr; gap: 80px; align-items: start; }
.seasons-left h2 { font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.12; margin-bottom: 24px; }
.seasons-left h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.seasons-left p { font-size: 14px; color: var(--text-dim); line-height: 1.8; margin-bottom: 32px; }
.season-temp-scale { margin-top: 36px; }
.temp-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; }
.temp-bar-wrap { display: flex; flex-direction: column; gap: 10px; }
.temp-row { display: flex; align-items: center; gap: 12px; }
.temp-season-name { font-size: 11px; font-weight: 500; color: var(--text-dim); width: 50px; flex-shrink: 0; }
.temp-track { flex: 1; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.temp-fill { height: 100%; border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.temp-fill.animated { transform: scaleX(1); }
.temp-spring { background: linear-gradient(to right, #60d060, #a0e870); width: 55%; }
.temp-summer { background: linear-gradient(to right, #ffb020, #ffe060); width: 85%; }
.temp-fall   { background: linear-gradient(to right, #e06020, #ffb040); width: 60%; }
.temp-winter { background: linear-gradient(to right, #4080d0, #80c0f0); width: 30%; }
.temp-val { font-size: 11px; color: var(--text-mute); width: 40px; text-align: right; font-weight: 600; }

.seasons-right { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.season-card { padding: 32px 28px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, transform .35s ease; cursor: pointer; background: var(--bg-card); backdrop-filter: blur(8px); }
.season-card:hover { transform: translateY(-3px); border-color: var(--border-med); box-shadow: var(--shadow-card); background: var(--bg-card-hov); }
.season-card::before { content:''; position:absolute; inset:0; opacity:.06; transition:opacity .4s; pointer-events:none; }
.season-card:hover::before { opacity:.18; }
.sc-spring::before { background: radial-gradient(circle at 80% 15%, #80e060 0%, transparent 65%); }
.sc-summer::before { background: radial-gradient(circle at 80% 15%, #ffb020 0%, transparent 65%); }
.sc-fall::before   { background: radial-gradient(circle at 80% 15%, #e06020 0%, transparent 65%); }
.sc-winter::before { background: radial-gradient(circle at 80% 15%, #60b0e0 0%, transparent 65%); }
.season-emoji { font-size: 2.2rem; margin-bottom: 16px; display: inline-flex; transition: transform .35s ease; }
.season-card:hover .season-emoji { transform: scale(1.06); }
.season-name { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.season-months { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--accent-1); text-transform: uppercase; margin-bottom: 16px; }
.season-desc { font-size: 13px; color: var(--text-dim); line-height: 1.8; margin-bottom: 18px; }
.season-go { font-size: 12px; color: var(--text-main); }
.season-go strong { color: var(--accent-1); }
.season-badge { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; background: var(--bg-card-hov); color: var(--accent-1); border: 1px solid var(--border-med); opacity: 0; transition: all .4s cubic-bezier(0.2, 0.8, 0.2, 1); transform: translateY(-10px); }
.season-card:hover .season-badge { opacity: 1; transform: translateY(0); }

/* ═══ CULTURE ═══ */
#culture { padding: var(--section-y) var(--section-x); }
.culture-intro { max-width: var(--content-max); margin: 0 auto 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.culture-intro h2 { font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.12; }
.culture-intro h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.culture-intro p { font-size: 14px; color: var(--text-dim); line-height: 1.8; }
/* Culture: denser “field notes” mosaic — less floaty card stack */
.culture-tiles { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.culture-tile { padding: 28px 18px 24px; border: none; border-radius: 0; transition: background .3s ease; text-align: left; cursor: pointer; position: relative; overflow: hidden; background: var(--bg-surface); }
.culture-tile::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--accent-1); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; opacity: .9; }
.culture-tile:hover { border-color: transparent; transform: none; box-shadow: none; background: var(--bg-surface-2); z-index:2; }
.culture-tile:hover::before { transform: scaleY(1); opacity: 1; }
.culture-tile-icon { font-size: 1.65rem; margin-bottom: 14px; display: inline-flex; transition: opacity .3s ease; opacity: .92; }
.culture-tile:hover .culture-tile-icon { transform: none; opacity: 1; }
.culture-tile-name { font-family: var(--ff-display); font-size: 0.95rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; letter-spacing: -.01em; }
.culture-tile-desc { font-size: 12px; color: var(--text-dim); line-height: 1.65; max-width: 28ch; }

/* ═══ MARQUEE ═══ */
.marquee-section { border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); overflow: hidden; background: var(--bg-card); position: relative; z-index: 10;}
.marquee-section::before, .marquee-section::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.marquee-section::before { left:0; background: linear-gradient(to right, var(--bg-base), transparent); }
.marquee-section::after  { right:0; background: linear-gradient(to left, var(--bg-base), transparent); }
.marquee-track { display: flex; animation: marqueeScroll 40s linear infinite; white-space: nowrap; will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { padding: 18px 40px; font-family: var(--ff-display); font-style: italic; font-size: 1.2rem; color: var(--text-dim); letter-spacing: .04em; display: flex; align-items: center; gap: 20px; flex-shrink: 0; transition: color .3s, transform 0.3s; cursor: default; }
.marquee-item:hover { color: var(--text-main); transform: scale(1.05); }
.marquee-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-1); opacity: .6; flex-shrink:0; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ ROUTES ═══ */
#routes { padding: var(--section-y) var(--section-x); }
.routes-grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.route-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, transform .35s ease; cursor: pointer; background: var(--bg-card); backdrop-filter: blur(10px); }
.route-card:hover { border-color: var(--border-med); transform: translateY(-3px); box-shadow: var(--shadow-card); background: var(--bg-card-hov); }
.route-header { padding: 32px 28px 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; position: relative; }
.route-header::after { content:''; position:absolute; bottom:-1px; left:0; height: 2px; background: var(--accent-1); width: 0; transition: width .6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.route-card:hover .route-header::after { width: 100%; }
.route-icon { font-size: 1.8rem; margin-bottom: 12px; display: inline-flex; transition: opacity .3s ease; }
.route-card:hover .route-icon { transform: none; opacity: 1; }
.route-name { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.route-dist { font-size: 12px; color: var(--accent-1); letter-spacing: .08em; font-weight: 500; }
.route-miles { font-size: 11px; color: var(--text-mute); margin-top: 3px; letter-spacing: .03em; }
.route-duration { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-1); background: var(--bg-card); padding: 6px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; border: 1px solid var(--border-light); transition: all .3s; }
.route-card:hover .route-duration { background: var(--accent-1); border-color: var(--accent-1); color: var(--text-inv); }
.route-body { padding: 24px 28px; }
.route-desc { font-size: 14px; color: var(--text-dim); line-height: 1.8; margin-bottom: 24px; }
.route-stops { display: flex; flex-direction: column; gap: 0; }
.route-stop { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text-dim); padding: 10px 0; border-bottom: 1px solid var(--border-light); transition: all .3s; position: relative; }
.route-stop:last-child { border-bottom: none; }
.route-card:hover .route-stop:hover { color: var(--text-main); padding-left: 8px; font-weight: 500; }
.route-stop-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-med); flex-shrink: 0; transition: all .3s; background: var(--bg-surface); z-index: 2; }
.route-card:hover .route-stop:first-child .route-stop-dot, .route-card:hover .route-stop:last-child .route-stop-dot, .route-card:hover .route-stop:hover .route-stop-dot { background: var(--accent-1); border-color: var(--accent-1); transform: scale(1.2); }
.route-connector { position: absolute; left: 4px; top: 20px; width: 2px; height: calc(100% + 2px); background: var(--border-light); z-index: 1; }
.route-stop:last-child .route-connector { display: none; }

/* ═══ TIPS ═══ */
#tips { padding: var(--section-y) var(--section-x); background: var(--bg-surface); }
.tips-header { max-width: var(--content-max); margin: 0 auto 60px; }
.tips-header h2 { font-family: var(--ff-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.12; margin-bottom: 16px; }
.tips-header p { max-width: var(--prose-max); font-size: var(--fs-small); line-height: 1.7; }
.tips-header h2 em { font-style: italic; color: var(--accent-1); font-weight: 400; }
.tips-header p { font-size: 14px; color: var(--text-dim); max-width: 580px; line-height: 1.8; }
.tips-grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; border-top: 1px solid var(--border-light); }
/* Tips: dossier-style rows — horizontal emphasis instead of bouncing cards */
.tip-row { padding: 26px 28px; border: 1px solid var(--border-light); border-radius: 0; display: flex; gap: 20px; align-items: flex-start; transition: background .3s ease, border-color .3s ease; cursor: pointer; position: relative; overflow: hidden; background: transparent; }
.tip-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--accent-1); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.tip-row:hover { border-color: var(--border-med); background: var(--bg-card); transform: none; box-shadow: none; }
.tip-row:hover::before { transform: scaleY(1); }
.tip-icon { font-size: 1.35rem; flex-shrink: 0; margin-top: 2px; opacity: .9; transition: opacity .3s ease; }
.tip-row:hover .tip-icon { transform: none; opacity: 1; }
.tip-title { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; letter-spacing: -.01em; }
.tip-body { font-size: 0.9rem; color: var(--text-dim); line-height: 1.75; }
.tip-body strong { color: var(--text-main); font-weight: 500; }

/* ═══ MODAL OVERLAY ═══ */
#modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--modal-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility .4s;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
}
#modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
  background: var(--bg-surface); border: 1px solid var(--border-med); border-radius: 12px;
  max-width: 750px; width: 100%; max-height: min(85dvh, 85vh); overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: scale(.9) translateY(30px); transition: transform .5s cubic-bezier(.22,1,.36,1); position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
#modal-overlay.open .modal-box { transform: scale(1) translateY(0); }
.modal-header { padding: 40px 40px 0; border-bottom: 1px solid var(--border-light); padding-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-tag { font-family: var(--ff-serif); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 12px; }
.modal-title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  font-weight: 700; line-height: 1.15;
}
.modal-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-dim); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal-close:hover { border-color: var(--accent-1); color: var(--text-inv); transform: rotate(90deg) scale(1.1); background: var(--accent-1); }
.modal-body { padding: 32px 40px 40px; }
.modal-body p {
  font-size: var(--fs-body); color: var(--text-dim); line-height: var(--body-leading);
  margin-bottom: 20px; max-width: var(--prose-max);
}
.modal-body strong { color: var(--text-main); font-weight: 500; }
.modal-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 32px; }
.modal-fact { padding: 20px; border: 1px solid var(--border-light); border-radius: 8px; text-align: center; background: var(--bg-card); }
.modal-fact-num { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 700; color: var(--accent-1); }
.modal-fact-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-top: 6px; }
.modal-highlights { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-card-hov); padding: 24px; border-radius: 8px; border-left: 3px solid var(--accent-1); }
.modal-highlight { display: flex; gap: 16px; align-items: flex-start; font-size: 14px; color: var(--text-dim); }
.modal-highlight::before { content: '→'; color: var(--accent-1); flex-shrink: 0; margin-top: 1px; font-weight: 700; }

/* ═══ LEGAL PAGES (Privacy / Terms) — Apple-like clean reading layout ═══ */
body.page-legal {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--section-x);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-light);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.legal-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.legal-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
}
.legal-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 600 11px/1.2 var(--ff-body);
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.legal-lang-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hov);
}
.legal-lang-btn[aria-pressed="true"],
.legal-lang-btn.active {
  color: var(--text-inv);
  background: var(--accent-1);
}
@media (max-width: 720px) {
  .legal-lang-btn { padding: 7px 8px; font-size: 10px; }
  .legal-topbar { flex-wrap: wrap; }
}
.legal-main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--section-x) clamp(48px, 8vw, 96px);
}
/* Legal pages: settings overlay must sit above sticky top bar; panel uses full settings grid */
body.page-legal .settings-overlay {
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body.page-legal .settings-panel {
  width: min(100%, 1100px);
  max-height: min(90dvh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.page-legal .settings-grid {
  grid-template-columns: 1.3fr 1fr;
}
body.page-legal .settings-group-wide {
  grid-column: 1 / -1;
}
@media (max-width: 860px) {
  body.page-legal .settings-grid {
    grid-template-columns: 1fr;
  }
}
.legal-doc {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.legal-doc-header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-light);
}
.legal-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 12px;
}
.legal-doc h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text-main);
}
.legal-updated {
  font-size: 14px;
  color: var(--text-mute);
  margin: 0 0 20px;
}
.legal-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
  max-width: 40em;
}
.legal-toc {
  margin: 0 0 40px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
}
.legal-toc-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 12px;
}
.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-toc a {
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
}
.legal-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section {
  margin-bottom: 36px;
  scroll-margin-top: 88px;
}
.legal-section h2 {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text-main);
}
.legal-section p,
.legal-section li {
  color: var(--text-dim);
  margin: 0 0 12px;
}
.legal-section ul {
  margin: 0 0 12px;
  padding-left: 1.25rem;
}
.legal-section li {
  margin-bottom: 8px;
}
.legal-section a {
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 500;
}
.legal-section a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}
.legal-note {
  font-size: 13.5px;
  color: var(--text-mute) !important;
  font-style: italic;
}
.legal-doc-footer {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
}
.legal-doc-footer a {
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.legal-doc-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-copy {
  font-size: 12px;
  color: var(--text-mute);
  margin: 12px 0 0;
}
.legal-site-footer {
  border-top: 1px solid var(--border-light);
  padding: 28px var(--section-x) 40px;
  background: var(--bg-base);
}
.legal-site-footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.legal-footer-home {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.legal-footer-home:hover { color: var(--accent-1); }
.legal-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.legal-footer-nav a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
}
.legal-footer-nav a:hover,
.legal-footer-nav a[aria-current="page"] {
  color: var(--accent-1);
}
/*
  Footer legal strip: plain text links (not buttons).
  Must NOT use bare `nav {}` fixed positioning (that pinned these to the top).
*/
.footer-legal-links {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: auto;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
  z-index: auto;
}
.footer-legal-links a {
  font-size: var(--fs-micro, 12px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-mute);
  text-decoration: none;
  line-height: 1.4;
  padding: 0 2px;
  border: 0;
  background: none;
  border-radius: 0;
  min-height: 0;
  box-shadow: none;
  transform: none;
}
.footer-legal-links a:hover {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  transform: none;
}
.footer-legal-sep {
  color: var(--text-mute);
  opacity: 0.5;
  font-size: var(--fs-micro, 12px);
  font-weight: 400;
  user-select: none;
  padding: 0 8px;
  line-height: 1;
}
html[data-theme="minimal"] .legal-doc h1,
html[data-theme="minimal"] .legal-section h2,
html[data-theme="glass"] .legal-doc h1,
html[data-theme="glass"] .legal-section h2 {
  font-style: normal;
  letter-spacing: -0.03em;
}

/* ═══ FUN FACTS (one-at-a-time) ═══ */
#fun-facts {
  padding: var(--section-y) var(--section-x);
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}
#fun-facts::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, color-mix(in srgb, var(--accent-1) 12%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, color-mix(in srgb, var(--accent-1) 8%, transparent) 0%, transparent 50%);
  opacity: 0.9;
}
.fun-facts-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.fun-facts-header {
  text-align: center;
  margin-bottom: 36px;
}
.fun-facts-header h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-top: 8px;
  margin-bottom: 14px;
}
.fun-facts-header h2 em {
  font-style: italic;
  color: var(--accent-1);
  font-weight: 400;
}
.fun-facts-header p {
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.7;
  max-width: var(--prose-max);
  margin: 0 auto;
}
.fun-fact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 14px);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-card);
  transition: border-color .3s, box-shadow .3s;
  /* Fixed footprint so short/long facts never resize the layout */
  height: 320px;
  display: flex;
  flex-direction: column;
}
.fun-fact-card:hover {
  border-color: var(--border-med);
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}
.fun-fact-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.fun-fact-badge {
  font-family: var(--ff-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
}
/* Fixed text region: centers short facts, scrolls only if needed */
.fun-fact-text-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  /* Subtle edge fade when content is long */
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 12px), transparent 100%);
}
.fun-fact-text {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
  width: 100%;
  max-width: var(--prose-max);
  letter-spacing: -0.01em;
}
.fun-fact-text.is-swapping {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.fun-fact-text.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}
.fun-fact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: auto;
}
.fun-fact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--border-med);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.fun-fact-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: translateY(-1px);
}
.fun-fact-btn:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}
.fun-fact-btn-primary {
  background: var(--accent-1);
  border-color: var(--accent-1);
  color: var(--text-inv);
  min-width: min(100%, 220px);
  width: 100%;
  max-width: 280px;
}
.fun-fact-btn-primary:hover {
  background: var(--accent-1-lt, var(--accent-1));
  border-color: var(--accent-1-lt, var(--accent-1));
  color: var(--text-inv);
}
@media (max-width: 540px) {
  .fun-fact-card { height: 340px; }
}
/* Fun-fact swap: keep a short fade under reduced; only Off kills it (via data-motion-effective) */

/* ═══ SITE FOOTER (homepage — compact after multi-column links were removed) ═══ */
.site-footer,
footer.site-footer {
  position: relative;
  padding: clamp(3.5rem, 3rem + 3vw, 5.5rem) var(--section-x) clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
  text-align: center;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: max(1.5rem, var(--section-x));
  right: max(1.5rem, var(--section-x));
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-med), transparent);
  pointer-events: none;
}
.site-footer-inner {
  max-width: min(36rem, var(--content-max));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.site-footer-brand {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem) !important;
  text-decoration: none;
  margin-bottom: 0.85rem;
}
.site-footer-tagline {
  margin: 0 0 1.5rem;
  max-width: min(34rem, var(--prose-max));
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.7;
  color: var(--text-dim);
  text-wrap: pretty;
}
.site-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2rem;
}
.footer-github-link,
.footer-about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.footer-github-link:hover,
.footer-about-link:hover {
  border-color: var(--accent-1);
  color: var(--text-inv);
  background: var(--accent-1);
  transform: translateY(-1px);
}
.site-footer-meta {
  width: 100%;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.site-footer-copy {
  margin: 0;
  max-width: 40rem;
  font-size: var(--fs-micro, 0.75rem);
  line-height: 1.55;
  color: var(--text-mute);
  font-weight: 400;
}
.site-footer-motto {
  margin: 0;
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.site-footer .footer-legal-links {
  margin-top: 0.15rem;
}

/* Legacy multi-column footer bits (if reused elsewhere) */
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-bottom { max-width: var(--content-max); margin: 0 auto; }
.footer-motto { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--text-dim); }

/* ═══ SCROLL REVEAL ═══
   Restrained editorial entrances — short travel, soft ease.
   Avoids the large “template card cascade” slide that feels generic. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-14px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.reveal-right { opacity: 0; transform: translateX(14px);  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1  { transition-delay: .04s; }
.reveal-delay-2  { transition-delay: .08s; }
.reveal-delay-3  { transition-delay: .12s; }
.reveal-delay-4  { transition-delay: .16s; }
.reveal-delay-5  { transition-delay: .2s; }

@media (max-width: 900px), (pointer: coarse) {
  /* Prefer snappier reveals over motion on touch devices */
  .reveal, .reveal-left, .reveal-right {
    transition-duration: .35s;
  }
  .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4, .reveal-delay-5 {
    transition-delay: 0s;
  }
}

/* ═══ LAYOUT SAFETY NET ═══
   Grid/flex items default to min-width:auto, which can force overflow when
   content contains long unbreakable words (this is what broke the hero on
   mobile). Applied broadly here so it stays safe across all languages. */
.hero-content, .intro-left, .intro-right, .seasons-left, .seasons-right,
.season-card, .culture-intro > *, .section-header > *, .dest-header-wrapper > *,
.site-footer-inner, .routes-grid > *, .tips-grid > *,
.culture-tiles > *, .practical-grid > *, .regions-track > *,
.settings-grid > *, .tools-grid > *, .theme-swatch-grid > *, .theme-swatch, .pill-group > * {
  min-width: 0;
}
h1, h2, h3, .hero-desc, .intro-body, .intro-pull, p { overflow-wrap: break-word; }

/* Fixed nav is ~90px tall at rest; offset anchor targets so headings
   never land underneath it, whether scrolled via JS or a plain # link. */
section[id], footer[id] { scroll-margin-top: 90px; }

/* ═══ RESPONSIVE ═══
   Breakpoints cover: large tablet/small laptop (1100), tablet portrait &
   large phones landscape (860), phones (540), narrow phones (400),
   wearable/mini webviews (280), plus short-viewport rules earlier. */
@media (max-width: 1100px) {
  .regions-nav-btns { display: flex; }
  /* When scroll arrows appear, keep intro copy above them in the right column */
  .regions-header-wrapper {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    grid-template-areas:
      "title copy"
      "title nav";
  }
  .regions-track {
    display: flex; grid-template-columns: none; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 60px 28px; margin: 0 -60px;
    -ms-overflow-style: none; scrollbar-width: none;
    /* Touch momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .regions-track::-webkit-scrollbar { display: none; }
  .region-card { flex: 0 0 min(300px, 78vw); scroll-snap-align: center; }
  .practical-grid { grid-template-columns: repeat(2,1fr); }
  .culture-tiles { grid-template-columns: repeat(3,1fr); }
  .routes-grid { grid-template-columns: repeat(2, 1fr); }
  /* Destinations carousel stays usable on tablets */
  .dest-track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .dest-card { flex: 0 0 min(320px, 78vw); }
}
@media (max-width: 860px) {
  #navbar { padding: 20px 24px; }
  #navbar.scrolled { padding: 14px 24px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .nav-hamburger { display: flex; }
  /* Mobile hero: fill the screen with balanced vertical centering, less empty void */
  #hero {
    align-items: center;
    min-height: 100dvh;
    min-height: 100svh;
  }
  #hero, #intro, #regions, #destinations, #practical, #seasons, #culture, #routes, #tips, #gallery, #fun-facts, .site-footer,
  .gallery-teaser-section { padding-left: 24px; padding-right: 24px; }
  .hero-content {
    padding: max(5.5rem, calc(4.5rem + env(safe-area-inset-top, 0px))) 24px max(5rem, calc(3.5rem + env(safe-area-inset-bottom, 0px)));
    max-width: 36rem;
  }
  .hero-eyebrow {
    margin-bottom: 16px;
    letter-spacing: .18em;
  }
  .hero-h1 {
    max-width: 12ch;
    line-height: 0.98;
    margin-bottom: 1.1rem;
  }
  .hero-desc {
    font-size: clamp(0.98rem, 3.6vw, 1.08rem);
    line-height: 1.62;
    margin-bottom: 1.75rem;
    max-width: 34em;
  }
  .hero-cta { gap: 10px; }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost {
    border-radius: 10px;
    letter-spacing: .1em;
    min-height: 48px;
  }
  .hero-scroll {
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
  .scroll-line { height: 44px; }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: stretch;
  }
  /* Intro photos remain visible on mobile: hero tall + two-up row */
  .intro-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .intro-right .img-card-tall {
    height: clamp(220px, 58vw, 300px);
    width: 100%;
  }
  .intro-right .img-card-row { gap: 12px; }
  .intro-right .img-card-sm {
    height: clamp(132px, 36vw, 180px);
    min-height: 120px;
  }
  .intro-right .scene-label {
    bottom: 10px;
    left: 10px;
    font-size: 9px;
    letter-spacing: .1em;
    padding: 5px 8px;
  }
  .intro-facts { grid-template-columns: repeat(2,1fr); }
  .regions-track { padding: 4px 24px 28px; margin: 0 -24px; }
  .region-card { flex: 0 0 min(268px, 78vw); height: min(440px, 70vh); }
  .practical-grid { grid-template-columns: 1fr; background: none; border: none; gap: 16px; }
  .prac-card { border: 1px solid var(--border-light); border-radius: 8px; }
  .seasons-grid { grid-template-columns: 1fr; gap: 48px; }
  .culture-tiles { grid-template-columns: repeat(2, 1fr); }
  .routes-grid { grid-template-columns: 1fr; }
  .tips-grid { grid-template-columns: 1fr; }

  .settings-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); align-items: stretch; }
  .settings-panel { max-height: calc(100dvh - 24px); padding: 26px 18px; }
  .settings-title-row { align-items: center; }
  .settings-close { flex-basis: 40px; width: 40px; height: 40px; }
  .settings-grid { grid-template-columns: 1fr; }
  /* tools-grid already collapses at 900px; keep panel usable on phones */
  .tools-panel { max-height: calc(100dvh - 24px); width: min(100%, 1180px); }
  .theme-swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { display: none; }
  .site-footer { text-align: center; }
  .section-header { grid-template-columns: 1fr; }
  .section-header p { text-align: left; max-width: 100%; }
  .dest-header-wrapper { flex-wrap: wrap; gap: 16px; }
  .regions-header-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "nav";
    row-gap: 14px;
    align-items: start;
  }
  .regions-header-wrapper > p {
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }
  .regions-header-wrapper > .regions-nav-btns {
    justify-self: start;
  }
  .culture-intro { grid-template-columns: 1fr; gap: 32px; }
  .dest-track { padding: 10px 24px 30px; margin: 0 -24px;}
  .dest-card { flex: 0 0 min(280px, 82vw); height: min(380px, 62vh);}
  .modal-facts { grid-template-columns: 1fr 1fr; }
  .modal-header, .modal-body { padding-left: 24px; padding-right: 24px; }
  .modal-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .modal-header { padding-top: 28px; padding-bottom: 18px; }
  /* Mobile nav: account for notches + bottom home indicator */
  .nav-mobile {
    padding-top: max(100px, calc(80px + env(safe-area-inset-top, 0px)));
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep sticky gallery filters under the mini-app bar on phones */
  body.page-gallery .gallery-filters {
    top: calc(60px + env(safe-area-inset-top, 0px));
  }
}
/* Mid phones / small tablets in portrait — avoid cramped 3-col swatches */
@media (max-width: 720px) {
  .theme-swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-facts { gap: 10px; }
  .fact-card { padding: 18px 14px; }
  /* Keep From | ⇄ | To — never stack swap as a full-width bar */
  .currency-tool {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  }
  .currency-tool .tool-field:first-child { grid-column: 1 / -1; }
  .currency-tool .tool-swap {
    width: 48px;
    height: 46px;
    border-radius: 50%;
    justify-self: center;
  }
}
@media (max-width: 540px) {
  .tool-two-col { grid-template-columns: 1fr; }
  .tool-card { padding: 22px 18px; }
  .culture-tiles { grid-template-columns: repeat(2,1fr); }
  .seasons-right { grid-template-columns: 1fr; }
  .modal-facts { grid-template-columns: 1fr; }
  .region-card { flex-basis: min(240px, 82vw); height: min(420px, 68vh); }
  .btn-primary, .btn-ghost { min-height: 44px; }
  .gallery-filter { min-height: 44px; }
  /* Sticky filters: leave room for gallery mini-app bar on phones */
  body.page-gallery .gallery-filters {
    top: calc(56px + env(safe-area-inset-top, 0px));
  }
}
@media (max-width: 400px) {
  .hero-cta { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-ghost {
    flex: 1 1 auto; justify-content: center; width: 100%; text-align: center;
  }
  #hero, #intro, #regions, #destinations, #practical, #seasons, #culture, #routes, #tips, footer,
  .gallery-teaser-section { padding-left: 16px; padding-right: 16px; }
  /* Mini-app pages keep the roomier gallery-style gutters (not the 16px guide squeeze) */
  body.page-gallery #gallery,
  body.page-tools #tools.tools-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  #navbar { padding-left: 14px; padding-right: 14px; }
  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: max(5rem, calc(4rem + env(safe-area-inset-top, 0px)));
    padding-bottom: max(4.25rem, calc(3rem + env(safe-area-inset-bottom, 0px)));
  }
  .hero-h1 { font-size: clamp(2.55rem, 12.5vw, 3.35rem); letter-spacing: -.035em; }
  .hero-desc { font-size: 0.98rem; }
  .section-header h2, #practical h2, .tips-header h2 { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; }
  .loader-bar { width: min(240px, 70vw); }
  .theme-swatch-grid { grid-template-columns: 1fr 1fr; }
  .regions-track { padding: 4px 14px 28px; margin: 0 -14px; }
  .dest-track { padding: 10px 14px 30px; margin: 0 -14px; }
}
/* Ultra-narrow / wearable webviews (~Apple Watch size and similar). */
@media (max-width: 280px) {
  #navbar { padding: 10px 8px; gap: 6px; }
  .nav-logo { font-size: 16px; }
  .nav-actions { gap: 4px; margin-left: 4px; }
  .nav-settings-btn, .nav-tool-btn { width: 34px; height: 34px; font-size: 14px; }
  #hero { min-height: 280px; }
  .hero-content { padding: 0 8px 40px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: .12em; }
  .hero-desc { font-size: 13px; }
  .gallery-caption { font-size: 10px; }
  .settings-panel { padding: 16px 12px; }
  .theme-swatch-grid { grid-template-columns: 1fr; }
  .culture-tiles { grid-template-columns: 1fr; }
}
/* Foldables / split-screen: very short + moderately wide */
@media (max-height: 500px) and (min-width: 600px) {
  #hero { min-height: 320px; height: 100dvh; }
  .hero-content { padding-bottom: 40px; }
  .hero-stats { display: none; }
  .hero-scroll { display: none; }
  .settings-panel, .tools-panel { max-height: calc(100dvh - 16px); }
}
/* Safe areas for notched phones / Dynamic Island when not already covered. */
@supports (padding: max(0px)) {
  #navbar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  @media (min-width: 861px) {
    #navbar {
      padding-left: max(60px, env(safe-area-inset-left));
      padding-right: max(60px, env(safe-area-inset-right));
    }
  }
}
/* Very large / TV viewports: keep type and section rhythm proportional. */
@media (min-width: 1920px) {
  .hero-content { max-width: 1100px; padding-bottom: 120px; }
  .hero-h1 { font-size: clamp(5rem, 7vw, 9rem); }
  #intro, #regions, #destinations, #practical, #seasons, #culture, #routes, #tips, #gallery {
    padding-left: clamp(60px, 6vw, 120px);
    padding-right: clamp(60px, 6vw, 120px);
  }
}

/* ═══ CONSTRAINED / WEARABLE WEBVIEWS (watchOS Safari, mini browsers) ═══
   Goal: zero “A problem occurred” from GPU/memory thrash. Prefer content
   over effects — effects are progressive enhancement on larger screens. */
@media (max-width: 320px), (max-height: 280px) {
  #cursorCanvas,
  body::before,
  #progress-bar { display: none !important; }

  /* Skip boot splash — less time stuck on a spinner */
  #loader { display: none !important; }

  /* Instant content — no scroll-reveal waiting on IO / animations */
  .reveal,
  .reveal-left,
  .reveal-right,
  .gallery-item img,
  .gallery-caption {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .gallery-item { min-height: 0; }
  .gallery-item.is-revealed .gallery-caption { opacity: 1 !important; }

  /* Blur is expensive and flaky on tiny GPUs */
  nav,
  .gallery-app-bar,
  .settings-overlay,
  .lightbox,
  .lightbox-progress,
  .nav-mobile,
  #modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html { scroll-behavior: auto; }
  #hero { min-height: 220px; height: auto; padding-bottom: 24px; }
  .hero-h1 { font-size: clamp(1.6rem, 12vw, 2.2rem); margin-bottom: 12px; }
  .hero-stats, .hero-scroll { display: none !important; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .lightbox-img {
    max-width: 96vw;
    max-height: 55dvh;
    min-width: 0;
    min-height: 0;
    box-shadow: none;
  }
  .lightbox-progress {
    width: min(200px, 80%);
    min-width: 120px;
    padding: 8px 10px;
  }
  .lightbox-progress-msg { font-size: 10px; }
  .lightbox-progress-pct { font-size: 11px; }

  .settings-panel,
  .tools-panel { max-height: none; }
  .tool-card { padding: 14px 12px; }
}

/* ═══ THEME-SPECIFIC FINISH ═══
   Each palette already owns tokens; these are surgical overrides so light
   themes never wash out type, and glass/luxury keep their character. */
html[data-theme="minimal"] .btn-primary,
html[data-theme="elegant"] .btn-primary {
  color: #fff;
}
html[data-theme="minimal"] .btn-primary:hover,
html[data-theme="elegant"] .btn-primary:hover {
  color: #fff;
}
html[data-theme="minimal"] .dest-filter-btn.active,
html[data-theme="elegant"] .dest-filter-btn.active,
html[data-theme="minimal"] .gallery-filter.active,
html[data-theme="elegant"] .gallery-filter.active {
  color: #fff;
}
html[data-theme="minimal"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 28% 48%, rgba(0, 113, 227, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 55%, #e8e8ed 100%);
}
/* Daylight type: product-page clarity (tighter tracking, less “magazine serif”) */
html[data-theme="minimal"] .hero-h1,
html[data-theme="minimal"] .section-header h2,
html[data-theme="minimal"] .intro-left h2,
html[data-theme="minimal"] .nav-logo,
html[data-theme="minimal"] .gallery-app-title {
  font-style: normal;
  letter-spacing: -0.02em;
  font-weight: 700;
}
html[data-theme="minimal"] .hero-h1 em,
html[data-theme="minimal"] .section-header h2 em,
html[data-theme="minimal"] .intro-left h2 em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-1);
}
html[data-theme="minimal"] .section-eyebrow,
html[data-theme="minimal"] .hero-eyebrow {
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-mute);
}
html[data-theme="minimal"] .section-eyebrow::after,
html[data-theme="minimal"] .hero-eyebrow::before {
  background: var(--border-med);
  opacity: 1;
}
html[data-theme="minimal"] body::before {
  opacity: 0.02;
  mix-blend-mode: multiply;
}
html[data-theme="minimal"] .btn-primary {
  border-radius: 980px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
html[data-theme="minimal"] .btn-ghost {
  border-radius: 980px;
}
html[data-theme="minimal"] #navbar {
  border-bottom: 1px solid var(--border-light);
}
html[data-theme="elegant"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 28% 48%, rgba(122, 46, 46, 0.07) 0%, transparent 70%),
    linear-gradient(165deg, #fffdf8 0%, #f6f1e8 45%, #e4d9c8 100%);
}
/* Twilight Glass finish — Apple dark product page (pair with Gallery Daylight) */
html[data-theme="glass"] { color-scheme: dark; }
html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] .tool-seg-btn.active,
html[data-theme="glass"] .dest-filter-btn.active,
html[data-theme="glass"] .gallery-filter.active,
html[data-theme="glass"] .gallery-teaser-cta {
  color: #fff;
}
html[data-theme="glass"] .btn-primary {
  border-radius: 980px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
html[data-theme="glass"] .btn-ghost {
  border-radius: 980px;
}
html[data-theme="glass"] .hero-h1,
html[data-theme="glass"] .section-header h2,
html[data-theme="glass"] .intro-left h2,
html[data-theme="glass"] .nav-logo,
html[data-theme="glass"] .gallery-app-title {
  font-style: normal;
  letter-spacing: -0.02em;
  font-weight: 700;
}
html[data-theme="glass"] .hero-h1 em,
html[data-theme="glass"] .section-header h2 em,
html[data-theme="glass"] .intro-left h2 em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-1);
}
html[data-theme="glass"] .section-eyebrow,
html[data-theme="glass"] .hero-eyebrow {
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-mute);
}
html[data-theme="glass"] .section-eyebrow::after,
html[data-theme="glass"] .hero-eyebrow::before {
  background: var(--border-med);
  opacity: 1;
}
html[data-theme="glass"] #navbar {
  border-bottom: 1px solid var(--border-light);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
html[data-theme="glass"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 28% 48%, rgba(10, 132, 255, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #000000 0%, #0a0a0c 50%, #1d1d1f 100%);
}
html[data-theme="glass"] body::before {
  opacity: 0.03;
  mix-blend-mode: soft-light;
}
html[data-theme="glass"] body {
  background-image: none;
  background-color: var(--bg-base);
}
html[data-theme="glass"] .settings-panel,
html[data-theme="glass"] .settings-group,
html[data-theme="glass"] .tool-card,
html[data-theme="glass"] .modal-box {
  background: rgba(29, 29, 31, 0.88);
  border-color: var(--border-light);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
html[data-theme="luxury"] .section-eyebrow,
html[data-theme="luxury"] .nav-logo {
  letter-spacing: .14em;
}
html[data-theme="luxury"] .btn-primary {
  letter-spacing: .16em;
}
html[data-theme="nature"] .section-eyebrow::after {
  opacity: .55;
}
/* Light themes: softer card shadows, stronger borders for definition */
html[data-theme="minimal"] .fact-card,
html[data-theme="elegant"] .fact-card,
html[data-theme="minimal"] .season-card,
html[data-theme="elegant"] .season-card,
html[data-theme="minimal"] .route-card,
html[data-theme="elegant"] .route-card,
html[data-theme="minimal"] .settings-group,
html[data-theme="elegant"] .settings-group,
html[data-theme="minimal"] .tool-card,
html[data-theme="elegant"] .tool-card {
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 28px rgba(20, 20, 20, 0.05);
}
/* Culture mosaic + tip dossier rows: no floating shadows (shared hairlines only) */
html[data-theme="minimal"] .culture-tile,
html[data-theme="elegant"] .culture-tile,
html[data-theme="minimal"] .tip-row,
html[data-theme="elegant"] .tip-row {
  box-shadow: none;
}
html[data-theme="minimal"] .culture-tiles,
html[data-theme="elegant"] .culture-tiles {
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 28px rgba(20, 20, 20, 0.05);
}
html[data-theme="minimal"] .prac-card,
html[data-theme="elegant"] .prac-card {
  border-color: var(--border-light);
}

/* Cards & type weight — magazine body is never ultra-thin */
.intro-body, .hero-desc, .section-header p, .route-desc, .tip-body, .prac-body, .culture-tile-desc {
  font-weight: 400;
}

/* ═══ CJK TYPOGRAPHY (Chinese · Japanese) ═══
   Full-width glyphs read larger than Latin at the same px size, and very
   tight Latin line-heights / negative tracking make big CJK titles feel
   oversized and cramped. Scale display type down and open leading.
   Selectors cover both data-lang (set by JS) and native lang attrs. */
html[data-lang="zh"],
html[data-lang="ja"],
html[lang^="zh"],
html[lang="ja"] {
  /* Prefer Noto for CJK runs; Latin still falls through to Public Sans / Fraunces */
  --ff-body: 'Noto Sans SC', 'Noto Sans JP', 'Public Sans', Helvetica, Arial, sans-serif;
  word-break: break-word;
  line-break: strict;
}

html[data-lang="zh"],
html[lang^="zh"] {
  --ff-display: 'Noto Serif SC', 'Noto Sans SC', 'Fraunces', Georgia, serif;
  --ff-serif:   'Noto Serif SC', 'Noto Sans SC', Georgia, serif;
  --ff-body:    'Noto Sans SC', 'Public Sans', Helvetica, Arial, sans-serif;
}

html[data-lang="ja"],
html[lang="ja"] {
  --ff-display: 'Noto Serif JP', 'Noto Sans JP', 'Fraunces', Georgia, serif;
  --ff-serif:   'Noto Serif JP', 'Noto Sans JP', Georgia, serif;
  --ff-body:    'Noto Sans JP', 'Public Sans', Helvetica, Arial, sans-serif;
}

/* Daylight theme already uses sans for display — keep that for CJK too */
html[data-theme="minimal"][data-lang="zh"],
html[data-theme="minimal"][lang^="zh"] {
  --ff-display: 'Noto Sans SC', 'Public Sans', Helvetica, Arial, sans-serif;
  --ff-serif:   'Noto Sans SC', 'Public Sans', Helvetica, Arial, sans-serif;
}
html[data-theme="minimal"][data-lang="ja"],
html[data-theme="minimal"][lang="ja"] {
  --ff-display: 'Noto Sans JP', 'Public Sans', Helvetica, Arial, sans-serif;
  --ff-serif:   'Noto Sans JP', 'Public Sans', Helvetica, Arial, sans-serif;
}

/* Large display / title sizes — ~20–30% smaller max, roomier line-height */
html[data-lang="zh"] .hero-h1,
html[data-lang="ja"] .hero-h1,
html[lang^="zh"] .hero-h1,
html[lang="ja"] .hero-h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.28;
  letter-spacing: 0;
  font-weight: 700;
}
html[data-lang="zh"] .hero-h1 em,
html[data-lang="ja"] .hero-h1 em,
html[lang^="zh"] .hero-h1 em,
html[lang="ja"] .hero-h1 em {
  font-style: normal; /* CJK italics often synthesize poorly */
  font-weight: 600;
}

html[data-lang="zh"] .intro-left h2,
html[data-lang="ja"] .intro-left h2,
html[data-lang="zh"] .section-header h2,
html[data-lang="ja"] .section-header h2,
html[data-lang="zh"] .seasons-left h2,
html[data-lang="ja"] .seasons-left h2,
html[data-lang="zh"] .culture-intro h2,
html[data-lang="ja"] .culture-intro h2,
html[data-lang="zh"] .tips-header h2,
html[data-lang="ja"] .tips-header h2,
html[data-lang="zh"] .settings-header h2,
html[data-lang="ja"] .settings-header h2,
html[data-lang="zh"] .loader-text,
html[data-lang="ja"] .loader-text,
html[lang^="zh"] .intro-left h2,
html[lang="ja"] .intro-left h2,
html[lang^="zh"] .section-header h2,
html[lang="ja"] .section-header h2,
html[lang^="zh"] .seasons-left h2,
html[lang="ja"] .seasons-left h2,
html[lang^="zh"] .culture-intro h2,
html[lang="ja"] .culture-intro h2,
html[lang^="zh"] .tips-header h2,
html[lang="ja"] .tips-header h2,
html[lang^="zh"] .settings-header h2,
html[lang="ja"] .settings-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 700;
}

html[data-lang="zh"] .intro-left h2 em,
html[data-lang="ja"] .intro-left h2 em,
html[data-lang="zh"] .section-header h2 em,
html[data-lang="ja"] .section-header h2 em,
html[data-lang="zh"] .settings-header h2 em,
html[data-lang="ja"] .settings-header h2 em,
html[lang^="zh"] .intro-left h2 em,
html[lang="ja"] .intro-left h2 em,
html[lang^="zh"] .section-header h2 em,
html[lang="ja"] .section-header h2 em {
  font-style: normal;
  font-weight: 600;
}

html[data-lang="zh"] .intro-pull,
html[data-lang="ja"] .intro-pull,
html[lang^="zh"] .intro-pull,
html[lang="ja"] .intro-pull {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.75;
  letter-spacing: 0;
  font-style: normal;
}

html[data-lang="zh"] .modal-title,
html[data-lang="ja"] .modal-title,
html[lang^="zh"] .modal-title,
html[lang="ja"] .modal-title {
  font-size: clamp(1.45rem, 3.5vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0;
}

html[data-lang="zh"] .nav-mobile a,
html[data-lang="ja"] .nav-mobile a,
html[data-lang="zh"] .nav-mobile-settings,
html[data-lang="ja"] .nav-mobile-settings,
html[lang^="zh"] .nav-mobile a,
html[lang="ja"] .nav-mobile a,
html[lang^="zh"] .nav-mobile-settings,
html[lang="ja"] .nav-mobile-settings {
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0;
}

html[data-lang="zh"] .dest-name,
html[data-lang="ja"] .dest-name,
html[lang^="zh"] .dest-name,
html[lang="ja"] .dest-name {
  font-size: 1.45rem;
  line-height: 1.3;
  letter-spacing: 0;
}

html[data-lang="zh"] .region-name,
html[data-lang="ja"] .region-name,
html[lang^="zh"] .region-name,
html[lang="ja"] .region-name {
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: 0;
}

html[data-lang="zh"] .stat-num,
html[data-lang="ja"] .stat-num,
html[lang^="zh"] .stat-num,
html[lang="ja"] .stat-num {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: 0;
}

html[data-lang="zh"] .tool-result,
html[data-lang="ja"] .tool-result,
html[lang^="zh"] .tool-result,
html[lang="ja"] .tool-result {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0;
}

html[data-lang="zh"] .loader-text,
html[data-lang="ja"] .loader-text,
html[lang^="zh"] .loader-text,
html[lang="ja"] .loader-text {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-style: normal;
  letter-spacing: 0.04em;
}

/* Body / UI copy: slightly more leading for dense CJK */
html[data-lang="zh"] body,
html[data-lang="ja"] body,
html[lang^="zh"] body,
html[lang="ja"] body {
  line-height: 1.85;
}
html[data-lang="zh"] .hero-desc,
html[data-lang="ja"] .hero-desc,
html[data-lang="zh"] .intro-body,
html[data-lang="ja"] .intro-body,
html[lang^="zh"] .hero-desc,
html[lang="ja"] .hero-desc,
html[lang^="zh"] .intro-body,
html[lang="ja"] .intro-body {
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* Decorative giant numbers stay subdued for CJK layout density */
html[data-lang="zh"] .region-num,
html[data-lang="ja"] .region-num,
html[data-lang="zh"] .prac-num,
html[data-lang="ja"] .prac-num,
html[lang^="zh"] .region-num,
html[lang="ja"] .region-num,
html[lang^="zh"] .prac-num,
html[lang="ja"] .prac-num {
  font-size: 3.2rem;
}

@media (max-width: 400px) {
  html[data-lang="zh"] .hero-h1,
  html[data-lang="ja"] .hero-h1,
  html[lang^="zh"] .hero-h1,
  html[lang="ja"] .hero-h1 {
    font-size: clamp(1.85rem, 9vw, 2.6rem);
    line-height: 1.3;
  }
  html[data-lang="zh"] .section-header h2,
  html[data-lang="ja"] .section-header h2,
  html[lang^="zh"] .section-header h2,
  html[lang="ja"] .section-header h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
  }
}

/* ═══ ANIMATION LEVELS (Settings: Full / Reduced / Off)
   - full: default site motion
   - reduced: short opacity-first motion (a11y-friendly)
   - off: no decorative motion
   data-motion-effective is set by JS (user + OS + constrained device).
   OS prefers-reduced-motion maps to the same as “reduced”. */

/* ── Reduced: minimal smooth motion ── */
html[data-motion-effective="reduced"] {
  scroll-behavior: auto;
}
html[data-motion-effective="reduced"] #cursorCanvas { display: none !important; }
html[data-motion-effective="reduced"] .dest-track,
html[data-motion-effective="reduced"] .regions-track { scroll-behavior: auto; }

/* Soft, short fades — no large slides/scales */
html[data-motion-effective="reduced"] .reveal,
html[data-motion-effective="reduced"] .reveal-left,
html[data-motion-effective="reduced"] .reveal-right {
  transform: none;
  transition: opacity .35s ease;
  transition-delay: 0s !important;
}
html[data-motion-effective="reduced"] .reveal.visible,
html[data-motion-effective="reduced"] .reveal-left.visible,
html[data-motion-effective="reduced"] .reveal-right.visible {
  opacity: 1;
  transform: none;
}

html[data-motion-effective="reduced"] .hero-eyebrow,
html[data-motion-effective="reduced"] .hero-h1,
html[data-motion-effective="reduced"] .hero-desc,
html[data-motion-effective="reduced"] .hero-cta,
html[data-motion-effective="reduced"] .hero-stats,
html[data-motion-effective="reduced"] .hero-scroll {
  animation-name: fadeIn;
  animation-duration: .4s;
  animation-delay: .05s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  transform: none;
}

/* Dial down large hover motion (keep subtle feedback) */
html[data-motion-effective="reduced"] .dest-card:hover,
html[data-motion-effective="reduced"] .region-card:hover,
html[data-motion-effective="reduced"] .route-card:hover,
html[data-motion-effective="reduced"] .tip-row:hover,
html[data-motion-effective="reduced"] .prac-card:hover,
html[data-motion-effective="reduced"] .fact-card:hover,
html[data-motion-effective="reduced"] .culture-tile:hover {
  transform: none;
}
html[data-motion-effective="reduced"] .dest-card:hover .dest-bg,
html[data-motion-effective="reduced"] .region-card:hover .region-card-bg {
  transform: none;
}
html[data-motion-effective="reduced"] .marquee-track {
  animation: none;
}
html[data-motion-effective="reduced"] .fun-fact-text.is-swapping,
html[data-motion-effective="reduced"] .fun-fact-text.is-visible {
  transition-duration: .15s;
  transform: none;
}
html[data-motion-effective="reduced"] .loader-fill {
  animation-duration: .6s;
}
html[data-motion-effective="reduced"] #modal-overlay,
html[data-motion-effective="reduced"] .modal-box,
html[data-motion-effective="reduced"] .settings-overlay,
html[data-motion-effective="reduced"] .lightbox {
  transition-duration: .2s !important;
}

/* OS preference: same as Reduced until user picks Off or Full (JS may still set data-motion-effective) */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-effective="off"]):not([data-motion-effective="full"]) {
    scroll-behavior: auto;
  }
}

/* ── Off: no decorative motion ── */
html[data-motion-effective="off"] *,
html[data-motion-effective="off"] *::before,
html[data-motion-effective="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html[data-motion-effective="off"] { scroll-behavior: auto; }
html[data-motion-effective="off"] #cursorCanvas { display: none !important; }
html[data-motion-effective="off"] .dest-track,
html[data-motion-effective="off"] .regions-track { scroll-behavior: auto; }
html[data-motion-effective="off"] .hero-eyebrow,
html[data-motion-effective="off"] .hero-h1,
html[data-motion-effective="off"] .hero-desc,
html[data-motion-effective="off"] .hero-cta,
html[data-motion-effective="off"] .hero-stats,
html[data-motion-effective="off"] .hero-scroll {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
html[data-motion-effective="off"] .reveal,
html[data-motion-effective="off"] .reveal-left,
html[data-motion-effective="off"] .reveal-right {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-motion-effective="off"] .marquee-track { animation: none !important; }

/* Legacy attribute still written when effective === off */
html[data-reduce-motion="true"] #cursorCanvas { display: none !important; }