/* Device-responsive layer: loaded last so it can safely harmonise every section. */
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;overflow-x:hidden}
img,video,svg{max-width:100%}
input,select,textarea,button{max-width:100%}

/* -------- Tablet / compact desktop -------- */
@media (max-width:1199px){
  .site-header,.site-header.scrolled{padding:18px 24px}
  .menu-toggle{display:block;z-index:103;justify-self:end;cursor:pointer}
  .nav{
    position:fixed;inset:0;z-index:102;background:var(--ivory);color:var(--ink);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:20px;padding:96px clamp(28px,8vw,90px) 50px;
    transform:translateX(100%);opacity:0;visibility:hidden;
    transition:transform .35s ease,opacity .3s ease,visibility .35s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav.open{transform:translateX(0);opacity:1;visibility:visible}
  .nav>a{font-family:var(--serif);font-size:clamp(28px,4vw,46px);letter-spacing:-.015em;text-transform:none;line-height:1.08}
  .nav .nav-book{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:12px;padding:14px 18px}
  .language-switch{margin:18px 0 0!important;padding:18px 0 0!important;border-left:0!important;border-top:1px solid rgba(31,38,31,.16);width:100%;gap:9px!important}
  .lang-btn{font-size:12px!important;padding:5px!important}
  .menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}

  .hero-copy{padding-left:6vw;padding-right:6vw}
  .hero h1{font-size:clamp(58px,9.5vw,104px);max-width:900px}
  .editorial-section{padding:110px 6vw}
  .split-story{gap:5vw}
  .split-image{height:620px}
  .garden{grid-template-columns:1fr 1fr;min-height:680px}
  .garden-media{min-height:680px}
  .garden-copy{padding:8vw 6vw}
  .gallery-grid{grid-template-rows:360px 360px}
  .leonidio{padding:120px 6vw 90px;gap:5vw}
  .details{gap:5vw}
  .rating-band{grid-template-columns:auto 1fr auto;gap:26px}
  .rating-band .eyebrow{grid-column:1/-1;margin-bottom:0}
  .booking{padding:120px 6vw}
  .availability-fields{grid-template-columns:1fr 1fr}
  .availability-fields label{border-bottom:1px solid var(--line)}
  .check-button{min-height:64px}
  .availability-fields .check-button{grid-column:1/-1;width:100%}
  .inquiry-grid{grid-template-columns:1fr 1fr}
  .inquiry-grid .message-field{grid-column:1/-1}
  .footer{padding-left:4vw;padding-right:4vw}
}

/* Tablet-specific composition */
@media (min-width:768px) and (max-width:1199px){
  .hero{min-height:88svh}
  .hero-copy{min-height:88svh;padding-top:20vh;padding-bottom:7vh}
  .hero-meta{left:24px;top:96px}

  .intro.has-editorial-photo{
    grid-template-columns:52px minmax(92px,.34fr) minmax(280px,.9fr) minmax(340px,1.18fr)!important;
    gap:26px!important;padding-left:5vw!important;padding-right:5vw!important;align-items:center!important;
  }
  .intro.has-editorial-photo .intro-kicker{align-self:stretch;display:flex;flex-direction:column;align-items:center}
  .intro .vertical-note{font-size:clamp(18px,2.6vw,30px)!important;min-height:500px!important;letter-spacing:.20em!important;color:rgba(31,38,31,.22)!important}
  .intro-editorial-photo{width:100%!important;height:min(64vw,650px)!important;min-height:500px!important;max-height:680px!important;margin:0!important;padding:8px!important}
  .intro.has-editorial-photo .intro-copy{padding-top:0!important}
  .intro h2{font-size:clamp(52px,7vw,78px)}
  .lead{font-size:clamp(23px,3vw,30px);margin-top:34px}

  .guestbook-head{gap:5vw}
  .guestbook-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-form{grid-template-columns:.65fr 1.35fr;gap:5vw}
}

/* -------- Phones and narrow portrait tablets -------- */
@media (max-width:767px){
  .site-header,.site-header.scrolled{padding:14px 18px}
  .brand-name{font-size:11px}.brand-place{font-size:8px}
  .nav{padding:82px 24px 36px}
  .nav>a{font-size:34px}
  .nav .nav-book{width:100%;justify-content:center;text-align:center;font-size:10px}

  .hero{min-height:100svh;border-radius:0}
  .hero-image{object-position:56% center}
  .hero-shade{background:linear-gradient(0deg,rgba(13,21,15,.64),rgba(13,21,15,.06) 66%),linear-gradient(90deg,rgba(13,21,15,.25),transparent 70%)}
  .hero-meta{left:20px;top:88px;font-size:8px;letter-spacing:.18em}
  .hero-copy{min-height:100svh;padding:28vh 20px 32px;justify-content:flex-end}
  .hero h1{font-size:clamp(50px,15vw,78px);line-height:.94;max-width:100%}
  .hero-bottom{margin-top:28px;align-items:flex-end;gap:18px}
  .hero-bottom p{font-size:13px;line-height:1.6;max-width:78%}
  .round-link{width:46px;height:46px;flex:0 0 46px}

  .editorial-section{padding:78px 20px}
  .intro.has-editorial-photo{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:80px 20px!important}
  .intro.has-editorial-photo .section-index{grid-column:1!important;margin-bottom:26px;font-size:14px;opacity:.55}
  .intro.has-editorial-photo .intro-kicker{grid-column:1!important;display:block!important;margin-bottom:20px}
  .intro.has-editorial-photo .intro-kicker .eyebrow{margin-bottom:10px}
  .intro .vertical-note{display:block!important;writing-mode:horizontal-tb!important;transform:none!important;min-height:0!important;margin:0!important;font-size:11px!important;letter-spacing:.20em!important;color:rgba(31,38,31,.45)!important;white-space:normal!important}
  .intro-editorial-photo{grid-column:1!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/5;margin:8px 0 38px!important;padding:7px!important;align-self:auto!important}
  .intro-editorial-photo img{object-position:center 56%!important}
  .intro.has-editorial-photo .intro-copy{grid-column:1!important;padding-top:0!important;max-width:none!important}
  .intro h2,.gallery h2{font-size:clamp(46px,13vw,68px);line-height:.98}
  .lead{margin:32px 0 18px;font-size:23px;line-height:1.3}
  .intro-copy>p:not(.lead),.split-copy p{font-size:14px;line-height:1.75}
  .micro-facts{margin-top:34px;gap:12px 18px;font-size:9px}

  .full-image-section{height:64svh;margin:0}
  .image-caption{left:15px;right:15px;bottom:14px;font-size:7px}

  .split-story{display:flex;flex-direction:column;padding-top:78px;padding-bottom:78px;gap:42px}
  .split-image{width:100%;height:64svh;max-height:620px}
  .split-copy h2{font-size:clamp(46px,12vw,66px);margin-bottom:28px}

  .garden{display:flex;flex-direction:column;min-height:0}
  .garden-media{min-height:0;height:62svh;max-height:620px}
  .garden-copy{padding:72px 20px}
  .garden h2{font-size:clamp(52px,14vw,74px);margin-bottom:30px}
  .garden-copy>p:not(.eyebrow){font-size:14px;line-height:1.75}
  .garden-note{font-size:20px!important}

  .gallery{padding-top:84px;padding-bottom:84px}
  .gallery-head{display:block;margin-bottom:44px}
  .gallery-grid{display:flex;flex-direction:column;gap:22px}
  .gallery-grid figure{height:auto;min-height:0}
  .gallery-a img{aspect-ratio:4/5}
  .gallery-b img,.gallery-c img{height:auto;aspect-ratio:4/3}

  .leonidio{display:block;padding:82px 20px}
  .leonidio h2{font-size:clamp(52px,14vw,76px)}
  .leonidio-copy{margin-top:42px;padding:0}
  .leonidio-copy p{font-size:14px;line-height:1.75}
  .leonidio-cards{display:block;margin-top:58px;border-top:1px solid rgba(248,245,237,.2)}
  .leonidio-cards article,.leonidio-cards article+article{min-height:0;padding:30px 0;border-left:0;border-bottom:1px solid rgba(248,245,237,.16)}
  .leonidio-cards h3{margin:34px 0 12px;font-size:30px}

  .details{display:block;padding-top:82px;padding-bottom:82px}
  .details-title{position:static;margin-bottom:48px}
  .details h2{font-size:clamp(48px,13vw,68px)}
  .detail-row{grid-template-columns:100px 1fr;gap:18px;padding:18px 0}
  .detail-row strong{font-size:13px;line-height:1.5}

  .rating-band{display:block;padding:58px 20px}
  .rating-number{font-size:104px;margin:18px 0 28px}
  .rating-copy{margin-bottom:28px}
  .light-link{white-space:normal}

  .guestbook{padding:82px 20px!important}
  .guestbook-head{display:block!important;padding-bottom:42px!important}
  .guestbook-head h2{font-size:clamp(50px,14vw,72px)!important}
  .guestbook-head>p{margin-top:34px!important;font-size:14px!important}
  .guestbook-list{display:block!important;padding:42px 0 54px!important}
  .review-card{min-height:0!important;margin-bottom:16px;padding:22px!important}
  .review-card blockquote{margin:42px 0 30px!important;font-size:24px!important}
  .review-form{display:block!important;padding-top:48px!important}
  .review-form-intro{margin-bottom:34px}
  .review-form-intro h3{font-size:44px!important}
  .review-fields{display:block!important;border-left:1px solid rgba(248,245,237,.18)}
  .review-fields>label,.rating-field{padding:18px!important}
  .review-submit{width:100%}

  .booking{padding:82px 20px}
  .booking h2{font-size:clamp(52px,14vw,76px)}
  .availability-card,.inquiry-card{margin-top:38px}
  .availability-fields{display:block}
  .availability-fields label{border-right:0;padding:18px 4px}
  .check-button{width:100%;min-height:58px;padding:0 18px;margin-top:10px}
  .inquiry-card{padding:34px 0}
  .inquiry-head{padding:0 4px 26px}
  .inquiry-grid{display:block;border-top:1px solid var(--line)}
  .inquiry-grid label,.inquiry-grid .message-field{border-right:0;padding:18px 4px;grid-column:auto}
  .consent-row{margin:18px 4px}
  .request-button{width:100%;margin:8px 0 0;min-height:58px}
  .booking-actions{display:block}
  .booking-button{width:100%;min-width:0;margin-bottom:10px}

  .footer{display:block;padding:58px 20px 24px}
  .footer-center{text-align:left;margin:34px 0;font-size:22px}
  .back-top{display:inline-block}
  .footer-bottom{display:flex;flex-direction:column;gap:8px;margin-top:44px}
}

/* Very small phones */
@media (max-width:390px){
  .hero h1{font-size:48px}
  .hero-bottom p{max-width:82%;font-size:12px}
  .intro h2,.gallery h2,.split-copy h2,.details h2{font-size:43px}
  .garden h2,.leonidio h2,.booking h2,.guestbook-head h2{font-size:48px!important}
  .detail-row{grid-template-columns:84px 1fr}
}

/* Short landscape phones: prioritise usable vertical space. */
@media (max-height:520px) and (orientation:landscape){
  .hero,.hero-copy{min-height:620px}
  .nav{justify-content:flex-start;padding-top:72px}
  .nav>a{font-size:27px}
  .intro-editorial-photo{height:min(86vh,520px)!important;aspect-ratio:auto!important}
}

/* Touch devices: comfortable targets without hover dependency. */
@media (hover:none) and (pointer:coarse){
  .nav a,.lang-btn,.round-link,.text-link,.booking-button,.check-button,.request-button,.review-submit{min-height:44px}
  .lang-btn{min-width:44px}
  .stars label{padding:5px}
}

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