@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2");
}

:root {
  --paper: #f4ecd8;
  --ink: #1a1a1a;
  --col: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  overflow-x: hidden;
}
/* Only html paints the paper background — keeping body transparent lets
   the .paper-bg SVG (z-index:-1) show through across the entire viewport
   instead of being covered by body's own background. */
html { background: var(--paper); }

/* Background paper texture (dust + fibers). Sits at document origin and
   scrolls with the page so the texture reads as part of the paper, not a
   dirty overlay. Inherits ink color via currentColor so palette changes
   recolor automatically. Width/height are set on the SVG element itself
   (in JS) to match document size at generation time. */
.paper-bg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  color: var(--ink);
}

body {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.55;
  padding: 0 0 64px;
}

main { max-width: var(--col); margin: 0 auto; padding: 0 16px; }

pre {
  font: inherit;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

button {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
}
button:hover { background: var(--ink); color: var(--paper); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button:disabled { opacity: 0.35; cursor: default; }
button:disabled:hover { background: transparent; color: inherit; }

/* ─── Banner (marquee + shimmer) ────────────────────────────────────────── */
#banner {
  padding: 18px 0;
  margin-bottom: 24px;
}
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  /* animation is set from JS so we can compute steps from the banner width */
}
.banner-art {
  font-size: 11px;
  line-height: 1.0;
  white-space: pre;
  margin: 0;
  user-select: none;
}
.banner-art span { display: inline; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) { .banner-art { font-size: 9px; } }
@media (max-width: 480px) { .banner-art { font-size: 7px; } }
/* Marquee animation is forced on by design — see Banner module. */

/* ─── Typing reveal ──────────────────────────────────────────────────────── */
.tt-char { visibility: hidden; }
.tt-char.tt-on { visibility: visible; }

/* ─── Identity ───────────────────────────────────────────────────────────── */
.name {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 24px 0 12px;
}
.identity-statement {
  margin: 0 0 32px;
  line-height: 1.6;
}

/* ─── Bio (portrait + variable bio) ──────────────────────────────────────── */
.bio-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 32px 0;
}
.bio-text { flex: 1 1 0; min-width: 0; }
.bio-text p { margin: 0 0 14px; line-height: 1.65; }
.bio-controls {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.bio-length { opacity: 0.7; }
.portrait-wrap { flex: 0 0 auto; }
.portrait {
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.portrait-controls {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 10px;
  align-items: center;
  justify-content: start;
  font-size: 12px;
}
@media (max-width: 600px) {
  .bio-row { flex-direction: column; gap: 18px; }
}

/* ─── Stats grid ─────────────────────────────────────────────────────────── */
.stats-block {
  margin: 24px 0 0;
  white-space: pre-wrap;
}
.stats-block strong { font-weight: 700; }
.stats-block a { color: inherit; text-decoration: underline; }

/* ─── Chip rail ──────────────────────────────────────────────────────────── */
#chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 32px 0 24px;
  padding: 10px 0;
  border-top: 1px dashed var(--ink);
  border-bottom: 1px dashed var(--ink);
}
.chip {
  padding: 2px 4px;
  white-space: nowrap;
  font: inherit;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip.docref {
  display: inline-block;
  vertical-align: baseline;
}
.docref-static {
  border-bottom: 1px dotted currentColor;
  opacity: 0.85;
}

/* ─── Doc sections (rendered markdown) ───────────────────────────────────── */
.doc {
  margin: 28px 0;
  padding-top: 18px;
  border-top: 1px dashed var(--ink);
}
.doc:first-of-type { border-top: 0; padding-top: 0; }

.doc-body h1, .doc-body h2, .doc-body h3 {
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 28px 0 10px;
}
.doc-body h1 { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.doc-body h2 { border-bottom: 1px dashed var(--ink); padding-bottom: 4px; }
.doc-body p { margin: 12px 0; line-height: 1.65; }
.doc-body ul { list-style-type: "- "; padding-left: 1.5em; margin: 12px 0; }
.doc-body ol { padding-left: 2em; margin: 12px 0; }
.doc-body li { margin: 4px 0; }
.doc-body code {
  font: inherit;
  border-bottom: 1px dotted var(--ink);
  padding: 0 1px;
}
.doc-body a { color: inherit; text-decoration: underline; }
.doc-body strong { font-weight: 700; }
.doc-body em { font-style: italic; }
.doc-body hr {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 24px 0;
}
.md-code {
  border: 1px solid var(--ink);
  padding: 8px 12px;
  margin: 12px 0;
  white-space: pre-wrap;
}
.md-table {
  margin: 12px 0;
  white-space: pre;
  overflow-x: auto;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
  max-width: var(--col);
  margin: 48px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.palette-name {
  opacity: 0.65;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.footer-credits {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.footer-credits a { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
  body { font-size: 13px; }
}