/* ==========================================================================
   Klawerjas — Mobile layer
   Loaded AFTER styles.css. Desktop untouched: everything lives in media
   queries. Original rules are scoped to page IDs (#page-home etc.), so
   overrides use :is(#page-...) to match their specificity.

   Breakpoint is 860px to match the existing per-page nav-hide rules
   (`nav:not(.mobile-nav)` at max-width:860px) already in styles.css —
   the hamburger/menu must appear exactly when the desktop nav disappears.
   ========================================================================== */

html { overflow-x: hidden; }

/* ---- Hamburger + mobile menu (all viewports: hidden on desktop) ---- */
.menu-btn { display: none; }
.mobile-menu { display: none; visibility: hidden; }

@media (max-width: 860px) {
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 44px; height: 44px; padding: 0 6px;
    background: none; border: 0; cursor: pointer; z-index: 210;
  }
  .menu-btn:focus-visible {
    outline: 2px solid var(--colour-brass-light);
    outline-offset: 3px;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .site-header .site-logo {
    margin: 0;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .site-header .site-logo img {
    width: auto;
    height: 54px;
    max-width: 54px;
    max-height: 54px;
  }
  .menu-btn span {
    display: block; height: 1px; background: var(--brass-light);
    transition: transform .35s var(--ease, ease), opacity .25s ease, width .35s var(--ease, ease);
  }
  .menu-btn span:nth-child(1) { width: 26px; }
  .menu-btn span:nth-child(2) { width: 18px; margin-left: 8px; }
  .menu-btn.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); width: 26px; }
  .menu-btn.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); width: 26px; margin-left: 0; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 900;
    background:
      radial-gradient(120% 90% at 80% 10%, rgba(201,169,105,.12) 0%, rgba(201,169,105,0) 50%),
      var(--green-deep, #1C2620);
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 9vw;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .4s ease, visibility 0s linear .4s;
  }
  .mobile-menu.open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
  .mobile-menu .mm-eyebrow {
    font: 500 var(--type-eyebrow)/1.4 var(--font-sans);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--colour-brass-light); margin-bottom: 2rem;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.15;
    letter-spacing: normal; text-transform: none;
    color: var(--linen-soft, #EDE7D8); text-decoration: none;
    padding: .55rem 0; border-bottom: 1px solid rgba(201,169,105,.16);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s var(--ease, ease);
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link { opacity: 1; transform: none; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link:hover,
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link:focus-visible,
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link[aria-current="page"] { color: var(--colour-brass-light); }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link[aria-current="page"] { font-style: italic; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link:focus-visible {
    outline: 1px solid var(--colour-brass-light);
    outline-offset: 4px;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-book {
    margin-top: 2.2rem; align-self: flex-start;
    font: 500 var(--type-action)/1.4 var(--font-sans);
    letter-spacing: var(--tracking-action); text-transform: uppercase;
    color: var(--colour-green-deep); background: var(--colour-brass-light);
    min-height: 44px; padding: 1rem 2.2rem; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid #c7a15a; position: relative; z-index: 2;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-book:hover,
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-book:focus-visible {
    background: rgba(199, 161, 90, .95);
    color: #172219;
    border-color: #c7a15a;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-book:focus-visible {
    outline: 2px solid var(--green-deep);
    outline-offset: 3px;
  }
  /* staggered entrance */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(2) { transition-delay: .06s; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(3) { transition-delay: .11s; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(4) { transition-delay: .16s; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(5) { transition-delay: .21s; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(6) { transition-delay: .26s; }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu.open a.mm-link:nth-child(7) { transition-delay: .31s; }
  body.menu-lock { overflow: hidden; }
}


/* ---- Global mobile pass (all six pages share these patterns) ---- */
@media (max-width: 860px) {
  /* Header: tighter, book pill hidden (it lives in the menu) */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .site-header {
    z-index: 1000;
    min-height: 74px;
    padding: .6rem var(--gutter-mobile);
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .site-header nav {
    display: none;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .site-header .book-pill {
    display: none;
  }

  /* Section rhythm: roughly half the desktop breathing room */
  :is(#page-home, #page-accommodation, #page-elzeth-art) > main > section,
  :is(#page-game, #page-explore) > section,
  #page-contact > main > section {
    padding: var(--section-space-mobile) var(--gutter-mobile);
  }

  /* Footer */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) footer {
    padding: 3rem var(--gutter-mobile) 2rem;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) footer nav ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) footer nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* Inner page heroes: don't demand a full screen before content */
  :is(#page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) .page-hero {
    min-height: 72svh; height: auto; padding-top: 5.5rem;
  }

  /* Staff dividers: half-height on mobile */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) .staff-divider {
    padding: 1.4rem 0;
  }
}

/* ---- Home page pass ---- */
@media (max-width: 860px) {
  /* Hero: svh so the URL bar doesn't jump; content clears the scroll cue */
  #page-home .hero { height: 100svh; min-height: 560px; }
  #page-home .hero-content { padding: 0 var(--gutter-mobile) 5.2rem; }
  #page-home .hero h1 { font-size: var(--type-hero); line-height: var(--line-display); margin-bottom: 1.3rem; }
  #page-home .hero h1 .line { padding-bottom: .18em; margin-bottom: -.18em; }
  #page-home .hero-eyebrow { margin-bottom: 1.2rem; font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); }
  #page-home .hero p { font-size: var(--type-body-lead); max-width: 34ch; }

  /* Vine: signature feature, kept full width and full opacity — upper-right
     of the hero, below the header (header z-index sits above it). A soft
     gradient fade at its foot keeps the headline zone at the bottom clean. */
  #page-home .hero-3d {
    width: 88vw; max-width: none; top: 0; right: 0; bottom: auto; height: 60%;
  }
  #page-home .hero-3d.ready { opacity: 1; }
  #page-home .hero-vine-img { top: 0; right: -6%; width: 100%; }
  #page-home .hero-3d::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, rgba(20,26,18,0) 0%, rgba(18,22,15,.95) 100%);
    pointer-events: none;
  }

  /* Scroll cue: dot only, nudged in from the corner */
  #page-home .scroll-cue { right: 6vw; bottom: 1.6rem; }

  /* Welcome */
  #page-home .welcome h2 { font-size: var(--type-section); }
  #page-home .welcome-grid { gap: 1.8rem; }

  /* Type + tags */
  #page-home .welcome-tag { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); margin-bottom: .9rem; }

  /* Footer wordmark */
  #page-home footer .wordmark { font-size: 1.2rem; }
}

/* Small phones */
@media (max-width: 400px) {
  #page-home .hero h1 { font-size: var(--type-hero); }
}

/* ---- Page-transition veil: brand mark must fit narrow viewports ---- */
@media (max-width: 860px) {
  .lux-veil .veil-mark {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    letter-spacing: .18em; text-indent: .18em;
  }
}


/* ---- Elzeth Art: catalogue layout ---- */
@media (max-width: 860px) {
  #page-elzeth-art section.art-hero { min-height:82svh; padding:7.2rem 7vw 3.4rem; }
  #page-elzeth-art .art-hero-img { object-position:57% 50%; }
  #page-elzeth-art .art-hero-veil { background:linear-gradient(0deg,rgba(18,28,22,.82),rgba(18,28,22,.4) 48%,rgba(18,28,22,.08) 76%); }
  #page-elzeth-art .art-hero h1 { font-size:var(--type-hero); }
  #page-elzeth-art .art-klawerjas,
  #page-elzeth-art .art-collection,
  #page-elzeth-art .art-artist { padding-left:7vw; padding-right:7vw; }
  #page-elzeth-art .art-klawerjas { gap:2.5rem; }
  #page-elzeth-art .art-featured-work { margin-bottom:6rem; }
  #page-elzeth-art .painting-study--clouds { margin-inline:-7vw; }
}

/* Mobile navigation uses the same active/hover language as the desktop menu. */
@media (max-width: 860px) {
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link {
    position: relative;
  }

  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link[aria-current="page"] {
    font-style: normal;
  }

  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: clamp(2.5rem, 18vw, 5rem);
    height: 1px;
    background: var(--colour-brass-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
  }

  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-game, #page-explore, #page-contact) > .mobile-menu a.mm-link:is(:hover, :focus-visible, [aria-current="page"])::after {
    transform: scaleX(1);
  }
}

@media (max-width: 480px) {
  #page-elzeth-art section.art-hero { min-height:78svh; padding:6.7rem var(--gutter-mobile) 2.8rem; }
  #page-elzeth-art .art-hero-img { object-position:60% 50%; }
  #page-elzeth-art .art-hero h1 { font-size:var(--type-hero); }
  #page-elzeth-art .art-hero p { font-size:var(--type-body-lead); }
  #page-elzeth-art .art-klawerjas,
  #page-elzeth-art .art-collection,
  #page-elzeth-art .art-artist { padding-left:6vw; padding-right:6vw; }
  #page-elzeth-art .art-image-placeholder { min-height:180px; }
  #page-elzeth-art .art-context__detail { width:72%; }
  #page-elzeth-art .art-work__heading { display:block; }
  #page-elzeth-art .art-work__status { display:block; margin-top:.45rem; }
  #page-elzeth-art .painting-study--clouds { margin-inline:calc(-1 * var(--gutter-mobile)); }
}

/* ---- Explore: trail cards were overflowing narrow phones (320px min-width) ---- */
@media (max-width: 860px) {
  #page-explore .trail-grid {
    grid-template-columns: 1fr;
  }
  #page-explore .trail-card {
    padding: 1.8rem 1.4rem;
  }
}

/* ---- Explore redesign: hero + At Klawerjas ---- */
@media (min-width: 761px) and (max-width: 1099px) {
  #page-explore .explore-hero { min-height: clamp(620px, 74svh, 760px); }
  #page-explore .explore-hero__content { padding: 9rem 7vw 5.5rem; }
  #page-explore .explore-hero h1 { max-width: 9ch; font-size: var(--type-hero); }
  #page-explore .at-klawerjas { padding-inline: 7vw; }
  #page-explore .at-klawerjas__intro { max-width: 720px; }
  #page-explore .explore-story--farm,
  #page-explore .explore-story--sundowners,
  #page-explore .explore-story--play { gap: 5vw; }
  #page-explore .explore-story--farm { grid-template-columns: minmax(0, 1.05fr) minmax(290px, .95fr); }
  #page-explore .explore-story--sundowners { grid-template-columns: minmax(290px, .85fr) minmax(0, 1.15fr); }
  #page-explore .explore-story--play { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); }
  #page-explore .explore-story--water { padding: 5vw; }
}

@media (max-width: 760px) {
  #page-explore .explore-eyebrow { font-size: var(--type-eyebrow); }
  #page-explore .explore-hero {
    min-height: 640px; height: min(82svh, 720px); padding: 0;
    align-items: flex-end;
  }
  #page-explore .explore-hero__image { object-position: 54% 50%; }
  #page-explore .explore-hero__veil {
    background: linear-gradient(0deg, rgba(17,25,20,.84) 0%, rgba(17,25,20,.42) 48%, rgba(17,25,20,.08) 76%);
  }
  #page-explore .explore-hero__content { padding: 8rem var(--gutter-mobile) 3.5rem; }
  #page-explore .explore-hero h1 { max-width: 9ch; font-size: var(--type-hero); line-height: var(--line-display); }
  #page-explore .explore-hero__aside { top: -.48em; font-size: .4em; }
  #page-explore .explore-hero__content>p:last-child { max-width: 38ch; font-size: var(--type-body-lead); line-height: var(--line-body); }
  #page-explore .at-klawerjas { padding: 5.5rem var(--gutter-mobile) 6rem; }
  #page-explore .at-klawerjas__intro { margin-bottom: 5.5rem; text-align: left; }
  #page-explore .at-klawerjas__intro h2 { font-size: var(--type-section); }
  #page-explore .at-klawerjas__intro>p:last-child { font-size: var(--type-body-lead); line-height: var(--line-body); }
  #page-explore .explore-story { margin-bottom: 6.5rem; }
  #page-explore .explore-story--farm,
  #page-explore .explore-story--sundowners,
  #page-explore .explore-story--play { display: flex; flex-direction: column; gap: 2.4rem; }
  #page-explore .explore-story--farm .explore-story__media,
  #page-explore .explore-story--play .explore-story__media { order: 1; }
  #page-explore .explore-story--farm .explore-story__copy,
  #page-explore .explore-story--play .explore-story__copy { order: 2; }
  #page-explore .explore-story--sundowners .explore-story__media { order: 1; }
  #page-explore .explore-story--sundowners .explore-story__copy { order: 2; padding-bottom: 0; }
  #page-explore .explore-story__media--farm,
  #page-explore .explore-story__media--play { aspect-ratio: 4/3; }
  #page-explore .explore-story__media--sundowners { aspect-ratio: 4/5; }
  #page-explore .explore-story__copy h3 { font-size: var(--type-editorial); }
  #page-explore .explore-story__copy>p:not(.explore-story__number) { font-size: var(--type-body); line-height: var(--line-body); }
  #page-explore .explore-story--water { margin-inline: calc(-1 * var(--gutter-mobile)); padding: 4.5rem var(--gutter-mobile); }
  #page-explore .stay-pair { grid-template-columns: 1fr; gap: 4rem; }
  #page-explore .stay-facility figure { margin-bottom: 1.6rem; }
  #page-explore .play-list li { font-size: 1.08rem; }
  #page-explore .from-gate { padding-inline: 0; text-align: left; }
  #page-explore .from-gate>p:not(.explore-eyebrow):not(.from-gate__next) { margin-inline: 0; }
}

@media (max-width: 400px) {
  #page-explore .explore-hero { min-height: 620px; }
  #page-explore .explore-hero h1 { font-size: var(--type-hero); }
}