/* ============================================================
   Chatki na Brzozowym, Przesieka.

   Brand is inherited, not invented: the yellow #FECC00 and the
   mountain mark are the owners' and stay untouched. The page is
   light because the photographs are bright pine and daylight;
   the chrome (floating nav, footer, one quote block) is deep
   spruce so the yellow logo keeps the dark ground it needs.

   Locks:
   - one theme, light, painted explicitly on every surface
   - one accent, #FECC00, nowhere else a second colour
   - one radius, 0, including the floating nav and every card,
     to echo the A-frame geometry

   Icon note: the CSP here admits scripts from cdnjs but no
   third-party stylesheets, so an icon font or icon package
   cannot load. Every glyph on this page is therefore drawn in
   CSS from borders alone (burger, close, chevrons, tick). A
   production build should swap these for Phosphor.
   ============================================================ */
:root{
  --paper:#F1F1EA;
  --paper-2:#E6E7DC;
  --white:#FCFCF9;
  --forest:#1B2E24;
  --forest-g:rgba(21,38,29,.72);
  --ink:#1A241E;
  --ink-2:#56605A;
  --ink-3:#7C857C;
  --rule:#D5D8CB;
  --rule-2:#C2C6B5;
  --sun:#FECC00;
  --sun-2:#FFD839;
  --bad:#A33B22;
  --shadow:0 1px 2px rgba(27,46,36,.05), 0 14px 38px -22px rgba(27,46,36,.45);
  --shadow-lg:0 2px 6px rgba(27,46,36,.07), 0 26px 60px -28px rgba(27,46,36,.55);
  --gut:20px;
  --maxw:1300px;
  --navh:74px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){ :root{ --gut:44px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
[hidden]{display:none!important}
::selection{background:var(--sun); color:var(--forest)}
:focus-visible{outline:2px solid var(--forest); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
.hold{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-optical-sizing:auto; font-weight:600; letter-spacing:-.032em; text-wrap:balance; margin:0 }
h1{ font-size:clamp(38px,6.2vw,74px); line-height:1.0; font-weight:700 }
h2{ font-size:clamp(27px,4vw,46px); line-height:1.06 }
h3{ font-size:clamp(19px,2vw,24px); line-height:1.18; letter-spacing:-.024em }
h4{ font-size:17px; line-height:1.25; letter-spacing:-.02em }
p{ margin:0 }
a{ color:inherit }
.lead{ font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:var(--ink-2); max-width:46ch }
.body{ color:var(--ink-2); max-width:60ch }
.cap{ font-size:13px; line-height:1.4; color:var(--ink-3); margin-top:9px }
.num{ font-variant-numeric:tabular-nums }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  font-family:"Instrument Sans",sans-serif; font-size:15px; font-weight:600;
  padding:15px 28px; text-decoration:none; white-space:nowrap; border-radius:0;
  border:1.5px solid transparent; cursor:pointer; line-height:1.2;
  transition:transform .18s var(--ease), background-color .22s, border-color .22s, color .22s, opacity .22s }
.btn:active{ transform:translateY(1px) }
.btn-1{ background:var(--sun); color:var(--forest); border-color:var(--sun) }
.btn-1:hover{ background:var(--sun-2); border-color:var(--sun-2) }
.btn-2{ background:transparent; color:var(--ink); border-color:var(--rule-2) }
.btn-2:hover{ border-color:var(--forest); background:rgba(27,46,36,.05) }
.btn-3{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.btn-3:hover{ background:rgba(255,255,255,.14); border-color:#fff }
.btn-s{ padding:12px 20px; font-size:14px }
.btn[disabled]{ opacity:.45; cursor:not-allowed }
.cta{ display:flex; flex-wrap:wrap; gap:12px }

/* ---------- nav: transparent over the hero, glass once past it ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:80; height:var(--navh);
  display:flex; align-items:center;
  transition:background-color .4s var(--ease), backdrop-filter .4s, box-shadow .4s var(--ease),
             top .4s var(--ease), height .4s var(--ease), border-color .4s }
.nav .hold{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100% }
.nav a.mark{ display:block; flex:none }
.nav a.mark img{ height:44px; width:auto; transition:height .4s var(--ease) }
.nav ul{ display:none; list-style:none; margin:0; padding:0; gap:30px; align-items:center }
.nav ul a{ text-decoration:none; font-size:14.5px; color:rgba(255,255,255,.82); white-space:nowrap;
  padding:6px 0; border-bottom:1.5px solid transparent; transition:color .22s, border-color .22s }
.nav ul a:hover{ color:#fff }
.nav ul a[aria-current="page"]{ color:var(--sun); border-bottom-color:var(--sun) }
.nav .right{ display:flex; align-items:center; gap:16px }
.nav .tel{ display:none; text-decoration:none; font-size:15px; font-weight:600; color:#fff; white-space:nowrap }
.nav .tel:hover{ color:var(--sun) }
/* line phone glyph: inline SVG so it inherits colour and the stroke stays
   hairline-crisp at every size. Never scales below its 16px box. */
.ico{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
a.tel{ display:inline-flex; align-items:center; gap:9px }
.nav .btn{ display:none }
@media (min-width:1000px){
  .nav ul{ display:flex }
  .nav .tel{ display:inline-flex }
  .nav .btn{ display:inline-flex }
}

/* glass state: a full-bleed dark band pinned to the very top edge, so the
   bar reads as part of the window frame rather than a floating chip.
   Only a bottom hairline, no side borders, or the seam would show. */
.nav.glass{ top:0; height:66px }
.nav.glass .bar{
  background:linear-gradient(140deg, rgba(38,62,47,.88), rgba(21,38,29,.82));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 40px -24px rgba(10,20,14,.75);
}
.nav .bar{ position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s var(--ease) }
.nav.glass .bar{ opacity:1 }
.nav.glass a.mark img{ height:38px }
@media (prefers-reduced-transparency:reduce){
  .nav.glass .bar{ background:var(--forest); backdrop-filter:none; -webkit-backdrop-filter:none }
}

/* burger */
.burger{ width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  display:grid; place-items:center; padding:0; flex:none }
@media (min-width:1000px){ .burger{ display:none } }
.burger i{ display:block; position:relative; width:22px; height:1.5px; background:#fff;
  transition:transform .3s var(--ease), background-color .3s }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:22px; height:1.5px;
  background:#fff; transition:transform .3s var(--ease), top .3s var(--ease) }
.burger i::before{ top:-7px } .burger i::after{ top:7px }
body.nav-open .burger i{ background:transparent }
body.nav-open .burger i::before{ top:0; transform:rotate(45deg) }
body.nav-open .burger i::after{ top:0; transform:rotate(-45deg) }

/* full-screen mobile menu */
.menu{ position:fixed; inset:0; z-index:70; background:var(--forest);
  display:flex; flex-direction:column; justify-content:center; padding:var(--navh) var(--gut) 40px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease) }
body.nav-open .menu{ opacity:1; pointer-events:auto }
.menu ul{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:4px }
.menu ul a{ display:block; text-decoration:none; color:#EDF0EA; padding:10px 0;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(30px,8vw,46px);
  letter-spacing:-.035em; opacity:0; transform:translateY(14px) }
body.nav-open .menu ul a{ opacity:1; transform:none; transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s }
body.nav-open .menu li:nth-child(2) a{ transition-delay:.16s }
body.nav-open .menu li:nth-child(3) a{ transition-delay:.22s }
body.nav-open .menu li:nth-child(4) a{ transition-delay:.28s }
body.nav-open .menu li:nth-child(5) a{ transition-delay:.34s }
.menu ul a[aria-current="page"]{ color:var(--sun) }
.menu .foot{ display:grid; gap:14px; border-top:1px solid rgba(255,255,255,.14); padding-top:24px }
.menu .foot a.tel{ text-decoration:none; color:#fff; font-size:20px; font-weight:600 }
.menu .foot span{ color:#93A395; font-size:14px }

/* ---------- routed pages ---------- */
.page{ animation:pageIn .5s var(--ease) both }
@keyframes pageIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .page{ animation:none } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(20px) }
.rv.in{ opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease) }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none } }

/* ---------- hero: full-bleed photo, type and nav laid over it ---------- */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:flex-end;
  padding-block:var(--navh) clamp(48px,7vw,86px); overflow:hidden; background:var(--forest) }
/* Hero is a silent day-to-night loop of the cabin itself. The poster frame
   sits underneath as its own layer, so the first paint is the photograph
   and the video simply takes over once it can play. */
.hero-media{ position:absolute; inset:0; overflow:hidden }
.hero-media img,.hero-media video{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:62% 50% }
.hero-media video{ opacity:0; transition:opacity .9s var(--ease) }
.hero-media video.ready{ opacity:1 }
@media (min-width:860px){ .hero-media img,.hero-media video{ object-position:50% 50% } }
@media (prefers-reduced-motion:reduce){ .hero-media video{ display:none } }
.hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,18,14,.62) 0%, rgba(10,18,14,.40) 12%,
             rgba(10,18,14,.06) 40%, rgba(10,18,14,.42) 72%, rgba(10,18,14,.84) 100%) }
.hero .hold{ position:relative; z-index:2 }
.hero h1{ color:#fff; max-width:13ch; text-shadow:0 2px 30px rgba(8,16,11,.35) }
.hero .lead{ color:rgba(255,255,255,.9); margin-top:22px; max-width:44ch }
.hero .cta{ margin-top:32px }

/* ---------- facts band ---------- */
.facts{ background:var(--paper-2); border-bottom:1px solid var(--rule) }
.facts .hold{ display:grid }
.fact{ padding:28px 0; border-bottom:1px solid var(--rule) }
.fact:last-child{ border-bottom:none }
.fact b{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:600;
  font-size:clamp(27px,3.7vw,40px); letter-spacing:-.035em; line-height:1; margin-bottom:8px }
.fact span{ color:var(--ink-2); font-size:14.5px }
@media (min-width:800px){
  .facts .hold{ grid-template-columns:repeat(4,1fr) }
  .fact{ padding:46px 30px 46px 0; border-bottom:none; border-right:1px solid var(--rule) }
  .fact:last-child{ border-right:none; padding-right:0 }
}

/* ---------- section shell ---------- */
.sec{ padding-block:clamp(60px,7.5vw,112px) }
.sec.line{ border-top:1px solid var(--rule) }
.sec h2{ margin-bottom:16px }
.sec .body{ margin-bottom:44px }

/* ---------- cabin cards: white card, image, spec, booking button at the foot ---------- */
.cards{ display:grid; gap:26px }
@media (min-width:880px){ .cards{ grid-template-columns:1fr 1fr; gap:30px; align-items:stretch } }
.card{ background:var(--white); border:1px solid var(--rule); box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:box-shadow .4s var(--ease), transform .4s var(--ease) }
.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px) }
.card .shot{ overflow:hidden; background:var(--paper-2) }
/* fixed height, not aspect-ratio: the two cards sit in grid columns that can
   differ in width, and a ratio would then give two different heights. */
.card .shot img{ width:100%; height:clamp(190px,22vw,264px); object-fit:cover;
  transition:transform 1.1s var(--ease) }
.card:hover .shot img{ transform:scale(1.04) }
.card .in{ padding:26px 26px 0; flex:1 }
.card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px }
.price{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:17px; white-space:nowrap }
.price span{ color:var(--ink-3); font-weight:400; font-size:13px }
.card p{ color:var(--ink-2); font-size:15px }
.card dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:20px 0 0; font-size:14.5px }
.card dt{ color:var(--ink-3); white-space:nowrap }
.card dd{ margin:0 }
.card .act{ display:flex; gap:10px; padding:26px; margin-top:26px; border-top:1px solid var(--rule) }
.card .act .btn{ flex:1 }

/* ---------- mosaic ---------- */
/* Every photo block is capped against the viewport height as well as its own
   ratio, so a wide grid cell can never grow a picture past one screenful. */
.mos{ display:grid; gap:16px }
.mos figure{ margin:0 }
.mos img{ width:100%; object-fit:cover; max-height:min(52vh,430px) }
.mo1 img{ aspect-ratio:4/3 } .mo2 img{ aspect-ratio:1/1 }
.mo3 img{ aspect-ratio:3/4 } .mo4 img{ aspect-ratio:3/4 } .mo5 img{ aspect-ratio:4/3 }
@media (min-width:820px){
  .mos{ grid-template-columns:repeat(6,1fr); gap:18px }
  .mo1{ grid-column:span 4 } .mo2,.mo3,.mo4,.mo5{ grid-column:span 2 }
  .mos img{ max-height:none; aspect-ratio:auto }
  .mo1 img,.mo2 img{ height:clamp(300px,30vw,420px) }
  .mo3 img,.mo4 img,.mo5 img{ height:clamp(220px,21vw,300px) }
}

/* ---------- around: grouped lists + stacked shots ---------- */
.near-wrap{ display:grid; gap:48px }
@media (min-width:980px){ .near-wrap{ grid-template-columns:1fr 1fr; gap:64px; align-items:start } }
.group + .group{ margin-top:36px }
.group h3{ font-family:"Instrument Sans",sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px }
.group ul{ list-style:none; margin:0; padding:0 }
.group li{ display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--rule) }
.group li:last-child{ border-bottom:none }
.group li b{ font-weight:500; font-size:15.5px }
.group li i{ font-style:normal; color:var(--ink-3); font-size:13.5px; white-space:nowrap }
.stack{ display:grid; gap:18px }
.stack img{ width:100%; object-fit:cover }
.stack .w img{ aspect-ratio:1700/620; max-height:260px }
.stack .t img{ aspect-ratio:4/3; max-height:min(44vh,340px) }

/* ---------- seasons rail: scroll area, no visible bar ---------- */
.railwrap{ position:relative }
.rail{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none }
.rail::-webkit-scrollbar{ display:none; width:0; height:0 }
.track{ display:flex; gap:18px; width:max-content; padding-inline:var(--gut) }
@media (min-width:1388px){ .track{ padding-inline:calc((100vw - var(--maxw))/2 + var(--gut)) } }
.sea{ scroll-snap-align:start; width:min(74vw,300px) }
.sea img{ width:100%; height:clamp(200px,21vw,260px); object-fit:cover; margin-bottom:16px }
.sea h3{ margin-bottom:7px }
.sea p{ color:var(--ink-2); font-size:14.5px }
.railnav{ display:none; gap:8px; margin-top:26px }
@media (min-width:900px){ .railnav{ display:flex } }
.arrow{ width:46px; height:46px; border:1.5px solid var(--rule-2); background:transparent;
  cursor:pointer; display:grid; place-items:center; padding:0; border-radius:0;
  transition:border-color .22s, background-color .22s, opacity .22s }
.arrow:hover{ border-color:var(--forest); background:rgba(27,46,36,.05) }
.arrow[disabled]{ opacity:.32; cursor:not-allowed }
.arrow i{ display:block; width:9px; height:9px; border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink) }
.arrow.prev i{ transform:rotate(135deg); margin-left:3px }
.arrow.next i{ transform:rotate(-45deg); margin-right:3px }

/* ---------- price table ---------- */
.rate{ background:var(--paper-2); border-block:1px solid var(--rule) }
.rate-wrap{ display:grid; gap:44px }
@media (min-width:920px){ .rate-wrap{ grid-template-columns:.82fr 1.18fr; gap:64px; align-items:start } }
.tab-row{ display:grid; grid-template-columns:1fr auto auto; gap:14px 26px;
  padding:22px 0; border-bottom:1px solid var(--rule-2); align-items:baseline }
.tab-row.h{ padding:0 0 12px }
.tab-row.h span{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.tab-row:last-child{ border-bottom:none }
.tab-row .nm{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:19px; letter-spacing:-.025em }
.tab-row .nm small{ display:block; font-family:"Instrument Sans",sans-serif; font-weight:400;
  font-size:13px; color:var(--ink-3); letter-spacing:0; margin-top:4px }
.tab-row .v{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:21px;
  text-align:right; min-width:82px; font-variant-numeric:tabular-nums }
.tab-row .v.hi{ box-shadow:inset 0 -9px 0 var(--sun) }
.notes{ margin-top:28px; display:grid; gap:10px }
.notes p{ color:var(--ink-2); font-size:13.5px; padding-left:18px; position:relative }
.notes p::before{ content:""; position:absolute; left:0; top:10px; width:8px; height:1.5px; background:var(--sun) }

/* ---------- quote ---------- */
/* The measure has to be set on the quotation itself: a `ch` on the
   blockquote would resolve against its own 16px body font and squeeze the
   48px display type down to a couple of words per line. */
.host{ background:var(--forest); color:#EDF0EA; padding-block:clamp(56px,6.5vw,92px) }
.host blockquote{ margin:0 }
.host q{ font-family:"Bricolage Grotesque",sans-serif; font-weight:400; quotes:"\201E" "\201D";
  font-size:clamp(26px,4.2vw,46px); line-height:1.12; letter-spacing:-.035em;
  display:block; max-width:18ch; text-wrap:balance }
.host cite{ display:block; margin-top:24px; font-style:normal; font-size:14px; color:#93A395; max-width:44ch }
.host cite b{ display:block; color:#D3DBD1; font-weight:500; margin-bottom:3px }
@media (min-width:980px){
  .host blockquote{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:56px; align-items:end }
  .host cite{ margin-top:0; padding-bottom:6px }
}

/* ---------- contact ---------- */
.book-wrap{ display:grid; gap:44px }
@media (min-width:920px){ .book-wrap{ grid-template-columns:1.08fr .92fr; gap:68px; align-items:start } }
.info{ display:grid; border-top:1px solid var(--rule) }
.info div{ display:grid; grid-template-columns:104px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--rule) }
.info dt{ color:var(--ink-3); font-size:13.5px }
.info dd{ margin:0; font-size:15px }
.info a{ text-decoration:none; border-bottom:1.5px solid var(--sun) }

/* ---------- subpage head ---------- */
.phead{ padding-top:calc(var(--navh) + 40px); padding-bottom:8px }
.back{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:14px; color:var(--ink-2); margin-bottom:22px; transition:color .22s }
.back:hover{ color:var(--forest) }
.back i{ width:8px; height:8px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); display:block }
.phead .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap }
.pricetag{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.03em; white-space:nowrap }
.pricetag span{ display:block; font-family:"Instrument Sans",sans-serif; font-weight:400;
  font-size:13px; color:var(--ink-3); letter-spacing:0; margin-top:4px }

/* ---------- gallery + lightbox ---------- */
.gal{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr) }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(6,1fr); gap:16px } }
.gal button{ padding:0; border:none; background:var(--paper-2); cursor:pointer; overflow:hidden; display:block; border-radius:0 }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.gal button:hover img{ transform:scale(1.05) }
@media (min-width:760px){
  .g1{ grid-column:span 4 } .g2{ grid-column:span 2 } .g3{ grid-column:span 2 }
  .g4{ grid-column:span 2 } .g5{ grid-column:span 2 } .g6{ grid-column:span 6 }
}
.gal img{ max-height:min(46vh,340px) }
.g1 img{ aspect-ratio:4/3 } .g2 img{ aspect-ratio:3/4 } .g3 img{ aspect-ratio:4/3 }
.g4 img{ aspect-ratio:4/3 } .g5 img{ aspect-ratio:4/3 } .g6 img{ aspect-ratio:4/3 }
@media (min-width:760px){
  .gal img{ max-height:none; aspect-ratio:auto }
  .g1 img,.g2 img{ height:clamp(300px,30vw,420px) }
  .g3 img,.g4 img,.g5 img{ height:clamp(220px,21vw,300px) }
  .g6 img{ height:clamp(240px,24vw,340px) }
}
.lb{ position:fixed; inset:0; z-index:90; background:rgba(12,20,15,.94);
  display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease) }
.lb.on{ opacity:1; pointer-events:auto }
.lb img{ max-width:min(1200px,94vw); max-height:86vh; width:auto; object-fit:contain }
.lb .x{ position:absolute; top:18px; right:18px; width:48px; height:48px; border:1px solid rgba(255,255,255,.3);
  background:transparent; cursor:pointer; display:grid; place-items:center; border-radius:0 }
.lb .x i{ display:block; width:20px; height:1.5px; background:#fff; transform:rotate(45deg); position:relative }
.lb .x i::after{ content:""; position:absolute; inset:0; background:#fff; transform:rotate(-90deg) }

/* ---------- amenity chips ---------- */
.amen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.amen span{ border:1px solid var(--rule-2); padding:9px 15px; font-size:14px; color:var(--ink-2); background:var(--white) }

/* ---------- spec columns ---------- */
.spec{ display:grid; gap:32px }
@media (min-width:820px){ .spec{ grid-template-columns:repeat(3,1fr); gap:40px } }
.spec h4{ margin-bottom:12px }
.spec ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.spec li{ font-size:15px; color:var(--ink-2); padding-left:18px; position:relative }
.spec li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:1.5px; background:var(--sun) }

/* ============================================================
   BOOKING
   ============================================================ */
.bk-wrap{ display:grid; gap:32px }
@media (min-width:1040px){ .bk-wrap{ grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start } }

.tabs{ display:flex; gap:0; border-bottom:1px solid var(--rule); margin-bottom:34px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none }
.tabs::-webkit-scrollbar{ display:none }
.tabs button{ appearance:none; background:transparent; border:none; border-bottom:2px solid transparent;
  padding:14px 20px 13px; font-family:"Instrument Sans",sans-serif; font-size:15px; font-weight:600;
  color:var(--ink-3); cursor:pointer; white-space:nowrap; border-radius:0;
  transition:color .22s, border-color .22s }
.tabs button:first-child{ padding-left:0 }
.tabs button:hover{ color:var(--ink) }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--sun) }
.tabs button[disabled]{ opacity:.4; cursor:not-allowed }

.panel{ animation:pageIn .38s var(--ease) both }

/* calendar */
.cals{ display:grid; gap:34px }
@media (min-width:720px){ .cals{ grid-template-columns:1fr 1fr; gap:38px } }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px }
.cal-head h4{ font-size:16px }
.cal table{ width:100%; border-collapse:collapse; table-layout:fixed }
.cal th{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px; text-align:center }
.cal td{ padding:2px; text-align:center }
.day{ width:100%; aspect-ratio:1; border:none; background:transparent; cursor:pointer; border-radius:0;
  font-family:"Instrument Sans",sans-serif; font-size:14.5px; color:var(--ink); font-variant-numeric:tabular-nums;
  transition:background-color .18s, color .18s }
.day:hover:not([disabled]){ background:var(--paper-2) }
.day[disabled]{ color:var(--rule-2); cursor:not-allowed }
.day.mid{ background:var(--sun); background:rgba(254,204,0,.28) }
.day.edge{ background:var(--forest); color:#fff }
.day.edge:hover{ background:var(--forest) }
.day.hi{ box-shadow:inset 0 -3px 0 var(--sun) }

/* form */
.fields{ display:grid; gap:22px }
@media (min-width:680px){ .fields{ grid-template-columns:1fr 1fr } }
.f{ display:grid; gap:7px }
.f.wide{ grid-column:1/-1 }
.f label{ font-size:14px; font-weight:600; color:var(--ink) }
.f .hint{ font-size:13px; color:var(--ink-2) }
.f input,.f select,.f textarea{
  font-family:"Instrument Sans",sans-serif; font-size:15.5px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--rule-2); border-radius:0;
  padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s }
.f textarea{ min-height:110px; resize:vertical }
.f input::placeholder,.f textarea::placeholder{ color:var(--ink-3) }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--forest);
  box-shadow:inset 0 -3px 0 var(--sun) }
.f .err{ font-size:13px; color:var(--bad); font-weight:500 }
.f.bad input,.f.bad select,.f.bad textarea{ border-color:var(--bad) }

/* summary aside */
.sum{ background:var(--white); border:1px solid var(--rule); box-shadow:var(--shadow); padding:26px }
@media (min-width:1040px){ .sum{ position:sticky; top:calc(var(--navh) + 24px) } }
.sum h4{ margin-bottom:18px }
.sum dl{ display:grid; gap:0; margin:0 }
.sum .row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule) }
.sum .row:last-of-type{ border-bottom:none }
.sum dt{ color:var(--ink-3); font-size:14px }
.sum dd{ margin:0; font-size:14.5px; font-weight:500; text-align:right }
.sum .total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:18px; padding-top:18px; border-top:1.5px solid var(--forest) }
.sum .total dt{ color:var(--ink); font-size:15px; font-weight:600 }
.sum .total dd{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:27px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.sum .fine{ font-size:12.5px; color:var(--ink-3); margin-top:14px; line-height:1.45 }
.sum .empty{ font-size:14px; color:var(--ink-2) }

/* success */
.done{ background:var(--white); border:1px solid var(--rule); box-shadow:var(--shadow);
  padding:clamp(28px,5vw,52px); max-width:620px }
.tick{ width:46px; height:46px; border:1.5px solid var(--forest); display:grid; place-items:center; margin-bottom:22px }
.tick i{ display:block; width:16px; height:8px; border-left:2px solid var(--forest);
  border-bottom:2px solid var(--forest); transform:rotate(-45deg); margin-top:-4px }
.done h3{ margin-bottom:12px }
.done .recap{ margin:24px 0; border-top:1px solid var(--rule) }
.done .recap div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule) }
.done .recap dt{ color:var(--ink-3); font-size:14px } .done .recap dd{ margin:0; font-size:14.5px; font-weight:500 }

/* ---------- footer ---------- */
footer{ background:var(--forest); color:#93A395; padding-block:46px 52px }
footer .hold{ display:grid; gap:28px }
@media (min-width:800px){ footer .hold{ grid-template-columns:auto 1fr auto; gap:48px; align-items:start } }
footer img{ height:52px; width:auto }
footer p{ font-size:13.5px; color:#AFBAAF }
footer a{ color:#fff; text-decoration:none; border-bottom:1.5px solid var(--sun) }
footer .eu{ font-size:11.5px; line-height:1.6; color:#728073; margin-top:16px; max-width:74ch }
footer nav{ display:grid; gap:9px }
footer nav a{ border:none; color:#AFBAAF; font-size:14px; transition:color .22s }
footer nav a:hover{ color:var(--sun) }