:root {
        --cream: #161310;
        --paper: #0b0a09;
        --ink: #ead8bb;
        --terracotta: #b67a3e;
        --mustard: #d2a15d;
        --white: #f5ead8;
        --copper: #b67a3e;
        --copper-bright: #d4a264;
        --charcoal: #0b0a09;
        --charcoal-soft: #12100e;
        --ivory: #ead8bb;
        --muted: #aa967b;
        --font-display: "Cormorant Garamond", Georgia, serif;
        --font-body: "Montserrat", Arial, sans-serif;
}

body {
        background: radial-gradient(circle at 25% 10%, rgba(182, 122, 62, .055), transparent 28rem),
        linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
        var(--charcoal);
        background-size: auto, 4px 4px, auto;
        color: var(--ivory);
}

.site-header {
        border-bottom: 1px solid rgba(182, 122, 62, .55);
        background: rgba(11, 10, 9, .97);
        color: var(--ivory);
}

.site-header::after {
        position: absolute;
        right: max(5vw, 24px);
        bottom: 3px;
        left: max(5vw, 24px);
        height: 1px;
        background: rgba(182, 122, 62, .18);
        content: "";
}

.brand {
        color: var(--copper-bright);
        font-size: 1.55rem;
        letter-spacing: .06em;
        text-transform: uppercase;
}

.brand img {
        border: 1px solid var(--copper);
        filter: sepia(.4) saturate(.7);
}

.site-header nav {
        font-size: .72rem;
        letter-spacing: .13em;
        text-transform: uppercase;
}

.site-header nav > a:not(.nav-cta)::after {
        background: var(--copper-bright);
}

.nav-cta {
        border-color: var(--copper);
        color: var(--copper-bright);
}

.nav-cta:hover {
        background: var(--copper);
        color: #0b0a09;
}

.menu-toggle span:not(.sr-only) {
        background: var(--copper-bright);
}

.hero::after {
        position: absolute;
        inset: 14px;
        z-index: 2;
        border: 1px solid rgba(212, 162, 100, .58);
        box-shadow: inset 0 0 0 4px rgba(11, 10, 9, .28);
        content: "";
        pointer-events: none;
}

.hero-shade {
        background: linear-gradient(90deg, rgba(5, 4, 3, .92) 0%, rgba(5, 4, 3, .62) 50%, rgba(5, 4, 3, .35)),
        linear-gradient(0deg, rgba(5, 4, 3, .75), transparent 60%);
}

.hero-portrait {
        position: absolute;
        top: clamp(26px, 4vh, 50px);
        left: 50%;
        z-index: 4;
        width: clamp(150px, 12vw, 205px);
        aspect-ratio: .76;
        margin: 0;
        padding: 7px;
        border: 1px solid #e0b66f;
        border-radius: 50%;
        background: #0b0907;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .68);
        transform: translateX(-50%);
}

.hero-portrait img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center 25%;
        filter: sepia(.12) contrast(1.06);
}

.hero-content {
        z-index: 3;
}

.eyebrow {
        color: var(--copper-bright);
}

h1, h2 {
        font-weight: 600;
        letter-spacing: -.015em;
}

h1 {
        letter-spacing: .005em;
        text-shadow: 0 3px 30px #000;
}

h1 em {
        color: var(--copper-bright);
}

.hero-copy {
        color: #e4d8c5;
}

.button {
        letter-spacing: .08em;
        text-transform: uppercase;
}

.external-arrow {
        display: inline-block;
        position: relative;
        width: .72em;
        height: .72em;
        margin-left: .12em;
        vertical-align: .02em;
}

.external-arrow::before {
        position: absolute;
        top: 48%;
        left: 2%;
        width: 92%;
        height: 1px;
        background: currentColor;
        content: "";
        transform: rotate(-45deg);
        transform-origin: center;
}

.external-arrow::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 48%;
        height: 48%;
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor;
        content: "";
}

.button-primary {
        background: var(--copper);
        color: #0b0a09;
}

.button-primary:hover {
        background: var(--copper-bright);
}

.button-ghost {
        border-color: rgba(212, 162, 100, .72);
        color: var(--ivory);
}

.button-ghost:hover {
        background: var(--copper);
        color: #0b0a09;
}

.scroll-cue {
        z-index: 3;
        color: var(--copper-bright);
}

.scroll-cue span {
        background: var(--copper);
}

.intro,
.gallery-section,
.reservations,
.contact {
        position: relative;
        background: radial-gradient(circle at 80% 20%, rgba(182, 122, 62, .06), transparent 32rem),
        var(--charcoal-soft);
}

.intro::before,
.reservations::before,
.contact::before {
        position: absolute;
        top: 28px;
        right: max(5vw, 24px);
        left: max(5vw, 24px);
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--copper), transparent);
        content: "";
}

.intro {
        border-bottom: 1px solid rgba(182, 122, 62, .25);
}

.intro-mark {
        color: var(--copper-bright);
}

.intro-copy {
        color: #c9bba7;
}

.eyebrow.dark {
        color: var(--copper-bright);
}

.gallery-section {
        background-color: #0d0c0a;
}

.section-heading {
        border-bottom: 1px solid rgba(182, 122, 62, .28);
        padding-bottom: 34px;
}

.tabs {
        border-color: rgba(182, 122, 62, .35);
}

.tab {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: .72rem;
}

.tab.active {
        color: var(--copper-bright);
}

.tab.active::after {
        background: var(--copper-bright);
}

.gallery-grid {
        gap: 9px;
}

.gallery-item {
        background: #16120e;
}

.gallery-item::after {
        inset: 7px;
        border-color: rgba(212, 162, 100, .48);
}

.gallery-item img {
        filter: saturate(.82) contrast(1.05);
}

.quote-band {
        position: relative;
        border-top: 1px solid var(--copper);
        border-bottom: 1px solid var(--copper);
        background: radial-gradient(circle, rgba(182, 122, 62, .11) 1px, transparent 1px),
        #080706;
        background-size: 8px 8px;
        color: var(--ivory);
}

.quote-band::before,
.quote-band::after {
        position: absolute;
        right: 7%;
        left: 7%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212, 162, 100, .65), transparent);
        content: "";
}

.quote-band::before {
        top: 18px;
}

.quote-band::after {
        bottom: 18px;
}

.quote-band p {
        color: var(--copper-bright);
}

.quote-band blockquote {
        color: var(--ivory);
        font-weight: 500;
}

.reservations {
        background-color: #12100e;
}

.reservations-copy > p:not(.eyebrow) {
        color: #c8baa6;
}

.hours {
        border-color: rgba(182, 122, 62, .38);
}

.hours div {
        border-color: rgba(182, 122, 62, .25);
}

.hours dt {
        color: var(--copper-bright);
}

.button-reserve {
        border: 1px solid var(--copper);
        background: transparent;
        color: var(--copper-bright);
}

.button-reserve:hover {
        background: var(--copper);
        color: #0b0a09;
}

.reservations-poster {
        border: 1px solid var(--copper);
        box-shadow: 18px 20px 0 #0b0907, 20px 22px 0 var(--copper), 0 24px 55px rgba(0, 0, 0, .6);
}

.contact {
        background-color: #0b0a09;
}

.contact-heading .eyebrow::before,
.contact-heading .eyebrow::after {
        background: var(--copper);
}

.contact-detail {
        padding-top: 18px;
        border-top: 1px solid rgba(182, 122, 62, .36);
}

.contact-detail strong,
.contact-icon {
        color: var(--copper-bright);
}

.contact-detail p,
.contact-detail a {
        color: #d3c3ad;
}

.contact-map {
        border: 1px solid rgba(182, 122, 62, .7);
        background-color: #17130f;
        background-image: linear-gradient(30deg, transparent 49%, rgba(182, 122, 62, .17) 50%, transparent 51%),
        linear-gradient(120deg, transparent 49%, rgba(182, 122, 62, .12) 50%, transparent 51%);
}

.map-lines {
        border-color: rgba(182, 122, 62, .3);
}

.map-road {
        background: rgba(212, 162, 100, .14);
}

.pin {
        border-color: var(--copper-bright);
        background: #0b0a09;
}

.map-label {
        border: 1px solid var(--copper);
        background: #0b0a09;
        color: var(--ivory);
}

.map-link {
        border: 1px solid var(--copper);
        background: #0b0a09;
        color: var(--copper-bright);
}

.form-field label {
        color: var(--copper-bright);
}

.form-field input,
.form-field textarea {
        border-color: rgba(182, 122, 62, .48);
        background: #12100e;
        color: var(--ivory);
}

.form-field input:focus,
.form-field textarea:focus {
        border-color: var(--copper-bright);
        box-shadow: 0 0 0 3px rgba(182, 122, 62, .15);
}

.contact-submit {
        border: 1px solid var(--copper-bright);
        background: var(--copper);
        color: #090807;
}

.contact-submit:hover {
        background: var(--copper-bright);
}

.form-status {
        border-color: var(--copper);
        background: #17130f;
        color: var(--ivory);
}

.form-status.error {
        border-color: #ad5d45;
        background: #23130f;
}

footer {
        position: relative;
        border-top: 1px solid var(--copper);
        background: #070605;
        color: var(--ivory);
}

footer::before {
        position: absolute;
        top: 7px;
        right: max(5vw, 24px);
        left: max(5vw, 24px);
        height: 1px;
        background: rgba(182, 122, 62, .3);
        content: "";
}

footer .footer-brand {
        color: var(--copper-bright);
        letter-spacing: .08em;
        text-transform: uppercase;
}

footer p, footer small {
        color: var(--muted);
}

footer a:hover {
        color: var(--copper-bright);
}

@media (max-width: 800px) {
        .site-header nav {
                border-bottom: 1px solid var(--copper);
                background: #0b0a09;
        }

        .hero::after {
                inset: 8px;
        }

        .hero-content {
                margin-bottom: 34px;
        }

        .hero-portrait {
                top: 22px;
                width: 116px;
                padding: 5px;
        }
}

@media (max-width: 420px) {
        .hero-portrait {
                width: 104px;
        }
}

@media (max-width: 800px) and (max-height: 700px) {
        .hero-content {
                margin-bottom: 20px;
        }

        .hero-portrait {
                top: 16px;
                width: 90px;
        }
}