:root {
  --ink: #20231f;
  --ink-soft: #41483f;
  --muted: #6c7168;
  --paper: #f3f0e7;
  --paper-deep: #e7e1d4;
  --paper-light: #faf8f2;
  --line: #c9c1b1;
  --red: #a4312d;
  --green: #34483a;
  --shadow: 0 18px 50px rgba(48, 43, 34, .08);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); font-family: "Aptos", "Segoe UI", Arial, sans-serif; line-height: 1.55; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 20px; padding: 12px 16px; color: #fff; background: var(--ink); }
.skip-link:focus { top: 20px; }

.archive-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); background: rgba(243, 240, 231, .96); }
.archive-wordmark { display: flex; gap: 12px; align-items: center; text-decoration: none; letter-spacing: -.02em; }
.archive-wordmark > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ink); font: 15px Georgia, serif; }
.archive-wordmark strong { line-height: 1.1; }
.archive-wordmark small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.archive-header nav { display: flex; gap: 25px; font-size: 13px; font-weight: 750; }
.archive-notice { padding: 7px 20px; color: #eceae3; background: var(--green); text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.breadcrumbs { display: flex; gap: 10px; align-items: center; max-width: 1260px; margin: 0 auto; padding: 19px clamp(20px, 4vw, 50px); color: var(--muted); font-size: 12px; overflow-x: auto; white-space: nowrap; }
.breadcrumbs a { color: var(--ink); font-weight: 700; }
main { max-width: 1260px; min-height: 65vh; margin: 0 auto; padding: 0 clamp(20px, 4vw, 50px) 90px; }

.kicker { margin: 0 0 17px; color: var(--red); font-size: 11px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.archive-hero { padding: clamp(70px, 10vw, 125px) 0 75px; border-bottom: 1px solid var(--line); }
.archive-hero h1, .topic-heading h1, .board-heading h1, .search-heading h1 { margin: 0; font: 500 clamp(50px, 8vw, 104px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.archive-hero > p:not(.kicker), .search-heading > p:not(.kicker) { max-width: 660px; margin: 26px 0 0; color: var(--muted); font: 20px/1.55 Georgia, serif; }
.archive-button { display: inline-flex; margin-top: 30px; padding: 14px 18px; color: #fff; background: var(--green); text-decoration: none; font-size: 13px; font-weight: 750; }
.archive-button:hover { background: var(--red); }
.archive-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 85px; border-bottom: 1px solid var(--line); }
.archive-stats div { padding: 27px 0; border-right: 1px solid var(--line); text-align: center; }
.archive-stats div:last-child { border-right: 0; }
.archive-stats strong { display: block; font: 500 34px Georgia, serif; }
.archive-stats span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.category { margin: 0 0 88px; }
.category-heading { display: flex; gap: 18px; align-items: baseline; padding-bottom: 17px; border-bottom: 1px solid var(--ink); }
.category-heading span { color: var(--red); font: 13px Georgia, serif; }
.category-heading h2 { margin: 0; font: 500 clamp(30px, 4vw, 48px) Georgia, serif; letter-spacing: -.025em; }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-card { min-width: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.board-card:nth-child(even) { border-right: 0; }
.board-card > a { display: block; min-height: 265px; padding: 28px clamp(22px, 4vw, 46px); text-decoration: none; transition: background .15s; }
.board-card > a:hover { background: var(--paper-light); }
.board-id { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.board-card h3 { margin: 15px 0 9px; font: 500 27px Georgia, serif; }
.board-card p { min-height: 48px; margin: 0; color: var(--muted); font-size: 13px; }
.board-card dl { display: flex; gap: 35px; margin: 27px 0 0; }
.board-card dl div { display: flex; gap: 8px; align-items: baseline; }
.board-card dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.board-card dd { margin: 0; font: 18px Georgia, serif; }
.subboards { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 16px 25px; border-top: 1px dashed var(--line); font-size: 11px; }
.subboards span { color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.subboards a { padding: 3px 8px; border: 1px solid var(--line); text-decoration: none; }

.board-heading, .topic-heading, .search-heading { padding: clamp(45px, 7vw, 82px) 0 45px; border-bottom: 1px solid var(--line); }
.board-heading h1, .topic-heading h1, .search-heading h1 { font-size: clamp(42px, 6vw, 78px); }
.board-heading > p:not(.kicker), .topic-heading > p:not(.kicker) { max-width: 780px; color: var(--muted); font: 18px Georgia, serif; }
.board-heading > div { margin-top: 25px; color: var(--muted); font-size: 12px; }
.board-heading > div strong { color: var(--ink); font: 20px Georgia, serif; }
.topic-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.topic-row { display: grid; grid-template-columns: 24px minmax(240px, 1fr) 70px 70px 105px; gap: 18px; align-items: center; padding: 18px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.topic-row:hover { background: var(--paper-light); }
.topic-row > a { min-width: 0; text-decoration: none; }
.topic-row > a strong { display: block; overflow: hidden; font: 500 17px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.topic-row small { display: block; color: var(--muted); font-size: 10px; }
.topic-row > span:not(.topic-state) { text-align: right; }
.topic-row > span strong { display: block; font: 15px Georgia, serif; }
.topic-row time { color: var(--muted); text-align: right; }
.topic-state { color: var(--red); text-align: center; }
.pagination { display: flex; justify-content: center; gap: 6px; align-items: center; margin: 28px 0; }
.pagination a, .pagination strong, .pagination span { display: grid; min-width: 34px; height: 34px; place-items: center; padding: 0 7px; }
.pagination a { border: 1px solid var(--line); text-decoration: none; }
.pagination a:hover { border-color: var(--ink); }
.pagination strong { color: #fff; background: var(--green); }

.topic-heading p:last-child { margin-bottom: 0; }
.posts { border-top: 1px solid var(--ink); }
.post { scroll-margin-top: 24px; border-bottom: 1px solid var(--line); background: rgba(250, 248, 242, .35); }
.post:target { box-shadow: inset 4px 0 var(--red); }
.post > header { display: flex; justify-content: space-between; gap: 25px; align-items: start; padding: 17px 22px; border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.post > header > div { display: flex; gap: 12px; min-width: 0; align-items: baseline; }
.post > header h2 { margin: 0; overflow: hidden; font: 500 16px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.post > header time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.post-number { color: var(--red); font-size: 10px; font-weight: 800; text-decoration: none; }
.post-grid { display: grid; grid-template-columns: 175px minmax(0, 1fr); }
.author-card { padding: 25px 21px; border-right: 1px solid var(--line); }
.author-card strong { display: block; overflow-wrap: anywhere; font: 500 18px Georgia, serif; }
.author-card span, .author-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.post-content { min-width: 0; padding: 28px clamp(22px, 4vw, 48px) 38px; overflow-wrap: anywhere; font-size: 14px; }
.post-content a { color: #74401e; }
.post-content blockquote { margin: 18px 0; padding: 16px 20px; border-left: 3px solid var(--red); background: var(--paper-deep); }
.post-content blockquote cite { display: block; margin-bottom: 8px; color: var(--red); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.post-content .code-block { padding: 18px; overflow: auto; border: 1px solid var(--line); background: #272b27; color: #eef0e9; font: 12px/1.65 Consolas, monospace; white-space: pre-wrap; }
.post-content hr { margin: 25px 0; border: 0; border-top: 1px solid var(--line); }
.post-content img { display: block; margin: 16px 0; border: 1px solid var(--line); }
.post-content ul, .post-content ol { padding-left: 25px; }
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.post-content table { border-collapse: collapse; }
.post-content td { padding: 8px; border: 1px solid var(--line); }
.signature { max-height: 180px; margin-top: 32px; padding-top: 15px; overflow: hidden; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11px; }
.signature img { max-height: 100px; }
.edited { margin: 25px 0 0; color: var(--muted); font-size: 10px; font-style: italic; }
.attachments { margin-top: 28px; padding: 15px 18px; border: 1px solid var(--line); background: var(--paper-light); }
.attachments > strong { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.attachments ul { margin: 10px 0 0; padding: 0; list-style: none; }
.attachments li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.attachments em { color: var(--red); font-size: 10px; }
.attachments small { color: var(--muted); }
.missing-image { color: var(--muted); font-style: italic; }

.poll { max-width: 780px; margin: 35px auto; padding: 28px; border: 1px solid var(--line); background: var(--paper-light); box-shadow: var(--shadow); }
.poll h2 { margin: 0 0 22px; font: 500 27px Georgia, serif; }
.poll-row { margin: 13px 0; }
.poll-row > div:first-child { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.poll-row span { color: var(--muted); }
.poll-bar { height: 7px; margin-top: 6px; background: var(--paper-deep); }
.poll-bar i { display: block; height: 100%; background: var(--red); }
.poll-total { color: var(--muted); font-size: 11px; text-align: right; }

.search-heading { border-bottom: 0; }
.search-box { min-height: 340px; padding: 30px; border: 1px solid var(--line); background: var(--paper-light); box-shadow: var(--shadow); }
.search-box .pagefind-ui__search-input { border: 1px solid var(--ink); border-radius: 0; background: #fff; font-family: inherit; }
.search-box .pagefind-ui__result-title { font-family: Georgia, serif; }
.search-box .pagefind-ui__result-link { color: var(--ink); }
.search-box mark { color: inherit; background: #ead087; }
.empty-state { padding: 55px 25px; color: var(--muted); text-align: center; }

.archive-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 820px) {
  .board-grid { grid-template-columns: 1fr; }
  .board-card { border-right: 0; }
  .topic-row { grid-template-columns: 22px minmax(0, 1fr) 75px; }
  .topic-row > span:not(.topic-state), .topic-row time { display: none; }
  .post-grid { grid-template-columns: 1fr; }
  .author-card { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 14px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .author-card strong, .author-card span, .author-card small { display: inline; margin: 0; }
}

@media (max-width: 540px) {
  .archive-header nav { gap: 14px; }
  .archive-wordmark strong { font-size: 13px; }
  .archive-stats { grid-template-columns: 1fr; }
  .archive-stats div { border-right: 0; border-bottom: 1px solid var(--line); }
  .archive-stats div:last-child { border-bottom: 0; }
  .post > header { flex-direction: column; gap: 5px; }
  .post > header time { padding-left: 35px; }
  .archive-footer { flex-direction: column; }
}

@media print {
  .archive-header nav, .archive-notice, .breadcrumbs, .pagination, .archive-footer { display: none; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .post { break-inside: avoid; }
}
