/* =========================================================================
   AECRL — components a photography theme does not provide.

   SCOPE. This file adds; it does not restyle. The Nature Photography look is
   what the laboratory chose and nothing here overrides its colours, its
   headings or its layout. What it adds is the handful of things a research
   site needs and a portfolio theme has no concept of:

     - publication record rows
     - instrument and data tables
     - the US EPA AQI scale
     - provisional markers for unapproved content
     - the "no photograph" placeholder

   Colours come from theme.json as --wp--preset--color--*, so changing the
   palette in the Site Editor changes these too.
   ========================================================================= */

:root {
  --aecrl-hairline: var(--wp--preset--color--hairline, #e2e2e6);
  --aecrl-rule: var(--wp--preset--color--secaccent, #1b1725);
  --aecrl-muted: var(--wp--preset--color--muted, #5c5c66);
  --aecrl-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* The swatch outline is load-bearing, not decoration. The published EPA
     colours cannot be altered and several fail contrast badly — Moderate
     #ffff00 measures 1.1:1 on white and Good #00e400 measures 1.7:1. The
     outline plus the always-present text label are what make the scale
     readable. Removing either is a regression. */
  --aecrl-aqi-outline: var(--wp--preset--color--secaccent, #1b1725);
}

/* -------------------------------------------------------------------------
   Numbers are always monospace with tabular figures, so columns of years,
   concentrations and DOIs line up instead of dancing.
   ------------------------------------------------------------------------- */

.aecrl-mono,
.aecrl-pub__meta,
.aecrl-pub__doi,
.aecrl-table td.is-numeric,
.aecrl-aqi__range,
.aecrl-aqi__axis {
  font-family: var(--aecrl-mono);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Publication record row
   ------------------------------------------------------------------------- */

.aecrl-pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--aecrl-rule);
}

.aecrl-pub {
  display: grid;
  grid-template-columns: 2.8em minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--aecrl-hairline);

  /* 127 records in one document is right for a reference list — it stays
     searchable with the browser's own find and filterable across every axis at
     once. The cost is layout, so off-screen rows are skipped. */
  content-visibility: auto;
  contain-intrinsic-size: auto 170px;
}

@media (min-width: 900px) {
  .aecrl-pub {
    grid-template-columns: 3.25rem minmax(0, 1fr) 9.5rem;
    contain-intrinsic-size: auto 130px;
  }
}

.aecrl-pub__index {
  font-family: var(--aecrl-mono);
  font-size: 0.75rem;
  color: var(--aecrl-muted);
  padding-top: 0.35em;
}

.aecrl-pub__meta {
  font-size: 0.75rem;
  color: var(--aecrl-muted);
  margin: 0;
}

.aecrl-pub__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
  margin: 0.15rem 0 0;
}

.aecrl-pub__title a {
  text-decoration: none;
  color: inherit;
}

.aecrl-pub__title a:hover {
  text-decoration: underline;
}

/* A co-author who is not a laboratory member is a TEXT NODE, not an element.
   Wrapping 1 100+ names in spans costs roughly 2 000 DOM nodes and measurably
   hurts parse time on a mid-range phone; only the bold ones need markup. */
.aecrl-pub__authors {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--aecrl-muted);
  margin: 0.4rem 0 0;
}

.aecrl-pub__authors b {
  font-weight: 700;
  color: var(--wp--preset--color--secaccent, #1b1725);
}

.aecrl-pub__venue {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0.2rem 0 0;
}

.aecrl-pub__venue em {
  font-style: italic;
}

.aecrl-pub__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Row gap, not column gap, is what matters: when the DOI link and the badge
     stack on a narrow screen they otherwise sit 8 px apart, which is a real
     mis-tap risk and fails WCAG 2.2 target spacing. */
  gap: 1rem 1.5rem;
  margin: 0.5rem 0 0.5rem;
}

/* Height from padding rather than min-height on an inline-flex box: a long DOI
   wraps to two lines, and a wrapped inline-flex item overlapped the badge. */
.aecrl-pub__doi {
  font-size: 0.75rem;
  display: inline-block;
  padding-block: 0.25rem;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Open-access badge

   It means: there is a version a reader can legally open, free, right now.
   Nothing about who hosts it, nothing about redistribution rights. The site
   links, it never hosts — which removes the rights question entirely.

   The TEXT is the meaning. Never rely on the green.
   ------------------------------------------------------------------------- */

.aecrl-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  font-size: 0.75rem;
  text-decoration: none;
  background: var(--wp--preset--color--status-ok-bg, #dcefe1);
  color: var(--wp--preset--color--status-ok-fg, #1f6b3a);
}

a.aecrl-badge:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--status-ok-fg, #1f6b3a);
}

/* -------------------------------------------------------------------------
   Provisional / placeholder callouts

   Content the Principal Investigator has not approved, or figures taken from a
   public CV, must be visibly marked. A reader cannot tell an unverified claim
   from a settled one unless the page says so.
   ------------------------------------------------------------------------- */

.aecrl-callout {
  padding: 0.85rem 1rem;
  border-radius: 3px;
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 62ch;
  margin-block: 1.25rem;
}

.aecrl-callout--warn {
  background: var(--wp--preset--color--status-warn-bg, #faeed6);
  /* #8a5704, not #9a6206: the original measures 4.4:1 here and fails AA at
     normal size. This measures 5.3:1. Do not "restore" the brighter value. */
  color: var(--wp--preset--color--status-warn-fg, #8a5704);
}

.aecrl-callout--alert {
  background: var(--wp--preset--color--status-alert-bg, #f6e2e0);
  color: var(--wp--preset--color--status-alert-fg, #a32020);
}

.aecrl-callout__label {
  display: block;
  font-family: var(--aecrl-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* -------------------------------------------------------------------------
   Data tables — instruments, parameters, data availability
   ------------------------------------------------------------------------- */

.aecrl-table-scroll {
  overflow-x: auto;
}

.aecrl-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
}

.aecrl-table thead th {
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--aecrl-rule);
  padding: 0.5rem 0.75rem 0.5rem 0;
}

.aecrl-table tbody th,
.aecrl-table tbody td {
  text-align: left;
  font-weight: 400;
  vertical-align: top;
  border-bottom: 1px solid var(--aecrl-hairline);
  padding: 0.5rem 0.75rem 0.5rem 0;
}

.aecrl-table td.is-numeric,
.aecrl-table th.is-numeric {
  text-align: right;
  padding-right: 0;
}

.aecrl-table .is-unconfirmed {
  color: var(--aecrl-muted);
  font-style: italic;
}

/* -------------------------------------------------------------------------
   AQI scale — US EPA PM2.5 breakpoints, 2024 revision, as adopted by the
   Department of Environment, Bangladesh.

   The category list is the ACCESSIBLE PRIMARY, not a mobile fallback. The bar
   is a visual summary of the same information.
   ------------------------------------------------------------------------- */

.aecrl-aqi__bar {
  display: none;
  position: relative;
  height: 14px;
  outline: 1px solid var(--aecrl-aqi-outline);
}

.aecrl-aqi__seg {
  display: block;
  height: 100%;
  float: left;
}

.aecrl-aqi__tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--aecrl-rule);
  transform: translateX(-1px);
}

.aecrl-aqi__axis {
  display: none;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--aecrl-muted);
  margin-top: 0.25rem;
}

@media (min-width: 900px) {
  .aecrl-aqi__bar,
  .aecrl-aqi__axis {
    display: block;
  }

  .aecrl-aqi__axis {
    display: flex;
  }
}

.aecrl-aqi__cats {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--aecrl-hairline);
}

.aecrl-aqi__cat {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--aecrl-hairline);
  font-size: 0.875rem;
}

.aecrl-aqi__cat.is-current {
  background: var(--wp--preset--color--fourground, #f5fafd);
  font-weight: 700;
}

.aecrl-aqi__swatch {
  display: block;
  width: 14px;
  height: 10px;
  /* See the note at the top of this file. Never remove. */
  outline: 1px solid var(--aecrl-aqi-outline);
}

.aecrl-aqi__range {
  font-size: 0.75rem;
  color: var(--aecrl-muted);
}

.aecrl-aqi__caption {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--aecrl-muted);
  max-width: 62ch;
  margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
   Missing photograph

   Never a silhouette avatar, never a blank box. A dashed slot that says what
   is missing is an honest, unremarkable state — and a person declining a
   photograph is a normal choice nobody should have to explain.
   ------------------------------------------------------------------------- */

.aecrl-photo-missing {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--aecrl-muted);
  border-radius: 2px;
  background: var(--wp--preset--color--fourground, #f5fafd);
  color: var(--aecrl-muted);
}

.aecrl-photo-missing__initials {
  font-family: var(--aecrl-mono);
  font-size: 1.375rem;
}

.aecrl-photo-missing__label {
  font-family: var(--aecrl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Filter chips for the publications archive.

   Real controls, not div-with-onclick: selection is announced via aria-checked
   and the result count lives in an aria-live region.
   ------------------------------------------------------------------------- */

.aecrl-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.5rem;
}

.aecrl-filter-axis {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.aecrl-filter-axis legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-family: var(--aecrl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aecrl-muted);
}

.aecrl-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Below sm the rows scroll sideways rather than wrapping to four lines. */
@media (max-width: 599px) {
  .aecrl-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }
}

.aecrl-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--aecrl-muted);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.2, 0, 0, 1),
    border-color 180ms cubic-bezier(0.2, 0, 0, 1),
    color 180ms cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 599px) {
  .aecrl-chip {
    min-height: 44px;
    padding: 0.55rem 0.75rem;
  }
}

.aecrl-chip:hover {
  background: var(--wp--preset--color--fourground, #f5fafd);
}

.aecrl-chip[aria-checked="true"] {
  background: var(--wp--preset--color--secaccent, #1b1725);
  border-color: var(--wp--preset--color--secaccent, #1b1725);
  color: #fff;
}

.aecrl-chip__n {
  font-family: var(--aecrl-mono);
  font-size: 0.6875rem;
  color: var(--aecrl-muted);
}

.aecrl-chip[aria-checked="true"] .aecrl-chip__n {
  color: #fff;
  opacity: 0.75;
}

.aecrl-count {
  font-family: var(--aecrl-mono);
  font-size: 0.75rem;
  color: var(--aecrl-muted);
  margin-block: 1rem;
}

/* -------------------------------------------------------------------------
   Focus. Applied once, globally, so no component can ship without one.
   ------------------------------------------------------------------------- */

.aecrl-chip:focus-visible,
.aecrl-pub a:focus-visible,
.aecrl-badge:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-text, #8a5622);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Motion. Nearly absent by design, and every state change is also a colour or
   border change — so the reduced-motion path loses nothing.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aecrl-chip {
    transition-duration: 0.01ms;
  }
}

/* ===========================================================================
   Homepage
   ---------------------------------------------------------------------------
   The photographs are cropped to the window sizes Nature Photography already
   uses (819x594 for the banner, 393x331 and 323x251 for cards, and so on), so
   the layout does not move when better originals replace them. `aspect-ratio`
   below pins each window regardless of what is dropped in, which is what keeps
   a card row from going ragged when one replacement is a different shape.
   ========================================================================= */

.aecrl-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.aecrl-eyebrow-dark {
	color: var(--wp--preset--color--accent-text, #8a5622);
}

/* --- hero ---------------------------------------------------------------- */

.aecrl-home-hero .wp-block-cover__inner-container {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.aecrl-hero-lede {
	max-width: 40rem;
	margin-inline: auto;
	text-wrap: pretty;
}

.aecrl-home-hero .wp-block-buttons {
	justify-content: center;
}

/* The three hero pieces arrive in sequence rather than together. Values are
   small on purpose: this is a research laboratory, not a product launch. */
.aecrl-motion .aecrl-home-hero .aecrl-hero-in:nth-of-type(1) { animation-delay: 60ms; }
.aecrl-motion .aecrl-home-hero .aecrl-hero-in:nth-of-type(2) { animation-delay: 180ms; }
.aecrl-motion .aecrl-home-hero .aecrl-hero-in:nth-of-type(3) { animation-delay: 300ms; }

/* --- numbers ------------------------------------------------------------- */

.aecrl-stat-row {
	gap: var(--wp--preset--spacing--40, 1.5rem);
	text-align: center;
}

.aecrl-stat-number {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--accent-text, #8a5622);
	/* Tabular figures so the four numbers sit on a common baseline grid and do
	   not jitter when a count ticks over to another digit width. */
	font-variant-numeric: tabular-nums;
}

.aecrl-stat-label {
	font-size: 0.9375rem;
	line-height: 1.45;
	margin: 0;
	color: var(--wp--preset--color--muted, #5c5c66);
	text-wrap: balance;
}

/* --- section headings ---------------------------------------------------- */

.aecrl-section-lede {
	max-width: 42rem;
	margin-inline: auto;
	color: var(--wp--preset--color--muted, #5c5c66);
	text-wrap: pretty;
}

/* --- cards --------------------------------------------------------------- */

.aecrl-card-row {
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.aecrl-card-image img {
	width: 100%;
	/* The window. Replacement photographs of any shape are centre-cropped into
	   it rather than being allowed to change the row height. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

.aecrl-card-title {
	margin: 0.9rem 0 0.4rem;
	line-height: 1.3;
	text-wrap: balance;
}

.aecrl-card-text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #5c5c66);
	margin: 0;
	text-wrap: pretty;
}

/* --- observatory feature ------------------------------------------------- */

.aecrl-feature-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

/* --- latest publications ------------------------------------------------- */

/*
 * A plain two-column list: title, then year in the mono face. The year is set
 * in a fixed column so the eye can run down it, which is the whole reason a
 * publication list is easier to scan than a paragraph.
 */
.aecrl-home-pubs .aecrl-pub-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aecrl-home-pubs .aecrl-pub-list > li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0 1.25rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline, #e2e2e6);
}

.aecrl-home-pubs .aecrl-pub-title {
	margin: 0;
	line-height: 1.4;
	text-wrap: pretty;
}

.aecrl-home-pubs .aecrl-pub-title a {
	text-decoration: none;
}

.aecrl-home-pubs .aecrl-pub-title a:hover,
.aecrl-home-pubs .aecrl-pub-title a:focus-visible {
	text-decoration: underline;
}

.aecrl-home-pubs .aecrl-pub-year {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted, #5c5c66);
	font-variant-numeric: tabular-nums;
}

/* --- contact ------------------------------------------------------------- */

.aecrl-muted {
	color: var(--wp--preset--color--muted, #5c5c66);
	font-size: 0.9375rem;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 781px) {
	.aecrl-stat-row {
		/* Two up rather than one, so the four numbers still read as a set. */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40, 1.5rem);
	}

	.aecrl-stat-row > .wp-block-column {
		flex-basis: auto !important;
	}

	.aecrl-home-hero .wp-block-cover__inner-container {
		text-align: left;
	}

	.aecrl-home-hero .wp-block-buttons {
		justify-content: flex-start;
	}

	.aecrl-hero-lede,
	.aecrl-section-lede {
		margin-inline: 0;
	}
}

/* --- footer -------------------------------------------------------------- */

.aecrl-footer-head {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin: 0 0 0.75rem;
	opacity: 0.75;
}

.aecrl-footer-text {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 0.9rem;
	opacity: 0.85;
}

.aecrl-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 2;
}

/* The footer sits on the dark ink background, where the copper accent link
   colour does not reach 4.5:1. Links there are plain white with an underline
   instead — the underline, not the colour, is what marks them as links. */
.aecrl-footer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.aecrl-footer a:hover,
.aecrl-footer a:focus-visible {
	text-decoration-thickness: 2px;
}

.aecrl-footer-rule {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.22;
}

.aecrl-footer-fine {
	opacity: 0.7;
	margin: 0;
}

/* --- buttons ------------------------------------------------------------- */

/*
 * The parent's copper, #B87333, carries white text at 3.86:1. WCAG AA wants
 * 4.5:1 for text this size, so every filled button on the site was failing.
 *
 * The darker copper already in the palette as `accent-text` (#8A5622) takes
 * white at 6.4:1 and reads as the same colour family, so the design is intact
 * and the text is legible. `accent` keeps its original value for the decorative
 * uses — rules, borders, large display type — where 3:1 is the bar.
 *
 * The underline is removed because these render as buttons; the fill and shape
 * already mark them as controls, and an underline on top reads as a mistake.
 */
.wp-block-button__link.has-accent-background-color,
.wp-block-button .wp-block-button__link.has-accent-background-color {
	/* !important is not a shortcut here. WordPress emits its own preset colour
	   classes as `background-color: var(--wp--preset--color--accent) !important`,
	   so an override without it simply loses no matter how specific it is. */
	background-color: var(--wp--preset--color--accent-text, #8a5622) !important;
}

.wp-block-button__link,
.wp-element-button {
	/* Same reason: the parent theme underlines every anchor with a rule this
	   cannot outrank on specificity alone. */
	text-decoration: none !important;
}

/* Underline on focus and hover instead, so the affordance is still there for
   anyone tabbing through. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

/* The scroll-to-top control is an icon-only link. WCAG 2.2 target size
   (minimum) asks for 24x24 CSS pixels; this pins it well clear of that. */
.scroll-top-button .wp-block-button__link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ===========================================================================
   Air quality panel
   ---------------------------------------------------------------------------
   Colour is never the only signal. Every AQI swatch keeps a visible outline,
   and the category is always spelled out in text next to it. The EPA palette
   includes a pure yellow that cannot carry legible text at any size, so text
   is never placed on a swatch — the swatch sits beside the words.
   ========================================================================= */

.aecrl-aq {
	margin: 0;
}

.aecrl-aq-scroll {
	/* A seven-column table does not fit a phone. Scrolling it horizontally is
	   honest; squeezing the numbers until they wrap is not. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.aecrl-aq-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 40rem;
}

.aecrl-aq-table th,
.aecrl-aq-table td {
	padding: 0.7rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--hairline, #e2e2e6);
	vertical-align: baseline;
}

.aecrl-aq-table thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	border-bottom-width: 2px;
}

.aecrl-aq-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.aecrl-aq-table tbody tr:last-child th,
.aecrl-aq-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Numbers in the mono face with tabular figures, so a column of readings lines
   up digit for digit and can be compared by eye down the page. */
.aecrl-aq-n {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.aecrl-aq-unit {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #5c5c66);
	white-space: nowrap;
}

/* An abbreviation that carries a title gets a dotted underline rather than the
   browser default, which is invisible in several of them. */
.aecrl-aq-table abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
	cursor: help;
}

.aecrl-aq-missing {
	color: var(--wp--preset--color--muted, #5c5c66);
}

/* --- the AQI cell -------------------------------------------------------- */

.aecrl-aq-cat {
	white-space: nowrap;
}

.aecrl-aq-label {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #5c5c66);
	white-space: normal;
}

/*
 * The outline is load-bearing, not decoration.
 *
 * "AQI Good" is #00e400 and "Moderate" is #ffff00; against white both nearly
 * disappear, and a swatch nobody can see conveys nothing. The outline gives
 * every swatch an edge at the same contrast regardless of its fill, so the
 * shape is always present even when the colour is not. Do not remove it.
 */
.aecrl-aq-swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 2px;
	outline: 1px solid rgba(0, 0, 0, 0.55);
	outline-offset: -1px;
	vertical-align: -0.05em;
	margin-right: 0.35rem;
}

.aecrl-aq-good           { background: var(--wp--preset--color--aqi-good, #00e400); }
.aecrl-aq-moderate       { background: var(--wp--preset--color--aqi-moderate, #ffff00); }
.aecrl-aq-sensitive      { background: var(--wp--preset--color--aqi-sensitive, #ff7e00); }
.aecrl-aq-unhealthy      { background: var(--wp--preset--color--aqi-unhealthy, #ff0000); }
.aecrl-aq-very-unhealthy { background: var(--wp--preset--color--aqi-very-unhealthy, #8f3f97); }
.aecrl-aq-hazardous      { background: var(--wp--preset--color--aqi-hazardous, #7e0023); }

/* In forced-colours mode the fills are discarded by the OS. The outline and
   the written category survive, which is exactly why both exist. */
@media (forced-colors: active) {
	.aecrl-aq-swatch {
		outline: 1px solid CanvasText;
	}
}

/* --- provenance ---------------------------------------------------------- */

.aecrl-aq-source {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #5c5c66);
	margin: 0.9rem 0 0;
	max-width: 62ch;
	text-wrap: pretty;
}

.aecrl-aq-stale {
	margin-bottom: 0.9rem;
}

/* -------------------------------------------------------------------------
   People

   No photographs. A portrait of a named researcher needs that person's
   agreement, and a stock or generated face standing in for one is a
   misrepresentation of a real person — so the figure is their initial, and
   the space stays honest until real photographs arrive with consent.
   ------------------------------------------------------------------------- */

.aecrl-people {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 720px) {
  .aecrl-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.aecrl-person {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--aecrl-hairline);
}

.aecrl-person__figure {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--aecrl-mono);
  font-size: 1.35rem;
  background: var(--wp--preset--color--secbackground, #ebf3ff);
  color: var(--wp--preset--color--accent-text, #8a5622);
  /* An outline so the circle is present even where the tint is not rendered. */
  outline: 1px solid var(--aecrl-hairline);
  outline-offset: -1px;
}

.aecrl-person__name {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  line-height: 1.3;
  text-wrap: balance;
}

.aecrl-person__role {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.aecrl-person__stats {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  color: var(--aecrl-muted);
}

.aecrl-person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
}

/* -------------------------------------------------------------------------
   Archive pages
   ------------------------------------------------------------------------- */

.aecrl-archive-lede {
  max-width: 62ch;
  color: var(--aecrl-muted);
  text-wrap: pretty;
  margin-bottom: 1.5rem;
}

.aecrl-empty {
  color: var(--aecrl-muted);
  padding: 2rem 0;
}

/* The station cards on Observatories. */
.aecrl-station {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--aecrl-hairline);
}

@media (min-width: 820px) {
  .aecrl-station {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

.aecrl-station img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}