:root {
    --ink-950: #10231d;
    --ink-800: #1d3c31;
    --ink-700: #2b5143;
    --ink-600: #52695f;
    --ink-500: #708078;
    --cream-50: #fffcf5;
    --cream-100: #f7f3e8;
    --cream-200: #ebe4d4;
    --white: #ffffff;
    --forest-900: #123b2a;
    --forest-800: #15513a;
    --forest-700: #1f704d;
    --sage-100: #e5f0e9;
    --sage-200: #cee0d4;
    --gold-600: #b87b1c;
    --gold-500: #d59c34;
    --gold-300: #f4d68c;
    --coral-100: #fff0e9;
    --danger: #a33322;
    --shadow-sm: 0 8px 24px rgba(18, 59, 42, .07);
    --shadow-md: 0 20px 50px rgba(18, 59, 42, .12);
    --shadow-lg: 0 30px 80px rgba(18, 59, 42, .17);
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
    --content-width: 1180px;
    --font-body: "DM Sans", "Segoe UI", sans-serif;
    --font-display: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--cream-50);
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
}

body.nav-open { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4, p { margin-top: 0; }

h1, h2, h3, h4 {
    color: var(--ink-950);
    line-height: 1.15;
}

h1, h2 { font-family: var(--font-display); }

::selection { background: var(--gold-300); color: var(--ink-950); }

.skip-link {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 100;
    padding: .75rem 1rem;
    border-radius: 0 0 10px 10px;
    background: var(--white);
    color: var(--forest-900);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.skip-link:focus { top: 0; }

:focus-visible {
    outline: 3px solid var(--gold-500);
    outline-offset: 3px;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
