/**
 * agriNews Event Manager — public stylesheet.
 *
 * GENERATED FILE. Do not edit.
 *
 * Source: assets/css/public/*.css
 * Build:  php bin/build-css.php
 *
 * One design system, one definition per component, one responsive layer.
 * Every selector is scoped under `.aem-public`, with two documented
 * exceptions behind `body.aem-public-page` in 02-layout.css.
 */

/* ===== 01-foundation.css ===== */

/**
 * Foundation: tokens and typography.
 *
 * Every public rule of the plugin lives under `.aem-public` (AD-29). The two
 * exceptions are in 02-layout.css, both behind the body marker, and both
 * documented there.
 *
 * The palette arrives as custom properties written per event line
 * (Frontend\Branding, AD-46), so nothing here hardcodes a brand colour. Every
 * token has a neutral fallback: a site with no palette configured still looks
 * deliberate rather than unstyled.
 *
 * Specificity ceiling for the whole public layer: `.aem-public .aem-thing`.
 * Nothing deeper, no !important, so a theme or Elementor can still win.
 */

.aem-public {
	--aem-container: 1200px;
	/*
	 * The side air of every AEM page. 20px is the floor, which is what a
	 * 360px phone gets; 48px is the ceiling, reached at 1200px. Content
	 * never touches the edge of a screen at any width.
	 */
	--aem-gutter: clamp(20px, 4vw, 48px);

	/* The smallest thing a finger should have to hit. */
	--aem-tap: 44px;

	--aem-space-1: 4px;
	--aem-space-2: 8px;
	--aem-space-3: 12px;
	--aem-space-4: 16px;
	--aem-space-5: 24px;
	--aem-space-6: 32px;
	--aem-space-7: 48px;
	--aem-space-8: 64px;
	--aem-space-9: 80px;

	--aem-radius-sm: 8px;
	--aem-radius-md: 14px;
	--aem-radius-lg: 20px;
	--aem-radius-pill: 999px;
	--aem-radius: var(--aem-radius-md);

	/*
	 * The brand. Branding overrides primary, secondary, their -rgb triplets,
	 * their hover steps, the readable colour on top of each, and the heading
	 * colour, which is the brand taken almost to navy (AD-53).
	 */
	/*
	 * The fallback is the neutral ink of the design system, not a brand
	 * colour and not `currentColor`. It was `currentColor`, and on a filled
	 * control that resolves against the element's own text colour — so a
	 * site with no *Color principal* configured got a white button with
	 * white writing on it. The ink is legible under `--aem-on-primary` and
	 * belongs to no event line; the moment a palette is saved, Branding
	 * overrides every one of these (AD-46).
	 */
	--aem-primary: #16233a;
	--aem-primary-rgb: 22 35 58;
	--aem-primary-hover: #0f1a2b;
	--aem-secondary: #16233a;
	--aem-secondary-rgb: 22 35 58;
	--aem-secondary-hover: #0f1a2b;
	--aem-on-primary: #fff;
	--aem-on-secondary: #fff;
	--aem-heading: #16233a;
	--aem-heading-rgb: 22 35 58;

	--aem-text: #3d4657;
	--aem-text-muted: #667089;
	--aem-background: #fff;
	--aem-surface: #fff;
	--aem-surface-rgb: 255 255 255;
	--aem-surface-soft: #f4f7fc;
	--aem-surface-alt: #f7f9fd;
	--aem-border: #e3e9f2;
	--aem-border-strong: #cfd8e6;

	--aem-success: #1c7c54;
	--aem-warning: #a86a00;
	--aem-danger: #b3261e;

	--aem-shadow-sm: 0 1px 2px rgb(var(--aem-heading-rgb) / 0.05);
	--aem-shadow-md: 0 12px 32px rgb(var(--aem-heading-rgb) / 0.08);

	--aem-hero-from: rgb(var(--aem-primary-rgb) / 0.1);
	--aem-hero-to: rgb(var(--aem-primary-rgb) / 0.02);

	--aem-ratio-portrait: 4 / 5;
	--aem-ratio-landscape: 16 / 9;

	/* Names published by the 1.1–1.4 documentation, kept as aliases. */
	--aem-muted: var(--aem-text-muted);
	--aem-card: var(--aem-surface);
	--aem-bg: var(--aem-background);
	--aem-surface-subtle: var(--aem-surface-alt);
	--aem-surface-raised: var(--aem-surface-soft);
	--aem-primary-contrast: var(--aem-on-primary);
	--aem-secondary-contrast: var(--aem-on-secondary);
	--aem-primary-soft: rgb(var(--aem-primary-rgb) / 0.08);
	--aem-primary-line: rgb(var(--aem-primary-rgb) / 0.28);
	--aem-secondary-soft: rgb(var(--aem-secondary-rgb) / 0.1);
	--aem-accent: var(--aem-primary);
	--aem-shadow: var(--aem-shadow-sm);
	--aem-shadow-raised: var(--aem-shadow-md);

	color: var(--aem-text);
}

/*
 * One box model for the whole public layer.
 *
 * Padding and border are inside the width everywhere under `.aem-public`,
 * whatever the theme does with `*`. A grid track of `minmax(0, 1fr)` with a
 * padded card in it overflows its track under `content-box`, and that is the
 * quiet source of most horizontal scrolling: the page is not too wide, one
 * card in it is.
 */
.aem-public,
.aem-public *,
.aem-public *::before,
.aem-public *::after {
	box-sizing: border-box;
}

/*
 * Nothing in the public layer is allowed to be wider than the column it sits
 * in. A pasted image in an article, an embed, a table in editorial content:
 * the rule is the same for all of them.
 */
.aem-public img,
.aem-public svg,
.aem-public video,
.aem-public iframe,
.aem-public embed,
.aem-public object {
	max-width: 100%;
}

/* ------------------------------------------------------------- typography */

.aem-public .aem-hero-title,
.aem-public .aem-section-title,
.aem-public .aem-hub-sections-title,
.aem-public .aem-card-title,
.aem-public .aem-person-name,
.aem-public .aem-edition-name,
.aem-public .aem-news-title,
.aem-public .aem-speaker-name,
.aem-public .aem-session-title,
.aem-public .aem-ticket-name {
	color: var(--aem-heading);
}

/*
 * The page heading, measured at the widths people actually use.
 *
 * The old curve was drawn for a 1440 desktop and left the same 66px heading
 * on a 1366 laptop, where it took the whole band, and a 40px heading on a
 * 360 phone, where it took four lines of two words. This one lands at 66px
 * at 1920, 55px at 1366, 48px at 1024, 42px at 768, 35px at 430 and 34px at
 * 360 — one straight line through the whole range, with a floor and a
 * ceiling at each end.
 */
.aem-public .aem-hero-title {
	font-size: clamp(2.125rem, 1.665rem + 2.05vw, 4.125rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.04;
	margin: 0;
	overflow-wrap: break-word;
	/*
	 * The separation between the heading and whatever follows it — a role
	 * and a company, a date and a time, a count — lives here, on the
	 * heading, and nowhere else. It used to be a margin on the next sibling;
	 * two rules for one gap is how they drift apart.
	 */
	/*
	 * A percentage here is a share of the container's *width*, which makes
	 * the gap under a heading grow with the page and collapse on a phone —
	 * 36px at 1200, 10px at 390, for no reason anybody chose. The same gap,
	 * measured in its own terms.
	 */
	padding-bottom: clamp(12px, 2vw, 28px);
	text-wrap: balance;
}

/*
 * A long heading takes the smaller step of the same scale, so a session title
 * of eleven words settles at three or four lines instead of six. The class is
 * decided once, from the length of the string, and never per page (AD-63).
 */
.aem-public .aem-hero-title-long {
	font-size: clamp(1.625rem, 1.306rem + 1.41vw, 3rem);
	line-height: 1.12;
	text-wrap: pretty;
}

.aem-public .aem-title-accent {
	color: var(--aem-primary);
}

.aem-public .aem-hero-lead {
	color: var(--aem-text-muted);
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
	line-height: 1.55;
	margin: 0;
	max-width: 54ch;
}

.aem-public .aem-eyebrow {
	color: var(--aem-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.aem-public .aem-eyebrow-ruled {
	align-items: center;
	display: flex;
	gap: var(--aem-space-4);
}

.aem-public .aem-eyebrow-ruled::after {
	background: currentColor;
	content: "";
	display: block;
	height: 2px;
	opacity: 0.5;
	width: clamp(24px, 5vw, 52px);
}

.aem-public .aem-section-title,
.aem-public .aem-hub-sections-title {
	font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

.aem-public .aem-section-lead {
	color: var(--aem-text-muted);
	font-size: 1.0625rem;
	margin: var(--aem-space-2) 0 0;
	max-width: 68ch;
}

.aem-public .aem-meta {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

.aem-public .aem-meta .aem-icon {
	color: var(--aem-primary);
	flex: 0 0 auto;
	vertical-align: -0.2em;
}

.aem-public .aem-prose {
	color: var(--aem-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 76ch;
	overflow-wrap: break-word;
}

/*
 * A URL, a hashtag or a German compound is one word as far as the browser is
 * concerned, and one word wider than the screen is a horizontal scrollbar.
 * Every place the public layer prints text somebody else wrote breaks it.
 */
.aem-public .aem-section-title,
.aem-public .aem-card-title,
.aem-public .aem-news-title,
.aem-public .aem-session-title,
.aem-public .aem-speaker-name,
.aem-public .aem-person-name,
.aem-public .aem-edition-name,
.aem-public .aem-ticket-name,
.aem-public .aem-breadcrumb-item,
.aem-public .aem-hero-lead,
.aem-public .aem-card-excerpt,
.aem-public .aem-news-excerpt,
.aem-public .aem-session-excerpt,
.aem-public .aem-social-copy,
.aem-public .aem-article-body,
.aem-public .aem-travel-value,
.aem-public .aem-venue-address,
.aem-public .aem-venue-email {
	overflow-wrap: break-word;
}

.aem-public .aem-prose > * + * {
	margin-top: var(--aem-space-4);
}

.aem-public .aem-prose a {
	color: var(--aem-primary);
}

.aem-public .aem-icon {
	flex: 0 0 auto;
}

/*
 * The band on a route whose theme already printed the H1: the same component,
 * one step quieter, so the page still has exactly one first-level heading
 * (AD-44).
 */
.aem-public .aem-hero-title-secondary {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: 700;
}

/* ===== 02-layout.css ===== */

/**
 * Layout: the shell, the container, the page wrappers.
 *
 * The only two rules in the whole public layer that reach outside
 * `.aem-public` are here, and both are behind the body marker the shell
 * prints on AEM routes and on nothing else (AD-46).
 */

/*
 * The vertical rhythm of a plugin page. A plugin cannot give a Page-backed
 * route its breathing room from inside the content: the space belongs between
 * the theme's header and its content wrapper, and only the theme knows that
 * wrapper. `#content` is the wrapper this family of themes uses.
 *
 * `.aem-public-canvas` is the exception: a page whose design is an Elementor
 * build carries its own full-bleed sections and its own space, and adding
 * this on top would double what the design already has.
 */
/*
 * No space above the content wrapper on a generated AEM page: the band is
 * the first thing under the site header and supplies its own height. The
 * `!important` is deliberate and narrow — themes set this padding in their
 * own stylesheet, often later in the cascade, and this rule has to win on
 * the routes the plugin owns.
 *
 * The exception stays what it was: `.aem-public-canvas` is a page whose
 * design is an Elementor build — the historical Home, the Programa — and it
 * keeps whatever spacing the theme gives it.
 */
body.aem-public-page:not(.aem-public-canvas) #content {
	padding-bottom: clamp(40px, 6vw, 96px);
	padding-top: 0 !important;
}

/*
 * The theme's own page-title bar, on the routes where the plugin supplies the
 * page header and only there (AD-68).
 *
 * The title guard already empties the heading (AD-64), but a bar with a
 * heading in it is still a bar: it keeps its padding, its border and its
 * background, which is the band of empty space above the hero.
 *
 * `body.aem-has-hero` is the scope, and the plugin puts that class on a
 * request only when it is about to print a band of its own. A normal Page, an
 * unrelated Post, an Elementor page outside AEM and the two editorial pages
 * of an edition all keep their theme header untouched.
 */
/*
 * `.page-header` is the page-title bar in this family of themes. A handful
 * of themes use the same class name for the *site* header, so the three
 * names a site header goes by are excluded by hand: hiding a site header
 * would be this plugin breaking navigation, which is the one thing the
 * public layer must never do.
 */
body.aem-public-page.aem-has-hero .page-header:not(.site-header):not(#masthead):not([role="banner"]),
body.aem-public-page.aem-has-hero .entry-header > .entry-title,
body.aem-public-page.aem-has-hero .page-title {
	display: none;
}

/* And the container a theme leaves behind when its heading was emptied. */
body.aem-public-page .entry-title:empty,
body.aem-public-page .page-title:empty,
body.aem-public-page .page-header:empty {
	display: none;
}

/*
 * The hero band escapes the content column with `calc(50% - 50vw)`, which is
 * a hundred viewport widths wide by definition. `clip` keeps the overflow
 * from producing a horizontal scrollbar and, unlike `hidden`, creates no
 * scroll container — so a sticky theme header still sticks.
 */
body.aem-public-page {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- container */

.aem-public .aem-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--aem-container);
	padding-inline: var(--aem-gutter);
	width: 100%;
}

.aem-public .aem-full-bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* ------------------------------------------------------------ page wrappers */

.aem-public.aem-page,
.aem-public .aem-page {
	display: block;
}

.aem-public .aem-page-body {
	display: block;
}

/*
 * A component rendered inside a Page gets no vertical margin of its own: the
 * shell already spaced the content wrapper. It keeps a minimum height so a
 * one-item archive still occupies a page rather than collapsing onto the
 * footer.
 */
.aem-public.aem-editions,
.aem-public.aem-edition-hub,
.aem-public.aem-speakers,
.aem-public.aem-sessions,
.aem-public.aem-sponsors,
.aem-public.aem-news,
.aem-public.aem-gallery,
.aem-public.aem-social-feed,
.aem-public.aem-travel,
.aem-public.aem-tickets,
.aem-public.aem-venue,
.aem-public.aem-empty {
	display: block;
	min-block-size: clamp(200px, 26vh, 380px);
}

/* --------------------------------------------------------------- sections */

.aem-public .aem-section + .aem-section {
	margin-top: clamp(40px, 5vw, 72px);
}

/*
 * The gap under a section heading, and the gap between two sections. One
 * rhythm, set here, so no template carries a margin of its own.
 */
.aem-public .aem-section-head {
	margin-bottom: clamp(24px, 3vw, 32px);
}

.aem-public .aem-section-title + * {
	margin-top: clamp(24px, 3vw, 32px);
}

/*
 * The default minimum size of a grid or flex item is its content, so one
 * long word or one wide image in a column makes the column wider than its
 * track and the page wider than the screen. Every layout child of the
 * public layer is allowed to be as narrow as its track says.
 */
.aem-public .aem-hero-copy,
.aem-public .aem-hero-visual,
.aem-public .aem-panel,
.aem-public .aem-travel-card,
.aem-public .aem-travel-map,
.aem-public .aem-session-support,
.aem-public .aem-session-body,
.aem-public .aem-social-single-media,
.aem-public .aem-social-single-content,
.aem-public .aem-content-split > *,
.aem-public .aem-edition-hero > *,
.aem-public .aem-breadcrumb-item,
.aem-public .aem-list > li {
	min-width: 0;
}

.aem-public .aem-stack {
	display: flex;
	flex-direction: column;
	gap: var(--aem-space-5);
}

/*
 * The body of a single, under the band. The space above it is the body's
 * own padding — the content wrapper has none on an AEM route (AD-70), so
 * one declaration owns this gap and no template adds a second.
 */
/*
 * 5% of *what* was the problem: a percentage padding is a share of the
 * container's width, so the same rule gave a single 60px of air on a
 * desktop and 17px on a phone. The gap is the same idea at both ends now,
 * measured the way the rest of the rhythm is.
 */
.aem-public .aem-single-body {
	padding-top: clamp(24px, 4vw, 64px);
}

.aem-public .aem-single-body > * + * {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-page-body > .aem-container + .aem-container {
	margin-top: clamp(32px, 4vw, 56px);
}

/* ------------------------------------------------------- bottom navigation */

.aem-public .aem-page-nav,
.aem-public .aem-single-back {
	align-items: center;
	border-top: 1px solid var(--aem-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-4);
	justify-content: space-between;
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(24px, 3vw, 32px);
}

/*
 * The plugin's own single templates print their own <main id="content">, so
 * the rhythm rule above already reached them. Nothing extra here.
 */

/* ===== 03-components.css ===== */

/**
 * Components: one definition each.
 *
 * Everything a template composes lives here — buttons, cards, pills, icon
 * tiles, toolbars, the empty state, pagination, breadcrumbs. A page-specific
 * file may compose these; it may not redefine them.
 */

/* ----------------------------------------------------------- breadcrumbs */

.aem-public .aem-breadcrumbs {
	font-size: 0.875rem;
	margin: 0 0 var(--aem-space-6);
}

.aem-public .aem-breadcrumb-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-2) var(--aem-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-breadcrumb-item {
	align-items: center;
	display: flex;
	gap: var(--aem-space-3);
	margin: 0;
}

.aem-public .aem-breadcrumb-item + .aem-breadcrumb-item::before {
	color: var(--aem-border-strong);
	content: "/";
}

.aem-public .aem-breadcrumb-item a {
	color: var(--aem-primary);
	text-decoration: none;
}

.aem-public .aem-breadcrumb-item a:hover,
.aem-public .aem-breadcrumb-item a:focus-visible {
	text-decoration: underline;
}

.aem-public .aem-breadcrumb-item [aria-current="page"] {
	color: var(--aem-text-muted);
}

/* Rank Math renders its own markup inside our nav; only the frame is ours. */
.aem-public .aem-breadcrumbs-rank-math {
	color: var(--aem-text-muted);
}

.aem-public .aem-breadcrumbs-rank-math a {
	color: var(--aem-primary);
	text-decoration: none;
}

/* --------------------------------------------------------------- buttons */

.aem-public .aem-button {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--aem-radius-sm);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 12px 22px;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.aem-public .aem-button--primary {
	background: var(--aem-primary);
	border-color: var(--aem-primary);
	color: var(--aem-on-primary);
}

.aem-public .aem-button--primary:hover,
.aem-public .aem-button--primary:focus-visible {
	background: var(--aem-primary-hover);
	border-color: var(--aem-primary-hover);
	color: var(--aem-on-primary);
}

.aem-public .aem-button--secondary {
	background: var(--aem-surface);
	border-color: var(--aem-border-strong);
	color: var(--aem-heading);
}

.aem-public .aem-button--secondary:hover,
.aem-public .aem-button--secondary:focus-visible {
	border-color: var(--aem-primary);
	color: var(--aem-primary);
}

.aem-public .aem-button--ghost {
	color: var(--aem-primary);
	padding-inline: 8px;
}

.aem-public .aem-button--ghost:hover,
.aem-public .aem-button--ghost:focus-visible {
	background: rgb(var(--aem-primary-rgb) / 0.08);
}

.aem-public .aem-button:focus-visible,
.aem-public .aem-link-arrow:focus-visible,
.aem-public .aem-back-link:focus-visible,
.aem-public .aem-filter:focus-visible {
	outline: 2px solid var(--aem-primary);
	outline-offset: 2px;
}

/* The arrow is decoration: it moves on hover and is hidden from a reader. */
.aem-public .aem-button-arrow {
	transition: transform 140ms ease;
}

.aem-public .aem-button:hover .aem-button-arrow {
	transform: translateX(2px);
}

.aem-public .aem-link-arrow {
	align-items: center;
	color: var(--aem-primary);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	text-decoration: none;
}

.aem-public .aem-link-arrow:hover {
	text-decoration: underline;
}

.aem-public .aem-link-arrow .aem-icon {
	transition: transform 140ms ease;
}

.aem-public .aem-link-arrow:hover .aem-icon {
	transform: translateX(2px);
}

.aem-public .aem-back-link {
	align-items: center;
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	text-decoration: none;
}

.aem-public .aem-back-link:hover {
	color: var(--aem-primary);
}

.aem-public .aem-back-icon {
	transform: rotate(180deg);
}

.aem-public .aem-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	list-style: none;
	margin: 0 0 clamp(24px, 3vw, 40px);
	padding: 0;
}

.aem-public .aem-links li {
	margin: 0;
}

/* ------------------------------------------------------------------ cards */

.aem-public .aem-card {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.aem-public .aem-card:hover {
	border-color: rgb(var(--aem-primary-rgb) / 0.35);
	box-shadow: var(--aem-shadow-md);
	transform: translateY(-2px);
}

.aem-public .aem-card-media {
	margin: 0;
	overflow: hidden;
}

.aem-public .aem-card-media img {
	aspect-ratio: var(--aem-ratio-landscape);
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 400ms ease;
	width: 100%;
}

.aem-public .aem-card:hover .aem-card-media img {
	transform: scale(1.03);
}

.aem-public .aem-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--aem-space-2);
	padding: var(--aem-space-5);
}

.aem-public .aem-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.aem-public .aem-card-title a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-card-meta {
	align-items: center;
	color: var(--aem-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: var(--aem-space-3);
	justify-content: space-between;
	margin: 0;
}

.aem-public .aem-card-date {
	color: var(--aem-text-muted);
	font-size: 0.875rem;
}

.aem-public .aem-card-excerpt {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.aem-public .aem-card-cta {
	color: var(--aem-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	margin-top: auto;
	padding-top: var(--aem-space-3);
}

.aem-public .aem-card-cta .aem-icon {
	vertical-align: -0.2em;
}

/*
 * One anchor covers the card, so the whole surface is clickable while the
 * accessible name stays on the title alone. Anything that must stay clickable
 * on top of it carries .aem-above.
 */
.aem-public .aem-stretch::after {
	content: "";
	inset: 0;
	position: absolute;
}

.aem-public .aem-above {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------- icon tiles */

.aem-public .aem-icon-tile {
	align-items: center;
	background: rgb(var(--aem-primary-rgb) / 0.1);
	border-radius: var(--aem-radius-sm);
	color: var(--aem-primary);
	display: inline-flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.aem-public .aem-icon-tile .aem-icon {
	height: 22px;
	width: 22px;
}

/* ------------------------------------------------------- pills and badges */

.aem-public .aem-pill {
	align-items: center;
	background: var(--aem-surface-soft);
	border-radius: var(--aem-radius-pill);
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	gap: var(--aem-space-2);
	letter-spacing: 0.08em;
	margin: 0;
	padding: 6px 14px;
	text-transform: uppercase;
}

.aem-public .aem-pill::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	height: 7px;
	width: 7px;
}

.aem-public .aem-pill-current {
	background: rgb(28 124 84 / 0.12);
	color: var(--aem-success);
}

.aem-public .aem-pill-upcoming {
	background: rgb(var(--aem-primary-rgb) / 0.1);
	color: var(--aem-primary);
}

.aem-public .aem-pill-past {
	background: var(--aem-surface-soft);
	color: var(--aem-text-muted);
}

.aem-public .aem-badge-pill {
	background: rgb(var(--aem-primary-rgb) / 0.1);
	border-radius: var(--aem-radius-sm);
	color: var(--aem-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 7px 14px;
	text-transform: uppercase;
}

/* -------------------------------------------------------- archive toolbar */

.aem-public .aem-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-4);
	justify-content: space-between;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.aem-public .aem-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-filters li {
	margin: 0;
}

.aem-public .aem-filter {
	align-items: center;
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-pill);
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	padding: 9px 18px;
	text-decoration: none;
	transition: border-color 140ms ease, color 140ms ease;
}

.aem-public .aem-filter:hover {
	border-color: var(--aem-primary);
	color: var(--aem-primary);
}

.aem-public .aem-filter.is-current {
	background: var(--aem-primary);
	border-color: var(--aem-primary);
	color: var(--aem-on-primary);
}

.aem-public .aem-filter-count {
	opacity: 0.7;
}

/* ---------------------------------------------------------- platform tags */

.aem-public .aem-platform {
	align-items: center;
	background: var(--aem-surface-soft);
	border-radius: var(--aem-radius-pill);
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	padding: 5px 12px 5px 8px;
}

.aem-public .aem-platform .aem-icon {
	color: var(--aem-primary);
}

/* ------------------------------------------------------ visual placeholder */

/*
 * The slot a photograph will occupy: a finished surface with a label, never a
 * broken image and never a grey hole (AD-49).
 */
.aem-public .aem-visual-placeholder {
	align-items: center;
	aspect-ratio: 16 / 11;
	background:
		radial-gradient(120% 120% at 88% 12%, rgb(var(--aem-primary-rgb) / 0.14), transparent 60%),
		rgb(var(--aem-primary-rgb) / 0.07);
	border: 1px solid rgb(var(--aem-primary-rgb) / 0.16);
	border-radius: var(--aem-radius-md);
	color: var(--aem-primary);
	display: flex;
	flex-direction: column;
	gap: var(--aem-space-3);
	justify-content: center;
	padding: var(--aem-space-6);
	text-align: center;
}

.aem-public .aem-visual-placeholder-label {
	font-size: 1rem;
	font-weight: 500;
	max-width: 18ch;
	opacity: 0.85;
}

.aem-public .aem-visual-placeholder-portrait {
	aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------------ empty state */

.aem-public .aem-empty-message {
	background: var(--aem-surface-soft);
	border: 1px dashed var(--aem-border-strong);
	border-radius: var(--aem-radius-md);
	color: var(--aem-text-muted);
	margin: 0;
	padding: clamp(28px, 4vw, 48px);
	text-align: center;
}

/* ------------------------------------------------------------------ notes */

.aem-public .aem-note {
	align-items: start;
	background: rgb(var(--aem-primary-rgb) / 0.06);
	border-radius: var(--aem-radius-sm);
	color: var(--aem-text);
	display: grid;
	font-size: 0.9375rem;
	gap: var(--aem-space-3);
	grid-template-columns: 20px minmax(0, 1fr);
	line-height: 1.5;
	margin: var(--aem-space-4) 0 0;
	padding: var(--aem-space-4);
}

.aem-public .aem-note .aem-icon {
	color: var(--aem-primary);
}

/* ------------------------------------------------------------- pagination */

.aem-public .aem-pagination {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-pagination li {
	margin: 0;
}

.aem-public .aem-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-sm);
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding-inline: 12px;
	text-decoration: none;
}

.aem-public .aem-pagination .page-numbers.current {
	background: var(--aem-primary);
	border-color: var(--aem-primary);
	color: var(--aem-on-primary);
}

.aem-public .aem-pagination a.page-numbers:hover {
	border-color: var(--aem-primary);
	color: var(--aem-primary);
}

/* ------------------------------------------------------ historical notice */

/*
 * On a section of a past edition: which year this is, and the way to the
 * current one (AD-61). A note, not an alarm — the page it sits on is a real
 * document, not an error.
 */
.aem-public.aem-historical-notice {
	align-items: center;
	background: rgb(var(--aem-primary-rgb) / 0.06);
	border: 1px solid rgb(var(--aem-primary-rgb) / 0.16);
	border-radius: var(--aem-radius-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-4);
	justify-content: space-between;
	margin: 0 0 clamp(24px, 3vw, 40px);
	padding: var(--aem-space-5);
}

.aem-public .aem-historical-notice-text {
	align-items: center;
	color: var(--aem-heading);
	display: flex;
	font-size: 1rem;
	gap: var(--aem-space-3);
	margin: 0;
}

.aem-public .aem-historical-notice-text .aem-icon {
	color: var(--aem-primary);
}

/* ===== 04-hero.css ===== */

/**
 * The hero band — the one page-header system (AD-51).
 *
 * There is no second implementation. This block owns its display, its
 * columns, its spacing, its background and its media behaviour outright: no
 * property here relies on an older rule being present, and no older rule is
 * allowed to supply one.
 *
 * Variants: edition, section, editorial, compact, plus the profile, logo and
 * article modifiers.
 */

.aem-public .aem-hero {
	/*
	 * The band paints nothing itself. Everything visible behind the copy —
	 * the photograph, the wash, the neutral tint when there is no image —
	 * belongs to the backdrop layer, so there is one place that decides what
	 * the reader sees and the two can never stack (AD-72).
	 */
	background: transparent !important;
	display: block;
	isolation: isolate;
	margin-block: 0;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	overflow: hidden;
	position: relative;
	width: 100vw;
}

/*
 * The height of the band, in one property.
 *
 * It used to be `clamp(340px, 46vh, 420px)` and three more like it, and the
 * first argument of a `clamp` is a **floor in pixels** — which is what made
 * the band too tall. A floor cannot see the screen: on a 768px laptop that
 * rule asked for 353px, on a 600px window it asked for 340px, which is 57%
 * of everything the reader had. The pixel number won exactly where the band
 * could least afford it.
 *
 * So the height is a ceiling now, never a floor: a share of the screen, with
 * a pixel cap so a very tall monitor does not get a very tall band, and one
 * small absolute floor underneath so that a landscape phone still has a band
 * rather than a line.
 *
 * `min-height`, not `height`, and no `max-height`: a band whose copy does
 * not fit grows instead of hiding it. Nothing here clips text.
 *
 * Three heights, one component: the hub is the largest thing on the site, an
 * archive is a step down from it, and a single opens its own document. The
 * responsive layer moves all three together — 45vh here, 38vh on a tablet,
 * 30vh on a phone (AD-76).
 */
.aem-public .aem-hero {
	--aem-hero-height: min(40vh, 340px);
	--aem-hero-floor: 220px;
}

.aem-public .aem-hero--edition {
	--aem-hero-height: min(45vh, 420px);
}

.aem-public .aem-hero--section,
.aem-public .aem-hero--editorial {
	--aem-hero-height: min(40vh, 340px);
}

.aem-public .aem-hero--compact {
	--aem-hero-height: min(36vh, 300px);
}

/*
 * The stacking of a band, in three small steps: the photograph at 0, the
 * wash over it at 1, every line of copy at 2. No larger number is needed and
 * none is used.
 */
.aem-public .aem-hero-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(var(--aem-hero-floor), var(--aem-hero-height));
	padding-block: clamp(32px, 4vw, 64px);
	position: relative;
	z-index: 2;
}



/*
 * The cover of the edition, bleeding in from the right and dissolving into
 * the band. Decoration: empty alt, hidden from the accessibility tree.
 */
/*
 * No photograph: the band still needs its ground, and it is the brand tint
 * it always was. A pseudo element, because the band itself is transparent
 * by rule and a pseudo element's background is its own.
 */
.aem-public .aem-hero:not(.has-backdrop)::before {
	background: linear-gradient(160deg, var(--aem-hero-from), var(--aem-hero-to) 62%, transparent);
	background-color: var(--aem-surface-alt);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/*
 * The backdrop is the band. It was `49vh` tall, which is a height that has
 * nothing to do with the element it sits in: on a 1080 desktop it covered
 * the band and then some, on a 1366 x 768 laptop it covered 376px of a
 * 528px band and left a bare strip under the photograph, and on a tablet in
 * landscape it did the same. The photograph fills its band, at every size,
 * and the `45%` floor it used to need is met by definition.
 */
.aem-public .aem-hero-backdrop {
	height: 100%;
	inset: 0;
	min-height: 100%;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.aem-public .aem-hero-backdrop img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
	width: 100%;
	z-index: 0;
}

/*
 * The photograph fades to white on the right (AD-67).
 *
 * A light wash, not a dark slab: the image stays an image, the copy sits on
 * the pale end of it, and the right edge meets the page ground with no seam.
 * Two stops do the reading work and the last one does the join.
 */
.aem-public .aem-hero-backdrop::after {
	background: linear-gradient(
		90deg,
		rgb(var(--aem-surface-rgb) / 0.18) 0%,
		rgb(var(--aem-surface-rgb) / 0.38) 42%,
		rgb(255 255 255 / 5%) 80%,
		rgb(255 255 255 / 0%) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	/* Above the photograph, below every line of the band. */
	z-index: 1;
}


/*
 * Under the copy itself, one more wash of the same white, so the heading
 * keeps its contrast over the busiest photograph. It stops where the copy
 * column stops, which is why the image is still clearly visible beside it.
 */
.aem-public .aem-hero.has-backdrop .aem-hero-inner::before {
	background: linear-gradient(
		90deg,
		rgb(var(--aem-surface-rgb) / 0.72) 0%,
		rgb(var(--aem-surface-rgb) / 0.46) 58%,
		rgb(var(--aem-surface-rgb) / 0) 100%
	);
	content: "";
	inset: 0 -100vw 0 -100vw;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* The band keeps the ink of the design system: dark on light, never the
   reverse, because the treatment above is always a light one. */
.aem-public .aem-hero.has-backdrop .aem-hero-title,
.aem-public .aem-hero.has-backdrop .aem-breadcrumb-item [aria-current="page"] {
	color: var(--aem-heading);
}

.aem-public .aem-hero.has-backdrop .aem-fact,
.aem-public .aem-hero.has-backdrop .aem-hero-lead {
	color: var(--aem-text);
}

/* ------------------------------------------------------------------ grid */

.aem-public .aem-hero-grid {
	align-items: center;
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr);
}

.aem-public .aem-hero--edition.has-visual .aem-hero-grid {
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}

.aem-public .aem-hero--profile.has-visual .aem-hero-grid {
	grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
}

.aem-public .aem-hero-copy > * + * {
	margin-top: var(--aem-space-4);
}

/*
 * The gap under the heading is the heading's own padding, in
 * 01-foundation.css. Nothing here adds a second one.
 */

.aem-public .aem-hero--section .aem-hero-copy,
.aem-public .aem-hero--compact .aem-hero-copy,
.aem-public .aem-hero--edition:not(.has-visual) .aem-hero-copy {
	max-width: 62ch;
}

/*
 * A heading has different width needs from a paragraph. The reading column of
 * an article is 820px because prose is read line by line; a title is read as
 * a shape, and squeezing it into the same column is what turned eleven words
 * into six lines. The body below keeps its own narrower measure.
 */
.aem-public .aem-hero--editorial .aem-hero-copy {
	max-width: min(1050px, 100%);
}

.aem-public .aem-hero--editorial .aem-hero-lead,
.aem-public .aem-hero--article .aem-hero-lead {
	max-width: 62ch;
}

.aem-public .aem-hero--article .aem-hero-copy {
	max-width: min(900px, 100%);
}

/* --------------------------------------------------------------- content */

.aem-public .aem-hero-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	margin: 0;
}

.aem-public .aem-fact-row {
	align-items: center;
	color: var(--aem-text);
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3) var(--aem-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-fact {
	align-items: center;
	display: flex;
	font-size: 0.9375rem;
	gap: var(--aem-space-2);
	margin: 0;
}

.aem-public .aem-fact .aem-icon {
	color: var(--aem-primary);
}

.aem-public .aem-hero-count {
	align-items: center;
	color: var(--aem-text-muted);
	display: flex;
	font-size: 0.9375rem;
	gap: var(--aem-space-2);
	margin: 0;
}

.aem-public .aem-hero-count .aem-icon {
	color: var(--aem-primary);
}

.aem-public .aem-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	margin: 0;
	padding-top: var(--aem-space-2);
}

/* ---------------------------------------------------------------- visual */

.aem-public .aem-hero-visual {
	min-width: 0;
}

.aem-public .aem-hero-media {
	margin: 0;
}

.aem-public .aem-hero-visual img {
	aspect-ratio: 16 / 11;
	border-radius: var(--aem-radius-md);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

/* A person or a company is the smaller half, and it is square. */
.aem-public .aem-hero--profile .aem-hero-visual img,
.aem-public .aem-hero--profile .aem-visual-placeholder {
	aspect-ratio: 1 / 1;
	border-radius: var(--aem-radius-lg);
}

/* A logo is not a photograph: it sits on a surface with room around it. */
.aem-public .aem-hero--logo .aem-hero-visual {
	align-items: center;
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	display: flex;
	justify-content: center;
	padding: var(--aem-space-6);
}

.aem-public .aem-hero--logo .aem-hero-visual img {
	aspect-ratio: auto;
	max-height: 160px;
	object-fit: contain;
	width: auto;
}

/* The status pill closes the row of facts. */
.aem-public .aem-fact-status {
	margin-inline-start: auto;
}

/* The nav element the hub navigation prints around its list. */
.aem-public .aem-nav {
	display: block;
}

/* ===== 05-archives.css ===== */

/**
 * Archives: the grid system.
 *
 * Fixed track counts, or `auto-fill` where a count would be wrong. Never
 * `auto-fit`: it collapses the empty tracks and hands their width to the one
 * card that exists, which is how a single speaker came to fill 1200px
 * (AD-54).
 *
 * The `columns` attribute of a shortcode maps to `.aem-grid-N` here. There is
 * no second grid system: `.aem-cols-N` was removed in 1.11.
 */

.aem-public .aem-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-grid {
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-grid > li {
	margin: 0;
	min-width: 0;
}

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

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

.aem-public .aem-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aem-public .aem-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aem-public .aem-grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aem-public .aem-grid-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* A grid of one item keeps its tracks, so the card keeps its size. */
.aem-public .aem-grid > li:only-child {
	grid-column: span 1;
}

/* ===== 06-edition.css ===== */

/**
 * The edition: the hub navigation and the editions archive.
 *
 * Both compose the card and grid components; neither redefines them.
 */

/* ---------------------------------------------------- hub section cards */

/*
 * The grid is named on the list and nowhere else.
 *
 * It used to be named on `.aem-nav-cards`, which the template printed on the
 * <nav> **and** on the <ul> inside it. Both matched: the nav became a three
 * track grid, the list landed in its first track at a third of the width, and
 * its own three tracks made every card a ninth of the container — about
 * 128px, which is the word-by-word wrapping that was reported. The button
 * after the list became a grid item in the second track and stretched to the
 * row height, which is the tall bordered panel. One class on two nested
 * elements, two symptoms.
 */
.aem-public .aem-nav-cards {
	display: block;
}

.aem-public .aem-nav-grid {
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-nav-item {
	display: flex;
	margin: 0;
	min-width: 0;
}

/* A card fills its track, and its text wraps like text. */
.aem-public .aem-nav-card {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	color: inherit;
	display: grid;
	gap: 0 var(--aem-space-4);
	grid-template-columns: 46px minmax(0, 1fr);
	padding: var(--aem-space-5);
	position: relative;
	text-decoration: none;
	min-width: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	width: 100%;
}

.aem-public .aem-nav-card:hover,
.aem-public .aem-nav-card:focus-visible {
	border-color: rgb(var(--aem-primary-rgb) / 0.4);
	box-shadow: var(--aem-shadow-md);
	transform: translateY(-2px);
}

.aem-public .aem-nav-mark {
	align-items: center;
	background: rgb(var(--aem-primary-rgb) / 0.1);
	border-radius: var(--aem-radius-sm);
	color: var(--aem-primary);
	display: inline-flex;
	grid-row: span 4;
	height: 46px;
	justify-content: center;
	margin: 0;
	width: 46px;
}

.aem-public .aem-nav-mark .aem-icon {
	height: 22px;
	width: 22px;
}

.aem-public .aem-nav-card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	grid-column: 2;
	letter-spacing: -0.01em;
	margin: 0;
	padding-right: var(--aem-space-6);
}

.aem-public .aem-nav-card-count {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	grid-column: 2;
	margin: 2px 0 0;
}

.aem-public .aem-nav-card-description {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	grid-column: 2;
	line-height: 1.5;
	margin: 2px 0 0;
}

.aem-public .aem-nav-card-cta {
	color: var(--aem-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	grid-column: 2;
	margin: var(--aem-space-3) 0 0;
}

.aem-public .aem-nav-chevron {
	color: var(--aem-border-strong);
	position: absolute;
	right: var(--aem-space-5);
	top: var(--aem-space-5);
	transition: color 160ms ease, transform 160ms ease;
}

.aem-public .aem-nav-card:hover .aem-nav-chevron {
	color: var(--aem-primary);
	transform: translateX(2px);
}

.aem-public .aem-nav-count {
	color: var(--aem-text-muted);
	font-size: 0.875rem;
}

/* Inline and stacked layouts: the same links, without the card. */
.aem-public .aem-nav-inline .aem-nav-list,
.aem-public .aem-nav-stacked .aem-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
}

.aem-public .aem-nav-stacked .aem-nav-list {
	flex-direction: column;
}

.aem-public .aem-nav-inline .aem-nav-link,
.aem-public .aem-nav-stacked .aem-nav-link {
	align-items: center;
	color: var(--aem-heading);
	display: inline-flex;
	font-weight: 600;
	gap: var(--aem-space-2);
	text-decoration: none;
}

.aem-public .aem-nav-link.is-current {
	color: var(--aem-primary);
}

/*
 * Leaving the edition is not one of its sections: the button sits after the
 * navigation element, never inside the grid, and it is sized by its own
 * content.
 */
.aem-public.aem-nav-away,
.aem-public .aem-nav-away {
	display: flex;
	justify-content: center;
	margin: clamp(24px, 3vw, 36px) 0 0;
}

.aem-public.aem-nav-away .aem-button,
.aem-public .aem-nav-away .aem-button {
	align-self: center;
	flex: 0 0 auto;
	width: auto;
}

/* ------------------------------------------------------- editions archive */

.aem-public .aem-editions-intro {
	color: var(--aem-text-muted);
	font-size: 1.0625rem;
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 68ch;
}

.aem-public .aem-editions-group + .aem-editions-group,
.aem-public .aem-editions-featured + .aem-editions-group {
	margin-top: clamp(32px, 4vw, 56px);
}

.aem-public .aem-editions-group-label {
	color: var(--aem-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 var(--aem-space-5);
	text-transform: uppercase;
}

/* The featured edition is its own list of one, so it takes the whole row
   without any card being told to stretch. */
.aem-public .aem-editions-featured .aem-grid {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * The featured edition: a band of a card, not a page of one — about half
 * the screen on a desktop, which is what the design asks for.
 *
 * It used to hold that proportion with `max-height: 50vh` and
 * `overflow: hidden` on the body, which on a 1366 x 768 laptop is a 384px
 * ceiling over a card whose content is taller than that — so the call to
 * action was cut off rather than shown. A ceiling on a card is a card that
 * hides things.
 *
 * The proportion comes from the side the card can afford to lose instead:
 * the photograph is given the height, and the body is as tall as what it
 * has to say. The card is `height: auto` at every width, and the row is as
 * tall as the taller of the two — so the 50vh is what the reader sees, and
 * nothing is ever cut (AD-76).
 */
.aem-public .aem-edition-hero {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	height: auto;
}

.aem-public .aem-edition-hero .aem-card-body {
	gap: var(--aem-space-3);
	justify-content: center;
	padding: clamp(24px, 3vw, 48px);
}

.aem-public .aem-edition-hero .aem-card-media {
	height: 100%;
	overflow: hidden;
}

/*
 * The photograph carries the height of the card: half the screen, capped so
 * a tall monitor does not get a tall card, and never stretched — the crop
 * moves, the picture does not deform.
 */
.aem-public .aem-edition-hero .aem-card-media img {
	aspect-ratio: auto;
	height: 100%;
	min-height: min(50vh, 460px);
	object-fit: cover;
}

.aem-public .aem-edition-hero .aem-card-media-pending {
	display: flex;
	padding: clamp(16px, 2vw, 24px);
}

.aem-public .aem-edition-hero .aem-visual-placeholder {
	aspect-ratio: auto;
	min-height: min(50vh, 460px);
	width: 100%;
}

.aem-public .aem-edition-year {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

.aem-public .aem-edition-name {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.aem-public .aem-edition-name a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-edition-hero .aem-edition-name {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.aem-public .aem-edition-dates,
.aem-public .aem-edition-place {
	align-items: center;
	color: var(--aem-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: var(--aem-space-2);
	margin: 0;
}

.aem-public .aem-edition-card-counts {
	color: var(--aem-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: var(--aem-space-2) var(--aem-space-4);
	list-style: none;
	margin: var(--aem-space-2) 0 0;
	padding: 0;
}

.aem-public .aem-edition-card-counts li {
	margin: 0;
}

.aem-public .aem-edition-card-counts strong {
	color: var(--aem-heading);
}

.aem-public .aem-edition-cta {
	margin: 0;
	margin-top: auto;
	padding-top: var(--aem-space-4);
}

.aem-public .aem-edition-cta .aem-card-cta::after {
	content: " \2192";
}

/* ===== 07-speakers.css ===== */

/**
 * Speakers: the archive grid and the profile page.
 *
 * The card composes .aem-card; only what is specific to a person is here.
 */

.aem-public .aem-speaker-grid {
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-speaker-grid > .aem-speaker {
	margin: 0;
	min-width: 0;
}

.aem-public .aem-speaker-photo {
	margin: 0;
	overflow: hidden;
}

.aem-public .aem-speaker-grid .aem-speaker-photo img {
	aspect-ratio: var(--aem-ratio-portrait);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.aem-public .aem-speaker-name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.aem-public .aem-speaker-name a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-speaker-job-title,
.aem-public .aem-speaker-company {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
	margin: 0;
}

/* --------------------------------------------------------- the profile */

.aem-public .aem-speaker-bio {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-speaker-editions {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-edition-block {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	padding: clamp(20px, 2.5vw, 28px);
}

.aem-public .aem-edition-block-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-2) var(--aem-space-4);
	margin-bottom: var(--aem-space-4);
}

.aem-public .aem-edition-block-title {
	color: var(--aem-heading);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.aem-public .aem-edition-block-title a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-edition-block-empty {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

/* The talks a person gave in one edition. */
.aem-public .aem-session-list {
	display: flex;
	flex-direction: column;
	gap: var(--aem-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-session-item {
	border-top: 1px solid var(--aem-border);
	margin: 0;
	padding-top: var(--aem-space-3);
}

.aem-public .aem-session-item:first-child {
	border-top: 0;
	padding-top: 0;
}

.aem-public .aem-session-item-when {
	color: var(--aem-text-muted);
	display: block;
	font-size: 0.875rem;
}

.aem-public .aem-session-item-title,
.aem-public .aem-session-item-link {
	color: var(--aem-heading);
	font-weight: 600;
	text-decoration: none;
}

.aem-public .aem-session-item-link:hover {
	color: var(--aem-primary);
}

/* ===== 08-sessions.css ===== */

/**
 * Sessions: the agenda and the talk page.
 *
 * The programme is a list of rows, not a grid of cards: the hour on the left,
 * the face beside it, the talk in the middle and its sponsor on the right.
 * The face and sponsor columns collapse to nothing when a session has
 * neither, so a row never carries an empty column.
 *
 * `.aem-agenda` is on the wrapper, and so is `.aem-public`: the shortcode
 * prints both classes on the same element. `.aem-public .aem-agenda` is a
 * descendant selector, so it matched nothing on a real page and the whole
 * programme rendered as an unstyled list — no card, no hour column, no
 * row. Both forms are written out, as `.aem-nav-away` already does.
 */

.aem-public .aem-session-group {
	color: var(--aem-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: clamp(32px, 4vw, 48px) 0 var(--aem-space-4);
	text-transform: uppercase;
}

.aem-public .aem-session-group:first-child {
	margin-top: 0;
}

.aem-public.aem-agenda .aem-list,
.aem-public .aem-agenda .aem-list {
	display: flex;
	flex-direction: column;
	gap: var(--aem-space-3);
}

.aem-public.aem-agenda .aem-session,
.aem-public .aem-agenda .aem-session {
	align-items: center;
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	display: grid;
	gap: var(--aem-space-4);
	grid-template-columns: 124px auto minmax(0, 1fr) auto;
	margin: 0;
	padding: var(--aem-space-4) var(--aem-space-5);
	position: relative;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.aem-public.aem-agenda .aem-session:hover,
.aem-public .aem-agenda .aem-session:hover {
	border-color: rgb(var(--aem-primary-rgb) / 0.35);
	box-shadow: var(--aem-shadow-md);
}

.aem-public .aem-session-schedule {
	align-items: center;
	color: var(--aem-heading);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	margin: 0;
}

.aem-public .aem-session-time {
	color: var(--aem-heading);
	font-weight: 700;
}

.aem-public .aem-session-date {
	color: var(--aem-text-muted);
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
}

.aem-public .aem-session-face {
	margin: 0;
}

.aem-public .aem-session-face img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: block;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.aem-public .aem-session-body {
	min-width: 0;
}

.aem-public .aem-session-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.aem-public .aem-session-title a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-session-room {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 2px 0 0;
}

.aem-public .aem-session-speakers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-2) var(--aem-space-4);
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.aem-public .aem-session-speaker {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

.aem-public .aem-session-speaker-name {
	color: var(--aem-primary);
	font-weight: 600;
	text-decoration: none;
}

.aem-public .aem-session-speaker-name:hover {
	text-decoration: underline;
}

.aem-public .aem-session-speaker-role {
	color: var(--aem-text-muted);
}

.aem-public .aem-session-excerpt {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: var(--aem-space-2) 0 0;
}

.aem-public .aem-session-pdf {
	margin: var(--aem-space-2) 0 0;
}

.aem-public .aem-session-cta {
	color: var(--aem-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: var(--aem-space-3) 0 0;
}

.aem-public .aem-session-support {
	text-align: right;
}

.aem-public .aem-session-support-label {
	color: var(--aem-text-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin: 0 0 var(--aem-space-2);
	text-transform: uppercase;
}

.aem-public .aem-session-sponsors,
.aem-public .aem-session-sponsor-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-session-sponsor {
	margin: 0;
}

.aem-public .aem-session-sponsor-logo,
.aem-public .aem-session-sponsor-logo img {
	height: auto;
	max-height: 44px;
	max-width: 132px;
	object-fit: contain;
	width: auto;
}

.aem-public .aem-session-sponsor-name {
	color: var(--aem-heading);
	font-weight: 600;
	text-decoration: none;
}

.aem-public .aem-session-sponsor-label {
	color: var(--aem-text-muted);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------ talk page */

.aem-public .aem-session-about {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-session-content {
	margin: 0;
}

/* The sponsors of one talk, as a standalone block. */
.aem-public .aem-session-sponsors-heading {
	color: var(--aem-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 var(--aem-space-3);
}

.aem-public .aem-session-sponsor-list {
	justify-content: flex-start;
}

/* ===== 09-sponsors.css ===== */

/**
 * Sponsors: the tiers, the logo grid and the company page.
 *
 * The bigger the tier, the bigger the logo and the fewer per row: hierarchy
 * is what a tier is. Logos keep their aspect ratio — `object-fit: contain`,
 * never a stretched mark.
 */

.aem-public .aem-sponsor-tier + .aem-sponsor-tier {
	margin-top: clamp(32px, 4vw, 48px);
}

.aem-public .aem-sponsor-tier-label {
	align-items: center;
	color: var(--aem-primary);
	display: flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: var(--aem-space-4);
	letter-spacing: 0.14em;
	margin: 0 0 var(--aem-space-5);
	text-transform: uppercase;
}

.aem-public .aem-sponsor-tier-label::after {
	background: var(--aem-border);
	content: "";
	flex: 1 1 auto;
	height: 1px;
}

.aem-public .aem-logo-grid {
	display: grid;
	gap: var(--aem-space-4);
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-tier-rank-1 .aem-logo-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aem-public .aem-tier-rank-2 .aem-logo-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aem-public .aem-sponsor {
	align-items: center;
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 108px;
	min-width: 0;
	padding: var(--aem-space-4);
	text-align: center;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.aem-public .aem-sponsor:hover {
	border-color: rgb(var(--aem-primary-rgb) / 0.35);
	box-shadow: var(--aem-shadow-md);
}

.aem-public .aem-sponsor-link {
	align-items: center;
	color: var(--aem-heading);
	display: flex;
	font-weight: 600;
	height: 100%;
	justify-content: center;
	text-decoration: none;
	width: 100%;
}

.aem-public .aem-sponsor-logo {
	height: auto;
	max-height: 72px;
	object-fit: contain;
	width: auto;
}

.aem-public .aem-tier-rank-1 .aem-sponsor-logo {
	max-height: 104px;
}

.aem-public .aem-tier-rank-2 .aem-sponsor-logo {
	max-height: 88px;
}

.aem-public .aem-logo-name {
	color: var(--aem-heading);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/* --------------------------------------------------------- company page */

.aem-public .aem-sponsor-profile,
.aem-public .aem-sponsor-editions {
	margin-top: clamp(32px, 4vw, 48px);
}

/* ===== 10-news.css ===== */

/**
 * News: the archive grid and the article.
 *
 * The card composes .aem-card; the article is a reading column.
 */

.aem-public .aem-news-grid {
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-news-item {
	margin: 0;
	min-width: 0;
}

.aem-public .aem-news-image {
	margin: 0;
	overflow: hidden;
}

.aem-public .aem-news-image img {
	aspect-ratio: var(--aem-ratio-landscape);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.aem-public .aem-news-date {
	color: var(--aem-text-muted);
	font-size: 0.875rem;
	margin: 0;
}

.aem-public .aem-news-title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.aem-public .aem-news-title a {
	color: inherit;
	text-decoration: none;
}

.aem-public .aem-news-excerpt {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.aem-public .aem-news-cta {
	color: var(--aem-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	margin-top: auto;
	padding-top: var(--aem-space-3);
}

.aem-public .aem-news-cta::after {
	content: " \2192";
}

/* -------------------------------------------------------------- article */

.aem-public .aem-article {
	margin-inline: auto;
	max-width: 820px;
}

.aem-public .aem-article-media {
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.aem-public .aem-article-media img {
	border-radius: var(--aem-radius-md);
	display: block;
	height: auto;
	width: 100%;
}

.aem-public .aem-article-body {
	color: var(--aem-text);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.aem-public .aem-article-body > * + * {
	margin-top: var(--aem-space-5);
}

.aem-public .aem-article-body a {
	color: var(--aem-primary);
}

.aem-public .aem-article-body h2,
.aem-public .aem-article-body h3 {
	color: var(--aem-heading);
	line-height: 1.25;
	margin-top: clamp(28px, 3vw, 40px);
	overflow-wrap: break-word;
}

/*
 * An article carries whatever an editor pasted into it. A table three
 * columns too wide scrolls inside its own box rather than taking the page
 * with it, and an embed is as wide as the column.
 */
.aem-public .aem-article-body table {
	border-collapse: collapse;
	display: block;
	max-width: 100%;
	overflow-x: auto;
	width: 100%;
}

.aem-public .aem-article-body img,
.aem-public .aem-article-body iframe,
.aem-public .aem-article-body video {
	height: auto;
	max-width: 100%;
}

.aem-public .aem-article-body pre {
	overflow-x: auto;
}

/* ===== 11-gallery.css ===== */

/**
 * Gallery: a media grid and nothing else.
 *
 * There is no filter row: the gallery relation has no grouping column, so
 * there is nothing real to filter by (AD-54).
 */

.aem-public .aem-gallery-grid {
	display: grid;
	gap: var(--aem-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-gallery-item {
	background: var(--aem-surface-soft);
	border-radius: var(--aem-radius-sm);
	margin: 0;
	min-width: 0;
	overflow: hidden;
}

.aem-public .aem-gallery-figure {
	margin: 0;
}

.aem-public .aem-gallery-link {
	display: block;
}

.aem-public .aem-gallery-item img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 400ms ease;
	width: 100%;
}

.aem-public .aem-gallery-item:hover img {
	transform: scale(1.04);
}

.aem-public .aem-gallery-caption {
	color: var(--aem-text-muted);
	font-size: 0.8125rem;
	padding: var(--aem-space-3);
}

/* ===== 12-social.css ===== */

/**
 * Social: the archive of publications and one publication.
 *
 * The card composes .aem-card and the platform tag; only the single's layout
 * is specific here.
 */

.aem-public .aem-social-grid {
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-social-post {
	display: flex;
	margin: 0;
	min-width: 0;
}

.aem-public .aem-social-card {
	width: 100%;
}

/* ------------------------------------------------------- one publication */

.aem-public .aem-social-single-layout {
	align-items: start;
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	/* The same gap as every other single body, and in the same terms. */
	margin-top: clamp(24px, 4vw, 64px);
}

.aem-public .aem-social-single-media {
	margin: 0;
}

.aem-public .aem-social-single-media img {
	border-radius: var(--aem-radius-md);
	display: block;
	height: auto;
	width: 100%;
}

.aem-public .aem-social-single-content > * + * {
	margin-top: var(--aem-space-4);
}

/*
 * A publication is other people's text: hashtags, handles and raw links,
 * none of which contain a space. `anywhere` rather than `break-word`,
 * because a 60 character URL has to break mid-token or not at all.
 */
.aem-public .aem-social-copy {
	color: var(--aem-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.aem-public .aem-social-single-links,
.aem-public .aem-social-links,
.aem-public .aem-social-networks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aem-public .aem-social-single-links li,
.aem-public .aem-social-links li {
	margin: 0;
}

.aem-public .aem-social-link {
	align-items: center;
	border: 1px solid var(--aem-border-strong);
	border-radius: var(--aem-radius-pill);
	color: var(--aem-heading);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--aem-space-2);
	padding: 8px 16px;
	text-decoration: none;
}

.aem-public .aem-social-link:hover {
	border-color: var(--aem-primary);
	color: var(--aem-primary);
}

.aem-public .aem-social-details {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
}

/* ===== 13-travel.css ===== */

/**
 * Travel: where the edition happens.
 *
 * The map on the left, the location card on the right, practical information
 * full width below — and only when the edition actually holds it (AD-43).
 */

.aem-public .aem-travel-layout {
	align-items: start;
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
}

.aem-public .aem-travel-layout-single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

/*
 * The map is the one element of the public layer a reader **uses** rather
 * than reads, so nothing may be painted over it.
 *
 * It had no `position` of its own, which in CSS means every positioned box
 * on the page paints above it — including the card beside it, which is an
 * `.aem-card` and therefore `position: relative`. A grid keeps the two
 * apart, so this was not visible in every layout; it is one theme overlay,
 * one sticky element or one negative margin away from being visible in all
 * of them.
 *
 * `position: relative` and a `z-index` of 1 put the map in its own layer
 * inside the travel layout. That is the whole of the fix: no 9999, and no
 * new stacking context anywhere else. Every decorative layer of the band
 * already carries `pointer-events: none` (AD-76).
 */
.aem-public .aem-travel-map {
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/*
 * The map is as wide as its column and as tall as the screen can spare. A
 * flat 420px floor is half of a 768px laptop viewport before the page has
 * said anything.
 */
.aem-public .aem-travel-map iframe {
	aspect-ratio: 4 / 3;
	border: 0;
	display: block;
	height: 100%;
	min-height: clamp(280px, 42vh, 420px);
	width: 100%;
}

.aem-public .aem-travel-card {
	display: flex;
	flex-direction: column;
	padding: var(--aem-space-5);
}

.aem-public .aem-travel-field {
	align-items: start;
	border-bottom: 1px solid var(--aem-border);
	display: grid;
	gap: 0 var(--aem-space-4);
	grid-template-columns: 46px minmax(0, 1fr);
	padding-block: var(--aem-space-4);
}

.aem-public .aem-travel-field:first-child {
	padding-top: 0;
}

.aem-public .aem-travel-field:last-of-type {
	border-bottom: 0;
}

.aem-public .aem-travel-field .aem-icon-tile {
	grid-row: span 2;
}

.aem-public .aem-travel-label {
	color: var(--aem-primary);
	font-size: 0.75rem;
	font-weight: 700;
	grid-column: 2;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.aem-public .aem-travel-value {
	color: var(--aem-heading);
	font-size: 1rem;
	font-weight: 600;
	grid-column: 2;
	line-height: 1.4;
	margin: 4px 0 0;
}

.aem-public .aem-travel-action {
	margin: var(--aem-space-5) 0 0;
}

.aem-public .aem-travel-action .aem-button {
	width: 100%;
}

.aem-public .aem-travel-info {
	margin-top: clamp(40px, 5vw, 72px);
}

/* ------------------------------------------------------ the venue block */

.aem-public .aem-venue-details {
	display: grid;
	gap: var(--aem-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.aem-public .aem-venue-label {
	color: var(--aem-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.aem-public .aem-venue-name,
.aem-public .aem-venue-address,
.aem-public .aem-venue-location,
.aem-public .aem-venue-dates,
.aem-public .aem-venue-email,
.aem-public .aem-venue-phone {
	color: var(--aem-heading);
	margin: 4px 0 0;
}

.aem-public .aem-venue-map {
	margin-top: var(--aem-space-5);
	position: relative;
	z-index: 1;
}

.aem-public .aem-venue-gallery {
	display: grid;
	gap: var(--aem-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: var(--aem-space-5) 0 0;
	padding: 0;
}

.aem-public .aem-venue-gallery-item {
	margin: 0;
	min-width: 0;
}

.aem-public .aem-venue-gallery-item img {
	aspect-ratio: 4 / 3;
	border-radius: var(--aem-radius-sm);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ===== 14-tickets.css ===== */

/**
 * Tickets: the pricing section.
 *
 * One card per ticket type, in the order a reader decides in: who it is for,
 * what it costs, how to buy it, what it includes, and the small print last.
 *
 * Real data only. A ticket with no price shows no price, one with no
 * inclusions shows no heading over an empty list, one with no previous price
 * reserves no room for a number that does not exist, and an edition with no
 * tickets shows the shared empty state.
 *
 * Everything here is composed from the design tokens, so the same component
 * is the colour of whichever event line it is rendered under (AD-46).
 */

.aem-public .aem-ticket-intro {
	color: var(--aem-text-muted);
	font-size: 1.0625rem;
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 62ch;
}

.aem-public .aem-ticket-grid {
	display: grid;
	gap: clamp(16px, 2vw, 28px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Two types are two halves of the row. They used to be two thirds of it,
 * because the grid was three tracks whatever the page held.
 */
.aem-public .aem-ticket-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ------------------------------------------------------------- the card */

.aem-public .aem-ticket-card {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-lg);
	box-shadow: var(--aem-shadow-sm);
	display: flex;
	flex-direction: column;
	/*
	 * One rhythm inside the card, and no block with a margin of its own:
	 * the gaps between the five parts are all this. It is why the card has
	 * no empty middle — nothing is pushed anywhere, everything follows what
	 * came before it.
	 */
	gap: clamp(16px, 1.6vw, 22px);
	height: 100%;
	margin: 0;
	min-width: 0;
	padding: clamp(24px, 2.4vw, 36px);
}

/*
 * The recommended ticket: the brand at the edge of the card and a breath of
 * it at the top, and nothing else. A pricing table that shouts at the reader
 * is a pricing table nobody believes.
 */
.aem-public .aem-ticket-featured {
	background:
		linear-gradient(180deg, rgb(var(--aem-primary-rgb) / 0.06), rgb(var(--aem-surface-rgb) / 0) 200px),
		var(--aem-surface);
	border-color: rgb(var(--aem-primary-rgb) / 0.45);
	box-shadow: 0 0 0 1px rgb(var(--aem-primary-rgb) / 0.12), var(--aem-shadow-md);
}

.aem-public .aem-ticket-inactive {
	opacity: 0.72;
}

.aem-public .aem-ticket-card-header {
	display: flex;
	flex-direction: column;
	gap: var(--aem-space-2);
}

.aem-public .aem-ticket-name {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

/* The line under the name, and the paragraph under that: two fields, two
   different things, and neither of them the small print. */
.aem-public .aem-ticket-subtitle {
	color: var(--aem-text);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.aem-public .aem-ticket-description {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.aem-public .aem-ticket-description p {
	margin: 0;
}

.aem-public .aem-ticket-description p + p {
	margin-top: var(--aem-space-2);
}

/* ------------------------------------------------------------- the price */

/*
 * The largest thing on the card, because it is what the reader came for.
 * The two prices share a baseline so the old one reads as a correction to
 * the new one rather than as a second number.
 */
.aem-public .aem-ticket-price-row {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aem-space-2) var(--aem-space-3);
	margin: 0;
}

.aem-public .aem-ticket-price {
	color: var(--aem-heading);
	font-size: clamp(2.625rem, 2rem + 1.6vw, 3.625rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

/*
 * Struck through, smaller and quieter — three signals, because a line
 * through a number is the only one a reader with no colour can use, and
 * the markup carries a fourth in `<s>` and a spoken label.
 */
.aem-public .aem-ticket-old-price {
	color: var(--aem-text-muted);
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------- the CTA */

.aem-public .aem-ticket-cta {
	margin: 0;
}

.aem-public .aem-ticket-cta .aem-button {
	width: 100%;
}

.aem-public .aem-ticket-status {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

/* --------------------------------------------------------- what it includes */

.aem-public .aem-ticket-includes {
	border-top: 1px solid var(--aem-border);
	padding-top: clamp(16px, 1.6vw, 22px);
}

.aem-public .aem-ticket-includes-title {
	color: var(--aem-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 var(--aem-space-3);
	text-transform: uppercase;
}

.aem-public .aem-ticket-inclusions {
	color: var(--aem-text);
	display: flex;
	flex-direction: column;
	font-size: 0.9375rem;
	gap: var(--aem-space-2);
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * A check in the brand colour, drawn from the icon set — not a bullet, and
 * not a character in a pseudo element, which is what this was.
 */
.aem-public .aem-ticket-inclusion {
	align-items: start;
	display: grid;
	gap: var(--aem-space-3);
	grid-template-columns: 18px minmax(0, 1fr);
	margin: 0;
}

.aem-public .aem-ticket-check {
	color: var(--aem-primary);
	margin-top: 3px;
}

/* ------------------------------------------------------------- small print */

/*
 * Readable, and clearly not the offer. It sits on the quiet surface of the
 * design system, one step down in size, at the bottom of the card where the
 * small print of anything belongs.
 */
.aem-public .aem-ticket-note {
	background: var(--aem-surface-soft);
	border-radius: var(--aem-radius-sm);
	/*
	 * No `margin-top: auto` here, and none anywhere in the card. Pushing
	 * the last block to the bottom of a stretched grid item is precisely
	 * how the old card grew the empty middle this milestone is about: the
	 * shorter of two cards would have held a hole between its list and its
	 * small print. The parts follow each other; what is left over is left
	 * over, at the bottom, where it is invisible.
	 */
	padding: var(--aem-space-4);
}

.aem-public .aem-ticket-note-title {
	align-items: center;
	color: var(--aem-heading);
	display: flex;
	font-size: 0.75rem;
	font-weight: 700;
	gap: var(--aem-space-2);
	letter-spacing: 0.08em;
	margin: 0 0 var(--aem-space-2);
	text-transform: uppercase;
}

.aem-public .aem-ticket-note-title .aem-icon {
	color: var(--aem-primary);
}

.aem-public .aem-ticket-note-text {
	color: var(--aem-text-muted);
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

/* ===== 15-editorial.css ===== */

/**
 * Editorial: the pieces the single pages share.
 *
 * Panels, the person block, the split body with its aside. Every single —
 * talk, speaker, sponsor, publication, news — composes these; none of them
 * defines its own.
 */

.aem-public .aem-panels {
	align-items: stretch;
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	margin-bottom: clamp(32px, 4vw, 48px);
}

/* One panel instead of two keeps its column; it does not fill the row. */
.aem-public .aem-panels-single {
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

.aem-public .aem-panel {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	padding: clamp(20px, 2.5vw, 32px);
}

.aem-public .aem-panel-label {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	margin: 0 0 var(--aem-space-2);
}

.aem-public .aem-panel-logo {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 120px;
}

.aem-public .aem-panel-logo img {
	height: auto;
	max-height: 110px;
	object-fit: contain;
	width: auto;
}

/* ------------------------------------------------------------- a person */

.aem-public .aem-person {
	align-items: center;
	display: grid;
	gap: var(--aem-space-5);
	grid-template-columns: 112px minmax(0, 1fr);
}

.aem-public .aem-person + .aem-person {
	margin-top: var(--aem-space-5);
}

.aem-public .aem-person-photo {
	margin: 0;
}

.aem-public .aem-person-photo img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.aem-public .aem-person-name {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.aem-public .aem-person-role,
.aem-public .aem-person-company {
	color: var(--aem-text-muted);
	margin: 2px 0 0;
}

.aem-public .aem-person-cta {
	margin: var(--aem-space-3) 0 0;
}

/* -------------------------------------------------- body with an aside */

.aem-public .aem-content-split {
	align-items: start;
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr) 320px;
}

.aem-public .aem-aside-card {
	background: var(--aem-surface);
	border: 1px solid var(--aem-border);
	border-radius: var(--aem-radius-md);
	box-shadow: var(--aem-shadow-sm);
	padding: var(--aem-space-5);
	text-align: center;
}

.aem-public .aem-aside-card .aem-button {
	width: 100%;
}

.aem-public .aem-aside-note {
	color: var(--aem-text-muted);
	font-size: 0.875rem;
	margin: var(--aem-space-3) 0 0;
}

/* ------------------------------------------------------------ details */

.aem-public .aem-speaker-details,
.aem-public .aem-sponsor-details,
.aem-public .aem-session-details,
.aem-public .aem-social-details {
	color: var(--aem-text-muted);
	font-size: 0.9375rem;
}

.aem-public .aem-person-body {
	min-width: 0;
}

/* ===== 16-responsive.css ===== */

/**
 * Responsive: the only layer that owns a breakpoint.
 *
 * No component file contains a media query. Everything that changes with the
 * viewport changes here, in one place, so two systems can never disagree
 * about what happens at 1024px.
 *
 * Six breakpoints. Three of them are written one pixel below their name,
 * and that is deliberate rather than sloppy: 1280, 1200 and 1024 are the
 * widths that still get the *wider* layout — a 1280 screen shows four
 * portraits, a 1200 screen shows three cards, a 1024 tablet in landscape
 * still reads as a small desktop — so the query that takes the wider layout
 * away starts one pixel under each. 768, 600 and 480 are the other way
 * round: those widths already belong to the narrower layout.
 *
 * | 1280 | four-track grids become three |
 * | 1200 | three-track grids become two; the agenda drops its fourth column |
 * | 1024 | side-by-side layouts stack; the band loses its second column |
 * |  768 | the agenda becomes rows; touch sizing; the band goes vertical |
 * |  600 | one track |
 * |  480 | the last two-track grids keep two only where two still read |
 *
 * Gone: **782**, the width WordPress uses for its admin bar, which was never
 * a layout decision here, and **900**, which was one component's private
 * breakpoint. Neither described anything about this design.
 */

/* ======================================================= 1280 — laptop */

@media (max-width: 1279px) {
	.aem-public .aem-grid-4,
	.aem-public .aem-speaker-grid,
	.aem-public .aem-gallery-grid,
	.aem-public .aem-venue-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.aem-public .aem-grid-5,
	.aem-public .aem-grid-6,
	.aem-public .aem-logo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ================================================== 1200 — small laptop */

@media (max-width: 1199px) {
	/*
	 * A laptop and a tablet in landscape: 38vh, one step under the 45 a
	 * desktop gets. The cap comes down with it, so the band is the same
	 * shape rather than the same number of pixels (AD-76).
	 */
	.aem-public .aem-hero,
	.aem-public .aem-hero--section,
	.aem-public .aem-hero--editorial {
		--aem-hero-height: min(38vh, 330px);
	}

	.aem-public .aem-hero--edition {
		--aem-hero-height: min(38vh, 360px);
	}

	.aem-public .aem-hero--compact {
		--aem-hero-height: min(34vh, 300px);
	}

	/*
	 * A laptop screen is short as well as narrow, so the band gives back
	 * its air before it gives back its height: the padding and the gaps
	 * between the lines come down first. This is what keeps a single with
	 * a three line title, its date and two buttons near the ceiling
	 * instead of well over it.
	 */
	.aem-public .aem-hero-inner {
		padding-block: clamp(24px, 3vw, 44px);
	}

	.aem-public .aem-hero-copy > * + * {
		margin-top: var(--aem-space-3);
	}

	.aem-public .aem-hero .aem-breadcrumbs {
		margin-bottom: var(--aem-space-4);
	}

	/* The featured edition comes down with the band it sits under. */
	.aem-public .aem-edition-hero .aem-card-media img,
	.aem-public .aem-edition-hero .aem-visual-placeholder {
		min-height: min(42vh, 380px);
	}

	.aem-public .aem-nav-grid,
	.aem-public .aem-news-grid,
	.aem-public .aem-social-grid,
	.aem-public .aem-ticket-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * The agenda keeps the hour, the face and the talk in one row; the
	 * sponsor of the talk moves under them rather than being squeezed into
	 * a track with no room left for a logo.
	 */
	.aem-public.aem-agenda .aem-session,
	.aem-public .aem-agenda .aem-session {
		grid-template-columns: 112px auto minmax(0, 1fr);
	}

	.aem-public.aem-agenda .aem-session-support,
	.aem-public .aem-agenda .aem-session-support {
		grid-column: 1 / -1;
		text-align: left;
	}

	.aem-public.aem-agenda .aem-session-sponsors,
	.aem-public .aem-agenda .aem-session-sponsors {
		justify-content: flex-start;
	}
}

/* =============================================== 1024 — tablet landscape */

@media (max-width: 1023px) {
	.aem-public .aem-hero--edition.has-visual .aem-hero-grid,
	.aem-public .aem-hero--profile.has-visual .aem-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The face comes first when the band stacks, and stays a face. */
	.aem-public .aem-hero--profile .aem-hero-visual {
		max-width: 260px;
		order: -1;
	}

	.aem-public .aem-grid,
	.aem-public .aem-grid-3,
	.aem-public .aem-grid-4,
	.aem-public .aem-speaker-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aem-public .aem-grid-5,
	.aem-public .aem-grid-6,
	.aem-public .aem-gallery-grid,
	.aem-public .aem-venue-gallery,
	.aem-public .aem-logo-grid,
	.aem-public .aem-tier-rank-2 .aem-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The largest tier keeps the largest slots: two, not three. */
	.aem-public .aem-tier-rank-1 .aem-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aem-public .aem-travel-layout,
	.aem-public .aem-panels,
	.aem-public .aem-panels-single,
	.aem-public .aem-content-split,
	.aem-public .aem-social-single-layout,
	.aem-public .aem-edition-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Stacked, the photograph is a band across the top of the card and the
	 * card is as tall as its content. `vh` has no business here: a card in
	 * one column is not a share of the screen, it is a picture and the
	 * words under it.
	 */
	.aem-public .aem-edition-hero {
		height: auto;
	}

	.aem-public .aem-edition-hero .aem-card-media img,
	.aem-public .aem-edition-hero .aem-visual-placeholder {
		height: auto;
		min-height: clamp(220px, 40vw, 280px);
	}

	/* Map first, then the address it belongs to. */
	.aem-public .aem-travel-map {
		order: -1;
	}

	.aem-public .aem-travel-map iframe {
		aspect-ratio: 16 / 10;
		min-height: clamp(260px, 38vh, 340px);
	}

	/* The image of a publication leads; the copy follows it. */
	.aem-public .aem-social-single-media {
		order: -1;
	}
}

/* ================================================ 768 — tablet portrait */

@media (max-width: 768px) {
	/*
	 * A pricing card carries a 42px price, a full width button, a list and
	 * a paragraph of small print. Two of those side by side stop being
	 * readable before the grid stops fitting them.
	 */
	.aem-public .aem-ticket-grid,
	.aem-public .aem-ticket-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The agenda stops being a table of columns and becomes what it reads
	 * as out loud: the hour, the talk, who gives it, who supports it.
	 */
	.aem-public.aem-agenda .aem-session,
	.aem-public .aem-agenda .aem-session {
		gap: var(--aem-space-2);
		grid-template-columns: minmax(0, 1fr);
	}

	.aem-public.aem-agenda .aem-session-face img,
	.aem-public .aem-agenda .aem-session-face img {
		height: 44px;
		width: 44px;
	}

	.aem-public .aem-session-support {
		text-align: left;
	}

	.aem-public .aem-session-sponsors,
	.aem-public .aem-session-sponsor-list {
		justify-content: flex-start;
	}

	.aem-public .aem-page-nav,
	.aem-public .aem-single-back,
	.aem-public.aem-historical-notice {
		align-items: stretch;
		flex-direction: column;
	}

	.aem-public .aem-page-nav .aem-button,
	.aem-public .aem-single-back .aem-button {
		width: 100%;
	}

	/*
	 * Touch. Everything a finger has to hit is at least as tall as the tap
	 * token — which is where the button already was, and where the filter
	 * pills and the page numbers were not.
	 */
	.aem-public .aem-filter,
	.aem-public .aem-pagination .page-numbers,
	.aem-public .aem-link-arrow,
	.aem-public .aem-back-link {
		min-height: var(--aem-tap);
	}

	.aem-public .aem-filter,
	.aem-public .aem-pagination .page-numbers {
		min-width: var(--aem-tap);
	}
}

/* ==================================================== 600 — large phone */

@media (max-width: 600px) {
	.aem-public .aem-grid,
	.aem-public .aem-grid-2,
	.aem-public .aem-grid-3,
	.aem-public .aem-grid-4,
	.aem-public .aem-grid-5,
	.aem-public .aem-grid-6,
	.aem-public .aem-nav-grid,
	.aem-public .aem-news-grid,
	.aem-public .aem-social-grid,
	.aem-public .aem-ticket-grid,
	.aem-public .aem-ticket-grid-2,
	.aem-public .aem-venue-details {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Two tracks still read here: a logo is small, and a photograph in a
	 * gallery is one of many rather than one to study.
	 */
	.aem-public .aem-gallery-grid,
	.aem-public .aem-venue-gallery,
	.aem-public .aem-logo-grid,
	.aem-public .aem-tier-rank-1 .aem-logo-grid,
	.aem-public .aem-tier-rank-2 .aem-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aem-public .aem-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	/*
	 * Two calls to action side by side stop fitting somewhere around here.
	 * They stack, full width, rather than each taking half a phone.
	 */
	.aem-public .aem-hero-actions,
	.aem-public .aem-links {
		flex-direction: column;
	}

	.aem-public .aem-hero-actions .aem-button,
	.aem-public .aem-links .aem-button {
		width: 100%;
	}
}

/* ==================================================== 480 — small phone */

@media (max-width: 480px) {
	/*
	 * The same 30vh. Only the floor comes down, and it comes down to the
	 * height of the copy itself: breadcrumbs, eyebrow and heading are
	 * never cut, so if they need more than 30vh they get it.
	 */
	.aem-public .aem-hero,
	.aem-public .aem-hero--edition,
	.aem-public .aem-hero--section,
	.aem-public .aem-hero--editorial,
	.aem-public .aem-hero--compact {
		--aem-hero-floor: 180px;
	}

	/*
	 * A person gets the whole row. Two portrait cards on a 360 screen are
	 * 150px wide, which is a face nobody can see and a job title nobody can
	 * read — and one portrait card the width of the screen is a photograph
	 * as tall as the screen, so the crop turns landscape with it.
	 */
	.aem-public .aem-speaker-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aem-public .aem-speaker-grid .aem-speaker-photo img {
		aspect-ratio: 3 / 2;
	}

	.aem-public .aem-person {
		gap: var(--aem-space-4);
		grid-template-columns: 84px minmax(0, 1fr);
	}

	.aem-public .aem-nav-card {
		gap: 0 var(--aem-space-3);
		grid-template-columns: 40px minmax(0, 1fr);
		padding: var(--aem-space-4);
	}

	.aem-public .aem-nav-card-title {
		padding-right: var(--aem-space-5);
	}
}

/* ================================================= the band, below 768 */

/*
 * A phone is not a narrow desktop. The band is shorter, it stops trusting
 * `vh` — the unit moves as the browser chrome hides and shows — and its
 * wash turns vertical, because the copy now sits over the middle of the
 * photograph rather than beside it.
 */
@media (max-width: 768px) {
	/*
	 * 30vh, every variant, with a cap for a tall phone and a floor for a
	 * phone held sideways. `vh` moves as the browser chrome hides and
	 * shows, which is why the number it multiplies is small and why there
	 * is a pixel cap over it: the band breathes a little, it does not jump
	 * a third of the screen.
	 */
	.aem-public .aem-hero,
	.aem-public .aem-hero--edition,
	.aem-public .aem-hero--section,
	.aem-public .aem-hero--editorial,
	.aem-public .aem-hero--compact {
		--aem-hero-floor: 200px;
		--aem-hero-height: min(30vh, 300px);
	}

	.aem-public .aem-hero-inner {
		padding-block: clamp(20px, 5vw, 32px);
	}

	/*
	 * The trail is the first thing in the band and the least important
	 * line in it, so on a phone it gives its space back before anything
	 * else does. Reducing the gaps is what keeps the copy inside 30vh
	 * instead of the band growing to hold it.
	 */
	.aem-public .aem-hero .aem-breadcrumbs {
		margin-bottom: var(--aem-space-4);
	}

	.aem-public .aem-hero-copy > * + * {
		margin-top: var(--aem-space-3);
	}

	.aem-public .aem-hero-backdrop::after {
		background: linear-gradient(
			180deg,
			rgb(var(--aem-surface-rgb) / 0.28) 0%,
			rgb(var(--aem-surface-rgb) / 0.62) 55%,
			rgb(var(--aem-surface-rgb) / 0.86) 100%
		);
	}

	.aem-public .aem-hero.has-backdrop .aem-hero-inner::before {
		background: rgb(var(--aem-surface-rgb) / 0.42);
	}

	/* The facts of a band wrap as rows, never as one impossible line. */
	.aem-public .aem-fact-row {
		gap: var(--aem-space-2) var(--aem-space-4);
	}

	.aem-public .aem-fact-status {
		margin-inline-start: 0;
	}
}

/* ====================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
	.aem-public .aem-card,
	.aem-public .aem-card-media img,
	.aem-public .aem-button,
	.aem-public .aem-button-arrow,
	.aem-public .aem-filter,
	.aem-public .aem-link-arrow .aem-icon,
	.aem-public .aem-gallery-item img,
	.aem-public .aem-sponsor,
	.aem-public.aem-agenda .aem-session,
	.aem-public .aem-agenda .aem-session,
	.aem-public .aem-nav-card,
	.aem-public .aem-nav-chevron {
		transition: none;
	}

	.aem-public .aem-card:hover,
	.aem-public .aem-card:hover .aem-card-media img,
	.aem-public .aem-gallery-item:hover img,
	.aem-public .aem-nav-card:hover {
		transform: none;
	}
}