/* ===== SELF-HOSTED FONTS — generated by scripts/build-fonts.mjs — DO NOT EDIT BY HAND ===== */
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-italic-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-italic-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-italic-latin.woff2?v=1') 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;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-italic-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-italic-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-italic-latin.woff2?v=1') 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;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-normal-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/fraunces-normal-latin.woff2?v=1') 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;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-normal-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/fraunces-normal-latin.woff2?v=1') 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;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-normal-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-normal-latin.woff2?v=1') 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;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-normal-vietnamese.woff2?v=1') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-normal-latin.woff2?v=1') 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;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/syne-normal-greek.woff2?v=1') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/syne-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/syne-normal-latin.woff2?v=1') 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;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/syne-normal-greek.woff2?v=1') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/syne-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/syne-normal-latin.woff2?v=1') 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;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/syne-normal-greek.woff2?v=1') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/syne-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/syne-normal-latin.woff2?v=1') 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;
}
/* greek */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/syne-normal-greek.woff2?v=1') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/syne-normal-latin-ext.woff2?v=1') 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;
}
/* latin */
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/syne-normal-latin.woff2?v=1') 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;
}
/* ===== END SELF-HOSTED FONTS ===== */
:root {
/* The palette is warm paper + warm ink and there is no dark variant — say so,
so a phone or OS in dark mode doesn't auto-invert form controls, scrollbars
and the like against a page that stays light. Pairs with the
`` on all 35 pages, which tints
the mobile browser chrome to the paper instead of framing it in white. */
color-scheme: light;
--paper: #F7F5F0;
--paper-alt: #EEECE6;
--paper-card: #FAF9F6;
--ink: #1C1C1A;
/* THREE TIERS OF INK, AND ALL THREE PASS WCAG AA (Aug 2026).
--ink-tertiary used to be #9B9A96, which is 2.38–2.68:1 as text on the three
paper tones — below the 4.5:1 minimum in every one of its 3,260 uses (blog
figure legends .fig-key / .fig-axis, .spec-list dt, and ~84 small caps
labels). It was a real legibility defect, not a lint opinion: at the sizes
it is used, small tracked caps, it is the hardest text on the site to read.
THE ARITHMETIC IS WHY BOTH TOKENS MOVED, not just one. Against the darkest
paper (--paper-alt #EEECE6) 4.5:1 admits nothing lighter than about
#6B6B6B — which is where --ink-secondary already sat. So a passing tertiary
necessarily lands on the old secondary, and the only way to keep three
distinct tiers rather than two is to step secondary down with it. The new
ladder is roughly even in perceptual lightness (L* 10 · 31 · 45, against the
old 10 · 45 · 63) and keeps the warm neutral hue of the originals (R>G>B by
the same +1/-4).
Measured on --paper-alt, the binding background: secondary 7.70:1,
tertiary 4.62:1. On --paper: 8.09:1 and 4.86:1. Dark surfaces are unaffected
— they have their own --dark-text-secondary. */
--ink-secondary: #4A4945;
--ink-tertiary: #6B6A66;
--border: #E2E0DA;
--border-strong: #C5C3BC;
--dark-bg: #1A1A18;
--dark-surface: #222220;
--dark-text: #E8E6E1;
--dark-text-secondary: #A3A19C;
--dark-border: #333330;
/* THE HOUSE MAROON. The red of the sheet of paper the company is named after
(about.html: "It begins with a sheet of red paper"), and the backdrop of the
founder portrait on the home page. Same token, same value, as the Instagram
system's --eagle-red — do not re-sample it from a photograph, that mistake
was already made once and produced #6F141E off a lit hotspot.
IT IS NOT AN ACCENT COLOUR AND THIS SITE STILL HAS TWO. It is reachable from
exactly one place, `.social-mark-tile` on socials.html, where the platform
marks are drawn in it on the owner's instruction. Everything else on every
page is warm paper and warm ink. 11.9:1 on --paper-card. */
--eagle-red: #67111B;
/* Widths: --section-max-width drives .container, --wide-width drives
.measure-wide, and .measure is a plain 65ch. Don't add a fourth width
token — the two that used to sit here (--max-width, --content-width) were
never referenced and just gave the container two competing names. */
/* Widths are in rem, not px, so the big-screen root scaling below moves them
with the type. In px these froze the layout at a fixed pixel size while the
text around them grew, which is the one way that scaling goes wrong.
80rem = 1280px · 60rem = 960px at the default 16px root — unchanged for
every normal screen. */
--wide-width: 60rem;
--gap: 2rem;
--gap-lg: 4rem;
--gap-xl: 8rem;
/* THE CARD PADDING TOKEN. A card padded with a flat --gap-lg spends 128px of a
320px phone on its own inset — the reading column inside a .blog-featured-card
came out at 144px, which forced the card wider than the grid track and gave
the blog index a sideways scroll. This is the same 4rem on a laptop and 1.5rem
on the smallest phone. Use it for any card that was padded --gap-lg;
.card keeps the smaller flat --gap and needs no token. */
--card-padding-lg: clamp(1.5rem, 5.5vw, 4rem);
/* Measured, not guessed: the fixed bar renders 93px on a phone, 94px through
the 768–1023px tablet band and 103px from 1024px up. This token used to say
4.5rem (72px) — 31px short of the truth — which is why .page-hero-booking's
`nav-height + 2.5rem` left the contact page's h1 sitting under the bar.
Anything that has to clear the nav derives from this; keep it honest. */
--nav-height: 6.5rem; /* 104px — clears the tallest state of the fixed nav */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 600ms ease;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Section rhythm — ONE consistent vertical padding for every section.
Height is driven by content, never forced to a viewport height. This is
what makes every section the "same paper size" down the page. Do NOT add
per-section min-heights or viewport-height (vh) sizing to content sections. */
--section-padding-y: clamp(3.5rem, 7vw, 6rem); /* every section, top & bottom */
--section-padding-y-compact: clamp(2.25rem, 4vw, 3.5rem); /* .section-compact only */
/* The horizontal gutter is a clamp for the same reason the vertical one is, but
it guards a different failure. A flat 1.5rem triples for a reader whose
browser font is 32px, so on a 320px phone 96px — nearly a third of the
screen — went to empty margin and the content had nowhere left to go.
The vw term is tuned so the DEFAULT is unchanged everywhere: at 16px root
7.5vw is exactly 24px at 320px and is capped at 1.5rem above that, which is
what a flat 1.5rem already produced at every width. It only ever bites when
the reader's own font size would otherwise inflate the gutter past what a
narrow screen can spare. The max stays in rem so a 4K TV still scales it. */
--section-padding-x: clamp(0.75rem, 7.5vw, 1.5rem);
--section-max-width: 80rem; /* 1280px at the default root — see --wide-width */
/* No --hero-min-height token: heroes are one full screen via the .hero,
.page-hero rule (Rule 2), not via a clamp. */
/* Vertical rhythm scale. --space-xl is in use; the rest of the rungs are kept
deliberately so the scale is complete.
THE MARKUP-FACING SPACING LADDER (the only values a structural inline margin
may use — Rule 4's exception is "a margin using a TOKEN", never a raw rem):
--space-xs (0.5rem) · --space-sm (1rem) · --element-gap (1.5rem)
· --gap (2rem) · --gap-lg (4rem)
The 67 raw-rem inline margins were moved onto these in Aug 2026. If a value
you want isn't on the ladder, snap to the nearest rung — don't invent one. */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem; /* --gap */
--space-lg: 4rem; /* --gap-lg */
--space-xl: 6rem;
--space-2xl: 8rem; /* --gap-xl */
--space-3xl: 12rem;
/* Professional Typography Scale - Fixed sizes.
--text-xs is 12px, NOT the 11.2px it used to be. 11.2px is under the legible
floor on a phone, and it is the size of every uppercase label on the site
(.meta, .label, .service-number, .social-handle, .tag, .read-more) — ~200
rendered instances measured at 11.2px on a 320–768px screen. Do not take it
back below 0.75rem; if a label looks too big, cut the words, not the size. */
--text-xs: 0.75rem; /* 12px - labels, meta (accessibility floor) */
--text-sm: 0.8rem; /* 12.8px - small body, captions */
--text-base: 1.0625rem; /* 17px - body text (enlarged for full-screen sections) */
--text-lg: 1.1875rem; /* 19px - large body */
--text-xl: 1.375rem; /* 22px - lead paragraphs */
--text-2xl: 1.5rem; /* 24px - small headings */
--text-3xl: 1.875rem; /* 30px - h3 */
--text-4xl: 2.25rem; /* 36px - h2 */
--text-5xl: 3.5rem; /* 56px - the h2 / blog-h1 ceiling (the clamps' maximum) */
/* The top two rungs are kept so the scale is complete, but NOTHING should set a
heading to them directly. Display headings are clamps whose maxima happen to
equal these values — h1 tops out at 6rem, h2 at --text-5xl. `.hero-title` used
to set --text-7xl flat in the ≥900px block and that switched the h1 clamp off;
see the note in that block. Raise a clamp's maximum, never assign these. */
--text-6xl: 5rem; /* 80px - unassigned rung */
--text-7xl: 6rem; /* 96px - the h1 clamp's maximum; do not assign directly */
/* Line heights - fixed for professional rhythm */
--leading-tight: 1.05;
--leading-snug: 1.15;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--leading-loose: 1.8;
/* Letter spacing scale */
--tracking-tight: -0.03em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.06em;
--tracking-widest: 0.12em;
/* Section rhythm (--gap / --gap-lg own the between-block spacing) */
--element-gap: 1.5rem;
--element-gap-lg: 2.5rem;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* 100%, NOT a hard 16px. The whole type scale is in rem, so a pixel value here
pins it to 16px and silently discards the reader's own browser font-size —
the setting people with low vision actually use (WCAG 1.4.4, Resize Text).
100% resolves to 16px for everyone on the default, so nothing changes for
the vast majority; it just stops overriding the ones who changed it. */
font-size: 100%;
/* Stop iOS Safari and Android Chrome inflating the type on their own. Both
run "text autosizing": they pick the blocks they think are the main content
and multiply the font size, most visibly when a phone is turned landscape.
The whole scale here is hand-tuned clamp() values, so a browser scaling
some of them and not others pulls the page out of proportion — and no
desktop-Chrome render can see it happen, because desktop never does it.
100%, NOT none: `none` also blocks the reader's own pinch/zoom, which
trades a layout bug for a WCAG 1.4.4 failure. 100% disables only the
automatic inflation. Inert on every desktop browser. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Keep the layout stable when a page is short enough not to scroll — without
this the gutter appears and disappears between pages on a desktop browser
and every centred block shifts ~8px sideways as you navigate. */
scrollbar-gutter: stable;
}
/* ------------------------------------------------------------------ *
VERY LARGE SCREENS — 1800px and up (big monitors, TVs, conference displays).
Above ~1800px every clamp has hit its maximum and the container has hit its
80rem cap, so the page stops growing while the screen keeps going: on a 4K TV
the whole site is a small panel of 17px text in the middle of the wall, read
from three metres away instead of half a metre.
Scaling the ROOT rather than adding another set of font sizes is what makes
this proportional — the type scale, the spacing ladder, the container, the
reading column and the clamps' own maxima are all in rem, so every one of them
grows by the same factor and the design is identical, just larger. Nothing here
touches a screen below 1800px.
The percentages multiply the reader's own default (see `html` below), so
someone browsing at 20px still gets their 20px, scaled.
* ------------------------------------------------------------------ */
@media (min-width: 1800px) { html { font-size: 112.5%; } } /* ~18px */
@media (min-width: 2400px) { html { font-size: 131.25%; } } /* ~21px */
@media (min-width: 3200px) { html { font-size: 150%; } } /* ~24px */
/* ------------------------------------------------------------------
THE LAYOUT BREAKPOINTS ARE IN em, AND THESE THREE ARE THE EXCEPTION.
Every breakpoint below is written in em — 48em, not 768px. In a media query
`em` resolves against the READER'S default font size, not against `html`, so:
default 16px → 48em = 768px (identical to the old px value: nothing
changes for anyone on the default)
default 24px → 48em = 1152px (the desktop nav waits until its bigger
text actually fits)
A px breakpoint asks "how wide is the screen". An em breakpoint asks "how much
text fits", which is the question every one of these rules is really asking.
Measured at a 24px default: px breakpoints put the full desktop nav into a
768px tablet and pushed "Contact" 18px off the right edge on all 35 pages.
The three rules ABOVE stay in px on purpose — they are about the physical
screen and how far away it is, not about the reader's text size. A 4K TV is
watched from a sofa whether or not its owner has raised their font size.
`max-height: 560px` (the landscape-phone panel) stays px for the same reason.
THE TRAP: `main.js` matches `(min-width: 48em)` to close the mobile panel. If
you change 48em here, change it there too, or the panel will close while the
hamburger is still the only nav on screen.
* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
font-family: 'Syne', sans-serif;
font-weight: 400;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink);
background: var(--paper);
letter-spacing: var(--tracking-normal);
overflow-x: hidden;
}
/* Every content section — same top/bottom rhythm. */
main > section,
main > .marquee,
main > article > section {
position: relative;
padding: var(--section-padding-y) 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
/* ------------------------------------------------------------------ *
FULL-SCREEN SECTION SYSTEM (brand direction)
One big headline per screen. Every narrative section fills at least one
viewport and vertically centres its content, so each headline gets its own
clean screen instead of the next section peeking in at the bottom. Height
still GROWS with content (min-height, never a fixed height), so a long
section like the FAQ simply runs taller than one screen — it is never clipped.
• Heroes are one screen tall via the .hero,.page-hero rule below.
• .cta-section stays auto-height so the closing CTA + footer share the
final screen (the CTA is never half cut off).
• .section-flush opts a section out — used for listing grids and utility
rows (filters, pagination) where a forced empty screen would look broken.
* ------------------------------------------------------------------ */
main > section:not(.hero):not(.page-hero):not(.cta-section):not(.section-flush) {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
}
main > section.section-flush { min-height: 0; }
/* Listing pages (blog, knowledge) keep a full-screen hero, but their content
sections flow normally — a grid of post cards or a filter/pagination row must
not each be stretched to a full empty screen. */
body.listing-page main > section:not(.hero):not(.page-hero):not(.cta-section) {
min-height: 0;
display: block;
}
/* Legacy height classes stay neutralised (no-ops on old markup). */
.section-hero,
.section-narrative,
.section-grid,
.section-content {
min-height: 0;
}
/* .section-compact — the ONE approved way to make a section tighter. */
.section-compact {
padding-top: var(--section-padding-y-compact);
padding-bottom: var(--section-padding-y-compact);
}
/* Hero — the first full screen of every page. One headline, vertically
centred, clearing the fixed nav with top padding. Grows taller if content
needs it, but never shorter than one viewport. */
.hero,
.page-hero {
display: flex;
align-items: center;
position: relative;
min-height: 100vh;
min-height: 100svh;
padding-top: calc(var(--section-padding-y) + var(--nav-height));
padding-bottom: var(--section-padding-y);
}
/* (The marquee band is styled in ONE place — search "Marquee — Compact section"
further down. A second .marquee rule used to sit here setting a 1.25rem
padding that the later rule silently overrode.) */
/* Blog post articles - normal flow. Deliberately a DIRECT-child selector: every
post is , and a descendant selector used to leak this 860px
reading column + 8rem padding onto any nested (e.g. the social cards
on socials.html). Keep the ">". */
/* THIS RULE OWNS THE BLOG READING COLUMN for all 26 posts — measured Aug 2026:
860px minus the article's own padding = an 812px text column, ~81ch, ~97 characters
a line. A post must never carry `.measure` or its own max-width; one rule here is
why the posts are consistent. `main > article p { max-width: none }` below is what
cancels the global `p { max-width: 65ch }` and is deliberate — do not "restore" it,
it would narrow every post. (`.lead` keeps its own 65ch, so a post's opening
paragraph is intentionally narrower than its body.) See site/CLAUDE.md → Blog Post
Standards, which used to describe a `.measure` system that never existed. */
main > article {
display: block;
width: 100%;
max-width: 53.75rem; /* 860px at the default root; scales with it on a TV */
margin: 0 auto;
padding: 8rem var(--section-padding-x) 4rem;
box-sizing: border-box;
}
/* Blog post headings — fluid, same rule as the marketing pages.
These were flat 56 / 30 / 24px. A 56px h1 needs ~350px of line box for a single
long word, and the reading column on a 320px phone is 272px, so titles like
"Process Documentation: A Practical Guide" printed "Documentatio" and ran the
rest off-screen. The clamp maxima are the original desktop sizes — a laptop and
above renders exactly as before. */
main > article h1 {
font-size: clamp(2.125rem, 8.5vw, var(--text-5xl));
font-weight: 300;
line-height: 1.1;
margin-bottom: var(--element-gap);
max-width: none;
}
main > article h2 {
font-size: clamp(1.5rem, 5.2vw, var(--text-3xl));
font-weight: 400;
line-height: var(--leading-snug);
margin-top: var(--element-gap-lg);
margin-bottom: var(--element-gap);
max-width: none;
}
main > article h3 {
font-size: clamp(1.25rem, 4.2vw, var(--text-2xl));
font-weight: 400;
line-height: var(--leading-snug);
margin-top: var(--element-gap-lg);
margin-bottom: var(--element-gap);
max-width: none;
}
main > article p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
margin-bottom: var(--element-gap);
max-width: none;
}
main > article .lead {
font-size: var(--text-lg);
line-height: var(--leading-loose);
}
main > article .meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-family: 'Syne', sans-serif;
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--ink-tertiary);
margin-bottom: var(--element-gap-lg);
}
main > article .label {
font-size: var(--text-xs);
margin-bottom: var(--element-gap);
}
main > article ol,
main > article ul {
margin-bottom: var(--element-gap);
padding-left: 1.5rem;
}
main > article li {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
margin-bottom: 0.5rem;
}
main > article table {
width: 100%;
border-collapse: collapse;
margin: var(--element-gap-lg) 0;
font-family: 'Syne', sans-serif;
font-size: var(--text-sm);
}
main > article th,
main > article td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
main > article th {
font-weight: 600;
border-bottom: 2px solid var(--ink);
}
main > article blockquote {
border-left: 3px solid var(--ink);
padding-left: var(--gap);
margin: var(--element-gap-lg) 0;
font-style: italic;
color: var(--ink-secondary);
}
/* Blog post code blocks */
main > article pre {
background: var(--dark-bg);
color: var(--dark-text);
padding: var(--gap);
overflow-x: auto;
margin: var(--element-gap-lg) 0;
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
main > article code {
font-family: 'Syne', sans-serif;
font-size: var(--text-sm);
background: var(--paper-alt);
padding: 0.15rem 0.4rem;
border-radius: 2px;
}
main > article pre code {
background: none;
padding: 0;
}
/* Blog post table of contents */
main > article .toc {
background: var(--paper-alt);
border: 1px solid var(--border);
padding: var(--gap);
margin: var(--element-gap-lg) 0;
}
main > article .toc .label {
margin-bottom: var(--element-gap);
}
/* Blog post body links — visible as links without per-link inline styles.
Scoped to prose + TOC so it never touches .btn or .meta. */
main > article p a,
main > article li a,
main > article .toc a {
text-decoration: underline;
text-decoration-color: var(--border-strong);
text-underline-offset: 3px;
transition: text-decoration-color var(--transition-fast), opacity var(--transition-fast);
}
main > article p a:hover,
main > article li a:hover,
main > article .toc a:hover {
text-decoration-color: var(--ink);
}
/* Ensure content fits within section - for regular pages only */
main > section > .container,
main > .hero > .container,
main > .page-hero > .container,
main > .marquee > .container {
width: 100%;
max-width: var(--section-max-width);
margin: 0 auto;
padding: 0 var(--section-padding-x);
box-sizing: border-box;
}
/* Typography — fluid scale.
EVERY display heading is a clamp, not a fixed size. h1 always was; h2 and h3
were `--text-5xl` (56px) and `--text-3xl` (30px) flat, which is why a heading
like "Content OS or Business OS — which do you need?" ran off the right edge of
a 320–390px phone. The clamp's minimum is the phone size, the vw term does the
scaling, and the maximum is the original desktop size — so nothing about the
desktop rendering changes. Read the three numbers as: never smaller than · grows
with the screen · never larger than. */
h1, h2, h3, h4, h5, h6 {
font-family: 'Fraunces', serif;
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--ink);
/* A long unbreakable token ("keep/update/merge/cut", a URL, a hyphen-free
compound) is the other way a heading overflows. Break it rather than let it
punch through the edge of the screen. */
overflow-wrap: break-word;
}
h1 {
font-size: clamp(2.75rem, 7vw, 6rem); /* fluid: never overflows a phone, never dwarfs a desktop */
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.04em;
}
h2 {
font-size: clamp(2rem, 6.2vw, var(--text-5xl));
font-weight: 350;
line-height: var(--leading-tight);
}
h3 {
font-size: clamp(1.5rem, 3.6vw, var(--text-3xl));
font-weight: 400;
line-height: var(--leading-snug);
}
h4 {
font-size: var(--text-sm);
font-weight: 500;
font-family: 'Syne', sans-serif;
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
line-height: var(--leading-normal);
}
h5 {
font-size: var(--text-base);
font-weight: 500;
font-family: 'Syne', sans-serif;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
line-height: var(--leading-normal);
}
h6 {
font-size: var(--text-sm);
font-weight: 500;
font-family: 'Syne', sans-serif;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
line-height: var(--leading-normal);
}
/* Body text — fixed professional sizes */
p {
margin-bottom: var(--element-gap);
max-width: 65ch;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-normal);
}
/* Prose can carry a token no phone column can fit — a long URL, an em-dash
compound, a slash list. Break it instead of letting it widen the page.
`summary` and `.social-handle` are here because neither is prose and both were
missed: a is the FAQ question itself, and `.social-handle` is a bare
handle ("in/shreyasdave1a19") with no space in it at all — the single hardest
kind of token to fit. Both held at the default and broke the page open at a
32px reader font. If you add a text element that is not a
, ask whether its
longest unbreakable token fits a 320px column before assuming it does. */
p, li, dd, dt, blockquote, figcaption, td, th, .lead, .social-handle {
overflow-wrap: break-word;
}
/* `summary` needs `anywhere`, not `break-word`, and the difference is the whole
reason the FAQ was the last page still overflowing at a 32px reader font.
A summary is `display: flex` (the question on the left, the marker on the
right), so its text lives in an ANONYMOUS flex item — nothing you can put
`min-width: 0` on. A flex item's automatic minimum is min-content, and
`break-word` does not reduce min-content; it only breaks once a line would
already overflow. `anywhere` is the one value that does both, so the box can
finally be narrower than its longest word. Identical rendering at the default:
like break-word, it only ever breaks a word that genuinely does not fit. */
summary {
overflow-wrap: anywhere;
}
/* The panel's links are `display: block`, so break-word is enough here — but they
are set large (a deliberate, thumb-sized target), and at a 32px reader font one
word like "Services" wants 247px inside a 224px panel. */
.mobile-nav a {
overflow-wrap: break-word;
}
.lead {
font-size: var(--text-lg);
line-height: var(--leading-loose);
color: var(--ink-secondary);
max-width: 65ch;
}
.small-text {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--ink-secondary);
}
.tiny-text {
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--ink-tertiary);
}
/* Link styles */
a {
color: inherit;
text-decoration: none;
transition: opacity var(--transition-fast);
}
a:hover {
opacity: 0.6;
}
a:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
border-radius: 2px;
}
/* Focus ring on dark surfaces. The base rings (here and on .btn) are var(--ink),
which is invisible on --ink (.cta-section) and --dark-bg (.dark-section, .footer).
Without this the closing CTA button on all 35 pages and every footer link have no
keyboard focus indicator at all — WCAG 2.4.7 / 2.4.11. Specificity means placement
in the file doesn't matter, but keep it beside the base rule so it stays findable. */
.dark-section a:focus-visible,
.dark-section .btn:focus-visible,
.cta-section a:focus-visible,
.cta-section .btn:focus-visible,
.footer a:focus-visible {
outline: 2px solid var(--dark-text);
outline-offset: 2px;
}
/* Skip link — WCAG 2.4.1 (Bypass Blocks). Every page opens with a fixed nav of 8
focusable elements; without this a keyboard user tabs all of them on every page
load. Off-screen until focused, then pinned top-left above the nav (z-index 100). */
.skip-link {
position: absolute;
top: 0;
left: -9999px;
z-index: 200;
padding: 0.75rem 1.25rem;
background: var(--ink);
color: var(--paper);
font-family: 'Syne', sans-serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
outline: 2px solid var(--paper);
outline-offset: 2px;
}
/* The skip target carries tabindex="-1" so focus really moves into ;
suppress the ring it would otherwise draw on a non-interactive element. */
main:focus {
outline: none;
}
img, svg {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: var(--section-max-width);
padding: 0 var(--section-padding-x);
margin: 0 auto;
box-sizing: border-box;
}
/* .section is a plain marker class. It deliberately sets NO padding so the
shared `main > section` rhythm applies. (It used to force padding:0, which is
why sections had to fake their spacing with viewport heights.) */
.label {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--ink-secondary);
margin-bottom: var(--element-gap);
display: block;
}
/* Eyebrow labels & hero taglines are removed site-wide (brand direction):
one headline per section, with nothing small stacked above the big
headline. Blog-post internal labels (inside main > article, e.g. the table
of contents) are intentionally NOT affected by this rule. */
main > section .label,
.hero .hero-tagline,
.page-hero .hero-tagline { display: none; }
/* ==========================================================================
Layout utilities — reach for THESE before writing style="..." on an element.
Every value comes from a design token, so anything built with them stays on
the system automatically. This is the vocabulary that keeps pages consistent.
========================================================================== */
/* Readable line length. .measure matches the paragraph max-width (65ch). */
.measure { max-width: 65ch; }
.measure-wide { max-width: var(--wide-width); }
/* Text colour + alignment without re-declaring values inline. */
.text-muted { color: var(--ink-secondary); }
.text-faint { color: var(--ink-tertiary); }
.text-center { text-align: center; }
/* Even vertical spacing between stacked children. */
.stack > * + * { margin-top: var(--element-gap); }
/* ------------------------------------------------------------------ *
THE SPACING UTILITIES — the classes that replaced 91 inline styles.
Rule 4 used to allow one exception: a structural margin written inline
using a token, e.g. style="margin-bottom:var(--gap);". That exception was
retired in Aug 2026 because it was the last thing forcing 'unsafe-inline'
into the Content-Security-Policy's style-src (SECURITY.md, S-07). These
seven classes cover every value those 91 attributes used, and the markup
now writes `class="mb-lg"` where it used to write the declaration.
⚠ THEY CARRY !important, AND THE REASON IS EXACT, NOT DEFENSIVE.
An inline style has specificity (1,0,0,0): it beat every normal author
rule on the page, including contextual ones. Eight of the headings being
converted sit inside a `.card`, where `.card h3` (0,2,0) sets a DIFFERENT
value (--space-xs) — so a plain single-class utility (0,1,0) would lose to
it and would silently halve the gap under those eight headings. An author
`!important` declaration outranks an inline style, which makes this layer
the one thing that reproduces the old rendering BY CONSTRUCTION rather
than by checking each of the 91 sites and hoping none moves later.
That equivalence was measured, not assumed: 114 full-page screenshots at
390/768/1440 before and after the conversion, byte-identical everywhere
except the one band noted on `.mobile-nav .btn` below.
The values are the five rungs of the markup-facing spacing ladder and
nothing else. If a value you want is not a rung, snap to the nearest —
do not add an eighth class. */
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--element-gap) !important; }
.mb-lg { margin-bottom: var(--gap) !important; }
.mb-xl { margin-bottom: var(--gap-lg) !important; }
.mt-xl { margin-top: var(--gap-lg) !important; }
.pt-0 { padding-top: 0 !important; }
/* Responsive column grids: one column on mobile, N columns from 48em (768px) up. */
.grid-2,
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 48em) {
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* ------------------------------------------------------------------ *
GRID AND FLEX ITEMS MAY SHRINK — the one rule that stops sideways scroll.
`1fr` is shorthand for `minmax(auto, 1fr)`, and `auto` as a track MINIMUM means
"never narrower than this item's min-content". So a card with wide padding, a
long word, or a fixed-width child silently pushes its track — and therefore the
whole page — wider than the screen, with no single element looking wrong. Flex
items have the identical default (`min-width: auto`).
Setting the automatic minimum to 0 on the items lets the track do what the
layout already says it should: fit the column it was given, and wrap or scroll
its own content. Applied to the direct children of every grid/flex container on
the site rather than one card at a time, because the failure is structural and
the next new component would inherit it too.
The one deliberate exception is `.table-scroll`, which owns its own horizontal
scroll and whose table is MEANT to be wider than the column.
* ------------------------------------------------------------------ */
.grid-2 > *,
.grid-3 > *,
.services-grid > *,
.services-os > *,
.beliefs-grid > *,
.content-grid > *,
.blog-grid > *,
.blog-featured > *,
.socials-grid > *,
.stats-grid > *,
.footer-grid > *,
.approach-item > *,
.nav-inner > *,
.hero-actions > *,
.hero-grid > *,
.social-card > *,
summary > * {
min-width: 0;
}
/* Bordered surface card — the standard container for a grouped block. */
.card {
padding: var(--gap);
border: 1px solid var(--border);
background: var(--paper-card);
}
/* h3 is the card title (h4 kept for the footer columns, which are genuine h4s). */
.card h3, .card h4 { margin-bottom: var(--space-xs); }
.card p { color: var(--ink-secondary); }
.card p:last-child { margin-bottom: 0; }
/* Cards inside a dark section flip to the dark palette automatically, so the
two site colours stay in sync instead of clashing. */
.dark-section .card {
background: var(--dark-surface);
border-color: var(--dark-border);
color: var(--dark-text);
}
.dark-section .card p { color: var(--dark-text-secondary); }
/* Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1.5rem 0;
/* OPAQUE, and it has to stay opaque. This was rgba(…, 0.85) with a 12px
backdrop-filter — a frosted bar. The owner, reading the site on his phone:
"the words scroll in my phone on the website, that is overlapping — which is
on the home page or the first page of any section."
He was describing exactly this. Fifteen per cent of everything that scrolls
under a fixed bar shows through it, and what scrolls under it first on every
page is the hero h1 at up to 96px. Reproduced at 390px, scrollY 985 on the
home page: "Two Operating Systems." reads clean through the bar and collides
with the wordmark. A phone makes it worse three ways — the type is huge
relative to the screen, some Android browsers skip backdrop-filter entirely
and render the raw 85%, and iOS "Reduce Transparency" does the same on
purpose.
It costs nothing to fix, because --paper is also the body background: at the
top of every page the bar is already indistinguishable from the page behind
it, so at rest nothing about the design changes. The frosting was only ever
visible in the state where it was doing damage. .mobile-nav has been solid
--paper all along, so the two now agree.
THE AUDIT CANNOT CATCH THIS. `npm run gate` renders every page at the top —
2,240 clean renders had nothing to say about it, and never will. Check it by
eye after touching the nav: scratchpad/scroll-shot.mjs. */
background: var(--paper);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-base), background var(--transition-base), padding var(--transition-base);
}
/* The scrolled state is now carried by the hairline and the tighter padding
alone — the background was already opaque before the page moved. Do not
reintroduce an alpha here either; 5% is still enough to ghost a 96px serif. */
.nav.scrolled {
border-bottom-color: var(--border);
padding: 1rem 0;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
/* space-between alone puts nothing between the logo and the first nav link
once the row is full — at the 48em swap "papereagle AI" and "ABOUT" ran together
with no space at all. A minimum gap makes the row degrade by tightening
rather than by colliding. */
gap: clamp(1rem, 2.5vw, 2.5rem);
}
.nav-logo {
display: inline-flex;
align-items: center;
gap: min(0.5em, 2.2vw);
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.01em;
color: var(--ink);
transition: opacity var(--transition-fast);
}
/* THE ORIGAMI MARK — the one coloured thing on this website.
A red paper eagle in flight, cut out of the owner's photograph by
scripts/build-brand-mark.mjs. It appears in exactly two places: here, and in
the browser tab. It is a WORDMARK, not an accent colour: it never becomes a
border, a rule, a heading, a button or a hover state, and no other element on
the site is allowed to go red because this one is. Same standing the red has
on an Instagram `brandmark` frame.
Sized by HEIGHT in `em`, so the mark and the wordmark scale as one object —
at the root step-ups (1800/2400/3200px) the bird grows with the type instead
of staying a 27px stamp beside it.
The `min(…, 7vw)` is the guard the rest of this file keeps learning the hard
way. `em` here resolves against 1.1rem, and rem follows the READER's default
font size: at a 32px default the bird would be 55px wide inside a 320px
phone, and the nav row — bird + wordmark + hamburger — would not fit. The vw
term caps it at 22px on that phone and never binds on anything wider, so a
laptop, a tablet and a TV all get the full-size mark. Height, not width: the
source is 1.20:1, and a width cap would let a tall reader font stretch the
row height instead. */
.nav-mark {
height: min(1.8em, 7vw);
width: auto;
flex: none;
}
/* The wordmark holds one line wherever the desktop nav is what's showing — a
wrapped logo doubles the nav height and pushes the hero's h1 under the fixed
bar, and `flex-shrink: 0` stops the row squeezing it before the hamburger.
BELOW that breakpoint it is allowed to wrap, as a last resort and only when it
genuinely does not fit. At the default font size it always fits, so nothing
changes for anyone on it. For a reader browsing at 32px it is the difference
between a nav row 399px wide inside a 320px phone — every page scrolling
sideways — and a wordmark on two lines, which is what reflow is supposed to
look like. Shrinking the text back down instead would be overriding the
setting they deliberately chose. */
@media (min-width: 48em) {
.nav-logo {
white-space: nowrap;
flex-shrink: 0;
}
}
.nav-logo:hover {
opacity: 0.6;
}
/* `.nav-wordmark span`, NOT `.nav-logo span`. The wordmark is "paper" set in
Syne butted straight against an italic Fraunces "eagle AI" with no space
between them — that join is the logo. Once `.nav-logo` became a flex row to
carry the origami mark, "paper" and the italic span turned into two separate
flex items and the row `gap` opened a hole in the middle of the word:
"paper eagle AI". `.nav-wordmark` wraps both so the join is one flex item and
the gap only ever sits between the bird and the type. Scoping the italic to
the inner span is what stops the wrapper inheriting it. */
.nav-wordmark span {
font-family: 'Fraunces', serif;
font-weight: 300;
font-style: italic;
}
.nav-links {
display: none;
align-items: center;
/* Fluid gap: six items + the logo + the CTA button must fit the moment the
desktop nav appears at 48em, without wrapping. Not a flat 2rem. */
gap: clamp(1.1rem, 2.2vw, 2rem);
list-style: none;
}
.nav-links a {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink-secondary);
transition: color var(--transition-fast);
}
.nav-links a:hover,
.nav-links a.active {
color: var(--ink);
opacity: 1;
}
/* Below 48em — 768px on the default font size, wider for a reader who has raised
it — the header CTA is hidden: the hamburger owns the mobile route and the same
button is the last item in the mobile panel.
THE SELECTOR IS `.nav .nav-cta` ON PURPOSE, and so is its ≥48em counterpart.
A bare `.nav-cta { display: none }` has the same specificity as `.btn
{ display: inline-block }` further down the file, and the later rule won: the
full-size black "Start a Conversation" button rendered in the middle of the
mobile header on all 35 pages, clipped to "START A CONVERSAT…", squeezing the
wordmark onto two lines and growing the bar to 125px — tall enough to sit on
top of the contact page's h1. Never drop the `.nav ` prefix from either rule. */
.nav .nav-cta {
display: none;
}
.nav-toggle {
background: none;
border: none;
cursor: pointer;
/* 44×44 minimum touch target (WCAG 2.5.8) — the three 24px bars alone are
24×17, which is a miss on a phone as often as a hit. */
padding: 0.75rem 0.5rem;
min-width: 44px;
min-height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
flex-shrink: 0;
gap: 5px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 1.5px;
background: var(--ink);
transition: transform var(--transition-base), opacity var(--transition-base);
transform-origin: center;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(4px, -5px);
}
@media (min-width: 48em) {
.nav-links {
display: flex;
}
/* `.nav ` prefix required — see the comment on `.nav .nav-cta` above. */
.nav .nav-cta {
display: inline-block;
}
.nav-toggle {
display: none;
}
}
/* 768–1023px: the logo, six nav items and the CTA button have to share one row.
The button runs compact through this band and returns to full size at 1024px.
If a seventh nav item is ever proposed, re-measure this band first.
`.nav .nav-cta`, not `.nav-cta` — the bare selector ties with `.btn` below and
loses on source order, so this whole band was dead: the button rendered at its
full 1rem/2rem size, wrapped onto two lines, and sat on top of the "Contact"
link on every iPad-portrait render. Same trap as the display rule above. */
@media (min-width: 48em) and (max-width: 63.9375em) {
.nav-links a {
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.nav .nav-cta {
padding: 0.8rem 1.25rem;
font-size: 0.75rem; /* 12px — the legibility floor; 0.72rem rendered 11.5px */
}
}
/* Buttons */
.btn {
display: inline-block;
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
/* Horizontal padding is a clamp for the same reason the page gutter is: a flat
2rem doubles to 64px a side for a reader at 32px, and 128px of padding does
not fit a 320px phone before the label has had a single pixel. 10vw is exactly
2rem at 320px and is capped above it, so the DEFAULT is unchanged at every
width, and the rem max keeps it scaling on a 4K TV. */
padding: 1rem clamp(1rem, 10vw, 2rem);
border: none;
cursor: pointer;
transition: all var(--transition-base);
text-align: center;
position: relative;
overflow: hidden;
/* An inline-block is floored at its own min-content width, so without these the
button sizes to "CONVERSATION" + padding no matter how narrow the screen is —
351px inside a 320px phone, on every page, and `overflow: hidden` above meant
the label was clipped rather than visibly wrong. max-width caps the box;
break-word lets the label wrap instead of being cut off. */
max-width: 100%;
overflow-wrap: break-word;
}
.btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left var(--transition-slow);
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--ink);
color: var(--paper);
}
.btn-primary:hover {
background: var(--ink-secondary);
opacity: 1;
}
.btn-outline {
background: transparent;
color: var(--ink);
border: 1px solid var(--border-strong);
}
.btn-outline:hover {
border-color: var(--ink);
opacity: 1;
}
.btn-outline-light {
background: transparent;
color: var(--dark-text);
border: 1px solid var(--dark-border);
}
.btn-outline-light:hover {
border-color: var(--dark-text);
opacity: 1;
}
/* Hero — layout only. Height/padding live in the consolidated .hero,.page-hero
rule near the top of this file. (The old duplicate here referenced
--hero-height / --hero-height-min, which were never defined.) */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-lg);
align-items: center;
width: 100%;
max-width: var(--section-max-width);
margin: 0 auto;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-tagline {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--ink-secondary);
margin-bottom: var(--element-gap);
display: block;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s var(--ease-out) forwards;
}
.hero-title {
margin-bottom: var(--element-gap);
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s var(--ease-out) 0.1s forwards;
}
.hero-desc {
font-size: var(--text-lg);
line-height: var(--leading-loose);
color: var(--ink-secondary);
margin-bottom: var(--element-gap-lg);
max-width: 55ch;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s var(--ease-out) 0.2s forwards;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.8s var(--ease-out) 0.3s forwards;
}
/* THE PORTRAIT SHOWS ON A PHONE. It used to be `display: none` below 900px, so
the owner's photo existed only on a laptop — his words: "in the laptop screen
I can see my image on the right hand side, but not in phone when I scroll it…
at least when I scroll, that should be managed."
A phone cannot have a right-hand side, so the grid's single column stacks it
under the copy and you meet it on the way down.
IT IS CENTRED IN THAT COLUMN, AND THAT REVERSES THE ORIGINAL CALL (Aug 2026,
the owner: "on the home page I can see the logo, but my logo is only on the
right hand side — it has to be in the center… and you have to increase the
size of the image. It looks totally off."). The first version left-aligned it
to the headline's edge, reasoning that a centred photo under left-aligned copy
reads as a stray element. On a real phone it reads as the opposite: at 15rem in
a ~342px column it was a small picture pushed against one edge with a band of
dead paper beside it, which looks like a layout that failed rather than one
that chose. Big enough to own the column and centred in it is what makes it a
deliberate part of the hero — the same thing the two-column layout does above
56.25em, which is why this declaration is now unconditional.
Note for the socials hero, which is this same element (`.hero-visual
.hero-socials`): `.hero-socials` sets `flex-direction: column`, so
`justify-content` there is the VERTICAL axis and this is a no-op for it. Its
horizontal alignment comes from its own `align-items`, and is unchanged —
still left under the copy on a phone, centred in its own half from 56.25em.
The hero is `min-height: 100svh`, not `height`, so it simply grows: on a 390px
phone the first screen still opens on the headline and the photo arrives on the
first scroll. */
.hero-visual {
display: flex;
position: relative;
justify-content: center;
align-items: center;
/* Image stays fixed in place — it must never parallax/scroll down over the
marquee. !important guarantees it even if a cached older main.js runs. */
transform: none !important;
}
/* Home hero photo: kept shorter than the left-hand text block so it never
spills down into the rotating marquee band below the hero. The image is also
fixed in place (scroll parallax is deliberately not implemented — see the
note in main.js) so it never moves down over the marquee/footer. */
.hero-visual img {
/* Mobile first: 20rem, then 26.25rem from 56.25em up (see that block below).
20rem = 320px on a phone — about 82% of a 390px screen. It was 15rem/240px,
which the owner called "totally off" (Aug 2026): 240px centred in a 342px
column still leaves the photo looking like a thumbnail that got left behind,
and 240px was chosen for a bandwidth reason, not a design one — it is exactly
what founder-portrait-420.jpg covers at 1.75× on a DPR-1 screen.
THAT BANDWIDTH REASON IS PAID FOR IN THE MARKUP, NOT HERE. A 320px box wants
640px of real pixels on a DPR-2 phone, so index.html's phone is now
a 420w/840w srcset with `sizes: 320px` and a retina phone fetches the 840
(137KB) instead of the 420 (37KB). That is the same trade the about-page mark
already makes and for the same reason: the alternative is a photo drawn at
0.66× device pixels — visibly soft — on every phone made in the last decade.
A DPR-1 phone still gets the 420. **If this number changes, change `sizes` in
index.html AND about.html** — scripts/tests/semantics.test.js re-derives
about.html's from this rule and fails on drift.
`max-width: 100%` is what keeps 20rem safe: on a 320px phone, or for a reader
browsing at a 32px default font, the box yields to the column instead of
pushing the page sideways.
26.25rem = the original 420px, but in rem so it grows with the root on a big
monitor or a TV instead of staying a 420px stamp beside 24px type.
`aspect-ratio` replaces the old fixed `height: 420px`: the source is square
(1254×1254), so a hard height meant that once `max-width: 100%` narrowed the
box on a phone, `object-fit: contain` letterboxed the photo inside a
still-420px-tall frame. The ratio keeps the height following the width. */
width: 20rem;
max-width: 100%;
aspect-ratio: 1;
height: auto;
object-fit: contain;
}
.hero-statement {
display: flex;
align-items: center;
justify-content: center;
/* rem, not px: above 1800px the root font-size steps up and everything around
this block grows with it. A frozen 280px floor would shrink relative to its
own contents on a 4K TV. */
min-height: 17.5rem;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 1s var(--ease-out) 0.4s forwards;
will-change: transform, opacity;
}
/* THE "SCROLL" CUE IS GONE FROM THE WHOLE SITE — permanent (Aug 2026).
The owner: "I can still see the scroll button. Just remove the scroll button
from the about section… from the service section also remove the scroll…
and also remove the scroll button from the FAQ page."
It was already off the home page; about, services and faq were the last three.
Nobody needs telling that a page scrolls, and a pulsing hairline in the corner
of a hero is exactly the kind of decoration Rule 11 exists to cut. `.hero-scroll`,
`.hero-scroll-line` and `@keyframes scrollPulse` are deleted rather than left
unused — a rule with no markup is a hook that looks live and is not. `initHeroScroll`
in main.js went with them. **Do not reintroduce it on a new page.** */
@keyframes fadeSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to { opacity: 1; }
}
@media (min-width: 56.25em) {
.hero-grid {
grid-template-columns: 1fr 1fr;
}
/* Two columns, so the photo gets its own half at full size. It is centred at
every width now, so the `justify-content: center` that used to live here is
gone — it sits unconditionally on `.hero-visual` above. Below this breakpoint
the same element is a 20rem box centred under the copy. */
.hero-visual img {
width: 26.25rem;
}
/* NO font-size here. `.hero-title { font-size: var(--text-7xl) }` used to sit in
this block, and because `.hero-title` (0,1,0) outranks `h1` (0,0,1) it switched
the global h1 clamp off from 900px up — pinning the headline to a flat 96px
exactly where this rule halves the column it lives in. Measured: 880px gave
61.6px over 2 lines in an 832px column; 900px gave 96px over FIVE lines in a
394px one. Twenty pixels of window, and the hero fell apart.
The h1 clamp `clamp(2.75rem, 7vw, 6rem)` already ends at the same 6rem/96px,
so from ~1371px up nothing changed at all — it just gets there by growing
instead of by snapping. If a bigger hero is ever wanted, raise the clamp's
maximum on `h1`; do not reintroduce a flat size on `.hero-title`. */
}
/* Marquee — Compact section. The ONLY .marquee ruleset; keep it that way. */
.marquee {
width: 100%;
overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 1.5rem var(--section-padding-x);
margin-bottom: 0;
}
.marquee-inner {
display: flex;
gap: 3rem;
animation: marquee 30s linear infinite;
width: max-content;
}
.marquee-item {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-tertiary);
white-space: nowrap;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Story Section — Fixed typography */
.story {
position: relative;
}
.story-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-lg);
}
.story-quote {
font-family: 'Fraunces', serif;
font-size: var(--text-3xl);
font-weight: 300;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
position: relative;
padding-left: 2rem;
border-left: 2px solid var(--ink);
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.story-quote.visible {
opacity: 1;
transform: translateX(0);
}
.story-quote em {
font-style: italic;
}
.story-text {
color: var(--ink-secondary);
font-size: var(--text-lg);
line-height: var(--leading-loose);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
}
.story-text.visible {
opacity: 1;
transform: translateY(0);
}
.story-link {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: var(--element-gap);
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 0.25rem;
transition: gap var(--transition-fast);
}
.story-link:hover {
gap: 0.75rem;
opacity: 1;
}
@media (min-width: 48em) {
.story-layout {
grid-template-columns: 1fr 1fr;
}
}
/* Services */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.service-card {
padding: var(--gap-lg) 0;
border-bottom: 1px solid var(--border);
position: relative;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
will-change: opacity, transform;
}
.service-card.visible {
opacity: 1;
transform: translateY(0);
}
.service-card:last-child {
border-bottom: none;
}
.service-number {
font-family: 'Fraunces', serif;
font-size: var(--text-xs);
font-weight: 400;
color: var(--ink-tertiary);
margin-bottom: 1rem;
display: block;
}
.service-card h3 {
margin-bottom: 0.75rem;
}
.service-card p {
color: var(--ink-secondary);
margin-bottom: var(--element-gap);
}
.service-link {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ink);
transition: gap var(--transition-fast);
}
.service-link:hover {
gap: 0.75rem;
opacity: 1;
}
/* THE ARROW IS DRAWN, NOT TYPED — and it has to be (Aug 2026).
These six links used to end in a literal "→" (U+2192). Measured in a real
browser against the real font files: it is THE ONLY character on the whole
site that neither Fraunces nor Syne contains — 89 of the site's 90 characters
come from our fonts, and that one fell through to whatever the device happened
to have. Segoe UI Symbol on Windows, Noto on Android, Apple Symbols on a Mac:
a different weight and width in every visitor's browser, in the one spot the
eye follows to the call to action. Google does not publish a subset carrying
it for either family, so there was nothing to self-host.
Drawn from `currentColor` it is identical everywhere, inherits the link colour
and every hover state for free, and scales with `em` so it still tracks the
reader's font size.
⚠ It also REVIVES THE HOVER. `.service-link` is an inline-flex with a `gap`
and a transition on it, but the text and the arrow were one text node — a
single anonymous flex item, with no gap to animate. The declaration had been
doing nothing. As a pseudo-element the arrow is a second flex item, so the
arrow now slides on hover, which is plainly what the transition was written
for. Removing the character without adding this rule would delete the
affordance silently.
The @supports guard is cheap insurance: without clip-path the box would paint
as a solid rectangle, so anything that lacks it gets "›" instead — a character
both fonts DO carry, verified the same way. */
.service-link::after {
content: '\203A';
flex: none;
line-height: 1;
}
@supports (clip-path: polygon(0 0)) {
.service-link::after {
content: '';
width: 0.9em;
height: 0.72em;
background: currentColor;
clip-path: polygon(0 39%, 52% 39%, 52% 8%, 100% 50%, 52% 92%, 52% 61%, 0 61%);
}
}
.service-extensions {
margin-top: var(--gap-lg);
padding-top: var(--gap-lg);
border-top: 1px solid var(--border);
}
.service-extensions h4 {
margin-bottom: var(--element-gap);
}
@media (min-width: 48em) {
.services-grid {
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.service-card {
padding: var(--gap-lg);
border: 1px solid var(--border);
border-radius: 0;
}
.service-card:nth-child(2) {
margin-top: 2rem;
}
}
/* Approach / How It Works — Fixed typography */
.approach-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
counter-reset: step;
}
.approach-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
padding: var(--gap) 0;
border-bottom: 1px solid var(--border);
align-items: start;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
will-change: opacity, transform;
}
.approach-item.visible {
opacity: 1;
transform: translateY(0);
}
.approach-item:last-child {
border-bottom: none;
}
.approach-num {
font-family: 'Fraunces', serif;
font-size: var(--text-5xl);
font-weight: 300;
line-height: 1;
/* --ink-tertiary, NOT --border-strong. These are the step numbers 01–09 of an
ordered list of components, so they are content a reader is meant to read,
and #C5C3BC on --paper is 1.62:1 against the 3:1 that large text owes —
a ghost, not a numeral. --border-strong is a token for drawing edges; the
moment it is used for words it is being asked to do a job it was never
measured for. 4.86:1 here, and still the quietest of the three ink tiers,
which is all the design ever wanted from it. */
color: var(--ink-tertiary);
min-width: 3rem;
transition: color var(--transition-base);
}
.approach-item:hover .approach-num {
color: var(--ink);
}
/* On a phone the numeral column stops being worth its width. A 56px "04" plus the
1.5rem gap takes 81px out of a 272px row, leaving the copy 192px — measured at
22 characters a line, roughly a third of a comfortable measure and narrow
enough to read as a column of broken words. Stacked, the same copy gets the
full width (~44 characters) and the number reads as the step label it is. */
@media (max-width: 37.5em) {
.approach-item {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.approach-num {
font-size: var(--text-4xl);
min-width: 0;
}
}
/* The step title. It follows an
, so it is an
— it was an
until Aug 2026,
which skipped a heading level purely to borrow h4's small-label look. The look lives
here instead; the LEVEL is set by the markup. Never pick a heading tag for its size. */
.approach-content h3 {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--ink);
margin-bottom: 0.5rem;
line-height: var(--leading-normal);
}
.approach-content p {
font-size: var(--text-base);
color: var(--ink-secondary);
line-height: var(--leading-relaxed);
margin-bottom: 0;
}
@media (min-width: 48em) {
.approach-list {
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.approach-item {
border: 1px solid var(--border);
padding: var(--gap);
}
}
/* Deliverable / meta caption under a component (Syne, small, uppercase).
Block-level span so it never collides with .approach-content p / .card p. */
.deliverable {
display: block;
font-family: 'Syne', sans-serif;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--ink-tertiary);
margin-top: 0.75rem;
}
.dark-section .deliverable { color: var(--dark-text-secondary); }
/* Data / comparison table (services, knowledge). Scrolls on narrow screens. */
.table-scroll {
overflow-x: auto;
margin-bottom: var(--gap);
/* Momentum scrolling on iOS, and don't let a sideways flick inside the table
trigger the browser's back-swipe gesture. */
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* SAY THAT IT SCROLLS. A 40rem table in a 272px phone column simply ends at the
screen edge mid-word, and a reader has no way to know a third column exists —
they see a cut-off table and assume it's broken, which is worse than a table
they know to push. The label is a `::before` with `position: sticky; left: 0`,
so it is pinned to the left edge of the scrollport and stays put while the
table moves under it. Sticky rather than a wrapper element because there are
28 of these across the site and none of them needs a markup change.
Above 760px the whole table fits and the label would be a lie, so it is gone. */
@media (max-width: 47.5em) {
.table-scroll::before {
content: "Scroll sideways for the full table";
position: sticky;
left: 0;
display: block;
width: fit-content;
font-family: 'Syne', sans-serif;
font-size: var(--text-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--ink-tertiary);
margin-bottom: 0.6rem;
}
.dark-section .table-scroll::before { color: var(--dark-text-secondary); }
}
.data-table {
width: 100%;
min-width: 40rem;
border-collapse: collapse;
font-family: 'Syne', sans-serif;
font-size: var(--text-sm);
}
.data-table th,
.data-table td {
padding: 0.85rem 1rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border);
}
.data-table thead th { font-weight: 600; border-bottom: 2px solid var(--ink); }
.data-table tbody th { font-weight: 600; color: var(--ink); }
.data-table td { color: var(--ink-secondary); }
/* Content Grid / Knowledge Hub — Fixed typography */
.content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--border);
}
.content-card {
background: var(--paper-card);
padding: var(--gap);
transition: background var(--transition-base), transform var(--transition-fast);
will-change: transform, background;
opacity: 0;
transform: translateY(20px);
animation: fadeSlideUp 0.6s var(--ease-out) forwards;
}
.content-card:hover {
background: var(--paper-alt);
transform: translateY(-4px);
}
.content-card .tag {
font-family: 'Syne', sans-serif;
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--ink-tertiary);
margin-bottom: 0.75rem;
display: block;
}
.content-card h3 {
font-size: var(--text-2xl);
margin-bottom: 0.75rem;
}
.content-card p {
font-size: var(--text-sm);
color: var(--ink-secondary);
margin-bottom: 0;
}
.content-card.featured {
background: var(--ink);
color: var(--dark-text);
}
.content-card.featured h3 {
color: var(--dark-text);
}
.content-card.featured p {
color: var(--dark-text-secondary);
}
.content-card.featured .tag {
color: var(--dark-text-secondary);
}
@media (min-width: 48em) {
.content-grid {
grid-template-columns: 1fr 1fr;
}
.content-card.featured {
grid-column: 1 / -1;
}
}
/* CTA Section — auto height (NOT a full screen) so the closing CTA and the
footer sit together on the final screen; the CTA is never half cut off. */
.cta-section {
background: var(--ink);
color: var(--dark-text);
text-align: center;
padding: var(--space-xl) 0;
}
/* Same reasoning as the .dark-section heading rule above, applied to the other
dark surface on the site. Every CTA band carries only an h2 today, so this is
a no-op right now and stays one — it is here so that the day someone adds an
h3 to a CTA, it is not ink-on-ink at 1.02:1. */
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6 {
color: var(--dark-text);
}
.cta-section h2 {
margin-bottom: var(--element-gap);
}
.cta-section p {
color: var(--dark-text-secondary);
margin: 0 auto var(--element-gap-lg);
max-width: 50ch;
font-size: var(--text-lg);
line-height: var(--leading-loose);
}
/* Inline text links inside a CTA paragraph — the quiet fallback routes (email,
the message form) that shouldn't compete with the one primary button. */
.cta-section p a {
color: var(--dark-text);
border-bottom: 1px solid var(--dark-border);
transition: border-color var(--transition-fast);
}
.cta-section p a:hover {
border-bottom-color: var(--dark-text);
}
.cta-section .btn-primary {
background: var(--dark-text);
color: var(--ink);
}
.cta-section .btn-primary:hover {
background: var(--dark-text-secondary);
}
/* Footer — pairs with the CTA to fill the final screen without overflowing it. */
.footer {
background: var(--dark-bg);
color: var(--dark-text-secondary);
padding: var(--space-xl) 0 var(--gap);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-lg);
}
.footer-brand h3 {
color: var(--dark-text);
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: var(--text-2xl);
margin-bottom: 0.5rem;
}
/* The footer wordmark, and the exact counterpart of `.nav-wordmark span` above:
"paper" set in Syne butted straight against an italic Fraunces "eagle AI".
It was an inline style on all 39 pages until Aug 2026 (SECURITY.md S-07) —
the same declaration, repeated 39 times, which is what a stylesheet is for.
Scoped to the h3 so it can never reach the column headings beside it. */
.footer-brand h3 span {
font-family: 'Fraunces', serif;
font-style: italic;
}
.footer-brand p {
font-size: var(--text-sm);
color: var(--dark-text-secondary);
line-height: var(--leading-relaxed);
}
.footer h4 {
color: var(--dark-text);
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
margin-bottom: 1rem;
}
.footer ul {
list-style: none;
}
.footer li {
margin-bottom: 0.5rem;
}
.footer a {
font-size: var(--text-sm);
color: var(--dark-text-secondary);
transition: color var(--transition-fast);
}
.footer a:hover {
color: var(--dark-text);
opacity: 1;
}
.footer-bottom {
margin-top: var(--gap-lg);
padding-top: var(--gap);
border-top: 1px solid var(--dark-border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: var(--text-xs);
color: var(--dark-text-secondary);
}
/* THE PHONE FOOTER IS THREE COLUMNS, NOT A STACK (Aug 2026, owner's ask).
"At the end of every page there is Products, Content OS, Business OS, All
Extensions, Resources, Company — written line by line, and there is empty
space. For phone, to save some space: three invisible columns."
Stacked, the three link lists are 12 rows tall — and at pointer:coarse each
row is floored at 44px for the touch target, so the footer alone runs ~700px
on a phone while two thirds of every row is empty paper. Side by side they
are 3 rows. The brand block spans the full width above them, so the reading
order (brand → Products → Resources → Company) is unchanged in the DOM and
for a screen reader.
THE BREAKPOINT IS A BAND IN em, AND BOTH ENDS ARE LOAD-BEARING (Rule 6):
· min-width 22em (352px) — MEASURED, not chosen. The binding word is the
"RESOURCES" heading, which sets at 86px with the tracking below (81px
with no tracking at all). Column width is 80px at a 320px viewport, 86px
at 340px and 90px at 352px. So a 320px iPhone SE CANNOT hold three of
these columns by any amount of tuning, and keeps the stack; 352px is the
first width with real headroom. Below the bound the base `1fr` applies.
· max-width 47.999em — at 48em the desktop `2fr 1fr 1fr 1fr` takes over.
Because em resolves against the READER'S default font, not the root, the
band closes on its own for anyone browsing large: at a 24px default 22em is
528px and at 32px it is 704px, so a phone falls back to the stack exactly
when three columns would stop fitting. That is the whole reason this is not
a px query — no ladder of overrides, and nothing to re-tune per device.
⚠ A HEADING BREAKING MID-WORD IS INVISIBLE TO EVERY GATE WE HAVE. The first
version of this rule started at 20em and rendered "PRODUCT/S" and
"RESOURC/ES" on a 320px phone. Nothing overflowed, nothing scrolled
sideways, no tap target shrank — responsive-audit called 320px clean,
because a box that wraps grows DOWNWARD and downward growth breaks no
geometric invariant. Same shape of blindness as the fig-checklist defect.
It was caught by screenshotting the footer and looking at it, and the bound
was then set from measured min-content widths. Measure the words.
⚠ THIS BLOCK MUST STAY BELOW `.footer h4` AND `.footer-grid`. Its selectors
TIE them — `.footer h4` is (0,1,1) in both places — so source order is the
only thing deciding, and a media query is not a tiebreaker. Sitting above
them (where it was first written) the letter-spacing below silently did
nothing, the heading kept --tracking-widest, and "RESOURCES" needed 94px it
did not have. Same trap as `.nav-cta` vs `.btn`. Don't hoist it. */
@media (min-width: 22em) and (max-width: 47.999em) {
.footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--space-sm);
row-gap: var(--gap);
}
/* Full width above the three columns — `1 / -1` spans the explicit grid. */
.footer-brand {
grid-column: 1 / -1;
}
/* Load-bearing, not cosmetic: --tracking-widest (0.12em) sets "RESOURCES" at
94px, which does not fit the 93px column of a 360px Android phone. At
0.05em it is 86px and fits from 352px up. The label still reads as one. */
.footer h4 {
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
}
@media (min-width: 48em) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
}
/* Dark Section Utility */
.dark-section {
background: var(--dark-bg);
color: var(--dark-text);
}
/* EVERY heading level, not just h2 — this was a real defect, reported by the
owner: "when the background is black and at some places the text is also
black, so the text is not visible… 'Running on effort' and 'Running on a
system'." Both of those are `h3`s inside `.dark-section .card`, and they
rendered #1C1C1A on #222220 — a contrast ratio of 1.07:1.
THE RULE THIS BREAKS, WORTH KNOWING BECAUSE IT WILL COME BACK: a DIRECT
declaration always beats an INHERITED one, however specific the inherited one
is. `.dark-section .card { color: var(--dark-text) }` (0,2,0) is inherited by
the card's paragraphs, so they flipped correctly — and it could never reach
the headings, because `h1,h2,h3,h4,h5,h6 { color: var(--ink) }` sets colour on
them directly. Specificity never entered into it. So: any element that sets
its own colour needs its own dark-surface counterpart, and listing one level
here was never enough. Caught by `npm run contrast`, which exists because of
this bug. */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
color: var(--dark-text);
}
.dark-section .label {
color: var(--dark-text-secondary);
}
/* Mobile Nav Overlay — Fixed typography */
.mobile-nav {
/* visibility, NOT display. An element cannot transition out of display:none —
the browser applies both changes in the same frame, so the 300ms slide-in
below never ran and the panel simply popped in. visibility is transitionable,
and it still removes the links from the tab order and from assistive tech
while closed, and takes no pointer events. */
display: flex;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--paper);
z-index: 99;
padding: 6rem 2rem 2rem;
flex-direction: column;
gap: 1.5rem;
transform: translateX(100%);
transition: transform var(--transition-base) var(--ease-out),
visibility var(--transition-base);
will-change: transform;
/* THE PANEL MUST SCROLL. Six 36px links plus the button stack 656px tall — more
than an iPhone SE is high (568px) and nearly twice a phone held sideways
(375px). With the default `overflow: visible` the last items simply fell off
the bottom of the screen with nothing to scroll, so on the smallest phones
"Start a Conversation" could not be reached from the menu at all, and the
open menu also locks body scroll behind it.
`overscroll-behavior: contain` stops a flick at the end of the list from
scrolling the page underneath. */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-nav.active {
visibility: visible;
transform: translateX(0);
}
/* `:not(.btn)` is load-bearing. The last child of the panel is the "Start a
Conversation" button, and a bare `.mobile-nav a` (0,2,0) outranks
`.btn-primary { color: var(--paper) }` (0,1,0) — so the button drew its label
in --ink on an --ink background and the site's primary conversion control was a
blank black slab on every phone, 36px of Fraunces tall with a hairline under
it. Keep the exclusion on every `.mobile-nav a` rule; the button is styled by
.btn and needs nothing from here. */
.mobile-nav a:not(.btn) {
font-family: 'Fraunces', serif;
font-size: var(--text-4xl);
font-weight: 300;
color: var(--ink);
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
transition: color var(--transition-fast);
}
.mobile-nav a:not(.btn):hover {
color: var(--ink-secondary);
opacity: 1;
}
/* The panel's CTA sits a rung below the last link. This was an inline
style="margin-top:1rem" on all 39 pages until Aug 2026 (SECURITY.md S-07).
⚠ REMOVING IT UNCOVERED A DEAD RULE, AND THAT IS THE POINT OF THE EXERCISE.
The landscape-phone block below sets `margin-top: 0.5rem` on this same
button — and it had NEVER ONCE APPLIED, because an inline style (1,0,0,0)
outranks `.mobile-nav .btn` (0,2,0) from inside a media query just as it
does from outside one. A media query is not a specificity boost. So the
tightening that block was written to perform silently did nothing on every
phone held sideways since the day it shipped, in the one band where the
panel is 375px tall and the whole design goal is "fits without scrolling".
This rule is deliberately NOT !important so that block can now win. */
.mobile-nav .btn {
margin-top: var(--space-sm);
}
/* Held sideways, a phone gives the panel ~375px of height. Tighten the type and
the top inset so the whole menu fits without scrolling in the common case,
and let the rule above catch the rest. */
@media (max-height: 560px) {
.mobile-nav {
padding: 5rem 2rem 2rem;
gap: 1rem;
}
.mobile-nav a:not(.btn) {
font-size: clamp(1.5rem, 7vh, var(--text-4xl));
padding-bottom: 0.5rem;
}
}
/* A phone held sideways is short but WIDE — one tall column wastes the whole
right half of the screen and still needs scrolling. Two columns put every
destination and the button on screen at once. Height-and-width gated, so a
narrow phone in portrait never sees it. */
@media (max-height: 560px) and (min-width: 30em) {
.mobile-nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-content: start;
column-gap: 3rem;
row-gap: 0.75rem;
}
.mobile-nav .btn {
grid-column: 1 / -1;
justify-self: start;
margin-top: 0.5rem;
}
}
/* Animations — Fixed timing */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
will-change: opacity, transform;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.slide-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
will-change: opacity, transform;
}
.slide-up.visible {
opacity: 1;
transform: translateY(0);
}
.scale-in {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
will-change: opacity, transform;
}
.scale-in.visible {
opacity: 1;
transform: scale(1);
}
/* About Page — Fixed typography */
.about-hero {
padding-bottom: var(--gap-xl);
}
.about-story {
font-family: 'Fraunces', serif;
font-size: var(--text-xl);
line-height: var(--leading-loose);
font-weight: 300;
max-width: var(--wide-width);
}
.about-story em {
font-style: italic;
}
.about-story .highlight {
font-weight: 400;
font-style: italic;
display: block;
font-size: var(--text-3xl);
margin: var(--element-gap) 0;
color: var(--ink);
}
.services-os {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
.os-card {
padding: var(--card-padding-lg) clamp(1.25rem, 4.5vw, var(--gap));
border: 1px solid var(--border);
position: relative;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color var(--transition-base), box-shadow var(--transition-base);
will-change: opacity, transform, border-color, box-shadow;
}
.os-card.visible {
opacity: 1;
transform: translateY(0);
}
.os-card:hover {
border-color: var(--border-strong);
box-shadow: 0 20px 40px -20px rgba(28, 28, 26, 0.1);
}
.os-card h3 {
margin-bottom: 1rem;
}
.os-card .os-sub {
font-size: var(--text-sm);
color: var(--ink-secondary);
margin-bottom: var(--element-gap-lg);
}
.os-card ul {
list-style: none;
margin-bottom: var(--element-gap-lg);
}
.os-card li {
padding: 0.6rem 0;
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
color: var(--ink-secondary);
display: flex;
gap: 0.75rem;
align-items: baseline;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.os-card.visible li {
opacity: 1;
transform: translateX(0);
}
.os-card li:nth-child(1) { transition-delay: 0.1s; }
.os-card li:nth-child(2) { transition-delay: 0.15s; }
.os-card li:nth-child(3) { transition-delay: 0.2s; }
.os-card li:nth-child(4) { transition-delay: 0.25s; }
.os-card li:nth-child(5) { transition-delay: 0.3s; }
.os-card li:nth-child(6) { transition-delay: 0.35s; }
.os-card li:nth-child(7) { transition-delay: 0.4s; }
.os-card li::before {
content: "—";
color: var(--ink-tertiary);
flex-shrink: 0;
}
@media (min-width: 48em) {
.services-os {
grid-template-columns: 1fr 1fr;
}
}
/* Contact Page — booking calendar, centred and stacked at the top of the page.
The Calendly embed is a plain