/* Living Atlas for the web drafts: midnight ink, starlight text, brass rules (ADR 0020). */
:root {
  --midnight: #070b1e; --blue-hour: #121a3a; --starlight: #f3efe4; --haze: #b9bfd6;
  --brass: #d8b26a; --rule: rgba(216, 178, 106, 0.45);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--midnight); color: var(--starlight);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, #fff5 50%, transparent 51%),
    linear-gradient(var(--midnight), var(--blue-hour));
  background-attachment: fixed;
}
main { max-width: 680px; margin: 0 auto; padding: 48px 16px 80px; }
h1, h2, .display { font-family: "Old Standard TT", "Iowan Old Style", Georgia, serif; font-weight: 400; }
h1 { font-size: 40px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 24px; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
p, li { color: var(--haze); }
strong { color: var(--starlight); font-weight: 600; }
a { color: var(--brass); }
.eyebrow { font-family: "Old Standard TT", Georgia, serif; font-style: italic; color: var(--brass); }
.todo { background: #5a1d1d; color: #ffd9d9; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.note { border: 1px dashed var(--rule); padding: 12px 16px; border-radius: 12px; }
nav { display: flex; gap: 20px; margin-bottom: 32px; font-size: 15px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shots img { width: 100%; border-radius: 18px; border: 1px solid var(--rule); }
details { border-top: 1px solid var(--rule); padding: 12px 0; }
summary { cursor: pointer; color: var(--starlight); font-weight: 600; }