:root {
    --ink: #171717;
    --muted: #6f6a63;
    --paper: #fbfaf7;
    --white: #fff;
    --cream: #f2eee6;
    --gold: #b68b4b;
    --gold-deep: #8f672f;
    --gold-soft: #d9bd8b;
    --line: #e7e0d5;
    --shadow: 0 20px 60px rgba(32, 25, 17, .10);
    --radius: 22px;
    --container: 1240px;
    --ease: cubic-bezier(.2, .75, .25, 1);
    --font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    --serif: var(--font-family)
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../assets/fonts/manrope-latin-variable.woff2") format("woff2")
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-family);
    line-height: 1.6
}

body,
body * {
    font-family: var(--font-family) !important
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

button,
input,
select,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: auto
}

.section {
    padding: 92px 0
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: var(--gold-deep);
    font-weight: 800
}

.serif {
    font-family: var(--font-family)
}

.display {
    font-family: var(--font-family);
    font-size: clamp(3.2rem, 7vw, 7rem);
    line-height: .86;
    font-weight: 500;
    letter-spacing: -.035em
}

.section-title {
    font-family: var(--font-family);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: .95;
    margin: .25rem 0 1rem;
    font-weight: 500
}

.section-copy {
    max-width: 620px;
    color: var(--muted)
}