/* pages/insights.css */
/* Insights: the list (/insights) and each post (src/partials/article.html).
   Structure inspired by Stripe's blog, kept minimal and in Orbit's own language (Mingze
   2026-10-19): one 1080 px grid of four columns, no visible guides. On a post the author sits
   in column one; the title, date, text, figure cards and the callout share one left edge in
   columns two to four. Labels are the site's dot eyebrows (.ch-eyebrow); rows are divided by
   hairlines; the ice tint appears only as the wash at the top of the list and in the callout.
   Ujwal's figures arrive styled by class (t-head, ln-acc, f-loss …); the "figure vocabulary"
   block maps those classes onto the site's tokens. */

.bl-page{--grid:1080px;--in:16px;--fig-muted:#5d6269}
.bl{position:relative}
.bl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--grid);margin:0 auto}
.bl-grid > *{padding-inline:var(--in);min-width:0}

/* ---------- breadcrumb row ---------- */
.bl-crumbs{padding:28px 0 0;align-items:center}
.bl-crumbs nav{grid-column:1 / span 3;display:flex;gap:12px;margin:0;font-size:17px;font-weight:500;line-height:1.5}
.bl-crumbs nav a{color:var(--accent-2);text-decoration:none}
.bl-crumbs nav span{color:var(--rule)}
.bl-crumbs nav a:hover{color:var(--ink)}
.bl-out{grid-column:4;justify-self:end;font-size:15px;font-weight:500;color:var(--accent-2);text-decoration:none}
.bl-out:hover,.bl-link:hover{color:var(--ink)}
.bl-out i,.bl-link i{font-style:normal;margin-left:2px}

/* ---------- a post: title block ---------- */
.bl-head{padding:96px 0 0}
.bl-head > *{grid-column:2 / span 3}
.bl-head .ch-eyebrow{margin:0 0 22px}
.bl-h1{margin:0;font-family:var(--display);font-size:52px;font-weight:600;line-height:1.1;letter-spacing:-.027em;color:var(--ink);text-wrap:balance}
.ar-acc{color:var(--accent-2)}
.bl-head .bl-when{margin:28px 0 0}
.bl-when{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--muted)}

/* ---------- a post: author column + text ---------- */
.bl-body{padding:48px 0 0}
.bl-rail{grid-column:1}
.bl-rail-in{position:sticky;top:96px;display:grid;gap:36px}
/* key terms: links into the Glossary, beside the essay (at its end on phones) */
.bl-terms{display:grid;gap:8px;justify-items:start}
.bl-terms-h{margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bl-terms a{font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.bl-terms a:hover{color:var(--accent-2);border-color:var(--accent-2)}
.bl-terms-end{display:none}
.bl-author{display:flex;gap:14px;align-items:flex-start}
.bl-author img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--sunk)}
.bl-author span{display:grid;font-size:15px;line-height:1.55}
.bl-author a{color:var(--ink);font-weight:500;text-decoration:none}
.bl-author a:hover{color:var(--accent-2)}
.bl-author small{font-size:15px;color:var(--muted)}
.ar{grid-column:2 / span 3;font-size:18px;line-height:1.65;color:var(--ink-2)}
.ar > p{margin:0 0 1.35em;text-wrap:pretty}
.ar > p.ar-lede{font-size:21px;line-height:1.55;color:var(--ink)}
.ar h2{margin:72px 0 20px;font-size:32px;font-weight:500;line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ar h2 .ar-n{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;color:var(--accent-2)}
.ar strong{font-weight:600;color:var(--ink)}
.ar ul,.ar ol{margin:0 0 1.4em;padding-left:1.2em}
.ar li{margin:0 0 .6em}
.ar li::marker{color:var(--accent-2)}
.ar a{color:var(--accent-2)}

/* callouts: the one place the ice tint appears */
.ar-say{margin:40px 0;text-wrap:pretty;padding:30px 36px;border-radius:12px;background:#eef5f9;font-size:24px;line-height:1.38;letter-spacing:-.015em;color:var(--ink)}
.ar-say p{margin:0 0 .6em}
.ar-say p:last-child{margin:0}

/* figures: a white card on the column lines; the logo top right, the series note below */
.ar-fig{position:relative;margin:56px 0;padding:30px 32px 22px;border:1px solid var(--rule);border-radius:12px;background:#fff}
.ar-fig-head{padding-right:150px}
.ar-eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fig-muted)}
.ar-fig-title{text-wrap:pretty;margin:0 0 26px;font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.ar-fig-body{padding:4px 0}
.ar-fig-body svg{display:block;width:100%;height:auto}
.ar-fig-body svg.narrow{display:none}
.ar-fig-take{margin:22px 0 0;max-width:62ch;font-size:16px;line-height:1.5;color:var(--ink)}
.ar-fig-note{margin:10px 0 0;max-width:72ch;font-size:13px;line-height:1.5;color:var(--fig-muted)}
.ar-fig-foot{margin-top:20px;padding-top:12px;border-top:1px solid var(--rule)}
.ar-fig-foot .ar-eyebrow{margin:0;font-size:10px}
.ar-fig-logo{position:absolute;top:28px;right:32px;height:18px;width:auto}

/* the figure vocabulary (classes inside Ujwal's drawings) on the site's tokens */
:is(.ar-fig,.bl-cover) svg text{font-family:var(--sans);fill:var(--ink)}
:is(.ar-fig,.bl-cover) svg .t-head{font-size:19px;font-weight:500;fill:var(--ink)}
:is(.ar-fig,.bl-cover) svg .t-body{font-size:16px;fill:var(--ink-2)}
:is(.ar-fig,.bl-cover) svg .t-small{font-size:13px;fill:var(--fig-muted)}
:is(.ar-fig,.bl-cover) svg .t-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;fill:var(--fig-muted);text-transform:uppercase}
:is(.ar-fig,.bl-cover) svg .t-kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;fill:var(--accent-2);text-transform:uppercase}
:is(.ar-fig,.bl-cover) svg .t-num{font-family:var(--mono);font-size:16px;fill:var(--ink)}
:is(.ar-fig,.bl-cover) svg .t-acc{fill:var(--accent-2)}
:is(.ar-fig,.bl-cover) svg .t-loss{fill:var(--bad)}
:is(.ar-fig,.bl-cover) svg .t-gain{fill:var(--good)}
:is(.ar-fig,.bl-cover) svg .ln{stroke:var(--rule);stroke-width:1;fill:none}
:is(.ar-fig,.bl-cover) svg .ln-ink{stroke:var(--ink);stroke-width:1.5;fill:none}
:is(.ar-fig,.bl-cover) svg .ln-acc{stroke:var(--accent-2);stroke-width:1.5;fill:none}
:is(.ar-fig,.bl-cover) svg .ln-dash{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;fill:none}
:is(.ar-fig,.bl-cover) svg .box{fill:#fff;stroke:var(--rule);stroke-width:1}
:is(.ar-fig,.bl-cover) svg .box-tint{fill:#f4f8fa;stroke:none}
:is(.ar-fig,.bl-cover) svg .box-acc{fill:#fff;stroke:var(--accent-2);stroke-width:1.5}
:is(.ar-fig,.bl-cover) svg .f-d1{fill:var(--data-1)}
:is(.ar-fig,.bl-cover) svg .f-d2{fill:var(--data-2)}
:is(.ar-fig,.bl-cover) svg .f-d3{fill:var(--data-3)}
:is(.ar-fig,.bl-cover) svg .f-loss{fill:var(--loss-fill)}
:is(.ar-fig,.bl-cover) svg .f-gain{fill:var(--gain-fill)}
:is(.ar-fig,.bl-cover) svg .f-sunk{fill:var(--sunk)}
:is(.ar-fig,.bl-cover) svg .dot-acc{fill:var(--accent-2)}
:is(.ar-fig,.bl-cover) svg .dot-ink{fill:var(--ink)}

/* ---------- a post: the end (next issue, book a map, share) ---------- */
.bl-end{margin-top:88px;padding:56px 0 120px;border-top:1px solid var(--rule);align-items:start}
.bl-end-label{grid-column:1;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.bl-next{grid-column:2 / span 2;display:grid;gap:8px;color:inherit;text-decoration:none}
.bl-next small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.bl-next b{font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.bl-next span{font-size:16px;line-height:1.55;color:var(--muted)}
.bl-next em{font-style:normal;font-size:15px;font-weight:500;color:var(--accent-2)}
.bl-next:hover b{color:var(--accent-2)}
.bl-end-col{grid-column:4;display:grid;gap:28px}
.bl-end-col > div p{margin:0 0 6px;font-size:15px;line-height:1.55;color:var(--muted)}
.bl-end-col .bl-end-h{margin-bottom:4px;font-size:16px;font-weight:500;color:var(--ink)}
.bl-link{display:inline-block;margin:6px 20px 0 0;font-size:15px;font-weight:500;color:var(--accent-2);text-decoration:none}

/* ---------- the list ---------- */
/* the hub's header: the site's framed ice panel (dotted corner marks), the newest post's card
   overlapping its lower edge */
.bl-hub{position:relative;margin:6px clamp(12px,1.4vw,24px) 0;padding:104px 0 152px;border-radius:14px;background:#eef5f9}
.bl-cm{position:absolute;width:24px;height:24px;pointer-events:none;--d:radial-gradient(circle,rgba(56,115,145,.5) 1.1px,transparent 1.7px);--s:6px 6px}
.bl-cm.tl{top:14px;left:14px;background:var(--d) 0 0/var(--s) repeat-x,var(--d) 0 0/var(--s) repeat-y}
.bl-cm.tr{top:14px;right:14px;background:var(--d) 0 0/var(--s) repeat-x,var(--d) 100% 0/var(--s) repeat-y}
.bl-cm.bl{bottom:14px;left:14px;background:var(--d) 0 100%/var(--s) repeat-x,var(--d) 0 0/var(--s) repeat-y}
.bl-cm.br{bottom:14px;right:14px;background:var(--d) 0 100%/var(--s) repeat-x,var(--d) 100% 0/var(--s) repeat-y}
.bl-hub-in{align-items:end;row-gap:0}
.bl-hub-in .ch-eyebrow{grid-column:1 / -1;margin:0 0 24px}
.bl-hub-h1{grid-column:1 / span 3;margin:0;font-family:var(--display);font-size:60px;font-weight:600;line-height:1.06;letter-spacing:-.027em;color:var(--ink);text-wrap:balance}
.bl-hub-h1 span{color:var(--accent-2)}
.bl-hub-lede{grid-column:1 / span 2;margin:24px 0 0;font-size:18px;line-height:1.55;color:var(--muted)}
.bl-hub-in-link{grid-column:4;grid-row:3;justify-self:end;display:grid;place-items:center;width:44px;height:44px;padding:0;margin-right:8px;border-radius:10px;color:var(--ink);transition:color .2s var(--ease),background-color .2s var(--ease)}
.bl-hub-in-link:hover{color:var(--accent-2);background:#fff}
.bl-feature-wrap{margin-top:-104px;position:relative;padding-bottom:72px}
.bl-feature{grid-column:1 / -1;margin-inline:var(--in);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:40px 24px;border-radius:14px;background:#fff;box-shadow:0 30px 60px -30px rgba(23,25,28,.22),0 0 0 1px rgba(23,25,28,.05)}
.bl-feature-text{padding:8px 32px 0 16px}
.bl-feature-wrap > .bl-feature{padding-inline:24px}
.bl-feature .bl-title{font-size:46px;line-height:1.1;letter-spacing:-.027em;margin:14px 0 28px}
.bl-feature-when{margin-top:20px}
.bl-feature .bl-sum{margin:16px 0 18px}
.bl-feature .bl-cover{align-self:center}
.bl-cat.ch-eyebrow{margin:0}
.bl-cat.ch-eyebrow i{background:var(--accent-2)}
.bl-title{margin:14px 0 0;font-size:30px;font-weight:500;line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.bl-title a{color:inherit;text-decoration:none}
.bl-title a:hover{color:var(--accent-2)}
.bl-sum{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--muted)}
/* the topic filter: always shown; "All" lists the newest post as the feature, a topic lists every match */
.bl-filters{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-top:36px}
.bl-list:not([data-f="All"]){padding-top:24px}
/* with a topic chosen there is no feature card to overlap the panel, so the panel closes up */
.bl:has(.bl-list:not([data-f="All"])) .bl-hub{padding-bottom:72px}
.bl-filters button span{margin-left:4px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.bl-filters button[aria-pressed="true"] span{color:var(--ink-muted)}
.bl-list[data-f="All"] > .bl-row:first-child{display:none}
.bl-row[hidden],[data-feature][hidden]{display:none}
.bl-filters button{padding:7px 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.bl-filters button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.bl-filters button:hover{border-color:var(--ink)}
.bl-list{list-style:none;margin:0;padding:0 0 120px}
.bl-row > article{padding:56px 0 64px;row-gap:20px;background:linear-gradient(var(--rule),var(--rule)) var(--in) 0 / calc(100% - 2 * var(--in)) 1px no-repeat}
.bl-row-meta{padding-top:3px}
.bl-row-head{grid-column:1 / span 3}
.bl-row-meta{grid-column:4;grid-row:1;display:grid;gap:16px;align-content:start}
.bl-row-body{grid-column:1 / span 2;grid-row:2}
.bl-row .bl-cover{grid-column:3 / span 2;grid-row:2;margin:8px var(--in) 0;align-self:start}
.bl-cover{display:block;padding:20px 22px;border:1px solid var(--rule);border-radius:12px;background:#fff;transition:border-color .2s var(--ease)}
.bl-cover:hover{border-color:var(--ink)}
.bl-cover svg{display:block;width:100%;height:auto}

/* ---------- narrower screens: one column ---------- */
@media (max-width:1119px){
  .bl-grid{padding-inline:24px}
}
@media (max-width:900px){
  .bl-grid{grid-template-columns:minmax(0,1fr)}
  .bl-grid > *,.bl-head > *,.bl-rail,.ar,.bl-next,.bl-out,.bl-row-head,.bl-row-meta,.bl-row-body,.bl-row .bl-cover,.bl-feature{grid-column:1;grid-row:auto}
  .bl-grid > *{padding-inline:0}
  .bl-out{display:none}
  .bl-head{padding-top:56px}
  .bl-h1{font-size:36px}
  .bl-body{padding-top:28px}
  .bl-rail-in{position:static;margin-bottom:32px}
  .bl-terms-rail{display:none}
  .bl-terms-end{display:grid;grid-column:1}
  .ar{font-size:17px}
  .ar > p.ar-lede{font-size:19px}
  .ar h2{font-size:25px;margin-top:56px}
  .ar-say{margin-inline:0;padding:22px;font-size:20px}
  .ar-fig{margin-inline:0;padding:22px 18px 16px}
  .ar-fig-head{padding-right:72px}
  .ar-fig-logo{top:22px;right:18px;height:14px}
  .ar-fig-title{font-size:19px}
  .bl-end{margin-top:56px;padding:40px 24px 88px;row-gap:28px}
  .bl-end-col{grid-column:1}
  .bl-hub{padding:64px 0 120px}
  .bl-cm{display:none}
  .bl-hub-h1{font-size:38px}
  .bl-hub-h1 br{display:none}
  .bl-hub-in-link{grid-column:1;grid-row:auto;justify-self:start;margin:16px 0 0 -10px}
  .bl-feature-wrap{margin-top:-88px}
  .bl-feature{grid-template-columns:minmax(0,1fr);padding:24px 20px;margin-inline:0}
  .bl-feature-text{padding:0}
  .bl-feature .bl-title{font-size:28px}
  .bl-title{font-size:26px}
  .bl-row > article{padding:40px 24px 44px;background-position:24px 0;background-size:calc(100% - 48px) 1px}
  .bl-cover{display:none}
}
@media (max-width:960px){
  .ar-fig-body svg.wide{display:none}
  .ar-fig-body svg.narrow{display:block;max-width:440px;margin:0 auto}
}
@media print{
  .ar-fig{break-inside:avoid}
  .ar-fig-body svg.wide{display:block}
  .ar-fig-body svg.narrow{display:none}
}