:root { --color-ivory: #f7f2ea; --color-deep-teal: #24535a; --color-rust: #bc6a3e; --color-graphite: #232529; --color-pale-stone: #d8d2c7; --color-brass: #b6935b; --color-muted-ink: #626568; --color-teal-tint: #e3eceb; --color-page: var(--color-ivory); --color-surface: var(--color-ivory); --color-surface-muted: var(--color-pale-stone); --color-surface-highlight: var(--color-teal-tint); --color-surface-dark: var(--color-deep-teal); --color-text: var(--color-graphite); --color-text-muted: var(--color-muted-ink); --color-text-on-dark: var(--color-ivory); --color-border: var(--color-pale-stone); --color-border-dark: rgb(35 37 41 / 16%); --color-link: var(--color-deep-teal); --color-accent: var(--color-rust); --color-detail: var(--color-brass); --font-heading: "Fraunces", Georgia, serif; --font-body: "DM Sans", Arial, sans-serif; --text-label: 0.75rem; --text-small: 0.875rem; --text-base: 1rem; --text-lead: 1.125rem; --text-card-title: 1.5rem; --text-section-title: clamp(1.875rem, 3vw, 2rem); --text-display: clamp(2.5rem, 5vw, 3rem); --text-hero: clamp(2.75rem, 7vw, 4rem); --leading-label: 1.333; --leading-small: 1.429; --leading-base: 1.5; --leading-lead: 1.444; --leading-card-title: 1.208; --leading-section-title: 1.125; --leading-display: 1.042; --leading-hero: 1; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 5.5rem; --space-10: 7.5rem; --container-content: 75rem; --container-wide: 82.5rem; --container-padding: 1.5rem; --container-padding-mobile: 1rem; --section-space: clamp(3.5rem, 8vw, 7.5rem); --section-space-compact: clamp(2rem, 5vw, 4rem); --radius-sm: 0.25rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-pill: 999px; --shadow-floating: 0 8px 24px rgb(35 37 41 / 8%); --focus-ring: 0 0 0 3px rgb(188 106 62 / 35%); --transition-fast: 180ms ease-out; --transition-medium: 220ms ease-out; } *, *::before, *::after { box-sizing: border-box; } html { /* Horizontal-overflow guard. The mobile off-canvas menu (.site-header__navigation) stays in the DOM hidden only by transform: translateX(100%). A fixed box translated beyond the viewport still widens the document's scrollable area (scrollWidth = viewport + panel width), which is what creates the empty "slack" on the right of the page on mobile. overflow-x: hidden on does NOT fix this: it is propagated to the viewport, but the overflow region itself remains reachable (programmatic/focus scrolling). overflow-x: clip on the root truly removes the overflow and forbids scrolling into it. */ min-width: 20rem; overflow-x: hidden; /* fallback: browsers without clip support (Safari < 16) */ overflow-x: clip; scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { min-width: 20rem; min-height: 100vh; margin: 0; /* Second half of the horizontal-overflow guard (see html above). When stops being overflow: visible, 's own overflow is no longer propagated to the viewport, so body must clip the off-canvas drawer itself. */ overflow-x: hidden; /* fallback: browsers without clip support (Safari < 16) */ overflow-x: clip; background: var(--color-page); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-base); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:has(dialog[open]) { overflow: hidden; } main, header, footer, section, article, aside, nav, figure, form, fieldset { min-width: 0; } img, picture, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } img, video { height: auto; } img { font-style: italic; } svg { fill: currentColor; } iframe { border: 0; } button, input, select, textarea { color: inherit; font: inherit; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } textarea { min-height: 7rem; resize: vertical; } fieldset { margin: 0; padding: 0; border: 0; } legend { padding: 0; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } th, td { text-align: start; vertical-align: top; } a { color: var(--color-link); text-decoration-color: currentColor; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); } a:hover { text-decoration-thickness: 0.12em; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--color-deep-teal); color: var(--color-ivory); } h1, h2, h3, h4, h5, h6 { margin-block: 0 var(--space-4); color: var(--color-graphite); font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--text-hero); line-height: var(--leading-hero); } h2 { font-size: var(--text-display); line-height: var(--leading-display); } h3 { font-size: var(--text-section-title); line-height: var(--leading-section-title); } h4 { font-size: var(--text-card-title); line-height: var(--leading-card-title); } h5, h6 { font-family: var(--font-body); font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: 0; line-height: var(--leading-lead); } p { margin-block: 0 var(--space-4); } ul, ol { margin-block: 0 var(--space-4); padding-inline-start: 1.25rem; } ul ul, ul ol, ol ul, ol ol { margin-block: var(--space-2) 0; } blockquote { margin: 0 0 var(--space-5); padding-inline-start: var(--space-5); border-inline-start: 3px solid var(--color-brass); color: var(--color-deep-teal); font-family: var(--font-heading); font-size: var(--text-lead); line-height: var(--leading-lead); } hr { height: 1px; margin-block: var(--space-6); border: 0; background: var(--color-border); } figure { margin: 0 0 var(--space-5); } figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-small); } address { margin-block: 0 var(--space-4); font-style: normal; } dl { margin-block: 0 var(--space-4); } dt { font-weight: var(--weight-semibold); } dd { margin: 0 0 var(--space-3); } small { font-size: var(--text-small); line-height: var(--leading-small); } strong, b { font-weight: var(--weight-semibold); } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } code, kbd, samp { border-radius: var(--radius-sm); background: var(--color-surface-muted); padding: 0.1em 0.3em; font-size: 0.9em; } pre { margin-block: 0 var(--space-5); overflow: auto; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-graphite); color: var(--color-ivory); } pre code { padding: 0; background: transparent; color: inherit; } label { display: inline-block; margin-block-end: var(--space-2); color: var(--color-graphite); font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: var(--leading-small); } input, select, textarea { width: 100%; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-ivory); padding: 0.625rem 0.75rem; line-height: var(--leading-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } input::placeholder, textarea::placeholder { color: var(--color-muted-ink); opacity: 1; } input:hover, select:hover, textarea:hover { border-color: var(--color-brass); } input:focus, select:focus, textarea:focus { border-color: var(--color-deep-teal); outline: none; box-shadow: var(--focus-ring); } input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); opacity: 0.75; } input[type="checkbox"], input[type="radio"] { width: 1.125rem; min-height: 1.125rem; margin: 0; accent-color: var(--color-deep-teal); } input[type="file"] { padding: var(--space-2); } input[type="file"]::file-selector-button { margin-inline-end: var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--color-deep-teal); color: var(--color-ivory); padding: 0.5rem 0.75rem; font-weight: var(--weight-semibold); } input[type="number"] { appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; } input[type="search"] { appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { appearance: none; } summary { cursor: pointer; } summary::marker { color: var(--color-brass); } [hidden] { display: none !important; } .container, .container-wide { width: min(100% - (2 * var(--container-padding)), var(--container-content)); margin-inline: auto; } .container-wide { max-width: var(--container-wide); } .section { padding-block: var(--section-space); } .section-compact { padding-block: var(--section-space-compact); } .surface-muted { background: var(--color-surface-muted); } .surface-highlight { background: var(--color-surface-highlight); } .surface-dark { background: var(--color-surface-dark); color: var(--color-text-on-dark); } .surface-dark :is(h1, h2, h3, h4, h5, h6, label) { color: var(--color-graphite); } .surface-dark a { color: var(--color-ivory); } .surface-dark input, .surface-dark select, .surface-dark textarea { border-color: var(--color-border-dark); background: var(--color-ivory); color: var(--color-graphite); } .stack { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); } .stack-compact { gap: var(--space-3); } .stack-loose { gap: var(--space-6); } .stack > * { min-width: 0; } .stack > :last-child { margin-block-end: 0; } .cluster { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .cluster > * { min-width: 0; } .cluster-compact { gap: var(--space-2); } .cluster-loose { gap: var(--space-4); } .content-list { display: grid; gap: var(--space-2); margin-block: 0 var(--space-4); padding-inline-start: 1.25rem; } .content-list:last-child { margin-block-end: 0; } .card, .panel { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-5); } .card-large, .panel-large { border-radius: var(--radius-lg); padding: var(--space-6); } .card-elevated { box-shadow: var(--shadow-floating); } .card > :last-child, .panel > :last-child, .card-large > :last-child, .panel-large > :last-child { margin-block-end: 0; } .eyebrow { margin-block: 0 var(--space-2); color: var(--color-deep-teal); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.08em; line-height: var(--leading-label); text-transform: uppercase; } .surface-dark .eyebrow { color: var(--color-brass); } .button, .button-primary, .button-secondary { display: inline-flex; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.625rem 1.125rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.25; text-align: center; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .button:hover, .button-primary:hover, .button-secondary:hover { text-decoration: none; transform: translateY(-1px); } .button:active, .button-primary:active, .button-secondary:active { transform: translateY(0); } .button-primary { border-color: var(--color-rust); background: var(--color-rust); color: var(--color-ivory); } .button-primary:hover { border-color: var(--color-deep-teal); background: var(--color-deep-teal); color: var(--color-ivory); } .button-secondary { border-color: var(--color-deep-teal); background: transparent; color: var(--color-deep-teal); } .button-secondary:hover { background: var(--color-deep-teal); color: var(--color-ivory); } .surface-dark .button-secondary { border-color: var(--color-ivory); color: var(--color-ivory); } .surface-dark .button-secondary:hover { background: var(--color-ivory); color: var(--color-deep-teal); } .button:disabled, .button-primary:disabled, .button-secondary:disabled, .button[aria-disabled="true"], .button-primary[aria-disabled="true"], .button-secondary[aria-disabled="true"] { pointer-events: none; opacity: 0.55; transform: none; } .chip { display: inline-flex; min-width: 0; min-height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: transparent; padding: 0.375rem 0.75rem; color: var(--color-graphite); font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 1.2; } .notice { min-width: 0; border: 1px solid color-mix(in srgb, var(--color-deep-teal) 20%, transparent); border-radius: var(--radius-md); background: var(--color-teal-tint); padding: var(--space-4); color: var(--color-graphite); } .notice > :last-child { margin-block-end: 0; } .media-frame { overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-muted); } .media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; } .skip-link { position: fixed; z-index: 1000; top: var(--space-3); left: var(--space-3); transform: translateY(-200%); border-radius: var(--radius-sm); background: var(--color-graphite); padding: var(--space-3) var(--space-4); color: var(--color-ivory); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--transition-fast); } .skip-link:focus { transform: translateY(0); } @media (max-width: 47.99rem) { :root { --container-padding: var(--container-padding-mobile); } .card, .panel { padding: var(--space-4); } .card-large, .panel-large { padding: var(--space-5); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }