:root{
  --cream:#F2EDE1;
  --cream-dark:#E9E2D2;
  --green:#3E4A34;
  --green-dark:#2F3A28;
  --rust:#A9683E;
  --gold:#B08D4F;
  --ink:#2B2B25;
  --paper:#FBF8F1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}
h1,h2,h3,.serif{font-family:'Playfair Display',serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--rust);margin-bottom:.9rem}
.eyebrow.on-green{color:var(--gold)}
.btn{display:inline-block;padding:.85rem 2.1rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;border:none;cursor:pointer;transition:all .2s}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green:hover{background:var(--green-dark)}
.btn-outline{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn-outline:hover{background:var(--green);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--green-dark)}
.btn-cream:hover{background:#fff}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.4rem}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid rgba(62,74,52,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.4rem;max-width:1240px;margin:0 auto}
.nav-links{display:flex;gap:1.6rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--green-dark)}
.nav-links a:hover{color:var(--rust)}
/* doubles as the Home link */
.logo{display:block;text-align:center;line-height:1.15}
.logo .name{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--green-dark);white-space:nowrap;transition:color .2s}
/* the two lines' boxes touch, so the gap was only the font's internal leading —
   this opens it up deliberately rather than relying on that */
.logo .tag{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--rust);margin-top:.3rem}
.logo:hover .name{color:var(--rust)}
.logo:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.nav-right{display:flex;align-items:center;gap:1rem}
.lang-toggle{display:flex;border:1.5px solid var(--green);overflow:hidden;border-radius:2px}
/* the toggle is a pair of links now that each language has its own URL, so
   these match both elements — <button> is kept for anything still using it */
.lang-toggle button,.lang-toggle a{display:block;border:none;background:transparent;color:var(--green);font:600 .68rem 'Montserrat',sans-serif;letter-spacing:.1em;padding:.35rem .6rem;cursor:pointer;text-decoration:none}
.lang-toggle button.active,.lang-toggle a.active{background:var(--green);color:var(--cream)}
.lang-toggle a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.burger{display:none}

/* ---------- hero ---------- */
html.shot .hero{min-height:790px;max-height:790px}
@media(max-width:900px){html.shot .hero{min-height:640px;max-height:640px}}
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;background:url('images/hero.jpg') center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,43,37,.3) 0%,rgba(43,43,37,.18) 40%,rgba(47,58,40,.55) 68%,rgba(47,58,40,.88) 100%)}
.hero-inner h1,.hero-inner .sub{text-shadow:0 2px 18px rgba(20,24,16,.55)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 2rem 4.5rem;color:var(--cream)}
.hero h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:600;max-width:15em;line-height:1.15;margin-bottom:1rem}
/* inline-block scrim: box edge aligns flush with the h1 below, text inset by an
   even padding on all sides; gradient holds opacity behind the text and only
   fades over the trailing stretch */
.hero .sub{display:inline-block;font-size:clamp(.82rem,1.05vw,.96rem);letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#F5E7CA;margin:0 0 1.6rem;padding:.7rem;background:linear-gradient(90deg,rgba(24,31,20,.82) 0%,rgba(24,31,20,.78) 68%,rgba(24,31,20,0) 100%)}
/* narrow screens: the tagline wraps and fills the width, so hold the scrim
   longer and fade only over the last stretch */
@media(max-width:700px){.hero .sub{background:linear-gradient(90deg,rgba(24,31,20,.82) 0%,rgba(24,31,20,.78) 80%,rgba(24,31,20,0) 100%)}}
/* decorative only — pointer-events:none so it can never intercept taps on the
   hero CTA it sits near */
.hero-badge{position:absolute;right:2.5rem;bottom:3.5rem;z-index:3;width:212px;height:212px;pointer-events:none}
.badge-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 28s linear infinite}
/* logo stays upright while only the ring rotates; 50% keeps the diamond's
   points clear of the inner circle (which is 56% of the badge) */
/* inner circle is 56.25% of the badge; keep the logo well inside it so the
   diamond's points never sit tangent to the circle (which makes it read as
   out-of-round) */
.badge-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46%;height:auto;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- welcome ---------- */
.welcome{padding:5.5rem 0 5rem}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.collage{position:relative;height:460px}
.polaroid{position:absolute;background:#fff;padding:10px 10px 34px;box-shadow:0 12px 28px rgba(43,43,37,.22)}
.polaroid img{width:100%;height:100%;object-fit:cover}
.polaroid .cap{font-family:'Playfair Display',serif;font-style:italic;font-size:.78rem;text-align:center;margin-top:8px;color:#6b6a5f}
.polaroid::before{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);width:84px;height:24px;background:rgba(196,178,138,.6)}
.p1{width:56%;height:62%;top:0;left:0;transform:rotate(-4deg)}
.p2{width:48%;height:52%;top:24%;right:0;transform:rotate(3deg)}
.p3{width:44%;height:44%;bottom:0;left:14%;transform:rotate(-1.5deg)}
.welcome-copy h2{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--green-dark);line-height:1.2;margin-bottom:1.2rem}
.welcome-copy p{color:#55544a;margin-bottom:1.9rem;max-width:34em}
.cta-stack{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}

/* ---------- rooms ---------- */
.rooms{background:var(--paper);padding:5.5rem 0;border-top:1px solid rgba(62,74,52,.12)}
.rooms-head{text-align:center;max-width:44em;margin:0 auto 3rem}
.rooms-head h2{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--green-dark);margin-bottom:1rem}
.rooms-head p{color:#55544a}
.room-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.room-card{background:#fff;box-shadow:0 8px 24px rgba(43,43,37,.1)}
.room-card img{height:220px;width:100%;object-fit:cover}
.room-card .body{padding:1.4rem 1.5rem 1.7rem}
/* photo-gallery trigger on cards that have one */
.room-media{position:relative;display:block;width:100%;padding:0;border:none;background:none;cursor:pointer;overflow:hidden}
.room-media img{transition:transform .45s}
.room-media:hover img,.room-media:focus-visible img{transform:scale(1.05)}
.room-media:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.shot-count{position:absolute;right:.7rem;bottom:.7rem;display:flex;align-items:center;gap:.35rem;
  padding:.32rem .6rem;border-radius:100px;background:rgba(28,33,24,.72);color:var(--cream);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;backdrop-filter:blur(2px)}
.shot-count svg{width:13px;height:13px;display:block}
.room-card h3{font-size:1.25rem;color:var(--green-dark);margin-bottom:.5rem}
.room-card p{font-size:.88rem;color:#55544a;margin-bottom:1rem}
.price{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rust)}
.rooms-note{text-align:center;margin-top:2.6rem}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,16,.92);padding:3.2rem 1rem 5.2rem}
.lb.open{display:flex}
.lb-img{max-width:min(1100px,92vw);max-height:calc(100vh - 9rem);width:auto;height:auto;object-fit:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.lb-btn{position:absolute;background:rgba(242,237,225,.14);border:1px solid rgba(242,237,225,.3);
  color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;transition:background .2s}
.lb-btn:hover{background:rgba(242,237,225,.28)}
.lb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lb-btn svg{width:20px;height:20px}
.lb-prev{left:1.1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.1rem;top:50%;transform:translateY(-50%)}
.lb-close{right:1.1rem;top:1.1rem}
.lb-cap{position:absolute;left:0;right:0;bottom:1.5rem;text-align:center;color:var(--cream);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.lb-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.8rem}
.lb-dots span{width:8px;height:8px;border-radius:50%;background:rgba(242,237,225,.35)}
.lb-dots span.on{background:var(--gold)}
body.lb-lock{overflow:hidden}
@media(max-width:600px){
  .lb{padding:3.2rem .5rem 5.2rem}
  .lb-prev{left:.4rem}.lb-next{right:.4rem}
  .lb-btn{width:40px;height:40px}
}

/* ---------- basecamp (green) ---------- */
.basecamp{background:var(--green);color:var(--cream);padding:5.5rem 0;position:relative;overflow:hidden}
.basecamp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.basecamp h2{font-size:clamp(1.7rem,3vw,2.5rem);color:#EAD9B8;margin-bottom:1.2rem}
.basecamp p{color:#D9D6C6;margin-bottom:1.9rem;max-width:32em}
.dist-board{background:var(--green-dark);border:1px solid rgba(234,217,184,.35);padding:2.2rem 2.4rem;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.dist-board h3{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;font-family:'Montserrat',sans-serif;font-weight:700}
.dist-board ul{list-style:none}
.dist-board li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(234,217,184,.25);font-size:.9rem}
.dist-board li:last-child{border-bottom:none}
.dist-board .val{color:#EAD9B8;font-weight:600;white-space:nowrap}
.pine{position:absolute;right:-40px;bottom:-30px;width:280px;opacity:.14}

/* ---------- amenities ---------- */
.amenities{padding:4.5rem 0}
.amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.amen{padding:1.8rem 1rem;border:1px solid rgba(62,74,52,.2)}
.amen svg{width:34px;height:34px;stroke:var(--rust);margin:0 auto .8rem}
.amen .t{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green-dark)}
.amen .d{font-size:.8rem;color:#6b6a5f;margin-top:.35rem}

/* ---------- gallery ---------- */
.gallery{background:var(--paper);padding:5rem 0;border-top:1px solid rgba(62,74,52,.12);text-align:center}
.gallery h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--green-dark);margin-bottom:.6rem}
.handle{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--rust);margin-bottom:2.4rem}
/* global a{text-decoration:none} would leave these looking like plain text, so
   give them an underline affordance */
.handle a{border-bottom:1px solid rgba(169,104,62,.5);padding-bottom:2px;transition:color .2s,border-color .2s}
.handle a:hover{color:var(--green-dark);border-bottom-color:var(--green-dark)}
.gal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:900px;margin:0 auto}
.gal-card{border-radius:14px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 10px 26px rgba(43,43,37,.16)}
.gal-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal-card:hover img{transform:scale(1.05)}

/* ---------- reviews ---------- */
.reviews{padding:5rem 0}
.reviews h2{text-align:center;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--green-dark);margin-bottom:2.6rem}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.rev{background:#fff;padding:1.9rem;box-shadow:0 8px 22px rgba(43,43,37,.09);border-top:3px solid var(--gold);display:flex;flex-direction:column}
.rev .stars{color:var(--gold);letter-spacing:.2em;margin-bottom:.9rem}
.rev p{font-family:'Playfair Display',serif;font-style:italic;font-size:.98rem;color:#4a493f;margin-bottom:1rem}
.rev .who{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rust);margin-top:auto}
.rev-more{text-align:center;margin-top:2.4rem}
.rev-more a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--green);border-bottom:1px solid var(--gold);padding-bottom:.35rem;transition:color .2s}
.rev-more a:hover{color:var(--rust)}

/* ---------- booking ---------- */
.booking{background:var(--green-dark);color:var(--cream);padding:5.5rem 0}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.booking h2{font-size:clamp(1.7rem,3vw,2.5rem);color:#EAD9B8;margin-bottom:1rem}
.booking .lead{color:#D9D6C6;margin-bottom:2rem;max-width:30em}
.contact-btns{display:flex;flex-direction:column;gap:.9rem;max-width:320px}
.cbtn{display:flex;align-items:center;gap:.9rem;background:rgba(242,237,225,.08);border:1px solid rgba(234,217,184,.35);padding:.95rem 1.2rem;font-size:.85rem;font-weight:600;letter-spacing:.06em;transition:background .2s}
.cbtn:hover{background:rgba(242,237,225,.16)}
.cbtn svg{width:20px;height:20px;stroke:var(--gold);flex-shrink:0}
.cbtn-lang{margin-left:auto;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}
form{background:var(--paper);color:var(--ink);padding:2.4rem;box-shadow:0 16px 40px rgba(0,0,0,.3)}
form h3{font-size:1.3rem;color:var(--green-dark);margin-bottom:1.4rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rust);margin-bottom:.4rem}
input,select{width:100%;padding:.7rem .8rem;border:1px solid rgba(62,74,52,.35);background:#fff;font:400 .9rem 'Montserrat',sans-serif;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--gold)}
.fwide{margin-bottom:1.4rem}
.form-note{font-size:.74rem;color:#6b6a5f;margin-top:.9rem}
/* success state — shown in place of the form, not appended below it.
   Carries the same card treatment as `form`, since that is what holds the
   panel's background: hiding the form would otherwise drop it onto the
   dark green section with no card behind it. */
.form-done{background:var(--paper);color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.3);
  text-align:center;padding:3rem 2.4rem 2.6rem;animation:fdIn .35s ease-out}
@keyframes fdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fd-tick{width:56px;height:56px;color:var(--green);margin:0 auto 1.1rem}
.fd-tick circle,.fd-tick path{stroke-dasharray:180;stroke-dashoffset:0;animation:fdDraw .6s ease-out}
@keyframes fdDraw{from{stroke-dashoffset:180}to{stroke-dashoffset:0}}
.form-done h3{font-size:1.4rem;color:var(--green-dark);margin-bottom:.6rem}
.form-done p{font-size:.9rem;color:#55544a;max-width:30em;margin:0 auto 1.3rem}
.fd-recap{display:grid;grid-template-columns:auto auto;gap:.45rem 1.4rem;justify-content:center;
  text-align:left;background:var(--cream);padding:1rem 1.4rem;margin:0 auto 1.3rem;
  width:fit-content;border-radius:3px}
.fd-recap dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  font-weight:600;align-self:center}
.fd-recap dd{margin:0;font-size:.92rem;font-weight:600;color:var(--ink)}
.form-done .fd-note{font-size:.76rem;color:#6b6a5f;margin-bottom:1.4rem}
@media(prefers-reduced-motion:reduce){
  .form-done,.fd-tick circle,.fd-tick path{animation:none}
}
.fhint{font-size:.72rem;line-height:1.5;color:#6b6a5f;margin-top:.4rem}
/* Art. 13 notice at the point of collection */
.form-privacy{font-size:.72rem;line-height:1.6;color:#6b6a5f;margin:0 0 1.1rem}
.form-privacy a{color:var(--rust);border-bottom:1px solid rgba(169,104,62,.5);padding-bottom:1px}
.form-privacy a:hover{color:var(--green-dark);border-color:var(--green-dark)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#C9C6B8;padding:3.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
footer .fname{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--cream);margin-bottom:.6rem}
footer p,footer li{font-size:.85rem;line-height:1.8}
footer ul{list-style:none}
footer h4{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.foot-contact{margin-top:1.4rem}
.foot-contact .foot-lang{color:var(--gold);font-size:.72rem;letter-spacing:.05em}
footer a:hover{color:#fff}
.map-embed{margin-top:.8rem;width:100%;height:150px;border:1px solid rgba(201,198,184,.35);filter:saturate(.7)}
.copy{border-top:1px solid rgba(201,198,184,.2);padding-top:1.4rem;font-size:.72rem;text-align:center;color:#8b8878}
.copy .sep{margin:0 .5rem;opacity:.6}
.copy a{border-bottom:1px solid rgba(176,141,79,.5);padding-bottom:2px;transition:color .2s,border-color .2s}
.copy a:hover{color:var(--cream);border-color:var(--gold)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .welcome-grid,.basecamp-grid,.book-grid{grid-template-columns:1fr;gap:2.6rem}
  .room-cards,.rev-grid{grid-template-columns:1fr}
  .gal-row{grid-template-columns:1fr 1fr;gap:.8rem}
  .amen-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .collage{height:400px;width:100%;max-width:440px;margin:0 auto}
  .hero-badge{width:144px;height:144px;right:1.4rem;bottom:2rem}
  .frow{grid-template-columns:1fr}
}
@media(max-width:600px){
  .nav{flex-wrap:wrap;justify-content:center;row-gap:.5rem;padding:.7rem 1rem}
  .logo{width:100%;order:-1}
  .nav-right{gap:.7rem}
  .nav-right .btn{padding:.6rem 1.2rem}
  body{overflow-x:hidden}
  /* on phones the hero CTA is nearly full-width, so move the badge to the
     top-right where it cannot sit on top of the button */
  .hero-badge{width:112px;height:112px;right:1.1rem;top:1.4rem;bottom:auto}
}