/* Taghazout Surf Trip: "The Forecast" (2026-09-23).
   The week read like a surf forecast: your surf level is your conditions and the
   price is the table. Daylight data surfaces under a night-navy forecast board;
   swell blue marks what you can tap; the wave-size ramp lives only on the season
   strip, always labelled. main.js is the behaviour layer (nav, languages, FAQ,
   consent, the level chooser, sticky bar, analytics); forecast.js adds the
   re-forecast sweep, the stay control and the live-forecast loader. */

@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/atkinson-hyperlegible-next-var-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/atkinson-hyperlegible-next-var-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/atkinson-hyperlegible-next-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/atkinson-hyperlegible-next-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* night board */
  --night-950:#071624;
  --night-900:#0b1f33;
  --night-800:#122d47;
  --night-700:#1b3d5c;
  --on-night:#eef4fa;
  --on-night-soft:#a9bdd0;
  /* daylight data surfaces */
  --mist:#f3f7fa;
  --paper:#ffffff;
  --ink:#0b1f33;
  --ink-soft:#3e5367;
  --line:#d6e0e9;
  --line-strong:#b8c7d4;
  /* swell: everything interactive */
  --swell-700:#0f55a8;
  --swell-600:#1466c6;
  --swell-400:#46a1f2;
  --swell-200:#c4e2ff;
  /* discount chip and "now" marker */
  --sun:#ffd25e; --star:#fbbc04;   /* Google Maps' rating yellow (owner, 2026-09-24) */
  /* wave-size ramp: season strip only, always with a label */
  --wave-1:#d3e3c3;
  --wave-2:#6fd6ab;
  --wave-3:#f6d45a;
  --wave-5:#ff7b52;
  --good:#1f8a5b;

  --font-display:'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body:'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-100:.8125rem; --fs-200:.9375rem; --fs-300:1.0625rem; --fs-400:1.25rem;
  --fs-500:1.5rem; --fs-600:1.875rem; --fs-700:2.375rem; --fs-800:3rem;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-1:4px; --r-2:8px; --r-3:14px;
  --wrap:1180px;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur:220ms;
  --shadow-1:0 1px 2px rgba(7,22,36,.08), 0 6px 18px -8px rgba(7,22,36,.22);
  --shadow-2:0 2px 4px rgba(7,22,36,.10), 0 22px 44px -22px rgba(7,22,36,.45);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-color:var(--night-700) var(--mist);}
body{margin:0; background:var(--mist); color:var(--ink); font-family:var(--font-body); font-size:var(--fs-300); line-height:1.6; caret-color:var(--swell-600);}
body.page-success, body.page-book{min-height:100svh; display:flex; flex-direction:column;}   /* short checkout pages: the footer meets the bottom of the window */
body.page-success > main, body.page-book > main{flex:1 0 auto;}
img,video,svg,picture{display:block; max-width:100%;}
img{height:auto;}
a{color:var(--swell-600); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--swell-700);}
::selection{background:var(--swell-200); color:var(--ink);}
:focus-visible{outline:3px solid var(--swell-400); outline-offset:2px; border-radius:var(--r-1);}
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.005em; margin:0; text-wrap:balance;}
h2{font-size:clamp(var(--fs-600), 1.4rem + 2.4vw, var(--fs-800)); text-transform:uppercase;}
h3{font-size:var(--fs-500); font-weight:600;}
p{margin:0 0 var(--s-4);}
.fig,.num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1, "lnum" 1;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s-4);}
@media (min-width:720px){.wrap{padding:0 var(--s-6);}}
.skip-link{position:absolute; left:-999px; top:8px; background:var(--paper); color:var(--ink); padding:var(--s-2) var(--s-4); z-index:100;}
.skip-link:focus{left:8px;}
.sr-only,.lang-pill-name{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
[hidden]{display:none !important;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:var(--s-2); min-height:48px; padding:var(--s-2) var(--s-5); border-radius:var(--r-2); border:1.5px solid transparent; font:700 var(--fs-300)/1 var(--font-body); letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 120ms var(--ease-out);}
.btn:active{transform:translateY(1px);}
.btn-book{background:var(--swell-400); color:var(--night-900);}
@media (hover:hover) and (pointer:fine){.btn-book:hover{background:#6ab4f6; color:var(--night-900);}}   /* a tap no longer leaves the hover colour on a phone (UX audit 2026-10-14) */
.btn-line{background:transparent; color:var(--on-night); border-color:rgba(238,244,250,.45);}
.btn-line:hover{border-color:var(--on-night); color:var(--on-night);}
.btn-ink{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ink:hover{border-color:var(--ink); color:var(--ink);}
.btn svg{width:20px; height:20px; flex:none;}
.btn-link{font-weight:700; text-decoration:none; color:var(--swell-600); display:inline-flex; align-items:center; gap:6px; min-height:44px;}
.btn-link::after{content:""; flex:none; width:1em; height:1em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur) var(--ease-out);}
.btn-link:hover::after{transform:translateX(3px);}
button.btn-link{appearance:none; background:none; border:0; padding:0; font:700 var(--fs-300)/1.2 var(--font-body); cursor:pointer;}
[data-dates-clear]::after{content:none;}
.on-night .btn-link,.board .btn-link{color:#8cc7ff;}

/* ---------- nav ---------- */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; background:var(--sun); transform:scaleX(0); transform-origin:0 50%; z-index:60;}
.site-nav{position:sticky; top:0; z-index:50; background:var(--night-900); color:var(--on-night); border-bottom:1px solid var(--night-700);}
.nav-inner{display:flex; align-items:center; gap:var(--s-4); min-height:60px;}
.logo{display:flex; align-items:center; margin-right:auto;}
.logo img{height:28px; width:auto;}
.nav-links{display:none; align-items:center; gap:var(--s-5);}
.nav-links > a:not(.nav-cta){color:var(--on-night); text-decoration:none; font-weight:600; font-size:var(--fs-200);}
.nav-links > a:not(.nav-cta):hover{color:#8cc7ff;}
.nav-cta{background:var(--swell-400); color:var(--night-900) !important; text-decoration:none; font-weight:700; font-size:var(--fs-200); padding:0 var(--s-4); min-height:44px; border-radius:var(--r-2); display:inline-flex; align-items:center;}
.nav-bar-cta{display:inline-flex;}
.nav-toggle{appearance:none; background:transparent; border:0; width:44px; height:44px; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--on-night); border-radius:2px;}
@media (min-width:980px){.nav-links{display:flex;} .nav-toggle,.nav-bar-cta{display:none;}}
.lang-switch{position:relative;}
.lang-switch > button{appearance:none; background:transparent; border:1px solid var(--night-700); color:var(--on-night); font:600 var(--fs-100)/1 var(--font-body); min-height:36px; padding:0 var(--s-3); border-radius:var(--r-2); display:inline-flex; align-items:center; gap:4px; cursor:pointer;}
.lang-switch > button svg{width:14px; height:14px;}
.lang-menu{display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--shadow-1); padding:var(--s-2); min-width:150px; z-index:70;}
.lang-switch[data-open="true"] .lang-menu{display:block;}
.lang-menu a{display:flex; gap:var(--s-2); padding:var(--s-2) var(--s-3); color:var(--ink); text-decoration:none; border-radius:var(--r-1); min-height:44px; align-items:center;}
.lang-menu a:hover{background:var(--mist);}
.lang-menu a[aria-current]{font-weight:700;}
.mobile-menu{position:fixed; inset:0; z-index:80; background:var(--night-900); color:var(--on-night); display:flex; flex-direction:column; padding:var(--s-8) var(--s-5) var(--s-5); gap:var(--s-1); transform:translateY(-102%); visibility:hidden; transition:transform 260ms var(--ease-out), visibility 0s 260ms; overflow-y:auto;}
/* closed = hidden, not just off-screen: otherwise Tab walks into the invisible menu and screen readers read it */
.mobile-menu.open{transform:none; visibility:visible; transition:transform 260ms var(--ease-out);}
.mobile-menu > a:not(.btn){color:var(--on-night); text-decoration:none; font-family:var(--font-display); font-size:var(--fs-600); font-weight:600; text-transform:uppercase; padding:var(--s-2) 0; border-bottom:1px solid var(--night-700);}
.mobile-close{position:absolute; top:var(--s-3); right:var(--s-3); width:44px; height:44px; background:transparent; border:0; color:var(--on-night); font-size:0; cursor:pointer;}
.mobile-close::before,.bk-sum-close::before,[data-sheet-close]::before{content:""; display:block; width:22px; height:22px; margin:auto; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-sum-close,[data-sheet-close]{font-size:0 !important;}
/* phone menu, languages: one big key; tapped, the other languages slide out beside it, to the
   right, as keys of the same size. Codes where the row is narrow, names where they fit. */
.mobile-menu .lang-pill{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:var(--s-4) 0;}
.mobile-menu .lang-pill > .lang-switch-btn{flex:none; margin:0; min-height:48px; padding:var(--s-2) var(--s-4); gap:var(--s-2); font:700 var(--fs-300)/1 var(--font-body); border:1.5px solid rgba(238,244,250,.45);}
.mobile-menu .lang-pill > .lang-switch-btn svg{width:20px; height:20px;}
.mobile-menu .lang-pill > .lang-switch-btn::after{content:""; flex:none; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur) var(--ease-out);}
.mobile-menu .lang-pill[data-open="true"] > .lang-switch-btn{background:var(--night-800); border-color:var(--swell-400);}
.mobile-menu .lang-pill[data-open="true"] > .lang-switch-btn::after{transform:rotate(180deg);}
/* the pill lives only in this menu (all 93 pages); it shares nothing with the desktop dropdown */
.mobile-menu .lang-pill-menu{display:none; flex-wrap:wrap; gap:var(--s-2);}   /* wraps only under very large system text */
.mobile-menu .lang-switch[data-open="true"] .lang-pill-menu{display:flex;}
.mobile-menu .lang-pill-menu a{flex:none; display:flex; align-items:center; justify-content:center; gap:var(--s-2); text-decoration:none; min-width:52px; min-height:48px; padding:0 var(--s-3); border:1.5px solid rgba(238,244,250,.28); border-radius:var(--r-2); color:var(--on-night); font:700 var(--fs-300)/1 var(--font-body); animation:lang-slide 220ms var(--ease-out) both;}
.mobile-menu .lang-pill-menu a:nth-child(2){animation-delay:40ms;}
.mobile-menu .lang-pill-menu a:nth-child(3){animation-delay:80ms;}
.mobile-menu .lang-pill-menu a:hover{background:var(--night-800); border-color:var(--swell-400); color:var(--on-night);}
.mobile-menu .lang-pill-menu .lp-name{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
@keyframes lang-slide{from{opacity:0; transform:translateX(-12px);}}
@media (max-width:359px){
  .mobile-menu .lang-pill{gap:6px;}
  .mobile-menu .lang-pill > .lang-switch-btn{padding:var(--s-2) var(--s-3);}
  .mobile-menu .lang-pill-menu{gap:6px;}
  .mobile-menu .lang-pill-menu a{min-width:46px; padding:0 10px;}
}
@media (min-width:560px){
  .mobile-menu .lang-pill-menu a{padding:0 var(--s-4); font-weight:600;}
  .mobile-menu .lang-pill-menu .lp-code{display:none;}
  .mobile-menu .lang-pill-menu .lp-name{position:static; width:auto; height:auto; overflow:visible; clip-path:none;}
}
.mobile-menu .btn{margin-top:auto;}
/* the human channel above Book Now (2026-10-09, conversion audit): same size and type as Book Now,
   WhatsApp's own green on its glyph only */
.mobile-menu .menu-wa{min-height:44px; padding:0 var(--s-4); font-size:var(--fs-200);}
.mobile-menu .menu-wa svg{color:#25d366;}
.mobile-menu .menu-wa + .btn{margin-top:var(--s-2);}
/* short screens (phones with the browser's bars showing, iPhone SE 375x667, 360x640): a tighter rhythm
   keeps both buttons on the first screen instead of under the fold; rows stay 49px, type unchanged */
@media (max-height:760px){
  .mobile-menu{padding-top:var(--s-7);}
  .mobile-menu > a:not(.btn){line-height:1.2; padding-block:6px;}
  .mobile-menu .lang-pill{margin:var(--s-3) 0;}
}
/* very short screens (360x640, 375x667): the Contact row (2026-10-14) made the menu 672px tall, so Book Now ended under
   the fold at 360x640. Rows of 45px (still a 44px target) and a tighter gap round the language key: 632px (review 2026-10-15) */
@media (max-height:680px){
  .mobile-menu > a:not(.btn){padding-block:4px;}
  .mobile-menu .lang-pill{margin:var(--s-2) 0;}
}
.lang-pill-btn svg{width:16px; height:16px;}

/* ---------- the board: the night-navy forecast panel ---------- */
.board{background:var(--night-900); color:var(--on-night); border-radius:var(--r-3); box-shadow:var(--shadow-2); position:relative;}
.board-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) var(--s-4) var(--s-3); border-bottom:1px solid var(--night-700);}
/* sentence case: in fr/es/de these labels run to 32-46 characters, too long for capitals (measured 2026-09-24) */
.board-label{font:700 var(--fs-200)/1.3 var(--font-body); color:var(--on-night-soft); margin:0;}

/* "your conditions": the level control, three native buttons */
.lvl-seg{display:flex; width:100%; padding:3px; gap:3px; background:var(--night-950); border:1px solid var(--night-700); border-radius:var(--r-2);}
.lvl-seg button{flex:1 1 0; min-height:44px; appearance:none; border:0; border-radius:6px; background:transparent; color:var(--on-night-soft); font:700 var(--fs-200)/1.1 var(--font-body); padding:0 var(--s-2); cursor:pointer; transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);}
.lvl-seg button[aria-pressed="true"]{background:var(--on-night); color:var(--night-900);}
.lvl-seg button[aria-pressed="true"]::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--swell-400); margin-right:6px; vertical-align:middle;}
@media (max-width:719px){.lvl-seg button[aria-pressed="true"]::before{content:none;}}   /* phones: the fill alone marks the choice */
@media (max-width:719px){.lvl-seg button{flex:1 1 auto; padding:0 6px; font-size:.875rem; text-wrap:balance;}}   /* phones: buttons share the row by label length, so "Never surfed" / "Jamais surfé" fit on one line from 360px; the longer ES/DE labels wrap to two balanced lines */
@media (max-width:359px){.lvl-seg button{padding:0 4px; font-size:.8125rem;}}   /* 320px: the three longest words still fit side by side (FR/ES overflowed by 5-23px) */
@media (hover:hover) and (pointer:fine){.lvl-seg button:not([aria-pressed="true"]):hover{color:var(--on-night); background:var(--night-800);}}
.lvl-status{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0;}
@media (min-width:720px){.lvl-seg{width:auto; max-width:100%;} .lvl-seg button{flex:0 1 auto; min-width:0; padding:var(--s-1) var(--s-4); text-wrap:balance;}}   /* shrink and wrap inside a narrow board, never past it */

/* the forecast row: one stay, stated in one line */
.fc-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2) var(--s-4); align-items:end; padding:var(--s-4);}
.fc-who{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-3);}
.fc-pkg{font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); text-transform:uppercase; letter-spacing:.01em;}
.fc-lvl{font-size:var(--fs-100); font-weight:700; color:var(--on-night-soft); border:1px solid var(--night-700); border-radius:999px; padding:var(--s-1) var(--s-2);}
.fc-season{font-size:var(--fs-100); font-weight:700; color:var(--on-night-soft); border:1px dashed var(--night-700); border-radius:999px; padding:2px var(--s-2);}
.bk-save-note{margin:var(--s-2) 0 0; font-size:var(--fs-200); color:#7fe0b6;}
.bk-save-note.is-pending{opacity:.5;}   /* its line kept while the quote is on its way (2026-10-14) */
.bk-line small{display:block; font-size:var(--fs-100); font-weight:400; color:var(--on-night-soft);}
/* price line: never a word-wide label column (the label takes a line whole when it must wrap) */
.fc-rate{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--s-2); row-gap:0;}
.fc-rate > *,.fc-rate > span[data-level-price] > *{flex-shrink:0;}
/* three layers: the old price with its saving (small, one line; the badge centred on the struck
   price it explains), then the price you pay alone, then its unit (on that line if it fits) */
.fc-rate s{order:1;}
.fc-rate .chip-off{order:2; align-self:center;}
.fc-rate::before{content:""; order:3; flex-basis:100%; height:2px;}
.fc-rate b{order:4;}
.fc-rate small{order:5; flex-shrink:1;}
.fc-rate s{color:var(--on-night-soft); font-size:var(--fs-300); font-variant-numeric:tabular-nums;}
.fc-rate b{font-family:var(--font-display); font-size:clamp(2.6rem, 2rem + 3vw, 3.4rem); font-weight:700; line-height:.95; font-variant-numeric:tabular-nums; color:var(--on-night);}
.fc-rate small{font-size:var(--fs-200); color:var(--on-night-soft); text-wrap:pretty;}
.chip-off{display:inline-block; background:var(--sun); color:var(--night-900); font:700 var(--fs-100)/1 var(--font-body); padding:5px 7px; border-radius:var(--r-1); letter-spacing:.02em; align-self:baseline;}
.fc-total{text-align:right; font-size:var(--fs-200); color:var(--on-night-soft); line-height:1.35;}
.fc-total b{display:block; font-family:var(--font-display); font-size:var(--fs-600); font-weight:600; color:var(--on-night); font-variant-numeric:tabular-nums;}
.fc-note [data-level-price]{color:var(--on-night); font-weight:700;}   /* Group & Family: the 2-5 price under the 6+ rate */
.fc-note{grid-column:1 / -1; font-size:var(--fs-200); color:var(--on-night-soft); margin:0;}
/* home board (2026-10-08, conversion audit #1): what the nightly price buys, right under it, on phones too */
.fc-incl{grid-column:1 / -1; max-width:32em; margin:0; font-size:var(--fs-200); line-height:1.45; color:var(--on-night); text-wrap:pretty;}
.fc-incl b{font-weight:700;}
.fc-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); padding:0 var(--s-4) var(--s-4);}
.fc-actions .btn{flex:1 1 auto;}
@media (min-width:720px){.fc-actions .btn{flex:0 0 auto;}}

/* the proof strip: real Google score, count, since */
.proof{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); padding:var(--s-3) var(--s-4); border-top:1px solid var(--night-700); font-size:var(--fs-200); color:var(--on-night-soft);}
.proof b{color:var(--on-night);}
.stars{display:inline-block; overflow:hidden; vertical-align:-1px; width:70px; height:13px; font-size:0; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8L2.2 9l6.8-1z'/%3E%3C/svg%3E") left center/14px 13px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8L2.2 9l6.8-1z'/%3E%3C/svg%3E") left center/14px 13px repeat-x;}
.proof .stars{color:var(--star);}
.proof a{color:#8cc7ff;}
/* every rating shown is a Google rating: the Google G before the stars, on a white disc so it
   reads on the night boards as on paper (owner, 2026-09-24) */
:is(span, p, div):has(> .stars)::before{content:""; display:inline-block; width:16px; height:16px; margin-right:6px; vertical-align:-3px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/68% no-repeat;}
.report-meta:has(> .stars)::before{margin-right:calc(6px - var(--s-4));}   /* a flex row with a 16px gap: pull the G back to 6px from its stars */
.rating-block div:has(> .stars)::before{width:24px; height:24px; margin-right:8px; vertical-align:-4px;}

/* the re-forecast sweep: the one authored motion. A level change repaints every
   row left to right, like a model run updating; nothing moves under reduced motion. */
@keyframes fc-sweep{from{clip-path:inset(0 100% 0 0); opacity:.35;} to{clip-path:inset(0 0 0 0); opacity:1;}}
.is-reforecast [data-sweep]{animation:fc-sweep 360ms var(--ease-out) both;}
.is-reforecast [data-sweep="2"]{animation-delay:50ms;}
.is-reforecast [data-sweep="3"]{animation-delay:100ms;}

/* ---------- home: hero band + board ---------- */
.hero{position:relative; background:var(--night-950); color:var(--on-night); overflow:hidden;}
.hero-media{position:relative; height:clamp(250px, 38svh, 560px);}
.hero-media video,.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,22,36,.15) 0%, rgba(7,22,36,.25) 45%, rgba(7,22,36,.92) 100%);}
.hero-copy{position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:var(--s-6);}
.hero h1{text-transform:uppercase; font-size:clamp(2.9rem, 1.7rem + 6vw, 5.6rem); line-height:.9; letter-spacing:-.01em; text-shadow:0 2px 24px rgba(7,22,36,.35);}
.hero h1 .h1-lead{display:block; font-family:var(--font-body); font-size:var(--fs-200); font-weight:700; letter-spacing:.04em; text-transform:none; line-height:1.3; margin-bottom:var(--s-2); color:var(--on-night);}
.hero h1 .h1-wave{color:var(--on-night);}
.hero-board{position:relative; z-index:3; margin-top:calc(-1 * var(--s-4)); padding-bottom:var(--s-6);}
@media (min-width:980px){
  .hero-home{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:min(78svh, 720px);}
  .hero-media{height:auto;}
  .hero-copy{padding-bottom:var(--s-7);}
  .hero-board{margin:0; display:flex; align-items:center; padding:var(--s-7) var(--s-6);}
  .hero-board .board{width:100%;}
}

@media (max-width:719px){.hero-home .fc-note{display:none;}}
.hero-home .board{display:flex; flex-direction:column;}
.hero-home .lvl-card{display:contents;}
.hero-home .board .proof{order:1; border-top:0; padding-top:var(--s-2);}
.hero-home .lvl-card .fc-actions{order:2; padding-top:var(--s-2);}

/* ---------- section rhythm ---------- */
.band{padding:var(--s-7) 0;}
@media (min-width:900px){.band{padding:var(--s-8) 0;}}
.band-paper{background:var(--paper);}
.band-night{background:var(--night-900); color:var(--on-night);}
/* reading measure, about 70 characters a line. 68ch was the intent, but ch is the width of "0",
   wide in Atkinson Hyperlegible Next: 68ch ran to 88-105 characters (measured 2026-09-24).
   em on the paragraph itself, so it holds at 16 and 17px; photos and tables keep the column. */
.prose p,.faq-a p,.band-head p,.guide-article p,.guide-article li,.brk > p,.fc-note,.hint{max-width:32em;}
.band-head{max-width:720px; margin-bottom:var(--s-6);}
.band-head p{color:var(--ink-soft); margin-top:var(--s-3); margin-bottom:0;}
.band-night .band-head p{color:var(--on-night-soft);}
.prose{max-width:68ch;}
.prose p{color:var(--ink-soft);}
.prose p:first-of-type{color:var(--ink);}

/* ---------- reports: Google reviews as surf reports ---------- */
.reports{display:grid; gap:0; border-top:1px solid var(--line);}
.report{display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:var(--s-2); padding:var(--s-5) 0; border-bottom:1px solid var(--line);}
.report-meta{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); align-items:center; font-size:var(--fs-200); color:var(--ink-soft);}
.report-meta b{color:var(--ink); font-weight:700;}
.report-meta .stars{color:var(--star);}
.report blockquote{margin:0; font-size:var(--fs-400); line-height:1.45;}
.rating-block{display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-4);}
.rating-block .score{font-family:var(--font-display); font-weight:700; font-size:var(--fs-800); line-height:1;}
.rating-block .stars{color:var(--star); width:108px; height:20px; -webkit-mask-size:21.6px 20px; mask-size:21.6px 20px;}
.rating-block p{max-width:32em; margin:0; color:var(--ink-soft); font-size:var(--fs-200);}
@media (min-width:900px){.reports{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s-6); border-top:0;} .report{border-bottom:0; border-top:2px solid var(--ink); padding-top:var(--s-4);}}
/* Reviews (2026-10-01): tools/reviews.py writes them into three slots. With JS (main.js) each slot
   shows one review and the slots take turns; the others wait underneath, still read by screen
   readers. One motion for all of it: an arriving review sweeps in left to right with the forecast's
   own fc-sweep while the one it replaces fades, and the 5.0's stars fill once on arrival. Without
   JS every review is listed; with reduced motion nothing sweeps or turns by itself. */
.report-slot{display:grid; align-content:start; min-width:0;}
.reports.is-rotating .report-slot > .report{grid-area:1 / 1; transition:opacity 180ms var(--ease-out);}
.reports.is-rotating .report.is-off{opacity:0; pointer-events:none;}
/* phones: the three slots share one place and main.js shows one at a time, so the section stays one review tall */
.reports.is-single > .report-slot{grid-area:1 / 1; transition:opacity 180ms var(--ease-out);}
.reports.is-single > .report-slot.is-off{opacity:0; pointer-events:none;}
.report.rv-in{animation:fc-sweep 600ms var(--ease-out) var(--rv-delay, 0ms) both;}
.report-slot.rv-armed > .report:not(.is-off){clip-path:inset(0 100% 0 0); opacity:.35;}
.rating-block .stars.rv-armed{background:linear-gradient(90deg, var(--star) 50%, var(--line-strong) 50%) 100% 0 / 200% 100%;}
.rating-block .stars.rv-armed.rv-on{background-position:0 0; transition:background-position 760ms var(--ease-out);}
.report-tr{margin:0; font-size:var(--fs-200); line-height:1.5; color:var(--ink-soft);}
.reports-ctl{display:flex; justify-content:flex-end; gap:var(--s-2); margin-top:var(--s-4);}
/* 2026-10-08 (conversion audit): the slot keeps the tallest review's height so nothing below jumps when
   reviews turn; the controls are pinned to its top right (phones: on the review's name line; wide screens:
   at the foot of the 5.0 row, above the columns), so a short review no longer leaves an empty band between
   its words and the controls */
.reports.is-rotating{position:relative;}
.reports.is-rotating > .reports-ctl{position:absolute; top:calc(var(--s-5) - 10px); right:0; z-index:1; margin:0;}
.reports.is-rotating .report-meta{padding-right:104px;}
#reviews:has(.reports.is-rotating){padding-bottom:var(--s-5);}   /* the reserve already leaves room under a short review */
@media (min-width:900px){
  #reviews:has(.reports.is-rotating){padding-bottom:var(--s-6);}
  .reports.is-rotating > .reports-ctl{top:auto; bottom:calc(100% + var(--s-4));}   /* .rating-block's margin: level with its foot */
  .reports.is-rotating .report-meta{padding-right:0;}
}
.reports-ctl button{appearance:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:transparent; color:var(--ink); cursor:pointer; transition:border-color var(--dur) var(--ease-out);}
.reports-ctl button:hover{border-color:var(--ink);}
.reports-ctl svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- the forecast table (packages at your level) ---------- */
.fc-table{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden; box-shadow:var(--shadow-1);}
.fc-line{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-1) var(--s-4); padding:var(--s-4); border-top:1px solid var(--line); align-items:center;}
.fc-line:first-child{border-top:0;}
.fc-line h3{font-size:var(--fs-500); text-transform:uppercase;}
.fc-line .who{grid-column:1; font-size:var(--fs-200); color:var(--ink-soft); margin:0;}
.fc-line .rate{grid-column:2; grid-row:1 / span 2; align-self:start; text-align:right; line-height:1.15;}   /* hangs from the row's top: the old-price line meets the heading in every row */
.fc-line .rate s{display:block; color:var(--ink-soft); font-size:var(--fs-200);}
.fc-line .rate b{font-family:var(--font-display); font-size:var(--fs-700); font-weight:700; font-variant-numeric:tabular-nums;}
.fc-line .rate small{display:block; font-size:var(--fs-100); color:var(--ink-soft);}
@media (max-width:1139px){.fc-line{grid-template-columns:minmax(0,1fr) fit-content(9rem);} .fc-line .who{max-width:32em;} .fc-line .rate small{text-wrap:balance;}}   /* the note wraps, the description keeps its width */
@media (max-width:359px){.fc-line{grid-template-columns:minmax(0,1fr) fit-content(7.5rem);}}   /* 320: the description gets 118px, not 94 */
.fc-line .tot{grid-column:2; grid-row:3; margin:0; text-align:right; font-size:var(--fs-100); color:var(--ink-soft); line-height:1.2;}
.fc-line .tot b{display:block; font-family:var(--font-display); font-size:var(--fs-500); font-weight:600; color:var(--ink);}
.fc-line .more{grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); margin:var(--s-2) 0 0;}
.fc-line .more .btn{min-height:44px; padding:var(--s-2) var(--s-4);}
.fc-line .more .btn-link{white-space:nowrap;}
/* same three layers as .fc-rate, right-aligned: old price + badge (centred on the struck price),
   then the price alone, then the unit; flex order + a ::before break, markup unchanged */
.fc-line .rate > span[data-level-price]{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; column-gap:var(--s-2);}
.fc-line .rate > span[data-level-price] > s{order:1;}
.fc-line .rate > span[data-level-price] > .chip-off{order:2;}
.fc-line .rate > span[data-level-price]::before{content:""; order:3; flex-basis:100%; height:2px;}
.fc-line .rate > span[data-level-price] > b{order:4;}
@media (min-width:1140px){
  /* fixed tracks so the rates line up down the table, like a forecast column (they need ~1140px: at 900 the text track was 0) */
  .fc-line{grid-template-columns:10rem minmax(0,1fr) 12rem 7rem 15rem; gap:var(--s-5); padding:var(--s-5) var(--s-6);}
  .fc-line .who{grid-column:2; grid-row:1; max-width:40ch;}
  .fc-line .rate{grid-column:3; grid-row:1;}
  .fc-line .tot{grid-column:4; grid-row:1;}
  .fc-line .more{grid-column:5; grid-row:1; flex-direction:column; align-items:flex-end; justify-content:center; gap:var(--s-2); margin:0;}   /* every row the same: Book above its link */
}
/* Group & Family as the two tiers /book step 1 shows (UX audit 2026-10-14, Tesler): 2-5 people at the Solo rate
   first, then 6+ at the group rate, each with its struck price, badge and 7-night total. Phones: one right-hand
   column, tier under tier; from 1140px the tiers take the rate and total tracks of the other rows (subgrid). */
.tier-n{font:700 var(--fs-100)/1.3 var(--font-body); letter-spacing:.02em;}
.fc-line-tiers{grid-template-rows:auto 1fr; align-items:start;}
.fc-line-tiers .fc-tiers{grid-column:2; grid-row:1 / span 2; align-self:start; display:grid; row-gap:var(--s-3); text-align:right;}
.fc-line-tiers .fc-tier{display:grid; row-gap:2px;}
.fc-line-tiers .fc-tiers :is(.rate, .tot){grid-column:auto; grid-row:auto;}
.fc-line-tiers .tier-n{display:block; color:var(--ink);}
.fc-line-tiers .tot b{display:inline;}
.fc-line-tiers .tier-per{margin:calc(-1 * var(--s-2)) 0 0; font-size:var(--fs-100); color:var(--ink-soft); text-wrap:balance;}
.fc-line-tiers .more{grid-column:1 / -1;}   /* under both columns: the tiers are taller than the text beside them */
@media (min-width:1140px){
  .fc-line-tiers .fc-tiers{grid-column:3 / span 2; grid-row:1; grid-template-columns:subgrid; align-self:center;}
  .fc-line-tiers .fc-tier{display:contents;}
  .fc-line-tiers .fc-tiers .rate{grid-column:1;}
  .fc-line-tiers .fc-tiers .tot{grid-column:2; align-self:center;}
  .fc-line-tiers .tot b{display:block;}
  .fc-line-tiers{grid-template-rows:auto; align-items:center;}
  .fc-line-tiers .tier-per{grid-column:1; margin-top:calc(-1 * var(--s-4));}
  .fc-line-tiers .more{grid-column:5; align-self:center;}
}

/* ---------- facts strip (why + trust, one line each) ---------- */
/* one label column for every fact (the widest label sets it: 89-104px), so all the descriptions start on one line */
.facts{display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:var(--s-4); border-top:1px solid var(--line); margin-top:var(--s-6);}
.fact{grid-column:1 / -1; display:grid; grid-template-columns:subgrid; gap:var(--s-1) var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); align-items:baseline;}
.fact b{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; text-transform:uppercase; min-width:5.5ch;}
.fact span{color:var(--ink-soft); font-size:var(--fs-200); text-wrap:pretty;}   /* no lone "2." on a last line */
.fact span b{font-family:var(--font-body); font-size:inherit; font-weight:700; text-transform:none; min-width:0; color:var(--ink);}
@media (min-width:900px){.facts{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr); column-gap:var(--s-7);} .fact{grid-column:span 2;}}

/* ---------- crew: people, compact ---------- */
.crew{display:grid; gap:var(--s-4);}
.person{display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--s-4); align-items:center;}
.person img{width:88px; height:88px; object-fit:cover; border-radius:var(--r-2);}
.person h3{font-size:var(--fs-400); text-transform:uppercase;}
.person .role{font-size:var(--fs-100); font-weight:700; color:var(--ink-soft); margin:2px 0 var(--s-1);}
.person p{margin:0; font-size:var(--fs-200); color:var(--ink-soft);}
.house-line{max-width:38em; margin-top:var(--s-5); padding:var(--s-4); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); font-size:var(--fs-200);}   /* 38em: a readable line instead of one sentence across the page */
@media (min-width:900px){.crew{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6);} .person{grid-template-columns:minmax(0,1fr); align-items:start; align-content:start;} .person img{width:100%; height:auto; aspect-ratio:4/3;}}
/* the house (2026-10-08, conversion audit #6): four of the camp's own photos under the crew, each with a
   night caption plate and a link to its space in the accommodation tour. Two by two up to 899px; from
   900px the rooftop large on the left, dinner across the top right, a room and breakfast under it (at
   720-899px the small tiles were too narrow for one-line plates). */
.house{margin-top:var(--s-6);}
.house-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2);}
.house-grid > li{margin:0; min-width:0;}
.house-tile{position:relative; display:block; border-radius:var(--r-2); overflow:hidden; background:var(--line); color:var(--on-night); text-decoration:none;}
.house-tile figure{margin:0;}
.house-tile img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.house-tile figcaption{position:absolute; left:var(--s-2); bottom:var(--s-2); max-width:calc(100% - var(--s-4)); display:inline-flex; align-items:center; gap:6px; padding:6px var(--s-2); border-radius:var(--r-1); background:rgba(7,22,36,.78); color:var(--on-night); font-size:var(--fs-100); font-weight:700; line-height:1.25;}
.house-tile figcaption::after{content:""; flex:none; width:12px; height:12px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur) var(--ease-out);}
.house-tile:hover figcaption::after{transform:translateX(3px);}
.house-tile:hover figcaption{background:var(--night-900);}
.house-tile:focus-visible{outline-offset:3px; border-radius:var(--r-2);}
.house-more{margin:var(--s-3) 0 0;}
@media (min-width:720px){.house-grid{gap:var(--s-3);} .house-tile figcaption{left:var(--s-3); bottom:var(--s-3); max-width:calc(100% - var(--s-5));}}
@media (min-width:900px){
  .house-grid{grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, clamp(150px, 16vw, 220px));}
  .house-grid > li:first-child{grid-row:1 / span 2;}
  .house-grid > li:nth-child(2){grid-column:2 / span 2;}
  .house-tile,.house-tile figure,.house-tile picture{height:100%;}
  .house-tile img{height:100%; aspect-ratio:auto;}
  .house-grid > li:nth-child(2) img{object-position:50% 58%;}   /* the dinner table: faces and plates, not the slatted wall */
}

/* ---------- season strip: the guide's month table as a forecast ---------- */
.season{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2px; margin:var(--s-5) 0 var(--s-3);}
.season .m{position:relative; height:56px; border-radius:3px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; font:700 11px/1 var(--font-body); color:var(--night-900);}
.season .m.w1{background:var(--wave-1); height:28px;}
.season .m.w2{background:var(--wave-2); height:36px;}
.season .m.w3{background:var(--wave-3); height:46px;}
.season .m.w5{background:var(--wave-5); height:56px;}
.season-wrap{display:flex; align-items:flex-end;}
.season .m.is-now::before{content:""; position:absolute; top:-12px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--ink);}
.season{margin-top:var(--s-6);}
.season-lvls{display:grid; gap:4px; margin:0 0 var(--s-3);}
.season-lvl{display:grid; grid-template-columns:minmax(0,1fr); gap:2px; margin:0;}
.guide-article .season-lvl{max-width:none;}   /* each cell under its month: the article's 32em measure made May-Sep read as Apr-Aug */
.season-lvl .lbl{font-size:var(--fs-100); font-weight:700; color:var(--ink);}
.season-lvl .cells{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2px;}
.season-lvl i{height:10px; border-radius:2px; background:var(--mist); border:1px solid var(--line);}
.lvl-b i.on{background:var(--ink); border-color:var(--ink);}
.lvl-i i.on{background:repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); border-color:var(--ink);}
.season-key{display:grid; gap:var(--s-2); margin:0; padding:0; list-style:none; font-size:var(--fs-200);}
.season-key li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:var(--s-3); align-items:baseline;}
.season-key i{display:block; width:14px; height:14px; border-radius:3px;}
.season-key b{color:var(--ink);}
.season-key span{color:var(--ink-soft);}
.season-grid{display:grid; column-gap:var(--s-6);}
.season-grid > .season-col{margin-top:var(--s-6);}   /* phones: the space the grid gap used to give */
@media (min-width:900px){
  .season-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start;}
  .season-grid > .season-col{margin-top:0;}
  /* desktop (owner's idea, 2026-09-25): intro and season strip side by side, then the live forecast
     across the full width, then the flights card with the fares and the search side by side */
  .season-grid > :is(.fcast, .fcast-fold, .flights){grid-column:1 / -1;}
  .season-grid > .fcast{margin-top:var(--s-7);}
  .season-grid > .fcast-fold.is-wide{margin-top:var(--s-7); border-top:0;}
  .fcast-fold.is-wide > summary{display:none;}
  .fcast-fold.is-wide > .fcast{margin-top:0;}
  .season-grid > .flights{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr;}
  .season-grid > .flights > *{grid-column:1;}
  .season-grid > .flights > .fly{grid-column:2; grid-row:1 / -1; margin:0; border-top:0; border-left:1px solid var(--line); padding:var(--s-5); container-type:inline-size;}
}
.keyfacts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); margin:var(--s-5) 0;}
.keyfacts div{border-top:2px solid var(--ink); padding-top:var(--s-2);}
.keyfacts b{display:block; font-family:var(--font-display); font-size:var(--fs-600); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.05;}
.keyfacts span{font-size:var(--fs-200); color:var(--ink-soft);}

/* live forecast: nothing loads until the visitor asks */
.live{margin-top:var(--s-5); border:1px solid var(--line); border-radius:var(--r-3); background:var(--paper); overflow:hidden;}
.live-head{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; justify-content:space-between; padding:var(--s-4);}
.live-head p{margin:0; font-size:var(--fs-200); color:var(--ink-soft);}
.live + .live{margin-top:var(--s-3);}   /* the flights card sits close under the forecast card */

/* live forecast board (2026-09-25): five mornings from forecast.php, dark like the hero's price
   board; tap a morning to see the spots that suit it. Arrows point where swell and wind are going. */
.fcast{margin-top:var(--s-5); padding:var(--s-4); container-type:inline-size;}
.fcast.is-compact{margin-top:var(--s-4); max-width:30rem; box-shadow:none;}
.fcast + .live{margin-top:var(--s-3);}
.fcast-fold + .live{margin-top:var(--s-3);}
.fcast-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-3);}
.fcast-title{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; line-height:1; text-transform:uppercase; margin:0; color:var(--on-night);}
.is-compact .fcast-title{font:700 var(--fs-200)/1.3 var(--font-body); text-transform:none;}   /* a label in the date sheet, not a heading */
.fcast-when{margin:0; font-size:var(--fs-100); color:var(--on-night-soft);}
.fcast-legend{margin:var(--s-2) 0 var(--s-3); font-size:var(--fs-100); color:var(--on-night-soft);}
.fdays{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;}
.is-compact .fdays{margin-top:var(--s-3);}
.fday{appearance:none; width:100%; display:grid; justify-items:center; gap:2px; padding:var(--s-3) 0 var(--s-2); border:1px solid transparent; border-radius:var(--r-2); background:transparent; color:var(--on-night); font:inherit; line-height:1.2; cursor:pointer; transition:background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);}
div.fday{cursor:default;}
.fday-name{font-size:var(--fs-100); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--on-night-soft);}
.fday-date{font-family:var(--font-display); font-size:var(--fs-400); font-weight:700; line-height:1;}
.fday-bar{display:flex; align-items:flex-end; width:16px; height:52px; margin:var(--s-2) 0 6px; border-radius:4px; background:rgba(238,244,250,.07); overflow:hidden;}
.fday-bar i{display:block; width:100%; border-radius:4px 4px 0 0; background:var(--wave-2);}
.fday-bar i[data-size="1"]{background:var(--wave-1);}
.fday-bar i[data-size="3"]{background:var(--wave-3);}
.fday-bar i[data-size="5"]{background:var(--wave-5);}
.fday-swell{font-size:var(--fs-100); color:var(--on-night-soft); white-space:nowrap;}
.fday-swell b{font-family:var(--font-display); font-size:var(--fs-400); font-weight:700; color:var(--on-night);}
.fday-per{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-100); color:var(--on-night-soft); white-space:nowrap;}
.fday-wind{display:inline-flex; align-items:center; gap:3px; margin-top:var(--s-2); padding:3px var(--s-2); border-radius:999px; font-size:var(--fs-100); font-weight:700; color:var(--night-900); background:var(--wave-2); white-space:nowrap;}
.fday-wind[data-state="cross"]{background:var(--wave-3);}
.fday-wind[data-state="onshore"]{background:var(--wave-5);}
.fday-wind small{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; font-size:.72rem; font-weight:600; margin-left:1px;}   /* narrow: for screen readers only */
.farr{display:inline-block; flex:none; width:11px; height:11px; background:currentColor; transform:rotate(var(--deg,0deg)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.fday-ghost{height:9.75rem; border-radius:var(--r-2); background:rgba(238,244,250,.05);}
.fspot-name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-400); line-height:1.1; text-transform:uppercase; color:var(--on-night); text-decoration:none;}
a.fspot-name{text-decoration:underline; text-decoration-color:rgba(238,244,250,.3); text-underline-offset:3px;}
a.fspot-name:hover{text-decoration-color:currentColor;}
.fcast.is-stale .fcast-when{color:var(--wave-3);}
.fspot-meta{grid-column:1 / -1; font-size:var(--fs-100); color:var(--on-night-soft);}
.fcast-fail{margin:var(--s-3) 0 0; font-size:var(--fs-200); color:var(--on-night-soft);}
.fcast-foot{margin:var(--s-4) 0 0; font-size:var(--fs-100); line-height:1.45; color:var(--on-night-soft);}
.fcast-foot a{color:#8cc7ff;}
/* spot first (2026-09-25): the best spot this morning per level, then one tab per break with its
   own five mornings: estimated surf at that spot, verdict, best tide window, morning wind */
.fcast-best{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:var(--s-3) 0 0;}
.fbest-lbl{flex-basis:100%; font-size:var(--fs-100); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.fbest-lbl.is-none{max-width:32em; font-size:var(--fs-200); font-weight:600; text-transform:none; letter-spacing:0; line-height:1.4;}
.fbest{appearance:none; display:grid; gap:1px; text-align:left; padding:6px var(--s-3); border:1px solid var(--night-700); border-radius:var(--r-2); background:rgba(238,244,250,.05); color:var(--on-night); font:inherit; cursor:pointer; transition:background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);}
.fbest:hover{background:rgba(238,244,250,.1); border-color:var(--on-night-soft);}
.fbest small{font-size:var(--fs-100); color:var(--on-night-soft); line-height:1.2;}
.fbest b{font-family:var(--font-display); font-size:var(--fs-300); font-weight:700; line-height:1.1; text-transform:uppercase;}
.fspot-tabs{display:flex; gap:var(--s-1); margin:calc(var(--s-4) - 6px) calc(-1 * var(--s-4)) 0; padding:6px var(--s-5) 6px var(--s-4); overflow-x:auto; scrollbar-width:none; -webkit-mask:linear-gradient(90deg, transparent, #000 var(--s-4), #000 calc(100% - var(--s-5)), transparent); mask:linear-gradient(90deg, transparent, #000 var(--s-4), #000 calc(100% - var(--s-5)), transparent);}
.fspot-tabs::-webkit-scrollbar{display:none;}
.fspot-tab{appearance:none; flex:none; min-height:40px; padding:0 var(--s-3); border:1px solid transparent; border-radius:999px; background:transparent; color:var(--on-night-soft); font:700 var(--fs-200)/1 var(--font-body); white-space:nowrap; cursor:pointer; transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);}
.fspot-tab:hover{color:var(--on-night); background:rgba(238,244,250,.06);}
.fspot-tab[aria-selected="true"]{background:var(--on-night); color:var(--night-900);}
.fspot-head{display:grid; gap:2px; margin:var(--s-4) 0 var(--s-3);}
.fspot-head .fspot-name{font-size:var(--fs-500);}
.fday-surf{display:grid; justify-items:center; font-size:var(--fs-100); line-height:1.15; color:var(--on-night-soft); white-space:nowrap;}   /* the unit drops under the range on phones */
.fspot-panel .fday-bar i[data-size]{background:rgba(238,244,250,.55);}   /* per spot the bar is size only: the verdict carries the colour */
.fday-surf b{font-family:var(--font-display); font-size:var(--fs-300); font-weight:700; color:var(--on-night);}
.fday-verdict{max-width:100%; padding:2px 6px; border-radius:var(--r-1); font-size:.72rem; font-weight:700; line-height:1.2; text-align:center; color:var(--night-900); background:var(--wave-2);}
.fday[data-verdict="fair"] .fday-verdict{background:var(--wave-3);}
.fday:is([data-verdict="blown"], [data-verdict="windy"]) .fday-verdict{background:var(--wave-5);}
.fday:is([data-verdict="small"], [data-verdict="angle"], [data-verdict="big"], [data-verdict="adv"]) .fday-verdict{background:transparent; color:var(--on-night-soft); box-shadow:inset 0 0 0 1px var(--night-700);}
.fday-tide{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-100); color:var(--on-night-soft); white-space:nowrap;}
.fday-tide::before{content:""; flex:none; width:13px; height:13px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 14c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2M2 19c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 14c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2M2 19c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.fcast-foot [data-fcast-tide-credit]{display:inline;}
.fcast-foot [data-fcast-tide-credit][hidden]{display:none;}
@container (min-width:440px){
  .fday-verdict{-webkit-hyphens:none; hyphens:none;}   /* wide enough for each word whole: "Bonnes / conditions", never "condi-tions" (owner); phones keep the soft hyphens */
  .fspot-tabs{margin-inline:0; padding-inline:0; flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none;}
}
@container (min-width:520px){
  .fday-verdict{font-size:var(--fs-100);}
  .fday-surf{display:block;}
}
/* chips wrap to up to four lines: the tide and wind rows stay level across the columns (with or
   without tide data) */
.fspot-panel .fdays > li{display:flex;}
.fspot-panel .fday{display:flex; flex-direction:column; align-items:center;}
.fspot-panel .fday-verdict{margin-bottom:4px;}
.fspot-panel .fday-tide,.fspot-panel .fday-verdict + .fday-wind{margin-top:auto;}
.fspot-panel .fday-tide{padding-top:2px;}
/* the narrowest phones (up to about 360 px): four mornings instead of five, so no column crowds
   its neighbour (the owner's call, 2026-09-25); long verdicts still hyphenate ("Verbla-sen").
   In rem, so a larger browser text size switches earlier (18.75rem = 300 px at 16 px) */
@container (max-width:18.75rem){
  .fdays{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fdays > li:nth-child(n+5){display:none;}
  .fday-verdict{-webkit-hyphens:auto; hyphens:auto;}
}
/* wide boards (the home page on desktop, 2026-09-25): the spot's name beside its mornings, taller
   bars, and the small print kept to a readable measure */
@container (min-width:900px){
  .fspot-panel{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); column-gap:var(--s-7); align-items:start;}
  .fspot-head{margin:var(--s-4) 0 0;}
  .fspot-head .fspot-name{font-size:var(--fs-600);}
  .fday-bar{height:88px; width:24px;}
  .fday-surf b{font-size:var(--fs-400);}
}
/* the board also sits inside the guide's article: keep the article's text and list rules out of it */
.board.fcast :is(p, h3, h4){max-width:none;}
.board.fcast :is(.fcast-legend, .fcast-foot){max-width:none;}
/* the small print runs along the whole bottom of wider boards (owner, 2026-09-25) in two columns,
   that balance evenly (three columns split 4/4/2 and looked half-empty) */
@container (min-width:600px){.board.fcast .fcast-foot{column-count:2; column-gap:var(--s-7);}}
.board.fcast :is(ul, ol){padding:0; list-style:none;}
.board.fcast li{margin:0;}
.board.fcast :is(.fcast-legend, .fcast-when, .fcast-foot, .fcast-fail, .fbest-lbl){color:var(--on-night-soft);}
.board.fcast .fcast-title,.board.fcast a.fspot-name{color:var(--on-night);}
.board.fcast .fcast-foot a{color:#8cc7ff;}
@container (min-width:520px){
  .fday-bar{height:68px; width:20px;}
  .fday-wind small{position:static; width:auto; height:auto; overflow:visible; clip:auto;}
}
/* flights card (2026-09-25): fares drawn by the site from flights.php, set like the forecast lines;
   each row and the search open Aviasales in a new tab, so they carry an up-right arrow */
.flights{container-type:inline-size;}
.fares{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.fares > li + li{border-top:1px solid var(--line);}
.fare{display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); color:var(--ink); text-decoration:none; transition:background-color var(--dur) var(--ease-out);}
.fare:hover{background:var(--mist);}
.fare:focus-visible{outline-offset:-3px;}
.fare::after{content:""; width:16px; height:16px; background:var(--swell-600); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dur) var(--ease-out);}
.fare:hover::after{transform:translate(2px,-2px);}
.fare-where{display:grid; gap:3px; min-width:0;}
.fare-city{font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); line-height:1; text-transform:uppercase; letter-spacing:.01em; overflow-wrap:anywhere;}
.fare-meta{font-size:var(--fs-100); line-height:1.3; color:var(--ink-soft);}
.fare-price{display:grid; justify-items:end; line-height:1;}
.fare-price small{font-size:var(--fs-100); color:var(--ink-soft); margin-bottom:2px;}
.fare-price b{font-family:var(--font-display); font-size:var(--fs-600); font-weight:700; font-variant-numeric:tabular-nums;}
.fare-ghost{height:4.25rem; margin:0 var(--s-4); background:linear-gradient(var(--mist),var(--mist)) left center/60% 1.1rem no-repeat, linear-gradient(var(--mist),var(--mist)) right center/18% 1.6rem no-repeat;}
.fares-note{max-width:32em; margin:0; padding:var(--s-2) var(--s-4) 0; font-size:var(--fs-100); color:var(--ink-soft);}
.flights-fail{margin:0; padding:var(--s-3) var(--s-4) 0; font-size:var(--fs-200); color:var(--ink-soft);}
/* phones (2026-10-08, conversion audit #8): three fares, then a "more fares" row that shows the rest
   (forecast.js marks the 4th fare on as .is-more); wide screens list them all beside the search */
.fares-more{appearance:none; display:flex; align-items:center; gap:var(--s-2); width:100%; min-height:48px; margin:0; padding:0 var(--s-4); border:0; border-top:1px solid var(--line); background:transparent; color:var(--swell-600); font:700 var(--fs-200)/1.2 var(--font-body); text-align:left; cursor:pointer;}
.fares-more:hover{color:var(--swell-700); background:var(--mist);}
.fares-more:focus-visible{outline-offset:-3px;}
.fares-more::after{content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (max-width:899px){.fares:not(.is-all) > li.is-more{display:none;}}
@media (min-width:900px){.fares-more{display:none;}}
.fly{margin:var(--s-4) 0 0; padding:var(--s-4) var(--s-4) var(--s-1); border-top:1px solid var(--line); background:var(--mist);}
.fly-title{font-size:var(--fs-400); font-weight:700; text-transform:uppercase; margin:0 0 var(--s-3);}
.fly-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 var(--s-3); align-items:end;}   /* phone: from / out + back / travellers + button */
.fly-grid .field{margin-bottom:var(--s-3);}
.fly-from{grid-column:1 / -1;}
.fly-grid > .field:not(.fly-from):not(.fly-pax){grid-column:span 3;}
.fly-pax{grid-column:span 2;}
.fly input[type="date"]{min-width:0; padding:0 var(--s-2);}   /* Chrome gives date fields a content-based min width */
.fly input::placeholder{color:var(--ink-soft); opacity:1;}
.fly-go{grid-column:span 4; margin-bottom:var(--s-3); width:100%; padding:var(--s-2); background:var(--paper);}   /* 8px sides: "Chercher des vols" fits one line at 375 */
.fly-go::after{content:""; flex:none; width:15px; height:15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.fly-error{margin:0 0 var(--s-3);}
@container (min-width:560px){
  .fare{padding:var(--s-3) var(--s-5);}
  .fare-where{grid-template-columns:minmax(0,13rem) minmax(0,1fr); column-gap:var(--s-5); align-items:baseline;}   /* one city column for every row; long names wrap */
  .fly-grid{grid-template-columns:repeat(4,minmax(0,1fr));}   /* city + both dates, then travellers + button */
  .fly-from{grid-column:span 2;}
  .fly-grid > .field:not(.fly-from):not(.fly-pax),.fly-pax{grid-column:span 1;}
  .fly-go{grid-column:span 3; justify-self:start; width:auto; padding:var(--s-2) var(--s-5);}
}

/* ---------- photo band ---------- */
.photo-band{position:relative; border-radius:var(--r-3); overflow:hidden;}
.photo-band img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.photo-band figcaption{position:absolute; left:var(--s-3); bottom:var(--s-3); background:rgba(7,22,36,.78); color:var(--on-night); font-size:var(--fs-100); font-weight:700; padding:6px var(--s-2); border-radius:var(--r-1);}

/* ---------- FAQ (main.js toggles .open) ---------- */
.faq-list{border-top:2px solid var(--ink); padding-top:var(--s-2);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{appearance:none; width:100%; background:transparent; border:0; text-align:left; font-family:var(--font-body); font-weight:700; font-size:var(--fs-300); line-height:1.35; color:var(--ink);   /* longhands: the static checker misread the var()/1.35 shorthand as 0.72x leading */ padding:var(--s-4) 0; min-height:56px; display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); cursor:pointer;}
/* the toggle: a plus of two bars on a soft tile; opening turns the tile ink and spins the bars into a
   minus (one half-turn, one quarter-turn, 320ms ease-out), closing spins them back */
.faq-q .plus{flex:none; position:relative; width:32px; height:32px; border-radius:var(--r-2); background:var(--line); color:var(--ink); font-size:0; transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);}
/* bars placed absolutely: the hidden "+" in the markup would otherwise take a grid row and push them up */
.faq-q .plus::before,.faq-q .plus::after{content:""; position:absolute; left:9px; top:15px; width:14px; height:2px; border-radius:1px; background:currentColor; transition:transform 320ms var(--ease-out);}
.faq-q .plus::after{transform:rotate(90deg);}
.faq-item.open .faq-q .plus{background:var(--ink); color:var(--paper);}
.faq-item.open .faq-q .plus::before,.faq-item.open .faq-q .plus::after{transform:rotate(180deg);}
@media (hover:hover) and (pointer:fine){.faq-q:hover .plus{background:var(--line-strong);} .faq-item.open .faq-q:hover .plus{background:var(--night-800);}}
/* the answer fades in as it opens (after the row starts to grow), and out at once when it closes */
.faq-a > *{opacity:0; transition:opacity 160ms var(--ease-out);}
.faq-item.open .faq-a > *{opacity:1; transition:opacity 260ms var(--ease-out) 60ms;}
/* the answer opens on grid rows (0fr to 1fr), so nothing animates height */
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease-out);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > *{min-height:0; overflow:hidden; margin:0;}
.faq-a p{color:var(--ink-soft);}
.faq-a > p,.faq-a > div{padding-bottom:0;}
.faq-item.open .faq-a > p,.faq-item.open .faq-a > div{padding-bottom:var(--s-4);}
.faq-a > div > :last-child{margin-bottom:0;}
.faq-a > div > p{margin:0 0 var(--s-3);}

/* ---------- final call to action ---------- */
.close-band{background:var(--night-900); color:var(--on-night); padding:var(--s-8) 0;}
.close-band h2{max-width:18ch;}
.close-band h2:lang(fr){max-width:20ch;}   /* French runs longer: three lines, no article left at a line end */
.close-band p{color:var(--on-night-soft); max-width:52ch; margin-top:var(--s-3);}
.close-band p a{color:#8cc7ff;}   /* the dark closing band: the site's on-night link colour */
.close-band .board{margin-top:var(--s-5); background:var(--night-800); box-shadow:none; border:1px solid var(--night-700);}

/* ---------- footer: two columns on phones ---------- */
.site-footer{background:var(--night-950); color:var(--on-night-soft); padding:var(--s-7) 0 var(--s-5); font-size:var(--fs-200);}
.footer-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-4);}
.footer-brand{grid-column:1 / -1;}
.footer-brand img{height:26px; width:auto; margin-bottom:var(--s-2);}
.footer-brand p{margin:0; max-width:40ch;}
.site-footer h2{font-family:var(--font-display); font-size:var(--fs-200); letter-spacing:.08em; color:var(--on-night); margin-bottom:var(--s-2);}
.site-footer a{color:var(--on-night-soft); text-decoration:none; display:inline-block; padding:4px 0;}
.site-footer a:hover{color:var(--on-night);}
.site-footer ul{list-style:none; margin:0; padding:0; overflow-wrap:anywhere; hyphens:auto;}   /* "Stornierungsbedingungen" at 320px */
.footer-bottom{margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--night-700); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); justify-content:space-between; font-size:var(--fs-100);}
@media (min-width:720px) and (max-width:1279px){.footer-bottom{padding-right:76px;}}   /* the legal row ends left of the WhatsApp button */
/* contact: a full row on phones, and the number and email never break (owner, 2026-09-24);
   on wide screens its column takes the email's width and the others share the rest */
.footer-grid > div:has(a[href^="mailto:"]){grid-column:1 / -1;}
.footer-grid a[href^="mailto:"],.footer-grid a[href^="https://wa.me"]{white-space:nowrap;}
@media (min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr auto;} .footer-brand{grid-column:auto;} .footer-grid > div:has(a[href^="mailto:"]){grid-column:auto;}}

/* ---------- phone sticky bar: the forecast row, one line ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--night-900); color:var(--on-night); border-top:1px solid var(--night-700); padding:var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); transform:translateY(110%); transition:transform 260ms var(--ease-out);}
.sticky-cta.show{transform:none;}
.sticky-cta .info{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.sticky-cta .info > span:first-child{font-size:var(--fs-100); color:var(--on-night-soft); font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.sticky-cta .p{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; font-variant-numeric:tabular-nums;}
.sticky-cta .p s{font-family:var(--font-body); font-size:var(--fs-100); font-weight:400; color:var(--on-night-soft); margin-right:4px;}
.sticky-cta .p small{font-family:var(--font-body); font-size:var(--fs-100); font-weight:400; color:var(--on-night-soft);}
.sticky-cta .btn{min-height:44px; flex:none;}
/* an unfinished booking in this tab (main.js, 2026-10-14): "Continue your booking" takes the whole bar; the Solo
   rate the bar quotes is not that booking's price, and beside the long label it wrapped onto three lines */
.sticky-cta.is-draft .info{display:none;}
.sticky-cta.is-draft .btn{flex:1 1 auto;}
@media (max-width:359px){.sticky-cta .btn{padding-inline:var(--s-3);}}
@media (min-width:980px){.sticky-cta{display:none;}}
@media (min-width:980px){body:has(.sticky-cta.show:not([data-sticky-levels])) .site-footer{padding-bottom:calc(var(--s-5) + 72px);}}   /* home and packages: the content pages' bar (2026-10-09) leaves wide screens as they were */
@media (max-width:979px){body:has(.sticky-cta.show) .site-footer{padding-bottom:calc(var(--cta-h, 61px) + 88px);}}   /* bar + lift + button + a gap: the legal line ends above the raised button */

/* WhatsApp: one quiet round button, lifted above the sticky bar */
.fab-whatsapp{position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:39; width:52px; height:52px; border-radius:50%; background:#25d366; color:#fff; border:0; display:grid; place-items:center; box-shadow:0 6px 18px rgba(7,22,36,.28); transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out);}
/* WhatsApp's own green: the button is recognised before it is read (owner, 2026-09-24).
   :hover restated: the site-wide a:hover outranks .fab-whatsapp and turned the glyph dark blue. */
.fab-whatsapp:hover,.fab-whatsapp:focus-visible{color:#fff; background:#1fbf5b;}
.fab-whatsapp svg{width:28px; height:28px;}
.fab-whatsapp.is-hidden{opacity:0; pointer-events:none; transform:translateY(8px);}
.fab-whatsapp.is-raised{transform:translateY(calc(-1 * var(--cta-h, 61px) - 7px));}   /* sits 7px above the bar, whatever its height */
@media (min-width:980px){.fab-whatsapp.is-raised{transform:none;}}
/* a price row passing under it (main.js, 2026-10-09): out of sight and out of the tab order until the row has gone */
.fab-whatsapp.is-tucked{opacity:0; visibility:hidden; pointer-events:none; transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s 220ms;}

/* ---------- consent bar (built by main.js) ---------- */
/* 2026-10-14 (owner: "accept or decline"): one sentence and two buttons of equal weight, the same class,
   size and style; neither is filled, so neither reads as the default. As small as it gets on a phone. */
.consent-bar{position:fixed; left:var(--s-2); right:var(--s-2); bottom:var(--s-2); z-index:90; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow-2); padding:var(--s-3); font-size:var(--fs-100); line-height:1.45; max-width:30rem; transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);}
.consent-bar.is-leaving{opacity:0; transform:translateY(8px);}
.consent-bar p{margin:0 0 var(--s-2);}
.consent-bar a{color:var(--swell-700); font-weight:700;}
.consent-actions{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);}
.consent-btn{min-height:44px; padding:0 var(--s-3); border-radius:var(--r-2); font:700 var(--fs-200)/1.2 var(--font-body); cursor:pointer; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);}
.consent-btn:focus-visible{outline:3px solid var(--swell-400); outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.consent-btn:hover{background:var(--mist);}}
@media (min-width:720px){.consent-bar{left:auto; right:var(--s-5); bottom:var(--s-5); padding:var(--s-4);}}

/* ---------- nav: where you are ---------- */
.nav-links > a[aria-current="page"]{color:#8cc7ff; box-shadow:inset 0 -2px 0 var(--swell-400);}
.mobile-menu > a[aria-current="page"]{color:#8cc7ff;}

/* ---------- inner-page hero: copy, then the board, on one night band ---------- */
.page-hero{padding:var(--s-5) 0 var(--s-6);}
.page-hero .wrap{display:grid; gap:var(--s-5);}
.crumbs{display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-100); color:var(--on-night-soft); margin:0 0 var(--s-3);}
.crumbs a{color:var(--on-night-soft);}
.crumbs a:hover{color:var(--on-night);}
.chip-deal{display:inline-block; background:var(--sun); color:var(--night-900); font:700 var(--fs-100)/1.2 var(--font-body); letter-spacing:.01em; padding:6px var(--s-2); border-radius:var(--r-1); margin-bottom:var(--s-3);}
.page-hero h1{font-size:clamp(2.4rem, 1.5rem + 4.4vw, 4.4rem); line-height:.92;}
/* accented capitals stand taller than the caps (Barlow Condensed 700: caps .70em, É/À .88em,
   Ä/Ö/Ü .92em), so at .9 leading they touch the line above. French, Spanish and German display
   lines get 1.0 (clearance .08em at the tallest); English keeps its tight set. */
:is(.hero, .page-hero, .art-hero) h1:is(:lang(fr), :lang(es), :lang(de)){line-height:1;}
@media (min-width:980px){.page-hero:has(.hero-photo) h1:is(:lang(fr), :lang(es), :lang(de)){font-size:clamp(2.9rem, .4rem + 4vw, 3.4rem);}}   /* the longest headlines: 5-6 balanced lines, buttons above the fold */
.page-hero .lead{color:var(--on-night-soft); margin:var(--s-3) 0 0; max-width:52ch;}
.page-hero .lead a{color:#8cc7ff;}   /* the dark hero: the site's on-night link colour, not swell-600 */
.page-hero .board{background:var(--night-800); border:1px solid var(--night-700); box-shadow:none;}
@media (min-width:980px){
  .page-hero{padding:var(--s-7) 0;}
  .page-hero .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s-7); align-items:center;}
  .page-hero .wrap:has(> .board){align-items:start;}
}

.hero-photo{margin:0 calc(-1 * var(--s-4)) calc(-1 * var(--s-6)); position:relative; overflow:hidden;}
@media (min-width:720px){.hero-photo{margin:0 calc(-1 * var(--s-6)) calc(-1 * var(--s-6));}}
@media (min-width:980px){
  .page-hero:has(.hero-photo){position:relative; min-height:520px; display:flex; align-items:center;}
  .page-hero:has(.hero-photo) .wrap{width:100%;}
  .page-hero .hero-photo{position:absolute; top:0; right:0; bottom:0; left:52%; margin:0;}
  .page-hero .hero-photo picture{position:absolute; inset:0;}
  .page-hero .hero-photo img{width:100%; height:100%; aspect-ratio:auto; object-fit:cover;}
  .page-hero .hero-photo figcaption{z-index:1;}
}
.hero-photo img{width:100%; aspect-ratio:3/2; object-fit:cover;}
/* the in-focus subject stands at the right of the square yoga photo: crop from the right, a little high */
.hero-photo-right img{object-position:100% 30%;}
.hero-photo figcaption{position:absolute; left:var(--s-3); bottom:var(--s-3); background:rgba(7,22,36,.78); color:var(--on-night); font-size:var(--fs-100); font-weight:700; padding:6px var(--s-2); border-radius:var(--r-1);}

/* the stay control: 3 to 14 nights, re-prices every total from the engine's rates */
.stay{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-4); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--night-700);}
.stay-step{display:flex; align-items:center; background:var(--night-950); border:1px solid var(--night-700); border-radius:var(--r-2); padding:3px;}
.stay-step button{appearance:none; width:44px; height:44px; border:0; border-radius:6px; background:transparent; color:var(--on-night); font:600 1.5rem/1 var(--font-body); cursor:pointer;}
.stay-step button:hover:not(:disabled){background:var(--night-800);}
.stay-step button:disabled{color:var(--night-700); cursor:default;}
.stay-step output{min-width:6.5em; text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); font-variant-numeric:tabular-nums;}
/* phones: the stepper spans the board like the level chooser above it, the count centred between - and + */
@media (max-width:719px){.stay-step{flex:1 1 100%;} .stay-step output{flex:1;}}
.stay-note{flex-basis:100%; margin:0; font-size:var(--fs-100); color:var(--on-night-soft);}
.stay-note a{color:#8cc7ff;}

/* packages on the board: one forecast row each */
.fc-pack + .fc-pack{border-top:1px solid var(--night-700);}
.fc-pack .fc-row{padding-bottom:var(--s-3);}
.fc-room{font-size:var(--fs-200); color:var(--on-night-soft);}
.fc-rate > span[data-level-price]{display:contents;}
.fc-pack .fc-rate b{font-size:clamp(2.2rem, 1.8rem + 2vw, 2.8rem);}
.fc-pack .fc-actions{align-items:center; gap:var(--s-2) var(--s-4);}
.fc-pack .fc-actions .btn{flex:0 0 auto; min-height:44px;}
/* Group & Family's two tiers on the packages board (2026-10-14): each tier is a rate + total row of the fc-row grid */
.fc-pack-tiers .fc-tier{display:contents;}
.fc-pack-tiers .fc-rate .tier-n{order:0; flex-basis:100%; color:var(--on-night); margin-bottom:2px;}
.fc-pack-tiers .fc-tier + .fc-tier .fc-rate{margin-top:var(--s-2);}

/* ---------- every package includes: one list, said once ---------- */
.includes{display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; border-top:1px solid var(--line);}
.includes li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); align-items:start;}
.includes svg{width:22px; height:22px; color:var(--ink); margin-top:1px;}
.includes b{display:block;}
.includes span{color:var(--ink-soft); font-size:var(--fs-200);}
@media (min-width:900px){.includes{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-7);}}

/* ---------- a package: photo, what differs, its price ---------- */
.pkg{display:grid; gap:var(--s-5);}
.pkg figure{margin:0; position:relative; border-radius:var(--r-3); overflow:hidden;}
.pkg figure img{width:100%; aspect-ratio:2/1; object-fit:cover;}
.pkg figcaption{position:absolute; left:var(--s-3); bottom:var(--s-3); background:rgba(7,22,36,.78); color:var(--on-night); font-size:var(--fs-100); font-weight:700; padding:6px var(--s-2); border-radius:var(--r-1);}
.pkg h2{margin-bottom:var(--s-2);}
.pkg-sub{margin:0 0 var(--s-3); font-size:var(--fs-200); font-weight:700; color:var(--ink-soft);}
.pkg-lede{color:var(--ink-soft);}
.pkg-diff{margin:0 0 var(--s-5); border-top:1px solid var(--line);}
.pkg-diff div{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); font-size:var(--fs-200);}
.pkg-diff dt{font-weight:700;}
.pkg-diff dd{margin:0; color:var(--ink-soft);}
/* its price, one line on daylight: rate at your level, the stay total, Book */
.pkg-go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4);}
.pkg-go p{flex:1 1 16rem; margin:0; font-size:var(--fs-200); color:var(--ink-soft);}
.pkg-go s{color:var(--ink-soft); margin-right:4px;}
.pkg-go b{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; color:var(--ink);}
.pkg-go .chip-off{margin:0 2px 0 6px; vertical-align:baseline;}

@media (min-width:900px){
  .pkg{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); align-items:center;}
  .pkg.flip figure{order:2;}
  .pkg figure img{aspect-ratio:4/3;}
}
/* the beach lesson keeps the coach's head in the phones' 2:1 crop */
.pkg figure img.pkg-pic-top{object-position:50% 20%;}

/* packages, desktop (conversion audit #13, 2026-10-10): a tall photo of the crew in the copy column
   under the lead, so the first screen has people beside the prices. It grows into the column's free
   height (it never makes the hero taller than the board) but no narrower than about 2:3, so all four
   surfers stay in the frame; where the board is taller still, the photo stays in view (sticky under
   the nav) while the board scrolls, and comes to rest level with the board's foot.
   Its size comes from the layout, never from the image (no shift); its <source>s only match from
   980px, so phones, where it is hidden, fetch nothing. */
.pk-photo{display:none;}
@media (min-width:980px){
  .page-hero:has(.pk-photo){overflow:clip;}   /* .hero's overflow:hidden would make the hero the sticky photo's scrollport */
  .page-hero .wrap > .pk-copy{align-self:stretch; display:flex; flex-direction:column; container-type:inline-size;}
  .pk-copy > .chip-deal{align-self:flex-start;}
  .pk-copy > .lead{margin-bottom:var(--s-6);}
  .pk-photo{display:block; position:sticky; top:calc(60px + var(--s-5)); flex:1 1 0; min-height:20rem; max-height:145cqw; margin:0; border-radius:var(--r-3); overflow:hidden; background:var(--night-800);}
  .pk-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .pk-photo figcaption{position:absolute; left:var(--s-3); bottom:var(--s-3); background:rgba(7,22,36,.78); color:var(--on-night); font-size:var(--fs-100); font-weight:700; padding:6px var(--s-2); border-radius:var(--r-1);}
}

/* ---------- add-ons, as rows ---------- */
.addons{border-top:1px solid var(--line);}
@media (min-width:720px){.addons{max-width:45rem;}}   /* each price within ~450px of its name (UX audit 2026-10-14, proximity) */
.addon{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-1) var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); align-items:baseline;}
.addon h3{font-size:var(--fs-400); text-transform:uppercase;}
.addon p{margin:0; grid-column:1; font-size:var(--fs-200); color:var(--ink-soft);}
.addon .cost{grid-column:2; grid-row:1 / span 2; text-align:right; font-family:var(--font-display); font-weight:700; font-size:var(--fs-600); font-variant-numeric:tabular-nums;}
.addon .cost small{display:block; font-family:var(--font-body); font-weight:400; font-size:var(--fs-100); color:var(--ink-soft);}
.addon .cost .btn-link{font-family:var(--font-body); font-size:var(--fs-300);}

/* ---------- how booking works: three numbered steps on the night band ---------- */
.steps{list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--night-700); counter-reset:step;}
.steps li{display:grid; grid-template-columns:3rem minmax(0,1fr); align-content:start; gap:var(--s-1) var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--night-700); counter-increment:step;}
.steps li::before{content:counter(step, decimal-leading-zero); grid-row:1 / span 2; font-family:var(--font-display); font-weight:700; font-size:var(--fs-600); line-height:1; color:var(--on-night); font-variant-numeric:tabular-nums;}
.steps h3{font-size:var(--fs-400); text-transform:uppercase; color:var(--on-night);}
.steps p{margin:0; color:var(--on-night-soft); font-size:var(--fs-200);}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s-6); border-top:0;} .steps li{border-bottom:0; border-top:2px solid var(--night-700);} .steps{grid-template-rows:auto auto;} .steps li{grid-row:span 2; grid-template-rows:subgrid;}}   /* titles and texts on shared rows */

/* ---------- surf & yoga: the teacher beside the deck, the day as a sequence ---------- */
.hero-rate{margin:var(--s-4) 0 0;}
.hero-rate b{font-size:clamp(2.2rem, 1.8rem + 2vw, 2.8rem);}
.teacher{display:grid; gap:var(--s-5);}
.teacher-photo{margin:0; border-radius:var(--r-3); overflow:hidden;}
.teacher-photo img{width:100%; aspect-ratio:4/3; object-fit:cover;}
@media (min-width:900px){.teacher{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s-7); align-items:center;}}
.day{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--night-700);}
.day li{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:var(--s-1) var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--night-700);}
.day-when{grid-row:1 / span 2; font-family:var(--font-display); font-weight:700; font-size:var(--fs-400); text-transform:uppercase; color:var(--on-night);}
.day h3{font-size:var(--fs-400); text-transform:uppercase; color:var(--on-night);}
.day p{margin:0; font-size:var(--fs-200); color:var(--on-night-soft);}
.day a{color:#8cc7ff;}
.day li:last-child .day-when{color:var(--sun);}
@media (min-width:980px){
  .day{grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(3,auto); gap:0 var(--s-4); border-top:0;}
  .day li{grid-row:span 3; grid-template-rows:subgrid;}   /* time, title, text on shared rows: every text starts at one height */
  .day li{grid-template-columns:minmax(0,1fr); align-content:start; border-bottom:0; border-top:2px solid var(--night-700); padding-top:var(--s-3);}
  .day-when{grid-row:auto;}
  .day li:last-child{border-top-color:var(--sun);}
}
.prose .includes-link{padding:var(--s-4); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); color:var(--ink);}

/* ---------- the surf guide: a long read with the breaks board in the middle ---------- */
.keyfacts-night div{border-top-color:var(--night-700);}
.keyfacts-night b{color:var(--on-night);}
.keyfacts-night span{color:var(--on-night-soft);}
.page-hero .keyfacts{margin:0;}
.toc-band{position:sticky; top:60px; z-index:30; border-bottom:1px solid var(--line); background:var(--paper);}
.toc-band ~ .close-band{position:relative; z-index:31;}   /* the closing band slides over the chip row instead of under it */
.tour-chips.toc{margin:0; padding:var(--s-2) var(--s-7) var(--s-2) 2px;}   /* end room: the row fades out over its last 48px */
.guide{padding-top:var(--s-5);}
.guide-article{max-width:68ch; margin-left:auto; margin-right:auto;}
.guide-article h2{font-size:clamp(var(--fs-500), 1.2rem + 1.6vw, var(--fs-700)); margin:var(--s-7) 0 var(--s-3); scroll-margin-top:130px;}
.guide-article h2:first-child{margin-top:0;}
.guide-article ul{padding-left:1.2em; color:var(--ink-soft);}
.guide-article li{margin-bottom:var(--s-2);}
.guide-article blockquote{margin:var(--s-6) 0; padding:var(--s-3) 0 0; border-top:2px solid var(--ink); font-family:var(--font-display); font-weight:600; font-size:var(--fs-500); line-height:1.3; color:var(--ink);}
.season-box{margin:var(--s-4) 0;}
.season-box .season{margin-top:0;}
/* a note pinned to a real photo, the Forecast's own annotation */
.pin-photo{position:relative; margin:var(--s-5) auto; max-width:900px; border-radius:var(--r-3); overflow:hidden;}
.pin-photo img{width:100%; aspect-ratio:4/3; object-fit:cover;}
@media (min-width:720px){.pin-photo img{aspect-ratio:16/9;}}
.pin{position:absolute; left:var(--s-3); right:var(--s-3); bottom:var(--s-3); display:flex; gap:var(--s-2); align-items:baseline; background:var(--night-900); color:var(--on-night-soft); font-size:var(--fs-200); padding:var(--s-2) var(--s-3); border-radius:var(--r-2); max-width:24rem;}
.pin b{font-family:var(--font-display); font-size:var(--fs-400); text-transform:uppercase; color:var(--on-night); white-space:nowrap;}
.pin::before{content:""; position:absolute; left:var(--s-5); top:-10px; border:10px solid transparent; border-top:0; border-bottom-color:var(--night-900);}
/* the breaks board: level, type, the morning numbers, the note */
.breaks{display:grid; gap:var(--s-5); max-width:1000px; margin:0 auto;}
.brk-level{display:inline-flex; align-items:center; gap:var(--s-2); margin:0 0 var(--s-2); font-weight:700; font-size:var(--fs-200); letter-spacing:.04em; text-transform:uppercase;}
.brk-level::before{content:""; width:10px; height:10px; border-radius:2px; background:currentColor;}
.lvl-first .brk-level{color:#1f7a55;}
.lvl-int .brk-level{color:var(--ink);}
.lvl-adv .brk-level{color:#a6401f;}
.lvl-adv .brk-level::before{border-radius:50%;}
.lvl-int .brk-level::before{transform:rotate(45deg);}
.brk-group{border-top:2px solid var(--ink);}
.brk-group .brk-level{margin-top:var(--s-3);}
.brk{border-bottom:1px solid var(--line); padding:var(--s-4) 0; display:grid; gap:var(--s-2);}
.brk:last-child{border-bottom:0;}
.brk-head h3{font-size:var(--fs-500); text-transform:uppercase;}
.brk-head h3 a{color:inherit; text-decoration-color:var(--swell-400);}
.brk-type{margin:2px 0 0; font-size:var(--fs-200); color:var(--ink-soft);}
.brk-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 var(--s-3); align-items:start;}
.brk-rate{grid-column:2; grid-row:1 / span 2; margin:0; text-align:right; font-size:var(--fs-100); color:var(--ink-soft); display:grid; justify-items:end; gap:2px;}
.brk-rate b{font-size:var(--fs-200); color:var(--ink);}
.brk-data{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2) var(--s-3); margin:0; padding:var(--s-2) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.brk-data dt{font-size:var(--fs-100); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
.brk-data dd{margin:0; font-weight:700; font-size:var(--fs-200);}
.brk-note{margin:0; font-size:var(--fs-200); color:var(--ink-soft);}
.rate10{display:inline-flex; gap:2px;}
.rate10 i{width:5px; height:12px; border-radius:1px; background:var(--line);}
.rate10 i.on{background:var(--ink);}
@media (min-width:900px){
  .brk{grid-template-columns:14rem minmax(0,1fr); gap:var(--s-3) var(--s-5);}
  .brk-data{border-bottom:0;}
  .brk-head{grid-template-columns:minmax(0,1fr);}
  .brk-rate{grid-column:1; grid-row:auto; justify-items:start; text-align:left; margin-top:var(--s-2);}
  .brk-note{grid-column:2;}
  .brk-head{grid-row:1 / span 2; align-content:start;}
}
.guide-row{max-width:1000px; margin:var(--s-6) auto 0;}

/* ---------- journal: articles and the index ---------- */
.art-hero .wrap{grid-template-columns:minmax(0,1fr) !important; max-width:860px;}
.art-hero h1{font-size:clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height:.95;}
.art-meta{margin:var(--s-3) 0 0; font-size:var(--fs-200); color:var(--on-night-soft);}
.art-band{padding-top:var(--s-5); padding-bottom:var(--s-6);}
.art{max-width:68ch; margin:0 auto;}
.art > p,.art li{color:var(--ink-soft); font-size:1rem; line-height:1.65;}
.art > p:first-of-type{color:var(--ink);}
.art h2{font-size:clamp(var(--fs-500), 1.2rem + 1.6vw, var(--fs-700)); margin:var(--s-6) 0 var(--s-2);}
.art p{margin-bottom:var(--s-3);}
/* articles: the text shares one centred reading column (32rem, about 70 characters at 16px);
   photos and tables keep the full column and break out either side of it */
.art > p,.art > h2,.art > ul,.art > blockquote,.art > .faq-list{max-width:32rem; margin-left:auto; margin-right:auto;}
.art h3{margin:var(--s-5) 0 var(--s-2); font-size:var(--fs-500);}
.art ul,.art ol{padding-left:1.2em;}
.art li{margin-bottom:var(--s-2);}
.art a{color:var(--swell-600);}
.art blockquote{margin:var(--s-6) auto; padding:var(--s-3) 0 0; border-top:2px solid var(--ink); font-family:var(--font-display); font-weight:600; font-size:var(--fs-500); line-height:1.3;}
.art-fig{margin:0 0 var(--s-5);}
.art-fig img{width:100%; border-radius:var(--r-3); aspect-ratio:3/2; object-fit:cover;}
.art-fig figcaption{margin-top:var(--s-2); font-size:var(--fs-100); color:var(--ink-soft);}
.table-scroll{overflow-x:auto; margin:var(--s-4) 0;}
.art-table{width:100%; border-collapse:collapse; font-size:var(--fs-200); font-variant-numeric:tabular-nums;}
.art-table th,.art-table td{text-align:left; padding:var(--s-2) var(--s-3) var(--s-2) 0; border-bottom:1px solid var(--line); vertical-align:top;}
.art-table thead th{font-size:var(--fs-100); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--ink);}
.art-table td:first-child,.art-table th:first-child{font-weight:700; color:var(--ink);}
.art .faq-list{margin-top:var(--s-3);}

.art-go{padding:var(--s-5) 0;}
.art-row{max-width:860px; margin:0 auto;}
.reads{list-style:none; margin:var(--s-4) 0; padding:var(--s-2) 0 0; border-top:1px solid var(--line);}
.reads li{border-bottom:1px solid var(--line);}
.reads a{display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); min-height:56px; padding:var(--s-2) 0; font-weight:700; color:var(--ink); text-decoration:none;}
.reads a::after{content:""; flex:none; width:20px; height:20px; background:var(--swell-600); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.reads a:hover{color:var(--swell-700);}
.reads-band h2{font-size:var(--fs-600);}
.feature{display:grid; gap:var(--s-4); text-decoration:none; color:var(--ink); margin-bottom:var(--s-6);}
.feature figure{margin:0; border-radius:var(--r-3); overflow:hidden;}
.feature img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform 400ms var(--ease-out);}
.feature:hover img{transform:scale(1.02);}
.feature h2{font-size:clamp(var(--fs-600), 1.3rem + 2vw, var(--fs-800)); margin:var(--s-2) 0 var(--s-3);}
.feature p{color:var(--ink-soft);}
@media (min-width:900px){.feature{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s-6); align-items:center;}}
.rep-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:0; font-size:var(--fs-100); color:var(--ink-soft);}
.tag{display:inline-block; padding:2px var(--s-2); border:1px solid transparent; border-radius:999px; font-weight:700; color:var(--ink);}   /* no outline: a label, not a chip to tap (2026-10-14) */
.tag-lvl{background:var(--mist); border-color:var(--mist);}
.reports-list{list-style:none; margin:0; padding:0;}
.reports-list li:first-child{border-top:2px solid var(--ink);}   /* the rule sits on the first row, whose link carries the 16px inset */
.reports-list li{border-bottom:1px solid var(--line);}
.reports-list a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-1) var(--s-3); padding:var(--s-4) 0; color:var(--ink); text-decoration:none;}
.reports-list .rep-meta{grid-column:1 / -1;}
.rep-title{font-weight:700; font-size:var(--fs-300); line-height:1.35;}
.rep-read{font-size:var(--fs-100); color:var(--ink-soft); align-self:end; white-space:nowrap;}
.reports-list a:hover .rep-title{color:var(--swell-700);}
/* 2026-10-14 (UX audit, similarity): the same swell-blue arrow as .reads a, after the reading time, so a touch screen sees a link too */
.rep-read::after{content:""; display:inline-block; width:20px; height:20px; margin-left:var(--s-2); vertical-align:-6px; background:var(--swell-600); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (min-width:900px){.reports-list a{grid-template-columns:18rem minmax(0,1fr) auto; align-items:center;} .reports-list .rep-meta{grid-column:1;}}

/* ---------- FAQ page: five groups of 56px+ rows, a sticky jump menu ---------- */
.faq-page .faq-group{max-width:820px; margin:0 auto var(--s-7); scroll-margin-top:130px;}
.faq-page .faq-group:last-child{margin-bottom:0;}
.faq-page .faq-group > h2{font-size:var(--fs-600); margin-bottom:var(--s-3);}
.faq-page .faq-item{scroll-margin-top:130px;}
.faq-page .faq-item > h3,.art .faq-item > h3{display:contents;}
.faq-page .faq-a ul{padding-left:1.2em; color:var(--ink-soft);}
.faq-item:target{background:var(--mist); box-shadow:-12px 0 0 var(--mist), 12px 0 0 var(--mist);}

/* ---------- legal pages: the full text, a jump index ---------- */
.legal-grid{display:grid; gap:var(--s-5);}
.legal .art h2{scroll-margin-top:84px; font-size:var(--fs-500);}
.legal-toc{background:var(--mist); border-radius:var(--r-3); padding:var(--s-3) var(--s-4); align-self:start;}
.legal-toc summary{font-weight:700; min-height:44px; display:flex; align-items:center; cursor:pointer;}
.legal-toc ol{margin:var(--s-2) 0 0; padding-left:0; list-style:none; columns:1; font-size:var(--fs-200);}
.legal-toc li{break-inside:avoid;}
.legal-toc a{display:block; padding:6px 0; color:var(--ink); text-decoration:none;}
.legal-toc a:hover{color:var(--swell-700);}
@media (min-width:980px){.legal-grid{grid-template-columns:18rem minmax(0,1fr); gap:var(--s-7);} .legal-grid:not(:has(> .legal-toc)){grid-template-columns:minmax(0,1fr);} .legal-toc{position:sticky; top:84px; max-height:calc(100svh - 110px); overflow:auto;}}

/* ---------- photo tour, grouped by space (accommodation) ---------- */
.tour-chips{display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none; margin:0 0 var(--s-5); padding:2px var(--s-7) 2px 2px; list-style:none; -webkit-mask:linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent); mask:linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent);}
.tour-chips::-webkit-scrollbar{display:none;}
.tour-chips li{display:flex; flex:none;}
.tour-chips a{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-4); border:1.5px solid var(--line-strong); border-radius:999px; color:var(--ink); font-weight:700; font-size:var(--fs-200); text-decoration:none; background:var(--paper);}
.tour-chips a:hover{border-color:var(--ink);}
.tour-row{display:grid; grid-auto-flow:column; grid-auto-columns:66%; gap:var(--s-2); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:var(--s-2);}
.tour-row figure{margin:0; scroll-snap-align:start; scroll-margin-top:84px; min-width:0;}
.tour-row img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-2); background:var(--line);}
.tour-row figcaption{margin-top:6px; font-size:var(--fs-100); line-height:1.35; color:var(--ink-soft); text-wrap:pretty;}
.tour-row figcaption b{color:var(--ink);}
@media (min-width:900px){.tour-row{grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; gap:var(--s-4) var(--s-3);} .tour-row img{aspect-ratio:4/3;}}

/* rooms as rows: layout, bathroom, which package, the upgrade per night */
.rooms{border-top:1px solid var(--line);}
.room{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-3) var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); align-items:start;}
.room img{width:96px; height:96px; object-fit:cover; border-radius:var(--r-2);}
.room h3{font-size:var(--fs-500); text-transform:uppercase;}
.room p{margin:var(--s-1) 0 0; font-size:var(--fs-200); color:var(--ink-soft);}
.room .facts-line{color:var(--ink); font-weight:700;}
.room .price-note{grid-column:1 / -1; margin:0; padding:var(--s-2) var(--s-3); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); font-size:var(--fs-200); color:var(--ink);}
@media (min-width:900px){.room{grid-template-columns:200px minmax(0,1fr) 18rem; gap:var(--s-5);} .room img{width:200px; height:150px;} .room .price-note{grid-column:3; grid-row:1;}}

/* amenities: five, then the rest behind "show all" */
.amen{display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line);}
.amen li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line); align-items:center; font-weight:700; font-size:var(--fs-200);}
.amen svg{width:24px; height:24px; color:var(--ink);}
@media (min-width:720px){.amen{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-6);}}
.more-list{margin-top:var(--s-3);}
.more-list summary{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-4); border:1.5px solid var(--line-strong); border-radius:var(--r-2); font-weight:700; cursor:pointer; list-style:none;}
.more-list summary::-webkit-details-marker{display:none;}
.more-list[open] summary{margin-bottom:var(--s-3);}
.gtk{width:100%; border-collapse:collapse; font-size:var(--fs-200);}
.gtk th,.gtk td{text-align:left; vertical-align:top; padding:var(--s-3) 0; border-bottom:1px solid var(--line);}
.gtk th{width:9rem; padding-right:var(--s-4); font-weight:700;}
.gtk td{color:var(--ink-soft);}

/* a band's price line: from-rates on the night board, then Book */
.price-strip{display:grid; margin:var(--s-5) 0 0; border-top:1px solid var(--night-700);}
.price-strip .fc-row{padding:var(--s-4) 0; border-bottom:1px solid var(--night-700);}
.price-strip .fc-rate b{font-size:var(--fs-700);}
.price-strip .btn{grid-column:1 / -1; min-height:44px;}
@media (min-width:900px){
  .price-strip .fc-row{grid-template-columns:14rem minmax(0,1fr) 8rem 14rem; align-items:center;}
  .price-strip .fc-who{grid-column:1; flex-direction:column; align-items:flex-start; gap:var(--s-1);}
  .price-strip .fc-row:lang(fr){grid-template-columns:15rem minmax(0,1fr) 8rem 14rem;}   /* 'Chambre privée avec salle de bain' on one line */
  .price-strip .btn{grid-column:4;}
}

/* ---------- forms (book, contact) ---------- */
.field{display:grid; align-content:start; gap:6px; margin:0 0 var(--s-4); min-width:0;}   /* start: a field stretched by a taller neighbour must not stretch its input */
.field > label,.bk-label{font-weight:700; font-size:var(--fs-200); color:var(--ink);}
.field input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),.field select,.field textarea{width:100%; min-height:48px; padding:0 var(--s-3); border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); color:var(--ink); font:400 var(--fs-300)/1.3 var(--font-body);}
.field textarea{padding:var(--s-3); min-height:120px; resize:vertical;}
@media (max-width:359px){.field select{font-size:1rem;}}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--swell-400); outline-offset:1px; border-color:var(--swell-600);}
.field-row{display:grid; gap:0 var(--s-4);}
@media (min-width:600px){.field-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
.hint{font-size:var(--fs-200); color:var(--ink-soft);}
.error-msg,.bk-cal-error{color:#b3261e; font-size:var(--fs-200); font-weight:700; margin:0;}
.error-msg{display:none;}
.has-error .error-msg{display:block;}
.has-error .error-msg:empty,.bk-cal-error:empty{display:none;}
.has-error input:not([type="radio"]):not([type="checkbox"]),.has-error select,.has-error .bk-seg,.has-error .bk-card,.has-error .bk-dates-btn{border-color:#b3261e;}
.form-status{margin:var(--s-3) 0 0; font-size:var(--fs-200); font-weight:700;}
.form-status:empty{display:none;}
.form-status.is-error{color:#b3261e;}
.form-status.is-success{color:var(--good);}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* contact: WhatsApp first, then the form */
.contact-grid{display:grid; gap:var(--s-6);}
@media (min-width:980px){.contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s-7); align-items:start;} .contact-grid > .board{position:sticky; top:84px;}}   /* from 980: below it the card is too narrow for the FR/ES/DE WhatsApp label */
/* the WhatsApp card, centred (owner, 2026-09-25): heading, one line, the button in WhatsApp green
   (recognition, as on the floating button; dark text keeps 9:1 contrast), then the contact lines */
.contact-grid .board{padding:var(--s-6) var(--s-5); text-align:center;}
.contact-grid .board h2{margin:0; font-size:var(--fs-600); color:var(--on-night);}
.contact-grid .board p{color:var(--on-night-soft);}
.contact-grid .board .wa-lead{max-width:30ch; margin:var(--s-2) auto var(--s-5); font-size:var(--fs-200); line-height:1.5; text-wrap:balance;}
/* inline flow, not flex: when a long label wraps (FR/ES/DE at 320 px) the icon stays at the start
   of the first line and every line is centred, instead of the icon pinned left of a centred block */
.btn-wa{display:inline-block; max-width:100%; min-width:min(100%, 15rem); padding:11px var(--s-3); line-height:1.3; text-align:center; text-wrap:balance; background:#25d366; color:var(--night-900);}
.btn-wa svg{display:inline-block; vertical-align:-4px; margin-right:var(--s-2);}
.btn-wa:hover,.btn-wa:focus-visible{background:#1da851; color:var(--night-900);}
@media (max-width:599px){.contact-grid .board{padding-inline:var(--s-4);}}
@media (min-width:980px){body:has(.contact-grid) .fab-whatsapp{display:none;}}   /* the sticky card's button is always in view */
.contact-lines{list-style:none; margin:var(--s-6) 0 0; padding:var(--s-5) 0 0; border-top:1px solid var(--night-700); display:grid; justify-items:center; gap:var(--s-3); font-size:var(--fs-200);}
.contact-lines a{color:#8cc7ff;}
.contact-lines li{color:var(--on-night-soft); overflow-wrap:anywhere; text-wrap:balance;}   /* the icon flows with the text, so a wrapped address stays centred */
.contact-lines li::before{content:""; display:inline-block; vertical-align:-3px; width:16px; height:16px; margin-right:var(--s-2); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;}
.contact-lines li:has(a[href^="mailto:"])::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center/contain no-repeat;}
.contact-lines li:has(a[href^="tel:"])::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;}
.inquiry{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--s-5) var(--s-4);}
/* 2026-10-14 (UX audit: Miller, Hick): the trip, then how we reach you, each under its own heading; the optional
   fields say so in a lighter weight inside their label */
.inquiry .form-set{border:0; margin:0 0 var(--s-2); padding:0; min-width:0;}
.inquiry .form-set + .form-set{border-top:1px solid var(--line); padding-top:var(--s-4);}
.inquiry legend{float:left; width:100%; padding:0; margin:0 0 var(--s-3); font:700 var(--fs-400)/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.01em; color:var(--ink);}
.inquiry legend + *{clear:both;}
.field > label .opt{font-weight:400; color:var(--ink-soft);}
.inquiry .btn{width:100%;}
.inquiry .fine{margin:var(--s-3) 0 0; text-align:center; font-size:var(--fs-100); color:var(--ink-soft);}

/* ---------- /book: one decision at a time, the price always a tap away ---------- */
.book-hero{padding:var(--s-4) 0 var(--s-5);}
.book-hero h1{font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3rem); line-height:1;}
.book-hero .crumbs{margin-bottom:var(--s-2);}
.book-band{padding:var(--s-5) 0 var(--s-8);}
.bk-grid{display:grid; gap:var(--s-6);}
@media (min-width:980px){.bk-grid{grid-template-columns:minmax(0,1fr) 380px; gap:var(--s-7); align-items:start;}}

/* progress: finished steps restate their choice and can be reopened */
.bk-steps{list-style:none; margin:0 0 var(--s-5); padding:0; display:grid;}
.bk-steps li{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:0 var(--s-3); align-items:center; padding:var(--s-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-200); color:var(--ink-soft); min-width:0;}
.bk-steps-n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 var(--fs-100)/1 var(--font-body); border:1.5px solid var(--line-strong); grid-row:1 / span 2;}
.bk-steps li.is-done{color:var(--ink);}
.bk-steps li.is-done .bk-steps-n{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.bk-steps li.is-current{color:var(--ink); font-weight:700; border-bottom-color:var(--ink);}
.bk-steps li.is-current .bk-steps-n{background:var(--night-900); border-color:var(--night-900); color:var(--on-night);}
.bk-steps-v{grid-column:2; font-weight:400; font-size:var(--fs-100); color:var(--ink-soft); overflow-wrap:anywhere;}
.bk-steps-change{grid-column:3; grid-row:1 / span 2; min-height:44px; font-size:var(--fs-200);}
.bk-steps-change::after{content:none;}
.bk-of{display:block; font-weight:400; font-size:var(--fs-100); color:var(--ink-soft);}
@media (max-width:719px){.bk-steps li.is-todo{display:none;}}
@media (min-width:720px){
  .bk-of{display:none;}
  .bk-steps{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--s-3);}
  /* the summary row takes the slack, so every "Change" pill sits on one line whatever the summary's length (owner, 2026-10-11) */
  .bk-steps li{grid-template-columns:26px minmax(0,1fr); grid-template-rows:auto auto 1fr auto; align-content:stretch; border-bottom:0; border-top:3px solid var(--line); padding-top:var(--s-2);}
  .bk-steps li.is-current{border-top-color:var(--night-900);}
  .bk-steps li.is-done{border-top-color:var(--ink);}
  .bk-steps-n{grid-row:1;}
  .bk-steps-t{grid-column:1 / -1; grid-row:2; margin-top:4px; -webkit-hyphens:auto; hyphens:auto;}   /* the full step width, not 26px less */
  .bk-steps-v{grid-column:1 / -1; grid-row:3; align-self:start; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:break-word;}   /* two lines, then cut (2026-10-09: was one) */
  .bk-steps-change{grid-column:1 / -1; grid-row:4; justify-self:start; min-height:44px;}
}

.bk-step[hidden]{display:none;}
.bk-step > h2{font-size:var(--fs-600); margin:0 0 var(--s-4); outline:none;}
@keyframes bk-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.bk-step.is-entering{animation:bk-in 240ms var(--ease-out) both;}
.bk-q{border:0; margin:0 0 var(--s-5); padding:0; min-width:0;}
.bk-q > legend,.bk-q > .bk-legend{font-weight:700; font-size:var(--fs-300); margin:0 0 var(--s-2); padding:0;}

/* "your conditions" as native radios, the same three segments as the board */
.bk-seg{display:flex; padding:3px; gap:3px; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--r-2);}
.bk-seg label{flex:1 1 0; position:relative; min-width:0;}
.bk-seg input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.bk-seg span{display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 var(--s-2); border-radius:6px; font-weight:700; font-size:var(--fs-200); line-height:1.1; text-align:center; color:var(--ink-soft);}
.bk-seg input:checked + span{background:var(--night-900); color:var(--on-night);}
.bk-seg input:checked + span::before{content:""; flex:none; width:14px; height:14px; background:var(--swell-400); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-seg input:focus-visible + span{outline:3px solid var(--swell-400); outline-offset:2px;}
@media (max-width:719px){.bk-seg input:checked + span::before{position:absolute; top:4px; right:4px; width:11px; height:11px;}}   /* phones: in the corner, so the label keeps its width */
@media (max-width:359px){.bk-seg span{padding:0 4px; font-size:.8125rem;}}
@media (hover:hover) and (pointer:fine){.bk-seg input:not(:checked):hover + span{color:var(--ink); background:var(--mist);}}

/* who's coming: three packages, priced at your level */
.bk-cards{display:grid; gap:var(--s-2);}
@media (min-width:720px){.bk-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
.bk-card{position:relative; display:block; border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); padding:var(--s-3) var(--s-4); cursor:pointer; transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);}
.bk-card input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.bk-card:has(input:checked){border-color:var(--night-900); box-shadow:inset 0 0 0 1.5px var(--night-900);}
.bk-card:has(input:focus-visible){outline:3px solid var(--swell-400); outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.bk-card:hover{border-color:var(--ink);}}
.bk-card-body{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s-3); align-items:center;}
.bk-card-body b{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; text-transform:uppercase; line-height:1.05;}
.bk-card-body small{grid-column:1; font-size:var(--fs-200); color:var(--ink-soft);}
.bk-card-body > b{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.35em; row-gap:2px;}
.bk-card:has(input:checked) .bk-card-body > b::before{margin-right:0; align-self:center;}
.bk-card-tag{display:inline-block; max-width:100%; padding:1px .5em; border-radius:999px; background:var(--mist); color:var(--ink-soft); font:700 var(--fs-100)/1.4 var(--font-body); text-transform:none; white-space:normal;}   /* the package name used after step 1 */
.bk-card-price{grid-column:2; grid-row:1 / span 2; text-align:right; line-height:1.15; font-size:var(--fs-100); color:var(--ink-soft);}
.bk-card-price s{margin-right:4px;}
.bk-card-price b{font-size:var(--fs-500); color:var(--ink);}
.bk-card-price > small{display:block; font-size:var(--fs-100);}
@media (max-width:719px){.bk-card-price > small{max-width:8.5rem; margin-left:auto; text-wrap:balance;}}
@media (max-width:359px){.bk-card-body{grid-template-columns:minmax(0,1fr);} .bk-card-price{grid-column:1; grid-row:auto; text-align:left; margin-top:var(--s-1);} .bk-card-price > small{max-width:none; margin-left:0;}}
@media (min-width:720px){.bk-card-body{grid-template-columns:minmax(0,1fr);} .bk-card-price{grid-column:1; grid-row:auto; text-align:left; margin-top:var(--s-2);}}

/* steppers around the number inputs (the native spinner is tiny on phones) */
.bk-stepper{display:flex; align-items:stretch; gap:var(--s-2); max-width:15rem;}
.bk-stepper > button{flex:0 0 48px; min-height:48px; border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); color:var(--ink); font:600 1.4rem/1 var(--font-body); cursor:pointer;}
.bk-stepper > button:disabled{color:var(--line-strong); cursor:default;}
@media (hover:hover) and (pointer:fine){.bk-stepper > button:hover:not(:disabled){border-color:var(--ink);}}
.field .bk-stepper input{flex:1 1 auto; min-width:0; text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); -moz-appearance:textfield;}
.bk-stepper input::-webkit-outer-spin-button,.bk-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* the party's levels: everyone at their own rate (the same box holds step 3's extras, 2026-10-11) */
.bk-mix,.bk-extras{border:1px solid var(--line); border-radius:var(--r-3); background:var(--paper); padding:var(--s-3) var(--s-4) var(--s-4); margin:0 0 var(--s-4); min-width:0;}
.bk-mix > legend,.bk-extras > legend{font-weight:700; font-size:var(--fs-300); padding:0 var(--s-1);}
.bk-mix > .hint,.bk-extras > .hint{margin:0 0 var(--s-2);}
.bk-mix-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-3); padding:var(--s-2) 0; border-bottom:1px solid var(--line); margin:0;}
.bk-mix-row:last-of-type{border-bottom:0;}
.bk-mix-row > label{font-weight:700; font-size:var(--fs-200);}
.bk-mix-row .bk-stepper,.bk-x .bk-stepper{max-width:10.5rem;}
.bk-mix-row .bk-stepper > button,.bk-x .bk-stepper > button{flex-basis:44px; min-height:44px;}
.bk-mix-row .bk-stepper input,.bk-x .bk-stepper input{flex:1 1 auto; min-width:0; width:100%; min-height:44px; text-align:center; border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); color:var(--ink); font:700 var(--fs-400)/1 var(--font-display); -moz-appearance:textfield;}
.bk-mix-sum{margin:var(--s-2) 0 0; font-size:var(--fs-200); font-weight:700; color:var(--good);}
.bk-mix-sum.is-off{color:#b3261e;}

/* dates: a button on phones that opens the full-screen sheet; inline from 720px */
.bk-dates-btn{display:flex; width:100%; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:60px; padding:var(--s-2) var(--s-4); border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); color:var(--ink); font:700 var(--fs-300)/1.25 var(--font-body); text-align:left; cursor:pointer;}
.bk-dates-btn small{display:block; font-weight:400; font-size:var(--fs-200); color:var(--ink-soft);}
.bk-dates-btn::after{content:""; flex:none; width:22px; height:22px; background:var(--swell-600); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-sheet{display:none;}
.bk-sheet-body{padding:0;}
.bk-sheet-head,.bk-sheet-foot{display:none;}
@media (max-width:719px){
  .bk-sheet.is-open{display:flex; flex-direction:column; position:fixed; inset:0; z-index:95; background:var(--paper);}
  .bk-sheet.is-open .bk-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom:1px solid var(--line);}
  .bk-sheet-head p{margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); text-transform:uppercase; line-height:1.1;}
  .bk-sheet-head small{display:block; font-family:var(--font-body); font-size:var(--fs-100); font-weight:400; text-transform:none; color:var(--ink-soft);}
  .bk-sheet-head button{width:44px; height:44px; border:0; background:transparent; font-size:1.3rem; color:var(--ink); cursor:pointer;}
  .bk-sheet.is-open .bk-sheet-body{flex:1 1 auto; overflow-y:auto; padding:var(--s-4);}
  .bk-sheet.is-open .bk-sheet-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top:1px solid var(--line);}
  .bk-sheet-foot .btn{min-width:9rem;}
  body.bk-sheet-open{overflow:hidden;}
}
@media (min-width:720px){.bk-dates-btn{display:none;} .bk-sheet{display:block;}}

/* the calendar */
.bk-cal-note{font-size:var(--fs-200); color:var(--ink-soft); margin:0 0 var(--s-3);}
.bk-cal-box{max-width:30rem;}
.bk-cal-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);}
.bk-cal-month{margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); text-transform:uppercase;}
.bk-cal-arrow{width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; display:grid; place-items:center;}
.bk-cal-arrow::before{content:""; width:20px; height:20px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-cal-arrow.next::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-cal-arrow:disabled{opacity:.35; cursor:default;}
.bk-cal-season{display:flex; align-items:center; gap:var(--s-2); margin:var(--s-2) 0 var(--s-3); font-size:var(--fs-100); color:var(--ink-soft);}
.bk-cal-season i{flex:none; width:22px; height:10px; border-radius:2px;}
.bk-cal-wd,.bk-cal-d{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px 0;}
.bk-cal-wd span{text-align:center; font-size:var(--fs-100); font-weight:700; color:var(--ink-soft); padding:4px 0;}
.bk-cal-day{min-height:44px; border:0; background:transparent; border-radius:var(--r-2); color:var(--ink); font:600 var(--fs-300)/1 var(--font-body); font-variant-numeric:tabular-nums; cursor:pointer;}
@media (hover:hover) and (pointer:fine){.bk-cal-day:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--ink);}}
.bk-cal-day:disabled{color:#94a6b7; cursor:default;}
.bk-cal-day.is-full{text-decoration:line-through;}
.bk-cal-day.is-stay{background:var(--swell-200); border-radius:0;}
.bk-cal-day.is-start,.bk-cal-day.is-end{background:var(--night-900); color:var(--on-night);}
.bk-cal-day.is-start{border-radius:var(--r-2) 0 0 var(--r-2);}
.bk-cal-day.is-end{border-radius:0 var(--r-2) var(--r-2) 0;}
.bk-cal-day.is-start:only-child,.bk-cal-day.is-start:not(.has-end){border-radius:var(--r-2);}
.bk-cal-legend{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); margin-top:var(--s-3); font-size:var(--fs-100); color:var(--ink-soft);}
.bk-cal-legend i{display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:-1px;}
.bk-cal-legend .sw-stay{background:var(--swell-200);}
.bk-cal-legend .sw-full{background:repeating-linear-gradient(135deg, #94a6b7 0 2px, transparent 2px 5px); border:1px solid #94a6b7;}
.bk-cal-legend .sw-na{border:1px solid #94a6b7;}   /* free beds, but not for this stay's length or party (2026-10-14) */
.bk-cal.is-loading .bk-cal-d{opacity:.5;}
.bk-cal-next{margin-top:var(--s-3);}
.bk-nights-out{margin:var(--s-3) 0 0; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500);}

/* rooms */
.bk-opt{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line);}
.bk-opt-name{font-weight:700;}
.bk-opt-note{font-size:var(--fs-200); color:var(--ink-soft);}
.bk-opt .bk-num{width:5rem; min-height:44px; text-align:center; border:1.5px solid var(--line-strong); border-radius:var(--r-2); font:700 var(--fs-400)/1 var(--font-display);}
.bk-opt input[type="checkbox"],.bk-opt input[type="radio"]{width:24px; height:24px; margin:0; accent-color:var(--night-900); flex:none;}
[data-room-set] .bk-opt{justify-content:flex-start; cursor:pointer;}
[data-room-set] .bk-opt-main{display:grid; gap:2px;}
[data-room-set][hidden]{display:none;}

/* pay: the amount on each option, reassurance and WhatsApp right above the button */
.bk-pay{display:grid; gap:var(--s-2); margin:0 0 var(--s-4); border:0; padding:0; min-width:0;}   /* a fieldset since 2026-09-28 */
.bk-pay label{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s-3); align-items:start; padding:var(--s-3) var(--s-4); border:1.5px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); cursor:pointer;}
.bk-pay label:has(input:checked){border-color:var(--night-900); box-shadow:inset 0 0 0 1.5px var(--night-900);}
.bk-pay input{width:20px; height:20px; margin:3px 0 0; accent-color:var(--night-900);}
.bk-pay b{display:block;}
.bk-pay .amt{display:block; font-family:var(--font-display); font-weight:700; font-size:var(--fs-500); font-variant-numeric:tabular-nums; line-height:1.15;}
.bk-pay .amt small{font-family:var(--font-body); font-weight:400; font-size:var(--fs-200); color:var(--ink-soft);}
/* UX audit 2026-10-14 (loss aversion): when the full refund ends for this stay, under the two options and in the price
   sheet (book.js syncCancel); bold once arrival is under 14 days away and the deposit can no longer come back */
.bk-cancel{margin:var(--s-1) 0 0; font-size:var(--fs-200); line-height:1.45; color:var(--ink);}
.bk-sum-cancel{margin:var(--s-3) 0 0; font-size:var(--fs-200); line-height:1.45; color:var(--on-night);}
.bk-cancel.is-late,.bk-sum-cancel.is-late{font-weight:700;}
.bk-cancel[hidden],.bk-sum-cancel[hidden]{display:none;}
/* a party bigger than the online limit, set back to it, with where to go instead (book.js sayParty) */
.bk-party-note{margin:var(--s-1) 0 0; font-size:var(--fs-200); font-weight:700; color:var(--ink);}
.bk-party-note:empty{display:none;}
.bk-review-title{font-size:var(--fs-400); margin:var(--s-5) 0 var(--s-2); text-transform:uppercase;}
.bk-review{margin:0 0 var(--s-4); border-top:1px solid var(--line);}
.bk-review-row{display:grid; grid-template-columns:minmax(6rem,1fr) 2fr auto; gap:var(--s-3); align-items:baseline; padding:var(--s-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-200);}
.bk-review-row dt{color:var(--ink-soft); font-weight:700;}
.bk-review-row dd{margin:0; overflow-wrap:anywhere;}
.bk-review-change{min-height:44px; font-size:var(--fs-100);}
.bk-review-change::after{content:none;}
/* "Change" is a pill button, easy to spot and to tap (owner, 2026-09-28). UX audit 2026-10-14 (Similarity): an OUTLINE pill
   (no fill, 1.5px ink border, ink text), so the eight pills of the pay step stop being its heaviest marks. The pill is 36px
   tall; ::before keeps the tap area at 44px. button.btn-link (0,1,1) resets buttons, hence the 0,2,1 selectors. */
button.btn-link.bk-steps-change,button.btn-link.bk-review-change{position:relative; justify-content:center; min-height:36px; margin:4px 0; padding:0 var(--s-4); border:1.5px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); font:700 var(--fs-100)/1 var(--font-body); white-space:nowrap; cursor:pointer; transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);}
button.btn-link.bk-steps-change::before,button.btn-link.bk-review-change::before{content:""; position:absolute; inset:-6px -2px;}
@media (hover:hover) and (pointer:fine){button.btn-link.bk-steps-change:hover,button.btn-link.bk-review-change:hover{background:var(--mist); border-color:var(--ink); color:var(--ink);}}
button.btn-link.bk-steps-change:focus-visible,button.btn-link.bk-review-change:focus-visible{border-radius:999px;}
@media (max-width:479px){.bk-review-row{grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s-3); align-items:center;} .bk-review-row dt{grid-column:1; grid-row:1;} .bk-review-row dd{grid-column:1; grid-row:2; overflow-wrap:break-word;} .bk-review-row .bk-review-change{grid-column:2; grid-row:1 / span 2;}}
.bk-assure{list-style:none; margin:0 0 var(--s-3); padding:0; display:grid; gap:var(--s-2); font-size:var(--fs-200); color:var(--ink-soft);}
.bk-assure li{position:relative; padding-left:26px;}
.bk-assure li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; background:var(--good); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
/* a small copy of the WhatsApp button (green disc, white glyph), hung on the first line of a label
   that wraps to two lines on phones; it used to float between them */
.bk-wa{display:inline-flex; align-items:flex-start; gap:var(--s-2); min-height:44px; font-weight:700; color:var(--ink); text-decoration:none;}
.bk-wa svg{flex:none; box-sizing:border-box; width:28px; height:28px; padding:5px; margin-top:calc((1lh - 28px) / 2); border-radius:50%; background:#25d366; color:#fff;}
.bk-wa:hover{color:var(--swell-700);}
.bk-step-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-5);}
.bk-step-actions .btn{min-width:10rem;}
.bk-step-actions [data-back]{min-height:44px; background:transparent; border:0; padding:0; color:var(--swell-600); font:700 var(--fs-300)/1 var(--font-body); cursor:pointer;}
.bk-step-actions [data-back]::before{content:"← ";}
.bk-step-actions > :only-child{margin-left:auto;}

/* 2026-09-28: plain words, one decision at a time, and every choice visibly made */
.bk-lvl-hint{margin:var(--s-2) 0 0; font-size:var(--fs-200); color:var(--ink-soft);}
.bk-card:has(input:checked) .bk-card-body > b::before{content:""; display:inline-block; width:.75em; height:.75em; margin-right:.35em; vertical-align:.02em; background:var(--swell-600); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.bk-card-tiers{display:grid; gap:4px; justify-items:end;}
.bk-tier{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:0 6px;}
.bk-tier-n{font-size:var(--fs-100); font-weight:700; color:var(--ink); white-space:nowrap;}
.bk-card-tiers .bk-tier b{font-size:var(--fs-400);}
@media (min-width:720px){.bk-card-tiers{justify-items:start;} .bk-tier{justify-content:flex-start;}}
@media (max-width:359px){.bk-card-tiers{justify-items:start;} .bk-tier{justify-content:flex-start;}}
.bk-inc{margin:0 0 var(--s-2); padding:var(--s-3) var(--s-4); border:1px solid var(--line); border-radius:var(--r-2); background:var(--mist); font-size:var(--fs-200); color:var(--ink);}
.bk-inc p{margin:0;}
.bk-inc p + p{margin-top:var(--s-2); color:var(--ink-soft);}
.bk-phone{border:0; margin:var(--s-4) 0 0; padding:0; min-width:0;}
.bk-phone > legend{font-weight:700; font-size:var(--fs-300); padding:0; margin-bottom:var(--s-2);}
.bk-phone > .hint{margin:var(--s-2) 0 0;}
.bk-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.bk-suggest{margin:var(--s-1) 0 0; font-size:var(--fs-200); color:var(--ink);}
.bk-suggest[hidden]{display:none;}
.bk-suggest .btn-link{min-height:44px;}
.bk-incl{list-style:none; margin:0 0 var(--s-4); padding:0; display:grid; gap:var(--s-2); font-size:var(--fs-200);}
.bk-incl li{display:flex; gap:var(--s-2); align-items:flex-start;}
.bk-incl li[hidden]{display:none;}
.bk-incl svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--good);}
.bk-help{margin:var(--s-4) 0 0; font-size:var(--fs-200);}
.bk-help a{display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; color:var(--ink-soft); font-weight:700; text-decoration:none;}
.bk-help a:hover{color:var(--ink);}
.bk-help svg{flex:none; box-sizing:border-box; width:24px; height:24px; padding:4px; border-radius:50%; background:#25d366; color:#fff;}
[data-booking][data-at="pay"] .bk-help{display:none;}
.bk-switch-inline{margin:var(--s-4) 0 0; padding:var(--s-3) var(--s-4); border:1.5px solid var(--night-900); border-radius:var(--r-2); background:var(--paper); font-size:var(--fs-200); color:var(--ink);}
.bk-switch-inline[hidden]{display:none;}
.bk-switch-inline button{margin-top:var(--s-2); min-height:44px; padding:0 var(--s-4); border:0; border-radius:var(--r-2); background:var(--night-900); color:var(--on-night); font:700 var(--fs-200)/1 var(--font-body); cursor:pointer;}
@media (min-width:980px){.bk-switch-inline{display:none !important;}}   /* the side card shows it there */
.bk-waves,.fcast-fold{margin:var(--s-4) 0 0; border-top:1px solid var(--line);}   /* the home's fold (2026-10-08) is the same disclosure as /book's */
:is(.bk-waves,.fcast-fold) > summary{display:flex; align-items:center; gap:var(--s-2); min-height:48px; font-weight:700; color:var(--swell-600); cursor:pointer; list-style:none;}
:is(.bk-waves,.fcast-fold) > summary::-webkit-details-marker{display:none;}
:is(.bk-waves,.fcast-fold) > summary::after{content:""; flex:none; width:18px; height:18px; background:currentColor; transition:transform var(--dur) var(--ease-out); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
:is(.bk-waves,.fcast-fold)[open] > summary::after{transform:rotate(90deg);}
.fcast-fold > .fcast{margin-top:var(--s-2);}
.bk-waves .fcast.is-compact{margin-top:0;}
.bk-cal-note.is-alert{color:#b3261e; font-weight:700;}
.bk-cal-warn{margin:0 0 var(--s-3); padding:var(--s-2) var(--s-3); border-radius:var(--r-2); background:#fff4e5; color:#6b3d00; font-size:var(--fs-200);}
.bk-cal-chips{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:0 0 var(--s-3);}
.bk-cal-chips > span{font-size:var(--fs-100); font-weight:700; color:var(--ink-soft);}
.bk-chip{min-height:44px; padding:0 var(--s-4); border:1.5px solid var(--night-900); border-radius:999px; background:var(--paper); color:var(--ink); font:700 var(--fs-200)/1 var(--font-body); cursor:pointer;}
.bk-chip:disabled{border-color:var(--line-strong); color:#94a6b7; cursor:default;}
@media (hover:hover) and (pointer:fine){.bk-chip:not(:disabled):hover{background:var(--mist);}}
.bk-cal-day.is-short{color:#94a6b7;}
.bk-cal-day.is-long{color:var(--ink-soft);}
.bk-cal-note.is-info{color:var(--ink); font-weight:700;}
[data-party="guests"].is-solo > label,[data-party="guests"].is-solo .bk-stepper{display:none;}   /* Just me: the step names the party, nothing to set */
.bk-bar .btn:disabled{opacity:.75; cursor:progress;}
@media (max-width:979px){
  /* one action per screen: the phone bar's button is the Continue (and the pay button on the last step) */
  .bk-step-actions [data-next],.bk-step-actions [data-submit]{display:none;}
}

/* the summary: the forecast row, then the price sheet. A side card on desktop,
   a bottom sheet behind the phone bar */
.bk-summary{padding:0; overflow:hidden;}
.bk-sum-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--night-700);}
.bk-sum-head h2{font-size:var(--fs-400); color:var(--on-night); text-transform:uppercase; letter-spacing:.02em;}
.bk-sum-close{display:none; width:44px; height:44px; border:0; background:transparent; color:var(--on-night); font-size:1.2rem; cursor:pointer;}
.bk-sum-body{padding:var(--s-4);}
.bk-sum-who{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:baseline; margin:0 0 var(--s-2);}
.bk-sum-rate{margin:0 0 var(--s-3);}
.bk-sum-rate .fc-rate b{font-size:clamp(2.2rem, 1.8rem + 2vw, 2.6rem);}
.bk-sum-tip{margin:0; font-size:var(--fs-200); color:var(--on-night-soft); text-wrap:pretty;}   /* no lone « prix. » on a last line */
.bk-lines{margin:0; border-top:1px solid var(--night-700);}
.bk-line{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); padding:var(--s-2) 0; border-bottom:1px solid var(--night-700); font-size:var(--fs-200); color:var(--on-night-soft);}
.bk-line dt{min-width:0;}
.bk-line dd{margin:0; color:var(--on-night); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.bk-line dd s{font-weight:400; color:var(--on-night-soft); margin-right:4px;}
.bk-line.is-save dd{color:#7fe0b6;}
.bk-line.is-total{color:var(--on-night); font-weight:700; font-size:var(--fs-300);}
.bk-line.is-total dd{font-family:var(--font-display); font-size:var(--fs-600);}
.bk-line.is-now{color:var(--on-night); border-bottom:0; padding-top:var(--s-3);}
.bk-line.is-now dd{font-family:var(--font-display); font-size:var(--fs-500); color:var(--on-night);}
.bk-lines .is-pending dd{opacity:.5;}
.bk-sum-terms{margin:var(--s-3) 0 0; font-size:var(--fs-100); color:var(--on-night-soft);}
.bk-sum-terms a,.bk-sum-body a,.bk-sum-proof a{color:#8cc7ff;}
.bk-sum-note{margin:var(--s-3) 0 0; padding:var(--s-2) var(--s-3); border-radius:var(--r-2); background:#4a1f1f; color:#ffd9d4; font-size:var(--fs-200); font-weight:700;}
.bk-sum-note[hidden]{display:none;}
.bk-switch{margin:var(--s-3) 0 0; padding:var(--s-3); border:1px solid var(--night-700); border-radius:var(--r-2); background:var(--night-800); font-size:var(--fs-200); color:var(--on-night);}
.bk-switch button{margin-top:var(--s-2); min-height:44px; padding:0 var(--s-3); border:1.5px solid rgba(238,244,250,.45); border-radius:var(--r-2); background:transparent; color:var(--on-night); font:700 var(--fs-200)/1 var(--font-body); cursor:pointer;}
.bk-sum-proof{margin:0; padding:var(--s-3) var(--s-4) var(--s-4); border-top:1px solid var(--night-700); font-size:var(--fs-100); color:var(--on-night-soft);}
.bk-sum-proof .stars{color:var(--star); letter-spacing:1px;}
.bk-sum-rating{margin:0;}
.bk-sum-rating b{color:var(--on-night);}
@media (min-width:980px){.bk-summary{position:sticky; top:84px;}}
.bk-bar,.bk-backdrop{display:none;}
@media (max-width:979px){
  .book-band{padding-bottom:calc(var(--s-7) + 76px);}
  .bk-summary{position:fixed; left:0; right:0; bottom:0; z-index:93; max-height:88svh; overflow-y:auto; border-radius:var(--r-3) var(--r-3) 0 0; transform:translateY(105%); visibility:hidden; transition:transform 260ms var(--ease-out), visibility 0s 260ms;}
  .bk-summary.is-open{transform:none; visibility:visible; transition:transform 260ms var(--ease-out);}
  .bk-sum-close{display:grid; place-items:center;}
  .bk-backdrop.is-open{display:block; position:fixed; inset:0; z-index:92; background:rgba(7,22,36,.55);}
  .bk-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom)); background:var(--night-900); color:var(--on-night); border-top:1px solid var(--night-700);}
  .bk-bar-price{appearance:none; border:0; background:transparent; color:inherit; padding:4px 0; min-height:48px; min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:left; line-height:1.2; cursor:pointer;}
  .bk-bar-price b{font-family:var(--font-display); font-size:var(--fs-500); font-weight:700; font-variant-numeric:tabular-nums; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
  .bk-bar-price b s{font-family:var(--font-body); font-size:var(--fs-100); font-weight:400; color:var(--on-night-soft); margin-right:4px;}
  .bk-bar-price small{font-size:var(--fs-100); color:var(--on-night-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .bk-bar .btn{min-height:48px; flex:none;}
  /* long pay labels (FR/ES/DE) wrap instead of squeezing the total; the second line may take two lines */
  .bk-bar-price{flex:1 1 auto;}
  .bk-bar-price b{white-space:nowrap;}
  .bk-bar-price.is-mixed b{white-space:normal; font-size:var(--fs-300); line-height:1.1;}
  .bk-bar-price small{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2;}
  .bk-bar .btn{white-space:normal; max-width:55%; line-height:1.15; text-align:center;}
}

/* ---------- /book, conversion audit (2026-10-09) ---------- */
/* a step's scroll lands under the sticky nav (60px), not behind it */
.bk-progress,.bk-step{scroll-margin-top:72px;}
/* phones: a slim title, so the step's first field sits in the top half of the screen (#12); /book only
   (the success page and the 404 share .book-hero and .book-band) */
@media (max-width:719px){
  .page-book .book-hero{padding:var(--s-3) 0 var(--s-4);}
  .page-book .book-hero .crumbs{display:none;}   /* the logo goes home; the title says where you are */
  .page-book .book-band{padding-top:var(--s-4);}
  /* the current step on one line: "Step 4 of 5 · Your details" */
  .bk-steps li.is-current .bk-steps-t{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.45em;}
  .bk-steps li.is-current .bk-of{display:inline;}
  .bk-steps li.is-current .bk-of::after{content:" ·";}
}
/* phones: two or more finished steps fold into one line with one "Change" (book.js renderSteps) */
.bk-done{display:none;}
@media (max-width:719px){
  .bk-done:not([hidden]){display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:0 var(--s-3); align-items:center; padding:var(--s-2) 0; border-bottom:1px solid var(--line);}
  .bk-done .bk-steps-n{grid-row:auto; background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .bk-done .bk-steps-n svg{width:14px; height:14px;}
  .bk-done-v{margin:0; font-size:var(--fs-100); line-height:1.4; color:var(--ink); overflow-wrap:break-word;}
  .bk-progress.has-done .bk-steps li.is-done{display:none;}
  .bk-progress.has-done .bk-steps.is-open li.is-done{display:grid; background:var(--paper); padding-inline:var(--s-2);}
}
/* the pay step: one set of "Change" pills, the review list's (#11). Since the UX audit (2026-10-14, Zeigarnik) phones show the
   same progress header there as on steps 2-4 ("Step 5 of 5 · Payment" and the folded summary line), without its Change */
[data-booking][data-at="pay"] :is(.bk-steps, .bk-done) .bk-steps-change{display:none;}

/* step 3: each room with its photo and what it is (#7) */
.bk-opt-pic{flex:none; display:block; width:64px; height:64px; border-radius:var(--r-2); overflow:hidden; background:var(--line);}
.bk-opt-pic img{display:block; width:100%; height:100%; object-fit:cover;}
@media (min-width:480px){.bk-opt-pic{width:72px; height:72px;}}
.bk-opt-facts{font-size:var(--fs-200); line-height:1.4; color:var(--ink-soft);}
[data-room-set] .bk-opt-main > .bk-opt-note:not(.bk-opt-split){color:var(--ink); font-weight:600;}

/* proof in the flow, phones: one Google review and the coaches, under the step 1 cards and, on the pay
   step, right under the two payment options (#5; the pay button is the phone bar there); wide screens
   carry it in the summary card */
.bk-proof{margin:var(--s-5) 0 0; padding-top:var(--s-4); border-top:2px solid var(--ink);}
@media (min-width:980px){.bk-proof{display:none;}}
/* at the payment choice: the coaches first, then the review cut to three lines (design review, 2026-10-10;
   the whole review is at step 1 and on the home page) */
.bk-proof-pay .bk-coaches{margin-top:0;}
.bk-proof-pay .bk-quote{margin-top:var(--s-3);}
.bk-proof-pay .bk-quote-meta{margin-bottom:var(--s-1);}
.bk-proof-pay :is(.bk-quote blockquote, .bk-quote-tr){display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; font-size:var(--fs-200);}
.bk-quote-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-3); margin:0 0 var(--s-2); font-size:var(--fs-200); color:var(--ink-soft);}
.bk-quote-meta b{color:var(--ink);}
.bk-quote-meta .stars{color:var(--star);}
.bk-quote-meta:has(> .stars)::before{margin-right:calc(6px - var(--s-3));}   /* the Google G 6px from its stars, as in the home reviews */
.bk-quote blockquote{margin:0; font-size:var(--fs-300); line-height:1.5; color:var(--ink); text-wrap:pretty;}
.bk-quote-tr{margin:var(--s-2) 0 0; font-size:var(--fs-200); color:var(--ink-soft);}
.bk-coaches{display:flex; align-items:center; gap:var(--s-3); margin:var(--s-4) 0 0; font-size:var(--fs-200); line-height:1.35; color:var(--ink-soft);}
.bk-coaches b{display:block; color:var(--ink);}
.bk-faces{display:flex; gap:4px; flex:none;}
.bk-faces picture{display:block; width:40px; height:40px; border-radius:var(--r-2); overflow:hidden; background:var(--line);}
.bk-faces img{display:block; width:100%; height:100%; object-fit:cover;}   /* square face crops, one coach each */
/* ...and in the summary card, on night: rating, coaches, then the review (2026-10-10: the ISA line in the
   viewport at 1440x900 on every step, where "taking guests since 2026" was) */
.bk-sum-proof .bk-quote{margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--night-700);}
.bk-sum-proof .bk-quote-meta{font-size:var(--fs-100); color:var(--on-night-soft);}
.bk-sum-proof .bk-quote-meta b{color:var(--on-night);}
.bk-sum-proof .bk-quote blockquote{font-size:var(--fs-200); color:var(--on-night);}
.bk-sum-proof .bk-quote-tr{font-size:var(--fs-100); color:var(--on-night-soft);}
.bk-sum-proof .bk-coaches{margin-top:var(--s-3); font-size:var(--fs-100); color:var(--on-night-soft);}
.bk-sum-proof .bk-coaches b{color:var(--on-night); font-size:var(--fs-200);}
.bk-sum-proof .bk-faces picture{background:var(--night-800);}
@media (max-width:979px){.bk-sum-proof .bk-quote{display:none;}}   /* the price sheet stays about price: the review is in the step */

/* the summary card's content waits for book.js's first render: a Book link that opens on a price would
   otherwise paint the static tip first and push the button and the reviews down (a layout shift) */
@media (scripting: enabled){[data-booking]:not(.is-ready) :is(.bk-sum-body, .bk-sum-proof){visibility:hidden;}}
/* wide screens: the step's Continue, and on the last step the pay button, beside the price (#9);
   the "nothing is charged until Stripe" line follows it */
.bk-sum-act{display:none;}
@media (min-width:980px){.bk-sum-act{display:block; margin-top:var(--s-4);} .bk-sum-act .btn{width:100%;}}
.bk-sum-terms[hidden]{display:none;}

/* the phone bar on the pay step: "€420 now", then "€2,100 total" (#4); a 16px inset keeps
   "Pay €420 securely" on one line at 390px. Where figure and word do not fit beside the button
   (FR "2 100 € aujourd’hui" at 360px), the word drops under the figure instead of running under
   the button; the figure itself never breaks (its spaces are no-break). The price may come 8px
   from the button (not the bar's 12px gap) before it wraps, so "2 100 € aujourd’hui" stays on one
   line at 390px, where it always cleared the button */
.bk-bar-when{font-family:var(--font-body); font-size:var(--fs-200); font-weight:700;}
@media (max-width:979px){
  .bk-bar .btn{padding-inline:var(--s-4);}
  .bk-bar-price.is-now{margin-right:calc(var(--s-2) - var(--s-3));}
  .bk-bar-price.is-now b{white-space:normal; line-height:1.1;}
}

/* ---------- /book, payment marks (owner answer 4, 2026-10-08) ---------- */
/* Visa, Mastercard, Apple Pay and Google Pay centred under every pay button, on the pay step only: the step's
   own and the summary card's (wide screens), the phone bar's (book.js copies the card's row into it). Official
   colours on small white chips, as the Google G sits on its white disc; 24px high. The row's label is for
   screen readers, the chips are aria-hidden <use>s of one sprite (book_page.MARK_DEFS) */
.bk-mark-defs{position:absolute; width:0; height:0; overflow:hidden;}
.bk-marks{display:none; justify-content:center; gap:4px; margin:var(--s-2) 0 0;}
[data-booking][data-at="pay"] .bk-marks,.bk-bar.is-pay .bk-marks{display:flex;}
.bk-marks svg{display:block; flex:none; box-sizing:border-box; width:36px; height:24px; border:1px solid var(--line); border-radius:var(--r-1); background:#fff;}
/* the step's own pay button and its marks in one column; Back stays level with the button */
.bk-pay-go{display:flex; flex-direction:column; align-items:center;}
@media (min-width:980px){.bk-pay-actions{align-items:flex-start;} .bk-pay-actions [data-back]{min-height:48px;}}
@media (max-width:979px){.bk-pay-go{display:none;}}   /* phones: the bar is the pay button */
/* the phone bar: the button and its marks in one column, in the button's old place (right, 55% at most;
   4 chips = 156px, which fits that at 320px) */
.bk-bar .bk-bar-go{display:flex; flex-direction:column; align-items:center; flex:none; max-width:55%; margin-left:auto;}
.bk-bar .bk-bar-go .btn{max-width:100%; margin-left:0;}
.bk-bar .bk-marks{margin-top:6px;}
/* the bar is 30-36px taller on the pay step (95px at 390, 104 when the button takes two lines): the legal
   footer's last line still clears it at the end of the page */
@media (max-width:979px){.page-book:has([data-booking][data-at="pay"]) .footer-legal{padding-bottom:calc(var(--s-5) + 112px);}}

/* ---------- /book, extras (owner, 2026-10-11: reserve now, pay at camp) ---------- */
/* step 3, under the room choice, in the level mix's box: a row per extra, in three groups (surf, trips and
   activities, massages), on the page's hairline rules. A ticked row shows its count on the mix's 44px
   stepper: beside the name where the row has room, under it (aligned with the name) on phones. */
.bk-x-h{margin:var(--s-3) 0 0; padding:0 0 var(--s-1); border-bottom:1px solid var(--line); font-size:var(--fs-100); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.bk-x-group:first-of-type .bk-x-h{margin-top:var(--s-1);}
.bk-x{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-2) 0; border-bottom:1px solid var(--line);}
.bk-x[hidden]{display:none;}
.bk-x-pick{flex:1 1 15rem; display:flex; align-items:flex-start; gap:var(--s-3); min-width:0; min-height:44px; padding:var(--s-1) 0; cursor:pointer;}
.bk-x-pick input{flex:none; width:24px; height:24px; margin:0; accent-color:var(--night-900);}
.bk-x-main{display:grid; gap:2px; min-width:0;}
.bk-x-name{font-weight:700; line-height:1.35;}
.bk-x-facts{font-size:var(--fs-200); line-height:1.4; color:var(--ink-soft);}
.bk-x-price{font-size:var(--fs-200); line-height:1.4; font-weight:600; color:var(--ink);}
.bk-x-price b{font-weight:inherit; font-variant-numeric:tabular-nums lining-nums;}
.bk-x-count{display:flex; align-items:center; gap:var(--s-3); margin-left:36px;}   /* 24px box + 12px gap: under the name */
@media (max-width:359px){.bk-x-count{margin-left:0;}}   /* 320px: the count's figure keeps room for "12" */
.bk-x-count[hidden]{display:none;}
.bk-x-count > label{font-size:var(--fs-200); font-weight:700;}
/* a stay of 7 nights or more already includes Paradise Valley and sandboarding: one line instead of their rows */
.bk-x-incl{display:flex; gap:var(--s-2); align-items:flex-start; margin:0; padding:var(--s-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-200); color:var(--ink-soft);}
.bk-x-incl[hidden]{display:none;}
.bk-x-incl svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--good);}
.bk-x-sum{margin:var(--s-3) 0 0; font-weight:700; font-variant-numeric:tabular-nums lining-nums;}
.bk-x-sum[hidden]{display:none;}
/* on phones the box's legend is a heading inside the box: on the border a long one wraps onto two lines across
   it (measured: ES up to 411px wide, FR up to 374px, EN and DE at 320px) */
@media (max-width:479px){.bk-extras > legend{float:left; width:100%; padding:0; margin:0 0 var(--s-1);} .bk-extras > legend + *{clear:both;}}
/* For Two's step 3: its room is shown, not chosen */
[data-room-set="couple"] .bk-opt{cursor:default;}
/* the price sheet: the extras as their own group under the money charged, never added to it */
.bk-camp{margin:var(--s-4) 0 0;}
.bk-camp-h{margin:0 0 var(--s-1); font-size:var(--fs-100); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-soft);}
.bk-line.is-camp{color:var(--on-night); font-weight:700;}
.bk-camp-note{margin:var(--s-2) 0 0; font-size:var(--fs-100); color:var(--on-night-soft); text-wrap:pretty;}

/* booking-success: the week just booked, as its forecast row */
.success-grid{display:grid; gap:var(--s-6);}
.success-grid .bk-lines{margin-top:var(--s-3);}
@media (min-width:900px){.success-grid{grid-template-columns:380px minmax(0,1fr); gap:var(--s-7); align-items:start;} .success-grid:has(> [data-recap][hidden]){grid-template-columns:minmax(0,46rem);}}

/* the small legal footer: book, success and terms */
.footer-legal{background:var(--night-950); color:var(--on-night-soft); padding:var(--s-5) 0; font-size:var(--fs-100);}
.footer-legal .wrap{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); justify-content:space-between; align-items:center;}
.footer-legal nav{display:flex; flex-wrap:wrap; gap:0 var(--s-4);}
.footer-legal a{color:var(--on-night-soft); text-decoration:none; display:inline-block; padding:8px 0;}
.footer-legal a:hover{color:var(--on-night);}
@media (max-width:979px){.page-book .footer-legal{padding-bottom:calc(var(--s-5) + 76px);}}

/* ---------- reduced motion: last, and absolute ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .is-reforecast [data-sweep]{animation:none !important;}
}

.house-line .btn-link, .includes-link .btn-link{display:inline; min-height:0;}   /* one text line high, wraps like text */
.house-line .btn-link::after, .includes-link .btn-link::after{content:"\2060"; display:inline; padding-left:1em; margin-left:6px;}   /* the mask paints the padding: the arrow stays with the last word */
.bk-bar .btn{margin-left:auto;}   /* stays on the right while the price button is hidden */
@media (max-width:767px){.site-footer{padding-bottom:calc(var(--s-5) + 68px);}}
/* 2026-10-14 (UX audit, aesthetic-usability): on a phone the weather table (the only article table with a
   thead, all four locales) no longer scrolls sideways with Wetsuit and Notes off screen. Each month is two
   lines: month, air, water and swell (the four headed columns, fixed widths so they line up month after
   month), then the wetsuit and the notes, whose text explains itself (their two header cells hide). The
   jump-to-month links still land on the row: each tr keeps its scroll-margin-top. */
@media (max-width:599px){
  .table-scroll:has(thead){overflow:visible;}
  .table-scroll:has(thead) :is(.art-table, thead, tbody){display:block;}
  .table-scroll:has(thead) tr{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-1) var(--s-2); padding:var(--s-2) 0; border-bottom:1px solid var(--line);}
  .table-scroll:has(thead) thead tr{border-bottom:2px solid var(--ink); align-items:end;}
  .table-scroll:has(thead) :is(th, td){padding:0; border:0;}
  .table-scroll:has(thead) :is(th, td):nth-child(1){flex:0 0 5.5rem; overflow-wrap:anywhere;}
  .table-scroll:has(thead) :is(th, td):nth-child(2){flex:0 0 4.5rem;}
  .table-scroll:has(thead) :is(th, td):nth-child(3){flex:0 0 3.5rem;}
  .table-scroll:has(thead) :is(th, td):nth-child(4){flex:1 0 calc(100% - 13.5rem - 3 * var(--s-2)); min-width:0;}   /* fills line 1, so the wetsuit starts line 2 */
  /* header cells 5-6 (wetsuit, notes) hidden from sight only: screen readers keep the column headers (review 2026-10-15) */
  .table-scroll:has(thead) th:nth-child(n+5){position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}
  .table-scroll:has(thead) td:nth-child(5){flex:0 1 auto; font-weight:700;}
  .table-scroll:has(thead) td:nth-child(6){flex:1 1 9rem; color:var(--ink-soft);}
}
@container (min-width:600px) and (max-width:899px){.fspot-tabs{display:grid; grid-template-columns:repeat(4, max-content);}}
.art > .bk-tip{max-width:32rem; margin:var(--s-5) auto 0; padding:var(--s-4); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); color:var(--ink-soft); font-size:var(--fs-200); line-height:1.6;}
.art > .bk-tip strong{color:var(--ink);}
.art > .hero-actions{max-width:32rem; margin:var(--s-4) auto 0;}
.btn.btn-outline-dark{border-color:var(--ink); color:var(--ink); background:transparent;}   /* .btn.: outranks the article's link colour */
.btn.btn-outline-dark:hover{background:var(--ink); color:var(--paper);}