@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&display=swap');

:root {
  color-scheme: light dark;
  --paper: #f7f1e3;
  --ink: #1d1a16;
  --vermilion: #9e2b20;
  --gold: #9a6d1e;
  --rule: #b8a58a;
  font-family: "Source Serif 4", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; min-width: 320px; line-height: 1.85; }
a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--vermilion); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--vermilion); color: var(--paper); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid var(--paper); }
.shell { width: min(100% - 2.5rem, 72ch); margin: 0 auto; }
.site-header { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.site-title { font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.intro { padding: 4.5rem 0 2.25rem; border-bottom: 3px solid var(--vermilion); }
h1, h2 { font-family: "Source Serif 4", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; line-height: 1.35; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2.1rem, 7vw, 4.5rem); letter-spacing: -0.03em; }
h2 { margin: 0.35rem 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.post-list { margin: 0; padding: 0; list-style: none; }
.post-list-item { border-bottom: 1px solid var(--rule); padding: 2rem 0; }
.post-list-item p, .intro p { margin: 0; }
time, .author { color: var(--vermilion); font-variant-numeric: tabular-nums; }
.post { padding: 4rem 0; }
.post header { border-bottom: 3px solid var(--vermilion); padding-bottom: 2rem; }
.author { margin: 0.5rem 0 0; }
.post-body { margin-top: 2.5rem; }
.post-body p, .post-body ul, .post-body ol { max-width: 72ch; }
.post-body blockquote { margin: 1.5rem 0; padding: 0 1.25rem; border-inline-start: 1px solid var(--gold); }
.post-body code { color: var(--vermilion); }
.return-link { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

@media (prefers-color-scheme: dark) {
  :root { --paper: #1d1a16; --ink: #f7f1e3; --vermilion: #ec897b; --gold: #e0bb67; --rule: #76674f; }
}