/* --- Design System --- */ :root { color-scheme: light; /* Decorative brand tints — backgrounds and washes only, never text or borders that need to meet a contrast ratio. */ --color-blush: #ff9a9e; --color-blush-soft: #fbc2eb; --color-lilac: #a18cd1; /* Action colours. All of these clear 4.5:1 against white, so white text sits on them safely (the old #ff9a9e buttons were ~2:1). */ --color-primary: #c04c58; --color-primary-dark: #a63b46; --color-secondary: #6b52a3; --color-secondary-dark: #574289; --color-bg: #fdfbf7; /* Warm white/cream */ --color-bg-alt: #ffffff; --color-text: #4a4a4a; --color-text-light: #6b6b6b; /* 5.2:1 on --color-bg */ --color-heading: #2d2d2d; --color-border: #e6e2dd; --color-white: #ffffff; /* Typography */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; /* 8rem top+bottom stacked to 256px of dead space between sections */ --spacing-xl: 6rem; /* Border Radius */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 32px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Transitions */ --transition: all 0.3s ease; } /* --- Reset & Base Styles --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; /* Keeps anchored sections clear of the fixed header without JS. */ scroll-padding-top: 90px; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.2; margin-bottom: var(--spacing-sm); } p { margin-bottom: var(--spacing-sm); } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; display: block; } /* --- Focus visibility --- */ :focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--color-secondary); color: var(--color-white); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Utilities --- */ .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-sm); } .text-center { text-align: center; } .section { padding: var(--spacing-xl) 0; } /* Content sections sit on white; the cream page background is reserved for the hero and the contact block, so the rhythm reads the same on every page. */ .section--alt { background-color: var(--color-white); } .section-header { margin-bottom: var(--spacing-lg); max-width: 700px; margin-left: auto; margin-right: auto; } .section-title { font-size: 2.5rem; position: relative; display: inline-block; } .section-subtitle { font-size: 1.125rem; color: var(--color-text-light); margin-top: var(--spacing-xs); } .note { font-size: 0.875rem; color: var(--color-text-light); margin-top: var(--spacing-md); } /* Reveal-on-scroll. Gated behind .js (set by an inline script in ) so the content is visible by default and never flashes out on slow JS. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js .reveal.visible { opacity: 1; transform: none; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-family: inherit; font-size: 1rem; font-weight: 500; /*