/* Secondary pages */

.pg {
	--hair: rgba(168, 126, 48, 0.28);
	--hair-soft: rgba(168, 126, 48, 0.16);
	--line: rgba(20, 16, 11, 0.14);
	--line-soft: rgba(20, 16, 11, 0.08);
	position: relative;
	color: var(--ink);
	font-family: var(--font-body);
}

.pg h1,
.pg h2,
.pg h3,
.pg h4 {
	margin: 0;
}

.pg p {
	margin: 0;
}

/* Shared */
.pg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-eyebrow::before {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.pg-eyebrow.center {
	justify-content: center;
}

.pg-eyebrow.center::after {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

/*
 * background-clip: text paints nothing outside the border box, so at line-height 1.1
 * the descenders hang past it and come out sheared. The padding grows the paint area,
 * the negative margin puts the layout back, and the stops hold the ramp on the glyphs.
 */
.pg-gold-h {
	--bleed: 0.16em;
	padding-block: var(--bleed);
	background: linear-gradient(180deg, var(--ink) 39%, #5a3a18 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Prose italic only — headings take the accent treatment from base.css. */
.pg :not(h1, h2, h3)>em {
	font-family: var(--font-slogan);
	font-style: italic;
	font-weight: 600;
	color: var(--burgundy);
}

.pg-section {
	padding: var(--section-y) var(--rail);
}

.pg-wrap {
	max-width: var(--maxw);
	margin-inline: auto;
}

.pg-head {
	--head-gap: 14px;
	text-align: center;
	margin-bottom: var(--section-head-gap);
}

.pg-head h2 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.03em;
	font-size: clamp(30px, 6vw, 48px);
	color: var(--ink);
	margin-top: var(--head-gap);
}

.pg-head h2.pg-gold-h {
	margin-top: calc(var(--head-gap) - var(--bleed));
	margin-bottom: calc(var(--bleed) * -1);
}

/* Pillars — a row of parallel claims, one per column; shared by several pages */
.pg-pillars {
	padding: var(--section-y) var(--rail);
}

.pg-pillars__row {
	max-width: var(--maxw);
	margin-inline: auto;
	display: grid;
	gap: 0;
}

.pg-pillar {
	--mark-h: 54px;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 30px 0;
	border-top: 1px solid var(--hair-soft);
}

.pg-pillar:last-child {
	border-bottom: 1px solid var(--hair-soft);
}

.pg-pillar__mark {
	flex: none;
	width: 62px;
	height: var(--mark-h);
	margin-top: 2px;
	display: grid;
	place-items: center;
}

/* Cap against the token, not 100% — a percentage can't resolve on a centred grid item. */
.pg-pillar__mark img {
	max-width: 100%;
	max-height: var(--mark-h);
	width: auto;
	height: auto;
}

.pg-pillar__diamond {
	width: 8px;
	height: 8px;
	background: var(--gold);
	transform: rotate(45deg);
}

.pg-pillar__rule {
	display: none;
}

.pg-pillar__txt {
	min-width: 0;
}

.pg-pillar h3 {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.6vw, 24px);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.24;
	color: var(--ink);
	text-wrap: balance;
}

.pg-pillar p {
	margin-top: 16px;
	max-width: 56ch;
	font-size: var(--fs-copy);
	line-height: 1.72;
	color: var(--ink-soft);
}

.pg-pillar__notes {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pg-pillar__notes li {
	position: relative;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}

.pg-pillar__notes li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 4px;
	font-size: 7px;
	color: var(--gold);
}

/* Alternate backgrounds */
.pg-band-alt {
	background: var(--cream-wash-alt);
}

/* Line marks — stroke steps with the size so the weight reads the same */
.pg-mark {
	flex: none;
	display: block;
	width: var(--mark-size, 34px);
	height: var(--mark-size, 34px);
	color: var(--gold-deep);
	stroke-width: 2.2;
}

.pg-mark--sm {
	--mark-size: 26px;
	stroke-width: 2.8;
}

.pg-mark--xl {
	--mark-size: 62px;
	stroke-width: 1.8;
}

/* Closing links — ground is the page's call, add pg-band-alt where the alternation wants one */
.pg-cta-band {
	color: #2a2118;
	padding: var(--section-y) var(--rail);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.pg-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(168, 126, 48, 0.14), transparent 70%);
}

.pg-cta-band .in {
	position: relative;
	max-width: 60ch;
	margin-inline: auto;
}

.pg-cta-band .lab {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-cta-band h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(32px, 6vw, 52px);
	letter-spacing: 0.03em;
	margin-top: 16px;
	color: var(--ink);
}

.pg-cta-band p {
	color: #5a503f;
	margin: 20px auto 0;
	max-width: 50ch;
}

.pg-cta-band .btn {
	margin-top: 30px;
}

/* Post card media — featured image, or a gradient stand-in */
img.ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ph-tea1 {
	background: linear-gradient(135deg, #3a2418, #7a4a26);
}

.ph-tea2 {
	background: linear-gradient(135deg, #2a3a28, #5a7242);
}

.ph-tea3 {
	background: linear-gradient(135deg, #3a2c1a, #9a6e3a);
}

.ph-tea4 {
	background: linear-gradient(135deg, #2a2018, #6e4a2e);
}

.ph-tea5 {
	background: linear-gradient(135deg, #1e2a22, #486a4a);
}

.ph-tea6 {
	background: linear-gradient(135deg, #3a241a, #8a5a32);
}

.ph-tea7 {
	background: linear-gradient(135deg, #2e2418, #7a5a30);
}

/* About */
.pg-about-lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section-y-tight) var(--rail) var(--section-y);
	align-items: center;
}

.pg-about-lead .vinyl-frame {
	aspect-ratio: 1;
	border: 1px solid var(--hair);
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(217, 168, 67, 0.12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(250, 243, 227, 0.7));
	position: relative;
	max-width: 460px;
	width: 100%;
	margin-inline: auto;
}

.pg-about-lead .vinyl-frame::before,
.pg-about-lead .vinyl-frame::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid var(--gold);
}

.pg-about-lead .vinyl-frame::before {
	top: 16px;
	left: 16px;
	border-right: 0;
	border-bottom: 0;
}

.pg-about-lead .vinyl-frame::after {
	bottom: 16px;
	right: 16px;
	border-left: 0;
	border-top: 0;
}

.pg-about-lead .vinyl {
	width: 85%;
}

.pg-about-lead .vinyl--spin {
	animation: none;
}

.pg-about-lead .txt .pg-eyebrow {
	margin-bottom: 16px;
}

.pg-about-lead .txt h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(30px, 6vw, 44px);
	letter-spacing: 0.03em;
	line-height: 1.08;
	color: var(--ink);
}

.pg-about-lead .txt p {
	font-size: 17px;
	line-height: 1.75;
	color: #3a322a;
	margin-top: 20px;
}

.pg-about-lead .txt .pg-today {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.pg-about-lead .txt .pg-today li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.5;
	color: #3a322a;
}

.pg-about-lead .txt .pg-today li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--gold);
	font-size: 10px;
}

/* Timeline */
.pg-timeline {
	padding: var(--section-y) var(--rail);
}

.pg-timeline .rows {
	max-width: 880px;
	margin-inline: auto;
}

.pg-timeline .row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding-bottom: 40px;
}

.pg-timeline .row:last-child {
	padding-bottom: 0;
}

.pg-timeline .row .yr {
	font-family: var(--font-display);
	font-size: clamp(34px, 8vw, 46px);
	font-weight: 600;
	color: var(--ink);
	line-height: 1;
}

.pg-timeline .row .c h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-timeline .row .c p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-top: 10px;
	max-width: 60ch;
}

/* Mission and values */
.pg-values {
	padding: var(--section-y) var(--rail);
}

.pg-values .pg-mission {
	max-width: 58ch;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
	color: #3a322a;
}

.pg-vals-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-width: 1180px;
	margin: 48px auto 0;
	gap: 4px 0;
}

.pg-val {
	text-align: center;
	padding: 18px 16px;
	border-top: 1px solid var(--hair);
}

.pg-val .num {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--gold);
}

.pg-val h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
	margin-top: 12px;
	line-height: 1.25;
}

/* Opening paragraph — a page's first block, set with an initial.
 * Full section rhythm, not the tight one: it carries a single paragraph and
 * sits between the hero and a band that both give it nothing. */
.pg-lead {
	padding: var(--section-y) var(--rail);
}

.pg-lead p {
	max-width: 58ch;
	margin-inline: auto;
	font-size: clamp(17px, 2.1vw, 19px);
	line-height: 1.8;
	color: #3a322a;
	text-wrap: pretty;
}

.pg-lead p::first-letter {
	float: left;
	font-family: var(--font-slogan);
	font-style: italic;
	font-weight: 600;
	font-size: 3.05em;
	line-height: 1;
	color: var(--accent-heading);
	margin: 0.1em 0.12em 0 0;
}

/* Figures — one size per value, never wrapping, all on one baseline */
.pg-figs {
	padding: var(--section-y) var(--rail);
}

.pg-figs__row {
	max-width: var(--col);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	--fig-max: 34px;
	--fig-base: 37px;
	--fig-box: 49px;
}

.pg-fig {
	flex: 0 1 50%;
	container-type: inline-size;
	padding: 22px 18px;
	text-align: center;
	border-top: 1px solid var(--hair-soft);
}

.pg-fig:nth-child(odd) {
	border-right: 1px solid var(--hair-soft);
}

.pg-fig:last-child {
	border-right: 0;
}

.pg-fig b {
	display: block;
	height: var(--fig-box);
	line-height: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: min(var(--fig-max), calc(100cqw / (var(--fw, 3) * 1.04)));
	white-space: nowrap;
	font-variant-numeric: tabular-nums;

	/*
	 * background-clip: text paints nothing outside the band, so it has to cover the whole
	 * em box — a band ending at the baseline shears the overshoot off round digits. The
	 * colour stops put the ramp back across cap-height-to-baseline where the figures sit.
	 */
	background-image: linear-gradient(180deg, var(--gold) 25%, var(--gold-deep) 78%);
	background-repeat: no-repeat;
	background-size: 100% 1.35em;
	background-position: 0 calc(var(--fig-base) - 1.05em);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*
 * Zero-width strut taller than any ascender: pins the baseline a fixed distance from
 * the top, so figures share one baseline and captions start at one height however
 * large each value resolved to.
 */
.pg-fig b::before {
	content: "";
	display: inline-block;
	width: 0;
	height: var(--fig-base);
}

.pg-fig>span {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.pg-certs {
	padding: 0 var(--rail) var(--section-y);
	text-align: center;
}

.pg-certs .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--space-6) var(--space-5);
	max-width: var(--col);
	margin: var(--space-6) auto 0;
}

.pg-cert {
	display: grid;
	gap: var(--space-4);
	width: min(100%, 224px);
	color: var(--ink);
	text-decoration: none;
	font-size: var(--fs-meta);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.pg-cert__preview {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1.414;
	padding: var(--space-3);
	border: 1px solid var(--line-gold);
	background: var(--surface-paper);
	box-shadow: var(--card-shadow);
	transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}

.pg-cert__preview img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
}

.pg-cert__document {
	width: 40%;
	color: var(--gold);
}

.pg-cert__format {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: var(--surface-paper-solid);
	color: var(--ink-soft);
	font-size: var(--fs-micro);
	letter-spacing: 0.08em;
}

.pg-cert__arrow {
	flex: none;
}

.pg-cert__caption {
	font-weight: 600;
}

.pg-cert:is(:hover, :focus-visible) .pg-cert__preview {
	transform: translateY(-4px);
	border-color: var(--gold);
	box-shadow: var(--card-shadow-hover);
}

.pg-cert:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: var(--space-2);
}

.pg-cert--text {
	width: auto;
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--line-gold);
	background: var(--surface-paper);
}

/* Blog archive */
.pg-cover {
	position: relative;
	display: block;

	/* Same content box as .pg-postrow below it, so the two edges line up. */
	max-width: min(calc(var(--maxw) - var(--rail) * 2), calc(100% - var(--rail) * 2));
	margin: 40px auto 0;
	min-height: 380px;
	overflow: hidden;
}

.pg-cover .ph {
	position: absolute;
	inset: 0;
	transition: transform 0.6s var(--ease-out);
}

.pg-cover:hover .ph {
	transform: scale(1.045);
}

.pg-cover .scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(12deg, rgba(20, 12, 6, 0.85) 18%, rgba(20, 12, 6, 0.3) 62%, rgba(20, 12, 6, 0.08));
}

.pg-cover .in {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 36px var(--rail);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 12px;
	max-width: 760px;
	transition: transform 0.45s var(--ease-out);
}

.pg-cover:hover .in {
	transform: translateY(-6px);
}

.pg-cover .m {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-lt);
}

.pg-cover .m i {
	font-style: normal;
	opacity: 0.5;
}

.pg-cover h2 {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.08;
	letter-spacing: 0.03em;
	color: #f6ecd8;
}

.pg-cover p {
	font-family: var(--font-body);
	font-size: var(--fs-copy);
	line-height: 1.6;
	color: rgba(246, 236, 216, 0.85);
	max-width: 600px;
}

.pg-cover .more {
	position: relative;
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold-light);
	transition: transform 0.25s var(--ease-out);
}

/* Sweeping rule under the CTA — same language as .btn--text. */
.pg-cover .more::after,
.pg-postrow .more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s var(--ease-out);
}

.pg-cover:hover .more {
	transform: translateX(4px);
}

.pg-cover:hover .more::after,
.pg-postrow .card:hover .more::after {
	transform: scaleX(1);
}

.pg-postrow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 40px var(--rail) 90px;
	max-width: var(--maxw);
	margin-inline: auto;
}

.pg-postrow .card {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 8px;
	transition: transform 0.4s var(--ease-out);
}

.pg-postrow .card:hover {
	transform: translateY(-4px);
}

.pg-postrow .img {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	transition: filter 0.3s var(--ease-out);
}

.pg-postrow .img .ph {
	position: absolute;
	inset: 0;
	transition: transform 0.6s var(--ease-out);
}

.pg-postrow .card:hover .img {
	filter: brightness(1.04);
}

.pg-postrow .card:hover .img .ph {
	transform: scale(1.05);
}

.pg-postrow .m {
	display: flex;
	gap: 14px;
	margin-top: 10px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-postrow h3 {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(21px, 3.6vw, 24px);
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: var(--ink);
	transition: color 0.3s var(--ease-out);
}

.pg-postrow .card:hover h3 {
	color: var(--gold-deep);
}

.pg-postrow p {
	font-family: var(--font-body);
	font-size: var(--fs-copy);
	line-height: 1.6;
	color: var(--ink-soft);
}

.pg-postrow .more {
	position: relative;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--burgundy);
	margin-top: 2px;
	transition: transform 0.25s var(--ease-out);
}

.pg-postrow .card:hover .more {
	transform: translateX(4px);
}

.pg-blog-empty {
	text-align: center;
	color: var(--ink-soft);
}

/* Utility pages: 404 and search */
.pg-notice__in {
	text-align: center;
	padding-block: var(--section-y-tight) var(--section-y);
}

.pg .pg-notice__lead {
	max-width: var(--measure);
	margin: 0 auto 28px;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink-soft);
}

.pg-notice__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.pg-search-form {
	display: flex;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px var(--rail) 0;
}

.pg-search-form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 18px;
	font: inherit;
	font-size: 16px;
	color: var(--ink);
	background: var(--surface-paper);
	border: 1px solid var(--line-gold);
	border-radius: 999px;
}

/* Blog pagination */
.pg-pagination {
	display: flex;
	justify-content: center;
	padding: 8px var(--rail) 56px;
}

.pg-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-pagination .page-numbers a,
.pg-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	background: var(--card-bg);
	border: 1px solid var(--card-line);
	border-radius: var(--card-radius);
	transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.pg-pagination .page-numbers a:hover,
.pg-pagination .page-numbers a:focus-visible {
	color: var(--gold-deep);
	border-color: var(--gold);
	background: var(--cream);
}

.pg-pagination .page-numbers span.current {
	font-weight: 600;
	color: var(--ink);
	border-color: var(--gold);
}

.pg-pagination .page-numbers span.dots {
	border: 0;
	background: none;
}

/* Article */
.pg-art .entry-content {
	max-width: calc(760px + var(--rail) * 2);
	margin-inline: auto;
	padding: 60px var(--rail) 32px;
}

/* Lead band — scroll parallax, same feel as the front-page cinebreaks. */
.pg-art-band {
	--band-overscan: 64px; /* Must exceed BAND_DEPTH in article.js or the pan edge shows. */

	max-width: calc(760px + var(--rail) * 2);
	margin-inline: auto;
	padding: 48px var(--rail) 0;
}

.pg-art-band__box {
	position: relative;
	height: 156px;
	overflow: hidden;
	border-block: 1px solid var(--line-gold);
}

.pg-art-band__pan {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--band-overscan) * -1);
	bottom: calc(var(--band-overscan) * -1);
	transform: translateY(var(--band-y, 0));
	will-change: transform;
}

.pg-art-band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

.pg-art-band figcaption {
	margin-top: 10px;
	line-height: 1.45;
	color: var(--ink-mute);
}

.pg-art-band + .entry-content {
	padding-top: 36px;
}

.pg-art .entry-content>.drop::first-letter,
.pg-art .entry-content>p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 72px;
	line-height: 0.7;
	float: left;
	padding: 6px 14px 0 0;
	color: var(--gold);
}

/* Body copy (p, headings, lists, links, quotes) comes from prose.css. */

.pg-art-foot {
	max-width: calc(760px + var(--rail) * 2);
	margin-inline: auto;
	padding: 28px var(--rail) 72px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pg-art-foot .author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pg-art-foot .author .av {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #e7d2a4, var(--gold));
	flex: none;
}

.pg-art-foot .author .nm {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

.pg-art-foot .author .ro {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-top: 4px;
}

.pg-art-foot .share {
	display: flex;
	gap: 10px;
}

.pg-art-foot .share a,
.pg-art-foot .share button {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(20, 16, 11, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-mute);
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.pg-art-foot .share a:hover,
.pg-art-foot .share button:hover,
.pg-art-foot .share button.is-copied {
	background: var(--ink);
	color: var(--gold-light);
	border-color: var(--ink);
}

.pg-contact-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pg-contact-socials a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid rgba(20, 16, 11, 0.16);
	font-size: 13px;
	color: var(--ink-mute);
}

.pg-contact-socials a:hover {
	border-color: var(--gold);
	color: var(--gold-deep);
}

.pg-art-related {
	padding: 80px var(--rail);
}

.pg-art-related .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: var(--maxw);
	margin-inline: auto;
}

.pg-post {
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--ease-out);
}

.pg-post:hover {
	transform: translateY(-6px);
}

.pg-post .img {
	aspect-ratio: 3 / 2;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--hair);
}

.pg-post .img .ph {
	position: absolute;
	inset: 0;
	transition: transform 0.6s var(--ease-out);
}

.pg-post:hover .img .ph {
	transform: scale(1.05);
}

.pg-post .m {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	display: flex;
	gap: 14px;
	margin-top: 18px;
}

.pg-post h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.12;
	letter-spacing: 0.02em;
	color: var(--ink);
	margin-top: 12px;
}

/* Partners */
.pg-trust {
	padding: 72px var(--rail);
	text-align: center;
}

.pg-trust .lead {
	margin: 0 auto;
	max-width: 640px;
	line-height: 1.45;
	color: #3a322a;
}

.pg-trust .lead b {
	color: var(--gold-deep);
	font-weight: 600;
}

.pg-trust .logos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin-top: 36px;
}

.pg-trust .lg {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 0.16em;
	color: var(--gold-deep);
}

.pg-trust .awards {
	margin-top: 30px;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-steps-mini {
	padding: 72px var(--rail);
}

.pg-steps-mini .row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	max-width: 1200px;
	margin-inline: auto;
}

.pg-steps-mini .s {
	text-align: center;
	padding: 0 8px;
}

.pg-steps-mini .s .n {
	width: 50px;
	height: 50px;
	margin: 0 auto 18px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--gold);
}

.pg-steps-mini .s h4 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.pg-steps-mini .s p {
	font-size: var(--fs-copy);
	line-height: 1.6;
	color: var(--ink-mute);
	margin-top: 10px;
}

/* Volunteer — charity programme band, the page's one loud moment */
.pg-teplo {
	position: relative;
	overflow: hidden;
	padding: var(--section-y) var(--rail);
	border-block: 1px solid var(--hair-soft);
}

.pg-teplo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 58% 68% at 50% 2%, rgba(168, 126, 48, 0.17), transparent 66%);
}

.teplo-in {
	position: relative;
	max-width: var(--col);
	margin-inline: auto;
	display: grid;
	justify-items: center;
	text-align: center;
}

.teplo-in .pg-mark {
	margin-bottom: 22px;
}

.teplo-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 3.4vw, 32px);
	letter-spacing: 0.03em;
	margin-top: 16px;
	color: var(--ink);
}

.teplo-in>p {
	margin-top: 26px;
	max-width: 54ch;
	font-size: var(--fs-copy);
	line-height: 1.78;
	color: var(--ink-soft);
}

.teplo-out {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 22px;
	justify-content: center;
	align-items: center;
}

/* Full width so the figure can measure itself against the column, not its own text. */
.teplo-count {
	container-type: inline-size;
	width: 100%;
	display: grid;
	justify-items: center;
	gap: 6px;
	margin-top: 26px;
}

.teplo-count__val {
	font-family: var(--font-display);
	font-weight: 600;

	/* Longer translations («peste 135 mil.») would overflow a phone at the clamp floor. */
	font-size: min(clamp(52px, 11vw, 112px), calc(100cqw / (var(--fw, 5) * 1.04)));
	white-space: nowrap;
	line-height: 0.94;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;

	/* Descenders («peste 135 mil.») shear at line-height 0.94 without this bleed. */
	padding-block: 0.14em;
	margin-block: -0.08em;
	background-image: linear-gradient(180deg, var(--gold-bright) 12%, var(--gold-deep) 88%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.teplo-count__cap {
	color: var(--ink-soft);
	margin-top: 2px;
}

.teplo-count__rule {
	width: 40px;
	height: 1px;
	background: var(--hair);
	margin-top: 24px;
}

/* The rail sits in a section that already applied the rail. */
.pg-teplo .pg-figs {
	padding: var(--section-y-tight) 0 0;
}

/* Initiatives — soft cards on the page's own column */
.pg-init {
	padding: var(--section-y) var(--rail);
}

.init-grid {
	max-width: var(--col);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.init-card {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 28px 26px 30px;
	background: var(--card-bg);
	border: 1px solid var(--card-line);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}

.init-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
	border-color: var(--hair);
}

.init-card .pg-mark {
	margin-bottom: 2px;
}

.init-card__when {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
}

.init-card h3 {
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 19px);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--ink);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hair-soft);
}

.init-card p {
	font-size: 15px;
	line-height: 1.68;
	color: var(--ink-soft);
}

/* Contact */
.pg-contact-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 42px;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 48px var(--rail) 90px;
}

.pg-contact-form {
	position: relative;
	min-width: 0;
	padding: clamp(28px, 5vw, 48px);
	background: rgba(253, 251, 245, 0.85);
	border: 1px solid var(--hair);
	outline: 1px solid var(--hair-soft);
	outline-offset: -8px;
	box-shadow: 0 24px 60px rgba(36, 24, 19, 0.08);
}

.pg-contact-form .gform_wrapper {
	margin: 0;
}

.pg-contact-form .gform_heading {
	margin-block: 0 16px;
}

.pg-contact-form .gform_required_legend {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-mute);
}

.pg-contact-form .gform_fields {
	column-gap: 22px;
	row-gap: 22px;
}

.pg-contact-form .gfield {
	min-width: 0;
}

.pg-contact-form .gfield_label {
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-contact-form .gfield_required {
	color: var(--burgundy);
}

.pg-contact-form .gfield_description {
	padding-top: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-mute);
}

.pg-contact-form input[type="text"],
.pg-contact-form input[type="email"],
.pg-contact-form input[type="tel"],
.pg-contact-form input[type="url"],
.pg-contact-form input[type="number"],
.pg-contact-form input[type="date"],
.pg-contact-form select,
.pg-contact-form textarea {
	width: 100%;
	min-height: 42px;
	padding: 9px 2px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--hair);
	border-radius: 0;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s;
}

.pg-contact-form select {
	color-scheme: light;
	cursor: pointer;
}

.pg-contact-form select option {
	color: var(--ink);
	background-color: var(--cream);
}

@supports (appearance: base-select) {

	.pg-contact-form select,
	.pg-contact-form select::picker(select) {
		appearance: base-select;
	}

	.pg-contact-form select::picker-icon {
		display: none;
	}

	.pg-contact-form select::picker(select) {
		margin-block: 4px;
		color-scheme: light;
		color: var(--ink);
		background: var(--cream);
		border: 1px solid var(--hair);
		border-radius: 0;
		box-shadow: 0 14px 32px rgba(36, 24, 19, 0.16);
	}

	.pg-contact-form select option {
		padding: 10px 12px;
	}

	.pg-contact-form select option::checkmark {
		margin-inline-end: 8px;
	}
}

.pg-contact-form textarea {
	min-height: 110px;
	resize: vertical;
}

.pg-contact-form input::placeholder,
.pg-contact-form textarea::placeholder {
	color: var(--ink-mute);
	opacity: 0.8;
}

.pg-contact-form input[type="text"]:focus,
.pg-contact-form input[type="email"]:focus,
.pg-contact-form input[type="tel"]:focus,
.pg-contact-form input[type="url"]:focus,
.pg-contact-form input[type="number"]:focus,
.pg-contact-form input[type="date"]:focus,
.pg-contact-form select:focus,
.pg-contact-form textarea:focus {
	border-color: var(--gold);
	box-shadow: 0 1px 0 var(--gold);
}

.pg-contact-form .gfield_error input[type="text"],
.pg-contact-form .gfield_error input[type="email"],
.pg-contact-form .gfield_error input[type="tel"],
.pg-contact-form .gfield_error input[type="url"],
.pg-contact-form .gfield_error input[type="number"],
.pg-contact-form .gfield_error input[type="date"],
.pg-contact-form .gfield_error select,
.pg-contact-form .gfield_error textarea {
	border-color: var(--burgundy);
}

.pg-contact-form .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.pg-contact-form input[type="checkbox"],
.pg-contact-form input[type="radio"] {
	margin-top: 0.2em;
	accent-color: var(--burgundy);
}

.pg-contact-form input[type="file"] {
	max-width: 100%;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-soft);
}

.pg-contact-form .gform_footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
}

.pg-contact-form .gform_button {
	--btn-cut: 9px;
	width: auto;
	padding: 16px 32px;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1a120d;
	background: linear-gradient(160deg, var(--bronze-lt) 0%, var(--bronze) 48%, var(--bronze-dk) 100%);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 1px 0 rgba(255, 243, 214, 0.55), inset 0 -1px 0 rgba(58, 38, 16, 0.35);
	clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
	transition: filter 0.25s;
}

.pg-contact-form .gform_button:hover,
.pg-contact-form .gform_button:focus-visible {
	color: #1a120d;
	filter: brightness(1.07);
}

.pg-contact-form .gform_button:focus-visible {
	outline: 2px solid var(--burgundy);
	outline-offset: 3px;
}

.pg-contact-form .gform_button:disabled {
	cursor: wait;
	opacity: 0.65;
}

.pg-contact-form .gform_ajax_spinner {
	width: 20px;
	height: 20px;
}

.pg-contact-form .gform_validation_errors,
.pg-contact-form .gfield_validation_message {
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--burgundy);
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(114, 33, 33, 0.5);
	border-radius: 0;
	box-shadow: none;
}

.pg-contact-form .gform_validation_errors {
	margin-block: 0 22px;
}

.pg-contact-form .gform_validation_errors h2 {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
}

.pg-contact-form .gfield_validation_message {
	margin-top: 8px;
}

.pg-contact-form .gform_confirmation_message {
	font-size: 16px;
	line-height: 1.65;
	color: #2e5233;
}

.pg-contact-note {
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid var(--hair);
	background: rgba(255, 255, 255, 0.6);
}

.pg-contact-note.is-err {
	border-color: rgba(114, 33, 33, 0.5);
	color: var(--burgundy);
}

.pg-contact-aside {
	display: flex;
	flex-direction: column;
	gap: 34px;
	min-width: 0;
}

.pg-contact-items {
	border-block: 1px solid var(--hair);
}

.pg-contact-item {
	padding-block: 20px;
}

.pg-contact-item + .pg-contact-item {
	border-block-start: 1px solid var(--hair);
}

.pg-contact-item .h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}

.pg-contact-item .h::before {
	width: 20px;
	height: 1px;
	content: "";
	background: currentcolor;
}

.pg-contact-links {
	display: grid;
	gap: 8px;
	font-size: var(--fs-copy);
	line-height: 1.55;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}

.pg-contact-links a:hover,
.pg-contact-links a:focus-visible {
	color: var(--ink);
}

.pg-contact-copy p {
	margin: 0;
}

.pg-contact-copy a {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Responsive layout */
@media (min-width: 681px) {
	.pg-timeline .row {
		grid-template-columns: 120px 1fr;
		gap: 44px;
		align-items: start;
	}

	.pg-timeline .row .yr {
		text-align: right;
	}

	.pg-timeline .row .c {
		position: relative;
		border-left: 1px solid var(--hair);
		padding-left: 44px;
	}

	.pg-timeline .row .c::before {
		content: "";
		position: absolute;
		left: -5px;
		top: 6px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--gold);
		box-shadow: 0 0 0 4px var(--cream-ground-alt);
	}

	.pg-figs__row {
		--fig-max: 44px;
		--fig-base: 48px;
		--fig-box: 62px;
	}

	.pg-fig {
		flex-basis: 25%;
		border-top: 0;
		border-right: 1px solid var(--hair-soft);
		padding: 8px 22px;
	}

	.pg-fig:nth-child(4n),
	.pg-fig:last-child {
		border-right: 0;
	}

	.pg-postrow {
		grid-template-columns: 1fr 1fr;
	}

	.pg-art-band__box {
		height: 200px;
	}

	.pg-art-related .row {
		grid-template-columns: repeat(3, 1fr);
	}

	.pg-steps-mini .row {
		grid-template-columns: repeat(4, 1fr);
	}

	.init-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pg-cover {
		min-height: 440px;
	}

	.pg-cover .in {
		padding: 44px 48px;
	}
}

@media (min-width: 901px) {
	/* Equal columns — the claims are parallel, so nothing here implies an order. */
	.pg-pillars__row {
		grid-template-columns: repeat(var(--pillars, 3), minmax(0, 1fr));
	}

	.pg-pillar {
		--mark-h: 64px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 0 32px;
		border-top: 0;
		border-right: 1px solid var(--hair-soft);
	}

	.pg-pillar:last-child {
		border-right: 0;
		border-bottom: 0;
	}

	.pg-pillar__mark {
		width: auto;
		margin-top: 0;
	}

	.pg-pillar__mark img {
		max-width: 190px;
	}

	.pg-pillar__rule {
		display: block;
		width: 40px;
		height: 1px;
		background: var(--hair);
		margin: 24px 0 20px;
	}

	.pg-pillar__txt {
		display: contents;
	}

	.pg-pillar p {
		max-width: 42ch;
	}

	.pg-pillar__notes {
		width: fit-content;
		margin-inline: auto;
		text-align: left;
	}

	.pg-about-lead {
		grid-template-columns: 1fr 1fr;
		gap: 72px;
	}

	.pg-vals-row {
		grid-template-columns: repeat(5, 1fr);
	}

	.pg-val {
		border-top: 0;
		border-left: 1px solid var(--hair);
		text-align: center;
	}

	.pg-val:first-child {
		border-left: 0;
	}

	.pg-contact-body {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 64px;
	}
}

@media (min-width: 1101px) {
	.init-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}