/* ── editorial.css — owner: halaman editorial statis /about/, /author/,
   /privacy-policy/. Scope .editorial-page (satu body class buat ketiganya —
   sengaja BUKAN per-halaman, biar komponennya kepaksa seragam).

   Satu kosakata komponen, tiap halaman ambil subsetnya:
     ed-hero + ed-mark + ed-stats   → about, author
     ed-hero--quiet (tanpa mark/stat) → privacy-policy
     ed-chips / ed-steps / ed-roles / ed-rules / ed-callout / ed-toc → sesuai isi
   Nambah halaman statis baru: pakai komponen di sini, jangan bikin varian baru.

   Hero + stat strip = PORT pola ah-hero/ah-stats (artist.css): angka, spacing,
   dan perilaku responsif sengaja dibikin identik biar halaman ini kebaca satu
   keluarga sama profil artis. Kalau ah-hero digeser, geser di sini juga.
   Sec-head di sini = pola rail-section-header canonical (kicker + h2), sama
   kayak components.css — BUKAN pola judul-halaman punya static_pages.css.
   Token only: nol hex literal, nol ukuran font di luar --fs-*. ── */

/* ── Hero ── */
.editorial-page .ed-hero{position:relative;margin-bottom:var(--sp-4)}
.editorial-page .ed-grid{display:grid;grid-template-columns:1fr 180px;gap:var(--sp-3);align-items:stretch}
.editorial-page .ed-copy{padding:var(--sp-3) 0 72px;min-width:0}
.editorial-page .ed-eyebrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.editorial-page .ed-eyebrow span{font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px}
.editorial-page .ed-eyebrow .ed-hot{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.editorial-page .ed-hero h1{font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.02;letter-spacing:-.01em;margin:0}
.editorial-page .ed-tagline{margin-top:12px;font-size:var(--fs-card);color:var(--muted)}
.editorial-page .ed-lead{margin-top:18px;max-width:46ch;color:var(--text-soft);font-size:var(--fs-body);line-height:1.8}

.editorial-page .ed-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3)}
.editorial-page .ed-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--fs-card);border-radius:var(--r-pill);padding:12px 22px;text-decoration:none}
.editorial-page .ed-cta:hover{background:var(--accent-hover);text-decoration:none}
.editorial-page .ed-cta--ghost{background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.editorial-page .ed-cta--ghost:hover{background:var(--accent-soft);color:var(--accent)}

/* Mark = pengganti foto (ah-photo). Halaman ini entitasnya organisasi, bukan
   orang — jadi monogram brand, bukan potret palsu. */
.editorial-page .ed-mark{position:relative;display:grid;place-items:center;min-height:260px;border-radius:0 0 0 28px;overflow:hidden;background:linear-gradient(140deg,var(--aura-soft),var(--surface-2));box-shadow:0 30px 90px -20px var(--aura-soft),0 0 0 1px var(--line)}
.editorial-page .ed-mark span{position:relative;z-index:1;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:2.6rem;letter-spacing:.08em;line-height:1;color:var(--text);opacity:.92}
.editorial-page .ed-mark::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 10%,color-mix(in srgb,var(--aura) 30%,transparent),transparent 60%)}

/* ── Stat strip cakupan (bukti kedalaman topik, dihitung saat build) ── */
.editorial-page .ed-stats{position:relative;z-index:2;margin-top:-48px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.editorial-page .ed-stat{padding:18px 18px;border-left:1px solid var(--line);min-width:0}
.editorial-page .ed-stat:first-child{border-left:0}
.editorial-page .ed-stat b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:1.6rem;letter-spacing:-.01em;color:var(--text)}
.editorial-page .ed-stat span{font-size:var(--fs-kicker);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block}
.editorial-page .ed-stat small{display:block;font-size:var(--fs-kicker);color:var(--muted);opacity:.7;margin-top:2px;line-height:1.4}
.editorial-page .ed-stats-note{margin-top:10px;font-size:var(--fs-caption);color:var(--muted);opacity:.8}

/* ── Section ── */
.editorial-page .ed-section{margin-bottom:var(--sp-4)}
.editorial-page .ed-section .sec-head{margin-bottom:var(--sp-2)}
.editorial-page .ed-section h2{font-size:var(--fs-heading);color:var(--text);margin-top:2px}
.editorial-page .ed-section > p{color:var(--muted);line-height:1.8;margin-bottom:var(--sp-2);max-width:60ch}

/* ── Chips bidang (knowsAbout) ── */
.editorial-page .ed-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.editorial-page .ed-chips li{font-size:var(--fs-caption);color:var(--text-soft);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px}

/* ── Langkah metodologi — pola nomor sama kayak .facts-block (song.css) ── */
.editorial-page .ed-steps{list-style:none;counter-reset:edst;display:flex;flex-direction:column;gap:12px;padding:0}
.editorial-page .ed-steps li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px 14px 52px}
.editorial-page .ed-steps li::before{content:counter(edst,decimal-leading-zero);counter-increment:edst;position:absolute;left:16px;top:14px;font-family:'Newsreader',Georgia,serif;font-size:1.25rem;font-weight:600;color:rgba(var(--text-rgb),.22)}
.editorial-page .ed-steps strong{display:block;color:var(--text);font-size:var(--fs-card);margin-bottom:2px}
.editorial-page .ed-steps span{display:block;color:var(--muted);font-size:var(--fs-caption);line-height:1.7}

/* ── Kartu peran ── */
.editorial-page .ed-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.editorial-page .ed-roles--2{grid-template-columns:repeat(2,1fr)}
.editorial-page .ed-role{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.editorial-page .ed-role-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);background:var(--surface-2);font-size:var(--fs-card);margin-bottom:10px}
.editorial-page .ed-role strong{display:block;color:var(--text);font-size:var(--fs-card);margin-bottom:4px}
.editorial-page .ed-role p{color:var(--muted);font-size:var(--fs-caption);line-height:1.7}

/* ── Standar: selalu / nggak pernah ── */
.editorial-page .ed-rules{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.editorial-page .ed-rule{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.editorial-page .ed-rule strong{display:block;font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.editorial-page .ed-rule--yes strong{color:var(--accent)}
.editorial-page .ed-rule--no strong{color:var(--muted)}
.editorial-page .ed-rule ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.editorial-page .ed-rule li{position:relative;padding-left:20px;color:var(--text-soft);font-size:var(--fs-caption);line-height:1.7}
.editorial-page .ed-rule li::before{position:absolute;left:0;top:0;font-weight:700}
.editorial-page .ed-rule--yes li::before{content:'✓';color:var(--accent)}
.editorial-page .ed-rule--no li::before{content:'✕';color:var(--muted)}

/* ── Callout (koreksi / ringkasan kebijakan) ── */
.editorial-page .ed-callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-m);padding:18px}
.editorial-page .ed-callout p{color:var(--text-soft);line-height:1.8;margin-bottom:var(--sp-2)}
.editorial-page .ed-callout p:last-child{margin-bottom:0}
.editorial-page .ed-callout small{display:block;margin-top:10px;color:var(--muted);font-size:var(--fs-caption)}
/* varian tenang: dipakai halaman legal, aksen kiri dimatiin biar nggak keliatan
   kayak CTA — isinya ringkasan, bukan ajakan. */
.editorial-page .ed-callout--quiet{border-left-color:var(--line)}

/* ── Hero tenang — halaman legal. Nggak ada mark/stat/CTA: yang dibutuhin
   pembaca di sini cuma judul, tanggal berlaku, dan isi yang gampang dipindai. */
.editorial-page .ed-hero--quiet .ed-copy{padding:var(--sp-3) 0 0}
.editorial-page .ed-hero--quiet .ed-grid{grid-template-columns:1fr}
.editorial-page .ed-hero--quiet h1{font-size:var(--fs-display)}
.editorial-page .ed-updated{margin-top:14px;font-size:var(--fs-caption);color:var(--muted)}
.editorial-page .ed-updated b{color:var(--text-soft);font-weight:600}

/* ── Daftar isi anchor (halaman panjang & dipindai, bukan dibaca lurus) ── */
.editorial-page .ed-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:var(--sp-3)}
.editorial-page .ed-toc a{display:inline-block;font-size:var(--fs-caption);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;text-decoration:none}
.editorial-page .ed-toc a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);text-decoration:none}

/* ── Prosa section (halaman yang isinya paragraf, bukan komponen) ── */
.editorial-page .ed-prose{color:var(--text-soft);line-height:1.8;max-width:64ch}
.editorial-page .ed-prose p{margin-bottom:var(--sp-2)}
.editorial-page .ed-prose p:last-child{margin-bottom:0}
.editorial-page .ed-prose ul{margin:0 0 var(--sp-2);padding-left:20px}
.editorial-page .ed-prose li{margin-bottom:var(--sp-1)}

/* ── Mobile ── */
@media(max-width:760px){
  .editorial-page .ed-grid{grid-template-columns:1fr}
  /* urutan copy → mark → stats: sama kayak ah-hero di halaman artis (mobile) */
  .editorial-page .ed-copy{padding:var(--sp-2) 0 var(--sp-3)}
  .editorial-page .ed-mark{min-height:120px;border-radius:var(--r-l)}
  .editorial-page .ed-mark span{font-size:2.2rem}
  .editorial-page .ed-stats{grid-template-columns:repeat(2,1fr);margin-top:var(--sp-2)}
  .editorial-page .ed-stat{border-top:1px solid var(--line)}
  .editorial-page .ed-stat:nth-child(-n+2){border-top:0}
  .editorial-page .ed-stat:nth-child(odd){border-left:0}
  .editorial-page .ed-roles{grid-template-columns:1fr}
  .editorial-page .ed-rules{grid-template-columns:1fr}
}

/* Peninjau eksternal (/author/#peninjau) — kartu profil manusia beneran; foto
   bulat kecil (bukan ah-photo gede: entitas utamanya tetap organisasi). */
.editorial-page .ed-reviewer{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.editorial-page .ed-reviewer-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px var(--line),0 18px 50px -18px var(--aura-soft)}
.editorial-page .ed-reviewer-body{min-width:0}
.editorial-page .ed-reviewer-body>strong{display:block;font-family:'Newsreader',Georgia,serif;font-size:1.35rem;letter-spacing:-.01em}
.editorial-page .ed-reviewer-role{display:block;margin-top:2px;font-size:var(--fs-kicker);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.editorial-page .ed-reviewer-body p{margin-top:10px;color:var(--text-soft);line-height:1.75;font-size:var(--fs-card)}
.editorial-page .ed-reviewer .ed-chips{margin-top:12px}
.editorial-page .ed-reviewer .ed-cta{margin-top:14px}
@media (max-width:560px){.editorial-page .ed-reviewer{flex-direction:column;align-items:center;text-align:center}}