/* ============================================================
   IKSI — Institut Kebijakan Sawit Indonesia
   base.css — token, reset, tipografi, atom
   Keputusan desain: kanvas gading netral; hijau pinus sebagai
   warna lembaga; kuningan HANYA untuk aksen editorial; warna
   jenuh lain eksklusif untuk sinyal status. Tanpa emoji.
   ============================================================ */

:root {
  /* kanvas */
  --paper:      #F5F2E9;
  --surface:    #FDFCF7;
  --surface-2:  #EDE9DB;
  --surface-3:  #E2DCC9;

  /* tinta */
  --ink:        #17211B;
  --ink-2:      #47544B;
  --ink-3:      #5E6D63; /* kontras >= 4.5:1 di atas --paper untuk teks kecil */

  /* garis */
  --rule:        #DCD6C3;
  --rule-strong: #B9B199;

  /* identitas */
  --pine:       #14402F;
  --pine-2:     #1D5940;
  --pine-soft:  #E1E9E0;
  --on-pine:    #F6F4E8;
  --brass:      #96751F;
  --brass-2:    #B08D2F;
  --brass-soft: #F0E7CE;

  /* status — dipakai hanya untuk arti */
  --ok:         #2C6B4F;  --ok-soft:   #DFEBE3;
  --warn:       #93660A;  --warn-soft: #F3E9D0;
  --crit:       #A02D22;  --crit-soft: #F2DCD7;
  --heat:       #B04E2A;  --heat-soft: #F3DFD3;
  --na:         #5F6359;  --na-soft:   #E7E5DA;
  --plan:       #22406F;  --plan-soft: #E2E8F1;

  /* pita gelap */
  --night:      #0C221A;
  --night-2:    #113227;
  --cream:      #F1EEE0;
  --cream-2:    rgba(241,238,224,.66);
  --cream-3:    rgba(241,238,224,.58);
  --night-rule: rgba(241,238,224,.16);

  /* geometri & elevasi */
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --e1: 0 1px 2px rgba(23,33,27,.05), 0 3px 10px -6px rgba(23,33,27,.10);
  --e2: 0 2px 4px rgba(23,33,27,.06), 0 14px 34px -16px rgba(23,33,27,.18);
  --scrim: rgba(12,26,20,.44);

  --maxw: 1180px;

  /* tipografi tiga peran */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Archivo", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-2); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--brass-soft); }
:focus-visible { outline: 2px solid var(--pine-2); outline-offset: 2px; border-radius: 2px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- tipografi ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 570; line-height: 1.14; margin: 0; letter-spacing: -.005em; }
h4, h5 { font-family: var(--sans); margin: 0; }
.d1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); }
.d2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.d3 { font-size: clamp(1.28rem, 2.2vw, 1.62rem); }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.66; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.num, .tabnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.small { font-size: .86rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--brass); flex: none; }
.eyebrow.on-night { color: var(--brass-2); }
.eyebrow.on-night::before { background: var(--brass-2); }

.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: .9rem; }
.sec-head p { margin: .9rem 0 0; color: var(--ink-2); }
.sec-no { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .14em; }

/* ---------- kerangka ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.2rem); }
.sec { padding: clamp(3.4rem, 7.5vw, 5.6rem) 0; }
.sec + .sec { padding-top: 0; }
.band { background: var(--night); color: var(--cream); }
.band-soft { background: var(--surface-2); }
.hairline-t { border-top: 1px solid var(--rule); }

/* pola titik tanam — grid rapi kebun sebagai metafora tata kelola */
.dotfield { position: relative; }
.dotfield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(23,33,27,.075) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
}
.band .dotfield::before, .dotfield.on-night::before {
  background-image: radial-gradient(rgba(241,238,224,.10) 1px, transparent 1.4px);
}

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .92rem; line-height: 1;
  padding: .78rem 1.25rem; border-radius: var(--r-s);
  background: var(--pine); color: var(--on-pine);
  border: 1px solid var(--pine);
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.btn:hover { background: var(--pine-2); border-color: var(--pine-2); color: var(--on-pine); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 15px; height: 15px; }
.btn.ghost { background: transparent; color: var(--pine); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--pine); background: var(--pine-soft); }
.btn.cream { background: var(--cream); border-color: var(--cream); color: var(--night); }
.btn.cream:hover { background: #fff; border-color: #fff; }
.btn.ghost-cream { background: transparent; color: var(--cream); border-color: var(--night-rule); }
.btn.ghost-cream:hover { border-color: var(--cream-2); background: rgba(241,238,224,.06); }
.btn.mini { padding: .5rem .85rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: default; }

.linkline {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .92rem; color: var(--pine);
  border-bottom: 1px solid var(--rule-strong); padding-bottom: .15rem;
}
.linkline:hover { border-color: var(--pine); }
.linkline .ic { width: 14px; height: 14px; }

/* ---------- chip status ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  padding: .26rem .55rem; border-radius: 4px;
  border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--surface);
}
.chip::before { content: ""; width: 7px; height: 7px; flex: none; background: currentColor; }
.chip.plain::before { display: none; }
.chip.ok    { color: var(--ok);   background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.chip.warn  { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.chip.crit  { color: var(--crit); background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 34%, transparent); }
.chip.heat  { color: var(--heat); background: var(--heat-soft); border-color: color-mix(in srgb, var(--heat) 34%, transparent); }
.chip.na    { color: var(--na);   background: var(--na-soft);   border-color: color-mix(in srgb, var(--na) 40%, transparent); }
.chip.plan  { color: var(--plan); background: var(--plan-soft); border-color: color-mix(in srgb, var(--plan) 34%, transparent); }
.chip.brass { color: var(--brass); background: var(--brass-soft); border-color: color-mix(in srgb, var(--brass) 36%, transparent); }
.chip.pine  { color: var(--pine); background: var(--pine-soft); border-color: color-mix(in srgb, var(--pine) 30%, transparent); }

.tag {
  display: inline-block; font-size: .8rem; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--rule); background: var(--surface);
  padding: .3rem .68rem; border-radius: 999px; white-space: nowrap;
}

/* ---------- meter & progres ---------- */
.meter { display: grid; gap: .4rem; }
.meter .rail { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--pine); }
.meter .fill.brass { background: linear-gradient(90deg, var(--brass), var(--brass-2)); }
.meter .fill.heat  { background: var(--heat); }
.meter .cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: .7rem;
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3); letter-spacing: .05em;
}
.meter .cap b { color: var(--ink); font-weight: 600; }

/* skala panas isu */
.heatline { display: flex; align-items: center; gap: .6rem; }
.heatline .rail { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.heatline .fill { height: 100%; background: linear-gradient(90deg, #C88A2E, var(--heat)); border-radius: 999px; }
.heatline .val { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--heat); }

/* ---------- avatar inisial ---------- */
.avatar {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--pine); color: var(--brass-2);
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em;
  border: 1px solid var(--pine);
}
.avatar.line { background: var(--surface); color: var(--pine); border-color: var(--rule-strong); }

/* ---------- ikon ---------- */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icbox {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-s); background: var(--pine-soft); color: var(--pine);
  border: 1px solid color-mix(in srgb, var(--pine) 16%, transparent);
}
.icbox .ic { width: 21px; height: 21px; stroke-width: 2; }
.band .icbox { background: rgba(241,238,224,.07); color: var(--brass-2); border-color: var(--night-rule); }

/* ---------- ornamen pelepah ---------- */
.frond { position: absolute; pointer-events: none; color: var(--brass); opacity: .16; }
.band .frond { color: var(--brass-2); opacity: .2; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
.rv.dl1 { transition-delay: .07s; } .rv.dl2 { transition-delay: .14s; }
.rv.dl3 { transition-delay: .21s; } .rv.dl4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
}
@media print { .rv { opacity: 1 !important; transform: none !important; } }