/* Sienna — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ /* Fonts are linked from each page's (with preconnect) rather than imported here. */ :root { /* Roles. A warm-white ground, ink that is brown-black rather than neutral, and one accent: sienna. Everything else is a tint of these. */ --color-bg: #f8f3ed; --color-surface: #fffefb; --color-shell: #eee3d8; --color-text: #241f1b; --color-muted: #6e645b; --color-body: #574f48; --color-accent: #a34f32; --color-accent-2: #6b7150; --color-divider: #e3d8cd; --color-divider-strong: #cbbcae; --color-success: #4f6b4a; --color-danger: #a3322a; /* Tonal ramps — one shared OKLCH lightness scale, so the same step of any role carries the same visual weight. 100–300 for tinted fills, hovers and borders; 500–600 as the base; 700–900 for text on tints and pressed states. */ --color-neutral-100: #faf6f1; --color-neutral-200: #eee7de; --color-neutral-300: #ded4c8; --color-neutral-400: #c4b8aa; --color-neutral-500: #a2968a; --color-neutral-600: #82766b; --color-neutral-700: #635a51; --color-neutral-800: #453e38; --color-neutral-900: #2a2521; --color-accent-100: #fdf4f0; --color-accent-200: #f9e3d9; --color-accent-300: #f2c9b7; --color-accent-400: #e5a288; --color-accent-500: #c86a48; --color-accent-600: #a34f32; --color-accent-700: #833c24; --color-accent-800: #5f2b19; --color-accent-900: #3c1d12; --color-accent-2-100: #f4f6ef; --color-accent-2-200: #e5e9da; --color-accent-2-300: #ccd3bb; --color-accent-2-400: #a8b291; --color-accent-2-500: #808a68; --color-accent-2-600: #6b7150; --color-accent-2-700: #54593e; --color-accent-2-800: #3c402c; --color-accent-2-900: #26291c; /* Type. A high-contrast serif for display only; a humanist sans carries every word a reader actually reads. Never set body copy in the serif. */ --font-heading: "Playfair Display", Georgia, 'Times New Roman', serif; --font-heading-weight: 500; --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --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; --radius-sm: 7px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; /* Elevation — a hairline contact shadow plus one wide, soft, warm-tinted ambient layer. Cards lift; nothing floats hard. */ --shadow-sm: 0 1px 2px rgb(60 40 28 / 0.05); --shadow-md: 0 1px 2px rgb(60 40 28 / 0.04), 0 10px 24px -12px rgb(60 40 28 / 0.16); --shadow-lg: 0 1px 2px rgb(60 40 28 / 0.04), 0 18px 40px -18px rgb(60 40 28 / 0.2); --shadow-accent: 0 10px 22px -10px rgb(163 79 50 / 0.5); } /* ══════════════════════════════════════════════════════════════════════════ Base ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 var(--space-3); color: var(--color-text); } h1 { font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; } h2 { font-size: 38px; letter-spacing: -0.015em; } h3 { font-size: 27px; } h4 { font-size: 21px; line-height: 1.3; letter-spacing: 0; } h5 { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.4; letter-spacing: 0; } h6 { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); } em { font-style: italic; } p { margin: 0 0 var(--space-4); color: var(--color-body); } a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--color-accent-800); text-decoration: underline; } strong { font-weight: 600; color: var(--color-text); } small { font-size: 13px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 13px; margin-top: var(--space-2); color: var(--color-muted); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--color-accent-200); } /* — editorial helpers — */ .eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-4); } .lede { font-size: 19px; line-height: 1.6; color: var(--color-body); max-width: 46ch; } .text-muted { color: var(--color-muted); } .accent { color: var(--color-accent); } /* Display emphasis: Playfair's true italic, which the serif actually ships. */ .display-em { font-style: italic; color: var(--color-accent); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-10) 0; background: var(--color-divider); } /* — figures — Photographs keep their colour; the system is warm enough that draining them fights the palette. The frame is what makes them feel placed. */ .figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-shell); } .figure img { width: 100%; height: auto; } /* ══════════════════════════════════════════════════════════════════════════ Components ══════════════════════════════════════════════════════════════════════════ */ /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; text-decoration: none; white-space: nowrap; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1.2; letter-spacing: 0.01em; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: 13px var(--space-6); border-radius: var(--radius-pill); transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .btn svg { display: block; } .btn:hover { text-decoration: none; } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-primary { background: var(--color-accent); color: var(--color-surface); box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--color-accent-700); color: var(--color-surface); } .btn-primary:active { background: var(--color-accent-800); box-shadow: var(--shadow-sm); } .btn-secondary { border-color: var(--color-divider-strong); background: var(--color-surface); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: var(--color-neutral-500); background: var(--color-neutral-100); color: var(--color-text); } .btn-secondary:active { background: var(--color-neutral-200); } .btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-3); } .btn-ghost:hover { background: var(--color-accent-100); color: var(--color-accent-800); } .btn-ghost:active { background: var(--color-accent-200); } .btn-icon { width: 44px; height: 44px; padding: 0; } .btn-block { width: 100%; } .btn-lg { font-size: 15.5px; padding: 16px var(--space-8); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 500; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.02em; padding: 5px var(--space-3); border-radius: var(--radius-pill); } .tag-accent { background: var(--color-accent-200); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-divider-strong); color: var(--color-muted); } /* — forms — */ .field > label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; margin-bottom: 6px; color: var(--color-body); } .input { width: 100%; min-height: 46px; padding: 11px var(--space-4); font: inherit; font-size: 15px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color 140ms ease, box-shadow 140ms ease; } .input::placeholder { color: var(--color-neutral-500); } .input:hover { border-color: var(--color-neutral-500); } .input:focus-visible { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-200); } textarea.input { min-height: 116px; resize: vertical; line-height: 1.6; } .field-hint { font-size: 13px; color: var(--color-muted); margin: 6px 0 0; } .field-error { font-size: 13px; color: var(--color-danger); margin: 6px 0 0; } .radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 15px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider-strong); background: var(--color-surface); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-surface); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--color-neutral-200); border-radius: var(--radius-pill); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--space-4); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius-pill); color: var(--color-body); } .seg-opt:has(input:checked) { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); } .seg-opt:not(:has(input:checked)):hover { color: var(--color-text); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); } .card-kicker { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 1.2; } .card-body { margin: 0; font-size: 15px; color: var(--color-body); flex: 1; } .card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-muted); } .card-quiet { background: var(--color-neutral-100); box-shadow: none; } .card-accent { background: var(--color-accent-100); border-color: var(--color-accent-200); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-divider); } .nav-brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; letter-spacing: 0.005em; color: var(--color-text); text-decoration: none; } .nav-brand:hover { color: var(--color-text); text-decoration: none; } .nav-mark { width: 1.1em; height: 1.1em; } /* :not(.btn) — a button inside the nav keeps its own variant colour; without the guard these rules outrank .btn-primary and paint its label body-brown. */ .nav a:not(.btn) { color: var(--color-body); text-decoration: none; font-size: 14.5px; font-weight: 500; } .nav a:not(.btn):hover, .nav a:not(.btn)[aria-current='page'], .nav a:not(.btn)[aria-current='location'] { color: var(--color-accent-700); text-decoration: none; } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 15px; } .table th { text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider-strong); } .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); color: var(--color-body); } .table tbody tr:hover { background: var(--color-neutral-100); } .table tbody tr:last-child td { border-bottom: 0; } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); } .dialog { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.2; } .dialog-body { font-size: 15px; color: var(--color-body); margin: 0; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }