/* ============================================================
   Cremiera — sistem desain, pass koreksi arah seni (16 Sep 2026)

   Prinsip: tipografi, foto, ruang, garis. Bukan kartu, bukan radius, bukan bayangan.
   Tiga motif yang berulang:
     1. Seksi bernomor gaya jurnal lapangan ("01", "02") dengan garis takar.
     2. Tanda bahan: titik berwarna menurut bahan (santan, gula aren, pandan, jahe...).
     3. Pelat gambar: foto bersudut tajam, keterangan bernomor "Gbr. 01" gaya arsip.
   Hijau hutan = warna merek, dipakai hemat (kepala, satu pita, penekanan).
   Putih = permukaan baca utama. Tidak ada krem.
   ============================================================ */

@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  /* warna dari bahan */
  --daun: #143726;        /* hijau hutan: merek, permukaan gelap */
  --daun-2: #0f2b1d;
  --pandan: #2f9e57;      /* aksen hidup, hemat */
  --pandan-ink: #1f6e3d;  /* tautan/label hijau di atas putih (5.4:1) */
  --pandan-hi: #8fdba6;   /* di atas gelap */
  --aren: #7a4a1f;        /* gula aren: aksen editorial utama (6.9:1) */
  --aren-2: #5a3514;
  --amber: #b9771f;       /* amber hangat: nomor seksi, garis takar (4.6:1 di putih pada ukuran besar) */
  --amber-hi: #e3a95a;    /* di atas gelap */
  --secang: #b3302a;
  --kunyit: #d3a023;
  /* permukaan & teks */
  --kelapa: #ffffff;
  --kabut: #f3f4f1;       /* abu dingin sangat muda; bukan krem */
  --kabut-2: #e7e9e4;
  --arang: #151716;
  --arang-2: #2a2d2b;
  --abu: #5b605d;         /* sekunder (6.1:1) */
  --garis: #dadcd7;
  --garis-2: #a9ada8;
  --on-dark: #f2f3ee;
  --on-dark-2: #c6cdc4;
  /* tipografi & ukuran */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1240px;
  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--arang); background: var(--kelapa); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--garis-2); transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--aren); text-decoration-color: var(--aren); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.015em; color: var(--arang); font-variation-settings: 'opsz' 96, 'SOFT' 20, 'WONK' 0; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); font-weight: 400; line-height: .98; letter-spacing: -.025em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.2rem; font-variation-settings: 'opsz' 48; }
p { margin: 0 0 1.15em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: var(--measure); }
.skip { position: absolute; left: -999px; top: 0; background: var(--daun); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- label sistem ---------- */
.kicker, .label, .lbl { display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--abu); margin: 0 0 .7rem; }
.kicker a { text-decoration: none; }
.kicker a:hover { color: var(--aren); }
.kicker .sep { color: var(--garis-2); margin: 0 .45em; }
.chip { display: inline-block; padding: .35rem 0; margin-right: 1.1rem; font-size: .92rem; text-decoration: none; border-bottom: 1px solid var(--garis-2); }
.chip:hover { border-color: var(--aren); }

/* garis takar: hairline penuh + segmen pendek amber di kiri */
.takar { position: relative; height: 1px; background: var(--garis); margin: 0 0 1.2rem; }
.takar::before { content: ''; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 3px; background: var(--amber); }

/* tanda bahan */
.mark { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: -.02em; margin-right: .45em; background: var(--garis-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.mark-jahe { background: #c8862b; }
.mark-gula-aren { background: #7a4a1f; }
.mark-pandan { background: #2f9e57; }
.mark-santan { background: #ffffff; box-shadow: inset 0 0 0 1px var(--garis-2); }
.mark-secang { background: #b3302a; }
.mark-kunyit { background: #d3a023; }
.mark-serai { background: #a3c96e; }
.mark-kencur { background: #d9c8a0; }
.mark-nira { background: #ead8a6; }
.mark-aren { background: #4e2d12; }
.mark-lontar { background: #8a7b3f; }
.mark-tepung-beras-dan-hunkwe { background: #eeeeea; box-shadow: inset 0 0 0 1px var(--garis-2); }
.mark-asam-jawa { background: #6b3f1e; }
.mark-cincau { background: #1f3d2c; }
.mark-es { background: #d7ecf3; box-shadow: inset 0 0 0 1px #9cc4d2; }
.mark-lain { background: var(--kabut-2); box-shadow: inset 0 0 0 1px var(--garis-2); }

/* ---------- kepala situs ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--kelapa); border-bottom: 1px solid var(--arang); }
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 1rem; }
.brand { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--arang); }
.brand-mark { width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; background: linear-gradient(150deg, var(--pandan) 0 48%, var(--aren) 48% 100%); align-self: center; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; align-items: baseline; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--aren); }
.nav a[aria-current] { border-bottom-color: var(--arang); color: var(--arang); }
.nav-sec a { font-weight: 500; color: var(--abu); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; margin-right: -.6rem; }
.nav-toggle span:not(.vh) { width: 22px; height: 2px; background: var(--arang); transition: transform .2s, opacity .2s; }
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kelapa); border-bottom: 1px solid var(--arang); padding: .4rem var(--gutter) 1rem; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { display: block; padding: .8rem 0; font-size: 1.15rem; font-family: var(--serif); font-weight: 500; border-bottom: 1px solid var(--garis); }
  .nav a[aria-current] { border-bottom-color: var(--garis); color: var(--aren); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- jejak & meta ---------- */
.crumbs { margin: 1.1rem 0 0; font-size: .8rem; color: var(--abu); letter-spacing: .02em; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li + li::before { content: '/'; margin-right: .35rem; color: var(--garis-2); }
.crumbs a { text-decoration: none; }
.meta { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .8rem; color: var(--abu); margin: 1rem 0 0; letter-spacing: .02em; }
.meta a { text-decoration: none; border-bottom: 1px solid var(--garis-2); }
figcaption, .hero-credit { font-size: .78rem; color: var(--abu); padding: .55rem 0 0; line-height: 1.5; letter-spacing: .01em; }
.credit, .credit a { color: var(--abu); }
.credit a { text-decoration: none; border-bottom: 1px solid var(--garis); }

/* pelat gambar: nomor otomatis */
main { counter-reset: gbr; }
figure.plate figcaption::before, .hero-plate figcaption::before { counter-increment: gbr; content: 'Gbr. ' counter(gbr, decimal-leading-zero) '  '; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--arang); margin-right: .3em; }
figure { margin: 0; }

/* ---------- pembuka halaman ---------- */
.opener { padding: 1.6rem 0 0; }
.opener .dek { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); line-height: 1.38; color: var(--arang-2); font-weight: 400; font-variation-settings: 'opsz' 24, 'SOFT' 40; max-width: 40ch; margin: 1.1rem 0 0; }
.opener h1 { max-width: 14ch; }

/* MINUMAN: judul lebar + grid foto/profil */
.ent-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ent-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 2rem; }
.hero-plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.profil { border-top: 2px solid var(--arang); }
.profil .lbl { display: block; padding: .8rem 0 .2rem; color: var(--arang); }
.profil dl { margin: 0; }
.profil dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--garis); }
.profil dt { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); padding-top: .25rem; }
.profil dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; font-variation-settings: 'opsz' 20; }
.susun { margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--garis); font-size: .95rem; line-height: 2; }
.susun .lbl { display: block; margin-bottom: .1rem; }
.susun a { text-decoration: none; }
.susun .plus { color: var(--garis-2); margin: 0 .5em; font-family: var(--serif); }
.suhu { display: inline-flex; align-items: center; gap: .45em; }
.suhu svg { width: 1em; height: 1em; }
@media (max-width: 860px) {
  .ent-grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.4rem; }
  .hero-plate { margin-inline: calc(-1 * var(--gutter)); }
  .hero-plate img { aspect-ratio: 4 / 5; }
  .hero-plate figcaption { padding-inline: var(--gutter); }
  .profil dl > div { grid-template-columns: 6.2rem minmax(0, 1fr); }
}
@media (min-width: 861px) { .hero-plate img { aspect-ratio: 4 / 5; } }

/* DAERAH: foto melintang, judul menimpa tepi bawah */
.reg-bleed { margin-top: 1rem; }
.reg-bleed img { width: 100%; height: clamp(260px, 52vw, 640px); object-fit: cover; }
.reg-title { margin-top: calc(-1 * clamp(2.2rem, 7vw, 5.5rem)); position: relative; }
.reg-credit { margin: .6rem 0 0; }
.reg-credit .gbr { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--arang); margin-right: .3em; }
.t-daerah main { counter-reset: gbr 1; }
.reg-title > div { background: var(--kelapa); display: inline-block; padding: 1rem clamp(1rem, 3vw, 2.2rem) 0 0; max-width: min(100%, 44rem); }
.reg-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--arang); border-bottom: 1px solid var(--garis); margin: 1.6rem 0 0; }
.reg-strip > div { padding: .8rem 1rem .8rem 0; border-right: 1px solid var(--garis); margin-right: 1rem; }
.reg-strip > div:last-child { border-right: 0; }
.reg-strip dt { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); margin-bottom: .2rem; }
.reg-strip dd { margin: 0; font-size: .92rem; line-height: 1.45; }
@media (max-width: 720px) { .reg-strip { grid-template-columns: 1fr 1fr; } .reg-strip > div:nth-child(2n) { border-right: 0; margin-right: 0; } .reg-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--garis); } }
@media (max-width: 400px) { .reg-strip { grid-template-columns: 1fr; } .reg-strip > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--garis); } .reg-strip > div:last-child { border-bottom: 0; } }

/* BAHAN: foto persegi kiri, tanda bahan besar */
.bhn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 1.4rem; }
.bhn-grid .hero-plate img { aspect-ratio: 1; }
.bhn-mark { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; margin-right: .6rem; vertical-align: -.1rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.latin { font-family: var(--serif); font-style: italic; color: var(--abu); font-size: 1.1rem; margin: .4rem 0 0; font-variation-settings: 'opsz' 20; }
@media (max-width: 860px) { .bhn-grid { grid-template-columns: 1fr; } .bhn-grid .hero-plate { order: 2; } }

/* RESEP: fakta sebagai strip bergaris */
.rsp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 1.4rem; }
.rsp-grid .hero-plate img { aspect-ratio: 4 / 3; }
.recipe-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.4rem 0 0; border-top: 2px solid var(--arang); border-bottom: 1px solid var(--garis); }
.recipe-facts > div { padding: .7rem .8rem .7rem 0; border-right: 1px solid var(--garis); margin-right: .8rem; }
.recipe-facts > div:last-child { border-right: 0; }
.recipe-facts dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--abu); font-weight: 600; }
.recipe-facts dd { margin: .15rem 0 0; font-family: var(--serif); font-size: 1.05rem; }
@media (max-width: 860px) { .rsp-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .recipe-facts { grid-template-columns: 1fr 1fr; } .recipe-facts > div:nth-child(2n) { border-right: 0; } .recipe-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--garis); } }

/* CERITA: judul sangat besar, foto lebar, drop cap */
.opener-cerita h1 { font-size: clamp(2.7rem, 1.4rem + 5.6vw, 6rem); max-width: 16ch; font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 60; }
.opener-cerita .dek { max-width: 46ch; }
.wide-plate { margin-top: 2rem; }
.wide-plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.t-cerita .prose > p:first-of-type::first-letter { font-family: var(--serif); font-size: 4.1em; float: left; line-height: .82; padding: .08em .12em 0 0; color: var(--aren); font-weight: 400; }

/* KENALI & statis: pembuka teks */
.opener-plain h1 { max-width: 18ch; }

/* ---------- artikel ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) 15rem; gap: clamp(2rem, 6vw, 6rem); justify-content: space-between; margin-top: 2.4rem; }
@media (max-width: 1000px) { .article-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .rail { display: none; } }
.prose { min-width: 0; counter-reset: seksi; }
.prose > p:first-child, .prose .lede { font-size: 1.13rem; }
.prose h2 { counter-increment: seksi; margin-top: 2.8em; padding-top: 1rem; border-top: 1px solid var(--garis); position: relative; scroll-margin-top: 84px; }
.prose h2::before { content: counter(seksi, decimal-leading-zero); display: block; font-family: var(--serif); font-size: .82rem; font-weight: 600; letter-spacing: .14em; color: var(--amber); margin-bottom: .5rem; font-variation-settings: 'opsz' 12; }
.prose h2::after { content: ''; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 3px; background: var(--amber); }
.prose h3 { margin-top: 1.8em; scroll-margin-top: 84px; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--amber); }
.prose blockquote { margin: 1.8rem 0; padding: 0 0 0 1.2rem; border-left: 3px solid var(--aren); font-family: var(--serif); font-size: 1.22rem; line-height: 1.4; color: var(--arang-2); font-variation-settings: 'opsz' 24, 'SOFT' 40; }
.prose blockquote cite { display: block; margin-top: .5rem; font-family: var(--sans); font-size: .82rem; font-style: normal; color: var(--abu); }
.prose a, .prose li, .prose h3, .refs li, .credit { overflow-wrap: anywhere; }
.rail { position: sticky; top: 80px; align-self: start; }
.toc .label { display: block; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: tocn; border-top: 1px solid var(--arang); }
.toc li { counter-increment: tocn; border-bottom: 1px solid var(--garis); }
.toc li a { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem; padding: .5rem 0; font-size: .84rem; line-height: 1.35; text-decoration: none; color: var(--arang-2); }
.toc li a::before { content: counter(tocn, decimal-leading-zero); font-family: var(--serif); color: var(--amber); font-weight: 600; font-size: .78rem; letter-spacing: .1em; }
.toc li a:hover { color: var(--aren); }

figure.fig, figure.plate { margin: 2rem 0; }
.fig img, .plate img { width: 100%; }
.fig-wide { margin: 2rem calc(-1 * var(--gutter)); }
@media (min-width: 1001px) { .fig-wide { margin: 2.2rem 0; } }

/* ringkasan: bukan blok warna, tapi tipografi dengan garis */
.answer { margin: 0 0 2.2rem; padding: 1.1rem 0 .4rem; border-top: 2px solid var(--arang); border-bottom: 1px solid var(--garis); }
.answer .label { color: var(--arang); display: block; }
.answer p { font-family: var(--serif); font-size: 1.22rem; line-height: 1.45; font-variation-settings: 'opsz' 24, 'SOFT' 30; margin-bottom: .7em; }
.answer p:last-child { margin-bottom: .6em; }
.answer strong { font-weight: 600; }
.answer a { text-decoration-color: var(--amber); }
.note { margin: 1.8rem 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--amber); font-size: .95rem; color: var(--arang-2); }
.note .label { color: var(--aren); display: block; margin-bottom: .3rem; }
.note p:last-child { margin-bottom: .3em; }

.tblwrap { overflow-x: auto; margin: 1.8rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; border-top: 2px solid var(--arang); }
caption { text-align: left; font-family: var(--serif); font-size: 1.05rem; padding: .7rem 0; caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--garis); }
thead th { font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--abu); font-weight: 600; border-bottom: 1px solid var(--arang); }
tbody th { font-weight: 600; }

.faq { margin-top: 3rem; }
.faq h2 { counter-increment: none; }
.faq h2::before { content: 'Tanya'; }
.faq details { border-bottom: 1px solid var(--garis); }
.faq summary { cursor: pointer; padding: .85rem 2rem .85rem 0; font-weight: 500; font-family: var(--serif); font-size: 1.12rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .2rem; top: .7rem; color: var(--amber); font-family: var(--sans); font-size: 1.3rem; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 0 1rem; }

.refs { margin-top: 3rem; font-size: .88rem; color: var(--abu); }
.refs h2 { font-size: 1.15rem; counter-increment: none; }
.refs h2::before { content: 'Sumber'; }
.refs ol { padding-left: 1.3rem; }
.refs li { margin-bottom: .55em; }
.refnote { color: var(--abu); }

/* resep: buku besar */
.ingr { list-style: none; padding: 0; margin: 0 0 1.6rem; border-top: 2px solid var(--arang); }
.ingr li { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--garis); margin: 0; }
.ingr li b { font-weight: 600; color: var(--aren); font-variant-numeric: tabular-nums; }
.ingr li.sub { display: block; padding: 1rem 0 .3rem; border-bottom: 1px solid var(--arang); font-family: var(--serif); font-weight: 500; font-size: 1.05rem; }
@media (max-width: 480px) { .ingr li { grid-template-columns: 6.4rem 1fr; gap: .6rem; } .ingr li b { font-size: .95rem; } }
.steps { list-style: none; counter-reset: langkah; padding: 0; margin: 0 0 1.6rem; }
.steps li { counter-increment: langkah; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; }
.steps li::before { content: counter(langkah, decimal-leading-zero); position: absolute; left: 0; top: .15rem; font-family: var(--serif); font-size: .9rem; font-weight: 600; letter-spacing: .1em; color: var(--amber); }

/* ---------- daftar editorial (pengganti kartu) ---------- */
.ed-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--arang); }
.ed-list li { border-bottom: 1px solid var(--garis); }
.ed-list a { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .95rem 0; text-decoration: none; }
.ed-list .t { font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; font-weight: 500; }
.ed-list .s { font-size: .9rem; color: var(--abu); line-height: 1.45; }
.ed-list .k { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); font-weight: 600; }
.ed-list a:hover .t { color: var(--aren); }
.ed-list.thumbs a { grid-template-columns: 4.5rem 1fr; gap: .2rem 1rem; align-items: start; }
.ed-list.thumbs .th { grid-row: span 3; width: 4.5rem; aspect-ratio: 1; object-fit: cover; }
.ed-list.numbered { counter-reset: edn; }
.ed-list.numbered a { grid-template-columns: 2.6rem 1fr; gap: .2rem 0; }
.ed-list.numbered a::before { counter-increment: edn; content: counter(edn, decimal-leading-zero); grid-row: span 3; font-family: var(--serif); color: var(--amber); font-weight: 600; letter-spacing: .1em; font-size: .85rem; padding-top: .35rem; }
.ed-list.two { columns: 2; column-gap: 3rem; border-top: 0; }
.ed-list.two li { break-inside: avoid; border-top: 1px solid var(--garis); border-bottom: 0; }
@media (max-width: 720px) { .ed-list.two { columns: 1; border-top: 2px solid var(--arang); } .ed-list.two li { border-top: 0; border-bottom: 1px solid var(--garis); } }

/* susunan editorial: 1 besar + 2 sedang */
.ed-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem); }
.ed-feature .big { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.ed-feature .mid { grid-column: 8 / span 5; align-self: start; }
.ed-item { text-decoration: none; display: block; }
.ed-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ed-item .big-img { aspect-ratio: 4 / 5; }
.ed-item .mid-img { aspect-ratio: 4 / 3; }
.ed-item .k { display: block; margin: .8rem 0 .3rem; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); font-weight: 600; }
.ed-item .t { display: block; font-family: var(--serif); font-weight: 500; line-height: 1.1; font-size: 1.5rem; }
.ed-item.big .t { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 400; max-width: 14ch; }
.ed-item .s { display: block; margin-top: .45rem; color: var(--abu); font-size: .95rem; max-width: 40ch; }
.ed-item:hover .t { color: var(--aren); }
@media (max-width: 860px) { .ed-feature .big, .ed-feature .mid { grid-column: span 12; grid-row: auto; } .ed-feature .mid { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1rem; align-items: start; } .ed-feature .mid img { aspect-ratio: 1; } .ed-feature .mid .k { margin-top: 0; } .ed-feature .mid .t { font-size: 1.25rem; } .ed-feature .mid .s { display: none; } }

/* ---------- seksi beranda ---------- */
.masthead { border-bottom: 1px solid var(--garis); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); padding: .55rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.home-hero { padding: clamp(2rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.home-hero h1 { font-size: clamp(3rem, 1.6rem + 5.8vw, 6.4rem); line-height: .94; font-weight: 300; max-width: 11ch; font-variation-settings: 'opsz' 144, 'SOFT' 70; }
.home-hero h1 em { font-style: italic; color: var(--aren); font-weight: 300; }
.home-hero .dek { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.4; max-width: 36ch; margin: 1.6rem 0 0; color: var(--arang-2); font-variation-settings: 'opsz' 24, 'SOFT' 40; }
.home-hero .lead-links { margin-top: 1.6rem; }
.home-hero .lead-links .lbl { display: block; }
.home-hero-fig { margin: 0; position: relative; }
.home-hero-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.home-hero-fig figcaption { border-top: 1px solid var(--arang); margin-top: .6rem; padding-top: .5rem; }
@media (max-width: 860px) {
  .home-hero { padding-top: 1.6rem; }
  .home-hero .wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .home-hero-fig { margin-inline: calc(-1 * var(--gutter)); order: 2; }
  .home-hero-fig img { aspect-ratio: 4 / 5; }
  .home-hero-fig figcaption { margin-inline: var(--gutter); }
  .home-hero .dek { order: 3; }
  .home-hero .lead-links { order: 4; }
  .home-hero h1 { max-width: 9ch; }
}
.band { padding: clamp(2.4rem, 5vw, 4.5rem) 0; }
.band + .band { border-top: 1px solid var(--garis); }
.band-dark { background: var(--daun); color: var(--on-dark); border-top: 0 !important; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .kicker, .band-dark .lbl { color: var(--pandan-hi); }
.band-dark p { color: var(--on-dark-2); }
.band-dark a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.band-dark a:hover { color: var(--amber-hi); }
.band-dark figcaption, .band-dark .credit, .band-dark .credit a { color: var(--on-dark-2); }
.band-dark .takar { background: rgba(255,255,255,.18); }
.band-dark .takar::before { background: var(--amber-hi); }
.band-kabut { background: var(--kabut); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.sec-head h2 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 400; max-width: 22ch; }
.sec-head .kicker { display: block; }
.sec-head .more { font-size: .85rem; text-decoration: none; border-bottom: 1px solid var(--garis-2); white-space: nowrap; letter-spacing: .04em; }
.sec-head .more:hover { border-color: var(--aren); }

/* sorotan: foto besar + teks menimpa */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature.flip figure { order: 2; }
.feature figure { margin: 0; }
.feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.feature h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 300; margin: .4rem 0 .8rem; max-width: 14ch; }
.feature p { max-width: 42ch; font-size: 1.05rem; }
.feature .go { font-family: var(--serif); font-size: 1.05rem; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; gap: 1.2rem; } .feature.flip figure { order: 0; } .feature img { aspect-ratio: 4 / 3; } }

/* indeks daerah tipografis */
.idx { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--arang); }
.idx li { border-bottom: 1px solid var(--garis); }
.idx a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.5rem; padding: 1rem 0; text-decoration: none; align-items: baseline; }
.idx .t { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 400; line-height: 1.05; }
.idx .n { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); font-weight: 600; text-align: right; }
.idx .s { grid-column: 1 / -1; font-size: .92rem; color: var(--abu); max-width: 60ch; }
.idx a:hover .t { color: var(--aren); }
.band-dark .idx { border-top-color: rgba(255,255,255,.7); }
.band-dark .idx li { border-bottom-color: rgba(255,255,255,.16); }
.band-dark .idx .s, .band-dark .idx .n { color: var(--on-dark-2); }
.band-dark .idx a:hover .t { color: var(--amber-hi); }

/* strip bahan */
.bahan-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; border-top: 2px solid var(--arang); }
.bahan-strip li { border-bottom: 1px solid var(--garis); }
.bahan-strip a { display: block; padding: .9rem 0; text-decoration: none; }
.bahan-strip .t { font-family: var(--serif); font-size: 1.3rem; display: block; }
.bahan-strip .s { font-size: .86rem; color: var(--abu); display: block; margin-top: .25rem; }
.bahan-strip a:hover .t { color: var(--aren); }
@media (max-width: 860px) { .bahan-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .bahan-strip { grid-template-columns: 1fr; } }

/* ---------- terkait ---------- */
.related { margin: 3.5rem 0 1rem; }
.related > h2 { font-size: .72rem; font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--abu); font-weight: 600; margin-bottom: 1.2rem; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem 3rem; }
.relblock h3 { font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--arang); font-weight: 600; margin: 0 0 .4rem; }
.inline-marks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .95rem; }
.inline-marks a { text-decoration: none; border-bottom: 1px solid var(--garis-2); }
.inline-marks a:hover { border-color: var(--aren); }

/* ---------- hub ---------- */
.hub-sec { margin-top: 3rem; scroll-margin-top: 84px; }
.hub-sec .sec-desc { color: var(--abu); max-width: 60ch; margin: -.6rem 0 1.2rem; }
.keluarga-idx { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.5rem; border-top: 2px solid var(--arang); }
.keluarga-idx li { border-bottom: 1px solid var(--garis); }
.keluarga-idx a { display: block; padding: .8rem 0; text-decoration: none; }
.keluarga-idx .t { font-family: var(--serif); font-size: 1.15rem; display: block; }
.keluarga-idx .n { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--abu); font-weight: 600; }
@media (max-width: 860px) { .keluarga-idx { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .keluarga-idx { grid-template-columns: 1fr; } }

/* ---------- kaki ---------- */
.site-foot { background: var(--arang); color: var(--on-dark-2); margin-top: 4rem; padding: 3rem 0 1.5rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.foot-brand .brand-name { color: #fff; display: block; margin-bottom: .5rem; }
.foot-brand p { font-size: .9rem; max-width: 40ch; }
.site-foot h2 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--amber-hi); margin: 0 0 .7rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .4rem; }
.site-foot a { color: #fff; text-decoration: none; font-size: .92rem; }
.site-foot a:hover { color: var(--amber-hi); }
.foot-base { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; }
.foot-base p { margin: 0; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

@media print { .site-head, .site-foot, .rail, .related { display: none; } }