/*
Global stylesheet — single source of truth for the site.
Structure:
1) Reset and base
2) Design tokens (:root) — palette and typography are owned by the
`brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
tokens are owned here.
3) Layout primitives
4) Components (site-wide reusable primitives only — page-specific
styles live with their page builds, not here)
5) Utilities
*/
/* Webfonts (brand-guidelines: Fraunces heading / Public Sans body). Loaded once
here so every page picks them up automatically via --font-heading/--font-body
without needing a per-page in . */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Public+Sans:wght@400;500;600;700&display=swap');
/* ===== 1) Reset and base ===== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: 1.2;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
`build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
transitions are owned here. */
:root {
/* Palette (brand-guidelines) */
--color-bg: #faf7fc;
--color-surface: #ffffff;
--color-surface-soft: #f2e9f7;
--color-text: #2e2438;
--color-text-soft: #6e6178;
--color-primary: #a982c2;
--color-primary-dark: #8a64a6;
--color-primary-light: #e9dcf2;
--color-accent: #d6a15c;
--color-focus: #a982c2;
--color-primary-deep: #241b30; /* brand-guidelines */
--color-primary-mid: #4a3860; /* brand-guidelines */
--color-primary-soft: #c9a8de; /* brand-guidelines */
/* Typography (brand-guidelines) */
--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Radii */
--radius-sm: 0.5rem;
--radius-md: 0.875rem;
--radius-lg: 1.25rem;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
--shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
--shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
/* Motion */
--transition-fast: 180ms ease;
--transition-base: 260ms ease;
/* Layout */
--container-max: 72rem;
/* Aesthetic dials — the `design-system` skill SETS these per brand to diverge
the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
a soft/rounded baseline; a brand's design stage should deliberately override
them so two brands don't look like the same template reskinned. */
--logo-height: 3.25rem; /* prominent by default — the logo is a brand asset, not chrome */
--logo-max-width: 22rem; /* generous, so wide wordmarks stay tall (not width-starved) */
--header-bg: var(--color-surface); /* header band — design-system may set a brand colour */
--header-fg: var(--color-text); /* header text/nav colour — flips for a coloured band */
--btn-radius: var(--radius-pill);
--card-radius: var(--radius-md);
--card-shadow: var(--shadow-sm);
--card-border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
--chip-radius: var(--radius-pill);
}
/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
:root { --logo-height: 4rem; }
}
/* ===== 3) Layout primitives ===== */
.container {
width: min(100% - 2rem, var(--container-max));
margin-inline: auto;
}
@media (max-width: 640px) {
/* The default 1rem total gutter (≈8px/side) is too tight for comfortable
mobile margins — widen it a bit on small screens, site-wide. */
.container { width: min(100% - 2.5rem, var(--container-max)); }
}
.section {
padding: var(--space-10) 0;
}
@media (max-width: 640px) {
.section { padding: var(--space-8) 0; }
}
.grid {
display: grid;
gap: var(--space-4);
}
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ===== 4) Components ===== */
/* Site header */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--header-bg);
color: var(--header-fg);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.site-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* The header logo is an 
whose REAL file is injected by the CMS
at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
(a generous --logo-height), so every logo renders at a consistent, prominent height
regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
only clamps a very wide logo on small screens (it then scales down proportionally, never
distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
height: auto;
width: auto;
max-height: var(--logo-height);
/* On narrow phones, a flat 55vw cap was clipping WIDE wordmark logos (like this
brand's ~5.3:1 mark) down to a fraction of --logo-height before the height dial
ever got a chance to apply — the real bottleneck was width, not height, so
bumping --logo-height alone did nothing visible on mobile. calc() reserves
space for the container gutters + hamburger icon instead of a flat vw guess,
so the logo can actually reach close to its intended height on small screens. */
max-width: min(var(--logo-max-width, 22rem), calc(100vw - 7rem));
object-fit: contain;
}
.site-nav {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
/* CMS-rendered menu — `{{menu.footer}}` expands to