/* ============================================================================
   editorial.css — the global styles the React SPA still draws from directly at "/"
   (the scrolling document). Loaded LAST, after colors/panel/application, so it
   overrides the fixed wall-shell body rules. Every colour comes from colors.css
   (var(--…)); nothing is hardcoded here.

   Only classes the SPA actually emits live here. Whole families that moved to
   per-component vanilla-extract modules — the journal (journal.css.ts), the
   calendar (cal.css.ts), the sparkline (todayspark.css.ts / sparkline.css.ts),
   the almanac (almanac.css.ts), the old masthead nav/lang toggle (shell.css.ts) —
   were removed from here once those modules superseded them. Keep it that way:
   a component's styles belong in its own .css.ts, not in this global sheet.
   ============================================================================ */

/* Undo the fixed wall-app shell (panel.css sets body overflow:hidden / fixed
   stage) so this page scrolls like a document. */
html { height: auto; }
body.ed {
  height: auto; min-height: 100vh; overflow: visible;
  background: var(--paper); color: var(--ink);
  font-family: var(--serif);
}

/* Sign in — a plain mono link in the masthead voice, not a chromed icon button. Same size and
   tracking as the nav items it sits beside; it was 10px where they are 11. */
.ed-signin { margin: 0; }
.ed-signin-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 0; cursor: pointer; padding: var(--sp-1) var(--sp-1);
  font: var(--ms-sm) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-soft); transition: color var(--dur-fast) ease; white-space: nowrap;
}
.ed-signin-btn:hover { color: var(--ink); }
.ed-signin-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Account avatar (signed-in only) — a small ringed image, no heavy chrome; links
   straight to /account (no dropdown; sign-out lives there). */
.ed-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctrl-sm); height: var(--ctrl-sm); padding: 0; border: 0;
  border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--ink-2); overflow: hidden; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow var(--dur-fast) ease;
}
.ed-avatar:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.ed-avatar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ed-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-avatar-initial { font: var(--ms-md) var(--mono); color: var(--ink-2); }

/* ---- The collage: dominant, full-bleed to the viewport edges ---- */
.ed-stage {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: var(--sp-6) clamp(var(--sp-5), 5vw, var(--sp-9)) var(--sp-1);
}
/* Hold a full viewport while /api/overview is in flight, so the FOOTER starts below the
   fold and nothing the reader can see jumps once data lands and fills this. */
.ed-stage.is-waiting { min-height: 100vh; }
.ed-stage-waiting {
  aspect-ratio: 800 / 480;
  max-height: 76vh;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.ed-hero-collage { position: relative; display: flex; align-items: center; justify-content: center; }
.ed-hero-collage .collage__bg { display: none; }
.ed-hero-collage svg { width: 100%; height: auto; max-height: 76vh; display: block; }
.ed-tip {
  position: absolute; left: 50%; bottom: var(--sp-2); transform: translateX(-50%);
  margin: 0; padding: var(--sp-2) var(--sp-4); background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--raised);
  font: italic var(--fs-xs)/var(--lh-snug) var(--serif); color: var(--ink);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-med) ease;
}
.ed-tip[aria-hidden="false"] { opacity: 1; }
/* 500, not 600/700: only the 400 and 500 weights of EB Garamond are bundled, so anything above
   500 was the browser faking a bold. */
.ed-tip .ct-name { font-style: normal; font-weight: 500; }
.ed-tip .ct-n { font-style: normal; font-weight: 500; }
.ed-tip .ct-w { color: var(--ink-soft); }

/* The collector's name on a dúchas credit — the one fragment of the old lore-credit rules
   still emitted here; everything else moved to the component that draws it (lists.css.ts).
   Live's roll, New & notable, the figures line and the citation line all left this sheet: they
   were carrying 8.5/9/11/12/15px type and a 0.82em gloss, none of it on either scale. */
.lore-credit-collector { color: var(--ink-soft); }

/* Follow — a species subscription worn as a quiet checkbox. Shown only to
   signed-in users; the card is a <button>, so the control is a sibling in a
   positioned cell (never nested). Off = muted engraved outline, on = inked accent.
   A line icon in a muted weight, in keeping with the ink-on-paper voice.
   Still used by the Directory (components/directory.css.ts) via .follow-card. */
.follow {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft); line-height: 1;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: color var(--dur-med) ease;
}
.follow .ti { font-size: var(--icon-lg); opacity: 0.55; transition: opacity var(--dur-med) ease; }
.follow:hover { color: var(--ink-2); }
.follow:hover .ti { opacity: 1; }
.follow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.follow.is-on { color: var(--accent); }
.follow.is-on .ti { opacity: 1; }
/* Corner mark on a directory plate — top-LEFT, matching the follow control's place on the
   detail card; clear of the bottom-aligned bird. Padded to a real 44px target: it was a 27px
   one, the smallest thing on the site you are actually meant to tap. */
.follow-card {
  position: absolute; top: 0; left: 0; z-index: var(--z-base);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ctrl-lg); min-height: var(--ctrl-lg);
  margin: calc(var(--sp-3) * -1) 0 0 calc(var(--sp-3) * -1);
}
.follow-card .ti { font-size: var(--icon-lg); }

/* ---- The reading documents: About, Sources, and the standing pages ----
   About splits its markdown at each `## ` and lays the sections out as an editorial page — a
   centred lead, then a two-column grid. Sources is the bibliography, set in columns the way a
   printed one is. The standing pages (privacy, the letter) are one measured column.

   All three are the SAME document, typographically, and are written as one family here: one
   link treatment, one heading treatment, one fine-print size. Before this they carried three
   copies of the link rule and eleven hand-written sizes (13/14/15/16/20/22/27px) for four
   roles, and the standing pages headed their sections in small-caps mono while About headed
   the identical role in the serif (§14). */
.ed-about { padding: var(--sp-2) 0 var(--sp-5); }
.ed-biblio { padding: var(--sp-2) 0 var(--sp-5); max-width: 60rem; margin: 0 auto; }
.ed-page { padding: var(--sp-2) 0 var(--sp-6); max-width: var(--measure-wide); margin: 0 auto; }

/* One link, three documents. */
.ed-about a, .ed-biblio a, .ed-page a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--ink-soft); text-underline-offset: var(--uline-prose);
  transition: text-decoration-color var(--dur-fast) ease;
}
.ed-about a:hover, .ed-biblio a:hover, .ed-page a:hover { text-decoration-color: var(--ink); }
.ed-about a:focus-visible, .ed-biblio a:focus-visible, .ed-page a:focus-visible,
.ed-page-sample:focus-visible, .ed-page-btn:focus-visible, .ed-about-repo:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.ed-about em, .ed-biblio-cols em { font-style: italic; }
.ed-about strong, .ed-biblio-cols strong, .ed-page-body strong { font-weight: 500; }

/* One section heading, three documents: the serif title, at one size and weight. The standing
   pages used to set this exact role as an 11px tracked mono label, so the same heading read as
   a caption on one page and as a title on the next (§14).
   The RULE is About's alone: there it caps a grid cell, and a column wants a lid. A privacy
   notice is three paragraphs read straight through, and four ruled headings would turn it into
   a ledger — so the standing pages take the type and leave the rule. */
.ed-about-cell > h2, .ed-page-body h2 {
  font: 500 var(--fs-lg)/var(--lh-snug) var(--serif); color: var(--ink);
  margin: var(--sp-6) 0 var(--sp-3);
  text-wrap: balance;
}
.ed-about-cell > h2 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ink);
}

/* One body paragraph and one list, three documents. */
.ed-about-cell p, .ed-page-body p { font: var(--fs-base)/var(--lh-relaxed) var(--serif); color: var(--ink); margin: 0 0 var(--sp-3); }
.ed-about-cell ul:not(.ed-about-links), .ed-page-body ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.ed-about-cell li:not(.ed-about-links li), .ed-page-body li {
  font: var(--fs-base)/var(--lh-relaxed) var(--serif); color: var(--ink); margin: 0 0 var(--sp-2);
}
.ed-about-cell li::marker, .ed-page-body li::marker, .ed-biblio-cols li::marker { color: var(--ink-soft); }

/* The lead — the station's story and dedication, the one place that reads as a statement. */
.ed-about-lead {
  max-width: var(--measure-wide); margin: var(--sp-3) auto 0; text-align: center;
  padding-bottom: var(--sp-7); border-bottom: 1px solid var(--rule);
}
.ed-about-hero { display: block; width: 132px; height: auto; margin: 0 auto var(--sp-5); }
.ed-about-eyebrow {
  font: 500 var(--ms-sm)/var(--lh-snug) var(--mono); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--sp-5);
}
.ed-about-lead p { font: var(--fs-md)/var(--lh-relaxed) var(--serif); color: var(--ink); margin: 0 auto var(--sp-4); max-width: var(--measure-prose); }
.ed-about-lead p:last-child { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.ed-about-lead hr { display: none; }

.ed-about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-8);
  margin: var(--sp-7) auto; max-width: 60rem;
}

/* "The community" — the station's outward links (repos, Bluesky, Ko-fi) as one list, each
   led by its own glyph. One treatment for all of them: a support link is not a louder thing
   than a repo, it is another door into the same place. */
.ed-about-links { list-style: none; margin: 0; padding: 0; }
.ed-about-links li { margin: 0 0 var(--sp-2); line-height: var(--lh-normal); }
.ed-about-repo { font: 500 var(--fs-base)/var(--lh-snug) var(--serif); text-decoration: none; }
.ed-about-repo:hover { text-decoration: underline; text-decoration-color: var(--ink-soft); }
.ed-about-repo .ti { color: var(--ink-soft); margin-right: var(--sp-1); font-size: var(--icon); }
.ed-about-note { color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---- Sources: the bibliography's own furniture ----
   The entries stay at the fine-print size and the era subheads stay in the mono: this is
   reference apparatus, an index to be scanned rather than prose to be read, and the mono
   subhead is doing an index's job. Everything else it shares with the other two documents. */
.ed-biblio-head, .ed-page-title {
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 2px solid var(--ink);
}
.ed-biblio-head h2, .ed-page-title {
  font: 500 var(--fs-xl)/var(--lh-tight) var(--serif); margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.ed-page-title { margin-bottom: var(--sp-5); }
.ed-biblio-head p { font: var(--fs-base)/var(--lh-relaxed) var(--serif); color: var(--ink-soft); margin: 0; max-width: var(--measure-wide); }
.ed-biblio-cols { column-count: 2; column-gap: var(--sp-8); }
.ed-biblio-cols > :first-child { margin-top: 0; }
.ed-biblio-cols h3 {
  font: 500 var(--ms-sm)/var(--lh-snug) var(--mono); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-soft); margin: var(--sp-5) 0 var(--sp-3);
  break-after: avoid;
}
.ed-biblio-cols p { font: var(--fs-xs)/var(--lh-relaxed) var(--serif); color: var(--ink); margin: 0 0 var(--sp-3); break-inside: avoid; }
.ed-biblio-cols ul { margin: var(--sp-1) 0 var(--sp-3); padding-left: var(--sp-4); break-inside: avoid; }
.ed-biblio-cols li { font: var(--fs-xs)/var(--lh-relaxed) var(--serif); color: var(--ink); margin: 0 0 var(--sp-2); }

/* The letter page's call to action — the sample link, the way in, and the fine print that
   restates the two-step opt-in so nobody can mistake signing in for subscribing. */
.ed-page-cta { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.ed-page-sample { display: inline-block; font: 500 var(--fs-base)/1 var(--serif); margin-bottom: var(--sp-4); }
.ed-page-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 0; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--paper);
  font: 500 var(--fs-base)/1 var(--serif);
  min-height: var(--ctrl-lg); padding: 0 var(--sp-5); border-radius: var(--radius-sm);
}
.ed-page-btn:hover { opacity: 0.86; }
.ed-page-fine { font: var(--fs-xs)/var(--lh-relaxed) var(--serif); color: var(--ink-soft); margin: var(--sp-4) 0 0; }

@media (max-width: 720px) {
  .ed-about-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ed-about-lead p { font-size: var(--fs-base); }
  .ed-biblio-cols { column-count: 1; }
}

/* ── Plate-citation panel (bird-art credits; ART_HARVEST.md, CLAUDE.md §8a) ──────────────
   House hand: prose in the serif, every label + licence token in the mono, square corners,
   left-aligned. One block per image on the page/modal. Rendered by collage/_plate_citation.haml.

   Every colour here used to carry a fallback from an older, warmer palette — and two of them
   (--paper-soft, --warn) name variables that do not exist at all, so this panel was the one
   surface on the site painted in beige and brick. It is on the station's own colours now. */
.plate-citation {
  margin: var(--sp-5) 0 0; padding: var(--sp-4);
  border: 1px solid var(--rule); border-radius: var(--radius-none);
  background: var(--paper-2); color: var(--ink); text-align: left;
}
.plate-citation__title {
  margin: 0 0 var(--sp-3); font: 500 var(--ms-sm)/var(--lh-snug) var(--mono);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft);
}
.plate-citation__item {
  margin: 0 0 var(--sp-3); padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--rule);
}
.plate-citation__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.plate-citation__work { margin: 0; font: 500 var(--fs-md)/var(--lh-snug) var(--serif); }
.plate-citation__work a { color: inherit; text-decoration: underline; text-underline-offset: var(--uline-prose); }
.plate-citation__by, .plate-citation__holder {
  margin: var(--sp-1) 0 0; font: var(--fs-xs)/var(--lh-snug) var(--serif); color: var(--ink-soft);
}
.plate-citation__rights {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-3) 0 0; align-items: baseline;
}
.plate-citation__label {
  font: 500 var(--ms-sm)/var(--lh-snug) var(--mono); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-soft);
}
.plate-citation__rights dd { margin: 0; }
.plate-citation__prose { font: var(--fs-xs)/var(--lh-normal) var(--serif); }
.plate-citation__licence { font-size: var(--ms-md); font-family: var(--mono); color: inherit; }
.plate-citation__licence[href] { text-decoration: underline; text-underline-offset: var(--uline-prose); }
.plate-citation__nc { font-size: var(--ms-md); font-family: var(--mono); color: var(--red); }