/* Design tokens — light is the default, html.dark swaps the palette.
   The theme class is applied before first paint by the inline head script. */
:root{
  --bg:#FBFBFA; --surface:#FFFFFF; --text:#181A1C; --muted:#6A6F74; --faint:#6E747A;
  --border:#E8E7E3; --accent:#2F7F6E; --accent-contrast:#FFFFFF; --tag:#F2F1EC;
  --shadow:rgba(20,25,30,.14);
}
html.dark{
  --bg:#121417; --surface:#1A1D21; --text:#ECEDEE; --muted:#9BA1A7; --faint:#8A9096;
  --border:#282C31; --accent:#5FB6A3; --accent-contrast:#0C1512; --tag:#1E2226;
  --shadow:rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Hanken Grotesk',sans-serif; min-height:100vh; transition:background .35s ease, color .35s ease;}
img{display:block;}
a{text-decoration:none;}
button{font-family:inherit;border:none;cursor:pointer;}
section{scroll-margin-top:80px;}

/* theme toggle knob */
#themeKnob{ left:4px; transition:left .28s cubic-bezier(.4,0,.2,1); }
html.dark #themeKnob{ left:32px; }

/* gallery thumbs — keyboard-focusable buttons; active one gets the accent border */
.ms-thumbs{ flex-wrap:wrap; }
.ms-thumbs button{ padding:0; background:none; border:2px solid transparent; border-radius:10px; cursor:pointer; line-height:0; transition:border-color .2s; }
.ms-thumbs button.is-active{ border-color:var(--accent); }

/* theme-conditional images (e.g. Airbnb logo: red on light, white on dark) */
.theme-dark-only{ display:none; }
html.dark .theme-dark-only{ display:inline-block; }
html.dark .theme-light-only{ display:none; }

/* skip link — visually hidden until keyboard focus */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-contrast); padding:10px 18px; border-radius:0 0 8px 0; font-weight:600; }
.skip-link:focus{ left:0; }

/* visible focus for keyboard users */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* respect reduced-motion preferences (carousel slide, theme fade, knob) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation:none !important; }
}

@media (max-width:820px){
  .ms-heroWrap{ height:470px !important; }
  .ms-nav{ padding:16px 20px !important; }
  .ms-navlink{ display:none !important; }
  .ms-hero{ left:20px !important; right:20px !important; bottom:26px !important; }
  .ms-hero h1{ font-size:34px !important; }
  .ms-trust{ grid-template-columns:repeat(2,1fr) !important; }
  .ms-trust > div{ padding:16px 20px !important; border-right:0 !important; border-bottom:1px solid var(--border) !important; }
  .ms-book{ grid-template-columns:1fr !important; padding:32px 20px 40px !important; gap:30px !important; }
  .ms-book-card{ max-width:100% !important; }
  .ms-h2{ font-size:28px !important; }
  .ms-sec{ padding-left:20px !important; padding-right:20px !important; }
  .ms-hl{ grid-template-columns:1fr !important; gap:26px !important; padding:0 20px 48px !important; }
  .ms-hl > div{ border-left:0 !important; padding:0 !important; }
  .ms-3col{ grid-template-columns:1fr !important; gap:22px !important; }
  .ms-about{ grid-template-columns:1fr !important; gap:26px !important; }
  .ms-amgrid{ grid-template-columns:1fr !important; }
  #amenities > div, #accessibility > div{ grid-template-columns:1fr !important; }
  .ms-fine{ grid-template-columns:1fr !important; gap:34px !important; padding-left:20px !important; padding-right:20px !important; }
  .ms-gallery img{ height:300px !important; }
  .ms-thumbs{ overflow-x:auto !important; }
  .ms-thumbs img{ width:84px !important; height:56px !important; }
  .ms-footer{ flex-direction:column !important; align-items:flex-start !important; gap:18px !important; padding:34px 20px !important; }
}