/* Blog styles: header, post layout, figures and the lead illustration.
   Loaded after site.css on /blog/ and on each post. Selectors start with body or main so they win
   over the style blocks inside the post page, which come later in the document. */


/* ---------- Site header and footer ---------- */

/* Header and footer share the reading column's edges at every width */
body .page > .site-header, body .page > .site-footer { max-width: 760px; }

/* Desktop: a small wordmark centred at the top, on the same line as the page links */
@media (min-width: 1120px) {
  :root { --page-top: 40px; --header-gap: 115px; }
  body .site-header { align-items: center; height: 23px; }
  body .brand, body .blog-brand { height: 23px; }
  body .brand svg { width: 67px; }
  body .site-nav { position: absolute; top: 35px; right: 62px; }
}

/* Phones: the left-aligned wordmark 20% smaller */
@media (max-width: 640px) {
  body .site-header .brand svg { width: calc(var(--logo-width) * .8); }
}


/* ---------- Post heading and lead illustration ---------- */

body #post-title { font-weight: 300; }
body .post-heading .publish-metadata { margin-top: 12px; line-height: 22px; color: var(--muted); font-size: 15px; }

/* 28px above the illustration, 30px below it */
body .post-lead { margin: 28px 0 0; }
body .post .post-layout { margin-top: 30px; }

/* The arcs and rules run past the frame on purpose */
body .post-lead svg.lead-o { display: block; width: 100%; height: auto; overflow: visible; }

/* Lines stay 1px at any width; a small script in the post sets --lead-sw from the rendered width */
body .lead-o .lead-line { stroke-width: var(--lead-sw, 2.24); }

/* On load the lines draw on one after another, then the O fades in */
@media (prefers-reduced-motion: no-preference) {
  body .lead-o .lead-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: lead-draw 650ms cubic-bezier(.45, 0, .2, 1) forwards; animation-delay: calc(80ms + var(--n) * 75ms); }
  body .lead-o .lead-fill { opacity: 0; animation: lead-fade 600ms ease-out 1150ms forwards; }
}
@keyframes lead-draw { to { stroke-dashoffset: 0; } }
@keyframes lead-fade { to { opacity: 1; } }


/* ---------- Contents list (left margin, wide screens) ---------- */

/* Inactive entries are a lighter grey, set as a colour rather than opacity */
body .post-toc a { font-weight: 400; background-image: linear-gradient(90deg, #109386 0 50%, #a0a8a2 50% 100%); }

/* 13px between entries, 15px lines; the first entry's capitals sit level with the top of the illustration */
@media (min-width: 1360px) {
  main.post .post-toc { padding-top: 266px; }
  main.post .post-toc ol { top: 40px; line-height: 15px; }
  main.post .post-toc li { margin: 0 0 13px; }
}


/* ---------- Section rhythm ---------- */

/* 60px between the end of a section and the next heading (40px on phones) */
body main.post .post-section[aria-labelledby] { margin-top: 60px !important; padding-top: 0; }
@media (max-width: 640px) {
  body main.post .post-section[aria-labelledby] { margin-top: 40px !important; }
}

/* The appendix has 20px of its own top padding, so its margin is 20px less */
body main.post .blog-appendix { margin-top: 40px; }
@media (max-width: 640px) {
  body main.post .blog-appendix { margin-top: 20px; }
}

/* Appendix heading matches the other section headings */
body .blog-appendix > h2#appendix-heading { font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: -.015em; color: var(--deep-slate); }

/* Appendix disclosure triangles: smaller, with a space before the label; they turn when a section opens */
body .appendix-subsection > summary { list-style: none; }
body .appendix-subsection > summary::-webkit-details-marker { display: none; }
body .appendix-subsection > summary::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: .21em 0 .21em .36em; border-color: transparent transparent transparent currentColor; margin: 0 .62em .08em 0; vertical-align: middle; transition: transform .15s ease-out; }
body .appendix-subsection[open] > summary::before { transform: rotate(90deg); }


/* ---------- Margin notes ---------- */

/* A lighter grey, set as a colour rather than opacity */
body .method-footnotes { color: #88908a; }
body .method-footnotes li::marker { color: #88908a; }


/* ---------- Finding cards ---------- */

body .post-section .f-claim { line-height: 19px !important; }
body .post-section .f-text { font-size: 12.5px !important; line-height: 18px !important; }
@media (max-width: 480px) {
  body .post-section .f-claim { line-height: 20px !important; }
  body .post-section .f-text { font-size: 13px !important; line-height: 20px !important; }
}

/* On the three-column grid every claim takes three lines' height, so the six charts start on one line.
   "Newer can beat bigger" is one line long, so it sits on the middle line. */
@media (min-width: 821px) {
  body .post-section .finding .f-claim { min-height: 57px; }
  body .post-section .finding-size .f-claim { padding-top: 19px; box-sizing: border-box; }
}

/* One spacing for every card chart, with optical corrections so their first marks line up */
body .post-section .finding svg,
body .post-section .finding .outcome-chart,
body .post-section .finding #summary-budget-graph { margin: 6px 0 8px; transform: none; }
body .post-section .finding-ranges svg { margin-top: -8px; }
body .post-section .finding .outcome-chart { margin-top: 2px; }
body .post-section .finding #summary-budget-graph svg { margin: 0; }
@media (max-width: 820px) {
  body .post-section .finding-outcomes { container-type: inline-size; }
  body .post-section .finding-outcomes .outcome-chart { font-size: 4.583333cqi; }
  body .post-section .finding-outcomes .outcome-track { height: 1.818182em; }
  body .post-section .finding-outcomes .outcome-track > span { font-size: inherit !important; }
}
body .post-section .finding-size svg { margin-top: -6px; }


/* ---------- Figures ---------- */

/* Figure titles: regular weight */
body .post-section .ct-figure .ct-title,
body .irt-budget .irt-title,
body .post-section .ab-comparison h3,
body .post-section #size-scatter-title { font-weight: 400; }

/* Ortet Health Index: one boxed figure titled like the others; its notes sit outside the box */
body .hr-wrap { position: relative; margin: 28px 0 32px; }
body .hr-wrap #health-rankings { margin: 0; padding: 20px; background: #fff; border: 1px solid #e4e6e3; border-radius: 8px; box-sizing: border-box; }
body .hr-wrap #health-rankings h3 { margin: 0; font-size: 18px; line-height: 23.4px; font-weight: 400; color: #1b2a29; letter-spacing: 0; }
body .hr-wrap .ranking-toolbar { margin-top: 12px; }
body .hr-wrap > .method-footnotes { margin-top: 12px; padding-top: 0; border-top: 0; }
@media (min-width: 1120px) {
  body .hr-wrap > .method-footnotes { margin-top: 0; }
}
@media (max-width: 640px) {
  body .hr-wrap #health-rankings { padding: 12px; }
  body .hr-wrap #health-rankings h3 { font-size: 16px; line-height: 20.8px; }
  body .hr-wrap .ranking-toolbar { margin-top: 10px; }
}

/* Charts with hover captions. On wide screens the caption appears in the gap below the chart
   instead of reserving empty space; narrower screens keep the reserved line so a tap doesn't shift the page. */
body .size-plot .size-scatter-scroll { margin-bottom: 0 !important; }
@media (min-width: 1120px) {
  body .size-plot { position: relative; }
  body .size-plot #size-detail { position: absolute; left: 0; right: 0; top: 100%; margin: 8px 0 0; }
  body .ct-wrap .ct-figure { margin-bottom: 0; }
  body .ct-wrap .ct-detail { position: absolute; left: 0; right: 0; top: 100%; margin: 8px 2px 0 !important; min-height: 0; }
}
@media (max-width: 1119px) {
  body .size-plot #size-detail { margin-top: 8px; }
}

/* Keep the mobile Score label below the normalized-score subtitle. */
@media (max-width: 640px) {
  body .hr-wrap #health-rankings .index-score-label { bottom: -3px; }
}

/* Reasoning table: room between the score bars and the column divider on their left */
body .reasoning-score .reasoning-bar-track { margin-left: 8px; }
@media (max-width: 640px) {
  body .reasoning-score .reasoning-bar-track { margin-left: 4px; }
}


/* ---------- Blog archive (/blog/) ---------- */

/* The feed shares the 760px reading column with the header and footer */
body .blog-list { max-width: 760px; width: 100%; margin-inline: auto; }
body .blog-list > .posts { gap: 0; }
body .blog-list > .posts > li + li { border-top: 1px solid #e4e6e3; }

/* Each post: title, date and excerpt; no list thumbnail */
body .post-item-link { display: block; max-width: 640px; padding: 32px 0; }   /* Text-only entries stay a little narrower than the reading column. */
body .blog-list > .posts > li:first-child .post-item-link { padding-top: 0; }
body .post-item-link .post-item-body { gap: 0; }
body .post-item-link h2 { margin: 0; }
body .post-item-link .post-item-meta { margin-top: 8px; }
body .post-item-link time { font-size: 14px; line-height: 20px; }
body .post-item-link .post-item-excerpt { margin-top: 12px; text-wrap: pretty; }

/* Same page margins as the post on smaller screens (24px, then 16px on phones) */
@media (max-width: 900px) { body .page { --margin-x: 24px; } }
@media (max-width: 640px) { body .page { --margin-x: 16px; } }