/* Creta Verano — full site stylesheet
   EB Garamond + Manrope · bone ground, teal accent (#417671 brand)
   Film-title hero on home, clean interior pages. One voice, no linter-driven second-guessing. */

:root {
  --bg: #e9e4d8;
  --surface: #ded8ca;
  --ink: #24302b;
  --muted: #665d51;
  --accent: #417671;
  --accent-ink: #f2f6f4;
  --line: rgba(36,48,43,.14);
  --on-photo: #f4f7f5;
  --on-photo-soft: rgba(255,255,255,.9);
  --scrim: rgba(10,14,12,.68);
  --scrim-2: rgba(10,14,12,.6);
  --footer-ink: rgba(255,255,255,.72);
  --footer-strong: #f2f6f4;
  --footer-faint: rgba(255,255,255,.5);

  --disp: "EB Garamond", Georgia, "Times New Roman", serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: 13px;
  --step-body: 17px;
  --step-lead: clamp(22px, 2.2vw, 30px);
  --step-head: clamp(40px, 4vw, 56px);
  --step-name: clamp(48px, 9vw, 140px);

  --margin: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:active { opacity: .7; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-wrap: balance;
}
h1 { font-size: var(--step-head); }
h2 { font-size: var(--step-head); }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
footer :focus-visible, .hero :focus-visible, .nav :focus-visible { outline-color: var(--on-photo); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--margin);
  color: var(--on-photo);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav.solid {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav .brand {
  font-family: var(--disp); font-size: 20px; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
}
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { font-size: var(--step-small); text-decoration: none; opacity: .88; }
.nav nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.nav nav a.book { font-weight: 500; }
.nav .lang { font-size: var(--step-small); text-decoration: none; opacity: .7; }
.nav .lang:hover { opacity: 1; }
.nav .burger { display: none; margin-left: auto; background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; padding: 4px; }
@media (max-width: 820px) {
  .nav nav, .nav .lang { display: none; }
  .nav .burger { display: block; }
}

/* sheet drawer */
.backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(8,12,14,.44); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.backdrop.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 89; width: min(88vw, 360px);
  background: var(--bg); color: var(--ink); padding: 24px;
  transform: translateX(100%); transition: transform .32s var(--ease);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: -8px 0 32px rgba(0,0,0,.14);
}
.sheet.on { transform: translateX(0); }
.sheet .pclose { align-self: flex-end; background: none; border: 0; font-size: 26px; cursor: pointer; color: inherit; padding: 4px 8px; }
.sheet .plinks { display: flex; flex-direction: column; }
.sheet .plinks a { font-family: var(--disp); font-size: 24px; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet .pfoot { margin-top: auto; font-size: var(--step-small); }
.sheet .pfoot a { text-decoration: none; }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; color: var(--on-photo); overflow: hidden; }
.hero .pic { position: absolute; inset: 0; }
.hero .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--scrim-2) 0%, transparent 34%, transparent 60%, var(--scrim) 100%); }
.hero .title { position: absolute; left: var(--margin); bottom: 32px; max-width: 90vw; }
.hero .title .line { font-family: var(--disp); font-size: var(--step-name); line-height: .9; letter-spacing: -0.03em; }
.hero .title .sub { margin-top: 12px; font-size: var(--step-small); color: var(--on-photo-soft); }

/* ---------- interior page header ---------- */
.pagehead { padding: 140px var(--margin) 48px; }
.pagehead h1 { font-size: clamp(40px, 6vw, 72px); }
.pagehead .view { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }

/* ---------- sections ---------- */
section { padding: clamp(64px, 8vw, 120px) var(--margin); }
.wrap { max-width: 1240px; margin: 0 auto; }

/* intro (home) */
.intro .grid p {
  max-width: 56ch; margin-left: auto;
  font-family: var(--disp); font-size: var(--step-lead); line-height: 1.28; text-indent: 3em;
}
@media (max-width: 640px) { .intro .grid p { text-indent: 0; margin-left: 0; } }

/* rooms — menu sheet (home) + cards (index) + detail */
.rooms h2 { margin-bottom: 32px; }
.room {
  display: grid; grid-template-columns: 1fr 160px 160px; gap: 16px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.room:last-child { border-bottom: 1px solid var(--line); }
.room .name { font-family: var(--disp); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; }
.room .view, .room .beds { font-size: var(--step-small); color: var(--muted); }
.room .beds { text-align: right; }
@media (max-width: 640px) { .room { grid-template-columns: 1fr; gap: 4px; padding: 24px 0; } .room .beds { text-align: left; } }

/* featured rooms on home */
.featrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.featrow .rm { text-decoration: none; }
.featrow .rm img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.featrow .rm span { display: block; margin-top: 10px; font-family: var(--disp); font-size: 20px; }
@media (max-width: 700px) { .featrow { grid-template-columns: 1fr; } }

/* room index cards */
.rcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.rcgrid .rccard { text-decoration: none; }
.rcgrid .rccard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.rcgrid .rccard h3 { margin-top: 14px; font-size: 26px; }
.rcgrid .rccard p { margin-top: 6px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 640px) { .rcgrid { grid-template-columns: 1fr; } }

/* room detail */
.roomdetail .lead img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.roomdetail .desc { max-width: 60ch; margin: 32px 0; font-size: var(--step-body); }
.roomdetail .gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.roomdetail .gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 640px) { .roomdetail .gal { grid-template-columns: 1fr; } }

/* amenities */
.amenities { background: var(--surface); }
.amenities h2 { margin-bottom: 24px; }
.amenities ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.amenities li { padding: 16px 0; font-size: var(--step-body); break-inside: avoid; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .amenities ul { columns: 1; } }

/* gallery */
.galgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.galgrid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
@media (max-width: 700px) { .galgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* reviews */
.reviews .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-bottom: 24px; }
.reviews blockquote { margin: 0; font-family: var(--disp); font-size: var(--step-lead); line-height: 1.25; }
.reviews cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--body); font-size: var(--step-small); color: var(--muted); }
.reviews .score { font-family: var(--disp); font-size: 28px; }
.reviews .score span { font-family: var(--body); font-size: var(--step-small); color: var(--muted); }
@media (max-width: 800px) { .reviews .cols { grid-template-columns: 1fr; gap: 32px; } }

/* band (CTA) */
.band { background: var(--ink); color: var(--on-photo); text-align: center; }
.band p { margin: 16px auto 32px; max-width: 44ch; color: var(--footer-ink); }

/* location */
.location figure img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.location h2 { margin: 48px 0 24px; }
.neartable { max-width: 720px; }
.near { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: var(--step-body); }
.near b { font-weight: 500; }

/* contact */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.contact .card { background: var(--surface); padding: 40px; }
.contact .card .row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: var(--step-small); }
.contact .card .row b { font-family: var(--body); font-weight: 500; text-align: right; }
.contact .card .row b a { text-decoration: none; }
.contact .card .btn { margin-top: 24px; }
.contact figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 800px) { .contact .wrap { grid-template-columns: 1fr; } }

/* faq page */
.faqpage details { border-top: 1px solid var(--line); padding: 20px 0; }
.faqpage details:last-child { border-bottom: 1px solid var(--line); }
.faqpage summary { cursor: pointer; list-style: none; font-family: var(--disp); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; display: flex; justify-content: space-between; gap: 24px; }
.faqpage summary::-webkit-details-marker { display: none; }
.faqpage summary::after { content: "+"; font-family: var(--body); font-size: 22px; color: var(--accent); }
.faqpage details[open] summary::after { transform: rotate(45deg); }
.faqpage .a { margin-top: 12px; max-width: 60ch; }

/* button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 32px;
  font-family: var(--body); font-weight: 500; font-size: var(--step-small); letter-spacing: .01em;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 0;
  text-decoration: none; cursor: pointer; transition: background .18s var(--ease);
}
.btn:hover { background: #2e5a55; }
.btn:active { transform: translateY(1px); }

/* footer */
footer { background: var(--ink); color: var(--footer-ink); padding: 56px var(--margin) 40px; }
footer .name { font-family: var(--disp); font-size: 28px; color: var(--footer-strong); }
footer .cols { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 24px; font-size: var(--step-small); line-height: 1.7; }
footer .cols a { color: var(--footer-ink); text-decoration: none; white-space: nowrap; }
footer .cols a:hover { color: var(--footer-strong); text-decoration: underline; }
footer .fine { margin-top: 32px; font-size: 12px; color: var(--footer-faint); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

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