/* =========================================================================== FONTS — self-hosted (sovereign, no runtime CDN calls) system voice = IBM Plex Mono (chrome, labels, the "more-than-human" frame) voice = Atkinson Hyperlegible (body + headings — the self, legible) terminal = Departure Mono (one place only: the CALIPSO gate) =========================================================================== */ @font-face { font-family:"Atkinson"; src:url("/assets/fonts/atkinson-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Atkinson"; src:url("/assets/fonts/atkinson-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Atkinson Mono"; src:url("/assets/fonts/atkinson-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Departure Mono"; src:url("/assets/fonts/departure-mono.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; } /* =========================================================================== THEME — dark (navy, default) + light (cool paper). Set on by an inline no-FOUC script in base.njk; :root defaults to dark if JS is off. =========================================================================== */ :root { --font-system: "IBM Plex Mono", ui-monospace, monospace; --font-voice: "Atkinson", system-ui, sans-serif; --font-terminal: "Departure Mono", monospace; --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 1rem; --space-l: 2rem; --space-xl: 4rem; /* dark (default) */ --color-bg: #0b0d14; --color-bg-raised: #10131c; --color-fg: #a8b0c0; --color-fg-strong: #d0d4de; --color-fg-dim: #3e4458; --color-accent: #4ec9b0; --color-accent-dim: #2a6b5e; --color-border: #1a1e2e; } /* light = WARM paper (cream + brown ink), teal stays the cold system accent. The paper is warm (the human), the system ink stays teal-cold (the frame). So the warm/cold duality lives inside light mode too, with ONE accent (§2.4 intact). */ [data-theme="light"] { --color-bg: #f2ede3; --color-bg-raised: #e9e1d3; --color-fg: #4a4136; --color-fg-strong: #2a2118; --color-fg-dim: #a89a86; --color-accent: #0f7a66; --color-accent-dim: #6a9e92; --color-border: #ddd3c2; } html { font-family: var(--font-voice); font-size: 16px; line-height: 1.75; background: var(--color-bg); color: var(--color-fg); -webkit-font-smoothing: antialiased; } body { max-width: 66ch; margin: 0 auto; padding: var(--space-xl) var(--space-l); min-height: 100vh; } /* ---- site nav (mode switch + theme toggle) ---- */ nav[aria-label="Site navigation"] { display: flex; align-items: baseline; gap: var(--space-l); padding-bottom: var(--space-m); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); } nav[aria-label="Site navigation"] a, .theme-toggle { font-family: var(--font-system); color: var(--color-fg-dim); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.2s; } nav[aria-label="Site navigation"] a[aria-current="page"] { color: var(--color-accent); } nav[aria-label="Site navigation"] a:hover, nav[aria-label="Site navigation"] a:focus-visible, .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--color-fg-strong); } .theme-toggle { margin-left: auto; background: none; border: none; cursor: pointer; padding: 0; } /* ---- links ---- */ a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-fg-strong); } a:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; } /* =========================================================================== TYPOGRAPHY — register split: sentence-case Atkinson bold = the human voice (headings, body) uppercase Plex Mono = the system voice (chrome, labels) =========================================================================== */ h1, h2, h3 { font-family: var(--font-voice); font-weight: 700; color: var(--color-fg-strong); line-height: 1.2; } h1 { font-size: 1.55rem; margin-bottom: var(--space-m); } h2 { font-size: 1.1rem; margin-top: var(--space-xl); margin-bottom: var(--space-s); } h3 { font-size: 1rem; margin-top: var(--space-l); margin-bottom: var(--space-s); } p { margin-bottom: var(--space-m); } p:last-child { margin-bottom: 0; } code { font-family: var(--font-system); font-size: 0.85em; color: var(--color-accent); } /* ---- depth sections ---- */ .depth-section { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); } .depth-section:last-child { border-bottom: none; } .depth-indicator { font-family: var(--font-system); font-size: 0.7rem; color: var(--color-fg-dim); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--space-m); } .depth-indicator::before { content: "// "; color: var(--color-accent-dim); } /* ---- depth nav (the descent prompts) ---- */ .depth-nav { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-s); } .depth-nav a { font-family: var(--font-system); display: inline-block; color: var(--color-accent); font-size: 0.85rem; padding: var(--space-xs) 0; letter-spacing: 0.04em; } .depth-nav a::before { content: "> "; color: var(--color-accent-dim); } .depth-nav a:hover { color: var(--color-fg-strong); } .depth-nav a:hover::before { color: var(--color-accent); } /* ---- note / callout block (distinct formatting register inside prose) ---- */ .note { border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent-dim); background: var(--color-bg-raised); padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l); margin: var(--space-l) 0; } .note .note-tag { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: var(--space-s); } .note p { font-size: 0.92rem; } /* ---- writing / index lists ---- */ .index-list { list-style: none; padding: 0; margin-top: var(--space-m); } .index-list li { padding: var(--space-s) 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: baseline; gap: var(--space-m); } .index-list li:last-child { border-bottom: none; } .index-list a { text-decoration: none; } .index-list .meta { font-family: var(--font-system); font-size: 0.75rem; color: var(--color-fg-dim); margin-left: auto; white-space: nowrap; display: flex; align-items: baseline; gap: var(--space-s); } /* ---- growth stage indicators ---- */ .growth-stage { font-family: var(--font-system); display: inline-block; font-size: 0.65rem; padding: 0.15em 0.6em; border: 1px solid var(--color-accent-dim); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; } .growth-stage[data-stage="seedling"] { border-color: var(--color-fg-dim); color: var(--color-fg-dim); } .growth-stage[data-stage="developing"] { border-color: var(--color-accent-dim); color: var(--color-accent); } .growth-stage[data-stage="grown"] { border-color: var(--color-fg); color: var(--color-fg-strong); } /* ---- article layout (individual writing pieces) ---- */ article header { margin-bottom: var(--space-xl); padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-border); } article header .growth-stage { margin-top: var(--space-s); } article header p { color: var(--color-fg-dim); margin-top: var(--space-s); } /* ---- CALIPSO terminal gate — the one home for Departure Mono (cold filter) ---- */ .terminal-gate { margin-top: var(--space-xl); padding: var(--space-l); border: 1px solid var(--color-border); background: var(--color-bg-raised); } .terminal-gate .gate-label { font-family: var(--font-system); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-fg-dim); margin-bottom: var(--space-m); } .terminal-gate .gate-line { font-family: var(--font-terminal); font-size: 1rem; color: var(--color-accent); } .terminal-gate .gate-line::before { content: "> "; color: var(--color-accent-dim); } .terminal-gate input { font-family: var(--font-terminal); font-size: 1rem; background: transparent; border: none; color: var(--color-fg-strong); caret-color: var(--color-accent); outline: none; width: 16ch; margin-left: 0.3em; } .terminal-gate input::placeholder { color: var(--color-fg-dim); opacity: 1; } /* ambient cursor blinks until the field is focused; then the real caret leads */ .terminal-gate:focus-within .cursor { display: none; } .cursor { display: inline-block; width: 0.5em; height: 1.05em; background: var(--color-accent); margin-left: 0.15em; vertical-align: -0.15em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } /* ---- index view ---- */ body[data-mode="index"] h1 { font-size: 1.2rem; } /* ---- visible depth state (set by JS observer) ---- */ .depth-section.depth-visible .depth-indicator::before { color: var(--color-accent); } /* ---- selection ---- */ ::selection { background: var(--color-accent); color: var(--color-bg); } /* ---- responsive ---- */ @media (max-width: 600px) { body { padding: var(--space-l) var(--space-m); } .depth-nav { gap: var(--space-xs); } .index-list li { flex-direction: column; gap: var(--space-xs); } .index-list .meta { margin-left: 0; } }