/*
  The client page of a home list (docs/12-full-build, item 21): montecitolist.netlify.app's
  own stylesheet, copied verbatim from the live page on 5 October 2026 (identical to the copy
  the approved mockup carries from 2 October). Everything FOLLOWap adds is below the line
  "FOLLOWap:" at the foot, each with its reason. The two faces are self-hosted (the live page
  loads them from Google Fonts): no third-party request but Apple's map snapshot.
*/
/* FOLLOWap: Marcellus and Figtree, SIL Open Font License, served from this app (static/fonts) */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-latin.dc6fd559e41d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-latin-ext.763d3c2f037b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/figtree-latin.392aed3eb142.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/figtree-latin-ext.8811e895c448.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── montecitolist.netlify.app, verbatim ───────────────────────────────── */
/* Layout: one quiet column; each estate = header strip, gallery + notes side by side, then satellite map + location. */
:root {
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --fg: #182430;
  --muted: #5E6B78;
  --rule: #E3DED3;
  --accent: #1F4E5F;       /* Pacific ink */
  --accent-soft: #E6EEF0;
  --sand: #C9B790;
  --off: #8A5A2B;
  --off-soft: #F4EADF;
  --display: 'Marcellus', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
}
/* FOLLOWap: always light, as montecitolist is, whatever the phone's dark mode -- agents' logos are made for a
   light ground (5 October 2026). */
:root { color-scheme: light }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.55; margin: 0 }
img { max-width: 100%; display: block }
.wrap { max-width: 1120px; margin: 0 auto; padding-block: 0 56px; padding-inline: clamp(16px, 4vw, 40px) }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance }
a { color: var(--accent) }

/* Masthead */
.mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 22px 18px; border-bottom: 1px solid var(--rule) }
.mast-logo { width: 190px; height: auto; display: block }
.mast-right { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }

/* Cover */
.cover { padding-block: 56px 36px; border-bottom: 1px solid var(--rule) }
.eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px }
.cover h1 { font-size: clamp(40px, 6.5vw, 72px); line-height: 1.02; letter-spacing: .01em }
.cover p.lede { max-width: 58ch; color: var(--muted); font-size: 17px; margin: 18px 0 0 }
.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule) }
.index li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px }
.index a { color: inherit; text-decoration: none }
.index a:hover { color: var(--accent) }
.index .st { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.index .st.off { color: var(--off) }

/* Listing */
.listing { padding-block: 56px; border-bottom: 1px solid var(--rule) }
.l-kicker { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px }
.pill { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600 }
.pill-off { background: var(--off-soft); color: var(--off) }
.l-tag { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }
.l-addr { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08 }
.l-city { margin: 6px 0 0; color: var(--muted); font-size: 16px }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule) }
.facts div { min-width: 0 }
.facts dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px }
.facts dd { margin: 0; font-size: 16px; font-weight: 500 }
.num { font-variant-numeric: tabular-nums }

.l-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 32px; margin-top: 28px; align-items: start }
.gallery { margin: 0; min-width: 0 }
.hero { position: relative; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--accent-soft) }
.hero-img { width: 100%; height: 100%; object-fit: cover }
.hero-count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; letter-spacing: .08em; padding: 4px 9px; background: rgba(20, 30, 40, .62); color: #fff; border-radius: 3px; font-variant-numeric: tabular-nums }
.nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; border-radius: 3px; background: rgba(20, 30, 40, .5); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 0 6px }
.nav:hover { background: rgba(20, 30, 40, .78); opacity: 1 }
.nav:focus-visible { outline: 2px solid #fff }
.nav.prev { left: 10px } .nav.next { right: 10px }
.thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 5px }
.thumb { padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; opacity: .72; transition: opacity .15s; outline-offset: 2px }
.thumb img { width: 100%; height: 100%; object-fit: cover }
.thumb:hover, .thumb.is-on { opacity: 1 }
.thumb.is-on { box-shadow: inset 0 0 0 2px var(--accent) }
.thumb:focus-visible { outline: 2px solid var(--accent) }

.notes { min-width: 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--sand) }
.notes h3 { font-size: 20px; margin-bottom: 10px }
.notes p { margin: 0 0 12px; font-size: 15.5px }
.notes p:last-child { margin-bottom: 0 }
.placeholder { color: var(--muted); font-style: italic }

.l-map { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 32px; margin-top: 36px; align-items: start }
.map { margin: 0; min-width: 0 }
.map img { width: 100%; border: 1px solid var(--rule) }
.map figcaption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px }
.map-side { min-width: 0; padding-top: 6px }
.map-side h3 { font-size: 22px; margin-bottom: 8px }
.map-side p { margin: 0 0 18px; max-width: 52ch }
.btn { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; text-decoration: none; color: var(--accent); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 2px }
.btn:hover { background: var(--accent-soft) }

/* Signature footer */
.sig { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px 40px; align-items: start; padding-block: 44px 0 }
.sig-photo { margin: 0; min-width: 0 }
.sig-photo img { width: 100%; height: auto; border: 1px solid var(--rule) }
.sig-text { min-width: 0 }
.sig-logo { width: 240px; height: auto; max-width: 100%; margin: 0 0 18px; display: block }
.sig-text p { margin: 0; font-size: 15.5px; line-height: 1.6 }
.sig-text .names { font-weight: 600; font-size: 17px }
.sig-text .team { font-family: var(--display); letter-spacing: .2em; font-size: 15px; margin-top: 2px }
.sig-text .tag { color: var(--muted) }
.sig-text .num { font-variant-numeric: tabular-nums }
.sig-text .stat { font-weight: 600; margin-top: 10px }
.sig-text a { color: var(--accent); text-decoration: none }
.sig-text a:hover { text-decoration: underline }
.accolades { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; background: #FFFFFF; border: 1px solid var(--rule); padding: 22px 32px }
.accolades img { height: 88px; width: auto; max-width: 100% }
.accolades .rodeo { height: 100px }
.fine { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; max-width: 100ch; margin: 0 }

@media (max-width: 860px) {
  .l-body, .l-map { grid-template-columns: 1fr; gap: 22px }
  .thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .sig { grid-template-columns: 1fr }
  .sig-photo { max-width: 360px }
  .accolades { justify-content: center }
}
@media (max-width: 480px) {
  .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .listing { padding-block: 40px }
  .accolades img { height: 64px } .accolades .rodeo { height: 74px }
}
@media (prefers-reduced-motion: reduce) { .thumb { transition: none } }

/* ── FOLLOWap: additions, each with its reason ────────────────────────── */
/* FOLLOWap: CRMLS 19.2.5, the listing agent and office beside the facts, for MLS homes only (R5b) */
.l-by { margin: 12px 0 0; font-size: 15px; color: var(--muted) }
/* FOLLOWap: the one button the template adds, in the template's own .btn style */
.btn-int { margin: 0 10px 10px 0; cursor: pointer; background: var(--accent); color: #fff; font-family: inherit }
.btn-int:hover { background: var(--accent); opacity: .92 }
.btn-int.is-on { background: var(--accent-soft); color: var(--accent) }
/* FOLLOWap: CRMLS IDX standards, a contact button on another office's listing says who replies (R5b) */
.int-note { font-size: 13px; color: var(--muted); margin: 12px 0 0 }
/* FOLLOWap: a team with no logo yet shows its name in the display face, where the logo goes */
.mast-name { font-family: var(--display); font-size: 22px; letter-spacing: .14em; text-transform: uppercase }
/* FOLLOWap: a home with no photos, or no map until the Apple Maps key is set: the notes or the words take the width */
.l-body.no-photos { grid-template-columns: minmax(0, 1fr) }
.l-body.no-photos .notes { max-width: 72ch }
.l-map.no-map { grid-template-columns: minmax(0, 1fr) }
/* FOLLOWap: a footer with no team photo yet */
.sig.no-photo { grid-template-columns: minmax(0, 1fr) }
/* FOLLOWap: the page a link shows once it has ended */
.ended { padding-block: 72px 56px; border-bottom: 1px solid var(--rule) }
.ended h1 { font-size: clamp(34px, 5.2vw, 52px); line-height: 1.06 }
.ended p { max-width: 58ch; color: var(--muted); font-size: 17px; margin: 18px 0 0 }
/* FOLLOWap: the contents in two columns at most, so four homes read 2 + 2, never 3 + 1 (5 October 2026) */
.index { grid-template-columns: minmax(0, 1fr) }
@media (min-width: 640px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* FOLLOWap: the logo's left edge is the text's. A logo is trimmed to its ink as it is uploaded (followap.js);
   here it keeps one height and sits to the left, whatever its shape (5 October 2026) */
.mast-logo { width: auto; height: 46px; max-width: 220px; object-fit: contain; object-position: left center }
.sig-logo { width: auto; height: auto; max-width: min(240px, 100%); max-height: 76px; object-fit: contain; object-position: left center }
@media (max-width: 480px) { .mast-logo { height: 38px; max-width: 170px } }

/* FOLLOWap: the list's own agent, signed in, sees their link as the client does, untracked, and is told so (6 October 2026) */
.as-agent { position: sticky; top: 0; z-index: 5; background: var(--accent); color: #FFFFFF; font-family: var(--body);
  font-size: 14px; line-height: 1.45; padding: 10px clamp(16px, 4vw, 40px); text-align: center }
/* FOLLOWap: the CRMLS licence (docs/12-full-build, checklist items 3 and 4). An MLS home's photo is shown
   whole, never cropped or stretched (RECORE 8.K): its frame takes the photo's own shape (4:3, CRMLS's usual
   one, until it loads), so it fills edge to edge, with nothing laid over it. Its credit is one small grey
   line; CRMLS's notice sits under the fine print. */
.gallery.mls .hero { aspect-ratio: auto; background: var(--bg) }
.gallery.mls .hero-img { display: block; height: auto; aspect-ratio: auto 4 / 3; object-fit: contain }
.l-courtesy { margin-top: 10px; font-size: 13px; color: var(--muted) }
.fine.mls-notice { border-top: 0; padding-top: 0; margin-top: -6px }