/* Epithre long-form / article layer. Loads AFTER about.css (chrome + tokens).
   Full-width 3-zone layout: left TOC rail | readable prose | right meta/related rail.
   Fills the page width without long unreadable lines. */
:root{ --read:720px; --artw:1280px; }

main.article{padding-bottom:72px}

/* full-bleed article header band */
.art-hero{position:relative;isolation:isolate;background:var(--band);border-bottom:1px solid var(--rule-soft);overflow:hidden}
.art-hero::before{content:"";position:absolute;z-index:-1;top:-30px;right:-20px;width:380px;height:380px;background:url(/img/research-batik.webp) center/contain no-repeat;opacity:.18;-webkit-mask-image:radial-gradient(circle at 72% 34%,#000 0%,transparent 66%);mask-image:radial-gradient(circle at 72% 34%,#000 0%,transparent 66%);pointer-events:none}
.art-hero.has-media::before{left:-60px;right:auto;top:-50px;width:420px;height:420px;-webkit-mask-image:radial-gradient(circle at 30% 34%,#000 0%,transparent 64%);mask-image:radial-gradient(circle at 30% 34%,#000 0%,transparent 64%)}
.art-hero .inner{max-width:var(--artw);margin:0 auto;padding:46px 40px 40px}
.art-hero .back{font-size:13px;font-weight:500;color:var(--soga);border-bottom:1px solid transparent;padding-bottom:1px}
.art-hero .back:hover{border-bottom-color:var(--soga)}
.art-hero .eyebrow{display:block;margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soga)}
.art-hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.018em;margin:14px 0 0;color:var(--ink);max-width:20ch}
.art-hero .byline{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:16px 0 0;font-size:14px;color:var(--ink-faint)}

/* hero with a side media panel (research / whatis) */
.art-hero.has-media .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.art-hero .hero-media{position:relative;margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;border:1.5px solid rgba(224,190,120,.72);box-shadow:0 18px 44px -26px rgba(0,0,0,.5);background:var(--warm-dark)}
.art-hero .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.art-hero .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(122,78,45,.12),rgba(22,15,10,.42))}
.art-hero .hero-media.contain{display:flex;align-items:center;justify-content:center;background:var(--bone)}
.art-hero .hero-media.contain::after{display:none}
.art-hero .hero-media.contain img{width:72%;height:auto;object-fit:contain;position:relative;z-index:1}
.art-hero .hero-media .tick{position:absolute;width:13px;height:13px;border:1.5px solid var(--gold);opacity:.9;z-index:2}
.art-hero .hero-media .tick.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.art-hero .hero-media .tick.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.art-hero .hero-media .tick.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.art-hero .hero-media .tick.br{bottom:9px;right:9px;border-left:0;border-top:0}
@media (max-width:760px){.art-hero.has-media .inner{grid-template-columns:1fr;gap:28px}}

/* 3-zone body grid */
.art-body{max-width:var(--artw);margin:0 auto;padding:48px 40px 0;display:grid;grid-template-columns:200px minmax(0,1fr) 236px;gap:48px;align-items:start}
.art-main{min-width:0}

/* rails (sticky, with their own scroll so a long rail is never cut off) */
.rail{position:sticky;top:82px;max-height:calc(100dvh - 104px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;font-size:14px}
.rail .label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--soga);margin-bottom:12px}
.rail+.rail{margin-top:0}
.rail section+section{margin-top:30px}
.toc-list{list-style:none;margin:0;padding:0;border-left:2px solid var(--gold)}
.toc-list a{display:block;padding:7px 0 7px 16px;color:var(--ink-faint);line-height:1.35;border-left:2px solid transparent;margin-left:-2px}
.toc-list a:hover,.toc-list a.active{color:var(--ink);border-left-color:var(--soga)}
.meta-list{display:flex;flex-direction:column;gap:12px}
.meta-list .row .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.meta-list .row .v{font-size:15px;color:var(--ink);margin-top:2px}
.share{display:flex;gap:14px;flex-wrap:wrap}
.share a,.share button{font-family:inherit;font-size:13px;color:var(--soga);background:none;border:0;border-bottom:1px solid var(--rule);padding:0 0 1px;cursor:pointer}
.share a:hover,.share button:hover{color:var(--soga-deep);border-bottom-color:var(--soga)}
.related{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.related a{display:block;color:var(--ink)}
.related a .rt{font-size:14.5px;font-weight:500;line-height:1.3}
.related a .rk{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soga);margin-bottom:3px}
.related a:hover .rt{color:var(--soga-deep)}

/* prose (width is controlled by its grid column; lines stay readable) */
.prose{font-size:18.5px;line-height:1.75;color:var(--ink-soft);max-width:var(--read)}
.prose>*+*{margin-top:22px}
.prose>p:first-of-type{font-size:21px;line-height:1.62;color:var(--ink)}
.prose h2{font-size:clamp(24px,2.6vw,30px);font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-top:50px;scroll-margin-top:84px}
.prose h3{font-size:20px;font-weight:600;color:var(--ink);margin-top:34px}
.prose a{color:var(--soga-deep);border-bottom:1px solid rgba(122,78,45,.4);padding-bottom:1px;transition:border-color .15s}
.prose a:hover{border-bottom-color:var(--soga-deep)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}

.prose ul,.prose ol{padding-left:2px;margin-left:0;list-style:none;max-width:var(--read)}
.prose li{position:relative;padding-left:28px}
.prose li+li{margin-top:10px}
.prose ul>li::before{content:"";position:absolute;left:5px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.prose ol{counter-reset:li}
.prose ol>li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:.02em;font-size:13px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

.prose blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);color:var(--ink);font-size:20px;line-height:1.6;max-width:var(--read)}
.prose blockquote p{margin:0}

/* media + data may use MORE width than the text measure (fills the column, feels generous) */
.prose figure{margin:32px 0}
.prose figure img{width:100%;height:auto;border-radius:8px;display:block;border:1px solid var(--rule-soft)}
.prose figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-faint);max-width:var(--read)}
.prose :not(pre)>code{font-family:'IBM Plex Mono',Menlo,monospace;font-size:.86em;background:rgba(31,24,18,.06);border:1px solid var(--rule-soft);border-radius:4px;padding:1px 5px}
.prose pre{margin:30px 0;background:var(--warm-dark);color:#ECE4D4;border-radius:10px;padding:20px 22px;overflow-x:auto;font-size:14px;line-height:1.6;-webkit-overflow-scrolling:touch}
.prose pre code{font-family:'IBM Plex Mono',Menlo,monospace;background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:30px 0;border:1px solid var(--rule-soft);border-radius:10px}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule)}
.prose thead th{border-bottom:1.5px solid var(--ink);font-weight:600;color:var(--ink);background:rgba(31,24,18,.03)}
.prose tbody td{color:var(--ink-soft)}
.prose tbody tr:last-child td{border-bottom:0}
.prose .note{margin:30px 0;padding:18px 20px;background:var(--card);border:1px solid var(--rule);border-radius:10px;font-size:16px;color:var(--ink-soft)}
.prose .note b{color:var(--soga-deep)}
.prose sup a{border-bottom:0;color:var(--navy);font-weight:600;font-size:.75em}

/* robust anchor offset for sticky header (h2/h3/footnotes/citations/any id) */
.article [id]{scroll-margin-top:90px}
.prose a:focus-visible,.toc-list a:focus-visible,.art-hero .back:focus-visible,.refs a:focus-visible,.related a:focus-visible,.share a:focus-visible,.share button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}

/* definition list (whatis explainers) */
.prose dl{margin:26px 0;max-width:var(--read)}
.prose dl>div+div{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.prose dt{font-weight:600;color:var(--ink);font-size:17px}
.prose dd{margin:5px 0 0;color:var(--ink-soft)}

/* step blocks (whatis / how-to) */
.prose ol.steps{list-style:none;counter-reset:st;margin:28px 0;padding:0;max-width:var(--read)}
.prose ol.steps>li{position:relative;padding:0 0 0 50px;margin-top:22px}
.prose ol.steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-3px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--bone);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.prose ol.steps>li .step-title{display:block;margin:0 0 5px;font-size:18px;font-weight:600;color:var(--ink)}

.refs{margin:42px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);max-width:var(--read)}
.refs ol{margin:0;padding-left:20px}
.refs li{font-size:14px;color:var(--ink-faint);margin-top:8px}
.report-foot{margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
.report-foot .byline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-faint)}
.report-foot .byline a{color:var(--soga);font-weight:500}

/* below ~1180px the 3-zone gets cramped, so collapse to a single readable column */
@media (max-width:1180px){
  .art-body{grid-template-columns:1fr;gap:0;max-width:820px}
  .rail{position:static;top:auto;max-height:none;overflow:visible;margin-bottom:34px}
  .rail-r{margin-top:42px;margin-bottom:0;padding-top:28px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:28px 44px}
  .rail-r section{flex:1 1 200px;margin-top:0}
  .rail-r .meta-list{flex-direction:row;flex-wrap:wrap;gap:16px 28px}
  .toc-list{display:flex;flex-wrap:wrap;border-left:0;gap:4px 20px}
  .toc-list a{padding:4px 0;border-left:0;margin-left:0}
  .prose,.prose ul,.prose ol,.prose blockquote,.refs,.prose figcaption{max-width:none}
}
@media (max-width:560px){
  .art-hero .inner,.art-body{padding-left:24px;padding-right:24px}
  .art-hero::before{width:200px;height:200px;opacity:.1}
  .prose{font-size:17.5px}
}

/* ============================================================
   ARTICLE_FULL_WIDTH_V1 — article pages fill the viewport instead of sitting in
   a 1280px block (which left 320px of dead margin each side at 1920, 640px at 2560).

   Index pages keep the 1280px block. They have no .art-body, which is what
   :has() keys on — the hero class cannot tell them apart, since
   .art-hero.has-media is used by BOTH the research index and 4 articles.

   Gated to >=1181px so it cannot fight the existing 1180px single-column
   collapse: that rule sets .art-body{max-width:820px} at the same specificity
   and would otherwise lose to these on source order alone. The gate also keeps
   the wider type ramp off phones, where 18.5px is already right.
   ============================================================ */
@media (min-width:1181px){

  body:has(.art-body) .art-hero .inner{max-width:none}

  /* MEASURE — 720px/18.5px read at 78ch, which looked like a thin ribbon between
     two wide empty rails once the page went full-bleed. Widening the column ALONE
     does not work: at 18.5px, 900px is 101ch (measured by walking real line boxes,
     not estimated). Width and type have to scale together, so the ramp below goes
     with it: 900px @ 21px lands at ~87ch, and the whole prose scale moves +13.5%
     so nothing ends up smaller than the body text it sits next to. */
  /* Type: a FLAT 16px above the collapse, well below the original 18.5.
     21px, 19px and 18px all read as too large; 16px is the size asked for, so
     the ramp is gone — there is nothing left to ramp UP to. Below 1181px the original 18.5/17.5 still applies; the
     0.5px step at the boundary is imperceptible.
     WIDTH IS LOCKED TO SIZE at a fixed measure — 87ch lands at 18.5px/800,
     19px/820, 19.5px/845, 21px/900 (all measured). Holding the column at 820 while the type
     drops to 16px trades ~103ch: the deliberate, requested cost of "wide column
     AND small type", which cannot both be had at 87ch. 87ch at 16px would mean a
     695px column — narrower than the 720 this started from. */
  :root{
    --read:820px;
    --pf:16px;
  }
  .prose{font-size:var(--pf)}
  .prose>p:first-of-type{font-size:calc(var(--pf)*1.135)}
  .prose blockquote{font-size:calc(var(--pf)*1.081)}
  .prose h3{font-size:calc(var(--pf)*1.081)}
  .prose dt{font-size:calc(var(--pf)*0.919)}
  .prose ol.steps>li .step-title{font-size:calc(var(--pf)*0.973)}
  /* These two are the only ratios that need a floor: at --pf:16px the plain
     ratios give note 13.8px and figcaption 11.7px, which is past readable for
     secondary text. max() keeps the ratio while the type is large and clamps it
     when it is not. */
  .prose .note{font-size:max(15px, calc(var(--pf)*0.865))}
  .prose figcaption{font-size:max(12.5px, calc(var(--pf)*0.730))}

  .art-body,
  .art-body.no-toc{
    max-width:none;
    grid-template-columns:minmax(200px,1fr) minmax(0,var(--read)) minmax(236px,1fr);
  }
  /* .no-toc has no left rail, so its prose needs placing into the middle column
     explicitly; the meta rail then auto-flows into column 3 and the empty first
     column keeps the same rhythm as the 3-zone articles. */
  .art-body.no-toc>.art-main{grid-column:2}

  /* The has-media hero splits 1.15fr/.85fr, so at full width its media panel
     balloons 489x367 -> 761x571 and becomes the loudest thing on the page, with
     a dead gap between headline and image. Mirroring the body grid instead keeps
     the panel at its natural size, lands it directly over the meta rail, and
     sits the headline across the reading columns. */
  body:has(.art-body) .art-hero.has-media .inner{
    grid-template-columns:minmax(200px,1fr) minmax(0,var(--read)) minmax(236px,1fr);
    gap:48px;
  }
  body:has(.art-body) .art-hero.has-media .hero-text{grid-column:1 / span 2}
  body:has(.art-body) .art-hero.has-media .hero-media{grid-column:3}

  /* CHROME — header/footer are a 1120px (--maxw) centred island, so on a
     full-bleed article the wordmark floated at x=430 while the article started
     at x=40 and the page read as broken. Match the article's 40px inset so the
     wordmark, the TOC and the footer all share one left edge.
     Scoped to article pages: index pages keep their 1280px block, and widening
     their chrome would only trade a 70px misalignment for a 320px one. */
  body:has(.art-body) header.site .bar,
  body:has(.art-body) footer.site .bar,
  body:has(.art-body) footer.site .f-base{
    max-width:none;
    padding-left:40px;
    padding-right:40px;
  }
}

/* ============================================================
   RESEARCH_I18N_V1 — the EN/ID chip in the nav.
   Copied verbatim from the blog's global.css so the two sections' navs stay one
   voice; /research loads about.css + long.css and never sees global.css, so the
   rule has to exist here too. Tokens carry light/dark — no dark override needed.
   ============================================================ */
.lang-switch{font-size:12px;font-weight:600;color:var(--ink-faint);border:1px solid var(--rule);border-radius:5px;padding:3px 9px;letter-spacing:.04em}
.lang-switch:hover{color:var(--soga);border-color:var(--soga)}