:root {
  --paper: #f7f4ee;
  --ink: #3b3a37;
  --pencil: #8a8780;
  --rule: #d9d4c9;
  --font: "EB Garamond", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1c1b19; --ink: #dedbd3; --pencil: #8e8b83; --rule: #35332f; }
}
:root[data-theme="dark"] { --paper: #1c1b19; --ink: #dedbd3; --pencil: #8e8b83; --rule: #35332f; }

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh;
  color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.9;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.38 0 0 0 0 0.34 0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
}
main { max-width: 34em; margin: 0 auto; padding: clamp(48px, 12vh, 120px) clamp(20px, 6vw, 48px) 64px; }

h1 { font-size: 1.7rem; font-weight: 500; margin: 0 0 40px; letter-spacing: 0.02em; }
.note { margin: 0 0 40px; color: var(--pencil); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; gap: 0; padding: 18px 0; border-top: 1px solid var(--rule); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list a {
  color: var(--ink); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--pencil);
  text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 500; width: max-content;
}
.list a:hover, .list a:focus-visible { text-decoration-style: solid; outline: none; }
.title { display: block; }
.desc { display: block; color: var(--pencil); font-size: 0.95rem; }

.foot { margin: 48px 0 0; font-size: 0.85rem; color: var(--pencil); }
.foot a { color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; }
.foot a + a { margin-left: 1.5em; }