/* ==========================================================================
   Seattle Trendlines — site CSS. "Weekend Edition" (issue #26).

   The design: a nameplate between two hairlines, no navbar, one reading
   column, serif throughout, and one accent. All the character is in the type
   and the space around it, so the small stuff matters — tracking on the
   nameplate, the seam between stacked posts, the source line.

   Layout notes for anyone editing this:
   - The header is NOT Quarto's navbar. scripts/build_header.py injects it into
     every rendered page after the render (it carries the latest post's date).
   - Post pages keep Quarto's own title block; this file restyles it and
     reorders it (topic above the headline) rather than replacing the template.
   - The homepage is assembled by scripts/build_home_feed.py, which stacks each
     post's whole <main> — title block included — inside <article class="home-post">.
     So every post-page rule here has to work inside .home-post too, which is
     why the selectors below don't lean on page-level context.
   - The index page's list is written by scripts/build_index.py into
     #sb-index-region; its topic filter is CSS-only (radios + :checked), and the
     per-topic rules are generated there because the topic list is data.
   ========================================================================== */

/* Source Serif 4, latin subset, variable (weight 200–900 + optical size).
   The optical-size axis is why this is a variable font and not two statics:
   the nameplate at 31px and the body at 19px want different letterforms. */
@font-face {
  font-family: "Source Serif 4 Var";
  src: url("fonts/SourceSerif4-Variable-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Var";
  src: url("fonts/SourceSerif4-Variable-Italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* paper and ink */
  --sb-paper:  #FAFAF8;
  --sb-ink:    #1A1D1F;
  --sb-mute:   #666E70;
  --sb-faint:  #9BA3A4;
  --sb-rule:   #E0E2DE;

  /* the one accent: the teal the charts already use, a shade deeper so it
     holds up as small text */
  --sb-accent: #245D6B;
  --sb-mark:   #C2541B;   /* chart's warm accent — used nowhere but link hover */

  --sb-serif: "Source Serif 4 Var", "Iowan Old Style", "Palatino Linotype",
              Palatino, Georgia, "Times New Roman", serif;
  /* the small uppercase furniture stays in the system sans: it reads crisper
     at 10–11px than any serif, and costs nothing to load */
  --sb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --sb-measure: 700px;    /* the reading column, charts included */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: var(--sb-serif);
  font-size: 1.16rem;         /* ~18.5px */
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sb-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sb-mark); }
:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  color: var(--sb-ink);
  font-weight: 600;
  letter-spacing: -0.013em;
  line-height: 1.15;
  text-wrap: balance;
}

/* One centred column, and Quarto's grid gets out of the way.

   Quarto lays #quarto-content out as a CSS grid with margin columns either side
   for TOCs and margin captions. This site has neither, so the empty right-hand
   column was pushing the reading column left of centre while the nameplate
   (which is not in the grid) stayed centred — the two didn't line up. Dropping
   the container to a block and centring the column by margin fixes both page
   layouts (article for posts, full for the homepage and index); the footer is
   inside this container too and is unaffected. */
#quarto-content.page-columns { display: block; }
.page-columns .content,
#quarto-document-content {
  max-width: var(--sb-measure);
  margin-inline: auto;
  padding-inline: 22px;
}
main img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   The nameplate (injected by scripts/build_header.py)
   -------------------------------------------------------------------------- */

.sb-head { max-width: 940px; margin: 0 auto; padding: 14px 22px 0; }

.sb-util {
  display: flex; justify-content: flex-end; gap: 18px;
  font-family: var(--sb-sans); font-size: 0.63rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sb-util a { color: var(--sb-mute); text-decoration: none; }
.sb-util a:hover { color: var(--sb-ink); }

.sb-np { text-align: center; padding-top: 20px; }
.sb-hair { border-top: 1px solid var(--sb-ink); }
.sb-word {
  display: block;
  font-size: clamp(1.15rem, 2.9vw, 1.7rem);
  /* wide tracking is the whole nameplate, and uppercase letter-spacing adds a
     trailing gap after the final letter — the left padding puts that back so
     the block sits optically centred rather than a hair to the left */
  letter-spacing: 0.38em;
  padding: 1.05rem 0 1.05rem 0.38em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  color: var(--sb-ink);
  text-decoration: none;
}
.sb-word:hover { color: var(--sb-ink); }
.sb-dl {
  font-family: var(--sb-sans); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sb-mute);
  margin: 0.75rem 0 0;
}
.sb-dl .sep { color: var(--sb-faint); padding: 0 0.35em; }

@media (max-width: 460px) {
  /* keep the wordmark on one line at phone widths */
  .sb-word { letter-spacing: 0.2em; padding-left: 0.2em; font-size: 1.02rem; }
  .sb-dl { letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   Post pages — Quarto's own title block, restyled and reordered.

   Quarto emits: header#title-block-header > .quarto-title (h1.title +
   .quarto-categories) + .quarto-title-meta (the "Published" date). V4 wants
   the topic ABOVE the headline and the date below it, so both levels get an
   explicit order — that way it works whether Quarto nests the categories
   inside .quarto-title or hangs them off the header.
   -------------------------------------------------------------------------- */

#title-block-header,
.home-post #title-block-header { display: flex; flex-direction: column; margin: 0 0 0.4rem; }
#title-block-header .quarto-title { display: flex; flex-direction: column; order: 1; }
#title-block-header .quarto-categories { order: -1; }
#title-block-header .quarto-title-meta { order: 2; }

/* topic = the kicker */
#title-block-header .quarto-categories {
  display: flex; flex-wrap: wrap; gap: 0 0.55em;
  font-family: var(--sb-sans); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sb-accent);
  margin: 0 0 0.85rem; padding: 0; border: 0;
}
#title-block-header .quarto-category {
  background: none; border: 0; padding: 0; margin: 0; opacity: 1;
  font-size: inherit; color: inherit; border-radius: 0;
}
#title-block-header .quarto-category + .quarto-category::before {
  content: "·"; color: var(--sb-faint); padding-right: 0.55em;
}

h1.title {
  font-size: clamp(1.85rem, 4.1vw, 2.6rem);
  line-height: 1.09;
  letter-spacing: -0.015em;
  font-weight: 600;
  max-width: 24ch;
  margin: 0;
}

/* the byline: date only, in the same register as the kicker. Quarto labels it
   "Published" in a heading above the value — the label goes. */
#title-block-header .quarto-title-meta { display: block; margin: 1.15rem 0 0; }
#title-block-header .quarto-title-meta-heading { display: none; }
#title-block-header .quarto-title-meta-contents,
#title-block-header .quarto-title-meta-contents p,
#title-block-header p.date {
  font-family: var(--sb-sans); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sb-mute);
  margin: 0;
}

/* the chart is the lede: air above it, none of Quarto's figure chrome */
#quarto-document-content > p:has(> img),
.home-post p:has(> img) { margin: 2.1rem 0 0; }
figure { margin: 2.1rem 0 0; }

#quarto-document-content > p,
.home-post > p { margin: 1.5rem 0 0; }

/* Source line under the chart (::: {.post-source}).

   The mockup set this in small caps, which looked right on a two-line source.
   Real ones run to four lines and are mostly acronyms and series IDs — BLS,
   CES, NSA, SEAT653MFGN — and small caps leaves those at full height while
   shrinking everything around them, so the line reads as mixed-height noise
   exactly where a reader is trying to pick out an identifier. Plain serif,
   a size down from the body, with the hairline above it doing the separating. */
.post-source, figure figcaption {
  font-family: var(--sb-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #454C4F;
  margin-top: 2rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--sb-rule);
}
.post-source a, figure figcaption a { color: var(--sb-accent); }

/* --------------------------------------------------------------------------
   Homepage feed (scripts/build_home_feed.py)
   -------------------------------------------------------------------------- */

#home-feed { max-width: var(--sb-measure); margin: 0 auto; }
.home-post { padding: 0; }

/* The seam. The homepage stacks whole posts, so this is the join a reader
   sees more than anything else on the site: a short centred rule, and the
   date of the post below it. */
.home-post + .home-post { margin-top: 3.4rem; padding-top: 3.4rem; position: relative; }
.home-post + .home-post::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; border-top: 1px solid var(--sb-rule);
}

/* Headlines in the feed are links, but they read as headings. */
.home-post-title-link { color: var(--sb-ink); text-decoration: none; }
.home-post-title-link:hover { color: var(--sb-mark); }

/* "See all N charts" after the last stacked post (the feed is capped) */
.home-more {
  max-width: var(--sb-measure); margin: 3.4rem auto 0; padding-top: 1.6rem;
  border-top: 1px solid var(--sb-rule); text-align: center;
}
.home-more a {
  font-family: var(--sb-sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sb-accent); text-decoration: none;
}
.home-more a:hover { color: var(--sb-mark); text-decoration: underline; }

/* --------------------------------------------------------------------------
   The index page (scripts/build_index.py → #sb-index-region)
   -------------------------------------------------------------------------- */

/* On the index the page title is a section label, not a headline. :has() lets
   this stay CSS-only — no per-page body class to keep in sync. The id in the
   selector isn't decoration: it has to outrank `.page-columns .content` above,
   which would otherwise hold the index to the narrower reading measure. */
#quarto-document-content:has(#sb-index-region) h1.title {
  font-size: 1.45rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; max-width: none;
}
#quarto-document-content:has(#sb-index-region) .quarto-title-meta { display: none; }
#quarto-document-content:has(#sb-index-region) { max-width: 880px; }
#quarto-document-content:has(#sb-index-region) .subtitle,
.sb-index-sub {
  font-family: var(--sb-sans); font-size: 0.87rem; line-height: 1.5;
  color: var(--sb-mute); margin: 0.55rem 0 0; letter-spacing: 0;
  text-transform: none;
}

/* the topic filter: real radios, visually hidden, so it works with no
   JavaScript and stays keyboard-operable (arrow keys move between topics) */
.sb-filter-input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sb-filters {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.05rem;
  font-family: var(--sb-sans); font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.6rem 0 0; padding: 0.85rem 0;
  border-top: 1px solid var(--sb-rule); border-bottom: 1px solid var(--sb-rule);
}
.sb-filters label { color: var(--sb-mute); cursor: pointer; }
.sb-filters label:hover { color: var(--sb-ink); }
.sb-filters label i {
  font-style: normal; font-size: 0.63rem; color: var(--sb-faint);
  margin-left: 0.35em; font-variant-numeric: tabular-nums;
}

/* month heading, set large — the one place the index raises its voice */
.sb-month { display: flex; align-items: baseline; gap: 0.85rem; margin: 2.4rem 0 0.35rem; }
.sb-month b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.sb-month span {
  font-family: var(--sb-sans); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sb-mute);
}

.sb-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: 1px solid var(--sb-rule);
}
.sb-row .day {
  font-family: var(--sb-sans); font-size: 0.72rem; color: var(--sb-faint);
  font-variant-numeric: tabular-nums;
}
.sb-row .t { font-size: 1.16rem; line-height: 1.32; }
.sb-row .t a { color: var(--sb-ink); text-decoration: none; }
.sb-row .t a:hover { color: var(--sb-mark); text-decoration: underline; }
.sb-row .g {
  font-family: var(--sb-sans); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sb-accent); white-space: nowrap;
}
.sb-empty {
  font-family: var(--sb-sans); font-size: 0.87rem; color: var(--sb-mute);
  padding: 1.4rem 0 0;
}

@media (max-width: 560px) {
  .sb-row { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .sb-row .g { grid-column: 2; white-space: normal; }
}

/* Quarto's own listing still renders on this page when the injector hasn't run
   (a local `quarto render` with no post-render step). Keep it legible rather
   than half-styled. */
.quarto-listing .listing-title { font-weight: 600; }
.quarto-listing .listing-date { font-family: var(--sb-sans); font-size: 0.8rem; color: var(--sb-mute); }

/* --------------------------------------------------------------------------
   Per-post contact line (scripts/build_contact.py)

   Sits inside <main>, so it travels with the post into the homepage feed and
   appears under each stacked article — that's intended; it's per-post
   furniture, not site chrome. Set quiet: it should read as a footnote under
   the source line, never as a call to action competing with the chart.
   -------------------------------------------------------------------------- */

.sb-contact {
  max-width: var(--sb-measure); margin: 2.2rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--sb-rule);
}
.sb-contact p {
  margin: 0; font-family: var(--sb-sans); font-size: 0.76rem; line-height: 1.6;
  color: var(--sb-faint);
}
.sb-contact a { color: var(--sb-mute); text-decoration: none; }
.sb-contact a:hover { color: var(--sb-mark); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nav-footer {
  border-top: 1px solid var(--sb-rule);
  margin-top: 4rem; padding: 1.4rem 0;
  font-family: var(--sb-sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sb-faint);
}
.nav-footer a { color: var(--sb-mute); text-decoration: none; }