:root{--ink:#1f2420;--muted:#6d665d;--cream:#f7f1e8;--linen:#fffaf2;--sage:#78866b;--gold:#b08d57;--charcoal:#171918;--brown:#6b3f2d;--line:rgba(31,36,32,.12)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--linen);line-height:1.65}h1,h2,h3{font-family:Georgia,Times,serif;line-height:1.08;font-weight:500;margin:0 0 18px}h1{font-size:clamp(42px,7vw,86px);letter-spacing:-.04em}h2{font-size:clamp(32px,4.5vw,56px);letter-spacing:-.03em}h3{font-size:26px}p{margin:0 0 18px}a{color:inherit}.topbar{background:var(--charcoal);color:#f8eedc;display:flex;gap:18px;justify-content:center;align-items:center;padding:9px 5%;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.nav{position:sticky;top:0;z-index:20;background:rgba(255,250,242,.92);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:18px 6%;border-bottom:1px solid var(--line)}.brand{text-decoration:none}.brand small{display:block;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-size:11px}.brand strong{font-family:Georgia,serif;font-size:24px;font-weight:500}.navlinks{display:flex;gap:22px;align-items:center}.navlinks a{text-decoration:none;font-size:14px}.nav-cta,.button{background:var(--brown);color:white!important;padding:12px 18px;border-radius:999px;text-decoration:none;display:inline-block;font-weight:650}.button.secondary{background:transparent;color:var(--ink)!important;border:1px solid var(--line)}.button.dark{background:var(--charcoal)}.hero{min-height:78vh;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:78px 6%;background:linear-gradient(120deg,#fff8ed 0%,#f4eadb 100%)}.hero p{font-size:20px;max-width:720px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold);font-weight:750}.hero-media,.photo{min-height:520px;border-radius:30px;background-color:#e8dac6;background-size:cover;background-position:center;box-shadow:0 30px 70px rgba(31,36,32,.16);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.8)}.floating-card{position:absolute;left:-30px;bottom:55px;width:min(330px,85%);background:white;padding:26px;border-radius:24px;box-shadow:0 18px 55px rgba(31,36,32,.18)}.floating-card p{font-size:15px}.section{padding:78px 6%}.alt{background:var(--cream)}.dark{background:var(--charcoal);color:#fff}.lead{font-size:20px;color:var(--muted);max-width:850px}.dark .lead{color:#eee}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 12px 30px rgba(31,36,32,.05)}.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.photo.small{min-height:380px}.photo.wide{min-height:360px}.feature-list{display:grid;gap:14px;margin:26px 0}.feature{display:flex;gap:14px;padding:16px;border-top:1px solid var(--line)}.feature span{color:var(--gold);font-weight:bold}.gallery{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.gallery-stack{display:grid;gap:18px}.quote{font-family:Georgia,serif;font-size:clamp(28px,4vw,54px);line-height:1.15;text-align:center;max-width:1000px;margin:auto}.cta{text-align:center;padding:78px 6%;background:linear-gradient(135deg,#6b3f2d,#171918);color:#fff}.cta p{max-width:760px;margin-left:auto;margin-right:auto}.footer{padding:50px 6%;background:#101211;color:#efe6d8}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}.mini{color:#c9bdad;font-size:14px}.list{columns:2;gap:26px}.list li{margin:0 0 10px}.notice{background:#fff3d7;border:1px solid #ead39b;padding:18px;border-radius:18px}.map{border:0;width:100%;height:360px;border-radius:24px}.page-hero{padding:76px 6% 44px;background:var(--cream)}.page-hero h1{font-size:clamp(40px,5vw,68px)}@media(max-width:900px){.hero,.split,.gallery,.footer-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.nav{align-items:flex-start;gap:16px}.navlinks{flex-wrap:wrap;gap:12px}.hero-media{min-height:360px}.floating-card{position:relative;left:auto;bottom:auto;margin:220px 20px 20px}.topbar{flex-direction:column;gap:3px}.list{columns:1}}
/* Named image slots: replace files in /images using the exact same filenames. */
/* SEO visibility additions */
.seo-caption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45}
.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.resource-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;text-decoration:none;display:block;box-shadow:0 10px 28px rgba(31,36,32,.05)}
.resource-card h3{font-size:24px;margin-bottom:10px}.resource-card p{color:var(--muted)}
.local-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.local-list .card h3{font-size:23px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.badge{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff;color:var(--muted);font-size:14px}
@media(max-width:900px){.resource-grid,.local-list{grid-template-columns:1fr}}
/* Two-bedroom suite */
.suite-highlight{background:linear-gradient(135deg,#f7f1e8,#efe2d0)}
@media(max-width:720px){.nav{position:relative;padding:14px 5%;flex-direction:column}.brand strong{font-size:21px}.navlinks{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.navlinks a{padding:9px 10px;border:1px solid var(--line);border-radius:12px;text-align:center}.navlinks .nav-cta{grid-column:1/-1}.hero{padding:48px 5%;min-height:auto}.section,.cta{padding:54px 5%}.page-hero{padding:50px 5% 32px}.hero p,.lead{font-size:18px}.photo.small,.photo.wide{min-height:280px}.gallery-stack{grid-template-columns:1fr}.floating-card{margin:190px 14px 14px;width:auto}.topbar{font-size:11px;padding:7px 4%}}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;
box-shadow:0 12px 34px rgba(31,36,32,.06);position:relative}
.testimonial blockquote{margin:0 0 22px;font-family:Georgia,Times,serif;font-size:19px;line-height:1.6;color:var(--ink)}
.testimonial blockquote::before{content:"\201C";font-size:64px;line-height:0;color:var(--gold);
vertical-align:-22px;margin-right:6px}
.testimonial cite{font-style:normal;font-size:14px;color:var(--muted);display:block;
border-top:1px solid var(--line);padding-top:16px}
.testimonial cite strong{display:block;font-size:16px;color:var(--ink);font-weight:650;margin-bottom:2px}
.testimonial.is-featured{background:var(--cream);border-color:rgba(176,141,87,.35);padding:44px}
.testimonial.is-featured blockquote{font-size:22px}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.review-links{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;font-size:15px}
.review-links a{color:var(--brown);font-weight:600}
.quote-attrib{text-align:center;font-size:15px;color:#c9bdad;margin-top:24px}
.quote-attrib a{color:#efe6d8}
/* BLOG LIST */
.blog-post{display:grid;grid-template-columns:180px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line)}
.blog-post .date{text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--gold);
font-weight:700;padding-top:6px}
.blog-post h3{font-size:23px;margin:0 0 8px}
.blog-post h3 a{text-decoration:none}
.blog-post h3 a:hover{color:var(--brown)}
.blog-post p{color:var(--muted);margin:0}
/* four-column footer */
.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
.footer a{color:#efe6d8}
@media(max-width:900px){
.testimonial-grid{grid-template-columns:1fr}
.blog-post{grid-template-columns:1fr;gap:8px}
.footer-grid{grid-template-columns:1fr}
}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:34px;padding-top:24px;
border-top:1px solid rgba(239,230,216,.18);font-size:13px}
.footer-links a{color:#c9bdad;text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
/* ===========================================================================
BOOKING + AVAILABILITY
The booking engine lives at availabilityonline.com. All booking links open in
a new tab so guests do not lose their place on the site.
=========================================================================== */
.topbar-book{font-weight:700;color:#f3d9a8!important;text-decoration:none;border-bottom:1px solid rgba(243,217,168,.5)}
.topbar-book:hover{color:#fff!important}
.button.light{background:#fff;color:var(--brown)!important}
.button.light:hover{background:#f7f1e8}
.hero-note{font-size:15px;color:var(--muted);margin-top:16px}
.hero-note a{color:var(--brown);font-weight:600}
/* homepage booking band */
.booking-band{background:linear-gradient(120deg,#f4eadb 0%,#efe0c9 100%);border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.booking-band-inner{display:grid;grid-template-columns:1.4fr .9fr;gap:44px;align-items:center}
.booking-band h2{margin-bottom:12px}
.booking-band .lead{font-size:18px;margin:0}
.booking-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.booking-band-actions .button{width:100%;text-align:center}
.booking-band-link{font-size:15px;color:var(--brown);font-weight:600}
/* how-it-works steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.step{display:flex;gap:18px;background:rgba(255,255,255,.72);border:1px solid var(--line);
border-radius:24px;padding:28px}
.step-num{flex:0 0 40px;height:40px;border-radius:50%;background:var(--brown);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.step h3{font-size:21px;margin:0 0 8px}
.step p{margin:0;color:var(--muted);font-size:15px}
/* room cards */
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.room-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;
box-shadow:0 12px 30px rgba(31,36,32,.05)}
.room-tag{display:inline-block;background:#e7efe3;color:#41563a;border:1px solid #cfe0c8;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
padding:6px 12px;border-radius:999px;margin-bottom:16px}
.room-tag.alt{background:#f7ecd9;color:#7a5c17;border-color:#ead39b}
.room-card h3{font-size:24px;margin:0 0 12px}
.room-card p{color:var(--muted);font-size:15px}
.room-facts{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line);padding-top:16px}
.room-facts li{font-size:14px;padding:5px 0 5px 20px;position:relative}
.room-facts li::before{content:"\2022";color:var(--gold);position:absolute;left:4px;font-weight:bold}
/* ===========================================================================
RESPONSIVE NAVIGATION
Below 1100px the links collapse into a slide-in drawer. The hamburger button
is hidden on desktop; the drawer is hidden on desktop.
=========================================================================== */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
padding:0 11px;background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
transition:transform .25s ease,opacity .2s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){
.nav{padding:14px 5%}
.nav-toggle{display:flex}
.navlinks{position:fixed;top:0;right:0;bottom:0;width:min(330px,84vw);z-index:60;
background:var(--linen);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(31,36,32,.18);
flex-direction:column;align-items:stretch;gap:0;padding:96px 26px 40px;
transform:translateX(100%);transition:transform .28s ease;overflow-y:auto}
body.nav-open .navlinks{transform:translateX(0)}
.navlinks a{padding:15px 4px;font-size:17px;border-bottom:1px solid var(--line)}
.navlinks .nav-cta{margin-top:22px;text-align:center;border-bottom:0;font-size:16px}
body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(23,25,24,.45);z-index:50}
body.nav-open{overflow:hidden}
.brand strong{font-size:21px}
}
/* ===========================================================================
STICKY BOOKING BAR — phones and small tablets only
=========================================================================== */
.bookbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
background:rgba(255,250,242,.97);backdrop-filter:blur(12px);
border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(31,36,32,.12);
padding:11px 14px calc(11px + env(safe-area-inset-bottom));gap:10px}
.bookbar a{text-decoration:none;border-radius:999px;font-weight:700;font-size:15px;
padding:14px 16px;text-align:center;display:block}
.bookbar-call{flex:0 0 34%;border:1px solid var(--line);color:var(--ink)}
.bookbar-go{flex:1;background:var(--brown);color:#fff}
@media(max-width:860px){
.bookbar{display:flex}
body{padding-bottom:78px}
body.nav-open .bookbar{display:none}
}
/* ===========================================================================
TABLET / MOBILE LAYOUT FIXES
=========================================================================== */
@media(max-width:1100px){
.hero{grid-template-columns:1fr;padding:56px 5%;min-height:0;gap:30px}
.hero-media{min-height:420px}
.floating-card{position:absolute;left:auto;right:20px;bottom:20px;width:min(320px,80%);margin:0}
.booking-band-inner{grid-template-columns:1fr;gap:26px}
.booking-band-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
.booking-band-actions .button{width:auto}
.steps,.room-grid{grid-template-columns:1fr 1fr}
.split{gap:34px}
.section,.cta{padding:60px 5%}
.page-hero{padding:58px 5% 38px}
}
@media(max-width:900px){
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.steps,.room-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.floating-card{position:relative;right:auto;bottom:auto;width:auto;margin:18px 0 0}
.hero-media{min-height:300px}
.section,.cta{padding:48px 5%}
.button,.nav-cta{padding:13px 18px}
.topbar{flex-direction:column;gap:4px;padding:8px 5%}
}
/* ===========================================================================
DRAWER FIXES
1. The off-canvas drawer sits at translateX(100%), which extends the
document's scrollWidth and produced a horizontal scrollbar on every page
at every width below 1100px. Clipping the x-axis on the root removes it.
2. header.nav is position:sticky with z-index:20, which creates a stacking
context. The drawer's z-index:60 is therefore resolved *inside* that
context and lost to the z-index:50 overlay, making the menu unclickable.
Raising the header itself while the drawer is open fixes it.
=========================================================================== */
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:1100px){
body.nav-open .nav{z-index:70}
.navlinks{z-index:10}
body.nav-open::after{z-index:5}
}
/* Booking-band text link: give it a real tap target on touch devices */
@media(max-width:1100px){
.booking-band-link{display:inline-block;padding:12px 4px;min-height:44px;line-height:20px}
}
/* Closed drawer must not be reachable by keyboard/screen reader */
@media(max-width:1100px){
.navlinks{visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
body.nav-open .navlinks{visibility:visible;transition:transform .28s ease,visibility 0s}
}
/* ---------------------------------------------------------------------------
CRITICAL: header.nav uses backdrop-filter, which makes it a containing block
for position:fixed descendants. That anchored the drawer to the header box
instead of the viewport (it rendered as a small panel under the header).
Dropping the blur below 1100px lets the drawer attach to the viewport.
--------------------------------------------------------------------------- */
@media(max-width:1100px){
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--linen)}
}
/* ===========================================================================
HERO PHOTO BLEND (hero-exterior.jpg)
Portrait crop of the front entry. The container aspect ratio matches the
file (1160x1301) so the doorway is never cropped. Below 900px the layout
swaps to hero-exterior-wide.jpg, a landscape crop of the same photo.
=========================================================================== */
.hero{position:relative}
.hero::after{content:"";position:absolute;right:0;top:0;width:56%;height:100%;
background:radial-gradient(closest-side,rgba(207,189,155,.55),rgba(207,189,155,0) 72%);
pointer-events:none;z-index:0}
.hero>*{position:relative;z-index:1}
.hero-media{aspect-ratio:1160/1301;min-height:0;height:auto;
overflow:visible;
background-position:center 42%;
border:1px solid rgba(176,141,87,.42);
box-shadow:0 34px 78px rgba(88,64,44,.24),0 2px 0 rgba(255,255,255,.55) inset}
.hero-tag{position:absolute;top:20px;right:20px;z-index:2;
background:rgba(255,250,242,.90);backdrop-filter:blur(6px);
border:1px solid rgba(176,141,87,.30);border-radius:999px;
padding:8px 15px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
font-weight:700;color:var(--brown)}
.hero-media-wrap{position:relative}
.hero-media-wrap .floating-card{position:absolute;left:-36px;bottom:38px;
width:min(330px,86%);margin:0;padding:24px;
border:1px solid rgba(176,141,87,.22);box-shadow:0 22px 60px rgba(88,64,44,.22)}
/* Homepage feature band that replaced the removed lifestyle photo */
.band-centered .band-intro{max-width:820px}
.band-centered .feature-row{display:grid;grid-template-columns:repeat(3,1fr);
gap:28px;margin-top:38px}
.band-centered .feature-row .feature{background:#fff;border:1px solid var(--line);
border-radius:22px;padding:26px;box-shadow:0 10px 30px rgba(31,36,32,.05);
align-items:flex-start}
@media(max-width:1000px){
.band-centered .feature-row{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.hero::after{display:none}
.hero-media{aspect-ratio:1200/840}
.hero-media img{object-position:center 55%}
.hero-tag{top:14px;right:14px;font-size:11px;padding:7px 12px}
.hero-media-wrap .floating-card{position:static;width:auto;margin:16px 0 0;padding:22px}
.band-centered .feature-row{grid-template-columns:1fr;gap:16px}
}
@media(max-width:640px){
.band-centered .feature-row .feature{padding:20px}
}
/* Two long featured reviews side by side; the grid below holds the shorter ones. */
.testimonial-featured{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;
align-items:start}
.testimonial-featured .testimonial.is-featured blockquote{font-size:19px}
.testimonial-grid{grid-template-columns:repeat(3,1fr)}
.testimonial-grid .testimonial:nth-child(4),
.testimonial-grid .testimonial:nth-child(5){grid-column:span 1}
@media(max-width:1100px){
.testimonial-featured{grid-template-columns:1fr}
.testimonial-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.testimonial-grid{grid-template-columns:1fr}
}
/* CONTACT PAGE (form removed — call / book / visit cards) */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:32px;
box-shadow:0 12px 34px rgba(31,36,32,.06);display:flex;flex-direction:column}
.contact-card h3{font-size:28px;margin:6px 0 14px}
.contact-card h3 a{text-decoration:none;color:var(--brown)}
.contact-card p{color:var(--muted);flex:1}
.contact-card .button{align-self:flex-start;margin-top:8px}
@media(max-width:980px){.contact-cards{grid-template-columns:1fr}}
/* ===========================================================================
REAL PROPERTY PHOTOGRAPHY
The innkeeper's own photographs, tone-matched to the cream/linen palette.
Every placeholder slot has been removed; nothing below points at a file
that does not exist in /images.
=========================================================================== */
/* A single soft treatment across every photograph so warm phone shots sit
comfortably against the linen background instead of floating on top of it. */
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(178deg,rgba(255,250,242,.12) 0%,rgba(255,250,242,0) 34%,
rgba(58,42,30,.16) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 0 60px rgba(58,42,30,.07)}
/* ---- room detail blocks (rooms.html) ---- */
.room-block{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;
padding:64px 0;border-top:1px solid var(--line)}
.room-block:first-of-type{border-top:0;padding-top:6px}
.room-block:nth-of-type(even) .room-copy{order:2}
.room-block h2{margin-bottom:14px}
.room-block .lead{font-size:19px;margin-bottom:16px}
.room-photos{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.room-photos.single{grid-template-columns:1fr}
.room-photos .photo{min-height:250px;border-radius:20px;box-shadow:0 18px 44px rgba(31,36,32,.13)}
.room-photos.single .photo{min-height:500px;max-width:580px;margin:0 auto;width:100%}
.room-note{font-size:15px;color:var(--muted);border-left:2px solid var(--gold);
padding:2px 0 2px 16px;margin:22px 0 0}
/* ---- gallery grid (gallery.html) ---- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo-grid .photo{min-height:280px;border-radius:22px}
.photo-grid .photo.span2{grid-column:span 2;min-height:340px}
.photo-caption{font-size:13px;color:var(--muted);margin:10px 0 0;letter-spacing:.02em}
.room-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
@media(max-width:900px){
.room-block{grid-template-columns:1fr;gap:26px;padding:44px 0}
.room-block:nth-of-type(even) .room-copy{order:0}
.photo-grid{grid-template-columns:1fr 1fr}
.photo-grid .photo.span2{grid-column:span 2}
}
@media(max-width:600px){
.room-photos{grid-template-columns:1fr}
.photo-grid{grid-template-columns:1fr}
.photo-grid .photo.span2{grid-column:span 1}
.room-photos .photo{min-height:230px}
}
/* ===========================================================================
REAL ![]()
TAGS FOR EVERY PHOTOGRAPH
The .photo div keeps every visual property it had (radius, shadow, the
::after blend overlay). The image sits inside it, absolutely positioned and
object-fit:cover, so the rendered result is identical to the old CSS
background — but the file is now crawlable and carries alt text.
=========================================================================== */
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center;display:block;border-radius:inherit;z-index:0}
.img-exterior>img{object-position:center 62%}
.img-suite-second>img{object-position:center 40%}
.img-suite-bath>img{object-position:center 45%}
.img-vacation>img{object-position:center 58%}
.img-shared-bath-1>img{object-position:center 55%}
.img-shared-bath-2>img{object-position:center 40%}
/* Hero: the gradient that used to be layered into background-image now sits
above the ![]()
as a pseudo-element. */
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%;display:block;border-radius:inherit;z-index:0}
.hero-media::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
pointer-events:none;
background:linear-gradient(160deg,rgba(255,248,237,.10) 0%,rgba(112,82,66,0) 42%,
rgba(72,52,38,.30) 100%)}
.hero-media{overflow:hidden}
.hero-tag{z-index:3}
.photo::after{z-index:2}