/* ==========================================================================
   "Related across CUPA" (src/views/related.js): the block at the end of
   every content page, its "Read next" strip, and inline glossary links.
   Set like the foot of a broadsheet page: a heavy rule over a hairline,
   a small-capitals standing head, stories in ruled columns.
   ========================================================================== */

.rx {
  --rx-ink: var(--ink, #2A1B45);
  --rx-text: var(--text, #1C1C19);
  --rx-muted: var(--muted, #5D5B54);
  --rx-line: var(--line, #E4E1EA);
  --rx-accent: var(--accent, #6E42A6);
  background: var(--paper, #fff);
  color: var(--rx-text);
  padding: 2.75rem 0 3.25rem;
  clear: both;
}
.rx-wrap { max-width: var(--max, 1180px); margin: 0 auto; padding: 0 var(--s-3, 1.5rem); }
.rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- Read next */
.rx-next {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  border-top: 1px solid var(--rx-ink);
  border-bottom: 1px solid var(--rx-line);
  margin-bottom: 2.5rem;
}
.rx-nx {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.95rem 1.1rem 1.05rem;
  color: var(--rx-text); text-decoration: none;
  min-width: 0;
}
.rx-nx + .rx-nx { border-left: 1px solid var(--rx-line); }
.rx-nx--next { text-align: right; }
.rx-nx--start { background: var(--mist, #F4F2F7); }
.rx-nx-k {
  font: 600 0.7rem/1.2 var(--font, sans-serif);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rx-accent);
}
.rx-nx-type { color: var(--rx-muted); }
.rx-nx-t {
  font: 500 1.06rem/1.3 var(--font-serif, Georgia, serif);
  color: var(--rx-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
a.rx-nx:hover .rx-nx-t, a.rx-nx:focus-visible .rx-nx-t { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- Standing head */
.rx-head {
  border-top: 4px solid var(--rx-ink);
  padding-top: 3px;
  position: relative;
  margin-bottom: 1.4rem;
}
.rx-head::before {
  content: ""; display: block; border-top: 1px solid var(--rx-ink); margin-bottom: 0.85rem;
}
.rx-h {
  margin: 0;
  font: 600 1.55rem/1.1 var(--font-serif, Georgia, serif);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--rx-ink);
}
.rx-intro { margin: 0.3rem 0 0; font: 400 0.92rem/1.45 var(--font-serif, Georgia, serif); font-style: italic; color: var(--rx-muted); }

/* ------------------------------------------------------------------ Stories */
.rx-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rx-list.rx-n1 { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.rx-list.rx-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-list.rx-n3, .rx-list.rx-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-list.rx-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rx-item { padding: 0 1.15rem 1.2rem; border-left: 1px solid var(--rx-line); min-width: 0; }
.rx-item:first-child,
.rx-n3 .rx-item:nth-child(3n + 1), .rx-n6 .rx-item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.rx-n6 .rx-item:nth-child(n + 4) { border-top: 1px solid var(--rx-line); padding-top: 1.2rem; }
.rx-link { display: flex; flex-direction: column; gap: 0.7rem; color: inherit; text-decoration: none; height: 100%; }
.rx-fig {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist, #F4F2F7);
}
.rx-fig img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
.rx-fig--cover { aspect-ratio: 16 / 10; background: #E9E4DA; display: flex; justify-content: center; padding: 0.55rem 0; }
.rx-fig--cover > svg, .rx-fig--cover > img { width: auto !important; height: 100% !important; aspect-ratio: 5 / 7; box-shadow: 0 2px 8px rgba(20, 10, 40, 0.18); object-fit: cover; }
.rx-text { display: flex; flex-direction: column; gap: 0.35rem; }
.rx-type {
  font: 600 0.68rem/1.2 var(--font, sans-serif);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--rx-accent);
}
.rx-t-longarc .rx-type { color: #8B3A3A; }
.rx-t-issue .rx-type, .rx-t-tracker .rx-type, .rx-t-dataset .rx-type, .rx-t-dashboard .rx-type { color: #1F5C4A; }
.rx-title {
  font: 500 1.14rem/1.28 var(--font-serif, Georgia, serif);
  color: var(--rx-ink);
  overflow-wrap: anywhere;
}
.rx-link:hover .rx-title, .rx-link:focus-visible .rx-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rx-date { font: 400 0.8rem/1.3 var(--font, sans-serif); color: var(--rx-muted); }

/* --------------------------------------------------------------------- Hubs */
.rx-hubs {
  margin: 1.6rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rx-line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem;
  font: 400 0.9rem/1.4 var(--font, sans-serif);
}
.rx-hubs > span:first-child { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rx-muted); margin-right: 0.2rem; }
.rx-hubs a { color: var(--rx-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent-soft, #C9B8DE); text-underline-offset: 3px; }
.rx-hubs a:hover { text-decoration-color: currentColor; }
.rx-dot { color: var(--rx-muted); }

/* ------------------------------------------------------------------- Phones */
@media (max-width: 900px) {
  .rx-list, .rx-list.rx-n5, .rx-list.rx-n3, .rx-list.rx-n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-item { border-left: 0; padding: 1rem 0; border-top: 1px solid var(--rx-line); }
  .rx-item:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--rx-line); }
  .rx-item:nth-child(odd) { padding-right: 1rem; }
  .rx-item:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
  .rx-n6 .rx-item:nth-child(n + 4) { padding-top: 1rem; }
}
@media (max-width: 640px) {
  .rx { padding: 2rem 0 2.5rem; }
  .rx-wrap { padding: 0 var(--s-2, 1rem); }
  .rx-next { display: flex; flex-direction: column; }
  .rx-nx.is-empty { display: none; }
  .rx-next { border-bottom: 0; }
  .rx-nx, .rx-nx + .rx-nx { border-left: 0; border-bottom: 1px solid var(--rx-line); }
  .rx-nx--start { order: -1; }
  .rx-nx--next { text-align: left; }
  .rx-nx { padding: 0.8rem 0.75rem 0.9rem; }
  .rx-nx-t { font-size: 0.98rem; }
  .rx-list, .rx-list.rx-n2, .rx-list.rx-n3, .rx-list.rx-n5, .rx-list.rx-n6 { grid-template-columns: minmax(0, 1fr); }
  .rx-item, .rx-item:nth-child(even), .rx-item:nth-child(odd) { padding: 0.95rem 0; border-left: 0; border-top: 1px solid var(--rx-line); }
  .rx-item:first-child { border-top: 0; padding-top: 0; }
  .rx-item:nth-child(2) { border-top: 1px solid var(--rx-line); padding-top: 0.95rem; }
  .rx-link { flex-direction: row; align-items: flex-start; gap: 0.9rem; }
  .rx-fig { flex: 0 0 5.5rem; aspect-ratio: 1 / 1; }
  .rx-fig--cover { flex: 0 0 4.4rem; aspect-ratio: 5 / 7; padding: 0; background: none; }
  .rx-fig--cover > svg, .rx-fig--cover > img { width: 100% !important; height: auto !important; }
  .rx-title { font-size: 1.06rem; }
  .rx-h { font-size: 1.35rem; }
}

/* ------------------------------------------------------- Glossary links */
a.gl { text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.gl:hover { text-decoration-style: solid; }

@media print {
  .rx { display: none; }
}