/* ==========================================================================
   Tobìnrin · Welcome Address — slide deck styles
   Works in two modes:
   - html.no-js : a plain, scrollable document (progressive enhancement)
   - html.js    : a 16:9 letterboxed presentation driven by assets/js/deck.js
   Every size inside a slide is in container units (cqw = 1% of slide width),
   so the same slide renders identically at 1920, 1280, in the overview grid
   and in the presenter previews.
   ========================================================================== */

@font-face {
	font-family: "PP Pangaia";
	src: url("../fonts/PPPangaia-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "PP Pangaia";
	src: url("../fonts/PPPangaia-LightItalic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: block;
}
@font-face {
	font-family: "Compagnon";
	src: url("../fonts/Compagnon-Roman.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "TT Commons";
	src: url("../fonts/TT_Commons_Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand palette (src/app/globals.css) */
	--plum: #6a1034;
	--pumpkin: #ff7c1f;
	--violet: #f79dff;
	--yellow: #e6aa39;
	--lemon: #e2f57a;
	--teal: #103f4b;
	--pink: #e02d62;
	--black: #200811;
	--white: #fffdf9; /* Tobìnrin White — the PDF's background */
	--cream: hsla(48, 100%, 97%, 1); /* app cream */

	--ink: var(--plum);
	--ink-soft: #7d3a55; /* 7.9:1 on --white (AAA) */
	--paper: var(--white);
	--frame-bg: var(--white);

	--serif: "PP Pangaia", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--mono: "Compagnon", "Courier New", ui-monospace, monospace;
	--sans: "TT Commons", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--fade: 700ms;

	/* --ts follows the reader's default font size (set by deck.js) so text
	   scales with the browser's text-size preference. */
	--ts: 1;
	color-scheme: light;
}

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

html,
body {
	margin: 0;
	background: var(--frame-bg);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color 600ms var(--ease);
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
	margin: 0;
	padding: 0;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--pumpkin);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--plum);
	color: var(--white);
	font-family: var(--sans);
	border-radius: 999px;
	text-decoration: none;
}
.skip-link:focus {
	top: 1rem;
}

/* --------------------------------------------------------------------------
   Slide primitives (shared by both modes)
   -------------------------------------------------------------------------- */

.slide {
	container-type: inline-size;
	position: relative;
	background: var(--paper);
	color: var(--ink);
	overflow: hidden;
	/* 1 text unit: 1% of the slide width, times the text-size preference */
	--t: calc(1cqw * var(--ts));
}

.slide-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5cqw 8cqw;
	text-align: center;
}

.slide--plum {
	--paper: var(--plum);
	--ink: var(--white);
	--ink-soft: #f1dfe4;
}
.slide--video {
	--paper: #000;
	--ink: var(--white);
}

.title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(7.2 * var(--t));
	line-height: 1.02;
	letter-spacing: -0.022em;
	text-wrap: balance;
}
.title--l {
	font-size: calc(5.6 * var(--t));
}
.title--m {
	font-size: calc(4 * var(--t));
}

.sub {
	margin-top: calc(1.8 * var(--t));
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: calc(3 * var(--t));
	color: var(--ink-soft);
}

.label {
	font-family: var(--mono);
	font-size: calc(1.6 * var(--t));
	letter-spacing: 0.06em;
	color: var(--ink);
}
.label--l {
	font-size: calc(2.4 * var(--t));
	letter-spacing: 0.08em;
}

/* Opener: script W from the PDF + "elcome Address" */
.welcome-title {
	display: flex;
	align-items: baseline;
	font-size: calc(4.6 * var(--t));
	white-space: nowrap;
}
.welcome-title .script-w {
	width: auto;
	height: 3.78em;
	margin-right: -0.04em;
	/* the W's foot sits 0.79em below the baseline in the PDF */
	transform: translateY(0.79em);
	color: var(--plum);
	flex: none;
}
.welcome-title .script-w path {
	fill: currentColor;
}

/* Logomark (bloom) */
.lm,
.rotor {
	display: block;
}
.mark {
	color: var(--plum);
	flex: none;
}
.mark .piece {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.32;
	stroke-linejoin: round;
}
.mark svg {
	width: 100%;
	height: auto;
	overflow: visible;
}
.mark--hero {
	width: calc(10 * 1cqw);
	margin-bottom: 3.4cqw;
}
.mark--petal {
	width: 6.2cqw;
	margin-bottom: 2.8cqw;
}
.mark--bloom {
	width: 24cqw;
	margin-bottom: 3.2cqw;
}
.mark--closing {
	width: 15cqw;
	margin-bottom: 2.8cqw;
}
.mark--ghost {
	position: absolute;
	width: 46cqw;
	left: 50%;
	top: 50%;
	margin: -23cqw 0 0 -23cqw;
	opacity: 0.09;
	pointer-events: none;
}

/* Brand slide */
.wordmark {
	width: 50cqw;
	height: auto;
	color: var(--plum);
	margin: 5.2cqw 0 4.6cqw;
}
.wordmark path {
	fill: currentColor;
}
.swatches {
	display: flex;
	gap: 1.4cqw;
	list-style: none;
}
.swatches li {
	width: 2.4cqw;
	height: 2.4cqw;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgb(32 8 17 / 0.08);
}

/* Shopper and Service Specialist */
.duo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5cqw;
}
.duo .and {
	font-style: italic;
	font-size: 0.5em;
	color: var(--ink-soft);
	line-height: 1.3;
}

/* Persona slides: title + arched photo */
.persona {
	flex-direction: row;
	justify-content: center;
	gap: 7cqw;
	padding: 5cqw 9cqw;
	text-align: left;
}
.persona--flip {
	flex-direction: row-reverse;
}
.persona .title {
	flex: 0 1 auto;
	max-width: 44cqw;
}
.arch {
	flex: none;
	width: 30cqw;
	height: 42cqw;
	border-radius: 15cqw 15cqw 1.4cqw 1.4cqw;
	overflow: hidden;
	background: var(--cream);
}
.arch img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Categories */
.categories {
	padding: 4.4cqw 7cqw;
	align-items: stretch;
}
.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	justify-content: space-between;
	column-gap: 3.2cqw;
	row-gap: 0;
	list-style: none;
	text-align: left;
	width: 100%;
	counter-reset: cat;
}
.cat-grid li {
	display: flex;
	align-items: baseline;
	gap: 1.2cqw;
	padding: 1.05cqw 0;
	border-bottom: 1px solid rgb(106 16 52 / 0.16);
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(2.05 * var(--t));
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.cat-grid li:nth-child(7n + 1) {
	border-top: 1px solid rgb(106 16 52 / 0.16);
}
.cat-grid .n {
	flex: none;
	width: 2.4cqw;
	font-family: var(--mono);
	font-size: calc(1.05 * var(--t));
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* Bullet lists */
.points {
	list-style: none;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 2.3cqw;
	max-width: 78cqw;
}
.points li {
	display: flex;
	align-items: baseline;
	gap: 2.4cqw;
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(3.7 * var(--t));
	line-height: 1.12;
	letter-spacing: -0.015em;
}
.points--five {
	gap: 1.7cqw;
}
.points--five li {
	font-size: calc(3.4 * var(--t));
}
.points .n {
	flex: none;
	width: 3.2cqw;
	font-family: var(--mono);
	font-size: calc(1.3 * var(--t));
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	transform: translateY(-0.35em);
}

/* Live demo */
.live {
	display: inline-flex;
	align-items: center;
	gap: 1cqw;
	margin-top: 2.6cqw;
}
.live-dot {
	position: relative;
	width: 1.1cqw;
	height: 1.1cqw;
	border-radius: 50%;
	background: var(--pink);
}
.live-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--pink);
	opacity: 0;
}

/* November 11 */
.date {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--serif);
	font-weight: 300;
	line-height: 0.86;
	letter-spacing: -0.03em;
}
.date .month {
	font-size: calc(6.4 * var(--t));
	font-style: italic;
	letter-spacing: -0.01em;
}
.date .day {
	font-size: calc(30 * var(--t));
	margin-top: 1cqw;
}
.date-rule {
	width: 10cqw;
	height: 2px;
	margin-top: 2.4cqw;
	background: var(--pumpkin);
}

/* Video slides */
.slide--video .slide-content {
	padding: 0;
	background: #000;
}
.video-frame {
	position: absolute;
	inset: 0;
	margin: 0;
}
.video-frame video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	background: #000;
}
.video-desc {
	font-family: var(--sans);
}
.video-progress,
.video-ui,
.video-hint {
	display: none;
}

/* Speaker notes: visible only in the no-JS document */
.notes {
	display: none;
}

/* ==========================================================================
   NO-JS DOCUMENT MODE
   ========================================================================== */

html.no-js body {
	background: var(--cream);
}
html.no-js .deck {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
html.no-js .slide {
	--t: max(1cqw, 0.55rem);
	min-height: 0;
	border-radius: 12px;
	box-shadow: 0 1px 0 rgb(32 8 17 / 0.06), 0 10px 40px -20px rgb(32 8 17 / 0.25);
}
html.no-js .slide-content {
	position: relative;
	inset: auto;
	min-height: 56.25cqw;
}
html.no-js .slide--video .slide-content {
	min-height: 0;
	padding: 0;
}
html.no-js .video-frame {
	position: relative;
}
html.no-js .video-frame video {
	aspect-ratio: 16 / 9;
	height: auto;
}
html.no-js .video-desc {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--white);
	background: var(--black);
}
html.no-js .persona {
	flex-wrap: wrap;
}
html.no-js .mark {
	display: none;
}
html.no-js .notes {
	display: block;
	padding: 0 1.25rem 1.25rem;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--black);
	background: var(--paper);
}
html.no-js .slide--plum .notes,
html.no-js .slide--video .notes {
	background: var(--white);
	border-radius: 0 0 12px 12px;
}
html.no-js .notes summary {
	cursor: pointer;
	padding: 0.75rem 0;
	font-weight: 600;
	color: var(--plum);
}
html.no-js .notes p + p {
	margin-top: 0.6em;
}
html.no-js .controls,
html.no-js .blank,
html.no-js .toast {
	display: none;
}
html.no-js .doc-intro {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem 0;
	font-family: var(--sans);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--black);
}
html.js .doc-intro {
	display: none;
}

/* ==========================================================================
   PRESENTATION MODE
   ========================================================================== */

html.js,
html.js body {
	height: 100%;
	overflow: hidden;
}
html.js body {
	position: fixed;
	inset: 0;
}
html.js .deck {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	outline: none;
}
html.js .stage {
	position: relative;
	width: min(100vw, calc(100vh * 16 / 9));
	width: min(100vw, calc(100dvh * 16 / 9));
	aspect-ratio: 16 / 9;
	contain: layout;
}
html.js .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(1.6%, 0, 0) scale(0.995);
	transition:
		opacity var(--fade) var(--ease-in-out),
		transform 900ms var(--ease),
		visibility 0s linear 900ms;
	will-change: opacity, transform;
}
html.js .slide.is-past {
	transform: translate3d(-1.6%, 0, 0) scale(0.995);
}
html.js .slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--fade) var(--ease-in-out),
		transform 900ms var(--ease),
		visibility 0s linear 0s;
	z-index: 1;
}

/* Entrance choreography for elements inside the active slide */
html.js .rise {
	opacity: 0;
	transform: translate3d(0, 2.2cqw, 0);
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .rise {
	opacity: 1;
	transform: none;
	transition:
		opacity 900ms var(--ease) calc(220ms + var(--i, 0) * 110ms),
		transform 1100ms var(--ease) calc(220ms + var(--i, 0) * 110ms);
}
html.js .fade-in {
	opacity: 0;
	transition: opacity 0s linear 900ms;
}
html.js .is-active .fade-in {
	opacity: 1;
	transition: opacity 1400ms var(--ease) calc(300ms + var(--i, 0) * 110ms);
}

/* Persona photo: gentle settle */
html.js .arch img {
	transform: scale(1.08);
	transition: transform 0s linear 900ms;
}
html.js .is-active .arch img {
	transform: scale(1);
	transition: transform 6s var(--ease) 100ms;
}

/* Brand swatches */
html.js .swatches li {
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .swatches li {
	opacity: 1;
	transform: none;
	transition:
		opacity 600ms var(--ease) calc(900ms + var(--i) * 80ms),
		transform 900ms var(--ease) calc(900ms + var(--i) * 80ms);
}

/* Categories stagger */
html.js .cat-grid li {
	opacity: 0;
	transform: translate3d(0, 1.2cqw, 0);
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .cat-grid li {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--ease) calc(200ms + var(--i) * 55ms),
		transform 900ms var(--ease) calc(200ms + var(--i) * 55ms);
}

/* Fragments (one bullet per click) */
html.js .fragment {
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 1.6cqw, 0);
	transition:
		opacity 400ms var(--ease),
		transform 600ms var(--ease),
		visibility 0s linear 400ms;
}
html.js .fragment.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 700ms var(--ease),
		transform 900ms var(--ease),
		visibility 0s;
}

/* Live dot pulse */
html.js .is-active .live-dot::after {
	animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
	0% {
		opacity: 0.55;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}

/* November 11 */
html.js .date .day {
	opacity: 0;
	transform: translate3d(0, 4cqw, 0) scale(0.96);
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .date .day {
	opacity: 1;
	transform: none;
	transition:
		opacity 1200ms var(--ease) 450ms,
		transform 1600ms var(--ease) 450ms;
}
html.js .date-rule {
	transform: scaleX(0);
	transition: transform 0s linear 900ms;
}
html.js .is-active .date-rule {
	transform: scaleX(1);
	transition: transform 1400ms var(--ease) 1100ms;
}

/* ---- Logomark bloom ---------------------------------------------------- */
/* Petal / ghost marks: the whole mark opens like a flower. */
html.js .mark--petal .lm,
html.js .mark--ghost .lm {
	opacity: 0;
	transform: rotate(-40deg) scale(0.55);
	transform-origin: 50% 50%;
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .mark--petal .lm,
html.js .is-active .mark--ghost .lm {
	opacity: 1;
	transform: none;
	transition:
		opacity 1000ms var(--ease) 120ms,
		transform 1800ms var(--ease) 120ms;
}

/* Piece-by-piece bloom (opener, "Just bloom", closing) */
html.js .bloom .piece {
	opacity: 0;
	transform: translate(var(--dx), var(--dy)) scale(0.35);
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .bloom .piece {
	opacity: 1;
	transform: none;
	transition:
		opacity 500ms var(--ease) calc(var(--d) * 1ms),
		transform 1100ms var(--ease) calc(var(--d) * 1ms);
}
html.js .bloom .pieces {
	transition: opacity 0s linear 900ms;
}
html.js .is-active .bloom .pieces {
	opacity: 0;
	transition: opacity 600ms var(--ease) var(--settle, 2400ms);
}
html.js .bloom .solid {
	opacity: 0;
	transition: opacity 0s linear 900ms;
}
html.js .is-active .bloom .solid {
	opacity: 1;
	transition: opacity 700ms var(--ease) calc(var(--settle, 2400ms) - 200ms);
}

/* Idle motion: a slow turn and a breath, only on the visible slide */
.rotor {
	transform-origin: 50% 50%;
}
html.js .is-active .rotor {
	animation:
		turn 120s linear infinite,
		breathe 7s var(--ease-in-out) infinite alternate;
}
html.js .is-active .mark--ghost .rotor {
	animation: turn 180s linear infinite;
}
@keyframes turn {
	to {
		rotate: 360deg;
	}
}
@keyframes breathe {
	from {
		scale: 1;
	}
	to {
		scale: 1.035;
	}
}

/* ---- Video slides ------------------------------------------------------ */
html.js .video-progress {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgb(255 253 249 / 0.12);
	z-index: 3;
	opacity: 0;
	transition: opacity 400ms var(--ease);
}
html.js .slide.is-playing .video-progress,
html.js .slide.is-paused .video-progress {
	opacity: 1;
}
html.js .video-progress span {
	display: block;
	height: 100%;
	background: var(--pumpkin);
	transform-origin: 0 50%;
	transform: scaleX(0);
}
html.js .video-ui {
	display: flex;
	position: absolute;
	left: 2cqw;
	bottom: 2cqw;
	z-index: 4;
	gap: 0.6rem;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 300ms var(--ease),
		transform 300ms var(--ease);
}
html.js body.ui-visible .is-active .video-ui,
html.js .video-ui:focus-within {
	opacity: 1;
	transform: none;
}
html.js .video-hint {
	display: block;
	position: absolute;
	left: 50%;
	top: 2.4cqw;
	z-index: 4;
	transform: translateX(-50%);
	padding: 0.55em 1.1em;
	border-radius: 999px;
	background: rgb(32 8 17 / 0.82);
	color: var(--white);
	font-family: var(--sans);
	font-size: max(14px, calc(1.05 * var(--t)));
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms var(--ease);
}
html.js .video-hint.is-shown {
	opacity: 1;
}
html.js .slide--video .slide-content {
	cursor: default;
}

/* ---- Control bar ------------------------------------------------------- */
.controls {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 5px;
	border-radius: 999px;
	background: rgb(32 8 17 / 0.84);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 10px 30px -10px rgb(32 8 17 / 0.5);
	color: var(--white);
	font-family: var(--sans);
	transform: translate(-50%, 0);
	transition:
		opacity 350ms var(--ease),
		transform 350ms var(--ease);
}
body:not(.ui-visible) .controls:not(:focus-within) {
	opacity: 0;
	transform: translate(-50%, 12px);
	pointer-events: none;
}
.btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 200ms var(--ease);
}
.btn:hover {
	background: rgb(255 253 249 / 0.14);
}
.btn:focus-visible {
	outline: 3px solid var(--pumpkin);
	outline-offset: 0;
}
.btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.btn[aria-pressed="true"] {
	background: rgb(255 253 249 / 0.2);
}
.btn--video {
	width: 44px;
	height: 44px;
	background: rgb(32 8 17 / 0.72);
	color: var(--white);
}
.btn--video:hover {
	background: rgb(32 8 17 / 0.9);
}
.counter {
	min-width: 4.6em;
	padding: 0 0.4em;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	opacity: 0.92;
}
.sep {
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: rgb(255 253 249 / 0.22);
}

/* ---- Blank screens ----------------------------------------------------- */
.blank {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 450ms var(--ease-in-out),
		visibility 0s linear 450ms;
	cursor: none;
}
.blank.is-white {
	background: #fff;
}
.blank.is-on {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 450ms var(--ease-in-out),
		visibility 0s;
}

/* ---- Toast (e.g. "Sound is off") --------------------------------------- */
.toast {
	position: fixed;
	left: 50%;
	top: 22px;
	z-index: 30;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgb(32 8 17 / 0.88);
	color: var(--white);
	font-family: var(--sans);
	font-size: 16px;
	transform: translate(-50%, -8px);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 300ms var(--ease),
		transform 300ms var(--ease);
}
.toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---- Help dialog ------------------------------------------------------- */
.help {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--white);
	color: var(--black);
	font-family: var(--sans);
	box-shadow: 0 30px 80px -20px rgb(32 8 17 / 0.5);
}
.help::backdrop {
	background: rgb(32 8 17 / 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.help-inner {
	padding: 28px 32px 30px;
}
.help h2 {
	font-family: var(--serif);
	font-weight: 300;
	font-size: 34px;
	color: var(--plum);
	margin-bottom: 14px;
}
.help-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
}
.help dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 14px;
	margin: 0;
	align-content: start;
	font-size: 15px;
	line-height: 1.35;
}
.help dt {
	text-align: right;
	white-space: nowrap;
}
.help dd {
	margin: 0;
	color: #4a2333;
}
kbd {
	display: inline-block;
	min-width: 1.7em;
	padding: 0.12em 0.45em;
	border: 1px solid rgb(106 16 52 / 0.3);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--cream);
	font-family: var(--sans);
	font-size: 0.86em;
	text-align: center;
	color: var(--plum);
}
.help-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgb(106 16 52 / 0.14);
	font-size: 15px;
}
.help-foot label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.help-foot input {
	width: 18px;
	height: 18px;
	accent-color: var(--plum);
}
.help-close {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--plum);
	color: var(--white);
	font: inherit;
	cursor: pointer;
}

/* ---- Overview ---------------------------------------------------------- */
html.js body.is-overview .deck {
	display: block;
	overflow-y: auto;
	background: var(--black);
}
html.js body.is-overview .stage {
	width: 100%;
	aspect-ratio: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 36px 22px;
	padding: 72px max(16px, 4vw) 120px;
	contain: none;
}
html.js body.is-overview .stage::before {
	content: "Overview · choose a slide";
	position: absolute;
	top: 26px;
	left: max(16px, 4vw);
	font-family: var(--mono);
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--white);
}
html.js body.is-overview .slide {
	position: relative;
	inset: auto;
	aspect-ratio: 16 / 9;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: transform 250ms var(--ease);
	border-radius: 10px;
	cursor: pointer;
	overflow: visible;
}
html.js body.is-overview .slide > .slide-content {
	border-radius: 10px;
	overflow: hidden;
}
html.js body.is-overview .slide::after {
	content: attr(data-num) "  " attr(data-title);
	position: absolute;
	left: 2px;
	top: calc(100% + 8px);
	font-family: var(--sans);
	font-size: 14px;
	color: rgb(255 253 249 / 0.86);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
html.js body.is-overview .slide:hover {
	transform: translateY(-3px);
}
html.js body.is-overview .slide.is-current {
	outline: 3px solid var(--pumpkin);
	outline-offset: 4px;
}
html.js body.is-overview .slide:focus-visible {
	outline: 3px solid var(--violet);
	outline-offset: 4px;
}
/* Everything at rest in the overview */
html.js body.is-overview .rise,
html.js body.is-overview .fade-in,
html.js body.is-overview .fragment,
html.js body.is-overview .swatches li,
html.js body.is-overview .cat-grid li,
html.js body.is-overview .date .day,
html.js body.is-overview .date-rule,
html.js body.is-overview .arch img,
html.js body.is-overview .lm,
html.js body.is-overview .bloom .piece {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}
html.js body.is-overview .bloom .pieces {
	opacity: 0;
	transition: none;
}
html.js body.is-overview .bloom .solid {
	opacity: 1;
	transition: none;
}
html.js body.is-overview .rotor,
html.js body.is-overview .live-dot::after {
	animation: none;
}
html.js body.is-overview .video-ui,
html.js body.is-overview .video-progress,
html.js body.is-overview .video-hint {
	display: none;
}
html.js body.is-overview .controls {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

/* ---- Presenter preview mode (iframes inside presenter.html) ------------- */
html.is-preview .controls,
html.is-preview .toast,
html.is-preview .video-ui,
html.is-preview .video-hint,
html.is-preview .skip-link {
	display: none !important;
}
html.is-preview .slide,
html.is-preview .slide * {
	transition: none !important;
	animation: none !important;
}
html.is-preview .bloom .pieces {
	opacity: 0 !important;
}
html.is-preview .bloom .solid,
html.is-preview .lm {
	opacity: 1 !important;
}

/* ---- Reduced motion: no transitions, no idle motion --------------------- */
@media (prefers-reduced-motion: reduce) {
	html.js .slide,
	html.js .slide *,
	html.js .slide *::after,
	.controls,
	.blank,
	.toast,
	html,
	body {
		transition: none !important;
		animation: none !important;
	}
	html.js .slide {
		transform: none !important;
	}
	html.js .bloom .pieces {
		opacity: 0 !important;
	}
	html.js .bloom .solid,
	html.js .lm,
	html.js .rise,
	html.js .fade-in,
	html.js .swatches li,
	html.js .cat-grid li,
	html.js .date .day,
	html.js .arch img {
		opacity: 1 !important;
		transform: none !important;
	}
	html.js .date-rule {
		transform: none !important;
	}
	html.js .fragment {
		transform: none !important;
	}
}

/* Forced colours / high contrast: keep the outlines meaningful */
@media (forced-colors: active) {
	.controls,
	.toast {
		border: 1px solid CanvasText;
	}
	.btn svg {
		stroke: ButtonText;
	}
}

@media print {
	html.js,
	html.js body {
		height: auto;
		overflow: visible;
	}
}

/* ==========================================================================
   v2 VISUAL LAYER
   Outlines, arches, colour fields and mini UI taken from the website
   (waiting room outlines, "For The" panels with the seam medallion,
   rounded outline cards, pill links).
   ========================================================================== */

:root {
	--pumpkin-dark: #d1661a;
	--teal-ink: #d6e6e9;
	--morph-ms: 950ms;
}

.theme-cream {
	--paper: var(--white);
	--ink: var(--plum);
	--ink-soft: #7d3a55;
	--line: rgb(106 16 52 / 0.62);
	--line-soft: rgb(106 16 52 / 0.2);
	--card: rgb(255 255 255 / 0.6);
	--accent: var(--pumpkin);
	--chip-fill: rgb(226 245 122 / 0.55);
}
.theme-plum {
	--paper: var(--plum);
	--ink: var(--white);
	--ink-soft: #f1dfe4;
	--line: rgb(255 253 249 / 0.62);
	--line-soft: rgb(255 253 249 / 0.22);
	--card: rgb(255 253 249 / 0.06);
	--accent: var(--violet);
}
.theme-teal {
	--paper: var(--teal);
	--ink: var(--white);
	--ink-soft: var(--teal-ink);
	--line: rgb(255 253 249 / 0.6);
	--line-soft: rgb(255 253 249 / 0.2);
	--card: rgb(255 253 249 / 0.05);
	--accent: var(--lemon);
}
.theme-pumpkin {
	--paper: var(--pumpkin-dark);
	--ink: var(--white);
	--ink-soft: #fff1e6;
	--line: rgb(255 253 249 / 0.7);
	--line-soft: rgb(255 253 249 / 0.3);
	--accent: var(--lemon);
}
.theme-lemon {
	--paper: var(--lemon);
	--ink: var(--plum);
	--ink-soft: #5c1530;
	--line: rgb(106 16 52 / 0.6);
	--line-soft: rgb(106 16 52 / 0.22);
	--card: rgb(255 253 249 / 0.4);
	--accent: var(--plum);
}
.theme-video {
	--paper: #000;
	--ink: var(--white);
}

.mark {
	color: var(--ink);
}
.mark use {
	fill: currentColor;
}
.title--xl {
	font-size: calc(8.4 * var(--t));
}
.title em {
	font-style: italic;
}
.eyebrow {
	font-family: var(--mono);
	font-size: calc(1.7 * var(--t));
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 1.2cqw;
}

/* Big outlined logomark, like the waiting room's line drawing */
.mark--outline use {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.09;
}
.mark--bg {
	position: absolute;
	left: 50%;
	top: var(--bg-y, 50%);
	width: 150cqw;
	margin: -75cqw 0 0 -75cqw;
	opacity: 0.1;
	pointer-events: none;
}
.mark--bg-light {
	opacity: 0.32;
}

/* Thin plum outline frames */
.frame-arch {
	position: absolute;
	left: 50%;
	pointer-events: none;
	border: 1.5px solid var(--line-soft);
	border-radius: 999px 999px 0 0;
	border-bottom: 0;
}
.frame-arch--opener {
	width: 44cqw;
	height: 46cqw;
	bottom: 0;
	margin-left: -22cqw;
}
.frame-arch--wide {
	width: 70cqw;
	height: 44cqw;
	bottom: 0;
	margin-left: -35cqw;
}
.frame-rect {
	position: absolute;
	inset: 2.6cqw;
	border: 1.5px solid var(--line-soft);
	border-radius: 2cqw;
	pointer-events: none;
}

/* 1 · Opener */
#s1 .mark--hero {
	width: 11cqw;
	margin-bottom: 3cqw;
}
#s1 .welcome-title {
	position: relative;
}

/* 2 · The Search: outlined search pill */
.mark--petal {
	width: 6.4cqw;
	margin-bottom: 2.4cqw;
}
.search-pill {
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	width: 52cqw;
	height: 5.6cqw;
	margin-top: 3.4cqw;
	padding: 0 0.6cqw 0 2.4cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--card);
}
.sp-field {
	flex: 1;
	display: flex;
	align-items: center;
}
.sp-bar {
	display: block;
	width: 70%;
	height: 0.8cqw;
	border-radius: 999px;
	background: var(--line-soft);
}
.sp-bar--s {
	width: 50%;
}
.sp-sep {
	width: 1.5px;
	height: 2.4cqw;
	background: var(--line-soft);
}
.sp-caret {
	display: block;
	width: 2px;
	height: 2.2cqw;
	background: var(--ink);
}
html.js .is-active .sp-caret {
	animation: caret 1.1s steps(1) infinite;
}
@keyframes caret {
	50% {
		opacity: 0;
	}
}
.sp-go {
	display: grid;
	place-items: center;
	width: 4.4cqw;
	height: 4.4cqw;
	border-radius: 50%;
	background: var(--plum);
	color: var(--white);
}
.sp-go .ico {
	width: 2.2cqw;
	height: 2.2cqw;
}
.ico {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 3 · Journey timeline (v2.1: one milestone per click, alternating above and
   below the line so every label has room) */
.timeline {
	--row: 9.5cqw;
	--dot-row: 7.2cqw;
	--gap: 3cqw;
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--gap);
	width: 90cqw;
	margin-top: 3.2cqw;
	list-style: none;
}
/* Faint dashed track: the whole road, before it is walked */
.tl-line {
	position: absolute;
	left: 10%;
	right: 10%;
	top: calc(var(--row) + var(--dot-row) / 2);
	height: 0;
	border-top: 1.5px dashed var(--line-soft, rgb(106 16 52 / 0.25));
}
.tl-node {
	position: relative;
	display: grid;
	grid-template-rows: var(--row) var(--dot-row) var(--row);
	justify-items: center;
	align-items: center;
	text-align: center;
}
/* Solid segment drawn from the previous milestone to this one */
.tl-node + .tl-node::before {
	content: "";
	position: absolute;
	top: calc(var(--row) + var(--dot-row) / 2);
	right: 50%;
	width: calc(100% + var(--gap));
	height: 1.5px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 0;
}
.tl-dot {
	grid-row: 2;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 4.4cqw;
	height: 4.4cqw;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
}
.tl-dot::after {
	content: "";
	width: 1cqw;
	height: 1cqw;
	border-radius: 50%;
	background: var(--pumpkin);
}
/* Soft ring that ripples out when a milestone lands */
.tl-dot::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: 50%;
	border: 1.5px solid var(--pumpkin);
	opacity: 0;
}
.tl-node--today .tl-dot {
	width: 7.2cqw;
	height: 7.2cqw;
	background: var(--plum);
	border-color: var(--plum);
}
.tl-node--today .tl-dot::after {
	display: none;
}
.tl-node--today .tl-dot::before {
	border-color: var(--plum);
}
.mark--tl {
	width: 5.6cqw;
	color: var(--white);
	margin: 0;
}
.tl-text {
	grid-row: 3;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9cqw;
	padding-top: 1.8cqw;
}
.tl-node--up .tl-text {
	grid-row: 1;
	align-self: end;
	padding: 0 0 1.8cqw;
}
.tl-label {
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(2.3 * var(--t));
	line-height: 1.1;
	white-space: nowrap;
}
.tl-sub {
	font-family: var(--mono);
	font-size: calc(1.2 * var(--t));
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 17.5cqw;
	text-wrap: balance;
}

/* Reveal. Upcoming milestones wait as faint empty rings on the dashed road. */
html.js .tl-node.fragment {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}
html.js .tl-node.fragment .tl-dot {
	opacity: 0.35;
	transform: scale(0.55);
	transition: opacity 400ms var(--ease), transform 500ms var(--ease);
}
html.js .tl-node.fragment .tl-dot::after,
html.js .tl-node.fragment .mark--tl {
	opacity: 0;
	transform: scale(0.2) rotate(-90deg);
	transition: opacity 300ms var(--ease), transform 500ms var(--ease);
}
html.js .tl-node.fragment .tl-text > * {
	opacity: 0;
	transform: translate3d(0, 1.4cqw, 0);
	transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
html.js .tl-node--up.fragment .tl-text > * {
	transform: translate3d(0, -1.4cqw, 0);
}
html.js .tl-node.fragment::before {
	transition: transform 300ms var(--ease);
}

/* Landed: line draws in, then the dot blooms with a ripple, then the words rise */
html.js .tl-node.fragment.is-visible::before {
	transform: scaleX(1);
	transition: transform 700ms var(--ease);
}
html.js .tl-node.fragment.is-visible .tl-dot {
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 300ms var(--ease) var(--land, 450ms),
		transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--land, 450ms);
}
html.js .tl-node.fragment:first-of-type,
html.js .tl-line + .tl-node.fragment {
	--land: 0ms;
}
html.js .tl-node.fragment.is-visible .tl-dot::after,
html.js .tl-node.fragment.is-visible .mark--tl {
	opacity: 1;
	transform: none;
	transition:
		opacity 400ms var(--ease) calc(var(--land, 450ms) + 200ms),
		transform 900ms var(--ease) calc(var(--land, 450ms) + 200ms);
}
html.js .tl-node.fragment.is-visible .tl-dot::before {
	animation: tl-ripple 1100ms var(--ease) calc(var(--land, 450ms) + 250ms) 1 both;
}
html.js .tl-node.fragment.is-visible .tl-text > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 600ms var(--ease) calc(var(--land, 450ms) + 300ms),
		transform 800ms var(--ease) calc(var(--land, 450ms) + 300ms);
}
html.js .tl-node.fragment.is-visible .tl-sub {
	transition-delay: calc(var(--land, 450ms) + 480ms);
}
@keyframes tl-ripple {
	0% { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.2); }
}

/* Overview, presenter previews and reduced motion: show the walked road at rest */
html.js body.is-overview .tl-node .tl-dot,
html.js body.is-overview .tl-node .tl-dot::after,
html.js body.is-overview .tl-node .mark--tl,
html.js body.is-overview .tl-node .tl-text > * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
html.js body.is-overview .tl-node::before {
	transform: scaleX(1) !important;
}
@media (prefers-reduced-motion: reduce) {
	html.js .tl-node.fragment *,
	html.js .tl-node.fragment::before,
	html.js .tl-node.fragment .tl-dot::before {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}

/* 4 · Brand on plum */
.wordmark-wrap {
	margin: 4.6cqw 0 4cqw;
}
.theme-plum .wordmark {
	color: var(--white);
	margin: 0;
	width: 54cqw;
}
.theme-plum .swatches li {
	box-shadow: 0 0 0 0.35cqw var(--plum), 0 0 0 calc(0.35cqw + 1.5px) var(--line);
}

/* 5 · Just bloom: concentric outline rings */
.rings {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.rings span {
	grid-area: 1 / 1;
	border: 1.5px solid var(--line-soft);
	border-radius: 50%;
}
.rings span:nth-child(1) {
	width: 36cqw;
	height: 36cqw;
	margin-top: -4cqw;
}
.rings span:nth-child(2) {
	width: 50cqw;
	height: 50cqw;
	margin-top: -4cqw;
}
.rings span:nth-child(3) {
	width: 66cqw;
	height: 66cqw;
	margin-top: -4cqw;
}
.theme-plum .bloom .piece {
	stroke: var(--white);
}

/* 6 · Two panels with the medallion on the seam */
.duo-panels {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4cqw;
	width: 84cqw;
	height: 44cqw;
}
.panel-outline {
	position: absolute;
	inset: -1.4cqw;
	border: 1.5px solid var(--line-soft);
	border-radius: 2.6cqw;
}
.panel {
	position: relative;
	overflow: hidden;
	border-radius: 1.6cqw;
	background: var(--cream);
}
.panel img,
.arch img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.panel::after {
	content: "";
	position: absolute;
	inset: 55% 0 0 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(20 4 10 / 0.82) 100%);
}
.panel figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2.4cqw;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--white);
	text-align: center;
}
.panel .ft {
	font-family: var(--mono);
	font-size: calc(1.5 * var(--t));
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.panel .who {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: calc(4.6 * var(--t));
	line-height: 1.05;
}
.medallion {
	position: absolute;
	left: 50%;
	top: 28%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 8cqw;
	height: 8cqw;
	margin-left: -4cqw;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 0 0 0.5cqw var(--white), 0 0 0 calc(0.5cqw + 1.5px) var(--line-soft);
}
.mark--medallion {
	width: 6.6cqw;
	color: var(--plum);
}

/* 7 / 11 · Persona: arch photo with an offset outline arch */
.persona {
	position: static;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 7cqw;
	padding: 0;
	text-align: left;
}
.persona--flip {
	flex-direction: row-reverse;
}
.persona-text {
	max-width: 46cqw;
}
.persona .title {
	max-width: none;
	line-height: 0.98;
}
.arch-stack {
	position: relative;
	flex: none;
	width: 30cqw;
	height: 42cqw;
}
.arch-stack--s {
	width: 25cqw;
	height: 37cqw;
}
.arch-outline {
	position: absolute;
	inset: 0;
	transform: translate(1.6cqw, -1.6cqw);
	border: 1.5px solid var(--line);
	border-radius: 999px 999px 1.4cqw 1.4cqw;
}
.persona--flip .arch-outline {
	transform: translate(-1.6cqw, -1.6cqw);
}
html.js .arch-stack .arch,
.arch-stack .arch {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	border-radius: 999px 999px 1.4cqw 1.4cqw;
	background: var(--cream);
	margin: 0;
}
.play-badge {
	position: absolute;
	left: 50%;
	bottom: 2.4cqw;
	display: grid;
	place-items: center;
	width: 5cqw;
	height: 5cqw;
	margin-left: -2.5cqw;
	border-radius: 50%;
	background: rgb(255 253 249 / 0.9);
	color: var(--plum);
	box-shadow: 0 0 0 0.45cqw rgb(255 253 249 / 0.35);
}
.play-badge svg {
	width: 2.4cqw;
	height: 2.4cqw;
	fill: currentColor;
	margin-left: 0.3cqw;
}

/* 8 · Categories as outlined chips */
.chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 1.25cqw 1.1cqw;
	max-width: 86cqw;
	list-style: none;
}
.chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.8cqw;
	padding: 0.85cqw 1.8cqw 0.95cqw 1.4cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(2.15 * var(--t));
	line-height: 1.1;
	white-space: nowrap;
}
.chip:nth-child(5n + 2) {
	background: var(--chip-fill);
	border-color: transparent;
}
.chip:nth-child(7n + 4) {
	background: rgb(247 157 255 / 0.32);
	border-color: transparent;
}
.chip:nth-child(6n + 6) {
	background: var(--plum);
	color: var(--white);
	border-color: var(--plum);
}
.chip:nth-child(6n + 6) .n {
	color: #f1dfe4;
}
.chip .n {
	font-family: var(--mono);
	font-size: calc(1 * var(--t));
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}
html.js .chip {
	opacity: 0;
	transform: translate3d(0, 1.6cqw, 0) scale(0.92);
	transition:
		opacity 0s linear 900ms,
		transform 0s linear 900ms;
}
html.js .is-active .chip {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--ease) calc(150ms + var(--i) * 45ms),
		transform 900ms var(--ease) calc(150ms + var(--i) * 45ms);
	animation: float 6s var(--ease-in-out) calc(1.4s + var(--i) * -0.37s) infinite alternate;
}
@keyframes float {
	from {
		translate: 0 0;
	}
	to {
		translate: 0 -0.35cqw;
	}
}

/* 9 / 12 / 16 · Outlined cards with mini UI */
.bullets-layout {
	display: flex;
	align-items: center;
	gap: 5cqw;
	width: 86cqw;
}
.cards {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6cqw;
	list-style: none;
	text-align: left;
}
.card {
	display: flex;
	align-items: center;
	gap: 1.8cqw;
	min-height: 15cqw;
	padding: 1.8cqw 2cqw;
	border: 1.5px solid var(--line);
	border-radius: 1.8cqw;
	background: var(--card);
}
.card-art {
	flex: none;
	display: grid;
	place-items: center;
	width: 9cqw;
	height: 9cqw;
	border-radius: 1.2cqw;
	border: 1.5px solid var(--line-soft);
}
.card-title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: calc(2.7 * var(--t));
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.cards--five {
	grid-template-columns: 1fr 1fr;
	gap: 1.3cqw;
}
.cards--five .card {
	min-height: 11.6cqw;
	padding: 1.2cqw 1.6cqw;
}
.cards--five .card:last-child {
	grid-column: 1 / -1;
}
.cards--five .card-art {
	width: 8.2cqw;
	height: 8.2cqw;
}
.cards--five .card-title {
	font-size: calc(2.45 * var(--t));
}
.cards--future {
	width: 84cqw;
	gap: 1.8cqw;
}
.cards--future .card-title {
	font-size: calc(3 * var(--t));
}
.future-head {
	display: flex;
	align-items: center;
	gap: 1.6cqw;
	margin-bottom: 3.2cqw;
}
.mark--petal-s {
	width: 4.4cqw;
	margin: 0;
}
html.js .card.fragment {
	transform: translate3d(0, 1.6cqw, 0) scale(0.97);
}
html.js .card.fragment.is-visible {
	transform: none;
}

/* mini UI */
.mini {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.mini-avatars img {
	width: 3.6cqw;
	height: 3.6cqw;
	border-radius: 50%;
	object-fit: cover;
	border: 0.25cqw solid var(--paper);
	margin-left: -1.2cqw;
}
.mini-avatars img:first-child {
	margin-left: 0;
}
.mini-plus {
	display: grid;
	place-items: center;
	width: 3.2cqw;
	height: 3.2cqw;
	margin-left: -0.6cqw;
	border: 1.5px dashed var(--line);
	border-radius: 50%;
	font-family: var(--serif);
	font-size: calc(2 * var(--t));
	line-height: 1;
	background: var(--paper);
}
.mini-chips {
	flex-wrap: wrap;
	align-content: center;
	gap: 0.45cqw;
	padding: 0.8cqw;
}
.mini-chips span {
	display: block;
	height: 1.5cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
}
.mini-chips span:nth-child(1) { width: 3.4cqw; }
.mini-chips span:nth-child(2) { width: 2.4cqw; background: var(--chip-fill, rgb(226 245 122 / 0.55)); border-color: transparent; }
.mini-chips span:nth-child(3) { width: 2.2cqw; }
.mini-chips span:nth-child(4) { width: 3.6cqw; }
.mini-chips span:nth-child(5) { width: 2.6cqw; background: var(--plum); border-color: var(--plum); }
.mini-chips span:nth-child(6) { width: 2cqw; }
.mini-review {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6cqw;
	padding: 1.2cqw;
}
.mini-review .stars {
	display: flex;
	gap: 0.2cqw;
}
.mini-review .star {
	width: 1.2cqw;
	height: 1.2cqw;
	fill: var(--pumpkin);
	stroke: none;
}
.mini-review i,
.mini-paid i,
.mini-request .quotes i {
	display: block;
	width: 100%;
	height: 0.7cqw;
	border-radius: 999px;
	background: var(--line-soft);
}
.mini-review i.short,
.mini-paid i.short {
	width: 60%;
}
.mini-request {
	gap: 0.8cqw;
	padding: 1cqw;
}
.mini-request .mini-plus {
	flex: none;
	margin: 0;
	border-style: solid;
	width: 2.8cqw;
	height: 2.8cqw;
}
.mini-request .quotes {
	flex: 1;
	display: grid;
	gap: 0.6cqw;
}
.mini-request .quotes i:nth-child(2) {
	width: 75%;
	background: var(--chip-fill, var(--lemon));
}
.mini-request .quotes i:nth-child(3) {
	width: 55%;
}
.mini-found img {
	width: 5cqw;
	height: 5cqw;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--line);
}
.ico--badge {
	position: absolute;
	right: 1cqw;
	bottom: 1cqw;
	width: 3cqw;
	height: 3cqw;
	padding: 0.5cqw;
	border-radius: 50%;
	background: var(--accent);
	color: var(--teal);
	stroke-width: 3.4;
}
.mini-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.3cqw;
	padding: 1cqw;
}
.mini-cal span {
	aspect-ratio: 1;
	border-radius: 0.25cqw;
	border: 1px solid var(--line-soft);
}
.mini-cal .f1 { background: var(--lemon); border-color: transparent; }
.mini-cal .f2 { background: rgb(255 253 249 / 0.75); border-color: transparent; }
.mini-cal .f3 { background: var(--pumpkin); border-color: transparent; }
.mini-naira {
	flex-direction: column;
	gap: 0.2cqw;
	padding: 0.8cqw;
}
.mini-naira .naira {
	font-family: var(--sans);
	font-size: calc(2.4 * var(--t));
	line-height: 1;
	color: var(--accent);
}
.mini-naira svg {
	width: 6.4cqw;
	height: 3.2cqw;
	fill: none;
	stroke: var(--ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mini-paid {
	gap: 0.8cqw;
	padding: 1cqw;
}
.paid-dot {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.2cqw;
	height: 3.2cqw;
	border-radius: 50%;
	background: var(--accent);
	color: var(--teal);
}
.paid-dot .ico {
	width: 2.2cqw;
	height: 2.2cqw;
	stroke-width: 4;
}
.mini-paid .lines {
	flex: 1;
	display: grid;
	gap: 0.6cqw;
}
.mini-verified .ico {
	width: 5.4cqw;
	height: 5.4cqw;
	color: var(--accent);
	stroke-width: 2.4;
}
.mini-icon .ico {
	width: 5.4cqw;
	height: 5.4cqw;
	color: var(--ink);
	stroke-width: 2;
}
.cards--future .card:nth-child(2) .mini-icon .ico { color: var(--pumpkin-dark); }
.cards--future .card:nth-child(3) .mini-icon .ico { color: var(--teal); }
.cards--future .card:nth-child(4) .mini-icon .ico { color: var(--pink); }

/* 14 · Live demo on the waiting-room orange */
.live-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6cqw;
	height: 3cqw;
	margin-bottom: 2.4cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
}
.live-pill .live-dot {
	background: var(--white);
}
.live-pill .live-dot::after {
	background: var(--white);
}

/* 15 · What's next pill */
.sub--pill {
	display: inline-block;
	margin-top: 2.4cqw;
	padding: 0.7cqw 2.6cqw 0.9cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-family: var(--serif);
	font-style: italic;
	font-size: calc(3 * var(--t));
	color: var(--ink);
}
.sub--s {
	margin: 0;
	font-size: calc(2.2 * var(--t));
	padding: 0.5cqw 2cqw 0.65cqw;
}

/* 17 · Build it with us: nested outline arches on lemon */
.arches {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: end center;
	pointer-events: none;
}
.arches span {
	grid-area: 1 / 1;
	border: 1.5px solid var(--line-soft);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
}
.arches span:nth-child(1) { width: 40cqw; height: 40cqw; }
.arches span:nth-child(2) { width: 58cqw; height: 49cqw; }
.arches span:nth-child(3) { width: 78cqw; height: 54cqw; }

/* 18 · Manifest it pill */
.mark--ghost {
	color: var(--plum);
}
.theme-lemon .mark--ghost {
	opacity: 0.14;
}
.manifest-pill {
	display: inline-flex;
	align-items: center;
	gap: 1.4cqw;
	padding: 1.6cqw 3.6cqw 1.8cqw 2.6cqw;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: rgb(255 253 249 / 0.55);
}
.manifest-text {
	font-family: var(--mono);
	font-size: calc(3 * var(--t));
	letter-spacing: 0.08em;
}
.sparkle .ico {
	width: 3.6cqw;
	height: 3.6cqw;
	color: var(--plum);
}

/* 19 · November 11 calendar card */
.cal-stack {
	position: relative;
	width: 32cqw;
	height: 40cqw;
}
.cal-outline {
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--line);
	border-radius: 2.4cqw;
	transform: rotate(-5deg) translate(-1.2cqw, 0.6cqw);
}
.cal-card {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 2.4cqw;
	background: var(--white);
	color: var(--plum);
	box-shadow: 0 2.4cqw 5cqw -2cqw rgb(20 4 10 / 0.5);
}
.cal-card .date {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	line-height: 1;
}
.cal-card .month {
	padding: 2.6cqw 0 1.8cqw;
	background: var(--plum);
	color: var(--white);
	/* Plum on the plum slide: a faint rim keeps the card's top edge legible */
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22);
	border-radius: 2.4cqw 2.4cqw 0 0;
	font-size: calc(4.4 * var(--t));
	text-align: center;
}
.cal-card .day {
	flex: 1;
	display: grid;
	place-items: center;
	margin: 0;
	font-size: calc(21 * var(--t));
	letter-spacing: -0.04em;
	padding-bottom: 1.4cqw;
}
.cal-rings {
	position: absolute;
	top: 1cqw;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	padding: 0 7cqw;
}
.cal-rings i {
	width: 1.2cqw;
	height: 1.2cqw;
	border-radius: 50%;
	background: rgb(255 253 249 / 0.85);
}
html.js .cal-card .day {
	opacity: 0;
	transform: translate3d(0, 3cqw, 0) scale(0.94);
	transition: opacity 0s linear 900ms, transform 0s linear 900ms;
}
html.js .is-active .cal-card .day {
	opacity: 1;
	transform: none;
	transition: opacity 1000ms var(--ease) 350ms, transform 1400ms var(--ease) 350ms;
}
html.js .cal-outline {
	transform: rotate(0deg);
	opacity: 0;
	transition: transform 0s linear 900ms, opacity 0s linear 900ms;
}
html.js .is-active .cal-outline {
	transform: rotate(-5deg) translate(-1.2cqw, 0.6cqw);
	opacity: 1;
	transition: transform 1400ms var(--ease) 500ms, opacity 900ms var(--ease) 500ms;
}

/* 20 · Closing medallion (its window lines up with the launch film's
   first bloomed frame, so it can open into Video 3) */
.medallion-frame {
	position: relative;
	display: grid;
	place-items: center;
	width: 31.4cqw;
	height: 31.4cqw;
	margin-bottom: 2.2cqw;
	border-radius: 50%;
	border: 1.5px solid var(--line);
}
.medallion-window {
	display: grid;
	place-items: center;
	width: 28cqw;
	height: 28cqw;
	border-radius: 50%;
	background: var(--cream);
	overflow: hidden;
}
/* poster: mark box = 35.7% of the frame width; window = 28cqw of a
   56.25cqw-tall frame, so the mark box is 35.7 * 28 / 56.25 = 17.77cqw */
.mark--closing {
	width: 17.77cqw;
	margin: 0;
}
#s20 .title {
	font-size: calc(5 * var(--t));
}

/* 21 etc · video frame keeps full bleed */
.video-frame {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Morph layer
   -------------------------------------------------------------------------- */
.morph-layer {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	container-type: inline-size;
	--t: calc(1cqw * var(--ts));
}
.morph-ghost {
	position: absolute;
	transform-origin: 0 0;
	will-change: transform, opacity, clip-path;
	overflow: visible;
	background: transparent;
	color: var(--ink);
}
.morph-ghost > * {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	position: relative !important;
	inset: auto !important;
	transform: none !important;
}
.morph-ghost.is-image {
	background-size: cover;
	background-repeat: no-repeat;
}
.morph-hide {
	visibility: hidden !important;
}
html.js .slide.morph-pair {
	transform: none !important;
	transition:
		opacity 520ms var(--ease-in-out),
		visibility 0s linear 520ms !important;
}
html.js .slide.morph-pair.is-active {
	transition:
		opacity 620ms var(--ease-in-out) 120ms,
		visibility 0s !important;
}
html.js .slide.iris-in {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	z-index: 3;
}
html.js .slide.iris-hold {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	z-index: 2;
}
html.js body.is-overview .morph-layer {
	display: none;
}

/* Things at rest inside morph ghosts (same as the overview) */
.morph-ghost .rise,
.morph-ghost .fade-in,
.morph-ghost .fragment,
.morph-ghost .chip,
.morph-ghost .lm,
.morph-ghost .bloom .piece,
.morph-ghost .cal-card .day,
.morph-ghost .arch img {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
.morph-ghost .bloom .pieces {
	opacity: 0 !important;
}
.morph-ghost .bloom .solid {
	opacity: 1 !important;
}
.morph-ghost .rotor {
	animation: none !important;
}

/* Overview / preview: v2 elements at rest */
html.js body.is-overview .chip,
html.js body.is-overview .cal-card .day,
html.js body.is-overview .cal-outline,
html.js body.is-overview .tl-line,
html.js body.is-overview .tl-node {
	opacity: 1;
	transform: none;
	transition: none;
	animation: none;
}
html.js body.is-overview .cal-outline {
	transform: rotate(-5deg) translate(-1.2cqw, 0.6cqw);
}

/* Timeline entrance */
html.js .tl-line {
	transform: scaleX(0);
	transition: transform 0s linear 900ms;
}
html.js .is-active .tl-line {
	transform: scaleX(1);
	transition: transform 1600ms var(--ease) 300ms;
}
html.js .tl-node {
	opacity: 0;
	transform: translate3d(0, 1.6cqw, 0);
	transition: opacity 0s linear 900ms, transform 0s linear 900ms;
}
html.js .is-active .tl-node {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--ease) calc(450ms + var(--i) * 260ms),
		transform 900ms var(--ease) calc(450ms + var(--i) * 260ms);
}

/* No-JS document: v2 tweaks */
html.no-js .persona,
html.no-js .bullets-layout {
	flex-wrap: wrap;
}
html.no-js .slide-content {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	/* Morphs become a short, plain cross-fade */
	html.js .slide {
		transition:
			opacity 220ms linear,
			visibility 0s linear 220ms !important;
	}
	html.js .slide.is-active {
		transition:
			opacity 220ms linear,
			visibility 0s !important;
	}
	html.js .chip,
	html.js .tl-node,
	html.js .tl-line,
	html.js .cal-card .day,
	html.js .cal-outline {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	html.js .cal-outline {
		transform: rotate(-5deg) translate(-1.2cqw, 0.6cqw) !important;
	}
}

/* v2 refinement: bullet cards as one clean column of wide outlined rows */
.bullets-layout {
	gap: 4.4cqw;
}
.arch-stack--s {
	width: 23cqw;
	height: 38cqw;
}
.cards,
.cards--five {
	grid-template-columns: 1fr;
	gap: 1.3cqw;
}
.card {
	min-height: 0;
	padding: 1.1cqw 2.2cqw 1.1cqw 1.1cqw;
	gap: 2.2cqw;
	border-radius: 999px 1.8cqw 1.8cqw 999px;
}
.card-art {
	width: 10cqw;
	height: 6.4cqw;
	border-radius: 999px;
}
.card-title {
	font-size: calc(3.1 * var(--t));
	white-space: nowrap;
}
.cards--five .card {
	min-height: 0;
	padding: 0.8cqw 2cqw 0.8cqw 0.8cqw;
}
.cards--five .card:last-child {
	grid-column: auto;
}
.cards--five .card-art {
	width: 9cqw;
	height: 5.6cqw;
}
.cards--five .card-title {
	font-size: calc(2.75 * var(--t));
}
.cards--future {
	grid-template-columns: 1fr 1fr;
	width: 86cqw;
}
.cards--future .card {
	border-radius: 2cqw;
	padding: 2cqw;
	align-items: center;
}
.cards--future .card-art {
	width: 9cqw;
	height: 9cqw;
	border-radius: 50%;
}
.cards--future .card-title {
	white-space: normal;
	font-size: calc(3 * var(--t));
}
.mini-avatars img {
	width: 3.4cqw;
	height: 3.4cqw;
}
.mini-chips {
	padding: 0.6cqw 1cqw;
}
.mini-chips span {
	height: 1.3cqw;
}
.mini-cal {
	grid-template-columns: repeat(14, 1fr);
	gap: 0.22cqw;
	padding: 0.9cqw 1.4cqw;
}
.mini-naira {
	flex-direction: row;
	gap: 0.6cqw;
}
.mini-naira svg {
	width: 4.6cqw;
	height: 2.6cqw;
}
.mini-verified .ico {
	width: 4.4cqw;
	height: 4.4cqw;
}
.mini-found img {
	width: 4cqw;
	height: 4cqw;
}
.ico--badge {
	right: 1.3cqw;
	bottom: 0.4cqw;
	width: 2.6cqw;
	height: 2.6cqw;
}
.mini-review {
	padding: 0.8cqw 1.4cqw;
	gap: 0.45cqw;
}
.mini-request,
.mini-paid {
	padding: 0.8cqw 1.4cqw;
}
.mini-cal {
	grid-template-columns: repeat(7, 0.85cqw);
	grid-auto-rows: 0.85cqw;
	justify-content: center;
	align-content: center;
	padding: 0;
}
.mini-cal span {
	aspect-ratio: auto;
}
html.js .arch--video img,
html.js .is-active .arch--video img,
.arch--video img {
	transform: scale(1.12);
	transform-origin: 50% 30%;
}
/* hidden copy of the launch poster, aligned with the bloom; the morph to
   Video 3 grows this picture to full bleed */
.medallion-window {
	position: relative;
}
.medallion-window .morph-image {
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	width: auto;
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: fill;
	transform: translateX(-50%);
	opacity: 0;
}
.medallion-window .mark--closing {
	position: relative;
}
.mark--bg-light {
	opacity: 0.17;
}
.theme-lemon .mark--ghost {
	opacity: 0.1;
}
#s20 .label {
	margin-top: 1.8cqw;
}
.mini-plus {
	font-family: var(--sans);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Full-bleed backgrounds (v2.1)
   The 16:9 stage keeps text and layout in a safe area, but each slide's
   colour field and decorative art now extend to fill the whole screen, so
   wide or tall displays never show cut-off art or plain bars at the sides.
   Overview mode keeps the cropped thumbnails.
   -------------------------------------------------------------------------- */
html.js body:not(.is-overview) .deck {
	overflow: hidden;
	background: var(--frame-bg, var(--white));
}
html.js body:not(.is-overview) .stage {
	contain: none;
}
html.js body:not(.is-overview) .slide {
	overflow: visible;
	isolation: isolate;
	background: transparent;
}
html.js body:not(.is-overview) .slide::before {
	content: "";
	position: absolute;
	inset: -100vmax;
	z-index: -1;
	background: var(--paper);
	pointer-events: none;
}
html.js body:not(.is-overview) .slide-content {
	overflow: visible;
}

/* Presenter previews: timeline shows each click's end state instantly */
html.is-preview .tl-node,
html.is-preview .tl-node *,
html.is-preview .tl-node::before,
html.is-preview .tl-node .tl-dot::before {
	transition: none !important;
	animation: none !important;
}

/* Before "Today" lands it waits as an empty ring like the others */
html.js .tl-node--today.fragment:not(.is-visible) .tl-dot {
	background: var(--paper);
	border-color: var(--line);
}
html.js .tl-node--today.fragment .tl-dot {
	transition:
		opacity 400ms var(--ease),
		transform 500ms var(--ease),
		background-color 500ms var(--ease) var(--land, 450ms),
		border-color 500ms var(--ease) var(--land, 450ms);
}

/* The Search's logomark carries over and travels the road (v2.1).
   It lands on "5 years", glides to each milestone per click, and blooms into
   the "Today" circle at the end, so it never disappears. */
.timeline {
	--colw: calc((90cqw - 4 * var(--gap)) / 5);
	--at: 0;
}
.timeline:has(> .tl-node:nth-child(4).is-visible) { --at: 1; }
.timeline:has(> .tl-node:nth-child(5).is-visible) { --at: 2; }
.timeline:has(> .tl-node:nth-child(6).is-visible) { --at: 3; }
.timeline:has(> .tl-node:nth-child(7).is-visible) { --at: 4; }
.tl-traveler {
	position: absolute;
	z-index: 3;
	top: calc(var(--row) + var(--dot-row) / 2);
	left: calc(var(--at) * (var(--colw) + var(--gap)) + var(--colw) / 2);
	width: 5.4cqw;
	height: 5.4cqw;
	display: grid;
	place-items: center;
	list-style: none;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 0 0 1.5px var(--line);
	color: var(--plum);
	transform: translate(-50%, -50%);
	transition:
		left 1000ms cubic-bezier(0.65, 0, 0.35, 1),
		width 600ms var(--ease) 700ms,
		height 600ms var(--ease) 700ms,
		background-color 500ms var(--ease) 700ms,
		box-shadow 500ms var(--ease) 700ms,
		color 500ms var(--ease) 700ms;
}
.mark--traveler {
	width: 82%;
	margin: 0;
}
.mark--traveler .rotor {
	animation: tl-spin 24s linear infinite;
}
@keyframes tl-spin {
	to { transform: rotate(360deg); }
}
/* A soft comet tail while it travels */
.tl-traveler::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(255 124 31 / 0.35);
	animation: tl-glow 2.4s var(--ease) infinite;
}
@keyframes tl-glow {
	0% { box-shadow: 0 0 0 0 rgb(255 124 31 / 0.35); }
	70%, 100% { box-shadow: 0 0 0 1.6cqw rgb(255 124 31 / 0); }
}
/* Arrival at Today: the circle fills plum and the mark turns white */
.timeline:has(> .tl-node--today.is-visible) .tl-traveler {
	width: 7.2cqw;
	height: 7.2cqw;
	background: var(--plum);
	box-shadow: 0 0 0 1.5px var(--plum);
	color: var(--white);
}
.timeline:has(> .tl-node--today.is-visible) .tl-traveler::after {
	animation: none;
}
/* The traveller covers the dot it stands on; the Today dot no longer needs its own mark */
.tl-node--today .tl-dot {
	background: var(--paper);
	border-color: var(--line);
}
html.is-preview .tl-traveler,
html.js body.is-overview .tl-traveler {
	transition: none !important;
}
html.js body.is-overview .tl-traveler::after,
html.is-preview .tl-traveler::after {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.tl-traveler { transition-duration: 1ms !important; transition-delay: 0s !important; }
	.tl-traveler::after, .mark--traveler .rotor { animation: none !important; }
}

/* Keep every milestone's dot on its column centre, however long its label */
.tl-node {
	grid-template-columns: minmax(0, 1fr);
}
.tl-node .tl-text {
	justify-self: center;
	width: max-content;
}

/* Avatar stacks sit in a tight row: never let flex squash the circles */
.mini-avatars img,
.mini-plus {
	flex: none;
	aspect-ratio: 1;
}
.mini-avatars img {
	margin-left: -1.5cqw;
}
.mini-avatars img:first-child {
	margin-left: 0;
}
.mini-avatars .mini-plus {
	width: 2.8cqw;
	height: 2.8cqw;
	margin-left: -0.8cqw;
}

/* Milestone label and its note read as one unit */
.tl-text {
	gap: 0.35cqw;
}
.tl-text > * {
	margin: 0;
}
.tl-sub {
	line-height: 1.2;
}

/* Zoom-through ghost: draw the bloom as open line work so its centre stays a window */
.morph-ghost.is-zoom .bloom .pieces {
	opacity: 1 !important;
}
.morph-ghost.is-zoom .bloom .solid {
	opacity: 0 !important;
}