/* DIMMS Lab. Home page: hero and live simulation, introduction, research themes, news grid, portrait wall.
   Loaded after assets/css/dimms.css, which holds the tokens and the shared components. */

/* 1. Hero
   A dark panel (dl-night) as tall as the first screen, less the radar strip when one follows it. On wide screens
   the simulation's field lies behind the whole panel and the instrument sits beside the text. At 1024 px and
   below the figure becomes a card of its own, between the heading and the lead.
   -------------------------------------------------------------------------- */

.dl-hero {
  --hero-under: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: max(40rem, min(100vh, 65rem) - var(--hero-under));   /* for browsers without the svh unit */
  min-height: max(40rem, min(100svh, 65rem) - var(--hero-under));
  overflow: hidden;
  background:
    radial-gradient(68.75rem 42.5rem at 76% 38%, color-mix(in srgb, var(--navy) 80%, transparent), transparent 62%),
    linear-gradient(180deg, var(--paper-sunk) 0%, var(--night) 52%, var(--night-2) 100%);
}
/* The radar strip is 56 px tall with a hairline above and below (radar.css). Hero and strip fill one screen. */
.dl-hero:has(+ .dl-radarstrip:not([hidden])) { --hero-under: calc(var(--space-7) + var(--space-2) + 2px); }

/* Dims the field where the text lies over it, and under the header. */
.dl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper-sunk) 90%, transparent) 0%, color-mix(in srgb, var(--paper-sunk) 76%, transparent) 30%, color-mix(in srgb, var(--paper-sunk) 28%, transparent) 50%, transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper-sunk) 70%, transparent) 0%, transparent 18%);
}

/* Clicks pass through the empty parts of the grid to the field behind it. */
.dl-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
  padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-8);
  padding-block: calc(var(--nav-h) + clamp(var(--space-4), 4svh, var(--space-6))) clamp(var(--space-7), 7svh, var(--space-8));
  pointer-events: none;
}
.dl-hero__content, .dl-sim { pointer-events: auto; }

.dl-hero__content { grid-column: 1 / span 7; }
.dl-hero__kicker { margin-bottom: var(--space-5); }

/* The largest text of the first screen. It is painted with the first paint: nothing here fades or slides in.
   On a short, wide screen it gives way just enough for hero and radar strip to fit one screen: the height of
   the screen, less the strip and the 27.4rem that the header, kicker, lead, buttons and padding take, shared
   between the heading's four lines. It never goes below 56 px. */
.dl-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-size: clamp(3.5rem, (100svh - var(--hero-under) - 27.375rem) / 4.08, var(--text-hero));
  font-weight: 340;
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.dl-hero__title em { font-style: italic; color: var(--gold); }

.dl-hero__lead {
  max-width: 38rem;
  margin: var(--space-6) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}

.dl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* 2. The simulation figure (Fig. 1)
   -------------------------------------------------------------------------- */

.dl-sim {
  --sim-pad: var(--space-5);
  --sim-chart: 11.75rem;
  --plot-bg: var(--paper-raised);
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: var(--sim-pad);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink-2);
}

/* The field. On wide screens it covers the hero: the canvas lies under the scrim and the text, and the button
   that takes clicks lies just above the scrim, so its focus ring is not dimmed. */
.dl-sim__field { position: absolute; inset: 0; pointer-events: none; }
.dl-sim__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease);
}
.dl-hero.is-live .dl-sim__canvas { opacity: 1; }
.dl-sim__seed {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
  pointer-events: auto;
}
.dl-sim__seed:focus-visible { outline-offset: calc(-1 * var(--space-2)); border-radius: var(--radius); }

.dl-sim__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.dl-sim__title,
.dl-sim__day {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.dl-sim__title { color: var(--ink); }
.dl-sim__day { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The chart is drawn by the script at exactly this size, so its 12 px labels stay 12 px. */
.dl-sim__chart { height: var(--sim-chart); margin-top: var(--space-3); }
.dl-sim__chart .dl-plot { height: 100%; }
.dl-sim__peak { font-weight: 400; font-variant-numeric: tabular-nums; }
.dl-sim__tick { transition: opacity var(--dur-3) var(--ease); }
.dl-sim__tick.is-out { opacity: 0; }

/* The counts are the legend of the field and of the chart: four across where there is room, two by two elsewhere */
.dl-sim__counts {
  --counts-gap: var(--space-4);
  --counts-four: calc((100% - 3 * var(--counts-gap)) / 4);
  --counts-two: calc((100% - var(--counts-gap)) / 2);
  display: grid;
  /* Four columns when the list is at least 31rem wide, otherwise two: never three and one. */
  grid-template-columns: repeat(auto-fit, minmax(clamp(var(--counts-four), (31rem - 100%) * 999, var(--counts-two)), 1fr));
  gap: var(--space-1) var(--counts-gap);
  margin: var(--space-3) 0 0;
}
.dl-sim__counts > div { display: flex; align-items: baseline; gap: var(--space-2); }
.dl-sim__counts dt { display: flex; align-items: center; gap: var(--space-2); min-width: 5.25rem; font-size: var(--text-label); line-height: var(--lh-small); color: var(--ink-2); }
.dl-sim__counts dd {
  min-width: 3ch;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* On the field an infectious person glows; so does the key. */
.dl-sim__counts .dl-dot--i { box-shadow: 0 0 var(--space-2) rgba(var(--data-i-rgb), 0.8); }

.dl-sim__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.dl-sim__controls .dl-chip { gap: var(--space-2); }
.dl-sim__pause-icon, .dl-sim__play-icon { display: contents; }
.dl-sim__play-icon,
.dl-hero.is-paused .dl-sim__pause-icon { display: none; }
.dl-hero.is-paused .dl-sim__play-icon { display: contents; }
.dl-sim__play-icon .dl-icon { fill: currentColor; }

.dl-sim__words { margin-top: var(--space-4); }
.dl-sim__caption { max-width: none; margin: 0; color: var(--ink-2); }
/* The hint and the outcome of the last outbreak share one place, so nothing moves when one replaces the other. */
.dl-sim__note { display: grid; margin-top: var(--space-2); font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }
.dl-sim__note > p { grid-area: 1 / 1; margin: 0; }
.dl-sim__outcome { color: var(--ink); }
.dl-sim__outcome,
.dl-sim.is-ended .dl-sim__hint { visibility: hidden; }
.dl-sim.is-ended .dl-sim__outcome { visibility: visible; }

/* Without JavaScript there is no simulation: the hero keeps its background, text and buttons. */
@media (scripting: none) {
  .dl-sim { display: none; }
}

/* At 1024 px and below the figure is a card of its own, between the heading and the lead: the field beside
   the instrument on wide tablets, above it on narrower screens. */
@media (max-width: 1024px) {
  .dl-hero { display: block; min-height: 0; }
  .dl-hero__scrim { display: none; }
  .dl-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-6);
    align-items: start;
    padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-8);
    pointer-events: auto;
  }
  /* The parts of the text column take their places in the same grid as the figure. */
  .dl-hero__content { display: contents; }
  .dl-hero__kicker { grid-area: 1 / 1 / auto / -1; }
  .dl-hero__title { grid-area: 2 / 1 / auto / -1; font-size: var(--text-hero); }
  .dl-sim { grid-area: 3 / 1 / auto / -1; }
  .dl-hero__lead { grid-area: 4 / 1; }
  .dl-hero__actions { grid-area: 4 / 2; align-self: end; justify-content: flex-end; }

  .dl-sim {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sim-pad);
    margin-top: var(--space-6);
    overflow: hidden;
  }
  .dl-sim > * { grid-column: 2; }
  .dl-sim__field {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / span 5;
    min-height: 20rem;
    margin: calc(-1 * var(--sim-pad)) 0 calc(-1 * var(--sim-pad)) calc(-1 * var(--sim-pad));
    background: var(--paper-sunk);
    pointer-events: auto;
  }
  .dl-sim__canvas { z-index: 0; }
  .dl-sim__seed { z-index: 1; }
}

@media (max-width: 768px) {
  .dl-hero__grid { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-7); }
  .dl-hero__actions { grid-area: 5 / 1; justify-content: flex-start; }
  .dl-sim { --sim-chart: 9.5rem; grid-template-columns: minmax(0, 1fr); }
  .dl-sim > * { grid-column: 1; }
  .dl-sim__field {
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 5 / 2;
    margin: calc(-1 * var(--sim-pad)) calc(-1 * var(--sim-pad)) var(--space-4);
  }
}

@media (max-width: 480px) {
  .dl-hero__grid { padding-block: calc(var(--nav-h) + var(--space-4)) var(--space-7); }
  .dl-hero__kicker { margin-bottom: var(--space-4); }
  /* Four full lines instead of five short ones */
  .dl-hero__title { font-size: var(--text-h1); line-height: var(--lh-h1); }
  .dl-hero__lead { margin-top: var(--space-5); }
  .dl-hero__actions { margin-top: var(--space-5); }
  .dl-hero__actions .dl-btn { flex: 1 1 auto; padding-inline: var(--space-4); }
  .dl-sim { --sim-pad: var(--space-4); --sim-chart: 8rem; margin-top: var(--space-5); }
  .dl-sim__field { aspect-ratio: 2 / 1; margin-bottom: var(--space-3); }
  /* What the dots are comes straight under them; the chart and the controls follow. */
  .dl-sim__head { order: 1; }
  .dl-sim__counts { order: 2; margin-top: var(--space-2); }
  .dl-sim__words { order: 3; margin-top: var(--space-3); }
  .dl-sim__chart { order: 4; margin-top: var(--space-4); }
  .dl-sim__controls { order: 5; margin-top: var(--space-3); padding-top: var(--space-3); }
  /* Three controls in one row of 44 px targets: Pause and Restart show their icons only (their names stay for screen readers). */
  .dl-sim__controls .dl-chip { min-width: var(--control); min-height: var(--control); justify-content: center; padding-inline: var(--space-3); }
  .dl-sim__controls .dl-chip .dl-icon { width: var(--icon-sm); height: var(--icon-sm); }
  .dl-sim__chip-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 3. Introduction: the statement, who leads the lab, three counts from the data files
   -------------------------------------------------------------------------- */

.dl-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}

/* A statement, set between a heading and a lead */
.dl-intro__statement {
  grid-column: 1 / span 7;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--text-h2) * 0.8);
  line-height: var(--lh-h4);
  letter-spacing: var(--tracking-heading);
}
.dl-intro__statement em { font-style: italic; color: var(--gold); }

.dl-intro__side { grid-column: 9 / -1; }

.dl-director-chip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
}
.dl-director-chip__photo { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; background: var(--paper-sunk); }
.dl-director-chip__photo img { width: 100%; height: 100%; object-fit: cover; }
.dl-director-chip__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
}
.dl-director-chip__name { display: block; margin-top: var(--space-1); font-family: var(--font-serif); font-size: var(--text-h4); line-height: var(--lh-h4); transition: color var(--dur-2) var(--ease); }
.dl-director-chip:hover .dl-director-chip__name { color: var(--teal); }
.dl-director-chip__role { display: block; margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }

.dl-intro__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-6); }
.dl-intro__meeting {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-2);
}
.dl-intro__meeting .dl-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }

@media (max-width: 1024px) {
  .dl-intro__statement, .dl-intro__side { grid-column: 1 / -1; }
  .dl-intro__side { margin-top: var(--space-7); }
}
@media (max-width: 768px) {
  .dl-intro__side { margin-top: var(--space-6); }
}

/* 4. Research areas: six linked cells on a ruled grid, each with its drawn figure
   -------------------------------------------------------------------------- */

.dl-themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}

.dl-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid var(--rule);
}
.dl-theme:not(:nth-child(3n + 1)) { padding-left: var(--space-6); border-left: 1px solid var(--rule); }
.dl-theme__num {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-caps);
  color: var(--ink-3);
}
.dl-theme__name { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-h3); line-height: var(--lh-h3); }
/* The name is the link; it covers the whole cell. */
.dl-theme__link { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease); }
.dl-theme__link::after { content: ""; position: absolute; inset: 0; }
.dl-theme:hover .dl-theme__link { color: var(--teal); }
.dl-theme__text { max-width: 44ch; margin: 0; font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-2); }
.dl-theme__go { display: block; margin-top: auto; padding-top: var(--space-4); color: var(--ink-3); transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.dl-theme__go .dl-icon { display: block; width: var(--icon); height: var(--icon); }
.dl-theme:hover .dl-theme__go { color: var(--teal); transform: translateX(var(--space-1)); }
@supports selector(:has(a)) {
  .dl-theme:has(.dl-theme__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: calc(-1 * var(--space-1)); border-radius: var(--radius); }
  .dl-theme__link:focus-visible { outline: none; }
}

@media (max-width: 1024px) {
  .dl-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-theme:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .dl-theme:nth-child(2n) { padding-left: var(--space-6); border-left: 1px solid var(--rule); }
}
/* One column: the figure moves beside the name, so six areas take far less room. */
@media (max-width: 768px) {
  .dl-themes { grid-template-columns: minmax(0, 1fr); }
  .dl-theme,
  .dl-theme:nth-child(2n) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-5) 0;
    border-left: 0;
  }
  .dl-theme .dl-glyph { grid-area: 1 / 2 / span 2 / auto; }
  .dl-theme__num { position: static; grid-area: 1 / 1; }
  .dl-theme__name { grid-area: 2 / 1; margin: var(--space-1) 0 0; }
  .dl-theme__text { grid-area: 3 / 1 / auto / -1; max-width: none; margin-top: var(--space-3); }
  .dl-theme__go { display: none; }
}

/* 5. Publications and news: the shared entries, with the layout round them
   -------------------------------------------------------------------------- */

.dl-newsgrid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
}

/* The section's header already draws the line above the list, and the first story starts level with the photo. */
.dl-newslist--compact .dl-newsitem { padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.dl-newslist--compact .dl-newsitem:first-child { padding-top: 0; }
.dl-newslist--compact .dl-newsitem__more { display: none; }

@media (max-width: 1024px) {
  .dl-newsgrid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
}
@media (max-width: 768px) {
  .dl-home .dl-pub { padding-block: var(--space-5); }
  .dl-newsgrid { row-gap: var(--space-6); }
  .dl-home .dl-feature { gap: var(--space-5); }
}

/* 6. Members: the group photo, then a wall of portraits with each name under its photo
   -------------------------------------------------------------------------- */

.dl-wall {
  --cols: var(--cols-lg, 7);
  --more: var(--more-lg, 1);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

.dl-wall__link { display: block; color: inherit; text-decoration: none; }
.dl-wall__photo { margin-bottom: var(--space-3); }
/* Portraits rest in black and white and turn to colour (shared dl-photo--bw); linked ones also come a little closer. */
.dl-wall__photo img { transition: filter var(--dur-4) var(--ease), transform var(--dur-5) var(--ease-out); }
a.dl-wall__link:hover .dl-wall__photo img { transform: scale(1.03); }
.dl-wall__photo .dl-monogram { font-size: var(--text-h3); }
.dl-wall__name { display: block; font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--lh-h4); transition: color var(--dur-2) var(--ease); }
a.dl-wall__link:hover .dl-wall__name { color: var(--teal); }
.dl-wall__role { display: block; margin-top: var(--space-1); font-size: var(--text-label); line-height: var(--lh-small); color: var(--ink-3); }

/* The last tile leads to the Team page and fills what is left of the last row. */
.dl-wall__item--more { grid-column: span var(--more); }
.dl-wall__more {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  height: 100%;
  min-height: 9rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: radial-gradient(circle at 32% 26%, var(--navy) 0%, var(--night) 72%);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease);
}
.dl-wall__more .dl-icon { width: var(--icon); height: var(--icon); color: var(--gold); transition: transform var(--dur-2) var(--ease); }
.dl-wall__more:hover { color: var(--gold); }
.dl-wall__more:hover .dl-icon { transform: translateX(var(--space-1)); }

@media (max-width: 1024px) { .dl-wall { --cols: var(--cols-md, 5); --more: var(--more-md, 1); } }
@media (max-width: 768px) {
  .dl-wall { --cols: var(--cols-sm, 4); --more: var(--more-sm, 1); column-gap: var(--space-3); }
  .dl-home .dl-groupphoto { margin-bottom: var(--space-7); }
}
/* Phones: three small portraits to a row, and less air between the page's bands, so the page is far shorter. */
@media (max-width: 480px) {
  .dl-home .dl-section { padding-block: var(--section-y-tight); }
  .dl-wall { --cols: var(--cols-xs, 3); --more: var(--more-xs, 1); gap: var(--space-5) var(--space-3); }
  .dl-wall__photo { margin-bottom: var(--space-2); }
  .dl-wall__name { font-size: var(--text-small); line-height: var(--lh-label); overflow-wrap: anywhere; }
  .dl-wall__role { overflow-wrap: anywhere; }
  .dl-wall__more { min-height: 6rem; padding: var(--space-3); font-size: var(--text-body); }
}

@media print {
  .dl-sim__field, .dl-sim__controls, .dl-sim__note { display: none !important; }
}