/* ============================================================
   Dupixent Presentations — main stylesheet
   Order: tokens > fonts > base > header > hero > cards >
          newsletter > ISI > footer > single > 404
   Values derived from the design handoff exports (Home/single).
   ============================================================ */

/* ===== Tokens ===== */
:root {
	/* Brand */
	--dpx-teal: #006E69;        /* rgb(0,110,105)  primary */
	--dpx-green: #009B78;       /* rgb(0,155,120) */
	--dpx-lime: #97CC00;        /* rgb(151,204,0) */
	--dpx-green-dark: #1D3B00;  /* rgb(29,59,0)  text on lime */
	--dpx-accent: #FF9933;      /* rgb(255,153,51) */

	/* Hover variants: base brand color darkened ~15%. */
	--dpx-teal-hover: color-mix(in srgb, var(--dpx-teal) 85%, black);
	--dpx-green-hover: color-mix(in srgb, var(--dpx-green) 85%, black);
	--dpx-lime-hover: color-mix(in srgb, var(--dpx-lime) 85%, black);
	--dpx-accent-hover: color-mix(in srgb, var(--dpx-accent) 85%, black);

	/* Ink / neutrals */
	--dpx-ink: #1F1F1F;         /* rgb(31,31,31)  body headings */
	--dpx-ink-2: #3A3A3A;       /* rgb(58,58,58)  body copy */
	--dpx-ink-3: #444;          /* rgb(68,68,68)  meta text */
	--dpx-gray: #555;
	--dpx-gray-2: #666;
	--dpx-gray-3: #888;
	--dpx-gray-4: #777;         /* rgb(119,119,119) speaker org */
	--dpx-gray-5: #8A8A8A;      /* rgb(138,138,138) calendar card label */
	--dpx-line: #DDD;           /* rgb(221,221,221) hairlines */
	--dpx-line-2: #ECECEC;      /* rgb(236,236,236) speaker card border */
	--dpx-line-3: #E3E0D8;      /* rgb(227,224,216) calendar card border */
	--dpx-line-4: #E8E6DF;      /* rgb(232,230,223) ISI section top rule */
	--dpx-line-5: #D8D6CF;      /* rgb(216,214,207) footer legal rule */
	--dpx-line-6: #EAEAEA;      /* rgb(234,234,234) featured card divider */

	/* Surfaces */
	--dpx-white: #FFF;
	--dpx-surface: #FAFAF7;     /* rgb(250,250,247) off-white */
	--dpx-surface-2: #ECEBE7;   /* rgb(236,235,231) */
	--dpx-surface-3: #F0EEE9;   /* rgb(240,238,233) single mobile body */
	--dpx-mint: #E6EFE9;        /* rgb(230,239,233) pale green */

	/* Type */
	--dpx-font-body: 'Lato', Arial, sans-serif;
	--dpx-font-display: 'Oswald', Arial, sans-serif;

	--dpx-fs-h1: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);   /* desktop 44px */
	--dpx-fs-h2: clamp(1.5rem, 0.9rem + 1.9vw, 2.1875rem); /* desktop 35px */
	--dpx-fs-h3: 1.0625rem;     /* 17px */
	--dpx-fs-body: 1.125rem;    /* 18px */
	--dpx-fs-sm: 0.875rem;      /* 14px */
	--dpx-fs-xs: 0.8125rem;     /* 13px */

	--dpx-lh-body: 1.65;
	--dpx-lh-tight: 1.1;

	/* Layout */
	--dpx-maxw: 1060px;
	--dpx-gutter: clamp(1.375rem, 4vw, 2.5rem); /* 22px floor per mobile refs */

	/* Radii + elevation */
	--dpx-radius: 12px;
	--dpx-radius-sm: 8px;
	--dpx-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	--dpx-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
	--dpx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
	--dpx-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.05);
	--dpx-shadow-photo: 0 26px 44px rgba(0, 0, 0, 0.4);
	--dpx-photo-bg: #1A1A1A;    /* rgb(26,26,26) hero portrait backing */
}

/* ===== Fonts ===== */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/lato-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700.woff2') format('woff2');
}
/* The export embedded a single Oswald face; declare it across the
   weight range it is used at so no faux weights are synthesized. */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/oswald.woff2') format('woff2');
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

/* In-page anchors (e.g. the hero "GET NOTIFIED" -> newsletter). */
html { scroll-behavior: smooth; }

body {
	/* Page-level container: full-bleed sections, header, and footer take
	   their mobile overrides from `@container page` (an element can't
	   query its own container). */
	container: page / inline-size;
	margin: 0;
	font-family: var(--dpx-font-body);
	font-size: var(--dpx-fs-body);
	line-height: var(--dpx-lh-body);
	color: var(--dpx-ink-2);
	background: var(--dpx-white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { color: var(--dpx-ink); margin: 0; }

p { margin: 0; }

.dpx-container {
	width: min(100% - 2 * var(--dpx-gutter), var(--dpx-maxw));
	margin-inline: auto;
}

/* Visually-hidden but accessible (WP convention) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

/* Skip link (and any focusable .screen-reader-text) becomes visible on focus. */
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14px 22px;
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 100000;
	background: var(--dpx-white);
	color: var(--dpx-teal);
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-sm);
	font-weight: 600;
	letter-spacing: 1px;
	box-shadow: var(--dpx-shadow);
	text-decoration: none;
}

/* ===== Header ===== */
.dpx-header {
	background: var(--dpx-teal);
}

.dpx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 10px;
}

.dpx-header__logo {
	display: inline-flex;
}

.dpx-header__logo img {
	height: clamp(44px, 6.64vw, 85px);
	width: auto;
}

@container page (max-width: 640px) {
	.dpx-header__inner {
		padding-block: 14px;
	}
}

/* ===== Shared meta rows (icon + text) ===== */
.dpx-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dpx-meta__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dpx-fs-sm);
	color: var(--dpx-ink-3);
}

.dpx-icon {
	flex-shrink: 0;
}

/* ===== Hero ===== */
.dpx-hero {
	container: hero / inline-size;
	background: var(--dpx-mint);
	/* Taller than the export's 56/64: balances the 120px header band. */
	padding-block: clamp(2.5rem, 6.25vw, 5rem) clamp(3rem, 6.88vw, 5.5rem);
}

.dpx-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 3.13vw, 2.5rem);
}

.dpx-hero__intro {
	flex: 1 1 360px;
	max-width: 464px;
}

.dpx-hero__title {
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-h1);
	font-weight: 600;
	line-height: var(--dpx-lh-tight);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--dpx-teal);
	margin: 0;
}

.dpx-hero__rule {
	display: block;
	width: 140px;
	height: 4px;
	margin-block: 20px;
	background: var(--dpx-lime);
}

.dpx-hero__lead {
	max-width: 440px;
	margin-bottom: 15px;
	color: var(--dpx-ink-2);
}

/* ===== Featured presentation card ===== */
.dpx-featured {
	position: relative;
	overflow: hidden;
	flex: 1 1 460px;
	max-width: 556px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--dpx-white);
	box-shadow: var(--dpx-shadow);
	/* Desktop 32/36/40, ramping to ~22/20/28 on phones. */
	padding:
		clamp(1.375rem, 0.89rem + 1.65vw, 2rem)
		clamp(1.25rem, 0.48rem + 2.6vw, 2.25rem)
		clamp(1.75rem, 1.17rem + 1.95vw, 2.5rem);
}

.dpx-featured__badge {
	margin: 0;
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-xs);
	font-weight: 600;
	line-height: 1.54;
	letter-spacing: 1.5px;
	color: var(--dpx-teal);
}

.dpx-featured__title {
	margin: 14px 0 21.58px;
	max-width: 460px;
	font-size: var(--dpx-fs-h2);
	font-weight: 800;
	line-height: 1.25;
	text-wrap: pretty;
	color: var(--dpx-ink);
}

.dpx-featured__meta {
	gap: 10px;
	max-width: 380px;
}

.dpx-featured__meta .dpx-meta__item {
	gap: 10px;
	line-height: 1.21;
}

.dpx-featured__footer {
	width: 284px;
	max-width: 100%;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 2px solid var(--dpx-line-6);
}

.dpx-featured__cta {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-xs);
	font-weight: 600;
	line-height: 1.54;
	letter-spacing: 1px;
	color: var(--dpx-teal);
	transition: color 0.15s ease;
}

.dpx-featured__cta .dpx-icon {
	transition: transform 0.15s ease;
}

.dpx-featured__cta:hover,
.dpx-featured__cta:focus-visible {
	color: var(--dpx-teal-hover);
}

.dpx-featured__cta:hover .dpx-icon,
.dpx-featured__cta:focus-visible .dpx-icon {
	transform: translateX(3px);
}

/* Empty state: "coming soon" card when nothing is upcoming. */
.dpx-featured__copy {
	margin: 0;
	max-width: 380px;
	color: var(--dpx-ink-2);
}

.dpx-featured--empty .dpx-featured__title {
	margin-bottom: 12px;
}

/* The copy paragraph runs wider than the meta rows the art was sized
   around; keep the chevrons low so they only rise into the CTA row. */
.dpx-featured--empty .dpx-featured__img {
	width: 200px;
	right: -60px;
	bottom: -70px;
}

/* Chevron art clipped by the card's bottom-right corner. */
.dpx-featured__img {
	position: absolute;
	right: -49px;
	bottom: -84px;
	width: 264px;
	height: auto;
	margin: 0;
	pointer-events: none;
}

/* Mobile hero + featured card, per the Home_mobile reference (390px). */
@container page (max-width: 640px) {
	.dpx-hero {
		padding-block: 52px 56px;
	}

	.dpx-hero__inner {
		gap: 44px;
	}

	.dpx-hero__title {
		font-size: 1.875rem; /* 30px */
		line-height: 1.1;
	}

	.dpx-hero__rule {
		width: 100px;
		margin-block: 16px;
	}
}

@container hero (max-width: 640px) {
	.dpx-featured {
		padding: 28px 24px 34px;
	}

	.dpx-featured__badge {
		font-size: 0.75rem; /* 12px */
	}

	.dpx-featured__title {
		margin: 14px 0 18px;
		font-size: 1.1875rem; /* 19px */
		line-height: 1.3;
	}

	.dpx-featured__meta {
		gap: 8px;
	}

	.dpx-featured__meta .dpx-meta__item {
		font-size: 0.8125rem; /* 13px */
	}

	/* Right margin keeps the CTA clear of the chevron art pinned in the
	   card's bottom-right corner. */
	.dpx-featured__footer {
		margin-top: 18px;
		margin-right: 110px;
		padding-top: 14px;
	}

	.dpx-featured__img {
		width: 200px;
		right: -45px;
		bottom: -40px;
	}

	.dpx-featured--empty .dpx-featured__img {
		width: 150px;
		right: -40px;
		bottom: -60px;
	}
}

/* ===== Upcoming presentations ===== */
.dpx-presentations {
	background: var(--dpx-surface);
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
}

.dpx-presentations__title {
	font-family: var(--dpx-font-display);
	font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.1875rem); /* desktop 35px */
	font-weight: 600;
	line-height: 1.47;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dpx-teal);
	margin: 0;
}

.dpx-presentations__rule {
	display: block;
	width: 64px;
	height: 4px;
	margin: 8px 0 32px;
	background: var(--dpx-lime);
}

.dpx-presentations__list {
	container: cards / inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@container page (max-width: 640px) {
	.dpx-presentations {
		padding-block: 56px 64px;
	}

	.dpx-presentations__title {
		font-size: 1.5rem; /* 24px */
	}

	.dpx-presentations__rule {
		margin: 8px 0 36px;
	}

	.dpx-presentations__list {
		gap: 20px;
	}
}

/* Empty state: shown instead of the list when nothing is upcoming. */
.dpx-presentations__empty {
	max-width: 560px;
	color: var(--dpx-ink-2);
}

.dpx-presentations__empty a {
	color: var(--dpx-teal);
	text-decoration: underline;
}

.dpx-card {
	display: grid;
	/* Date strip: 110px on a full-width list, easing to 90px as it narrows. */
	grid-template-columns: clamp(90px, 12cqi, 110px) 1fr auto;
	align-items: stretch;
	background: var(--dpx-white);
	box-shadow: var(--dpx-shadow-sm);
	overflow: hidden;
}

.dpx-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 8px;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	letter-spacing: 1px;
}

/* Date strips and CTAs cycle teal -> green -> orange down the list. */
.dpx-card:nth-child(3n+2) .dpx-card__date,
.dpx-card:nth-child(3n+2) .dpx-card__cta {
	background: var(--dpx-green);
}

.dpx-card:nth-child(3n) .dpx-card__date,
.dpx-card:nth-child(3n) .dpx-card__cta {
	background: var(--dpx-accent);
}

/* Mobile-only date label above the title (replaces the date strip there);
   follows the same color cycle. */
.dpx-card__datelabel {
	display: none;
	margin: 0;
	font-family: var(--dpx-font-display);
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--dpx-teal);
}

.dpx-card:nth-child(3n+2) .dpx-card__datelabel {
	color: var(--dpx-green);
}

.dpx-card:nth-child(3n) .dpx-card__datelabel {
	color: var(--dpx-accent);
}

.dpx-card__month {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
}

.dpx-card__day {
	font-size: 2.375rem; /* 38px */
	font-weight: 600;
	line-height: 1;
}

.dpx-card__dow {
	margin-top: 4px;
	font-size: 0.8125rem;
	line-height: 1.54;
	text-transform: uppercase;
	opacity: 0.9;
}

.dpx-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px clamp(1rem, 0.53rem + 2.1cqi, 1.75rem); /* 28px inline on desktop */
}

.dpx-card__title {
	margin: 0;
	font-size: var(--dpx-fs-h3);
	font-weight: 700;
	line-height: 1.35;
	color: var(--dpx-ink);
}

.dpx-card__meta {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.dpx-card__meta .dpx-meta__item {
	position: relative;
	line-height: 1.21;
	color: var(--dpx-gray-2);
}

/* Hairline dividers centered in the gaps between meta items. */
.dpx-card__meta .dpx-meta__item + .dpx-meta__item::before {
	content: "";
	position: absolute;
	left: -12.5px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: var(--dpx-line);
}

.dpx-card__speaker {
	font-size: var(--dpx-fs-xs);
	line-height: 1.23;
	color: var(--dpx-gray-2);
}

.dpx-card__action {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(1rem, 2vw, 1.5rem);
}

.dpx-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
	padding: 14px 22px;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-sm);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1px;
	transition: background-color 0.15s ease;
}

.dpx-card__cta:hover,
.dpx-card__cta:focus-visible {
	background: var(--dpx-teal-hover);
}

.dpx-card:nth-child(3n+2) .dpx-card__cta:hover,
.dpx-card:nth-child(3n+2) .dpx-card__cta:focus-visible {
	background: var(--dpx-green-hover);
}

.dpx-card:nth-child(3n) .dpx-card__cta:hover,
.dpx-card:nth-child(3n) .dpx-card__cta:focus-visible {
	background: var(--dpx-accent-hover);
}

/* Mobile card, per the Home_mobile reference: the date strip becomes a
   6px left rail + colored date label, and the CTA is a full-width colored
   button. (589px list width ≈ the old 640px viewport snap with page
   gutters removed.) */
@container cards (max-width: 589px) {
	.dpx-card {
		display: block;
		padding: 22px 22px 24px;
		border-left: 6px solid var(--dpx-teal);
	}

	.dpx-card:nth-child(3n+2) {
		border-left-color: var(--dpx-green);
	}

	.dpx-card:nth-child(3n) {
		border-left-color: var(--dpx-accent);
	}

	.dpx-card__date {
		display: none;
	}

	.dpx-card__datelabel {
		display: block;
	}

	.dpx-card__body {
		padding: 0;
	}

	.dpx-card__title {
		font-size: 0.9375rem; /* 15px */
		line-height: 1.3;
	}

	.dpx-card__meta {
		flex-direction: column;
		gap: 4px;
	}

	/* The date lives in the label above the title here. */
	.dpx-card__meta .dpx-meta__item--date {
		display: none;
	}

	.dpx-card__meta .dpx-meta__item {
		font-size: 0.78125rem; /* 12.5px */
	}

	.dpx-card__meta .dpx-meta__item + .dpx-meta__item::before {
		content: none;
	}

	.dpx-card__speaker {
		font-size: 0.75rem; /* 12px */
	}

	.dpx-card__action {
		display: block;
		padding: 0;
		margin-top: 14px;
	}

	.dpx-card__cta {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

/* ===== Newsletter ===== */
.dpx-newsletter {
	container: newsletter / inline-size;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	padding-block: clamp(1.75rem, 1.36rem + 1.3vw, 2.25rem); /* desktop 36px */
}

.dpx-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
}

.dpx-newsletter__intro {
	display: flex;
	align-items: center;
	/* One continuous ramp: 24px at ≤768px up to 60px at ≥1280px (replaces
	   the old 768px snap). */
	gap: clamp(1.5rem, 7vw - 30px, 3.75rem);
}

.dpx-newsletter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border: 1px solid color-mix(in srgb, var(--dpx-white) 60%, transparent);
	border-radius: 50%;
}

/* The copy's fixed two-line break is desktop-only; let it wrap. */
@container newsletter (max-width: 768px) {
	.dpx-newsletter__copy br {
		display: none;
	}
}

/* Mobile newsletter, per the Single_Mobile reference: icon + heading on
   one row, copy full width below (the text wrapper dissolves via
   display: contents), stacked full-width input and button. */
@container newsletter (max-width: 640px) {
	.dpx-newsletter__inner {
		display: block;
	}

	.dpx-newsletter__intro {
		flex-wrap: wrap;
		gap: 20px 16px;
	}

	.dpx-newsletter__text {
		display: contents;
	}

	.dpx-newsletter__icon {
		width: 48px;
		height: 48px;
	}

	.dpx-newsletter__icon .dpx-icon {
		width: 20px;
		height: 20px;
	}

	.dpx-newsletter__title {
		flex: 1;
		margin: 0;
		font-family: var(--dpx-font-body);
		font-size: 0.9375rem; /* 15px */
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	.dpx-newsletter__copy {
		flex-basis: 100%;
		font-size: 0.84375rem; /* 13.5px */
	}

	.dpx-newsletter__aside {
		margin-top: 20px;
	}

	.dpx-newsletter__form {
		flex-direction: column;
		gap: 10px;
	}

	.dpx-newsletter__input {
		width: 100%;
		height: 44px;
	}

	.dpx-newsletter__btn {
		width: 100%;
		height: 44px;
		padding: 0 22px;
		font-family: var(--dpx-font-body);
		font-size: 0.8125rem; /* 13px */
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.dpx-newsletter__note {
		margin-top: 12px;
	}
}

.dpx-newsletter__title {
	margin: 0 0 6px;
	font-family: var(--dpx-font-display);
	font-size: 1.375rem; /* 22px */
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 1px;
	color: var(--dpx-white);
}

.dpx-newsletter__copy {
	margin: 0;
	font-size: var(--dpx-fs-sm);
	line-height: 1.45;
	color: color-mix(in srgb, var(--dpx-white) 88%, transparent);
}

.dpx-newsletter__form {
	display: flex;
	flex-wrap: wrap;
}

.dpx-newsletter__input {
	width: 280px;
	max-width: 100%;
	padding: 12px 16px;
	border: 0;
	background: var(--dpx-white);
	color: var(--dpx-ink);
	font-family: var(--dpx-font-body);
	font-size: var(--dpx-fs-sm);
}

.dpx-newsletter__btn {
	padding: 12px 28px;
	border: 0;
	background: var(--dpx-lime);
	color: var(--dpx-green-dark);
	font-family: var(--dpx-font-display);
	font-size: 0.9375rem; /* 15px */
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dpx-newsletter__btn:hover,
.dpx-newsletter__btn:focus-visible {
	background: var(--dpx-lime-hover);
}

.dpx-newsletter__note {
	margin: 8px 0 0;
	font-size: 0.75rem; /* 12px */
	color: color-mix(in srgb, var(--dpx-white) 70%, transparent);
}

/* ===== Indications + ISI (site-wide footer block) ===== */
.dpx-isi {
	background: var(--dpx-white);
	border-top: 1px solid var(--dpx-line-4);
	padding-block: clamp(2rem, 4.07vw, 3.25rem) clamp(2.5rem, 4.69vw, 3.75rem);
	color: var(--dpx-ink);
}

/* Brief variant: home page band between the hero and the upcoming list. */
.dpx-isi--top {
	border-top: 0;
	padding-block: clamp(1.75rem, 3.13vw, 2.5rem) clamp(2rem, 3.44vw, 2.75rem); /* desktop 40/44 */
}

.dpx-isi--top .dpx-isi__see {
	margin-top: 12px;
}

/* Full block only: the ISI heading sits 14px under the indications
   (collapses with the preceding paragraph's 6px bottom margin). */
.dpx-isi--full .dpx-isi__body > h2:not(:first-child) {
	margin-top: 14px;
}

/* The band's padding closes the block; drop the last item's margin. */
.dpx-isi__body > :last-child {
	margin-bottom: 0;
}

/* Content arrives as editor markup (h2/h3/p/ul + a few utility classes). */
.dpx-isi__body h2,
.dpx-isi__body h3 {
	font-family: var(--dpx-font-display);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--dpx-teal);
	margin: 0 0 6px;
}

.dpx-isi__body h3 {
	margin-bottom: 1px;
}

.dpx-isi__body p,
.dpx-isi__body li {
	font-size: var(--dpx-fs-xs); /* 13px */
	line-height: 1.45;
	margin: 0 0 6px;
	color: var(--dpx-ink);
}

.dpx-isi__body a {
	color: inherit;
	text-decoration: underline;
}

.dpx-isi strong {
	font-weight: 700;
	color: var(--dpx-ink);
}

.dpx-isi u {
	text-decoration: underline;
}

.dpx-isi__lead {
	font-family: var(--dpx-font-display);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--dpx-teal);
}

.dpx-isi__strong-block {
	display: block;
}

/* Bullet lists sit tighter than the paragraph rhythm in the design. */
.dpx-isi__body ul {
	list-style: none;
	margin: -5px 0 4px;
	padding: 0;
}

.dpx-isi__body h3 + ul {
	margin-top: -1px;
}

.dpx-isi__body li {
	position: relative;
	padding-left: 1em;
	margin-bottom: 4px;
}

.dpx-isi__body li::before {
	content: "•";
	position: absolute;
	left: 0;
}

/* Needs the extra specificity to beat .dpx-isi__body p. */
.dpx-isi__body p.dpx-isi__pi {
	font-size: 0.78125rem; /* 12.5px */
	line-height: 1.45;
	margin: -1px 0 0;
}

.dpx-isi__pi-link {
	text-decoration: underline;
}

/* Mobile ISI, per the references: tighter band, smaller headings, h3
   subheads switch to Lato 800 caps, and bullet lists read as plain
   paragraph blocks. */
@container page (max-width: 640px) {
	.dpx-newsletter {
		padding-block: 40px 44px;
	}

	.dpx-isi {
		padding-block: 40px 48px;
	}

	.dpx-isi--top {
		padding-block: 36px 40px;
	}

	.dpx-isi__body h2 {
		font-size: 0.8125rem; /* 13px */
	}

	.dpx-isi__body h3 {
		font-family: var(--dpx-font-body);
		font-size: 0.78125rem; /* 12.5px */
		font-weight: 800;
		letter-spacing: 1.5px;
	}

	.dpx-isi__body ul {
		margin: 0 0 6px;
	}

	.dpx-isi__body li {
		padding-left: 0;
		margin-bottom: 6px;
	}

	.dpx-isi__body li::before {
		content: none;
	}
}

/* ===== Footer (brand + legal band) ===== */
.dpx-footer {
	background: var(--dpx-surface-2);
	padding-block: 32px 48px;
}

.dpx-footer__brands {
	display: flex;
	align-items: center;
	gap: 18px;
}

.dpx-footer__brands img {
	width: auto;
}

.dpx-footer__sep {
	width: 1px;
	height: 22px;
	background: var(--dpx-ink);
}

/* Footer menu (WP `footer` location; renders only when assigned):
   horizontal row on desktop, stacked list on mobile. */
.dpx-footer__nav {
	margin-top: 24px;
}

.dpx-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.dpx-footer__menu a {
	font-size: var(--dpx-fs-xs);
	color: var(--dpx-ink-3);
}

.dpx-footer__menu a:hover,
.dpx-footer__menu a:focus-visible {
	color: var(--dpx-teal);
	text-decoration: underline;
}

.dpx-footer__legal {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--dpx-line-5);
}

@container page (max-width: 640px) {
	.dpx-footer {
		padding-block: 32px 40px;
	}

	.dpx-footer__nav {
		margin-top: 32px;
	}

	.dpx-footer__menu {
		flex-direction: column;
		gap: 10px;
	}

	.dpx-footer__legal {
		margin-top: 28px;
		padding-top: 0;
		border-top: 0;
	}

	.dpx-footer__legal p {
		font-size: 0.75rem; /* 12px */
	}
}

.dpx-footer__legal p {
	margin: 0;
	font-size: var(--dpx-fs-xs); /* 13px */
	line-height: 1.6;
	color: var(--dpx-gray);
}

.dpx-footer__legal p.dpx-footer__partners {
	margin-top: 14px;
}

.dpx-footer__legal a {
	color: var(--dpx-teal);
	text-decoration: underline;
}

/* ===== Single presentation ===== */
.dpx-single__hero {
	container: single-hero / inline-size;
	position: relative;
	overflow: hidden;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	padding-block: clamp(3.25rem, 6.6vw, 5.25rem) clamp(3.25rem, 7.6vw, 6.125rem);
	/* Short-titled heroes: tall enough that the portrait circle + ring
	   (308px from the content top, offset -2px) gets the same space below
	   as the padding gives it above. */
	min-height: calc(2 * clamp(3.25rem, 6.6vw, 5.25rem) + 306px);
}

/* No banner image: drop the portrait's reserved height and let the
   title span the full width. The h1 and meta always render. */
.dpx-single__hero--noart {
	min-height: 0;
}

.dpx-single__hero--noart .dpx-single__hero-inner {
	grid-template-columns: 1fr;
}

/* Oversized brand chevrons, tilted, behind the hero content. */
.dpx-single__deco {
	position: absolute;
	top: -314px;
	right: -240px;
	width: 912px;
	max-width: none;
	transform: rotate(-8deg);
	opacity: 0.42;
	z-index: 0;
	pointer-events: none;
}

.dpx-single__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
}

/* Portrait circle hangs off the right column, ring offset behind it. */
.dpx-single__art {
	position: absolute;
	top: -2px;
	right: 60px;
	width: 300px;
	height: 300px;
}

.dpx-single__art::before {
	content: '';
	position: absolute;
	inset: 10px -10px -10px 10px;
	border: 3px solid var(--dpx-lime);
	border-radius: 50%;
}

.dpx-single__photo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dpx-photo-bg);
	box-shadow: var(--dpx-shadow-photo);
}

.dpx-single__photo img {
	position: absolute;
	inset: -12px;
	width: calc(100% + 24px);
	height: calc(100% + 24px);
	object-fit: cover;
}

.dpx-single__title {
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem); /* desktop 48px */
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

.dpx-single__meta {
	margin-top: 28px;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px 28px;
}

.dpx-single__meta .dpx-meta__item {
	gap: 10px;
	font-size: var(--dpx-fs-body);
	line-height: 1.2;
	color: color-mix(in srgb, var(--dpx-white) 92%, transparent);
}

.dpx-single__meta .dpx-meta__item--wide {
	flex-basis: 100%;
}

.dpx-single__body {
	container: single-body / inline-size;
	background: var(--dpx-surface);
	padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 2.5rem);
}

.dpx-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: start;
}

.dpx-single__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.dpx-single__label {
	margin: 0 0 16px;
	font-family: var(--dpx-font-display);
	font-size: clamp(1.25rem, 0.95rem + 0.95vw, 1.5rem); /* desktop 24px */
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dpx-teal);
}

.dpx-speaker {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	background: var(--dpx-white);
	border: 1px solid var(--dpx-line-2);
	box-shadow: var(--dpx-shadow-md);
}

.dpx-speaker__photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dpx-mint);
}

.dpx-speaker__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dpx-speaker__name {
	margin: 0;
	font-weight: 700;
	line-height: 1.45;
	color: var(--dpx-ink);
}

.dpx-speaker__role,
.dpx-speaker__org {
	margin: 0;
	font-size: var(--dpx-fs-sm);
	line-height: 1.45;
}

.dpx-speaker__role {
	color: var(--dpx-teal);
}

.dpx-speaker__org {
	color: var(--dpx-gray-4);
}

.dpx-single__about {
	color: var(--dpx-ink-2);
	line-height: 1.7;
}

.dpx-single__about > :first-child { margin-top: 0; }
.dpx-single__about > :last-child { margin-bottom: 0; }
.dpx-single__about p + p { margin-top: 1em; }

.dpx-calendar {
	padding: clamp(1.25rem, 0.96rem + 1vw, 1.625rem); /* desktop 26px */
	background: var(--dpx-white);
	border: 1px solid var(--dpx-line-3);
	box-shadow: var(--dpx-shadow-xs);
}

.dpx-calendar__label {
	margin: 0 0 14px;
	font-size: 0.6875rem; /* 11px */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--dpx-gray-5);
}

.dpx-calendar__date {
	margin: 0;
	font-size: 1.1875rem; /* 19px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--dpx-ink);
}

.dpx-calendar__when {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	font-size: var(--dpx-fs-xs);
	line-height: 1.25;
	color: var(--dpx-gray);
}

/* Disclosure wrapper: the menu is positioned against this. */
.dpx-calendar__picker {
	position: relative;
	margin-top: 36px;
}

.dpx-calendar__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	border: 0;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-body);
	font-size: var(--dpx-fs-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dpx-calendar__btn:hover,
.dpx-calendar__btn:focus-visible {
	background: var(--dpx-teal-hover);
}

/* Simple variant: the button is a bare .ics download link. */
.dpx-calendar__btn--solo {
	margin-top: 36px;
}

.dpx-calendar__caret {
	display: inline-flex;
	transform: rotate(90deg);
	transition: transform 0.15s ease;
}

.dpx-calendar__btn[aria-expanded="true"] .dpx-calendar__caret {
	transform: rotate(-90deg);
}

.dpx-calendar__menu {
	list-style: none;
	margin: 8px 0 0;
	padding: 6px;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	background: var(--dpx-white);
	border: 1px solid var(--dpx-line-3);
	box-shadow: var(--dpx-shadow);
}

.dpx-calendar__menu[hidden] {
	display: none;
}

.dpx-calendar__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font-size: var(--dpx-fs-sm);
	color: var(--dpx-ink-2);
}

.dpx-calendar__option:hover,
.dpx-calendar__option:focus-visible {
	background: var(--dpx-mint);
	color: var(--dpx-teal);
}

.dpx-single__back {
	margin-top: clamp(2.5rem, 16.1vw, 12.875rem);
}

/* "Details coming soon" note (per-presentation toggle). */
.dpx-single__soon-copy {
	margin: 0;
	max-width: 560px;
	color: var(--dpx-ink-2);
}

/* Without the details grid the back link doesn't need the tall gap. */
.dpx-single__body--soon .dpx-single__back {
	margin-top: 40px;
}

.dpx-single__back-link {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	transition: background-color 0.15s ease;
}

.dpx-single__back-link:hover,
.dpx-single__back-link:focus-visible {
	background: var(--dpx-teal-hover);
}

.dpx-single__back-link .dpx-icon {
	transform: scaleX(-1);
}

/* Mobile-only back link at the top of the hero. */
.dpx-single__back-top {
	display: none;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--dpx-font-display);
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	letter-spacing: 2px;
	color: color-mix(in srgb, var(--dpx-white) 78%, transparent);
}

.dpx-single__back-top:hover,
.dpx-single__back-top:focus-visible {
	color: var(--dpx-white);
}

.dpx-single__back-top-caret {
	font-size: 1.0625rem; /* 17px */
	line-height: 1;
}

/* Mobile-only "view all" button after the calendar card. */
.dpx-single__viewall {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 28px 22px 0;
	padding: 9px 18px;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	letter-spacing: 1px;
	transition: background-color 0.15s ease;
}

.dpx-single__viewall:hover,
.dpx-single__viewall:focus-visible {
	background: var(--dpx-teal-hover);
}

/* Mobile single page, per the Single_Mobile reference: compact hero with
   top back link and no portrait; unboxed speaker on the warm surface;
   view-all button replaces the bottom back link. */
@container page (max-width: 640px) {
	.dpx-single__hero {
		min-height: 0;
		padding-block: 24px 44px;
	}

	/* On the compact hero, scale the deco to a soft wash weighted to the
	   top-right corner, per the reference. */
	.dpx-single__deco {
		width: 720px;
		top: -260px;
		right: -260px;
		opacity: 0.28;
	}

	.dpx-single__art {
		display: none;
	}

	.dpx-single__back-top {
		display: inline-flex;
	}

	.dpx-single__title {
		font-size: 1.875rem; /* 30px */
	}

	.dpx-single__meta {
		margin-top: 20px;
		flex-direction: column;
		gap: 10px;
	}

	.dpx-single__meta .dpx-meta__item {
		font-size: 0.875rem; /* 14px */
	}

	.dpx-single__body {
		background: var(--dpx-surface-3);
		padding-block: 28px 32px;
	}

	.dpx-single__grid,
	.dpx-single__main {
		gap: 32px;
	}

	.dpx-single__label {
		margin-bottom: 16px;
		font-family: var(--dpx-font-body);
		font-size: 0.8125rem; /* 13px */
		font-weight: 900;
		letter-spacing: 1.8px;
	}

	.dpx-speaker {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		gap: 16px;
		align-items: flex-start;
	}

	.dpx-speaker__photo {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
	}

	.dpx-speaker__name {
		font-size: 0.90625rem; /* 14.5px */
	}

	.dpx-speaker__role,
	.dpx-speaker__org {
		font-size: 0.84375rem; /* 13.5px */
	}

	.dpx-speaker__org {
		color: var(--dpx-gray-3);
	}

	.dpx-single__about {
		font-size: 0.875rem; /* 14px */
	}

	.dpx-calendar {
		padding: 22px 22px 24px;
	}

	.dpx-single__viewall {
		display: flex;
	}

	.dpx-single__back {
		display: none;
	}
}

/* Hero collapses to a single column; the portrait stops hanging and flows
   inline above the title. (Full-bleed section: 900px container == the old
   900px viewport snap.) */
@container single-hero (max-width: 900px) {
	.dpx-single__hero-inner {
		grid-template-columns: 1fr;
	}

	.dpx-single__art {
		position: relative;
		top: 0;
		right: 0;
		width: 220px;
		height: 220px;
		margin-bottom: 28px;
	}
}

@container single-body (max-width: 768px) {
	.dpx-single__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Holding (coming soon) page ===== */
.dpx-holding {
	display: flex;
	align-items: center;
	background: var(--dpx-mint);
	/* Fill the viewport below the header so the page has no dead end. */
	min-height: calc(100vh - 105px);
	padding-block: clamp(4rem, 10vw, 8rem);
	text-align: center;
}

.dpx-holding__title {
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-h1);
	font-weight: 600;
	line-height: var(--dpx-lh-tight);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dpx-teal);
	margin: 0;
}

.dpx-holding__rule {
	display: block;
	width: 100px;
	height: 4px;
	margin: 20px auto 0;
	background: var(--dpx-lime);
}

/* ===== 404 ===== */
.dpx-notfound {
	background: var(--dpx-surface);
	padding-block: clamp(5.5rem, 14vw, 12.5rem);
}

.dpx-notfound__title {
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-h1);
	font-weight: 600;
	line-height: var(--dpx-lh-tight);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--dpx-teal);
	margin: 0;
}

.dpx-notfound__rule {
	display: block;
	width: 64px;
	height: 4px;
	margin: 12px 0 20px;
	background: var(--dpx-lime);
}

.dpx-notfound__copy {
	max-width: 440px;
	color: var(--dpx-ink-2);
}

/* Mirrors the single template's back-link button. */
.dpx-notfound__cta {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 14px 22px;
	background: var(--dpx-teal);
	color: var(--dpx-white);
	font-family: var(--dpx-font-display);
	font-size: var(--dpx-fs-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	transition: background-color 0.15s ease;
}

.dpx-notfound__cta:hover,
.dpx-notfound__cta:focus-visible {
	background: var(--dpx-teal-hover);
}

.dpx-notfound__cta .dpx-icon {
	transform: scaleX(-1);
}