/* ============================================================
   A-Frame The Wolf Transfagarasan
   Palette drawn from the property's own photographs:
   larch cladding, shingle graphite, dusk sky, valley haze,
   and the yellow-green of the lit hot tub water.
   ============================================================ */

:root{
  --amurg:      #1b242c;   /* dusk sky over the valley - dark ground */
  --amurg-2:    #232f39;   /* one step up, for cards on dark         */
  --sindrila:   #39424c;   /* roof shingle graphite                  */
  --lemn:       #c4884a;   /* larch cladding - the warm structural   */
  --lemn-2:     #a96f38;
  --lemn-pal:   #e7d3b4;   /* pale pine, bedding - text on dark      */
  --ceata:      #e9ebe6;   /* valley haze - light ground             */
  --ceata-2:    #dbdfd9;
  --tus:        #1c242a;   /* text on light                          */
  --apa:        #c6d64e;   /* lit hot-tub water - single spot accent */

  --d: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --b: 'Petrona', Georgia, 'Times New Roman', serif;
  --m: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --band-y: clamp(4rem, 9vw, 8.5rem);
  --maxw: 1360px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ceata);
  color:var(--tus);
  font-family:var(--b);
  font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amurg); color:var(--ceata);
  padding:.75rem 1.25rem; font-family:var(--m); font-size:.8rem;
}
.skip:focus{ left:0; }

/* -- shared type -------------------------------------------- */

.label{
  font-family:var(--m);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lemn-2);
  margin:0 0 1rem;
}
.label--onDark{ color:var(--lemn); }

.h2{
  font-family:var(--d);
  font-weight:700;
  font-size:clamp(2rem, 1.2rem + 3.4vw, 3.9rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 .75rem;
}

.bandhead{ max-width:56ch; margin:0 0 clamp(2.25rem,4vw,3.75rem); }
.bandhead__sub{ margin:0; font-size:1.05em; opacity:.82; }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks > li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.42rem;
  font-size:.97em;
}
.ticks > li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:.5rem; height:.5rem;
  background:var(--lemn);
}

.btn{
  display:inline-block;
  font-family:var(--m);
  font-size:.82rem;
  letter-spacing:.06em;
  text-decoration:none;
  padding:.95rem 1.5rem;
  border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--lemn); color:#20160c; }
.btn--solid:hover{ background:var(--lemn-pal); }
.btn--ghost{ border-color:rgba(231,211,180,.5); color:var(--lemn-pal); }
.btn--ghost:hover{ border-color:var(--lemn-pal); background:rgba(231,211,180,.1); }
.btn--lg{ padding:1.15rem 2rem; font-size:.9rem; }

/* while WHATSAPP_NUMAR is empty the CTA is visibly not yet live */
.btn.is-pending,
.topbar__cta.is-pending{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
.wa-note{
  position:relative;
  margin:.9rem 0 0;
  font-family:var(--m); font-size:.72rem; letter-spacing:.07em;
  color:rgba(231,211,180,.62);
}
.wa-note[hidden]{ display:none; }

/* -- top bar ------------------------------------------------ */

.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--pad);
  background:linear-gradient(to bottom, rgba(27,36,44,.85), rgba(27,36,44,0));
  transition:background .3s ease;
}
.topbar.is-stuck{
  background:var(--amurg);
  box-shadow:0 1px 0 rgba(231,211,180,.14);
}
.topbar__name{
  font-family:var(--d); font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; color:var(--ceata); text-decoration:none;
  white-space:nowrap;
}
.topbar__nav{ display:flex; gap:1.35rem; margin-left:auto; }
.topbar__nav a{
  font-family:var(--m); font-size:.76rem; letter-spacing:.05em;
  color:rgba(233,235,230,.78); text-decoration:none;
}
.topbar__nav a:hover{ color:var(--apa); }
.topbar__cta{
  font-family:var(--m); font-size:.76rem; letter-spacing:.05em;
  color:#20160c; background:var(--lemn);
  padding:.6rem 1rem; text-decoration:none; white-space:nowrap;
}
.topbar__cta:hover{ background:var(--lemn-pal); }

@media (max-width: 900px){
  .topbar__nav{ display:none; }
  .topbar__cta{ margin-left:auto; }
}

/* -- hero --------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--amurg);
}
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  animation:settle 1900ms cubic-bezier(.16,.7,.2,1) both;
}
@keyframes settle{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,27,33,.94) 0%, rgba(20,27,33,.72) 26%, rgba(20,27,33,.06) 62%),
    linear-gradient(to right, rgba(20,27,33,.55), rgba(20,27,33,0) 55%);
}

/* narrow screens put the type over the bright window, so the scrim carries more
   and the headline shrinks to stay inside the dark half */
@media (max-width:900px){
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(20,27,33,.96) 0%, rgba(20,27,33,.9) 38%, rgba(20,27,33,.5) 66%, rgba(20,27,33,.12) 90%);
  }
}

.hero__type{
  position:relative;
  padding:0 var(--pad) clamp(1.5rem,3vw,2.5rem);
  max-width:min(52rem, 92vw);
  color:var(--ceata);
}
.hero .eyebrow{
  font-family:var(--m); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lemn); margin:0 0 1.1rem;
}
.hero__title{
  font-family:var(--d);
  font-weight:800;
  font-size:clamp(2.35rem, 1rem + 5.6vw, 5.1rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.hero__title em{
  font-style:normal;
  font-weight:400;
  color:var(--lemn-pal);
}
.hero__sub{
  margin:0 0 1.8rem;
  max-width:42ch;
  font-size:1.08em;
  color:rgba(233,235,230,.88);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

@media (max-width:600px){
  .hero__photo{ object-position:50% 30%; }
  .hero__type{
    padding-top:2.25rem;
    background:linear-gradient(to top, rgba(20,27,33,.8), rgba(20,27,33,0));
  }
  .hero__title{ font-size:2rem; }
  .hero__sub{ font-size:1rem; margin-bottom:1.35rem; }
  .hero .eyebrow{ margin-bottom:.75rem; font-size:.68rem; letter-spacing:.16em; }
  .hero__actions{ display:grid; }
}

/* the property has a real wooden signpost in the yard; these are its numbers */
.signpost{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.35rem 1.6rem;
  padding:.9rem var(--pad);
  border-top:1px solid rgba(231,211,180,.22);
  font-family:var(--m); font-size:.71rem; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(231,211,180,.72);
  background:rgba(20,27,33,.55);
}
.signpost__item b{ color:var(--apa); font-weight:500; margin-right:.35rem; }
.signpost__item--coord{ margin-left:auto; color:rgba(231,211,180,.45); }
@media (max-width:700px){
  .signpost__item--coord{ display:none; }
  .signpost__item:nth-child(n+4){ display:none; }
}

.reveal{ opacity:0; transform:translateY(14px); animation:rise 900ms cubic-bezier(.16,.7,.2,1) both; }
.reveal[data-delay="0"]{ animation-delay:180ms; }
.reveal[data-delay="1"]{ animation-delay:330ms; }
.reveal[data-delay="2"]{ animation-delay:520ms; }
.reveal[data-delay="3"]{ animation-delay:680ms; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .hero__photo, .reveal{ animation:none; opacity:1; transform:none; }
}

/* -- bands: background spans full width, content stays inside --maxw -- */

.band{
  padding-block:var(--band-y);
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2));
}
.band--light{ background:var(--ceata); color:var(--tus); }
.band--dark{ background:var(--amurg); color:var(--lemn-pal); }
.band--water{ background:var(--sindrila); color:var(--lemn-pal); }

.band--dark .h2, .band--water .h2{ color:var(--ceata); }

/* -- intro -------------------------------------------------- */

.intro{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.intro__quote{
  margin:0 0 1.25rem;
  font-size:clamp(1.1rem, .95rem + .7vw, 1.5rem);
  line-height:1.45;
  font-style:italic;
  color:var(--tus);
  border-left:3px solid var(--lemn);
  padding-left:clamp(1rem,2vw,1.75rem);
}
.intro__meta{ margin:0; font-size:.95em; opacity:.75; }

.facts{ margin:0; }
.facts__row{
  display:grid; grid-template-columns:minmax(7rem,10rem) 1fr;
  gap:1rem;
  padding:.85rem 0;
  border-top:1px solid rgba(28,36,42,.16);
}
.facts__row:last-child{ border-bottom:1px solid rgba(28,36,42,.16); }
.facts__row > dt{
  font-family:var(--m); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; padding-top:.28em; color:var(--lemn-2);
}
.facts__row > dd{ margin:0; }
.score{ font-family:var(--d); font-size:1.3em; font-weight:700; }

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

/* -- the two cabins ----------------------------------------- */

.cabins__pair{ margin:0 0 clamp(2rem,4vw,3.5rem); }
.cabins__pair img{ width:100%; }
.cabins__pair figcaption{
  font-family:var(--m); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(231,211,180,.6);
  padding-top:.75rem;
}

.cabins__spec{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.spec__h{
  font-family:var(--d); font-weight:600;
  font-size:1.22rem; letter-spacing:-.01em;
  margin:0 0 .9rem; color:var(--ceata);
}
.spec__img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  margin-bottom:1rem;
  filter:saturate(.94);
}

/* -- terrace ------------------------------------------------ */

.terrace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.terrace__text p{ color:rgba(231,211,180,.9); }
.terrace__small{ font-size:.95em; opacity:.75; }
.terrace__photos{ display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; align-items:end; }
.terrace__photos img{ width:100%; object-fit:cover; aspect-ratio:3/4; }

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

/* -- gallery ------------------------------------------------ */

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.filter{
  font-family:var(--m); font-size:.75rem; letter-spacing:.06em;
  background:transparent; color:var(--tus);
  border:1px solid rgba(28,36,42,.24);
  padding:.55rem .9rem; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.filter span{ opacity:.45; margin-left:.4rem; }
.filter:hover{ border-color:var(--lemn); }
.filter.is-active{ background:var(--amurg); border-color:var(--amurg); color:var(--ceata); }
.filter.is-active span{ opacity:.55; }

.grid{
  columns:4 16rem;
  column-gap:.9rem;
}
.grid__item{
  break-inside:avoid;
  margin:0 0 .9rem;
  padding:0; border:0; background:none; cursor:zoom-in;
  width:100%; display:block;
  position:relative;
}
.grid__item img{
  width:100%; height:auto;
  transition:opacity .2s ease, transform .35s cubic-bezier(.16,.7,.2,1);
}
.grid__item:hover img{ opacity:.9; transform:scale(1.012); }
.grid__item[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .grid__item:hover img{ transform:none; }
}

/* -- amenities ---------------------------------------------- */

.amen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(13rem,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
}
.amen__h{
  font-family:var(--m); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lemn);
  margin:0 0 1rem; padding-bottom:.65rem;
  border-bottom:1px solid rgba(231,211,180,.2);
}
.amen .ticks > li{ color:rgba(231,211,180,.92); }

/* -- road / location ---------------------------------------- */

.road__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.dist{ list-style:none; margin:0; padding:0; }
.dist__row{
  display:grid; grid-template-columns:6.5rem 1fr;
  gap:1rem; align-items:baseline;
  padding:.9rem 0;
  border-top:1px solid rgba(28,36,42,.16);
}
.dist__row:last-child{ border-bottom:1px solid rgba(28,36,42,.16); }
.dist__km{
  font-family:var(--m); font-size:.95rem; font-weight:500;
  color:var(--lemn-2); letter-spacing:-.01em;
}
.dist__what{ font-size:1.02em; }
.dist__what i{
  font-family:var(--m); font-style:normal; font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase;
  opacity:.5; margin-left:.5rem;
}

.road__map iframe{
  width:100%; aspect-ratio:7/5; height:auto; border:0;
  background:var(--ceata-2);
  filter:saturate(.72) contrast(1.02);
}
.road__addr{ margin:1rem 0 0; font-size:.95em; }
.road__addr a{ color:var(--lemn-2); }
.road__coord{
  display:block; font-family:var(--m); font-size:.74rem;
  letter-spacing:.08em; opacity:.55; margin-top:.35rem;
}

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

/* -- guests ------------------------------------------------- */

.bigscore{
  font-family:var(--d); font-weight:800;
  color:var(--apa);
  letter-spacing:-.04em;
}
.scores{
  list-style:none; margin:0 0 clamp(2rem,4vw,3rem); padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1px; background:rgba(231,211,180,.18);
  border:1px solid rgba(231,211,180,.18);
}
.scores > li{
  background:var(--amurg);
  padding:1.1rem 1rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.scores > li span{
  font-family:var(--m); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; opacity:.6;
}
.scores > li b{
  font-family:var(--d); font-size:1.75rem; font-weight:700;
  color:var(--ceata); letter-spacing:-.03em;
}

.quotes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.quote{ margin:0; display:flex; flex-direction:column; }
.quote blockquote{
  flex:1;
  margin:0 0 .85rem;
  font-size:1.06em; font-style:italic; line-height:1.5;
  color:var(--lemn-pal);
}
.quote figcaption{
  font-family:var(--m); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lemn);
}
.quotes__note{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  font-size:.88em; color:rgba(231,211,180,.55);
  max-width:60ch;
}

/* -- house rules -------------------------------------------- */

/* fixed column counts so the last row never leaves an empty cell */
.rules__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:rgba(28,36,42,.14);
  border:1px solid rgba(28,36,42,.14);
}
@media (max-width:1000px){ .rules__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .rules__grid{ grid-template-columns:1fr; } }
.rule{ background:var(--ceata); padding:1.35rem 1.25rem; }
.rule__k{
  font-family:var(--m); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lemn-2); margin:0 0 .45rem;
}
.rule__v{
  font-family:var(--d); font-weight:600; font-size:1.12rem;
  letter-spacing:-.01em; margin:0;
}
.rule__n{ margin:.5rem 0 0; font-size:.92em; opacity:.72; }

/* -- book --------------------------------------------------- */

.book{
  position:relative; overflow:hidden;
  background:var(--amurg);
  text-align:center;
  padding-block:clamp(5rem,11vw,10rem);
}
.book__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 55%;
  opacity:.4;
}
.book__inner{ position:relative; max-width:44rem; margin-inline:auto; }
.book__h{
  font-family:var(--d); font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,4rem);
  line-height:1; letter-spacing:-.035em;
  margin:0 0 1rem; color:var(--ceata);
}
.book__p{ margin:0 0 2rem; color:rgba(233,235,230,.9); }
.book__note{
  margin:1.25rem 0 0;
  font-family:var(--m); font-size:.72rem; letter-spacing:.08em;
  color:rgba(231,211,180,.62);
}

/* -- footer ------------------------------------------------- */

.foot{
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between;
  padding:clamp(2.5rem,5vw,4rem) var(--pad);
  background:#141b21; color:rgba(231,211,180,.72);
  font-size:.92rem;
}
.foot p{ margin:0 0 .3rem; }
.foot__name{ font-family:var(--d); font-weight:600; color:var(--ceata); font-size:1.02rem; }
.foot__coord{ font-family:var(--m); font-size:.72rem; letter-spacing:.08em; opacity:.6; }
.foot__r{ text-align:right; max-width:26rem; }
.foot__r a{ color:var(--lemn); }
.foot__wa.is-pending{ opacity:.5; pointer-events:none; }
.foot__fine{ margin-top:.75rem; font-size:.8rem; opacity:.55; }
@media (max-width:700px){ .foot__r{ text-align:left; } }

/* -- lightbox ----------------------------------------------- */

.lb{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,19,24,.96);
  padding:clamp(1rem,4vw,3rem);
}
.lb[hidden]{ display:none; }
.lb__img{
  max-width:100%; max-height:88vh;
  object-fit:contain;
}
.lb__close,.lb__nav{
  position:absolute;
  background:none; border:0; cursor:pointer;
  color:var(--ceata); font-family:var(--d);
  line-height:1; padding:.5rem .9rem;
}
.lb__close{ top:1rem; right:1.25rem; font-size:2.4rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3.2rem; }
.lb__nav--prev{ left:.25rem; }
.lb__nav--next{ right:.25rem; }
.lb__close:hover,.lb__nav:hover{ color:var(--apa); }
.lb__count{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  margin:0; font-family:var(--m); font-size:.74rem;
  letter-spacing:.14em; color:rgba(231,211,180,.65);
}

body.is-locked{ overflow:hidden; }