:root {
  color-scheme: dark;
  --ink: #f4ead2;
  --muted: #c7bca7;
  --paper: #171b1b;
  --line: #6f806f;
  --rust: #d1845b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgb(117 80 55 / .08) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 0, #26302d, var(--paper) 42rem);
  font: clamp(1rem, .96rem + .25vw, 1.18rem)/1.72 Georgia, "Times New Roman", serif;
}

main { width: min(74ch, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 8rem; }

.cover { display: block; width: min(24rem, 78vw); height: auto; margin: 1rem auto 3rem; box-shadow: 0 1rem 4rem #0009; }

header, nav { border-block: 1px solid var(--line); padding: 1.25rem 0; margin: 2rem 0; }

h1, h2, h3 { line-height: 1.13; text-wrap: balance; }
h1 { margin-top: 3.5rem; font-size: clamp(2rem, 7vw, 4.5rem); }
h2 { margin-top: 3rem; font-size: clamp(1.5rem, 4vw, 2.4rem); }
p { text-wrap: pretty; }
a { color: #d9c884; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--rust); outline-offset: .25rem; }
blockquote { margin: 2rem 0; padding: .5rem 1.25rem; border-left: .35rem solid var(--rust); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
code { overflow-wrap: anywhere; color: #e2c39f; }
nav ul { padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { body { color: #111; background: #fff; } main { width: 100%; } .cover { max-height: 70vh; box-shadow: none; } }