/* ═══════════════════════════════════════════════════════════════════════ FIDA — type ─────────────────────────────────────────────────────────────────────── The Figma uses five faces. One is open-licence, four are commercial: Inter SIL OFL 1.1 ✅ shipped here, exact match Pujarelah commercial ✗ must be bought Romelu Vomelu commercial ✗ must be bought Edwardian Script ITC commercial ✗ must be bought (Monotype) Miller Banner commercial ✗ must be bought (Carter & Cone) Nothing commercial is bundled in this repo. Converting a desktop font — including the Edwardian Script ITC that ships with Microsoft Office — into a .woff2 and serving it from a web server is a licence breach, and it is the single most common way a site gets a letter from a foundry. We do not do it. See assets/fonts/README.md for exactly what to buy and where. Until they are bought, four open-licence stand-ins carry the design. Each is size-adjusted so it occupies the SAME width as the real font does in the Figma — measured against Figma's own text metrics — so the layout is correct now and stays correct after the swap. TO SWAP IN A REAL FONT: drop its .woff2 into assets/fonts/ and uncomment that font's block below. It takes over automatically; the stand-in stays as the fallback. Nothing else in the project changes. ═══════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · Inter — the real thing, SIL OFL 1.1 ═══════════════════════════ github.com/rsms/inter · used for nav, buttons, body copy and captions. */ @font-face{font-family:'Inter';src:url('../assets/fonts/Inter-300.woff2') format('woff2'); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../assets/fonts/Inter-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../assets/fonts/Inter-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../assets/fonts/Inter-400i.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} /* ═══ 2 · the commercial four — UNCOMMENT AFTER PURCHASE ════════════════ Buy the WEBFONT licence (not just desktop), export .woff2, drop it in assets/fonts/ with the file name below, then delete the surrounding comment markers for that block. Order of preference in the stack means the real font wins the moment it loads. */ /* ── Pujarelah — LIVE, licensed file installed ── */ @font-face{font-family:'Pujarelah';src:url('../assets/fonts/Pujarelah-Regular.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Pujarelah';src:url('../assets/fonts/Pujarelah-Medium.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Pujarelah';src:url('../assets/fonts/Pujarelah-SemiBold.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Pujarelah';src:url('../assets/fonts/Pujarelah-Italic.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} /* ── Romelu Vomelu — LIVE, licensed file installed ── */ @font-face{font-family:'Romelu Vomelu';src:url('../assets/fonts/RomeluVomelu-Italic.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} /* ── Edwardian Script ITC — LIVE, licensed file installed ── */ @font-face{font-family:'Edwardian Script ITC';src:url('../assets/fonts/EdwardianScriptITC.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} /* ── Miller Banner Roman — STILL MISSING · Type Network ───────────────── Figma names it MillerBanner-Roman on all 19 nodes — the normal-width cut. The zip delivered on 2026-08-15 held only Extra Compressed and Extra Condensed weights, which are a different typeface shape, so they are NOT installed; Playfair Display at size-adjust:97% still carries these 19 runs. @font-face{font-family:'Miller Banner';src:url('../assets/fonts/MillerBanner-Roman.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} ─────────────────────────────────────────────────────────────────────── */ /* ═══ 3 · open-licence stand-ins, all SIL OFL 1.1 ═══════════════════════ Every size-adjust below was MEASURED, not guessed. Figma records the exact advance width of each string in the licensed font; the stand-in was measured against those same strings in the browser and scaled to match. Method was validated on Inter, which we have for real: predicted vs actual came out 0.994–1.014 across 7 strings, i.e. the calibration is accurate to about ±1%. Where a font's proportions could not be matched by one number, the value is biased so text never overflows its Figma box. These percentages belong to the STAND-IN only. Buying the real font makes them irrelevant — nothing needs undoing. */ /* ── how these four were chosen ──────────────────────────────────────── First attempt ranked candidates purely on how closely they matched the licensed font's WIDTHS. Lora and Crimson Pro won that contest and looked wrong on screen: both are low-contrast book serifs, while FIDA's faces are high-contrast display serifs. Width is the easy thing to fix — it is what size-adjust is for. Stroke contrast and letterform character are not fixable, so they are now chosen FIRST and the width corrected after. ──────────────────────────────────────────────────────────────────── */ /* Pujarelah → Cormorant Garamond Elegant, high-contrast, refined — the same register as Pujarelah. Width calibrated on 8 real headings, 32–48px, ratios 1.085–1.127. */ @font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/CormorantGaramond-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;size-adjust:111%} @font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/CormorantGaramond-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap;size-adjust:111%} @font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/CormorantGaramond-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap;size-adjust:111%} @font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/CormorantGaramond-400i.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap;size-adjust:111%} /* Romelu Vomelu → Bodoni Moda Italic Third pass, and the one the client confirmed against the Figma. Romelu is a Didone: extreme thick/thin contrast, hairline serifs, clean unswashed capitals. Crimson Pro (first pass) was a low-contrast book serif — wrong. Playfair Display (second pass) had the contrast but its italic caps carry calligraphic swashes; its looped J read nothing like the real "J" in "My Journey". Bodoni Moda's italic keeps the contrast without the swash. Calibrated on the PROSE, not the numerals. Romelu sets three things: the 100px "01."–"04." (which sit in 305px boxes with ~180px of slack, so their width is unconstrained), the client names, and the hero's second line "For Visionary Brands" — 648px in Figma and the only tight box of the three. Taking the median across all five samples gave 104% and pushed the hero line 83px wide; calibrating on the prose gives 93%, which lands the hero line and the names inside their boxes and leaves the numerals a touch narrow where nobody can tell. */ @font-face{font-family:'Bodoni Moda';src:url('../assets/fonts/BodoniModa-400i.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap;size-adjust:91%} @font-face{font-family:'Bodoni Moda';src:url('../assets/fonts/BodoniModa-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;size-adjust:91%} @font-face{font-family:'Bodoni Moda';src:url('../assets/fonts/BodoniModa-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap;size-adjust:91%} /* Miller Banner → Playfair Display Miller is a Scotch Roman and so is Playfair — same moderate contrast and bracketed serifs, where Bodoni's hairlines are too extreme for a 32px running strip. Measured 2.03% across the manifesto string at two sizes, the tightest of every candidate tested. */ @font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;size-adjust:97%} @font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap;size-adjust:97%} @font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap;size-adjust:97%} @font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-400i.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap;size-adjust:97%} /* Edwardian Script ITC → Mrs Saint Delafield Five OFL roundhands were measured against both Edwardian strings on the page. Consistency (how well each tracks Edwardian's proportions): Parisienne 1.1% · Tangerine 3.4% · Mrs Saint Delafield 8.8% Herr Von Muellerhoff 9.0% · Pinyon Script 11.8% Parisienne is the tightest fit but reads casual; Mrs Saint Delafield is the formal copperplate closest to Edwardian in character, so it wins on looks. No single number fits both strings: "Client Words" wants 119%, the 62-char 40px line wants 103%. 109% is the geometric mean — each lands ~7% out in opposite directions, which is invisible on a script face, and neither wraps or gets clipped. Buying the real font removes the compromise entirely. */ @font-face{font-family:'Mrs Saint Delafield';src:url('../assets/fonts/MrsSaintDelafield-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;size-adjust:109%}