/*
 * PAHAL — page sections.
 */

/* ===============================================================
 * Hero
 * =============================================================== */

.pahal-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	padding-top: calc(var(--pahal-header-height) + var(--pahal-space-l));
	padding-bottom: 0;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--pahal-pine-black);
}

.pahal-hero__media { position: absolute; inset: 0; z-index: -1; }

.pahal-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	/* The photography is warm; a touch of desaturation stops it competing
	   with terracotta and keeps the type the loudest thing on screen. */
	filter: saturate(0.86) contrast(1.04);
}

.pahal-hero__inner {
	position: relative;
	width: 100%;
	padding-bottom: var(--pahal-space-xl);
}

.pahal-hero__eyebrow { color: var(--pahal-terracotta-light); margin-bottom: var(--pahal-space-m); }

.pahal-hero__heading {
	max-width: 22ch;
	margin-bottom: var(--pahal-space-m);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-xl);
	font-weight: 500;
	line-height: var(--pahal-leading-hero);
	letter-spacing: var(--pahal-track-hero);
	color: var(--pahal-white);
}

/* One clause in italic turns a sentence into a voice. */
.pahal-hero__heading em { font-style: italic; font-weight: 400; color: var(--pahal-terracotta-light); }

.pahal-hero__text {
	max-width: 44ch;
	margin-bottom: var(--pahal-space-l);
	font-size: var(--pahal-text-lead);
	line-height: 1.55;
	color: color-mix(in srgb, var(--pahal-sand) 88%, transparent);
}

.pahal-hero__actions { gap: var(--pahal-space-xs); }

/*
 * Fact strip pinned to the foot of the hero. Divided by hairlines, it gives
 * the composition a base and stops the image running unresolved into the
 * next section.
 */
.pahal-hero__facts {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid rgb(244 239 229 / 22%);
}

@media (min-width: 48em) { .pahal-hero__facts { grid-template-columns: repeat(3, 1fr); } }

.pahal-hero__fact {
	padding: var(--pahal-space-s) 0;
	border-bottom: 1px solid rgb(244 239 229 / 12%);
}

@media (min-width: 48em) {
	.pahal-hero__fact { padding: var(--pahal-space-s) var(--pahal-space-m); border-bottom: 0; border-left: 1px solid rgb(244 239 229 / 22%); }
	.pahal-hero__fact:first-child { padding-left: 0; border-left: 0; }
}

.pahal-hero__fact-value {
	display: block;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pahal-white);
	font-variant-numeric: tabular-nums;
}

.pahal-hero__fact-label {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pahal-sand) 70%, transparent);
}

@media (max-width: 47.999em) {
	.pahal-hero { min-height: 88svh; }
	.pahal-hero__actions .pahal-btn { width: 100%; }
	.pahal-hero__facts { display: none; }
}

/* ===============================================================
 * Introduction
 * =============================================================== */

.pahal-intro__statement { margin-bottom: var(--pahal-space-m); }

.pahal-intro__body { max-width: 60ch; }

.pahal-intro__body p + p { margin-top: var(--pahal-space-s); }

/* Two-column body copy at desktop — an editorial signal, and it shortens the
   measure without shortening the column. */
@media (min-width: 64em) {
	.pahal-intro__columns { columns: 2; column-gap: var(--pahal-space-l); max-width: none; }
	.pahal-intro__columns p { margin-top: 0; margin-bottom: var(--pahal-space-s); break-inside: avoid; }
}

.pahal-intro__figure { position: relative; }

@media (min-width: 64em) {
	.pahal-intro__figure { margin-top: var(--pahal-space-l); }
	.pahal-intro__figure img { aspect-ratio: 3 / 4; object-fit: cover; }
}

/* A terracotta plate offset behind the photograph: depth without a shadow. */
@media (min-width: 64em) {
	.pahal-intro__figure::before {
		content: "";
		position: absolute;
		inset: auto auto -1.5rem -1.5rem;
		width: 60%;
		height: 55%;
		background-color: var(--pahal-terracotta-tint);
		z-index: -1;
	}
}

/* ===============================================================
 * Impact
 * =============================================================== */

.pahal-impact { position: relative; overflow: hidden; }

.pahal-impact__grid {
	display: grid;
	gap: var(--pahal-space-l);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) { .pahal-impact__grid { grid-template-columns: repeat(2, 1fr); gap: var(--pahal-space-xl); } }

.pahal-impact__note {
	display: flex;
	flex-direction: column;
	gap: var(--pahal-space-s);
	align-items: flex-start;
	margin-top: var(--pahal-space-xl);
	padding-top: var(--pahal-space-m);
	border-top: 1px solid var(--pahal-rule);
}

/* ===============================================================
 * Our Work — editorial index rows
 * =============================================================== */

.pahal-work__head { margin-bottom: var(--pahal-space-l); }

@media (min-width: 64em) {
	.pahal-work__head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--pahal-space-xl); align-items: end; }
}

/* ===============================================================
 * Donate band
 * =============================================================== */

.pahal-donate-band {
	position: relative;
	padding-block: var(--pahal-space-2xl);
	background-color: var(--pahal-pine-black);
	overflow: hidden;
}

/* Two soft plumes of colour. Cheaper than an image and it never fails to load. */
.pahal-donate-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60rem 40rem at 8% -10%, rgb(20 82 74 / 90%) 0%, transparent 62%),
		radial-gradient(50rem 36rem at 96% 110%, rgb(143 63 20 / 46%) 0%, transparent 60%);
	pointer-events: none;
}

.pahal-donate-band > * { position: relative; }

.pahal-donate-band__inner { display: grid; gap: var(--pahal-space-xl); align-items: start; }

@media (min-width: 64em) {
	.pahal-donate-band__inner { grid-template-columns: 6fr 5fr; gap: var(--pahal-space-2xl); }
}

.pahal-donate-band__heading {
	max-width: 24ch;
	margin-bottom: var(--pahal-space-s);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-l);
	font-weight: 500;
	line-height: var(--pahal-leading-display);
	letter-spacing: var(--pahal-track-display);
	color: var(--pahal-white);
}

.pahal-donate-band__heading em { font-style: italic; font-weight: 400; color: var(--pahal-terracotta-light); }

.pahal-donate-band__action {
	padding: var(--pahal-space-m);
	background-color: rgb(244 239 229 / 6%);
	border: 1px solid rgb(244 239 229 / 16%);
	backdrop-filter: blur(2px);
}

.pahal-donate-band__label {
	margin-bottom: var(--pahal-space-xs);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-terracotta-light);
}

.pahal-donate-band__amounts {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 var(--pahal-space-s);
	padding: 0;
	border: 1px solid rgb(244 239 229 / 20%);
}

.pahal-donate-band__amounts li { margin: 0; }
.pahal-donate-band__amounts li + li .pahal-amount { border-left: 1px solid rgb(244 239 229 / 20%); }

.pahal-amount {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.5rem 0.25rem;
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-s);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--pahal-sand);
	text-decoration: none;
	transition: background-color var(--pahal-duration-fast) var(--pahal-ease-out), color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-amount:hover,
.pahal-amount:focus-visible { background-color: var(--pahal-sand); color: var(--pahal-pine-black); }

.pahal-donate-band__cta { width: 100%; }

.pahal-donate-band__note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--pahal-space-s) 0 0;
	font-size: var(--pahal-text-s);
	color: color-mix(in srgb, var(--pahal-sand) 72%, transparent);
}

.pahal-donate-band__note .pahal-icon { flex: none; color: var(--pahal-terracotta-light); }

@media (max-width: 30em) { .pahal-donate-band__amounts { grid-template-columns: repeat(2, 1fr); } }

/* ===============================================================
 * Generic page header + entry content
 * =============================================================== */

.pahal-page-header {
	padding-block: var(--pahal-space-l) var(--pahal-space-m);
	background-color: var(--pahal-sand);
	border-bottom: 1px solid var(--pahal-rule);
	--pahal-surface: var(--pahal-sand);
	--pahal-surface-raised: var(--pahal-canvas);
	--pahal-hover-fill: var(--pahal-white);
}

@media (min-width: 48em) { .pahal-page-header { padding-block: var(--pahal-space-xl) var(--pahal-space-l); } }
@media (min-width: 64em) { .pahal-page-header { padding-block: var(--pahal-space-xl) var(--pahal-space-l); } }

.pahal-page-header--deep { background-color: var(--pahal-pine-deep); border-bottom-color: transparent; }

/* ---- Breadcrumb trail ------------------------------------------------ */

/*
 * Small, quiet and above everything else. It is an orientation device, not a
 * navigation feature: a visitor who needs it will find it, and one who does not
 * should barely register it.
 */
.pahal-crumbs { margin-bottom: var(--pahal-space-m); }

.pahal-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pahal-text-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-crumbs__item { margin: 0; display: flex; align-items: center; gap: 0.55rem; }

/* A slash rather than a chevron: it is punctuation, and it costs no markup. */
.pahal-crumbs__item + .pahal-crumbs__item::before {
	content: "/";
	color: var(--pahal-rule-strong);
}

.pahal-crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-crumbs a:hover { color: var(--pahal-accent-text); }
.pahal-crumbs [aria-current="page"] { color: var(--pahal-text-heading); font-weight: 500; }

/* ---- Title block ----------------------------------------------------- */

/*
 * Title and supporting text sit side by side at desktop. A display heading
 * alone on a band, with nothing beside or beneath it, is what made these
 * pages read as unfinished.
 */
.pahal-page-header__inner { display: grid; gap: var(--pahal-space-m); }

@media (min-width: 64em) {
	.pahal-page-header__inner { grid-template-columns: 7fr 5fr; gap: var(--pahal-space-xl); align-items: end; }
}

/*
 * Playfair Display has deep descenders — deeper than its 1.05 display leading
 * allows for. Without this the tail of a "p" or "g" sits directly on whatever
 * is beneath the heading, which on a banded header means it touched the band
 * edge. The padding is in em so it scales with the fluid type rather than
 * needing a correction at every breakpoint.
 */
.pahal-page-header__title {
	max-width: 26ch;
	margin-bottom: 0;
	padding-bottom: 0.06em;
	font-size: var(--pahal-text-display-l);
	line-height: var(--pahal-leading-display);
	letter-spacing: var(--pahal-track-display);
}

.pahal-page-header__aside { max-width: 46ch; }

@media (min-width: 64em) {
	.pahal-page-header__aside { padding-bottom: 0.45rem; }
}

.pahal-page-header__meta {
	margin-top: var(--pahal-space-2xs);
	font-size: var(--pahal-text-eyebrow);
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-page-header__actions { margin-top: var(--pahal-space-s); }

/* ---- Fact strip ------------------------------------------------------- */

/*
 * The same hairline device as the hero's fact strip, reused so the two read as
 * one system. Every fact here is administrator-supplied; the header renders
 * none at all rather than inventing a filler statistic.
 */
.pahal-page-header__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: var(--pahal-space-l) 0 0;
	border-top: 1px solid var(--pahal-rule);
}

@media (min-width: 40em) { .pahal-page-header__facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pahal-page-header__facts { grid-template-columns: repeat(4, 1fr); } }

.pahal-page-header__fact {
	padding: var(--pahal-space-s) 0;
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 40em) {
	.pahal-page-header__fact {
		padding-inline: var(--pahal-space-m);
		border-bottom: 0;
		border-left: 1px solid var(--pahal-rule);
	}

	.pahal-page-header__fact:first-child { padding-inline-start: 0; border-left: 0; }
}

@media (min-width: 40em) and (max-width: 63.999em) {
	.pahal-page-header__fact:nth-child(3) { padding-inline-start: 0; border-left: 0; }
	.pahal-page-header__fact:nth-child(-n+2) { border-bottom: 1px solid var(--pahal-rule); }
}

.pahal-page-header__fact-label {
	margin: 0 0 0.5rem;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-page-header__fact-value {
	margin: 0;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--pahal-text-heading);
	font-variant-numeric: tabular-nums;
}

/* ---- On-page index ----------------------------------------------------- */

/*
 * Built from the page's own section list, so it cannot advertise a section that
 * is not rendered. It scrolls horizontally on narrow screens rather than
 * wrapping into a block that pushes the content off the first screen.
 */
.pahal-page-index {
	margin-top: var(--pahal-space-l);
	padding-top: var(--pahal-space-s);
	border-top: 1px solid var(--pahal-rule);
}

.pahal-page-index__label {
	margin: 0 0 var(--pahal-space-2xs);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

.pahal-page-index__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--pahal-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pahal-page-index__list li { margin: 0; }

.pahal-page-index__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-block: 0.5rem;
	color: var(--pahal-text-heading);
	font-size: var(--pahal-text-s);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-page-index__num {
	font-size: var(--pahal-text-eyebrow);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--pahal-track-eyebrow);
	color: var(--pahal-accent-text);
}

.pahal-page-index__text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-page-index__link:hover { color: var(--pahal-accent-text); }
.pahal-page-index__link:hover .pahal-page-index__text { background-size: 100% 1px; }

/* ---- Entry content -------------------------------------------------- */

/*
 * Left-aligned, not centred.
 *
 * Every other band on this site starts its type at the container's left edge.
 * A centred reading column started roughly 130px further in, so the prose on a
 * page appeared to belong to a different grid from the sections above and below
 * it. The measure is still capped — that is what makes it readable — it just
 * hangs off the same line as everything else.
 */
.pahal-entry-content > * { margin-inline: 0; max-width: var(--pahal-width-content); }
.pahal-entry-content > .alignwide { max-width: var(--pahal-width-wide); }
.pahal-entry-content > .alignfull { max-width: none; }
.pahal-entry-content--flush > * { margin-inline: 0; }

.pahal-entry-content h2 { margin-top: var(--pahal-space-l); }
.pahal-entry-content h2:first-child { margin-top: 0; }
.pahal-entry-content h3 { margin-top: var(--pahal-space-m); }

/* ---- Empty state ----------------------------------------------------- */

/*
 * An empty listing still has to look designed. A bare "nothing published yet"
 * dropped onto the page read as a broken site rather than an empty one.
 */
.pahal-empty {
	max-width: 46ch;
	padding-block: var(--pahal-space-l) var(--pahal-space-xl);
}

.pahal-empty__rule {
	width: 3rem;
	height: 2px;
	margin-bottom: var(--pahal-space-m);
	background-color: var(--pahal-accent);
}

.pahal-empty__title {
	margin-bottom: var(--pahal-space-xs);
	font-size: var(--pahal-text-display-s);
}

.pahal-empty__text { margin-bottom: var(--pahal-space-m); color: var(--pahal-text-soft); }
.pahal-empty__actions { gap: var(--pahal-space-s); }

/* ---- Sibling navigation ---------------------------------------------- */

/* Lives in its own band now, so it brings no outer margin of its own. */
.pahal-siblings { max-width: 62rem; }

.pahal-siblings__heading {
	margin-bottom: var(--pahal-space-s);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-siblings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pahal-siblings__list li { margin: 0; }

.pahal-siblings__list a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pahal-space-xs);
	min-height: 2.75rem;
	padding-block: var(--pahal-space-2xs);
	border-bottom: 1px solid var(--pahal-rule);
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-m);
	color: var(--pahal-text-heading);
	text-decoration: none;
	transition: color var(--pahal-duration-fast) var(--pahal-ease-out);
}

/* Composited shift — see the note on .pahal-row in components.css. */
.pahal-siblings__list a > * { transition: transform var(--pahal-duration-menu) var(--pahal-ease); }
.pahal-siblings__list a:hover > :first-child { transform: translateX(0.5rem); }
.pahal-siblings__list a:hover > :last-child { transform: translateX(-0.35rem); }
.pahal-siblings__list a:hover { color: var(--pahal-accent-text); }

.pahal-siblings__list a::before {
	content: "";
	position: absolute;
	inset-block: 0.35rem auto;
	inset-inline-start: -0.7rem;
	width: 2px;
	height: calc(100% - 0.7rem);
	background-color: var(--pahal-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-siblings__list a:hover::before,
.pahal-siblings__list a:focus-visible::before { transform: scaleY(1); }

/* ---- Focus area aside -------------------------------------------------- */

.pahal-focus__icon { display: block; margin-bottom: var(--pahal-space-s); color: var(--pahal-accent); }
.pahal-focus__aside-text { font-size: var(--pahal-text-s); line-height: 1.6; color: var(--pahal-text-soft); }

@media (min-width: 64em) {
	.pahal-focus__aside { position: sticky; top: calc(var(--pahal-header-height) + var(--pahal-space-m)); }
}