/* One Origin — the "More ways we're connected" band.

   Every page on the site ends with the same band, so the link network looks the
   same wherever you arrive. Cards carry a small hand-drawn visual; the images are
   decorative and lazy-loaded, so a page that only shows this band stays light.

   Loaded last on every page, after connections.css / scene.css, so the definitions
   here are the ones that win. */

.related {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 24px 8px;
  border-top: 1px solid var(--hair, var(--line));
}

.related h2 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.related > p.related-lede {
  max-width: 58ch;
  margin: 0 0 26px;
  color: var(--sand-dim, var(--muted));
  font-size: 0.95rem;
}

/* Three labelled groups so sixteen destinations stay readable. */
.card-group { margin: 0 0 30px; }
.card-group:last-child { margin-bottom: 0; }

.card-group-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 14px;
}
.card-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair, var(--line));
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cards a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
  border: 1px solid var(--hair, var(--line));
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel, rgba(255, 252, 245, .72));
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cards a:hover,
.cards a:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow, 0 14px 34px rgba(69, 53, 32, .12));
}

.cards a[aria-current="page"] { border-color: var(--gold); }

/* The image sits flush to the card edges; text keeps its own padding. */
.card-media {
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--hair, var(--line));
  background: var(--panel-2, #f3eee4);
  overflow: hidden;
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .75, .25, 1);
}
.cards a:hover .card-media img,
.cards a:focus-visible .card-media img { transform: scale(1.045); }

.card-body { padding: 14px 16px 0; }

.card-title {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.cards small {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--sand-dim, var(--muted));
}

/* The arrow that slides in on hover. */
.cards a::after {
  content: '\2192';
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 1px 6px var(--void, #f7f4ec);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s ease, transform .2s ease;
}
.cards a:hover::after,
.cards a:focus-visible::after { opacity: 1; transform: none; }

/* Compact, image-free variant used near the top of the story, so the opening
   stays light and the full visual band waits for the end. */
.explore-bar { max-width: 1080px; margin: 0 auto; padding: 22px 24px 6px; }
.explore-bar h2 {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-dim, var(--muted));
  margin: 0 0 12px;
}
.explore-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.explore-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 7px 13px;
  border: 1px solid var(--hair, var(--line));
  border-radius: 999px;
  font-size: 0.83rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
.explore-list a:hover,
.explore-list a:focus-visible { border-color: var(--gold); background: var(--panel-2, rgba(243, 238, 228, .6)); }
.explore-list a[aria-current="page"] { border-color: var(--gold); }
.explore-list .ex-emoji { font-size: 0.9rem; line-height: 1; }

@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cards { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cards a,
  .cards a::after,
  .card-media img,
  .explore-list a { transition: none; animation: none; }
  .cards a:hover,
  .cards a:focus-visible { transform: none; }
  .cards a:hover .card-media img,
  .cards a:focus-visible .card-media img { transform: none; }
}