/* ==========================================================================
   About template — about-us.html
   The page is about the four people behind the mark, so the mark is its
   architecture: the yellow petal and its formation in the masthead, the
   homepage's petals on the manifesto band, Barbara's portrait inside all four
   petals, and each contributor keeping one petal of their own.

   Everything is written in its FINAL state; start states live under
   .js-reveal [data-reveal]:not(.is-revealed). Petal drift uses `translate`
   (petal-drift) and never exceeds 14px near a face; hover and reveal moves
   use `transform`, which composes with it instead of fighting it.

    1  Masthead: the formation        5  Contributors
    2  Folio 01 and the eyebrow       6  Folio 04: the mint band
    3  Folio 02: the manifesto band   7  Folio 05: the honours roll
    4  Folio 03: Barbara's feature    8  Responsive
   ========================================================================== */

/* 1. Masthead: the formation ---------------------------------------------- */
/* A rides higher than the chassis' right edge so its lower rim clears the
   five-cell 'On this page' strip: no small text ever sits on the yellow. */
main.t-about .mast--right .mast__petal--a { top: calc(var(--header-h) - 4vw); }

/* The rest of the mark gathers at A's lower-left — the logo turned a quarter
   so A (yellow, the top petal) sits upper-right: red upper-left, navy
   lower-left, green lower-right. Sized and placed in multiples of A's own
   width, so the cluster holds its shape wherever A is capped. */
main.t-about .mast__petals { --W: min(34vw, 650px); }
main.t-about .formation { --tilt: -12deg; --dur: 24s; }
main.t-about .formation--red {
	width: calc(var(--W) * 0.30);
	right: calc(var(--W) * 0.89);
	top: calc(var(--header-h) + var(--W) * 0.28);
	background: var(--logo-red);
	--tilt: -14deg; --dx: -9px; --dy: -8px;
}
main.t-about .formation--green {
	width: calc(var(--W) * 0.34);
	right: calc(var(--W) * 0.54);
	top: calc(var(--header-h) + var(--W) * 0.54);
	background: var(--logo-green);
	--tilt: -8deg; --dx: 9px; --dy: 8px;
}
main.t-about .formation--navy {
	width: calc(var(--W) * 0.28);
	right: calc(var(--W) * 0.90);
	top: calc(var(--header-h) + var(--W) * 0.57);
	background: var(--logo-navy);
	--tilt: -16deg; --dx: -8px; --dy: 9px;
}
/* the petals settle in one after another, then part and close on 24s */
main.t-about .formation--red   { animation-delay: 0.12s, 1.02s; }
main.t-about .formation--green { animation-delay: 0.24s, 1.14s; }
main.t-about .formation--navy  { animation-delay: 0.36s, 1.26s; }

/* the running head's own small mark; a white keyline keeps its yellow petal
   legible where the running head crosses the big yellow one */
.about-mark {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
	stroke: var(--white);
	stroke-width: 2.4;
	paint-order: stroke;
}

/* 2. Folio 01 and the source eyebrow ---------------------------------------- */
main.t-about .about__eyebrow { margin: 0 0 1rem; color: var(--green-text); }
main.t-about .about__eyebrow + .folio__h { margin-top: 0; }

/* 3. Folio 02: the manifesto band -------------------------------------------
   Full-bleed pale blue, clipped on the left only so the homepage's big
   petals run off the viewport edge; they reach 17.6vw at most, clear of the
   copy, which starts at column 4 (27.9vw). */
main.t-about .manifesto {
	position: relative;
	background: #f0f3fe;
	padding-block: clamp(5rem, 8.3vw, 10rem);
	clip-path: inset(0 -100vw 0 0);
}
.manifesto__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}
main.t-about .manifesto .folio__body { grid-row: auto; }
main.t-about .manifesto__n {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 1.1rem;
	color: var(--acc-text);
}
main.t-about .manifesto__n .lz { width: 9px; }
main.t-about .manifesto .lead { margin-bottom: 0.5rem; }
main.t-about .manifesto .statement { margin-block: 0.9em 1.1em !important; }
.manifesto__cols {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
.manifesto__cols > :first-child { grid-column: 1 / 5; margin: 0; }
.manifesto__cols > :last-child { grid-column: 5 / 9; }
.manifesto__cols .body { margin: 0; }
.manifesto__pill { margin: 1.75rem 0 0; }

/* 4. Folio 03: Barbara's feature ---------------------------------------------
   The set-piece. Her portrait sits inside the mark: four saturated petals in
   #i-logo formation behind the organic mask, each 42% of the portrait. They
   drift 14px at most, so they never uncover or cross her face. */
main.t-about #team .lead { margin-bottom: 0; }
.feature {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: center;
	margin-top: clamp(4rem, 7.3vw, 8.75rem);
}
.feature__media { grid-column: 1 / 6; position: relative; isolation: isolate; }
.feature__img,
.crew__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
	background: var(--band-blue-soft);
}
.feature__petals { position: absolute; inset: 0; z-index: 0; }
.fp {
	position: absolute;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 30%;
	rotate: var(--tilt);
	transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
	animation: petal-drift var(--dur) ease-in-out infinite alternate;
}
.fp--yellow { top: -8%; right: -14%; background: var(--logo-yellow); --tilt: -12deg; --dx: 10px; --dy: -12px; --dur: 22s; }
.fp--red    { top: 30%; left: -16%;  background: var(--logo-red);    --tilt: 14deg;  --dx: -12px; --dy: 8px;  --dur: 19s; transition-delay: 0.12s; }
.fp--green  { bottom: 12%; right: -18%; background: var(--logo-green); --tilt: 8deg; --dx: 12px; --dy: 10px; --dur: 26s; transition-delay: 0.24s; }
.fp--navy   { bottom: -10%; left: -6%; background: var(--logo-navy);  --tilt: -6deg;  --dx: -8px;  --dy: 12px; --dur: 18s; transition-delay: 0.36s; }
/* on reveal the petals arrive from their logo directions and close round her */
.js-reveal .feature[data-reveal]:not(.is-revealed) .fp { opacity: 0; }
.js-reveal .feature[data-reveal]:not(.is-revealed) .fp--yellow { transform: translate(0, -48px); }
.js-reveal .feature[data-reveal]:not(.is-revealed) .fp--red    { transform: translate(-48px, 0); }
.js-reveal .feature[data-reveal]:not(.is-revealed) .fp--green  { transform: translate(48px, 0); }
.js-reveal .feature[data-reveal]:not(.is-revealed) .fp--navy   { transform: translate(0, 48px); }

.feature__text {
	grid-column: 7 / -1;
	padding-top: clamp(1.25rem, 1.9vw, 2.25rem);
	border-top: var(--rule-strong);
}
.feature__kicker { margin: 0 0 1.4rem; color: var(--acc-text); }
.feature__kicker strong { font-weight: inherit; }
.feature__name {
	margin: 0 0 0.45rem;
	font-size: var(--h2);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.feature__role { margin: 0 0 clamp(1.5rem, 2.5vw, 3rem); font-size: var(--lead); color: var(--body); }
.feature__bio { margin: 0; max-width: 38em; font-size: var(--read); line-height: 1.65; color: var(--body); }

/* 5. Contributors -------------------------------------------------------------
   Three profiles, three columns, each under its own ruled top. One petal in
   the member's colour peeks from behind the bottom-left of the portrait. It
   holds still (the feature's four already move in this viewport); pointing
   at a profile slides it out and draws the member colour along the rule. */
.crew {
	list-style: none;
	margin: clamp(5rem, 6.25vw, 7.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(3rem, 4.2vw, 5rem) var(--card-gap);
}
.crew__m {
	position: relative;
	padding-top: clamp(1.5rem, 2.1vw, 2.5rem);
	border-top: var(--rule-strong);
	transition-delay: calc(var(--i, 0) * 100ms);
}
.crew__m::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}
.crew__m:hover::before { transform: none; }
.crew__photo {
	position: relative;
	isolation: isolate;
	width: 78%;
	/* deep enough that the petal (and its hover slide) never reaches the name */
	margin: 0 0 clamp(2.75rem, 3.6vw, 4.25rem) 8%;
}
.crew__petal {
	position: absolute;
	z-index: 0;
	left: -12%;
	bottom: -3%;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--c);
	rotate: 12deg;
	transition: transform 0.4s var(--ease-out);
}
.crew__m:hover .crew__petal { transform: translate(-12px, 6px) rotate(6deg); }
.crew__name { margin: 0 0 0.5rem; font-size: var(--h3); line-height: 1.15; letter-spacing: -0.01em; }
.crew__role { margin: 0 0 1.25rem; color: var(--body); line-height: 1.5; }
.crew__bio { font-size: var(--small); line-height: 1.65; color: var(--body); }
.crew__bio p { margin: 0; }
.crew__bio p + p { margin-top: 0.9em; }

/* 6. Folio 04: the mint band -------------------------------------------------
   A giant green petal bleeds off the right edge in columns 10-12; the copy
   keeps to columns 4-9 and the folio rule stops at column 9, so the petal
   owns the margin outright. The band takes the manifesto's deeper padding,
   which lets the tilted petal sit whole inside it. Clipped sideways only,
   so it never widens the page. */
main.t-about .folio--mint {
	position: relative;
	overflow-x: clip;
	padding-block: clamp(5rem, 8.3vw, 10rem);
	background: var(--card-green);
	--acc: var(--logo-green);
	--acc-pale: #cfeec4;
	--acc-text: #2c6f22;
}
main.t-about .folio--mint .folio__grid { position: relative; z-index: 1; }
main.t-about .folio--mint .folio__grid::before { grid-column: 1 / 10; }
.mint__petal {
	--s: clamp(260px, 36vw, 700px);
	position: absolute;
	z-index: 0;
	right: calc(var(--s) * -0.34);
	top: 50%;
	margin-top: calc(var(--s) * -0.5);
	width: var(--s);
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--logo-green);
	rotate: -12deg;
	animation: petal-drift 24s ease-in-out infinite alternate;
	--dx: -14px; --dy: 18px;
}

/* 7. Folio 05: the honours roll ----------------------------------------------
   The awards as a roll of honour: a white tile holding the mark, a petal
   peeking from behind its corner, the name, then the site.json lines. */
.honours { list-style: none; margin: clamp(1rem, 2vw, 2.5rem) 0 0; padding: 0; border-bottom: var(--rule); }
.honours__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: center;
	padding: 2.5rem 0;
}
.honours__row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: var(--rule-strong);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.honours__media { grid-column: 1 / 4; position: relative; isolation: isolate; }
.honours__petal {
	position: absolute;
	z-index: 0;
	top: -24px;
	left: -24px;
	width: 96px;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--c);
	rotate: -10deg;
	transition: rotate 0.7s var(--ease-out) 0.15s, opacity 0.7s var(--ease-out) 0.15s;
}
.honours__row:nth-child(3n + 2) .honours__petal { rotate: 12deg; }
.honours__row:nth-child(3n + 3) .honours__petal { rotate: -4deg; }
.honours__tile {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	padding: 2rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color 0.2s ease, opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}
.honours__tile picture { display: contents; }
.honours__tile img { width: 100%; max-width: 206px; height: auto; }
.honours__row:hover .honours__tile { border-color: var(--green); }
.honours__h {
	grid-column: 4 / 8;
	display: flex;
	align-items: baseline;
	gap: 0.65em;
	margin: 0;
	padding-right: 1.5rem;
	font-size: var(--h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.honours__h .lz { flex: none; translate: 0 -0.12em; }
.honours__lines { grid-column: 8 / -1; }
.honours__lines p { margin: 0; font-size: var(--read); line-height: 1.55; color: var(--ink); }
.honours__lines p + p { margin-top: 0.75em; }
.js-reveal .honours__row[data-reveal]:not(.is-revealed)::before { transform: scaleX(0); }
.js-reveal .honours__row[data-reveal]:not(.is-revealed) .honours__tile { opacity: 0; translate: 0 24px; }
.js-reveal .honours__row[data-reveal]:not(.is-revealed) .honours__petal { opacity: 0; rotate: 8deg; }
.js-reveal .honours__row[data-reveal]:not(.is-revealed):nth-child(3n + 2) .honours__petal { rotate: 30deg; }
.js-reveal .honours__row[data-reveal]:not(.is-revealed):nth-child(3n + 3) .honours__petal { rotate: 14deg; }

/* 8. Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* A collapses to the chassis' top-right corner (42vw); the formation
	   follows it, tucked into the H1's padding above the title. It hangs from
	   the running-head rule (header + the masthead's top padding + 4rem), not
	   from the header: only the big bleeding A is ever crossed by the rule,
	   even at the top of red's drift. Green and navy keep their offsets from
	   red (9vw, 10.5vw), so the cluster holds its shape. */
	main.t-about .mast__petals { --W: 42vw; --rule-foot: calc(var(--header-h) + clamp(1.5rem, 3.1vw, 3.75rem) + 4rem); }
	main.t-about .formation--red   { right: calc(var(--W) * 0.80); top: var(--rule-foot); }
	main.t-about .formation--green { right: calc(var(--W) * 0.42); top: calc(var(--rule-foot) + 9vw); }
	main.t-about .formation--navy  { right: calc(var(--W) * 0.84); top: calc(var(--rule-foot) + 10.5vw); }

	.feature { display: block; }
	.feature__media { max-width: 520px; margin: 0 auto clamp(4rem, 9vw, 5.5rem); }
	.crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	/* the petals shrink to a yellow and green pair at the top-left, off the
	   edge and above the copy, which runs in one column */
	main.t-about .manifesto .about__petals { display: block; }
	main.t-about .manifesto .about__petals .p-red,
	main.t-about .manifesto .about__petals .p-blue { display: none; }
	main.t-about .manifesto .about__petals .p-yellow { width: 24vw; left: -8vw; top: 2rem; }
	main.t-about .manifesto .about__petals .p-green { width: 17vw; left: 11vw; top: calc(2rem + 7vw); }
	main.t-about .manifesto__grid { padding-top: calc(21vw + 1rem); }
	.manifesto__cols { display: block; }
	.manifesto__cols > :last-child { margin-top: 1.25rem; }

	/* the mint petal becomes a corner at the top-right, beside the numeral and
	   above the heading; the rule stops short of it */
	.mint__petal { --s: min(40vw, 11rem); right: calc(var(--s) * -0.3); top: 0.5rem; margin-top: 0; }
	main.t-about .folio--mint .folio__grid::before { margin-right: calc(min(40vw, 11rem) * 0.8); }

	.honours__row { display: block; padding: 2rem 0; }
	.honours__media { max-width: 360px; margin-bottom: 1.5rem; }
	.honours__petal { width: 64px; top: -16px; left: -16px; }
	.honours__h { padding-right: 0; margin-bottom: 0.75rem; }
}

@media (max-width: 640px) {
	/* only yellow and navy show: the navy tucks under A's lower-left, below
	   the running head (which stacks to two lines here, so its rule sits a
	   fixed ~5.4rem under the masthead's 1.5rem top padding) and above the
	   H1's first line */
	main.t-about .mast__petals { --W: 56vw; }
	main.t-about .formation--red,
	main.t-about .formation--green { display: none; }
	main.t-about .formation--navy { width: calc(var(--W) * 0.3); right: calc(var(--W) * 0.72); top: calc(var(--header-h) + 1.5rem + 5.75rem); }

	.feature__media { width: 78vw; }
	.fp { width: 36%; }
	.fp--red,
	.fp--green { display: none; }
	.feature__name { font-size: 1.625rem; }
	.crew { grid-template-columns: 1fr; }
	.crew__photo { width: 72%; }
}