/* ============================================================
THE SIGNAL — Ink Archive on Blueprint Paper
Operator-grade aesthetic. No templates. No blur.
============================================================ */
/* --- Color Tokens --- */
:root {
/* Ink / Paper */
--bg: #070A12; /* ink navy */
--bg2: #05070D; /* deeper */
--panel: #0B0F1A; /* monolith slab */
--panel2: #0E1424; /* hover/raised */
--rule: #1A2338; /* grid/rules */
--rule2: #24304A; /* stronger rule */
/* Type */
--text: #E9EDF6; /* primary */
--muted: #AAB4C7; /* secondary */
--faint: #6E7891; /* tertiary */
/* Signals */
--active: #E8B86A; /* warm amber — overridden by WARM SIGNAL block */
--verified: #C7A35A; /* brass */
--danger: #E06565;
/* Density */
--r: 8px;
--p: 18px; /* panel padding */
--gap: 14px; /* vertical rhythm */
--lh: 1.25;
--page: 1200px; /* content max-width */
/* Aliases for base.css compatibility */
--text-base: 16px;
--space-16: 16px;
--space-4: 4px;
--radius-sm: 6px;
/* Aliases used by base.css */
--color-bg: var(--bg);
--color-text: var(--text);
--color-primary: var(--active);
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- Typography ---
Fonts are loaded from Google Fonts via in each HTML ,
not @import here. @import from inside a stylesheet creates a
critical-request chain (HTML -> style.css -> fonts) that blocks the
First Contentful Paint. The approach fetches fonts in
parallel with the stylesheet. */
:root {
--font-display: 'Fraunces', serif;
--font-body: 'IBM Plex Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
/* --- Reset --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(232, 184, 106, 0.15);
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px; /* Increased from 15px for better readability */
line-height: 1.6; /* Increased from 1.45 for better readability */
position: relative;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Mobile: Even larger for comfort */
@media (max-width: 768px) {
body {
font-size: 17px; /* iOS/Android comfort size */
line-height: 1.65;
}
}
/* Global Link Styling */
a {
color: var(--active);
text-decoration: none;
transition: color 180ms ease;
}
a:hover {
color: #F0CB89;
}
a:visited {
color: var(--active);
}
/* Blueprint grid + noise underlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 23px, var(--rule) 23px, var(--rule) 24px),
repeating-linear-gradient(90deg, transparent, transparent 23px, var(--rule) 23px, var(--rule) 24px),
radial-gradient(circle, rgba(232, 184, 106, 0.02) 1px, transparent 1px);
background-size: 24px 24px, 24px 24px, 50px 50px;
background-position: 0 0, 0 0, 0 0;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
main, header, footer, .site-header {
position: relative;
z-index: 1;
}
/* --- Typography Scales --- */
h1 {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--gap);
color: var(--text);
}
h2 {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
margin-bottom: var(--gap);
color: var(--text);
}
h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-bottom: calc(var(--gap) / 2);
color: var(--text);
}
p {
margin-bottom: var(--gap);
color: var(--muted);
}
/* --- Section Label --- */
.section-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: calc(var(--gap) / 2);
}
/* --- Header --- */
.site-header {
background: var(--panel);
border-bottom: 1px solid var(--rule);
padding: var(--p);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
gap: 12px;
}
.header-left a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text);
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
}
.logo {
width: 28px;
height: 28px;
stroke: currentColor;
stroke-width: 1.5;
color: var(--verified);
}
.header-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text);
}
.header-right {
display: flex;
align-items: center;
gap: 24px;
}
nav ul {
list-style: none;
display: flex;
gap: 24px;
}
nav a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 180ms ease;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
nav a:hover,
nav a.active {
color: var(--active);
}
button[data-theme-toggle] {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 12px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: color 180ms ease;
-webkit-tap-highlight-color: transparent;
}
button[data-theme-toggle]:hover {
color: var(--text);
}
.nav-toggle {
display: none;
background: none;
border: none;
color: var(--text);
cursor: pointer;
padding: 12px;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
/* Mobile nav */
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile browsers */
background: var(--panel);
z-index: 200;
flex-direction: column;
padding: var(--p);
gap: var(--gap);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-nav.active {
display: flex;
}
.mobile-nav-close {
background: none;
border: none;
color: var(--text);
cursor: pointer;
align-self: flex-end;
padding: 12px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.mobile-nav a {
color: var(--muted);
text-decoration: none;
padding: 16px 0;
border-bottom: 1px solid var(--rule);
font-size: 16px;
min-height: 44px;
display: flex;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.mobile-nav a.active {
color: var(--active);
}
/* --- Main Content --- */
main {
max-width: 1200px;
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
}
/* --- Hero Section --- */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--p);
margin-bottom: calc(var(--p) * 3);
padding-bottom: calc(var(--p) * 2);
border-bottom: 1px solid var(--rule);
}
.hero-inner {
display: contents;
}
.hero-left h1 {
margin-bottom: var(--gap);
}
.hero-left p {
max-width: 60ch;
color: var(--muted);
}
.hero-right {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.system-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.stat-item {
padding: var(--p);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
}
.stat-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 4px;
}
.stat-value {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--active);
}
/* --- Hero CTAs + proof stack --- */
.hero-left {
display: flex;
flex-direction: column;
}
.hero-overline {
margin-bottom: var(--gap);
}
.hero-lede {
max-width: 56ch;
margin-top: 12px;
color: var(--muted);
}
.hero-ctas {
display: flex;
flex-direction: column;
gap: var(--gap);
margin-top: calc(var(--p) * 1.5);
max-width: 480px;
}
.hero-subscribe {
display: flex;
gap: 8px;
}
.hero-subscribe input {
flex: 1;
padding: 14px 16px;
background: var(--panel);
border: 1px solid var(--rule2);
border-radius: var(--r);
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
min-height: 48px;
}
.hero-subscribe input:focus {
outline: none;
border-color: var(--active);
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
background: var(--active);
color: var(--bg);
border: none;
border-radius: var(--r);
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 180ms ease;
min-height: 48px;
white-space: nowrap;
}
.btn-primary:visited,
.btn-primary:link {
color: var(--bg);
}
.btn-primary:hover {
background: #F0CB89;
}
.btn-ghost {
padding: 12px 22px;
background: transparent;
color: var(--text);
border: 1px solid var(--rule2);
border-radius: var(--r);
font-family: var(--font-mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
min-height: 44px;
align-self: flex-start;
}
.btn-ghost:hover {
border-color: var(--active);
color: var(--active);
}
.hero-micro-copy {
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
letter-spacing: 0.03em;
margin-top: 4px;
}
.hero-proof-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.proof-item {
padding: calc(var(--p) * 1.1) var(--p);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
transition: border-color 180ms ease;
}
.proof-item:hover {
border-color: var(--rule2);
}
.proof-number {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 600;
color: var(--active);
line-height: 1;
margin-bottom: 6px;
}
.proof-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.4;
}
/* --- Trust strip between hero and Core Systems --- */
.trust-strip {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 1.25) var(--p);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.trust-strip .mono-label {
font-size: 10.5px;
color: var(--faint);
letter-spacing: 0.08em;
}
.trust-sep {
color: var(--rule2);
font-size: 12px;
}
/* Page hero CTA row (about page etc.) */
.page-hero-ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: calc(var(--p) * 1.5);
}
/* Hero mobile tightening */
@media (max-width: 768px) {
.hero-ctas {
max-width: 100%;
}
.hero-subscribe {
flex-direction: column;
gap: 10px;
}
.hero-proof-stack {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.proof-item {
padding: var(--p);
}
.proof-number {
font-size: clamp(1.75rem, 6vw, 2.25rem);
}
.trust-strip {
padding: var(--p);
gap: 8px;
}
.trust-strip .mono-label {
font-size: 9.5px;
}
.trust-sep {
display: none;
}
}
/* --- Comparison Grid (Infrastructure Gap) --- */
.comparison-section {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
}
.comparison-heading {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 600;
color: var(--text);
margin-bottom: calc(var(--p) * 1.5);
text-align: center;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--p);
}
.comparison-card {
padding: calc(var(--p) * 1.25);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
}
.comparison-card--strong {
border-color: var(--active);
background: var(--panel2);
}
.comparison-card-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 10px;
}
.comparison-card--strong .comparison-card-title {
color: var(--active);
}
.comparison-card-body {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
/* --- Feature Matrix (Intelligence Matrix) --- */
.feature-matrix-section {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
}
.feature-matrix {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--p);
}
.feature-matrix-card {
padding: calc(var(--p) * 1.25);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
transition: border-color 180ms ease;
}
.feature-matrix-card:hover {
border-color: var(--rule2);
}
.feature-matrix-icon {
color: var(--active);
margin-bottom: 12px;
}
.feature-matrix-icon svg {
display: inline;
}
.feature-matrix-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.feature-matrix-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
/* --- Engineering Pedigree (Builds page) --- */
.pedigree-section {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
border-bottom: 1px solid var(--rule);
}
.pedigree-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 600;
color: var(--text);
margin-bottom: calc(var(--p) * 1.5);
}
.pedigree-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: calc(var(--p) * 2);
align-items: start;
}
.pedigree-number {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 3.5rem);
font-weight: 700;
color: var(--active);
line-height: 1;
margin-bottom: 12px;
}
.pedigree-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.5;
}
.pedigree-desc p {
color: var(--muted);
line-height: 1.7;
margin-bottom: var(--gap);
}
.pedigree-desc strong {
color: var(--text);
}
.pedigree-stack {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pedigree-tag {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 12px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
color: var(--active);
}
/* --- Cathedral CTA (About page) --- */
.cathedral-cta {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 3) var(--p);
text-align: center;
border-bottom: 1px solid var(--rule);
}
.cathedral-cta-inner {
max-width: 640px;
margin: 0 auto;
}
.cathedral-cta-heading {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
line-height: 1.1;
}
.cathedral-cta-lede {
font-size: 18px;
color: var(--muted);
line-height: 1.6;
margin-bottom: calc(var(--p) * 1.5);
}
/* --- Responsive: new sections --- */
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
gap: calc(var(--gap) * 1.5);
}
.feature-matrix {
grid-template-columns: 1fr;
}
.pedigree-grid {
grid-template-columns: 1fr;
gap: var(--p);
}
.pedigree-number {
font-size: clamp(2rem, 8vw, 2.75rem);
}
.cathedral-cta {
padding: calc(var(--p) * 2) var(--p);
}
.cathedral-cta-heading {
font-size: clamp(1.75rem, 6vw, 2.25rem);
}
}
/* --- Section Figures (branded image placement) --- */
.section-figure {
margin: 0 0 calc(var(--p) * 1.5);
padding: 0;
}
.section-image {
width: 100%;
height: auto;
border-radius: var(--r);
border: 1px solid var(--rule);
}
.section-figure figcaption {
margin-top: 10px;
}
@media (max-width: 768px) {
.section-image {
border-radius: calc(var(--r) / 2);
}
}
/* --- Video Embeds --- */
.video-embed {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--rule);
background: var(--panel);
margin-bottom: calc(var(--p) * 1.5);
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.video-embed--featured {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.video-embed--inline {
max-width: 560px;
}
/* Video library grid */
.video-library {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: var(--p);
}
.video-card {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
overflow: hidden;
transition: border-color 180ms ease, transform 180ms ease;
}
.video-card:hover {
border-color: var(--active);
transform: translateY(-2px);
}
.video-card .video-embed {
border: none;
border-radius: 0;
margin-bottom: 0;
}
.video-card-body {
padding: var(--p);
}
.video-card-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.video-card-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
@media (max-width: 768px) {
.video-embed--featured,
.video-embed--inline {
max-width: 100%;
}
.video-grid {
grid-template-columns: 1fr;
}
}
/* Video planned series + stack */
.video-section-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--active);
margin-bottom: 16px;
}
.video-series-section {
max-width: var(--page);
margin: 0 auto;
padding: 56px var(--p) 48px;
border-bottom: 1px solid var(--rule);
}
.video-series-intro {
font-size: 15px;
color: var(--muted);
max-width: 640px;
margin-bottom: 32px;
line-height: 1.7;
}
.video-series-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.video-series-card {
padding: 24px;
border: 1px solid var(--rule);
background: var(--panel);
position: relative;
}
.video-series-status {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--active);
margin-bottom: 8px;
}
.video-series-number {
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
margin-bottom: 6px;
}
.video-series-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 10px;
}
.video-series-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
margin-bottom: 16px;
}
.video-series-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.video-series-episodes {
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
}
.video-stack-section {
max-width: var(--page);
margin: 0 auto;
padding: 56px var(--p) 48px;
}
.video-stack-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 8px;
}
.video-stack-item {
padding: 18px 20px;
border: 1px solid var(--rule);
background: var(--panel);
}
.video-stack-category {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 6px;
}
.video-stack-tool {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.video-stack-note {
font-size: 12px;
color: var(--muted);
}
/* --- Dossier Cards --- */
.dossier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: var(--p);
margin-bottom: calc(var(--p) * 2);
}
.dossier-card,
.build-card {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
overflow: hidden;
transition: all 180ms ease;
text-decoration: none;
color: inherit;
display: block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dossier-card:hover,
.build-card:hover,
.dossier-card:active,
.build-card:active {
background: var(--panel2);
border-color: var(--active);
transform: translateY(-2px);
}
.dossier-header,
.build-card-header {
padding: var(--p);
border-bottom: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.dossier-number {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
color: var(--faint);
text-transform: uppercase;
}
.dossier-title,
.build-card-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--text);
}
.status-chip,
.build-card-status {
padding: 4px 12px;
background: transparent;
border: 1px solid var(--rule2);
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--verified);
}
.status-chip.active,
.build-card-status.active {
background: var(--active);
color: var(--bg);
border-color: var(--active);
}
.dossier-body {
padding: var(--p);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--p);
}
.dossier-section {
display: flex;
flex-direction: column;
gap: calc(var(--gap) / 2);
}
.dossier-section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
}
.dossier-section-content {
font-size: 14px;
line-height: 1.4;
color: var(--muted);
}
.dossier-footer {
padding: var(--p);
border-top: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 12px;
color: var(--faint);
font-style: italic;
}
/* --- Margin Log --- */
.margin-log {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
padding: var(--p);
max-height: 240px;
overflow-y: auto;
margin-top: calc(var(--p) * 2);
}
.margin-log-entry {
font-family: var(--font-mono);
font-size: 12px;
color: var(--faint);
padding: 6px 0;
border-bottom: 1px solid var(--rule);
line-height: 1.4;
}
.margin-log-entry:last-child {
border-bottom: none;
}
.margin-log-entry .timestamp {
color: var(--active);
font-weight: 600;
}
/* --- Archive Cards --- */
.archive-section {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
}
.archive-inner {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.archive-card {
display: block;
padding: calc(var(--p) * 1.5);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
color: var(--text);
text-decoration: none;
-webkit-text-decoration: none;
transition: all 180ms ease;
}
.archive-card,
.archive-card:link,
.archive-card:visited,
.archive-card:hover,
.archive-card:active,
.archive-card:focus {
color: var(--text);
text-decoration: none;
-webkit-text-decoration: none;
}
/* Kill Safari's block-anchor underline propagation to descendants. */
.archive-card * {
text-decoration: none;
-webkit-text-decoration: none;
}
.archive-card:hover {
border-color: var(--active);
background: var(--panel2);
transform: translateY(-2px);
}
.archive-card-week {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--active);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.archive-card-date {
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
margin-bottom: var(--gap);
}
.archive-card-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
line-height: 1.3;
}
.archive-card-quote {
font-family: var(--font-body);
font-size: 15px;
color: var(--muted);
font-style: italic;
margin-bottom: var(--gap);
}
.archive-card-cta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--active);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* --- Page Hero --- */
.page-hero {
padding: calc(var(--p) * 3) var(--p) calc(var(--p) * 2);
text-align: center;
border-bottom: 1px solid var(--rule);
}
.page-hero-inner {
max-width: 700px;
margin: 0 auto;
}
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
color: var(--text);
margin-bottom: var(--gap);
}
.page-hero p {
font-size: 17px;
color: var(--muted);
line-height: 1.7;
}
.accent-text {
color: var(--active);
}
/* --- Dim text --- */
.dim {
opacity: 0.5;
}
/* --- Share Strips --- */
.share-strip,
.dispatch-share-strip,
.reaction-share-strip {
display: flex;
align-items: center;
gap: var(--gap);
padding: var(--p) 0;
border-top: 1px solid var(--rule);
margin-top: var(--gap);
}
.share-strip-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.share-strip-buttons {
display: flex;
gap: 12px;
}
.share-strip-buttons a,
.share-strip-buttons button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--panel);
border: 1px solid var(--rule);
color: var(--muted);
text-decoration: none;
transition: all 180ms ease;
cursor: pointer;
}
.share-strip-buttons a:hover,
.share-strip-buttons button:hover {
border-color: var(--active);
color: var(--active);
background: var(--panel2);
}
/* --- Tweet Card --- */
.tweet-card {
display: block;
width: 100%;
padding: calc(var(--p) * 1.5);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
text-align: left;
cursor: pointer;
transition: all 180ms ease;
margin: var(--gap) 0;
font-family: inherit;
color: var(--text);
}
.tweet-card:hover {
border-color: var(--active);
background: var(--panel2);
}
.tweet-card blockquote {
margin: 0;
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
line-height: 1.5;
color: var(--text);
}
.tweet-card cite {
display: block;
margin-top: var(--gap);
font-family: var(--font-mono);
font-size: 12px;
font-style: normal;
color: var(--muted);
}
/* --- Mono Label --- */
.mono-label {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
/* --- Status Chips --- */
.status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 3px;
background: rgba(232, 184, 106, 0.1);
color: var(--active);
border: 1px solid rgba(232, 184, 106, 0.22);
}
.status-chip.active::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--active);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.3); }
}
/* --- Footer --- */
footer {
background: var(--panel);
border-top: 1px solid var(--rule);
padding: calc(var(--p) * 2) var(--p);
margin-top: calc(var(--p) * 3);
}
.site-footer {
background: var(--panel);
border-top: 1px solid var(--rule);
padding: calc(var(--p) * 2) var(--p);
margin-top: calc(var(--p) * 3);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--p);
}
.footer-col {
min-width: 0;
}
.footer-col h4 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
margin-bottom: calc(var(--gap) / 2);
color: var(--text);
}
.footer-col ul {
list-style: none;
}
.footer-col a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
display: block;
padding: 6px 0;
transition: color 180ms ease;
}
.footer-col a:hover {
color: var(--active);
}
.footer-bottom {
max-width: 1200px;
margin: calc(var(--p) * 2) auto 0;
padding-top: var(--p);
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--faint);
flex-wrap: wrap;
gap: var(--gap);
}
.footer-bottom-left {
display: flex;
gap: calc(var(--gap) * 2);
flex-wrap: wrap;
}
.netlify-badge {
display: flex;
align-items: center;
opacity: 0.7;
transition: opacity 180ms ease;
}
.netlify-badge:hover {
opacity: 1;
}
.netlify-badge img {
height: 20px;
width: auto;
}
/* --- Contact Button --- */
.contact-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--active);
color: var(--bg);
border: none;
border-radius: var(--r);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
margin-top: 8px;
min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
.contact-btn:hover {
background: #F0CB89;
transform: translateY(-2px);
}
.contact-btn svg {
width: 16px;
height: 16px;
}
.contact-email {
display: block;
margin-top: 12px;
color: var(--muted);
font-size: 13px;
font-family: var(--font-mono);
text-decoration: none;
transition: color 180ms ease;
}
.contact-email:hover {
color: var(--active);
}
/* --- Utility Classes --- */
.text-muted {
color: var(--muted);
}
.text-sm {
font-size: 14px;
}
.mb-3 {
margin-bottom: 12px;
}
/* --- Contact Modal --- */
.contact-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 300ms ease;
}
.contact-modal.active {
display: flex;
opacity: 1;
}
.contact-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(7, 10, 18, 0.9);
backdrop-filter: blur(4px);
cursor: pointer;
}
.contact-modal-content {
position: relative;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
padding: calc(var(--p) * 2);
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 300ms ease-out;
}
@keyframes modalSlideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.contact-modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 8px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: color 180ms ease;
-webkit-tap-highlight-color: transparent;
}
.contact-modal-close:hover {
color: var(--text);
}
.contact-modal-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.contact-modal-subtitle {
color: var(--muted);
font-size: 14px;
margin-bottom: 24px;
}
/* --- Contact Form --- */
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 13px;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.form-group input,
.form-group textarea {
padding: 12px 16px;
background: var(--bg2);
border: 1px solid var(--rule);
border-radius: var(--r);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
transition: border-color 180ms ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--active);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
.contact-form-footer {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.contact-submit-btn {
width: 100%;
padding: 14px 24px;
background: var(--active);
color: var(--bg);
border: none;
border-radius: var(--r);
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
position: relative;
min-height: 48px;
}
.contact-submit-btn:hover:not(:disabled) {
background: #F0CB89;
transform: translateY(-2px);
}
.contact-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.contact-submit-btn .submit-loading {
display: none;
}
.contact-submit-btn.loading .submit-text {
display: none;
}
.contact-submit-btn.loading .submit-loading {
display: inline;
}
.contact-response-time {
text-align: center;
font-size: 12px;
color: var(--faint);
font-style: italic;
}
/* --- Success/Error States --- */
.contact-success,
.contact-error {
text-align: center;
padding: 24px 0;
}
.success-icon {
color: var(--active);
margin: 0 auto 16px;
}
.error-icon {
color: var(--danger);
margin: 0 auto 16px;
}
.contact-success h4,
.contact-error h4 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
}
.contact-success p,
.contact-error p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.contact-close-btn,
.contact-retry-btn {
padding: 12px 32px;
background: var(--panel2);
color: var(--text);
border: 1px solid var(--rule);
border-radius: var(--r);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
min-height: 44px;
}
.contact-close-btn:hover,
.contact-retry-btn:hover {
background: var(--panel);
border-color: var(--active);
}
.contact-email-fallback {
display: inline-block;
margin-bottom: 16px;
color: var(--active);
font-family: var(--font-mono);
font-size: 14px;
text-decoration: none;
transition: color 180ms ease;
}
.contact-email-fallback:hover {
color: #F0CB89;
}
.verified-text {
color: var(--verified);
}
/* --- Animations --- */
@keyframes snap-route {
0% {
stroke-dashoffset: 100;
opacity: 0.3;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.snap-active {
animation: snap-route 600ms ease-out forwards;
}
/* --- Responsive --- */
/* Tablet and below */
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
}
}
/* Mobile and below */
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
nav {
display: none;
}
.header-right {
gap: 8px;
}
.site-header {
padding: 12px 16px;
}
main {
padding: calc(var(--p) * 2) 20px; /* Increased padding from 16px */
}
.hero {
grid-template-columns: 1fr;
gap: calc(var(--p) * 1.5);
}
.dossier-grid {
grid-template-columns: 1fr;
gap: calc(var(--gap) * 1.5);
}
.dossier-body {
grid-template-columns: 1fr;
}
.system-stats {
grid-template-columns: 1fr 1fr;
}
h1 {
font-size: 36px;
line-height: 1.2;
}
h2 {
font-size: 24px;
line-height: 1.3;
}
p {
font-size: 17px;
line-height: 1.7;
}
.footer-inner {
grid-template-columns: 1fr;
gap: calc(var(--gap) * 2);
}
.footer-bottom {
flex-direction: column;
gap: var(--gap);
text-align: center;
}
.footer-bottom-left {
flex-direction: column;
gap: var(--gap);
}
.contact-btn {
width: 100%;
justify-content: center;
min-height: 48px; /* Ensure good touch target */
font-size: 15px;
}
.contact-modal-content {
padding: var(--p);
margin: 0 16px; /* Increased from 12px */
}
.contact-modal-title {
font-size: 24px;
}
.subscribe-form {
flex-direction: column;
gap: 12px;
}
.subscribe-form button {
width: 100%;
}
}
/* Small phones */
@media (max-width: 480px) {
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
.system-stats {
grid-template-columns: 1fr;
}
.stat-value {
font-size: 20px;
}
main {
padding: calc(var(--p) * 1.5) 16px;
}
}
/* Touch Device Improvements */
@media (hover: none) and (pointer: coarse) {
/* Ensure all interactive elements are at least 44x44px */
button,
a,
input[type="submit"],
input[type="button"],
.nav-toggle,
[data-theme-toggle],
.contact-btn,
.dossier-card {
min-height: 44px;
min-width: 44px;
}
/* Better tap feedback */
button:active,
a:active,
.dossier-card:active,
.contact-btn:active {
opacity: 0.7;
transform: scale(0.98);
}
/* Remove hover states on touch devices */
button:hover,
a:hover {
opacity: 1;
}
/* Larger form inputs on touch devices */
input,
textarea,
select {
min-height: 48px;
font-size: 16px; /* Prevents zoom on iOS */
}
/* Better spacing for touch */
nav a {
padding: 12px 8px;
}
}
/* --- Subscribe + Form Utilities --- */
.subscribe-section {
max-width: var(--page);
margin: 0 auto;
padding: calc(var(--p) * 2) var(--p);
text-align: center;
}
.subscribe-form {
display: flex;
gap: 8px;
margin: var(--gap) 0;
max-width: 100%;
min-width: 0;
}
.subscribe-form input {
flex: 1;
min-width: 0;
padding: 12px 16px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
color: var(--text);
font-family: var(--font-body);
font-size: 16px; /* Prevent iOS auto-zoom */
}
.subscribe-form button {
padding: 12px 24px;
background: var(--active);
border: none;
border-radius: var(--r);
color: var(--bg);
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
}
.subscribe-form button:hover {
background: #F0CB89;
}
/* Subscribe section responsive */
@media (max-width: 768px) {
.subscribe-section {
padding: calc(var(--p) * 1.5) var(--p);
}
.subscribe-section h2 {
font-size: 22px;
}
.page-hero-ctas {
flex-direction: column;
align-items: center;
gap: 10px;
}
.page-hero-ctas .btn-primary,
.page-hero-ctas .btn-ghost {
width: 100%;
max-width: 320px;
text-align: center;
justify-content: center;
}
}
/* --- Print Stylesheet --- */
@media print {
/* Hide non-content elements */
.site-header,
.site-footer,
.mobile-nav,
.contact-modal,
.contact-btn,
.nav-toggle,
[data-theme-toggle],
.hero-subscribe,
.btn-ghost,
.subscribe-section,
.subscribe-form,
.trust-strip,
.margin-log,
.hero-scanline,
.grain,
.netlify-badge,
.reading-progress-bar,
.dispatch-share-strip,
.share-strip,
.hero-micro-copy {
display: none !important;
}
/* Reset dark theme for print */
:root {
--bg: #ffffff;
--bg2: #ffffff;
--panel: #f8f8f8;
--panel2: #f0f0f0;
--rule: #e0e0e0;
--rule2: #d0d0d0;
--text: #111111;
--muted: #555555;
--faint: #888888;
--active: #0a8f85;
--verified: #8a6e30;
}
body {
background: white;
color: black;
font-size: 12pt;
line-height: 1.5;
}
/* Ensure content is readable */
a { color: var(--active); text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); }
/* Single column layout */
.hero,
.dossier-grid {
grid-template-columns: 1fr;
}
/* Remove backgrounds on cards */
.dossier-card,
.archive-card,
.proof-item {
background: none;
border: 1px solid var(--rule);
break-inside: avoid;
}
/* Page margins */
@page {
margin: 2cm;
}
}
/* ═══════════════════════════════════════════════════════════════
SIGNAL NAV + READABILITY v2 — April 17, 2026
Goals: reduce nav cognitive load, raise text contrast,
add visual anchoring and active-state clarity.
Appended at EOF — overrides by specificity/cascade order.
═══════════════════════════════════════════════════════════════ */
/* -- Raise base text contrast -- */
:root {
--text: #F1F4FB; /* was #E9EDF6 — brighter primary */
--muted: #C2CAD9; /* was #AAB4C7 — stronger body */
--faint: #8A94AC; /* was #6E7891 — more legible meta */
--rule: #233052; /* was #1A2338 — visible borders */
--active: #E8B86A; /* warm amber */
--active-soft: rgba(232, 184, 106, 0.12);
}
p {
color: var(--muted);
font-size: 16.5px;
line-height: 1.72;
}
.dispatch-body p,
.article-body p {
font-size: 17px;
line-height: 1.78;
color: #D4DAE9;
}
/* -- Header: taller, denser padding, clearer boundary -- */
.site-header {
padding: 14px 24px;
background: rgba(7, 10, 18, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--rule);
box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.header-inner {
gap: 32px;
}
.header-right {
gap: 28px;
}
/* -- Nav: rebuilt for scannability -- */
nav ul.nav-links {
gap: 6px;
align-items: center;
}
nav ul.nav-links li { display: inline-flex; }
nav ul.nav-links a {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 12px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--muted);
transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
white-space: nowrap;
}
nav ul.nav-links a:hover {
color: var(--text);
background: rgba(255,255,255,0.04);
}
nav ul.nav-links a.active {
color: var(--active);
background: var(--active-soft);
}
nav ul.nav-links a.active::after {
content: '';
position: absolute;
left: 12px; right: 12px; bottom: 4px;
height: 1px;
background: var(--active);
opacity: 0.6;
}
/* Subscribe — give it pill treatment, separate from content nav */
nav ul.nav-links a[href*="subscribe"],
nav ul.nav-links a[href="#subscribe"] {
margin-left: 8px;
padding: 0 14px;
background: var(--active);
color: var(--bg);
font-weight: 600;
letter-spacing: 0.06em;
}
nav ul.nav-links a[href*="subscribe"]:hover,
nav ul.nav-links a[href="#subscribe"]:hover {
background: #F0CB89;
color: var(--bg);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(232, 184, 106, 0.3);
}
nav ul.nav-links a[href*="subscribe"]::after,
nav ul.nav-links a[href="#subscribe"]::after {
display: none;
}
/* -- Logo spacing + tighter header brand -- */
.header-left a { gap: 10px; }
.header-title {
font-size: 11.5px;
letter-spacing: 0.18em;
}
/* -- Mobile nav: bigger taps, better separators -- */
.mobile-nav a {
padding: 18px 24px;
font-size: 18px;
border-bottom: 1px solid var(--rule);
letter-spacing: 0.04em;
color: var(--text);
}
.mobile-nav a:hover,
.mobile-nav a.active {
background: var(--active-soft);
color: var(--active);
}
.mobile-nav a[href*="subscribe"],
.mobile-nav a[href="#subscribe"] {
margin: 20px 24px 0;
background: var(--active);
color: var(--bg);
border-radius: 8px;
text-align: center;
justify-content: center;
border: none;
font-weight: 600;
}
/* -- Current-page breadcrumb on subpages -- */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
max-width: var(--page);
margin: 0 auto;
padding: 20px 24px 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--faint);
text-transform: uppercase;
}
.breadcrumb a {
color: var(--faint);
transition: color 160ms ease;
}
.breadcrumb a:hover { color: var(--active); }
.breadcrumb .sep {
color: var(--rule2);
font-weight: 300;
}
.breadcrumb .current {
color: var(--text);
}
/* -- Section headings: clearer hierarchy -- */
h1 {
font-size: 56px;
letter-spacing: -0.025em;
line-height: 1.05;
}
h2 {
font-size: 34px;
letter-spacing: -0.015em;
}
h3 {
font-size: 22px;
color: var(--text);
}
/* -- Section labels: more visual weight -- */
.section-label {
font-size: 11px;
letter-spacing: 0.2em;
color: var(--faint);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: calc(var(--gap) * 2);
padding-bottom: 14px;
border-bottom: 1px solid var(--rule);
}
.section-label::before {
content: '';
width: 32px;
height: 1px;
background: var(--verified);
}
/* -- Cards: brighter hover, clearer states -- */
.dossier-card,
.build-card,
.archive-card {
transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid var(--rule);
}
.dossier-card:hover,
.build-card:hover,
.archive-card:hover {
border-color: var(--rule2);
background: var(--panel2);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
/* -- Hero: tighten visual weight -- */
.hero-subscribe input,
.hero-subscribe button {
height: 48px;
}
.btn-primary {
box-shadow: 0 4px 14px rgba(232, 184, 106, 0.25);
}
.btn-primary:hover {
box-shadow: 0 6px 20px rgba(232, 184, 106, 0.4);
transform: translateY(-1px);
}
/* -- Proof stack: readable alignment -- */
.proof-number {
font-family: var(--font-display);
font-size: 38px;
line-height: 1;
color: var(--text);
font-weight: 400;
letter-spacing: -0.02em;
}
.proof-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--faint);
text-transform: uppercase;
margin-top: 8px;
}
/* -- Footer: cleaner, less cramped -- */
footer.site-footer {
padding-top: 60px;
}
.footer-col h4 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--verified);
text-transform: uppercase;
margin-bottom: 18px;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col a {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.01em;
}
.footer-col a:hover { color: var(--active); }
/* -- Mobile tightening -- */
@media (max-width: 768px) {
h1 { font-size: 38px; }
h2 { font-size: 26px; }
.site-header { padding: 10px 16px; }
.breadcrumb { padding: 14px 16px 0; font-size: 10px; }
.proof-number { font-size: 32px; }
}
/* -- Focus states for accessibility -- */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--active);
outline-offset: 2px;
border-radius: 4px;
}
/* -- Skip-to-content for nav/kb users -- */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--active);
color: var(--bg);
padding: 8px 16px;
z-index: 9999;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.skip-link:focus { top: 0; }
/* ═══════════════════════════════════════════════════════════════
NAV VISUAL HIERARCHY — v2.1
De-emphasize utility nav (News, Videos) so primary content
nav (Archive, Fieldnotes, Builds) reads first.
═══════════════════════════════════════════════════════════════ */
/* Separator before utility items on desktop */
@media (min-width: 980px) {
nav ul.nav-links a[href*="/news/"],
nav ul.nav-links a[href*="/videos/"] {
font-size: 10.5px;
opacity: 0.75;
}
nav ul.nav-links a[href*="/news/"]:hover,
nav ul.nav-links a[href*="/videos/"]:hover {
opacity: 1;
}
/* Subtle divider before /news/ */
nav ul.nav-links li:has(a[href*="/news/"]) {
padding-left: 8px;
margin-left: 4px;
border-left: 1px solid var(--rule);
height: 24px;
align-items: center;
}
}
/* On tablet, collapse utility items */
@media (max-width: 1024px) and (min-width: 769px) {
nav ul.nav-links a[href*="/news/"] span.nav-full,
nav ul.nav-links a[href*="/videos/"] span.nav-full {
display: none;
}
}
/* Ensure hero CTA hierarchy reads: headline → subtitle → primary CTA → secondary CTA → proof */
.hero-micro-copy {
font-size: 12px;
color: var(--faint);
margin-top: 14px;
letter-spacing: 0.02em;
}
/* Trust strip: make more scannable */
.trust-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px;
padding: 20px 24px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin: 48px 0 32px;
background: rgba(14, 20, 36, 0.4);
}
.trust-strip .mono-label {
font-size: 10px;
letter-spacing: 0.16em;
color: var(--verified);
text-transform: uppercase;
}
.trust-strip .trust-sep {
color: var(--rule2);
opacity: 0.6;
}
/* Animated ticker strip */
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-wrap {
overflow: hidden;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin: 48px 0 32px;
background: rgba(14, 20, 36, 0.4);
padding: 14px 0;
}
.ticker-track {
display: inline-flex;
align-items: center;
gap: 0;
white-space: nowrap;
animation: ticker-scroll 22s linear infinite;
}
.ticker-item {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--verified, #22D3C5);
padding: 0 20px;
}
.ticker-sep {
color: var(--rule2);
opacity: 0.5;
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════
SIGNAL EDITORIAL LAYOUT — v3.0 · April 17, 2026
Full rebuild. Archive page + card typography.
Goal: make this read like a publication, not a terminal.
═══════════════════════════════════════════════════════════════════ */
/* Dispatch Preview Section */
.dispatch-preview-section {
max-width: var(--page);
margin: 0 auto;
padding: 64px var(--p) 48px;
border-bottom: 1px solid var(--rule);
}
.dispatch-preview-heading {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
margin: 8px 0 32px;
color: var(--fg);
}
.dispatch-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.dispatch-preview-card {
display: block;
padding: 24px;
border: 1px solid var(--rule);
background: var(--surface, rgba(255,255,255,0.02));
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.dispatch-preview-card:hover {
border-color: var(--active, #22D3C5);
background: rgba(34,211,197,0.04);
}
.dispatch-preview-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
color: var(--faint);
}
.dispatch-num {
color: var(--active, #22D3C5);
font-weight: 500;
}
.dispatch-preview-title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 10px;
color: var(--fg);
}
.dispatch-preview-quote {
font-size: 0.875rem;
color: var(--dim);
font-style: italic;
margin: 0 0 16px;
line-height: 1.6;
}
.dispatch-preview-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ── Arc Hero (Archive page) ───────────────────────────────────── */
.arc-hero {
padding: 72px 24px 48px;
max-width: 780px;
margin: 0 auto;
}
.arc-hero-kicker {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--verified);
text-transform: uppercase;
margin-bottom: 24px;
}
.arc-hero-title {
font-family: var(--font-display);
font-size: clamp(54px, 9vw, 96px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--text);
margin-bottom: 20px;
font-variation-settings: 'opsz' 144;
}
.arc-hero-lede {
font-family: var(--font-display);
font-size: 20px;
font-weight: 300;
font-style: italic;
line-height: 1.5;
color: #D4DAE9;
max-width: 620px;
margin-bottom: 28px;
}
.arc-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
color: var(--faint);
}
.arc-hero-meta strong {
color: var(--text);
font-weight: 500;
}
.arc-meta-item { white-space: nowrap; }
.arc-meta-sep {
color: var(--rule2);
opacity: 0.6;
}
/* ── Featured Card ─────────────────────────────────────────────── */
.arc-featured-wrap {
padding: 0 24px 64px;
max-width: 1100px;
margin: 0 auto;
}
.arc-featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.arc-featured:hover {
border-color: var(--active);
transform: translateY(-3px);
box-shadow: 0 20px 48px rgba(0,0,0,0.45),
0 2px 0 rgba(232, 184, 106, 0.15);
}
.arc-featured-media {
position: relative;
overflow: hidden;
background: var(--bg2);
min-height: 340px;
}
.arc-featured-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.9;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}
.arc-featured:hover .arc-featured-media img {
transform: scale(1.04);
opacity: 1;
}
.arc-featured-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(7,10,18,0) 40%, rgba(7,10,18,0.4) 100%);
pointer-events: none;
}
.arc-featured-body {
padding: 44px 40px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.arc-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
height: 26px;
padding: 0 12px;
background: var(--active-soft, rgba(232, 184, 106, 0.12));
color: var(--active);
border: 1px solid rgba(232, 184, 106, 0.3);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 22px;
}
.arc-featured-title {
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 46px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 18px;
font-variation-settings: 'opsz' 96;
}
.arc-featured-quote {
font-family: var(--font-display);
font-size: 18px;
font-weight: 300;
font-style: italic;
line-height: 1.5;
color: var(--muted);
margin-bottom: 22px;
padding-left: 16px;
border-left: 2px solid var(--verified);
}
.arc-featured-meta {
display: flex;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--faint);
margin-bottom: 18px;
}
.arc-featured-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--rule);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--active);
letter-spacing: 0.01em;
transition: gap 200ms ease;
}
.arc-featured:hover .arc-featured-cta { gap: 14px; }
/* ── Scannable List ────────────────────────────────────────────── */
.arc-list-wrap {
padding: 0 24px 72px;
max-width: 1100px;
margin: 0 auto;
}
.arc-list-header {
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
}
.arc-list-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.arc-list-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--faint);
text-transform: uppercase;
}
.arc-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0 24px;
}
.arc-filter-btn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 14px;
border: 1px solid var(--rule);
background: transparent;
color: var(--faint);
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
border-radius: 2px;
}
.arc-filter-btn:hover,
.arc-filter-btn.active {
border-color: var(--active, #22D3C5);
color: var(--active, #22D3C5);
background: rgba(34,211,197,0.05);
}
.arc-type-badge {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--active, #22D3C5);
opacity: 0.8;
}
.arc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.arc-item {
margin: 0;
padding: 0;
}
.arc-item-link {
display: grid;
grid-template-columns: 180px 1fr auto;
gap: 24px;
align-items: center;
padding: 20px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
text-decoration: none;
transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arc-item-link:hover {
background: var(--panel2);
border-color: var(--rule2);
transform: translateX(4px);
}
.arc-item-media {
width: 180px;
height: 108px;
border-radius: 6px;
overflow: hidden;
background: var(--bg2);
position: relative;
flex-shrink: 0;
}
.arc-item-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.85;
transition: opacity 200ms ease;
}
.arc-item-link:hover .arc-item-media img {
opacity: 1;
}
.arc-item-media--placeholder {
background: linear-gradient(135deg, var(--panel) 0%, var(--bg2) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule);
}
.arc-item-marker {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--faint);
opacity: 0.4;
}
.arc-item-body {
min-width: 0;
}
.arc-item-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
letter-spacing: 0.04em;
margin-bottom: 8px;
flex-wrap: wrap;
}
.arc-item-week {
color: var(--verified);
font-weight: 600;
letter-spacing: 0.08em;
}
.arc-item-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text);
margin: 0 0 8px;
transition: color 200ms ease;
}
.arc-item-link:hover .arc-item-title { color: var(--active); }
.arc-item-quote {
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
font-weight: 300;
line-height: 1.5;
color: var(--muted);
margin: 0 0 10px;
max-width: 55ch;
}
.arc-item-arrow {
font-size: 24px;
color: var(--faint);
transition: color 200ms ease, transform 200ms ease;
padding: 0 4px;
}
.arc-item-link:hover .arc-item-arrow {
color: var(--active);
transform: translateX(4px);
}
/* ── Tags: clean, legible, no mono-collision ───────────────────── */
.arc-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.arc-tag {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
background: transparent;
border: 1px solid var(--rule);
border-radius: 3px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--muted);
text-transform: none;
white-space: nowrap;
transition: all 180ms ease;
}
.arc-item-link:hover .arc-tag,
.arc-featured:hover .arc-tag {
border-color: var(--rule2);
color: var(--text);
}
/* ── Subscribe Section ─────────────────────────────────────────── */
.arc-subscribe {
padding: 88px 24px 120px;
max-width: 720px;
margin: 0 auto;
text-align: center;
position: relative;
}
.arc-subscribe::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--verified);
opacity: 0.4;
}
.arc-subscribe-kicker {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--verified);
text-transform: uppercase;
margin-bottom: 20px;
}
.arc-subscribe-title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 16px;
font-variation-settings: 'opsz' 96;
}
.arc-subscribe-lede {
font-family: var(--font-display);
font-size: 17px;
font-weight: 300;
font-style: italic;
line-height: 1.55;
color: var(--muted);
max-width: 540px;
margin: 0 auto 32px;
}
.arc-subscribe-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto 14px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 6px;
transition: border-color 200ms ease;
}
.arc-subscribe-form:focus-within {
border-color: var(--active);
box-shadow: 0 0 0 4px var(--active-soft);
}
.arc-subscribe-form input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--text);
}
.arc-subscribe-form input::placeholder {
color: var(--faint);
}
.arc-subscribe-form button {
height: 44px;
padding: 0 24px;
background: var(--active);
color: var(--bg);
border: none;
border-radius: 7px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: all 180ms ease;
}
.arc-subscribe-form button:hover {
background: #F0CB89;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(232, 184, 106, 0.35);
}
.arc-subscribe-fine {
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
letter-spacing: 0.04em;
margin: 0;
}
/* ── Footer subscribe link (replacement for duplicate form) ────── */
.footer-subscribe-link {
display: inline-block;
margin-top: 12px;
color: var(--active);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
transition: gap 200ms ease;
}
.footer-subscribe-link:hover {
color: #F0CB89;
}
/* ── Mobile breakpoints for archive ────────────────────────────── */
@media (max-width: 860px) {
.arc-featured {
grid-template-columns: 1fr;
}
.arc-featured-media {
min-height: 220px;
}
.arc-featured-body {
padding: 32px 24px;
}
.arc-item-link {
grid-template-columns: 100px 1fr;
gap: 16px;
padding: 16px;
}
.arc-item-media {
width: 100%;
height: 80px;
}
.arc-item-arrow {
display: none;
}
.arc-item-title {
font-size: 18px;
}
.arc-item-quote {
font-size: 14px;
}
.arc-hero {
padding: 48px 24px 40px;
}
.arc-hero-lede {
font-size: 17px;
}
.arc-list-header {
flex-direction: column;
gap: 6px;
}
.arc-subscribe {
padding: 64px 24px 80px;
}
.arc-subscribe-form {
flex-direction: column;
background: transparent;
border: none;
padding: 0;
gap: 12px;
}
.arc-subscribe-form input {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 14px 16px;
}
.arc-subscribe-form button {
height: 50px;
width: 100%;
}
}
@media (max-width: 480px) {
.arc-item-link {
grid-template-columns: 1fr;
}
.arc-item-media {
height: 140px;
}
}
/* ── Hide old page-hero if archive loads new arc-hero ──────────── */
.page-hero + .archive-section,
.page-hero:has(+ .arc-featured-wrap) {
display: none;
}
/* ═══════════════════════════════════════════════════════════════════
HOMEPAGE DOSSIER CARDS — v3.0 readability pass
Fixes the collision of "VISIT SITE →" + mono labels seen on mobile.
═══════════════════════════════════════════════════════════════════ */
.dossier-card,
.build-card {
padding: 24px;
border-radius: 10px;
background: var(--panel);
border: 1px solid var(--rule);
text-decoration: none;
display: flex;
flex-direction: column;
gap: 14px;
transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dossier-card:hover,
.build-card:hover {
background: var(--panel2);
border-color: var(--active);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.dossier-card .mono-label,
.build-card .mono-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--verified);
text-transform: uppercase;
font-weight: 500;
}
.dossier-card h3,
.build-card h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
line-height: 1.25;
}
.dossier-card p,
.build-card p {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.dossier-card .status,
.build-card .status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--active);
text-transform: uppercase;
}
.dossier-card .status::before,
.build-card .status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--active);
box-shadow: 0 0 0 3px var(--active-soft);
}
/* "Visit site →" and similar footer CTAs — clean up collisions */
.dossier-card a[href],
.dossier-footer,
.build-footer {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rule);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--active);
letter-spacing: 0.005em;
text-transform: none;
}
/* ═══════════════════════════════════════════════════════════════════
DISPATCH PAGE TYPOGRAPHY CLEANUP
Fix the collision of archive-card-cta + mono-label on old dispatches
═══════════════════════════════════════════════════════════════════ */
.archive-card-cta {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--active);
text-transform: none;
}
.mono-label.dim {
color: var(--faint);
font-weight: 400;
letter-spacing: 0.1em;
}
/* When dim label sits next to a CTA, give it space */
.archive-card-cta + .mono-label,
.mono-label + .archive-card-cta {
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid var(--rule);
}
/* ═══════════════════════════════════════════════════════════════════
HEADER v3 — More breathing room, clear typography
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
.site-header { padding: 16px 32px; }
.header-inner { gap: 48px; }
nav ul.nav-links a {
font-size: 13px;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.005em;
text-transform: none;
padding: 0 14px;
height: 36px;
}
/* Make active state more obvious */
nav ul.nav-links a.active {
background: var(--active-soft);
color: var(--active);
font-weight: 600;
}
nav ul.nav-links a.active::after {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════════
TYPE POLISH — variation axis on Fraunces for optical sizing
═══════════════════════════════════════════════════════════════════ */
h1 { font-variation-settings: 'opsz' 144; }
h2 { font-variation-settings: 'opsz' 96; }
h3 { font-variation-settings: 'opsz' 48; }
/* Increase paragraph readability one more notch on dispatch articles */
.dispatch-body p,
.article-body p {
max-width: 68ch;
}
.dispatch-body .lead-text,
.article-body .lead-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 300;
line-height: 1.5;
color: #E4E8F4;
margin-bottom: 28px;
letter-spacing: -0.005em;
}
/* ═══════════════════════════════════════════════════════════════════
WARM SIGNAL — May 2026
Visual identity reset. Goal: less "developer hub," more
"approachable systems log + reading desk." Stay dark, but warmer.
• Espresso/leather background instead of cold ink navy
• Cream text instead of clinical white
• Amber signal accent instead of neon teal
• Brass kept — already warm, pairs with amber
• Body type leans on Fraunces (display) for warmth, mono retreats
to timestamps/log labels only
• Blueprint grid dimmed; reads as paper grain, not engineering plans
═══════════════════════════════════════════════════════════════════ */
:root {
/* Paper / leather */
--bg: #14110D; /* warm espresso */
--bg2: #100E0A; /* deeper */
--panel: #1C1814; /* warm charcoal slab */
--panel2: #231E18; /* hover/raised */
--rule: #2E2823; /* warm rule line */
--rule2: #3C342B; /* stronger rule */
/* Type */
--text: #F2EAD9; /* warm cream */
--muted: #C9BBA1; /* warm beige body */
--faint: #8E7F69; /* taupe meta */
/* Signals */
--active: #E8B86A; /* amber — was neon teal */
--active-soft: rgba(232, 184, 106, 0.12);
--verified: #C7A35A; /* brass kept */
--danger: #D77A60; /* terracotta */
}
/* Tap highlight (replaces hardcoded teal on body) */
* { -webkit-tap-highlight-color: rgba(232, 184, 106, 0.15); }
/* ::selection — warm */
::selection {
background: rgba(232, 184, 106, 0.22);
color: var(--text);
}
/* Body — warmer rendering */
body {
background: var(--bg);
color: var(--text);
/* Subtle warm vignette to feel like a reading lamp on a desk */
background-image:
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232, 184, 106, 0.05), transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 110%, rgba(199, 163, 90, 0.04), transparent 70%);
background-attachment: fixed;
}
/* Blueprint grid → paper grain.
Drop opacity, warm the rule color, kill the teal radial. */
body::before {
background-image:
repeating-linear-gradient(0deg, transparent 0 23px, rgba(199, 163, 90, 0.08) 23px 24px),
repeating-linear-gradient(90deg, transparent 0 23px, rgba(199, 163, 90, 0.08) 23px 24px);
background-size: 24px 24px, 24px 24px;
opacity: 0.025;
}
/* Links — warmer hover */
a { color: var(--active); }
a:hover, a:visited:hover { color: #F0CB89; }
a:visited { color: var(--active); }
/* Headings — soften letter-spacing slightly for warmth */
h1 { letter-spacing: -0.018em; font-weight: 600; }
h2 { letter-spacing: -0.012em; font-weight: 600; }
h3 { letter-spacing: -0.008em; font-weight: 500; }
/* Body paragraphs — warm reading rhythm.
Blogs/log feel benefits from longer measure + relaxed leading. */
p {
color: var(--muted);
font-size: 16.5px;
line-height: 1.78;
}
.hero-lede,
.page-hero p,
.dispatch-body p,
.article-body p {
color: #DFD3BA;
line-height: 1.8;
}
/* Section labels — less terminal-prompt, more editorial folio */
.section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--verified);
opacity: 0.85;
text-transform: uppercase;
}
/* Mono labels — let them retreat unless they're explicitly highlighted */
.mono-label {
color: var(--faint);
font-weight: 500;
letter-spacing: 0.14em;
}
.mono-label.accent-text,
.accent-text { color: var(--active); }
/* Header — warm, less glassy-cold */
.site-header {
background: rgba(20, 17, 13, 0.88);
border-bottom: 1px solid var(--rule);
box-shadow: 0 1px 0 rgba(255, 240, 210, 0.025);
}
.logo { color: var(--verified); }
/* Header wordmark — keep "THE SIGNAL" mono caps but warmer color */
.header-title { color: var(--text); }
/* Nav active pill — amber soft */
nav ul.nav-links a:hover { background: rgba(255, 240, 210, 0.05); }
/* Subscribe pill — warm amber, soft hover glow */
nav ul.nav-links a[href*="subscribe"],
nav ul.nav-links a[href="#subscribe"] {
background: var(--active);
color: #1A1410;
}
nav ul.nav-links a[href*="subscribe"]:hover,
nav ul.nav-links a[href="#subscribe"]:hover {
background: #F0CB89;
color: #1A1410;
box-shadow: 0 4px 14px rgba(232, 184, 106, 0.28);
}
/* Hero — soften the "stats wall" so it reads as a quiet sidebar log
instead of a developer dashboard. */
.hero { border-bottom: 1px solid var(--rule); }
.hero-overline .mono-label,
.hero-overline .accent-text {
color: var(--verified);
letter-spacing: 0.18em;
font-weight: 500;
}
.hero-proof-stack { gap: 10px; }
.proof-item {
background: linear-gradient(180deg, var(--panel), var(--bg2));
border: 1px solid var(--rule);
padding: 18px 20px;
}
.proof-number {
color: var(--active);
font-weight: 500; /* lighter — feels like a serif numeral, not a HUD */
font-size: clamp(1.9rem, 4.5vw, 2.5rem);
}
.proof-label {
color: var(--muted);
font-family: var(--font-mono);
font-weight: 400;
letter-spacing: 0.05em;
font-size: 10.5px;
}
/* Trust strip — quieter, more like a footer rule than a banner */
.trust-strip {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: rgba(199, 163, 90, 0.02);
}
.trust-strip .mono-label { color: var(--faint); }
/* Buttons — primary uses warm amber + body font (not mono caps).
Approachable, not terminal. */
.btn-primary {
background: var(--active);
color: #1A1410;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
font-size: 14px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(232, 184, 106, 0.18);
}
.btn-primary:hover { background: #F0CB89; color: #1A1410; }
.btn-primary:link, .btn-primary:visited { color: #1A1410; }
.btn-ghost {
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
font-size: 14px;
color: var(--text);
border-color: var(--rule2);
border-radius: 10px;
}
.btn-ghost:hover { border-color: var(--active); color: var(--active); }
/* Hero subscribe input — warm */
.hero-subscribe input {
background: var(--panel);
border: 1px solid var(--rule2);
border-radius: 10px;
color: var(--text);
}
.hero-subscribe input::placeholder { color: var(--faint); }
.hero-subscribe input:focus { border-color: var(--active); }
/* Comparison cards — warm */
.comparison-card { background: var(--panel); border-color: var(--rule); }
.comparison-card--strong {
border-color: var(--active);
background: linear-gradient(180deg, rgba(232, 184, 106, 0.06), var(--panel2));
}
.comparison-card--strong .comparison-card-title { color: var(--active); }
/* Dossier + build cards — warm leather feel, softer hover */
.dossier-card,
.build-card {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 10px;
}
.dossier-card:hover,
.build-card:hover {
background: var(--panel2);
border-color: var(--active);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(232, 184, 106, 0.08);
}
.dossier-number,
.dossier-card .mono-label,
.build-card .mono-label {
color: var(--verified);
font-weight: 500;
letter-spacing: 0.14em;
}
.dossier-footer,
.archive-card-cta {
color: var(--active);
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.005em;
text-transform: none;
font-style: normal;
}
/* Status chip — warm amber instead of teal glow */
.status-chip {
background: rgba(232, 184, 106, 0.10);
color: var(--active);
border: 1px solid rgba(232, 184, 106, 0.22);
}
.status-chip.active {
background: var(--active);
color: #1A1410;
border-color: var(--active);
}
.status-chip.active::before { background: #1A1410; }
/* Margin log — feels like a journal sidebar instead of a console */
.margin-log {
background: linear-gradient(180deg, var(--panel), var(--bg2));
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
}
.margin-log-entry { color: var(--muted); }
.margin-log-entry .timestamp { color: var(--verified); }
/* Feature matrix cards */
.feature-matrix-card { background: var(--panel); border-color: var(--rule); }
.feature-matrix-icon { color: var(--verified); }
/* Pedigree number warmth */
.pedigree-number { color: var(--active); font-weight: 600; }
.pedigree-tag {
background: var(--panel);
border-color: var(--rule);
color: var(--verified);
}
/* Archive cards — magazine-feeling reading list */
.archive-card {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 10px;
}
.archive-card:hover {
background: var(--panel2);
border-color: var(--active);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.archive-card-week { color: var(--verified); letter-spacing: 0.14em; }
.archive-card-quote { color: var(--muted); font-family: var(--font-display); font-size: 16px; }
/* Tweet card — paper-feel pull quote */
.tweet-card {
background: linear-gradient(180deg, var(--panel), var(--bg2));
border-left: 3px solid var(--verified);
border-radius: 6px;
}
.tweet-card blockquote { color: var(--text); }
/* Share strip — warm */
.share-strip-buttons a,
.share-strip-buttons button {
background: var(--panel);
border-color: var(--rule);
color: var(--muted);
}
.share-strip-buttons a:hover,
.share-strip-buttons button:hover {
border-color: var(--active);
color: var(--active);
background: var(--panel2);
}
/* Footer — warm */
footer,
.site-footer {
background: var(--panel);
border-top: 1px solid var(--rule);
}
.footer-col h4 { color: var(--text); }
.footer-col a:hover { color: var(--active); }
.footer-bottom { color: var(--faint); }
/* Contact button — warm amber */
.contact-btn {
background: var(--active);
color: #1A1410;
font-weight: 600;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(232, 184, 106, 0.18);
}
.contact-btn:hover { background: #F0CB89; color: #1A1410; }
.contact-email:hover { color: var(--active); }
/* Lead text on dispatch articles — warm cream */
.dispatch-body .lead-text,
.article-body .lead-text {
color: #ECDFC4;
font-weight: 400;
}
/* :focus-visible — warm */
:focus-visible {
outline: 2px solid var(--active);
outline-offset: 3px;
}
/* Pulse dot — warmer rhythm */
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.25); }
}
/* Reduce harsh terminal feel: narrow letter-spacing on uppercase mono labels
used in long horizontal strips (trust strip, etc.) */
.trust-strip .mono-label,
.dossier-section-label,
.stat-label { letter-spacing: 0.1em; font-weight: 500; }
/* Mobile tightening — keep warm spacing comfortable */
@media (max-width: 768px) {
body {
background-image:
radial-gradient(ellipse 130% 50% at 50% -5%, rgba(232, 184, 106, 0.04), transparent 60%);
}
.proof-item { padding: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════
FIELDNOTE / DISPATCH ARTICLES — May 2026
Long-form reading layout. Inherits warm site tokens.
Includes subtle affiliate-link styling + FTC disclosure block.
═══════════════════════════════════════════════════════════════════ */
.fn-article {
max-width: 720px;
margin: 0 auto;
padding: clamp(40px, 7vw, 72px) 24px clamp(48px, 8vw, 80px);
color: var(--text);
}
/* Header / masthead */
.fn-article-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--verified);
text-decoration: none;
margin-bottom: 28px;
transition: color 180ms ease;
}
.fn-article-back:hover { color: var(--active); }
.fn-article-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 16px;
}
.fn-article h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 5.5vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 22px;
font-variation-settings: 'opsz' 144;
}
.fn-article-lede {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.1rem, 2.4vw, 1.4rem);
line-height: 1.55;
color: #DFD3BA;
font-style: italic;
margin: 0 0 28px;
max-width: 60ch;
}
.fn-article-byline {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
margin-bottom: 36px;
}
/* Affiliate disclosure — subtle, italic, sits just under the byline */
.fn-disclosure {
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
line-height: 1.55;
color: var(--faint);
padding: 12px 14px;
margin: 0 0 36px;
border-left: 2px solid var(--verified);
background: rgba(199, 163, 90, 0.04);
border-radius: 0 4px 4px 0;
}
.fn-disclosure strong {
font-style: normal;
font-weight: 500;
color: var(--muted);
}
/* Body prose — generous reading rhythm */
.fn-article-body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.78;
color: #DFD3BA;
}
.fn-article-body > * + * { margin-top: 22px; }
.fn-article-body p {
font-size: 17px;
line-height: 1.78;
color: #DFD3BA;
max-width: 65ch;
}
.fn-article-body p strong {
color: var(--text);
font-weight: 600;
}
.fn-article-body h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.4rem, 3vw, 1.85rem);
letter-spacing: -0.012em;
color: var(--text);
margin: 56px 0 8px;
line-height: 1.2;
font-variation-settings: 'opsz' 96;
}
.fn-article-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.15rem, 2.4vw, 1.4rem);
color: var(--text);
margin: 40px 0 4px;
line-height: 1.3;
}
.fn-article-body blockquote {
margin: 36px 0;
padding: 6px 0 6px 22px;
border-left: 3px solid var(--verified);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: var(--text);
max-width: 60ch;
}
.fn-article-body ul,
.fn-article-body ol {
padding-left: 22px;
max-width: 64ch;
}
.fn-article-body li {
margin-bottom: 10px;
line-height: 1.7;
color: #DFD3BA;
}
.fn-article-body li::marker { color: var(--verified); }
.fn-article-body code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--panel);
padding: 2px 6px;
border-radius: 3px;
color: var(--active);
border: 1px solid var(--rule);
}
.fn-article-body pre {
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 6px;
padding: 18px 20px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13.5px;
line-height: 1.6;
margin: 28px 0;
color: var(--text);
}
.fn-article-body pre code {
background: transparent;
border: none;
padding: 0;
color: inherit;
}
.fn-article-body hr {
border: none;
border-top: 1px solid var(--rule);
margin: 48px 0;
}
/* Inline article link — warm underline */
.fn-article-body a:not(.aff) {
color: var(--active);
text-decoration: underline;
text-decoration-color: rgba(232, 184, 106, 0.4);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color 180ms ease, color 180ms ease;
}
.fn-article-body a:not(.aff):hover {
text-decoration-color: var(--active);
color: #F0CB89;
}
/* Affiliate link — same warm color, but with a small ↗ marker so
readers can spot a partner link without it feeling like a banner.
Uses rel="sponsored nofollow noopener" for FTC compliance. */
.fn-article-body a.aff {
color: var(--active);
text-decoration: underline;
text-decoration-color: rgba(232, 184, 106, 0.4);
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color 180ms ease, color 180ms ease;
}
.fn-article-body a.aff::after {
content: '↗';
display: inline-block;
font-size: 0.78em;
color: var(--verified);
margin-left: 2px;
opacity: 0.7;
transform: translateY(-1px);
}
.fn-article-body a.aff:hover {
text-decoration-color: var(--active);
color: #F0CB89;
}
/* Pull-quote / tweet-style block embedded mid-article */
.fn-pullquote {
margin: 48px 0;
padding: 24px 26px;
background: linear-gradient(180deg, var(--panel), var(--bg2));
border: 1px solid var(--rule);
border-left: 3px solid var(--verified);
border-radius: 0 8px 8px 0;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
line-height: 1.45;
color: var(--text);
cursor: pointer;
transition: border-left-color 180ms ease;
}
.fn-pullquote:hover { border-left-color: var(--active); }
.fn-pullquote-cite {
display: block;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
}
/* Tools-mentioned footer (where affiliate stack lives in new posts) */
.fn-tools {
margin-top: 56px;
padding: 24px 26px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
}
.fn-tools-heading {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 14px;
}
.fn-tools-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.fn-tools-list li {
display: flex;
gap: 12px;
align-items: baseline;
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.5;
color: var(--muted);
}
.fn-tools-list li strong {
flex: 0 0 auto;
min-width: 110px;
font-family: var(--font-display);
font-weight: 600;
color: var(--text);
}
/* Article footer — back link + subscribe pill */
.fn-article-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 64px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.fn-article-footer .fn-article-back { margin: 0; }
.fn-article-footer-subscribe {
display: inline-flex;
align-items: center;
padding: 10px 18px;
background: var(--active);
color: #1A1410;
border-radius: 8px;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: background 180ms ease;
}
.fn-article-footer-subscribe:hover { background: #F0CB89; color: #1A1410; }
.fn-article-footer-subscribe:link,
.fn-article-footer-subscribe:visited { color: #1A1410; }
/* Mobile */
@media (max-width: 640px) {
.fn-article { padding: 32px 18px 48px; }
.fn-article-body { font-size: 16.5px; }
.fn-article-body p { font-size: 16.5px; }
.fn-article-body h2 { margin-top: 40px; }
.fn-tools { padding: 18px 18px; }
.fn-tools-list li { flex-direction: column; gap: 2px; }
.fn-tools-list li strong { min-width: 0; }
.fn-pullquote { padding: 18px 20px; }
.fn-article-footer { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════════
DISPATCH ARTICLES (archive/0NN.html) — May 2026
The weekly transmissions have richer editorial structure than
fieldnotes: section markers, status strips, sub-entries, callouts.
This block defines all of them in the warm palette so they stop
rendering with browser defaults.
═══════════════════════════════════════════════════════════════════ */
/* --- Hero --- */
.hero-overline {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 18px;
text-align: center;
}
.hero-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.6rem, 7vw, 4.2rem);
line-height: 1.05;
letter-spacing: -0.025em;
text-align: center;
margin: 0 auto 28px;
color: var(--text);
font-variation-settings: 'opsz' 144;
max-width: 16ch;
}
.hero-title-line {
display: block;
}
.hero-title-line.accent {
color: var(--active);
}
.hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 22px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 22px;
}
.hero-meta .mono-label { color: var(--faint); }
.hero-meta .mono-label:first-child { color: var(--verified); }
.hero-quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
line-height: 1.5;
text-align: center;
color: #DFD3BA;
max-width: 50ch;
margin: 0 auto 8px;
}
.hero-scanline {
display: none; /* drop the scanline — too "console" for the warm read */
}
/* --- Status bar (top-of-issue infra strip) --- */
.status-bar {
max-width: var(--page);
margin: 32px auto 0;
padding: 0 24px;
}
.status-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
padding: 0;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
}
.status-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
background: var(--panel);
text-align: left;
}
.status-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faint);
}
.status-value {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.4rem;
line-height: 1.1;
color: var(--text);
letter-spacing: -0.01em;
}
.status-value.gold,
.gold-text { color: var(--verified); }
.status-detail {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
}
/* --- Dispatch column --- */
.dispatch {
max-width: 720px;
margin: 56px auto 0;
padding: 0 24px;
}
.dispatch-inner { max-width: 100%; }
/* Section marker — Roman numeral + label, calm and editorial */
.section-marker {
display: flex;
align-items: baseline;
gap: 16px;
padding: 28px 0 18px;
border-top: 1px solid var(--rule);
margin-bottom: 18px;
}
.section-numeral {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.6rem;
color: var(--verified);
letter-spacing: 0;
}
.section-marker .section-label {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 0;
}
/* Dispatch header — small overline above each entry */
.dispatch-header {
margin-bottom: 14px;
}
.dispatch-header .mono-label,
.dispatch-header .mono-label.accent-text {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--verified);
}
/* Body prose — match .fn-article-body warmth */
.dispatch-body p {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.78;
color: #DFD3BA;
margin: 0 0 22px;
max-width: 65ch;
}
.dispatch-body p strong {
color: var(--text);
font-weight: 600;
}
.lead-text {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.15rem, 2.4vw, 1.4rem);
line-height: 1.55;
color: #ECDFC4;
font-style: italic;
margin: 0 0 28px;
max-width: 60ch;
}
.feature-drop-cap {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.78;
color: #DFD3BA;
}
.feature-drop-cap::first-letter {
float: left;
font-family: var(--font-display);
font-weight: 600;
font-size: 4rem;
line-height: 0.85;
color: var(--verified);
margin: 6px 12px 0 0;
padding: 0;
}
/* Section h2 — feature title */
.dispatch-body h2,
.feature-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.4rem, 3vw, 1.85rem);
letter-spacing: -0.012em;
color: var(--text);
margin: 36px 0 14px;
line-height: 1.22;
font-variation-settings: 'opsz' 96;
}
.dispatch-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.1rem, 2.4vw, 1.35rem);
color: var(--text);
margin: 28px 0 8px;
line-height: 1.3;
}
.dispatch-feature {
margin: 18px 0 28px;
}
.dispatch-entry {
margin: 28px 0;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.dispatch-entry:last-child { border-bottom: none; padding-bottom: 0; }
.dispatch-entry h2 {
margin: 6px 0 10px;
}
/* Sub-entries — secondary items grouped under a section */
.sub-entries {
display: grid;
gap: 24px;
margin: 28px 0;
}
.sub-entry {
padding: 20px 22px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 0 6px 6px 0;
}
.sub-entry h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
color: var(--text);
margin: 0 0 8px;
line-height: 1.3;
}
.sub-entry p {
font-size: 15.5px;
line-height: 1.65;
color: var(--muted);
margin: 0;
max-width: none;
}
.sub-entry .dispatch-header {
margin-bottom: 6px;
}
/* Quote blocks — paper-feel pull quotes between sections */
.quote-block {
max-width: 720px;
margin: 48px auto;
padding: 0 24px;
}
.quote-inner {
position: relative;
padding: 28px 28px 28px 60px;
background: linear-gradient(180deg, var(--panel), var(--bg2));
border: 1px solid var(--rule);
border-left: 3px solid var(--verified);
border-radius: 0 8px 8px 0;
}
.quote-mark {
position: absolute;
top: 22px;
left: 22px;
font-family: var(--font-mono);
font-size: 1.2rem;
font-weight: 500;
color: var(--verified);
opacity: 0.7;
}
.quote-inner blockquote { margin: 0; padding: 0; border: none; }
.quote-inner blockquote p {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: var(--text);
margin: 0 0 14px;
max-width: none;
}
.quote-inner cite {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--faint);
}
/* Furnace variant — forward-looking section, warmer glow */
.quote-block.furnace .quote-inner {
background: linear-gradient(180deg, rgba(232, 184, 106, 0.06), var(--panel2));
border-left-color: var(--active);
}
.furnace-label {
text-align: right;
margin-top: 10px;
padding-right: 8px;
}
.furnace-label .mono-label.gold-text {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--active);
}
.quote-block.closing .quote-inner {
border-left-color: var(--active);
}
/* --- Entity cards (017 — issue masthead block) --- */
.entity-card {
max-width: 720px;
margin: 32px auto;
padding: 0 24px;
}
.entity-inner {
padding: 22px 24px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
display: grid;
gap: 8px;
}
.entity-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--rule);
}
.entity-row:last-child { border-bottom: none; }
.entity-key {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faint);
}
.entity-val {
font-family: var(--font-body);
font-size: 15px;
color: var(--text);
}
.entity-val.gold-text { color: var(--verified); }
/* --- Metric row (key numbers) --- */
.metric-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
margin: 28px 0;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.metric-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 20px;
background: var(--panel);
}
.metric-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.8rem;
line-height: 1;
color: var(--active);
letter-spacing: -0.01em;
}
.metric-lbl {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--faint);
}
/* --- Build-log cards (017) --- */
.build-log-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
margin: 28px 0;
}
.build-log-card {
display: block;
padding: 18px 20px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 0 6px 6px 0;
text-decoration: none;
color: inherit;
transition: border-left-color 180ms ease, background 180ms ease;
}
.build-log-card:hover {
border-left-color: var(--active);
background: var(--panel2);
}
.build-log-card-label {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 6px;
}
.build-log-card-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--text);
margin: 0 0 6px;
line-height: 1.3;
}
.build-log-card-desc {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--muted);
margin: 0 0 8px;
}
.build-log-card-status {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--active);
}
/* --- Stack tags --- */
.stack-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--verified);
margin: 0 6px 6px 0;
}
/* --- Tweet card extras (in some dispatches) --- */
.tweet-card-quote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.5;
color: var(--text);
margin: 0 0 12px;
}
.tweet-card-attr {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--faint);
}
.tweet-card-footer {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
}
.tweet-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--active);
}
/* --- Reaction bar — hide for now; not wired to anything --- */
.reaction-bar { display: none; }
/* Article TOC was always empty — hide it */
.article-toc { display: none; }
/* Breadcrumb — a calm trail, not a notification */
.breadcrumb {
max-width: var(--page);
margin: 0 auto;
padding: 14px 24px 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--faint);
}
.breadcrumb a {
color: var(--muted);
text-decoration: none;
transition: color 180ms ease;
}
.breadcrumb a:hover { color: var(--active); }
.breadcrumb .sep { margin: 0 8px; color: var(--rule2); }
.breadcrumb .current { color: var(--text); }
/* Mobile tightening for dispatches */
@media (max-width: 640px) {
.status-inner { grid-template-columns: 1fr 1fr; }
.dispatch { padding: 0 18px; }
.quote-block { padding: 0 18px; }
.quote-inner { padding: 22px 22px 22px 50px; }
.quote-mark { left: 18px; top: 18px; }
.entity-row { grid-template-columns: 1fr; gap: 2px; }
.feature-drop-cap::first-letter { font-size: 3rem; }
.section-numeral { font-size: 1.4rem; }
}
/* ═══════════════════════════════════════════════════════════════════
ABOUT PAGE — May 2026
Defines all undefined classes used by /about/.
═══════════════════════════════════════════════════════════════════ */
.about-section {
padding: clamp(40px, 6vw, 80px) 0;
}
.about-section + .about-section { padding-top: 0; }
.about-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.about-block + .about-block {
margin-top: 56px;
padding-top: 48px;
border-top: 1px solid var(--rule);
}
.about-block .mono-label {
display: block;
margin-bottom: 14px;
}
.about-block h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 4vw, 2.2rem);
letter-spacing: -0.018em;
color: var(--text);
margin: 0 0 22px;
line-height: 1.15;
font-variation-settings: 'opsz' 96;
}
.about-block h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
color: var(--text);
margin: 36px 0 10px;
line-height: 1.25;
}
.about-block p {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.78;
color: #DFD3BA;
margin: 0 0 20px;
max-width: 65ch;
}
.about-block p strong { color: var(--text); font-weight: 600; }
.about-block p em { color: var(--text); font-style: italic; }
/* Cathedral phases — four-step progress strip */
.cathedral-phases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
margin: 36px 0;
}
.cathedral-phase {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 22px 14px;
background: var(--panel);
text-align: center;
transition: background 200ms ease;
}
.cathedral-phase.active {
background: linear-gradient(180deg, rgba(232, 184, 106, 0.08), var(--panel));
}
.cathedral-phase-numeral {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.6rem;
color: var(--faint);
line-height: 1;
}
.cathedral-phase.active .cathedral-phase-numeral {
color: var(--active);
}
.cathedral-phase-name {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.cathedral-phase.active .cathedral-phase-name {
color: var(--text);
}
/* Properties grid (1Commerce + verified client builds) */
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 18px 0 28px;
}
.property-card {
display: block;
padding: 20px 22px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 0 8px 8px 0;
text-decoration: none;
color: inherit;
transition: border-left-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.property-card:hover {
border-left-color: var(--active);
background: var(--panel2);
transform: translateY(-1px);
}
.property-card h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--text);
margin: 0 0 6px;
line-height: 1.3;
}
.property-card p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--muted);
margin: 0;
max-width: none;
}
/* Pricing grid (Operating Excellence Bundle) */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 28px 0;
}
.pricing-card {
padding: 26px 24px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
transition: border-color 180ms ease, transform 180ms ease;
}
.pricing-card:hover {
border-color: var(--rule2);
transform: translateY(-1px);
}
.pricing-card.featured {
border-color: var(--active);
background: linear-gradient(180deg, rgba(232, 184, 106, 0.06), var(--panel));
box-shadow: 0 0 0 1px rgba(232, 184, 106, 0.12);
}
.pricing-card-name {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 12px;
}
.pricing-card-price {
font-family: var(--font-display);
font-weight: 600;
font-size: 2.4rem;
line-height: 1;
color: var(--text);
letter-spacing: -0.02em;
margin-bottom: 14px;
font-variation-settings: 'opsz' 144;
}
.pricing-card.featured .pricing-card-price { color: var(--active); }
.pricing-card-desc {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--muted);
margin: 0;
max-width: none;
}
/* CTA block (Need a backend operator?) */
.cta-block {
padding: 36px 32px;
background: linear-gradient(180deg, var(--panel), var(--bg2));
border: 1px solid var(--rule);
border-left: 3px solid var(--verified);
border-radius: 0 10px 10px 0;
text-align: left;
}
.cta-block h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.4rem, 3.5vw, 1.85rem);
color: var(--text);
margin: 0 0 12px;
line-height: 1.2;
}
.cta-block p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--muted);
margin: 0 0 22px;
max-width: 60ch;
}
.cta-block .mono-label {
display: block;
margin-bottom: 12px;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--active);
color: #1A1410;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 180ms ease;
}
.cta-button:hover { background: #F0CB89; color: #1A1410; }
.cta-button:link, .cta-button:visited { color: #1A1410; }
/* Subscribe section (about page bottom) */
.subscribe-section {
max-width: 600px;
margin: 0 auto;
padding: 56px 24px;
text-align: center;
}
.subscribe-section h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 3.5vw, 2rem);
color: var(--text);
margin: 0 0 12px;
letter-spacing: -0.015em;
}
.subscribe-section p {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.65;
color: var(--muted);
margin: 0 auto 20px;
max-width: 50ch;
}
.subscribe-section .subscribe-form {
display: flex;
gap: 8px;
max-width: 440px;
margin: 0 auto;
}
.subscribe-section .subscribe-form input {
flex: 1;
padding: 13px 16px;
background: var(--bg);
border: 1px solid var(--rule2);
border-radius: 8px;
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
min-height: 46px;
}
.subscribe-section .subscribe-form input:focus { outline: none; border-color: var(--active); }
.subscribe-section .subscribe-form button {
padding: 13px 22px;
background: var(--active);
color: #1A1410;
border: none;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.subscribe-section .subscribe-form button:hover { background: #F0CB89; }
/* Page hero overline tweak — quieter "ABOUT" */
.page-hero .mono-label.accent-text {
color: var(--verified);
letter-spacing: 0.18em;
font-weight: 500;
}
/* Mobile */
@media (max-width: 640px) {
.cathedral-phases { grid-template-columns: repeat(2, 1fr); }
.cathedral-phases > .cathedral-phase:nth-child(2n) { border-right: none; }
.pricing-card { padding: 22px 20px; }
.pricing-card-price { font-size: 2rem; }
.cta-block { padding: 24px 22px; }
.subscribe-section .subscribe-form { flex-direction: column; gap: 10px; }
.subscribe-section .subscribe-form button { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
UTILITY HUB PAGES — May 2026
/builds/, /videos/, /reel-engine/ — define their unique classes
in the warm palette. /news/ already uses healthy tokens.
═══════════════════════════════════════════════════════════════════ */
/* ───── /builds/ ───── */
.builds-hero {
max-width: var(--page);
margin: 0 auto;
padding: clamp(48px, 7vw, 80px) 24px clamp(28px, 4vw, 48px);
text-align: center;
border-bottom: 1px solid var(--rule);
}
.builds-hero-inner {
max-width: 720px;
margin: 0 auto;
}
.builds-hero-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verified);
margin-bottom: 18px;
}
.builds-hero-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 6vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 22px;
font-variation-settings: 'opsz' 144;
}
.builds-hero-sub {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(1.05rem, 2.4vw, 1.3rem);
line-height: 1.55;
color: #DFD3BA;
margin: 0 auto;
max-width: 56ch;
}
.builds-section {
max-width: var(--page);
margin: 0 auto;
padding: clamp(40px, 6vw, 72px) 24px;
}
.builds-section-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--verified);
margin: 0 0 24px;
display: flex;
align-items: center;
gap: 14px;
}
.builds-section-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--rule);
}
.builds-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
/* Build cards (overrides earlier .build-card grid hover) */
.build-card-link {
display: block;
padding: 22px 24px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 0 8px 8px 0;
text-decoration: none;
color: inherit;
transition: border-left-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.build-card-link:hover {
border-left-color: var(--active);
background: var(--panel2);
transform: translateY(-1px);
}
.build-card-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.2rem;
color: var(--text);
margin: 0 0 6px;
line-height: 1.25;
}
.build-card-desc {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.6;
color: var(--muted);
margin: 0 0 12px;
}
.build-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 10px;
}
.build-card-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--active);
}
.build-card-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--active);
}
.build-card.build-card--showcase {
grid-column: 1 / -1;
background: linear-gradient(180deg, rgba(232, 184, 106, 0.05), var(--panel));
border-color: var(--rule2);
border-left: 3px solid var(--active);
}
.build-tech-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 9px;
background: rgba(232, 184, 106, 0.08);
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--verified);
margin: 0 6px 6px 0;
}
/* ───── /reel-engine/ ───── */
.reel-hero {
max-width: var(--page);
margin: 0 auto;
padding: clamp(56px, 8vw, 96px) 24px clamp(32px, 5vw, 56px);
text-align: center;
}
.reel-hero-inner {
max-width: 720px;
margin: 0 auto;
}
.reel-section {
max-width: var(--page);
margin: 0 auto;
padding: clamp(40px, 6vw, 80px) 24px;
}
.reel-section-inner {
max-width: 880px;
margin: 0 auto;
}
.reel-section h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 3.5vw, 2rem);
letter-spacing: -0.015em;
color: var(--text);
margin: 0 0 18px;
}
.reel-section p {
font-family: var(--font-body);
font-size: 16.5px;
line-height: 1.75;
color: #DFD3BA;
margin: 0 0 18px;
max-width: 65ch;
}
.reel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 28px 0;
}
.reel-card {
padding: 22px 24px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 0 8px 8px 0;
}
.reel-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--text);
margin: 0 0 8px;
}
.reel-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--muted);
margin: 0;
max-width: none;
}
.reel-pipeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin: 28px 0;
position: relative;
}
.step {
padding: 16px 18px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--muted);
position: relative;
}
.step strong {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
color: var(--text);
margin-bottom: 4px;
}
.arrow {
font-family: var(--font-mono);
color: var(--verified);
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
.reel-code {
font-family: var(--font-mono);
font-size: 13.5px;
background: var(--panel);
border: 1px solid var(--rule);
border-left: 2px solid var(--verified);
border-radius: 6px;
padding: 16px 18px;
color: var(--text);
overflow-x: auto;
margin: 22px 0;
line-height: 1.6;
}
.reel-stoic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: var(--text);
padding: 22px 24px;
background: linear-gradient(180deg, var(--panel), var(--bg2));
border-left: 3px solid var(--verified);
border-radius: 0 8px 8px 0;
margin: 32px 0;
}
/* Mobile */
@media (max-width: 640px) {
.builds-grid { gap: 12px; }
.build-card-link { padding: 18px 20px; }
.reel-pipeline { grid-template-columns: 1fr; }
.arrow { transform: rotate(90deg); }
}
/* ═══════════════════════════════════════════════════════════════════
LEGACY TOKEN COMPATIBILITY — May 2026
Many pages were authored against an older design-system token
vocabulary (--color-surface, --space-N, --text-xs, --color-gold...)
that no longer exists. Define them here as warm palette aliases so
every legacy reference resolves correctly without rewriting markup.
These are cascade-tail and will not override any explicit setting.
═══════════════════════════════════════════════════════════════════ */
:root {
/* Color aliases */
--color-bg: var(--bg);
--color-bg-2: var(--bg2);
--color-surface: var(--panel);
--color-surface-2: var(--panel2);
--color-surface-raised: var(--panel2);
--color-text: var(--text);
--color-text-muted: var(--muted);
--color-text-faint: var(--faint);
--color-border: var(--rule);
--color-divider: var(--rule);
--color-gold: var(--verified);
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Type scale */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 16px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
/* Radii */
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Layout */
--content-default: 1200px;
--content-narrow: 720px;
--content-wide: 1400px;
}