/*
 * pages.css
 *
 * Gaya untuk naskah halaman statis yang ditulis dari dashboard.
 *
 * Berkas TERPISAH, bukan tambahan di typingscenes.css. Berkas itu sudah dua
 * kali kehilangan blok karena disusun ulang dari salinan lama, dan aturan
 * yang hanya dipakai satu jenis halaman tidak sepadan dengan risikonya.
 *
 * Seluruh aturan di sini disarangkan di bawah .ts-prose, jadi tidak ada satu
 * pun yang bisa bocor ke halaman lain walau berkasnya kebetulan ikut dimuat.
 */

.ts-prose {
  color: var(--ts-ink);
  font-size: 1rem;
  line-height: 1.75;

  /*
   * Lebar baca dibatasi walaupun halamannya selebar penuh.
   *
   * Tata letaknya memang dua kolom selebar toko, tapi naskah kebijakan yang
   * barisnya membentang seribu piksel membuat mata kehilangan barisnya
   * setiap kali berpindah ke baris berikutnya. Yang membatasi bukan lebar
   * kartunya melainkan lebar naskahnya, jadi kartu tetap penuh dan
   * naskahnya yang berhenti di titik yang nyaman dibaca.
   *
   * Satuan ch, bukan rem, karena yang menentukan kenyamanan adalah jumlah
   * huruf per baris, bukan jumlah piksel. Ukuran huruf boleh berubah tanpa
   * membuat barisnya jadi terlalu panjang.
   */
  max-width: 74ch;
}

.ts-prose> :first-child {
  margin-top: 0;
}

.ts-prose> :last-child {
  margin-bottom: 0;
}

.ts-prose p {
  margin: 0 0 1.1rem;
}

/*
 * h3 dipakai sebagai judul bagian, bukan h2, supaya urutan judul di halaman
 * tetap masuk akal: h1 judul halaman, h2 tidak dipakai, h3 bagian. Pembaca
 * layar membaca urutan itu, dan melompat dari h1 ke h3 lebih baik daripada
 * dua h1 di satu halaman.
 */
.ts-prose h3 {
  margin: 2rem 0 .7rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ts-ink);
}

.ts-prose ul,
.ts-prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
}

.ts-prose li {
  margin-bottom: .45rem;
}

.ts-prose a {
  color: var(--ts-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ts-prose a:hover {
  color: var(--ts-ink);
}

.ts-prose b,
.ts-prose strong {
  font-weight: 700;
}

/*
 * Penanda [ISI] disorot supaya tidak lolos ke halaman yang sudah tayang.
 *
 * Warnanya sengaja mencolok. Naskah kebijakan yang masih memuat penanda
 * adalah naskah yang belum selesai, dan yang paling mahal adalah kalau
 * penanda itu terbaca pembeli tanpa ada yang menyadarinya lebih dulu.
 */
.ts-prose mark.ts-todo {
  background: #FFE8A3;
  color: #6B4E00;
  padding: 0 .25rem;
  border-radius: 3px;
  font-weight: 700;
}

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

@media (max-width: 575.98px) {
  .ts-prose {
    font-size: .95rem;
  }

  .ts-prose h3 {
    margin-top: 1.6rem;
  }
}