/*
 * Content pages — Homepage, Events, About, Help.
 *
 * Only the section bands live here: their backgrounds, rules and the padding
 * between them. Everything inside a band is a component, styled in
 * components.css and shared with the WooCommerce templates.
 *
 * The bands genuinely cannot be shared. Every one of these pages sets its own
 * vertical rhythm — the homepage alone runs 92/72/56/80/84px of section padding
 * with four different top and bottom pairs — and the design is explicit that
 * these are deliberate rather than a scale to be harmonised.
 *
 * Loaded only on the four pages that have them; the WooCommerce routes never
 * request this file.
 */

/* ---------------------------------------------------------------------------
 * Bands
 *
 * `al-band` is the padding and the optional fill; `al-band__inner` is the
 * measure.
 *
 * Where the 56px page padding sits is not cosmetic — it is 112px of content
 * width — and the design puts it in two different places depending on whether
 * the band paints anything full-bleed:
 *
 *   - A band with a fill or a rule has to be full-width to paint it, so the
 *     padding goes on the band and the measure caps only the content. A 1240px
 *     band of this kind holds 1240px of content.
 *   - A band that paints nothing caps its whole box at the measure instead,
 *     which puts the padding inside the cap. A 1240px band of this kind holds
 *     1128px of content.
 *
 * So the two are not interchangeable, and the modifier that supplies the fill
 * is also what selects the geometry. Nothing else needs to know.
 * ------------------------------------------------------------------------ */

.al-band__inner {
	max-width: var(--al-max-width);
	margin-inline: auto;
	padding-inline: var(--al-page-padding);
}

.al-band--cream,
.al-band--tint,
.al-band--ruled {
	padding-inline: var(--al-page-padding);
}

.al-band--cream > .al-band__inner,
.al-band--tint > .al-band__inner,
.al-band--ruled > .al-band__inner {
	padding-inline: 0;
}

.al-band--cream {
	background: var(--al-cream);
	border-block: 1px solid var(--al-border-section);
}

.al-band--tint {
	background: var(--al-lavender-t1);
}

.al-band--ruled {
	border-top: 1px solid var(--al-border-section);
}

.al-band__inner--narrow {
	max-width: var(--al-max-width-narrow);
}

.al-band__inner--narrow-lg {
	max-width: var(--al-max-width-narrow-lg);
}

/* A band whose content is a centred column. */
.al-band__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * Homepage
 * ------------------------------------------------------------------------ */

.al-home-experiences {
	padding-block: 92px 48px;
}

.al-home-experiences .al-section-heading {
	margin-bottom: 48px;
}

.al-home-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--al-grid-gap);
}

.al-home-why {
	padding-block: var(--al-section-padding);
}

.al-home-why .al-band__stack {
	gap: 44px;
	text-align: center;
}

.al-home-collections {
	padding-block: 56px 88px;
}

.al-home-collections .al-section-heading {
	margin-bottom: 44px;
}

.al-home-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--al-grid-gap-strip-lg);
}

.al-home-how {
	padding-block: 80px 88px;
}

.al-home-how .al-band__stack {
	gap: 52px;
}

.al-home-story {
	padding-block: 84px;
}

/* ---------------------------------------------------------------------------
 * Events
 * ------------------------------------------------------------------------ */

.al-events-occasions {
	padding-block: 72px 40px;
}

.al-events-occasions .al-band__stack {
	gap: 36px;
}

/*
 * Seven pills whose hues run lavender, rose, sage, sand, lavender, sage, sand.
 * That is a four-step rotation followed by a three-step one, so each pill names
 * its own hue in the template rather than taking it from an nth-child cycle.
 */
.al-occasions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.al-occasion {
	border-radius: var(--al-radius-pill);
	padding: 11px 24px;
	font-size: var(--al-card-desc-size-lg);
}

.al-occasion--lavender {
	background: var(--al-hue-lavender-bg);
	color: var(--al-hue-lavender-text);
}

.al-occasion--rose {
	background: var(--al-rose-bg);
	color: var(--al-rose-text);
}

.al-occasion--sage {
	background: var(--al-sage-bg);
	color: var(--al-sage-text);
}

.al-occasion--sand {
	background: var(--al-sand-bg);
	color: var(--al-sand-text);
}

.al-events-themes {
	padding-block: 0 72px;
}

.al-events-themes .al-band__stack {
	gap: 32px;
}

.al-events-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--al-grid-gap);
	width: 100%;
}

.al-events-atelier {
	padding-block: 0 72px;
}

.al-events-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.al-events-split__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.al-events-split__title {
	font-size: var(--al-h2-sm);
}

.al-events-split__body {
	max-width: 420px;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-events-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.al-events-gallery__cell {
	height: 200px;
}

/*
 * The left column drops 28px so the four read as staggered rather than
 * gridded. The offset is on the two cells rather than on the column, so both
 * columns keep the same 16px gap.
 */
.al-events-gallery__cell:nth-child(odd) {
	margin-top: 28px;
}

.al-events-quote {
	padding-block: 84px;
}

.al-events-quote__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 72px;
	align-items: start;
}

.al-events-quote__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.al-events-quote__title {
	font-size: var(--al-h2-quote);
	line-height: var(--al-h2-line);
	text-wrap: pretty;
}

.al-events-quote__body {
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-events-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 8px;
}

.al-events-steps__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.al-events-steps__n {
	flex: none;
	width: 28px;
	font-family: var(--al-font-serif);
	font-size: 20px;
	color: var(--al-lavender);
}

.al-events-steps__label {
	font-size: var(--al-body-size);
	color: var(--al-heading);
}

/* ---------------------------------------------------------------------------
 * About
 * ------------------------------------------------------------------------ */

.al-about-masthead {
	padding-block: 96px 72px;
}

.al-about-masthead .al-band__inner {
	gap: 24px;
	text-align: center;
}

.al-about-masthead__title {
	font-size: var(--al-h1-about);
	line-height: var(--al-h1-line-loose);
	text-wrap: pretty;
}

.al-about-masthead__lede {
	max-width: 560px;
	font-size: var(--al-body-size-xl);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-x);
	color: var(--al-body-mid);
}

.al-about-vision {
	padding-block: 84px;
}

.al-about-vision__inner {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.al-about-vision__title {
	font-size: var(--al-h2-md);
	line-height: var(--al-h2-line-loose);
	text-wrap: pretty;
}

.al-about-vision__body {
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-x);
	color: var(--al-body-mid);
}

/* The only italic serif in the design. */
.al-about-vision__quote {
	margin: 0;
	font-family: var(--al-font-serif);
	font-style: italic;
	font-size: var(--al-pullquote-size);
	color: var(--al-plum-light);
}

.al-about-beliefs {
	padding-block: 84px;
}

.al-about-beliefs .al-band__stack {
	gap: 48px;
}

.al-beliefs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--al-grid-gap);
	width: 100%;
}

.al-belief {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: var(--al-radius-card-lg);
	padding: 36px 30px;
}

.al-belief--lavender {
	background: var(--al-hue-lavender-bg);
}

.al-belief--sand {
	background: var(--al-sand-bg);
}

.al-belief--sage {
	background: var(--al-sage-bg);
}

.al-belief__title {
	font-size: var(--al-h3-md);
}

.al-belief__text {
	font-size: var(--al-card-desc-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-card-desc-line-loose);
	color: var(--al-body-soft);
}

.al-about-cta {
	padding-block: 72px;
}

.al-about-cta__inner {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.al-about-cta__title {
	font-size: var(--al-h2-sm);
	text-wrap: pretty;
}

.al-about-cta__actions {
	display: flex;
	gap: 14px;
}

/* ---------------------------------------------------------------------------
 * Help
 * ------------------------------------------------------------------------ */

.al-help-masthead {
	padding-block: 80px 56px;
}

.al-help-masthead .al-band__inner {
	gap: 18px;
	text-align: center;
}

/* Two hundredths wider than every other eyebrow, as the two heroes are. */
.al-help-masthead__eyebrow {
	letter-spacing: var(--al-eyebrow-tracking-hero);
}

.al-help-masthead__title {
	font-size: var(--al-h1-help);
	line-height: var(--al-h1-line-hero);
}

.al-help-masthead__lede {
	max-width: 460px;
	font-size: var(--al-body-size-md);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-help-jump {
	padding-block: 0 24px;
}

.al-help-jump__inner {
	max-width: 1000px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.al-help-jump__link {
	border: 1px solid var(--al-border-control);
	border-radius: var(--al-radius-pill);
	padding: 10px 24px;
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-body-mid);
	transition: border-color var(--al-transition), color var(--al-transition);
}

.al-help-jump__link:hover {
	border-color: var(--al-lavender);
	color: var(--al-plum-light);
}

.al-help-faq {
	padding-block: 48px;
}

.al-help-faq__inner {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.al-help-band__inner {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.al-help-section__title {
	font-size: var(--al-h2-sm);
}

.al-help-section__body {
	max-width: 620px;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-help-shipping {
	padding-block: var(--al-section-padding);
}

.al-help-shipping .al-help-band__inner {
	gap: 28px;
}

/*
 * The three tints are lavender, sage, sand, and the lavender is the section
 * tint rather than the card tint the rotation would give — so each is named.
 */
.al-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.al-tier {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-radius: var(--al-radius-callout-lg);
	padding: 26px 24px;
}

.al-tier--lavender {
	background: var(--al-lavender-t1);
}

.al-tier--sage {
	background: var(--al-sage-bg);
}

.al-tier--sand {
	background: var(--al-sand-bg);
}

.al-tier__name {
	font-size: var(--al-h3-sm);
}

.al-tier__time {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-body-mid);
}

.al-tier__price {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-body-soft);
}

.al-notes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	border-top: 1px solid var(--al-border-spec);
	padding-top: 22px;
}

.al-notes--wide {
	gap: 14px;
}

.al-notes__row {
	display: flex;
	gap: 16px;
	font-size: var(--al-body-size);
}

.al-notes__label {
	flex: none;
	min-width: 160px;
	color: var(--al-muted);
}

.al-notes--wide .al-notes__label {
	min-width: 200px;
}

.al-notes__value {
	margin: 0;
	color: var(--al-body-mid);
}

.al-help-returns {
	padding-block: var(--al-section-padding);
}

.al-help-care {
	padding-block: var(--al-section-padding);
}

.al-care {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.al-care__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.al-care__title {
	font-size: var(--al-body-size-lg);
	color: var(--al-heading);
}

.al-care__text {
	font-size: var(--al-card-desc-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-card-desc-line-loose);
	color: var(--al-body-soft);
}

.al-help-contact {
	padding-block: 72px 88px;
}

.al-help-contact__inner {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.al-help-contact__body {
	max-width: 420px;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-help-contact__actions {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * Make It Personal
 * ------------------------------------------------------------------------ */

.al-personal-masthead {
	padding-block: 64px 24px;
}

.al-personal-masthead .al-band__inner {
	gap: 16px;
	text-align: center;
}

.al-personal-masthead__eyebrow {
	letter-spacing: var(--al-eyebrow-tracking-hero);
}

.al-personal-masthead__title {
	font-size: var(--al-h1-personal);
	line-height: var(--al-h1-line);
}

.al-personal-masthead__lede {
	max-width: 480px;
	font-size: var(--al-body-size-md);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-body-mid);
}

/* The notice region is the checkout's; this page is the full width. */
.al-notices--personal {
	max-width: var(--al-max-width);
}

.al-personal {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: start;
	padding-block: 40px 88px;
}

/* The preview column follows the steps down the page. */
.al-personal__preview {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/*
 * The design's min-height is content-box: 220px of content inside 48px of
 * padding. Stated the same way rather than converted, so the number matches
 * the source line for line.
 */
.al-personal__card {
	box-sizing: content-box;
	min-height: 220px;
	background: var(--al-cream);
	border: 1px solid var(--al-border-section);
	border-radius: var(--al-radius-feature);
	padding: 48px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.al-personal__label {
	font-size: var(--al-preview-label-size);
	letter-spacing: var(--al-preview-label-tracking);
	text-transform: uppercase;
	color: var(--al-faint);
}

.al-personal__tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Ink and fill come from the chosen style, per tile; see al_personal_styles(). */
.al-personal__tile {
	font-family: var(--al-font-serif);
	font-size: var(--al-tile-size);
	font-weight: var(--al-weight-semibold);
	color: var(--al-tile-ink);
	background: var(--al-tile-fill);
	border-radius: var(--al-radius-sm);
	padding: 8px 18px;
	box-shadow: var(--al-shadow-tile);
}

.al-personal__caption {
	font-size: var(--al-caption-lg);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
}

.al-personal__photo {
	height: 260px;
	border-radius: var(--al-radius-feature);
	overflow: hidden;
}

.al-personal__form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.al-personal__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.al-personal__step-label {
	letter-spacing: var(--al-eyebrow-tracking-footer);
}

/* A fieldset's legend is not a flex item, so the 12px gap is stated on it. */
.al-personal__step > legend {
	margin-bottom: 12px;
	padding: 0;
}

.al-personal__optional {
	color: var(--al-optional);
	text-transform: none;
	letter-spacing: 0;
}

.al-personal__input {
	width: 100%;
	border: 1px solid var(--al-border-control);
	border-radius: var(--al-radius-sm-lg);
	padding: 15px 20px;
	font-size: var(--al-input-size-lg);
	background: var(--al-cream);
	color: var(--al-heading);
	transition: border-color var(--al-transition-fast);
}

.al-personal__input:focus {
	border-color: var(--al-lavender);
}

.al-personal__input::placeholder {
	color: var(--al-faint);
}

.al-personal__textarea {
	font-size: var(--al-body-size);
	resize: vertical;
}

.al-personal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.al-personal__chip {
	border: 1px solid var(--al-border-control);
	background: var(--al-cream);
	color: var(--al-body-mid);
	border-radius: var(--al-radius-pill);
	padding: 9px 20px;
	font-size: var(--al-card-desc-size-lg);
	cursor: pointer;
	transition: all var(--al-transition-fast);
	user-select: none;
}

.al-personal__radio:checked + .al-personal__chip {
	border-color: var(--al-lavender);
	background: var(--al-lavender-t2);
	color: var(--al-plum-deep);
}

/* The radio is off-screen, so its focus ring is drawn on its label. */
.al-personal__radio:focus-visible + .al-personal__chip,
.al-personal__radio:focus-visible + .al-personal__style {
	outline: 2px solid var(--al-lavender);
	outline-offset: 2px;
}

.al-personal__styles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.al-personal__style {
	border: 1.5px solid var(--al-border-spec);
	border-radius: var(--al-radius-sm-lg);
	padding: 14px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--al-cream);
	cursor: pointer;
	transition: border-color var(--al-transition-fast);
	user-select: none;
}

.al-personal__radio:checked + .al-personal__style {
	border-color: var(--al-lavender);
}

.al-personal__swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.al-personal__style-name {
	font-size: var(--al-caption-sm);
	color: var(--al-body-mid);
}

.al-personal__upload {
	border: 1.5px dashed var(--al-border-upload);
	border-radius: var(--al-radius-sm-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--al-upload-bg);
	cursor: pointer;
}

.al-personal__upload-title {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-plum-light);
}

.al-personal__upload-hint {
	font-size: var(--al-caption-sm);
	font-weight: var(--al-weight-light);
	color: var(--al-faint);
}

.al-personal__summary {
	background: var(--al-lavender-t1);
	border-radius: var(--al-radius-callout-lg);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.al-personal__summary-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.al-personal__summary-line {
	font-size: var(--al-caption-lg);
	color: var(--al-plum-deep);
}

.al-personal__summary-sub {
	font-size: var(--al-caption-sm);
	font-weight: var(--al-weight-light);
	color: var(--al-summary-sub);
}

.al-personal__price {
	font-family: var(--al-font-serif);
	font-size: var(--al-price-personal);
	color: var(--al-plum-deep);
}

/* Full width and a size up from the base pill, as the design draws it. */
.al-personal__submit {
	width: 100%;
	padding: 15px 32px;
	font-size: var(--al-body-size-lg);
}

.al-personal__help {
	text-align: center;
	font-size: var(--al-caption-md);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
}

.al-personal__help a {
	color: var(--al-plum-light);
}

/* ---------------------------------------------------------------------------
 * 404 — not in the design. The About masthead's proportions, and nothing new.
 * ------------------------------------------------------------------------ */

.al-404 {
	padding-block: 96px 120px;
}

.al-404 .al-band__inner {
	gap: 24px;
	text-align: center;
}

.al-404__eyebrow {
	letter-spacing: var(--al-eyebrow-tracking-hero);
}

.al-404__title {
	font-size: var(--al-h1-about);
	line-height: var(--al-h1-line-loose);
	text-wrap: pretty;
}

.al-404__lede {
	max-width: 480px;
	font-size: var(--al-body-size-xl);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-x);
	color: var(--al-body-mid);
}

.al-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * Plain pages — the policies. Not in the design; the About masthead's
 * proportions over one narrow column of prose.
 * ------------------------------------------------------------------------ */

.al-page-masthead {
	padding-block: 72px 0;
}

.al-page-masthead .al-band__inner {
	gap: 18px;
	text-align: center;
}

.al-page-masthead__eyebrow {
	letter-spacing: var(--al-eyebrow-tracking-hero);
}

.al-page-masthead__title {
	font-size: var(--al-h1-about);
	line-height: var(--al-h1-line-loose);
	text-wrap: balance;
}

.al-page-masthead__date {
	font-size: var(--al-caption-md);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
}

.al-page-body {
	padding-block: 48px 96px;
}

.al-prose {
	display: block;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-prose > * {
	margin-block: 0 0;
}

.al-prose > * + * {
	margin-top: 16px;
}

.al-prose h2 {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-medium);
	font-size: var(--al-h2-2xs);
	color: var(--al-heading);
}

.al-prose > * + h2 {
	margin-top: 44px;
}

.al-prose strong {
	font-weight: var(--al-weight-medium);
	color: var(--al-heading);
}

.al-prose a {
	color: var(--al-plum-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.al-prose ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.al-prose li::marker {
	color: var(--al-lavender);
}

/* A fact table in the design's spec-row manner: label left, value right. */
.al-prose dl {
	display: grid;
	grid-template-columns: 200px 1fr;
	row-gap: 0;
}

.al-prose dt {
	color: var(--al-muted);
	padding-block: 12px;
	border-bottom: 1px solid var(--al-border-spec);
}

.al-prose dd {
	margin: 0;
	padding-block: 12px;
	border-bottom: 1px solid var(--al-border-spec);
}

.al-prose dt:first-of-type,
.al-prose dt:first-of-type + dd {
	border-top: 1px solid var(--al-border-spec);
}

/* The detail the client has not supplied yet; see CLIENT-BLOCKERS.md B5. */
.al-prose .al-pending {
	background: var(--al-sand-bg);
	color: var(--al-sand-text);
	border-radius: var(--al-radius-callout);
	padding: 14px 20px;
	font-size: var(--al-card-desc-size-lg);
}

@media (max-width: 767px) {
	.al-prose dl {
		grid-template-columns: 1fr;
	}

	.al-prose dt {
		padding-block: 12px 0;
		border-bottom: 0;
	}

	.al-prose dt:first-of-type + dd {
		border-top: 0;
	}
}