/* ============================================================
CHROMIX — CANONICAL TYPE SYSTEM
The single source of truth for fonts, sizing, and copy styles.
Every page links this file and uses its tokens + classes, so
type stays identical across News, Studio, Daily, and Portfolio.
USE IT:
Then either add the .cx-* classes to elements, or reference the
--font / --type / --tx tokens in your own rules.
THE RULE: two typefaces, one job each.
• Syne → display headings + the wordmark (big, tight, black weight)
• Switzer → everything else: body, UI, and every uppercase label
Nothing else. If a label isn't Syne-display, it's Switzer.
============================================================ */
/* 1 ── FONTS ────────────────────────────────────────────────
(Loaded here so linking this one file loads the right fonts.
For best performance you may instead put these as tags
in each page's — but never change the families/weights.) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');
/* 2 ── TOKENS ───────────────────────────────────────────────
Reference these everywhere instead of hard-coding values.
Change a number here once, and every page updates. */
:root{
/* Families — identical fallback stack on every page */
--font-display:'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-text:'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Weights */
--w-regular:400;
--w-medium:500;
--w-semibold:600; /* the canonical label weight */
--w-bold:700;
--w-black:800; /* the canonical display weight */
/* Type scale — one ladder for the whole site.
--type-h1 is the "main title" size you approved
(Puzzles, built on color.): capped at 34px. */
--type-h1: clamp(20px, 3.6vw, 34px); /* main page title / hero H1 */
--type-h2: clamp(18px, 2.2vw, 24px); /* section heading */
--type-h3: 18px; /* sub-section heading */
--type-lead: 18px; /* standfirst / intro line */
--type-body: 16px; /* body copy */
--type-small: 14px; /* secondary / captions */
--type-label: 12px; /* eyebrow / kicker / label */
/* Tracking */
--track-tight:-0.03em; /* display headings */
--track-label: 0.16em; /* uppercase labels — the eyebrow track */
/* Line-heights */
--lh-display:1.05;
--lh-heading:1.15;
--lh-body:1.6;
/* Text-color ramp (neutral). Accent/brand hues live in the
color system, not here — this file governs COPY only. */
--tx-ink: #0C0C0C; /* primary text */
--tx-soft: #56544E; /* secondary / standfirst */
--tx-muted:#6b6b66; /* labels, meta, fine print */
}
/* 3 ── CANONICAL COPY CLASSES ───────────────────────────────
Add these to elements to get the exact, agreed styles. */
/* Main page title — the hero H1 (the approved 34px-max size) */
.cx-h1{
font-family:var(--font-display); font-weight:var(--w-black);
font-size:var(--type-h1); line-height:var(--lh-display);
letter-spacing:var(--track-tight); color:var(--tx-ink);
}
/* Section heading */
.cx-h2{
font-family:var(--font-display); font-weight:var(--w-black);
font-size:var(--type-h2); line-height:var(--lh-heading);
letter-spacing:-0.02em; color:var(--tx-ink);
}
/* Sub-section heading */
.cx-h3{
font-family:var(--font-display); font-weight:var(--w-bold);
font-size:var(--type-h3); line-height:1.2;
letter-spacing:-0.01em; color:var(--tx-ink);
}
/* EYEBROW / KICKER / LABEL — the canonical small uppercase label.
This is the exact style of:
"A PUZZLE STUDIO" · "THE PORTFOLIO"
"AN INDEPENDENT STUDIO · FOR BUILDERS & THINKERS"
Every kicker, section label, tag, and meta-label uses this. */
.cx-label{
font-family:var(--font-text); font-weight:var(--w-semibold);
font-size:var(--type-label); letter-spacing:var(--track-label);
text-transform:uppercase; color:var(--tx-muted); line-height:1.3;
}
/* Standfirst / intro line under a headline */
.cx-lead{
font-family:var(--font-text); font-weight:var(--w-regular);
font-size:var(--type-lead); line-height:1.5; color:var(--tx-soft);
}
/* Body copy */
.cx-body{
font-family:var(--font-text); font-weight:var(--w-regular);
font-size:var(--type-body); line-height:var(--lh-body); color:var(--tx-ink);
}
/* Secondary text / captions / small print */
.cx-meta{
font-family:var(--font-text); font-weight:var(--w-medium);
font-size:var(--type-small); color:var(--tx-muted); line-height:1.4;
}
/* ============================================================
NOTES
• Never put a label in Syne or a monospace font — labels are
always Switzer 600, 12px, .16em, UPPERCASE (.cx-label).
• Never let a container rule (e.g. ".hero p") override a label's
size. If you hit that, raise specificity (".hero .cx-label")
rather than changing the token — that specificity collision is
exactly what once inflated an eyebrow to 17px.
• The biggest title on any page is --type-h1 (34px cap). Don't
introduce larger one-off sizes; use the ladder above.
============================================================ */