/* Home page reading feed: whole posts, most important first.

   Every rule is scoped under .home-feed, so this file changes nothing
   on any other page even though it loads site-wide (tabi's per-page
   stylesheet hook reads page.extra only, which a section cannot set).

   Progressive rendering without JavaScript: content-visibility lets the
   browser skip layout and paint for entries that are off-screen, and
   render them as they approach. Unlike a fetch-and-append feed, every
   post stays in the DOM, so find-in-page, Ctrl+End and the footer all
   keep working. */

.home-feed-post {
  content-visibility: auto;
}

/* Placeholder height per entry while it is un-rendered, bucketed by
   content size in the template (a style attribute would violate the
   CSP). Calibrated to heights measured on this page, single column at
   1440px: 22 B -> 451px, 2876 B -> 1871px, 15430 B -> 13146px. A single
   shared value made the scrollbar move ~1450px over a full scroll.
   `auto` lets the browser substitute the real height after first
   render, so any residual error affects only the first pass. */
.home-feed-xs { contain-intrinsic-size: auto 450px; }
.home-feed-s  { contain-intrinsic-size: auto 900px; }
.home-feed-m  { contain-intrinsic-size: auto 2000px; }
.home-feed-l  { contain-intrinsic-size: auto 5000px; }
.home-feed-xl { contain-intrinsic-size: auto 13000px; }

/* Separate the entries: a rule between posts, and room to breathe. */
.home-feed-post + .home-feed-post {
  border-top: 1px solid var(--divider-color, #d7d7d7);
  margin-top: 3rem;
  padding-top: 2.5rem;
}

/* The title is a link on the feed; keep it looking like a heading
   rather than body-copy link text. */
.home-feed-post > h2 {
  margin-bottom: 0.2em;
}

.home-feed-post > h2 a {
  text-decoration: none;
}

.home-feed-post > h2 a:hover,
.home-feed-post > h2 a:focus-visible {
  text-decoration: underline;
}

/* The permalink itself, shown so the address of a post is always
   visible next to its date. */
.home-feed-permalink {
  font-family: var(--code-font, monospace);
  font-size: 0.85em;
}

.home-feed-more {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider-color, #d7d7d7);
}