/* Jev Wiki — FakeNerd.ai Brand Standards Vol. III (human-facing HTML only; agents read /raw and llms.txt) */
:root {
  --fn-ink:           #17150f;
  --fn-ink-2:         #3a372e;
  --fn-muted:         #6f6d68;
  --fn-stone:         #8a8275;
  --fn-paper:         #ffffff;
  --fn-card:          #f3f3f3;
  --fn-inset:         #e9e9e9;
  --fn-accent:        #1a7a6b;
  --fn-accent-bright: #2ec4ac;
  --fn-tagline:       #6B1D1F;
  --fn-rule:          rgba(23, 21, 15, .30);
  --fn-hair:          rgba(23, 21, 15, .12);
  --fn-mono:          "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fn-sans:          "IBM Plex Sans", system-ui, sans-serif;
  --fn-radius:        2px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--fn-paper); color: var(--fn-ink); font: 400 16px/1.6 var(--fn-sans); -webkit-font-smoothing: antialiased; }
em, i, cite, address { font-style: normal; font-weight: 600; }
a { color: var(--fn-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--fn-ink); }
:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 2px; }

.label { font: 600 11px/1.4 var(--fn-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fn-muted); }

.skip { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 8px 12px; background: var(--fn-ink); color: var(--fn-paper); text-decoration: none; font: 600 14px/1 var(--fn-mono); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Header: big wordmark top left on a hard white plate; closes with a rule */
.masthead { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 12px; background: #ffffff; border-bottom: 1px solid var(--fn-rule); }
.mast-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.mast { display: inline-flex; align-items: center; text-decoration: none; background: #ffffff; }
.mast-wordmark { --w: min(358px, 72vw); display: block; width: var(--w); height: auto; margin-left: calc(var(--w) * -0.073); margin-bottom: calc(var(--w) * -0.06); } /* PNG carries transparent padding; pull it flush with the column */
.mast-site { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding-left: 20px; border-left: 2px solid var(--fn-accent); text-decoration: none; color: var(--fn-ink); align-self: center; }
.mast-site-name { font: 600 22px/1.15 var(--fn-mono); letter-spacing: -0.03em; }
.tagline { max-width: 660px; margin: 8px 0 0; font: 700 18px/1.5 var(--fn-sans); color: var(--fn-tagline); }
@media (min-width: 640px) { .tagline { font-size: 19px; } }
.mast-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.mast-links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1 var(--fn-mono); color: var(--fn-ink-2); text-decoration: none; }
.mast-links a:hover { color: var(--fn-accent); text-decoration: underline; }

/* Shell */
.wrap { width: min(1440px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 52px; }
.sidebar { padding: 20px 20px 52px 0; border-right: 1px solid var(--fn-hair); font-size: 14px; line-height: 1.55; position: sticky; top: 0; max-height: 100vh; overflow: auto; align-self: start; }
.sidebar__head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.sidebar__head a { font: 600 14px/1.3 var(--fn-mono); color: var(--fn-ink); text-decoration: none; }
.sidebar .count { font: 500 10px/1 var(--fn-mono); letter-spacing: 0.12em; color: var(--fn-muted); }
.sidebar details { margin: 0; border-top: 1px solid var(--fn-hair); }
.sidebar summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 11px/1.4 var(--fn-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fn-ink-2); }
.sidebar summary .count { margin-left: auto; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::before { content: ">"; color: var(--fn-accent); font: 600 12px/1 var(--fn-mono); width: 10px; }
.sidebar details[open] summary::before { content: "_"; }
.sidebar summary:hover { color: var(--fn-accent); }
.sidebar ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sidebar li a { display: block; padding: 4px 8px 4px 12px; border-left: 2px solid transparent; text-decoration: none; color: var(--fn-ink); }
.sidebar li a:hover { color: var(--fn-accent); text-decoration: underline; }
.sidebar li a.is-active { border-left-color: var(--fn-accent); font-weight: 600; background: var(--fn-card); }

main.content { padding: 32px 0 84px; min-width: 0; max-width: 1040px; }

/* Section header: [mark] 01 SECTION ───── */
.sechead { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.sechead-mark { display: block; width: 28px; height: 28px; }
.sechead-num { font: 600 11px/1 var(--fn-mono); letter-spacing: 0.16em; color: var(--fn-accent); }
.sechead-label { font: 600 11px/1 var(--fn-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fn-muted); white-space: nowrap; }
.sechead-rule { flex: 1; height: 1px; background: var(--fn-rule); }

/* Page meta: chips are labels, not links; no pills */
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
.meta span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; background: var(--fn-card); border: 1px solid var(--fn-hair); border-radius: var(--fn-radius); font: 500 10px/1.6 var(--fn-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fn-muted); }
.meta code { font: 500 10px/1.6 var(--fn-mono); letter-spacing: 0.12em; color: var(--fn-ink-2); background: none; padding: 0; white-space: nowrap; }

/* Type scale */
.content h1 { margin: 0 0 20px; font: 600 32px/1.08 var(--fn-mono); letter-spacing: -0.04em; max-width: 28ch; }
.content h2 { margin: 52px 0 12px; padding-top: 20px; border-top: 1px solid var(--fn-rule); font: 600 22px/1.15 var(--fn-mono); letter-spacing: -0.03em; }
.content h3 { margin: 32px 0 8px; font: 600 18px/1.3 var(--fn-sans); letter-spacing: -0.01em; }
.content h4 { margin: 20px 0 8px; font: 600 16px/1.3 var(--fn-sans); }
.content p, .content li { max-width: 68ch; }
.content td p, .content td li, .content blockquote p { max-width: none; }
.content p { margin: 0 0 12px; }
.content strong { font-weight: 600; }
.content ul, .content ol { padding-left: 20px; margin: 0 0 12px; }
.content li { margin: 4px 0; }
.content ol > li::marker { font: 600 13px/1 var(--fn-mono); color: var(--fn-accent); }
.content ul > li::marker { color: var(--fn-stone); }

/* TL;DR and other quotes: a card with one accent mark */
.content blockquote { margin: 0 0 20px; padding: 12px 20px; background: var(--fn-card); border: 1px solid var(--fn-rule); border-left: 2px solid var(--fn-accent); border-radius: var(--fn-radius); max-width: 76ch; }
.content blockquote p:last-child { margin: 0; }

/* Code lives in insets */
.content code { font: 500 0.875em/1.5 var(--fn-mono); background: var(--fn-inset); padding: 1px 4px; border-radius: var(--fn-radius); overflow-wrap: anywhere; }
.content pre { margin: 8px 0 20px; padding: 12px 20px; overflow-x: auto; background: var(--fn-inset); color: var(--fn-ink); border: 1px solid var(--fn-hair); border-radius: var(--fn-radius); font: 400 13px/1.55 var(--fn-mono); }
.content pre code { background: none; padding: 0; font: inherit; overflow-wrap: normal; }

/* Tables */
.content table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.55; margin: 8px 0 20px; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--fn-hair); padding: 8px 12px; text-align: left; vertical-align: top; }
.content th { font: 600 11px/1.4 var(--fn-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fn-ink-2); background: var(--fn-card); border-bottom-color: var(--fn-rule); white-space: nowrap; }
.content hr { border: 0; border-top: 1px solid var(--fn-rule); margin: 32px 0; }
.content img { max-width: 100%; }

.foot { margin-top: 84px; padding-top: 12px; border-top: 1px solid var(--fn-rule); font-size: 14px; line-height: 1.55; color: var(--fn-muted); }

@media (max-width: 900px) {
  .masthead, .wrap { width: calc(100% - 32px); }
  .wrap { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { position: static; max-height: none; border-right: 0; border-top: 1px solid var(--fn-rule); padding: 20px 0; order: 2; }
  main.content { order: 1; padding: 20px 0 32px; }
  .content h1 { font-size: 28px; }
  .mast-site { padding-left: 12px; }
}