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

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

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

.aws-foot__inner {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding: var(--wp--preset--spacing--8) 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;
	}
	.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;
}

.aws-mast__rail {
	border-top: 1px solid var(--wp--preset--color--ink);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--4);
}

.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.
 */
.aws-stage {
	align-items: center;
	container-type: inline-size;
	display: grid;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--8);
	position: relative;
}

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

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