/* ── Waterview Gardens ────────────────────────────────────────────────────
   The palette and the type are the booking calendar's, deliberately: a guest
   who moves from a room page to the availability grid should not feel the
   floor change under them. Green/brown/red keep the meanings they have in the
   calendar (yes / not as asked / no) and are used nowhere decoratively.
   ────────────────────────────────────────────────────────────────────── */
:root{
  /* ⚠ THE PAGE IS A SHADE, THE PANELS ARE WHITE (Aaron, 7 Oct: "too little
     contrast … it lessens the panels' ability to separate things"). The ground
     was #fbfaf8 against #fff panels — one step apart, so a panel barely read
     as a panel. book.html carries the same values (both copies). */
  --bg:#f3eee6; --card:#fff; --ink:#22201d; --mute:#78716a; --line:#ddd4c6;
  --out:#c9c3ba; --gold:#9a7b48; --gold-soft:#f3ece0;
  --ok:#4a6b52; --alt:#9a7233; --no:#a8482e;
  --deep:#2b2823;
  --shadow:0 1px 2px rgba(34,32,29,.07), 0 10px 26px -12px rgba(34,32,29,.20);
  --measure:34rem;
  --top:rgba(243,238,230,.93);
  /* the current page's pill in the menu, the menu's text, the guest book's paper */
  --pill:#e8e0d3; --nav:var(--mute); --paper:#fbf7ee;
}
/* ── colour schemes to choose between (Aaron, 12 Oct) ────────────────────
   "subtle shifts … a more greyish background fill, as the images have a lot of
   gold already … slightly more contrast between panels and background. Keep the
   existing one." 1 is the original, untouched. The button at the right of the
   top bar steps through them; Leonie and Tim pick one by its number. Only the
   ground, the lines, the soft fills and the panel shadow move — the gold of the
   buttons and the calendar's green/brown/red keep their meanings. */
:root[data-scheme="2"]{ /* Stone: warm grey ground */
  --bg:#eeece8; --line:#d8d3cb; --gold-soft:#efeae2; --mute:#69635c; --top:rgba(238,236,232,.93);
  --shadow:0 1px 2px rgba(34,32,29,.08), 0 12px 28px -12px rgba(34,32,29,.24);
  --pill:#dfdbd3; --nav:#5c5650; --paper:#f8f7f4}
:root[data-scheme="3"]{ /* Mist: cooler, paler grey */
  --bg:#ecedeb; --line:#d4d6d2; --gold-soft:#eeebe5; --mute:#646764; --top:rgba(236,237,235,.93);
  --shadow:0 1px 2px rgba(30,32,34,.08), 0 12px 28px -12px rgba(30,32,34,.24);
  --pill:#dcdedb; --nav:#585b58; --paper:#f7f8f6}
:root[data-scheme="4"]{ /* Pebble: deeper warm grey, the panels stand furthest forward */
  --bg:#e5e2dd; --line:#cdc7be; --gold-soft:#ece6dc; --mute:#605a53; --top:rgba(229,226,221,.94);
  --shadow:0 1px 3px rgba(34,32,29,.10), 0 14px 30px -12px rgba(34,32,29,.30);
  --pill:#d5d0c7; --nav:#524c46; --paper:#f7f5f1}
:root[data-scheme="5"]{ /* Slate: grey with a cool edge, crisp lines */
  --bg:#e7e8e7; --line:#c9ccca; --gold-soft:#ebe8e2; --mute:#5e6261; --top:rgba(231,232,231,.94);
  --shadow:0 1px 3px rgba(28,30,32,.10), 0 14px 30px -12px rgba(28,30,32,.28);
  --pill:#d6d8d7; --nav:#4f5352; --paper:#f6f7f6}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 ui-serif,Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:var(--measure)}

/* ── masthead ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:var(--top);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px;
  padding-top:6px;padding-bottom:8px}
.brand{font-size:19px;letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.brand b{font-weight:600}
.brand span{color:var(--mute);font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;display:block;font-family:-apple-system,system-ui,sans-serif;
  margin-top:1px}
nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav a{font:14px/1 -apple-system,system-ui,sans-serif;color:var(--nav);
  text-decoration:none;padding:9px 11px;border-radius:8px}
nav a:hover{color:var(--ink);background:var(--pill)}
nav a[aria-current]{color:var(--ink);background:var(--pill)}
.cta{font:600 14px/1 -apple-system,system-ui,sans-serif !important;
  color:#fff !important;background:var(--gold);padding:11px 16px !important;
  border-radius:9px;margin-left:6px}
.cta:hover{background:#87693a !important;color:#fff !important}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;width:40px;height:36px;font-size:16px;cursor:pointer;color:var(--ink)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--deep)}
.hero img{width:100%;height:clamp(320px,62vh,620px);object-fit:cover;opacity:.86}
.hero .over{position:absolute;inset:auto 0 0 0;padding:34px 0 30px;
  background:linear-gradient(transparent,rgba(20,18,16,.72))}
.hero h1{margin:0;color:#fff;font-weight:400;font-size:clamp(28px,4.4vw,46px);
  line-height:1.16;letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.hero p{margin:10px 0 0;color:#efe9df;font-size:clamp(15px,1.6vw,18px);max-width:44ch}
.eyebrow{font:600 11.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.hero .eyebrow{color:#e2c894}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding:58px 0}
section+section{border-top:1px solid var(--line)}
h2{font-size:clamp(23px,2.6vw,31px);font-weight:500;letter-spacing:-.012em;
  margin:0 0 16px;text-wrap:balance}
h3{font-size:20px;font-weight:600;margin:0 0 8px}
p{margin:0 0 15px}
p.lead{font-size:clamp(18px,2vw,21px);line-height:1.55;color:#3a3733}
.mute{color:var(--mute)}
.small{font:14px/1.6 -apple-system,system-ui,sans-serif;color:var(--mute)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.cols.wide-l{grid-template-columns:1.25fr 1fr}
.cols.wide-r{grid-template-columns:1fr 1.25fr}
.cols.tops{align-items:start}
.cols.sidehead{grid-template-columns:1fr 2fr}   /* one paragraph: its heading beside it */
.qa2{display:grid;grid-template-columns:1fr 1fr;gap:22px 44px}   /* Good to know's questions, two by two */   /* two runs of text side by side: line up the tops. ⚠ not ".top" — that is the sticky header */
figure{margin:0}
figure img{border-radius:12px;box-shadow:var(--shadow)}
figcaption{margin-top:9px;font:13.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--mute)}

/* ── the checkable strip ──────────────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.strip div{background:var(--card);padding:20px 20px;font-size:16px;line-height:1.5}
.strip div:before{content:"";display:block;width:22px;height:2px;background:var(--gold);
  margin-bottom:11px}

/* ── room cards ───────────────────────────────────────────────────────── */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
.rcard:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(34,32,29,.05),0 16px 34px -14px rgba(34,32,29,.20)}
.rcard img{aspect-ratio:4/3;object-fit:cover}
/* the room's door plate, small, on its card and atop its page (12 Oct) */
.rimg{position:relative}
.rcard .rimg .plate{position:absolute;left:12px;bottom:12px;width:132px;aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.plate-label{display:block;width:190px;margin:0 0 14px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.rcard .body{padding:17px 18px 19px;flex:1;display:flex;flex-direction:column}
.rcard h3{margin:0 0 5px}
.rcard p{font-size:15.5px;color:var(--mute);margin:0 0 14px;flex:1}
.rcard .price{font:14px/1 -apple-system,system-ui,sans-serif;color:var(--ink)}
.rcard .price b{font-size:18px;font-family:ui-serif,Georgia,serif;font-weight:600}
.rcard .go{font:600 13px/1 -apple-system,system-ui,sans-serif;color:var(--gold);
  margin-top:12px;letter-spacing:.02em}

/* ── gallery ──────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal.two{grid-template-columns:1fr 1fr}
.gal img{aspect-ratio:3/2;object-fit:cover;border-radius:10px;box-shadow:var(--shadow);
  cursor:zoom-in}
.gal .tall img{aspect-ratio:3/4}

/* ── facts / tables ───────────────────────────────────────────────────── */
.facts{border-top:1px solid var(--line)}
.facts div{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:16px}
.facts dt,.facts b{flex:0 0 42%;font-weight:500;color:var(--mute);
  font:14px/1.5 -apple-system,system-ui,sans-serif}
.facts span{flex:1}
/* the room page's one-line summary: bed · sleeps · price (price filled live) */
.roomline{margin:20px 0 0;padding:12px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font:15px/1.5 -apple-system,system-ui,sans-serif;
  color:var(--mute)}
.roomline .price:not(:empty)::before{content:" · "}
.roomline .price b{color:var(--ink);font-family:ui-serif,Georgia,serif;font-size:17px}

.qa{margin:0}
.qa h3{margin:26px 0 6px;font-size:18.5px}
.qa h3:first-child{margin-top:0}

/* ── panels & notes ───────────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;box-shadow:var(--shadow)}
.note{border-left:3px solid var(--gold);background:var(--gold-soft);
  border-radius:0 10px 10px 0;padding:16px 20px;font-size:16px}
.note b{font-weight:600}

/* ── booking bar ──────────────────────────────────────────────────────── */
.bookband{background:var(--deep);color:#f3efe8;padding:52px 0}
.bookband h2{color:#fff;margin-bottom:10px}
.bookband p{color:#cfc7ba;max-width:46ch}
.bookband .cta{display:inline-block;margin:14px 0 0;text-decoration:none}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:40px 0 60px;
  font:14.5px/1.7 -apple-system,system-ui,sans-serif;color:var(--mute)}
footer .fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
footer a{color:var(--mute);text-decoration:none;display:block;padding:2px 0}
footer a:hover{color:var(--ink)}
footer h4{font:600 11.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 10px}

/* ── the mockup ribbon — never ships ──────────────────────────────────── */
.mockup{position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#2b2823;color:#e8dcc4;font:12px/1.5 ui-monospace,Menlo,monospace;
  padding:7px 14px;display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap}
.mockup b{color:#f0c987;font-weight:600}
.mockup a{color:#e8dcc4}
body{padding-bottom:34px}

/* ── lightbox ─────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(18,16,14,.93);
  display:none;align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:min(1400px,94vw);max-height:90vh;width:auto;border-radius:8px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:84px;
  border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;
  font:300 46px/1 Georgia,serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0 0 6px}
.lb-nav:hover,.lb-nav:focus-visible{background:rgba(255,255,255,.24);outline:none}
.lb-prev{left:12px} .lb-next{right:12px}
.lb.one .lb-nav{display:none}
.lb-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.75);font:13px/1 -apple-system,system-ui,sans-serif}
@media (max-width:719px){ .lb-nav{width:40px;height:64px;font-size:36px}
  .lb-prev{left:4px} .lb-next{right:4px} }

/* ⚠⚠ TWO LAYOUTS, ONE SWITCH (2 Oct, Aaron: "we only want two layouts —
   portrait/phone and landscape/desktop … layouts that avoid problems at random
   widths"). Everything that changes for a phone changes HERE, at 719px; there
   is no in-between tablet layout, and a new rule must not add one.
   719 is where the menu needs it: measured 2 Oct, the menu wraps onto two lines
   down to 714px and would need three from 710px. */
@media (max-width:719px){
  body{font-size:16.5px}
  .cols,.cols.wide-l,.cols.wide-r,.cols.sidehead,.qa2{grid-template-columns:1fr;gap:26px}
  .rooms{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .gal,.gal.two{grid-template-columns:1fr}
  footer .fcols{grid-template-columns:1fr}
  section{padding:44px 0}
  nav{display:none;position:absolute;top:62px;left:0;right:0;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:10px 14px 16px;gap:0;box-shadow:var(--shadow)}
  nav.open{display:flex}
  nav a{padding:13px 12px;font-size:16px}
  .cta{margin:8px 0 0;text-align:center}
  .burger{display:block}
}
}

/* Extras (Good to know) — Leonie's list, read live from /api/extras */
ul.extras { list-style:none; padding:0; margin:18px 0 0; max-width:440px; }
ul.extras li { display:flex; justify-content:space-between; gap:16px; padding:10px 0;
               border-bottom:1px solid rgba(0,0,0,.12); }
ul.extras .price { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Finding us: the map buttons and the four turns (7 Oct) — each turn is ONE
   card, instruction first, so no caption can be read as the next photo's */
.navgo{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
.navgo .cta{display:inline-block;text-decoration:none}
.turns{margin:22px 0 0;display:grid;gap:22px}
/* two to a row once there's room (Aaron, 12 Oct: "unnecessarily big … could
   definitely be 2 per row"), reading 1 2 / 3 4; each card a column so the photos
   line up along the bottom when one instruction runs to two lines */
@media(min-width:700px){.turns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.turns figure{display:flex;flex-direction:column}
.turns figure img{margin-top:auto}
.turns figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 16px 16px;box-shadow:var(--shadow)}
.turns figcaption{display:flex;gap:12px;align-items:baseline;margin:0 0 12px;
  font-size:18px;line-height:1.4;color:var(--ink)}
.turns .tn{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);
  color:var(--gold);font:600 15px/30px -apple-system,system-ui,sans-serif;text-align:center;
  transform:translateY(-1px)}
.turns img{width:100%;border-radius:9px;display:block}
@media(max-width:560px){.turns figure{padding:12px}.turns figcaption{font-size:17px}}

/* the home page's "Get in touch" and the accreditation logos (Leonie, 7 Oct) */
.getintouch{container-type:inline-size;padding:22px 26px}
.getintouch h2{font-size:1.35rem;margin:0 0 12px}
/* ⚠ COMPACT, AND EVEN AT EVERY WIDTH (Aaron, 12 Oct: "stylish, easy to read but
   compact"). Wide: the contacts on the left in two columns, the badges in a row
   on the right of a rule, one band. Narrower: badges in a small row beneath. The
   columns follow the PANEL's width, never the text's. */
.git-in{display:grid;gap:16px 30px}
.cbox{display:grid;grid-template-columns:1fr;gap:10px 28px;margin:0}
@container (min-width:520px){.cbox{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cbox > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.cbox dt{font:600 11px/1.4 -apple-system,system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute)}
.cbox dd{margin:0;font-size:15.5px;line-height:1.45;overflow-wrap:break-word}
.cbox a{color:var(--ink)}
/* the Facebook links: the text, with a small blue mark so it is noticed (12 Oct) */
.fb-link{display:inline-flex;align-items:center;gap:6px}
.fb-ico{width:16px;height:16px;flex:none}
.accred{display:flex;justify-content:center;align-items:center;gap:14px 48px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line)}
.accred a{display:block;line-height:0;opacity:.92;transition:opacity .15s,transform .15s}
.accred a:hover{opacity:1;transform:translateY(-1px)}
/* each sized to look the same weight: the thin-lined Trail map taller */
.accred img{display:block;width:auto;max-width:100%;height:58px}
.accred img[src*="tbbbt"]{height:66px}
@container (min-width:860px){
  .git-in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .accred{border-top:0;padding:0 0 0 30px;border-left:1px solid var(--line);gap:24px;align-self:stretch}
  .accred img{height:64px}.accred img[src*="tbbbt"]{height:74px}}

/* the guest book, open on the page (12 Oct) — a page at a time, like reading it */
.gbook-sec{padding-top:0}
.gbook{max-width:760px;margin:0 auto;text-align:center;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:26px 22px 20px;box-shadow:var(--shadow)}
.gb-page{position:relative;display:flex;align-items:center;gap:10px}
.gb-page img{flex:1;min-width:0;width:100%;border-radius:6px;transform:rotate(-.6deg);
  box-shadow:0 6px 18px rgba(60,40,10,.18);cursor:zoom-in;background:#f3eee2}
.gb-turn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:22px;line-height:1;color:var(--ink,#333);cursor:pointer}
.gb-turn:disabled{opacity:.3;cursor:default}
.gb-line{font:italic 1.15rem/1.5 Georgia,"Times New Roman",serif;margin:18px auto 4px;max-width:34em}
.gb-when{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:0}
.gb-when:empty{display:none}
.gb-count{margin:10px 0 0;opacity:.7}
@media (max-width:600px){.gbook{padding:18px 10px 14px}.gb-turn{width:34px;height:34px}}
.gb-open,.gb-close{font:inherit;font-size:.95rem;border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:6px 16px;cursor:pointer;color:inherit}
.gb-open:hover,.gb-close:hover{border-color:currentColor}
.gbook-sec:not([hidden]) .gbook{animation:gbOpen .35s ease-out}
@keyframes gbOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gbook-sec:not([hidden]) .gbook{animation:none}}

/* the scheme button, right of the top bar: a swatch of the ground, its number and name */
/* outside the 1080px column, so the menu never wraps for it: in the bar's right
   margin where there is one, otherwise a small tab hanging under its right end */
.scheme{position:absolute;right:12px;top:100%;margin-top:-1px;display:flex;align-items:center;gap:5px;
  padding:4px 9px 5px 5px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  background:var(--top);backdrop-filter:blur(10px);cursor:pointer;color:var(--mute);
  font:500 12px/1 -apple-system,system-ui,sans-serif;white-space:nowrap}
.scheme[hidden]{display:none}
.scheme:hover{color:var(--ink)}
.scheme i{width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  box-shadow:inset 0 0 0 3px var(--card)}
.scheme .nm{display:none}
@media(min-width:1220px){
  .scheme{top:50%;transform:translateY(-50%);margin-top:0;border:1px solid var(--line);border-radius:16px;
    background:var(--card)}}
@media(min-width:1440px){.scheme .nm{display:inline}}