/* =========================================================
TRAD PHILOSOPHER — Restore the Real
Dark vellum + woodcut CRT + academic phosphor terminal
SECTION MAP — search for these headers to jump:
· :root tokens & body base (top of file)
· GOLD RULE
· POLAROID
· MASTHEAD
· NAVIGATION
· CRT TERMINAL
· FULLSCREEN MODE
· FOOTER
· RESPONSIVE
· AMBIENT MUSIC PLAYER
· COMMENTS — Cusdis embed
========================================================= */
:root {
--bg-vellum: #1a1410;
--bg-vellum-2: #251b13;
--cream: #e8d8b8;
--cream-soft: #cbb892;
--cream-dim: #8a7a5e;
--amber: #d99a3a; /* outer site only (tagline, nav, rules) */
--amber-bright: #f0b550; /* outer site only */
--amber-soft: #b87a28; /* outer site only */
/* Inside-terminal accents — cream/parchment so headers and italics
harmonize with the green CRT chrome instead of clashing. */
--term-accent: #d8c8a0;
--term-accent-bright: #ede0bf;
--term-accent-soft: #8a7a5e;
--gold-rule: #6b5226;
--phosphor: #88e078;
--phosphor-dim: #4a8a44;
--screen-bg: #0a2818;
--screen-glow: rgba(120, 220, 120, 0.18);
/* Terminal blue — used sparingly for the memo register ("second console")
and for external-link cues ("this exits the site, another terminal
session"). Two rules only. Do NOT use anywhere else; the moment blue
bleeds into nav/headers/metadata it stops meaning anything. */
--term-blue: #9bc8e6;
--term-blue-soft: #6ea4c8;
--term-blue-dim: rgba(140, 180, 220, 0.32);
--serif-display: 'Cinzel', 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
--serif-body: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
/* Aged, slightly imperfect serif used inside the terminal body */
/* Body face — Cormorant Garamond is a crisp Garamond revival that pairs
cleanly with Cinzel (entries-list titles). Cormorant + Cinzel are both
descended from Garamont’s 16th-c. Roman types, so they share DNA.
IM Fell remains a fallback and is reserved for special letterpress
moments (could be applied to pull quotes or block attributions later). */
--serif-aged: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
--mono-pixel: 'VT323', 'JetBrains Mono', 'Courier New', monospace;
--mono-meta: 'JetBrains Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background-color: var(--bg-vellum);
color: var(--cream);
font-family: var(--serif-body);
font-size: 18px;
line-height: 1.55;
min-height: 100vh;
position: relative;
}
/* Aged vellum texture overlay — warm vignette + faint horizontal grain */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(ellipse at 50% 0%, rgba(217, 154, 58, 0.10), transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(140, 80, 30, 0.08), transparent 65%),
radial-gradient(ellipse at 0% 50%, rgba(60, 35, 18, 0.12), transparent 60%),
radial-gradient(ellipse at 100% 50%, rgba(60, 35, 18, 0.12), transparent 60%),
repeating-linear-gradient(
0deg,
rgba(80, 50, 25, 0.04) 0px,
rgba(80, 50, 25, 0.04) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
}
/* Subtle film-grain noise */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.07;
background-image: url("data:image/svg+xml;utf8, should not double-italicize — swap to roman
to mark emphasis inside the quoted italic, the way books do. */
.essay-body-wrap blockquote em {
font-style: normal;
text-shadow: none;
}
/* Attribution line (`> — Author, Title`) often appears as the last ;
no special selector needed, but if author uses an em-dash at the start
of a paragraph we let it sit naturally. */
/* In-body section break (markdown `---`). Same typographic-thought-break
convention as the header divider, but slightly smaller and dimmer
because it appears multiple times inside an article and shouldn’t
announce itself. Plain ink, no glyphs. */
.essay-body-wrap hr.ascii,
.essay-body-wrap hr {
border: 0;
text-align: center;
margin: 1.6em 0;
height: 1.2em;
position: relative;
font-family: var(--serif-aged);
}
.essay-body-wrap hr.ascii::before,
.essay-body-wrap hr::before {
content: "* * *";
color: var(--cream-soft);
letter-spacing: 0.85em;
opacity: 0.85;
font-size: 1em;
text-shadow: none;
}
.essay-body-wrap hr.ascii::after,
.essay-body-wrap hr::after { content: ""; }
/* Table — set the way a philosophy reference work or Bringhurst-styled
scholarly book would: horizontal rules only (top, below header, bottom),
no vertical lines, generous cell padding, header in small caps cream-bright,
body cells in the same serif as running text. The "three-rule" convention
is the classical printed-table form. */
.essay-body-wrap table {
width: 100%;
border-collapse: collapse;
margin: 1.6em 0;
font-family: var(--serif-aged);
font-size: 0.98em;
line-height: 1.45;
color: var(--cream);
border-top: 1px solid rgba(202, 184, 146, 0.55);
border-bottom: 1px solid rgba(202, 184, 146, 0.55);
text-shadow: none;
}
.essay-body-wrap thead th {
font-family: var(--mono-meta);
font-size: 0.78em;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
text-align: left;
padding: 0.65em 0.9em;
border-bottom: 1px solid rgba(202, 184, 146, 0.35);
text-shadow: none;
}
.essay-body-wrap tbody td {
padding: 0.55em 0.9em;
vertical-align: top;
font-family: var(--serif-aged);
color: var(--cream);
text-shadow: none;
}
.essay-body-wrap tbody tr + tr td {
border-top: 1px solid rgba(202, 184, 146, 0.10); /* hairline between rows */
}
.essay-body-wrap tbody em,
.essay-body-wrap tbody i {
color: var(--cream-soft); /* keep italic terms harmonious, no glow */
text-shadow: none;
}
.essay-body-wrap table caption {
caption-side: bottom;
margin-top: 0.6em;
font-family: var(--mono-meta);
font-size: 0.78em;
letter-spacing: 0.1em;
color: var(--cream-soft);
text-align: left;
}
/* On narrow viewports, let the table scroll horizontally rather than
collapse — preserves the philosophical reference-table feel. */
@media (max-width: 640px) {
.essay-body-wrap table { font-size: 0.92em; }
.essay-body-wrap thead th,
.essay-body-wrap tbody td { padding: 0.5em 0.6em; }
}
/* Inline images inside an article — centered, amber-bordered, terminal-friendly.
Build script wraps each top-level image in with an
optional from the markdown alt text. */
.essay-body-wrap figure.essay-img {
display: block;
margin: 22px auto;
text-align: center;
padding: 0;
}
.essay-body-wrap figure.essay-img img {
max-width: 92%;
height: auto;
display: inline-block;
border: 1px solid var(--term-accent-soft);
padding: 5px;
background: rgba(13, 10, 8, 0.55);
box-shadow:
0 0 0 1px rgba(13, 10, 8, 0.6),
0 4px 18px rgba(0, 0, 0, 0.55),
0 0 22px rgba(237, 224, 191, 0.18);
filter: saturate(0.92);
}
.essay-body-wrap figure.essay-img figcaption {
font-family: var(--mono-pixel);
color: var(--phosphor-dim);
font-size: 0.85em;
letter-spacing: 0.05em;
margin: 8px auto 0;
max-width: 80%;
line-height: 1.3;
text-shadow: 0 0 4px rgba(120, 220, 120, 0.3);
}
/* Inline mid-paragraph image (rare) */
.essay-body-wrap .essay-img-inline img {
max-height: 1.4em;
vertical-align: middle;
border: 1px solid var(--term-accent-soft);
padding: 1px;
}
.section-head {
font-family: var(--mono-pixel);
color: var(--term-accent-bright);
font-size: 1.2em;
font-weight: 400;
text-align: center;
letter-spacing: 0.18em;
margin: 18px 0 12px;
text-shadow: 0 0 8px rgba(237, 224, 191, 0.45);
}
/* ---------- Post list ---------- */
.post-list {
list-style: none;
padding: 0;
margin: 0 0 14px;
}
.post-item {
margin: 0 0 12px;
border-bottom: 1px dashed rgba(120, 220, 120, 0.2);
padding: 0 0 10px;
}
.post-item:last-child { border-bottom: 0; }
.post-link {
display: block;
padding: 6px 8px;
text-decoration: none;
color: var(--phosphor);
border-radius: 3px;
transition: background 0.15s ease, color 0.15s ease;
cursor: pointer;
}
.post-link:hover, .post-link:focus-visible {
background: rgba(120, 220, 120, 0.08);
outline: none;
}
.post-link:hover .post-title {
color: var(--term-accent-bright);
text-shadow: 0 0 8px rgba(237, 224, 191, 0.5);
}
.post-meta-row {
display: inline-flex;
gap: 14px;
font-family: var(--mono-meta);
font-size: 0.78em;
color: var(--phosphor-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
text-shadow: none;
}
.post-tag { color: var(--term-accent); }
/* Title — cream serif so it reads as the headline of an article, not a green
terminal label. The phosphor glow is reserved for the surrounding chrome
(prompt lines, prompts, tags). */
.post-title {
display: block;
font-family: var(--serif-display);
font-size: 1.45em;
color: var(--term-accent-bright);
margin-top: 6px;
letter-spacing: 0.04em;
text-shadow: 0 0 4px rgba(237, 224, 191, 0.18);
transition: color 0.15s ease, text-shadow 0.15s ease;
}
/* Summary — aged-paper italic in muted cream so it reads like a dek under a
headline rather than another line of green code. */
.post-summary {
display: block;
font-family: var(--serif-aged);
font-style: italic;
font-size: 1em;
color: var(--term-accent);
opacity: 0.78;
margin-top: 4px;
letter-spacing: 0.01em;
text-shadow: none;
}
.post-link:hover .post-title {
color: var(--phosphor-bright, #b8f0a8);
text-shadow: 0 0 6px rgba(120, 220, 120, 0.35);
}
.nav-link.active { color: var(--term-accent-bright); }
.dropcap {
float: left;
font-family: var(--serif-display);
font-weight: 600;
font-size: 3.4em;
line-height: 0.85;
padding: 0.05em 0.1em 0 0;
color: var(--term-accent-bright);
text-shadow:
0 0 12px rgba(237, 224, 191, 0.5),
0 1px 0 rgba(0, 0, 0, 0.55);
}
.essay-body-wrap p:first-child .dropcap,
.essay-body-wrap p:first-of-type .dropcap {
/* drop cap handled via span */
}
.pullquote {
text-align: center;
margin: 18px 6% 18px;
color: var(--term-accent-bright);
font-family: var(--serif-aged);
font-size: 1.08em;
line-height: 1.5;
text-shadow: 0 0 8px rgba(237, 224, 191, 0.4);
border-left: 0;
padding: 0;
}
.pullquote p { margin: 0; }
.pullquote em {
font-style: italic;
color: var(--term-accent-bright);
}
.pullquote .attribution {
display: inline-block;
margin-top: 6px;
color: var(--phosphor);
text-shadow: 0 0 6px rgba(120, 220, 120, 0.45);
font-size: 0.92em;
}
.cursor-line {
margin-top: 10px;
}
.cursor {
display: inline-block;
width: 0.55em;
background: var(--phosphor);
color: var(--phosphor);
animation: blink 1.05s steps(2, end) infinite;
text-shadow: 0 0 8px rgba(120, 220, 120, 0.7);
}
@keyframes blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* =========================================================
FULLSCREEN MODE — terminal takes over
========================================================= */
body.screen-fullscreen {
overflow: hidden;
}
body.screen-fullscreen .masthead,
body.screen-fullscreen .primary-nav,
body.screen-fullscreen .polaroid,
body.screen-fullscreen .page-footer,
body.screen-fullscreen .rule {
opacity: 0.05;
pointer-events: none;
filter: blur(1px);
transition: opacity 0.5s ease, filter 0.5s ease;
}
body.screen-fullscreen .crt-container {
cursor: zoom-out;
}
body.screen-fullscreen .crt-image {
opacity: 0.025;
transition: opacity 0.5s ease;
}
body.screen-fullscreen .screen {
position: fixed !important;
top: 4vh !important;
left: 4vw !important;
right: 4vw !important;
bottom: 4vh !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
border-radius: 18px !important;
z-index: 100;
/* Solid, near-opaque reading surface (~85%) so page content behind
the terminal stops bleeding through the article body. Layered on
top of the existing scanline + radial-glow background. */
background-color: rgba(8, 16, 10, 0.85) !important;
box-shadow:
inset 0 0 60px rgba(0, 0, 0, 0.7),
inset 0 0 120px rgba(120, 220, 120, 0.18),
0 0 80px rgba(120, 220, 120, 0.35),
0 30px 80px rgba(0,0,0,0.75);
cursor: default;
}
body.screen-fullscreen .screen-inner {
/* Desktop fullscreen: let .screen-inner span the full terminal width
so the scrollbar sits flush against the right edge of the terminal.
The text column itself is kept at ~900px by symmetric left/right
padding (calc(50% - 450px), clamped to a minimum gutter). */
position: absolute !important;
inset: 5% 0 5% 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
transform: none !important;
padding-left: max(6%, calc(50% - 450px)) !important;
padding-right: max(6%, calc(50% - 450px)) !important;
font-size: clamp(15px, 1.6vw, 22px) !important;
line-height: 1.5 !important;
}
body.screen-fullscreen .essay-title {
font-size: 2.4em !important;
}
body.screen-fullscreen .dropcap {
font-size: 4em !important;
}
/* "click to expand" hint — a bracketed CHIP anchored to the CRT screen
itself (bottom-right of the .screen bbox). Solid dark backing +
phosphor border so it never disappears against light text underneath
it as the user scrolls. Hidden once fullscreen (rule below). */
.screen::after {
content: "[ click to expand ]";
position: absolute;
bottom: 8px;
right: 10px;
font-family: var(--mono-pixel);
font-size: 0.78em;
color: var(--phosphor);
letter-spacing: 0.04em;
padding: 2px 6px;
/* Solid dark backing so the chip stays legible whatever scrolls behind
the translucent CRT screen. */
background: rgba(8, 16, 10, 0.92);
border: 1px solid rgba(120, 220, 120, 0.55);
border-radius: 3px;
text-shadow: 0 0 6px rgba(120, 220, 120, 0.55);
box-shadow:
0 0 10px rgba(120, 220, 120, 0.22),
0 2px 6px rgba(0, 0, 0, 0.45);
z-index: 4;
pointer-events: none;
opacity: 1;
animation: expand-hint-pulse 2.4s ease-in-out infinite;
transition: opacity 0.3s ease;
}
.screen:hover::after { animation-duration: 1.6s; }
@keyframes expand-hint-pulse {
/* Tight range — chip is ALWAYS clearly visible, just breathing. */
0%, 100% { opacity: 0.82; box-shadow: 0 0 8px rgba(120, 220, 120, 0.18), 0 2px 6px rgba(0,0,0,0.45); }
50% { opacity: 1.0; box-shadow: 0 0 16px rgba(120, 220, 120, 0.40), 0 2px 6px rgba(0,0,0,0.45); }
}
/* Subtle pulse on the screen's outer glow so the eye is drawn to the CRT. */
@keyframes screen-glow-pulse {
0%, 100% {
box-shadow:
inset 0 0 28px rgba(0, 0, 0, 0.55),
inset 0 0 60px rgba(120, 220, 120, 0.14),
0 0 22px var(--screen-glow);
}
50% {
box-shadow:
inset 0 0 28px rgba(0, 0, 0, 0.55),
inset 0 0 60px rgba(120, 220, 120, 0.18),
0 0 38px rgba(120, 220, 120, 0.32);
}
}
.screen { animation: screen-glow-pulse 3.2s ease-in-out infinite; }
body.screen-fullscreen .screen::after { content: none; }
body.screen-fullscreen .screen { animation: none; }
/* Floating fullscreen controls — small bracketed labels in the corners.
Created in JS and toggled with .is-visible. Match the terminal aesthetic
(monospaced, phosphor green, faint text-shadow) so they read as part of
the CRT, not modern UI chrome. */
.screen-close,
.screen-back {
position: fixed;
z-index: 110;
background: transparent;
border: 0;
padding: 6px 10px;
font-family: var(--mono-pixel);
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--phosphor);
text-shadow: 0 0 6px rgba(120, 220, 120, 0.45);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.screen-close { top: 18px; right: 22px; }
.screen-back { top: 18px; left: 22px; }
.screen-close.is-visible,
.screen-back.is-visible {
opacity: 0.75;
pointer-events: auto;
}
.screen-close:hover,
.screen-back:hover,
.screen-close:focus-visible,
.screen-back:focus-visible {
opacity: 1;
color: var(--term-accent-bright);
text-shadow: 0 0 10px rgba(237, 224, 191, 0.6);
outline: none;
}
@media (max-width: 720px) {
.screen-close { top: 10px; right: 12px; }
.screen-back { top: 10px; left: 12px; }
.screen-close, .screen-back { font-size: 0.85rem; padding: 5px 8px; }
}
/* =========================================================
TAG CHIPS — appear on post and list views
Small terminal-mono pills (#tag) that link back to a tag search.
========================================================= */
.tag-chips {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
/* Tags are supporting metadata, not headlines — keep them quiet so they
don't compete with titles and summaries. */
.tag-chip {
display: inline-block;
font-family: var(--mono-meta);
font-size: 0.6em;
letter-spacing: 0.04em;
color: var(--term-accent);
background: rgba(216, 200, 160, 0.04);
border: 1px solid rgba(216, 200, 160, 0.16);
border-radius: 2px;
padding: 0 5px;
text-decoration: none;
cursor: pointer;
opacity: 0.75;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.tag-chip::before { content: "#"; opacity: 0.45; margin-right: 1px; }
.tag-chip:hover,
.tag-chip:focus-visible {
color: var(--term-accent-bright);
border-color: rgba(237, 224, 191, 0.45);
background: rgba(237, 224, 191, 0.08);
opacity: 1;
outline: none;
}
.tag-chips {
margin-top: 6px;
gap: 4px 5px;
}
/* Inline tag chips in the static post HTML meta line. */
.essay-meta .tag-chip { font-size: 0.75em; }
/* =========================================================
SEARCH SORT TOGGLE — relevance | most recent
========================================================= */
.search-sort {
font-family: var(--mono-meta);
font-size: 0.78em;
letter-spacing: 0.06em;
color: var(--phosphor-dim);
margin: 0 0 14px;
}
.search-sort .sort-label { margin-right: 8px; opacity: 0.7; }
.search-sort a {
color: var(--phosphor-dim);
text-decoration: none;
margin-right: 10px;
cursor: pointer;
border-bottom: 1px dotted transparent;
}
.search-sort a:hover {
color: var(--phosphor);
border-bottom-color: var(--phosphor-dim);
}
.search-sort a.is-active {
color: var(--term-accent-bright);
border-bottom: 1px solid var(--term-accent);
text-shadow: 0 0 4px rgba(237, 224, 191, 0.3);
}
/* =========================================================
TYPE FILTER CHIPS — chip row on terminal index/entries +
search results; lets visitors narrow by post type.
========================================================= */
.type-filter {
font-family: var(--mono-meta);
font-size: 0.78em;
letter-spacing: 0.06em;
color: var(--phosphor-dim);
margin: 4px 0 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.type-filter .type-filter-label {
margin-right: 4px;
opacity: 0.7;
}
.type-filter a,
.type-filter button.type-chip {
display: inline-block;
color: var(--phosphor-dim);
text-decoration: none;
cursor: pointer;
padding: 1px 6px;
border: 1px solid transparent;
border-radius: 2px;
transition: color 0.12s ease, border-color 0.12s ease;
user-select: none;
/* Button-specific resets so it visually matches the old chips. */
background: transparent;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
line-height: inherit;
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
}
.type-filter button.type-chip::-moz-focus-inner { border: 0; padding: 0; }
.type-filter a:hover,
.type-filter button.type-chip:hover,
.type-filter button.type-chip:focus-visible {
color: var(--phosphor);
border-color: rgba(136, 224, 120, 0.35);
outline: none;
}
.type-filter a.is-active,
.type-filter button.type-chip.is-active {
color: var(--term-accent-bright);
border-color: var(--term-accent);
text-shadow: 0 0 4px rgba(237, 224, 191, 0.3);
background: rgba(237, 224, 191, 0.06);
}
@media (max-width: 720px) {
.type-filter {
font-size: 0.72em;
gap: 5px 8px;
}
.type-filter a,
.type-filter button.type-chip { padding: 1px 5px; }
}
/* =========================================================
FULLSCREEN-VIEW SEARCH INPUT — large in-terminal input
that auto-focuses on iOS so the keyboard appears.
========================================================= */
.term-search-input-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
padding: 6px 10px;
border: 1px solid var(--phosphor-dim);
border-radius: 2px;
background: rgba(120, 220, 120, 0.04);
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}
.term-search-input-row .term-prompt {
font-family: var(--mono-pixel);
color: var(--phosphor);
font-size: 1.05em;
letter-spacing: 0.04em;
flex: 0 0 auto;
text-shadow: 0 0 6px rgba(120, 220, 120, 0.4);
}
.term-search-input-row input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: none;
font-family: var(--mono-pixel);
color: var(--phosphor);
font-size: 1.05em;
letter-spacing: 0.03em;
caret-color: var(--phosphor);
text-shadow: 0 0 6px rgba(120, 220, 120, 0.45);
padding: 4px 0;
/* iOS Safari: prevent zoom-on-focus from being too aggressive while keeping the keyboard. */
font-size: max(16px, 1.05em);
}
.term-search-input-row input::placeholder {
color: var(--phosphor-dim);
font-style: italic;
opacity: 0.7;
}
.term-search-input-row .term-search-go {
flex: 0 0 auto;
background: transparent;
border: 1px solid var(--phosphor-dim);
color: var(--phosphor);
font-family: var(--mono-pixel);
font-size: 0.95em;
letter-spacing: 0.05em;
padding: 2px 9px;
cursor: pointer;
border-radius: 2px;
transition: color 0.18s ease, border-color 0.18s ease;
}
.term-search-input-row .term-search-go:hover,
.term-search-input-row .term-search-go:focus-visible {
color: var(--term-accent-bright);
border-color: var(--term-accent);
outline: none;
}
/* =========================================================
RELATED POSTS — block at the bottom of a post
========================================================= */
.related-posts {
margin: 24px 0 18px;
padding-top: 14px;
border-top: 1px dashed rgba(216, 200, 160, 0.22);
}
.related-posts .section-head {
font-family: var(--mono-pixel);
font-size: 0.95em;
letter-spacing: 0.14em;
color: var(--term-accent);
margin: 0 0 10px;
text-transform: uppercase;
}
.related-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.related-item a {
display: block;
text-decoration: none;
color: inherit;
padding: 6px 8px;
border-left: 2px solid rgba(120, 220, 120, 0.25);
transition: border-color 0.18s ease, background 0.18s ease;
}
.related-item a:hover {
border-left-color: var(--phosphor);
background: rgba(120, 220, 120, 0.05);
}
.related-item .related-meta {
font-family: var(--mono-meta);
font-size: 0.72em;
letter-spacing: 0.06em;
color: var(--phosphor-dim);
text-transform: uppercase;
margin-bottom: 2px;
}
.related-item .related-title {
display: block;
font-family: var(--serif-display);
font-size: 1.05em;
letter-spacing: 0.04em;
/* Cream so related titles read as a quiet footer apparatus, not as a
second body competing with the article. Hover lifts to phosphor. */
color: var(--term-accent);
transition: color 0.18s ease, text-shadow 0.18s ease;
}
.related-item a:hover .related-title {
color: var(--phosphor);
text-shadow: 0 0 6px rgba(120, 220, 120, 0.3);
}
/* =========================================================
FOOTER
========================================================= */
.page-footer {
text-align: center;
padding: 18px 32px 38px;
color: var(--cream-dim);
}
.page-footer .fleur-rule { margin-bottom: 12px; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 720px) {
/* On mobile the CRT screen is small — keep the chip compact, anchored
to the screen's bottom-right corner. */
.screen::after {
content: "[ tap to expand ]";
font-size: 0.6em;
bottom: 4px;
right: 5px;
padding: 1px 4px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.polaroid { width: 78px; top: 64px; right: 10px; }
.medallion { width: 100px; height: 100px; }
.wordmark { font-size: 2rem; letter-spacing: 0.1em; }
.slogan { font-size: 1.15rem; }
.primary-nav { margin: 10px 12px 16px; }
.primary-nav ul { gap: 8px; padding: 10px 0; }
.primary-nav a { font-size: 0.7rem; letter-spacing: 0.16em; }
.nav-search.is-open .nav-search-form { width: 64vw; max-width: 280px; }
/* Keep the upward pull on mobile too — the wood-cabinet above the
screen is still a visible gap to the nav rule. */
.crt-container { width: 96vw; margin-top: -56px; }
.screen-inner { font-size: 10px; }
.essay-title { font-size: 1.4em; }
.dropcap { font-size: 2.5em; }
/* Mobile fullscreen: give scrollbar its own gutter so it never overlaps text */
body.screen-fullscreen .screen-inner {
width: min(620px, 92%) !important;
padding-right: 14px;
/* Scrollbar lives in a dedicated gutter on the right edge */
scrollbar-gutter: stable;
}
body.screen-fullscreen .screen-inner::-webkit-scrollbar { width: 4px; }
}
@media (max-width: 480px) {
.screen-inner { font-size: 9px; line-height: 1.35; }
.essay-title { font-size: 1.15em; letter-spacing: 0.12em; }
.dropcap { font-size: 2.1em; }
.ascii-rule, .ascii-fleur { font-size: 0.85em; }
}
/* =========================================================
AMBIENT MUSIC PLAYER
========================================================= */
.music-player {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 200;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 8px;
background: rgba(13, 10, 8, 0.86);
border: 1px solid var(--gold-rule);
border-radius: 999px;
backdrop-filter: blur(6px);
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(217, 154, 58, 0.1);
font-family: var(--mono-meta);
color: var(--cream);
max-width: 320px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.music-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--amber-soft);
background: rgba(217, 154, 58, 0.15);
color: var(--amber-bright);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.music-btn:hover {
background: rgba(217, 154, 58, 0.3);
box-shadow: 0 0 14px rgba(240, 181, 80, 0.45);
}
.music-btn .icon-pause { display: none; }
.music-player.playing .music-btn .icon-play { display: none; }
.music-player.playing .music-btn .icon-pause { display: block; }
.music-player.playing .music-btn {
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(240, 181, 80, 0.5); }
50% { box-shadow: 0 0 16px 2px rgba(240, 181, 80, 0.5); }
}
.music-label {
display: flex;
flex-direction: column;
font-size: 10px;
letter-spacing: 0.08em;
line-height: 1.3;
min-width: 0;
}
.music-now {
color: var(--amber);
text-transform: lowercase;
}
.music-title {
color: var(--cream-soft);
font-family: var(--serif-body);
font-size: 13px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music-title em {
color: var(--cream-dim);
font-style: italic;
}
/* Hide the audio player when the terminal is fullscreen — it's distracting
while reading inside the CRT. Music continues playing if started. */
body.screen-fullscreen .music-player {
display: none !important;
}
@media (max-width: 720px) {
.music-player {
bottom: 12px;
left: 12px;
right: 12px;
max-width: none;
}
.music-title { font-size: 12px; }
}
/* =========================================================
COMMENTS — Cusdis embed (terminal-themed)
========================================================= */
.comments-cta {
text-align: center;
margin: 14px 0 8px;
font-family: var(--mono-pixel);
}
.comments-link {
color: var(--term-accent-bright);
font-family: var(--mono-pixel);
letter-spacing: 0.06em;
text-decoration: none;
font-size: 1.05em;
text-shadow: 0 0 8px rgba(237, 224, 191, 0.4);
border: 1px solid var(--term-accent-soft);
padding: 6px 14px;
border-radius: 4px;
background: rgba(216, 200, 160, 0.08);
transition: all 0.2s ease;
display: inline-block;
}
.comments-link:hover {
background: rgba(216, 200, 160, 0.18);
box-shadow: 0 0 14px rgba(237, 224, 191, 0.4);
color: var(--term-accent-bright);
}
.comments-section {
margin: 22px 0 6px;
padding: 14px 4px 4px;
border-top: 1px dashed rgba(120, 220, 120, 0.25);
}
.comments-section .section-head {
margin-top: 4px;
}
/* Cusdis embed — try to harmonize with the cream/amber/green palette.
Cusdis renders inside an iframe so we can only style the host container,
not the inner widget. data-theme="dark" handles the inside. */
#cusdis_thread {
margin: 14px 0;
background: rgba(13, 10, 8, 0.55);
border: 1px solid var(--gold-rule);
border-radius: 6px;
padding: 8px;
min-height: 60px;
}
#cusdis_thread iframe {
background: transparent !important;
border-radius: 4px;
}
.comments-fallback {
font-family: var(--serif-aged);
color: var(--phosphor-dim);
font-size: 0.92em;
text-align: center;
margin: 10px 0 4px;
}
.comments-fallback em { color: var(--cream-dim); }
.comments-fallback code {
font-family: var(--mono-meta);
color: var(--amber);
background: rgba(217, 154, 58, 0.1);
padding: 1px 5px;
border-radius: 3px;
font-size: 0.92em;
}
/* =========================================================
ROUND 7 — TYPED POST VARIANTS, PAGINATION,
PAPERS PARCHMENT WORLD, SHUTDOWN ANIMATION
========================================================= */
/* ---- Type tags (small caps marker prepended to titles) ---- */
.type-tag {
font-family: var(--mono-meta);
color: var(--amber);
letter-spacing: 0.1em;
font-size: 0.78em;
font-style: normal;
margin-right: 6px;
text-transform: uppercase;
}
.type-tag--muted {
color: var(--term-accent-soft);
opacity: 0.85;
}
.link-arrow {
margin-left: 6px;
color: var(--amber);
opacity: 0.85;
font-style: normal;
}
/* ---- MEMO inline (no detail page) ---- */
/* Memos read as INDEX CARDS / paper inserts pinned into the stream — a
subtly warmer parchment panel with hairline frame. Body stays cream
serif (same voice as articles), but the container makes the memo feel
like a separate artifact rather than another scroll. No new accent
color — uses existing parchment/gold tokens only. */
.post-item--memo {
padding: 14px 18px 12px;
margin: 4px 0 14px;
/* Memos render as a SECOND-SCREEN PANEL — the cool-blue CRT cousin of
the main phosphor terminal. Blue terminals (DEC VT, VAX consoles,
early IBM 3270) are a real piece of the lineage, so this fits the
CRT vocabulary without introducing a foreign accent. */
background:
linear-gradient(
180deg,
rgba(96, 150, 200, 0.10) 0%,
rgba(80, 130, 180, 0.07) 100%
);
border-top: 1px solid rgba(140, 180, 220, 0.32);
border-bottom: 1px solid rgba(140, 180, 220, 0.32);
box-shadow:
inset 0 1px 0 rgba(180, 210, 240, 0.08),
inset 0 -1px 0 rgba(180, 210, 240, 0.05),
0 0 18px rgba(120, 170, 220, 0.06);
position: relative;
}
.post-item--memo .memo-header {
font-family: var(--mono-meta);
/* Header label in soft cyan to match the panel tint, replacing the
amber. This is the only place the new color reads as text. */
color: #9bc8e6;
letter-spacing: 0.1em;
font-size: 0.82em;
margin-bottom: 10px;
text-transform: uppercase;
opacity: 0.95;
text-shadow: 0 0 6px rgba(120, 180, 220, 0.35);
}
/* Memo body uses the manuscript voice (cream serif), NOT the terminal
default. The surrounding .screen-inner forces VT323/phosphor on every
descendant, so we have to override font-family, color, AND text-shadow
here — otherwise memos render as green pixel mono. */
.post-item--memo .memo-body,
.post-item--memo .memo-body p,
.post-item--memo .memo-body em,
.post-item--memo .memo-body strong {
font-family: var(--serif-body);
color: var(--cream);
text-shadow: none;
}
.post-item--memo .memo-body {
max-width: 56ch;
font-size: 1.02em;
line-height: 1.55;
letter-spacing: 0;
}
.post-item--memo .memo-body p {
margin: 0 0 0.6em;
}
.post-item--memo .memo-body em {
font-style: italic;
color: var(--cream);
}
.post-item--memo .memo-body strong {
font-weight: 600;
color: var(--cream);
}
/* Drop-cap inside memo: cream serif, matches the manuscript drop-cap
style used elsewhere instead of the terminal's pixel default. */
.post-item--memo .memo-body .dropcap {
font-family: var(--serif-display, var(--serif-body));
color: var(--cream);
text-shadow: none;
font-size: 3em;
line-height: 0.85;
float: left;
padding: 4px 8px 0 0;
font-weight: 500;
}
/* The bottom rule is now redundant with the panel's bottom border. */
.post-item--memo .memo-rule {
display: none;
}
/* ---- QUOTE (list card AND post detail) ----
The body of a quote post is rendered as a real by the markdown
build, so the styles below must apply to that — not just to a
.pullquote class. Treatment: cream Cormorant italic, no glow, no pixel font.
The terminal's green + amber pull only into the frame's left rule and the
opening glyph; the words themselves read as set type from a book.
*/
.post-item--quote {
padding: 4px 6px 14px;
border-bottom: 1px dashed rgba(160, 145, 110, 0.18);
}
.post-item--quote .quote-frame {
position: relative;
padding: 14px 22px 12px 30px;
background: rgba(217, 154, 58, 0.035);
border-left: 2px solid rgba(217, 154, 58, 0.55);
}
.post-item--quote .quote-frame::before {
content: "❝";
position: absolute;
left: 6px;
top: -2px;
font-family: var(--serif-display);
color: var(--amber);
font-size: 1.5em;
opacity: 0.55;
line-height: 1;
text-shadow: none;
}
/* The actual quote body — covers both real markup and the
legacy .pullquote class. Override the terminal phosphor + VT323 that
otherwise cascade from .screen-inner. */
.post-item--quote .quote-frame blockquote,
.post-item--quote .pullquote {
font-family: var(--serif-body);
font-size: 1.18em;
font-style: italic;
color: var(--cream);
line-height: 1.55;
margin: 0;
padding: 0;
border: 0;
background: none;
text-shadow: none;
letter-spacing: 0;
hyphens: none;
}
.post-item--quote .quote-frame blockquote p,
.post-item--quote .pullquote p {
margin: 0 0 0.5em;
font-family: inherit;
color: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
text-shadow: none;
text-align: left;
}
.post-item--quote .quote-frame blockquote p:last-child,
.post-item--quote .pullquote p:last-child { margin-bottom: 0; }
/* Drop-cap inside a quote card — keep the beautiful cream serif initial,
override any green-phosphor inheritance from the surrounding terminal. */
.post-item--quote .quote-frame .dropcap,
.post-item--quote .pullquote .dropcap {
font-family: var(--serif-display, var(--serif-body));
color: var(--cream);
text-shadow: none;
font-style: normal;
}
.quote-attribution {
font-family: var(--mono-meta);
font-size: 0.82em;
color: var(--amber);
letter-spacing: 0.08em;
margin-top: 10px;
text-align: right;
text-shadow: none;
opacity: 0.88;
}
/* ---- LINK posts (external) ---- */
.post-item--link .link-prominent {
color: var(--phosphor);
text-shadow: 0 0 6px rgba(136, 224, 120, 0.25);
}
.post-item--link .post-title {
font-style: italic;
color: var(--cream);
}
/* Legacy posts (video/letter/series_part types) are auto-migrated to
memo/article/link by build.py, so per-type CSS for those is no longer
needed. Only the live types have rules below. */
.series-back-link {
display: inline-block;
font-family: var(--mono-pixel);
color: var(--phosphor);
text-decoration: none;
font-size: 1.05em;
margin: 0 0 14px;
letter-spacing: 0.04em;
}
.series-back-link:hover { color: var(--amber-bright); text-shadow: 0 0 6px rgba(240, 181, 80, 0.3); }
/* ---- SERIES TOC list (for series//index.html and inline) ---- */
.series-toc-list {
list-style: none;
margin: 12px 0 6px;
padding: 0;
}
.series-toc-item {
border-bottom: 1px dashed rgba(160, 145, 110, 0.18);
padding: 10px 4px;
}
.series-toc-item:last-child { border-bottom: 0; }
.series-toc-link {
display: block;
text-decoration: none;
color: var(--cream);
}
.series-toc-link:hover .series-toc-title { color: var(--amber-bright); }
.series-toc-part {
font-family: var(--mono-meta);
font-size: 0.82em;
letter-spacing: 0.1em;
color: var(--amber);
text-transform: uppercase;
}
.series-toc-title {
display: block;
font-family: var(--serif-display);
font-size: 1.18em;
letter-spacing: 0.04em;
color: var(--cream);
margin-top: 2px;
}
.series-toc-summary {
display: block;
font-family: var(--serif-body);
font-size: 0.98em;
color: var(--cream-soft);
margin-top: 4px;
font-style: italic;
}
.series-toc-date {
font-family: var(--mono-meta);
font-size: 0.78em;
color: var(--term-accent-soft);
margin-left: 8px;
letter-spacing: 0.06em;
}
/* ---- PAGINATION block ---- */
.pagination-block {
margin: 20px 4px 8px;
padding: 12px 0 4px;
border-top: 1px dashed rgba(160, 145, 110, 0.22);
}
.pagination-block .prompt-line {
color: var(--phosphor-dim);
font-family: var(--mono-pixel);
font-size: 1.05em;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.pagination-controls {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.page-btn {
font-family: var(--mono-pixel);
font-size: 1.08em;
color: var(--phosphor);
text-decoration: none;
letter-spacing: 0.06em;
padding: 4px 10px;
border: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, text-shadow 0.15s ease;
}
.page-btn:hover {
color: var(--amber-bright);
border-color: var(--gold-rule);
text-shadow: 0 0 6px rgba(240, 181, 80, 0.35);
}
.page-btn--disabled {
color: var(--cream-dim);
opacity: 0.45;
pointer-events: none;
cursor: default;
}
/* =========================================================
PARCHMENT PAGE (Round 9)
Papers is a sister page to home. The .parchment-page element
replaces .crt-container on /papers/ and /papers//. It sits
inline in the document flow, occupying the same vertical slot
the CRT does on the home page.
Implementation note: we keep the existing .crt-container shell
and crt.png illustration so the candle and books — which are
baked into the CRT illustration on the right — stay visible.
On papers pages the .screen content is hidden and the parchment
sheet sits over the CRT screen area as the new centerpiece.
No animations, no fixed overlays.
========================================================= */
/* On papers pages: the parchment REPLACES the CRT terminal entirely.
The CRT illustration (which contains the keyboard, dials, candle,
and books) is removed from view so the parchment becomes the sole
centerpiece, filling the desk space the CRT formerly occupied. */
.parchment-page .crt-image,
.parchment-page .screen,
.parchment-page .screen-inner,
.parchment-page .screen-expand {
display: none !important;
visibility: hidden !important;
}
.parchment-page .crt-container {
cursor: default;
/* No CRT image to size the container — give it intrinsic height
equal to the parchment so the layout slot is preserved.
IMPORTANT: override the global .crt-container negative margin-top
(-112px desktop / -56px mobile) which is meant to pull the CRT
illustration close to the nav. On parchment pages there is no
CRT image — the negative margin would yank the parchment up into
and over the nav bar (Safari rendering bug in R27). */
display: block;
min-height: 0;
margin-top: 24px;
}
/* The parchment sheet — paper layer that GROWS with its content.
Composed of THREE layered backgrounds so torn deckle edges keep
their natural pixel scale no matter how tall the sheet grows:
1. parchment_top.png — fixed-height torn deckle, top edge
2. parchment_bottom.png — fixed-height torn deckle + curled
corner, bottom edge
3. parchment_middle.png — textured middle band, repeats
vertically to fill any remaining
height
The middle tile has matching side-edge deckle so the left/right
torn texture is continuous from top to bottom. The pen sits as
its own element below this sheet. */
.parchment-sheet {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
/* Minimum height keeps short pages from looking like a slip. */
min-height: 56vh;
/* R27 (final): use the ORIGINAL parchment_paper.png as a single
stretched background — 100% width AND 100% height. No tiles, no
deckle overlays, no seams. The torn edges are already baked into
parchment_paper.png natively. Vertical stretch on a hand-painted
watercolor texture is imperceptible (the texture has no straight
features that would betray distortion). This guarantees seamless
rendering on every browser including Safari. */
background-color: #fbdfbd;
background-image: url('assets/parchment_paper.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
z-index: 4;
pointer-events: auto;
filter: drop-shadow(8px 14px 32px rgba(0, 0, 0, 0.65));
}
/* Inner content area — flows in normal document flow inside the
parchment, with padding tuned to clear the torn deckle bands at
top and bottom (each band is ~24% of sheet width tall in native
pixels). Top/bottom padding is generous enough that the first and
last lines of text never overlap the deckle, regardless of sheet
height. */
.parchment-inner {
position: relative;
/* R27: reduce top padding so the page title ("Papers") sits near
the top of the parchment, just clear of the torn deckle, rather
than floating near the middle. Bottom padding kept generous to
clear the curled corner. */
padding: max(70px, 14%) 9% max(120px, 24%) 9%;
font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
color: #3a2818;
}
/* The fountain pen — sits just below the paper sheet as its own
element. Fixed aspect ratio so it never distorts. */
.parchment-pen {
display: block;
width: 70%;
max-width: 480px;
margin: 14px auto 0;
aspect-ratio: 648 / 77;
background-image: url('assets/parchment_pen.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.55));
pointer-events: none;
}
.paper-content { padding: 4px 0 4px; }
/* "← back to papers" link at the top of paper detail content. Slightly
indented so it doesn't get clipped by the parchment's upper-left curl. */
.papers-back-link {
display: inline-block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 0.82em;
color: #6b4f2a;
text-decoration: none;
letter-spacing: 0.04em;
margin: 0 0 12px;
padding: 2px 4px 4px 0;
transition: color 0.15s ease;
}
.papers-back-link:hover {
color: #3a2818;
text-decoration: none;
}
/* =========================================================
PAPER TYPOGRAPHY (on parchment)
========================================================= */
.paper-content .paper-title {
font-family: 'Cinzel', 'Cormorant Garamond', serif;
font-size: 1.5em;
letter-spacing: 0.04em;
color: #2a1810;
text-align: center;
margin: 4px 0 4px;
line-height: 1.22;
font-weight: 600;
}
.paper-content .paper-dateline {
font-family: 'JetBrains Mono', 'Cormorant Garamond', monospace;
font-variant: small-caps;
font-size: 0.62em;
letter-spacing: 0.22em;
color: #6b4f2a;
text-align: center;
margin: 0 0 10px;
}
.paper-content .paper-rule {
border: 0;
border-top: 1px solid rgba(58, 40, 24, 0.3);
margin: 6px auto;
width: 50%;
}
.paper-content .paper-abstract {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.18em;
line-height: 1.5;
color: #4a341e;
margin: 6px 8px 10px;
padding: 6px 0;
text-align: justify;
hyphens: auto;
}
.paper-content .paper-abstract-label {
display: inline;
font-family: 'Cinzel', serif;
font-style: normal;
font-weight: 600;
letter-spacing: 0.18em;
font-size: 0.78em;
color: #6b4f2a;
margin-right: 6px;
text-transform: uppercase;
}
.paper-content .paper-abstract-body { font-style: italic; }
.paper-content .paper-abstract-body em { font-style: italic; color: #5a3a1a; }
.paper-content .paper-body {
font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
font-size: 1.32em;
line-height: 1.5;
color: #3a2818;
text-align: justify;
hyphens: auto;
}
.paper-content .paper-body p {
margin: 0 0 0.7em;
text-indent: 1.4em;
}
.paper-content .paper-body p:first-of-type { text-indent: 0; }
.paper-content .paper-body > p:first-child::first-letter,
.paper-content .paper-body > h2:first-child + p::first-letter {
font-family: 'Cinzel', serif;
font-size: 3em;
font-weight: 600;
float: left;
line-height: 0.9;
margin: 0.05em 0.08em 0 0;
color: #2a1810;
}
.paper-content .paper-body > h2:first-child + p { text-indent: 0; }
.paper-content .paper-body .footnote p::first-letter,
.paper-content .paper-body ol p::first-letter,
.paper-content .paper-body ul p::first-letter,
.paper-content .paper-body blockquote p::first-letter {
font-size: 1em;
font-family: inherit;
font-weight: inherit;
float: none;
margin: 0;
color: inherit;
line-height: inherit;
}
.paper-content .paper-body h2 {
font-family: 'Cinzel', serif;
font-size: 0.95em;
letter-spacing: 0.18em;
text-align: center;
font-variant: small-caps;
font-weight: 600;
color: #2a1810;
margin: 16px 0 8px;
}
.paper-content .paper-body h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 0.95em;
font-style: italic;
color: #4a3220;
margin: 12px 0 6px;
}
.paper-content .paper-body blockquote {
margin: 8px 18px;
font-style: italic;
color: #5a3a1a;
border-left: 2px solid rgba(90, 58, 26, 0.45);
padding-left: 10px;
}
.paper-content .paper-body em { color: #5a3a1a; }
.paper-content .paper-body a {
color: #7a4f1f;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.paper-content .paper-body hr {
border: 0;
border-top: 1px solid rgba(58, 40, 24, 0.3);
margin: 14px auto;
width: 60%;
}
.paper-content .paper-body sup { font-size: 0.7em; color: #7a4f1f; }
.paper-content .paper-body .footnote {
font-size: 0.82em;
color: #5a3a1a;
margin-top: 14px;
padding-top: 6px;
border-top: 1px solid rgba(58, 40, 24, 0.3);
}
.paper-content .paper-body .footnote-ref { color: #7a4f1f; text-decoration: none; }
.paper-content .paper-body .footnote-backref { color: #7a4f1f; text-decoration: none; margin-left: 4px; }
/* =========================================================
PAPERS LIST (on parchment, papers/index.html)
========================================================= */
.paper-content .papers-list-header {
font-family: 'Cinzel', serif;
font-variant: small-caps;
letter-spacing: 0.22em;
font-size: 1.3em;
text-align: center;
color: #2a1810;
margin: 2px 0 4px;
font-weight: 600;
}
/* Discipline section heading (Metaphysics, Theology, Philosophy of Religion, …). */
.paper-content .papers-section-head {
font-family: 'Cinzel', serif;
font-variant: small-caps;
letter-spacing: 0.22em;
font-size: 0.95em;
text-align: center;
color: #2a1810;
font-weight: 600;
margin: 22px 0 8px;
padding-top: 6px;
border-top: 1px solid rgba(58, 40, 24, 0.22);
}
.paper-content .papers-section-head:first-of-type {
margin-top: 14px;
border-top: 0;
padding-top: 0;
}
/* CV-style numbered list of papers. The list reads like an academic
CV's "Publications" section: one line per paper, title left,
dateline right-aligned, with a numeric marker drawn via a CSS
counter (more reliable than ::marker on flex list items across
browsers — Safari can drop ::marker styling on display:flex). */
.paper-content .papers-list {
list-style: none;
margin: 6px 0 0;
padding: 0;
color: #2a1810;
}
.paper-content .papers-list-cv {
counter-reset: tp-paper;
}
.paper-content .papers-list-item {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1em;
margin: 0;
padding: 6px 0 6px 2.6em;
border-bottom: 0;
font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
counter-increment: tp-paper;
}
/* Use the explicit `value` attribute we set in build.py so numbering
stays continuous across discipline groups, just like a CV. */
.paper-content .papers-list-item::before {
content: attr(value) ".";
position: absolute;
left: 0;
top: 6px;
width: 2.2em;
text-align: right;
padding-right: 0.4em;
font-family: 'JetBrains Mono', 'Cormorant Garamond', monospace;
font-size: 0.85em;
color: #6b4f2a;
font-weight: 500;
letter-spacing: 0.04em;
}
.paper-content .papers-list-link {
flex: 1 1 auto;
text-decoration: none;
font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
font-size: 1.18em;
letter-spacing: 0.01em;
color: #2a1810;
font-weight: 500;
border-bottom: 0;
padding: 0;
transition: color 0.15s ease;
}
.paper-content .papers-list-link:hover {
color: #7a4f1f;
text-decoration: underline;
text-decoration-color: rgba(122, 79, 31, 0.55);
text-underline-offset: 3px;
}
.paper-content .papers-list-date {
flex: 0 0 auto;
font-family: 'JetBrains Mono', monospace;
font-variant: small-caps;
letter-spacing: 0.16em;
font-size: 0.72em;
color: #6b4f2a;
white-space: nowrap;
}
/* =========================================================
MOBILE — parchment scales with the CRT illustration
========================================================= */
@media (max-width: 720px) {
/* On mobile, let the parchment fill the full viewport width
(small 8px gutters) so it reads as a real sheet of paper
rather than a thumbnail. */
.parchment-page .crt-container {
width: calc(100vw - 16px);
max-width: none;
/* R27: keep small positive margin-top so the parchment never sits
above the nav. Without this the global -56px mobile pull leaks
through and the parchment overlaps the nav bar on Safari. */
margin: 12px auto 24px;
}
.parchment-sheet {
min-height: 70vh;
}
.parchment-inner {
/* R27: less top padding on mobile too so the "Papers" title sits
near the top of the sheet. */
padding: max(60px, 14%) 9% max(90px, 22%) 9%;
}
.parchment-pen {
width: 80%;
margin-top: 10px;
}
.paper-content .paper-title { font-size: 1.25em; }
.paper-content .paper-body { font-size: 1.18em; }
.paper-content .paper-body p { text-indent: 1.1em; }
.paper-content .paper-body > p:first-child::first-letter,
.paper-content .paper-body > h2:first-child + p::first-letter {
font-size: 2.6em;
}
.paper-content .paper-abstract { margin: 4px 4px 8px; padding: 4px 0; font-size: 1.08em; }
.paper-content .papers-list-link { font-size: 1.08em; }
.paper-content .papers-list-date { font-size: 0.66em; }
.paper-content .papers-section-head { font-size: 0.88em; margin: 18px 0 6px; }
.paper-content .papers-list-item { padding: 5px 0 5px 2.2em; gap: 0.6em; }
.paper-content .papers-list-item::before { width: 1.9em; top: 5px; font-size: 0.78em; }
}
/* ============================================================
Round 12 — Photo type, Smart-link (YouTube/Vimeo) thumbnails,
External-link blue cues.
Photos and video thumbnails MUST have hard size caps so the
terminal feed never gets a 4000px image dumped into it. We
constrain by max-height (the dimension that breaks scrolling)
and let width follow with object-fit: cover.
============================================================ */
/* ---- External link blue ----------------------------------------
Body-text inside the terminal screen reads
in soft blue (--term-blue), parallel to the memo register: "this
is another terminal session." Restricted to the screen interior so
it never leaks into nav/masthead/footer. Internal in-site links
(href starting with /, ../, #, ?) keep the cream color. */
.screen-inner .essay-body-wrap a[href^="http://"],
.screen-inner .essay-body-wrap a[href^="https://"],
.screen-inner .post-summary + a[href^="http"],
.screen-inner .memo-body a[href^="http"] {
color: var(--term-blue);
text-decoration-color: var(--term-blue-soft);
text-shadow: 0 0 6px rgba(120, 170, 220, 0.18);
}
.screen-inner .essay-body-wrap a[href^="http://"]:hover,
.screen-inner .essay-body-wrap a[href^="https://"]:hover,
.screen-inner .memo-body a[href^="http"]:hover {
color: #c5dff2;
text-shadow: 0 0 10px rgba(120, 170, 220, 0.45);
}
/* Tiny ↗ glyph after external links in body text (CSS-generated so
markdown source stays clean). The .link-arrow class on explicit
link-post titles takes priority and is styled separately. */
.screen-inner .essay-body-wrap a[href^="http://"]::after,
.screen-inner .essay-body-wrap a[href^="https://"]::after,
.screen-inner .memo-body a[href^="http"]::after {
content: " \2197";
font-size: 0.85em;
color: var(--term-blue-soft);
margin-left: 1px;
}
/* ---- Smart-link (YouTube/Vimeo) thumbnail card ----------------
Big-but-bounded thumbnail card inline in the terminal feed. The
whole frame is a clickable that opens YouTube in a new tab.
The play indicator and corner badge are CSS-generated overlays so
they look like part of the CRT, not YouTube chrome. */
.post-item--video-link {
margin: 22px 0 28px;
padding: 12px 0 6px;
}
.video-thumb-frame {
display: block;
position: relative;
/* Hard cap. 16:9 ratio is preserved via aspect-ratio. */
max-width: 480px;
width: 100%;
aspect-ratio: 16 / 9;
margin: 6px 0 10px;
border: 1px solid rgba(120, 220, 120, 0.32);
background: #000;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 18px rgba(120, 220, 120, 0.10),
inset 0 0 22px rgba(0, 0, 0, 0.45);
text-decoration: none;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.video-thumb-frame:hover {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 26px rgba(120, 220, 120, 0.22),
inset 0 0 22px rgba(0, 0, 0, 0.45);
}
.video-thumb-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Subtle desaturation so YouTube thumbs don't clash with the CRT. */
filter: contrast(0.94) saturate(0.88) brightness(0.95);
}
.video-thumb-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: var(--mono-pixel);
font-size: 1.6em;
letter-spacing: 0.2em;
color: var(--phosphor);
text-shadow: 0 0 8px rgba(120, 220, 120, 0.45);
background: linear-gradient(180deg, rgba(120, 220, 120, 0.05), rgba(0, 0, 0, 0.4));
}
/* Centered play triangle. CRT phosphor color, not YouTube red. */
.video-thumb-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2.8em;
color: var(--phosphor);
text-shadow:
0 0 10px rgba(120, 220, 120, 0.65),
0 0 22px rgba(120, 220, 120, 0.35),
0 2px 4px rgba(0, 0, 0, 0.8);
line-height: 1;
opacity: 0.92;
pointer-events: none;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.video-thumb-frame:hover .video-thumb-play {
transform: translate(-50%, -50%) scale(1.08);
opacity: 1;
}
/* Corner badge in CRT font so the YT brand reads as a system label,
not a watermark. */
.video-thumb-corner {
position: absolute;
bottom: 6px;
right: 8px;
font-family: var(--mono-pixel);
font-size: 0.85em;
letter-spacing: 0.06em;
color: var(--term-blue);
background: rgba(8, 16, 10, 0.85);
border: 1px solid var(--term-blue-dim);
padding: 1px 6px;
border-radius: 2px;
text-shadow: 0 0 6px rgba(120, 170, 220, 0.35);
pointer-events: none;
}
/* Title row for smart links — same as plain links, but the title
anchor is also an external . */
.post-link--video {
display: block;
text-decoration: none;
}
.post-link--video .post-title {
color: var(--cream);
font-family: var(--serif-display);
}
.post-link--video:hover .post-title {
color: var(--term-accent-bright);
}
/* On the post detail page, give the thumbnail a bit more breathing
room — same hard cap, just slightly larger. */
.video-thumb-frame--detail {
max-width: 640px;
margin: 14px auto 18px;
}
/* ---- External (non-video) link rows ---------------------------
Plain `[ LINK ]` rows. Title in cream serif; the ↗ glyph and the
underline pick up the external-blue cue. */
.post-link--external .post-title {
color: var(--cream);
}
.post-link--external:hover .post-title {
color: var(--term-accent-bright);
}
.post-link--external .link-arrow {
color: var(--term-blue);
font-size: 0.88em;
text-shadow: 0 0 6px rgba(120, 170, 220, 0.30);
margin-left: 2px;
}
/* ---- Photo type ---------------------------------------------------
Inline image card. Width is capped so even a 4000px panoramic
doesn't push the row to the next county. Height is also bounded so
tall portraits stay reasonable inside the feed. */
.post-item--photo {
margin: 22px 0 28px;
padding: 12px 0 6px;
}
.photo-frame {
display: block;
position: relative;
max-width: 420px;
width: 100%;
/* Cap how tall the inline thumbnail can grow on portrait images.
Beyond this, the image is cropped (object-fit: cover) so the
terminal row stays predictable. */
max-height: 360px;
margin: 6px 0 10px;
background: #000;
overflow: hidden;
border: 1px solid rgba(216, 200, 160, 0.28);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 14px rgba(216, 200, 160, 0.10),
inset 0 0 18px rgba(0, 0, 0, 0.45);
text-decoration: none;
transition: box-shadow 0.25s ease;
}
.photo-frame:hover {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 22px rgba(216, 200, 160, 0.22),
inset 0 0 18px rgba(0, 0, 0, 0.45);
}
.photo-image {
display: block;
width: 100%;
height: 100%;
max-height: 360px;
object-fit: cover;
filter: contrast(0.97) saturate(0.96);
}
.photo-caption {
display: block;
color: var(--term-accent);
font-family: var(--serif-body);
font-style: italic;
font-size: 0.95em;
margin: 4px 0 6px;
max-width: 56ch;
}
.post-link--photo {
display: block;
text-decoration: none;
}
.post-link--photo .post-title {
color: var(--cream);
font-family: var(--serif-display);
}
.post-link--photo:hover .post-title {
color: var(--term-accent-bright);
}
/* Detail page: relax the cap so the photo can breathe, but still
bound it to the screen-inner content width. */
.photo-frame--detail {
max-width: 100%;
max-height: none;
margin: 14px auto 8px;
border: 1px solid rgba(216, 200, 160, 0.22);
}
.photo-image--detail {
max-height: none;
object-fit: contain;
}
.photo-frame--detail figcaption {
display: block;
text-align: center;
color: var(--term-accent);
font-family: var(--serif-body);
font-style: italic;
font-size: 0.95em;
margin: 8px auto 0;
max-width: 56ch;
}
/* ---- Mobile sizing ---------------------------------------------- */
@media (max-width: 720px) {
.video-thumb-frame { max-width: 100%; }
.video-thumb-play { font-size: 2.2em; }
.video-thumb-corner { font-size: 0.72em; padding: 1px 4px; bottom: 4px; right: 5px; }
.photo-frame { max-width: 100%; max-height: 280px; }
.photo-image { max-height: 280px; }
}
/* ============================================================ */
/* FOOTNOTES INSIDE THE TERMINAL */
/* The markdown footnotes extension emits: */
/*