/* === 01-fonts.css === */ /* --------------------------------------------------------------------------- Fonts — self-hosted, latin subset only. Newsreader for everything editorial, Archivo for labels, eyebrows and buttons. They replaced Cormorant Garamond and Inter in the August 2026 redesign, and the old files are deleted rather than left in the folder. Every design file in the handoff loads these two from fonts.googleapis.com. They are self-hosted instead, and that is not a preference. A Google Fonts link is a DNS lookup and two connections before a single glyph is drawn, it hands a third party the IP address of every visitor, and it puts a request outside the origin on a site whose cookie-free position depends on there not being one. No request ever leaves the origin for a typeface. The files are committed to the repo and refreshed with `npm run fonts`. The URLs below are rewritten to content-hashed names at build time by lib/assets.mjs, so a changed weight can never be served from a year-long cache of the old one. --------------------------------------------------------------------------- */ /* NEWSREADER IS ONE VARIABLE FACE, NOT FIVE STATIC ONES. `font-weight: 200 800` is a RANGE, not a mistake. A variable font declares the span it can render and the browser interpolates inside it, so 300, 400 and 500 all come from this one file and no separate face is needed for each. The reason it is the variable face at all is the OPTICAL SIZE axis, which the designs ask for explicitly: Newsreader:ital,opsz,wght@0,6..72,300;400;500;1,6..72,300;400 `6..72` is opsz. Optical sizing is not scaling — it is a different drawing of the letter at a different size, with more open counters and sturdier hairlines small, and a tighter fit with finer strokes large. A 17px caption and a 76px page title are meant to look like relatives, not like the same shape at two magnifications. Until 10 August 2026 this shipped five static instances, which gave the site one drawing at every size. Set beside the design that reads as a different typeface in the small sizes, which is how it was reported. `font-optical-sizing: auto` is the initial value in every browser that supports the axis, so the element's own font-size drives it and there is nothing to declare. No rule elsewhere in this stylesheet has to know. ARCHIVO STAYS STATIC. The designs load it as `Archivo:wght@400;500` — no optical size, no width axis, two weights. A variable Archivo would be a larger file for an axis nothing asks for. Two Newsreader files replace five: 279KB against 116KB, paid once for the whole site, and still self-hosted and content-hashed. No request for a typeface ever leaves the origin. --------------------------------------------------------------------------- */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-normal.6e4f2958.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-italic.5dfcd10d.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/archivo-latin-400-normal.07f91601.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/archivo-latin-500-normal.ab74eca5.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* === 02-site.css === */ /* =========================================================================== THE AUTHORITATIVE STYLESHEET. This is design_handoff_lapunne_site/site.css, verbatim and unmerged. The handoff is explicit that it REPLACES the previous stylesheet rather than being merged into it, and that anything in the old one with no equivalent here is a pattern the redesign no longer uses. Nothing was carried over: the fifteen partials that used to live in this folder were deleted, not adapted. Two competing sets of tokens is how a site drifts, and this repo has already paid for that once — `.journey` existed in two page stylesheets and a stale cache put one over the other's markup. The @font-face rules are in 01-fonts.css, because they point at files this repo hashes and the handoff loads from Google. Everything else that follows is per-page work the handoff says is deliberately NOT in this file: the two Ready by Completion timelines, the Innovation ecosystem diagram, and the project page tables, whose proportions carry meaning and are laid out per instance. Edit the design bundle, not this file, if a value here is ever wrong. =========================================================================== */ /* Lapunne — site stylesheet The authoritative styling for the redesigned site. This replaces the previous site.css. Every value here is taken from the design files in ./design/. The designs are styled inline (a constraint of the tool they were made in). This file is the same styling expressed as tokens and classes. Where a design file and this stylesheet disagree, this file is the one to build against. */ /* ---------------------------------------------------------------- tokens */ :root { /* Colour */ --ivory: #FAF8F4; /* page background */ --panel: #F1ECE4; /* alternating sections, bio blocks */ --stone: #E4DDD3; /* placeholders, chart bars, inactive tabs */ --stone-mid: #D6CCBF; /* secondary chart bars */ --coffee: #3A2C24; /* primary text, dark panels, buttons */ --coffee-hover: #6B563F; --body: #5A4F46; /* body copy */ --muted: #6E6157; /* labels, captions, secondary text */ --caramel: #6B563F; /* links, accents, eyebrow rules */ /* Three colours the designs use that the token table in the handoff does not name. They are not inventions: each is stated in a design file and the sweep found all three missing from the build. --bio-ink the fact-strip value on every project page, and the .bio block. 8.79:1 on panel. --on-dark-warm the phase numerals in the home page's dark band, and the link under them. 6.66:1 on coffee. --on-photo-warm the eyebrow over the Our Notes hero photograph, which hero:contrast measures against the rendered pixels. */ --bio-ink: #4A3E35; --on-dark-warm: #C6B49F; --on-photo-warm: #E7DCCB; --on-dark: #FAF8F4; --on-dark-soft: #E4DDD3; /* The design draws NINE alphas of this one colour and the token set names three. Two more are added here because the project pages need them and a literal in a page stylesheet is how the palette drifts: --rule-hair 0.14, the commonest rule in the whole bundle (69 uses): the divider between two cells of a fact strip. --rule-mid 0.20 (39 uses): the border around a fact strip and above an outcome block. --rule-line 0.18 (42 uses): the rule under a date line, between two FAQ answers, and around a bordered panel. Two are left — 0.28 (17 uses), and 0.24 and 0.35 once each — and they are drawn with whichever token is nearest. Nothing measures a border: `render:pages` compares type, so a rule that is one hundredth of an alpha out fails no check and is found by reading the design file. */ --rule: rgba(58, 44, 36, 0.16); --rule-soft: rgba(58, 44, 36, 0.12); --rule-hair: rgba(58, 44, 36, 0.14); --rule-line: rgba(58, 44, 36, 0.18); --rule-mid: rgba(58, 44, 36, 0.20); --rule-strong: rgba(58, 44, 36, 0.30); /* Type */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Space */ --section-y: 96px; --section-x: 56px; --section-x-s: 24px; /* Measure */ --w-page: 1360px; --w-prose: 820px; --w-index: 920px; /* the Our Notes list, which the design draws wider */ --w-legal: 760px; --w-article: 720px; /* Focus */ --focus: 2px solid var(--coffee); } /* ------------------------------------------------------------ base reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ivory); color: var(--coffee); font-family: var(--font-serif); font-size: 20px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { width: 100%; height: 100%; object-fit: cover; } a { color: var(--caramel); text-decoration: none; } a:hover { color: var(--coffee); } a:focus-visible, button:focus-visible, summary:focus-visible, [role="tab"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus); outline-offset: 3px; } /* Prose links carry an underline; navigation and button links do not. */ .prose a, .legal a, .article__body a { text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------- layout */ .section { padding: var(--section-y) var(--section-x); } .section--panel { background: var(--panel); } .section--dark { background: var(--coffee); color: var(--on-dark); } .section--dark a { color: var(--on-dark); } /* ── THE BLANKET CAME OFF, 15 AUGUST 2026 ────────────────────────────────── This was `.section--dark p { color: var(--on-dark-soft) }`, which is right on About and wrong six times on the home page. Two dark bands exist and the design gives them different reversed values: About's closing lede is #E4DDD3, and the home band's paragraphs are three different things — 0.78 on the supporting sentence, solid ivory on the claim under it, and 0.72 on the four phases. One rule covering two populations again. So About's instance is named, and the home band's are in 04-pages.css beside the phase list they belong to. What a future paragraph in a dark band inherits is now `--on-dark`, the section's own solid ivory: the highest contrast available, which is the safe thing to be wrong in the direction of. A blanket guessing "soft" is not. */ .section--dark .lede { color: var(--on-dark-soft); } .section--tight { padding-top: 0; } .container { max-width: var(--w-page); margin-inline: auto; } .container--prose { max-width: var(--w-prose); margin-inline: auto; } .container--legal { max-width: var(--w-legal); margin-inline: auto; } .container--article { max-width: var(--w-article); margin-inline: auto; } /* Sidebar-and-content, and equal columns. Both collapse on their own. */ /* 260px and a 40/80 gap on About, Our Approach and Ready by Completion. Contact's "What happens next" is 320px on 56/80, so it says so with `--split` rather than taking the shared one: a 320px heading column beside a three-across step list is a different proportion, not a near miss. */ .split { display: grid; grid-template-columns: minmax(0, var(--split, 260px)) minmax(0, 1fr); gap: var(--split-gap, 40px 80px); align-items: start; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px 80px; align-items: start; } /* 40px between rows and 32 between columns, which is what Home draws. It was the other way round, and four cards 8px too narrow followed from it. */ .cols--narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 32px; } /* ── AND IT DOES NOT CARRY A MEASURE, WHICH WAS TRIED TWICE ──────────────── `max-width` on `.stack` is wrong twice over. Written as `var(--measure, …)` it leaks: a custom property inherits, so capping the stack caps every paragraph and heading inside it as well, and nine measures went the wrong way. Written as `var(--stack, none)` it still breaks `.container--legal .stack`, because `none` is a real declaration and `.stack` is the later rule — three page titles jumped from 760px to the full 1328. A layout primitive does not get a width. Where the design caps a column, the cap goes on `.measured` below, which is only ever written where it is wanted. */ .stack { display: grid; gap: 22px; } /* A column the design caps on the WRAPPER rather than on each paragraph in it. In pixels, and that is not laziness. The design writes `max-width:66ch` on a div whose font-size is the document's default 16px, and this build's body is 20px — so the same declaration draws a wider column here. `ch` cannot simply be scaled either: Newsreader is a variable face with an optical size axis, so the advance of "0" at 20px is not 20/16 of its advance at 16px, and 66 × 16/20 = 52.8ch comes out 38px short. 598px is what the design draws. */ .measured { max-width: var(--stack, 598px); } .stack--tight{ display: grid; gap: 14px; } .row { display: flex; gap: 16px 24px; flex-wrap: wrap; align-items: center; } .skip-link { position: absolute; left: -9999px; background: var(--coffee); color: var(--on-dark); padding: 12px 20px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; z-index: 100; } .skip-link:focus { left: 16px; top: 16px; } /* ----------------------------------------------------------------- type */ /* ═══════════════════════════════════════════════════════════════════════════ CLASS 5 · THE HEADING SCALE, AS THE DESIGN STATES IT The design draws SEVEN h1 steps and NINE h2 steps. The build had three and two, and everything else was pulled to the nearest one it had. That is 70 of the 165 size differences and all 27 weight differences, and it is the fourth time a class in this build has covered more populations than the design's equivalent. The whole ladder, with what each step is for and how many times the bundle draws it, so the next person can see there is a system and where a heading belongs in it: h1 lh × ── clamp(42px,5.4vw,76px) --hero 1.04 10 About, Contact, Our Approach, 6 projects ── clamp(40px,5vw,72px) .hero__title 1.05 1 Home ── clamp(38px,4.6vw,64px) --notes 1.06 1 Our Notes ── clamp(38px,4.6vw,62px) .title 1.08 4 404, Innovation and the two form replies ── clamp(36px,4.4vw,60px) --work 1.08 1 Our Work ── clamp(36px,4.2vw,56px) --legal 1.08 3 Privacy, Cookies, Terms ── clamp(32px,3.8vw,50px) --article 1.14 8 the journal h2 lh fw × ── clamp(28px,3.4vw,48px) 1.12 300 1 About's closing ── clamp(30px,3.4vw,46px) --display 1.18 300 3 Home ── clamp(28px,3.2vw,44px) 1.18 300 1 Our Work's closing ── clamp(28px,3vw,40px) --section 1.15 300 35 every project chapter, and the principal heading on four pages ── clamp(28px,2.9vw,40px) .cols--work 1.18 300 6 the Our Work cards ── clamp(24px,2.4vw,32px) 1.25 400 8 the Our Notes index ── clamp(24px,2.4vw,30px) .h2 1.20 300 13 Contact, Innovation, Our Approach ── clamp(24px,2.2vw,30px) article h2 1.28 400 38 the journal ── clamp(22px,2.2vw,28px) legal .h2 1.20 300 20 Privacy, Cookies, Terms THE DEFAULT IS THE SMALL STEP, DELIBERATELY. A heading that lands here without a modifier is drawn at the bottom of the ladder, which is the wrong size in a way somebody notices, rather than the wrong size in a way that looks intentional. Being wrong in the safe direction is the same choice as a paragraph on the dark band inheriting solid ivory. AND THE WEIGHT IS ON THE CLASS, NOT THE TAG. `h1, h2, h3, h4 { 300 }` is an ELEMENT selector, so `

` and `

` never saw it and took the browser's 400. Seven headings on six pages were bold because of where the declaration sat rather than what it said. A class that names a heading level now carries the whole heading, not half of it. ═══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4 { font-weight: 300; letter-spacing: -0.01em; text-wrap: balance; margin: 0; } /* THE MEASURE GOES ON THE STEP, NOT ON `.title`. The design caps a page title on ten of the twenty-eight pages and leaves the other eighteen alone, and the split is by STEP rather than by page: every `--hero` title is capped, no `--article` or `--legal` one is. A default on `.title` would be inherited by all four modifiers and would be wrong eleven times, so the base carries a hook and no value. */ .title { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 300; max-width: var(--measure, none); } /* 16ch on six of the ten, including five of the six project pages. The other four state theirs: 18ch on Our Approach, About and Ready by Completion, 15ch on the major transformation. */ .title--hero { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.04; max-width: var(--measure, 16ch); } .title--article { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.14; letter-spacing: -0.02em; } .title--legal { font-size: clamp(36px, 4.2vw, 56px); } .title--work { font-size: clamp(36px, 4.4vw, 60px); max-width: var(--measure, 18ch); } /* CLASS 3 · THE HEADING MEASURE IS PER INSTANCE, AND A DEFAULT WAS TRIED AND REVERTED. The design caps 36 of its 55 h2s at 22ch, 6 at 20, 5 at 24 and 8 at 34, and the build caps none — which is most of the width differences in `npm run render:pages` and, on the pages where a heading should be two lines, is why it is one long one. `max-width: var(--measure, 22ch)` was the obvious fix and it is recorded here because it was MEASURED AND IT WAS WORSE: it corrected 26 headings and broke 32, because `.h2` in this build is also used on headings the design leaves uncapped, and the two populations do not line up. Measure went 122 to 128 and width 358 to 383. ── AND HERE IS WHY, READ ON 15 AUGUST 2026 ─────────────────────────────── The number was never the difficult part. `.h2` was one class over four of the design's steps, and the design leaves two of them ENTIRELY UNCAPPED: 38 journal headings and 20 legal ones, 58 headings with no measure at all against 35 capped at 22ch. No single default can be right for that population, which is exactly the 26-against-32 the experiment measured. Class 5 gave those steps their own classes. The measures then went in without a fight, one population at a time: .chapter__head .h2 22ch default, 26 of 30 · 4 stated in chapter data .h2--section 22ch default, 2 of 5 · 3 stated at the element .h2--display 20ch default, 3 of 5 · 2 stated at the element .h2 (this rule) NO default, 11 of 13 · 2 stated at the element .article__body h2 no measure, 38 of 38 .article__body .h2 no measure, 20 of 20 .notes-index__title 34ch, 8 of 8 .cols--work .h2 22ch, 6 of 6 126 h2 elements, every one now drawn at the measure its own design file states. Measure 116 to 74, width 316 to 275, lines 166 to 136. The lesson is not "read every instance". It is that a blanket is only answerable once the class underneath it holds ONE population. Splitting the sizes was what made the measures a five-minute job. */ /* NO DEFAULT MEASURE, DELIBERATELY. The design leaves 11 of the 13 headings at this step uncapped, and the two that are capped say so where they are. This is the class the reverted class-3 experiment was applied to; `var(--measure, none)` is how the exception gets in without a default that is wrong 11 times. */ .h2 { font-size: var(--h2, clamp(24px, 2.4vw, 30px)); line-height: var(--h2-lh, 1.2); font-weight: 300; max-width: var(--measure, none); } /* The 35-instance step, and the one the build did not have. It is every project chapter heading and the principal heading on Home, About, Our Approach and Ready by Completion — the largest single population in the bundle, drawn at 30px because `.h2` was the only class there was. */ .h2--section { font-size: clamp(28px, 3vw, 40px); line-height: var(--h2-lh, 1.15); /* 22ch on 28 of the 35 headings at this step. The five outside the project pages each state their own where they differ, including the one the design leaves uncapped. */ max-width: var(--measure, 22ch); } .h3 { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.45; font-weight: 300; max-width: var(--measure, none); } /* ── 46ch, AND 52 WAS A TRANSCRIPTION ────────────────────────────────────── This said "52ch is the design's most common lede measure". Read out of the rendered design rather than the handoff, it is not: 46ch is stated on nine of the eighteen ledes the bundle draws, and 52ch on two. Six project pages, both Ready by Completion ledes and the Contact opening are all 46. The seven that differ say so where they are: 52ch twice on About, 62ch three times and 56ch once on Our Approach, 54 on the could-not-send page, 50 on the 404, and Innovation's is uncapped. */ .lede { font-size: var(--lede, 22px); line-height: 1.6; max-width: var(--measure, 46ch); text-wrap: pretty; } /* ── THE ONE PLACE THIS FILE IS OVERRULED, AND WHY ───────────────────────── `max-width: 66ch` was a blanket cap on every prose paragraph on the site. The design files state a measure PER ELEMENT — 62ch, 56ch, 52ch, 46ch, 44ch, 22ch and a dozen others — and the two cannot both be true. The sweep found 66ch on 21 of 28 pages and 73 stated measures never produced. The handoff's arbitration clause says this stylesheet wins on styling. Pearl overruled it on 10 August 2026, and the reasoning is worth keeping: the inline-styled design files are what she reviewed and approved, page by page. This stylesheet was written afterwards as a tokenised interpretation of them, and in doing so it generalised something nobody reviewed. So where a blanket rule here contradicts a value the design states per instance, the design wins. `--measure` is how a per-element value gets back in: the template sets it where the design states one, and where the design states none the paragraph is capped by its container instead, which is what the eight article pages do — they set no ch measure anywhere and rely on --w-article at 720px. */ /* ── 1.78 IS THE JOURNAL'S, AND IT WAS APPLIED TO EVERY PROSE BLOCK ──────── The design sets `font-size:20px; line-height:1.78` on the container of an ARTICLE, and nothing else in the bundle uses 1.78 — 80 paragraphs are 1.7, 55 are 1.75 in the legal column, and the home page's are 1.68. One value transcribed off one page and made the default for all of them. So the two are separated: `.article__body p` keeps the journal's, and `.prose p` takes 1.7, which the design states more often than every other value put together. `--prose-lh` carries the rest. */ .article__body p { margin: 0 0 26px; font-size: var(--prose, 20px); line-height: var(--prose-lh, 1.78); max-width: var(--measure, none); text-wrap: pretty; } .prose p { margin: 0 0 26px; font-size: var(--prose, 20px); line-height: var(--prose-lh, 1.7); max-width: var(--measure, none); text-wrap: pretty; } .prose p:last-child, .article__body p:last-child { margin-bottom: 0; } /* THE SECOND REGISTER IS THREE SIZES, NOT ONE. The design writes this quieter voice at 20px where it is carrying the argument, 19px where it is qualifying one, and 18px where it is a standfirst over a list. 19 is the commonest and stays the default; `--prose` is how the other two get stated at the block that uses them, the same way `--measure` states a paragraph's own measure. */ .prose--secondary p { font-size: var(--prose, 19px); line-height: var(--prose-lh, 1.7); color: var(--body); } /* TWO KINDS OF DOCUMENT SHARE THIS COLUMN, AND THE DESIGN SETS THEIR HEADINGS DIFFERENTLY. `.article__body` is the reading column for the eight journal articles AND for privacy, cookies and terms, which is why the legal pages read as well as they do. The design draws a journal section heading at clamp(24,2.2vw,30) in 400 and a legal one at clamp(22,2.2vw,28) in 300 — a step smaller and a weight lighter, because a legal document's headings are signposts and an article's are the argument. One rule at 400 covered both, so all twenty legal headings were a size too large and a weight too heavy. They are told apart by what they already are: a journal heading is a bare `

` written by Markdown, a legal one is `

` written by hand. The margin is the same for both and stays on the shared rule. Scoped to the container rather than given a modifier so the next heading added to a legal page is right without anybody remembering to say so. */ .article__body h2 { margin: 52px 0 22px; } .article__body h2:not([class]) { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.28; font-weight: 400; } .article__body .h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; } /* 0.2em, which the design states on 146 of its 149 ten-pixel labels and 114 of its eleven-pixel ones. 0.22em was a transcription and it is two pixels of width per word — enough to wrap the services line on /our-work/ onto a second line. `--label-ls` carries the six instances the design tracks differently. */ .label { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--label-ls, 0.2em); text-transform: uppercase; color: var(--muted); } .label--tight { font-size: 10px; letter-spacing: var(--label-ls, 0.2em); } .label--accent { color: var(--caramel); } .rule { width: 64px; height: 1px; background: var(--caramel); border: 0; margin: 0; } .rule--full { width: 100%; background: var(--rule); } .quote { margin: 14px 0 0; padding-left: 24px; border-left: 2px solid var(--caramel); /* About's. The four project pull quotes are a step up and say so in 12-project.css, which owns the chapter they sit in. */ font-size: clamp(24px, 2.5vw, 32px); line-height: 1.3; font-weight: 300; font-style: italic; /* Stated on every blockquote in the bundle. A blockquote is not one of the four tags the heading reset reaches, so it was the only display-sized type on the site setting at the default tracking — 14px wider over a 42 character line, which is what put one pull quote onto a second line. */ letter-spacing: -0.01em; text-wrap: pretty; } .note { font-size: 16px; line-height: 1.68; color: var(--body); border-top: 1px solid var(--rule); padding-top: 28px; } .note strong { color: var(--coffee); font-weight: 500; } /* The one disclaimer in the journal, on the renovation-budget article. The design sets it at 18px in --bio-ink, a size down and a shade back from the article it interrupts, because it is the article stepping out of its own voice to say "check this with somebody qualified". Raw HTML in the Markdown because that is the only way to name one paragraph, and it is named rather than selected by position for the reason `.lede + .lede` stopped being. */ .article__body p.disclaimer { font-size: 18px; line-height: 1.65; color: var(--bio-ink); } /* ── `.note` IS TWO THINGS, AND THE DESIGN SIZES THEM DIFFERENTLY ────────── The rule above is the editorial note under a journal article: 16px on 1.68 in `--body`, which is what the design states and what it should stay. The sign-off at the foot of a legal page and the line under the 404's link list share the markup and nothing else. The design draws both a step up and a shade back — 17px in `--muted` — because they are asides to a document rather than part of it. Four instances, all previously drawn as if they were the journal's. This is also the four colour rows `npm run render:pages` has been carrying: the size and the colour were one substitution, not two. */ .note--aside { font-size: 17px; line-height: var(--note-lh, 1.6); color: var(--muted); } .note--aside p { max-width: var(--measure, none); } .bio { padding: 28px; background: var(--panel); font-size: 17px; line-height: 1.68; color: #4A3E35; } /* -------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; min-height: 48px; /* 15px 30px on a link and 16px 32px on the one submit button, which is what the two design components state. `--btn-pad` carries the difference. */ padding: var(--btn-pad, 15px 30px); border: 0; border-radius: 0; /* no radius anywhere on this site */ background: var(--coffee); color: var(--on-dark); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--coffee-hover); color: var(--on-dark); } .btn--ghost { background: transparent; color: var(--coffee); border: 1px solid var(--rule-strong); } .btn--ghost:hover { background: transparent; border-color: var(--coffee); color: var(--coffee); } .section--dark .btn { background: var(--on-dark); color: var(--coffee); } .section--dark .btn:hover { background: var(--on-dark-soft); } .section--dark .btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(250,248,244,0.5); } .section--dark .btn--ghost:hover { border-color: var(--on-dark); } .link-arrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--label-ls, 0.2em); text-transform: uppercase; text-decoration: none; } /* ----------------------------------------------------------------- nav */ .nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 22px var(--section-x); transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .nav[data-scrolled="true"] { background: var(--ivory); border-bottom-color: var(--rule); } .nav[data-hidden="true"] { transform: translateY(-100%); } .nav__inner { max-width: var(--w-page); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav__links { display: flex; gap: 36px; flex-wrap: wrap; } .nav__link { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 6px 0; text-decoration: none; } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--coffee); } .nav__toggle { display: none; } /* --------------------------------------------------------------- footer */ .footer { border-top: 1px solid var(--rule); padding: 32px var(--section-x) 44px; } .footer__inner { max-width: var(--w-page); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .footer__links { display: flex; gap: 32px; flex-wrap: wrap; } .footer__links a { color: var(--muted); padding: 4px 0; text-decoration: none; } .footer__links a:hover { color: var(--coffee); } /* -------------------------------------------------------------- figures */ figure { margin: 0; } .figure__frame { overflow: hidden; background: var(--stone); } .figure__frame--4x5 { aspect-ratio: 4 / 5; } .figure__frame--16x9 { aspect-ratio: 16 / 9; } /* 60ch is this file's generalisation of a value the designs state per figure: 46ch in a pair, 70ch beside a single or a full-bleed image. Same ruling as the paragraph measure above — the per-instance value wins. */ figcaption { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: var(--measure, 60ch); text-wrap: pretty; } .placeholder { display: flex; align-items: center; justify-content: center; background: var(--ivory); border: 1px solid rgba(58,44,36,0.16); } /* --------------------------------------------------------------- tables */ .table { width: 100%; border-collapse: collapse; text-align: left; } .table th { padding: 0 24px 12px 0; border-bottom: 1px solid var(--rule-strong); font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .table td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule-soft); font-size: 18px; color: var(--body); vertical-align: top; } .table td:first-child { color: var(--coffee); } .table tr:last-child td { border-bottom: 0; } /* ------------------------------------------------------------ tab groups */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; } .tab { padding: 12px 22px; border: 0; border-radius: 0; background: var(--stone); color: var(--coffee); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; } .tab[aria-selected="true"] { background: var(--coffee); color: var(--on-dark); } .tab:hover:not([aria-selected="true"]) { background: var(--stone-mid); } .tabpanel[hidden] { display: none; } /* --------------------------------------------------------------- details */ details { border-bottom: 1px solid var(--rule); } details summary { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 21px; line-height: 1.4; font-weight: 300; color: var(--coffee); } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; font-family: var(--font-sans); font-size: 18px; color: var(--caramel); line-height: 1; } details[open] summary::after { content: "\2212"; } details .prose { padding-bottom: 22px; } /* ----------------------------------------------------------------- forms */ .field { display: grid; gap: 8px; } /* A LABEL STATES NO LEADING IN THE DESIGN, SO IT STATES NONE HERE. Every Archivo label, legend, chart bar and eyebrow in the bundle is written with a font-family, a size and a tracking, and no line-height at all — so it draws at the face's own `normal`. Inheriting the body's 1.7 onto a 10px label puts seven pixels of air inside a one-line control, which is 28 of the leading rows in `npm run render:pages` and the same fault the house rules already record for captions. */ .field__label { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); line-height: normal; } .field__hint { font-size: 16px; line-height: 1.6; color: var(--muted); } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea { width: 100%; min-height: 48px; padding: 13px 14px; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--ivory); color: var(--coffee); font-family: var(--font-serif); font-size: 18px; line-height: 1.5; } textarea { min-height: 160px; resize: vertical; } select { appearance: none; background-image: none; } input:hover, select:hover, textarea:hover { border-color: var(--coffee); } .radios { display: flex; gap: 12px 28px; flex-wrap: wrap; } .radio { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; min-height: 44px; line-height: normal; } .radio input { width: 20px; height: 20px; min-height: 0; accent-color: var(--coffee); } /* Honeypot. Off-screen, never display:none, never named for autofill. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------ responsive */ @media (max-width: 1200px) { .split { gap: 32px 48px; } } @media (max-width: 980px) { :root { --section-y: 72px; } .chart { display: none; } .chart-fallback { display: block; } } @media (max-width: 880px) { :root { --section-x: var(--section-x-s); } .split, .cols { grid-template-columns: minmax(0, 1fr); } .nav__links { display: none; } .nav__toggle { display: inline-flex; } .nav[data-open="true"] .nav__links { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 24px; } .nav[data-open="true"] .nav__inner { flex-wrap: wrap; } body { font-size: 19px; } } /* ---------------------------------------------------------------- print */ @media print { .nav, .skip-link, .btn, .tabs { display: none; } body { background: #fff; font-size: 11pt; } .section { padding: 0 0 24pt; } a { color: inherit; text-decoration: underline; } } /* === 03-shell.css === */ /* =========================================================================== The shell, where the authoritative stylesheet stops short. site.css styles `.nav` for its solid state and gives it `data-scrolled`, `data-hidden` and `data-open` to switch on. What it does not carry is the TRANSPARENT state — the nav sitting over a hero photograph, ivory wordmark, ivory links, and the scrim underneath them that makes those legible. That behaviour is specified in Site Nav.dc.html and nowhere else, so it is ported from the design file, exactly as the handoff says to do with the timelines and the ecosystem diagram. ── Why the default is SOLID, and why that is not a deviation ────────────── Read literally, `.nav[data-scrolled="true"] { background: var(--ivory) }` means the nav is transparent until you scroll — on every page, hero or not. The design's own logic says otherwise: `solid` starts true and only goes false when the `transparent` prop is set AND the hero is still on screen. This repo has already paid for getting that backwards. A transparent-by- default header shipped once and produced 128 contrast failures across 26 pages, because a header with no background over a pale canvas is a header with no contrast guarantee at all. So: solid is the default, transparent is opt-in per page, and it is scoped to `body:has(.hero)` so a page without a hero cannot accidentally get it even if the flag is set wrongly in front matter. =========================================================================== */ /* The nav is fixed, so every page without a hero owes it the height it covers. A hero page owes nothing: the photograph is meant to run under it. */ .shell--solid { padding-top: 84px; } /* --------------------------------------------------------- transparent nav */ body:has(.hero) .nav:not([data-scrolled='true']) { background: transparent; border-bottom-color: transparent; } body:has(.hero) .nav:not([data-scrolled='true']) .nav__link { color: var(--on-dark); } /* `:not([open])` because the ivory trigger is for a trigger sitting ON a photograph. Once the menu is open the photograph is behind a full-screen ivory panel, and ivory on ivory is a Close control nobody can see. This was the state the specificity fight was about: the transparent-hero rule is one element more specific than anything scoped to the open menu, so the right fix is to narrow this rule rather than to out-weigh it. */ body:has(.hero) .nav:not([data-scrolled='true']) .nav__menu:not([open]) .nav__toggle { color: var(--on-dark); } /* The wordmark is two files, not one recoloured: the ivory mark is drawn for a dark ground and is not the coffee mark with a filter on it. */ .nav__mark--ivory { display: none; } body:has(.hero) .nav:not([data-scrolled='true']) .nav__mark--coffee { display: none; } body:has(.hero) .nav:not([data-scrolled='true']) .nav__mark--ivory { display: block; } /* The panel's mark is the coffee one and has no ivory twin to switch with. */ .nav__panel-head .nav__mark { display: block; } /* THE SCRIM, AND WHY IT IS MEASURED RATHER THAN EYEBALLED. The hero's own gradient runs left to right and is thinnest at the right edge, which is exactly where the navigation links sit. Without this the top right of a hero page is ivory 11px type over whatever the photograph happens to be doing there, and "whatever the photograph happens to be doing" is not a contrast ratio. `npm run hero:contrast` measures the nav label and the wordmark against the rendered pixels at five widths. */ .nav__scrim { position: absolute; inset: 0 0 auto; height: 150px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: linear-gradient( 180deg, rgba(24, 17, 13, 0.62) 0%, rgba(24, 17, 13, 0.28) 55%, rgba(24, 17, 13, 0) 100% ); } body:has(.hero) .nav:not([data-scrolled='true']) .nav__scrim { opacity: 1; } .nav__inner { position: relative; } /* ── THE MARK IS BIGGER THAN THE DESIGN DRAWS IT, DELIBERATELY ────────────── The design states 40px. Pearl's ruling of 12 August 2026 is 56, and the reason is what the mark IS on this site rather than what it looks like: on every page except the home page it is the ONLY route home, and at 40px it read as decoration rather than as the control it is. On a phone it is also the only route home that is visible at all, because the menu panel covers it once open. 56px costs nothing anywhere. `.nav__inner` has `min-height: 84px` and the brand pays 6px of padding each side, so the row was 52px inside an 84px floor: there were 32px of slack and this takes 16 of them. The header does not grow at any width. The tap target is the , not the image, and it was already over 44 tall through that padding. It is now 44 in BOTH directions with room to spare, which is what WCAG 2.2 SC 2.5.8 asks and what `npm run layout` asserts at four widths. */ .nav__mark { height: 56px; width: auto; object-fit: contain; } /* ── AND THE IVORY MARK WAS DRAWING ON EVERY PAGE WITHOUT A HERO ──────────── Found while enlarging it. `.nav__mark--ivory { display: none }` sits fifty lines above `.nav__mark { … display: block }`, both are one class, and the later one wins — so the ivory wordmark, which exists only for a dark ground, was rendering UNDER the coffee one on every solid-header page since the port. It is `alt=""` and `aria-hidden`, so no screen reader ever announced it and nothing measured it, but it was a second copy of the logo on the page and it doubled the height of the header: 92px of brand inside a 137px header where 52 and 113 were intended. `display: block` is on the two rules that decide WHICH mark shows, and not on the rule that decides how big they are. A base rule must not restate a property its own modifiers exist to switch. */ .nav__mark--coffee { display: block; } .nav__brand { display: block; flex: 0 0 auto; padding: 6px 0; } /* ------------------------------------------------------------ mobile menu */ /* A native
. No JavaScript opens or closes this, which is the point: the menu is the only way to reach three of the four sections on a phone, and a menu that depends on a script is a site that depends on a script. */ .nav__toggle { align-items: center; gap: 10px; min-width: 44px; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); justify-content: flex-end; } .nav__toggle::-webkit-details-marker { display: none; } .nav__burger { display: flex; flex-direction: column; gap: 5px; width: 22px; } .nav__burger span { display: block; height: 1px; background: currentColor; } /* ── THE WAY OUT ─────────────────────────────────────────────────────────── The panel is `position: fixed; inset: 0; z-index: 70`, so by default it covers its own trigger and the menu has no close control at all. That is what shipped: a full-screen menu whose only exit was to navigate somewhere. The summary is raised above it and relabelled instead of a separate button, because a