/* Clarity: long-form articles (/blog/<slug>/) and the Insights index (/blog/).
   Loaded with META "css": ["article"]. Uses only the tokens in clarity.css.
   Reading text in articles is Newsreader (the essay voice); the apparatus around it
   (byline, contents, boxes, lists, notes, FAQ answers) is Instrument Sans. */

/* ---------- article head ---------- */
.post{display:block}
.post-head{padding-top:clamp(40px,6vw,88px)}
.post-head .crumb{display:flex;flex-wrap:wrap;align-items:baseline}
.crumb-topic::before{content:"/";margin:0 .55em;color:var(--ink-2);opacity:.55}
.post-head h1{margin-top:20px;max-width:15.5em;font-size:clamp(40px,4.7vw,68px);line-height:1.04;letter-spacing:-0.025em}
.dek{margin-top:24px;max-width:34em;font-family:var(--serif);font-size:clamp(21px,1.75vw,25px);line-height:1.38;color:var(--ink-2);text-wrap:pretty}
.byline{margin-top:28px;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2);font-variant-numeric:lining-nums}
.byline a{color:var(--ink);font-weight:500;text-decoration:none}
.byline a:hover{text-decoration:underline;color:var(--blue)}
.byline .sep::before{content:"\00B7";margin:0 .6em}
.byline a,.byline time,.byline .read,.entry-by .read{white-space:nowrap}

/* ---------- layout: contents rail + text column ---------- */
.post-grid{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,38rem);column-gap:clamp(48px,7vw,120px);align-items:start;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(80px,9vw,128px)}
.post-toc{position:sticky;top:28px;padding-top:6px;font-size:14.5px;line-height:1.35}
.toc-label{color:var(--ink-2);margin-bottom:10px}
.post-toc ol{list-style:none;border-left:1px solid var(--line)}
.post-toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-2);text-decoration:none}
.post-toc a:hover{color:var(--ink);border-left-color:var(--ink)}

/* ---------- reading text ---------- */
.post-body{min-width:0;font-family:var(--serif);font-size:21px;line-height:1.45;font-weight:400;font-optical-sizing:auto;font-variant-numeric:oldstyle-nums proportional-nums;hanging-punctuation:first allow-end;color:var(--ink)}
.post-body > * + *{margin-top:.95em}
.post-body p{text-wrap:pretty}
.post-body a{text-decoration-color:rgba(37,75,105,.45);text-decoration-thickness:1px;text-underline-offset:.18em}
.post-body a:hover{text-decoration-color:currentColor}
.post-body > h2{margin-top:2.15em;font-size:clamp(28px,2.35vw,34px);line-height:1.14;scroll-margin-top:24px}
.post-body > h2 + *{margin-top:.55em}
.post-body > h2 + .stat-callout,.post-body > h2 + .terms{margin-top:1.1em}
.post-body > h3{margin-top:1.6em;font-size:1.2em;line-height:1.25;font-weight:400}
.post-body > ul{padding-left:1.1em}
.post-body > ul li + li{margin-top:.35em}
.hang{margin-left:-.42em}
@supports (hanging-punctuation:first){.hang{margin-left:0}}

/* case vignettes: set apart as an exhibit, still in the essay voice */
.vignette{margin:1.9em 0 2em;padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);background:var(--white);border-radius:var(--r-ui);font-size:19px;line-height:1.47}
.post-body > .vignette:first-child{margin-top:0}
.vignette p + p{margin-top:.85em}
.vignette .vignette-note{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink-2);font-variant-numeric:lining-nums}
.vignette p:not(.vignette-note) + .vignette-note{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.vignette .vignette-note:first-child{margin-bottom:16px}

/* pull lines */
.epigraph{margin:1.5em 0 1.6em;padding-left:1.1em;max-width:28em;font-size:1.36em;line-height:1.3;font-style:italic;font-weight:350;letter-spacing:-0.005em;color:var(--ink)}
.epigraph .hang{margin-left:-.4em}

/* a single sourced figure: number with its explanation, never a strip */
.stat-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:baseline;margin:1.9em 0;padding-top:18px;border-top:1px solid var(--ink)}
.stat-number{font-size:clamp(34px,3vw,44px);line-height:1;font-weight:300;letter-spacing:-0.02em;white-space:nowrap;font-variant-numeric:lining-nums}
.stat-label{font-family:var(--sans);font-size:15.5px;line-height:1.45;color:var(--ink-2);max-width:44ch;font-variant-numeric:lining-nums}

/* explanatory box */
.answer-box{margin:1.9em 0;padding:clamp(24px,3vw,32px) clamp(22px,3vw,36px);background:var(--mist);border-radius:var(--r-ui);font-family:var(--sans);font-size:17px;line-height:1.5;font-variant-numeric:lining-nums}
.answer-label{font-weight:600;margin-bottom:8px}
.answer-box p + p{margin-top:10px}

/* reference lists: term and description */
.terms{margin:2em 0}
.terms h3,.timeline h3{font-size:1.15em;line-height:1.25;font-weight:400;margin-bottom:14px}
.terms dl{border-top:1px solid var(--ink);font-family:var(--sans);font-variant-numeric:lining-nums}
.terms dl > div{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:4px 28px;padding:16px 0 17px;border-bottom:1px solid var(--line)}
.terms dt{font-size:16px;font-weight:600;line-height:1.4}
.terms dd{margin:0;font-size:16.5px;line-height:1.52}

/* a sequence over time */
.timeline{margin:2em 0}
.timeline ol{list-style:none;margin-left:4px;border-left:1px solid var(--ink-2);font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}
.timeline li{position:relative;padding:0 0 22px 28px}
.timeline li:last-child{padding-bottom:2px}
.timeline li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.med-time{display:block;font-size:15px;font-weight:600}
.timeline p{margin-top:4px;font-size:16.5px;line-height:1.52}

/* apparatus at the end of the article */
.post-body > .faq{margin-top:3em}
.post-body .faq h2{font-size:clamp(28px,2.35vw,34px);line-height:1.14;margin-bottom:20px;scroll-margin-top:24px}
.post-body .faq summary{font-size:21px}
.post-body .faq .faq-answer{padding:0 0 24px;max-width:62ch;font-family:var(--sans);font-size:17px;line-height:1.5;font-variant-numeric:lining-nums}
.post-body .faq .faq-answer p{padding:0;max-width:none}
.post-body .faq .faq-answer p + p{margin-top:12px}
.post-body > .related{margin-top:3em}
.post-body .related h2{font-size:clamp(26px,2.2vw,30px);line-height:1.15;margin-bottom:16px}
.post-body > .closing{margin-top:3.2em}
.post-body .closing h2{font-size:clamp(28px,2.4vw,32px);line-height:1.12;margin-bottom:12px}
.post-body .closing p{font-family:var(--sans);font-size:17.5px;line-height:1.5;max-width:56ch;font-variant-numeric:lining-nums}
.post-body .closing .actions{margin-top:24px}
.post-body > .disclaimer{margin-top:48px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-2);font-variant-numeric:lining-nums}

/* references, for articles that carry them: a numbered bibliography with hanging numbers */
.refs{list-style:none;counter-reset:ref;border-top:1px solid var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;font-variant-numeric:lining-nums}
.refs li{counter-increment:ref;position:relative;padding:12px 0 12px 2.2em;border-bottom:1px solid var(--line)}
.refs li::before{content:counter(ref) ".";position:absolute;left:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.refs em{font-style:italic}

/* ---------- Insights index ---------- */
.page-blog .page-head h1{font-size:clamp(48px,6vw,88px)}
.index{--idx-gap:clamp(32px,5vw,72px);padding-bottom:clamp(80px,9vw,128px)}
.index-list{list-style:none;border-top:1px solid var(--ink)}
.entry{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px var(--idx-gap);padding:32px 0 36px;border-bottom:1px solid var(--line)}
.entry-meta{padding-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2);font-variant-numeric:lining-nums}
.entry-meta span{display:block}
.entry h2{font-size:clamp(27px,2.4vw,34px);line-height:1.14;max-width:22em}
.entry h2 a{text-decoration:none}
.entry h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;color:var(--ink)}
.entry-dek{margin-top:12px;max-width:62ch;font-size:17px;line-height:1.5}
.entry-by{margin-top:12px;font-size:15px;color:var(--ink-2)}
.entry-by .sep::before{content:"\00B7";margin:0 .6em}
.entry-lead{padding:40px 0 48px}
.entry-lead h2{font-size:clamp(36px,3.9vw,56px);line-height:1.04;letter-spacing:-0.022em;max-width:16em}
.entry-lead .entry-dek{margin-top:18px;font-family:var(--serif);font-size:clamp(20px,1.6vw,23px);line-height:1.4;color:var(--ink-2);max-width:40em}
.index .closing{margin-top:clamp(64px,7vw,96px);margin-left:calc((100% - var(--idx-gap)) * .25 + var(--idx-gap));max-width:640px}
.index .closing h2{font-size:clamp(28px,2.4vw,32px);line-height:1.12;margin-bottom:12px}
.index .closing p{max-width:56ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,38rem)}
  .post-toc{display:none}
}
@media (max-width:760px){
  .post-head h1{font-size:clamp(34px,9vw,44px);line-height:1.06}
  .dek{font-size:20px}
  .byline{font-size:14.5px}
  .post-body{font-size:18.5px;line-height:1.47}
  .post-body > h2{font-size:27px}
  .vignette{font-size:17.5px;margin-left:-8px;margin-right:-8px;padding:22px 20px}
  .answer-box{margin-left:-8px;margin-right:-8px;padding:22px 20px;font-size:16.5px}
  .epigraph{font-size:1.28em;padding-left:.8em}
  .stat-callout{grid-template-columns:minmax(0,1fr)}
  .stat-number{white-space:normal}
  .terms dl > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .terms dd,.timeline p{font-size:16px}
  .post-body .faq summary{font-size:19.5px}
  .post-body .faq .faq-answer{font-size:16.5px}
  .entry{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0 28px}
  .index .closing{margin-left:0}
  .entry-meta{padding-top:0}
  .entry-meta span{display:inline}
  .entry-meta span + span::before{content:"\00B7";margin:0 .6em}
  .entry-lead{padding:28px 0 32px}
  .entry-lead h2{font-size:36px}
}
@media print{
  .post-toc{display:none}
  .post-grid{display:block}
}