/* The journal. Typography and layout belong to this site, never to the
   publisher: an external writer sends headings, paragraphs and images, and
   everything below decides what they look like. That is why there is no rule
   here keyed to anything a publisher can set. */

.blog-shell{max-width:720px;margin:0 auto;padding:8px 0 40px}
.blog-masthead{margin-bottom:26px}
.blog-masthead h1{margin:6px 0 10px}
.blog-lede{font-family:Spectral,Georgia,serif;font-size:19px;line-height:1.5;color:var(--body);margin:0}

/* Sections wrap onto as many rows as they need. They used to scroll sideways
   with the scrollbar hidden, which on a wide screen simply cut the last pills
   off with no sign there was more. Every section a reader can open has to be
   visible to be found; a second row costs far less than a hidden one. */
.blog-sections{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 16px;margin-bottom:22px;
  border-bottom:1px solid var(--rule)}
.blog-section{flex:0 0 auto;padding:7px 13px;border:1px solid var(--rule);border-radius:999px;
  background:var(--white);color:var(--body);text-decoration:none;font-size:13.5px;white-space:nowrap}
.blog-section:hover{border-color:#cfd6d4;color:var(--ink)}
.blog-section.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.blog-count{opacity:.6;font-size:12px}

.blog-cards{display:grid;gap:18px}
.blog-card{display:grid;grid-template-columns:168px 1fr;gap:18px;align-items:start;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.blog-card:hover{border-color:#cfd6d4}
.blog-card:only-child,.blog-card:not(:has(.blog-card-image)){grid-template-columns:1fr}
.blog-card-image{display:block;border-radius:10px;overflow:hidden;background:var(--paper);aspect-ratio:16/9}
/* The whole image, never a crop: a diagram's labels live near its edges. */
.blog-card-image img{width:100%;height:100%;object-fit:contain;display:block}
.blog-card-body{display:grid;gap:6px}
.blog-card-section{font:500 11px/1 Plex,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.blog-card-title{font-family:Spectral,Georgia,serif;font-size:21px;line-height:1.2;color:var(--ink)}
.blog-card-excerpt{font-size:14.5px;line-height:1.5;color:var(--body)}
.blog-card-meta{font-size:12.5px;color:var(--muted)}

.blog-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}
.blog-pager-count{font-size:13px;color:var(--muted)}
.blog-empty{text-align:center;padding:38px 22px}
.blog-empty h2{margin-bottom:8px}

/* --- one article --- */
.blog-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 14px}
.blog-head h1{margin-bottom:12px}
.blog-byline{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.blog-hero{margin:24px 0 8px}
/* Every hero sits in the same 16:9 frame, the whole image visible inside it.
   `height:auto` is what makes that true. The tag carries the image's own
   width and height so the page does not jump while it loads, and a browser
   treats that height attribute as a real CSS height unless something
   overrides it. Without this line a 1792x1024 hero got a 1024px-tall frame
   at 720px wide, and the photo sat in the middle of a tall blank box. */
.blog-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);display:block}
.blog-hero figcaption,.blog-figure figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.45}

.blog-body{font-family:Spectral,Georgia,serif;font-size:18px;line-height:1.72;color:var(--body);margin-top:26px}
.blog-body h2{font-size:25px;margin:1.7em 0 .5em}
.blog-body h3{font-size:20px;margin:1.5em 0 .4em}
.blog-body p{margin:0 0 1.15em}
.blog-body ul,.blog-body ol{margin:0 0 1.15em;padding-left:1.35em}
.blog-body li{margin-bottom:.45em}
.blog-body blockquote{margin:1.4em 0;padding:2px 0 2px 18px;border-left:3px solid var(--rule);color:var(--muted)}
.blog-body a{color:var(--accent)}
.blog-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:1px 5px}
.blog-body pre{background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:0 0 1.3em}
.blog-body pre code{background:none;border:0;padding:0;font-size:13.5px;line-height:1.6}
.blog-figure{margin:1.6em 0}
.blog-figure img{width:100%;height:auto;border-radius:10px;display:block}

/* A wide table scrolls inside its own box so the page itself never does. */
.blog-table-scroll{overflow-x:auto;margin:0 0 1.4em}
.blog-body table{border-collapse:collapse;width:100%;font-family:Plex,sans-serif;font-size:14.5px}
.blog-body th,.blog-body td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.blog-body th{background:var(--paper);color:var(--ink);font-weight:500}

.blog-math{overflow-x:auto;padding:6px 0;margin:0 0 1.2em}
.blog-body math{font-size:1.02em}
.blog-fnref a{text-decoration:none;padding:0 2px}
.blog-footnotes{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--rule);font-size:15px}
.blog-footnotes h2{font-size:18px;margin-bottom:.6em}
.blog-fnback{text-decoration:none;margin-left:5px}

.blog-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 0;
  padding-top:20px;border-top:1px solid var(--rule)}
.blog-tags-label{font:500 11px/1 Plex,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.blog-tag{font-family:Plex,sans-serif;font-size:12.5px;color:var(--body);background:var(--paper);
  border:1px solid var(--rule);border-radius:999px;padding:5px 11px}
.blog-back{margin-top:26px;font-family:Plex,sans-serif;font-size:14px}

@media (max-width:620px){
  .blog-card{grid-template-columns:1fr;gap:13px}
  .blog-body{font-size:17px;line-height:1.68}
  .blog-shell{padding-bottom:28px}
}