/* ========================================================================== Design tokens — the single source of truth for color, type and space. No raw hex in components. Components use the semantic roles below, never the raw palette names. ========================================================================== */ :root { /* --- Palette "IVOIRE" — raw values. Do not use these directly. -------- */ --c-ivory: #F4F0E9; --c-ivory-raised: #F7F4EE; /* one step above the ground: cards, panels */ --c-bone: #E6DFD2; --c-taupe: #A79B8A; --c-umber: #4A4238; --c-espresso: #211C16; /* --- Semantic roles — use these. ------------------------------------- */ /* Contrast measured against the ground each role sits on. AA is 4.5:1. */ --surface: var(--c-ivory); --surface-raised: var(--c-ivory-raised); --surface-alt: var(--c-bone); --surface-invert: var(--c-espresso); --ink: var(--c-espresso); /* 14.88:1 on ivory ✓ */ --ink-secondary: var(--c-umber); /* 8.69:1 on ivory ✓ */ --ink-invert: var(--c-ivory); /* 14.88:1 on espresso ✓ */ --ink-invert-secondary: var(--c-taupe); /* 6.20:1 on espresso ✓ */ /* TAUPE IS NOT AN INK ROLE. It measures 2.40:1 on ivory: it fails AA for body text and it fails the 3:1 large-text floor too, so it also fails at the "11px caps" the identity pack suggests — 11px caps is small text under WCAG, not large. The brand pack lists taupe for "captions, rules"; rules is the half that survives. Kicker and caption TEXT is --ink-secondary (umber, 8.69:1), which reads just as quiet at 11px and is legible. Taupe is exposed only as a non-text role so it cannot be reached for. */ --rule: var(--c-taupe); --rule-soft: var(--c-bone); --rule-hairline: rgba(33, 28, 22, 0.14); /* photo + panel hairlines */ --rule-fade: rgba(33, 28, 22, 0.18); /* the fading kicker rule */ --motif: var(--c-espresso); --focus-ring: var(--c-espresso); --focus-ring-invert: var(--c-ivory); /* The one permitted depth gradient, for full-bleed dark bands only. */ --band-invert: linear-gradient(var(--c-espresso), #3A3129); /* Elevation here is a hairline plus a whisper of ambient darkness. There is no heavier shadow than this anywhere on the site. */ --shadow: 0 8px 18px rgba(33, 28, 22, 0.10); /* --- Type families ---------------------------------------------------- */ --family-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --family-support: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --family-arabic: "Montserrat Arabic", system-ui, -apple-system, sans-serif; /* --- Type ROLES. Components reference only these. -------------------- The :lang(ar) block below re-points them. That indirection is the whole mechanism preventing Arabic from ever being letterspaced or uppercased: a component cannot opt out of it, because it never names a family or a tracking value directly. ------------------------------------------- */ --font-heading: var(--family-display); --font-body: var(--family-support); --font-label: var(--family-support); --tracking-display: 0.26em; --tracking-label: 0.26em; --tracking-descriptor: 0.3em; --tracking-button: 0.12em; --transform-display: uppercase; --transform-label: uppercase; /* Hierarchy is size and space, never weight. Nothing goes above 500. */ --weight-body: 400; --weight-medium: 500; --weight-display: 500; /* --- Type scale ------------------------------------------------------ Fixed sizes, with clamps only where a line would otherwise break badly on a phone. Line-heights ride with their size. -------------------- */ --size-display: clamp(2.10rem, 1.45rem + 3.0vw, 3.25rem); --size-h1: clamp(1.75rem, 1.44rem + 1.4vw, 2.25rem); --size-h2: 1.5rem; --size-h3: 1.125rem; --size-body: 1rem; --size-small: 0.875rem; --size-kicker: 0.6875rem; --leading-display: 1.05; --leading-h1: 1.15; --leading-h2: 1.25; --leading-h3: 1.35; --leading-body: 1.7; /* Arabic lifts this to 1.9 below */ --leading-tight: var(--leading-h1); /* --- Space — 4 8 12 16 24 32 48 64 96 128 ---------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --measure: 68ch; --measure-narrow: 44ch; --gutter: clamp(1.5rem, 5vw, 3.5rem); /* 24px phone → 56px desktop */ --page-max: 75rem; /* 1200px */ --margin-col: 7.5rem; /* 120px trailing margin column */ --hairline: 1px; --radius: 0; /* the identity is square; no rounding */ --transition: 160ms ease; /* Scroll reveal. Restored at the owner's instruction on 2026-08-27, which overrides the handoff brief's "no reveals" motion budget — the brief is otherwise still in force, so do not delete these again citing it. Slow and short: long enough to read as movement rather than a flicker, small enough that the page never looks like it is assembling itself. */ --reveal-dur: 620ms; --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --reveal-rise: 0.7rem; } /* -------------------------------------------------------------------------- Arabic overrides. Never letterspace or uppercase Arabic; hierarchy comes from weight and size. Body line-height 1.9 against Latin's 1.7. Cormorant has no Arabic coverage, so the Arabic face carries every role. -------------------------------------------------------------------------- */ :lang(ar) { --font-heading: var(--family-arabic); --font-body: var(--family-arabic); --font-label: var(--family-arabic); --tracking-display: 0; --tracking-label: 0; --tracking-descriptor: 0; --tracking-button: 0; --transform-display: none; --transform-label: none; --leading-display: 1.25; --leading-h1: 1.35; --leading-h2: 1.4; --leading-h3: 1.5; --leading-body: 1.9; } /* -------------------------------------------------------------------------- Compatibility aliases. site.css was written against an earlier scale. These map the old names onto the new ones so the two cannot drift apart while the components are being migrated section by section. Do not reach for these in new work — and when the last reference to one is gone, delete it rather than leaving it here to be rediscovered and used again. -------------------------------------------------------------------------- */ :root { --step--1: var(--size-small); --step-0: var(--size-body); --step-1: var(--size-h3); --step-2: var(--size-h2); --step-3: var(--size-h1); --step-4: var(--size-display); --space-3xs: var(--space-1); --space-2xs: var(--space-2); --space-xs: var(--space-3); --space-s: var(--space-4); --space-m: var(--space-5); --space-l: var(--space-7); --space-xl: var(--space-8); --space-2xl: var(--space-9); --space-3xl: var(--space-10); --weight-strong: var(--weight-medium); /* nothing goes above 500 now */ } /* -------------------------------------------------------------------------- Print palette. Ivory becomes paper, espresso becomes ink, and the dark bands lose their ground so a printed page does not arrive as a black rectangle. Redefining the roles here rather than restyling components in site.css means every component prints correctly without knowing it is being printed. -------------------------------------------------------------------------- */ @media print { :root { --surface: #fff; --surface-raised: #fff; --surface-alt: #fff; --surface-invert: #fff; --ink: #000; --ink-secondary: #333; --ink-invert: #000; --ink-invert-secondary: #333; --rule: #999; --rule-soft: #ccc; --rule-hairline: #999; --rule-fade: #ccc; --band-invert: none; --shadow: none; } }