/* ══════════════════════════════════════════════════════════════════════
THE DISPLAY FACE
──────────────────────────────────────────────────────────────────────
Junicode 2 — Open Font Licence, built for medievalists, and it carries
the Runic and Gothic blocks plus deep Latin diacritics that this corpus
actually needs. It is not a budget choice; it is the scholarly one.
TO INSTALL (two minutes, no cost):
1. github.com/psb1558/Junicode-font → Releases → download the
latest zip and take the WOFF2 files.
2. Put them in /fonts/ as:
Junicode-Regular.woff2 Junicode-Italic.woff2
Junicode-Bold.woff2 JunicodeVF-Roman.woff2 (optional)
3. Nothing else. The @font-face below picks them up; until then every
chamber falls back to the bookish stack and nothing breaks.
Reversing this is one line: delete 'OG Display' from --og-display.
══════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'OG Display';
src: url('/fonts/Junicode-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'OG Display';
src: url('/fonts/Junicode-Italic.woff2') format('woff2');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'OG Display';
src: url('/fonts/Junicode-Bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
/* ══════════════════════════════════════════════════════════════════════
OLD GODS · THE CATHEDRAL DESIGN LAYER
One file. Every chamber. The house style of the publishing house.
How it works
────────────
1. Every chamber links this file ONCE, in :
2. The chamber declares which local token names it uses, so the layer
can reach them:
3. Nothing else in the chamber changes. The layer overrides tokens,
neutralises the gradients, and imposes the material language.
The law it enforces (Project Lazarus §E)
────────────────────────────────────────
· Darkness is the default state. Light is SPENT, not applied.
· Every colour is a material under a named light source.
· No purple. No nebulae. No glow on text. No decorative gradient.
· One display face with real authority. One reading face. One instrument face.
· Nothing floats, pulses, or twinkles.
══════════════════════════════════════════════════════════════════════ */
:root {
/* ── materials, not moods ─────────────────────────────────────────── */
--og-void: #050404; /* unlit air */
--og-stone: #12100d; /* limestone in shadow */
--og-stone-lit: #1b1712; /* limestone catching a candle */
--og-oak: #241a12;
--og-iron: #2a2723;
--og-vellum: #e7dcc4; /* the reading surface */
--og-vellum-dim: #b8ab8e;
--og-ink: #0e0c0a;
--og-brass: #b08c46; /* the only metal */
--og-brass-lit: #dcbe7f;
--og-brass-deep: #7a6132;
/* ── the pigment box ──────────────────────────────────────────────────
Not a palette of moods — the pigments a manuscript illuminator
actually owned. Every semantic colour in every chamber (planetary,
elemental, sephirothic, chakric) is re-cut from these six, so meaning
survives and the rainbow does not. */
--og-vermilion: #9d4b34; /* fire · Mars · blood */
--og-verdigris: #5d6d51; /* earth · Saturn · leaf */
--og-pewter: #8b9098; /* air · Mercury · glass */
--og-azurite: #4b607a; /* water · Moon · the cold window */
--og-orpiment: #b98d3e; /* sun · Jupiter · wax */
--og-madder: #7b4a51; /* Venus · wine · the only warm red-violet */
/* ── light sources, by temperature ────────────────────────────────── */
--og-candle: #ffb066; /* 1900K */
--og-lamp: #ffcf9a; /* 2200K */
--og-window: #8fa6c4; /* 5600K — used sparingly, always cool */
/* ── rules and edges: hairlines, never boxes ──────────────────────── */
--og-rule: rgba(176,140,70,.15);
--og-rule-lit: rgba(176,140,70,.34);
--og-shadow: 0 22px 60px rgba(0,0,0,.72);
/* ── typography ───────────────────────────────────────────────────────
--og-display is the ONE licensed face slot. Until it is bought, this
stack falls back to the best bookish faces already on the machine —
deliberately NOT Cinzel, which is the slop tell of the category. */
--og-display: 'OG Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
--og-voice: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
--og-body: 'Iowan Old Style', Palatino, Georgia, serif;
--og-instrument: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
--og-kicker-track: .38em;
--og-ease: cubic-bezier(.22,.61,.36,1);
--og-slow: 1.1s;
}
/* ══ 1 · THE HOUSE RESET — applied to every chamber ══════════════════ */
body[data-og-skin] {
background: var(--og-void) !important;
color: var(--og-vellum-dim) !important;
font-family: var(--og-body) !important;
-webkit-font-smoothing: antialiased;
}
/* darkness is the default: kill the decorative gradient field */
body[data-og-skin] [class*="bg"],
body[data-og-skin] [class*="aura"],
body[data-og-skin] [class*="glow"],
body[data-og-skin] [class*="nebula"],
body[data-og-skin] [class*="star"] {
background-image: none !important;
filter: none !important;
opacity: .34 !important;
}
/* no glow on type, ever. light falls on surfaces, not on letters. */
body[data-og-skin] h1, body[data-og-skin] h2, body[data-og-skin] h3,
body[data-og-skin] .sec-title, body[data-og-skin] .title {
text-shadow: none !important;
font-family: var(--og-display) !important;
font-weight: 400 !important;
color: var(--og-vellum) !important;
letter-spacing: .012em;
line-height: 1.12;
}
body[data-og-skin] h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
/* the kicker: the smallest, most disciplined element in the house */
body[data-og-skin] .sec-kicker, body[data-og-skin] .kicker, body[data-og-skin] .eyebrow {
font-family: var(--og-body) !important;
font-size: 10px !important;
letter-spacing: var(--og-kicker-track) !important;
text-transform: uppercase !important;
color: var(--og-brass) !important;
text-shadow: none !important;
}
/* the interpretive voice is italic and warm; the body is plain and quiet */
body[data-og-skin] .mystic, body[data-og-skin] .sec-sub,
body[data-og-skin] blockquote, body[data-og-skin] .lede {
font-family: var(--og-voice) !important;
font-style: italic;
color: var(--og-vellum-dim) !important;
text-shadow: none !important;
}
/* ══ 1b · THE BULK PASS ═════════════════════════════════════════════
The layer cannot redraw a chamber's artwork — but it can stop that
artwork fighting the house. These three rules do most of the work of
a thirty-chamber cleanup in one place. Where a chamber earns bespoke
art later, it opts out with class="og-keep". */
html:has(body[data-og-skin]) { background: var(--og-void) !important; }
/* the starfield and particle fields — dimmed, never on a substring guess.
A chamber opts IN by adding class="og-decor" to a purely decorative layer.
Guessing from class names hid real content and will not be done again. */
body[data-og-skin] .og-decor {
opacity: .12 !important;
filter: grayscale(1) !important;
}
/* ARTWORK IS NEVER TOUCHED.
An earlier version of this file colour-graded every svg/img/canvas toward
brass. It flattened 150 distinct apothecary jars into one beige, which
destroyed both the information and the delight. The house style governs
TYPE, SURFACE, CONTROL and LIGHT. It does not repaint pictures.
If a specific illustration is off-brand, it gets redrawn — not filtered. */
body[data-og-skin] svg, body[data-og-skin] img, body[data-og-skin] canvas {
filter: none !important;
}
/* ══ 1c · THE TYPOGRAPHIC SYSTEM ═════════════════════════════════════
Most of what reads as "expensive" in a page is not the typeface. It is
measure, rhythm, and how lines break. None of this needs a font file. */
/* a modular scale, so no size is arbitrary */
:root {
--og-s0: 0.82rem; --og-s1: 0.94rem; --og-s2: 1.06rem;
--og-s3: 1.32rem; --og-s4: 1.68rem; --og-s5: 2.24rem;
--og-s6: clamp(2.1rem, 5.2vw, 3.5rem);
--og-measure: 66ch; /* nothing readable is wider than this */
--og-measure-tight: 52ch;
}
/* MEASURE — the single largest readability gain available. Long lines are
the most common reason a page of real scholarship reads as amateur. */
body[data-og-skin] p:not([class*="wide"]),
body[data-og-skin] li,
body[data-og-skin] blockquote {
max-width: var(--og-measure);
}
body[data-og-skin] .lede, body[data-og-skin] .sec-sub,
body[data-og-skin] .mystic { max-width: var(--og-measure-tight); }
/* LINE BREAKING — headings balance across lines, prose avoids orphans.
Two properties. Enormous difference. Free. */
body[data-og-skin] h1, body[data-og-skin] h2, body[data-og-skin] h3,
body[data-og-skin] .sec-title, body[data-og-skin] .title,
body[data-og-skin] blockquote { text-wrap: balance; }
body[data-og-skin] p, body[data-og-skin] li { text-wrap: pretty; }
/* RHYTHM — one leading for reading, one for display. Never in between. */
body[data-og-skin] { line-height: 1.72; font-size: var(--og-s2); }
body[data-og-skin] h1 { font-size: var(--og-s6); line-height: 1.06; margin: .5em 0 .34em; }
body[data-og-skin] h2 { font-size: var(--og-s5); line-height: 1.14; margin: 1.4em 0 .42em; }
body[data-og-skin] h3 { font-size: var(--og-s4); line-height: 1.22; margin: 1.3em 0 .38em; }
/* LETTERSPACING BY SIZE — large type tightens, small type opens. This is
the rule most sites get backwards, and it is instantly legible. */
body[data-og-skin] h1 { letter-spacing: -0.012em; }
body[data-og-skin] h2 { letter-spacing: -0.006em; }
body[data-og-skin] h3 { letter-spacing: 0; }
/* the marks of a set page rather than a typed one */
body[data-og-skin] {
font-feature-settings: 'liga' 1, 'clig' 1, 'kern' 1;
font-variant-numeric: oldstyle-nums proportional-nums;
hanging-punctuation: first last;
text-rendering: optimizeLegibility;
}
body[data-og-skin] table, body[data-og-skin] [class*="num"],
body[data-og-skin] [class*="data"], body[data-og-skin] [class*="chart"] {
font-variant-numeric: lining-nums tabular-nums; /* instruments align */
}
/* the kicker becomes true small caps where the face supports them */
body[data-og-skin] .sec-kicker, body[data-og-skin] .kicker,
body[data-og-skin] .eyebrow { font-feature-settings: 'smcp' 1, 'c2sc' 1, 'kern' 1; }
/* ══ 2 · SURFACES — stone panels, hairline edges, no glassmorphism ══ */
body[data-og-skin] .panel, body[data-og-skin] .layer, body[data-og-skin] .box {
background: var(--og-stone) !important;
border: 1px solid var(--og-rule) !important;
border-radius: 2px !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
/* ══ 3 · CONTROLS — a control is an inscription, not a pill ═════════ */
body[data-og-skin] button.btn, body[data-og-skin] a.btn,
body[data-og-skin] button.primary, body[data-og-skin] .nlink,
body[data-og-skin] a.cta, body[data-og-skin] button.cta {
background: none !important;
border: 1px solid var(--og-brass-deep) !important;
border-radius: 0 !important;
color: var(--og-brass-lit) !important;
font-family: var(--og-body) !important;
font-size: 11px !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
padding: 13px 30px !important;
box-shadow: none !important;
transition: border-color var(--og-slow) var(--og-ease),
color var(--og-slow) var(--og-ease),
letter-spacing var(--og-slow) var(--og-ease) !important;
}
body[data-og-skin] button.btn:hover, body[data-og-skin] a.btn:hover,
body[data-og-skin] .nlink:hover, body[data-og-skin] button.primary:hover,
body[data-og-skin] a.cta:hover, body[data-og-skin] button.cta:hover {
border-color: var(--og-brass) !important;
color: var(--og-vellum) !important;
letter-spacing: .36em !important;
background: none !important;
}
/* ══ 4 · MOTION — everything has mass. nothing floats. ═══════════════
NOTE, learned the hard way: never stop animations globally. Many
chambers reveal their content with an entry animation from opacity 0,
so a blanket `animation:none` freezes the page blank. Only named
decorative loops are stopped, and only where the class says so. */
body[data-og-skin] [class*="breathe"], body[data-og-skin] [class*="pulse"],
body[data-og-skin] [class*="twinkle"], body[data-og-skin] [class*="float"],
body[data-og-skin] [class*="shimmer"], body[data-og-skin] [class*="drift"],
body[data-og-skin] [class*="orbit"] {
animation: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
body[data-og-skin] * { transition: none !important; }
}
/* ══ 5 · THE THRESHOLD FRAME ════════════════════════════════════════
Replaces the wall of explanatory prose every chamber currently opens
with. Markup the chamber adds once, at the top of :