* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-paper);
  background: linear-gradient(180deg, var(--color-charcoal) 0%, #0f0e0c 100%);
  line-height: 1.7;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/img/ui/d20-tile.png');
  background-repeat: repeat;
  background-size: 110px 138px;
  opacity: 0.01;
  pointer-events: none;
  z-index: 0;
  transition: opacity 220ms ease;
}
body.ghost-reveal::before {
  opacity: 0.05;
}
.site-shell { position: relative; z-index: 1; }
::selection {
  color: var(--color-charcoal);
  background-color: rgba(236, 228, 211, 0.95);
  text-shadow: none;
}
a { color: var(--color-accent-cyan); text-decoration-thickness: 1px; text-underline-offset: 0.15em; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='5' y='5' width='10' height='10' fill='none' stroke='%23ece4d3' stroke-width='1'/%3E%3C/svg%3E") 10 10, pointer; }
a:hover { color: #b4effa; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: 0.01em; margin: 0 0 var(--space-4); }
p, ul, ol, blockquote { margin: 0 0 var(--space-4); }
img { max-width: 100%; display: block; }
code { font-family: var(--font-mono); }
strong { color: #fff4df; }
main p { font-size: 1.05rem; }
main li { margin-bottom: 0.45rem; }
body, button, [role='button'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%237fd6e8' stroke-width='1'/%3E%3Cpath d='M12 1v7M12 16v7M1 12h7M16 12h7' stroke='%237fd6e8' stroke-width='1'/%3E%3C/svg%3E") 12 12, crosshair; }