/* The reading measure for this page only, re-bound on the page wrapper and
   consumed by every .prose inside it. 85ch is about 700px, the long end of
   comfortable, in the 1200px container the other pages use (coordinator: "too
   much space on the sides"). */
.about {
  --measure: 85ch;
}

/* The question under the introduction's heading, in bold as in the design.
   A paragraph, not a heading: it is the opening line, not a section. */
.about-question {
  font-size: var(--t-lg);
  font-weight: var(--fw-bold);
}

/* The photograph between the introduction and the journey, edge to edge. */
.about-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 48em) {
  .about-banner img {
    aspect-ratio: 21 / 8;
  }
}

/* The journey band: navy, with white text on its introduction. The re-binds
   are on the child, not the band, because a custom property re-bound beside
   `background: var(--c-ink)` would paint the band white too. The cards are
   siblings of the introduction, so they keep the ink text on white. */
.about-journey {
  background: var(--c-ink);
}

.about-journey__intro {
  --c-ink: var(--c-focus-light);
  --c-link: var(--c-focus-light);
  --c-link-rule: currentColor;
  --c-focus: var(--c-focus-light);
  color: var(--c-focus-light);
}

/* Room above each card for its numbered tab. */
.about-cards {
  counter-reset: journey;
  margin-block-start: var(--s-9);
}

.about-cards > * + * {
  margin-block-start: var(--s-9);
}

.about-card {
  counter-increment: journey;
  padding: var(--s-6);
}

/* The numbered half-circle above each card, from the design. The number is
   also the <ol>'s, so it is hidden from a screen reader (the "/ ''" text),
   which already hears "1 of 3". */
.about-card::before {
  content: counter(journey, decimal-leading-zero) / "";
  position: absolute;
  inset-block-start: calc(var(--s-8) * -1);
  inset-inline-start: var(--s-6);
  width: calc(var(--s-8) * 2);
  height: var(--s-8);
  /* Low in the tab: a half circle's visual centre is below its middle. */
  padding-block-start: var(--s-5);
  border-radius: var(--s-8) var(--s-8) 0 0;
  background: var(--c-surface-alt);
  color: var(--c-ink);
  font-size: var(--t-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
}

/* The card headings and the three experiences, in capitals with an orange
   rule, as in the design. The orange is the rule only: as text it measures
   2.33:1 on white and fails even the large-text minimum. Capitals by CSS, so
   the markup stays sentence case for screen readers and search. */
.about-card h3,
.about-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-block-end: var(--s-2);
  border-block-end: 3px solid var(--c-brand-orange);
  width: fit-content;
}

.about-card__sub {
  font-weight: var(--fw-bold);
}

.about-steps__hint {
  margin-block-start: var(--s-5);
  color: var(--c-ink-muted);
}

/* The five step buttons: three and two on a wide card, as in the design, and
   one under another on a phone. */
.about-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.about-steps .button {
  min-width: 11rem;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-bold);
}

@media (max-width: 30em) {
  .about-steps > li,
  .about-steps .button {
    width: 100%;
  }
}

.about-step__name {
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: var(--fw-bold);
}

.about-step h4 {
  font-size: var(--t-xl);
  margin-block: var(--s-2) var(--s-4);
}

/* On paper a closed pop-up would be lost, so every step prints inline. */
@media print {
  .about-steps [popover] {
    display: block;
    position: static;
    inset: auto;
    box-shadow: none;
  }
  .about-steps .person-dialog__close,
  .about-steps .button,
  .about-steps__hint {
    display: none;
  }
}

/* The work plan diagram: a 510px image of text, so never drawn wider than
   the file, and on white so its own white background has an edge. */
.about-workplan img {
  width: 100%;
  max-width: 510px;
  height: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.about-workplan figcaption {
  margin-block-start: var(--s-2);
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

/* The specific objectives, SO1 to SO6, in the Grant Agreement's words: about
   thirty words each, so a smaller heading than an h4 would otherwise be. */
.prose h4.objective {
  font-size: var(--t-base);
}

/* The related projects grid, under the section's heading and introduction. */
.about-related {
  margin-block-start: var(--s-5);
}