/* ===========================================================================
   Mistfall Retreat — Darjeeling
   Editorial resort styling: full-bleed imagery, serif display type,
   generous whitespace, gold hairline accents.
   ======================================================================== */

:root {
    --ink:        #12201b;
    --ink-soft:   #1b2b25;
    --forest:     #1e3a30;
    --moss:       #2f5546;
    --gold:       #c8a24a;
    --gold-soft:  #e0c485;
    --sand:       #f4efe6;
    --cream:      #fbf9f4;
    --line:       #e2dacb;
    --muted:      #7f8a83;
    --text:       #33413b;

    --display: 'Cormorant Garamond', Georgia, serif;
    --ui:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --wrap: 1280px;
    --gut:  clamp(20px, 5vw, 64px);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font: 300 16px/1.75 var(--ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 300;
    line-height: 1.12;
    color: var(--ink);
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(40px, 6vw, 78px); }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }

p { margin: 0 0 1.15em; }

::selection { background: var(--gold); color: #fff; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 860px; }

.section { padding: clamp(72px, 10vw, 140px) 0; }
.section--tight { padding: clamp(52px, 7vw, 92px) 0; }
.section--dark { background: var(--ink); color: #cfd8d3; }
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--sand { background: var(--sand); }

.grid { display: grid; gap: clamp(24px, 3vw, 44px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------- typography */

.eyebrow {
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 400;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--gold);
    flex: none;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--gold);
}

.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.85; color: var(--muted); }
.center { text-align: center; }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
    white-space: nowrap;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Understated text link with an animated rule */
.link-u {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gold);
    transition: color .3s var(--ease), gap .3s var(--ease);
}
.link-u:hover { color: var(--gold); gap: 16px; }
.section--dark .link-u { color: var(--cream); }

/* ----------------------------------------------------------------- header */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    padding: 24px 0;
    transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
    font-family: var(--display);
    font-size: 27px;
    letter-spacing: .04em;
    color: #fff;
    transition: color .45s var(--ease);
}
.brand__sub {
    font-size: 8.5px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 6px;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav a {
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    position: relative;
    padding: 6px 0;
    transition: color .3s var(--ease);
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width .35s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav a:hover, .nav a.is-active { color: var(--gold); }

/* Solid state once scrolled, or on interior pages */
.site-header.is-solid,
.site-header.is-static {
    background: var(--cream);
    padding: 14px 0;
    box-shadow: 0 1px 0 var(--line);
}
.site-header.is-solid .brand__name,
.site-header.is-static .brand__name { color: var(--ink); }
.site-header.is-solid .nav a,
.site-header.is-static .nav a { color: var(--ink); }
.site-header.is-solid .nav a:hover,
.site-header.is-static .nav a:hover { color: var(--gold); }
.site-header.is-solid .nav-toggle span,
.site-header.is-static .nav-toggle span { background: var(--ink); }

.nav-toggle {
    display: none;
    width: 30px; height: 20px;
    background: none; border: 0; padding: 0;
    position: relative; cursor: pointer;
}
.nav-toggle span {
    position: absolute; left: 0;
    width: 100%; height: 1.5px;
    background: #fff;
    transition: transform .35s var(--ease), opacity .25s var(--ease), background .45s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 16px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 9s linear;
}
.hero__slide.is-active img { transform: scale(1.16); }
.hero__slides::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,20,16,.62) 0%, rgba(10,20,16,.28) 42%, rgba(10,20,16,.82) 100%);
}

.hero__inner { position: relative; z-index: 3; width: 100%; padding: 140px 0 220px; }
.hero__eyebrow {
    font-size: 11px; letter-spacing: .42em; text-transform: uppercase;
    color: var(--gold-soft); margin-bottom: 26px;
}
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .28em; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero__text { max-width: 46ch; color: rgba(255,255,255,.86); font-size: 17px; margin-bottom: 38px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__dots {
    position: absolute; left: var(--gut); bottom: 150px;
    display: flex; gap: 12px; z-index: 4;
}
.hero__dots button {
    width: 34px; height: 2px; padding: 0; border: 0; cursor: pointer;
    background: rgba(255,255,255,.35); transition: background .3s var(--ease);
}
.hero__dots button.is-active { background: var(--gold); }

.hero__scroll {
    position: absolute; right: var(--gut); bottom: 150px; z-index: 4;
    writing-mode: vertical-rl;
    font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: flex; align-items: center; gap: 14px;
}
.hero__scroll::after {
    content: ''; width: 1px; height: 60px;
    background: linear-gradient(rgba(255,255,255,.6), transparent);
}

/* Compact hero for interior pages */
.page-hero {
    position: relative;
    min-height: 62vh;
    display: flex; align-items: flex-end;
    color: #fff;
    overflow: hidden;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,20,16,.55), rgba(10,20,16,.8));
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(48px, 7vw, 90px); }
.page-hero h1 { color: #fff; margin-bottom: .2em; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; }
.crumbs {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.6); margin-bottom: 20px;
}
.crumbs a:hover { color: var(--gold); }
.crumbs span { color: var(--gold); }

/* ---------------------------------------------------------- booking strip */

.book-strip {
    position: relative;
    z-index: 20;
    margin-top: -78px;
    margin-bottom: 0;
}
.book-strip__inner {
    background: var(--cream);
    box-shadow: 0 26px 70px rgba(18, 32, 27, .16);
    padding: 30px clamp(22px, 3vw, 40px);
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 0;
    align-items: end;
}
.book-strip--inline { margin-top: 0; }
.book-strip--inline .book-strip__inner { box-shadow: 0 12px 40px rgba(18,32,27,.09); border: 1px solid var(--line); }

.field { padding: 0 clamp(14px, 1.8vw, 26px); border-right: 1px solid var(--line); }
.field:first-child { padding-left: 0; }
.field label {
    display: block;
    font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 9px;
}
.field input, .field select {
    width: 100%;
    border: 0; background: none; padding: 0 0 2px;
    font-family: var(--display);
    font-size: 20px;
    color: var(--ink);
    cursor: pointer;
}
.field input:focus, .field select:focus { outline: none; color: var(--gold); }
.field select { appearance: none; }
.book-strip__inner .btn { margin-left: clamp(14px, 1.8vw, 26px); padding: 18px 30px; }

/* Standalone form fields (booking / contact) */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 9px;
}
.form-field input, .form-field select, .form-field textarea {
    border: 1px solid var(--line);
    background: #fff;
    padding: 14px 16px;
    font-size: 15px;
    transition: border-color .3s var(--ease);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--gold);
}
.form-field .hint { font-size: 12px; color: var(--muted); margin-top: 7px; }

/* --------------------------------------------------------------- notices */

.notice {
    padding: 15px 20px;
    border-left: 3px solid var(--gold);
    background: var(--sand);
    font-size: 14.5px;
    margin-bottom: 20px;
}
.notice--error   { border-color: #a8443c; background: #fbeeec; color: #7d2f28; }
.notice--success { border-color: #3f7a5c; background: #eef6f1; color: #245740; }

/* ---------------------------------------------------------------- toasts */

.toasts {
    position: fixed; top: 96px; right: var(--gut); z-index: 800;
    display: flex; flex-direction: column; gap: 10px;
    width: min(360px, calc(100vw - 40px));
}
.toast {
    background: var(--ink); color: var(--cream);
    padding: 15px 44px 15px 20px;
    font-size: 14px; line-height: 1.5;
    box-shadow: 0 18px 44px rgba(18,32,27,.24);
    position: relative;
    border-left: 3px solid var(--gold);
    animation: fade .5s var(--ease);
}
.toast--error   { border-left-color: #c1584e; }
.toast--success { border-left-color: #4f9a72; }
.toast button {
    position: absolute; top: 8px; right: 12px;
    background: none; border: 0; color: inherit;
    font-size: 20px; line-height: 1; cursor: pointer; opacity: .6;
}
.toast button:hover { opacity: 1; }

/* ------------------------------------------------------------- room cards */

.room-card { background: var(--cream); display: flex; flex-direction: column; }
.room-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.room-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.room-card:hover .room-card__media img { transform: scale(1.07); }
.room-card__price {
    position: absolute; left: 0; bottom: 0;
    background: var(--cream); color: var(--ink);
    padding: 12px 20px;
    font-family: var(--display); font-size: 21px;
}
.room-card__price small {
    font-family: var(--ui); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); margin-left: 5px;
}
.room-card__tag {
    position: absolute; top: 16px; right: 16px;
    background: rgba(18,32,27,.82); color: #fff;
    font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
    padding: 7px 13px;
}
.room-card__tag--out { background: rgba(140,60,52,.9); }
.room-card__tag--few { background: rgba(200,162,74,.95); color: var(--ink); }

.room-card__body { padding: 26px 0 0; display: flex; flex-direction: column; flex: 1; }
.room-card__body h3 { margin-bottom: 8px; }
.room-card__meta {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
}
.room-card__meta span { display: flex; align-items: center; gap: 7px; }
.room-card__meta span + span::before {
    content: ''; width: 3px; height: 3px; background: var(--gold); border-radius: 50%;
}
.room-card__desc { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; flex: 1; }
.room-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------------------------------------------------- split feature block */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--stack { padding: 0 0 60px 60px; }
.split__media--stack .split__inset {
    position: absolute; left: 0; bottom: 0;
    width: 52%; aspect-ratio: 1;
    border: 8px solid var(--cream);
}
.split__media--stack .split__inset img { aspect-ratio: 1; height: 100%; }
.split__body { max-width: 520px; }

/* Decorative stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 46px; }
.stat__num { font-family: var(--display); font-size: 44px; color: var(--gold); line-height: 1; }
.stat__label {
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); margin-top: 10px;
}

/* -------------------------------------------------------------- amenities */

.amenity { text-align: center; padding: 40px 24px; border: 1px solid var(--line); background: var(--cream);
           transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.amenity:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-6px); }
.amenity:hover h3, .amenity:hover p { color: var(--cream); }
.amenity__icon { width: 40px; height: 40px; margin: 0 auto 20px; color: var(--gold); }
.amenity__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
.amenity h3 { font-size: 21px; margin-bottom: 8px; transition: color .4s var(--ease); }
.amenity p { font-size: 14px; color: var(--muted); margin: 0; transition: color .4s var(--ease); }

/* Amenity chips on the room detail page */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    padding: 9px 16px; border: 1px solid var(--line); color: var(--muted);
}

/* ---------------------------------------------------------------- gallery */

.masonry { columns: 3; column-gap: 16px; }
.masonry figure { margin: 0 0 16px; break-inside: avoid; position: relative; overflow: hidden; cursor: pointer; }
.masonry img { width: 100%; transition: transform 1.1s var(--ease); }
.masonry figure:hover img { transform: scale(1.06); }
.masonry figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 40px 20px 18px;
    background: linear-gradient(transparent, rgba(10,20,16,.85));
    color: #fff; font-size: 12.5px; letter-spacing: .1em;
    opacity: 0; transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.masonry figure:hover figcaption { opacity: 1; transform: none; }

.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.gallery-filter button {
    background: none; border: 1px solid var(--line); cursor: pointer;
    padding: 10px 22px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); transition: all .3s var(--ease);
}
.gallery-filter button.is-active, .gallery-filter button:hover {
    background: var(--ink); border-color: var(--ink); color: #fff;
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(10,20,16,.95);
    display: none; align-items: center; justify-content: center;
    padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox__close {
    position: absolute; top: 26px; right: 30px;
    background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}
.lightbox__cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 13px; }

/* ----------------------------------------------------------- testimonials */

.quotes { position: relative; text-align: center; max-width: 860px; margin: 0 auto; }
.quote { display: none; }
.quote.is-active { display: block; animation: fade .8s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quote__stars { color: var(--gold); letter-spacing: .3em; margin-bottom: 26px; font-size: 14px; }
.quote__text {
    font-family: var(--display); font-size: clamp(22px, 2.8vw, 34px);
    line-height: 1.5; font-style: italic; color: var(--cream); margin-bottom: 30px;
}
.quote__who { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.quote__where { font-size: 12px; color: var(--muted); margin-top: 8px; letter-spacing: .1em; }
.quotes__nav { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
.quotes__nav button {
    width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold);
    background: none; cursor: pointer; padding: 0; transition: background .3s var(--ease);
}
.quotes__nav button.is-active { background: var(--gold); }

/* -------------------------------------------------------------- CTA strip */

.cta-band { position: relative; padding: clamp(90px, 12vw, 160px) 0; color: #fff; text-align: center; overflow: hidden; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: rgba(10,20,16,.68); }
.cta-band__inner { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 18ch; margin: 0 auto .4em; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 50ch; margin: 0 auto 34px; }

/* ------------------------------------------------------------------ table */

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.table th {
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
}
.table tbody tr:hover { background: var(--sand); }

/* Booking summary panel */
.summary { background: var(--sand); padding: 32px; position: sticky; top: 110px; }
.summary__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; margin-bottom: 22px; }
.summary h3 { font-size: 24px; margin-bottom: 4px; }
.summary__sub { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.summary__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.summary__row span:first-child { color: var(--muted); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-top: 6px; }
.summary__total span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.summary__total strong { font-family: var(--display); font-size: 34px; font-weight: 400; color: var(--ink); }

/* Status pills */
.pill {
    display: inline-block; padding: 6px 14px;
    font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
}
.pill--pending   { background: #fdf3dc; color: #8a6a1c; }
.pill--confirmed { background: #e6f2ea; color: #2c6248; }
.pill--cancelled { background: #fbeaea; color: #8d3630; }
.pill--completed { background: #eceff1; color: #4c5a63; }

/* ----------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: #93a29a; padding: clamp(64px, 8vw, 110px) 0 0; }
.site-footer h4 {
    color: var(--cream); font-family: var(--ui); font-size: 10.5px;
    letter-spacing: .26em; text-transform: uppercase; margin: 0 0 22px; font-weight: 500;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(30px, 4vw, 60px); }
.footer-brand__name { font-family: var(--display); font-size: 32px; color: var(--cream); }
.footer-brand__sub { font-size: 8.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin: 8px 0 20px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 14px; transition: color .3s var(--ease); }
.footer-links a:hover { color: var(--gold); }

.newsletter { display: flex; border-bottom: 1px solid rgba(244,239,230,.22); }
.newsletter input {
    flex: 1; background: none; border: 0; padding: 12px 0; color: var(--cream); font-size: 14px;
}
.newsletter input::placeholder { color: #6b7a73; }
.newsletter input:focus { outline: none; }
.newsletter button {
    background: none; border: 0; color: var(--gold); cursor: pointer;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
}

.footer-bottom {
    margin-top: clamp(46px, 6vw, 80px);
    border-top: 1px solid rgba(244,239,230,.1);
    padding: 26px 0;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    font-size: 12.5px;
}
.footer-bottom a:hover { color: var(--gold); }

/* --------------------------------------------------------- reveal on scroll */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .hero__slide img { transition: none; transform: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .book-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
    .book-strip__inner .btn { grid-column: 1 / -1; margin: 8px 0 0; }
    .field { border-right: 0; padding-left: 0; }
    .field:nth-child(odd) { padding-right: 20px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .masonry { columns: 2; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .split, .form-grid { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: 0; }
    .split__media img { aspect-ratio: 4/3; }
    .split__media--stack { padding: 0; }
    .split__media--stack .split__inset { display: none; }
    .summary { position: static; }

    .nav-toggle { display: block; }
    .nav {
        position: fixed; inset: 0;
        background: var(--ink);
        flex-direction: column; justify-content: center;
        gap: 26px;
        transform: translateX(100%);
        transition: transform .5s var(--ease);
        z-index: 190;
    }
    .nav.is-open { transform: none; }
    .nav a { font-size: 15px; color: var(--cream) !important; letter-spacing: .22em; }
    .nav .btn { margin-top: 12px; }
    .site-header .wrap { position: relative; z-index: 200; }
    .hero__dots, .hero__scroll { bottom: 120px; }
    .hero__scroll { display: none; }
}

@media (max-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .masonry { columns: 1; }
    .book-strip { margin-top: -40px; }
    .book-strip__inner { grid-template-columns: 1fr; }
    .field { padding-right: 0 !important; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero__inner { padding: 120px 0 170px; }
    .summary { padding: 24px; }
}