/* =========================================================
   L'Hirondelle Guesthouse — prototype stylesheet
   Order: tokens → reset → primitives → sections in document order
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --shell:#FBF9F5;
  --sand:#EFE7DA;
  /* Deep blue, picked to sit with the navy in the logo. */
  --sea:#1D3A5F;
  --sea-deep:#132845;
  --coral:#C4685A;
  --ink:#23211E;
  --ink-soft:#6B655D;

  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;

  --gutter:clamp(1.25rem,5vw,4rem);
  --section-y:clamp(4.5rem,10vw,9rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--shell);color:var(--ink);
  font-family:var(--font-body);font-weight:300;font-size:1rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.08;margin:0;letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------- PRIMITIVES ---------- */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.label{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;line-height:1.6;margin:0;
}
.display{font-family:var(--font-display);font-weight:300;font-size:clamp(2.25rem,6vw,4.5rem);line-height:1.05}
.section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .label{margin-bottom:1.1rem}
/* ch is relative to the element's own font-size, so the measure is set on the
   display heading itself — setting it on the wrapper would resolve against
   the much smaller body size and squeeze the heading into a narrow column. */
.section-head .display{max-width:14ch}
.section-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;max-width:none;
}
.section-head--split > div{max-width:46ch}

.btn{
  display:inline-block;font-family:var(--font-body);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  padding:.95rem 1.9rem;border:1px solid currentColor;background:none;
  cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease);
}
.btn--ghost{color:inherit}
.btn--ghost:hover{background:var(--ink);color:var(--shell);border-color:var(--ink)}
.site-header:not(.is-solid) .btn--ghost:hover{background:var(--shell);color:var(--sea);border-color:var(--shell)}
.btn--solid{background:var(--sea);color:var(--shell);border-color:var(--sea)}
.btn--solid:hover{background:var(--sea-deep);border-color:var(--sea-deep)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;color:var(--shell);
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease),background .45s var(--ease),
             color .45s var(--ease),border-color .45s var(--ease);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding-block:1.5rem;
}
.site-header.is-solid{background:var(--shell);color:var(--ink);border-bottom-color:rgba(35,33,30,.12)}
.site-header.is-hidden{transform:translateY(-100%)}

.wordmark{
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:.03em;
  white-space:nowrap;
}
/* multiply drops the logo's baked-in white background against the cream
   header. It only works over light surfaces — hence the wordmark over the
   video. A transparent SVG would remove the need for both tricks. */
/* The two marks are stacked rather than swapped in flow, so neither one
   shifts the header layout as they cross-fade. */
.brand{position:relative;display:inline-flex;align-items:center;line-height:0}
.brand-logo{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  line-height:0;opacity:0;pointer-events:none;
  /* Delayed so the header background is opaque before the logo appears:
     multiply only hides the white backing over a solid light surface, and
     mid-transition it would flash as a white box against the video. */
  transition:opacity .35s var(--ease) .22s;
}
.brand-logo img{height:clamp(38px,4vw,52px);width:auto;mix-blend-mode:multiply}
.wordmark{transition:opacity .3s var(--ease)}
.site-header.is-solid .wordmark{opacity:0;pointer-events:none}
.site-header.is-solid .brand-logo{opacity:1;pointer-events:auto}

.nav{display:flex;gap:2.25rem}
.nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding-block:.35rem;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}

/* ---------- 1. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  padding-bottom:clamp(3rem,9vh,7rem);isolation:isolate;
  /* The video is deliberately oversized to cover the viewport; without this
     it widens the document on tall/narrow screens and the page scrolls
     sideways. */
  overflow:hidden;
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
}
/* Video sized to cover the viewport while preserving 16:9, centred so the
   crop takes from the sides on tall screens and top/bottom on wide ones. */
.hero__video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none;z-index:-2;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero__video.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}

.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(19,40,69,.55) 0%,rgba(19,40,69,.22) 30%,rgba(19,40,69,.88) 100%);
}
.hero__body{color:var(--shell)}
.hero__eyebrow{color:rgba(251,249,245,.75);margin-bottom:1.5rem}
.hero__title{max-width:16ch;font-size:clamp(2.5rem,7vw,5.75rem)}
.hero__cue{
  position:absolute;left:50%;bottom:2rem;width:1px;height:64px;
  background:rgba(251,249,245,.3);overflow:hidden;
}
.hero__cue::after{
  content:"";position:absolute;inset:0;background:var(--shell);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* ---------- 2. WELCOME ---------- */
.welcome__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.welcome__title{margin-bottom:1.75rem;font-size:clamp(1.9rem,3.6vw,3rem)}
.welcome__text .label{margin-bottom:1.1rem}
.welcome__text p{max-width:46ch;color:var(--ink-soft)}
.welcome__media img{width:100%;aspect-ratio:4/5;object-fit:cover}

@media (min-width:900px){
  /* The welcome image bleeds to the right viewport edge. Rather than a
     negative margin (which widens the grid item and causes overflow), the
     container drops its right padding and max-width, and the left edge is
     re-created with padding that matches the centred container. */
  .welcome .container{
    max-width:none;padding-right:0;
    padding-left:max(var(--gutter),calc((100vw - 1280px)/2 + var(--gutter)));
  }
  .welcome__grid{grid-template-columns:minmax(0,46ch) 1fr}
  .welcome__media img{aspect-ratio:3/4}
}

/* ---------- 3. APARTMENTS ---------- */
.apartments{background:var(--sand)}
.cards{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}

.card__media{overflow:hidden;margin-bottom:1.5rem}
.card__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__title{font-size:1.6rem;margin-bottom:.6rem}
.card__desc{color:var(--ink-soft);max-width:32ch;margin-bottom:1rem}
.card__price{color:var(--ink)}

/* ---------- 4. THE HOUSE ---------- */
.house__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:900px){.house__grid{grid-template-columns:1fr 1fr}}
.house__head .label{margin-bottom:1.1rem}
.house__head .display{font-size:clamp(1.9rem,3.6vw,3rem);max-width:14ch}
.house__list{list-style:none;margin:0;padding:0}
.house__list li{
  border-top:1px solid rgba(35,33,30,.12);
  padding-block:1.1rem;color:var(--ink-soft);
}
.house__list li:last-child{border-bottom:1px solid rgba(35,33,30,.12)}

/* ---------- 5. PRASLIN ---------- */
.praslin{background:var(--sand)}
.praslin__intro{margin-top:1.5rem;color:var(--ink-soft)}
.rail__controls{display:flex;gap:.75rem;flex-shrink:0}
.rail__btn{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(35,33,30,.25);
  background:none;cursor:pointer;position:relative;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.rail__btn:hover{background:var(--sand);border-color:var(--ink)}
.rail__btn::after{
  content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-right:1px solid var(--ink);border-top:1px solid var(--ink);
}
.rail__prev::after{transform:translate(-40%,-50%) rotate(-135deg)}
.rail__next::after{transform:translate(-60%,-50%) rotate(45deg)}

.rail{
  display:flex;gap:clamp(1rem,2vw,1.75rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* scroll-padding must match the leading spacer. Without it, mandatory
     snapping aligns the first card to the raw scrollport edge and scrolls
     straight past the offset, clipping the card against the viewport. */
  scroll-padding-left:max(var(--gutter),calc((100vw - 1280px)/2 + var(--gutter)));
}
.rail::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 clamp(260px,32vw,420px);scroll-snap-align:start}
.rail__start{flex:0 0 max(var(--gutter),calc((100vw - 1280px)/2 + var(--gutter)))}
.rail__end{flex:0 0 var(--gutter)}
.rail__media{overflow:hidden;margin-bottom:1.25rem}
.rail__media img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease)}
.rail__item:hover .rail__media img{transform:scale(1.04)}
.rail__title{font-size:1.5rem;margin-bottom:.5rem}
.rail__desc{color:var(--ink-soft);max-width:34ch}

/* ---------- 6. SUSTAINABILITY ---------- */
.sustain{background:var(--sea);color:var(--shell)}
.sustain .label{color:rgba(251,249,245,.6)}
.sustain__inner{max-width:52rem}
.sustain__title{max-width:20ch;margin:1.1rem 0 2rem;font-size:clamp(2rem,4.2vw,3.4rem)}
.sustain__body{color:rgba(251,249,245,.8);max-width:52ch}
.sustain__cert{
  margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid var(--coral);display:inline-block;
}

/* ---------- 7. GUEST VOICES ---------- */
.voices__inner{max-width:62ch;margin-inline:auto;text-align:center}
.voices__quote{
  margin:0 0 1.5rem;font-family:var(--font-display);font-style:italic;
  font-weight:300;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.3;
}
.voices__gloss{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.5rem}
.voices__attr{margin-bottom:3rem}
.voices__certs{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1.5rem;padding-top:2rem;border-top:1px solid rgba(35,33,30,.12);
}

/* ---------- 8. ENQUIRE ---------- */
.enquire{background:var(--sand)}
.enquire__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:900px){.enquire__grid{grid-template-columns:1fr 1.2fr}}
.enquire__aside .display{font-size:clamp(1.9rem,3.6vw,3rem);margin:1.1rem 0 2.5rem}
.enquire__details{margin:0}
.enquire__details dt{margin-bottom:.35rem}
.enquire__details dd{margin:0 0 1.5rem;color:var(--ink-soft)}

.enquiry-form{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}
.field{display:flex;flex-direction:column;grid-column:span 2}
@media (min-width:600px){.field--half{grid-column:span 1}}
.field--full{grid-column:span 2}
.field label{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.6rem;
}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-weight:300;font-size:1rem;color:var(--ink);
  background:none;border:0;border-bottom:1px solid rgba(35,33,30,.25);
  padding:.5rem 0;border-radius:0;transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--coral);
}
.field .is-invalid{border-bottom-color:var(--coral)}
.field .is-invalid + .field__error{display:block}
.form-success{
  font-family:var(--font-display);font-size:1.5rem;line-height:1.4;
  color:var(--sea);max-width:34ch;
}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--sea-deep);color:var(--shell);padding-block:clamp(3rem,6vw,5rem)}
.site-footer__inner{display:grid;gap:2.5rem}
@media (min-width:900px){
  .site-footer__inner{grid-template-columns:1fr auto 1fr;align-items:center}
  .footer-meta{text-align:right}
}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.75rem}
.footer-nav a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;transition:opacity .35s var(--ease)}
.footer-nav a:hover{opacity:1}
.footer-meta{font-size:.85rem;color:rgba(251,249,245,.6);margin:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:899px){
  .nav{display:none}
  .section-head--split{flex-direction:column;align-items:flex-start}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}