/* ============================================================
HERETICS HOUSE · DESIGN TOKENS
Single source of truth. Import FIRST in every property.
What property you are: set data-property on
data-property="heretics" → gold
data-property="arcology" → gold
data-property="mis" → red
data-property="atlas" → red
data-property="kumite" → red
data-property="netherops" → violet
data-property="opptycon" → violet
What mode you are: set data-theme on
data-theme="dark" (default)
data-theme="light"
Required font links:
============================================================ */
/* ---------- 1. FACES ---------- */
/*
Fraunces → Google Fonts (variable, loaded via )
JetBrains Mono → Google Fonts (loaded via )
TWK Everett → self-hosted, declared below
Bauhaus Quil is NOT a webfont. It lives only inside the SVG lockups
(wordmark-heretics.svg, wordmark-mis.svg, wordmark-netherops.svg, etc.)
as outlined paths.
*/
@font-face {
font-family: 'TWK Everett';
src: url('/fonts/TWKEverett-Light.otf') format('opentype');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'TWK Everett';
src: url('/fonts/TWKEverett-Regular.otf') format('opentype');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'TWK Everett';
src: url('/fonts/TWKEverett-Bold.otf') format('opentype');
font-weight: 700;
font-display: swap;
}
/* ---------- 2. FONT STACKS (semantic — never bind to face names directly) ---------- */
:root {
/* DISPLAY — Fraunces. ALL headings (H1–H4) + hero/display text. */
--display: 'Fraunces', Georgia, 'Times New Roman', serif;
/* BODY — TWK Everett. body, UI, lists, captions, lede. */
--sans: 'TWK Everett', 'Helvetica Neue', Arial, sans-serif;
/* MONO — JetBrains Mono. ALL numbers, eyebrows, labels, code. */
--mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
/* Aliases — backward compat. */
--body: var(--sans);
--font-display: var(--display);
--font-sans: var(--sans);
--font-mono: var(--mono);
}
/* ---------- 3. ACCENT COLOR (per property) ---------- */
:root {
--accent: #F5D610;
--accent-light: #A8840E;
--accent-ink: var(--accent);
}
[data-property="heretics"] { --accent: #F5D610; --accent-light: #A8840E; --flame-accent: #E2504A; }
[data-property="arcology"] { --accent: #F5D610; --accent-light: #A8840E; --flame-accent: #E2504A; }
[data-property="mis"] { --accent: #E2504A; --accent-light: #B0302A; --flame-accent: #F5D610; }
[data-property="atlas"] { --accent: #E2504A; --accent-light: #B0302A; --flame-accent: #F5D610; }
[data-property="kumite"] { --accent: #E2504A; --accent-light: #B0302A; --flame-accent: #F5D610; }
[data-property="netherops"] { --accent: #8C73FF; --accent-light: #5B3DF0; --flame-accent: #E2504A; }
[data-property="opptycon"] { --accent: #8C73FF; --accent-light: #5B3DF0; --flame-accent: #E2504A; }
/* ---------- 4. THEME (dark default, light override) ---------- */
:root,
[data-theme="dark"] {
--bg: #121214;
--surface: #1A1A1E;
--raised: #212126;
--ink: #ECEAE3;
--mut: #9A968C;
--faint: #6E6A62;
--line: rgba(255,255,255,.10);
--line-strong: rgba(255,255,255,.18);
--accent-ink: var(--accent);
}
[data-theme="light"] {
--bg: #F4F1EA;
--surface: #FBFAF6;
--raised: #FFFFFF;
--ink: #1A1A1E;
--mut: #57544D;
--faint: #8E8A80;
--line: rgba(20,18,14,.12);
--line-strong: rgba(20,18,14,.18);
--accent-ink: var(--accent-light);
}
/* ---------- 5. TYPE BASE ---------- */
body {
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern" 1;
}
/* ---------- 6. HEADINGS — ALL Fraunces, EXPLICIT opsz per level ----------
Fraunces variable axes:
opsz 9–144 (optical size — controls thick/thin contrast)
wght 100–900
SOFT 0–100 (0 = sharp terminals, 100 = rounded)
WONK 0–1 (0 = clean, 1 = quirky alternates)
We lock all four explicitly so render is identical across browsers/OSes.
*/
h1, h2, h3, h4,
.display {
font-family: var(--display);
font-style: normal;
font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
}
/* Heading weights — Fraunces ~375 across the board per the house brief.
The variable-axis "wght" sweet spot for editorial display headings
(lighter than Regular 400, heavier than Light 300). Visual hierarchy
stays driven by size, line-height, and letter-spacing — not by stacking
weight differences. */
h1 {
font-weight: 425;
font-size: clamp(36px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -.012em;
font-variation-settings: "opsz" 144, "wght" 425, "SOFT" 0, "WONK" 0;
}
h2 {
font-weight: 375;
font-size: clamp(26px, 3.5vw, 44px);
line-height: 1.08;
letter-spacing: -.015em;
font-variation-settings: "opsz" 96, "wght" 375, "SOFT" 0, "WONK" 0;
}
/* H3 / H4 stay heavier — they're small enough that 375 reads thin.
Hierarchy is: H1/H2 elegant light display, H3/H4 working-heading weight. */
h3 {
font-weight: 600;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.2;
letter-spacing: -.005em;
font-variation-settings: "opsz" 48, "wght" 600, "SOFT" 0, "WONK" 0;
}
h4 {
font-weight: 600;
font-size: 18px;
line-height: 1.3;
letter-spacing: 0;
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
}
/* Hero — opt in with .hero or .display for max-display Fraunces */
.display,
.hero h1,
.hero .display {
font-weight: 375;
font-variation-settings: "opsz" 144, "wght" 375, "SOFT" 0, "WONK" 0;
letter-spacing: -.025em;
line-height: .98;
}
/* Numeric inside a Fraunces headline:
Season 01
Swaps just the number to mono without breaking the line. */
.num-inline {
font-family: var(--mono);
font-weight: 600;
font-variation-settings: normal;
letter-spacing: 0;
}
/* ---------- 7. MONO USAGE — eyebrows, labels, numbers, code ---------- */
.eyebrow,
.label,
.num,
.metric,
.grade,
.rank,
.score,
.date,
code, kbd, samp {
font-family: var(--mono);
font-weight: 500;
letter-spacing: .04em;
font-feature-settings: "tnum" 1, "ss01" 1;
}
.eyebrow {
text-transform: uppercase;
font-size: 12px;
letter-spacing: .08em;
color: var(--mut);
}
/* ---------- 8. THE MARK ---------- */
.raven {
color: var(--accent-ink);
display: inline-block;
vertical-align: middle;
}
/* ---------- 9. LINKS — accent underline ---------- */
a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--accent-ink);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
a:hover { text-decoration-thickness: 2px; }
/* ---------- 10. SELECTION ---------- */
::selection { background: var(--accent-ink); color: var(--bg); }