/*
 * One listing, in full.
 *
 * Everything partials/idx-detail.php renders, on the page (/listing/ and
 * /idx/) and inside the search page's quick-look sheet, plus the sheet itself
 * and the photograph lightbox. Loaded after site.css and idx.css by the three
 * pages that show a listing, and nowhere else.
 *
 * The page speaks in the site's own voice: the serif for the address, the
 * price and the five figures, the sans for everything read, the mono for
 * anything that is a record rather than a sentence. Square corners, because
 * the site is square cornered; the search page's rounded objects stop at the
 * edge of the sheet.
 *
 * Every colour and face is a token from config/agent.php. Nothing here is a
 * literal that a second agent's site would have to hunt down.
 */

/* --- Head ----------------------------------------------------------------- */

.listing__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: 1.1rem;
}
.listing__head-main, .listing__head-price { min-width: 0; }
.listing__head-price { text-align: right; }

.listing__status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.9rem;
  margin: 0 0 0.6rem;
  font-family: var(--f-body);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
  color: var(--c-accent-deep);
}
.listing__status--sold    { color: var(--c-muted); }
.listing__status--pending { color: var(--c-ink-soft); }
.listing__ours {
  color: var(--c-ink);
  padding-left: 0.9rem;
  border-left: 1px solid var(--c-accent);
}

.listing__address {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-ink);
}
.listing__address span {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--f-body);
  font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

.listing__price {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-ink);
  white-space: nowrap;
}
.listing__price .listing__per {
  display: inline;
  margin-left: 0.3rem;
  font-family: var(--f-body);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
.listing__price-note {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--c-muted);
}

/*
 * The credit line. Directly under the address, above the photographs, on the
 * rule that closes the head. It is set at body size and on its own line,
 * never pushed into the margin of something else.
 */
.listing__credit {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--c-accent);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 1rem;
}
.listing__credit .idx-attribution--detail {
  flex: 1 1 auto; min-width: 0;
  padding: 0; margin: 0; border: 0;
  font-size: 0.84rem;
  color: var(--c-ink-soft);
}
.listing__credit .idx-attribution__mls {
  margin-left: 0.6rem;
  font-family: var(--f-data);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.listing__credit .favorite-form--inline { flex: none; }
.listing__credit .favorite-btn { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }

/* --- Photographs ---------------------------------------------------------- */

.gallery {
  position: relative;
  width: min(1180px, 100% - (var(--s-gutter) * 2));
  margin: 0 auto;
}
.gallery__grid {
  display: grid;
  gap: 4px;
  background: var(--c-paper-alt);
}
.gallery__cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-paper-alt);
  line-height: 0;
}
.gallery__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
@media (hover: hover) {
  .gallery__cell:hover img { transform: scale(1.025); }
}
.gallery__cell:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* One lead frame and a two by two beside it: the shape a set of five takes.
   Fewer frames take a shape with no hole in it. */
.gallery--n5 .gallery__grid,
.gallery--n4 .gallery__grid,
.gallery--n3 .gallery__grid {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 2 / 1;
}
.gallery--n5 .gallery__cell:first-child,
.gallery--n4 .gallery__cell:first-child,
.gallery--n3 .gallery__cell:first-child { grid-row: 1 / 3; }
.gallery--n4 .gallery__cell:nth-child(4) { grid-column: 2 / 4; }
.gallery--n3 .gallery__cell:nth-child(2),
.gallery--n3 .gallery__cell:nth-child(3) { grid-column: 2 / 4; }

.gallery--n2 .gallery__grid { grid-template-columns: 1fr 1fr; aspect-ratio: 8 / 3; }
.gallery--n1 .gallery__grid { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
.gallery--n1 .gallery__cell img { max-height: 66vh; }

.gallery__all {
  position: absolute;
  right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--c-ink) 22%, transparent);
  transition: background-color .15s ease, color .15s ease;
}
.gallery__all:hover { background: var(--c-ink); color: var(--c-white); }
.gallery__all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.listing__nophoto {
  width: min(1180px, 100% - (var(--s-gutter) * 2));
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
  background: var(--c-paper-alt);
  color: var(--c-muted);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.fineprint--photo { padding-top: 0.75rem; }

/* --- The five figures ----------------------------------------------------- */

/*
 * Large numerals in the serif, labelled in small tracked caps, in a ruled
 * row. The first thing read after the photographs, and the only place these
 * five numbers appear on the page.
 */
.facts {
  display: flex; flex-wrap: wrap;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.facts li {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1.1rem 1.5rem 1.1rem 0;
  border-right: 1px solid var(--c-line);
  margin-right: 1.5rem;
}
.facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  line-height: 1;
  color: var(--c-ink);
}
.facts span {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted);
}

/* --- Body ----------------------------------------------------------------- */

.listing__body {
  display: grid;
  /* minmax(0, ...) rather than bare fr: the nearby homes strip in the main
     column is wider than the column and is meant to scroll, which it can
     only do if the column is allowed to be narrower than it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.listing__main, .listing__side { min-width: 0; }

.listing__section { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.listing__section:last-child { margin-bottom: 0; }

.listing__headline {
  margin: 0 0 1.25rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.2;
}
.listing__subhead {
  margin: 0 0 1rem;
  font-family: var(--f-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--t-tracking); text-transform: uppercase;
  color: var(--c-ink);
}
.listing__subhead::after {
  content: '';
  display: block;
  width: 2rem; height: 1px;
  margin-top: 0.7rem;
  background: var(--c-accent);
}
.listing__para {
  max-width: var(--s-measure);
  margin: 0 0 1em;
  font-size: 1.02rem; line-height: 1.7;
  color: var(--c-body);
}
.listing__para:first-of-type { font-size: 1.08rem; }

.story {
  margin: 0 0 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--c-paper-alt);
  border-left: 2px solid var(--c-accent);
}
.story__heading {
  margin: 0 0 0.75rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.3rem;
}
.story__body { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.65; color: var(--c-ink-soft); }
.story__byline { margin: 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }

.feature-list {
  columns: 2; column-gap: 2.5rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.92rem;
}
.feature-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.1rem;
  break-inside: avoid;
  color: var(--c-body);
}
.feature-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.95rem;
  width: 5px; height: 5px;
  background: var(--c-accent);
}

/* --- Property details, grouped ------------------------------------------- */

.extended { margin: 0 0 clamp(2rem, 4vw, 3rem); }
/* --- What this sale can answer -------------------------------------------- */

/*
 * A definition list rather than headings, because these are answers to
 * questions rather than sections of an argument, and six subheadings would
 * read as the outline of something longer than this page is.
 */
.faq { margin: 0 0 2rem; }
.faq__list { margin: 0; border-top: 1px solid var(--c-line); }
.faq__item { padding: 0.9rem 0; border-bottom: 1px solid var(--c-line); }
.faq__q { margin: 0 0 0.3rem; font-weight: 700; color: var(--c-ink); font-size: 0.95rem; line-height: 1.4; }
.faq__a { margin: 0; color: var(--c-muted); font-size: 0.95rem; line-height: 1.6; }

/* Tighter inside the quick-look panel, which is narrower than the page. */
.lmodal .faq__item { padding: 0.7rem 0; }

.extended__group { break-inside: avoid; margin-bottom: 1.5rem; }
.extended__heading {
  margin: 0 0 0.4rem;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-muted);
}
.extended__list { margin: 0; border-top: 1px solid var(--c-line); }
.extended__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.25rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-line);
}
.extended__row dt { margin: 0; flex: 0 0 auto; font-size: 0.84rem; color: var(--c-muted); }
.extended__row dd { margin: 0; text-align: right; font-size: 0.88rem; font-weight: 600; color: var(--c-ink); }

@media (min-width: 46rem) {
  .extended { columns: 2; column-gap: 2.5rem; }
  .extended > .listing__subhead, .extended > .fineprint { column-span: all; }
}

/* --- Timeline ------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.timeline__item {
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.9rem;
}
.timeline__when {
  min-width: 9.5rem;
  font-family: var(--f-data);
  font-size: 0.78rem;
  color: var(--c-muted);
}
.timeline__what { color: var(--c-ink); }
.timeline__what em { font-style: normal; margin-left: 0.4rem; font-size: 0.85em; color: var(--c-muted); }
.timeline__item--now .timeline__when { color: var(--c-accent-deep); }
.timeline__item--cut .timeline__what { font-weight: 700; }

.listing__reduction {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--c-accent);
  background: var(--c-paper-alt);
  font-size: 0.9rem; font-weight: 600;
}

/* --- Locator map ---------------------------------------------------------- */

.locator { overflow: hidden; background: var(--c-paper-alt); border: 1px solid var(--c-line); }
.locator__canvas { height: 300px; }
.locator__where { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--c-muted); }

/* A single home needs a point, not a price tag. */
.pin--dot {
  display: block;
  box-sizing: border-box;
  width: 16px; height: 16px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-white);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--c-ink) 40%, transparent);
  text-indent: -9999px;
}

/* --- About the town ------------------------------------------------------- */

.listing__town .link-more { display: inline-block; margin-top: 0.5rem; }

/* --- Nearby homes --------------------------------------------------------- */

.nearby { margin-top: clamp(2rem, 4vw, 3rem); }

/* A row that scrolls sideways rather than a grid that pushes the page down.
   Six neighbours are a glance, not a second search. */
.nearby__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.nearby__strip::-webkit-scrollbar { height: 6px; }
.nearby__strip::-webkit-scrollbar-thumb { background: var(--c-line); }

.nearcard {
  scroll-snap-align: start;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color .15s ease;
}
.nearcard:hover { border-color: var(--c-accent); }
.nearcard__link { display: block; text-decoration: none; color: inherit; }
.nearcard__media {
  position: relative; display: block;
  aspect-ratio: 3 / 2;
  background: var(--c-paper-alt);
  overflow: hidden;
}
.nearcard__media img { width: 100%; height: 100%; object-fit: cover; }
.nearcard__nophoto {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted);
}
.nearcard__miles {
  position: absolute; left: 0; bottom: 0;
  padding: 0.25rem 0.55rem;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-data);
  font-size: 0.62rem;
}
.nearcard__price {
  display: block;
  padding: 0.7rem 0.8rem 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-ink);
}
.nearcard__price .mapcard__per { font-family: var(--f-body); }
.nearcard__addr { display: block; padding: 0.35rem 0.8rem 0; font-size: 0.8rem; color: var(--c-ink); }
.nearcard__addr em { display: block; font-style: normal; font-size: 0.72rem; color: var(--c-muted); }
.nearcard__specs { display: block; padding: 0.3rem 0.8rem 0.65rem; font-size: 0.7rem; color: var(--c-body); }
.nearcard .idx-attribution--card { padding: 0.5rem 0 0.6rem; margin: 0 0.8rem; font-size: 0.64rem; }

/* --- Side column ---------------------------------------------------------- */

/*
 * The one thing to do about the house, kept in view while the rest is read.
 * The offset clears the site's sticky header; inside the sheet it clears the
 * sheet's own bar instead.
 */
.listing__stick { position: sticky; top: calc(var(--hnav-h, 112px) + 1.25rem); }

.agent-card {
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-ink);
  text-align: center;
}
.agent-card img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
}
.agent-card__name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--c-ink);
}
.agent-card__title {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-accent-deep);
}
.agent-card__broker { margin: 0 0 1.1rem; font-size: 0.84rem; color: var(--c-muted); }
.agent-card__note { margin: 0 0 1.1rem; font-size: 0.86rem; line-height: 1.55; color: var(--c-ink-soft); }
.agent-card .btn--block + .btn--block { margin-top: 0.5rem; }

/* The record: what the feed says, set in the data face. */
.spec-table { margin: 0; border-top: 1px solid var(--c-line); }
.spec-table > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--c-line);
}
.spec-table dt { margin: 0; font-size: 0.82rem; color: var(--c-muted); }
.spec-table dd { margin: 0; text-align: right; font-size: 0.9rem; font-weight: 600; color: var(--c-ink); }
.spec-table__mono { font-family: var(--f-data); font-weight: 400 !important; font-size: 0.8rem !important; letter-spacing: 0.02em; }

/* --- Payment estimator ---------------------------------------------------- */

.paycalc {
  margin-bottom: 1.25rem;
  padding: 1.35rem 1.5rem 1.25rem;
  background: var(--c-paper-alt);
}
.paycalc__head {
  margin: 0 0 0.5rem;
  font-family: var(--f-body);
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted);
}
.paycalc__total {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--c-ink);
}
.paycalc__total em {
  margin-left: 0.3rem;
  font-family: var(--f-body); font-style: normal;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--c-muted);
}

.paycalc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.paycalc__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.paycalc__field > span:first-child {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-muted);
}
.paycalc__field:last-child { grid-column: 1 / -1; }

.paycalc__inputwrap {
  display: flex; align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding-right: 0.55rem;
}
.paycalc__inputwrap:focus-within { border-color: var(--c-accent); }
.paycalc__inputwrap em { font-style: normal; font-size: 0.78rem; color: var(--c-muted); }
.paycalc__inputwrap input,
.paycalc__inputwrap select {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--f-data);
  font-size: 0.9rem;
  color: var(--c-ink);
  background: none; border: 0;
  padding: 0.5rem 0.6rem;
  appearance: none;
}
.paycalc__inputwrap input:focus,
.paycalc__inputwrap select:focus { outline: none; }

.paycalc__rows { margin: 0 0 0.9rem; border-top: 1px solid var(--c-line); }
.paycalc__rows > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.84rem;
}
.paycalc__rows dt { margin: 0; color: var(--c-muted); }
.paycalc__rows dd { margin: 0; font-family: var(--f-data); font-size: 0.82rem; color: var(--c-ink); }
.paycalc__rows-note { font-size: 0.78rem !important; }
.paycalc__rows-note dd { color: var(--c-ink-soft) !important; }
.paycalc__fine { margin: 0; font-size: 0.68rem; line-height: 1.5; color: var(--c-muted); }

/* --- Disclaimer ----------------------------------------------------------- */

.listing .idx-disclaimer { margin-top: 0; }

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .listing__body { grid-template-columns: 1fr; gap: 2.5rem; }
  .listing__stick { position: static; }
  .feature-list { columns: 1; }
}

@media (max-width: 640px) {
  .listing__head { align-items: flex-start; flex-direction: column; gap: 0.9rem; }
  .listing__head-price { text-align: left; }
  .listing__address, .listing__price { font-size: clamp(1.5rem, 7vw, 2rem); }
  .listing__credit { flex-wrap: wrap; gap: 0.6rem 1.5rem; }

  /* One tall frame beside two: the same set, in the room a phone has. */
  .gallery--n5 .gallery__grid,
  .gallery--n4 .gallery__grid,
  .gallery--n3 .gallery__grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
  }
  .gallery--n5 .gallery__cell:nth-child(n+4),
  .gallery--n4 .gallery__cell:nth-child(4) { display: none; }
  .gallery--n3 .gallery__cell:nth-child(2),
  .gallery--n3 .gallery__cell:nth-child(3) { grid-column: 2; }
  .gallery__all { right: 0.6rem; bottom: 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.68rem; }

  .facts li { flex: 1 1 40%; padding: 0.9rem 1rem 0.9rem 0; margin-right: 1rem; }
  .facts li:nth-child(2n) { border-right: 0; margin-right: 0; }
  .facts strong { font-size: 1.35rem; }

  .timeline__when { min-width: 100%; }
  .paycalc__fields { grid-template-columns: 1fr; }
  .story { padding: 1.25rem 1.25rem; }
}

/* ==========================================================================
   The quick-look sheet
   ========================================================================== */

/*
 * A sheet from the right edge of the search page. The map and the results
 * stay in view beside it, dimmed, which is what makes it a quick look rather
 * than a page. On a phone it takes the whole screen; there is no beside.
 *
 * Class names and hooks are the contract with assets/js/listing-modal.js.
 */

.lmodal {
  position: fixed; inset: 0;
  /* Above everything on the search page: Leaflet's own panes and controls
     reach 1000, the map's tool bar and save prompt 950. */
  z-index: 1200;
}
.lmodal[hidden] { display: none; }

.lmodal__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-ink) 45%, transparent);
  opacity: 0;
  transition: opacity .22s ease;
}
.lmodal.is-on .lmodal__scrim { opacity: 1; }

.lmodal__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(940px, 100%);
  background: var(--c-paper);
  box-shadow: -24px 0 60px color-mix(in srgb, var(--c-ink) 22%, transparent);
  overflow: hidden auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.lmodal.is-on .lmodal__panel { transform: none; }
.lmodal__panel:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .lmodal__scrim, .lmodal__panel { transition: none; }
}

/* The page behind must not scroll under the sheet. */
html.has-lmodal, html.has-lmodal body { overflow: hidden; }

/* --- The bar -------------------------------------------------------------- */

.lmodal__bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.25rem;
  padding: 0 1rem 0 0.5rem;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}

.lmodal__close {
  display: inline-flex; align-items: center; gap: 0.5rem;
  flex: none;
  padding: 0.55rem 0.7rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink);
}
.lmodal__close:hover { color: var(--c-accent-deep); }
.lmodal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.lmodal__label {
  flex: 1 1 auto; min-width: 0;
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.05rem; font-weight: 400;
  color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lmodal__nav { display: flex; align-items: center; gap: 0.25rem; flex: none; }

.lmodal__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--c-line);
  cursor: pointer; color: var(--c-ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.lmodal__step:hover:not(:disabled) { border-color: var(--c-ink); }
.lmodal__step:disabled { opacity: 0.3; cursor: default; }
.lmodal__step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lmodal__pos {
  min-width: 4.5rem; text-align: center;
  font-family: var(--f-data);
  font-size: 0.72rem;
  color: var(--c-muted);
}

.lmodal__full {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: 0.75rem;
  padding: 0.4rem 0;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  white-space: nowrap;
}
.lmodal__full:hover { border-bottom-color: var(--c-ink); }
.lmodal__full svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- The body ------------------------------------------------------------- */

.lmodal__body { flex: 1 1 auto; }
.lmodal__loading { display: grid; gap: 1rem; padding: 1.5rem; }
.lmodal__loading .mapbone__media { height: 320px; }
.lmodal__error { padding: 3rem 1.75rem; text-align: center; color: var(--c-ink-soft); }

/* The detail template, sized to the sheet. */
.lmodal .listing--modal .wrap,
.lmodal .listing--modal .gallery,
.lmodal .listing--modal .listing__nophoto { width: auto; margin-inline: clamp(1.1rem, 3vw, 2rem); }
.lmodal .listing__head { padding-top: 1.5rem; padding-bottom: 0.9rem; }
.lmodal .listing__address, .lmodal .listing__price { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.lmodal .listing__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1.75rem 0 2.5rem;
}
.lmodal .listing__stick { top: 4.25rem; }
.lmodal .agent-card { padding: 1.35rem 1.25rem 1.25rem; }
.lmodal .agent-card img { width: 72px; height: 72px; }
.lmodal .feature-list { columns: 1; }
.lmodal .extended { columns: 1; }
.lmodal .idx-disclaimer { margin-bottom: 0; }
.lmodal .listing__section { margin-bottom: 2rem; }

/* On a phone the sheet is the screen, and the action comes before the prose. */
@media (max-width: 720px) {
  .lmodal__panel { width: 100%; }
  .lmodal .listing__body { grid-template-columns: 1fr; }
  .lmodal .listing__side { order: -1; }
  .lmodal__pos { min-width: 0; }
  .lmodal__full { display: none; }
  .lmodal__label { font-size: 1rem; }
}

/* ==========================================================================
   The lightbox
   ========================================================================== */

/*
 * Built by assets/js/gallery.js on first use, one per page. Sits above the
 * sheet, which may be what opened it, so Escape and the close button land
 * here first.
 */

.lbox {
  position: fixed; inset: 0;
  z-index: 1300;
  display: grid;
  grid-template-rows: auto 1fr;
  background: color-mix(in srgb, var(--c-ink) 95%, transparent);
  color: var(--c-white);
  opacity: 0;
  transition: opacity .2s ease;
}
.lbox[hidden] { display: none; }
.lbox.is-on { opacity: 1; }
html.has-lbox, html.has-lbox body { overflow: hidden; }

.lbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
}
.lbox__count {
  font-family: var(--f-data);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--c-white) 75%, transparent);
}
.lbox__close {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-white);
}
.lbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lbox__close:hover { color: var(--c-accent); }

.lbox__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0 clamp(3.5rem, 8vw, 6rem) 1.5rem;
  min-height: 0;
}
.lbox__stage img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--c-ink) 60%, transparent);
}
.lbox__caption {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--c-white) 65%, transparent);
  text-align: center;
  max-width: 70ch;
}

.lbox__step {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent);
  color: var(--c-white);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.lbox__step:hover { border-color: var(--c-white); background: color-mix(in srgb, var(--c-white) 10%, transparent); }
.lbox__step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lbox__step--prev { left: clamp(0.75rem, 2vw, 1.5rem); }
.lbox__step--next { right: clamp(0.75rem, 2vw, 1.5rem); }
.lbox__step[hidden] { display: none; }
.lbox :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (max-width: 640px) {
  .lbox__stage { padding: 0 0.5rem 3.5rem; }
  .lbox__stage img { max-height: calc(100vh - 9rem); }
  .lbox__step { top: auto; bottom: 0.75rem; transform: none; width: 44px; height: 44px; }
  .lbox__step--prev { left: 0.75rem; }
  .lbox__step--next { right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lbox, .gallery__cell img { transition: none; }
}