/* blog: the site-v2 blog (The Docket), same markup and components, redrawn in the v3 look.
   Colours are the v3 palette, type is Helvetica on the v3 sizes, the frame is the v3 .wrap.
   Ported from site-v2/src/blog/blog.css; rule order and class names follow it. */

/* undo the v3 page-level rules that would otherwise reach inside blog markup */
.blog-shell section { padding: 0; }
.blog-shell h2 { margin-bottom: 0; }
.blog-shell nav a { margin-left: 0; }
.blog-shell header { display: block; padding: 0; }
.blog-content ul, .blog-content ol, .blog-toc ol { list-style: revert; }
.blog-content figure { margin: 0; }
.blog-content em { font-style: italic; }

/* shell: the v3 frame, 1440 max with 96px sides */
.blog-shell { max-width: 1440px; margin: 0 auto; padding: 160px 96px 120px; }

/* index head: the name of the blog on the left, search on the right */
.blog-index-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--ink); margin-bottom: 52px; }
.blog-index-head h1 { font-size: var(--display); font-weight: bold; line-height: 1.02; letter-spacing: -4px; }
.blog-search { display: grid; gap: 8px; max-width: 320px; width: 100%; font-size: var(--small); color: var(--grey); }
.blog-search input { font: var(--small) Helvetica, Arial, sans-serif; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 11px 0; min-width: 0; width: 100%; }
.blog-search input::placeholder { color: var(--soft); }
.blog-search input:focus { outline: 1px solid var(--ink); outline-offset: 3px; }

/* featured post */
.blog-lead { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.blog-lead h2 { font-size: var(--head); font-weight: bold; line-height: 1.06; letter-spacing: -1.5px; max-width: 1100px; text-wrap: balance; }
.blog-lead h2 a:hover, .blog-entry h3 a:hover { text-decoration: none; }
.blog-lead .blog-excerpt { font-size: var(--lead); line-height: 1.25; letter-spacing: -0.5px; max-width: 900px; margin-top: 32px; color: var(--grey); text-wrap: balance; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 18px; font-size: var(--small); line-height: 1.6; color: var(--soft); }
.blog-lead .blog-meta { margin-top: 24px; }
.blog-kind { font-weight: bold; color: var(--ink); }

/* posts by month */
.blog-month { margin-top: 40px; }
.blog-month > h2 { font-size: var(--small); font-weight: bold; line-height: 1.4; letter-spacing: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.blog-entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding-block: 25px; border-bottom: 1px solid var(--line); }
.blog-entry time { font-size: var(--small); line-height: 1.6; color: var(--soft); padding-top: 6px; }
.blog-entry h3 { font-size: var(--lead); font-weight: bold; line-height: 1.2; letter-spacing: -0.5px; text-wrap: balance; margin: 0 0 10px; }
.blog-entry .blog-excerpt { font-size: var(--small); color: var(--grey); line-height: 1.5; max-width: 900px; margin-top: 12px; }
.blog-empty { font-size: var(--body); padding: 30px 0; }
.blog-signoff { font-size: var(--lead); line-height: 1.25; letter-spacing: -0.5px; margin-top: 64px; color: var(--soft); }
.blog-hidden, [data-blog-entry][hidden], .blog-month[hidden], .blog-lead[hidden], .blog-empty[hidden] { display: none !important; }

/* post head: back link, title, subtitle, byline with author photo */
.blog-article-head { padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid var(--ink); }
.blog-back { display: inline-block; font-size: var(--small); color: var(--grey); margin-bottom: 32px; }
.blog-back:hover { color: var(--ink); }
.blog-article-head h1 { font-size: var(--head); font-weight: bold; line-height: 1.06; letter-spacing: -1.5px; max-width: 1100px; text-wrap: balance; }
.blog-subtitle { font-size: var(--lead); line-height: 1.25; letter-spacing: -0.5px; color: var(--grey); margin-top: 32px; max-width: 900px; text-wrap: balance; }
.blog-byline { display: flex; align-items: center; gap: 14px; margin-top: 32px; font-size: var(--small); line-height: 1.5; }
.blog-byline img { width: 42px; height: 42px; object-fit: cover; filter: grayscale(1); }
.blog-byline strong { font-weight: bold; }
.blog-byline .blog-meta { margin-top: 4px; }
.blog-author-role { color: var(--grey); margin-left: 8px; }

/* table of contents */
.blog-toc { max-width: 820px; margin: 0 0 36px; border-block: 1px solid var(--line); padding-block: 16px; }
.blog-toc summary { cursor: pointer; font-size: var(--small); color: var(--grey); }
.blog-toc ol { margin: 16px 0 0; padding-left: 22px; columns: 2; column-gap: 36px; }
.blog-toc li { font-size: var(--small); line-height: 1.6; margin-bottom: 8px; break-inside: avoid; }

/* article body: one 820px column, left-aligned like every v3 page */
.blog-content { max-width: 820px; margin: 0; font-size: var(--body); line-height: 1.5; overflow-wrap: break-word; color: var(--ink); }
.blog-content > * { margin-bottom: 18px; }
.blog-content h2 { font-size: var(--lead); font-weight: bold; line-height: 1.2; letter-spacing: -0.5px; margin: 44px 0 18px; text-wrap: balance; }
.blog-content h3 { font-size: var(--body); font-weight: bold; line-height: 1.3; letter-spacing: 0; margin: 34px 0 14px; text-wrap: balance; }
.blog-content h4 { font-size: var(--body); font-weight: bold; line-height: 1.35; margin: 26px 0 12px; }
.blog-content > p { font-size: var(--body); line-height: 1.5; margin-bottom: 22px; }
.blog-content strong { font-weight: bold; }
.blog-content ul, .blog-content ol { padding-left: 24px; margin-block: 18px; }
.blog-content li { font-size: var(--body); line-height: 1.5; margin-bottom: 7px; }
.blog-content a:not(.MuiButton-root) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #999; }
.blog-content [id] { scroll-margin-top: 40px; }
.blog-content img { height: auto; max-width: 100%; }
.blog-content iframe { max-width: 100%; }
.blog-content .MuiTableContainer-root { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; }
.blog-content table { font-size: var(--small); }
.blog-content table p { font-size: inherit; line-height: inherit; }
.blog-content pre { max-width: 100%; overflow: auto; white-space: pre; font-size: var(--small); }
/* code is the one place a second face is allowed: the system monospace, never a webfont */
.blog-content pre, .blog-content code, .blog-content kbd, .blog-content samp { font-family: ui-monospace, Menlo, Consolas, monospace; }
.blog-content button, .blog-content .MuiButton-root { border-radius: 0; }
.blog-content .MuiSvgIcon-root { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* v3 draws no icons: button icons are hidden, the label carries the action */
.blog-content .MuiButton-startIcon, .blog-content .MuiButton-endIcon { display: none; }

/* tail: topic tags, related posts, comments */
.blog-tail { max-width: 820px; margin: 60px 0 0; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-block: 24px; border-top: 1px solid var(--ink); }
.blog-tags a { font-size: var(--small); line-height: 1.5; color: var(--grey); }
.blog-tags a:hover { color: var(--ink); }
.blog-related { padding-block: 30px; border-block: 1px solid var(--line); }
.blog-related h2 { font-size: var(--body); font-weight: bold; letter-spacing: 0; line-height: 1.35; margin-bottom: 22px; }
.blog-related ul { padding: 0; list-style: none; display: grid; gap: 22px; }
.blog-related a { font-size: var(--lead); font-weight: bold; line-height: 1.2; letter-spacing: -0.5px; }
.blog-related .blog-meta { margin-top: 6px; }
.blog-discussion { padding-top: 32px; }
.blog-discussion button { font-size: var(--small); padding: 12px 24px; border: 1px solid var(--ink); background: transparent; border-radius: 999px; cursor: pointer; color: var(--ink); }
.blog-discussion button:hover { background: var(--ink); color: #fff; }
.blog-external { max-width: 760px; }
.blog-external .pill { display: inline-block; margin-top: 30px; padding: 10px 22px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; }
.blog-external > p { margin-top: 24px; font-size: var(--body); }
.blog-reading-progress { position: fixed; z-index: 31; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; transform-origin: left; background: var(--ink); transform: scaleX(0); }

/* click-to-load films */
.blog-video-host { background: var(--ink) !important; }
.blog-video-host iframe[hidden] { display: none !important; }
.blog-video-gate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; text-align: center; color: #fff; background: var(--ink); }
.blog-video-gate button { flex: none; font-size: var(--small); font-weight: bold; line-height: 1.3; border: 1px solid #fff; border-radius: 999px; padding: 11px 24px; background: #fff; color: var(--ink); cursor: pointer; }
.blog-video-gate button:hover { background: transparent; color: #fff; }
.blog-content .blog-video-gate p { max-width: 32em; font-size: var(--small); line-height: 1.5; color: var(--on-dark); margin: 0; }

@media print {
  header, footer, .blog-back, .blog-toc, .blog-tail, .blog-reading-progress, .blog-content button, .blog-content .MuiButton-root { display: none !important; }
  .blog-shell { padding: 0; max-width: none; }
  .blog-content { max-width: none; }
  .blog-article-head h1 { font-size: 30pt; }
  .blog-content h2 { break-after: avoid; }
  .blog-content img, table, blockquote { break-inside: avoid; }
  .blog-content a { color: inherit !important; }
  .blog-content p, .blog-content li { font-size: 11pt; }
  .blog-article-head { padding-bottom: 16px; margin-bottom: 20px; }
}

/* the posts' own emotion styles are recoloured in the page; this keeps the reading column's rhythm */
.blog-content > h2 { margin-top: 54px; }
.blog-content .blog-callout { border-left: 0; border-right: 0; border-block: 1px solid var(--ink); background: transparent; padding: 23px 0; margin-block: 34px; }
.blog-content blockquote { border-left: 0; border-right: 0; border-block: 1px solid var(--ink); margin: 38px 0; padding: 25px 0; background: transparent; }
.blog-content blockquote, .blog-content blockquote p, .blog-content blockquote .MuiTypography-root { font-size: var(--lead); line-height: 1.25; font-style: normal; font-weight: 400; letter-spacing: -0.5px; }
.blog-content figcaption { font-size: var(--small); line-height: 1.5; color: var(--grey); margin-top: 12px; }
.blog-content table { width: 100%; border-collapse: collapse; border-spacing: 0; background: transparent; }
.blog-content table th, .blog-content table td { font-size: var(--small); line-height: 1.5; vertical-align: top; border-bottom: 1px solid var(--line); padding: 15px 17px; }
.blog-content table th { font-weight: bold; background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
.blog-content .MuiTableContainer-root { border-radius: 0; box-shadow: none; border-color: var(--line); background: transparent; }
.blog-content .MuiButton-root, .blog-content button { font-weight: bold; text-transform: none; letter-spacing: 0; border-radius: 999px; box-shadow: none; }
.blog-content .MuiButton-contained { background: var(--ink); color: #fff; }
.blog-content .MuiButton-contained:hover { background: #fff; color: var(--ink); box-shadow: none; }
.blog-content .MuiButton-outlined { border-color: var(--ink); color: var(--ink); }
.blog-content .MuiButton-outlined:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.blog-content .MuiChip-root { border-radius: 999px; box-shadow: none; }
.blog-content blockquote .MuiTypography-caption { display: block; font-size: var(--small); line-height: 1.5; font-style: normal; letter-spacing: 0; color: var(--grey); margin-top: 16px; }

/* old essays: the parts that only those pages carry */
.essay-sep { margin: 48px 0; color: var(--soft); letter-spacing: 0.5em; }
.essay-plate { display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: start; margin: 32px 0; padding: 24px 0; border-block: 1px dotted #999; }
.essay-plate p { font-size: var(--body); font-weight: bold; }
.essay-plate img { width: 240px; height: auto; filter: grayscale(1); border: 0; }
.essay-plate figcaption { margin-top: 8px; }
.essay-hero { width: 100%; height: 360px; object-fit: cover; filter: grayscale(1); margin-bottom: 40px; }
.essay-dropcap { display: flow-root; }
.essay-dropcap::first-letter { float: left; font-size: var(--head); line-height: 0.9; font-weight: bold; margin: 4px 8px 0 0; }
.essay-points { list-style: none !important; padding-left: 0 !important; }
.essay-points li { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.essay-points li:last-child { border-bottom: 1px solid var(--line); }
.essay-pdf { display: block; width: 100%; height: 1100px; border: 1px solid var(--line); }
.essay-releases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin: 32px 0; }
.essay-releases article { border-top: 1px solid var(--ink); padding-top: 24px; }
.essay-releases img { width: 100%; height: auto; border: 1px solid var(--line); margin-bottom: 20px; }
.essay-releases h3 { margin: 0 0 12px; }
.essay-releases p { color: var(--grey); }
.essay-releases .blog-meta { margin-top: 16px; }
.essay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; margin-top: 24px; }
.essay-logos img { height: 36px; width: auto; filter: grayscale(1); opacity: 0.6; border: 0; transition: filter 0.3s, opacity 0.3s; }
.essay-logos a:hover img { filter: none; opacity: 1; }
.essay-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.essay-chips a, .essay-chips span { display: inline-block; padding: 10px 24px; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--small); font-weight: bold; text-decoration: none !important; }
.essay-chips a:hover { background: var(--ink); color: #fff; text-shadow: none; }
.essay-more summary { cursor: pointer; color: var(--grey); font-size: var(--small); }
.essay-more[open] summary { margin-bottom: 18px; }
.essay-sched { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin: 32px 0; }
.essay-sched > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.essay-annex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 24px; }
.essay-annex p { font-size: var(--small); margin: 0 0 8px; }
.essay-annex .k { color: var(--ink); }
.essay-annex .in { padding-left: 16px; }
.essay-annex .req { font-style: italic; color: var(--soft); }

/* post layout: contents rail left with 'See also' at its foot, the post in the middle. The rail sticks
   48px from the top; a long contents list scrolls inside its rail. A post with no headings keeps
   an empty left column so the article never moves. */
.blog-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 44px; align-items: start; }
.blog-main { min-width: 0; max-width: 760px; }
.blog-main .blog-content, .blog-main .blog-tail { max-width: 760px; }
.blog-main .blog-article-head h1 { font-size: var(--head); }
.blog-rail { position: sticky; top: 48px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: var(--small); line-height: 1.4; }
.blog-rail-k { font-weight: bold; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.blog-rail ol, .blog-rail ul { list-style: none; padding: 0; margin: 0; }
.blog-rail-toc li { margin: 0; }
.blog-rail-toc a { display: block; padding: 8px 0; color: var(--soft); }
.blog-rail-toc a:hover { color: var(--ink); }
.blog-rail-toc a.is-current { color: var(--ink); font-weight: bold; text-shadow: none; }

/* left rail: contents on top (scrolls inside), 'See also' pinned to the bottom. The list opens on
   hover or focus, 0.3s, and stays shut without motion when reduced motion is asked for. */
.blog-left { position: sticky; top: 48px; height: calc(100vh - 96px); display: flex; flex-direction: column; font-size: var(--small); line-height: 1.4; }
.blog-left > .blog-rail-toc { position: static; flex: 1 1 auto; min-height: 0; max-height: none; }
.blog-seealso { flex: none; padding-top: 16px; border-top: 1px solid var(--ink); }
.blog-seealso .blog-rail-k { display: flex; justify-content: space-between; width: 100%; padding: 0 0 12px; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.blog-seealso .blog-rail-k::after { content: "+"; font-weight: normal; }
.blog-seealso.is-open .blog-rail-k::after { content: "\2013"; }
.blog-seealso-box { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.blog-seealso.is-open .blog-seealso-box { grid-template-rows: 1fr; }
.blog-seealso ul { overflow: hidden; min-height: 0; list-style: none; padding: 0; margin: 0; }
.blog-seealso li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.blog-seealso a { display: block; color: var(--ink); }
.blog-seealso time { display: block; margin-top: 4px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .blog-seealso-box { transition: none; } }

/* blog: media in a post, and the parts only a reproduced essay carries. Loads after blog.css; sizes and colours are the theme's. */

/* spacing the template drops: a plain figure before a paragraph, and paragraphs inside a boxed section */
.blog-content > figure:not([class]) { margin-block: 34px; }
.blog-content div.MuiTypography-root > p + p { margin-top: 16px; }

/* a case study's title card, under its quote */
.blog-content .blog-card { margin-top: 32px; }
.blog-content .blog-card img, .blog-content .blog-film img, .blog-content .blog-film iframe { display: block; width: 100%; }

/* film: a still that becomes the player on click, so nothing leaves the page until the reader asks (extra.js) */
.blog-content .blog-film { margin-block: 34px; }
.blog-content .blog-film a { position: relative; display: block; border: 1px solid var(--line); text-decoration: none; }
.blog-content .blog-film a:hover { text-shadow: none; }
.blog-content .blog-film iframe { aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.blog-film-play { position: absolute; left: 16px; top: 16px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--small); }
.blog-film-play svg { width: 10px; height: 12px; margin-right: 10px; fill: currentColor; }
.blog-film-play span { margin-left: 8px; color: var(--on-dark); }
.blog-film a:hover .blog-film-play, .blog-film a:focus-visible .blog-film-play { background: #fff; color: var(--ink); }
.blog-film a:hover .blog-film-play span, .blog-film a:focus-visible .blog-film-play span { color: var(--soft); }

/* essay: a source note, a rule between parts, a long quotation set as running text, and numbered notes */
.blog-content .note { font-size: var(--small); color: var(--grey); }
.blog-content > hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
.blog-content blockquote.passage { border-block: 0; border-left: 1px solid var(--ink); margin: 32px 0; padding: 0 0 0 24px; }
.blog-content blockquote.passage, .blog-content blockquote.passage p { font-size: var(--body); line-height: 1.5; letter-spacing: 0; }
.blog-content blockquote.passage p + p { margin-top: 16px; }
.blog-content sup { font-size: var(--small); line-height: 0; }
.blog-content ul.refs { list-style: none; padding-left: 0; }
.blog-content ul.refs li { font-size: var(--small); }