/* ============================================================ scryops — Telemetry design system Single CSS file: tokens + base + components. Load once in the . Dark is default; add class="light" on to switch. All components read from the tokens — never hard-code a hex below this block. ============================================================ */ :root { /* ---- color · dark (default) — Telemetry ---- */ --bg:#0A0E0F; --surface:#0C1213; --border:#1E2C2E; --heading:#EAF0EE; --text:#D6DBD9; --muted:#7FA6A0; --green:#3DDC84; /* healthy / values / INFO */ --cyan:#5BD8E8; /* identifiers / links / edges */ --link:#5BD8E8; --warn:#E0C24A; --danger:#FF6B6B; --violet:#9D7CF0; /* OpenTelemetry topic accent */ /* inline code chip */ --ic-bg:#101718; --ic-text:#5BD8E8; --ic-bd:#1C2A2B; /* code well — STAYS DARK in all three themes */ --code-bg:#0C1213; --code-text:#C8D2CF; --code-bd:#182426; /* readout constants — used ON the always-dark code/terminal wells, so they must NOT flip with theme (light/calm leave these alone). */ --code-hi:#EAF0EE; --code-muted:#7E9A8E; --code-green:#3DDC84; --code-cyan:#5BD8E8; /* permacomputing — living-green resource-awareness accent (well only) */ --eco:#7FB069; --eco-bright:#A8D88A; /* figures */ --fig-bg:#0B1011; --fig-grid:linear-gradient(rgba(127,166,160,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(127,166,160,.07) 1px,transparent 1px); --fig-bd:#1E2C2E; --node-fill:#10191A; --node-stroke:#2BAE76; --edge:#5BD8E8; --nlab:#EAF0EE; /* callouts */ --info-bg:rgba(61,220,132,.07); --info-bd:#3DDC84; --info-lb:#5FE39A; --warn-bg:rgba(224,194,74,.08); --warn-bd:#E0C24A; --warn-lb:#E8CE66; --dgr-bg:rgba(255,107,107,.08); --dgr-bd:#FF6B6B; --dgr-lb:#FF8585; /* tables */ --th:#0E1617; --tborder:#182426; /* ---- type — all-monospace reading system ---- */ --font-display:'Space Mono', ui-monospace, monospace; --font-read:'Courier Prime', ui-monospace, monospace; --font-code:'IBM Plex Mono', ui-monospace, monospace; --font-pixel:'Press Start 2P', monospace; --font-body:var(--font-read); --fs-display:34px; --fs-h1:29px; --fs-h2:20px; --fs-h3:16px; --fs-lede:17.5px; --fs-body:16px; --fs-code:13.5px; /* body ≥16px per GUIDELINES non-negotiable #3 */ --fs-label:11px; --fs-pixel:11px; --lh-body:1.78; --lh-lede:1.68; --lh-code:1.75; --read-track:.012em; /* reading-face letter-spacing (loosens in .pref-spacing) */ --measure:66ch; /* ---- spacing — 4px base ---- */ --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px; --sp-5:32px; --sp-6:52px; /* ---- form ---- */ --radius:10px; --radius-sm:6px; --space:8px; --hair:1px; /* ---- bridge: repo's evolved (warm-paper) token names → Telemetry ---- The repo's components were authored against an earlier vocabulary. Aliasing those names onto the Telemetry tokens re-skins every existing component to the dark-default palette with no per-component edits. var() resolves per-theme, so these follow light/calm automatically. */ --line:var(--border); --head:var(--heading); --accent:var(--green); /* brand / wordmark / CTAs → terminal green */ --accent-hover:var(--cyan); --accent-press:var(--green); --on-accent:var(--bg); /* text on an accent fill = page bg */ --ok:var(--green); --pending:var(--warn); --alert:var(--danger); --info:var(--cyan); --num-idle:var(--muted); --ac:var(--green); /* party-gallery card accent */ --amber:var(--warn); /* 404 page */ --amber-deep:var(--warn); --gold:var(--warn); --klein:var(--cyan); --klein-mid:var(--cyan); --klein-glow:var(--cyan); --font-mono:var(--font-code); --font-sans:var(--font-read); } html.light { --bg:#F4F6F5; --surface:#FFFFFF; --border:#DEE5E2; --heading:#10201A; --text:#18201E; --muted:#5A6863; --green:#157A45; --cyan:#0E7E91; --link:#0E7E91; --warn:#8A6A14; --danger:#C2382F; --violet:#6B4FC4; --ic-bg:#E6EDEA; --ic-text:#0E7E91; --ic-bd:#D2DDD8; /* code well intentionally NOT overridden — stays dark */ --fig-bg:#FFFFFF; --fig-grid:linear-gradient(#E6EDEA 1px,transparent 1px), linear-gradient(90deg,#E6EDEA 1px,transparent 1px); --fig-bd:#DEE5E2; --node-fill:#EAF1ED; --node-stroke:#1E8F52; --edge:#0E7E91; --nlab:#18201E; --info-bg:#E7F2EB; --info-bd:#157A45; --info-lb:#157A45; --warn-bg:#FBF1DA; --warn-bd:#B08A1E; --warn-lb:#8A6A14; --dgr-bg:#FBE9E7; --dgr-bd:#C2382F; --dgr-lb:#A8281F; --th:#EEF2F0; --tborder:#DEE5E2; } html.calm { --bg:#17140E; --surface:#1F1B13; --border:#332C20; --heading:#F2EAD8; --text:#E6DECE; --muted:#AA9D84; --green:#8FB386; --cyan:#D6B070; --link:#E0A24A; --warn:#D6B070; --danger:#E58A7A; --violet:#B49AD8; --ic-bg:#241F15; --ic-text:#D6B070; --ic-bd:#3A3324; /* code well still dark — keep syntax constant */ --fig-bg:#1A160F; --fig-grid:none; /* no background pattern — less distraction */ --fig-bd:#332C20; --node-fill:#221D14; --node-stroke:#7E6A3C; --edge:#D6B070; --nlab:#F2EAD8; --info-bg:rgba(143,179,134,.08); --info-bd:#8FB386; --info-lb:#9CC093; --warn-bg:rgba(214,176,112,.10); --warn-bd:#D6B070; --warn-lb:#E0BE84; --dgr-bg:rgba(229,138,122,.10); --dgr-bd:#E58A7A; --dgr-lb:#EC9C8D; --th:#1C180F; --tborder:#2A2418; } /* Reading prefs — independent, stackable token overrides. */ html.pref-legible{ --font-read:'Atkinson Hyperlegible', system-ui, sans-serif; --fs-body:16px; --read-track:.01em; } html.pref-spacing{ --lh-body:2.0; --lh-lede:1.85; --read-track:.03em; } html.pref-spacing .article > * + *{ margin-top:26px; } html.pref-reduce *,html.pref-reduce *::before,html.pref-reduce *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important} @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}} /* Lite mode (permacomputing Phase 3): drop to system fonts (zero web-font bytes) and let the Mermaid runtime be skipped. Auto-applies when the browser signals reduced-data. Fonts are the shared block below. */ html.pref-lite{ --font-display:ui-monospace,'Courier New',monospace; --font-read:ui-monospace,'Courier New',monospace; --font-code:ui-monospace,'Courier New',monospace; --font-body:ui-monospace,'Courier New',monospace; --font-pixel:ui-monospace,monospace; } @media (prefers-reduced-data: reduce){ :root{ --font-display:ui-monospace,'Courier New',monospace; --font-read:ui-monospace,'Courier New',monospace; --font-code:ui-monospace,'Courier New',monospace; --font-body:ui-monospace,'Courier New',monospace; --font-pixel:ui-monospace,monospace; } } /* Mermaid fallback — when the runtime can't/shouldn't render (Lite mode OR JS disabled), render the diagram's source as a readable static block instead of raw text (graceful degrade). */ html.pref-lite .diagram .mermaid, html:not(.js) .diagram .mermaid{white-space:pre-wrap;font-family:var(--font-code);font-size:12px;line-height:1.5;color:var(--code-muted);background:var(--code-bg);border:1px solid var(--code-bd);border-radius:var(--radius);padding:14px 16px;overflow-x:auto} html.pref-lite .diagram .mermaid::before, html:not(.js) .diagram .mermaid::before{content:"diagram source";display:block;color:var(--eco);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px} /* No-JS resilience (Permacomputing Phase 4): the footprint badge needs JS to fill real numbers — hide its placeholders entirely when JS is off. */ html:not(.js) .footprint{display:none} /* ============================================================ base ============================================================ */ *{box-sizing:border-box} html{background:var(--bg)} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-read); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; /* No transition on the mode-switching root: both background and color are var-bound, and custom properties can't interpolate — transitioning either sticks on the old value (dark-on-dark on toggle-back). The mode flip is instant by design. */ } /* ============================================================ article shell + measure ============================================================ */ .article{max-width:var(--measure);margin:0 auto;padding:0 24px} .article > * + *{margin-top:20px} .article figure, .article .obs-fig, .article pre, .article .mermaid{max-width:none} /* code + diagrams break wider than prose */ /* ============================================================ headings — Space Mono, lowercase ============================================================ */ h1,.h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.25;letter-spacing:-.01em;color:var(--heading);text-transform:lowercase;margin:0} h2,.h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.3;color:var(--heading);text-transform:lowercase;margin:46px 0 0} h3,.h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);color:var(--heading);text-transform:lowercase;margin:34px 0 0} .title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display);line-height:1.18;letter-spacing:-.01em;color:var(--heading);text-transform:lowercase;margin:0} /* ============================================================ prose ============================================================ */ p{margin:0;color:var(--text)} .lede{font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--text)} a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--border)} a:hover{border-bottom-color:var(--link)} a:visited{color:var(--muted)} /* inline code */ :not(pre) > code{ font-family:var(--font-code);font-size:.85em; background:var(--ic-bg);color:var(--ic-text); border:1px solid var(--ic-bd);padding:1px 6px;border-radius:var(--radius-sm); } /* ============================================================ code block — dark in both modes (see Chroma CSS for tokens) ============================================================ */ .code-tab{font-family:var(--font-code);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px} pre,.highlight pre,.chroma{ font-family:var(--font-code); background:var(--code-bg);color:var(--code-text); border:1px solid var(--code-bd);border-radius:var(--radius); padding:16px 18px;font-size:var(--fs-code);line-height:var(--lh-code); overflow-x:auto; } pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit} /* ============================================================ callouts — {{< callout info >}} … {{< /callout >}} ============================================================ */ .callout{border-radius:var(--radius);padding:14px 17px;font-size:15px;line-height:1.6;color:var(--text)} .callout > :first-child{margin-top:0} .callout-label{font-family:var(--font-code);font-size:11px;letter-spacing:.1em;font-weight:600;display:block;margin-bottom:5px} .callout.info{background:var(--info-bg);border-left:3px solid var(--info-bd)} .callout.info .callout-label{color:var(--info-lb)} .callout.warn{background:var(--warn-bg);border-left:3px solid var(--warn-bd)} .callout.warn .callout-label{color:var(--warn-lb)} .callout.danger{background:var(--dgr-bg);border-left:3px solid var(--dgr-bd)} .callout.danger .callout-label{color:var(--dgr-lb)} /* ============================================================ figures — obs-* shortcodes + mermaid ============================================================ */ .obs-fig{ background:var(--fig-bg);background-image:var(--fig-grid);background-size:26px 26px; border:1px solid var(--fig-bd);border-radius:var(--radius);padding:22px 20px 8px; } .obs-fig svg{display:block;width:100%;height:auto} .obs-fig .node{fill:var(--node-fill);stroke:var(--node-stroke)} .obs-fig .nlab{font-family:var(--font-code);font-size:12px;fill:var(--nlab)} .obs-fig .edge{stroke:var(--edge);stroke-width:1.5} .obs-fig .arr{fill:var(--edge)} figcaption,.obs-cap{font-family:var(--font-code);font-size:12px;line-height:1.45;color:var(--muted);margin:6px 2px 0} /* mermaid: themed via assets/js/mermaid-init.js; container just frames it */ .mermaid{ background:var(--fig-bg);background-image:var(--fig-grid);background-size:26px 26px; border:1px solid var(--fig-bd);border-radius:var(--radius);padding:18px; } /* ============================================================ tables ============================================================ */ table{width:100%;border-collapse:collapse;font-size:14px} thead th{text-align:left;font-family:var(--font-code);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:9px 13px;background:var(--th);border-bottom:1px solid var(--tborder)} tbody td{padding:10px 13px;color:var(--text);border-bottom:1px solid var(--tborder);line-height:1.5;vertical-align:top} /* ============================================================ table of contents (partial: toc.html) ============================================================ */ .toc{position:sticky;top:88px;align-self:start} .toc-label{font-family:var(--font-code);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} /* Reset Hugo's #TableOfContents list — no bullets, no default indent; the left rail on each link carries the structure. */ .toc nav,.toc ul{margin:0;padding:0;list-style:none} .toc li{margin:0} .toc a{display:block;font-family:var(--font-code);font-size:12.5px;line-height:1.45;color:var(--muted);text-decoration:none;border-bottom:none;padding:6px 0 6px 13px;border-left:2px solid var(--border)} /* nested h3 entries: indent the TEXT, not the rail — every link keeps the same left edge so the rail is one clean continuous line (matches the reference). */ .toc ul ul a{padding-left:26px} .toc a:hover{color:var(--text)} .toc a.active{color:var(--link);border-left-color:var(--link)} /* ============================================================ chrome — eyebrow, pixel wordmark, mode toggle ============================================================ */ .eyebrow{font-family:var(--font-code);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--green)} .wordmark{font-family:var(--font-pixel);font-size:13px;line-height:1;color:var(--heading)} .wordmark b{color:var(--green);font-weight:400} .pixel-tag{font-family:var(--font-pixel);font-size:10px;color:var(--muted)} .accent-line{height:2px;background:linear-gradient(90deg,var(--green),var(--cyan))} /* skip link — off-screen until keyboard focus */ .skip-link{position:absolute;left:-9999px;top:0} .skip-link:focus{left:8px;top:8px;z-index:10;background:var(--surface);color:var(--link);font-family:var(--font-code);font-size:13px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm)} .mode-toggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden} .mode-toggle button{font-family:var(--font-code);font-size:12px;color:var(--muted);background:transparent;border:none;padding:7px 13px;cursor:pointer;min-height:40px} .mode-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--heading)} /* ============================================================ buttons ============================================================ */ .btn{font-family:var(--font-code);font-size:13px;border-radius:8px;padding:9px 16px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text)} .btn-primary{background:var(--green);color:#06120C;border-color:var(--green)} .btn-ghost{border-color:transparent;color:var(--link);text-decoration:underline} /* ============================================================ layout: guide template (toc rail + article) ============================================================ */ .layout{max-width:820px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:54px;padding:50px 28px 130px} /* TOC on the left (matches Telemetry Reading System.dc.html). DOM keeps the article first for reading/screen-reader order; grid placement moves the TOC visually into the left column. */ .layout.has-toc{max-width:1080px;grid-template-columns:200px minmax(0,1fr)} .layout.has-toc > .toc{grid-column:1;grid-row:1} .layout.has-toc > .article{grid-column:2;grid-row:1} /* Reading column: prose holds the ~680px measure (centered); code, figures, and tables break wider for room (GUIDELINES #2 — "evidence gets room, prose stays narrow"). */ .layout .article{margin:0;padding:0;max-width:none} .layout .article > .single-header, .layout .article > .article-end, .layout .prose > *{max-width:680px;margin-inline:auto} .layout .prose > .highlight, .layout .prose > figure, .layout .prose > .obs-fig, .layout .prose > table, .layout .prose > .table-wrap{max-width:none} .site-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:16px 28px;background:var(--bg);border-bottom:1px solid var(--border)} .site-top .spacer{flex:1} .site-meta{font-family:var(--font-code);font-size:11px;letter-spacing:.14em;color:var(--muted)} @media (max-width:820px){ .layout,.layout.has-toc{max-width:760px;grid-template-columns:1fr;gap:30px;padding:34px 22px 90px} .layout.has-toc > .toc,.layout.has-toc > .article{grid-column:auto;grid-row:auto} .toc{position:static} .title{font-size:28px} } /* ============================================================ diagram components — obs-* HTML/SVG shortcodes Ported from the legacy static/css/style.css (which the Telemetry chrome no longer loads) and rewired onto the tokens above, so every figure flips dark/light. Palette mapping from the old system: amber/brand → --green, klein-blue → --cyan, success → --green, danger family → --danger, Commit Mono → --font-code, Press Start 2P → --font-pixel. No hard-coded hex below this line — components read tokens only. ============================================================ */ /* shared figure wrapper + flat diagram card (green top accent) */ figure.diagram,figure.knt-fig{margin:38px 0 30px} figure.diagram figcaption,figure.knt-fig figcaption{font-family:var(--font-code);font-size:12px;line-height:1.45;color:var(--muted);margin-top:10px;padding-left:2px} .diag-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:var(--radius);padding:20px 20px 16px;overflow-x:auto} .diag-card > svg{min-width:640px} /* flow rows (reactive loop, before/after chains) */ .flow-row{display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:6px} .flow-version{font-family:var(--font-pixel);font-size:10px;letter-spacing:.08em;width:58px;flex-shrink:0;padding-top:1px} .flow-version.v1{color:var(--muted)} .flow-version.v2{color:var(--cyan)} .flow-box{font-family:var(--font-code);padding:6px 10px;font-size:12px;border:1px solid var(--border);background:var(--bg);white-space:nowrap} .flow-box.breach {border-color:var(--warn); color:var(--warn-lb); background:var(--warn-bg)} .flow-box.damage {border-color:var(--danger); color:var(--dgr-lb); background:var(--dgr-bg)} .flow-box.human {border-color:var(--border); color:var(--muted); background:var(--surface)} .flow-box.pattern{border-color:var(--cyan); color:var(--cyan); background:var(--surface)} .flow-box.predict{border-color:var(--cyan); color:var(--cyan); background:var(--surface)} .flow-box.prevent{border-color:var(--green); color:var(--green); background:var(--info-bg)} .flow-arrow{font-family:var(--font-code);font-size:14px;padding:0 4px;flex-shrink:0;color:var(--muted)} .flow-arrow.bad{color:var(--danger)} .flow-arrow.good{color:var(--green)} .flow-outcome{flex:1;text-align:right;font-family:var(--font-code);font-size:13px;font-weight:700;padding-left:13px;white-space:nowrap} .flow-outcome.bad{color:var(--danger)} .flow-outcome.good{color:var(--green)} .flow-divider{height:1px;background:var(--border);margin:19px 0} /* comparison / two-version tables (obs-comparison-table, obs-monitoring-shifts) */ .obs-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);font-size:14px} .obs-table th{background:var(--th);border:1px solid var(--tborder);padding:9px 14px;font-family:var(--font-code);font-size:11px;text-align:left;letter-spacing:.04em;color:var(--text)} .obs-table th:first-child{color:var(--muted);letter-spacing:.1em;text-transform:uppercase} .obs-table th.v1{color:var(--muted);border-bottom:2px solid var(--green)} .obs-table th.v2{color:var(--cyan);border-bottom:2px solid var(--cyan)} .obs-table td{border:1px solid var(--tborder);padding:8px 14px;font-size:13px;line-height:1.5;vertical-align:middle;color:var(--text)} .obs-table td:first-child,.obs-table tbody th[scope="row"]{font-family:var(--font-code);color:var(--muted);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;background:var(--th);text-align:left} .obs-table td.v1{color:var(--text)} .obs-table td.v2{color:var(--cyan)} /* insight callout (insight shortcode) */ .insight{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin:24px 0} .insight.lightbulb{border-left:3px solid var(--green)} .insight.bookmark{border-left:3px solid var(--cyan)} .insight-icon{flex-shrink:0;margin-top:3px;width:16px;height:16px} .insight.lightbulb .insight-icon{color:var(--green)} .insight.bookmark .insight-icon{color:var(--cyan)} .insight-body{font-family:var(--font-read);font-size:14.5px;line-height:1.66;color:var(--text)} .insight-body strong{display:block;font-weight:700;margin-bottom:4px} .insight.lightbulb .insight-body strong{color:var(--green)} .insight.bookmark .insight-body strong{color:var(--cyan)} .insight-body p{margin:0;color:var(--text)} /* ============================================================ site chrome — nav menu, homepage, listings, cards, tags, Q&A, subscribe, footer. Ported from the retired static/css/style.css onto the tokens above (via the legacy aliases) so every page flips dark/light. Reading pages use .layout/.article (above); these styles cover everything else. ============================================================ */ /* page container for non-reading pages */ .wrap{max-width:1100px;margin:0 auto;padding:46px 28px 96px} /* base lists inside reading/content flow (telemetry base omitted these) */ .article ul,.article ol,.prose ul,.prose ol{margin:14px 0 14px 1.4rem} .article li,.prose li{margin:4px 0} /* top-bar main menu (added to site-top.html) */ .top-nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .top-nav a{font-family:var(--font-code);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .top-nav a:hover,.top-nav a[aria-current="page"]{color:var(--cyan)} /* terminal identity strip (homepage hero line) */ .site-identity{display:flex;align-items:center;gap:.6rem;padding:.85rem 0;border-bottom:1px solid var(--border);font-size:.88rem;flex-wrap:wrap;row-gap:.25rem;font-family:var(--font-code)} .prompt{color:var(--green);flex-shrink:0;user-select:none} .cmd{color:var(--text)} .si-sep{color:var(--green);user-select:none;flex-shrink:0} .si-desc{color:var(--muted)} .cursor{display:inline-block;width:9px;height:1em;background:var(--green);vertical-align:text-bottom;animation:blink 1.1s step-end infinite;margin-left:2px} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} @media (prefers-reduced-motion:reduce){.cursor{animation:none;opacity:1}} /* two-column hero: featured + topics */ .hero-grid{display:grid;grid-template-columns:1fr 220px;gap:0 3.5rem;padding:2.8rem 0 3rem;border-bottom:1px solid var(--border);margin-bottom:3rem;align-items:start} .featured-article{display:block;padding-right:2rem;border-right:1px solid var(--border);text-decoration:none} .featured-article:hover .featured-title{color:var(--cyan)} .featured-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap} .featured-date{font-family:var(--font-code);font-size:.78rem;color:var(--muted);margin-left:auto} .featured-title{font-family:var(--font-display);font-size:1.6rem;font-weight:400;line-height:1.2;color:var(--heading);margin-bottom:1rem;letter-spacing:-.01em;text-transform:lowercase} .featured-excerpt{font-family:var(--font-read);font-size:.92rem;line-height:1.8;color:var(--muted);margin-bottom:1.4rem} .featured-cta{font-family:var(--font-code);font-size:.8rem;color:var(--green);text-transform:uppercase;letter-spacing:.1em} .hero-topics{padding-top:0} .topics-label{font-family:var(--font-pixel);font-size:.6rem;color:var(--green);text-transform:uppercase;letter-spacing:.18em;margin-bottom:.9rem;display:block} .topic-list{display:flex;flex-wrap:wrap;gap:.3rem} nav.topic-list{padding:0;justify-content:flex-start} .topic-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem;background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--border);text-decoration:none;transition:border-color .12s,background .12s;flex-basis:100%} .topic-row:hover{border-color:var(--green);border-left-color:var(--green);background:color-mix(in srgb,var(--green) 5%,transparent)} .topic-name{font-family:var(--font-code);font-size:.82rem;color:var(--text);padding-right:.3rem} .topic-row:hover .topic-name{color:var(--cyan)} .topic-badge{font-family:var(--font-pixel);font-size:.62rem;color:var(--muted);border:1px solid var(--border);padding:.22rem .42rem;line-height:1.4;background:var(--bg);flex-shrink:0} .topic-row:hover .topic-badge{border-color:var(--cyan);color:var(--cyan)} .topic-all{display:block;flex-basis:100%;margin-top:1rem;font-family:var(--font-code);font-size:.75rem;color:var(--muted);opacity:.7} .topic-all:hover{color:var(--cyan);opacity:1} /* section label + rule */ .section-head{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem} .section-label{font-family:var(--font-pixel);font-size:.63rem;color:var(--green);text-transform:uppercase;letter-spacing:.18em;white-space:nowrap} .section-rule{flex:1;height:1px;background:var(--border)} /* article feed (list/term) + cards (was .article — renamed .art-card to avoid colliding with the reading column .article) */ .feed{margin-bottom:4rem} .art-card{display:grid;grid-template-columns:2.8rem 1fr;gap:1rem;padding:1.6rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;text-decoration:none} .art-card:first-child{border-top:1px solid var(--border)} .art-card:hover{background:color-mix(in srgb,var(--cyan) 4%,transparent)} .art-num{font-family:var(--font-pixel);font-size:.63rem;color:var(--muted);padding-top:.4rem;line-height:1.8} .art-card:hover .art-num{color:var(--cyan)} .art-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem} .art-title{font-family:var(--font-display);font-size:1.15rem;font-weight:400;line-height:1.35;margin-bottom:.4rem;color:var(--heading);text-transform:lowercase} .art-card:hover .art-title{color:var(--cyan)} .art-excerpt{font-family:var(--font-read);font-size:.95rem;color:var(--text);line-height:1.7;margin-top:.5rem} /* ── M3 section listing ──────────────────────────────────────────────── */ /* page header */ .lhead{display:flex;align-items:flex-end;gap:16px;padding:40px 0 22px;border-bottom:1px solid var(--border);margin-bottom:26px} .lh-l{flex:1} .eyebrow{font-family:var(--font-code);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:11px} .lh-title{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.1;color:var(--heading);text-transform:lowercase;margin:0} .lh-sub{font-family:var(--font-read);font-size:15px;line-height:1.6;color:var(--text);max-width:60ch;margin:14px 0 0} .cnt{font-family:var(--font-code);font-size:11.5px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 12px;white-space:nowrap;flex-shrink:0} /* two-column split: hero (left) + list rail (right) */ .lst-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:34px} .lst-hero{display:flex;flex-direction:column;gap:15px;text-decoration:none} .herothumb{background:var(--fig-bg);background-image:var(--fig-grid);background-size:24px 24px;border:1px solid var(--fig-bd);border-radius:11px;padding:30px 24px} .herotitle{font-family:var(--font-display);font-size:23px;line-height:1.22;letter-spacing:-.01em;color:var(--heading);text-transform:lowercase;margin:0;font-weight:400} .lst-hero:hover .herotitle{color:var(--cyan)} .cc-dek{font-family:var(--font-read);font-size:14px;line-height:1.6;color:var(--muted);margin:0} .cc-meta{font-family:var(--font-code);font-size:11px;color:var(--muted)} /* list rail */ .lst-list{display:flex;flex-direction:column} .listlabel{font-family:var(--font-code);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 0 8px} .lst-row{display:grid;grid-template-columns:34px 1fr auto;gap:15px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--border);text-decoration:none} .lst-row:first-of-type{border-top:1px solid var(--border)} .lst-num{font-family:var(--font-display);font-size:17px;color:var(--num-idle);line-height:1.3} .lst-row:hover .lst-num{color:var(--cyan)} .lst-rcol{display:flex;flex-direction:column;gap:5px} .lst-rti{font-family:var(--font-read);font-size:15px;line-height:1.3;color:var(--heading);text-transform:lowercase} .lst-row:hover .lst-rti{color:var(--cyan)} .lst-rmeta{font-family:var(--font-code);font-size:10.5px;color:var(--muted);white-space:nowrap;align-self:center} @media(max-width:840px){ .lst-wrap{grid-template-columns:1fr;gap:26px} .lh-title{font-size:27px} .lhead{flex-wrap:wrap;align-items:flex-start} } /* ── M3 section listing ──────────────────────────────────────────────── */ /* content-type tags (palette constrained to tokens: identifiers=cyan, how-to=green, Q&A=neutral) */ .tag{font-family:var(--font-code);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cyan);border:1px solid var(--cyan);padding:.08rem .4rem;background:color-mix(in srgb,var(--cyan) 8%,transparent)} .tag.guide,.tag.trends,.tag.article{color:var(--cyan);border-color:var(--cyan)} .tag.howto{color:var(--green);border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,transparent)} .tag.qa{color:var(--muted);border-color:var(--border);background:var(--surface)} .read-time{font-family:var(--font-code);font-size:.75rem;color:var(--muted)} /* homepage "More" card grid */ .post-section{margin-bottom:4rem} .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;margin-top:1rem} .post-card{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.1rem 1rem;background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--border);text-decoration:none;transition:border-top-color .15s,background .12s} .post-card:hover{border-top-color:var(--green);background:color-mix(in srgb,var(--green) 4%,transparent)} .post-card .tag{align-self:flex-start} .post-card-title{font-family:var(--font-display);font-size:1rem;font-weight:400;line-height:1.3;color:var(--heading);text-transform:lowercase} .post-card:hover .post-card-title{color:var(--cyan)} .post-card .read-time{margin-top:auto} /* Q&A list */ .qa-section{margin-bottom:4rem;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--cyan);padding:1.6rem 2rem 1.8rem} .qa-list{display:flex;flex-direction:column} .qa-item{padding:1.4rem 0;border-bottom:1px solid var(--border)} .qa-item:first-child{border-top:1px solid var(--border)} .qa-q{font-family:var(--font-display);font-size:.95rem;margin-bottom:.4rem;display:flex;gap:.6rem;color:var(--heading)} .qa-q::before{content:'Q:';color:var(--green);font-family:var(--font-pixel);font-size:.63rem;padding-top:.35rem;flex-shrink:0} .qa-a{font-family:var(--font-read);font-size:.85rem;color:var(--muted);font-style:italic;padding-left:2.1rem;line-height:1.55} .qa-a::before{content:'A → ';color:var(--muted);font-style:normal} .ask-cta{margin-top:1.5rem;display:inline-block;font-family:var(--font-code);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);border:1px solid var(--green);padding:.5rem 1.1rem} .ask-cta:hover{background:var(--green);color:var(--bg)} /* tag cloud (taxonomy) */ .tags-section{margin-bottom:4rem} .tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .tag-pill{font-family:var(--font-code);font-size:.75rem;color:var(--muted);border:1px solid var(--border);padding:0 .9rem;text-transform:uppercase;letter-spacing:.09em;display:inline-flex;align-items:center;min-height:44px} .tag-pill::before{content:"#";color:var(--green);font-weight:700;margin-right:.15rem} .tag-pill:hover{color:var(--green);border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,transparent)} /* single-header (qa/single) + about page */ .single-header{margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)} .single-header h1{font-family:var(--font-display);font-size:1.9rem;font-weight:400;line-height:1.25;margin-bottom:.8rem;color:var(--heading);text-transform:lowercase} .about-content{font-family:var(--font-read);font-size:.95rem;line-height:1.75;color:var(--text)} .about-content p{margin-bottom:.8rem} .about-content strong{color:var(--heading)} .about-content a{color:var(--link);text-decoration:underline;text-underline-offset:2px} /* subscribe */ .subscribe-section{margin-bottom:4rem;border:1px solid var(--border);border-left:3px solid var(--green);padding:1.6rem 2rem;background:var(--surface)} .subscribe-label{font-family:var(--font-display);font-size:1.05rem;color:var(--heading);margin-bottom:.4rem;text-transform:lowercase} .subscribe-desc{font-family:var(--font-read);font-size:.9rem;color:var(--muted);margin-bottom:1rem;line-height:1.6} .subscribe-form{display:flex;gap:.6rem;flex-wrap:wrap} .subscribe-input{font-family:var(--font-code);font-size:.85rem;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:.55rem .9rem;flex:1;min-width:200px;outline:none} .subscribe-input::placeholder{color:var(--muted)} .subscribe-input:focus{border-color:var(--green)} .subscribe-btn{font-family:var(--font-code);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bg);background:var(--green);border:none;padding:.55rem 1.2rem;cursor:pointer;white-space:nowrap} .subscribe-btn:hover{background:var(--cyan)} .subscribe-msg{font-family:var(--font-code);font-size:.82rem;margin-top:.75rem;line-height:1.5} .subscribe-msg--success{color:var(--green)} .subscribe-msg--error{color:var(--danger)} .subscribe-msg--loading{color:var(--muted)} /* footer */ .site-footer{border-top:1px solid var(--border);padding:2.5rem 2rem;text-align:center} .foot-logo{font-family:var(--font-pixel);font-size:.65rem;color:var(--muted);margin-bottom:.8rem} .foot-logo .accent{color:var(--green)} .site-footer p{font-family:var(--font-code);font-size:.8rem;color:var(--muted)} .site-footer a{color:var(--cyan)} .site-footer a:hover{text-decoration:underline} @media (max-width:720px){ .hero-grid{grid-template-columns:1fr;gap:2rem 0;padding:1.8rem 0} .featured-article{padding-right:0;border-right:none;border-bottom:1px solid var(--border);padding-bottom:2rem} .featured-title{font-size:1.3rem} .wrap{padding:30px 20px 70px} .subscribe-form{flex-direction:column} .top-nav{gap:12px} } /* let the top bar wrap when the menu + meta + toggle don't fit one row */ .site-top{flex-wrap:wrap;row-gap:10px} /* quote_with_author shortcode */ .quote-with-author{margin:24px 0;border-left:3px solid var(--green);padding:4px 0 4px 1.2rem} .quote-with-author blockquote{border:none;padding:0;margin:0 0 .8rem;color:var(--text);font-style:italic;font-family:var(--font-read);font-size:.95rem;line-height:1.65} .quote-with-author blockquote p{margin:0} .quote-with-author blockquote p::before{content:'\201C';color:var(--green);font-style:normal} .quote-with-author blockquote p::after{content:'\201D';color:var(--green);font-style:normal} .quote-attribution{display:flex;align-items:center;gap:.7rem} .quote-avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);object-fit:cover;flex-shrink:0} .quote-avatar--pixel{width:64px;height:64px;border-radius:7px;object-fit:contain;background:var(--surface);padding:1px;image-rendering:pixelated;image-rendering:crisp-edges} .quote-avatar-initials{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-pixel);font-size:.6rem;color:var(--green);flex-shrink:0} .quote-name{display:block;font-family:var(--font-code);font-size:.8rem;font-weight:700;color:var(--green)} .quote-role{display:block;font-family:var(--font-code);font-size:.75rem;color:var(--muted)} /* ── Front page (layouts/index.html) — split hero + terminal feed ──────── Identity statement + CTA left; the latest pieces as shell output in a terminal window on the always-dark code well, so the feed reads the same in dark / light / calm. Collapses to one column < 820px. */ .front{max-width:1080px;margin:0 auto;padding:0 28px 90px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;min-height:62vh} .front-hero{display:flex;flex-direction:column;gap:18px;padding:48px 0} .landing-statement{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,5vw,46px);line-height:1.12;letter-spacing:-.02em;color:var(--heading);text-transform:lowercase;margin:0;max-width:18ch} .landing-statement b{color:var(--green);font-weight:400} .landing-lede{font-family:var(--font-read);font-size:var(--fs-lede);line-height:var(--lh-lede);letter-spacing:var(--read-track);color:var(--text);max-width:60ch;margin:0} .topics{display:flex;gap:8px;flex-wrap:wrap;margin:0} .topic-chip{font-family:var(--font-code);font-size:12px;color:var(--text);border:1px solid var(--border);border-radius:999px;padding:6px 13px} .topic-chip b{color:var(--cyan);font-weight:400} .landing-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0 0} .landing-cta .btn{text-decoration:none} .front-feed{padding:24px 0} .feedwin{background:var(--code-bg);border:1px solid var(--code-bd);border-radius:var(--radius);overflow:hidden} .feedhdr{font-family:var(--font-code);font-size:11.5px;color:var(--code-muted);padding:12px 15px;border-bottom:1px solid var(--code-bd)} .feedhdr .fp{color:var(--code-green)} .feedhdr .fa{color:var(--code-cyan)} .fcursor{display:inline-block;width:7px;height:13px;background:var(--code-green);vertical-align:-2px;margin-left:3px;animation:blink 1.1s step-end infinite} @media (prefers-reduced-motion:reduce){.fcursor{animation:none}} .trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:baseline;padding:10px 15px;border-bottom:1px solid var(--code-bd);text-decoration:none} .trow:last-child{border-bottom:none} .trow .tg2{font-family:var(--font-code);font-size:13px;width:15px;text-align:center;line-height:1} .trow .tt{font-family:var(--font-code);font-size:13px;color:var(--code-text)} .trow:hover .tt{color:var(--code-cyan)} .trow .tm{font-family:var(--font-code);font-size:10.5px;color:var(--code-muted);white-space:nowrap} .tp-trace{color:var(--cyan)}.tp-metric{color:var(--green)}.tp-prof{color:var(--warn)}.tp-log{color:var(--muted)}.tp-otel{color:var(--violet)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (max-width:820px){ .front{grid-template-columns:1fr;gap:26px;min-height:0} .front-hero{padding:36px 0 8px} .front-feed{padding:0 0 8px} } /* ── Reading-preferences panel (chrome) ─────────────────────────────── */ .pref-btn{font-family:var(--font-code);font-size:12px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 13px;cursor:pointer;transition:border-color .15s} .pref-btn:hover{border-color:var(--cyan)} .pref-btn b{color:var(--cyan);font-weight:400} .pref-panel{position:fixed;top:64px;right:24px;z-index:60;width:290px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)} .pref-panel[hidden]{display:none} .pref-panel h2{font-family:var(--font-code);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 13px} .pref-group{margin-bottom:16px} .pref-group > .pref-glabel{font-family:var(--font-code);font-size:11px;color:var(--heading);margin-bottom:9px} .pref-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden} .pref-seg button{flex:1;font-family:var(--font-code);font-size:11.5px;color:var(--muted);background:transparent;border:none;padding:8px 4px;cursor:pointer} .pref-seg button[aria-pressed="true"]{background:var(--bg);color:var(--heading)} .pref-row{display:flex;align-items:center;gap:11px;padding:9px 0;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;border-bottom:1px solid var(--border)} .pref-row:last-child{border-bottom:none} .pref-row .pref-l{flex:1} .pref-row .pref-l .pref-name{font-family:var(--font-code);font-size:12px;color:var(--text)} .pref-row .pref-l .pref-desc{font-family:var(--font-code);font-size:10px;color:var(--muted);margin-top:2px} .pref-sw{width:38px;height:21px;border-radius:999px;background:var(--border);border:1px solid var(--border);flex:none;position:relative;transition:background .15s} .pref-sw::after{content:"";position:absolute;top:1px;left:1px;width:17px;height:17px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s} .pref-row[aria-pressed="true"] .pref-sw{background:var(--green)} .pref-row[aria-pressed="true"] .pref-sw::after{transform:translateX(17px);background:#06120C} /* ── Permacomputing · Phase 2 — footprint badge + colophon ────────────── Terminal readouts that live on the always-dark code well, so the living-green eco signal reads identically in warm-paper AND soft-dark. footprint.js fills the real numbers via [data-footprint] + [data-fp-*]. */ .footprint{font-family:var(--font-code);font-size:12px;line-height:1.85;background:var(--code-bg);border:1px solid var(--code-bd);border-radius:var(--radius);padding:12px 14px;color:var(--code-text)} .footprint .fp-pr{color:var(--eco)} .footprint .fp-ar{color:var(--code-cyan)} .footprint .fp-hi{color:var(--code-hi)} .footprint .fp-eco{color:var(--eco)} .footprint .fp-status{color:var(--eco)} .footprint.over .fp-status{color:var(--danger)} .fp-bar{height:7px;border-radius:4px;background:rgba(127,176,105,.14);overflow:hidden;margin:8px 0 4px} .fp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--eco),var(--eco-bright));transition:width .4s ease} .footprint.over .fp-fill{background:linear-gradient(90deg,var(--danger),var(--warn))} .fp-note{font-family:var(--font-read);font-size:10.5px;color:var(--code-muted)} .fp-method{color:var(--code-cyan);text-decoration:none;border-bottom:1px solid transparent} .fp-method:hover{border-bottom-color:var(--code-cyan)} @media (prefers-reduced-motion:reduce){.fp-fill{transition:none}} /* In the site footer the badge stays compact and centered. */ footer .footprint{max-width:440px;margin:0 auto;text-align:left} .colophon{font-family:var(--font-code);font-size:12.5px;line-height:1.7;background:var(--code-bg);border:1px solid var(--code-bd);border-radius:var(--radius);padding:16px 18px;color:var(--code-text);max-width:var(--measure)} .colophon .co-cmd{color:var(--code-muted);margin-bottom:8px} .colophon .co-cmd b{color:var(--eco);font-weight:400} .colophon .co-row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:7px 0;border-bottom:1px solid var(--code-bd)} .colophon .co-row:last-child{border-bottom:none} .colophon .co-k{color:var(--code-muted)} .colophon .co-v{color:var(--code-hi)} .colophon .co-v .eco{color:var(--eco)} .colophon .co-v a{color:var(--code-cyan);text-decoration:none} .colophon .co-v a:hover{text-decoration:underline} /* ── Print: prepare for the worst — a copy that reads on paper, no power required ── */ @media print { :root { color-scheme: light; } html, body { background: #fff; } body { color: #111; font-size: 11pt; line-height: 1.5; } /* Drop interactive + navigational chrome. */ .site-top, .accent-line, .toc, .mode-toggle, .site-footer, .footprint, .ask-cta, .featured-cta { display: none !important; } /* Single-column, full-bleed article. */ .layout { display: block; } .article { max-width: none; width: auto; margin: 0; padding: 0; } /* Ink-economical type. */ h1, h2, h3, .h1, .h2, .h3, .title, .heading { color: #000; } a { color: #000; text-decoration: underline; } /* Preserve external link targets on paper. */ .article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #333; word-break: break-all; } /* Don't split figures, tables, or code across pages; keep headings with bodies. */ figure, table, pre, .callout, .insight-body, .obs-fig, .obs-table { page-break-inside: avoid; break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } /* Legible boxes without color fills. */ pre, code, .callout, table, th, td { border-color: #999 !important; background: transparent !important; color: #111 !important; } }