@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

/* ==========================================================================
   Site-wide "blue pencil" system (see docs/brand.md).
   Mono for structure (nav, labels, meta, headings), serif for voice (titles,
   prose), one editor's-blue accent. Hairlines, no cards, no radius.
   ========================================================================== */

:root {
  --wai-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wai-serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --color-l-background: #fbfbf9;
  --color-l-foreground: #1b1b1d;
  --color-l-accent: #2140c4;
  --color-d-background: #0e0e10;
  --color-d-foreground: #e9e9e6;
  --color-d-accent: #93a6ff;
  --font-heading: var(--wai-serif);
  --font-body: var(--wai-serif);
  --radius: 0;
  --color-code-bg: #f2f2ee;
  --color-code-bg-dark: #17171a;
  --site-rule: color-mix(in srgb, var(--color-foreground) 13%, transparent);
  --site-muted: color-mix(in srgb, var(--color-foreground) 64%, transparent);
}

body { background: var(--color-background); }
::selection { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* One frame for site chrome: navbar and footer content share the page's
   80rem/3rem layout box, so logo, footer and wide content line up. */
.site-navbar-inner { box-sizing: border-box; max-width: 80rem; padding-inline: 2rem; }
.site-footer-inner { max-width: 74rem; }
@media (min-width: 640px) { .site-navbar-inner { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .site-navbar-inner { padding-inline: 3rem; } }

/* Navbar and footer: mono chrome */
.site-navbar { background: var(--color-background); border-bottom: 1px solid var(--site-rule); box-shadow: none; }
.site-navbar-site-title { font-family: var(--wai-mono); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.site-navbar-link, .mobile-nav-link { font-family: var(--wai-mono); font-size: 0.82rem; letter-spacing: 0; text-transform: none; }
.site-navbar-link:hover, .mobile-nav-link:hover { color: var(--color-accent); }
.site-navbar-link[href="/#subscribe"], .mobile-nav-link[href="/#subscribe"] { color: var(--color-accent); }
.site-footer { border-top: 1px solid var(--site-rule); font-family: var(--wai-mono); font-size: 0.8rem; }
.site-subnav { font-family: var(--wai-mono); font-size: 0.8rem; }

/* Page header */
.page-header-title { font-family: var(--wai-serif); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.page-header-description { color: var(--site-muted); font-family: var(--wai-serif); font-style: normal; }
.page-header-date, .page-header-metadata-container, .page-header-author-name { font-family: var(--wai-mono); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.page-header-tags a, .tag-pill { background: none; border: 0; border-radius: 0; color: var(--color-accent); font-family: var(--wai-mono); font-size: 0.78rem; padding: 0; }

/* Prose (not the plain-layout homepage) */
.rendered-mdx:not(.is-plain) { font-family: var(--wai-serif); }
.rendered-mdx:not(.is-plain) :where(p, li) { font-size: 1.125rem; line-height: 1.6; }
.rendered-mdx:not(.is-plain) :where(h2, h3, h4) { font-family: var(--wai-mono); font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.rendered-mdx:not(.is-plain) h2 { font-size: 1.05rem; margin-top: 2.5em; }
.rendered-mdx:not(.is-plain) h3 { font-size: 0.95rem; }
.rendered-mdx:not(.is-plain) h4 { font-size: 0.9rem; }
.rendered-mdx:not(.is-plain) h2::before { color: var(--color-accent); content: "## "; }
.rendered-mdx:not(.is-plain) h3::before { color: var(--color-accent); content: "### "; }
.rendered-mdx:not(.is-plain) h1 { font-family: var(--wai-serif); font-weight: 400; }
.rendered-mdx:not(.is-plain) a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.rendered-mdx:not(.is-plain) a:hover { text-decoration-thickness: 2px; }
.rendered-mdx:not(.is-plain) blockquote { border-left: 2px solid var(--color-accent); color: inherit; font-style: italic; }
.rendered-mdx:not(.is-plain) hr { border-color: var(--site-rule); }
.rendered-mdx:not(.is-plain) :where(code, pre, kbd) { font-family: var(--wai-mono); }
.rendered-mdx:not(.is-plain) :where(table) { font-family: var(--wai-mono); font-size: 0.85rem; }
.rendered-mdx:not(.is-plain) :where(th) { border-bottom: 1px solid var(--color-foreground); }
.rendered-mdx:not(.is-plain) :where(td) { border-bottom: 1px solid var(--site-rule); }
.rendered-mdx:not(.is-plain) img { border: 1px solid var(--site-rule); }

/* Table of contents */
.toc-title { color: var(--site-muted); font-family: var(--wai-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.toc-item-self { font-family: var(--wai-mono); font-size: 0.78rem; }

/* Post and log listings: a hairline list, not cards */
.list-component { gap: 0; }
.list-component-item { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--site-rule); box-shadow: none; margin: 0; padding: 1.1rem 0; }
.list-component-item:hover { background: none; }
.list-component-item-headline { font-family: var(--wai-serif); font-weight: 400; letter-spacing: -0.005em; }
.list-component-item:hover .list-component-item-headline { color: var(--color-accent); }
.list-component-item-eyebrow, .list-component-item-footnote { color: var(--site-muted); font-family: var(--wai-mono); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.list-component-item-summary { color: var(--site-muted); font-family: var(--wai-serif); }
.list-component-pagination { font-family: var(--wai-mono); font-size: 0.8rem; }

/* Listing headlines live inside .rendered-mdx: undo the prose heading/link treatment */
.rendered-mdx .list-component a { color: inherit; text-decoration: none; }
.rendered-mdx .list-component-item-headline { color: var(--color-foreground); font-family: var(--wai-serif); font-size: 1.3rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; margin: 0; }
.rendered-mdx:not(.is-plain) .list-component :where(h2, h3, h4) { font-family: var(--wai-serif); font-size: 1.3rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; margin: 0; }
.rendered-mdx:not(.is-plain) .list-component :where(h2, h3, h4)::before, .rendered-mdx .list-component-item-headline::before { content: none; }
.rendered-mdx .list-component-item:hover :where(h2, h3, h4) { color: var(--color-accent); }

/* Readable measure on every non-homepage page, with or without a TOC */
.page-main:not(:has(.is-plain)) .page-header,
.page-main:not(:has(.is-plain)) .rendered-mdx,
.layout-inner-center:not(:has(.is-plain)) :is(.page-edit-button-container, .page-backlinks-container) { margin-inline: auto; max-width: 44rem; }
.page-header-title { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; }

/* Backlinks and edit controls */
.page-backlinks-container { border-top: 1px solid var(--site-rule); font-family: var(--wai-mono); font-size: 0.85rem; }
.page-backlinks-title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ==========================================================================
   Email-first homepage. "Blue pencil" direction: Monospace-theme structure
   (IBM Plex Mono, # markers, hairlines, no cards), Newsreader serif voice,
   one editor's-blue accent for selection marks. */

.wai {
  --wai-paper: #fbfbf9;
  --wai-ink: #1b1b1d;
  --wai-muted: #5f5f66;
  --wai-rule: #e2e2de;
  --wai-pencil: #2140c4;
  --wai-wash: #e8ecfd;
  --wai-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wai-serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  background: var(--wai-paper);
  box-sizing: border-box;
  color: var(--wai-ink);
  font-family: var(--wai-mono);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  max-width: none;
  padding: 0;
}
:root[data-theme="dark"] .wai, .dark .wai {
  --wai-paper: #0e0e10;
  --wai-ink: #e9e9e6;
  --wai-muted: #a0a0a6;
  --wai-rule: #2a2a2e;
  --wai-pencil: #93a6ff;
  --wai-wash: #1a2044;
}

.wai *, .wai *::before, .wai *::after { box-sizing: border-box; }
.wai ::selection { background: var(--wai-wash); color: var(--wai-ink); }
.wai a { color: inherit; }
.wai a:focus-visible, .wai input:focus-visible, .wai button:focus-visible { outline: 2px solid var(--wai-pencil); outline-offset: 3px; }
.wai__sheet { margin: 0 auto; max-width: 1120px; padding: 0 clamp(1rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.wai__sr { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; }
.wai__label { color: var(--wai-muted); font-size: 0.78rem; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; }

.wai h1, .wai h2 { text-wrap: balance; }
.wai h1 { font-family: var(--wai-serif); font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.04; margin: 0.9rem 0 1.25rem; max-width: 16ch; }
.rendered-mdx.is-plain .wai h1 { display: block !important; }
.wai h1 em { color: var(--wai-pencil); }
.wai h2 { font-family: var(--wai-mono); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; margin: 0 0 1.1rem; }
.wai h2::before { color: var(--wai-pencil); content: "## "; }

.wai__hero { border-bottom: 1px solid var(--wai-rule); display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: 5rem; }
.wai__lede { color: var(--wai-muted); font-family: var(--wai-serif); font-size: clamp(1.1rem, 1.8vw, 1.25rem); line-height: 1.5; margin: 0 0 1.75rem; max-width: 46ch; }
.wai__form { border: 1px solid var(--wai-ink); display: flex; max-width: 30rem; }
.wai__form input { background: transparent; border: 0; color: var(--wai-ink); flex: 1; font: inherit; min-width: 0; padding: 0.75rem 0.9rem; }
.wai__form input::placeholder { color: var(--wai-muted); }
.wai__form button { background: var(--wai-ink); border: 0; color: var(--wai-paper); cursor: pointer; font: inherit; font-weight: 500; padding: 0 1.2rem; }
.wai__form button:hover { background: var(--wai-pencil); }
.wai__small { color: var(--wai-muted); font-size: 0.8rem; margin: 0.6rem 0 0; }

.wai__issue { align-self: center; border-left: 1px solid var(--wai-rule); padding-left: clamp(1rem, 3vw, 2.25rem); }
.wai__issue ul { display: grid; gap: 1rem; list-style: none; margin: 0.9rem 0 0; padding: 0; }
.wai__issue li { display: grid; gap: 0 0.6rem; grid-template-columns: 2rem 1fr; margin: 0; padding: 0; }
.wai__issue li::before { color: var(--wai-pencil); content: "[x]"; font-size: 0.8rem; grid-row: span 2; padding-top: 0.1rem; }
.wai__issue strong { font-weight: 600; }
.wai__issue span { color: var(--wai-muted); }

.wai__section { border-bottom: 1px solid var(--wai-rule); padding: clamp(2rem, 4vw, 2.75rem) 0; }
.wai__list { display: grid; }
.wai__list a { border-top: 1px solid var(--wai-rule); display: grid; gap: 1rem; grid-template-columns: 7rem minmax(0, 1fr) 6rem; padding: 0.75rem 0; text-decoration: none; }
.wai__list a:last-child { border-bottom: 1px solid var(--wai-rule); }
.wai__date, .wai__kind { color: var(--wai-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.wai__kind { text-align: right; }
.wai__title { font-family: var(--wai-serif); font-size: 1.15rem; line-height: 1.3; }
.wai__list a:hover .wai__title { color: var(--wai-pencil); }
.wai__more { display: flex; gap: 1.5rem; margin: 1.1rem 0 0; }
.wai__more a, .wai__cta { color: var(--wai-pencil); text-decoration: none; }
.wai__more a::after, .wai__cta::after { content: " →"; }
.wai__more a:hover, .wai__cta:hover { text-decoration: underline; }

.wai__ways-grid { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; }
.wai__ways-grid a { display: grid; gap: 0.35rem; padding: 0.25rem 2rem 0.25rem 0; text-decoration: none; }
.wai__ways-grid strong { font-family: var(--wai-serif); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.wai__ways-grid strong::after { color: var(--wai-pencil); content: " →"; font-family: var(--wai-mono); font-size: 1rem; }
.wai__ways-grid span { color: var(--wai-muted); max-width: 40ch; }
.wai__ways-grid a:hover strong { color: var(--wai-pencil); }

.wai__why { border-bottom: 0; }
.wai__why p { font-family: var(--wai-serif); font-size: 1.2rem; line-height: 1.5; margin: 0 0 0.75rem; max-width: 58ch; }
.wai__why .wai__cta { font-family: var(--wai-mono); font-size: 0.9rem; }

@media (max-width: 760px) {
  .wai__hero, .wai__ways-grid { grid-template-columns: 1fr; }
  .wai__issue { border-left: 0; border-top: 1px solid var(--wai-rule); padding: 1.75rem 0 0; }
  .wai__list a { gap: 0.2rem; grid-template-columns: 1fr; }
  .wai__kind { text-align: left; }
  .wai__ways-grid { gap: 1.5rem; }
}

/* Subscribe box embedded in a normal page (e.g. /weekly) */
.wai.wai--embed { background: transparent; border-bottom: 1px solid var(--wai-rule); margin: 0 0 2rem; padding: 0.5rem 0 1.4rem; }
.rendered-mdx .wai--embed .wai__label { font-size: 0.78rem; line-height: 1.5; margin: 0 0 0.75rem; }
.rendered-mdx .wai--embed .wai__small { font-size: 0.8rem; line-height: 1.5; margin: 0.6rem 0 0; }
.rendered-mdx .wai--embed .wai__small a { color: inherit; }
.wai__small .wai__cta { color: var(--wai-pencil); }