/* ============================================================================= CHOOSE YOUR LOOK ----------------------------------------------------------------------------- Two switches, both on the tag at the top of index.html: data-type editorial | grotesk | classic data-bullet dash | arrow | slash | dot | square | none Two more knobs are further down, as CSS variables you can edit directly: --h-featured / --h-card project title sizes --font-meta font for the role line and the tag row Change a value, save, refresh. If you change data-type, also swap the matching Google Fonts in index.html (they are listed there, commented out) so the right fonts actually download. ============================================================================= */ /* --- font sets ------------------------------------------------------------ */ :root, html[data-type='editorial'] { --serif: 'Libre Baskerville', ui-serif, Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-type='grotesk'] { --serif: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-type='classic'] { --serif: 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif; --sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Heading sizes live here because the sets are not optically equal: EB Garamond sets much smaller than Libre Baskerville at the same pt size, so `classic` needs a bump to hold the same weight on the page. */ :root { --h-featured: 1.875rem; --h-card: 1.375rem; } html[data-type='classic'] { --h-featured: 2.25rem; --h-card: 1.5rem; } /* Font for the role line and the tag row. The rest of the small uppercase furniture (eyebrows, index numbers, links) stays mono. Swap this for var(--mono) to put them back, or var(--serif) for something softer. */ :root { --font-meta: var(--sans); } /* --- bullet marker -------------------------------------------------------- */ :root, html[data-bullet='dash'] { --bullet: '—'; } html[data-bullet='arrow'] { --bullet: '→'; } html[data-bullet='slash'] { --bullet: '/'; } html[data-bullet='dot'] { --bullet: '·'; } html[data-bullet='square'] { --bullet: '▪'; } html[data-bullet='none'] { --bullet: ''; } /* ============================================================================= Paper & ink. Two palettes, one set of variable names — dark mode swaps the values on and every rule below follows along. ============================================================================= */ :root { --paper: #f5f4f0; --paper-sunk: #eeece5; --ink: #1b1a17; --ink-muted: #6d675c; --ink-faint: #97907f; --line: #d8d3c7; --line-strong: #b9b2a2; --accent: #9c5a34; } html.dark { --paper: #131211; --paper-sunk: #1b1917; --ink: #ebe7de; --ink-muted: #9a9384; --ink-faint: #6f6858; --line: #2c2925; --line-strong: #423d36; --accent: #d99a6c; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--paper); -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } ul { list-style: none; } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } /* ----------------------------------------------------------------------------- The label: uppercase mono at a size where the letter-spacing does the work. Used for every eyebrow, tag, index number and link in the page furniture. -------------------------------------------------------------------------- */ .label { font-family: var(--mono); font-size: 0.625rem; font-weight: 400; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; } .faint { color: var(--ink-faint); } a.ul { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } a.ul:hover { color: var(--accent); text-decoration-color: var(--accent); } .wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } /* ----------------------------------------------------------------------------- Masthead + intro. Kept deliberately short: the first project should be on screen when the page loads, not one scroll down. -------------------------------------------------------------------------- */ .masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); } .wordmark { font-family: var(--serif); font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; color: inherit; text-decoration: none; } .masthead-right { display: flex; align-items: baseline; gap: 1.25rem; } .masthead-right .meta { color: var(--ink-muted); } .toggle { background: none; border: 1px solid var(--line); border-radius: 0; color: var(--ink-muted); cursor: pointer; padding: 0.5rem 0.75rem; transition: color 0.15s ease, border-color 0.15s ease; } .toggle:hover { color: var(--accent); border-color: var(--line-strong); } .intro { max-width: 42rem; padding: 2rem 0 2.25rem; } .intro p { font-size: 1rem; line-height: 1.7; } .intro .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; color: var(--ink-muted); } .section-head { padding-bottom: 0.875rem; border-bottom: 1px solid var(--line); } /* A second section heading has to clear the grid above it. */ .grid + .section-head { margin-top: 5.5rem; } /* …and the grid under a heading already has that heading's rule as its top edge, so it drops its own border and the space that went with it. */ .section-head + .grid { margin-top: 0; padding-top: 2.5rem; border-top: none; } /* ----------------------------------------------------------------------------- Project cards -------------------------------------------------------------------------- */ .shot { overflow: hidden; border: 1px solid var(--line); background: var(--paper-sunk); aspect-ratio: 4 / 3; } /* A .shot that opens a gallery is a real