/* Spilies. One stylesheet for every guest page.
   Cool white paper, one sea accent, Montserrat, square geometry, photographs at full weight.
   Structure through space and type, not boxes. Hierarchy holds at 390, 768 and 1440. */

@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --paper:#F5F8FA;      /* page */
  --white:#FFFFFF;
  --mist:#E9F0F3;       /* quiet section ground */
  --ink:#141B1F;        /* text, 16.9:1 on paper */
  --muted:#4E5D67;      /* secondary text, 6.4:1 on paper */
  --line:#D3DEE3;       /* hairlines only */
  --sea:#0A7F8C;        /* action fill; white on it 4.75:1 */
  --sea-deep:#075F69;   /* links and labels on paper, 7.0:1 */
  --sea-tint:#E2F1F2;
  --night:#0F2A30;      /* the single dark chapter and footer */
  --sea-light:#CFE8EC;  /* pale sea tint */
  --sea-ground:#0F6D80; /* the water at the bottom of the hero photo; the hero fades into it and the next section continues it; white 5.9:1 */
  --gutter:clamp(16px,4vw,64px);
  --max:1360px;
  --sans:"Montserrat","Helvetica Neue",Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --bar:64px;
}

*{box-sizing:border-box;border-radius:0}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
picture{display:block;width:100%;height:100%}
figure,h1,h2,h3,p,dl,dd,dt,ol,ul{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
table{border-collapse:collapse}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;z-index:80;top:8px;left:8px;padding:12px 16px;background:var(--ink);color:var(--paper);transform:translateY(-300%)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--sea-deep);outline-offset:3px}

/* Type: one display moment per page; everything else calm. Weights 400 / 500 / 600 only. */
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,76px)}
h2{font-size:clamp(28px,3.3vw,48px)}
h3{font-size:clamp(21px,1.7vw,26px);letter-spacing:-.015em;line-height:1.2}
p{text-wrap:pretty}
.kicker{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--sea-deep)}
.section-title{font-size:clamp(26px,2.6vw,38px)}
.hero-deck{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:34em}

/* Controls: square, flat, sentence case. 48px tall, 44px minimum everywhere. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:600 15px/1 var(--sans);letter-spacing:0;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn-sea{background:var(--sea);color:#fff}
.btn-sea:hover{background:var(--sea-deep)}
.btn-ghost{background:rgba(6,26,34,.62);border-color:rgba(255,255,255,.8);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-ghost-dark{border-color:var(--ink);color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:#fff;color:var(--sea-deep)}
.btn-light:hover{background:var(--sea-tint)}
.text-link{display:inline-block;padding-block:11px;min-height:44px;font-size:15px;font-weight:600;color:var(--sea-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.text-link:hover{color:var(--ink)}
.inline-link{color:var(--sea-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:500}
.inline-link:hover{color:var(--ink)}

/* Shell: one sticky bar on every route; "Check dates" never leaves the screen. */
.bar{position:sticky;top:0;z-index:60;height:64px;display:flex;align-items:center;gap:clamp(12px,3vw,40px);padding:0 var(--gutter);background:rgba(245,248,250,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.mark{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.bar-nav{display:flex;gap:clamp(4px,2.4vw,32px);margin-left:auto}
.bar-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent}
.bar-nav a:hover{color:var(--ink)}
.bar-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.bar-cta{min-height:44px;padding:0 18px}
.bar-cta[aria-current="page"]{background:var(--sea-deep)}

/* Home hero: the straight-down photograph of Korakas, pinned for one window, flies from the house down to
   the sea with the scroll and keeps going until its bottom edge sits just above the words. Below that edge it
   dissolves into the sea colour. The headline appears once the water is under it; the rest of the words
   follow at the end. js/dive.js drives --dive-y (photo offset, px), --dive-edge (photo bottom, px),
   --dive-fade, --dive-l (headline) and --dive-t (the other words). Only transforms and opacity change, so
   the motion stays smooth. Without the script, or with reduced motion, it is the final frame, still. */
.dive{position:relative;background:var(--sea-ground);color:#fff}
.dive-stage{position:relative;height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));overflow:hidden}
.dive-media{position:absolute;inset:0}
.dive-media img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:140%;object-fit:cover;transform:translate3d(0,var(--dive-y,calc(45vh - 100%)),0);will-change:transform;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent)}
.dive-fade{--band:clamp(80px,12vh,140px);position:absolute;left:0;right:0;top:0;height:calc(100% + var(--band));opacity:var(--dive-fade,1);pointer-events:none;transform:translate3d(0,calc(var(--dive-edge,45vh) - var(--band)),0);will-change:transform,opacity;background:linear-gradient(to bottom,rgba(15,109,128,0) 0,rgba(15,109,128,.8) calc(var(--band) * .7),var(--sea-ground) var(--band),var(--sea-ground) 100%)}
.lead{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(32px,6vh,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px clamp(16px,2vw,32px);align-items:end}
.lead>*{opacity:var(--dive-t,1)}
.lead h1{opacity:var(--dive-l,1);color:#fff}
.lead .kicker{grid-column:1/-1;color:rgba(255,255,255,.92)}
.lead h1{grid-column:1/10;max-width:11em;font-size:clamp(34px,min(6vw,9vh),88px);line-height:.98;letter-spacing:-.04em}
.lead .hero-deck{grid-column:1/7;color:rgba(255,255,255,.92);font-size:clamp(16px,1.3vw,19px)}
.lead .actions{grid-column:8/13;justify-self:end}
.lead .text-link{color:#fff}
.lead .text-link:hover{color:var(--sea-light)}
.dive.is-live{height:240vh;height:240svh}
.dive.is-live .dive-stage{position:sticky;top:var(--bar)}
.dive.is-live:not(.words-on) .lead{pointer-events:none}

/* Home: the bridge out of the hero. It continues the sea the hero fades into, says where the house is, and the
   bay photograph straddles the edge into the paper below, so there is no hard cut between the two. */
.bridge{background:var(--sea-ground);color:#fff;padding:clamp(56px,7vw,100px) var(--gutter) 0}
.bridge-words{max-width:var(--max);margin:0 auto clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px clamp(16px,2vw,32px);align-items:end}
.bridge-words .kicker{grid-column:1/-1;color:var(--sea-light)}
.bridge-words h2{grid-column:1/8;max-width:14em}
.bridge-words p:not(.kicker){grid-column:8/13;color:rgba(255,255,255,.88);font-size:clamp(17px,1.35vw,20px);line-height:1.55;padding-bottom:4px}
.place-photo{position:relative;z-index:1;max-width:var(--max);margin:0 auto calc(var(--overlap) * -1);aspect-ratio:2/1;overflow:hidden}
.bridge+.stays-choice{padding-top:calc(clamp(110px,15vw,230px) + clamp(56px,7vw,100px))}
/* Scroll reveal (js/dive.js adds .js-reveal unless motion is reduced; without it everything shows). */
.js-reveal .reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-reveal .reveal.is-in{opacity:1;transform:none}
.js-reveal .place-photo img{transform:scale(1.06);transition:transform 1.8s var(--ease)}
.js-reveal .place-photo.is-in img{transform:none}

/* Inner page hero: words on the paper, then the photograph full bleed to the bottom of the first screen. */
.page-hero{display:flex;flex-direction:column;height:calc(100svh - var(--bar));min-height:560px;max-height:980px}
.page-hero-words{max-width:var(--max);width:100%;margin:0 auto;padding:clamp(32px,6vh,72px) var(--gutter) clamp(24px,4vh,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px clamp(16px,2vw,32px);align-items:end}
.page-hero-words .kicker{grid-column:1/-1}
.page-hero-words h1{grid-column:1/8;font-size:clamp(34px,4.4vw,64px);max-width:13em}
.page-hero-words .hero-deck{grid-column:8/13;color:var(--muted);padding-bottom:6px}
.page-hero-media{order:2;position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.page-hero-media picture{position:absolute;inset:0}

/* Home: terrace threshold. Photo dominant, words offset beside it. */
.threshold{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(72px,9vw,140px)}
.threshold-photo{grid-column:1/9;aspect-ratio:4/3;overflow:hidden}
.threshold-words{grid-column:9/13;align-self:end;display:flex;flex-direction:column;gap:18px;padding-bottom:8px}
.threshold-words p:not(.kicker){color:var(--muted)}

/* Home: the two stays. The comparison layer at the point of choice. */
.stays-choice{max-width:var(--max);margin:0 auto;padding:clamp(72px,9vw,140px) var(--gutter)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.choice-unit{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.choice-unit figure{width:100%;aspect-ratio:3/2;overflow:hidden;margin-bottom:12px}
.choice-unit>p{max-width:36em;color:var(--muted)}
.choice-unit .choice-facts{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.choice-unit .actions{margin-top:8px}
.from{font-size:15px;color:var(--muted)}
.from.from-live{color:var(--ink);font-weight:500}
.choice-note{margin-top:clamp(28px,3vw,44px);color:var(--muted);max-width:60em}

/* Home: the beach. A drone frame from above the water: pebbles, sunbeds, trees, the house. Words beside it. */
.beach{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(72px,9vw,140px)}
.beach-words{grid-column:1/6;align-self:center;display:flex;flex-direction:column;gap:18px}
.beach-words p:not(.kicker){color:var(--muted)}
.beach-photo{grid-column:6/13;aspect-ratio:4/3;overflow:hidden}

/* Facts in a row of four: labels, no boxes. */
.essentials{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter);border-top:1px solid var(--line)}
.facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,3vw,48px);margin-top:32px}
.facts-row dt,.terms-list dt{font-size:13px;font-weight:600;color:var(--sea-deep);margin-bottom:6px}
.facts-row dd{color:var(--ink)}

/* The one dark chapter: the decision. */
.close{background:var(--sea-deep);color:#fff;text-align:center;padding:clamp(72px,9vw,130px) var(--gutter);display:flex;flex-direction:column;align-items:center;gap:20px}
.close h2{max-width:16em}
.close p{color:rgba(255,255,255,.9);max-width:34em}

/* Stays: comparison table. Rows separated by hairlines only. */
.compare{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter) clamp(56px,7vw,110px)}
.compare-scroll{margin-top:28px}
.compare-table{width:100%;font-variant-numeric:tabular-nums}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:16px 20px 16px 0}
.compare-table thead th{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.015em;padding-bottom:20px}
.compare-table thead th a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid transparent}
.compare-table thead th a:hover{border-bottom-color:currentColor}
.compare-table tbody th{width:20%;font-size:14px;font-weight:600;color:var(--sea-deep)}
.compare-table tbody td{width:40%}
.compare-table tbody tr{border-top:1px solid var(--line)}
.compare-table tfoot td{padding-top:24px}
.compare-table .from{color:var(--ink)}

/* Stays: one chapter per home with an asymmetric gallery. */
.unit{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,110px) var(--gutter)}
.unit-studio{background:none}
.unit-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px clamp(16px,2vw,32px);margin-bottom:clamp(28px,3.5vw,52px)}
.unit-head .kicker{grid-column:1/-1}
.unit-head h2{grid-column:1/6;font-size:clamp(32px,3.8vw,56px)}
.unit-lede{grid-column:7/13;align-self:end;font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:30em}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2vw,32px)}
.gallery figure{min-width:0}
.gallery picture{overflow:hidden;height:auto}
.gallery figcaption{margin-top:12px;font-size:15px;color:var(--muted);max-width:38em}
.gallery-apartment .g-wide{grid-column:1/-1}
.gallery-apartment .g-wide picture{aspect-ratio:21/10}
.gallery-apartment .g-a{grid-column:1/8}.gallery-apartment .g-a picture{aspect-ratio:4/3}
.gallery-apartment .g-b{grid-column:8/13;align-self:end}.gallery-apartment .g-b picture{aspect-ratio:4/5}
.gallery-apartment .g-c{grid-column:2/7}.gallery-apartment .g-c picture{aspect-ratio:1/1}
.gallery-apartment .g-d{grid-column:7/13;align-self:center}.gallery-apartment .g-d picture{aspect-ratio:3/2}
.gallery-studio .g-wide{grid-column:1/9}.gallery-studio .g-wide picture{aspect-ratio:16/10}
.gallery-studio .g-tall{grid-column:9/13;align-self:end}.gallery-studio .g-tall picture{aspect-ratio:3/4}
.unit-act{margin-top:clamp(28px,3.5vw,48px)}

.with{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter);border-top:1px solid var(--line)}
.with-list{columns:3 280px;column-gap:clamp(24px,3vw,56px);margin-top:28px}
.with-list li{break-inside:avoid;padding:0 0 18px;color:var(--muted)}
.with-list b{color:var(--ink);font-weight:600}
.with-more{margin-top:12px}
.with-more .inline-link{display:inline-flex;align-items:center;min-height:44px}

/* Onward: every inner page ends by leading to the other pages. */
.onward{display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(56px,7vw,100px);gap:clamp(16px,2vw,32px)}
.onward a{display:flex;flex-direction:column;gap:6px;padding:28px 0 8px;border-top:2px solid var(--ink);min-height:44px}
.onward-label{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.02em}
.onward-line{color:var(--muted)}
.onward a:hover .onward-label{color:var(--sea-deep)}

/* Area: a distance ruler, then chapters. */
.distances{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter)}
.dist-list{margin:28px 0 12px;counter-reset:d}
.dist-list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px clamp(16px,2vw,32px);padding:18px 0;border-top:1px solid var(--line)}
.d-place{font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.01em}
.d-how{color:var(--muted)}
.chapter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px clamp(16px,2vw,32px);max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,96px) var(--gutter)}
.chapter-photo{grid-column:1/8;aspect-ratio:4/3;overflow:hidden}
.chapter-words{grid-column:9/13;align-self:center;display:flex;flex-direction:column;gap:18px}
.chapter-words p:not(.kicker){color:var(--muted)}
.chapter-flip .chapter-photo{grid-column:6/13;grid-row:1}
.chapter-flip .chapter-words{grid-column:1/5;grid-row:1}
.arrive{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px clamp(16px,2vw,32px);max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,96px) var(--gutter) clamp(72px,9vw,130px)}
.arrive-words{grid-column:1/9;display:flex;flex-direction:column;gap:18px}
.arrive-words p:not(.kicker){color:var(--muted);max-width:36em}
.arrive-words .arrive-note{color:var(--ink);padding-left:16px;border-left:2px solid var(--sea)}
.arrive-photo{grid-column:8/12}
.arrive-photo picture{aspect-ratio:3/4;overflow:hidden;height:auto}
.arrive-photo figcaption,.gallery figcaption{margin-top:12px;font-size:15px;color:var(--muted)}

.village{max-width:var(--max);margin:clamp(24px,3vw,48px) auto;padding:clamp(56px,7vw,100px) var(--gutter);background:var(--mist);display:flex;flex-direction:column;gap:18px}
.village-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);color:var(--ink);max-width:62em}

/* Area: day trips along the coast. Text only, hairlines, three across. */
.day-out{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter)}
.day-out-lede{margin-top:12px;color:var(--muted)}
.day-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(20px,3vw,48px);margin-top:32px}
.day-list li{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.day-list h3{font-size:clamp(20px,1.6vw,24px)}
.day-list .d-how{font-size:14px;font-weight:600;color:var(--sea-deep)}
.day-list p:not(.d-how){color:var(--muted)}

/* Check dates: the tool comes first. */
.tool{max-width:1080px;margin:0 auto;padding:clamp(32px,5vw,72px) var(--gutter) clamp(48px,6vw,90px)}
.tool-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(20px,3vw,36px)}
.tool-head h1{font-size:clamp(34px,4vw,56px)}
.tool-head .hero-deck{color:var(--muted)}
.terms{max-width:1080px;margin:0 auto;padding:clamp(48px,6vw,90px) var(--gutter);border-top:1px solid var(--line)}
.terms-list{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px,4vw,64px);margin-top:28px}
.terms-list dd{color:var(--ink);max-width:38em}
.ask{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--mist)}
.ask-plain{grid-template-columns:1fr}
.ask-plain .ask-words{width:100%;max-width:var(--max);margin:0 auto;padding-block:clamp(48px,6vw,88px)}
.ask-photo{min-height:420px;position:relative}
.ask-photo picture{position:absolute;inset:0}
.ask-words{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(40px,6vw,96px) var(--gutter)}
.ask-words p{color:var(--muted)}
.ask+.onward{padding-top:clamp(48px,6vw,90px)}

/* Utility pages */
.utility{max-width:1080px;margin:0 auto;padding:clamp(56px,8vw,120px) var(--gutter)}
.utility h1{margin-top:12px;font-size:clamp(34px,4vw,56px)}
.utility .hero-deck{margin-top:18px;color:var(--muted)}
.utility .actions{margin-top:28px}
.policy-copy{max-width:72ch;margin-top:40px}
.policy-copy p{margin:0 0 22px}
.policy-copy h2{font-size:24px;margin:40px 0 14px;line-height:1.3}
.policy-copy a{color:var(--sea-deep);text-decoration:underline;text-underline-offset:3px}

/* Footer: the trust strip and a second "Check dates". */
.foot{background:var(--night);color:rgba(255,255,255,.82);font-size:15px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1.3fr .8fr;gap:32px clamp(24px,3vw,48px);max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter) clamp(56px,7vw,90px)}
.foot-mark{color:#fff;font-size:15px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.foot address{font-style:normal;margin:12px 0 24px;max-width:18em}
.foot-label{color:#fff;font-weight:600;margin-bottom:10px}
.foot ul{display:flex;flex-direction:column;gap:2px}
.foot li{min-height:32px;display:flex;align-items:center}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.foot a:hover{color:#fff;text-decoration-color:#fff}
.foot .foot-cta{text-decoration:none;color:#fff;min-height:48px}
.foot a[aria-current="page"]{color:#fff}
.foot :focus-visible,.close :focus-visible,.dive :focus-visible,.bridge :focus-visible{outline-color:#fff}

/* Booking page: calendar (markup drawn by js/book.js) */
.cal-panel{background:var(--white);padding:clamp(18px,3vw,36px)}
.cal-head-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cal-title{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;font-weight:500;line-height:1.7}
.cal-nav{width:48px;height:48px;border:1px solid var(--ink);background:none;font:400 24px/1 var(--sans);cursor:pointer;color:var(--ink)}
.cal-nav:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-sel{margin-top:10px;min-height:28px;color:var(--muted)}
.cal-sel b{color:var(--ink);font-weight:600}
.cal-clear{margin-left:10px;display:inline-flex;align-items:center;min-height:44px;padding:4px 0;border:0;background:none;font:600 14px/1 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--sea-deep)}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 24px;margin:14px 0 14px;font-size:14px;color:var(--muted)}
.cal-key-help{font-size:13px;line-height:1.5;color:var(--muted)}
.cal-grid{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.cal-dow{background:var(--paper);padding:10px 0;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.cal-gridcell{min-width:0}
.cal-gridcell.empty{background:var(--paper);aspect-ratio:1/.62}
.cal-cell{width:100%;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;aspect-ratio:1/.62;padding:10px;border:0;background:var(--white);font:400 16px/1 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.cal-cell:hover:not(:disabled):not(.s-start):not(.s-end){background:var(--sea-tint)}
.cal-cell.past{color:#5d6b74;cursor:default;background:var(--paper)}
.cal-cell.full .cal-n{color:var(--muted);text-decoration:line-through}
.cal-cell.s-start,.cal-cell.s-end{background:var(--sea-deep);color:#fff}
.cal-cell.s-start .cal-dot.free,.cal-cell.s-end .cal-dot.free{background:#fff}
.cal-cell.s-mid{background:var(--sea-tint)}
.cal-dots{display:flex;gap:5px}
.cal-dot{display:inline-block;width:10px;height:10px;background:var(--sea)}
.cal-dot.booked{background:transparent;box-shadow:inset 0 0 0 2px #55606a}
.cal-dot.unknown{background:transparent;border:1px dashed var(--muted)}
.cal-p{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-cell.s-start .cal-p,.cal-cell.s-end .cal-p{color:#fff}
.cal-cell.past .cal-dots{visibility:hidden}
.cal-note{padding:16px 0;color:var(--muted)}
.cal-note a{color:var(--sea-deep);text-decoration:underline;text-underline-offset:3px}
.cal-res{margin-top:16px;background:var(--white);padding:clamp(18px,3vw,36px)}
.cal-head{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;padding-bottom:16px}
.cal-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.cal-row.off{opacity:.6}
.cal-row-focus{box-shadow:inset 3px 0 0 var(--sea);padding-left:14px}
.cal-unit{font-size:20px;font-weight:500}
.cal-meta{font-size:14px;color:var(--muted)}
.cal-warn{margin-top:6px;font-size:14px;color:var(--sea-deep);font-weight:500}
.cal-na{font-size:14px;font-weight:600;color:var(--muted)}
.cal-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.cal-price{font-size:26px;font-weight:500;letter-spacing:-.01em}
.cal-price span{font-size:14px;color:var(--muted)}
.cal-party{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--muted)}
.cal-party select{margin-left:6px;min-height:44px;padding:0 8px;border:1px solid var(--line);background:var(--white);font:inherit;color:var(--ink)}
.cal-res .btn{background:var(--sea);color:#fff}
.cal-res .btn:hover{background:var(--sea-deep)}
.cal-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.book-wrap{margin-top:16px;background:var(--white);border-top:3px solid var(--sea);padding:clamp(18px,3vw,36px);min-width:0}
.book-title{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;font-weight:500;line-height:1.5}
.book-secure{margin:6px 0 20px;font-size:14px;color:var(--muted)}
#book-mount{min-width:0;max-width:100%}
.checkout-frame-shell{width:100%;min-width:0;max-width:100%;background:var(--paper);border:1px solid var(--line)}
.checkout-frame{display:block;width:100%;max-width:100%;min-width:0;height:clamp(2200px,calc(100vh + 1400px),3200px);border:0;background:var(--white);vertical-align:top}
.checkout-frame.checkout-auto-sized{min-height:0}
.checkout-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0}
.checkout-tools .text-link,.checkout-tools .cal-clear{min-height:44px;display:inline-flex;align-items:center}
.checkout-tools-bottom{margin-top:0;padding-top:12px;border-top:1px solid var(--line)}
@supports (height:100svh){.checkout-frame{height:clamp(2200px,calc(100svh + 1400px),3200px)}}
.alt{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:18px}
.cal-home-choice{margin-bottom:20px}
.cal-home-choice label{display:block;font-weight:600;margin-bottom:8px}
.cal-home-choice select{min-height:48px;min-width:min(100%,340px);max-width:100%;padding:8px 12px;font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--ink)}
.cal-home-choice p{font-size:14px;color:var(--muted);margin-top:8px;max-width:55ch}
.calendar-help{margin:0 0 12px;font-size:14px;color:var(--muted)}
.calendar-help summary{cursor:pointer;min-height:44px;display:list-item;padding-block:12px;text-decoration:underline;text-underline-offset:4px}
#apartment,#studio,#availability,#book-wrap,#compare,#stays{scroll-margin-top:84px}

/* Tablet */
@media (max-width:1100px){
  .day-list{grid-template-columns:1fr 1fr}
  .facts-row{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .threshold-photo{grid-column:1/8}
  .threshold-words{grid-column:8/13}
}

/* Phone and small tablet: a deliberate linear edit, not an equal stack. */
@media (max-width:700px){
  :root{--bar:60px}
  .bar{height:60px}
  body{font-size:16px}
  .bar{gap:8px}
  .mark{font-size:14px;letter-spacing:.22em}
  .bar-nav{gap:0}
  .bar-nav a{font-size:14px;padding:0 8px}
  .bar-cta{padding:0 14px;font-size:14px}
  .lead{grid-template-columns:1fr;gap:14px}
  .lead h1,.lead .hero-deck,.lead .actions{grid-column:1/-1;justify-self:start}
  .lead h1{font-size:clamp(34px,9.6vw,52px)}
  .place-photo{aspect-ratio:4/3;margin-inline:calc(var(--gutter) * -1)}
  .bridge-words{grid-template-columns:1fr}
  .bridge-words h2,.bridge-words p:not(.kicker){grid-column:1/-1}
  .page-hero{height:auto;min-height:0;max-height:none}
  .page-hero-words{grid-template-columns:1fr;padding-top:28px}
  .page-hero-words h1,.page-hero-words .hero-deck{grid-column:1/-1}
  .page-hero-media{flex:none;height:56svh;min-height:300px}
  .village{margin-inline:0}
  .village-cols{grid-template-columns:1fr}
  .threshold,.beach,.chapter,.arrive,.unit-head,.gallery{grid-template-columns:1fr}
  .threshold{padding-top:0;padding-bottom:64px;gap:24px}
  .threshold-photo,.threshold-words,.beach-words,.beach-photo,.chapter-photo,.chapter-words,.chapter-flip .chapter-photo,.chapter-flip .chapter-words,.arrive-words,.arrive-photo,.unit-head h2,.unit-lede{grid-column:1/-1;grid-row:auto}
  .threshold-photo{margin-inline:calc(var(--gutter) * -1);aspect-ratio:5/4}
  .stays-choice{padding-top:56px;padding-bottom:64px}
  .choice{grid-template-columns:1fr;gap:48px}
  .beach{gap:28px;padding-bottom:64px}
  .beach-photo{order:-1;aspect-ratio:4/3;width:auto;margin-inline:calc(var(--gutter) * -1)}
  .facts-row{grid-template-columns:1fr;gap:20px}
  .compare-table thead th{font-size:18px}
  .compare-table th,.compare-table td{padding:14px 12px 14px 0;font-size:15px}
  .compare-table tbody th{width:28%;font-size:13px}
  .compare-table tbody td{width:36%}
  .compare-table tfoot .btn{padding:0 12px;font-size:14px}
  .gallery{gap:28px}
  .gallery figure{grid-column:1/-1!important}
  .gallery-apartment .g-wide picture{aspect-ratio:4/3}
  .gallery-apartment .g-wide{margin-inline:calc(var(--gutter) * -1)}
  .gallery-apartment .g-wide figcaption{padding-inline:var(--gutter)}
  .gallery-apartment .g-b,.gallery-apartment .g-c{width:78%}
  .gallery-apartment .g-c{justify-self:end}
  .gallery-studio .g-wide{margin-inline:calc(var(--gutter) * -1)}
  .gallery-studio .g-wide figcaption{padding-inline:var(--gutter)}
  .gallery-studio .g-tall{width:72%}
  .with-list{columns:1}
  .onward{grid-template-columns:1fr;gap:0}
  .dist-list li{grid-template-columns:1fr;gap:2px}
  .day-list{grid-template-columns:1fr;gap:24px}
  .chapter{gap:20px;padding-block:40px}
  .chapter-photo{margin-inline:calc(var(--gutter) * -1)}
  .arrive-photo{width:80%}
  .terms-list{grid-template-columns:1fr;gap:20px}
  .ask{grid-template-columns:1fr}
  .ask-photo{min-height:0;aspect-ratio:3/2}
  .ask-photo picture{position:static}
  .foot-in{grid-template-columns:1fr;gap:28px}
  .tool{padding-top:24px}
  .tool-head .hero-deck{font-size:16px}
  .cal-panel{padding:16px 12px;margin-inline:calc(var(--gutter) * -1)}
  .cal-res,.book-wrap{margin-inline:calc(var(--gutter) * -1);padding-inline:16px}
  .cal-cell{padding:5px;font-size:15px;aspect-ratio:1/1.05;min-height:44px}
  .cal-gridcell.empty{aspect-ratio:1/1.05;min-height:44px}
  .cal-p{display:block;font-size:12px;letter-spacing:-.03em}
  .cal-cur{display:none}
  .cal-row{grid-template-columns:1fr}
  .cal-act{justify-content:flex-start}
  .checkout-frame{min-height:2500px;height:clamp(2500px,calc(100vh + 1800px),3400px)}
}
@media (max-width:380px){
  .mark{letter-spacing:.14em}
  .bar-nav a{padding:0 6px}
  .bar-cta{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.from-note{margin-top:16px;font-size:14px;color:var(--muted);max-width:60em}
/* Classes drawn by js/book.js (retry control). */
.btn-line{border-color:var(--ink);color:var(--ink);background:none}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-small{min-height:44px;padding:0 18px;font-size:14px}
/* Small tablet (701-1024): keep two-up choices and galleries; stack the text-beside-photo chapters. */
@media (min-width:701px) and (max-width:1024px){
  .lead .hero-deck{grid-column:1/9}
  .lead .actions{grid-column:1/-1;justify-self:start}
  .threshold-photo{grid-column:1/-1}
  .threshold-words{grid-column:2/12;padding-top:28px}
  .beach-words{grid-column:1/7}.beach-photo{grid-column:7/13}
  .chapter-photo{grid-column:1/8}.chapter-words{grid-column:8/13}
  .unit-head h2{grid-column:1/-1}.unit-lede{grid-column:1/10}
  .page-hero{max-height:860px}
  .page-hero-words h1{grid-column:1/-1}.page-hero-words .hero-deck{grid-column:1/10}
  .terms-list{gap:24px 32px}
}