/* ============================================================================
   listing.css · 8 November 2026
   ----------------------------------------------------------------------------
   820 and 822 went on the MLS in October. This file carries what that added to
   the home page: the two homes for sale beside the enquiry form, the MLS link in
   the bays, and the quieter state of a bay that is not listed. It loads last.

   Written phone first: the base rules are the phone, and the only media query
   adds room on a wider screen. Nothing here is gated to a maximum width.

   It also lifts the type floor. The label scale ran from 9.6px to 11.2px on a
   phone. Measured on WebKit, that is below the 12px floor the site now holds,
   so the label token and the handful of hard-set sizes come up to 0.75rem.
   ========================================================================== */

:root { --t-label: 0.75rem; }

/* (hard-set sizes below the floor are lifted at the end of this file) */

/* the hint that used to sit over the twilight heading as a kicker */
.tw__hint { color: var(--ink-faint); margin-top: -0.4rem; margin-bottom: 1.2rem; }

/* a bay that has no listing reads quieter than a price */
.bay__price--off { color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   AVAILABLE · the two listed homes, beside the form
   One row per home: the address and its facts go to the residence page, the
   price sits at the end, and the MLS record is its own target underneath.
   ------------------------------------------------------------------------- */
.avail {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.avail li { border-bottom: 1px solid var(--rule); padding: 0.35rem 0 0.2rem; }
.avail li > a:first-child {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 0.9rem;
  min-height: 48px; padding-block: 0.5rem;
  text-decoration: none; color: inherit;
}
.avail__a { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--ink); }
.avail__m { font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.avail__p { font-size: 0.95rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.avail__x {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-deep); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 4px;
}
@media (hover: hover) {
  .avail li > a:first-child:hover .avail__a { color: var(--amber-deep); }
  .avail__x:hover { text-decoration-color: currentColor; }
}
.avail a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* the bay detail now carries two links; give the second a little air */
.bay__inner .bay__cta + .bay__cta { margin-top: -0.3rem; }

@media (min-width: 900px) {
  .avail__a { font-size: 2rem; }
  .avail__m { font-size: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   TYPE FLOOR · 12px
   Each selector below was set between 0.6rem and 0.72rem in the stylesheets
   above it (final, hero, mobile, revise). Lifted to 0.75rem, which is 12px.
   The specificity matches the rule it lifts; the !important on the eyebrow
   matches the one already on it in hero.css.
   ------------------------------------------------------------------------- */
.locate__btn, .lv__b, .foot__nav a, .near__n, .near__note,
.drive .label, .address__caveat, .hero__cue .label { font-size: 0.75rem; }
.hero__eyebrow { font-size: 0.75rem !important; }
@media (hover: none) { .plans__hint { font-size: 0.75rem; } }
.plan__cap::after { font-size: 0.75rem; }

/* ---------------------------------------------------------------------------
   TAP TARGETS · 44px
   Measured on WebKit at 1440 before this pass: the section links in the bar
   were 30px tall, "All four plans are drawn to scale below" 11px, and the
   phone and email in the enquiry card 18px. Same words, taller boxes.
   ------------------------------------------------------------------------- */
.bays__note a { display: inline-flex; align-items: center; min-height: 44px; }
/* below 900px revise.css already gives the card's phone and email 44px */
@media (min-width: 900px) {
  .nav__links a, .enquire__card a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The sheet's Call and Text: revise.css set them inline-block for height,
   which undid the flex centring in mobile.css, so the words sat against the
   left edge of the arch. Flex again, still 52px. */
.sheet .sheet__call a[href] { display: flex; }

/* the unit line under each figure in the glance band: 10.6px on a phone before */
.statement__facts dd.fact__u { font-size: 0.75rem; }