jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Font refactor: replace generic display fonts across Videos + Writings

Browse Source 
Renegade Storyteller:
- Ribeye Marrow → Amarante (Art Nouveau, cleaner mobile rendering)
- h1 floor reduced 4rem → 3rem
- h1::before letter-spacing tightened on mobile (was overflowing narrow screens)

Writings (11 files via script):
- Bebas Neue → Fredericka the Great (4 files)
- Anton → Rubik Glitch (2 files)
- Cinzel / Cinzel Decorative → Glass Antiqua (5 files)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-27 15:50:20 +02:00
parent 2f5c06fee8
commit fc60904e69
12 changed files with 113 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Videos/renegade-storyteller.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE RENEGADE STORYTELLER // Singular Particular</title> <title>THE RENEGADE STORYTELLER // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow&family=Faculty+Glyphic&family=Rambla:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Amarante&family=Faculty+Glyphic&family=Rambla:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: #04060b; --background: #04060b;
@@ -48,7 +48,7 @@
} }
.font-mechanical { .font-mechanical {
font-family: 'Ribeye Marrow', sans-serif; font-family: 'Amarante', sans-serif;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -62,9 +62,9 @@
} }
h1 { h1 {
font-family: 'Ribeye Marrow', sans-serif; font-family: 'Amarante', sans-serif;
font-weight: 400; font-weight: 400;
font-size: clamp(4rem, 16vw, 8rem); font-size: clamp(3rem, 16vw, 8rem);
line-height: 0.8; line-height: 0.8;
color: var(--primary); color: var(--primary);
text-transform: uppercase; text-transform: uppercase;
@@ -85,6 +85,10 @@
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
@media (max-width: 767px) {
h1::before { letter-spacing: 0.12em; }
}
.container { .container {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
@@ -172,7 +176,7 @@
} }
.lightbox-content h3 { .lightbox-content h3 {
font-family: 'Ribeye Marrow', sans-serif; font-family: 'Amarante', sans-serif;
font-size: 1.8rem; font-size: 1.8rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--primary); color: var(--primary);

28
Writings/HowToBuildARaft_Annotated.html
View File

@@ -6,7 +6,7 @@
<title>How to Build a Raft — Annotated</title> <title>How to Build a Raft — Annotated</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Glass+Antiqua&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -68,7 +68,7 @@ body {
opacity: 0.85; opacity: 0.85;
} }
.site-title { .site-title {
font-family: 'Cinzel Decorative', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(1.5rem, 4.5vw, 3rem); font-size: clamp(1.5rem, 4.5vw, 3rem);
font-weight: 700; font-weight: 700;
color: #f3e5bb; color: #f3e5bb;
@@ -78,7 +78,7 @@ body {
text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 30px rgba(200,150,50,0.15); text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 30px rgba(200,150,50,0.15);
} }
.site-subtitle { .site-subtitle {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(220,195,140,0.65); color: rgba(220,195,140,0.65);
letter-spacing: 0.3em; letter-spacing: 0.3em;
@@ -99,7 +99,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
} }
.nav-btn { .nav-btn {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.16em; letter-spacing: 0.16em;
@@ -166,7 +166,7 @@ body {
hyphens: auto; hyphens: auto;
} }
.story-body > p:first-of-type::first-letter { .story-body > p:first-of-type::first-letter {
font-family: 'Cinzel Decorative', serif; font-family: 'Glass Antiqua', serif;
font-size: 3.9em; font-size: 3.9em;
float: left; float: left;
line-height: 0.75; line-height: 0.75;
@@ -227,7 +227,7 @@ body {
.decode-label { .decode-label {
display: block; display: block;
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.63rem; font-size: 0.63rem;
letter-spacing: 0.22em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
@@ -236,7 +236,7 @@ body {
} }
.decode-term { .decode-term {
display: block; display: block;
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.92rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
color: var(--forest); color: var(--forest);
@@ -247,7 +247,7 @@ body {
.decode-link { .decode-link {
display: block; display: block;
margin-top: 0.45rem; margin-top: 0.45rem;
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.68rem; font-size: 0.68rem;
color: var(--forest); color: var(--forest);
text-decoration: none; text-decoration: none;
@@ -310,7 +310,7 @@ body {
background: linear-gradient(to right, rgba(45,90,46,0.07), transparent); background: linear-gradient(to right, rgba(45,90,46,0.07), transparent);
} }
.lightbox-title { .lightbox-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
color: var(--forest); color: var(--forest);
@@ -336,7 +336,7 @@ body {
color: var(--ink); color: var(--ink);
} }
.lightbox-body h3 { .lightbox-body h3 {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
@@ -371,7 +371,7 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.79rem; font-size: 0.79rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@@ -409,7 +409,7 @@ body {
/* ── SECTION HEADERS ── */ /* ── SECTION HEADERS ── */
.section-title { .section-title {
font-family: 'Cinzel Decorative', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(1.25rem, 3.5vw, 1.8rem); font-size: clamp(1.25rem, 3.5vw, 1.8rem);
color: var(--forest); color: var(--forest);
text-align: center; text-align: center;
@@ -428,7 +428,7 @@ body {
/* ── FURTHER READING ── */ /* ── FURTHER READING ── */
.reading-group-title { .reading-group-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.28em; letter-spacing: 0.28em;
text-transform: uppercase; text-transform: uppercase;
@@ -459,7 +459,7 @@ body {
flex: 1 1 200px; flex: 1 1 200px;
} }
.reading-tag { .reading-tag {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.62rem; font-size: 0.62rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;

2
Writings/OfPensandSwordsIntheBellyoftheDragon.html
View File

@@ -6,7 +6,7 @@
<title>Of Pens and Swords / In the Belly of the Dragon — Annotated</title> <title>Of Pens and Swords / In the Belly of the Dragon — Annotated</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Glass+Antiqua&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg-deep: #07070b; --bg-deep: #07070b;

18
Writings/doomy-mcdoomface.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOOMY McDOOMFACE — A Doomsday Primer</title> <title>DOOMY McDOOMFACE — A Doomsday Primer</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #0f0808; --bg: #0f0808;
@@ -79,7 +79,7 @@
} }
.masthead-title { .masthead-title {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: clamp(44px, 8vw, 82px); font-size: clamp(44px, 8vw, 82px);
line-height: 0.9; line-height: 0.9;
color: var(--bg); color: var(--bg);
@@ -200,7 +200,7 @@
.story-byline a:hover { color: var(--yellow); } .story-byline a:hover { color: var(--yellow); }
.story-body h2 { .story-body h2 {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: clamp(22px, 4vw, 34px); font-size: clamp(22px, 4vw, 34px);
color: var(--yellow); color: var(--yellow);
text-transform: uppercase; text-transform: uppercase;
@@ -328,7 +328,7 @@
} }
.decoder-panel .decode-term { .decoder-panel .decode-term {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 18px; font-size: 18px;
color: var(--yellow); color: var(--yellow);
display: block; display: block;
@@ -395,7 +395,7 @@
} }
.clock-time-display { .clock-time-display {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 58px; font-size: 58px;
color: var(--red); color: var(--red);
line-height: 1; line-height: 1;
@@ -425,7 +425,7 @@
} }
.timeline-title { .timeline-title {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 22px; font-size: 22px;
color: var(--yellow); color: var(--yellow);
text-transform: uppercase; text-transform: uppercase;
@@ -450,7 +450,7 @@
} }
.timeline-time { .timeline-time {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 18px; font-size: 18px;
color: var(--red); color: var(--red);
min-width: 90px; min-width: 90px;
@@ -599,7 +599,7 @@
/* === RESOURCES TAB === */ /* === RESOURCES TAB === */
.resources-section-title { .resources-section-title {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 20px; font-size: 20px;
color: var(--yellow); color: var(--yellow);
text-transform: uppercase; text-transform: uppercase;
@@ -731,7 +731,7 @@
} }
.lightbox-body h3 { .lightbox-body h3 {
font-family: 'Anton', sans-serif; font-family: 'Rubik Glitch', sans-serif;
font-size: 24px; font-size: 24px;
color: var(--yellow); color: var(--yellow);
text-transform: uppercase; text-transform: uppercase;

22
Writings/escape-annotated-v2.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESCAPE — Annotated Edition</title> <title>ESCAPE — Annotated Edition</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;0,500;1,400&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Lora:ital,wght@0,400;0,500;1,400&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;} html{font-size:16px;scroll-behavior:smooth;}
@@ -120,7 +120,7 @@ body {
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: clamp(5rem, 18vw, 11rem); font-size: clamp(5rem, 18vw, 11rem);
letter-spacing: 0.06em; letter-spacing: 0.06em;
line-height: 0.88; line-height: 0.88;
@@ -192,7 +192,7 @@ h1 {
border: none; border: none;
border-top: 2px solid transparent; border-top: 2px solid transparent;
color: var(--cold-dim); color: var(--cold-dim);
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 0.95rem; font-size: 0.95rem;
letter-spacing: 0.22em; letter-spacing: 0.22em;
padding: 0.9rem 1.5rem 0.75rem; padding: 0.9rem 1.5rem 0.75rem;
@@ -263,7 +263,7 @@ h1 {
background: var(--cold-border); background: var(--cold-border);
} }
.countdown-numeral { .countdown-numeral {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: clamp(4rem, 14vw, 7.5rem); font-size: clamp(4rem, 14vw, 7.5rem);
letter-spacing: 0.04em; letter-spacing: 0.04em;
line-height: 1; line-height: 1;
@@ -347,7 +347,7 @@ h1 {
.decode-label { .decode-label {
display:block; display:block;
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:0.7rem; font-size:0.7rem;
letter-spacing:0.32em; letter-spacing:0.32em;
color: var(--warm-hi); color: var(--warm-hi);
@@ -355,7 +355,7 @@ h1 {
} }
.decode-term { .decode-term {
display:block; display:block;
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:1.05rem; font-size:1.05rem;
letter-spacing:0.1em; letter-spacing:0.1em;
color: var(--warm-amber); color: var(--warm-amber);
@@ -421,7 +421,7 @@ h1 {
.mn-label { .mn-label {
display:block; display:block;
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:0.7rem; font-size:0.7rem;
letter-spacing:0.32em; letter-spacing:0.32em;
color: var(--warm-border); color: var(--warm-border);
@@ -479,7 +479,7 @@ h1 {
position:sticky; top:0; position:sticky; top:0;
} }
.lb-title { .lb-title {
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:1.1rem; font-size:1.1rem;
letter-spacing:0.18em; letter-spacing:0.18em;
color: var(--warm-amber); color: var(--warm-amber);
@@ -497,7 +497,7 @@ h1 {
.lb-close:hover { color: var(--warm-amber); border-color: var(--warm-border); } .lb-close:hover { color: var(--warm-amber); border-color: var(--warm-border); }
.lb-body { padding:1.5rem; } .lb-body { padding:1.5rem; }
.lb-body h3 { .lb-body h3 {
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:0.85rem; font-size:0.85rem;
letter-spacing:0.28em; letter-spacing:0.28em;
color: var(--warm-border); color: var(--warm-border);
@@ -567,7 +567,7 @@ h1 {
padding:3.5rem 1.5rem 6rem; padding:3.5rem 1.5rem 6rem;
} }
.edu-wrap > h2 { .edu-wrap > h2 {
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:clamp(2rem,6vw,3rem); font-size:clamp(2rem,6vw,3rem);
letter-spacing:0.1em; letter-spacing:0.1em;
color:#d0bc88; color:#d0bc88;
@@ -585,7 +585,7 @@ h1 {
/* ─── FURTHER READING ───────────────────────── */ /* ─── FURTHER READING ───────────────────────── */
.reading-section h3 { .reading-section h3 {
font-family:'Bebas Neue',sans-serif; font-family:'Fredericka the Great',sans-serif;
font-size:0.85rem; font-size:0.85rem;
letter-spacing:0.3em; letter-spacing:0.3em;
color: var(--warm-border); color: var(--warm-border);

6
Writings/gladstone-annotated.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Gladstone Gig — Annotated</title> <title>The Gladstone Gig — Annotated</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Oswald:wght@400;600;700&family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
<style> <style>
/* ===== CUSTOM PROPERTIES ===== */ /* ===== CUSTOM PROPERTIES ===== */
:root { :root {
@@ -95,7 +95,7 @@
} }
.site-title { .site-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 5.5rem; font-size: 5.5rem;
line-height: 0.9; line-height: 0.9;
letter-spacing: 4px; letter-spacing: 4px;
@@ -533,7 +533,7 @@
/* ===== TAB HEADINGS ===== */ /* ===== TAB HEADINGS ===== */
.tab-heading { .tab-heading {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 3rem; font-size: 3rem;
letter-spacing: 3px; letter-spacing: 3px;
margin-bottom: 4px; margin-bottom: 4px;

44
Writings/iwashere-annotated.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Was Here — Annotated Edition</title> <title>I Was Here — Annotated Edition</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;} html{font-size:16px;scroll-behavior:smooth;}
@@ -76,7 +76,7 @@ body {
/* Illuminated corner flourishes */ /* Illuminated corner flourishes */
.site-header::before, .site-header::before,
.site-header::after { .site-header::after {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 3.5rem; font-size: 3.5rem;
color: var(--gold-dim); color: var(--gold-dim);
position: absolute; position: absolute;
@@ -103,7 +103,7 @@ body {
} }
.header-ornament-top { .header-ornament-top {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 1.4rem; font-size: 1.4rem;
color: var(--gold-dim); color: var(--gold-dim);
letter-spacing: 0.6em; letter-spacing: 0.6em;
@@ -112,7 +112,7 @@ body {
} }
h1 { h1 {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-weight: 700; font-weight: 700;
font-size: clamp(2.8rem, 10vw, 6rem); font-size: clamp(2.8rem, 10vw, 6rem);
letter-spacing: 0.12em; letter-spacing: 0.12em;
@@ -128,7 +128,7 @@ h1 {
} }
.header-subtitle { .header-subtitle {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.35em; letter-spacing: 0.35em;
color: var(--forest-dim); color: var(--forest-dim);
@@ -151,7 +151,7 @@ h1 {
opacity: 0.5; opacity: 0.5;
} }
.header-rule span { .header-rule span {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--gold-dim); color: var(--gold-dim);
letter-spacing: 0.3em; letter-spacing: 0.3em;
@@ -184,7 +184,7 @@ h1 {
background: transparent; border: none; background: transparent; border: none;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: var(--ink-dim); color: var(--ink-dim);
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.68rem; letter-spacing: 0.22em; font-size: 0.68rem; letter-spacing: 0.22em;
padding: 1rem 1.4rem 0.8rem; padding: 1rem 1.4rem 0.8rem;
cursor: pointer; transition: all 0.2s; cursor: pointer; transition: all 0.2s;
@@ -214,7 +214,7 @@ h1 {
/* ── DROP CAP — for each named section ────────── */ /* ── DROP CAP — for each named section ────────── */
.section-opener::first-letter { .section-opener::first-letter {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 4.2em; font-size: 4.2em;
font-weight: 700; font-weight: 700;
float: left; float: left;
@@ -244,7 +244,7 @@ h1 {
position: relative; position: relative;
} }
.section-head-num { .section-head-num {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.62rem; font-size: 0.62rem;
letter-spacing: 0.4em; letter-spacing: 0.4em;
text-transform: uppercase; text-transform: uppercase;
@@ -253,7 +253,7 @@ h1 {
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
} }
.section-head-title { .section-head-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: var(--forest-dim); color: var(--forest-dim);
@@ -277,7 +277,7 @@ h1 {
.fear-refrain::before, .fear-refrain::after { .fear-refrain::before, .fear-refrain::after {
content: '✦'; content: '✦';
font-style: normal; font-style: normal;
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
color: var(--border-dim); color: var(--border-dim);
font-size: 0.6rem; font-size: 0.6rem;
position: absolute; position: absolute;
@@ -297,7 +297,7 @@ h1 {
position: relative; position: relative;
} }
.catalogue-label { .catalogue-label {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.62rem; font-size: 0.62rem;
letter-spacing: 0.3em; letter-spacing: 0.3em;
text-transform: uppercase; text-transform: uppercase;
@@ -316,7 +316,7 @@ h1 {
padding: 4rem 0 2rem; padding: 4rem 0 2rem;
} }
.final-words { .final-words {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(2rem, 6vw, 3.5rem); font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 700; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -345,7 +345,7 @@ h1 {
margin-top: 3.5rem; margin-top: 3.5rem;
} }
.challenge-box .ch-label { .challenge-box .ch-label {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 0.62rem; letter-spacing: 0.28em; font-size: 0.62rem; letter-spacing: 0.28em;
color: var(--ink-faint); margin-bottom: 0.5rem; color: var(--ink-faint); margin-bottom: 0.5rem;
} }
@@ -394,12 +394,12 @@ h1 {
.decode-label { .decode-label {
display: block; display: block;
font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em; font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
color: var(--forest-faint); margin-bottom: 0.25rem; color: var(--forest-faint); margin-bottom: 0.25rem;
} }
.decode-term { .decode-term {
display: block; display: block;
font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.06em; font-family: 'Glass Antiqua', serif; font-size: 1rem; letter-spacing: 0.06em;
color: var(--gold-faint); margin-bottom: 0.4rem; color: var(--gold-faint); margin-bottom: 0.4rem;
} }
.decoder-panel .panel-body { .decoder-panel .panel-body {
@@ -444,7 +444,7 @@ h1 {
.mn-label { .mn-label {
display: block; display: block;
font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em; font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
color: var(--ink-faint); margin-bottom: 0.25rem; color: var(--ink-faint); margin-bottom: 0.25rem;
} }
.marginnote-panel .panel-body { .marginnote-panel .panel-body {
@@ -489,7 +489,7 @@ h1 {
background: var(--vellum-dark); position: sticky; top: 0; background: var(--vellum-dark); position: sticky; top: 0;
} }
.lb-title { .lb-title {
font-family: 'Cinzel', serif; font-size: 1rem; font-family: 'Glass Antiqua', serif; font-size: 1rem;
letter-spacing: 0.1em; color: var(--forest); letter-spacing: 0.1em; color: var(--forest);
} }
.lb-close { .lb-close {
@@ -502,7 +502,7 @@ h1 {
.lb-close:hover { background: var(--forest); color: var(--gold-faint); border-color: var(--forest); } .lb-close:hover { background: var(--forest); color: var(--gold-faint); border-color: var(--forest); }
.lb-body { padding: 1.6rem; } .lb-body { padding: 1.6rem; }
.lb-body h3 { .lb-body h3 {
font-family: 'Cinzel', serif; font-size: 0.68rem; font-family: 'Glass Antiqua', serif; font-size: 0.68rem;
letter-spacing: 0.25em; color: var(--forest-dim); letter-spacing: 0.25em; color: var(--forest-dim);
margin: 1.4rem 0 0.5rem; padding-bottom: 0.35rem; margin: 1.4rem 0 0.5rem; padding-bottom: 0.35rem;
border-bottom: 1px solid var(--vellum-aged); border-bottom: 1px solid var(--vellum-aged);
@@ -525,7 +525,7 @@ h1 {
background: var(--vellum-mid); border: none; width: 100%; background: var(--vellum-mid); border: none; width: 100%;
text-align: left; padding: 0.95rem 1.1rem; cursor: pointer; text-align: left; padding: 0.95rem 1.1rem; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; display: flex; justify-content: space-between; align-items: center;
font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em; font-family: 'Glass Antiqua', serif; font-size: 0.72rem; letter-spacing: 0.1em;
color: var(--ink-dim); transition: all 0.18s; gap: 1rem; color: var(--ink-dim); transition: all 0.18s; gap: 1rem;
} }
.acc-trigger:hover { background: var(--vellum-dark); color: var(--ink-mid); } .acc-trigger:hover { background: var(--vellum-dark); color: var(--ink-mid); }
@@ -553,7 +553,7 @@ h1 {
padding: 4rem 1.5rem 6rem; padding: 4rem 1.5rem 6rem;
} }
.edu-wrap > h2 { .edu-wrap > h2 {
font-family: 'Cinzel', serif; font-weight: 600; font-family: 'Glass Antiqua', serif; font-weight: 600;
font-size: clamp(1.6rem, 4vw, 2.2rem); font-size: clamp(1.6rem, 4vw, 2.2rem);
letter-spacing: 0.12em; color: var(--forest); letter-spacing: 0.12em; color: var(--forest);
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
@@ -567,7 +567,7 @@ h1 {
/* ── FURTHER READING ────────────────────────── */ /* ── FURTHER READING ────────────────────────── */
.reading-section h3 { .reading-section h3 {
font-family: 'Cinzel', serif; font-size: 0.65rem; font-family: 'Glass Antiqua', serif; font-size: 0.65rem;
letter-spacing: 0.28em; color: var(--forest-dim); letter-spacing: 0.28em; color: var(--forest-dim);
margin: 2rem 0 0.65rem; padding-bottom: 0.4rem; margin: 2rem 0 0.65rem; padding-bottom: 0.4rem;
border-bottom: 1px solid var(--vellum-aged); border-bottom: 1px solid var(--vellum-aged);

4
Writings/johnny-and-clive.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny & Clive — Annotated</title> <title>Johnny & Clive — Annotated</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@@ -23,7 +23,7 @@
--purp:#8855cc; /* contested */ --purp:#8855cc; /* contested */
--grn:#4a9060; /* narrator DE */ --grn:#4a9060; /* narrator DE */
--sil:#707070; /* stage directions */ --sil:#707070; /* stage directions */
--hdr:'Anton',Impact,sans-serif; --hdr:'Rubik Glitch',Impact,sans-serif;
--body:'Libre Baskerville',Georgia,serif; --body:'Libre Baskerville',Georgia,serif;
--ui:'Jost','Segoe UI',sans-serif; --ui:'Jost','Segoe UI',sans-serif;
} }

26
Writings/lastmenstanding-annotated.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAST MEN STANDING — Annotated</title> <title>LAST MEN STANDING — Annotated</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&family=Courier+Prime:ital@0;1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Special+Elite&family=Courier+Prime:ital@0;1&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;} html{font-size:16px;scroll-behavior:smooth;}
@@ -90,7 +90,7 @@ body {
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: clamp(3.5rem, 14vw, 8.5rem); font-size: clamp(3.5rem, 14vw, 8.5rem);
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 0.9; line-height: 0.9;
@@ -135,7 +135,7 @@ h1 span { color: var(--amber); }
background:transparent; border:none; background:transparent; border:none;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
color: var(--smoke); color: var(--smoke);
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:1rem; letter-spacing:0.18em; font-size:1rem; letter-spacing:0.18em;
padding: 0.85rem 1.5rem 0.65rem; padding: 0.85rem 1.5rem 0.65rem;
cursor:pointer; transition:all 0.15s; cursor:pointer; transition:all 0.15s;
@@ -204,7 +204,7 @@ h1 span { color: var(--amber); }
/* The anti-climax */ /* The anti-climax */
.nothing-happens { .nothing-happens {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:1.1rem; font-size:1.1rem;
letter-spacing:0.3em; letter-spacing:0.3em;
color: var(--smoke-faint); color: var(--smoke-faint);
@@ -221,7 +221,7 @@ h1 span { color: var(--amber); }
border-left: 3px solid var(--amber); border-left: 3px solid var(--amber);
} }
.challenge-box .ch-label { .challenge-box .ch-label {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:0.78rem; font-size:0.78rem;
letter-spacing:0.28em; letter-spacing:0.28em;
color: var(--amber-dim); color: var(--amber-dim);
@@ -275,13 +275,13 @@ h1 span { color: var(--amber); }
.decode-label { .decode-label {
display:block; display:block;
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:0.68rem; letter-spacing:0.3em; font-size:0.68rem; letter-spacing:0.3em;
color: var(--amber-dim); margin-bottom:0.25rem; color: var(--amber-dim); margin-bottom:0.25rem;
} }
.decode-term { .decode-term {
display:block; display:block;
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:1.05rem; letter-spacing:0.1em; font-size:1.05rem; letter-spacing:0.1em;
color: var(--amber); margin-bottom:0.4rem; color: var(--amber); margin-bottom:0.4rem;
} }
@@ -334,7 +334,7 @@ h1 span { color: var(--amber); }
.mn-label { .mn-label {
display:block; display:block;
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:0.68rem; letter-spacing:0.3em; font-size:0.68rem; letter-spacing:0.3em;
color: var(--smoke); margin-bottom:0.25rem; color: var(--smoke); margin-bottom:0.25rem;
} }
@@ -380,7 +380,7 @@ h1 span { color: var(--amber); }
background: var(--paper-mid); position:sticky; top:0; background: var(--paper-mid); position:sticky; top:0;
} }
.lb-title { .lb-title {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:1.1rem; letter-spacing:0.15em; color: var(--ink); font-size:1.1rem; letter-spacing:0.15em; color: var(--ink);
} }
.lb-close { .lb-close {
@@ -393,7 +393,7 @@ h1 span { color: var(--amber); }
.lb-close:hover { background:var(--ink); color:var(--paper); } .lb-close:hover { background:var(--ink); color:var(--paper); }
.lb-body { padding:1.5rem; } .lb-body { padding:1.5rem; }
.lb-body h3 { .lb-body h3 {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:0.85rem; letter-spacing:0.25em; font-size:0.85rem; letter-spacing:0.25em;
color: var(--amber-dim); margin:1.4rem 0 0.5rem; color: var(--amber-dim); margin:1.4rem 0 0.5rem;
padding-bottom:0.35rem; border-bottom:1px solid var(--paper-dark); padding-bottom:0.35rem; border-bottom:1px solid var(--paper-dark);
@@ -413,7 +413,7 @@ h1 span { color: var(--amber); }
background:var(--paper-mid); border:none; width:100%; background:var(--paper-mid); border:none; width:100%;
text-align:left; padding:0.9rem 1.1rem; cursor:pointer; text-align:left; padding:0.9rem 1.1rem; cursor:pointer;
display:flex; justify-content:space-between; align-items:center; display:flex; justify-content:space-between; align-items:center;
font-family:'Bebas Neue', sans-serif; font-size:0.95rem; font-family:'Fredericka the Great', sans-serif; font-size:0.95rem;
letter-spacing:0.12em; color:var(--smoke); letter-spacing:0.12em; color:var(--smoke);
transition:all 0.15s; gap:1rem; transition:all 0.15s; gap:1rem;
} }
@@ -442,7 +442,7 @@ h1 span { color: var(--amber); }
padding:3.5rem 1.5rem 6rem; padding:3.5rem 1.5rem 6rem;
} }
.edu-wrap > h2 { .edu-wrap > h2 {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:clamp(2rem,6vw,3rem); font-size:clamp(2rem,6vw,3rem);
letter-spacing:0.1em; color:var(--ink); letter-spacing:0.1em; color:var(--ink);
margin-bottom:0.15rem; margin-bottom:0.15rem;
@@ -456,7 +456,7 @@ h1 span { color: var(--amber); }
/* ── FURTHER READING ────────────────────────── */ /* ── FURTHER READING ────────────────────────── */
.reading-section h3 { .reading-section h3 {
font-family:'Bebas Neue', sans-serif; font-family:'Fredericka the Great', sans-serif;
font-size:0.85rem; letter-spacing:0.28em; font-size:0.85rem; letter-spacing:0.28em;
color:var(--amber-dim); margin:2rem 0 0.6rem; color:var(--amber-dim); margin:2rem 0 0.6rem;
padding-bottom:0.4rem; border-bottom:2px solid var(--paper-dark); padding-bottom:0.4rem; border-bottom:2px solid var(--paper-dark);

26
Writings/note-for-the-end.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Note for the End of the Start — J.L.</title> <title>A Note for the End of the Start — J.L.</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=IM+Fell+English:ital@0;1&family=Share+Tech+Mono&family=Glass+Antiqua&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #080604; --bg: #080604;
@@ -129,7 +129,7 @@
} }
.masthead-title { .masthead-title {
font-family: 'Cinzel Decorative', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(22px, 4.5vw, 52px); font-size: clamp(22px, 4.5vw, 52px);
color: var(--brass-bright); color: var(--brass-bright);
line-height: 1.1; line-height: 1.1;
@@ -198,7 +198,7 @@
} }
.tab-btn { .tab-btn {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 11px; font-size: 11px;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
@@ -260,7 +260,7 @@
} }
.essay-body h2 { .essay-body h2 {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(16px, 2.5vw, 22px); font-size: clamp(16px, 2.5vw, 22px);
color: var(--amber); color: var(--amber);
text-transform: uppercase; text-transform: uppercase;
@@ -489,7 +489,7 @@
} }
.decoder-panel .decode-term { .decoder-panel .decode-term {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 16px; font-size: 16px;
color: var(--amber); color: var(--amber);
display: block; display: block;
@@ -572,7 +572,7 @@
} }
.lightbox-title { .lightbox-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 12px; font-size: 12px;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
@@ -604,7 +604,7 @@
} }
.lightbox-body h3 { .lightbox-body h3 {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 20px; font-size: 20px;
color: var(--amber); color: var(--amber);
letter-spacing: 2px; letter-spacing: 2px;
@@ -660,7 +660,7 @@
} }
.accordion-trigger-text { .accordion-trigger-text {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 13px; font-size: 13px;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
@@ -703,7 +703,7 @@
/* === OTHER TAB CONTENT STYLES === */ /* === OTHER TAB CONTENT STYLES === */
.content-title { .content-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: clamp(16px, 2.5vw, 20px); font-size: clamp(16px, 2.5vw, 20px);
color: var(--amber); color: var(--amber);
letter-spacing: 3px; letter-spacing: 3px;
@@ -778,7 +778,7 @@
} }
.card-title { .card-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
color: var(--amber); color: var(--amber);
@@ -815,7 +815,7 @@
.pull-quote::before { .pull-quote::before {
content: '"'; content: '"';
font-family: 'Cinzel Decorative', serif; font-family: 'Glass Antiqua', serif;
font-size: 48px; font-size: 48px;
color: var(--brass-dim); color: var(--brass-dim);
opacity: 0.4; opacity: 0.4;
@@ -846,7 +846,7 @@
/* Resource links */ /* Resource links */
.resource-section-title { .resource-section-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 14px; font-size: 14px;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
@@ -875,7 +875,7 @@
} }
.resource-title { .resource-title {
font-family: 'Cinzel', serif; font-family: 'Glass Antiqua', serif;
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
color: var(--text); color: var(--text);

28
Writings/politics-annotated.html
View File

@@ -6,7 +6,7 @@
<title>What We Get Wrong About Politics</title> <title>What We Get Wrong About Politics</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #0b0907; --bg: #0b0907;
@@ -68,7 +68,7 @@ body::before {
} }
.masthead-label { .masthead-label {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: 0.35em; letter-spacing: 0.35em;
color: var(--red); color: var(--red);
@@ -77,7 +77,7 @@ body::before {
} }
.masthead-title { .masthead-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: clamp(28px, 5vw, 52px); font-size: clamp(28px, 5vw, 52px);
line-height: 1; line-height: 1;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -115,7 +115,7 @@ body::before {
.tab-nav::-webkit-scrollbar-thumb { background: var(--red); } .tab-nav::-webkit-scrollbar-thumb { background: var(--red); }
.tab-btn { .tab-btn {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 14px; font-size: 14px;
letter-spacing: 0.15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
@@ -159,7 +159,7 @@ body::before {
/* ─── PROSE ─── */ /* ─── PROSE ─── */
.prose h2 { .prose h2 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 26px; font-size: 26px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--red-bright); color: var(--red-bright);
@@ -253,7 +253,7 @@ body::before {
.decode-label { .decode-label {
display: block; display: block;
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 9px; font-size: 9px;
letter-spacing: 0.3em; letter-spacing: 0.3em;
text-transform: uppercase; text-transform: uppercase;
@@ -267,7 +267,7 @@ body::before {
font-size: 14px; font-size: 14px;
color: var(--ochre); color: var(--ochre);
margin-bottom: 8px; margin-bottom: 8px;
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -376,7 +376,7 @@ body::before {
} }
.lightbox-title { .lightbox-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 18px; font-size: 18px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--parchment); color: var(--parchment);
@@ -404,7 +404,7 @@ body::before {
} }
.lightbox-body h3 { .lightbox-body h3 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 16px; font-size: 16px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--red-bright); color: var(--red-bright);
@@ -426,7 +426,7 @@ body::before {
/* ─── ACCORDION ─── */ /* ─── ACCORDION ─── */
.acc-section-title { .acc-section-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 22px; font-size: 22px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--red-bright); color: var(--red-bright);
@@ -497,7 +497,7 @@ body::before {
/* ─── FURTHER READING ─── */ /* ─── FURTHER READING ─── */
.reading-group-title { .reading-group-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 16px; font-size: 16px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
@@ -533,7 +533,7 @@ body::before {
.reading-tag { .reading-tag {
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
letter-spacing: 0.15em; letter-spacing: 0.15em;
color: var(--red); color: var(--red);
border: 1px solid var(--red); border: 1px solid var(--red);
@@ -565,7 +565,7 @@ body::before {
} }
.callout-label { .callout-label {
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 10px; font-size: 10px;
letter-spacing: 0.3em; letter-spacing: 0.3em;
color: var(--ochre); color: var(--ochre);
@@ -577,7 +577,7 @@ body::before {
/* ─── STAMP ─── */ /* ─── STAMP ─── */
.stamp { .stamp {
display: inline-block; display: inline-block;
font-family: 'Bebas Neue', sans-serif; font-family: 'Fredericka the Great', sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;

4
Writings/watchmaker.html
View File

@@ -6,7 +6,7 @@
<title>The Watch Maker — Annotated</title> <title>The Watch Maker — Annotated</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Glass+Antiqua&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg-deep: #06080e; --bg-deep: #06080e;
@@ -27,7 +27,7 @@
--border-bright: rgba(200,168,75,0.45); --border-bright: rgba(200,168,75,0.45);
--ff-prose: 'Cormorant Garamond', Georgia, serif; --ff-prose: 'Cormorant Garamond', Georgia, serif;
--ff-mono: 'Space Mono', 'Courier New', monospace; --ff-mono: 'Space Mono', 'Courier New', monospace;
--ff-display: 'Cinzel', Georgia, serif; --ff-display: 'Glass Antiqua', Georgia, serif;
} }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }