/* Grace Hagerty Real Estate, vacation rentals.
Type and colour carried over from hagertyremv.com: Poppins, navy #102D4E. */
:root{
--ground:#F4F7FA;
--surface:#FFFFFF;
--surface-2:#E9EFF5;
--ink:#16212E;
--ink-2:#4A5A6B;
--ink-3:#7C8A99;
--line:#DBE3EB;
--line-soft:#EAF0F5;
--navy:#102D4E;
--navy-text:#102D4E;
--navy-ink:#FFFFFF;
--navy-soft:#E6EDF6;
--go:#2E7D6F;
--go-soft:#E2F0EC;
--stop:#A8503B;
--stop-soft:#F6E8E3;
--shadow-1:0 1px 2px rgba(16,45,78,.05);
--shadow-2:0 1px 2px rgba(16,45,78,.05), 0 10px 28px rgba(16,45,78,.08);
--r:5px;
--sans:'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--maxw:1240px;
/* The heart, drawn rather than typed. Written out here instead of fetched as
a file: one more round trip would be a poor trade for a thing this small,
and a heart that arrives late is a heart the guest has already scrolled
past. It is used as a mask in two places — on the photographs and on the
shortlist button — so the same shape takes whatever colour it is given,
pale over a picture, red once it is pressed. */
--heart:url('data:image/svg+xml;utf8, of its own around the flexible-dates tickbox, and without the ">" this
reached in and set that sentence in 10px letter-spaced capitals. Capitals with
.13em of tracking are about twice the width of the sentence as written, so it
then wrapped down the side of the tickbox into an unreadable column. */
.field > label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
/* Again the field's own controls only. This is a full-width box with a border
and ten pixels of padding, which is right for a Guests dropdown and quite
wrong for the 16-pixel tickbox inside the calendar panel — and the panel is
inside .field.dates, so without the ">" it was getting both. */
.field > input,.field > select{
font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;width:100%;min-width:0;
}
.btn{background:var(--navy);color:var(--navy-ink);border:1px solid var(--navy);border-radius:var(--r);padding:10px 22px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{filter:brightness(1.12)}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn.wide{width:100%;padding-block:13px;font-size:15px}
@media (max-width:1000px){.sform{grid-template-columns:1fr 1fr 1fr}.sform .dates{grid-column:1/-1}.sform .go{grid-column:1/-1}}
@media (max-width:560px){.sform{grid-template-columns:1fr 1fr}}
/* ---------- the dates button and its calendar ----------
The button stands in for two fields, so it is the widest thing in the band
and it reads as a sentence: Jul 22 -> Jul 29, 7 nights. The panel hangs off
it, which is why the field is the positioning frame. */
.field.dates{position:relative}
.datebtn{
display:flex;align-items:center;gap:8px;width:100%;min-width:0;
font:inherit;font-size:14px;text-align:left;cursor:pointer;
background:var(--surface);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;
}
.datebtn:hover{border-color:var(--ink-3)}
.datebtn[aria-expanded="true"]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.dpart{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpart.set{color:var(--ink);font-weight:500}
.dsep{color:var(--ink-3);flex:none}
.dnights{margin-left:auto;padding-left:8px;font-size:12px;color:var(--ink-2);white-space:nowrap;flex:none}
.calpanel{
position:absolute;top:calc(100% + 8px);left:0;z-index:60;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow-2);padding:14px 16px 12px;
}
/* Wide enough for two months, but never wider than the window on a phone,
where it is pinned to the left edge of the band instead of the button. */
@media (max-width:699px){
.calpanel{left:0;right:0;width:auto;padding-inline:12px}
.calprev{left:12px}
.calnext{right:12px}
}
/* The arrows sit on the same line as the month names rather than on a row of
their own, so they are where a guest reaches for them and cost no height. */
.calbar{position:static}
.calnav{
position:absolute;top:12px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
width:30px;height:30px;line-height:1;font-size:18px;color:var(--ink-2);cursor:pointer;
}
.calprev{left:14px}
.calnext{right:14px}
.calnav:hover:not([disabled]){border-color:var(--ink-3);color:var(--ink)}
.calnav[disabled]{opacity:.3;cursor:default}
.calmonths{display:flex;gap:26px}
.calmonth{flex:1;min-width:236px}
.calmonth h4{
margin:2px 0 10px;text-align:center;font-size:13.5px;font-weight:500;
letter-spacing:.02em;color:var(--ink);
}
.caldow,.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.caldow span{
text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);padding-bottom:6px;
}
/* Kept for anything that still emits a blank square; the grid itself now fills
those positions with the real days from the month either side. */
.calpad{display:block}
.calday{
background:none;border:0;border-radius:var(--r);cursor:pointer;
font:inherit;font-size:13px;color:var(--ink);
aspect-ratio:1/1;display:grid;place-items:center;padding:0;
}
.calday:hover:not([disabled]){background:var(--surface-2)}
.calday.today{font-weight:600}
/* A night already gone and a night already let are both unavailable, but the
guest is only likely to wonder about the second, so it keeps the strike. */
.calday.past{color:var(--line);cursor:default}
.calday.off{color:var(--ink-3);cursor:default;text-decoration:line-through;opacity:.55}
.calday.mid,.calday.peek{background:var(--navy-soft);border-radius:0}
.calday.from,.calday.to{background:var(--navy);color:var(--navy-ink);font-weight:500}
.calday.from{border-radius:var(--r) 0 0 var(--r)}
.calday.to{border-radius:0 var(--r) var(--r) 0}
.calday.from.to{border-radius:var(--r)}
.calday.from:hover,.calday.to:hover{background:var(--navy)}
/* The days belonging to the month either side. Dimmed, because they are there
for context and the heading above the grid names a different month — but the
shading of a stay is given back at full strength, since showing the stay run
unbroken across the turn of the month is the entire reason they are drawn.
These come after the rules above so that a tie on specificity lands here. */
.calspill{color:var(--ink-3);opacity:.45}
.calspill.from,.calspill.to,.calspill.mid,.calspill.peek{opacity:1}
.calsay{margin:12px 0 0;font-size:12.5px;color:var(--ink-2);text-align:center;min-height:1.2em}
.calfoot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
/* The tickbox and its sentence are one target: the whole row is clickable, and
it is given room to stay on a single line rather than being squeezed by the
two buttons to its right, which is what made it fold into a column. */
.calflex{
display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;
font-size:12.5px;line-height:1.35;letter-spacing:normal;text-transform:none;
font-weight:400;color:var(--ink-2);cursor:pointer;
border-radius:var(--r);padding:5px 7px;margin-left:-7px;
}
.calflex:hover{background:var(--surface-2);color:var(--ink)}
.calflex span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calflexbox{width:16px;height:16px;accent-color:var(--navy);margin:0;flex:none;cursor:pointer}
.calspace{margin-left:auto}
.callink{background:none;border:0;padding:4px 2px;font-size:12.5px;color:var(--ink-2);text-decoration:underline;cursor:pointer}
.callink:hover:not([disabled]){color:var(--ink)}
.callink[disabled]{opacity:.4;cursor:default;text-decoration:none}
.calok{padding:7px 18px;font-size:13px}
/* On one month there is not room for the sentence and both buttons on a line,
so the tickbox takes a row of its own and the sentence is allowed to wrap
properly rather than being clipped. */
@media (max-width:699px){
.calfoot{flex-wrap:wrap;gap:8px 14px}
.calflex{width:100%;flex:1 0 100%}
.calflex span{white-space:normal;overflow:visible}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.chip.reset{border-style:dashed;color:var(--ink-3)}
/* The row of narrowings the guest currently has on. Deliberately quieter than
the feature chips above it: these are a statement of where you are, not a
set of choices to make, and they should read as a sentence rather than
compete with the controls. */
.active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.acount{font-size:13px;color:var(--ink-2);margin-right:2px}
.acount b{font-weight:500;color:var(--ink)}
.afil{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);border-radius:999px;
padding:5px 10px 5px 12px;font:inherit;font-size:12.5px;cursor:pointer;
transition:border-color .15s,color .15s}
.afil:hover{border-color:var(--ink-3);color:var(--ink)}
/* Large enough to hit accurately with a thumb without making the chip itself
look like a button that does something bigger. */
.ax{font-size:15px;line-height:1;color:var(--ink-3);margin-top:-1px}
.afil:hover .ax{color:var(--ink)}
.afil.clearall{border-style:dashed;color:var(--ink-3);padding-right:12px}
/* ---------- results ---------- */
.resbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;padding-block:24px 14px}
.resbar h1{font-size:26px;font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance}
.rescount{font-size:13px;color:var(--ink-2)}
.rescount b{font-weight:500;color:var(--ink)}
.resbar .spacer{margin-left:auto}
.sortsel{font:inherit;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:7px 9px;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding-bottom:48px;align-items:start}
.card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;box-shadow:var(--shadow-1);text-decoration:none;color:inherit;
display:flex;flex-direction:column;transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.photo{position:relative;aspect-ratio:4/2.7;width:100%;overflow:hidden;background:var(--surface-2)}
.photo img{width:100%;height:100%;object-fit:cover}
/* The card is no longer one big , because a button cannot live inside a
link. Instead the link is a transparent sheet over the photograph with the
arrows above it, and the text below is a second link to the same place. To
the guest it is still one card that goes one place. */
.phlink{position:absolute;inset:0;z-index:1}
.cbody{text-decoration:none;color:inherit}
/* Arrows are invisible until the pointer is on the card, so a grid of thirty
rentals does not read as a wall of chrome. On a touch screen there is no
hover, so there they are always on — and a swipe works too. */
.ph-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(10,20,32,.3);
opacity:0;transition:opacity .15s ease;
}
.card:hover .ph-nav,.ph-nav:focus-visible{opacity:1}
.ph-nav:hover{background:#fff}
.ph-prev{left:8px}
.ph-next{right:8px}
/* Drawn rather than typed, so it cannot come out as a missing-glyph box in an
older browser or pick up an emoji face. */
.ph-nav::before{
content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
border-top:1.6px solid var(--ink);border-right:1.6px solid var(--ink);
}
.ph-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.ph-next::before{transform:translate(-65%,-50%) rotate(45deg)}
@media (hover:none){.ph-nav{opacity:.92}}
/* The photograph counter has moved to the bottom of the frame to leave the
top-right corner to the heart, which is where a guest's hand goes for it. */
.photo .count{position:absolute;bottom:9px;right:9px;z-index:2;background:rgba(10,20,32,.55);color:#fff;border-radius:3px;font-size:10.5px;padding:3px 7px;font-variant-numeric:tabular-nums}
.photo .stat{position:absolute;left:9px;top:9px;z-index:2;border-radius:3px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;background:rgba(255,255,255,.93);color:var(--navy)}
/* ---- the heart ----
Always visible rather than appearing on hover, unlike the arrows: a guest
cannot save a house they do not know they can save, and on a phone there is
no hover to reveal it with. Drawn as a shape rather than typed as a
character, so it cannot arrive as an emoji face or a missing-glyph box. */
.heart{
position:absolute;top:7px;right:7px;z-index:3;
width:34px;height:34px;border:0;border-radius:50%;padding:0;cursor:pointer;
background:transparent;-webkit-tap-highlight-color:transparent;
}
/* The shape is a mask rather than a background image, so one file makes both
the pale unsaved heart and the red saved one by changing a colour. */
.heart::before{
content:"";position:absolute;inset:8px;
background:rgba(255,255,255,.62);
-webkit-mask:var(--heart) center/contain no-repeat;
mask:var(--heart) center/contain no-repeat;
filter:drop-shadow(0 1px 1.5px rgba(10,20,32,.5));
transition:background .15s ease,transform .15s ease;
}
.heart:hover::before{background:rgba(255,255,255,.92);transform:scale(1.08)}
.heart[aria-pressed="true"]::before{background:#C2453E}
.heart:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:50%}
.photo .stat.free{color:#1F6357}
/* A house found by moving the week. Amber rather than green, because it is a
near miss offered honestly, not the thing that was asked for. */
.photo .stat.near{color:#8A5A00}
.cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px}
.rate{font-size:17px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rate small{font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:.02em}
/* The week this house is actually open, spelled out under the price. Given
its own line and its own colour so it cannot be mistaken for the dates in
the search band above it. */
.alt{margin-top:5px;font-size:12.5px;color:#8A5A00;font-weight:500}
.town{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-text);font-weight:500;margin-top:6px}
.addr{font-size:14.5px;color:var(--ink);line-height:1.35}
.blurb{font-size:13px;color:var(--ink-2);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.specs{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}
.specs b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.notice{grid-column:1/-1;border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center;color:var(--ink-2);background:var(--surface)}
.notice p{margin:0 0 4px}
.notice.error{border-style:solid;border-color:var(--stop);background:var(--stop-soft);color:var(--stop);text-align:left}
.notice.error code{font-size:12px;word-break:break-word}
.notice.warn{border-style:solid;border-color:var(--stop);background:var(--stop-soft);color:var(--stop);text-align:left;padding:14px 18px;margin:0 0 18px}
.notice.warn p{font-size:14px}
.skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.skel .photo{background:linear-gradient(90deg,var(--surface-2),var(--line-soft),var(--surface-2));background-size:200% 100%;animation:sheen 1.4s linear infinite}
.skel .cbody{gap:8px}
.skel .bar{height:11px;border-radius:3px;background:var(--surface-2)}
.skel .bar.w60{width:60%}.skel .bar.w40{width:40%}.skel .bar.w80{width:80%}
@keyframes sheen{to{background-position:-200% 0}}
/* ---------- property page ---------- */
.back{display:inline-block;background:none;border:0;padding:0;margin:24px 0 16px;cursor:pointer;font-size:13px;color:var(--navy-text);font-weight:500;text-decoration:none}
.dhead{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-bottom:16px}
.dhead h1{margin:0;font-size:30px;font-weight:400;letter-spacing:-.015em;text-wrap:balance;flex:1 1 380px}
.dsub{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-text);font-weight:500}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/7.5}
.gallery a{display:block;overflow:hidden;background:var(--surface-2);position:relative}
.gallery a:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gallery a:hover img{transform:scale(1.03)}
.gallery .more{position:absolute;inset:0;background:rgba(10,20,32,.5);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:500}
/* One or two photos would leave the mosaic half empty, so they go full width. */
.gallery.solo{grid-template-columns:1fr;grid-template-rows:1fr}
.gallery.solo a:first-child{grid-row:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:4/3}.gallery a:not(:first-child){display:none}.gallery a:first-child{grid-row:auto}}
/* Shown when a property has no photos in OwnerRez yet. */
.nophoto{
width:100%;height:100%;display:grid;place-items:center;gap:6px;
background:var(--surface-2);color:var(--ink-3);
font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;text-align:center;padding:16px;
text-decoration:none;line-height:1.8;
}
.gallery a[aria-disabled]{cursor:default}
.gallery a:not([aria-disabled]){cursor:zoom-in}
/* The mosaic shows at most five. On a phone it shows one. This is how the
rest are reached, so it is a real button, not a caption. */
.viewall{
display:block;margin:10px 0 0;padding:9px 16px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
font-size:13px;font-weight:500;color:var(--navy-text);cursor:pointer;
box-shadow:var(--shadow-1);transition:background .15s ease,border-color .15s ease;
}
.viewall:hover{background:var(--navy-soft);border-color:var(--navy-text)}
/* ---- Photo viewer ---- */
.lb{
position:fixed;inset:0;z-index:100;
display:none;grid-template-rows:auto 1fr auto;
background:rgba(8,17,28,.94);
/* Keeps a scroll that runs past the end of the viewer from carrying on into
the page behind it. */
overscroll-behavior:contain;
}
.lb.open{display:grid}
.lb-bar{
grid-row:1;display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;color:#fff;
}
.lb-count{font-size:12px;letter-spacing:.13em;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
.lb-x{
background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
padding:7px 16px;border-radius:var(--r);cursor:pointer;
font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
transition:background .15s ease,border-color .15s ease;
}
.lb-x:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lb-stage{
grid-row:2;grid-column:1;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
padding:0 76px;
}
/* flex:0 1 auto with min-height:0 lets a tall photograph shrink to make room
for its caption instead of pushing it off the bottom of the screen. */
.lb-stage img{
flex:0 1 auto;min-height:0;
max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;border-radius:var(--r);
}
.lb-cap{margin:0;color:rgba(255,255,255,.8);font-size:13px;text-align:center;max-width:70ch}
/* One photograph failing to load would otherwise show as an empty black screen
with no way to tell it apart from a slow connection. The message takes the
place of the image, and only while this one is broken — the arrows and the
strip stay put so the guest can carry on to the next photograph. */
.lb-fail{display:none;margin:0;color:rgba(255,255,255,.75);font-size:14px;text-align:center}
.lb.lb-broken .lb-stage img{display:none}
.lb.lb-broken .lb-fail{display:block}
/* The arrows sit over the stage rather than beside it, so the photograph gets
the full width of the screen instead of the space between two buttons. */
.lb-nav{
grid-row:2;align-self:center;z-index:1;
width:46px;height:46px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
transition:background .15s ease;
}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-nav::before{
content:"";display:block;width:11px;height:11px;margin:0 auto;
border-top:2px solid #fff;border-right:2px solid #fff;
}
.lb-prev{grid-column:1;justify-self:start;margin-left:14px}
.lb-prev::before{transform:rotate(-135deg) translate(-2px,-2px)}
.lb-next{grid-column:1;justify-self:end;margin-right:14px}
.lb-next::before{transform:rotate(45deg) translate(-2px,2px)}
.lb-nav[hidden]{display:none}
.lb-strip{
grid-row:3;display:flex;gap:8px;overflow-x:auto;
padding:14px 18px;scrollbar-width:thin;
overscroll-behavior-x:contain;
}
.lb-strip[hidden]{display:none}
.lb-strip button{
flex:0 0 auto;width:78px;height:56px;padding:0;cursor:pointer;
background:none;border:2px solid transparent;border-radius:4px;overflow:hidden;
opacity:.5;transition:opacity .15s ease;
}
.lb-strip button:hover{opacity:.85}
.lb-strip button[aria-current="true"]{opacity:1;border-color:#fff}
.lb-strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
/* No hover on a phone, so the arrows are redundant next to a swipe, and at
this width they cover a meaningful slice of the photograph. */
.lb-stage{padding:0 12px}
.lb-nav{display:none}
.lb-strip button{width:62px;height:46px}
}
.dlayout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);gap:32px;padding-bottom:56px;margin-top:24px;align-items:start}
@media (max-width:900px){.dlayout{grid-template-columns:1fr}}
.statrow{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin:0}
.statrow div{flex:1 1 90px;padding:13px 14px;border-right:1px solid var(--line-soft)}
.statrow div:last-child{border-right:0}
.statrow dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 3px}
.statrow dd{margin:0;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
h2.sec{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:30px 0 12px}
.prose{font-size:15px;color:var(--ink-2);max-width:64ch;line-height:1.7}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:20px}
.amencats{display:flex;flex-direction:column;gap:20px}
.amencat h3{margin:0 0 8px;font-size:13.5px;font-weight:500;color:var(--ink)}
.amencat ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 18px;font-size:13.5px;color:var(--ink-2)}
.amencat li{padding:4px 0;border-bottom:1px solid var(--line-soft)}
.rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;font-size:13.5px;color:var(--ink-2)}
.rules b{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:2px}
.bookwrap{position:sticky;top:92px}
@media (max-width:900px){.bookwrap{position:static}}
.book{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);overflow:hidden}
.book .top{padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.book .top .big{font-size:22px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.book .top .sub{font-size:12.5px;color:var(--ink-3)}
.book .top .big small{font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:.02em}
/* The itemised quote, shown only when OwnerRez has priced the actual dates.
Every line here came back from OwnerRez; nothing on this page adds up a
nightly rate and calls the answer a total. */
.quotelines{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px}
.quotelines>div{display:flex;justify-content:space-between;gap:16px;padding:3px 0;color:var(--ink-2)}
.quotelines>div b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.quotelines .tot{margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft);color:var(--ink);font-weight:500}
.quotelines .fine{padding:10px 0 0}
/* Why OwnerRez would not price these dates — a minimum stay, a changeover
day. Said plainly, because the guest cannot see the rule that stopped it. */
.quotenote{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
/* OwnerRez draws the calendar itself and brings its own styling, so this only
gives it somewhere to sit and stops a wide month grid from pushing the page
sideways on a phone. */
.calwrap{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface);overflow-x:auto}
.calnote{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.bookbody{padding:6px 10px 14px}
.fine{font-size:11.5px;color:var(--ink-3);line-height:1.5;padding:0 18px 16px;margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px}
.pill.go{background:var(--go-soft);color:var(--go)}
.pill.stop{background:var(--stop-soft);color:var(--stop)}
/* OwnerRez widget, nudged toward the site's type and spacing */
.ownerrez-widget{font-family:var(--sans)!important}
.ownerrez-widget input,.ownerrez-widget select,.ownerrez-widget textarea{border-radius:var(--r)!important}
.ownerrez-widget .btn,.ownerrez-widget button[type=submit]{background:var(--navy)!important;border-color:var(--navy)!important;border-radius:var(--r)!important}
/* ---------- the map ----------
The panel is sticky so the map stays put while the list scrolls beside it,
which is the whole point of shopping by location. How far down it has to
start depends on how tall the nav and the search band have ended up — the
chips wrap onto two rows on a narrow laptop — so search.js measures them and
sets --sticky. The fallback here is only used for the instant before that
runs, and on a page with no script at all. */
.mapbtn,.savedbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 15px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.mapbtn:hover,.savedbtn:hover{border-color:var(--ink-3)}
.mapbtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
/* The shortlist button wears the same shape as the map button beside it, and a
small heart so that the counter is obviously the hearts and not, say, the
photographs. Turned on it goes red rather than navy: this is the guest's own
pile, and it should not look like another of ours. */
.savedbtn{display:inline-flex;align-items:center;gap:7px}
.savedbtn::before{
content:"";width:12px;height:12px;flex:none;background:currentColor;
-webkit-mask:var(--heart) center/contain no-repeat;
mask:var(--heart) center/contain no-repeat;
}
.savedbtn b{font-weight:500;font-variant-numeric:tabular-nums}
.savedbtn[aria-pressed="true"]{background:#C2453E;border-color:#C2453E;color:#fff}
.maptools{display:flex;align-items:center;gap:12px;padding-bottom:8px;flex-wrap:wrap}
.maptools .spacer{margin-left:auto}
.movebox{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.movebox input{accent-color:var(--navy);width:15px;height:15px;margin:0}
.basebtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.basebtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
/* position+z-index makes this a stacking context, which keeps Leaflet's own
panes — they run into the hundreds — underneath the sticky site nav instead
of sliding over the top of it. */
.mapbox{position:relative;z-index:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);height:460px}
.mapnote{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mappanel{margin-bottom:22px}
@media (min-width:1024px){
body.mapon .split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:22px;align-items:start}
body.mapon .grid{grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:18px}
body.mapon .mappanel{position:sticky;top:calc(var(--sticky,182px) + 14px);margin-bottom:0}
body.mapon .mapbox{height:calc(100vh - var(--sticky,182px) - 92px);min-height:420px}
}
/* On a phone there is no room for both, so the button swaps between them the
way the map search on the main site does. */
@media (max-width:1023px){
body.mapon .grid{display:none}
body.mapon .mapbox{height:calc(100vh - var(--sticky,182px) - 116px);min-height:340px}
}
/* ---------- pins ----------
Leaflet puts the marker element's top-left corner exactly on the coordinate,
so the label shifts itself half its own width left and its full height up to
sit above the spot with its point on it. Sizing it in CSS rather than fixing
iconSize is what lets "$673" and "$1.6k" both look right. */
.leaflet-marker-icon.pin{width:auto!important;height:auto!important;background:none;border:0}
.pin .pinlab{
position:relative;display:inline-block;transform:translate(-50%,-118%);
white-space:nowrap;background:var(--surface);color:var(--navy-text);
border:1px solid var(--line);border-radius:999px;padding:4px 10px;
font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.35;
box-shadow:0 1px 4px rgba(16,45,78,.28);
}
.pin .pinlab::after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--surface)}
.pin:hover .pinlab,.pin.on .pinlab{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.pin:hover .pinlab::after,.pin.on .pinlab::after{border-top-color:var(--navy)}
.pin.on{z-index:600!important}
/* A pin carrying a real total for the stay. Drawn a shade heavier than a
bedroom count because it is the figure the guest is scanning for, and it
should be the thing their eye lands on once there are dates. */
.pin.priced .pinlab{font-weight:600;border-color:var(--navy-soft);color:var(--navy)}
/* The card the guest has just pointed at on the map. Outline rather than a
border so nothing shifts by a pixel when it turns on. */
.card.lit{outline:2px solid var(--navy);outline-offset:2px}
/* ---------- the card inside a pin ---------- */
.mpopwrap .leaflet-popup-content-wrapper{border-radius:var(--r);padding:0;overflow:hidden;box-shadow:var(--shadow-2)}
.mpopwrap .leaflet-popup-content{margin:0;width:208px!important;line-height:1.5}
.mpopwrap .leaflet-popup-tip{box-shadow:none}
.mpop{display:block;text-decoration:none;color:inherit;font-family:var(--sans)}
.mpop img{width:100%;height:118px;object-fit:cover;background:var(--surface-2)}
.mpop-b{display:block;padding:10px 12px 12px}
.mpop-rate{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.mpop-rate small{font-weight:400;color:var(--ink-3);font-size:11.5px}
.mpop-town{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.mpop-addr{display:block;font-size:13.5px;margin-top:1px}
.mpop-specs{display:block;font-size:12px;color:var(--ink-2);margin-top:3px}
.mpop-go{display:block;margin-top:9px;font-size:12.5px;font-weight:500;color:var(--navy-text);text-decoration:underline}
footer{border-top:1px solid var(--line);background:var(--surface);margin-top:auto}
footer .wrap{padding-block:26px}
/* The contact line. This used to be the whole footer and carried the flex
rules itself; they moved down a level when the disclaimer joined it, so
that the sentence below is a paragraph and not another item in the row. */
.footrow{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:12.5px;color:var(--ink-3)}
footer a{color:inherit;text-decoration:none}
/* Deliberately quiet and set in a readable measure. It is on every page of the
site, so it should be findable by anyone looking for it and out of the way
of everyone else. */
.footnote{margin:16px 0 0;max-width:78ch;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.footnote strong{font-weight:500;color:var(--ink-2)}