/* Server-rendered listing page. Deliberately small and dependency-free:
   the point of this page is that a crawler gets content in the first byte. */
:root{color-scheme:only light;--ink:#191713;--bone:#f6f3ee;--gold:#b8935a;--muted:#8a8175;--line:#e8e1d5}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:#fff;font-weight:300;line-height:1.6}
/* The header lives in assets/header.css now, loaded by these pages and by
   the static ones. The .bar rule and a second copy of the brand lockup used
   to sit here because there was no shared file to put them in; there is one
   now, and one copy is the whole point. The `nav a` rule below stays - it
   dresses the footer columns, not the header. */
nav a{margin-left:26px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink)}
main{width:min(1080px,92vw);margin:0 auto;padding:48px 0 80px}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1}
.loc{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:10px}
/* Lining, tabular figures.
 *
 * Cormorant Garamond's default numerals are old-style: six of the ten digits
 * hang below the baseline (3 4 5 6 7 9) and their widths run from 332 to 489
 * units — a 47% spread, so no two prices line up and every figure sits at a
 * different height. Handsome in a paragraph, genuinely hard to read as a
 * price, which is what was being reported.
 *
 * The font already carries `lnum` and `tnum`; they were simply never asked
 * for. Nothing else about the type changes. */
.price{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.9rem;color:var(--gold);margin-top:18px;
  font-variant-numeric:lining-nums tabular-nums;}
.specs{color:var(--muted);margin-top:6px;font-size:.95rem}
.hero{width:100%;height:auto;margin:28px 0;border-radius:2px}
.desc p{margin-bottom:1rem;max-width:70ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:28px 0}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.cta{display:inline-block;margin-top:24px;background:var(--gold);color:#1a1509;text-decoration:none;
  padding:14px 34px;border-radius:2px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.cta:hover{filter:brightness(1.06)}
/* The location-page version closes the introduction, and what follows it is
   the grid of properties - so it needs room beneath it or the button reads as
   a label sitting on top of the first row of cards. Scoped, because the same
   .cta on a property page is the last thing on its panel and wants no gap. */
.cta-lead{margin-bottom:44px}
@media (max-width:620px){ .cta-lead{margin-bottom:32px} }

/* Location map — the question every buyer asks second, after the price. */
.sec{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.6rem;margin:34px 0 12px}
/* 380px was a letterbox: enough to show a pin, not enough to pan away from it and see what is around the house, which is the only reason a map is on the page. Scales with the viewport so a laptop gets a map worth dragging, with a floor that keeps it usable on a phone. */
#pmap{height:380px;border-radius:2px;border:1px solid var(--line);z-index:0}

/* OpenStreetMap's own tiles are drawn for legibility, not for a page with a
   muted palette: motorways in orange and pink retail blocks fight everything
   around them. Desaturating and lifting them slightly leaves the geography
   readable while letting the map sit inside the page rather than shout from
   it. Applied to the tiles alone so the marker and its shadow keep their
   colour. Costs nothing and needs no basemap account. */
.leaflet-tile-pane{filter:saturate(.42) contrast(.92) brightness(1.06)}


table.rates{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:.92rem;max-width:36rem}
table.rates th{text-align:left;font-weight:500;padding:9px 0;border-bottom:1px solid var(--line);width:34%}
table.rates td{padding:9px 0;border-bottom:1px solid var(--line)}
table.rates td.wk{color:var(--muted);text-align:right}

/* Location landing pages */
.lead{max-width:62ch;margin:14px 0 26px;color:var(--muted)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.lgrid .lcard{display:block;text-decoration:none;color:inherit}
.lgrid .lcard img,.lgrid .noimg{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block;
  background:linear-gradient(135deg,#efe9e0,#e5ddd0)}
.lgrid .lcard .t{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.05rem;margin-top:9px;line-height:1.25}
.lgrid .lcard .p{display:block;color:var(--gold);font-size:.85rem;margin-top:3px}
/* Where the house is. Sits between the name and the price because that
   is the order the question is asked in. */
.lgrid .lcard .lloc{display:block;color:var(--muted);font-size:.78rem;
  margin-top:4px;letter-spacing:.02em}
.lgrid .lcard:hover .t{color:var(--gold)}
/* Collection and location pages show 24 cards, then "Show more properties"
   adds 24 per click (_listing_grid in app.py). */
.lgrid .lcard.lx{display:none}
.lmore{display:block;margin:34px auto 44px;background:none;border:1px solid var(--ink);
  color:var(--ink);font:inherit;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 30px;border-radius:2px;cursor:pointer;transition:background .25s,color .25s}
.lmore:hover{background:var(--ink);color:#fff}
.lmore[hidden]{display:none}
.lnav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:40px}
.lnav a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:7px 14px;text-decoration:none}
.lnav a:hover{color:var(--ink);border-color:var(--gold)}
.lnav a i{font-style:normal;opacity:.5;margin-left:5px}

/* PHONES AND TABLETS
   property.css had no media query at all. Below 900px the four header links
   crammed in beside the wordmark, which wrapped over three lines; the menu is
   now the panel in mobile-nav.js and these links step aside for it. */
@media (max-width: 900px) {
  .bar nav { display: none; }
  .brand { white-space: nowrap; }
}

/* ── /locations hub ────────────────────────────────────────────────
   The island headings are links, and an unstyled <a> inside an <h2>
   renders as default browser blue with an underline — which is what
   they did on first build. They take the heading's own type. */
.lblock{margin-bottom:8px}
.lblock h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.5rem;margin:30px 0 12px}
.lblock h2 a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.lblock h2 a:hover{border-bottom-color:var(--gold)}
.lblock h2 i{font-style:normal;font-size:.8rem;color:var(--muted);
  letter-spacing:.08em;margin-left:8px;vertical-align:middle}
/* The overflow list past the sixtieth card: plain text links, so it stays
   light on a page that already carries sixty photographs. */
.lall a{text-transform:none;letter-spacing:0;font-size:.78rem}

/* ── /villa-collections hub ────────────────────────────────────────
   A contents page, not a feed. Two labelled bands - for sale, to rent -
   a grid of plates inside each, and under every plate the houses by
   name set as an index rather than as buttons.

   The named houses are the reason this is a page and not a menu. They
   were wearing .lnav, which is the filter-chip style: a border, a
   radius and uppercase letter-spacing. That dresses the most valuable
   content on the page as a form control. Hairlines instead. */

/* The bands run the full width, so main gives up the measure and each
   band's inner wrapper carries it. A wrapper rather than the usual
   100vw trick, because 100vw includes the scrollbar on Windows and
   pushes the whole page sideways. */
/* main sets `width`, not just max-width, so both have to be released
   or the bands stay boxed inside the 1080px measure. */
.chero + main.chub{width:auto;max-width:none;margin:0;padding:0}
.band{padding:30px 0 52px;scroll-margin-top:12px}
.band-in{max-width:1180px;margin:0 auto;padding:0 28px}
.band--rent{background:var(--bone)}
.band:last-of-type{padding-bottom:78px}

.bandhd{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px 24px;flex-wrap:wrap;margin:0 0 8px}
.bandhd h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.05rem);line-height:1.1;margin:0;
  letter-spacing:-.005em}
.bandhd .more{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:3px}
.bandhd .more:hover{color:var(--ink);border-bottom-color:var(--gold)}
/* The 34px of gold is the only chromatic mark on the page. */
.bandrule{height:1px;background:var(--line);margin:0 0 24px;position:relative}
.bandrule::before{content:"";position:absolute;left:0;top:0;
  width:34px;height:1px;background:var(--gold)}

.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px}

.ccard{display:flex;flex-direction:column;min-width:0}
.cshot{display:block;overflow:hidden;border-radius:2px;background:var(--bone)}
.cshot img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block;
  transition:transform .5s ease}
.ccard:hover .cshot img,.ccard:focus-within .cshot img{transform:scale(1.035)}
/* No photograph yet: the plate still holds its place in the row. */
.cshot-none{display:block;aspect-ratio:5/4;border-radius:2px;
  background:linear-gradient(135deg,#efe9e0,#e5ddd0)}

.cname{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.5rem;line-height:1.15;margin:16px 0 0;letter-spacing:-.005em}
.cname a{color:var(--ink);text-decoration:none;padding-bottom:1px;
  border-bottom:1px solid transparent}
.ccard:hover .cname a,.cname a:hover{border-bottom-color:var(--gold)}

/* One sentence off the collection's lede. Clamped as well as trimmed on
   the server, so a rewritten lede cannot unbalance a row. */
.cx{color:var(--muted);font-size:.88rem;line-height:1.55;margin:8px 0 0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden}

/* The houses. An index, not a set of chips: no box, no radius, no
   background, no uppercase. The gold rule is the only movement here. */
/* Under offer. schema.org has said LimitedAvailability on these listings
   from the start and the two script-rendered grids print a badge; this is
   the same fact on the server-rendered cards, the collection index and
   beside the asking price, where the site used to say nothing at all. */
.cuo{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a6a1c;border:1px solid rgba(138,106,28,.45);border-radius:2px;
  padding:1px 6px;vertical-align:middle;white-space:nowrap}
.cindex .cuo,.panel-price .cuo{margin-left:8px}
.lgrid .lcard .cuo{margin-top:6px}
.cindex{list-style:none;margin:15px 0 0;padding:0;
  border-top:1px solid var(--line)}
.cindex a{display:block;position:relative;padding:9px 20px 9px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  font-size:.82rem;line-height:1.4}
.cindex a::after{content:"";position:absolute;right:2px;top:50%;
  width:10px;height:1px;background:var(--gold);opacity:0;
  transform:translate(-5px,-50%);
  transition:opacity .22s ease,transform .22s ease}
.cindex a:hover{color:var(--gold)}
.cindex a:hover::after{opacity:1;transform:translate(0,-50%)}

/* Collections held back from publication. A line, not a section: a
   heading plus a row of chips is too much furniture for four links. */
.cmore{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px 20px;
  margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.cmore .lab{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.cmore a{color:var(--ink);text-decoration:none;font-size:.86rem;
  border-bottom:1px solid var(--line)}
.cmore a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* This stylesheet carried no focus styles at all. A keyboard user on
   this page moves through fifty-odd links, so they get a visible one. */
.chub a:focus-visible,.chero a:focus-visible{outline:2px solid var(--gold);
  outline-offset:3px;border-radius:2px}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

/* The hub's own hero, shorter than a collection's. A collection page
   opens on the house it is about; this one opens on whichever listing
   happens to lead, and 62vh put all eleven doors below the fold. */
/* Compact. The research is unambiguous that this page is a router and
   that preamble costs it: the three largest luxury property brands open
   their lifestyle hub on a plain heading with no image at all, and the
   worst example spends 1,200px before the first card. A hero was asked
   for, so it stays - but as a band rather than a screen, which gets the
   first row of plates into view on a laptop. */
.chero.chero-hub{min-height:clamp(240px,30vh,300px)}
.chero-hub .chero-in{padding-bottom:30px}
/* The hub now takes the same scale as every other heading. It had its own
   smaller size because `.chero h1` below once set 4.2rem, which overflowed
   this deliberately short band and .chero's overflow:hidden sliced the tops
   off the letters. That rule is 3.8rem now and fits, so the override only
   needs to restate the shared figure rather than shrink it - kept as a rule
   because the two-class selector is what beats `.chero h1` on specificity. */
.chero.chero-hub h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.chero-hub .chero-sub{font-size:.96rem;margin-top:12px;max-width:30em}
.chero-hub .chero-jump{margin-top:22px}
.chero-jump{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 0}

/* On the collections hub these two are the entire decision the page exists to
   put in front of someone - sale or rental, and everything below is one or the
   other. They were .72rem underlined text over a photograph, which is the
   weakest thing on the screen and competes with a headline directly above it.
   Given the same gold as every other primary action, so the choice reads as a
   choice. The arrow is down rather than right because these jump within the
   page rather than leaving it. */
.chero-jump a{display:inline-flex;align-items:center;gap:.65em;
  color:#1a1509;background:var(--gold);border:1px solid var(--gold);
  padding:14px 28px;border-radius:2px;text-decoration:none;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .28s cubic-bezier(.22,1,.36,1),color .28s,border-color .28s}
.chero-jump a::after{content:"\2193";font-size:1.02em;line-height:1;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.chero-jump a:hover{background:transparent;color:#fff;border-color:#fff}
.chero-jump a:hover::after{transform:translateY(3px)}
.chero-jump a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* On a phone the hero is the width of the screen; two full-width bars are
   easier to hit than two pills sharing a line. */
@media (max-width:620px){
  .chero-jump{gap:10px}
  .chero-jump a{width:100%;justify-content:center}
}

@media (max-width:1080px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 26px}
}
@media (max-width:640px){
  .chero.chero-hub{min-height:clamp(210px,28vh,250px)}
  .chero-jump{gap:18px;margin-top:18px}
  .band{padding:28px 0 38px}
  .band:last-of-type{padding-bottom:56px}
  .band-in{padding:0 18px}
  .bandrule{margin-bottom:22px}
  .cgrid{grid-template-columns:1fr;gap:32px}
  .cshot img,.cshot-none{aspect-ratio:16/9}
  .cname{font-size:1.4rem}
  .cmore{margin-top:34px}
}
@media (max-width:380px){
  .cindex a{font-size:.8rem;padding-right:16px}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .cshot img,.cindex a::after{transition:none}
  .ccard:hover .cshot img,.ccard:focus-within .cshot img{transform:none}
}
/* ── collection heroes ─────────────────────────────────────────────
   The page opens on a house rather than on a heading. The image is a
   real listing from the collection below it, not a stock beach. */
.chero{position:relative;min-height:62vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.chero.chero-sm{min-height:46vh}
.chero img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* Type sits on photographs of every exposure, so it carries its own
   ground rather than trusting the picture to be dark enough. */
/* Above the film, not under it. .chero .hero-video carries z-index:1, so
   while this scrim sat at auto it was painted beneath the clip and vanished
   the moment the film started - the headline and the header links were left
   on raw footage. The top stop is heavier than it was because the header now
   sits over this too. */
.chero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(16,14,11,.78) 0%,
    rgba(16,14,11,.35) 45%,rgba(16,14,11,.12) 78%,rgba(16,14,11,.34) 100%)}
.chero-in{position:relative;z-index:3;width:100%;
  max-width:1180px;margin:0 auto;padding:0 28px 46px}
.chero-eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 14px}
.chero-eyebrow a{color:rgba(255,255,255,.72);text-decoration:none}
.chero-eyebrow a:hover{color:#fff}
/* One heading scale across the site. This was clamp(2.4rem,6vw,4.2rem) here,
   clamp(2rem,4.2vw,2.9rem) on the collections hub and clamp(2.2rem,5vw,3.8rem)
   on For Sale and Holiday Rentals (styles.css .sub-h) - three sizes for the
   same rank of heading, which is what the team saw moving as they navigated.
   The .sub-h figure wins because two of the three pages already used it. */
.chero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;letter-spacing:-.01em;
  color:#fff;margin:0;text-wrap:balance}
.chero-sub{color:rgba(255,255,255,.86);max-width:34em;margin:18px 0 0;
  font-size:1.02rem;line-height:1.6}
/* The hero is full-bleed; the body below keeps the page measure. */
.chero + main{max-width:1180px;margin:0 auto;padding:44px 28px 0}
.csib{margin:0 0 26px}
.csib a{color:var(--gold);text-decoration:none;font-size:.9rem;
  letter-spacing:.02em;border-bottom:1px solid transparent}
.csib a:hover{border-bottom-color:var(--gold)}
@media (max-width:640px){
  .chero{min-height:52vh}
  .chero.chero-sm{min-height:38vh}
  .chero-in{padding:0 18px 32px}
}

/* The close: every collection again as plain text, then a person.
   The text list is a second route in for a scanner and a second pass of
   the collection names as anchor text for a crawler - the two best hubs
   researched both do exactly this. */
.cclose{padding:46px 0 78px;border-top:1px solid var(--line)}
.cclose h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,2.6vw,1.75rem);margin:0 0 16px}
.clist{margin:0;font-size:.86rem;line-height:2;color:var(--muted)}
.clist a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.clist a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.cask{margin:26px 0 0;max-width:46em;color:var(--muted);font-size:.92rem;
  line-height:1.65}
.cask a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid transparent}
.cask a:hover{border-bottom-color:var(--gold)}
@media (max-width:640px){ .cclose{padding:34px 0 56px} }

/* ── buying-costs calculator ───────────────────────────────────────
   Two figures side by side, because the whole point of the page is the
   comparison: what a buyer pays against what a seller pays. Every rate
   is also written into the prose below, so the page still answers the
   question with the script switched off. */
.calc{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:34px;
  align-items:start;margin:30px 0 10px;padding:26px 28px;
  background:var(--bone);border-radius:2px}
.calc label{display:block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.calc-row{display:flex;gap:8px}
.calc-row select,.calc-row input{
  font-family:inherit;font-size:1.05rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:11px 12px;min-width:0}
/* The currency is fixed, so it is a label rather than a control. Set
   inside the field's own border so it reads as one input. */
.calc-cur{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;font-size:1.05rem;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-right:0;border-radius:2px 0 0 2px}
.calc-cur + input{border-left:0;border-radius:0 2px 2px 0}
.calc-row input{flex:1 1 auto;width:100%;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.calc-row input:focus,.calc-row select:focus{outline:2px solid var(--gold);
  outline-offset:1px;border-color:var(--gold)}
.calc-note{font-size:.78rem;color:var(--muted);margin:10px 0 0;line-height:1.5}
.calc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.calc-side{min-width:0}
.calc-h{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.calc-big{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.05;margin:0;
  color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .calc{grid-template-columns:1fr;gap:26px;padding:22px}
  .calc-out{gap:22px}
}
@media (max-width:520px){
  .calc-out{grid-template-columns:1fr}
}

/* Prose blocks on the server-rendered advisory pages. The .pg-* classes
   were written for the static pages and live in account.css, which these
   pages do not load - so the paragraphs ran together and the breadcrumb
   was an unstyled blue link. These are the same shapes, here. */
.loc a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent}
.loc a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.pg-body{max-width:44em}
.pg-body p{margin:0 0 1.05rem;line-height:1.72}
.pg-body p:last-child{margin-bottom:0}
.pg-body strong{font-weight:500;color:var(--ink)}
.pg-note{max-width:44em;padding:20px 22px;background:var(--bone);
  border-left:2px solid var(--gold);border-radius:0 2px 2px 0}
.pg-note p{margin:0;font-size:.9rem;line-height:1.65;color:var(--muted)}
.pg-note strong{color:var(--ink);font-weight:500}
.pg-cta{display:flex;flex-wrap:wrap;gap:14px 26px;margin:34px 0 0;
  padding-top:24px;border-top:1px solid var(--line)}
.pg-cta .lnk{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:3px}
.pg-cta .lnk:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ── team ──────────────────────────────────────────────────────────
   Sized for a small office. Three across looks sparse with one or two
   people in it, so this grows from a single wide card into a grid as
   the office is filled in. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:44px 36px;margin:34px 0 0;max-width:1000px}
.tcard{min-width:0}
.tshot{display:block;overflow:hidden;border-radius:2px;background:var(--bone);
  max-width:320px}
/* height:auto matters. The <img> carries width and height attributes so
   the browser can reserve the space before the file arrives, but a
   definite height of 750px overrides aspect-ratio, and the portraits
   rendered at twice their intended height. */
.tshot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.tshot-none{aspect-ratio:4/5;max-width:320px;
  background:linear-gradient(135deg,#efe9e0,#e5ddd0)}
.tname{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.6rem;margin:18px 0 2px;line-height:1.1}
.trole{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.tbio{color:var(--ink);font-size:.92rem;line-height:1.7;margin:0;max-width:34em}
/* A bio written in two paragraphs needs to read as two. margin:0 above
   is right for the single-paragraph case and ran Chris's two together. */
.tbio + .tbio{margin-top:.85em}

/* ── press ─────────────────────────────────────────────────────────
   A record rather than a link list: the masthead leads, the headline
   follows, and the year groups them. Forty publications over a decade
   is the point, and a flat column of sixty links hides it. */
.pryear{margin:34px 0 0}
.pryear h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.35rem;margin:0 0 4px;color:var(--muted)}
.prlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pr a{display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:8px 26px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink)}
.pr-pub{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.pr-head{font-size:.95rem;line-height:1.5}
.pr a:hover .pr-head{color:var(--gold)}
.pr a:hover .pr-pub{color:var(--ink)}
@media (max-width:640px){
  .pr a{grid-template-columns:1fr;gap:3px;padding:12px 0}
}

/* ── island guide ──────────────────────────────────────────────────
   The writing from the old site's travel guides, shown on the page
   their URL already redirects to rather than rebuilt as a page of its
   own. Set as an aside: it is context for the listings below, not the
   reason the visitor came. */
.guide{max-width:46em;margin:26px 0 34px;padding:22px 0 0;
  border-top:1px solid var(--line)}
.guide-slogan{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.2rem;line-height:1.35;color:var(--ink);margin:0 0 12px}
.guide-body{color:var(--muted);font-size:.94rem;line-height:1.7;margin:0}
.guide-why{list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px}
.guide-why li{font-size:.78rem;color:var(--ink);background:var(--bone);
  border-radius:2px;padding:6px 11px}

/* ── the description fold ──────────────────────────────────────────
   The markup, the button and the toggle script were all written; the
   CSS never was, so `.is-long` did nothing and every description
   printed in full. The median listing runs to ~3,150 characters and
   the longest to 10,000.

   Collapsed with max-height rather than line-clamp: the body is
   paragraphs, not one block of text, and line-clamp on a container
   with children does nothing. Everything stays in the DOM either way,
   so Google reads the whole description regardless of the fold. */
.desc.is-long{position:relative;max-height:19em;overflow:hidden}
.desc.is-long::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:6em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 88%)}
.desc.is-long.is-open{max-height:none;overflow:visible}
.desc.is-long.is-open::after{display:none}
@media (prefers-reduced-motion:no-preference){
  .desc.is-long{transition:max-height .35s ease}
}
.more{display:inline-block;margin:2px 0 26px;padding:9px 0;
  background:none;border:0;border-bottom:1px solid var(--line);
  font-family:inherit;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);cursor:pointer}
.more:hover{color:var(--gold);border-bottom-color:var(--gold)}
.more:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── PRESS ─────────────────────────────────────────────────────────────
   A wall of mastheads rather than eleven year headings. The point of this
   page is which publications write about us, and a reader takes that in at
   a glance from the marks, not from a chronology.

   Greyscale at rest so twenty-odd logos in twenty-odd house styles read as
   one field rather than a jumble; colour on hover, which also signals the
   tile is a link. Several of the recovered files carry their own dark
   background, so the tile is neutral and the logo simply sits on it. */
.pr-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;margin:26px 0 44px}
.pr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:22px 16px;min-height:118px;border:1px solid var(--line);
  border-radius:2px;text-decoration:none;background:#fff;
  transition:border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.pr-tile img{max-width:100%;max-height:52px;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.pr-tile-n{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.3}
.pr-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.pr-tile:hover img{filter:none;opacity:1}
.pr-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Every article still gets its own link. The wall reaches only the most
   recent piece per masthead; this is the evidence behind it. */
.pr-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:26px 34px}
.pr-group h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:1.12rem;margin:0 0 8px}
.pr-arts{list-style:none;margin:0;padding:0}
.pr-arts li{margin:0 0 7px}
.pr-arts a{color:var(--muted);text-decoration:none;font-size:.9rem;line-height:1.5;
  border-bottom:1px solid transparent}
.pr-arts a:hover{color:var(--ink);border-bottom-color:var(--gold)}
@media (max-width:620px){
  .pr-wall{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .pr-tile{min-height:96px;padding:16px 10px}
}

/* Locations hub, tiered by how much is actually behind each place. The page
   listed 43 Barbadian places at one weight, so Speightstown (43 listings) sat
   beside a village with four and looked the same. Size follows depth. */
.lnav-deep{margin-bottom:10px}
.lnav-deep a{font-size:.8rem;letter-spacing:.11em;padding:9px 15px;color:var(--ink)}
.lnav-solid{margin-bottom:10px}
.lnav-solid a{font-size:.72rem;padding:7px 12px}
/* The long tail. Still linked - these pages have no other route in - but set
   quietly, so the list reads as a footnote rather than as more choice. */
.lnav-slight a{font-size:.66rem;letter-spacing:.08em;padding:5px 10px;
  color:var(--muted);border-color:transparent;text-transform:none}
.lnav-slight a:hover{color:var(--ink);border-color:var(--line)}

/* Exclusive villa tag under the title - links to the collection. */
.excl-tag{display:inline-block;margin-top:14px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:rgba(201,168,117,.22);border:1px solid rgba(168,135,90,.45);padding:.45rem .8rem;text-decoration:none}
.excl-tag:hover{background:rgba(201,168,117,.38)}

/* The same house listed the other way round (sale <-> holiday rental). */
.also-link{display:block;margin:-4px 0 16px;font-size:.78rem;letter-spacing:.04em;color:var(--ink);
  text-decoration:underline;text-decoration-color:rgba(168,135,90,.6);text-underline-offset:3px}
.also-link:hover{text-decoration-color:currentColor}

/* ── Availability calendar (Book direct villas, 8 Oct 2026) ──────────
   Drawn by assets/avail.js from the channel manager's dates. */
.avail{margin-top:2.4rem}
.avail-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.avail-nav button{width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:1.2rem;line-height:1;cursor:pointer;border-radius:2px;margin-left:6px}
.avail-nav button:disabled{opacity:.3;cursor:default}
.avail-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:10px}
.am-h{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;margin:0 0 10px}
.am-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.am-w{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px}
.am-d{aspect-ratio:1;border:0;border-radius:2px;font:inherit;font-size:.82rem;cursor:pointer;
  background:#f6f3ee;color:var(--ink);transition:background .2s}
.am-d.free:hover{background:#e9dfcd}
.am-d.busy{background:transparent;color:#b9b1a5;text-decoration:line-through;cursor:default}
.am-d.past{background:transparent;color:#d3ccc1;cursor:default}
.am-d.in{background:#efe3cc}
.am-d.sel{background:var(--gold);color:#1a1509}
.avail-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.78rem;color:var(--muted);margin:16px 0 0}
.avail-key .k{display:inline-block;width:14px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:6px}
.k-free{background:#f6f3ee}.k-busy{border:1px solid #d9d2c6}.k-pick{background:var(--gold)}
.avail-pick{margin-top:16px;padding:14px 16px;border:1px solid var(--line);background:#fbf9f5;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.avail-pick[hidden]{display:none}
.avail-sum{margin:0;flex:1 1 260px;font-size:.92rem}
.avail-pick .cta{width:auto;margin:0}
.avail-clear{background:none;border:0;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.avail-note{font-size:.8rem;color:var(--muted);margin-top:12px}

/* Long-read pages (Working from Barbados, 8 Oct 2026): a readable measure
   and real paragraph spacing, which the listing-page defaults do not give. */
main.prose > p, main.prose > .pg-cta{max-width:68ch}
main.prose > p{margin:0 0 1.05em;line-height:1.75;color:var(--ink)}
main.prose > p.loc{margin-bottom:.4em}
main.prose > p.lead{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;line-height:1.35;
  color:var(--ink);margin:.6em 0 1.2em}
main.prose h2.sec{margin-top:2.2em}
main.prose p a:not(.lnk){color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
main.prose .pg-cta{margin:1.6em 0 0;display:flex;flex-wrap:wrap;gap:12px 28px}
.am-d.short{background:transparent;color:#c9c1b4;cursor:default}

/* Film band on the long-stays page (8 Oct 2026). The shared .sub-hero rules
   live in account.css; these are the parts styles.css gives the static
   pages, which the server-rendered pages do not load. */
.lt-hero{padding:6.5rem 0 3.4rem;background:#14130f}
.lt-hero .wrap{width:min(1080px,92vw);margin:0 auto}
.lt-hero .sub-h{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;margin:0}
.lt-hero .sub-lede{max-width:34rem;margin-top:1rem;font-size:1.05rem}
.lt-hero + script + main{padding-top:36px}

/* Location pages open on a photograph (8 Oct 2026). A shorter band than a
   collection: these pages are read for their listings. */
.loc-hero.chero-sm{min-height:42vh}
main.loc-nohero{padding-bottom:0}
/* Slimmer, and the same on every screen (8 Oct 2026): 42vh grew with tall
   monitors and stood taller than the For Sale and Long Stays bands. */
.loc-hero.chero-sm{min-height:clamp(260px,32vh,330px)}
.loc-hero .chero-in{padding-bottom:36px}
/* With its introduction in the band, like Holiday Villas. */
.loc-hero.sell-hero{min-height:clamp(360px,44vh,430px)}
.sell-hero .chero-in{padding-bottom:44px}

/* Photo-band type in the same tones as For Sale, Holiday Villas and Long
   Stays (.sub-hero): warm off-white rather than pure white (8 Oct 2026). */
.chero h1{color:#f6f3ee;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.chero-sub{color:rgba(246,243,238,.82)}
/* The same tint as the For Sale / Holiday Villas / Long Stays bands. */
.loc-hero::after{background:linear-gradient(180deg,rgba(10,12,11,.74),rgba(10,12,11,.54) 45%,rgba(10,12,11,.8))}

/* Collection bands get the same tint as Long Stays and the location pages
   (Monika, 8 Oct 2026). */
.chero::after{background:linear-gradient(180deg,rgba(10,12,11,.74),rgba(10,12,11,.54) 45%,rgba(10,12,11,.8))}
/* Links in running text: ink with a gold underline, never browser blue. */
.pg-body a,main.prose p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.pg-body a:hover{color:var(--gold)}
/* Season dates under each season name in the rates table (8 Oct 2026). */
table.rates th .rdates{display:block;font-weight:400;font-size:.78rem;color:var(--muted);letter-spacing:.02em;margin-top:2px}

/* Holiday rental sections in boxes of their own (8 Oct 2026, preview). */
.lsecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0 8px}
.lsec{background:#fbf9f5;border:1px solid var(--line);border-radius:2px;padding:18px 20px}
.lsec.lsec-wide{grid-column:1/-1}
.lsec h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.3rem;margin:0 0 10px;color:var(--ink)}
.lsec p{margin:0 0 .7em;line-height:1.65;font-size:.95rem}
.lsec p:last-child{margin-bottom:0}
.lsec ul{margin:0;padding-left:1.1em;line-height:1.7;font-size:.95rem}
.lsec li::marker{color:var(--gold)}
@media (max-width:720px){.lsecs{grid-template-columns:1fr}}
/* Long descriptions: the "read more" control as a clear button. */
button.more{display:inline-block;margin-top:12px;background:none;border:1px solid var(--ink);color:var(--ink);
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:11px 22px;cursor:pointer;border-radius:2px}
button.more:hover{background:var(--ink);color:#fff}
.desc ul li::marker{color:var(--gold)}
table.rates thead th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding-bottom:6px}
table.rates-multi td{white-space:nowrap}
p.rnote{font-size:.8rem;color:var(--muted);margin:8px 0 0}
@media (max-width:720px){table.rates-multi{display:block;overflow-x:auto}}

/* One banner standard across the site (Monika, 9 Oct 2026): List With Us,
   Collections and the location pages now match For Sale and Holiday Villas -
   the same title size and a band of the same height. */
.chero h1,.chero.chero-hub h1{font-size:clamp(2rem,4vw,3rem)}
.loc-hero.sell-hero{min-height:clamp(260px,32vh,330px)}
.sell-hero .chero-in{padding-bottom:36px}
/* ...and the same lettering and height as For Sale (Monika, 10 Oct 2026). */
.chero h1{letter-spacing:normal}
.loc-hero.sell-hero{min-height:279px}
.sell-hero .chero-in{padding-bottom:28px}
/* List With Us: a lighter veil over the photograph, so the image reads
   brighter and the white title sits softer against it (Monika, 10 Oct). */
.sell-hero.loc-hero::after{background:linear-gradient(180deg,rgba(10,12,11,.5),rgba(10,12,11,.3) 45%,rgba(10,12,11,.58))}

/* Breadcrumb trail above a listing's heading (review, 10 Oct 2026): Home,
   then For Sale / Holiday Villas / Long-Term Rentals, then the parish. */
.crumbs{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.crumbs a,.loc a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.crumbs .sep,.loc .sep,.kicker .sep{margin:0 .6em;opacity:.55}
nav.loc{margin-top:0}
/* property.css styles every `nav a` as a header link; the trail is not one. */
nav.crumbs a,nav.loc a,nav.kicker a{margin:0;padding:0;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
nav.crumbs .sep,nav.loc .sep,nav.kicker .sep{margin:0 .7em}

/* List With Us lines up with For Sale and Holiday Villas (Monika, 10 Oct
   2026): the title at the same height from the top of the page and the band
   ending at the same place, switching at the same 640px width. Those bands sit under a see-through header; this
   one sits below a solid 72px header, so it is shorter by that much and its
   title is set from the top rather than the bottom. Measured: For Sale's
   title starts 128px from the top of the page (109px on a phone) and its
   band ends at 306px (311px). */
.loc-hero.sell-hero{min-height:234px;align-items:flex-start}
.sell-hero .chero-in{padding-top:56px;padding-bottom:28px}
@media (max-width:640px){
  .loc-hero.sell-hero{min-height:244px}
  .sell-hero .chero-in{padding-top:42px;padding-bottom:12px}
}