/* BERND.md v4: "Black Rock Lava" (human view), amber phosphor (agent view), and the Arcade
   (pixel night drive, styled by arcade.css, loaded on first use). v1's component rules are
   scoped to the human view so they don't leak into the arcade boards. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Basalt: cool grey-black rock, so the lava reads as heat */
  --bg: #0c0d0f;
  --surface: #141518;
  --line: #24252a;
  --text: #ebe7e2;
  --muted: #9d9893;
  --magma: rgba(255, 96, 20, 0.35);
  --grain-opacity: 0.07;
  /* Lava: hotter = more important */
  --hot: #ffb454;
  --lava: #ff7a1a;
  --deep: #e2541a;
  --crust: #8a3410;
  /* Amber phosphor */
  --amber: #ffb000;
  --amber-dim: #b8862b;
  --amber-faint: #7a5a1e;
  --term-bg: #0b0906;

  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1120px;
}

/* Cooled lava: ash and pumice when the system prefers light */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ece7e1;
    --surface: #e2dbd3;
    --line: #cdc3b8;
    --text: #1c1714;
    --muted: #5e544c;
    --hot: #b23d0a;
    --lava: #b23d0a;
    --deep: #c2410c;
    --crust: #d9b8a3;
    --magma: rgba(194, 65, 12, 0.18);
    --grain-opacity: 0.05;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--lava); }
:focus-visible { outline: 2px solid var(--lava); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--lava); color: #0f0c0a; }

/* Rock grain: SVG noise, fixed over the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body:has(#view-agent:checked)::before { opacity: 0.04; }

/* ---------- View switch ---------- */
.view-radio {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.view--agent { display: none; }
body:has(#view-agent:checked) .view--human { display: none; }
body:has(#view-agent:checked) .view--agent { display: block; }
body:has(#view-agent:checked) { background: var(--term-bg); }
/* The Arcade: a third view, hidden without JS (view.js loads it on first use). */
.view--arcade { display: none; }
body:has(#view-arcade:checked) .view--human { display: none; }
body:has(#view-arcade:checked) .view--arcade { display: block; }
body:has(#view-arcade:checked) { background: #07050c; color: #f1e9e4; color-scheme: dark; }
body:has(#view-arcade:checked)::before { display: none; }
html:not(.js) .switch__opt--arcade, html:not(.js) .footer-car { display: none; }
/* No fill mode: if the animation never runs, the content is still visible */
.view { animation: view-in 0.45s ease; }
@keyframes view-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  to { opacity: 1; filter: none; transform: none; }
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.8125rem;
}
.topbar__file { color: var(--muted); text-decoration: none; white-space: nowrap; }
.topbar__file b { color: var(--text); font-weight: 600; }
.switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px;
}
.switch__hint { color: var(--muted); padding: 0 8px 0 6px; }
@media (max-width: 440px) { .switch__hint { display: none; } } /* three views need the room on phones */
.switch__opt {
  cursor: pointer; padding: 5px 12px; border-radius: 999px;
  color: var(--muted); transition: background 0.2s, color 0.2s;
  user-select: none;
}
.switch__opt:hover { color: var(--text); }
body:has(#view-human:checked) .switch__opt[for="view-human"] { background: var(--lava); color: #0f0c0a; }
body:has(#view-agent:checked) .switch__opt[for="view-agent"] { background: var(--amber); color: #0b0906; }
.switch__opt--arcade { font-family: "Pixelify Sans", var(--mono); letter-spacing: 0.04em; }
body:has(#view-arcade:checked) .switch__opt[for="view-arcade"] { background: linear-gradient(90deg, #ff7a1a, #ff2d6f); color: #fff; }
body:has(#view-human:focus-visible) .switch__opt[for="view-human"],
body:has(#view-agent:focus-visible) .switch__opt[for="view-agent"],
body:has(#view-arcade:focus-visible) .switch__opt[for="view-arcade"] {
  outline: 2px solid var(--hot); outline-offset: 2px;
}
body:has(#view-agent:checked) .topbar {
  background: color-mix(in srgb, var(--term-bg) 85%, transparent);
  border-color: #2a2010;
}
body:has(#view-agent:checked) .topbar__file b { color: var(--amber); }
body:has(#view-arcade:checked) .topbar {
  position: fixed; left: 0; right: 0;
  background: linear-gradient(rgba(7, 5, 12, 0.85), rgba(7, 5, 12, 0));
  border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body:has(#view-arcade:checked) .topbar__file { color: #b6a8b4; }
body:has(#view-arcade:checked) .topbar__file b { color: #f1e9e4; }
body:has(#view-arcade:checked) .switch { border-color: rgba(255, 255, 255, 0.14); }

/* ---------- Human view layout ---------- */
.view--human { isolation: isolate; overflow-x: clip; } /* the ember glow is wider than a phone */
.view--human > * {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero {
  position: relative;
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1fr;
  padding-block: clamp(56px, 12vh, 140px) clamp(48px, 9vh, 110px);
  isolation: isolate;
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 1fr auto; align-items: end; }
}
.eyebrow, .view--human .meta {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
}
.eyebrow { color: var(--lava); margin-bottom: 18px; }
.hero__name {
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.92; letter-spacing: -0.055em; font-weight: 700;
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, var(--text) 38%, var(--hot) 70%, var(--lava) 86%, var(--deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.06em 0.35em var(--magma));
}
.hero__lead {
  margin-top: 28px; max-width: 30ch;
  font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -0.02em;
}
.hero__sub { margin-top: 18px; max-width: 52ch; color: var(--muted); }
.view--human .meta { margin-top: 28px; }

.view--human .portrait {
  position: relative; margin: 0;
  width: clamp(132px, 22vw, 240px); aspect-ratio: 1;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line);
}
.view--human .portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  transition: filter 0.6s ease;
}
/* Lava duotone over the greyscale photo; full colour on hover */
.view--human .portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--hot), var(--deep) 55%, #2a0d04);
  mix-blend-mode: color; opacity: 0.9;
  transition: opacity 0.6s ease;
}
.view--human .portrait:hover img { filter: none; }
.view--human .portrait:hover::after { opacity: 0; }

.ember {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -30%; width: 140%; height: 90%;
  transform: translateX(-50%);
  background:
    radial-gradient(45% 60% at 28% 78%, color-mix(in srgb, var(--deep) 48%, transparent), transparent 70%),
    radial-gradient(38% 55% at 76% 86%, color-mix(in srgb, var(--lava) 34%, transparent), transparent 70%),
    radial-gradient(60% 35% at 50% 100%, color-mix(in srgb, var(--hot) 22%, transparent), transparent 70%);
  filter: blur(40px);
  animation: smoulder 18s ease-in-out infinite alternate;
}
@keyframes smoulder {
  from { transform: translateX(-52%) scale(1); opacity: 0.75; }
  to   { transform: translateX(-48%) scale(1.08); opacity: 1; }
}
@media (prefers-color-scheme: light) { .ember { opacity: 0.45; } }

/* ---------- Sections ---------- */
.block { position: relative; padding-block: clamp(48px, 8vw, 96px); }
.block::before, .footer::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, var(--line), var(--crust) 12%, var(--lava) 22%, var(--hot) 26%, var(--crust) 38%, var(--line) 52%, var(--line) 70%, var(--crust) 82%, var(--line) 92%);
  box-shadow: 0 0 10px 1px var(--magma);
  animation: fissure 7s ease-in-out infinite alternate;
}
.block:nth-of-type(odd)::before { background-position: 0 0; transform: scaleX(-1); }
@keyframes fissure {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
.block h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.05;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.md { font-family: var(--mono); font-weight: 400; color: var(--crust); letter-spacing: 0; }
.h2-sub { color: var(--muted); font-weight: 400; }
.block__intro { max-width: 60ch; color: var(--muted); margin: -8px 0 28px; }

/* Currently */
.view--human .now { margin: 0; display: grid; gap: 0; }
.view--human .now > div {
  display: grid; grid-template-columns: 1fr; gap: 2px 24px;
  padding: 14px 0; border-bottom: 1px dashed var(--line);
}
@media (min-width: 640px) { .view--human .now > div { grid-template-columns: 9rem 1fr; } }
.view--human .now dt { font-family: var(--mono); font-size: 0.8125rem; color: var(--lava); padding-top: 0.2em; }
.view--human .now dd { margin: 0; max-width: 62ch; }

/* Known limitations */
.view--human .limits { width: 100%; border-collapse: collapse; }
.view--human .limits thead th {
  text-align: left; font: 500 0.75rem/1 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--line);
}
.view--human .limits tbody tr { border-bottom: 1px solid var(--line); transition: background 0.25s; }
.view--human .limits tbody tr:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--deep) 12%, transparent) 40%, transparent); }
.view--human .limits th[scope="row"] {
  text-align: left; vertical-align: top; width: 38%;
  padding: 20px 20px 20px 0;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em;
}
.view--human .limits td { vertical-align: top; padding: 22px 20px 20px 0; }
.view--human .limits td:last-child { color: var(--text); padding-right: 0; }
.view--human .limits td a { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; margin-left: 4px; }
.tag {
  display: inline-block; white-space: nowrap;
  font: 500 0.75rem/1 var(--mono); padding: 5px 8px; border-radius: 999px;
  border: 1px solid currentColor;
}
.tag--mine { color: var(--hot); }
.tag--ai { color: var(--amber-dim); }
.tag--both { color: var(--lava); }
@media (prefers-color-scheme: light) { .tag--ai { color: #6b4a10; } }
@media (prefers-color-scheme: light) {
  body:has(#view-human:checked) .switch__opt[for="view-human"] { color: #fff; }
}
@media (max-width: 719px) {
  .view--human .limits thead { display: none; }
  .view--human .limits tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 18px 0; }
  .view--human .limits th[scope="row"] { width: auto; padding: 0; }
  .view--human .limits td { padding: 0; }
  .view--human .limits td:last-child { grid-column: 1 / -1; color: var(--muted); }
}

/* Strengths: hotter top edge = more heat */
.view--human .strengths {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.view--human .strengths li {
  position: relative; padding: 24px 22px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease;
}
.view--human .strengths li {
  box-shadow: inset 0 -60px 60px -50px var(--magma);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.view--human .strengths li::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--deep) 20%, var(--hot) 50%, var(--deep) 80%, transparent);
}
.view--human .strengths li:hover {
  transform: translateY(-3px); border-color: var(--crust);
  box-shadow: inset 0 -90px 70px -50px var(--magma), 0 18px 40px -24px var(--magma);
}
.view--human .strengths h3 { font-size: 1.2rem; margin-bottom: 10px; }
.view--human .strengths p { color: var(--muted); font-size: 0.975rem; }

/* Changelog: the release type sets the heat */
.changelog { list-style: none; margin: 0; padding: 0; position: relative; }
.changelog::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 7.25rem; width: 1px;
  background: linear-gradient(var(--lava), var(--crust) 40%, var(--line));
}
.rel { display: grid; grid-template-columns: 7.25rem 1fr; gap: 0 28px; padding: 16px 0; }
.rel__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-family: var(--mono); font-size: 0.8125rem; padding: 0.15em 14px 0 0; /* clear of the line and its dots */
}
.rel__ver { color: var(--text); }
.rel__type { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.rel__body { position: relative; }
.rel__body::before {
  content: ""; position: absolute; left: -33px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--muted);
}
.rel h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 6px; }
.rel p { color: var(--muted); max-width: 68ch; }
.rel--major .rel__type { color: var(--hot); }
.rel--major .rel__body::before { background: var(--hot); border-color: var(--hot); box-shadow: 0 0 12px var(--lava); }
.rel--major h3 { font-size: 1.35rem; }
.rel--minor .rel__type { color: var(--lava); }
.rel--minor .rel__body::before { border-color: var(--lava); }
.rel--patch .rel__type, .rel--init .rel__type { color: var(--muted); }
.rel--init .rel__body::before { border-color: var(--crust); background: var(--crust); }
@media (max-width: 559px) {
  .changelog::before { left: 4px; }
  .rel { grid-template-columns: 1fr; padding-left: 28px; }
  .rel__meta { flex-direction: row; align-items: baseline; gap: 10px; margin-bottom: 4px; padding-right: 0; }
  .rel__body::before { left: -29px; top: -1.45em; }
}

/* Recently written */
.view--human .posts { list-style: none; margin: 0; padding: 0; }
.view--human .posts a {
  display: grid; grid-template-columns: 1fr; gap: 4px 28px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: color 0.2s, padding 0.3s;
}
@media (min-width: 640px) { .view--human .posts a { grid-template-columns: 7.25rem 1fr; } }
.view--human .posts a:hover { color: var(--hot); padding-left: 8px; }
.view--human .posts time { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); padding-top: 0.25em; }
.view--human .posts span { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.more { margin-top: 20px; font-family: var(--mono); font-size: 0.8125rem; }

/* Footer */
.footer { position: relative; padding-block: 56px 96px; }
.view--human { position: relative; }
.view--human::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 420px; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 120%, color-mix(in srgb, var(--deep) 45%, transparent), transparent 70%),
    radial-gradient(30% 40% at 50% 110%, color-mix(in srgb, var(--hot) 30%, transparent), transparent 70%);
}
.view--human .contact { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.view--human .contact a { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.view--human .colophon { max-width: 64ch; color: var(--muted); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.7; }

/* ---------- Agent view: amber phosphor ---------- */
.view--agent { padding: clamp(16px, 4vw, 48px) var(--gutter) 64px; }
body:has(#view-agent:checked) {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(255, 150, 30, 0.13), transparent 70%),
    var(--term-bg);
  background-attachment: fixed;
}
.term {
  position: relative; max-width: 920px; margin: 0 auto;
  border: 1px solid #3a2a0c; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(255, 160, 40, 0.16), rgba(255, 120, 20, 0.05) 45%, transparent 75%),
    var(--term-bg);
  box-shadow: 0 0 0 1px #000, 0 30px 80px -30px color-mix(in srgb, var(--amber) 25%, transparent);
}
/* Faint scanlines */
.term::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.term__bar {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #3a2a0c;
  font: 500 0.75rem/1 var(--mono); color: var(--amber-dim); letter-spacing: 0.04em;
}
.term__body {
  margin: 0; padding: clamp(18px, 4vw, 36px);
  font: 400 clamp(0.8rem, 1.6vw, 0.9375rem)/1.7 var(--mono);
  color: var(--amber);
  text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 45%, transparent);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.term__body .h { font-weight: 700; color: #ffc640; }
.term__body .c { color: var(--amber-dim); }
.term__body a { color: inherit; text-decoration-color: var(--amber-faint); }
.term__body a:hover { color: #ffd27a; text-decoration-color: currentColor; }
.term__body ::selection { background: var(--amber); color: var(--term-bg); text-shadow: none; }
.cursor {
  display: inline-block; width: 0.6em; height: 1.1em; margin-left: 2px;
  vertical-align: text-bottom; background: var(--amber);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- The footer car: the way into the Arcade ---------- */
.footer-car {
  position: relative; display: block; margin-top: 28px; padding: 6px; border: 0; background: none;
  cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent;
}
.footer-car svg { display: block; width: 72px; height: 26px; image-rendering: pixelated; }
.footer-car .car__tail { animation: tail-glow 2.4s ease-in-out infinite alternate; }
@keyframes tail-glow { from { opacity: 0.4; } to { opacity: 1; } }
.footer-car .car__head { opacity: 0.45; }
.footer-car:hover .car__head, .footer-car:focus-visible .car__head { animation: flash 0.5s steps(1) 2; }
@keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }
.footer-car__puff {
  position: absolute; left: 0; bottom: 8px; width: 6px; height: 6px; opacity: 0;
  background: var(--muted); box-shadow: -8px -2px 0 -1px var(--muted), -15px -5px 0 -2px var(--muted);
}
/* Leaving: a rev (shake and smoke), then off to the right, faster and faster. */
.footer-car.is-leaving svg { animation: rev 0.3s steps(2) 2, drive-off 0.9s cubic-bezier(0.6, 0, 1, 0.4) 0.6s forwards; }
.footer-car.is-leaving .footer-car__puff { animation: puff 0.6s ease-out 2; }
@keyframes rev { 50% { transform: translate(1px, -1px); } }
@keyframes drive-off { to { transform: translateX(110vw); } }
@keyframes puff { from { opacity: 0.8; transform: none; } to { opacity: 0; transform: translate(-14px, -6px) scale(1.6); } }

/* ---------- CRT: the screen switches off to a line and a dot, and back on ---------- */
.crt { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; }
.crt__screen { width: 100vw; height: 100vh; box-shadow: 0 0 0 100vmax #000; }
.crt--off .crt__screen { animation: crt-off 0.5s ease-in forwards; }
.crt--on .crt__screen { animation: crt-on 0.55s ease-out forwards; }
@keyframes crt-off {
  0% { width: 100vw; height: 100vh; background: transparent; }
  55% { width: 100vw; height: 2px; background: #fff; }
  100% { width: 0; height: 2px; background: #fff; }
}
@keyframes crt-on {
  0% { width: 0; height: 2px; background: #fff; }
  40% { width: 100vw; height: 2px; background: #fff; }
  100% { width: 100vw; height: 100vh; background: transparent; }
}

/* ---------- Scroll reveal (progressive) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print: always light, human view only, one page ---------- */
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  :root {
    --bg: #fff; --surface: #fff; --line: #ddd; --text: #111; --muted: #444;
    --hot: #9a3412; --lava: #9a3412; --deep: #9a3412; --crust: #c9a089;
  }
  html { font-size: 8.5pt; }
  body { background: #fff; line-height: 1.35; }
  body::before, .block::before, .footer::before, .view--human::after { display: none !important; }
  .hero__name { background: none; color: #111; filter: none; }
  .view--human .strengths li { box-shadow: none; }
  .topbar, .view--agent, .view--arcade, .footer-car, .ember, .block__intro, .md, .more, #h-writing, #h-writing + .posts { display: none !important; }
  .view--human { display: block !important; animation: none; }
  .view--human > * { max-width: none; padding-inline: 0; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .block:has(#h-writing) { display: none; }
  .hero { grid-template-columns: 1fr auto; padding-block: 0 10px; gap: 16px; }
  .hero__name { font-size: 24pt; }
  .hero__lead { font-size: 11pt; margin-top: 4px; max-width: none; }
  .hero__sub { display: none; }
  .view--human .meta { margin-top: 6px; }
  .view--human .portrait { width: 26mm; border: 0; }
  .view--human .portrait img { filter: grayscale(1); }
  .view--human .portrait::after { display: none; }
  .block { padding-block: 3px; }
  .block h2 { break-after: avoid; }
  .block h2 { font-size: 12pt; margin-bottom: 6px; }
  .view--human .now > div { grid-template-columns: 6rem 1fr; padding: 1px 0; border: 0; }
  .view--human .now dd { max-width: none; }
  .view--human .limits thead { display: none; }
  .view--human .limits th[scope="row"] { font-size: 9pt; padding: 2px 10px 2px 0; width: 34%; }
  .view--human .limits td { padding: 2px 10px 2px 0; font-size: 8.5pt; }
  .view--human .limits td a { display: none; }
  .tag { padding: 1px 5px; }
  .view--human .strengths { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .view--human .strengths li { padding: 6px 8px; border-color: #ddd; }
  .view--human .strengths li::before { height: 2px; }
  .view--human .strengths h3 { font-size: 9.5pt; margin-bottom: 2px; }
  .view--human .strengths p { display: none; }
  .view--human .strengths h3 { margin: 0; }
  .changelog::before, .rel__body::before { display: none; }
  .rel { grid-template-columns: 5rem 1fr; gap: 0 10px; padding: 2px 0; break-inside: avoid; }
  .rel__meta { flex-direction: row; gap: 6px; align-items: baseline; justify-content: flex-end; padding-right: 0; }
  .rel__type { display: none; }
  .rel h3, .rel--major h3 { font-size: 9.5pt; margin-bottom: 0; }
  .rel p { font-size: 8pt; max-width: none; }
  .rel--patch p, .rel--minor p { display: none; }
  .footer { padding-block: 8px 0; }
  .view--human .contact { margin-bottom: 4px; gap: 4px 16px; }
  .view--human .contact a { font-size: 9pt; color: #111; font-weight: 500; }
  .view--human .contact a[href^="https://"]::after { content: ": " attr(href); font-weight: 400; color: #444; }
  .view--human .colophon { display: none; }
  a { color: inherit; text-decoration: none; }
}