/* THE BLOG'S OWN STYLESHEET — the page chrome every blog surface shares, the entry list the index and the tag pages are built from, and the article body, install panel and draft banner that only a post page renders. CONTENTS, in source order, WITH THE SURFACE EACH BLOCK SERVES. ⚠ A BLOCK THAT SHIPS AHEAD OF THE PAGE THAT CONSUMES IT must be marked NO CONSUMER YET in this list, and the mark removed by whoever writes that page. This list is also the answer to "where do my rules go" for whichever blog surface you are adding: here, beside the block they belong with. the html/body overrides ..... every blog page .site, .col ................. every blog page .kicker, .h-display ......... index and tag pages .h-title .................... post pages — the post's own title, one step down .standfirst ................. index and tag pages .rule3 ...................... every page with a header — all three close it .back, .back:hover, .back.after ............... post pages, above and below the article; tag pages emit the first of the two, above the list .chips, .chip ............... index, tag and post pages .chip.active ................ tag pages only, via _BlogEntryListPartial — the one tag the reader is already on, frozen .chip.draft ................. index and tag pages, via _BlogEntryListPartial; a post page's own draft state is the .draftbar below .entry, .entry-meta, .entry-title, .entry-desc . index and tag pages, via _BlogEntryListPartial .post-body ........ post pages — ELEMENT selectors throughout, which is the design and not a shortcut; see that block .filed, .filed .lbl ......... post pages — the "Filed under" row under the article .cta, .cta-kicker, .cta-h, .cta-p, .badges, .badge, .badge-solo ............... post pages — the install panel, emitted by Pages/Blog/Post.cshtml as
holding the kicker, the heading, the supporting line and one inside .badges. ⚠ .badge HAS A SECOND CONSUMER, WITHOUT .badge-solo: the not-found panel's single action .panel-msg .................. the index's empty state, and the not-found page .err-chip, .nf-actions ...... THE NOT-FOUND PAGE ONLY, via _BlogNotFoundPartial .draftbar ................... post pages — a post's OWN draft state .draftnote .................. THE INDEX ONLY — a post page's draft state is the .draftbar above and is not styled by this rule …:focus-visible ............. every blog page — ONE grouped rule carrying every focus ring this sheet owns; it names five selectors and the block lists which markup emits each @media (max-width: 820px) ... every blog page ⚠ LOAD ORDER IS styles.css → site-chrome.css → THIS FILE, and the last position is what the html/body overrides below depend on. The first two are linked by _SiteHeadPartial; THIS ONE IS LINKED BY THE PAGE, on its own line immediately after it renders that partial. That split is deliberate and is explained at the pair in _SiteHeadPartial: a page stylesheet hardcoded into the shared head is what would stop the first non-blog page adopting it. NO CUSTOM PROPERTY IS DECLARED HERE — no colour token and no type token. The palette is declared once, in styles.css's two :root blocks, and the type scale once, in site-chrome.css; this file reads both through var() and declares neither. A second declaration site is free to drift from the first, which is the failure Copilot/memories/site-v2-milestone-resync-workflow.md exists to prevent. BlogCssTests.DeclaresNoDesignTokenOfItsOwn pins exactly that — no `--*` declaration. ⚠ IT IS NOT LITERAL-FREE, AND EVERY EXCEPTION IS THE SAME ONE: `color: #fff` on a filled element — .chip.active, .chip.draft, .cta-kicker, .badge, .err-chip, .draftbar and .post-body pre. The palette declares no white, so there is no token to read and these are the mockup's literal carried across rather than a token someone forgot to use. Nothing else in this file is a literal colour: if you are about to write a hex that is not #fff, the value belongs in styles.css's palette or does not belong here. NO !important ANYWHERE IN THIS FILE, for the same reason site-chrome.css states at length: every declaration this sheet competes with is a NORMAL declaration, so source order and specificity settle it and an !important would hide the question rather than answer it. LIFTED FROM THE MOCKUP, WITH FOUR NAMED CHANGES. Copilot/projects/website_blog's mocks file is the design of record and every colour, size, shadow and border below is copied from it. What changed, and nothing else did: 1. Its .mob class — which fakes a 390px column inside a desktop page — became real @media (max-width: 820px) rules, in the block at the foot of the file. 2. Its .body-* classes become .post-body descendant selectors, because Markdig emits classless HTML. That block carries the three consequences the swap has beyond the rename — the ul rule reaching
    , the inline-code rule reaching into 
    , and the image placeholder becoming a real replaced element — each
        written up where it sits.
     3. Its two state-SIMULATOR classes became real pseudo-classes: .entry.hov is
        .entry:hover here, widened with :focus-within so a keyboard reader gets the
        same row treatment a pointer does. (The other one, .ronav-cta.foc, belongs to
        the nav bar and was converted in site-chrome.css.) ⚠ .chip.active below is
        NOT one of these — it is a real class, set on the chip for the tag page the
        reader is already on, and it ships as the mockup wrote it.
     4. Its harness classes are dropped: the dashed token annotations, the share-card
        specimens, the legend, the contents list and the section headings. None is
        part of the design; the share-card rules exist to illustrate an off-site
        surface this site never renders. ⚠ ONE RULE IS HALF HARNESS: .figure .img is a
        div standing in for an image, in a file that loads none. Its border and shadow
        are the design and are on .post-body img; its fixed height, hatched fill and
        centred label are the stand-in and are gone, along with the narrow-viewport
        height that only the stand-in needed.
*/

/* ─────────────────────────────────────────────────────────────────────────────
   THE OVERRIDES: FOUR DECLARATIONS, IN TWO RULESETS HERE, ANSWERING THREE RULESETS IN
   styles.css. A blog page loads styles.css for its colour tokens and gets the comic's
   page treatment along with them. Count DECLARATIONS rather than rules — the mapping is
   not one-to-one, and one declaration below answers two rules above:

     styles.css html { background: var(--ink) }  → html { background: var(--paper) }

     styles.css body { background: var(--ink) }  ┐ ONE declaration answers BOTH. The
     styles.css body { background:               │ second body rule is declared far later
       repeating-linear-gradient(…), var(--ink) }┘ in the file and is the one actually in
                                                   effect: a 1px pinstripe over --ink.
                                                 → body { background: var(--paper) }

     styles.css body { color: var(--ink) }       → body { color: var(--ink) }
     styles.css body { font-family: Inter, … }   → body { font-family: var(--font-body) }
       a stack that always falls through, because nothing loads Inter

   Without the two backgrounds the blog is near-black text on a near-black page; without
   the font-family it is the system sans. `color` is the odd one out — it restates
   styles.css's own value rather than changing it, so it does nothing TODAY. It is kept
   because a re-sync that changed the marketing body colour would otherwise change the
   blog's, silently.

   🚨 THE BACKGROUND MUST STAY THE `background` SHORTHAND. The layered rule sets a
   background-IMAGE, and only the shorthand resets it; a tidier-looking
   `background-color: var(--paper)` leaves the gradient painting a dark pinstripe over
   the blog's paper.

   ⚠ THIS IS AN ACCOUNT OF WHAT IS OVERRIDDEN, NOT OF EVERYTHING styles.css DOES TO A
   BLOG PAGE. Four more of its declarations reach one and are DELIBERATELY KEPT, because
   each is wanted here or harmless: `html { scroll-behavior: smooth }` and
   `body { margin: 0; overflow-x: hidden }` from the two rulesets above, plus
   `* { box-sizing: border-box }` from a universal rule of its own. THE FIFTH IS NOW LIVE
   AND IS ANSWERED ELSEWHERE IN THIS FILE: styles.css styles bare `blockquote` — a clamp
   up to 25px at weight 900, for the comic's pull-quotes — and a Markdig-rendered quote
   in a post body is a bare blockquote. It is overridden at .post-body blockquote, in the
   post-body block, rather than here, because it is a post-body rule and not a page-level
   one; the counter-declarations are marked as such where they sit.

   Those five are the whole list, and it was MEASURED rather than reasoned about: bare
   element selectors in styles.css are exactly html, body and blockquote, plus the
   universal `*`. Everything else in that file is .comic / .movement / .panel / .p##
   scoped and reaches nothing a blog page emits. site-chrome.css, the sheet between the
   two, has no bare element selector at all.

   Losing either background, or the font-family, yields a page that is unreadable rather
   than subtly wrong, and the likeliest way to lose one is a future re-sync of styles.css
   from the marketing milestone. BlogCssTests asserts all four declarations, and
   separately asserts the styles.css side still exists to be overridden.
   ───────────────────────────────────────────────────────────────────────────── */
html {
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE DOCUMENT WRAPPER. Every blog page wraps its whole document in
   
    , and that wrapper is load-bearing beyond this rule: it is what
   opts the page into site-chrome.css's re-stated `.site .footer`, instead of the
   overlay footer styles.css draws for the comic page. Drop the wrapper and the
   footer silently pulls itself 54px up over the end of the article.
   ───────────────────────────────────────────────────────────────────────────── */
.site {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.7;
}

/* The reading column. --measure is 68ch, declared in site-chrome.css: styles.css's
   --max is the comic grid and is far too wide for prose to be read in. */
.col {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 28px 46px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE HEADER BLOCK: kicker, display heading, post title, standfirst, and the 3px rule
   that closes it. The index and the tag pages open with .h-display; a post page opens
   with .h-title instead, one step down the scale.
   ───────────────────────────────────────────────────────────────────────────── */
.kicker {
  margin: 0 0 8px;
  color: var(--night);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.h-display {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* The POST's title, as the document's h1. One step below .h-display — --type-title
   rather than --type-display — because a post page's heading sits above an article
   rather than above a catalog, and 2px more bottom margin because what follows it is a
   chip row rather than a standfirst. Wraps freely: there is no clamp, no ellipsis and no
   shrink-to-fit, and the tightened line-height is the only concession a very long title
   gets. An h1 with NO rule is not a small regression — it is the UA's 2em bold heading
   in the body face, which is why this ships with the block rather than after it. */
.h-title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.standfirst {
  margin: 0 0 22px;
  color: var(--slate);
  font-size: var(--type-body);
}

/* An 
    , stripped to one line. The UA draws it as an inset groove with a margin of
   its own, so height, margin and border are all zeroed and a single border-top is put
   back — that is what makes it one flat 3px ink rule rather than a bevelled one. */
.rule3 {
  height: 0;
  margin: 0 0 4px;
  border: 0;
  border-top: 3px solid var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE BACK LINK — "← All posts", above and below the article on a post page and
   above the list on a tag page. The `.after` variant is the second one, which needs
   a top margin the first does not.

   The post page emits both — one above the title, one after the install panel — and the
   tag page emits the first, above its list. ⚠ EMPTYING ONE OF THESE THREE RULES SHOWS UP
   NOWHERE BUT ON SCREEN: the markup emits .back and .back.after whatever these rules
   declare, so a rule left empty still matches its element and still renders — as a link
   in default UA blue, mid-page, on one blog surface and not the others.
   (The only near miss on the name elsewhere is the marketing page's unrelated
   .back-cover-title, which is a different class and reaches nothing here.)
   ───────────────────────────────────────────────────────────────────────────── */
.back {
  display: inline-block;
  margin: 0 0 20px;
  color: var(--night);
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
}

.back:hover {
  text-decoration: underline;
}

.back.after {
  margin: 30px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAG CHIPS. The base chip is a link; both modifiers below are compounded onto it
   and never written alone, so each keeps the pill shape, the 2px ink border and the
   uppercase treatment and changes only its fill.
   ───────────────────────────────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-block;
  padding: 4px 11px 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cloud);
  color: var(--night);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}

/* The tag the reader is already on, on every row of a tag page's entry list: filled
   rather than outlined, and rendered as a span rather than a link, since it would
   link to the page it is on. A real class, NOT a mockup state simulator — the entry
   row's hover fake two blocks down is the thing that had to become a pseudo-class, and
   BlogCssTests.KeepsTheFrozenActiveChipAsAClass pins the difference.

   _BlogEntryListPartial emits it when its model names an active tag, which only a tag
   page does; the index passes none, so no chip on the index can take this fill. */
.chip.active {
  background: var(--night);
  color: #fff;
}

/* The DRAFT marker, first in an entry's chip row. It can only ever render where the
   catalog is showing drafts at all, which is never in production. */
.chip.draft {
  background: var(--pink);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE ENTRY LIST — the index and the tag pages, through _BlogEntryListPartial.

   HAIRLINE-SEPARATED ROWS, NOT CARDS. A twenty-item stack of heavy bordered panels
   is unreadable; the calm list is the register this audience reads in, and the
   family resemblance to the marketing page is carried by the type, the ink rules and
   the chips instead.

   The negative margin plus matching padding is what lets the hover band bleed 12px
   wider than the column without the text moving: the row's text starts where the
   column's does, and only the band extends past it.
   ───────────────────────────────────────────────────────────────────────────── */
.entry {
  padding: 24px 12px 26px;
  margin: 0 -12px;
  border-bottom: 2px solid var(--ink-soft);
}

/* :focus-within alongside :hover, so tabbing to the title lights the whole row the
   same way pointing at it does — the mockup could only draw the pointer half.
   Written as two selectors rather than one :is(), which buys nothing here and is the
   sort of tidy that quietly changes specificity. */
.entry:hover,
.entry:focus-within {
  background: var(--cloud);
}

.entry-meta {
  margin: 0 0 9px;
  color: var(--slate);
  font-size: var(--type-caption);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

/* display:block so the whole line is the link target, not just the glyphs — the row
   is the tap target, and on a narrow screen a two-line title with an inline box
   leaves dead space beside the shorter line. */
.entry-title {
  display: block;
  margin: 0 0 9px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--type-subtitle);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
}

.entry:hover .entry-title,
.entry:focus-within .entry-title {
  text-decoration: underline;
  text-decoration-color: var(--blue);
}

.entry-desc {
  margin: 0;
  color: var(--slate);
}


/* ─────────────────────────────────────────────────────────────────────────────
   THE POST BODY — ELEMENT SELECTORS THROUGHOUT, AND THAT IS THE DESIGN.

   Markdig renders a post's Markdown to classless HTML: bare 
    , 
    , ,