/**
 * Event landing page-tree — the thin CSS layer.
 *
 * MOST of the chrome is Tailwind utilities in the markup (library/event-page.php,
 * page-event.php — both listed in ampeco-base's @source globs, so the utilities
 * compile into dist/ampeco-base.css). This file carries ONLY what utilities
 * cannot express:
 *
 *   1. rules that style the_content()'s children (`.event-prose > *`) — we do not
 *      author those elements, so there is nowhere to put a class
 *   2. the two brand gradients
 *   3. the pixel-exact logo lockup (absolutely positioned sub-pixel offsets)
 *   4. the mobile swipe strip + its scroll-driven edge fades (a ::-webkit-
 *      scrollbar rule and ::before/::after driven by a JS-toggled class)
 *   5. @view-transition, which has no utility form
 *
 * Every colour is an NDS token — no literal hex except the icnc teal, which is
 * the EVENT's brand colour and deliberately not in the design system.
 * Values are 1:1 with the export's BUILD-NOTES.
 *
 * Scoped under .event-prose / .event-main so nothing leaks into theme chrome.
 */

/* ------------------------------------------------------------------ shell -- */

/*
 * THE STICKY CHAPNAV DEPENDS ON THIS RULE.
 *
 * The FoundationPress fork wraps every page in `#viewport { overflow: hidden }`.
 * That makes #viewport the scroll container for any `position: sticky`
 * descendant, so the chapnav scrolls away with the page instead of pinning —
 * it looks like `position: sticky` simply does not work. `overflow: clip` clips
 * exactly the same way (no horizontal scrollbar) WITHOUT establishing a scroll
 * container, so sticky binds to the window again.
 *
 * `:has()` scopes it to this page-tree only. hpv2 and the Sustainability Report
 * each carry the identical rule in input-base.css; the event tree was missing
 * its copy, which is why the strip never stuck.
 */
#viewport:has(.event-main) {
	overflow: clip;
}

.event-main,
.event-prose {
	background: var(--p-frost-100);   /* #F5FAFF — design page background */
}

.event-prose {
	padding-bottom: var(--spacing-11xl);
	overflow-x: clip;                 /* a stray wide child must not scroll the page */
	/* ...but let a DELIBERATE full-bleed child (the mobile hero) out first. Without
	   this, `clip` cuts at the padding box and the hero can never escape the theme
	   body's gutter. 24px is more than any gutter the theme uses, and still clips a
	   genuinely runaway child before it can scroll the page. */
	overflow-clip-margin: var(--spacing-xxl);
}

/* The content column. These target the_content()'s top-level children, which we
   do not author — so this cannot be a utility. The hero (wider) and the chapnav
   (full-bleed) opt out. */
.event-prose > * {
	max-width: 939px;
	margin-inline: auto;
}

.event-prose > * + * {
	margin-top: var(--spacing-4xl);   /* design: section gap 32 */
}

/* The hero is FULL WIDTH. In the export it is `align-self: stretch` inside a
   container padded `12px 16px 96px` — i.e. it spans the whole page, inset only by
   the container's 16px gutter. (BUILD-NOTES' "full width 1407" is the 1407px
   design CANVAS, not a max-width — capping it there was wrong.)
   The theme's own `body { padding: 0 16px }` already supplies exactly that 16px
   gutter, so the hero adds NO margin of its own — adding one doubles it to 32. */
.event-prose > .event-hero {
	max-width: none;
	margin-top: 0;
	margin-inline: 0;
}

/* The chapnav is FLUSH against the hero — no gap. The export's page container is
   `display:flex; flex-direction:column` with NO `gap` property, so nothing
   separates the hero from the sticky strip; the 32px in BUILD-NOTES is the gap
   BETWEEN CONTENT SECTIONS, not a universal child gap. The generic
   `> * + * { margin-top:32px }` above was adding one here. */
.event-prose > .event-chapnav {
	max-width: none;
	margin-top: 0;
}

.event-prose img,
.event-prose svg,
.event-prose video,
.event-prose iframe {
	max-width: 100%;
}

/* --------------------------------------------------------------- gradients -- */

/* The hero gradient is BESPOKE — verbatim from the export's `#hero` rule. It
   shares its three colours with the DS `ocean deep` token but not its geometry
   (244.219deg vs 223.28deg, and offset stops at 2.49/51.05/99.62% vs 0/50/100%),
   so the token is NOT a substitute: swapping it in visibly rotates the hero.
   The colours are still written as tokens; only the angle and stops are literal.
   The photo layers OVER this as an <img>, exactly as the export does. */
.event-hero {
	background: linear-gradient(
		244.219deg,
		var(--p-primary-500) 2.49%,
		var(--p-primary-700) 51.05%,
		var(--p-raven-500) 99.62%
	);
}

/* Horizontal frost fade behind the pill strip, over a SOLID PLATE.
   No DS gradient token is a horizontal fade-to-transparent, so it is spelled out
   — from the token.

   TWO LAYERS, and the second one is not optional. The export declares
   `linear-gradient(90deg, …frost-300 fade…), linear-gradient(#F5FAFF, #F5FAFF)`:
   the fade rides on an opaque frost-100 plate. Porting only the fade left the
   strip transparent at both edges, which looks right while it sits in flow (there
   is nothing behind it) and breaks the moment it sticks — page content scrolls
   visibly through the bar.

   So the strip is opaque across its whole width AND still fades at the edges: it
   fades to the PAGE colour, not to nothing. */
.event-chapnav {
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--p-frost-300) 0%, transparent) 0%,
			var(--p-frost-300) 50%,
			color-mix(in srgb, var(--p-frost-300) 0%, transparent) 100%
		),
		linear-gradient(var(--p-frost-100), var(--p-frost-100));
}

/* ------------------------------------------------------------------ pager -- */

/* The borders live HERE, not in utilities. This theme deliberately does NOT load
   Tailwind's preflight (a global reset would clobber the WP header/footer), and
   preflight is what sets `border-width: 0` on every element. So `border-solid`
   alone makes the browser's default `medium` width visible on every side that has
   no explicit width utility — which drew a full black box around the pager.
   One longhand declaration cannot be ambushed that way. */
.event-pager {
	border-top: 1.5px solid var(--c-line);
}

.event-pager__btn--prev {
	border: 1.5px solid var(--c-line-brand);
}

/* ------------------------------------------------------------ logo lockup -- */

/* Two SVGs at fixed offsets inside a 222x35 box (export: base 139.619x35 at 0,0
   + accent 72.422x30.349 at 149.578,4.651). Sub-pixel absolute positioning has
   no utility form. */
.event-hero__logo {
	position: relative;
	display: inline-block;
	width: 222px;
	height: 35px;
	flex: none;
}

.event-hero__logo-base {
	position: absolute;
	left: 0;
	top: 0;
	width: 139.619px;
	height: 35px;
}

.event-hero__logo-accent {
	position: absolute;
	left: 149.578px;
	top: 4.651px;
	width: 72.422px;
	height: 30.349px;
}

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

/*
 * The page BODIES are Gutenberg compositions, and Tailwind scans FILES, not the
 * database — a utility class written into post_content compiles to nothing. So
 * the section vocabulary lives here as semantic classes instead, every value
 * read off the design export's own inline styles and every colour an NDS token.
 * Block-level looks (the logistics rows, the agenda cards) stay as utilities in
 * their render.php, which IS a scanned file.
 *
 * Export shell, shared by every engagement section:
 *   width 939 (from `.event-prose > *`); padding 32; column flex; the card
 *   variants add a radius-16 surface.
 */

.event-prose .icnc-section {
	box-sizing: border-box;
	padding: var(--spacing-4xl);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Neutralise WP's layout rules inside our flex sections. Core's
 * `is-layout-constrained` gives every child `max-width: <content-size>` plus
 * `margin-inline: auto`, and block-gap adds `margin-block-start` to siblings.
 *
 * The inline auto margins are the subtle one: per the flexbox spec, auto margins
 * on the CROSS axis absorb the free space and make `align-self` be IGNORED. In a
 * column flex container the cross axis is horizontal, so `align-self: stretch`
 * silently stopped working and every heading collapsed to its text width and
 * centred itself. Zeroing the margin outright is what makes stretch apply.
 *
 * The block-gap margin is the other one: it pushed cards 2..n down by 24px, so a
 * row of "equal height" cards was 24px shorter than the first.
 *
 * `!important` is required, not sloppiness: core emits its layout margins and
 * content-size max-width with `!important`, so nothing else can win. The same
 * override already exists in input-base.css for the ebook's .ds-icard-grid /
 * .ds-split, for exactly this reason.
 */
.event-prose [class*="icnc-"] > * {
	margin: 0 !important;
	max-width: none !important;
}

/* Stretch only where the container is one of our column/row flex boxes — a
   shrink-to-fit child there is always wrong (it was what centred every single
   -line paragraph, because core gives it margin-inline:auto). */
.event-prose .icnc-section > *,
.event-prose .icnc-stack > *,
.event-prose .icnc-prose > *,
.event-prose .icnc-cards > *,
.event-prose .icnc-card > *,
.event-prose .icnc-video__body > *,
.event-prose .icnc-video__head > * {
	align-self: stretch;
}

.event-prose .icnc-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* The export's four inner-stack rhythms, verbatim. */
.event-prose .icnc-gap-64 { gap: var(--spacing-8xl); }
.event-prose .icnc-gap-48 { gap: var(--spacing-6xl); }
.event-prose .icnc-gap-40 { gap: var(--spacing-5xl); }
.event-prose .icnc-gap-32 { gap: var(--spacing-4xl); }
.event-prose .icnc-gap-24 { gap: var(--spacing-xxl); }
.event-prose .icnc-gap-20 { gap: var(--spacing-xl); }
.event-prose .icnc-gap-16 { gap: var(--spacing-l); }


/* Section surfaces. White for keynote/ecosystem, frost-300 for masterclass, a
   5% black shade for the "More about ICNC" panel — all straight from the export. */
.event-prose .icnc-surface        { border-radius: var(--radius-l); background: var(--c-surface-card); }
.event-prose .icnc-surface--frost { border-radius: var(--radius-l); background: var(--p-frost-300); }
.event-prose .icnc-surface--shade { border-radius: var(--radius-l); background: rgba(0, 0, 0, 0.05); }

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

/*
 * The theme sets its own h1-h4 colour/family, which would otherwise win inside
 * the_content(). These restate the export's values, scoped to the tree.
 *
 * `:where()` drops the selector to element specificity ON PURPOSE — the same
 * pattern input-base.css uses for .report-prose. Without it these rules also hit
 * headings rendered by BLOCKS inside a section, and beat the block's own Tailwind
 * utilities: tw-agenda's session title (Lexend 500/22, ink-2) was being repainted
 * as a 32px/400 section heading. Blocks own their own typography; this is only a
 * fallback for headings the page itself authors.
 */
:where(.event-prose .icnc-section) h2,
:where(.event-prose .icnc-section) h3 {
	margin: 0;
}

:where(.event-prose .icnc-section) h2 {
	font-family: var(--font-display), Manrope, sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--c-ink);
}

:where(.event-prose .icnc-section) h3 {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	color: var(--c-ink);
}

/* Section eyebrow — Lexend 600 16 uppercase brand. */
.event-prose .icnc-eyebrow {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--c-ink-brand);
}

/* Body prose: Lexend 300 16/1.4, raven-200, paragraphs 20px apart. */
.event-prose .icnc-prose {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: var(--c-ink-2);
}

.event-prose .icnc-prose > p {
	margin: 0;
}

/* The bordered intro callout on the overview page. */
.event-prose .icnc-callout {
	box-sizing: border-box;
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, 0.4);
	box-shadow: inset 0 0 0 1px var(--c-line-brand);
	padding: var(--spacing-4xl) var(--spacing-3xl);
}

.event-prose .icnc-callout p {
	margin: 0;
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	color: var(--c-ink-brand);
}

/* A standalone rule between blocks of a section (keynote uses two). */
.event-prose .icnc-rule {
	height: 1px;
	background: var(--c-line);
}

/* The ecosystem page's divider is the softer 40% midnight, not --c-line. */
.event-prose .icnc-rule--soft {
	background: var(--c-line-3);
}

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

/* "Why Attend" / "What You'll Experience" — ringed, background-less cards that
   share a row and stretch to the tallest. */
.event-prose .icnc-cards {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-xl);
	align-items: stretch;
}

.event-prose .icnc-card {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--radius-m);
	box-shadow: inset 0 0 0 1px var(--c-line-3, rgba(35, 61, 99, 0.4));
	padding: var(--spacing-xxl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
	align-items: flex-start;
}

.event-prose .icnc-card > * { margin: 0; }

.event-prose .icnc-card__title {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.4;
	color: var(--c-ink);
}

.event-prose .icnc-card__text {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-ink-2);
}

/* ------------------------------------------------------------------ media -- */

/* Section imagery: a fixed-height, radius-12 crop. `height` is capped by aspect
   ratio on narrow screens (see the mobile block) so a phone never gets a
   459px-tall letterbox. */
.event-prose .icnc-media {
	border-radius: var(--radius-m);
	overflow: hidden;
}

.event-prose .icnc-media img {
	display: block;
	width: 100%;
	height: 459px;
	object-fit: cover;
}

.event-prose .icnc-media--eco img { height: 387px; }

/* The 3-up gallery under the ecosystem hero image. */
.event-prose .icnc-gallery {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-l);
	align-items: stretch;
}

.event-prose .icnc-gallery > * {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.event-prose .icnc-gallery img {
	display: block;
	width: 100%;
	height: 209px;
	object-fit: cover;
	border-radius: var(--radius-m);
}

/* An empty gallery slot — the export ships these as image-slot placeholders. */
.event-prose .icnc-slot {
	height: 209px;
	border-radius: var(--radius-m);
	background: var(--p-frost-500);
}

/* ------------------------------------------------------------------ chips -- */

/* The masterclass benefit chips — filled white tiles on the frost section. */
.event-prose .icnc-chips {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-xl);
	align-items: stretch;
}

.event-prose .icnc-chips > * {
	flex: 1 1 0;
	min-width: 0;
	min-height: 136px;
	box-sizing: border-box;
	margin: 0;
	border-radius: var(--radius-m);
	background: var(--c-surface-card);
	box-shadow: inset 0 0 0 1px var(--c-line-3);
	padding: var(--spacing-xxl);
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	color: var(--c-ink);
}

/* ----------------------------------------------------------------- videos -- */

.event-prose .icnc-videos {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-xxl);
	align-items: stretch;
}

.event-prose .icnc-videos > * {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.event-prose .icnc-video {
	box-sizing: border-box;
	border-radius: var(--radius-m);
	background: var(--p-frost-100);
	box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-light-3, 0 2px 10px rgba(50, 50, 93, 0.1));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.event-prose .icnc-video > * { margin: 0; }

.event-prose .icnc-video__body {
	box-sizing: border-box;
	padding: var(--spacing-xxl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
	align-items: flex-start;
}

.event-prose .icnc-video__body > * { margin: 0; }

.event-prose .icnc-video__head {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
	align-items: flex-start;
}

.event-prose .icnc-video__head > * { margin: 0; }

.event-prose .icnc-video__title {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: var(--c-ink);
}

/* The ecosystem recap cards carry a lighter title + a speaker line instead of an
   eyebrow + description. */
.event-prose .icnc-video__title--light {
	font-weight: 300;
	font-size: 18px;
}

.event-prose .icnc-video__text {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: var(--c-ink-2);
}

/*
 * The shared `ampeco/nds-video-inline` block, aligned to THIS design. Scoped to
 * .icnc-video so the block keeps its own look everywhere else on the site.
 *
 * What needed correcting, all measured against the export:
 *  1. the block draws its own 1px #A7B1C1 border — inside our card, which already
 *     has an inset ring, that read as a doubled hairline and inset the poster by
 *     1px on every side (424x238 inside a 426x240 box)
 *  2. its height came from the POSTER'S natural aspect ratio (a 16:9 YouTube
 *     thumbnail → 240px), not from the design's 223px
 *  3. the play control rendered as an 80px rounded SQUARE with a dark glyph and
 *     no fill; the design is a 64px CIRCLE filled rgba(26,30,34,.75) with a small
 *     light triangle, going brand blue on hover
 */
.event-prose .icnc-video .nds-video-inline {
	border: 0;
	border-radius: 0;
	background: var(--c-ink);          /* #1A1E22 — the export's slot colour, visible until the poster paints */
}

/* An aspect ratio, not a fixed height: it IS 223px at the design's 426px card and
   scales proportionally on a phone, so no separate mobile rule is needed. */
.event-prose .icnc-video .nds-video-inline__media,
.event-prose .icnc-video .nds-video-inline__player {
	aspect-ratio: 426 / 223;
	height: auto;
}

.event-prose .icnc-video .nds-video-inline__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-prose .icnc-video .nds-video-inline__overlay {
	background: color-mix(in srgb, var(--c-ink) 20%, transparent);
}

/*
 * The play control keeps the BLOCK'S OWN look (its white pill + brand triangle,
 * its hover scale). Only the size is dialled down, and that goes through the
 * block's `playButtonSize` attribute rather than CSS — the block already has an
 * sm/md/lg scale, so overriding it here would be re-implementing a knob that
 * exists.
 */

/* The recap cards (title + speaker) sit 20px apart; the keynote cards, which add
   an eyebrow block above the description, sit 24 apart. */
.event-prose .icnc-video__body { gap: var(--spacing-l); }
.event-prose .icnc-video__body:has(.icnc-video__head) { gap: var(--spacing-xl); }

/* A centred lead-in line ("Featured speakers include:"). */
.event-prose .icnc-lead-center {
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	color: var(--p-midnight-500);
	text-align: center;
}

/* ---------------------------------------------------------------- day bar -- */

/* The agenda day band. A one-off band on a single page does not justify a block
   style, so it is a heading with a class (decision recorded in NOTES.md). */
.event-prose .icnc-daybar {
	box-sizing: border-box;
	min-height: 63px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-s);
	background: var(--p-frost-100);
	box-shadow: inset 0 0 0 1px var(--p-primary-600);
	padding: var(--spacing-m) var(--spacing-l);
	font-family: var(--font-body), Lexend, sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: var(--c-ink-brand);
	text-align: center;
}

/* -------------------------------------------------- view transitions (all) -- */

/* Cross-document View Transitions — navigating between pages of the tree looks
   like a transition, not a reload. The template positions the incoming page past
   the hero on pagereveal, before the transition snapshot. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: ampeco-ev-vt-out .22s ease both; }
	::view-transition-new(root) { animation: ampeco-ev-vt-in .3s ease both; }
}

@keyframes ampeco-ev-vt-out { to   { opacity: 0; } }
@keyframes ampeco-ev-vt-in  { from { opacity: 0; } }

/* ----------------------------------------------------------------- mobile -- */

@media (max-width: 1040px) {
	.event-prose > * {
		max-width: min(939px, 100%);
	}
	.event-prose > .event-hero {
		max-width: none;
	}
}

@media (max-width: 768px) {
	.event-prose {
		padding-bottom: var(--spacing-7xl);
	}
	/* Content keeps a gutter instead of touching the viewport edges. */
	.event-prose > * {
		max-width: 100%;
		padding-inline: var(--spacing-xl);
	}
	.event-prose > .event-chapnav {
		padding-inline: 0;
	}

	/* The export's fixed 416px height would clip the wrapped title on a phone —
	   go auto-height there. Full-bleed (no gutter, no radius) on mobile.

	   This must NOT assume a gutter width. The theme's body padding is 16px on
	   desktop but 8px here, so the earlier `margin-inline: -16px` overshot by 8px a
	   side; the overhang was then clipped away, leaving the hero sitting INSIDE an
	   8px gutter with square corners — the opposite of the intent. `50% - 50vw`
	   resolves to whatever the real gutter is, at any padding, and the prose's
	   `overflow-clip-margin` lets it through. */
	.event-prose > .event-hero {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
	.event-hero {
		height: auto;
		min-height: 0;
		padding: var(--spacing-11xl) var(--spacing-xl) var(--spacing-6xl);
		border-radius: 0;
	}
	/* Scale the fixed-px lockup down proportionally rather than letting it force a
	   222px minimum inside a ~334px column. */
	.event-hero__logo {
		width: 178px;
		height: 28px;
	}
	.event-hero__logo-base {
		width: 111.7px;
		height: 28px;
	}
	.event-hero__logo-accent {
		left: 119.66px;
		top: 3.72px;
		width: 57.94px;
		height: 24.28px;
	}

	/* The pills overflow a phone viewport. Make the strip horizontally SWIPEABLE
	   (scroll, pack left, hide the scrollbar); event-page.js scrolls the active
	   pill into view and toggles the edge fades. */
	.event-chapnav__strip {
		overflow-x: auto;
		justify-content: flex-start;
		scroll-behavior: smooth;
		scrollbar-width: none;            /* Firefox */
		-ms-overflow-style: none;         /* old Edge */
	}
	.event-chapnav__strip::-webkit-scrollbar {
		display: none;                    /* WebKit */
	}

	/* Edge fades = the "more pages, swipe" affordance. event-page.js toggles
	   .is-overflow-left / .is-overflow-right so a fade only shows on a side that
	   actually has hidden pills.

	   They fade to the PAGE background, not to the strip's frost-300: the strip's
	   own gradient is fully transparent at its left/right edges, so frost-100 is
	   what is actually painted there. Fading to frost-300 would put a visible
	   blue-ish smudge over the last pill. */
	.event-chapnav {
		overflow: hidden;
	}
	.event-chapnav::before,
	.event-chapnav::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 34px;
		pointer-events: none;
		z-index: 1;
		opacity: 0;
		transition: opacity .15s ease;
	}
	.event-chapnav::before {
		left: 0;
		background: linear-gradient(to left, color-mix(in srgb, var(--p-frost-100) 0%, transparent), var(--p-frost-100));
	}
	.event-chapnav::after {
		right: 0;
		background: linear-gradient(to right, color-mix(in srgb, var(--p-frost-100) 0%, transparent), var(--p-frost-100));
	}
	.event-chapnav.is-overflow-left::before { opacity: 1; }
	.event-chapnav.is-overflow-right::after { opacity: 1; }

	/* ---- content sections on a phone ------------------------------------- */

	/* The export is a desktop-only artboard, so every fixed value it carries needs
	   a mobile answer here — authored WITH the section, never as a later pass. */
	.event-prose .icnc-section {
		padding: var(--spacing-xxl) var(--spacing-xl);
	}

	/* Close the big desktop rhythms up — 64px of dead space reads as a broken
	   page on a 390px screen. */
	.event-prose .icnc-gap-64 { gap: var(--spacing-5xl); }
	.event-prose .icnc-gap-48 { gap: var(--spacing-4xl); }
	.event-prose .icnc-gap-40 { gap: var(--spacing-3xl); }

	/* Headings step down one notch (same ratio the hpv2 layer uses). */
	.event-prose .icnc-section h2 { font-size: 30px; }
	.event-prose .icnc-section h3 { font-size: 26px; }

	.event-prose .icnc-callout { padding: var(--spacing-xxl) var(--spacing-xl); }
	.event-prose .icnc-callout p { font-size: 16px; }

	/* Card rows stack. Same basis-0 trap as the chips above. */
	.event-prose .icnc-cards {
		flex-direction: column;
	}
	.event-prose .icnc-cards > * { flex: 0 0 auto; }
	.event-prose .icnc-card__title { font-size: 20px; }

	/* Fixed crop heights become an aspect ratio, so a phone gets a proportional
	   image instead of a 459px-tall letterbox slice. */
	.event-prose .icnc-media img,
	.event-prose .icnc-media--eco img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* The 3-up gallery becomes a swipeable row rather than three unreadably
	   narrow slivers. */
	.event-prose .icnc-gallery {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--spacing-xl));
		padding-inline: var(--spacing-xl);
	}
	.event-prose .icnc-gallery::-webkit-scrollbar { display: none; }
	.event-prose .icnc-gallery > * {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
	.event-prose .icnc-gallery img,
	.event-prose .icnc-slot {
		height: 160px;
	}

	.event-prose .icnc-daybar {
		font-size: 18px;
		min-height: 0;
		padding: 14px var(--spacing-l);
	}

	/* Chips, speakers and video cards all stack. */
	.event-prose .icnc-chips,
	.event-prose .icnc-videos {
		flex-direction: column;
	}

	/* `flex: 1 1 0` is written for the ROW layout, where basis-0 equalises WIDTHS.
	   Once the container stacks, that basis applies to the HEIGHT instead and
	   every chip collapses to its padding (48px tall with 0 content). Hand the
	   height back to the content. */
	.event-prose .icnc-chips > * {
		flex: 0 0 auto;
		min-height: 0;
	}



	/* Long labels overflow the two nowrap buttons on a narrow row — stack them,
	   full width, wrapping labels. (The report shipped without this and the next
	   button ended up off-screen and untappable.) */
	.event-pager {
		flex-direction: column;
		align-items: stretch;
	}
	.event-pager__btn {
		width: 100%;
		margin-left: 0;
		justify-content: center;
		white-space: normal;
		text-align: center;
	}
}