/* ============================================================================
FRACTIONALKYLE — BRAND STYLESHEET (single source of truth)
v1.0 · 2026
Every component used across the site is defined ONCE here. The guidelines
page and all templates import this file, so styles cannot drift apart.
----------------------------------------------------------------------------
CONTENTS
1. Design tokens (:root) 5. Wordmark
2. Base / reset 6. Notes (ruled baseline grid)
3. Buttons 7. Quote treatments
4. Typography helpers 8. Graph module
============================================================================ */
/* ---- 1. DESIGN TOKENS --------------------------------------------------- */
:root{
/* Green scale — ONE base hue (HSB 158/60/44) modified into variations.
Darker = lower brightness + higher saturation, hue toward 120.
Lighter = higher brightness + lower saturation, hue toward 180. */
--g-900:#0B2919; --g-800:#143D28; --g-700:#1D523B; --g-600:#2D7058;
--g-500:#3F8F74; --g-400:#60B29D; --g-300:#8AD1C3; --g-200:#B5E8E1;
--g-100:#D7F5F3; --g-50:#E8FAF9;
/* Accent — the only accent color. Lives on dark; on light use --lime-deep. */
--lime:#99DB42; --lime-bright:#B6E86E; --lime-deep:#62992B;
/* Neutrals — green-undertoned. Never pure black/white, never cream. */
--ink:#1A1F1C; --ink-700:#59615D; --ink-500:#868F8B; --ink-300:#BDC7C2; --ink-100:#E4F2EB;
--cool-paper:#F2FCF9; /* cool off-white, faint green (not yellow) */
--rule:#C9D9D2; /* ruled notebook line */
--margin-rule:#D98A8A; /* the one warm tone: notebook margin only */
/* Note-type colors — graph hierarchy, most→least important */
--type-topic:#99DB42; /* Topic Map — entry point (lime) */
--type-thought:#7BCB7A; /* Thought — original conclusion */
--type-story:#E8A24C; /* Story — personal (only off-green tone) */
--type-concept:#357E64; /* Concept — understanding */
--type-book:#6FA89B; /* Book — source / reference */
/* Fonts */
--type:'JetBrains Mono',ui-monospace,monospace; /* structure: headings, labels, wordmark, UI */
--body:'Newsreader',Georgia,serif; /* reading: body + long-form */
/* Baseline grid — THE unit. Every vertical value is a multiple of this.
Never use raw px / unitless line-heights for vertical rhythm; use
calc(var(--line) * n). This is what keeps notes sitting on the rules. */
--line:34px;
/* Dark-surface gradients — deep-green zones are NEVER flat fills. The
gradient is what gives heroes, footers, the graph and the garden depth.
--grad-hero: 3-stop diagonal from the top-right (use on heroes/footers).
--grad-zone: 2-stop radial from the top-left (use on graph/garden panels). */
--grad-hero:radial-gradient(120% 140% at 85% 12%, var(--g-700) 0%, var(--g-800) 44%, var(--g-900) 100%);
--grad-zone:radial-gradient(120% 130% at 20% 8%, var(--g-800) 0%, var(--g-900) 62%);
/* Note-link glyph — the index card (the literal Zettelkasten unit). Used as a
CSS mask so it inherits the link colour via currentColor (green when
published, ink when draft). Centralised here so the icon is defined ONCE. */
--ico-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.7' y='3.1' width='12.6' height='9.8' rx='1.5'/%3E%3Cpath d='M1.7 6.1h12.6'/%3E%3Cpath d='M4 9h6M4 10.9h3.6'/%3E%3C/svg%3E");
}
/* ---- 2. BASE ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--body); background:var(--cool-paper); color:var(--ink);
line-height:1.52; -webkit-font-smoothing:antialiased;
/* Newsreader TUNED to sit with JetBrains Mono: lower optical size (sharper,
less ornamental serifs at reading size), a touch more weight so the body
holds up next to the bold mono, tighter rhythm so the two faces read as one
system. opsz / weight / letter-spacing are inherited, so they reach all
reading text. line-height:1.52 is for NON-grid body copy only — note-page
text overrides it back to var(--line) to stay on the 34px baseline. */
font-variation-settings:'opsz' 18; font-weight:450; letter-spacing:.005em;
}
/* Load fonts so a late swap cannot reflow the baseline grid:
add to @font-face or the Google Fonts link → &display=optional
(documented in README; the host page sets it on the ). */
a{color:var(--lime-deep);text-decoration:none}
/* ---- 4. TYPOGRAPHY HELPERS --------------------------------------------- */
.t-eyebrow{font-family:var(--type);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-600)}
.t-display{font-family:var(--type);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.t-section{font-family:var(--type);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--g-700)}
.t-label{font-family:var(--type);letter-spacing:.14em;text-transform:uppercase}
.t-body{font-family:var(--body)}
/* lime keyword underline — a recurring signature.
The "rising dry brush": a medium-heavy tapered brush stroke, angled up,
trailing into specks like a brush running low on ink. NOT a flat bar.
Markup: wrap the keyword and inline the brush SVG inside the span, e.g.
outcomes
Inline the / directly (don't use