@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
/* Lock scrolling on the ROOT, not on body. html already has overflow-x:clip,
   so overflow:hidden on body turns body into its own scroll container — a
   position:sticky header then sticks to body and is thrown off-screen (with
   its close button) when the menu opens after scrolling. site.js puts
   .is-locked on <html> directly; a :has() selector was tried first and its
   style invalidation visibly lagged behind the menu opening. */
html.is-locked { overflow: hidden; }
/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* Etherial View Villas Skiathos (2026-09-24) — from the client's logo: silver line art in a capsule on black.
   Black and silver with warm stone; the photos bring the colour. Photos framed as capsules with the logo's
   double ring, the logo's waves as the ornament, frosted glass over photos, titles centred on the photos.
   Forum (headings, close to the logo's wordmark) + Afacad (text). */
:root {
  --ink: #141414;           /* the logo's black */
  --char: #1e1e1e;
  --char-2: #2a2a2a;
  --silver: #b8b5af;        /* the logo's lines */
  --silver-l: #d8d5cf;
  --stone: #f4f2ee;
  --stone-2: #ebe7e0;
  --white: #ffffff;
  --body: #3a3a3a;
  --muted: #67645f;
  --line: #e2ded7;
  --display: "Forum", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Afacad", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 5rem;
  --wrap: min(1240px, 100% - 2 * clamp(1rem, 4vw, 2.5rem));
  --f-accent: var(--ink); --f-accent-d: #000; --f-bg: #fff; --f-border: #d6d1c8; --f-ink: var(--ink); --f-muted: var(--muted); --f-radius: 12px;
}
html { scroll-padding-top: calc(var(--header-h) + 1rem); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--body); font: 400 1.12rem/1.65 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: .22em; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 400; }
p { margin: 0; }
.wrap { width: var(--wrap); margin-inline: auto; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .8rem 1.2rem; background: #fff; color: var(--ink); border-radius: 999px; }
.skip-link:focus { top: 1rem; }

.label { margin: 0 0 .8rem; font: 500 .82rem/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.kicker { margin: 0 0 .9rem; font: 500 .84rem/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.h1 { font-size: clamp(3rem, 1.7rem + 5vw, 5.8rem); line-height: 1; letter-spacing: .005em; }
.h2 { font-size: clamp(2.1rem, 1.5rem + 2.1vw, 3.3rem); line-height: 1.08; }
.h3 { font: 500 1.2rem/1.3 var(--sans); }
.lede { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); line-height: 1.55; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .7rem 1.7rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font: 500 1.02rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.btn:hover { background: #000; color: #fff; }
.btn .ico { width: 1.1rem; height: 1.1rem; }
.btn-sm { min-height: 42px; padding: .45rem 1.2rem; font-size: .98rem; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--stone-2); border-color: var(--stone-2); color: var(--ink); }
.btn-glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost { background: transparent; border-color: var(--silver); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-wide { width: 100%; white-space: normal; text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.row-c { justify-content: center; }
.more { margin-top: 1.8rem; }

/* Frosted glass, over photos */
.frost { background: rgba(20, 20, 20, .32); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); color: #fff; }
.frost .h2, .frost .h3 { color: #fff; }
.frost .label { color: rgba(255, 255, 255, .85); }

/* Capsules: photos framed like the logo, with its double ring */
.capsule { margin: 0; padding: .45rem; border: 1px solid var(--silver); border-radius: 999px; }
.capsule img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border-radius: 999px; }
.capsule-sm img { aspect-ratio: 5 / 6; }
.orn { display: grid; place-items: center; color: var(--silver); }
.waves { width: 6rem; height: auto; }

/* Header: black, like the logo */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; }
.header-inner { display: flex; align-items: center; gap: 1rem 1.8rem; min-height: var(--header-h); width: var(--wrap); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
.brand-mark { width: auto; height: 3.4rem; }
.brand-name strong { display: block; font: 400 1.65rem/1 var(--display); letter-spacing: .02em; }
.brand-name small { display: block; margin-top: .3rem; font: 400 .98rem/1 var(--display); letter-spacing: .06em; color: var(--silver-l); }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.nav ul a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: #fff; text-decoration: none; letter-spacing: .06em; }
.nav ul a::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .5rem; height: 1px; background: var(--silver); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav-socials { display: none; }
.header-tools { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: transparent; cursor: pointer; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 18px; height: 1.5px; margin: auto; background: #fff; transition: transform .25s var(--ease), background-color .2s; }
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.site-header.is-open .nav-toggle .bars { background: transparent; }
.site-header.is-open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Heroes: the photo full width, everything centred on it */
.hero { position: relative; display: grid; isolation: isolate; background: var(--ink); color: #fff; text-align: center; }
.hero-photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(12, 14, 16, .5), rgba(12, 14, 16, .18)); }
.hero-in { display: grid; justify-items: center; align-content: center; }
.hero .lede { max-width: 34rem; margin-bottom: 1.8rem; color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }
.hero .row { justify-content: center; }
.hero-home { min-height: max(34rem, calc(100svh - var(--header-h))); grid-template-rows: 1fr auto; }
.hero-home .hero-in { padding: clamp(2.5rem, 7vh, 5rem) 0 1.5rem; }
.hero-home h1 { margin: 0 0 1.4rem; }
.hero-home .hero-photo img { object-position: 50% 36%; }
.hero-logo { width: clamp(15rem, 12rem + 14vw, 27rem); height: auto; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .35)); }
.hero-foot { padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0; padding: 0; }
.pills li { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1.3rem .6rem 1rem; border-radius: 999px; background: rgba(20, 20, 20, .3); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; }
.pills .ico { width: 1.1rem; height: 1.1rem; color: #f2d48a; }
.pills strong { font: 400 1.9rem/1 var(--display); }
.pills strong small { font-size: 1rem; opacity: .8; }
.pills span { display: grid; font-weight: 500; line-height: 1.2; }
.pills span small { font-weight: 400; font-size: .9rem; opacity: .85; }
.hero-page { min-height: clamp(24rem, 64vh, 40rem); }
.hero-page .hero-in { padding: 4rem 0; }
.hero-page .h1 { color: #fff; max-width: 16ch; margin-bottom: 1rem; text-shadow: 0 2px 26px rgba(0, 0, 0, .3); }
.hero-short { min-height: clamp(21rem, 50vh, 32rem); }
.crumbs { margin-bottom: 1.2rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; padding: 0; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.crumbs li + li::before { content: "›"; margin-right: .35rem; }
.crumbs a { color: #fff; }

.section { padding-block: clamp(4.5rem, 9vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-stone { background: var(--stone); }
.section-ink { background: var(--ink); color: var(--silver-l); }
.section-ink .h2 { color: #fff; }
.section-ink .label { color: var(--silver); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head-c { text-align: center; }
.sec-head-c .h2 { max-width: 22ch; margin-inline: auto; }

/* Home: intro with a tall capsule */
.intro-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.intro .capsule { max-width: 25rem; justify-self: center; width: 100%; }
.intro .h2 { margin-bottom: 1.3rem; max-width: 18ch; }
.statement { font-size: 1.22rem; line-height: 1.7; max-width: 38rem; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 2rem 0 0; padding: 0; max-width: 34rem; }
.facts li { display: flex; align-items: center; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.facts .ico { color: var(--muted); }
.facts-bar { background: var(--stone); }
.facts-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; max-width: none; margin: 0 auto; padding: 1rem 0; }
.facts-row li { border: 0; padding: .3rem 0; }

/* Home: the spaces as a row of capsules */
.spaces-sec { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.space { display: grid; justify-items: center; gap: 1rem; color: var(--ink); text-decoration: none; }
.space .capsule { width: 100%; transition: border-color .3s; }
.space img { transition: transform .8s var(--ease); }
.space:hover .capsule { border-color: var(--ink); }
.space-name { display: inline-flex; align-items: center; gap: .5rem; font: 400 1.55rem/1.1 var(--display); }
.space-name .ico { width: 1.1rem; height: 1.1rem; transition: transform .25s var(--ease); }
.space:hover .space-name .ico { transform: translateX(4px); }

/* Home: the view, with a frosted band on the photo */
.view { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(30rem, 88vh, 50rem); }
.view-photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.view-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.view-in { padding-block: clamp(1rem, 3vw, 2rem); }
.view-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; padding: clamp(1.5rem, 3.5vw, 2.6rem); border-radius: 28px; }
.view-band p:not(.label) { font-size: 1.15rem; }
.view-band .more { margin-top: 1.2rem; }

/* Reviews */
.quote-big { max-width: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.quote-big blockquote { margin: 0; }
.quote-big p { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.5rem)/1.15 var(--display); color: #fff; }
.quote-big figcaption { margin-top: 1.2rem; letter-spacing: .14em; text-transform: uppercase; font-size: .88rem; color: var(--silver); }
.reviews { columns: 3 18rem; column-gap: clamp(1rem, 2vw, 1.6rem); }
.reviews-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.review { break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.6rem); padding: 1.6rem 1.8rem 1.4rem; border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.reviews-2 .review { margin: 0; background: var(--char); border-color: var(--char-2); }
.review blockquote { margin: 0; }
.review blockquote p { font: 400 1.45rem/1.3 var(--display); color: var(--ink); }
.reviews-2 .review blockquote p { color: #fff; }
.review figcaption { display: grid; gap: .1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.reviews-2 .review figcaption { border-color: var(--char-2); }
.review figcaption strong { font-weight: 500; color: var(--ink); }
.reviews-2 .review figcaption strong { color: #fff; }
.review figcaption strong span { font-weight: 400; color: var(--muted); }
.review figcaption small { color: var(--muted); font-size: .92rem; }
.reviews-2 .review figcaption small { color: var(--silver); }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.3rem; color: var(--muted); }
.note-c { justify-content: center; text-align: center; }
.big-scores { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; }
.big-score { display: grid; justify-items: center; align-content: center; gap: .2rem; aspect-ratio: 3 / 4.2; padding: 1.5rem 1rem; border: 1px solid var(--ink); border-radius: 999px; outline: 1px solid var(--silver); outline-offset: 6px; text-align: center; }
.bs-src { font: 500 .82rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.bs-num { font: 400 clamp(3.4rem, 2.5rem + 3vw, 5rem)/1 var(--display); color: var(--ink); }
.bs-num small { font-size: .4em; color: var(--muted); }
.bs-count { color: var(--ink); font-weight: 500; }
.bs-note { max-width: 11rem; font-size: .9rem; color: var(--muted); line-height: 1.35; }
.subs-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 60rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.subs { padding: 1.4rem 1.6rem; border-radius: 26px; background: var(--stone); }
.subs h3 { margin-bottom: .8rem; font: 500 .82rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.subs dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1rem; margin: 0; }
.subs dt { font-size: .95rem; color: var(--muted); }
.subs dd { margin: 0; font: 400 1.7rem/1.1 var(--display); color: var(--ink); }

/* The booking band: the terrace bar at dusk, centred */
.cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 12vw, 8.5rem); color: #fff; text-align: center; background: var(--ink); }
.cta-photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14, 16, 20, .55), rgba(14, 16, 20, .2)); }
.cta-in { display: grid; justify-items: center; gap: 1rem; }
.cta-mark { width: auto; height: 5.5rem; }
.cta .h2 { color: #fff; max-width: 18ch; }
.cta .lede { max-width: 32rem; color: #fff; }
.cta .row { justify-content: center; margin-top: .6rem; }

/* The villa: rooms in alternating rows */
.rooms { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.room { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.room .capsule { max-width: 22rem; width: 100%; justify-self: center; }
.room:nth-child(even) .capsule { order: 2; }
.room-num { font: 400 1.3rem/1 var(--display); color: var(--silver); letter-spacing: .1em; margin-bottom: .8rem; }
.room .h2 { margin-bottom: 1rem; }
.room-text p:last-child { max-width: 34rem; font-size: 1.18rem; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.filter { min-height: 44px; padding: .5rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 1rem/1 var(--sans); cursor: pointer; }
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery-grid { columns: 3 15rem; column-gap: clamp(.6rem, 1.2vw, 1rem); }
.gallery-grid .tile { break-inside: avoid; margin-bottom: clamp(.6rem, 1.2vw, 1rem); }
.gallery-grid .tile.is-entering { animation: tile-in .45s var(--ease) both; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tile { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--stone); cursor: zoom-in; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(12, 12, 12, .96); opacity: 0; transition: opacity .25s; }
.lightbox.is-open { display: block; }
.lightbox.is-visible { opacity: 1; }
.lb-stage { position: absolute; inset: 4.5rem 4.5rem 4rem; display: grid; place-items: center; }
.lb-figure { margin: 0; display: grid; justify-items: center; gap: .8rem; max-height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100vh - 11rem); width: auto; height: auto; border-radius: 12px; transition: opacity .2s; }
.lb-img.is-loading { opacity: .3; }
.lb-caption { color: var(--silver-l); text-align: center; }
.lb-counter { position: absolute; left: 1.4rem; top: 1.4rem; margin: 0; color: var(--silver); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; cursor: pointer; }
.lb-btn:hover { background: #fff; color: var(--ink); }
.lb-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-btn:disabled { display: none; }
.lb-prev { left: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-next { right: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-close { right: 1rem; top: 1rem; }
.amenities { columns: 3 16rem; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.amen-group { break-inside: avoid; margin-bottom: 2rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.amen-group h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; font: 400 1.6rem/1.1 var(--display); }
.amen-group h3 .ico { color: var(--muted); }
.amen-group ul { list-style: none; margin: 0; padding: 0; }
.amen-group li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.rules { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 62rem; margin: 0 auto; padding: 0; }
.rules li { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 500; }
.rules .ico { color: var(--muted); }

/* Location */
.loc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.loc .capsule { max-width: 23rem; width: 100%; justify-self: center; }
.loc .h2 { margin-bottom: 1.6rem; max-width: 20ch; }
.near { list-style: none; margin: 0; padding: 0; }
.near li { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; }
.near .ico { align-self: center; color: var(--muted); }
.near span { color: var(--ink); font-weight: 500; }
.near i { flex: 1; border-bottom: 1px dotted var(--silver); transform: translateY(-.3em); }
.near strong { font: 400 1.5rem/1 var(--display); color: var(--ink); white-space: nowrap; }
.tips-sec { position: relative; isolation: isolate; padding-block: clamp(4.5rem, 10vw, 8rem); }
.tips-photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.tips-photo img { width: 100%; height: 100%; object-fit: cover; }
.tips-photo::after { content: ""; position: absolute; inset: 0; background: rgba(12, 14, 16, .28); }
.tips-sec .sec-head .h2 { color: #fff; }
.tips-sec .sec-head .label { color: rgba(255, 255, 255, .88); }
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tip { padding: 1.6rem 1.7rem; border-radius: 26px; }
.tip .ico { width: 1.6rem; height: 1.6rem; margin-bottom: .9rem; }
.tip .h3 { margin-bottom: .4rem; }

/* Contact */
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.form-card .h2 { margin-bottom: .4rem; }
.form-intro { margin-bottom: 1.2rem; color: var(--muted); }
.side-card { display: grid; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: 32px; background: var(--ink); color: var(--silver-l); }
.side-card .capsule { width: 58%; justify-self: center; border-color: var(--char-2); }
.side-card .h2 { color: #fff; font-size: 2rem; text-align: center; }
.side-card > p:not(:last-child) { text-align: center; }
.side-list { list-style: none; display: grid; gap: .8rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--char-2); }
.side-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; }
.side-list .ico { color: var(--silver); margin-top: .2rem; }
.card { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.way { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.3rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.way:hover { border-color: var(--ink); }
.way .ico { width: 1.5rem; height: 1.5rem; color: var(--muted); }
.way small { display: block; color: var(--muted); font-size: .88rem; }
.way strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
.av { --av-free: #eef2ee; --av-free-ink: #253b2c; --av-booked: #ece6de; --av-booked-ink: #7a5a3d; --av-sel: var(--ink); --av-range: #dcd8d0; --av-line: var(--line); }

/* Footer: black, the full logo */
.site-footer { background: var(--ink); color: var(--silver-l); }
.footer-top { display: grid; justify-items: center; gap: 1.2rem; padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--char-2); text-align: center; }
.footer-logo-img { width: clamp(12rem, 10rem + 8vw, 16rem); height: auto; }
.footer-scores { letter-spacing: .08em; color: var(--silver); }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; padding-block: 2.5rem; }
.footer-h { margin: 0 0 .8rem; font: 500 .8rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: .35rem; }
.footer-links a, .footer-contact a { color: #fff; text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-contact { display: grid; gap: .55rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .6rem; }
.footer-contact .ico { color: var(--silver); }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--char-2); font-size: .95rem; color: var(--silver); }
.site-footer .colophon a { color: #fff; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1080px) {
  .nav-toggle { display: grid; place-items: center; }
  .header-tools { margin-left: auto; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; margin: 0; padding: 1rem max(1rem, calc((100vw - 1240px) / 2)) 1.5rem; background: var(--ink); border-top: 1px solid var(--char-2); }
  .site-header.is-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: .3rem; }
  .nav ul a { width: 100%; min-height: 3.2rem; padding: 0 1.2rem; font-size: 1.15rem; border: 1px solid var(--char-2); border-radius: 999px; }
  .nav ul a::after { display: none; }
  .nav ul a[aria-current="page"] { background: var(--char); }
  .nav-socials { display: flex; justify-content: center; gap: .6rem; margin: 1.1rem 0 0; }
  .nav-socials a { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--char-2); border-radius: 50%; color: #fff; }
  .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .book { grid-template-columns: minmax(0, 1fr); }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-in > :first-child { grid-column: 1 / -1; max-width: 30rem; }
}
@media (max-width: 860px) {
  .intro-in, .loc, .room, .view-band { grid-template-columns: minmax(0, 1fr); }
  .intro .capsule, .loc .capsule, .room .capsule { max-width: 17rem; }
  .room:nth-child(even) .capsule { order: 0; }
  .room-text { text-align: center; }
  .room-text p:last-child { margin-inline: auto; }
  .reviews-2, .tips { grid-template-columns: minmax(0, 1fr); }
  .big-scores { grid-template-columns: minmax(0, 1fr); }
  .big-score { aspect-ratio: auto; border-radius: 999px; padding: 1.1rem 1.5rem; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; column-gap: 1rem; }
  .bs-num { grid-column: 2; grid-row: 1 / span 3; }
  .subs-wrap { grid-template-columns: minmax(0, 1fr); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-row { justify-content: flex-start; }
}
@media (max-width: 600px) {
  :root { --header-h: 4.4rem; }
  .brand-mark { height: 2.9rem; }
  .brand-name strong { font-size: 1.35rem; white-space: nowrap; }
  .brand-name small { font-size: .85rem; }
  .header-inner { gap: .6rem; }
  .header-tools .btn-sm { padding: .45rem .95rem; font-size: .92rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .spaces { gap: 1.5rem .8rem; }
  .space-name { font-size: 1.25rem; }
  .rules, .ways, .footer-in { grid-template-columns: minmax(0, 1fr); }
  .rules li, .way { border-radius: 18px; }
  .subs dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pills li { padding: .5rem 1rem .5rem .8rem; }
  .pills strong { font-size: 1.6rem; }
  .lb-stage { inset: 4rem .5rem 5rem; }
  .lb-prev, .lb-next { top: auto; bottom: 1rem; margin: 0; }
  .lb-prev { left: calc(50% - 3.6rem); }
  .lb-next { right: calc(50% - 3.6rem); }
}
@media (max-width: 400px) {
  .brand-name small { display: none; }
}
@media (max-width: 350px) {
  .header-tools .btn-sm { display: none; }
}
.reviews-2 .review figcaption strong span { color: var(--silver); }
@media (max-width: 600px) {
  .pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .pills li { flex-direction: column; gap: .15rem; padding: .55rem .3rem; border-radius: 22px; text-align: center; }
  .pills .ico { display: none; }
  .pills strong { font-size: 1.5rem; }
  .pills span { font-size: .92rem; }
  .pills span small { font-size: .8rem; }
}

/* ---------- Form (shared by the hospitality sites; themed by --f-* set in each site's CSS) ---------- */
.site-form { display: grid; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.2rem; align-items: end; }
.form-row-tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); gap: .9rem; }
.field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.field label { font-weight: 600; }
.req { color: var(--f-accent); }
.hint { margin: 0; font-size: .92rem; color: var(--f-muted); }
.field input:not([type="checkbox"]), .field textarea, .field select { width: 100%; min-height: 3.1rem; padding: .7rem .9rem; font: inherit; font-size: 1.0625rem; color: var(--f-ink); background: var(--f-bg); border: 2px solid var(--f-border); border-radius: var(--f-radius); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--f-ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--f-accent); outline-offset: 2px; box-shadow: none; border-color: var(--f-ink); background-color: #fff; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field-error { display: flex; gap: .45rem; align-items: center; margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: #b3261e; }
.field-error .ico { width: 1.1rem; height: 1.1rem; }
.field-check { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.field-check input { width: 1.35rem; height: 1.35rem; margin-top: .2rem; accent-color: var(--f-accent); }
.field-check label { font-weight: 400; font-size: .98rem; }
.field-check .field-error { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; font-size: .92rem; color: var(--f-muted); }
.btn-submit { justify-self: start; background: var(--f-accent); color: #fff; }
.btn-submit:hover { background: var(--f-accent-d); color: #fff; }
.btn-submit:disabled { opacity: .65; cursor: progress; }
.form-status { margin: 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-kind="ok"] { color: #1f6b3a; }
.form-status[data-kind="error"] { color: #b3261e; }