/* =============================================================
   SURF CLUB MIDIGAMA
   Design system and shared component styles
   Rebuild, September 2026. Light pastel pages, photography leads,
   restrained type, generous space. No decoration.
   -------------------------------------------------------------
   HANDOVER NOTES
   1. Tokens live in :root below. Colours are the review palette;
      type is Jost (headings, labels) and DM Sans (body).
   2. Every component in this file is documented with a copy and
      paste snippet in docs/COMPONENTS.md. Pages use only those
      classes plus, if needed, a small css/pages/<name>.css.
   3. Order of this file: tokens, base, type, reveal, layout,
      buttons, nav, footer, then components A to Z, then
      utilities, focus, reduced motion, print.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette (review p1 and p4, brand book p21 to p22) */
  --cream:       #F6E9ED;   /* page ground, nav, most sections: a light tint of Rosewater Blush #E9C7D2 (club, 23 Sep 2026; was warm cream #F7F0E5) */
  --lilac:       #E9E1F0;   /* pastel field */
  --lagoon:      #D9EAF0;   /* pastel field */
  --mint:        #DDEBE4;   /* pastel field */
  --blush:       #F2DDE4;   /* pastel field */
  --cement:      #D7D1CA;   /* textured field, footer, rules */
  --cement-deep: #C9C2B9;   /* hairlines on cement */
  --ink:         #00394D;   /* Midnight Surf Blue: all text, buttons */
  --ink-soft:    rgba(0,57,77,.72);   /* secondary text */
  --pink:        #E83E8C;   /* tiny accents only, never a fill */
  --ivory:       #F8F5F0;   /* text on ink and on photos */
  --line:        rgba(0,57,77,.14);   /* rules */
  --line-strong: rgba(0,57,77,.32);   /* input borders, underlines */

  /* Type families */
  --display: "Jost", "Futura PT", Futura, "Century Gothic", "DM Sans", sans-serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Eight-step type scale. Reduced at 860px and 560px, see the
     responsive block near the end of this file. */
  --t-display: 60px;
  --t-h1:      36px;
  --t-h2:      30px;
  --t-h3:      24px;
  --t-h4:      20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  --lh-display: 1.06;
  --lh-head:    1.18;
  --lh-body:    1.55;
  --ls-display: -.004em;
  --ls-caps:    .12em;

  /* Rhythm */
  --gutter:  clamp(16px, 5vw, 72px);
  --section: clamp(56px, 8vw, 120px);
  --gap:     clamp(20px, 3vw, 40px);
  --radius:  4px;        /* images and fields: barely rounded */
  --nav-h:   64px;
  --wrap:    1400px;

  /* Motion: almost none */
  --t-ui:     .2s;
  --t-reveal: .4s;
  --ease: cubic-bezier(.25, .1, .25, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--cream);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No overflow here: overflow on body would make it the scroll container
     and stop the sticky nav sticking. html clips sideways overflow. */
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
/* A <picture> holds a photo's WebP sizes (written into the pages by the
   booking app's site-pictures script, and built by js/main.js for live
   photos). It never makes a box of its own, so every rule written for
   ".x img" keeps working. An optional photo spot with no photo
   (data-slot-optional) stays out of the page through [hidden], below. */
picture { display: contents; }
iframe { max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--nav-h) + 24px); }
/* Scroll lock, set by js/main.js while the mobile menu or the lightbox is
   open. It sits on html because the overflow-x on html above stops an
   overflow on body from reaching the viewport, so body overflow alone did
   not lock anything. iOS Safari 16 and later honour this. */
html.scroll-lock { overflow: hidden; }
/* Phone numbers never break across lines. */
a[href^="https://wa.me"], a[href^="tel:"] { white-space: nowrap; }

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
.display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.page-chalets h1, .page-chalets h2, .page-chalets h3, .page-chalets h4, .page-chalets .display { font-weight: 300; }

p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
/* An optional photo spot that is hidden (no photo yet) must not change the
   page: the paragraph before it still counts as the last one. */
p:has(+ [data-slot-optional][hidden]:last-child) { margin-bottom: 0; }
strong, b { font-weight: 600; }
small, .small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); }
.soft { color: var(--ink-soft); }

/* Lede: the supporting line under a heading, full ink so contrast never suffers */
.lede { font-size: var(--t-h4); line-height: 1.45; max-width: 52ch; color: var(--ink); }

/* Eyebrow: the only small caps label */
.eyebrow {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.eyebrow--pink { color: var(--pink); }

/* Crumbs: eyebrow with links and slashes */
.crumbs {
  display: flex; flex-wrap: wrap; gap: .6em;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
  list-style: none;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.crumbs li + li::before { content: "/"; margin-right: .6em; opacity: .6; }

/* Prose: running copy with links */
.prose { max-width: 64ch; }
.prose h2, .prose h3 { margin-top: 1.6em; margin-bottom: .5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose a, main p a, main li a:not(.btn):not(.chip):not(.more), dd a, td a, .link, .form a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--line-strong);
  transition: color var(--t-ui) var(--ease), text-decoration-color var(--t-ui) var(--ease);
}
.prose a:hover, main p a:hover, main li a:not(.btn):not(.chip):not(.more):hover, dd a:hover, td a:hover, .link:hover, .form a:hover {
  text-decoration-color: var(--pink); text-decoration-thickness: 2px;
}

/* More: a small link with an arrow glyph, used by tiles and cards.
   As a link it is a 44px touch target; as a span inside a tile it keeps
   its text height. Hover keeps the text ink and turns the arrow pink. */
.more {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-small); letter-spacing: .04em;
  text-decoration: none !important;
  color: var(--ink);
  min-height: 24px;
}
a.more { min-height: 44px; }
.more::after {
  content: ""; width: 14px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-ui) var(--ease);
}
.more:hover::after { transform: translateX(3px); background: var(--pink); }

/* Section heading group: eyebrow, h2, one line. Keeps every section aligned. */
.heading { margin-bottom: clamp(28px, 4vw, 48px); max-width: 64ch; }
.heading > p { margin-top: .6em; }
/* A page text the club edits in the staff system (js/main.js 8i) wraps its
   paragraphs in <div class="block-text" data-content-block="...">. The
   wrapper makes no box, so the paragraphs lay out as they did without it:
   the last one keeps its bottom margin unless the wrapper is itself the last
   thing in its parent (as p:last-child does above). */
.block-text { display: contents; }
.block-text > p:last-child { margin-bottom: 1em; }
.block-text:last-child > p:last-child { margin-bottom: 0; }
.heading > .block-text > p { margin-top: .6em; }
.heading--center { margin-inline: auto; text-align: center; }
.heading--center .eyebrow { text-align: center; }
.heading--center p, .heading--center .lede { margin-inline: auto; }

/* ---------- 4. Reveal ----------
   A 400ms opacity fade on [data-reveal]. Four safety nets so nothing
   can be left invisible: (1) the .js class flag, set in the head, so
   without JS nothing is ever hidden; (2) js/main.js reveals anything
   already in the first viewport immediately; (3) timeouts in JS reveal
   everything after load; (4) this keyframe backstop fires at 3s even
   if the script never runs a line. */
.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease);
  animation: rv-in var(--t-reveal) var(--ease) 3s forwards;
}
.js [data-reveal].in { opacity: 1; animation: none; }
@keyframes rv-in { to { opacity: 1; } }

/* ---------- 5. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--mid { max-width: 1040px; }
.wrap--narrow { max-width: 760px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .55); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.stack > * + * { margin-top: var(--gap); }
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Fields: full-width colour grounds. Cream is the base; use at most two
   pastel fields per page, never the same two in a row, and one cement
   field at most (plus the footer). Text on every field is ink. */
.field { background: var(--cream); color: var(--ink); }
.field--cream  { background: var(--cream); }
.field--lilac  { background: var(--lilac); }
.field--lagoon { background: var(--lagoon); }
.field--mint   { background: var(--mint); }
.field--blush  { background: var(--blush); }
.field--cement { background: var(--cement); }

/* Cement texture: two layers of large-scale fractal noise at different
   tile sizes (900px and 1400px) so nothing visibly repeats; low opacity,
   multiplied, so it reads as mottled plaster and never as a pattern. */
.field--cement, .texture { position: relative; isolation: isolate; background-color: var(--cement); }
/* Secondary text on cement: 72% ink falls under 4.5:1 there, so it is
   raised to 80% (about 5.2:1 before the texture). */
.field--cement, .texture, .pastel-cement { --ink-soft: rgba(0,57,77,.8); }
.field--cement::before, .texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 900px 900px, 1400px 1400px;
  background-position: 0 0, 420px 260px;
  background-repeat: repeat, repeat;
  mix-blend-mode: multiply;
  opacity: .13;
}

/* Pastel tones for cards, tiles, rooms, slots and gateway tiles.
   Components read var(--pastel) for their surface colour. */
.pastel-cream  { --pastel: var(--cream); }
.pastel-lilac  { --pastel: var(--lilac); }
.pastel-lagoon { --pastel: var(--lagoon); }
.pastel-mint   { --pastel: var(--mint); }
.pastel-blush  { --pastel: var(--blush); }
.pastel-cement { --pastel: var(--cement); }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75em 1.7em;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  text-align: center; text-decoration: none !important;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--ivory);
  cursor: pointer;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.btn:hover { background: #0A4C63; border-color: #0A4C63; color: var(--ivory); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--small { min-height: 44px; padding: .6em 1.3em; font-size: 12px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 7. Navigation ----------
   Cream, always solid, 64px, sticky. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: 10px 16px; border-radius: 100px; font-size: var(--t-small);
}
.skip:focus { top: 12px; }

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex: none; }
.mark {
  display: inline-block; width: 30px; height: 30px; flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.mark--sc { --m: url("../assets/img/brand/sc-mark.png"); width: 34px; height: 27px; }
.mark--ch { --m: url("../assets/img/brand/ch-mark.png"); width: 30px; height: 29px; }
.nav__word {
  font-family: var(--display); font-weight: 500;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.nav__word small {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: .02em; text-transform: none;
  color: var(--ink-soft); margin-top: 3px;
}
.nav__links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--ink); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__cta .btn { min-height: 40px; padding: .55em 1.3em; font-size: 12px; }

.nav__toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  color: var(--ink);
}
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu: full-screen cream panel under the sticky bar */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  /* Clear of the iPhone home indicator. env() is 0 until the viewport meta
     carries viewport-fit=cover, so this changes nothing today. */
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  /* A swipe that reaches the end of the menu list stops here instead of
     scrolling the page behind (iOS Safari 16+, Chrome). */
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-ui) var(--ease), visibility 0s linear var(--t-ui);
}
.mobile-menu.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu__list { list-style: none; border-top: 1px solid var(--line); }
.mobile-menu__list a {
  display: block; padding: 12px 0; min-height: 48px;
  font-family: var(--display); font-weight: 400; font-size: var(--t-h3); line-height: 1.2;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__list a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.mobile-menu .btn { margin-top: 24px; }
.mobile-menu__foot { margin-top: 28px; font-size: var(--t-small); color: var(--ink-soft); }
.mobile-menu__foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 8. Footer ---------- */
.footer { color: var(--ink); padding-block: clamp(48px, 6vw, 80px) 28px; font-size: var(--t-small); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: clamp(24px, 4vw, 56px); }
.footer__col p, .footer__col address { max-width: 36ch; margin-bottom: .6em; }
.footer__brand .mark { margin-bottom: 14px; width: 40px; height: 32px; }
.footer__name { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.footer__title { font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.footer__list { list-style: none; }
.footer__list li { margin-bottom: 0; }
.footer__list a, .footer__col a { text-decoration: none; }
/* Footer links are 32px targets with a pointer, 44px on touch and narrow screens. */
.footer__list a, .footer__legal a, .footer__follow a, .footer__col p a { display: inline-flex; align-items: center; min-height: 32px; }
.footer__list a:hover, .footer__col a:hover, .footer__legal a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.footer__follow { margin-top: 14px; }
.footer__follow a { margin-right: .5em; }
.footer__bottom {
  margin-top: clamp(32px, 4vw, 56px); padding-top: 20px;
  border-top: 1px solid var(--cement-deep);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  font-size: var(--t-micro); color: var(--ink-soft);
}
.footer__bottom p { margin: 0; max-width: none; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }

/* ---------- 9. Floating WhatsApp button ---------- */
.wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  /* Clear of the iPhone home indicator and, in landscape, the notch side.
     env() is 0 until the viewport meta carries viewport-fit=cover. */
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--ivory);
  border-radius: 100px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,57,77,.18);
  transition: background-color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease), visibility 0s;
}
.wa:hover { background: #0A4C63; }
/* Set by js/main.js while the footer's bottom line is on screen, and on
   phones near the top of the page, so the button never covers buttons. */
.wa.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-ui) var(--ease), visibility 0s linear var(--t-ui); }
.wa[aria-expanded="true"] { background: #0A4C63; }
/* With JS the button opens this choice of the two WhatsApp lines, just
   above it (js/main.js builds it). 44px button plus an 8px gap. */
.wa-panel {
  position: fixed; z-index: 80;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  width: 272px; max-width: calc(100vw - 32px);
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,57,77,.18);
}
.wa-panel__list { list-style: none; }
.wa-panel__list li + li { border-top: 1px solid var(--line); }
.wa-panel__link { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 16px; }
.wa-panel__name { font-family: var(--display); font-weight: 500; font-size: var(--t-small); line-height: 1.3; }
.wa-panel__note { font-size: var(--t-micro); line-height: 1.4; color: var(--ink-soft); }
.wa-panel__link:hover .wa-panel__name { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.wa-panel__link:focus-visible { outline-offset: -3px; }

/* ---------- 10. Hero ----------
   Wide image (21:9 desktop, 4:5 phone) then a cream title block.
   No text over the photo, so contrast is never a question. */
.hero { background: var(--cream); }
.hero__media {
  position: relative; overflow: hidden;
  width: 100%; height: clamp(320px, 42.8vw, 640px);
  background: var(--lagoon);
}
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__media video { z-index: 1; }
.hero__media .slot__label { z-index: 2; }
.hero__body { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.hero__title { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 18ch; text-wrap: balance; }
.hero__lede { margin-top: 20px; }
.hero__actions { margin-top: 28px; }
.hero--plain .hero__body { padding-top: clamp(40px, 6vw, 88px); }

/* ---------- 11. Intro (two-column prose) ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap) clamp(32px, 6vw, 96px); align-items: start; }
.intro__aside h2 { max-width: 18ch; }
.intro__body { max-width: 64ch; }
.intro__body p { max-width: 64ch; }

/* ---------- 12. Tiles (image top, copy on pastel below) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; }
.tile__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pastel, var(--lagoon)); border-radius: var(--radius) var(--radius) 0 0; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.02); }
.tile__body { flex: 1; padding: 20px 20px 22px; background: var(--pastel, var(--lilac)); border-radius: 0 0 var(--radius) var(--radius); display: flex; flex-direction: column; gap: 8px; }
.tile__title { font-size: var(--t-h4); }
.tile__body p { font-size: var(--t-small); margin: 0; max-width: none; }
.tile__body .more { margin-top: auto; padding-top: 8px; }

/* ---------- 13. Facts (three items) ---------- */
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.fact + .fact { padding-left: 24px; }
.fact:last-child { border-right: 0; }
.fact__value { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-h2); line-height: 1.1; margin-bottom: 8px; }
.fact__label { display: block; font-size: var(--t-small); color: var(--ink-soft); max-width: 28ch; }

/* ---------- 14. Split (image and body, reversible) ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) clamp(32px, 5vw, 80px); align-items: center; }
.split__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--pastel, var(--lagoon)); border-radius: var(--radius); }
.split__media--wide { aspect-ratio: 3 / 2; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { max-width: 52ch; }
.split__body h2, .split__body h3 { margin-bottom: 16px; }
.split__body .btn-row { margin-top: 24px; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__body { order: 1; }
.split__note { font-size: var(--t-small); color: var(--ink-soft); margin-top: 12px; }

/* ---------- 15. Rooms ---------- */
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.room { display: flex; flex-direction: column; background: var(--pastel, transparent); border-radius: var(--radius); overflow: hidden; }
.room__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lagoon); }
.room__media img { width: 100%; height: 100%; object-fit: cover; }
.room__body { padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.room--filled .room__body, .room[class*="pastel-"] .room__body { padding: 20px 20px 22px; }
.room__name { font-size: var(--t-h4); }
.room__line { font-size: var(--t-small); margin: 0; max-width: none; }
.room__list { list-style: none; font-size: var(--t-small); color: var(--ink-soft); }
.room__list li { padding: 5px 0; border-top: 1px solid var(--line); }
.room__list li:last-child { border-bottom: 1px solid var(--line); }
.room .btn { align-self: flex-start; margin-top: auto; }
/* Live rooms (js/main.js 8g): the "From" price line and the Room details
   link under the button. */
.room__from { font-size: var(--t-small); font-weight: 600; margin: 0; max-width: none; }
.room .room__more { align-self: flex-start; }

/* ---------- 16. Amenities grid ---------- */
.amenities { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); }
.amenities li { padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.amenities--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 16b. Room details ----------
   One block per room under the room cards, built by js/main.js (8g) from
   live content: name and short description, a row of photos at one
   height (scrolls sideways when it is wider than the page; each opens the
   lightbox), the long description, the facts, the amenities by group and a
   button. The two-column layout is page-scoped (css/pages/chalets.css). */
/* minmax(0, 1fr): a block is never wider than the page; a long photo row
   scrolls inside it instead of widening it. */
.room-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.room-detail { min-width: 0; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.room-detail__head { margin-bottom: 20px; }
.room-detail__name { font-size: var(--t-h3); }
.room-detail__line { margin: 8px 0 0; font-size: var(--t-small); color: var(--ink-soft); }
.room-detail__photos {
  display: flex; gap: 12px; margin-bottom: 28px; padding-bottom: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.room-detail__photo { flex: none; width: min-content; scroll-snap-align: start; cursor: zoom-in; }
.room-detail__photo img { height: clamp(220px, 32vw, 420px); width: auto; max-width: none; object-fit: cover; border-radius: var(--radius); background: var(--lagoon); }
.room-detail__photo figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--ink-soft); }
.room-detail__facts .room__list, .room-detail__facts .room__from { margin-bottom: 16px; }
.room-detail .room-detail__group { margin: 22px 0 6px; font-weight: 500; }
.room-detail .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.room-detail__actions { margin-top: 24px; }

/* ---------- 17. FAQ (details and summary) ---------- */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 16px 40px 16px 0; min-height: 48px;
  font-family: var(--display); font-weight: 400; font-size: var(--t-h4); line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; background: var(--ink);
  transition: transform var(--t-ui) var(--ease);
}
.faq__item summary::before { width: 14px; height: 1.5px; transform: translateY(-50%); }
.faq__item summary::after { width: 1.5px; height: 14px; right: 10.25px; transform: translateY(-50%); }
.faq__item[open] summary::after { transform: translateY(-50%) scaleY(0); }
.faq__body { padding: 0 40px 20px 0; }
.faq__body p { max-width: 60ch; }

/* ---------- 18. Tabs and menus ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 3vw, 36px); border-bottom: 1px solid var(--line); list-style: none; }
.tabs__tab {
  position: relative; min-height: 48px; padding: 12px 2px;
  font-family: var(--display); font-weight: 400; font-size: var(--t-h4); color: var(--ink-soft);
  transition: color var(--t-ui) var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); }
.tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.tabs__tab[aria-selected="true"]::after { background: var(--pink); }
.tabs__panel { padding-top: clamp(24px, 3vw, 40px); }

.menu { max-width: 900px; }
.menu__service { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: 24px; }
.menu__section + .menu__section { margin-top: 36px; }
.menu__title { font-size: var(--t-h4); margin-bottom: 8px; }
.menu__intro { font-size: var(--t-small); color: var(--ink-soft); margin: 0 0 12px; max-width: 60ch; }
.menu__list { list-style: none; }
.menu__item {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 16fr) minmax(4em, 6em);
  gap: 4px 20px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.menu__list li:last-child { border-bottom: 1px solid var(--line); }
.menu__name { font-weight: 500; }
.menu__ingredients { font-size: var(--t-small); color: var(--ink-soft); }
.menu__price { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.menu__tag { font-family: var(--display); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-left: .6em; }
.menu__download { margin-top: 24px; font-size: var(--t-small); }
/* Notes from the staff system (js/main.js 8a): a line under the menu's
   service line, and a short note under a dish's ingredients ("Contains
   nuts"). A dish without a note keeps the three columns as they are. */
.menu__note { font-size: var(--t-small); color: var(--ink-soft); }
.menu > .menu__note { margin-bottom: 24px; }
.menu__service:has(+ .menu__note) { margin-bottom: 6px; }
.menu__item > .menu__note { grid-column: 2; }
.menu__item > .menu__note ~ .menu__price { grid-column: 3; grid-row: 1; }

/* ---------- 19. Chips filter ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
/* Chips filter only once js/main.js runs; without it the static list shows on its own. */
html:not(.js) .chips { display: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  font-size: var(--t-small); font-weight: 500; color: var(--ink); background: transparent;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ---------- 20. Cards (copy on pastel) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.cards-group + .cards-group { margin-top: clamp(36px, 5vw, 64px); }
.cards-group__title { margin-bottom: 20px; font-size: var(--t-h3); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; background: var(--pastel, var(--mint)); border-radius: var(--radius); color: var(--ink); }
.card__media { position: relative; margin: -22px -22px 6px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lagoon); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__label { margin: 0 0 2px; }
.card__title { font-size: var(--t-h4); }
.card p { font-size: var(--t-small); margin: 0; max-width: none; }
.card__by { font-size: var(--t-micro); color: var(--ink-soft); }
.card .more, .card .btn { margin-top: auto; }
.card a.more { margin-bottom: -10px; }
.card .btn { align-self: flex-start; margin-top: 10px; }

/* ---------- 21. Events (What's On) ---------- */
.events { max-width: 860px; }
.events__month { font-size: var(--t-h4); margin: 0 0 8px; padding-top: 28px; }
.events__month:first-child { padding-top: 0; }
.event { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.events > .event:last-child, .events__list .event:last-child { border-bottom: 1px solid var(--line); }
.events__list { list-style: none; }
.event__date { text-align: center; }
.event__day { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.event__day--range { font-size: var(--t-h4); line-height: 1.2; text-wrap: balance; }
.event__mon { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; white-space: nowrap; }
.event__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.event__title { font-size: var(--t-h4); margin-bottom: 4px; }
.event p { font-size: var(--t-small); margin: 0; }
.event__line { max-width: 60ch; }
.event__line + .event__line { margin-top: .5em; }
.event__link { margin-top: 8px; }
/* An event's photo from the staff system (js/main.js 8c): 3:2, under its text. */
.event__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; max-width: 360px; margin-top: 12px; border-radius: var(--radius); background: var(--lagoon); }
.event__media img { width: 100%; height: 100%; object-fit: cover; }
.events__empty { max-width: 56ch; color: var(--ink); }
.events__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); list-style: none; margin-bottom: 24px; }

/* ---------- 22. Gallery and lightbox ---------- */
.gallery { columns: 3; column-gap: 14px; }
.gallery--4 { columns: 4; }
.gallery__group { break-before: column; }
.gallery__title { font-size: var(--t-h3); margin: 0 0 16px; }
.gallery__group + .gallery__group { margin-top: clamp(32px, 4vw, 56px); }
.gallery__item { position: relative; break-inside: avoid; margin: 0 0 14px; overflow: hidden; background: var(--lagoon); border-radius: var(--radius); cursor: zoom-in; }
.gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item--tall img { aspect-ratio: 4 / 5; }
.gallery__item:hover img { transform: scale(1.02); }
.gallery__item figcaption { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gallery__line { margin-top: 20px; font-size: var(--t-small); }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: var(--cream);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center;
  padding: 64px 16px 24px;
  overscroll-behavior: contain; /* swipes on the viewer never scroll the page behind */
}
.lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; min-width: 0; width: 100%; height: 100%; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; background: var(--cement); }
.lightbox__caption { margin-top: 14px; font-size: var(--t-small); text-align: center; max-width: 60ch; color: var(--ink); min-height: 1.4em; }
.lightbox__count { max-width: none; text-align: center; font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; color: var(--ink-soft); margin-top: 6px; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line-strong); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 16px; height: 16px; }
.lightbox svg path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.lightbox--single .lightbox__prev, .lightbox--single .lightbox__next { display: none; }

/* ---------- 23. Reviews, quietly ---------- */
.reviews-quiet { max-width: 1040px; }
.reviews-quiet__rating { font-family: var(--display); font-size: var(--t-h4); margin-bottom: 24px; }
.reviews-quiet__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.reviews-quiet__quote { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.reviews-quiet__quote p { font-size: var(--t-small); margin-bottom: 10px; }
.reviews-quiet__quote cite { font-style: normal; font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.reviews-quiet__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-size: var(--t-small); }

/* ---------- 24. Newsletter ---------- */
.newsletter { max-width: 560px; }
.newsletter__line { margin-bottom: 16px; }
.newsletter__row { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter__row input[type="email"] { flex: 1 1 240px; }
.newsletter .form__state { margin-top: 12px; }
.newsletter > .small { margin-top: 12px; }

/* ---------- 25. Form ---------- */
.form { max-width: 640px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form__row .form__field { margin-bottom: 16px; }
.form label, .form__label { font-family: var(--display); font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea, .newsletter input[type="email"] {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--t-body);
  transition: border-color var(--t-ui) var(--ease);
}
.form textarea { min-height: 140px; resize: vertical; }
/* Date and time fields on iPhone Safari: the native control centres its
   value and sizes its own parts. Hold the value left like every other
   field and let the control shrink to its column. The pseudo-element is
   WebKit only, so it has its own rule (other browsers drop that rule). */
.form input[type="date"], .form input[type="time"] { min-width: 0; }
.form input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300394D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.form input:focus, .form select:focus, .form textarea:focus, .newsletter input:focus { border-color: var(--ink); outline: none; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, .newsletter input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.form__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-small); margin-bottom: 16px; }
.form__check input { width: 18px; height: 18px; margin: 13px 0 0; accent-color: var(--ink); flex: none; }
.form__check label { min-height: 44px; padding-block: 11px; }
.form__check label, .form__check span { font-family: var(--sans); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--ink); }
.form__radios { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 16px; }
.form__radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--sans); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.form__field .form__radios { margin-bottom: 0; }
.form__radios input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.form__note { font-size: var(--t-small); color: var(--ink-soft); max-width: 56ch; }
.form__state { font-size: var(--t-small); margin-top: 14px; max-width: 56ch; }
.form__state:empty { display: none; }
.form__state--sending { color: var(--ink-soft); }
.form__state--success { color: var(--ink); font-weight: 500; }
.form__state--error { color: var(--ink); border-left: 2px solid var(--pink); padding-left: 12px; }
.form__state--notconfigured { color: var(--ink-soft); border-left: 2px solid var(--cement-deep); padding-left: 12px; }
.form.is-sent .form__fields { display: none; }

/* ---------- 26. Gateway tiles (three routes) ---------- */
.gateway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.gateway__tile { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 30px; background: var(--pastel, var(--lagoon)); border-radius: var(--radius); scroll-margin-top: calc(var(--nav-h) + 24px); }
.gateway__tile h2, .gateway__tile h3 { font-size: var(--t-h3); }
.gateway__tile p { font-size: var(--t-small); max-width: none; }
.gateway__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gateway__tile > .eyebrow { margin-bottom: 0; }
/* A tile with a heading and more than one route groups each, spaced like the tile. */
.gateway__head, .gateway__route { display: flex; flex-direction: column; gap: 12px; }
.gateway__head .eyebrow { margin-bottom: 0; }
.gateway__route p { margin-bottom: 0; }
.gateway__form { max-width: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.gateway__form .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gateway__form input, .gateway__form select, .gateway__form textarea { background: var(--ivory); }

/* ---------- 27. Map ---------- */
.map { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--cement); border-radius: var(--radius); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__line { margin-top: 12px; font-size: var(--t-small); }

/* ---------- 28. Development note ---------- */
.devnote {
  display: block; max-width: 64ch;
  margin: 20px 0; padding: 12px 16px;
  background: var(--cement); color: var(--ink);
  border: 1px dashed rgba(0,57,77,.45); border-radius: var(--radius);
  font-size: var(--t-small); line-height: 1.5;
}

/* ---------- 29. Empty image slot ---------- */
.slot { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--pastel, var(--lagoon)); border-radius: var(--radius); overflow: hidden; }
.slot--45 { aspect-ratio: 4 / 5; }
.slot--square { aspect-ratio: 1 / 1; }
.slot--wide { aspect-ratio: 21 / 9; }
.slot--portrait { aspect-ratio: 9 / 16; }
.slot__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__media.slot, .tile__media.slot, .split__media.slot, .room__media.slot, .card__media.slot { aspect-ratio: auto; }
.hero__media.slot { border-radius: 0; }
.hero__media.slot .slot__label { left: var(--gutter); }
.tile__media.slot, .card__media.slot { aspect-ratio: 3 / 2; }
.split__media.slot { aspect-ratio: 4 / 5; }
.split__media--wide.slot { aspect-ratio: 3 / 2; }
.room__media.slot { aspect-ratio: 4 / 5; }

/* ---------- 30. Film (video with native controls) ---------- */
.film { width: 100%; }
.film video { width: 100%; height: auto; background: var(--cement); border-radius: var(--radius); }
.film--portrait { max-width: 420px; }
.film--portrait video { aspect-ratio: 9 / 16; }
.film--landscape { max-width: 100%; }
.film--landscape video { aspect-ratio: 16 / 9; }
.film__caption { margin-top: 10px; font-size: var(--t-small); color: var(--ink-soft); }
.film--portrait.film--center { margin-inline: auto; }

/* ---------- 31. Coast map (inline SVG) ----------
   Paste the contents of assets/img/surf/midigama-coast.svg inside
   .coastmap. The file carries its own ink strokes, label sizes and
   opacities as presentation attributes, so this block only sizes it;
   any CSS on path, circle or text here would override those. */
.coastmap { max-width: 900px; }
.coastmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.coastmap svg text { font-family: var(--display); }
.coastmap__note { margin-top: 14px; font-size: var(--t-small); color: var(--ink-soft); max-width: 60ch; }

/* ---------- 32. Q and A list ---------- */
.qa { max-width: 860px; margin: 0; border-top: 1px solid var(--line); }
.qa__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.qa dt { font-family: var(--display); font-weight: 400; font-size: var(--t-h4); line-height: 1.3; }
.qa dd { margin: 0; font-size: var(--t-small); }

/* ---------- 33. Stories (journal cards, rendered only when stories exist) ---------- */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.stories--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.story__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lagoon); border-radius: var(--radius); margin-bottom: 8px; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__title { font-size: var(--t-h4); }
.story__title a { text-decoration: none; }
.story__title a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.story p { font-size: var(--t-small); margin: 0; }
.story__meta { font-size: var(--t-micro); color: var(--ink-soft); }

/* ---------- 33b. Preview bar ----------
   Added by js/main.js (section 11) while a manager looks at a preview link
   from the staff system, and when such a link has ended: one line and one
   button, fixed to the bottom, above the WhatsApp button and under the
   mobile menu and the lightbox. js/main.js keeps its height in
   --preview-bar-h, so the page ends above it and the WhatsApp button and
   its choice sit on top of it. */
.preview-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: var(--ink); color: var(--ivory);
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0,57,77,.18);
}
.preview-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.preview-bar__text { margin: 0; max-width: 72ch; font-size: var(--t-small); line-height: 1.45; }
.preview-bar .btn { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.preview-bar .btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.preview-bar :focus-visible { outline-color: var(--ivory); }
html.has-preview-bar body { padding-bottom: var(--preview-bar-h, 0px); }
html.has-preview-bar .wa { bottom: calc(16px + var(--preview-bar-h, 0px)); }
html.has-preview-bar .wa-panel { bottom: calc(68px + var(--preview-bar-h, 0px)); }

/* ---------- 33c. Notice bar ----------
   Added by js/main.js (8i) right under the header of every page while the
   club has a notice in the staff system (Page text, "Notice at the top of
   every page"), up to its Show until date. One short paragraph, centred,
   ink with ivory text like the preview bar; it scrolls with the page, so it
   never covers the WhatsApp button or the preview bar. */
.site-notice { background: var(--ink); color: var(--ivory); }
.site-notice__inner { padding-block: 10px; }
.site-notice p { margin: 0 auto; max-width: 72ch; font-size: var(--t-small); line-height: 1.45; text-align: center; text-wrap: balance; }
.site-notice a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-notice a:hover { text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.site-notice :focus-visible { outline-color: var(--ivory); }

/* ---------- 34. Utilities ---------- */
html:not(.js) [data-bookurl="set"] { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--lagoon); }
.frame--32 { aspect-ratio: 3 / 2; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--219 { aspect-ratio: 21 / 9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption, .caption { margin-top: 8px; font-size: var(--t-small); color: var(--ink-soft); }
.frame figcaption { position: static; }
.figure figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--ink-soft); }

/* ---------- 35. Focus ---------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible, .wa:focus-visible { outline-offset: 3px; }
.nav__links a:focus-visible { outline-offset: -2px; }

/* ---------- 36. Responsive ---------- */
@media (max-width: 860px), (pointer: coarse) {
  .footer__list a, .footer__legal a, .footer__follow a, .footer__col p a { min-height: 44px; }
}
@media (max-width: 1260px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .amenities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gateway { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :root { --t-display: 40px; --t-h1: 30px; --t-h2: 24px; --t-h3: 20px; --t-h4: 18px; }
  .intro { grid-template-columns: 1fr; gap: 20px; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split--reverse .split__body { order: 0; }
  .split__media { aspect-ratio: 3 / 2; }
  .rooms { grid-template-columns: 1fr; max-width: 520px; }
  .reviews-quiet__list { grid-template-columns: 1fr; gap: 16px; }
  .tiles--3 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .gallery, .gallery--4 { columns: 2; }
  .amenities, .amenities--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa__item { grid-template-columns: 1fr; gap: 6px; }
  .hero__media { height: clamp(360px, 70vw, 520px); }
}
@media (max-width: 560px) {
  :root { --t-display: 34px; --t-h1: 26px; --t-h2: 22px; --t-h3: 19px; --t-h4: 17px; }
  .tiles, .tiles--2, .tiles--3, .cards, .stories, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact { border-right: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .fact + .fact { padding-left: 0; }
  .fact:last-child { border-bottom: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .form__row, .gateway__form .form__row { grid-template-columns: 1fr; gap: 0; }
  .menu__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "ing ing"; }
  .menu__name { grid-area: name; }
  .menu__ingredients { grid-area: ing; }
  .menu__price { grid-area: price; }
  .menu__item > .menu__note { grid-column: 1 / -1; }
  .menu__item > .menu__note ~ .menu__price { grid-area: price; }
  .event { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .hero__media { height: clamp(380px, 125vw, 520px); }
  .hero__actions .btn { width: 100%; }
  .lightbox { padding: 64px 8px 16px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__count { padding: 0 60px; }
  .lightbox__img { max-height: calc(100svh - 190px); }
  .map { aspect-ratio: 4 / 3; }
  .wa { right: 12px; bottom: 12px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .wa-panel { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }
  html.has-preview-bar .wa { bottom: calc(12px + var(--preview-bar-h, 0px)); }
  html.has-preview-bar .wa-panel { bottom: calc(64px + var(--preview-bar-h, 0px)); }
  .nav__word { font-size: 12px; letter-spacing: .14em; }
}

/* ---------- 37. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; animation: none; }
  .tile:hover .tile__media img, .gallery__item:hover img { transform: none; }
}

/* ---------- 38. Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .nav, .mobile-menu, .wa, .wa-panel, .lightbox, .devnote, .newsletter, .nav__toggle, .skip, .chips, .preview-bar { display: none !important; }
  html.has-preview-bar body { padding-bottom: 0; }
  .field, .field--cement, .texture { background: #fff !important; }
  .field--cement::before, .texture::before { display: none; }
  .js [data-reveal] { opacity: 1 !important; animation: none !important; }
  .tabs__panel[hidden] { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}