/* The about page only. Its own file so the front page, which inlines
   site.css, does not carry it. Linked after site.css, so these rules win
   over the block "about: a calm page with one motion" there.

   2026-10-10: one grid for every section. A rail on the left (columns 1
   to 4: the photograph, the small labels, the section's heading) and the
   text from column 5, so the page has two left edges and no third. */

/* ── what SRS Dynamic does ──────────────────────────────────────────── */
.ab-does__in > .h2 { grid-column: 1 / -1; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.08; }
.ab-does__txt { gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); }
.ab-does__txt .about__line { grid-column: auto; font-size: clamp(1.8rem, .9rem + 2.9vw, 3.6rem); }
.ab-does__p { margin: 0; max-width: 40ch; font-size: var(--t-lead); line-height: 1.4; }
/* the business first, in full ink; what came out of the move after it,
   smaller and quieter */
.ab-does__p--also { max-width: 52ch; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: clamp(1.0625rem, .98rem + .4vw, 1.3rem); line-height: 1.45; }

/* ── wide: the rail and the text column ─────────────────────────────── */
@media (min-width: 821px) {
  .ab-story__in > .ab-kick { grid-column: 1 / 5; }
  .ab-story__txt { grid-column: 5 / 12; }

  .ab-does__in > .h2 { grid-column: 1 / 5; }
  .ab-does__txt { grid-column: 5 / 13; }

  /* the road: its heading on the page's left edge on a very wide screen
     too, and the plain timeline (reduced motion, no script) on the rail */
  .ab-road.is-on .h2 { left: max(var(--gut), (100% - 1440px) / 2); }
  .ab-road:not(.is-on) .cv__list li { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ab-road:not(.is-on) .cv__y { grid-column: 1 / 5; }
  .ab-road:not(.is-on) .cv__list p { grid-column: 5 / 13; }

  /* the closing uses the whole width: the question across, the way to
     write under it from the text column, the two pages of work below */
  .ab-end { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .ab-end .cta__h { grid-column: 1 / -1; max-width: none; }
  .ab-end .cta__p { grid-column: 1 / 5; }
  .ab-end .cta__row { grid-column: 5 / 13; }
  .ab-end__k { grid-column: 1 / 5; }
  .ab-end__next { grid-column: 5 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── the closing ────────────────────────────────────────────────────── */
.ab-end__k { margin: clamp(12px, 3vw, 40px) 0 0; padding-top: .5em; }
.ab-end__next { margin-top: clamp(12px, 3vw, 40px); }
@media (max-width: 820px) {
  .ab-end__next { margin-top: 0; }
  .ab-end .cta__btn { justify-content: space-between; }
}
@media (max-width: 480px) {
  .ab-end .cta__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ── phone: the opening ─────────────────────────────────────────────────
   The photograph stays small. Beside it stand the page's label (top) and
   the three words (bottom, on the photograph's lower edge), so the right
   half of the screen is not blank; the name and the role follow in full
   width. */
@media (max-width: 820px) {
  .ab-hero { padding-top: calc(var(--nav-h) + 28px); }
  .ab-hero__in { grid-template-columns: clamp(120px, 38vw, 168px) minmax(0, 1fr); gap: 22px 20px; align-items: start; }
  .ab-hero__txt { display: contents; }
  .ab-hero__pic { grid-column: 1; grid-row: 1; max-width: none; }
  .ab-hero__txt > .ab-kick { grid-column: 2; grid-row: 1; align-self: start; margin: 0; }
  .ab-words { grid-column: 2; grid-row: 1; align-self: end; flex-direction: column; gap: 10px; margin: 0; padding-top: 16px; }
  .ab-hero__h, .ab-hero__role { grid-column: 1 / -1; }
  .ab-hero__h { margin-top: 6px; }
}

/* ── the road ───────────────────────────────────────────────────────── */
/* without script there is nothing to draw the installer: no empty canvas */
html:not(.js) .ab-road .road { display: none; }

/* a phone (about.js, class is-fix below 600 px): the caption stands still
   under the installer, in the page's gutters, and changes from station to
   station (--o); only the marks on the ground travel. No fades at the
   screen's edges, which lay over the caption's first and last letters. */
.ab-road.is-fix .cv__list { display: block; width: 100%; will-change: auto; }
.ab-road.is-fix .cv__list li { position: absolute; top: 0; }
.ab-road.is-fix .cv__list li > :not(.cv__tick) { opacity: var(--o, 0); }
.ab-road.is-fix .cv__tick { will-change: transform; }
.ab-road.is-fix .road__edge { display: none; }