/* Cancer Policy Lab — About the lab (/about/) only, loaded right after site.css; values come from
   tokens.css. Three parts:
   - The head, on the homepage hero's deep teal (#082B29, home.css, --hl-bg) with its line
     across the full width of the screen (#33A193, 4px; 3px on phones): the breadcrumb, the H1,
     the line, then the allocation-paradox sentence large in the serif.
   - Research themes: the heading at left and the four themes at right from 900px (one under the
     other below that), each under a hairline: its name, linking to its theme page, and its line.
   - Three links on, on the site's paper (#F7F6F2): Featured research, Published work by theme
     and People, each a serif label on a dark rule with a long thin arrow (the line again), in a
     row of three from 900px.
   Contrast: on #082B29 white 15.1:1, on its glow (#0B3532) 13.4:1 (the H1, the sentence, the
   breadcrumb link); on white the theme names #121212 18.7:1 and their lines #4A4A48 8.9:1; on
   #F7F6F2 the links #121212 17.3:1. The teal line and the hairlines are decoration. */

/* ---------- The head ---------- */
.ab-head {
  --ab-bg: #082B29;
  --ab-ink: #FFFFFF;
  --ab-line: #33A193;
  overflow: hidden; overflow: clip;
  padding-block: var(--space-6) var(--space-7);
  /* The hero's glow (#0B3532, white on it 13.4:1), at right. */
  background: var(--ab-bg) radial-gradient(ellipse 55% 90% at 80% 35%, #0B3532, rgba(8, 43, 41, 0));
  color: var(--ab-ink);
}
.ab-head .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--text-small); line-height: 1.6; }
.ab-head .crumbs a { color: var(--ab-ink); text-decoration-color: rgba(255, 255, 255, 0.6); }
.ab-head .crumbs a:hover { text-decoration-color: currentColor; }
.ab-head h1 { margin-top: var(--space-5); color: var(--ab-ink); font-size: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); line-height: 1.04; letter-spacing: -0.018em; }
/* The line: from the left edge of the screen to the right edge, as in the homepage hero. */
.ab-line { position: relative; height: 3px; margin-block: var(--space-5); }
.ab-line::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--page-max)) / 2)));
  right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--page-max)) / 2)));
  background: var(--ab-line);
}
.ab-q {
  max-width: 26em;
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem);
  line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; color: var(--ab-ink);
}
.ab-head :focus-visible { outline-color: var(--ab-ink); }
@media (min-width: 37.5rem) {
  .ab-head { padding-block: var(--space-6) var(--space-8); }
  .ab-line { height: 4px; margin-block: var(--space-6); }
}
@media (min-width: 64rem) { .ab-head { padding-top: var(--space-7); } }

/* ---------- Research themes ---------- */
.ab-themes-sec { border-top: 0; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.ab-grid > * { min-width: 0; }
.ab-themes { list-style: none; border-bottom: 1px solid var(--color-chart-muted); }
.ab-themes > li { border-top: 1px solid var(--color-chart-muted); padding-block: var(--space-4) var(--space-5); }
.ab-themes h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; }
.ab-themes h3 a { color: var(--color-text); text-decoration-color: var(--color-chart-muted); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ab-themes h3 a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.ab-themes p { margin-top: var(--space-2); max-width: 36em; font-size: var(--text-body); line-height: 1.55; color: var(--color-text-muted); }
@media (min-width: 56.25rem) {
  .ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-7); }
  .ab-themes > li { padding-block: var(--space-5); }
}

/* ---------- The links on ---------- */
.ab-more { padding-block: var(--space-6) var(--space-7); background: var(--color-band); }
.ab-links { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ab-links > li { display: flex; min-width: 0; }
.ab-links a {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3.5rem; padding-block: var(--space-3) var(--space-2); border-top: 2px solid var(--color-text);
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25;
  color: var(--color-text); text-decoration: none;
}
.ab-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ab-arrow { position: relative; flex: none; display: inline-block; width: 2.5rem; height: 1px; background: currentColor; transition: width 0.15s ease; }
.ab-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.ab-links a:hover .ab-arrow { width: 3.25rem; }
@media (min-width: 56.25rem) {
  .ab-more { padding-block: var(--space-7) var(--space-8); }
  .ab-links { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { .ab-arrow { transition: none; } }
@media (forced-colors: active) { .ab-line::before { forced-color-adjust: none; background: CanvasText; } }
@media print {
  .ab-head { background: none; color: #121212; padding-block: var(--space-4); }
  .ab-head h1, .ab-q, .ab-head .crumbs a { color: #121212; }
  .ab-more { background: none; }
}