/* =========================================================================
   SECTION TWO  -  THE STATEMENT
   The page's first breath of paper after the video.
   ========================================================================= */

.intro {
  position: relative;
  /* No rule here on purpose: the reel's bottom edge dissolves into this same
     paper, and a hairline would draw the seam the mask exists to hide. */
  padding-block: clamp(6rem, 15vh, 11rem);
}
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: end;
}
/* The section heading is an <h2> — the page's only <h1> is the logotype in
   the reel. A `.intro h1` rule here would silently match nothing. */
.intro .display { max-width: 15ch; }
.intro__aside { padding-bottom: 0.4rem; }
.intro__aside .lede { margin-bottom: 2.25rem; }
.intro__divider { margin-top: clamp(4rem, 10vh, 7rem); }

/* =========================================================================
   SECTION FOUR  -  THE STORY
   Sticky visual left, narrative beats right. The closing block used to hang off
   the end of this section and is now its own; the 0 bottom padding stays,
   because the last beat is a centred 82vh box and already ends on air.
   ========================================================================= */

.story {
  position: relative;
  padding-block: clamp(4rem, 9vh, 7rem) 0;
}

.story__head { margin-bottom: clamp(4rem, 9vh, 7rem); }
.story__head h2 { max-width: 17ch; margin-bottom: 1.5rem; }

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: start;
}

/* Sticky visual column */
.stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
}
.stage__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 74vh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}
.stage__frame .plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s var(--ease), transform 1.7s var(--ease);
}
.stage__frame .plate.is-live { opacity: 1; transform: scale(1); }
.plate.is-missing { opacity: 1; }
/* A plate at opacity 0 is still there and would still swallow a click meant for
   the film underneath it, so the dead ones are taken out of the hit test. */
.stage__frame .plate:not(.is-live) { pointer-events: none; }
.stage__frame .plate img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--img-filter);
}
.stage__frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--img-veil), var(--img-tint));
}

/* Narrative column */
.beats {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--rule);
}
.beats__progress {
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--sage);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease);
}

.beat {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transition: opacity 0.6s var(--ease);
}
.beat.is-live { opacity: 1; }
.beat h3 {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
  font-weight: 300;
  margin-bottom: 1.1rem;
}
.beat p {
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 38ch;
  font-size: clamp(1.03rem, 1.25vw, 1.1875rem);
}
.beat__figure { display: none; }

/* =========================================================================
   SECTION FIVE  -  THE FOUNDERS
   Two long bios on paper. Each is a portrait pinned beside its own copy, which
   is the story section's sticky read at a smaller scale — except each portrait
   sticks inside its OWN grid row instead of to one shared stage, so nothing
   has to work out which picture is live and the whole section is CSS only.
   ========================================================================= */

.founders {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: clamp(5rem, 12vh, 9rem);
}
.founders__head { margin-bottom: clamp(4rem, 9vh, 7rem); }
.founders__head h2 { max-width: 18ch; margin-bottom: 1.5rem; }

/* BOTH tracks are bounded, and that is the whole layout decision.
   An `fr` picture column made the portraits enormous — 511px wide and 639px
   tall at 1440, competing with the story's full-bleed films for weight when
   these are author photographs beside a bio. The picture track is now a small
   fixed band and the copy track is capped at its own measure, so neither grows
   with the viewport. The tracks no longer fill the wrap, which is why
   `justify-content` matters: it packs them to the start, keeping the picture
   hard against the copy instead of stranded at the far edge. */
.founder {
  display: grid;
  grid-template-columns: clamp(8rem, 14vw, 13rem) minmax(0, 32rem);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
  justify-content: start;
}
/* Alternating sides needs the TEMPLATE reversed, not just `order`. `order`
   alone moves the portrait into column 2 while the tracks keep their declared
   widths, which handed the picture the wide copy track and squeezed the bio
   into the narrow band. Source order stays picture-then-copy in both, so a
   screen reader and the collapsed phone layout read the same way down. */
.founder--flip {
  grid-template-columns: minmax(0, 32rem) clamp(8rem, 14vw, 13rem);
}
.founder--flip .founder__portrait { order: 2; }

/* Pinned clear of the fixed header, and only ever inside its own row — the
   grid is `align-items: start`, so the portrait's containing block is the row
   the copy column defines, and it releases at the next founder by itself. */
.founder__portrait {
  position: sticky;
  top: calc(var(--header-h) + clamp(1.25rem, 4vh, 2.5rem));
}
/* `.frame` already brings the crop, the paper filter and the tint; the only
   thing left is the shape, which is the portrait 4:5 the story's stage uses. */
.founder__frame { aspect-ratio: 4 / 5; }

.founder__role {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
}
.founder__name {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(2.4rem, 3.8vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 300;
  margin-bottom: 1.25rem;
}

/* The measures below are NOT capped in `ch` any more. The copy track is itself
   bounded at 32rem — about 49 characters of the body face — so a second,
   narrower cap here would only strand whitespace between the text and the
   picture on the flipped row. The track is the measure now. */

/* The one-line belief each bio opens on. Set in the display face rather than
   the body face so it reads as a standfirst and not as a first paragraph. */
.founder__lead {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.36;
  padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
  margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
  border-bottom: 1px solid var(--rule);
}

.founder__body p {
  color: var(--ink-soft);
  font-weight: 300;
  font-size: clamp(1.03rem, 1.25vw, 1.1875rem);
}
.founder__body p + p { margin-top: 1.5rem; }
/* Emphasis inside a paragraph the body face is already set light in. Bringing
   it up to full ink is the whole effect — a heavier weight would read as a
   different typeface at 300. */
.founder__body strong { color: var(--ink); font-weight: 400; }

/* The line each bio lands on, given the same sage italic the closing block's
   "handful" gets. */
.founder__close {
  margin-top: clamp(2rem, 4.5vh, 3rem);
  padding-top: clamp(2rem, 4.5vh, 3rem);
  border-top: 1px solid var(--rule);
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.44;
}
.founder__close em { font-style: italic; color: var(--sage); }

.founders__divider { margin-block: clamp(4rem, 10vh, 7rem); }

/* =========================================================================
   SECTION SIX  -  THE ENQUIRY
   The closing block. It was the tail of the story section until the founders
   were put between the two; the block itself is unchanged, and the space above
   it now comes from the founders' padding rather than a margin of its own.
   ========================================================================= */

.closing {
  padding-block: clamp(5rem, 11vh, 8rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
.closing h2 { max-width: 16ch; }
.closing .accent { color: var(--sage); font-style: italic; }
.closing__aside { padding-bottom: 0.5rem; }
.closing__aside p { margin-bottom: 2.25rem; }
/* The Instagram line under the CTA. Its own margin-bottom is zeroed so the
   .closing__aside p rule above does not open a gap below the block. */
.closing__social {
  margin-top: 1.75rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.closing__social .link { margin-left: 0.35em; }

/* --- Footer (chrome, not a section) -------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.footer__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 2.75rem;
  color: var(--ink);
}
.footer__mark .lockup { font-size: 2.9rem; }
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__meta a { text-transform: none; letter-spacing: 0.04em; font-size: 0.8125rem; }
/* Email and Instagram are one group on the left, so space-between still
   pushes the copyright to the far edge. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}
.footer a { transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--sage); }