/* ==========================================================================
   About (about.html; after the Arpeggio about page, in Spinta's paper and ink)
   1. Hero: the studio photo in a window under the header, "Small studio.
      Proper work." across it. Scrolling opens the window out to the edges
      (about.js), then the page rides up over it as a bone sheet while the
      photo settles back and fades into the paper, as the home page's hero does.
   2. Introduction: "We are Spinta." beside a statement whose words fill in as
      you read it, then what we've done, how we're set up and two ways on.
   3. What we believe: an ink block that opens out to the edges as it arrives,
      signed with the mark (its outline draws, then it fills).
   4. The difference: the pitch, held beside a photo with a turning badge, and
      the three ways we work.
   5. A photo band: "We build the thing ourselves."
   6. Who we work with: the list lights row by row as you read down it.
   7. What we won't do: four NOs, each promise struck through as it arrives.
   8. Proof: four figures that roll into place, and our own products.
   9. Next: "Enough talking."
   Motion: things play in as they arrive (titles' words rise out of masks,
   blocks rise, hairlines draw). Pre-states apply from the first paint (so
   nothing shows, vanishes and shows again), but only while JS is on and the
   page isn't static: html.about-static (reduced motion, an old browser, or
   the head's safety net if the scripts never come) shows everything as is.
   ========================================================================== */

.about {
  --a-open: 45svh; /* the scroll it takes the hero window to open (about.js reads it from layout) */
  --a-pad: clamp(20px, 2.4vw, 44px); /* inside the hero window */
  --a-radius: 18px;
  --a-corner: clamp(44px, 4.6vw, 88px); /* the site's one big corner (as on How we work's cards) */
  --a-section: clamp(104px, 16vh, 200px);
  position: relative;
  background: var(--bone);
}

@supports not (height: 100svh) {
  .about {
    --a-open: 45vh;
  }
}

/* One mask per line or word (they rise in). The padding keeps descenders. */
.aline {
  display: block;
  overflow: clip;
  padding: 0.04em 0 0.08em;
  margin: -0.04em 0 -0.08em;
}

.aline > span,
.aw > span {
  display: inline-block;
}

.aw {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.alabel {
  letter-spacing: 0.12em;
  color: var(--text-mute);
}

.alabel__n {
  margin-right: 0.6em;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ 1. hero */

/* The hero holds (sticky) while the window opens and then while the sheet
   covers it: the pin is the hero plus that much scroll, as a spacer (padding
   would give a sticky element no room to travel). */
.ahero-pin {
  position: relative;
}

.ahero-pin::after {
  content: "";
  display: block;
  height: calc(var(--a-open) + 100svh);
}

/* Where the header compacts onto its bar: as soon as the page moves, so the
   logo never sits on the photo (header.js measures [data-hero-cover]). */
.ahero-pin__mark {
  position: absolute;
  top: calc(var(--header-h) + 2px);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ahero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--bone);
  transform-origin: 50% 40%;
}

@supports not (height: 100svh) {
  .ahero-pin::after {
    height: calc(var(--a-open) + 100vh);
  }

  .ahero {
    height: 100vh;
  }
}

/* The window: full bleed, cut to the photo's frame by a clip that about.js
   opens with the scroll (--o: 0 framed under the header, 1 full bleed under
   the header's bar). */
.ahero__window {
  --o: 0;
  position: absolute;
  inset: 0;
  clip-path: inset(
    calc(var(--header-h) - (var(--header-h) - var(--header-compact)) * var(--o))
    calc(var(--gutter) * (1 - var(--o)))
    calc(var(--gutter) * (1 - var(--o)))
    round calc(var(--a-radius) * (1 - var(--o)))
  );
}

/* The photo and its shade: wiped up from the foot as the page opens
   (html.is-entered, once the photo has decoded and the type has loaded). */
.ahero__reveal {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--ink);
}

.ahero__zoom {
  position: absolute;
  inset: 0;
  transform: scale(1.12);
  will-change: transform;
}

.ahero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.ahero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(17 17 17 / 0.5) 0%, rgb(17 17 17 / 0) 30%),
    linear-gradient(0deg, rgb(17 17 17 / 0.82) 0%, rgb(17 17 17 / 0.46) 36%, rgb(17 17 17 / 0) 66%),
    rgb(17 17 17 / 0.14);
}

/* The words sit where the window starts and stay put while it opens round them. */
.ahero__inner {
  position: absolute;
  inset: var(--header-h) var(--gutter) var(--gutter);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: var(--a-pad);
  color: var(--white);
}

.ahero__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.82);
}

.ahero__title {
  grid-row: 3;
  font-size: min(calc((100vw - 2 * var(--gutter) - 2 * var(--a-pad)) / 10.2), 19vh);
  font-size: min(calc((100vw - 2 * var(--gutter) - 2 * var(--a-pad)) / 10.2), 19svh);
  font-stretch: var(--wdth-display);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  font-synthesis: none;
}

.ahero__foot {
  position: relative;
  grid-row: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-top: clamp(18px, 3.4vh, 40px);
  padding-top: clamp(16px, 2.4vh, 24px);
}

/* The hairline over the foot (its own layer, so it can draw in). */
.ahero__foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgb(255 255 255 / 0.28);
  transform-origin: 0 50%;
}

.ahero__sub {
  max-width: 46ch;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.88);
  text-wrap: pretty;
}

.ahero :focus-visible {
  outline-color: var(--white);
}

.ahero__cue {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  letter-spacing: 0.12em;
  color: var(--white);
}

/* A line that draws down and away, over and over (as the home hero's cue). */
.ahero__cue-line {
  position: relative;
  width: 1px;
  height: 36px;
  overflow: clip;
  background: rgb(255 255 255 / 0.3);
}

.ahero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  animation: ahero-cue 2.4s var(--ease-in-out) infinite;
}

@keyframes ahero-cue {
  0% {
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  50% {
    transform: scaleY(1);
    transform-origin: 50% 0;
  }
  50.1% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
}

/* Portrait screens: the title stacks into four lines, as large as fits. */
@media (max-aspect-ratio: 1/1) {
  .ahero__title {
    font-size: min(calc((100vw - 2 * var(--gutter) - 2 * var(--a-pad)) / 5.6), 11vh);
    font-size: min(calc((100vw - 2 * var(--gutter) - 2 * var(--a-pad)) / 5.6), 11svh);
    line-height: 0.88;
  }
}

/* Short landscape screens (phones on their side): the sub waits for the page below. */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .ahero__sub {
    display: none;
  }

  .ahero__foot {
    justify-content: flex-end;
  }
}

@media (max-width: 719px) {
  .ahero__cue {
    display: none;
  }

  .ahero__top {
    font-size: 0.625rem;
  }
}

/* The opening (html.is-entered): the photo wipes up from the foot and eases
   back, the title's lines rise, then the rest follows. */
.js:not(.about-static) .ahero__reveal {
  clip-path: inset(100% 0 0);
}

.js:not(.about-static) .ahero__img {
  scale: 1.2;
}

.js:not(.about-static) .ahero .aline > span {
  translate: 0 108%;
}

.js:not(.about-static) .ahero [data-enter] {
  opacity: 0;
  translate: 0 14px;
}

.js:not(.about-static) .ahero__foot::before {
  scale: 0 1;
}

.js.is-entered .ahero__reveal {
  clip-path: inset(0);
  transition: clip-path 1400ms var(--ease-in-out);
}

.js.is-entered .ahero__img {
  scale: 1;
  transition: scale 2400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}

.js.is-entered .ahero .aline > span {
  translate: none;
  transition: translate 1300ms var(--ease-out) calc(820ms + var(--l, 0) * 120ms);
}

.js.is-entered .ahero [data-enter] {
  opacity: 1;
  translate: none;
  transition:
    opacity 900ms ease calc(1100ms + var(--e, 0) * 90ms),
    translate 1200ms var(--ease-out) calc(1100ms + var(--e, 0) * 90ms);
}

.js.is-entered .ahero__foot::before {
  scale: 1 1;
  transition: scale 1400ms var(--ease-out) 1150ms;
}

/* ------------------------------------------------------------------ the sheet */

/* Everything after the hero: a bone sheet that pulls itself up by a screen,
   so it starts right under the open window and rides up over the held hero. */
.about__sheet {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
  background: var(--bone);
}

@supports not (height: 100svh) {
  .about__sheet {
    margin-top: -100vh;
  }
}

/* Paper grain, as on the rest of the site. */
.about__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/textures/grain.webp") repeat;
  background-size: 160px 160px;
  opacity: 0.55;
  pointer-events: none;
}

.about__sheet > section {
  position: relative;
}

/* The sheet's shadow on the held hero (as the home page's work section): it
   only draws above the sheet's edge, and fades in as the sheet starts to
   climb (about.js), so none of it sits on the photo at rest. */
.about__shadow {
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  box-shadow: 0 -40px 90px -40px rgb(17 17 17 / 0.45);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Section heads: the label, then the title (and on some, a line to the right). */
.ahead {
  display: grid;
  gap: clamp(16px, 2.4vh, 24px);
  margin-bottom: clamp(56px, 9vh, 112px);
}

.ahead--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  align-items: end;
  gap: 24px clamp(40px, 6vw, 128px);
}

.ahead__main {
  display: grid;
  gap: clamp(16px, 2.4vh, 24px);
}

.ahead__title {
  max-width: 15ch;
  font-size: clamp(2.375rem, 1.6rem + 3.4vw, 5.25rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.ahead__aside {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* A text link: a hairline under the words, and an ink line that draws over
   it on hover while the arrow nudges on. */
.alink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
}

.alink > span {
  padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat,
    linear-gradient(rgb(17 17 17 / 0.22), rgb(17 17 17 / 0.22)) 0 100% / 100% 1px no-repeat;
  transition: background-size 600ms var(--ease-out);
}

.alink svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: translate 420ms var(--ease-out);
}

.alink:active svg {
  translate: 4px 0;
}

/* A second, outlined pill beside the ink one. */
.abtn-line {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 27px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  border: 1px solid rgb(17 17 17 / 0.3);
  border-radius: 999px;
  transition:
    color 300ms ease,
    background-color 300ms ease,
    border-color 300ms ease,
    scale 240ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.abtn-line svg {
  width: 16px;
  height: 16px;
  transition: translate 420ms var(--ease-out);
}

.abtn-line:active {
  scale: 0.97;
}

/* ------------------------------------------------------------------ 2. introduction */

.aintro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px clamp(40px, 6vw, 128px);
  padding: var(--a-section) var(--gutter);
}

.aintro__side {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* "We are Spinta." holds beside the statement while it's read (wide screens),
   on a track of its own that ends above the note, so it never rides over it. */
.aintro__track {
  flex: 1;
}

.aintro__head {
  position: sticky;
  top: calc(var(--header-compact) + clamp(24px, 5vh, 56px));
}

.aintro__title {
  margin-top: 14px;
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* A statement: its words fill in as it's read (--p, about.js). */
.afill {
  --p: 1;
  --lo: 0.16;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.032em;
  text-wrap: pretty;
}

.afill .af {
  opacity: clamp(var(--lo), calc(var(--lo) + (var(--p) * (var(--n) + 4) - var(--i)) / 4 * (1 - var(--lo))), 1);
}

.aintro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px clamp(28px, 3vw, 56px);
  margin-top: clamp(48px, 8vh, 96px);
}

.aintro__text {
  max-width: 46ch;
  margin-top: 14px;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-mute);
  text-wrap: pretty;
}

.aintro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(40px, 6vh, 64px);
}

.aintro__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 30ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-mute);
}

.aintro__mark {
  flex: none;
  width: 34px;
  height: auto;
  margin-top: 2px;
  color: var(--ink);
}

/* ------------------------------------------------------------------ 3. what we believe */

/* Ink, opening out from the gutters to the edges as it arrives (--o on its
   backdrop, about.js; without motion it's simply full width). */
.abelief {
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: clamp(44px, 8vh, 96px);
  padding: var(--a-section) var(--gutter);
  color: var(--white);
}

.abelief__bg {
  --o: 1;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  clip-path: inset(0 calc(var(--gutter) * (1 - var(--o))) round calc(var(--a-radius) * (1 - var(--o))));
}

.js:not(.about-static) .abelief__bg {
  --o: 0;
}

.abelief .alabel {
  grid-column: 1 / -1;
  color: var(--on-ink-mute);
}

.abelief .alabel__n {
  color: rgb(247 245 242 / 0.36);
}

.abelief__lead {
  grid-column: 1 / span 10;
  font-size: clamp(1.875rem, 1.1rem + 3.1vw, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.abelief__more {
  --lo: 0.22;
  grid-column: 5 / -1;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.75rem);
}

/* The sign-off: the mark draws its outline, then fills; the studio beside it. */
.asign {
  grid-column: 5 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.asign__mark {
  flex: none;
  width: clamp(56px, 4.6vw, 76px);
  height: auto;
  overflow: visible;
}

/* At rest it's simply filled; the outline only shows while it draws. */
.asign__mark use {
  fill: var(--white);
  stroke: var(--white);
  stroke-width: 34;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-opacity: 0;
}

.asign__name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.asign__where {
  margin-top: 6px;
  letter-spacing: 0.12em;
  color: var(--on-ink-mute);
}

/* ------------------------------------------------------------------ 4. the difference */

.adiff {
  padding: var(--a-section) var(--gutter);
}

.adiff__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px clamp(40px, 6vw, 128px);
}

/* The pitch holds beside the photo and the list as they go by. */
.adiff__copy {
  position: sticky;
  top: calc(var(--header-compact) + clamp(24px, 5vh, 56px));
  align-self: start;
}

.adiff__lead {
  max-width: 18ch;
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: rgb(17 17 17 / 0.34);
  text-wrap: balance;
}

.adiff__text {
  max-width: 36ch;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.adiff__side {
  display: grid;
  gap: clamp(56px, 9vh, 104px);
}

.adiff__media {
  position: relative;
}

.adiff__frame {
  aspect-ratio: 5 / 4;
  overflow: clip;
  border-radius: var(--a-radius) var(--a-corner) var(--a-radius) var(--a-radius);
  background: var(--bone-deep);
}

.adiff__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The badge: the studio's words round a circle, the mark in the middle.
   It turns slowly, faster while the page moves (about.js). */
.abadge {
  position: absolute;
  left: clamp(-64px, -3.4vw, -28px);
  bottom: clamp(-64px, -3.4vw, -28px);
  display: grid;
  place-items: center;
  width: clamp(124px, 10.5vw, 184px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
}

.abadge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}

.abadge__ring text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: currentColor;
}

.abadge__mark {
  width: 34%;
  height: auto;
  fill: currentColor;
}

/* The three ways we work, each on a ruled row. */
.apillars {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.apillar {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2vw, 32px);
  padding: clamp(26px, 4.4vh, 44px) 0;
}

.apillar::after,
.afit__row::after,
.anot__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}

.apillar__n {
  grid-row: 1 / span 2;
  padding-top: 0.55em;
  color: var(--text-faint);
}

.apillar__title {
  grid-column: 2;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.apillar__text {
  grid-column: 2;
  max-width: 46ch;
  margin-top: 14px;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: pretty;
}

.apillar__tag {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding: 9px 14px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--text-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ 5. the band */

.aband {
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: max(560px, 96svh);
  padding: var(--a-section) var(--gutter) clamp(40px, 7vh, 88px);
  overflow: clip;
  color: var(--white);
}

.aband__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background: var(--ink);
}

/* Taller than the band, so it can drift slower than the page (about.js). */
.aband__img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform;
}

.aband__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(17 17 17 / 0.74) 0%, rgb(17 17 17 / 0.3) 55%, rgb(17 17 17 / 0.38) 100%);
}

.aband .alabel {
  color: rgb(255 255 255 / 0.72);
}

.aband__title {
  margin-top: clamp(16px, 2.4vh, 28px);
  font-size: calc((100vw - 2 * var(--gutter)) / 12.9);
  font-stretch: var(--wdth-display);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  font-synthesis: none;
}

.aband__sub {
  margin-top: clamp(20px, 3.4vh, 36px);
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.8);
}

@media (max-aspect-ratio: 1/1) {
  .aband__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 8.4);
  }
}

/* ------------------------------------------------------------------ 6. who we work with */

.afit {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px clamp(40px, 6vw, 128px);
  padding: var(--a-section) var(--gutter);
}

.afit__side {
  position: sticky;
  top: calc(var(--header-compact) + clamp(24px, 5vh, 56px));
  align-self: start;
}

.afit__side .ahead__title {
  margin-top: clamp(16px, 2.4vh, 24px);
}

.afit__intro {
  max-width: 38ch;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-mute);
  text-wrap: pretty;
}

.afit__ask {
  max-width: 38ch;
  margin-top: clamp(32px, 6vh, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.afit__ask p {
  font-size: 1rem;
  line-height: 1.55;
}

.afit__ask .alink {
  margin-top: 6px;
}

.afit__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.afit__row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  padding: clamp(24px, 4vh, 38px) 0;
}

.afit__n {
  padding-top: 0.5em;
  color: var(--text-faint);
  transition: color 500ms ease;
}

.afit__name {
  font-size: clamp(1.375rem, 1.05rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.afit__text {
  max-width: 48ch;
  margin-top: 10px;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* Reading: rows the reading line hasn't reached wait quietly (about.js). */
.afit.is-reading .afit__row > * {
  transition: opacity 600ms ease;
}

.afit.is-reading .afit__row:not(.is-on) > * {
  opacity: 0.3;
}

.afit__row.is-on .afit__n {
  color: var(--ink);
}

/* ------------------------------------------------------------------ 7. what we won't do */

.anot {
  padding: var(--a-section) var(--gutter);
}

.anot__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.anot__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: 20px clamp(40px, 6vw, 128px);
  padding: clamp(32px, 6vh, 64px) 0;
}

.anot__no {
  display: block;
  overflow: clip;
  padding: 0.04em 0 0.06em;
  font-size: clamp(3.75rem, 1.6rem + 7.6vw, 10.5rem);
  font-stretch: var(--wdth-display);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  font-synthesis: none;
}

.anot__no > span {
  display: inline-block;
}

.anot__title {
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The promise, struck through: a line drawn across each line of it in turn. */
.anot__strike {
  background: linear-gradient(currentColor, currentColor) 0 56% / 100% 0.065em no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

.anot__text {
  max-width: 52ch;
  margin-top: 16px;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ 8. proof */

.aproof {
  padding: var(--a-section) var(--gutter);
  border-top: 1px solid var(--line);
}

.astats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.astat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 6vh, 64px);
  padding: clamp(24px, 3vw, 40px) clamp(16px, 1.6vw, 28px) clamp(22px, 2.6vw, 34px);
}

.astat + .astat {
  border-left: 1px solid var(--line);
}

.astat__value {
  font-size: clamp(3rem, 1.6rem + 4.4vw, 7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.astat__label {
  max-width: 18ch;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  line-height: 1.45;
  color: var(--text-mute);
}

/* The rolling figures (about.js builds them): each digit is a column of
   0 to 9 twice over, rolled up to its own place (--to) one after another (--c). */
.aroll {
  display: inline-flex;
  align-items: flex-start;
}

.aroll__col,
.aroll__ch {
  display: inline-block;
  height: 1em;
  line-height: 1;
}

.aroll__col {
  overflow: clip;
}

.aroll__strip {
  display: block;
  translate: 0 calc(var(--to) * -1em);
}

.aroll__strip > span {
  display: block;
  height: 1em;
  line-height: 1;
}

.aprods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vh, 80px) clamp(20px, 2.4vw, 44px);
  margin: clamp(64px, 11vh, 128px) 0 0;
  padding: 0;
  list-style: none;
}

.aprods__label {
  margin-top: clamp(64px, 11vh, 128px);
}

.aprods__label + .aprods {
  margin-top: clamp(24px, 4vh, 40px);
}

.aprod__frame {
  aspect-ratio: 3 / 2;
  overflow: clip;
  border-radius: var(--a-radius) var(--a-corner) var(--a-radius) var(--a-radius);
  background: var(--bone-deep);
}

.aprod__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--ease-out);
}

.aprod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.aprod__name {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.aprod__type {
  flex: none;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.aprod__text {
  max-width: 50ch;
  margin-top: 10px;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: pretty;
}

.aprod .alink {
  margin-top: 8px;
}

.aprod .alink svg {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------------ 9. next */

.anext {
  padding: var(--a-section) var(--gutter) clamp(112px, 18vh, 220px);
  border-top: 1px solid var(--line);
}

.anext__title {
  margin-top: clamp(18px, 3vh, 32px);
  font-size: calc((100vw - 2 * var(--gutter)) / 12.2);
  font-stretch: var(--wdth-display);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  font-synthesis: none;
}

.anext__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  margin-top: clamp(36px, 6vh, 64px);
}

.anext__text {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.anext__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-aspect-ratio: 1/1) {
  .anext__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 5.9);
  }
}

/* ------------------------------------------------------------------ hover */

@media (hover: hover) and (pointer: fine) {
  .alink:hover > span {
    background-size: 100% 1px, 100% 1px;
  }

  .alink:hover svg {
    translate: 4px 0;
  }

  .alink--out:hover svg {
    translate: 2px -2px;
  }

  .abtn-line:hover {
    color: var(--white);
    background: var(--ink);
    border-color: var(--ink);
  }

  .abtn-line:hover svg {
    translate: 3px 0;
  }

  /* Only a product with somewhere to go answers the pointer. */
  .aprod:has(.alink):hover .aprod__frame img {
    scale: 1.035;
  }

  .ahero__cue:hover .ahero__cue-line {
    background: rgb(255 255 255 / 0.55);
  }
}

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

@media (max-width: 1023px) {
  .aintro,
  .adiff__grid,
  .afit {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: the title, the statement and the rest, then the note. */
  .aintro__side {
    display: contents;
  }

  .aintro__note {
    order: 3;
  }

  .aintro__head,
  .adiff__copy,
  .afit__side {
    position: static;
  }

  .abelief__lead,
  .abelief__more,
  .asign {
    grid-column: 1 / -1;
  }

  .abelief__more {
    padding-left: clamp(0px, 12vw, 120px);
  }

  .asign {
    padding-left: clamp(0px, 12vw, 120px);
  }

  .astats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .astat:nth-child(3) {
    border-left: 0;
  }

  .astat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .ahead--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .abadge {
    left: 14px;
    bottom: 14px;
  }
}

@media (max-width: 719px) {
  .aintro__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .aintro__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .abelief__more,
  .asign {
    padding-left: 0;
  }

  .apillar {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .apillar__tag {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    margin-top: 16px;
  }

  .afit__row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .anot__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .astat {
    gap: 22px;
  }

  .aprods {
    grid-template-columns: minmax(0, 1fr);
  }

  .anext__actions {
    width: 100%;
  }

  .anext__actions > * {
    flex: 1 1 220px;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ reveal
   Pre-states from the first paint while JS is on (about.js adds .is-in as
   each block arrives); html.about-static switches them all off. */

.js:not(.about-static) .about [data-rv]:not(.is-in) {
  opacity: 0;
  translate: 0 26px;
}

.about [data-rv].is-in {
  transition:
    opacity 800ms ease var(--d, 0ms),
    translate 1100ms var(--ease-out) var(--d, 0ms);
}

/* Titles don't fade: their words rise out of their masks, one after another. */
.js:not(.about-static) .about [data-words]:not(.is-split) {
  opacity: 0;
}

.js:not(.about-static) .about [data-words]:not(.is-in) .aw > span {
  translate: 0 108%;
}

.about [data-words].is-in .aw > span {
  transition: translate 1100ms var(--ease-out) calc(var(--d, 0ms) + var(--w, 0) * 34ms);
}

/* Hairlines draw in under their rows. */
.js:not(.about-static) .about [data-rv]:not(.is-in).apillar::after,
.js:not(.about-static) .about [data-rv]:not(.is-in).afit__row::after,
.js:not(.about-static) .about [data-rv]:not(.is-in).anot__row::after {
  scale: 0 1;
}

.about [data-rv].is-in.apillar::after,
.about [data-rv].is-in.afit__row::after,
.about [data-rv].is-in.anot__row::after {
  transition: scale 1300ms var(--ease-out) calc(var(--d, 0ms) + 120ms);
}

/* A NO. row: it doesn't fade as a block. The NO. rises, the line strikes
   through the promise, then the words under it follow. */
.js:not(.about-static) .about .anot__row[data-rv]:not(.is-in) {
  opacity: 1;
  translate: none;
}

.js:not(.about-static) .about .anot__row:not(.is-in) .anot__no > span {
  translate: 0 104%;
}

.js:not(.about-static) .about .anot__row:not(.is-in) .anot__title {
  opacity: 0;
  translate: 0 18px;
}

.js:not(.about-static) .about .anot__row:not(.is-in) .anot__strike {
  background-size: 0% 0.065em;
}

.js:not(.about-static) .about .anot__row:not(.is-in) .anot__text {
  opacity: 0;
  translate: 0 14px;
}

.about .anot__row.is-in .anot__no > span {
  transition: translate 1100ms var(--ease-out) var(--d, 0ms);
}

.about .anot__row.is-in .anot__title {
  transition:
    opacity 700ms ease calc(var(--d, 0ms) + 120ms),
    translate 1000ms var(--ease-out) calc(var(--d, 0ms) + 120ms);
}

.about .anot__row.is-in .anot__strike {
  transition: background-size 1000ms var(--ease-in-out) calc(var(--d, 0ms) + 560ms);
}

.about .anot__row.is-in .anot__text {
  transition:
    opacity 700ms ease calc(var(--d, 0ms) + 300ms),
    translate 1000ms var(--ease-out) calc(var(--d, 0ms) + 300ms);
}

/* The figures roll up from nought as they arrive. */
.js:not(.about-static) .about .astat:not(.is-in) .aroll__strip {
  translate: 0 0;
}

.about .astat.is-in .aroll__strip {
  transition: translate 2000ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0ms) + 150ms + var(--c, 0) * 110ms);
}

/* Photos settle as their frames arrive. */
.js:not(.about-static) .about [data-rv]:not(.is-in) .adiff__frame img,
.js:not(.about-static) .about [data-rv]:not(.is-in) .aprod__frame img {
  scale: 1.1;
}

.about [data-rv].is-in .adiff__frame img,
.about [data-rv].is-in .aprod__frame img {
  transition: scale 1600ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

/* The badge pops in after its photo. */
.js:not(.about-static) .about .adiff__media:not(.is-in) .abadge {
  scale: 0.6;
  opacity: 0;
}

.about .adiff__media.is-in .abadge {
  transition:
    scale 900ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0ms) + 500ms),
    opacity 400ms ease calc(var(--d, 0ms) + 500ms);
}

/* The sign-off: the mark's outline draws, then it fills. */
.js:not(.about-static) .about .asign:not(.is-in) .asign__mark use {
  fill-opacity: 0;
  stroke-opacity: 1;
  stroke-dashoffset: 1;
}

.about .asign.is-in .asign__mark use {
  transition:
    stroke-dashoffset 1800ms var(--ease-in-out) var(--d, 0ms),
    fill-opacity 700ms ease calc(var(--d, 0ms) + 1500ms),
    stroke-opacity 700ms ease calc(var(--d, 0ms) + 1700ms);
}

@media (prefers-reduced-motion: reduce) {
  .about *,
  .about *::before,
  .about *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Phones: the site's section rhythm (--sec-top / --sec-bot / --sec-end, tokens.css),
   so every gap between two sections reads the same. */
@media (max-width: 719px) {
  .about {
    --a-section: clamp(70px, 11.5vh, 86px);
  }

  .anext {
    padding-bottom: var(--sec-end);
  }
}