/* pitch-blog.css: the blog stands on the same pitch as the homepage.

   The owner chose the homepage's mowed pitch (pitch.css) for every page on
   2026-09-15, with each part of the site allowed a slightly different
   look. The blog is the reading room: its stripes are wider and quieter,
   the two greens sit even closer together, and the light bands turn into
   rounded panels on the grass.

   The masthead and an article's head stand straight on the grass, with the
   blog's two gold rules kept. On the listing, the newest article sits on a
   pale panel and the earlier articles are small rounded cards inside a
   cream panel. On an article, the lead picture and the words sit in one
   tall cream panel at the same reading width as before.

   Loaded after blog.css, and it only overrides. */

.blog {
  --mow-a: var(--page-ground);
  --mow-b: #0F2515;
  --mow-h: 180px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
  --gap: clamp(28px, 4.4vw, 72px);
}

html:has(body.blog) { background: var(--mow-a); scrollbar-color: var(--pale) var(--mow-a); }

body.blog {
  background-color: var(--mow-a);
  /* The mown stripes were taken off on 2026-09-16 at the owner's word:
     the ground is one plain night green. */
  background-image: none;
  color: var(--cream);
}

/* ---- The heads stand on the grass ---- */

.blog .mast,
.blog .post-head,
.blog .sec--deep { background: transparent; }
.blog .mast .tab,
.blog .post-head .tab { background: transparent; }

/* ---- Panels ----
   A light band keeps its own tone and becomes a rounded panel, set in from
   the screen edge. Inside it the inset is measured from the panel, so the
   words still line up with the head above on a wide screen. */

.blog .sec:not(.sec--deep),
.blog .post-grid {
  margin-inline: var(--fg);
  border-radius: var(--panel-r);
  --inset: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter) - var(--fg)));
}
.blog .sec:not(.sec--deep) {
  --sec-pad: clamp(44px, 6.5vh, 88px);
  margin-bottom: var(--gap);
  overflow: clip;
}

/* The heading on a panel is plain deep ink, with no night block behind it. */
.blog .sec:not(.sec--deep) .sec__head .tab {
  background: transparent;
  color: var(--deep);
  --focus: var(--deep);
}

/* A six yard box round each heading was tried and taken out on review: at
   this size it read as a stray frame, not as chalk. */

/* ---- The listing ---- */

.blog .story--lead {
  border-radius: 18px;
  overflow: clip;
  box-shadow: none;
}
.blog .story--lead .pic { border: 0; }

.blog .rows {
  display: grid;
  gap: 12px;
  border-bottom: 0;
}
.blog .row {
  margin-inline: 0;
  padding: clamp(16px, 2vw, 24px);
  background: var(--cream-2);
  border-radius: 16px;
}
.blog .row::before { display: none; }
.blog .row:hover { background: var(--pale); }
.blog .row__date time { border-radius: 8px; }
.blog .pic { border-radius: 12px; }

/* ---- An article ---- */

.blog .post-body {
  padding-bottom: var(--gap);
  background: transparent;
}
.blog .post-body::before { display: none; }
.blog .post-grid {
  padding-block: clamp(20px, 3vw, 44px) clamp(44px, 7vh, 96px);
  background: var(--cream);
}
.blog .post-fig { border: 0; }
.blog .post-text blockquote,
.blog .post-text p.sources { border-radius: 12px; }
.blog .post-text figure img { border-radius: 12px; }

.blog .more__card { border-radius: 16px; }

/* ---- The close and the foot ---- */

.blog .closing { position: relative; }
.blog .closing::before,
.blog .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}
.blog .foot {
  position: relative;
  background: transparent;
  border-top: 0;
}

/* ---- Narrower ---- */

@media (max-width: 600px) {
  .blog { --mow-h: 120px; --panel-r: 16px; }
}