/* Serenity at Regal Palms: the stylesheet every page shares (built on Villa Perdido's, 19 Oct 2026).

   The home page's own passages live in pages/home.css, and every other page keeps its own rules in pages/<name>.css.
   Colours: velvet (the logo's green, sampled from the dining chairs) is every word on white, the header and the footer;
   mist is quiet words on white; sage is quiet words on velvet; pool is the one pale ground (the resort passage);
   marigold (the curtains in sun) is the booking button and nothing else. The --lv-* names are the platform's: its
   pieces (the calendar, the ways to stay, the forms, the newsletter) take their colours and type from them. */

/* ---------- tokens ----------
   --pad is the side gutter; --gap the gap between the 12 columns; --edge where words on a full-width band start, so
   they line up with the 1,320px column from 900px up; --hh the header's height; --bar the phone ask bar's. */
:root{
  --velvet:#0F3A39; --white:#FFFFFF; --marigold:#F2AE32; --mist:#556664; --sage:#BCCFCB; --pool:#EAF3F2; --line:#D6E1DF;
  --display:"Fraunces", Georgia, serif;
  --body:"DM Sans", system-ui, sans-serif;
  --pad:clamp(20px, 4.4vw, 64px);
  --gap:clamp(16px, 2vw, 28px);
  --edge:var(--pad);
  --hh:60px;
  --bar:64px;
  --lv-ink:#0F3A39; --lv-ink-soft:#556664; --lv-ground:#FFFFFF; --lv-field:#FFFFFF; --lv-line:#D6E1DF;
  --lv-accent:#F2AE32; --lv-accent-ink:#0F3A39; --lv-radius:6px; --lv-font-body:"DM Sans", system-ui, sans-serif;
  --lv-font-display:"Fraunces", Georgia, serif; --lv-focus:#02706F; --lv-sticky-offset:60px;
}
@media (min-width:900px){ :root{ --hh:76px; --lv-sticky-offset:76px; --edge:max(var(--pad), (100vw - 1320px)/2); } }

/* ---------- the page and its text ----------
   White ground, velvet words. DM Sans body, 16px on a phone to 19px at 2560. Fraunces headings at a modest size: h2 is
   34px on a phone and 56px at most. The body's bottom padding clears the phone ask bar. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--velvet);font-family:var(--body);font-size:clamp(16px, 15px + .16vw, 19px);line-height:1.6;overflow-x:clip;padding-bottom:var(--bar)}
@media (min-width:900px){ body{padding-bottom:0} }
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 50;margin:0;letter-spacing:-.012em;line-height:1.1;text-wrap:balance}
p{margin:0}
blockquote{margin:0}
cite{font-style:normal}
h2{font-size:clamp(28px, 7vw, 34px)}
h3{font-size:clamp(21px, 18px + .5vw, 26px);line-height:1.2}
@media (min-width:900px){ h2{font-size:clamp(36px, 18px + 1.9vw, 56px)} }

/* ---------- layout: .wrap is the 1,320px column, .grid its 12 columns ---------- */
.wrap{width:min(100% - 2*var(--pad), 1320px);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}

/* ---------- photographs: .photo is the frame; its box sets the crop, the img fills it ---------- */
.photo{position:relative;overflow:hidden;margin:0}
.photo img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:15px;line-height:1.4;color:var(--mist);margin-top:10px}

/* ---------- words ---------- */
.lede{font-size:clamp(17px, 16px + .25vw, 21px);line-height:1.55;max-width:34em}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.more:hover{text-decoration-thickness:2px}
.small-line{font-size:15px;line-height:1.5;color:var(--mist)}
.nb{white-space:nowrap}

/* ---------- the button: marigold with velvet words, booking only ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--marigold);color:var(--velvet);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{background:#F6C05A;filter:none;transform:none;box-shadow:none}

/* ---------- a review card: stars, the guest's own words at body size, the name and where it was written ----------
   Used on every page that shows a guest's words. Nothing else goes inside a card: no photographs, no icons. */
.review{display:flex;flex-direction:column;gap:12px;padding:clamp(22px, 2vw, 30px);border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--velvet)}
.stars{display:flex;gap:3px;color:var(--velvet);line-height:1}
.stars svg{width:16px;height:16px;fill:currentColor}
.review blockquote p{font-size:inherit;line-height:1.6}
.review cite{display:block;font-weight:600;font-size:16px;margin-top:auto}
.review cite span{font-weight:400;color:var(--mist)}
.review .trans{display:block;font-size:14px;font-weight:400;color:var(--mist);margin-top:2px}
/* A card bound to a review draws only the stars the guest gave (data-stars from the record's whole-star figure):
   the stars past that number fade, so a 3-star review never shows 5. A card with no data-stars keeps all 5 (a typed card). */
.stars[data-stars="4"] svg:nth-child(n+5),.stars[data-stars="3"] svg:nth-child(n+4),.stars[data-stars="2"] svg:nth-child(n+3),.stars[data-stars="1"] svg:nth-child(n+2){opacity:.22}

/* ---------- header: logo, the bar's links with their dropdowns, price and Check dates ----------
   Sticky, solid velvet. Under 1024px: the short logo, the Menu and (from 900px) Check dates. From 1024px every page is
   in the bar: the 3 groups open a white panel on hover and on keyboard focus, each group's own name is a link to its
   main page (so a touch screen always lands somewhere real), and the Menu button is gone. The price joins from 1300px.
   The header declares data-menu-switch="design": these widths are ours. */
.site-head{position:sticky;top:0;z-index:20;height:var(--hh);background:var(--velvet);color:var(--white)}
.site-head .wrap{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto}
.brand img{width:auto}
.brand-short{height:48px}
.brand-long{display:none;height:64px}
.head-nav{display:none}
.head-ask{display:none}
.head-nav ul{list-style:none;margin:0;padding:0}

/* The Menu button (the platform writes it) and its panel (a copy of the bar's nav). The groups show flat in the panel:
   each group's name a small label, its pages under it. */
.site-menu{position:static;margin:0;border:0}
.site-menu>summary{display:flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:0 4px;list-style:none;cursor:pointer;color:var(--white);font-weight:600;font-size:16px}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu>summary::marker{content:""}
.menu-icon{width:20px;height:14px;flex:none;display:inline-grid;gap:4px;align-content:space-between}
.menu-icon i{display:block;height:2px;background:currentColor;border-radius:0;transition:transform .25s ease,opacity .2s ease}
.site-menu[open]>summary .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-menu[open]>summary .menu-icon i:nth-child(2){opacity:0}
.site-menu[open]>summary .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap}
.site-menu-panel{position:absolute;left:0;right:0;top:100%;z-index:1;display:block;max-width:min(100% - 2*var(--pad), 360px);max-height:calc(100dvh - var(--hh) - var(--bar) - 8px);overflow-y:auto;margin:0 var(--edge) 0 auto;padding:6px 22px 22px;border-radius:0 0 8px 8px;background:var(--velvet);color:var(--white);box-shadow:0 18px 40px rgba(8,30,30,.3)}
.site-menu-panel ul{list-style:none;margin:0;padding:0}
.site-menu-panel a{display:flex;align-items:center;min-height:44px;font-size:17px;text-decoration:none;color:var(--white);border-bottom:1px solid rgba(188,207,203,.2)}
.site-menu-panel a:hover{text-decoration:underline;text-underline-offset:6px}
.site-menu-panel a[aria-current="page"]{font-weight:600;text-decoration:none}
.site-menu-panel .has-sub>.top{min-height:48px;align-items:flex-end;padding:0 0 6px;border:0;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.site-menu-panel .menu-only a.btn{display:inline-flex;margin-top:18px;padding:0 22px;border:0;color:var(--velvet);font-size:16px}
.site-menu .site-menu-panel a{padding:4px 0}
.site-menu .site-menu-panel .sub a{padding-left:18px}
.site-menu .site-menu-panel .nav-top>li:not(.has-sub):not(.menu-only)>.top{margin-top:6px;font-weight:600}
@media (prefers-reduced-motion:reduce){ .menu-icon i{transition:none} }

@media (min-width:900px){
  .head-ask{display:flex;align-items:center;gap:18px}
  .head-price{display:none;font-size:15px;font-weight:600;color:var(--white);white-space:nowrap;line-height:1.25}
  .head-price>span{display:inline-block}
  .head-price>span::first-letter{text-transform:uppercase}
}
@media (min-width:1024px){
  .brand-short{display:none}
  .brand-long{display:block}
  .site-menu{display:none}
  .head-nav{display:block;height:100%}
  .nav-top{display:flex;height:100%;align-items:stretch}
  .nav-top>li{position:relative;display:flex;align-items:center}
  .nav-top>li.menu-only{display:none}
  .nav-top .top{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;text-decoration:none;font-size:16px;white-space:nowrap}
  .nav-top .top:hover,.nav-top .top[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
  .has-sub>.top::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.8}
  .sub{position:absolute;top:100%;left:0;min-width:250px;padding:10px 0;background:var(--white);color:var(--velvet);border-radius:0 0 8px 8px;box-shadow:0 16px 36px rgba(8,30,30,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
  .sub a{display:flex;align-items:center;min-height:44px;padding:0 22px;text-decoration:none;font-size:16px;white-space:nowrap}
  .sub a:hover,.sub a:focus-visible{background:var(--pool);text-decoration:underline;text-underline-offset:5px}
  .sub a[aria-current="page"]{font-weight:600}
}
@media (min-width:1024px) and (max-width:1199px){ .nav-top .top{padding:0 9px;font-size:15px} .brand-long{height:56px} }
@media (min-width:1300px){ .head-price{display:inline} }
@media (prefers-reduced-motion:reduce){ .sub{transition:none} }

/* ---------- phone ask bar: the price and Check dates at the foot of every phone screen (hidden from 900px) ---------- */
.ask-bar{position:fixed;left:0;right:0;bottom:0;z-index:19;height:var(--bar);background:var(--velvet);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px 0 20px;border-top:1px solid rgba(188,207,203,.22)}
.ask-price{min-width:0;margin:0;line-height:1.3}
.ask-price>span{display:block;color:var(--white);font-size:16px;font-weight:600}
.ask-price>span::first-letter{text-transform:uppercase}
@media (max-width:359px){ .ask-price>span{font-size:15px} }
.ask-bar .btn{margin-left:auto}
@media (min-width:900px){ .ask-bar{display:none} }

/* ---------- footer: logo, every page, the sign-up, the address line (velvet) ---------- */
.site-foot{background:var(--velvet);color:var(--white);padding-block:clamp(56px, 6vw, 100px) 36px}
.foot-grid{display:grid;gap:36px}
.foot-logo img{width:clamp(150px, 14vw, 200px);height:auto}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.foot-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:16px}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.news{--lv-ink:#FFFFFF; --lv-ink-soft:#BCCFCB; --lv-ground:transparent; --lv-field:transparent; --lv-line:rgba(188,207,203,.45); --lv-accent:#F2AE32; --lv-accent-ink:#0F3A39; --lv-focus:#F2AE32; padding:0;border:0;background:none}
.news .island-heading{font-family:var(--display);font-weight:400;font-size:clamp(23px, 18px + .8vw, 30px);margin-bottom:16px}
.foot-small{margin-top:48px;padding-top:20px;border-top:1px solid rgba(188,207,203,.22);display:flex;flex-wrap:wrap;gap:4px 24px;color:var(--sage);font-size:15px}
.foot-small a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){
  .foot-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .foot-logo{grid-column:1 / 4}
  .foot-nav{grid-column:4 / 9}
  .news{grid-column:9 / 13}
  .foot-grid:not(:has(.news)) .foot-nav{grid-column:5 / 13;grid-template-columns:repeat(3,1fr)}
}

/* ---------- the ways-to-stay piece (the platform draws it: a card per way, and with JavaScript one set of dates above
   them, each way saying whether it is free and what it costs) ---------- */
.lv-ways-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px, 2vw, 28px)}
.lv-way{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;padding-bottom:22px}
.lv-way-photo{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
.lv-way>*:not(.lv-way-photo){padding-inline:22px}
.lv-way-name{display:flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:400;font-size:clamp(21px, 18px + .5vw, 26px)}
.lv-way-name a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.lv-way-name a:hover{text-decoration:underline;text-underline-offset:5px}
.lv-way-facts{font-size:15px;color:var(--mist)}
.lv-way-price{font-weight:600}
.lv-way-part-of,.lv-way-words,.lv-way-members{display:none}
.lv-way-action{margin-top:auto;padding-top:12px}
/* A way's button names the way, so a long name ("Enquire about Serenity at Regal Palms") is wider than its card on a
   phone, and in the three cards side by side from 900px to about 1,300px. Its words wrap inside the pill, centred, and
   never run past the card's edge; a name that fits stays on one line, exactly as before (line height is left alone on
   purpose: any change to it moves a one-line label by a fraction of a pixel on a desktop). */
.lv-way-action .btn{max-width:100%;white-space:normal;text-align:center;text-wrap:balance;overflow-wrap:break-word;padding-block:9px}
@media (min-width:900px){ .lv-ways-list{grid-template-columns:repeat(3,1fr)} }
/* One bar above the cards, on the pale pool ground: Arriving and Leaving, each a white field that opens the calendar,
   then Guests with its minus and plus (it stops at 8, the whole house); one row from 600px. The calendar opens under the
   bar: one month on a phone, two side by side from 768px. A way booked for the dates is greyed and moves to the end. */
.ways-live.island{padding:0;border:0;background:none}
.lv-ways-dates{margin-bottom:clamp(20px, 2vw, 28px);padding:18px 20px 20px;border-radius:8px;background:var(--pool);scroll-margin-top:calc(var(--hh) + 12px)}
.lv-ways-bar{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.lv-ways-when,.lv-ways-guests{display:grid;align-content:center;gap:2px;min-width:0;min-height:64px;margin:0;padding:8px 14px;border:1px solid #7E908D;border-radius:6px;background:var(--white);color:var(--velvet);font:inherit;text-align:left}
.lv-ways-when{cursor:pointer}
.lv-ways-when:hover{border-color:var(--velvet)}
.lv-ways-when[aria-expanded="true"]{border-color:var(--velvet);box-shadow:inset 0 0 0 1px var(--velvet)}
.lv-ways-when:focus-visible,.lv-ways-step:focus-visible{outline:2px solid var(--lv-focus);outline-offset:2px}
.lv-ways-label{font-size:14px;font-weight:600;line-height:1.3}
.lv-ways-value{font-size:16px;line-height:1.3}
.lv-ways-guests{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;padding-block:6px}
.lv-ways-stepper{display:flex;align-items:center;gap:8px}
.lv-ways-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #7E908D;border-radius:999px;background:var(--white);color:var(--velvet);cursor:pointer}
.lv-ways-step svg{width:16px;height:16px}
.lv-ways-step:hover:not(:disabled){border-color:var(--velvet)}
.lv-ways-step:disabled{opacity:.4;cursor:not-allowed}
.lv-ways-guests output{min-width:2.2ch;text-align:center;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:600px){ .lv-ways-bar{grid-template-columns:1fr 1fr minmax(230px, .95fr);max-width:860px} .lv-ways-guests{grid-column:auto} }
.lv-ways-calendar{max-width:860px;margin-top:16px}
.lv-ways-calendar[hidden]{display:none}
.lv-ways-calendar>[role="status"]{font-size:15px}
/* Until the one-calendar island is live (it replaces these on the platform's next deploy): the date boxes the island
   draws today, and the calendar a way's card opens. Harmless once they are gone. */
.lv-ways-dates-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.lv-ways-dates-fields label{display:grid;gap:6px;min-width:0;font-size:15px;font-weight:600;color:var(--velvet)}
.lv-ways-dates-fields input{display:block;width:100%;min-width:0;height:48px;margin:0;padding:0 12px;border:1px solid #7E908D;border-radius:6px;background:var(--white);color:var(--velvet);font:400 16px/1.2 var(--body);-webkit-appearance:none;appearance:none}
.lv-ways-dates-fields input::-webkit-date-and-time-value{text-align:left}
.lv-ways-dates-fields input:focus-visible{outline:2px solid var(--lv-focus);outline-offset:2px}
@media (min-width:600px){ .lv-ways-dates-fields{grid-template-columns:1fr 1fr 150px;max-width:720px} }
.ways-live .lv-way .lv-way-calendar[data-lv-mounted]{--color-accent:#0F3A39}
.ways-live .lv-way-calendar[data-lv-mounted] .text-gray-300,.ways-live .lv-way-calendar[data-lv-mounted] [aria-label$=", in the past"]{color:var(--mist);text-decoration:line-through}
.ways-live .lv-way-calendar[data-lv-mounted] .text-xs{font-size:14px}
@media (max-width:599px){
  .ways-live .lv-way-calendar[data-lv-mounted] .ring-1.p-4{padding:0;box-shadow:none;border-radius:0}
  .ways-live .lv-way-calendar[data-lv-mounted] .grid-cols-7{gap:2px}
}
/* Booked for the dates: the card stays readable (velvet on the pool ground) while its photograph fades to grey. */
.lv-way.lv-way-off{background:var(--pool);border-style:dashed}
.lv-way-off .lv-way-photo{filter:grayscale(1);opacity:.55}
.lv-way-off .lv-way-live p{font-weight:600}
/* The platform's calendars (the one above the ways, and the enquiry form's) colour their days with the brand's
   accent; here they are velvet, so marigold stays on the buttons alone and every date reads clearly (marigold numbers
   on a marigold tint were 1.8:1). Days gone by are struck through in mist rather than pale grey (1.5:1), and the
   calendar's small labels (the weekdays, the key, the minimum stay) are 14px. */
.lv-ways-calendar[data-lv-mounted],main [data-island="enquiry-form"] [data-lv-mounted]{--color-accent:#0F3A39}
.lv-ways-calendar[data-lv-mounted] .text-gray-300,.lv-ways-calendar[data-lv-mounted] [aria-label$=", in the past"],main [data-island="enquiry-form"] [data-lv-mounted] .text-gray-300,main [data-island="enquiry-form"] [data-lv-mounted] [aria-label$=", in the past"]{color:var(--mist);text-decoration:line-through}
.lv-ways-calendar[data-lv-mounted] .text-xs,main [data-island="enquiry-form"] [data-lv-mounted] .text-xs{font-size:14px}
/* The calendars' month arrows sit on the month names' own row (they had a row of their own above, an empty band on a
   phone); the row lets clicks through to everything but its two arrows. */
.lv-ways-calendar[data-lv-mounted] .flex.items-center.justify-between.mb-6,main [data-island="enquiry-form"] [data-lv-mounted] .flex.items-center.justify-between.mb-6{position:relative;z-index:2;margin-bottom:-32px;pointer-events:none}
.lv-ways-calendar[data-lv-mounted] .flex.items-center.justify-between.mb-6>button,main [data-island="enquiry-form"] [data-lv-mounted] .flex.items-center.justify-between.mb-6>button{pointer-events:auto}
/* On a phone the calendars give their days the room: the ways calendar reaches to 8px from the screen's edges and the
   enquiry form's loses its own card frame (it was a card inside a card), the days sit 2px apart, and a way card's sides
   are 18px, so every day is a full 44px tap at 390 wide (they were 34px). */
@media (max-width:599px){
  .lv-way>*:not(.lv-way-photo){padding-inline:18px}
  .lv-ways-calendar{margin-inline:calc(8px - var(--pad) - 20px)}
  main [data-island="enquiry-form"] [data-lv-mounted] .ring-1.p-4{padding:0;box-shadow:none;border-radius:0}
  .lv-ways-calendar[data-lv-mounted] .grid-cols-7,main [data-island="enquiry-form"] [data-lv-mounted] .grid-cols-7{gap:2px}
}
.lv-way-live p{font-size:15px;line-height:1.5}
.lv-way-live strong{font-weight:600}


/* ---------- the Gallery page (the platform writes it inside this header and footer) ---------- */
.lv-gallery{width:min(100% - 2*var(--pad), 1320px);margin-inline:auto;padding-block:clamp(28px, 5vw, 80px) clamp(48px, 6vw, 96px)}
.lv-gallery h1{font-size:clamp(34px, 9vw, 42px)}
.lv-gallery>p{margin-top:14px;max-width:34em;font-size:clamp(17px, 16px + .25vw, 21px)}
.lv-gallery-grid{--lv-gallery-row-h:190px;margin-top:clamp(20px, 3vw, 40px);display:flex;flex-wrap:wrap;gap:8px}
.lv-g{flex:var(--r) 1 calc(var(--lv-gallery-row-h) * var(--r));height:var(--lv-gallery-row-h)}
.lv-g img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){ .lv-gallery h1{font-size:clamp(46px, 20px + 2.8vw, 72px)} .lv-gallery-grid{--lv-gallery-row-h:260px} }

/* ---------- a bracket: the plan's mark for "these rooms are one way to stay" (home, the house, the Suite, the Studio) ---------- */
.brace{position:relative;display:block;height:12px;border:1.5px solid var(--velvet);border-bottom:0;margin:12px 0 12px}
.brace::after{content:"";position:absolute;left:50%;top:-9px;height:8px;border-left:1.5px solid var(--velvet)}

/* ---------- the plan: the townhouse's 3 bedrooms side by side, labelled like a plan ----------
   A bracket over the Studio's room, a bracket over the Suite's 2, and one bracket under all 3 for the whole house.
   Labels and brackets sit beside the photographs, never on them. On a phone the whole house comes first and its bracket
   runs down the left of the Studio and the Suite. On the Suite's and the Studio's own pages the other part's photographs
   fade back (.plan.on-suite, .plan.on-studio); its words keep their colour, so they still read. */
.plan{display:flex;flex-direction:column}
.plan .label h3{font-size:clamp(21px, 18px + .5vw, 26px)}
.plan .label h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.plan .label h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.plan .label p{margin-top:0;font-size:clamp(15px, 14px + .2vw, 17px);line-height:1.5;color:var(--mist);max-width:30em}
.plan .rooms{display:grid;gap:12px}
.plan .p-studio .rooms .photo{aspect-ratio:4/3}
.plan .p-suite .rooms{grid-template-columns:1fr 1fr}
.plan .p-suite .rooms .photo{aspect-ratio:3/4}
.plan .part+.part{margin-top:30px}
.plan .whole{order:-1;margin-bottom:22px}
.plan .whole .brace{display:none}
.plan .whole .label h3{font-size:clamp(23px, 19px + .6vw, 28px)}
.plan .parts{position:relative;padding-left:22px}
.plan .parts::before{content:"";position:absolute;left:0;top:4px;bottom:0;width:10px;border:1.5px solid var(--velvet);border-right:0}
.plan.on-suite .p-studio .photo,.plan.on-studio .p-suite .photo{opacity:.3;filter:grayscale(1)}
.plan .label .yours{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--velvet);color:var(--white);font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;vertical-align:middle}
@media (min-width:900px){
  .plan{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);grid-template-rows:auto auto auto auto}
  .plan .parts{display:contents}
  .plan .parts::before{content:none}
  .plan .part{display:grid;grid-template-rows:subgrid;grid-row:1 / span 3;align-content:end}
  .plan .part+.part{margin-top:0}
  .plan .p-studio{grid-column:1}
  .plan .p-suite{grid-column:2 / 4}
  .plan .p-suite .rooms{column-gap:var(--gap)}
  .plan .label{text-align:center;align-self:end}
  .plan .label p{margin-inline:auto}
  .plan .brace{margin:14px 0 16px}
  .plan .rooms .photo,.plan .p-studio .rooms .photo,.plan .p-suite .rooms .photo{aspect-ratio:4/5}
  .plan .whole{order:0;grid-column:1 / 4;grid-row:4;margin:0}
  .plan .whole .brace{display:block;border-top:0;border-bottom:1.5px solid var(--velvet);margin:16px 0 14px}
  .plan .whole .brace::after{top:auto;bottom:-9px}
}

/* The brackets draw in from their middle as the plan comes into view; with reduced motion, or where scroll-linked
   animation does not exist, they are simply there. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:900px){
    .plan .brace{animation:brace-in linear both;animation-timeline:view();animation-range:entry 20% cover 38%}
    .plan .whole .brace{animation-range:entry 60% cover 70%}
  }
}
@keyframes brace-in{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(-12px 0 -12px 0)}}

/* ---------- a way's own page: the whole house, the Suite, the Studio ----------
   The opening: the heading, the way in a line, its facts in one small line, and its photograph, edge to edge under the
   words on a phone and beside them from 900px (8 columns: sharp from her 1,200-wide photographs). Then "your part of the
   house" (the plan, the other part faded), and near the end a doorway to the next way up. */
.way-open{padding-top:clamp(32px, 5vw, 72px)}
.way-open h1{font-size:clamp(34px, 9vw, 42px);line-height:1.06;letter-spacing:-.018em}
.way-open-words .lede{margin-top:14px}
.way-open-words .small-line{margin-top:10px}
.way-open-photo{aspect-ratio:4/3;margin:26px calc(-1*var(--pad)) 0}
.way-plan{padding-block:clamp(56px, 8vw, 130px) clamp(56px, 7vw, 120px)}
.way-plan-head .lede{margin-top:14px}
.way-plan-head .lede a{text-underline-offset:4px}
.way-plan .plan{margin-top:clamp(30px, 4vw, 56px)}
.way-guest{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.way-guest-grid{display:grid;gap:40px}
.way-more{display:grid;gap:18px}
.way-more-photo{aspect-ratio:3/2}
.way-more-words h2{font-size:clamp(23px, 19px + .6vw, 30px)}
.way-more-words p{margin-top:8px;max-width:32em}
@media (min-width:900px){
  .way-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .way-open-words{grid-column:1 / 6;padding-bottom:4px}
  .way-open h1{font-size:clamp(42px, 20px + 2.3vw, 60px);line-height:1.02}
  .way-open-words .lede{margin-top:clamp(16px, 1.4vw, 24px)}
  .way-open-photo{grid-column:6 / 13;aspect-ratio:3/2;margin:0}
  .way-plan-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .way-plan-head h2{grid-column:1 / 6}
  .way-plan-head .lede{grid-column:6 / 13;margin:0;justify-self:end;max-width:31em}
  .way-guest-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .way-guest-grid>.guest-voice{grid-column:1 / 6}
  .way-guest-grid>.way-more{grid-column:7 / 13}
  .wrap>.way-more{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .wrap>.way-more .way-more-photo{grid-column:1 / 6}
  .wrap>.way-more .way-more-words{grid-column:7 / 13}
}

/* ---------- the dates (data-section="dates"), on every page that ends with the ask ----------
   The ask: each way to stay as the platform draws it (one set of dates, then whether each way is free and what it
   costs), and the small facts in one line. */
.dates-sec{padding-block:clamp(56px, 7vw, 120px) clamp(72px, 9vw, 150px);border-top:1px solid var(--line)}
.dates-head .lede{margin-top:14px}
.ways-live{margin-top:clamp(26px, 3vw, 44px)}
.dates-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-top:24px}
@media (min-width:900px){
  .dates-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .dates-head h2{grid-column:1 / 7}
  .dates-head .lede{grid-column:7 / 13;margin:0;justify-self:end;max-width:30em}
}

/* ---------- facts as a list (Good to know, Book) ----------
   A heading at the left, then each fact as a short name and its line; the name above its line on a phone. */
.gk-grid{display:grid;gap:22px}
.gk-list{margin:0;display:grid}
.gk-list>div{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.gk-list dt{font-weight:600}
.gk-list dd{margin:0;color:var(--mist);line-height:1.55;max-width:40em}
.gk-more{margin-top:6px}
@media (min-width:900px){
  .gk-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0}
  .gk-grid>h2{grid-column:1 / 5}
  .gk-list,.gk-more{grid-column:5 / 13}
  .gk-list>div{grid-template-columns:repeat(8,1fr);column-gap:var(--gap);padding:20px 0}
  .gk-list dt{grid-column:1 / 3}
  .gk-list dd{grid-column:3 / 9;font-size:17px}
  .gk-more{margin-top:16px}
}

/* ---------- passages that wait for the record (.ref) ----------
   Each holds something the manager can add from the dashboard (the house's story, the team, a film, questions guests
   ask, extras, places nearby ...). Empty today, so the platform leaves each one out; the day its first item is added
   it shows on the page where a guest looks for it, in the same heading-left, words-right shape as Good to know. */
.ref{padding-block:clamp(48px, 6vw, 104px);border-top:1px solid var(--line)}
.ref-body{display:grid;gap:14px;margin-top:20px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--mist)}
.ref-body p{margin:0;max-width:40em}
.ref-body b{color:var(--velvet);font-weight:600}
.ref-list{list-style:none;padding:0;gap:0}
.ref-list li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.ref-cards,.ref-people{display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ref-cards .photo,.ref-people .photo{aspect-ratio:4/3;margin-bottom:10px;background:var(--pool)}
.ref-people .photo{aspect-ratio:4/5}
.ref-cards h3{font-size:clamp(19px, 17px + .4vw, 22px)}
.ref-cards h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ref-cards figcaption,.ref-people figcaption{display:grid;gap:2px;font-size:15px}
.ref-plan img{object-fit:contain}
.ref-film,.map-frame{width:100%;border-radius:8px;overflow:hidden}
.ref-faq{gap:0}
.ref-faq details{border-top:1px solid var(--line);padding:14px 0}
.ref-faq summary{cursor:pointer;color:var(--velvet);font-weight:600}
.ref-faq details p{margin-top:8px}
.ref-voices blockquote{margin:0;padding:16px 0;border-top:1px solid var(--line)}
.ref-voices cite{display:block;margin-top:6px;font-style:normal;font-size:15px}
.places{display:grid;gap:26px 16px;grid-template-columns:minmax(0,1fr)}
.place .photo{aspect-ratio:4/3;margin-bottom:10px;background:var(--pool)}
.place h3{font-size:clamp(19px, 17px + .4vw, 22px)}
.place p{margin-top:4px;font-size:15px}
.place-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.place-credit{font-size:14px}
.foot-social{display:flex;flex-wrap:wrap;gap:0 16px}
@media (min-width:600px){ .places{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .ref-body{grid-column:5 / 13;margin-top:0}
  .ref-cards,.ref-people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-list li{grid-template-columns:repeat(8,1fr);column-gap:var(--gap)}
  .ref-list li>b{grid-column:1 / 3}
  .ref-list li>span{grid-column:3 / 9}
}