/* ─────────────────────────────────────────────────────────────
   gustavo.my.id — halaman baca, bukan dashboard.

   Aturan yang dipegang:
   · tidak ada kartu, tidak ada radius, tidak ada bayangan, tidak ada pil
   · pemisah antar item adalah ruang kosong dan satu garis rambut
   · warna hanya tiga: tinta, kertas, satu aksen — aksen khusus tautan
   · hierarki dibangun dari ukuran dan ruang, bukan dari kotak dan tebal
   · lebar baca 62–66 karakter (USWDS 45–90, Baymard 50–75)
   · semua teks ≥ 4.5:1 (WCAG 2.2 AA), diverifikasi dengan skrip
   ───────────────────────────────────────────────────────────── */

:root {
  --paper:   #FCFAF6;
  --ink:     #17150F;
  --ink-2:   #55503F;   /* teks sekunder */
  --ink-3:   #6E6858;   /* meta terkecil */
  --rule:    #E3DED0;
  --rule-2:  #CFC8B5;
  --accent:  #8A3A12;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", "Book Antiqua",
           Palatino, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Inter, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 33rem;
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
}

[data-theme="dark"] {
  --paper:  #100F0D;
  --ink:    #EBE5D9;
  --ink-2:  #B0A897;
  --ink-3:  #948C7C;
  --rule:   #2A2721;
  --rule-2: #464137;
  --accent: #E2A071;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#100F0D; --ink:#EBE5D9; --ink-2:#B0A897; --ink-3:#948C7C;
    --rule:#2A2721; --rule-2:#464137; --accent:#E2A071;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: .5rem;
  background: var(--paper); color: var(--ink);
  padding: .5rem 1rem; border: 1px solid var(--accent); z-index: 9;
  font-family: var(--sans); font-size: .875rem;
}
.skip:focus { left: 1rem; }

/* ── tautan: warna + garis bawah, tidak ada tebakan soal mana yang bisa diklik ── */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ── kepala halaman: ikut menggulung, tidak menempel ── */
.head {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 2rem 0 0;
  font-family: var(--sans); font-size: .8125rem;
}
.head .name {
  margin-right: auto; color: var(--ink); text-decoration: none;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.head .name:hover { color: var(--accent); }
.head a.q { color: var(--ink-2); text-decoration: none; }
.head a.q:hover { color: var(--accent); text-decoration: underline; }
.head button {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-2); text-decoration: none;
}
.head button:hover { color: var(--accent); text-decoration: underline; }

/* ── kepala edisi ── */
.mast { padding: 3.5rem 0 2.5rem; }
.mast .over {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .06em;
  color: var(--ink-3); margin: 0 0 1rem; text-transform: uppercase;
}
.mast h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.08; letter-spacing: -.02em; font-weight: 600;
  margin: 0 0 1rem;
}
.mast .sub {
  font-size: 1.0625rem; color: var(--ink-2); margin: 0;
  font-style: italic;
}

/* ── seksi ── */
.sec { padding: 3.5rem 0 0; }
.sec > h2 {
  font-size: 1.5rem; font-weight: 600; font-style: italic;
  letter-spacing: -.01em; margin: 0;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rule-2);
}
.sec > .count {
  font-family: var(--sans); font-size: .8125rem; color: var(--ink-3);
  margin: .625rem 0 0;
}


/* halaman edisi: judul brief sudah ada di masthead, seksi tidak perlu kepala lagi */
.sec.bare { padding-top: 0; }
.say.lead { color: var(--ink-2); margin-top: .75rem; }

/* perkiraan waktu baca */
.est {
  font-family: var(--sans); font-size: .8125rem; color: var(--ink-3);
  margin: 1.25rem 0 0;
}

/* daftar lompat ke kelompok — hanya muncul kalau kelompoknya >= 3 */
.jump {
  font-family: var(--sans); font-size: .8125rem; line-height: 1.9;
  color: var(--ink-3); margin: 1.5rem 0 0;
}
.jump a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.jump a:hover { color: var(--accent); }
.jump a + a { margin-left: .75rem; }

/* edisi sebelum / sesudah */
.pager {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .875rem;
}
.pager a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.pager a:hover { color: var(--accent); }

/* ── catatan ── */
.aside {
  font-size: .9375rem; color: var(--ink-2); font-style: italic;
  margin: 1.5rem 0 0; padding-left: 1rem;
  border-left: 2px solid var(--rule-2);
}
.aside.flag { border-left-color: var(--accent); color: var(--ink); font-style: normal; }
.aside b { font-style: normal; }

/* ── kelompok ── */
.grp { margin-top: 2.75rem; }
.grp > h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.5rem;
}

/* ── item: tanpa kotak. jarak dan satu garis rambut. ── */
.item {
  position: relative;
  padding: 0 0 1.75rem; margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--rule);
}

/* item aktif — dari #anchor atau dari papan ketik j/k.
   Satu garis tipis di margin kiri; tidak menggeser teks sedikit pun. */
.item:target::before,
.item.here::before {
  content: ""; position: absolute;
  left: -1rem; top: .2em; bottom: 1.75rem; width: 2px;
  background: var(--accent);
}
.item h3:focus-visible { outline: none; }

/* permalink item: samar tapi selalu ada, tidak disembunyikan di balik hover */
.hash {
  font-family: var(--sans); font-weight: 400; font-size: .8em;
  margin-left: .35em; color: var(--rule-2); text-decoration: none;
  opacity: .4;
}
.item:hover .hash, .hash:focus-visible { opacity: 1; color: var(--accent); }
.grp .item:last-child, .sec > .item:last-child { border-bottom: 0; margin-bottom: 0; }

.item h3 {
  font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.011em; margin: 0 0 .5rem;
}
.item p { margin: 0 0 .5rem; }
.item p:last-child { margin-bottom: 0; }
.item .say { color: var(--ink); }

/* meta: satu baris sans kecil, dipisah titik tengah */
.by {
  font-family: var(--sans); font-size: .8125rem; line-height: 1.5;
  color: var(--ink-3); margin: .625rem 0 0;
}
.by a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.by a:hover { color: var(--accent); }
.now { color: var(--ink); font-style: italic; }

/* fakta ringkas untuk item airdrop — sans, sejajar, tanpa pil */
.facts {
  font-family: var(--sans); font-size: .8125rem; color: var(--ink-3);
  margin: 0 0 .625rem;
}
.need {
  font-family: var(--sans); font-size: .8125rem; color: var(--ink-3);
  margin: .5rem 0 0;
}
.need b { color: var(--ink-2); font-weight: 600; }

.item .open { font-family: var(--sans); font-size: .875rem; margin-top: .75rem; }

.sep { padding: 0 .45em; color: var(--rule-2); }

/* ── kosong ── */
.none {
  font-style: italic; color: var(--ink-3); margin: 1.5rem 0 0;
  font-size: 1.0625rem;
}

/* ── arsip ── */
.list { list-style: none; margin: 2rem 0 0; padding: 0; }
.list li { border-bottom: 1px solid var(--rule); }
.list a {
  display: block; padding: 1.125rem 0; text-decoration: none; color: var(--ink);
}
.list a:hover .when { color: var(--accent); text-decoration: underline; }
.list .when { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.list .what {
  display: block; font-family: var(--sans); font-size: .8125rem;
  color: var(--ink-3); margin-top: .25rem;
}

/* ── kaki ── */
.foot {
  margin-top: 5rem; padding: 2rem 0 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .8125rem; line-height: 1.65;
  color: var(--ink-3);
}
.foot p { margin: 0 0 .625rem; }
.foot p:last-child { margin-bottom: 0; }
.foot b { color: var(--ink-2); font-weight: 600; }
.keys { margin-top: 1.25rem; }
kbd {
  font-family: var(--mono); font-size: .9em;
  border: 1px solid var(--rule-2); border-radius: 3px;
  padding: .05em .35em; color: var(--ink-2);
}

@media (hover: none) {
  .keys { display: none; }        /* tidak ada papan ketik untuk dipakai */
  .hash { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 30rem) {
  body { font-size: 1.0625rem; line-height: 1.58; }
  .mast { padding: 2.5rem 0 2rem; }
  .sec { padding-top: 2.75rem; }
}

@media print {
  .head, .foot { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .item { break-inside: avoid; border-bottom-color: #ddd; }
  a { color: #000; }
}