/* Hallmark: architecture photography, editorial product page. */
/* Narrow navigation, one booking action, photographs grouped by residence. */
:root {
  --ink:#19191b; --muted:#58585d; --paper:#fff; --field:#f5f5f7;
  --focus:#0066c7; --hover:#39393d; --type:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--type);-webkit-font-smoothing:antialiased}
header,main{width:min(100% - clamp(36px,8vw,128px),1440px);margin-inline:auto}
header,nav,.pager{display:flex;align-items:center}
header{justify-content:space-between;padding-block:18px}
nav{gap:clamp(16px,3vw,40px)}
a{color:inherit;text-underline-offset:4px}
nav a,.brand,.action{text-decoration:none}
nav a{font-size:15px;font-weight:520}
.brand{font-size:28px;font-weight:740;letter-spacing:-.065em}
.action,.nav-book{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:560}
.action{padding:13px 25px}.nav-book{padding:8px 16px}
.action:hover,.nav-book:hover{background:var(--hover)}
main :is(h1,h2,h3,p,figure):not(#hr-widget *,#hr-modal *){margin:0}
main :is(h1,h2,h3):not(#hr-widget *,#hr-modal *){line-height:1.03;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word}
.cover h1{font-size:clamp(44px,6.65vw,100px);font-weight:640}
main > section > h2{font-size:clamp(36px,4.1vw,64px);font-weight:630}
.list article h3{font-size:clamp(25px,2.45vw,38px);font-weight:600}
.intro{text-align:center;padding:clamp(33px,4vw,70px) 0 clamp(28px,3vw,44px)}
.intro p{font-size:clamp(18px,1.65vw,26px);letter-spacing:-.02em;margin:12px 0 21px}
.cover figure{overflow:hidden;border-radius:22px;background:var(--field)}
.cover img{display:block;width:100%;height:clamp(290px,32vw,520px);object-fit:cover;object-position:50% 54%;filter:brightness(1.05) saturate(.89)}
main>section+section{margin-top:clamp(60px,7vw,112px)}
#dates{padding:clamp(22px,3vw,44px);background:var(--field);border-radius:22px;scroll-margin-top:16px}
#dates h2{font-size:clamp(29px,3vw,44px)}
#hr-widget{min-height:70px;margin-block:18px 10px}
#dates>a{font-size:15px;color:var(--muted)}
.amenities{margin:12px 0 30px;color:var(--muted)}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,42px);margin-bottom:32px}
.frames{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;border-radius:16px;background:var(--field)}
.frames img{display:block;width:100%;min-width:0;flex:0 0 100%;aspect-ratio:1.52;object-fit:cover;scroll-snap-align:start;filter:brightness(1.045) saturate(.88)}
.gallery{position:relative}
.pager{position:absolute;bottom:12px;right:12px;background:var(--paper);color:var(--ink);border-radius:30px}
.pager[hidden]{display:none}.pager button{border:0;background:transparent;color:inherit;font-size:25px;width:44px;height:44px;cursor:pointer}
.pager button:disabled{opacity:.3}.pager output{font-size:13px;font-variant-numeric:tabular-nums}
article h3{margin:18px 0 8px}article p{color:var(--muted)}
#arrival{background:var(--field);border-radius:20px;padding:clamp(24px,4vw,60px);margin-bottom:50px}
#arrival p{max-width:56ch;margin:16px 0}summary{cursor:pointer;font-weight:600}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:650px){header{padding-block:12px}.nav-book{display:none}.list{grid-template-columns:minmax(0,1fr);gap:34px}.intro p{max-width:28ch;margin-inline:auto}.cover img{height:300px}.cover figure,.frames,#dates,#arrival{border-radius:14px}}
@media(prefers-reduced-motion:no-preference){@keyframes settle{from{transform:scale(1.025)}to{transform:scale(1)}}.cover img{animation:settle 1.15s ease-out}}

/* RealtyCalendar marks stays that cannot be booked for the selected dates as muted. */
:is(#hr-modal, #hr-widget) .hotel-card:has(.hotel-info.muted) {
  display: none !important;
}
:is(#hr-modal, #hr-widget) .hotels:has(.hotel-card):not(:has(.hotel-info:not(.muted), .loader-container))::after {
  content: "На эти даты свободных квартир нет. Выберите другие даты.";
  display: block;
  padding: 24px;
  text-align: center;
}

.action:active,.nav-book:active,.pager button:active{opacity:.82}

article h3 + p{margin-block:12px 8px;color:var(--ink);max-width:52ch}
.map-links{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;margin:4px 0 10px}.map-links a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:16px;text-decoration-color:#999;text-underline-offset:4px}.map-links a:hover{color:var(--focus)}.map-links+p{color:var(--ink);margin-bottom:8px}

:is(#hr-widget,#hr-modal) .hotel-info__title, :is(#hr-widget,#hr-modal) .hotel-info__title span{letter-spacing:normal;word-spacing:normal;line-height:1.3}

article > .action{margin-top:18px}