/*
 * Block styles.
 *
 * Every value here is a token. There is not a hex code, a font name or a raw
 * pixel length in this file — if something needs a value that is not registered
 * in theme.json, the token set is wrong and gets raised there instead.
 *
 * Layout is by container query, never viewport, because a block dropped into a
 * narrow column has to lay itself out for that column and knows nothing about
 * the window. Every block establishes its own container.
 */

/*
 * WordPress ships no box-sizing reset and a block theme is expected to bring
 * its own — style.css is not even enqueued in a block theme.
 *
 * Without this, a wrapper carrying both a max-width and inline padding is wider
 * than its container by exactly that padding. It looks right at 1280, where
 * there is room to spare, and scrolls sideways at 390, where there is not.
 *
 * Scoped by class prefix rather than set globally, so core's own blocks keep
 * the box model they were written against, and :where() so it has no
 * specificity and never fights a rule below.
 */
:where([class^="aws-"], [class*=" aws-"]) { box-sizing: border-box; }

/*
 * And the form controls inside them, which carry no class of their own. An
 * input set to width:100% with padding and a border is wider than the column
 * it is in by exactly those, which is the failure the rule above describes —
 * and it was happening on every booking page in the kit, 11px of sideways
 * scroll at 390 and nothing wrong at 1280.
 */
:where([class^="aws-"], [class*=" aws-"]) :where(input, select, textarea, button, fieldset) {
	box-sizing: border-box;
	max-width: 100%;
}

.aws-hero,
.aws-cards,
.aws-kinds,
.aws-address,
.aws-details,
.aws-chips,
.aws-table,
.aws-stats,
.aws-steps,
.aws-team,
.aws-band,
.aws-contact,
.aws-hours,
.aws-features,
.aws-split,
.aws-quotes,
.aws-gallery,
.aws-booking,
.aws-form,
.aws-tiers,
.aws-plans,
.aws-prices,
.aws-goal,
.aws-area,
.aws-slider,
.aws-foot {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-hero__inner,
.aws-cards__inner,
.aws-details__inner,
.aws-chips__inner,
.aws-table__inner,
.aws-stats__inner,
.aws-steps__inner,
.aws-team__inner,
.aws-band__inner,
.aws-contact__inner,
.aws-hours__inner,
.aws-features__inner,
.aws-quotes__inner,
.aws-gallery__inner,
.aws-booking__inner,
.aws-form__inner,
.aws-tiers__inner,
.aws-prices__inner,
.aws-goal__inner,
.aws-area__inner,
.aws-slider__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

/* Shared -------------------------------------------------------------------- */

.aws-tag {
	background: var(--wp--preset--color--accent-2-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent-2-800);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

.aws-btn {
	align-items: center;
	background: var(--wp--preset--color--accent);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--background);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	text-decoration: none;
}

.aws-btn:hover { background: var(--wp--preset--color--accent-600); color: var(--wp--preset--color--background); }
.aws-btn:active { background: var(--wp--preset--color--accent-700); }

.aws-btn--quiet {
	background: transparent;
	border-color: var(--wp--preset--color--divider);
	color: inherit;
}

.aws-btn--quiet:hover { background: var(--wp--preset--color--neutral-200); color: inherit; }

.aws-more {
	color: var(--wp--preset--color--accent-700);
	font-weight: 600;
	text-decoration: none;
}

.aws-more:hover { text-decoration: underline; }

/*
 * On the two dark grounds the accent has nothing to sit on, so a link borrows
 * the colour of the text around it instead of disappearing into the ground.
 *
 * Scoped to the section's own bar. A link inside a card sits on the card's
 * light ground, not the section's, and must keep the accent.
 */
.aws-cards.has-accent-background-color > .aws-cards__inner > .aws-cards__bar .aws-more,
.aws-cards.has-neutral-900-background-color > .aws-cards__inner > .aws-cards__bar .aws-more { color: inherit; }

/* W03 · Hero ---------------------------------------------------------------- */

.aws-hero__inner {
	/*
	 * The words start at the top of the section, and the picture is centred
	 * against them.
	 *
	 * Centring both was the arrangement, and it reads as one only while the
	 * two columns are about the same height. They are not: the picture is a
	 * circle as wide as its column, so on a wide page it is around 570px tall
	 * against 440px of words -- and centring put sixty-odd pixels of nothing
	 * above the first line of the site, under the thirty-five the section
	 * already has. The first thing a visitor reads should not open a third of
	 * the way down its own section.
	 *
	 * The picture keeps the centring of its own -- see .aws-hero__figure.
	 */
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: 1fr;
}


/*
 * The column stretches its children, and only the pill opts out.
 *
 * With align-items: flex-start every child is sized to its own content
 * instead of the column, so the lede took its full 44ch and the two buttons
 * sat on one max-content line and never wrapped — both overflowing the page at
 * 390 while looking correct at 1280. Stretch is the default for a reason.
 */
.aws-hero__said { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.aws-hero__said > .aws-tag { align-self: flex-start; }
/*
 * The one place a preset is not enough on its own.
 *
 * theme.json's fluid sizes interpolate on vw, so a hero dropped into a 350px
 * sidebar on a 1440px screen still renders its headline at the full 58px. The
 * container unit is the only thing that can see the column, so the token
 * becomes the ceiling and the container sets the actual size beneath it.
 */
.aws-hero__heading {
	font-size: min(var(--wp--preset--font-size--display), 8cqi);
	margin: 0;
	text-wrap: balance;
}
.aws-hero__lede { margin: 0; max-width: 44ch; opacity: .8; }
.aws-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); }

.aws-hero__proof {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	list-style: none;
	margin: 0;
	opacity: .75;
	padding: 0;
}

/* A separator that is drawn rather than typed, so a screen reader does not read
   a middot between every fact. */
.aws-hero__proof li + li::before { content: "·"; margin-inline-end: var(--wp--preset--spacing--4); }

/*
 * Stacked, the photograph is a circle as wide as the page, which is far too
 * loud for what is decoration. Capped until the two columns appear, and the cap
 * is a token rather than a number — a value a block needs that is not in
 * theme.json means the token set is short one.
 */
.aws-hero__figure {
	/* The words start at the top of the section; the picture keeps the
	   centring, so a hero carrying a lot of writing and a small photograph
	   still has the photograph against the middle of it. */
	align-self: center;
	margin-inline: auto;
	max-width: var(--wp--custom--figure--max);
	position: relative;
	width: 100%;
}

.aws-hero__image {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--circle);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/*
 * More than one picture in the circle, turning. The stack keeps the circle's
 * shape and the pictures sit inside it, so a hero that turns and a hero that
 * does not are the same shape on the page -- and they cross-fade on the same
 * animation the stage uses, which is CSS and counts nothing.
 */
.aws-hero__turn {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--circle);
	display: block;
	isolation: isolate;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.aws-hero__slide {
	background-position: center;
	background-size: cover;
	inset: 0;
	opacity: 0;
	position: absolute;
	animation: aws-stage-turn calc(var(--aws-stage-many) * 7s) infinite;
	animation-delay: calc(var(--aws-stage-index) * -7s);
	transform: scale(1.04);
	width: auto;
}

.aws-hero__slide.is-first { opacity: 1; }

/* Asked for less motion, the first picture and nothing else moves. */
@media (prefers-reduced-motion: reduce) {
	.aws-hero__slide { animation: none; }
	.aws-hero__slide:not(.is-first) { opacity: 0; }
}

/*
 * An empty picture slot has to be visible on any ground, and surface-on-surface
 * is not — on a surface section it disappeared entirely and the team block
 * looked like a heading above a hole.
 *
 * currentColor is the one value that is always right here: it takes whatever
 * text colour the section resolved to, so it works on paper, on the accent and
 * on dark without three rules. Dashed, because it is a placeholder and should
 * not be mistaken for a frame somebody chose.
 */
.aws-hero__image--empty,
.aws-person__image--empty {
	background: transparent;
	border: 1px dashed currentColor;
	opacity: .3;
}

.aws-hero__pill {
	align-items: center;
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill);
	bottom: var(--wp--preset--spacing--4);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--2);
	inset-inline-end: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	position: absolute;
}

.aws-hero__pill span {
	background: var(--wp--preset--color--accent-2);
	border-radius: var(--wp--custom--radius--circle);
	flex: none;
	height: var(--wp--preset--spacing--2);
	width: var(--wp--preset--spacing--2);
}

/* W07 · Service cards ------------------------------------------------------- */

.aws-cards__bar {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--6);
}

.aws-cards__heading { font-size: var(--wp--preset--font-size--huge); margin: 0; text-wrap: balance; }

/*
 * The link beside a heading does not shrink. The row wraps, but wrapping is
 * not what flex tries first: it shrinks both items proportionally, and a
 * three-word link squeezed to thirty-five pixels does not wrap its text — it
 * spills, and the page scrolls sideways by however much it spilled. Refusing
 * to shrink is what makes the row wrap instead, which is what it was for.
 */
.aws-cards__bar .aws-more {
	flex: 0 0 auto;
	white-space: nowrap;
}

.aws-cards__grid {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	grid-template-columns: 1fr;
}

/*
 * A card names its own text colour rather than inheriting.
 *
 * It carries its own light ground, so on an accent or dark section it would
 * otherwise inherit that section's pale text and render cream on cream. Any
 * element that sets a background has to set the colour that goes on it.
 */
.aws-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--6);
}

/* On a surface ground the cards would vanish, so they take the page colour and
   a border instead of a fill. */
.aws-cards.has-surface-background-color .aws-card,
.aws-kinds.has-surface-background-color .aws-card {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
}

.aws-card__kicker {
	color: var(--wp--preset--color--accent-700);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .1em;
	margin: 0;
	text-transform: uppercase;
}

.aws-card__title { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-card__body { margin: 0; opacity: .8; }
.aws-card__go { margin: auto 0 0; padding-top: var(--wp--preset--spacing--2); }

/* W80 · Label and value list ------------------------------------------------ */

.aws-details__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); text-wrap: balance; }
.aws-details__list { display: grid; gap: 0; margin: 0; }

/*
 * Each pair is its own row so the two halves can align with each other and not
 * with every other row's content. A dl in source order, which is what a screen
 * reader reads and what the markup owes it.
 */
.aws-details__row {
	border-top: 1px solid var(--wp--preset--color--divider);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	grid-template-columns: 1fr;
	padding-block: var(--wp--preset--spacing--3);
}

.aws-details__row:last-child { border-bottom: 1px solid var(--wp--preset--color--divider); }
.aws-details__row dt { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: 0; }
.aws-details__row dd { margin: 0; }
.aws-details__note { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--3) 0 0; }

/* The two dark grounds have no neutral-700 to spare, so the quieter half of
   each pair steps back with opacity rather than with a colour that vanishes. */
.aws-details.has-accent-background-color .aws-details__row dt,
.aws-details.has-neutral-900-background-color .aws-details__row dt,
.aws-details.has-accent-background-color .aws-details__note,
.aws-details.has-neutral-900-background-color .aws-details__note { color: inherit; opacity: .75; }

/*
 * hidden has to actually hide, everywhere.
 *
 * The browser's own [hidden] rule is display: none at the weakest specificity
 * there is, so any class setting display beats it. This first bit me on a
 * filtered card that stayed exactly where it was, and I fixed it for that one
 * selector — which meant it bit me again on the booking wizard, where every
 * step was display: grid and none of them would collapse.
 *
 * Two attribute selectors outrank a single class, so this holds for every block
 * in the theme, including the ones not written yet.
 */
[class^="aws-"][hidden],
[class*=" aws-"][hidden] { display: none; }

/* W79 · Filter chips --------------------------------------------------------- */

/* Tighter than the other sections: these belong to the grid underneath, not to
   a band of their own. */
.aws-chips { padding-block: var(--wp--preset--spacing--4); }
.aws-chips__heading { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-chips__row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); }

.aws-chip {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--2);
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

.aws-chip:hover { background: var(--wp--preset--color--neutral-200); color: var(--wp--preset--color--ink); }

.aws-chip.is-on,
.aws-chip[aria-pressed="true"] {
	background: var(--wp--preset--color--accent);
	border-color: transparent;
	color: var(--wp--preset--color--background);
}

.aws-chip__count { font-variant-numeric: tabular-nums; opacity: .6; }

/* A chip matching nothing stays, and says so. Hiding it would leave the author
   the only person who never finds out the word is wrong. */
.aws-chip__count:empty { display: none; }

.aws-chips__empty {
	color: var(--wp--preset--color--neutral-700);
	margin: var(--wp--preset--spacing--6) 0 0;
}

.aws-chips.has-accent-background-color .aws-chips__empty,
.aws-chips.has-neutral-900-background-color .aws-chips__empty { color: inherit; opacity: .8; }

.aws-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* W29 · Schedule and table --------------------------------------------------- */

.aws-table__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); text-wrap: balance; }

/* The table scrolls in here rather than pushing the page sideways. */
.aws-table__scroll { overflow-x: auto; }
.aws-table__scroll:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.aws-table table { border-collapse: collapse; width: 100%; }

.aws-table :where(th, td) {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
	text-align: start;
	vertical-align: top;
}

.aws-table thead th {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--neutral-700);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.aws-table tbody tr + tr :where(th, td) { border-top: 1px solid var(--wp--preset--color--divider); }
.aws-table tbody th { font-weight: 600; }

/* Times, prices and counts line up only if their digits are the same width. */
.aws-table td { font-variant-numeric: tabular-nums; }

.aws-table__pill {
	background: var(--wp--preset--color--accent-2-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent-2-800);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	white-space: nowrap;
}

.aws-table__note { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--3) 0 0; }

.aws-table.has-accent-background-color :where(thead th, .aws-table__note),
.aws-table.has-neutral-900-background-color :where(thead th, .aws-table__note) { color: inherit; opacity: .75; }

/* W05 · Stat row ------------------------------------------------------------- */

.aws-stats__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-stats__list { display: grid; gap: var(--wp--preset--spacing--6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

/* The figure is lifted above its label. The markup keeps the pair in the order
   they mean; only the drawing is reversed. */
.aws-stat { display: flex; flex-direction: column-reverse; gap: var(--wp--preset--spacing--1); }

.aws-stat__figure {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 0;
}

.aws-stat__label { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); }
.aws-stats.has-accent-background-color .aws-stat__label,
.aws-stats.has-neutral-900-background-color .aws-stat__label { color: inherit; opacity: .75; }

/* W09 · Numbered steps ------------------------------------------------------- */

.aws-steps__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }

/* The counter is the list's own, so a step moved is a step renumbered and no
   number is ever typed where it could go stale. */
.aws-steps__list {
	counter-reset: aws-step;
	display: grid;
	gap: var(--wp--preset--spacing--6);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The number stands beside the step it numbers rather than above it: a disc on
   its own line reads as an ornament over a heading, where alongside it reads as
   the label of the thing next to it. The words below hang off the title rather
   than the disc, so a step of two lines still lines up with a step of one. */
.aws-steps__list .aws-step {
	align-items: center;
	counter-increment: aws-step;
	display: grid;
	gap: 0 var(--wp--preset--spacing--3);
	grid-template-columns: auto minmax(0, 1fr);
}

.aws-steps__list .aws-step::before {
	align-items: center;
	background: var(--wp--preset--color--accent-200);
	border-radius: var(--wp--custom--radius--circle);
	color: var(--wp--preset--color--accent-800);
	content: counter(aws-step, decimal-leading-zero);
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	grid-column: 1;
	grid-row: 1;
	height: var(--wp--preset--spacing--8);
	justify-content: center;
	width: var(--wp--preset--spacing--8);
}

/* Alternating the two accents stops four identical discs reading as one block. */
.aws-steps__list .aws-step:nth-child(even)::before {
	background: var(--wp--preset--color--accent-2-200);
	color: var(--wp--preset--color--accent-2-800);
}

.aws-steps__list .aws-step__title { font-size: var(--wp--preset--font-size--x-large); grid-column: 2; grid-row: 1; margin: 0; }
.aws-steps__list .aws-step__body { grid-column: 2; margin: var(--wp--preset--spacing--1) 0 0; opacity: .8; }

/* W21 · Team grid ------------------------------------------------------------ */

.aws-team__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-team__grid { display: grid; gap: var(--wp--preset--spacing--6); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

/*
 * The kit caps these rather than letting them take the column. A team card is
 * mostly the words — the photograph is there to put a face to them, and at
 * full column width it becomes the card and the name becomes a caption.
 */
.aws-person__image {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--3);
	object-fit: cover;
	width: 100%;
}

/* A row of faces, not a row of portraits. */
.aws-team__grid[data-shape="circle"] .aws-person__image {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--circle);
	margin-inline: auto;
	max-width: var(--wp--custom--portrait--max);
}

.aws-team__grid[data-shape="circle"] .aws-person { text-align: center; }

.aws-person__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-person__role { color: var(--wp--preset--color--accent-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--1) 0 0; }
.aws-person__bio { margin: var(--wp--preset--spacing--2) 0 0; opacity: .8; }
.aws-team__go { margin: var(--wp--preset--spacing--6) 0 0; }

.aws-team.has-accent-background-color .aws-person__role,
.aws-team.has-neutral-900-background-color .aws-person__role { color: inherit; opacity: .8; }

/* W34 · CTA band ------------------------------------------------------------- */

.aws-band__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--3); text-wrap: balance; }
.aws-band__body { margin: 0 0 var(--wp--preset--spacing--6); max-width: 44ch; opacity: .9; }
.aws-band__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); }

/* On a coloured band the accent button has nothing to stand out against, so it
   inverts: the page colour becomes the fill and the accent becomes the text. */
.aws-band.has-accent-background-color .aws-btn--onband,
.aws-band.has-accent-2-background-color .aws-btn--onband,
.aws-band.has-neutral-900-background-color .aws-btn--onband {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent-800);
}

.aws-band.has-accent-background-color .aws-btn--quiet,
.aws-band.has-accent-2-background-color .aws-btn--quiet,
.aws-band.has-neutral-900-background-color .aws-btn--quiet {
	border-color: currentColor;
	color: inherit;
	opacity: .85;
}

/* W16 · Reassurance note ----------------------------------------------------- */

.aws-note {
	color: var(--wp--preset--color--neutral-700);
	font-size: var(--wp--preset--font-size--small);
	margin-block: var(--wp--preset--spacing--3);
}

/* W32 · Alert ---------------------------------------------------------------- */

.aws-alert {
	border-radius: var(--wp--custom--radius--md);
	border-inline-start: var(--wp--preset--spacing--1) solid transparent;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.aws-alert__body { margin: 0; }
.aws-alert--warning { background: var(--wp--preset--color--accent-100); border-inline-start-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-800); }
.aws-alert--good { background: var(--wp--preset--color--accent-2-100); border-inline-start-color: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-2-800); }
.aws-alert--quiet { background: var(--wp--preset--color--neutral-200); border-inline-start-color: var(--wp--preset--color--neutral-400); color: var(--wp--preset--color--neutral-800); }
/* The loudest of the four: filled rather than tinted, because it has to win
   against whatever else is on the page. Its own ground, so its own text
   colour — nothing here is inherited. */
.aws-alert--urgent { background: var(--wp--preset--color--accent-800); border-inline-start-color: var(--wp--preset--color--accent-600); color: var(--wp--preset--color--background); font-weight: 600; }
.aws-alert--urgent a { color: var(--wp--preset--color--background); }

/* W18 · Contact details ------------------------------------------------------ */

.aws-contact__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--4); }
.aws-contact__address { font-style: normal; line-height: 1.7; margin: 0; }
.aws-contact__copy { margin: var(--wp--preset--spacing--3) 0 0; }
.aws-contact__ways { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); margin-top: var(--wp--preset--spacing--4); }
.aws-contact__note { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--3) 0 0; }
.aws-contact.has-accent-background-color .aws-contact__note,
.aws-contact.has-neutral-900-background-color .aws-contact__note { color: inherit; opacity: .8; }

/* W19 · Opening hours -------------------------------------------------------- */

.aws-hours__heading { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-hours__list { display: grid; margin: 0; }

.aws-hours__row {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--2);
}

.aws-hours__row + .aws-hours__row { border-top: 1px solid var(--wp--preset--color--divider); }
.aws-hours__row dt { margin: 0; }
.aws-hours__row dd { font-variant-numeric: tabular-nums; margin: 0; text-align: end; }

/* A shut day is still an answer, so it is quieter rather than absent. */
.aws-hours__row.is-shut { opacity: .55; }

.aws-hours__note { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--3) 0 0; }
.aws-hours.has-accent-background-color .aws-hours__note,
.aws-hours.has-neutral-900-background-color .aws-hours__note { color: inherit; opacity: .8; }

/* The icons ------------------------------------------------------------------ */

.aws-icon { display: block; height: 1.2em; width: 1.2em; }

/* W06 · Icon feature grid ---------------------------------------------------- */

.aws-features__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-features__grid { display: grid; gap: var(--wp--preset--spacing--6); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

/* The icon stands beside what it marks rather than above it, the way the step
   numbers do. Only where there is an icon: a feature without one is a heading
   and a paragraph, and laying that out in two columns indents it past a column
   holding nothing. */
.aws-feature:has(.aws-feature__mark) {
	align-items: center;
	display: grid;
	gap: 0 var(--wp--preset--spacing--3);
	grid-template-columns: auto minmax(0, 1fr);
}

.aws-feature__mark {
	align-items: center;
	background: var(--wp--preset--color--accent-200);
	border-radius: var(--wp--custom--radius--circle);
	color: var(--wp--preset--color--accent-800);
	display: flex;
	grid-column: 1;
	grid-row: 1;
	height: var(--wp--preset--spacing--8);
	justify-content: center;
	width: var(--wp--preset--spacing--8);
}

.aws-features__grid li:nth-child(even) .aws-feature__mark {
	background: var(--wp--preset--color--accent-2-200);
	color: var(--wp--preset--color--accent-2-800);
}

.aws-feature__title { font-size: var(--wp--preset--font-size--x-large); grid-column: 2; grid-row: 1; margin: 0; }
/* Under the words, not under the icon, so a two line heading and a one line
   heading still leave their paragraphs lined up with each other. */
.aws-feature__body { grid-column: 2; margin: var(--wp--preset--spacing--1) 0 0; opacity: .8; }

/* W08 · Media and text ------------------------------------------------------- */

.aws-split__inner {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
	width: 100%;
}

.aws-split__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--3); text-wrap: balance; }
.aws-split__body { margin: 0; opacity: .85; }
.aws-split__claims { display: grid; gap: var(--wp--preset--spacing--2); list-style: none; margin: var(--wp--preset--spacing--4) 0 0; padding: 0; }
.aws-split__claims li { align-items: start; display: flex; gap: var(--wp--preset--spacing--2); }
.aws-split__claims .aws-icon { color: var(--wp--preset--color--accent-2-700); flex: none; margin-top: .15em; }
.aws-split__go { margin: var(--wp--preset--spacing--6) 0 0; }

.aws-split__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* W22 · Testimonials --------------------------------------------------------- */

.aws-quotes__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-quotes__grid { display: grid; gap: var(--wp--preset--spacing--4); grid-template-columns: 1fr; }

.aws-quote {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: var(--wp--preset--spacing--6);
}

.aws-quotes.has-surface-background-color .aws-quote {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
}

.aws-quote__stars { color: var(--wp--preset--color--accent); letter-spacing: .1em; margin: 0; }
.aws-quote__said { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); line-height: 1.35; margin: 0; }
.aws-quote__who { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin-top: auto; }

/* W24 · Gallery -------------------------------------------------------------- */

.aws-gallery__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-gallery__grid { display: grid; gap: var(--wp--preset--spacing--4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.aws-shot figure { margin: 0; }

.aws-shot__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--md);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.aws-shot__caption { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin-top: var(--wp--preset--spacing--2); }
.aws-gallery.has-accent-background-color .aws-shot__caption,
.aws-gallery.has-neutral-900-background-color .aws-shot__caption { color: inherit; opacity: .8; }

/* W14 · Booking wizard ------------------------------------------------------- */

/*
 * Clear of the header that follows the page down, so a jump to this form does
 * not put its heading behind the bar. And no ring drawn around the whole
 * section when it takes focus from such a jump -- the focus is there to move a
 * keyboard on, not to outline a band of the page.
 */
.aws-booking { scroll-margin-block-start: var(--wp--preset--spacing--8); }
.aws-booking:focus { outline: none; }
.aws-booking__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-booking__form { display: grid; gap: var(--wp--preset--spacing--6); max-width: var(--wp--style--global--content-size); }

.aws-booking__step { border: 0; display: grid; gap: var(--wp--preset--spacing--4); margin: 0; padding: 0; }
.aws-booking__step legend { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); padding: 0; }
.aws-booking__step legend:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/*
 * All of it on one screen: the parts stand under one another instead of
 * replacing one another, and where there is room the questions pair up — two
 * to a row is what makes a long form look like a form rather than a queue.
 */
.aws-booking.is-one .aws-booking__step + .aws-booking__step { margin-block-start: var(--wp--preset--spacing--6); }

@container (min-width: 640px) {
	.aws-booking.is-one .aws-booking__step { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-booking.is-one .aws-booking__step legend,
	.aws-booking.is-one .aws-booking__step > .aws-booking__wide { grid-column: 1 / -1; }
}

/*
 * Plainly: one column, no step headings, and the spacing of a form rather than
 * of a page. The headings are hidden rather than dropped -- a fieldset with no
 * legend tells somebody listening to the page nothing about what the group of
 * fields is -- and the day and the time keep each other company, because they
 * are one answer given in two boxes.
 */
.aws-booking.is-plain .aws-booking__form { gap: var(--wp--preset--spacing--4); }
.aws-booking.is-plain .aws-booking__step { gap: var(--wp--preset--spacing--3); grid-template-columns: 1fr; }
.aws-booking.is-plain .aws-booking__step + .aws-booking__step { margin-block-start: var(--wp--preset--spacing--4); }

.aws-booking.is-plain .aws-booking__step legend {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@container (min-width: 420px) {
	.aws-booking.is-plain .aws-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aws-field { display: grid; gap: var(--wp--preset--spacing--2); }
.aws-booking__you { display: grid; gap: var(--wp--preset--spacing--4); }
.aws-booking.is-plain .aws-booking__you { gap: var(--wp--preset--spacing--3); }
.aws-field__label { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.aws-field__optional { color: var(--wp--preset--color--neutral-600); font-weight: 400; }
.aws-pair { display: grid; gap: var(--wp--preset--spacing--4); }

/*
 * One rule for every control on either form, so they are the same height by
 * construction rather than by two rules agreeing. They did not: the text
 * inputs were scoped to .aws-booking and the contact form's section is
 * .aws-form, so on that form only the select was ever styled and the boxes
 * beside it were whatever the browser draws.
 *
 * Written out twice rather than wrapped in :where(), which would zero the
 * specificity of the whole selector and lose to rules it currently beats.
 */
.aws-booking :where(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea),
.aws-said :where(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea),
.aws-form :where(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea) {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	font: inherit;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3);
	width: 100%;
}

.aws-booking :where(input, select, textarea):focus-visible,
.aws-said :where(input, select, textarea):focus-visible,
.aws-form :where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.aws-choices { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); }
.aws-choice { cursor: pointer; }

/* The radio itself is taken out of the flow rather than hidden, so it still
   takes focus and is still what a screen reader is told about. */
.aws-choice input { height: 0; opacity: 0; position: absolute; width: 0; }

.aws-choice span {
	align-items: center;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

.aws-choice input:checked + span { background: var(--wp--preset--color--accent); border-color: transparent; color: var(--wp--preset--color--background); }
.aws-choice input:focus-visible + span { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.aws-booking__estimate { display: grid; gap: var(--wp--preset--spacing--1); margin: 0; }
.aws-booking__estimate strong { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--huge); font-variant-numeric: tabular-nums; font-weight: 400; }
.aws-booking__go { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); }

/* W17 · Contact form --------------------------------------------------------- */

.aws-form__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }

/*
 * One question to a row, which is what "one under another" says it is.
 *
 * The pair is shared with the booking wizard, which asks short questions and
 * does want two of them across -- so it is undone here rather than there. On a
 * contact form the questions are a name, a number and an address, and two of
 * those on a line halves the width of both for no reading gained.
 */
.aws-form:not(.is-columns) .aws-pair { grid-template-columns: minmax(0, 1fr); }

/* W94 · Membership or volunteering ------------------------------------------
 *
 * The form skin above, and one line of its own: what somebody is putting their
 * name down for, held to a measure so it reads rather than running the width
 * of a wide section. */
.aws-join__body { margin: 0 0 var(--wp--preset--spacing--6); max-width: 60ch; opacity: .8; }

/* The answers stand in a column, not a row: they are lines of words rather
   than the two-word choices the contact form offers, and a row of them wrapped
   into something nobody could read down. */
.aws-join .aws-choices { flex-direction: column; align-items: start; }

/* And where several may be picked, they are tick boxes and look like them.
   The pill beside this hides its own box and fills in when chosen, which reads
   as one-of-these however many are ticked. */
.aws-join__ticks { display: grid; gap: var(--wp--preset--spacing--2); }

.aws-join__tick {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--wp--preset--spacing--3);
	min-height: var(--wp--custom--tap-target);
}

.aws-join__tick input { flex: none; }

/* -------------------------------------------------------------------------
 * The form with a map beside it.
 *
 * A contact page asks somebody to write and tells them where to come, and the
 * two belong on one line: the writing on the left, the place on the right.
 * Stacked, the map is below a form most people never scroll past.
 * ------------------------------------------------------------------------- */
.aws-form__where { display: block; }

/* The address the map is of, on the heading's line: a pin, then the place. */
.aws-form__directions {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--6);
}

.aws-form__directions a {
	align-items: center;
	display: inline-flex;
	gap: var(--wp--preset--spacing--2);
}

.aws-form__directions .aws-icon {
	block-size: 1.1em;
	flex: none;
	inline-size: 1.1em;
}

.aws-form__map {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	display: block;
	inline-size: 100%;
}

@container (min-width: 700px) {
	.aws-form.is-beside .aws-form__inner {
		align-items: start;
		column-gap: var(--wp--preset--spacing--8);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/*
	 * The heading names the form and the address names the map, so the two sit
	 * on one line above the two they are over. What the last send had to say
	 * still runs across both -- it is about the section rather than about a
	 * half of it.
	 */
	.aws-form.is-beside .aws-form__inner > .aws-alert { grid-column: 1 / -1; }
	/*
	 * Set on their bottoms rather than their tops, because a heading is bigger
	 * than an address: aligned any other way the frame began where the heading
	 * ended and the form began lower still. Both keep the same room under them,
	 * so the form and the map start on one line.
	 */
	.aws-form.is-beside .aws-form__heading {
		align-self: end;
		grid-column: 1;
		grid-row: 1;
		margin-block-end: var(--wp--preset--spacing--4);
	}

	.aws-form.is-beside .aws-form__directions {
		align-self: end;
		grid-column: 2;
		grid-row: 1;
		margin-block-end: var(--wp--preset--spacing--4);
	}

	/*
	 * And in half a section the questions go one to a row whatever the section
	 * was set to. The pairing is measured against the width of the section,
	 * which has not changed; the width the form actually has, has halved.
	 */
	.aws-form.is-beside .aws-booking__form { grid-template-columns: minmax(0, 1fr); }
	.aws-form.is-beside .aws-pair { display: grid; grid-template-columns: minmax(0, 1fr); }

	/*
	 * The map keeps the height of what is beside it rather than its own.
	 *
	 * Stretched as well as told to be the full height, which is what was
	 * missing: the grid sets its items on their tops, so the column was only
	 * as tall as the map and "the full height" of that was the height it
	 * already had. A form asking eight questions therefore ran a third of a
	 * page below a map that had stopped, and the right of the section was
	 * empty ground where the place was supposed to be.
	 */
	.aws-form.is-beside .aws-form__where { align-self: stretch; block-size: 100%; }
	.aws-form.is-beside .aws-form__map { aspect-ratio: auto; block-size: 100%; min-block-size: 24rem; }
}

.aws-consent { align-items: start; display: flex; gap: var(--wp--preset--spacing--2); }
.aws-consent input { margin-top: .3em; }

/* W11 · Pricing tiers -------------------------------------------------------- */

.aws-tiers__bar { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); justify-content: space-between; margin-bottom: var(--wp--preset--spacing--6); }
.aws-tiers__heading { font-size: var(--wp--preset--font-size--huge); margin: 0; }
.aws-tiers__toggle { display: flex; gap: var(--wp--preset--spacing--2); }
.aws-tiers__grid { display: grid; gap: var(--wp--preset--spacing--4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

.aws-tier {
	background: var(--wp--preset--color--surface);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--6);
}

.aws-tiers.has-surface-background-color .aws-tier,
.aws-plans.has-surface-background-color .aws-tier { background: var(--wp--preset--color--background); border-color: var(--wp--preset--color--divider); }
.aws-tier.is-best { border-color: var(--wp--preset--color--accent); }
.aws-tier__best { color: var(--wp--preset--color--accent-700); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.aws-tier__name { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-tier__price { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--huge); font-variant-numeric: tabular-nums; margin: 0; }
.aws-tier__note { margin: 0; opacity: .8; }
.aws-tier .aws-btn { margin-top: auto; }

/* W13 · Price list ----------------------------------------------------------- */

.aws-prices__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-prices__groups { display: grid; gap: var(--wp--preset--spacing--8); }
.aws-prices__group-name { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-prices__list { display: grid; list-style: none; margin: 0; padding: 0; }

.aws-price {
	align-items: baseline;
	display: flex;
	gap: var(--wp--preset--spacing--4);
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--3);
}

.aws-price + .aws-price { border-top: 1px solid var(--wp--preset--color--divider); }
.aws-price__said { min-width: 0; }
.aws-price__name { font-weight: 600; margin: 0; }
.aws-price__note { margin: var(--wp--preset--spacing--1) 0 0; opacity: .75; }
.aws-price__cost { font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }

/*
 * The end of a row, where a treatment list keeps what a menu of dishes does
 * not: how long it takes, and the way to book it. Only drawn where one of
 * them is set, so a plain list is still a name and a price on one line.
 */
.aws-price__end { display: grid; gap: var(--wp--preset--spacing--1); justify-items: end; text-align: end; }
.aws-price__for {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
	white-space: nowrap;
}
.aws-price__go { margin-top: var(--wp--preset--spacing--1); }

.aws-price__tag {
	background: var(--wp--preset--color--accent-2-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent-2-800);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	margin-inline-start: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
}

.aws-prices__note { color: var(--wp--preset--color--neutral-700); font-size: var(--wp--preset--font-size--small); margin: var(--wp--preset--spacing--6) 0 0; }

/* W15 · Summary panel -------------------------------------------------------- */

.aws-summary {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6);
}

.aws-summary__heading { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-summary__list { display: grid; gap: var(--wp--preset--spacing--2); margin: 0; }
.aws-summary__row { display: flex; gap: var(--wp--preset--spacing--3); justify-content: space-between; }
.aws-summary__row dt { color: var(--wp--preset--color--neutral-700); margin: 0; }
.aws-summary__row dd { font-variant-numeric: tabular-nums; margin: 0; text-align: end; }

.aws-summary__total {
	border-top: 1px solid var(--wp--preset--color--divider);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: var(--wp--preset--spacing--3);
}

.aws-summary__total strong { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-variant-numeric: tabular-nums; font-weight: 400; }

/* W30 · Progress goal -------------------------------------------------------- */

.aws-goal__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-goal__figures { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-goal__figures strong { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--huge); font-variant-numeric: tabular-nums; font-weight: 400; }
.aws-goal__figures span { opacity: .75; }

.aws-goal__bar {
	background: var(--wp--preset--color--neutral-300);
	border-radius: var(--wp--custom--radius--pill);
	height: var(--wp--preset--spacing--3);
	overflow: hidden;
}

.aws-goal__bar span { background: var(--wp--preset--color--accent); display: block; height: 100%; }
.aws-goal__give { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); margin-top: var(--wp--preset--spacing--4); }
.aws-goal__give .aws-chip { list-style: none; text-decoration: none; }

/* W38 · Service area --------------------------------------------------------- */

.aws-area__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--3); }
.aws-area__body { margin: 0 0 var(--wp--preset--spacing--4); max-width: 52ch; }
.aws-area__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0 0 var(--wp--preset--spacing--4); padding: 0; }
.aws-area__check { display: grid; gap: var(--wp--preset--spacing--3); max-width: var(--wp--style--global--content-size); }

.aws-area input[type="text"] {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	font: inherit;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3);
	width: 100%;
}

.aws-area__answer { margin: 0; }
.aws-area__answer:empty { display: none; }
.aws-area__answer.is-in { color: var(--wp--preset--color--accent-2-700); }
.aws-area__answer.is-out { color: var(--wp--preset--color--accent-700); }

.aws-area.has-accent-background-color .aws-area__answer,
.aws-area.has-neutral-900-background-color .aws-area__answer { color: inherit; }

/* W56 · Image slider --------------------------------------------------------- */

.aws-slider__heading { font-size: var(--wp--preset--font-size--huge); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-slider__frame { position: relative; }

/*
 * The slider itself, before any script: a scroll-snap strip. It swipes, it
 * scrolls, and it takes focus so the keyboard can move it too.
 */
.aws-slider__track {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.aws-slider__track::-webkit-scrollbar { display: none; }
.aws-slider__track:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.aws-slide { scroll-snap-align: start; }

.aws-slide__image {
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.aws-slide__said { margin-top: var(--wp--preset--spacing--3); }
.aws-slide__title { font-weight: 600; margin: 0; }
.aws-slide__body { margin: var(--wp--preset--spacing--1) 0 0; opacity: .8; }

.aws-slider__arrow {
	align-items: center;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--circle);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	height: var(--wp--custom--tap-target);
	justify-content: center;
	position: absolute;
	top: var(--wp--preset--spacing--8);
	width: var(--wp--custom--tap-target);
}

.aws-slider__arrow.is-back { inset-inline-start: var(--wp--preset--spacing--3); }
.aws-slider__arrow.is-next { inset-inline-end: var(--wp--preset--spacing--3); }
.aws-slider__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Blunted at the ends rather than removed — an arrow that vanishes takes its
   space with it and moves everything beside it. */
.aws-slider__arrow[disabled] { cursor: default; opacity: .35; }

.aws-slider__marks { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); justify-content: center; list-style: none; margin: var(--wp--preset--spacing--4) 0 0; padding: 0; }

.aws-slider__mark {
	background: var(--wp--preset--color--neutral-300);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	display: block;
	height: var(--wp--preset--spacing--2);
	padding: 0;
	width: var(--wp--preset--spacing--6);
}

.aws-slider__mark.is-on { background: var(--wp--preset--color--accent); }
.aws-slider__mark:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Thumbnails are the same control wearing the picture it goes to. */
.aws-slider__marks[data-kind="thumbs"] .aws-slider__mark {
	background: transparent;
	border-radius: var(--wp--custom--radius--sm);
	height: auto;
	overflow: hidden;
	width: auto;
}

.aws-slider__marks[data-kind="thumbs"] .aws-slider__mark img {
	display: block;
	height: var(--wp--preset--spacing--8);
	object-fit: cover;
	opacity: .55;
	width: calc(var(--wp--preset--spacing--8) * 1.5);
}

.aws-slider__marks[data-kind="thumbs"] .aws-slider__mark.is-on img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.aws-slider__track { scroll-behavior: auto; }
}

/* W02 · Header --------------------------------------------------------------- */

/*
 * A template part that drew nothing still occupies a row, and the gap between
 * the page's blocks is applied either side of it — so a site that turned its
 * strip off got a band of ground where the strip used to be, which is exactly
 * what turning it off was meant to remove.
 *
 * Not :empty — the part is printed as a div holding a newline, and a whitespace
 * text node is enough to make :empty false. Having no element inside it is the
 * thing actually being asked.
 */
.wp-block-template-part:not(:has(*)) { display: none; }

/*
 * And the gap it used to sit in. Hiding a box does not stop what follows it
 * being "the block after another block", so the space between them stayed and
 * showed the page's own ground through it — the band was the gap, not the part.
 */
.wp-block-template-part:not(:has(*)) + * { margin-block-start: 0; }

/*
 * A header on the picture means the picture starts at the top of the window.
 * Two things sit above it otherwise: the padding the page wrapper carries, and
 * the gap before the first section — which is there because the header is a
 * block before it, even though an overlaid header is out of the flow entirely.
 */
body.aws-head-over .wp-site-blocks { padding-top: 0; }
body.aws-head-over .wp-site-blocks > main { margin-block-start: 0; }

/* Nothing to hold off the last section. */
body.aws-no-foot .wp-site-blocks { padding-bottom: 0; }

/*
 * The room a page keeps around what is on it.
 *
 * Said here rather than written into the template as a style, because it has
 * to be able to come off: a page carrying no title of its own opens on a
 * section, and a section brings its own room -- so the two were spent one
 * after the other and a site that hid its titles got the title's space back
 * and kept the space around it.
 */
.aws-page { padding-block: var(--wp--preset--spacing--8); }
body.aws-untitled .aws-page { padding-block-start: 0; }

/*
 * And the band the title was in takes no room.
 *
 * The title is still there when it is hidden -- it is what says what the whole
 * page is, and a page whose outline starts at a second-level heading is a
 * fragment to a screen reader and a page about nothing to a search engine --
 * so it is put out of sight rather than taken out. Out of sight is out of the
 * flow, which leaves the band around it holding a row of nothing and the gap
 * the layout puts after one.
 */
body.aws-untitled .aws-page > .wp-block-group:first-child { block-size: 0; margin-block: 0; padding-block: 0; }
body.aws-untitled .aws-page > .wp-block-group:first-child + * { margin-block-start: 0; }

.aws-head {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	container-type: inline-size;

	/*
	 * Less air than a section of the page gets, because a header is not one.
	 *
	 * It was taking the same thirty-five pixels above and below that a band of
	 * content takes, which is right for something a visitor reads and wrong
	 * for the bar they get past on the way to it -- thirty-six pixels between
	 * the button and the rule under it, on every page, before anything is
	 * said. What is here is the room the row needs and no more; a site that
	 * wants the old amount asks for a tall header, which is what that setting
	 * is for.
	 */
	padding-block: var(--wp--preset--spacing--4);
}

/* Sticky costs a strip of every screen. Only where it was asked for. */
.aws-head.is-sticky { position: sticky; top: 0; z-index: 20; }

/* The other ways the same site is drawn, beside the name. Its panel is the
   menu's own, so it opens, closes and searches the way every group here does;
   what is different is only where it hangs. */
.aws-head__kin { position: relative; }

.aws-head__kinOpen {
	align-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--1);
	min-height: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--3);
}

/* The search at the top of a long menu group. It is put there by the script
   that makes the group openable, so it never appears where it would not work. */
.aws-head__sift { padding: 0 0 var(--wp--preset--spacing--2); }

.aws-head__sift input {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
	inline-size: 100%;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
}

/*
 * On the section below rather than above it.
 *
 * The ground and the rule go: what is behind the header is the picture, and a
 * line under it would draw a bar where the point is that there is none. The
 * words are the lightest neutral because what they sit on is a photograph, not
 * the palette — the same reasoning as the stage's own text. A site that chose
 * its own header colours keeps them, so has-own-colours is left alone.
 */
.aws-head.is-over {
	background: transparent;
	border-bottom: 0;
	inset-inline: 0;
	position: absolute;
	top: 0;
	z-index: 20;
}

.aws-head.is-over:not(.has-own-colours),
.aws-head.is-over:not(.has-own-colours) a {
	color: var(--wp--preset--color--neutral-100);
}

/*
 * Except inside a panel, which brings its own ground with it. The light words
 * are for a photograph; on the panel's own background they are white on cream,
 * which is a menu that opens onto nothing legible.
 */
.aws-head.is-over .aws-head__panel,
.aws-head.is-over .aws-head__panel a { color: var(--wp--preset--color--ink); }

/* Sticky and over are the same corner of the screen; over wins, because a
   header that unsticks itself halfway down a picture is the worse of the two. */
.aws-head.is-over.is-sticky { position: absolute; }

.aws-head__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);

	/*
	 * The gutter at the sides only. The section around this already sets the
	 * space above and below -- and it is the section the three header heights
	 * are set on -- so padding the row as well spent it twice: fifty-three
	 * pixels between the menu and the rule under it, of which eighteen were
	 * nobody's decision.
	 */
	padding-inline: var(--wp--preset--spacing--4);
	width: 100%;
}

.aws-head__brand { color: var(--aws-brand-name, inherit); display: inline-flex; flex-direction: column; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; text-decoration: none; }
/* The line under the name. */
.aws-head__says {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	/*
	 * No dimming. This line now carries whatever colour the site chose for it
	 * on the branding screen, and fading that by .85 quietly overrules the
	 * choice — a line picked out in white came back grey. Where no colour was
	 * chosen it inherits the header's, which is the right answer anyway.
	 */
}

.aws-head__brand img { display: block; height: auto; max-height: var(--aws-brand-mark, calc(var(--wp--preset--spacing--8) * 1.5)); max-width: 100%; object-fit: contain; width: auto; }

.aws-head__toggle {
	background: transparent;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	cursor: pointer;
	margin-inline-start: auto;
	min-height: var(--wp--custom--tap-target);
	min-width: var(--wp--custom--tap-target);
}

.aws-head__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* The links are shown by default and the script is what folds them away, so a
   page without it is a long header rather than a menu nobody can open. */
.aws-head__nav { flex-basis: 100%; }
.aws-head__links { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; }
/* No line under a menu item, in any state. A row of headings across the top
   of a page is read as a menu by where it is; underlining each one turns the
   row into five links in a sentence. */
.aws-head__links a { text-decoration: none; }
.aws-head__links a:hover { text-decoration: none; }

/* The page somebody is on is marked by weight rather than by a line, so it is
   still marked by something other than colour. */
.aws-head__links a[aria-current="page"] { font-weight: 700; text-decoration: none; }
/* The line a grouped menu carries under a title: what the thing below it is,
   in whoever built the menu's own words. Quieter, and on its own line, so a
   heading reads as one thing rather than two. */
.aws-head__sub { color: var(--wp--preset--color--neutral-600); display: block; font-size: var(--wp--preset--font-size--small); }

/* A group and the way into it sit on one line together. */
.aws-head__item.has-group { align-items: baseline; display: flex; gap: var(--wp--preset--spacing--1); position: relative; }

.aws-head__open {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: var(--wp--preset--spacing--1);
}

.aws-head__open:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/*
 * Whoever is signed in, at the end of the row. A group like any other in the
 * header — the same button, the same panel, opened by the same script — but
 * hung off the row itself rather than off a menu item, because what is in it is
 * about the person and not about the site.
 */
.aws-head__me { position: relative; }
.aws-head__meOpen { align-items: center; display: inline-flex; gap: var(--wp--preset--spacing--1); white-space: nowrap; }
.aws-head__open[aria-expanded="true"] span[aria-hidden] { display: inline-block; transform: rotate(180deg); }

/*
 * Narrow, a group is an indented list under its own name — nothing floats, and
 * the whole menu is one column somebody scrolls.
 */
.aws-head__panel {
	display: grid;
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: var(--wp--preset--spacing--2) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--4);
}
/* A panel is a list of places to go, not a paragraph with links in it: five
   underlined lines under each other read as a page of citations. Underlined on
   hover and on focus, so the affordance is there when somebody reaches for it. */
.aws-head__panel a { text-decoration: none; }

/* Whose panel this is, at the top, and the way out at the bottom under a line.
   The middle is places to go; those two are not, and a list where all three
   look alike is a list somebody reads through to find the one they wanted. */
/* The head and the foot are centred; the places to go between them are not.
   A list reads down its left edge, and centring that list would make somebody
   hunt for the start of every line -- but the two that are not list items are
   better for being set apart, which is what centring them does. */
/* The two of them a size up on the list between them: they are the way in and
   the way out, and a panel where every line is the same size is a panel
   somebody reads before they can act on it. */
.aws-head__meTop a,
.aws-head__meOut a {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.aws-head__meTop {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	padding-block-end: var(--wp--preset--spacing--2);
	text-align: center;
}

.aws-head__meOut {
	border-top: 1px solid var(--wp--preset--color--divider);
	padding-block-start: var(--wp--preset--spacing--2);
	text-align: center;
}

.aws-head__panel a:hover,
.aws-head__panel a:focus-visible { text-decoration: underline; }

.aws-head__ways { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); }
.aws-head__phone { font-variant-numeric: tabular-nums; text-decoration: none; }

/* W36 · Footer --------------------------------------------------------------- */

/*
 * Inline only. The block itself is padded above and below by the rule every
 * section shares, and this added the same again — two spacing--8 bands at each
 * end of a footer that is four short lines, which read as a footer stretched
 * for no reason.
 */
.aws-foot__inner {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
	width: 100%;
}

.aws-foot__cols { display: grid; gap: var(--wp--preset--spacing--6); grid-template-columns: 1fr; }
.aws-foot__name { color: var(--aws-brand-name, inherit); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-foot__blurb { margin: var(--wp--preset--spacing--2) 0 0; max-width: 32ch; opacity: .8; }
.aws-foot__address { font-style: normal; margin: var(--wp--preset--spacing--2) 0 0; opacity: .8; }
.aws-foot__col-name { font-size: var(--wp--preset--font-size--small); font-weight: 600; margin: 0 0 var(--wp--preset--spacing--2); opacity: .6; }
.aws-foot__col ul { display: grid; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; }
/*
 * Links take the colour of the text around them on a coloured or dark ground.
 *
 * theme.json gives every link accent-700, which is right on paper and unreadable
 * on near-black. Fourth time this session that a colour has failed by being
 * chosen without reference to what it sits on; the rule is simply that anything
 * setting a ground must settle what goes on it.
 */
.aws-foot.has-neutral-900-background-color a,
.aws-foot.has-accent-background-color a,
.aws-foot.has-accent-2-background-color a,
.aws-head.has-neutral-900-background-color a,
.aws-head.has-accent-background-color a { color: inherit; }

.aws-foot__col a { text-decoration: none; }
.aws-foot__col a:hover { text-decoration: underline; }

.aws-foot__socials { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; }

.aws-foot__socials a {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--circle);
	display: flex;
	height: var(--wp--custom--tap-target);
	justify-content: center;
	opacity: .7;
	text-decoration: none;
	width: var(--wp--custom--tap-target);
}

.aws-foot__socials a:hover { opacity: 1; }
.aws-foot__legal { font-size: var(--wp--preset--font-size--small); margin: 0; opacity: .6; }

/* Two up ------------------------------------------------------------------- */

@container (min-width: 700px) {
	/* Wide enough for one row: the links sit beside the name and the button is
	   never needed. */
	.aws-head__nav { flex-basis: auto; margin-inline-start: auto; min-width: 0; }

	/* Unless the header has been asked to group itself. That auto margin is
	   the whole of what holds the name and the menu apart, so grouping them is
	   a matter of taking it away and saying which end the row sits at. The
	   ways -- the search, the number, the button -- follow the menu, because
	   they are the same cluster once it stops being pushed. */
	.aws-head:is(.is-at-start, .is-at-center, .is-at-end) .aws-head__nav { margin-inline-start: 0; }
	.aws-head.is-at-start .aws-head__inner { justify-content: flex-start; }
	.aws-head.is-at-center .aws-head__inner { justify-content: center; }
	.aws-head.is-at-end .aws-head__inner { justify-content: flex-end; }

	/* And the menu itself stops hugging its own right edge, or a grouped
	   header has its links pressed against the search beside them. */
	.aws-head:is(.is-at-start, .is-at-center) .aws-head__links { justify-content: flex-start; }

	/* Wrapping, because a menu is as long as the site is. A newspaper with nine
	   sections filled the row and pushed the button on the end of it onto a
	   line of its own, under the masthead, where it read as a mistake. The
	   links take a second row instead; the button stays where it was put. */
	.aws-head__links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
		justify-content: flex-end;
	}

	/* Wide, a group hangs under its own name rather than pushing the row
	   apart. It is still a nested list; only where it is drawn changes. */
	.aws-head__panel {
		background: var(--wp--preset--color--background);
		border: 1px solid var(--wp--preset--color--divider);
		border-radius: var(--wp--custom--radius--md);
		box-shadow: var(--wp--preset--shadow--md);
		inset-inline-start: 0;
		margin: 0;
		min-width: 12em;
		padding: var(--wp--preset--spacing--3);
		position: absolute;
		top: calc(100% + var(--wp--preset--spacing--2));
		z-index: 30;
	}
	/* Off the right-hand edge, since it is the last thing in the row and a
	   panel opening leftward from there hangs off the page. */
	.aws-head__me .aws-head__panel { inset-inline: auto 0; }

	/*
	 * And once it has a ground of its own, the words in it are the page's ink
	 * rather than the header's.
	 *
	 * A header that was given colours passes them down to everything inside
	 * it, which is right for the name and the menu -- they sit on that ground.
	 * A panel does not: it is a pale box hanging under the bar. So a site with
	 * a dark header had a white list in a cream box, and the menu it opened
	 * looked empty. Only here, because narrower than this the panel has no
	 * ground of its own and does sit on the header's.
	 *
	 * Said on the panel and not on the links in it. A link in a header that
	 * was given colours already inherits, so the panel is the one thing that
	 * has to be told -- and telling each link instead would beat the accent
	 * the section being read is written in.
	 */
	:is(.aws-head, .aws-mast).has-own-colours .aws-head__panel { color: var(--wp--preset--color--ink); }

	.aws-head__ways { margin-inline-start: 0; }
	.aws-foot__cols { grid-template-columns: 2fr 1fr 1fr; }

	/* Two at a time once there is room for two, so the strip reads as a strip
	   rather than as one picture with an edge showing. */
	.aws-slider__track { grid-auto-columns: calc(50% - var(--wp--preset--spacing--2)); }
	.aws-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aws-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * Stacked, the picture always follows the words whichever side it is set
	 * to — nobody scrolls past a picture to find out what it is of. The side
	 * only means anything once the two sit next to each other.
	 */
	.aws-split__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-split__inner[data-side="start"] .aws-split__said { order: 2; }

	/*
	 * The pair sits side by side only when there is room for both halves.
	 * Squeezed, a value wraps to four lines beside a one-word term and the
	 * list stops reading as pairs at all — stacked is the better failure.
	 */
	.aws-details__row {
		gap: var(--wp--preset--spacing--4);
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

/* Three and four up -------------------------------------------------------- */

@container (min-width: 1000px) {
	/*
	 * Following only happens where there is room beside the content. In one
	 * column a panel that follows you down covers what you were reading.
	 */
	.aws-summary.is-sticky { position: sticky; top: var(--wp--preset--spacing--4); }

	.aws-cards__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-cards__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aws-team__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-team__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aws-gallery__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-gallery__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aws-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-quotes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-tiers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aws-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/*
	 * The hero splits later than the grids do, and deliberately.
	 *
	 * The brief's 700 is the threshold for a grid of equal cards. A hero is not
	 * that: it is a display headline beside a picture, and splitting a 760px
	 * container in two leaves the headline about 370px, which breaks
	 * "One headline that says what you do." across five lines. Stacked reads
	 * better than cramped until there is real room for both.
	 */
	.aws-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.aws-hero__figure { margin-inline: 0; max-width: none; }
}

/* States ------------------------------------------------------------------- */

.aws-btn:focus-visible,
.aws-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.aws-btn, .aws-more { transition: none; }
}

/* -------------------------------------------------------------------------
 * Record detail — what an item in a list holds.
 *
 * A definition list rather than a table: these are a label and its answer, not
 * rows of comparable things, and a table of two columns is a list wearing a
 * grid. Wide enough and the terms take a column of their own; narrow and each
 * term sits above its answer, which is the only arrangement that survives a
 * long label beside a long value.
 * ------------------------------------------------------------------------- */
.aws-record {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-record__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--3);
}

.aws-record__lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--4);
}

.aws-record__list {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.aws-record__row {
	border-top: 1px solid var(--wp--preset--color--divider);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding-top: var(--wp--preset--spacing--3);
}

@container (min-width: 700px) {
	.aws-record__row {
		align-items: baseline;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--4);
	}
}

.aws-record__term {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.aws-record__value {
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.aws-record__lines {
	display: grid;
	gap: var(--wp--preset--spacing--1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-record__lines span {
	color: var(--wp--preset--color--neutral-600);
	display: block;
}

.aws-record__subtitle {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--2);
	opacity: .75;
}

.aws-record__said {
	margin: 0 0 var(--wp--preset--spacing--4);
	max-width: 60ch;
}

.aws-record__act {
	margin: var(--wp--preset--spacing--6) 0 0;
}

/* -------------------------------------------------------------------------
 * W81 · Locations and branches.
 *
 * Cards rather than a table, because the columns of one place have nothing to
 * do with the columns of another: a branch open two evenings a week and a main
 * site open six days do not line up, and forcing them to lines up nothing.
 * ------------------------------------------------------------------------- */
.aws-places {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-places__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-places__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--6);
}

.aws-places__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@container (min-width: 700px) {
	.aws-places__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1000px) {
	.aws-places__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-place {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6);
}

.aws-place__kind {
	color: var(--wp--preset--color--accent-700);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.aws-place__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-place__where {
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	margin: 0;
}

/* A telephone number broken across two lines is a telephone number somebody
   misreads. It wraps before the number, never inside it. */
.aws-place__where a {
	white-space: nowrap;
}

.aws-place__hours {
	border-top: 1px solid var(--wp--preset--color--divider);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	padding-top: var(--wp--preset--spacing--3);
}

.aws-place__row {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
}

.aws-place__row dt {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--small);
}

.aws-place__row dd {
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.aws-place__has {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-place__has li {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

/* Pinned to the foot so two cards of unequal height still line their buttons
   up, which is what a reader compares them by. */
.aws-place__act {
	margin: auto 0 0;
}

/* -------------------------------------------------------------------------
 * Faith · W74 the date, W71 a time moving, W75 a janazah, W78 the madrasah.
 *
 * The three notices share a shape on purpose: a masjid's front page carries
 * several of these at once and they should read as one board rather than as
 * four unrelated cards from four unrelated designers.
 * ------------------------------------------------------------------------- */
.aws-hijri {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--6);
	text-align: center;
}

.aws-hijri__date {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.aws-hijri__today,
.aws-hijri__ahead,
.aws-hijri__moon {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.aws-hijri__today {
	color: var(--wp--preset--color--neutral-600);
}

.aws-hijri__ahead {
	color: var(--wp--preset--color--accent-700);
}

/*
 * Held to the same edges as everything else on the page.
 *
 * A notice is a section with no inner wrapper -- the card is the section --
 * so it sat flush against the page grid while every section that does have one
 * held its contents a little inside it. The prayer cards above ran from 110 to
 * 1315 and the notices from 93 to 1333, sticking out at both ends of a page
 * that is otherwise one column.
 */
.aws-moves,
.aws-janazah { margin-inline: var(--wp--preset--spacing--4); }

.aws-moves {
	container-type: inline-size;
	background: var(--wp--preset--color--accent-100);
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--accent-800);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.aws-moves__inner {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.aws-moves__what {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* Big enough to read from across a hall, which is where these get printed and
   taped to a door. */
.aws-moves__time {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 0;
}

.aws-moves__when {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	opacity: .85;
}

/* Quieter than every other notice in the kit, deliberately. */
.aws-janazah {
	background: var(--wp--preset--color--neutral-200);
	border-inline-start: 2px solid var(--wp--preset--color--neutral-600);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--neutral-800);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.aws-janazah__said {
	margin: 0;
	max-width: 60ch;
}

.aws-madrasah {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-madrasah__inner {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	justify-items: start;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-madrasah__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.aws-madrasah__body {
	margin: 0;
	max-width: 60ch;
}

.aws-madrasah__act {
	margin: var(--wp--preset--spacing--3) 0 0;
}

/* -------------------------------------------------------------------------
 * Faith · W68 the board, W70 jumu'ah, W69 the month, W73 sittings, W76 the
 * library.
 *
 * Times are set in tabular figures everywhere they appear. A column of times
 * where the digits are different widths is a column that does not line up, and
 * lining up is the entire job of a prayer board.
 * ------------------------------------------------------------------------- */
.aws-board,
.aws-jumuah,
.aws-month,
.aws-sits,
.aws-library {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-board__inner,
.aws-jumuah__inner,
.aws-month__inner,
.aws-sits__inner,
.aws-library__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

/*
 * What day it is on the left, the facts of it on the right, one line.
 *
 * The facts had a line of their own under the heading, which spent a row on
 * three short phrases and pushed the times down by it. They are the same kind
 * of thing the heading is — what is true of today — and the far end of a
 * heading's line is empty.
 *
 * Beside it rather than pushed to the far edge, which would read as two things
 * that happen to share a line instead of one sentence about today.
 *
 * Wrapping, because on a narrow board they do not fit beside it, and then they
 * take the line they used to have.
 */
.aws-board__top {
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--6);
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--6);
	row-gap: var(--wp--preset--spacing--2);
}

/* The row holds them apart now, so the heading stops holding itself off what
   is under it. */
.aws-board__top .aws-board__heading,
.aws-board__top .aws-board__facts { margin-block: 0; }

.aws-board__heading,
.aws-jumuah__heading,
.aws-month__heading,
.aws-sits__heading,
.aws-library__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--3);
}

/*
 * And the Hijri date on the heading's own line rather than under it: "Today"
 * and "14 Rabi' al-Awwal 1447" are one answer to one question, and a masjid
 * that gives both is not giving two headings.
 */
.aws-board__hijri {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	opacity: .8;
}

.aws-board__hijri::before {
	content: '·';
	margin-inline: var(--wp--preset--spacing--1);
	opacity: .55;
}

.aws-board__facts,
.aws-board__note,
.aws-month__note,
.aws-jumuah__note,
.aws-sits__note {
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--3) 0 0;
	opacity: .85;
}

.aws-board__facts {
	margin-top: 0;
}

/*
 * A row that runs sideways rather than one that has to fit.
 *
 * The board is five prayers, or six with sunrise, or seven when Friday is held
 * twice, and on a telephone it was never going to be one line of any of them.
 * Wrapped, the ones that fell to the second row read as a separate thing;
 * squeezed, every card was too narrow for a time. So it scrolls, and each card
 * snaps to the near edge so the row never stops half way through one.
 *
 * Cards grow to fill the width when they all fit and stop shrinking at a
 * width a time can be read in, which is what decides whether there is anything
 * to scroll at all.
 */
.aws-board__times {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-snap-type: x proximity;
	/* The bar itself is furniture; the row says it scrolls by being cut off at
	   the edge, and by the arrows above it. */
	scrollbar-width: none;
}

/*
 * As many across as it was given, not five.
 *
 * Five was the number of daily prayers, and a board is not only the daily
 * prayers: Friday belongs on it, and a masjid that adds Eid or a second
 * Jumu'ah has seven. Written as five, the sixth wrapped onto a line of its own
 * and read as an afterthought rather than as the one time most visitors came
 * to look up. Equal columns either way, because lining up is the entire job of
 * a prayer board.
 */
.aws-board__times::-webkit-scrollbar { display: none; }

.aws-board__times > * {
	flex: 1 0 9.5rem;
	scroll-snap-align: start;
}

/*
 * The way along the row. Drawn rather than typed, and turned rather than drawn
 * twice: one shape, one of them pointing the other way.
 */
/*
 * One at each end, pointing the way it goes.
 *
 * Side by side they were two arrows in a corner and somebody had to read which
 * was which before pressing. At the ends of the row each one sits where the
 * thing it fetches is coming from, which is the same answer a thumb gives on a
 * phone without being told.
 */
.aws-board__along {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	justify-content: space-between;
	margin: var(--wp--preset--spacing--3) 0 0;
}

.aws-board__step {
	align-items: center;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--circle);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--wp--custom--tap-target);
	min-inline-size: var(--wp--custom--tap-target);
	opacity: .55;
}

.aws-board__step:hover:not(:disabled) { opacity: 1; }
.aws-board__step:disabled { cursor: default; opacity: .2; }

.aws-board__step span {
	background: currentColor;
	block-size: 0.6em;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	inline-size: 0.55em;
}

.aws-board__step[data-aws-step="back"] span { transform: rotate(180deg); }

@media (pointer: fine) {
	.aws-board__step {
		min-block-size: var(--wp--custom--tap-target-fine);
		min-inline-size: var(--wp--custom--tap-target-fine);
	}
}

.aws-time {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--4);
	text-align: center;
}

/* The one being waited for. Its own ground, so its own text colour — nothing
   here is left to inherit from whatever it happens to sit inside. */
.aws-time.is-next {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

/*
 * The prayer's name and its Arabic on one line, Arabic after.
 *
 * Stacked, they were two lines of label above one line of time, and a card
 * that spends two thirds of itself naming the thing is a card somebody reads
 * instead of scanning. On one line the name is a label and the time is the
 * card, which is the way round a board is used.
 */
.aws-time__name {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--x-small);
	gap: var(--wp--preset--spacing--1);
	justify-content: center;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

/*
 * And the spacing taken back off the Arabic.
 *
 * Letter-spacing pulls a word's letters apart, which in Arabic stops them
 * joining: the script is cursive, and spaced out it is not a harder word to
 * read but a different and wrong shape. Uppercasing does nothing to it either
 * way, and is turned off with it so nothing is being asked of the script that
 * the script has no answer to.
 */
.aws-time__arabic {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: normal;
	text-transform: none;
}

.aws-time__flag { font-size: var(--wp--preset--font-size--x-small); }

/* Between the parts, and only between them: drawn by whichever part follows
   the name, so a prayer with no Arabic against it gets no stray dot. */
.aws-time__arabic::before,
.aws-time__flag::before {
	content: '·';
	letter-spacing: normal;
	margin-inline-end: var(--wp--preset--spacing--1);
	opacity: .55;
}

/* Named for where they are rather than for what they say, because which of
   the two is which is a setting now. */
.aws-time__main {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 0;
}

.aws-time__sub,
.aws-time__note {
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	margin: 0;
	opacity: .85;
}

.aws-board__acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: var(--wp--preset--spacing--6) 0 0;
}

.aws-jumuah__list,
.aws-sits__list,
.aws-library__list {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-khutbah,
.aws-sit,
.aws-lecture {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.aws-khutbah__said,
.aws-sit__said,
.aws-lecture__title {
	flex: 1 1 14rem;
}

.aws-khutbah__name,
.aws-sit__when,
.aws-lecture__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.aws-khutbah__detail,
.aws-sit__detail,
.aws-lecture__about {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	opacity: .8;
}

/*
 * The khutbahs as cards across rather than rows down.
 *
 * A masjid holds one, two, sometimes four, and a full-width row each turns a
 * handful of times into a list somebody scrolls. Across, they are the same
 * shape as the prayer cards above them -- which is what they are: a label, the
 * time, and the thing you check once you have the time.
 *
 * As many across as fit, so one khutbah is a card the width of the section and
 * four are four, without a number written down anywhere that has to be right.
 */
.aws-jumuah__list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.aws-khutbah {
	align-content: start;
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--4);
	text-align: center;
}

/* The label, sized and spaced like the one on a prayer card, because it is
   doing the same job a few inches above. */
.aws-khutbah__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aws-khutbah__detail { font-size: var(--wp--preset--font-size--x-small); }

.aws-khutbah__time {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 0;
}

.aws-sit__room {
	background: var(--wp--preset--color--accent-2-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent-2-800);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

.aws-sit__act,
.aws-lecture__act,
.aws-month__act,
.aws-library__feed {
	margin: 0;
}

.aws-month__scroll {
	overflow-x: auto;
}

.aws-month__table {
	border-collapse: collapse;
	width: 100%;
}

.aws-month__table th,
.aws-month__table td {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	text-align: start;
	white-space: nowrap;
}

.aws-month__table thead th {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.aws-month__time {
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* Today's row, marked in a word as well as a colour — a row that is only a
   different shade is a row some people cannot pick out. */
.aws-month__table .is-today {
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-800);
}

.aws-month__flag {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin-inline-start: var(--wp--preset--spacing--2);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Faith · W77 Ramadan, W72 giving.
 * ------------------------------------------------------------------------- */
.aws-ramadan,
.aws-give {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-ramadan__inner,
.aws-give__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-ramadan__heading,
.aws-give__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--6);
}

.aws-ramadan__list {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

@container (min-width: 700px) {
	.aws-ramadan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aws-ramadan__row {
	align-items: baseline;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.aws-ramadan__row dt {
	font-size: var(--wp--preset--font-size--small);
}

.aws-ramadan__row dd {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.aws-ramadan__note,
.aws-give__note {
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--4) 0 0;
	max-width: 60ch;
	opacity: .85;
}

.aws-ramadan__act {
	margin: var(--wp--preset--spacing--4) 0 0;
}

.aws-give__funds {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@container (min-width: 700px) {
	.aws-give__funds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1000px) {
	.aws-give__funds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-fund {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--6);
}

.aws-fund__kind {
	color: var(--wp--preset--color--accent-700);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.aws-fund__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-fund__body {
	margin: 0;
}

.aws-fund__amounts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-fund__amounts li {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	font-variant-numeric: tabular-nums;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

.aws-fund__act {
	margin: auto 0 0;
}

.aws-appeal {
	background: var(--wp--preset--color--accent-100);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--accent-800);
	display: grid;
	gap: var(--wp--preset--spacing--2);
	justify-items: start;
	margin-top: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6);
}

.aws-appeal__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-appeal__figures {
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.aws-appeal__figures strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
}

.aws-appeal__bar {
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill);
	height: var(--wp--preset--spacing--2);
	overflow: hidden;
	width: 100%;
}

.aws-appeal__bar span {
	background: var(--wp--preset--color--accent);
	display: block;
	height: 100%;
}

.aws-appeal__note {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	max-width: 60ch;
}

.aws-appeal__act {
	margin: var(--wp--preset--spacing--2) 0 0;
}

/* -------------------------------------------------------------------------
 * W28 questions, W10 a history, W23 marks, W12 a comparison, W25 posts,
 * W27 tabs.
 * ------------------------------------------------------------------------- */
.aws-asked,
.aws-story,
.aws-marks,
.aws-versus,
.aws-chan,
.aws-film,
.aws-posts,
.aws-reel,
.aws-said,
.aws-on,
.aws-shop,
.aws-tabs {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

/*
 * The board is the first thing on a masjid's page and is read as part of the
 * furniture rather than as a section of writing -- a strip of times under the
 * menu, the way it is on the wall. Held off the header by a section's worth of
 * room it stopped being that and became a section with a gap above it.
 */
.aws-board { padding-block-start: var(--wp--preset--spacing--4); }

.aws-asked__inner,
.aws-story__inner,
.aws-marks__inner,
.aws-versus__inner,
.aws-film__inner,
.aws-reel__inner,
.aws-said__inner,
.aws-posts__inner,
.aws-on__inner,
.aws-shop__inner,
.aws-tabs__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-asked__heading,
.aws-story__heading,
.aws-marks__heading,
.aws-versus__heading,
.aws-posts__heading,
.aws-reel__heading,
.aws-shop__heading,
.aws-tabs__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--6);
}

/* Questions ---------------------------------------------------------------- */
.aws-asked__list {
	border-top: 1px solid var(--wp--preset--color--divider);
	max-width: 70ch;
}

.aws-ask {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.aws-ask__q {
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
	list-style: none;
	min-height: var(--wp--custom--tap-target);
	padding-block: var(--wp--preset--spacing--4);
}

.aws-ask__q::-webkit-details-marker { display: none; }

/* The mark turns rather than swapping character, so the two states are
   obviously the same control in two positions. */
.aws-ask__q::after {
	content: "\203A";
	transition: transform .18s ease;
}

.aws-ask[open] .aws-ask__q::after { transform: rotate(90deg); }

.aws-ask__a {
	padding-bottom: var(--wp--preset--spacing--4);
}

.aws-ask__a p {
	margin: 0 0 var(--wp--preset--spacing--3);
	max-width: 65ch;
}

.aws-ask__a p:last-child { margin-bottom: 0; }

/* A history ---------------------------------------------------------------- */
.aws-story__list {
	border-inline-start: 1px solid var(--wp--preset--color--divider);
	display: grid;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--6);
}

.aws-moment {
	position: relative;
}

/* The dot sits on the line, centred on it rather than beside it. */
.aws-moment::before {
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--circle);
	content: "";
	height: var(--wp--preset--spacing--2);
	inset-inline-start: calc(0px - var(--wp--preset--spacing--6) - var(--wp--preset--spacing--1));
	position: absolute;
	top: var(--wp--preset--spacing--2);
	width: var(--wp--preset--spacing--2);
}

.aws-moment__when {
	color: var(--wp--preset--color--accent-700);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.aws-moment__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-moment__body {
	margin: var(--wp--preset--spacing--1) 0 0;
	max-width: 65ch;
}

/* Marks -------------------------------------------------------------------- */
.aws-marks__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-mark a {
	color: inherit;
	text-decoration: none;
}

.aws-mark__image {
	display: block;
	height: auto;
	max-width: var(--wp--custom--figure--max);
}

.aws-mark__name {
	font-size: var(--wp--preset--font-size--small);
}

.aws-mark__name--under {
	display: block;
	margin-top: var(--wp--preset--spacing--1);
	opacity: .8;
}

/* A comparison ------------------------------------------------------------- */
.aws-versus__scroll { overflow-x: auto; }

.aws-versus__table {
	border-collapse: collapse;
	width: 100%;
}

.aws-versus__table th,
.aws-versus__table td {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	padding: var(--wp--preset--spacing--3);
	text-align: start;
}

.aws-versus__table thead th {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
}

.aws-versus__table tbody th {
	font-weight: 400;
}

.aws-versus__note {
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--4) 0 0;
	max-width: 60ch;
	opacity: .85;
}

/* Posts -------------------------------------------------------------------- */
.aws-posts__top {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
}

.aws-posts__more { margin: 0 0 var(--wp--preset--spacing--6); }

.aws-posts__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@container (min-width: 700px) {
	.aws-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1000px) {
	.aws-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-post {
	border-top: 2px solid var(--wp--preset--color--accent);
	display: grid;
	gap: var(--wp--preset--spacing--2);
	padding-top: var(--wp--preset--spacing--3);
}

.aws-post__when {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

.aws-post__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-post__title a {
	color: inherit;
	text-decoration: none;
}

.aws-post__title a:hover { text-decoration: underline; }

.aws-post__said,
.aws-posts__none {
	margin: 0;
	max-width: 60ch;
}

/* Video, playlist and channel strip ------------------------------------------ */
/*
 * W64, W65, W67.
 *
 * A frame holds the shape of a video and shows its still until somebody
 * presses it. Nothing is fetched from YouTube before that press -- not the
 * player, not the poster -- so a page with four videos on it makes no request
 * on behalf of a reader who watches none of them.
 */
.aws-film__frame {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--neutral-900);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	position: relative;
}

.aws-film--tall .aws-film__frame { aspect-ratio: 9 / 16; margin-inline: auto; max-inline-size: 26rem; }

.aws-film__frame iframe { block-size: 100%; border: 0; display: block; inline-size: 100%; }

/* The whole frame is the button, because the whole frame is what somebody
   aims at. */
.aws-film__go {
	background: none;
	border: 0;
	cursor: pointer;
	display: block;
	inset: 0;
	padding: 0;
	position: absolute;
}

.aws-film__still {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

/*
 * The mark that says this is a video and not a photograph of one. Drawn rather
 * than fetched: it is a triangle in a circle, and a request for a picture of a
 * triangle is a request.
 */
.aws-film__play {
	background: rgb(0 0 0 / 55%);
	block-size: 3.5rem;
	border-radius: var(--wp--custom--radius--circle);
	inline-size: 3.5rem;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: background .2s ease;
}

.aws-film__play::after {
	border-block: 0.6rem solid transparent;
	/* The token for words on a dark ground, which is what this is. */
	border-inline-start: 1rem solid var(--wp--preset--color--neutral-200);
	border-inline-end: 0;
	content: "";
	inset-block-start: 50%;
	/* Off centre by a third of the triangle, because a triangle centred on its
	   bounding box reads as sitting to the left of the circle it is in. */
	inset-inline-start: calc(50% + 0.15rem);
	position: absolute;
	transform: translate(-50%, -50%);
}

.aws-film__go:hover .aws-film__play,
.aws-film__go:focus-visible .aws-film__play { background: var(--wp--preset--color--accent); }
.aws-film__go:hover .aws-film__still { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.aws-film__still { transition: none; }
	.aws-film__go:hover .aws-film__still { transform: none; }
}

/* How long it runs, where a player would put it. */
.aws-film__long {
	background: rgb(0 0 0 / 75%);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--neutral-200);
	font-size: var(--wp--preset--font-size--x-small);
	inset-block-end: var(--wp--preset--spacing--2);
	inset-inline-end: var(--wp--preset--spacing--2);
	line-height: 1.4;
	padding: 0 var(--wp--preset--spacing--1);
	position: absolute;
}

.aws-film__heading { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--4); }
.aws-film__caption { margin: var(--wp--preset--spacing--3) 0 0; max-width: 70ch; }

/* The playlist, and where its list sits ------------------------------------- */
.aws-reel__set { display: grid; gap: var(--wp--preset--spacing--6); }

/*
 * How the width is shared, and how many the list runs across.
 *
 * Named here as tokens rather than written into the rules that use them, so
 * the two arrangements sit side by side to be compared -- and so the rule
 * further down that lays the columns out is one rule, whichever pair was
 * chosen, instead of one per combination.
 */
.aws-reel--player-large { --aws-reel-split: minmax(0, 2fr) minmax(0, 1fr); }
.aws-reel--player-medium { --aws-reel-split: minmax(0, 3fr) minmax(0, 2fr); }
.aws-reel--player-small { --aws-reel-split: minmax(0, 1fr) minmax(0, 1fr); }
.aws-reel--across-1 { --aws-reel-across: 1; }
.aws-reel--across-2 { --aws-reel-across: 2; }
.aws-reel--across-3 { --aws-reel-across: 3; }
.aws-reel__said { display: grid; gap: var(--wp--preset--spacing--1); margin-block-start: var(--wp--preset--spacing--3); }
.aws-reel__none { margin: 0; max-width: 60ch; }

/*
 * The list beside the player, which is how a playlist is read: the one running
 * and what comes next. It scrolls on its own rather than making the page as
 * tall as the list, because the player is what somebody is looking at.
 */
.aws-reel__list {
	/*
	 * Packed to the top, not spread down the column.
	 *
	 * A grid fills the box it is given by stretching its rows, and beside a
	 * player this box is as tall as the player -- so three rows of seventy
	 * pixels were dealt out over five hundred and the gap between them was
	 * never the gap it was set to. What is next should sit under what is
	 * playing, and the room left over should be room left over.
	 */
	align-content: start;
	display: grid;
	gap: var(--wp--preset--spacing--3);
	list-style: none;
	margin: 0;
	padding: 0;

	/* How thick the mark on the row that is playing is, and how far out it
	   sits. Named on the list so the two halves are set side by side rather
	   than buried in the rule that happens to draw them. */
	--aws-reel-mark: 2px;
	--aws-reel-gap: 2px;
}

/* What the column is, said once above it. Three stills in a column beside a
   player are obvious to somebody who already knows; two words cost nothing
   and remove the guess. */
.aws-reel__next {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--3);
	text-transform: uppercase;
}

.aws-reel__one {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	grid-template-columns: 8rem minmax(0, 1fr);
	position: relative;
}

.aws-reel__shot {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--neutral-900);
	border-radius: var(--wp--custom--radius--sm);
	display: block;
	overflow: hidden;
	position: relative;
}

.aws-reel__shot img { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; }

.aws-reel__empty { border: 1px dashed currentColor; block-size: 100%; display: block; opacity: .25; }

.aws-reel__of { align-content: start; display: grid; gap: var(--wp--preset--spacing--1); }

/* The row somebody chose, marked while it plays above. */
.aws-reel__one[data-aws-playing] .aws-reel__shot {
	outline: var(--aws-reel-mark) solid var(--wp--preset--color--accent);
	outline-offset: var(--aws-reel-gap);
}
.aws-reel__one[data-aws-playing] .aws-reel__title { font-weight: 700; }

.aws-reel__title { font-size: var(--wp--preset--font-size--small); line-height: 1.3; margin: 0; }
.aws-reel__title a { color: inherit; text-decoration: none; }
.aws-reel__title a:hover { text-decoration: underline; }
.aws-reel__title a::after { content: ''; inset: 0; position: absolute; }

.aws-reel__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); margin: 0; }
.aws-reel__name a { color: inherit; text-decoration: none; }
.aws-reel__name a:hover { text-decoration: underline; }

.aws-reel__kicker {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

/* Under the player, the list is a row of stills rather than a column of rows:
   the same videos, read across. */
.aws-reel--below .aws-reel__one { grid-template-columns: minmax(0, 1fr); }
.aws-reel--below .aws-reel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container (min-width: 700px) {
	.aws-reel--below .aws-reel__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Beside it, once there is room for two things on a line. Narrower than this
   every arrangement is the same arrangement, which is the right answer on a
   telephone. */
@container (min-width: 940px) {
	.aws-reel--right .aws-reel__set,
	.aws-reel--left .aws-reel__set { grid-template-columns: var(--aws-reel-split, minmax(0, 3fr) minmax(0, 2fr)); }

	.aws-reel--left .aws-reel__playing { order: 2; }

	.aws-reel--right .aws-reel__list,
	.aws-reel--left .aws-reel__list { grid-template-columns: repeat(var(--aws-reel-across, 2), minmax(0, 1fr)); }

	/*
	 * More than one across and each is a still with its name under it.
	 *
	 * A name beside a still needs about as much room as the still does, so
	 * halving the column leaves it four words on five lines. Under the still
	 * it gets the whole width of the cell, which is the arrangement the row of
	 * them beneath the player already uses -- the same list, read across.
	 */
	.aws-reel--right:not(.aws-reel--across-1) .aws-reel__one,
	.aws-reel--left:not(.aws-reel--across-1) .aws-reel__one { grid-template-columns: minmax(0, 1fr); }

	/*
	 * The column runs the whole way down rather than scrolling inside itself.
	 *
	 * It used to be capped and given a scrollbar of its own, so that the
	 * player stayed the tall thing on the page. But a box that scrolls is a
	 * box whose contents are a rumour: the row at the cut is sliced through
	 * the middle, what is under it is not found by the browser's own search,
	 * and a page that already scrolls has no business holding a second thing
	 * that scrolls differently. A playlist is a list, and a list ends where it
	 * ends. How much of it is written out is a setting, and the honest way to
	 * shorten one is to ask for fewer.
	 *
	 * The ring around the row that is playing had to have room carved out of
	 * that scrollport, because a box that scrolls one way clips the other way
	 * too. Nothing clips it now, so the padding and the negative margin that
	 * paid for it are gone with the scrollbar.
	 */
}

/* W79 · What is on ----------------------------------------------------------- */

.aws-on__heading { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--6); }
.aws-on__none { color: var(--wp--preset--color--neutral-600); margin: 0; max-width: 60ch; }
.aws-on__more { margin: var(--wp--preset--spacing--6) 0 0; }

/*
 * As many across as fit. A masjid has two things on some months and seven in
 * Ramadan, and a number written down here would be wrong in one of them.
 */
.aws-on__list {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-event {
	align-content: start;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	display: grid;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--6);
}

/* When it is, first and loudest: somebody reading a diary is deciding whether
   they are free, and everything else is read after that. */
.aws-event__when {
	color: var(--wp--preset--color--accent-700);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.aws-event__name { font-size: var(--wp--preset--font-size--large); margin: 0; }
.aws-event__name a { color: inherit; text-decoration: none; }
.aws-event__name a:hover { text-decoration: underline; }
.aws-event__about { margin: 0; }

.aws-event__facts {
	color: var(--wp--preset--color--neutral-700);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* The channel strip ---------------------------------------------------------- */
.aws-chan__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-chan__mark img {
	block-size: auto;
	border-radius: var(--wp--custom--radius--circle);
	display: block;
	inline-size: calc(var(--wp--preset--spacing--8) * 2);
	object-fit: cover;
}

/*
 * The parts of it stay together and the action goes to the end.
 *
 * The name was given the whole row to grow into, so on a wide page a channel
 * called Iant sat at the far left with its figures nine hundred pixels away
 * at the right and nothing in between. They are one statement -- whose channel
 * this is and how big it is -- and they read as one when they are next to each
 * other.
 */
.aws-chan__said { flex: 0 1 auto; min-inline-size: 0; }
.aws-chan__go { margin-inline-start: auto; }
.aws-chan__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.aws-chan__line { margin: var(--wp--preset--spacing--1) 0 0; opacity: .8; }

.aws-chan__stats {
	/* Held off the name by a rule, so two figures beside a sentence read as
	   figures about it rather than as the end of the sentence. */
	border-inline-start: 1px solid var(--wp--preset--color--divider);
	display: flex;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--6);
}

.aws-chan__figure { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); }
.aws-chan__of { color: var(--wp--preset--color--neutral-600); font-size: var(--wp--preset--font-size--x-small); }

/* Comments ------------------------------------------------------------------ */
/*
 * W43. What people said, and the box to say something.
 *
 * A conversation reads down a column, so it is held to the reading measure
 * whatever width the section was given -- a comment set across a whole screen
 * is a comment nobody finishes a line of.
 */
/*
 * Held to the reading measure and started where the page starts.
 *
 * A conversation reads down a column, so it is held in whatever width the
 * section was given -- a comment set across a whole screen is a comment nobody
 * finishes a line of. Centred in that width it began an inch to the right of
 * everything above it, which reads as a section that has been indented rather
 * than one that is narrow.
 */
.aws-said__inner > * { margin-inline: 0 auto; max-width: 70ch; }

/*
 * The heading, which is also the press that opens the conversation.
 *
 * On a telephone every section is a full-width band stacked on the last, so a
 * page whose conversation is open is a page where the next video is two
 * hundred comments further down. Folded, the heading says how many there are
 * and waits to be asked.
 */
.aws-said__fold { position: relative; }

.aws-said__top {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	/* The browser's own marker, replaced below by one that can be turned. */
	list-style: none;
	min-block-size: var(--wp--custom--tap-target);
}

.aws-said__top::-webkit-details-marker { display: none; }

/* Room under it only when there is something under it. */
.aws-said__fold[open] > .aws-said__top { margin-block-end: var(--wp--preset--spacing--6); }

/* Drawn rather than typed, and sized in em so it follows the heading it
   belongs to. */
.aws-said__top::after {
	background: currentColor;
	block-size: 0.5em;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: '';
	inline-size: 0.45em;
	transition: transform .15s ease;
}

.aws-said__fold[open] > .aws-said__top::after { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	.aws-said__top::after { transition: none; }
}

.aws-said__heading {
	align-items: baseline;
	display: flex;
	font-size: var(--wp--preset--font-size--x-large);
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

/* How many there are, beside the word rather than in it: a heading that has to
   be rewritten to count is a heading in two pieces. */
.aws-said__many {
	color: var(--wp--preset--color--neutral-600);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: tabular-nums;
}

/*
 * Close together. A conversation is read as a run of short things, and a
 * comment given the room a section gets is a comment that looks like an
 * article -- twenty of them then take a scroll each.
 */
.aws-said__list { display: grid; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; }
.aws-said__list:empty { display: none; }

/*
 * Who said it and what can be done about it on one line.
 *
 * They were two lines, and between the pair of them a comment of six words was
 * a hundred and twenty pixels tall -- so ten of them were a scroll and a half
 * of mostly nothing. Neither line is worth a line: a name and a date are four
 * words, and the thumbs and the Reply are three marks that sit at the other
 * end of it with room to spare.
 *
 * A grid rather than a flex row, because what a comment holds is not always
 * these two. Anything else it is given -- what it says, the replies under it,
 * the box gone there to write one -- takes the whole width on the next line
 * down, and does so by being anything else rather than by being listed.
 */
.aws-say {
	border-top: 1px solid var(--wp--preset--color--divider);
	column-gap: var(--wp--preset--spacing--3);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding-top: var(--wp--preset--spacing--1);
}

.aws-say > * { grid-column: 1 / -1; }

.aws-say__who {
	align-items: baseline;
	align-self: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

/* What can be done about one, quiet until it is looked at. */
.aws-say__does {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--2);
	grid-column: 2;
	grid-row: 1;
	justify-content: flex-end;
	margin: 0;
}

.aws-say__vote,
.aws-say__reply {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--neutral-600);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	gap: var(--wp--preset--spacing--1);
	/* The tap target a mark this size would not otherwise have. */
	min-block-size: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--2);
}

/*
 * Except under a pointer that can be aimed.
 *
 * Forty-four pixels is what a thumb needs, and it is the tallest thing in a
 * comment -- so every comment on a desktop was as tall as a finger that was
 * never going to touch it. Still well past the twenty-four pixels a target has
 * to be, and it goes back to the full size the moment the pointer is coarse,
 * which is the only time the difference was ever for.
 */
@media (pointer: fine) {
	.aws-say__vote,
	.aws-say__reply { min-block-size: var(--wp--custom--tap-target-fine); }
}

.aws-say__vote .aws-icon { block-size: 1.05em; inline-size: 1.05em; }
.aws-say__vote:hover, .aws-say__reply:hover { color: inherit; }
.aws-say__vote[aria-pressed="true"] { color: var(--wp--preset--color--accent); }
.aws-say__count { font-variant-numeric: tabular-nums; }

/* Nothing said yet is nothing to say, so a count of none is not drawn. */
.aws-say__vote .aws-say__count:empty { display: none; }

.aws-say__reply { margin-inline-start: auto; }



/*
 * The box for searching what people said.
 *
 * A browser's own search field is a hairline rectangle that belongs to the
 * browser rather than to the page, and next to pill buttons and rounded
 * thumbnails it reads as something left unfinished. Appearance is turned off
 * so the radius and the padding are actually applied -- a search input ignores
 * both otherwise -- and it is built the way the rest of the kit builds a
 * field: a token ground, a pill, a mark inside it, and the accent on focus.
 */
/*
 * Out at the far side of the section, not at the end of the reading measure.
 *
 * The comments are held to about seventy characters, because that is how wide
 * a column of writing should be -- which leaves the other half of a wide
 * section empty. A search box is not writing and does not want that measure,
 * and out there it is beside the conversation rather than stacked above it,
 * with nothing between the heading and the first thing somebody said.
 *
 * So the row is let out to the section's own width, and the field sits at the
 * end of it. On a narrow screen the two widths are the same and it simply
 * sits at the right of the column.
 */
/*
 * The box for searching, at the far end of the heading's line.
 *
 * Lifted out of the flow to get there, because the heading is now a press and
 * a field inside a press is a field that opens and shuts the thing it sits in
 * every time somebody aims at it. Out of the flow it also costs no row of its
 * own, which is what it was moved up here to stop costing.
 *
 * It lives inside the fold, so it is not drawn at all until the conversation
 * is open -- which is right: there is nothing to search until then.
 */
.aws-said__find {
	display: flex;
	justify-content: flex-end;
	margin-block: 0 var(--wp--preset--spacing--4);
}

@container (min-width: 34rem) {
	.aws-said__find {
		inset-block-start: 0;
		inset-inline-end: 0;
		margin: 0;
		position: absolute;
	}
}

/* What the mark is positioned against: the field, not the row it sits at the
   end of. */
.aws-said__seek {
	display: block;
	inline-size: 100%;
	max-inline-size: 22rem;
	position: relative;
}

/* Inside the box rather than beside it, so the field is one thing. */
.aws-said__find .aws-icon {
	block-size: 1.05em;
	color: var(--wp--preset--color--neutral-600);
	inline-size: 1.05em;
	inset-block-start: 50%;
	inset-inline-start: var(--wp--preset--spacing--4);
	/* A press on the mark is a press on the field, not on nothing. */
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
}

.aws-said__find input {
	appearance: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	inline-size: 100%;
	min-block-size: var(--wp--custom--tap-target);
	padding-inline: calc(var(--wp--preset--spacing--4) + 1.05em + var(--wp--preset--spacing--2)) var(--wp--preset--spacing--4);
	transition: background .15s ease, border-color .15s ease;
}

.aws-said__find input::placeholder { color: var(--wp--preset--color--neutral-600); }

/* Quiet until it is wanted: a border on hover, and the page's own ground under
   the words once somebody is typing in it. */
.aws-said__find input:hover { border-color: var(--wp--preset--color--divider); }

.aws-said__find input:focus-visible {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.aws-said__find input:focus-visible + .aws-icon,
.aws-said__find input:focus-visible ~ .aws-icon { color: var(--wp--preset--color--accent); }

/*
 * And the way back out, drawn rather than left to the browser.
 *
 * Turning appearance off takes the clear button with it, and a search box you
 * can only empty with the backspace key is a search box that keeps its answer
 * when somebody has finished with it. Two gradients crossing, so there is no
 * character to be missing and no image to be fetched.
 */
.aws-said__find input::-webkit-search-cancel-button {
	appearance: none;
	background:
		linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%);
	block-size: 0.7em;
	cursor: pointer;
	inline-size: 0.7em;
	opacity: .45;
}

.aws-said__find input::-webkit-search-cancel-button:hover { opacity: 1; }
.aws-said__more { margin: var(--wp--preset--spacing--4) 0 0; }
.aws-said__empty { color: var(--wp--preset--color--neutral-600); margin: var(--wp--preset--spacing--4) 0 0; }

/* Who the box is answering, and the way back to answering everybody. */
.aws-said__to {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.aws-said__all {
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.aws-say__name { font-family: var(--wp--preset--font-family--heading); }
.aws-say__when { color: var(--wp--preset--color--neutral-600); font-size: var(--wp--preset--font-size--x-small); }
.aws-say__body > :where(p):first-child { margin-block-start: 0; }
.aws-say__body > :where(p):last-child { margin-block-end: 0; }

/* Any replies under one, indented once and no further. A conversation three
   levels deep is a conversation nobody can follow on a telephone. */

.aws-said__form { margin-block-start: var(--wp--preset--spacing--4); }

/*
 * The box where it has gone to answer a comment: held off the comment above it
 * and marked down the side, so it reads as part of that conversation rather
 * than as the page's own form that happens to be here.
 */
.aws-said__form.is-under {
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	margin-block: var(--wp--preset--spacing--3) 0;
	padding-inline-start: var(--wp--preset--spacing--4);
}

.aws-said__start { margin: var(--wp--preset--spacing--4) 0 0; }

/* The way in, where the way in is what is on offer. Sitting where the press
   that opens the box sits, because it is the same press one step earlier. */
.aws-said__join { margin: var(--wp--preset--spacing--4) 0 0; }

/*
 * The fold over a conversation, and the count that is the whole of its case
 * for being opened.
 */
.aws-say__more > summary {
	align-items: center;
	color: var(--wp--preset--color--neutral-600);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	gap: var(--wp--preset--spacing--2);
	/* The browser's own marker, replaced below by one that can be turned. */
	list-style: none;
	min-block-size: var(--wp--custom--tap-target);
	padding-inline-end: var(--wp--preset--spacing--2);
}

.aws-say__more > summary::-webkit-details-marker { display: none; }
.aws-say__more > summary:hover { color: inherit; }

/* After the count, not before it: the number is what is being offered, and the
   mark is only which way it goes. Drawn rather than typed -- a character here
   is a character that is missing on somebody's machine -- and sized in em so
   it follows the words it belongs to. */
.aws-say__more > summary::after {
	background: currentColor;
	block-size: 0.55em;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: '';
	inline-size: 0.5em;
	transition: transform .15s ease;
}

.aws-say__more[open] > summary::after { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	.aws-say__more > summary::after { transition: none; }
}

@media (pointer: fine) {
	.aws-say__more > summary { min-block-size: var(--wp--custom--tap-target-fine); }
}

/* The thread down the side, so a reply is seen to belong to what it answers
   rather than merely to sit near it. */
.aws-say .children {
	border-inline-start: 1px solid var(--wp--preset--color--divider);
	list-style: none;
	margin: var(--wp--preset--spacing--3) 0 0;
	padding-inline-start: var(--wp--preset--spacing--4);
}
.aws-said__invite { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); margin: 0 0 var(--wp--preset--spacing--4); }
.aws-said__form form { display: grid; gap: var(--wp--preset--spacing--4); }

/*
 * One line to start, which is the press's own height, growing as somebody
 * writes.
 *
 * A box that opens four deep is a box saying a comment ought to be four lines
 * long, and beside a press it is four lines of nothing next to one. So it
 * starts level with the press and takes the room it is given words for --
 * where the browser can do that; where it cannot, the floor is the same height
 * and it scrolls, and it drags taller either way.
 *
 * The press stays where it is. A button as tall as whatever somebody has
 * written is not a button.
 */
.aws-said__form textarea {
	field-sizing: content;
	max-block-size: 12rem;
	min-block-size: var(--wp--custom--tap-target);
	padding-block: var(--wp--preset--spacing--2);
}
.aws-said__go { display: flex; }

/*
 * The press beside the box, not under it.
 *
 * A line of its own for one button is a line spent on the least surprising
 * thing on the form, and it put the press a whole row further from the words
 * it sends. Beside the box it is level with the last line somebody types.
 *
 * The name and email pair is left where it is: those are two fields and a
 * press is not a third.
 */
@container (min-width: 480px) {
	.aws-said__form form { grid-template-columns: minmax(0, 1fr) auto; }
	.aws-said__form form > * { grid-column: 1 / -1; }
	.aws-said__form form > .aws-field { grid-column: 1; }

	/* Said through the form, because the rule putting everything else across
	   the whole width is one selector more specific than a class on its own,
	   and would otherwise quietly win. */
	.aws-said__form form > .aws-said__go {
		align-self: end;
		grid-column: 2;
	}

	/*
	 * And exactly as tall as the box it sends.
	 *
	 * Two things side by side that are nearly the same height read as two
	 * things meant to match that did not -- and this is the only pair on the
	 * form, so there is nothing else for the eye to blame it on. Both are
	 * given the same measure rather than left to arrive at it: the press was a
	 * pixel taller for its padding, and the box a pixel shorter, and neither
	 * number was anybody's decision.
	 *
	 * Not stretched to the row, which is the label as well -- that made the
	 * press as tall as "Your comment" and the box together.
	 */
	.aws-said__go .aws-btn { block-size: var(--wp--custom--tap-target); }
}
.aws-said__none { color: var(--wp--preset--color--neutral-600); margin: 0; }

/* What the last press did. Kept in the flow rather than floated, because it is
   read once and then scrolled past. */
.aws-said__told {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

/* And why it did not. The kit's own warning, so a refusal here looks like a
   refusal anywhere else on the site; only the room around it is this block's. */
.aws-said__wrong { margin: 0 0 var(--wp--preset--spacing--4); }

/* Catalogue ---------------------------------------------------------------- *//* Catalogue ---------------------------------------------------------------- */
/*
 * W41. What a shop sells, with nothing to buy it with.
 *
 * A card is a picture, a name, a line about it and what it costs -- and then
 * it stops. There is no button on it, because there is nothing here for a
 * button to do: the card is the way to the item's own page and the page is
 * where somebody asks. A grid of cards each carrying "Enquire" is a grid
 * asking for a decision from somebody still looking.
 */
.aws-shop__top {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: space-between;
}

.aws-shop__more { margin: 0 0 var(--wp--preset--spacing--6); }

.aws-shop__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Two across as soon as there is room, and the number the section was set to
 * once there is room for that. The steps are the same for every setting --
 * what differs is where it stops -- so a catalogue set to four is a catalogue
 * of two on a tablet rather than four things too narrow to see.
 */
@container (min-width: 620px) {
	.aws-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 940px) {
	.aws-shop--of-3 .aws-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aws-shop--of-4 .aws-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 1180px) {
	.aws-shop--of-4 .aws-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.aws-shop__item {
	/*
	 * A column with the price on the floor of it.
	 *
	 * A catalogue is scanned down the prices as much as across the pictures,
	 * and a row of four cards holding four different amounts of writing put
	 * four prices at four heights -- so the eye had to find each one. The
	 * writing takes the slack and the price is pushed to the bottom, which
	 * lines them up along one edge however much is said above them.
	 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	/* So the name's link can be stretched over the whole card, below. */
	position: relative;
}


/*
 * The picture, in a shape of its own rather than whatever was uploaded. A
 * catalogue photographed by the business is a catalogue of eleven different
 * shapes, and a grid of those reads as a mistake before it reads as a shop.
 */
.aws-shop__shot {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	display: block;
	overflow: hidden;
}

.aws-shop__shot img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

/*
 * The shape a card keeps while it is waiting for its photograph. Dashed and in
 * whatever the section is written in, the way the hero's empty slot is, so it
 * reads as a place for something rather than as a frame somebody chose.
 */
.aws-shop__empty {
	border: 1px dashed currentColor;
	border-radius: var(--wp--custom--radius--md);
	display: block;
	block-size: 100%;
	opacity: .25;
}

/*
 * The picture answers a pointer, because the whole card is the link and a card
 * that does not move under one reads as a picture rather than a way in.
 */
.aws-shop__item:hover .aws-shop__shot img,
.aws-shop__item:focus-within .aws-shop__shot img { transform: scale(1.03); }

/* Asked for less movement, it holds still. */
@media (prefers-reduced-motion: reduce) {
	.aws-shop__shot img { transition: none; }

	.aws-shop__item:hover .aws-shop__shot img,
	.aws-shop__item:focus-within .aws-shop__shot img { transform: none; }
}

/* A thing that cannot be had says so, and its picture stops asking to be
   looked at. Both, because the words alone are a line of grey text at the
   bottom of a card nobody read to the bottom of. */
.aws-shop__item.is-gone .aws-shop__shot { opacity: .55; }
.aws-shop__item.is-gone .aws-shop__aside {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: inherit;
	opacity: .75;
	padding: 0 var(--wp--preset--spacing--2);
}

.aws-shop__kicker {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.aws-shop__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-shop__name a { color: inherit; text-decoration: none; }

/*
 * The whole card is the target, not the four words of the name. Drawn from the
 * name's own link so there is still one link and one thing for a screen reader
 * to read -- the picture above it is already hidden from one for that reason.
 */
.aws-shop__name a::after {
	content: '';
	inset: 0;
	position: absolute;
}

.aws-shop__name a:hover { text-decoration: underline; }

.aws-shop__said,
.aws-shop__none {
	margin: 0;
	max-width: 60ch;
}

.aws-shop__foot {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	/* The floor of the card: the writing above takes the slack, so a row of
	   cards lines its prices up along one edge however much each of them
	   says. */
	margin: auto 0 0;
}

.aws-shop__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
}

.aws-shop__aside {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Tabs --------------------------------------------------------------------- */
.aws-tabs__strip {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	margin-bottom: var(--wp--preset--spacing--6);
}

.aws-tabs__tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

/* The chosen tab is named by weight and a rule as well as by colour, so it is
   still obvious to somebody who cannot tell the colours apart. */
.aws-tabs__tab.is-on {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-800);
	font-weight: 600;
}

.aws-tabs__panel p {
	margin: 0 0 var(--wp--preset--spacing--3);
	max-width: 65ch;
}

.aws-tabs__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--3);
}

/* -------------------------------------------------------------------------
 * Editorial · W40 the front page, W47 a byline, W46 more like this.
 *
 * The front page is three columns at broadsheet width and one column below
 * that, in the order a reader wants them: the lead first, then the briefing,
 * then most read. On a narrow screen the rails belong under the story, not
 * above it — a phone that opens on a list of headlines has buried the one that
 * matters.
 * ------------------------------------------------------------------------- */
.aws-front {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-front__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-front__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
}

.aws-front__lead { order: -1; }

@container (min-width: 1000px) {
	.aws-front__grid { grid-template-columns: 1fr 2fr 1fr; }
	.aws-front__lead { order: 0; }
}

.aws-front__label {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--1);
	text-transform: uppercase;
}

.aws-front__rail {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	align-content: start;
}

.aws-brief { display: grid; gap: var(--wp--preset--spacing--1); }

.aws-brief__kicker,
.aws-lead__kicker {
	color: var(--wp--preset--color--accent-700);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.aws-brief__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	margin: 0;
}

.aws-brief__said {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	opacity: .85;
}

.aws-front__lead a,
.aws-front__rail a,
.aws-front__across a,
.aws-related a {
	color: inherit;
	text-decoration: none;
}

.aws-front__lead a:hover,
.aws-front__rail a:hover,
.aws-front__across a:hover,
.aws-related a:hover { text-decoration: underline; }

.aws-lead { display: grid; gap: var(--wp--preset--spacing--2); }

.aws-lead__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.05;
	margin: 0;

	/*
	 * Filled, not balanced.
	 *
	 * Balance makes the lines of a heading the same length, which is right for
	 * a heading standing on its own and wrong for the one thing on this page
	 * that has a column to fill. "The high street counts its quiet mornings"
	 * came out as two lines of 64% and 52% of the measure, with the deck
	 * beneath it running the full width -- so the headline read as a smaller
	 * column set inside the story, with a block of empty paper beside it.
	 * Filled, the first line runs to 92% and the blank goes.
	 *
	 * pretty rather than nothing at all, because filling greedily leaves a
	 * headline that breaks one word from the end with that word alone on a
	 * line. Where a browser does not know the word, it falls back to filling,
	 * which is the half that matters here.
	 */
	text-wrap: pretty;
}

.aws-lead__deck {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	max-width: 55ch;
}

.aws-lead__by,
.aws-lead__caption,
.aws-related__when {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

.aws-lead__image img,
.aws-across__image img {
	display: block;
	height: auto;
	width: 100%;
}

.aws-front__second {
	border-top: 1px solid var(--wp--preset--color--divider);
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--4);
}

@container (min-width: 700px) {
	.aws-front__second { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-front__most {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--6);
}

.aws-front__most li {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

.aws-front__most::marker { font-variant-numeric: tabular-nums; }

.aws-front__meta {
	color: var(--wp--preset--color--neutral-600);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	margin-top: var(--wp--preset--spacing--1);
}

.aws-front__across { margin-top: var(--wp--preset--spacing--8); }

.aws-front__acrossGrid {
	display: grid;
	gap: var(--wp--preset--spacing--4);
}

@container (min-width: 700px) {
	.aws-front__acrossGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 1000px) {
	.aws-front__acrossGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.aws-across { display: grid; gap: var(--wp--preset--spacing--1); }

.aws-front__none { margin: 0; }

/* A byline ----------------------------------------------------------------- */
.aws-by {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	margin-inline: auto;
	/* Wide, like the record and the related list it stands under. It was the
	   text column while both of those were wide, so the byline stopped a
	   third of the way in from each side and left the page ragged where the
	   article ends.
	   Inset by what the related list pads itself with, because this card has
	   a ground and a border and those two are the edge somebody sees — at a
	   plain wide-size it would hang past the columns above it. */
	max-width: calc(var(--wp--style--global--wide-size) - (2 * var(--wp--preset--spacing--4)));
	padding: var(--wp--preset--spacing--6);
}

.aws-by__face {
	border-radius: var(--wp--custom--radius--circle);
	height: auto;
	max-width: var(--wp--custom--portrait--max);
}

.aws-by__said { flex: 1 1 14rem; }

.aws-by__kicker {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.aws-by__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.aws-by__about { margin: var(--wp--preset--spacing--1) 0 0; max-width: 60ch; }

/* More like this ----------------------------------------------------------- */

/*
 * Named aws-related, not aws-more. The kit already had an .aws-more — the link
 * beside a section heading — and giving a whole section the same name put a
 * container, a max-width and eight units of padding on every one of those
 * links. The same mistake as .aws-step, which is why blocks are named for the
 * thing they are rather than for what they say.
 */
.aws-related {
	container-type: inline-size;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
}

.aws-related__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--6);
}

.aws-related__list {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@container (min-width: 700px) {
	.aws-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-related__one {
	border-top: 2px solid var(--wp--preset--color--accent);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	padding-top: var(--wp--preset--spacing--3);
}

.aws-related__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * W39 · Newspaper masthead and section rail.
 *
 * The header a paper has instead of the one a business has. Chosen per site
 * under Layout, so a shop and a newspaper on the same install get different
 * chrome from the same template part.
 * ------------------------------------------------------------------------- */
.aws-mast {
	border-bottom: 1px solid var(--wp--preset--color--divider);
	container-type: inline-size;
}

.aws-mast__inner {
	/* The heavy rule over the dateline is the paper's own, and it sits above
	   the date rather than under the title — that is the order a masthead is
	   read in.

	   It runs the whole width, the way a printed one does. The measure that
	   used to hold it in is on the words below instead, so the line reaches
	   both edges and the reading is still a column down the middle. */
	border-top: 2px solid currentColor;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	text-align: center;
}

.aws-mast__inner > * {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}

/* A paper is centred, and that is the right default -- but a masthead is also
   what a site with a long name and a wordmark ends up wearing, and those read
   better ranged to one edge. The title, the dateline, the line under it and
   the rail of sections all move together: half a masthead ranged left with a
   centred rail under it is two designs stacked. */
.aws-mast.is-at-start .aws-mast__inner { text-align: start; }
.aws-mast.is-at-end .aws-mast__inner { text-align: end; }
.aws-mast.is-at-center .aws-mast__inner { text-align: center; }

/*
 * The measure itself does not move, and neither do the boxes carrying it: each
 * line of the masthead is a block of the wide size with auto margins, so it is
 * already centred on the same column the sections in the rail are centred on.
 * Ranging the boxes instead of the words inside them pushes the title out to
 * the padding edge while the rail below stays where it was -- which is the two
 * designs stacked that this control exists to avoid.
 */
.aws-mast.is-at-start .aws-mast__sections { justify-content: flex-start; }
.aws-mast.is-at-end .aws-mast__sections { justify-content: flex-end; }
.aws-mast.is-at-center .aws-mast__sections { justify-content: center; }

/* A wordmark is centred by the rule further down, which is the right answer
   for a centred masthead and the wrong one everywhere else -- a paper ranged
   left with its own logo floating in the middle of the line. */
.aws-mast.is-at-start .aws-mast__title img { margin-inline: 0 auto; }
.aws-mast.is-at-end .aws-mast__title img { margin-inline: auto 0; }

/* -------------------------------------------------------------------------
 * The nameplate: the title at one end and the sections at the other.
 *
 * The arrangement a broadsheet is set in, and the one thing the stacked
 * masthead cannot say -- there the sections are a rail under the title,
 * because the whole of it is one centred column down the page. Here the two
 * share a line: the date, the title and what the paper says about itself
 * ranged to the start of the measure, and the sections ranged to the end of it
 * beside them.
 *
 * Which makes a masthead say what a business header says -- the name where
 * people look for the name, the way around the site where they look for that
 * -- while it goes on being set as a paper.
 *
 * A flex row that wraps, rather than two grid tracks, so the sections fall
 * under the title of their own accord when there is no room for both. A
 * masthead is its own query container, and a container cannot ask about
 * itself, so a rule that stacked it by hand would be a rule that never fired.
 * ------------------------------------------------------------------------- */
.aws-mast.is-at-apart {
	/*
	 * The sections sit on the bottom of the masthead rather than halfway up
	 * the name. A nameplate is read down -- the date, the name, what the paper
	 * says about itself -- and a menu floating against the middle of the name
	 * belongs to none of those lines. On the bottom it belongs to the last of
	 * them, and the rule under the section being read lands just above the
	 * edge of the masthead.
	 */
	align-items: flex-end;

	/* One rule over the whole row, outside the padding below so it still runs
	   the width of the page. The two halves each brought a rule of their own,
	   and side by side those read as a table. */
	border-top: 2px solid currentColor;
	column-gap: var(--wp--preset--spacing--6);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--3);

	/*
	 * The measure, held by padding rather than by a width, because these two
	 * are laid out against the row rather than centred inside it -- the column
	 * the stacked masthead makes out of its children's own max-width cannot be
	 * made that way. Never less than the padding the masthead already had.
	 */
	padding-inline: max(
		var(--wp--preset--spacing--4),
		(100% - var(--wp--style--global--wide-size)) / 2
	);
}

.aws-mast.is-at-apart :is(.aws-mast__inner, .aws-mast__rail) { border-top: 0; padding-inline: 0; }

/* The name takes the free space and the sections are pushed off the end of it
   by having none to take. Both growing shared what was going spare, which left
   the sections a column an inch narrower than what was in it. */
.aws-mast.is-at-apart .aws-mast__inner { flex: 1 1 auto; min-width: 0; text-align: start; }
.aws-mast.is-at-apart .aws-mast__inner > * { margin-inline: 0; max-width: none; }
.aws-mast.is-at-apart .aws-mast__title img { margin-inline: 0; }

.aws-mast.is-at-apart .aws-mast__rail {
	/*
	 * On the one baseline, not on the middles of two boxes. A section link is
	 * a tap target -- forty-odd pixels tall, with its words at the top of that
	 * -- and the name of whoever is signed in is a line of text. Centred, the
	 * two are the same height apart as the tap target is tall, and read as two
	 * rows. Their baselines are the line they are both actually on.
	 */
	align-items: baseline;
	/*
	 * Not a query container here. Inline-size containment sizes an element as
	 * though it had no contents, and a rail asked how wide it wants to be
	 * beside a title would answer nothing.
	 */
	container-type: normal;
	display: flex;
	flex: 0 1 auto;
	/*
	 * The sections and whoever is signed in stay on one line. Left to wrap,
	 * the two of them are the last thing with room to give when the row runs
	 * short -- so the name kept its size and the account dropped to a line of
	 * its own under the menu. What gives instead is the menu, which is a list
	 * that already knows how to run onto a second line.
	 */
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	justify-content: flex-end;
	min-width: 0;
}

.aws-mast.is-at-apart .aws-mast__sections { justify-content: flex-end; margin: 0; min-width: 0; padding-block: 0; }

/*
 * And a section link is its tap target and nothing more. It keeps the height
 * -- these are links on a telephone as much as on a desk -- but the words go
 * in the middle of it rather than at the top, so the rule under the section
 * being read is under the words rather than an inch below them.
 */
.aws-mast.is-at-apart .aws-mast__sections a {
	align-items: center;
	display: flex;
	padding-block: 0;
}

/* Whoever is signed in comes back into the row. It is pinned to the right edge
   of the rail while the rail is the width of the page; beside a title, in a
   column of its own, it would be pinned over the sections. */
.aws-mast.is-at-apart .aws-mast__rail > .aws-head__me {
	/* And it never shrinks: it is a name and a chevron, and there is nothing
	   in it to take away. */
	flex: 0 0 auto;
	inset: auto;
	margin-inline: 0;
	padding-block-end: 0;
	/* Back to relative rather than to nothing: the panel that opens under it
	   is positioned against it, and a static parent would hang that off the
	   rail instead. */
	position: relative;
	transform: none;
	width: auto;
}

/* Narrow, where the sections have wrapped under the title: they range with it
   rather than off the far edge of a line with nothing beside it, and take back
   the rule that tells them from the name above. */
@container (max-width: 700px) {
	.aws-mast.is-at-apart .aws-mast__rail {
		border-top: 1px solid currentColor;
		justify-content: flex-start;
	}

	.aws-mast.is-at-apart .aws-mast__sections {
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--3);
	}
}

/* The paper's own colours follow the ground it is printed on. These named ink
   and a mid grey, which is right on cream and unreadable the moment somebody
   picks the dark background: a black title on a near-black bar. What the
   wrapper is wearing is already the readable colour for its ground. */
.aws-mast__dateline,
.aws-mast__says {
	color: inherit;
	opacity: .7;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

.aws-mast__title {
	color: inherit;
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	/* The largest thing on any page of the paper, and the one thing somebody
	   recognises from across a room. */
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	margin-block: var(--wp--preset--spacing--2);
	text-decoration: none;
	text-wrap: balance;
}

.aws-mast__title img {
	display: block;
	height: auto;
	margin-inline: auto;
	max-height: var(--wp--preset--spacing--8);
	width: auto;
}

/* The sections across the middle, and whoever is signed in at the right end of
   the same line. Taken out of the flow rather than laid beside them: a masthead
   centres its sections on the page, and a panel sharing the row would push that
   centre off by half its own width. */
.aws-mast__rail {
	/* Drawn in whatever the masthead is written in, so it survives a dark
	   ground the same way the rule above it does. */
	border-top: 1px solid currentColor;
	container-type: inline-size;
	padding-inline: var(--wp--preset--spacing--4);
	position: relative;
}

.aws-mast__rail > .aws-head__me {
	inset-block-start: 50%;
	inset-inline-end: var(--wp--preset--spacing--4);
	position: absolute;
	transform: translateY(-50%);
	z-index: 4;
}

/* Where the sections need the whole line, it goes back under them and centres
   with them: overlapping a menu is worse than sitting below one. */
@container (max-width: 720px) {
	.aws-mast__rail > .aws-head__me {
		inset-block-start: auto;
		inset-inline-end: auto;
		margin-inline: auto;
		padding-block-end: var(--wp--preset--spacing--3);
		position: static;
		transform: none;
		width: fit-content;
	}
}

.aws-mast__sections {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--6);
	justify-content: center;
	list-style: none;
	/* The measure the rail used to carry. It moved down here so the rule above
	   the sections can run the width of the page while the sections
	   themselves stay in the column. Written after the shorthand, or the
	   shorthand puts the centring back to nothing. */
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: var(--wp--preset--spacing--3) 0;
}

.aws-mast__sections a {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	/* The tap target a link in a row this tight would otherwise not have. */
	min-height: var(--wp--custom--tap-target);
	padding-block: var(--wp--preset--spacing--2);
	text-decoration: none;
	text-transform: uppercase;
}

.aws-mast__sections a:hover { text-decoration: underline; }

/* The section being read, named by a rule under it as well as by weight. */
.aws-mast__sections .current-menu-item a,
.aws-mast__sections a[aria-current="page"] {
	border-bottom: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-800);
}

/* -------------------------------------------------------------------------
 * W02 · The search in the header.
 *
 * Ships as a field and a button. The script folds it to the button alone; both
 * states are here, because a header with no script keeps the field.
 * ------------------------------------------------------------------------- */
.aws-head__find {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--1);
}

.aws-head__find input[type="search"] {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	min-height: var(--wp--custom--tap-target);
	padding-inline: var(--wp--preset--spacing--4);
	/* Wide enough for a couple of words and no wider: the header is a row of
	   things and this is one of them. */
	width: 12ch;
}

/* Folded away. Keyed on an attribute the script sets, not on the absence of a
   class, so a header with no script keeps a usable search box rather than an
   invisible one. Its own attribute, too: data-aws-open belongs to the menu. */
.aws-head__find[data-aws-find-open="no"] input[type="search"] {
	border-color: transparent;
	padding-inline: 0;
	visibility: hidden;
	width: 0;
}

.aws-head__find.is-open input[type="search"] {
	visibility: visible;
	width: 14ch;
}

.aws-head__findGo {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--circle);
	color: inherit;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	min-height: var(--wp--custom--tap-target);
	min-width: var(--wp--custom--tap-target);
}

.aws-head__findGo:hover { background: var(--wp--preset--color--surface); }

/* -------------------------------------------------------------------------
 * W01 · The strip above the header.
 *
 * One line, and a link where there is somewhere to go. It draws nothing at all
 * when there is nothing to say, so a site that never fills it in does not get
 * a coloured band of empty across the top of every page.
 * ------------------------------------------------------------------------- */
.aws-bar {
	container-type: inline-size;
	font-size: var(--wp--preset--font-size--small);
}

.aws-bar__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	justify-content: center;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	text-align: center;
}

.aws-bar__says { margin: 0; }

/* One message: its line and, where it has one, its link. Kept together so a
   link never wraps away from the line it belongs to. */
.aws-bar__one {
	align-items: baseline;
	display: inline-flex;
	gap: var(--wp--preset--spacing--2);
}

/* Several messages standing still read as a list, so they are divided. The
   divider is drawn rather than typed, and only between them. */
.aws-bar__inner > .aws-bar__one + .aws-bar__one::before {
	content: "\00B7";
	margin-inline-end: var(--wp--preset--spacing--2);
	opacity: .7;
}

/* Underlined rather than only coloured: on the accent ground the link and the
   line beside it are the same colour, so the underline is what says it is a
   link at all. */
.aws-bar__go {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .2em;
	/* A tap target, on a strip that is otherwise two lines of text tall. */
	padding-block: var(--wp--preset--spacing--1);
}

.aws-bar__go:hover { text-decoration: none; }

/* Where the line sits. Centred is the strip's own arrangement, so only the
   other three say anything here. */
.aws-bar.is-left .aws-bar__inner { justify-content: flex-start; text-align: start; }
.aws-bar.is-right .aws-bar__inner { justify-content: flex-end; text-align: end; }

/* A line too long for the strip, moving rather than wrapping to two rows.
   The track is what moves; the words inside it hold still relative to it, so
   the link beside them stays where a cursor left it.

   It stops on hover and on focus — a line somebody is trying to read, or has
   just tabbed to, should stay long enough to be read. */
.aws-bar.is-slide .aws-bar__inner {
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.aws-bar.is-slide .aws-bar__track {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
}

.aws-bar.is-slide .aws-bar__run {
	animation: aws-bar-slide 24s linear infinite;
	display: inline-block;
	margin: 0;
	padding-inline-start: 100%;
	white-space: nowrap;
	will-change: transform;
}

/* One message after another along the track, far enough apart that two of them
   are never read as one sentence. */
.aws-bar.is-slide .aws-bar__one + .aws-bar__one {
	margin-inline-start: var(--wp--preset--spacing--6);
}

.aws-bar.is-slide:hover .aws-bar__run,
.aws-bar.is-slide:focus-within .aws-bar__run {
	animation-play-state: paused;
}

@keyframes aws-bar-slide {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* Asked for less movement, and it holds still: the line goes back to sitting
   where it is, wrapping if it must, rather than sliding past. */
@media (prefers-reduced-motion: reduce) {
	.aws-bar.is-slide .aws-bar__run {
		animation: none;
		padding-inline-start: 0;
		white-space: normal;
	}

	.aws-bar.is-slide .aws-bar__inner { flex-wrap: wrap; }

	/* Standing still, several messages need the divider that the sliding ones
	   get from the space between them. */
	.aws-bar.is-slide .aws-bar__one + .aws-bar__one::before {
		content: "\00B7";
		margin-inline-end: var(--wp--preset--spacing--2);
		opacity: .7;
	}
}

/* -------------------------------------------------------------------------
 * W04 · Quick request bar.
 *
 * A card under the opening. One row on a desk, one field a line on a phone —
 * three fields squeezed side by side on a narrow screen are three fields
 * nobody can read the labels of.
 *
 * Named aws-quick, not aws-ask: the questions block already had .aws-ask for
 * one of its questions, and two blocks sharing a class put each other's styles
 * on themselves.
 * ------------------------------------------------------------------------- */
.aws-quick {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--4);
}

.aws-quick__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-quick__form {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6);
}

@container (min-width: 700px) {
	/* The button takes only what it needs; the questions share the rest. */
	.aws-quick__form {
		align-items: end;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}

	.aws-quick__go { grid-column: auto; width: max-content; }
}

.aws-quick__field {
	display: grid;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
}

.aws-quick__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.aws-quick__field input,
.aws-quick__field select {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	font: inherit;
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	width: 100%;
}

.aws-quick__go { margin: 0; }

.aws-quick__go .aws-btn { width: 100%; }

/* The rail's groups. Same behaviour as the header's, drawn against the rail's
   own rule rather than the header's row. */
.aws-mast__sections .aws-head__item {
	position: relative;
}

.aws-mast__sections .aws-head__open {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: var(--wp--preset--spacing--1);
}

/*
 * :not([hidden]) because setting display here would otherwise beat the rule
 * that hides it — same weight, later in the file — and the panel would sit
 * open across the lead story on every page load. The same trap the filter
 * chips and the booking wizard both fell into.
 */
.aws-mast__sections .aws-head__panel:not([hidden]) {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	display: grid;
	gap: var(--wp--preset--spacing--1);
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	min-width: 12em;
	padding: var(--wp--preset--spacing--3);
	position: absolute;
	text-align: start;
	top: 100%;
	z-index: 30;
}

/*
 * The rail centres its items and gives each the height of a tap target, which
 * a panel of four does not want stacked — inside one, the links keep a
 * comfortable target without the rail's own spacing.
 */
/* The same for a section that holds other sections. This panel is given its
   ground at every width, so the words in it are the page's ink at every width
   too. */
.aws-mast.has-own-colours .aws-mast__sections .aws-head__panel { color: var(--wp--preset--color--ink); }

.aws-mast__sections .aws-head__panel a {
	font-weight: 400;
	letter-spacing: 0;
	min-height: 0;
	padding-block: var(--wp--preset--spacing--2);
	text-transform: none;
	white-space: nowrap;
}

/* A header wearing colours the site chose. Everything in it follows the ground
   rather than keeping the palette's own ink, so the name, the menu and the
   links move together. */
.aws-head.has-own-colours a,
.aws-head.has-own-colours button,
.aws-mast.has-own-colours a,
.aws-mast.has-own-colours .aws-mast__dateline,
.aws-mast.has-own-colours .aws-mast__says {
	color: inherit;
}

/* Except the name and the line under it, which keep the colours the site gave
   them in Branding. The paper inherited whatever the ground was wearing and
   nothing else, so a name given a colour there showed everywhere except the
   one place the name is the largest thing on the page. Nothing unreadable
   reaches this — an ink that cannot be read on its ground is never published,
   see aws_widget_kit_brand_css() — so following it is safe.

   The dateline is not one of these. It is the day's date, not anything the
   business wrote, so it goes on following the ground. */
.aws-mast.has-own-colours .aws-mast__title,
.aws-mast .aws-mast__title {
	color: var(--aws-brand-name, inherit);
}

.aws-mast.has-own-colours .aws-mast__says,
.aws-mast .aws-mast__says {
	color: var(--aws-brand-tagline, inherit);
}

.aws-mast.has-own-colours .aws-mast__inner,
.aws-mast.has-own-colours .aws-mast__rail {
	border-color: currentColor;
}

/* The strip belongs to the header rather than floating above it. They are two
   template parts, so the layout put its usual gap between them — which nobody
   could see while both were the same cream, and which reads as a mistake the
   moment either one wears a colour of its own. */
.wp-site-blocks > :has(.aws-bar) + * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * The page, boxed.
 *
 * One of two arrangements a site chooses between. Full width is the design's
 * own and says nothing here; boxed puts the whole site — header, strip and all
 * — on a sheet with a ground behind it.
 *
 * The sheet is as wide as the widest thing the design lays out, plus the room
 * the layout already keeps at the sides, so a full-width block inside it still
 * reaches the sheet's own edge rather than stopping short of it.
 *
 * There is no breakpoint here and nothing to query. Below the sheet's width
 * there is no room to centre it in, so it fills the screen on its own and the
 * ground shows above and below it instead of all the way round — which is what
 * a boxed page on a telephone should look like anyway.
 * ---------------------------------------------------------------------- */
body.aws-boxed {
	background: var(--wp--preset--color--neutral-300);
}

body.aws-boxed .wp-site-blocks {
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--md);
	margin: var(--wp--preset--spacing--4) auto;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--6));
	/* Clipped, or a full-width block's own ground runs over the corners the
	   sheet was just given. */
	overflow: clip;
}

/* A header that sticks has to stick to the window, and a sheet that clips its
   own overflow is not something anything can stick out of. The arrangement the
   two cannot both have is the one where the header is pinned inside a page
   that scrolls away underneath it — so on a boxed page the header travels with
   the page. */
body.aws-boxed .aws-head.is-sticky {
	position: static;
}

/* -------------------------------------------------------------------------
 * How tall the header is.
 *
 * Only the room around what is in it: the name, the menu and the button keep
 * their own sizes, so a compact header is the same header with less air. That
 * is deliberate — shrinking the type to save a strip of screen costs more than
 * the strip is worth.
 *
 * The masthead is measured the same way and from the same setting, so a paper
 * that wants a shorter one does not have to go looking somewhere else for it.
 * ---------------------------------------------------------------------- */
/* The mark is measured from the header it sits in, so all three heights move
   together. A tall header used to paint the same stamp a short one did. */
/* Set on the section alone. The row inside it pads its sides and nothing
   else, so each of these is the whole of the answer rather than half of it. */
.aws-head.is-short { --aws-brand-mark: calc(var(--wp--preset--spacing--8) * 1.25); padding-block: var(--wp--preset--spacing--2); }
.aws-head.is-tall { --aws-brand-mark: calc(var(--wp--preset--spacing--8) * 2); padding-block: calc(var(--wp--preset--spacing--8) * 2); }

.aws-mast.is-short .aws-mast__inner { padding-block: var(--wp--preset--spacing--2); }
.aws-mast.is-tall .aws-mast__inner { padding-block: var(--wp--preset--spacing--8); }

/* Most of a masthead's height is the title and the row of sections under it,
   so trimming the block alone barely moves it — the room around the sections
   has to come down with it or a compact masthead is the same masthead. */
.aws-mast.is-short .aws-mast__title { margin-block: var(--wp--preset--spacing--1); }
.aws-mast.is-short .aws-mast__sections { padding-block: var(--wp--preset--spacing--1); }
.aws-mast.is-tall .aws-mast__sections { padding-block: var(--wp--preset--spacing--4); }

/* W82 · Stage --------------------------------------------------------------- */

/*
 * A picture the height of the screen, with the words on it.
 *
 * svh rather than vh: on a telephone vh is the height of the window with the
 * browser's own bars hidden, so a full-height section is taller than what
 * anybody can see and the button under the heading sits below the fold on the
 * one device where it matters most.
 */
/*
 * The ground the picture arrives on. Backgrounds are found late — the browser
 * has to fetch the stylesheet, parse it and lay the element out before it knows
 * there is a photograph — so for the first moment of a reload this is the whole
 * screen, and the kit's own page colour behind a white menu is a flash of a
 * different site. Dark is what the shade over the picture makes of it anyway.
 */
.aws-stage {
	align-items: center;
	background-color: var(--wp--preset--color--neutral-900);
	container-type: inline-size;
	display: grid;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--8);
	position: relative;
}

/* Unshaded, the picture is meant to be seen as it is, and a dark ground under
   it would be a flash of the opposite. */
.aws-stage.has-shade-none { background-color: var(--wp--preset--color--neutral-200); }

/* Enough of the next section showing to say the page continues. */
.aws-stage.is-tall { min-height: 82svh; }

.aws-stage__pictures,
.aws-stage__wash {
	inset: 0;
	position: absolute;
}

.aws-stage__pictures { z-index: -2; }
.aws-stage__wash { z-index: -1; }

.aws-stage__picture {
	background-position: center;
	background-size: cover;
	inset: 0;
	opacity: 0;
	position: absolute;
	/*
	 * Every picture runs the same animation for the same length of time and
	 * starts it a share of the way through, so the set cross-fades on its own
	 * with no script counting anything. One picture is simply always shown.
	 */
	animation: aws-stage-turn calc(var(--aws-stage-many) * 7s) infinite;
	animation-delay: calc(var(--aws-stage-index) * -7s);
	transform: scale(1.04);
}

/* Shown before the animation's first frame lands, so the section is never
   momentarily blank on a slow paint. */
.aws-stage__picture.is-first { opacity: 1; }

@keyframes aws-stage-turn {
	0%, 30% { opacity: 1; transform: scale(1); }
	38%, 92% { opacity: 0; transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}

.aws-stage.has-shade-even .aws-stage__wash { background: rgb(0 0 0 / 45%); }
.aws-stage.has-shade-lower .aws-stage__wash {
	background: linear-gradient(to bottom, rgb(0 0 0 / 15%), rgb(0 0 0 / 68%));
}

.aws-stage__inner {
	/* Light because it sits on a photograph, not because the palette is dark —
	   so the lightest neutral rather than a colour written down here. */
	color: var(--wp--preset--color--neutral-100);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
	width: 100%;
}

/* In the middle of the picture: the way in, where the picture is the message
   and the name is already said in the header. */
.aws-stage.is-centre .aws-stage__inner { text-align: center; }
.aws-stage.is-centre .aws-stage__heading,
.aws-stage.is-centre .aws-stage__lede { margin-inline: auto; }
.aws-stage.is-centre .aws-stage__actions { justify-content: center; }

/* The same idiom for the three sections a front page is usually built from.
   A page that leads with one long statement reads down the middle; the kit's
   own default is a column beside a picture, which is a different page. */
.aws-hero.is-centre .aws-hero__inner { text-align: center; }
.aws-hero.is-centre .aws-hero__heading,
.aws-hero.is-centre .aws-hero__lede,
.aws-hero.is-centre .aws-hero__proof { margin-inline: auto; }
.aws-hero.is-centre .aws-hero__actions { justify-content: center; }
/* The hero is a column of words beside a picture. Hiding the picture leaves
   the column where it was, so a centred hero was centred inside the left half
   of the page — the words in the middle of nothing. */
.aws-hero.is-centre .aws-hero__inner { grid-template-columns: minmax(0, 1fr); }
.aws-hero.is-centre .aws-hero__said { margin-inline: auto; }
/* And the eyebrow is a pill: as wide as its words, and told elsewhere to sit
   at the start of them. */
.aws-hero.is-centre .aws-hero__said > .aws-tag { align-self: center; }
.aws-features.is-centre .aws-features__heading { text-align: center; }
.aws-band.is-centre .aws-band__inner { text-align: center; }
.aws-band.is-centre .aws-band__body { margin-inline: auto; }
.aws-band.is-centre .aws-band__actions { justify-content: center; }

.aws-stage__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	margin: 0;
	max-width: 18ch;
	/* Read over a photograph rather than paper, so the letters carry their own
	   edge — without it a white heading disappears into a bright sky. */
	text-shadow: 0 1px var(--wp--preset--spacing--6) rgb(0 0 0 / 45%);
}

.aws-stage__lede {
	margin: var(--wp--preset--spacing--4) 0 0;
	max-width: 46ch;
	text-shadow: 0 1px var(--wp--preset--spacing--4) rgb(0 0 0 / 45%);
}

.aws-stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--6);
}

/*
 * Held against the foot of the picture. Absolute inside the stage rather than
 * fixed to the window: fixed would keep it on screen down the whole page, and
 * this belongs to the picture, not to the site.
 */
.aws-stage__foot {
	bottom: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--small);
	inset-inline: 0;
	margin: 0;
	opacity: .8;
	position: absolute;
	text-align: center;
	text-shadow: 0 1px var(--wp--preset--spacing--4) rgb(0 0 0 / 45%);
}

/* The second way out of the stage, which must not compete with the first. */
.aws-stage__actions .aws-btn.is-quiet {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--neutral-100);
}

/*
 * Asked for less motion, given none: the first picture, held. The others are
 * still in the markup and still decorative, so nothing is lost but the turning.
 */
@media (prefers-reduced-motion: reduce) {
	.aws-stage__picture { animation: none; transform: none; }
	.aws-stage__picture:not(.is-first) { display: none; }
}

/* W83 · Sliding pages ------------------------------------------------------- */

.aws-panes {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

/*
 * Opened from the menu, so nothing is drawn and nothing is occupied — the gap
 * before it included, which is the one that is easy to miss: a section of no
 * height still counts as a block after another block, and the space between
 * them is what was still scrolling a page meant to be one screen.
 */
.aws-panes.is-menu { margin-block: 0; padding-block: 0; }

.aws-panes__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-panes__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--6);
}

.aws-panes__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aws-panes__links a {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	display: inline-block;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	text-decoration: none;
}

/*
 * The panel itself: off the right edge until the browser marks it as the
 * target, then across. Fixed rather than absolute so it covers the page from
 * wherever somebody had scrolled to, which is what makes it read as a panel
 * over the site rather than a section further down it.
 */
/*
 * The panel is the column; the rest of the screen is what it is laid over.
 *
 * So this element is the whole window and holds two things: a wash over the
 * page behind, and the column itself against the right edge. The page stays
 * visible and dimmed rather than replaced, which is what says the panel is on
 * top of the site rather than another page of it.
 */
/*
 * The transitions live on the open state, not here.
 *
 * A panel that carries them while it is shut is a panel that can animate itself
 * shut — and something was doing exactly that on a plain page load, with no
 * fragment in the address and so nothing targeted: a panel appearing for a
 * moment and sliding away to the right, which is this closing.
 *
 * Whatever prompted that first style change, a rule with no transition on it
 * cannot animate through one. Opening still slides, because a transition is
 * read from the state being entered and the open state below has one; closing
 * is now immediate, which is the price and a fair one.
 */
.aws-pane {
	background: rgb(0 0 0 / 45%);
	inset: 0;
	position: fixed;
	/* Not merely transparent: an unopened panel must be out of the tab order
	   and unread by a screen reader, and opacity alone leaves it in both. */
	opacity: 0;
	visibility: hidden;
	z-index: 30;
}

.aws-pane:target {
	opacity: 1;
	transition: opacity .32s ease, visibility .32s;
	visibility: visible;
}

.aws-pane__inner {
	/* The ground comes from the block's own background choice, so a site may
	   have dark panels over a dark picture without a second setting for it. */
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-inline-start: auto;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
	position: relative;
	transform: translateX(100%);
	/*
	 * Wide enough to read a paragraph in, never so wide that the picture it is
	 * laid over stops being visible behind it — and the whole window once the
	 * window is narrower than a column, without a breakpoint to state it: the
	 * lower bound does that on its own.
	 */
	width: min(100%, max(46%, var(--wp--custom--container--two-up)));
}

.aws-pane:target .aws-pane__inner { transform: translateX(0); transition: transform .32s ease; }

/*
 * The way out, drawn as one.
 *
 * A hairline ring inheriting the text colour disappeared against a
 * photograph — on a dialog laid over one, the only thing somebody needs to
 * find is this, so it carries its own ground rather than borrowing the
 * panel's.
 */
.aws-pane__close {
	align-items: center;
	/* Not float: the panel is a flex column and a float inside one does
	   nothing at all, which is why this sat against the left edge. */
	align-self: flex-end;
	background: var(--wp--preset--color--neutral-900);
	border: 2px solid var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--radius--circle);
	color: var(--wp--preset--color--neutral-100);
	display: flex;
	font-size: var(--wp--preset--font-size--x-large);
	height: var(--wp--custom--tap-target);
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	width: var(--wp--custom--tap-target);
}

.aws-pane__close:hover,
.aws-pane__close:focus-visible {
	background: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--neutral-900);
}

/*
 * The head is one line, not two. The close used to take a row to itself above
 * the title, which is most of what made this band as deep as it was; out of
 * the flow it shares the title's line and the band is the height of one
 * control.
 *
 * Inset zero rather than a spacing step: an absolutely positioned box resolves
 * against its container's padding box, so the panel's own inline padding has
 * already moved it in. A step on top of that would indent it twice.
 *
 * Not applied to the popup, which places its own close and sets its own
 * padding — that dialog's head is already the size it was asked to be.
 */
.aws-pane:not(.is-popup) .aws-pane__close {
	/*
	 * Half the size, at the right, on the middle of the band.
	 *
	 * Both insets carry the panel's own padding, because an absolutely
	 * positioned box resolves against its containing block's padding box — and
	 * a padding box includes the padding. Zero is therefore the panel's outer
	 * edge, not the inside of it, which is what hung this button half off the
	 * corner.
	 *
	 * Vertically: 4.4px of padding, then the 44px band, and a 22px button
	 * centres in that band 11px down it. Every term is a fraction of the token
	 * it comes from, so none of them can drift apart from the rule that sets it.
	 *
	 * The border comes down to 1px with the size — 2px around a box this small
	 * reads as a ring rather than an edge — and the glyph to the body size,
	 * which a 22px box can hold.
	 */
	border-width: 1px;
	font-size: var(--wp--preset--font-size--medium);
	height: calc(var(--wp--custom--tap-target) / 2);
	inset-block-start: calc(var(--wp--preset--spacing--1) + var(--wp--custom--tap-target) / 4);
	inset-inline-end: var(--wp--preset--spacing--6);
	position: absolute;
	width: calc(var(--wp--custom--tap-target) / 2);
}

/*
 * Centred on that line rather than sitting at the top of it: the band is as
 * tall as the close button, and the title is centred in it both ways. The
 * inline padding is the close button's width, so a longer title wraps clear of
 * it instead of running underneath.
 */
.aws-pane:not(.is-popup) .aws-pane__title {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-block-end: var(--wp--preset--spacing--1);
	min-height: var(--wp--custom--tap-target);
	padding-inline: var(--wp--custom--tap-target);
}

.aws-pane__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	/* Centred, and the close button is absolutely positioned, so the title has
	   the head to itself and sits on the panel's middle rather than being
	   pushed off it by a control in the corner. */
	margin: 0 0 var(--wp--preset--spacing--6);
	text-align: center;
}

/*
 * The one that is a form. It sits over the page rather than replacing it,
 * because filling in an order is something done on the page, not somewhere
 * else — so the picture stays visible behind it and closing puts you back
 * exactly where you were.
 */
.aws-pane.is-popup {
	background: rgb(0 0 0 / 55%);
	display: grid;
	overflow: hidden;
	place-items: center;
	padding: var(--wp--preset--spacing--4);
	/* Down rather than across: a dialog that slid in from the side would read
	   as one more page, which is the thing it is not. */
	transform: translateY(var(--wp--preset--spacing--6));
}

.aws-pane.is-popup:target { transform: translateY(0); }

/*
 * A form needs room the way a paragraph does not: two fields to a row, and an
 * address either side of an arrow. So the dialog runs to the design's wide
 * measure rather than its reading one.
 */
.aws-pane.is-popup .aws-pane__inner {
	border-radius: var(--wp--custom--radius--lg);
	height: auto;
	margin-inline: auto;
	max-height: 92svh;
	/*
	 * Narrower than the design's wide measure. A form three fields to a row is
	 * still a form: at the full width the boxes run so long that the eye loses
	 * which label belongs to which, and the message box becomes a paragraph
	 * field somebody is invited to fill.
	 */
	max-width: var(--wp--custom--container--three-up);
	padding: var(--wp--preset--spacing--4);
	transform: none;
	width: 100%;
}

/*
 * The dialog is a ground with the form set into it, clear of all four edges.
 * Flush, the bands above and below read as strips stuck to the card rather
 * than as the frame the card sits in.
 */
.aws-pane.is-popup .aws-pane__inner { background: none; }

.aws-pane.is-popup .aws-pane__content > [class*="aws-"] {
	border-radius: var(--wp--custom--radius--lg);
	/*
	 * Room above the first row and below the last. Stripped of its own
	 * padding, the card ran its fields hard against a rounded edge — the top
	 * corners cut the first row and the whole thing read as something that had
	 * been trimmed rather than laid out.
	 */
	padding-block: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--preset--spacing--4);
}

/*
 * A band under the form to match the one above it: the same light words on
 * the same wash, and no rule across it — the form's own edge is already the
 * line between them, and a second one would draw a box round a box.
 */
.aws-pane.is-popup .aws-pane__foot {
	border-top: 0;
	color: var(--wp--preset--color--neutral-100);
	margin: 0;
	padding-top: var(--wp--preset--spacing--4);
}

/*
 * Lifted out of the flow, so the way out of a dialog costs it no height. It
 * was taking a row of its own above the heading, which was most of the band
 * between the top of the panel and the first field.
 */
/*
 * Held off the corner. An absolutely placed child is laid against the panel's
 * padding box, so the panel's own padding does not inset it — at right: 0 it
 * sat hard on the outer edge with half its ring over the photograph.
 */
.aws-pane.is-popup .aws-pane__close {
	position: absolute;
	right: var(--wp--preset--spacing--3);
	top: var(--wp--preset--spacing--2);
}

/*
 * The title stands above the form on the wash, not inside it. Light, because
 * what it sits on is the darkened page rather than the card — the panel keeps
 * no ground of its own, so there is nothing else here for it to take a colour
 * from.
 */
.aws-pane.is-popup .aws-pane__title {
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--x-large);
	/* Clear of the form rather than resting on it: the wash showing between
	   the two is what makes the heading read as the dialog's own rather than
	   as the first line of the card. */
	margin-block-end: var(--wp--preset--spacing--4);
	text-align: center;
}

/*
 * A section inside a panel does not keep its own room as well: the panel is
 * already padded, and the two together were most of why a form the height of
 * a form did not fit the window it was drawn in.
 *
 * Written without :where(), which was the whole trouble the first time: it
 * costs the selector all its specificity, so the section's own padding — one
 * class, declared later in this file — simply won and the seventy pixels
 * stayed.
 */
.aws-pane__content > [class*="aws-"] { padding-block: 0; }

/*
 * And a gap between them where there is more than one. Zeroing the padding
 * above is what a single block in a panel wants — it should not start a third
 * of the way down — but it also welds a stack of them together, which is how
 * the contact details ended up sitting on the form under them.
 *
 * Padding rather than margin, so the gap belongs to the block and takes that
 * block's own ground. As a margin it was a band of the panel showing through
 * between them, and the panel is dark where these blocks are not: a stripe
 * across the join rather than a space in it.
 *
 * On the second and later blocks rather than the first, so a panel holding one
 * block is untouched.
 */
.aws-pane__content > [class*="aws-"] + [class*="aws-"] {
	padding-block-start: var(--wp--preset--spacing--6);
}

/*
 * The stack reads as one card on the panel's ground, so its outer corners are
 * rounded and the joins between blocks are not: the top corners belong to
 * whatever is first and the bottom to whatever is last, and a single block
 * gets all four from both rules at once.
 *
 * Done on the blocks rather than by clipping the content box, because these
 * are what carry the colour — a radius on a transparent wrapper curves
 * nothing, and overflow: hidden there would cut the focus ring off every
 * control that sits against an edge.
 */
.aws-pane__content > [class*="aws-"]:first-child {
	border-start-end-radius: var(--wp--custom--radius--lg);
	border-start-start-radius: var(--wp--custom--radius--lg);
}

.aws-pane__content > [class*="aws-"]:last-child {
	border-end-end-radius: var(--wp--custom--radius--lg);
	border-end-start-radius: var(--wp--custom--radius--lg);
}

/* The footer the panel covers, said again inside it. */
.aws-pane__foot {
	border-top: 1px solid var(--wp--preset--color--divider);
	font-size: var(--wp--preset--font-size--small);
	margin: auto 0 0;
	opacity: .75;
	padding-top: var(--wp--preset--spacing--4);
	text-align: center;
}

/* Somebody who asked for less motion gets the panel, not the journey. Named
   where the transitions now are: on the open state, not on the shut one. */
@media (prefers-reduced-motion: reduce) {
	.aws-pane:target,
	.aws-pane:target .aws-pane__inner { transition: none; }
}

/* W84 · Ride booking -------------------------------------------------------- */

.aws-ride {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-ride__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.aws-ride__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--6);
	text-align: center;
}

.aws-ride__grid { display: grid; gap: var(--wp--preset--spacing--2); }

/* Two questions to a row once there is room for two — the whole point of
   asking everything at once is seeing it at once. */
/* Name, e-mail and telephone across one row: one question, three answers. */
.aws-ride__reach { display: grid; gap: var(--wp--preset--spacing--2); }

@container (min-width: 620px) {
	.aws-ride__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aws-ride__journey,
	.aws-ride__reach,
	.aws-ride__wide { grid-column: 1 / -1; }
	.aws-ride__reach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-ride__field { margin: 0; }

.aws-ride :where(input, select, textarea) {
	background: var(--wp--preset--color--neutral-100);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font: inherit;
	/* The tap target already guarantees a field big enough to hit, so the
	   padding above and below it is room the form does not need. */
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	width: 100%;
}

.aws-ride :where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.aws-ride textarea { min-height: 0; resize: vertical; }

/*
 * From here, to there. The arrow is the one thing on this form somebody has to
 * read the right way round, so the two addresses are laid either side of it
 * rather than merely stacked and hoped about.
 */
.aws-ride__journey {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--2);
	grid-template-columns: 1fr auto 1fr;
}

.aws-ride__arrow {
	align-items: center;
	background: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--radius--circle);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex: none;
	height: var(--wp--preset--spacing--8);
	justify-content: center;
	width: var(--wp--preset--spacing--8);
}

.aws-ride__go { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--3); }
.aws-ride__go .aws-btn { align-items: center; display: inline-flex; gap: var(--wp--preset--spacing--2); }

.aws-ride__note {
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--2) 0 0;
	opacity: .75;
	text-align: center;
}

/*
 * W18 · Contact, side by side.
 *
 * The three ways of reaching somebody as three columns, each marked and named.
 * For a panel that is only contact details, where reading down a stack to find
 * the telephone number is a stack too many.
 */
.aws-contact.is-columns .aws-contact__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	grid-template-columns: 1fr;
	/* Room above the icons. Padding on the block rather than margin between it
	   and the panel, for the same reason as the gap below: the panel's ground is
	   dark and this block's is not. */
	padding-block-start: var(--wp--preset--spacing--6);
	/* Each column centred, so the icon sits over its own value rather than over
	   the left edge of the column it shares with it. */
	text-align: center;
}

@container (min-width: 620px) {
	.aws-contact.is-columns .aws-contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aws-contact.is-columns .aws-icon {
	color: var(--wp--preset--color--accent);
	height: var(--wp--preset--spacing--8);
	/* A block box is not centred by centring text, so it is centred by its own
	   margins. */
	margin-inline: auto;
	width: var(--wp--preset--spacing--8);
}

/* The mark takes the accent from the icon inside it and nothing else: it is a
   link that looks like a symbol, not a symbol with a link's underline. */
.aws-contact.is-columns .aws-contact__icon {
	color: inherit;
	display: block;
	text-decoration: none;
}
.aws-contact.is-columns .aws-contact__copy { margin: var(--wp--preset--spacing--3) 0 0; }

/*
 * Half the height, near enough. The 52px these were came from the padding
 * rather than from the min-height: 15px of text at the body's 1.6 is a 24px
 * line, and 13.2px above and below it is most of the box. So the line comes
 * down to 1.2 — a form control has no reason to be led like a paragraph — and
 * the block padding to the smallest step, which leaves ~29px.
 *
 * Exactly half would be 26px, and 26px is the line box and the borders with
 * nothing left over, so the text would sit against the edges.
 *
 * Scoped to this block, and to the controls inside a labelled field: the
 * shared rule above also dresses the booking wizard, which nobody asked to
 * make denser, and the radios in the ways-to-reach-you row are pills that
 * would lose their shape if this reached them.
 */
.aws-form .aws-field :where(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	line-height: 1.2;
	min-height: calc(var(--wp--custom--tap-target) / 2);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
}

/*
 * And the message box to half of what that leaves it. Five rows of an 18px
 * line, plus the padding and the borders, is 101px; this is 50.6px, which is
 * the half. Set as a height rather than by dropping the rows attribute,
 * because rows only comes in whole lines — three of them is 65px and two is
 * 47px, and neither is what was asked for.
 *
 * Still draggable, so anybody with more to say can have the room back.
 */
.aws-form .aws-field textarea {
	height: calc(var(--wp--custom--tap-target) * 1.15);
	resize: vertical;
}

/*
 * The send sits at the end of the form rather than under its first column.
 * Scoped to this block: the booking wizard shares .aws-booking__go and its
 * button is one of a row of controls, not the last thing on a page.
 */
/*
 * The line under the name, turning where the branding holds more than one.
 *
 * Stacked in a single grid cell rather than positioned, so the slot is as wide
 * and as tall as the longest line without anything being measured, and every
 * line runs the same animation offset by one slot — no script counts them.
 *
 * The two keyframe sets exist because one cannot serve both counts. Each line
 * is lit for a fixed share of the cycle while the gap between their starts is
 * 100/n, so a single set that cross-fades cleanly at three lines leaves both
 * lines dark for a moment at two. These hand over where the next one begins.
 */
.aws-head__says.is-turning { display: grid; }

.aws-head__says.is-turning > span {
	animation-delay: calc(var(--aws-says-index) * -7s);
	animation-duration: calc(var(--aws-says-many) * 7s);
	animation-iteration-count: infinite;
	grid-area: 1 / 1;
	opacity: 0;
}

.aws-head__says.is-of-2 > span { animation-name: aws-says-two; }
.aws-head__says.is-of-3 > span { animation-name: aws-says-three; }

/* Lit before the animation's first frame lands, so the slot is never blank. */
.aws-head__says.is-turning > span.is-first { opacity: 1; }

@keyframes aws-says-two {
	0%, 42% { opacity: 1; }
	50%, 92% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes aws-says-three {
	0%, 25% { opacity: 1; }
	33.3%, 92% { opacity: 0; }
	100% { opacity: 1; }
}

/* Asked for less motion, given none: the first line, held. */
@media (prefers-reduced-motion: reduce) {
	.aws-head__says.is-turning > span { animation: none; opacity: 1; }
	.aws-head__says.is-turning > span:not(.is-first) { display: none; }
}

/* The header's telephone number as a mark: the same size as the menu text
   beside it, and taking its colour, so it reads as one of the row rather than
   as a picture dropped into it. */
.aws-head__phone.is-mark { display: flex; }
.aws-head__phone.is-mark .aws-icon { height: 1.4em; width: 1.4em; }

/*
 * Room at the top of the card. The panel zeroes each block's own vertical
 * padding, which is what a block wants when the panel's title is right above
 * it — but this one is a card on the panel's ground with its own corners, and
 * a form starting hard against a rounded edge reads as clipped.
 *
 * Two classes deep so it beats that zeroing outright rather than by being
 * further down the file.
 */
.aws-pane__content > .aws-form.is-columns {
	padding-block-start: var(--wp--preset--spacing--6);
}

/*
 * The marks at one end of the last line and the send at the other. flex-end
 * still, so that a form with no marks to show keeps its button on the right
 * rather than sliding it left into the middle of nothing.
 */
.aws-form .aws-booking__go {
	align-items: center;
	justify-content: flex-end;
	margin-block-end: var(--wp--preset--spacing--6);
}

/* And the marks pushed away from it, to the start of the row. */
.aws-form__ways {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	margin-inline-end: auto;
}

.aws-form__ways .aws-icon {
	color: var(--wp--preset--color--accent);
	height: var(--wp--preset--spacing--6);
	width: var(--wp--preset--spacing--6);
}

.aws-form__ways a { color: inherit; display: block; text-decoration: none; }

/*
 * W17 · Contact form, side by side.
 *
 * The short answers pair up where there is room and the long ones keep the
 * width, so six questions read as four rows rather than six. A container query
 * rather than a media one: what decides is how wide the form is, and this form
 * is as often in a panel half the width of the window as across a page.
 *
 * The wrapper the always-asked three sit in becomes display: contents, so they
 * join the form's own grid instead of forming a second one inside one cell.
 * It is a plain div holding nothing but labels, so nothing semantic is lost.
 *
 * 480 rather than the 640 the rest of the kit pairs at, because this form's
 * container is a sliding panel and not a page: at 700px wide less its padding
 * the form has 647px to work in, and a breakpoint seven pixels under that is
 * one any change to the panel's padding would silently switch off. Two short
 * answers are comfortable well before then.
 */
@container (min-width: 480px) {
	.aws-form.is-columns .aws-booking__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--4);
	}

	.aws-form.is-columns .aws-pair { display: contents; }

	/*
	 * The long answers take the whole row: the message box and the list of ways
	 * to be reached.
	 */
	.aws-form.is-columns .aws-booking__form > :where(.aws-field:has(textarea), .aws-field:has(.aws-choices)) {
		grid-column: 1 / -1;
	}

	/*
	 * The agreement and the send share the last line — the box to tick at the
	 * start of the row, the button at the far end of it. Both placed by column
	 * rather than left to fall where they may: with no consent to tick, an
	 * auto-placed button would sit in the first column and read as the start of
	 * the form rather than the end of it.
	 */
	.aws-form.is-columns .aws-consent { align-self: center; grid-column: 1; }
	.aws-form.is-columns .aws-booking__go { align-self: center; grid-column: 2; }
}

/* The page fills the window and the footer takes up the slack, so a short page
   ends with the footer on the bottom edge rather than stranded halfway up with
   blank space under it.

   This rule existed, in platform.css — which is enqueued only on pages that
   carry the ordering block, so the platform's own pages had it and every site
   sold through the platform did not. It lives here because this is the sheet
   every page of every site loads. platform.css keeps its copy: that file also
   zeroes the wrapper's padding for the storefront, and blocks.css cannot do
   that without changing every tenant's layout. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > .wp-block-template-part:last-child { margin-top: auto; }

/* The address suggestions. Google's old widget drew this list itself, in a
   panel appended to the document; the API that replaces it returns data and
   nothing else, so the list is ours to draw and to place. Against the field
   rather than after it: these inputs sit in grids and flex rows, where a
   sibling would become a row of its own and push the form apart as you type. */
.aws-suggest {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	inset-inline: 0;
	list-style: none;
	margin: var(--wp--preset--spacing--1) 0 0;
	max-height: 40svh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--1);
	position: absolute;
	top: 100%;
	z-index: 50;
}

.aws-suggest[hidden] { display: none; }

.aws-suggest__one {
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

.aws-suggest__one:hover,
.aws-suggest__one.is-on {
	background: var(--wp--preset--color--surface);
}

/*
 * A page with something beside its content. The rail is a share of the room
 * rather than a width written down, so it narrows with the page and is under
 * the content where there is not enough room to be beside it.
 */
.aws-beside {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size);
}

.aws-beside--left {
	grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
}

.aws-beside--both {
	grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr) minmax(0, 0.28fr);
}

@container (max-width: 48rem) {
	.aws-beside {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * The twelve columns a page's sections are measured in.
 *
 * Only the columns are added. A section that says nothing about its width
 * takes all twelve and is a full row, which is what every section was before
 * this -- so a page nobody has narrowed is laid out exactly as it was. The
 * space between one row and the next is still the margin each section carries,
 * which is why there is no row gap here; and how wide a section is held inside
 * its own share is still the theme's business, not this grid's.
 */
/*
 * No gap above the first section, because the section brings its own.
 *
 * WordPress puts a block gap between the header and the content below it,
 * which is right for a page that starts with a paragraph and wrong for one
 * that starts with a section: every section here already holds itself off what
 * is above it by a good deal more than that gap. Stacked, the two came to
 * sixty pixels of nothing between the menu and the first word under it.
 *
 * Only where the content is ours -- that class is put on the wrapper of a page
 * this theme drew -- so a page of ordinary blocks keeps the gap it was given.
 */
.wp-site-blocks > main:has(> .aws-grid) { margin-block-start: 0; }

.aws-grid {
	column-gap: var(--wp--preset--spacing--4);
	/*
	 * A container, so that the rule below stacking these on a narrow screen
	 * has something to measure. There was no container anywhere above this --
	 * not the main element, not the body -- so that rule had never once
	 * matched. It cost nothing while every section took all twelve columns and
	 * the rule had nothing to undo; the first section narrowed to eight put a
	 * playlist beside a player on a telephone and ran the page off the side of
	 * it.
	 */
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

/*
 * And held to the page's own width, but only where something is narrowed.
 *
 * A section that takes all twelve is as wide as the window and finds the
 * margin itself, from the width its own inner wrapper is held to -- which is
 * how a coloured band comes to bleed to both edges. Take eight of twelve and
 * that stops working: the section is now the left two thirds of the window,
 * its inner wrapper is no wider than the section, and the page's margin
 * vanishes. The video began at the edge of the screen while the name in the
 * header above it began a hundred pixels in.
 *
 * So the twelve columns are measured across the page rather than the window,
 * and only on the pages that ask for it. Every page whose sections are all
 * twelve wide is laid out exactly as it was, bleed and all.
 */
.aws-grid:has(> :not(.aws-w-12)) {
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size);
}

.aws-grid > * {
	grid-column: span 12;
}

/*
 * Two sections on the same ground share one gap, not two.
 *
 * Every section holds itself off what is above and below it, which is right
 * where the ground changes: a dark band against a pale one needs the room on
 * both sides of the join. Where the ground does not change there is no join --
 * the two are one sheet of colour -- and the room is paid for twice, so a
 * contact panel above a form came out with seventy pixels of nothing between
 * them and read as one band with a hole in it.
 *
 * Written out a ground at a time because that is the question being asked, and
 * CSS has no way to ask whether the thing before this one is wearing what this
 * one is wearing.
 */
.aws-grid > .has-background-background-color + .has-background-background-color,
.aws-grid > .has-surface-background-color + .has-surface-background-color,
.aws-grid > .has-accent-background-color + .has-accent-background-color,
.aws-grid > .has-accent-2-background-color + .has-accent-2-background-color,
.aws-grid > .has-neutral-900-background-color + .has-neutral-900-background-color {
	padding-block-start: 0;
}

.aws-grid > .aws-w-3 {
	grid-column: span 3;
}

.aws-grid > .aws-w-4 {
	grid-column: span 4;
}

.aws-grid > .aws-w-6 {
	grid-column: span 6;
}

.aws-grid > .aws-w-8 {
	grid-column: span 8;
}

/*
 * A playlist standing on its own runs down the side of everything after it.
 *
 * The player and the list used to be one section, so the section was as tall
 * as the list -- and the channel strip and the conversation, which belong
 * under the player, waited for fourteen videos to finish before they began.
 * Split in two, the list takes the last four columns and every row there is,
 * and what follows the player carries on underneath it.
 *
 * Spanning rows rather than ending at -1, which would be the last line of an
 * explicit grid this has none of; and starting at a column counted from the
 * end, so the list is the far side of the page whatever the sections beside it
 * were given.
 */
.aws-grid > .aws-reel--list {
	grid-column: -5 / -1;
	grid-row: 1 / span 99;
}

/*
 * Narrow enough and a share of twelve is a slot nothing reads in, so every
 * section takes the whole width and they stack.
 *
 * Said of each width in turn rather than of every child at once. A class
 * naming a width beats a star, so the one line meant to undo all of them lost
 * to every one of them -- which nothing noticed while no page had narrowed a
 * section for the rule to undo.
 */
@container (max-width: 48rem) {
	.aws-grid > *,
	.aws-grid > .aws-w-3,
	.aws-grid > .aws-w-4,
	.aws-grid > .aws-w-6,
	.aws-grid > .aws-w-8 {
		grid-column: span 12;
	}

	/*
	 * And the list, which was placed by hand and is otherwise still holding
	 * four columns of a grid with no four columns to spare -- and still spanning
	 * every row of it.
	 *
	 * Last of all, too. Stacked in the order they are written, a phone gets the
	 * video, then fourteen more videos, and the conversation two thousand
	 * pixels further down; what somebody wants after watching one is what other
	 * people said about it, and the rest of the playlist after that.
	 */
	.aws-grid > .aws-reel--list {
		grid-column: span 12;
		grid-row: auto;
		order: 1;
	}
}

/*
 * The reading column starts where the site's name starts.
 *
 * A page is read down its left edge, and the header, the footer and the words
 * between them were starting at three different places: the header and footer
 * hold their contents to the wide measure, and the words were held to the
 * narrower reading measure and then centred inside it -- so the text began
 * a couple of hundred pixels to the right of the name above it, with nothing
 * in the gap.
 *
 * The reading measure is kept, because a line of text as wide as a screen is
 * not a line anybody reads. What changes is where it sits: flush with the wide
 * measure rather than centred in the page, so every left edge on the page is
 * the same one. Narrower than the wide measure and there is nothing to take
 * off, which is what the max is for -- including a section given a share of
 * the twelve columns, whose share is narrower than the measure and is
 * therefore flush with the start of its own share.
 */
main :where(.is-layout-constrained) > :not(.alignfull):not(.alignwide) {
	/*
	 * Marked important because WordPress's own constrained-layout rule is:
	 * it writes margin-left: auto !important on every child, and an ordinary
	 * declaration cannot answer that however specific it is. This is the one
	 * place in this stylesheet where that is true, and it is why.
	 */
	margin-inline: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) auto !important;
}