/* Fonts — self-hosted, first-party. No external font CDN is contacted (see /privacy).
IBM Plex Sans/Mono/Serif: SIL Open Font License 1.1 (github.com/IBM/plex), via the
fontsource mirror. Satoshi: ITF Free Font License (fontshare.com). woff2 files live in
/public/fonts/. latin + latin-ext subsets carry Google-standard unicode-ranges so the
browser fetches only the subset a page actually needs. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-600-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-serif-latin-ext-600-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/satoshi-400.woff2") format("woff2");}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/satoshi-500.woff2") format("woff2");}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/satoshi-700.woff2") format("woff2");}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/satoshi-900.woff2") format("woff2");}
/* ════════════════════════════════════════════════════════════════
The New American Century — site.css
Generated from the editorial system spec (v.1).
Sections:
1. Reset + variables
2. Utilities (compass mask)
3. Header
4. Footer
5. Currently (front page hero)
6. Open Questions (front page sections)
7. Book cover system
8. Notes rail (front page)
9. Article cover + reading body
10. Article components (quotes, embeds, footnotes)
11. Note card (short + long)
12. Note context blocks
13. Index pages (essays, notes)
14. About page
15. Subscribe band
16. Responsive
══════════════════════════════════════════════════════════════ */
/* 1. Reset + variables ─────────────────────────────────────────── */
:root {
--brand: #FFB400;
/* Retired the darkened gold — never use a dimmed accent; always the true brand yellow. */
--brand-dk: var(--brand);
--ink: #1A1A1A;
--ink-deep: #0A0A0A;
--paper: #FBFAF6;
--paper-warm: #F5F1E8;
--muted: #6E6A60;
--faint: rgba(26,26,26,0.10);
--hairline: rgba(26,26,26,0.18);
--faint-i: rgba(255,255,255,0.10);
/* Essay palette — "pyati canonical" chromatics + two dark neutrals */
--c-flame: #FF5340;
--c-marigold: #FFB400;
--c-coral: #FE6A4B;
--c-teal: #6CCFD6;
--c-charcoal: #2B2B2B;
--c-ink: #0A0A0A;
--display: 'Satoshi', system-ui, -apple-system, sans-serif;
--body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--serif: 'IBM Plex Serif', Georgia, serif;
--mono: 'IBM Plex Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Text selection — brand yellow with ink text */
::selection { background: var(--brand); color: var(--ink); }
::-moz-selection { background: var(--brand); color: var(--ink); }
html {
background: var(--paper); color: var(--ink); font-family: var(--body);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; cursor: pointer; transition: color .15s; }
a:hover { color: var(--brand-dk); }
img { max-width: 100%; height: auto; display: block; }
/* Focus-visible — keyboard focus gets a visible ring, and mirrors the component
:hover affordances so keyboard navigation reads as intentional. :focus-visible
only fires for keyboard/AT focus, so mouse clicks stay ring-free. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--brand-dk);
outline-offset: 3px;
border-radius: 2px;
}
a:focus-visible { color: var(--brand-dk); }
.brand:focus-visible .compass { color: var(--brand); }
.site-nav a:focus-visible { color: var(--ink); }
.site-nav a.subscribe-pill:focus-visible { background: var(--ink); color: var(--brand); border-color: var(--ink); }
.site-footer .foot-links a:focus-visible { color: var(--brand); }
.currently-body a:focus-visible { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.share-row a:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.q-foot a.q-link:focus-visible { color: var(--brand-dk); border-color: var(--brand); }
.book:focus-visible { transform: translateY(-4px); }
.notes-rail-head a:focus-visible { color: var(--ink); }
.toc a:focus-visible { color: var(--brand-dk); }
.toc li.toc-h2 > a:focus-visible { color: var(--ink); }
.aside-rail .actions a:focus-visible { background: var(--brand); border-color: var(--brand); }
.aside-rail .actions a.primary:focus-visible { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.article a:focus-visible { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.fn-link:focus-visible { color: var(--brand); }
.footnotes .fn-back:focus-visible { color: var(--brand); }
.note-crumbs a:focus-visible { color: var(--brand-dk); border-bottom-color: var(--brand); }
.note-body--display a:focus-visible,
.note-body--reading a:focus-visible { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.context-question:focus-visible { background: var(--paper); }
.adjacent-card:focus-visible { background: var(--paper-warm); border-color: var(--ink); }
.feed-note:focus-visible { background: var(--paper-warm); }
.q-note-card:focus-visible { border-color: var(--ink); }
.subscribe-form-button:focus-visible { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.subscribe-band button:focus-visible { background: var(--paper); }
.nav-search:focus-visible { color: var(--ink); }
.search-result:focus-visible { background: var(--paper-warm); }
/* 2. Utilities — compass mask-image ────────────────────────────── */
/* logo-mark.svg has a tight viewBox so the compass fills its container.
Use logo.svg (with padding) for decorative ghost backgrounds where
breathing room is wanted. */
.compass {
display: inline-block;
background-color: currentColor;
-webkit-mask-image: url('/img/logo-mark.svg');
mask-image: url('/img/logo-mark.svg');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.compass-loose {
display: inline-block;
background-color: currentColor;
-webkit-mask-image: url('/img/logo.svg');
mask-image: url('/img/logo.svg');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 3. Header ───────────────────────────────────────────────────── */
/* Skip-to-content link — off-screen until keyboard-focused, then pinned top-left. */
.skip-link {
position: absolute; left: 8px; top: -56px; z-index: 1000;
background: var(--ink); color: var(--paper);
padding: 10px 16px; border-radius: 4px;
font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
#main-content { scroll-margin-top: 8px; }
.site-header { background: var(--paper); }
.site-header-inner {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
padding: 24px 64px; max-width: 1600px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .compass { width: 32px; height: 32px; color: var(--ink); transition: color .2s; flex-shrink: 0; }
.brand:hover .compass { color: var(--brand); }
.brand-text { display: flex; align-items: center; line-height: 1; }
/* eyebrow — preserved for future restore */
.brand-text .small {
font-family: var(--mono); font-weight: 500; font-size: 10px;
letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
margin-right: 8px;
}
.brand-text .word {
/* All-caps Satoshi — cap-height matched to compass height.
Satoshi cap-ratio ≈ 0.73 (measured empirically). For compass H:
font-size = H / 0.73
30px compass → 41px font-size. */
font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700;
font-size: 41px; line-height: 1;
letter-spacing: .015em; text-transform: uppercase;
color: var(--ink);
display: inline-block;
}
/* Full wordmark on desktop/tablet; the "NAC" monogram is swapped in at ≤640px
(see the phone media block). Without these, both spans render and the header
reads "New American CenturyNAC". */
.brand-text .word-short { display: none; }
.site-nav {
display: flex; gap: 36px; align-items: center; justify-self: end;
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500;
}
.site-nav a { color: var(--muted); padding: 4px 0; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--brand); padding-bottom: 2px; }
/* scoped to .site-nav a.subscribe-pill so these win over the generic
`.site-nav a` color rules (which otherwise force gray text, and black-on-black on hover) */
.site-nav a.subscribe-pill {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 600; background: var(--brand); color: var(--ink);
display: inline-flex; align-items: center;
padding: 11px 20px; border: 1px solid var(--brand); border-radius: 2px;
transition: background .15s, color .15s, border-color .15s;
}
.site-nav a.subscribe-pill:hover { background: var(--ink); color: var(--brand); border-color: var(--ink); }
/* 4. Footer — single compact bar: links left, copyright right ──── */
.site-footer {
background: var(--ink-deep); color: var(--paper);
border-top: 4px solid var(--brand);
padding: 26px 64px;
}
.site-footer-inner {
max-width: 1600px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: baseline; gap: 20px 40px; flex-wrap: wrap;
}
.foot-links {
display: flex; gap: 12px 28px; flex-wrap: wrap;
font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 500;
}
.foot-links a { color: rgba(255,255,255,.65); }
.foot-links a:hover { color: var(--brand); }
.site-footer .base {
font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,255,255,.4); font-weight: 500;
}
.site-footer .base a.sig { color: var(--brand); }
.site-footer .base a.sig:hover { color: var(--paper); }
/* 5. Currently — front page hero ──────────────────────────────── */
.currently { background: var(--paper); }
.currently-inner { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.currently-meta {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); display: flex; gap: 24px; align-items: center; font-weight: 500;
margin-bottom: 40px; flex-wrap: wrap;
}
.currently-meta .label { color: var(--ink); font-weight: 600; }
.currently-meta .sep { opacity: .4; }
.currently-body {
font-family: var(--body); font-size: 19px; line-height: 1.65; color: var(--ink); font-weight: 400;
max-width: 64ch;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.currently-body p + p { margin-top: 22px; }
/* Ordered lists — yellow counters, no trailing period */
.currently-body ol { list-style: none; counter-reset: ol-item; margin: 1.4em 0; padding-left: 0; }
.currently-body ol > li { counter-increment: ol-item; position: relative; padding-left: 2em; line-height: 1.65; }
.currently-body ol > li + li { margin-top: 12px; }
.currently-body ol > li::before {
content: counter(ol-item); position: absolute; left: 0; top: 0;
color: var(--brand); font-weight: 700;
}
.currently-body strong { font-weight: 600; }
.currently-body em { font-style: italic; }
.currently-body mark {
font-style: normal; font-weight: 600;
background: var(--brand); padding: 1px 5px; color: var(--ink);
}
.currently-body blockquote {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 17px; line-height: 1.55; color: var(--ink);
padding: 16px 24px; margin: 1.6em 0;
border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.currently-body blockquote p { margin-bottom: .8em; }
.currently-body blockquote p:last-child { margin-bottom: 0; }
.currently-body .end-mark {
margin: 40px 0 0; display: flex; justify-content: flex-start;
color: var(--brand);
}
.currently-body .end-mark .compass { width: 28px; height: 28px; }
.currently-body a {
border-bottom: 1px solid var(--brand); padding-bottom: 0;
}
.currently-body a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.currently-foot { margin-top: 48px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
/* Share row — icons only, no labels */
.share-row {
display: flex; gap: 6px; align-items: center;
font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); font-weight: 600;
}
.share-row .share-label { margin-right: 8px; }
.share-row a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
color: var(--ink); border: 1px solid var(--ink);
transition: background .15s, color .15s, border-color .15s;
}
.share-row a:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.share-row a svg { width: 18px; height: 18px; }
.share-row a.copy.copied { background: var(--ink); color: var(--brand); border-color: var(--ink); }
/* 6. Open Questions section ────────────────────────────────────── */
.questions-frame { background: var(--paper); }
.questions-masthead {
max-width: 1600px; margin: 0 auto; padding: 96px 64px 56px; position: relative;
}
.questions-masthead .compass-bg {
position: absolute; right: 64px; top: 40px;
width: 320px; height: 320px; color: var(--ink); opacity: .045;
pointer-events: none;
}
.questions-masthead h2 {
font-family: var(--display); font-weight: 700;
font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.045em;
color: var(--ink); text-transform: uppercase;
position: relative; z-index: 2;
}
.questions-masthead h2 .lined {
display: inline-block; border-bottom: 6px solid var(--brand); padding-bottom: 6px;
}
.main-frame {
max-width: 1600px; margin: 0 auto;
padding: 0 64px 96px;
display: grid; grid-template-columns: 1fr 360px; gap: 96px;
}
.q-sections { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); }
.q-section { padding: 80px 0 88px; border-bottom: 1px solid var(--ink); }
.q-head {
display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
margin-bottom: 64px;
}
.q-head .q-num {
font-family: var(--display); font-weight: 700; font-size: 128px;
line-height: .82; letter-spacing: -.05em; color: var(--ink);
}
.q-head .q-text { padding-top: 12px; }
.q-head .q-title {
font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -.025em;
text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
}
.q-head .q-sub {
font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -.015em;
color: var(--ink); max-width: 44ch; opacity: .85;
}
.q-section.stub .bookshelf {
display: flex; align-items: center; gap: 24px;
padding: 32px; background: var(--paper-warm); border: 1px dashed var(--hairline);
}
.q-section.stub .stub-note {
font-family: var(--body); font-size: 15px; color: var(--ink); line-height: 1.55; max-width: 56ch;
}
.q-section.stub .stub-note strong { background: var(--brand); padding: 1px 5px; font-weight: 600; }
.q-section.stub .stub-icon {
width: 56px; height: 56px; flex-shrink: 0;
background: repeating-linear-gradient(135deg, var(--brand) 0 8px, transparent 8px 16px);
}
/* 7. Book cover system ─────────────────────────────────────────── */
.bookshelf {
display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
gap: 32px 28px; padding-top: 8px;
}
.book {
--c: var(--brand); --t: var(--ink); --sp: rgba(0,0,0,0.18);
background: var(--c); color: var(--t);
aspect-ratio: 5/7;
position: relative;
display: flex; flex-direction: column;
box-shadow:
0 1px 2px rgba(0,0,0,0.10),
0 6px 10px rgba(0,0,0,0.10),
0 14px 26px rgba(0,0,0,0.14);
transition: transform .2s ease, box-shadow .2s ease;
background-image: linear-gradient(90deg, var(--sp) 0, var(--sp) 4px, transparent 4px);
overflow: hidden;
}
.book:hover {
color: var(--t);
transform: translateY(-4px);
box-shadow:
0 2px 3px rgba(0,0,0,0.10),
0 10px 16px rgba(0,0,0,0.12),
0 24px 42px rgba(0,0,0,0.18);
}
.book.c-flame { --c: var(--c-flame); --t: var(--ink); --sp: rgba(0,0,0,0.20); }
.book.c-marigold { --c: var(--c-marigold); --t: var(--ink); --sp: rgba(0,0,0,0.18); }
.book.c-coral { --c: var(--c-coral); --t: var(--ink); --sp: rgba(0,0,0,0.20); }
.book.c-teal { --c: var(--c-teal); --t: var(--ink); --sp: rgba(0,0,0,0.16); }
.book.c-charcoal { --c: var(--c-charcoal); --t: var(--paper); --sp: rgba(255,255,255,0.10); }
.book.c-ink { --c: var(--ink-deep); --t: var(--paper); --sp: rgba(255,255,255,0.10); }
.book-cover-area { flex: 1; padding: 18px 18px 0 22px; display: flex; flex-direction: column; }
.book-top {
display: flex; justify-content: space-between; align-items: start;
font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
font-weight: 600; opacity: .85;
}
.book-mark { width: 18px; height: 18px; opacity: .85; }
.book-mark .compass { width: 100%; height: 100%; color: currentColor; }
.book-label-area { padding: 0 18px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.book-title {
font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.3vw, 26px);
line-height: 1.02; letter-spacing: -.022em; text-align: left;
}
.book-foot {
display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
font-weight: 500; opacity: .75; padding-top: 10px; border-top: 1px solid currentColor;
}
.book-foot span:first-child {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.book-foot span:last-child { flex-shrink: 0; }
.book.latest::after {
content: 'NEW';
position: absolute; top: 16px; right: 0;
background: var(--ink); color: var(--brand);
font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
padding: 4px 10px 5px; font-weight: 700;
z-index: 2;
}
.book.c-charcoal.latest::after,
.book.c-ink.latest::after { background: var(--brand); color: var(--ink); }
.book.latest .book-top { margin-top: 30px; }
.book.coming {
--c: var(--paper-warm); --t: var(--ink); --sp: rgba(0,0,0,0.06);
box-shadow: none; border: 1px dashed var(--hairline); cursor: default;
}
.book.coming:hover { transform: none; box-shadow: none; }
.book.coming .book-title, .book.coming .book-mark { opacity: .55; }
/* 8. Notes rail (front page) ───────────────────────────────────── */
.notes-rail { position: sticky; top: 24px; align-self: start; padding-top: 80px; }
.notes-rail-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 36px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.notes-rail-head h2 {
font-family: var(--display); font-weight: 700; font-size: 36px;
color: var(--ink); letter-spacing: -.025em; line-height: 1; text-transform: uppercase;
}
.notes-rail-head a {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--muted); font-weight: 500;
}
.notes-rail-head a:hover { color: var(--ink); }
.notes-rail-list { display: flex; flex-direction: column; gap: 0; }
.rail-note { padding: 24px 0; border-bottom: 1px solid var(--faint); display: block; }
.rail-note:first-child { padding-top: 0; }
.rail-note.latest {
background: var(--brand); padding: 24px 22px;
margin: 0 -22px 8px;
border-bottom: none;
}
.rail-note-meta {
font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--muted); margin-bottom: 10px; display: flex; gap: 12px; align-items: center; font-weight: 500;
}
.rail-note-meta .thread { color: var(--ink); font-weight: 700; }
.rail-note-meta .new-tag {
background: var(--ink); color: var(--brand); padding: 3px 8px 4px; font-weight: 700;
}
.rail-note.latest .rail-note-meta { color: var(--ink); }
.rail-note-body { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ink); }
.rail-note.latest .rail-note-body { font-size: 17px; font-weight: 500; }
.rail-note-body em { font-style: italic; }
.rail-note-body mark { font-style: normal; font-weight: 600; background: transparent; color: inherit; }
.rail-note.latest .rail-note-body mark {
background: var(--ink); color: var(--brand); padding: 1px 5px;
}
/* 9. Article cover + reading body ──────────────────────────────── */
.article-cover {
background: var(--essay, var(--brand)); color: var(--essay-text, var(--ink));
position: relative; overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.article-cover.c-flame { --essay: var(--c-flame); --essay-text: var(--ink); }
.article-cover.c-marigold { --essay: var(--c-marigold); --essay-text: var(--ink); }
.article-cover.c-coral { --essay: var(--c-coral); --essay-text: var(--ink); }
.article-cover.c-teal { --essay: var(--c-teal); --essay-text: var(--ink); }
.article-cover.c-charcoal { --essay: var(--c-charcoal); --essay-text: var(--paper); }
.article-cover.c-ink { --essay: var(--ink-deep); --essay-text: var(--paper); }
.article-cover-inner {
max-width: 1400px; margin: 0 auto;
padding: 96px 64px 88px;
position: relative; z-index: 2;
min-height: 78vh;
display: flex; flex-direction: column;
}
.article-cover-top {
display: flex; justify-content: space-between; align-items: start;
margin-bottom: auto;
font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 600;
}
.article-cover-top .left { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.article-cover-top .crumb { opacity: .75; }
.article-cover-top .num { font-weight: 700; }
.article-cover-top .sep { opacity: .3; }
.article-cover-top .back {
display: inline-flex; align-items: center; gap: 8px;
border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
/* Multi-question essays: chip row instead of a single back link. */
.article-cover-top .cover-questions {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.article-cover-top .cover-questions .q-chip {
display: inline-flex; align-items: center;
padding: 5px 10px;
border: 1px solid currentColor;
color: currentColor;
font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; font-weight: 600;
transition: background .12s, color .12s;
}
.article-cover-top .cover-questions .q-chip:hover {
background: currentColor;
color: var(--paper);
}
.article-cover-top .compass-mark { width: 36px; height: 36px; }
.article-cover-title-block { margin-top: 80px; }
.article-cover h1 {
font-family: var(--display); font-weight: 700;
font-size: clamp(64px, 8.4vw, 144px); line-height: .92; letter-spacing: -.038em;
color: currentColor; margin-bottom: 32px;
/* Cap line length in em (relative to the display size, not the inherited 16px),
so titles wrap to a couple of balanced lines instead of one word per line. */
max-width: 13em; text-wrap: balance;
}
.article-cover-deck {
font-family: var(--display); font-weight: 500;
font-size: clamp(22px, 2.2vw, 30px); line-height: 1.32; letter-spacing: -.018em;
color: currentColor; max-width: 40ch; margin-bottom: 56px; opacity: .88;
}
.article-cover-bottom {
margin-top: auto; padding-top: 32px;
border-top: 1px solid rgba(0,0,0,0.18);
display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
}
.article-cover.c-charcoal .article-cover-bottom,
.article-cover.c-ink .article-cover-bottom { border-top-color: rgba(255,255,255,0.18); }
.article-cover-byline {
font-family: var(--display); font-weight: 600; font-size: 18px;
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.article-cover-byline .by {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500; opacity: .65;
}
.article-cover-facts {
display: flex; gap: 32px;
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 600;
}
.article-cover-facts .fact { display: flex; flex-direction: column; gap: 4px; }
.article-cover-facts .fact .label { font-size: 9px; opacity: .55; letter-spacing: .25em; font-weight: 500; }
.reading { background: var(--paper); }
.reading-grid {
max-width: 1280px; margin: 0 auto;
padding: 96px 64px 96px;
display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px;
gap: 56px; position: relative;
}
/* Explicit placement so the article stays centered even when the TOC is absent
(an empty toc_block must not let the article fall into the nav column). */
.reading-grid .toc { grid-column: 1; }
.reading-grid .article { grid-column: 2; }
.reading-grid .share-rail { grid-column: 3; }
.article-share-row { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }
/* Share — right rail, sticky alongside the article */
.share-rail {
position: sticky; top: 24px; align-self: start;
}
.share-rail .share-row {
flex-direction: column; align-items: flex-start; gap: 14px;
margin: 0; flex-wrap: nowrap;
}
.share-rail .share-row .share-label { display: none; }
/* TOC — left rail */
.toc {
position: sticky; top: 24px; align-self: start;
font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
font-weight: 500;
}
.toc .toc-label {
margin-bottom: 16px; color: var(--muted); font-size: 10px; letter-spacing: .25em;
padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.toc .toc-list { list-style: none; counter-reset: toc; }
/* top-level section entries — numbered */
.toc li.toc-h1 {
counter-increment: toc;
padding: 10px 0; border-bottom: 1px solid var(--faint);
}
.toc li.toc-h1 > a {
display: block; position: relative; padding-left: 30px;
color: var(--ink); line-height: 1.35;
}
.toc li.toc-h1 > a::before {
content: counter(toc, decimal-leading-zero);
position: absolute; left: 0; top: 0; color: var(--muted);
}
/* nested subsection entries — un-numbered, sentence case, brand tick */
.toc .toc-sub { list-style: none; margin: 8px 0 2px; padding-left: 30px; }
.toc li.toc-h2 { padding: 5px 0; }
.toc li.toc-h2 > a {
display: block; position: relative; padding-left: 16px;
text-transform: none; letter-spacing: .01em; font-size: 11px;
color: var(--muted); line-height: 1.3;
}
.toc li.toc-h2 > a::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 8px; height: 2px; background: var(--brand);
}
.toc a { color: var(--ink); transition: color .15s; }
.toc a:hover { color: var(--brand-dk); }
.toc li.toc-h2 > a:hover { color: var(--ink); }
/* scroll-spy active section (set by /js/toc-spy.js) */
.toc li.toc-h1.active > a { color: var(--brand-dk); }
.toc li.toc-h1.active > a::before { color: var(--brand-dk); }
.toc li.toc-h2.active > a { color: var(--ink); }
.toc li.toc-h2.active > a::before { background: var(--brand-dk); }
.aside-rail {
position: sticky; top: 24px; align-self: start;
font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500;
}
.aside-rail .label { font-size: 10px; color: var(--muted); margin-bottom: 16px; letter-spacing: .25em; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.aside-rail .fact { padding: 12px 0; border-bottom: 1px solid var(--faint); display: flex; flex-direction: column; gap: 4px; }
.aside-rail .fact .k { color: var(--muted); font-size: 9px; letter-spacing: .25em; }
.aside-rail .fact .v { color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: .12em; }
.aside-rail .actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.aside-rail .actions a {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink); border: 1px solid var(--ink); padding: 9px 12px; text-align: center; font-weight: 600;
}
.aside-rail .actions a:hover { background: var(--brand); border-color: var(--brand); }
.aside-rail .actions a.primary { background: var(--ink); color: var(--paper); }
.aside-rail .actions a.primary:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.article {
font-family: var(--body);
font-size: 19px; line-height: 1.65; color: var(--ink);
max-width: 64ch;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.article > * { margin-bottom: 1em; }
.article > *:last-child { margin-bottom: 0; }
.article p { margin-bottom: 1.2em; font-weight: 400; }
.article p strong { font-weight: 600; }
.article p em { font-style: italic; }
.article a { border-bottom: 1px solid var(--brand); padding-bottom: 0; }
.article a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
/* h1 — major section head: large, with a short brand rule above it */
.article h1 {
font-family: var(--display); font-weight: 700;
font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -.03em;
color: var(--ink); margin: 2.4em 0 1em; scroll-margin-top: 32px;
}
.article h1::before {
content: ''; display: block; width: 56px; height: 4px;
background: var(--brand); margin-bottom: 28px;
}
/* h2 — subsection: distinguished from h1 by size + weight alone (no rule/bar) */
.article h2 {
font-family: var(--display); font-weight: 600;
font-size: clamp(24px, 2.9vw, 34px); line-height: 1.14; letter-spacing: -.02em;
color: var(--ink); margin: 2em 0 .7em; scroll-margin-top: 32px;
}
.article h3 {
font-family: var(--display); font-weight: 600;
font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25; letter-spacing: -.01em;
color: var(--ink); margin: 1.8em 0 .6em;
}
.article ul { margin: 1.2em 0 1.6em 1.4em; }
.article li { margin-bottom: .8em; line-height: 1.6; }
.article ul li::marker { color: var(--brand); }
/* Ordered lists — yellow counters, no trailing period */
.article ol { list-style: none; counter-reset: ol-item; margin: 1.2em 0 1.6em 0; padding-left: 0; }
.article ol > li { counter-increment: ol-item; position: relative; padding-left: 2em; }
.article ol > li::before {
content: counter(ol-item); position: absolute; left: 0; top: 0;
color: var(--brand); font-weight: 700;
}
.article img { max-width: 100%; }
.article figure { margin: 1.6em 0; }
/* Embedded media (YouTube etc.) — imported iframes hard-code width="728" height="409".
Make them fluid and hold a 16:9 box so they never force horizontal page scroll on
narrow screens. Applies in essays and in notes (both formats), since notes can embed
video too (the .youtube-wrap/.youtube-inner divs are full-width, so styling the iframe
directly is enough). */
.article iframe,
.note-body--reading iframe,
.note-body--display iframe,
.currently-body iframe {
display: block;
width: 100%; max-width: 100%;
aspect-ratio: 16 / 9; height: auto;
margin: 1.6em 0; border: 0;
}
/* Image frame — brand crop-mark corner brackets */
.article .img-frame {
position: relative; display: block;
width: fit-content; max-width: 100%;
margin: 1.6em auto; padding: 7px;
}
.article figure .img-frame { margin: 0 auto; }
.article .img-frame > img,
.article .img-frame > picture,
.article .img-frame > picture > img {
display: block; max-width: 100%; height: auto; margin: 0;
}
.article .img-frame::before,
.article .img-frame::after {
content: ''; position: absolute; width: 24px; height: 24px; pointer-events: none;
}
.article .img-frame::before { top: 0; left: 0; border-top: 3px solid var(--brand); border-left: 3px solid var(--brand); }
.article .img-frame::after { bottom: 0; right: 0; border-bottom: 3px solid var(--brand); border-right: 3px solid var(--brand); }
.article figcaption {
font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: var(--muted); margin-top: 8px; font-weight: 500;
}
/* 10. Article components ───────────────────────────────────────── */
.article blockquote {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 17px; line-height: 1.55; color: var(--ink);
padding: 18px 28px;
border-left: 4px solid var(--brand); background: var(--paper-warm);
margin: 1.6em 0;
}
.article blockquote p { margin-bottom: .8em; }
.article blockquote p:last-child { margin-bottom: 0; }
/* AI-generated content — content wrapped in …
.
Convention: any block quoted from an AI is boxed and set in monospace so
it's visually distinct from Nick's own writing. Style-guide item. */
.article .ai-block {
background: var(--paper-warm);
border-left: 3px solid var(--brand);
padding: 20px 24px;
margin: 1.8em 0;
font-family: var(--mono);
font-size: 14px;
line-height: 1.6;
color: var(--ink);
}
.article .ai-block p { margin: 0 0 .8em; font-family: var(--mono); }
.article .ai-block p:last-child { margin-bottom: 0; }
/* Century sub-headings (paragraphs that follow a list) get breathing room. */
.article .ai-block ul + p { margin-top: 1.8em; }
.article .ai-block ul { list-style: disc; margin: .4em 0 .4em 1.2em; padding: 0; }
.article .ai-block li { margin-bottom: .6em; font-family: var(--mono); }
.article .ai-block li:last-child { margin-bottom: 0; }
.article .ai-block strong { font-weight: 700; }
.article .ai-block a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--brand);
text-underline-offset: 2px;
}
.article .ai-block a:hover { text-decoration-color: var(--ink); }
.video-embed {
margin: 2em 0; background: var(--ink); color: var(--paper); padding: 32px 28px;
display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
}
.video-embed::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand);
}
.video-embed .label {
font-family: var(--mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
font-weight: 600; color: var(--brand);
}
.video-embed .title {
font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--paper);
}
/* In-text endnote marker — superscript number linking down to the endnote */
.fn-link {
font-family: var(--mono); font-size: 0.7em; color: var(--brand-dk);
vertical-align: super; line-height: 0; border-bottom: none; padding: 0 1px 0 2px;
font-weight: 700; scroll-margin-top: 32px;
}
.fn-link:hover { color: var(--brand); }
.end-mark {
max-width: 64ch; margin: 64px auto 0;
display: flex; justify-content: center;
color: var(--brand);
}
.end-mark .compass { width: 36px; height: 36px; }
.footnotes {
max-width: 64ch; margin: 64px auto 0;
padding-top: 32px; border-top: 2px solid var(--ink);
font-family: var(--body); font-size: 15px; line-height: 1.6;
}
.footnotes h4 {
font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
color: var(--muted); font-weight: 600; margin-bottom: 24px;
}
.footnotes ol { list-style: none; counter-reset: fn; }
.footnotes li {
counter-increment: fn; padding-left: 36px; position: relative; margin-bottom: 20px;
scroll-margin-top: 32px;
}
.footnotes li::before {
content: counter(fn); position: absolute; left: 0; top: 0;
font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand-dk); letter-spacing: .15em;
}
/* ↩ back-link from a note to its in-text marker */
.footnotes .fn-back {
font-family: var(--mono); font-size: 13px; color: var(--brand-dk);
border-bottom: none; margin-left: 4px; text-decoration: none; white-space: nowrap;
}
.footnotes .fn-back:hover { color: var(--brand); }
/* Endnotes — Substack-style footnote blocks (.footnote / .footnote-number /
.footnote-content), grouped under an "Endnotes" head. Each number links back to
its in-text marker; the in-text marker links down here. */
.article .endnotes {
max-width: 64ch; margin: 72px auto 0;
padding-top: 28px; border-top: 2px solid var(--ink);
}
.article .endnotes-head {
font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.article .footnote {
display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
padding: 16px 0; border-bottom: 1px solid var(--faint);
font-family: var(--body); font-size: 15px; line-height: 1.62; color: var(--ink);
scroll-margin-top: 32px; margin: 0;
}
.article .footnote:last-child { border-bottom: none; }
/* the number is a link back up to the referencing marker */
.article .footnote-number {
font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--brand-dk);
border-bottom: none; text-align: right; padding-top: 1px; transition: color .15s;
}
.article .footnote-number:hover { color: var(--brand); }
.article .footnote-number::after { content: '↩'; display: block; font-size: 11px; opacity: .55; }
.article .footnote-content p { margin-bottom: .55em; }
.article .footnote-content p:last-child { margin-bottom: 0; }
.article .footnote-content a { border-bottom: 1px solid var(--brand); }
/* 11. Note card ────────────────────────────────────────────────── */
.note-page { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.note-crumbs {
font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--muted); font-weight: 500;
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
margin-bottom: 36px;
}
.note-crumbs a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.note-crumbs a:hover { color: var(--brand-dk); border-bottom-color: var(--brand); }
.note-crumbs .sep { opacity: .35; }
.note-crumbs .current { color: var(--muted); }
.note-card {
background: var(--paper); border: 2px solid var(--ink);
padding: 48px 56px 40px; position: relative;
}
.note-card.is-latest::before {
content: 'LATEST';
position: absolute; top: 0; right: 0;
background: var(--brand); color: var(--ink);
font-family: var(--mono); font-size: 11px; letter-spacing: .25em;
font-weight: 700; padding: 8px 14px 9px;
}
.note-meta {
display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); font-weight: 500;
margin-bottom: 36px;
}
.note-meta .date { color: var(--ink); font-weight: 700; }
.note-meta .sep { opacity: .35; }
.note-meta .thread { color: var(--ink); font-weight: 700; }
.note-meta .num { color: var(--brand-dk); font-weight: 700; }
.note-meta .format {
margin-left: auto; background: var(--ink); color: var(--brand);
padding: 4px 9px 5px; font-weight: 700; font-size: 10px;
}
.note-body--display {
font-family: var(--display); font-weight: 500;
font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22; letter-spacing: -.02em;
color: var(--ink);
}
.note-body--display em { font-style: italic; }
.note-body--display mark {
font-style: normal; font-weight: 600;
background: var(--brand); color: var(--ink); padding: 0 .12em;
}
.note-body--display a {
border-bottom: 2px solid var(--brand); padding-bottom: 0;
}
.note-body--display a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.note-body--reading {
font-family: var(--body); font-size: 19px; line-height: 1.7; color: var(--ink); font-weight: 400;
max-width: 60ch;
/* Ragged-right, not justified. Justifying this measure stretches word-spaces
into distracting "rivers" and forces auto-hyphenation — together they read as
a rigid gray slab (the "wall of text" feel). Phones already left-align for the
same reason; this makes the desktop column match. */
text-align: left;
}
.note-body--reading p { margin-bottom: 1.4em; }
.note-body--reading p:last-child { margin-bottom: 0; }
.note-body--reading p strong { font-weight: 600; }
.note-body--reading p em { font-style: italic; }
.note-body--reading p mark {
font-style: normal; font-weight: 600;
background: var(--brand); color: var(--ink); padding: 1px 5px;
}
.note-body--reading blockquote {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 17px; line-height: 1.55; color: var(--ink);
padding: 16px 24px; margin: 1.6em 0;
border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.note-body--reading blockquote p { margin-bottom: .8em; }
.note-body--reading blockquote p:last-child { margin-bottom: 0; }
.note-body--display blockquote {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(20px, 2.4vw, 28px); line-height: 1.32; color: var(--ink);
padding: 16px 24px; margin: 1em 0;
border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.note-body--reading a { border-bottom: 1px solid var(--brand); padding-bottom: 0; }
.note-body--reading a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.note-body--reading ul { list-style: none; margin: 1.2em 0; padding: 0; }
.note-body--reading ul li {
padding: 10px 0 10px 28px; position: relative;
border-top: 1px solid var(--faint);
}
.note-body--reading ul li:last-child { border-bottom: 1px solid var(--faint); }
.note-body--reading ul li::before {
content: ''; position: absolute; left: 0; top: 18px;
width: 14px; height: 2px; background: var(--brand);
}
.note-body--reading ol {
margin: 2em 0 2em 0;
padding-left: 0;
list-style: none;
counter-reset: ol-item;
}
.note-body--reading ol li {
counter-increment: ol-item;
position: relative;
padding: 6px 0 6px 2em;
text-align: left;
hyphens: none;
-webkit-hyphens: none;
}
.note-body--reading ol li::before {
content: counter(ol-item); position: absolute; left: 0; top: 6px;
color: var(--brand); font-weight: 700;
}
/* Thematic break — a markdown `---` becomes a centered three-dot ornament rather
than a hard rule. Gives long notes opt-in breathing room / section rests without
peppering in images: drop a `---` between movements of an argument. */
/* Section breaks: a single marigold dot, centered, with breathing room.
HR gets restyled as the dot itself — more reliable across browsers than
::before pseudo-elements on
, which some renderers ignore. */
.note-body--reading hr,
.note-body--display hr {
border: 0;
width: 10px;
height: 10px;
background: var(--brand);
border-radius: 50%;
display: block;
margin: 3.6em auto;
padding: 0;
}
.note-foot {
margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.note-foot .byline {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 600; color: var(--ink);
display: flex; align-items: center; gap: 8px;
}
.note-foot .note-share .share-row { margin: 0; }
/* End mark — brand-yellow compass flush with the last line of the note body */
.note-end-mark {
width: .82em; height: .82em; margin-left: .32em;
color: var(--brand); vertical-align: -.06em;
}
/* 12. Note context blocks ──────────────────────────────────────── */
.context { max-width: 920px; margin: 0 auto; padding: 0 64px 80px; }
.context-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.context-head h2 {
font-family: var(--display); font-weight: 700; font-size: 28px;
letter-spacing: -.02em; text-transform: uppercase; line-height: 1; color: var(--ink);
}
.context-head .link { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.context-question {
background: var(--paper-warm); padding: 28px 32px;
display: grid; grid-template-columns: 80px 1fr auto; gap: 32px; align-items: center;
border-left: 4px solid var(--brand);
}
.context-question:hover { background: var(--paper); }
.context-question .num {
font-family: var(--display); font-weight: 700; font-size: 64px;
line-height: .82; letter-spacing: -.04em; color: var(--ink);
}
.context-question .label {
font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); margin-bottom: 6px; font-weight: 600;
}
.context-question .title {
font-family: var(--display); font-weight: 600; font-size: 22px;
line-height: 1.15; letter-spacing: -.018em; color: var(--ink); max-width: 36ch;
}
.context-question .title .accent { background: var(--brand); padding: 0 6px; }
.context-question .arrow {
font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink); font-weight: 600;
}
.adjacent { max-width: 920px; margin: 0 auto; padding: 0 64px 80px; }
.adjacent-head {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); margin-bottom: 20px; font-weight: 600;
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.adjacent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adjacent-card {
padding: 24px 28px; background: var(--paper); border: 1px solid var(--hairline);
display: flex; flex-direction: column; gap: 12px;
transition: background .15s, border-color .15s;
}
.adjacent-card:hover { background: var(--paper-warm); border-color: var(--ink); }
.adjacent-card.next { text-align: right; }
.adjacent-card .label {
font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); font-weight: 600;
}
.adjacent-card .meta {
font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink); display: flex; gap: 10px; font-weight: 500;
}
.adjacent-card.next .meta { justify-content: flex-end; }
.adjacent-card .meta .thread { color: var(--brand-dk); font-weight: 700; }
.adjacent-card .preview {
font-family: var(--body); font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 400;
}
.adjacent-card .preview em { font-style: italic; }
.adjacent-card .preview mark { font-style: normal; font-weight: 600; background: var(--brand); color: var(--ink); padding: 0 4px; }
.related {
background: var(--paper-warm); border-top: 1px solid var(--ink);
padding: 96px 64px;
}
.related-inner { max-width: 1400px; margin: 0 auto; }
.related-head {
display: flex; justify-content: space-between; align-items: end;
border-bottom: 1px solid var(--ink); padding-bottom: 16px; margin-bottom: 32px;
}
.related-head h3 {
font-family: var(--display); font-weight: 700; font-size: 44px;
letter-spacing: -.025em; line-height: 1; text-transform: uppercase; color: var(--ink);
}
.related-head .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* 13. Index pages (essays / notes) ─────────────────────────────── */
.index-page { max-width: 1600px; margin: 0 auto; padding: 64px 64px 96px; }
.index-head {
margin-bottom: 48px;
}
.index-head .label {
font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
color: var(--muted); margin-bottom: 18px; font-weight: 500;
}
.index-head h1 {
font-family: var(--display); font-weight: 700;
font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.045em;
color: var(--ink); text-transform: uppercase;
}
.index-head h1 .accent { background: var(--brand); padding: 0 .15em; color: var(--ink); }
.index-head .deck {
font-family: var(--display); font-weight: 500; font-size: 22px;
letter-spacing: -.015em; line-height: 1.4; color: var(--muted); max-width: 56ch; margin-top: 24px;
}
.index-shelf {
display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
gap: 32px 28px;
}
.index-group-head {
font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.022em;
text-transform: uppercase; color: var(--ink); margin: 56px 0 20px;
padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}
.index-group-head:first-child { margin-top: 0; }
.notes-feed { display: flex; flex-direction: column; gap: 0; max-width: 920px; }
.feed-note {
padding: 32px 0; border-bottom: 1px solid var(--hairline); display: block;
}
.feed-note:first-child { padding-top: 0; }
.feed-note:hover { background: var(--paper-warm); padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }
.feed-note-meta {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted); margin-bottom: 14px; display: flex; gap: 16px; align-items: center; font-weight: 500;
}
.feed-note-meta .thread {
color: var(--ink); font-weight: 700;
}
.feed-note-body { font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink); }
.feed-note-body em { font-style: italic; }
.feed-note-body mark { font-style: normal; font-weight: 600; background: var(--brand); color: var(--ink); padding: 0 4px; }
/* 14. About page ───────────────────────────────────────────────── */
.about { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.about-head { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.about-head h1 {
font-family: var(--display); font-weight: 700;
font-size: clamp(48px, 6vw, 88px); line-height: .92; letter-spacing: -.038em;
color: var(--ink); text-transform: uppercase;
}
.about-body {
font-family: var(--body); font-size: 19px; line-height: 1.65; color: var(--ink); font-weight: 400;
max-width: 64ch;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.about-body p { margin-bottom: 1.2em; }
.about-body p strong { font-weight: 600; }
.about-body p em { font-style: italic; }
.about-body p mark {
font-style: normal; font-weight: 600;
background: var(--brand); padding: 1px 5px; color: var(--ink);
}
.about-body h2 {
font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 36px);
line-height: 1.05; letter-spacing: -.022em; color: var(--ink); margin: 2em 0 .8em;
}
.about-body a { border-bottom: 1px solid var(--brand); }
.about-body ul { margin: 1.2em 0 1.6em 1.4em; }
.about-body li { margin-bottom: .6em; line-height: 1.6; }
.about-body ul li::marker { color: var(--brand); }
/* Ordered lists — yellow counters, no trailing period */
.about-body ol { list-style: none; counter-reset: ol-item; margin: 1.2em 0 1.6em 0; padding-left: 0; }
.about-body ol > li { counter-increment: ol-item; position: relative; padding-left: 2em; }
.about-body ol > li::before {
content: counter(ol-item); position: absolute; left: 0; top: 0;
color: var(--brand); font-weight: 700;
}
.about-body .page-shelf {
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 24px 20px; margin: .4em 0 2.4em;
}
.about-body .page-shelf .book { border-bottom: none; }
.about-body .sig-globe {
border-bottom: none; display: inline-block;
vertical-align: -2px; margin-left: 4px; opacity: .7;
}
.about-body .sig-globe:hover { opacity: 1; }
.about-body .sig-globe svg { width: 16px; height: 16px; display: block; }
/* Subscribe form — used on /subscribe/, inside .about-body */
.subscribe-form { margin: 2em 0 2.4em; max-width: 520px; }
.subscribe-form-label {
display: block;
font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink); opacity: .7;
margin-bottom: 8px;
}
.subscribe-form-row { display: flex; gap: 8px; }
.subscribe-form-input {
flex: 1; padding: 12px 14px; font-family: var(--body); font-size: 17px;
background: var(--paper); color: var(--ink);
border: 1.5px solid var(--ink); border-radius: 0;
outline: none;
}
.subscribe-form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, rgba(255,180,0,.3)); }
.subscribe-form-button {
padding: 12px 20px; font-family: var(--display); font-weight: 700;
font-size: 15px; letter-spacing: .015em;
background: var(--ink); color: var(--paper);
border: 1.5px solid var(--ink); border-radius: 0;
cursor: pointer; transition: background .12s, color .12s;
}
.subscribe-form-button:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.subscribe-form-button:disabled { opacity: .5; cursor: not-allowed; }
.subscribe-form-status {
min-height: 1.4em; margin: 12px 0 0;
font-family: var(--body); font-size: 15px; color: var(--ink);
}
.subscribe-form-status[data-kind="error"] { color: #b03a2e; }
.subscribe-form-status[data-kind="ok"] { color: var(--ink); font-weight: 600; }
.subscribe-form-status[data-kind="pending"] { opacity: .7; }
/* Question detail page — hero reuses the home-page .q-head/.q-title/.q-sub styles */
.question-page { max-width: 1100px; margin: 0 auto; padding: 64px 64px 96px; }
.qp-section { margin-top: 64px; }
.qp-section-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.qp-section-head h2 {
font-family: var(--display); font-weight: 700; font-size: 36px;
letter-spacing: -.025em; text-transform: uppercase; color: var(--ink);
}
.qp-section-head .count {
font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
color: var(--muted); font-weight: 500;
}
.qp-section-head a.count:hover { color: var(--brand-dk); }
/* Note index-card grid — shared by question pages and the /notes index. Newest card
wears the brand yellow; on the all-notes feed each card also shows its thread label. */
.q-notes-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.q-note-card {
display: flex; flex-direction: column; gap: 12px;
background: var(--paper-warm); border: 1px solid var(--faint);
padding: 22px; transition: border-color .15s;
}
.q-note-card:hover { border-color: var(--ink); color: inherit; }
.q-note-card.latest { background: var(--brand); border-color: var(--brand); }
.q-note-meta {
font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--muted); display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; font-weight: 500;
}
.q-note-card.latest .q-note-meta { color: var(--ink); }
.q-note-meta .new-tag {
background: var(--ink); color: var(--brand); padding: 3px 8px 4px; font-weight: 700;
}
.q-note-meta .thread { color: var(--ink); font-weight: 700; }
.q-note-body {
font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ink);
/* Long-format notes can open with a full paragraph — clamp so cards stay card-sized */
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.q-note-body em { font-style: italic; }
.q-note-body mark { font-style: normal; font-weight: 600; background: var(--brand); color: var(--ink); padding: 0 4px; }
.q-note-card.latest .q-note-body mark { background: var(--ink); color: var(--brand); padding: 1px 5px; }
.q-note-more {
margin-top: auto; align-self: start;
font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
.q-note-card:hover .q-note-more { color: var(--brand-dk); border-color: var(--brand); }
/* 15. Subscribe band ───────────────────────────────────────────── */
.subscribe-band {
background: var(--ink); color: var(--paper);
padding: 64px 64px;
text-align: center;
}
.subscribe-band-inner { max-width: 720px; margin: 0 auto; }
.subscribe-band h3 {
font-family: var(--display); font-weight: 600; font-size: 32px;
letter-spacing: -.02em; line-height: 1.18; margin-bottom: 16px;
}
.subscribe-band p {
font-family: var(--body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7);
max-width: 56ch; margin: 0 auto 28px;
}
.subscribe-band form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.subscribe-band input {
flex: 1; background: transparent; border: 1px solid rgba(255,255,255,.3);
color: var(--paper); padding: 12px 14px; font-family: var(--body); font-size: 14px;
}
.subscribe-band input:focus { outline: none; border-color: var(--brand); }
.subscribe-band button {
background: var(--brand); color: var(--ink); border: none;
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
padding: 12px 18px; cursor: pointer;
}
.subscribe-band button:hover { background: var(--paper); }
/* 16. Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
.site-header-inner { padding: 22px 32px; gap: 20px; }
.brand .compass { width: 30px; height: 30px; }
.brand-text .word { font-size: 38px; }
.site-nav { gap: 22px; }
.currently-inner { padding: 48px 32px 72px; }
.currently-body { font-size: 17px; }
.questions-masthead { padding: 64px 32px 48px; }
.questions-masthead h2 { font-size: clamp(48px, 11vw, 96px); }
.questions-masthead .compass-bg { width: 220px; height: 220px; right: 32px; top: 32px; }
.main-frame { padding: 0 32px 80px; grid-template-columns: 1fr; gap: 48px; }
.q-head { grid-template-columns: 120px 1fr; gap: 32px; margin-bottom: 48px; }
.q-head .q-num { font-size: 96px; }
.q-head .q-title { font-size: 30px; }
.q-section { padding: 64px 0 72px; }
.bookshelf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }
/* Stacked (single-column) layout: hoist the recent-notes rail above the essays so
the 5 latest notes lead the scroll on mobile, ahead of the Open Questions essays.
order works because .main-frame is a grid here; on desktop (>1100px) it stays the
right-hand column. .q-sections is pinned after it. */
.notes-rail { position: static; padding-top: 32px; border-top: 1px solid var(--ink); margin-top: 32px; order: -1; }
.main-frame > section { order: 0; }
.site-footer { padding: 24px 32px; }
.article-cover-inner { padding: 64px 32px 56px; min-height: auto; }
/* minmax(0,1fr) (not 1fr) so a wide child — an iframe, a long URL — can't blow the
single column past the viewport and trigger horizontal scroll. */
.reading-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px 32px; }
.reading-grid .toc, .reading-grid .article, .reading-grid .share-rail { grid-column: 1; min-width: 0; }
.article { max-width: 64ch; margin: 0 auto; }
/* TOC — drop out of the sticky rail and become a static "Contents" panel above the
article. Sticky positioning here (inherited from the desktop rail) froze the list
at the top of the viewport, overlapping the body text as it scrolled underneath. */
.toc {
position: static; top: auto;
max-width: 64ch; margin: 0 auto; align-self: stretch;
padding: 22px 26px; background: var(--paper-warm); border: 1px solid var(--hairline);
}
.toc .toc-label { margin-bottom: 14px; }
.share-rail { position: static; align-self: stretch; max-width: 64ch; margin: 8px auto 0;
padding-top: 24px; border-top: 1px solid var(--hairline); }
.share-rail .share-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.related { padding: 64px 32px; }
.note-page { padding: 48px 32px 64px; }
.context, .adjacent { padding: 0 32px 56px; }
.note-card { padding: 36px 36px 32px; }
.context-question { grid-template-columns: 60px 1fr auto; gap: 24px; padding: 22px 24px; }
.context-question .num { font-size: 48px; }
.context-question .title { font-size: 18px; }
.index-page { padding: 48px 32px 80px; }
.index-shelf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }
.about { padding: 48px 32px 80px; }
.question-page { padding: 48px 32px 80px; }
.subscribe-band { padding: 56px 32px; }
}
@media (max-width: 640px) {
/* Brand takes the flexible column (was a greedy empty 1fr spacer, which starved the
wordmark down to its min-content width and forced a 3-line wrap). Drop the spacer so
the wordmark gets the room to sit on two lines next to the compact nav. */
.site-header-inner { grid-template-columns: 1fr auto; gap: 10px; padding: 16px 20px; }
.site-header-inner > span { display: none; }
.brand .compass { width: 23px; height: 23px; }
.brand-text .word { font-size: 26px; }
/* Phones: drop the full wordmark, show the "NAC" monogram. */
.brand-text .word-full { display: none; }
.brand-text .word-short { display: inline-block; }
.brand-text .small { font-size: 9px; }
/* Keep the essentials reachable on phones. Previously the whole nav was
display:none, which stranded mobile users with no search and no subscribe.
With the compact "NAC" monogram freeing up header room, About now rides
alongside the search icon + subscribe pill instead of hiding in the footer. */
.site-nav { display: flex; gap: 12px; align-items: center; }
.site-nav > a[href="/about/"] { display: inline-block; }
.nav-search { padding: 4px 2px; }
.site-nav a.subscribe-pill { padding: 8px 11px; font-size: 10px; letter-spacing: .12em; }
.currently-inner { padding: 32px 20px 56px; }
.currently-meta { flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.currently-body { font-size: 16px; line-height: 1.6; }
.currently-body p + p { margin-top: 16px; }
.currently-foot { margin-top: 36px; }
/* Ragged-right on phones. Justifying a ~38-character column stretches word spaces
into distracting "rivers"; left-aligned reads cleaner at this width. */
.currently-body, .article, .note-body--reading, .about-body { text-align: left; }
.questions-masthead { padding: 48px 20px 36px; }
.questions-masthead h2 { font-size: clamp(40px, 13vw, 64px); }
.questions-masthead .compass-bg { display: none; }
.main-frame { padding: 0 20px 64px; gap: 36px; }
/* Stack the number above the title so the title gets the full column width
instead of being squeezed into ~270px beside the big numeral. */
.q-head { grid-template-columns: 1fr; gap: 6px; margin-bottom: 36px; }
.q-head .q-num { font-size: 64px; line-height: .85; }
.q-head .q-text { padding-top: 0; }
.q-head .q-title { font-size: 24px; margin-bottom: 12px; }
.q-head .q-sub { font-size: 17px; }
.q-section { padding: 48px 0 56px; }
.bookshelf { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
.book-cover-area { padding: 14px 14px 0 18px; }
.book-label-area { padding: 0 14px 14px 18px; }
.book-title { font-size: 17px; }
.q-foot { margin-top: 32px; }
.notes-rail { padding-top: 28px; }
.notes-rail-head h2 { font-size: 30px; }
.site-footer { padding: 20px; }
.site-footer .base { font-size: 9px; }
.article-cover-inner { padding: 40px 20px 32px; }
.article-cover-top { flex-wrap: wrap; gap: 14px; }
.article-cover-title-block { margin-top: 48px; }
.article-cover h1 { font-size: clamp(40px, 12vw, 64px); }
.article-cover-deck { font-size: 18px; margin-bottom: 36px; }
.article-cover-bottom { grid-template-columns: 1fr; gap: 20px; }
.article-cover-facts { flex-wrap: wrap; gap: 20px; }
.reading-grid { padding: 48px 20px; gap: 28px; }
.article { font-size: 17px; }
.article blockquote { padding: 14px 18px; font-size: 16px; }
.related { padding: 56px 20px; }
.related-head h3 { font-size: 28px; }
.note-page { padding: 32px 20px 56px; }
.context, .adjacent { padding: 0 20px 48px; }
.note-card { padding: 28px 24px; }
.note-meta { gap: 10px; font-size: 10px; margin-bottom: 24px; }
.note-body--display { font-size: clamp(22px, 6.4vw, 30px); }
.note-body--reading { font-size: 17px; }
.note-foot { flex-direction: column; align-items: start; gap: 18px; }
.context-question { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; }
.context-question .num { font-size: 36px; }
.context-question .title { font-size: 16px; }
.context-question .arrow { display: none; }
.adjacent-grid { grid-template-columns: 1fr; gap: 12px; }
.adjacent-card.next { text-align: left; }
.adjacent-card.next .meta { justify-content: flex-start; }
.index-page { padding: 32px 20px 64px; }
.index-head h1 { font-size: clamp(40px, 13vw, 64px); }
.index-shelf { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
.about { padding: 32px 20px 64px; }
.about-body { font-size: 17px; }
.question-page { padding: 32px 20px 64px; }
.subscribe-band { padding: 48px 20px; }
.subscribe-band h3 { font-size: 24px; }
.subscribe-band form { flex-direction: column; }
}
/* ── Search ──────────────────────────────────────────────────────── */
/* Nav search button — styled to sit between the gray nav links and the gold pill */
.nav-search {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: 0; cursor: pointer; color: var(--muted);
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500; padding: 4px 0; transition: color .15s;
}
.nav-search:hover { color: var(--ink); }
.nav-search svg { width: 15px; height: 15px; }
.search-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(10,10,10,0.55);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
display: flex; justify-content: center;
padding: 10vh 20px 20px;
animation: search-fade .12s ease-out;
}
.search-overlay[hidden] { display: none; }
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-panel {
width: 100%; max-width: 720px; align-self: flex-start;
background: var(--paper); border: 1px solid var(--ink);
border-radius: 4px; box-shadow: 0 24px 60px rgba(10,10,10,0.35);
display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;
}
.search-input-row {
display: flex; align-items: center; gap: 12px;
padding: 18px 20px; border-bottom: 1px solid var(--hairline);
}
.search-input-icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.search-input {
flex: 1; border: 0; background: none; outline: none;
/* Display (Satoshi) — the site's heading/deck voice; serif is reserved for article reading. */
font-family: var(--display); font-weight: 500; font-size: 24px;
letter-spacing: -.015em; color: var(--ink);
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-esc {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); border: 1px solid var(--hairline); border-radius: 3px;
padding: 3px 6px; flex: none;
}
.search-status {
padding: 12px 20px; border-bottom: 1px solid var(--hairline);
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500; color: var(--muted);
}
.search-status:empty { display: none; }
.search-results {
overflow-y: auto;
min-height: 0; /* flex child must be allowed to shrink so it — not the panel — becomes the scroll region */
overscroll-behavior: contain; /* keep the swipe inside the results; don't chain to the page behind (mobile scroll-bleed) */
-webkit-overflow-scrolling: touch;
}
.search-result {
display: block; padding: 16px 20px; border-bottom: 1px solid var(--hairline);
color: var(--ink); transition: background .1s;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.is-active { background: var(--paper-warm); }
.search-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
/* Type badge — echoes the feed format-tag (mono, 700, ink/brand) */
.search-result-type {
font-family: var(--mono); font-size: 10px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
padding: 3px 7px 4px; border-radius: 2px; flex: none;
}
.search-result-type.type-essay { background: var(--brand); color: var(--ink); }
.search-result-type.type-note { background: var(--ink); color: var(--brand); }
.search-result-title {
font-family: var(--display); font-weight: 600; font-size: 18px;
letter-spacing: -.015em; color: var(--ink);
}
.search-result:hover .search-result-title, .search-result.is-active .search-result-title { color: var(--brand-dk); }
.search-result-meta {
font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500; color: var(--muted); margin-left: auto;
}
.search-result-snippets { display: flex; flex-direction: column; gap: 4px; }
/* Snippet body — IBM Plex Sans, matching the notes-feed / rail preview text */
.search-snippet {
font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--muted);
}
.search-snippet mark {
background: rgba(255,180,0,0.32); color: var(--ink);
border-radius: 2px; padding: 0 1px; font-weight: 600;
}
@media (max-width: 720px) {
.nav-search-label { display: none; }
.search-overlay { padding: 6vh 12px 12px; }
.search-input { font-size: 20px; }
}
/* 14. Print — essays as a clean black-on-white document ────────────── */
@media print {
/* Drop site chrome, rails, and interactive/promotional blocks */
.skip-link, .site-header, .site-footer,
.share-rail, .share-row, .subscribe-band,
.related, .toc, .adjacent, .context,
.search-overlay, .nav-search,
.end-mark, .book-mark, .compass { display: none !important; }
html, body { background: #fff; color: #000; }
/* Full-width single-column reading body */
.reading, .reading-grid { display: block; margin: 0; padding: 0; }
.article { max-width: none; width: 100%; margin: 0; color: #000; }
/* Flatten the colored essay cover to plain black-on-white */
.article-cover { background: #fff !important; color: #000 !important; padding: 0 0 12px; }
.article-cover-inner,
.article-cover h1, .article-cover-deck,
.article-cover-byline, .article-cover-facts,
.article-cover .back, .article-cover .crumb { color: #000 !important; }
/* Marigold/brand accents → black */
.accent, .fn-link, .footnotes h4, .footnotes li::before, .fn-back { color: #000 !important; }
mark { color: #000 !important; background: transparent !important; }
a { color: #000 !important; text-decoration: underline; border-bottom: none !important; }
/* Show the URL after external links (internal/fragment links stay clean) */
.article a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em; color: #000; word-break: break-all;
}
/* Keep headings, figures, and notes from splitting across pages */
h1, h2, h3, h4 { page-break-after: avoid; }
figure, .img-frame, blockquote, .footnotes li { page-break-inside: avoid; }
}