/*
 * 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-head,
.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 {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: 1fr;
}

/* Centred against the picture is the arrangement — but with no picture the
   slot still holds its circle, and the words were centred against a dashed
   placeholder with ninety pixels of nothing above the first line. */
.aws-hero__inner.is-unpictured { align-items: start; }

/*
 * 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 {
	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%;
}

/*
 * 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;
}

.aws-steps__list .aws-step { counter-increment: aws-step; }

.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);
	height: var(--wp--preset--spacing--8);
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--3);
	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); margin: 0 0 var(--wp--preset--spacing--1); }
.aws-steps__list .aws-step__body { margin: 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; }

.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;
	height: var(--wp--preset--spacing--8);
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--3);
	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); margin: 0 0 var(--wp--preset--spacing--1); }
.aws-feature__body { margin: 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 ------------------------------------------------------- */

.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; }
}

.aws-field { display: grid; gap: var(--wp--preset--spacing--2); }
.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-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-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); }

.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; }

.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; }

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

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

/*
 * 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);
	padding: 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; }

	/* 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; }

	.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);
}

.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);
}

.aws-board__top {
	margin-bottom: var(--wp--preset--spacing--6);
}

.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);
}

.aws-board__hijri {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	opacity: .8;
}

.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;
}

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

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

.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);
}

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

.aws-time__arabic {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
}

.aws-time__flag {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aws-time__adhan {
	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__iqamah,
.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;
}

.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-posts,
.aws-tabs {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--8);
}

.aws-asked__inner,
.aws-story__inner,
.aws-marks__inner,
.aws-versus__inner,
.aws-posts__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-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;
}

/* 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;
	text-wrap: balance;
}

.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. */
	border-top: 2px solid var(--wp--preset--color--ink);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	text-align: center;
}

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

.aws-mast__title {
	color: var(--wp--preset--color--ink);
	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 {
	border-top: 1px solid var(--wp--preset--color--ink);
	container-type: inline-size;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-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;
	margin: 0;
	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.
 */
.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;
}

.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. */
.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-head.is-short .aws-head__inner { padding-block: var(--wp--preset--spacing--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.
 */
.aws-grid {
	column-gap: var(--wp--preset--spacing--4);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

.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;
}

/* Narrow enough and a share of twelve is a slot nothing reads in, so every
   section takes the whole width and they stack. */
@container (max-width: 48rem) {
	.aws-grid > * {
		grid-column: span 12;
	}
}