@import url("tokens.css");

/* ==========================================================================
   NCAC / MPPN — base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .u-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  color: var(--navy);
}

h1 { font-size: clamp(2rem, 5.2vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.65rem, 3.6vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.25rem, 2.2vw, var(--fs-xl)); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visually hidden until focused. clip-path, not left:-9999px — the old
   trick creates a 10,000px-wide layout box that every overflow probe then
   reports as a failure, drowning the real offenders. */
.skip {
  position: absolute; top: 0; left: 0; z-index: 999;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--navy); color: #fff; padding: var(--s-3) var(--s-4);
  font-family: var(--font-ui); font-size: var(--fs-sm);
}
.skip:focus {
  width: auto; height: auto; overflow: visible;
  clip-path: none; top: var(--s-4); left: var(--s-4);
}

/* --- i18n -----------------------------------------------------------------
   Scope the HIDE under the active-language class. Never force a display
   VALUE on the shown language — component rules out-specify a bare rule. */
html.lang-bm .t-en { display: none !important; }
html.lang-en .t-bm { display: none !important; }

/* --- layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.wrap-text { width: min(100% - 2.5rem, var(--container-text)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap { width: min(100% - 4rem, var(--container)); } }

.section { padding-block: clamp(3.5rem, 8vw, var(--s-9)); }
.section--tint { background: var(--bg-alt); }
.section--invert { background: var(--navy); color: rgba(255,255,255,.86); }
.section--invert h2, .section--invert h3 { color: #fff; }
/* :not(.btn) matters — .section--invert a (0,1,1) out-specifies .btn (0,1,0),
   so without it a white .btn--onDark gets white text on a white face. */
.section--invert a:not(.btn) { color: #fff; }
.section--invert .btn { color: var(--btn-fg); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0 0 var(--s-3);
}
.section--invert .eyebrow { color: var(--tint-300); }

.lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-muted); }
.section--invert .lede { color: rgba(255,255,255,.8); }

.section-head { max-width: 46rem; margin-bottom: var(--s-6); }
.section-head--split {
  max-width: none; display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: end; justify-content: space-between;
}
.section-head--split > div { max-width: 40rem; }

/* --- buttons --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  line-height: 1; letter-spacing: .01em;
  padding: 0.95rem 1.4rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); }
.btn--ghost:hover { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--onDark { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--onDarkGhost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); }
.btn--onDarkGhost:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-more {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; display: inline-flex; align-items: center; gap: .45rem;
}
.link-more::after { content: "→"; transition: transform .18s var(--ease); }
.link-more:hover::after { transform: translateX(4px); }

/* --- photo slot -----------------------------------------------------------
   Deliberate, labelled placeholder. The CI manual supplied ZERO photography;
   these are photo-shaped so the layout is right when real images land. */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(155deg, var(--tint-300) 0%, var(--navy) 78%);
  border-radius: var(--radius);
  display: grid; place-items: center;
  min-height: 14rem;
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: auto var(--s-4) var(--s-3) auto;
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.ph img.ph-mark { width: 38%; max-width: 150px; opacity: .28; }
.ph--tall { min-height: 26rem; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

/* .header-top removed 2026-08-17: the navy strip carrying the full
   "Badan penasihat kepada Menteri..." line read as too loud above the
   lockup. The relationship to KPDN is stated in the hero eyebrow and the
   footer, where it belongs. */
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-block: var(--s-3);
}
.header-bar > .nav { min-width: 0; }

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* The lockup is ~3:1, so its height drives a lot of horizontal width.
   At 1280 the header was 76px over; the logo, the nav gap and the language
   buttons each give some of that back. Measured, not guessed. */
.brand img { height: 44px; width: auto; }
@media (min-width: 84rem) { .brand img { height: 56px; } }

.lang-toggle { display: flex; gap: 1px; background: var(--rule); border-radius: var(--radius); overflow: hidden; }
.lang-toggle button {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  padding: .45rem .55rem; border: 0; background: #fff; color: var(--grey-500); cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* --- nav ------------------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 68rem) { .nav { display: block; } }

.nav > ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
  display: block; padding: .7rem .5rem;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--navy); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
@media (min-width: 84rem) {
  .nav > ul > li > a { padding-inline: .72rem; font-size: var(--fs-sm); }
}
.nav > ul > li > a:hover,
.nav > ul > li[aria-expanded="true"] > a { border-bottom-color: var(--navy); }

.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 20rem; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--s-4);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease);
}
.nav li:hover > .mega, .nav li:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.mega a {
  display: block; padding: .5rem .6rem; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: var(--fs-sm); text-decoration: none;
  color: var(--navy);
}
.mega a:hover { background: var(--grey-100); }

.burger {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--navy); transition: transform .2s var(--ease), opacity .2s var(--ease); }
@media (min-width: 68rem) { .burger { display: none; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 24rem);
  background: #fff; z-index: 200; padding: var(--s-5);
  transform: translateX(100%); transition: transform .28s var(--ease);
  overflow-y: auto; box-shadow: var(--shadow-md);
}
.drawer.is-open { transform: none; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-bottom: 1px solid var(--rule); }
.drawer a {
  display: block; padding: .85rem .2rem;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base);
  color: var(--navy); text-decoration: none;
}
.drawer ul ul a { padding-left: var(--s-4); font-weight: 500; font-size: var(--fs-sm); color: var(--grey-600); }
.drawer-close { position: absolute; top: var(--s-4); right: var(--s-4); background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--navy); line-height: 1; }
.scrim {
  position: fixed; inset: 0; background: rgba(24,47,87,.42); z-index: 150;
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 88% -10%, rgba(162,181,221,.30), transparent 62%),
    linear-gradient(180deg, var(--grey-100), transparent 55%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid; gap: var(--s-6);
  padding-block: clamp(2.5rem, 7vw, var(--s-9));
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: var(--s-8); align-items: center; }
}
.hero h1 { margin-bottom: var(--s-5); text-wrap: balance; }
.hero .lede { max-width: 34rem; margin-bottom: var(--s-6); }

.hero-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4); margin-top: var(--s-7);
  border-top: 1px solid var(--rule); padding-top: var(--s-5);
}
.hero-stat .n {
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem); color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-stat .l {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--grey-500); margin-top: .4rem; line-height: 1.3;
}

/* ==========================================================================
   The position ledger — the distinctive device.
   MPPN's product is Pandangan and Syor. They get a numbered rail, not a card.
   ========================================================================== */

.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.section--invert .ledger { border-top-color: rgba(255,255,255,.22); }

.ledger > li { border-bottom: 1px solid var(--rule); }
.section--invert .ledger > li { border-bottom-color: rgba(255,255,255,.22); }

.ledger-item {
  display: grid; gap: var(--s-3);
  grid-template-columns: 3.25rem 1fr;
  padding-block: var(--s-5);
  text-decoration: none; color: inherit;
  transition: background-color .18s var(--ease);
}
@media (min-width: 56rem) {
  .ledger-item { grid-template-columns: 4.5rem 1fr 11rem; gap: var(--s-5); align-items: start; }
}
.ledger-item:hover { background: rgba(24,47,87,.035); }
.section--invert .ledger-item:hover { background: rgba(255,255,255,.06); }

.ledger-n {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; color: var(--grey-600);   /* tint-400 was 2.59:1 on white */
  padding-top: .25rem;
}
.ledger-kind {
  display: block;
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-500);
  margin-bottom: .5rem;
}
.section--invert .ledger-kind { color: var(--tint-300); }
.ledger-title {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); line-height: 1.3; color: var(--navy);
  margin: 0 0 .5rem;
}
.section--invert .ledger-title { color: #fff; }
.ledger-sum { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.section--invert .ledger-sum { color: rgba(255,255,255,.72); }
.ledger-meta {
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}
.section--invert .ledger-meta { color: var(--tint-300); }

/* ==========================================================================
   Issue cards — 4 categories, navy ramp, drawn SVG icons (never emoji)
   ========================================================================== */

.issue-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .issue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .issue-grid { grid-template-columns: repeat(4, 1fr); } }

.issue-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); background: #fff;
  border: 1px solid var(--rule); border-top: 3px solid var(--cat, var(--navy));
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.issue-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.issue-card .ico { width: 34px; height: 34px; color: var(--cat, var(--navy)); }
.issue-card h3 { font-size: var(--fs-lg); margin: 0; }
.issue-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.issue-card .count {
  margin-top: auto; padding-top: var(--s-3);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  color: var(--grey-500); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Consumer Pulse — data, not decoration
   ========================================================================== */

.pulse { display: grid; gap: var(--s-6); }
@media (min-width: 58rem) { .pulse { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); align-items: center; } }

.pulse-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.pulse-row { display: grid; gap: .4rem; }
.pulse-label {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
}
.pulse-label .pct { font-variant-numeric: tabular-nums; color: #fff; }
.pulse-track { height: 10px; background: rgba(255,255,255,.16); border-radius: 99px; overflow: hidden; }
.pulse-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--tint-300), #fff);
  transition: width 1.1s var(--ease);
}
.pulse-note {
  font-family: var(--font-ui); font-size: var(--fs-xs);
  color: var(--tint-300); font-variant-numeric: tabular-nums;
  margin-top: var(--s-4);
}

/* ==========================================================================
   Generic cards / lists
   ========================================================================== */

.card-grid { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.news-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; color: inherit;
}
.news-card .ph { border-radius: var(--radius); }
.news-card .kind {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-600);  /* was 2.59:1 */
}
.news-card h3 { font-size: var(--fs-lg); margin: 0; }
.news-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.news-card time {
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}

.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pub-item {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.pub-item:hover { border-color: var(--navy); }
.pub-item .ico { width: 26px; height: 26px; color: var(--tint-400); }
.pub-item .t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--navy); }
.pub-item .m { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-500); font-variant-numeric: tabular-nums; }
.pub-item .dl { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--navy); white-space: nowrap; }
@media (max-width: 40rem) {
  .pub-item { grid-template-columns: 2.5rem 1fr; }
  .pub-item .dl { grid-column: 2; }
}

/* --- knowledge hub strip --------------------------------------------------- */
.hub-grid { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .hub-grid { grid-template-columns: repeat(6, 1fr); } }
.hub-tile {
  display: grid; gap: var(--s-2); place-items: center; text-align: center;
  padding: var(--s-5) var(--s-3); background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--navy);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.hub-tile:hover { border-color: var(--navy); transform: translateY(-2px); }
.hub-tile .ico { width: 28px; height: 28px; color: var(--tint-400); }

/* --- voice / newsletter ---------------------------------------------------- */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 58rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; } }

.quote-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.quote-strip li {
  padding: var(--s-4); background: rgba(255,255,255,.07);
  border-left: 3px solid var(--tint-300); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm); line-height: 1.55;
}
.quote-strip .who {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--tint-300);
}

.nl-form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.nl-form input[type="email"] {
  flex: 1 1 16rem; min-width: 0;
  font-family: var(--font-ui); font-size: var(--fs-sm);
  padding: .95rem 1rem; border: 1.5px solid var(--rule);
  border-radius: var(--radius); background: #fff; color: var(--ink);
}
.nl-form input[type="email"]:focus { border-color: var(--navy); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--navy); color: rgba(255,255,255,.78); font-size: var(--fs-sm); }
.footer-main { padding-block: var(--s-8) var(--s-6); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 72rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.site-footer img.f-logo { height: 60px; width: auto; margin-bottom: var(--s-4); }
.site-footer h4 {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  margin: 0 0 var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.6; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-family: var(--font-ui); font-size: var(--fs-xs);
  color: rgba(255,255,255,.6);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ==========================================================================
   Motion — fadeInUp reveals with stagger
   ========================================================================== */

/* Scoped under .js — set by the inline script in head.php. Without JS, or if
   IntersectionObserver never fires, every .reveal stays VISIBLE. An animation
   that fails must not be able to erase the page. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.page-hero { background: var(--navy); color: rgba(255,255,255,.85); }
.page-hero .wrap { padding-block: clamp(2.5rem, 6vw, var(--s-8)); }
.page-hero h1 { color: #fff; margin-bottom: var(--s-3); }
.page-hero .lede { color: rgba(255,255,255,.8); max-width: 46rem; }
.page-hero .eyebrow { color: var(--tint-300); }

.crumbs {
  font-family: var(--font-ui); font-size: var(--fs-xs);
  color: rgba(255,255,255,.62); margin-bottom: var(--s-4);
}
.crumbs a { color: rgba(255,255,255,.62); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { padding-inline: .4rem; }

/* --- two-column article layout with a sticky in-page nav ------------------ */
.doc { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) { .doc { grid-template-columns: 15rem 1fr; gap: var(--s-8); } }

.doc-nav { align-self: start; }
@media (min-width: 62rem) { .doc-nav { position: sticky; top: 7.5rem; } }
.doc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.doc-nav a {
  display: block; padding: .5rem .75rem; border-left: 2px solid var(--rule);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--grey-600); text-decoration: none;
}
.doc-nav a:hover { border-left-color: var(--navy); color: var(--navy); background: var(--grey-100); }

.doc-body > section { padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.doc-body > section:last-child { border-bottom: 0; margin-bottom: 0; }
.doc-body h2 { font-size: var(--fs-2xl); }
.doc-body ul, .doc-body ol { padding-left: 1.25rem; }
.doc-body li { margin-bottom: .5rem; }
.doc-body blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--navy); background: var(--grey-100);
  font-size: var(--fs-sm);
}
.doc-body blockquote cite {
  display: block; margin-top: var(--s-2); font-style: normal;
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-600);
}

/* --- filters -------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.chip {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  padding: .55rem .9rem; border: 1px solid var(--rule); border-radius: 99px;
  background: #fff; color: var(--grey-600); text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.searchbar { display: flex; gap: var(--s-2); margin-left: auto; }
.searchbar input {
  font-family: var(--font-ui); font-size: var(--fs-xs);
  padding: .55rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
  min-width: 12rem;
}
.searchbar input:focus { border-color: var(--navy); }

/* --- member grid ---------------------------------------------------------- */
.member-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .member-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .member-grid { grid-template-columns: repeat(4, 1fr); } }

.member { display: grid; gap: var(--s-3); }
.member .ph { aspect-ratio: 3 / 4; min-height: 0; }
.member .nm { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: var(--fs-base); }
.member .rl { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-600); }
.member .fx { font-size: var(--fs-xs); color: var(--grey-600); }

.chair {
  display: grid; gap: var(--s-5); align-items: center;
  padding: var(--s-6); background: var(--grey-100); border-radius: var(--radius);
  margin-bottom: var(--s-7);
}
@media (min-width: 52rem) { .chair { grid-template-columns: 16rem 1fr; gap: var(--s-7); } }
.chair .ph { aspect-ratio: 3 / 4; min-height: 0; }

/* --- forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); max-width: 40rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--navy);
}
.field .hint { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--grey-600); }
.field input, .field select, .field textarea {
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink);
  padding: .8rem .9rem; border: 1.5px solid var(--rule); border-radius: var(--radius);
  background: #fff; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: none; }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: 0 0 auto; }
.form-note { font-size: var(--fs-xs); color: var(--grey-600); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: var(--s-4) var(--s-5); border-radius: var(--radius);
  border-left: 3px solid var(--navy); background: var(--grey-100);
  font-size: var(--fs-sm); margin-bottom: var(--s-5);
}
.alert--ok { border-left-color: #1d7a4d; }
.alert--err { border-left-color: #b3261e; }

/* --- accordion (FAQ) ------------------------------------------------------ */
.acc { border-top: 1px solid var(--rule); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  color: var(--navy); display: flex; justify-content: space-between; gap: var(--s-4);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 400; color: var(--grey-500); }
.acc details[open] summary::after { content: "\2212"; }
.acc .acc-body { padding-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); }

/* --- empty state ---------------------------------------------------------- */
.empty {
  padding: var(--s-7) var(--s-5); text-align: center;
  border: 1px dashed var(--rule); border-radius: var(--radius);
  color: var(--grey-600); font-size: var(--fs-sm);
}

/* --- contact / map -------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 58rem) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); } }
.office { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); }
.office + .office { margin-top: var(--s-4); }
.office h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.office address { font-style: normal; font-size: var(--fs-sm); line-height: 1.7; }
.map-frame { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* --- sitemap page --------------------------------------------------------- */
.sitemap-cols { display: grid; gap: var(--s-6); }
@media (min-width: 46rem) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols h2 { font-size: var(--fs-lg); }
.sitemap-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sitemap-cols a { font-family: var(--font-ui); font-size: var(--fs-sm); text-decoration: none; }
.sitemap-cols a:hover { text-decoration: underline; }

/* --- real photography ------------------------------------------------------
   Distinct from .ph, which is the labelled placeholder. A .shot is an actual
   photograph and carries the site's single tonal treatment so the set reads
   as one system rather than four unrelated frames. */
.shot { display: block; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--grey-100); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
            filter: saturate(.88) contrast(1.04); }
.shot--tall { aspect-ratio: 4 / 5; }
@media (min-width: 62rem) { .shot--tall { aspect-ratio: 3 / 4; } }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--band { aspect-ratio: 21 / 8; margin-top: var(--s-6); }
@media (max-width: 46rem) { .shot--band { aspect-ratio: 16 / 9; } }

/* ==========================================================================
   Mobile tap targets
   The overflow probe said 0 at 390 while the audit found 18-47 links per page
   under 32px tall. Nothing was overflowing; the links were simply too small to
   hit. A gutter that measures correctly and a target you cannot press are
   different failures, and only one of them was being checked.
   ========================================================================== */
@media (max-width: 62rem) {
  .site-footer ul { gap: 0; }
  .site-footer ul a,
  .sitemap-cols a,
  .footer-bottom nav a {
    display: block;
    min-height: 44px;
    display: flex; align-items: center;
  }
  .site-footer ul a { border-bottom: 1px solid rgba(255,255,255,.10); }
  .site-footer ul li:last-child a { border-bottom: 0; }
  .sitemap-cols ul { gap: 0; }
  .sitemap-cols a { border-bottom: 1px solid var(--rule); }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .link-more { min-height: 44px; align-items: center; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .drawer a { min-height: 48px; display: flex; align-items: center; }
  .drawer ul ul a { min-height: 42px; }
  .pub-item .dl { display: inline-flex; align-items: center; min-height: 40px; }
  .header-top a, .cms-who a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* The honeypot used the same left:-9999px trick the skip link did, which the
   audit reports as a 177px box clipped into 1px. Same clip-path fix. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; left: auto;
}

/* ==========================================================================
   Image treatment derived from the CI
   The identity manual defines the lengkungan as "perisai perlindungan" — a
   protective shield — and the app icon as a soft-cornered square. Both are the
   client's own geometry, so the imagery can carry them instead of sitting in
   plain rectangles. Nothing here is invented decoration.
   ========================================================================== */

.shot--arc {
  position: relative;
  /* the crescent's sweep: one deep corner, one tight, on the diagonal */
  border-radius: 42% 8px 42% 8px / 30% 8px 30% 8px;
  overflow: hidden;
}
@media (min-width: 62rem) { .shot--arc { border-radius: 46% 10px 46% 10px / 32% 10px 32% 10px; } }

/* the orbit, redrawn as a ring behind the frame */
.shot-orbit { position: relative; }
/* No negative margin: it pulled the box 2% past the grid cell and left a 7px
   horizontal overflow on the homepage at every mobile width. The ring is inset
   instead, which costs nothing visually. */
.shot-orbit { padding: 4% 2% 2%; }
.shot-orbit::before {
  /* was inset -5%/-8%, which pushed the ring past the container and produced a
     real 18px horizontal overflow on the homepage at every mobile width. The
     ring now sits inside padding the container gives it. */
  content: ""; position: absolute; z-index: 0;
  inset: 0;
  border: 1.5px solid var(--tint-400);
  border-radius: 46% 10px 46% 10px / 32% 10px 32% 10px;
  opacity: .55; pointer-events: none;
}
.shot-orbit > .shot { position: relative; z-index: 1; }

/* a navy veil so a photograph sits in the palette rather than beside it */
.shot--veil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(24,47,87,0) 45%, rgba(24,47,87,.34) 100%);
}
.shot--band { border-radius: var(--radius-lg) var(--radius-lg) 42px var(--radius-lg); }

@media (max-width: 62rem) {
  /* tel: and mailto: inside <address> are inline, so min-height never applied
     to them. They are the two links a person on a phone is most likely to
     actually press. */
  .site-footer address a,
  .office address a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: .25rem;
  }
}