/* ============================================================
   Bohemian Treehaus — editorial styles
   Near-monochrome paper + ink, Fraunces display, system sans body.
   ============================================================ */

:root{
  --paper:#f4f0e8;
  --paper-2:#ece6da;
  --ink:#1c1b18;
  --ink-soft:#56524a;
  --moss:#5b6b4d;          /* single accent, used sparingly */
  --dark:#16170f;          /* the one dark section */

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure:38rem;
  --ease:cubic-bezier(.16,.5,.3,1);

  /* fluid spacing */
  --gap:clamp(14px, 3vw, 34px);
  --pad:clamp(22px, 6vw, 120px);
  --section:clamp(72px, 13vw, 200px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---- shared type ---- */
.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--moss);
  margin:0 0 1.1em;
}
.eyebrow--light{color:rgba(255,255,255,.82)}

.head{
  font-family:var(--serif);
  font-weight:380;
  font-optical-sizing:auto;
  font-size:clamp(1.9rem,4.6vw,3.5rem);
  line-height:1.04;
  letter-spacing:-.012em;
  margin:0 0 .55em;
  max-width:18ch;
}
.head--light{color:#fff}

.body{
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin:0;
}
.body--soft{color:var(--ink-soft)}
.body--light{color:rgba(255,255,255,.86)}
.body em{font-style:italic;color:var(--ink)}

figcaption{
  font-size:.86rem;
  color:var(--ink-soft);
  margin-top:.85em;
  letter-spacing:.01em;
}

/* ============================================================
   Sticky bar — quiet, fades in past the hero
   ============================================================ */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,40px);
  background:rgba(244,240,232,.82);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(28,27,24,.08);
  transform:translateY(-104%);
  transition:transform .5s var(--ease);
}
.bar.is-on{transform:translateY(0)}
.bar__name{font-family:var(--serif);font-size:1.1rem;text-decoration:none;letter-spacing:-.01em}
.bar__cta{
  text-decoration:none;font-size:.82rem;letter-spacing:.06em;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.bar__cta:hover{color:var(--moss);border-color:var(--moss)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#fff}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.04) 26%,rgba(0,0,0,.10) 60%,rgba(0,0,0,.62)),
    linear-gradient(75deg,rgba(0,0,0,.45),rgba(0,0,0,0) 52%);}
.hero__type{
  position:absolute;left:0;bottom:clamp(60px,11vh,140px);
  padding:0 var(--pad);max-width:920px;
}
.hero__title{
  font-family:var(--serif);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(3.4rem,13vw,9rem);
  line-height:.92;letter-spacing:-.02em;margin:.08em 0 .32em;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero__sub{
  font-size:clamp(1.05rem,1.7vw,1.45rem);
  max-width:30ch;margin:0;color:rgba(255,255,255,.92);
  text-shadow:0 1px 22px rgba(0,0,0,.4);
}
.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(40px,7vh,70px);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.85);
  writing-mode:vertical-rl;
}
.hero__scroll::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;
  background:linear-gradient(rgba(255,255,255,.8),transparent);}

/* ============================================================
   INTRO
   ============================================================ */
.intro{padding:var(--section) var(--pad)}
.lede{
  font-family:var(--serif);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.32;letter-spacing:-.01em;
  max-width:24ch;margin:0;
  /* asymmetric placement */
  margin-left:clamp(0px,8vw,180px);
}
.lede{max-width:30ch}

/* ============================================================
   CHAPTERS / image rhythm
   ============================================================ */
.chapter{padding:0 0 var(--section)}
.chapter > * + *{margin-top:var(--gap)}

/* full bleed */
.full img{width:100%;height:clamp(380px,82vh,920px);object-fit:cover}
.full figcaption{padding:0 var(--pad)}

/* a contained "say" text block, deliberately off-center */
.say{padding:clamp(40px,7vw,90px) var(--pad);max-width:760px}
.say--flush{padding:0;max-width:none}

/* wide — large image inset in paper */
.wide{padding:0 var(--pad)}
.wide img{height:clamp(360px,72vh,820px);object-fit:cover;max-width:1040px;margin-inline:auto}
.wide figcaption{max-width:1040px;margin-inline:auto}

/* duo — two up */
.duo{display:grid;gap:var(--gap);padding:0 var(--pad)}
.duo img{height:clamp(300px,46vh,560px);object-fit:cover}
@media(min-width:760px){
  .duo{grid-template-columns:1fr 1fr;align-items:start}
  .duo--uneven{grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(28px,5vw,80px)}
  .duo--tall img{height:clamp(420px,64vh,720px)}
}

/* offset — image + side note, asymmetric */
.offset{display:grid;gap:clamp(24px,4vw,64px);padding:0 var(--pad);align-items:center}
.offset img{height:clamp(320px,60vh,680px);object-fit:cover}
@media(min-width:860px){.offset{grid-template-columns:1.5fr 1fr}}

/* trio — one big + two stacked */
.trio{display:grid;gap:var(--gap);padding:0 var(--pad)}
.trio img{height:clamp(280px,42vh,560px);object-fit:cover}
@media(min-width:860px){
  .trio{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
  .trio__big{grid-row:1 / span 2}
  .trio__big img{height:100%}
}

/* ============================================================
   SETTING — the single dark section
   ============================================================ */
.setting{position:relative;color:#fff;overflow:hidden;background:var(--dark)}
.setting__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.setting__veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,12,7,.82),rgba(11,12,7,.32))}
.setting__type{position:relative;padding:clamp(90px,16vw,220px) var(--pad);max-width:760px}
.places{list-style:none;padding:0;margin:1.8em 0 0;
  display:grid;gap:.55em;max-width:var(--measure);
  font-size:1rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1.4em}
.places li{display:flex;justify-content:space-between;gap:1.5em;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:.55em}
.places li span{color:rgba(255,255,255,.6);white-space:nowrap;font-size:.92em}

/* ============================================================
   LOCAL GUIDE
   ============================================================ */
.guide{padding:var(--section) var(--pad)}
.guide__intro{max-width:640px;margin:0 0 clamp(48px,7vw,96px)}
.guide__grid{
  display:grid;gap:clamp(36px,5vw,72px) clamp(32px,5vw,72px);
  grid-template-columns:1fr;
}
@media(min-width:620px){.guide__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.guide__grid{grid-template-columns:1fr 1fr 1fr}}
.guide__cat{
  font-family:var(--serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.01em;
  margin:0 0 1.1em;padding-bottom:.7em;
  border-bottom:1px solid rgba(28,27,24,.16);
}
.guide__list{list-style:none;margin:0;padding:0;display:grid;gap:1.15em}
.guide__list li{display:grid;gap:.15em}
.guide__list a{
  text-decoration:none;font-size:1.02rem;color:var(--ink);
  width:max-content;max-width:100%;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.guide__list a:hover{color:var(--moss);border-bottom-color:var(--moss)}
.guide__list span{font-size:.88rem;line-height:1.45;color:var(--ink-soft)}

/* ============================================================
   DETAILS
   ============================================================ */
.details{padding:var(--section) var(--pad)}
.details__grid{display:grid;gap:clamp(36px,6vw,90px)}
@media(min-width:860px){.details__grid{grid-template-columns:.8fr 1.2fr}}
.spec{margin:0;display:grid;gap:0}
.spec > div{
  display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;gap:1.5em;
  padding:1.05em 0;border-top:1px solid rgba(28,27,24,.14);align-items:baseline;
}
.spec > div:last-child{border-bottom:1px solid rgba(28,27,24,.14)}
.spec dt{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.spec dd{margin:0;color:var(--ink-soft)}

.notes{margin-top:clamp(48px,8vw,110px);max-width:var(--measure)}

/* ============================================================
   HOSTS
   ============================================================ */
.hosts{padding:var(--section) var(--pad);max-width:880px}
.hosts__line{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.4;letter-spacing:-.01em;
  margin:0;color:var(--ink);
}
.hosts__line strong{font-weight:500}

/* ============================================================
   PRAISE / reviews
   ============================================================ */
.praise{padding:var(--section) var(--pad)}
.praise__head{margin:0 0 clamp(40px,6vw,80px)}
.praise__stars{
  font-family:var(--serif);font-weight:380;
  font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.01em;margin:0;line-height:1.2}
.praise__stars span[aria-hidden]{color:var(--moss);letter-spacing:.05em}
.praise__count{display:block;font-family:var(--sans);font-weight:400;
  font-size:.92rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:.7em}
.praise__grid{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:760px){.praise__grid{grid-template-columns:1fr 1fr}}
.quote{margin:0}
.quote blockquote{
  font-family:var(--serif);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.42;letter-spacing:-.008em;
  margin:0 0 .9em;color:var(--ink);max-width:30ch;text-wrap:balance}
.quote blockquote::before{content:"“";color:var(--moss)}
.quote blockquote::after{content:"”"}
.quote figcaption{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0}

/* ============================================================
   STAY / BOOK
   ============================================================ */
.stay{background:var(--paper-2);padding:var(--section) var(--pad) 0}
.stay__inner{max-width:760px;margin-inline:auto;text-align:center}
.stay__head{font-family:var(--serif);font-weight:360;
  font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;letter-spacing:-.018em;margin:0 0 .45em}
.stay__sub{color:var(--ink-soft);max-width:46ch;margin:0 auto 2.4em;font-size:1.1rem}
.stay__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-size:.92rem;letter-spacing:.04em;
  padding:.95em 1.9em;border-radius:0;transition:all .35s var(--ease)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--moss)}
.btn--ghost{border:1px solid rgba(28,27,24,.35)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(28,27,24,.04)}
.stay__fine{margin:2.6em 0 0;font-size:.84rem;color:var(--ink-soft);letter-spacing:.02em}
.foot{
  margin-top:var(--section);padding:28px 0;
  border-top:1px solid rgba(28,27,24,.14);
  display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;
  font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
  max-width:1100px;margin-inline:auto;
}

/* ============================================================
   Motion — one restrained reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .bar{transition:none}
}

/* focus visibility */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--moss);outline-offset:4px}