/* =========================================================
   ABOUT
   Two topic prose sections on top (ink titles, no accent),
   four pressable /url cards below (whole card is the link,
   arrow on the right, ink titles instead of lavender).
   Chrome + press behavior for .is-url cards is owned by the
   tile primitive in foundation.css — this file only handles
   layout and the arrow.
   ========================================================= */

.about-walkthrough {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  /* Width + centering come from foundation's .subpage > * rule;
     this only owns the inner stacking. */
}

/* ---------- Section primitives ---------- */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--ink);
}
.about-section-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: var(--reading-default);
  margin: 0;
}
.about-section-body p {
  margin: 0;
}
.about-section-body p + p {
  margin-top: 0.9em;
}

/* ---------- /url cards ----------
   Chrome comes from the tile primitive (see foundation.css).
   Layout + arrow positioning only here. */
.about-section.is-url {
  padding: 1.5rem 1.75rem; /* 24/28 → 33/38.5 @ billboard */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.125rem;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.about-section.is-url .about-section-title {
  font-size: var(--fs-h3);
}
.about-section.is-url .about-section-body {
  margin-top: 6px;
  font-size: var(--fs-body);
  color: var(--ink-mute);
  max-width: 60ch;
}
.about-signpost-arrow {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  align-self: center;
  justify-self: end;
  line-height: 1;
}
.signpost-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}