/* Design follows the structure of a calm, earthy one-page holiday-home layout:
   stacked full-width colour bands, a giant wordmark, large light headings with a
   muted second line, dashed pill buttons and rounded photos. */
:root {
  /* Beach House palette. Summer = its "Original" theme; winter overrides below. */
  --cream: oklch(0.975 0.008 85);   /* paper */
  --sand: oklch(0.94 0.014 85);     /* paper 2 */
  --sage: oklch(0.925 0.03 215);    /* pale accent tint */
  --glacier: oklch(0.93 0.02 240);
  --forest: oklch(0.25 0.03 245);   /* ink, also the dark bands */
  --accent: oklch(0.48 0.06 215);
  --bed: oklch(0.9 0.04 75);
  --line: oklch(0.9 0.01 85);
  --gutter: clamp(14px, 2.6vw, 50px);
  --display: 'Libre Caslon Display', serif;
  --serif: 'Libre Caslon Text', serif;
  --sans: 'Hanken Grotesk', sans-serif;
}
html[data-season="winter"] {
  --cream: oklch(0.965 0.01 70);
  --sand: oklch(0.935 0.018 60);
  --sage: oklch(0.92 0.03 50);
  --glacier: oklch(0.925 0.02 250);
  --forest: oklch(0.22 0.035 260);
  --accent: oklch(0.48 0.1 35);
  --bed: oklch(0.9 0.05 55);
  --line: oklch(0.87 0.015 60);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--forest); font: 400 16px/1.5 var(--sans); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
h1, h2 { font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }

/* Bands */
.band { padding: calc(var(--gutter) * 2) var(--gutter); }
.cream { background: var(--cream); color: var(--forest); }
.forest { background: var(--forest); color: var(--cream); }
.sage { background: var(--sage); color: var(--forest); }
.sand { background: var(--sand); color: var(--forest); }
.glacier { background: var(--glacier); color: var(--forest); }

/* Wordmark: about a fifth of the page width, top-left, nav on the same row */
.wordmark { font-weight: 500; letter-spacing: -.02em; line-height: 1; font-size: clamp(2.8rem, 5.3vw, 6.5rem); }
.wordmark.small { font-size: clamp(2.8rem, 5.3vw, 6.5rem); margin-bottom: .3em; }
.top { padding-top: var(--gutter); padding-bottom: var(--gutter); }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.menu { display: flex; justify-content: space-between; gap: 1.2rem; width: min(52%, 780px); padding-top: .5em; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.top-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: .4rem 0 var(--gutter); }
.tagline { font-size: clamp(1.4rem, 1.7vw, 2.1rem); line-height: 1.2; margin: 0; }

/* Headings: large and light, second line muted */
h2 { font-size: clamp(1.7rem, 1.7vw + .6rem, 2.1rem); line-height: 1.2; margin-bottom: 1rem; }
h2 span { display: block; opacity: .55; }
.copy { max-width: 30rem; }
.copy p { max-width: 28rem; }
.muted-note, .muted { opacity: .6; font-size: .95rem; }

/* Dashed pill button */
.pill { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 9px 3rem; text-decoration: none;
  font-weight: 500; background: transparent; transition: background .2s; }
.pill:hover { background: rgba(255,255,255,.18); }
.forest .pill:hover { background: color-mix(in srgb, var(--cream) 12%, transparent); }

/* Photos: tall is about 5:7 at a third of the width; the second image is 2:1 at about half */
.photo { margin: 0; overflow: hidden; border-radius: 14px; background: rgba(0,0,0,.08); }
.photo.wide { aspect-ratio: 2 / 1; }
.photo.tall { aspect-ratio: 5 / 7; }
.photo.mid { aspect-ratio: 2 / 1; width: 49%; margin-top: var(--gutter); }
.photo.mid.right { margin-left: auto; }

/* Two-column bands: text one side, photo the other */
.two { display: grid; grid-template-columns: 1fr 32%; gap: var(--gutter) calc(var(--gutter) * 2); align-items: start; }
.two.flip { grid-template-columns: 46% 1fr; }
.two.flip .copy { padding-left: 14%; }
.two.flip > .photo.tall { aspect-ratio: 1 / 1; }
.two > div:only-child { grid-column: 1; }

.facts { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.facts li { padding: .35rem 0; border-top: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); }
.facts li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); }
.facts b { font-weight: 500; }

/* Outdoors: icon list and a sideways photo strip */
.icons { list-style: none; margin: 2.5rem 0 3rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 3rem; }
.icons li { display: flex; align-items: center; gap: 1.5rem; font-size: 1.1rem; }
.ico { flex: none; width: 78px; height: 78px; border-radius: 14px; background: color-mix(in srgb, var(--cream) 10%, transparent); display: grid; place-items: center; }
.ico svg { width: 34px; height: 34px; }
.strip-wrap { position: relative; }
.strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip img { flex: none; width: auto; height: clamp(260px, 35vw, 700px); border-radius: 14px; scroll-snap-align: start; }
.next { position: absolute; top: 50%; right: 1.4rem; transform: translateY(-50%); width: 78px; height: 78px; border-radius: 50%; border: 0;
  background: #fff; color: var(--forest); font-size: 1.8rem; cursor: pointer; }

/* Gallery */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0 var(--gutter); }
.filters button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 6px 1.4rem; cursor: pointer; }
.filters button.on { background: var(--forest); color: var(--cream); border-style: solid; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.grid button { padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: rgba(0,0,0,.08); }
.grid img { transition: transform .35s; }
.grid button:hover img { transform: scale(1.04); }
.grid [hidden] { display: none; }

/* Footer */
.foot .tagline { opacity: .7; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; justify-content: start; }
.foot-cols nav a { display: block; text-decoration: none; padding: .1rem 0; }
.label { opacity: .55; margin-bottom: .2rem; }
.fine { margin-top: calc(var(--gutter) * 2); font-size: .85rem; opacity: .6; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(20,30,20,.93); display: grid; place-items: center; z-index: 20; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: 92vh; border-radius: 10px; }
.lightbox .close { position: absolute; top: .8rem; right: 1.2rem; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; }

/* Phones */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .two { grid-template-columns: 1fr; }
  .two.flip { grid-template-columns: 1fr; }
  .two.flip .copy { padding-left: 0; }
  .two > .photo.tall { aspect-ratio: 4 / 5; }
  .photo.mid { width: 100%; aspect-ratio: 4 / 3; }
  .menu { width: 100%; padding-top: 0; flex-wrap: wrap; }
  .masthead { flex-direction: column; gap: .6rem; }
  .photo.wide { aspect-ratio: 4 / 3; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .icons { grid-template-columns: 1fr; gap: 1rem; }
  .ico { width: 62px; height: 62px; }
  .next { width: 56px; height: 56px; right: .8rem; }
  .flip > .photo { order: 2; }
}

/* Season switch: anything marked data-s only shows in its season */
html[data-season="winter"] [data-s="summer"],
html[data-season="summer"] [data-s="winter"] { display: none !important; }

.top-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.switch { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 3px; }
.switch button { font: inherit; font-weight: 500; color: inherit; background: transparent; border: 0; border-radius: 999px; padding: 6px 1.5rem; cursor: pointer; }
html[data-season="summer"] .switch [data-set="summer"],
html[data-season="winter"] .switch [data-set="winter"] { background: var(--forest); color: var(--cream); }

/* Open weeks */
.weeks { margin: 0 0 var(--gutter); }
.weeks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.weeks-head h2 { margin: 0; }
.weeks-head h2 .t { display: block; opacity: 1; }
.week-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.week { position: relative; border: 1px solid var(--forest); border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; background: var(--glacier); display: flex; flex-direction: column; gap: .15rem; }
html[data-season="summer"] .week { background: var(--sand); }
.week .dates { font-size: 1.35rem; line-height: 1.2; }
.week .meta { opacity: .65; font-size: .95rem; margin-bottom: .7rem; }
.week .pill { align-self: flex-start; padding: 6px 1.4rem; font-size: .95rem; margin-top: auto; }
.week .sample { align-self: flex-start; margin-bottom: .45rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; background: var(--forest); color: var(--cream); border-radius: 999px; padding: 2px .6rem; }
.week-empty { grid-column: 1 / -1; border: 1px solid var(--forest); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.week-empty p { margin: 0; }

@media (max-width: 760px) {
  .top-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .top-actions { justify-content: flex-start; }
  .menu { justify-content: flex-start; gap: .3rem 1.1rem; }
  .week-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .week-list::-webkit-scrollbar { display: none; }
  .week { flex: 0 0 78%; scroll-snap-align: start; }
  .week-empty { flex: 1 0 100%; }
}

/* ---------- Sticky bar ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem var(--gutter); background: color-mix(in srgb, var(--cream) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--forest) 40%, transparent);
  transform: translateY(-110%); transition: transform .3s; color: var(--forest); }
.bar.on { transform: none; }
.bar .brand { text-decoration: none; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; }
.bar nav { display: flex; gap: 1.4rem; font-size: .95rem; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.bar-end { display: flex; align-items: center; gap: .8rem; }
.bar .pill { padding: 5px 1.4rem; }
@media (max-width: 980px) { .bar nav { display: none; } }
@media (max-width: 520px) { .bar .brand { display: none; } .bar { justify-content: flex-end; } }

/* ---------- Stats, floors, bedrooms, amenities, map ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.4rem 0 1.2rem; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); }
.stats dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.stats dd { margin: .1rem 0 0; font-size: 1.9rem; font-weight: 300; line-height: 1.1; }
.floors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 1.6rem; }
.floors article { border: 1px solid color-mix(in srgb, var(--forest) 50%, transparent); border-radius: 14px; padding: 1.4rem 1.4rem 1.2rem; }
.floors .tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0 0 .4rem; }
.floors h3 { font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; }
.floors p:last-child { margin-bottom: 0; }
.rooms { margin-top: 1.6rem; }
.rooms figure { flex: none; margin: 0; scroll-snap-align: start; }
.rooms img { height: clamp(220px, 28vw, 430px); }
.rooms figcaption { margin-top: .5rem; font-size: .95rem; }
.amen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem 2.4rem; margin-top: 1.6rem; }
.amen h3 { font-weight: 500; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .6rem; opacity: .75; }
.amen ul { list-style: none; margin: 0; padding: 0; }
.amen li { padding: .4rem 0; border-top: 1px solid color-mix(in srgb, var(--forest) 35%, transparent); }
.amen li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--forest) 35%, transparent); }
.map { margin-top: var(--gutter); }
.map iframe { display: block; width: 100%; height: clamp(280px, 38vw, 460px); border: 0; border-radius: 14px; background: rgba(0,0,0,.08); }
.map .muted-note { margin-top: .6rem; }

/* ---------- Availability calendar ---------- */
.avail-note { opacity: .7; margin: 0 0 1rem; }
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.legend { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.legend .sw { width: 18px; height: 18px; border-radius: 5px; display: inline-block; margin-left: .8rem; }
.legend .sw:first-child { margin-left: 0; }
.sw.open { background: var(--sand); }
.sw.off { border: 1px solid color-mix(in srgb, var(--cream) 50%, transparent); }
.cal-nav { display: flex; gap: .5rem; }
.cal-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.month h3 { font-weight: 400; font-size: 1.2rem; margin: 0 0 .6rem; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.days .wd { font-size: .72rem; text-align: center; opacity: .55; padding-bottom: 4px; }
.day { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--cream) 35%, transparent); font: inherit; font-size: .95rem; cursor: default; }
.day.open { background: var(--sand); color: var(--forest); cursor: pointer; }
.day:not(.open):not(:disabled) { color: var(--cream); outline: 1px solid color-mix(in srgb, var(--cream) 55%, transparent); cursor: pointer; }
.day.mid { background: var(--sage); color: var(--forest); }
.day.arr, .day.dep { background: var(--cream); color: var(--forest); outline: 2px solid var(--sage); font-weight: 600; }
.cal-sum { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cal-sum p { margin: 0; font-size: 1.1rem; }

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .floors { grid-template-columns: 1fr; }
}

/* "Chalet" label above the wordmark */
.wordmark .pre { display: block; font-size: .26em; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; line-height: 1; margin: 0 0 .5em .15em; opacity: .85; }


/* ================= Beach House-style layout ================= */
section[id] { scroll-margin-top: 72px; }

/* Header: always visible */
.bar { position: sticky; top: 0; transform: none; transition: none; }
.bar .brand { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; letter-spacing: 0; text-transform: none; }
.bar .brand .b1 { font-size: .52rem; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; font-weight: 500; }
.bar .brand .b2 { font-size: 1.3rem; letter-spacing: .26em; padding-left: .26em; font-weight: 500; margin-top: .22rem; }
.pill.solid { background: var(--forest); color: var(--cream); border-style: solid; }
.pill.solid:hover { background: color-mix(in srgb, var(--forest) 85%, black); }
.bar nav { font-size: .9rem; gap: 1.2rem; }

/* Hero: full-width photo inset in the page, headline over it */
.hero { position: relative; margin: clamp(10px, 1.4vw, 20px); border-radius: 14px; overflow: hidden; height: clamp(440px, 62vh, 700px); color: #fff; background: var(--forest); }
.hero figure { position: absolute; inset: 0; margin: 0; }
.hero figure img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(18,28,16,.72)); pointer-events: none; }
.hero-text { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); bottom: clamp(22px, 4vw, 52px); right: clamp(20px, 22vw, 360px); }
.eyebrow-w { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; margin: 0 0 .9rem; opacity: .92; }
.hero h1 { font-weight: 300; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance; }
.hero-sub { margin: 1rem 0 0; font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 36rem; opacity: .95; }
.hero-rating { position: absolute; z-index: 2; right: clamp(20px, 4vw, 56px); bottom: clamp(22px, 4vw, 52px); text-align: right; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; line-height: 1.5; }
.hero-rating b { display: block; font-size: 2.6rem; font-weight: 300; letter-spacing: 0; line-height: 1; margin-bottom: .2rem; }
@media (max-width: 760px) { .hero-text { right: 20px; } .hero-rating { display: none; } }

.weeks-band { padding-top: calc(var(--gutter) * 1.2); padding-bottom: var(--gutter); }

/* The chalet */
.house-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gutter) * 2); align-items: start; }
.house .stats { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.house .stats dd { font-size: 2.2rem; }
@media (max-width: 760px) { .house-grid { grid-template-columns: 1fr; } }

/* Floor plan */
.plan-tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0 var(--gutter); }
.plan-tabs button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 8px 1.4rem; cursor: pointer; text-align: left; line-height: 1.2; }
.plan-tabs button small { display: block; font-size: .75rem; opacity: .65; }
.plan-tabs button.on { background: var(--forest); color: var(--cream); border-style: solid; }
.plan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gutter) * 2); align-items: start; }
.plan-svg svg { display: block; width: 100%; height: auto; max-height: 80vh; }
.plan-svg .wall { fill: var(--cream); stroke: var(--forest); stroke-width: 5; }
.plan-svg .room { stroke: var(--forest); stroke-width: 2; cursor: pointer; transition: fill .2s; }
.plan-svg .room.bed { fill: var(--bed); }
.plan-svg .room.living { fill: var(--sage); }
.plan-svg .room.bath { fill: var(--glacier); }
.plan-svg .room.service { fill: var(--sand); }
.plan-svg .room.outdoor { fill: color-mix(in srgb, var(--sage) 70%, var(--cream)); stroke-dasharray: 8 6; }
.plan-svg .room.sel { fill: var(--forest); stroke-width: 4; }
.plan-svg .room:hover:not(.sel) { filter: brightness(.94); }
.plan-svg text { font-size: 21px; font-weight: 500; text-anchor: middle; dominant-baseline: middle; fill: var(--forest); pointer-events: none; }
.plan-svg text.sel { fill: var(--cream); }
.plan-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.plan-chips button { font: inherit; font-size: .9rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 5px 1rem; cursor: pointer; }
.plan-chips button.on { background: var(--forest); color: var(--cream); border-style: solid; }
.plan-card { border: 1px solid color-mix(in srgb, var(--forest) 55%, transparent); border-radius: 14px; padding: 1.4rem 1.5rem; background: color-mix(in srgb, var(--cream) 55%, transparent); }
.plan-card .tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0 0 .4rem; }
.plan-card h3 { font-weight: 400; font-size: 1.7rem; margin: 0 0 .7rem; }
.plan-card p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .plan-wrap { grid-template-columns: 1fr; } }

/* Room cards under the bedroom photos */
.roomcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: var(--gutter); }
.roomcards article { border: 1px solid color-mix(in srgb, var(--forest) 50%, transparent); border-radius: 14px; padding: 1.3rem 1.4rem 1.1rem; }
.roomcards .tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0 0 .4rem; }
.roomcards h3 { font-weight: 400; font-size: 1.4rem; margin: 0 0 .5rem; }
.roomcards p:last-child { margin-bottom: 0; }


/* ================= Beach House look: type, logo, buttons ================= */
.band.cream, .band.sand, .band.sage, .band.glacier { --fg: var(--forest); }
.band.forest { --fg: var(--cream); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: normal; }

/* Section titles: a small caps label, then a big serif statement */
h2 { font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  margin: 0 0 1.4rem; color: color-mix(in srgb, var(--fg, var(--forest)) 62%, transparent); }
h2 span { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.5vw, 3.1rem); font-weight: 400; line-height: 1.08;
  letter-spacing: normal; text-transform: none; opacity: 1; margin-top: .65rem; color: var(--fg, var(--forest)); text-wrap: balance; }
.weeks-head h2 .t { margin-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); }

/* Paragraphs in the serif, like the Beach House */
.copy p, .house-grid p, .roomcards p, .plan-card p, .hero-sub, .avail-note, .cal-sum p { font-family: var(--serif); }
.house-grid p { font-size: 1.2rem; line-height: 1.65; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.copy p, .roomcards p, .plan-card p { font-size: 1.05rem; line-height: 1.6; color: color-mix(in srgb, var(--fg, var(--forest)) 85%, transparent); }
.roomcards h3, .plan-card h3 { font-size: 1.55rem; }
.stats dd { font-family: var(--display); font-weight: 400; }
.hero h1 { font-size: clamp(2.2rem, 5.3vw, 5rem); font-weight: 400; line-height: 1.03; }
.hero-rating b { font-family: var(--display); font-weight: 400; }
.eyebrow-w, .tag, .stats dt, .legend, .hero-rating { font-family: var(--sans); }

/* Logo lockup (Bebas Neue, widely spaced) */
.bh-logo { display: inline-flex; flex-direction: column; align-items: center; font-family: 'Bebas Neue', sans-serif; font-weight: 400; color: inherit;
  line-height: 1; text-decoration: none; letter-spacing: 0; text-transform: none; }
.bh-logo span { display: block; line-height: 1; white-space: nowrap; }
.bh-logo .t1 { font-size: calc(var(--H) * .7286); letter-spacing: .219em; margin-right: -.219em; }
.bh-logo .nm { font-size: calc(var(--H) * 1.367); letter-spacing: .204em; margin-right: -.204em; margin-top: calc(var(--H) * .37); }
.bh-logo .rl { width: calc(var(--H) * 5.6); height: max(1px, calc(var(--H) * .039)); background: currentColor; margin-top: calc(var(--H) * .35); }
.bh-logo .t2 { font-size: calc(var(--H) * .7423); letter-spacing: .216em; margin-right: -.216em; margin-top: calc(var(--H) * .375); }
.bar .brand { font-size: inherit; }
.foot .bh-logo { margin-bottom: 1.4rem; }

/* Buttons: thin outline pills in small caps, solid for the main action */
.pill { border: 1px solid currentColor; border-radius: 999px; padding: 10px 24px; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pill.solid { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.pill.solid:hover { background: color-mix(in srgb, var(--forest) 80%, white); }
.bar .pill { padding: 8px 20px; }
.switch { border-color: var(--line); }
.switch button { font-size: .78rem; letter-spacing: .04em; padding: 6px 16px; }
.filters button, .plan-tabs button, .plan-chips button { border-color: color-mix(in srgb, var(--fg, var(--forest)) 35%, transparent); }
.bar { background: color-mix(in srgb, var(--cream) 94%, transparent); border-bottom: 1px solid var(--line); }

/* Cards and rules use the quiet Beach House line colour */
.week, .roomcards article, .plan-card, .week-empty { border: 1px solid var(--line); }
.week, html[data-season="summer"] .week { background: var(--sand); }
.plan-card { background: var(--cream); }
.amen li { border-top-color: var(--line); }
.amen li:last-child { border-bottom-color: var(--line); }
.band.forest .amen li, .band.forest .stats { border-color: color-mix(in srgb, var(--cream) 22%, transparent); }
.hero { background: var(--forest); }

@media (max-width: 520px) {
  .bar { padding: .5rem 12px; gap: .4rem; justify-content: space-between; }
  .bar .brand { display: flex; --H: 12px !important; }
  .bar-end { gap: .4rem; }
  .switch button { padding: 5px 11px; font-size: .72rem; }
  .bar .pill { padding: 7px 14px; font-size: .7rem; }
}


/* ---------- Setting map ---------- */
.plan-svg .m-bg { fill: var(--sand); }
.plan-svg .m-bld { fill: color-mix(in srgb, var(--forest) 13%, var(--sand)); stroke: none; }
.plan-svg .m-path { fill: none; stroke: color-mix(in srgb, var(--forest) 35%, transparent); stroke-width: 1.3; stroke-dasharray: 3 4; }
.plan-svg .m-casing { fill: none; stroke: color-mix(in srgb, var(--forest) 24%, transparent); stroke-linecap: round; stroke-linejoin: round; }
.plan-svg .m-casing.major { stroke-width: 14; } .plan-svg .m-casing.minor { stroke-width: 10; } .plan-svg .m-casing.ped { stroke-width: 11; }
.plan-svg .m-road { fill: none; stroke: var(--cream); stroke-linecap: round; stroke-linejoin: round; }
.plan-svg .m-road.major { stroke-width: 11; } .plan-svg .m-road.minor { stroke-width: 7; } .plan-svg .m-road.ped { stroke-width: 8; }
.plan-svg .m-lift { fill: none; stroke: var(--forest); stroke-width: 2.4; stroke-dasharray: 10 5; }
.plan-svg .m-pylon { fill: var(--forest); }
.plan-svg .m-route { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.plan-svg .m-lab { font-size: 17px; font-weight: 500; font-style: italic; fill: color-mix(in srgb, var(--forest) 70%, transparent); text-anchor: middle; paint-order: stroke; stroke: var(--cream); stroke-width: 4px; }
.plan-svg .m-note { font-size: 19px; font-weight: 600; fill: var(--accent); text-anchor: start; paint-order: stroke; stroke: var(--cream); stroke-width: 5px; }
.plan-svg .m-small { font-size: 17px; font-weight: 500; fill: var(--forest); paint-order: stroke; stroke: var(--cream); stroke-width: 4px; dominant-baseline: auto; text-anchor: start; }
.plan-svg .m-dot { fill: var(--forest); }
.plan-svg .m-attr { font-size: 14px; fill: color-mix(in srgb, var(--forest) 60%, transparent); }
.plan-svg .m-pin { cursor: pointer; }
.plan-svg .m-pin .hit { fill: transparent; }
.plan-svg .m-pin text { font-size: 22px; font-weight: 600; fill: var(--forest); paint-order: stroke; stroke: var(--cream); stroke-width: 6px; dominant-baseline: auto; }
.plan-svg .m-pin .sq { fill: var(--forest); stroke: var(--cream); stroke-width: 3; }
.plan-svg .m-pin.chalet .ring { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; }
.plan-svg .m-pin.chalet .dot { fill: var(--accent); stroke: var(--cream); stroke-width: 3; }
.plan-svg .m-pin.chalet text { fill: var(--accent); }
.plan-svg .m-pin.sel .sq { fill: var(--accent); }
.plan-svg .m-pin.sel text { font-size: 25px; }
.plan-svg .m-pin.chalet.sel .ring { stroke-width: 5; }


/* ---------- Plan drawing detail ---------- */
.plan-svg .wall { stroke-width: 10; }
.plan-svg .room { stroke-width: 3; }
.plan-svg .room.sel { fill: color-mix(in srgb, var(--accent) 30%, var(--cream)); stroke-width: 4.5; }
.plan-svg text.sel { fill: var(--forest); }
.plan-svg text { paint-order: stroke; stroke: color-mix(in srgb, var(--cream) 85%, transparent); stroke-width: 5px; stroke-linejoin: round; }
.plan-svg .dec { pointer-events: none; }
.plan-svg .dec .f { fill: var(--cream); stroke: var(--forest); stroke-width: 1.6; }
.plan-svg .dec .soft { fill: color-mix(in srgb, var(--forest) 10%, var(--cream)); stroke: var(--forest); stroke-width: 1.5; }
.plan-svg .dec .bed { fill: color-mix(in srgb, var(--cream) 92%, var(--accent)); stroke: var(--forest); stroke-width: 1.8; }
.plan-svg .dec .pil { fill: var(--cream); stroke: var(--forest); stroke-width: 1.2; }
.plan-svg .dec .l { stroke: var(--forest); stroke-width: 1.6; fill: none; }
.plan-svg .dec .thin { stroke-width: 1; opacity: .7; }
.plan-svg .dec .gap { stroke: var(--cream); stroke-width: 9; }
.plan-svg .dec .gapw { stroke: var(--cream); stroke-width: 12; }
.plan-svg .dec .leaf { stroke: var(--forest); stroke-width: 2.4; }
.plan-svg .dec .arc { stroke: var(--forest); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; opacity: .75; }
.plan-svg .dec .dotp { fill: var(--forest); stroke: none; }
.plan-svg .dec .rail { fill: none; stroke: var(--forest); stroke-width: 3; }
.plan-svg .dec text.dt { font-size: 14px; font-weight: 500; fill: color-mix(in srgb, var(--forest) 75%, transparent); stroke: none; paint-order: normal; }

.plan-svg .m-elev-c { fill: none; stroke: var(--cream); stroke-width: 15; stroke-linecap: round; }
.plan-svg .m-elev { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }

.plan-svg .dec .dash { stroke-dasharray: 6 5; }
.plan-svg .dec .gapw.big { stroke-width: 16; }


/* ---------- Region map ---------- */
.plan-svg .r-river { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--sand)); stroke-width: 2.2; stroke-linecap: round; }
.plan-svg .r-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan-svg .r-road.primary { stroke: color-mix(in srgb, var(--forest) 22%, var(--sand)); stroke-width: 1.2; }
.plan-svg .r-road.trunk { stroke: color-mix(in srgb, var(--forest) 38%, var(--sand)); stroke-width: 1.8; }
.plan-svg .r-road.motorway { stroke: color-mix(in srgb, var(--forest) 52%, var(--sand)); stroke-width: 2.4; }
.plan-svg .r-peak { fill: color-mix(in srgb, var(--forest) 55%, var(--sand)); stroke: none; }
.plan-svg .r-mass { font-size: 20px; font-style: italic; font-weight: 500; fill: color-mix(in srgb, var(--forest) 55%, transparent); text-anchor: middle; paint-order: stroke; stroke: var(--sand); stroke-width: 4px; letter-spacing: .06em; }
.plan-svg .r-air { stroke: color-mix(in srgb, var(--forest) 60%, transparent); stroke-width: 2.4; stroke-dasharray: 3 7; stroke-linecap: round; }
.plan-svg .r-bus-c { fill: none; stroke: var(--cream); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.plan-svg .r-bus { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4.5; }
.plan-svg .r-bus.t75 { stroke: var(--accent); }
.plan-svg .r-bus.t71 { stroke: var(--forest); }
.plan-svg .r-bus.tava { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 8; }
.plan-svg .r-plane { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; transform: translate(0, -2px); }
.plan-svg .r-pin { cursor: pointer; }
.plan-svg .r-pin .hit { fill: transparent; }
.plan-svg .r-pin .dotp { fill: var(--forest); stroke: var(--cream); stroke-width: 3; }
.plan-svg .r-pin text { font-size: 22px; font-weight: 600; fill: var(--forest); paint-order: stroke; stroke: var(--cream); stroke-width: 6px; dominant-baseline: auto; }
.plan-svg .r-pin.air .dotp { fill: transparent; stroke: none; }
.plan-svg .r-pin.shop .dotp { fill: var(--accent); }
.plan-svg .r-pin.vaujany .dotp { fill: var(--accent); }
.plan-svg .r-pin.vaujany .ring { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 3; }
.plan-svg .r-pin.vaujany text { fill: var(--accent); font-size: 26px; }
.plan-svg .r-pin.sel text { font-size: 25px; }
.plan-svg .r-pin.sel .dotp { fill: var(--accent); }
.plan-svg .r-dot { fill: var(--accent); stroke: var(--cream); stroke-width: 2; }
.plan-svg .r-small { font-size: 19px; font-weight: 500; fill: var(--forest); paint-order: stroke; stroke: var(--cream); stroke-width: 5px; dominant-baseline: auto; }
.plan-svg .r-legend rect { fill: color-mix(in srgb, var(--cream) 90%, transparent); stroke: color-mix(in srgb, var(--forest) 25%, transparent); }
.plan-svg .r-legend text { font-size: 17px; font-weight: 500; fill: var(--forest); text-anchor: start; stroke: none; paint-order: normal; }

#getting-here .amen { margin-top: calc(var(--gutter) * 2); padding-top: calc(var(--gutter) * 1.2); border-top: 1px solid var(--line); }
.map-link { margin-top: var(--gutter); }

.plan-svg .m-ref { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 5; }
.plan-svg text .sub { font-size: 15px; font-weight: 400; fill: color-mix(in srgb, var(--forest) 80%, transparent); }

/* The owners' private closet: darkened out, no door */
.plan-svg .room.private { fill: color-mix(in srgb, var(--forest) 78%, var(--cream)); }
.plan-svg .room.private.sel { fill: color-mix(in srgb, var(--forest) 78%, var(--cream)); stroke-width: 5; }
.plan-svg text.priv, .plan-svg text.priv.sel { fill: var(--cream); stroke: color-mix(in srgb, var(--forest) 60%, transparent); }

.plan-card .card-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin: 0 0 1.1rem; }

/* ---------- Constrain the width on large screens ----------
   Backgrounds (the colour bands and the header) still run edge to edge; the content sits in a centred column. */
:root { --max: 1400px; --side: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.band, .bar { padding-left: var(--side); padding-right: var(--side); }
.hero { width: calc(100% - 2 * clamp(10px, 1.4vw, 20px)); max-width: calc(var(--max) + 120px); margin-left: auto; margin-right: auto; }
@media (min-width: 1700px) { .hero { margin-top: 20px; margin-bottom: 20px; height: clamp(520px, 56vh, 700px); } }

.weeks-head .pill { margin-left: auto; }
.week { padding-bottom: 1rem; }
.week .meta { margin-bottom: 0; }

/* Interiors: a warmer grade in summer, a cooler one in winter */
html[data-season="summer"] img.grade { filter: sepia(.14) saturate(1.1) brightness(1.02); }
html[data-season="winter"] img.grade { filter: saturate(.9) hue-rotate(-6deg) brightness(1.02) contrast(1.02); }
.cal-actions { display: inline-flex; gap: .6rem; flex-wrap: wrap; }

/* Links out of the cards and lists */
.card-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0 !important; }
.card-link { display: inline-block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: inherit; background: color-mix(in srgb, var(--cream) 70%, transparent); }
.card-link:hover { border-color: var(--forest); }
.amen li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.amen li a:hover { text-decoration-color: currentColor; }

/* Guest reviews */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: var(--gutter); }
.quote { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.5rem 1.2rem; background: color-mix(in srgb, var(--cream) 55%, transparent); display: flex; flex-direction: column; gap: 1rem; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; text-wrap: pretty; }
.quote figcaption { margin-top: auto; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.quote figcaption b { font-weight: 600; }

/* Open weeks linked to the calendar */
.week { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.week:hover, .week:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); outline: none; }
.week .see { margin-top: .7rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.day.hl { outline: 2px solid var(--accent); outline-offset: -2px; }
.sw.hl { background: var(--sand); outline: 2px solid var(--accent); outline-offset: -2px; }

/* Open weeks as small chips above the calendar */
.weeks-mini { margin: 0 0 1.2rem; display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.weeks-mini .muted { margin: 0; font-size: .85rem; opacity: .7; }
.weeks-mini .week-list { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; margin: 0; padding: 0; }
.weeks-mini .week { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: .6rem; padding: .35rem .9rem; border-radius: 999px; background: var(--sand); color: var(--forest); }
.weeks-mini .week .dates { font-size: .9rem; }
.weeks-mini .week .meta { font-size: .78rem; margin: 0; }
.weeks-mini .week-empty { flex: 1 0 100%; background: transparent; padding: .4rem 0; border: 0; }
.weeks-mini .week-empty p { font-size: .9rem; }

#availability .avail-note, .weeks-mini .muted:empty { display: none; }

/* Compact chalet intro above the calendar */
.band.house { padding-top: calc(var(--gutter) * .9); padding-bottom: calc(var(--gutter) * .9); }
.house-grid { gap: var(--gutter); align-items: center; }
.house h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.house h2 > span:not(.t) { margin-top: .3rem; }
.house-grid p { font-size: 1rem; line-height: 1.55; margin: 0; }
.house .stats { margin: .8rem 0 0; padding: .6rem 0; }
.house .stats dd { font-size: 1.4rem; }
.house .stats dt { font-size: .66rem; }
.house h2 span { font-size: clamp(1.3rem, 2vw, 1.8rem); margin-top: .3rem; }
.house h2 { font-size: 0; letter-spacing: 0; }

.house-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.house .stats { margin: 0; }

/* Left arrow on photo strips; floor label on bedroom photos */
.next.prev { right: auto; left: 1.4rem; }
@media (max-width: 760px) { .next.prev { left: .8rem; } }
.rooms figure { position: relative; }
.floor-tag { position: absolute; top: .8rem; left: .8rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(255,255,255,.88); color: #1a2233; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* Bed icons on bedroom cards */
.beds { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .7rem; }
.beds .bed { width: 46px; height: 32px; color: currentColor; opacity: .8; }
.beds .or { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.legend-hl { display: inline-flex; align-items: center; gap: .6rem; }
.legend-hl .sw { margin-left: .8rem; }

.enq-dates { font-weight: 500; }
.enq-alt { margin-top: 1.2rem; font-size: .95rem; opacity: .85; }
.enq-alt a { text-decoration: underline; text-underline-offset: 3px; }

.outdoor-links { margin: 1.4rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; }

/* Clearer booking prompt under the calendar */
.cal-sum p { max-width: 38em; }
.cal-actions { align-items: center; gap: 1rem; }
.cal-actions .pill.solid { background: var(--cream); color: var(--forest); border-color: var(--cream); font-weight: 600; }
.cal-or { color: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; opacity: .85; white-space: nowrap; }
.cal-or { text-decoration: none; }
.cal-or a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Contact detail revealed under the calendar */
.cal-detail { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); border-radius: 14px; }
.cal-detail[hidden] { display: none; }
.cal-detail-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.cal-detail-value { font-size: 1.35rem; user-select: all; -webkit-user-select: all; }
.cal-detail-status { font-size: .9rem; opacity: .8; }
.cal-actions [aria-expanded="true"] { outline: 2px solid var(--cream); outline-offset: 2px; }
.cal-detail .pill { cursor: pointer; }
button.pill { font-family: var(--sans); color: inherit; background: transparent; cursor: pointer; }
button.pill.solid { background: var(--cream); color: var(--forest); }
.band.forest button.pill:hover, .cal-detail .pill:hover { background: color-mix(in srgb, var(--cream) 14%, transparent); }
.band.forest button.pill.solid:hover { background: color-mix(in srgb, var(--cream) 88%, white); }

.plan-card .card-photos { display: grid; gap: 8px; margin: 0 0 1.1rem; }
.plan-card .card-photos.n2 { grid-template-columns: 1fr 1fr; }
.plan-card .card-photos .card-photo { margin: 0; aspect-ratio: 3 / 4; }
.plan-card .card-photos.n1 .card-photo { aspect-ratio: 4 / 3; }

.plan-card .card-photos figure { margin: 0; position: relative; }
.plan-card .card-photos figcaption { margin-top: .4rem; font-size: .8rem; letter-spacing: .06em; opacity: .75; }
.plan-card .card-photos { margin-bottom: 1.5rem; }
.plan-card .card-photos figure { display: flex; flex-direction: column; min-width: 0; }
.plan-card .card-photos figure .card-photo { height: auto; flex: none; }