/* =========================================================
   InAweStays — Global Styles
   Editorial luxury / heritage / unhurried
   ========================================================= */

:root {
  /* Palette — change these to retheme the entire site */
  --color-bg: #FAF7F2;
  --color-bg-alt: #F2EEE6;
  --color-text: #1C1C1C;
  --color-text-muted: #5A554E;
  --color-rule: #D9D2C5;
  --color-accent: #1B3A6B;
  --color-accent-hover: #142A4D;
  --color-accent-foreground: #FAF7F2;

  /* Type */
  --font-serif: "EB Garamond", "Garamond", Georgia, "Times New Roman", serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* Layout */
  --container: 1280px;
  --container-narrow: 880px;
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.serif-italic { font-style: italic; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--space-xl) 0; }
@media (max-width: 720px) { section { padding: var(--space-lg) 0; } }

.rule {
  height: 1px;
  background: var(--color-rule);
  border: 0;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border: 1px solid var(--color-accent);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--ghost:hover { background: var(--color-text); color: var(--color-bg); }
.btn--large { padding: 1.15rem 2.4rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--color-rule); }
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand {
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  font-style: italic;
}
.brand strong { font-weight: 500; font-style: normal; }

.nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
.nav a {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--color-text); }
.nav .btn { color: var(--color-accent-foreground); }

@media (max-width: 820px) {
  .nav a:not(.btn) { display: none; }
}

/* ---------- Mobile sticky book button ---------- */
.mobile-book {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 60;
  text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
@media (max-width: 720px) {
  .mobile-book { display: inline-flex; }
  body { padding-bottom: 5rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: flex;
  align-items: flex-end;
  color: var(--color-bg);
  overflow: hidden;
  isolation: isolate;
}
.hero__media,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
}
.hero__inner {
  padding: var(--space-xl) 0 var(--space-lg);
  max-width: 760px;
}
.hero__eyebrow {
  color: rgba(255,255,255,0.85);
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: var(--space-sm);
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero p {
  color: rgba(255,255,255,0.92);
  font-size: 1.2rem;
  max-width: 560px;
  margin-bottom: var(--space-md);
}

/* ---------- LQIP ---------- */
.lqip {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.lqip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.lqip img.is-loaded { opacity: 1; }
.lqip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.1);
  transition: opacity 0.6s var(--ease);
}
.lqip.is-loaded::before { opacity: 0; }

/* ---------- Heritage / Editorial section ---------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.editorial--reverse { direction: rtl; }
.editorial--reverse > * { direction: ltr; }
.editorial__media {
  aspect-ratio: 4 / 5;
  background: var(--color-bg-alt);
}
.editorial__body p { font-size: 1.1rem; }
.editorial__sig {
  margin-top: var(--space-md);
  font-style: italic;
  color: var(--color-text-muted);
}
@media (max-width: 820px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial--reverse { direction: ltr; }
}

/* ---------- Section headers ---------- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}
.section-head--left { text-align: left; margin-left: 0; }

/* ============================================================
   InAweStays — CSS ADDITIONS for ladder layout + scroll effects
   
   INSTRUCTIONS:
   1. In styles.css, DELETE the entire block marked
      "---------- Cottage grid ----------"
      (from .cottage-grid down to the closing @media for it)
      That's approximately lines 161–195 in your current styles.css
   
   2. PASTE everything below this comment block
      at the end of styles.css (before the closing comment
      "COTTAGE PAGE" section is fine — just add before that)
   ============================================================ */
 
 
/* ---------- Ladder layout ---------- */
.ladder {
  margin-top: var(--space-lg);
}
 
.ladder__row {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0;
  align-items: center;
  border-top: 1px solid var(--color-rule);
}
 
.ladder__row--reverse {
  grid-template-columns: 45fr 55fr;
}
 
.ladder__row--reverse .ladder__media {
  order: 2;
}
 
.ladder__row--reverse .ladder__body {
  order: 1;
}
 
.ladder__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
}
 
.ladder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease-out;
}

 
/* Zoom-as-you-scroll — driven by JS below */
/*.ladder__media img.is-zoomed {
  transform: scale(1.06);
}*/
 
.ladder__body {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
}
 
.ladder__body h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  margin: 0.4rem 0 0.8rem;
}
 
.ladder__body p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}
 
.ladder__link {
  display: inline-block;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.15rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
 
.ladder__link:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
 
@media (max-width: 820px) {
  .ladder__row,
  .ladder__row--reverse {
    grid-template-columns: 1fr;
  }
 
  .ladder__row--reverse .ladder__media,
  .ladder__row--reverse .ladder__body {
    order: unset;
  }
 
  .ladder__media {
    aspect-ratio: 3 / 2;
  }
 
  .ladder__body {
    padding: var(--space-md) 0;
    /* on mobile, body lives inside container padding */
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
  }
}
 
 
/* ============================================================
   InAweStays — REPLACE the existing "Scroll reveal" block
   in styles.css with this entire block.
   Find: "---------- Scroll reveal ----------"
   Replace everything from there down to the closing
   @media (prefers-reduced-motion) block with this.
   ============================================================ */

/* ---------- Scroll reveal — text elements only ---------- */

/*
   .reveal is on the <article> (ladder row) but we only want
   the TEXT body to animate — not the image.
   Target .ladder__body inside a .reveal row,
   and any standalone .reveal elements (section heads, etc.)
*/
.reveal .ladder__body,
.reveal:not(:has(.ladder__body)) {
  opacity: 0;
  transform: translateY(48px);        /* starts lower, more travel = more visible */
  transition:
    opacity 1.5s var(--ease),          /* 2× slower than before */
    transform 1.5s var(--ease);
}

/* Scrolling DOWN — slides up into place */
.reveal.is-visible .ladder__body,
.reveal.is-visible:not(:has(.ladder__body)) {
  opacity: 1;
  transform: translateY(0);
}

/* Scrolling UP — slides DOWN into place (reversed) */
.reveal.is-visible-up .ladder__body,
.reveal.is-visible-up:not(:has(.ladder__body)) {
  opacity: 1;
  transform: translateY(0);
}

/* Starting position for scroll-up reveal — above instead of below */
.reveal:not(.is-visible):not(.is-visible-up) .ladder__body,
.reveal:not(.is-visible):not(.is-visible-up):not(:has(.ladder__body)) {
  transform: translateY(48px);
}

/* When we know scroll direction is up, start from above */
/* JS adds is-visible-up which transitions from -48px */
.ladder__row:not(.is-visible):not(.is-visible-up) .ladder__body {
  transform: translateY(48px);
}

/* The image inside a reveal row — always fully visible, no float */
.reveal .ladder__media,
.reveal .ladder__media img {
  opacity: 1 !important;
  transform: none;   /* zoom handled by JS inline style, not this */
  transition: none;
}
/* Re-enable the JS zoom transition on the img specifically */
.ladder__media img {
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal .ladder__body,
  .reveal:not(:has(.ladder__body)) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
 

/* ---------- Experiences ---------- */
.experiences {
  background: var(--color-bg-alt);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.exp { }
.exp__num {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-sm);
}
.exp h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.exp p { color: var(--color-text-muted); }
@media (max-width: 820px) {
  .exp-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ---------- Parallax mask ---------- */
.parallax {
  height: 60vh;
  min-height: 380px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}
.parallax__quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-style: italic;
  line-height: 1.4;
  background: rgba(0,0,0,0.35);
}
.parallax__quote span { max-width: 820px; display: block; }
@media (max-width: 820px) {
  .parallax { background-attachment: scroll; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.testimonial {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
}
.testimonial p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-text);
}
.testimonial cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 820px) { .testimonials { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-lg) 0 var(--space-md);
}
.site-footer a { color: var(--color-bg); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.site-footer h4 {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.6);
  margin-bottom: var(--space-sm);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; font-size: 0.95rem; }
.site-footer .brand { color: var(--color-bg); margin-bottom: var(--space-sm); display: block; }
.footer-bottom {
  border-top: 1px solid rgba(250,247,242,0.15);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: rgba(250,247,242,0.6);
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   InAweStays — ABOUT PAGE ADDITIONS
   ============================================================ */


/* ---------- Page hero (interior pages) ---------- */
/*
   Used on About, FAQ, Gallery, Reviews pages.
   Shorter than the homepage hero — image with caption overlay.
*/
.page-hero {
  position: relative;
  height: clamp(320px, 52vh, 580px);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
}

.page-hero__caption {
  position: absolute;
  bottom: var(--space-lg);
  left: 0;
  right: 0;
  z-index: 2;
  color: #fff;
}

.page-hero__caption .eyebrow {
  color: rgba(255,255,255,0.8);
}

.page-hero__caption h1 {
  color: #fff;
  margin: 0;
  max-width: 760px;
}

@media (max-width: 720px) {
  .page-hero {
    height: clamp(260px, 44vh, 400px);
  }
  .page-hero__caption {
    bottom: var(--space-md);
  }
}


/* ---------- Full-width image block (about page) ---------- */
/*
   Used between editorial sections for breathing room.
   Cinematic proportion, edge-to-edge, no container.
*/
.about-full-img {
  width: 100%;
  height: clamp(300px, 48vw, 640px);
  overflow: hidden;
  display: block;
}

.about-full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ---------- Name list (What's In A Name section) ---------- */
.name-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  border-top: 1px solid var(--color-rule);
}

.name-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 1.05rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.name-list li strong {
  min-width: 120px;
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
}


/* =========================================================
   COTTAGE PAGE
   ========================================================= */
.cottage-hero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  overflow: hidden;
}
.cottage-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cottage-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.cottage-hero__cap {
  position: absolute;
  bottom: var(--space-lg);
  left: 0; right: 0;
  color: #fff;
}
.cottage-hero__cap .eyebrow { color: rgba(255,255,255,0.8); }
.cottage-hero__cap h1 { color: #fff; margin: 0; }

.cottage-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.cottage-intro__facts {
  border-left: 1px solid var(--color-rule);
  padding-left: var(--space-md);
}
.facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  margin: 0;
}
.facts dt {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.3rem;
}
.facts dd { margin: 0; }

@media (max-width: 820px) {
  .cottage-intro { grid-template-columns: 1fr; }
  .cottage-intro__facts { border-left: 0; border-top: 1px solid var(--color-rule); padding: var(--space-md) 0 0; }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.6rem;
}
.gallery > * { aspect-ratio: 4 / 3; }
.gallery > *:nth-child(1) { grid-column: span 8; aspect-ratio: 16/10; }
.gallery > *:nth-child(2) { grid-column: span 4; }
.gallery > *:nth-child(3) { grid-column: span 4; }
.gallery > *:nth-child(4) { grid-column: span 4; }
.gallery > *:nth-child(5) { grid-column: span 4; }
@media (max-width: 720px) {
  .gallery > *,
  .gallery > *:nth-child(n) { grid-column: span 12; aspect-ratio: 4/3; }
}

.amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 2rem;
  list-style: none;
  padding: 0;
}
.amenities li {
  border-bottom: 1px solid var(--color-rule);
  padding: 0.9rem 0;
  font-size: 1rem;
}
@media (max-width: 720px) { .amenities { grid-template-columns: 1fr 1fr; } }

.reserve-strip {
  background: var(--color-text);
  color: var(--color-bg);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}
.reserve-strip h2 { color: #fff; margin-bottom: var(--space-sm); }
.reserve-strip p { color: rgba(255,255,255,0.75); margin-bottom: var(--space-md); }
.reserve-strip .btn {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}
.reserve-strip .btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  border-color: var(--color-accent);
}