/* ========================================================================== BASECAMP — basecamphenry.com A drop-in stylesheet. One file, no build step. -------------------------------------------------------------------------- INSTALL (Eleventy): 1. Save as /css/basecamp.css (or wherever your styles live). 2. In your base layout , link it AFTER any existing stylesheet, or better, replace the old one entirely: 3. Fonts load via the @import below (Fraunces, Newsreader, IBM Plex Mono). If you prefer self-hosting later, delete the @import and add @font-face rules — nothing else needs to change. DESIGN SYSTEM IN ONE BREATH: - Paper: warm gallery white, hairline rules, images mounted like prints - Ink: warm near-black; secondary text in a softened umber-grey - Accent: spruce green (topo-map ink) — used ONLY for links + focus - Type: Fraunces (display) / Newsreader (text) / Plex Mono (metadata) - Space: everything snaps to the --space-* scale. No ad-hoc margins. OPTIONAL MARKUP HOOKS (all documented at their rule blocks below): - .wordmark → the "Basecamp" site title - .intro → one-line italic introduction on the homepage - .tile-grid → homepage image grid (children: .tile) - .tile → or
wrapping an + - .matte → wraps a photo in a print-style white mount - .meta → mono metadata line (dates, camera, film stock) - .active → add to the current page's nav link Everything else styles bare HTML: nav, h1–h6, p, a, img, figure, figcaption, blockquote, hr, footer. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@300;400&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); /* Courier Prime — self-hosted, latin subset only */ @font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/courier-prime-400.woff2") format("woff2"); } @font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/courier-prime-700.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Color — warm paper + topo-green accent */ --paper: #F7F5F0; /* page background: warm gallery white */ --mount: #FFFFFF; /* print mattes, raised surfaces */ --ink: #211F1A; /* primary text: warm near-black */ --ink-soft: #6B675C; /* secondary text, captions */ --hairline: #DCD8CD; /* rules and borders */ --accent: #2E5141; /* spruce green: links, focus */ --accent-deep: #1F3A2D; /* link hover */ /* Type */ --font-display: "Fraunces", Georgia, serif; --font-text: "Newsreader", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Type scale (major third-ish, tuned by hand) */ --text-xs: 0.75rem; /* 12px — mono metadata */ --text-sm: 0.9375rem; /* 15px — captions, footer */ --text-base: 1.125rem; /* 18px — body */ --text-lg: 1.375rem; /* 22px — lead paragraphs, h4 */ --text-xl: 1.75rem; /* 28px — h3 */ --text-2xl: 2.375rem; /* 38px — h2 */ --text-3xl: 3.25rem; /* 52px — h1 / wordmark */ /* Spacing scale — the only gaps that exist on this site */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2.5rem; /* 40px */ --space-7: 4rem; /* 64px */ --space-8: 6.5rem; /* 104px */ /* Layout */ --measure: 66ch; /* max line length for prose */ --site-width: 68rem; /* 1088px container */ --transition: 180ms ease; } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: var(--text-base); line-height: 1.65; font-optical-sizing: auto; /* lets Newsreader pick its text cut */ -webkit-font-smoothing: antialiased; /* Site frame: centered column with breathing room */ max-width: var(--site-width); padding: var(--space-6) var(--space-5) var(--space-7); margin-inline: auto; } @media (max-width: 640px) { body { padding: var(--space-5) var(--space-4) var(--space-6); } } ::selection { background: var(--accent); color: var(--paper); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 540; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-3xl); font-optical-sizing: auto; } h2 { font-size: var(--text-2xl); margin-top: var(--space-7); } h3 { font-size: var(--text-xl); margin-top: var(--space-6); } h4, h5, h6 { font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); } /* First heading after the nav shouldn't double up its top margin */ h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } p { max-width: var(--measure); margin: 0 0 var(--space-4); } /* Optional hook:

— one-line homepage introduction. e.g. "A personal outpost for links, photos, and ideas." */ .intro { font-family: var(--font-display); font-style: italic; font-weight: 420; font-size: var(--text-lg); color: var(--ink-soft); max-width: 40ch; margin: var(--space-5) 0 var(--space-6); } /* Optional hook: mono metadata — dates, camera, film stock, section labels. e.g. May 2026 · Ricoh GR IIIx */ .meta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-soft); max-width: var(--measure); } hr { border: none; border-top: 1px solid var(--hairline); margin: var(--space-7) 0; } ul, ol { max-width: var(--measure); padding-left: 1.25em; margin: 0 0 var(--space-4); } li { margin-bottom: var(--space-2); } small { font-size: var(--text-sm); color: var(--ink-soft); } /* -------------------------------------------------------------------------- 4. LINKS The accent color lives here and (almost) nowhere else. -------------------------------------------------------------------------- */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: color var(--transition), text-decoration-color var(--transition); } a:hover { color: var(--accent-deep); text-decoration-color: var(--accent-deep); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; } /* -------------------------------------------------------------------------- 5. SITE HEADER + NAV Works on:

Basecamp
but degrades fine on a bare