/* The Research page under its title (15 October 2026; replaces research-tracks.20261014.v2.css, whose
   tracks scrolled sideways). First the hypothesis, Intelligence Is Search, in the homepage's dark
   green band with its essay; then a section for each research track, worded as in the TTC Master
   deck: the track's sentence on the left, and its articles on the right as a vertical list, one row
   per article, newest first, like the Blog page (blog-journal.20261014.css). A row is the article's
   title, date and summary, with its tile drawing to the right, straight on the page; the drawing still
   builds itself on hover (article-art.20261007.css; scripts/build_article_art.py writes it into the
   row). The track's sentence stays in view while its list goes by. The title above is
   research-approach.20261006.css. */

/* The page doesn't load the homepage stylesheet that defines --mono. */
.research-index { --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.article-index :is(.research-hypothesis, .research-track) > .container {
  width: min(1440px, calc(100% - 112px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}
.research-hypothesis,
.research-track { font-family: var(--design-sans); }
:where(.research-hypothesis, .research-track) :is(h2, h3, p, ol) { margin: 0; }
:where(.research-track) ol { padding: 0; list-style: none; }

/* Section labels: 13px mono capitals, as on the homepage (section-type.20261006.css). */
.research-label {
  color: var(--accent-text);
  font: 400 13px/1.6 var(--mono);
  letter-spacing: 1.55px;
  text-transform: uppercase;
}

/* The homepage's text link (home.20260922.copy.v2.css .text-link). */
.research-text-link {
  display: inline-flex;
  align-items: center;
  gap: 31px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font: 400 13px/1.2 var(--design-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, gap .2s;
}
.research-text-link span { font-size: 22px; line-height: 1; }
@media (hover: hover) { .research-text-link:hover { color: var(--coral); gap: 40px; } }

/* ---- The hypothesis --------------------------------------------------------------------------- */
/* The homepage's dark green band (home-bands.20261012.css): inside it the theme tokens are re-mapped,
   so the text and the drawing draw light on dark. */
.research-hypothesis {
  --ink: #eeefe7;
  --paper: #233d32;
  --muted-text: #c3cfc0;
  --rule: #ffffff26;
  --accent: #94cda7;
  --accent-text: #a9d6b8;
  --coral: #eb8b61;
  --field-glow-rgb: 181, 194, 132;
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="dark"] .research-hypothesis { --paper: #111; }
.research-hypothesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 0 64px;
  align-items: center;
  padding: 88px 0;
}
.research-hypothesis-copy { display: grid; gap: 22px; justify-items: start; }
/* The site's heading rule sets every heading in the sans with !important; labels take the mono back. */
.research-index :is(.research-hypothesis-copy, .research-track-head) .research-label { font-family: var(--mono) !important; }
.research-index .research-hypothesis h2 {
  color: var(--ink);
  font-size: var(--section-title-size);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--section-title-tracking);
}
.research-hypothesis-lead {
  max-width: 30em;
  color: var(--ink);
  font-size: var(--subtext-size);
  line-height: var(--subtext-leading);
  letter-spacing: var(--subtext-tracking);
}
.research-byline { color: var(--muted-text); font-size: 14px; line-height: 1.5; }
.research-hypothesis-art { display: block; }
/* The drawing sits on the band unframed, like a figure. */
.tiled-index .research-hypothesis-art .blog-card-art {
  position: relative;
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 1;
  margin-left: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tiled-index .research-hypothesis-art .blog-card-art .article-art { padding: 0; }

/* ---- The tracks ------------------------------------------------------------------------------- */
.research-track-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0 72px;
  padding: 76px 0;
  border-bottom: 1px solid var(--rule);
}
.research-track-head { position: sticky; top: 28px; align-self: start; display: grid; gap: 16px; }
.research-index .research-track-head h2 {
  max-width: 15em;
  color: var(--ink);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.8px;
}
/* The ending strip above the signup overlaps the last section by 60px. */
.research-track:not(:has(~ .research-track)) .research-track-grid { padding-bottom: 140px; border-bottom: 0; }

/* A track's articles: one row each, divided by rules, the first level with the track's label. */
.track-list > li + li { border-top: 1px solid var(--rule); }
.tiled-index .track-list .track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  gap: 0 56px;
  align-items: start;
  padding: 40px 0 42px;
  color: var(--ink);
  text-decoration: none;
}
.track-list > li:first-child .track-row { padding-top: 0; }
.track-list > li:last-child .track-row { padding-bottom: 0; }
.track-row-copy { display: grid; gap: 10px; }
.research-index .track-row h3 {
  color: var(--ink);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.035em;
  transition: color .2s;
}
.track-row-date { color: var(--muted-text); font-size: 14px; line-height: 1.5; }
.track-row-dek { color: var(--muted-text); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
@media (hover: hover) { .track-row:hover h3 { color: var(--coral); } }
/* The drawing sits straight on the page, unframed, like a figure. */
.tiled-index .track-row .blog-card-art {
  --art-bg: var(--paper);
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tiled-index .track-row .blog-card-art .article-art { padding: 0; }

/* ---- Tablets and phones ----------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .article-index :is(.research-hypothesis, .research-track) > .container { width: calc(100% - 64px); }
  .research-hypothesis-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 0; }
  .tiled-index .research-hypothesis-art .blog-card-art { max-width: 360px; margin: 0; }
  .research-track-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 64px 0; }
  .research-track-head { position: static; }
  .tiled-index .track-list .track-row { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 0 36px; }
  .research-track:not(:has(~ .research-track)) .research-track-grid { padding-bottom: 120px; }
}

@media (max-width: 760px) {
  .article-index :is(.research-hypothesis, .research-track) > .container { width: calc(100% - 40px); }
  .research-hypothesis-grid { padding: 60px 0; }
  .research-track-grid { gap: 32px; padding: 52px 0; }
  .research-index .research-track-head h2 { font-size: 23px; }
  .tiled-index .track-list .track-row { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 30px 0 32px; }
  .tiled-index .track-row .blog-card-art { max-width: 360px; }
  .research-track:not(:has(~ .research-track)) .research-track-grid { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .research-text-link,
  .research-index .track-row h3 { transition: none; }
}