/* Margin notes: Literata, one column, years hung in the left margin (the one motif). */
@font-face { font-family: "Literata"; src: url(/fonts/literata-normal-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/fonts/literata-italic-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
:root {
  --color-bg: oklch(0.985 0.002 250);
  --color-text: oklch(0.24 0.015 260);
  --color-accent: oklch(0.47 0.13 258);
  --color-muted: oklch(0.50 0.012 260);
  --color-border: oklch(0.88 0.006 260);
  --margin: 7rem;
}
@media (prefers-color-scheme: dark) { :root {
  --color-bg: oklch(0.19 0.012 260); --color-text: oklch(0.92 0.006 260); --color-accent: oklch(0.78 0.09 258);
  --color-muted: oklch(0.68 0.01 260); --color-border: oklch(0.32 0.01 260); } }
body { font-family: "Literata", Georgia, serif; font-optical-sizing: auto; }
.masthead { max-width: calc(var(--grt-content-width) + 2 * var(--margin)); margin: 0 auto; padding: var(--grt-space-md) var(--grt-space-sm); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--grt-space-xs) var(--grt-space-md); }
.masthead .name { color: var(--color-text); text-decoration: none; font-weight: 600; }
.masthead nav { display: flex; flex-wrap: wrap; gap: var(--grt-space-xs) var(--grt-space-sm); font-size: calc(var(--grt-scale-1) * 0.85); }
.masthead nav a { color: var(--color-muted); text-decoration: none; }
.masthead nav a:hover { color: var(--color-accent); }
.col { max-width: var(--grt-content-width); margin: 0 auto; padding: 0 var(--grt-space-sm); }
h1 { font-weight: 300; letter-spacing: -0.01em; margin-top: var(--grt-space-xl); }
h2 { font-size: var(--grt-step-2); line-height: var(--grt-step-lh-2); font-weight: 400; font-style: italic; margin-top: var(--grt-space-xl); }
.lede { font-size: var(--grt-step-1); line-height: var(--grt-step-lh-1); }
.when { font-size: calc(var(--grt-scale-1) * 0.85); color: var(--color-muted); font-variant-numeric: oldstyle-nums; display: block; }
.timeline, .recent { list-style: none; padding: 0; margin: 0; }
.timeline li, .recent li { padding: var(--grt-space-xs) 0; border-top: 1px solid var(--color-border); }
.timeline p, .recent p { margin: 0; }
@media (min-width: 62rem) {
  .timeline li, .recent li { position: relative; }
  .when { position: absolute; right: calc(100% + var(--grt-space-md)); top: var(--grt-space-xs); width: var(--margin); text-align: right; line-height: var(--grt-step-lh-0); }
}
.key { font-size: calc(var(--grt-scale-1) * 0.85); color: var(--color-muted); margin-top: var(--grt-space-sm); }
.themes { margin: 0; display: grid; gap: var(--grt-space-md); }
.themes dt { font-weight: 600; }
.themes dd { margin: 0; color: var(--color-muted); }
.reads { display: block; color: var(--color-text); }
.reads a { margin-right: var(--grt-space-sm); white-space: normal; }
.reads a::after { content: " ·"; color: var(--color-border); text-decoration: none; display: inline-block; margin-left: var(--grt-space-2xs); }
.reads a:last-child::after { content: none; }
.signup form { display: flex; flex-wrap: wrap; gap: var(--grt-space-xs); }
.signup input { flex: 1 1 14rem; font: inherit; padding: var(--grt-space-2xs) var(--grt-space-xs); border: 1px solid var(--color-border); background: transparent; color: inherit; }
.signup button { font: inherit; padding: var(--grt-space-2xs) var(--grt-space-sm); background: var(--color-text); color: var(--color-bg); border: 0; cursor: pointer; }
.foot { margin-top: var(--grt-space-xl); padding-block: var(--grt-space-md); border-top: 1px solid var(--color-border); font-size: calc(var(--grt-scale-1) * 0.85); color: var(--color-muted); }