/* ════════════════════════════════════════════════════════════
   ERA ENGINE — halaman ini menua maju.

   Bagian atas ditata seperti halaman cetak: kertas ivory, serif
   bertulang tajam, garis rambut, tanpa satu pun bayangan. Makin
   ke bawah makin digital, sampai berakhir sebagai antarmuka lab.

   Dua mekanisme yang bekerja bersamaan:

   1. Token warna pada :root digerakkan JS mengikuti scroll —
      --bg, --ink, --muted, --dim, --line, --line-2, --acc, dan
      --neon (0 = cetak, 1 = neon penuh).
   2. Tiap <section> membawa data-era yang menentukan tipografi
      dan seberapa banyak ornamen yang boleh muncul.

   Berkas ini dimuat SETELAH kevin.css supaya menimpa gaya dasar.
   Nilai bawaan di bawah = era cetak, jadi tampilan pertama sudah
   benar bahkan sebelum JS sempat jalan.
   ════════════════════════════════════════════════════════════ */

:root {
  --bg: #f5f1e8;
  --bg2: #ece6da;
  --ink: #17130e;
  --muted: #6d6454;
  --dim: #8c8474;
  --line: rgba(23, 19, 14, .16);
  --line-2: rgba(23, 19, 14, .32);
  --acc: #8f2f21;
  --neon: 0;

  --f-serif-d: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --f-serif-b: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-sans-d: 'Sora', 'Segoe UI', sans-serif;
  --f-sans-b: 'Outfit', 'Segoe UI', sans-serif;
  --f-black: 'UnifrakturMaguntia', 'Instrument Serif', serif;
}

/* ---- Tipografi bergeser tiga tahap: Instrument → Newsreader → Sora ---- */
[data-era="1"] { --f-disp: var(--f-serif-d); --f-body: var(--f-serif-b); }
[data-era="2"] { --f-disp: var(--f-serif-d); --f-body: var(--f-sans-b); }
[data-era="3"] { --f-disp: var(--f-serif-b); --f-body: var(--f-sans-b); }
[data-era="4"] { --f-disp: var(--f-sans-d);  --f-body: var(--f-sans-b); }

[data-era] { font-family: var(--f-body); }

body.pf {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-serif-b);
}
body.pf ::selection { background: rgba(143, 47, 33, .22); color: inherit; }
body.phase-dark ::selection { background: rgba(236, 72, 153, .38); color: #fff; }

/* Gradien ikut menua: saat --neon nol ia hanya satu warna aksen, dan baru
   merekah jadi violet–magenta–amber ketika halaman benar-benar modern.
   Dibungkus @supports supaya nilai bawaan tetap dipakai bila color-mix()
   tidak tersedia — kalau custom property-nya gagal diurai, seluruh latar
   bergradien akan hilang. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --grad: linear-gradient(120deg,
      color-mix(in oklab, var(--acc), var(--v) calc(var(--neon) * 100%)) 0%,
      color-mix(in oklab, var(--acc), var(--m) calc(var(--neon) * 100%)) 52%,
      color-mix(in oklab, var(--acc), var(--a) calc(var(--neon) * 100%)) 100%);
  }
}

/* ---- Ornamen digital baru muncul seiring --neon ---- */
.pf-net { opacity: calc(var(--neon) * .6); }
.pf-aurora { opacity: calc(var(--neon) * var(--neon)); }
.pf-gridbg { opacity: var(--neon); }
.pf-grain { opacity: calc(.035 + var(--neon) * .02); }
.pf-scanline { opacity: calc(var(--neon) * .5); }
.pf-progress { opacity: calc(.3 + var(--neon) * .7); }

body.phase-print .pf-grain { mix-blend-mode: multiply; opacity: .05; }

/* Lapisan yang tak terlihat dimatikan betulan, bukan sekadar dibuat transparan.
   Elemen dengan opacity nol tetap ikut dikomposit tiap frame, dan lima lapisan
   seukuran layar yang menumpuk itulah biaya terbesar halaman ini. */
body.phase-print .pf-net,
body.phase-print .pf-aurora,
body.phase-print .pf-gridbg,
body.phase-print .pf-scanline { display: none; }

/* Scanline hanya relevan saat tampilan sudah benar-benar bergaya lab. */
body.phase-dark:not(.is-neon) .pf-scanline { display: none; }

/* ════════════════════════════════════════════════
   PRELOADER — halaman judul, bukan terminal
   ════════════════════════════════════════════════ */
.pf-js .pf-boot { background: #f5f1e8; }
.pf-boot::before { display: none; }
.pf-boot-inner { width: min(660px, 86vw); text-align: center; color: #17130e; }

.pf-boot-kicker,
.pf-boot-folio {
  margin: 0;
  font-family: var(--f-serif-b);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8c8474;
}
.pf-boot-name {
  margin: 20px 0 0;
  font-family: var(--f-serif-d);
  font-size: clamp(38px, 8vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
}
.pf-boot-rule {
  display: block;
  width: min(320px, 60vw);
  height: 1px;
  margin: 26px auto 22px;
  background: rgba(23, 19, 14, .18);
}
.pf-boot-rule i { display: block; height: 1px; width: 0; background: #17130e; transition: width .3s linear; }
.pf-boot-sub {
  margin: 0 0 34px;
  font-family: var(--f-serif-b);
  font-size: 15px;
  font-style: italic;
  color: #4d4638;
}
.pf-boot-sub span { color: #b3a894; margin: 0 6px; }

.pf-curtain { background: #17130e; }

/* ════════════════════════════════════════════════
   NAVIGASI — ikut berganti zaman
   ════════════════════════════════════════════════ */
body.phase-print .pf-nav.is-stuck {
  background: rgba(245, 241, 232, .9);
  border-bottom-color: var(--line);
}
body.phase-print .pf-brand-mark {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--f-serif-d);
  font-size: 20px;
  box-shadow: none;
}
body.phase-print .pf-brand:hover .pf-brand-mark { transform: none; background: var(--ink); color: var(--bg); }
body.phase-print .pf-brand-txt b { font-family: var(--f-serif-d); font-weight: 400; font-size: 17px; letter-spacing: 0; }
body.phase-print .pf-brand-txt em { font-family: var(--f-serif-b); font-style: italic; letter-spacing: 0; color: var(--muted); }
body.phase-print .pf-nav-links a { font-family: var(--f-serif-b); font-size: 14.5px; border-radius: 0; }
body.phase-print .pf-nav-links a:hover { background: none; color: var(--acc); }
body.phase-print .pf-nav-links a.is-active::after { background: var(--acc); }
body.phase-print .pf-nav-cta {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--f-serif-b);
  font-weight: 500;
}
body.phase-print .pf-nav-cta:hover { background: var(--ink); color: var(--bg); }
body.phase-print .pf-burger { border-radius: 0; border-color: var(--line-2); }
body.phase-print .pf-burger i { background: var(--ink); }
body.phase-print .pf-rail a i { background: rgba(23, 19, 14, .22); }
body.phase-print .pf-rail a.is-active i { background: var(--acc); box-shadow: none; }
body.phase-print .pf-rail a b { font-family: var(--f-serif-b); text-transform: none; letter-spacing: .04em; font-size: 11px; }
body.phase-print .pf-cur-dot { background: var(--acc); box-shadow: none; }
body.phase-print .pf-cur-ring { border-color: rgba(23, 19, 14, .3); }
body.phase-print .pf-cur-ring em { border-top-color: var(--acc); }
body.phase-print .pf-cur-ring.is-hot { background: rgba(143, 47, 33, .06); border-color: rgba(143, 47, 33, .4); }
body.phase-print .pf-fab { opacity: 0 !important; visibility: hidden !important; }
body.phase-print .pf-drawer { background: rgba(245, 241, 232, .97); }
body.phase-print .pf-drawer-inner > a { font-family: var(--f-serif-d); font-weight: 400; }
body.phase-print .pf-drawer-inner > a i { color: var(--acc); }
body.phase-print .pf-drawer-foot a { border-radius: 0; }

/* Titik balik warna teks jatuh di ruang kosong antar-bagian, jadi tak ada
   teks halaman yang terpengaruh. Navigasi melayang di atas segalanya, maka
   hanya dia yang perlu diperhalus agar tidak berkedip saat titik itu lewat. */
.pf-nav,
.pf-brand-txt b,
.pf-brand-txt em,
.pf-nav-links a,
.pf-rail a b { transition: color .32s var(--ease); }

/* Awal fase gelap masih memakai aksen pekat; gradien penuh baru muncul
   setelah --neon lewat separuh, jadi navigasi ikut menua bertahap. */
.pf-brand-mark,
.pf-nav-cta { transition: background-color .7s var(--ease), color .7s var(--ease), box-shadow .7s var(--ease); }

body.phase-dark .pf-brand-mark,
body.phase-dark .pf-nav-cta {
  background-image: none;
  background-color: var(--acc);
  color: #fff;
  box-shadow: none;
}
body.is-neon .pf-brand-mark,
body.is-neon .pf-nav-cta {
  background-image: var(--grad);
  color: #0a0713;
}
body.is-neon .pf-brand-mark { box-shadow: 0 8px 24px rgba(139, 92, 246, .34); }

/* ════════════════════════════════════════════════
   ERA CETAK — komponen pr-*
   ════════════════════════════════════════════════ */
.pr-hero {
  position: relative;
  padding: calc(var(--nav-h) + 26px) 0 122px;
  min-height: 100svh;
}

.pr-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--f-serif-b);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-mast-mid { letter-spacing: .3em; }

.pr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 62px);
  padding: clamp(34px, 5vw, 60px) 0 0;
}

.pr-folio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--f-serif-b);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-folio b {
  font-family: var(--f-serif-d);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--acc);
}
.pr-folio::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pr-title {
  margin: 0;
  font-family: var(--f-serif-d);
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.pr-title em { font-style: italic; color: var(--acc); }

.pr-rule-short {
  display: block;
  width: 78px;
  height: 2px;
  margin: 30px 0 26px;
  background: var(--ink);
}

/* Lede sengaja tanpa drop cap: paragrafnya hanya dua baris pendek, dan
   huruf raksasa membuat bloknya terlihat ompong sekaligus menempel ke
   byline. Drop cap tetap dipakai di kliping koran yang paragrafnya panjang. */

.pr-byline {
  margin: 0 0 30px;
  max-width: 52ch;
  font-family: var(--f-serif-b);
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}
.pr-byline b { font-style: normal; font-weight: 600; color: var(--ink); }

.pr-actions { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.pr-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-serif-b);
  font-size: 15.5px;
  transition: border-color .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
}
.pr-link i { font-size: 13px; color: var(--acc); }
.pr-link:hover { color: var(--acc); border-color: var(--acc); gap: 16px; }

/* ---- Kliping koran: mengetik sendiri, potretnya bergerak ---- */
.pr-gazette {
  margin: 0 0 30px;
  transform: rotate(-1.1deg);
}
.pr-gz-paper {
  position: relative;
  padding: 18px 18px 14px;
  background: #efe6d2;
  border: 1px solid rgba(23, 19, 14, .38);
  box-shadow: 0 1px 0 rgba(23, 19, 14, .3), 0 18px 34px rgba(60, 44, 24, .18);
}
/* Serat kertas tua: dua noda lembut, bukan gambar tambahan. */
.pr-gz-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 12% 8%, rgba(140, 106, 54, .16), transparent 70%),
    radial-gradient(50% 40% at 92% 88%, rgba(120, 88, 44, .14), transparent 70%);
}
.pr-gz-paper > * { position: relative; }

.pr-gz-head { text-align: center; border-bottom: 3px double rgba(23, 19, 14, .5); padding-bottom: 8px; }
.pr-gz-name {
  display: block;
  font-family: var(--f-black);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  color: #17130e;
}
.pr-gz-meta {
  margin: 4px 0 0;
  font-family: var(--f-serif-b);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7b6b4f;
}
.pr-gz-meta span { margin: 0 4px; }

/* Foto: raster kasar seperti cetakan koran, dan tidak pernah benar-benar diam. */
.pr-gz-photo { margin: 12px 0 10px; }
.pr-gz-plate {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(23, 19, 14, .45);
  background: #ded3ba;
}
.pr-gz-plate img {
  /* Diposisikan absolut mengisi pelat, bukan sebagai item grid.
     Pelat ini display:grid dengan baris implisit yang tingginya mengikuti isi.
     Akibatnya height:100% pada gambar jadi rujukan melingkar — persentase tidak
     bisa dihitung terhadap baris yang tingginya justru ditentukan gambar itu —
     dan browser mengembalikannya ke auto. Gambar lalu memakai tinggi aslinya
     (476px di dalam pelat 186px), terpotong dari atas sehingga wajah terdorong
     ke bawah bingkai. inset:0 memutus rujukan melingkar itu. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, bukan cover: pelatnya berketinggian tetap, jadi cover akan
     memangkas atas-bawah gambar. Setelan "Isi penuh" di panel admin tetap
     bisa memilih pemotongan itu lewat kelas .is-cover. */
  object-fit: contain;
  object-position: center;
  padding: 6px;
  filter: grayscale(1) contrast(1.2) sepia(.28);
  mix-blend-mode: multiply;
  transform-origin: 52% 45%;
  animation: prAlive 14s ease-in-out infinite;
}
.pr-gz-plate img.is-cover { object-fit: cover; padding: 0; }
/* Hanya transform & opacity yang dianimasikan supaya tidak memicu penggambaran ulang. */
@keyframes prAlive {
  0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
  28%      { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
  55%      { transform: scale(1.05) translate3d(1.2%, .6%, 0); }
  78%      { transform: scale(1.10) translate3d(-.6%, 1.2%, 0); }
}
.pr-gz-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(23, 19, 14, .6) 1px, transparent 1.15px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  animation: prFlicker 9s steps(1) infinite;
}
@keyframes prFlicker {
  0%, 92%, 100% { opacity: .5; }
  94%           { opacity: .34; }
  96%           { opacity: .58; }
}
.pr-gz-photo figcaption {
  margin-top: 6px;
  font-family: var(--f-serif-b);
  font-size: 9.5px;
  font-style: italic;
  line-height: 1.45;
  color: #6d5c40;
}
.pr-monogram { font-family: var(--f-serif-d); font-size: 46px; color: #17130e; letter-spacing: .04em; }

.pr-gz-kicker {
  margin: 0;
  font-family: var(--f-serif-b);
  font-size: 8.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--acc);
}
.pr-gz-title {
  margin: 3px 0 8px;
  font-family: var(--f-serif-d);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 400;
  line-height: 1.12;
  color: #17130e;
}

/* Badan berita: teks tetap, tanpa animasi ketik. Yang mengetik sendiri
   hanya transkrip Lampiran A di bawahnya — dua sumber ketikan sekaligus
   dalam satu kliping terlalu ramai. */
.pr-gz-body {
  border-top: 1px solid rgba(23, 19, 14, .25);
  padding-top: 9px;
}
.pr-gz-par {
  display: flow-root;
  margin: 0 0 7px;
  font-family: var(--f-serif-b);
  font-size: 12.5px;
  line-height: 1.62;
  text-align: justify;
  hyphens: auto;
  color: #3a3226;
}
.pr-gz-par:last-child { margin-bottom: 0; }
/* flow-root di atas membuat kotak paragraf ikut menampung huruf mengambang;
   tanpa itu drop cap menjulur keluar dan memotong garis di bawahnya. */
.pr-gz-par:first-child::first-letter {
  float: left;
  margin: 2px 5px 0 0;
  font-family: var(--f-serif-d);
  font-size: 27px;
  line-height: .92;
  color: var(--acc);
}

.pr-gz-foot {
  margin: 6px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(23, 19, 14, .25);
  font-family: var(--f-serif-b);
  font-size: 9px;
  font-style: italic;
  text-align: right;
  color: #7b6b4f;
}

/* ---- Ledger keahlian, bertitik-titik seperti daftar isi ---- */
.pr-ledger { border-top: 1px solid var(--ink); padding-top: 14px; }
.pr-ledger-head {
  margin: 0 0 12px;
  font-family: var(--f-serif-b);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-ledger-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-family: var(--f-serif-b);
  font-size: 14.5px;
}
.pr-ledger-row i { flex: 1; height: 0; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); }
.pr-ledger-row b {
  font-family: var(--f-serif-d);
  font-size: 19px;
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
}

/* ---- Transkrip di dalam kliping koran ----
   Kolomnya hanya ~300px, jadi label pembicara dibuat kecil dan sebaris
   dengan kalimatnya, bukan bertumpuk seperti versi kolom lebar. */
.pr-gz-sep {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid rgba(23, 19, 14, .25);
  font-family: var(--f-serif-b);
  font-size: 8.5px;
  font-style: italic;
  line-height: 1.5;
  color: #7b6b4f;
}
.pr-gz-sep span {
  margin-right: 5px;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acc);
}

.pr-gz-tr.pf-chat {
  display: block;
  padding: 4px 0 0;
  min-height: 92px;
  max-height: none;
  overflow: visible;
  background: none;
  gap: 0;
}
.pr-gz-line {
  max-width: none;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dotted rgba(23, 19, 14, .22);
  border-radius: 0;
  background: none;
  font-family: var(--f-serif-b);
  font-size: 11.5px;
  line-height: 1.5;
  color: #3a3226;
}
.pr-gz-line:last-of-type { border-bottom: 0; }
.pr-gz-line b {
  display: inline;
  min-width: 0;
  margin-right: 6px;
  font-family: var(--f-serif-b);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7b6b4f;
}
.pr-gz-line.is-agent b { color: var(--acc); }
.pf-js .pr-gz-tr .pf-msg { transform: none; }
.pf-js .pr-gz-tr .pf-msg.is-shown { animation: none; opacity: 1; }

.pr-caret.pf-typing { padding: 6px 0 0; border: 0; border-radius: 0; background: none; }
.pr-caret span { width: 8px; height: 15px; border-radius: 0; background: var(--acc); animation: prCaret 1s steps(2) infinite; }
.pr-caret span:nth-child(2),
.pr-caret span:nth-child(3) { display: none; }
@keyframes prCaret { 50% { opacity: 0; } }

/* ---- Running head & petunjuk gulir ---- */
.pr-runner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.pr-runner-track {
  gap: 22px;
  animation-duration: 64s;
  font-family: var(--f-serif-b);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-runner-track i { font-style: normal; color: var(--acc); }

.pr-scroll {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-serif-b);
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
}
.pr-scroll i { display: block; width: 1px; height: 34px; background: var(--line-2); position: relative; overflow: hidden; }
.pr-scroll i::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12px;
  background: var(--acc);
  animation: prScroll 2.1s var(--ease) infinite;
}
@keyframes prScroll {
  0% { transform: translateY(-14px); }
  100% { transform: translateY(34px); }
}

/* ---- Angka, disusun sebagai tabel cetak ---- */
.pr-figures { padding: clamp(54px, 7vw, 90px) 0; }
.pr-fig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.pr-fig { padding: 26px 22px 24px; border-left: 1px solid var(--line); }
.pr-fig:first-child { border-left: 0; padding-left: 0; }
.pr-fig b {
  font-family: var(--f-serif-d);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: oldstyle-nums;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.pr-fig em {
  font-family: var(--f-serif-d);
  font-style: normal;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--acc);
}
.pr-fig span { display: block; margin-top: 10px; font-family: var(--f-serif-b); font-size: 14px; line-height: 1.45; }
.pr-fig small {
  display: block;
  margin-top: 4px;
  font-family: var(--f-serif-b);
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* ════════════════════════════════════════════════
   PERALIHAN — lampu ruangan diredupkan
   ════════════════════════════════════════════════ */
/* Tanpa latar sendiri: warnanya datang dari gradasi global, supaya peralihan
   terasa menerus dan bukan potongan mendadak. */
.pr-interlude {
  position: relative;
  color: #efe9df;
  padding: clamp(90px, 15vh, 168px) 0;
  overflow: hidden;
}
.pr-interlude::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(239, 233, 223, .1) 1px, transparent 1.1px);
  background-size: 5px 5px;
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.pr-il-inner { position: relative; text-align: center; }
.pr-folio-inv { justify-content: center; color: rgba(239, 233, 223, .55); }
.pr-folio-inv b { color: #d9a03f; }
.pr-folio-inv::after { display: none; }

.pr-il-title {
  margin: 0 auto 22px;
  max-width: 18ch;
  font-family: var(--f-serif-d);
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.pr-il-title em { font-style: italic; color: #d9a03f; }
.pr-il-text {
  margin: 0 auto;
  max-width: 56ch;
  font-family: var(--f-serif-b);
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(239, 233, 223, .74);
}
.pr-il-years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(239, 233, 223, .5);
}
.pr-il-years i {
  display: block;
  width: clamp(70px, 16vw, 190px);
  height: 1px;
  background: linear-gradient(90deg, rgba(239, 233, 223, .3), #d9a03f);
}

/* ════════════════════════════════════════════════
   ERA 3 — malam, masih editorial
   ════════════════════════════════════════════════ */
[data-era="3"] .pf-eyebrow { border-radius: 0; background: none; border-color: var(--line); }
[data-era="3"] .pf-h2,
[data-era="3"] .pf-h3 { font-weight: 500; letter-spacing: -.015em; }
[data-era="3"] .pf-grad {
  background: linear-gradient(120deg, var(--acc), #f0b060);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
[data-era="3"] .pf-btn-primary { box-shadow: none; }
[data-era="3"] .pf-phone,
[data-era="3"] .pf-dash,
[data-era="3"] .pf-qc { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
[data-era="3"] .pf-case-kicker { border-radius: 0; }

/* Era 4 memakai gaya bawaan kevin.css — kilau penuh. */

/* ════════════════════════════════════════════════
   Selama latar masih terang, seluruh aksen neon dinetralkan.
   Tanpa ini, gradien ungu–amber pada judul dan pil hampir lenyap
   di atas kertas: amber di atas cokelat muda hanya ~1,2:1.
   ════════════════════════════════════════════════ */
body.phase-print .pf-grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: var(--acc);
}
body.phase-print .pf-dot,
body.phase-print .pf-live { background: var(--acc); box-shadow: none; }
body.phase-print .pf-case-kicker { background: none; border-color: var(--line-2); }
body.phase-print .pf-case-kicker i { color: var(--acc); }
body.phase-print .pf-case-no,
body.phase-print .pf-case-block span,
body.phase-print .pf-loop-no { color: var(--acc); }
body.phase-print .pf-case-block { border-left-color: var(--acc); background: rgba(23, 19, 14, .045); }
body.phase-print .pf-case-metrics b,
body.phase-print .pf-sem-stats b,
body.phase-print .pf-stat b {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--acc);
}
body.phase-print .pf-case-metrics > div { background: rgba(23, 19, 14, .035); }
body.phase-print .pf-case-list i { color: var(--acc); }
body.phase-print .pf-btn-primary { background: var(--acc); color: #fff; box-shadow: none; }
body.phase-print .pf-phone,
body.phase-print .pf-dash,
body.phase-print .pf-qc,
body.phase-print .pf-trace { box-shadow: 0 24px 60px rgba(40, 26, 16, .28); }

/* ════════════════════════════════════════════════
   RESPONSIF
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pr-hero-grid { grid-template-columns: 1fr; }
  .pr-fig-grid { grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
  .pr-fig { border-bottom: 1px solid var(--line); }
  .pr-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 620px) {
  .pr-hero { padding-bottom: 106px; }
  .pr-masthead { font-size: 9.5px; letter-spacing: .16em; }
  .pr-mast-mid { display: none; }
  .pr-gazette { transform: none; margin-inline: auto; max-width: 340px; }
  .pr-gz-paper { padding: 15px 15px 12px; }
  .pr-scroll { display: none; }
  .pr-fig-grid { grid-template-columns: 1fr; }
  .pr-fig { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-scroll i::after,
  .pr-caret span { animation: none; }
  /* Potret berhenti bergerak, klipingnya tetap lurus. */
  .pr-gz-plate img,
  .pr-gz-plate::after { animation: none; }
  .pr-gazette { transform: none; }
}

/* ════════════════════════════════════════════════
   KINERJA — melewatkan bagian yang di luar layar

   Halaman ini tingginya ~15.000 px desktop dan ~23.000 px di ponsel,
   dengan sekitar 2.500 elemen. Biaya terbesarnya bukan animasi
   (mematikan seluruh animasi tidak mengubah apa pun ketika diukur),
   melainkan perhitungan ulang gaya atas dokumen sebesar itu tiap
   kali scroll.

   content-visibility membuat browser melewatkan gaya, tata letak,
   dan penggambaran untuk bagian yang belum terlihat. Terukur lewat
   penghitung DevTools: durasi recalc gaya turun dari ~5,9 detik ke
   ~2,3 detik untuk sekali gulir penuh halaman.

   contain-intrinsic-size memakai kata kunci `auto`, jadi angka di
   bawah hanya tebakan awal sebelum bagian itu pernah tampil; setelah
   sekali dirender, browser mengingat tinggi aslinya. Nilainya diambil
   dari pengukuran nyata pada 1440 px dan 390 px supaya perkiraan awal
   tidak menggeser sauh gradasi terlalu jauh.

   Hero dan bagian Angka sengaja DIKECUALIKAN: keduanya jadi titik
   sauh kurva warna, jadi posisinya harus selalu pasti.
   ════════════════════════════════════════════════ */
#kaizen,
#peralihan,
.pf-case,
#lab,
#seminar,
#jejak,
#mitra,
#kontak {
  content-visibility: auto;
}

#kaizen    { contain-intrinsic-size: auto 1000px; }
#peralihan { contain-intrinsic-size: auto 600px; }
.pf-case   { contain-intrinsic-size: auto 1250px; }
#lab       { contain-intrinsic-size: auto 1500px; }
#seminar   { contain-intrinsic-size: auto 2200px; }
#jejak     { contain-intrinsic-size: auto 2100px; }
#mitra     { contain-intrinsic-size: auto 1100px; }
#kontak    { contain-intrinsic-size: auto 1150px; }

/* Saat gerak dikurangi, tidak ada yang perlu dihemat — matikan saja
   supaya tidak ada risiko lompatan tata letak. */
@media (prefers-reduced-motion: reduce) {
  #kaizen, #peralihan, .pf-case, #lab, #seminar, #jejak, #mitra, #kontak {
    content-visibility: visible;
  }
}

/* ════════════════════════════════════════════════
   PEMBUKA SATU LAYAR

   Di layar yang cukup lebar dan tinggi, seluruh pembuka —
   dari masthead sampai "Lanjut membaca" — dipaskan ke satu
   tinggi viewport. Kuncinya: ukuran diikat ke vh, bukan
   hanya vw. Tanpa itu, halaman yang pas di monitor 1080p
   akan terpotong di laptop 768p karena tipografinya hanya
   menyusut mengikuti lebar.

   Di bawah ambang ini pembuka dibiarkan bergulir seperti
   biasa: memaksa dua belas elemen masuk ke layar ponsel
   hanya membuat hurufnya terlalu kecil untuk dibaca.
   ════════════════════════════════════════════════ */
@media (min-width: 1000px) and (min-height: 600px) {
  .pr-hero {
    height: 100svh;
    min-height: 0;
    padding: calc(var(--nav-h) + min(2vh, 20px)) 0 min(10vh, 88px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pr-masthead { padding-bottom: min(1.3vh, 12px); font-size: min(1.2vh, 11px); }
  .pr-hero-grid { padding-top: min(3vh, 32px); gap: clamp(24px, 3.4vw, 54px); align-items: start; }

  .pr-folio { margin-bottom: min(2.2vh, 20px); }
  .pr-title { font-size: clamp(30px, min(5.1vw, 7.2vh), 78px); }
  .pr-rule-short { margin: min(2.4vh, 22px) 0; }
  .pr-byline { margin-bottom: min(2.4vh, 22px); font-size: min(1.5vh, 13.5px); }


  .pr-gazette { margin-bottom: min(2.2vh, 20px); }
  .pr-gz-paper { padding: min(1.7vh, 16px) 16px min(1.3vh, 12px); }
  .pr-gz-name { font-size: min(3.1vh, 28px); }
  .pr-gz-photo { margin: min(1.3vh, 11px) 0 min(.9vh, 8px); }
  /* Tinggi pelat dikunci ke vh supaya foto tidak mendorong isi keluar layar. */
  .pr-gz-plate { aspect-ratio: auto; height: min(21vh, 186px); }
  .pr-gz-title { margin-bottom: min(.9vh, 8px); font-size: min(2.4vh, 22px); }
  .pr-gz-body { padding-top: min(1vh, 9px); }
  .pr-gz-par { font-size: min(1.42vh, 12.5px); }
  .pr-gz-foot { margin-top: min(.7vh, 6px); padding-top: min(.8vh, 7px); }
  .pr-gz-sep { margin-top: min(1vh, 9px); padding-top: min(.8vh, 7px); }
  /* Tinggi minimum dipatok agar baris yang muncul satu per satu tidak
     menggeser tata letak, tapi tetap ikut menyusut di layar pendek. */
  .pr-gz-tr.pf-chat { min-height: min(11vh, 96px); }
  .pr-gz-line { padding: min(.5vh, 4px) 0; font-size: min(1.35vh, 11.5px); }

  .pr-ledger { padding-top: min(1.5vh, 14px); }
  .pr-ledger-head { margin-bottom: min(1.3vh, 12px); }
  .pr-ledger-row { padding: min(.95vh, 9px) 0; }

  /* Ditaruh mengalir setelah kedua kolom, bukan melayang di tengah bawah.
     Versi absolutnya bertabrakan dengan baris terakhir Ringkasan Keahlian. */
  .pr-scroll {
    position: static;
    align-self: center;
    transform: none;
    margin-top: min(1.4vh, 12px);
  }
}

/* Layar pendek (laptop 720p ke bawah): ruang cadangannya menipis, jadi
   beberapa nilai tetap ikut diikat ke tinggi viewport. Yang paling boros
   adalah tinggi minimum transkrip — ia sengaja dipatok agar barisnya tidak
   menggeser tata letak saat diketik satu per satu, tapi patokan tetap
   176px menyisakan puluhan piksel kosong di layar pendek. */
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 760px) {
  .pr-hero { padding-bottom: min(8.5vh, 66px); }

  .pr-gz-plate { height: min(18vh, 150px); }
  .pr-scroll { margin-top: min(.7vh, 6px); gap: 6px; }
  .pr-scroll i { height: 22px; }
  .pr-ledger-row { padding: min(.8vh, 7px) 0; }
}


/* ════════════════════════════════════════════════
   JUDUL YANG BERGANTI HURUF

   "AI Agent" berputar melewati kelima huruf yang dipakai halaman ini:
   blackletter koran tua → Instrument Serif → Newsreader → Sora → mono.
   Jadi judulnya memperagakan perjalanan yang dialami halaman saat
   digulir, bukan sekadar efek.

   Kata ini berada di ujung baris pertama, jadi perubahan lebarnya tidak
   mendorong apa pun. Tiap huruf punya tinggi-x berbeda, maka ukurannya
   disetel satu per satu agar tetap sebaris dengan "Saya bangun".
   ════════════════════════════════════════════════ */
.pr-morph {
  display: inline-block;
  /* Kotak baris dikunci: tiap huruf punya tinggi ascender-descender berbeda,
     dan tanpa ini judulnya naik-turun 6px tiap pergantian — cukup untuk
     menggeser seluruh kolom karena pembuka dipusatkan vertikal. */
  line-height: .8;
  font-style: italic;
  color: var(--acc);
  transition: opacity .22s ease;
}
.pr-morph.is-swap { opacity: 0; }

.pr-morph.m-1 { font-family: var(--f-black); font-style: normal; font-size: .84em; letter-spacing: .01em; }
.pr-morph.m-2 { font-family: var(--f-serif-b); font-style: italic; font-weight: 400; font-size: .94em; }
.pr-morph.m-3 { font-family: var(--f-sans-d); font-style: normal; font-weight: 600; font-size: .72em; letter-spacing: -.02em; }
.pr-morph.m-4 { font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: .66em; letter-spacing: -.03em; }

@media (prefers-reduced-motion: reduce) {
  .pr-morph { transition: none; }
}