/* Crawford Site — shared article body styles
   ==========================================
   Extracted 2026-08-22. Linked after /assets/theme.css and /assets/chrome.css,
   before each article's inline <style>, so an article overrides anything here
   by keeping its own declaration.

   SCOPE — the 15 generator-produced articles (2..16) and every future one.
   `scripts/publish-writing-article.cjs` emits the link instead of the block, so
   a new post inherits this rather than another copy.

   crawford-writing-1-need-beneath-the-want.html is DELIBERATELY NOT ON THIS
   FILE. It is the original hand-built article and its body CSS is a different
   shape: it carries .article-body p.lede, .article-body em and
   .article-body p strong, which the generator template has no equivalent for,
   and it lacks seven selectors the template defines. Linking it here would ADD
   styling it never had — the same majority-rule error chrome.css already made
   once and had to be rebuilt for. It keeps its own inline CSS until someone
   deliberately reworks that article.

   The rule for what lives here: all 15 must define the selector AND agree on
   the value, absence counting as a value.

   Verify any change with:  node scripts/check-computed-styles.mjs --all
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
.article-hero {
  background: radial-gradient(circle at 82% 8%, rgba(var(--accent-rgb), 0.2), transparent 55%), var(--bg);
  border-bottom: 1px solid rgba(var(--text-faint-rgb), 0.20);
  padding: 8.5rem 2rem 2rem;
}
.article-hero__inner, .article-layout, .read-next__inner {
  margin: 0 auto;
  width: min(1100px, 100%);
}
.article-hero__eyebrow {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.article-hero h1 {
  font-family: var(--serif-display);
  font-size: clamp(2.1rem,4.6vw,4rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.article-hero__meta {
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 1rem 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0,1fr) 300px;
  padding: 2.5rem 2rem 4rem;
}
.article-main figure {
  border: 1px solid rgba(var(--text-faint-rgb), 0.25);
  margin-bottom: 2rem;
}
.article-main figcaption {
  border-top: 1px solid rgba(var(--text-faint-rgb), 0.25);
  color: var(--text-faint);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  padding: 0.8rem 1rem;
  text-transform: uppercase;
}
.article-body p, .article-body li {
  color: var(--text-muted);
  font-family: var(--serif-body);
  font-size: 1.02rem;
  line-height: 1.9;
}
.article-body p {
  margin-bottom: 1.35rem;
}
.article-body p:first-child {
  color: var(--text);
  font-size: 1.12rem;
}
.article-body ul {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.35rem 1.4rem;
}
.article-body h2 {
  font-family: var(--serif-display);
  font-size: 1.8rem;
  font-weight: 300;
  margin: 1.6rem 0 0.9rem;
}
.article-body a {
  color: var(--accent);
}
.article-aside {
  align-self: start;
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 7rem;
}
.aside-panel {
  background: var(--surface);
  border: 1px solid rgba(var(--text-faint-rgb), 0.25);
  padding: 1rem;
}
.aside-panel h2 {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}
.aside-panel p {
  color: var(--text-muted);
  font-family: var(--serif-body);
  font-size: 0.9rem;
  line-height: 1.7;
}
.share-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
}
.share-list a {
  border: 1px solid rgba(var(--text-faint-rgb), 0.30);
  color: var(--text-faint);
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  text-transform: uppercase;
}
.share-list a:hover {
  background: rgba(var(--brand-blue-light-rgb), 0.09);
  border-color: rgba(var(--brand-blue-light-rgb), 0.5);
  color: var(--text);
}
.read-next {
  border-top: 1px solid rgba(var(--text-faint-rgb), 0.20);
  padding: 2.7rem 2rem 4rem;
}
.read-next__link {
  align-items: center;
  border: 1px solid rgba(var(--text-rgb), 0.22);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.6rem;
  letter-spacing: 0.14em;
  padding: 0.75rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
}