/* ═══════════════════════════════════════════════════════════════
   MAISON — Beyond Olives
   ───────────────────────────────────────────────────────────────
   The house layer. It loads last, after shared-nav, the
   atmosphere, legibility and iphone, so it has the final word on
   everything the visitor touches: the wordmark, the index, the
   strip of chapters, the foot of the page, and the moment between
   one page and the next.

   The principle is subtraction. A house of this kind does not
   decorate its navigation — it sets one hairline, one small
   capital, a great deal of air, and then gets out of the way of
   the photographs. Nothing here is a box: no panel, no card, no
   rounded corner, no drop shadow. Rules are one pixel and they
   are drawn, not stamped. Motion is slow and even, the way a
   heavy door swings.

   The type is a pair. Italiana carries the name of the house and
   the numerals of the index — an Italian display face, all in one
   weight, which is the point. Jost, at two hundred, carries every
   small capital. Cormorant Garamond stays as it was: it is the
   reading voice of the estate and it was never the problem.

   Everything below respects prefers-reduced-motion at the foot of
   the file.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────
   1. TOKENS
   The gold this site was built on sat at #c4a24e —
   a brass. Brass reads loud. What follows moves the
   whole house a few degrees toward champagne and
   bone: the same warmth, most of the saturation
   taken out, which is the difference between a
   thing that announces its value and a thing that
   assumes it.
   ─────────────────────────────────────────────── */
:root {
    --gold:        #c2ac82;
    --gold-bright: #dccba6;
    --gold-pale:   #ece3d0;
    --parchment:   #ece5d6;
    --linen:       #ddd5c2;

    /* the house's own set */
    --ink:         #0b1207;
    --ink-soft:    rgba(11, 18, 7, 0.92);
    --bone:        #f3ede1;
    --champagne:   #d8c7a2;
    --whisper:     rgba(236, 227, 208, 0.44);
    --rule:        rgba(216, 199, 162, 0.16);
    --rule-lit:    rgba(216, 199, 162, 0.42);

    --silk:  cubic-bezier(0.19, 1, 0.22, 1);
    --glass: cubic-bezier(0.65, 0, 0.35, 1);

    --t-fast: 320ms;
    --t-mid:  620ms;
    --t-slow: 1100ms;

    --display: 'Italiana', 'Cormorant Garamond', serif;
    --caps:    'Jost', 'DM Sans', sans-serif;
    --read:    'Cormorant Garamond', serif;
}


/* ───────────────────────────────────────────────
   2. GROUND RULES
   ─────────────────────────────────────────────── */
::selection { background: rgba(216, 199, 162, 0.22); color: var(--bone); }

/* One focus ring for the whole house: a hairline square, never a
   glow, never a browser default. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 1px solid var(--rule-lit);
    outline-offset: 6px;
    border-radius: 0;
}

/* Nothing in the chrome is rounded. */
.menu-toggle,
.section-nav-inner,
.section-nav-dropdown,
.fullscreen-menu,
.cta-btn,
.enter-btn { border-radius: 0 !important; }

/* The photography loses the sepia it was carrying. A tint that
   heavy reads as a filter; the light in these pictures is already
   Puglian and does not need help pretending. */
.portal-bg img,
.portal-bg video,
.hands-cell img {
    filter: brightness(0.66) contrast(1.04) saturate(1.02) !important;
}


/* ───────────────────────────────────────────────
   3. THE READING THREAD
   One hairline of champagne across the very top,
   drawn as the page is read. It replaces the old
   progress bar, which was a bar.
   ─────────────────────────────────────────────── */
.maison-thread {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 1px;
    z-index: 500;
    pointer-events: none;
    background: rgba(216, 199, 162, 0.07);
}
.maison-thread i {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        rgba(216, 199, 162, 0.15) 0%,
        rgba(216, 199, 162, 0.72) 60%,
        rgba(243, 237, 225, 0.9) 100%);
}


/* ───────────────────────────────────────────────
   4. THE WORDMARK
   ─────────────────────────────────────────────── */
.nav-logo-wrap,
.portal-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}
/* the small rule that stands to the left of the name */
.nav-logo-wrap::before,
.portal-logo::before {
    content: '';
    width: 22px; height: 1px;
    background: var(--rule-lit);
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: transform var(--t-mid) var(--silk), background var(--t-mid) ease;
}
.nav-logo-wrap:hover::before,
.portal-logo:hover::before {
    transform: scaleX(1.9);
    background: var(--champagne);
}
.nav-logo,
.portal-logo span {
    font-family: var(--display) !important;
    font-weight: 400 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.36em !important;
    text-transform: uppercase;
    color: rgba(243, 237, 225, 0.86) !important;
    transition: color var(--t-mid) ease;
}
.nav-logo-wrap:hover .nav-logo,
.portal-logo:hover span { color: var(--bone) !important; }

.portal-location {
    font-family: var(--caps) !important;
    font-style: normal !important;
    font-weight: 200 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase;
    color: rgba(216, 199, 162, 0.5) !important;
}

/* the bar itself: more air above, and no slab when it settles —
   only a wash of the ground and one hairline beneath it */
nav#navbar,
.portal-nav { padding: 2.6rem 4rem !important; }
nav#navbar.scrolled,
.portal-nav.scrolled {
    padding: 1.35rem 4rem !important;
    background: linear-gradient(180deg, rgba(11, 18, 7, 0.9) 0%, rgba(11, 18, 7, 0.62) 100%) !important;
    backdrop-filter: blur(22px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.05) !important;
    box-shadow: inset 0 -1px 0 var(--rule) !important;
}


/* ───────────────────────────────────────────────
   5. THE INDEX BUTTON
   Three hairlines and a word. The word matters:
   a visitor should never have to guess what a
   drawn symbol means.
   ─────────────────────────────────────────────── */
.menu-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.95rem !important;
    padding: 10px 0 !important;
}
.maison-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 26px;
}
.menu-toggle span {
    width: 26px !important;
    height: 1px !important;
    background: var(--champagne) !important;
    opacity: 0.62;
    transition: transform var(--t-mid) var(--silk),
                opacity var(--t-mid) ease,
                width var(--t-mid) var(--silk) !important;
}
.menu-toggle:hover span { opacity: 1; }
.menu-toggle:hover span:nth-child(2) { width: 15px !important; }

.maison-toggle-label {
    font-family: var(--caps);
    font-weight: 200;
    font-style: normal;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(236, 227, 208, 0.62);
    transition: color var(--t-mid) ease;
    /* the label swaps between Index and Close; a fixed measure
       keeps the button from jumping as it does */
    min-width: 5.4em;
    text-align: right;
}
.menu-toggle:hover .maison-toggle-label { color: var(--bone); }

/* open: the outer two cross, the middle leaves */
.maison-menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.maison-menu-open .menu-toggle span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.maison-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
.maison-menu-open nav#navbar,
.maison-menu-open .portal-nav { z-index: 400 !important; }
.maison-menu-open nav#navbar.scrolled,
.maison-menu-open .portal-nav.scrolled {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.maison-menu-open body { overflow: hidden; }


/* ───────────────────────────────────────────────
   6. THE INDEX
   Not a menu. The table of contents of a book:
   the chapter named once in the margin, its pages
   listed beside it, each on its own line, each
   numbered, each with a rule that draws itself
   under the name as the cursor arrives.
   ─────────────────────────────────────────────── */
.fullscreen-menu {
    background: radial-gradient(ellipse 120% 90% at 78% 8%, rgba(30, 42, 20, 0.6) 0%, transparent 62%),
                linear-gradient(178deg, #0d1508 0%, #0b1207 55%, #0a1006 100%) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: opacity var(--t-mid) var(--silk), visibility var(--t-mid) !important;
}
/* the original four-column menu stays in the markup as the
   no-script fallback; once the index is built it steps aside */
html.maison-ready .fullscreen-menu .menu-inner { display: none !important; }

.maison-index {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 8.5rem 4rem 3rem;
    gap: 3.5rem;
}

/* the ghost of the name, set enormous and almost invisible in the
   corner — the one indulgence in the whole layer */
.maison-index::after {
    content: 'Beyond Olives';
    position: absolute;
    right: -1.5vw;
    bottom: -3.5vw;
    font-family: var(--display);
    font-size: 17vw;
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: rgba(216, 199, 162, 0.028);
    pointer-events: none;
    white-space: nowrap;
    z-index: -1;
}

.maison-index-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--t-mid) ease var(--t-fast), transform var(--t-mid) var(--silk) var(--t-fast);
}
.fullscreen-menu.open .maison-index-head { opacity: 1; transform: none; }
.maison-index-eyebrow,
.maison-index-place {
    font-family: var(--caps);
    font-weight: 200;
    font-size: 0.58rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
}
.maison-index-eyebrow { color: rgba(216, 199, 162, 0.78); }
.maison-index-place   { color: rgba(236, 227, 208, 0.34); }

.maison-index-body {
    align-self: center;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── a chapter: label in the margin, pages beside it ── */
.maison-chapter-block {
    display: grid;
    grid-template-columns: minmax(150px, 20%) 1fr;
    gap: 0 3.5rem;
    padding: 1.5rem 0;
}
.maison-chapter-block + .maison-chapter-block { border-top: 1px solid rgba(216, 199, 162, 0.07); }

.maison-chapter-label {
    font-family: var(--caps);
    font-weight: 200;
    font-size: 0.56rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: rgba(216, 199, 162, 0.55);
    padding-top: 1.1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--silk);
    transition-delay: calc(var(--i, 0) * 38ms);
}
.fullscreen-menu.open .maison-chapter-label { opacity: 1; transform: none; }

.maison-pages { list-style: none; margin: 0; padding: 0; }

.maison-page {
    position: relative;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--silk);
    transition-delay: calc(var(--i, 0) * 38ms);
}
.fullscreen-menu.open .maison-page { opacity: 1; transform: none; }

.maison-page a {
    position: relative;
    display: grid !important;
    grid-template-columns: 3.2rem 1fr;
    align-items: baseline;
    gap: 0 1rem;
    padding: 0.62rem 0 !important;
    text-decoration: none;
    color: inherit !important;
}
/* the rule that draws itself */
.maison-page a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--rule-lit);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t-mid) var(--silk);
}
.maison-page a:hover::after,
.maison-page a:focus-visible::after { transform: scaleX(1); }

.maison-num {
    font-family: var(--display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: rgba(216, 199, 162, 0.4);
    transition: color var(--t-mid) ease, transform var(--t-mid) var(--silk);
}
.maison-name {
    font-family: var(--read);
    font-weight: 300;
    font-size: clamp(1.25rem, 2.5vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: 0.015em;
    color: rgba(243, 237, 225, 0.72);
    transition: color var(--t-mid) ease, transform var(--t-mid) var(--silk);
}
.maison-page a:hover .maison-name,
.maison-page a:focus-visible .maison-name {
    color: var(--bone);
    transform: translateX(14px);
}
.maison-page a:hover .maison-num,
.maison-page a:focus-visible .maison-num { color: var(--champagne); }

/* where the visitor is standing */
.maison-page.is-here .maison-name { color: var(--champagne); font-style: italic; }
.maison-page.is-here .maison-num  { color: var(--champagne); }
.maison-page.is-here::before {
    content: '';
    position: absolute;
    left: -1.6rem; top: 50%;
    width: 6px; height: 1px;
    background: var(--champagne);
    transform: translateY(-50%);
}

.maison-index-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
    font-family: var(--caps);
    font-weight: 200;
    font-size: 0.58rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(236, 227, 208, 0.3);
    opacity: 0;
    transition: opacity var(--t-slow) ease 0.34s;
}
.fullscreen-menu.open .maison-index-foot { opacity: 1; }
.maison-index-foot a {
    color: rgba(216, 199, 162, 0.62);
    text-decoration: none;
    transition: color var(--t-mid) ease;
}
.maison-index-foot a:hover { color: var(--bone); }


/* ───────────────────────────────────────────────
   7. THE CHAPTER STRIP
   The sticky bar of sections keeps its job and
   loses its furniture: no filled slab, no border
   box, no shadow. A wash of the ground, one
   hairline, and small capitals that light up.
   ─────────────────────────────────────────────── */
.section-nav-inner {
    background: linear-gradient(180deg, rgba(11, 18, 7, 0.88) 0%, rgba(11, 18, 7, 0.52) 100%) !important;
    backdrop-filter: blur(26px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.04) !important;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 var(--rule) !important;
    gap: 0 !important;
    padding: 0 2rem !important;
}
.section-nav-trigger {
    position: relative;
    font-family: var(--caps) !important;
    font-weight: 200 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase;
    color: rgba(236, 227, 208, 0.44) !important;
    padding: 1.15rem 1.9rem !important;
    border-bottom: none !important;
    transition: color var(--t-mid) ease !important;
}
/* a rule that opens from the centre */
.section-nav-trigger::after {
    content: '';
    position: absolute;
    left: 1.9rem; right: 1.9rem; bottom: 0;
    height: 1px;
    background: var(--champagne);
    transform: scaleX(0);
    transition: transform var(--t-mid) var(--silk);
}
.section-nav-trigger:hover { color: var(--bone) !important; }
.section-nav-trigger:hover::after { transform: scaleX(1); }
.section-nav-group.active > .section-nav-trigger { color: var(--champagne) !important; }
.section-nav-group.active > .section-nav-trigger::after { transform: scaleX(0.28); }

.section-nav-dropdown {
    background: rgba(11, 18, 7, 0.94) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: none !important;
    box-shadow: inset 0 1px 0 var(--rule) !important;
    padding: 1.1rem 0 1.3rem !important;
    min-width: 232px !important;
}
.section-nav-dropdown a {
    font-family: var(--read) !important;
    font-size: 0.98rem !important;
    font-weight: 300 !important;
    color: rgba(236, 227, 208, 0.5) !important;
    padding: 0.55rem 1.9rem !important;
    transition: color var(--t-mid) ease, padding-left var(--t-mid) var(--silk) !important;
}
.section-nav-dropdown a:hover {
    color: var(--bone) !important;
    padding-left: 2.35rem !important;
}
.section-nav-dropdown a.current-page { color: var(--champagne) !important; font-style: italic; }


/* ───────────────────────────────────────────────
   8. THE CHAPTER BAND
   At the foot of every page, before the footer:
   where you have been, and where the estate would
   have you go next. A book turns its own page.
   ─────────────────────────────────────────────── */
.maison-chapters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 4rem 6rem;
    border-top: 1px solid var(--rule);
    position: relative;
}
.maison-chapters::before {
    content: '';
    position: absolute;
    top: 7rem; bottom: 6rem; left: 50%;
    width: 1px;
    background: rgba(216, 199, 162, 0.09);
}
.maison-turn {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-decoration: none;
    padding: 0 2.5rem;
}
.maison-turn--next { align-items: flex-end; text-align: right; }
.maison-turn--empty { pointer-events: none; }

.maison-turn-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--caps);
    font-weight: 200;
    font-size: 0.56rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: rgba(216, 199, 162, 0.5);
    transition: color var(--t-mid) ease;
}
/* the rule beside the kicker, which lengthens on approach */
.maison-turn-kicker::before,
.maison-turn-kicker::after {
    content: '';
    width: 26px; height: 1px;
    background: var(--rule-lit);
    transition: width var(--t-mid) var(--silk), background var(--t-mid) ease;
}
.maison-turn--prev .maison-turn-kicker::after,
.maison-turn--next .maison-turn-kicker::before { display: none; }
.maison-turn:hover .maison-turn-kicker::before,
.maison-turn:hover .maison-turn-kicker::after {
    width: 46px;
    background: var(--champagne);
}
.maison-turn:hover .maison-turn-kicker { color: var(--champagne); }

.maison-turn-name {
    font-family: var(--read);
    font-weight: 300;
    font-size: clamp(1.6rem, 3.4vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: rgba(243, 237, 225, 0.74);
    transition: color var(--t-mid) ease, transform var(--t-slow) var(--silk);
}
.maison-turn:hover .maison-turn-name { color: var(--bone); }
.maison-turn--prev:hover .maison-turn-name { transform: translateX(-12px); }
.maison-turn--next:hover .maison-turn-name { transform: translateX(12px); }

/* it arrives with the scroll rather than sitting there waiting */
.maison-chapters .maison-turn {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--silk);
}
.maison-chapters.is-shown .maison-turn { opacity: 1; transform: none; }
.maison-chapters.is-shown .maison-turn--next { transition-delay: 120ms; }


/* ───────────────────────────────────────────────
   9. THE FOOT
   ─────────────────────────────────────────────── */
footer { padding: 6rem 4rem 3rem !important; }
footer::before { background: linear-gradient(90deg, transparent, var(--rule), transparent) !important; }
.footer-logo {
    font-family: var(--display) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.36em !important;
    color: rgba(243, 237, 225, 0.8) !important;
}
.footer-tagline {
    font-family: var(--read) !important;
    color: rgba(236, 227, 208, 0.4) !important;
    max-width: 46ch;
}
.footer-col h4 {
    font-family: var(--caps) !important;
    font-weight: 200 !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.44em !important;
    color: rgba(216, 199, 162, 0.5) !important;
}
.footer-col ul li a {
    font-family: var(--read) !important;
    font-size: 0.94rem !important;
    color: rgba(236, 227, 208, 0.42) !important;
    transition: color var(--t-mid) ease !important;
}
.footer-col ul li a:hover { color: var(--bone) !important; }
.footer-bottom p {
    font-family: var(--caps) !important;
    font-weight: 200 !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.38em !important;
    text-transform: uppercase;
    color: rgba(236, 227, 208, 0.22) !important;
}


/* ───────────────────────────────────────────────
   10. THE INVITATIONS
   Every call to action in the house is the same
   object: a hairline rectangle that fills from the
   left as you approach it.
   ─────────────────────────────────────────────── */
.cta-btn,
.enter-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--caps) !important;
    font-weight: 200 !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase;
    padding: 1.35rem 3.4rem !important;
    border: 1px solid var(--rule-lit) !important;
    color: rgba(243, 237, 225, 0.86) !important;
    text-shadow: none !important;
    transition: color var(--t-mid) ease, border-color var(--t-mid) ease !important;
}
.cta-btn::before,
.enter-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(216, 199, 162, 0.1);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t-mid) var(--silk);
    z-index: -1;
}
.cta-btn:hover::before,
.enter-btn:hover::before { transform: scaleX(1); }
.cta-btn:hover,
.enter-btn:hover {
    color: var(--bone) !important;
    border-color: var(--champagne) !important;
}

/* the small capital that labels a section */
.section-label {
    font-family: var(--caps) !important;
    font-weight: 200 !important;
    letter-spacing: 0.44em !important;
    color: rgba(216, 199, 162, 0.62) !important;
}


/* ───────────────────────────────────────────────
   11. BETWEEN PAGES
   A leaf of the ground colour closes over the page
   before it leaves, and lifts once the next one has
   arrived. The site stops feeling like documents
   and starts feeling like rooms.
   ─────────────────────────────────────────────── */
.maison-veil {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 460ms var(--glass);
}
.maison-veil.is-closing { opacity: 1; pointer-events: auto; }
/* the leaf is placed already closed when the visitor arrives from
   inside the house, then lifted on the next frame. It is built by
   script and removed by a timer that cannot be talked out of it,
   so a page can never be left behind a curtain. */
.maison-veil.is-arriving { opacity: 1; }


/* ───────────────────────────────────────────────
   12. NARROWER ROOMS
   ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    nav#navbar,
    .portal-nav { padding: 2rem 2.2rem !important; }
    nav#navbar.scrolled,
    .portal-nav.scrolled { padding: 1.2rem 2.2rem !important; }
    .maison-index { padding: 7.5rem 2.2rem 2.5rem; }
    .maison-chapter-block { grid-template-columns: minmax(120px, 22%) 1fr; gap: 0 2rem; }
    .maison-chapters { padding: 5.5rem 2.2rem 4.5rem; }
    .maison-turn { padding: 0 1.2rem; }
    footer { padding: 5rem 2.2rem 2.5rem !important; }
}

@media (max-width: 760px) {
    nav#navbar,
    .portal-nav { padding: 1.4rem 1.4rem !important; }
    nav#navbar.scrolled,
    .portal-nav.scrolled { padding: 1rem 1.4rem !important; }

    .nav-logo-wrap::before,
    .portal-logo::before { display: none; }
    .nav-logo,
    .portal-logo span { font-size: 0.72rem !important; letter-spacing: 0.28em !important; }
    .maison-toggle-label { display: none; }

    .maison-index { padding: 6.5rem 1.4rem 2rem; gap: 2.2rem; }
    .maison-index::after { font-size: 34vw; bottom: -6vw; }
    .maison-index-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .maison-index-place { display: none; }
    .maison-chapter-block {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding: 1.1rem 0;
    }
    .maison-chapter-label { padding-top: 0; }
    .maison-page a { grid-template-columns: 2.4rem 1fr; padding: 0.5rem 0 !important; }
    .maison-name { font-size: 1.2rem; }
    .maison-page a:hover .maison-name { transform: none; }
    .maison-page.is-here::before { left: -0.85rem; }
    .maison-index-foot { flex-direction: column; gap: 0.6rem; letter-spacing: 0.28em; }

    .maison-chapters {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 4rem 1.4rem 3.5rem;
    }
    .maison-chapters::before { display: none; }
    .maison-turn { padding: 0; }
    .maison-turn--next { align-items: flex-start; text-align: left; }
    .maison-turn--next .maison-turn-kicker::before { display: inline-block; }
    .maison-turn--next .maison-turn-kicker::after { display: none; }
    .maison-turn--empty { display: none; }
    .maison-turn:hover .maison-turn-name { transform: none; }

    .section-nav-trigger { padding: 0.9rem 1rem !important; letter-spacing: 0.24em !important; }
    .section-nav-trigger::after { left: 1rem; right: 1rem; }

    .cta-btn,
    .enter-btn { padding: 1.15rem 2.4rem !important; letter-spacing: 0.3em !important; }

    footer { padding: 4rem 1.4rem 2rem !important; }
}


/* ───────────────────────────────────────────────
   13. STILLNESS
   Everything above is a preference, not a
   requirement. Asked for less motion, the house
   holds still and simply shows the page.
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .maison-index-head,
    .maison-chapter-label,
    .maison-page,
    .maison-index-foot,
    .maison-chapters .maison-turn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .maison-page a:hover .maison-name,
    .maison-turn:hover .maison-turn-name { transform: none !important; }
    .maison-veil { display: none !important; }
    .maison-thread i { transition: none; }
}