/* ==========================================================================
   DORINGBOS — tokens
   ========================================================================== */
:root{
  --ink:        #14181a;   /* night sky over the farm — cool near-black */
  --ink-soft:   #1c2224;
  --umber:      #1e2426;   /* secondary dark, dusty slate-charcoal for depth between sections */
  --cream:      #f0e6d2;   /* sun-bleached bone */
  --cream-dim:  #d4c7ac;
  --rust:       #a8451f;   /* lit sandstone cliff at golden hour — primary accent */
  --sage:       #5a6248;   /* muted fynbos green */
  --sand:       #cdbd9d;   /* sandstone / muted UI */
  --slate:      #5b6b6c;   /* dusty mountain haze — used for the ridge motif */
  --ember:      #d68a3f;   /* fire pit glow — sparing warm highlight */

  --display: "Bodoni Moda", "Didot", "Iowan Old Style", Georgia, serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-soft: cubic-bezier(.16,.8,.24,1);
  --nav-h: 84px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ background: var(--ink); }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.hide-mobile{ display:inline; }

/* The property name is set in capitals; other headings keep their natural case */
h1,
.nav__mark,
.footer__wordmark{
  text-transform: uppercase;
}

:focus-visible{
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.preloader__inner{
  display:flex; flex-direction:column; align-items:center; gap: 22px;
}
.preloader__mark{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.16em;
  color: var(--cream);
  opacity: 0;
}
.preloader__bar{
  width: min(38vw, 280px);
  height: 1px;
  background: rgba(245,239,226,0.18);
  position: relative;
  overflow: hidden;
}
.preloader__fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background: var(--cream);
}
.preloader__count{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 90;
  height: var(--nav-h);
  display:flex; align-items:center;
  mix-blend-mode: difference;
  transition: background-color .5s var(--ease-soft), height .4s var(--ease-soft);
}
.nav__inner{
  width:100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display:flex; align-items:center; justify-content:space-between;
}
.nav__mark{
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--cream);
  font-weight: 500;
}
.nav__links{
  display:flex; gap: clamp(20px, 2.6vw, 40px);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
}
.nav__links a{ opacity: 0.82; transition: opacity .25s; }
.nav__links a:hover{ opacity: 1; }
.nav__cta{
  display:flex; align-items:center; gap:8px;
  font-size: 0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--cream);
  border: 1px solid rgba(245,239,226,0.55);
  border-radius: 999px;
  padding: 10px 18px;
  transition: background-color .3s, color .3s;
}
.nav__cta:hover{ background: var(--cream); color: var(--ink); }
.nav--scrolled{ background: rgba(22,19,15,0.0); }

.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
  width:32px; height:32px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  height:1px;
  width:100%;
  background: var(--cream);
  transition: transform .35s var(--ease-soft), opacity .25s, width .35s var(--ease-soft);
}
.nav__toggle span:nth-child(2){ width:70%; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); width:100%; }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width:100%; }

.drawer{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), visibility 0s linear .4s;
}
.drawer.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), visibility 0s;
}
.drawer__links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 28px;
}
.drawer__links a{
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--cream);
  padding: 4px 8px;
}
.drawer__cta{
  display:flex; align-items:center; gap:8px;
  font-size: 0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--cream);
  border: 1px solid rgba(245,239,226,0.55);
  border-radius: 999px;
  padding: 14px 26px;
}

@media (max-width: 780px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .drawer, .nav__toggle span{ transition-duration: .01s; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: var(--ink);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.16);
  filter: saturate(1.03);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(15,12,9,.55) 0%, rgba(15,12,9,.12) 30%, rgba(15,12,9,.18) 62%, rgba(15,12,9,.75) 100%);
}
.hero__eyebrow{
  position:absolute; top: calc(var(--nav-h) + 26px); left: clamp(20px, 4vw, 56px);
  color: var(--cream);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  max-width: 60vw;
}
.hero__wordmark{
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  color: var(--cream);
  font-size: clamp(2.1rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  display:flex;
}
.hero__wordmark span{ display:inline-block; will-change: transform, filter, opacity; }
.hero__sub{
  position:absolute; right: clamp(20px, 4vw, 56px); bottom: 96px;
  max-width: 380px;
  text-align: right;
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.55;
  opacity: 0.92;
}
.hero__scroll{
  position:absolute; left: clamp(20px, 4vw, 56px); bottom: 40px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--cream);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero__scroll svg{ overflow: visible; }
.hero__scroll svg line{
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ stroke-dashoffset: 46; }
  50%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -46; }
}

@media (max-width: 780px){
  .hero__sub{ left: clamp(20px,4vw,56px); right: clamp(20px,4vw,56px); text-align:left; bottom:132px; max-width:none; }
  .hero__eyebrow{ max-width: 80vw; }
}

/* ==========================================================================
   Ridge divider (signature motif)
   ========================================================================== */
.ridge{
  position: relative;
  height: 90px;
  background: var(--ink);
  overflow: hidden;
}
.ridge__svg{
  width:100%; height:100%;
  color: var(--slate);
  opacity: 0.7;
}
.ridge__svg path{
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
}
.ridge__svg--soft{ display:none; }
.ridge--3{ background: var(--umber); }

@media (max-width: 780px){
  .ridge__svg--sharp{ display:none; }
  .ridge__svg--soft{ display:block; }
}

/* ==========================================================================
   Intro reveal
   ========================================================================== */
.intro{
  background: var(--ink);
  color: var(--cream-dim);
  padding: clamp(90px, 16vw, 220px) clamp(20px, 6vw, 56px);
}
.intro__inner{ max-width: 1000px; margin: 0 auto; }
.intro__kicker{
  display:block;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 34px;
}
.intro__lines{
  display:block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.4;
}
.intro__lines .line{
  display:block;
  opacity: 0.22;
}
.intro__lines .line--em{
  font-style: italic;
  color: var(--ember);
  margin-top: 0.4em;
}

/* ==========================================================================
   Feature reveal (pinned cottage curtain)
   ========================================================================== */
.feature{
  background: var(--cream);
  padding: clamp(60px,10vw,120px) 0;
}
.feature__stage{
  max-width: 1400px; margin:0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display:grid;
  grid-template-columns: 1fr minmax(280px, 640px) 1fr;
  align-items:center;
  gap: clamp(20px, 3vw, 48px);
}
.feature__side{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  opacity: 0.75;
}
.feature__side--left{ text-align:right; }
.feature__side--right{ text-align:left; }
.feature__card{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 40px 80px -30px rgba(20,15,8,0.45);
}
.feature__card img{ width:100%; height:100%; object-fit:cover; }
.feature__curtain{
  position:absolute; inset:0;
  background: var(--cream);
  transform-origin: top;
}
.feature__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 34px 28px;
  background: linear-gradient(to top, rgba(10,8,5,.75), rgba(10,8,5,0));
  color: var(--cream);
  text-align:center;
}
.feature__dot{ color: var(--ember); font-size: 0.8rem; }
.feature__caption h3{
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 6px 0 14px;
}
.feature__link{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.76rem; letter-spacing:0.1em; text-transform:uppercase;
  border-bottom: 1px solid rgba(245,239,226,.5);
  padding-bottom: 4px;
}

@media (max-width: 900px){
  .feature__stage{ grid-template-columns: 1fr; }
  .feature__side{ text-align:center !important; opacity:.7; font-size:1.1rem; }
  .feature__side--left{ order:1; }
  .feature__card{ order:0; aspect-ratio: 3/4; }
  .feature__side--right{ order:2; }
}

/* ==========================================================================
   Activity panels
   ========================================================================== */
.panel{
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--ink);
}
.panel__img{
  position:absolute; inset:0;
  width:100%; height: 130%; top:-15%;
  object-fit: cover;
  will-change: transform;
}
.panel__scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,8,5,.85) 0%, rgba(10,8,5,.15) 45%, rgba(10,8,5,.25) 100%);
}
.panel__scrim--dark{ background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25) 55%, rgba(0,0,0,.35)); }
.panel__kicker{
  position: relative; z-index:2;
  padding: 0 clamp(20px, 5vw, 64px);
  color: var(--sand);
  font-size: 0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom: 14px;
}
.panel__title{
  position: relative; z-index:2;
  padding: 0 clamp(20px, 5vw, 64px);
  font-family: var(--display);
  font-weight: 600;
  color: var(--cream);
  font-size: clamp(1.9rem, 5vw, 3.7rem);
  line-height: 1.05;
  max-width: 14ch;
}
.panel--right .panel__kicker,
.panel--right .panel__title{ margin-left:auto; text-align:right; }
.panel__cta{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  margin: 26px clamp(20px, 5vw, 64px) 60px;
  color: var(--cream);
  font-size: 0.76rem; letter-spacing:0.1em; text-transform:uppercase;
  border: 1px solid rgba(245,239,226,.55);
  border-radius: 999px;
  padding: 12px 22px;
  width: fit-content;
  transition: background-color .3s, color .3s;
}
.panel--right .panel__cta{ margin-left:auto; margin-right: clamp(20px,5vw,64px); }
.panel__cta:hover{ background: var(--cream); color: var(--ink); }

/* ==========================================================================
   The Farm — pinned parallax
   ========================================================================== */
.land{
  background: var(--umber);
  position: relative;
}
.land__pin{
  height: 100svh;
  min-height: 560px;
  position: relative;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
}
.land__title{
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
  font-size: clamp(2.8rem, 9vw, 7.2rem);
  letter-spacing: 0;
  opacity: 0.9;
  z-index: 1;
  mix-blend-mode: normal;
}
.land__img{
  position:absolute;
  object-fit: cover;
  border: 6px solid var(--umber);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.land__img--a{
  width: min(34vw, 460px); aspect-ratio: 4/5;
  left: 6%; top: 18%;
  z-index: 2;
}
.land__img--b{
  width: min(26vw, 360px); aspect-ratio: 3/4;
  right: 8%; top: 10%;
  z-index: 2;
}
.land__img--c{
  width: min(20vw, 260px); aspect-ratio: 3/4;
  right: 16%; bottom: 8%;
  z-index: 3;
}
.land__copy{
  position:absolute; left:0; right:0; bottom: 7%;
  text-align:center;
  color: var(--cream-dim);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  z-index: 4;
  padding: 0 20px;
}

@media (max-width: 900px){
  .land__pin{
    height: auto; min-height: 100svh; padding: 140px 20px 60px;
    flex-direction: column; justify-content: flex-end;
  }
  .land__img--a{ width: 50vw; left: 4%; top: 6%; bottom: auto; }
  .land__img--b{ width: 38vw; right: 4%; top: 2%; bottom: auto; }
  .land__img--c{ width: 34vw; right: 8%; top: 32%; bottom: auto; }
  .land__copy{ position: static; margin-top: 24px; }
}

/* ==========================================================================
   Accommodation (Stay)
   ========================================================================== */
.stay{
  background: var(--cream);
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px) clamp(40px, 8vw, 100px);
}
.stay__head{
  max-width: 1400px; margin: 0 auto clamp(50px, 8vw, 100px);
  text-align:center;
}
.stay__kicker{
  display:block;
  font-size: 0.76rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--rust);
  margin-bottom: 18px;
}
.stay__title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.7rem);
}
.stay__row{
  max-width: 1400px; margin: 0 auto;
  display:grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 80px);
  align-items:center;
  padding: clamp(40px, 6vw, 70px) 0;
  border-top: 1px solid rgba(22,19,15,0.1);
}
.stay__row:first-of-type{ border-top:none; }
.stay__row--reverse{ grid-template-columns: 0.85fr 1.15fr; }
.stay__row--reverse .stay__img{ order:2; }
.stay__row--reverse .stay__text{ order:1; }
.stay__img{ overflow:hidden; border-radius: 2px; aspect-ratio: 3/2; }
.stay__img img{ width:100%; height:100%; object-fit:cover; }
.stay__num{
  font-family: var(--display);
  font-style: italic;
  color: var(--sage);
  font-size: 1.1rem;
}
.stay__text h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 10px 0 18px;
}
.stay__text p{
  font-size: 1rem;
  line-height: 1.65;
  max-width: 46ch;
  opacity: 0.85;
}

@media (max-width: 820px){
  .stay__row, .stay__row--reverse{ grid-template-columns: 1fr; }
  .stay__row--reverse .stay__img, .stay__row--reverse .stay__text{ order:initial; }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{
  background: var(--cream);
  padding: 0 clamp(20px,4vw,56px) clamp(90px,12vw,160px);
}
.gallery__kicker{
  display:block;
  max-width: 1400px; margin: 0 auto 30px;
  font-size: 0.76rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--rust);
}
.gallery__grid{
  max-width: 1400px; margin:0 auto;
  columns: 3 260px;
  column-gap: 18px;
}
.g-item{
  break-inside: avoid;
  margin-bottom: 18px;
  overflow:hidden;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(28px);
}
.g-item img{ width:100%; height:auto; display:block; transition: transform .6s var(--ease-soft); }
.g-item:hover img{ transform: scale(1.04); }
.g-tall img{ aspect-ratio: 3/4; object-fit:cover; }

@media (max-width: 700px){
  .gallery__grid{ columns: 2 160px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background: var(--umber);
  color: var(--cream-dim);
  padding-top: clamp(70px, 10vw, 120px);
  overflow: hidden;
}
.footer__top{
  max-width: 1400px; margin:0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer__col--right{ text-align:right; }
.footer__kicker{
  display:block;
  font-size: 0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--rust);
  margin-bottom: 18px;
}
.footer__lead{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--cream);
  line-height: 1.3;
}
.footer__email{
  display:inline-block; margin-top: 20px;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(245,239,226,.4);
  padding-bottom: 3px;
}
.footer__addr{ font-size: 0.95rem; line-height: 1.6; }
.footer__social{ margin-top: 20px; display:flex; gap:20px; justify-content:flex-end; font-size: 0.85rem; }
.footer__social a{ opacity: 0.8; }
.footer__social a:hover{ opacity: 1; }

.footer__wordmark-wrap{
  margin-top: clamp(40px, 8vw, 90px);
  overflow: hidden;
  line-height: 0.78;
}
.footer__wordmark{
  display:block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(4.89rem, 18.8vw, 14.57rem);
  text-align:center;
  letter-spacing: normal;
  transform: translateY(27%);
  white-space: nowrap;
}

.footer__bottom{
  border-top: 1px solid rgba(245,239,226,.15);
  margin-top: 0;
  padding: 22px clamp(20px,4vw,56px) 28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size: 0.78rem;
  opacity: 0.7;
}
.footer__bottom-links{ display:flex; gap: 24px; }
.footer__bottom-disabled{ opacity: 0.45; cursor: default; }

@media (max-width: 700px){
  .footer__top{ grid-template-columns: 1fr; text-align:left; }
  .footer__col--right{ text-align:left; }
  .footer__social{ justify-content:flex-start; }
  .footer__wordmark{ font-size: clamp(3.65rem, 14vw, 6.3rem); }
}