:root {
  --paper: #f1ece1;
  --paper-deep: #e7dfd1;
  --ink: #25231f;
  --ink-soft: #514d46;
  --muted: #756f65;
  --line: #c9c0b1;
  --accent: #a94230;
  --code-bg: #252723;
  --code-ink: #ece6da;
  --font-serif: "Iowan Old Style", "Baskerville", "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", "Noto Sans Mono CJK SC", monospace;
  --site-width: 1180px;
  --reading-width: 880px;
  --prose-width: 760px;
  --prose-line-height: 1.78;
  --paragraph-spacing: .92em;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #d8c1a7;
  color: var(--ink);
}

a {
  color: inherit;
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--paper);
  font: 12px/1 var(--font-sans);
}

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

.site-header {
  padding: 24px clamp(20px, 3vw, 44px) 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr);
  align-items: center;
  gap: 48px;
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}

.site-brand {
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: 3px 12px;
  color: var(--ink);
  text-decoration: none;
}

.site-brand__mark {
  grid-row: 1 / span 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ink);
  color: var(--accent);
  font: 600 14px/1 var(--font-serif);
}

.site-brand__text {
  display: grid;
  gap: 3px;
}

.site-brand strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.04em;
}

.site-brand small {
  color: var(--muted);
  font: 9px/1.4 var(--font-mono);
  letter-spacing: .04em;
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  align-items: center;
  font: 600 14px/1 var(--font-sans);
}

.site-nav a {
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.home-shell,
.listing-shell,
.page-shell {
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 44px) 72px;
}

.home-latest {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 36px;
  padding: 34px 0 38px;
}

.home-latest__issue {
  display: grid;
  align-content: start;
  gap: 10px;
  color: var(--accent);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-latest__issue strong {
  font: 400 30px/1 var(--font-serif);
  letter-spacing: -.05em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--accent);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 1px;
  content: "";
  background: currentColor;
}

.home-latest h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(29px, 2.7vw, 38px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.home-latest h1 a,
.article-row h3 a {
  text-decoration: none;
}

.home-latest h1 a:hover,
.article-row h3 a:hover {
  color: var(--accent);
}

.home-latest__summary {
  display: -webkit-box;
  max-width: 860px;
  margin: 16px 0 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.78;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 16px;
  color: var(--muted);
  font: 10.5px/1.5 var(--font-mono);
}

.article-taxonomy a {
  text-decoration: none;
}

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

.article-taxonomy--quiet {
  grid-column: 1;
  margin-top: 0;
  font-size: 10px;
  opacity: .82;
}

.article-taxonomy--header {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.section-rule {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 36px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.section-rule h2,
.section-rule span {
  margin: 0;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section-rule span {
  color: var(--muted);
}

.article-list,
.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 6px 36px;
  align-items: start;
  padding: 17px 0 19px;
  border-bottom: 1px solid var(--line);
}

.article-row > time {
  color: var(--muted);
  font: 11px/1.55 var(--font-mono);
}

.article-row__main {
  display: grid;
  gap: 6px;
}

.article-row h3 {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0 0;
  color: var(--muted);
  font: 11px/1.5 var(--font-mono);
}

.pagination span:last-child {
  text-align: right;
}

.pagination a {
  color: var(--accent);
  text-decoration: none;
}

.reading-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 34px clamp(20px, 3vw, 44px) 86px;
}

.reading-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font: 12px/1.45 var(--font-mono);
}

.reading-nav a {
  color: var(--ink);
  text-decoration: none;
}

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

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--reading-width)) minmax(170px, 200px);
  justify-content: center;
  gap: clamp(48px, 6vw, 82px);
  align-items: start;
}

.reading-article {
  min-width: 0;
  max-width: var(--reading-width);
}

.article-header h1 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 560;
  line-height: 1.22;
  letter-spacing: -.036em;
  text-wrap: balance;
}

.article-deck {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.78;
  text-wrap: pretty;
}

.article-content {
  max-width: var(--reading-width);
  margin-top: 52px;
  font-size: 17px;
  line-height: var(--prose-line-height);
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

.article-content > :first-child {
  margin-top: 0;
}

.article-content > p,
.article-content > ul,
.article-content > ol,
.article-content > blockquote,
.article-content > dl,
.article-content > details,
.article-content > h1,
.article-content > h2,
.article-content > h3,
.article-content > h4,
.article-content > h5,
.article-content > h6 {
  max-width: var(--prose-width);
  margin-right: auto;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  scroll-margin-top: 24px;
  text-wrap: balance;
}

.article-content h2 {
  margin: 2.05em 0 .65em;
  font-size: clamp(25px, 2.35vw, 33px);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.025em;
}

.article-content h3 {
  margin: 1.7em 0 .55em;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.45;
}

.article-content h4 {
  margin: 1.55em 0 .5em;
  font: 600 16px/1.5 var(--font-sans);
}

.article-content p {
  margin-top: var(--paragraph-spacing);
  margin-bottom: var(--paragraph-spacing);
  text-wrap: pretty;
}

.article-content a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.article-content strong {
  font-weight: 680;
}

.article-content ul,
.article-content ol {
  display: grid;
  gap: .32em;
  margin: 1em 0;
  padding-left: 1.45em;
}

.article-content li::marker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .82em;
}

.article-content li > ul,
.article-content li > ol {
  margin: .45em 0 .2em;
}

.article-content blockquote {
  margin: 1.65em 0;
  padding: 1.1em 0 1.1em 1.45em;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-size: 1em;
  line-height: 1.78;
}

.article-content blockquote p {
  margin: 0;
}

.article-content :not(pre) > code {
  padding: .12em .32em;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  color: #783629;
  font: .82em/1.45 var(--font-mono);
  overflow-wrap: anywhere;
}

.article-content pre,
.article-content .highlight {
  margin: 1.8em 0;
}

.article-content pre {
  padding: 22px 24px;
  overflow-x: auto;
  border: 1px solid #343630;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 13px/1.75 var(--font-mono);
  tab-size: 2;
}

.article-content .highlight pre {
  margin: 0;
}

.article-content table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
}

.article-content th,
.article-content td {
  padding: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article-content tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.article-content th {
  background: var(--paper-deep);
  font: 650 11px/1.4 var(--font-sans);
  letter-spacing: .04em;
}

.article-content caption {
  margin-bottom: .75em;
  color: var(--muted);
  font: 11px/1.5 var(--font-mono);
  text-align: left;
}

.article-content hr {
  width: 72px;
  margin: 3.2em auto;
  border: 0;
  border-top: 1px solid var(--line);
}

.article-content img {
  display: block;
  max-width: 100%;
  margin: 2em auto .7em;
}

.article-content figure {
  margin: 2em 0;
}

.article-content figcaption {
  margin-top: .7em;
  color: var(--muted);
  font: 11px/1.65 var(--font-mono);
  text-align: center;
}

.article-content .footnote,
.article-content .footnotes {
  margin-top: 3.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.article-content sup {
  font-family: var(--font-sans);
  font-size: .72em;
}

.article-content dl {
  display: grid;
  grid-template-columns: minmax(110px, .28fr) minmax(0, 1fr);
  gap: .55em 1.25em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.article-content dt {
  font: 650 .92em/1.7 var(--font-sans);
}

.article-content dd {
  margin: 0;
  color: var(--ink-soft);
}

.article-content kbd {
  padding: .12em .4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--paper-deep);
  font: .78em/1.35 var(--font-mono);
}

.article-content mark {
  padding: 0 .16em;
  background: #ddcda9;
  color: var(--ink);
}

.article-content abbr[title] {
  text-decoration-color: var(--muted);
  text-underline-offset: .2em;
}

.article-content details {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding: 1em 1.15em;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.article-content summary {
  cursor: pointer;
  font: 650 15px/1.5 var(--font-sans);
}

.article-content p:has(> img:only-child) {
  max-width: var(--reading-width);
}

.article-content .task-list-item {
  list-style: none;
}

.article-content input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--accent);
}

.article-rail {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 30px;
  color: var(--muted);
  font: 12px/1.65 var(--font-mono);
}

.toc {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.toc h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font: 650 12px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toc ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc a {
  text-decoration: none;
}

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

.article-facts {
  display: grid;
  gap: 18px;
  margin: 0;
}

.article-facts div {
  display: grid;
  gap: 3px;
}

.article-facts dt {
  color: var(--muted);
  text-transform: uppercase;
}

.article-facts dd {
  margin: 0;
  color: var(--ink-soft);
}

.article-end {
  display: grid;
  gap: 11px;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 11.5px/1.7 var(--font-mono);
}

.article-end strong {
  color: var(--ink);
  font: 600 16px/1.4 var(--font-sans);
}

.comments {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.page-shell {
  padding-top: 62px;
}

.reading-article--page {
  margin: 0 auto;
}

.listing-header {
  max-width: 880px;
  padding: 62px 0 54px 130px;
}

.listing-header h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.listing-header > p:last-child {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.archive-list li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 30px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.archive-list time {
  color: var(--muted);
  font: 11px/1.4 var(--font-mono);
}

.archive-list a {
  font-size: 18px;
  line-height: 1.45;
  text-decoration: none;
}

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

.category-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.category-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  min-width: 0;
  padding: 24px 24px 25px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.category-card:nth-child(odd) {
  padding-right: 36px;
  border-right: 1px solid var(--line);
}

.category-card:nth-child(even) {
  padding-left: 36px;
}

.category-card__index {
  color: var(--muted);
  font: 11px/1 var(--font-mono);
}

.category-card strong {
  min-width: 0;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 520;
  line-height: 1.25;
  text-wrap: pretty;
}

.term-count {
  display: flex;
  gap: 5px;
  align-items: baseline;
  color: var(--muted);
  font: 12px/1 var(--font-sans);
  white-space: nowrap;
}

.term-count b {
  color: var(--ink-soft);
  font: 600 15px/1 var(--font-mono);
}

.category-card:hover strong,
.tag-item:hover strong {
  color: var(--accent);
}

.tag-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 36px;
  border-top: 1px solid var(--ink);
}

.tag-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.tag-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 520;
  line-height: 1.4;
}

.tag-item span {
  color: var(--muted);
  font: 11px/1 var(--font-mono);
}

.site-footer {
  padding: 0 clamp(20px, 3vw, 44px) 32px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font: 10px/1.5 var(--font-mono);
}

.site-footer nav {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.site-footer a {
  text-decoration: none;
}

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

.back-to-top {
  position: fixed;
  z-index: 20;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 14px/1 var(--font-mono);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--reading-width));
  }

  .article-rail {
    position: static;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
  }

  .toc {
    display: none;
  }

  .article-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
  }

  .reading-article {
    grid-row: 2;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-top: 18px;
  }

  .site-header__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 2px;
    font-size: 12px;
  }

  .home-latest {
    display: block;
    padding: 28px 0 32px;
  }

  .home-latest__issue {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
  }

  .home-latest__issue span br {
    display: none;
  }

  .home-latest__issue strong {
    font-size: 28px;
  }

  .home-latest h1 {
    font-size: 30px;
  }

  .home-latest__summary {
    font-size: 14px;
    line-height: 1.65;
  }

  .section-rule {
    display: flex;
    justify-content: space-between;
    gap: 18px;
  }

  .article-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .article-row__main {
    gap: 5px;
  }

  .article-taxonomy--quiet {
    grid-column: auto;
  }

  .article-row h3 {
    font-size: 20px;
  }

  .pagination {
    grid-template-columns: 1fr 1fr;
  }

  .pagination span:nth-child(2) {
    display: none;
  }

  .reading-shell {
    padding-top: 28px;
  }

  .reading-nav {
    margin-bottom: 36px;
  }

  .article-header h1 {
    font-size: 34px;
  }

  .article-deck {
    font-size: 16px;
  }

  .article-content {
    margin-top: 44px;
    font-size: 16px;
    line-height: 1.76;
  }

  .article-content h2 {
    font-size: 25px;
  }

  .article-content h3 {
    font-size: 19px;
  }

  .article-content pre {
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
    border-right: 0;
    border-left: 0;
  }

  .article-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .article-content dl {
    grid-template-columns: 1fr;
    gap: .2em;
  }

  .listing-header {
    padding: 48px 0 42px;
  }

  .listing-header h1 {
    font-size: 36px;
  }

  .archive-list li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .category-index {
    grid-template-columns: 1fr;
  }

  .category-card,
  .category-card:nth-child(odd),
  .category-card:nth-child(even) {
    padding: 20px 0 21px;
    border-right: 0;
  }

  .category-card {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .category-card strong {
    font-size: 22px;
  }

  .tag-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .reading-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .tag-index {
    grid-template-columns: 1fr;
  }
}

@media print {
  .site-header,
  .site-footer,
  .reading-nav,
  .article-rail,
  .back-to-top,
  .comments {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .reading-shell {
    width: auto;
    padding: 0;
  }

  .article-layout {
    display: block;
  }

  .reading-article {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .back-to-top {
    transition: none;
  }
}