/* ============================================================ ACUNATOMY — shared design tokens (canonical) ============================================================ Linked LAST in on every page, so these values win the cascade over any per-page :root. To restyle the whole site, edit THIS file. Full documentation: styles/index.css header. ============================================================ */ :root { /* ── Color: brand palette ───────────────────────────── */ --ivory: #F5F0E8; /* page ground */ --ivory-dark: #EDE7DA; /* nav bar, raised panels */ --ink: #1A1714; /* primary text, dark sections */ --ink-soft: #2C2824; /* dark-section panels */ --gold: #A68A4A; /* the accent. CTAs, labels, emphasis */ --gold-light: #D4B87A; /* shimmer highlight, hover states */ --gold-pale: #F0E8D0; /* tinted card fills on ivory */ --warm-gray: #736960; /* secondary text on ivory */ --rule: #D6CFC4; /* hairlines on ivory */ --rule-dark: #C4BDB2; /* hairlines, slightly heavier */ /* ── Color: semantic aliases (prefer these in new code) ─ */ --color-bg: var(--ivory); --color-bg-raised: var(--ivory-dark); --color-bg-inverse: var(--ink); --color-text: var(--ink); --color-text-muted: var(--warm-gray); --color-text-inverse: var(--ivory); --color-accent: var(--gold); --color-border: var(--rule); --scrim-soft: rgba(20,16,12,0.42); /* photo-overlay gradient ends */ --scrim-mid: rgba(20,16,12,0.18); /* photo-overlay gradient middle */ /* ── Type: families ─────────────────────────────────── */ --font-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', serif; --font-voice: 'Lora', 'Lora Fallback', serif; --font-ui: 'Tenor Sans', 'Tenor Sans Fallback', sans-serif; /* ── Type: UI scale — 1.25 ratio ────────────────────── */ --text-2xs: 0.64rem; /* 1 ÷ 1.25² — fine print, footer meta */ --text-xs: 0.72rem; /* compromise step — buttons, labels */ --text-sm: 0.8rem; /* 1 ÷ 1.25 — captions, small body */ --text-md: 1rem; /* base — body copy */ --text-lg: 1.25rem; /* 1 × 1.25 — leads, pull quotes */ --text-xl: 1.5625rem; /* 1 × 1.25² — sub-heads */ /* ── Type: display scale — fluid, serif headlines ───── */ --display-sm: clamp(1.6rem, 2.4vw, 2.2rem); --display-md: clamp(2rem, 3vw, 3rem); --display-lg: clamp(2.4rem, 3.8vw, 3.8rem); /* section h2 standard */ --display-xl: clamp(3rem, 5vw, 4.6rem); /* hero h1 */ /* ── Type: leading ──────────────────────────────────── */ --leading-display: 1.1; /* big serif */ --leading-tight: 1.4; /* sub-heads, list items */ --leading-body: 1.7; /* prose */ /* ── Type: tracking (inverts with optical size) ─────── */ --tracking-display: -0.01em; /* large serif tightens */ --tracking-body: 0.02em; --tracking-caps: 0.18em; /* uppercase nav / buttons */ --tracking-label: 0.3em; /* tiny gold section labels */ /* ── Space: 4px base ────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-15: 60px; --space-16: 64px; --space-20: 80px; --space-25: 100px; --space-30: 120px; --space-32: 128px; /* ── Layout ─────────────────────────────────────────── */ --container: 1200px; /* standard section content width */ --container-narrow: 860px; /* centered prose blocks */ --gutter: var(--space-15); /* desktop side padding */ --gutter-mobile: var(--space-6); /* ≤849px side padding */ /* ── Motion ─────────────────────────────────────────── */ --duration-fast: 0.25s; /* hovers */ --duration-base: 0.35s; /* drawers, accordions */ --duration-slow: 0.8s; /* scroll reveals */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: ease; /* ── Elevation & edges ──────────────────────────────── */ --shadow-nav: 0 2px 24px rgba(26,23,20,0.06); --shadow-card: 0 8px 40px rgba(26,23,20,0.10); --radius-sm: 4px; /* the only radius — editorial style */ /* ── Z ladder ───────────────────────────────────────── */ --z-content: 2; --z-nav: 100; --z-drawer: 101; --z-burger: 102; --z-skip: 10000; } /* NOTE: no global text-wrap rules. This site hand-tunes headline breaks with viewport-specific
classes (br.mobile-break etc.) — algorithmic balancing fights that curation. Respect the manual breaks. */ /* ── Global keyboard focus ring ── */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }