:root {
  --bg: #e6dccb;
  --fg: #2b221c;
  --mute: #8b7a66;
  --ochre: #ad4d27;
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.09 1.7 0 0 0 -0.98'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --light: radial-gradient(ellipse 90% 80% at 32% 46%, transparent 35%, rgb(60 40 25 / 0.16) 100%);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15110e;
    --fg: #e4d7c4;
    --mute: #7d6d5c;
    --ochre: #d06b3d;
    --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.86 0 0 0 0 0.78 1.15 0 0 0 -0.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --light: radial-gradient(ellipse 90% 80% at 32% 46%, transparent 30%, rgb(0 0 0 / 0.5) 100%);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.75 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ochre); color: var(--bg); }

/* the wall */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--speck), var(--light);
  background-size: 220px 220px, 100% 100%;
  opacity: 0.7;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  animation: in 2s ease-out both;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: clamp(24px, 8vw, 96px);
  display: flex;
  flex-direction: column;
}

article {
  margin: auto 0;
  max-width: 72ch;
  text-wrap: pretty;
  animation: in 1.2s ease-out both;
}

h1 { font: inherit; font-weight: 600; margin: 0; }

p { margin: 0; }

.mute { color: var(--mute); }

ol {
  margin: 1.75em 0;
  padding: 0;
  list-style: none;
  counter-reset: sense;
}

ol:last-child { margin-bottom: 0; }

li {
  counter-increment: sense;
  display: grid;
  grid-template-columns: 2ch 1fr;
  column-gap: 1ch;
}

li::before { content: counter(sense) "."; color: var(--ochre); }

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

footer { font-size: 12px; }

@keyframes in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  article, #scene { animation: none; }
}