/* RichIndonesia — site styles. No inline styles anywhere, so the Content-Security-Policy can stay strict.
   Layout concept: an indigo masthead with a woven band, then a paper column; stories set like a broadsheet
   that grew up on a phone. */
@font-face{font-family:"Bricolage Grotesque";font-weight:400;font-display:swap;src:url(fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:600;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#f7f8fb; --card:#ffffff; --ink:#151829; --muted:#5a5f73; --rule:#dfe2ea;
  --night:#141834; --night-ink:#f4f5fa; --gold:#e6a457; --soga:#9c4f12; --nila:#2b3a9e; --flag:#b3261e;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px; --col:700px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0f1222; --card:#161a30; --ink:#e9eaf3; --muted:#a2a7bd; --rule:#2a2f4a; --night:#0a0d1c; --soga:#e6a457; --nila:#9aa7ff; --flag:#ff8a80; color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--serif)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#141834;padding:8px 14px;font:600 14px var(--display);z-index:10}
.skip:focus{left:12px;top:12px}
.preview-bar{margin:0;background:var(--flag);color:var(--paper);font:400 13px/1.4 var(--display);padding:8px 16px;text-align:center}
.preview-bar b{font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* masthead */
.mast{background:var(--night);color:var(--night-ink)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:auto}
.word{font:800 clamp(26px,4vw,34px)/1 var(--display);letter-spacing:-.02em}
.word span{font-weight:400;color:var(--gold)}
.tagline{font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#b9bdd6;text-align:right;max-width:260px}
.weave{height:12px;background-color:var(--night);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 6 0l6 6-6 6z' fill='%23e6a457'/%3E%3Cpath d='M12 6l6-6 6 6-6 6z' fill='%239c4f12'/%3E%3Cpath d='M4 6l2-2 2 2-2 2z' fill='%23141834'/%3E%3C/svg%3E");background-size:24px 12px}
.nav{background:var(--card);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;gap:4px 18px;flex-wrap:wrap;padding-block:10px;align-items:center}
.nav a{font:600 14px/1.2 var(--display);text-decoration:none;color:var(--muted);padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.nav .date{margin-left:auto;font:400 12px var(--mono);color:var(--muted);letter-spacing:.04em}

/* labels */
.kicker{font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soga);margin:0 0 8px}
.kicker a{text-decoration:none}
.meta{font:400 13px/1.5 var(--mono);color:var(--muted)}
.sample{display:inline-block;font:600 11px var(--mono);letter-spacing:.08em;background:var(--flag);color:var(--paper);padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:middle}

/* home */
main{display:block}
.lead{display:grid;grid-template-columns:7fr 5fr;gap:28px;padding-block:32px;border-bottom:1px solid var(--rule)}
.lead h2{font:800 clamp(30px,4.2vw,48px)/1.04 var(--display);letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.lead .dek{font:400 21px/1.45 var(--serif);color:var(--muted);margin:0 0 14px}
.lead .copy{min-width:0;align-self:center}
.thumb{aspect-ratio:16/9;overflow:hidden;background:var(--rule);border-radius:4px}
.thumb img{width:100%;height:100%;object-fit:cover}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);margin:36px 0 18px;padding-bottom:6px}
.section-h h2{font:800 22px/1.2 var(--display);margin:0;letter-spacing:-.01em}
.section-h a{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.card{min-width:0;display:flex;flex-direction:column;gap:10px}
.card h3{font:800 21px/1.18 var(--display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.card p{margin:0}
.card .sum{color:var(--muted);font-size:16px;line-height:1.5}
.empty{padding:56px 0;text-align:center;color:var(--muted)}
.empty h2{font:800 28px/1.2 var(--display);color:var(--ink);margin:0 0 8px}
.promise{margin:44px 0 0;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--gold);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start}
.promise h2{font:600 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soga);margin:4px 0 0}
.promise p{margin:0;font-size:17px}
.promise a{color:var(--nila)}

/* article */
.article{padding-block:28px 48px}
.article header{max-width:var(--col);margin:0 auto}
.article h1{font:800 clamp(32px,5vw,52px)/1.04 var(--display);letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.article .dek{font:italic 400 clamp(19px,2.4vw,23px)/1.42 var(--serif);color:var(--muted);margin:0 0 18px}
.byline{border-block:1px solid var(--rule);padding:10px 0;margin-bottom:22px}
.byline b{color:var(--ink);font-weight:600}
.hero{max-width:980px;margin:0 auto 26px}
.hero img{border-radius:4px;width:100%}
.hero figcaption{max-width:var(--col);margin:8px auto 0;font:400 15px/1.45 var(--serif);color:var(--muted)}
.credit{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
.col{max-width:var(--col);margin:0 auto}
.kp{border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);padding:14px 0 6px;margin:0 0 26px}
.kp h2,.box h2{font:600 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soga);margin:0 0 10px}
.kp ul{margin:0;padding-left:20px}
.kp li{margin:0 0 8px;font-size:17px;line-height:1.45}
.body p{margin:0 0 1.05em;font-size:19px;line-height:1.68}
.body h2{font:800 25px/1.2 var(--display);margin:1.5em 0 .5em;letter-spacing:-.01em}
.dl{font:800 .82em var(--display);letter-spacing:.04em}
.pq{margin:30px 0;padding:0}
.pq p{font:800 clamp(24px,3vw,30px)/1.18 var(--display);margin:0 0 10px;letter-spacing:-.01em}
.pq p::before{content:"\201C";color:var(--soga)}
.pq p::after{content:"\201D";color:var(--soga)}
.pq cite{font:400 12px var(--mono);font-style:normal;color:var(--muted)}
.box{border-top:1px solid var(--rule);padding:18px 0 6px;margin-top:10px}
.box p{margin:0 0 10px;font-size:17px;line-height:1.55}
.box dl{margin:0;display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:8px 18px}
.box dt{font:italic 600 17px var(--serif)}
.box dd{margin:0;font-size:17px;color:var(--muted)}
.ask p{font:600 21px/1.4 var(--serif)}
.src{font:400 13px/1.55 var(--mono)!important;color:var(--muted);word-break:break-word}
.src a,.box a{color:var(--nila)}
.corr li{margin:0 0 8px;font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tags span{font:400 12px var(--mono);border:1px solid var(--rule);border-radius:99px;padding:3px 11px;color:var(--muted)}
.share{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:18px 0 0;font:600 13px var(--display)}
.share span{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.share a{color:var(--nila)}
.related{max-width:var(--wrap);margin:40px auto 0}

/* plain pages */
.page{max-width:var(--col);margin:0 auto;padding-block:32px 56px}
.page h1{font:800 clamp(30px,4.5vw,44px)/1.08 var(--display);letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.page h2{font:800 23px/1.25 var(--display);margin:1.6em 0 .5em}
.page p,.page li{font-size:18px;line-height:1.65}
.page a{color:var(--nila)}
.list{list-style:none;padding:0;margin:0}
.list li{border-bottom:1px solid var(--rule);padding:16px 0}
.list h2{font:800 22px/1.2 var(--display);margin:0 0 6px}
.list h2 a{text-decoration:none}

/* footer */
.foot{background:var(--night);color:#c6c9de;margin-top:56px}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding-block:32px}
.foot h2{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px;font:400 15px var(--display)}
.foot a{color:#f4f5fa;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot p{margin:0 0 8px;font-size:15px}
.foot .fine{grid-column:1/-1;border-top:1px solid #2a2f4a;padding-top:14px;font:400 12px var(--mono);color:#9095b3}

@media (max-width:860px){
  .lead{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .tagline{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .grid{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .promise{grid-template-columns:1fr}
  .nav .date{display:none}
  .body p{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.mast,.nav,.foot,.share,.related{display:none}body{background:#fff;color:#000}}