/* Self-hosted. The Google Fonts <link> put two extra handshakes and a
   render-blocking cross-origin stylesheet in front of first paint, and
   handed every visitor's IP to a third party. Same faces, served from
   this origin. Regenerate with vendor_fonts.py. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-sc-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-sc-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-sc-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-sc-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/eb-garamond-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   BALIYANG OUTDOORS — Shared Stylesheet
   Inherits the Baliyang family design language;
   shifted rugged, darker, earthier — still premium.
═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Core palette ── */
    --ink:        #131108;          /* deeper than Entertainment */
    --ink-mid:    #272318;
    --ink-light:  #4a4230;
    --mist:       #f0ece3;          /* slightly warmer */
    --stone:      #e3ddd2;
    --sage:       #5a6e4f;          /* deeper, more forest */
    --gold:       #7a5f38;          /* darker, more bark-toned */
    --gold-pale:  #a8885a;

    /* ── Outdoors-only accents ── */
    --bark:       #3d2e1a;          /* deep warm brown for dark sections */
    --bark-mid:   #5c4425;
    --pine:       #3a4e35;          /* forest green accent */
    --rust:       #8b4a2a;          /* hunting/autumn warmth */
    --clay:       #c4a882;          /* lighter warm neutral */

    /* ── Structural ── */
    --rule:       rgba(19,17,8,0.13);
    --rule-light: rgba(19,17,8,0.07);
    --rule-dark:  rgba(240,236,227,0.1);  /* for dark backgrounds */
    --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--mist);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav#main-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem;
    transition: border-color 0.5s, background 0.5s;
    border-bottom: 1px solid transparent;
}
nav#main-nav.scrolled {
    background: rgba(240,236,227,0.96);
    border-color: var(--rule);
    backdrop-filter: blur(8px);
}

/* Dark nav variant — used on pages with dark heroes */
nav#main-nav.nav-dark {
    background: transparent;
}
nav#main-nav.nav-dark .nav-wordmark,
nav#main-nav.nav-dark .nav-links > li > a {
    color: var(--mist);
}
nav#main-nav.nav-dark .nav-parent,
nav#main-nav.nav-dark .nav-back {
    color: var(--clay);
}
nav#main-nav.nav-dark.scrolled {
    background: rgba(19,17,8,0.94);
    border-color: var(--rule-dark);
}
nav#main-nav.nav-dark.scrolled .nav-wordmark,
nav#main-nav.nav-dark.scrolled .nav-links > li > a {
    color: var(--mist);
}

.nav-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nav-wordmark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}
.nav-parent {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-decoration: none;
    transition: color 0.2s;
}
/* Not a link any more: the top-left used to send people to baliyang.com. */
.nav-parent { cursor: default; }

.nav-back {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-back:hover { color: var(--gold); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    list-style: none;
}
.nav-links > li > a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-light);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--gold); }

/* ─── PAGE HERO (interior pages) ────────────────────────────── */
.page-hero {
    padding: 13rem 3.5rem 5.5rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
}

/* Subtle texture overlay on page heroes */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(58,78,53,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(122,95,56,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.page-kicker {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--gold-pale);
    text-transform: uppercase;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.7s 0.15s forwards;
}
.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
}
.page-title em { font-style: normal; color: inherit; }

/* ─── SECTION SHARED ATOMS ───────────────────────────────────── */
.section-kicker {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    color: var(--gold-pale);
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    display: block;
}

.section-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 1.25rem;
}
.section-heading em { font-style: normal; color: inherit; }

.section-body {
    font-size: 0.975rem;
    color: var(--ink-light);
    line-height: 1.9;
    margin-bottom: 1.2rem;
}
.section-body:last-child { margin-bottom: 0; }

/* ─── TEXT LINK ──────────────────────────────────────────────── */
.text-link {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.3rem;
    transition: color 0.2s, border-color 0.2s;
}
.text-link:hover {
    color: var(--gold);
    border-color: var(--gold-pale);
}
.text-link--light {
    color: var(--clay);
    border-bottom-color: rgba(196,168,130,0.3);
}
.text-link--light:hover {
    color: var(--mist);
    border-bottom-color: rgba(240,236,227,0.4);
}

/* ─── RULE DIVIDER ───────────────────────────────────────────── */
.rule-divider {
    width: 36px;
    height: 1px;
    background: var(--gold);
    margin: 2rem 0;
}
.rule-divider--light { background: var(--bark-mid); }

/* ─── DARK BAND (ink background sections) ────────────────────── */
.dark-band {
    background: var(--bark);
    color: var(--mist);
}
.dark-band--pine { background: var(--pine); }
.dark-band--ink  { background: var(--ink); }


/* ─── CARDS (rental listings, experience types) ──────────────── */
.card {
    background: var(--mist);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
    position: relative;
    border: 1px solid var(--rule);
    margin: -0.5px;
    overflow: hidden;
}
.card:hover { background: var(--stone); }

.card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    background: var(--stone);
    flex-shrink: 0;
}
.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}
.card:hover .card-photo img { transform: scale(1.03); }

.card-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(19,17,8,0.55) 0%, transparent 50%);
    pointer-events: none;
}

.card-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 2;
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(240,236,227,0.5);
    color: var(--mist);
    background: rgba(19,17,8,0.5);
    backdrop-filter: blur(4px);
}

.card-price {
    position: absolute;
    bottom: 1rem; left: 1.25rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--mist);
}
.card-price span {
    font-family: 'Cormorant SC', serif;
    font-size: 0.52rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(240,236,227,0.65);
    margin-left: 0.35rem;
}

.card-type-tag {
    position: absolute;
    bottom: 1rem; right: 1.25rem;
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(240,236,227,0.9);
    color: var(--ink);
    padding: 0.25rem 0.65rem;
}

.card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
}
.card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 0.3rem;
}
.card-address {
    font-size: 0.8rem;
    color: var(--ink-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1.25rem;
}
.card-specs {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: auto;
}
.card-spec {
    font-size: 0.8rem;
    color: var(--ink-light);
}
.card-spec strong {
    display: block;
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-pale);
    margin-bottom: 0.1rem;
}

.card-cta-hint {
    margin-top: 1.25rem;
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-pale);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
    transition: color 0.2s;
}
.card-cta-hint::after { content: '→'; transition: transform 0.2s; }
.card:hover .card-cta-hint { color: var(--gold); }
.card:hover .card-cta-hint::after { transform: translateX(4px); }

/* ─── CLOSER / CTA BAND ──────────────────────────────────────── */
.closer {
    background: var(--bark);
    padding: 7rem 3.5rem;
}
.closer-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.closer-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.2;
    color: var(--mist);
    margin-bottom: 2.5rem;
}
.closer-heading em { font-style: normal; color: inherit; }

.closer-link {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    text-decoration: none;
    border-bottom: 1px solid rgba(196,168,130,0.35);
    padding-bottom: 0.3rem;
    transition: color 0.2s, border-color 0.2s;
}
.closer-link:hover {
    color: var(--mist);
    border-color: rgba(240,236,227,0.3);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--rule);
    padding: 2.2rem 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mist);
}
.footer-mark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: var(--gold-pale);
    text-transform: uppercase;
}
.footer-copy {
    font-size: 0.75rem;
    font-family: 'EB Garamond', serif;
    color: var(--gold-pale);
    letter-spacing: 0.03em;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    to   { opacity: 1; }
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay classes — apply alongside .reveal for grouped elements */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.34s; }
.reveal-d4 { transition-delay: 0.46s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s !important; }
}

/* ─── FORM ATOMS ─────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}
.form-group label {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.6rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.7rem 0.5rem;
    color: var(--ink);
    outline: none;
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s;
    border-radius: 0;
    appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-bottom-color: var(--gold); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gold-pale); font-style: italic; }
.form-group select { cursor: pointer; color: var(--ink-light); }
.form-group select:focus { color: var(--ink); }

.btn-submit {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: none;
    color: var(--ink);
    border: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.3rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.btn-submit:hover:not(:disabled) {
    color: var(--gold);
    border-color: var(--gold-pale);
}
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.form-status {
    display: none;
    padding: 0.75rem 0;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.form-status.success { color: var(--sage); }
.form-status.error   { color: #8b3220; }

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    nav#main-nav { padding: 1.25rem 1.5rem; }
    .nav-links { gap: 1.8rem; }
    .page-hero { padding: 9rem 1.5rem 4rem; }
    footer {
        flex-direction: column;
        gap: 0.6rem;
        padding: 1.8rem 1.5rem;
        text-align: center;
    }
    .closer { padding: 5rem 1.5rem; }
}

/* Headings: no italic accent, titles read as one voice */
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* ─── MOBILE NAV ─────────────────────────────────────────────── */
/* Hidden above 768px; the media query below swaps .nav-links for it. */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink);
}
.hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
nav#main-nav.nav-dark .hamburger { color: var(--mist); }
nav#main-nav.nav-dark.scrolled .hamburger { color: var(--mist); }

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;                 /* under the nav (100) so the toggle stays clickable */
    background: var(--mist);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    padding: 5rem 1.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mm-group {
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    color: var(--gold-pale, var(--gold));
    margin-bottom: -1.4rem;
}

/* Must come after the .hamburger component above: same specificity, so source
   order decides. Putting this in an earlier @media block let `display:none`
   win and the toggle never appeared. */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
}

/* ─── MOBILE NAV: solid, not translucent ─────────────────────── */
/* Scrolled, the nav was rgba(...,0.96) + blur(8px). On a phone that is enough
   for page text to ghost through the bar, so it never reads as attached to the
   section beneath. Matching the section colour exactly, with no blur, makes the
   bar and the page read as one surface. Desktop keeps the translucent version. */
@media (max-width: 768px) {
    nav#main-nav.scrolled {
        background: var(--mist);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    nav#main-nav.nav-dark.scrolled {
        background: var(--ink);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Menu open: the overlay is light, so a dark-hero nav has to drop its light
   colours or the X and the wordmark disappear into it. Measured 1.0 contrast
   against the overlay before this existed. */
nav#main-nav.menu-open {
    background: var(--mist);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
nav#main-nav.nav-dark.menu-open .nav-wordmark,
nav#main-nav.nav-dark.menu-open .hamburger { color: var(--ink); }
nav#main-nav.nav-dark.menu-open .nav-parent,
nav#main-nav.nav-dark.menu-open .nav-back { color: var(--gold-pale); }