/* Base reset + element defaults */

*{ box-sizing:border-box; }
html{ background:var(--ink); scroll-behavior:auto; scrollbar-gutter:stable; }
/* ponytail bugfix (kept from source): the mega-menu's scroll-lock toggles
   documentElement's overflow (js/menu.js setScrollLock) — scrollbar-gutter:stable
   stops that from shifting the page sideways on open/close. */
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-body); font-weight:400; font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--ink); }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; font-stretch:var(--display-stretch); letter-spacing:-.025em; line-height:1.02; margin:0; }
a{ color:inherit; }
/* designed focus state everywhere (baseline judge: browser-default `auto 1px`) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
img{ max-width:100%; display:block; }
section{ position:relative; background:var(--ink); }
.edge{ padding-inline:var(--edge); }

.section-head{ padding-top:clamp(5rem, 3rem + 6vw, 9rem); }
.section-head h2{ font-size:var(--text-h2); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); line-height:.92; }
/* intro paragraph sits beside its h2 (same grid row, see .row-1 in layout.css),
   not stacked beneath it — no top margin, section-specific max-width below */
.section-head p{ color:var(--muted); max-width:38ch; margin:0; font-family:var(--font-copy); font-size:.95rem; line-height:1.55; }
/* intro under its heading (2026-10-12: headings and intros share one left edge) */
.section-head p.row-2{ margin-top:1.5rem; font-size:1.05rem; max-width:46ch; }
@media (min-width:768px){
  #harga .section-head p{ max-width:46ch; }
  /* the paired h2 shares its row with the col9/col10 aside (LAYOUT-STUDY's
     same-baseline pairing) — cap the heading's own wrap width well short of
     that column so a wrapped second line can't run into the aside's text;
     this only narrows where the text WRAPS, the col2/col4 left edge (what
     PLACEMENT-MAP's placement-check actually measures) is unchanged. */
  #harga .section-head h2{ max-width:20ch; }
}
/* mobile stack (no shared grid row below 768): restore the gap the same-row
   pairing doesn't need at desktop widths */
@media (max-width:767px){ .section-head p{ margin-top:1rem; max-width:52ch; font-size:.9rem; } }

[data-reveal]{ opacity:0; transform:translateY(16px); }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } }