/* =========================================================================
   Kapten H. Dharsono — sistem visual
   Arah: ruang pamer sejarah digital. Kertas arsip, tinta, garis kronologi,
   nomor arsip, dan label tahun. Tanpa framework, tanpa font eksternal, tanpa
   kartu membulat generik.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* Warna: kertas arsip, tinta, merah tua stempel */
  --paper: #eae5d8;
  --paper-2: #e0dacb;
  --paper-3: #d5cebc;
  --ink: #17160f;
  --ink-soft: #4c483e;
  --muted: #5e594d;
  --rule: #b6ae9b;
  --rule-soft: #c9c2b0;
  --accent: #8c2a24;
  --accent-soft: #b45a4f;
  --dark: #14130f;
  --dark-2: #1e1c16;
  --on-dark: #ece6d8;
  --on-dark-muted: #a49c8b;

  /* Tipografi */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Ritme */
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --band: clamp(4.5rem, 9vw, 9rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; font-size: 17px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Kalibrasi layar lebar.
   Pita 1280px yang pas di laptop meninggalkan ratusan piksel ruang mati di
   monitor 2560–3440px, dan seluruh clamp() tipografi sudah mentok jauh
   sebelum lebar itu. Lebar isi dan ukuran dasar dinaikkan bersama-sama agar
   proporsinya tetap — bukan sekadar kolom yang melar. Ukuran dasar dipasang
   di html supaya setiap clamp() berbasis rem ikut naik. */
@media (min-width: 1600px) {
  html { font-size: 18px; }
  :root { --max: 1440px; }
}
@media (min-width: 2000px) {
  html { font-size: 19px; }
  :root { --max: 1680px; }
}
@media (min-width: 2560px) {
  html { font-size: 20px; }
  :root { --max: 1900px; }
}

img { display: block; max-width: 100%; height: auto; }

/* Aturan display di atas mengalahkan [hidden] dari peramban; pulihkan. */
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Judul: serif berwibawa, tracking wajar (bukan tracking ekstrem ala template) */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

/* Label kecil huruf kapital: sistem "label dinding pameran" */
.kicker, .eyebrow, .source-label, .chapter-number, .catatan-title,
.arsip-no, .kind-tag, .toc-title, .sl-year {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kicker, .eyebrow { color: var(--accent); margin: 0 0 0.9rem; }

.wrap, .profile, .distinct, .chapters-overview, .timeline, .places,
.values, .archive, .legacy, .cta, .source-note, .contrast {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 60;
  padding: 0.85rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 74px;
  padding-inline: var(--edge);
  color: var(--on-dark);
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
}
.brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand span {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.site-header nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.site-header nav a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.site-header nav a:hover, .site-header nav a:focus-visible { border-bottom-color: currentColor; }

/* --------------------------------------------------------- hero beranda */

/* Header gambar. Tidak ada kanvas 3D: satu pelat arsip besar, teks di
   atasnya, dan tepi bawah yang menyerahkan halaman ke naskah. */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88svh, 760px);
  padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
  color: var(--on-dark);
  background: var(--dark);
  isolation: isolate;
}
.hero-plate-home {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.hero-plate-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgb(12 11 9 / 0.94) 0%,
      rgb(12 11 9 / 0.86) 34%,
      rgb(12 11 9 / 0.45) 62%,
      rgb(12 11 9 / 0.2) 100%),
    linear-gradient(180deg, rgb(12 11 9 / 0.85) 0%, transparent 26%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.hero-copy { width: min(46rem, 100%); }
.hero .eyebrow { color: var(--accent-soft); }

h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(3.1rem, 7.5vw, 6.2rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.hero-standfirst {
  max-width: 36rem;
  margin-bottom: 1.8rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: #ddd5c4;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin: 0; }
.hero-secondary {
  color: rgb(255 255 255 / 0.78);
  font-size: 0.8rem;
  text-underline-offset: 0.3rem;
}
.hero-secondary:hover, .hero-secondary:focus-visible { color: #fff; }

.primary-link {
  display: inline-block;
  padding: 0.9rem 1.3rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.primary-link:hover, .primary-link:focus-visible { background: #6f1f1a; }

/* Keterangan pelat hidup di pita kertas di bawah hero, bukan di atas gambar:
   pelat sudah punya sistem tipografinya sendiri. */
.plate-caption {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 1.6rem auto 0;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------- profil */

.profile {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: var(--band);
}
.profile-intro h2 {
  margin: 0 0 1.6rem;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.12;
}
.lead {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.55;
}
.profile-intro p:not(.lead):not(.kicker):not(.note) { color: var(--muted); max-width: 40rem; }
.note {
  margin-top: 1.6rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Lembar fakta: meniru kartu katalog arsip */
.fact-sheet {
  margin: 0;
  align-self: start;
  border-top: 2px solid var(--ink);
}
.fact-sheet > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.fact-sheet dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact-sheet dd { margin: 0; font-size: 0.93rem; }

/* ----------------------------------------------------- alasan / distinct */

.distinct {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}
.distinct-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.distinct-head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.distinct-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.distinct-list li { padding: 1.6rem 1.8rem 0 0; }
.distinct-list li + li { padding-left: 1.8rem; border-left: 1px solid var(--rule); }
.distinct-list .num {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.distinct-list h3 { margin-bottom: 0.7rem; font-size: 1.22rem; line-height: 1.25; }
.distinct-list p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* ------------------------------------------------------------ daftar bab */

.chapters-overview { padding-block: var(--band); border-top: 1px solid var(--rule); }
.section-heading { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-heading h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin-bottom: 1rem; }
.section-heading > p { max-width: 40rem; color: var(--muted); margin: 0; }

.chapters-overview ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.chapters-overview li { border-bottom: 1px solid var(--rule); }
.chapters-overview a {
  display: grid;
  grid-template-columns: 4.5rem 1fr 9rem;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.5rem 0;
  text-decoration: none;
}
.chapters-overview a:hover, .chapters-overview a:focus-visible { background: var(--paper-2); }
.chapters-overview a:hover strong { color: var(--accent); }
.ch-no { color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; }
.ch-body strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ch-body small { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.85rem; }
.ch-year {
  justify-self: center;
  color: var(--accent);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
  font-style: italic;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0;
  text-align: center;
}

/* ------------------------------------------------------------- kronologi */

.timeline { padding-block: var(--band); border-top: 1px solid var(--rule); }
.timeline ol { margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.28fr) 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.9rem 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.timeline li:first-child { border-top: 2px solid var(--ink); }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.timeline time {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.timeline h3 { margin-bottom: 0.5rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.timeline p { max-width: 44rem; margin: 0; color: var(--muted); font-size: 0.94rem; }
.tl-link { margin-top: 0.7rem !important; }
.tl-link a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ----------------------------------------------------------------- tempat */

.places { padding-block: var(--band); border-top: 1px solid var(--rule); }
.places-map { margin: 0 0 2.5rem; }
/* Peta memakai siluet gading beralfa, jadi harus duduk di bidang gelap
   supaya terbaca — sekaligus menyambung dengan peta 3D di halaman bab. */
.places-map img {
  width: 100%;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--dark);
  border: 1px solid var(--ink);
}
.place-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.place-list li {
  display: grid;
  grid-template-columns: 16rem 1fr 5rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.place-list b { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.place-list span { color: var(--muted); font-size: 0.87rem; }
.place-list a {
  justify-self: end;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* -------------------------------------------------------------- kontras */

.contrast {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}
.contrast-copy h2 { margin-bottom: 1.4rem; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.contrast-copy p { color: var(--muted); max-width: 38rem; }
.contrast-more a {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.contrast-figure { margin: 0; }
.contrast-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  background: var(--paper-3);
}

figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Penanda jenis gambar: arsip vs interpretasi editorial */
.kind-tag {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.18rem 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  vertical-align: 0.08em;
}
.arsip-no { margin-right: 0.5rem; color: var(--accent); }

/* ------------------------------------------------------------------ nilai */

.values { padding-block: var(--band); border-top: 1px solid var(--rule); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--ink);
}
.values article { padding: 1.4rem 1.4rem 2rem 0; }
.values article + article { padding-left: 1.4rem; border-left: 1px solid var(--rule); }
.values span { display: block; margin-bottom: 0.8rem; color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; }
.values h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.values p { margin: 0; color: var(--muted); font-size: 0.88rem; }

/* ------------------------------------------------------------------ arsip */

.archive { padding-block: var(--band); border-top: 1px solid var(--rule); }
.photo-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.photo-grid figure { margin: 0 0 1.8rem; }
.photo-grid img {
  width: 100%;
  height: clamp(300px, 42vw, 560px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  background: var(--paper-3);
}
.photo-tall { margin-top: 4rem !important; }
.photo-tall img { height: clamp(380px, 52vw, 680px); }

.archive-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
  border-top: 2px solid var(--ink);
}
.archive-links a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem 1rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.archive-links a:not(:nth-child(3n + 1)) { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
.archive-links b { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; }
.archive-links span { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.archive-links a:hover b, .archive-links a:focus-visible b { color: var(--accent); }

/* --------------------------------------------------------------- warisan */

.legacy {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}
.legacy-copy h2 { margin-bottom: 1.3rem; font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.legacy-copy p { color: var(--muted); max-width: 40rem; }
.legacy-quote { align-self: center; padding-left: 1.6rem; border-left: 3px solid var(--accent); }
blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.35;
}
.byline { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------- cta */

.cta {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.cta h2 {
  max-width: 26ch;
  margin: 0 auto 2rem;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
}
.cta .kicker { text-align: center; }

/* ------------------------------------------------------- catatan sumber */

.source-note {
  display: grid;
  grid-template-columns: 0.35fr 1.65fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
}
.source-note h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.source-note p { max-width: 52rem; color: var(--muted); font-size: 0.9rem; }
.source-note p:last-child { margin-bottom: 0; }

footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2.2rem var(--edge);
  background: var(--dark);
  color: var(--on-dark-muted);
  font-size: 0.82rem;
}
footer p { margin: 0; }

/* =========================================================================
   Halaman bab
   ========================================================================= */

.chapter-page { background: var(--paper); }

.chapter-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  height: 60px;
  padding-inline: var(--edge);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(10px);
}
.chapter-header .brand { color: var(--ink); flex: none; }
.chapter-locator {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}
.loc-chapter { flex: none; }
.loc-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}
.loc-sub::before { content: "· "; }

.toc-toggle {
  flex: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.toc-toggle:hover, .toc-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

.read-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--rule-soft);
}
.read-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Kepala bab: satu pelat gambar, teks di bawahnya. Menggantikan kanvas 3D. */
.chapter-hero {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.hero-plate {
  grid-column: 1 / -1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.hero-plate img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  filter: saturate(0.74) contrast(1.05);
}
.hero-text { display: contents; }
.hero-text .chapter-number { grid-column: 1 / -1; }
.chapter-number { grid-column: 1 / -1; color: var(--accent); margin: 0 0 1rem; }
.chapter-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 0.98;
}
.chapter-hero h1 { grid-column: 1; }
.chapter-deck { grid-column: 2; }
.chapter-places { grid-column: 2; }
.chapter-deck {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.chapter-places {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ scene 3D per bab */

/* Tanpa JavaScript, seluruh isi scene tidak tersedia — sembunyikan agar
   tidak menyisakan ruang kosong. Semua tautannya juga ada di daftar isi. */

/* --------------------------------------------------- jejak tempat (teks) */

/* Dulu peta 3D. Sekarang daftar perhentian: tahun di margin kiri, judul yang
   menautkan ke bagian naskahnya, lalu tempat dan keterangan singkat. */
.place-track {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--ink);
}
.track-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.track-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.6rem; }
.track-note { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 44rem; }

.place-track > ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 22rem;
  column-gap: clamp(2rem, 5vw, 4rem);
}
.place-track li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--rule);
}
.pt-year {
  margin: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.pt-body { min-width: 0; }
.pt-title { margin: 0 0 0.15rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; }
.pt-title a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.pt-title a:hover, .pt-title a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
.pt-place { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.04em; }
.pt-note { margin: 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.55; }

/* --------------------------------------------- tata letak naskah + daftar isi */

.chapter-layout {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.chapter-toc {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.toc-title { margin: 0 0 0.9rem; color: var(--muted); }
.chapter-toc ol { margin: 0; padding: 0; list-style: none; }
.chapter-toc li { margin-bottom: 0.15rem; }
.chapter-toc a {
  display: block;
  padding: 0.35rem 0.5rem 0.35rem 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.chapter-toc .toc-h2 > a {
  margin-top: 0.7rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
}
.chapter-toc .toc-h3 > a { padding-left: 0.8rem; }
.chapter-toc a:hover { color: var(--accent); }
.chapter-toc a[aria-current="true"] {
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 0.8rem;
  background: var(--paper-2);
}
.chapter-toc .toc-h2 > a[aria-current="true"] { padding-left: 0.5rem; }

/* ------------------------------------------------------------ isi naskah */

.book-content { max-width: 42rem; }
.book-section { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--rule); }
.book-section:first-child { padding-top: 0; border-top: 0; }

.source-label { margin: 0 0 1.6rem; color: var(--accent); }

.book-content h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
}
.book-content h3 {
  margin: 3rem 0 0.9rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.22;
}
.book-content h4 { margin: 2.2rem 0 0.8rem; font-size: 1.12rem; color: var(--ink-soft); }

.book-content p {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.35vw, 1.1rem);
  line-height: 1.72;
  hyphens: auto;
}
.book-content .byline { font-family: var(--sans); font-size: 0.82rem; margin-bottom: 1.8rem; }

.section-deck {
  max-width: 34rem;
  margin-bottom: 2rem !important;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
  line-height: 1.48 !important;
}

/* Ilustrasi editorial: keluar dari kolom teks, diberi label eksplisit */
.section-visual { width: min(52rem, 100%); margin: 2rem 0 2.5rem; }
.section-visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-3);
  filter: saturate(0.72) contrast(1.05);
  border: 1px solid var(--rule);
}
.section-visual figcaption small { display: block; margin-top: 0.3rem; opacity: 0.8; }

/* Kalimat pembuka setelah ilustrasi: drop cap tipis */
.section-visual + p::first-letter {
  float: left;
  margin: 0.1em 0.1em 0 0;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 3.2em;
  line-height: 0.78;
}

/* Penanda catatan kaki */
sup.fn {
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--accent);
  padding-left: 0.1em;
}
sup.fn a { text-decoration: none; }
sup.fn a:hover { text-decoration: underline; }

.catatan {
  margin: 2.5rem 0 0;
  padding: 1.3rem 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--rule);
}
.catatan-title { margin: 0 0 0.8rem; color: var(--muted); }
.catatan ol { margin: 0; padding-left: 1.2rem; }
.catatan li { margin-bottom: 0.7rem; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.fn-back { color: var(--accent); text-decoration: none; }

.naskah-note {
  margin-top: 2.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule);
}
.naskah-note p { margin: 0; font-family: var(--sans) !important; font-size: 0.84rem !important; color: var(--muted); line-height: 1.6 !important; }
.naskah-note a { color: var(--accent); }

.pustaka { margin: 0; padding: 0; list-style: none; }
.pustaka li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--rule-soft);
  text-indent: -1.4rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Foto keluarga mengalir di antara paragraf, bukan menunggu di galeri akhir. */
/* Foto dalam naskah melebar melewati kolom teks.
   Trik full-bleed lama (margin-inline: 50% + translateX(-50%)) memusatkan blok
   pada tengah KOLOM TEKS, bukan tengah layar. Di halaman bab, kolom teks duduk
   di sisi kanan kisi dua kolom, sehingga blok 58rem itu meluber ±128px ke kiri
   dan menutupi daftar isi. Sekarang blok hanya tumbuh ke kanan, ke ruang yang
   memang kosong, dan tepi kirinya tetap sejajar dengan teks. */
.story-photos {
  width: min(58rem, 100%);
  margin: clamp(2.2rem, 5vw, 4rem) 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  align-items: start;
}
.story-photos.is-reversed { grid-template-columns: 0.85fr 1.15fr; }
.story-photos.is-single { width: min(46rem, 100%); grid-template-columns: 1fr; }

/* Kolom naskah 42rem, blok foto 58rem: selisihnya diambil dari ruang kosong
   di kanan, hanya kalau layar memang menyediakannya. */
@media (min-width: 1100px) {
  .story-photos { width: min(58rem, calc(100% + 14rem)); }
}
.story-photos figure { min-width: 0; margin: 0; }
.story-photos:not(.is-single) figure:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 4rem); }
.story-photos.is-reversed figure:first-child { margin-top: clamp(1.5rem, 4vw, 4rem); }
.story-photos.is-reversed figure:nth-child(2) { margin-top: 0; }
.story-photos .zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  cursor: zoom-in;
}
.story-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(0.16) contrast(1.02); }
.story-photos .zoom:hover img, .story-photos .zoom:focus-visible img { filter: none; }
.story-photos figcaption small { display: block; margin-top: 0.25rem; color: var(--accent); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ------------------------------------------------------- navigasi bawah */

.chapter-index {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--ink);
}
.chapter-index a {
  display: flex;
  gap: 0.8rem;
  padding: 1rem 1.2rem 1rem 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.chapter-index a:not(:nth-child(3n + 1)) { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
.chapter-index a span { color: var(--accent); font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
.chapter-index a:hover { color: var(--ink); }
.chapter-index a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

.chapter-pager {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 3rem auto clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.chapter-pager a {
  padding: 1.3rem 1.4rem;
  background: var(--paper-2);
  text-decoration: none;
}
.chapter-pager a:hover { background: var(--paper-3); }
.chapter-pager span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chapter-pager strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pager-next { text-align: right; }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 9 8 / 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox img { max-height: 78vh; width: auto; margin-inline: auto; }
.lightbox figcaption { color: var(--on-dark-muted); text-align: center; }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); }
body.has-lightbox { overflow: hidden; }

/* =========================================================================
   Mode gelap
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15140f;
    --paper-2: #1e1c16;
    --paper-3: #2a271f;
    --ink: #ece6d8;
    --ink-soft: #c2baa9;
    --muted: #9d9483;
    --rule: #3c382f;
    --rule-soft: #2c2922;
    --accent: #d1746a;
    --accent-soft: #e09a91;
  }
  .kind-tag { background: var(--paper-3); color: var(--ink); }
  .chapter-header { background: color-mix(in srgb, var(--paper) 90%, transparent); }
  .primary-link { background: var(--accent); color: #1a0f0d; }
  .primary-link:hover, .primary-link:focus-visible { background: #e6a79f; }
  .toc-toggle:hover, .toc-toggle[aria-expanded="true"] { background: var(--accent); color: #1a0f0d; }
  .photo-grid img, .contrast-figure img { filter: grayscale(1) contrast(0.95) brightness(0.92); }
  footer { background: #0d0c09; }
}

/* =========================================================================
   Responsif
   ========================================================================= */

/* Laptop kecil: daftar isi jadi panel yang dibuka lewat tombol */
@media (max-width: 1099px) {
  /* Daftar isi keluar dari alur (fixed + display:none), jadi kisi tinggal
     satu kolom dan tidak berguna lagi. Sebagai kisi, naskah masih terikat
     ukuran minimum otomatis grid item dan meluber ±46px di layar 390px;
     sebagai blok biasa ia menyusut dengan benar. */
  .chapter-layout { display: block; }
  .chapter-toc {
    position: fixed;
    inset: 60px 0 auto;
    z-index: 25;
    display: none;
    max-height: 70vh;
    padding: 1.2rem var(--gutter) 1.6rem;
    background: var(--paper);
    border-top: 0;
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
  }
  .chapter-toc.is-open { display: block; }
  .book-content { max-width: 42rem; margin-inline: auto; }
}

@media (min-width: 1100px) {
  .toc-toggle { display: none; }
}

/* Tablet */
@media (max-width: 900px) {
  .profile, .contrast, .legacy, .source-note, .chapter-hero { grid-template-columns: 1fr; }
  .distinct-list { grid-template-columns: 1fr; border-top-width: 2px; }
  .distinct-list li { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
  .distinct-list li + li { padding-left: 0; border-left: 0; }
  .distinct-list li:first-child { border-top: 0; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values article { padding-right: 1.2rem; border-top: 1px solid var(--rule); }
  .values article:nth-child(-n + 2) { border-top: 0; }
  .values article + article { border-left: 0; padding-left: 0; }
  .values article:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
  .archive-links, .chapter-index { grid-template-columns: repeat(2, 1fr); }
  .archive-links a:not(:nth-child(3n + 1)),
  .chapter-index a:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .archive-links a:nth-child(even),
  .chapter-index a:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
  .chapter-hero { align-items: start; }
}

/* Ponsel */
@media (max-width: 760px) {
  html { scroll-padding-top: 4.5rem; font-size: 16px; }

  .site-header { height: 62px; }
  .site-header nav { display: none; }

  /* Ponsel mengikuti rancangan awal: gambar sebagai header, lalu teks. */
  .hero { display: flex; flex-direction: column; min-height: 0; padding-top: 62px; }
  .hero-shade {
    background: linear-gradient(0deg, rgb(12 11 9 / 0.96) 0%, rgb(12 11 9 / 0.55) 46%, rgb(12 11 9 / 0.12) 100%);
  }
  .hero-standfirst { width: min(18rem, 100%); max-width: none; font-size: 1rem; overflow-wrap: anywhere; }
  .art-note { position: static; margin: 1rem var(--gutter) 1.5rem; max-width: none; text-align: left; }

  .fact-sheet > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .chapters-overview a { grid-template-columns: 2.6rem 1fr; row-gap: 0.3rem; }
  .ch-year { grid-column: 2; justify-self: center; text-align: center; }
  .timeline li { grid-template-columns: 1fr; gap: 0.6rem; }
  .place-list li { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .place-list span { grid-column: 1; }
  .place-list a { grid-row: 1 / span 2; align-self: center; }
  .photo-grid { grid-template-columns: 1fr; }
  .photo-tall { margin-top: 0 !important; }
  .archive-links, .chapter-index, .chapter-pager { grid-template-columns: 1fr; }
  .archive-links a:nth-child(even),
  .chapter-index a:nth-child(even) { padding-left: 0; border-left: 0; }
  .pager-next { text-align: left; }
  .legacy-quote { padding-left: 1.1rem; }
  .values-grid { grid-template-columns: 1fr; }
  .values article:nth-child(even) { padding-left: 0; border-left: 0; }
  .values article { border-top: 1px solid var(--rule); }
  .values article:first-child { border-top: 0; }

  .section-visual { width: 100%; }
  .story-photos, .story-photos.is-reversed, .story-photos.is-single {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: 1fr;
    transform: none;
  }
  .story-photos:not(.is-single) figure:nth-child(2),
  .story-photos.is-reversed figure:first-child { margin-top: 0; }
  .chapter-toc { padding-inline: var(--gutter); }
  footer { display: grid; }
}

/* =========================================================================
   Preferensi gerak
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .read-progress span { transition: transform 0.14s linear; }
  .primary-link, .chapters-overview a,
  .chapter-pager a, .toc-toggle { transition: background 0.18s ease, color 0.18s ease; }
  @keyframes enter { from { opacity: 0; transform: translateY(18px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Cetak: naskah tetap terbaca tanpa kanvas dan navigasi */
@media print {
  .chapter-scene, .chapter-header, .chapter-toc, .lightbox,
  body { background: #fff; color: #000; font-size: 11pt; }
  .chapter-layout { display: block; }
  .book-content { max-width: none; }
}