/* ==========================================================================
   About page — /about/
   The hero uses the shared page-hero styles; the body uses the shared prose
   styles (text, images/figures, YouTube). Only a few page-level tweaks here.
   ========================================================================== */

/* Tech background: a faded PCB / circuit motif behind the About hero only.
   The SVG carries its own left-to-right fade, so the title and lead stay clear. */
body[data-page="about"] .page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 88% 15%, rgba(218, 30, 40, 0.07), transparent 60%),
    var(--cds-background);
}
body[data-page="about"] .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/about-tech-bg.svg") right center / cover no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
body[data-page="about"] .page-hero > .container {
  position: relative;
  z-index: 1;
}

/* On phones the circuit crops awkwardly, so swap it for a calm dot grid in the
   style of the rnd site (22px grid, small neutral dots). */
@media (max-width: 42rem) {
  body[data-page="about"] .page-hero::after {
    background: radial-gradient(circle, rgba(141, 141, 141, 0.4) 1.4px, transparent 1.6px) 0 0 / 22px 22px repeat;
    opacity: 0.6;
  }
}

.about-page {
  max-width: 48rem;
}

.about-page > * + * {
  margin-top: var(--cds-spacing-06);
}

/* Give images and videos a little more room to breathe on the About page. */
.about-page .prose__figure,
.about-page .prose__video {
  margin-top: var(--cds-spacing-07);
  margin-bottom: var(--cds-spacing-07);
}

/* Newsletter sign-up at the foot of the page. */
.subscribe {
  border-top: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer, #f4f4f4);
  padding-block: var(--cds-spacing-09);
}
.subscribe__inner {
  max-width: 40rem;
}
.subscribe__title {
  margin: 0 0 var(--cds-spacing-03);
}
.subscribe__lead {
  margin: 0 0 var(--cds-spacing-06);
  color: var(--cds-text-secondary);
}
.subscribe__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
}
.subscribe__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0 var(--cds-spacing-05);
  height: 3rem;
  font: inherit;
  color: var(--cds-text-primary);
  background: var(--cds-field, #fff);
  border: 1px solid var(--cds-border-strong, #8d8d8d);
  border-radius: 0;
}
.subscribe__input:focus {
  outline: 2px solid var(--cds-interactive, #da1e28);
  outline-offset: -2px;
}
.subscribe__form .button {
  height: 3rem;
  flex: 0 0 auto;
}
/* Honeypot: off-screen but still in the tab order for bots, hidden from people. */
.subscribe__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.subscribe__status {
  margin: var(--cds-spacing-04) 0 0;
  min-height: 1.25rem;
  font-size: 0.9375rem;
}
.subscribe__status--ok {
  color: var(--cds-support-success, #24a148);
}
.subscribe__status--err {
  color: var(--cds-support-error, #da1e28);
}
.subscribe__privacy {
  margin: var(--cds-spacing-04) 0 0;
  color: var(--cds-text-helper);
}