/*
 * Lorong Tujuh — satu helaian gaya.
 *
 * Laman ini SENGAJA tidak berkongsi apa-apa dengan laman kembar: palet,
 * tipografi dan nama kelas semuanya berbeza. Fail yang sama bait-ke-bait pada
 * dua domain mengikat kedua-duanya tidak kurang daripada satu alamat IP
 * bersama.
 *
 * Latar BADAN sentiasa daripada pembolehubah — dua nilai itu sama dengan warna
 * bingkai dalam inc/partials/atas.php.
 */

:root {
  --muka: #f4f2ee;
  --muka-2: #ebe7e0;
  --huruf: #211d26;
  --huruf-2: #5d5566;
  --garisan: #d8d2c8;
  --ungu: #6b4e8f;
  --ungu-terang: #8f74b3;
  --tembaga: #8f6b4e;
  --lebar: 38rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --muka: #191620;
    --muka-2: #221d2b;
    --huruf: #e6e1ea;
    --huruf-2: #a79fb0;
    --garisan: #342c3f;
    --ungu: #a98cc9;
    --ungu-terang: #c2abdb;
    --tembaga: #c49a76;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--muka);
  color: var(--huruf);
  font: 17px/1.75 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

.jalur {
  width: 100%;
  max-width: var(--lebar);
  margin: 0 auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}
.jalur--teks { padding-block: clamp(1.75rem, 6vw, 3.5rem) 4rem; }

.terus { position: absolute; left: -9999px; }
.terus:focus {
  left: 1rem; top: 1rem; z-index: 5;
  padding: .5rem .75rem;
  background: var(--ungu);
  color: var(--muka);
}

/* ------------------------------------------------------------- kepala */

.kepala { border-bottom: 1px solid var(--garisan); }
.kepala .jalur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  padding-block: 1rem;
}
.judul {
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: inherit;
  text-decoration: none;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-inline-start: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.menu a { color: var(--huruf-2); text-decoration: none; }
.menu a:hover { color: var(--huruf); }
.menu a[aria-current="page"] { color: var(--ungu); }

/* ------------------------------------------------------------- teks */

h1 {
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tembaga);
  margin: 2.5rem 0 .5rem;
}
p { margin: 0 0 1.1rem; }
a { color: var(--ungu); text-underline-offset: .18em; }

.label {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--huruf-2);
  margin-bottom: .5rem;
}
.bayang { color: var(--huruf-2); }
.nota {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .86rem;
  color: var(--huruf-2);
}
.cerita { font-size: 1.05rem; }
.cerita:first-letter { /* huruf pertama bab sedikit lebih besar */
  font-size: 1.35em;
  line-height: 1;
}

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

.senarai { margin: 0 0 1.1rem; padding-inline-start: 1.2rem; }
.senarai li { margin-bottom: .45rem; }

/* ------------------------------------------------------------- pilihan */

.pilihan {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--garisan);
}
.pilihan__tajuk {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tembaga);
  margin-bottom: .75rem;
}
.pilihan ul { list-style: none; margin: 0; padding: 0; }
.pilihan li { margin-bottom: .6rem; }
.pilihan a {
  display: block;
  padding: .7rem .9rem;
  border: 1px solid var(--garisan);
  border-inline-start: 3px solid var(--ungu);
  background: var(--muka-2);
  color: var(--huruf);
  text-decoration: none;
}
.pilihan a:hover { border-inline-start-color: var(--tembaga); }

.penghujung {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--garisan);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--tembaga);
}

.tindak { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.pautan-besar {
  display: inline-block;
  padding: .6rem 1.2rem;
  background: var(--ungu);
  color: var(--muka);
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem;
}
.pautan-besar:hover { background: var(--ungu-terang); }
.pautan-kecil {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .88rem;
  color: var(--huruf-2);
}

.senarai-bab { padding-inline-start: 1.6rem; }
.senarai-bab li { margin-bottom: .5rem; }
.senarai-bab::marker { color: var(--tembaga); }
.tanda-habis {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tembaga);
  margin-inline-start: .4rem;
}

/* ------------------------------------------------------------- kaki */

.kaki {
  border-top: 1px solid var(--garisan);
  padding-block: 1.5rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .86rem;
  color: var(--huruf-2);
}
.kaki__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.kaki__hak { margin: 0; }

@media print {
  .kepala, .kaki, .terus, .tindak { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pilihan a { border: 0; background: transparent; padding: 0; }
}