/* ============================================================================ TYPE — Day Bespoke Carpentry. Built from _TEMPLATE/website/css/type.css. Write no other font-size, font-weight, font-family, text-transform or letter-spacing anywhere else in the stylesheet. The contract is build/COPY-AND-TYPOGRAPHY.md. The gate is copy_type_audit.py. A reader counts PERCEPTIBLE TREATMENTS, not @font-face rules. Seven, no more. THE PAIR (client's own list, questionnaire 5 Oct 2026) Display Cormorant Garamond — the SemiBold cut, served as the face's one weight and declared 400 so the 400/700 rule holds. SIL OFL 1.1. Body Libre Baskerville 400 / 700. SIL OFL 1.1. ONE DEVIATION FROM THE TEMPLATE, on purpose: Cormorant's x-height is 386/1000 against Baskerville's 530. At --fs-lead an h3 in Cormorant renders SMALLER than the body copy beside it, so the display face is used only at 24px and above (h1, h2, statements). The h3 is Baskerville 700 at body size — it differs from body by weight alone, which is the "change one attribute per level" rule. Buttons are the Label treatment (small spaced capitals). ========================================================================== */ :root { --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; --font-body : "Libre Baskerville", "Baskerville Fallback", Georgia, serif; /* SIZE — five tokens named by role. Desktop ladder 15 / 19 / 23.5 / 52 / 96. CLIENT EXCEPTION (Joseph, 9 Oct 2026: "Jack gets what he has asked for on the questionnaire" — "large clear direction", and the reference he chose): the page title is a display size, 44px on a phone to 96px on desktop (6rem, the craft ceiling for display type), 5.1x body against the house cap of 1.9x. Cormorant's x-height is 386/1000, so at 36px it read no larger than the 23.5px lead beside it and the hierarchy collapsed. Gate 2 reports this one check as a known, approved fail. Every clamp keeps a rem term and a max/min under 2.5x (WCAG 1.4.4). */ --fs-meta : 0.9375rem; /* 15px flat */ --fs-body : clamp(1.125rem, 1.05rem + 0.3vw, 1.1875rem); /* 18.0 -> 19px (18px floor for older readers) */ --fs-lead : clamp(1.1875rem, 1.05rem + 0.65vw, 1.46875rem); /* 19.0 -> 23.5px */ --fs-section: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); /* 28.0 -> 52px */ --fs-page : clamp(2.75rem, 1.2rem + 5.6vw, 6rem); /* 44.0 -> 96px */ /* LEADING — inverse to size. */ --lh-body : 1.68; --lh-lead : 1.55; --lh-h3 : 1.40; --lh-h2 : 1.08; --lh-h1 : 1.0; /* MEASURE — a multiple of the body token. Baskerville is wide (average advance 0.52em), so 29 x body gives ~56 characters at 19px. */ --measure: calc(var(--fs-body) * 29); --col : calc(var(--fs-body) * 34); /* TRACKING — the one permitted value, for the small spaced capitals of the Label treatment (menu, buttons, eyebrows): the luxury makers' convention and the client's reference sites. Lowercase text never takes it. */ --track: 0.16em; /* INK — three text colours, swapped per surface by .on-dark in main.css. On white: ink 18.7:1 · soft 8.9:1. Links are the ink colour with a bronze underline, so text stays black or white and bronze stays an accent. */ --ink : #121212; --ink-soft: #4A4A4A; --link : #121212; } /* ============================================================================ FONT LOADING — self-hosted WOFF2, metric-matched, no third-party request. Fallback numbers computed with tools/font_metrics.py against Georgia (letter-frequency-weighted advance widths; hhea ascent/descent): Libre Baskerville size-adjust 116.62% · ascent 83.18% · descent 23.15% · gap 0% Cormorant 600 size-adjust 89.10% · ascent 103.71% · descent 32.21% · gap 0% ========================================================================== */ @font-face { font-family: "Libre Baskerville"; src: url("/fonts/body-400.woff2?v=3eb80fbc") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("/fonts/body-700.woff2?v=96fa6337") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/fonts/display-400.woff2?v=ae062b6d") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Baskerville Fallback"; src: local("Georgia"); size-adjust: 116.62%; ascent-override: 83.18%; descent-override: 23.15%; line-gap-override: 0%; } @font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 89.10%; ascent-override: 103.71%; descent-override: 32.21%; line-gap-override: 0%; } /* ============================================================================ RESET — remove the browser's own treatments before adding ours. ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Never set font-size on html: it overrides the reader's own preference. */ font-synthesis-weight: none; font-synthesis-style: none; } body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--ink); } h1, h2, h3 { margin: 0; font-weight: 400; color: var(--ink); } h1, h2, .statement { font-family: var(--font-display); } p, ul, ol, dl, dd, figure, blockquote { margin: 0; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } address { font-style: normal; } strong { font-weight: 700; } body { overflow-wrap: break-word; hyphens: manual; } a, code, samp { overflow-wrap: anywhere; } .grid > *, .flex > *, li, td, dd { min-width: 0; overflow-wrap: anywhere; } /* WRAPPING — balance on headings only; pretty on body copy. */ h1, h2, h3, .statement, .lead, figcaption, blockquote { text-wrap: balance; } .prose > p, li, dd, dt, td, th, summary, .faq-answer { text-wrap: pretty; } table, time { font-variant-numeric: tabular-nums lining-nums; } /* Colour alone is never the link cue. */ .prose a, .lead a, .faq-answer a, .note a { color: var(--link); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: max(1px, 0.06em); text-underline-offset: 0.15em; } .prose a:hover, .faq-answer a:hover, .note a:hover { text-decoration-thickness: max(2px, 0.12em); } @media print { .prose > p, li { orphans: 3; widows: 3; } h1, h2, h3 { break-after: avoid; } } /* ============================================================================ THE SEVEN TREATMENTS. There is no eighth. 1 Page title display 400 --fs-page ink 2 Section heading display 400 --fs-section ink (also .statement) 3 Strong voice body 700 --fs-body ink (h3, FAQ question, dt, form label) 4 Lead body 400 --fs-lead ink-soft 5 Body body 400 --fs-body ink 6 Meta body 400 --fs-meta ink-soft 7 Label body 400 --fs-meta ink uppercase, tracked (buttons, eyebrows, footer titles; the menu is plain Meta text in ink since 12 Oct 2026) ========================================================================== */ /* 1 — Page title */ h1 { font-size: var(--fs-page); line-height: var(--lh-h1); max-width: var(--col); } /* Very large text on a phone (200% at 390px; never at the default size): the page title steps down to the section size so whole words stay on the line. */ @media (max-width: 19em) { h1 { font-size: var(--fs-section); } } /* 2 — Section heading, the single-line statement, and the phone menu's links */ h2, .statement, .mobile-menu .menu-link { font-size: var(--fs-section); line-height: var(--lh-h2); max-width: var(--col); } .mobile-menu .menu-link { font-family: var(--font-display); } /* 3 — Strong voice: h3, FAQ questions, service names, form labels. Weight is the signal. */ h3, summary, dt, label, .review__name, .error-summary__title { font-size: var(--fs-body); font-weight: 700; font-family: var(--font-body); line-height: var(--lh-h3); } /* 4 — Lead: the opening paragraph, recessive ink, WHOLE block */ .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-soft); max-width: var(--measure); } /* 5 — Body */ .prose > p { max-width: var(--measure); margin-bottom: 1.25rem; } .prose > p:last-child { margin-bottom: 0; } /* 6 — Meta: captions, dates, nav, footer links, review attributions, the process-step number */ .meta, .site-nav a, .header-call { font-size: var(--fs-meta); line-height: 1.6; color: var(--ink-soft); } /* menu and call: plain small text (12 Oct 2026); main.css sets them white */ .steps > li::before { font-size: var(--fs-meta); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--track); } /* 7 — Label: small spaced capitals at meta size. The menu, every button, the eyebrow above a heading, footer column titles, the trust line. CLIENT EXCEPTION (Joseph, 9 Oct 2026: the reference sites' "fonts ... style and feel have to carry on through the entire website"): uppercase with one tracking value, used ONLY on these short labels — never on a sentence. */ .label, .btn, .eyebrow, .more { font-size: var(--fs-meta); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); color: var(--ink); } .sticky-cta .btn { letter-spacing: normal; } /* the phone bar is narrow: capitals, untracked */