/* ============================================================
Course Code — "The Almanac" (Signal palette)
One vanilla-CSS design system. No preprocessor, no build step.
Fonts load via a single in (see README).
Token NAMES are the API (MD3). Values are ours.
============================================================ */
/* ---------- 01 · TOKENS — DARK EDITORIAL TERMINAL (the only edition) ---------- */
:root {
/* surfaces (green-charcoal ramp — the whole site lives inside the CRT) */
--surface: #0c1310;
--surface-dim: #090f0c;
--surface-container-lowest: #0a130f; /* code blocks, footer band */
--surface-container-low: #111c15;
--surface-container: #142219;
--surface-container-high: #16261c;
--surface-container-highest: #1c2f23;
--surface-bright: #24392c;
--surface-variant: #16261c;
--surface-tint: #8fe39c;
/* text — off-white serif prose; green is never paragraph ink */
--on-surface: #eef3ea;
--on-surface-variant: #8aa08d;
--on-surface-faint: #5f7a63; /* added: mono datelines / footnote ink */
--on-surface-body: #b7c2b3; /* added: long-form prose ink */
/* accents — phosphor green is the working ink, amber is rationed to the ★ */
--primary: #8fe39c;
--on-primary: #0b1a10;
--primary-container: #1d3a26;
--on-primary-container: #c8ffce;
--secondary: #e3a05a; /* warm amber — ★ permalink, rare accents */
--on-secondary: #1a1204;
--secondary-container: #3a2c12;
--accent: #3ff05a; /* focus ring, nav underline, glow stroke */
/* borders / inverse */
--outline: rgba(63, 240, 90, 0.16);
--outline-variant: rgba(63, 240, 90, 0.09);
--inverse-surface: #eef3ea;
--inverse-on-surface: #0c1310;
/* fonts */
--font-display: "Spectral", Georgia, serif;
--font-body: "IBM Plex Sans", system-ui, sans-serif;
--font-label: "Spline Sans Mono", ui-monospace, monospace;
/* type scale */
--text-display-lg: clamp(2.75rem, 6vw, 4.875rem);
--text-headline-md: clamp(2rem, 3.2vw, 2.375rem);
--text-article-title: clamp(2rem, 4vw, 3rem);
--text-title-lg: 1.375rem;
--text-stream-title: 2rem; /* added: homepage river entry title */
--text-body-lg: 1.1875rem;
--text-body-md: 1rem;
--text-label-md: 0.8125rem;
--text-label-sm: 0.71875rem; /* added: 11.5px chips / footers */
--text-code: 0.9375rem;
/* spacing (4px base, non-contiguous) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-7: 28px; /* added */
--space-8: 32px; --space-10: 40px; --space-12: 48px;
--space-16: 64px; --space-20: 80px; --space-24: 96px; /* added */
/* radius */
--radius-pill: 999px;
--radius-sm: 5px;
--radius-md: 10px;
/* layout (added: re-tokenized hardcodes) */
--shell-width: 1200px;
/* the page shell — writings index, projects, tag pages, standalone pages.
One width, one left edge. */
--shell-inner: 1120px;
/* the reading measure — the home stream and dated entries stay narrow so
the line length stays comfortable */
--stream-width: calc(var(--prose-width) + 2 * var(--space-10));
--prose-width: 48rem;
--featured-width: 860px;
--nav-height: 4rem;
--nav-z: 50;
/* motion */
--motion-fast: 180ms;
--motion-menu: 220ms;
--ease: cubic-bezier(.2, .6, .2, 1);
color-scheme: dark;
}
/* ---------- 02 · RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* keep the centered shell stable across pages that do / don't scroll:
always reserve the scrollbar gutter on classic-scrollbar platforms */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
html { overflow-y: auto; scrollbar-gutter: stable; }
}
body {
margin: 0;
background: var(--surface);
color: var(--on-surface);
font-family: var(--font-body);
font-size: var(--text-body-md);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* optional faint paper grain: layer a low-opacity noise PNG here */
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--primary) 28%, transparent); }
/* focus — every interactive element */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.da-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- 03 · LAYOUT ---------- */
.da-layout { min-height: 100vh; display: flex; flex-direction: column; }
.da-main { flex: 1; }
.da-container { max-width: var(--shell-inner); margin: 0 auto; padding: 0 var(--space-10); }
/* ---------- 04 · NAV + THEME TOGGLE + MOBILE MENU ---------- */
.da-nav {
position: sticky; top: 0; z-index: var(--nav-z);
height: var(--nav-height);
border-bottom: 1px solid var(--outline);
}
.da-nav__inner {
position: relative;
max-width: var(--shell-width); margin: 0 auto; height: 100%;
padding: 0 var(--space-10);
display: flex; align-items: center; justify-content: space-between;
}
.da-nav__brand {
font-family: var(--font-display); font-weight: 500; font-size: 1.4375rem;
letter-spacing: -0.01em; color: var(--on-surface);
}
.da-nav__brand .dot { color: var(--primary); }
.da-nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.da-nav__links a {
font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant);
transition: color var(--motion-fast) var(--ease);
text-decoration: none; padding-bottom: 21px;
}
.da-nav__links a:hover { color: var(--on-surface); text-decoration: none; }
.da-nav__links a[aria-current="page"] {
color: var(--on-surface); border-bottom: 2px solid var(--primary);
}
/* integration: expanding nav search (mono affordance -> pill input + dropdown) */
.da-search { display: flex; align-items: center; gap: var(--space-2); }
.da-search__toggle {
font-family: var(--font-label); font-size: var(--text-label-md); letter-spacing: 0.1em;
text-transform: uppercase; color: var(--on-surface-variant); background: transparent;
border: 0; cursor: pointer; padding: 0;
transition: color var(--motion-fast) var(--ease);
}
.da-search__toggle:hover { color: var(--on-surface); }
.da-search.is-open .da-search__toggle { display: none; } /* the word yields to the field */
.da-search__input {
width: 0; opacity: 0; visibility: hidden; padding: 7px 0;
font-family: var(--font-label); font-size: var(--text-label-md); color: var(--on-surface);
background: transparent; border: 1px solid var(--outline); border-radius: var(--radius-pill);
caret-color: var(--primary);
transition: width var(--motion-menu) var(--ease), opacity var(--motion-menu) var(--ease),
padding var(--motion-menu) var(--ease), visibility 0s linear var(--motion-menu);
}
.da-search.is-open .da-search__input {
width: 230px; opacity: 1; visibility: visible; padding: 7px 14px;
transition: width var(--motion-menu) var(--ease), opacity var(--motion-menu) var(--ease),
padding var(--motion-menu) var(--ease);
}
.da-search__input::placeholder { color: var(--on-surface-faint); }
.da-search__results {
position: absolute; bottom: calc(100% + 12px); left: 0;
width: min(360px, calc(100vw - 2 * var(--space-10)));
max-height: 60vh; overflow: auto;
background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-md);
padding: var(--space-2);
}
.da-search__result { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; }
.da-search__result:hover { background: var(--surface-container-low); text-decoration: none; }
.da-search__result-title { font-family: var(--font-display); font-size: 1.0625rem; color: var(--on-surface); }
.da-search__result-meta {
font-family: var(--font-label); font-size: var(--text-label-sm); color: var(--on-surface-faint);
margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.da-search__empty { font-family: var(--font-label); font-size: var(--text-label-sm); color: var(--on-surface-faint); padding: var(--space-2) var(--space-3); }
/* integration: right-side cluster — links · hamburger */
.da-nav__actions { display: flex; align-items: center; gap: var(--space-8); }
.da-nav__toggle { /* hamburger, shown < 640px */
display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
width: 34px; height: 34px; background: transparent; border: 0; cursor: pointer; padding: 0;
}
.da-nav__toggle .bar { width: 22px; height: 2px; background: var(--on-surface); }
/* mobile menu overlay */
.da-menu {
position: fixed; inset: 0; z-index: calc(var(--nav-z) + 1);
background: var(--surface); padding: var(--space-10) var(--space-6) var(--space-12);
display: flex; flex-direction: column;
}
.da-menu[hidden] { display: none; }
.da-menu__eyebrow {
font-family: var(--font-label); font-size: var(--text-label-sm);
letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface-faint);
margin-bottom: var(--space-7);
}
/* scoped to __nav, not `.da-menu a` — the overlay also holds search results,
and they must keep their own type */
.da-menu__nav a {
font-family: var(--font-label); font-weight: 400; font-size: 1.5rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--on-surface); padding: var(--space-4) 0;
border-bottom: 1px solid var(--outline-variant); text-decoration: none;
}
/* the search row below supplies its own top rule — a second one here reads
as an empty menu item */
.da-menu__nav a:last-child { border-bottom: 0; }
.da-menu__nav a .count {
font-family: var(--font-label); font-size: 0.8125rem; color: var(--primary);
vertical-align: super;
}
/* integration: menu chrome — header bar, close, nav column, appearance row */
.da-menu__header {
display: flex; align-items: center; justify-content: space-between;
height: var(--nav-height);
margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-6)) var(--space-10);
padding: 0 var(--space-5);
border-bottom: 1px solid var(--outline);
}
.da-menu__brand { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; color: var(--on-surface); }
.da-menu__brand .dot { color: var(--primary); }
.da-menu__close { background: transparent; border: 0; color: var(--primary); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.da-menu__nav { display: flex; flex-direction: column; gap: var(--space-1); }
/* integration: menu search row — the footer's expanding search, under About.
Results open DOWNWARD here (footer's panel opens up) and cap shorter so
the fixed, non-scrolling overlay never clips them. */
.da-menu__search {
position: relative;
margin-top: var(--space-10); padding-top: var(--space-6);
border-top: 1px solid var(--outline);
}
.da-menu .da-search__results { bottom: auto; top: calc(100% + 12px); max-height: 40vh; }
.da-menu { overflow-y: auto; } /* open results may run past short screens — scroll, never clip */
/* ---------- 05 · FOOTER ---------- */
.da-footer { border-top: 1px solid var(--outline); background: var(--surface-container-lowest); }
.da-footer__inner {
max-width: var(--shell-width); margin: 0 auto; padding: var(--space-8) var(--space-10);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
/* integration: footer nav row (Tags link + expanding search).
Positioning context for the results panel so it aligns to the row edge. */
.da-footer__nav { position: relative; display: flex; align-items: center; gap: var(--space-6); min-height: 34px; }
.da-footer__nav > a {
font-family: var(--font-label); font-size: var(--text-label-md); letter-spacing: 0.1em;
text-transform: uppercase; color: var(--on-surface-variant); text-decoration: none;
transition: color var(--motion-fast) var(--ease);
}
.da-footer__nav > a:hover { color: var(--on-surface); text-decoration: none; }
.da-footer__meta {
font-family: var(--font-label); font-size: var(--text-label-sm);
letter-spacing: 0.06em; color: var(--on-surface-faint); margin-top: var(--space-3);
}
.da-footer__social { display: flex; align-items: center; gap: var(--space-5); }
.da-footer__social-link { color: var(--on-surface-variant); display: inline-flex; transition: color var(--motion-fast) var(--ease); }
.da-footer__social-link:hover, .da-footer__social-link:focus-visible { color: var(--primary); }
.da-footer__social-link svg { width: 19px; height: 19px; fill: currentColor; }
/* ---------- 06 · HOMEPAGE — masthead + stream (the blog river) ---------- */
.da-home__masthead {
max-width: var(--stream-width); margin: 0 auto; padding: 52px var(--space-10) var(--space-1);
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.da-home__kicker {
font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-surface-variant);
}
.da-home__tagline {
font-family: var(--font-display); font-weight: 300; font-size: 1.6875rem;
line-height: 1.3; color: var(--on-surface); margin: var(--space-3) 0 0; max-width: 620px;
}
.da-home__tagline em { font-style: italic; color: var(--primary); }
.da-home__rss {
font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); white-space: nowrap;
}
.da-stream { max-width: var(--stream-width); margin: 0 auto; padding: var(--space-6) var(--space-10) var(--space-2); }
.da-post-item {
padding: var(--space-10) 0; border-top: 1px solid var(--outline);
}
.da-post-item__body { max-width: var(--prose-width); }
/* integration: dateline row between title and body (date · ★ permalink);
replaces the filing-stamp gutter per owner feedback on PR #17 */
.da-post-item__dateline {
font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-faint);
display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-4);
}
.da-post-item__dateline .sep { color: var(--primary); }
.da-post-item__dateline .star { color: var(--secondary); text-decoration: none; } /* amber is rationed to the ★ */
.da-post-item__title {
font-family: var(--font-display); font-weight: 400; font-size: var(--text-stream-title);
line-height: 1.14; margin: 0 0 var(--space-3); color: var(--on-surface);
}
.da-post-item__title a { color: inherit; transition: color var(--motion-fast) var(--ease); text-decoration: none; }
.da-post-item__title a:hover { color: var(--primary); }
.da-post-item--link .da-post-item__title .out { color: var(--primary); font-family: var(--font-label); font-size: 1.25rem; }
.da-post-item__source {
font-family: var(--font-label); font-size: var(--text-body-md); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--on-surface-faint); margin-bottom: var(--space-4);
}
.da-post-item__excerpt { font-size: 1.125rem; line-height: 1.7; color: var(--on-surface-body); }
.da-post-item__excerpt p { margin: 0 0 var(--space-4); }
.da-post-item__excerpt p:last-child { margin-bottom: 0; }
.da-post-item__meta {
font-family: var(--font-label); font-size: var(--text-label-sm);
letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-faint);
margin-top: var(--space-5); display: flex; gap: var(--space-3);
}
.da-post-item__meta a { color: inherit; }
.da-post-item__meta a:hover { color: var(--primary); }
/* integration: stream pager — "Older entries →" pill row */
.da-stream__older {
max-width: var(--stream-width); margin: 0 auto;
padding: var(--space-2) var(--space-10) var(--space-16);
display: flex; justify-content: center; gap: var(--space-3);
}
/* ---------- 07 · PROJECTS PAGE ---------- */
.da-projects__list { max-width: var(--shell-inner); margin: 0 auto; padding: 0 var(--space-10) var(--space-6); }
.da-projects__item {
display: grid; grid-template-columns: 130px 1fr 250px; gap: var(--space-10);
align-items: start; padding: var(--space-10) 0; border-top: 1px solid var(--outline);
}
.da-projects__gutter {
font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.9;
}
.da-projects__gutter .no { color: var(--primary); }
.da-projects__gutter .year { color: var(--on-surface); margin-top: var(--space-3); }
.da-projects__gutter .role { color: var(--on-surface-faint); }
.da-projects__title {
font-family: var(--font-display); font-weight: 400; font-size: 2rem;
line-height: 1.12; margin: 0 0 var(--space-1); color: var(--on-surface);
}
.da-projects__title a { color: inherit; }
.da-projects__title .out { color: var(--primary); font-family: var(--font-label); font-size: 1.25rem; }
.da-projects__domain {
font-family: var(--font-label); font-size: var(--text-body-md); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: var(--space-4);
}
.da-projects__desc { font-size: 1.125rem; line-height: 1.65; color: var(--on-surface-body); margin: 0 0 var(--space-4); max-width: 40rem; }
/* wrap is load-bearing: an unwrappable tech row sets a ~470px min-content
floor on the 1fr column, which shoves the thumbnail past the viewport */
.da-projects__meta {
font-family: var(--font-label); font-size: var(--text-label-sm); letter-spacing: 0.06em;
text-transform: uppercase; color: var(--on-surface-faint);
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
}
.da-projects__meta .visit { color: var(--primary); }
.da-projects__thumb { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--outline); }
.da-projects__thumb img { width: 100%; height: auto; }
/* integration: markdown body inside __desc; "next one" teaser row (per mock) */
.da-projects__desc p { margin: 0; }
.da-projects__desc p + p { margin-top: var(--space-4); }
.da-projects__next {
display: grid; grid-template-columns: 130px 1fr; gap: var(--space-10);
padding: var(--space-7) 0 var(--space-2); border-top: 1px solid var(--outline);
font-family: var(--font-label); font-size: var(--text-label-md); letter-spacing: 0.06em;
text-transform: uppercase; color: var(--on-surface-faint);
}
/* ---------- 08 · ARCHIVE + PAGINATION ---------- */
/* integration: archive page container + ul reset */
.da-archive { max-width: var(--shell-inner); margin: 0 auto; padding: 0 var(--space-10) var(--space-6); }
.da-archive__list { list-style: none; margin: 0; padding: 0; }
.da-archive__year {
font-family: var(--font-display); font-weight: 300; font-size: 2.5rem;
color: var(--primary); line-height: 1;
}
.da-archive__group { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-10); padding: var(--space-6) 0 var(--space-2); border-top: 1px solid var(--outline); }
.da-archive__item { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-7); padding: var(--space-3) 0; border-bottom: 1px solid var(--outline-variant); }
.da-archive__date { font-family: var(--font-label); font-size: var(--text-label-md); text-transform: uppercase; color: var(--on-surface-faint); }
.da-archive__title { font-family: var(--font-display); font-size: 1.3125rem; color: var(--on-surface); }
.da-archive__title a { color: inherit; }
.da-archive__title a:hover { color: var(--primary); text-decoration: none; }
.da-pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-16); }
.da-pagination a, .da-pagination span {
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-pill); font-family: var(--font-label); font-size: 0.8125rem;
border: 1px solid var(--outline); color: var(--on-surface-variant); text-decoration: none;
}
.da-pagination [aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* ---------- 09 · ARTICLE ---------- */
.da-article__header { max-width: calc(var(--prose-width) + 2 * var(--space-10)); margin: 0 auto; padding: var(--space-16) var(--space-10) 0; }
.da-article__title {
font-family: var(--font-display); font-weight: 400; font-size: var(--text-article-title);
line-height: 1.08; letter-spacing: -0.01em; margin: var(--space-5) 0 var(--space-4); color: var(--on-surface);
}
.da-article__title em { font-style: italic; color: var(--primary); }
/* integration: link-post article title — outbound with amber ↗, mono source line */
.da-article__title a { color: inherit; text-decoration: none; transition: color var(--motion-fast) var(--ease); }
.da-article__title a:hover { color: var(--primary); text-decoration: none; }
.da-article__title .out { color: var(--primary); font-family: var(--font-label); font-size: 0.625em; }
.da-article__source {
font-family: var(--font-label); font-size: var(--text-body-md); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--on-surface-faint); margin: 0 0 var(--space-3);
}
.da-article__meta {
font-family: var(--font-label); font-size: 0.78125rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--on-surface-faint); display: flex; gap: var(--space-3);
}
.da-article__meta-sep { color: var(--primary); }
.da-article__body {
max-width: calc(var(--prose-width) + 2 * var(--space-10)); margin: 0 auto; padding: var(--space-10) var(--space-10) var(--space-2);
font-size: 1.1875rem; line-height: 1.72; color: var(--on-surface-body);
}
.da-article__body p { margin: 0 0 var(--space-6); }
.da-article__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- 10 · PROSE ENVIRONMENT ---------- */
.da-article__body h2, .da-article__body h3, .da-article__body h4,
.da-post-item__excerpt h2, .da-post-item__excerpt h3, .da-post-item__excerpt h4 {
font-family: var(--font-display); font-weight: 500; color: var(--on-surface); line-height: 1.25;
}
.da-article__body h2, .da-post-item__excerpt h2 { font-size: 1.75rem; margin: var(--space-10) 0 var(--space-2); }
.da-article__body h3, .da-post-item__excerpt h3 { font-size: 1.375rem; margin: var(--space-8) 0 var(--space-2); }
/* heading-as-anchor: the heading text itself is the link, no # glyph.
Scoped variants outrank the .da-article__body a prose-link styling. */
.da-heading__link,
.da-article__body .da-heading__link,
.da-post-item__excerpt .da-heading__link { color: inherit; text-decoration: none; }
.da-heading__link:hover, .da-heading__link:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
/* quoted source material, not a pull quote: it sits at the prose size so it
reads as a quieter aside. Spectral italic + the hairline rule carry the
voice; weight is what used to make these shout. */
.da-article__body blockquote,
.da-post-item__excerpt blockquote {
margin: var(--space-7) 0; padding: 2px 0 2px var(--space-6); border-left: 1px solid var(--primary);
}
.da-article__body blockquote p,
.da-post-item__excerpt blockquote p {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.1875rem; line-height: 1.65; color: var(--on-surface); margin: 0 0 var(--space-4);
}
/* multi-paragraph quotes are common here — without this they run together */
.da-article__body blockquote p:last-child,
.da-post-item__excerpt blockquote p:last-child { margin-bottom: 0; }
.da-article__body blockquote cite,
.da-post-item__excerpt blockquote cite,
.da-article__body blockquote .da-cite {
display: block; font-family: var(--font-label); font-style: normal; font-size: 0.75rem;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: var(--space-3);
}
/* images + captions: caption is a plain italic right after the image.
Default bottom margin gives prose breathing room; an actual caption
(all-italic paragraph) pulls itself snug via :has. */
.da-article__body img,
.da-post-item__excerpt img { border-radius: var(--radius-sm); border: 1px solid var(--outline); margin: var(--space-7) 0 var(--space-6); }
.da-article__body img:has(+ p > em:only-child),
.da-post-item__excerpt img:has(+ p > em:only-child) { margin-bottom: var(--space-1); }
/* integration: render-image hook output (figure/figcaption wrapper) */
.da-article__body figure { margin: var(--space-7) 0 var(--space-6); }
.da-article__body figure img { margin: 0 0 var(--space-1); }
/* integration: a leading image sits flush under the meta/dateline — the 28px
img top margin is prose spacing, not header spacing */
.da-article__body > img:first-child,
.da-article__body > figure:first-child,
.da-article__body > :first-child img,
.da-post-item__excerpt > img:first-child,
.da-post-item__excerpt > figure:first-child,
.da-post-item__excerpt > :first-child img { margin-top: 0; }
.da-article__body img + p:has(> em:only-child) em,
.da-article__body figcaption {
font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--on-surface-variant);
}
.da-figure__zoomable { cursor: zoom-in; }
/* integration: about-page avatar (raw ![]()
in content) —
floated so text flows beside it, then wraps under */
.da-article__body img.da-avatar {
float: left; width: 220px; height: 220px; border-radius: var(--radius-pill);
object-fit: cover; margin: var(--space-1) var(--space-8) var(--space-4) 0;
}
/* code — unhighlighted shell block is the primary design */
.da-article__body pre,
.da-post-item__excerpt pre {
position: relative; background: var(--surface-container-lowest); border: 1px solid var(--outline);
border-radius: var(--radius-sm); margin: var(--space-3) 0; padding: var(--space-5) var(--space-5);
overflow-x: auto; font-family: var(--font-label); font-size: var(--text-code); line-height: 1.6; color: var(--primary);
}
.da-article__body :not(pre) > code,
.da-post-item__excerpt :not(pre) > code {
font-family: var(--font-label); font-size: 0.875em; color: var(--primary);
background: var(--surface-container); border-radius: 3px; padding: 1px 5px;
}
.da-code-prompt { color: var(--primary); } /* wrap a leading "$" in the template */
.da-code-copy {
position: absolute; top: 10px; right: 12px; font-family: var(--font-label);
font-size: 0.65625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-faint);
border: 1px solid var(--outline); border-radius: 4px; padding: 3px 8px; background: transparent; cursor: pointer;
opacity: 0; transition: opacity var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.da-article__body pre:hover .da-code-copy, .da-code-copy:focus-visible { opacity: 1; }
.da-code-copy:hover { color: var(--primary); }
/* tables + lists */
.da-article__body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: 1rem; }
.da-article__body th { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--outline); }
.da-article__body td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--outline-variant); }
.da-article__body ul, .da-article__body ol { padding-left: 22px; }
.da-article__body li { margin-bottom: var(--space-2); }
/* ---------- 11 · TAGS + PAGE HEADER ---------- */
.da-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* integration: article tag footer container + "Filed under" label (per mock) */
.da-article__tags {
max-width: calc(var(--prose-width) + 2 * var(--space-10)); margin: 0 auto;
padding: var(--space-6) var(--space-10) var(--space-8);
border-top: 1px solid var(--outline-variant);
}
.da-tags__label {
font-family: var(--font-label); font-size: var(--text-label-sm);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-faint);
margin-bottom: var(--space-3);
}
.da-tag {
font-family: var(--font-label); font-size: 0.78125rem; letter-spacing: 0.06em;
border: 1px solid var(--outline); border-radius: var(--radius-pill); padding: 5px 13px;
color: var(--on-surface-variant); text-decoration: none; transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.da-tag:hover { color: var(--on-surface); border-color: var(--primary); text-decoration: none; }
.da-tag .count { color: var(--primary); }
/* tag cloud: weight maps to count (set inline or with modifier classes) */
.da-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.da-tag-list .da-tag { text-transform: uppercase; }
.da-tag-list .is-lg { color: var(--on-surface); padding: 8px 16px; border-color: var(--outline); }
.da-tag-list .is-sm { color: var(--on-surface-faint); padding: 5px 13px; }
/* integration: tag cloud rendered as a ul + page container */
ul.da-tag-list { list-style: none; margin: 0; padding: 0; }
.da-tag-index { max-width: var(--shell-inner); margin: 0 auto; padding: var(--space-2) var(--space-10) var(--space-20); }
.da-page-header { max-width: var(--shell-inner); margin: 0 auto; padding: var(--space-16) var(--space-10) var(--space-10); }
.da-page-header__eyebrow { font-family: var(--font-label); font-size: var(--text-label-md); letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-surface-variant); }
.da-page-header__title { font-family: var(--font-display); font-weight: 300; font-size: 3.5rem; line-height: 1.05; letter-spacing: -0.015em; margin: var(--space-4) 0 var(--space-3); color: var(--on-surface); }
.da-page-header__title em { font-style: italic; color: var(--primary); }
.da-page-header__description { font-size: 1.125rem; color: var(--on-surface-variant); margin: 0; }
/* integration: quote deck (deck + deckCite front matter) — hung typographic
quotes, Spectral italic, mono cite; echoes the article blockquote voice.
Measure is wide enough for a one-line deck; balance keeps longer ones even. */
.da-page-header__quote { margin: 0; max-width: 52rem; text-wrap: balance; }
.da-page-header__quote p {
font-family: var(--font-display); font-style: italic; font-size: 1.375rem;
line-height: 1.45; color: var(--on-surface-variant); margin: 0;
}
.da-page-header__quote p::before { content: "\201C"; }
.da-page-header__quote p::after { content: "\201D"; }
.da-page-header__quote cite {
display: block; font-family: var(--font-label); font-style: normal; font-size: 0.75rem;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant);
margin-top: var(--space-2);
}
.da-page-header__quote cite::before { content: "\2014\00A0"; }
/* ---------- 12 · BUTTONS ---------- */
.da-btn--primary, .da-btn--secondary {
display: inline-block; font-family: var(--font-label); font-size: var(--text-label-md);
letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 22px; border-radius: var(--radius-pill);
text-decoration: none; cursor: pointer; transition: transform var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.da-btn--primary { background: var(--primary); color: var(--on-primary); font-weight: 500; border: 0; }
.da-btn--primary:hover { transform: translateY(-2px); text-decoration: none; } /* the ONLY lift in the system */
.da-btn--secondary { background: transparent; color: var(--on-surface); border: 1px solid var(--outline); }
.da-btn--secondary:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
/* ---------- 13 · 404 ---------- */
.da-404 { max-width: var(--shell-inner); margin: 0 auto; padding: 120px var(--space-10) 140px; }
.da-404__eyebrow { font-family: var(--font-label); font-size: var(--text-label-md); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-surface-variant); }
.da-404__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.015em; margin: var(--space-5) 0 var(--space-4); color: var(--on-surface); max-width: 760px; }
.da-404__title em { font-style: italic; color: var(--primary); }
/* integration: 404 lede paragraph (per mock) */
.da-404__description { font-size: 1.25rem; line-height: 1.5; color: var(--on-surface-variant); max-width: 520px; margin: 0 0 var(--space-8); }
/* ---------- 14 · RESPONSIVE ---------- */
/* the projects shelf is the one layout that needs a second breakpoint: its
130px gutter + 250px thumbnail leave the description under 220px once the
window drops near tablet portrait. Below this it stacks, thumbnail last —
DOM order already puts it after the text, so no `order` needed. */
@media (max-width: 860px) {
.da-projects__item { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.da-nav__links { display: none; }
.da-nav__toggle { display: inline-flex; }
.da-nav__inner { padding: 0 var(--space-5); }
.da-home__masthead, .da-stream, .da-projects__list { padding-left: var(--space-5); padding-right: var(--space-5); }
.da-archive__group { grid-template-columns: 1fr; gap: var(--space-3); }
.da-article__header, .da-article__body { padding-left: var(--space-5); padding-right: var(--space-5); }
/* integration: footer stays a row on mobile — copyright left, social right
(fits a 393px iPhone with ~55px slack). flex-wrap is the safety net for
ultra-narrow screens; the open search borrows the icons' room via :has. */
.da-footer__inner { flex-wrap: wrap; row-gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.da-footer__inner:has(.da-search.is-open) .da-footer__social { display: none; }
/* integration additions */
.da-nav__actions { gap: 14px; }
.da-article__body img.da-avatar { float: none; width: 160px; height: 160px; }
.da-search.is-open .da-search__input { width: min(230px, 70vw); }
.da-archive, .da-tag-index, .da-article__tags, .da-page-header { padding-left: var(--space-5); padding-right: var(--space-5); }
.da-404 { padding: var(--space-20) var(--space-5); }
.da-projects__next { grid-template-columns: 1fr; gap: var(--space-2); }
}
/* ---------- 15 · MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
.da-btn--primary:hover { transform: none; }
}
/* ---------- 16 · CRT PHOSPHOR CHROME (nav + footer + wordmark) ---------- */
/* integration: Claude Design CRT handoff — header and footer are the lit edges
of the screen. Glow and scanlines live ONLY here (and on the wordmark);
the reading surface between them stays flat --surface. */
:root {
--crt-phosphor: #c8ffce; /* logo core, hover/active ink */
--crt-phosphor-dim: #6fca7e; /* resting chrome-link ink */
--crt-line: rgba(63, 240, 90, 0.22);
}
.da-nav {
background: linear-gradient(180deg, #0e1a14, #0a130f 55%, #070d0a);
border-bottom-color: var(--crt-line);
}
.da-footer {
position: relative;
background: linear-gradient(0deg, #0e1a14, #0a130f 55%, #070d0a);
border-top-color: var(--crt-line);
}
.da-nav::after,
.da-footer::after { /* scanlines */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
}
.da-nav__brand, .da-menu__brand {
font-family: "VT323", var(--font-label);
font-weight: 400; font-size: 2rem; letter-spacing: 0.01em; line-height: 1;
color: var(--crt-phosphor);
text-shadow: 0 0 6px rgba(63, 240, 90, 0.55), 0 0 18px rgba(63, 240, 90, 0.25);
}
.da-nav__brand:hover {
text-decoration: none;
text-shadow: 0 0 8px rgba(63, 240, 90, 0.8), 0 0 24px rgba(63, 240, 90, 0.35);
}
.da-nav__brand .crt-prompt, .da-nav__brand .crt-cursor,
.da-menu__brand .crt-prompt, .da-menu__brand .crt-cursor { color: var(--accent); }
.da-nav__brand .crt-cursor, .da-menu__brand .crt-cursor { animation: crt-blink 1.1s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } } /* blink halts solid via §15 reduced-motion */
.da-nav__links a { color: var(--crt-phosphor-dim); }
.da-nav__links a:hover { color: var(--crt-phosphor); text-shadow: 0 0 8px rgba(63, 240, 90, 0.45); }
.da-nav__links a[aria-current="page"] { color: var(--crt-phosphor); border-bottom-color: var(--accent); }
/* the hamburger menu is the same lit surface: phosphor ink, and each row
carries the wordmark's > prompt */
.da-menu__nav a { color: var(--crt-phosphor-dim); }
.da-menu__nav a::before { content: "> "; color: var(--accent); }
.da-menu__nav a:hover, .da-menu__nav a:focus-visible { color: var(--crt-phosphor); text-shadow: 0 0 8px rgba(63, 240, 90, 0.45); }
.da-nav__toggle .bar { background: var(--crt-phosphor); }
.da-footer__nav > a,
.da-footer .da-search__toggle { color: var(--crt-phosphor-dim); }
.da-footer__nav > a:hover,
.da-footer .da-search__toggle:hover { color: var(--crt-phosphor); text-shadow: 0 0 8px rgba(63, 240, 90, 0.45); }
.da-footer__social-link { color: var(--crt-phosphor-dim); }
.da-footer__social-link:hover, .da-footer__social-link:focus-visible { color: var(--crt-phosphor); }
.da-footer .da-search__input { border-color: var(--crt-line); }