/* Night reading: Libre Caslon (Text for reading, Display for the opening). Always dark: that is the direction. */
@font-face { font-family: "Libre Caslon Text"; src: url(/fonts/caslon-text-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/fonts/caslon-text-italic-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/fonts/caslon-text-normal-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Display"; src: url(/fonts/caslon-display-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --color-bg: oklch(0.21 0.035 262);
  --color-text: oklch(0.93 0.012 85);
  --color-accent: oklch(0.85 0.10 82);    /* link marigold, AA on navy */
  --color-mark: oklch(0.80 0.14 78);      /* drop cap, large type only */
  --color-muted: oklch(0.74 0.02 262);
  --color-border: oklch(0.36 0.03 262);
}
body { font-family: "Libre Caslon Text", Georgia, serif; }
.top { max-width: 72rem; 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); }
.top .name { color: var(--color-text); text-decoration: none; font-style: italic; }
.top nav { display: flex; flex-wrap: wrap; gap: var(--grt-space-2xs) var(--grt-space-sm); font-size: calc(var(--grt-scale-1) * 0.85); }
.top nav a { color: var(--color-muted); text-decoration: none; }
.top nav a:hover { color: var(--color-accent); }
.opening { max-width: 72rem; margin: 0 auto; padding: var(--grt-space-xl) var(--grt-space-sm) var(--grt-space-lg); }
.opening h1 { margin: 0 0 var(--grt-space-sm); font: 400 var(--grt-step-1)/var(--grt-step-lh-1) "Libre Caslon Text", serif; font-style: italic; color: var(--color-muted); }
.statement { margin: 0; font-family: "Libre Caslon Display", serif; font-size: var(--grt-step-5); line-height: var(--grt-step-lh-4);  /* display: one step tighter */ max-width: 14ch; letter-spacing: -0.01em; }
.col { max-width: var(--grt-content-width); margin: 0 auto; padding: 0 var(--grt-space-sm); }
.first::first-letter { font-family: "Libre Caslon Display", serif; float: left; font-size: calc(var(--grt-step-lh-0) * 3.1); line-height: 0.82; margin: 0.06em var(--grt-space-2xs) 0 0; color: var(--color-mark); }
h2 { font: 400 var(--grt-step-3)/var(--grt-step-lh-3) "Libre Caslon Display", serif; margin-top: var(--grt-space-xl); }
.moments { list-style: none; padding: 0; margin: 0; }
.moments li { padding: var(--grt-space-xs) 0; border-bottom: 1px solid var(--color-border); }
.when { color: var(--color-muted); font-style: italic; white-space: nowrap; }
.theme h3 { font-size: var(--grt-step-1); line-height: var(--grt-step-lh-1); font-weight: 400; font-style: italic; margin: var(--grt-space-md) 0 var(--grt-space-2xs); }
.theme p { margin: 0; }
.foot { margin-top: var(--grt-space-xl); padding-block: var(--grt-space-md) var(--grt-space-lg); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: calc(var(--grt-scale-1) * 0.85); }