/* Index pages (blog, careers), role pages, and pages without a dedicated layout. */

/* entries: each post in its own ground block */
.entries { margin: var(--sp-8) 0 var(--sp-10); }
.entry { margin: 0 0 var(--sp-6); background: var(--ground); padding: var(--sp-6) var(--sp-8) var(--sp-4); }
.entry__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--sp-2);
}
.entry__meta span + span::before { content: '\00B7'; margin: 0 var(--sp-2); }
.entry__title {
  font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 var(--sp-2);
}
.entry__title a { color: var(--ink); text-decoration: none; }
.entry__title a:hover { color: var(--accent); }
.entry__title code { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; }
.entry__desc { margin: 0 0 var(--sp-2); font-size: 13.5px; line-height: 1.55; color: var(--ink); max-width: 62ch; }
.entry__desc code { font-family: var(--font-mono); font-size: 0.92em; }

/* prose on index, role, and plain pages */
.prose--page > h1 { margin: 0 0 var(--sp-4); }
.prose--page h3 { margin-top: var(--sp-7); }
.prose--page ul { padding-left: 1.2em; }
.prose--page li { margin-bottom: var(--sp-2); }

/* role page */
.role-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  margin: -6px 0 var(--sp-6);
}
.role-meta span + span::before { content: '\00B7'; margin: 0 var(--sp-2); }
.lede { font-weight: 600; font-size: 15.5px; line-height: 1.55; margin: 0 0 var(--sp-6); max-width: 60ch; }
.role .prose h2 { font-size: 1.15rem; margin-top: var(--sp-8); }
.role .readmore { margin-top: var(--sp-2); }

/* wider columns: the careers page lays its content out in two columns (the
   split is in the content, one div per column); the Translation Explorer page
   holds the graph and its detail panel */
.careers-index { --column: 960px; }
.explorer-page { --column: 1200px; }
.cols { display: grid; align-items: start; column-gap: var(--sp-12); }
.cols > div > :first-child { margin-top: 0; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .entry__title { font-size: 1.25rem; } }