/* ==========================================================================
   Pankaj Yogpeeth · guru-profile.css
   Each guru's own page (pankaj-sadana.php, swami-atma-jnanananda-giri.php, …), one PHP
   file per guru with the sections that suit them, all sharing this sheet.
   Loads after core.css.
   The founder's page tells his story along the Ganga: a darshan in a temple arch with the river
   flowing below, his words lit as they are read, his life as a four-chapter
   magazine spread that opens on hover, and his method as four turning rings.
   ========================================================================== */

/* Devanagari for the gurus' names and the Sanskrit words on their pages
   (a subset of Tiro Devanagari Hindi, SIL Open Font License:
   assets/fonts/tiro-devanagari-LICENSE.txt; regenerate the subset from the
   guru pages whenever one adds new Sanskrit words) */
@font-face {
	font-family: 'PYP Tiro Devanagari';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/tiro-devanagari-gurus.woff?v=1792761817) format('woff');
	unicode-range: U+0900-097F, U+200C-200D, U+25CC;
}

.pyp-ps {
	--pyp-saffron: #f6c177;
	--pyp-saffron-deep: #d9822b;
	--pyp-ps-deva: 'PYP Tiro Devanagari', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
	--pyp-ps-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V46C0 30 20 22 34 14C42 9 47 5 50 0C53 5 58 9 66 14C80 22 100 30 100 46V130Z'/%3E%3C/svg%3E");
	--pyp-ps-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.4));
	--pyp-ps-edge: 1px solid rgba(255, 255, 255, 0.85);
	--pyp-ps-blur: blur(20px) saturate(175%);
	--pyp-ps-lift: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 40px -26px rgba(15, 59, 39, 0.42);
	--pyp-ps-line: rgba(15, 59, 39, 0.09);
	display: block;
	overflow: clip;
	color: var(--pyp-ink);
	background: #fff;
}

.pyp-ps [id] {
	scroll-margin-top: calc(var(--pyp-navbar-h) + 16px);
}

/* Shared
   ========================================================================== */

.pyp-ps .pyp-ps-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* Om and the yantra are sacred: they alone take the saffron */
.pyp-ps-om {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-ps .pyp-ps-title {
	margin: 0;
	font: 500 clamp(26px, 3vw, 46px)/1.1 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-ps-title em,
.pyp-ps-hero__title em {
	font-style: normal;
	color: var(--pyp-green);
	background: linear-gradient(100deg, #12512f 0%, #1d7044 40%, #2f8a4c 70%, #4a9e45 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pyp-ps .pyp-ps-lede {
	margin: 10px 0 0;
	font: 400 15.5px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps-lede a {
	color: var(--pyp-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(29, 112, 68, 0.3);
	text-underline-offset: 3px;
}

.pyp-ps-head {
	margin-bottom: clamp(22px, 2.6vw, 36px);
}

.pyp-ps-head--center {
	text-align: center;
}

.pyp-ps-head--center .pyp-ps-eyebrow {
	justify-content: center;
}

/* the discipline icons (assets/icons/disciplines.svg) */
.pyp-ps-ico {
	--pyp-ico-bg: #f4f8ef;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: linear-gradient(145deg, #fff, #eef5e7);
	box-shadow: 4px 6px 12px -6px rgba(15, 59, 39, 0.3), inset -2px -2px 5px rgba(29, 112, 68, 0.08);
	color: var(--pyp-green);
}

.pyp-ps-ico svg {
	width: 70%;
	height: 70%;
}

.pyp-ps .pyp-ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	font: 500 15px/1 var(--pyp-font-menu);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 160ms var(--pyp-ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.pyp-ps .pyp-ps-btn--solid {
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	box-shadow: 0 12px 24px -12px rgba(15, 59, 39, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}

.pyp-ps .pyp-ps-btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--pyp-forest);
}

.pyp-ps-btn .bi {
	font-size: 14px;
	transition: transform 200ms var(--pyp-ease-out);
}

.pyp-ps-btn:active {
	transform: scale(0.97);
}

.pyp-ps-btn:focus-visible,
.pyp-ps-qa button:focus-visible,
.pyp-ps-course a:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

@media (hover: hover) {
	.pyp-ps .pyp-ps-btn--solid:hover {
		color: #fff;
		box-shadow: 0 16px 30px -12px rgba(15, 59, 39, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}

	.pyp-ps .pyp-ps-btn--ghost:hover {
		border-color: var(--pyp-green);
		background: #fff;
		color: var(--pyp-forest);
	}

	.pyp-ps-btn:hover .bi-arrow-right {
		transform: translateX(3px);
	}

	.pyp-ps-btn:hover .bi-arrow-down {
		transform: translateY(2px);
	}
}

/* drifting light, the carved jali lattice and slow turning, shared */
.pyp-ps-glow {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	animation: pyp-ps-drift 18s ease-in-out infinite alternate;
}

@keyframes pyp-ps-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(4%, -5%) scale(1.08); }
}

.pyp-ps-jali {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.pyp-ps-spin {
	animation: pyp-ps-turn 220s linear infinite;
}

@keyframes pyp-ps-turn {
	to { transform: rotate(360deg); }
}

.pyp-ps-float {
	animation: pyp-ps-bob 6s ease-in-out infinite alternate;
}

@keyframes pyp-ps-bob {
	from { translate: 0 0; }
	to   { translate: 0 -6px; }
}

.is-offscreen .pyp-ps-glow,
.is-offscreen .pyp-ps-spin,
.is-offscreen .pyp-ps-float,
.is-offscreen .pyp-ps-orbit,
.is-offscreen .pyp-ps-orbit .pyp-ps-ico,
.is-offscreen .pyp-ps-ganga path,
.is-offscreen .pyp-ps-ring__turn,
.is-offscreen .pyp-ps-mandala__light {
	animation-play-state: paused;
}

/* 1. Darshan: the founder in a temple arch, the Ganga flowing below
   ========================================================================== */

.pyp-ps-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(18px, 2.6vw, 40px) clamp(64px, 6vw, 96px);
	background: linear-gradient(160deg, #f3f8ee 0%, #e8f1de 55%, #f6f9f2 100%);
}

.pyp-ps-hero .pyp-ps-jali {
	-webkit-mask-image: radial-gradient(70% 90% at 75% 40%, #000 20%, transparent 80%);
	mask-image: radial-gradient(70% 90% at 75% 40%, #000 20%, transparent 80%);
}

/* his title, carved faintly into the wall behind him */
.pyp-ps .pyp-ps-hero__mark {
	position: absolute;
	bottom: 12%;
	left: 50%;
	z-index: -1;
	margin: 0;
	font: 400 clamp(110px, 17vw, 280px)/1 var(--pyp-ps-deva);
	white-space: nowrap;
	color: rgba(29, 112, 68, 0.04);
	transform: translateX(-50%);
	pointer-events: none;
	user-select: none;
}

.pyp-ps-hero__grid {
	display: grid;
	gap: 22px;
	align-items: center;
}

.pyp-ps-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font: 400 12.5px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-crumbs a {
	color: var(--pyp-green);
	text-decoration: none;
}

.pyp-ps-crumbs .bi {
	font-size: 9px;
	opacity: 0.6;
}

.pyp-ps .pyp-ps-hero__title {
	margin: 0;
	font: 500 clamp(34px, 4.4vw, 68px)/1.02 var(--pyp-font-menu);
	letter-spacing: -0.025em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-ps .pyp-ps-hero__sa {
	margin: 10px 0 0;
	font: 400 clamp(20px, 1.9vw, 28px)/1.3 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.62);
}

.pyp-ps .pyp-ps-hero__lede {
	margin: 16px 0 0;
	font: 400 clamp(15px, 1.15vw, 17px)/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

/* the three facts: one glass strip, hairlines between */
.pyp-ps .pyp-ps-hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 26px 0 0;
	border: var(--pyp-ps-edge);
	border-radius: 20px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-hero__facts > div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	padding: 14px 16px;
}

.pyp-ps-hero__facts > div + div {
	border-left: 1px solid var(--pyp-ps-line);
}

.pyp-ps-hero__facts .bi {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font-size: 16px;
	color: #fff;
}

.pyp-ps .pyp-ps-hero__facts dd {
	margin: 0;
	font: 600 clamp(19px, 1.6vw, 24px)/1.05 var(--pyp-font-menu);
	color: var(--pyp-forest);
	white-space: nowrap;
}

.pyp-ps .pyp-ps-hero__facts dt {
	margin-top: 3px;
	font: 600 10.5px/1.25 var(--pyp-font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

/* the stage: arch, yantra, orbiting disciplines */
.pyp-ps-hero__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: clamp(320px, 40vw, 600px);
}

.pyp-ps-hero__yantra {
	position: absolute;
	top: -2%;
	left: 50%;
	z-index: -1;
	width: min(96%, 560px);
	aspect-ratio: 1;
	margin-left: calc(min(96%, 560px) / -2);
	color: var(--pyp-saffron-deep);
	fill: currentColor;
	opacity: 0.11;
	clip-path: circle(49%);
}

.pyp-ps-orbit {
	position: absolute;
	top: 2%;
	left: 50%;
	width: min(86%, 500px);
	aspect-ratio: 1;
	margin-left: calc(min(86%, 500px) / -2);
	border: 1px dashed rgba(29, 112, 68, 0.22);
	border-radius: 50%;
	animation: pyp-ps-turn 90s linear infinite;
}

.pyp-ps-orbit__seat {
	position: absolute;
	inset: 0;
	transform: rotate(calc(var(--pyp-ps-o) * 120deg - 50deg));
}

.pyp-ps-orbit .pyp-ps-ico {
	position: absolute;
	top: 0;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 14px 26px -16px rgba(15, 59, 39, 0.5);
	rotate: calc(var(--pyp-ps-o) * -120deg + 50deg);
	animation: pyp-ps-turn 90s linear infinite reverse;
}

.pyp-ps-hero__arch {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: min(70%, 400px);
	height: 84%;
	transform: translateX(-50%);
	background:
		radial-gradient(90% 60% at 50% 100%, rgba(156, 207, 104, 0.5), transparent 65%),
		linear-gradient(180deg, #1f7a49 0%, #145a36 55%, #0f3b27 100%);
	-webkit-mask: var(--pyp-ps-arch) center / 100% 100% no-repeat;
	mask: var(--pyp-ps-arch) center / 100% 100% no-repeat;
}

.pyp-ps-hero__line {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: calc(min(70%, 400px) + 28px);
	height: calc(84% + 14px);
	transform: translateX(-50%);
	overflow: visible;
	fill: none;
	stroke: rgba(74, 158, 69, 0.45);
	stroke-width: 1.25;
}

.pyp-ps-hero__photo {
	position: relative;
	width: min(90%, 470px);
	height: auto;
	filter: drop-shadow(0 22px 28px rgba(8, 32, 20, 0.32));
	animation: pyp-ps-rise 1100ms var(--pyp-ease-out) both;
}

@keyframes pyp-ps-rise {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: none; }
}

.pyp-ps-hero__om {
	position: absolute;
	top: 30%;
	left: 4%;
	width: 54px;
	height: 54px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 14px 28px -16px rgba(15, 59, 39, 0.45);
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

/* the Ganga: three currents, each at its own pace */
.pyp-ps-ganga {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: clamp(52px, 6vw, 90px);
	pointer-events: none;
}

.pyp-ps-ganga path {
	animation: pyp-ps-current 20s linear infinite;
}

.pyp-ps-ganga__a {
	fill: rgba(156, 207, 104, 0.22);
}

.pyp-ps-ganga__b {
	fill: rgba(47, 138, 76, 0.14);
	animation-duration: 14s !important;
	animation-direction: reverse !important;
}

.pyp-ps-ganga__c {
	fill: #fff;
	animation-duration: 26s !important;
}

@keyframes pyp-ps-current {
	to { transform: translateX(-720px); }
}

@media (min-width: 992px) {
	.pyp-ps-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: clamp(28px, 3.4vw, 64px);
	}

	.pyp-ps-hero__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.pyp-ps-hero__stage {
		grid-column: 2;
		grid-row: 1;
	}
}

/* 2. His words, lit as they are read
   ========================================================================== */

.pyp-ps-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 110px);
}

.pyp-ps-quote__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.pyp-ps-quote::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, #fff 100%),
		rgba(15, 59, 39, 0.08);
}

.pyp-ps-quote__panel {
	position: relative;
	margin: 0;
	padding: clamp(26px, 4vw, 60px) clamp(22px, 5vw, 80px);
	border: var(--pyp-ps-edge);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.42));
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(8, 32, 20, 0.55);
	text-align: center;
}

.pyp-ps-quote__om {
	display: block;
	width: 38px;
	height: 38px;
	margin: 0 auto 16px;
	color: var(--pyp-saffron-deep);
	fill: currentColor;
}

.pyp-ps-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.pyp-ps .pyp-ps-quote blockquote p {
	margin: 0;
	font: 500 clamp(24px, 3.1vw, 48px)/1.22 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-ps-quote__w {
	transition: color 420ms ease;
}

.pyp-ps.is-armed .pyp-ps-quote__w {
	color: rgba(15, 59, 39, 0.18);
}

.pyp-ps.is-armed .pyp-ps-quote__w.is-lit {
	color: var(--pyp-forest);
}

.pyp-ps-quote figcaption {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font: 600 12px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-quote figcaption::before,
.pyp-ps-quote figcaption::after {
	content: "";
	width: 28px;
	height: 1px;
	background: rgba(29, 112, 68, 0.35);
}

/* 3. His journey: four chapters, a magazine spread that opens one at a time.
   Wide screens: a row of panels; the open one shows its photograph whole
   (the panel takes the photo's own proportions, nothing cropped) with the
   story beside it, the others fold to spines. Hover, focus or tap opens one.
   Narrower screens: a swipe rail of chapters, photo above, story below.
   ========================================================================== */

.pyp-ps-journey {
	position: relative;
	padding-block: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 44px);
	background: #fff;
}

.pyp-ps-journey__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(20px, 2.4vw, 32px);
}

.pyp-ps .pyp-ps-journey__hint {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 500 13px/1 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-journey__hint .bi {
	font-size: 15px;
	color: var(--pyp-green);
}

.pyp-ps .pyp-ps-chapters {
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-chapters::-webkit-scrollbar {
	display: none;
}

.pyp-ps-ch {
	position: relative;
	display: flex;
	flex: 0 0 min(82%, 460px);
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(29, 112, 68, 0.08);
	border-radius: 24px;
	background: linear-gradient(160deg, #f7faf3 0%, #ebf3e3 100%);
	box-shadow: 0 24px 48px -32px rgba(8, 32, 20, 0.5);
	scroll-snap-align: start;
	outline: none;
}

.pyp-ps-ch:last-child {
	margin-right: var(--pyp-gutter);
}

.pyp-ps-ch:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

.pyp-ps-ch__media {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.pyp-ps-ch__media img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
}

.pyp-ps-ch__spine {
	display: none;
}

.pyp-ps-ch__body {
	padding: 18px 20px 22px;
}

.pyp-ps .pyp-ps-ch__index {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-ch__index span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font: 400 18px/1 var(--pyp-ps-deva);
	letter-spacing: 0;
	color: #fff;
}

.pyp-ps .pyp-ps-ch__sa {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 4px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-ps-ch__sa span {
	font: 400 clamp(26px, 2.4vw, 38px)/1.1 var(--pyp-ps-deva);
	letter-spacing: 0;
	text-transform: none;
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-ch__title {
	margin: 0;
	font: 500 clamp(22px, 2.1vw, 32px)/1.15 var(--pyp-font-menu);
	letter-spacing: -0.01em;
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-ch__text {
	margin: 10px 0 0;
	font: 400 15px/1.7 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

@media (min-width: 1200px) {
	.pyp-ps .pyp-ps-journey__hint {
		display: inline-flex;
	}

	.pyp-ps .pyp-ps-chapters {
		--pyp-ps-h: clamp(360px, 30vw, 500px);
		--pyp-ps-spine: clamp(88px, 7vw, 112px);
		--pyp-ps-gap: 12px;
		gap: var(--pyp-ps-gap);
		height: var(--pyp-ps-h);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pyp-ps-ch {
		display: block;
		flex: 0 0 var(--pyp-ps-spine);
		min-width: 0;
		margin: 0 !important;
		border-color: transparent;
		background: var(--pyp-forest);
		cursor: pointer;
		transition: flex-basis 820ms var(--pyp-ease-drawer), background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
	}

	.pyp-ps-ch.is-active {
		flex-basis: calc(100% - 3 * (var(--pyp-ps-spine) + var(--pyp-ps-gap)));
		border-color: rgba(29, 112, 68, 0.08);
		background: linear-gradient(160deg, #f7faf3 0%, #ebf3e3 100%);
		box-shadow: 0 34px 60px -38px rgba(8, 32, 20, 0.6);
		cursor: default;
	}

	/* the photo at its own proportions, the full height of the panel */
	.pyp-ps-ch__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: calc(var(--pyp-ps-h) * var(--pyp-ps-a));
	}

	.pyp-ps-ch__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.12);
		transform-origin: 30% 50%;
		transition: transform 1400ms var(--pyp-ease-out), filter 600ms ease;
		filter: saturate(0.6);
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__media img {
		transform: none;
		filter: none;
	}

	/* folded: the photo deepens to green under the spine */
	.pyp-ps-ch__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(15, 59, 39, 0.55) 0%, rgba(15, 59, 39, 0.82) 100%);
		transition: opacity 600ms ease;
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__media::after {
		opacity: 0;
	}

	.pyp-ps-ch__spine {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: var(--pyp-ps-spine);
		padding: 22px 0 24px;
		color: #fff;
		transition: opacity 260ms ease, transform 500ms var(--pyp-ease-out);
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__spine {
		opacity: 0;
		transform: translateX(-16px);
		pointer-events: none;
	}

	.pyp-ps-ch__num {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.12);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		font: 400 26px/1 var(--pyp-ps-deva);
		transition: transform 400ms var(--pyp-ease-out), background-color 300ms ease;
	}

	.pyp-ps-ch__spine-title {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font: 500 18px/1 var(--pyp-font-menu);
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.pyp-ps-ch__spine-sa {
		font: 400 24px/1 var(--pyp-ps-deva);
		color: #c8e6a0;
	}

	@media (hover: hover) {
		.pyp-ps-ch:not(.is-active):hover .pyp-ps-ch__num {
			background: rgba(255, 255, 255, 0.24);
			transform: translateY(-4px);
		}

		.pyp-ps-ch:not(.is-active):hover .pyp-ps-ch__media img {
			filter: saturate(0.9);
		}
	}

	/* the story beside the photo, rising in once the panel has opened */
	.pyp-ps-ch__body {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: calc(var(--pyp-ps-h) * var(--pyp-ps-a));
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 280px;
		padding: clamp(22px, 2.4vw, 44px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__body {
		opacity: 1;
		visibility: visible;
		transition: opacity 500ms ease 420ms, visibility 0s;
	}

	.pyp-ps-ch__body > * {
		transform: translateY(14px);
		transition: transform 600ms var(--pyp-ease-out);
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__body > * {
		transform: none;
	}

	.pyp-ps-ch.is-active .pyp-ps-ch__body > :nth-child(1) { transition-delay: 420ms; }
	.pyp-ps-ch.is-active .pyp-ps-ch__body > :nth-child(2) { transition-delay: 480ms; }
	.pyp-ps-ch.is-active .pyp-ps-ch__body > :nth-child(3) { transition-delay: 540ms; }
	.pyp-ps-ch.is-active .pyp-ps-ch__body > :nth-child(4) { transition-delay: 600ms; }

	/* soft light behind the story */
	.pyp-ps-ch__body::after {
		content: "";
		position: absolute;
		right: -40px;
		bottom: -60px;
		width: 260px;
		height: 260px;
		border-radius: 50%;
		background: radial-gradient(closest-side, rgba(156, 207, 104, 0.35), transparent);
		pointer-events: none;
	}
}

/* 4. How he teaches: four rings, from the outer life to the still centre.
   Each practice is a ring with its name running round it; the rings turn
   slower the further in they are, and the centre does not turn at all. The
   step being read lights its ring; the steps move inward on their own
   (a thin line in the open row shows the time) until a visitor takes over.
   ========================================================================== */

.pyp-ps-path {
	position: relative;
	padding-block: clamp(28px, 3.4vw, 56px) clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #fff 0%, #f1f6ec 100%);
}

.pyp-ps-path__grid {
	display: grid;
	grid-template-areas: "head" "mandala" "list";
	gap: 4px;
}

.pyp-ps-path__head {
	grid-area: head;
}

.pyp-ps-mandala {
	position: relative;
	grid-area: mandala;
	justify-self: center;
	width: min(100%, 340px);
	aspect-ratio: 1;
	margin-bottom: 14px;
}

/* soft light behind the rings */
.pyp-ps-mandala::before {
	content: "";
	position: absolute;
	inset: 6%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(156, 207, 104, 0.32), rgba(156, 207, 104, 0) 75%);
	filter: blur(18px);
}

.pyp-ps-mandala__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pyp-ps-ring__band {
	fill: none;
	stroke-width: 36;
	pointer-events: stroke;
	cursor: pointer;
	transition: stroke 600ms ease;
}

/* deeper green toward the centre */
.pyp-ps-ring[data-step="0"] .pyp-ps-ring__band { stroke: rgba(29, 112, 68, 0.045); }
.pyp-ps-ring[data-step="1"] .pyp-ps-ring__band { stroke: rgba(29, 112, 68, 0.07); }
.pyp-ps-ring[data-step="2"] .pyp-ps-ring__band { stroke: rgba(29, 112, 68, 0.095); }
.pyp-ps-ring[data-step="3"] .pyp-ps-ring__band { stroke: rgba(29, 112, 68, 0.12); }

.pyp-ps-ring.is-active .pyp-ps-ring__band {
	stroke: rgba(156, 207, 104, 0.45);
}

.pyp-ps-ring__turn {
	/* the view box's own origin, the centre of the rings */
	transform-box: view-box;
	transform-origin: 0 0;
	animation: pyp-ps-turn var(--pyp-ps-turn) linear infinite var(--pyp-ps-way);
	pointer-events: none;
}

.pyp-ps-ring__label {
	font: 600 11px 'PYP Tiro Devanagari', var(--pyp-font-menu);
	letter-spacing: 0.12em;
	dominant-baseline: central;
	fill: rgba(15, 59, 39, 0.32);
	transition: fill 600ms ease;
}

/* Devanagari keeps its letters joined; only the Latin is spaced */
.pyp-ps-ring__sa {
	letter-spacing: 0;
}

.pyp-ps-ring.is-active .pyp-ps-ring__label {
	fill: var(--pyp-forest);
}

.pyp-ps-ring__bead {
	fill: rgba(29, 112, 68, 0.28);
	transition: fill 600ms ease, r 600ms var(--pyp-ease-out);
}

.pyp-ps-ring.is-active .pyp-ps-ring__bead {
	r: 6;
	fill: var(--pyp-green);
}

/* the still centre */
.pyp-ps-mandala__light {
	fill: url(#pyp-ps-core-light);
	transform-box: fill-box;
	transform-origin: center;
	animation: pyp-ps-breathe 5s ease-in-out infinite alternate;
}

@keyframes pyp-ps-breathe {
	from { transform: scale(1); opacity: 0.6; }
	to   { transform: scale(1.9); opacity: 1; }
}

.pyp-ps-mandala__core {
	fill: #fff;
	stroke: rgba(29, 112, 68, 0.14);
	stroke-width: 1;
	filter: drop-shadow(0 8px 14px rgba(15, 59, 39, 0.22));
}

.pyp-ps-mandala__icon {
	--pyp-ico-bg: #fff;
	color: var(--pyp-green);
	opacity: 0;
	transition: opacity 500ms ease;
}

.pyp-ps-mandala__icon.is-active {
	opacity: 1;
}

/* the four steps, in one glass panel */
.pyp-ps .pyp-ps-path__list {
	grid-area: list;
	align-self: center;
	margin: 0;
	padding: 4px clamp(14px, 1.8vw, 24px);
	list-style: none;
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-path__step {
	position: relative;
}

.pyp-ps-path__step + .pyp-ps-path__step {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps .pyp-ps-path__q {
	margin: 0;
}

.pyp-ps-path__q button {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: 14px 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.pyp-ps-path__q button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
	border-radius: 12px;
}

.pyp-ps-path__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: rgba(29, 112, 68, 0.08);
	font: 400 22px/1 var(--pyp-ps-deva);
	color: var(--pyp-green);
	transition: background-color 400ms ease, color 400ms ease, box-shadow 400ms ease;
}

.pyp-ps-path__step.is-active .pyp-ps-path__num {
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	color: #fff;
}

.pyp-ps-path__names {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	min-width: 0;
}

.pyp-ps-path__sa {
	font: 400 24px/1.15 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps-path__en {
	font: 500 18px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-path__en small {
	margin-left: 6px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-path__q .pyp-ps-ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	opacity: 0.5;
	transition: opacity 400ms ease, transform 500ms var(--pyp-ease-out);
}

.pyp-ps-path__step.is-active .pyp-ps-path__q .pyp-ps-ico {
	opacity: 1;
	transform: scale(1.06);
}

@media (hover: hover) {
	.pyp-ps-path__step:not(.is-active) .pyp-ps-path__q button:hover .pyp-ps-ico {
		opacity: 0.85;
	}

	.pyp-ps-path__step:not(.is-active) .pyp-ps-path__q button:hover .pyp-ps-path__num {
		background: rgba(29, 112, 68, 0.14);
	}
}

.pyp-ps-path__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 520ms var(--pyp-ease-out);
}

.pyp-ps-path__a > div {
	overflow: hidden;
}

.pyp-ps-path__step.is-active .pyp-ps-path__a {
	grid-template-rows: 1fr;
}

.pyp-ps .pyp-ps-path__a p {
	margin: 0;
	padding: 0 0 18px 54px;
	font: 400 15px/1.7 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

/* the time left on this step, while the steps move on by themselves */
.pyp-ps-path__timer {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 54px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #9ccf68, var(--pyp-green));
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
}

.pyp-ps-path.is-auto .pyp-ps-path__step.is-active .pyp-ps-path__timer {
	opacity: 1;
	animation: pyp-ps-timer 7s linear forwards;
}

.pyp-ps-path.is-hold .pyp-ps-path__timer,
.pyp-ps-path.is-offscreen .pyp-ps-path__timer {
	animation-play-state: paused !important;
}

@keyframes pyp-ps-timer {
	to { transform: scaleX(1); }
}

@media (min-width: 992px) {
	.pyp-ps-path__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head mandala" "list mandala";
		column-gap: clamp(32px, 4vw, 72px);
		row-gap: 0;
	}

	.pyp-ps-mandala {
		align-self: center;
		width: min(100%, 540px);
		margin: 0;
	}
}

/* 5. What he teaches: four subjects, each drawn as it moves.
   A bento of glass tiles; each tile's drawing acts its subject out: the sun
   and moon balanced on one beam, a spine standing true to the plumb line, a
   bead riding the breath, and the teacher's loop of see, cue, adjust, hold.
   Phones: a swipe rail of tiles.
   ========================================================================== */

.pyp-ps-craft {
	position: relative;
	padding-block: clamp(12px, 1.6vw, 24px) clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #f1f6ec 0%, #f7faf3 100%);
}

.pyp-ps-craft__grid {
	display: grid;
	gap: 4px;
}

.pyp-ps .pyp-ps-craft__tiles {
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-craft__tiles::-webkit-scrollbar {
	display: none;
}

.pyp-ps-tile {
	position: relative;
	display: flex;
	flex: 0 0 min(80%, 360px);
	flex-direction: column;
	overflow: hidden;
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
	scroll-snap-align: start;
	transition: transform 500ms var(--pyp-ease-out), box-shadow 500ms var(--pyp-ease-out);
}

.pyp-ps-tile:last-child {
	margin-right: var(--pyp-gutter);
}

.pyp-ps-tile__art {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	place-items: center;
	min-height: 170px;
	padding: 18px 18px 0;
	background: radial-gradient(70% 80% at 50% 45%, rgba(156, 207, 104, 0.22), rgba(156, 207, 104, 0) 70%);
}

.pyp-ps-tile__art svg {
	display: block;
	width: 100%;
	max-height: 210px;
	overflow: visible;
}

.pyp-ps-tile__copy {
	padding: 14px 22px 22px;
}

.pyp-ps .pyp-ps-tile__sa {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-ps-tile__sa span {
	font: 400 26px/1.1 var(--pyp-ps-deva);
	letter-spacing: 0;
	text-transform: none;
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-tile__name {
	margin: 0;
	font: 500 20px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-tile__text {
	margin: 6px 0 0;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

@media (hover: hover) {
	.pyp-ps.is-armed .pyp-ps-tile.is-in:hover {
		transform: translateY(-6px);
		box-shadow: inset 0 1px 0 #fff, 0 30px 50px -30px rgba(15, 59, 39, 0.5);
		transition-delay: 0s;
	}
}

/* the drawings: shared ink */
.pyp-ps-tile__art text {
	font: italic 500 12px var(--pyp-font-menu);
	letter-spacing: 0.06em;
	fill: var(--pyp-ink-soft);
}

/* Hatha: the sun and the moon on one beam, rocking into balance */
.pyp-ps-art__halo {
	fill: rgba(255, 255, 255, 0.55);
	stroke: rgba(29, 112, 68, 0.1);
	stroke-dasharray: 2 6;
}

.pyp-ps-art__ground {
	stroke: rgba(29, 112, 68, 0.2);
	stroke-width: 2;
	stroke-linecap: round;
}

.pyp-ps-art__fulcrum {
	fill: var(--pyp-green);
}

.pyp-ps-art__beam {
	transform-box: view-box;
	transform-origin: 160px 140px;
	animation: pyp-ps-balance 6s ease-in-out infinite;
}

.pyp-ps-art__beam > line {
	stroke: var(--pyp-forest);
	stroke-width: 4;
	stroke-linecap: round;
}

@keyframes pyp-ps-balance {
	0%, 100% { transform: rotate(-8deg); }
	50%      { transform: rotate(8deg); }
}

.pyp-ps-art__sun circle {
	fill: #f6c177;
}

.pyp-ps-art__rays {
	stroke: #f0b25f;
	stroke-width: 3;
	stroke-linecap: round;
	animation: pyp-ps-turn 24s linear infinite;
}

.pyp-ps-art__moon {
	fill: #f4f8ef;
	stroke: var(--pyp-forest);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

/* Alignment: vertebrae sway off the line, then stand true and light up */
.pyp-ps-art__plumb {
	stroke: rgba(29, 112, 68, 0.35);
	stroke-width: 1.5;
	stroke-dasharray: 3 5;
}

.pyp-ps-art__bob {
	fill: var(--pyp-green);
}

.pyp-ps-art__head {
	fill: none;
	stroke: var(--pyp-forest);
	stroke-width: 2.5;
}

.pyp-ps-art__vert {
	fill: rgba(29, 112, 68, 0.22);
	animation: pyp-ps-align 6s var(--pyp-ease-out) infinite;
	animation-delay: calc(var(--pyp-ps-v) * 40ms);
}

@keyframes pyp-ps-align {
	0%, 100% { transform: translateX(var(--pyp-ps-off)); fill: rgba(29, 112, 68, 0.22); }
	40%, 62% { transform: translateX(0); fill: var(--pyp-green); }
}

/* Vinyasa: a bead riding the breath */
.pyp-ps-art__wave {
	fill: none;
	stroke: rgba(29, 112, 68, 0.18);
	stroke-width: 10;
	stroke-linecap: round;
}

.pyp-ps-art__wave-glow {
	fill: none;
	stroke: var(--pyp-green);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 0.18 0.82;
	animation: pyp-ps-flowline 7s linear infinite;
}

@keyframes pyp-ps-flowline {
	from { stroke-dashoffset: 0.18; }
	to   { stroke-dashoffset: -0.82; }
}

.pyp-ps-art__bead {
	fill: #fff;
	stroke: var(--pyp-green);
	stroke-width: 4;
	filter: drop-shadow(0 4px 6px rgba(15, 59, 39, 0.3));
}

/* Teaching: see, cue, adjust, hold, lit in turn */
.pyp-ps-art__loop {
	fill: none;
	stroke: rgba(29, 112, 68, 0.22);
	stroke-width: 1.5;
	stroke-dasharray: 4 6;
	transform-box: view-box;
	transform-origin: 110px 110px;
	animation: pyp-ps-turn 40s linear infinite;
}

.pyp-ps-art__node circle {
	fill: #fff;
	stroke: rgba(29, 112, 68, 0.2);
	stroke-width: 1.5;
	animation: pyp-ps-node 8s ease-in-out infinite;
	animation-delay: calc(var(--pyp-ps-n) * 2s);
}

.pyp-ps-art__node text {
	font: 600 10.5px var(--pyp-font-menu);
	font-style: normal;
	letter-spacing: 0.02em;
	dominant-baseline: central;
	fill: var(--pyp-forest);
	animation: pyp-ps-node-word 8s ease-in-out infinite;
	animation-delay: calc(var(--pyp-ps-n) * 2s);
}

@keyframes pyp-ps-node {
	0%, 30%, 100% { fill: #fff; stroke: rgba(29, 112, 68, 0.2); }
	5%, 22%       { fill: var(--pyp-green); stroke: var(--pyp-green); }
}

@keyframes pyp-ps-node-word {
	0%, 30%, 100% { fill: var(--pyp-forest); }
	5%, 22%       { fill: #fff; }
}

.pyp-ps-art__centre {
	--pyp-ico-bg: #f4f8ef;
	color: var(--pyp-green);
}

.is-offscreen .pyp-ps-art__beam,
.is-offscreen .pyp-ps-art__rays,
.is-offscreen .pyp-ps-art__vert,
.is-offscreen .pyp-ps-art__wave-glow,
.is-offscreen .pyp-ps-art__loop,
.is-offscreen .pyp-ps-art__node circle,
.is-offscreen .pyp-ps-art__node text {
	animation-play-state: paused;
}

/* wide screens: the bento. Hatha, the root of his teaching, stands tall in the middle */
@media (min-width: 992px) {
	.pyp-ps-craft__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-areas:
			"head    hatha   anatomy"
			"vinyasa hatha   teaching";
		gap: 16px;
	}

	.pyp-ps-craft__head {
		grid-area: head;
		align-self: center;
		margin: 0;
	}

	.pyp-ps-craft__head .pyp-ps-title {
		font-size: clamp(34px, 3.4vw, 52px);
	}

	.pyp-ps .pyp-ps-craft__tiles {
		display: contents;
	}

	.pyp-ps-tile {
		margin: 0 !important;
	}

	.pyp-ps-tile--hatha    { grid-area: hatha; }
	.pyp-ps-tile--anatomy  { grid-area: anatomy; }
	.pyp-ps-tile--vinyasa  { grid-area: vinyasa; }
	.pyp-ps-tile--teaching { grid-area: teaching; }

	.pyp-ps-tile--hatha .pyp-ps-tile__art svg {
		max-height: 400px;
	}

	.pyp-ps-tile--hatha .pyp-ps-tile__copy {
		padding: 18px 28px 28px;
	}

	.pyp-ps-tile--hatha .pyp-ps-tile__name {
		font-size: 26px;
	}

	.pyp-ps-tile--hatha .pyp-ps-tile__text {
		font-size: 15px;
	}
}

/* 6. Train with him in Rishikesh
   ========================================================================== */

.pyp-ps-courses {
	padding-block: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 44px);
	background: linear-gradient(180deg, #f1f6ec 0%, #fff 60%);
}

.pyp-ps-courses__grid {
	display: grid;
	gap: 8px;
}

.pyp-ps-courses__photo {
	display: none;
	margin: 26px 0 0;
}

.pyp-ps-courses__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	object-fit: cover;
	object-position: center 35%;
	box-shadow: 0 30px 60px -36px rgba(8, 32, 20, 0.55);
}

.pyp-ps .pyp-ps-courses__list {
	margin: 0;
	padding: 6px clamp(14px, 1.8vw, 24px);
	list-style: none;
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-course {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas: "mark body go" "mark price go";
	column-gap: 14px;
	align-items: center;
	padding: 14px 0;
}

.pyp-ps-course + .pyp-ps-course {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-course__hours,
.pyp-ps-course > .pyp-ps-ico {
	grid-area: mark;
	justify-self: center;
}

.pyp-ps-course__hours {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 18px;
	background: linear-gradient(145deg, #fff, #eef5e7);
	box-shadow: var(--pyp-neu-raised);
}

.pyp-ps-course__hours b {
	font: 600 22px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-course__hours small {
	margin-top: -10px;
	font: 600 9px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-course > .pyp-ps-ico {
	width: 60px;
	height: 60px;
	border-radius: 18px;
}

.pyp-ps-course__body {
	grid-area: body;
	min-width: 0;
}

.pyp-ps .pyp-ps-course__name {
	margin: 0;
	font: 500 17px/1.3 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-course__name a {
	color: inherit;
	text-decoration: none;
}

/* the whole row opens the course */
.pyp-ps-course__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pyp-ps .pyp-ps-course__meta {
	margin: 3px 0 0;
	font: 400 13px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-course__price {
	grid-area: price;
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-top: 4px;
	font: 600 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
}

.pyp-ps-course__price small {
	font: 500 11px/1 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps .pyp-ps-course__enquire {
	position: relative;
	z-index: 1;
	grid-area: go;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	box-shadow: 0 10px 20px -10px rgba(15, 59, 39, 0.7);
	color: #fff;
	text-decoration: none;
	transition: transform 160ms var(--pyp-ease-out), box-shadow 200ms ease;
}

.pyp-ps-course__enquire span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pyp-ps-course__enquire:active {
	transform: scale(0.94);
}

.pyp-ps-course::before {
	content: "";
	position: absolute;
	inset: 4px -10px;
	z-index: -1;
	border-radius: 16px;
	background: #fff;
	opacity: 0;
	transition: opacity 240ms ease;
}

@media (hover: hover) {
	.pyp-ps-course:hover::before {
		opacity: 1;
	}

	.pyp-ps .pyp-ps-course__enquire:hover {
		color: #fff;
		box-shadow: 0 14px 26px -10px rgba(15, 59, 39, 0.8);
	}
}

@media (min-width: 768px) {
	.pyp-ps-course {
		grid-template-columns: 64px minmax(0, 1fr) auto auto;
		grid-template-areas: "mark body price go";
		column-gap: 18px;
		padding: 16px 0;
	}

	.pyp-ps-course__price {
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		margin: 0;
		font-size: 18px;
	}

	.pyp-ps .pyp-ps-course__enquire {
		gap: 8px;
		grid-auto-flow: column;
		width: auto;
		height: 42px;
		padding: 0 18px;
		border-radius: 999px;
		font: 500 14px/1 var(--pyp-font-menu);
	}

	.pyp-ps-course__enquire span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* what every training includes, at the foot of the list */
.pyp-ps-courses__incl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: 4px;
	padding: 14px 0 12px;
	border-top: 1px solid var(--pyp-ps-line);
	font: 500 13px/1.3 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-courses__incl span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.pyp-ps-courses__incl .bi {
	font-size: 15px;
	color: var(--pyp-green);
}

.pyp-ps-courses__incl .pyp-ps-courses__incl-label {
	flex-basis: 100%;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

/* wide screens: both columns end on one line, the photo taking whatever
   height the list leaves, the rows spreading down the panel */
@media (min-width: 992px) {
	.pyp-ps-courses__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
		column-gap: clamp(28px, 3.4vw, 64px);
		align-items: stretch;
	}

	.pyp-ps-courses__grid > .pyp-ps-head {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}

	.pyp-ps-courses__photo {
		display: block;
		flex: 1 1 0;
		min-height: 240px;
	}

	.pyp-ps .pyp-ps-courses__list {
		display: flex;
		flex-direction: column;
	}

	.pyp-ps-course {
		flex: 1 0 auto;
	}

	.pyp-ps-courses__incl {
		margin-top: auto;
	}
}

/* 7. Questions
   ========================================================================== */

.pyp-ps-faq {
	padding-block: clamp(20px, 2.6vw, 40px) clamp(24px, 3vw, 48px);
	background: #fff;
}

.pyp-ps-faq__grid {
	display: grid;
	gap: 8px;
}

.pyp-ps-faq__list {
	padding: 4px clamp(16px, 2vw, 28px);
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background: linear-gradient(135deg, rgba(241, 246, 236, 0.9), rgba(255, 255, 255, 0.6));
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-qa + .pyp-ps-qa {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps .pyp-ps-qa h3 {
	margin: 0;
}

.pyp-ps-qa button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	border: 0;
	background: none;
	font: 500 clamp(16px, 1.3vw, 18px)/1.35 var(--pyp-font-menu);
	color: var(--pyp-forest);
	text-align: left;
	cursor: pointer;
}

.pyp-ps-qa button .bi {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(29, 112, 68, 0.08);
	font-size: 13px;
	color: var(--pyp-green);
	transition: transform 360ms var(--pyp-ease-out), background-color 240ms ease, color 240ms ease;
}

.pyp-ps-qa button[aria-expanded="true"] .bi {
	background: var(--pyp-green);
	color: #fff;
	transform: rotate(45deg);
}

.pyp-ps-qa__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 420ms var(--pyp-ease-out);
}

.pyp-ps-qa__a > div {
	overflow: hidden;
}

.pyp-ps-qa.is-open .pyp-ps-qa__a {
	grid-template-rows: 1fr;
}

.pyp-ps .pyp-ps-qa__a p {
	margin: 0;
	padding: 0 48px 18px 0;
	font: 400 15px/1.7 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

/* the side: heading above, a way to ask pinned to the foot, so the column
   ends where the questions end (phones: the card follows the questions) */
.pyp-ps-faq__side {
	display: contents;
}

.pyp-ps-faq__side .pyp-ps-head {
	order: 0;
}

.pyp-ps-faq__list {
	order: 1;
}

.pyp-ps-ask {
	order: 2;
	margin-top: 10px;
	padding: 18px;
	border: var(--pyp-ps-edge);
	border-radius: 24px;
	background:
		radial-gradient(80% 90% at 100% 0%, rgba(156, 207, 104, 0.28), rgba(156, 207, 104, 0) 70%),
		var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-ask__who {
	display: flex;
	gap: 14px;
	align-items: center;
}

.pyp-ps-ask__who img {
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	border: 2px solid #fff;
	border-radius: 18px;
	object-fit: cover;
	object-position: center 30%;
	box-shadow: 0 10px 20px -12px rgba(15, 59, 39, 0.5);
}

.pyp-ps .pyp-ps-ask__title {
	margin: 0;
	font: 500 18px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-ask__text {
	margin: 4px 0 0;
	font: 400 14px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-ask__actions {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 8px;
	margin-top: 16px;
}

.pyp-ps .pyp-ps-ask__actions .pyp-ps-btn {
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
}

.pyp-ps .pyp-ps-ask__actions .pyp-ps-btn--ghost {
	border-color: rgba(29, 112, 68, 0.14);
	background: rgba(255, 255, 255, 0.75);
}

.pyp-ps .pyp-ps-ask__hours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--pyp-ps-line);
	font: 500 12.5px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-ask__hours .bi {
	color: var(--pyp-green);
}

@media (min-width: 992px) {
	.pyp-ps-faq__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
		column-gap: clamp(28px, 3.4vw, 64px);
		align-items: stretch;
	}

	.pyp-ps-faq__side {
		display: flex;
		flex-direction: column;
	}

	.pyp-ps-faq__side .pyp-ps-head {
		margin-bottom: 20px;
	}

	.pyp-ps-ask {
		margin-top: auto;
	}

	/* both columns end on the same line, whichever is taller */
	.pyp-ps-faq__list {
		align-self: stretch;
	}
}

/* The guru pages (swami-atma-jnanananda-giri.php, …): parts beyond the founder's page
   ========================================================================== */

/* a photograph inside the arch, where a page has no clean cut-out */
.pyp-ps-hero__stage--framed .pyp-ps-hero__arch {
	width: min(78%, 430px);
	height: 94%;
	overflow: hidden;
	background: var(--pyp-forest);
	box-shadow: 0 40px 70px -40px rgba(8, 32, 20, 0.6);
}

.pyp-ps-hero__stage--framed .pyp-ps-hero__arch img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	transform: scale(1.1);
	transform-origin: 50% 38%;
	animation: pyp-ps-settle 1400ms var(--pyp-ease-out) both;
}

/* settles in from a touch closer, leaving the framing's own zoom alone */
@keyframes pyp-ps-settle {
	from { opacity: 0; scale: 1.06; }
	to   { opacity: 1; scale: 1; }
}

/* a soft green floor so the photo settles into the page */
.pyp-ps-hero__stage--framed .pyp-ps-hero__arch::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 30%;
	background: linear-gradient(180deg, rgba(15, 59, 39, 0), rgba(15, 59, 39, 0.35));
}

.pyp-ps-hero__stage--framed .pyp-ps-hero__line {
	width: calc(min(78%, 430px) + 28px);
	height: calc(94% + 14px);
}

/* the full name, under the Devanagari */
.pyp-ps .pyp-ps-hero__full {
	margin: 4px 0 0;
	font: 600 12px/1.4 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

/* His path: stations along one thread, lit in turn as it draws across */
.pyp-ps-stations {
	padding-block: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px);
	background: #fff;
}

.pyp-ps .pyp-ps-stations__list {
	position: relative;
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-stations__list::-webkit-scrollbar {
	display: none;
}

.pyp-ps-station {
	position: relative;
	flex: 0 0 min(76%, 320px);
	padding: 0 6px;
	text-align: center;
	scroll-snap-align: start;
}

.pyp-ps-station:last-child {
	margin-right: var(--pyp-gutter);
}

/* the thread, through every node */
.pyp-ps-station::before {
	content: "";
	position: absolute;
	top: 32px;
	right: -7px;
	left: -7px;
	z-index: 0;
	height: 2px;
	background: linear-gradient(90deg, #9ccf68, var(--pyp-green));
	transform: scaleX(var(--pyp-ps-thread, 1));
	transform-origin: left;
	transition: transform 700ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-ps-i) * 220ms);
}

.pyp-ps-station:first-child::before {
	left: 50%;
}

.pyp-ps-station:last-child::before {
	right: 50%;
}

.pyp-ps-station__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 22px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: 0 0 0 6px #fff, 0 16px 30px -18px rgba(15, 59, 39, 0.5);
}

.pyp-ps .pyp-ps-station__sa {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin: 0 0 4px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-ps-station__sa span {
	font: 400 26px/1.15 var(--pyp-ps-deva);
	letter-spacing: 0;
	text-transform: none;
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-station__title {
	margin: 0;
	font: 500 19px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-station__text {
	margin: 8px 0 0;
	font: 400 14.5px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps.is-armed .pyp-ps-stations__list {
	--pyp-ps-thread: 0;
}

.pyp-ps.is-armed .pyp-ps-stations__list.is-in {
	--pyp-ps-thread: 1;
}

.pyp-ps.is-armed .pyp-ps-stations__list .pyp-ps-station__node,
.pyp-ps.is-armed .pyp-ps-stations__list .pyp-ps-station > p,
.pyp-ps.is-armed .pyp-ps-stations__list .pyp-ps-station > h3 {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 600ms var(--pyp-ease-out), transform 700ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-ps-i) * 220ms + 120ms);
}

.pyp-ps.is-armed .pyp-ps-stations__list.is-in .pyp-ps-station__node,
.pyp-ps.is-armed .pyp-ps-stations__list.is-in .pyp-ps-station > p,
.pyp-ps.is-armed .pyp-ps-stations__list.is-in .pyp-ps-station > h3 {
	opacity: 1;
	transform: none;
}

.pyp-ps.is-armed .pyp-ps-stations__list[data-pyp-ps-reveal] {
	opacity: 1;
	transform: none;
}

@media (min-width: 992px) {
	.pyp-ps .pyp-ps-stations__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pyp-ps-station {
		margin: 0 !important;
		padding: 0 clamp(12px, 1.6vw, 26px);
	}

	.pyp-ps-station::before {
		right: 0;
		left: 0;
	}
}

/* Om and the four states: Om drawn stroke by stroke, each stroke a state of
   the mind. The lit stroke glows saffron (Om is sacred); its note sits
   beside it with a hairline running to the stroke. Phones: the Om above,
   the notes as a list that opens one at a time. */
.pyp-ps-aum {
	position: relative;
	overflow: hidden;
	padding-block: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(40% 50% at 50% 62%, rgba(246, 193, 119, 0.16), rgba(246, 193, 119, 0) 70%),
		linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps-aum__stage {
	display: grid;
	gap: 18px;
}

.pyp-ps-aum__om {
	display: block;
	justify-self: center;
	width: min(62%, 250px);
	height: auto;
	overflow: visible;
}

.pyp-ps-aum__stroke {
	fill: none;
	stroke: rgba(29, 112, 68, 0.2);
	stroke-width: 19;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	cursor: pointer;
	transition: stroke 600ms ease, filter 600ms ease, stroke-dashoffset 1300ms var(--pyp-ease-out);
}

.pyp-ps-aum__dot {
	fill: rgba(29, 112, 68, 0.2);
	transform-box: fill-box;
	transform-origin: center;
	cursor: pointer;
	transition: fill 600ms ease, filter 600ms ease, transform 700ms var(--pyp-ease-out);
}

.pyp-ps-aum__stroke.is-active {
	stroke: var(--pyp-saffron-deep);
	filter: drop-shadow(0 0 10px rgba(217, 130, 43, 0.45));
}

.pyp-ps-aum__dot.is-active {
	fill: var(--pyp-saffron-deep);
	filter: drop-shadow(0 0 12px rgba(217, 130, 43, 0.6));
	animation: pyp-ps-aum-glow 2.6s ease-in-out infinite alternate;
}

@keyframes pyp-ps-aum-glow {
	to { transform: scale(1.18); }
}

/* drawn in, stroke by stroke, the first time it is seen */
.pyp-ps.is-armed .pyp-ps-aum__stage:not(.is-in) .pyp-ps-aum__stroke {
	stroke-dashoffset: 1;
}

.pyp-ps.is-armed .pyp-ps-aum__stage:not(.is-in) .pyp-ps-aum__dot {
	transform: scale(0);
}

.pyp-ps-aum__stage .pyp-ps-aum__stroke,
.pyp-ps-aum__stage .pyp-ps-aum__dot {
	transition-delay: 0s, 0s, calc(var(--pyp-ps-k) * 260ms + 150ms);
}

.pyp-ps.is-armed .pyp-ps-aum__stage[data-pyp-ps-reveal] {
	opacity: 1;
	transform: none;
}

/* the notes */
.pyp-ps .pyp-ps-aum__notes {
	margin: 0;
	padding: 4px clamp(14px, 1.8vw, 22px);
	list-style: none;
	border: var(--pyp-ps-edge);
	border-radius: 24px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-aum__item + .pyp-ps-aum__item {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-aum__item button {
	display: block;
	width: 100%;
	padding: 12px 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.pyp-ps-aum__item button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
	border-radius: 10px;
}

.pyp-ps-aum__key {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.pyp-ps-aum__letter {
	font: 400 30px/1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.4);
	transition: color 500ms ease;
}

.pyp-ps-aum__sa {
	font: 400 21px/1.1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.6);
}

.pyp-ps-aum__en {
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
	transition: color 500ms ease;
}

.pyp-ps-aum__text {
	display: none;
	margin-top: 6px;
	font: 400 14.5px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps-aum__text b {
	font-weight: 600;
	color: var(--pyp-forest);
}

.pyp-ps-aum__item.is-active .pyp-ps-aum__letter {
	color: var(--pyp-saffron-deep);
}

.pyp-ps-aum__item.is-active .pyp-ps-aum__en {
	color: var(--pyp-forest);
}

.pyp-ps-aum__item.is-active .pyp-ps-aum__text {
	display: block;
	animation: pyp-ps-fade 500ms var(--pyp-ease-out);
}

@keyframes pyp-ps-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* wide screens: the notes around the drawing, each line running to its stroke */
@media (min-width: 992px) {
	.pyp-ps-aum__stage {
		--pyp-ps-h: clamp(440px, 38vw, 580px);
		--pyp-ps-w: calc(var(--pyp-ps-h) * 0.893);
		position: relative;
		display: block;
		height: var(--pyp-ps-h);
		margin-top: 10px;
	}

	.pyp-ps-aum__om {
		position: absolute;
		top: 0;
		left: 50%;
		width: var(--pyp-ps-w);
		height: var(--pyp-ps-h);
		transform: translateX(-50%);
	}

	.pyp-ps .pyp-ps-aum__notes {
		position: static;
		padding: 0;
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	.pyp-ps-aum__item {
		position: absolute;
		top: calc(var(--pyp-ps-top) - 18px);
		width: calc(50% - var(--pyp-ps-w) / 2 - 36px);
		border: 0 !important;
	}

	.pyp-ps-aum__item--left {
		left: 0;
		text-align: right;
	}

	.pyp-ps-aum__item--right {
		right: 0;
	}

	.pyp-ps-aum__item button {
		padding: 0;
		text-align: inherit;
	}

	.pyp-ps-aum__item--left .pyp-ps-aum__key {
		justify-content: flex-end;
	}

	.pyp-ps-aum__text {
		display: block;
		opacity: 0.5;
		transition: opacity 500ms ease;
	}

	.pyp-ps-aum__item.is-active .pyp-ps-aum__text {
		opacity: 1;
		animation: none;
	}

	/* the hairline from the note into the drawing, ending in a point at the stroke */
	.pyp-ps-aum__item::after {
		content: "";
		position: absolute;
		top: 18px;
		width: calc(36px + var(--pyp-ps-w) * var(--pyp-ps-reach));
		height: 1px;
		background: rgba(29, 112, 68, 0.28);
		transform-origin: var(--pyp-ps-from);
		transition: background-color 500ms ease, transform 600ms var(--pyp-ease-out);
	}

	.pyp-ps-aum__item::before {
		content: "";
		position: absolute;
		top: 15px;
		z-index: 1;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: rgba(29, 112, 68, 0.4);
		transition: background-color 500ms ease, box-shadow 500ms ease;
	}

	.pyp-ps-aum__item--left {
		--pyp-ps-from: left;
	}

	.pyp-ps-aum__item--left::after {
		left: calc(100% + 10px);
	}

	.pyp-ps-aum__item--left::before {
		left: calc(100% + 10px + 36px + var(--pyp-ps-w) * var(--pyp-ps-reach) - 4px);
	}

	.pyp-ps-aum__item--right {
		--pyp-ps-from: right;
	}

	.pyp-ps-aum__item--right::after {
		right: calc(100% + 10px);
	}

	.pyp-ps-aum__item--right::before {
		right: calc(100% + 10px + 36px + var(--pyp-ps-w) * var(--pyp-ps-reach) - 4px);
	}

	.pyp-ps-aum__item.is-active::after {
		background: var(--pyp-saffron-deep);
	}

	.pyp-ps-aum__item.is-active::before {
		background: var(--pyp-saffron-deep);
		box-shadow: 0 0 0 5px rgba(217, 130, 43, 0.18);
	}

	.pyp-ps.is-armed .pyp-ps-aum__stage:not(.is-in) .pyp-ps-aum__item::after {
		transform: scaleX(0);
	}
}

.is-offscreen .pyp-ps-aum__dot {
	animation-play-state: paused;
}

/* What he teaches: an open list, one practice to a line. No panel: rows
   on hairlines, the Sanskrit name large at the start; a row lights from the
   left as the pointer passes. */
.pyp-ps-classes {
	padding-block: clamp(28px, 3.6vw, 56px);
	background: linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

.pyp-ps-classes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 32px;
	margin-bottom: clamp(16px, 2vw, 28px);
}

.pyp-ps-classes__head .pyp-ps-lede {
	margin: 0;
}

.pyp-ps .pyp-ps-classes__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-class {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "sa ico" "body body";
	gap: 6px 16px;
	align-items: center;
	padding: 18px 4px;
	border-bottom: 1px solid var(--pyp-ps-line);
}

/* the light that sweeps in from the left */
.pyp-ps-class::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(156, 207, 104, 0.2), rgba(156, 207, 104, 0) 75%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 600ms var(--pyp-ease-out);
}

/* and the line beneath it */
.pyp-ps-class::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--pyp-green), rgba(156, 207, 104, 0));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 800ms var(--pyp-ease-out);
}

.pyp-ps-class__sa {
	grid-area: sa;
	font: 400 clamp(28px, 3.2vw, 52px)/1.1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.3);
	transition: color 500ms ease, transform 600ms var(--pyp-ease-out);
}

.pyp-ps-class__body {
	grid-area: body;
	min-width: 0;
}

.pyp-ps .pyp-ps-class__name {
	margin: 0;
	font: 500 clamp(20px, 1.8vw, 26px)/1.2 var(--pyp-font-menu);
	letter-spacing: -0.01em;
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-class__text {
	margin: 6px 0 0;
	font: 400 15px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps-class .pyp-ps-ico {
	grid-area: ico;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	transition: transform 600ms var(--pyp-ease-out), box-shadow 400ms ease;
}

@media (hover: hover) {
	.pyp-ps-class:hover::before,
	.pyp-ps-class:hover::after {
		transform: scaleX(1);
	}

	.pyp-ps-class:hover .pyp-ps-class__sa {
		color: var(--pyp-green);
		transform: translateX(8px);
	}

	.pyp-ps-class:hover .pyp-ps-ico {
		transform: translateY(-4px) rotate(-6deg);
		box-shadow: 8px 12px 20px -10px rgba(15, 59, 39, 0.4), inset -2px -2px 5px rgba(29, 112, 68, 0.08);
	}
}

.pyp-ps.is-armed .pyp-ps-class[data-pyp-ps-reveal] {
	transition-delay: calc(var(--pyp-ps-i) * 90ms);
}

@media (min-width: 768px) {
	.pyp-ps-class {
		grid-template-columns: minmax(150px, 0.85fr) minmax(0, 2.4fr) auto;
		grid-template-areas: "sa body ico";
		gap: 0 clamp(20px, 3vw, 48px);
		padding: clamp(20px, 2.2vw, 30px) 12px;
	}
}

/* Count with him: Surya Namaskar A in the Sanskrit count. A circle that
   breathes (swelling on the inhale, settling on the exhale) and a dial
   that fills and empties with the breath; the nine counts beside it. */
.pyp-ps-count {
	padding-block: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(45% 60% at 75% 50%, rgba(156, 207, 104, 0.22), rgba(156, 207, 104, 0) 70%),
		linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps-count__grid {
	display: grid;
	grid-template-areas: "head" "stage" "list";
	gap: 8px;
}

.pyp-ps-count__head {
	grid-area: head;
}

.pyp-ps-count__stage {
	position: relative;
	grid-area: stage;
	display: grid;
	justify-items: center;
	gap: 18px;
	margin-bottom: 14px;
}

.pyp-ps-count__breath,
.pyp-ps-count__now {
	grid-area: 1 / 1;
}

.pyp-ps-count__breath {
	position: relative;
	width: min(100%, 320px);
	aspect-ratio: 1;
}

.pyp-ps-count__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	transform: scale(0.8);
	transition: transform var(--pyp-ps-step, 3200ms) cubic-bezier(0.45, 0, 0.55, 1);
}

.pyp-ps-count__ring--3 {
	background: radial-gradient(closest-side, rgba(156, 207, 104, 0), rgba(156, 207, 104, 0.18));
}

.pyp-ps-count__ring--2 {
	inset: 9%;
	background: rgba(156, 207, 104, 0.16);
	transition-delay: 60ms;
}

.pyp-ps-count__ring--1 {
	inset: 18%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
	transition-delay: 120ms;
}

.pyp-ps-count[data-breath="in"] .pyp-ps-count__ring {
	transform: scale(1);
}

.pyp-ps-count__dial {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.pyp-ps-count__track {
	fill: none;
	stroke: rgba(29, 112, 68, 0.1);
	stroke-width: 2;
}

.pyp-ps-count__fill {
	fill: none;
	stroke: var(--pyp-green);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--pyp-ps-step, 3200ms) cubic-bezier(0.45, 0, 0.55, 1);
}

.pyp-ps-count[data-breath="in"] .pyp-ps-count__fill {
	stroke-dashoffset: 0;
}

.pyp-ps-count__now {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	gap: 4px;
	text-align: center;
	pointer-events: none;
}

.pyp-ps-count__num {
	font: 400 clamp(60px, 7vw, 92px)/1 var(--pyp-ps-deva);
	color: var(--pyp-green);
}

.pyp-ps-count__word {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font: 400 22px/1.1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.65);
}

.pyp-ps-count__word b {
	font: 500 16px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-count__breathe {
	margin-top: 6px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-count__pose {
	font: 500 14px/1.3 var(--pyp-font-menu);
	color: var(--pyp-ink-soft);
}

.pyp-ps-count__play {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(29, 112, 68, 0.18);
	border-radius: 999px;
	background: #fff;
	font: 500 14px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--pyp-ease-out);
}

.pyp-ps-count__play:active {
	transform: scale(0.96);
}

.pyp-ps-count__play[aria-pressed="true"] {
	border-color: var(--pyp-green);
	background: var(--pyp-green);
	color: #fff;
}

.pyp-ps-count__play:focus-visible,
.pyp-ps-count__step button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

/* the nine counts: a rail on phones, a grid of three by three when wide */
.pyp-ps .pyp-ps-count__list {
	grid-area: list;
	display: flex;
	gap: 10px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-count__list::-webkit-scrollbar {
	display: none;
}

.pyp-ps-count__step {
	flex: 0 0 min(64%, 230px);
	scroll-snap-align: start;
}

.pyp-ps-count__step:last-child {
	margin-right: var(--pyp-gutter);
}

.pyp-ps-count__step button {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: 12px;
	border: 1px solid rgba(29, 112, 68, 0.1);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.6);
	text-align: left;
	cursor: pointer;
	transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.pyp-ps-count__step-num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(29, 112, 68, 0.08);
	font: 400 21px/1 var(--pyp-ps-deva);
	color: var(--pyp-green);
	transition: background-color 400ms ease, color 400ms ease;
}

.pyp-ps-count__step-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pyp-ps-count__step-sound {
	font: 600 10.5px/1.2 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-count__step-sound .bi {
	margin-left: 2px;
	font-size: 11px;
}

.pyp-ps-count__step-pose {
	font: 500 14.5px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-count__step-how {
	margin-top: 2px;
	font: 400 12.5px/1.45 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-count__step.is-active button {
	border-color: rgba(255, 255, 255, 0.95);
	background: #fff;
	box-shadow: 0 14px 30px -20px rgba(15, 59, 39, 0.5);
}

.pyp-ps-count__step.is-active .pyp-ps-count__step-num {
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	color: #fff;
}

@media (min-width: 992px) {
	.pyp-ps-count__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head stage" "list stage";
		column-gap: clamp(32px, 4vw, 72px);
		row-gap: 0;
	}

	.pyp-ps-count__stage {
		align-self: center;
		margin: 0;
	}

	.pyp-ps-count__breath {
		width: min(100%, 440px);
	}

	.pyp-ps .pyp-ps-count__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pyp-ps-count__step {
		margin: 0 !important;
	}
}

/* Ashtanga and Hatha: two panels, fire and moon, with a handle to drag
   between them. Phones: one above the other. */
.pyp-ps-styles {
	padding-block: clamp(28px, 3.6vw, 56px);
	background: #f6f9f2;
}

.pyp-ps-styles__compare {
	position: relative;
	display: grid;
	gap: 12px;
}

.pyp-ps-styles__side {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
}

.pyp-ps-styles__side--a {
	background:
		radial-gradient(70% 90% at 0% 100%, rgba(246, 193, 119, 0.4), rgba(246, 193, 119, 0) 70%),
		linear-gradient(150deg, #fbf3e6 0%, #f3e3c9 100%);
}

.pyp-ps-styles__side--b {
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(156, 207, 104, 0.35), rgba(156, 207, 104, 0) 70%),
		linear-gradient(150deg, #f1f7ee 0%, #dcebd8 100%);
}

.pyp-ps-styles__inner {
	position: relative;
	padding: clamp(22px, 3vw, 48px);
}

.pyp-ps-styles__mark {
	position: absolute;
	right: -6px;
	bottom: -26px;
	font: 400 clamp(110px, 13vw, 200px)/1 var(--pyp-ps-deva);
	white-space: nowrap;
	color: rgba(15, 59, 39, 0.06);
	pointer-events: none;
}

.pyp-ps-styles__side--a .pyp-ps-styles__mark {
	color: rgba(160, 92, 30, 0.08);
}

.pyp-ps .pyp-ps-styles__name {
	margin: 14px 0 0;
	font: 500 clamp(26px, 2.6vw, 38px)/1.1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-styles__line {
	margin: 4px 0 0;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-styles__side--a .pyp-ps-styles__line {
	color: #a0581e;
}

.pyp-ps .pyp-ps-styles__traits {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-styles__traits li {
	position: relative;
	padding-left: 22px;
	font: 400 15px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink);
}

.pyp-ps-styles__traits li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pyp-green);
}

.pyp-ps-styles__side--a .pyp-ps-styles__traits li::before {
	background: #c8762a;
}

.pyp-ps-styles__handle,
.pyp-ps-styles__range {
	display: none;
}

@media (min-width: 768px) {
	.pyp-ps-styles__compare {
		display: flex;
		gap: 0;
		height: clamp(360px, 30vw, 440px);
		overflow: hidden;
		border-radius: 28px;
		box-shadow: var(--pyp-ps-lift);
		container-type: inline-size;
	}

	.pyp-ps-styles__side {
		border-radius: 0;
	}

	.pyp-ps-styles__side--a {
		flex: 0 0 var(--pyp-ps-split);
	}

	.pyp-ps-styles__side--b {
		flex: 1 1 0;
	}

	/* each panel's words keep their place; the panel slides over them */
	.pyp-ps-styles__inner {
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 50cqi;
		padding: clamp(28px, 3.4vw, 56px);
	}

	.pyp-ps-styles__side--a .pyp-ps-styles__inner {
		left: 0;
	}

	.pyp-ps-styles__side--b .pyp-ps-styles__inner {
		right: 0;
	}

	.pyp-ps-styles__handle {
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--pyp-ps-split);
		z-index: 2;
		display: block;
		width: 2px;
		margin-left: -1px;
		background: rgba(255, 255, 255, 0.95);
		pointer-events: none;
	}

	.pyp-ps-styles__handle .bi {
		position: absolute;
		top: 50%;
		left: 50%;
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
		border: 1px solid rgba(255, 255, 255, 0.95);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		box-shadow: 0 14px 30px -14px rgba(15, 59, 39, 0.5);
		font-size: 20px;
		color: var(--pyp-forest);
		transition: transform 300ms var(--pyp-ease-out);
	}

	.pyp-ps-styles__range {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: ew-resize;
		-webkit-appearance: none;
		appearance: none;
	}

	.pyp-ps-styles__range:focus-visible + .pyp-ps-styles__handle .bi,
	.pyp-ps-styles__compare:has(.pyp-ps-styles__range:focus-visible) .pyp-ps-styles__handle .bi {
		outline: 2px solid var(--pyp-green);
		outline-offset: 3px;
	}

	.pyp-ps-styles__compare:hover .pyp-ps-styles__handle .bi {
		transform: scale(1.08);
	}
}

/* Alignment, point by point: Warrior II drawn on measured grid paper.
   Each cue lights its own guides (a plumb line, a level, a right angle);
   the numbered markers sit where the eye should go. */
.pyp-ps-blue {
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps-blue__grid {
	display: grid;
	grid-template-areas: "head" "plate" "cues";
	gap: 8px;
}

.pyp-ps-blue__head {
	grid-area: head;
}

.pyp-ps-blue__plate {
	position: relative;
	grid-area: plate;
	margin: 0 0 14px;
	padding: clamp(10px, 1.6vw, 22px);
	overflow: hidden;
	border: 1px solid rgba(29, 112, 68, 0.12);
	border-radius: 26px;
	background-color: #f5f9f0;
	background-image:
		linear-gradient(rgba(29, 112, 68, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(29, 112, 68, 0.07) 1px, transparent 1px),
		linear-gradient(rgba(29, 112, 68, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(29, 112, 68, 0.035) 1px, transparent 1px);
	background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
	box-shadow: inset 0 1px 0 #fff, 0 24px 50px -36px rgba(15, 59, 39, 0.45);
}

.pyp-ps-blue__label {
	position: absolute;
	top: 16px;
	left: 20px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-blue__label small {
	font: 400 17px/1 var(--pyp-ps-deva);
	letter-spacing: 0;
	color: rgba(29, 112, 68, 0.6);
}

.pyp-ps-blue__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pyp-ps-blue__floor {
	stroke: rgba(29, 112, 68, 0.35);
	stroke-width: 2;
}

.pyp-ps-blue__guide line,
.pyp-ps-blue__arc {
	fill: none;
	stroke: rgba(29, 112, 68, 0.2);
	stroke-width: 2;
	stroke-dasharray: 5 6;
	transition: stroke 500ms ease, stroke-width 500ms ease;
}

.pyp-ps-blue__arc {
	stroke-dasharray: none;
}

.pyp-ps-blue__guide--gaze line {
	stroke-dasharray: 2 6;
}

.pyp-ps-blue__guide text {
	font: 600 15px var(--pyp-font-menu);
	fill: rgba(29, 112, 68, 0.35);
	transition: fill 500ms ease;
}

.pyp-ps-blue__guide .pyp-ps-blue__trace {
	stroke: rgba(156, 207, 104, 0);
	stroke-width: 30;
	stroke-dasharray: none;
	stroke-linecap: round;
}

.pyp-ps-blue__guide.is-active line,
.pyp-ps-blue__guide.is-active .pyp-ps-blue__arc {
	stroke: #2f8a4c;
	stroke-width: 2.5;
	animation: pyp-ps-march 1.2s linear infinite;
}

.pyp-ps-blue__guide.is-active .pyp-ps-blue__trace {
	stroke: rgba(156, 207, 104, 0.45);
	stroke-width: 30;
	animation: none;
}

.pyp-ps-blue__guide.is-active text {
	fill: #2f8a4c;
}

@keyframes pyp-ps-march {
	to { stroke-dashoffset: -22; }
}

.pyp-ps-blue__body path {
	fill: none;
	stroke: var(--pyp-forest);
	stroke-width: 17;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pyp-ps-blue__body .pyp-ps-blue__torso {
	stroke-width: 22;
}

.pyp-ps-blue__body .pyp-ps-blue__arms,
.pyp-ps-blue__body .pyp-ps-blue__foot {
	stroke-width: 13;
}

.pyp-ps-blue__head {
	fill: var(--pyp-forest);
}

.pyp-ps-blue__joint {
	fill: #fff;
	stroke: #2f8a4c;
	stroke-width: 3;
}

.pyp-ps-blue__marker {
	cursor: pointer;
}

.pyp-ps-blue__marker circle {
	fill: #fff;
	stroke: #2f8a4c;
	stroke-width: 2;
	transition: fill 400ms ease, r 400ms var(--pyp-ease-out);
}

.pyp-ps-blue__marker text {
	font: 700 13px var(--pyp-font-sans);
	text-anchor: middle;
	dominant-baseline: central;
	fill: #2f8a4c;
	pointer-events: none;
	transition: fill 400ms ease;
}

.pyp-ps-blue__marker.is-active circle {
	r: 17;
	fill: #2f8a4c;
	filter: drop-shadow(0 0 8px rgba(47, 138, 76, 0.5));
}

.pyp-ps-blue__marker.is-active text {
	fill: #fff;
}

/* the six cues */
.pyp-ps .pyp-ps-blue__cues {
	grid-area: cues;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-blue__cue {
	border-bottom: 1px solid var(--pyp-ps-line);
}

.pyp-ps-blue__cue button {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
	padding: 13px 4px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.pyp-ps-blue__cue button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
	border-radius: 10px;
}

.pyp-ps-blue__num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 2px solid rgba(47, 138, 76, 0.35);
	border-radius: 50%;
	font: 700 13px/1 var(--pyp-font-sans);
	color: #2f8a4c;
	transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease;
}

.pyp-ps-blue__cue-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 5px;
}

.pyp-ps-blue__cue-title {
	font: 500 17px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-blue__cue-text {
	display: none;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-blue__cue.is-active .pyp-ps-blue__num {
	border-color: #2f8a4c;
	background: #2f8a4c;
	color: #fff;
}

.pyp-ps-blue__cue.is-active .pyp-ps-blue__cue-text {
	display: block;
	animation: pyp-ps-fade 500ms var(--pyp-ease-out);
}

/* phones: the plate's label above the drawing, clear of the markers */
@media (max-width: 767.98px) {
	.pyp-ps-blue__label {
		position: static;
		margin: 4px 0 6px 6px;
	}
}

.is-offscreen .pyp-ps-blue__guide line,
.is-offscreen .pyp-ps-blue__arc {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps-blue__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head cues" "plate cues";
		column-gap: clamp(32px, 4vw, 64px);
		row-gap: 0;
	}

	.pyp-ps-blue__plate {
		align-self: start;
		margin: 0;
	}

	.pyp-ps .pyp-ps-blue__cues {
		align-self: center;
	}

	.pyp-ps-blue__cue-text {
		display: block;
		opacity: 0.55;
		transition: opacity 400ms ease;
	}

	.pyp-ps-blue__cue.is-active .pyp-ps-blue__cue-text {
		opacity: 1;
		animation: none;
	}
}

/* At a glance: a guru's facts and disciplines (file/gurus/glance.php).
   One glass panel: the facts on the left, a hairline, the disciplines on
   the right; phones stack them. */
.pyp-ps-glance {
	padding-block: clamp(24px, 3vw, 48px);
	background: #fff;
}

.pyp-ps-glance__panel {
	display: grid;
	gap: 22px;
	padding: clamp(20px, 2.8vw, 40px);
	border: var(--pyp-ps-edge);
	border-radius: 28px;
	background:
		radial-gradient(60% 80% at 0% 0%, rgba(156, 207, 104, 0.2), rgba(156, 207, 104, 0) 70%),
		var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps .pyp-ps-glance__title {
	margin: 0;
	font: 500 clamp(22px, 2.2vw, 32px)/1.15 var(--pyp-font-menu);
	letter-spacing: -0.01em;
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-glance__bio {
	margin: 10px 0 0;
	font: 400 15px/1.7 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.pyp-ps .pyp-ps-glance__list {
	display: grid;
	gap: 2px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-glance__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	font: 400 14.5px/1.55 var(--pyp-font-sans);
	color: var(--pyp-ink);
}

.pyp-ps-glance__list li + li {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-glance__list .bi {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font-size: 14px;
	color: #fff;
}

.pyp-ps-glance__list span {
	padding-top: 5px;
}

.pyp-ps .pyp-ps-glance__label {
	margin: 0 0 6px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps .pyp-ps-glance__teaches {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-glance__teaches li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
}

.pyp-ps-glance__teaches li + li {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps .pyp-ps-glance__teaches h3 {
	margin: 0;
	font: 500 17px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-glance__teaches h3 small {
	margin-left: 6px;
	font: 400 18px/1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-glance__teaches p {
	margin: 4px 0 0;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps.is-armed .pyp-ps-glance__panel .pyp-ps-glance__list li {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 600ms var(--pyp-ease-out), transform 700ms var(--pyp-ease-out);
	transition-delay: calc(var(--pyp-ps-i) * 80ms + 200ms);
}

.pyp-ps.is-armed .pyp-ps-glance__panel.is-in .pyp-ps-glance__list li {
	opacity: 1;
	transform: none;
}

@media (min-width: 992px) {
	.pyp-ps-glance__panel {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 0;
	}

	.pyp-ps-glance__facts {
		padding-right: clamp(24px, 3vw, 48px);
	}

	.pyp-ps-glance__arts {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: clamp(24px, 3vw, 48px);
		border-left: 1px solid var(--pyp-ps-line);
	}
}

@media (max-width: 991.98px) {
	.pyp-ps-glance__arts {
		padding-top: 20px;
		border-top: 1px solid var(--pyp-ps-line);
	}
}

/* Breathe with her: Nadi Shodhana. Ida (moon, cool blue) and pingala
   (sun, warm gold) wind round the spine; a light runs up or down the
   channel the breath is moving through, and the crown glows on the hold. */
.pyp-ps-nadi {
	padding-block: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(40% 60% at 50% 50%, rgba(156, 207, 104, 0.18), rgba(156, 207, 104, 0) 70%),
		linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

.pyp-ps-nadi__grid {
	display: grid;
	grid-template-areas: "head" "figure" "guide";
	gap: 10px;
}

.pyp-ps-nadi__head {
	grid-area: head;
}

.pyp-ps-nadi__figure {
	grid-area: figure;
	justify-self: center;
	width: min(42%, 160px);
	margin: 0 0 6px;
}

.pyp-ps-nadi__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pyp-ps-nadi__spine {
	stroke: rgba(29, 112, 68, 0.18);
	stroke-width: 10;
	stroke-linecap: round;
}

.pyp-ps-nadi__chan {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	opacity: 0.35;
}

.pyp-ps-nadi__chan--ida,
.pyp-ps-nadi__flow--ida {
	stroke: #7f9fc2;
}

.pyp-ps-nadi__chan--pin,
.pyp-ps-nadi__flow--pin {
	stroke: #e09a45;
}

.pyp-ps-nadi__flow {
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
}

.pyp-ps-nadi__flow.is-flowing {
	opacity: 1;
	filter: drop-shadow(0 0 6px currentColor);
	animation: pyp-ps-nadi-flow var(--pyp-ps-secs, 4s) cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.pyp-ps-nadi__flow--ida.is-flowing { color: rgba(127, 159, 194, 0.7); }
.pyp-ps-nadi__flow--pin.is-flowing { color: rgba(224, 154, 69, 0.7); }

/* a channel just breathed through stays lit, softly */
.pyp-ps-nadi__flow.is-done {
	stroke-dashoffset: 0;
	opacity: 0.45;
}

@keyframes pyp-ps-nadi-flow {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

.pyp-ps-nadi__chakra {
	fill: #fff;
	stroke: var(--pyp-green);
	stroke-width: 2.5;
}

.pyp-ps-nadi__crown {
	fill: var(--pyp-saffron-deep);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 600ms var(--pyp-ease-out), filter 600ms ease;
}

.pyp-ps-nadi[data-way="crown"] .pyp-ps-nadi__crown {
	transform: scale(1.35);
	filter: drop-shadow(0 0 12px rgba(217, 130, 43, 0.7));
}

.pyp-ps-nadi__side {
	font: 600 12px var(--pyp-font-sans);
	letter-spacing: 0.08em;
}

.pyp-ps-nadi__side--ida { fill: #5f82a9; }
.pyp-ps-nadi__side--pin { fill: #b97528; }

/* the guide */
.pyp-ps-nadi__guide {
	grid-area: guide;
	display: grid;
	gap: 16px;
	justify-items: start;
}

.pyp-ps-nadi__now {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "nose phase count" "line line line";
	gap: 10px 16px;
	align-items: center;
	width: 100%;
	padding: 18px 20px;
	border: var(--pyp-ps-edge);
	border-radius: 24px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-nadi__nostrils {
	grid-area: nose;
	display: flex;
	gap: 6px;
}

.pyp-ps-nadi__nostril {
	width: 16px;
	height: 24px;
	border-radius: 50% 50% 45% 45%;
	background: rgba(29, 112, 68, 0.12);
	transition: background-color 400ms ease, box-shadow 400ms ease;
}

.pyp-ps-nadi[data-nostril="left"] .pyp-ps-nadi__nostril[data-side="left"] {
	background: #7f9fc2;
	box-shadow: 0 0 0 4px rgba(127, 159, 194, 0.25);
}

.pyp-ps-nadi[data-nostril="right"] .pyp-ps-nadi__nostril[data-side="right"] {
	background: #e09a45;
	box-shadow: 0 0 0 4px rgba(224, 154, 69, 0.25);
}

.pyp-ps-nadi__phase {
	grid-area: phase;
	font: 500 clamp(26px, 2.6vw, 36px)/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-nadi__count {
	grid-area: count;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font: 600 22px/1 var(--pyp-font-menu);
	color: #fff;
}

.pyp-ps-nadi__line {
	grid-area: line;
	font: 400 15px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps .pyp-ps-nadi__steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-nadi__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 2px 7px;
	border-radius: 12px;
	border-bottom: 3px solid rgba(29, 112, 68, 0.12);
	transition: background-color 400ms ease, border-color 400ms ease;
}

.pyp-ps-nadi__step[data-nostril="left"] { --pyp-ps-tone: #7f9fc2; }
.pyp-ps-nadi__step[data-nostril="right"] { --pyp-ps-tone: #e09a45; }
.pyp-ps-nadi__step[data-nostril="both"] { --pyp-ps-tone: var(--pyp-saffron-deep); }

.pyp-ps-nadi__step-name {
	font: 500 13px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-nadi__step-side {
	font: 600 9.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-ps-nadi__step.is-active {
	border-bottom-color: var(--pyp-ps-tone);
	background: #fff;
}

.pyp-ps .pyp-ps-nadi__note {
	display: flex;
	gap: 8px;
	margin: 0;
	font: 400 13px/1.5 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-nadi__note .bi {
	color: var(--pyp-green);
}

.is-offscreen .pyp-ps-nadi__flow {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps-nadi__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1fr);
		grid-template-areas: "head figure guide";
		column-gap: clamp(28px, 3.4vw, 56px);
		align-items: center;
	}

	.pyp-ps-nadi__head {
		margin: 0;
	}

	.pyp-ps-nadi__figure {
		width: 100%;
		max-width: 260px;
	}
}

/* The confluence: four streams that meet and flow on as one river. The
   lit stream runs brighter; light moves along every stream and the river. */
.pyp-ps-sangam {
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps-sangam__stage {
	position: relative;
	margin-bottom: clamp(14px, 2vw, 26px);
}

.pyp-ps-sangam__svg {
	display: block;
	width: 100%;
	height: clamp(150px, 22vw, 300px);
	overflow: visible;
}

.pyp-ps-sangam__bed {
	fill: none;
	stroke: rgba(47, 138, 76, 0.2);
	stroke-width: 22;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: stroke 600ms ease, stroke-width 600ms var(--pyp-ease-out);
}

.pyp-ps-sangam__stream.is-active .pyp-ps-sangam__bed {
	stroke: rgba(47, 138, 76, 0.55);
	stroke-width: 26;
}

.pyp-ps-sangam__flow {
	fill: none;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 10 26;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
	animation: pyp-ps-stream 2.4s linear infinite;
}

.pyp-ps-sangam__flow--river {
	stroke-dasharray: 16 30;
	animation-duration: 3s;
}

@keyframes pyp-ps-stream {
	to { stroke-dashoffset: -36; }
}

.pyp-ps-sangam__river {
	fill: url(#pyp-ps-sangam-river);
}

/* where the streams meet: outside the stretched drawing so it stays round */
.pyp-ps-sangam__meet {
	position: absolute;
	top: 50%;
	left: 64%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	background: var(--pyp-saffron-deep);
	animation: pyp-ps-aum-glow 2.6s ease-in-out infinite alternate;
	filter: drop-shadow(0 0 10px rgba(217, 130, 43, 0.55));
}

.pyp-ps .pyp-ps-sangam__teach {
	position: absolute;
	right: 2%;
	bottom: 4%;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-sangam__teach span {
	font: 400 22px/1 var(--pyp-ps-deva);
	letter-spacing: 0;
	color: rgba(29, 112, 68, 0.6);
}

.pyp-ps .pyp-ps-sangam__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-sangam__item button {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding: 14px;
	border: 0;
	border-top: 3px solid rgba(47, 138, 76, 0.18);
	background: none;
	text-align: left;
	cursor: pointer;
	transition: border-color 400ms ease, background-color 400ms ease;
}

.pyp-ps-sangam__item button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-ps-sangam__sa {
	font: 400 24px/1.15 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.45);
	transition: color 400ms ease;
}

.pyp-ps-sangam__name {
	font: 500 17px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-sangam__line {
	font: 600 10.5px/1.2 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-sangam__text {
	margin-top: 6px;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	opacity: 0.55;
	transition: opacity 400ms ease;
}

.pyp-ps-sangam__item.is-active button {
	border-top-color: var(--pyp-green);
	background: linear-gradient(180deg, rgba(156, 207, 104, 0.16), rgba(156, 207, 104, 0));
}

.pyp-ps-sangam__item.is-active .pyp-ps-sangam__sa {
	color: var(--pyp-green);
}

.pyp-ps-sangam__item.is-active .pyp-ps-sangam__text {
	opacity: 1;
}

.is-offscreen .pyp-ps-sangam__flow,
.is-offscreen .pyp-ps-sangam__meet {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps .pyp-ps-sangam__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

/* Kundalini: seven chakras, crown at the top; a line of light rises from
   the root, lighting each centre as it passes. */
.pyp-ps-chakras {
	padding-block: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(40% 60% at 75% 50%, rgba(246, 193, 119, 0.14), rgba(246, 193, 119, 0) 70%),
		#fff;
}

.pyp-ps-chakras__grid {
	display: grid;
	gap: 8px;
}

.pyp-ps .pyp-ps-chakras__list {
	position: relative;
	margin: 0;
	padding: 0 0 0 4px;
	list-style: none;
}

/* the channel, and the light rising in it */
.pyp-ps-chakras__list::before,
.pyp-ps-chakras__list::after {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 31px;
	width: 3px;
	border-radius: 3px;
	background: rgba(29, 112, 68, 0.12);
}

.pyp-ps-chakras__list::after {
	background: linear-gradient(0deg, var(--pyp-green), var(--pyp-saffron-deep));
	transform: scaleY(var(--pyp-ps-rise, 0));
	transform-origin: bottom;
	transition: transform 700ms var(--pyp-ease-out);
}

.pyp-ps-chakra {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 8px 0;
}

.pyp-ps-chakra__seed {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(29, 112, 68, 0.16);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 5px #fff;
	font: 400 24px/1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.45);
	transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}

.pyp-ps-chakra:first-child .pyp-ps-chakra__seed::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.pyp-ps-chakra__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pyp-ps-chakra__name {
	font: 500 18px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-chakra__name span {
	margin-left: 6px;
	font: 400 18px/1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps-chakra__meta {
	font: 400 13.5px/1.4 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-chakra__num {
	font: 600 12px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	color: rgba(29, 112, 68, 0.35);
}

.pyp-ps-chakra.is-lit .pyp-ps-chakra__seed {
	border-color: transparent;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: 0 0 0 5px #fff, 0 10px 22px -10px rgba(15, 59, 39, 0.6);
	color: #fff;
}

.pyp-ps-chakra:first-child.is-lit .pyp-ps-chakra__seed {
	background: var(--pyp-saffron-deep);
	box-shadow: 0 0 0 5px #fff, 0 0 22px rgba(217, 130, 43, 0.55);
}

@media (min-width: 992px) {
	.pyp-ps-chakras__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		column-gap: clamp(32px, 4vw, 72px);
		align-items: center;
	}
}

/* The seven yogas: a seven-pointed yantra inside a slowly turning ring of
   points, a name at each point; the chosen yoga lights and its words show
   beside. */
.pyp-ps-seven {
	padding-block: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(45% 60% at 35% 55%, rgba(246, 193, 119, 0.14), rgba(246, 193, 119, 0) 70%),
		linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps-seven__grid {
	display: grid;
	grid-template-areas: "head" "yantra" "detail";
	gap: 10px;
}

.pyp-ps-seven__head {
	grid-area: head;
}

.pyp-ps-seven__yantra {
	position: relative;
	grid-area: yantra;
	justify-self: center;
	width: min(100%, 360px);
	aspect-ratio: 1;
	margin: 8px 0 14px;
}

.pyp-ps-seven__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pyp-ps-seven__ring {
	fill: none;
	stroke: rgba(29, 112, 68, 0.16);
	stroke-width: 1.5;
}

.pyp-ps-seven__ring--dots {
	stroke-dasharray: 1 8;
	stroke-linecap: round;
	stroke-width: 2.5;
}

.pyp-ps-seven__turn {
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: pyp-ps-turn 160s linear infinite;
}

.pyp-ps-seven__poly {
	fill: rgba(156, 207, 104, 0.1);
	stroke: rgba(29, 112, 68, 0.3);
	stroke-width: 1.5;
}

.pyp-ps-seven__star {
	fill: none;
	stroke: rgba(29, 112, 68, 0.35);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.pyp-ps-seven__star--deep {
	stroke: rgba(217, 130, 43, 0.5);
}

.pyp-ps-seven__bindu {
	fill: var(--pyp-saffron-deep);
	filter: drop-shadow(0 0 8px rgba(217, 130, 43, 0.6));
}

.pyp-ps-seven__node {
	position: absolute;
	display: grid;
	place-items: center;
	min-width: 62px;
	height: 62px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	translate: -50% -50%;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 24px -14px rgba(15, 59, 39, 0.5);
	font: 400 17px/1 var(--pyp-ps-deva);
	color: var(--pyp-green);
	cursor: pointer;
	transition: transform 400ms var(--pyp-ease-out), background-color 400ms ease, color 400ms ease, box-shadow 400ms ease;
}

.pyp-ps-seven__node span {
	translate: 0 2px;
	white-space: nowrap;
}

.pyp-ps-seven__node:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

.pyp-ps-seven__node.is-active {
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: 0 0 0 6px rgba(156, 207, 104, 0.3), 0 14px 28px -12px rgba(15, 59, 39, 0.7);
	color: #fff;
	transform: scale(1.12);
}

@media (hover: hover) {
	.pyp-ps-seven__node:not(.is-active):hover {
		transform: scale(1.08);
		background: #fff;
	}
}

.pyp-ps-seven__detail {
	position: relative;
	grid-area: detail;
	display: grid;
}

.pyp-ps-seven__card {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.6vw, 36px);
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 400ms ease, transform 500ms var(--pyp-ease-out), visibility 0s linear 400ms;
}

.pyp-ps-seven__card.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 500ms ease, transform 600ms var(--pyp-ease-out), visibility 0s;
}

.pyp-ps-seven__num {
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-seven__sa {
	margin-top: 12px;
	font: 400 clamp(40px, 4vw, 60px)/1.1 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-seven__name {
	margin: 4px 0 0;
	font: 500 clamp(24px, 2.4vw, 34px)/1.15 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-seven__line {
	margin: 6px 0 0;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #b97528;
}

.pyp-ps .pyp-ps-seven__text {
	margin: 14px 0 0;
	font: 400 15.5px/1.7 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

.is-offscreen .pyp-ps-seven__turn {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps-seven__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "yantra head" "yantra detail";
		column-gap: clamp(32px, 4vw, 72px);
		row-gap: 6px;
	}

	.pyp-ps-seven__yantra {
		align-self: center;
		width: min(100%, 520px);
		margin: 0;
	}

	.pyp-ps-seven__node {
		min-width: 76px;
		height: 76px;
		font-size: 20px;
	}

	.pyp-ps-seven__detail {
		align-self: start;
	}
}

/* Breathe with the moon: a night sky; the moon's shadow slides away as the
   breath comes in, the moon glows full on the hold, the shadow returns
   from the other side as the breath goes out. */
.pyp-ps-moon {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(40px, 5vw, 80px);
	background:
		radial-gradient(50% 70% at 72% 45%, rgba(156, 207, 104, 0.16), rgba(156, 207, 104, 0) 70%),
		linear-gradient(160deg, #12452f 0%, #0d3323 55%, #0a2619 100%);
	color: #fff;
}

.pyp-ps-moon__stars {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.8), transparent),
		radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 44% 14%, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1px 1px at 58% 82%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.5px 1.5px at 86% 18%, rgba(255, 255, 255, 0.8), transparent),
		radial-gradient(1px 1px at 92% 64%, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1px 1px at 6% 86%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.5px 1.5px at 70% 92%, rgba(255, 255, 255, 0.6), transparent);
	animation: pyp-ps-twinkle 6s ease-in-out infinite alternate;
}

@keyframes pyp-ps-twinkle {
	from { opacity: 0.55; }
	to   { opacity: 1; }
}

.pyp-ps-moon__grid {
	display: grid;
	gap: 18px;
}

.pyp-ps-moon .pyp-ps-eyebrow {
	color: #c8e6a0;
}

.pyp-ps-moon__sa {
	font: 400 17px/1 var(--pyp-ps-deva);
	letter-spacing: 0;
	text-transform: none;
}

.pyp-ps-moon .pyp-ps-title {
	color: #fff;
}

.pyp-ps-moon .pyp-ps-title em {
	background: linear-gradient(100deg, #fdf3d8, #c8e6a0);
	-webkit-background-clip: text;
	background-clip: text;
}

.pyp-ps-moon .pyp-ps-lede {
	color: rgba(255, 255, 255, 0.75);
}

.pyp-ps-moon__sky {
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
}

.pyp-ps-moon__orb {
	position: relative;
	width: min(70%, 300px);
	aspect-ratio: 1;
}

.pyp-ps-moon__glow {
	position: absolute;
	inset: -10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(253, 243, 216, 0.5), rgba(253, 243, 216, 0) 70%);
	opacity: 0.25;
	transform: scale(0.85);
	transition: opacity 1.2s ease, transform 1.2s var(--pyp-ease-out);
}

.pyp-ps-moon[data-moon="full"] .pyp-ps-moon__glow {
	opacity: 1;
	transform: scale(1.1);
}

.pyp-ps-moon__svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 30px rgba(253, 243, 216, 0.25));
}

.pyp-ps-moon__marks circle {
	fill: rgba(190, 172, 130, 0.28);
}

.pyp-ps-moon__shadow {
	fill: #0b2a1c;
	opacity: 0.94;
	transform-box: view-box;
	transform-origin: 0 0;
}

.pyp-ps-moon__now {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pyp-ps-moon__phase {
	font: 500 clamp(28px, 2.8vw, 40px)/1 var(--pyp-font-menu);
	color: #fff;
}

.pyp-ps-moon__count {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	font: 600 20px/1 var(--pyp-font-menu);
	color: #fdf3d8;
}

.pyp-ps .pyp-ps-moon__line {
	margin: 0;
	min-height: 3.2em;
	max-width: 36ch;
	font: 400 15px/1.6 var(--pyp-font-sans);
	color: rgba(255, 255, 255, 0.78);
}

.pyp-ps .pyp-ps-moon__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	width: min(100%, 420px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-moon__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 2px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.14);
	transition: border-color 400ms ease;
}

.pyp-ps-moon__step b {
	font: 500 13px/1 var(--pyp-font-menu);
	color: #fff;
}

.pyp-ps-moon__step small {
	font: 600 10px/1 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.55);
}

.pyp-ps-moon__step.is-active {
	border-bottom-color: #fdf3d8;
}

.pyp-ps .pyp-ps-moon__play {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.pyp-ps .pyp-ps-moon__play[aria-pressed="true"] {
	border-color: #c8e6a0;
	background: #c8e6a0;
	color: var(--pyp-forest);
}

.is-offscreen .pyp-ps-moon__stars {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps-moon__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(32px, 4vw, 72px);
		align-items: center;
	}

	.pyp-ps-moon__orb {
		width: min(100%, 340px);
	}
}

/* Mudra: three hands on hairlines, no cards */
.pyp-ps-mudra {
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #fff 0%, #f6f9f2 100%);
}

.pyp-ps .pyp-ps-mudra__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-mudra__item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	grid-template-areas: "hand sa" "hand name" "hand meaning" "how how" "why why";
	column-gap: 16px;
	padding: 20px 0;
}

.pyp-ps-mudra__item + .pyp-ps-mudra__item {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-mudra__hand {
	--pyp-ico-bg: #f4f8ef;
	grid-area: hand;
	display: grid;
	place-items: center;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(closest-side, #fff, #eef5e7);
	box-shadow: inset 0 0 0 1px rgba(29, 112, 68, 0.08);
	color: var(--pyp-forest);
	transition: transform 600ms var(--pyp-ease-out);
}

.pyp-ps-mudra__hand svg {
	width: 78%;
	height: 78%;
}

.pyp-ps-mudra__sa {
	grid-area: sa;
	align-self: end;
	font: 400 22px/1.2 var(--pyp-ps-deva);
	color: rgba(29, 112, 68, 0.55);
}

.pyp-ps .pyp-ps-mudra__name {
	grid-area: name;
	margin: 0;
	font: 500 20px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-mudra__meaning {
	grid-area: meaning;
	margin: 4px 0 0;
	font: 600 10.5px/1.3 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps .pyp-ps-mudra__how,
.pyp-ps .pyp-ps-mudra__why {
	margin: 12px 0 0;
	font: 400 14.5px/1.65 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-mudra__how {
	grid-area: how;
}

.pyp-ps-mudra__why {
	grid-area: why;
	margin-top: 6px !important;
	color: var(--pyp-ink) !important;
}

@media (hover: hover) {
	.pyp-ps-mudra__item:hover .pyp-ps-mudra__hand {
		transform: translateY(-4px) rotate(-4deg);
	}
}

@media (min-width: 992px) {
	.pyp-ps .pyp-ps-mudra__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pyp-ps-mudra__item {
		grid-template-columns: 1fr;
		grid-template-areas: "hand" "sa" "name" "meaning" "how" "why";
		justify-items: center;
		padding: 0 clamp(18px, 2.4vw, 40px);
		text-align: center;
	}

	.pyp-ps-mudra__item + .pyp-ps-mudra__item {
		border-top: 0;
		border-left: 1px solid var(--pyp-ps-line);
	}

	.pyp-ps-mudra__hand {
		width: 170px;
		height: 170px;
		margin-bottom: 14px;
	}

	.pyp-ps-mudra__sa {
		align-self: auto;
	}
}

/* The eight limbs (our-method.php): the yantra component with a lotus in
   place of the star; the chosen limb's petal fills green */
.pyp-ps-lotus__petal {
	fill: rgba(156, 207, 104, 0.16);
	stroke: rgba(29, 112, 68, 0.35);
	stroke-width: 1.5;
	transition: fill 500ms ease, stroke 500ms ease;
}

.pyp-ps-lotus__petal.is-active {
	fill: rgba(47, 138, 76, 0.55);
	stroke: var(--pyp-green);
}

.pyp-ps-lotus__inner {
	fill: rgba(246, 193, 119, 0.14);
	stroke: rgba(217, 130, 43, 0.35);
	stroke-width: 1;
}

.pyp-ps-lotus__heart {
	fill: #fff;
	stroke: rgba(217, 130, 43, 0.4);
	stroke-width: 1.5;
	filter: drop-shadow(0 6px 12px rgba(15, 59, 39, 0.2));
}

.pyp-ps-lotus__om {
	font: 400 30px/1 var(--pyp-ps-deva);
	text-anchor: middle;
	dominant-baseline: central;
	fill: var(--pyp-saffron-deep);
}

.pyp-ps-seven--lotus .pyp-ps-seven__node {
	font-size: 15px;
}

@media (min-width: 992px) {
	.pyp-ps-seven--lotus .pyp-ps-seven__node {
		font-size: 17px;
	}
}

/* A day, from dawn to night (life-at-the-ashram.php): a rail of the day's
   hours; the section's sky follows the hour in view. */
.pyp-ps-day {
	--pyp-ps-sky-a: #fbe9d4;
	--pyp-ps-sky-b: #f6f9f2;
	position: relative;
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, var(--pyp-ps-sky-a) 0%, var(--pyp-ps-sky-b) 100%);
	transition: --pyp-ps-sky-a 1.2s ease, --pyp-ps-sky-b 1.2s ease;
}

@property --pyp-ps-sky-a { syntax: '<color>'; inherits: true; initial-value: #fbe9d4; }
@property --pyp-ps-sky-b { syntax: '<color>'; inherits: true; initial-value: #f6f9f2; }

.pyp-ps-day[data-sky="dawn"]      { --pyp-ps-sky-a: #fbe3cf; --pyp-ps-sky-b: #f6f2ea; }
.pyp-ps-day[data-sky="morning"]   { --pyp-ps-sky-a: #fdf1d2; --pyp-ps-sky-b: #f6f9f2; }
.pyp-ps-day[data-sky="day"]       { --pyp-ps-sky-a: #e8f3e0; --pyp-ps-sky-b: #f6f9f2; }
.pyp-ps-day[data-sky="noon"]      { --pyp-ps-sky-a: #f3f8ee; --pyp-ps-sky-b: #ffffff; }
.pyp-ps-day[data-sky="afternoon"] { --pyp-ps-sky-a: #f8ead0; --pyp-ps-sky-b: #f6f9f2; }
.pyp-ps-day[data-sky="dusk"]      { --pyp-ps-sky-a: #f2c9a2; --pyp-ps-sky-b: #f3ecdf; }
.pyp-ps-day[data-sky="night"]     { --pyp-ps-sky-a: #c9d6cc; --pyp-ps-sky-b: #eef2ec; }

.pyp-ps .pyp-ps-day__rail {
	display: flex;
	gap: 16px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 16px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-day__rail::-webkit-scrollbar {
	display: none;
}

.pyp-ps-day__hour {
	position: relative;
	flex: 0 0 min(74%, 300px);
	scroll-snap-align: start;
}

.pyp-ps-day__hour:last-child {
	margin-right: var(--pyp-gutter);
}

.pyp-ps-day__photo {
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	aspect-ratio: 4 / 5;
	box-shadow: 0 24px 44px -30px rgba(8, 32, 20, 0.55);
}

.pyp-ps-day__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--pyp-ease-out);
	user-select: none;
}

.pyp-ps .pyp-ps-day__time {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 16px;
	margin: 16px 0 4px;
	font: 600 13px/1 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	color: var(--pyp-green);
}

/* a line from each time onward, joining the hours */
.pyp-ps-day__time::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-right: -16px;
	background: rgba(29, 112, 68, 0.22);
}

.pyp-ps-day__time .bi {
	font-size: 22px;
	line-height: 0;
}

.pyp-ps .pyp-ps-day__title {
	margin: 0;
	font: 500 19px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-day__line {
	margin: 6px 0 0;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps .pyp-ps-day__note {
	display: flex;
	gap: 8px;
	margin: 8px 0 0;
	font: 400 13px/1.5 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-day__note .bi {
	flex-shrink: 0;
	color: var(--pyp-green);
}

.pyp-ps-day__note a {
	color: var(--pyp-green);
	font-weight: 600;
}

@media (hover: hover) {
	.pyp-ps-day__hour:hover .pyp-ps-day__photo img {
		transform: scale(1.05);
	}
}

@media (min-width: 992px) {
	.pyp-ps-day__hour {
		flex-basis: calc((100% - 3 * 16px) / 4);
	}
}

/* Around the practice: tabs, then the album, every photo uncropped */
.pyp-ps-album {
	padding-block: clamp(32px, 4vw, 64px);
	background: #fff;
}

.pyp-ps-album__tabs {
	display: flex;
	gap: 6px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 18px;
	padding: 5px;
	overflow-x: auto;
	border: var(--pyp-ps-edge);
	border-radius: 999px;
	background: var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
	scrollbar-width: none;
}

.pyp-ps-album__tabs::-webkit-scrollbar {
	display: none;
}

.pyp-ps-album__tabs button {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	font: 500 14px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease;
}

.pyp-ps-album__tabs small {
	font: 600 11px/1 var(--pyp-font-sans);
	color: var(--pyp-green);
	opacity: 0.7;
}

.pyp-ps-album__tabs [aria-selected="true"] {
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	color: #fff;
}

.pyp-ps-album__tabs [aria-selected="true"] small {
	color: #c8e6a0;
	opacity: 1;
}

.pyp-ps-album__tabs button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-ps .pyp-ps-album__about {
	margin: 0 0 16px;
	font: 400 15px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-align: center;
}

.pyp-ps-album__grid {
	columns: 2 160px;
	column-gap: 12px;
}

.pyp-ps-album__grid figure {
	position: relative;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 18px;
	break-inside: avoid;
	animation: pyp-ps-fade 600ms var(--pyp-ease-out) both;
}

.pyp-ps-album__grid img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 900ms var(--pyp-ease-out);
}

.pyp-ps-album__grid figcaption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font: 500 13px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 300ms ease, transform 400ms var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-ps-album__grid figure:hover img {
		transform: scale(1.04);
	}

	.pyp-ps-album__grid figure:hover figcaption {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 992px) {
	.pyp-ps-album__grid {
		columns: 4;
		column-gap: 16px;
	}

	.pyp-ps-album__grid figure {
		margin-bottom: 16px;
	}
}

.pyp-ps .pyp-ps-album__more {
	margin: 12px 0 0;
	text-align: center;
}

.pyp-ps-class .pyp-ps-ico .bi {
	font-size: 22px;
}

/* About the school (aboutus.php) ------------------------------------- */

/* Our story: the founder at work, and the words beside */
.pyp-ps-story {
	padding-block: clamp(32px, 4vw, 64px);
	background: #fff;
}

.pyp-ps-story__grid {
	display: grid;
	gap: 22px;
	align-items: center;
}

.pyp-ps-story__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 26px;
	box-shadow: 0 30px 60px -36px rgba(8, 32, 20, 0.55);
}

.pyp-ps-story__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.pyp-ps-story__photo figcaption {
	position: absolute;
	bottom: 14px;
	left: 14px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font: 500 13px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-story__photo figcaption span {
	font: 400 16px/1 var(--pyp-ps-deva);
	color: var(--pyp-green);
}

.pyp-ps-story__copy .pyp-ps-lede + .pyp-ps-lede {
	margin-top: 12px;
}

.pyp-ps .pyp-ps-story__actions .pyp-ps-btn--ghost {
	border-color: rgba(29, 112, 68, 0.18);
}

.pyp-ps-story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

@media (min-width: 992px) {
	.pyp-ps-story__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: clamp(32px, 4vw, 72px);
	}
}

/* The figures: one glass strip, six numbers, hairlines between */
.pyp-ps-figures {
	padding-block: 0 clamp(28px, 3.6vw, 56px);
	background: #fff;
}

.pyp-ps .pyp-ps-figures__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border: var(--pyp-ps-edge);
	border-radius: 26px;
	background:
		radial-gradient(60% 120% at 0% 0%, rgba(156, 207, 104, 0.22), rgba(156, 207, 104, 0) 70%),
		var(--pyp-ps-glass);
	-webkit-backdrop-filter: var(--pyp-ps-blur);
	backdrop-filter: var(--pyp-ps-blur);
	box-shadow: var(--pyp-ps-lift);
}

.pyp-ps-figures__list > div {
	display: grid;
	gap: 4px;
	padding: 18px;
}

.pyp-ps-figures__list > div:nth-child(even) {
	border-left: 1px solid var(--pyp-ps-line);
}

.pyp-ps-figures__list > div:nth-child(n + 3) {
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-figures__list .bi {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 6px;
	border-radius: 11px;
	background: linear-gradient(145deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font-size: 16px;
	color: #fff;
}

.pyp-ps .pyp-ps-figures__list dd {
	margin: 0;
	font: 600 clamp(26px, 2.6vw, 38px)/1 var(--pyp-font-menu);
	letter-spacing: -0.01em;
	color: var(--pyp-forest);
	font-variant-numeric: tabular-nums;
}

.pyp-ps .pyp-ps-figures__list dt {
	font: 600 10.5px/1.3 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

@media (min-width: 992px) {
	.pyp-ps .pyp-ps-figures__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.pyp-ps-figures__list > div {
		padding: 24px 22px;
	}

	.pyp-ps-figures__list > div + div {
		border-left: 1px solid var(--pyp-ps-line);
	}

	.pyp-ps-figures__list > div:nth-child(n + 3) {
		border-top: 0;
	}
}

/* The map: a dotted field of latitude and longitude, the centres on it */
.pyp-ps-map {
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

.pyp-ps-map__grid {
	display: grid;
	grid-template-areas: "head" "field" "list";
	gap: 10px;
}

.pyp-ps-map__head {
	grid-area: head;
}

.pyp-ps-map__field {
	grid-area: field;
	justify-self: center;
	width: min(70%, 260px);
	margin-bottom: 10px;
}

.pyp-ps-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pyp-ps-map__dots circle {
	fill: rgba(29, 112, 68, 0.22);
}

.pyp-ps-map__grat {
	stroke: rgba(29, 112, 68, 0.12);
	stroke-width: 1;
	stroke-dasharray: 2 6;
}

.pyp-ps-map__deg {
	font: 600 10px var(--pyp-font-sans);
	letter-spacing: 0.06em;
	fill: rgba(29, 112, 68, 0.6);
	paint-order: stroke;
	stroke: #f6f9f2;
	stroke-width: 6px;
}

.pyp-ps-map__route {
	fill: none;
	stroke: var(--pyp-saffron-deep);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 0.012 0.018;
	opacity: 0.65;
}

.pyp-ps-map__pin {
	cursor: pointer;
}

.pyp-ps-map__dot {
	fill: #fff;
	stroke: var(--pyp-green);
	stroke-width: 3;
	transition: fill 400ms ease, r 400ms var(--pyp-ease-out);
}

.pyp-ps-map__pulse {
	fill: rgba(47, 138, 76, 0.18);
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

.pyp-ps-map__label {
	font: 600 15px var(--pyp-font-menu);
	fill: var(--pyp-forest);
	paint-order: stroke;
	stroke: #f6f9f2;
	stroke-width: 8px;
	stroke-linejoin: round;
}

.pyp-ps-map__pin.is-active .pyp-ps-map__dot {
	r: 10;
	fill: var(--pyp-green);
}

.pyp-ps-map__pin.is-active .pyp-ps-map__pulse {
	opacity: 1;
	animation: pyp-ps-ping 2.4s ease-out infinite;
}

@keyframes pyp-ps-ping {
	from { transform: scale(0.6); opacity: 0.9; }
	to   { transform: scale(2.2); opacity: 0; }
}

.pyp-ps .pyp-ps-map__list {
	grid-area: list;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-map__centre button {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: 10px;
	border: 1px solid rgba(29, 112, 68, 0.1);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.7);
	text-align: left;
	cursor: pointer;
	transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.pyp-ps-map__centre button:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-ps-map__photo {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 1;
}

.pyp-ps-map__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--pyp-ease-out);
}

.pyp-ps-map__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pyp-ps-map__kind {
	font: 600 10px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-map__name {
	font: 500 21px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-map__land {
	font: 400 14px/1.45 var(--pyp-font-sans);
	color: var(--pyp-ink);
}

.pyp-ps-map__addr {
	font: 400 12.5px/1.45 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-map__centre.is-active button {
	border-color: transparent;
	background: #fff;
	box-shadow: 0 0 0 2px var(--pyp-green), 0 18px 34px -22px rgba(15, 59, 39, 0.5);
}

.pyp-ps-map__centre.is-active .pyp-ps-map__photo img {
	transform: scale(1.06);
}

.is-offscreen .pyp-ps-map__pulse {
	animation-play-state: paused;
}

@media (min-width: 992px) {
	.pyp-ps-map__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
		grid-template-areas: "head field list";
		column-gap: clamp(28px, 3vw, 56px);
		align-items: center;
	}

	.pyp-ps-map__field {
		width: 100%;
		margin: 0;
	}

	.pyp-ps-map__centre button {
		grid-template-columns: 120px minmax(0, 1fr);
	}
}

/* Why us: nine reasons on a hairline grid, no cards */
.pyp-ps-why {
	padding-block: clamp(32px, 4vw, 64px);
	background: #fff;
}

.pyp-ps .pyp-ps-why__grid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pyp-ps-line);
}

.pyp-ps-why__grid li {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--pyp-ps-line);
}

.pyp-ps-why__grid .pyp-ps-ico {
	grid-row: span 2;
	transition: transform 500ms var(--pyp-ease-out);
}

.pyp-ps-why__num {
	position: absolute;
	top: 18px;
	right: 6px;
	font: 600 12px/1 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	color: rgba(29, 112, 68, 0.3);
}

.pyp-ps .pyp-ps-why__grid h3 {
	margin: 2px 0 0;
	font: 500 18px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-why__grid p {
	margin: 6px 0 0;
	font: 400 14px/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

@media (hover: hover) {
	.pyp-ps-why__grid li:hover .pyp-ps-ico {
		transform: translateY(-3px) rotate(-6deg);
	}
}

@media (min-width: 768px) {
	.pyp-ps .pyp-ps-why__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pyp-ps-why__grid li {
		grid-template-columns: 1fr;
		padding: 26px clamp(16px, 2vw, 30px);
	}

	.pyp-ps-why__grid li:not(:nth-child(3n + 1)) {
		border-left: 1px solid var(--pyp-ps-line);
	}

	.pyp-ps-why__grid .pyp-ps-ico {
		grid-row: auto;
		margin-bottom: 14px;
	}
}

/* More about the school: four photo tiles that lead on */
.pyp-ps-more {
	padding-block: clamp(20px, 2.6vw, 40px) clamp(28px, 3.6vw, 52px);
	background: #fff;
}

.pyp-ps .pyp-ps-more__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-more__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 22px;
	aspect-ratio: 3 / 4;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.pyp-ps-more__link img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1000ms var(--pyp-ease-out);
}

.pyp-ps-more__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 32, 20, 0) 40%, rgba(8, 32, 20, 0.78) 100%);
}

.pyp-ps-more__text {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pyp-ps-more__title {
	font: 500 clamp(17px, 1.6vw, 22px)/1.2 var(--pyp-font-menu);
}

.pyp-ps-more__line {
	font: 400 12.5px/1.4 var(--pyp-font-sans);
	color: rgba(255, 255, 255, 0.8);
}

.pyp-ps-more__go {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color 300ms ease, color 300ms ease, transform 400ms var(--pyp-ease-out);
}

.pyp-ps-more__link:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

@media (hover: hover) {
	.pyp-ps-more__link:hover {
		color: #fff;
	}

	.pyp-ps-more__link:hover img {
		transform: scale(1.06);
	}

	.pyp-ps-more__link:hover .pyp-ps-more__go {
		background: #fff;
		color: var(--pyp-forest);
		transform: rotate(45deg);
	}
}

@media (min-width: 992px) {
	.pyp-ps .pyp-ps-more__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

/* The family tree (our-lineage.php): masters in one row, our teachers in
   the next, the school at the root; curves join each teacher to the
   masters they learned from. Pointing at a node lights its lines. Phones:
   no lines, each teacher says in words whom they learned from. */
.pyp-ps-tree {
	padding-block: clamp(32px, 4vw, 64px);
	background: linear-gradient(180deg, #f6f9f2 0%, #fff 100%);
}

.pyp-ps-tree__stage {
	position: relative;
}

.pyp-ps-tree__lines {
	display: none;
}

.pyp-ps .pyp-ps-tree__tier {
	margin: 18px 0 10px;
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps .pyp-ps-tree__row {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-ps-tree__row--masters {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pyp-ps-tree__row--teachers {
	grid-template-columns: 1fr;
}

.pyp-ps-tree__node {
	display: grid;
	gap: 4px;
	padding: 12px;
	border: 1px solid rgba(29, 112, 68, 0.1);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.8);
	outline: none;
	transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, opacity 400ms ease, transform 400ms var(--pyp-ease-out);
}

.pyp-ps-tree__node:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-ps-tree__node--master {
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 10px;
}

.pyp-ps-tree__node--master .pyp-ps-ico {
	grid-row: span 2;
	width: 36px;
	height: 36px;
	border-radius: 11px;
}

.pyp-ps-tree__name {
	font: 500 14.5px/1.25 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-tree__name a {
	color: inherit;
	text-decoration: none;
}

.pyp-ps-tree__era {
	font: 600 9.5px/1.3 var(--pyp-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pyp-ink-soft);
}

.pyp-ps-tree__node--teacher {
	grid-template-columns: 48px 1fr;
	align-items: center;
	column-gap: 12px;
}

.pyp-ps-tree__node--teacher img {
	grid-row: span 2;
	width: 48px;
	height: 48px;
	border: 2px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 22%;
	box-shadow: 0 6px 14px -8px rgba(15, 59, 39, 0.5);
}

.pyp-ps-tree__learned {
	font: 400 13px/1.45 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-tree__school {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: max-content;
	margin: 22px auto 0;
	padding: 14px 26px;
	border-radius: 999px;
	background: linear-gradient(135deg, #23824f, var(--pyp-forest));
	box-shadow: var(--pyp-glow-green);
	font: 500 17px/1 var(--pyp-font-menu);
	color: #fff;
}

.pyp-ps-tree__school .pyp-ps-om {
	color: var(--pyp-saffron);
}

.pyp-ps-tree__detail {
	display: none;
}

@media (min-width: 1100px) {
	.pyp-ps-tree__lines {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}

	.pyp-ps-tree__line {
		fill: none;
		stroke: rgba(29, 112, 68, 0.18);
		stroke-width: 1.5;
		transition: stroke 400ms ease, stroke-width 400ms ease, opacity 400ms ease;
	}

	.pyp-ps-tree__line--root {
		stroke-dasharray: 3 5;
	}

	.pyp-ps-tree__line.is-lit {
		stroke: var(--pyp-green);
		stroke-width: 2.5;
	}

	.pyp-ps-tree[data-active] .pyp-ps-tree__line:not(.is-lit) {
		opacity: 0.35;
	}

	.pyp-ps-tree__row--masters {
		grid-template-columns: repeat(10, minmax(0, 1fr));
		gap: 10px;
	}

	.pyp-ps-tree__row--teachers {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 14px;
	}

	/* the space the lines run through */
	.pyp-ps-tree__row--masters + .pyp-ps-tree__tier {
		position: relative;
		z-index: 1;
		width: max-content;
		margin: 84px auto 12px;
		padding: 4px 12px;
		border-radius: 999px;
		background: #fff;
	}

	.pyp-ps-tree__node {
		cursor: pointer;
	}

	.pyp-ps-tree__node--master {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 12px 8px;
		text-align: center;
	}

	.pyp-ps-tree__node--master .pyp-ps-ico {
		grid-row: auto;
		margin-bottom: 4px;
	}

	.pyp-ps-tree__node--master .pyp-ps-tree__name {
		font-size: 13px;
	}

	.pyp-ps-tree__node--teacher {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 14px 8px;
		text-align: center;
	}

	.pyp-ps-tree__node--teacher img {
		grid-row: auto;
		width: 64px;
		height: 64px;
		margin-bottom: 4px;
	}

	.pyp-ps-tree__learned {
		display: none;
	}

	.pyp-ps-tree__school {
		margin-top: 70px;
	}

	.pyp-ps-tree__node.is-lit {
		border-color: transparent;
		background: #fff;
		box-shadow: 0 0 0 2px var(--pyp-green), 0 16px 30px -18px rgba(15, 59, 39, 0.5);
		transform: translateY(-3px);
	}

	.pyp-ps-tree[data-active] .pyp-ps-tree__node:not(.is-lit) {
		opacity: 0.5;
	}

	/* the words for whatever is lit, under the tree */
	.pyp-ps-tree__detail {
		display: block;
		min-height: 3.4em;
		margin-top: 26px;
		text-align: center;
	}

	.pyp-ps .pyp-ps-tree__about {
		display: none;
		max-width: 80ch;
		margin: 0 auto;
		font: 400 15px/1.65 var(--pyp-font-sans);
		color: var(--pyp-ink-soft);
	}

	.pyp-ps-tree__about b {
		font-weight: 600;
		color: var(--pyp-forest);
	}

	.pyp-ps-tree__about span {
		margin: 0 6px;
		font: 600 10.5px/1 var(--pyp-font-sans);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--pyp-green);
	}

	.pyp-ps-tree__about.is-shown {
		display: block;
		animation: pyp-ps-fade 400ms var(--pyp-ease-out);
	}
}

/* the masters list: the era where the Sanskrit goes, and the heirs as faces */
.pyp-ps-class__era {
	grid-area: sa;
	font: 600 11px/1.3 var(--pyp-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps .pyp-ps-class__heirs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.pyp-ps-class__heirs a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.07);
	font: 500 13px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
	text-decoration: none;
	transition: background-color 200ms ease;
}

.pyp-ps-class__heirs img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 22%;
}

@media (hover: hover) {
	.pyp-ps-class__heirs a:hover {
		background: rgba(29, 112, 68, 0.14);
		color: var(--pyp-forest);
	}
}

/* The other gurus: a rail of their cards, shared by every guru page */
.pyp-ps-others {
	padding-block: clamp(28px, 3.6vw, 56px) clamp(12px, 1.6vw, 24px);
	background: #fff;
}

.pyp-ps-others__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(16px, 2vw, 26px);
}

.pyp-ps-others__arrows {
	display: none;
	gap: 8px;
}

.pyp-ps-others__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(29, 112, 68, 0.16);
	border-radius: 50%;
	background: #fff;
	color: var(--pyp-forest);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 160ms var(--pyp-ease-out);
}

.pyp-ps-others__arrow:active {
	transform: scale(0.94);
}

.pyp-ps-others__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) {
	.pyp-ps-others__arrows {
		display: flex;
	}

	.pyp-ps-others__arrow:not(:disabled):hover {
		border-color: var(--pyp-green);
		background: var(--pyp-green);
		color: #fff;
	}
}

.pyp-ps .pyp-ps-others__rail {
	display: flex;
	gap: 16px;
	margin: 0 calc(var(--pyp-gutter) * -1);
	padding: 4px var(--pyp-gutter) 18px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pyp-gutter);
	scrollbar-width: none;
}

.pyp-ps-others__rail::-webkit-scrollbar {
	display: none;
}

.pyp-ps-guru {
	flex: 0 0 min(72%, 280px);
	scroll-snap-align: start;
}

.pyp-ps-guru:last-child {
	margin-right: var(--pyp-gutter);
}

.pyp-ps-guru__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: var(--pyp-ps-edge);
	border-radius: 24px;
	background: linear-gradient(160deg, #f7faf3 0%, #ebf3e3 100%);
	box-shadow: 0 20px 40px -30px rgba(8, 32, 20, 0.5);
	color: inherit;
	text-decoration: none;
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-ps-guru__link:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

.pyp-ps-guru__photo {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.pyp-ps-guru__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--pyp-ease-out);
}

.pyp-ps-guru__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font: 600 10.5px/1 var(--pyp-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-ps-guru__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.pyp-ps-guru__name {
	font: 500 18px/1.2 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-ps-guru__role {
	margin-top: 4px;
	font: 400 13px/1.45 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
}

.pyp-ps-guru__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

.pyp-ps-guru__arts {
	display: flex;
	gap: 6px;
}

.pyp-ps-guru__arts .pyp-ps-ico {
	width: 32px;
	height: 32px;
	border-radius: 10px;
}

.pyp-ps-guru__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	white-space: nowrap;
}

.pyp-ps-guru__go .bi {
	transition: transform 200ms var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-ps-guru__link:hover {
		transform: translateY(-6px);
		box-shadow: 0 30px 50px -30px rgba(8, 32, 20, 0.6);
	}

	.pyp-ps-guru__link:hover .pyp-ps-guru__photo img {
		transform: scale(1.05);
	}

	.pyp-ps-guru__link:hover .pyp-ps-guru__go .bi {
		transform: translateX(3px);
	}
}

/* 8. Call to action
   ========================================================================== */

.pyp-ps-cta {
	padding-block: clamp(10px, 1.6vw, 24px) clamp(28px, 3.4vw, 52px);
	background: #fff;
}

.pyp-ps-cta__panel {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	overflow: hidden;
	padding: clamp(20px, 2.8vw, 40px);
	border-radius: 28px;
	background: linear-gradient(165deg, #1f7a49 0%, #16603a 55%, #12512f 100%);
	box-shadow: 0 30px 60px -34px rgba(8, 32, 20, 0.7);
	color: #fff;
}

.pyp-ps-cta__wheel {
	position: absolute;
	top: 50%;
	right: -120px;
	z-index: -1;
	width: 420px;
	height: 420px;
	margin-top: -210px;
	color: rgba(255, 255, 255, 0.07);
	fill: currentColor;
}

.pyp-ps-cta__face {
	width: 76px;
	height: 76px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 22px;
	object-fit: cover;
	object-position: center 30%;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.5);
}

.pyp-ps .pyp-ps-cta__title {
	margin: 0 0 6px;
	font: 500 clamp(22px, 2.4vw, 36px)/1.15 var(--pyp-font-menu);
	letter-spacing: -0.01em;
	color: #fff;
}

.pyp-ps .pyp-ps-cta__text {
	margin: 0;
	font: 400 15px/1.6 var(--pyp-font-sans);
	color: rgba(255, 255, 255, 0.78);
}

.pyp-ps-cta__actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pyp-ps .pyp-ps-cta .pyp-ps-btn--solid {
	background: #c8e6a0;
	color: var(--pyp-forest);
}

.pyp-ps .pyp-ps-cta .pyp-ps-btn--ghost {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.pyp-ps-cta .pyp-ps-btn--ghost .bi-whatsapp {
	color: #c8e6a0;
}

@media (hover: hover) {
	.pyp-ps .pyp-ps-cta .pyp-ps-btn--solid:hover {
		background: #fff;
		color: var(--pyp-forest);
	}

	.pyp-ps .pyp-ps-cta .pyp-ps-btn--ghost:hover {
		border-color: #fff;
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}
}

@media (min-width: 992px) {
	.pyp-ps-cta__panel {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 22px;
	}

	.pyp-ps-cta__actions {
		grid-column: auto;
	}
}

/* Reveal as each part scrolls in
   ========================================================================== */

.pyp-ps.is-armed [data-pyp-ps-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 800ms var(--pyp-ease-out), transform 950ms var(--pyp-ease-out);
}

.pyp-ps.is-armed [data-pyp-ps-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* the course rows rise in turn */
.pyp-ps.is-armed .pyp-ps-courses__list .pyp-ps-course {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms var(--pyp-ease-out), transform 700ms var(--pyp-ease-out);
	transition-delay: calc(min(var(--pyp-ps-i, 0), 6) * 70ms + 120ms);
}

.pyp-ps.is-armed .pyp-ps-courses__list.is-in .pyp-ps-course {
	opacity: 1;
	transform: none;
}

/* Phones: app sizing
   ========================================================================== */

@media (max-width: 991.98px) {
	.pyp-ps-hero__stage {
		margin-inline: auto;
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	.pyp-ps-hero {
		padding-top: 6px;
	}

	.pyp-ps-hero__stage {
		height: 330px;
	}

	.pyp-ps-orbit .pyp-ps-ico {
		width: 40px;
		height: 40px;
		margin: -20px 0 0 -20px;
		border-radius: 12px;
	}

	.pyp-ps-hero__om {
		top: 18%;
		right: 2%;
		width: 44px;
		height: 44px;
		padding: 10px;
		border-radius: 14px;
	}

	.pyp-ps .pyp-ps-hero__title {
		font-size: clamp(30px, 9vw, 38px);
	}

	.pyp-ps-hero__actions .pyp-ps-btn {
		flex: 1 1 0;
		padding-inline: 14px;
	}

	.pyp-ps-hero__facts > div {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 6px;
		padding: 12px 6px;
		text-align: center;
	}

	.pyp-ps-hero__facts .bi {
		grid-row: auto;
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.pyp-ps .pyp-ps-hero__facts dt {
		margin-top: 0;
		font-size: 9.5px;
	}

	.pyp-ps-quote__panel {
		border-radius: 24px;
	}

	.pyp-ps-cta__actions .pyp-ps-btn {
		flex: 1 1 auto;
	}

	.pyp-ps-cta__face {
		width: 60px;
		height: 60px;
		border-radius: 18px;
	}
}

/* Comfort
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pyp-ps-glow,
	.pyp-ps-spin,
	.pyp-ps-float,
	.pyp-ps-orbit,
	.pyp-ps-orbit .pyp-ps-ico,
	.pyp-ps-ganga path,
	.pyp-ps-hero__photo,
	.pyp-ps-ring__turn,
	.pyp-ps-mandala__light,
	.pyp-ps-tile__art *,
	.pyp-ps-aum__dot,
	.pyp-ps-blue__guide line,
	.pyp-ps-blue__arc,
	.pyp-ps-nadi__flow,
	.pyp-ps-sangam__flow,
	.pyp-ps-sangam__meet,
	.pyp-ps-seven__turn,
	.pyp-ps-moon__stars,
	.pyp-ps-map__pulse {
		animation: none !important;
	}

	.pyp-ps.is-armed [data-pyp-ps-reveal],
	.pyp-ps.is-armed .pyp-ps-courses__list .pyp-ps-course {
		transform: none;
		transition: opacity 300ms ease;
	}

	.pyp-ps-ch,
	.pyp-ps-ch__media img,
	.pyp-ps-ch__body,
	.pyp-ps-ch__body > * {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pyp-ps-hero__facts,
	.pyp-ps-quote__panel,
	.pyp-ps-courses__list,
	.pyp-ps-path__list,
	.pyp-ps-tile,
	.pyp-ps-ask,
	.pyp-ps-orbit .pyp-ps-ico,
	.pyp-ps-hero__om {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}