:root {
  color-scheme: dark;
  --page: #151715;
  --surface: #252525;
  --ink: #edf0eb;
  --muted: #a3a89f;
  --line: #373b36;
  --accent: rgb(250 204 21);
  --code: #0d0f0e;
  --code-ink: #e7ece6;
  --selection: rgba(250, 204, 21, 0.3);
  --content: 65rem;
  --reading: 65rem;
  --toc-width: 15.5rem;
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f4f3ef;
  --surface: #e1e1e1;
  --ink: #171816;
  --muted: #5f5f5b;
  --line: #cbc9c0;
  --accent: #B74ACB;
  --code: #1d211f;
  --code-ink: #e9eee9;
  --selection: rgba(96, 18, 142, 0.3);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: Goldman, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .09em;
  text-underline-offset: .2em;
}

a:hover { color: var(--accent); }

button, input, textarea { font: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: min(calc(100% - 2.5rem), var(--content));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: .75rem;
  left: .75rem;
  padding: .5rem .75rem;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--page);
}

.skip-link:focus { transform: none; }

.site-header {
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: .22rem;
  background: var(--ink);
}

.wordmark-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }

.theme-toggle {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  outline: none;
}

.home-main { position: relative; padding-block: 1.25rem 4.5rem; }

.intro {
  padding-bottom: 1.5em;
}

.eyebrow,
.section-heading,
.post-date,
.post-taxonomy,
.taxonomy-group,
.article-meta,
.toc,
.site-footer,
.back-link,
.subscribe-link,
.archive-links,
.author-popover {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.eyebrow {
  color: var(--accent);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: -0.3rem 0 0 0;
}

.intro h1 {
  margin: 0.8em 0;
  font-size: clamp(3rem, 8vw, 3.5em);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .95;
  text-align: center;
}

.intro-copy {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--ink);
}

.post-count {
  color: var(--muted);
  font-size: .82rem;
}

.post-list { min-height: 16rem; }

.post-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 15rem;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.post-card[hidden] { display: none; }
.post-card:last-child,
.post-card.is-last-visible { border-bottom: 0; }

.post-date {
  padding-top: .25rem;
  color: var(--muted);
  font-size: 1rem;
}

.post-title {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--accent);
}

.post-title a { text-decoration: none; }

.post-title a:hover,
.post-title a:focus-visible { text-decoration: underline; }

.post-content-has-image {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.post-thumbnail {
  display: block;
  overflow: hidden;
  margin-top: .2rem;
  border: 1px solid var(--line);
  border-radius: .3rem;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}

.post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .15s ease;
}

.post-thumbnail:hover { border-color: var(--accent); }
.post-thumbnail:hover img { opacity: .86; }


.post-summary {
  max-width: 42rem;
  margin: .65rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.post-taxonomy {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-end;
  padding-top: .2rem;
  font-size: .88rem;
  line-height: 1.4;
  text-align: right;
}

.taxonomy-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .14rem;
}

.taxonomy-label {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.taxonomy-values { color: var(--ink); line-height: 1.45; }
.taxonomy-values a,
.author-name {
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}
.taxonomy-values a:hover,
.taxonomy-values a:focus-visible,
.author-name:hover,
.author-name:focus-visible { color: var(--accent); text-decoration: underline; }
.taxonomy-values .tag-separator { margin-inline: .4rem; color: var(--muted); }

.author-values {
  display: flex;
  flex-wrap: wrap;
  gap: .12rem .65rem;
  justify-content: flex-end;
}

.author-values .author-reference { white-space: nowrap; }

.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.post-filter {
  display: none;
  position: relative;
  z-index: 5;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}

.js .post-filter { display: block; }
.post-section.is-empty .post-list { min-height: 0; }

.filter-button {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .15rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  line-height: 1.4;
}

.filter-button:hover,
.filter-button:focus-visible { color: var(--accent); outline: none; }
.filter-trigger-title { color: var(--ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.filter-button [data-filter-label],
.filter-button [data-sort-label] { color: var(--muted); }
.filter-arrow { color: var(--accent); font-weight: 700; transition: transform .15s ease; }
.filter-button[aria-expanded="true"] .filter-arrow { transform: rotate(180deg); }

.filter-panel {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  width: 18rem;
  max-width: calc(100vw - 1.5rem);
  padding: .6rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  background: var(--page);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .16);
}

.filter-panel[hidden] { display: none; }

.filter-panel fieldset { margin: 0; padding: 0; border: 0; }

.filter-option {
  position: relative;
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  gap: .7rem;
  align-items: center;
  min-height: 2.75rem;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.filter-option:hover { background: var(--surface); }
.filter-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-check {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 1px solid var(--muted);
  color: var(--page);
  font-size: .68rem;
  line-height: 1;
}
.filter-option input:checked + .filter-check { border-color: var(--accent); background: var(--accent); }
.filter-option input:checked + .filter-check::after { content: "✓"; }
.filter-option input:focus-visible + .filter-check { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-option-name { color: var(--ink); }
.filter-option-count { color: var(--muted); font-size: .84rem; }
.sort-filter .filter-panel { width: 13rem; }
.sort-option { grid-template-columns: 1rem 1fr; }
.sort-option:last-child { border-bottom: 0; }

.filter-clear {
  display: block;
  margin: .55rem 0 0 auto;
  padding: .4rem .5rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: .84rem;
}

.filter-clear:disabled { color: var(--muted); cursor: default; opacity: .55; }
.empty-filter { margin: 0; padding: 2rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }

.loading,
.notice,
.article-loading {
  padding: 3rem 0;
  color: var(--muted);
}

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 1rem;
}
.site-footer a {
  color: var(--accent);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-inner {
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-inner p { margin: 0; }

.reading-progress {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: 3px;
  background: transparent;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.article-shell { padding-block: .75rem 6rem; }

.page-tools {
  display: flex;
  width: min(100%, var(--reading));
  min-height: 1.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto .65rem;
}

.page-tools-home {
  position: absolute;
  top: 0.7rem;
  right: 0;
  width: auto;
  margin: 0;
}

.reading-size-control {
  display: none;
  height: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--page);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.js .reading-size-control { display: inline-flex; }

.reading-size-control button {
  min-width: 2.2rem;
  padding: 0 .45rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

.reading-size-control button:last-child { border-right: 0; }
.reading-size-control .reading-size-reset { min-width: 3.25rem; color: var(--muted); font-size: .72rem; }
.reading-size-control button:hover:not(:disabled) { background: var(--surface); color: var(--accent); }
.reading-size-control button:focus-visible { position: relative; outline: 2px solid var(--accent); outline-offset: -2px; }
.reading-size-control button:disabled { cursor: default; opacity: .38; }
.reading-size-control .reading-size-reset:disabled { opacity: 1; }

.article-reader-tools {
  display: none;
  width: min(100%, var(--reading));
  margin: 0 auto 1rem;
}

.js .article-reader-tools { display: flex; }

.back-link {
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
}

.subscribe-link {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .24rem .5rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
}

.subscribe-link span { color: var(--accent); font-size: .82rem; }
.subscribe-link:hover,
.subscribe-link:focus-visible { border-color: var(--accent); outline: none; }

.article-header {
  max-width: var(--reading);
  margin-inline: auto;
  padding-bottom: 1.5rem;
    padding-top: 1.5rem;

}

.tag-page-main { padding-top: .75rem; }
.archive-page-main { padding-top: .75rem; }
.tag-intro,
.archive-intro { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.tag-intro h1,
.archive-intro h1 {
  margin: 1rem 0;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .95;
}

.archive-description {
  max-width: 46rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  margin-top: 1.25rem;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.archive-links a { display: inline-flex; gap: .35rem; color: var(--accent); text-decoration: none; }
.archive-links a:hover { text-decoration: underline; }

.author-avatar {
  display: grid;
  flex: none;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  place-items: center;
}

.author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-page-header {
  display: flex;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
}

.author-page-avatar {
  width: clamp(6rem, 13vw, 9rem);
  aspect-ratio: 1;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.author-page-details { min-width: 0; }
.author-page-details .eyebrow { margin: 0; }
.author-page-details .archive-description { margin-top: .75rem; }
.author-page-details .archive-links { margin-top: .9rem; }

.article-header h1 {
  margin: 0;
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .98;
}

.article-summary {
  margin: 1.75rem 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.5;
}

.article-author-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 1.5rem 0 .5rem;
}

.article-author-profile {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
}

.article-author-avatar-link { border-radius: 50%; text-decoration: none; }

.article-author-avatar {
  width: 3.75rem;
  aspect-ratio: 1;
  font-size: 1rem;
}

.article-author-avatar-link:hover .author-avatar,
.article-author-avatar-link:focus-visible .author-avatar { border-color: var(--accent); }

.article-author-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
}

.article-author-name { font-weight: 700; text-decoration: none; }
.article-author-name:hover,
.article-author-name:focus-visible { color: var(--accent); text-decoration: underline; }
.article-author-title { color: var(--muted); font-size: .92rem; }

.article-author-links {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin-top: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.article-author-links a { display: inline-flex; gap: .25rem; color: var(--accent); text-decoration: none; }
.article-author-links a:hover { text-decoration: underline; }

.article-meta-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 2rem;
}

.article-meta {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: .12rem;
  align-items: flex-start;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.article-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.75rem;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 1rem;
  text-align: right;
}

.article-taxonomy .taxonomy-group { align-items: flex-end; }

.author-reference {
  position: relative;
  display: inline-flex;
}

.author-popover {
  position: absolute;
  z-index: 20;
  right: -.75rem;
  bottom: calc(100% + .65rem);
  display: block;
  width: 17rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: var(--page);
  box-shadow: 0 .8rem 2rem rgb(0 0 0 / .18);
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.4;
  opacity: 0;
  text-align: left;
  visibility: hidden;
  transition: opacity .08s ease .2s, visibility 0s linear .28s;
}

.author-reference:hover .author-popover,
.author-reference:focus-within .author-popover {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.author-popover::before {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: .65rem;
  content: "";
}
.author-popover strong,
.author-popover .author-title { display: block; }
.author-popover strong { font-size: .94rem; }
.author-popover-header {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
}
.author-popover-avatar {
  width: 3rem;
  font-size: .76rem;
}
.author-title { margin-top: .15rem; color: var(--muted); }
.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px solid var(--line);
}
.author-links a { color: var(--accent); font-size: .8rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.author-links a:hover { text-decoration: underline; }

.post-author-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.post-author-avatars .author-reference + .author-reference { margin-left: -.35rem; }

.post-author-avatar-link {
  display: block;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
}

.post-author-avatar {
  width: 2.5rem;
  border-color: var(--page);
  box-shadow: 0 0 0 1px var(--line);
  font-size: .7rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.post-author-avatar-link:hover .post-author-avatar,
.post-author-avatar-link:focus-visible .post-author-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--reading)) 0;
  justify-content: center;
  align-items: start;
}

.prose {
  grid-column: 1;
  min-width: 0;
  font-size: var(--article-font-size, 1.1875rem);
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.article-continuations {
  grid-column: 1;
  min-width: 0;
  padding-top: clamp(1rem, 8vw, 3rem);
  margin-top: clamp(1rem, 8vw, 3rem);
  border-top: 2px solid var(--line);
}

.site-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .65rem;
}

.intro .site-links-block { margin: 1.5rem 0; }
.series-intro .site-links-block { margin-top: 1.5rem; }
.article-continuations .site-links-block {
  margin-bottom: 3rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 3rem;
}

.site-link-card {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: .6rem;
  min-width: 0;
  min-height: 4rem;
  padding: .45rem .55rem;
  align-items: center;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .3rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.site-link-card:hover,
.site-link-card:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
  outline: none;
  transform: translateY(-2px);
}

.site-link-media {
  display: block;
  overflow: hidden;
  width: 4.25rem;
  border-radius: .18rem;
}

.site-link-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-link-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .88rem;
  line-height: 1.25;
}

.site-link-arrow { color: var(--accent); font-size: .85rem; }

.article-footnotes {
  grid-column: 1;
  min-width: 0;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
}

.article-footnotes .footnotes { margin-top: 0; }
.article-footnotes + .comments { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.comments {
  grid-column: 1;
  min-width: 0;
  margin-top: clamp(2.5rem, 8vw, 5rem);
  padding-top: clamp(1.5rem, 5vw, 2.5rem);
  border-top: 2px solid var(--ink);
}

.comments-heading,
.comment-heading,
.comment-form-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.comments-heading h2 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.comments-heading span,
.comments-status,
.comment-heading,
.comment-form,
.comment-form-actions {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.comments-heading span,
.comments-status {
  color: var(--muted);
  font-size: .9rem;
}

.comments-status { margin: 1.5rem 0 0; }

.comment-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.comment {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.comment-heading strong { color: var(--ink); font-size: .95rem; }
.comment-heading time { color: var(--muted); font-size: .82rem; }

.comment > p {
  margin: .7rem 0 0;
  color: var(--ink);
  line-height: 1.65;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.comment-form {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .3rem;
  background: var(--surface);
}

.comment-form[hidden] { display: none; }
.comment-form h3 { margin: 0; font-size: 1.05rem; }
.comment-form > p { margin: -.55rem 0 0; color: var(--muted); font-size: .85rem; }

.comment-form label { display: grid; gap: .35rem; }
.comment-form label > span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: .2rem;
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
}

.comment-form input { padding: .65rem .75rem; }
.comment-form textarea { min-height: 9rem; padding: .75rem; resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--accent); outline: 2px solid transparent; }

.comment-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

.comment-form-actions { justify-content: flex-start; }
.comment-form-actions button,
.moderation-action {
  padding: .6rem .9rem;
  border: 1px solid var(--accent);
  border-radius: .2rem;
  background: var(--accent);
  color: #111;
  font-weight: 700;
  cursor: pointer;
}

.comment-form-actions button:hover,
.comment-form-actions button:focus-visible,
.moderation-action:hover,
.moderation-action:focus-visible { filter: brightness(1.08); outline: none; }
.comment-form-actions button:disabled { cursor: wait; opacity: .6; }
.comment-form-actions span { color: var(--muted); font-size: .85rem; }
.comment-form-actions [data-state="success"] { color: var(--accent); }
.comment-form-actions [data-state="error"] { color: #ff8d8d; }

.moderation-page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; }
.moderation-card {
  width: min(100%, 42rem);
  padding: clamp(1.4rem, 5vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: .3rem;
  background: var(--surface);
}
.moderation-card h1 { margin: 0 0 .65rem; font-size: clamp(1.8rem, 6vw, 2.75rem); line-height: 1.1; }
.moderation-card > p { color: var(--muted); }
.moderation-card form { margin: 1.5rem 0; }
.moderation-comment {
  margin: 1.5rem 0;
  padding: 1rem;
  border-left: 2px solid var(--accent);
  background: var(--page);
}
.moderation-comment strong {
  display: block;
  margin-bottom: .45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}
.moderation-comment p { margin: 0; overflow-wrap: break-word; white-space: pre-wrap; }

.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.post-navigation-link {
  display: flex;
  min-width: 0;
  padding: 1rem;
  flex-direction: column;
  gap: .45rem;
  border: 1px solid var(--line);
  border-radius: .3rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.post-navigation-link:hover,
.post-navigation-link:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-2px);
}

.post-navigation-next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.post-navigation-label,
.series-continuation-label,
.series-continuation-all {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.post-navigation-label {
  color: var(--accent);
  font-size: .78rem;
}

.post-navigation-title {
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.series-continuation {
  margin-bottom: 3rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .35rem;
  background: var(--surface);
}

.series-continuation-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.series-continuation-label {
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: .78rem;
}

.series-continuation h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
}

.series-continuation h2 a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

.series-continuation-all {
  flex: none;
  color: var(--accent);
  font-size: .76rem;
  text-decoration: none;
}

.series-continuation-all:hover,
.series-continuation-all:focus-visible { text-decoration: underline; }

.series-post-navigation {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.series-post-navigation .post-navigation-link { background: var(--page); }

.series-only-post {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  position: relative;
  display: flex;
  align-items: center;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.prose h1 {
  margin: 1.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
  font-size: 2.4rem;
  font-weight: 600;
}

.prose h2 {
  margin: 1.5rem 0 1rem;
  padding-top: 1.5rem;
  font-size: 2rem;
  font-weight: 600;
}

.prose h3 { margin: 2.8rem 0 .8rem; font-size: 1.45rem; }
.prose h4 { margin: 2rem 0 .7rem; font-size: 1.15rem; }
.prose p {
  margin: 0 0 1.35rem;
  font-size: 1em;
  hyphens: none;
  text-align: justify;
}

.math-inline {
  display: inline-flex;
  max-width: 100%;
  align-items: baseline;
  vertical-align: -.12em;
  white-space: nowrap;
}

.math-inline math,
.math-display math {
  color: inherit;
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", serif;
}

.math-inline math { font-size: 1.05em; }

.math-display {
  max-width: 100%;
  margin: 2rem 0;
  padding: .65rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

.math-display math {
  display: inline-block;
  min-width: max-content;
  margin: 0 auto;
  font-size: 1.2em;
}

.math-inline mtext,
.math-display mtext {
  font-family: Goldman, sans-serif;
}

.heading-anchor {
  flex: none;
  margin-left: .55rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65em;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  text-decoration: none;
  transition: opacity .15s ease;
}

.prose h1:hover .heading-anchor,
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.heading-anchor:focus-visible,
.heading-anchor.is-copied {
  opacity: 1;
}

.heading-anchor:focus-visible {
  border-radius: .1rem;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.prose a { overflow-wrap: anywhere; }

.prose ul,
.prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}

.prose li { margin-block: .35rem; padding-left: .2rem; }
.prose li::marker { color: var(--accent); }
.prose li > ul,
.prose li > ol { margin: .45rem 0 .25rem; padding-left: 1.55rem; }

.prose blockquote {
  margin: 2rem 0;
  padding: .15rem 0 .15rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  margin: 3.5rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.prose code {
  padding: .12em .32em;
  border-radius: .15rem;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84em;
}

.code-block {
  position: relative;
  margin: 2rem 0;
}

.code-language {
  position: absolute;
  top: .7rem;
  left: 1rem;
  color: #959c95;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .54em;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copy-code {
  position: absolute;
  top: .55rem;
  right: .6rem;
  padding: .28rem .5rem;
  border: 1px solid #3a403b;
  border-radius: .2rem;
  background: transparent;
  color: #aeb5ae;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
  cursor: pointer;
}

.copy-code:hover,
.copy-code:focus-visible { color: #fff; border-color: #717a72; }

.prose pre {
  overflow-x: auto;
  margin: 0;
  padding: 2.8rem 1.15rem 1.2rem;
  border: 1px solid #343a35;
  border-radius: .25rem;
  background: var(--code);
  color: var(--code-ink);
  line-height: 1.55;
  tab-size: 4;
}

.prose pre code { padding: 0; background: none; font-size: .82em; }

.syntax-keyword { color: #ffcc66; }
.syntax-literal { color: #ff8f8f; }
.syntax-string { color: #a8d4a2; }
.syntax-number { color: #c6a5ff; }
.syntax-comment { color: #8f9890; font-style: italic; }
.syntax-preprocessor { color: #7fcbd7; }

.prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.25rem 0 .65rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.image-figure { margin: 2.25rem 0; }
.image-figure img { margin: 0; }
.image-figure figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
}

.media-embed { margin: 2.25rem 0; }

.media-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--code);
}

.media-frame video,
.media-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-frame video { object-fit: contain; }

.media-embed figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
}

.link-card {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  margin: 2.25rem 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .35rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.link-card:not(.link-card-has-image) { grid-template-columns: minmax(0, 1fr); }

.link-card:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}

.link-card:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.link-card-media {
  display: grid;
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
  background: var(--surface);
  place-items: center;
}

.link-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
}

.link-card-body {
  display: flex;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  flex-direction: column;
  align-items: flex-start;
}

.link-card-label,
.link-card-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.link-card-label { color: var(--muted); }

.link-card-title {
  margin-top: .4rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.link-card-description {
  margin-top: .5rem;
  color: var(--muted);
  line-height: 1.45;
}

.link-card-action {
  margin-top: auto;
  padding-top: .9rem;
  color: var(--accent);
}

.link-card:hover .link-card-title { color: var(--accent); }

.content-foldout {
  margin: 2.25rem 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .35rem;
  background: var(--surface);
}

.content-foldout summary {
  padding: .9rem 1.05rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.content-foldout summary::marker { color: var(--accent); }
.content-foldout[open] > summary { border-bottom: 1px solid var(--line); }

.foldout-content { padding: 1.1rem 1.2rem; }
.foldout-content > :first-child { margin-top: 0; }
.foldout-content > :last-child { margin-bottom: 0; }

.footnote-ref {
  position: relative;
  margin-left: .08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72em;
  line-height: 0;
}

.footnote-ref > a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.footnote-ref > a:focus-visible {
  border-radius: .1rem;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footnote-popover {
  position: fixed;
  z-index: 30;
  width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 1.5rem));
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: var(--page);
  box-shadow: 0 .8rem 2rem rgb(0 0 0 / .2);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

.footnote-popover[hidden] { display: none; }

.footnote-content > :first-child { margin-top: 0; }
.footnote-content > :last-child { margin-bottom: 0; }
.footnote-content p { margin: 0 0 .85rem; }

.footnote-content h3,
.footnote-content h4,
.footnote-content h5,
.footnote-content h6 {
  margin: 1.25rem 0 .55rem;
  font-size: 1rem;
  line-height: 1.25;
}

.footnote-content ul,
.footnote-content ol { margin: 0 0 .85rem; padding-left: 1.3rem; }
.footnote-content li { margin-block: .2rem; }

.footnote-content blockquote {
  margin: .9rem 0;
  padding-left: .8rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}

.footnote-content code {
  padding: .12em .32em;
  border-radius: .15rem;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84em;
}

.footnote-content .code-block { margin: 1rem 0; }
.footnote-content pre {
  overflow-x: auto;
  margin: 0;
  padding: 2.5rem .8rem .8rem;
  border: 1px solid #343a35;
  background: var(--code);
  color: var(--code-ink);
  line-height: 1.45;
}
.footnote-content pre code { padding: 0; background: none; }
.footnote-content img { max-width: 100%; height: auto; }
.footnote-content .link-card { display: block; margin: 1rem 0; }
.footnote-content .link-card-media { display: block; min-height: 0; aspect-ratio: 16 / 9; }
.footnote-content .image-figure,
.footnote-content .media-embed,
.footnote-content .table-wrap { margin: 1rem 0; }
.footnote-content table { width: 100%; border-collapse: collapse; }
.footnote-content th,
.footnote-content td { padding: .45rem; border-bottom: 1px solid var(--line); text-align: left; }

.footnotes {
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: .35rem;
  background: var(--surface);
  color: var(--muted);
  font-size: .92rem;
}

.footnotes summary {
  padding: .9rem 1.05rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.footnotes summary h2 {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
}

.footnotes summary::marker { color: var(--accent); }
.footnotes[open] > summary { border-bottom: 1px solid var(--line); }
.footnotes ol { margin: 0; padding: 1.1rem 1.2rem 1.1rem 3rem; }
.footnotes > ol > li { padding-left: .35rem; }
.footnotes > ol > li + li { margin-top: 1rem; }
.footnote-body > :first-child { margin-top: 0; }
.footnote-body > :last-child { margin-bottom: 0; }
.footnote-back { margin-left: .35rem; color: var(--accent); text-decoration: none; }

.footnote-dialog {
  width: min(100%, 40rem);
  max-width: none;
  max-height: min(70vh, 30rem);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: .25rem .25rem 0 0;
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 -1rem 3rem rgb(0 0 0 / .22);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.footnote-dialog::backdrop { background: rgb(0 0 0 / .48); }

.footnote-dialog-inner { padding: 1.15rem 1.25rem 1.5rem; }

.footnote-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.footnote-dialog header p {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footnote-dialog button {
  padding: .25rem .4rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.footnote-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footnote-dialog-content { padding-top: 1rem; line-height: 1.55; }

.table-wrap { overflow-x: auto; margin: 2rem 0; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}

.prose th,
.prose td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.prose th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.toc {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 2rem;
  width: var(--toc-width);
  margin-left: 2.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.1;
}

.toc-title {
  margin: 0 0 .85rem;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li + li { margin-top: .7rem; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

.toc .toc-h2 { padding-left: .45rem; }
.toc .toc-h3 { padding-left: .85rem; }

.toc-recent {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.toc-recent ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-recent a {
  display: block;
  color: var(--ink);
  line-height: 1.35;
  text-decoration-color: var(--accent);
}

.toc-recent time {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.2;
}

.error-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.error-main {
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 12vw, 9rem);
}

.error-state {
  max-width: 46rem;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  border-left: 2px solid var(--accent);
}

.footer-links {
	font-size: 1.3em;
	width: auto;
	gap: 1rem;
	display: flex;
}

.error-state h1 {
  margin: .65rem 0 .75rem;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

.error-state p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.error-home {
  display: inline-block;
  margin-top: 2rem;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 84rem) {
  .article-layout { display: block; }
  .prose { max-width: var(--reading); margin-inline: auto; }
  .article-continuations { max-width: var(--reading); margin-inline: auto; }
  .comments { max-width: var(--reading); margin-inline: auto; }
  .toc { display: none; }
}

@media (max-width: 54rem) {
  .post-card { grid-template-columns: 7rem minmax(0, 1fr) 11rem; gap: 1.5rem; }
}

@media (max-width: 46rem) {
  .post-card { grid-template-columns: 7rem minmax(0, 1fr); }
  .post-taxonomy {
    grid-column: 2;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding-top: 0;
  }
  .article-meta-row { display: flex; }
  .author-page-header { align-items: flex-start; }
  .link-card { display: block; }
  .link-card-media { display: block; min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 38rem) {
  .shell { width: min(calc(100% - 1.5rem), var(--content)); }
  .home-main { padding-top: 1rem; }
  [data-post-index] .post-count { display: none; }
  .section-heading { gap: .75rem; }
  .section-actions { gap: .45rem; }
  .post-filter { padding-left: .55rem; }
  .filter-button { gap: .35rem; }
  .filter-button [data-filter-label] { display: none; }
  .sort-filter [data-sort-label] { display: none; }
  .intro h1 { font-size: clamp(2.7rem, 14vw, 4.25rem); }
  .post-card { display: block; padding: 1.6rem 0; }
  .post-date { display: block; margin-bottom: .7rem; }
  .post-taxonomy { margin-top: 1rem; }
  .footer-inner { flex-direction: column; justify-content: center; }
  .article-header h1 { font-size: clamp(2.7rem, 14vw, 4.6rem); }
  .article-shell { padding-top: .75rem; }
  .post-navigation { gap: .65rem; }
  .post-navigation-link { padding: .8rem; }
  .post-navigation-title { font-size: .92rem; }
  .series-continuation { padding: 1rem; }
  .series-continuation-header { display: block; }
  .series-continuation-all { display: inline-block; margin-top: .75rem; }
}

@media (max-width: 34rem) {
  .article-page .page-tools { gap: .5rem; }
  .author-page-header { display: block; }
  .author-page-avatar { width: 5.5rem; margin-bottom: 1.25rem; }
  .section-heading { align-items: flex-end; flex-direction: column; }
}

@media (hover: none) {
  .heading-anchor { opacity: .45; }
  .author-popover { display: none !important; }
  .footnote-popover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .filter-arrow,
  .heading-anchor,
  .link-card,
  .site-link-card,
  .post-thumbnail img { transition: none; }
}