/* mazmur.org — card-grid-hub
   Palet: tropical-teal-and-sand. Ornamen: tanda sudut kartu (card-corner-marks).
   Ditulis khusus untuk situs ini; tidak ada aturan yang dibagi dengan situs lain.

   HURUF. Matriks varians menetapkan Sora (judul) dan Epilogue (teks),
   di-host sendiri dan di-subset. Berkas huruf TIDAK ikut dalam build ini:
   lisensi setiap artefak unduhan — redistribusi, atribusi, subsetting —
   harus diverifikasi lebih dahulu, dan pemeriksaan itu belum terjadi.
   Sampai saat itu, susunan di bawah mendekati suara yang dimaksud dengan
   huruf yang sudah ada di perangkat pembaca. Tidak ada CDN huruf, tidak
   pernah; gerbang kemandirian menolak dependensi jarak jauh. */

:root {
  --teal: #0b7871;
  --teal-tua: #075049;
  --pasir: #f4ecda;
  --pasir-tua: #e0d2af;
  --arang: #22271f;
  --lebar-baca: 36rem;
  --judul: "Sora", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --teks: "Epilogue", "Gill Sans", "Segoe UI", system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--pasir);
  color: var(--arang);
  font-family: var(--teks);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.65;
}

.puncak {
  background: var(--teal-tua);
  color: var(--pasir);
  padding: 1rem 1.25rem 0.4rem;
}
.puncak .merek {
  margin: 0 0 0.5rem;
  font-family: var(--judul);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jalur-nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; padding-bottom: 0.7rem; font-size: 0.86rem; }
.jalur-nav a { color: var(--pasir); text-decoration: none; padding: 0.15rem 0; border-bottom: 2px solid transparent; }
.jalur-nav a:hover, .jalur-nav a:focus { border-bottom-color: var(--pasir-tua); }
.jalur-nav [aria-current="page"] { border-bottom-color: var(--pasir); font-weight: 600; }

.gerbang { max-width: 46rem; padding: clamp(1.8rem, 5vw, 3.5rem) 1.25rem 0.5rem; }
.gerbang h1 {
  font-family: var(--judul);
  font-weight: 700;
  color: var(--teal-tua);
  font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 1rem;
}
.gerbang .ringkas { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); line-height: 1.5; margin: 0; }

.badan { max-width: var(--lebar-baca); padding: 0.75rem 1.25rem 2.5rem; }
.badan h2 {
  font-family: var(--judul);
  font-weight: 700;
  color: var(--teal-tua);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
  margin: 2.4rem 0 0.8rem;
}
.badan p { margin: 0 0 1.05rem; }
.badan q { quotes: "\201C" "\201D"; }
.badan q::before, .badan q::after { color: var(--teal); font-weight: 600; }

.petak-bagian { max-width: 62rem; padding: 0 1.25rem; }
.petak {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
}
.petak-lain {
  max-width: 62rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 0 0 1rem;
}

/* Tanda sudut kartu: ornamen situs ini */
.kartu {
  position: relative;
  background: #fffdf6;
  border: 1px solid var(--pasir-tua);
  padding: 1.15rem 1.2rem 1.05rem;
}
.kartu::before, .kartu::after {
  content: "";
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
}
.kartu::before { top: 0.4rem; left: 0.4rem; border-top: 3px solid var(--teal); border-left: 3px solid var(--teal); }
.kartu::after { bottom: 0.4rem; right: 0.4rem; border-bottom: 3px solid var(--teal); border-right: 3px solid var(--teal); }
.kartu h3 { font-family: var(--judul); font-size: 1.06rem; margin: 0 0 0.45rem; color: var(--teal-tua); }
.kartu p { margin: 0 0 0.5rem; font-size: 0.94rem; line-height: 1.55; }
.kartu .nomor {
  display: block;
  font-family: var(--judul);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.kartu a { color: var(--teal-tua); }
.kartu-unduh { background: var(--teal-tua); border-color: var(--teal-tua); color: var(--pasir); }
.kartu-unduh h3, .kartu-unduh a { color: var(--pasir); }
.kartu-unduh::before, .kartu-unduh::after { border-color: var(--pasir-tua); }

.ayat-slot {
  background: #fffdf6;
  border-left: 0.45rem solid var(--teal);
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
}
.ayat-slot .rujukan {
  display: block;
  font-family: var(--judul);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.35rem;
}

.soal-jawab { margin: 0; }
.soal-jawab dt {
  font-family: var(--judul);
  font-weight: 700;
  color: var(--teal-tua);
  margin: 1.5rem 0 0.35rem;
}
.soal-jawab dd { margin: 0; }

.tautan-alkitab {
  max-width: var(--lebar-baca);
  margin: 2rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--pasir-tua);
  font-size: 0.98rem;
}
.tautan-alkitab a { color: var(--teal-tua); font-weight: 600; }

.kolofon {
  margin-top: 2.5rem;
  background: var(--arang);
  color: var(--pasir-tua);
  padding: 1.6rem 1.25rem;
  font-size: 0.84rem;
}
.kolofon p { max-width: 46rem; margin: 0; }