/* =============================================
   BASE — tokens, reset, typography
   ============================================= */

:root {
    /* Palette */
    --c-bg:           #F5EFE3;
    --c-bg-warm:      #EFE5D2;
    --c-bg-deep:      #E8D9BE;
    --c-text:         #2B1F18;
    --c-text-soft:    #6B5648;
    --c-text-mute:    #8A7766;
    --c-burgundy:     #6B1F2B;
    --c-burgundy-dk:  #501320;
    --c-terracotta:   #C4632B;
    --c-ochre:        #E8B84A;
    --c-gold:         #B8935A;
    --c-olive-dk:     #2C3623;
    --c-rule:         rgba(43, 31, 24, 0.16);
    --c-rule-strong:  rgba(43, 31, 24, 0.32);
    --c-on-dark:      #F5EFE3;

    /* Type */
    --f-display:  'Cormorant Garamond', 'Times New Roman', serif;
    --f-body:     'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Scale */
    --fs-eyebrow:    0.78rem;
    --fs-body:       1.05rem;
    --fs-lead:       clamp(1.1rem, 1.05rem + 0.4vw, 1.25rem);
    --fs-h3:         clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --fs-h2:         clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
    --fs-display:    clamp(2.6rem, 1.6rem + 5vw, 5.8rem);
    --fs-display-sm: clamp(2.2rem, 1.5rem + 3.4vw, 4rem);

    /* Spacing */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3rem;
    --s-8:  4rem;
    --s-9:  6rem;
    --s-10: 8rem;

    /* Layout */
    --container:    78rem;
    --container-sm: 56rem;
    --container-xs: 40rem;
    --header-h:     92px;
    --radius:       2px;

    /* Easing & timing */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 220ms;
    --t-med:  420ms;
    --t-slow: 900ms;
}

@media (min-width: 960px) {
    :root { --header-h: 108px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--c-text);
    text-wrap: balance;
}
h1.display, .display {
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: 1;
}
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
p  { max-width: 65ch; text-wrap: pretty; }

.eyebrow {
    font-family: var(--f-body);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-burgundy);
    display: inline-block;
}

.lead { font-size: var(--fs-lead); color: var(--c-text-soft); }
em, .italic { font-style: italic; font-family: var(--f-display); }

::selection { background: var(--c-burgundy); color: var(--c-on-dark); }

/* Layout primitives */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.container-sm { max-width: var(--container-sm); }
.container-xs { max-width: var(--container-xs); }

.section {
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
    position: relative;
}
.section--tight { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.section--bg-warm { background: var(--c-bg-warm); }
.section--bg-deep { background: var(--c-bg-deep); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute;
    top: -40px;
    left: 16px;
    background: var(--c-burgundy);
    color: var(--c-on-dark);
    padding: 8px 14px;
    z-index: 1000;
    border-radius: 2px;
}
.skip-link:focus { top: 12px; }

/* Focus */
:focus-visible {
    outline: 2px solid var(--c-burgundy);
    outline-offset: 3px;
    border-radius: 2px;
}