/* ===========================================================================
   FINAL PASS · 26 September 2026 · loaded last
   1. The location map: a real street map, not a diagram
   2. Floor plans: a phone build and a desktop build
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LOCATE
   Andy: the dial had "no map for people to locate themselves." The dial's
   rings survive as hairlines over a real OSM street drawing, two builds served
   by <picture>. The map is a light card on the dark section: it is the one
   object here people read for information, so it gets daylight contrast.
   --------------------------------------------------------------------------- */
.locate__map { margin: 0; }
.locate__map picture, .locate__map img {
  display: block;
  width: 100%;
  height: auto;
}
.locate__map img {
  background: #EFE9DF;              /* the map's land, so it never flashes dark */
  border-radius: 2px;
}
.locate__go {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
}
.locate__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* Apple HIG tap target */
  padding: 0 1.05rem;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius: 999px;
  font-family: var(--sans, "Archivo", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) {
  .locate__btn:hover { border-color: currentColor; }
}
.locate__btn:active { background: color-mix(in oklab, currentColor 10%, transparent); }
.locate__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 899px) {
  /* edge to edge: a map is worth every pixel of a phone's width */
  .locate__map { margin-inline: calc(max(var(--gutter), var(--safe-l, 0px)) * -1); }
  .locate__map img { border-radius: 0; }
  .locate__cap, .locate__go { padding-inline: max(var(--gutter), var(--safe-l, 0px)); }
  .locate__btn { flex: 1 1 0; justify-content: center; padding: 0 0.6rem; }
}
.locate__cap {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-faint);
}
/* an arrow drawn in CSS: neither face carries a north-east arrow glyph */
.locate__btn::after {
  content: "";
  width: 0.5em; height: 0.5em;
  margin-left: 0.55em;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-0.05em);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------------------------------------------------------------------------
   2. PLANS
   One level at a time, big, under a three way switch. The drawing is traced
   off the architect's level sheets and carries only walls, glass, the stair,
   the cab and the room names (web/render.py in the plans folder).
   Phone: a portrait build, street at the top, edge to edge, no sideways
   scroll. Desktop: the landscape build, street on the left, north up.
   --------------------------------------------------------------------------- */
.plan[hidden] { display: none !important; }
.plan { margin: 0 0 1.2rem; }

.lv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  max-width: 520px;
}
.lv__b {
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-soft);
  transition: background-color 180ms cubic-bezier(.2,.7,.2,1), color 180ms cubic-bezier(.2,.7,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.lv__n { font-variant-numeric: tabular-nums; color: var(--amber-deep); }
.lv__b[aria-selected="true"] { background: var(--ink); color: var(--bone, #EDE6DA); }
.lv__b[aria-selected="true"] .lv__n { color: inherit; opacity: .7; }
@media (hover: hover) {
  .lv__b:not([aria-selected="true"]):hover { color: var(--ink); background: var(--bone-lift); }
}
.lv__b:active { transform: scale(.98); }
.lv__b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber-deep); }

/* the caption sits above the drawing, one line: level, height, what is on it */
.plan__cap { margin-bottom: 0.7rem; }
.plan__sheet {
  background: #F4F0E8;
  padding: 0 !important;
  overflow: visible !important;
  max-width: 1180px;
}
.plan__sheet picture, .plan__sheet img {
  display: block; width: 100% !important; max-width: 100% !important; height: auto;
}
.plans__hint { display: none; }

@media (max-width: 899px) {
  .lv { max-width: none; }
  .lv__t { display: none; }                 /* "1 2 3" plus the word LEVEL once */
  .lv__b::before { content: "Level"; }
  .plan__cap::after { content: none !important; display: none !important; }
  /* edge to edge: the plan is the content */
  .plan__sheet { margin-inline: calc(max(var(--gutter), var(--safe-l, 0px)) * -1); }
  @media (hover: none) {
    .plans__hint {
      display: block;
      margin: 0.7rem 0 1.4rem;
      font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-faint); text-align: center;
    }
  }
}

/* ---------------------------------------------------------------------------
   3. THE IDEA · David's line. The second sentence is its own line on every
   screen, balanced, so it reads as a statement and not a leftover.
   --------------------------------------------------------------------------- */
.lede__line { display: block; margin-top: 0.35em; text-wrap: balance; }

/* ---------------------------------------------------------------------------
   4. FOOTER · the search pages, 28 Sep 2026. One row of plain links so every
   residence, the location and the questions are one tap and one crawl away.
   --------------------------------------------------------------------------- */
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin-top: 1.6rem; }
.foot__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: inherit; opacity: .8; }
@media (hover: hover) { .foot__nav a:hover { opacity: 1; } }