/* da5id: a plain, text-first site. One column, a grey band for the name,
   section headings ruled underneath, oxblood links borrowed from the ANON cover. */
:root {
  --bg: #fbfaf8; --fg: #1f1b19; --muted: #6f6762; --accent: #7b2d2a; --rule: #cfc7c0; --band: #efece7;
  --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: #151413; --fg: #e8e2da; --muted: #a39a92; --accent: #e09a8f; --rule: #3a3532; --band: #1e1c1b; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #151413; --fg: #e8e2da; --muted: #a39a92; --accent: #e09a8f; --rule: #3a3532; --band: #1e1c1b; 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; }
.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; }
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; }

/* 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; } }