/* Sahaja Yoga Vadodara — full-site additions. Tokens come from the parent theme.json. */

/* ---------- Buttons ----------
   One CTA style everywhere (the homepage's): dark-brown primary (white text 6.29:1); on hover a warmer
   gold-brown (#8A6A2F, white text 5.02:1) with a slight lift and soft shadow, never black. Outline
   buttons lift the same way. A visible focus ring for keyboard users. */
.wp-block-button__link {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--gold-dark); color: #fff; border: 1px solid var(--wp--preset--color--gold-dark);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #8a6a2f; border-color: #8a6a2f; color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--wp--preset--color--gold-dark);
	padding: calc(.75rem - 1px) calc(1.5rem - 1px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--charcoal); }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(118, 92, 46, .25); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid #183b34; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link:hover { transform: none; }
}
.syvs-section .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--50); gap: .75rem 1rem; }

/* ---------- Header and navigation ---------- */
/* PoC 4.0 header: identity left, navigation centred, languages right (one row on desktop). */
.syvs-header { padding-block: .5rem; background: #fffaf3; border-block-end: 1px solid #eee4d5; }
.syvs-header-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem 2rem; min-block-size: 4.5rem; }
.syvs-header-bar > * { margin: 0; min-inline-size: 0; }
.syvs-brand { margin: 0; }
.syvs-brand a { display: inline-flex; align-items: center; gap: .7rem; color: var(--wp--preset--color--gold-dark); text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; line-height: 1.15; }
.syvs-brand-mark { font-size: 2rem; line-height: 1; }
.syvs-header .syvs-navigation { justify-self: center; font-size: .9375rem; }
.syvs-header .syvs-language-switcher { justify-self: end; }
.syvs-header .syvs-languages { flex-direction: column; align-items: flex-end; gap: 0; }
.syvs-navigation .wp-block-navigation-item__content { text-decoration: none; }
.syvs-navigation .wp-block-navigation-item__content:hover,
.syvs-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--gold-dark); }
.syvs-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--ivory) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent) !important;
	border-radius: .5rem;
	box-shadow: 0 12px 32px rgba(41, 40, 36, .08);
	padding: .5rem 0;
	min-inline-size: 15rem !important;
}
.syvs-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 1.25rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding-inline-start: 1rem; }

/* Language switcher placeholder */
.syvs-languages { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
.syvs-languages ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.syvs-languages li + li::before { content: "·"; margin-inline-end: .25rem; color: var(--wp--preset--color--gold-dark); }
.syvs-languages [aria-current] { font-weight: 600; }
.syvs-languages [aria-disabled] { color: var(--wp--preset--color--muted); cursor: not-allowed; }
.syvs-languages-note { font-size: .75rem; color: var(--wp--preset--color--muted); }

/* ---------- Inner-page hero and breadcrumbs ---------- */
.syvs-page-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
	background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--ivory));
	overflow: hidden;
}
.syvs-page-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: 50%;
	inset-inline-end: clamp(-4rem, -2vw, 0rem);
	inline-size: clamp(12rem, 28vw, 22rem);
	aspect-ratio: 1;
	transform: translateY(-50%);
	opacity: .16;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 250'%3E%3Cg fill='none' stroke='%23A88A4A' stroke-width='1.2'%3E%3Cpath d='M87 228C42 172 45 99 83 28C130 100 139 177 87 228Z'/%3E%3Cpath d='M87 228C28 208 4 151 3 105C57 123 92 169 87 228Z'/%3E%3Cpath d='M87 228C140 211 175 164 178 113C127 131 88 174 87 228Z'/%3E%3Cpath d='M87 228C56 188 49 147 45 126M87 228C117 195 137 156 145 143M87 228C92 172 87 93 83 28'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.syvs-page-hero-inner > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syvs-page-hero .wp-block-post-title { margin-block-end: 0; max-inline-size: 20ch; text-wrap: balance; }
.syvs-page-intro { max-inline-size: 60ch; color: var(--wp--preset--color--charcoal); }
.syvs-page-intro p { margin: 0; }
.syvs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--wp--preset--color--muted); }
.syvs-breadcrumbs li + li::before { content: "›"; margin-inline-end: .35rem; color: var(--wp--preset--color--gold); }
.syvs-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.syvs-breadcrumbs a:hover { color: var(--wp--preset--color--gold-dark); text-decoration: underline; }

/* ---------- Sections, grids and cards ---------- */
.syvs-inner > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syvs-inner > :where(.syvs-grid, .syvs-split, .syvs-note) { margin-block-start: var(--wp--preset--spacing--60); }
.syvs-section h3 { margin-block-start: var(--wp--preset--spacing--50); }
.syvs-section :where(ul, ol):not(.syvs-footer-links) { padding-inline-start: 1.25rem; max-inline-size: 66ch; }
.syvs-section li { margin-block: .4rem; }
.syvs-grid { display: grid; gap: var(--wp--preset--spacing--50); }
.syvs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.syvs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.syvs-grid > * { min-inline-size: 0; margin-block: 0; }
.syvs-card {
	padding: var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 28%, transparent);
	border-block-start: 2px solid var(--wp--preset--color--gold);
	border-radius: .5rem;
	transition: transform .35s ease, box-shadow .35s ease;
}
.syvs-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(41, 40, 36, .06); }
.syvs-card > * { margin-block: 0; }
.syvs-card > * + * { margin-block-start: .75rem; }
.syvs-card h3 { margin-block-start: 0; font-size: var(--wp--preset--font-size--lg); }
.syvs-card .syv-eyebrow + h3, .syvs-card .syvs-small + h3, .syvs-card .syvs-placeholder + h3 { margin-block-start: .5rem; }
.syvs-card .wp-block-buttons { margin-block-start: 1rem; }
.syvs-card p { font-size: var(--wp--preset--font-size--sm); }
.syvs-small { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.syvs-card > .syvs-small:first-child { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--2-xl); color: var(--wp--preset--color--gold-dark); line-height: 1; }
/* Unconfirmed events are never shown: a card that still holds a placeholder is hidden, and the whole
   three-card grid is hidden until at least one card has real event content. */
.syvs-event-template .syvs-card:has(.syvs-placeholder) { display: none; }
.syvs-event-template:not(:has(.syvs-card:not(:has(.syvs-placeholder)))) { display: none; }
.syvs-event-template .syvs-card > .syvs-small:first-child { font-family: var(--wp--preset--font-family--body); font-size: .75rem; letter-spacing: .12em; line-height: 1.5; }

.syvs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); align-items: center; }
.syvs-split > * { min-inline-size: 0; margin-block: 0; }
.syvs-col > * { margin-block: 0; }
.syvs-col > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syvs-inner > .syvs-split:first-child { margin-block-start: 0; }
.syvs-portrait-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.syvs-portrait img { inline-size: 100%; block-size: auto; border-radius: .5rem; }
.syvs-rounded img { inline-size: 100%; block-size: auto; border-radius: .5rem; }
.syvs-section .syv-subtle-system-visual { margin: 0; }

/* Facts row on the sessions page */
.syvs-facts .syvs-card p { font-size: var(--wp--preset--font-size--md); }

/* Notes */
.syvs-note {
	padding: var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	border-inline-start: 3px solid var(--wp--preset--color--gold);
	border-radius: 0 .5rem .5rem 0;
	max-inline-size: 46rem;
}
.syvs-note > * { margin-block: 0; }
.syvs-note > * + * { margin-block-start: .75rem; }
.syvs-note :is(h3, h4) { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--md); font-weight: 600; }
.syvs-empty { max-inline-size: none; }

/* Visible placeholders for content still to be supplied */
.syvs-placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	min-block-size: 9rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--gold-dark);
	border-radius: .5rem;
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--wp--preset--color--gold) 7%, transparent) 14px 15px),
		var(--wp--preset--color--ivory);
	text-align: center;
}
.syvs-placeholder > p { margin: 0; max-inline-size: none; }
.syvs-ph-kind { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); font-weight: 600; }
.syvs-ph-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--lg); }
.syvs-ph-text { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
/* 16:9 where the text fits; min-block-size:auto lets the box grow on narrow screens instead of
   overflowing onto the card heading. */
.syvs-placeholder-video { aspect-ratio: 16 / 9; min-block-size: auto; }
.syvs-split .syvs-placeholder { aspect-ratio: 4 / 3; }

/* Guided videos (YouTube, privacy-enhanced): a 16:9 frame that shows the whole player, no cropping. */
.syvs-video-card { display: flex; flex-direction: column; gap: .75rem; }
.syvs-video-card > * + * { margin-block-start: 0; }
.syvs-video-card:hover { transform: none; } /* no lift under a playing video */
.syvs-video-card > .syvs-video { margin-block-start: auto; } /* both players line up, whatever the heading script */
.syvs-video { position: relative; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; background: var(--wp--preset--color--ivory); border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); }
.syvs-video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.syvs-video:focus-within { outline: 3px solid #183b34; outline-offset: 3px; }

/* Featured event on the Events page: details beside the livestream panel (inc/event-livestream.php). */
.syvs-split.syvs-event-feature {
	align-items: start;
	padding: var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 28%, transparent);
	border-block-start: 2px solid var(--wp--preset--color--gold);
	border-radius: .5rem;
}
.syvs-event-feature .syvs-col > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.syvs-event-status {
	justify-self: start; inline-size: fit-content; padding: .2rem .75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent); border-radius: 999px;
	font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark);
}
.syvs-livestream {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ivory);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent);
	border-radius: .5rem;
}
.syvs-livestream > * { margin-block: 0; }
.syvs-livestream > * + * { margin-block-start: .75rem; }
.syvs-livestream .syvs-livestream-title { font-family: var(--wp--preset--font-family--body); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
.syvs-livestream p { font-size: var(--wp--preset--font-size--sm); }
.syvs-livestream .syvs-livestream-when { font-weight: 600; }
/* Event attendance groups (Attending in Person / Joining Online): labelled sections with a rule. */
.syvs-event-feature h4.wp-block-heading { margin-block-start: var(--wp--preset--spacing--50); padding-block-start: var(--wp--preset--spacing--30); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
.syvs-livestream.is-live .syvs-livestream-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--charcoal); } /* the live heading reads as a heading */

/* Contact people (Contact page): name and a large, easy-to-tap telephone link. */
.syvs-contacts .syvs-card > p:first-child { font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--charcoal); }
.syvs-contacts .syvs-card > * + * { margin-block-start: .25rem; }
#get-in-touch .syvs-inner > h3 { margin-block-start: var(--wp--preset--spacing--50); }
/* Contact groups (Trustees, Special Invitees): labelled sections under the trust heading. */
#get-in-touch .syvs-inner > h4:is(#trustees, #special-invitees) { margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); padding-block-start: var(--wp--preset--spacing--30); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
#get-in-touch .syvs-inner > h3 + h4#trustees { margin-block-start: var(--wp--preset--spacing--30); }
.syvs-contacts-invitees .syvs-card { background: transparent; border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 28%, transparent); border-inline-start: 3px solid color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent); }
.syvs-contacts a[href^="tel:"] { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--wp--preset--font-size--md); font-weight: 600; color: var(--wp--preset--color--gold-dark); text-decoration: none; letter-spacing: .02em; }
.syvs-contacts a[href^="tel:"]:hover { text-decoration: underline; text-underline-offset: .2em; }
.syvs-steps .syvs-placeholder { min-block-size: 7rem; }
/* Step illustrations: transparent PNGs shown at one consistent size. Steps 4 and 6 are only 242 px
   in the source library, so nothing is displayed larger than that. */
.syvs-step-image { margin: 0 auto; text-align: center; }
.syvs-step-image img { display: block; inline-size: 100%; max-inline-size: 13rem; block-size: auto; aspect-ratio: 9 / 10; object-fit: contain; margin-inline: auto; }
.syvs-steps .syvs-card h3 { font-size: var(--wp--preset--font-size--md); }

/* Subtle System pages. The composite diagram gets the wider column, and the full width below
   64rem so its centres stay legible. Chakra symbols are 300–374 px masters shown at most 10rem
   (sharp at 2x); Agnya is wider than tall, so every symbol sits in the same square box. */
.syvs-diagram-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.syvs-diagram-split .syvs-small { text-align: center; }
.syvs-system-cards .syvs-card { display: flex; flex-direction: column; }
.syvs-system-cards .syvs-card .wp-block-buttons { margin-block-start: auto; padding-block-start: 1rem; }
.syvs-chakra-symbol { margin: 0; }
.syvs-chakra-symbol img { display: block; inline-size: 100%; max-inline-size: 10rem; block-size: auto; aspect-ratio: 1; object-fit: contain; margin-inline: auto; }
.syvs-split.syvs-chakra { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
.syvs-chakra .syv-lead, .syvs-channels .syv-lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--gold-dark);
}
.syvs-chakra .wp-block-heading + .syv-lead { margin-block-start: .5rem; }
/* Position / On the hands: two clearly separated lines in a compact note. */
.syvs-note.syvs-chakra-facts { padding: .75rem 1rem; }
.syvs-chakra-facts p { font-size: var(--wp--preset--font-size--sm); }
.syvs-chakra-facts > * + * { margin-block-start: .4rem; padding-block-start: .4rem; border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 25%, transparent); }
.syvs-chakra-index { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.syvs-chakra-index .syvs-card { padding: var(--wp--preset--spacing--40) .75rem; text-align: center; }
.syvs-chakra-index .syvs-chakra-symbol img { max-inline-size: 4.5rem; }
.syvs-chakra-index h3 { font-size: var(--wp--preset--font-size--sm); }
.syvs-chakra-index h3 a { color: inherit; text-decoration: none; }
.syvs-chakra-index h3 a:hover { color: var(--wp--preset--color--gold-dark); text-decoration: underline; }
.syvs-chakra-index .syvs-card p { font-size: .8125rem; color: var(--wp--preset--color--muted); }
.syvs-channels .syv-lead { font-size: var(--wp--preset--font-size--sm); }
.syvs-channel-centre { background: var(--wp--preset--color--ivory); border-block-start-width: 4px; }

/* Subtle System diagram with label overlays ([syvs_subtle_system], inc/subtle-system-diagram.php).
   The approved artwork is an unchanged <img>; the overlays share its viewBox (1374 x 1145), so
   SVG user units (including font sizes) scale with the image and stay registered. */
.syvs-ssd { margin: 0; }
.syvs-ssd__stage { position: relative; }
.syvs-ssd__art { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; aspect-ratio: 1374 / 1145; border-radius: .5rem; }
.syvs-ssd__overlay { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; font-family: var(--wp--preset--font-family--body); }
.syvs-ssd__overlay.is-phone { display: none; }
.syvs-ssd__overlay text { fill: var(--wp--preset--color--charcoal); paint-order: stroke; stroke: var(--wp--preset--color--ivory); stroke-width: 6px; stroke-linejoin: round; }
.syvs-ssd__name { font-size: 30px; }
.syvs-ssd__name.is-pingala, .syvs-ssd__name.is-ida { font-weight: 700; }
.syvs-ssd__name.is-pingala { fill: #6f5200; }
.syvs-ssd__name.is-ida { fill: #00557e; }
.syvs-ssd__note { font-size: 27px; }
.syvs-ssd__leader { stroke: var(--wp--preset--color--gold-dark); stroke-width: 2px; }
.syvs-ssd__leader.is-dashed { stroke-dasharray: 8 6; }
.syvs-ssd__marker circle { fill: var(--wp--preset--color--ivory); stroke: var(--wp--preset--color--gold-dark); stroke-width: 3px; }
.syvs-ssd__overlay .syvs-ssd__marker text { stroke: none; font-weight: 700; text-anchor: middle; }
.syvs-ssd__sun circle { fill: #e3b54b; }
.syvs-ssd__rays line { stroke: #b8913e; stroke-width: 5px; stroke-linecap: round; }
.syvs-ssd__moon path { fill: #4f6d96; }
/* Legend: always in the document; shown on phones and for the compact homepage variant. */
.syvs-ssd__legend { margin-block-start: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--sm); }
.syvs-ssd__legend-title { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
.syvs-ssd .syvs-ssd__legend-chakras, .syvs-ssd .syvs-ssd__legend-keys {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem;
	margin: .6rem 0 0; padding: 0; list-style: none; max-inline-size: none;
}
.syvs-ssd .syvs-ssd__legend li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.syvs-ssd .syvs-ssd__legend-keys { grid-template-columns: minmax(0, 1fr); }
.syvs-ssd--home .syvs-ssd__legend { margin-block-start: .75rem; line-height: 1.35; }
.syvs-ssd--home .syvs-ssd__legend-chakras { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .2rem .75rem; margin-block-start: .4rem; }
.syvs-ssd--home .syvs-ssd__legend-keys { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .2rem .75rem; margin-block-start: .5rem; }
.syvs-ssd--home .syvs-ssd__key, .syvs-ssd--home .syvs-ssd__icon { inline-size: 1.45rem; block-size: 1.45rem; }
.syvs-ssd .syvs-ssd__legend li { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.syvs-ssd__key {
	display: inline-grid; place-items: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem;
	border: 2px solid var(--wp--preset--color--gold-dark); border-radius: 50%;
	background: var(--wp--preset--color--ivory); font-size: .8125rem; font-weight: 700; line-height: 1;
}
.syvs-ssd__icon { flex: none; inline-size: 1.6rem; block-size: 1.6rem; }
@media (min-width: 37.5625rem) {
	/* Larger screens: names sit on the diagram, so the legend is for assistive technology only. */
	.syvs-ssd:not(.syvs-ssd--home):not(.syvs-ssd--homepage) .syvs-ssd__legend {
		position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
	}
}
@media (max-width: 64rem) {
	/* Homepage below desktop: the diagram column is narrow, so use a square frame (still the whole figure
	   and both hands) with the larger phone markers; the key below names everything. */
	.syvs-ssd--home .syvs-ssd__stage { aspect-ratio: 1; overflow: hidden; border-radius: .5rem; }
	.syvs-ssd--home .syvs-ssd__art { position: absolute; inset: 0; block-size: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; border-radius: 0; }
	.syvs-ssd--home .syvs-ssd__overlay.is-full { display: none; }
	.syvs-ssd--home .syvs-ssd__overlay.is-phone { display: block; }
}
/* Homepage variant (PoC 4.0): the whole image at every width, labels for Pingala, Ida and Kundalini,
   numbered Chakra markers named in a compact list below. Phones use the larger 'is-phone' drawing of the
   same layout (no crop). The channel and Kundalini keys stay in the document for screen readers only. */
.syvs-ssd--homepage .syvs-ssd__stage { aspect-ratio: auto; overflow: visible; border-radius: 0; }
.syvs-ssd--homepage .syvs-ssd__art { position: static; block-size: auto; aspect-ratio: 1374 / 1145; object-fit: fill; border-radius: .5rem; }
.syvs-ssd--homepage .syvs-ssd__name { font-size: 32px; }
.syvs-ssd--homepage .syvs-ssd__note { font-size: 28px; }
.syvs-ssd--homepage .is-phone .syvs-ssd__name { font-size: 52px; }
.syvs-ssd--homepage .is-phone .syvs-ssd__note { font-size: 44px; }
.syvs-ssd--homepage .syvs-ssd__legend { margin-block-start: .75rem; }
.syvs-ssd--homepage .syvs-ssd__legend-title, .syvs-ssd--homepage .syvs-ssd__legend-keys {
	position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.syvs-ssd.syvs-ssd--homepage .syvs-ssd__legend-chakras {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem .35rem; margin: 0; font-size: .75rem; letter-spacing: -.005em; text-align: center;
}
.syvs-ssd.syvs-ssd--homepage .syvs-ssd__legend li { flex-direction: column; justify-content: flex-start; gap: .3rem; line-height: 1.2; }
.syvs-ssd__chakra-icon { display: block; inline-size: 2.6rem; block-size: 2.6rem; object-fit: contain; }
.syvs-ssd--homepage .syvs-ssd__key { inline-size: 1.45rem; block-size: 1.45rem; font-size: .75rem; }

/* ---------- Phase 3.1 simplified pages ---------- */
/* Hero image ([syvs_hero_media], by slug): text left, image right; stacked on phones. */
.syvs-page-hero-inner:has(.syvs-hero-media) {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--wp--preset--spacing--60); align-items: center;
}
.syvs-page-hero-inner:has(.syvs-hero-media) > * { grid-column: 1; }
.syvs-page-hero-inner > .syvs-hero-media { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.syvs-hero-media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1600 / 1143; object-fit: cover; border-radius: .5rem; }
.syvs-page-shri-mataji-nirmala-devi .syvs-page-hero .wp-block-post-title { text-transform: uppercase; letter-spacing: .03em; max-inline-size: 16ch; }
/* Hero shows the heading and portrait only; the excerpt remains the page description for search. */
.syvs-page-shri-mataji-nirmala-devi .syvs-page-intro { display: none; }
/* About: the approved, unlabelled Subtle System artwork (parent theme, unchanged) as a light hero background. */
.syvs-page-about-sahaja-yoga .syvs-page-hero::after {
	inset-block: 0; inset-inline-end: 0; transform: none; block-size: 100%; inline-size: auto; max-inline-size: 60%; aspect-ratio: 1374 / 1145; opacity: .3;
	background: url("/wp-content/themes/sahaja-yoga-vadodara/assets/images/home/subtle-system/home-subtle-system-overview.svg") center / contain no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%); mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}
/* Quotations */
.syvs-quote { margin: 0; padding: 0 0 0 var(--wp--preset--spacing--50); border-inline-start: 3px solid var(--wp--preset--color--gold); max-inline-size: 46rem; }
.syvs-quote p { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); line-height: 1.35; margin: 0; }
.syvs-quote cite { display: block; margin-block-start: .75rem; font-style: normal; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); }
.syvs-split.syvs-quote-split { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); align-items: center; }
.syvs-quote-portrait { margin: 0; }
.syvs-quote-portrait img { display: block; inline-size: 100%; max-inline-size: 10rem; aspect-ratio: 1; object-fit: cover; object-position: 35% 30%; border-radius: 50%; }
/* Portrait gallery (placeholders until the approved portraits are supplied) */
.syvs-portrait-gallery .syvs-card { padding: 0; border: 0; background: none; }
.syvs-portrait-gallery .syvs-placeholder { aspect-ratio: 4 / 5; }
/* Subtle System overview: three short link blocks beside the diagram */
.syvs-grid-1 { grid-template-columns: minmax(0, 1fr); }
.syvs-overview-links .syvs-card { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
.syvs-overview-links .syvs-card .wp-block-buttons { margin-block-start: .75rem; }
/* Seven Chakras: the Void is not one of the seven Chakras, so it is set apart (no symbol, a framed note). */
.syvs-section.syvs-void-section .syvs-note.syvs-void {
	max-inline-size: 52rem; margin-inline: auto; background: var(--wp--preset--color--ivory);
	border: 1px dashed var(--wp--preset--color--gold-dark); border-radius: .5rem; padding: var(--wp--preset--spacing--50);
}
.syvs-void h2 { margin-block-start: .25rem; }
/* Three Nadis: a thin channel-coloured rule beside each channel heading */
.syvs-nadi .syvs-inner > h2.wp-block-heading { padding-inline-start: .9rem; border-inline-start: 4px solid var(--syvs-nadi, var(--wp--preset--color--gold)); }
.syvs-nadi-left { --syvs-nadi: #3f73b0; }
.syvs-nadi-right { --syvs-nadi: #d9b23a; }
.syvs-nadi-centre { --syvs-nadi: var(--wp--preset--color--gold-dark); }

/* FAQ */
.syvs-section .wp-block-details { max-inline-size: 46rem; }
.syvs-section .wp-block-details summary { font-family: var(--wp--preset--font-family--body); }
.syvs-section .wp-block-details[open] summary { color: var(--wp--preset--color--gold-dark); }
.syvs-section .wp-block-details > p { margin-block: .75rem 0; }

/* Map */
.syvs-map { position: relative; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); }
.syvs-map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* ---------- Footer ---------- */
.syvs-footer { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); }
.syvs-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--wp--preset--spacing--60); }
.syvs-footer-grid > * { min-inline-size: 0; margin-block: 0; }
.syvs-footer-col > * { margin-block: 0; }
.syvs-footer-col > * + * { margin-block-start: .75rem; }
.syvs-footer-heading { font-family: var(--wp--preset--font-family--body); font-size: .8125rem !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--gold-dark); }
.syvs-footer-links { list-style: none; margin: 0; padding: 0; }
.syvs-footer-links li { margin-block: .35rem; }
.syvs-footer a { color: var(--wp--preset--color--charcoal); }
.syvs-footer a:hover { color: var(--wp--preset--color--gold-dark); }
.syvs-footer-bottom { margin-block-start: var(--wp--preset--spacing--60); padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent); font-size: .875rem; color: var(--wp--preset--color--muted); }
.syvs-footer-bottom p { margin: 0; }

/* ---------- Gentle reveal on scroll (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.syvs-card, .syvs-note, .syvs-inner > .wp-block-heading {
			animation: syvs-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}
@keyframes syvs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
	.syvs-header-bar { grid-template-columns: minmax(0, 1fr) auto; }
	.syvs-header .syvs-navigation { grid-column: 1 / -1; grid-row: 2; }
	.syvs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.syvs-grid-2.syvs-videos { grid-template-columns: minmax(0, 1fr); max-inline-size: 46rem; } /* one player per row on tablets */
	.syvs-split.syvs-event-feature { grid-template-columns: minmax(0, 1fr); } /* details above a full-width livestream panel */
	.syvs-grid-3.syvs-channels { grid-template-columns: minmax(0, 1fr); }
	.syvs-split.syvs-diagram-split { grid-template-columns: minmax(0, 1fr); }
	.syvs-chakra-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.syvs-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
	.syvs-grid-2, .syvs-grid-3, .syvs-split, .syvs-portrait-split { grid-template-columns: minmax(0, 1fr); }
	.syvs-portrait { max-inline-size: 26rem; }
	.syvs-split.syvs-chakra { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
	.syvs-chakra .syvs-chakra-symbol img { max-inline-size: 7.5rem; margin-inline: 0; }
	.syvs-chakra-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.syvs-page-hero::after { opacity: .1; }
}
@media (max-width: 37.5rem) {
	.syvs-video-card { padding: var(--wp--preset--spacing--30); } /* more width for the player on phones */
	.syvs-contacts.syvs-grid { gap: var(--wp--preset--spacing--30); }
	.syvs-contacts .syvs-card { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } /* compact contact cards on phones */
	.syvs-split.syvs-event-feature { padding: var(--wp--preset--spacing--30); }
	.syvs-livestream { padding: var(--wp--preset--spacing--30); }
	/* Diagram overlays on phones: the same 4:5 frame as the page diagram, larger markers, legend below. */
	.syvs-ssd__stage { aspect-ratio: 4 / 5; overflow: hidden; border-radius: .5rem; }
	.syvs-ssd__art { position: absolute; inset: 0; block-size: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; border-radius: 0; }
	.syvs-ssd__overlay.is-full { display: none; }
	.syvs-ssd__overlay.is-phone { display: block; }
	.syvs-ssd--home .syvs-ssd__legend-chakras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.syvs-ssd--home .syvs-ssd__legend-keys { grid-template-columns: minmax(0, 1fr); }
	.syvs-ssd.syvs-ssd--homepage .syvs-ssd__legend-chakras { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .75rem; font-size: .875rem; }
	.syvs-page-hero-inner:has(.syvs-hero-media) { grid-template-columns: minmax(0, 1fr); }
	.syvs-page-hero-inner > .syvs-hero-media { grid-column: 1; grid-row: auto; margin-block-start: var(--wp--preset--spacing--40); }
	.syvs-split.syvs-quote-split { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.syvs-quote-portrait img { max-inline-size: 7.5rem; }
	.syvs-page-about-sahaja-yoga .syvs-page-hero::after { max-inline-size: 100%; opacity: .14; } /* behind the text on phones: keep it faint */
	.syvs-footer-grid { grid-template-columns: minmax(0, 1fr); }
	/* Phones: show the complete figure (crown, centres, channels, Kundalini, both hands) at a legible
	   size without scrolling. The unchanged image keeps its proportions; only decorative background at
	   the left and right edges falls outside the 4:5 frame. */
	.syvs-diagram-split .syv-subtle-system-visual img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border-radius: .5rem; }
	/* Phones: identity, languages and the menu button on one row; the menu opens as an overlay. */
	.syvs-header-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem .75rem; min-block-size: 4rem; }
	.syvs-header .syvs-navigation { grid-row: 1; grid-column: 3; }
	.syvs-brand a { font-size: 1.1rem; gap: .5rem; }
	.syvs-brand-mark { font-size: 1.6rem; }
	.syvs-header .syvs-languages { font-size: .8125rem; }
	.syvs-languages-note { font-size: .6875rem; }
}