/* ==========================================================================
   About BNJC (/about/), editorial pass, 3 Nov 2026. The page is ordinary block content: banded sections made of
   groups, images, lists and the bnjc/cards, key-facts, about-values and about-statements blocks. This file only gives
   those blocks their shape; the words, pictures and links are untouched.

   The direction: a cultural institution rather than a brochure. Type does the work (the display face for dates,
   numbers, values and headings), hairlines rather than boxes, warm grounds, large photographs on one shared grid, and
   one column (the 1344px wide size) that the hero, the jump links and every band start on. No icons, no gradients,
   nothing that moves except a gentle hover. Tokens only (brand.css, theme.json).

   Every class is .ab-* or belongs to a block only the About page uses, so nothing else on the site is touched.
   Loaded automatically with the other area-*.css files (inc/assets.php).
   ========================================================================== */

/* Children of a grid sit level: WordPress puts a top margin on every block after the first. */
:is(.ab-split, .ab-history, .ab-dates) > * {
	margin-block: 0 !important;
}

/* ---- Bands: one rhythm, one column ------------------------------------------------------------------------------ */
.ab-band.ab-band {
	/* Every band has the same room above and below, so the page keeps one beat. */
	--ab-pad: clamp(72px, 9vw, 136px);
	/* The headings are one step up from the site's display-m, fluid between a phone and a wide screen. */
	--wp--preset--font-size--display-m: clamp(var(--wp--preset--font-size--display-s), 4.6vw, var(--wp--preset--font-size--display-l));
	padding-block: var(--ab-pad);
	/* The hero's column: the page gutter, or the 1344px wide size centred on a wide screen. */
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
}

.ab-band--white {
	background: var(--white);
}

/* Lavender, thinned right down into the cream so the cards band reads as warm paper, not a colour. */
.ab-band--lavender {
	background: color-mix(in srgb, var(--pink) 24%, var(--cream));
}

.ab-band--sand {
	background: var(--wp--preset--color--cream-deep);
}

.ab-band--navy {
	--accent: var(--accent-light);
	background: var(--navy-deep);
	color: var(--white);
}

.ab-band--navy :is(h1, h2, h3, p, a:not(.wp-block-button__link)) {
	color: inherit;
}

/* The small label above a heading, then the heading, close together. */
.ab-band .bnjc-overline {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--accent);
}

.ab-band h2 {
	margin-block: 0;
	line-height: 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ab-band h2[id] {
	scroll-margin-block-start: 140px;
}

.ab-band > * + * {
	margin-block-start: clamp(24px, 3vw, 40px);
}

/* WordPress centres every child of a constrained group that is narrower than the content width; in a band the
   words belong at the start edge, under their heading. */
.ab-band > * {
	max-inline-size: none;
	margin-inline: 0 !important;
}

.ab-band > p {
	max-inline-size: 46rem;
	line-height: 1.6;
}

.ab-lede {
	max-inline-size: 42rem;
	font-size: var(--wp--preset--font-size--standfirst);
	line-height: 1.5;
}

/* A long button label wraps on a phone instead of pushing the page sideways. */
.ab-band .wp-block-button {
	max-inline-size: 100%;
}

.ab-band .wp-block-button__link {
	max-inline-size: 100%;
	white-space: normal;
}

/* The jump links sit on the same left edge as the hero and the bands (the team page keeps its own centred column). */
.ab-jump:not(:has(+ .bnjc-team-welcome)) {
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
}

.ab-jump:not(:has(+ .bnjc-team-welcome)) .ab-jump__list {
	max-inline-size: none;
	margin-inline: 0;
}

/* ---- Two columns: words and a photograph ---------------------------------- */
.ab-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 104px);
	align-items: center;
}

.ab-split > * {
	min-inline-size: 0;
}

.ab-split--flip > :first-child {
	order: 2;
}

.ab-words > * {
	margin-block: 0;
}

.ab-words > * + * {
	margin-block-start: 1.25em;
}

.ab-words > h2 + * {
	margin-block-start: clamp(24px, 3vw, 36px);
}

.ab-words p {
	max-inline-size: 34rem;
	line-height: 1.65;
}

/* The opening paragraph of a split is the one to read first: one step up. */
.ab-words > h2 + p {
	font-size: var(--wp--preset--font-size--standfirst);
	line-height: 1.5;
}

.ab-words .wp-block-buttons {
	margin-block-start: clamp(28px, 3.4vw, 40px);
}

.ab-photo {
	margin: 0;
}

.ab-photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md, 8px);
}

.ab-photo--tall img {
	aspect-ratio: 4 / 5;
}

/* The people band turns the split round (photograph first), so the page alternates as it goes down. */
.ab-band--white .ab-split > .ab-photo {
	order: -1;
}

@media (max-width: 800px) {

	.ab-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-split--flip > :first-child {
		order: 0;
	}

	.ab-band--white .ab-split > .ab-photo {
		order: 0;
	}

	.ab-photo--tall img {
		aspect-ratio: 4 / 3;
	}
}

/* ---- Key facts: one horizontal strip -------------------------------------------------------------------------------
   The facts that matter (the year the Hub opened, the charity number, the address) are set large in a single row, each
   under its own rule. The rest (the trading company, phone and email) follow in a quieter row of the same grid, so the
   whole thing reads as one statistics strip. No tiles, no colour fills, no icons: the number is the picture. The PHP
   marks the lead facts (.bnjc-kftile--lead) and a long value (.bnjc-kftile--text); the grid is twelve columns, so a
   short lead fact takes three and a long one six, and the default three lead facts fill the row exactly. */
.ab-facts {
	margin-block-start: clamp(56px, 7vw, 104px);
}

.bnjc-keyfacts.bnjc-keyfacts--glance {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* "Key facts": the small label above the strip, as the section labels are. */
.bnjc-keyfacts.bnjc-keyfacts--glance .bnjc-keyfacts__title {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline, 0.16em);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--accent);
}

.bnjc-kfgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
	list-style: none;
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

.bnjc-kfgrid .bnjc-kftile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	min-inline-size: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0 0;
	border-block-start: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
	color: var(--navy);
}

.bnjc-kfgrid .bnjc-kftile--lead {
	order: 1;
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 3px solid var(--navy);
}

.bnjc-kfgrid .bnjc-kftile:not(.bnjc-kftile--lead) {
	order: 2;
}

/* No icons: the settings may still name one, but the strip is type only. */
.bnjc-kfgrid .bnjc-kftile__icon {
	display: none;
}

/* The big word or number, in the display face. A longer one (a name, an address, an email) takes a smaller step and
   may break only if it must (an email breaks after its @), so a phone never scrolls sideways. */
.bnjc-kfgrid .bnjc-kftile__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--navy);
	overflow-wrap: break-word;
}

.bnjc-kfgrid .bnjc-kftile--lead.bnjc-kftile--text .bnjc-kftile__value {
	font-size: clamp(var(--wp--preset--font-size--display-xs), 3.1vw, var(--wp--preset--font-size--display-m));
	line-height: var(--wp--custom--typography--leading-heading, 1.04);
	text-wrap: balance;
}

.bnjc-kfgrid .bnjc-kftile:not(.bnjc-kftile--lead) .bnjc-kftile__value {
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.15;
}

.bnjc-kfgrid .bnjc-kftile__value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--navy) 35%, transparent);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.bnjc-kfgrid .bnjc-kftile__value a:hover {
	text-decoration-color: currentcolor;
}

.bnjc-kfgrid .bnjc-kftile__value a:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 3px;
}

/* The label: plain, one line, and quiet. */
.bnjc-kfgrid .bnjc-kftile__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--grey-700);
}

/* A long fact (an address, a company) takes the whole row on a phone and a tablet. */
@media (max-width: 899px) {

	.bnjc-kfgrid .bnjc-kftile--text:not(.bnjc-kftile--compact) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {

	.bnjc-kfgrid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.bnjc-kfgrid .bnjc-kftile--lead {
		grid-column: span 3;
	}

	.bnjc-kfgrid .bnjc-kftile--lead.bnjc-kftile--text {
		grid-column: span 6;
	}

	/* The charity tile: a short phrase set in the longer-text size, but only as wide as the year (so it wraps to
	   "Registered / charity" and the three lead facts still fill one row of twelve). */
	.bnjc-kfgrid .bnjc-kftile--lead.bnjc-kftile--compact {
		grid-column: span 3;
	}

	.bnjc-kfgrid .bnjc-kftile:not(.bnjc-kftile--lead) {
		grid-column: span 4;
	}
}

/* The plain card of words (layout "list"): the facts side by side. */
.ab-facts .bnjc-keyfacts:not(.bnjc-keyfacts--glance) {
	display: grid;
	grid-template-columns: minmax(140px, 0.4fr) minmax(0, 3fr);
	gap: 8px clamp(20px, 4vw, 56px);
	align-items: start;
	padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 40px);
	border: 0;
	border-block-start: 3px solid var(--navy);
	border-radius: 0 0 var(--radius-xs, 2px) var(--radius-xs, 2px);
	box-shadow: 0 1px 2px rgba(25, 27, 111, 0.08);
}

.ab-facts .bnjc-keyfacts:not(.bnjc-keyfacts--glance) .bnjc-keyfacts__title {
	margin: 0;
	padding-block-start: 2px;
}

.ab-facts .bnjc-keyfacts__list {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 22px clamp(20px, 3vw, 40px);
}

.ab-facts .bnjc-keyfacts__list dd {
	margin-block-start: 4px;
	line-height: 1.45;
}

@media (max-width: 800px) {

	.ab-facts .bnjc-keyfacts:not(.bnjc-keyfacts--glance) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- What happens: two groups of destinations --------------------------------------------------------------------
   The page content carries two Cards blocks under two headings ("Life at the Hub", "Community"); each is the same
   grid, so the photographs share one ratio and the rows share one height. A card is one link: the picture, the name
   and the line. The only movement is the picture settling in on hover and the name taking an underline. */
.ab-band .ab-group-title {
	display: block;
	margin: clamp(56px, 7vw, 96px) 0 clamp(24px, 3vw, 36px);
	padding-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--navy);
}

.ab-band .ab-lede + .ab-group-title,
.ab-band .ab-lede + .bnjc-cards {
	margin-block-start: clamp(40px, 5vw, 64px);
}

.ab-band .bnjc-cards__list {
	gap: clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 32px);
}

.ab-band .bnjc-card {
	position: relative;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.ab-band a.bnjc-card:hover {
	transform: none;
	box-shadow: none;
}

/* One ratio for every picture, whatever shape the file is. */
.ab-band .bnjc-card__photo {
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-xs, 2px);
}

.ab-band .bnjc-card__body {
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--60) 0 0;
}

.ab-band .bnjc-card__title {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.ab-band a.bnjc-card:hover .bnjc-card__title,
.ab-band a.bnjc-card:focus-visible .bnjc-card__title {
	text-decoration-color: currentcolor;
}

.ab-band .bnjc-card__text {
	max-inline-size: 30rem;
}

/* ---- Values: type on navy ---------------------------------------------------------------------------------------
   Six lines of display type in two columns, each under a hairline with its number beside it. No cards, no icons: the
   words are the design. The number is a CSS counter, so a seventh value numbers itself. The short line under each is
   one step quieter. */
.bnjc-values {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(48px, 8vw, 128px);
	counter-reset: bnjc-value;
	list-style: none;
	max-inline-size: none;
	margin-block: clamp(48px, 6vw, 88px) 0;
	padding: 0;
}

.bnjc-values .bnjc-value {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-content: start;
	min-inline-size: 0;
	margin: 0;
	padding: clamp(28px, 3.6vw, 48px) 0 clamp(32px, 4.4vw, 64px);
	border-block-start: 1px solid var(--wp--custom--color--on-dark-border-default);
	counter-increment: bnjc-value;
	color: var(--white);
}

.bnjc-values .bnjc-value::before {
	content: counter(bnjc-value, decimal-leading-zero);
	grid-row: 1 / span 2;
	padding-block-start: 0.6em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--gold);
}

.bnjc-values .bnjc-value__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(var(--wp--preset--font-size--display-xs), 3.4vw, var(--wp--preset--font-size--display-m));
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--white);
	text-wrap: balance;
}

.bnjc-values .bnjc-value__line {
	grid-column: 2;
	max-inline-size: 26rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: color-mix(in srgb, var(--white) 82%, transparent);
}

@media (min-width: 760px) {

	.bnjc-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Mission and vision: two statements, side by side ------------------------------------------------------------
   The band's words and the photograph become a header, a wide picture and then the two statements, each in its own
   column under a rule. The first paragraph of each is the statement: set large. The second is the explanation: body
   size, quieter. The words' wrapper dissolves (display: contents) so the heading, the picture and the statements share
   one grid; the picture is the page's own figure, not a copy. */
.ab-statements.ab-split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(48px, 8vw, 128px);
	align-items: start;
}

.ab-statements > .ab-words {
	display: contents;
}

.ab-statements .ab-words > p.bnjc-overline {
	grid-column: 1 / -1;
	grid-row: 1;
	max-inline-size: none;
}

.ab-statements .ab-words > h2 {
	grid-column: 1 / -1;
	grid-row: 2;
}

.ab-statements > .ab-photo {
	grid-column: 1 / -1;
	grid-row: 3;
	order: 0;
	margin-block: clamp(40px, 5vw, 72px) !important;
}

.ab-statements > .ab-photo img,
.ab-statements > .ab-photo--tall img {
	aspect-ratio: 21 / 9;
}

.ab-statements .bnjc-statements {
	display: grid;
	grid-column: 1 / -1;
	grid-row: 4;
	grid-template-columns: subgrid;
	gap: 0;
	margin: 0;
}

.ab-statements .bnjc-statement {
	min-inline-size: 0;
	padding: clamp(28px, 3.6vw, 48px) 0 0;
	background: none;
	border: 0;
	border-block-start: 3px solid var(--navy);
	border-radius: 0;
	box-shadow: none;
}

.ab-statements .bnjc-statement__label {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline, 0.16em);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--accent);
}

.ab-statements .bnjc-statement__text p {
	max-inline-size: 34rem;
	margin: 0;
	line-height: 1.65;
	color: var(--grey-700);
}

.ab-statements .bnjc-statement__text p + p {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ab-statements .bnjc-statement__text p:first-child {
	font-size: var(--wp--preset--font-size--standfirst);
	font-weight: 500;
	line-height: 1.45;
	color: var(--navy);
	text-wrap: pretty;
}

@media (max-width: 800px) {

	.ab-statements.ab-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-statements .bnjc-statements {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(40px, 8vw, 64px);
	}

	.ab-statements > .ab-photo img,
	.ab-statements > .ab-photo--tall img {
		aspect-ratio: 4 / 3;
	}
}

/* ---- The story: a timeline ----------------------------------------------------------------------------------------
   Five dated steps on one line. The date is the display face, large; the sentence under it is body size and quieter.
   Each step has a dot on the line. On a desktop the line runs across the page; on a tablet and a phone it runs down
   the left, the date above its sentence. The last step (the Hub opening) takes the accent. */
.ab-dates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-inline-size: none;
	margin-block-end: 0;
	padding: 0;
	list-style: none;
}

ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li {
	--dot: 11px;
	--dot-x: -6px;
	--dot-y: 0.5em;
	position: relative;
	margin: 0;
	padding: 0 0 clamp(36px, 6vw, 56px) clamp(28px, 5vw, 40px);
	border-inline-start: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--grey-700);
}

ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li:last-child {
	--dot: 15px;
	--dot-x: -8px;
	padding-block-end: 0;
	border-inline-start-color: transparent;
}

/* The dot. The site's bullet is drawn for running lists; this is the same selector that removes it, set to draw a dot. */
ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li::before {
	content: "";
	position: absolute;
	inset-block-start: var(--dot-y);
	inset-inline-start: var(--dot-x);
	inline-size: var(--dot);
	block-size: var(--dot);
	border-radius: 50%;
	background: var(--navy);
	box-shadow: 0 0 0 5px var(--cream);
}

ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li:last-child::before {
	background: var(--accent);
}

.ab-dates li strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--font-display);
	font-size: clamp(var(--wp--preset--font-size--display-m), 6vw, var(--wp--preset--font-size--display-l));
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.ab-dates li:last-child strong {
	color: var(--accent);
}

/* A tablet: the date to the left of its sentence, so the line stays short and the words keep a readable measure. */
@media (min-width: 640px) and (max-width: 1099px) {

	ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li {
		display: grid;
		grid-template-columns: clamp(150px, 22vw, 220px) minmax(0, 36rem);
		column-gap: clamp(24px, 4vw, 48px);
		align-items: start;
	}

	.ab-dates li strong {
		margin: 0;
	}
}

/* A desktop: the line runs across the top of the five steps. */
@media (min-width: 1100px) {

	.ab-dates {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: clamp(24px, 2.4vw, 40px);
	}

	ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li {
		--dot-x: 0px;
		--dot-y: -6px;
		padding: clamp(32px, 3vw, 44px) 0 0;
		border-inline-start: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
	}

	ul.wp-block-list.ab-dates:not(.is-style-plain):not(.is-style-numbered-links) > li:last-child {
		--dot-x: 0px;
		--dot-y: -8px;
		border-block-start-color: color-mix(in srgb, var(--navy) 35%, transparent);
	}

	.ab-dates li strong {
		margin-block-end: var(--wp--preset--spacing--40);
		font-size: clamp(var(--wp--preset--font-size--display-m), 4.4vw, var(--wp--preset--font-size--display-l));
	}
}

/* ---- The pointer to the wider history: a panel of its own ---------------------------------------------------------
   Hove Green, the width of the column, so it is plainly a different thing from BNJC's own five steps above it: the
   history of Jewish Brighton & Hove, told on its own page. Cream type, an outline button, the same hover as the rest. */
.ab-history {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--70) clamp(32px, 6vw, 96px);
	align-items: end;
	margin-block-start: clamp(64px, 8vw, 112px) !important;
	padding: clamp(32px, 5vw, 72px);
	background: var(--wp--preset--color--hove-green);
	border-radius: var(--radius-md, 8px);
	color: var(--cream);
}

.ab-history > * {
	min-inline-size: 0;
}

.ab-history :is(.bnjc-overline, h3, p) {
	color: var(--cream);
}

.ab-history .bnjc-overline {
	color: var(--gold);
}

.ab-history .ab-words h3 {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
}

.ab-history .ab-words p {
	max-inline-size: 38rem;
}

.ab-history .ab-words > h3 {
	margin-block-start: 0;
}

.ab-history .ab-words > h3 + p {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ab-history .wp-block-buttons {
	margin: 0;
}

.ab-history .wp-block-button .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--cream);
	color: var(--cream);
}

.ab-history .wp-block-button .wp-block-button__link:hover {
	background: var(--cream);
	color: var(--wp--preset--color--hove-green);
}

.ab-history .wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cream);
	outline-offset: 3px;
}

@media (max-width: 800px) {

	.ab-history {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}