/* ===================================================================
   The Nanggung Trap: classic paper, black ink
   (adapted from evanpurnama.com design system)
   =================================================================== */
:root{
  --paper:#f3efe4;
  --paper-2:#ece7d8;
  --ink:#171512;
  --ink-soft:#3a3630;
  --ink-faint:#6b655b;
  --line:#c9c2b0;
  --line-strong:#8f887a;
  --accent:#171512;
  --maxw:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{overflow-x:hidden; max-width:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17.5px;
  line-height:1.7;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.015) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.02) 0, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
.wrap-wide{max-width:920px;}

/* ===== TOP BAR ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(243,239,228,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{max-width:920px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.topbar-right{display:flex; align-items:center; gap:18px; flex:0 0 auto;}
.mark{
  font-family:"Newsreader",Georgia,serif; font-weight:700; font-size:22px;
  letter-spacing:.04em; color:var(--ink); text-decoration:none;
  border:1.5px solid var(--ink); border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.topbar-title{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 16px;
}
.back-link{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent; flex:0 0 auto;
}
.back-link:hover{border-color:var(--ink);}

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); background:var(--paper);
  border:1px solid var(--ink); border-radius:2px; padding:7px 12px;
  cursor:pointer; flex:0 0 auto; transition:transform .12s ease, box-shadow .12s ease;
}
.lang-toggle:hover{transform:translate(-1px,-1px); box-shadow:2px 2px 0 rgba(23,21,18,.2);}
.lang-toggle:active{transform:translate(0,0); box-shadow:none;}

/* ===== BILINGUAL CONTENT SWITCH ===== */
html[data-lang="id"] .lang-en{display:none;}
html[data-lang="en"] .lang-id{display:none;}
html[data-lang="id"] .lang-toggle .lang-id{display:inline;}
html[data-lang="id"] .lang-toggle .lang-en{display:none;}
html[data-lang="en"] .lang-toggle .lang-en{display:inline;}
html[data-lang="en"] .lang-toggle .lang-id{display:none;}

/* ===== ARTICLE HEADER ===== */
.article-header{padding:64px 32px 40px; max-width:920px; margin:0 auto; text-align:center;}
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 22px;
}
h1.title{
  font-family:"Newsreader",Georgia,serif; font-weight:600;
  font-size:clamp(28px, 4.6vw, 42px); line-height:1.16;
  letter-spacing:-.015em; margin:0 0 22px;
  /* 20ch was tuned for short titles and forced this one onto four lines with a
     one-word orphan on the last. A wider measure plus balance evens them out. */
  max-width:30ch; margin-left:auto; margin-right:auto;
  text-wrap:balance;
}
h1.title em{font-style:italic; font-weight:500;}
.subtitle{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:20px;
  color:var(--ink-soft); max-width:52ch; margin:0 auto 26px; line-height:1.5;
}
.byline{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.pub-date{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:6px 0 0;
}

/* ===== DISCLAIMER ===== */
.disclaimer{
  max-width:920px; margin:22px auto 0; padding:16px 32px;
  font-family:"Inter",sans-serif; font-size:13.5px; line-height:1.55;
  color:var(--ink-faint); text-align:left; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.disclaimer strong{color:var(--ink-soft); font-weight:600;}
.disclaimer p{margin:0 0 10px;}
.disclaimer p:last-child{margin-bottom:0;}

/* ===== HERO IMAGE ===== */
.hero-figure{max-width:920px; margin:0 auto 10px; padding:0 32px;}
.hero-figure .frame{
  position:relative; background:var(--paper-2); overflow:hidden;
}
.hero-figure .frame::after{
  content:""; position:absolute; inset:0; border:1px solid var(--ink);
  transform:translate(10px,10px); pointer-events:none;
}
.hero-figure img{
  position:relative; z-index:1; width:100%; display:block;
  filter:saturate(0) contrast(1.04); mix-blend-mode:multiply;
}
.hero-figure figcaption{
  margin-top:22px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
  border-top:1px solid var(--line); padding-top:12px; text-align:center;
}

/* ===== RULE ===== */
.rule{height:0; border-top:1px solid var(--line); margin:48px auto; max-width:920px;}
.rule.wrap{padding:0 32px;}

/* ===== TLDR BOX ===== */
.tldr{
  background:var(--paper-2); border-left:3px solid var(--ink);
  padding:28px 32px; margin:0 0 8px; max-width:var(--maxw);
}
.tldr-eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.tldr p{font-size:18px; line-height:1.65; margin:0; color:var(--ink);}
.tldr strong{font-weight:600;}

/* ===== ARTICLE BODY ===== */
article.body{max-width:var(--maxw); margin:0 auto; padding:44px 32px 0;}
.section{padding:0 0 8px;}
.section-num-head{display:flex; align-items:baseline; gap:16px; margin:0 0 26px;}
.section-num-head .num{
  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.12em;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:2px;
  padding:3px 8px; flex:0 0 auto;
}
.section-num-head h2{
  font-family:"Newsreader",Georgia,serif; font-weight:600;
  font-size:clamp(24px, 4vw, 30px); letter-spacing:-.01em; line-height:1.25; margin:0;
}
h3{
  font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:22px;
  margin:32px 0 14px; line-height:1.3;
}
article.body p{margin:0 0 20px; color:var(--ink);}
article.body p.lede{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:21px;
  color:var(--ink-soft); line-height:1.5; max-width:56ch;
}
article.body ul, article.body ol{margin:0 0 20px; padding-left:24px;}
article.body li{margin-bottom:10px; line-height:1.6;}
article.body strong{font-weight:600;}
article.body em{font-style:italic;}
article.body a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px;}
article.body a:hover{text-decoration-color:var(--ink);}

/* pull quote / claim callout */
.claim{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:22px; line-height:1.42;
  border-left:2px solid var(--ink); padding-left:22px; color:var(--ink); margin:30px 0;
}
.claim strong{font-weight:600; font-style:normal;}

/* numbered list cards (ciri-ciri, alasan, dsb) */
.numlist{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:0;}
.numlist li{
  position:relative; padding:18px 0 18px 40px; border-top:1px solid var(--line);
  line-height:1.6;
}
.numlist li:last-child{border-bottom:1px solid var(--line);}
.numlist li::before{
  content:counter(n); counter-increment:n;
  position:absolute; left:0; top:18px;
  font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:2px; padding:2px 6px;
}
.numlist{counter-reset:n;}
.numlist strong{display:block; margin-bottom:4px;}

/* image figure inline in article */
figure.inline-fig{margin:36px 0; max-width:100%;}
figure.inline-fig .frame{position:relative; background:var(--paper-2); overflow:hidden;}
figure.inline-fig .frame::after{
  content:""; position:absolute; inset:0; border:1px solid var(--ink);
  transform:translate(8px,8px); pointer-events:none;
}
figure.inline-fig img{
  position:relative; z-index:1; width:100%; display:block;
  filter:saturate(0) contrast(1.04); mix-blend-mode:multiply;
}
figure.inline-fig figcaption{
  margin-top:18px;
  font-family:"Newsreader",serif; font-style:italic; font-size:15px;
  color:var(--ink-faint); text-align:center;
}

/* fase pipeline cards */
.phases{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); margin:26px 0 30px;}
.phase{background:var(--paper); padding:22px 24px;}
.phase-tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
}
.phase h4{font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:19px; margin:0 0 8px;}
.phase p{margin:0; font-size:16px; color:var(--ink-soft);}

/* diagnostic checklist */
.checklist{display:flex; flex-direction:column; gap:0; margin:26px 0 30px;}
.check-item{border-top:1px solid var(--line); padding:18px 0; display:flex; gap:16px; align-items:flex-start;}
.check-item:last-child{border-bottom:1px solid var(--line);}
.check-n{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; flex:0 0 auto; margin-top:2px;
}
.check-item p{margin:0; font-size:16.5px; line-height:1.55;}
.check-item .verdict{color:var(--ink-faint); font-style:italic;}

/* two-col grid for "5 properti" etc */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:26px 0 30px;}
.grid2 .cell{background:var(--paper); padding:20px 22px;}
.grid2 .cell-n{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:8px;
}
.grid2 .cell p{margin:0; font-size:16px; line-height:1.5; color:var(--ink);}
.grid2 .cell strong{display:block; font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:18px; margin-bottom:6px;}

/* closing statement */
.closing{
  font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:clamp(22px,3vw,28px);
  line-height:1.42; margin:14px 0 30px; color:var(--ink);
}
.closing em{font-style:italic;}
.closing strong{font-weight:600;}

/* references */
.refs{max-width:var(--maxw); margin:0 auto; padding:0 32px 40px;}
.refs h2{
  font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:22px; margin:0 0 20px;
}
.refs ol{padding-left:22px; margin:0;}
.refs li{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:10px;}
.refs a{color:var(--ink-soft);}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--line); margin-top:20px; padding:34px 0;}
.footer-inner{max-width:920px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);}
.foot-mid{color:var(--ink-soft);}
.footer a{color:var(--ink-faint); text-decoration:none; border-bottom:1px solid var(--line);}
.footer a:hover{color:var(--ink); border-color:var(--ink);}

/* ===================================================================
   ADDITIONS FOR THIS ESSAY
   =================================================================== */

/* ===== TRANSCRIPT BLOCKS =====
   Two registers on purpose: machine output reads as machine output,
   human-drafted output reads as prose. */
.msg{
  margin:26px 0; padding:18px 22px;
  background:var(--paper-2); border-left:2px solid var(--line-strong);
}
.msg p{margin:0 0 12px; font-size:16px; line-height:1.6;}
.msg p:last-child{margin-bottom:0;}
.msg-tag{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; display:block;
}
.msg.bot{border-left-color:var(--ink-faint);}
.msg.bot p{
  font-family:"JetBrains Mono",monospace; font-size:14px; line-height:1.65;
  color:var(--ink-soft); letter-spacing:-.01em;
}
.msg.human{border-left-color:var(--ink);}
.msg.human p{color:var(--ink);}
.msg.human p:first-of-type{font-style:italic;}
.msg.human ul{margin:0; padding-left:20px;}
.msg.human li{font-size:16px; line-height:1.6; margin-bottom:10px;}
.msg.human li:last-child{margin-bottom:0;}
.msg code{
  font-family:"JetBrains Mono",monospace; font-size:.9em;
  background:rgba(23,21,18,.06); padding:1px 5px; border-radius:2px;
}

/* the issue-template sample in the setup section */
.template{
  margin:26px 0; padding:20px 24px; background:var(--paper-2);
  border:1px solid var(--line);
  font-family:"JetBrains Mono",monospace; font-size:13.5px; line-height:1.9;
  color:var(--ink-soft); white-space:pre-wrap;
}
.template b{color:var(--ink); font-weight:500;}

/* ===== PRINCIPLE CALLOUT ===== */
.principle{
  margin:30px 0; padding:20px 0 0; border-top:1px solid var(--line-strong);
}
.principle .p-tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:10px;
}
.principle p{
  font-family:"Newsreader",Georgia,serif; font-size:21px; line-height:1.45;
  font-style:italic; margin:0 0 14px; color:var(--ink);
}
.principle p:last-child{margin-bottom:0;}
.principle .p-body{
  font-family:"Inter",sans-serif; font-style:normal; font-size:17px; line-height:1.65;
  color:var(--ink-soft);
}

/* ===== A / B COMPARISON TABLE ===== */
.cmp{
  margin:30px 0; display:grid; grid-template-columns:1.15fr 1.3fr 1.3fr;
  gap:1px; background:var(--line); border:1px solid var(--line);
  font-size:15.5px; line-height:1.5;
}
.cmp > div{background:var(--paper); padding:14px 16px;}
.cmp .h{
  background:var(--paper-2);
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.cmp .h.b{color:var(--ink);}
.cmp .dim{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:16px;
  line-height:1.4; color:var(--ink-soft); background:var(--paper-2);
}
.cmp .dim span{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px;}
.cmp .a{color:var(--ink-soft);}
.cmp .b{color:var(--ink);}

/* ===== FOOTNOTE MARKERS ===== */
article.body sup{font-size:.68em; line-height:0; vertical-align:super;}
article.body sup a{
  text-decoration:none; color:var(--ink-faint);
  font-family:"JetBrains Mono",monospace; letter-spacing:.02em;
  padding:0 1px;
}
article.body sup a:hover{color:var(--ink); text-decoration:underline;}
.refs li:target{background:var(--paper-2); outline:6px solid var(--paper-2);}

/* ===== SHAPE HEADINGS (the "what good looks like" cases) ===== */
.shape-head{
  display:flex; align-items:baseline; gap:14px; margin:44px 0 16px;
  padding-top:26px; border-top:1px solid var(--line);
}
.shape-head .tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); flex:0 0 auto;
}
.shape-head h3{margin:0; font-size:23px;}
.section .shape-head:first-of-type{margin-top:34px;}

/* ===== READING TIME ===== */
.readtime{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:6px 0 0;
}
.readtime::before{content:"\00B7"; margin:0 8px 0 0; color:var(--line-strong);}

/* ===== TABLE OF CONTENTS ===== */
.toc{
  max-width:var(--maxw); margin:0 auto 8px; padding:24px 32px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.toc-eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.toc ol{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 32px;
}
.toc a{
  display:flex; gap:12px; align-items:baseline;
  padding:6px 0; text-decoration:none; color:var(--ink);
  font-size:16px; line-height:1.4; border-bottom:1px solid transparent;
}
.toc a:hover{color:var(--ink); border-bottom-color:var(--line-strong);}
.toc .toc-n{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-faint);
  flex:0 0 auto;
}

/* ===== SHAREABLE SECTION ANCHORS ===== */
a.num{
  text-decoration:none; transition:color .12s ease, border-color .12s ease;
}
a.num:hover{color:var(--ink); border-color:var(--ink);}
a.num::after{
  content:"\00A7"; margin-left:6px; opacity:0;
  transition:opacity .12s ease;
}
a.num:hover::after{opacity:.5;}

@media(max-width:640px){
  .toc{padding:20px;}
  .toc ol{grid-template-columns:1fr;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:760px){
  .cmp{grid-template-columns:1fr; border:none; background:none; gap:0;}
  .cmp .h{display:none;}
  .cmp > div{border:1px solid var(--line); border-bottom:none; padding:14px 16px;}
  .cmp .dim{border-top-width:1px; font-size:12.5px; color:var(--ink);}
  .cmp .a::before,.cmp .b::before{
    display:block; margin-bottom:5px;
    font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .cmp .a::before{content:attr(data-label);}
  .cmp .b::before{content:attr(data-label);}
  .cmp > div:last-child{border-bottom:1px solid var(--line);}
}

@media(max-width:640px){
  body{font-size:17px;}
  .topbar-inner{padding:0 20px;}
  .topbar-title{display:none;}
  .article-header{padding:44px 20px 30px;}
  h1.title{font-size:30px;}
  .subtitle{font-size:18px;}
  .hero-figure{padding:0 20px;}
  article.body{padding:36px 20px 0;}
  .tldr{padding:22px 20px;}
  .grid2{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column; gap:8px; padding:0 20px;}
  .refs{padding:0 20px 40px;}
  .msg{padding:16px 18px;}
  .template{padding:16px 18px; font-size:12.5px;}
  .principle p{font-size:19px;}
  .shape-head{flex-direction:column; gap:8px;}
  .topbar-right{gap:10px;}
  .lang-toggle{font-size:10px; padding:6px 9px;}
  .back-link{display:none;}
}

/* Medium-voice article (build_medium.py): unnumbered section heads, the customer
   chat quote, and asterisk definitions under a paragraph. */
.section > h2{
  font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:clamp(24px,3vw,30px);
  line-height:1.25; color:var(--ink); margin:0 0 22px; letter-spacing:-0.005em;
}
article.body blockquote{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14.5px; line-height:1.6;
  background:var(--paper-2); border-left:3px solid var(--ink); padding:14px 16px; margin:0 0 20px;
}
article.body blockquote p{margin:0; color:var(--ink);}
article.body p.note-def{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
  border-left:2px solid var(--line); padding-left:14px; margin:-6px 0 22px;
}
article.body p.note-def::before{content:"*"; margin-right:4px;}
.refs p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0;}