/*
Theme Name: Solana Hospitality
Theme URI: https://solanahospitality.com
Author: Solana Hospitality
Description: The complete Solana Hospitality site — four houses in El Nido. Self-installing: activating the theme creates the five pages, sets the front page and ships every photo. No plugins required.
Version: 1.0.30731
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: solana
*/
/* Solana Hospitality — d3 "Immersive"
   Two faces: Bricolage Grotesque (display + text, optical size + width axes) and DM Mono (labels, facts).
   Fields: lagoon (deep teal), stone (limestone paper), rattan, ink. Mango is reserved for booking. */
:root{
  --ink:#072528; --lagoon:#0B4A4E; --lagoon-2:#0F5F63; --stone:#E9E5DA; --stone-2:#DCD7C9; --rattan:#C9A56C; --foam:#F3F0E6; --mango:#F7B538;
  --scrim:6,40,44;
  --rule:rgba(7,37,40,.22); --rule-lt:rgba(243,240,230,.32);
  --gut:clamp(20px,2.3vw,34px); --hdr-h:76px;
  --sans:"Bricolage Grotesque","Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr-h)}
body{margin:0;background:var(--stone);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--ink);border-radius:2px}
.btn:focus-visible,.btn-circ:focus-visible{border-radius:999px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--ink);color:var(--foam);padding:14px 18px;border-radius:999px;text-decoration:none}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* type */
.d{font-family:var(--sans);font-weight:740;font-stretch:88%;letter-spacing:-.017em;line-height:.93;text-wrap:balance}
.d .lt{font-weight:300;letter-spacing:-.026em}
.m{font:500 .72rem/1.35 var(--mono);letter-spacing:.085em;text-transform:uppercase}
.h-md{font-size:clamp(2.2rem,4.4vw,4rem);margin-top:.35em}
.i{width:20px;height:20px;flex:none}

/* controls — photos are square, controls are round */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:50px;padding:0 1.5em;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:500 .75rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn svg{width:18px;height:18px}
.btn-sm{min-height:44px;padding:0 1.15em}
.btn-line:hover{background:var(--foam);border-color:var(--foam);color:var(--ink)}
.sp-text .btn-line:hover,.hdr.is-stuck .btn-line:hover,html:not(.js) .hdr .btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--foam)}
.btn-book{background:var(--mango);border-color:var(--mango);color:var(--ink)}
.btn-book:hover{background:var(--foam);border-color:var(--foam)}
.btn-circ{display:inline-grid;place-items:center;flex:none;width:50px;height:50px;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;text-decoration:none;cursor:pointer;transition:transform .5s var(--ease),background-color .25s,color .25s}
.btn-circ svg{width:20px;height:20px}
.btn-solid{background:var(--foam);border-color:var(--foam);color:var(--ink)}
.btn-down svg{transform:rotate(90deg)}
.pair{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.pair:hover .btn-circ{transform:translateX(4px)}
.pair:hover .btn-down{transform:translateY(4px)}

/* header: solid by default (no-JS), transparent over the hero when JS is there to watch the scroll */
.hdr{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:clamp(16px,3vw,48px);height:var(--hdr-h);padding:0 var(--gut);color:var(--ink);background:rgba(233,229,218,.86);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--rule);transition:background-color .35s,color .35s,border-color .35s,height .35s}
.js .hdr:not(.is-stuck){color:var(--foam);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}
.js .hdr.is-stuck{height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:700;font-stretch:88%;font-size:1.22rem;letter-spacing:-.02em;white-space:nowrap}
.brand-w span{font-weight:300}
.mark{width:30px;height:30px}
.hdr-nav{display:none;margin-left:auto;gap:clamp(14px,2vw,30px)}
.hdr-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:500 .74rem/1 var(--mono);letter-spacing:.085em;text-transform:uppercase;position:relative}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after{transform:scaleX(1)}
.hdr-act{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-book{display:none;min-height:46px}
.hdr-menu{min-height:46px}
.js .hdr[data-page="house"]:not(.is-stuck) .hdr-book{background:transparent;border-color:currentColor;color:inherit}
@media (min-width:960px){
  .hdr-nav{display:flex}.hdr-act{margin-left:0}.hdr-book{display:inline-flex}.hdr-menu{display:none}
}

/* sheets (Popover API; no JS needed) */
.sheet{border:0;padding:0;margin:0;inset:0 0 0 auto;width:min(520px,100%);height:100%;max-height:none;background:var(--ink);color:var(--foam);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(7,37,40,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet:popover-open{display:flex;flex-direction:column}
.sheet.pf:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:120}
@media (prefers-reduced-motion:no-preference){
  .sheet{transition:transform .5s var(--ease),opacity .3s,overlay .5s allow-discrete,display .5s allow-discrete;transform:translateX(40px);opacity:0}
  .sheet:popover-open{transform:none;opacity:1}
  @starting-style{.sheet:popover-open{transform:translateX(40px);opacity:0}}
}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);min-height:var(--hdr-h)}
.sheet-lede{padding:8px var(--gut) 22px;font-size:1.2rem;line-height:1.35;max-width:30ch;font-stretch:92%}
.sheet-rows{border-top:1px solid var(--rule-lt)}
.sheet-rows li{border-bottom:1px solid var(--rule-lt)}
.sheet-rows a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"img name go" "img meta go";align-items:center;column-gap:16px;row-gap:4px;padding:16px var(--gut);min-height:88px;text-decoration:none;transition:background-color .3s,padding .5s var(--ease)}
.sheet-rows a:hover{background:rgba(243,240,230,.07);padding-left:calc(var(--gut) + 8px)}
.sheet-rows img{grid-area:img;width:84px;height:64px;object-fit:cover}
.sheet-rows .d{grid-area:name;font-size:clamp(1.9rem,6vw,2.4rem);align-self:end}
.sheet-rows .m{grid-area:meta;opacity:.72;align-self:start}
.sheet-rows .i{grid-area:go;width:26px;height:26px}
.sheet-rows a:not(:has(img)){grid-template-areas:"name go" "meta go";grid-template-columns:1fr auto}
.sheet-rows a[aria-current]{background:rgba(243,240,230,.07)}
.sheet-foot{margin-top:auto;padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.98rem;opacity:.9}
.sheet-foot>a{display:inline-flex;align-items:center;min-height:44px}
.sheet-foot span{line-height:1.5}
.sheet-foot span a{padding-block:12px}

/* HOME — hero */
.hero{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100svh;padding:calc(var(--hdr-h) + 12px) var(--gut) calc(86px + env(safe-area-inset-bottom));color:var(--foam);background:var(--lagoon);overflow:hidden}
.hero picture,.hero-img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-img{object-fit:cover;object-position:50% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(var(--scrim),.62) 0,rgba(var(--scrim),.18) 22%,rgba(var(--scrim),0) 40%),linear-gradient(to top,rgba(var(--scrim),.86) 0,rgba(var(--scrim),.58) 30%,rgba(var(--scrim),0) 66%)}
.hero-in{align-self:end;display:grid;gap:18px}
.hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.hero-eyebrow span+span{opacity:.75}
.hero-eyebrow .hero-more{display:none}
.hero-h{font-size:clamp(3.05rem,14.6vw,5.2rem);max-width:12ch}
.hero-strip{display:none}
@media (min-width:760px){
  .hero-img{object-position:50% 100%}
  .hero-in{gap:clamp(14px,2.2vh,24px);padding-bottom:clamp(22px,3.6vh,44px)}
  .hero-eyebrow{column-gap:34px}
  .hero-eyebrow span+span{margin-left:auto}
  .hero-eyebrow .hero-more{display:inline-flex;align-items:center;gap:14px;opacity:1;text-decoration:none;min-height:50px}
  .hero-more:hover .btn-circ{transform:translateY(4px)}
  .hero-h{font-size:clamp(3.6rem,8.2vw,10.5rem);max-width:none;text-wrap:initial}
  .hero-h>span{display:block;white-space:nowrap}
  .hero-strip a{display:flex;align-items:center;gap:14px;padding:16px 18px 18px 0;text-decoration:none;min-height:96px}
  .hero-strip a+a{padding-left:18px;border-left:1px solid var(--rule-lt)}
  .hero-strip img{width:88px;height:62px;object-fit:cover;flex:none;transition:transform .7s var(--ease)}
  .hero-strip a:hover img{transform:scale(1.06)}
  .hero-strip b{display:block;font-weight:650;font-stretch:90%;font-size:1.12rem;letter-spacing:-.015em;line-height:1.1;margin-bottom:5px}
  .hero-strip .m{display:block;opacity:.78;font-size:.66rem}
}
@media (min-width:960px){
  .hero{padding-bottom:0}
  .hero-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-lt)}
}
@media (min-width:960px) and (max-width:1100px){.hero-strip img{display:none}}
@media (min-width:960px) and (max-height:800px){
  .hero-h{font-size:min(8.2vw,12.4vh)}
  .hero-strip a{min-height:82px;padding-block:10px 12px}
  .hero-strip img{width:72px;height:52px}
  .hero-in{padding-bottom:18px}
}

/* HOME — intro: a paragraph at display size, every clause a way in */
.intro{background:var(--lagoon);color:var(--foam);display:grid;gap:22px;padding:clamp(3.6rem,9vw,8.5rem) var(--gut) clamp(3.6rem,8vw,7.5rem)}
.intro-k{opacity:.8}
.intro-p{font-size:clamp(1.62rem,3.5vw,3.35rem);line-height:1.1;font-weight:500;font-stretch:86%;letter-spacing:-.025em;max-width:27ch;text-wrap:pretty}
.intro-p a{text-decoration:underline;text-decoration-thickness:.055em;text-underline-offset:.13em;text-decoration-color:rgba(243,240,230,.45);transition:text-decoration-color .3s,color .3s}
.intro-p a:hover{text-decoration-color:currentColor;color:#fff}
@media (min-width:900px){.intro{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}.intro-k{padding-top:.9em}.intro-p{max-width:30ch}}

/* section headings: the heading closes the upper colour field and rests just above the colour change.
   Every glyph is one colour on one flat ground (measured: 1 ground colour, contrast >= 8.7:1).
   Replaces the earlier two-tone "waterline" cut, which the owner found hard to read. */
.seam-sec{background:var(--to);padding-top:0;color:var(--to-ink)}
.seam{margin:0;background:var(--from);color:var(--from-ink);padding:clamp(2.8rem,7vw,6.4rem) var(--gut) .13em;font-size:clamp(3rem,9.3vw,10.6rem)}
@media (forced-colors:active){.seam{background:Canvas;color:CanvasText}}

/* HOME — four houses */
.mosaic{display:grid;gap:4px}
.panel{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(140vw,640px);overflow:hidden;color:var(--foam);background:var(--lagoon)}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(var(--scrim),.92) 0,rgba(var(--scrim),.64) 30%,rgba(var(--scrim),0) 64%);transition:opacity .5s}
.panel-in{display:grid;gap:12px;padding:var(--gut)}
.panel h3{font-size:clamp(2.9rem,5.6vw,5.6rem)}
.panel-link{text-decoration:none}
.panel-link::after{content:"";position:absolute;inset:0;z-index:1}
.panel-link:focus-visible{outline:none;box-shadow:none}
.panel:has(.panel-link:focus-visible){outline:3px solid #fff;outline-offset:-6px}
.panel-p{max-width:40ch;line-height:1.45}
.panel-act{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.panel-act .btn{position:relative;z-index:2}
.panel-go{display:inline-flex;align-items:center;gap:12px}
.panel-go .m{display:none}
@media (min-width:900px){
  .mosaic{grid-template-columns:repeat(12,minmax(0,1fr))}
  .panel{min-height:clamp(480px,47vw,780px);grid-column:span 7}
  .panel:nth-child(4n+2),.panel:nth-child(4n+3){grid-column:span 5}
  .panel-go .m{display:inline}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .panel:hover>img{transform:scale(1.035)}
  .panel:hover .btn-solid{transform:translateX(5px)}
}

/* HOME — getting here */
.reach{display:grid;gap:clamp(2rem,5vw,4rem);padding:0 0 clamp(3rem,6vw,5.5rem)}
.reach-text{padding:clamp(4rem,9vw,8.5rem) var(--gut) 0}
.reach h2{font-size:clamp(2.7rem,6vw,6.2rem);margin:.3em 0 .55em;max-width:11ch}
.routes li{display:grid;grid-template-columns:minmax(4.6rem,auto) 1fr;column-gap:clamp(16px,2.4vw,36px);padding:22px 0;border-top:1px solid var(--rule)}
.routes li:last-child{border-bottom:1px solid var(--rule)}
.route-tag{font-size:clamp(2rem,3.4vw,3.2rem);color:var(--lagoon-2);min-width:2.6em}
.routes h3{font-size:1.24rem;font-weight:650;font-stretch:90%;letter-spacing:-.012em;line-height:1.2;margin-bottom:6px}
.routes p{max-width:52ch;color:rgba(7,37,40,.84)}
.note{margin-top:28px;padding:20px 22px;background:var(--stone-2);max-width:60ch;line-height:1.5}
.note .m{display:block;margin-bottom:8px;color:var(--lagoon)}
.reach-fig{position:relative;margin-left:var(--gut)}
.reach-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.reach-fig::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(to top,rgba(var(--scrim),.7),rgba(var(--scrim),0));pointer-events:none}
.reach-fig figcaption{position:absolute;z-index:1;left:16px;bottom:14px;color:var(--foam)}
@media (min-width:960px){
  .reach{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .reach-fig{margin:4px 0 0;position:sticky;top:0}
  .reach-fig img{aspect-ratio:auto;height:100vh;height:100svh;max-height:920px;object-position:72% 50%}
  .reach-text{padding-right:clamp(24px,5vw,90px)}
}

/* HOME — contact */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3rem);padding-top:clamp(1.4rem,3vw,2.6rem)}
.contact-text{display:grid;gap:22px;justify-items:start;align-content:start;padding:0 var(--gut)}
.contact-p{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.22;font-weight:500;font-stretch:88%;letter-spacing:-.018em;max-width:24ch}
.contact .btn{text-transform:none;letter-spacing:.02em;font-size:.84rem}
.wa-list{display:flex;flex-wrap:wrap;gap:8px}
.contact-fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}.contact-text{padding-bottom:var(--gut)}.contact-fig img{aspect-ratio:16/9}}

/* footer */
.ftr{background:var(--ink);color:var(--foam);padding:clamp(3rem,6vw,5.5rem) 0 calc(96px + env(safe-area-inset-bottom));overflow:hidden}
.ftr-grid{display:grid;gap:28px;padding:0 var(--gut)}
.ftr-tag{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.12;font-weight:500;font-stretch:86%;letter-spacing:-.02em;max-width:18ch}
.ftr .m{opacity:.62;margin-bottom:8px}
.ftr li a,.ftr-grid p a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:0}
.ftr li a:hover{text-decoration:underline;text-underline-offset:.2em}
.ftr-word{margin:clamp(2rem,5vw,4rem) 0 0;padding:0 var(--gut);font-weight:740;font-stretch:100%;letter-spacing:-.02em;font-size:11.3vw;line-height:.8;white-space:nowrap;color:var(--lagoon)}
.ftr-legal{display:grid;gap:6px;padding:clamp(1.6rem,3vw,2.4rem) var(--gut) 0;font-size:.84rem;opacity:.66;max-width:78ch}
.ftr-legal a{text-underline-offset:.2em}
@media (min-width:900px){.ftr{padding-bottom:var(--gut)}.ftr-grid{grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.4fr))}}

/* fixed book bar — phones only; the thumb lives here */
.bar{position:fixed;inset:auto 0 0;z-index:70;display:flex;align-items:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(7,37,40,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--rule-lt);color:var(--foam)}
.bar .btn{flex:1;min-height:52px;font-size:.78rem}
.bar .btn-circ{width:52px;height:52px}
@media (min-width:960px){.bar{display:none}}

/* HOUSE — hero: field and photograph bleed into each other, the name crosses the seam */
.hh{position:relative;isolation:isolate;display:grid;background:var(--lagoon);color:var(--foam);overflow:hidden;padding-bottom:34px}
.hh-photo{position:relative;order:0;height:64svh;min-height:380px;z-index:-1}
.hh-photo img{width:100%;height:100%;object-fit:cover}
.hh-photo::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(var(--scrim),.66) 0,rgba(var(--scrim),0) 28%),linear-gradient(to top,var(--lagoon) 0,rgba(11,74,78,.72) 12%,rgba(11,74,78,0) 40%)}
.hh-name{order:1;font-size:clamp(3.4rem,19.6vw,7rem);margin-top:-.7em;padding:0 var(--gut)}
.hh-eyebrow{order:2;display:flex;flex-wrap:wrap;gap:4px 16px;padding:22px var(--gut) 0}
.hh-eyebrow a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
.hh-eyebrow span{opacity:.75}
.hh-body{order:3;padding:12px var(--gut) 0;display:grid;gap:22px}
.hh-pitch{font-size:clamp(1.22rem,1.75vw,1.56rem);line-height:1.3;font-weight:450;font-stretch:92%;letter-spacing:-.012em;max-width:31ch}
.hh-act{display:flex;flex-wrap:wrap;gap:8px}
.hh .hh-act{display:none}
.hh-facts{order:4;display:grid;grid-template-columns:1fr 1fr;margin:28px var(--gut) 0;border-top:1px solid var(--rule-lt)}
.hh-facts>div{padding:14px 12px 16px 0;border-bottom:1px solid var(--rule-lt)}
.hh-facts dt{opacity:.7;margin-bottom:5px}
.hh-facts dd{font-size:1.12rem;font-weight:600;font-stretch:92%;letter-spacing:-.01em;line-height:1.2}
@media (min-width:960px){
  .hh{min-height:100vh;min-height:100svh;grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:auto 1fr auto auto auto;padding:var(--hdr-h) 0 0}
  .hh-photo{position:absolute;inset:0 0 0 38%;height:auto;min-height:0}
  .hh-photo::after{background:linear-gradient(to right,var(--lagoon) 0,rgba(11,74,78,.8) 12%,rgba(11,74,78,.34) 30%,rgba(11,74,78,0) 52%),linear-gradient(to top,rgba(var(--scrim),.88) 0,rgba(var(--scrim),.4) 18%,rgba(var(--scrim),0) 36%),linear-gradient(to bottom,rgba(var(--scrim),.62) 0,rgba(var(--scrim),0) 22%)}
  .hh-eyebrow{grid-column:1;grid-row:1;padding-top:clamp(18px,4vh,44px)}
  .hh-name{grid-column:1/-1;grid-row:3;margin-top:0;font-size:clamp(6rem,13.4vw,15.5rem);white-space:nowrap}
  .hh-body{grid-column:1;grid-row:4;padding-top:clamp(14px,2.6vh,28px);gap:24px}
  .hh .hh-act{display:flex}
  .hh-facts{grid-column:1/-1;grid-row:5;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(20px,3.4vh,40px)}
  .hh-facts>div{border-bottom:0;padding:16px 18px 22px 0}
  .hh-facts>div+div{padding-left:18px;border-left:1px solid var(--rule-lt)}
}

/* HOUSE — sticky image beside text */
.sp{display:grid}
.sp-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sp-text{display:grid;gap:clamp(2.8rem,6vw,5rem);padding:clamp(3rem,8vw,7.5rem) var(--gut)}
.block>.m{opacity:.75}
.lead{margin-top:14px;font-size:clamp(1.34rem,2.05vw,1.9rem);line-height:1.26;font-weight:450;font-stretch:90%;letter-spacing:-.015em;max-width:30ch;text-wrap:pretty}
.ledger{margin-top:22px;border-top:1px solid var(--rule)}
.ledger li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.ledger-n{display:block;font-size:1.34rem;font-weight:650;font-stretch:88%;letter-spacing:-.015em;line-height:1.15}
.ledger-s{display:block;margin-top:4px;opacity:.8}
.ledger .m{white-space:nowrap}
.amen{margin-top:16px;columns:2;column-gap:28px}
.amen li{break-inside:avoid;padding:11px 0;border-top:1px solid var(--rule);line-height:1.3}
.sp-media img+img{display:none}
@media (max-width:959px){.block-cta{display:none}}
@media (min-width:960px){
  .sp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* the deck: first photo pins, the second slides over it while you read */
  .sp-media{display:flex;flex-direction:column;align-self:stretch}
  .sp-media img{aspect-ratio:auto;flex:none}
  .sp-media img:first-child{position:sticky;top:0;height:100vh;height:100svh}
  .sp-media img+img{display:block;position:relative;z-index:1;flex:1 1 0;height:0;min-height:62vh}
  .sp-text{padding-inline:clamp(32px,6vw,110px);align-self:start}
  .sp-text>*{max-width:36rem}
  .sp--flip .sp-media{order:2}
  .honest .sp-media img:first-child{position:static;flex:1 1 0;height:0;min-height:100vh;min-height:100svh}
}

/* HOUSE — snap gallery */
.gal{padding-bottom:clamp(3rem,6vw,5.5rem)}
.gal-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(1rem,2vw,1.8rem) var(--gut) clamp(1.4rem,2.6vw,2.4rem)}
.gal-ctl{display:none;align-items:center;gap:8px}
.gal-ctl .m{margin-right:10px}
.gal-ctl button:first-of-type svg{transform:rotate(180deg)}
.js .gal-ctl{display:flex}
.snap{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snap::-webkit-scrollbar{display:none}
.snap:focus-visible{outline-offset:-3px}
.snap-i{flex:none;scroll-snap-align:start;width:82vw;aspect-ratio:4/5;overflow:hidden;background:var(--lagoon-2)}
.snap-i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
@media (min-width:760px){.snap-i{width:auto;height:clamp(380px,68vh,700px);aspect-ratio:var(--ar)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.snap-i:hover img{transform:scale(1.03)}}

/* HOUSE — the honest version */
.honest .sp-text{padding-top:clamp(2rem,4vw,3.6rem)}
.honest--plain{background:var(--rattan)}
.notes{margin-top:18px;border-top:1.5px solid var(--ink)}
.notes li{padding:20px 0 22px;border-bottom:1px solid rgba(7,37,40,.4);font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.34;font-weight:500;font-stretch:92%;letter-spacing:-.01em}
.find-addr{margin-top:16px;font-size:1.3rem;line-height:1.3;font-weight:600;font-stretch:90%;max-width:26ch}
.find-ll{margin:12px 0 22px;opacity:.8}
.find p+p{margin-top:12px}

/* HOUSE — guests */
.quotes{padding:clamp(4rem,9vw,8rem) var(--gut)}
.quotes>.m{opacity:.75}
.quotes-grid{display:grid;gap:clamp(2rem,4vw,4rem);margin-top:clamp(2rem,4vw,3.4rem)}
.quotes figure{border-top:1.5px solid var(--ink);padding-top:22px}
.quotes blockquote p{font-size:clamp(1.5rem,2.7vw,2.6rem);line-height:1.12;font-weight:500;font-stretch:84%;letter-spacing:-.025em;text-wrap:pretty;max-width:24ch}
.quotes figcaption{margin-top:20px;opacity:.75}
@media (min-width:800px){.quotes-grid{grid-template-columns:1fr 1fr}}

/* HOUSE — closing */
.stay{padding-bottom:clamp(3rem,6vw,5rem)}
.stay .hh-act{display:flex}
.stay-grid{display:grid;gap:clamp(2.4rem,5vw,4rem);padding:clamp(1.6rem,3vw,2.6rem) 0 0}
.stay-cta{display:grid;gap:26px;align-content:start;padding:0 var(--gut)}
.stay-cta p{font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.28;font-weight:450;font-stretch:90%;max-width:30ch}
.stay-others>.m{padding:0 var(--gut) 12px;opacity:.7}
@media (min-width:960px){.stay-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media (max-width:959px){.stay .hh-act .btn-book{display:none}}

/* motion: one slow drift on the hero, page-to-page image morph. Nothing waits on a script to become visible. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  @supports (animation-timeline:scroll()){
    .hero-img{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    @keyframes drift{to{transform:translateY(6%) scale(1.05)}}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* --- Afsluttende pas (overtagelse): kontrast bag menu og husnavn, telefon i kontakt --- */
@media (min-width:960px){
  .hh-photo::after{background:
    linear-gradient(to right,var(--lagoon) 0,rgba(11,74,78,.86) 14%,rgba(11,74,78,.54) 34%,rgba(11,74,78,.18) 52%,rgba(11,74,78,0) 68%),
    linear-gradient(to top,rgba(var(--scrim),.88) 0,rgba(var(--scrim),.4) 18%,rgba(var(--scrim),0) 36%),
    linear-gradient(to bottom,rgba(var(--scrim),.72) 0,rgba(var(--scrim),.28) 16%,rgba(var(--scrim),0) 30%)}
}
.contact-tel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.contact-tel a{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:650;font-stretch:92%;letter-spacing:-.015em;text-decoration:none;color:inherit;min-height:44px;display:inline-flex;align-items:center}
.contact-tel a:hover{text-decoration:underline;text-underline-offset:.18em}
.contact-tel .m{opacity:.7}

/* --- QA-pas 19/9: målte fund fra tre uafhængige kontrollanter --- */
/* Forsidefliser: "hvor ligger huset"-linjen faldt til 2,45:1 over fotoet */
.panel::before{background:linear-gradient(to top,rgba(var(--scrim),.94) 0,rgba(var(--scrim),.86) 20%,rgba(var(--scrim),.6) 38%,rgba(var(--scrim),0) 70%)}
.panel .m{text-shadow:0 1px 3px rgba(var(--scrim),.85)}
/* Footer: mailadressen overlappede "Where"-kolonnen ved 900-1100px */
.ftr-grid>div{min-width:0}
.ftr li a,.ftr-grid p a{max-width:100%;overflow-wrap:anywhere}
/* Faciliteter: fælles rækker, så stregerne flugter; én kolonne på telefoner */
.amen{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:559px){.amen{grid-template-columns:1fr}}
/* Små etiketter på rattanfeltet: fuld blækstyrke (6,96:1) */
.honest .block>.m,.honest .find-ll{opacity:1}
/* Billedtekst over lagunefotoet */
.reach-fig::after{height:42%;background:linear-gradient(to top,rgba(var(--scrim),.85) 0,rgba(var(--scrim),.6) 35%,rgba(var(--scrim),0) 100%)}
/* Forsidens første skærm på telefon: vis vejen ned til husene */
.hero-eyebrow .hero-more{display:inline-flex;align-items:center;gap:14px;opacity:1;text-decoration:none;min-height:50px}
.hero-eyebrow span+span{opacity:.9}
@media (max-width:899px){.panel-go .m{display:inline;font-size:.66rem}}
@media (max-width:959px){
  /* Afslutningssektionen lovede en bookingside uden at vise knappen */
  .stay .hh-act .btn-book{display:inline-flex}
  /* MENU over lyse hus-fotos */
  .hh-photo::after{background:linear-gradient(to bottom,rgba(var(--scrim),.82) 0,rgba(var(--scrim),.42) 12%,rgba(var(--scrim),0) 30%),linear-gradient(to top,var(--lagoon) 0,rgba(11,74,78,.72) 12%,rgba(11,74,78,0) 40%)}
  .hero{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}
@media (min-width:960px){
  .hero-strip a{align-items:start}
  .hero-strip .m{min-height:2lh}
  .honest .sp-text{padding-left:var(--gut)}
}
/* Klikmål i footerens kreditering */
.ftr-legal .credits{line-height:2.4}
.ftr-legal .credits a{padding-block:13px}
@media (max-width:360px){.contact .btn,.bar .btn{white-space:normal;line-height:1.2;text-align:center}.contact-grid>*{min-width:0}}
@media (max-height:700px){.sheet-lede{font-size:1.05rem;padding-bottom:14px}.sheet-rows a{min-height:76px;padding-block:12px}}

/* --- Hus-striben i heroen: større billeder (Nicklas 19/9) --- */
@media (min-width:1101px){
  .hero-strip a{gap:clamp(14px,1.3vw,22px);min-height:0;padding:clamp(16px,1.4vw,24px) clamp(16px,1.4vw,24px) clamp(18px,1.6vw,26px) 0;align-items:start}
  .hero-strip a+a{padding-left:clamp(16px,1.4vw,24px)}
  .hero-strip img{width:clamp(132px,11.5vw,232px);height:auto;aspect-ratio:4/3}
  .hero-strip b{font-size:clamp(1.12rem,1.35vw,1.5rem);margin:2px 0 7px}
  .hero-strip .m{font-size:clamp(.66rem,.72vw,.78rem);min-height:0;line-height:1.45}
}
@media (min-width:1101px) and (max-height:800px){
  .hero-strip a{padding-block:12px 14px}
  .hero-strip img{width:clamp(104px,9vw,150px)}
}

/* --- WordPress: admin-bjælken og sider der ikke er vores --- */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}
body.solana-plain .hdr,body.solana-plain .js .hdr:not(.is-stuck){color:var(--ink)!important;background:rgba(233,229,218,.94)!important;border-color:var(--rule)!important}
.plain{padding:calc(var(--hdr-h) + 56px) var(--gut) 96px;max-width:74ch;margin-inline:auto;display:grid;gap:1.1rem}
.plain a{text-underline-offset:.18em}