/* ============================================================================
   Roua Dimineții — site stylesheet
   Design tokens below are carried over verbatim from the original design.
   Everything after "COMPONENTS" replaces the React design-system bundle.
   ========================================================================= */

/* --- Webfonts. Subset to latin + latin-ext (ă â î ș ț), WOFF2. ------------ */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/nunito-sans.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Architects Daughter";src:url("../fonts/architects-daughter.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}


:root{
/* Wood - honey-toned pine, lighter than the raw photographs. Carries headings with green. */
--wood-900:#4a2c17;--wood-800:#633a1f;--wood-700:#7b4a2a;--wood-600:#96603a;--wood-500:#b07a4c;--wood-400:#c08b52;--wood-300:#d8ac7a;--wood-200:#ecd4b4;--wood-100:#f7e8d6;
/* Moss - sage green: the shingle roof and the lawn in full sun. Equal partner to wood. */
--moss-900:#2f3d24;--moss-800:#46592f;--moss-700:#5c7442;--moss-600:#6e8b52;--moss-500:#7a8f5c;--moss-400:#9aad78;--moss-300:#b9cb96;--moss-200:#d7e0be;--moss-100:#eef2e0;
/* Cream - warm paper. Page never white; white is reserved for cards. */
--cream-50:#fffdf6;--cream-100:#faf5e9;--cream-200:#f6f1e2;--cream-300:#e9e1cc;--cream-400:#d3c8ad;
/* Ember - terracotta. The one loud colour, once per screen. */
--ember-700:#8f3313;--ember-600:#a53c17;--ember-500:#c1471f;--ember-400:#d4633c;--ember-300:#e8a184;--ember-100:#fbe9e1;
/* Sun - sunset yellow, for star ratings and gentle warnings only. */
--sun-600:#c98a12;--sun-500:#f2b733;--sun-300:#f8d484;--sun-100:#fdf3d8;
/* Ink - warm near-blacks. No neutral grey in the system. */
--ink-900:#2e281f;--ink-800:#423a2e;--ink-700:#554b3c;--ink-500:#7a6f5f;--ink-400:#9a8f7d;--ink-300:#b8ae9c;
--white:#ffffff;

/* --- semantic aliases: always prefer these in components --- */
--bg-page:var(--cream-50);
--bg-page-alt:var(--cream-100);
--surface-card:var(--white);
--surface-sunken:var(--cream-200);
--surface-tint:var(--moss-100);
--surface-inverse:var(--wood-800);
--surface-overlay:rgba(46,40,31,.55);

--text-heading:var(--wood-700);
--text-heading-alt:var(--moss-800);
--text-body:var(--ink-800);
--text-muted:var(--ink-500);
--text-quiet:var(--ink-400);
--text-inverse:var(--cream-50);
--text-on-accent:var(--white);
--text-link:var(--moss-700);
--text-link-hover:var(--ember-500);

--border-soft:var(--cream-300);
--border-strong:var(--wood-300);
--border-inverse:rgba(255,255,255,.22);

--brand:var(--wood-700);
--brand-hover:var(--wood-600);
--brand-press:var(--wood-800);
--brand-tint:var(--wood-100);

--nature:var(--moss-700);
--nature-hover:var(--moss-600);
--nature-tint:var(--moss-100);

--accent:var(--ember-500);
--accent-hover:var(--ember-400);
--accent-press:var(--ember-700);
--accent-tint:var(--ember-100);

--focus-ring:var(--moss-600);

--success:var(--moss-600);--success-tint:var(--moss-100);
--warning:var(--sun-600);--warning-tint:var(--sun-100);
--danger:#a53c17;--danger-tint:var(--ember-100);
--info:var(--wood-500);--info-tint:var(--wood-100);
}

:root{
--font-display:"Fraunces","Iowan Old Style",Georgia,serif;
--font-body:"Nunito Sans","Helvetica Neue",system-ui,sans-serif;
--font-hand:"Architects Daughter","Bradley Hand",cursive;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

/* Fraunces axes. Soft terminals + a little wonk = the cozy, hand-carved feel. */
--fraunces-display:"SOFT" 100,"WONK" 1,"opsz" 96; /* @kind font */
--fraunces-heading:"SOFT" 100,"WONK" 1,"opsz" 36; /* @kind font */
--fraunces-quiet:"SOFT" 90,"WONK" 0,"opsz" 14; /* @kind font */

--fs-display-1:4rem;--lh-display-1:1.04; /* @kind font */
--fs-display-2:3rem;--lh-display-2:1.08; /* @kind font */
--fs-h1:2.25rem;--lh-h1:1.14; /* @kind font */
--fs-h2:1.75rem;--lh-h2:1.2; /* @kind font */
--fs-h3:1.375rem;--lh-h3:1.3; /* @kind font */
--fs-h4:1.125rem;--lh-h4:1.4; /* @kind font */
--fs-lead:1.25rem;--lh-lead:1.65; /* @kind font */
--fs-body:1rem;--lh-body:1.7; /* @kind font */
--fs-small:.875rem;--lh-small:1.6; /* @kind font */
--fs-caption:.75rem;--lh-caption:1.5; /* @kind font */
--fs-hand:1.5rem;--lh-hand:1.35; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-display:500; /* @kind font */
--fw-wordmark:600; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--ls-tight:-.015em; /* @kind font */
--ls-normal:0; /* @kind font */
--ls-wide:.06em; /* @kind font */
--ls-caps:.12em; /* @kind font */
}

:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;--space-14:128px;
--gutter:var(--space-7);
--section-y:var(--space-13);
--section-y-tight:var(--space-11);
--container:1160px; /* @kind spacing */
--container-narrow:720px; /* @kind spacing */
--measure:66ch; /* @kind spacing */
}

:root{
/* Moderate softness. Cards 20, images 16, controls 16 - approachable without being bubbly.
   Full pills are reserved for badges and tags, where no other shape reads correctly. */
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:999px;--radius-circle:50%;
--radius-control:16px; /* buttons, tabs, header, toast */
--radius-media:16px;   /* photographs */
--radius-card:20px;    /* cards, callouts, dialogs */
--border-width:1px; /* @kind spacing */
--border-width-thick:2px; /* @kind spacing */

/* Shadows are brown-tinted, never neutral grey - they read as sunlight, not UI chrome. */
--shadow-xs:0 1px 2px rgba(122,90,48,.06);
--shadow-sm:0 2px 6px rgba(122,90,48,.08);
--shadow-md:0 6px 18px rgba(122,90,48,.10);
--shadow-lg:0 12px 32px rgba(122,90,48,.13);
--shadow-xl:0 24px 56px rgba(122,90,48,.17);
--shadow-inset:inset 0 1px 2px rgba(122,90,48,.08);
--ring-focus:0 0 0 3px rgba(110,139,82,.35); /* @kind shadow */
--ring-accent:0 0 0 3px rgba(193,71,31,.28); /* @kind shadow */

/* Protection gradient for text laid over photography */
--scrim-bottom:linear-gradient(to top,rgba(46,40,31,.78) 0%,rgba(46,40,31,.42) 38%,rgba(46,40,31,0) 78%); /* @kind other */
--scrim-full:linear-gradient(to top,rgba(46,40,31,.62),rgba(46,40,31,.22)); /* @kind other */
}

:root{
--ease-soft:cubic-bezier(.32,.72,.35,1); /* @kind other */
--ease-out:cubic-bezier(.2,.8,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.5,0,.5,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-lazy:520ms; /* @kind other */
--transition-base:all var(--dur-base) var(--ease-soft); /* @kind other */
--lift-hover:translateY(-2px); /* @kind other */
--press-scale:.98; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-lazy:0ms; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--fw-display);letter-spacing:var(--ls-tight);margin:0 0 var(--space-5);text-wrap:pretty}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-variation-settings:var(--fraunces-heading)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-variation-settings:var(--fraunces-heading)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-variation-settings:var(--fraunces-heading)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-variation-settings:var(--fraunces-quiet)}
p{margin:0 0 var(--space-5);max-width:var(--measure)}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 40%,transparent);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-soft)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;display:block;border-radius:var(--radius-media)}
small{font-size:var(--fs-small);line-height:var(--lh-small)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--sun-300);color:var(--ink-900)}
.rd-hand{font-family:var(--font-hand);font-size:var(--fs-hand);line-height:var(--lh-hand);color:var(--moss-700)}
.rd-eyebrow{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--moss-700)}
.rd-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-700)}


/* ============================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */
.container{max-width:var(--container);margin-inline:auto}
.container--narrow{max-width:var(--container-narrow);margin-inline:auto}
.section{padding:clamp(64px,8vw,112px) var(--gutter) 0}
.section--tint{margin-top:clamp(64px,8vw,112px);background:var(--surface-tint);
  padding:clamp(56px,7vw,96px) var(--gutter)}
.section--inverse{margin-top:clamp(64px,8vw,112px);background:var(--surface-inverse);
  padding:clamp(56px,7vw,96px) var(--gutter)}
.section--flush{padding-top:0}
[id]{scroll-margin-top:104px}
.center{text-align:center}
.stack-lg > * + *{margin-top:clamp(22px,2.5vw,32px)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;
  background:var(--surface-card);color:var(--text-heading);border-radius:0 0 var(--radius-md) 0;
  font-weight:var(--fw-bold);box-shadow:var(--shadow-md)}
.skip-link:focus{left:0}

/* Section heading cluster --------------------------------------------------- */
.sec-head{max-width:680px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head :is(h1,h2){font-family:var(--font-display);font-variation-settings:var(--fraunces-heading);
  font-weight:var(--fw-display);font-size:clamp(28px,3.4vw,36px);line-height:1.2;
  letter-spacing:var(--ls-tight);color:var(--wood-700);margin:14px 0 0}
.sec-head p{margin-top:18px}
.sec-head--center p{margin-inline:auto}
.sec-bar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-bar :is(h1,h2){font-family:var(--font-display);font-variation-settings:var(--fraunces-heading);
  font-weight:var(--fw-display);font-size:clamp(26px,3vw,36px);letter-spacing:var(--ls-tight);
  color:var(--wood-700);margin:0}
.sec-bar__note{font-size:var(--fs-small);color:var(--text-muted)}

/* ============================================================================
   ICONS — Lucide 0.454.0 subset (ISC licence), inlined as an SVG sprite.
   ========================================================================= */
.icon{width:20px;height:20px;flex:0 0 auto;display:inline-block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:15px;height:15px}
.icon--lg{width:26px;height:26px}
.icon--xl{width:44px;height:44px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================================
   BUTTON — ports components/core/Button.jsx
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:var(--font-body);font-weight:var(--fw-bold);letter-spacing:.005em;
  border:var(--border-width) solid transparent;border-radius:var(--radius-control);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  font-size:var(--fs-body);padding:12px 26px;min-height:46px;
  transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft)}
.btn:hover{transform:var(--lift-hover)}
.btn:active{transform:scale(var(--press-scale))}
.btn--sm{font-size:var(--fs-small);padding:8px 18px;min-height:36px}
.btn--lg{font-size:var(--fs-lead);padding:16px 34px;min-height:56px}
.btn--block{width:100%}

.btn--primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn--secondary{background:var(--brand);color:var(--cream-50)}
.btn--secondary:hover{background:var(--brand-hover);color:var(--cream-50)}
.btn--nature{background:var(--nature);color:var(--cream-50)}
.btn--nature:hover{background:var(--nature-hover);color:var(--cream-50)}
.btn--outline{background:transparent;color:var(--brand);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--brand-tint);border-color:var(--wood-400);color:var(--brand)}
.btn--ghost{background:transparent;color:var(--brand)}
.btn--ghost:hover{background:var(--brand-tint);color:var(--brand)}
.btn--on-photo{background:color-mix(in srgb,var(--cream-50) 92%,transparent);color:var(--wood-800);
  backdrop-filter:blur(6px);box-shadow:var(--shadow-md)}
.btn--on-photo:hover{background:var(--cream-50);color:var(--wood-800)}

.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================================
   TAG — ports components/core/Tag.jsx
   ========================================================================= */
.tag{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  font-family:var(--font-body);border:1px solid var(--border-soft);
  background:var(--surface-card);color:var(--ink-700)}
.tag--selected{border-color:var(--moss-600);background:var(--nature-tint);color:var(--moss-800)}
.tag-row{display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================================
   AMENITY — ports components/content/AmenityItem.jsx
   ========================================================================= */
.amenity{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.amenity__icon{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;flex:0 0 auto;border-radius:var(--radius-md);
  background:var(--nature-tint);color:var(--moss-700)}
.amenity__label{font-family:var(--font-body);font-weight:var(--fw-bold);
  color:var(--wood-800);font-size:var(--fs-body)}
.amenity__note{font-size:var(--fs-small);color:var(--text-muted);
  line-height:var(--lh-small);margin-top:2px}
.amenity--row{flex-direction:row;align-items:center}
.amenity--row .amenity__icon{width:44px;height:44px}
.amenity--row .amenity__icon .icon{width:20px;height:20px}
.amenity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,36px)}
.amenity-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ============================================================================
   CALLOUT — ports components/feedback/Callout.jsx
   ========================================================================= */
.callout{display:flex;gap:var(--space-5);padding:var(--space-6) var(--space-7);
  background:var(--surface-tint);border:1px solid var(--moss-200);
  border-radius:var(--radius-card);color:var(--moss-800)}
.callout__body{min-width:0}
.callout__icon{margin-top:2px;display:inline-flex;flex:0 0 auto}
.callout__title{font-family:var(--font-display);font-variation-settings:var(--fraunces-quiet);
  font-size:var(--fs-h4);color:var(--wood-800);margin-bottom:4px}
.callout__text{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-700);margin:0;max-width:none}
.callout--warm{background:var(--accent-tint);border-color:var(--ember-300);color:var(--ember-700)}
.callout--sun{background:var(--sun-100);border-color:var(--sun-300);color:var(--sun-600)}
.callout--quiet{background:var(--surface-sunken);border-color:var(--border-soft);color:var(--ink-700)}

/* ============================================================================
   HEADER / NAV
   The mobile menu is a <details> disclosure so it works with JavaScript off.
   ========================================================================= */
.header-wrap{padding:18px var(--gutter) 0;position:sticky;top:0;z-index:20}
.header{max-width:1160px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:32px;padding:14px 26px;
  border-radius:var(--radius-control);background:rgba(255,253,246,.9);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-sm)}
.wordmark{font-family:var(--font-display);font-variation-settings:var(--fraunces-heading);
  font-weight:var(--fw-wordmark);font-size:19px;color:var(--wood-700);
  letter-spacing:var(--ls-tight);white-space:nowrap;text-decoration:none}
.wordmark:hover{color:var(--wood-600)}
.nav{display:flex;align-items:center;gap:26px;font-size:var(--fs-small);font-weight:var(--fw-semibold)}
/* :not(.btn) so the WhatsApp button inside the mobile menu keeps its own
   colours - .nav a would otherwise outrank .btn--primary on specificity. */
.nav a:not(.btn){color:var(--text-body);text-decoration:none}
.nav a:not(.btn):hover{color:var(--text-link-hover)}
.nav a[aria-current="page"]{color:var(--moss-700);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:5px}
.header__cta{display:inline-flex}
.nav-toggle{display:none}
.nav--desktop{display:flex}

/* ============================================================================
   HERO — background video with an image poster as the fallback
   ========================================================================= */
.hero{padding:0 var(--gutter);margin-top:-72px}
.hero__frame{max-width:1400px;margin:0 auto;position:relative;
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-xl);
  background:var(--wood-900)}
.hero__media{width:100%;height:88vh;max-height:820px;min-height:560px;
  object-fit:cover;display:block;border-radius:0;background:var(--wood-900)}
@supports (height:100svh){.hero__media{height:min(88svh,820px)}}
.hero__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}
.hero__copy{position:absolute;inset:auto 0 0 0;
  padding:0 clamp(28px,5vw,72px) clamp(44px,6vw,80px)}
.hero__copy h1{font-family:var(--font-display);font-variation-settings:var(--fraunces-display);
  font-weight:var(--fw-display);font-size:clamp(34px,5.2vw,64px);line-height:1.08;
  letter-spacing:var(--ls-tight);color:var(--cream-50);margin:14px 0 0;max-width:16ch;
  text-shadow:0 2px 12px rgba(42,33,24,.35)}
.hero__copy .rd-eyebrow{color:var(--moss-200)}
.hero__lead{font-size:var(--fs-lead);line-height:1.6;color:var(--cream-100);
  margin:22px 0 34px;max-width:44ch;text-shadow:0 1px 8px rgba(42,33,24,.4)}

/* ============================================================================
   MEDIA GRIDS + PHOTO / VIDEO CARDS
   ========================================================================= */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}
.span-4{grid-column:span 4}.span-6{grid-column:span 6}

.shot{border-radius:var(--radius-media);overflow:hidden;box-shadow:var(--shadow-sm);
  background:var(--surface-sunken);margin:0;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-soft)}
.shot:hover img{transform:scale(1.04)}
.shot--wide img{aspect-ratio:16/10}
.shot--tall img{aspect-ratio:4/5}
.shot--std img{aspect-ratio:3/2}

/* Placeholder tile for a photograph that has not been taken yet.
   Swap one in by replacing the whole <div class="photo-slot"> with a .shot figure. */
.photo-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;aspect-ratio:3/2;border-radius:var(--radius-media);
  border:1px dashed var(--cream-400);background:var(--surface-sunken);
  color:var(--text-muted);text-align:center;padding:16px}
.photo-slot__label{font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.photo-slot__note{font-size:var(--fs-caption)}

/* Click-to-play video card. preload="none" means zero bytes until pressed. */
.videocard{margin:0;border-radius:var(--radius-media);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--wood-900);position:relative}
.videocard__media{position:relative;line-height:0}
.videocard video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--wood-900)}
.videocard__play{display:none}
/* The overlay only appears when JS can drive it; without JS the native
   controls stay in place so the video is still playable. */
.js .videocard:not(.is-playing) .videocard__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(to top,rgba(46,40,31,.55),rgba(46,40,31,.12));
  color:var(--cream-50);cursor:pointer;font-family:var(--font-body);
  font-size:var(--fs-small);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);
  transition:background var(--dur-base) var(--ease-soft)}
.js .videocard__play:hover{background:linear-gradient(to top,rgba(46,40,31,.62),rgba(46,40,31,.22))}
.videocard__play__disc{display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:var(--radius-circle);
  background:color-mix(in srgb,var(--cream-50) 92%,transparent);
  box-shadow:var(--shadow-lg);transition:transform var(--dur-base) var(--ease-soft)}
.js .videocard__play:hover .videocard__play__disc{transform:scale(1.06)}
.videocard__play__disc::before{content:"";margin-left:6px;width:0;height:0;
  border-left:24px solid var(--wood-800);border-top:15px solid transparent;
  border-bottom:15px solid transparent}

.videocard__caption{padding:14px 18px 16px;background:var(--surface-card);
  color:var(--text-muted);font-size:var(--fs-small)}
.videocard__caption strong{display:block;color:var(--wood-800);font-weight:var(--fw-bold);
  font-size:var(--fs-body);margin-bottom:2px}

/* ============================================================================
   ROOM CARDS
   ========================================================================= */
.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.room-card{display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-soft),
  transform var(--dur-base) var(--ease-soft)}
.room-card:hover{box-shadow:var(--shadow-lg);transform:var(--lift-hover)}
.room-card__media{overflow:hidden;background:var(--surface-sunken)}
.room-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:0;transition:transform var(--dur-slow) var(--ease-soft)}
.room-card:hover .room-card__media img{transform:scale(1.04)}
.room-card__body{padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-4);flex:1}
.room-card__body h3{margin:0}
.room-card__meta{font-size:var(--fs-small);color:var(--text-muted);margin:0}
.room-card__foot{margin-top:auto;padding-top:var(--space-4)}
.price{font-family:var(--font-display);font-variation-settings:var(--fraunces-heading);
  font-size:var(--fs-h3);color:var(--wood-700)}
.price small{font-family:var(--font-body);color:var(--text-muted);font-weight:var(--fw-regular)}

/* ============================================================================
   PRICE TABLE
   ========================================================================= */
.price-table{width:100%;border-collapse:collapse;background:var(--surface-card);
  border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:hidden}
.price-table caption{caption-side:bottom;padding-top:var(--space-5);
  font-size:var(--fs-small);color:var(--text-muted);text-align:left}
.price-table th,.price-table td{padding:14px 20px;text-align:left;
  border-bottom:1px solid var(--border-soft);font-size:var(--fs-small)}
.price-table thead th{background:var(--surface-sunken);color:var(--wood-800);
  font-weight:var(--fw-bold);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caps);text-transform:uppercase}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody th{font-weight:var(--fw-bold);color:var(--wood-800);font-size:var(--fs-body)}
.price-table td[data-price]{font-weight:var(--fw-bold);color:var(--wood-700);white-space:nowrap}

/* ============================================================================
   ZONE MAP — hand-drawn SVG, with a plain list fallback on small screens
   ========================================================================= */
.map-frame{margin-top:clamp(32px,4vw,52px);border-radius:var(--radius-card);
  border:1px solid var(--border-soft);background:#f7efdb;box-shadow:var(--shadow-md);overflow:hidden}
.map-frame svg{width:100%;display:block}
.map-list{display:none;margin:clamp(28px,3.5vw,40px) 0 0;padding:0;list-style:none;
  border:1px solid var(--border-soft);border-radius:var(--radius-card);
  background:var(--surface-card);overflow:hidden}
.map-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.map-list li:last-child{border-bottom:0}
.map-list b{color:var(--wood-800);font-weight:var(--fw-bold)}
.map-list span{font-size:var(--fs-small);color:var(--text-muted);white-space:nowrap}

/* ============================================================================
   FOOTER
   ========================================================================= */
.footer{margin-top:clamp(64px,8vw,112px);background:var(--wood-800);color:var(--cream-100);
  padding:clamp(56px,7vw,80px) var(--gutter) 40px}
.footer a{color:var(--cream-100);text-decoration:none}
.footer a:hover{color:var(--sun-300)}
.footer__grid{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.footer h2,.footer h3{color:var(--cream-50)}
.footer__title{font-family:var(--font-display);font-variation-settings:var(--fraunces-heading);
  font-weight:var(--fw-wordmark);font-size:20px;color:var(--cream-50);margin:0 0 6px}
.footer__blurb{font-size:var(--fs-small);color:var(--wood-200);max-width:34ch;margin:10px 0 0}
.footer__head{font-size:var(--fs-caption);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--wood-300);margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--fs-small)}
.footer__bottom{max-width:1160px;margin:clamp(40px,5vw,60px) auto 0;padding-top:24px;
  border-top:1px solid var(--border-inverse);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--wood-300)}

/* ============================================================================
   LIGHTBOX — progressive enhancement; without JS the photos stay as they are
   ========================================================================= */
.lightbox{position:fixed;inset:0;z-index:60;display:none;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(46,40,31,.9);
  backdrop-filter:blur(4px);border:0}
.lightbox[open]{display:flex}
.lightbox img{max-width:100%;max-height:85vh;width:auto;border-radius:var(--radius-media);
  box-shadow:var(--shadow-xl)}
.lightbox__close{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:48px;height:48px;border-radius:var(--radius-circle);border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--cream-50) 92%,transparent);color:var(--wood-800)}
.lightbox::backdrop{background:rgba(46,40,31,.9)}
.js .shot--zoom img{cursor:zoom-in}

/* ============================================================================
   RESPONSIVE
   The original design shipped no media queries at all; everything below is new.
   ========================================================================= */
@media (max-width:1100px){
  .amenity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__media{height:min(72svh,660px);min-height:460px}
}

@media (max-width:820px){
  /* Nav collapses into a <details> disclosure — no JavaScript required. */
  .header{position:relative;gap:16px;padding:12px 18px}
  .header__cta{display:none}
  .nav--desktop{display:none}
  .nav-toggle{display:block}
  .nav-toggle > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);
    border:1px solid var(--border-soft);background:var(--surface-card);color:var(--wood-700)}
  .nav-toggle > summary::-webkit-details-marker{display:none}
  .nav-toggle > summary::after{content:"";width:18px;height:2px;background:currentColor;
    box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  .nav-toggle[open] > summary::after{box-shadow:none;transform:rotate(45deg);position:relative}
  .nav-toggle[open] > summary::before{content:"";position:absolute;width:18px;height:2px;
    background:currentColor;transform:rotate(-45deg)}
  .nav{position:absolute;top:calc(100% + 10px);right:0;left:0;flex-direction:column;
    align-items:stretch;gap:0;padding:8px;font-size:var(--fs-body);
    background:var(--surface-card);border:1px solid var(--border-soft);
    border-radius:var(--radius-card);box-shadow:var(--shadow-lg)}
  .nav a:not(.btn){padding:13px 14px;border-radius:var(--radius-md)}
  .nav a:not(.btn):hover{background:var(--surface-sunken)}
  .nav .btn{margin-top:6px}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-2,.span-3,.span-4,.span-6{grid-column:span 1}
  .span-hero{grid-column:span 2}
  .shot--tall img{aspect-ratio:3/2}
  .sec-bar{gap:8px}
  /* Below this width the overlaid copy is taller than the video frame, so it
     stops being an overlay and flows underneath it instead. */
  .hero{margin-top:-56px}
  .hero__media{height:min(52svh,420px);min-height:280px;border-radius:0}
  .hero__scrim{display:none}
  .hero__copy{position:static;background:var(--wood-800);
    padding:clamp(24px,5vw,36px) clamp(20px,5vw,32px) clamp(28px,6vw,40px)}
  .hero__copy h1{max-width:none;text-shadow:none;font-size:clamp(30px,7vw,40px)}
  .hero__lead{text-shadow:none;max-width:none}
  .callout{flex-direction:column;gap:var(--space-4)}
}

@media (max-width:640px){
  /* The hand-drawn map's 19px labels are illegible at this width. */
  .map-frame{display:none}
  .map-list{display:block}
}

@media (max-width:560px){
  :root{--gutter:18px}
  .grid{grid-template-columns:1fr;gap:14px}
  .span-hero{grid-column:span 1}
  .amenity-grid,.amenity-grid--2,.room-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .footer__bottom{flex-direction:column;gap:8px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .hero__media{height:min(62svh,520px);min-height:380px}
  .hero__lead{margin:16px 0 26px;font-size:var(--fs-body)}
  .shot--wide img,.shot--std img,.shot--tall img{aspect-ratio:3/2}
  /* The price table is only three columns, so it fits without scrolling if the
     cells are tightened. The wrapper stays as a safety net. */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .price-table th,.price-table td{padding:11px 10px;font-size:var(--fs-caption)}
  .price-table tbody th{font-size:var(--fs-small)}
  .price-table thead th{letter-spacing:.06em}
}

/* Respect the user's motion preference for the background video too. */
@media (prefers-reduced-motion:reduce){
  .shot:hover img,.room-card:hover .room-card__media img{transform:none}
  .btn:hover{transform:none}
}

@media print{
  .header-wrap,.hero__scrim,.videocard__play,.btn{display:none}
  body{background:#fff}
}

/* Room detail: prose beside the price callout, stacked on narrow screens. */
.room-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(24px,3vw,36px)}
@media (max-width:820px){.room-detail{grid-template-columns:1fr}}

/* Gallery video block */
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:1100px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.video-grid{grid-template-columns:1fr}}

/* The amenity tile and the tinted section band are both moss-100, so on that
   band the tile would be invisible. Give it the card surface instead. */
.section--tint .amenity__icon{background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--moss-200)}

/* Google Maps embed. Responsive box; the iframe itself has no intrinsic ratio. */
.map-embed{margin-top:clamp(28px,3.5vw,44px);border-radius:var(--radius-card);
  overflow:hidden;border:1px solid var(--border-soft);box-shadow:var(--shadow-md);
  background:var(--surface-sunken)}
.map-embed iframe{display:block;width:100%;height:clamp(280px,42vw,460px);border:0}
.map-embed__note{margin-top:14px;font-size:var(--fs-small);color:var(--text-muted);
  max-width:none;text-align:center}

/* Accessibility: --ink-500 as muted text lands at 4.32:1 on the moss and cream
   panels, just under WCAG AA. Darkened 3% — visually the same, 4.52:1 at worst.
   The --ink-500 palette entry itself is left alone. */
:root{--text-muted:#766c5c}