/* Public site (server-rendered: landing, Berita, 404). Loaded after app.css; tokens only (DESIGN.md):
   white canvas, hairline structure, single emerald accent, pill buttons, Outfit, rounded-xl cards,
   restrained shadows. Breakpoints: 560 / 640 / 860 (nav) / 1024 / 1100.
   Scope: ui.js injects this file into app pages that show the guest chrome (/verify), so every component class here is
   site-specific (.site-*, .hero-*, .mock-*, .news-*, .article-*, .feature-*, .nf-*) and never redefines an app.css class.
   Empty states use the shared .empty-state (+ .boxed). In-page anchors clear the sticky header through app.css
   html{scroll-padding-top}; no per-element scroll-margin. */

body.site{background:var(--canvas);color:var(--body)}
body.site ::selection{background:var(--primary-border);color:var(--ink)}
html.site-locked,html.site-locked body{overflow:hidden}
@media (prefers-reduced-motion:no-preference){html:has(body.site){scroll-behavior:smooth}}

.site-container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.site-main{display:block}
.page-top{padding-top:var(--s-lg);padding-bottom:var(--s-section)}
@media (min-width:1024px){.page-top{padding-top:var(--s-xl);padding-bottom:calc(var(--s-section) + var(--s-xl))}}

/* ---------- Typography ---------- */
.site-eyebrow{display:block;margin:0 0 var(--s-md);font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-text)}
.site-h1{margin:0;font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.site-h2{margin:0;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.site-lead{margin:var(--s-md) 0 0;max-width:640px;font-size:17px;line-height:1.6;color:var(--body)}
@media (min-width:640px){.site-h1{font-size:36px}}

/* ---------- Brand ---------- */
.site-brand{display:inline-flex;align-items:center;gap:var(--s-sm);flex:none;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);border-radius:var(--r-sm)}
.site-brand:hover{color:var(--ink);text-decoration:none}
.site-brand .logo-mark{width:32px;height:32px}
.site-drawer-head .site-brand .logo-mark{width:28px;height:28px}

/* ---------- Header (top-nav 64px) ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--canvas);border-bottom:1px solid var(--hairline)}
@supports (backdrop-filter:blur(8px)){
  .site-header{background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:saturate(180%) blur(12px)}
}
.site-header-inner{display:flex;align-items:center;gap:var(--s-base);height:var(--header-h)}
.site-nav{margin-left:var(--s-lg);min-width:0}
.site-nav ul{display:flex;align-items:center;gap:var(--s-xs);list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:36px;padding:var(--s-sm) var(--s-md);border-radius:var(--r-full);font-size:14px;font-weight:600;line-height:1.25;color:var(--body);white-space:nowrap;transition:background-color .15s,color .15s}
.site-nav a:hover{background:var(--surface-strong);color:var(--ink);text-decoration:none}
.site-nav a[aria-current]{background:var(--primary-tint);color:var(--primary-text)}
.site-header-actions{display:flex;align-items:center;gap:var(--s-sm);margin-left:auto;flex:none}
.btn.site-btn{min-height:40px;padding:var(--s-sm) var(--s-base);font-size:14px;letter-spacing:0}
.site-menu-btn{display:none;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:var(--r-full);background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:background-color .15s}
.site-menu-btn:hover,.site-menu-btn[aria-expanded="true"]{background:var(--surface-strong)}
.site-menu-btn svg{width:22px;height:22px}
@media (max-width:859.98px){
  .site-nav,.site-only-desktop{display:none}
  .site-menu-btn{display:inline-grid}
  .site-header-actions{gap:var(--s-xs)}
}
@media (max-width:359.98px){.site-cta-compact{display:none}}

/* ---------- Mobile drawer (site.js: focus trap, Esc, scroll lock) ---------- */
.site-drawer-bg{position:fixed;inset:0;z-index:65;display:flex;justify-content:flex-end;background:var(--overlay);animation:site-fade .15s ease-out}
.site-drawer-bg[hidden]{display:none}
.site-drawer{display:flex;flex-direction:column;width:min(340px,calc(100vw - 48px));height:100%;background:var(--canvas);box-shadow:var(--shadow-pop);animation:site-drawer-in .2s ease-out}
.site-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);height:var(--header-h);padding:0 var(--s-sm) 0 var(--s-base);border-bottom:1px solid var(--hairline);flex:none}
.site-drawer-head .site-brand{font-size:17px}
.site-drawer-head .site-menu-btn{display:inline-grid}
.site-drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-sm) var(--s-sm) var(--s-base)}
.site-drawer-group + .site-drawer-group{margin-top:var(--s-xs)}
.site-drawer-title{margin:var(--s-md) var(--s-md) var(--s-xs);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-drawer-group ul{list-style:none;margin:0;padding:0}
.site-drawer-link{display:flex;align-items:center;gap:var(--s-md);min-height:44px;padding:var(--s-sm) var(--s-md);border-radius:var(--r-md);font-size:15px;font-weight:600;color:var(--body)}
.site-drawer-link svg{width:20px;height:20px;color:var(--muted)}
.site-drawer-link:hover{background:var(--surface-strong);color:var(--ink);text-decoration:none}
.site-drawer-link[aria-current]{background:var(--primary-tint);color:var(--primary-text)}
.site-drawer-link[aria-current] svg{color:var(--primary-text)}
.site-drawer-foot{display:flex;flex-direction:column;gap:var(--s-sm);padding:var(--s-xs) var(--s-base) var(--s-base);border-top:1px solid var(--hairline);flex:none}
.site-drawer-foot .site-drawer-title{margin:var(--s-md) 0 var(--s-xs)}
@keyframes site-drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes site-fade{from{opacity:0}to{opacity:1}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--s-xxl) 0 var(--s-section);
  background:radial-gradient(900px 480px at 88% -8%,var(--primary-tint),transparent 70%),var(--canvas);border-bottom:1px solid var(--hairline-soft)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-xxl);align-items:center}
.hero-copy{min-width:0}
.hero-badge{display:inline-flex;align-items:center;gap:var(--s-sm);margin:0;padding:var(--s-xs) var(--s-md) var(--s-xs) var(--s-sm);border:1px solid var(--primary-border);border-radius:var(--r-full);background:var(--canvas);color:var(--primary-text);font-size:13px;font-weight:600;line-height:1.3}
.hero-badge svg{width:16px;height:16px;flex:none}
.hero-title{margin:var(--s-lg) 0 var(--s-base);max-width:15em;font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.hero-lead{margin:0 0 var(--s-xl);max-width:36em;font-size:17px;line-height:1.65;color:var(--body)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-md)}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-lg);list-style:none;margin:var(--s-xl) 0 0;padding:var(--s-lg) 0 0;border-top:1px solid var(--hairline)}
.hero-trust li{display:inline-flex;align-items:center;gap:var(--s-sm);font-size:13px;font-weight:500;color:var(--body)}
.hero-trust svg{width:18px;height:18px;color:var(--primary-text);flex:none}
@media (max-width:479.98px){.hero-actions .btn{flex:1 1 100%}}
@media (min-width:640px){.hero-title{font-size:40px}.hero-lead{font-size:18px}}
@media (min-width:1024px){
  .hero{padding:calc(var(--s-section) + var(--s-base)) 0 calc(var(--s-section) + var(--s-xl))}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-section)}
  .hero-title{font-size:44px}
}

/* Product illustration (decorative HTML/CSS) */
.hero-visual{position:relative;isolation:isolate;width:100%;max-width:560px;margin:0 auto;padding:var(--s-base) 0 0}
.hero-visual::before{content:"";position:absolute;inset:-32px;z-index:-1;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(closest-side,black 30%,transparent);mask-image:radial-gradient(closest-side,black 30%,transparent);opacity:.7}
.mock-doc{position:relative;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);overflow:hidden}
.mock-doc-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:var(--s-md) var(--s-base);border-bottom:1px solid var(--hairline);background:var(--surface-soft)}
.mock-file{display:inline-flex;align-items:center;gap:var(--s-sm);min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
.mock-file svg{color:var(--primary-text);flex:none}
.mock-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-status{display:inline-flex;align-items:center;gap:var(--s-xs);flex:none;padding:var(--s-xs) var(--s-sm);border-radius:var(--r-full);background:var(--warning-50);color:var(--warning-700);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}
.mock-page{display:flex;flex-direction:column;gap:var(--s-sm);padding:var(--s-xl) var(--s-lg) var(--s-lg)}
.mock-line{display:block;height:8px;border-radius:var(--r-full);background:var(--surface-strong)}
.mock-line.strong{height:12px;margin-bottom:var(--s-xs);background:var(--hairline)}
.mock-gap{display:block;height:6px}
.mock-line.w-40{width:40%}.mock-line.w-60{width:60%}.mock-line.w-70{width:70%}.mock-line.w-85{width:85%}.mock-line.w-90{width:90%}.mock-line.w-95{width:95%}
.mock-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-base);margin-top:var(--s-lg)}
.mock-field{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-xs);min-height:88px;padding:var(--s-sm);border-radius:var(--r-md);color:var(--primary-text);text-align:center}
.mock-field.is-signed{border:1.5px solid var(--primary-border);background:var(--primary-tint)}
.mock-field.is-pending{border:1.5px dashed var(--primary);background:var(--canvas)}
.mock-ink{width:min(130px,100%);height:40px;color:var(--primary-strong)}
.mock-field-label{font-size:12px;font-weight:600;line-height:1.2}
.mock-field.is-signed .mock-field-label{color:var(--muted)}
.mock-stamp{position:absolute;top:-11px;right:10px;display:inline-flex;align-items:center;gap:var(--s-xs);padding:var(--s-xxs) var(--s-sm);border:1px solid var(--success-100);border-radius:var(--r-full);background:var(--success-50);color:var(--success-700);font-size:12px;font-weight:600;line-height:1.3}
@media (prefers-reduced-motion:no-preference){.mock-field.is-pending{animation:mock-pulse 2.4s ease-in-out infinite}}
@keyframes mock-pulse{0%,100%{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 0 6px var(--primary-glow)}}
.mock-initials{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-top:var(--s-xs)}
.mock-chip{display:inline-flex;align-items:center;gap:var(--s-xs);padding:var(--s-xs) var(--s-sm);border:1px solid var(--primary-border);border-radius:var(--r-full);background:var(--primary-tint);color:var(--primary-text);font-size:12px;font-weight:600;line-height:1.2}
.mock-seal{position:absolute;top:104px;right:var(--s-sm);z-index:2;display:flex;align-items:center;gap:var(--s-sm);padding:var(--s-sm) var(--s-md) var(--s-sm) var(--s-sm);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);box-shadow:var(--shadow-pop)}
.mock-seal-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--success-50);color:var(--success-700);flex:none}
.mock-seal b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.mock-seal small{display:block;font-size:12px;line-height:1.3;color:var(--muted)}
.mock-flow{position:relative;z-index:2;margin:-28px var(--s-md) 0;padding:var(--s-base);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);box-shadow:var(--shadow-pop)}
.mock-flow-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm)}
.mock-flow-head b{font-size:13px;font-weight:600;color:var(--ink)}
.mock-flow-head .num{font-size:12px;font-weight:600;color:var(--primary-text)}
.mock-progress{display:block;height:6px;margin:var(--s-sm) 0 var(--s-md);border-radius:var(--r-full);background:var(--surface-strong);overflow:hidden}
.mock-progress span{display:block;width:66.6%;height:100%;border-radius:inherit;background:var(--primary)}
.mock-steps{display:flex;flex-direction:column;gap:var(--s-sm);list-style:none;margin:0;padding:0}
.mock-steps li{display:flex;align-items:center;gap:var(--s-sm)}
.mock-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary-tint);color:var(--primary-text);font-size:12px;font-weight:700;flex:none}
.mock-step-text{flex:1;min-width:0}
.mock-step-text b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.mock-step-text small{display:block;font-size:12px;line-height:1.3;color:var(--muted)}
.mock-steps .is-done svg{color:var(--success-700);flex:none}
.mock-steps .is-wait svg{color:var(--warning-700);flex:none}
.mock-steps .is-wait .mock-avatar{background:var(--surface-strong);color:var(--muted)}
@media (min-width:640px){
  .hero-visual{padding:var(--s-base) 0 calc(var(--s-section) + var(--s-xl))}
  .mock-doc{margin-left:var(--s-xxl)}
  .mock-seal{top:76px;right:-12px}
  .mock-flow{position:absolute;left:0;bottom:0;width:290px;margin:0}
}
@media (min-width:1024px){.hero-visual{margin-right:0}}

/* ---------- Sections ---------- */
.site-section{padding:var(--s-section) 0}
.site-section.is-soft{background:var(--surface-soft);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.site-section.is-soft + .site-section.is-soft{border-top:0}
@media (min-width:1024px){.site-section{padding:calc(var(--s-section) + var(--s-xl)) 0}}
.section-head{max-width:720px;margin-bottom:var(--s-xxl)}
.section-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.is-center .site-lead{margin-left:auto;margin-right:auto}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-base);flex-wrap:wrap;margin-bottom:var(--s-xl)}
.section-head-row .section-head{margin-bottom:0}

/* Feature grid: 12 cards → 1 / 2 / 3 / 4 columns (no orphans). */
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-base);list-style:none;margin:0;padding:0}
.feature-card{padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas);box-shadow:var(--shadow-xs)}
.feature-card h3,.security-item h3,.site-step h3{margin:var(--s-base) 0 var(--s-sm);font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.feature-card p,.security-item p,.site-step p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.feature-icon{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--primary-border);border-radius:var(--r-md);background:var(--primary-tint);color:var(--primary-text);flex:none}
.feature-icon svg{width:22px;height:22px}
@media (min-width:560px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-lg)}}

/* Security */
.security-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-xl)}
.security-intro .section-head{margin-bottom:var(--s-lg)}
.security-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-base);list-style:none;margin:0;padding:0}
.security-item{display:flex;align-items:flex-start;gap:var(--s-base);padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas)}
.security-item h3{margin-top:var(--s-xxs)}
@media (min-width:640px){.security-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .security-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-section);align-items:start}
  .security-intro{position:sticky;top:calc(var(--header-h) + var(--s-xl))}
}

/* How it works */
.site-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-base);list-style:none;margin:0;padding:0;counter-reset:none}
.site-step{position:relative;padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas)}
.site-step-top{display:flex;align-items:center;justify-content:space-between}
.site-step-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary-strong);color:var(--on-primary);font-size:14px;font-weight:700}
.site-step-icon{display:inline-flex;color:var(--muted-soft)}
.site-step-icon svg{width:22px;height:22px}
.site-step h3{margin-top:var(--s-lg)}
@media (min-width:860px){
  .site-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-lg)}
  .site-step:not(:last-child)::after{content:"";position:absolute;top:40px;right:-25px;width:26px;border-top:1px dashed var(--border-strong)}
}

/* Final call to action */
.cta-band{display:flex;flex-direction:column;gap:var(--s-lg);padding:var(--s-xl) var(--s-lg);border:1px solid var(--primary-border);border-radius:var(--r-2xl);background:var(--primary-tint)}
.cta-copy p{margin:var(--s-sm) 0 0;max-width:560px;font-size:16px;line-height:1.6;color:var(--body)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-md);flex:none}
@media (max-width:479.98px){.cta-actions .btn{flex:1 1 100%}}
@media (min-width:860px){.cta-band{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-xxl)}}

/* ---------- News cards ---------- */
.news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-lg)}
@media (min-width:640px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1023.98px){.news-grid>.news-card:last-child:nth-child(odd){grid-column:1/-1}}
.news-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--canvas);box-shadow:var(--shadow-xs);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.news-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.news-card:has(.news-card-title a:focus-visible){border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.news-card-media{position:relative;aspect-ratio:16/9;background:var(--surface-strong);overflow:hidden}
.news-card-media img,.cover-fill,.article-cover-media img{position:absolute;inset:0;width:100%;height:100%}
.news-card-media img,.article-cover-media img{object-fit:cover}
.news-card-media img{transition:transform .4s ease}
@media (prefers-reduced-motion:no-preference){.news-card:hover .news-card-media img{transform:scale(1.03)}}
.news-card-media.is-empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary-tint),var(--surface-soft));color:var(--primary)}
.news-card-media.is-empty svg{opacity:.55}
.news-card-body{display:flex;flex-direction:column;gap:var(--s-sm);flex:1;padding:var(--s-lg)}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm);margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.news-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--muted-soft)}
.news-tag{display:inline-flex;align-items:center;padding:var(--s-xxs) var(--s-sm);border-radius:var(--r-full);background:var(--primary-tint);color:var(--primary-text);font-size:12px;font-weight:600;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-card-title{margin:0;font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.news-card-title a{color:var(--ink);font-weight:inherit}
.news-card-title a:hover{color:var(--primary-text);text-decoration:none}
.news-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.news-card-excerpt{margin:0;font-size:14px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.news-credit{position:relative;z-index:2;margin:auto 0 0;padding-top:var(--s-sm);font-size:12px;line-height:1.4;color:var(--muted)}
.news-credit a,.article-credit a{color:inherit;font-weight:500;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.news-credit a:hover,.article-credit a:hover{color:var(--ink);text-decoration-color:currentColor}
.news-featured{margin-bottom:var(--s-lg)}
@media (min-width:900px){
  .news-card.is-featured{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .news-card.is-featured .news-card-media{aspect-ratio:auto;min-height:340px}
  .news-card.is-featured .news-card-body{justify-content:center;gap:var(--s-md);padding:var(--s-xl)}
  .news-card.is-featured .news-card-title{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
  .news-card.is-featured .news-card-excerpt{font-size:15px;-webkit-line-clamp:4;line-clamp:4}
  .news-card.is-featured .news-credit{margin-top:var(--s-sm)}
}

/* List page */
.list-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-base);flex-wrap:wrap;margin:var(--s-sm) 0 var(--s-lg)}
.list-header > div{min-width:0}
.site-breadcrumb{margin:0 0 var(--s-base)}
.site-chip-nav{margin:0 0 var(--s-xl)}
.site-chips{display:flex;flex-wrap:wrap;gap:var(--s-sm);list-style:none;margin:0;padding:0}
.site-chip{display:inline-flex;align-items:center;gap:var(--s-xs);min-height:36px;max-width:100%;padding:var(--s-xs) var(--s-md);border:1px solid var(--hairline);border-radius:var(--r-full);background:var(--canvas);color:var(--body);font-size:13px;font-weight:600;line-height:1.2;transition:background-color .15s,border-color .15s,color .15s}
.site-chip svg{width:14px;height:14px;color:var(--muted);flex:none}
.site-chip:hover{border-color:var(--border-strong);background:var(--surface-soft);color:var(--ink);text-decoration:none}
.site-chip[aria-current]{border-color:var(--primary-border);background:var(--primary-tint);color:var(--primary-text)}
.site-chip-count{font-size:12px;font-weight:500;color:var(--muted)}
.site-chip[aria-current] .site-chip-count{color:var(--primary-text)}

/* Pagination */
.site-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-xl);padding-top:var(--s-lg);border-top:1px solid var(--hairline)}
.site-pager .btn[aria-disabled="true"]{pointer-events:none}
.site-pager-list{display:none;align-items:center;gap:var(--s-xs);list-style:none;margin:0;padding:0}
.site-pager-num{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 var(--s-sm);border-radius:var(--r-full);font-size:14px;font-weight:600;color:var(--body);font-variant-numeric:tabular-nums}
a.site-pager-num:hover{background:var(--surface-strong);color:var(--ink);text-decoration:none}
.site-pager-num[aria-current]{background:var(--primary-strong);color:var(--on-primary)}
.site-pager-gap{display:inline-grid;place-items:center;width:24px;color:var(--muted)}
.site-pager-status{margin:0;font-size:13px;color:var(--muted)}
@media (min-width:640px){.site-pager-list{display:flex}.site-pager-status{display:none}}


/* ---------- Article ---------- */
.article-header{max-width:880px;margin:var(--s-sm) 0 var(--s-xl)}
.article-lead{margin:var(--s-base) 0 0;max-width:720px;font-size:18px;line-height:1.6;color:var(--body)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-lg);list-style:none;margin:var(--s-lg) 0 0;padding:0;font-size:14px;color:var(--muted)}
.article-meta li{display:inline-flex;align-items:center;gap:var(--s-sm)}
.article-meta svg{width:16px;height:16px;color:var(--muted-soft);flex:none}
.article-cover{max-width:1040px;margin:0 0 var(--s-xxl)}
.article-cover-media{position:relative;aspect-ratio:16/9;border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--surface-strong);overflow:hidden}
.article-cover figcaption{margin-top:var(--s-sm)}
.article-credit{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}

/* Article typography (.prose) lives in css/prose.css (shared with the news editor preview). */
.article-footer{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-lg);max-width:720px;margin-top:var(--s-xxl);padding-top:var(--s-lg);border-top:1px solid var(--hairline)}
.article-tags,.article-share ul{display:flex;flex-wrap:wrap;gap:var(--s-sm);list-style:none;margin:0;padding:0}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md)}
.article-share-title{display:inline-flex;align-items:center;gap:var(--s-sm);margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.article-share-title svg{width:16px;height:16px;color:var(--muted)}
.related .news-grid{margin-top:0}

/* ---------- 404 ---------- */
.not-found{padding-top:var(--s-section)}
.not-found .site-h1{max-width:20em}
.not-found .hero-actions{margin-top:var(--s-xl)}
.nf-links{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-md);max-width:880px;list-style:none;margin:var(--s-xxl) 0 0;padding:0}
.nf-link{display:flex;align-items:center;gap:var(--s-base);height:100%;padding:var(--s-base);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);color:var(--body);transition:border-color .15s,box-shadow .15s}
.nf-link:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs);color:var(--body);text-decoration:none}
.nf-link > span:nth-child(2){flex:1;min-width:0}
.nf-link b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.nf-link small{display:block;font-size:13px;color:var(--muted)}
.nf-link > svg:last-child{color:var(--muted-soft);flex:none}
@media (min-width:640px){.nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Footer (footer-light) ---------- */
.site-footer{padding:var(--s-xxl) 0 var(--s-lg);border-top:1px solid var(--hairline);background:var(--canvas);font-size:13px}
.site-footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-xl) var(--s-lg)}
.site-footer-brand{grid-column:1/-1}
.site-footer-brand p{margin:var(--s-base) 0 0;max-width:340px;font-size:14px;line-height:1.6;color:var(--muted)}
.site-footer-title{margin:0 0 var(--s-md);font-size:13px;font-weight:600;color:var(--ink)}
.site-footer-col ul{display:flex;flex-direction:column;gap:var(--s-md);list-style:none;margin:0;padding:0}
.site-footer-col a{font-size:14px;font-weight:500;color:var(--muted)}
.site-footer-col a:hover{color:var(--ink)}
.site-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);flex-wrap:wrap;margin-top:var(--s-xl);padding-top:var(--s-lg);border-top:1px solid var(--hairline);color:var(--muted)}
.site-footer-bottom p{margin:0}
.site-footer-meta{display:inline-flex;align-items:center;gap:var(--s-sm)}
.site-footer-meta svg{color:var(--muted-soft)}
@media (min-width:640px){.site-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .site-footer{padding:var(--s-section) 0 var(--s-xl)}
  .site-footer-grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
  .site-footer-brand{grid-column:auto}
}