:root {
  color-scheme: light;
  --bg: #f4f0e7;
  --surface: #e9e4f0;
  --surface-2: #ddd6e9;
  --paper: #fffcf5;
  --ink: #272238;
  --muted: #625b70;
  --line: #bdb5c7;
  --accent: #777bb4;
  --accent-text: #494b80;
  --citron: #d5df38;
  --masthead: #272238;
  --masthead-ink: #f4f0e7;
  --masthead-muted: #cbc4de;
  --code-bg: #302940;
  --code-ink: #f1eafa;
  --error: #9b304e;
  --font-size: 18px;
  --measure: 43rem;
  --sans: "Segoe UI", Frutiger, "DejaVu Sans", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
:root:where([data-theme="dark"]) {
  color-scheme: dark;
  --bg: #211d2d;
  --surface: #342d45;
  --surface-2: #453b58;
  --paper: #292334;
  --ink: #f4eee1;
  --muted: #c0b6ce;
  --line: #655970;
  --accent: #a5a8e3;
  --accent-text: #c4c6ff;
  --citron: #d5df38;
  --masthead: #171320;
  --masthead-ink: #f4eee1;
  --masthead-muted: #c8bdd6;
  --code-bg: #16121f;
  --code-ink: #e9e1fa;
  --error: #ffa1b7;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #211d2d;
    --surface: #342d45;
    --surface-2: #453b58;
    --paper: #292334;
    --ink: #f4eee1;
    --muted: #c0b6ce;
    --line: #655970;
    --accent: #a5a8e3;
    --accent-text: #c4c6ff;
    --citron: #d5df38;
    --masthead: #171320;
    --masthead-ink: #f4eee1;
    --masthead-muted: #c8bdd6;
    --code-bg: #16121f;
    --code-ink: #e9e1fa;
    --error: #ffa1b7;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none; }
html {
  scroll-padding-block-start: calc(var(--header-height, 10rem) + 1.5rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--font-size)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--citron); color: #272238; }
a {
  color: var(--accent-text);
  text-underline-offset: .2em;
  text-decoration-thickness: .075em;
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: .14em; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 4px;
}
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4 {
  line-height: 1.15;
  margin-block-start: 0;
  font-weight: 750;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.2rem, 2rem + 2vw, 4rem); letter-spacing: -.04em; }
h2 { font-size: 1.65rem; letter-spacing: -.025em; }
h3 { font-size: 1.25rem; }
p { margin-block: 0 1rem; }
.shell {
  width: 100%;
  max-width: calc(var(--measure) + 29rem);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 3.5vw, 3.5rem);
}
main.shell { padding-block: 3.5rem 4rem; }
main, section, article, aside, nav, form, .index-copy, .utility-content,
.reading-content, .opening-story, .post-title { min-width: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 100;
  transform: translateY(-200%);
  padding: .75rem 1rem;
  background: var(--citron);
  color: #272238;
  font-weight: 700;
}
.skip-link:focus { transform: none; }
.honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.muted, .meta, .field-help, .page-count { color: var(--muted); }
.meta, .page-count { font-size: .8rem; line-height: 1.55; }
.page-count { font-variant-numeric: tabular-nums; }
.lede { font-size: 1.13em; line-height: 1.6; color: var(--muted); }
.section-title {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .055em;
  margin-block: 0 1rem;
}
.eyebrow {
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.5;
  margin-block: 0 .65rem;
  color: var(--accent-text);
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* A substantial masthead, with navigation on its own baseline. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--masthead);
  color: var(--masthead-ink);
  border-block-end: .35rem solid var(--accent);
}
.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-block: 1.2rem .65rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--masthead-ink);
  text-decoration: none;
  flex: 1 1 auto;
}
.brand-name {
  font-size: clamp(1.65rem, 2.8vw, 2.8rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.045em;
}
.brand-logo { flex: none; }
.brand-logo img { max-width: 6rem; max-height: 3.5rem; width: auto; height: auto; }
.site-header :focus-visible {
  outline-color: var(--citron);
}
.site-header a:hover { color: var(--masthead-ink); }
.language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  max-width: 45%;
  font-size: .75rem;
}
.language-switch a { color: var(--masthead-muted); text-decoration: none; padding-block: .3rem; }
.language-switch a[aria-current="true"] { color: var(--masthead-ink); text-decoration: underline; text-decoration-color: var(--citron); }
#site-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.35rem;
  width: 100%;
  border-block-start: 1px solid #625a75;
  padding-block-start: .55rem;
}
#site-menu > a {
  position: relative;
  font-size: .83rem;
  font-weight: 600;
  color: var(--masthead-muted);
  text-decoration: none;
  padding-block: .35rem;
}
#site-menu > a[aria-current="page"] { color: var(--masthead-ink); }
#site-menu > a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-inline-end: .45rem;
  background: var(--citron);
}
.nav-search { display: inline-flex; gap: .4rem; align-items: center; }
.nav-icon, .search-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.theme-switch:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-inline-start: auto;
}
.theme-switch button {
  color: var(--masthead-muted);
  background: transparent;
  border: 1px solid transparent;
  padding: .35rem .55rem;
  font-size: .72rem;
  line-height: 1.5;
}
.theme-switch button:hover { color: var(--masthead-ink); }
.theme-switch button[aria-pressed="true"] {
  color: var(--masthead-ink);
  border-color: #82778f;
  border-block-end-color: var(--citron);
}
.menu-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--masthead-ink);
  border: 1px solid #82778f;
  padding: .55rem .65rem;
  font-size: .8rem;
}
.menu-icon { width: 1rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
body[data-header="centered"] .brand { flex-basis: 100%; justify-content: center; }
body[data-header="centered"] .language-switch { margin-inline: auto; max-width: 100%; }
body[data-header="centered"] #site-menu { justify-content: center; }
body[data-header="centered"] .theme-switch { margin-inline-start: 0; }

/* A narrow contextual column and a lead that reads before it illustrates. */
.home-opening {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.introduction {
  border-block-start: .6rem solid var(--accent);
  padding-block-start: 1.4rem;
}
.introduction h1 {
  font-size: clamp(1.65rem, 1.4rem + 1vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-block-end: 1.2rem;
}
.introduction .lede { font-size: 1em; }
.introduction .page-count { margin-block-start: 2rem; }
.intro-actions { display: grid; margin-block-start: 2rem; font-size: .83rem; }
.intro-actions a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--line);
  padding-block: .8rem;
  text-decoration: none;
}
.lead {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(1.3rem, 3vw, 2.8rem);
}
.lead-label { color: var(--muted); margin-block-end: 1.5rem; }
.lead h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-block-end: 1rem;
}
.lead h2 a, .index-copy h2 a { color: var(--ink); text-decoration: none; }
.lead h2 a:hover, .index-copy h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.lead-summary { color: var(--muted); max-width: 38rem; }
.read-article {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: .45rem;
  border-block-end: 3px solid var(--accent);
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.read-article:hover { border-color: var(--accent-text); }
.read-article span { background: var(--citron); color: #272238; padding-inline: .3rem; }
.lead-media {
  display: block;
  margin-block-start: 1.7rem;
  padding: .55rem;
  background: var(--surface);
  box-shadow: .4rem .4rem 0 var(--surface-2);
}
.lead-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.home-empty {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.empty-state {
  background: var(--surface);
  border-inline-start: .5rem solid var(--accent);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.empty-state p:last-child { margin-block-end: 0; }
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 2px solid var(--ink);
  padding-block-end: .7rem;
}
.section-heading .section-title { margin: 0; }
.section-heading > a { font-size: .8rem; text-decoration: none; }
.home-index { margin-block-start: 3rem; }

/* An editorial index: publication date, writing, then a small paper tile. */
.cards { list-style: none; padding: 0; margin: 0; }
.article-index { display: grid; }
.index-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  border-block-end: 1px solid var(--line);
  padding-block: 2rem;
}
.index-media .index-row { grid-template-columns: 8rem minmax(0, 1fr) 12rem; }
.index-date {
  display: grid;
  gap: .6rem;
  padding-block-start: .15rem;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.index-date > span { font-size: .7rem; }
.index-copy h2 { font-size: clamp(1.35rem, 1rem + .75vw, 1.85rem); margin-block-end: .65rem; }
.card-summary { font-size: .94em; color: var(--muted); margin-block-end: .7rem; max-width: 38rem; }
.card-media {
  display: block;
  padding: .35rem;
  background: var(--surface-2);
  box-shadow: .2rem .2rem 0 var(--line);
}
.card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-media:hover { background: var(--accent); }
.terms { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-block: .7rem 0; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  color: var(--muted);
  font-size: .73rem;
  text-decoration: none;
  border-block-end: 1px solid var(--line);
  padding-block: .15rem;
}
.chip:hover { color: var(--accent-text); border-color: var(--accent); }
.chip-count { font-size: .85em; font-variant-numeric: tabular-nums; }
.term-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-block: 2.5rem 1rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.term-row .chip { font-size: .8rem; padding-block: .2rem; border-color: transparent; }
.term-row .chip[aria-current="page"] { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.term-row .chip[aria-current="page"] .chip-count { background: var(--citron); color: #272238; padding-inline: .3rem; }
.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  border-block-end: 2px solid var(--ink);
  padding-block-end: 2rem;
}
.page-heading h1 { margin-block: 1rem 0; }
.heading-note .lede { font-size: .96em; }
.heading-note .page-count { margin: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .77rem; color: var(--muted); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }

/* Pager is a ruled continuation of the index. */
.pager, .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--line);
  font-size: .82rem;
}
.pager-step { text-decoration: none; }
.pager-off { color: var(--muted); opacity: .55; }
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pager-pages a {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: .3rem;
  text-decoration: none;
  color: var(--ink);
}
.pager-pages a:hover { background: var(--surface); }
.pager-pages a[aria-current="page"] { background: var(--surface-2); border-block-end: 3px solid var(--accent); font-weight: 700; }
.pager-gap { align-self: center; }

/* Article: a wide title plate, then a separate contents/reading assembly. */
.post-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 3rem;
  padding-block-end: 2.5rem;
  border-block-end: 1px solid var(--line);
}
.post-head h1 { font-size: clamp(2.3rem, 1.75rem + 2.5vw, 4.4rem); margin-block: .9rem 1.2rem; max-width: 19ch; }
.post-head .lede { max-width: var(--measure); margin: 0; }
.post-meta { align-self: end; border-inline-start: .35rem solid var(--accent); padding-inline-start: 1rem; }
.post-meta p { margin-block-end: 1rem; }
.post-meta p:last-child { margin: 0; }
.meta-label { display: block; font-size: .7rem; margin-block-end: .15rem; }
.post-cover {
  margin: 2rem 0 3rem;
  padding: .65rem;
  background: var(--surface);
  box-shadow: .45rem .45rem 0 var(--surface-2);
}
.post-cover img { width: 100%; height: auto; }
.reading-layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, var(--measure));
  gap: clamp(2rem, 5vw, 5rem);
  justify-content: space-between;
  margin-block-start: 3rem;
}
.toc {
  position: sticky;
  inset-block-start: calc(var(--header-height, 10rem) + 1.5rem);
  max-height: calc(100dvh - var(--header-height, 10rem) - 3rem);
  overflow-y: auto;
  border-block-start: .35rem solid var(--accent);
  padding-block-start: 1rem;
  padding-inline-end: .5rem;
}
.toc h2 { font-size: .8rem; line-height: 1.4; letter-spacing: 0; margin-block-end: .8rem; }
.toc ol, .toc ul { padding-inline-start: 1.1rem; margin: 0; }
.toc li { margin-block-end: .65rem; font-size: .76rem; line-height: 1.45; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover, .toc a[aria-current="true"], .toc a.active { color: var(--accent-text); text-decoration: underline; }
.prose { font-size: 1em; line-height: 1.8; overflow-wrap: anywhere; }
.prose p { margin-block: 0 1.4rem; }
.prose h2 { margin-block: 2.8rem 1rem; font-size: 1.8rem; line-height: 1.2; }
.prose h3 { margin-block: 2.2rem .8rem; font-size: 1.35rem; }
.prose h4 { margin-block: 1.7rem .7rem; font-size: 1.1rem; }
.prose :is(h2, h3, h4, [id]) { scroll-margin-block-start: 1rem; }
.prose ul, .prose ol { padding-inline-start: 1.5rem; margin-block: 0 1.4rem; }
.prose li { margin-block-end: .4rem; }
.prose li::marker { color: var(--accent-text); }
.prose figure { margin-inline: 0; }
.prose img { max-width: 100%; height: auto; }
.prose figcaption { color: var(--muted); font-size: .8rem; margin-block-start: .5rem; }
.prose .inline-image { margin-block: 2rem; }
.prose .inline-image img { width: 100%; }
.prose blockquote {
  margin: 1.8rem 0;
  background: var(--surface);
  border-inline-start: .45rem solid var(--accent);
  padding: 1.2rem 1.4rem;
}
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 2.5rem; }
.prose code { font: .88em/1.65 var(--mono); background: var(--surface-2); padding: .15em .3em; }
.prose pre {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  margin-block: 1.8rem;
  padding: 1.5rem;
  background: var(--code-bg);
  color: var(--code-ink);
  border-inline-start: .4rem solid var(--accent);
  tab-size: 4;
}
.prose pre code { background: transparent; color: inherit; padding: 0; font-size: .85em; overflow-wrap: normal; }
.prose pre button, .copy-button, .code-copy {
  padding: .3rem .6rem;
  font: .72rem/1.4 var(--sans);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.prose pre :focus-visible { outline-color: var(--citron); }
.prose table {
  display: block;
  border-collapse: collapse;
  max-width: 100%;
  overflow-x: auto;
  margin-block: 1.8rem;
  font-size: .9em;
}
.prose th, .prose td { border: 1px solid var(--line); padding: .65rem .85rem; text-align: start; }
.prose th { background: var(--surface); font-weight: 700; }
.post-foot { border-block-start: 1px solid var(--line); margin-block-start: 2.5rem; padding-block-start: 1rem; }
.terms-label { font-size: .76rem; font-weight: 700; }
.correction { margin-block-start: 1.5rem; font-size: .8rem; }
.article-after { max-width: var(--measure); margin-inline-start: auto; margin-block-start: 3rem; }
.related { margin-block-start: 4rem; }
.related > .section-title { border-block-end: 2px solid var(--ink); padding-block-end: .8rem; }
.back { margin-block-start: 2.5rem; font-size: .85rem; }

/* Supporting pages retain the contextual rail. */
.utility-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: clamp(2rem, 6vw, 6rem);
  min-height: 23rem;
}
.utility-heading { border-block-start: .6rem solid var(--accent); padding-block-start: 1.5rem; }
.utility-heading h1 { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.5rem); margin-block-end: 1.4rem; }
.utility-heading .section-title { color: var(--muted); }
.utility-heading .lede { font-size: 1em; }
.utility-content { padding-block-start: 1.5rem; max-width: var(--measure); }
.support-note {
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.2rem;
  margin-block-start: 2rem;
  font-size: .85rem;
}
.support-note p { margin-block-end: .4rem; }
.response-content { background: var(--surface); padding: clamp(1.5rem, 4vw, 3rem); align-self: start; }
.response-content .lede { color: var(--ink); }

/* Square, labelled controls; no button depends on accent-fill contrast. */
.contact-form, .comment-form, .subscribe-form {
  display: grid;
  gap: .7rem;
  margin: 0;
}
.contact-form label, .comment-form label, .subscribe-form label { font-size: .85rem; font-weight: 650; }
input, textarea {
  width: 100%;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-block-end: 2px solid var(--muted);
  border-radius: 0;
  padding: .75rem .85rem;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-form > input, .contact-form > textarea { margin-block-end: .65rem; }
.contact-form button, .comment-form button, .subscribe-form button {
  justify-self: start;
  padding: .7rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-block-end: 4px solid var(--accent);
  border-radius: 0;
  font-size: .87rem;
  font-weight: 700;
}
.contact-form button:hover, .comment-form button:hover, .subscribe-form button:hover {
  border-block-end-color: var(--accent-text);
}
.field-help, .form-status { font-size: .8rem; }
.form-status:empty { margin: 0; }
.form-error, .comment-error { color: var(--error); }
.form-error, .comment-error, .comment-notice {
  background: var(--surface);
  border-inline-start: .35rem solid var(--accent);
  padding: 1rem;
  font-size: .9rem;
}
.form-error, .comment-error { border-inline-start-color: var(--error); }
.subscribe-panel { background: var(--surface); padding: 1.5rem 2rem; border-block-start: .4rem solid var(--accent); }
.subscribe-fields, .search-fields { display: flex; align-items: stretch; gap: .6rem; }
.subscribe-fields input, .search-fields input { flex: 1 1 auto; width: 0; }
.subscribe-fields button, .search-fields button { flex: 0 1 auto; }
.feed-action { display: inline-block; font-size: .8rem; margin-block-start: 1rem; }
.cf-turnstile { max-width: 100%; }
.comments { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; margin-block: 3rem; }
.comment-list { margin: 0 0 2rem; padding: 0; list-style: none; }
.comment { padding-block: 1.3rem; border-block-end: 1px solid var(--line); }
.comment-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
.comment-meta time { color: var(--muted); font-size: .75rem; }
.comment-body { font: .85rem/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.comment-pages { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; margin-block: 1rem; }
.comment-form { margin-block-start: 2rem; }

/* Search keeps its input stable above a scrollable result area. */
.search-dialog {
  width: min(47rem, calc(100% - 2rem));
  max-height: 80dvh;
  margin: 6vh auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-block-start: .5rem solid var(--accent);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: .6rem .6rem 0 var(--surface-2);
}
.search-dialog::backdrop { background: rgb(23 19 32 / .7); }
.search-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.search-form {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--line);
}
.search-form input { flex: 1 1 auto; width: 0; background: var(--paper); font-size: 1rem; }
.search-close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.search-close-icon { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-status { padding: .85rem 1.25rem 0; color: var(--muted); font-size: .8rem; margin: 0; }
.search-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.search-dialog .search-results { overflow-y: auto; overscroll-behavior: contain; padding: .5rem 1.25rem; }
.search-hit { padding-block: 1.1rem; border-block-end: 1px solid var(--line); min-width: 0; }
.search-hit-body { min-width: 0; }
.search-results.has-media .search-hit { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.search-results.has-media .search-hit-body { grid-column: 2; }
.search-hit-media { display: block; background: var(--surface); padding: .2rem; }
.search-hit-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.search-hit h2 { font-size: 1.1rem; margin-block-end: .35rem; }
.search-hit h2 a { color: var(--ink); text-decoration: none; }
.search-hit h2 a:hover { text-decoration: underline; }
.search-hit-summary { color: var(--muted); font-size: .85rem; margin-block-end: .4rem; }
.search-hit .meta { font-size: .72rem; margin: 0; }
.search-hit .eyebrow { font-size: .68rem; margin-block-end: .25rem; }
.search-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin: 0; padding: 1rem 1.25rem; background: var(--surface); font-size: .75rem; }
.search-hint { color: var(--muted); }
kbd { font: .85em var(--mono); padding: .1rem .3rem; border: 1px solid var(--line); background: var(--paper); }
.search-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: .8rem; }
.search-pagination:not(:empty) { padding: .8rem; border-block-start: 1px solid var(--line); }
.search-pagination a, .search-pagination button { padding: .4rem .7rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.search-pagination [aria-current="page"] { border-block-end: 3px solid var(--accent); }
.search-all { display: inline-block; margin-block-start: 1rem; font-size: .8rem; }
html:has(.search-dialog[open]) { overflow: hidden; }

/* Footer is a quiet closing plate rather than another header row. */
.site-footer {
  background: var(--surface);
  border-block-start: .5rem solid var(--accent);
  padding-block: 2.5rem 3rem;
}
.footer-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }
.footer-brand { color: var(--ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.footer-copy p { font-size: .82rem; margin-block: .6rem 0; max-width: 38rem; }
.footer-meta { color: var(--muted); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; align-content: start; font-size: .85rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .index-media .index-row { grid-template-columns: 6.5rem minmax(0, 1fr) 9rem; }
  .index-row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  .reading-layout { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; }
  .post-head { grid-template-columns: minmax(0, 1fr) 10rem; gap: 2rem; }
  #site-menu { gap: .25rem .85rem; }
}
@media (max-width: 799px) {
  main.shell { padding-block: 2rem 3rem; }
  .home-opening, .utility-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .introduction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.5rem; }
  .introduction h1 { grid-column: 1; margin: 0; }
  .introduction .lede { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .introduction .page-count { margin-block: .5rem 0; }
  .introduction .meta { margin: 0; }
  .intro-actions { grid-column: 1 / -1; margin-block-start: .75rem; }
  .lead { border-inline-start: 0; padding-inline-start: 0; }
  .lead-label { border-block-start: 1px solid var(--line); padding-block-start: 1rem; }
  .home-empty { min-height: 14rem; }
  .utility-content { max-width: none; padding-block-start: 0; }
  .utility-heading .lede { max-width: 38rem; }
  .reading-layout { display: block; }
  .reading-rail { margin-block-end: 2rem; }
  .toc { position: static; max-height: none; }
  .toc ol { columns: 2; column-gap: 2rem; }
  .toc li { break-inside: avoid; }
  .reading-content, .article-after { max-width: var(--measure); margin-inline: auto; }
  .post-head { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  .post-meta p { margin: 0; }
  .post-head h1 { max-width: none; }
  .page-heading { gap: 1.5rem; }
}
@media (max-width: 720px) {
  .site-header .shell { gap: .6rem 1rem; padding-block: .85rem; }
  .brand { flex: 1 1 65%; }
  .brand-name { font-size: clamp(1.4rem, 5vw, 2rem); }
  .brand-logo img { max-width: 3rem; max-height: 2.5rem; }
  .site-header[data-menu] .menu-toggle:not([hidden]) { display: inline-flex; margin-inline-start: auto; }
  .site-header[data-menu] #site-menu { display: none; }
  .site-header[data-menu="open"] { position: static; }
  .site-header[data-menu="open"] #site-menu { display: flex; flex-direction: column; align-items: stretch; padding-block-start: .75rem; gap: .25rem; }
  .site-header[data-menu="open"] #site-menu > a { padding: .65rem .5rem; font-size: .95rem; border-block-end: 1px solid #625a75; }
  .site-header[data-menu="open"] .theme-switch:not([hidden]) { margin: .75rem 0 0; }
  .site-header[data-menu="open"] .theme-switch button { flex: 1 1 0; padding-block: .7rem; font-size: .8rem; }
  .language-switch { flex-basis: 100%; max-width: 100%; order: 2; }
  #site-menu { order: 3; }
  body[data-header="centered"] .brand { flex-basis: auto; }
  .index-media .index-row { grid-template-columns: 5rem minmax(0, 1fr) 7rem; }
  .index-row { grid-template-columns: 5rem minmax(0, 1fr); }
  .footer-layout { gap: 2rem; }
}
@media (max-width: 560px) {
  .introduction { display: block; }
  .introduction h1 { margin-block-end: 1rem; }
  .introduction .lede { margin-block-end: 1rem; }
  .introduction .page-count { margin-block-start: 1rem; }
  .intro-actions { margin-block-start: 1rem; }
  .lead h2 { font-size: 2rem; }
  .index-row, .index-media .index-row { grid-template-columns: minmax(0, 1fr) 6.5rem; padding-block: 1.5rem; gap: .8rem 1rem; }
  .index-date { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
  .index-copy { grid-column: 1 / -1; }
  .index-row:has(.card-media) .index-copy { grid-column: 1; }
  .card-media { grid-column: 2; grid-row: 2; align-self: start; }
  .index-copy h2 { font-size: 1.35rem; }
  .index-row:has(.card-media) .card-summary { grid-column: 1; }
  .terms { gap: .35rem .65rem; }
  .page-heading { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .page-heading h1 { font-size: 2.5rem; }
  .heading-note .lede { margin-block-end: .7rem; }
  .term-row { margin-block-start: 1.5rem; }
  .post-head h1 { font-size: 2.3rem; }
  .post-cover { padding: .35rem; box-shadow: .2rem .2rem 0 var(--surface-2); }
  .toc ol { columns: 1; }
  .prose pre { padding: 1rem; }
  .prose h2 { font-size: 1.5rem; }
  .subscribe-panel { padding: 1.3rem; }
  .subscribe-fields, .search-fields { flex-wrap: wrap; }
  .subscribe-fields input, .search-fields input { width: 100%; flex-basis: 100%; }
  .pager-pages { order: -1; width: 100%; }
  .pager-step { flex: 1 1 auto; text-align: center; }
  .footer-layout { grid-template-columns: minmax(0, 1fr); }
  .search-dialog { width: calc(100% - 1rem); max-height: 88dvh; margin-block-start: 3vh; box-shadow: .25rem .25rem 0 var(--surface-2); }
  .search-form { padding: .8rem; gap: .5rem; }
  .search-form .search-icon { display: none; }
  .search-status { padding-inline: .8rem; }
  .search-dialog .search-results { padding-inline: .8rem; }
  .search-results.has-media .search-hit { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}