/* Chapter compositions (role A3). PLAN §5. Figure internals are viz.css (A4); the hero is hero.css (A2).
   Breakpoints: phone <= 860 (1 column), 861-1099 (8 columns), >= 1100 (12 columns). */

/* ======================================================================= */
/* 2. Kenapa                                                               */
/* ======================================================================= */
.kenapa__text > .h2 + .prose { margin-top: var(--s-5); }
.kenapa__fig { grid-row: 1; margin-bottom: var(--s-7); }
.kenapa__text { grid-row: 2; }
@media (min-width: 861px) {
  .kenapa__text { grid-row: 1; grid-column: 1 / span 6; }
  .kenapa__fig { grid-row: 2; grid-column: 1 / -1; margin: var(--s-8) 0 0; }
}
@media (min-width: 1100px) {
  .kenapa__text { grid-column: 1 / span 5; align-self: center; }
  .kenapa__fig { grid-row: 1; grid-column: 6 / -1; margin: 0; align-self: center; }
}

/* ======================================================================= */
/* 3. Tiga layanan: a ledger, not cards                                    */
/* ======================================================================= */
.ledger { list-style: none; border-bottom: 1px solid var(--rule); }
.ledger__row {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0 var(--s-6);
}
.ledger__still {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-3);
  /* one treatment for the three stills (review r3): a hard 4:3 crop of the scene with a hairline */
  border: 1px solid var(--rule);
  margin-bottom: var(--s-5);
}
.ledger__title + .ledger__text { margin-top: var(--s-3); }
.ledger__text { max-width: 52ch; }
.ledger__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--t-note);
  color: var(--ink-soft);
}
.ledger__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-top: var(--s-2); }
.ledger__fig { margin: 0 0 var(--s-5); }
.ledger__fig > .ledger__still { margin-bottom: 0; }
.ledger__cap {
  margin-top: var(--s-2);
  font-size: var(--t-note);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 40ch;
}
.ledger__row { scroll-margin-top: calc(var(--head-h) + var(--s-5)); }
.ledger__row:focus { outline: none; }
.ledger__row:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
@media (min-width: 861px) {
  .ledger__fig { margin: 0; }
  .ledger__row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--col-gap);
    padding: var(--s-6) 0;
  }
  .ledger__still { aspect-ratio: 4 / 3; margin: 0; }
}
@media (min-width: 1100px) {
  .ledger__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ledger__still { grid-column: 1 / span 3; grid-row: 1 / span 3; width: 100%; max-width: 280px; }
  .ledger__fig { grid-column: 1 / span 3; grid-row: 1 / span 3; max-width: 280px; }
  .ledger__fig > .ledger__still { max-width: none; }
  .ledger__body { display: contents; }
  .ledger__title { grid-column: 4 / span 6; grid-row: 1; }
  .ledger__text { grid-column: 4 / span 6; grid-row: 2; margin-top: var(--s-3); }
  .ledger__where { grid-column: 10 / -1; grid-row: 1; align-self: start; margin-top: var(--s-2); }
  .ledger__links { grid-column: 10 / -1; grid-row: 2; flex-direction: column; align-items: flex-start; margin-top: var(--s-2); }
}

/* ======================================================================= */
/* 4. Pilot Hutan Batukau                                                  */
/* ======================================================================= */
.batukau__head .lede + .batukau__implication { margin-top: var(--s-5); }
.batukau__implication {
  max-width: 44ch;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.batukau__head { margin-bottom: var(--s-7); }
@media (min-width: 861px) {
  .batukau__head { grid-column: 1 / -1; }
  .batukau__sheet { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .batukau__head { grid-column: 1 / span 5; margin-bottom: 0; }
  .batukau__sheet { grid-column: 6 / -1; }
}

/* data sheet */
.datasheet { width: 100%; font-size: var(--t-caption); line-height: 1.45; }
.datasheet__cap {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-3);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.datasheet thead th {
  padding: 0 var(--s-3) var(--s-2) 0;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
.datasheet :is(tbody th, td) {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  text-align: left;
  vertical-align: baseline;
  border-top: 1px solid var(--rule);
}
.datasheet tbody th { font-weight: 400; color: var(--ink-2); }
/* row variants carry the table's specificity so they beat the base cell rule above */
.datasheet .ds-row--sub th { font-size: var(--t-note); color: var(--ink-soft); }
.datasheet .ds-row--sub .ds-val { font-size: var(--t-note); }
@media (min-width: 861px) {
  .datasheet .ds-row--sub :is(th, td) { padding-top: var(--s-2); padding-bottom: var(--s-2); border-top-color: transparent; }
  .datasheet .ds-row--sub th { padding-left: var(--s-4); }
  .datasheet .ds-row--last :is(th, td) { padding-bottom: var(--s-3); }
  .datasheet .ds-row--key :is(th, td) { border-top: 1px solid var(--ink); }
}
.ds-val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ds-fig { font-weight: 700; }
.ds-row--lead .ds-fig,
.ds-row--key .ds-fig {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.datasheet .ds-row--key th { font-weight: 700; color: var(--ink); }
.ds-prod { display: block; white-space: nowrap; }
.ds-prod__name { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-label); color: var(--ink-soft); }
.ds-aux { display: block; font-size: var(--t-note); color: var(--ink-soft); white-space: normal; }
.datasheet { table-layout: fixed; }
.datasheet thead th:nth-child(1) { width: 31%; }
.datasheet thead th:nth-child(2) { width: 22%; }
.datasheet thead th:nth-child(3) { width: 25%; }
.datasheet thead th:nth-child(4) { width: 22%; }
.ds-val { overflow-wrap: anywhere; }
/* the figure and its unit may part across lines; each stays whole (EN "≈ 6.37 million tCO2e" ran
   26-66 px into the status column, ID "1,37-2,10 juta MgC" 14 px at 1100) */
.datasheet .ds-val { white-space: normal; }
.datasheet .ds-val > :is(.ds-fig, .u) { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .ds-row--lead .ds-fig,
  .ds-row--key .ds-fig { font-size: 1.125rem; }
}
.ds-src .src { white-space: nowrap; }
/* identical status or source over adjacent rows is set once, with a hairline bracket */
.datasheet td.ds-merged { vertical-align: top; }
/* every status cell carries the hairline and the indent, merged or not, so the column keeps one edge (review r3) */
.datasheet td.ds-st { border-left: 1px solid var(--rule); padding-left: var(--s-3); }
/* a wrapped chip is a block here, so the row aligns on its first line, not its last */
.ds-st > .status { display: block; }
@media (min-width: 1100px) {
  .batukau__head { position: sticky; top: calc(var(--head-h) + var(--s-7)); align-self: start; }
}
@media (max-width: 860px) {
  .datasheet, .datasheet tbody { display: block; }
  .datasheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .datasheet__cap { display: block; }
  .datasheet { table-layout: auto; }
  .datasheet tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
  }
  .datasheet tr.ds-row--sub { padding: var(--s-2) 0 var(--s-2) var(--s-4); border-top-color: transparent; }
  .datasheet tr.ds-row--key { border-top-color: var(--ink); }
  .datasheet :is(tbody th, td) { display: block; padding: 0; border: 0; width: auto; }
  .datasheet tbody th { grid-column: 1 / -1; }
  .ds-val { grid-column: 1 / -1; white-space: normal; }
  .ds-fig { font-family: var(--font-display); font-weight: 300; font-size: 1.375rem; line-height: 1.15; }
  .ds-row--sub .ds-fig { font-family: var(--font-text); font-weight: 700; font-size: var(--t-note); }
  .ds-row--sub th { padding-left: 0; }
  .ds-st, .ds-src { grid-column: 1; }
  .ds-val { margin: var(--s-1) 0; }
  /* a group of rows that share a status and a source: the rows first, the shared label once at the end */
  .datasheet tbody.ds-group:not(.ds-group--one) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
  }
  .datasheet .ds-group:not(.ds-group--one) > tr { display: contents; }
  .datasheet .ds-group:not(.ds-group--one) > tr > * { grid-column: 1 / -1; }
  .datasheet .ds-group:not(.ds-group--one) > tr + tr > th { margin-top: var(--s-3); }
  .datasheet .ds-group--aoi > tr.ds-row--sub > th { grid-column: 1; margin-top: var(--s-1); padding-left: var(--s-4); }
  .datasheet .ds-group--aoi > tr.ds-row--sub > .ds-val { grid-column: 2; margin: var(--s-1) 0 0; text-align: right; }
  .datasheet .ds-group:not(.ds-group--one) .ds-merged { order: 1; }
  .datasheet .ds-group:not(.ds-group--one) .ds-st.ds-merged { margin-top: var(--s-3); padding: var(--s-3) 0 0; border: 0; border-top: 1px dotted var(--rule); }
}

.batukau__probe { margin-top: var(--s-9); }
.batukau__figs { margin-top: var(--s-9); row-gap: var(--s-9); }
@media (min-width: 861px) {
  .batukau__fig { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .batukau__fig--area { grid-column: 1 / span 6; }
  .batukau__fig--pools { grid-column: 7 / -1; }
}
.batukau__method {
  position: relative;
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
}
.batukau__method p { max-width: var(--measure); }
/* hairline inside the gutters (a border on .wrap would run into the padding) */
.batukau__method::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--rule);
}

/* ======================================================================= */
/* 5. Pilot Kebun Argopuro                                                 */
/* ======================================================================= */
.argopuro__grid { row-gap: var(--s-7); }
.argopuro__media { grid-row: 1; }
.argopuro__head { grid-row: 2; margin-bottom: 0; }
.argopuro__body { grid-row: 3; }
.argopuro__head .meta { margin-top: var(--s-4); }
.argopuro__stack {
  position: relative;
  padding-bottom: 20%;
}
.argopuro__plate {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 1083;
  background: var(--paper-3);
}
.argopuro__bag {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 569 / 720;
  background: var(--paper-2);
  /* a flush figure with a hairline, not a floating card (review r3); the photo is graded to the cream ground */
  box-sizing: border-box;
  border: 1px solid var(--rule);
}
@media (max-width: 860px) {
  .argopuro__stack { padding-bottom: 16%; }
  .argopuro__bag { right: var(--s-4); }
}
.argopuro__media .caption { margin-top: var(--s-5); max-width: 52ch; }
.argopuro__media .caption + .caption { margin-top: var(--s-2); }
.argopuro__body > * + * { margin-top: var(--s-7); }
@media (min-width: 861px) {
  .argopuro__media { grid-row: 1 / span 2; grid-column: 1 / span 4; }
  .argopuro__head { grid-row: 1; grid-column: 5 / -1; }
  .argopuro__body { grid-row: 2; grid-column: 5 / -1; }
  .argopuro__plate { width: 88%; }
  .argopuro__bag { width: 46%; }
}
@media (min-width: 1100px) {
  .argopuro__media { grid-column: 1 / span 6; }
  .argopuro__head { grid-column: 8 / -1; }
  .argopuro__body { grid-column: 8 / -1; }
  .argopuro__plate { width: 86%; }
  .argopuro__bag { width: 240px; }
  .argopuro__stack { padding-bottom: 9rem; }
}

.gauge-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.gauge-empty__ring { flex: none; width: 64px; height: 64px; }
.gauge-empty__ring circle {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 0.5 6;
  stroke-linecap: round;
}
.gauge-empty__text { padding-top: var(--s-2); }
.gauge-empty__text .meta { margin-top: var(--s-2); }
.argopuro__coffee { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }

/* ======================================================================= */
/* 6. Cara kami mengukur: pinned on desktop (>= 861 px), flow elsewhere    */
/* ======================================================================= */
.metode__grid { row-gap: var(--s-6); }
.metode__head { margin-bottom: 0; }
.metode__text > .h3 + * { margin-top: var(--s-3); }
.metode__text p { max-width: 46ch; }
.metode__small { margin-top: var(--s-4); font-size: var(--t-note); color: var(--ink-soft); }
.metode__small .status { margin-left: var(--s-2); vertical-align: -0.1em; }
.metode__text .meta { margin-top: var(--s-4); }

/* flow order (phone, static, no-JS): head, A text, A figure, B text, B figure, C text, C figure, key */
.metode__head { grid-row: 1; }
[data-metode-cue="a"] { grid-row: 2; }
[data-metode-state="a"] { grid-row: 3; }
[data-metode-cue="b"] { grid-row: 4; margin-top: var(--s-7); }
[data-metode-state="b"] { grid-row: 5; }
[data-metode-cue="c"] { grid-row: 6; margin-top: var(--s-7); }
[data-metode-state="c"] { grid-row: 7; }
.metode__grid > .status-key { grid-row: 8; margin-top: var(--s-7); }
@media (min-width: 861px) {
  .chapter--metode:not([data-sc-act="pin"]) .metode__head { grid-column: 1 / -1; }
  .chapter--metode:not([data-sc-act="pin"]) .metode__text { grid-column: 1 / span 3; margin-top: 0; }
  .chapter--metode:not([data-sc-act="pin"]) .metode__fig { grid-column: 4 / -1; }
  .chapter--metode:not([data-sc-act="pin"]) [data-metode-state="a"] { grid-row: 2; }
  .chapter--metode:not([data-sc-act="pin"]) [data-metode-cue="b"],
  .chapter--metode:not([data-sc-act="pin"]) [data-metode-state="b"] { grid-row: 3; margin-top: var(--s-8); }
  .chapter--metode:not([data-sc-act="pin"]) [data-metode-cue="c"],
  .chapter--metode:not([data-sc-act="pin"]) [data-metode-state="c"] { grid-row: 4; margin-top: var(--s-8); }
  .chapter--metode:not([data-sc-act="pin"]) .metode__grid > .status-key { grid-row: 5; grid-column: 4 / -1; }
}
@media (min-width: 1100px) {
  .chapter--metode:not([data-sc-act="pin"]) .metode__text { grid-column: 1 / span 5; }
  .chapter--metode:not([data-sc-act="pin"]) .metode__fig { grid-column: 6 / -1; }
  .chapter--metode:not([data-sc-act="pin"]) .metode__grid > .status-key { grid-column: 6 / -1; }
}

/* pinned: one stage, texts share one cell, figures share one cell */
.chapter--metode[data-sc-act="pin"] .metode__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--head-h) + var(--s-5)) 0 var(--s-5);
  box-sizing: border-box;
}
.chapter--metode[data-sc-act="pin"] .metode__grid {
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: var(--s-5);
  max-height: 100%;
  min-height: 0;
}
.chapter--metode[data-sc-act="pin"] .metode__head { grid-row: 1; grid-column: 1 / span 3; }
.chapter--metode[data-sc-act="pin"] .metode__text { grid-row: 2; grid-column: 1 / span 3; margin: 0; align-self: start; }
.chapter--metode[data-sc-act="pin"] .metode__fig { grid-row: 1 / span 3; grid-column: 4 / -1; align-self: center; min-height: 0; }
.chapter--metode[data-sc-act="pin"] .metode__grid > .status-key { grid-row: 3; grid-column: 1 / span 3; margin: 0; align-self: end; }
.chapter--metode[data-sc-act="pin"] .metode__head .h2 { font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); }
.chapter--metode[data-sc-act="pin"] .status-key__list { max-height: 38vh; overflow-y: auto; }
@media (min-width: 1100px) {
  .chapter--metode[data-sc-act="pin"] :is(.metode__head, .metode__text) { grid-column: 1 / span 5; }
  .chapter--metode[data-sc-act="pin"] .metode__grid > .status-key { grid-column: 1 / span 5; }
  .chapter--metode[data-sc-act="pin"] .metode__fig { grid-column: 7 / -1; }
}

/* status key: every chip with its one-line meaning (also small in the colophon) */
.status-key { max-width: 40rem; }
.status-key__summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-ui);
  color: var(--ink);
}
.status-key__summary::-webkit-details-marker { display: none; }
.status-key__summary .icon { transition: transform var(--d-state) var(--ease-out); }
.status-key[open] > .status-key__summary .icon { transform: rotate(180deg); }
.status-key__list {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.status-key__list li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
  font-size: var(--t-note);
  line-height: 1.45;
}
.status-key__desc { color: var(--ink-soft); }
@media (max-width: 560px) {
  .status-key__list li { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================= */
/* 7. Peta jalan: pan rail                                                 */
/* ======================================================================= */
.rail { list-style: none; }
.rail__item h3 { margin-bottom: var(--s-3); }
.rail__item p { max-width: 42ch; }
.rail__item .meta { margin-top: var(--s-4); }
.rail__item--head .lede { margin-top: var(--s-4); color: var(--ink-soft); }
.rail__close { font-size: var(--t-lede); line-height: 1.5; max-width: 26ch; }
.rail__item:not(.rail__item--head) { padding-top: var(--s-5); border-top: 1px solid var(--rule); }

/* pan (engine act) */
.chapter--roadmap[data-sc-act="pan"] .roadmap__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--head-h);
  box-sizing: border-box;
}
.chapter--roadmap[data-sc-act="pan"] .rail {
  position: relative;
  gap: var(--s-6);
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)) var(--gutter);
  align-items: flex-start;
}
.chapter--roadmap[data-sc-act="pan"] .rail > li:not(.rail__axis) {
  flex: none;
  width: clamp(22rem, 30vw, 28rem);
}
/* The engine pans by rail.scrollWidth, which leaves out the flex container's end padding.
   A trailing flex item keeps one gutter after the last item at the end of the pan. */
.chapter--roadmap[data-sc-act="pan"] .rail::after {
  content: "";
  flex: none;
  width: max(1px, calc(var(--gutter) - var(--s-6)));
  height: 1px;
}
.chapter--roadmap[data-sc-act="pan"] .rail__item:nth-child(2) { --i: 1; }
.chapter--roadmap[data-sc-act="pan"] .rail__item:nth-child(3) { --i: 2; }
.chapter--roadmap[data-sc-act="pan"] .rail__item:nth-child(4) { --i: 3; }
.chapter--roadmap[data-sc-act="pan"] .rail__item:nth-child(5) { --i: 4; }
.chapter--roadmap[data-sc-act="pan"] .rail__item:nth-child(6) { --i: 5; }
.chapter--roadmap[data-sc-act="pan"] .rail__item:not(.rail__item--head) {
  opacity: clamp(0.88, calc(1.7 + var(--sc-p, 1) * 5 - var(--i, 0)), 1);
}
@media (max-width: 860px) {
  /* each item is one frame wide and lands whole at the gutter (stepped pan, data-sc-pan-stops) */
  .chapter--roadmap[data-sc-act="pan"] .rail > li:not(.rail__axis) { width: calc(100vw - 2 * var(--gutter)); }
  .chapter--roadmap[data-sc-act="pan"] .rail { padding-inline: var(--gutter); gap: var(--gutter); }
  .chapter--roadmap[data-sc-act="pan"] .rail::after { width: 1px; }
  .chapter--roadmap[data-sc-act="pan"] .rail__item:not(.rail__item--head) { opacity: 1; }
  .chapter--roadmap[data-sc-act="pan"] .rail__item--head .h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); }
}

/* flow (static mode, reduced motion, no JS): the rail is a plain list laid out as a grid */
.chapter--roadmap:not([data-sc-act="pan"]) .rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--col-gap);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  transform: none !important;
}
.chapter--roadmap:not([data-sc-act="pan"]) .rail__item { opacity: 1; }
.chapter--roadmap:not([data-sc-act="pan"]) :is(.rail__item--head, .rail__axis) { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .chapter--roadmap:not([data-sc-act="pan"]) .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter--roadmap:not([data-sc-act="pan"]) .rail__item--close { grid-column: 1 / -1; }
}
/* desktop: one row of four, the axis under it, the closing line last */
@media (min-width: 1100px) {
  .chapter--roadmap:not([data-sc-act="pan"]) .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-6); }
  .chapter--roadmap:not([data-sc-act="pan"]) .rail__item--head { grid-row: 1; margin-bottom: var(--s-4); }
  .chapter--roadmap:not([data-sc-act="pan"]) .rail__axis { grid-row: 3; }
  .chapter--roadmap:not([data-sc-act="pan"]) .rail__item--close { grid-row: 4; border-top: 0; padding-top: 0; }
  .chapter--roadmap:not([data-sc-act="pan"]) .rail__item p { max-width: 34ch; }
}

/* ======================================================================= */
/* 8. Skema pembiayaan                                                     */
/* ======================================================================= */
.instruments { width: 100%; font-size: var(--t-caption); line-height: 1.5; }
.instruments thead :is(th, td) {
  padding: 0 var(--s-4) var(--s-2) 0;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
.instruments tbody :is(th, td) {
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}
.instruments tbody tr:first-child :is(th, td) { border-top: 0; }
.instruments tbody th { font-weight: 700; color: var(--ink); }
/* column widths are desktop only: viz.css turns each row into a block on phones */
@media (min-width: 861px) {
  .instruments tbody th { width: 15%; }
  .instruments tbody td:last-child { padding-right: 0; white-space: nowrap; }
  .instr__fig { width: 21%; }
}
.instr__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.instr__fig > .status { display: block; width: fit-content; margin-top: var(--s-2); }
.instr__foot {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-note);
  line-height: 1.45;
  color: var(--ink-soft);
}
.instr__foot .status, .instr__foot .src { margin-top: var(--s-1); margin-right: var(--s-3); }
.instr__claim { font-weight: 700; }
@media (min-width: 861px) and (max-width: 1099px) {
  .instruments { font-size: var(--t-note); }
  .instr__figure { font-size: 1.375rem; }
}

.pembiayaan__split { margin-top: var(--s-9); row-gap: var(--s-8); }
@media (min-width: 861px) {
  .pembiayaan__benefit, .pembiayaan__est { grid-column: 1 / -1; }
  .pembiayaan__est { max-width: 36rem; }
}
@media (min-width: 1100px) {
  .pembiayaan__benefit { grid-column: 1 / span 7; align-self: start; }
  .pembiayaan__est { grid-column: 8 / -1; max-width: none; align-self: start; }
}

/* ======================================================================= */
/* 9. Konsultasi                                                           */
/* ======================================================================= */
.consult { border-bottom: 1px solid var(--rule); }
/* the list's closing rule already ends the chapter: no second turn hairline above Siapa kami */
.chapter.chapter--konsultasi[data-ground] + .chapter.chapter--tim[data-ground]::before { content: none; }
.consult__row {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0;
}
.consult__text { margin-top: var(--s-3); max-width: 52ch; color: var(--ink-2); }
.consult__act { margin-top: var(--s-4); }
@media (min-width: 861px) {
  .consult__row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
    padding: var(--s-6) 0;
  }
  .consult__name { grid-column: 1 / span 3; }
  .consult__text { grid-column: 4 / span 3; margin: 0; }
  .consult__act { grid-column: 7 / span 2; justify-self: end; margin: 0; }
}
@media (min-width: 1100px) {
  .consult__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .consult__name { grid-column: 1 / span 4; }
  .consult__text { grid-column: 5 / span 5; }
  .consult__act { grid-column: 10 / span 3; }
}

/* ======================================================================= */
/* 10. Siapa kami: the one centred passage                                 */
/* ======================================================================= */
.tim__in { text-align: center; }
.tim__h2 { font-size: var(--t-h3); line-height: 1.2; color: var(--ink-soft); }
.tim__statement {
  max-width: 28ch;
  margin: var(--s-6) auto 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-statement);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.tim__about { max-width: 56ch; margin: var(--s-7) auto 0; color: var(--ink-2); }
.tim__about .link-go { min-height: 0; vertical-align: baseline; }
/* lines.js splits [data-lines] into span.line > span.line__i */
[data-lines] .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-lines] .line__i {
  display: inline-block;
  transition: opacity var(--d-reveal) var(--ease-out-expo), transform var(--d-reveal) var(--ease-out-expo);
}
[data-lines].is-split:not(.is-in) .line__i { opacity: 0; transform: translate3d(0, 14px, 0); }
[data-lines] .line:nth-child(2) .line__i { transition-delay: 90ms; }
[data-lines] .line:nth-child(3) .line__i { transition-delay: 180ms; }
[data-lines] .line:nth-child(4) .line__i { transition-delay: 270ms; }
[data-lines] .line:nth-child(5) .line__i { transition-delay: 360ms; }
[data-lines] .line:nth-child(6) .line__i { transition-delay: 450ms; }
[data-lines] .line:nth-child(n+7) .line__i { transition-delay: 540ms; }

/* ======================================================================= */
/* 11. Yang kami klaim, dan yang tidak (ink ground)                        */
/* ======================================================================= */
.klaim__cols { row-gap: var(--s-8); }
.klaim__col .h3 { margin-bottom: var(--s-4); color: var(--paper); }
@media (min-width: 861px) {
  .klaim__col--yes { grid-column: 1 / span 4; }
  .klaim__col--no { grid-column: 5 / span 4; }
}
@media (min-width: 1100px) {
  .klaim__col--yes { grid-column: 1 / span 6; }
  .klaim__col--no { grid-column: 7 / span 6; }
}
.klaim__list { list-style: none; max-width: 34rem; border-bottom: 1px solid var(--rule-on-dark); }
.klaim__list > li { padding: var(--s-3) 0; border-top: 1px solid var(--rule-on-dark); text-wrap: wrap; }
.klaim__no:nth-child(2) { --i: 1; }
.klaim__no:nth-child(3) { --i: 2; }
.klaim__no:nth-child(4) { --i: 3; }
.klaim__no:nth-child(5) { --i: 4; }
/* Each negative opens with a small drawn x; the sentence itself is set plain (never struck through). */
.klaim__no {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: start;
}
.klaim__mark {
  width: 12px;
  height: 12px;
  margin-top: 0.5em;
  color: var(--paper-on-dark-soft);
  stroke-width: 2;
}

.faq { margin-top: var(--s-9); max-width: 52rem; border-bottom: 1px solid var(--rule-on-dark); }
.faq__item { border-top: 1px solid var(--rule-on-dark); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-3) 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--paper);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { color: var(--forest-on-dark); transition: transform var(--d-state) var(--ease-out); }
.faq__item[open] > .faq__q .icon { transform: rotate(180deg); }
.faq__a { padding: 0 0 var(--s-5); max-width: var(--measure); }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--forest-on-dark); }
}

/* ======================================================================= */
/* 12. Kontak (forest ground) + kolofon                                    */
/* ======================================================================= */
.chapter.chapter--kontak { padding-top: 0; }
.kontak__band { background: var(--forest); padding: var(--pad-top) 0 var(--s-8); margin-bottom: var(--s-8); }
.kontak__band .chapter__head { margin-bottom: 0; }
.kontak__band .lede { color: var(--paper); max-width: 46ch; }
.kontak__grid { row-gap: var(--s-7); }
@media (min-width: 861px) {
  .letter { grid-column: 1 / span 5; }
  .kontak__sheet { grid-column: 6 / -1; }
}
@media (min-width: 1100px) {
  .letter { grid-column: 1 / span 6; }
  .kontak__sheet { grid-column: 7 / -1; }
}
html.no-js .kontak__sheet { display: none; }

.kolofon {
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--ink-2);
}
.kolofon__h2 { font-size: 1.375rem; line-height: 1.2; color: var(--ink); margin-bottom: var(--s-5); }
.kolofon__grid { row-gap: var(--s-7); }
@media (min-width: 861px) {
  .kolofon__sources { grid-column: 1 / span 4; }
  .kolofon__key { grid-column: 5 / -1; }
}
@media (min-width: 1100px) {
  .kolofon__sources { grid-column: 1 / span 6; }
  .kolofon__key { grid-column: 8 / -1; }
}
.kolofon__edition { font-weight: 700; color: var(--ink); margin-bottom: var(--s-3); }
.kolofon__list { list-style: none; color: var(--ink-2); max-width: 70ch; }
.kolofon__list li + li { margin-top: var(--s-2); }
/* measured in the item's own (smaller) font size: about 62 characters a line */
.kolofon__list li { max-width: 62ch; }
.kolofon__h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--t-note);
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.status-key__list--small { border-top-color: var(--rule); }
.status-key__list--small li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); font-size: var(--t-label); }

.tailpiece {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: var(--s-9);
  overflow: visible;
}
/* The wipe is on the path, not the svg: a clip-path on the observed svg itself makes
   IntersectionObserver see zero visible area, so the draw never triggered. */
.tailpiece path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-opacity: 0.8;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  clip-path: inset(-4px 100% -4px 0);
  transition: clip-path 1400ms var(--ease-quiet);
}
.tailpiece.is-drawn path { clip-path: inset(-4px 0 -4px 0); }
html.no-js .tailpiece { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tailpiece path { transition: none; clip-path: none; }
}