:root{
--green:#465b4b;
--ink:#35483a;
--gold:#a9905b;
--cream:#f9f7f1;
--muted:#788174;
--line:#dce0d4}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:35px}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font:19px/1.75 Arial,Helvetica,sans-serif}
a{
color:inherit;
text-decoration:none}
button{
font:inherit;
cursor:pointer}
img{
display:block;
max-width:100%}
h1,h2,h3,p{
margin:0}
h1,h2,h3{
font-family:Georgia,'Times New Roman',serif;
font-weight:400;
line-height:1.12;
letter-spacing:-1.5px}
h1{
font-size:clamp(60px,5.4vw,92px)}
h2{
font-size:clamp(42px,3.8vw,62px)}
h3{
font-size:29px;
letter-spacing:-.8px}
em{
font-weight:400}
.eyebrow{
font-size:12px;
font-weight:500;
letter-spacing:2px;
color:#9d885f;
margin-bottom:25px;
display:block}
.light{
color:#e3d5b5}
.skip{
position:fixed;
top:-100px;
left:20px;
background:white;
padding:10px;
z-index:99}
.skip:focus{
top:10px}
a:focus-visible,button:focus-visible{
outline:3px solid var(--gold);
outline-offset:5px}
header{
position:absolute;
left:0;
right:0;
top:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:25px 4%;
color:white;
border-bottom:1px solid #ffffff33;
height:135px}
header nav{
display:flex;
gap:28px;
font-size:15px}
header nav a:hover{
color:#e6d3a6}
.brand{
display:flex;
align-items:center;
gap:14px;
flex-shrink:0}
.brand>img{
width:58px;
height:63px;
object-fit:contain}
.brand>span{
font:27px/1.1 Georgia,serif;
white-space:nowrap}
.brand small{
display:block;
font:9px/1.4 Arial,sans-serif;
letter-spacing:2px;
margin-top:10px}
.header-right{
display:flex;
gap:26px;
align-items:center;
font-size:15px}
.reserve{
display:block;
border:1px solid #ffffff88;
padding:14px 21px;
font-size:14px}
.reserve:hover{
background:#fff2}
#menu-button{
display:none}
#mobile-menu{
position:absolute;
top:105px;
left:0;
right:0;
background:var(--green);
padding:25px 7%;
box-shadow:0 15px 35px #0003}
#mobile-menu>a{
display:block;
padding:10px 0;
font-size:18px}
#mobile-menu[hidden]{
display:none}
.hero{
position:relative;
min-height:760px;
height:94svh;
max-height:1000px;
color:white;
background:var(--green);
overflow:hidden}
.hero-slide{
position:absolute;
inset:0;
opacity:0;
background-size:cover;
background-position:center;
transform:scale(1.035);
transition:opacity 1.4s,transform 8s}
.hero-slide.active{
opacity:1;
transform:scale(1)}
.hero-shade{
position:absolute;
inset:0;
background:linear-gradient(0deg,#142b28b0,transparent 60%),linear-gradient(90deg,#162c294f,#162c2910),linear-gradient(180deg,#102322a6,transparent 35%)}
.hero-copy{
position:relative;
padding:260px 7% 170px;
text-align:center}
.hero h1{
line-height:1.14;
text-shadow:0 3px 25px #0002}
.hero h1 em{
color:#f2e7d1;
font-size:.88em}
.hero p{
font-size:21px;
color:#fff6e8;
margin:28px 0 33px}
.button{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:35px;
padding:18px 26px;
font-size:16px;
line-height:1.4;
transition:transform .25s,background .25s}
.button:hover{
transform:translateY(-2px)}
.ivory{
background:var(--cream);
color:var(--ink)}
.ivory:hover{
background:#e9e3d5}
.green{
background:var(--green);
color:white}
.green:hover{
background:#304733}
.hero-bottom{
position:absolute;
left:7%;
right:7%;
bottom:40px;
display:flex;
align-items:center;
justify-content:space-between;
font-size:11px;
letter-spacing:1.5px}
.hero-bottom>a>span{
margin-left:20px}
.slide-controls{
display:flex;
gap:17px;
align-items:center}
.slide-controls button{
width:36px;
height:36px;
background:none;
color:white;
border:1px solid #ffffff66;
line-height:1;
font-size:19px}
.slide-controls>span{
font-size:12px}
.booking{
position:relative;
max-width:1270px;
margin:-1px auto 0;
padding:35px 45px;
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
background:white;
box-shadow:0 10px 30px #34433a09;
border-bottom:1px solid var(--line)}
.booking .eyebrow{
font-size:10px;
letter-spacing:1.5px;
margin-bottom:9px}
.booking h2{
font-size:31px;
letter-spacing:-.8px}
.booking-phone{
font-size:20px;
border-left:1px solid var(--line);
padding-left:35px;
white-space:nowrap}
.booking-phone>span{
font-size:10px;
color:var(--muted);
letter-spacing:1.5px;
display:block;
margin-bottom:9px}
.booking .button{
font-size:15px;
padding:19px 25px}
.wrap{
max-width:1450px;
padding:100px 7%;
margin:auto}
.welcome{
text-align:center;
padding-top:110px;
padding-bottom:90px;
max-width:1050px}
.welcome h2{
line-height:1.17}
.welcome>p{
font-size:19px;
max-width:760px;
margin:30px auto 0;
color:var(--muted);
line-height:1.85}
.hotel-signature{
font:italic 25px Georgia,serif;
margin-top:35px;
color:#9b895f}
.visual-menu{
max-width:1450px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
padding:0 5% 20px}
.visual-menu>a{
position:relative;
height:320px;
display:block;
overflow:hidden;
color:white}
.visual-menu img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s}
.visual-menu>a:hover img{
transform:scale(1.045)}
.visual-menu>a:after{
position:absolute;
content:'';
inset:0;
background:linear-gradient(0deg,#142b28cc,transparent 80%)}
.visual-menu>a>div{
position:absolute;
left:25px;
right:25px;
bottom:28px;
z-index:1}
.visual-menu small{
display:block;
font-size:10px;
letter-spacing:1.4px;
color:#eadfc6;
margin-bottom:15px}
.visual-menu h3{
font-size:27px;
letter-spacing:-.6px}
.visual-menu h3 span{
font-family:Arial;
float:right;
font-size:24px}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:45px;
margin-bottom:45px}
.section-head>p{
max-width:320px;
font-size:18px;
color:var(--muted)}
.text-link{
display:inline-block;
border-bottom:1px solid var(--gold);
padding-bottom:8px;
margin-top:25px;
font-size:15px;
white-space:nowrap}
.room-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px}
.room-card>div{
position:relative;
overflow:hidden}
.room-card img{
width:100%;
height:355px;
object-fit:cover;
transition:transform .5s}
.room-card:hover img{
transform:scale(1.04)}
.room-card>div>span{
position:absolute;
bottom:0;
right:0;
width:48px;
height:48px;
background:var(--cream);
display:grid;
place-items:center;
font-size:25px;
color:var(--gold)}
.room-card>small{
display:block;
font-size:10px;
letter-spacing:1px;
color:#9b895f;
margin:24px 0 13px}
.room-card h3{
font-size:29px}
.room-card p{
color:var(--muted);
font-size:17px;
line-height:1.6;
margin-top:16px}
.relax{
display:grid;
grid-template-columns:1.1fr 1fr;
background:#edf0e7}
.relax-photo{
position:relative;
min-height:610px}
.relax-photo>img{
width:100%;
height:100%;
object-fit:cover;
position:absolute}
.photo-tag{
position:absolute;
right:0;
bottom:35px;
background:var(--cream);
padding:17px 25px;
font-size:10px;
letter-spacing:1.6px;
color:#8c7953}
.relax-copy{
padding:85px 13% 75px}
.relax-copy h2{
font-size:51px}
.relax-copy p{
color:var(--muted);
font-size:18px;
margin-top:27px}
.experience-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px}
.experience-grid article{
position:relative;
padding-bottom:48px}
.experience-grid img{
width:100%;
height:340px;
object-fit:cover}
.experience-grid article>div{
position:relative;
margin:-28px 30px 0 0;
background:var(--cream);
padding:27px 5px 0 0}
.experience-grid small{
font-size:11px;
letter-spacing:1px;
color:#a08b61;
display:block;
margin-bottom:15px}
.experience-grid h3{
font-size:34px}
.experience-grid p{
font-size:18px;
color:var(--muted);
margin-top:12px}
.business{
background:var(--green);
color:white}
.business-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:10%;
align-items:center}
.business-inner p{
font-size:20px;
line-height:1.8;
color:#e1e6db;
margin-bottom:30px}
.business h2{
font-size:55px}
.location{
display:grid;
grid-template-columns:1fr 1fr;
gap:12%;
align-items:center}
.location>div>p{
margin-top:30px;
color:var(--muted);
font-size:19px}
.contact-card{
border:1px solid var(--line);
padding:40px}
.phone{
display:block;
font:34px Georgia,serif;
letter-spacing:-.7px}
.email{
display:block;
font-size:19px;
margin-top:15px;
color:#8c7953}
.contact-card p{
color:var(--muted);
font-size:17px;
line-height:1.7;
margin:25px 0}
.contact-card .button{
font-size:15px}
.contact-card .eyebrow{
font-size:11px}
footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
background:#344538;
color:#dce2d8;
padding:45px 5%;
font-size:13px}
footer .brand>span{
font-size:24px}
footer .brand small{
font-size:8px}
footer>div>a,footer>div>span{
display:block}
footer>div>span{
font-size:12px;
color:#b6c2b2;
margin-top:8px}
footer small{
font-size:11px;
color:#b8c4b2;
display:block;
margin-top:8px}
.mobile-book{
display:none}
@media(min-width:1750px){
header nav{
font-size:17px;
gap:38px}
.header-right{
font-size:17px}
.reserve{
font-size:16px}
.hero-copy{
padding-top:280px}
.brand>span{
font-size:31px}
.brand>img{
width:65px;
height:70px}
.booking{
max-width:1400px}
}

@media(max-width:1100px){
header{
gap:25px;
height:120px;
padding:20px 4%}
header nav{
gap:22px;
font-size:13px}
.brand>span{
font-size:24px}
.brand>img{
width:50px;
height:55px}
.brand small{
font-size:8px;
letter-spacing:1.2px}
.header-right{
gap:18px;
font-size:13px}
.reserve{
font-size:12px;
padding:13px 15px}
.hero{
min-height:730px}
.hero-copy{
padding-top:245px}
.hero h1{
font-size:68px}
.booking{
margin:0;
gap:25px;
padding:30px 5%}
.booking h2{
font-size:28px}
.booking-phone{
font-size:17px;
padding-left:25px}
.booking .button{
font-size:13px;
padding:18px 22px}
.section-head{
gap:30px}
.section-head>p{
font-size:16px;
max-width:270px}
.section-head .text-link{
font-size:13px}
.room-card h3{
font-size:26px}
.room-card img{
height:310px}
.visual-menu{
gap:20px}
.visual-menu>a{
height:280px}
.visual-menu h3{
font-size:23px}
.visual-menu>a>div{
left:20px;
right:20px}
.relax-copy{
padding:70px 11%}
.relax-copy h2{
font-size:43px}
.relax-photo{
min-height:600px}
.contact-card{
padding:32px}
.phone{
font-size:29px}
.email{
font-size:16px}
footer{
gap:25px;
font-size:12px}
}

@media(max-width:850px){
header nav{
display:none}
header{
height:105px}
.header-right{
gap:24px}
#menu-button{
display:block;
background:none;
border:0;
color:white;
font-size:25px;
padding:0}
.hero h1{
font-size:63px}
.hero-copy{
padding-top:240px}
.hero .eyebrow{
font-size:10px}
.booking .eyebrow{
font-size:9px}
.booking h2{
font-size:24px}
.booking-phone{
display:none}
.section-head{
flex-wrap:wrap;
align-items:flex-start}
.section-head>p{
max-width:340px}
.section-head>.text-link{
margin-top:0}
.room-grid{
gap:22px}
.room-card h3{
font-size:23px}
.room-card img{
height:290px}
.room-card p{
font-size:16px}
.relax-copy{
padding:60px 9%}
.relax-copy h2{
font-size:40px}
.relax-copy p{
font-size:17px}
.business h2{
font-size:45px}
.business-inner p{
font-size:18px}
.location{
gap:7%}
.contact-card{
padding:27px}
.phone{
font-size:27px}
.email{
font-size:15px}
}

@media(max-width:650px){
body{
font-size:18px}
header{
padding:20px 6%;
gap:15px;
height:105px}
.brand{
gap:10px}
.brand>img{
width:44px;
height:48px}
.brand>span{
font-size:22px}
.brand small{
font-size:7px;
letter-spacing:1px;
margin-top:8px}
.header-right .reserve,.nav-contact{
display:none}
.header-right{
gap:0}
#menu-button{
font-size:25px}
.hero{
min-height:680px;
height:91svh;
max-height:850px}
.hero-copy{
padding:225px 7% 140px}
.hero h1{
font-size:46px;
line-height:1.18;
letter-spacing:-1.5px}
.hero h1 em{
font-size:.9em}
.hero .eyebrow{
font-size:9px;
letter-spacing:1.3px}
.hero p{
font-size:17px;
line-height:1.7;
max-width:300px;
margin:26px auto 30px}
.hero .button{
font-size:14px;
padding:17px 22px;
gap:25px}
.hero-bottom{
left:7%;
right:7%;
bottom:28px;
font-size:8px;
letter-spacing:1px}
.hero-bottom>a>span{
margin-left:10px}
.slide-controls{
gap:10px}
.slide-controls button{
width:30px;
height:30px;
font-size:16px}
.slide-controls>span{
font-size:10px}
.slide-controls #pause{
display:none}
.booking{
display:block;
text-align:center;
padding:28px 7%;
box-shadow:none}
.booking .eyebrow{
font-size:9px;
margin-bottom:12px}
.booking h2{
font-size:30px}
.booking .button{
margin-top:22px;
font-size:15px;
padding:18px 24px}
.wrap{
padding:65px 7%}
.welcome{
padding-top:65px;
padding-bottom:50px}
.eyebrow{
font-size:10px;
letter-spacing:1.5px;
margin-bottom:22px}
h2{
font-size:38px;
letter-spacing:-1.2px}
.welcome>p{
font-size:17px;
line-height:1.8;
margin-top:25px}
.hotel-signature{
font-size:23px;
margin-top:28px}
.visual-menu{
grid-template-columns:1fr;
padding:0 7%;
gap:20px}
.visual-menu>a{
height:250px}
.visual-menu>a>div{
bottom:25px;
left:22px;
right:22px}
.visual-menu h3{
font-size:29px}
.visual-menu small{
font-size:10px;
margin-bottom:12px}
.section-head{
display:block;
margin-bottom:30px}
.section-head>p{
font-size:17px;
max-width:100%;
margin-top:25px}
.section-head>.text-link{
font-size:15px;
margin-top:23px}
.room-grid{
display:flex;
overflow:auto;
scroll-snap-type:x mandatory;
gap:22px;
padding-bottom:18px}
.room-card{
min-width:86%;
scroll-snap-align:start}
.room-card img{
height:350px}
.room-card h3{
font-size:29px}
.room-card>small{
font-size:10px;
margin:20px 0 12px}
.room-card p{
font-size:17px}
.relax{
grid-template-columns:1fr}
.relax-photo{
min-height:350px}
.photo-tag{
font-size:8px;
padding:15px 20px;
bottom:25px;
letter-spacing:1px}
.relax-copy{
padding:55px 7%}
.relax-copy h2{
font-size:40px}
.relax-copy p{
font-size:17px;
margin-top:24px}
.text-link{
font-size:15px}
.experience-grid{
grid-template-columns:1fr;
gap:27px}
.experience-grid article{
padding-bottom:15px}
.experience-grid img{
height:290px}
.experience-grid h3{
font-size:32px}
.experience-grid small{
font-size:10px}
.experience-grid p{
font-size:17px}
.business-inner{
grid-template-columns:1fr;
gap:28px}
.business h2{
font-size:41px}
.business-inner p{
font-size:18px;
margin-bottom:28px}
.business .button{
font-size:14px}
.location{
grid-template-columns:1fr;
gap:35px}
.location>div>p{
font-size:18px;
margin-top:25px}
.contact-card{
padding:28px}
.phone{
font-size:31px}
.email{
font-size:17px;
overflow-wrap:anywhere}
.contact-card .eyebrow{
font-size:10px}
.contact-card p{
font-size:17px}
.contact-card .button{
font-size:14px;
padding:18px 22px;
gap:20px}
footer{
flex-wrap:wrap;
padding:40px 7% 105px;
gap:27px;
font-size:13px}
footer>.brand{
width:100%}
footer .brand>span{
font-size:25px}
footer .brand>img{
width:50px;
height:55px}
footer>div{
max-width:200px}
footer small{
font-size:10px}
.mobile-book{
display:block;
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--green);
color:white;
text-align:center;
padding:15px;
font-size:16px;
z-index:30;
border-top:1px solid #ffffff44}
}

@media(max-width:370px){
.hero h1{
font-size:41px}
.hero-copy{
padding-top:220px}
.hero .eyebrow{
font-size:8px}
.brand>span{
font-size:20px}
.brand small{
font-size:6px}
.phone{
font-size:28px}
.email{
font-size:15px}
.contact-card{
padding:25px}
.room-card img{
height:310px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*{
transition:none!important}
}

/* Complete site navigation and inner pages */
header{
gap:20px}
header nav{
gap:18px}
header .languages{
display:flex;
gap:11px;
font-size:12px;
letter-spacing:.5px}
.languages a{
opacity:.7}
.languages a[aria-current]{
opacity:1;
border-bottom:1px solid var(--gold)}
.header-right{
gap:18px}
#menu-button{
display:block;
background:none;
border:0;
color:white;
font-size:25px;
padding:0}
#mobile-menu{
top:100%;
max-height:75svh;
overflow-y:auto}
.extra-links{
padding-top:15px;
padding-bottom:70px;
display:flex;
gap:40px;
flex-wrap:wrap;
align-items:center}
.extra-links .eyebrow{
margin:0}
.extra-links .text-link{
margin:0}
.page-hero{
min-height:480px;
position:relative;
background-size:cover;
background-position:center;
display:flex;
align-items:flex-end;
color:white;
padding:210px 7% 60px}
.page-hero:before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(#10232295,#10232255)}
.page-hero>div{
position:relative}
.page-hero h1{
font-size:clamp(42px,5.4vw,75px);
margin:8px 0 22px}
.page-hero .eyebrow{
margin-bottom:15px}
.page-hero a{
font-size:14px}
.prose{
padding-top:65px;
padding-bottom:40px}
.prose h2{
font-size:clamp(33px,3.5vw,50px);
margin-bottom:28px}
.prose p{
max-width:950px;
margin-bottom:25px;
color:var(--muted)}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin:35px 0}
.gallery-grid img{
width:100%;
height:300px;
object-fit:cover;
transition:filter .2s}
.gallery-grid a:hover img{
filter:brightness(.85)}
.info-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px}
.info-grid article{
border-top:1px solid var(--line);
padding-top:25px}
.info-grid h3{
margin-bottom:20px}
video{
display:block;
width:100%;
max-height:700px;
background:var(--green)}
.lightbox{
padding:15px;
border:0;
background:var(--cream);
max-width:94vw;
max-height:94svh}
.lightbox::backdrop{
background:#102322dd}
.lightbox img{
max-height:85svh;
max-width:90vw;
object-fit:contain}
.lightbox button{
position:absolute;
right:18px;
top:18px;
border:0;
background:var(--cream);
color:var(--green);
font-size:30px;
width:45px;
height:45px;
line-height:1}
.footer-pages a{
margin-bottom:5px}
footer{
flex-wrap:wrap}
.footer-pages{
font-size:13px}

@media(max-width:1250px){
header #nav-left{
display:none}
.header-right{
gap:24px}
.page-hero{
min-height:430px}
.gallery-grid{
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
header{
gap:8px}
.header-right{
gap:15px}
header .languages{
gap:8px;
font-size:11px}
header .brand>span{
font-size:19px}
header .brand>img{
width:36px;
height:42px}
header .brand small{
font-size:6px}
.page-hero{
min-height:360px;
padding:175px 7% 45px}
.page-hero h1{
font-size:42px}
.prose{
padding-top:45px;
padding-bottom:20px}
.gallery-grid{
gap:12px}
.gallery-grid img{
height:190px}
.info-grid{
grid-template-columns:1fr;
gap:20px}
.extra-links{
display:block}
.extra-links .text-link{
display:table;
margin-top:20px}
.lightbox{
padding:8px}
footer{
gap:25px}
header .nav-contact{
display:none}
}

@media(max-width:370px){
header .brand>span{
font-size:16px}
header .brand>img{
width:28px}
.header-right{
gap:10px}
header .languages{
font-size:10px;
gap:6px}
}

/* Original photo galleries, news and business hospitality */
header nav{
font-size:14px;
gap:18px}
header .nav-news{
font-size:14px}
.header-right{
gap:17px}
.gallery-help{
font-size:14px;
color:var(--muted);
margin-top:25px!important;
margin-bottom:0!important}
.gallery-grid{
align-items:start}
.gallery-grid a{
position:relative;
display:flex;
align-items:center;
justify-content:center;
background:#e9e7df;
aspect-ratio:4/3;
overflow:hidden}
.gallery-grid img{
width:100%;
height:100%;
object-fit:contain}
.gallery-grid a>span{
position:absolute;
bottom:10px;
right:10px;
display:grid;
place-items:center;
background:var(--cream);
color:var(--green);
width:36px;
height:36px;
font-size:23px;
line-height:1}
.room-card img{
object-position:center 68%}
.page-suite{
background-position:center 72%}
.page-camera-balcone{
background-position:center 73%}
.page-camera-matrimoniale,.page-camere{
background-position:center 68%}
.page-business{
background-position:center 55%}
.news-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:30px;
margin-top:35px}
.news-card{
display:block;
background:white;
border:1px solid var(--line);
overflow:hidden}
.news-card>img{
width:100%;
height:240px;
object-fit:contain;
background:#e9e7df}
.news-card>div{
padding:25px}
.news-card time,.prose time{
display:block;
font-size:12px;
letter-spacing:1px;
color:#88774f;
margin-bottom:15px}
.news-card h3{
font-size:28px;
line-height:1.15;
overflow-wrap:anywhere}
.news-card p{
font-size:16px;
line-height:1.65;
margin:18px 0}
.news-card .text-link{
margin-top:8px}
.article-image{
width:auto;
max-width:100%;
height:auto;
max-height:480px;
margin:25px 0;
object-fit:contain}
.archive-note{
background:#eeeee5;
border-left:3px solid var(--gold);
padding:20px 25px;
font-size:15px;
margin:30px 0}
.prose .text-link{
white-space:normal;
margin-right:20px}
.lightbox{
padding:0;
background:#1a241e;
border:0;
width:min(1200px,96vw);
max-width:96vw;
max-height:94svh;
overflow:hidden}
.lightbox img{
width:100%;
height:80svh;
max-height:80svh;
max-width:100%;
object-fit:contain}
.lightbox .photo-close{
top:12px;
right:12px;
z-index:2}
.lightbox .photo-prev,.lightbox .photo-next{
top:46%;
z-index:2;
font-size:26px;
border-radius:50%;
background:#f9f7f1dd}
.lightbox .photo-prev{
left:14px;
right:auto}
.lightbox .photo-next{
right:14px}
.photo-counter{
display:block;
text-align:center;
color:white;
font:14px Arial,sans-serif;
padding:15px}
.page-hero h1{
overflow-wrap:anywhere}
.prose p{
overflow-wrap:anywhere}

@media(max-width:1100px){
.news-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
header .nav-news{
display:none}
.news-grid{
grid-template-columns:1fr;
gap:24px}
.news-card>img{
height:250px}
.gallery-grid{
grid-template-columns:1fr;
gap:18px}
.gallery-grid a{
aspect-ratio:4/3}
.gallery-grid img{
height:100%}
.room-grid{
display:grid;
grid-template-columns:1fr;
overflow:visible;
gap:35px}
.room-card{
min-width:0}
.room-card img{
height:300px}
.lightbox img{
height:72svh;
max-height:72svh}
.lightbox .photo-prev{
left:5px}
.lightbox .photo-next{
right:5px}
.lightbox .photo-prev,.lightbox .photo-next{
width:36px;
height:36px;
font-size:22px}
.page-hero h1{
font-size:38px}
.page-suite,.page-camera-balcone,.page-camera-matrimoniale,.page-camere{
background-position:center 65%}
.page-hero{
padding-top:165px}
.archive-note{
padding:18px;
font-size:14px}
.phone{
font-size:clamp(25px,7.8vw,31px)}
}

.home-video{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
grid-template-rows:auto auto;
gap:10px 40px;
align-content:center;
align-items:center;
padding-top:45px;
padding-bottom:45px;
border-bottom:1px solid var(--line)}
.home-video .eyebrow{
display:none}
.home-video h2{
font-size:28px;
letter-spacing:-.5px;
align-self:end;
grid-column:1;
grid-row:1}
.home-video>p{
font-size:16px;
color:var(--muted);
margin:0;
max-width:560px;
align-self:start;
grid-column:1;
grid-row:2}
.home-video video{
grid-column:2;
grid-row:1/3;
width:320px;
max-width:100%;
height:auto;
aspect-ratio:16/9;
max-height:none;
object-fit:contain;
background:#17251c}

@media(max-width:650px){
.home-video{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:15px;
padding-top:35px;
padding-bottom:35px}
.home-video h2{
font-size:25px;
align-self:auto}
.home-video>p{
font-size:15px;
align-self:auto}
.home-video video{
width:320px;
max-width:100%;
margin-top:5px}
}

/* Updated photographs: edge-to-edge crops;
 originals stay complete in lightbox. */
.gallery-grid img{
object-fit:cover;
object-position:center 55%}
.gallery-grid a{
background:transparent}

.room-card>div>.room-gallery-open{
position:absolute;
bottom:0;
right:0;
width:48px;
height:48px;
background:var(--cream);
border:0;
color:var(--gold);
font-size:27px;
display:grid;
place-items:center}

.hero-slide{
background-position:center 55%}
.page-hero{
background-position:center 55%}

/* Section-specific framing: keep the subjects in the lower part of each photograph. */
.page-business{
background-position:50% 100%}

.page-camere{
background-position:50% 88%}

.page-hotel{
background-position:50% 83%}

.experience-grid img[src*="breakfast-room"]{
object-position:50% 100%}

@media(max-width:650px){

 header{
height:100px;
padding:16px 5%;
gap:12px}

 header .brand{
gap:8px;
min-width:0}

 header .brand>span{
font-size:20px}

 header .brand>img{
width:34px;
height:42px}

 header .brand small{
font-size:6px;
letter-spacing:.8px}

 .header-right{
gap:12px;
flex-shrink:0}

 header .languages{
gap:7px;
font-size:12px}

 #menu-button{
min-width:40px;
min-height:44px;
font-size:27px}

 #mobile-menu{
padding:18px 7%;
max-height:calc(100svh - 165px)}

 #mobile-menu>a{
padding:11px 0;
line-height:1.4}

 .page-hero{
min-height:390px;
padding:165px 6% 35px}

 .page-hero h1{
font-size:clamp(32px,8.5vw,42px);
line-height:1.13;
letter-spacing:-.8px;
overflow-wrap:normal;
hyphens:auto}

 .page-hero .eyebrow{
font-size:10px;
letter-spacing:1.4px}

 .page-business{
background-position:50% 100%}

 .page-camere{
background-position:55% 100%;
min-height:390px}

 .page-hotel{
background-position:61% 82%}

 .hero{
min-height:650px;
height:88svh;
max-height:820px}

 .hero-copy{
padding:190px 6% 130px}

 .hero h1{
font-size:clamp(36px,9.4vw,52px);
letter-spacing:-1px}

 .hero p{
font-size:18px;
line-height:1.55}

 .hero-bottom{
bottom:28px}

 .wrap{
padding-left:6%;
padding-right:6%}

 .prose p,.welcome>p,.room-card p,.experience-grid p{
font-size:18px;
line-height:1.7}

 .prose{
padding-top:38px;
padding-bottom:12px}

 .prose h2{
font-size:34px;
line-height:1.16;
letter-spacing:-.7px}

 .gallery-grid{
margin:25px 0;
gap:16px}

 .gallery-grid a{
aspect-ratio:4/3}

 .gallery-grid img{
object-position:center}

 .gallery-grid a>span{
width:44px;
height:44px}

 .room-card img{
height:auto;
aspect-ratio:4/3}

 .room-card h3{
font-size:30px}

 .experience-grid img[src*="breakfast-room"]{
height:290px;
object-position:50% 100%}

 .experience-grid article>div{
margin-top:-14px;
margin-right:15px;
padding-top:22px}

 .contact-card{
padding:24px}

 .button{
max-width:100%;
gap:20px}

 .text-link{
white-space:normal}

 footer>div{
max-width:100%;
overflow-wrap:anywhere}

 .mobile-book{
padding:14px 12px calc(14px + env(safe-area-inset-bottom));
min-height:54px}

 footer{
padding-bottom:110px}

}

@media(max-width:370px){

 header .brand>span{
font-size:17px}

 header .brand>img{
width:28px}

 .header-right{
gap:7px}

 header .languages{
gap:5px;
font-size:11px}

 .page-hero h1{
font-size:32px}

}