/* open-blog.css: the blog as open pages rather than stacked panels.

   Asked for by the owner on 2026-09-16, after the homepage (open.css). The
   blog stood as rounded cream and pale panels on the night ground, each one
   capped by a dark heading bar, and that read as boxes stacked on boxes.
   So:

     the listing    the section panels are gone. Each article is still a
                    box, because each article is a piece of content: a
                    rounded cream card with deep ink on the night ground.
     an article     the words stand straight on the ground in cream, at a
                    reading measure of about 68 characters, centred. The
                    headings are cream, and every rule is a guide hairline.
                    A pull quote is marked by a guide line, not a plate.
                    Pictures stay boxed.
     the rail       the facts beside an article are a plain list divided by
                    guide lines. It stands to the left of the words on a wide
                    screen and becomes a strip above them otherwise.
     headings       the shared heading from open-sub.css.

   Loaded last, after open-sub.css, and it only overrides. Every selector
   starts at body.blog, so it is heavier than the matching rule in blog.css
   and pitch-blog.css and wins on weight rather than on load order. */

body.blog {
  /* The panel inset pitch-blog.css set on each section, put back to the
     plain inset the rest of the site uses now that no panel is there. */
  --open-inset: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  /* 68ch of Inter at 16px, written in rem. In ch the column was measured
     in whichever font had arrived, so it widened by about 80px when Inter
     replaced the fallback, the picture above it grew taller with it, and
     the whole article jumped down. */
  --measure: 42.875rem;
}

/* ---- Sections: no panel, cream ink straight on the ground ---- */

body.blog main .sec:not(.sec--deep) {
  margin: 0;
  padding-block: var(--sec-gap) 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  color: var(--cream);
  --inset: var(--open-inset);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--guide);
  --focus: var(--cream);
}
/* The first heading follows the masthead, which already has room under it.
   The close keeps a full gap above its dividing line as well as under it,
   so the line never touches the last card. */
body.blog .mast + .sec:not(.sec--deep) { padding-top: calc(var(--sec-gap) * 0.6); }
body.blog main .sec.closing {
  margin-top: var(--sec-gap);
  padding-top: calc(var(--sec-gap) * 0.8);
}

/* The divider over the close and the foot becomes a guide hairline that
   runs the width of the content. */
body.blog .closing::before,
body.blog .foot::before {
  left: var(--open-inset);
  right: var(--open-inset);
  height: 1px;
  background: var(--guide);
}

/* ---- The topics on the listing: small outlined pills ---- */

body.blog .filter__chip {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--guide);
}
body.blog .filter__chip:hover { background: var(--night-raised); box-shadow: inset 0 0 0 1px var(--cream); }
body.blog .filter__chip[aria-pressed="true"] { background: var(--cream); box-shadow: none; color: var(--deep); }

/* ---- The listing: every article is one cream card ---- */

body.blog .story.story--lead {
  overflow: clip;
  border-radius: var(--box-r);
  background: var(--cream);
  box-shadow: none;
}
body.blog .story--lead .pic { border: 0; border-radius: 0; }
/* The card's link reaches out past the card, so its focus ring is cream,
   which shows on the night ground. */
body.blog .story--lead .story__title a:focus-visible::after { outline-color: var(--cream); }

body.blog .rows { gap: clamp(10px, 1.2vw, 16px); border-bottom: 0; }
body.blog .rows .row {
  border-radius: var(--box-r);
  background: var(--cream);
}
body.blog .rows .row:hover { background: var(--pale); }
body.blog .rows .row__pic {
  border: 0;
  border-radius: calc(var(--box-r) - 4px);
}

/* ---- An article: the words on the ground ---- */

body.blog .post-body { padding-bottom: 0; }
body.blog .post-body .post-grid {
  margin: 0;
  padding-block: clamp(4px, 1vw, 16px) 0;
  border-radius: 0;
  background: transparent;
  --inset: var(--open-inset);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--guide);
  --focus: var(--cream);
}

/* One centred column: the lead picture a little wider than the words, and
   the facts and the words at the reading measure. */
body.blog .post-grid .post-fig {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  margin-bottom: clamp(24px, 3.4vh, 40px);
  border: 0;
  border-radius: var(--box-r);
}
body.blog .post-grid .post-rail,
body.blog .post-grid .post-text {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* The facts, as a plain list between guide lines. */
body.blog .post-rail .facts { border-top: 1px solid var(--guide); }
body.blog .post-rail .facts > div { border-bottom: 1px solid var(--guide); }
body.blog .post-rail .facts dt,
body.blog .post-rail .post-rail__label { color: var(--gold); }
body.blog .post-rail .facts dd { color: var(--cream); }
body.blog .post-rail .chips a { border-radius: 999px; }
body.blog .post-rail .chips a:hover { background: var(--cream); color: var(--deep); }

/* Below the wide layout the facts are a strip above the words. blog.css
   only does this under 900px, so the range up to the wide layout is added
   here, where the rail no longer fits beside a centred column. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  body.blog .post-body .post-grid { grid-template-columns: minmax(0, 1fr); }
  body.blog .post-grid .post-fig,
  body.blog .post-grid .post-rail,
  body.blog .post-grid .post-text { grid-column: 1; }
  body.blog .post-grid .post-rail { position: static; margin-bottom: 28px; }
  body.blog .post-rail .facts { display: flex; flex-wrap: wrap; column-gap: 28px; }
  body.blog .post-rail .facts > div { flex: 1 1 10rem; }
}
@media (max-width: 1199.98px) {
  body.blog .post-grid .post-rail { margin-bottom: 28px; }
}

/* On a wide screen the words keep the centre and the facts stand in the
   margin to their left, as wide as they were before. */
@media (min-width: 1200px) {
  body.blog .post-body .post-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: var(--blog-gap);
  }
  /* The picture spans from the left edge of the facts to the same
     distance past the words on the right, so its edge lines up with them. */
  body.blog .post-grid .post-fig {
    grid-column: 1 / -1;
    max-width: calc(var(--measure) + 2 * (var(--blog-rail) + var(--blog-gap)));
  }
  body.blog .post-grid .post-rail {
    grid-column: 1;
    justify-self: end;
    width: min(100%, var(--blog-rail));
    margin: 0;
  }
  body.blog .post-grid .post-text { grid-column: 2; }
}

/* The words themselves. */
body.blog .post-grid .post-text,
body.blog .post-text p { color: var(--cream); }

body.blog .post-text h2 { color: var(--cream); }
body.blog .post-text h2::before { height: 1px; background: var(--guide); }

body.blog .post-text a { color: var(--cream); }

body.blog .post-text ul li::before { background: var(--gold); }

/* A pull quote: larger cream words beside a guide line, with no plate. */
body.blog .post-text blockquote {
  margin-right: 0;
  padding: 4px 0 4px clamp(18px, 2.2vw, 28px);
  border-left: 1px solid var(--guide);
  border-radius: 0;
  background: transparent;
}
body.blog .post-text blockquote p { color: var(--cream); }

body.blog .post-text figure { margin-right: 0; }
body.blog .post-text figure img {
  border: 0;
  border-radius: var(--box-r);
}
body.blog .post-text figcaption { color: var(--pale); }

body.blog .post-text hr {
  height: 1px;
  background: var(--guide);
}

/* The sources: small pale words under a guide line. */
body.blog .post-text p.sources {
  padding: 14px 0 0;
  border-top: 1px solid var(--guide);
  border-radius: 0;
  background: transparent;
  color: var(--pale);
}
/* Where a divider already stands over the sources, it is their line. */
body.blog .post-text hr + p.sources { padding-top: 0; border-top: 0; }

/* ---- More articles: cards like the listing's ---- */

body.blog .more .more__card {
  border-radius: var(--box-r);
  background: var(--cream);
  color: var(--deep);
}
body.blog .more .more__card:hover { background: var(--pale); color: var(--deep); }
body.blog .more .more__card:hover .more__dir,
body.blog .more .more__card:hover .more__meta { color: var(--moss); }
body.blog .more .more__card:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* The deep button would vanish on the night ground, so it is cream. */
body.blog .more .btn--deep { background: var(--cream); color: var(--deep); --focus: var(--cream); }
body.blog .more .btn--deep:hover { background: var(--pale); }

body.blog .post-text ol li::before { color: var(--gold); }
body.blog .post-text .optional { color: var(--cream); }