/* * base.css — Body, typography defaults, heading hierarchy, links * * Implements FONT_SPEC.md typography responsibilities. * References tokens from tokens.css. * Does not contain layout, component, or page-specific styles. */ /* ─── Body ─────────────────────────────────────────────── */ body { font-family: var(--font-sans); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--charcoal); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ─── Page body offset for fixed header ─────────────────── */ /* Applied to via WordPress body_class() — see layout.css for the .page-offset utility. Any page with a fixed header needs top padding equal to the header height. */ /* ─── Headings ─────────────────────────────────────────── */ /* FONT_SPEC: All H1/H2/H3 use Cormorant Garamond 600, line-height 1.1 */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: inherit; } /* H1 — page hero titles */ h1 { font-size: clamp(38px, 5vw, 62px); } /* H2 — section headings */ h2 { font-size: clamp(28px, 3.5vw, 46px); } /* H3 — card headings and sub-headings */ h3 { font-size: clamp(18px, 2vw, 22px); } /* H4–H6: inherit DM Sans body style (not used in theme templates) */ h4, h5, h6 { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.5; } /* ─── Paragraphs ───────────────────────────────────────── */ p { font-family: var(--font-sans); line-height: 1.7; margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* ─── Links ────────────────────────────────────────────── */ a { color: var(--green); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--gold); } /* ─── Strong / em ──────────────────────────────────────── */ strong { font-weight: 500; } em { font-style: italic; } /* Editorial italic in headings (Cormorant Garamond italic) */ h1 em, h2 em, h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--gold); } /* ─── WordPress Classic Editor content ─────────────────── */ /* Applies to .page-content__body and other areas where the_content() renders Classic Editor output. Restores margins stripped by reset.css. */ .page-content__body h1, .page-content__body h2, .page-content__body h3, .page-content__body h4, .page-content__body h5, .page-content__body h6 { margin-bottom: 0.75em; } .page-content__body p, .page-content__body ul, .page-content__body ol { margin-bottom: 1em; } .page-content__body ul, .page-content__body ol { list-style: revert; padding-left: 1.5em; } .page-content__body a { color: var(--green); text-decoration: underline; } .page-content__body a:hover { color: var(--gold); } /* ─── Images ───────────────────────────────────────────── */ img { max-width: 100%; height: auto; } /* ─── Horizontal rule ──────────────────────────────────── */ hr { border-top: 1px solid var(--cream-dark); margin: var(--space-md) 0; } /* ─── Selection ────────────────────────────────────────── */ ::selection { background-color: var(--gold); color: var(--green-dark); } /* ─── Focus visible ────────────────────────────────────── */ /* Preserve browser focus outlines for keyboard navigation. Only visible when using keyboard (not mouse click). */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ─── Screen reader only utility ────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Skip link ──────────────────────────────────────────── */ /* Hidden by default via .sr-only; revealed on keyboard focus. Must be the first focusable element in . Target:

*/ .skip-link { position: absolute; top: 0; left: 0; z-index: 9999; /* Hidden state — overridden below on focus */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none; } .skip-link:focus, .skip-link:focus-visible { width: auto; height: auto; padding: 0.875rem 1.5rem; margin: 0; overflow: visible; clip: auto; white-space: normal; background-color: var(--gold); color: var(--green-dark); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; outline: 2px solid var(--green-dark); outline-offset: 2px; }