/* ==========================================================================
   Manifesto / About — Figma "About - Page" 394:105 (1920 x 6530)
     hero        0     → 1396
     about-1     1396  → 2196
     about-2     2196  → 3076   (inserted; not in the Figma frame)
     about-3     3076  → 4060
     about-4     4060  → 4810
     film band   3615  → 4704
     statement   4767
     closing     5266  → 5968
     footer      5968  → 6530
   ========================================================================== */

.about { position: relative; }

/* ---- Hero (video 1925 x 1396) ------------------------------------------ */
.about__hero { height: 139.6rem; }

/* ---- Sections ----------------------------------------------------------- */
.about-1, .about-2, .about-3, .about-4 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--c-page);
}

.about-1 { height: 80rem; }
.about-2 { height: 88rem; }
.about-3 { height: 98.4rem; }
.about-4 { height: 75rem; }

/* About 4 is painted ABOVE the film band, as it is in Figma.  Its last line of
   copy ends at 3624 and the band starts at 3615, so the band's solid page-
   coloured top was shaving the descenders off "deeply connected to their place
   of origin."  Raising the section fixes that, and it is also what puts the
   plate's bottom edge over the band, which is how the Figma render draws it.
   The section's own ground moves to a ::before that stops at the band's top
   edge, so an opaque background does not swallow the video fading in below. */
.about-4 { z-index: 1; background: none; }
.about-4::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 43.5rem;               /* 3615 − 3180: where the film band begins */
  background: var(--c-page);
}

/* The whole plate is scaled on scroll (js/animations.js), frame and all, so
   the framing inside never changes — it grows from the edge that faces the
   copy, which keeps it inside the box the static layout gives it. */
.about__figure {
  position: absolute;
  overflow: hidden;
  transform-origin: 100% 0;        /* top right: grows left, away from the text */
  will-change: transform;
}

/* About 3 puts its plate to the RIGHT of the copy, so that one is anchored on
   its left edge and grows the other way. */
.about-3 .about__figure { transform-origin: 0 0; }

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

.about__heading {
  position: absolute;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-heading);
  line-height: 8rem;
  /* Figma pins the display headings to opsz 14; natural sizing is ~8% narrow. */
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--c-ink);
  white-space: nowrap;
}

.about__body {
  position: absolute;
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink);
}

/* About 1 — portrait left, copy right (Figma 592:7176) */
.about-1 .about__figure { left: 30.8rem; top: 12.4rem; width: 52rem; height: 39rem; }
.about-1 .about__heading { left: calc(50% - 4.2rem); top: 11.5rem; }
.about-1 .about__body    { left: calc(50% - 4.2rem); top: 48.5rem; width: 69.5rem; }

/* About 2 — wide plate left, copy right.  This chapter is not in the Figma
   frame; its geometry was read off the client's layout sketch, which is itself
   a render of this stylesheet with one section inserted.  Reading the KNOWN
   blocks back out of that sketch fixes its scale at 0.4923 px per design px
   with the page origin at x 66.4 — and every number below is measured against
   that.  The check is that the two chapters after it then land within a pixel
   of where the sketch draws them, which is how 88rem was settled rather than
   guessed.

   It repeats about-1's shape — plate left, heading and copy to its right — so
   it needs nothing further: the reveals key off [data-reveal-image] /
   [data-lines] / [data-reveal] and the stacked phone layout off the child
   order, and it shares both.

   The plate is the one number NOT taken literally from the sketch, and the
   sketch itself says why.  It is an unscrolled render, so every plate in it
   sits at its CSS box — chapter 1's measures 522 against a 520 box.  But these
   plates do not stay at their box: each grows 1.418x as its section scrolls
   past, away from its copy, and the size in the sketch is what the reader is
   meant to SEE.  Entered as a box, 82 x 61.8 grows to 116 x 88 — 35px off the
   left edge of the page and 128px through the floor of an 88rem section, cut
   by the section's own overflow with the next chapter's white directly under
   the cut.
   Entered as the FINISHED size instead, everything lands: 82 / 1.418 = 57.8
   wide, 61.8 / 1.418 = 43.6 tall, anchored by the top-right corner the growth
   holds fixed, and the plate arrives at exactly the box the sketch draws —
   left 30.8, bottom 75rem.  That also puts it 2.4rem past the last line of
   copy and 13rem clear of the section's foot, which is the relationship the
   other three chapters already have (about-1: -0.8 and 12.3). */
.about-2 .about__figure { left: 55rem; top: 13.2rem; width: 57.8rem; height: 43.6rem; }
.about-2 .about__heading { left: calc(50% + 23.6rem); top: 14.8rem; }
.about-2 .about__body    { left: calc(50% + 23.6rem); top: 41rem;   width: 46rem; }

/* About 3 — copy right-aligned, portrait right (Figma 592:7183) */
.about-3 .about__heading {
  left: auto;
  right: calc(50% - 2.6rem);
  top: 10rem;
  width: 83rem;
  text-align: right;
  line-height: normal;
  white-space: normal;
}
.about-3 .about__body {
  left: auto;
  right: calc(50% - 2.6rem);
  top: 65.4rem;
  width: 73.7rem;
  text-align: right;
}
.about-3 .about__figure { left: 104.1rem; top: 10rem; width: 36.4rem; height: 48.5rem; }

/* About 4 — copy right of centre, two plates left (Figma 592:7208) */
.about-4 .about__heading { left: calc(50% - 19.9rem); top: 7.4rem; }
.about-4 .about__body    { left: calc(50% - 19.9rem); top: 28.4rem; width: 74.6rem; }
.about-4 .about__figure--a { left: -57.2rem; top: 8.8rem; width: 57.0442rem; height: 57.3rem; }
.about-4 .about__figure--b { left: 34.7rem;  top: 8.8rem; width: 36rem;     height: 36.2rem; }

/* ---- Film band + fade (Figma 704:2106) --------------------------------- */
.about__film {
  position: relative;
  height: 108.9rem;
  margin-top: -31.5rem;          /* band starts at 3615, section 3 ends at 3930 */
  overflow: hidden;
  z-index: 0;
}

.about__film video {
  position: absolute;
  left: 50%;
  top: 2.7rem;                   /* 3642 − 3615 */
  width: 100vw;
  max-width: none;
  height: 106.2rem;
  transform: translateX(-50%);
  object-fit: cover;
}

/* Figma: gradient transparent → #fcfcfc at 88.839%, rotated 180° */
.about__film-fade {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 75.9rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--c-page) 0%, var(--c-page) 11.161%, rgba(252, 252, 252, 0) 100%);
  pointer-events: none;
}

/* ---- Closing statement + CTA ------------------------------------------- */
.about__statement { position: relative; height: 56.2rem; background: var(--c-page); }
.about__statement .page-statement { top: 6.3rem; }   /* 4767 − 4704 */

.about__closing { background: var(--c-page); }