/* da5id: a plain, text-first site. One column, a fog-grey band for the name,
   section headings ruled underneath, deep bay-teal links ("Fog" palette). */
:root {
  --bg: #f7f8f8; --fg: #1c2226; --muted: #5f6a70; --accent: #1d5e6a; --rule: #cdd4d7; --band: #e4eaec;
  --board: #74302b; --board-ink: #2b1311;
  --f-text: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --f-swash: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121618; --fg: #dfe5e8; --muted: #93a0a6; --accent: #7cc0cc; --rule: #2c3439; --band: #1b2226; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #121618; --fg: #dfe5e8; --muted: #93a0a6; --accent: #7cc0cc; --rule: #2c3439; --band: #1b2226; color-scheme: dark; }

body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.22rem/1.55 var(--f-text); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }

.inner {
  max-width: 38rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { background: var(--band); border-bottom: 1px solid var(--rule); }
.band .inner { padding-block: 22px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.band .sub { color: var(--muted); font-size: 1.05rem; text-decoration: none; }
.band .sub:hover { color: var(--accent); text-decoration: underline; }
.site { font: 400 2.3rem/1 var(--f-text); color: var(--fg); text-decoration: none; letter-spacing: .01em; }
main { padding-block: 26px 72px; }

h1 { font: 400 2rem/1.1 var(--f-text); margin: 0 0 1.2rem; text-wrap: balance; }
h2 {
  font: 400 1.4rem/1.2 var(--f-text); margin: 2.2rem 0 .9rem; padding-bottom: .35rem;
  border-bottom: 1px dotted var(--rule); text-wrap: balance;
}
.lede { margin: 0; }
.prose p { margin: 0 0 1em; }
.crumb, .note { color: var(--muted); }
.crumb { margin: 0 0 1.4rem; font-size: 1.05rem; }
.note { margin: .2rem 0 0; font-size: 1.08rem; }
.note a { white-space: nowrap; }

/* musings */
.post { margin: 2.4rem 0 0; }
.post h2 { border: 0; padding: 0; margin: 0; }
.post h2 a { color: var(--fg); text-decoration: none; }
.post h2 a:hover { color: var(--accent); text-decoration: underline; }
.post .date { margin: .3rem 0 .9rem; color: var(--muted); font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; }
.post + .post { border-top: 1px dotted var(--rule); padding-top: 2.4rem; }
.follow { margin-top: 1rem; }
.signup { margin: 1.4rem 0 0; color: var(--muted); font-size: 1.05rem; }
.signup div { display: flex; gap: 8px; margin-top: .5rem; max-width: 26rem; }
.signup input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--fg); }
.signup button { font: inherit; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: var(--bg); cursor: pointer; }
.post + .follow { padding-top: 1.6rem; border-top: 1px dotted var(--rule); }
ul.plain, ul.updates { margin: 0; padding-left: 1.2rem; }
ul.updates { font-variant-numeric: tabular-nums; }

/* covers */
.thumb { display: block; flex: none; width: 96px; }
.cover-img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 16px -8px rgba(0,0,0,.35); }
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature p { margin: 0; min-width: 0; }
.works { list-style: none; margin: .9rem 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.works li { display: flex; gap: 20px; align-items: flex-start; }
.works li > div { min-width: 0; }
.works .title { margin: 0; font-size: 1.3rem; }
.works .year { font-variant-numeric: lining-nums; }
.big { margin: 1.6rem 0 0; max-width: 360px; }
.book { display: flex; gap: 32px; align-items: flex-start; }
.book .big { flex: 0 0 300px; }
.blurb { margin-top: 1.6rem; }
.blurb p:first-child { margin-top: 0; }
@media (max-width: 640px) { .book { display: block; } .book .big { max-width: 360px; } }

/* the ANON cover, drawn in CSS at thumbnail size */
.mini { position: relative; width: 100%; aspect-ratio: .76; container-type: inline-size; overflow: hidden;
  background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.08)), var(--board);
  color: var(--board-ink); text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 16px -8px rgba(0,0,0,.35); }
.mini > div { position: absolute; left: 0; right: 0; }
.mini .cv-anon { top: 20%; font: 400 15cqw/1 var(--f-text); }
.mini .cv-amp { top: 31%; font: italic 500 27cqw/1 var(--f-swash); }
.mini .cv-other { top: 54%; font: italic 400 6.4cqw/1.05 var(--f-text); }
.mini .cv-sq { top: 70%; left: 50%; right: auto; width: 2.6cqw; height: 2.6cqw; margin-left: -1.3cqw; background: var(--board-ink); }
.mini .cv-name { top: 81%; font: 500 5.2cqw/1 var(--f-text); letter-spacing: .32em; padding-left: .32em; }

@media (max-width: 420px) { .thumb { width: 78px; } .works li, .feature { gap: 14px; } }