/* Self-hosted Fraunces and Inter — SIL Open Font License 1.1. Built from the upstream variable fonts (google/fonts) and cut down for this site: - subset to Latin-1 plus the Polish diacritics and the punctuation the copy actually uses; - the SOFT and WONK axes instanced out, keeping `opsz` (which the browser drives from font-size) and `wght`. 170KB for all three faces, down from 1.2MB when the same faces were requested from fonts.googleapis.com as discrete static weights. Serving them from our own origin also removes a render-blocking round-trip to a third-party stylesheet and a second TLS connection. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/fraunces.woff2') format('woff2-variations'); } @font-face { font-family: 'Fraunces'; font-style: italic; /* Italic Fraunces sets exactly one phrase on the site — the hero accent, at 600. Pinning the weight axis (opsz still varies with font-size) took the file from 70KB to 40KB with no visible change, and it is now preloaded only on the page that actually uses it. */ font-weight: 600; font-display: swap; src: url('/fonts/fraunces-italic.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter.woff2') format('woff2-variations'); } /* ========================================================================== HairBi — design layer Loaded after the generated Astro stylesheets. Component rules are scoped under `.hb` (set on ) so they match the generated `[data-astro-cid-*]` specificity and win on source order. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Warm ground — the brand's existing terracotta identity, deepened. */ --color-bg: #FAF6F0; --color-surface: #FFFFFF; --color-text: #241A15; --color-text-muted: #6B5A4E; --color-primary: #8C3A2B; --color-primary-deep: #6E2B1F; --color-secondary: #EDE3D6; --color-accent: #4E5D42; --color-border: #E3D7C7; /* Cool axis — silver is the subject, not the absence of colour. `--silver` is for rules and large type only (3.5:1); `--silver-ink` is the smallest safe size (5.6:1 on --color-bg). */ --silver: #7E858C; --silver-ink: #5C646C; --silver-mist: #C9CDD2; --silver-wash: #EFF1F3; /* Tints used for washes and hairlines. */ --wash-clay: color-mix(in srgb, var(--color-primary) 7%, transparent); --wash-silver: color-mix(in srgb, var(--silver) 12%, transparent); --rule: color-mix(in srgb, var(--color-text) 12%, transparent); --rule-soft: color-mix(in srgb, var(--color-text) 7%, transparent); /* Type ------------------------------------------------------------------ The generated scale topped out at 37px for an h1. Replaced with a fluid scale so display type actually reads as display type. */ --font-heading: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-base: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem); --font-body-min-size: var(--font-size-base); --font-size-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --font-size-xs: 0.8125rem; --font-size-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem); --font-size-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); --font-size-2xl: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem); --font-size-3xl: clamp(2.4rem, 1.5rem + 3.7vw, 4.25rem); --tracking-display: -0.021em; --tracking-tight: -0.011em; --tracking-eyebrow: 0.14em; --leading-display: 1.04; --leading-title: 1.14; --leading-body: 1.62; /* Fraunces carries an optical-size axis, which the browser drives automatically from font-size — that is the axis worth paying for. The SOFT and WONK axes were dropped: carrying them cost 329KB of extra font data for a difference barely visible at these sizes. */ --optical: auto; /* Space — fluid, so the 6rem gaps stop bloating small screens. */ --space-3xs: 0.25rem; --space-2xs: 0.375rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); --space-xl: clamp(2.5rem, 2rem + 2.2vw, 4rem); --space-2xl: clamp(3.5rem, 2.6rem + 3.8vw, 6rem); --space-3xl: clamp(5rem, 3.5rem + 6vw, 9rem); /* Shape */ --border-radius: 10px; --border-radius-lg: 20px; --border-radius-xl: 28px; --radius-pill: 999px; /* Shadows — warm-tinted, never neutral grey on a cream ground. */ --shadow-sm: 0 1px 2px rgba(36, 26, 21, 0.04); --shadow-md: 0 1px 2px rgba(36, 26, 21, 0.04), 0 10px 28px -14px rgba(36, 26, 21, 0.16); --shadow-lg: 0 2px 4px rgba(36, 26, 21, 0.04), 0 24px 56px -24px rgba(36, 26, 21, 0.22); --shadow-style: var(--shadow-md); /* Motion */ --anim-duration: 0.28s; --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1); --anim-hover-lift: -2px; --anim-hover-scale: 1; --container-max-width: 1220px; --container-narrow: 760px; --header-height: 76px; } /* -------------------------------------------------------------------------- 2. Reset The generated stylesheet ships no box-sizing or margin reset, so every padded box (buttons, inputs, containers) rendered wider and taller than its declared size. -------------------------------------------------------------------------- */ .hb.hb *, .hb.hb *::before, .hb.hb *::after { box-sizing: border-box; } /* No margin reset here on purpose: the generated stylesheet was authored against the UA's default heading and paragraph margins, and zeroing them collapsed spacing on every page that relied on them. Margins are set explicitly per component below instead. */ /* Whitespace text nodes around the generated