*/ .u-grain { position: absolute; inset: 0; border-radius: inherit; z-index: 0; } /* ---- 4. Skip link -------------------------------------------------------- */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: var(--z-toast); padding: 12px 20px; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--navy-800); color: var(--paper); font-size: var(--fs-sm); font-weight: var(--fw-semi); box-shadow: var(--sh-card); } .skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; } /* ---- 5. Type scale ------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: .035em; text-transform: uppercase; } h2 { font-size: var(--fs-h2); letter-spacing: .03em; text-transform: uppercase; } h3 { font-size: var(--fs-h3); letter-spacing: .02em; } h4 { font-family: var(--font-ui); font-size: 1rem; font-weight: var(--fw-semi); letter-spacing: 0; } p { text-wrap: pretty; } p + p { margin-top: .85em; } small { font-size: var(--fs-sm); } strong, b { font-weight: var(--fw-semi); } em, i { font-style: italic; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: .875em; } /* ---- 6. Layout primitives ----------------------------------------------- */ .u-container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .u-container--narrow { max-width: calc(var(--maxw-nar) + var(--gutter) * 2); } .u-container--wide { max-width: calc(1400px + var(--gutter) * 2); } .u-section { position: relative; padding-block: var(--section-y); } .u-section--tight { padding-block: clamp(36px, 5.5vw, 72px); } .section { position: relative; } .u-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .u-stack--sm { gap: var(--sp-2); } .u-stack--lg { gap: var(--sp-6); } .u-stack--xl { gap: var(--sp-7); } .u-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .u-row--between { justify-content: space-between; } .u-row--end { justify-content: flex-end; } .u-row--center { justify-content: center; } .u-row--top { align-items: flex-start; } .u-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .u-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .u-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .u-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); } .u-spacer { flex: 1 1 auto; } /* ---- 7. Type utilities (BRIEF §10) -------------------------------------- ⚠️ NO `background-clip: text` ANYWHERE ON THIS SITE. It is banned: over transparent ink it fails silently — no error, no warning, just a headline that is not there — and it shipped invisible three times. Display type paints a solid fill. */ .u-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; text-wrap: balance; max-width: 100%; color: var(--paper); -webkit-text-fill-color: var(--paper); text-shadow: 0 1px 0 rgb(var(--paper-rgb) / .22), 0 0 34px rgb(var(--haze-rgb) / .34), 0 6px 26px rgb(3 7 22 / .55); } /* Italic secondary display line — "& FRIENDS", "5 SEPT / LEIEMEERS KUURNE". -webkit-text-fill-color is load-bearing: this class is used both standalone and as a span inside an

, and the parent's fill colour otherwise wins over `color`. The scrim is tighter than --g-ink because the 13px pool bleeds through strokes this thin and greys them. / .u-display--sub { font-size: clamp(1.4rem, 4vw, 3rem); font-style: italic; font-weight: var(--fw-med); letter-spacing: .04em; background-image: none; color: var(--paper); -webkit-text-fill-color: var(--paper); text-shadow: 0 1px 2px rgb(2 5 16 / .66), 0 0 3px rgb(2 5 16 / .82); } .u-display--sm { font-size: clamp(1.7rem, 5vw, 3.4rem); } .u-serif { font-family: var(--font-display); } .u-italic { font-style: italic; } .u-eyebrow { display: inline-block; font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1.2; color: var(--ball); } / --haze is a background token, never ink: at .95 it measures 3.9:1. / .u-eyebrow--dim { color: var(--paper-dim); } / A lead paragraph routinely sits on the bare ground, so it cannot inherit a pane's scrim. It carries its own. / .u-lead { font-size: var(--fs-lead); line-height: 1.58; color: var(--paper-dim); max-width: 62ch; text-wrap: pretty; text-shadow: var(--g-ink); } .u-tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -.01em; } / ---- 8. Misc utilities --------------------------------------------------- / .u-dim { color: var(--paper-dim); } .u-mute { color: var(--paper-mute); } .u-ball { color: var(--ball); } .u-haze { color: var(--haze); } .u-center { text-align: center; } .u-right { text-align: right; } .u-nowrap { white-space: nowrap; } .u-caps { text-transform: uppercase; letter-spacing: .1em; } .u-measure { max-width: 62ch; } .u-measure-sm { max-width: 46ch; } .u-relative { position: relative; z-index: 1; } .u-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .u-hide { display: none !important; } @media (max-width: 719px) { .u-hide-mobile { display: none !important; } } @media (min-width: 720px) { .u-hide-desktop { display: none !important; } } / ---- 9. Motion policy (BRIEF §4 rule 7) ---------------------------------- / @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }