/* xl - DESKTOP STYLES */ 
/* ── VARIABLES ── */
:root {
    --cream: #f5ede0;
    --cream-dark: #e8d9c5;
    --brown: #5c3d1e;
    --brown-mid: #8b5e34;
    --brown-light: #c4956a;
    --brown-pale: #d4b896;
    --orange: #933C24;
    --text-dark: #2e1a0e;
    --text-mid: #5a3a1a;
    --text-light: #8b6a4a;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Epilogue', sans-serif;
    background: var(--cream);
    color: var(--text-dark);
    overflow-x: visible;
}

/* ── BUTTONS ── */
.btn {
    display: inline-block;
    padding: 13px 28px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: all .25s;
    cursor: pointer;
    border: none;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #a85522; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,107,46,.35); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ── SECTION TITLE ── */
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: .5px;
}
.section-title .divider {
    display: block;
    width: 50px;
    height: 3px;
    background: var(--orange);
    margin: 14px auto 0;
    border-radius: 2px;
}

body.no-scroll {
    overflow: hidden;
}