/* GUIDES ROW (shared: every page with an ink footer)
   ------------------------------------------------------------------
   One quiet line under the footer's legal row: the landing pages that
   stay out of the main nav. Mono, small, set in the footer's own muted
   tone: #9a9488 on ink #14110c is 6.2:1, the cobalt-light hover 5.8:1.

   In the ink contact block it is the last child of .contact__inner
   (a grid on every page that uses it): grid-column 1 / -1 puts it on
   its own row under .contact__foot. On the About pages it sits in
   .av3-foot inside its own .av3-wrap.

   The dots between links are drawn by the list itself and the list
   clips its own left edge, so a line that wraps never starts with a
   dot. No JS, no motion beyond a colour change.
   ------------------------------------------------------------------ */
.guides-row {
  --gr-sep: 26px;                     /* room for one dot between two links */
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0 14px;
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--font-mono, "Spline Sans Mono", ui-monospace, Menlo, monospace);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted-2, #9a9488);
}
.guides-row__k { flex: none; }
.guides-row__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 calc(-1 * var(--gr-sep));
  padding: 0;
  list-style: none;
  /* hide the dot that would lead each line; keep 6px for the focus ring */
  clip-path: inset(-8px -8px -8px calc(var(--gr-sep) - 6px));
}
.guides-row__list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--gr-sep);
}
.guides-row__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 5px;
  width: var(--gr-sep);               /* centred between the two links */
  text-align: center;
  letter-spacing: 0;
}
.guides-row .guides-row__a {
  display: inline-block;
  padding: 5px 0;                     /* a 27px line: clears the 24px target minimum */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(240, 236, 227, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease, ease), text-decoration-color 0.2s var(--ease, ease);
}
.guides-row .guides-row__a:hover,
.guides-row .guides-row__a:focus-visible {
  color: var(--cobalt-light, #7a83ff);
  text-decoration-color: currentColor;
}
/* on a guide itself: its own entry reads as "you are here", no underline */
.guides-row .guides-row__a[aria-current="page"] { text-decoration: none; }

/* About pages: the row closes the ink foot under the copyright line,
   in that foot's own size and tracking */
.av3-foot .guides-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 236, 227, 0.16);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* touch widths: a taller target for each link */
@media (max-width: 760px) {
  .guides-row { margin-top: 18px; }
  .guides-row .guides-row__a { padding: 9px 0; }
  .guides-row__list li::before { top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .guides-row .guides-row__a { transition: none; }
}