:root {
  --bg: #f5f1e8; --ink: #20201e; --muted: #75705f; --line: #d9d1bf; --accent: #2d4868; --note: #e8e3d4; --field: #fbf9f3;
  --serif: "EB Garamond", Garamond, Georgia, serif; --ui: "EB Garamond", Georgia, serif;
  --h-font: 500 32px/1.1 var(--serif); --ph: #e3dccb; --r: 0;
}
body { font: 21px/1.6 var(--serif); }
.sc { font-variant: small-caps; letter-spacing: .08em; text-transform: lowercase; }

/* title page */
.title { text-align: center; padding: 120px 24px 72px; max-width: 760px; margin: 0 auto; }
.title h1 { font: 400 clamp(56px, 10vw, 104px)/.95 var(--serif); letter-spacing: -.01em; margin: 0; }
.title p { font-style: italic; color: var(--muted); font-size: 23px; margin: 26px 0 0; }
.title .sub { display: inline-block; margin-top: 34px; font-size: 19px; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.rule { width: 64px; height: 1px; background: var(--ink); margin: 40px auto 0; border: 0; }

.toc { max-width: 760px; margin: 0 auto; padding: 0 24px 120px; }
.toc h2 { text-align: center; font: 500 22px var(--serif); margin: 0 0 22px; }
.filter { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 36px; font-size: 18px; }
.filter button { font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 0; border-bottom: 1px solid transparent; }
.filter button[aria-pressed=true] { color: var(--ink); border-color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 14px 0; text-decoration: none; }
.toc .no { color: var(--muted); font-feature-settings: "onum"; text-align: right; padding-top: 3px; }
.toc .line { display: flex; align-items: baseline; gap: 10px; }
.toc .t { font-size: 27px; line-height: 1.2; }
.toc li a:hover .t { color: var(--accent); }
.toc .dots { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-6px); min-width: 24px; }
.toc .d { color: var(--muted); font-size: 18px; white-space: nowrap; }
.toc .x { grid-column: 2; font-style: italic; color: var(--muted); font-size: 18px; margin-top: 2px; }

/* chapter */
.chapter { max-width: 640px; margin: 0 auto; padding: 72px 24px 24px; }
.back { font-size: 18px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.num { text-align: center; font: 400 88px/1 var(--serif); color: var(--accent); margin: 56px 0 0; font-feature-settings: "onum"; }
.chapter h1 { text-align: center; font: 500 clamp(40px, 6vw, 56px)/1.1 var(--serif); margin: 16px 0 10px; }
.chapter .meta { text-align: center; color: var(--muted); font-size: 18px; margin: 0 0 56px; }
.chapter .drop { float: left; font-size: 4.1em; line-height: .82; padding: 6px 10px 0 0; color: var(--accent); }
.chapter p { margin: 0 0 1em; hyphens: auto; }
.chapter .sig { text-align: right; font-style: italic; font-size: 24px; margin-top: 36px; }
.turn { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; font-size: 19px; }
.turn a { text-decoration: none; color: var(--accent); }
.subline { text-align: center; margin: 56px 0 0; font-size: 20px; }
.subline a { color: var(--accent); }
.comments { max-width: 640px; margin: 0 auto; padding: 56px 24px 120px; font-size: 19px; }
label { font: 500 17px var(--serif); letter-spacing: 0; }
button[type=submit], dialog.sub [data-s=done] button { font: 500 18px/1 var(--serif); letter-spacing: .04em; }

@media (max-width: 560px) {
  .title { padding: 72px 16px 48px; }
  .toc, .chapter, .comments { padding-left: 16px; padding-right: 16px; }
  .toc li a { grid-template-columns: 28px 1fr; }
  .toc .t { font-size: 23px; }
  .toc .dots { display: none; }
  .toc .line { flex-direction: column; gap: 2px; }
}