@charset "UTF-8";
/* ==========================================================================
   contact.html only. Loaded after main.css.
   Every value below comes from a token already declared in main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paired text/figure rows
   -------------------------------------------------------------------------- */
.pair { align-items: center; }
.pair > figure { margin: 0; }

/* --------------------------------------------------------------------------
   Contact card, the panel already exists in main.css; these are the small
   additions the five-row version needs.
   -------------------------------------------------------------------------- */
.contact-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--s-5);
}

/* The key and the value stack; main.css leaves them inline. */
.contact-list__k,
.contact-list__v { display: block; }

/* Cinzel is a caps face, so an email address or an @handle set in it is shown
   in characters it does not actually contain. Those two values are set in the
   body face instead, at the same optical weight. */
.contact-list__v--plain {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.contact-list__note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* The last row sits on the card's own edge, so it needs no rule of its own. */
.contact-list a:last-child,
.contact-list__static:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   What to tell us, a register of five things, ruled like the card's lines
   -------------------------------------------------------------------------- */
.tell {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.tell > li {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46em) {
  .tell > li {
    grid-template-columns: 15rem 1fr;
    gap: var(--s-5);
    align-items: baseline;
  }
}
.tell__k {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.tell__v {
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   Service area and the two honest notes that sit with it
   -------------------------------------------------------------------------- */
.area-note h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.area-note p { color: var(--ink-soft); max-width: 62ch; }
.area-note p + p { margin-top: var(--s-4); }