/* ===================================================================
   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(30px, 5.5vw, 50px); line-height:1.12;
  letter-spacing:-.015em; margin:0 0 22px; max-width:20ch; margin-left:auto; margin-right:auto;
}
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;}
}

/* ===== THE COMIC =====
   Panels carry no words. Every balloon is a positioned HTML layer, which is what
   lets the two language versions share one set of drawings, and what keeps the
   dialogue selectable, searchable and readable by a screen reader. Balloon
   geometry is set in percentages and its type in container units, so one set of
   numbers holds from a phone to a wide desktop. */
.comic{max-width:1100px; margin:34px auto 0; padding:0 24px;}
.strip{display:grid; grid-template-columns:1fr 1fr; gap:20px;}

.panel{
  position:relative; margin:0; overflow:hidden;
  border:2px solid var(--ink); background:var(--paper-2);
  container-type:inline-size;
}
.panel.wide{grid-column:1 / -1;}
.panel img.panel-art{display:block; width:100%; height:auto;}

.bub{
  position:absolute; box-sizing:border-box;
  background:var(--paper); border:2px solid var(--ink); border-radius:18px;
  padding:7px 12px 8px;
  font-family:"Patrick Hand","Comic Sans MS",cursive;
  font-size:15px; line-height:1.22; color:var(--ink);
  text-wrap:balance;
}
@supports (font-size:1cqw){
  .bub{font-size:clamp(13px, 3.5cqw, 22px);}
  .panel.wide .bub{font-size:clamp(13px, 1.9cqw, 21px);}
}
.bub.cap{
  border-radius:2px; background:var(--paper);
  font-family:"JetBrains Mono",monospace; letter-spacing:-.01em;
  line-height:1.35;
}
@supports (font-size:1cqw){
  .bub.cap{font-size:clamp(10.5px, 2.6cqw, 15px);}
  .panel.wide .bub.cap{font-size:clamp(10.5px, 1.4cqw, 15px);}
}

/* Tails are two stacked triangles, the outer one the ink outline and the inner
   one the paper fill, offset along the edge by --tx. */
.bub[data-tail]::before,.bub[data-tail]::after{
  content:""; position:absolute; width:0; height:0; border-style:solid;
}
.bub[data-tail="dl"]::before{top:100%; left:var(--tx); border-width:19px 15px 0 0;
  border-color:var(--ink) transparent transparent transparent;}
.bub[data-tail="dl"]::after{top:calc(100% - 3px); left:calc(var(--tx) + 2px);
  border-width:15px 11px 0 0; border-color:var(--paper) transparent transparent transparent;}
.bub[data-tail="dr"]::before{top:100%; left:var(--tx); border-width:19px 0 0 15px;
  border-color:var(--ink) transparent transparent transparent;}
.bub[data-tail="dr"]::after{top:calc(100% - 3px); left:calc(var(--tx) - 2px);
  border-width:15px 0 0 11px; border-color:var(--paper) transparent transparent transparent;}
.bub[data-tail="ul"]::before{bottom:100%; left:var(--tx); border-width:0 15px 19px 0;
  border-color:transparent transparent var(--ink) transparent;}
.bub[data-tail="ul"]::after{bottom:calc(100% - 3px); left:calc(var(--tx) + 2px);
  border-width:0 11px 15px 0; border-color:transparent transparent var(--paper) transparent;}
.bub[data-tail="ur"]::before{bottom:100%; left:var(--tx); border-width:0 0 19px 15px;
  border-color:transparent transparent var(--ink) transparent;}
.bub[data-tail="ur"]::after{bottom:calc(100% - 3px); left:calc(var(--tx) - 2px);
  border-width:0 0 15px 11px; border-color:transparent transparent var(--paper) transparent;}

.closer{
  max-width:1100px; margin:30px auto 0; text-align:center;
  font-family:"Newsreader",Georgia,serif; font-style:italic;
  font-size:26px; line-height:1.35; color:var(--ink);
}

@media(max-width:820px){
  .comic{padding:0 14px;}
  .strip{grid-template-columns:1fr; gap:14px;}
  .closer{font-size:22px;}
}

/* A full width beat panel keeps its native art but shows a letterbox slice of
   it, so it sits at the same visual weight as a row of two rather than towering
   over the page. */
.panel img.panel-art.cropped{aspect-ratio:1440/620; object-fit:cover;}

/* Speaker labels. Three characters over twelve panels is more than a reader will
   track from clothing and a balloon tail, so each balloon says who is talking. */
.bub b{
  display:block; margin-bottom:2px;
  font-family:"JetBrains Mono",monospace; font-weight:400;
  font-size:.58em; letter-spacing:.15em; color:var(--ink-faint);
}
.bub[data-who="ai"]{border-radius:26px; border-style:double; border-width:4px;}

/* The day and time, in the corner of every panel, so the week is trackable
   without counting captions. */
.panel .when{
  position:absolute; right:0; bottom:0;
  padding:5px 9px 4px; background:var(--ink); color:var(--paper);
  font-family:"JetBrains Mono",monospace; letter-spacing:.13em;
  font-size:11px; line-height:1;
}
@supports (font-size:1cqw){
  .panel .when{font-size:clamp(9px, 2.1cqw, 13px);}
  .panel.wide .when{font-size:clamp(9px, 1.1cqw, 13px);}
}

/* The line up panel that opens the strip, and the labels on the two trails in
   the angle diagrams. */
.bub.name{
  border:none; background:none; padding:0; text-align:center;
  font-family:"Inter",sans-serif; line-height:1.35; color:var(--ink-soft);
}
.bub.name br{content:""; display:block; margin-top:3px;}
@supports (font-size:1cqw){
  .panel.wide .bub.name{font-size:clamp(10px, 1.35cqw, 16px);}
}
.bub.tag{
  border:none; background:none; padding:0; text-align:center;
  font-family:"JetBrains Mono",monospace; letter-spacing:.16em; color:var(--ink);
}
@supports (font-size:1cqw){
  .panel.wide .bub.tag{font-size:clamp(10px, 1.25cqw, 15px);}
}

/* A tag that names something inside a busy drawing gets a leader arrow, so it
   cannot be read as belonging to whatever else is nearby. */
.bub.tag[data-lead]{
  text-align:left; font-family:"Inter",sans-serif; letter-spacing:0;
  line-height:1.3; color:var(--ink);
  background:var(--paper); padding:3px 7px;
}
.bub.tag[data-lead="l"]::before{content:"\2190\00a0"; opacity:.7;}
.bub.tag[data-lead="u"]::before{content:"\2191\00a0"; opacity:.7;}
@supports (font-size:1cqw){
  .bub.tag[data-lead]{font-size:clamp(11px, 2.9cqw, 18px);}
  .panel.wide .bub.tag[data-lead]{font-size:clamp(11px, 1.5cqw, 18px);}
}

/* A readout: the number on a screen inside a panel. Bigger and heavier than a
   caption because in this comic the whole joke is one count going down by one. */
.bub.count{
  border-radius:2px; border-width:2px; background:var(--paper);
  font-family:"JetBrains Mono",monospace; letter-spacing:0; text-align:center;
  line-height:1.35; color:var(--ink); font-weight:500;
}
@supports (font-size:1cqw){
  .bub.count{font-size:clamp(11px, 3.1cqw, 20px);}
  .panel.wide .bub.count{font-size:clamp(11px, 1.7cqw, 20px);}
}
.bub.count s{text-decoration:line-through; opacity:.45;}

/* Text sitting inside a balloon the artist drew. No border and no background of
   its own: the balloon is already in the picture, tail and all, so this is only
   the lettering. Sized per balloon at build time, because Indonesian runs longer
   than English in the same drawn shape. */
.bub.in{
  border:none; background:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.2; color:var(--ink);
}