/*
 * About page — one-off layout (loaded only on /about/, after theme.css).
 */

/* Hero: the neon sign fades into the black band (its photo edge would
   otherwise read as a hard rectangle against the black). */
.ao-about-hero__neon img {
	display: block;
	width: 100%;
	-webkit-mask-image: radial-gradient(ellipse 72% 78% at 45% 50%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 78% at 45% 50%, #000 58%, transparent 100%);
}

.ao-about-hero .ao-arrow {
	font-style: normal;
}

/* The designs' ▶▶▶ in the hero are larger than the link text, so their
   slot (and the hang) is wider. */
.ao-about-hero .ao-arrow {
	--ao-arrow-hang: 3.9em;
}

.ao-about-hero .ao-arrow::before {
	font-size: 1.45em;
	vertical-align: -0.12em;
}

.ao-about-hero .ao-arrow a,
.ao-about-cta__book a,
.is-style-band-black .ao-arrow--teal a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ao-about-hero .ao-about-hero__links a {
	color: var(--wp--preset--color--magenta);
}

.ao-about-hero .ao-arrow a:hover,
.ao-about-hero .ao-arrow a:focus-visible,
.is-style-band-black .ao-arrow a:hover,
.is-style-band-black .ao-arrow a:focus-visible {
	text-decoration: underline;
}

.ao-about-hero .ao-about-hero__links {
	margin-top: var(--wp--preset--spacing--60);
}

/* Side by side, as in the PDF: a taller hero, the art running off the left
   edge (.ao-bleed-start) and on under the copy's gap, faded on the right only,
   and the arrow links indented past the heading. Keep the image's
   metadata.sizes in step with its width (about 54vw). */
@media (min-width: 782px) {
	.ao-about-hero > .wp-block-columns {
		min-height: calc(clamp(560px, 48vw, 700px) - 2 * var(--wp--preset--spacing--80));
	}

	.ao-about-hero .wp-block-image.ao-about-hero__neon {
		margin-inline-end: -3rem;
	}

	.ao-about-hero__neon img {
		aspect-ratio: 1.56;
		height: auto;
		object-fit: cover;
		object-position: 40% 50%;
		-webkit-mask-image: radial-gradient(ellipse 92% 80% at 18% 50%, #000 56%, transparent 100%);
		mask-image: radial-gradient(ellipse 92% 80% at 18% 50%, #000 56%, transparent 100%);
	}

	.ao-about-hero .ao-arrow {
		margin-inline-start: clamp(0px, 23vw - 165px, 166px);
	}

	.ao-about-hero .ao-about-hero__links {
		margin-top: var(--wp--preset--spacing--70);
	}
}

/* Label-less accent squares: placed at the same height as a labelled eyebrow
   square (centered on where an xl label would sit), and the group is only as
   tall as the square reaches, so the copy starts just below it. */
.ao-about-sq {
	height: calc(var(--wp--preset--font-size--xl) / 2 + var(--wp--custom--square--size) / 2);
	margin-block-end: 0;
}

.ao-about-sq::before {
	margin-top: calc(var(--wp--preset--font-size--xl) / 2 - var(--wp--custom--square--size) / 2);
}

.ao-about-sq + .wp-block-columns {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Story copy: paragraphs sit closer together than the global block gap, as
   in the PDF, and from 782px the copy is indented a little past the eyebrow
   label's start. */
.ao-about-story > .wp-block-columns > .wp-block-column:first-child > :is(p, ul):not(:first-child),
.ao-about-sq + .wp-block-columns > .wp-block-column:first-child > :is(p, ul):not(:first-child) {
	margin-block-start: 0.75em;
}

@media (min-width: 782px) {
	.ao-about-story > .wp-block-columns > .wp-block-column:first-child,
	.ao-about-sq + .wp-block-columns > .wp-block-column:first-child {
		padding-inline-start: clamp(0px, 2vw, 28px);
	}
}

/* Portraits stand on the bottom edge of their band, like the PDF's cutouts.
   The figure is sized (not full-column) so the ▶▶▶ overlay tracks the photo;
   keep the images' metadata.sizes in step with these widths. From 782px the
   narrow portrait column lends the photo the right-hand gutter, so it runs to
   the screen edge as in the PDF (the band's overflow-x:clip absorbs any
   scrollbar overshoot of the 100vw gutter). */
.wp-block-column > .ao-about-portrait {
	--ao-gutter: max(var(--wp--style--root--padding-right), (100vw - var(--wp--style--global--wide-size)) / 2);
	position: relative;
	width: min(340px, 100% + var(--ao-gutter));
	margin-block: 0 calc(-1 * var(--wp--preset--spacing--80));
	margin-inline: auto calc(-1 * var(--ao-gutter));
}

.ao-about-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* Decorative orange ▶▶▶ over the lower edge of the portrait. */
.ao-about-portrait:not(.ao-about-portrait--plain)::after {
	content: "\25B6\25B6\25B6";
	position: absolute;
	right: 14%;
	bottom: 12%;
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	letter-spacing: -0.12em;
	color: var(--wp--preset--color--orange);
	pointer-events: none;
}

.ao-about-question {
	margin-block-start: var(--wp--preset--spacing--50);
	text-wrap: balance;
}

.ao-about-thread {
	padding-inline-start: 1.6em;
}

.ao-about-thread li + li {
	margin-top: 0.15em;
}

/* Common-thread triangle (overrides the shared .ao-tri, which Programs also
   uses): about 320px of triangle, light slab labels, a smaller outcome. */
/* The corner labels hang outward from the triangles' corners; let them
   overflow the viewBox when they are sized up on narrower screens. */
.ao-about-tri svg {
	max-width: 440px;
	overflow: visible;
}

.ao-about-tri .ao-tri__lbl {
	font-weight: 400;
	font-size: 16px;
}

.ao-about-tri .ao-about-tri__mid {
	font-size: 18px;
}

/* Side by side below 1200px the triangle's column is narrow and the SVG
   scales its labels down with it; size them up to keep ~14px on screen. */
@media (min-width: 782px) and (max-width: 1023px) {
	.ao-about-tri .ao-tri__lbl {
		font-size: 25px;
	}

	.ao-about-tri .ao-about-tri__mid {
		font-size: 26px;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.ao-about-tri .ao-tri__lbl {
		font-size: 19px;
	}

	.ao-about-tri .ao-about-tri__mid {
		font-size: 20px;
	}
}

.ao-about-tri .ao-tri__out {
	margin-top: 0;
	font-size: clamp(1.5rem, 2vw, 1.625rem);
	line-height: 1.1;
}

/* Explicit width: the shared cover render carries transparent margins, so
   210px shows a ~170px book, as in the PDF. Keep metadata.sizes in step. */
.ao-about-book img {
	width: min(210px, 55vw);
	height: auto;
}

.ao-about-cta .ao-arrow {
	font-size: var(--wp--preset--font-size--lg);
	font-style: normal;
}

/* CTA, side by side: the PDF sets the copy about 60px from the screen edge
   and the book and links further right, so the columns take half the
   centering gutter on each side. */
@media (min-width: 782px) {
	.ao-about-cta.has-global-padding {
		padding-inline: min(var(--wp--style--root--padding-left), 60px);
	}

	.ao-about-cta > .wp-block-columns.alignwide {
		max-width: calc(var(--wp--style--global--wide-size) + max(var(--wp--style--root--padding-left), (100vw - var(--wp--style--global--wide-size)) / 2));
	}

	.ao-about-cta .wp-block-column:first-child > p {
		max-width: 23em;
	}
}

/* Stacked (mobile): portraits centre beneath the copy, still standing on the
   band's bottom edge, capped in height so they don't fill the screen; the
   figure hugs the photo. The ▶▶▶ overlay is dropped at this size. */
@media (max-width: 781px) {
	.wp-block-column > .ao-about-portrait {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	.ao-about-portrait img {
		width: auto;
		max-height: min(42svh, 320px);
	}

	.ao-about-portrait:not(.ao-about-portrait--plain)::after {
		content: none;
	}

	.ao-about-hero__neon img {
		width: auto;
		max-height: 34svh;
		margin-inline: auto;
	}

	.ao-about-hero .ao-about-hero__links {
		margin-top: var(--wp--preset--spacing--40);
	}

	/* The label-less squares shrink and tuck into the band's top padding, so
	   the copy isn't pushed down by an empty strip. */
	.ao-about-sq {
		--wp--custom--square--size: 2rem;
		height: 0;
	}

	.ao-about-sq::before {
		margin-top: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--80));
	}

	.ao-about-cta .ao-arrow {
		font-size: var(--wp--preset--font-size--base);
	}

	/* The triangle scales down with the screen; keep its labels legible. */
	.ao-about-tri .ao-tri__lbl {
		font-size: 18px;
	}

	.ao-about-tri .ao-about-tri__mid {
		font-size: 19px;
	}
}

/* Teal fails contrast on the light-gray band (2.5:1); a deeper shade of the
   same teal reads at 4:1, which passes AA only because this heading is large
   text (3:1). Don't reuse it for body copy. The hex is the fallback for
   browsers without color-mix(). */
.ao-about-question.has-teal-color {
	color: #007373 !important;
	color: color-mix(in srgb, var(--wp--preset--color--teal) 75%, var(--wp--preset--color--black)) !important;
}