/* =========================================================================
   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 arsip 3D */

/* Jalur gulir yang memaku hero sementara kamera menyusuri keenam kartu.
   Tanpa kelas is-scrubbed (tanpa JS, tanpa WebGL, layar sempit, atau gerak
   dikurangi) hero berperilaku seperti bagian biasa. */
.hero-track { position: relative; }
.hero-track.is-scrubbed { height: 420svh; }
.hero-track.is-scrubbed .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

/* Hero sinematik: gambar perjalanan menjadi header seperti rancangan awal. */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--dark);
  isolation: isolate;
}

.hero-masthead {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  padding-top: clamp(6.5rem, 11vh, 7rem);
  pointer-events: none;
}
.hero-copy { width: min(38vw, 34rem); }
.hero .eyebrow { color: var(--accent-soft); }

.hero-strip {
  position: absolute;
  inset: 0;
}
.experience-fallback, #archive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.experience-fallback { object-fit: cover; opacity: 0.5; transition: opacity 0.7s ease; }
.webgl-ready .experience-fallback { opacity: 0.08; }
#archive-canvas { z-index: 0; display: block; touch-action: pan-y; }
#archive-canvas.is-clickable { cursor: pointer; }

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Kartu terus menyapu ke kiri saat kamera terbang, jadi kolom teks harus
     tetap gelap sampai melewati lebar kolom bacaan (±40% layar lebar). */
  background:
    linear-gradient(90deg,
      rgb(12 11 9 / 0.96) 0%,
      rgb(12 11 9 / 0.93) 28%,
      rgb(12 11 9 / 0.6) 42%,
      rgb(12 11 9 / 0.06) 62%),
    linear-gradient(180deg, rgb(12 11 9 / 0.9) 0%, transparent 24%);
}

.strip-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 31rem) 1fr;
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-block: 0 clamp(7rem, 14vh, 8rem);
  pointer-events: none;
}
.strip-inner a, .strip-inner button { pointer-events: auto; }

h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(3.4rem, 8vw, 6.6rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.hero-standfirst {
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: #ddd5c4;
}

/* Panel bacaan yang berubah mengikuti pilihan panel 3D */
.scene-readout {
  margin-top: 0;
  padding: 0;
  border-top: 0;
}
.chapter-meta {
  margin: 0 0 0.5rem;
  color: var(--accent-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scene-readout h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}
.scene-readout .scene-place {
  margin: 0 0 0.7rem;
  color: var(--on-dark-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
#scene-chapter-summary {
  max-width: 32rem;
  color: #cfc7b6;
  font-size: 0.98rem;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.4rem 0 0; }

.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; }
/* Tautan lewati adalah kendali berdiri sendiri, bukan tautan di dalam
   kalimat, jadi tingginya dinaikkan ke ambang target sentuh 24px. */
.skip-experience {
  display: inline-block;
  padding-block: 0.4rem;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.8rem;
  text-underline-offset: 0.3rem;
}

.experience-nav {
  position: absolute;
  left: 50%;
  bottom: 1.3rem;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
.experience-nav ol { display: flex; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.experience-nav button {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(12 11 9 / 0.6);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.experience-nav button:hover,
.experience-nav button:focus-visible,
.experience-nav button.is-active {
  border-color: var(--accent-soft);
  background: var(--accent);
  color: #fff;
}

.art-note {
  position: absolute;
  z-index: 4;
  right: var(--edge);
  bottom: 1.5rem;
  max-width: 24rem;
  margin: 0;
  color: rgb(255 255 255 / 0.62);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: right;
}

/* -------------------------------------------------------------- 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%;
}

.chapter-hero {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.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-side { padding-bottom: 0.4rem; }
.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. */
.chapter-scene { display: none; }
.js .chapter-scene { display: block; }

.chapter-scene {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: clamp(5rem, 10vw, 9rem) auto clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid var(--ink);
}
.scene-head { max-width: 46rem; margin-bottom: 1.6rem; }
.scene-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.6rem; }
.scene-help { margin: 0; color: var(--muted); font-size: 0.85rem; }
.scene-help .skip-experience { color: var(--accent); }

.scene-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: 1px;
  background: var(--rule);
  border: 1px solid #302c24;
  min-height: 420px;
}
.scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: var(--dark);
  touch-action: pan-y;
}
.scene-canvas.is-clickable { cursor: pointer; }
.scene-fallback {
  grid-column: 1;
  display: grid;
  align-content: center;
  margin: 0;
  padding: 2rem;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 0.9rem;
}
/* Tanpa WebGL, panggung tidak perlu tinggi minimum sebesar kanvas. */
.chapter-scene.no-webgl .scene-stage { min-height: 0; }

.scene-panel {
  padding: 1.4rem;
  background: var(--dark-2);
  color: var(--on-dark);
  overflow-y: auto;
  max-height: 520px;
}
.scene-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 1rem;
  filter: saturate(0.8) contrast(1.04);
  background: var(--paper-3);
}
.scene-year {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scene-node-title { margin: 0 0 0.4rem; font-size: 1.3rem; line-height: 1.2; }
.scene-panel .scene-place {
  margin: 0 0 0.8rem;
  color: var(--on-dark-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.scene-note { margin: 0 0 1.1rem; color: #d5cdbc; font-size: 0.9rem; }
.scene-jump {
  display: inline-block;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Daftar simpul: setara kanvas, bisa keyboard dan layar sentuh */
.scene-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 0;
}
.scene-list button {
  display: block;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}
.scene-list button:hover { background: var(--paper-3); }
.scene-list button.is-active { background: var(--ink); color: var(--paper); }
.scene-list button.is-active .sl-year { color: var(--accent-soft); }
.sl-year { display: block; margin-bottom: 0.2rem; color: var(--accent); font-size: 0.64rem; }
.sl-title { display: block; font-family: var(--serif); font-size: 0.98rem; line-height: 1.2; }
.sl-place { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.74rem; }
.scene-list button.is-active .sl-place { color: var(--on-dark-muted); }
.scene-caption { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.78rem; max-width: 48rem; }

/* --------------------------------------------- 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. */
.story-photos {
  width: min(58rem, calc(100vw - var(--gutter) * 2));
  margin: clamp(2.2rem, 5vw, 4rem) 50%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  align-items: start;
  transform: translateX(-50%);
}
.story-photos.is-reversed { grid-template-columns: 0.85fr 1.15fr; }
.story-photos.is-single { width: min(46rem, calc(100vw - var(--gutter) * 2)); grid-template-columns: 1fr; }
.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); }
  .scene-list button.is-active { background: var(--accent); color: #1a0f0d; }
  .scene-list button.is-active .sl-year,
  .scene-list button.is-active .sl-place { color: #3d1a16; }
  .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); }
  .scene-stage { grid-template-columns: 1fr; }
  .scene-panel { max-height: none; }
  .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-masthead {
    position: relative;
    order: 2;
    left: auto;
    transform: none;
    width: auto;
    margin-inline: var(--gutter);
    padding-block: 2rem 1.8rem;
    pointer-events: auto;
  }
  .hero-copy { width: auto; }
  .hero-strip { position: relative; order: 1; min-height: 43svh; }
  .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%);
  }
  .strip-inner {
    position: relative;
    order: 3;
    grid-template-columns: 1fr;
    align-items: start;
    width: auto;
    height: auto;
    margin-inline: var(--gutter);
    padding-block: 1.4rem 4.4rem;
  }
  .hero-standfirst { width: min(18rem, 100%); max-width: none; font-size: 1rem; overflow-wrap: anywhere; }
  #scene-chapter-summary { max-width: none; }
  .scene-readout h2 { font-size: 1.75rem; }
  .experience-nav { justify-content: flex-start; gap: 0.25rem; }
  .experience-nav { position: static; transform: none; }
  .experience-nav ol { gap: 0.2rem; }
  .experience-nav button { width: 2.4rem; height: 2.4rem; font-size: 0.68rem; }
  .experience-note { display: none; }
  .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; }
  .scene-canvas, .scene-stage { min-height: 300px; }
  .scene-list { grid-template-columns: 1fr; }
  .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, .scene-list button,
  .chapter-pager a, .toc-toggle { transition: background 0.18s ease, color 0.18s ease; }
  .hero-copy { animation: enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes enter { from { opacity: 0; transform: translateY(18px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .experience-fallback { transition: none; }
  * { 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,
  .experience-nav, .site-header, .art-note { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .chapter-layout { display: block; }
  .book-content { max-width: none; }
}