/* ============================================================
   CULTURE COMPASS — Design System
   Modern + Premium + Nature-focused + Tourism-oriented
   Palette: rainforest green · warm gold · cream
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Greens */
  --green-950: #0c2015;
  --green-900: #12291b;
  --green-850: #173322;
  --green-800: #1d3f2a;
  --green-700: #275338;
  --green-600: #336a47;
  --green-500: #44845c;
  --green-200: #c9dcc9;
  --green-100: #e3ece0;
  --green-50:  #f0f5ec;

  /* Gold */
  --gold:      #c9a24b;
  --gold-soft: #e3c98a;
  --gold-bright: #eabf62;

  /* Neutrals */
  --cream:     #faf6ec;
  --cream-2:   #f3ecdc;
  --sand:      #e9dfc8;
  --ink:       #1c2b21;
  --ink-soft:  #43524a;
  --muted:     #64746a;
  --white:     #ffffff;

  /* Surfaces */
  --bg: var(--cream);
  --surface: var(--white);
  --surface-dark: var(--green-950);

  /* Type */
  --font-display: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Effects */
  --radius-lg: 2.25rem;
  --radius-md: 1.25rem;
  --radius-sm: 0.75rem;
  --shadow-sm: 0 2px 10px rgba(18, 41, 27, 0.08);
  --shadow-md: 0 10px 30px rgba(18, 41, 27, 0.12);
  --shadow-lg: 0 24px 60px rgba(18, 41, 27, 0.18);
  --ring: 0 0 0 3px rgba(201, 162, 75, 0.55);

  --container: 1140px;
  --nav-h: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 112.5%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

ul { padding-left: 1.25em; }

/* ---------- Utilities ---------- */
.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--dark { background: var(--surface-dark); color: #d8e4d6; }
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
/* The map section and the results list that follows it share one cream
   background, so their stacked padding-block (2 x clamp(4rem, 9vw, 7rem) ≈ 224px
   at desktop) read as an empty band under the map. Trimming the join lifts
   "All locations" up to meet the map. */
.section--map { padding-bottom: clamp(2rem, 4vw, 3rem); }
.section--results { padding-top: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.kicker::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.section--dark .kicker { color: var(--gold-soft); }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 56ch; }
.section--dark .lede { color: #b9cbb8; }

.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--green-950);
  box-shadow: 0 8px 24px rgba(201, 162, 75, 0.35);
}
.btn-gold:hover { box-shadow: 0 12px 30px rgba(201, 162, 75, 0.45); transform: translateY(-2px); color: var(--green-950); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(250, 246, 236, 0.4);
}
.btn-ghost:hover { border-color: var(--cream); background: rgba(250, 246, 236, 0.08); transform: translateY(-2px); }

.btn-light {
  background: var(--cream);
  color: var(--green-900);
}
.btn-light:hover { background: var(--white); transform: translateY(-2px); color: var(--green-900); }

.btn-outline {
  background: transparent;
  color: var(--green-800);
  border-color: var(--green-800);
}
.btn-outline:hover { background: var(--green-800); color: var(--cream); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0.75rem;
  z-index: 200;
  background: var(--green-900);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { left: 0.75rem; }

/* ---------- Language layer (EN / BM) ----------
   Both languages are present in the markup and the inactive one is hidden.
   Written as "hide the other language" rather than "show this one" so the
   visible element keeps its natural display value (inline for prose inside a
   paragraph, block for a heading) — `display: revert` is not reliable here.
   With JavaScript off, <html data-lang="en"> simply keeps the page English. */
html[data-lang="en"] [data-lang="ms"],
html[data-lang="ms"] [data-lang="en"] { display: none; }

/* Bilingual kickers read "English · Bahasa" in English and "Bahasa · English"
   in BM, so the reader's own language always comes first. */
.lang-note {
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: var(--green-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.lang-note strong { color: var(--green-800); }
.lang-note p { margin: 0.35rem 0 0; }
html[data-lang="en"] .lang-note { display: none; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 32, 21, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(250, 246, 236, 0.08);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand:hover { color: var(--cream); }
.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex: none;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  color: #cfe0cd;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}
.nav-menu a:hover { color: var(--cream); background: rgba(250, 246, 236, 0.08); }
.nav-menu a:active { background: var(--gold); color: var(--green-950); }
.nav-menu a[aria-current] {
  color: var(--green-950);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  font-weight: 700;
}
.nav-menu a[aria-current]:hover { color: var(--green-950); background: var(--gold-bright); }
.nav-menu .btn { margin-left: 0.6rem; padding: 0.6rem 1.25rem; font-size: 0.92rem; }

/* ---------- Language switch (EN | BM) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.75rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(250, 246, 236, 0.08);
  border: 1px solid rgba(250, 246, 236, 0.16);
  list-style: none;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cfe0cd;
  transition: color 0.2s, background 0.2s;
}
.lang-switch button:hover { color: var(--cream); background: rgba(250, 246, 236, 0.1); }
.lang-switch button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--green-950);
  font-weight: 700;
}
.lang-switch button:focus-visible { box-shadow: var(--ring); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%, 7px) rotate(45deg); top: 50%; }
.nav-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -7px) rotate(-45deg); top: 50%; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--green-950);
    border-bottom: 1px solid rgba(250, 246, 236, 0.1);
    padding: 1rem 1.5rem 1.5rem;
    display: none;
    /* A phone in landscape is shorter than the opened menu, and the menu is
       absolutely positioned under the sticky header, so page scrolling cannot
       reveal what falls past the viewport. Without this the last two items —
       Responsible Tourism and the EN/BM switch — were unreachable at 844x390. */
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 0.8rem 1rem; font-size: 1.05rem; }
  .nav-menu .btn { margin: 0.75rem 0 0; justify-content: center; }
  /* The switch lives inside the nav menu, so on mobile it drops to the bottom
     of the opened menu as a self-sized control rather than a stretched row. */
  .lang-switch { align-self: flex-start; margin: 0.9rem 0 0; }
  .lang-switch button { padding: 0.5rem 0.95rem; font-size: 0.9rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(39, 83, 56, 0.55), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(27, 62, 38, 0.7), transparent 55%),
    linear-gradient(160deg, var(--green-950) 0%, var(--green-900) 55%, var(--green-850) 100%);
  color: var(--cream);
  overflow: hidden;
}

/* Full-bleed photograph fading into the green background on the left */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero-fade {
  position: absolute;
  inset: 0;
  /* Desktop fade: a narrow green band (~20% of the hero) that dissolves
     into the photograph rather than sitting beside it. The photo is offset
     to start exactly at 20% (see the min-width: 901px block below), so the
     veil is still near-opaque where the photo begins — that hides the seam
     and lets the image emerge gradually. Tuned so the veil has already
     fallen to ~0.45 by 46%, keeping the copy readable while the villages
     come through. Mobile redefines this below. */
  background: linear-gradient(to right,
    var(--green-900) 0%,
    var(--green-900) 18%,
    rgba(18, 41, 27, 0.92) 26%,
    rgba(18, 41, 27, 0.72) 36%,
    rgba(18, 41, 27, 0.45) 46%,
    rgba(18, 41, 27, 0.15) 56%,
    rgba(18, 41, 27, 0) 66%);
}

.hero-compass-watermark {
  position: absolute;
  left: -9rem;
  top: -7rem;
  width: 34rem;
  height: 34rem;
  color: rgba(250, 246, 236, 0.05);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
  min-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 9vw, 6.5rem) clamp(4.5rem, 10vw, 7rem);
}

.hero-copy { max-width: 46ch; }

.hero-credit {
  position: absolute;
  right: 1.5rem;
  bottom: 1.4rem;
  max-width: 34ch;
  font-size: 0.78rem;
  color: rgba(250, 246, 236, 0.9);
  background: rgba(12, 32, 21, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(250, 246, 236, 0.18);
}
.hero-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-credit a:hover { color: var(--gold-soft); }
.hero-credit .hero-credit-photo { display: block; margin-top: 0.25rem; font-size: 0.72rem; opacity: 0.85; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 1.4rem;
}
.hero-kicker::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--gold);
}

.hero h1 { color: var(--cream); margin-bottom: 0.3em; }
.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  color: var(--cream);
  margin: 0 0 0.8em;
}

.hero-sub { color: #b9cbb8; max-width: 46ch; margin-bottom: 2rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.4rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-stats li {
  font-size: 0.85rem;
  color: #cfe0cd;
  background: rgba(250, 246, 236, 0.06);
  border: 1px solid rgba(250, 246, 236, 0.12);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.hero-stats strong { color: var(--gold-bright); font-weight: 700; }

@media (max-width: 900px) {
  .hero-media img { object-position: 62% center; }
  .hero-fade {
    background: linear-gradient(to right,
      var(--green-950) 0%,
      rgba(18, 41, 27, 0.88) 34%,
      rgba(18, 41, 27, 0.5) 68%,
      rgba(18, 41, 27, 0.12) 100%);
  }
  .hero-content { min-height: auto; }
  .hero-credit { display: none; }
}

@media (min-width: 901px) {
  /* Offset the photo so its left edge starts where the green band ends
     (~20%), instead of the old 50/50 split. The villages in the frame still
     clear the veil, and the 20% strip stays bare .hero background for the
     headline to sit on. */
  .hero-media img { transform: translateX(20%); }
}

/* ---------- Core idea strip ---------- */
.core-idea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding-block: 1.4rem;
  border-block: 1px solid rgba(201, 162, 75, 0.25);
  margin-top: 1rem;
}
.core-idea .step {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--green-700);
  background: var(--green-100);
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--green-200);
}
.core-idea .step--gold { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.core-idea .join { color: var(--gold); font-size: 1.3rem; }

/* ---------- About column: the core-idea photograph (landing page) ----------
   The landing page's About column shows this instead of the core-idea pills
   (the pills still live on about.html). The source frame is 4:3, so the box
   matches it exactly and no part of the house is cropped away. */
.about-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-100);
  box-shadow: var(--shadow-md);
}
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Split rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(18, 41, 27, 0.06);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card .card-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.9rem;
}
.card h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
.card p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }

/* Dark cards */
.card--dark {
  background: rgba(250, 246, 236, 0.05);
  border: 1px solid rgba(250, 246, 236, 0.12);
  box-shadow: none;
}
.card--dark:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.card--dark h3 { color: var(--cream); }
.card--dark p { color: #b9cbb8; }
.card--dark .card-num { color: var(--gold-soft); }

/* ---------- Pillars (solution) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}
.pillar {
  background: var(--surface);
  border: 1px solid rgba(18, 41, 27, 0.08);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.pillar:hover { transform: translateY(-4px); border-color: rgba(201, 162, 75, 0.6); box-shadow: var(--shadow-md); }
.pillar .pillar-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
  background: var(--gold);
  color: var(--green-950);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 1rem;
}
.pillar-icon svg { width: 1.4rem; height: 1.4rem; }
.pillar h3 { font-size: 1.08rem; color: var(--ink); margin-bottom: 0.35em; }
.pillar p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid rgba(18, 41, 27, 0.1); }

.accordion-item { border-bottom: 1px solid rgba(18, 41, 27, 0.1); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 1.35rem 0.35rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.accordion-trigger:hover .accordion-title { color: var(--green-600); }

.accordion-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid;
  place-items: center;
}

.accordion-title { font-size: 1.15rem; font-weight: 600; flex: 1; transition: color 0.2s; }
.accordion-ms { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; color: var(--muted); margin-top: 0.1rem; }

.accordion-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform 0.35s var(--ease), background 0.3s, color 0.3s;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--green-950);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.accordion-trigger[aria-expanded="true"] + .accordion-panel { grid-template-rows: 1fr; }

.accordion-panel-inner { overflow: hidden; }

.accordion-body {
  padding: 0 0.35rem 1.6rem 3.6rem;
  color: var(--ink-soft);
  max-width: 72ch;
}
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body ul { margin: 0.6em 0 1em; }
.accordion-body li { margin-bottom: 0.4em; }

.accordion-source {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px dashed rgba(18, 41, 27, 0.15);
  padding-top: 0.9rem;
}
.accordion-source strong { color: var(--green-700); font-weight: 600; }

@media (max-width: 560px) {
  .accordion-body { padding-left: 0.4rem; }
}

/* ---------- Location placeholder cards ---------- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.6rem;
}

.location-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(18, 41, 27, 0.06);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.location-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: inherit; }

.location-thumb {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--green-200), var(--sand));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.location-thumb svg { width: 3.4rem; height: 3.4rem; color: rgba(29, 63, 42, 0.5); }
.location-thumb .tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--green-900);
  color: var(--gold-soft);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.location-body { padding: 1.25rem 1.4rem 1.4rem; }
.location-body h3 { font-size: 1.15rem; margin-bottom: 0.25em; }
.location-body .region { font-size: 0.82rem; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.4em; }
.location-body p { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 1rem; }
.location-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green-700);
}
.location-card:hover .location-link .arrow { transform: translateX(4px); }
.location-link .arrow { transition: transform 0.25s var(--ease); }

/* Activity signal on location cards — answers "which villages actually
   offer something a visitor can do?" at browse time, not after clicking.
   Tags share one wrapping row so they never overlap on narrow cards. */
.location-thumb .location-tags {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  right: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  z-index: 2;
}
.location-thumb .location-tags .tag { position: static; }
.location-thumb .tag--exp {
  background: var(--gold);
  color: var(--green-950);
}
.location-body .location-exp-count {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 0.9rem;
}

/* ---------- Checklist (responsible tourism) ---------- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.checklist li {
  background: var(--surface);
  border: 1px solid rgba(18, 41, 27, 0.07);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.checklist li::before {
  content: "\2713";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--green-800);
  color: var(--gold-bright);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

/* ---------- Quote ---------- */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.4;
  color: var(--cream);
  max-width: 26ch;
}
.quote .accent { color: var(--gold-bright); }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(39, 83, 56, 0.5), transparent 60%),
    linear-gradient(160deg, var(--green-950), var(--green-850));
  color: var(--cream);
  padding-block: clamp(4rem, 8vw, 6rem);
}
.cta-band h2 { color: var(--cream); }
.cta-band .lede { margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-950);
  color: #9db89c;
  padding-block: 3.5rem 2rem;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-grid h4 { color: var(--cream); font-size: 1rem; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: #9db89c; text-decoration: none; }
.footer-grid a:hover { color: var(--gold-soft); }
.footer-brand .brand { margin-bottom: 0.9rem; }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: #cfe0cd; margin-bottom: 0.4rem; }
.footer-ms { color: #7d9c7c; font-size: 0.85rem; }
/* The Malay echo line exists so an English reader sees the slogan in Malay.
   In BM mode the tagline above it is already Malay, so keeping both would just
   print the same sentence twice in slightly different wording. */
html[data-lang="ms"] .footer-ms { display: none; }

.footer-bottom {
  border-top: 1px solid rgba(250, 246, 236, 0.1);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #6f8f6e;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(39, 83, 56, 0.5), transparent 60%),
    linear-gradient(160deg, var(--green-950), var(--green-850));
  color: var(--cream);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.page-hero h1 { color: var(--cream); margin-bottom: 0.3em; }
.page-hero .lede { color: #b9cbb8; max-width: 60ch; }
.page-hero .kicker { color: var(--gold-soft); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ---------- Focus & motion ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}
.nav-menu a:focus-visible, .btn:focus-visible { box-shadow: var(--ring); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Clickable location cards (landing teaser overlay) ---------- */
.location-card { position: relative; }
.location-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-md);
}
.location-card-link:focus-visible { box-shadow: var(--ring); }
.location-thumb { position: relative; }
.location-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Location detail page ---------- */
.badge {
  display: inline-block;
  background: rgba(201, 162, 75, 0.16);
  border: 1px solid rgba(201, 162, 75, 0.45);
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  margin-right: 0.8rem;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gold-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
}
.back-link:hover { color: var(--gold-bright); }

.featured-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 6px solid rgba(250, 246, 236, 0.08);
  box-shadow: var(--shadow-md);
}
.featured-photo--ph {
  display: grid;
  place-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--green-200), var(--sand));
  color: rgba(29, 63, 42, 0.55);
  border: 1px dashed rgba(29, 63, 42, 0.3);
  text-align: center;
  padding: 1rem;
}
.featured-photo--ph svg { width: 3.2rem; height: 3.2rem; }
.featured-photo--ph p { margin: 0; font-size: 0.95rem; }

/* ---------- Photo attribution badge ----------
   Small translucent pill pinned to the corner of a photo, showing where the
   image came from (photographer · source · license). Rendered from each
   location's photoCredits map: a linked <a> where a verified source url is
   known, a static <span> inside the collage tiles, cards and the landing
   photo band (those are buttons/links themselves). */
.photo-credit {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 1; /* above the photo, below the card tag row (z-index 2) */
  display: inline-block;
  max-width: calc(100% - 1.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
  background: rgba(12, 32, 21, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 236, 0.18);
  text-decoration: none;
}
.about-photo .photo-credit.about-photo-credit {
  /* Doubled class on purpose: this has to outrank `.photo-credit`'s
     white-space: nowrap wherever the two rules sit relative to each other.
     Writing it once with a single class left this credit ellipsised on mobile,
     because the base rule came later in the stylesheet. It names three things
     (photographer · source · licence) on a column narrower than a full-width
     tile, so it wraps rather than truncating. */
  white-space: normal;
  max-width: calc(100% - 1.6rem);
  text-align: left;
  line-height: 1.35;
}

a.photo-credit:hover {
  background: rgba(12, 32, 21, 0.85);
  color: var(--gold-soft);
}
.photo-credit--static { pointer-events: none; }
.location-thumb .photo-credit { left: 0.6rem; bottom: 0.6rem; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.detail-panel {
  background: var(--surface);
  border: 1px solid rgba(18, 41, 27, 0.07);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
}
.detail-panel h2 { font-size: 1.25rem; margin-bottom: 0.6em; }
.detail-panel p { color: var(--ink-soft); font-size: 0.98rem; }
.detail-panel ul { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.detail-panel li { margin-bottom: 0.5em; }
.ph-text { color: var(--muted); font-style: italic; }

/* ---------- Experiences (structured entries) ---------- */
.experience-list { list-style: none; padding: 0; margin: 0; }
.experience-list .experience {
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(18, 41, 27, 0.08);
}
.experience-list .experience:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.experience-desc { margin: 0.35rem 0 0; }
.experience-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem;
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
}
.experience-meta dt {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  padding-top: 0.16em;
}
.experience-meta dd { margin: 0; color: var(--ink-soft); }
.experience-operator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--green-50);
  border: 1px solid rgba(18, 41, 27, 0.08);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--muted);
}
.experience-operator img {
  height: 2.4rem;
  width: auto;
  max-width: 4.2rem;
  object-fit: contain;
  border-radius: 4px;
  background: var(--white);
  flex: 0 0 auto;
}
.experience-operator a { font-weight: 600; }

/* ---------- How to book (location booking channels) ---------- */
.booking-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.booking-list .booking-channel {
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--green-50);
  border: 1px solid rgba(18, 41, 27, 0.08);
  border-radius: var(--radius-sm);
}
.booking-list .booking-channel:last-child { margin-bottom: 0; }
.booking-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.98rem;
}
.booking-head img.booking-logo {
  height: 2rem;
  width: auto;
  max-width: 3.6rem;
  object-fit: contain;
  border-radius: 4px;
  background: var(--white);
  flex: 0 0 auto;
  align-self: center;
}
.booking-kind {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.68rem;
  padding: 0.15em 0.55em;
  border: 1px solid rgba(18, 41, 27, 0.12);
  border-radius: 999px;
  white-space: nowrap;
}
.booking-note { margin: 0.4rem 0 0; font-size: 0.9rem; }
.booking-links { margin: 0.6rem 0 0; font-size: 0.88rem; font-weight: 600; }
.booking-footnote {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(18, 41, 27, 0.08);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Featured experience (landing page) ---------- */
.featured-exp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid rgba(18, 41, 27, 0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.featured-exp-media { position: relative; min-height: 260px; background: var(--green-100); }
.featured-exp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-exp-body { padding: 2.1rem 2.2rem; display: flex; flex-direction: column; justify-content: center; }
.featured-exp-body h3 { font-size: 1.6rem; margin-bottom: 0.3em; }
.featured-exp-where {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.featured-exp-name { font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; }
.featured-exp-desc { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 1.5rem; }
.featured-exp-body .btn { align-self: flex-start; }

@media (max-width: 760px) {
  .featured-exp { grid-template-columns: 1fr; }
  .featured-exp-media { min-height: 210px; }
  .featured-exp-body { padding: 1.6rem 1.4rem; }
  .featured-exp-body h3 { font-size: 1.35rem; }
}

.map-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--green-100), var(--sand));
  border: 1px dashed rgba(29, 63, 42, 0.3);
  display: grid;
  place-items: center;
  gap: 0.8rem;
  color: rgba(29, 63, 42, 0.6);
  text-align: center;
  padding: 1.5rem;
}
.map-placeholder svg { width: 2.6rem; height: 2.6rem; }
.map-placeholder p { margin: 0; font-size: 0.9rem; max-width: 34ch; }
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
}
.placeholder-state {
  border: 1.5px dashed rgba(18, 41, 27, 0.2);
  border-radius: var(--radius-md);
  padding: 2rem;
  color: var(--ink-soft);
  background: var(--cream-2);
}

/* ============================================================
   MALAYSIA STATE MAP (Locations page drill-down)
   ============================================================ */
.btn[hidden] { display: none; } /* .btn sets display:inline-flex, which would beat the UA [hidden] rule */
[hidden] { display: none !important; } /* author display rules (grid/inline-flex) must never beat [hidden] */

.map-wrap { width: 100%; }

.map-head { text-align: center; margin-bottom: 1.6rem; }
.map-head .kicker { justify-content: center; }
.map-head .lede { margin-inline: auto; }

/* Chips row — keyboard + mobile path to the same state selection */
.state-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(29, 63, 42, 0.35);
  background: var(--white);
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.chip:hover { border-color: var(--green-700); transform: translateY(-2px); }
.chip.is-active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  color: var(--green-950);
}
.chip--empty { opacity: 0.55; }
.chip-count {
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--green-100);
  color: var(--green-800);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.chip.is-active .chip-count { background: rgba(18, 41, 27, 0.18); }
.chip:focus-visible { box-shadow: var(--ring); outline: none; }

/* Map panel — the portrait map on its own leaves a wide empty gutter in the
   1140px reading column, so the state chips (the keyboard/mobile route to the
   same selection) sit beside it as a filter list on desktop, and stacked above
   the map on narrow screens. */
.map-panel {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  grid-template-areas: "map side";
  gap: 2.4rem;
  align-items: start;
}
.map-panel .state-map { grid-area: map; }
.map-side { grid-area: side; min-width: 0; }
.map-side-title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-800);
  margin-bottom: 0.75rem;
}
/* Full-width rows read as a filter list: state name left, count badge right. */
.map-panel .state-chips {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.42rem;
  margin-bottom: 0;
}
.map-panel .chip { width: 100%; justify-content: space-between; }
.map-panel .chip:hover { transform: none; } /* the lift looks wrong on a full-width row */
.map-scope {
  max-width: 62ch;
  margin: 1.7rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(18, 41, 27, 0.12);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}
/* Below ~1024px the two columns get too narrow to balance (the map needs 560px
   to stay readable), so the list moves back above the map as a chip row. */
@media (max-width: 1023px) {
  .map-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "map";
    gap: 1.3rem;
  }
  .map-panel .state-chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
  }
  .map-panel .chip { width: auto; justify-content: center; }
}

/* Map canvas */
.state-map {
  /* Peninsular Malaysia is slightly taller than wide (bbox ratio ≈0.9 w/h), so
     the canvas is a portrait box the states fill, instead of the wide box that
     was needed when Sabah/Sarawak stretched the map east. */
  width: 100%;
  /* Hard cap so the stacked layout cannot balloon: without it, width:100% plus
     the aspect ratio would make the canvas ~830px tall on a 800px tablet. */
  max-width: 560px;
  aspect-ratio: 9 / 10;
  margin-inline: auto;
  isolation: isolate; /* keep Leaflet's internal z-indexes (up to 1000) inside the map, so it layers under the sticky header */
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(18, 41, 27, 0.12);
  box-shadow: var(--shadow-md);
  background: var(--green-50);
}
.state-map.leaflet-container { background: var(--green-50); font-family: var(--font-body); } /* same element — leaflet-container is added to the .state-map div itself */
.state-map .leaflet-control-zoom {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.state-map .leaflet-control-zoom a {
  background: var(--white);
  color: var(--green-800);
  border: none;
  width: 34px;
  height: 34px;
  line-height: 34px;
}
.state-map .leaflet-control-zoom a:hover { background: var(--green-100); }
.state-map .leaflet-control-zoom a.leaflet-disabled { color: rgba(100, 116, 106, 0.5); }

.state-map path.leaflet-interactive {
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s ease;
}

/* Chrome draws its UA focus ring on a *clicked* SVG path through plain :focus
   (not :focus-visible), and it traces the path's bounding box — which reads as
   a square border around the state you just clicked. The shared :focus-visible
   rule cannot catch it. The states are mouse targets (no tabindex; keyboard
   users select through the chips below, which keep their --ring), and the gold
   fill is the selection cue, so the ring is suppressed outright. */
.state-map path.leaflet-interactive:focus { outline: none; }

/* On-map state name — hover tooltip */
.state-tip {
  background: rgba(250, 246, 236, 0.96);
  border: 1px solid rgba(18, 41, 27, 0.2);
  box-shadow: var(--shadow-sm);
  color: var(--green-900);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.state-tip::before { display: none; } /* no pointer arrow on plain labels */

/* Fallback when the map cannot load */
.map-fallback {
  margin-top: 1rem;
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--cream-2);
  color: var(--ink-soft);
  text-align: center;
}
.map-wrap.is-fallback .state-map { display: none; }
.map-wrap.is-fallback .state-chips { display: none; }
.map-wrap.is-fallback .map-side-title { display: none; }

/* Results head + empty state */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.results-head h2 { margin-bottom: 0.25rem; }
.results-head .btn { padding: 0.6rem 1.3rem; font-size: 0.92rem; }
/* main.js scrolls this element into view when a state is selected. scrollIntoView
   aligns its top edge with the viewport top regardless of section padding, so the
   sticky header (--nav-h) would cover the heading without this. */
[data-results-head] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  border: 1.5px dashed rgba(29, 63, 42, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
}
.empty-title { font-size: 1.15rem; font-weight: 700; color: var(--green-900); margin-bottom: 0.5rem; }
.empty-state .muted { margin-bottom: 1.4rem; }

@media (max-width: 720px) {
  .results-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Location detail: photo collage + sources ----------
   Every photograph in the entry is laid out at once: the lead image takes a
   2×2 cell and the rest tile around it. Row heights are fixed so that mixed
   portrait/landscape sources cannot leave holes in the grid; `dense` packing
   pulls later tiles up into any gap. Each cell is a <button> opening the
   photo viewer.

   Mobile-first: 2 columns, 4 from 641px. The --n2/--n3/--n4 templates are
   written as .photo-collage.photo-collage--nN so they outrank the base
   template at every width — relying on source order for that is what once
   left a two-photo entry in a four-column grid. */
.photo-collage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 128px;
  grid-auto-flow: dense;
  gap: 0.5rem;
}
.photo-cell--lead { grid-column: span 2; grid-row: span 2; }
.photo-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--green-100);
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.photo-tile:hover img,
.photo-tile:focus-visible img { transform: scale(1.035); }
.photo-tile:focus-visible { outline: none; box-shadow: var(--ring); }
/* a faint wash on hover, so the zoom reads as depth rather than enlargement */
.photo-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 32, 21, 0) 55%, rgba(12, 32, 21, 0.4));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.photo-tile:hover::after,
.photo-tile:focus-visible::after { opacity: 1; }

/* Attribution on a tile: always on the lead photo (the one most likely to be
   screenshot), on hover/focus for the smaller ones — the viewer shows it in
   full either way. Touch screens get every badge, since there is no hover. */
.photo-tile-credit {
  left: 0.6rem;
  bottom: 0.6rem;
  font-size: 0.66rem;
  opacity: 1;
}

/* Counts 1-4 cannot tile around a 2×2 lead without leaving a notch beside it,
   so they get exact-fit templates instead. */
.photo-collage--single { grid-template-columns: 1fr; grid-auto-rows: auto; }
.photo-collage--single .photo-cell--lead { grid-column: auto; grid-row: auto; }
.photo-collage--single .photo-tile img { height: auto; aspect-ratio: 16 / 9; }
.photo-collage--n2,
.photo-collage--n3,
.photo-collage--n4 { grid-template-columns: repeat(2, 1fr); }
.photo-collage--n2 .photo-cell--lead,
.photo-collage--n4 .photo-cell--lead { grid-column: auto; grid-row: auto; }

@media (min-width: 641px) {
  .photo-collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 0.7rem; }
  .photo-tile-credit {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .photo-cell--lead .photo-tile-credit,
  .photo-tile:hover .photo-tile-credit,
  .photo-tile:focus-visible .photo-tile-credit { opacity: 1; transform: none; }
  .photo-collage.photo-collage--n2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
  .photo-collage.photo-collage--n3 { grid-template-columns: repeat(3, 1fr); }
  .photo-collage.photo-collage--n4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
}

/* ---------- Photo viewer (lightbox <dialog>) ---------- */
.lightbox {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(9, 21, 14, 0.96);
  color: var(--cream);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(9, 21, 14, 0.88); }
.lightbox-figure {
  margin: 0;
  height: 100%;
  padding: clamp(2.8rem, 6vw, 3.6rem) clamp(3rem, 8vw, 5.5rem) clamp(1.1rem, 3vw, 1.6rem);
  display: grid;
  /* minmax(0, 1fr), not 1fr: a 1fr track has an auto minimum, so a tall
     photograph would push the caption row past the bottom of the viewport. */
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 0.9rem;
  overflow: hidden;
}
.lightbox-img {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  text-align: center;
}
.lightbox-name { font-family: var(--font-display); font-size: 1.05rem; }
.lightbox-counter {
  color: var(--gold-soft);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lightbox-credit { color: var(--gold-soft); font-size: 0.78rem; text-decoration: none; }
.lightbox-credit:hover { color: var(--gold-bright); text-decoration: underline; }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 236, 0.25);
  background: rgba(250, 246, 236, 0.08);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(250, 246, 236, 0.18);
  border-color: var(--gold);
  color: var(--gold-soft);
}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: none; box-shadow: var(--ring); }
.lightbox-close { top: 0.9rem; right: 0.9rem; font-size: 1.7rem; }
.lightbox-nav--prev { left: clamp(0.5rem, 2vw, 1.2rem); top: 50%; transform: translateY(-50%); }
.lightbox-nav--next { right: clamp(0.5rem, 2vw, 1.2rem); top: 50%; transform: translateY(-50%); }
.lightbox--single .lightbox-nav { display: none; }
body.lightbox-open { overflow: hidden; }

/* ---------- Landing photo band ---------- */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: dense;
  gap: 0.6rem;
}
.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--green-100);
  box-shadow: var(--shadow-sm);
}
/* Rhythm tuned for the default count of nine (data-photo-mosaic-limit): ONE
   2×2 lead tile and eight plain ones. Nine tiles cover twelve cells —
   three rows of four, or six rows of two — so the block closes exactly at
   every width, and adding a second 2×2 would leave a hole. main.js keeps the
   count at n ≡ 1 (mod 4) for the same reason. Every cell ends up wider than
   it is tall, which keeps landscape sources (almost all of them) from
   cropping badly. */
.mosaic-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mosaic-tile:hover img,
.mosaic-tile:focus-visible img { transform: scale(1.05); }
.mosaic-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 32, 21, 0) 42%, rgba(12, 32, 21, 0.8));
  pointer-events: none;
}
.mosaic-caption {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.75rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: var(--cream);
}
.mosaic-caption strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.mosaic-caption span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.mosaic-credit {
  top: 0.7rem;
  left: 0.7rem;
  bottom: auto;
  font-size: 0.64rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mosaic-tile:hover .mosaic-credit,
.mosaic-tile:focus-visible .mosaic-credit { opacity: 1; transform: none; }

@media (min-width: 641px) {
  .mosaic-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 0.7rem; }
}

/* Between 641 and 900px four columns are only ~150-200px wide: at the full row
   height those cells turn portrait and crop the widest photographs hardest
   (the Ulu Geruntum aerial fell to 39% of its frame at 700px). Shorter rows
   keep every cell landscape in that band. */
@media (min-width: 641px) and (max-width: 900px) {
  .mosaic-grid { grid-auto-rows: 150px; }
}

.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li {
  margin-bottom: 0.55em;
  padding-left: 1.15em;
  position: relative;
}
.source-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.source-list a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.source-list a:hover { color: var(--gold); }