/* ============================================================================ BUR OAK — DESIGN TOKENS · "sun-drenched, grounded" Material Design 3 role architecture, mapped onto a prescribed palette. The four brief colours are used exactly as specified: linen white #FBFBFA page ground pale sage #E2E7E1 soft sections warm gold #D4A373 interactive fills, buttons, accents charcoal-brown #2C2522 text Two derivations were necessary and are documented where they appear. Gold at #D4A373 measures 2.18:1 against linen, so it cannot carry text at any size. It is used as a *fill* with charcoal labels (6.66:1). For links and small accent text a darker tint of the same hue (#855D36 — 5.61:1 on linen, 4.63:1 on sage) is used instead. ========================================================================= */ :root { /* ---------------------------------------------------------- reference -- */ --linen: #FBFBFA; /* brief */ --linen-warm: #F6F5F2; --white: #FFFFFF; --sage: #E2E7E1; /* brief */ --sage-mid: #D7DED6; --sage-deep: #C9D2C7; --sage-ink: #4A5A48; --gold: #D4A373; /* brief */ --gold-light: #E7C9A6; --gold-pale: #F4E6D6; --gold-ink: #855D36; /* derived — AA text version of the gold */ --gold-ink-deep: #6B4A2B; --charcoal: #2C2522; /* brief */ --charcoal-mid: #5C534E; /* derived — 7.24:1 on linen */ --charcoal-soft: #847A73; --line: #9A9289; /* component borders — 3.0:1 on linen */ --line-soft: #E7E4DE; /* decorative rules only */ --umber: #8A4A2A; /* validation */ /* sampled straight off the logo artwork so nothing on the page fights it */ --brand-green: #1A4126; /* 11.09:1 on linen · white on it 11.49:1 */ --brand-gold: #B8832B; /* 3.21:1 on linen — graphic accents only, never text */ /* ------------------------------------------------------- system roles -- */ color-scheme: light; --md-sys-color-primary: var(--gold-ink); --md-sys-color-on-primary: var(--white); --md-sys-color-primary-container: var(--gold); --md-sys-color-on-primary-container: var(--charcoal); --md-sys-color-secondary: var(--brand-green); --md-sys-color-on-secondary: var(--white); --md-sys-color-secondary-container: var(--sage); --md-sys-color-on-secondary-container: var(--charcoal); --md-sys-color-tertiary: var(--gold-ink-deep); --md-sys-color-on-tertiary: var(--white); --md-sys-color-tertiary-container: var(--gold-pale); --md-sys-color-on-tertiary-container: var(--charcoal); --md-sys-color-error: var(--umber); --md-sys-color-on-error: var(--white); --md-sys-color-error-container: #F6E2D8; --md-sys-color-on-error-container: #3B1B0C; --md-sys-color-background: var(--linen); --md-sys-color-on-background: var(--charcoal); --md-sys-color-surface: var(--linen); --md-sys-color-on-surface: var(--charcoal); --md-sys-color-surface-variant: var(--sage); --md-sys-color-on-surface-variant: var(--charcoal-mid); --md-sys-color-surface-container-lowest: var(--white); --md-sys-color-surface-container-low: var(--linen-warm); --md-sys-color-surface-container: var(--sage); --md-sys-color-surface-container-high: var(--sage-mid); --md-sys-color-surface-container-highest: var(--sage-deep); --md-sys-color-surface-dim: var(--sage-mid); --md-sys-color-surface-bright: var(--white); --md-sys-color-outline: var(--line); --md-sys-color-outline-variant: var(--line-soft); --md-sys-color-inverse-surface: var(--brand-green); --md-sys-color-inverse-on-surface: var(--linen-warm); --md-sys-color-inverse-primary: var(--gold); --md-sys-color-scrim: #000000; --md-sys-color-shadow: #2C2522; } /* ========================================================================== TYPOGRAPHY Lora for headings — an elegant, moderate-contrast serif that stays light at display sizes. Inter for everything else, including the tracked-caps labels that used to be set in mono. Two families rather than three: fewer voices is most of what makes a page feel calm. All sizes in rem so browser font-size settings are honoured (SC 1.4.4). ========================================================================== */ :root { --md-ref-typeface-brand: "Lora", "Iowan Old Style", Georgia, serif; --md-ref-typeface-plain: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --md-ref-typeface-mono: "Inter", system-ui, sans-serif; --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: clamp(2.625rem, 1.6rem + 4.6vw, 4rem); /* 42 → 64 */ --md-sys-typescale-display-large-line-height: 1.16; --md-sys-typescale-display-large-tracking: -0.018em; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-medium-size: clamp(2.125rem, 1.5rem + 3vw, 3rem); /* 34 → 48 */ --md-sys-typescale-display-medium-line-height: 1.2; --md-sys-typescale-display-medium-tracking: -0.015em; --md-sys-typescale-display-small-size: clamp(1.875rem, 1.45rem + 2vw, 2.375rem); --md-sys-typescale-display-small-line-height: 1.26; --md-sys-typescale-display-small-tracking: -0.01em; --md-sys-typescale-headline-large-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem); --md-sys-typescale-headline-large-line-height: 1.3; --md-sys-typescale-headline-medium-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem); --md-sys-typescale-headline-medium-line-height: 1.34; --md-sys-typescale-headline-small-size: clamp(1.3125rem, 1.2rem + 0.6vw, 1.4375rem); --md-sys-typescale-headline-small-line-height: 1.4; --md-sys-typescale-title-large-size: 1.3125rem; --md-sys-typescale-title-large-line-height: 1.4; --md-sys-typescale-title-medium-size: 1.0625rem; --md-sys-typescale-title-medium-line-height: 1.5; --md-sys-typescale-title-medium-tracking: 0; --md-sys-typescale-title-small-size: 0.9375rem; --md-sys-typescale-title-small-line-height: 1.5; --md-sys-typescale-title-small-tracking: 0; /* body runs long and airy — 1.8 leading is the single biggest calm signal */ --md-sys-typescale-body-large-size: 1.0625rem; /* 17 */ --md-sys-typescale-body-large-line-height: 1.8; --md-sys-typescale-body-large-tracking: 0.002em; --md-sys-typescale-body-medium-size: 0.96875rem; /* 15.5 */ --md-sys-typescale-body-medium-line-height: 1.72; --md-sys-typescale-body-small-size: 0.875rem; /* 14 */ --md-sys-typescale-body-small-line-height: 1.62; --md-sys-typescale-label-large-size: 0.875rem; --md-sys-typescale-label-large-line-height: 1.4; --md-sys-typescale-label-large-tracking: 0.01em; --md-sys-typescale-label-medium-size: 0.75rem; /* 12, tracked caps */ --md-sys-typescale-label-medium-line-height: 1.5; --md-sys-typescale-label-medium-tracking: 0.15em; --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-line-height: 1.5; --md-sys-typescale-label-small-tracking: 0.17em; --measure-prose: 62ch; --measure-short: 44ch; } /* ========================================================================== SHAPE · ELEVATION · MOTION Shadows are light and diffuse — the brief's "soft lighting". Nothing is darker than 8% alpha, and every shadow is tinted with the charcoal-brown rather than pure black, so the page never goes grey. ========================================================================== */ :root { --md-sys-shape-corner-none: 0; --md-sys-shape-corner-xs: 6px; --md-sys-shape-corner-s: 10px; --md-sys-shape-corner-m: 16px; --md-sys-shape-corner-l: 22px; --md-sys-shape-corner-xl: 34px; --md-sys-shape-corner-full: 999px; --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px rgba(44,37,34,.04), 0 4px 16px rgba(44,37,34,.04); --md-sys-elevation-2: 0 1px 2px rgba(44,37,34,.04), 0 10px 32px rgba(44,37,34,.06); --md-sys-elevation-3: 0 2px 4px rgba(44,37,34,.04), 0 18px 48px rgba(44,37,34,.07); --md-sys-elevation-4: 0 2px 6px rgba(44,37,34,.05), 0 28px 64px rgba(44,37,34,.08); --md-sys-motion-duration-short: 160ms; --md-sys-motion-duration-medium: 280ms; --md-sys-motion-duration-long: 460ms; --md-sys-motion-easing-standard: cubic-bezier(.22,.61,.36,1); --md-sys-motion-easing-emphasized: cubic-bezier(.22,.61,.36,1); --md-sys-motion-easing-decel: cubic-bezier(0,0,.2,1); --md-sys-state-hover-opacity: .06; --md-sys-state-focus-opacity: .08; --md-sys-state-pressed-opacity: .10; --target-min: 44px; --target-min-inline: 24px; --target-gap: 8px; /* generous spacing scale — the airiness lives here */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px; --sp-8:40px; --sp-10:56px; --sp-12:72px; --sp-16:96px; --sp-20:128px; --sp-24:160px; --sp-32:200px; } /* ========================================================================== LAYOUT — mobile-first grid on the M3 window size classes ========================================================================== */ :root { --grid-cols: 4; --grid-gutter: 20px; --grid-margin: 22px; --grid-max: 100%; } @media (min-width: 600px) { :root { --grid-cols: 8; --grid-gutter: 28px; --grid-margin: 40px; } } @media (min-width: 840px) { :root { --grid-cols: 12; --grid-gutter: 32px; --grid-margin: 56px; } } @media (min-width: 1200px) { :root { --grid-margin: 72px; --grid-max: 1200px; } } @media (min-width: 1600px) { :root { --grid-margin: 96px; --grid-max: 1300px; } }