/* ============================================================
   FLIBBR LINKS-RAIL — shared quiet 4×1 routing rail
   ----
   A flat 4-column grid of routing tiles, each with a numeric
   label, serif name, serif teaser, and sans arrow. Designed
   for page-footer / closer surfaces where the readers need to
   pick a destination but the staging shouldn't compete with
   the page's primary content.

   Consumers at v0.5.90:
     1. /about/  — page-about.php (4 tiles: Recognition, Press,
                   Careers & collaboration, Contact)
     2. /contact/ — template-parts/contact/contact-paths.php
                   (4 tiles: Project enquiry, Validation Room,
                   Bootcamp, Press/speaking/collaboration)

   v0.5.49–v0.5.89: rules lived in about.css only.
   v0.5.90 (10 May 2026): lifted to this shared file; about.css
   removed its copy, contact-paths.php rebuilt to use this
   pattern (replacing the v0.5.89 .recap-tail-paths--2up grid
   which is now retired). Single source of truth — closes drift
   risk between consumers.

   Reference:
     - flibbr-design-mockup-final-about.html v6 (canonical source)
     - flibbr-design-mockup-final-contact.html v9 (matched at v0.5.90)

   Op-learning #9, second application — copy shared chassis CSS
   verbatim from the source canonical when scaffolding a new
   consumer.
   ============================================================ */

/* quiet links rail */
.links-rail {
  padding-block: var(--s-9);
}
.links-rail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--rule);
}
@media (max-width: 880px) {
  .links-rail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .links-rail-grid { grid-template-columns: 1fr; }
}
.links-rail-item {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  text-decoration: none; color: inherit;
  background: var(--paper);
  transition: background var(--motion-duration-content) var(--motion-ease-content);
}
.links-rail-item:hover { background: var(--paper-warm); }
.links-rail-label {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.links-rail-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink);
}
.links-rail-name em { font-style: italic; }
.links-rail-teaser {
  font-family: var(--serif); font-weight: 400;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--s-2);
}
.links-rail-arrow {
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--sans); font-weight: 500;
  font-size: 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--motion-duration-ui) var(--motion-ease-ui);
}
.links-rail-arrow::after {
  content: ""; display: inline-block;
  width: 0.85em; height: 0.85em;
  background-color: currentColor;
  -webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
          mask: var(--arrow-svg-right) no-repeat center / contain;
  flex: none;
}
.links-rail-item:hover .links-rail-arrow { gap: 10px; }