/* ===========================================================================
   TWNC — Stylesheet utama
   Urutan: reset → dasar → utilitas → komponen (mengikuti urutan di halaman).
   Tidak ada literal warna di berkas ini; semua lewat token dari tokens.css.
   =========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* ---------- 2. Tipografi dasar -------------------------------------------- */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: var(--lh-head);
  letter-spacing: -.012em;
  text-wrap: balance;
}

p { max-width: var(--measure); }

.u-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.u-num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.u-lede {
  font-size: var(--fs-md);
  line-height: 1.58;
  color: var(--c-ink-2);
}

.u-skip {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--c-canopy); color: var(--c-on-canopy);
  padding: var(--s-3) var(--s-5); z-index: 200;
  transition: top .15s ease;
}
.u-skip:focus { top: var(--s-4); }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  max-width: var(--wrap-narrow);
}
.section-head h2 { font-size: var(--fs-2xl); }

/* Garis pemisah tipis antar seksi terang */
.section + .section { border-top: 1px solid var(--c-rule); }

/* ---------- 4. Tombol ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 13px var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn__arrow { transition: transform .16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid { background: var(--c-canopy); color: var(--c-on-canopy); }
.btn--solid:hover { background: var(--c-ink); }

.btn--ghost-deep { border-color: rgba(var(--c-on-deep-rgb), .34); color: var(--c-on-deep); }
.btn--ghost-deep:hover { border-color: var(--c-on-deep); background: rgba(var(--c-on-deep-rgb), .1); }

.btn--quiet { color: var(--c-canopy); padding-inline: 0; }
.btn--quiet:hover { color: var(--c-ink); }

/* ---------- 5. Header ------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: var(--c-surface);
  border-bottom-color: var(--c-rule);
  box-shadow: var(--shadow-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  /* Header memakai lockup memanjang (rasio 6.07), footer memakai lockup
     bertumpuk (rasio 2.28) yang punya ruang vertikal lebih longgar. */
  min-height: 80px;
}

.brand { flex: none; display: block; }
/* Berkas memanjang tidak punya padding bawaan — isinya menyentuh tepi kanvas.
   Karena itu 40px sudah terasa cukup besar secara optis, dan pada ukuran ini
   baris "Nature Conservation" masih terbaca (~8px).

   Tingginya diskalakan terhadap lebar layar karena rasio 6.07 berarti tiap
   1px tinggi menambah 6px lebar. Pada 40px tetap, logo memakan 243px dan
   header meluber sampai 153px di ponsel 320px. Dengan clamp ini logo turun
   ke 26px (158px lebar) di layar sempit dan kembali 40px sejak sekitar
   730px ke atas. */
.brand img { height: clamp(24px, 5.5vw, 40px); width: auto; }

/* Kedua lockup berlatar transparan dengan satu warna rata (#445A3E). Versi
   putihnya tidak disimpan sebagai berkas terpisah, melainkan dihasilkan dari
   berkas yang sama — brightness(0) menjadikan seluruh piksel hitam, invert(1)
   membalikkannya jadi putih. Cara ini hanya bekerja karena logonya satu warna
   rata; kalau nanti ada versi berwarna-warni, filter ini harus diganti berkas
   terpisah.

   Bawaan: header transparan di atas foto hero  -> putih. */
.brand img,
.footer__brand img { filter: brightness(0) invert(1); }

/* Header sudah solid pada tema terang -> pakai hijau aslinya. */
.site-header.is-solid .brand img { filter: none; }

/* Header solid pada tema gelap -> kembali putih, karena hijau tua nyaris
   tidak terlihat di atas permukaan gelap. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header.is-solid .brand img {
    filter: brightness(0) invert(1);
  }
}
:root[data-theme="dark"] .site-header.is-solid .brand img {
  filter: brightness(0) invert(1);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-on-deep);
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.nav__link:hover { border-bottom-color: currentColor; }
.site-header.is-solid .nav__link { color: var(--c-ink-2); }
.site-header.is-solid .nav__link:hover { color: var(--c-ink); }

.header-tools { display: flex; align-items: center; gap: var(--s-4); flex: none; }

.lang {
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  border: 1px solid rgba(var(--c-on-deep-rgb), .3);
  border-radius: var(--r-md);
  overflow: hidden;
}
.site-header.is-solid .lang { border-color: var(--c-rule-firm); }
.lang button {
  padding: 5px 9px;
  color: var(--c-on-deep-2);
  transition: background-color .16s ease, color .16s ease;
}
.site-header.is-solid .lang button { color: var(--c-ink-3); }
.lang button[aria-pressed="true"] { background: var(--c-canopy); color: var(--c-on-canopy); }

.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  color: var(--c-on-deep);
  transition: background-color .16s ease;
}
.site-header.is-solid .icon-btn { color: var(--c-ink-2); }
.icon-btn:hover { background: rgba(var(--c-on-deep-rgb), .13); }
.site-header.is-solid .icon-btn:hover { background: var(--c-surface-2); }

.nav-toggle { display: none; }

/* ---------- 6. Hero -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--c-deep);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Dua lapis, bukan satu.

   Lapis pertama adalah pita gelap setinggi zona header, diukur dalam PIKSEL
   supaya selalu sejajar dengan header berapa pun tinggi viewport. Ini yang
   menjamin logo dan navigasi terbaca di atas foto apa pun — termasuk foto
   yang bagian atasnya terang, seperti langit pucat atau dinding putih.

   Sebelumnya hanya ada lapis kedua, dan karena persentase, kegelapannya di
   zona header ikut berubah mengikuti tinggi layar. Pada foto udara mercusuar,
   opasitas di garis bawah header hanya sampai sekitar 0,49 — di atas langit
   pucat itu menghasilkan latar abu-abu sedang, dan logo putih bergaris tipis
   jadi samar.

   Lapis kedua tetap mengatur keterbacaan judul dan pelat data di bawahnya. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(var(--c-deep-rgb), .68) 0,
      rgba(var(--c-deep-rgb), .52) 88px,
      rgba(var(--c-deep-rgb), 0)  220px),
    linear-gradient(to bottom,
      rgba(var(--c-deep-rgb), .30) 0%,
      rgba(var(--c-deep-rgb), .12) 34%,
      rgba(var(--c-deep-rgb), .50) 68%,
      rgba(var(--c-deep-rgb), .92) 100%);
}

.hero__body {
  padding-top: 156px;
  padding-bottom: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 900px;
}
.hero__eyebrow { color: var(--c-on-deep-2); }
.hero h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--c-on-deep);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  max-width: 15ch;
}
.hero__sub {
  color: var(--c-on-deep-2);
  font-size: var(--fs-md);
  max-width: 56ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* Pelat data — meniru plat survei lapangan */
.plate {
  border-top: 1px solid rgba(var(--c-on-deep-rgb), .22);
  background: rgba(var(--c-deep-rgb), .5);
  backdrop-filter: blur(6px);
}
.plate__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-6);
  padding-block: var(--s-5);
}
.plate__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plate__k {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: rgba(var(--c-on-deep-rgb), .52);
}
.plate__v { font-size: var(--fs-sm); color: var(--c-on-deep); font-weight: 500; }

/* ---------- 7. Kawasan (angka + peta udara) -------------------------------- */
.territory { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.territory__text { display: flex; flex-direction: column; gap: var(--s-5); }
.territory__fig { display: flex; flex-direction: column; gap: var(--s-3); }
.territory__fig img { width: 100%; border-radius: var(--r-md); }
.territory__fig figcaption { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.5; }

/* Band statistik sebagai bidang merek.

   Brand guidelines memakai hijau sebagai bidang penuh — amplop, map, dan
   poster mereka berlatar FOREST utuh. Angka kawasan adalah tempat paling
   tepat membawa cara itu ke situs: isinya padat, ringkas, dan pantas berdiri
   sebagai satu blok warna, bukan lima kartu putih bergaris.

   Warnanya tetap di kedua tema, sama seperti hero dan footer. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--c-field-rule);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-7);
}
.stat {
  background: var(--c-field);
  padding: var(--s-5) var(--s-5) calc(var(--s-5) + 2px);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.stat__v {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3vw, 34px); font-weight: 500;
  letter-spacing: -.03em; line-height: 1.05;
  color: var(--c-on-field-num);
}
.stat__u { font-size: var(--fs-xs); font-family: var(--f-mono); color: var(--c-on-field); opacity: .72; }
.stat__k { font-size: var(--fs-sm); line-height: 1.42; margin-top: var(--s-1); color: var(--c-on-field); }

/* ---------- 8. Program ----------------------------------------------------- */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: var(--s-5); }
.program {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 2px solid var(--c-rule);
  transition: border-color .18s ease;
}
.program:hover { border-bottom-color: var(--c-canopy); }
.program__media { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--c-surface-2); }
.program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.program:hover .program__media img { transform: scale(1.045); }
.program h3 { font-size: var(--fs-lg); }
.program p { font-size: var(--fs-sm); color: var(--c-ink-2); }
.program__more { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-canopy); margin-top: auto; }

/* ---------- 9. Sorotan harimau (full-bleed) -------------------------------- */
.feature {
  position: relative;
  background: var(--c-deep);
  color: var(--c-on-deep);
  isolation: isolate;
  overflow: hidden;
}
/* Arsip foto TWNC punya bilah kredit tercetak di ~10-13% bagian bawah tiap
   gambar. Selama master bersih belum tersedia (lihat issue `aset`), bilah itu
   dipotong dengan melebihkan tinggi gambar lalu memangkasnya di kontainer —
   cara ini tetap bekerja pada rasio kontainer mana pun, termasuk di ponsel. */
.feature__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.feature__media img { width: 100%; height: 116%; object-fit: cover; object-position: center 34%; }
.feature__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(var(--c-deep-rgb),.94) 0%, rgba(var(--c-deep-rgb),.82) 44%, rgba(var(--c-deep-rgb),.34) 100%);
}
.feature__body { padding-block: clamp(72px, 10vw, 128px); max-width: 620px; display: flex; flex-direction: column; gap: var(--s-5); }
.feature h2 { font-size: var(--fs-2xl); color: var(--c-on-deep); }
.feature p { color: var(--c-on-deep-2); }
.feature__eyebrow { color: var(--c-accent-bright); }

.feature__stats { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-2); }
.feature__stat { display: flex; flex-direction: column; gap: 2px; }
.feature__stat b {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: var(--c-accent-bright);
}
.feature__stat span { font-size: var(--fs-xs); color: var(--c-on-deep-2); max-width: 22ch; line-height: 1.45; }

/* ---------- 10. Biodiversitas ---------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter {
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--c-rule-firm); border-radius: 100px;
  color: var(--c-ink-2);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.filter:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.filter[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

.species { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-5); }
.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--c-rule-firm); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card[hidden] { display: none; }
.card__media { aspect-ratio: 3 / 2; background: var(--c-surface-2); overflow: hidden; }
/* Sama seperti .feature__media — memangkas bilah kredit tercetak. */
.card__media img { width: 100%; height: 116%; object-fit: cover; object-position: center top; }
.card__body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.card__taxon {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-canopy);
}
.card__name { font-family: var(--f-body); font-size: var(--fs-base); font-weight: 600; line-height: 1.32; }
.card__sci { font-size: var(--fs-sm); font-style: italic; color: var(--c-ink-3); }
.card__status {
  margin-top: var(--s-2);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--c-ink-3);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.card__status--critical { color: var(--c-status-critical); }

/* ---------- 10b. Pita parallax --------------------------------------------
   Latar bergerak lebih lambat daripada halaman saat digulir.

   Dipakai transform, bukan background-attachment: fixed. Alasannya:
   background-attachment: fixed tidak bekerja di Safari iOS — gambarnya
   dipaku ke viewport dan efeknya hilang atau tampil salah — dan di peramban
   lain memicu repaint seluruh lapisan tiap frame. Transform berjalan di
   compositor, jadi mulus dan tidak menyentuh layout.

   .parallax__media sengaja dibuat lebih tinggi daripada seksinya (inset
   -12% atas dan bawah). Selisih itulah ruang geraknya; JavaScript menggeser
   maksimal 6% dari tinggi media, jadi tepinya tidak pernah tersingkap.     */
.parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-deep);
  min-height: clamp(380px, 56vh, 580px);
  display: grid;
  align-content: center;
}
.parallax__media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}
.parallax__media img { width: 100%; height: 100%; object-fit: cover; }

.parallax__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(var(--c-deep-rgb), .74) 0%,
      rgba(var(--c-deep-rgb), .64) 45%,
      rgba(var(--c-deep-rgb), .78) 100%);
}

.parallax__body {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-block: var(--s-8);
  max-width: 880px;
}
.parallax__eyebrow { color: var(--c-on-deep-2); }
.parallax__lead {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--fs-xl);
  line-height: 1.32;
  color: var(--c-on-deep);
  max-width: 26ch;
  text-wrap: balance;
}
/* Kalimat kedua adalah kesimpulannya, jadi diberi warna aksen merek. */
.parallax__lead--accent { color: var(--c-accent-bright); }

/* ---------- 11. Mercusuar -------------------------------------------------- */
.beacon { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.beacon__fig img { width: 100%; border-radius: var(--r-md); }
.beacon__text { display: flex; flex-direction: column; gap: var(--s-5); }
.beacon__text h2 { font-size: var(--fs-xl); }
.beacon blockquote {
  border-left: 2px solid var(--c-canopy);
  padding-left: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.44;
  color: var(--c-ink);
}

/* ---------- 12. Berita ----------------------------------------------------- */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1px; background: var(--c-rule); border-block: 1px solid var(--c-rule); }
.post {
  background: var(--c-paper);
  padding: var(--s-6) var(--s-5) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: background-color .18s ease;
}
.post:hover { background: var(--c-surface); }
.post__meta { display: flex; gap: var(--s-3); align-items: baseline; }
.post__date { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.post__tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-canopy); }
.post h3 { font-family: var(--f-body); font-size: var(--fs-md); font-weight: 600; line-height: 1.36; letter-spacing: -.004em; }
.post p { font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ---------- 13. Testimoni -------------------------------------------------- */
/* Rel mendatar, bukan grid.

   Dengan sebelas kutipan, grid apa pun menghasilkan dinding teks yang panjang
   dan melelahkan. Rel mendatar menjaga seksi ini tetap satu layar, dan
   pengunjung memilih sendiri berapa banyak yang ingin dibaca.

   Digulir secara native, bukan digeser JavaScript. Artinya sentuhan, roda
   mendatar, tombol panah papan ketik, dan gestur kembali-maju peramban
   semuanya bekerja apa adanya. Tombol panah hanya menambah kenyamanan di
   desktop, bukan syarat agar rel ini berfungsi. */
.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-6);
}
.rail-head .section-head { margin-bottom: 0; }

.rail-nav { display: flex; gap: var(--s-2); flex: none; }
.rail-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-rule-firm);
  border-radius: 50%;
  color: var(--c-ink-2);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--c-canopy); border-color: var(--c-canopy); color: var(--c-on-canopy); }
.rail-btn:disabled { opacity: .3; cursor: default; }

.quotes {
  display: grid;
  grid-auto-flow: column;
  /* Kolom lebih sempit dari sebelumnya, dan di ponsel sedikit di bawah lebar
     layar supaya ujung kartu berikutnya mengintip — itu isyarat bahwa
     seksinya bisa digulir, tanpa perlu tulisan penjelas. */
  grid-auto-columns: clamp(236px, 74vw, 274px);
  /* Kartu setinggi isinya masing-masing, tidak diregangkan menyamakan tinggi.
     Kartunya polos tanpa latar atau bingkai, jadi dasar yang tidak rata
     terbaca wajar — dan tidak ada ruang kosong yang harus diisi. */
  align-items: start;
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s-4);
  /* Membentang sampai tepi wrap supaya kartu bisa keluar layar saat digulir. */
  margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
  padding-inline: clamp(20px, 4vw, 40px);
  scroll-padding-inline: clamp(20px, 4vw, 40px);
  scrollbar-width: thin;
  scrollbar-color: var(--c-rule-firm) var(--c-surface-2);
}
.quotes::-webkit-scrollbar { height: 6px; }
.quotes::-webkit-scrollbar-track { background: var(--c-surface-2); border-radius: 100px; }
.quotes::-webkit-scrollbar-thumb { background: var(--c-rule-firm); border-radius: 100px; }

.quote {
  display: flex; flex-direction: column; gap: var(--s-3);
  scroll-snap-align: start;
}
.quote__mark { font-family: var(--f-display); font-size: 34px; line-height: .6; color: var(--c-canopy); }
.quote blockquote { font-family: var(--f-display); font-size: var(--fs-base); line-height: 1.5; color: var(--c-ink); }
/* Nama menempel langsung di bawah kutipannya.

   Sebelumnya memakai margin-top: auto, yang mendorong nama ke dasar kartu
   supaya semua nama sejajar. Itu bekerja saat panjang kutipannya mirip, tapi
   di sini rentangnya jauh — 25 karakter untuk Tony Whitten, 321 untuk Sarah
   Christie. Akibatnya kutipan pendek menyisakan lubang menganga antara teks
   dan namanya.

   Nama yang menempel pada kutipannya juga lebih benar secara makna: itu
   atribusi, bukan catatan kaki kartu. */
.quote figcaption {
  font-size: var(--fs-sm); color: var(--c-ink-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
  display: flex; flex-direction: column; gap: 3px;
}
.quote figcaption b { font-weight: 600; color: var(--c-ink); }
/* Afiliasi baru tersedia untuk sebagian narasumber. Yang belum ada tetap
   menampilkan nama saja — lebih baik kosong daripada ditebak. Lihat issue #4. */
.quote__org {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ---------- 14. Footer ----------------------------------------------------- */
.site-footer { background: var(--c-deep); color: var(--c-on-deep-2); padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.6fr; gap: var(--s-6); }
.footer__brand img { height: 78px; width: auto; margin-bottom: var(--s-5); }
.footer__brand p { font-size: var(--fs-sm); max-width: 34ch; }
.footer h4 {
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: rgba(var(--c-on-deep-rgb), .5); margin-bottom: var(--s-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__list a { font-size: var(--fs-sm); transition: color .16s ease; }
.footer__list a:hover { color: var(--c-on-deep); }
.footer address { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; }
.footer address b { font-weight: 600; color: var(--c-on-deep); }
.footer address a { transition: color .16s ease; }
.footer address a:hover { color: var(--c-on-deep); }

.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); }
.footer__social a {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid rgba(var(--c-on-deep-rgb), .28);
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.footer__social a:hover { color: var(--c-on-deep); border-bottom-color: var(--c-on-deep); }
.footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(var(--c-on-deep-rgb), .14);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--fs-xs); font-family: var(--f-mono); color: rgba(var(--c-on-deep-rgb), .42);
}

/* ---------- 15. Responsif -------------------------------------------------- */
@media (max-width: 900px) {
  .territory, .beacon { grid-template-columns: 1fr; }
  .beacon__fig { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: grid; }

  /* Tombol panah disembunyikan di ponsel — di sana gulir sentuh sudah
     jadi cara paling alami, dan tombolnya hanya memakan ruang. */
  .rail-nav { display: none; }


  /* Di lebar ini .nav menjadi position: fixed, sehingga keluar dari aliran
     flex. Akibatnya margin-left:auto miliknya tidak lagi mendorong apa pun,
     dan .brand bersama .header-tools menumpuk di kiri — tombol menu tampak
     melayang di tengah alih-alih menempel ke tepi kanan.

     Auto margin itu karena itu dipindahkan ke .header-tools khusus di lebar
     ini. Di desktop tetap milik .nav, jadi tata letaknya tidak berubah. */
  .header-tools { margin-left: auto; gap: 10px; }

  /* Dirapatkan supaya logo, pemilih bahasa, tombol tema, dan tombol menu
     tetap muat berdampingan sampai lebar 320px. */
  .icon-btn { width: 32px; height: 32px; }
  .lang button { padding: 4px 7px; font-size: 11px; }
  .nav {
    position: fixed; inset: 80px 0 auto 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-rule);
    padding: var(--s-5) clamp(20px, 4vw, 40px) var(--s-6);
    display: none;
    box-shadow: var(--shadow-2);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    color: var(--c-ink);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--c-rule);
    font-size: var(--fs-md);
  }
  .nav__link:hover { border-bottom-color: var(--c-rule); }
  .hero__body { padding-top: 130px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

@media (max-width: 480px) {
  .feature__stats { gap: var(--s-5); }
  .plate__grid { gap: var(--s-4); }
}

/* Ponsel paling sempit (320-380px). Empat elemen harus berbagi satu baris:
   logo, pemilih bahasa, tombol tema, tombol menu.

   Logo diukur dari LEBAR di sini, bukan tinggi. Dengan rasio 6.07, mematok
   tinggi membuat lebarnya melonjak enam kali lipat dan header meluber;
   mematok lebar membuatnya selalu muat, dan tingginya mengikuti sendiri
   sehingga rasionya tetap utuh. */
@media (max-width: 380px) {
  .site-header__inner { gap: var(--s-3); }
  .header-tools { gap: 8px; }
  .brand img { height: auto; width: min(146px, 40vw); }
  .lang button { padding: 4px 6px; }
}