.site-header { flex-wrap: wrap; }
.site-nav { display: flex; gap: 24px; margin-left: auto; font-size: 13px; }
.site-nav a { text-decoration: none; color: var(--fg); padding-block: 8px; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.site-header .theme-switch { margin-left: 12px; }
.theme-switch { min-width: 82px; justify-content: center; box-shadow: none; }
/* The landing page is an introduction and a few routes, not a content feed. */
.home-page:not(.sent) { display: flex; flex-direction: column; }
.home-page .site-header { border-bottom: 0; }
.home-page:not(.sent) .site-header { width: min(620px, 100%); }
.home-page:not(.sent) .container { width: min(620px, 100%); padding-top: clamp(64px, 13vh, 128px); padding-bottom: 64px; }
.home-page .greeting { gap: 20px; margin-bottom: 32px; }
.home-page .greeting h1 { font-size: clamp(30px, 4vw, 40px); max-width: 24ch; line-height: 1.2; }
.home-page .greeting .intro { max-width: 48ch; }
.home-nav { display: flex; flex-wrap: wrap; gap: 12px clamp(14px, 4vw, 26px); font-size: 14px; margin-top: 8px; }
.home-nav a { text-decoration: none; padding-block: 6px; }
.home-nav a, .home-nav a:visited { color: var(--link); }
.home-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.home-page:not(.sent) .prompt-buttons { display: none; }
.home-page:not(.sent) #output:empty { display: none; }
.home-page:not(.sent) .footer { margin-top: auto; border-top: 0; }
.home-page .footer { justify-content: center; gap: 8px 24px; text-align: center; }
.home-page.sent #output .block-md { padding-top: 36px; }
.home-page.sent #output .block-md .copy-btn { top: 0; right: 0; opacity: 1; }
/* Reading pages are plain documents. Hierarchy comes from type and space. */
.reading-page { --bg: #fff; --fg: #000; --muted: #000; --link: #000; --link-hover: #000; --link-visited: #000; display: flex; flex-direction: column; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .reading-page { --bg: #000; --fg: #fff; --muted: #fff; --link: #fff; --link-hover: #fff; --link-visited: #fff; }
}
:root[data-theme="dark"] .reading-page { --bg: #000; --fg: #fff; --muted: #fff; --link: #fff; --link-hover: #fff; --link-visited: #fff; }
.reading-main { width: min(620px, 100%); margin: 56px auto 72px; flex: 1; color: var(--fg); }
.reading-main a { color: inherit; text-underline-offset: .2em; }
.back-link { display: inline-block; font-size: 14px; margin-bottom: 32px; }
.page-heading { margin: 0 0 28px; }
.page-heading h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.prose, .work-entry { font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.prose p { margin: 0 0 20px; }
.prose h2, .work-entry h2 { font-size: 19px; font-weight: 600; line-height: 1.4; margin: 32px 0 12px; scroll-margin-top: 24px; }
.prose h3 { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 24px 0 12px; text-wrap: balance; }
.work-entry h2 { margin: 0 0 8px; }
.work-entry p { margin: 0; }
.prose ol, .prose ul { margin: 0 0 24px; padding-left: 24px; }
.prose li { margin-block: 10px; padding-left: 2px; }
.prose code { font-size: .9em; background: none; padding: 0; }
.prose .further-reading { margin-top: 32px; }
.page-end { margin-top: 36px; font-size: 14px; }
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px; background: var(--bg); color: var(--fg); z-index: 200; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 620px) {
  .site-identity { order: 0; }
  .site-header .theme-switch { order: 1; margin-left: auto; }
  .site-nav { order: 2; width: 100%; margin-left: 0; gap: 28px; }
  .site-nav a { padding-block: 4px; }
  .reading-main { margin-top: 36px; margin-bottom: 48px; }
  .page-heading h1 { font-size: 30px; }
  .prose, .work-entry { font-size: 16px; }
}

.page-subtitle, .prose .page-subtitle { margin: 10px 0 0; color: var(--muted); font-size: 18px; line-height: 1.4; }
.prose .signoff { margin-top: 32px; }

.work-index .work-entry { padding: 0; margin: 0 0 44px; }
.work-index .work-entry h2 { font-size: 21px; margin-bottom: 6px; }
.work-index .work-entry p { color: var(--muted); }
.work-index .work-entry h2 a { text-decoration: none; }
.work-index .work-entry h2 a:hover, .work-index .work-entry h2 a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.entry-date { display: block; margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.page-heading .entry-date { margin: 12px 0 0; }
.work-index .work-entry { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; }
.work-index .work-entry p { grid-column: 1 / -1; }
.work-index .work-entry .entry-date { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; }
.work-index .work-entry h2 { grid-column: 1; grid-row: 1; }

/* Explanatory visuals keep the reading pages' minimal black/white presentation. */
.prose .reviewer-flow { max-width: 460px; margin: 32px auto; }
.reviewer-flow img { display: block; width: 100%; height: auto; }
.reviewer-results { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95em; }
.reviewer-results caption { text-align: left; font-size: .85em; margin-bottom: 10px; }
.reviewer-results th, .reviewer-results td { text-align: left; border-bottom: 1px solid var(--fg); padding: 8px 6px; }
@media (max-width: 480px) { .prose .reviewer-flow { margin-inline: -10px; max-width: none; } }

/* This image follows the site's explicit theme, not the OS preference. */
:root[data-theme="dark"] .reviewer-flow img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .reviewer-flow img { filter: invert(1); }
}