/* /research — hub page linking the three bodies of evidence.
   Card idiom and theme tokens match /survey (see survey.css). */

:root {
  --rs-accent: #23004D;
  --rs-card-bg: var(--surface-raised);
  --rs-card-border: var(--border-subtle);
}
html.dark-mode {
  --rs-accent: #8a8aff;
}

/* Tighter vertical rhythm than the site default so the whole hub —
   intro, three questions, two cards, and the What's-next note — fits
   one 16:9 (1080p) viewport without scrolling. This sheet loads only
   on /research, so the .page-container/h1/p overrides stay local. */
.page-container { padding-top: 1.5rem; padding-bottom: 2rem; }
.page-content h1 { margin: 0 0 0.4em; }
.page-content p { margin: 0.7em 0; }

/* Laptop screens (e.g. a MacBook at 1512px logical) have less height
   than a 1080p monitor and more line wrapping, so they need a second,
   tighter tier to keep the whole page above the fold. Phones and
   tablets scroll anyway and keep the roomier rhythm. */
@media (min-width: 901px) and (max-width: 1700px) {
  .page-container { padding-top: 0.9rem; }
  .page-content h1 { font-size: 1.7rem; margin: 0 0 0.3em; }
  .page-content p,
  .page-content ul.rs-questions li { font-size: 0.93rem; }
  .page-content p { margin: 0.55em 0; }
  .page-content ul.rs-questions { margin-top: 0.6rem; }
  .page-content ul.rs-questions li { margin-bottom: 0.4rem; line-height: 1.55; }
  .rs-grid { margin-top: 1rem; }
  .page-content a.rs-card, .rs-note { padding: 0.9rem 1.1rem 0.8rem; }
  .page-content .rs-blurb, .page-content .rs-note-body { font-size: 0.8rem; line-height: 1.6; }
  .page-content .rs-blurb { margin-bottom: 0.7rem; }
  .page-content h2.rs-title { font-size: 0.95rem; margin-bottom: 0.5rem; }
  .page-content .rs-kicker { margin-bottom: 0.45rem; }
}

/* The three research questions — bulleted, with a slight indent that
   collapses on phones so the text stays flush with the page edge. */
.page-content ul.rs-questions {
  margin: 0.8rem 0 0;
  padding-left: 1.8rem;
}
.page-content ul.rs-questions li {
  margin: 0 0 0.55rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .page-content ul.rs-questions { padding-left: 1.05em; }
}

/* Cards and the What's-next note share one three-column row so the
   whole page clears the fold on a 1080p display. */
.rs-grid {
  display: grid;
  /* The note carries the most text, so it gets the widest column —
     equal thirds left it two lines taller than the cards. */
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 1rem;
  margin: 1.3rem 0 0.8rem;
}
@media (max-width: 900px) {
  .rs-grid { grid-template-columns: 1fr; }
}

.page-content a.rs-card,
.page-content .rs-note {
  display: flex;
  flex-direction: column;
  /* The ink layer is positioned absolutely at -7px; without a containing
     block here it resolves against a distant ancestor and the drawn edge
     lands three hundred pixels away from the card it belongs to. The deck's
     own .hi-box rule deliberately does not set this, because doing so
     un-positions the diverging chart's bars. */
  position: relative;
  /* The deck's own paper and cast, drawn rather than shadowed: these three
     sit directly above the findings and were the last thing on the page still
     reading as raised cards. js/deck-wireframe.js inks the boxes; without it
     the edge below is the same design a shade quieter. */
  background: var(--dw-paper, var(--rs-card-bg));
  border: 1.5px solid var(--dw-ink, var(--rs-card-border));
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--dw-cast, rgba(60, 50, 40, 0.16));
  padding: 1.2rem 1.3rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-content a.rs-card:hover,
.page-content a.rs-card:focus-visible {
  box-shadow: 5px 5px 0 var(--dw-cast, rgba(60, 50, 40, 0.16));
  transform: translate(-1px, -1px);
}

.page-content .rs-kicker {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link-color);
  margin: 0 0 0.6rem;
}
.page-content h2.rs-title {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--text-strong);
  margin: 0 0 0.6rem;
}
.page-content .rs-blurb {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 0.85rem;
}
.page-content .rs-cue {
  margin-top: auto;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--link-color);
}

.rs-note {
  background: var(--surface-sunken);
  border: 0;
  border-radius: 8px;
  padding: 1.1rem 1.2rem 0.95rem;
}
.page-content .rs-note-body {
  font-size: 0.85rem;
  line-height: 1.65;
  margin: 0;
}

/* ---- Phones: abbreviated copy and tighter type ----
   The hub's full intro and question copy overwhelm a phone screen, so under
   641px the .rs-full variants hide and the .rs-brief abbreviations (written
   alongside them in research.njk) show instead. */
.rs-brief { display: none; }
@media (max-width: 640px) {
  .page-content p.rs-full,
  .page-content span.rs-full { display: none; }
  .page-content p.rs-brief { display: block; }
  .page-content span.rs-brief { display: inline; }
  .page-content h1 { font-size: 1.5rem; margin: 0.15em 0 0.4em; }
  .page-content p,
  .page-content ul.rs-questions li { font-size: 0.95rem; line-height: 1.6; }
  .page-content ul.rs-questions { margin-top: 0.6rem; }
  .page-content ul.rs-questions li { margin-bottom: 0.5rem; }
  .rs-grid { gap: 0.8rem; margin-top: 1rem; }
  .page-content a.rs-card, .rs-note { padding: 0.85rem 1rem 0.8rem; }
  .page-content .rs-blurb, .page-content .rs-note-body { font-size: 0.82rem; }
  .page-content h2.rs-title { font-size: 0.95rem; margin-bottom: 0.4rem; }
}