/* ===================================================================
   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);}
}