/* ==========================================================================
   LIMM — Clinical Editorial
   location.css · where the laboratory is: a chapter that opens on the map,
   and plain rows of fact under it.
   ========================================================================== */

/* ---- The chapter ---------------------------------------------------------
   Its own tint in the midnight family, like every other chapter. The page
   class carries it so chapters.css's plain `.chapter` background cannot win
   on specificity, whichever stylesheet is read last. */
.location-page .chapter--location { background: #0c2426; }
.location-page .chapter--location .chapter-title { font-size: clamp(58px, 6.6vw, 112px); }
.location-composition { grid-template-columns: 1.05fr 1fr; }

/* Two rooms where the other chapters print one large number. They are the one
   piece of wayfinding on the page, so they are read at body size rather than
   at the 9px this chapter gives its incidental labels. */
.location-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--paper);
}
.location-facts b { color: var(--mint); font-weight: 600; }
.location-facts b::after { content: ' · '; color: #ffffff4d; }

/* Google draws the map, so the frame is given a ratio and a hairline rather
   than a design of its own. */
.location-map__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #ffffff2e;
  background: #0a1b1d;
}
.location-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.location-map__link { display: inline-block; margin-top: 20px; font-size: 10px; color: var(--paper); }

/* ---- The rows of fact, on paper ------------------------------------------
   Rooms, address and the two optional sections all read as the same object:
   a label in the left column and the answer in the right. */
.factgrid { border-top: 1px solid var(--rule); }
.factrow {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(18px, 1.8vw, 28px);
  border-bottom: 1px solid var(--rule);
}
.factrow__label { color: var(--accent-ink); padding-top: 0.3em; }
.factrow__value { font-size: var(--text-lead); line-height: 1.55; color: var(--ink); }
.factrow__ko { margin-top: 8px; font-size: var(--text-sm); color: var(--muted); }
.factrow dd { margin: 0; }

.location-intro p { max-width: 62ch; font-size: var(--text-lead); line-height: 1.85; }
.location-intro p + p { margin-top: 1em; }

.location-steps { counter-reset: step; }
.location-steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(14px, 1.4vw, 20px);
  border-bottom: 1px solid var(--rule-soft);
}
.location-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.location-steps p { font-size: var(--text-lead); line-height: 1.7; }

.location-links { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 56px); }
.location-links a { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }

@media (max-width: 760px) {
  .location-map__frame { aspect-ratio: 3 / 2; }
  .factrow { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .location-steps li { grid-template-columns: 40px minmax(0, 1fr); }
}