/* v3 design. Everything sits on cream — no dark slab. The mark beside the serif Title Case wordmark, the brand wave full-width beneath, then intro, news and the hiring panel. */ /* --------------------------------------------------------------------------- PALETTES. Switch with `palette:` in _config.yml — it sets data-palette on . Ink + marigold is the default (bare :root), so omitting the key or giving an unknown value falls back to it. The split that matters: --accent is a GRAPHIC colour only (the wave, the mark's disc, link underlines). It is 2.77:1 on cream at best and 1.60:1 at worst, so it can never carry text. --accent-deep is the same hue darkened until it clears AA, and that is what the hiring eyebrow and every hover use. --accent-deep is derived against --surface (the hiring panel), not the cream page, because that is the darker of the two backgrounds it sits on. Clearing 4.5:1 there clears it on cream automatically. Deriving against cream instead left the eyebrow at ~4.08:1 on the panel — a real AA failure on three of the four palettes. --------------------------------------------------------------------------- */ /* Ink + marigold */ :root { --ink: #232B3C; --accent: #C4862A; /* wave, mark disc, link underlines — graphics only */ --accent-deep: #895E1D; /* the accent made legible as type (as specified in the reference): 5.28:1 on cream */ --ink-soft: #6A6F78; } /* Teal + coral */ [data-palette="teal-coral"] { --ink: #0E6E60; --accent: #E8735A; /* wave, mark disc, link underlines — graphics only */ --accent-deep: #A04F3E; /* the accent made legible as type (derived): 4.54:1 on cream */ --ink-soft: #257B6E; } /* Forest + sand */ [data-palette="forest-sand"] { --ink: #2E6B3E; --accent: #D6C089; /* wave, mark disc, link underlines — graphics only */ --accent-deep: #716649; /* the accent made legible as type (derived): 4.55:1 on cream */ --ink-soft: #447A51; } /* Slate + sky */ [data-palette="slate-sky"] { --ink: #3C4657; --accent: #8FBCE6; /* wave, mark disc, link underlines — graphics only */ --accent-deep: #506981; /* the accent made legible as type (derived): 4.55:1 on cream */ --ink-soft: #686F7B; } /* Palette-independent tokens */ :root { --bg: #F5F2EB; --surface: #EAE6DB; /* the hiring panel — a shade down from the page */ --hairline: #E4E0D5; --serif: 'Newsreader', Georgia, serif; --grotesque: 'Archivo', 'Helvetica Neue', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* No font-size on on purpose: rem units resolve against the browser default (16px), which is what the reference does and what lets a reader's own font-size preference scale the page. Body copy is set to 17px below, so the two behave exactly as the reference: 17px prose, rem-based UI at 16px. */ body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-optical-sizing: auto; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } .wrap { max-width: 820px; margin: 0 auto; padding: 0 60px; } /* Pages that lay out in columns opt into a wider measure with `wide: true` in front matter; reading pages stay at 820px. */ .wrap.wide { max-width: 1120px; } /* Nav — small, Title Case, right-aligned above the wordmark. Sizes and tracking throughout are set for Title Case: the wide tracking that suits all-caps reads as gappy here, and Title Case looks optically smaller at the same px. */ nav { display: flex; justify-content: flex-end; gap: 1.6rem; padding: 26px 0 clamp(34px, 5vw, 46px); font-family: var(--grotesque); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.005em; } nav a { color: var(--ink); text-decoration: none; } nav a:hover { color: var(--accent-deep); } /* Lockup — mark beside the wordmark */ .lockup { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; } .mark { display: block; width: 46px; height: 46px; flex: none; } .mark-disc { fill: var(--accent); } .mark-crest { fill: var(--ink); } h1.name { font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1; letter-spacing: -0.014em; font-weight: 400; color: var(--ink); } /* The brand wave, full width under the lockup. Stretched with preserveAspectRatio="none"; non-scaling-stroke keeps the weight even, which means stroke-width is in final pixels and belongs in CSS. */ .wave { display: block; width: 100%; height: 22px; margin: 22px 0 0; } .wave path { stroke: var(--accent); stroke-width: 2.5px; } /* Intro — the short statement under the wave */ .intro { padding: clamp(40px, 6vw, 52px) 0 0; max-width: 640px; } .intro p { font-size: 1.24rem; font-weight: 300; line-height: 1.6; text-wrap: pretty; } /* Homepage columns: news left, hiring panel right. Source order is hiring FIRST so the call to action leads when this collapses to one column; grid placement moves it to the right on wide screens. */ .cols { display: grid; grid-template-columns: 1fr 350px; gap: clamp(36px, 4.5vw, 64px); align-items: start; padding-top: clamp(48px, 7vw, 64px); } .cols .news { grid-column: 1; grid-row: 1; padding-top: 0; } .cols .hiring { grid-column: 2; grid-row: 1; } /* With no hiring panel the news list takes the full measure. */ .cols.single { grid-template-columns: 1fr; } /* Hiring panel */ .hiring { background: var(--surface); padding: 30px 32px 34px; } .hiring .flag { display: block; margin-bottom: 0.9rem; font-family: var(--grotesque); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.005em; color: var(--accent-deep); } .hiring p { margin-bottom: 1.2rem; font-size: 1.16rem; font-weight: 300; line-height: 1.6; text-wrap: pretty; } .hiring a { font-size: 1.08rem; color: var(--ink); text-decoration: none; /* accent-deep rather than accent: the bright accent is only 2.48:1 on this panel, where on the cream page it manages 2.77:1. */ border-bottom: 2px solid var(--accent-deep); padding-bottom: 3px; } .hiring a:hover { border-bottom-color: var(--ink); } /* News index */ .news, .team { padding: clamp(44px, 7vw, 56px) 0 0; } .section-label { margin-bottom: 0.9rem; font-family: var(--grotesque); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.005em; color: var(--ink-soft); } .post { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; row-gap: 0.35rem; align-items: baseline; padding: 20px 0 22px; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); } a.post:hover { color: var(--accent-deep); } .post h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: inherit; text-wrap: pretty; } .post time { font-family: var(--grotesque); font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; text-align: right; } .post p { grid-column: 1 / -1; max-width: 640px; font-size: 1.08rem; line-height: 1.55; color: var(--ink-soft); } .news-end { border-top: 1px solid var(--hairline); } /* Team: vertical blocks laid out in a row, wrapping as the page narrows. No hairlines — rules make sense down a list, not across a row of cards. */ .team-grid { display: grid; /* 340px minimum, not 190: with bios attached, three columns across the 1000px measure gave ~36 characters a line — well under the 45-90 comfortable range. Two wider columns read properly, and auto-fit still drops to one when the page narrows. Names-and-roles only? 190px would fit three. */ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(28px, 4vw, 48px); padding-top: 6px; } .person { display: block; text-decoration: none; color: var(--ink); } a.person:hover { color: var(--accent-deep); } .person h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; color: inherit; text-wrap: pretty; } /* Roles borrow the hiring eyebrow's voice — the site's idiom for a small label that must register — instead of the date treatment, which recedes. accent-deep is 5.1:1 on cream, fine at this size. */ .person .role { display: block; margin-top: 0.3rem; font-family: var(--grotesque); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-deep); } .person p { margin-top: 0.6rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); } /* Links inside bios: ink against the soft-ink prose so they read as links, with the site's accent underline at 1px — 2px (the article treatment) is too heavy at this size. */ .person p a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; } .person p a:hover { border-bottom-color: var(--ink); } /* Profile icons — small by design; they are a footnote to the name, not a feature. 13px glyphs, but each link is padded to a 24x24 hit area (WCAG 2.5.8) with negative margin so the padding costs no layout. The negative margin is why the row uses a wider gap than the glyphs suggest. */ .social { display: flex; gap: 0.85rem; margin-top: 0.6rem; list-style: none; } .social a { display: block; padding: 5.5px; margin: -5.5px; color: var(--ink-soft); } .social a:hover { color: var(--accent-deep); } .social svg { display: block; width: 13px; height: 13px; fill: currentColor; } /* The website glyph is stroked rather than filled. The 24-unit viewBox now renders at 13px, so stroke-width scales by ~0.54 — 3.4 lands at ~1.84px, holding the optical weight of the solid marks at the smaller size. */ .social svg.stroked { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } /* width/height are on the element too, reserving space before the file loads so the page doesn't shift. background shows while loading or if a file is missing. */ .portrait { display: block; width: 96px; height: 96px; margin-bottom: 0.9rem; border-radius: 50%; object-fit: cover; background: var(--hairline); } /* Post pages — not in the reference; same measure and rhythm */ .article { padding: clamp(40px, 6vw, 52px) 0 0; max-width: 640px; } .article time { font-family: var(--grotesque); font-size: 0.78rem; color: var(--ink-soft); } .article h2.title { margin-top: 0.4rem; font-size: 2rem; font-weight: 500; line-height: 1.24; letter-spacing: -0.012em; text-wrap: pretty; } .article-body { padding-top: 1.5rem; } .article-body > * + * { margin-top: 1.2em; } .article-body h2 { margin-top: 2em; font-size: 1.3rem; font-weight: 500; line-height: 1.3; } .article-body h3 { margin-top: 1.8em; font-size: 1.1rem; font-weight: 600; } .article-body a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); } .article-body a:hover { border-bottom-color: var(--ink); } .article-body ul, .article-body ol { padding-left: 1.4em; } .article-body li + li { margin-top: 0.4em; } .article-body blockquote { padding-left: 1.2em; border-left: 2px solid var(--accent); color: var(--ink-soft); font-style: italic; } .article-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.4em 0; } .back { display: inline-block; margin-top: 2.6rem; font-family: var(--grotesque); font-size: 0.78rem; color: var(--ink-soft); text-decoration: none; } .back:hover { color: var(--accent-deep); } /* 404 */ .notfound { padding: clamp(40px, 6vw, 52px) 0 0; } .notfound p { font-size: 1.24rem; font-weight: 300; } .notfound a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); } .notfound a:hover { border-bottom-color: var(--ink); } /* Footer */ footer { margin-top: clamp(44px, 7vw, 64px); padding: 1.3rem 0 3.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; /* baseline, not the default stretch: stretched anchors put their accent border-bottom at the bottom of the grown box instead of under the text. */ align-items: baseline; font-family: var(--grotesque); font-size: 0.78rem; color: var(--ink-soft); } /* Copyright with the sponsorship note stacked beneath it, bottom-left; links stay right. The note is a legal footnote, so it sits well below the footer's own size — still ink-soft, which clears AA on cream. */ .footer-left { display: flex; flex-direction: column; gap: 0.25rem; } footer .links { display: flex; gap: 1.2rem; align-items: baseline; } footer .note { font-size: 0.66rem; line-height: 1.4; /* Held short so it doesn't run out toward the links. */ max-width: 27em; color: var(--ink-soft); } /* Footer links carry the same accent underline as every other link on the site. The reference left them bare, but with no affordance at rest they read as stray phrases rather than links — 1px rather than 2px, in proportion to the 0.78rem type. */ footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } footer a:hover { border-bottom-color: var(--ink); } /* Two columns need room; below this the panel stacks above the news list. */ @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } .cols .news, .cols .hiring { grid-column: 1; grid-row: auto; } } @media (max-width: 700px) { .wrap { padding-left: 24px; padding-right: 24px; } /* Footer stacks; everything stays left-aligned as it is on desktop. */ footer { flex-direction: column; align-items: flex-start; gap: 1rem; } .mark { width: 34px; height: 34px; } /* News rows collapse to one column and the date moves above the title. Team blocks need no override — they are block-level inside an auto-fit grid. */ .post { grid-template-columns: 1fr; row-gap: 0.3rem; } .post time { text-align: left; order: -1; } }