/* lash docs · reader-first stylesheet · warm paper */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Chivo+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
:root {
/* warm-paper light palette */
--bg: #fafaf7;
--bg-elev: #ffffff;
--bg-faint: #f3f1ec;
--bg-tint: #ebe7dc;
--ink: #1d1c19;
--ink-mid: #4c4a45;
--ink-dim: #7a7872;
--ink-faint: #b0aea6;
--rule: #e6e3da;
--rule-strong: #cfcabd;
--accent: #c97a1f; /* sodium amber, tuned for light bg AA */
--accent-strong: #a35e10;
--accent-faint: #f6ebd8;
--code-text: #2b2a26;
--code-bg: #f3f1ec;
--code-rule: #e1ddd0;
--selection-bg: #f6ebd8;
color-scheme: light;
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
/* 4pt spacing scale in rem so the whole layout scales with root font-size */
--space-3xs: 0.125rem;
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Big Shoulders Display", "Big Shoulders", "Helvetica Neue", sans-serif;
--font-mono: "Chivo Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* layout constants */
--nav-width: 16rem;
--toc-width: 13rem; /* legacy — kept so old rules still resolve */
--content-max: 50rem; /* ~800px at 16px — narrow editorial measure */
--page-max: 76rem;
/* legacy token aliases so page-specific inline styles built against the
warm-iron palette continue to render under the new light sheet */
--sodium: var(--accent);
--sodium-soft: var(--accent);
--chalk: var(--ink);
--chalk-mid: var(--ink-mid);
--chalk-dim: var(--ink-dim);
--ash: var(--rule);
--ash-mid: var(--ink-dim);
--ash-text: var(--ink-dim);
--form-deep: var(--bg);
--form: var(--bg);
--form-raised: var(--bg-elev);
--surface-hover: var(--bg-faint);
--ghost-bar: var(--bg-faint);
--line: var(--rule);
--line-strong: var(--rule-strong);
--font-ui: var(--font-mono);
--font-body-legacy: var(--font-body);
}
/* ─── dark-mode preview islands ───────────────────────────────────────
Pages that document the exporter's HTML output show inline mockups
of the warm-iron product surface. Those mockups must stay dark even
when embedded in the light docs page. Any container with one of
these classes flips all warm-iron tokens (current + legacy) to dark
values, so inner inline styles render against a true dark surface. */
.preview-darkmode,
.sample-frame,
.doc-page,
body:has(> .doc-page) {
--bg: #141412;
--bg-elev: #1b1a17;
--bg-faint: #201d18;
--bg-tint: #2b2722;
--ink: #e8e4d0;
--ink-mid: #c0bca8;
--ink-dim: #888578;
--ink-faint: #5a5a50;
--rule: #2b2925;
--rule-strong: #5a5a50;
--accent: #e8a33c;
--accent-strong: #ffb054;
--accent-faint: #2b2218;
--code-text: #e8e4d0;
--code-bg: #201d18;
--code-rule: #2b2925;
/* legacy aliases retargeted to dark equivalents */
--sodium: #e8a33c;
--sodium-soft: #ffb054;
--chalk: #e8e4d0;
--chalk-mid: #c0bca8;
--chalk-dim: #a09e91;
--ash: #5a5a50;
--ash-mid: #888578;
--ash-text: #888578;
--form-deep: #141412;
--form: #1b1a17;
--form-raised: #1b1a17;
--surface-hover: #2b2722;
--line: #2b2925;
--line-strong: #5a5a50;
--ghost-bar: #2b2722;
background: var(--bg);
color: var(--ink);
}
/* ─── dark theme ──────────────────────────────────────────────────
Applied either via explicit [data-theme="dark"] on (toggle)
or via prefers-color-scheme on without an explicit override. */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #141412;
--bg-elev: #1b1a17;
--bg-faint: #201d18;
--bg-tint: #2b2722;
--ink: #e8e4d0;
--ink-mid: #c0bca8;
--ink-dim: #999688;
--ink-faint: #5a5a50;
--rule: #2b2925;
--rule-strong: #5a5a50;
--accent: #e8a33c;
--accent-strong: #ffb054;
--accent-faint: #2b2218;
--code-text: #e8e4d0;
--code-bg: #201d18;
--code-rule: #2b2925;
--selection-bg: #2b2218;
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #141412;
--bg-elev: #1b1a17;
--bg-faint: #201d18;
--bg-tint: #2b2722;
--ink: #e8e4d0;
--ink-mid: #c0bca8;
--ink-dim: #999688;
--ink-faint: #5a5a50;
--rule: #2b2925;
--rule-strong: #5a5a50;
--accent: #e8a33c;
--accent-strong: #ffb054;
--accent-faint: #2b2218;
--code-text: #e8e4d0;
--code-bg: #201d18;
--code-rule: #2b2925;
--selection-bg: #2b2218;
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
}
/* dark mode: entry cards on landing want a touch more elevation */
:root[data-theme="dark"] .entry { background: var(--bg-elev); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .entry { background: var(--bg-elev); }
}
*,
*::before,
*::after { box-sizing: border-box; }
::selection { background: var(--selection-bg); }
html {
font-size: clamp(16px, 0.85rem + 0.22vw, 19px);
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
font-feature-settings: "kern", "liga", "calt", "ss01";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--space-md);
z-index: 999;
padding: var(--space-sm) var(--space-md);
background: var(--ink);
color: var(--bg);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border-radius: 0;
}
.skip-link:focus { top: var(--space-md); box-shadow: var(--focus-ring); }
/* ─── layout shell ─── */
.page {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.frame {
display: grid;
grid-template-columns:
[nav-start] var(--nav-width)
[content-start] minmax(0, 1fr)
[end];
grid-template-areas:
"nav hero"
"nav content"
"nav footer";
column-gap: var(--space-2xl);
align-items: start;
}
.sidebar { grid-area: nav; }
.hero { grid-area: hero; }
.content { grid-area: content; }
.footer { grid-area: footer; }
.on-page-toc { display: none; }
/* ─── top bar (injected by nav.js) ─── */
.topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: var(--space-2xl);
padding: 0 var(--space-lg);
height: 3.5rem;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--rule);
}
.topbar__logo {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--ink);
font-weight: 600;
letter-spacing: -0.005em;
}
.topbar__logo:hover { color: var(--ink); text-decoration: none; }
.topbar__logo:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 4px;
}
.topbar__mark {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.topbar__nav {
display: flex;
align-items: center;
gap: var(--space-md);
margin-left: auto;
}
.topbar__link {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
color: var(--ink-mid);
font-size: 0.94rem;
font-weight: 500;
text-decoration: none;
border-radius: 4px;
transition: color 120ms ease, background 120ms ease;
}
.topbar__link:hover {
color: var(--ink);
background: var(--bg-faint);
text-decoration: none;
}
.topbar__link:focus-visible {
outline: none;
color: var(--ink);
box-shadow: var(--focus-ring);
}
.topbar__link.is-active {
color: var(--ink);
font-weight: 600;
}
.topbar__link.is-active::after {
content: "";
position: absolute;
bottom: -1px;
height: 2px;
background: var(--accent);
width: calc(100% - 2 * var(--space-sm));
margin-left: var(--space-sm);
margin-top: var(--space-xs);
}
.topbar__link {
position: relative;
}
.topbar__link.is-active::after {
position: absolute;
left: var(--space-sm);
right: var(--space-sm);
bottom: -1px;
width: auto;
margin: 0;
}
/* ─── sidebar (chapter nav) ─── */
.sidebar {
position: sticky;
top: 3.5rem;
align-self: start;
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
padding: var(--space-xl) 0;
display: flex;
flex-direction: column;
gap: var(--space-lg);
scrollbar-width: thin;
scrollbar-color: var(--rule-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
.sidebar__exit {
font-size: 0.8125rem;
font-weight: 500;
color: var(--ink-mid);
text-decoration: none;
letter-spacing: 0;
}
.sidebar__exit:hover { color: var(--ink); }
.sidebar__exit:focus-visible { outline: none; color: var(--ink); box-shadow: var(--focus-ring); }
.sidebar__label {
display: block;
margin-bottom: var(--space-sm);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.sidebar__disclosure { display: contents; }
.sidebar__disclosure > summary {
list-style: none;
cursor: default;
pointer-events: none;
}
.sidebar__disclosure > summary::-webkit-details-marker { display: none; }
.sidebar__current { display: none; }
.sidebar__chapters {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar__chapters li { margin: 0; }
.sidebar__chapters a {
display: block;
padding: var(--space-2xs) 0;
color: var(--ink-mid);
font-size: 0.875rem;
line-height: 1.5;
text-decoration: none;
transition: color 120ms ease;
}
.sidebar__chapters a:hover { color: var(--ink); }
.sidebar__chapters a:focus-visible {
outline: none;
color: var(--ink);
box-shadow: var(--focus-ring);
}
.sidebar__chapters a.active {
color: var(--accent-strong);
font-weight: 600;
}
/* on-page TOC inside sidebar (legacy hard-coded markup) is hidden — toc.js
injects the live, scroll-spied version on the fly */
.sidebar__toc { display: none; }
/* ─── nested on-page TOC (injected by toc.js into the active chapter ) ─── */
.sidebar__toc-list {
list-style: none;
margin: var(--space-2xs) 0 var(--space-xs);
padding: 0 0 0 calc(1.8rem + var(--space-xs));
border-left: 1px solid var(--rule);
margin-left: 0.9rem;
}
.sidebar__chapters .sidebar__toc-list {
/* when nested inside a chapter , line up the rail with the chapter
baseline and indent the items just enough to read as a sub-tree */
margin: var(--space-2xs) 0 var(--space-sm) 1.4rem;
padding-left: var(--space-sm);
}
.sidebar__toc-list li { margin: 0; }
.sidebar__toc-list a {
display: block;
padding: var(--space-3xs) var(--space-sm);
margin-left: -1px;
border-left: 1px solid transparent;
color: var(--ink-dim);
font-size: 0.8125rem;
line-height: 1.45;
text-decoration: none;
transition: color 120ms ease, border-color 120ms ease;
}
.sidebar__toc-list a:hover {
color: var(--ink-mid);
border-left-color: var(--rule-strong);
}
.sidebar__toc-list a:focus-visible {
outline: none;
color: var(--ink);
border-left-color: var(--accent);
box-shadow: none;
}
.sidebar__toc-list a.active {
color: var(--accent-strong);
border-left-color: var(--accent);
}
.sidebar__toc-list a[data-depth="3"] { padding-left: var(--space-md); }
.sidebar__toc-block {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--rule);
}
.sidebar__toc-block .sidebar__toc-list {
margin-left: 0;
padding-left: var(--space-sm);
}
/* ─── on-page TOC (right column, injected by toc.js) ─── */
.on-page-toc {
position: sticky;
top: 3.5rem;
align-self: start;
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
padding: var(--space-xl) 0;
scrollbar-width: thin;
scrollbar-color: var(--rule-strong) transparent;
}
.on-page-toc__label {
display: block;
margin-bottom: var(--space-sm);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.on-page-toc ol {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid var(--rule);
}
.on-page-toc a {
display: block;
padding: var(--space-2xs) var(--space-md);
margin-left: -1px;
border-left: 1px solid transparent;
color: var(--ink-mid);
font-size: 0.8125rem;
line-height: 1.5;
text-decoration: none;
transition: color 120ms ease, border-color 120ms ease;
}
.on-page-toc a:hover {
color: var(--ink);
border-left-color: var(--rule-strong);
}
.on-page-toc a:focus-visible {
outline: none;
color: var(--ink);
border-left-color: var(--accent);
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
box-shadow: none;
}
.on-page-toc a.active {
color: var(--accent-strong);
border-left-color: var(--accent);
font-weight: 500;
}
.on-page-toc a[data-depth="3"] { padding-left: var(--space-xl); }
/* ─── hero (page title + lead) ─── */
.hero {
padding: var(--space-3xl) 0 var(--space-xl);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--space-3xl);
}
.hero > div + .hero-meta,
.hero > .hero-meta {
margin-top: var(--space-xl);
}
.hero-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--space-sm);
}
.hero-meta .card {
padding: var(--space-sm) var(--space-md);
background: transparent;
border-radius: 4px;
}
.hero-meta .card .micro-label {
margin-bottom: var(--space-3xs);
}
.hero-meta .card strong {
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0;
margin-top: var(--space-3xs);
}
.hero-meta .card > span {
font-size: 0.875rem;
margin-top: var(--space-2xs);
}
.eyebrow,
.micro-label {
display: inline-block;
margin-bottom: var(--space-sm);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-body);
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.25;
}
.hero h1 {
margin: 0 0 var(--space-md);
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.9rem, 2.6vw, 2.6rem);
line-height: 1.12;
letter-spacing: -0.02em;
text-transform: none;
overflow-wrap: anywhere;
}
.hero h1 .slash {
color: var(--accent);
font-weight: 600;
}
.hero > p,
.hero > div > p {
margin: 0;
font-size: 1.18rem;
line-height: 1.55;
color: var(--ink-mid);
max-width: 42rem;
}
.hero > div > p + p,
.hero > p + p { margin-top: var(--space-md); }
.slash,
.accent { color: var(--accent); }
/* ─── content body ─── */
.content {
padding: 0 0 var(--space-3xl);
min-width: 0;
}
.content > .section:first-child { margin-top: 0; }
.content :is(p, ul, ol, dl, .table, pre, .diagram) { max-width: var(--content-max); }
.content :is(.table, pre, .diagram) { max-width: none; }
h2 {
margin-top: var(--space-2xl);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.2;
}
.section h2 { margin-top: 0; }
h3 {
margin-top: var(--space-xl);
font-size: 1.22rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
h4 {
margin-top: var(--space-lg);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
}
/* heading anchors (auto-injected by toc.js) */
.heading-anchor {
margin-left: var(--space-xs);
color: var(--ink-faint);
opacity: 0;
text-decoration: none;
font-size: 0.875em;
font-weight: 400;
transition: opacity 120ms ease, color 120ms ease;
}
:is(h2, h3, h4):hover .heading-anchor,
.heading-anchor:focus-visible {
opacity: 1;
}
.heading-anchor:hover { color: var(--accent); }
.heading-anchor:focus-visible { outline: none; color: var(--accent); }
p,
li,
dd {
margin: 0 0 var(--space-md);
color: var(--ink);
font-size: 1rem;
line-height: 1.65;
}
p:last-child,
li:last-child,
dd:last-child { margin-bottom: 0; }
ul, ol {
margin: 0 0 var(--space-md);
padding-left: var(--space-lg);
}
ul li::marker { color: var(--ink-faint); }
ol li::marker { color: var(--ink-dim); }
li + li { margin-top: var(--space-2xs); }
li :is(ul, ol) { margin-top: var(--space-2xs); margin-bottom: 0; }
a {
color: var(--accent-strong);
text-decoration: underline;
text-decoration-color: var(--accent-faint);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: text-decoration-color 120ms ease, color 120ms ease;
}
a:hover {
text-decoration-color: var(--accent);
}
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 2px;
}
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
code, .mono {
font-family: var(--font-mono);
font-size: 0.86em;
background: var(--code-bg);
padding: 0.08rem 0.34rem;
border-radius: 4px;
color: var(--code-text);
border: none;
}
a code { color: inherit; background: transparent; padding: 0; }
h1 code, h2 code, h3 code, h4 code {
font-size: 0.85em;
background: transparent;
padding: 0;
}
pre {
margin: 0 0 var(--space-md);
padding: var(--space-md) var(--space-lg);
overflow-x: auto;
background: var(--bg-elev);
border: 1px solid var(--code-rule);
border-radius: 4px;
color: var(--code-text);
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.65;
}
pre code {
background: transparent;
border: none;
padding: 0;
font-size: 1em;
color: inherit;
}
/* ─── syntax highlighting (highlight.js classes) ───────────────────── */
:root {
--syn-string: #5a7e2c; /* sage */
--syn-number: #a35e10; /* warm amber */
--syn-comment: var(--ink-dim);
--syn-keyword: #a35e10; /* accent-strong */
--syn-function: #2d5fa4; /* deep blue */
--syn-type: #6a3d8f; /* plum */
--syn-meta: var(--ink-dim);
--syn-punct: var(--ink-mid);
}
:root[data-theme="dark"] {
--syn-string: #b8d088;
--syn-number: #e8a33c;
--syn-keyword: #e8a33c;
--syn-function: #7ab4ec;
--syn-type: #c89cdb;
--syn-punct: var(--ink-mid);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--syn-string: #b8d088;
--syn-number: #e8a33c;
--syn-keyword: #e8a33c;
--syn-function: #7ab4ec;
--syn-type: #c89cdb;
--syn-punct: var(--ink-mid);
}
}
.hljs { color: var(--ink); background: transparent; }
.hljs-comment,
.hljs-quote { color: var(--syn-comment); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-meta .hljs-keyword { color: var(--syn-keyword); font-weight: 500; }
.hljs-string,
.hljs-doctag,
.hljs-template-tag,
.hljs-template-variable,
.hljs-regexp,
.hljs-attr,
.hljs-link { color: var(--syn-string); }
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-symbol,
.hljs-bullet { color: var(--syn-number); }
.hljs-title,
.hljs-title.function_,
.hljs-name,
.hljs-section,
.hljs-selector-class,
.hljs-selector-id { color: var(--syn-function); font-weight: 500; }
.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-tag,
.hljs-params { color: var(--syn-type); }
.hljs-variable,
.hljs-property { color: var(--ink); }
.hljs-punctuation,
.hljs-operator { color: var(--syn-punct); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
.hljs-deletion { color: #b03a3a; background: rgba(176, 58, 58, 0.08); }
.hljs-addition { color: #2a7a3a; background: rgba(42, 122, 58, 0.08); }
.hljs-formula { background: var(--code-bg); padding: 0 var(--space-2xs); }
blockquote {
margin: 0 0 var(--space-md);
padding: 0 0 0 var(--space-lg);
border-left: 3px solid var(--rule-strong);
color: var(--ink-mid);
}
hr {
border: 0;
border-top: 1px solid var(--rule);
margin: var(--space-2xl) 0;
}
/* ─── sections ─── */
.section { margin-top: var(--space-2xl); }
.section-header { margin-bottom: var(--space-md); }
.section-header h2 { margin-top: 0; }
.section-header p {
margin: var(--space-xs) 0 0;
color: var(--ink-mid);
font-size: 1rem;
max-width: var(--content-max);
}
/* ─── definition list ─── */
dl,
.def-list {
margin: 0 0 var(--space-md);
padding: 0;
border-top: 1px solid var(--rule);
}
dl dt,
.def-list dt {
margin-top: var(--space-md);
padding-top: var(--space-md);
font-weight: 600;
color: var(--ink);
}
dl dt:first-of-type,
.def-list dt:first-of-type {
margin-top: 0;
border-top: none;
}
dl dd,
.def-list dd {
margin: var(--space-xs) 0 var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--rule);
color: var(--ink-mid);
}
.def-list {
display: block;
background: transparent;
grid-template-columns: none;
}
.def-list dt code,
dl dt code { font-size: 0.94em; }
/* ─── editorial principle list (numbered rules) ─── */
.principle-list {
list-style: none;
counter-reset: pidx;
margin: 0 0 var(--space-md);
padding: 0;
border-top: 1px solid var(--rule);
background: transparent;
}
.principle-list > li {
counter-increment: pidx;
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--space-md);
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--rule);
margin: 0;
}
.principle-list > li::before {
content: counter(pidx, decimal-leading-zero);
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.875rem;
color: var(--ink-dim);
letter-spacing: 0;
padding-top: 0.15rem;
}
.principle-list h3 {
margin: 0 0 var(--space-2xs);
font-size: 1.125rem;
font-weight: 600;
color: var(--ink);
}
.principle-list p {
margin: 0;
color: var(--ink-mid);
}
.principle-list ul {
margin: var(--space-sm) 0 0;
padding-left: var(--space-lg);
}
.principle-list ul li {
color: var(--ink-mid);
font-size: 0.94rem;
}
/* ─── path list (reading paths) ─── */
.path-list {
list-style: none;
margin: 0 0 var(--space-md);
padding: 0;
border-top: 1px solid var(--rule);
}
.path-list > li {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-xl);
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--rule);
margin: 0;
}
.path-eyebrow {
display: block;
margin-bottom: var(--space-2xs);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.path-meta h3 {
margin: 0 0 var(--space-xs);
font-size: 1.125rem;
font-weight: 600;
}
.path-meta p {
margin: 0;
color: var(--ink-mid);
font-size: 0.94rem;
}
.path-route {
list-style: none;
margin: 0;
padding: 0;
counter-reset: route;
align-self: center;
}
.path-route li {
counter-increment: route;
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
align-items: baseline;
padding: var(--space-2xs) 0;
margin: 0;
}
.path-route li::before {
content: counter(route, decimal-leading-zero);
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.8125rem;
color: var(--ink-dim);
}
.path-route a {
color: var(--ink);
font-weight: 500;
text-decoration: none;
}
.path-route a:hover { color: var(--accent-strong); }
.path-route a:focus-visible {
outline: none;
color: var(--accent-strong);
box-shadow: var(--focus-ring);
}
/* ─── cards & panels (subdued) ─── */
.card,
.panel,
.nav-card,
.stat,
.callout {
background: var(--bg-elev);
border: 1px solid var(--rule);
border-radius: 6px;
padding: var(--space-md) var(--space-lg);
margin: 0 0 var(--space-md);
}
.card small,
.panel small,
.nav-card small {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.card strong,
.nav-card strong,
.stat strong {
display: block;
margin-top: var(--space-xs);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.18rem;
letter-spacing: -0.01em;
color: var(--ink);
}
.card > span,
.nav-card > span,
.stat > span:not(.stat-value) {
display: block;
margin-top: var(--space-2xs);
color: var(--ink-mid);
font-size: 0.94rem;
}
.card .path,
.path {
display: block;
margin-top: var(--space-sm);
word-break: break-word;
}
.stat-value {
display: block;
margin-top: var(--space-xs);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.18rem;
color: var(--ink);
letter-spacing: 0;
}
.stat-note {
display: block;
margin-top: var(--space-2xs);
color: var(--ink-mid);
font-size: 0.86rem;
line-height: 1.5;
}
/* ─── grids (legacy class names; light layout) ─── */
.hero-meta,
.stats,
.module-grid,
.mode-grid,
.two-col {
display: grid;
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.stats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.module-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.mode-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.two-col { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
/* ─── tables ─── */
.table {
margin: 0 0 var(--space-md);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.94rem;
}
th, td {
padding: var(--space-sm) var(--space-md);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--rule);
line-height: 1.55;
}
th {
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
border-bottom-color: var(--rule-strong);
}
td {
color: var(--ink);
}
td code { font-size: 0.86em; }
tbody tr:last-child td { border-bottom: none; }
/* ─── pills / status chips ─── */
.pill-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin: var(--space-sm) 0;
}
.pill {
display: inline-flex;
align-items: center;
padding: var(--space-3xs) var(--space-sm);
background: var(--bg-faint);
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 0.8125rem;
color: var(--ink-mid);
}
.status {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-3xs) var(--space-sm);
background: var(--bg-faint);
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 0.8125rem;
color: var(--ink-mid);
}
.status::before {
content: "";
width: 7px;
height: 7px;
background: #6f9c4a; /* lichen — quieter on light */
border-radius: 50%;
}
.warn::before { background: var(--accent); }
.danger::before { background: #c14a3a; }
/* ─── diagrams (mermaid) ─── */
.diagram {
margin: var(--space-lg) 0;
}
.diagram-title {
display: block;
margin-bottom: var(--space-xs);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.mermaid {
padding: var(--space-md);
background: var(--bg-elev);
border: 1px solid var(--rule);
border-radius: 4px;
overflow-x: auto;
}
.mermaid svg {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
display: block;
margin: 0 auto;
}
.diagram-zoom {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 2;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule);
background: var(--bg-elev);
color: var(--ink-mid);
border-radius: 3px;
font-size: 14px;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
}
.diagram { position: relative; }
.diagram-zoom:hover { color: var(--accent-strong); border-color: var(--rule-strong); }
.diagram-zoom:focus-visible {
outline: none;
color: var(--accent-strong);
box-shadow: var(--focus-ring);
}
.diagram-modal {
display: flex;
flex-direction: column;
width: min(95vw, 1600px);
max-width: 95vw;
height: min(92vh, 1100px);
max-height: 92vh;
margin: auto;
padding: 0;
border: 1px solid var(--rule);
background: var(--bg);
color: var(--ink);
border-radius: 6px;
}
.diagram-modal::backdrop {
background: rgba(20, 18, 12, 0.4);
backdrop-filter: blur(4px);
}
.diagram-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--rule);
}
.diagram-modal__title {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-dim);
}
.diagram-modal__controls { display: flex; align-items: center; gap: var(--space-xs); }
.diagram-modal__btn {
border: 1px solid var(--rule);
background: transparent;
color: var(--ink-mid);
padding: var(--space-2xs) var(--space-sm);
font-family: var(--font-body);
font-size: 0.8125rem;
cursor: pointer;
min-width: 32px;
border-radius: 3px;
transition: color 120ms ease, border-color 120ms ease;
}
.diagram-modal__btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.diagram-modal__btn:focus-visible {
outline: none;
color: var(--ink);
box-shadow: var(--focus-ring);
}
.diagram-modal__zoom {
font-size: 0.78rem;
color: var(--ink-dim);
min-width: 4ch;
text-align: center;
}
.diagram-modal__body {
flex: 1;
position: relative;
overflow: hidden;
background: var(--bg-elev);
cursor: grab;
}
.diagram-modal__body.is-panning { cursor: grabbing; }
.diagram-modal__stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform-origin: 0 0;
will-change: transform;
}
.diagram-modal__body svg {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
display: block;
}
/* ─── section navigation (prev/next) ─── */
.section-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin-top: var(--space-3xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--rule);
}
.section-nav > * {
display: block;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--bg-elev);
color: var(--ink-mid);
text-decoration: none;
transition: border-color 120ms ease, background 120ms ease;
}
.section-nav > *:first-child:not(:last-child) { grid-column: 1; }
.section-nav > *:last-child { grid-column: 2; text-align: right; }
.section-nav > *:only-child { grid-column: 2; text-align: right; }
.section-nav a:hover {
border-color: var(--rule-strong);
background: #fff;
text-decoration: none;
}
.section-nav a:hover strong { color: var(--accent-strong); }
.section-nav a:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.section-nav span {
display: flex;
align-items: center;
gap: var(--space-2xs);
margin-bottom: var(--space-2xs);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
}
.section-nav > *:first-child span::before {
content: "←";
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0;
transition: transform 120ms ease;
}
.section-nav > *:last-child span {
justify-content: flex-end;
}
.section-nav > *:last-child span::after {
content: "→";
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0;
transition: transform 120ms ease;
}
.section-nav > *:first-child:hover span::before { transform: translateX(-3px); }
.section-nav > *:last-child:hover span::after { transform: translateX(3px); }
.section-nav strong {
display: block;
color: var(--ink);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0;
transition: color 120ms ease;
}
/* ─── footer ─── */
.footer {
padding: var(--space-lg) 0 var(--space-2xl);
margin-top: var(--space-3xl);
border-top: 1px solid var(--rule);
color: var(--ink-dim);
font-size: 0.8125rem;
}
/* ─── breadcrumbs (injected by nav.js into the hero) ─── */
.breadcrumbs {
display: flex;
align-items: center;
gap: var(--space-2xs);
margin-bottom: var(--space-md);
font-size: 0.82rem;
color: var(--ink-dim);
flex-wrap: wrap;
}
.breadcrumbs a {
color: var(--ink-mid);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.breadcrumbs a:hover {
color: var(--ink);
text-decoration: none;
border-bottom-color: var(--rule-strong);
}
.breadcrumbs a:focus-visible {
outline: none;
color: var(--ink);
box-shadow: var(--focus-ring);
border-radius: 2px;
}
.breadcrumbs__sep {
color: var(--ink-faint);
font-family: var(--font-mono);
font-size: 0.78rem;
}
.breadcrumbs__current {
color: var(--ink);
font-weight: 500;
}
/* When the breadcrumb is present, the editorial "chapter NN" eyebrow is
redundant — hide it via class so JS doesn't need inline styles. */
.hero--has-breadcrumb .eyebrow {
display: none;
}
/* Style for sub-result heading shown beside the page title in search */
.search-result__heading {
display: block;
margin-top: 1px;
font-weight: 500;
font-size: 0.86rem;
color: var(--ink-mid);
}
/* ─── code-block copy button ─── */
.pre-wrap {
position: relative;
margin: 0 0 var(--space-md);
}
.pre-wrap > pre { margin: 0; }
.pre-copy {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
padding: var(--space-3xs) var(--space-sm);
background: var(--bg);
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--ink-mid);
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease,
background 120ms ease;
}
.pre-wrap:hover .pre-copy,
.pre-copy:focus-visible {
opacity: 1;
}
.pre-copy:hover {
color: var(--ink);
border-color: var(--rule-strong);
background: var(--bg-elev);
}
.pre-copy:focus-visible {
outline: none;
color: var(--ink);
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.pre-copy.is-success {
color: #2a7a3a;
border-color: #b6d6a5;
background: #f2f8ec;
}
:root[data-theme="dark"] .pre-copy.is-success,
:root:not([data-theme="light"]) .pre-copy.is-success {
color: #b8d088;
border-color: #4a6624;
background: #1a2410;
}
/* ─── search trigger button (in topbar) ─── */
.search-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs) var(--space-sm);
background: var(--bg-faint);
border: 1px solid var(--rule);
border-radius: 999px;
color: var(--ink-mid);
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.search-trigger:hover {
color: var(--ink);
border-color: var(--rule-strong);
background: var(--bg-elev);
}
.search-trigger:focus-visible {
outline: none;
color: var(--ink);
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.search-trigger__icon { font-size: 0.94rem; line-height: 1; }
.search-trigger__label { color: var(--ink-dim); }
.search-trigger__kbd {
display: inline-flex;
align-items: center;
padding: 0 var(--space-2xs);
border: 1px solid var(--rule);
border-radius: 3px;
background: var(--bg);
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-dim);
}
/* ─── search overlay (modal) ─── */
body.search-open { overflow: hidden; }
.search-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 10vh var(--space-md) var(--space-md);
}
.search-overlay[hidden] { display: none; }
.search-backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--ink) 32%, transparent);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
}
.search-panel {
position: relative;
width: min(640px, 100%);
max-height: 80vh;
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: 8px;
box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 22%, transparent);
overflow: hidden;
}
.search-input-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--rule);
}
.search-icon {
font-size: 1.1rem;
color: var(--ink-dim);
}
.search-input {
flex: 1;
border: none;
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 1.05rem;
outline: none;
padding: var(--space-2xs) 0;
}
.search-input::placeholder { color: var(--ink-dim); }
.search-esc {
padding: 0 var(--space-2xs);
border: 1px solid var(--rule);
border-radius: 3px;
background: var(--bg-faint);
color: var(--ink-dim);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.search-status {
padding: var(--space-2xs) var(--space-md);
color: var(--ink-dim);
font-size: 0.82rem;
border-bottom: 1px solid var(--rule);
}
.search-status:empty { display: none; }
.search-results {
list-style: none;
margin: 0;
padding: var(--space-2xs) 0;
overflow-y: auto;
}
.search-results li { margin: 0; }
.search-result {
display: block;
padding: var(--space-sm) var(--space-md);
color: var(--ink);
text-decoration: none;
border-left: 2px solid transparent;
transition: background 80ms ease, border-color 80ms ease;
}
.search-result:hover,
.search-result.is-active {
background: var(--bg-faint);
border-left-color: var(--accent);
text-decoration: none;
}
.search-result__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-3xs);
}
.search-result__title {
font-weight: 600;
color: var(--ink);
font-size: 0.94rem;
}
.search-result__path {
color: var(--ink-dim);
font-size: 0.74rem;
font-family: var(--font-mono);
flex-shrink: 0;
}
.search-result__excerpt {
color: var(--ink-mid);
font-size: 0.86rem;
line-height: 1.5;
}
.search-result__excerpt mark {
background: var(--accent-faint);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* ─── richer footer ─── */
.footer__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-md) var(--space-lg);
}
.footer__links {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.footer__links a {
color: var(--ink-mid);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.footer__links a:hover {
color: var(--ink);
text-decoration: none;
border-bottom-color: var(--rule-strong);
}
.footer__source {
color: var(--ink-dim);
font-family: var(--font-mono);
font-size: 0.78rem;
}
/* ─── redirect stubs (architecture.html, reference.html, execution-modes.html) ─── */
.redirect {
display: grid;
place-items: center;
min-height: 60vh;
padding: var(--space-3xl) var(--space-xl);
text-align: center;
}
.redirect > * { max-width: 36rem; }
.redirect h1 {
margin: 0 0 var(--space-md);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 0.96;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.redirect p {
margin: 0 auto;
max-width: 48ch;
font-size: 1.06rem;
color: var(--ink-mid);
}
.redirect a {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-lg);
padding: var(--space-sm) var(--space-lg);
background: var(--ink);
color: var(--bg);
border: none;
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.94rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
transition: background 120ms ease;
}
.redirect a:hover {
background: var(--accent-strong);
color: var(--bg);
text-decoration: none;
}
.redirect a:focus-visible {
outline: none;
background: var(--accent-strong);
box-shadow: var(--focus-ring);
}
/* ─── theme toggle (injected by theme.js) ─── */
.theme-toggle {
position: fixed;
top: var(--space-md);
right: var(--space-md);
z-index: 50;
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-sm);
background: var(--bg-elev);
border: 1px solid var(--rule);
border-radius: 999px;
color: var(--ink-mid);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
/* When the theme toggle lives inside the topbar, drop the fixed-position
chrome and inherit the bar's compact link aesthetic. */
.topbar__nav .theme-toggle {
position: static;
margin-left: var(--space-xs);
background: transparent;
border-color: var(--rule);
font-size: 0.86rem;
padding: var(--space-2xs) var(--space-sm);
}
.topbar__nav .theme-toggle:hover {
background: var(--bg-faint);
}
.theme-toggle:hover {
color: var(--ink);
border-color: var(--rule-strong);
}
.theme-toggle:focus-visible {
outline: none;
color: var(--ink);
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.theme-toggle__icon {
font-size: 0.86rem;
line-height: 1;
}
/* ─── responsive ─── */
/* (3-column grid simplified to 2-col globally — old narrow-viewport rule retired) */
@media (max-width: 820px) {
:root { --nav-width: 0; }
.page { padding: 0 var(--space-md); }
.frame {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"hero"
"content"
"footer";
column-gap: 0;
}
.sidebar {
position: static;
max-height: none;
overflow: visible;
padding: var(--space-md) 0;
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--rule);
}
.sidebar__disclosure { display: block; }
.sidebar__disclosure > summary {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-md);
cursor: pointer;
pointer-events: auto;
padding: var(--space-xs) 0;
}
.sidebar__disclosure > summary .sidebar__label { margin-bottom: 0; }
.sidebar__disclosure > summary::after {
content: "▾";
margin-left: auto;
color: var(--ink-dim);
transition: transform 160ms ease;
}
.sidebar__disclosure[open] > summary::after { transform: rotate(180deg); }
.sidebar__disclosure:not([open]) > .sidebar__chapters { display: none; }
.sidebar__current {
display: inline-block;
color: var(--ink);
font-weight: 600;
}
.hero { padding: var(--space-xl) 0 var(--space-lg); }
.principle-list > li,
.path-list > li {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.section-nav { flex-direction: column; }
.section-nav > * { max-width: none; }
.section-nav > *:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}