:root {
  color-scheme: light;
  --paper: #F5E6D1;
  --ink: #4E0B06;
  --ink-soft: #7A3A2E;
  --frame: #D8CFB0;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --display: "Marcellus", Georgia, serif;
  --gutter: max(20px, 6vw);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006 .02' numOctaves='4' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html { background-color: var(--paper); }

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--paper);
  background-image: var(--grain), var(--mottle);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; font-weight: 400; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 3px; }

/* Typewriter-style indents: each line carries its own offset in characters */
.i { padding-left: calc(var(--i, 0) * 1ch * var(--k, 1)); }
@media (max-width: 640px) { :root { --k: .5; } }

.soft { color: var(--ink-soft); }

/* Initials rotated to read bottom-to-top, like the cover reference */
.mark { display: flex; align-items: stretch; gap: .6em; }
.mark .initials,
.mark .aside { writing-mode: vertical-rl; transform: rotate(180deg); }
.mark .initials { font-family: var(--display); line-height: .82; white-space: nowrap; }
.mark .aside { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

.caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }