/* Hallmark · genre: editorial (light) · macrostructure: split ledger (text-left / photo-right hero with tally, then numbered rows, not a card grid)
 * theme: custom "night swim": warm sand paper, plum ink, wine accent, pool-water secondary
 * display: Cabinet Grotesk 800 · body: Switzer (Fontshare, free commercial licence). Differs from Tubroom (Fraunces/Geist teal),
 * Swim Up (Bricolage blue), Igloo (General Sans green, photo-veil hero), Onsens (Satoshi terracotta).
 * audience: couples (US romantic night away + UK/US couples abroad), phone-first · use: pick the suite, check prices · tone: warm, intimate, plain
 * pre-emit critique: P4 H4 E4 S5 R4 V5
 */
@font-face{font-family:"Cabinet Grotesk";src:url(/fonts/cabinet-grotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url(/fonts/cabinet-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url(/fonts/switzer-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --color-paper:oklch(97% 0.014 75);
  --color-paper-2:oklch(99.3% 0.005 75);
  --color-paper-3:oklch(93.5% 0.02 70);
  --color-line:oklch(87% 0.022 65);
  --color-ink:oklch(24% 0.045 310);
  --color-ink-2:oklch(38% 0.04 310);
  --color-ink-3:oklch(48% 0.035 310);
  --color-accent:oklch(45% 0.14 355);
  --color-accent-hover:oklch(38% 0.13 355);
  --color-accent-ink:oklch(99% 0.006 355);
  --color-accent-wash:oklch(93% 0.035 355);
  --color-water:oklch(72% 0.09 215);
  --color-water-deep:oklch(43% 0.08 225);
  --color-water-wash:oklch(94% 0.03 215);
  --color-terr:oklch(48% 0.11 60);
  --color-terr-wash:oklch(94% 0.035 70);
  --color-yes:oklch(45% 0.11 160);
  --color-no:oklch(50% 0.16 25);
  --color-part:oklch(50% 0.1 65);
  --color-band:oklch(24% 0.045 310);
  --color-band-ink:oklch(96% 0.015 75);
  --color-band-ink-2:oklch(83% 0.03 75);
  --color-focus:oklch(45% 0.14 355);
  --shadow:0 1px 0 oklch(24% 0.045 310 / .06),0 8px 24px -12px oklch(24% 0.045 310 / .18);
  --font-display:"Cabinet Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Switzer",ui-sans-serif,system-ui,sans-serif;
  --r:12px; --r-sm:7px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4.5rem;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 1.05rem/1.6 var(--font-body)}
a{color:var(--color-accent);text-underline-offset:.18em}
a:hover{color:var(--color-accent-hover)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--font-display);font-style:normal;margin:0;overflow-wrap:anywhere;min-width:0;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2.2rem,4.4vw + .6rem,4rem);line-height:.98}
h2{font-weight:800;font-size:clamp(1.6rem,2.2vw + .7rem,2.3rem);line-height:1.05;margin-bottom:var(--s2)}
h3{font-weight:700;font-size:1.3rem;line-height:1.15}
p{margin:0}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--color-paper);padding:.5rem 1rem}
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.sub{color:var(--color-ink-2);margin:-.4rem 0 var(--s2);max-width:46rem}
.eyebrow{font:600 .8rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.8rem}
.eyebrow a{color:inherit;text-decoration:none}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,2rem);border-bottom:1px solid var(--color-line)}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--color-ink);text-decoration:none;flex:0 0 auto}
.logo__mark{width:32px;height:25px;flex:0 0 32px}
.logo__room{fill:none;stroke:var(--color-ink);stroke-width:2}
.logo__pool{fill:var(--color-water)}
.logo__wave{fill:none;stroke:var(--color-paper-2);stroke-width:1.6;stroke-linecap:round}
.logo__word{font:800 1.2rem/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.nav__links{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:flex-end}
.nav__links a{color:var(--color-ink-2);text-decoration:none;font-size:.95rem;white-space:nowrap}
.nav__links a:hover{color:var(--color-accent)}

/* split hero */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;max-width:74rem;margin:0 auto;padding:var(--s4) clamp(1rem,4vw,2rem) var(--s3);align-items:stretch}
.split__text{padding-right:clamp(1rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.split__fig{margin:0;border-radius:var(--r);overflow:hidden;position:relative;min-height:18rem;background:var(--color-paper-3)}
.split__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem;background:linear-gradient(to top,oklch(20% 0.03 310 / .7),oklch(20% 0.03 310 / 0))}
.split__fig .credit,.split__fig .credit a{color:oklch(95% 0.01 75)}
.lede{font-size:1.1rem;color:var(--color-ink-2);margin-top:var(--s2);max-width:40rem}
.tally{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--color-line)}
.tally li{padding:.8rem 1.4rem .2rem 0;margin-right:1.4rem;border-right:1px solid var(--color-line);min-width:0}
.tally li:last-child{border-right:0}
.tally b{display:block;font:800 2.2rem/1 var(--font-display);color:var(--color-ink);font-variant-numeric:tabular-nums}
.tally span{font-size:.85rem;color:var(--color-ink-3)}
.credit{font-size:.75rem;color:var(--color-ink-3)}
.credit a{color:inherit}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--s2);padding:0;font-size:.88rem;color:var(--color-ink-3)}
.crumbs li+li::before{content:"/";margin-right:.4rem}
.crumbs a{color:var(--color-ink-2);white-space:nowrap}

/* dark band (country pages) */
.band{background:var(--color-band);color:var(--color-band-ink);padding:var(--s4) 0;margin-bottom:var(--s4)}
.band .lede{color:var(--color-band-ink-2)}
.band .crumbs ol,.band .crumbs a{color:var(--color-band-ink-2)}

/* picker */
.pick{margin:var(--s4) 0 var(--s5)}
.pick__bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:end;justify-content:space-between;background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--r);padding:.8rem;margin-bottom:var(--s3);position:sticky;top:.5rem;z-index:4;box-shadow:var(--shadow)}
.pick__bar>*{min-width:0}
.dates{display:grid;grid-template-columns:repeat(2,minmax(0,10rem)) minmax(0,5rem);gap:.6rem;flex:1 1 22rem}
.dates label{min-width:0;display:grid;gap:.15rem;font-size:.72rem;color:var(--color-ink-3);text-transform:uppercase;letter-spacing:.06em}
.dates input,.dates select{font:500 .98rem var(--font-body);color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--r-sm);padding:.5rem .55rem;min-width:0;width:100%}
.filters{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filters legend{float:left;font-size:.72rem;color:var(--color-ink-3);text-transform:uppercase;letter-spacing:.06em;margin-right:.4rem}
.filters label{display:inline-flex;align-items:center;gap:.35rem;background:var(--color-paper-3);border-radius:99px;padding:.4rem .8rem;font-size:.9rem;cursor:pointer;white-space:nowrap}
.filters label:has(input:checked){background:var(--color-ink);color:var(--color-paper-2)}
.filters input{position:absolute;opacity:0;pointer-events:none}
.filters label:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.filters span{opacity:.65;font-variant-numeric:tabular-nums}

/* ledger rows */
.rows{list-style:none;padding:0;margin:0 0 var(--s2);border-top:2px solid var(--color-ink)}
.row{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:var(--s2) var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--color-line);align-items:start}
.row[hidden]{display:none}
.row__n{font:800 1.6rem/1 var(--font-display);color:var(--color-ink-3);font-variant-numeric:tabular-nums;padding-top:.1rem}
.row__name{font-size:clamp(1.3rem,1.2vw + .9rem,1.65rem)}
.row__name a{color:var(--color-ink);text-decoration:none}
.row__name a:hover{color:var(--color-accent)}
.row__where{font-size:.88rem;color:var(--color-ink-3);margin-top:.25rem}
.row__room{margin-top:.8rem;font-weight:600;font-size:1.05rem}
.row__room span{font:600 .7rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);margin-right:.6rem;vertical-align:.15em}
.row__spec{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.55rem}
.row__sl{font-size:.9rem;color:var(--color-ink-2)}
.row__q{margin:.8rem 0 0;padding:.6rem .9rem;background:var(--color-paper-3);border-radius:var(--r-sm);font-size:.95rem;color:var(--color-ink-2);max-width:44rem}
.row__q footer{font-size:.78rem;margin-top:.25rem}
.row__q a{color:var(--color-ink-3)}
.row__act{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.row__more{font-size:.92rem;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;font-weight:600;border-radius:99px;padding:.22rem .65rem .22rem .5rem;white-space:nowrap}
.badge--indoor{background:var(--color-water-wash);color:var(--color-water-deep)}
.badge--terrace{background:var(--color-terr-wash);color:var(--color-terr)}
.btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-ink);font-weight:600;text-decoration:none;border-radius:var(--r-sm);padding:.7rem 1.2rem;white-space:nowrap;transition:background .15s,transform .15s}
.btn:hover{background:var(--color-accent-hover);color:var(--color-accent-ink)}
.btn:active{transform:translateY(1px)}
.btn--wide{display:block;text-align:center;margin-top:var(--s2)}
.i{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v{display:inline-flex;align-items:center;gap:.35rem}
.v--yes{color:var(--color-yes)}.v--no{color:var(--color-no)}.v--part{color:var(--color-part)}.v--unk{color:var(--color-ink-3)}
.v--unk .i{fill:currentColor}

/* compare table */
.cmp{margin-bottom:var(--s5)}
.tbl{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--r);background:var(--color-paper-2)}
.grid{border-collapse:collapse;width:100%;min-width:42rem;font-size:.92rem}
.grid th,.grid td{padding:.7rem .85rem;text-align:left;vertical-align:middle}
.grid thead th{background:var(--color-paper-3);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-ink-2)}
.grid tbody tr:nth-child(even){background:var(--color-paper)}
.grid tbody th{font-weight:600;background:var(--color-paper-3)}
.grid tbody th a{color:var(--color-ink)}

/* tiles */
.dest{margin:var(--s4) 0 var(--s5)}
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:var(--s2)}
.tile a{display:grid;text-decoration:none;color:var(--color-ink);border-radius:var(--r);overflow:hidden;background:var(--color-paper-2);border:1px solid var(--color-line);height:100%}
.tile img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.tile__t{font:800 1.35rem/1.1 var(--font-display);padding:.8rem 1rem 0}
.tile__n{font-size:.88rem;color:var(--color-ink-3);padding:.2rem 1rem 1rem}
.tile a:hover .tile__t{color:var(--color-accent)}

/* kinds + drawings */
.kinds{margin-bottom:var(--s5)}
.kinds__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s2)}
.kinds figure{margin:0;background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--r);padding:var(--s2)}
.kinds figcaption{margin-top:.6rem;color:var(--color-ink-2);font-size:.95rem}
.kinds figcaption b{color:var(--color-ink)}
.draw{display:block;width:100%;height:auto}
.draw__wall{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:2.5}
.draw__deck{fill:var(--color-terr-wash);stroke:var(--color-ink);stroke-width:2.5}
.draw__bed{fill:var(--color-paper-3);stroke:var(--color-ink-2);stroke-width:1.5}
.draw__pillow{fill:var(--color-paper-2);stroke:var(--color-ink-3);stroke-width:1.2}
.draw__water{fill:var(--color-water);stroke:var(--color-water-deep);stroke-width:2}
.draw__ripple{fill:none;stroke:var(--color-paper-2);stroke-width:2;stroke-linecap:round;opacity:.85}
.draw__door{fill:none;stroke:var(--color-ink-3);stroke-width:1.5;stroke-dasharray:4 4}
.draw__lab{font:600 13px var(--font-body);fill:var(--color-ink-2)}
.draw__lab--w{fill:var(--color-water-deep)}

/* faq / next */
.faq{margin-bottom:var(--s5);max-width:50rem}
.faq__i{border-top:1px solid var(--color-line)}
.faq__i:last-child{border-bottom:1px solid var(--color-line)}
.faq__i summary{cursor:pointer;padding:1rem 0;font-weight:600;font-size:1.05rem}
.faq__i p{padding:0 0 1rem;color:var(--color-ink-2);max-width:44rem}
.next{margin-bottom:var(--s5)}
.next__l{list-style:none;padding:0;margin:0 0 var(--s2);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.5rem}
.next__l li{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--r-sm);padding:.7rem .9rem;display:flex;justify-content:space-between;gap:.5rem}
.next__l span{color:var(--color-ink-3);font-size:.88rem;white-space:nowrap}

/* hotel page */
.prop{padding-top:var(--s3)}
.prop__head{margin-bottom:var(--s4);max-width:52rem}
.prop__head h1{font-size:clamp(2rem,3.6vw + .6rem,3.4rem)}
.prop__fold{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s4);align-items:start;margin-bottom:var(--s5)}
.prop__main>*+*{margin-top:var(--s4)}
.book{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--r);padding:var(--s3);display:grid;gap:.6rem}
.book__k{font:600 .75rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent)}
.book__room{font:800 clamp(1.5rem,2vw + .8rem,2.1rem)/1.05 var(--font-display);letter-spacing:-.02em}
.book__spec{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.book .draw{margin-top:.6rem;max-width:30rem}
.spec{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-line);border-radius:var(--r);overflow:hidden;background:var(--color-paper-2)}
.spec caption{text-align:left;font:800 1.3rem/1.2 var(--font-display);padding-bottom:.7rem}
.spec th,.spec td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-line);vertical-align:middle}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:42%;background:var(--color-paper-3);font-weight:500;color:var(--color-ink-2)}
.spec tr:nth-child(even) td{background:var(--color-paper)}
.spec .is-pick td{background:var(--color-accent-wash)}
.note,.also{color:var(--color-ink-2);background:var(--color-paper-3);border-radius:var(--r-sm);padding:.8rem 1rem}
.quotes h2,.steps h2,.near h2{font-size:1.5rem}
.quote{margin:0 0 .8rem;padding:1rem 1.2rem;border-left:3px solid var(--color-water);background:var(--color-paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.quote p{font-size:1.05rem}
.quote footer{font-size:.8rem;margin-top:.35rem}
.quote a{color:var(--color-ink-3)}
.steps ol{padding-left:1.3rem;margin:0}
.steps li{margin-bottom:.6rem}
.near ul{list-style:none;padding:0;margin:0 0 .8rem}
.near li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--color-line)}
.near li span{color:var(--color-ink-3);font-size:.9rem}
.side{position:sticky;top:1rem}
.side__box{background:var(--color-band);color:var(--color-band-ink);border-radius:var(--r);padding:var(--s3)}
.side__k{font:600 .75rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--color-band-ink-2)}
.side__room{font:800 1.4rem/1.1 var(--font-display);margin:.5rem 0 var(--s2)}
.side .dates{grid-template-columns:repeat(2,minmax(0,1fr))}
.side .dates__ad{grid-column:1/-1}
.side .dates label{color:var(--color-band-ink-2)}
.side__small{font-size:.78rem;color:var(--color-band-ink-2);margin-top:.6rem}
.phonebar{display:none}

/* prose */
.prose{max-width:48rem;padding-top:var(--s4);padding-bottom:var(--s5)}
.prose h1{margin-bottom:var(--s2)}
.prose__s{margin-top:var(--s4)}
.prose__s p{margin-bottom:.8rem;color:var(--color-ink-2)}

/* footer */
.foot{background:var(--color-band);color:var(--color-band-ink-2);padding:var(--s4) 0 var(--s5);margin-top:var(--s4)}
.foot__in{max-width:74rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:grid;gap:var(--s2)}
.foot__line{color:var(--color-band-ink);max-width:44rem;font-size:1.02rem}
.foot a{color:var(--color-band-ink-2)}
.foot a:hover{color:var(--color-band-ink)}
.foot__nav,.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem}
.foot__small{font-size:.85rem}

@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr);padding-top:var(--s3)}
  .split__text{padding-right:0;order:1}
  .split__fig{order:0;min-height:0;aspect-ratio:16/9;margin-bottom:var(--s3)}
  .prop__fold{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .phonebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:var(--color-band);color:var(--color-band-ink);font-weight:600}
  .phonebar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .is-prop .foot{padding-bottom:6rem}
  .kinds__g{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:2.2rem minmax(0,1fr)}
  .row__n{font-size:1.25rem}
  .row__act{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .pick__bar{position:static}
  .dates{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,4.5rem);flex-basis:100%}
  .nav{flex-wrap:wrap}
  .nav__links{gap:.4rem 1rem;justify-content:flex-start}
}
@media (max-width:420px){
  .tally li{padding-right:.9rem;margin-right:.9rem}
  .tally b{font-size:1.8rem}
  .dates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dates__ad{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.spec{table-layout:fixed}
.spec td,.spec th{overflow-wrap:anywhere}
@media (max-width:420px){.spec th{width:38%}.spec th,.spec td{padding:.65rem .7rem}}