/* ============================================================
   ABOUT & TEAM — candidates (sections lab, group AB)
   Components under .about-*. Tokens only; every other value is a knob
   declared on its component. People are the content here: real names,
   real portraits from one shoot, one sentence each — no bios, no icons.
   ============================================================ */

/* Screen-reader text (AB06's announcement). */
.about-sr {
  position: absolute; width: 1px; height: 1px; overflow: clip;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- AB01 · principles with a photo per row ----
   <section class="about-tenets"><div class="wrap about-tenets__grid">
     <div class="about-tenets__head"> .eyebrow · h2 </div>
     <div class="about-tenets__stage" aria-hidden="true">
       <div class="photo photo--people about-tenets__frame"><img class="is-on" alt="" …><img alt="" …> …</div>
     </div>
     <ol class="about-tenets__list"><li><a class="about-tenets__row" href="…" data-i="0" data-on="true">
       <span class="about-tenets__n">01</span><span class="about-tenets__t">Title</span><span class="about-tenets__p">Behaviour.</span><span class="arrow"></span>
     </a></li> × 3–4</ol>
   </div></section>
   The stacked photos crossfade to the row in play (JS keeps one .is-on and
   the row's data-on). The frame is sticky beside the list on wide
   screens and above it on phones. It never drifts: drift would move only
   the first image of the stack. */
.about-tenets {
  --tenet-fade: .6s;        /* the crossfade */
  --tenet-top: var(--sp-8); /* where the sticky frame rests */
  --tenet-title: calc(var(--fs-h2) * .42);
}
.about-tenets__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.about-tenets__head { grid-column: 1 / span 7; grid-row: 1; }
.about-tenets__head h2 { text-wrap: balance; }
.about-tenets__stage { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: start; position: sticky; top: var(--tenet-top); }
.about-tenets__frame img { opacity: 0; transition: opacity var(--tenet-fade) var(--ease-out); }
.about-tenets__frame img.is-on { opacity: 1; }
.about-tenets__list { grid-column: 1 / span 7; grid-row: 2; list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.about-tenets__row {
  display: grid; grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr) auto;
  column-gap: var(--sp-4); align-items: baseline;
  padding-block: var(--sp-5); border-top: 1px solid var(--hairline);
  color: var(--fg); text-decoration: none;
}
.about-tenets__list li:last-child .about-tenets__row { border-bottom: 1px solid var(--hairline); }
.about-tenets__n { font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-tenets__t {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--tenet-title); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg-muted); transition: color .3s var(--ease-out);
}
.about-tenets__p { color: var(--fg-muted); line-height: 1.6; text-wrap: pretty; }
.about-tenets__row .arrow { color: var(--fg-dim); align-self: center; transition: color .3s; }
.about-tenets__row[data-on="true"] .about-tenets__t { color: var(--fg); }
.about-tenets__row[data-on="true"] .arrow { color: var(--fg); }
.about-tenets__row:focus-visible { outline-offset: -2px; }
.about-tenets__row:focus-visible .arrow::before { transform: translateX(170%); }
.about-tenets__row:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .about-tenets__row:hover .arrow::before { transform: translateX(170%); }
  .about-tenets__row:hover .arrow::after { transform: none; }
}

/* ---- AB02 · chapters beside a changing photo ----
   <section class="about-story"><div class="wrap about-story__grid">
     <div class="about-story__head"> .eyebrow · h2 </div>
     <div class="about-story__stage" aria-hidden="true"><div class="photo about-story__frame"><img class="is-on" alt="" …> …</div></div>
     <div class="about-story__chapters">
       <article class="about-story__ch" data-i="0">
         <div class="photo parallax about-story__inline">…</div>          ← phones only
         <div class="about-story__text reveal"> .eyebrow (era) · h3 · p </div>
       </article> × 3–5
     </div>
   </div></section>
   The stage is sticky on the left and crossfades to the chapter nearest
   the middle of the screen. No line, no dots, no list of chapter titles:
   whitespace separates the chapters. */
.about-story {
  --story-top: 16vh;        /* where the held frame rests */
  --story-ch: 74vh;         /* each chapter's scroll share */
  --story-fade: .7s;
}
.about-story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.about-story__head { grid-column: 1 / span 7; grid-row: 1; margin-bottom: var(--sp-7); }
.about-story__head h2 { text-wrap: balance; }
.about-story__stage { grid-column: 1 / span 6; grid-row: 2; align-self: start; position: sticky; top: var(--story-top); }
.about-story__frame img { opacity: 0; transition: opacity var(--story-fade) var(--ease-out); }
.about-story__frame img.is-on { opacity: 1; }
.about-story__chapters { grid-column: 8 / -1; grid-row: 2; }
.about-story__ch { min-height: var(--story-ch); display: flex; flex-direction: column; justify-content: center; }
.about-story__ch:first-child { justify-content: flex-start; padding-top: var(--sp-8); }
.about-story__inline { display: none; }
.about-story__text > * + * { margin-top: var(--sp-4); }
.about-story__text .eyebrow { margin-bottom: 0; }
.about-story__text h3 {
  max-width: 18ch; font-size: calc(var(--fs-h2) * .56); line-height: 1.15;
  letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.about-story__text p:last-child { text-wrap: pretty; }

/* ---- AB03 · opening statement + fact line ----
   <section class="about-open"><div class="wrap about-open__grid">
     <p class="eyebrow about-open__eye">…</p>
     <h2 class="reveal" data-reveal="lines">Sentence, <span class="accent">its turn.</span></h2>
     <p class="lead about-open__lead reveal">…</p>
     <dl class="about-open__facts" data-reveal-group><div class="reveal"><dt>Label</dt><dd>Value</dd></div> × 4</dl>
   </div></section>
   The sentence on ten columns, the lead from the middle, and the facts a
   long breath below in one ruled row: a small label over a value in the
   heading face. */
.about-open { --open-fact: calc(var(--fs-h2) * .72); }
.about-open__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.about-open__eye { grid-column: 1 / -1; }
.about-open__grid > h2 { grid-column: 1 / span 10; text-wrap: balance; }
.about-open__lead { grid-column: 7 / -1; margin-top: var(--sp-7); max-width: 48ch; text-wrap: pretty; }
.about-open__facts {
  grid-column: 1 / -1; margin: var(--sp-9) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.about-open__facts > div { padding: var(--sp-5) var(--sp-5) 0 0; }
.about-open__facts > div + div { padding-left: var(--sp-5); border-left: 1px solid var(--hairline); }
.about-open__facts dt { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-dim); }
.about-open__facts dd {
  display: flex; margin: var(--sp-3) 0 0;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--open-fact); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}

/* ---- AB04 · the two who sign, large ----
   <section class="about-duo"><div class="wrap">
     <div class="about-duo__head"> .eyebrow · h2 · p.lead </div>
     <div class="about-duo__pair">
       <figure class="about-duo__p"><div class="photo photo--people parallax">…</div>
         <figcaption class="about-duo__cap"> .about-duo__name · .about-duo__role · blockquote.about-duo__say · .link </figcaption>
       </figure> × 2
     </div>
   </div></section>
   Two large portraits on five columns each; the second is dropped by
   --duo-drop, so the pair reads as two people rather than a grid. */
.about-duo { --duo-drop: var(--sp-9); }
.about-duo__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.about-duo__head .eyebrow { grid-column: 1 / -1; }
.about-duo__head h2 { grid-column: 1 / span 7; text-wrap: balance; }
.about-duo__head .lead { grid-column: 9 / -1; text-wrap: pretty; }
.about-duo__pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); margin-top: var(--sp-9); }
.about-duo__p { margin: 0; }
.about-duo__p:first-child { grid-column: 1 / span 5; }
.about-duo__p:last-child { grid-column: 8 / span 5; margin-top: var(--duo-drop); }
.about-duo__cap { margin-top: var(--sp-5); }
.about-duo__name {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h3) * 1.25); line-height: 1.2; color: var(--fg);
}
.about-duo__role { margin-top: 2px; font-size: var(--fs-small); color: var(--fg-dim); }
.about-duo__say { margin: var(--sp-4) 0 0; }
.about-duo__say p { max-width: 36ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.about-duo__cap .link { margin-top: var(--sp-4); }

/* ---- AB05 · one group photo, one voice ----
   <section class="about-crew">
     <div class="wrap about-crew__head"> .eyebrow · h2 </div>
     <div class="photo photo--band parallax band about-crew__band">…</div>   ← edge to edge, outside .wrap
     <div class="wrap about-crew__grid">
       <ul class="about-crew__facts"><li><b>18</b><span>colleagues</span></li> × 3</ul>
       <figure class="about-crew__voice"><blockquote><p>…</p></blockquote><figcaption><b>Name</b><span>Role</span></figcaption></figure>
     </div>
   </section> */
.about-crew { --crew-q: calc(var(--fs-h2) * .56); --crew-fact: calc(var(--fs-h2) * .62); }
.about-crew__head h2 { max-width: 26ch; text-wrap: balance; }
.about-crew__band { margin-top: var(--sp-8); }
.about-crew__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); margin-top: var(--sp-8); }
.about-crew__facts { grid-column: 1 / span 4; list-style: none; margin: 0; padding: 0; }
.about-crew__facts li { display: grid; gap: 2px; padding-block: var(--sp-4); border-top: 1px solid var(--hairline); }
.about-crew__facts b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--crew-fact); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.about-crew__facts span { font-size: var(--fs-small); color: var(--fg-muted); }
.about-crew__voice { grid-column: 6 / -1; margin: 0; padding-top: var(--sp-4); }
.about-crew__voice blockquote { margin: 0; }
.about-crew__voice blockquote p {
  max-width: 30ch; font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--crew-q); line-height: 1.3; letter-spacing: -.012em; color: var(--fg); text-wrap: pretty;
}
.about-crew__voice figcaption { display: grid; gap: 2px; margin-top: var(--sp-5); }
.about-crew__voice figcaption b { font-weight: 600; color: var(--fg); }
.about-crew__voice figcaption span { font-size: var(--fs-small); color: var(--fg-dim); }

/* ---- AB06 · names-only roll, lit by team ----
   <section class="about-roll"><div class="wrap">
     <div class="about-roll__head"> h2 · p.about-roll__count </div>
     <div class="about-roll__switch" role="group" hidden><button aria-pressed="true" data-k="">Alle <span>18</span></button> …</div>
     <p class="about-sr" aria-live="polite"></p>
     <ul class="about-roll__list"><li data-k="c"><b>Name</b><span>Role</span></li> …</ul>
   </div></section>
   Alphabetical credits in columns. The switch (shown by JS) sets
   data-k on the list and the other teams fade back; nothing reflows. The
   pressed button's underline is the section's one accent state. */
.about-roll { --roll-dim: .22; }
.about-roll__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4) var(--sp-8); }
.about-roll__head h2 { max-width: 21ch; text-wrap: balance; }
.about-roll__count { max-width: 30ch; color: var(--fg-muted); }
.about-roll__switch { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-8); }
.about-roll__switch[hidden] { display: none; }
.about-roll__switch button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--sp-1) 0; font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--fg-muted); cursor: pointer;
  transition: color .3s, border-color .3s, scale .12s ease;
}
.about-roll__switch button:active { scale: .97; }
.about-roll__switch button span { margin-left: 4px; font-weight: 400; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-roll__switch button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
@media (hover: hover) { .about-roll__switch button:hover { color: var(--fg); } }
.about-roll__list {
  list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--hairline);
  columns: 4; column-gap: var(--sp-5);
}
.about-roll__list li { break-inside: avoid; display: grid; gap: 2px; padding-bottom: var(--sp-4); transition: opacity .4s var(--ease-out); }
.about-roll__list b { font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; color: var(--fg); }
.about-roll__list span { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-dim); }
.about-roll__list[data-k="c"] li:not([data-k="c"]),
.about-roll__list[data-k="d"] li:not([data-k="d"]),
.about-roll__list[data-k="o"] li:not([data-k="o"]) { opacity: var(--roll-dim); }

/* ---- AB07 · signed founder letter ----
   <section class="about-letter"><div class="wrap about-letter__grid">
     <aside class="about-letter__side"><div class="photo photo--people">…</div><p class="about-letter__from"><b>Name</b><span>Role</span><span>Place, date</span></p></aside>
     <article class="about-letter__body">
       .eyebrow · h2 · <div class="about-letter__text reveal"><p>…</p> × 3–6</div>
       <footer class="about-letter__sign reveal"> .about-letter__close · .about-letter__signature · .about-letter__reach (.link × 2) </footer>
     </article>
   </div></section>
   The sender sits in the margin like a letterhead, sticky beside the
   letter; the letter keeps one reading column held by --measure. */
.about-letter { --letter-side: 10rem; --letter-sign: calc(var(--fs-h2) * .72); }
.about-letter__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.about-letter__side { grid-column: 1 / span 3; align-self: start; position: sticky; top: var(--sp-8); }
.about-letter__side .photo { width: var(--letter-side); border-radius: var(--img-radius-sm, 6px); }
.about-letter__from { display: grid; gap: 2px; margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--fg-dim); }
.about-letter__from b { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.about-letter__body { grid-column: 5 / span 7; }
.about-letter__body h2 { text-wrap: balance; }
.about-letter__text { margin-top: var(--sp-6); }
.about-letter__text p { font-size: var(--fs-lead); line-height: 1.7; text-wrap: pretty; }
.about-letter__text p + p { margin-top: var(--sp-4); }
.about-letter__sign { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.about-letter__signature {
  margin-top: var(--sp-2);
  font-family: var(--font-accent, inherit); font-weight: var(--fw-accent, 400); font-style: var(--accent-style, normal);
  font-size: var(--letter-sign); line-height: 1.1; letter-spacing: var(--ls-accent, normal);
  color: var(--fg); font-synthesis: none;
}
.about-letter__reach { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); margin-top: var(--sp-5); }

/* ---- AB08 · addresses set like a letterhead ----
   <section class="about-where"><div class="wrap about-where__grid">
     <div class="about-where__head"> .eyebrow · h2 </div>
     <div class="photo parallax about-where__photo">…</div>
     <ul class="about-where__list" data-reveal-group>
       <li class="about-where__row reveal"><p class="about-where__city">City</p>
         <div class="about-where__info"> .about-where__kind · address · .about-where__reach · .about-where__now · .link </div></li> × 1–4
     </ul>
   </div></section>
   The city speaks in the accent face (in the text colour: the brand
   colour stays on the heading). One photo of the head office, not one per
   place. .about-where__now is written by JS from the hours. */
.about-where { --where-city: calc(var(--fs-h2) * .9); }
.about-where__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.about-where__head { grid-column: 1 / span 7; grid-row: 1; }
.about-where__head h2 { text-wrap: balance; }
.about-where__photo { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: start; }
.about-where__list { grid-column: 1 / span 7; grid-row: 2; list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.about-where__row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-5);
  padding-block: var(--sp-6); border-top: 1px solid var(--hairline);
}
.about-where__row:last-child { border-bottom: 1px solid var(--hairline); }
.about-where__city {
  font-family: var(--font-accent, inherit); font-weight: var(--fw-accent, 400); font-style: var(--accent-style, normal);
  font-size: var(--where-city); line-height: 1; letter-spacing: var(--ls-accent, normal);
  color: var(--fg); font-synthesis: none;
}
.about-where__info > * + * { margin-top: var(--sp-3); }
.about-where__kind { font-size: var(--fs-small); color: var(--fg-dim); }
.about-where__info address { font-style: normal; color: var(--fg); line-height: 1.6; }
.about-where__reach { line-height: 1.6; }
.about-where__now { font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.about-where__now[data-open="true"] { color: var(--fg); }
.about-where__info .link { margin-top: var(--sp-4); }

/* ---- the group, reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .about-tenets__frame img, .about-story__frame img, .about-tenets__t,
  .about-roll__list li, .about-roll__switch button { transition: none; }
}

/* ---- the group on tablets ---- */
@media (max-width: 900px) {
  .about-tenets__grid { grid-template-columns: minmax(0, 1fr); }
  .about-tenets__head, .about-tenets__stage, .about-tenets__list { grid-column: 1; grid-row: auto; }
  .about-tenets__stage {
    top: 0; z-index: 2; margin-top: var(--sp-6);
    padding-block: var(--sp-3); background: var(--bg);
  }
  .about-tenets__frame { aspect-ratio: var(--ratio-inline, 3 / 2); max-width: 34rem; }
  .about-tenets__list { margin-top: var(--sp-3); }
  .about-tenets__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; row-gap: var(--sp-2); }
  .about-tenets__p { grid-column: 2; grid-row: 2; }
  .about-tenets__row .arrow { grid-column: 3; grid-row: 1; }

  .about-story__grid { grid-template-columns: minmax(0, 1fr); }
  .about-story__head, .about-story__chapters { grid-column: 1; grid-row: auto; }
  .about-story__stage { display: none; }
  .about-story__ch, .about-story__ch:first-child { min-height: 0; padding-top: 0; }
  .about-story__ch + .about-story__ch { margin-top: var(--sp-8); }
  .about-story__inline { display: block; margin-bottom: var(--sp-5); }

  .about-open__grid > h2 { grid-column: 1 / -1; }
  .about-open__lead { grid-column: 4 / -1; }
  .about-open__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); margin-top: var(--sp-8); }
  .about-open__facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }

  .about-duo__head h2, .about-duo__head .lead { grid-column: 1 / -1; }
  .about-duo__head .lead { margin-top: var(--sp-5); }
  .about-duo { --duo-drop: var(--sp-8); }
  .about-duo__p:first-child { grid-column: 1 / span 6; }
  .about-duo__p:last-child { grid-column: 7 / span 6; }

  .about-crew__facts, .about-crew__voice { grid-column: 1 / -1; }
  .about-crew__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .about-crew__voice { margin-top: var(--sp-7); }

  .about-roll__list { columns: 3; }

  .about-letter__side, .about-letter__body { grid-column: 1 / -1; }
  .about-letter__side {
    position: static; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-7);
  }
  .about-letter__side .photo { width: 100%; }
  .about-letter__from { margin-top: 0; }

  .about-where__head, .about-where__photo, .about-where__list { grid-column: 1 / -1; grid-row: auto; }
  .about-where__photo { margin-top: var(--sp-7); }
}

/* ---- the group on phones ---- */
@media (max-width: 640px) {
  /* Twelve columns' eleven 32px gaps (352px) are wider than a phone's
     content box, so the grids pushed the page 1px sideways at 375 and
     further at 360 (qa.mjs, 2026-09-11). Narrow gaps keep the spans. */
  .about-tenets__grid, .about-story__grid, .about-open__grid, .about-duo__head, .about-duo__pair,
  .about-crew__grid, .about-letter__grid, .about-where__grid { column-gap: var(--sp-2); }
  .about-tenets { --tenet-title: var(--fs-h3); }
  .about-open__lead { grid-column: 1 / -1; }
  /* One fact per row: two columns left a place name ("Leverkusen") at the
     fact size wider than its column at 375 (qa.mjs, 2026-09-11). */
  .about-open__facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .about-open__facts > div, .about-open__facts > div + div { padding: var(--sp-4) 0; border-left: 0; }
  .about-open__facts > div + div { border-top: 1px solid var(--hairline); }
  .about-duo__p:first-child, .about-duo__p:last-child { grid-column: 1 / -1; width: 86%; }
  .about-duo__p:last-child { justify-self: end; margin-top: var(--sp-8); }
  .about-crew__facts { grid-template-columns: minmax(0, 1fr); }
  .about-crew__voice blockquote p { font-size: var(--fs-lead); }
  .about-roll__list { columns: 2; column-gap: var(--sp-4); }
  .about-roll__list b { font-size: var(--fs-body); }
  .about-letter__text p { font-size: var(--fs-body); }
  .about-where__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

/* ---- 2026-09-11 · BDG page view ---- */

/* ---- AB09 · four areas, one face each ----
   <section class="about-areas"><div class="wrap">
     <div class="about-areas__head"><div> .eyebrow · h2 </div> p.lead </div>
     <div class="about-areas__grid">
       <article class="about-areas__area">
         <p class="about-areas__k"><span>Area</span><span class="about-areas__n">01</span></p>
         <div class="photo photo--people about-areas__face">…</div>          ← the lead only, still
         <p class="about-areas__who"><b>Name</b><span>Field</span></p>
         <blockquote class="about-areas__say"><p>„…“</p></blockquote>
         <div class="about-areas__next"> .about-areas__who · .about-areas__say </div> × 0–2
       </article> × 3–4
     </div>
   </div></section>
   Two by two on wide screens: the lead's portrait holds the left of each
   area, and every voice stacks beside it on one text column. */
.about-areas {
  --areas-face: minmax(0, 5fr);          /* portrait column inside an area */
  --areas-say: calc(var(--fs-h3) * 1.08); /* the sentences */
}
.about-areas__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.about-areas__head > div { grid-column: 1 / span 7; }
.about-areas__head h2 { text-wrap: balance; }
.about-areas__head .lead { grid-column: 9 / -1; text-wrap: pretty; }
.about-areas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); margin-top: var(--sp-9); }
.about-areas__area {
  display: grid; grid-template-columns: var(--areas-face) minmax(0, 7fr);
  /* label · who · say · next · a flexible last row that takes the portrait's
     extra height, so it never pushes the text rows apart */
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  column-gap: var(--sp-5); align-content: start;
  padding-top: var(--sp-3); border-top: 1px solid var(--hairline);
}
.about-areas__k {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-5); max-width: none;
  font-size: var(--fs-small); font-weight: 600; color: var(--fg);
}
.about-areas__n { font-weight: 400; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-areas__face { grid-column: 1; grid-row: 2 / -1; align-self: start; }
.about-areas__who, .about-areas__say, .about-areas__next { grid-column: 2; }
.about-areas__who { display: grid; gap: 2px; }
.about-areas__who b { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.about-areas__who span { font-size: var(--fs-small); color: var(--fg-dim); }
.about-areas__say { margin: var(--sp-3) 0 0; }
.about-areas__say p {
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--areas-say); line-height: 1.35; letter-spacing: -.01em;
  color: var(--fg); text-wrap: pretty; hanging-punctuation: first;
}
.about-areas__next { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.about-areas__next .about-areas__say p { font-size: var(--fs-lead); }

/* ---- AB10 · a sentence of names, one voice at a time ----
   <section class="about-names"><div class="wrap">
     <div class="about-names__head"><div> .eyebrow · h2 </div> p.lead </div>
     <div class="about-names__body">
       <p class="about-names__line">Bei bdg arbeiten <button class="about-names__name" aria-pressed="true" aria-controls="AB10-v-1">Lena</button>, … und <button …>Stefan</button>.</p>
       <div class="about-names__stage" aria-live="polite">
         <figure class="about-names__voice" id="AB10-v-1" data-on="true"> .about-names__n · blockquote · figcaption </figure> × n
       </div>
     </div>
   </div></section>
   JS adds .is-live: the voices then share one grid cell (the stage keeps
   the tallest one's height, so nothing jumps) and only data-on shows.
   Without JS they are listed. The pressed name's underline is the
   section's one accent state. */
.about-names {
  --names-size: calc(var(--fs-h2) * .62);  /* the sentence of names */
  --names-say: calc(var(--fs-h2) * .5);    /* the voice on the stage */
  --names-fade: .45s;
  --names-rest: color-mix(in srgb, var(--fg) 18%, transparent);  /* a name's resting underline */
}
.about-names__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.about-names__head > div { grid-column: 1 / span 7; }
.about-names__head h2 { text-wrap: balance; }
.about-names__head .lead { grid-column: 9 / -1; text-wrap: pretty; }
.about-names__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5);
  margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 1px solid var(--hairline);
}
.about-names__line {
  grid-column: 1 / span 6; max-width: none;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--names-size); line-height: 1.32; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg-dim); text-wrap: pretty;
}
.about-names__name {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; color: var(--fg-muted); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em;
  text-decoration-color: var(--names-rest);   /* a quiet line says "choose me" */
  transition: color .3s var(--ease-out), text-decoration-color .3s var(--ease-out);
}
.about-names__name { text-decoration-thickness: 1px; }
.about-names__name[aria-pressed="true"] { color: var(--fg); text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
@media (hover: hover) { .about-names__name:hover { color: var(--fg); } }
.about-names__stage { grid-column: 8 / -1; display: grid; gap: var(--sp-7); }
.about-names__voice { margin: 0; }
.about-names__n { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-names__voice blockquote { margin: var(--sp-4) 0 0; }
.about-names__voice blockquote p {
  max-width: 24ch; font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--names-say); line-height: 1.25; letter-spacing: -.015em;
  color: var(--fg); text-wrap: pretty; hanging-punctuation: first;
}
.about-names__voice figcaption { display: grid; gap: 2px; margin-top: var(--sp-5); }
.about-names__voice figcaption b { font-weight: 600; color: var(--fg); }
.about-names__voice figcaption span { font-size: var(--fs-small); color: var(--fg-dim); }
.about-names.is-live .about-names__stage { gap: 0; }
.about-names.is-live .about-names__voice {
  grid-area: 1 / 1; transition: opacity var(--names-fade) var(--ease-out), visibility 0s linear var(--names-fade);
}
.about-names.is-live .about-names__voice[data-on="false"] { opacity: 0; visibility: hidden; }
.about-names.is-live .about-names__voice[data-on="true"] { transition-delay: 0s; }

/* ---- AB11 · the team on the system ----
   <section class="about-map"><div class="wrap">
     <div class="about-map__head"><div> .eyebrow · h2 </div> p.lead </div>
     <div class="about-map__body">
       <div class="about-map__diagram" data-on="proc">
         <div class="about-map__node" data-part="proc"><p class="about-map__k">Part</p>
           <ul class="about-map__people"><li><button class="about-map__p" aria-pressed="true"><b>Name</b><span>Field</span></button>
             <p class="about-map__q">„Sentence“</p></li></ul>        ← shown on phones, read by screen readers
         </div> × 6 (proc shop erp wh edi ops)
       </div>
       <div class="about-map__stage" aria-hidden="true"><figure class="about-map__voice" data-on="true">…</figure> × n</div>
     </div>
   </div></section>
   Wide screens: a three-column drawing, shop – ERP – warehouse in the
   middle row, processes above the ERP, interfaces below it, operations
   along the foot; connectors are the nodes' own pseudo-elements. Phones:
   one chain, each sentence in place. */
.about-map {
  --map-gap: var(--sp-6);                                    /* between nodes, and a connector's length */
  --map-line: color-mix(in srgb, var(--fg) 28%, transparent);  /* connectors */
  --map-fill: color-mix(in srgb, var(--fg) 3%, transparent);   /* node surface, reads on any ground */
  --map-on: color-mix(in srgb, var(--fg) 55%, transparent);    /* the lit node's edge */
  --map-say: calc(var(--fs-h2) * .48);
  --map-fade: .45s;
}
.about-map__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.about-map__head > div { grid-column: 1 / span 7; }
.about-map__head h2 { text-wrap: balance; }
.about-map__head .lead { grid-column: 9 / -1; text-wrap: pretty; }
.about-map__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); margin-top: var(--sp-9); }
.about-map__diagram {
  grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--map-gap); align-items: stretch;
}
.about-map__node {
  position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--map-fill);
  transition: border-color .3s var(--ease-out);
}
.about-map__node[data-part="proc"] { grid-area: 1 / 2; }
.about-map__node[data-part="shop"] { grid-area: 2 / 1; }
.about-map__node[data-part="erp"]  { grid-area: 2 / 2; }
.about-map__node[data-part="wh"]   { grid-area: 2 / 3; }
.about-map__node[data-part="edi"]  { grid-area: 3 / 2; }
.about-map__node[data-part="ops"]  { grid-area: 4 / 1 / 5 / -1; }
.about-map__node::before, .about-map__node::after { content: ""; position: absolute; background: var(--map-line); }
/* processes ↓ ERP, interfaces ↑ ERP, ERP ↓ operations (through the interfaces) */
.about-map__node[data-part="proc"]::before,
.about-map__node[data-part="ops"]::before { left: 50%; top: 100%; width: 1px; height: var(--map-gap); }
.about-map__node[data-part="ops"]::before { top: auto; bottom: 100%; }
.about-map__node[data-part="edi"]::before { left: 50%; bottom: 100%; width: 1px; height: var(--map-gap); }
/* shop → ERP ← warehouse */
.about-map__node[data-part="shop"]::before { left: 100%; top: 50%; height: 1px; width: var(--map-gap); }
.about-map__node[data-part="wh"]::before { right: 100%; top: 50%; height: 1px; width: var(--map-gap); }
.about-map__node::after { display: none; }
.about-map__k { max-width: none; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-dim); }
.about-map__people { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.about-map__node[data-part="ops"] .about-map__people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-map__p {
  appearance: none; display: grid; gap: 0; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer; color: var(--fg-muted);
}
.about-map__p b {
  justify-self: start; font-weight: 600; color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em;
  text-decoration-color: transparent; transition: color .3s var(--ease-out), text-decoration-color .3s var(--ease-out);
}
.about-map__p span { font-size: var(--fs-small); color: var(--fg-dim); }
.about-map__p[aria-pressed="true"] b { color: var(--fg); text-decoration-color: var(--brand); }
@media (hover: hover) { .about-map__p:hover b { color: var(--fg); } }
.about-map__p:focus-visible { outline-offset: 4px; }
/* The sentence in place: for screen readers on wide screens, for everyone on phones. */
.about-map__q {
  position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap;
}
.about-map__diagram[data-on="proc"] .about-map__node[data-part="proc"],
.about-map__diagram[data-on="shop"] .about-map__node[data-part="shop"],
.about-map__diagram[data-on="erp"] .about-map__node[data-part="erp"],
.about-map__diagram[data-on="wh"] .about-map__node[data-part="wh"],
.about-map__diagram[data-on="edi"] .about-map__node[data-part="edi"],
.about-map__diagram[data-on="ops"] .about-map__node[data-part="ops"] { border-color: var(--map-on); }
/* Held beside the drawing, so a name at its foot still speaks in view (layout, not an index). */
.about-map__stage {
  grid-column: 10 / -1; align-self: start; position: sticky; top: var(--sp-8);
  display: grid; align-content: start; padding-top: var(--sp-3);
}
.about-map__voice { grid-area: 1 / 1; margin: 0; transition: opacity var(--map-fade) var(--ease-out), visibility 0s linear var(--map-fade); }
.about-map__voice[data-on="false"] { opacity: 0; visibility: hidden; }
.about-map__voice[data-on="true"] { transition-delay: 0s; }
.about-map__at { font-size: var(--fs-small); color: var(--fg-dim); }
.about-map__voice blockquote { margin: var(--sp-4) 0 0; }
.about-map__voice blockquote p {
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--map-say); line-height: 1.25; letter-spacing: -.015em;
  color: var(--fg); text-wrap: pretty; hanging-punctuation: first;
}
.about-map__voice figcaption { display: grid; gap: 2px; margin-top: var(--sp-5); }
.about-map__voice figcaption b { font-weight: 600; color: var(--fg); }
.about-map__voice figcaption span { font-size: var(--fs-small); color: var(--fg-dim); }

/* ---- the 2026-09-11 team candidates, reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .about-names__name, .about-names.is-live .about-names__voice,
  .about-map__node, .about-map__p b, .about-map__voice { transition: none; }
}

/* ---- the 2026-09-11 team candidates on tablets ---- */
@media (max-width: 900px) {
  .about-areas__head > div, .about-areas__head .lead,
  .about-names__head > div, .about-names__head .lead,
  .about-map__head > div, .about-map__head .lead { grid-column: 1 / -1; }
  .about-areas__head .lead, .about-names__head .lead, .about-map__head .lead { margin-top: var(--sp-5); }
  .about-areas__grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-8); }

  .about-names__body { margin-top: var(--sp-8); }
  .about-names__line, .about-names__stage { grid-column: 1 / -1; }
  .about-names__stage { margin-top: var(--sp-7); }

  .about-map__body { margin-top: var(--sp-8); }
  .about-map__diagram { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); --map-gap: var(--sp-5); }
  .about-map__node[data-part] { grid-area: auto; }
  .about-map__node[data-part]::before { left: var(--sp-5); right: auto; top: auto; bottom: 100%; width: 1px; height: var(--map-gap); }
  .about-map__node[data-part="proc"]::before { display: none; }
  .about-map__node[data-part="ops"] .about-map__people { grid-template-columns: minmax(0, 1fr); }
  .about-map__people { gap: var(--sp-4); }
  .about-map__p b { color: var(--fg); }   /* every sentence is in place here: names aren't a choice */
  .about-map__q {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.5; color: var(--fg); text-wrap: pretty;
  }
  .about-map__stage { display: none; }
}

/* ---- the 2026-09-11 team candidates on phones ---- */
@media (max-width: 640px) {
  .about-areas__head, .about-names__head, .about-names__body, .about-map__head, .about-map__body { column-gap: var(--sp-2); }
  .about-areas { --areas-face: 6.5rem; --areas-say: var(--fs-lead); }
  .about-areas__area { column-gap: var(--sp-4); }
  .about-areas__face { grid-row: 2; }
  .about-areas__who { align-self: end; }
  .about-areas__say, .about-areas__next { grid-column: 1 / -1; }
  .about-areas__say { margin-top: var(--sp-4); }
  .about-names { --names-size: var(--fs-h3); --names-say: calc(var(--fs-h3) * 1.1); }
  .about-names__line { line-height: 1.45; }
}

/* ---- AB12 · the offer as a staircase ----
   <section class="about-stair"><div class="wrap">
     <div class="about-stair__head"><div> .eyebrow · h2 </div> p.lead </div>
     <div class="about-stair__chart">
       <div class="about-stair__axis" aria-hidden="true">
         <div class="about-stair__years"><span style="--at:0">2021</span> … <span style="--at:2" data-quiet>2023</span> …</div>
         <p class="about-stair__today">Heute im Angebot</p>
       </div>
       <ol class="about-stair__rows">
         <li class="about-stair__row" style="--at:0">                      ← --at: years since the first
           <div class="about-stair__what"><h3><span class="about-stair__y">2021</span>Title</h3><p>Line</p></div>
           <div class="about-stair__track" aria-hidden="true"><span class="about-stair__bar"></span></div>
           <p class="about-stair__now"><a class="link">Service<span class="arrow"></span></a> × 1–2</p>
         </li> × 3–6
       </ol>
     </div>
   </div></section>
   Each bar starts at its year (a third of --stair-span per year) and runs
   to the end of the track, today; faint year guides run through every
   track, so the rows read as one staircase. Static: nothing draws. */
.about-stair {
  --stair-cols: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
  --stair-span: 6;                                               /* calendar years on the track */
  --stair-bar: 10px;
  --stair-fill: color-mix(in srgb, var(--fg) 22%, transparent);
  --stair-guide: color-mix(in srgb, var(--fg) 7%, transparent);
}
.about-stair__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.about-stair__head > div { grid-column: 1 / span 7; }
.about-stair__head h2 { text-wrap: balance; }
.about-stair__head .lead { grid-column: 9 / -1; text-wrap: pretty; }
.about-stair__chart { margin-top: var(--sp-9); }
.about-stair__axis, .about-stair__row { display: grid; grid-template-columns: var(--stair-cols); column-gap: var(--sp-6); }
.about-stair__axis { align-items: end; padding-bottom: var(--sp-3); }
.about-stair__years { grid-column: 2; position: relative; height: 1.4em; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-stair__years span { position: absolute; bottom: 0; left: calc(var(--at) / var(--stair-span) * 100%); padding-left: var(--sp-1); }
.about-stair__years span[data-quiet] { opacity: .5; }
.about-stair__today { grid-column: 3; max-width: none; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-dim); }
.about-stair__rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.about-stair__row { border-top: 1px solid var(--hairline); }
.about-stair__what { padding-block: var(--sp-5); }
.about-stair__what h3 { display: grid; gap: 2px; font-size: calc(var(--fs-h3) * 1.15); line-height: 1.25; text-wrap: balance; }
.about-stair__y { font-weight: 500; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.about-stair__what p { margin-top: var(--sp-2); max-width: 40ch; text-wrap: pretty; }
.about-stair__track {
  position: relative; align-self: stretch; min-height: var(--sp-6);
  background: linear-gradient(to right, var(--stair-guide) 1px, transparent 1px) 0 0 / calc(100% / var(--stair-span)) 100%;
}
.about-stair__bar {
  position: absolute; top: 50%; right: 0; left: calc(var(--at) / var(--stair-span) * 100%);
  height: var(--stair-bar); margin-top: calc(var(--stair-bar) / -2);
  background: var(--stair-fill); border-left: 3px solid var(--fg); border-radius: 0 2px 2px 0;
}
.about-stair__now { display: grid; gap: 0; align-content: center; justify-items: start; padding-block: var(--sp-5); max-width: none; }

/* ---- AB13 · years as dimension lines ----
   <section class="about-years"><div class="wrap">
     <div class="about-years__head"> .eyebrow · h2 </div>
     <ol class="about-years__list">
       <li class="about-years__item" style="--gap:2">                      ← years since the step before
         <p class="about-years__gap"><span>2 Jahre später</span></p>        ← the dimension line (none on the first)
         <p class="about-years__y">2024</p>
         <div class="about-years__body"> h3 · p </div>
       </li> × 3–6
     </ol>
   </div></section>
   The whitespace between two years is --years-unit per year, and a static
   dimension line with end ticks measures it. */
.about-years {
  --years-unit: var(--sp-8);
  --years-num: calc(var(--fs-display) * 1.25);
  --years-line: color-mix(in srgb, var(--fg) 32%, transparent);
  --years-tick: 13px;
}
.about-years__head h2 { max-width: 20ch; text-wrap: balance; }
.about-years__list { list-style: none; margin: var(--sp-9) 0 0; padding: 0; }
.about-years__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: center; }
.about-years__gap {
  grid-column: 1 / -1; position: relative; display: flex; align-items: center;
  height: calc(var(--gap) * var(--years-unit)); margin: var(--sp-4) 0; padding-left: var(--sp-4);
  max-width: none; border-left: 1px solid var(--years-line);
  font-size: var(--fs-small); color: var(--fg-dim);
}
.about-years__gap::before, .about-years__gap::after {
  content: ""; position: absolute; left: calc(var(--years-tick) / -2); width: var(--years-tick); height: 1px; background: var(--years-line);
}
.about-years__gap::before { top: 0; }
.about-years__gap::after { bottom: 0; }
.about-years__y {
  grid-column: 1 / span 3; max-width: none;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--years-num); line-height: .9; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.about-years__body { grid-column: 4 / span 7; }
.about-years__body h3 { font-size: calc(var(--fs-h2) * .46); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.about-years__body p { margin-top: var(--sp-2); text-wrap: pretty; }

/* ---- AB14 · one sentence, four years ----
   <section class="about-grow"><div class="wrap">
     <div class="about-grow__head"> .eyebrow · h2 </div>
     <div class="about-grow__years" role="group" hidden><button class="about-grow__year" aria-pressed="false"><b>2021</b><span>Title</span></button> × n</div>
     <p class="about-grow__line"><span class="about-grow__c" data-i="0">Clause</span> × n</p>
     <ol class="about-grow__steps" aria-live="polite"><li data-i="0"><b>2021 · Title</b> Line</li> × n</ol>
   </div></section>
   JS shows the years, sets each clause's data-state (past · now · next)
   and adds .is-live, which lists only the chosen step. The pressed year's
   top rule is the section's one accent state. */
.about-grow {
  --grow-size: calc(var(--fs-h2) * .66);
  --grow-next: color-mix(in srgb, var(--fg-dim) 60%, transparent);   /* clauses still to come */
  --grow-ease: .5s;
}
.about-grow__head h2 { max-width: 20ch; text-wrap: balance; }
.about-grow__years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-5); margin-top: var(--sp-9); }
.about-grow__years[hidden] { display: none; }
.about-grow__year {
  position: relative; appearance: none; display: grid; gap: 2px; align-content: start;
  padding: var(--sp-3) 0 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--hairline);
  text-align: left; font: inherit; color: var(--fg-muted); cursor: pointer;
  transition: color .3s var(--ease-out), scale .12s ease;
}
.about-grow__year:active { scale: .98; }
.about-grow__year::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out);
}
.about-grow__year b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h3) * 1.2); line-height: 1.2; color: inherit; font-variant-numeric: tabular-nums;
}
.about-grow__year span { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-dim); }
.about-grow__year[aria-pressed="true"] { color: var(--fg); }
.about-grow__year[aria-pressed="true"]::before { transform: none; }
@media (hover: hover) { .about-grow__year:hover { color: var(--fg); } }
.about-grow__line {
  margin-top: var(--sp-8); max-width: 40ch;
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: var(--grow-size); line-height: 1.25; letter-spacing: -.015em; color: var(--fg); text-wrap: pretty;
}
.about-grow__c { transition: color var(--grow-ease) var(--ease-out); }
.about-grow__c[data-state="past"] { color: var(--fg-muted); }
.about-grow__c[data-state="next"] { color: var(--grow-next); }
.about-grow__steps { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; gap: var(--sp-2); max-width: var(--measure); }
.about-grow__steps li { color: var(--fg-muted); text-wrap: pretty; }
.about-grow__steps b { font-weight: 600; color: var(--fg); }
.about-grow.is-live .about-grow__steps li[data-on="false"] { display: none; }

/* ---- the 2026-09-11 history candidates, reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .about-grow__year, .about-grow__year::before, .about-grow__c { transition: none; }
}

/* ---- the 2026-09-11 history candidates on tablets ---- */
@media (max-width: 900px) {
  .about-stair__head > div, .about-stair__head .lead { grid-column: 1 / -1; }
  .about-stair__head .lead { margin-top: var(--sp-5); }
  .about-stair__chart { margin-top: var(--sp-8); }
  .about-stair { --stair-cols: minmax(0, 1fr); }
  .about-stair__years { grid-column: 1; }
  .about-stair__today { display: none; }
  .about-stair__what { padding-bottom: var(--sp-3); }
  .about-stair__track { min-height: var(--sp-5); }
  .about-stair__now { padding-block: var(--sp-3) var(--sp-5); display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }

  .about-years { --years-unit: var(--sp-7); }
  .about-years__y { grid-column: 1 / -1; }
  .about-years__body { grid-column: 1 / -1; margin-top: var(--sp-4); }

  .about-grow__years { margin-top: var(--sp-8); }
}

/* ---- the 2026-09-11 history candidates on phones ---- */
@media (max-width: 640px) {
  .about-stair__head, .about-years__item { column-gap: var(--sp-2); }
  .about-years { --years-unit: var(--sp-6); --years-num: var(--fs-display); }
  .about-grow { --grow-size: calc(var(--fs-h3) * 1.15); }
  .about-grow__years { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
  .about-grow__line { margin-top: var(--sp-7); }
}