/* About · the founding story as an editorial feature (v7).
   The story is one flow of h2 / p / ul inside section.prose. Each h2 opens a chapter; its ::before is the
   chapter's photograph, floated beside the text on wide screens (sides alternate) and stacked above it on
   phones. A clearing ::after on the last element of each chapter keeps chapters apart, whatever the text
   length. "Why Hedgehog" and "What we believe" sit on one full-bleed navy band. Text and order untouched. */

body[data-page="about"] {
  --hero: url("../img/photos/nyc-sunrise.jpg"); --hero-pos: 50% 62%;
  --cta: url("../img/photos/hero-call.jpg"); --cta-pos: 50% 62%;
}

/* ── the story column ── */
body[data-page="about"] .prose { container: story / inline-size }   /* the standard section padding sets the gap above the closing band */
body[data-page="about"] .prose > * { --gap: clamp(3.4rem, 7cqw, 6rem); --pad: clamp(1.8rem, 3.4cqw, 2.8rem) }

/* chapter heads: a hairline across the column, then the photograph and the headline */
body[data-page="about"] .prose > h2 {
  position: relative; clear: both;
  margin: var(--gap) 0 0; padding-top: var(--pad);
  font-size: clamp(2rem, 4.4cqw, 3.15rem); line-height: 1; letter-spacing: -.04em; color: var(--fg);
}
body[data-page="about"] .prose > h2:first-child { margin-top: 0; padding-top: 0 }
body[data-page="about"] .prose > h2::after { content: ""; position: absolute; left: 0; top: 0; width: 100cqw; border-top: 1px solid var(--line) }
body[data-page="about"] .prose > h2:first-child::after { border-top: 0 }

/* chapter photographs */
body[data-page="about"] .prose > h2::before {
  content: ""; display: block; aspect-ratio: 3 / 2; margin-bottom: 1.5rem;
  border-radius: var(--radius);
  background: var(--navy) var(--img, none) no-repeat; background-size: cover; background-position: var(--img-pos, 50% 50%);
}
body[data-page="about"] .prose > h2:nth-of-type(1) { --img: url("../img/photos/about-breakfast-sm.jpg"); --img-pos: 50% 48% }
body[data-page="about"] .prose > h2:nth-of-type(2)::before { display: none }
body[data-page="about"] .prose > h2:nth-of-type(3) { --img: url("../img/photos/fibre-bundle-sm.jpg"); --img-pos: 40% 50% }
body[data-page="about"] .prose > h2:nth-of-type(4) { --img: url("../img/photos/about-scales-sm.jpg"); --img-pos: 66% 40% }
body[data-page="about"] .prose > h2:nth-of-type(5) { --img: url("../img/photos/about-helm.jpg"); --img-pos: 40% 58% }
body[data-page="about"] .prose > h2:nth-of-type(6) { --img: url("../img/photos/about-hedgehog-sm.jpg"); --img-pos: 52% 46% }
body[data-page="about"] .prose > h2:nth-of-type(7)::before { display: none }
body[data-page="about"] .prose > h2:nth-of-type(8) { --img: url("../img/photos/about-team-sm.jpg"); --img-pos: 50% 58% }

/* body copy */
body[data-page="about"] .prose > :is(p, ul) { max-width: 40rem; margin: 1.05rem 0 0; font-size: clamp(1.1rem, 1.9cqw, 1.24rem); line-height: 1.64 }
body[data-page="about"] .prose > h2 + :is(p, ul) { margin-top: 1.5rem }
body[data-page="about"] .prose > :is(p, ul):has(+ h2)::after,
body[data-page="about"] .prose > :last-child::after { content: ""; display: block; clear: both }

/* the opening: a serif lede with a drop initial, then the club's rule as a pull line */
body[data-page="about"] .prose > h2:first-child + p { font-size: clamp(1.22rem, 2.1cqw, 1.42rem); line-height: 1.55; color: var(--fg) }
body[data-page="about"] .prose > h2:first-child + p::first-letter {
  float: left; font-family: var(--display); font-weight: 700; color: var(--red);
  font-size: 4.1em; line-height: .78; margin: .1em .12em 0 -.02em;
}
body[data-page="about"] .prose > h2:first-child + p + p {
  margin-top: 2rem;
  font-style: italic; font-size: clamp(1.36rem, 2.5cqw, 1.7rem); line-height: 1.36; letter-spacing: -.005em; color: var(--fg);
}
body[data-page="about"] .prose > h2:first-child + p + p::before { content: ""; display: block; width: 2.6rem; height: 3px; margin-bottom: 1.1rem; background: var(--red) }
/* "That is Hedgehog Capital." closes Why now as a statement */
body[data-page="about"] .prose > p:has(+ h2:nth-of-type(4)) { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; color: var(--fg); margin-top: 1.4rem }

/* Twenty years: London and New York as a diptych after the text */
body[data-page="about"] .prose > h2:nth-of-type(2) + p { display: flex; flex-wrap: wrap; column-gap: .8rem }
body[data-page="about"] .prose > h2:nth-of-type(2) + p::before,
body[data-page="about"] .prose > h2:nth-of-type(2) + p::after {
  content: ""; order: 2; flex: 0 0 calc(50% - .45rem); aspect-ratio: 1 / 1; margin-top: 1.8rem;
  border-radius: var(--radius); background: var(--navy) no-repeat; background-size: cover;
}
body[data-page="about"] .prose > h2:nth-of-type(2) + p::before { background-image: url("../img/photos/london-night-sm.jpg"); background-position: 58% 50% }
body[data-page="about"] .prose > h2:nth-of-type(2) + p::after { order: 3; clear: none; background-image: url("../img/photos/nyc-manhattan-night-sm.jpg"); background-position: 47% 50% }

/* ── Why Hedgehog and What we believe: one full-bleed navy band ── */
body[data-page="about"] .prose > :is(h2:nth-of-type(6), h2:nth-of-type(6) + p, h2:nth-of-type(7), h2:nth-of-type(7) + ul) {
  border-image: linear-gradient(var(--navy), var(--navy)) fill 0 / 0 / 0 100vw;
  max-width: none;
}
body[data-page="about"] .prose > h2:nth-of-type(6) { margin-top: var(--gap); padding-top: clamp(3.4rem, 7cqw, 5.6rem); color: #fff }
body[data-page="about"] .prose > h2:nth-of-type(6)::after { border-top: 0 }
body[data-page="about"] .prose > h2:nth-of-type(6) + p {
  margin-top: 0; padding: 1.5rem 0 clamp(3rem, 6cqw, 5rem);
  font-size: clamp(1.32rem, 2.5cqw, 1.72rem); line-height: 1.42; color: #E4E8EF;
}
body[data-page="about"] .prose > h2:nth-of-type(7) { margin-top: 0; padding-top: clamp(2.4rem, 4cqw, 3.2rem); color: #fff }
body[data-page="about"] .prose > h2:nth-of-type(7)::after { border-top-color: rgba(255, 255, 255, .22) }
body[data-page="about"] .prose > h2:nth-of-type(7) + ul {
  list-style: none; margin-top: 0; padding: clamp(1.8rem, 3cqw, 2.4rem) 0 clamp(3.6rem, 7cqw, 5.8rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
body[data-page="about"] .prose > h2:nth-of-type(7) + ul li {
  border-top: 1px solid rgba(255, 255, 255, .22); padding: 1.2rem 0 1.4rem;
  background: linear-gradient(#E0646B, #E0646B) 0 -1px / 2.2rem 3px no-repeat;
  font-size: 1.04rem; line-height: 1.55; color: #B9C2D1;
}
body[data-page="about"] .prose > h2:nth-of-type(7) + ul strong {
  display: block; margin-bottom: .45rem;
  font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.015em; line-height: 1.2; color: #fff;
}

/* The team: a closing card, photograph and invitation */
body[data-page="about"] .prose > h2:nth-of-type(8) {
  background: var(--white); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  padding: clamp(1rem, 2.2cqw, 1.6rem) clamp(1rem, 2.2cqw, 1.6rem) 0;
}
body[data-page="about"] .prose > h2:nth-of-type(8)::after { border-top: 0 }
body[data-page="about"] .prose > h2:nth-of-type(8)::before { border-radius: calc(var(--radius) - 4px) }
body[data-page="about"] .prose > h2:nth-of-type(8) + p {
  max-width: none; margin-top: 0;
  background: var(--white); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  padding: .9rem clamp(1rem, 2.2cqw, 1.6rem) clamp(1.2rem, 2.2cqw, 1.6rem);
  color: var(--fg);
}

/* ── close: Home's band — the call stacked on the left, the footer straight after (v7.css closes the gaps) ── */
body[data-page="about"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="about"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="about"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="about"] .cta-band { min-height: 0; padding: 4.4rem 1rem; background-image: linear-gradient(90deg, rgba(11, 19, 34, .92), rgba(11, 19, 34, .74)), var(--cta) }
  body[data-page="about"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); text-wrap: balance }   /* one line at 390 */
  body[data-page="about"] .cta-band p { font-size: 1.12rem }
}

/* ── phones: chapter photos stacked above their heads ── */
@container story (max-width: 699px) {
  body[data-page="about"] .prose > h2:first-child + p::first-letter { font-size: 3.6em }
}

/* ── tablet and up: photographs beside the text, sides alternating ── */
@container story (min-width: 700px) {
  body[data-page="about"] .prose > * {
    --g: clamp(2rem, 5cqw, 4.5rem);
    --t: min(40rem, 58cqw);
    --p: calc(100cqw - var(--t) - var(--g));
    --x: calc(var(--p) + var(--g));
    --plate: clamp(300px, 40cqw, 540px);
  }
  body[data-page="about"] .prose > h2::before { margin-bottom: 0 }

  /* photo left: The Breakfast Club, Paid only when we perform, The team */
  body[data-page="about"] .prose > h2:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(8))::before { float: left; width: var(--p); margin-right: var(--g) }
  /* photo right: Why now, Why Hedgehog */
  body[data-page="about"] .prose > h2:is(:nth-of-type(3), :nth-of-type(6))::before { float: right; width: var(--p); margin-left: var(--g) }

  body[data-page="about"] .prose > h2:nth-of-type(1)::before { aspect-ratio: 1 / 1 }
  body[data-page="about"] .prose > h2:nth-of-type(3)::before { aspect-ratio: 4 / 3.4 }
  body[data-page="about"] .prose > h2:nth-of-type(4)::before { aspect-ratio: 1 / .9 }
  body[data-page="about"] .prose > h2:nth-of-type(6)::before { aspect-ratio: 4 / 3 }

  /* text columns, chapter by chapter (later rules take over for later chapters) */
  body[data-page="about"] .prose > h2:nth-of-type(1) ~ :is(p, ul) { margin-left: var(--x); margin-right: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(2) ~ :is(p, ul) { margin-left: var(--x); margin-right: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(3) ~ :is(p, ul) { margin-left: 0; margin-right: var(--x) }
  body[data-page="about"] .prose > h2:nth-of-type(4) ~ :is(p, ul) { margin-left: var(--x); margin-right: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(5) ~ :is(p, ul) { margin-left: var(--x); margin-right: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(6) ~ :is(p, ul) { margin-left: 0; margin-right: var(--x) }
  body[data-page="about"] .prose > h2:nth-of-type(7) ~ :is(p, ul) { margin-left: 0; margin-right: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(8) ~ :is(p, ul) { margin-left: var(--x); margin-right: 0 }

  /* Twenty years: the head sits in the left column beside its paragraph; the diptych runs full width */
  body[data-page="about"] .prose > h2:nth-of-type(2) { float: left; width: var(--p); margin-right: var(--g) }
  body[data-page="about"] .prose > h2:nth-of-type(2) + p { margin-top: calc(var(--gap) + var(--pad)) }
  body[data-page="about"] .prose > h2:nth-of-type(2) + p::before { margin-left: calc(-1 * var(--x)); flex-basis: calc(50cqw - .45rem); aspect-ratio: 3 / 2 }
  body[data-page="about"] .prose > h2:nth-of-type(2) + p::after { flex-basis: calc(50cqw - .45rem); aspect-ratio: 3 / 2 }

  /* Who is in charge: a full-bleed plate, then the head in the left column beside its text */
  body[data-page="about"] .prose > h2:nth-of-type(5) { float: left; width: var(--p); margin-right: var(--g); padding-top: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(5)::after { border-top: 0 }
  body[data-page="about"] .prose > h2:nth-of-type(5)::before {
    width: 100vw; height: var(--plate); aspect-ratio: auto; border-radius: 0;
    margin: 0 0 clamp(1.8rem, 3cqw, 2.6rem) calc((100cqw - 100vw) / 2);
  }
  body[data-page="about"] .prose > h2:nth-of-type(5) + p { margin-top: calc(var(--gap) + var(--plate) + clamp(1.8rem, 3cqw, 2.6rem)) }

  /* the team card: text beside the photograph */
  body[data-page="about"] .prose > h2:nth-of-type(8)::before { aspect-ratio: 16 / 9 }
  body[data-page="about"] .prose > h2:nth-of-type(8) + p { margin-left: 0; padding-left: calc(clamp(1rem, 2.2cqw, 1.6rem) + var(--x)) }

  /* the band: What we believe as five ruled columns */
  body[data-page="about"] .prose > h2:nth-of-type(7) + ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem }
}
/* two columns: the fifth belief runs the full width rather than standing alone */
@container story (min-width: 700px) and (max-width: 999px) {
  body[data-page="about"] .prose > h2:nth-of-type(7) + ul li:last-child:nth-child(odd) { grid-column: 1 / -1 }
}
@container story (min-width: 1000px) {
  body[data-page="about"] .prose > h2:nth-of-type(7) + ul { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.8rem }
  body[data-page="about"] .prose > h2:nth-of-type(7) + ul li { padding-right: .4rem }
}