/* ==========================================================================
   Conville Guest Farm — stylesheet
   Palette drawn from the house itself: sandstone walls, terracotta roof,
   the deep green of the dining room damask, and brass bedsteads.
   ========================================================================== */

:root {
  --bone:        #F7F3EB;
  --bone-2:      #EFE8DB;
  --bone-3:      #E4DACA;
  --ink:         #211F1B;
  --ink-2:       #4A453D;
  --ink-3:       #736C61;
  --green:       #22372B;
  --green-2:     #32503E;
  --clay:        #A85834;
  --brass:       #A98A55;
  --white:       #FFFCF7;
  --line:        rgba(33, 31, 27, .14);
  --line-soft:   rgba(33, 31, 27, .08);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(72px, 10vw, 132px);
  --radius: 2px;

  --shadow-sm: 0 2px 10px rgba(33, 31, 27, .06);
  --shadow-md: 0 14px 40px -18px rgba(33, 31, 27, .30);
  --shadow-lg: 0 30px 70px -30px rgba(33, 31, 27, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--green); color: var(--bone); }

/* --- Accessibility ------------------------------------------------------ */

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--green); color: var(--bone);
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  text-decoration: none; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2.5px solid var(--clay);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout primitives -------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--bone2 { background: var(--bone-2); }

/* A menu link should land with the section's heading just below the header.
   Without this the section's own top padding is added to the header offset and
   the heading starts a third of the way down the screen. Cancelling the padding
   here keeps the landing point identical at every breakpoint. */
section[id]:not(.hero) { scroll-margin-top: calc(16px - var(--section-pad)); }
/* Getting Here is the tallest section above the fold; a little extra lift keeps
   the second directions card from being clipped by the bottom of the screen. */
#directions { scroll-margin-top: calc(-20px - var(--section-pad)); }
/* cancels scroll-padding exactly, so the logo link returns to a true top */
.hero { scroll-margin-top: calc((var(--header-h) + 12px) * -1); }
.section--green {
  background: var(--green);
  color: var(--bone);
}
.section--green h2, .section--green h3 { color: var(--white); }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 18px;
}
.section--green .eyebrow { color: var(--brass); }

.section-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: .45em;
}

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.68;
  max-width: 62ch;
}
.section--green .lede { color: rgba(247, 243, 235, .82); }

.section-head { max-width: 68ch; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

.rule {
  width: 62px; height: 2px; border: 0;
  background: var(--brass);
  margin: 0 0 26px;
}
.section-head--center .rule { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease),
              box-shadow .28s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--clay); color: var(--white);
  border-color: var(--clay);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: #8F4828; border-color: #8F4828; box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(33,31,27,.04); }

.btn--onphoto {
  background: rgba(255, 252, 247, .1);
  color: var(--white);
  border-color: rgba(255, 252, 247, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--onphoto:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--on-green { background: var(--bone); color: var(--green); border-color: var(--bone); }
.btn--on-green:hover { background: var(--white); border-color: var(--white); }

.btn--outline-light { background: transparent; color: var(--bone); border-color: rgba(247,243,235,.4); }
.btn--outline-light:hover { border-color: var(--bone); background: rgba(247,243,235,.08); }

.btn--sm { padding: 11px 22px; font-size: 12.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Header ------------------------------------------------------------- */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Soft scrim behind the header while it sits over the photograph. The top of the
   hero is its brightest area, and the wordmark was reading weaker than the nav
   links beside it. Fades out once the header turns solid. */
.header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom,
    rgba(18, 16, 13, .58) 0%,
    rgba(18, 16, 13, .34) 42%,
    rgba(18, 16, 13, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s var(--ease);
}
.header.is-solid::before { opacity: 0; }

.header__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand {
  display: flex; flex-direction: column; text-decoration: none;
  line-height: 1.05; color: var(--white);
  transition: color .4s var(--ease);
}
.brand__name {
  font-family: var(--serif); font-size: 27px; font-weight: 600;
  letter-spacing: .005em;
}
.brand__sub {
  font-size: 10px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; opacity: .9; margin-top: 3px;
}

/* Depth only while the wordmark sits on the photograph. */
.header .brand { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .4); }
.header.is-solid .brand { text-shadow: none; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; color: var(--white);
  padding-block: 6px;
  transition: color .4s var(--ease), opacity .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Scrolled / solid state */
/* The solid bar is painted by a pseudo-element, NOT by .header itself.
   backdrop-filter on .header would make it a containing block for its
   position:fixed children, which collapses the mobile nav drawer into the
   header's 66px box the moment the page is scrolled. */
.header::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(247, 243, 235, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity .4s var(--ease);
}
.header.is-solid::after { opacity: 1; }

.header.is-solid {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(33, 31, 27, .07);
}
.header.is-solid .brand,
.header.is-solid .nav__link { color: var(--ink); }
.header.is-solid .brand__sub { color: var(--clay); opacity: 1; }
.header.is-solid .burger__bar { background: var(--ink); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  margin-right: -10px;
}
.burger__box { position: relative; width: 24px; height: 14px; }
.burger__bar {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--white); border-radius: 2px;
  transition: transform .34s var(--ease), opacity .2s var(--ease), background-color .4s var(--ease);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 6.25px; }
.burger__bar:nth-child(3) { top: 12.5px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 16, 13, .86) 0%, rgba(18, 16, 13, .34) 42%, rgba(18, 16, 13, .20) 68%, rgba(18, 16, 13, .48) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(90px, 13vh, 150px) clamp(60px, 9vh, 104px);
}
.hero__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255, 252, 247, .9);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.hero__eyebrow::before {
  content: ""; width: 46px; height: 1.5px; background: var(--brass); flex: none;
}
.hero__title {
  font-size: clamp(3rem, 8.2vw, 6.2rem);
  line-height: .98;
  margin: 0 0 24px;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .3);
}
.hero__text {
  font-size: clamp(1.05rem, 1.75vw, 1.3rem);
  line-height: 1.6;
  max-width: 50ch;
  color: rgba(255, 252, 247, .93);
  margin: 0 0 36px;
}
.hero .btn-row { margin-bottom: clamp(30px, 5vh, 52px); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 252, 247, .22);
  font-size: 13px; letter-spacing: .04em;
  color: rgba(255, 252, 247, .84);
}
.hero__meta span { display: flex; align-items: center; gap: 9px; }
.hero__meta svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* --- Facts strip -------------------------------------------------------- */

.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(247, 243, 235, .16);
}
.fact {
  background: var(--green);
  padding: clamp(28px, 3.4vw, 42px) clamp(18px, 2.4vw, 32px);
  text-align: center;
}
.fact__num {
  font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.7rem);
  color: var(--white); line-height: 1; margin-bottom: 10px;
}
.fact__label {
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247, 243, 235, .74);
}

/* --- Editorial split ---------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
/* History carries far more text than the other splits, so centring the media
   against it pushes the photograph off the bottom of the screen. Align it to
   the top of the column instead. */
#history .split { align-items: start; }

.split__media { position: relative; }
/* A 4:3 image reads as a thin band beside a tall text column, so the split
   media is given a portrait ratio. height:auto is still needed — the img
   height attribute is a presentational hint that would otherwise win. */
.split__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.split__badge {
  position: absolute; right: -18px; bottom: -22px;
  background: var(--bone); color: var(--green);
  padding: 20px 26px; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center; max-width: 200px;
}
.split__badge strong {
  display: block; font-family: var(--serif);
  font-size: 1.45rem; line-height: 1.1; margin-bottom: 4px;
}
.split__badge span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

.prose p { color: var(--ink-2); }
.prose .lede { color: var(--ink); font-size: 1.16rem; }

/* --- Rooms -------------------------------------------------------------- */

/* Four rooms, so two columns — an auto-fit grid strands the fourth card on a
   row of its own, and the wider cards give the photographs room to work. */
.rooms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;          /* all four cards the same height, not just within a row */
  gap: clamp(26px, 3vw, 38px);
}
.room {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.room:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.room__media { position: relative; overflow: hidden; background: var(--bone-3); }
.room__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Room carousel ------------------------------------------------------
   Each room card steps through its own photographs in place. Falls back to
   a plain horizontal scroller if JS never runs, so every photo stays reachable. */

.carousel { position: relative; }
.carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.carousel.is-ready .carousel__viewport { overflow-x: hidden; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport { scrollbar-width: none; }

.carousel__track { display: flex; }
.carousel.is-ready .carousel__track { transition: transform .5s var(--ease); }

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0; padding: 0; border: 0;
  background: none; cursor: zoom-in; display: block; width: 100%;
}

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 38px; height: 38px;
  display: none; place-items: center;
  border-radius: 50%;
  background: rgba(247, 243, 235, .88);
  border: 1px solid rgba(33, 31, 27, .12);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(33, 31, 27, .18);
  transition: background-color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
  opacity: 0;
}
.carousel.is-ready .carousel__nav { display: grid; }
.room:hover .carousel__nav,
.carousel__nav:focus-visible { opacity: 1; }
.carousel__nav:hover { background: var(--white); }
.carousel__nav svg { width: 17px; height: 17px; }
.carousel__nav--prev { left: 10px; }
.carousel__nav--next { right: 10px; }

.carousel__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: none; justify-content: center; gap: 6px;
}
.carousel.is-ready .carousel__dots { display: flex; }
.carousel__dot {
  width: 7px; height: 7px; padding: 0;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(247, 243, 235, .55);
  box-shadow: 0 0 0 1px rgba(33, 31, 27, .18);
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.carousel__dot.is-current { background: var(--white); width: 18px; border-radius: 4px; }

/* Touch devices have no hover, so keep the controls visible */
@media (hover: none) {
  .carousel__nav { opacity: 1; }
}

.room__tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(34, 55, 43, .92); color: var(--bone);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 13px;
  border-radius: var(--radius);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.room__body { padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; flex: 1; }
.room__name { font-size: 1.72rem; margin-bottom: 12px; }
.room__desc { font-size: 15.5px; color: var(--ink-2); line-height: 1.66; margin-bottom: 20px; flex: 1; }
.room__specs {
  list-style: none; margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px;
}
.room__specs li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}
.room__specs svg { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--brass); }

.rooms-note {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px);
  background: var(--bone-2);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  font-size: 15.5px; color: var(--ink-2);
}
.section--bone2 .rooms-note { background: var(--white); }

/* --- Heritage detail list ----------------------------------------------- */

.heritage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  margin-top: clamp(40px, 5vw, 62px);
}
.heritage__item {
  background: var(--bone);
  padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 28px);
}
.section--bone2 .heritage__item { background: var(--bone-2); }
.heritage__term {
  font-size: 11px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--clay);
  margin-bottom: 10px;
}
.heritage__desc {
  font-family: var(--serif); font-size: 1.32rem;
  line-height: 1.25; color: var(--ink); margin: 0;
}
.heritage__note {
  display: block; margin-top: 7px;
  font-family: var(--sans); font-size: 13.5px;
  line-height: 1.55; color: var(--ink-3);
}

.pullquote {
  margin: clamp(32px, 4vw, 46px) 0 0;
  padding-left: clamp(20px, 2.4vw, 30px);
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.4; color: var(--ink);
}
.pullquote cite {
  display: block; margin-top: 14px;
  font-family: var(--sans); font-size: 12px; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* --- Feature grid ------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(247, 243, 235, .18);
  border: 1px solid rgba(247, 243, 235, .18);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature {
  background: var(--green);
  padding: clamp(30px, 3.2vw, 42px) clamp(24px, 2.6vw, 34px);
}
.feature__icon {
  width: 34px; height: 34px; color: var(--brass); margin-bottom: 20px;
  display: block;
}
.feature__icon svg { width: 100%; height: 100%; }
.feature h3 { font-size: 1.42rem; margin-bottom: 10px; color: var(--white); }
.feature p { font-size: 15px; line-height: 1.64; color: rgba(247, 243, 235, .76); margin: 0; }

/* --- Gallery ------------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
}
.shot {
  position: relative;
  grid-column: span 4;
  margin: 0; padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-3);
  cursor: zoom-in;
  border: 0;
  display: block;
  width: 100%;
  transition: box-shadow .4s var(--ease);
}
.shot img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .75s var(--ease);
}
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,16,13,.6), rgba(18,16,13,0) 55%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.shot:hover img { transform: scale(1.06); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.shot:hover { box-shadow: var(--shadow-md); }

.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 18px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--white); text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }

.shot--wide { grid-column: span 8; }
.shot--wide img { aspect-ratio: 16 / 9; }
.shot--half { grid-column: span 6; }
.shot--half img { aspect-ratio: 3 / 2; }

/* --- Lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  background: rgba(14, 13, 11, .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox.is-open { display: grid; grid-template-rows: 1fr auto; }
.lightbox__stage {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(52px, 7vh, 80px) clamp(52px, 8vw, 110px) 12px;
  min-height: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: lbIn .4s var(--ease);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(20px, 5vw, 48px) clamp(24px, 4vh, 36px);
  color: rgba(247, 243, 235, .9);
}
.lightbox__cap { font-size: 14.5px; letter-spacing: .02em; }
.lightbox__count {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 243, 235, .55); flex: none;
  font-variant-numeric: tabular-nums;
}

.lb-btn {
  position: absolute; z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(247, 243, 235, .07);
  border: 1px solid rgba(247, 243, 235, .2);
  color: var(--bone);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lb-btn:hover { background: rgba(247, 243, 235, .16); border-color: rgba(247, 243, 235, .45); }
/* .lb-btn sets display, so the UA's [hidden] rule needs restating for a single-photo set */
.lb-btn[hidden] { display: none; }
.lb-btn svg { width: 20px; height: 20px; }
.lb-btn--prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb-btn--next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb-btn--prev:hover { transform: translateY(-50%) scale(1.07); }
.lb-btn--next:hover { transform: translateY(-50%) scale(1.07); }
.lb-btn--close { top: clamp(14px, 2.5vh, 26px); right: clamp(14px, 3vw, 32px); }
.lb-btn--close:hover { transform: scale(1.07); }

/* --- Directions --------------------------------------------------------- */

/* No align-items:start here — the map card should grow to match the routes
   column, otherwise it leaves a tall empty gap beneath it. */
.directions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); }
.route {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.route + .route { margin-top: 20px; }
.route h3 {
  font-size: 1.35rem; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.route h3 svg { width: 19px; height: 19px; color: var(--clay); flex: none; }
.route ol { margin: 0; padding-left: 1.15em; color: var(--ink-2); font-size: 15.5px; }
.route li { margin-bottom: 10px; padding-left: 4px; line-height: 1.62; }
.route li::marker { color: var(--brass); font-weight: 600; }
.route li:last-child { margin-bottom: 0; }

.map-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-height: 360px;
  display: flex;
}
.map-card img { width: 100%; height: 100%; object-fit: cover; }
.map-card__overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(18,16,13,.94), rgba(18,16,13,0));
  padding: clamp(28px, 3vw, 40px);
  color: var(--white);
}
.map-card__overlay h3 { font-size: 1.5rem; margin-bottom: 8px; color: var(--white); }
.map-card__overlay p { font-size: 14.5px; color: rgba(255,252,247,.82); margin-bottom: 18px; }

/* --- Contact ------------------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(247, 243, 235, .16);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(247, 243, 235, .26);
  border-radius: 50%; color: var(--brass);
}
.contact-list__icon svg { width: 17px; height: 17px; }
.contact-list__label {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(247, 243, 235, .55);
  margin-bottom: 3px;
}
.contact-list__value { font-size: 17px; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
a.contact-list__value:hover { color: var(--brass); }

.booking-card {
  background: rgba(247, 243, 235, .06);
  border: 1px solid rgba(247, 243, 235, .18);
  border-radius: var(--radius);
  padding: clamp(30px, 3.6vw, 46px);
}
.booking-card h3 { font-size: 1.85rem; margin-bottom: 14px; }
.booking-card p { color: rgba(247, 243, 235, .78); font-size: 15.5px; }
.booking-card .btn { width: 100%; margin-top: 8px; }
.booking-card .btn + .btn { margin-top: 12px; }

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: #191712; color: rgba(247, 243, 235, .62);
  padding-block: clamp(48px, 6vw, 72px) 34px;
  font-size: 14px;
}
.footer__top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 32px; padding-bottom: 34px;
  border-bottom: 1px solid rgba(247, 243, 235, .12);
}
.footer__brand .brand__name { color: var(--white); font-size: 27px; }
.footer__brand .brand__sub { color: var(--brass); opacity: 1; }
.footer__brand p { margin-top: 14px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 12px 30px; list-style: none; margin: 0; padding: 0; }
.footer__nav a { text-decoration: none; transition: color .25s var(--ease); }
.footer__nav a:hover { color: var(--brass); }
.footer__bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; color: rgba(247, 243, 235, .42);
}
.footer__bottom a { color: inherit; }

/* --- Mobile sticky booking bar ------------------------------------------ */

.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 243, 235, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.book-bar.is-visible { transform: none; }
.book-bar .btn { flex: 1; padding-inline: 12px; }

/* --- Scroll reveal ------------------------------------------------------ */

/* Scroll-reveal removed deliberately: content must be readable at rest.
   Parking sections at opacity:0 until an observer fires leaves them blank in
   full-page screenshots, in print, and to anything that renders without scrolling. */

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .directions, .contact-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .split__badge { right: 16px; bottom: -16px; }
  .map-card { min-height: 300px; }
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .burger { display: inline-flex; }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(340px, 84vw);
    background: var(--bone);
    flex-direction: column; align-items: stretch;
    justify-content: center; gap: 0;
    padding: 90px 34px 40px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    box-shadow: -20px 0 60px rgba(33, 31, 27, .22);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line-soft); }
  .nav__link {
    display: block; color: var(--ink) !important;
    font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
    padding-block: 17px;
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 26px; }

  .nav-scrim {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(18, 16, 13, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease);
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }

  .book-bar { display: flex; }

  .hero { min-height: 92svh; }
  .hero__meta { gap: 8px 24px; font-size: 12.5px; }

  .gallery { grid-template-columns: repeat(6, 1fr); }
  .shot, .shot--wide, .shot--half { grid-column: span 3; }
  .shot--wide img, .shot--half img { aspect-ratio: 4 / 3; }

  .lb-btn--prev, .lb-btn--next { top: auto; bottom: 0; transform: none; }
  .lb-btn--prev { left: 50%; margin-left: -62px; }
  .lb-btn--next { right: 50%; margin-right: -62px; }
  .lb-btn--prev:hover, .lb-btn--next:hover { transform: scale(1.07); }
  .lightbox__bar { flex-direction: column; align-items: flex-start; padding-bottom: 92px; }
  .lightbox__stage { padding-inline: 16px; }
}

@media (max-width: 680px) {
  .rooms { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .facts__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .shot, .shot--wide, .shot--half { grid-column: span 1; }
  .shot__cap { display: none; }
  .btn-row .btn { width: 100%; }
  .split__badge { position: static; max-width: none; margin-top: 16px; }
  .footer__top { flex-direction: column; }
}

/* --- Motion & print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .header, .burger, .book-bar, .lightbox, .hero__media::after { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; page-break-inside: avoid; }
}