*/
--green: #4ade80; /* h3, link-hover, depth-2 task, tip callout */
--teal: #2dd4bf; /* h4, depth-3 task */
--sky: #38bdf8; /* depth-4 task */
--lime: #a3e635; /* depth-5+ task */
--code-block: #86efac;/* text — light green, distinct from h2 */
--amber: #f59e0b; /* warn callout */
--red: #ef4444; /* danger callout */
/* Darkening scale — the section/ToC box is the lightest tier, then task
cards step ~5% darker per nesting depth (1 → 5+). */
--box: #282828; /* section-body + ToC box — same tier as task d1 */
--task-d1: #282828;
--task-d2: #222222;
--task-d3: #1c1c1c;
--task-d4: #161616;
--task-d5: #101010;
}
* { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: ui-monospace, "JetBrains Mono", "SF Mono", "Menlo", monospace;
font-size: 15px;
max-width: 900px;
margin: 0 auto;
padding: 3rem 1.75rem 5rem;
line-height: 1.65;
}
/* ── Headings — Sora 800, UPPERCASE, hierarchy by color + size ────── */
h1, h2, h3, h4 {
font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 800;
text-transform: uppercase;
}
h1 { font-size: 2.3rem; color: var(--white); letter-spacing: 0.01em; margin: 0 0 0.35rem; }
h2 { font-size: 1.45rem; color: var(--blue); letter-spacing: 0.02em; margin-top: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
h3 { font-size: 1.1rem; color: var(--green); letter-spacing: 0.03em; margin-top: 2rem; }
h4 { font-size: 1rem; color: var(--teal); letter-spacing: 0.04em; margin-top: 1.75rem; }
/* ── Sections — numbered + collapsible ────
Auto-numbered by a CSS counter (matches the ToC's auto-numbering, so
reordering or adding sections never desyncs the numbers). The lives
inside ; section margin/border move up to the details wrapper. */
body { counter-reset: section; }
details.section { margin-top: 3rem; }
details.section:first-of-type { margin-top: 0; }
details.section > summary {
counter-increment: section;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.55rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
content: "▸";
color: var(--text-muted);
font-size: 1.2em;
line-height: 1;
flex-shrink: 0;
}
details.section[open] > summary::before { content: "▾"; }
/* Heading inside the summary (h2 for numbered sections, h3 for the ToC):
strip its own block chrome (summary owns it). The section number prefixes
the h2 only — no-count sections (ToC) use h3 and get no number. */
details.section > summary :is(h2, h3) {
margin: 0;
padding: 0;
border: none;
}
details.section > summary h2::before {
content: counter(section) ". ";
}
/* Subsections — auto-numbered . within each section (matches the
section counter). CONVENTION: every section carries at least one *named*
.section-body (its X.1), so any content is referenceable as X.Y even
when there's only one. Authors write just the name; CSS supplies the number. */
details.section > .section-body { counter-reset: subsection; }
details.section > .section-body h3 { counter-increment: subsection; }
details.section > .section-body h3::before {
content: counter(section) "." counter(subsection) "\00a0\00a0";
}
/* Section content sits in its own grey box, set off from the header underline. */
details.section > .section-body {
background: var(--box);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem 1.25rem;
margin-top: 1rem;
}
details.section > .section-body > *:first-child { margin-top: 0; }
details.section > .section-body > *:last-child { margin-bottom: 0; }
/* Inner cards (code, diagrams) drop to the page bg so they recess inside the
lighter section-body box — borders keep their edges crisp. (Tasks shade by
depth instead — see the task section below.) */
details.section > .section-body :is(pre, .mermaid) {
background: var(--bg);
}
/* .no-count variant — collapsible section with a header but NO number
(used by the table of contents). Skips the counter so it doesn't consume
a section number, and suppresses the numeric prefix. */
details.section.no-count > summary { counter-increment: none; }
details.section.no-count > summary h2::before { content: none; }
/* .toc variant — "Contents" header + arrow sit plain; only the LIST is boxed. */
details.section.toc { margin-bottom: 3rem; }
details.section.toc > summary {
border-bottom: none; /* no full-width divider above the box */
padding-bottom: 0.25rem;
}
/* Kicker / eyebrow — project name above the doc title. */
h4.kicker {
margin: 0 0 0.25rem;
font-size: 0.85rem;
}
.subtitle {
color: var(--text-muted);
margin-bottom: 3.5rem;
font-size: 0.95rem;
}
p, li { color: var(--text); }
/* ── Code ─────────────────────────────────────────────────────────── */
code {
font-family: ui-monospace, "JetBrains Mono", "SF Mono", "Menlo", monospace;
background: rgba(255, 255, 255, 0.05);
padding: 0.1rem 0.4rem;
border-radius: 3px;
font-size: 0.9em;
color: var(--blue-light);
}
pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem;
overflow-x: auto;
margin: 1.25rem 0;
font-family: ui-monospace, "JetBrains Mono", "SF Mono", "Menlo", monospace;
}
pre code {
background: transparent;
padding: 0;
color: var(--code-block);
font-size: 0.875rem;
}
/* Syntax highlighting (highlight.js, loaded per-doc via the module script).
On-brand token theme keyed to the palette — no external theme CSS needed.
If hljs fails to load (offline), code falls back to the flat --code-block green. */
pre code.hljs { color: var(--text); padding: 0; background: transparent; }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--text-muted); font-style: italic; }
.hljs-keyword, .hljs-built_in, .hljs-literal, .hljs-name, .hljs-selector-tag { color: var(--blue); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--code-block); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--amber); }
.hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section, .hljs-type { color: var(--teal); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-template-variable { color: var(--sky); }
.hljs-punctuation, .hljs-operator { color: var(--text-muted); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* ── Callouts — neutral (blue) by default; modifier classes override ─ */
.callout {
background: rgba(96, 165, 250, 0.08);
border-left: 3px solid var(--blue);
padding: 0.85rem 1rem;
margin: 1.5rem 0;
border-radius: 0 6px 6px 0;
color: var(--text-muted);
}
.callout strong { color: var(--blue); }
.callout.tip { background: rgba(74, 222, 128, 0.08); border-left-color: var(--green); }
.callout.tip strong { color: var(--green); }
.callout.warn { background: rgba(245, 158, 11, 0.08); border-left-color: var(--amber); }
.callout.warn strong { color: var(--amber); }
.callout.danger { background: rgba(239, 68, 68, 0.08); border-left-color: var(--red); }
.callout.danger strong { color: var(--red); }
/* ── Open-question detail — the options / lean / status (or decided rationale)
that follows an OQ. The *question* alone lives in the highlighted .callout
banner; this sits just below it as regular body text, hugging the banner and
indented to align with the callout's text. Keep the banner to the question.
For an open OQ, .oq-detail is a wrapping the options as a
list (one per line for legibility) + a trailing Lean/Status ; for a decided
OQ it's a single
of rationale. */
.oq-detail {
margin: -1rem 0 1.5rem;
padding-left: calc(1rem + 3px);
color: var(--text);
}
/* When .oq-detail wraps blocks, keep it hugging the banner and don't let inner
block margins reopen the ~0.5rem gap the negative top margin buys. */
.oq-detail > :first-child { margin-top: 0; }
.oq-detail > :last-child { margin-bottom: 0; }
/* Each option is lettered — lead every
with an accented (a)
label so it's nameable (OQ5a, OQ5b) and the Lean/Decision can cite the pick by
letter. The label replaces the list marker, so suppress the bullet. */
.oq-options { margin: 0 0 0.5rem; padding-left: 0; list-style: none; }
.oq-options li { margin: 0.5rem 0; }
.oq-options li > strong:first-child { color: var(--sky); margin-right: 0.35rem; }
blockquote {
border-left: 3px solid var(--border);
margin: 1.25rem 0;
padding: 0.5rem 1rem;
color: var(--text-muted);
font-style: italic;
}
/* ── Tables ───────────────────────────────────────────────────────── */
table {
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0;
font-size: 0.95em;
}
/* Wrap a wide/many-column table in so it scrolls
horizontally inside its section instead of overflowing the box. The wrapper
owns the vertical margin; the inner table drops its own so spacing matches a
bare table. */
.table-wrap {
overflow-x: auto;
margin: 1.5rem 0;
}
.table-wrap > table {
margin: 0;
}
th, td {
text-align: left;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--border);
}
th {
color: var(--blue);
font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ── Links ────────────────────────────────────────────────────────── */
a {
color: var(--blue);
text-decoration: none;
border-bottom: 1px dotted var(--blue);
}
a:hover {
color: var(--green);
border-bottom-color: var(--green);
}
/* ── Lists — indexable markers so items can be referenced without counting.
:is() (not :where()) so deeper selectors outrank the shallow ul/ol rule.
Depth 1: a, b, c Depth 2: i, ii, iii Depth 3: 1, 2, 3 Depth 4: A, B, C
Tasks use and are unaffected. */
ul, ol {
padding-left: 1.6rem;
list-style-type: lower-alpha;
}
:is(ul, ol) :is(ul, ol) { list-style-type: lower-roman; }
:is(ul, ol) :is(ul, ol) :is(ul, ol) { list-style-type: decimal; }
:is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) { list-style-type: upper-alpha; }
li::marker { color: var(--blue); font-weight: 600; }
/* ── Note — a de-emphasized aside; the quiet counterpart to .callout. Use when
a clarification shouldn't claim the visual weight of a boxed callout: as a
block () for a trailing footnote, or inline () for a parenthetical such as a landed-on date. */
.note { color: var(--text-muted); font-size: 0.92rem; }
p.note { margin: 0.4rem 0 0; }
/* ── Task list — a lightweight checked list for retrospectives and status
summaries whose items carry their own ☑ / ☐ glyph. The indexable markers
above would double up ("a. ☑ …"), so drop the marker and its indent.
NOT for live checklists — those use with a real
, which the design-doc archetype stubs. */
ul.task-list { list-style: none; padding-left: 0; }
ul.task-list > li { margin: 0.5rem 0; }
/* ── Glossary — anchored term entries for dictionary / reference docs ─
with one linkable - per term and a
-
definition; close the
- with for the canonical-home
pointer. Unlike headings,
- is NOT uppercased, so code identifiers
(RoundDispatcher, /iris/geotiff/1.0.0) keep their exact casing. Terms sit a
rung below the section
: teal, like h4. */
dl.glossary { margin: 1.25rem 0 0; }
dl.glossary dt {
font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
color: var(--teal);
letter-spacing: 0.01em;
margin-top: 1.2rem;
scroll-margin-top: 1.5rem; /* offset anchor jumps from the viewport top */
}
dl.glossary dt:first-of-type { margin-top: 0; }
/* code/math inside a term keeps its own treatment (mono pill), not the dt color */
dl.glossary dt code { color: var(--blue-light); font-weight: 700; }
dl.glossary dd { margin: 0.3rem 0 0; color: var(--text); }
dl.glossary dd + dt { margin-top: 1.4rem; }
dl.glossary .see { color: var(--text-muted); }
hr {
border: none;
border-top: 1px solid var(--border);
margin: 2.5rem 0;
}
/* ── Footer — copyright, every doc ends with