/* The blog, on top of /site.css (the landing page's palette, nav, keycaps, closing band
   and footer). Only what an article needs and the landing page doesn't lives here.
   The page is the landing page's 1080px; the text keeps a ~680px measure on its left
   edge, under the logo, because a 1080px line is unreadable. */
.post, .blog-head { max-width: 680px; }

/* headline: the landing page's h1 at article size — the second line in chocolate italic */
h1 { font-size: clamp(38px, 8vw, 64px); line-height: 1.04; margin: 56px 0 0; text-wrap: balance; }
h1 em { display: block; }
.dek { font-size: 19px; color: var(--ink-2); margin: 22px 0 0; text-wrap: pretty; }
.date { color: var(--ink-3); font-size: 14px; margin: 56px 0 0; }
.date + h1 { margin-top: 10px; }

/* prose: legal.css's reading rhythm */
.post { line-height: 1.62; }
.post .dek { margin-bottom: 40px; }
.post h2 { font-size: 28px; line-height: 1.2; max-width: none; margin: 52px 0 10px; }
.post p, .post li { color: var(--ink-2); text-wrap: pretty; }
code { font: 0.9em var(--mono); background: var(--paper-2); border: 1px solid var(--hair);
       border-radius: 5px; padding: 1px 5px; }

/* The panel's status row, drawn as the app draws it. Green and amber are coverage
   marks and appear nowhere else on the site. */
figure.status { display: flex; align-items: baseline; gap: 10px; margin: 24px 0;
                padding: 12px 18px; border-radius: 12px; background: #1f1f21;
                color: #a8a8a8; font: 13.5px/1.45 var(--sans); }
.status .tl { font-size: 18px; font-weight: 700; line-height: 1; }
.status .whole { color: var(--whole); }
.status .partial, .status .warn { color: var(--partial); }

/* the closing band sits closer under an article than under the landing's FAQ */
.post + .close, .duo + .close { margin-top: 80px; }

/* A post's brief, beside it: the post narrows to 600px and the panel takes the margin,
   sticky under the nav pill (8 + 56 + 24). A panel taller than the window scrolls
   inside itself rather than losing its status line off the bottom. */
.duo { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 48px; align-items: start; }
.brief-side { position: sticky; top: 88px; margin-top: 56px; }   /* level with .date */
.brief-side .cap { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.brief-side .brief-pan { font-size: 13.5px; max-height: calc(100vh - 128px); overflow: auto; }
/* The app recedes a brief's prose to 52% so the model's bold spans rise out of it, and
   .pan copies that (#ffffff85 measures 152/255 here, against the app's own 147). That
   suits three lines in the app; a post's brief is a long read at 13.5px with few bold
   spans, and at 52% it read as too dark. 74% keeps headers and bold a step above it. */
.brief-pan li { color: #ffffffbd; }
.brief-row { display: none; }
@media (max-width: 960px) {
  .duo { display: block; }
  .brief-side { display: none; }
  .brief-row { display: block; margin: 0 0 36px; }
  .brief-row summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
                       padding: 12px 18px; border-radius: 12px; background: #1f1f21; color: #a8a8a8; font-size: 13.5px; }
  .brief-row summary::-webkit-details-marker { display: none; }
  .brief-row summary .tl { color: var(--whole); font-size: 18px; font-weight: 700; line-height: 1; }
  .brief-row summary .go { margin-left: auto; color: #6f6f6f; }
  .brief-row[open] summary { display: none; }
}

/* A post's cover: the whole card, edged with a hairline because its ground is the page's
   own paper and its headline would otherwise float on the page as a second h1. At 600px
   and under it squares to its right side — the sheet and the band — since the headline
   it drops is the h1 right beside it, and the band text doubles in size. */
.cover { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 16px; }
.post .cover { margin: 0 0 36px; }
@media (max-width: 600px) { .cover { aspect-ratio: 1; object-fit: cover; object-position: right; } }

/* index: a plain list, so one post and twenty use the same layout. A row with a cover
   takes the whole page, text left and cover right, as the landing page's hero does. */
.blog-head { margin-bottom: 48px; }
.posts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.posts li { padding: 36px 0; border-bottom: 1px solid var(--hair);
            display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; align-items: center; }
@media (max-width: 760px) { .posts li { display: flex; flex-direction: column-reverse; gap: 20px; } }
.posts a { display: block; text-decoration: none; }
.posts h2 { font-size: 30px; line-height: 1.2; max-width: none; }
.posts a:hover h2 { color: var(--accent); }
.posts p { color: var(--ink-2); margin: 8px 0 10px; }
.posts time { color: var(--ink-3); font-size: 14px; }