/* ==========================================================================
   ABOUT — "where to find us"
   --------------------------------------------------------------------------
   Loaded alongside work.css on /about/ only. Deliberately uses the About
   page's own design language (.section, .eyebrow, .btn) rather than the newer
   system on the sample pages — a single section in a different visual idiom
   reads as a bug, not as a redesign.

   Only tokens that exist in tokens.css. --s-9, --s-13, --s-14, --font-sans and
   --border are NOT in the scale, and a var() that resolves to nothing
   invalidates the whole declaration silently.
   ========================================================================== */

.abAddr {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin: var(--s-6) 0;
  font-style: normal; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-mid);
}
.abAddr strong { color: var(--text-hi); }
.abAddr em { font-style: normal; color: var(--text-lo); font-size: var(--fs-xs); }

.abAddr__i, .abLine__i {
  flex: none; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-line);
  background: var(--surface-1); color: var(--accent-ink);
}
.abAddr__i svg, .abLine__i svg { width: 1.05rem; height: 1.05rem; }

/* ── the channel list ───────────────────────────────────────────────────── */
.abReach {
  display: grid; gap: var(--s-1);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-line);
  background: var(--surface-1);
}
.abReach__k {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-lo);
}
.abReach__k--sep {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--surface-line);
}

.abLine, .abSocials a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: .55rem; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.abLine:hover, .abSocials a:hover {
  background: var(--surface-2); border-color: var(--surface-line);
}
.abLine__t { display: grid; gap: .05rem; min-width: 0; }
.abLine__t b { font-size: var(--fs-sm); color: var(--text-hi); }
.abLine__t i {
  font-style: normal; font-size: var(--fs-xs); color: var(--text-lo);
  /* A long email must wrap rather than push the card past the column. */
  overflow-wrap: anywhere;
}

.abSocials { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }

@media (max-width: 46rem) {
  .abReach { padding: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .abLine, .abSocials a { transition: none; }
}

/* ── THE MAP ───────────────────────────────────────────────────────────────
   Wider than the footer's 22rem version, because here it is the point of the
   section rather than a detail in a sitemap column.

   `aspect-ratio` on the wrapper and 100% on the iframe means the box reserves
   its height before Google answers. Without it the map pops in at full height
   after load and shoves the buttons underneath it down the page — and this
   section is appended to the bottom of an 8,000px page where every reveal
   below it would have its IntersectionObserver boundary moved at the same
   time. */
.abMap {
  position: relative;
  margin-top: var(--s-6);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  max-width: 34rem;
}
.abMap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The label itself is .mapTag in site.css, shared with the footer and
   /contact/ maps. .abMap only has to be the positioning context for it. */

/* The measure cap on `p` in site.css would centre these two buttons inside a
   narrow left-aligned box. They are a row of controls, not a paragraph. */
.abReach__cta {
  max-width: none;
  margin: var(--s-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}