:root {
  --bg: #fbfaf6; --ink: #1c1b19; --muted: #6f6a61; --line: #e6e1d6; --accent: #7a2e28; --note: #f4ebe0;
  --serif: "Newsreader", Georgia, serif; --ui: "Inter Tight", system-ui, sans-serif;
  --h-font: 500 30px/1.15 var(--serif); --ph: #ebe6dc; --r: 2px;
}
html { scroll-behavior: smooth; }
body { font: 21px/1.65 var(--serif); }
.top { max-width: 680px; margin: 0 auto; padding: 28px 24px 0; display: flex; align-items: baseline; gap: 22px; font: 14px var(--ui); }
.top .name { font: 600 13px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; margin-right: auto; }
.top a { text-decoration: none; color: var(--muted); }
.top a:hover { color: var(--ink); }
.top .sub-link { color: var(--accent); font-weight: 600; }

article { max-width: 680px; margin: 0 auto; padding: 96px 24px 16px; }
.when { font: 14px var(--ui); color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.when a { text-decoration: none; }
.when a:hover { color: var(--accent); }
h1 { font: 500 clamp(44px, 7vw, 68px)/1.05 var(--serif); letter-spacing: -.015em; margin: 18px 0 48px; }
article p { margin: 0 0 1.1em; }
article p:first-of-type { font-size: 25px; line-height: 1.55; }
.sig { font: italic 24px var(--serif); margin: 40px 0 0; }

.after { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.next { border-top: 1px solid var(--ink); margin-top: 64px; padding: 28px 0 8px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font: 16px var(--ui); }
.next p { margin: 0; flex: 1; min-width: 220px; }
.next button { font: 600 15px var(--ui); padding: 12px 20px; background: var(--accent); color: #fff; border: 0; border-radius: 2px; cursor: pointer; }
.comments { padding: 56px 0 24px; }
.comments, .c-form { font: 16px/1.5 var(--ui); }
.c p { font: 19px/1.55 var(--serif); }

.earlier { padding: 48px 0 96px; }
.earlier h2 { font: 600 13px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.earlier ol { list-style: none; padding: 0; margin: 0; }
.earlier li a { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.earlier li a:hover b { color: var(--accent); }
.earlier b { font: 500 23px/1.3 var(--serif); flex: 1; }
.earlier small { font: 14px var(--ui); color: var(--muted); white-space: nowrap; }

/* contents page */
.list { max-width: 680px; margin: 0 auto; padding: 88px 24px 96px; }
.list h1 { margin-bottom: 20px; }
.keys { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 32px; font: 14px var(--ui); }
.keys button { font: inherit; border: 1px solid var(--line); background: none; color: var(--ink); padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.keys button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.list .entry { display: block; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; }
.list .entry b { font: 500 28px/1.2 var(--serif); display: block; }
.list .entry:hover b { color: var(--accent); }
.list .entry span { display: block; color: var(--muted); font-size: 19px; margin-top: 6px; }
.list .entry small { font: 14px var(--ui); color: var(--muted); }

@media (max-width: 560px) {
  body { font-size: 19px; }
  article { padding-top: 56px; }
  article p:first-of-type { font-size: 22px; }
  .top { gap: 14px; padding: 20px 16px 0; }
  article, .after, .list { padding-left: 16px; padding-right: 16px; }
  .earlier li a { flex-direction: column; gap: 2px; }
}