/* ========================================================================== LFFO TYPESET - the wordmark type system, applied to the whole site. -------------------------------------------------------------------------- WHAT THIS FILE IS. The association has one piece of drawn type of its own: LFFO Wordmark Italic, condensed from TeX Gyre Termes Italic. Everything else on the page has to agree with it. This file is the agreement. It was measured off the wordmark itself: x-height ........... 0.432em (small, old-style) cap height ......... 0.653em f descends to ..... -0.207em (a full descender below the baseline) o width / height ... 0.82 (narrow, high contrast) EB Garamond is drawn from the same lineage, so at h3 or in a footnote the f, x, t, m and o still read as the wordmark's own letters. Inter carries everything a reader does rather than reads: menus, buttons, fields, figures. IBM Plex Mono appears only where a monospaced grid genuinely helps, which on this site is a reference code and nothing else. WHY THIS FILE EXISTS AT ALL, INSTEAD OF EDITS SPREAD THROUGH THE OTHERS. The site was already token-driven: style.css declares --serif, --sans and --menu once and 108 rules across six stylesheets ask for them by name. So the whole face of the site can be changed by redeclaring three custom properties, and it can be changed BACK the same way. Rewriting 108 rules would have thrown that away for nothing. WHY THE SIZES MOVE AND THE STRUCTURE DOES NOT. Cormorant Garamond has an x-height near 0.36em and IBM Plex Sans near 0.52em. EB Garamond is 0.44em and Inter is 0.73em. Same px, visibly bigger letters - Inter especially, which at an unchanged 16px would read a full step louder than the page was drawn for. So the ladder below is retuned for the new faces. Nothing about the layout, the spacing or the components is touched: this file sets type and only type. LOAD ORDER. After style.css / pages.css / pages-fx.css so the token redeclaration wins, before lffo-bridge.css so component work can still overrule it. See lffo-assets.php. ========================================================================== */ /* ========================================================================== 1 - THE FOUR FAMILIES ========================================================================== */ :root { /* The wordmark is DISPLAY ONLY and the fallback is not decoration. It has no accented capitals, no quotation marks and no percent sign: 94 glyphs, ASCII plus the lowercase accents. A French or German heading with an accented capital falls through per character to the next family in the stack, so that family has to be a sibling of the wordmark rather than whatever the system offers. EB Garamond italic is that sibling - same lineage, same descending f - and the reader sees one typeface with one odd letter rather than two typefaces in one word. Times, the usual fallback, would be visible from across the room. */ --wordmark: "LFFO Wordmark", "EB Garamond", Georgia, "Times New Roman", serif; --serif: "EB Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; /* The menu kept its own token so the row could be set without dragging the body face with it. That is still true and still worth keeping, but both now resolve to the same family: the row and the page should not look like two different websites meeting at the header. */ --menu: var(--sans); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Ligatures. EB Garamond carries a real fi, fl, ffi and a discretionary st and ct; without this line the browser draws none of the discretionary ones and the fi collides at display sizes. */ --ligatures: "liga" 1, "clig" 1, "calt" 1; } /* ========================================================================== 2 - THE PAGE ========================================================================== */ body { font-family: var(--sans); /* 15.5px Inter sits on the same x-height as the 16px IBM Plex Sans this page was drawn at. It is not a smaller page, it is the same page. */ font-size: 15.5px; line-height: 1.68; letter-spacing: -.006em; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ========================================================================== 3 - THE LADDER -------------------------------------------------------------------------- Ratio 1.25, four steps, and two roles that share a step are told apart by weight, style and colour rather than by size. Hierarchy never comes from switching to a different species of type: that is the one rule the whole system rests on. h1 and h2 are the wordmark. h3 and h4 are Garamond, because they are still headings but they sit inside reading rather than above it. h5 and h6 are labels, and labels are interface, so they are Inter. ========================================================================== */ h1, h2 { font-family: var(--wordmark); font-style: italic; font-weight: 400; /* The wordmark is condensed and high contrast: it holds together at size and thins out below about 28px, which is why it never reaches h3. */ letter-spacing: -.005em; } h1 { font-size: clamp(2.35rem, 4.9vw, 3.8rem); line-height: 1.04; } h2 { font-size: clamp(1.82rem, 3.5vw, 2.7rem); line-height: 1.1; } h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.004em; } h3 { font-style: italic; font-size: clamp(1.28rem, 2.1vw, 1.66rem); line-height: 1.24; } h4 { font-style: normal; font-size: 1.3rem; line-height: 1.32; } h5 { font-family: var(--sans); font-weight: 500; font-size: 1rem; line-height: 1.45; letter-spacing: -.008em; } h6 { font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; } /* Body copy keeps the ligature set on; interface type does not, because a discretionary ct in a button label is a distraction, not a nicety. */ p, li, blockquote, .lead, .tier-for, .bfx-v, .inst-rel { font-feature-settings: var(--ligatures); } /* The home page monument, which is the largest piece of type on the site and the one that should least be set in something else. It was on the body serif with text-transform: uppercase and weight 700, which read as a handsome generic serif rather than as this association: it did not match the lockup sitting two hundred pixels above it in the header. The wordmark is what the header wears, so it is what the monument wears, and the weight comes back to 400 because the wordmark has one weight and asking for 700 only invites a browser to synthesise a fake bold. The uppercase is kept. The wordmark's caps are drawn, not faked, and hollowed out at this size they carry the gold stroke better than the lowercase would. */ .hero-monument { font-family: var(--wordmark); font-style: italic; } .hero-monument .hm-word { font-weight: 400; } /* THE DISPLAY ROLES THAT ARE NOT HEADINGS. The rule above stops the wordmark at h2, and the reasoning holds: the face is a high-contrast italic and it thins out below about 28px, so a card subheading at 19px would go spindly. But "not an h1 or an h2" is not the same thing as "not display type", and several of the largest things on this site are neither. These were all still on the body serif, and each was measured before it was moved rather than assumed: .tier-price 38-45px the figure on a membership card .president-quote 24-35px the one place the association speaks as I .tier-name 27px the card's own name .wz-legend 23px the question a form step is asking .gilded-head 27px a section head that happens to be an h3 All comfortably above the floor. Anything genuinely below it stays on Garamond, which is why this is a named list and not a blanket h3 rule: the membership page alone has h3s at 17px inside cards, and sweeping them in would have traded one wrong answer for a worse one. .tier-price and .president-quote carry their own font-family in pages.css and home.css respectively, where they are also given their sizes; they are corrected there rather than fought with here. This block covers the rest. */ .gilded-head, h3.gilded-head, .wz-done h3 { font-family: var(--wordmark); font-style: italic; font-weight: 400; letter-spacing: -.004em; } /* ========================================================================== 4 - THE EDITORIAL ROLES ========================================================================== */ /* The lead paragraph is italic so the descending f is present in the first sentence a reader meets, which is where the brand voice belongs. */ .lead, .page-hero > .container > p, .section-head > p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.6; letter-spacing: 0; } .caption, .inst-note, .bf-hint, .tier-basis, .spx-lead { letter-spacing: -.004em; } /* The eyebrow is this site's overline. It stays gold, stays uppercase and stays where it was; it is only the family underneath that changes. */ .eyebrow, .overline { font-family: var(--sans); font-weight: 500; letter-spacing: .19em; } blockquote { font-family: var(--wordmark); font-style: italic; font-weight: 400; line-height: 1.34; } /* A reference code, an amount in a table, a version string. Nothing else. */ code, kbd, samp, pre, .data, .spx-ref b, .mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .01em; } /* ========================================================================== 5 - INTERFACE TYPE -------------------------------------------------------------------------- Inter's x-height is what makes it legible at 13px and what makes it shout at 16px. Every control on this site was sized for a face with a much smaller one, so the interface roles come down a notch and pick up a little negative tracking, which is what stops a button label from looking inflated next to the reading it sits beside. ========================================================================== */ button, .btn, input, select, textarea, label, .label { font-family: var(--sans); letter-spacing: -.004em; } input, select, textarea { font-weight: 400; } .nav-link, .d-title, .footer-col a, .breadcrumb { font-family: var(--menu); letter-spacing: -.002em; } /* ========================================================================== 6 - REMOVED: THE OLD FACES -------------------------------------------------------------------------- Cormorant Garamond and IBM Plex Sans are no longer served from this origin and no longer named in any stylesheet. If either name ever reappears in a font-family stack it will silently fall through to Georgia or to the system UI face, which is exactly the kind of drift this file exists to prevent - so the check is: grep the css directory for either name and expect nothing. ========================================================================== */ /* ======================================================================== 7 - THE FOOTER, IN THE WORDMARK (requested 2026-08-31) -------------------------------------------------------------------------- The footer group labels (Explore / Engage / Connect) and the page links beneath them were Inter: the one place the sitemap did not speak in the association's own hand. They now carry the wordmark italic, mixed-case so the drawn letterforms - the descending f above all - actually show. Sized UP from the old 12.8px/0.9rem so the high-contrast italic holds together well above its ~18px floor. The email address (ul.foot-contact) and the social marks are deliberately left in Inter: an address is data, not a page. Mixed-case, not uppercase, for the same reason the monument is. ======================================================================== */ .footer-col h2{ font-family:var(--wordmark); font-style:italic;font-weight:400; text-transform:none;letter-spacing:-.005em; font-size:1.55rem;line-height:1.12; } .footer-col ul:not(.foot-contact) a{ font-family:var(--wordmark); font-style:italic;font-weight:400; letter-spacing:-.004em; font-size:1.2rem;line-height:1.5; } @media (max-width:820px){ .footer-col h2, .footer-col:last-child h2{font-size:1.5rem;letter-spacing:-.005em} .footer-col ul:not(.foot-contact) a{font-size:1.15rem} }