:root {
  --cream: #f2e8d2;
  --ink:   #2b2418;
  --muted: #7a6a4f;
  --faint: #b6a586;
  --accent:#a4501f;
  --code:  #e8dcc0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 15px;
  line-height: 1.75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  animation: fade 0.6s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

main { max-width: 72ch; margin: 0 auto; padding: 5vh 24px 16vh; }

/* nav */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  font-size: 13px;
  padding-bottom: 1.4rem;
  margin-bottom: 5vh;
  border-bottom: 1px dashed var(--faint);
}
nav a { color: var(--muted); text-decoration: none; border: 0; }
nav a:hover { color: var(--accent); }
nav a.here { color: var(--ink); }
nav a.here::before { content: "> "; color: var(--accent); }

/* ascii art */
pre {
  width: fit-content; margin: 0 auto;
  font-size: clamp(11px, 2.3vw, 14px);
  line-height: 1.3; overflow-x: auto; max-width: 100%;
}
pre.art   { color: var(--ink); }
pre.dim   { color: var(--muted); }
pre .nose { color: var(--accent); }
.bob { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* headings */
h1 { font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; margin: 0 0 0.3rem; }
h1.hero { text-align: center; letter-spacing: 0.35em; padding-left: 0.35em; margin-top: 1.2rem; }
.tagline { color: var(--muted); font-size: 13px; margin: 0 0 1rem; }
h1.hero + .tagline { text-align: center; }
.kicker { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; text-transform: lowercase; margin: 0 0 0.4rem; }

h2 { font-weight: 600; font-size: 1.05rem; margin: 3.5rem 0 1rem; }
h2::before { content: "# "; color: var(--accent); }
h3 { font-weight: 600; font-size: 0.95rem; margin: 2.2rem 0 0.6rem; color: var(--ink); }

/* text */
p, li { margin: 0 0 1.1rem; }
em { font-style: normal; color: var(--accent); }
b  { font-weight: 600; }
a  { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--faint); }
a:hover { border-bottom-color: var(--accent); }
code { background: var(--code); padding: 0 0.35ch; }
ul { padding-left: 1.4rem; }
li::marker { color: var(--faint); }

blockquote {
  margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--accent); color: var(--muted);
}

table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 13px; }
th, td { text-align: left; padding: 0.4rem 0.8rem 0.4rem 0; border-bottom: 1px dashed var(--faint); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.rule { border: 0; border-top: 1px dashed var(--faint); margin: 4rem 0; }

/* wiki */
.entry { margin: 0 0 2.2rem; scroll-margin-top: 2rem; }
.entry h3 { margin: 0 0 0.3rem; }
.entry h3 a { border: 0; color: var(--faint); font-weight: 400; }
.entry h3 a:hover { color: var(--accent); }
.toc { color: var(--muted); font-size: 13px; line-height: 2; }
.toc a { border: 0; }

footer { text-align: center; color: var(--faint); font-size: 12px; margin-top: 8vh; line-height: 1.9; }