/* Tipografi konten panjang — halaman Tentang dan detail Berita.
 *
 * Primitif tata letak halaman (.page, .header, .title, .eyebrow, .lede, .rule)
 * ada di page.module.css — jangan disalin ulang ke sini.
 */

/* ---------- Isi ---------- */

.prose {
  max-width: 44rem;
  margin-top: 2.5rem;
  font-size: var(--t-isi);
  line-height: 1.78;
}

/*
  Judul memakai serif yang sama dengan judul halaman.

  Sebelumnya isi halaman memakai sans, sementara seluruh judul di situs sudah
  serif — perbedaan yang membuat halaman naskah terasa berasal dari situs lain.
*/
.prose h2,
.prose h3 {
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  /*
    Kepala situs menempel di atas (sticky). Tanpa ini, melompat ke sebuah
    tajuk lewat tautan daftar isi menaruh tajuk itu PERSIS di bawah kepala
    situs — tertutup separuh.
  */
  scroll-margin-top: var(--jangkar-atas, 9rem);
}

/*
  Garis bawah tajuk: abu sepanjang lebar, dengan potongan merah di pangkalnya.

  Garis abu polos membuat setiap tajuk tampak sama beratnya dengan yang lain.
  Potongan merah memberi titik mulai yang jelas bagi mata saat memindai
  halaman panjang, tanpa menambah warna baru.
*/
.prose h2 {
  position: relative;
  margin: 3rem 0 0.9rem;
  padding-bottom: 0.5rem;
  font-size: var(--t-xl);
  line-height: 1.25;
  border-bottom: 2px solid var(--border);
}

.prose h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 2.75rem;
  height: 2px;
  background: var(--primary);
}

.prose h3 {
  margin: 2.25rem 0 0.6rem;
  font-size: var(--t-sedang);
}

.prose p {
  margin: 0 0 1.25rem;
}

/*
  Paragraf pertama sedikit lebih besar.

  Ia berfungsi sebagai jembatan dari ringkasan di kepala halaman ke badan
  naskah, dan memberi mata satu titik masuk yang jelas. Hanya berlaku bila
  paragraf itu memang membuka halaman.
*/
.prose > p:first-child {
  font-size: var(--t-sedang);
  line-height: 1.7;
  color: var(--text);
}

/*
  DAFTAR BERNOMOR — kartu dengan angka merah.

  Di halaman resmi organisasi, daftar bernomor hampir selalu memuat butir yang
  dirujuk sebagai satuan: "misi ke-3", "syarat ke-2". Angka bawaan peramban
  berukuran sama dengan teksnya dan hilang di antara kalimat. Cakram merah
  membuat butirnya bisa ditunjuk dari seberang ruangan rapat — dan itu memang
  cara dokumen ini dipakai.

  Hanya berlaku untuk daftar di tingkat teratas naskah; daftar bersarang tetap
  memakai bentuk sederhana agar tidak ada kartu di dalam kartu.
*/
.prose > ol {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: butir;
  display: grid;
  gap: 0.75rem;
}

.prose > ol > li {
  position: relative;
  margin: 0;
  padding: 1rem 1.25rem 1rem 4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.prose > ol > li::before {
  counter-increment: butir;
  content: counter(butir);
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  font-family: var(--font-judul), Georgia, serif;
  font-size: var(--t-dasar);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
  Sorotan saat disentuh, meski butirnya BUKAN tautan.

  Ia tidak mengajak mengklik — tidak ada kursor penunjuk dan tidak ada panah.
  Gunanya menjaga tempat mata pada daftar panjang, hal yang paling terasa bagi
  pembaca yang menyusuri butir satu per satu.
*/
.prose > ol > li:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
  box-shadow: var(--naik-angkat);
}

/*
  DAFTAR BERBUTIR — baris berpembatas dengan penanda merah.

  Sengaja BUKAN kartu seperti daftar bernomor: butir tak bernomor sering
  berupa kalimat panjang atau bahkan beberapa kalimat, dan kartu untuk isi
  sepanjang itu berubah menjadi dinding kotak. Baris berpembatas tetap mudah
  dipindai tanpa memberi bobot yang tidak perlu.
*/
.prose > ul:not(.definisi) {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--border);
}

.prose > ul:not(.definisi) > li {
  position: relative;
  margin: 0;
  padding: 0.9rem 0 0.9rem 1.75rem;
  border-bottom: 1px solid var(--border);
}

/* Belah ketupat merah kecil — gema dari potongan merah di bawah tajuk. */
.prose > ul:not(.definisi) > li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 1.42rem;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--primary);
  transform: rotate(45deg);
}

/*
  DAFTAR DEFINISI — kartu "Nama + keterangan".

  Dipakai otomatis ketika seluruh butir sebuah daftar berbentuk
  "Nama — keterangan"; pengenalannya ada di components/Naskah.tsx. Enam Nilai
  Organisasi ditulis persis begitu, dan sebagai baris teks biasa nama nilainya
  tenggelam di awal kalimat panjang.

  Isi tetap SATU daftar di panel admin. Sekretariat menulis dan menyunting
  butirnya seperti daftar biasa; bentuk kartunya urusan perenderan, bukan
  urusan penyunting.
*/
.definisi {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.definisiButir {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.definisiButir:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--naik-angkat);
}

.definisiNama {
  position: relative;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-sedang);
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
}

/* Potongan merah yang sama dengan di bawah tajuk — satu bahasa grafis. */
.definisiNama::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1.75rem;
  height: 1px;
  background: var(--primary);
}

.definisiKet {
  color: var(--text-muted);
  font-size: var(--t-dasar);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {

  .definisiButir {
    transition: none;
  }

  .definisiButir:hover {
    transform: none;
  }
}

/* Daftar bersarang: bentuk sederhana, tanpa kartu maupun pembatas. */
.prose li ul,
.prose li ol {
  margin: 0.6rem 0 0;
  padding-left: 1.3rem;
  border-top: 0;
}

.prose li li {
  margin-bottom: 0.4rem;
  padding: 0;
  border: 0;
}

.prose li li::before {
  content: none;
}

.prose li ul > li {
  list-style: disc;
}

.prose li ol > li {
  list-style: decimal;
}

@media (prefers-reduced-motion: reduce) {

  .prose > ol > li {
    transition: none;
  }

  .prose > ol > li:hover {
    transform: none;
  }
}

/*
  Kutipan — inilah rumusan visi organisasi.

  Diberi perlakuan kutipan besar, bukan sekadar kotak berbatas kiri: satu
  kalimat itu yang paling sering dikutip ulang dari halaman ini, dan ia pantas
  terbaca sebagai pernyataan, bukan sebagai catatan tambahan.
*/
/*
  Kutipan diperlakukan sebagai PERNYATAAN.

  Di halaman Visi & Misi, isi kutipan itu rumusan visi organisasi — satu
  kalimat yang paling sering dikutip ulang dari seluruh situs. Sebagai kotak
  berbatas kiri ia terbaca seperti catatan tambahan; diberi bidang sendiri,
  huruf besar, dan garis merah di atasnya, ia terbaca seperti apa yang
  sebenarnya: pendirian yang sedang dinyatakan.

  Ia sengaja MELEBAR sedikit melewati kolom baca. Pelebaran kecil itu yang
  membuat mata berhenti tanpa perlu warna atau bingkai tambahan.
*/
/*
  KUTIPAN MELEBAR KELUAR KOLOM — DAN BATASNYA ADALAH TALANG HALAMAN.

  Kutipan sengaja dibuat lebih lebar daripada kolom teks supaya terbaca sebagai
  jeda, bukan sebagai paragraf biasa. Yang salah sebelumnya bukan gagasannya,
  melainkan ukurannya: jorokannya 1,75rem sementara talang `.page` hanya
  1,5rem. Karena `.prose` sudah menempel persis di tepi dalam `.page`, selisih
  0,25rem itu langsung jatuh ke luar layar.

  TERUKUR sebelum diperbaiki, pada /tentang dan /tentang/visi-misi:
    lebar 560..768px   kutipan -4..772   guliran mendatar +4px
    lebar 1024..1100px kutipan 302..1028 guliran mendatar +4px
  Selalu tepat 4px di tiap sisi, karena 1,75rem - 1,5rem = 4,25px.

  Penjaga lama `@media (max-width: 34rem)` tidak pernah bisa menangkap ini:
  luberannya tidak bergantung pada lebar layar, melainkan pada selisih dua
  angka yang memang tidak pernah dicocokkan.

  Sekarang jorokannya 1rem — lebih kecil daripada talang 1,5rem — sehingga
  dalam keadaan tersempit sekalipun masih tersisa 0,5rem udara ke tepi layar.
  Bila talang `.page` suatu saat diubah, angka ini harus ikut ditinjau.
*/
.prose blockquote {
  position: relative;
  margin: 2.5rem -1rem;
  padding: 2.5rem 2.25rem 2.25rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-kartu);
  background: var(--bg-alt);
  overflow: hidden;
  font-family: var(--font-judul), Georgia, 'Times New Roman', serif;
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
}

@media (max-width: 34rem) {
  .prose blockquote {
    margin-inline: 0;
    padding: 2rem 1.5rem 1.75rem;
  }
}

/*
  Tanda kutip sebagai cap air di belakang teksnya, bukan di sampingnya.

  Ditulis sebagai KARAKTER, bukan escape CSS. Bentuk escape empat digit
  (`\201C`) pernah rusak di berkas ini ketika ditulis lewat skrip, dan karakter
  langsung tidak bisa salah ditafsirkan oleh perkakas mana pun.
*/
.prose blockquote::before {
  content: '“';
  position: absolute;
  left: 50%;
  /*
    TOP 0, BUKAN -1,6rem.

    Nilai negatifnya menaruh kotak glif 27px DI ATAS tepi kartu, sementara
    kartunya `overflow: hidden`. Yang terpotong bukan sedikit hiasan di
    pinggir: tinta huruf `“` memang berkumpul di sepertiga teratas kotak
    em-nya, jadi justru bagian itulah yang habis terpangkas. Sisanya hanya
    ekor bawah kedua tanda kutip — dan di layar ia tergambar sebagai DUA
    TITIK MERAH MUDA kecil yang menggantung di garis atas kartu, terbaca
    seperti gambar yang gagal dimuat, bukan seperti cap air.

    Terukur sebelum diperbaiki: kotak glif 119px, 27px di antaranya berada di
    luar kartu dan terpotong.

    Dengan `top: 0` seluruh glifnya berada di dalam kartu, dan padding atas
    kartu (2,5rem) menyisakan ruang supaya tintanya berhenti sebelum baris
    pertama naskahnya.
  */
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-judul), Georgia, serif;
  font-size: 7rem;
  line-height: 1;
  /* Glif kutip raksasa — nilainya sepasang dengan halo cincin fokus, jadi
     memakai token yang sama. Nilai tidak berubah; yang berubah hanya bahwa
     toggle tema sekarang ikut menentukannya. */
  color: var(--brand-wash-kuat);
  pointer-events: none;
  /*
    Lapisannya dinyatakan terang-terangan. `::before` yang berposisi absolut
    digambar di atas isi yang tidak berposisi, jadi tanpa kedua z-index ini
    cap airnya menimpa naskahnya — pada warna semuda ini akibatnya tidak
    kentara di tema terang, tetapi ia tetap menumpuk di atas huruf.
  */
  z-index: 0;
}

.prose blockquote p {
  position: relative;
  z-index: 1;
}

.prose blockquote p {
  margin: 0;
}

/*
  Tautan bergaris bawah tipis yang menebal saat disentuh.

  `text-decoration: underline` bawaan menempel pada huruf dan mengganggu
  keterbacaan pada teks sepanjang ini; garis yang diberi jarak tetap terbaca
  sebagai tautan tanpa memotong ekor huruf.
*/
/*
  Tautan di dalam prosa mengalir bersama kalimatnya.

  Aturan global memberi target sentuh 44px kepada tautan yang berdiri sendiri,
  dan sudah mengecualikan `p`, `td`, `blockquote` dan kerabatnya. Yang tidak
  dapat disebutkan dari berkas global adalah `.prose` itu sendiri — namanya
  teracak oleh CSS Modules. Karena itu pengecualiannya ditegaskan di sini,
  sekaligus mencakup tautan di dalam daftar bernomor dan bertitik yang ditulis
  Sekretariat lewat editor.
*/
.prose a {
  display: inline;
  min-height: auto;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s ease;
}

.prose a:hover {
  text-decoration-color: var(--primary);
}

.prose strong {
  font-weight: 700;
}

.prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .prose a {
    transition: none;
  }
}

/* ---------- Sidebar navigasi antar-halaman ---------- */

/*
  Sidebar dan naskah DIPUSATKAN sebagai satu pasangan, bukan didorong ke tepi
  kiri pembungkus 76rem.

  Versi sebelumnya memakai kolom kedua `1fr` sementara naskahnya sendiri
  berbatas 44rem — sisanya menjadi bidang kosong selebar hampir 17rem di sebelah
  kanan, dan halaman terbaca seperti belum selesai dimuat. Sekarang kolom
  keduanya diberi lebar tetap dan seluruh kisinya dipusatkan, sehingga ruang
  sisa terbagi rata di kedua sisi.
*/
.layout {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .layout {
    grid-template-columns: 14rem minmax(0, 44rem);
    justify-content: center;
    gap: 4rem;
  }
}

/* Jarak saat daftar isi dan daftar halaman lain berdiri bersama di satu kolom. */
.navLain {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.sideTitle {
  margin: 0 0 0.75rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.sideList {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.sideLink {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text);
  text-decoration: none;
  font-size: var(--t-dasar);
  min-height: auto;
}

.sideLink:hover {
  color: var(--primary);
  border-left-color: var(--brand-200);
}

.sideActive {
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Daftar isi ---------- */

/*
  Menempel saat digulung, hanya di layar lebar.

  Di ponsel ia justru merugikan: daftar isi yang menempel memakan sepertiga
  layar sepanjang pembacaan. Di sana ia cukup berdiri di atas naskah, dibaca
  sekali, lalu tergulung pergi.
*/
/*
  TIGA JARAK YANG MENUMPUK MENJADI SATU.

  Di bawah 62rem, daftar isi dan naskah berdiri sebagai dua sel dalam satu
  kolom kisi. Jarak di antaranya sudah diurus `gap: 2.5rem` milik `.layout`.
  Sebelumnya masih ditambah `margin-bottom: 2.5rem` di sini, dan di sisi lain
  `margin-top` tajuk pertama naskah.

  TERUKUR pada /tentang, lebar 390px dan 768px:
    batas bawah daftar isi  559px
    tajuk pertama naskah    695px
    jurang                  136px  = 42,5 (margin) + 42,5 (gap) + 51 (tajuk)

  Seratus tiga puluh enam piksel kosong — sepertiga layar ponsel — di antara
  daftar isi dan bagian pertama yang ditunjuknya. Pada lebar besar jarak ini
  tidak pernah terlihat karena keduanya berdampingan, sehingga cacatnya hanya
  muncul di layar sempit.

  Margin di sini dihapus, dan margin tajuk pertama dinolkan di bawah; yang
  tersisa adalah satu `gap` yang memang bertugas mengaturnya.
*/
.toc {
  margin-bottom: 0;
}

/*
  `margin-top` milik `.prose` tetap dipertahankan, karena berita dan agenda
  memakai `.prose` SENDIRIAN — di sana margin itulah yang memisahkannya dari
  kepala artikel. Yang dinolkan hanya ketika ia menjadi sel di dalam `.layout`,
  sebab di situ `gap` sudah mengerjakan tugas yang sama.
*/
.layout .prose {
  margin-top: 0;
}

/*
  Tajuk pembuka naskah tidak perlu didorong ke bawah — tidak ada apa pun di
  atasnya yang perlu dipisahkan. Margin tajuk berguna ANTAR bagian, bukan
  sebelum bagian pertama.
*/
.prose > :first-child {
  margin-top: 0;
}

@media (min-width: 62rem) {
  .toc {
    position: sticky;
    top: 7.5rem;
    margin-bottom: 0;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
  }
}

.tocList {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.tocLink {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  /* Menutupi garis induknya, sehingga penanda aktif menggantikan — bukan
     menambah — garis di sebelah kiri. */
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--t-dasar);
  line-height: 1.4;
  /* Terukur 35px; dinaikkan ke patokan sentuh proyek. Daftar isi adalah
     navigasi sungguhan pada naskah panjang, bukan tautan di tengah kalimat. */
  display: flex;
  align-items: center;
  min-height: var(--tombol-h-kecil);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.tocLink:hover {
  color: var(--primary);
  border-left-color: var(--brand-200);
}

.tocSub {
  padding-left: 1.6rem;
  font-size: var(--t-kecil);
}

.tocActive {
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .tocLink {
    transition: none;
  }
}

/* ---------- Tombol kembali ke atas ---------- */

.keAtas {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--naik-apung);
  animation: keAtasMuncul 0.22s ease;
  transition: background 0.16s ease, transform 0.16s ease;
}

.keAtas:hover {
  background: var(--primary-isi-hover);
  transform: translateY(-2px);
}

.keAtas:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 3px;
}

@keyframes keAtasMuncul {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .keAtas {
    animation: none;
    transition: none;
  }

  .keAtas:hover {
    transform: none;
  }
}

.updated {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-kecil);
  color: var(--text-muted);
}

/* ---------- Tautan per-bagian pada tajuk ---------- */

/*
  Disisipkan public/js/naskah.js, bukan ditulis di Blade — naskahnya datang
  dari basis data dan tajuknya tidak diketahui sampai halaman dirender.

  MUNCUL SAAT DISENTUH, BUKAN SELALU TAMPAK. Ikon yang menempel permanen di
  samping tiap tajuk menambah satu benda yang harus diabaikan pembaca pada
  naskah resmi yang sudah padat. Yang memerlukannya akan mengarahkan kursor
  ke tajuknya; yang tidak, tidak pernah melihatnya.

  Tetapi ia TIDAK disembunyikan dari papan ketik: `:focus-within` membuatnya
  tampak begitu di-Tab. Ikon yang hanya muncul saat disentuh kursor adalah
  ikon yang tidak pernah ada bagi yang tidak memakai tetikus.
*/
.prose h2,
.prose h3 {
  position: relative;
}

/*
  DITULIS `.prose a.tautanBagian`, BUKAN `.tautanBagian` SAJA.

  Di berkas ini ada `.prose a { display: inline }` yang berkekhususan 0,1,1 —
  satu kelas ditambah satu jenis elemen. `.tautanBagian` sendirian hanya
  0,1,0, jadi ia KALAH dan elemennya tetap `inline`.

  Akibatnya tidak berupa galat apa pun: `width` dan `height` memang sah
  ditulis pada elemen inline, hanya saja tidak berpengaruh. Terukur di ponsel,
  gaya terhitungnya 44,2 x 44,2px sementara kotak sebenarnya tetap 18 x 36px
  — di bawah target sentuh 44px, dan tidak ada satu pun nilai di panel gaya
  yang tampak salah.
*/
.prose a.tautanBagian {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  border-radius: var(--r-kecil);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.prose h2:hover a.tautanBagian,
.prose h3:hover a.tautanBagian,
.prose h2:focus-within a.tautanBagian,
.prose h3:focus-within a.tautanBagian,
.prose a.tautanBagian:focus-visible {
  opacity: 1;
}

.prose a.tautanBagian:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

.prose a.tautanBagian:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Sesudah tersalin, ikonnya menahan warna merah sejenak sebagai jawaban. */
.prose a.tautanBagianTersalin {
  opacity: 1;
  color: var(--primary);
}

.prose a.tautanBagian svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Terbaca pembaca layar, tidak memakan ruang di layar. */
.prosaSr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .prose a.tautanBagian {
    transition: none;
  }
}

/*
  DI PERANGKAT SENTUH, TAUTAN BAGIAN SELALU TAMPAK — dan cukup besar.

  Dua cacat sekaligus pada bentuk sebelumnya, keduanya terukur pada lebar
  390px:

  1. Ia disembunyikan dengan `opacity: 0` dan hanya muncul saat disentuh
     kursor. Di layar sentuh tidak ada "disentuh kursor", jadi ia tidak
     pernah tampak — tetapi elemen ber-opacity nol TETAP dapat ditekan.
     Yang tersisa adalah sasaran tak kasatmata di samping tiap tajuk, yang
     menyalin tautan tanpa pernah meminta izin siapa pun.

  2. Ukurannya 18x36px, di bawah target sentuh 44px yang dianjurkan.

  `hover: none` menandai perangkat yang penunjuknya tidak dapat melayang —
  ponsel dan tablet. Di sana ikonnya ditampilkan apa adanya dan diperbesar.
*/
@media (hover: none) {
  .prose a.tautanBagian {
    width: 2.6rem;
    height: 2.6rem;
    opacity: 1;
  }
}