/* =========================================================
   DataVizFairy — frontend styles (v2.0, from approved mockup)
   Day: dreamy pastel, floral shadows, falling daisies
   Night: midnight fairy blue — stars, sparkles, dust, silver
   crescent, gliding butterfly
   Fonts: Google Sans Flex (body 400 / headings), Meow Script
   (handwritten), Raleway (site title)
   ========================================================= */

/* Self-hosted fonts (also declared in theme.json for the editor).
   Paths are relative to this stylesheet: assets/css -> assets/fonts. */
@font-face {
	font-family: 'Google Sans Flex';
	src: url('../fonts/google-sans-flex.woff2') format('woff2');
	font-weight: 1 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('../fonts/raleway-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Meow Script';
	src: url('../fonts/meow-script.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--dvf-bg-top: #ffffff;
	--dvf-bg-mid: #f5f9fd;
	--dvf-bg-bot: #ebf2fa;
	--dvf-ink: #525a69;
	--dvf-ink-soft: #6d7585;
	--dvf-ink-faint: #8a9099;
	--dvf-blossom: #ee93b4;
	--dvf-blossom-soft: #f6c9d8;
	--dvf-peri: #7ea0e8;
	--dvf-peri-deep: #4a6fd4;
	--dvf-grad: linear-gradient(135deg, #d5edfe, #e7e8fd);
	--dvf-glass: rgba(255, 255, 255, 0.45);
	--dvf-glass-strong: rgba(255, 255, 255, 0.72);
	--dvf-glass-border: rgba(255, 255, 255, 0.9);
	--dvf-glass-shadow: 0 12px 40px rgba(70, 90, 140, 0.1);
	--dvf-hover-shadow: 0 24px 60px rgba(70, 90, 140, 0.14);
	--dvf-pill: #ffffff;
	--dvf-card: #ffffff;
	--dvf-card-border: #eceff8;
	--dvf-footer-line: rgba(140, 155, 210, 0.35);
	--dvf-t: background 1.1s ease, color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
	--dvf-font: 'Google Sans Flex', 'Google Sans', -apple-system, 'Segoe UI', sans-serif;
	--dvf-script: 'Meow Script', cursive;
	--dvf-title-font: 'Raleway', 'Google Sans Flex', sans-serif;
	--dvf-wide: min(1560px, calc(100% - clamp(32px, 5vw, 80px)));
	/* posts run narrower than the site's wide measure — hero and body
	   share this so their left edges line up exactly */
	--dvf-post-w: min(840px, calc(100% - clamp(24px, 5vw, 64px)));
}

html[data-theme='night'] {
	--dvf-bg-top: #070b24;
	--dvf-bg-mid: #0d1234;
	--dvf-bg-bot: #171b48;
	--dvf-ink: #e8ecff;
	--dvf-ink-soft: #a9b3e8;
	--dvf-ink-faint: #707cbc;
	--dvf-blossom: #f0a8c4;
	--dvf-blossom-soft: #6d4a74;
	--dvf-peri: #a9b4f5;
	--dvf-peri-deep: #c3cbff;
	--dvf-grad: linear-gradient(135deg, #16294d, #262a5e);
	--dvf-glass: rgba(20, 26, 66, 0.5);
	--dvf-glass-strong: rgba(24, 30, 76, 0.72);
	--dvf-glass-border: rgba(169, 180, 245, 0.3);
	--dvf-glass-shadow: 0 12px 40px rgba(3, 5, 20, 0.5);
	--dvf-hover-shadow: 0 24px 60px rgba(3, 5, 20, 0.65);
	--dvf-pill: rgba(20, 26, 66, 0.85);
	--dvf-card: rgba(28, 34, 84, 0.75);
	--dvf-card-border: rgba(169, 180, 245, 0.22);
	--dvf-footer-line: rgba(169, 180, 245, 0.3);
}

/* ---------- base ---------- */
/* :root prefix so this outranks WordPress global styles, which ship as
   ":root :where(body)" and otherwise win over a plain "body" rule. */
:root body, body {
	font-family: var(--dvf-font);
	/* Google Sans Flex has an optical-size axis. Browsers apply it
	   automatically, so large headings were rendering the narrow 144pt
	   display cut instead of the text cut used in the design. Pin it. */
	font-optical-sizing: none;
	font-variation-settings: 'opsz' 18;
	font-weight: 400;
	color: var(--dvf-ink);
	background: linear-gradient(180deg, var(--dvf-bg-top) 0%, var(--dvf-bg-top) 15%, var(--dvf-bg-bot) 100%) fixed;
	transition: var(--dvf-t);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: var(--dvf-ink); transition: color 0.7s ease; }
p { transition: color 0.7s ease; }
.dvf-script {
	font-family: var(--dvf-script);
	font-weight: 400;
	color: var(--dvf-peri-deep);
	transition: color 0.7s ease;
}

/* ---------- header ---------- */
.dvf-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	display: flex; align-items: center; gap: 20px;
	padding: 12px clamp(20px, 2.5vw, 40px);
	background: var(--dvf-glass-strong);
	border-bottom: 1px solid var(--dvf-glass-border);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	transition: var(--dvf-t), transform 0.5s ease;
}
.dvf-nav.dvf-away { transform: translateY(-130%); }
/* The admin bar is 32px tall at >=783px, 46px below that, and below 600px core
   switches it to position: absolute so it scrolls away with the page. A static
   offset therefore leaves a permanent gap on phones with scrolled content
   showing through it. These are the no-JS fallbacks; the script measures the
   bar and sets an exact inline top on every scroll. Logged-out visitors never
   had this — the nav sits at 0 for them. */
body.admin-bar .dvf-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .dvf-nav { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .dvf-nav { top: 0; } }
.dvf-nav::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
	background: linear-gradient(90deg, #d5edfe, #e7e8fd);
	transition: background 1s ease, box-shadow 1s ease;
}
html[data-theme='night'] .dvf-nav::after {
	background: linear-gradient(90deg, rgba(143, 164, 230, 0.85), rgba(207, 220, 255, 0.9) 50%, rgba(185, 169, 239, 0.85));
	box-shadow: 0 4px 18px rgba(169, 180, 245, 0.35);
}

.dvf-nav .wp-block-site-title {
	font-family: var(--dvf-title-font);
	font-weight: 700;
	color: var(--dvf-ink); text-transform: uppercase;
	white-space: nowrap;
}
.dvf-nav .wp-block-site-title a {
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	letter-spacing: inherit; text-transform: inherit;
	color: inherit; text-decoration: none;
}
.dvf-nav .dvf-logo { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.dvf-wing-r { fill: #939ba2; transition: fill 0.8s ease; }
html[data-theme='night'] .dvf-wing-r { fill: #aab4f5; }

/* search — slim pill, no white box in night mode */
.dvf-nav .wp-block-search { max-width: 340px; flex: 1 1 240px; min-width: 0; }
.dvf-nav .wp-block-search__inside-wrapper {
	background: var(--dvf-pill) !important;
	border: 1px solid var(--dvf-glass-border) !important;
	border-radius: 999px;
	padding: 5px 5px 5px 15px;
	transition: var(--dvf-t);
}
.dvf-nav .wp-block-search__input {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	width: 100%; min-width: 0;
	font-size: 13px;
	color: var(--dvf-ink); font-family: var(--dvf-font);
	text-overflow: ellipsis;
}
.dvf-nav .wp-block-search__input::placeholder { color: var(--dvf-ink-faint); opacity: 1; }
.dvf-nav .wp-block-search__input:-webkit-autofill,
.dvf-nav .wp-block-search__input:-webkit-autofill:hover,
.dvf-nav .wp-block-search__input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 40px var(--dvf-pill) inset !important;
	-webkit-text-fill-color: var(--dvf-ink) !important;
	caret-color: var(--dvf-ink);
}
/* The button was the tallest thing in the pill and had no explicit size, so
   core's padding was setting the whole header's height. Fixed at 36px — still a
   comfortable tap target, and the pill comes down from ~62px to 48px. */
.dvf-nav .wp-block-search__button {
	border: none !important; border-radius: 999px;
	width: 36px; height: 36px; padding: 0; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--dvf-grad) !important;
	color: var(--dvf-ink); cursor: pointer; transition: var(--dvf-t);
}
.dvf-nav .wp-block-search__button svg { width: 17px; height: 17px; }
html[data-theme='night'] .dvf-nav .wp-block-search__button { color: #e8ecff; }
.dvf-nav .wp-block-navigation { margin-left: auto; }
.dvf-nav .wp-block-navigation {
	font-size: 14.5px; font-weight: 500; color: var(--dvf-ink);
}
.dvf-nav .wp-block-navigation a {
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	letter-spacing: inherit; text-transform: inherit; color: inherit;
	opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease;
}
.dvf-nav .wp-block-navigation a:hover { opacity: 1; color: var(--dvf-peri-deep); text-decoration: none; }

/* toggle — sakura by day, crescent by night */
.dvf-toggle {
	margin-left: 8px; width: 76px; height: 28px; flex-shrink: 0;
	border-radius: 999px; border: 1px solid var(--dvf-glass-border);
	background: linear-gradient(90deg, #d5edfe, #e7e8fd);
	position: relative; cursor: pointer; transition: background 1s ease;
}
html[data-theme='night'] .dvf-toggle { background: linear-gradient(90deg, #16294d, #262a5e); }
.dvf-knob {
	position: absolute; top: 2px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(80, 90, 160, 0.35);
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.6s cubic-bezier(0.6, -0.28, 0.35, 1.3), background 0.6s ease, box-shadow 0.6s ease;
}
html[data-theme='night'] .dvf-knob {
	transform: translateX(46px); background: #10173d;
	box-shadow: 0 0 12px rgba(190, 205, 255, 0.6);
}
.dvf-knob svg { position: absolute; width: 19px; height: 19px; transition: opacity 0.45s ease, transform 0.6s ease; }
/* The sakura artwork filled 13.40 of its 24-unit viewBox against the moon's
   16.50, so at the same svg size it rendered ~19% smaller. 1.232 squares them
   up exactly; the 0.28px nudge answers the flower's centroid sitting high. */
.dvf-ic-flower { color: var(--dvf-blossom); opacity: 1; }
.dvf-ic-moon { color: #cfdcff; opacity: 0; transform: rotate(-90deg) scale(0.4); }
html[data-theme='night'] .dvf-ic-flower { opacity: 0; transform: rotate(120deg) scale(0.4); }
html[data-theme='night'] .dvf-ic-moon { opacity: 1; transform: none; }

/* --- toggle icons: reliable centring (Safari won't centre an absolutely
       positioned child of a flex box, it drops it at the content origin) --- */
.dvf-knob svg { inset: 0; margin: auto; }

/* --- the accordion chevron the JS injects into every nav item with a submenu.
       It is only ever used inside the open mobile panel, but the JS adds it at
       every viewport width, and its styling lived entirely inside the 960px
       media query under .is-menu-open. On desktop it therefore rendered as a
       bare UA <button> — the small grey outlined boxes beside Featured Talks,
       Interviews and Portfolio. Hidden by default; the .is-menu-open rule below
       is more specific and turns it back on where it belongs. --- */
.dvf-nav .dvf-sub-toggle { display: none; }

/* --- mobile menu: a dropdown under the nav, not a full-screen modal --- */
@media (max-width: 960px) {
	/* Core puts position:relative here, which made the panel anchor to the
	   40px hamburger instead of the header bar. */
	.dvf-nav .wp-block-navigation { position: static !important; }

	.dvf-nav .wp-block-navigation__responsive-container-open,
	.dvf-nav .wp-block-navigation__responsive-container-close {
		width: 40px; height: 40px; padding: 0; cursor: pointer;
		display: flex; align-items: center; justify-content: center;
		border-radius: 999px; color: var(--dvf-ink) !important;
		background: var(--dvf-pill); border: 1px solid var(--dvf-glass-border);
	}
	.dvf-nav .wp-block-navigation__responsive-container-open svg,
	.dvf-nav .wp-block-navigation__responsive-container-close svg {
		width: 22px; height: 22px; fill: currentColor;
	}

	/* the panel — solid, not glass. Translucency let the hero butterfly and
	   the "data viz fairy" wordmark read straight through the menu. */
	.dvf-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute !important;
		top: calc(100% + 14px); left: 0; right: 0; bottom: auto;
		width: auto; height: auto; z-index: 60; box-sizing: border-box;
		max-height: min(70vh, 560px); overflow-y: auto;
		padding: 0 !important;
		background: linear-gradient(180deg, var(--dvf-bg-top), var(--dvf-bg-bot)) !important;
		backdrop-filter: none; -webkit-backdrop-filter: none;
		border-bottom: 1px solid var(--dvf-glass-border);
		border-radius: 0 0 22px 22px;
		box-shadow: 0 22px 44px rgba(80, 90, 130, 0.18);
	}
	html[data-theme='night'] .dvf-nav .wp-block-navigation__responsive-container.is-menu-open {
		box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
	}
	.dvf-nav:has(.wp-block-navigation__responsive-container.is-menu-open) { transform: none !important; }

	/* Flatten core's three nested wrappers. Each carries its own padding and
	   positioning, which is where the dead space above the first item and the
	   stranded close button came from. */
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-close,
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-dialog,
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		position: static !important; display: block !important;
		width: 100% !important; max-width: none !important;
		margin: 0 !important; padding: 0 !important;
	}
	/* just enough room for the close button, nothing more */
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 54px 0 16px !important;
	}
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important; top: 9px; right: 14px; z-index: 2;
		width: 34px; height: 34px;
	}
	.dvf-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 17px; height: 17px; }

	.dvf-nav .is-menu-open .wp-block-navigation__container,
	.dvf-nav .is-menu-open .wp-block-page-list {
		display: block !important; width: 100%;
		gap: 0 !important; margin: 0 !important; padding: 0 !important;
	}
	/* The Navigation block is set to justify right for the desktop bar, and that
	   alignment carries into the stacked panel. Reset it here only. */
	.dvf-nav .is-menu-open,
	.dvf-nav .is-menu-open .wp-block-navigation__container,
	.dvf-nav .is-menu-open .wp-block-page-list,
	.dvf-nav .is-menu-open .wp-block-navigation__submenu-container,
	.dvf-nav .is-menu-open .wp-block-navigation-item,
	.dvf-nav .is-menu-open .wp-block-navigation-item__content,
	.dvf-nav .is-menu-open a {
		text-align: left !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
	}
	.dvf-nav .is-menu-open .wp-block-navigation-item { display: block; width: 100%; }
	/* The inset comes from margin, not padding, so the hairline divider stops
	   short of the panel edges instead of running the full width. padding is
	   !important because something upstream was zeroing it — font-size and
	   colour applied here, padding alone did not. */
	.dvf-nav .is-menu-open .wp-block-navigation-item__content,
	.dvf-nav .is-menu-open .wp-block-navigation-item > a {
		display: block !important; box-sizing: border-box;
		width: auto !important;
		margin: 0 clamp(22px, 6vw, 32px) !important;
		padding: 15px 0 !important;
		font-size: 17px; font-weight: 500; line-height: 1.45; opacity: 1;
		color: var(--dvf-ink) !important; text-decoration: none;
		border-bottom: 1px solid var(--dvf-glass-border);
	}
	.dvf-nav .is-menu-open .wp-block-navigation-item:last-child > .wp-block-navigation-item__content { border-bottom: 0; }

	/* sub-items collapse behind their parent (JS adds .dvf-sub-toggle) */
	.dvf-nav .is-menu-open .wp-block-navigation-item { position: relative; }
	.dvf-nav .is-menu-open .wp-block-navigation__submenu-container { display: none !important; }
	.dvf-nav .is-menu-open .wp-block-navigation-item.dvf-sub-open > .wp-block-navigation__submenu-container {
		display: block !important;
		padding-bottom: 6px !important;
	}
	.dvf-nav .is-menu-open .dvf-sub-toggle {
		display: flex;
		position: absolute; top: 0; right: clamp(22px, 6vw, 32px);
		width: 46px; height: 55px; padding: 0; margin: 0;
		align-items: center; justify-content: flex-end;
		background: none; border: 0; cursor: pointer;
		color: var(--dvf-ink-soft);
	}
	.dvf-nav .is-menu-open .dvf-sub-toggle svg {
		width: 19px; height: 19px;
		transition: transform 0.28s ease;
	}
	.dvf-nav .is-menu-open .dvf-sub-open > .dvf-sub-toggle svg { transform: rotate(180deg); }
	/* core's own submenu arrow would double up with ours */
	.dvf-nav .is-menu-open .wp-block-navigation__submenu-icon,
	.dvf-nav .is-menu-open .wp-block-navigation-submenu__toggle { display: none !important; }
	/* keep long parent labels clear of the chevron */
	.dvf-nav .is-menu-open .wp-block-navigation-item:has(> .dvf-sub-toggle) > .wp-block-navigation-item__content {
		padding-right: 40px !important;
	}

	.dvf-nav .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important; opacity: 1 !important; visibility: visible !important;
		background: transparent !important; border: 0 !important; box-shadow: none !important;
		width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	}
	.dvf-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.dvf-nav .is-menu-open .wp-block-navigation__submenu-container a {
		padding: 13px 0 13px 18px !important;
		font-size: 15.5px; font-weight: 400;
		color: var(--dvf-ink-soft) !important;
	}
}

/* ---------- hero ---------- */
.dvf-hero {
	position: relative; min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 120px clamp(16px, 2.5vw, 40px) 80px; overflow: hidden;
}
.dvf-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--dvf-floral, none) center / cover no-repeat;
	mix-blend-mode: multiply; opacity: 0.9;
	pointer-events: none; transition: opacity 1.1s ease;
}
html[data-theme='night'] .dvf-hero::before { opacity: 0.04; mix-blend-mode: screen; }
.dvf-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dvf-hero-inner {
	position: relative; z-index: 1;
	width: min(1560px, 100%);
	display: grid; grid-template-columns: minmax(340px, 32%) 1fr;
	gap: 26px; align-items: center;
}
.dvf-hero-card {
	border-radius: 28px; padding: 56px 46px;
	background: var(--dvf-glass);
	border: 1px solid var(--dvf-glass-border);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--dvf-glass-shadow);
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	transition: var(--dvf-t);
}
html[data-theme='night'] .dvf-hero-card { box-shadow: inset 0 1px 0 rgba(190, 205, 255, 0.2), var(--dvf-glass-shadow); }
.dvf-hero-butterfly { width: 92px; height: 92px; margin-bottom: 16px; animation: dvf-flutter 7s ease-in-out infinite; }
@keyframes dvf-flutter {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-8px) rotate(2deg); }
}
.dvf-hero-card h1 {
	font-size: clamp(56px, 5.6vw, 84px);
	font-weight: 600; line-height: 1.02; letter-spacing: -0.02em;
	margin: 0;
}
/* Day: grey rather than periwinkle-deep, so the wordmark above it carries the
   colour on its own. Night keeps the pale periwinkle — grey goes muddy on the
   midnight background. */
.dvf-hero-card .dvf-script { font-size: clamp(28px, 3vw, 36px); margin-top: 14px; color: var(--dvf-ink-soft); }
html[data-theme='night'] .dvf-hero-card .dvf-script { color: var(--dvf-peri-deep); }
.dvf-rule {
	width: 100%; max-width: 420px; height: 1px;
	background: var(--dvf-glass-border); margin: 22px 0 0;
	transition: background 0.7s ease;
}
.dvf-hero-card .dvf-sub { max-width: 430px; margin: 20px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--dvf-ink-soft); }
.dvf-cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.dvf-btn {
	display: inline-block;
	font-family: var(--dvf-font); font-weight: 500; font-size: 14.5px;
	padding: 10px 28px; border-radius: 999px; cursor: pointer; text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.7s ease, color 0.7s ease;
}
.dvf-btn:hover { transform: translateY(-3px); text-decoration: none; }
.dvf-btn-primary {
	background: var(--dvf-grad); color: var(--dvf-ink);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: 0 8px 24px rgba(90, 110, 160, 0.15);
}
html[data-theme='night'] .dvf-btn-primary { color: #e8ecff; }
.dvf-btn-ghost {
	background: var(--dvf-glass-strong);
	border: 1px solid rgba(180, 195, 235, 0.6);
	color: var(--dvf-ink);
}
html[data-theme='night'] .dvf-btn-ghost { border-color: rgba(169, 180, 245, 0.35); color: #c3cbff; }

/* ---------- carousel: wide rectangle, caption on scrim, dots right ---------- */
.dvf-carousel {
	position: relative; margin: 0;
	justify-self: center;
	width: min(100%, 124vh);
	aspect-ratio: 16 / 9;
	display: flex; flex-direction: column;
	border-radius: 26px; overflow: hidden;
	border: 1px solid var(--dvf-glass-border);
	background: var(--dvf-glass);
	backdrop-filter: blur(16px);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-track { position: relative; flex: 1; min-height: 0; }
.dvf-slide {
	position: absolute; inset: 0; opacity: 0;
	background: var(--dvf-grad);
	transition: opacity 0.8s ease, background 0.7s ease;
}
.dvf-slide.is-on { opacity: 1; }
.dvf-ph {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: var(--dvf-ink-faint); transition: color 0.7s ease;
}
.dvf-slide:nth-child(2) { background: linear-gradient(215deg, #d5edfe, #e7e8fd); }
.dvf-slide:nth-child(3) { background: linear-gradient(160deg, #e7e8fd, #d5edfe); }
.dvf-slide:nth-child(4) { background: linear-gradient(115deg, #d5edfe, #e7e8fd); }
html[data-theme='night'] .dvf-slide { background: linear-gradient(135deg, #16294d, #262a5e); }
html[data-theme='night'] .dvf-slide:nth-child(2) { background: linear-gradient(215deg, #16294d, #262a5e); }
html[data-theme='night'] .dvf-slide:nth-child(3) { background: linear-gradient(160deg, #262a5e, #16294d); }
html[data-theme='night'] .dvf-slide:nth-child(4) { background: linear-gradient(115deg, #16294d, #262a5e); }
.dvf-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* tall/square vizzes: show the whole image, letterboxed on a blurred echo of itself */
.dvf-slide.is-fit img { object-fit: contain; }
.dvf-slide.is-fit::before {
	content: ''; position: absolute; inset: -30px;
	background: var(--dvf-slide-bg, none) center / cover no-repeat;
	filter: blur(26px) saturate(1.05);
	opacity: 0.5; transition: opacity 0.7s ease;
}
html[data-theme='night'] .dvf-slide.is-fit::before { opacity: 0.35; }
.dvf-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 36px 110px 20px 24px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
	transition: background 0.7s ease;
}
.dvf-cap h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: #2c3350; margin: 0; transition: color 0.7s ease; }
html[data-theme='night'] .dvf-cap { background: linear-gradient(180deg, transparent, rgba(10, 14, 40, 0.5)); }
html[data-theme='night'] .dvf-cap h3 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 10, 0.5); }
.dvf-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--dvf-glass-border); background: var(--dvf-glass-strong);
	color: var(--dvf-peri-deep); font-size: 22px; line-height: 1; cursor: pointer;
	backdrop-filter: blur(10px);
	transition: var(--dvf-t), transform 0.25s ease;
	display: flex; align-items: center; justify-content: center; padding-bottom: 2px;
}
.dvf-arrow:hover { transform: translateY(-50%) scale(1.1); }
.dvf-arrow-left { left: 14px; }
.dvf-arrow-right { right: 14px; }
.dvf-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 7px; z-index: 2; }
.dvf-dots button {
	width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
	background: var(--dvf-ink-faint); opacity: 0.45;
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.7s ease;
}
.dvf-dots button.is-active { opacity: 1; transform: scale(1.3); background: var(--dvf-peri-deep); }

/* ---------- scene: daisies (day) · stars, sparkles, dust, moon, butterfly (night) ---------- */
.dvf-daisy {
	position: absolute; top: -40px; opacity: 0;
	animation: dvf-fall linear infinite;
	filter: drop-shadow(0 1px 4px rgba(124, 142, 196, 0.14));
}
@keyframes dvf-fall {
	0% { transform: translateY(-5vh) translateX(0) rotate(0); }
	10% { opacity: 0.85; }
	30% { transform: translateY(26vh) translateX(-22px) rotate(80deg); }
	60% { transform: translateY(60vh) translateX(18px) rotate(190deg); }
	88% { opacity: 0.55; }
	100% { transform: translateY(108vh) translateX(-10px) rotate(300deg); opacity: 0; }
}
html[data-theme='night'] .dvf-daisy { opacity: 0 !important; animation-play-state: paused; }
.dvf-star {
	position: absolute; border-radius: 50%;
	background: #cfdcff;
	box-shadow: 0 0 6px rgba(190, 205, 255, 0.55);
	opacity: 0; animation: dvf-twinkle ease-in-out infinite;
}
@keyframes dvf-twinkle {
	0%, 100% { opacity: 0.1; transform: scale(0.7); }
	50% { opacity: 0.95; transform: scale(1.15); }
}
html[data-theme='day'] .dvf-star { animation: none; opacity: 0; }
.dvf-sparkle { position: absolute; width: 13px; height: 13px; opacity: 0; }
.dvf-sparkle::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, #ffffff, #bcd0ff);
	clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
	filter: drop-shadow(0 0 5px rgba(190, 205, 255, 0.9));
}
html[data-theme='night'] .dvf-sparkle { animation: dvf-twinkle ease-in-out infinite; }
.dvf-dust {
	position: absolute; width: 3px; height: 3px; border-radius: 50%;
	background: #dfe9ff; opacity: 0;
	box-shadow: 0 0 7px 1px rgba(190, 205, 255, 0.8);
}
html[data-theme='night'] .dvf-dust { animation: dvf-drift ease-in-out infinite; }
@keyframes dvf-drift {
	0% { transform: translate(0, 0); opacity: 0; }
	12% { opacity: 0.85; }
	50% { transform: translate(24px, -46vh); opacity: 0.55; }
	100% { transform: translate(-14px, -92vh); opacity: 0; }
}
.dvf-moon {
	position: absolute; top: 10%; right: 10%; width: 84px;
	opacity: 0; transform: scale(0.6) rotate(-10deg);
	transition: opacity 1.1s ease, transform 1.1s ease;
	filter: drop-shadow(0 0 26px rgba(190, 205, 255, 0.55));
}
html[data-theme='night'] .dvf-moon { opacity: 1; transform: scale(1) rotate(-10deg); }
.dvf-shooting { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; }
html[data-theme='night'] .dvf-shooting { animation: dvf-shoot 7s ease-in 2s infinite; }
html[data-theme='night'] .dvf-shooting + .dvf-shooting { animation-delay: 5.2s; animation-duration: 9s; }
@keyframes dvf-shoot {
	0%, 91% { opacity: 0; transform: translate(0, 0); }
	92% { opacity: 1; box-shadow: -60px 30px 1px rgba(255, 255, 255, 0.35), -120px 60px 1px rgba(255, 255, 255, 0.15); }
	100% { opacity: 0; transform: translate(240px, -120px); box-shadow: -60px 30px 1px transparent, -120px 60px 1px transparent; }
}
.dvf-nightfly {
	position: absolute; left: -40px; top: 34%; width: 30px;
	opacity: 0; transition: opacity 1.2s ease;
	filter: drop-shadow(0 0 9px rgba(169, 180, 245, 0.85));
}
html[data-theme='night'] .dvf-nightfly { opacity: 1; animation: dvf-fly 26s linear infinite; }
@keyframes dvf-fly {
	0% { transform: translate(0, 0) rotate(8deg); }
	20% { transform: translate(22vw, -7vh) rotate(-6deg); }
	40% { transform: translate(44vw, 2vh) rotate(9deg); }
	60% { transform: translate(66vw, -9vh) rotate(-5deg); }
	80% { transform: translate(88vw, -2vh) rotate(7deg); }
	100% { transform: translate(110vw, -8vh) rotate(0); }
}
.dvf-nightfly g { animation: dvf-wob 0.45s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes dvf-wob {
	0%, 100% { transform: scaleX(1); }
	50% { transform: scaleX(0.55); }
}

/* ---------- sections ---------- */
.dvf-section { position: relative; width: var(--dvf-wide); margin: 0 auto; padding: 84px 0; }
.dvf-eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--dvf-peri-deep); transition: color 0.7s ease; margin: 0;
}
.dvf-big-head, .dvf-section-title {
	font-size: clamp(34px, 4.4vw, 52px); font-weight: 400;
	margin: 10px 0 0;
}
.dvf-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.dvf-reveal.is-on { opacity: 1; transform: none; }

/* ---------- about ---------- */
.dvf-about {
	display: grid; grid-template-columns: auto 1fr minmax(280px, 30%);
	gap: 56px; align-items: center;
	background: var(--dvf-glass-strong);
	border: 1px solid var(--dvf-glass-border);
	border-radius: 32px; padding: 56px 64px;
	box-shadow: var(--dvf-glass-shadow);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	transition: var(--dvf-t);
}
.dvf-avatar {
	width: 220px; height: 220px; border-radius: 50%; flex-shrink: 0;
	background: var(--dvf-grad);
	border: 5px solid var(--dvf-glass-border);
	box-shadow: 0 12px 34px rgba(90, 110, 160, 0.2);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	font-size: 60px; font-weight: 600; color: var(--dvf-peri-deep);
	transition: var(--dvf-t);
}
.dvf-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dvf-bio h2 { font-size: clamp(36px, 3.8vw, 48px); font-weight: 700; margin: 0; }
.dvf-bio h2 em, .dvf-bio h2 span { font-style: normal; color: var(--dvf-peri-deep); }
.dvf-bio p { font-size: 17px; line-height: 1.8; color: var(--dvf-ink-soft); margin: 16px 0 0; }
.dvf-socials { display: flex; gap: 12px; margin-top: 24px; }
.dvf-socials a {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--dvf-grad);
	border: 1px solid rgba(170, 185, 230, 0.55);
	color: var(--dvf-peri-deep);
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	font-size: 13px; font-weight: 700;
	box-shadow: 0 3px 10px rgba(90, 110, 160, 0.14);
	transition: var(--dvf-t), transform 0.2s ease;
}
/* Glyphs sit at 20px in the 40px circle — half the diameter. The old 13px text
   labels covered about a third and read as placeholders. LinkedIn's artwork is
   the narrowest of the three, so it gets 2px back to balance optically. */
.dvf-socials a svg { fill: currentColor; display: block; }
.dvf-socials a[data-net="linkedin"] svg { width: 22px; height: 22px; }
.dvf-socials a[data-net="x"] svg { width: 20px; height: 20px; }
.dvf-socials a[data-net="tableau"] svg { width: 18px; height: 18px; }
html[data-theme='night'] .dvf-socials a { border-color: rgba(169, 180, 245, 0.35); box-shadow: none; }
.dvf-socials a:hover { transform: translateY(-2px); text-decoration: none; }
/* box-sizing is the load-bearing bit. This is a plain <div> in a Custom HTML
   block and the theme sets no global border-box, so it inherits content-box.
   The 960px rule below gives it width: 100% (needed because .dvf-about uses
   justify-items: start there), and under content-box that 100% is the CONTENT
   width — the 12px padding and 1.5px border are then added outside it, so the
   panel ends up ~27px wider than the card's content column. Its left edge stays
   on the padding line while the right edge runs past it, which reads as "the
   Spotify player isn't centred". min-width: 0 is belt-and-braces for very narrow
   screens, where an iframe's 300px intrinsic width would otherwise stop the
   grid track shrinking. */
.dvf-about-media {
	align-self: stretch; border-radius: 24px; box-sizing: border-box; min-width: 0;
	background: var(--dvf-grad);
	border: 1.5px dashed rgba(126, 160, 232, 0.55);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 34px 26px;
	transition: background 1s ease, border-color 0.7s ease;
}
html[data-theme='night'] .dvf-about-media { border-color: rgba(169, 180, 245, 0.4); }
.dvf-about-media .dvf-ph-ic { font-size: 30px; color: var(--dvf-peri-deep); line-height: 1; transition: color 0.7s ease; }
.dvf-about-media .dvf-ph-t { font-size: 14.5px; font-weight: 500; color: var(--dvf-peri-deep); text-align: center; transition: color 0.7s ease; }
.dvf-about-media .dvf-ph-s { font-size: 12.5px; color: var(--dvf-ink-faint); text-align: center; transition: color 0.7s ease; }
/* once real content is added, it fills the panel */
.dvf-about-media:has(iframe), .dvf-about-media:has(img) { border-style: solid; padding: 12px; }
.dvf-about-media iframe { width: 100%; max-width: 100%; min-width: 0; display: block; border: 0; border-radius: 16px; }
.dvf-about-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.dvf-about-media:has(iframe) .dvf-ph-ic, .dvf-about-media:has(img) .dvf-ph-ic,
.dvf-about-media:has(iframe) .dvf-ph-t, .dvf-about-media:has(img) .dvf-ph-t,
.dvf-about-media:has(iframe) .dvf-ph-s, .dvf-about-media:has(img) .dvf-ph-s { display: none; }

/* ---------- recognitions ---------- */
.dvf-feat {
	margin-top: 40px; border-radius: 24px; padding: 38px 44px;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	display: grid; grid-template-columns: 1fr minmax(300px, 36%);
	align-items: center; gap: 44px;
	transition: background 1s ease, border-color 0.7s ease;
}
.dvf-feat .dvf-eyebrow { letter-spacing: 0.2em; }
.dvf-feat h3 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; margin: 8px 0 0; }
.dvf-feat p { font-size: 16px; color: var(--dvf-ink-soft); margin: 6px 0 0; }
.dvf-feat-rule { width: 64px; height: 2px; border-radius: 2px; background: var(--dvf-peri); opacity: 0.55; margin: 18px 0 14px; }
.dvf-feat .dvf-feat-note { font-size: 16px; max-width: 500px; line-height: 1.75; }
.dvf-feat-link { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--dvf-peri-deep); text-decoration: none; transition: color 0.7s ease; }
.dvf-feat-link:hover { text-decoration: underline; }
.dvf-feat-img {
	position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden;
	background: linear-gradient(135deg, #cfe6fb, #dcd9fa 60%, #e7e8fd);
	border: 1px solid rgba(255, 255, 255, 0.85);
	display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; color: #6b7398;
	transition: border-color 0.7s ease;
}
html[data-theme='night'] .dvf-feat-img { background: linear-gradient(135deg, #1d3357, #2b2f66 55%, #3c2f5e); color: #a9b3e8; border-color: rgba(169, 180, 245, 0.3); }
.dvf-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dvf-recog-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px; margin-top: 18px;
}
.dvf-recog {
	border-radius: 22px; padding: 34px 34px 36px;
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	box-shadow: 0 4px 16px rgba(70, 90, 140, 0.05);
	transition: var(--dvf-t), transform 0.3s ease;
	display: grid; grid-template-columns: 1fr auto; column-gap: 16px;
	align-items: start;
}
.dvf-recog > * { grid-column: 1; }
/* optional badge image — identical fixed frame on every card */
.dvf-recog-img {
	grid-column: 2; grid-row: 1 / span 3; align-self: center;
	width: 74px; height: 74px; flex-shrink: 0;
	border-radius: 16px; overflow: hidden;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	transition: var(--dvf-t);
}
.dvf-recog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dvf-recog-img:not(:has(img)) { display: none; }
.dvf-recog:hover { transform: translateY(-4px); box-shadow: var(--dvf-hover-shadow); }
.dvf-stat { font-size: 38px; font-weight: 600; line-height: 1; color: var(--dvf-peri-deep); transition: color 0.7s ease; }
.dvf-recog h4 { font-size: 18px; font-weight: 600; margin: 14px 0 0; line-height: 1.4; }
.dvf-meta { font-size: 14.5px; color: var(--dvf-ink-faint); margin-top: 6px; transition: color 0.7s ease; }
.dvf-show-more {
	display: none; margin: 18px auto 0;
	font: 500 14.5px var(--dvf-font); color: var(--dvf-peri-deep);
	background: var(--dvf-pill); border: 1px solid var(--dvf-glass-border);
	border-radius: 999px; padding: 10px 26px; cursor: pointer;
	transition: var(--dvf-t);
}
@media (max-width: 960px) {
	.dvf-show-more { display: block; }
	.dvf-recog-grid.is-collapsed .dvf-recog:nth-child(n+5) { display: none; }
}

/* ---------- tag filter (Blog page) ---------- */
.dvf-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.dvf-filter-btn {
	font: 500 14px var(--dvf-font); color: var(--dvf-ink-soft);
	background: var(--dvf-pill); border: 1px solid var(--dvf-glass-border);
	border-radius: 999px; padding: 9px 22px; cursor: pointer;
	transition: var(--dvf-t), transform 0.2s ease;
}
.dvf-filter-btn:hover { transform: translateY(-2px); }
.dvf-filter-btn.is-active {
	background: var(--dvf-grad); color: var(--dvf-ink); font-weight: 600;
	border-color: rgba(170, 185, 230, 0.55);
}
html[data-theme='night'] .dvf-filter-btn.is-active { color: #e8ecff; border-color: rgba(169, 180, 245, 0.35); }
.dvf-card-tags { display: none !important; }
.dvf-card.dvf-filtered-out,
.dvf-cards .wp-block-post-template > .dvf-filtered-out,
.dvf-cards .wp-block-post-template > li.dvf-filtered-out { display: none !important; }
.dvf-filter-empty { text-align: center; font-size: 15px; color: var(--dvf-ink-faint); padding: 40px 0; }

/* ---------- blog cards (query loop) ---------- */
.dvf-cards .wp-block-post-template {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 40px;
}
.dvf-card {
	border-radius: 14px; overflow: hidden;
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	box-shadow: 0 6px 22px rgba(70, 90, 140, 0.06);
	transition: var(--dvf-t), transform 0.3s ease;
	display: flex; flex-direction: column; height: 100%;
}
.dvf-card:hover { transform: translateY(-5px); box-shadow: var(--dvf-hover-shadow); }
.dvf-card .wp-block-post-featured-image { margin: 0; }
.dvf-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; display: block; }
.dvf-card .wp-block-post-featured-image:not(:has(img)) {
	aspect-ratio: 4 / 3; background: var(--dvf-grad); transition: background 0.7s ease;
}
.dvf-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.dvf-card .taxonomy-category {
	font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
}
.dvf-card .taxonomy-category a {
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	letter-spacing: inherit; text-transform: inherit;
	color: inherit; text-decoration: none; transition: color 0.7s ease;
}
.dvf-card .wp-block-post-title { font-size: 18px; font-weight: 500; line-height: 1.45; margin: 12px 0 0; }
.dvf-card .wp-block-post-title a { color: var(--dvf-ink); text-decoration: none; }
.dvf-card .wp-block-post-excerpt { font-size: 15px; color: var(--dvf-ink-soft); line-height: 1.7; margin: 12px 0 0; }
.dvf-card .wp-block-post-excerpt__more-link {
	display: inline-block; margin-top: 22px; font-weight: 500; font-size: 14px;
	color: var(--dvf-peri-deep); text-decoration: none;
}
.dvf-card .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

.dvf-blog-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- embeds ---------- */
.dvf-embed, .wp-block-embed {
	border-radius: 22px; overflow: hidden;
	border: 1px solid var(--dvf-glass-border);
	background: var(--dvf-glass);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
	padding: 10px;
}
.dvf-embed iframe, .wp-block-embed iframe { border-radius: 14px; display: block; width: 100%; }

/* ---------- featured talk: glass side panel + slide stage ----------
   Sits under the floral page header on the Talks pages. Drop an <img> into
   the dvf-talk-bg slot for a custom backdrop; without one it falls back to
   the theme gradient. Everything on top is glass, so any background works. */
.dvf-talk {
	position: relative; isolation: isolate;
	/* post-content is a constrained layout (760px), so opt this section out
	   and let it run to the theme's wide measure like the rest of the site */
	width: var(--dvf-wide); max-width: none !important; margin: 26px auto 0;
	padding: clamp(18px, 2.4vw, 32px);
	border-radius: 28px; overflow: hidden;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-talk-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.dvf-talk-bg img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* scrim keeps the glass legible over a busy photo */
.dvf-talk-bg::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18) 55%, rgba(226, 236, 255, 0.4));
	transition: background 1.1s ease;
}
html[data-theme='night'] .dvf-talk-bg::after {
	background: linear-gradient(120deg, rgba(9, 13, 40, 0.72), rgba(13, 18, 52, 0.5) 55%, rgba(23, 27, 72, 0.68));
}
html[data-theme='night'] .dvf-talk-bg img { opacity: 0.5; }

.dvf-talk-grid {
	display: grid;
	grid-template-columns: minmax(290px, 31%) 1fr;
	gap: clamp(16px, 1.8vw, 28px);
	align-items: stretch;
}

/* side panel */
.dvf-talk-panel {
	position: relative;
	display: flex; flex-direction: column;
	padding: clamp(24px, 2.2vw, 34px);
	border-radius: 22px;
	background: var(--dvf-glass);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-talk-panel .dvf-eyebrow { font-size: 11.5px; letter-spacing: 0.22em; }
:root .dvf-talk-panel h2, :root .dvf-talk-panel h3 {
	font-size: clamp(24px, 2.2vw, 32px); font-weight: 600;
	line-height: 1.2; margin: 12px 0 0;
}
.dvf-talk-by {
	font-size: 14.5px; color: var(--dvf-ink-soft);
	margin: 10px 0 0 !important; transition: color 0.7s ease;
}
.dvf-talk-rule {
	width: 56px; height: 2px; border-radius: 2px;
	background: var(--dvf-peri); opacity: 0.55; margin: 20px 0 0;
}
.dvf-talk-panel p {
	font-size: 15px; line-height: 1.75; color: var(--dvf-ink-soft);
	margin: 16px 0 0; transition: color 0.7s ease;
}
.dvf-talk-panel a { color: var(--dvf-peri-deep); text-decoration: none; }
.dvf-talk-panel a:hover { text-decoration: underline; }

/* meta rows — label above value, quiet and aligned */
.dvf-talk-meta { display: grid; gap: 12px; margin: 20px 0 0; }
.dvf-talk-meta > div { display: grid; gap: 2px; }
.dvf-talk-meta dt, .dvf-talk-meta .dvf-talk-label {
	font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--dvf-ink-faint); transition: color 0.7s ease;
}
.dvf-talk-meta dd, .dvf-talk-meta .dvf-talk-value {
	margin: 0; font-size: 15px; color: var(--dvf-ink); transition: color 0.7s ease;
}

/* actions pinned to the foot of the panel */
.dvf-talk-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: auto 0 0; padding-top: 26px;
}
.dvf-talk-actions .dvf-btn { padding: 10px 22px; }
.dvf-talk-yt {
	display: inline-flex; align-items: center; gap: 8px;
}
.dvf-talk-yt svg { width: 19px; height: 13.5px; flex-shrink: 0; display: block; }

/* slide stage */
.dvf-talk-stage {
	position: relative;
	padding: clamp(10px, 1vw, 16px);
	border-radius: 22px;
	background: var(--dvf-glass-strong);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
	display: flex; flex-direction: column; justify-content: center;
}
.dvf-talk-embed {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 14px; overflow: hidden;
	background: rgba(255, 255, 255, 0.55);
	display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; color: var(--dvf-ink-faint);
	transition: background 1.1s ease, color 0.7s ease;
}
html[data-theme='night'] .dvf-talk-embed { background: rgba(11, 16, 46, 0.6); }
.dvf-talk-embed iframe,
.dvf-talk-embed embed,
.dvf-talk-embed video,
.dvf-talk-embed img,
.dvf-talk-embed .wp-block-embed__wrapper {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important;
	border: 0; display: block;
}
.dvf-talk-embed .wp-block-embed { margin: 0; }
.dvf-talk-caption {
	font-size: 13px; color: var(--dvf-ink-faint); text-align: center;
	margin: 12px 0 2px; transition: color 0.7s ease;
}

@media (max-width: 1000px) {
	.dvf-talk-grid { grid-template-columns: 1fr; }
	.dvf-talk-actions { margin-top: 24px; }
}
@media (max-width: 560px) {
	.dvf-talk { border-radius: 22px; padding: 14px; }
	.dvf-talk-panel { padding: 24px 22px; }
	.dvf-talk-actions .dvf-btn { width: 100%; text-align: center; }
}

/* ---------- interview: marquee bar + video stage ----------
   Sibling to dvf-talk, stacked instead of side-by-side: a glass marquee bar
   across the top with the text left and the platform buttons right, then the
   video below in its own glass stage. Same gradient frame and glass parts as
   a talk, different arrangement. Capped narrower than the floral header so
   it never out-runs it. */
.dvf-interview {
	position: relative;
	width: min(var(--dvf-wide), 1180px);
	max-width: none !important;
	margin: 0 auto;
	padding: clamp(16px, 2vw, 26px);
	border-radius: 28px; overflow: hidden;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}

/* Gap between the two panels comes from adjacency rather than a fixed
   margin on the stage, so the bar and the video can be in either order. */
.dvf-interview > * + * { margin-top: clamp(14px, 1.6vw, 22px); }

/* marquee bar — text left, buttons right */
.dvf-interview-bar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(18px, 2.4vw, 44px);
	padding: clamp(22px, 2.2vw, 32px) clamp(24px, 2.4vw, 38px);
	border-radius: 22px;
	background: var(--dvf-glass);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-interview-intro { min-width: 0; }
.dvf-interview-intro .dvf-eyebrow { font-size: 11.5px; letter-spacing: 0.22em; }
:root .dvf-interview-intro h2, :root .dvf-interview-intro h3 {
	font-size: clamp(23px, 2.1vw, 31px); font-weight: 600;
	line-height: 1.2; margin: 10px 0 0;
}
.dvf-interview-host {
	font-size: 14.5px; color: var(--dvf-ink-soft);
	margin: 8px 0 0 !important; transition: color 0.7s ease;
}
.dvf-interview-intro p {
	font-size: 15px; line-height: 1.75; color: var(--dvf-ink-soft);
	max-width: 68ch; margin: 14px 0 0; transition: color 0.7s ease;
}
.dvf-interview-intro a { color: var(--dvf-peri-deep); text-decoration: none; }
.dvf-interview-intro a:hover { text-decoration: underline; }

/* buttons sit side by side in the auto column, so they never wrap on desktop */
.dvf-interview-actions {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
.dvf-interview-actions .dvf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 11px 22px; white-space: nowrap;
}
.dvf-interview-actions .dvf-btn:hover { text-decoration: none; }
.dvf-ico { width: 17px; height: 17px; flex-shrink: 0; display: block; }

/* video stage — same glass treatment as the talk deck */
.dvf-interview-stage {
	position: relative;
	margin: 0;
	padding: clamp(10px, 1vw, 16px);
	border-radius: 22px;
	background: var(--dvf-glass-strong);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-interview-embed {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 14px; overflow: hidden;
	background: rgba(255, 255, 255, 0.55);
	display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; color: var(--dvf-ink-faint);
	transition: background 1.1s ease, color 0.7s ease;
}
html[data-theme='night'] .dvf-interview-embed { background: rgba(11, 16, 46, 0.6); }
.dvf-interview-embed iframe,
.dvf-interview-embed embed,
.dvf-interview-embed video,
.dvf-interview-embed img,
.dvf-interview-embed .wp-block-embed__wrapper {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important;
	border: 0; display: block;
}
.dvf-interview-embed .wp-block-embed { margin: 0; }
.dvf-interview-caption {
	font-size: 13px; color: var(--dvf-ink-faint); text-align: center;
	margin: 12px 0 2px; transition: color 0.7s ease;
}

@media (max-width: 900px) {
	.dvf-interview-bar { grid-template-columns: 1fr; }
	.dvf-interview-actions { justify-content: flex-start; margin-top: 4px; }
}
@media (max-width: 560px) {
	.dvf-interview { border-radius: 22px; padding: 13px; }
	.dvf-interview-bar { padding: 24px 22px; }
	.dvf-interview-actions { width: 100%; }
	.dvf-interview-actions .dvf-btn { flex: 1 1 100%; }
}

/* ---------- deck cards: glass containers for a plugin gallery ----------
   The tip template's own slide viewer only builds itself around a core
   .wp-block-gallery. A NextGEN (or any other plugin) gallery renders its
   own markup, so these are plain containers to drop that block into —
   same gradient frame and glass cards as the talk and interview sections,
   no assumptions about what goes inside. */
.dvf-deck {
	position: relative;
	width: 100%; margin: 2rem auto;
	padding: clamp(14px, 1.8vw, 24px);
	border-radius: 28px;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-deck > * + * { margin-top: clamp(12px, 1.4vw, 20px); }

.dvf-deck-card {
	position: relative;
	padding: clamp(18px, 2.2vw, 32px);
	border-radius: 22px;
	background: var(--dvf-glass-strong);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
/* the thumbnail panel sits back a little from the main stage */
.dvf-deck-card.is-thumbs {
	background: var(--dvf-glass);
	padding: clamp(20px, 2.2vw, 30px);
}
.dvf-deck-title {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
	margin: 0 0 14px !important; padding-bottom: 13px;
	border-bottom: 1px solid var(--dvf-glass-border);
	transition: var(--dvf-t);
}
.dvf-deck-card > :first-child { margin-top: 0; }
.dvf-deck-card > :last-child { margin-bottom: 0; }

/* keep any gallery plugin's output inside the card and on-brand */
.dvf-deck-card :is(img, iframe, video) { max-width: 100%; height: auto; }
.dvf-deck-card img { border-radius: 10px; box-shadow: 0 4px 16px rgba(70, 90, 140, 0.1); }
html[data-theme='night'] .dvf-deck-card img { box-shadow: 0 4px 16px rgba(3, 5, 20, 0.4); }
.dvf-deck-card.is-stage img { border-radius: 14px; }
/* NextGEN and friends often set their own white panels — let the glass show */
.dvf-deck-card :is(.ngg-galleryoverview, .ngg-imagebrowser, .ngg-gallery-thumbnail-box) {
	background: none; border: 0; box-shadow: none;
}
.dvf-deck-caption {
	font-size: 13px; color: var(--dvf-ink-faint); text-align: center;
	margin: 12px 0 2px; transition: color 0.7s ease;
}

@media (max-width: 560px) {
	.dvf-deck { border-radius: 22px; padding: 12px; }
	.dvf-deck-card { padding: 18px 16px; }
}

/* ---------- floral page header (blog archive etc.) ---------- */
.dvf-page-hero {
	position: relative;
	box-shadow: none !important; filter: none !important;
	width: var(--dvf-wide); margin: 116px auto 0;
	border-radius: 24px; overflow: hidden;
	padding: clamp(18px, 2.5vw, 30px);
	background: #ffffff;
	transition: var(--dvf-t);
}
.dvf-page-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--dvf-floral, none) center / cover no-repeat;
	opacity: 1;
	pointer-events: none; transition: opacity 1.1s ease;
}
html[data-theme='night'] .dvf-page-hero { background: #131947; }
html[data-theme='night'] .dvf-page-hero::before { opacity: 0.04; mix-blend-mode: screen; }

/* Night: a still starfield + crescent behind the floral banner, echoing the
   hero's night scene without any animation. */
html[data-theme='night'] .dvf-page-hero {
	background: linear-gradient(160deg, #0a0f30 0%, #131947 55%, #1a2059 100%);
}
html[data-theme='night'] .dvf-page-hero::after {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23cfdcff' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23cfdcff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23cfdcff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Ccircle cx='100' cy='100' r='38' fill='%23fff'/%3E%3Ccircle cx='115' cy='86' r='34' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='96' fill='url(%23g)'/%3E%3Ccircle cx='100' cy='100' r='38' fill='%23e9eeff' mask='url(%23m)' opacity='.95'/%3E%3C/svg%3E") no-repeat right clamp(24px, 6vw, 120px) top 50%/clamp(110px, 13vw, 190px) auto,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cg fill='%23cfdcff'%3E%3Ccircle cx='724.1' cy='167.6' r='1.7' opacity='0.48'/%3E%3Ccircle cx='1365.9' cy='58.8' r='2.1' opacity='0.5'/%3E%3Ccircle cx='981.7' cy='57.7' r='1.7' opacity='0.38'/%3E%3Ccircle cx='147.5' cy='241.0' r='0.9' opacity='0.58'/%3E%3Ccircle cx='634.5' cy='136.2' r='2.1' opacity='0.62'/%3E%3Ccircle cx='996.3' cy='247.5' r='0.9' opacity='0.22'/%3E%3Ccircle cx='306.2' cy='74.1' r='0.9' opacity='0.7'/%3E%3Ccircle cx='523.1' cy='176.7' r='1.1' opacity='0.53'/%3E%3Ccircle cx='1023.6' cy='149.9' r='0.9' opacity='0.49'/%3E%3Ccircle cx='446.4' cy='296.3' r='0.9' opacity='0.65'/%3E%3Ccircle cx='505.6' cy='70.5' r='1.4' opacity='0.2'/%3E%3Ccircle cx='900.6' cy='34.7' r='0.9' opacity='0.75'/%3E%3Ccircle cx='619.1' cy='284.7' r='0.9' opacity='0.32'/%3E%3Ccircle cx='1480.7' cy='18.4' r='1.7' opacity='0.84'/%3E%3Ccircle cx='636.5' cy='24.5' r='1.1' opacity='0.7'/%3E%3Ccircle cx='433.0' cy='28.6' r='1.4' opacity='0.19'/%3E%3Ccircle cx='656.6' cy='274.3' r='1.1' opacity='0.35'/%3E%3Ccircle cx='164.1' cy='20.6' r='1.7' opacity='0.3'/%3E%3Ccircle cx='894.5' cy='134.5' r='1.1' opacity='0.84'/%3E%3Ccircle cx='1229.6' cy='126.3' r='1.7' opacity='0.26'/%3E%3Ccircle cx='673.7' cy='65.6' r='1.4' opacity='0.76'/%3E%3Ccircle cx='1556.9' cy='177.3' r='0.9' opacity='0.32'/%3E%3Ccircle cx='631.5' cy='254.2' r='2.1' opacity='0.25'/%3E%3Ccircle cx='1579.9' cy='65.7' r='1.4' opacity='0.19'/%3E%3Ccircle cx='975.9' cy='247.1' r='1.7' opacity='0.23'/%3E%3Ccircle cx='146.6' cy='174.3' r='1.1' opacity='0.19'/%3E%3Ccircle cx='590.7' cy='185.9' r='1.1' opacity='0.82'/%3E%3Ccircle cx='774.1' cy='171.9' r='1.7' opacity='0.3'/%3E%3Ccircle cx='248.7' cy='270.1' r='2.1' opacity='0.35'/%3E%3Ccircle cx='305.5' cy='220.4' r='2.1' opacity='0.31'/%3E%3Ccircle cx='1517.5' cy='262.4' r='2.1' opacity='0.23'/%3E%3Ccircle cx='78.6' cy='35.1' r='2.1' opacity='0.82'/%3E%3Ccircle cx='383.0' cy='210.1' r='1.4' opacity='0.46'/%3E%3Ccircle cx='1445.3' cy='147.4' r='2.1' opacity='0.3'/%3E%3Ccircle cx='1151.2' cy='23.2' r='1.1' opacity='0.5'/%3E%3Ccircle cx='1044.7' cy='184.1' r='0.9' opacity='0.37'/%3E%3Ccircle cx='1465.3' cy='63.0' r='0.9' opacity='0.23'/%3E%3Ccircle cx='658.8' cy='76.2' r='0.9' opacity='0.3'/%3E%3Ccircle cx='590.8' cy='171.2' r='1.1' opacity='0.24'/%3E%3Ccircle cx='223.6' cy='135.4' r='1.4' opacity='0.62'/%3E%3Ccircle cx='1104.8' cy='174.8' r='1.1' opacity='0.58'/%3E%3Ccircle cx='1475.2' cy='142.6' r='1.4' opacity='0.65'/%3E%3Ccircle cx='1537.7' cy='9.3' r='0.9' opacity='0.5'/%3E%3Ccircle cx='1167.4' cy='96.8' r='0.9' opacity='0.23'/%3E%3Ccircle cx='873.5' cy='219.7' r='1.1' opacity='0.71'/%3E%3Ccircle cx='1461.5' cy='106.4' r='1.7' opacity='0.78'/%3E%3Ccircle cx='1391.5' cy='125.6' r='0.9' opacity='0.76'/%3E%3Ccircle cx='916.1' cy='186.7' r='1.7' opacity='0.43'/%3E%3Ccircle cx='22.8' cy='24.2' r='0.9' opacity='0.61'/%3E%3Ccircle cx='1586.4' cy='261.7' r='1.4' opacity='0.44'/%3E%3Ccircle cx='1174.7' cy='173.8' r='1.7' opacity='0.49'/%3E%3Ccircle cx='865.8' cy='155.5' r='2.1' opacity='0.2'/%3E%3Ccircle cx='961.4' cy='144.4' r='1.1' opacity='0.82'/%3E%3Ccircle cx='182.9' cy='232.3' r='1.7' opacity='0.35'/%3E%3Ccircle cx='21.0' cy='91.5' r='2.1' opacity='0.32'/%3E%3Ccircle cx='273.4' cy='269.3' r='1.7' opacity='0.51'/%3E%3Ccircle cx='387.9' cy='122.0' r='1.4' opacity='0.31'/%3E%3Ccircle cx='689.8' cy='240.0' r='1.1' opacity='0.77'/%3E%3Ccircle cx='615.8' cy='174.4' r='1.4' opacity='0.32'/%3E%3Ccircle cx='217.5' cy='106.1' r='0.9' opacity='0.66'/%3E%3Ccircle cx='1517.3' cy='84.4' r='1.1' opacity='0.26'/%3E%3Ccircle cx='754.3' cy='275.2' r='1.7' opacity='0.44'/%3E%3Ccircle cx='831.8' cy='200.6' r='2.1' opacity='0.48'/%3E%3Ccircle cx='122.0' cy='12.3' r='2.1' opacity='0.21'/%3E%3Ccircle cx='1132.6' cy='170.8' r='1.4' opacity='0.62'/%3E%3Ccircle cx='902.1' cy='191.4' r='1.7' opacity='0.48'/%3E%3Ccircle cx='42.4' cy='246.9' r='1.1' opacity='0.7'/%3E%3Ccircle cx='1273.2' cy='292.3' r='0.9' opacity='0.48'/%3E%3Ccircle cx='1007.2' cy='195.6' r='1.4' opacity='0.82'/%3E%3Ccircle cx='1094.1' cy='61.6' r='1.7' opacity='0.35'/%3E%3Ccircle cx='1141.5' cy='225.0' r='2.1' opacity='0.66'/%3E%3Ccircle cx='288.5' cy='83.1' r='1.4' opacity='0.54'/%3E%3Ccircle cx='1512.2' cy='150.1' r='1.1' opacity='0.44'/%3E%3Ccircle cx='1265.3' cy='269.4' r='0.9' opacity='0.46'/%3E%3Ccircle cx='1425.9' cy='117.1' r='1.7' opacity='0.48'/%3E%3Ccircle cx='1000.1' cy='270.5' r='1.7' opacity='0.55'/%3E%3Ccircle cx='1043.4' cy='150.8' r='1.4' opacity='0.49'/%3E%3Ccircle cx='1041.2' cy='63.2' r='0.9' opacity='0.32'/%3E%3Ccircle cx='1437.6' cy='291.3' r='1.4' opacity='0.54'/%3E%3Ccircle cx='1263.5' cy='97.2' r='0.9' opacity='0.41'/%3E%3Ccircle cx='134.9' cy='132.6' r='2.1' opacity='0.46'/%3E%3Ccircle cx='441.8' cy='273.4' r='1.1' opacity='0.72'/%3E%3Ccircle cx='105.1' cy='238.2' r='1.1' opacity='0.54'/%3E%3Ccircle cx='1097.4' cy='272.3' r='1.7' opacity='0.28'/%3E%3Ccircle cx='826.3' cy='215.7' r='1.7' opacity='0.81'/%3E%3Ccircle cx='788.2' cy='282.1' r='0.9' opacity='0.69'/%3E%3Ccircle cx='703.4' cy='167.3' r='2.1' opacity='0.61'/%3E%3Ccircle cx='836.3' cy='251.0' r='2.1' opacity='0.35'/%3E%3Ccircle cx='1073.1' cy='283.7' r='2.1' opacity='0.32'/%3E%3Ccircle cx='1359.1' cy='287.7' r='2.1' opacity='0.36'/%3E%3Ccircle cx='796.3' cy='123.9' r='0.9' opacity='0.52'/%3E%3Ccircle cx='967.7' cy='11.2' r='0.9' opacity='0.53'/%3E%3Ccircle cx='641.5' cy='238.5' r='2.1' opacity='0.26'/%3E%3Ccircle cx='151.6' cy='52.0' r='2.1' opacity='0.49'/%3E%3Ccircle cx='1470.7' cy='238.3' r='1.7' opacity='0.36'/%3E%3Ccircle cx='757.2' cy='40.3' r='1.7' opacity='0.78'/%3E%3Ccircle cx='1494.5' cy='273.5' r='2.1' opacity='0.39'/%3E%3Ccircle cx='308.2' cy='184.7' r='1.4' opacity='0.27'/%3E%3Ccircle cx='1245.2' cy='9.7' r='1.1' opacity='0.28'/%3E%3Ccircle cx='21.9' cy='86.5' r='1.4' opacity='0.34'/%3E%3Ccircle cx='798.1' cy='149.9' r='2.1' opacity='0.26'/%3E%3Ccircle cx='816.7' cy='76.7' r='1.1' opacity='0.65'/%3E%3Ccircle cx='1403.7' cy='9.8' r='1.7' opacity='0.73'/%3E%3Ccircle cx='984.6' cy='161.2' r='2.1' opacity='0.61'/%3E%3Ccircle cx='847.2' cy='253.3' r='2.1' opacity='0.57'/%3E%3Ccircle cx='220.5' cy='272.0' r='1.4' opacity='0.78'/%3E%3Ccircle cx='506.5' cy='95.6' r='1.1' opacity='0.33'/%3E%3Ccircle cx='1594.4' cy='263.9' r='1.1' opacity='0.78'/%3E%3Ccircle cx='214.3' cy='28.9' r='1.7' opacity='0.25'/%3E%3Ccircle cx='1329.5' cy='127.0' r='1.1' opacity='0.31'/%3E%3Ccircle cx='1004.0' cy='237.9' r='0.9' opacity='0.31'/%3E%3Ccircle cx='1090.7' cy='270.9' r='1.4' opacity='0.26'/%3E%3Ccircle cx='809.1' cy='225.9' r='2.1' opacity='0.85'/%3E%3Ccircle cx='1330.7' cy='239.0' r='1.7' opacity='0.25'/%3E%3Ccircle cx='62.7' cy='165.2' r='2.1' opacity='0.79'/%3E%3Ccircle cx='770.2' cy='58.7' r='0.9' opacity='0.32'/%3E%3Ccircle cx='1342.3' cy='294.1' r='0.9' opacity='0.57'/%3E%3Ccircle cx='217.3' cy='203.2' r='0.9' opacity='0.69'/%3E%3Ccircle cx='524.0' cy='140.3' r='2.1' opacity='0.42'/%3E%3Ccircle cx='337.9' cy='112.7' r='0.9' opacity='0.75'/%3E%3Ccircle cx='291.9' cy='136.5' r='1.4' opacity='0.45'/%3E%3Ccircle cx='314.0' cy='51.5' r='2.1' opacity='0.71'/%3E%3Ccircle cx='519.0' cy='27.9' r='1.7' opacity='0.56'/%3E%3Ccircle cx='307.4' cy='174.9' r='1.4' opacity='0.72'/%3E%3Ccircle cx='414.7' cy='270.9' r='1.1' opacity='0.73'/%3E%3Ccircle cx='649.6' cy='266.6' r='2.1' opacity='0.65'/%3E%3Ccircle cx='1226.0' cy='228.0' r='1.7' opacity='0.32'/%3E%3Ccircle cx='297.6' cy='237.4' r='1.4' opacity='0.49'/%3E%3Ccircle cx='19.9' cy='107.6' r='2.1' opacity='0.21'/%3E%3Ccircle cx='438.1' cy='285.7' r='1.4' opacity='0.41'/%3E%3C/g%3E%3Cg fill='%23e8ecff'%3E%3Cpath d='M180 52C180 58.666666666666664 183.33333333333334 62 190 62C183.33333333333334 62 180 65.33333333333333 180 72C180 65.33333333333333 176.66666666666666 62 170 62C176.66666666666666 62 180 58.666666666666664 180 52Z' opacity='0.5'/%3E%3Cpath d='M640 197C640 202.33333333333334 642.6666666666666 205 648 205C642.6666666666666 205 640 207.66666666666666 640 213C640 207.66666666666666 637.3333333333334 205 632 205C637.3333333333334 205 640 202.33333333333334 640 197Z' opacity='0.42'/%3E%3Cpath d='M930 39C930 45.0 933.0 48 939 48C933.0 48 930 51.0 930 57C930 51.0 927.0 48 921 48C927.0 48 930 45.0 930 39Z' opacity='0.46'/%3E%3Cpath d='M1180 225C1180 229.66666666666666 1182.3333333333333 232 1187 232C1182.3333333333333 232 1180 234.33333333333334 1180 239C1180 234.33333333333334 1177.6666666666667 232 1173 232C1177.6666666666667 232 1180 229.66666666666666 1180 225Z' opacity='0.38'/%3E%3Cpath d='M420 243C420 247.66666666666666 422.3333333333333 250 427 250C422.3333333333333 250 420 252.33333333333334 420 257C420 252.33333333333334 417.6666666666667 250 413 250C417.6666666666667 250 420 247.66666666666666 420 243Z' opacity='0.34'/%3E%3Cpath d='M1330 112C1330 117.33333333333333 1332.6666666666667 120 1338 120C1332.6666666666667 120 1330 122.66666666666667 1330 128C1330 122.66666666666667 1327.3333333333333 120 1322 120C1327.3333333333333 120 1330 117.33333333333333 1330 112Z' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.dvf-page-hero-card { position: relative; z-index: 1; }
.dvf-page-hero-card {
	position: relative; z-index: 1;
	box-shadow: none !important;
	width: 100%; margin: 0 auto;
	border-radius: 16px; padding: 28px;
	background: var(--dvf-glass);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	text-align: center;
	transition: var(--dvf-t);
}
.dvf-page-hero-card h1, .dvf-page-hero-card .wp-block-post-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; margin: 0; }
.dvf-page-hero-card p, .dvf-page-hero-card .wp-block-post-excerpt__excerpt { font-size: 14.5px; color: var(--dvf-ink-soft); margin: 8px 0 0; transition: color 0.7s ease; }
.dvf-page-hero-card .wp-block-post-excerpt { margin: 0 !important; }

/* Free-form editable content inside the banner (headings, paragraphs, script
   accents, links). Everything here uses theme vars, so day/night still works
   as long as no manual colour is set on the block in the editor. */
.dvf-page-hero-card > *:first-child { margin-top: 0; }
.dvf-page-hero-card p:empty, .dvf-page-hero-card .dvf-page-hero-note:empty { display: none; }
.dvf-page-hero-note { font-size: 15px; color: var(--dvf-ink-soft); margin: 10px 0 0 !important; transition: color 0.7s ease; }
.dvf-page-hero-card h2, .dvf-page-hero-card h3 {
	font-size: clamp(17px, 1.9vw, 21px); font-weight: 400; color: var(--dvf-ink);
	margin: 12px 0 0; transition: color 0.7s ease;
}
.dvf-page-hero-card .dvf-script {
	font-size: clamp(22px, 2.4vw, 30px); color: var(--dvf-peri);
	line-height: 1.25; margin: 8px 0 0; transition: color 0.7s ease;
}
.dvf-page-hero-card a { color: var(--dvf-peri-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.dvf-page-hero-card strong { color: var(--dvf-ink); font-weight: 600; }
.dvf-page-hero + .dvf-section, .dvf-page-hero + .dvf-content-list { padding-top: 44px; }

/* ---------- premium article template ---------- */
.dvf-article-hero {
	width: var(--dvf-wide); margin: 116px auto 0;
	display: grid; grid-template-columns: minmax(300px, 38%) 1fr;
	gap: 0; align-items: stretch;
}
.dvf-article-hero:not(:has(.dvf-article-img img)) { grid-template-columns: 1fr; }
.dvf-article-card {
	border-radius: 28px 0 0 28px; padding: clamp(32px, 3.5vw, 52px);
	background: var(--dvf-glass);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	transition: var(--dvf-t);
}
html[data-theme='night'] .dvf-article-card { box-shadow: inset 0 1px 0 rgba(190, 205, 255, 0.2); }
.dvf-article-cat {
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
}
.dvf-article-cat a {
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	letter-spacing: inherit; text-transform: inherit;
	color: inherit; text-decoration: none; transition: color 0.7s ease;
}
.dvf-article-card .wp-block-post-title {
	font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.15;
	margin: 14px 0 0;
}
.dvf-article-meta { margin-top: 18px !important; gap: 6px 16px; font-size: 14.5px; color: var(--dvf-ink-soft); }
.dvf-article-meta > * { margin: 0 !important; transition: color 0.7s ease; }
.dvf-article-img { margin: 0 !important; border-radius: 0 28px 28px 0; overflow: hidden; }
/* no featured image -> the text card is on its own, so round all four corners */
.dvf-article-hero:not(:has(.dvf-article-img img)) .dvf-article-card { border-radius: 28px; }
.dvf-article-img img {
	width: 100%; height: 100%; min-height: clamp(280px, 27vw, 460px); max-height: 480px;
	object-fit: cover; display: block;
}
.dvf-article-img:not(:has(img)) { display: none; }
.dvf-article {
	width: var(--dvf-post-w);
	margin: 28px auto 0;
	border-radius: 28px; padding: clamp(34px, 4vw, 56px) clamp(24px, 6%, 58px);
	background: var(--dvf-card);
	box-shadow: 0 10px 34px rgba(70, 90, 140, 0.12);
	transition: var(--dvf-t);
	--dvf-rule: #e4e9f2;
	--dvf-img-edge: #e2e7f0;
	--dvf-measure: 100%;
}
html[data-theme='night'] .dvf-article {
	box-shadow: 0 10px 34px rgba(3, 5, 20, 0.5);
	--dvf-rule: rgba(169, 180, 245, 0.2);
	--dvf-img-edge: rgba(169, 180, 245, 0.24);
}

/* --- reading measure ---------------------------------------------------
   The card is 1100px wide, which is a fine frame but a terrible line
   length. Text runs to a readable measure down the middle; anything
   visual is allowed the full width of the card. */
.dvf-article .wp-block-post-content > * {
	max-width: var(--dvf-measure);
	margin-left: 0; margin-right: auto;
}
.dvf-article .wp-block-post-content > :is(
	figure, .wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video,
	.wp-block-table, .wp-block-columns, .wp-block-media-text, .wp-block-cover,
	pre, .wp-block-code, .wp-block-preformatted, hr,
	.alignwide, .alignfull, .has-background
) { max-width: 100%; }
/* floats can't escape their column and can't sit on the next block */
.dvf-article .wp-block-post-content::after { content: ''; display: table; clear: both; }

/* Links read as links: brand colour with a soft underline that firms up
   on hover, rather than colour alone. */
.dvf-article a {
	color: var(--dvf-peri-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--dvf-peri-deep) 40%, transparent);
	text-underline-offset: 3px;
	transition: color 0.7s ease, text-decoration-color 0.2s ease;
}
.dvf-article a:hover { text-decoration-color: currentColor; }
.dvf-article :is(h2, h3, h4, h5) a { text-decoration: none; }
/* Font size, line height and colour sit on the LIST, not the list item. The
   editor writes a List block's typography onto the <ul>/<ol> — an inline
   style or a has-*-font-size class — and the <li> children are meant to
   inherit it. A rule on ".dvf-article li" blocks that inheritance outright:
   the list dutifully takes your new size, the visible text ignores it, and
   the controls look broken. Setting it on the container leaves the chain
   intact. Nested lists inherit from their parent rather than resetting. */
.dvf-article p { font-size: 17.5px; line-height: 1.85; color: var(--dvf-ink); }
.dvf-article ul, .dvf-article ol {
	font-size: 17.5px; line-height: 1.85; color: var(--dvf-ink);
	padding-left: 1.4em;
}
.dvf-article li ul, .dvf-article li ol { font-size: inherit; line-height: inherit; }
.dvf-article li { margin: 0.55rem 0 0; }
.dvf-article li::marker { color: var(--dvf-peri); }
/* HTML collapses any run of whitespace down to a single space — that is the
   spec, not a bug, and it is why two spaces indent nothing. pre-wrap keeps
   the spaces you typed while still wrapping normally. Caveat: it also honours
   line breaks in the SAVED markup, so a paragraph stored across several lines
   (older content, or HTML pasted in) will now break where the source breaks. */
.dvf-article :is(p, li) { white-space: pre-wrap; }
.dvf-article strong { font-weight: 600; color: var(--dvf-ink); }

/* --- heading scale -----------------------------------------------------
   Every level steps down clearly, and no level drops below body size —
   an H5 that renders smaller than the paragraph under it stops reading
   as a heading at all. All bold, so any level looks like a heading. */
:root .dvf-article h2 {
	font-size: clamp(24px, 2.6vw, 30px); font-weight: 700;
	line-height: 1.25; letter-spacing: -0.01em;
}
:root .dvf-article h3 {
	font-size: clamp(21px, 2.1vw, 25px); font-weight: 700;
	line-height: 1.3;
}
:root .dvf-article h4 {
	font-size: clamp(19.5px, 1.8vw, 22px); font-weight: 700;
	line-height: 1.35; color: var(--dvf-ink);
}
:root .dvf-article h5 {
	font-size: clamp(18.5px, 1.7vw, 20.5px); font-weight: 700;
	line-height: 1.4; color: var(--dvf-ink);
}
:root .dvf-article h6 {
	font-size: 19px; font-weight: 700;
	line-height: 1.45; color: var(--dvf-ink);
}

/* Section numbers. If a number sits in its own block above the section
   title, give it the class dvf-num and the pair reads as one unit. */
.dvf-article .dvf-num,
:root .dvf-article :is(h2, h3, h4, h5, h6).dvf-num {
	font-size: clamp(26px, 2.6vw, 32px); font-weight: 700;
	line-height: 1; letter-spacing: 0.01em;
	color: var(--dvf-peri-deep);
	transition: color 0.7s ease;
}

/* --- rules -------------------------------------------------------------
   A thin solid hairline, not a fading gradient. */
.dvf-article hr, .dvf-article .wp-block-separator {
	border: 0; border-top: 1px solid var(--dvf-rule);
	height: 0; background: none; opacity: 1;
	width: 100%;
	transition: border-color 0.7s ease;
}

/* --- images ------------------------------------------------------------
   max-width stops anything wider than the column from running over the
   text next to it, and border-color means a border set in the editor
   comes out hairline grey rather than currentColor black. */
.dvf-article :is(img, video, iframe, canvas, svg) { max-width: 100%; }
.dvf-article img {
	height: auto; display: block;
	border-color: var(--dvf-img-edge);
	box-shadow: 0 4px 18px rgba(70, 90, 140, 0.08);
	transition: border-color 0.7s ease;
}
/* Square corners are the default for screenshots — but only where no
   block style has been chosen. A blanket "border-radius: 0" here sits at
   the same specificity as a plugin's ".is-style-avatar img" and wins on
   load order, which is why the Styles panel stopped doing anything. */
.dvf-article figure:not([class*="is-style-"]) img,
.dvf-article img:not([class*="is-style-"]):not(figure img) { border-radius: 0; }
/* work even if the plugin that registers them isn't loading its CSS */
.dvf-article :is(figure, img).is-style-rounded img,
.dvf-article img.is-style-rounded,
.dvf-article :is(figure, img).is-style-avatar img,
.dvf-article img.is-style-avatar {
	border-radius: 9999px; aspect-ratio: 1 / 1; object-fit: cover;
}
/* clipped shapes shouldn't carry a rectangular drop shadow */
.dvf-article :is(.is-style-top-wave, .is-style-bottom-wave) img { box-shadow: none; }
html[data-theme='night'] .dvf-article img { box-shadow: 0 4px 18px rgba(3, 5, 20, 0.4); }
.dvf-article figure { max-width: 100%; }
.dvf-article figure img { margin-inline: auto; }
.dvf-article img.dvf-round, .dvf-article .dvf-round img { border-radius: 16px; }
/* opt-in hairline frame for screenshots that sit flush on the white card */
.dvf-article .dvf-frame img { border: 1px solid var(--dvf-img-edge); }
.dvf-article figcaption {
	font-size: 13px; color: var(--dvf-ink-faint); text-align: center;
	margin-top: 10px; transition: color 0.7s ease;
}
/* Floated images. These have to outrank the full-width rule above, and
   they need pulling in to the text measure — floated against the edge of
   the full-width container they sit past the text and never wrap. */
.dvf-article .wp-block-post-content > :is(.alignleft, .alignright) {
	max-width: min(320px, 44%);
}
.dvf-article .wp-block-post-content > .alignleft {
	float: left; margin: 0.3rem 1.9rem 1.6rem 0;
}
.dvf-article .wp-block-post-content > .alignright {
	float: right; margin: 0.3rem 0 1.6rem 1.9rem;
}
.dvf-article .aligncenter { margin-inline: auto; }
@media (max-width: 760px) {
	.dvf-article .wp-block-post-content > :is(.alignleft, .alignright) {
		float: none; max-width: 100%; margin: 2.2rem 0;
	}
}

/* --- callouts ----------------------------------------------------------
   Any group given a background in the editor reads as a callout box. */
.dvf-article .wp-block-group.has-background {
	border-radius: 18px;
	padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 32px);
}
.dvf-article .wp-block-group.has-background > :first-child { margin-top: 0; }

.dvf-article blockquote {
	border: none; padding: 22px 26px;
	border-radius: 18px;
	background: var(--dvf-grad);
	font-size: 17px; color: var(--dvf-ink);
	transition: background 1s ease, color 0.7s ease;
}
.dvf-article blockquote p { margin: 0; }
.dvf-article blockquote p + p { margin-top: 0.9em; }

/* --- tables ------------------------------------------------------------ */
.dvf-article table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.dvf-article :is(th, td) {
	border: 0; border-bottom: 1px solid var(--dvf-rule);
	padding: 11px 14px; text-align: left; color: var(--dvf-ink);
	transition: border-color 0.7s ease, color 0.7s ease;
}
.dvf-article th { font-weight: 700; }

/* --- block style variations --------------------------------------------
   History: they were first scoped to .dvf-article, which does not exist in
   the editor canvas, and a bare ".is-style-x" (0,1,0) also lost to
   ".dvf-article p" (0,1,1) on the front end. Both fixed.

   What remained was that the theme never registered these styles — a plugin
   does — so the slugs were only ever guessed from the labels in the Styles
   panel. If the plugin namespaces them (is-style-gs-muted, is-style-gsbp-
   muted, anything), an exact ".is-style-muted" matches nothing and every
   variation silently does nothing.

   So these no longer hard-code the slug. [class*="is-style-"] requires the
   element to carry SOME style variation, and the second attribute matches
   the name anywhere inside it, prefix or no prefix. Specificity is (0,3,0),
   the same as the repeated class it replaces, so it still clears
   ":root .dvf-article h4" (0,2,1) and needs no ancestor — editor, posts and
   pages alike. */
:root [class*="is-style-"][class*="plain"] {
	font-size: 17.5px; font-weight: 400; line-height: 1.85;
	letter-spacing: normal; text-transform: none;
	color: var(--dvf-ink); background: none; border: 0; padding: 0;
}
:root [class*="is-style-"][class*="muted"] {
	font-size: 16px; font-weight: 400; line-height: 1.8;
	letter-spacing: normal; text-transform: none;
	color: var(--dvf-ink-soft);
}
:root [class*="is-style-"][class*="display"] {
	font-size: clamp(20px, 2vw, 23px); font-weight: 500; line-height: 1.6;
	letter-spacing: -0.005em; color: var(--dvf-ink);
}
:root [class*="is-style-"][class*="eyebrow"] {
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	line-height: 1.5; color: var(--dvf-peri-deep);
	margin-top: 2.6rem;
}
:root [class*="is-style-"][class*="overline"] {
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	line-height: 1.5; color: var(--dvf-peri-deep);
	border-top: 1px solid var(--dvf-rule, #e4e9f2);
	padding-top: 0.9rem; margin-top: 2.6rem;
	transition: border-color 0.7s ease, color 0.7s ease;
}
[class*="is-style-"]:is([class*="eyebrow"], [class*="overline"]) + :is(h2, h3, h4, h5, h6, p) {
	margin-top: 0.4rem;
}
/* :not() guards the one name that collides with a core block class —
   "wp-block-quote" and "wp-block-pullquote" both contain "quote", so a real
   quote block carrying any style variation would otherwise pick this up. */
:root [class*="is-style-"][class*="quote"]:not(blockquote):not(figure) {
	font-size: 18px; line-height: 1.75; color: var(--dvf-ink-soft);
	border-left: 3px solid var(--dvf-peri);
	padding: 0.1rem 0 0.1rem 1.3rem; margin-top: 1.9rem;
	transition: border-color 0.7s ease, color 0.7s ease;
}

/* panels — soft tint, accent bar down the left, no hard borders */
:root [class*="is-style-"]:is([class*="highlight"], [class*="info"],
	[class*="success"], [class*="warning"], [class*="error"]) {
	font-size: 16.5px; line-height: 1.75; color: var(--dvf-ink);
	border-radius: 14px;
	padding: 1.05rem 1.3rem;
	margin-top: 1.9rem;
	transition: background-color 1.1s ease, color 0.7s ease;
}
:root [class*="is-style-"][class*="highlight"],
:root [class*="is-style-"][class*="info"] {
	background: rgba(126, 160, 232, 0.12);
}
:root [class*="is-style-"][class*="success"] {
	background: rgba(94, 176, 148, 0.13);
}
:root [class*="is-style-"][class*="warning"] {
	background: rgba(214, 173, 84, 0.15);
}
:root [class*="is-style-"][class*="error"] {
	background: rgba(224, 122, 152, 0.14);
}
html[data-theme='night'] [class*="is-style-"][class*="highlight"],
html[data-theme='night'] [class*="is-style-"][class*="info"] {
	background: rgba(169, 180, 245, 0.16);
}
html[data-theme='night'] [class*="is-style-"][class*="success"] {
	background: rgba(122, 214, 180, 0.14);
}
html[data-theme='night'] [class*="is-style-"][class*="warning"] {
	background: rgba(233, 199, 122, 0.15);
}
html[data-theme='night'] [class*="is-style-"][class*="error"] {
	background: rgba(240, 150, 180, 0.15);
}
/* panels and quotes sit flush with the column, not indented by the
   article's paragraph rules */
:root [class*="is-style-"]:is([class*="highlight"], [class*="info"],
	[class*="success"], [class*="warning"], [class*="error"]) > :first-child { margin-top: 0; }

/* --- card style variations ---------------------------------------------
   Registered for group/column blocks. Same treatment as the paragraph
   variations: class repeated for specificity, no ancestor required, so
   they preview in the editor as well as rendering on the front end. */
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured).is-style-card,
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured).is-style-card-outlined,
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured).is-style-card-overlay,
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured).is-style-card-featured {
	border-radius: 20px;
	padding: clamp(22px, 2.2vw, 32px);
	margin-top: 1.9rem;
	transition: var(--dvf-t);
}
:root .is-style-card.is-style-card {
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	box-shadow: 0 6px 22px rgba(70, 90, 140, 0.07);
}
html[data-theme='night'] .is-style-card.is-style-card {
	box-shadow: 0 6px 22px rgba(3, 5, 20, 0.4);
}
:root .is-style-card-outlined.is-style-card-outlined {
	background: none;
	border: 1px solid var(--dvf-card-border);
	box-shadow: none;
}
:root .is-style-card-overlay.is-style-card-overlay {
	background: var(--dvf-glass);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
}
:root .is-style-card-featured.is-style-card-featured {
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
}
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured) > :first-child { margin-top: 0; }
:root :is(.is-style-card, .is-style-card-outlined,
	.is-style-card-overlay, .is-style-card-featured) > :last-child { margin-bottom: 0; }

/* --- editor colours in night mode --------------------------------------
   Palette colours are fixed hexes, so a paragraph set to "ink" or a box
   set to "ice" stays dark-on-dark after the toggle. Remapping the preset
   variables inside the article flips every one of them at once. */
html[data-theme='night'] .dvf-article {
	--wp--preset--color--base: #131a44;
	--wp--preset--color--mist: #171b48;
	--wp--preset--color--ice: #16294d;
	--wp--preset--color--lilac: #262a5e;
	--wp--preset--color--ink: #e8ecff;
	--wp--preset--color--ink-soft: #a9b3e8;
	--wp--preset--color--ink-faint: #707cbc;
	--wp--preset--color--peri: #a9b4f5;
	--wp--preset--color--peri-deep: #c3cbff;
	--wp--preset--color--blossom: #f0a8c4;
	--wp--preset--color--blossom-soft: #6d4a74;
	--wp--preset--color--dove: #8d95c8;
	--wp--preset--gradient--brand: linear-gradient(135deg, #16294d 0%, #262a5e 100%);
	--wp--preset--gradient--brand-reverse: linear-gradient(315deg, #16294d 0%, #262a5e 100%);
	--wp--preset--gradient--page: linear-gradient(180deg, #131a44 0%, #171b48 100%);
}
/* Background highlights are written as inline hex, which no variable can
   reach — force them legible instead of leaving dark text on a dark card.

   But the same <mark> tag carries BOTH of the editor's inline colour tools.
   Highlight → Background writes a background; Highlight → Text writes a text
   colour and adds .has-inline-color. "color: inherit !important" was wiping
   out the second one, so blue and green text came through as grey pills.
   Anything carrying .has-inline-color is now left alone. */
.dvf-article mark {
	background-color: rgba(126, 160, 232, 0.16) !important;
	border-radius: 5px; padding: 0.1em 0.3em;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
	transition: background-color 1.1s ease;
}
.dvf-article mark:not(.has-inline-color) { color: inherit !important; }
/* Text colour on its own: your colour, and no pill behind it. */
.dvf-article mark.has-inline-color:not(.has-inline-background-color) {
	background-color: transparent !important;
	padding: 0; border-radius: 0;
}
html[data-theme='night'] .dvf-article mark {
	background-color: rgba(169, 180, 245, 0.24) !important;
}
/* A highlight in a heading is a deliberate flourish, so it keeps its
   strength. Mid-paragraph it competes with the reading, so it sits back. */
.dvf-article :is(p, li) mark {
	background-color: rgba(126, 160, 232, 0.1) !important;
	padding: 0.06em 0.24em;
}
html[data-theme='night'] .dvf-article :is(p, li) mark {
	background-color: rgba(169, 180, 245, 0.15) !important;
}
/* turn a single highlight off without touching the words:
   add the class dvf-hl-off to it */
.dvf-article mark.dvf-hl-off {
	background-color: transparent !important;
	padding: 0; border-radius: 0;
}
/* blossom variant — add the class dvf-hl-pink to the highlighted text */
.dvf-article mark.dvf-hl-pink { background-color: rgba(238, 147, 180, 0.18) !important; }
html[data-theme='night'] .dvf-article mark.dvf-hl-pink { background-color: rgba(240, 168, 196, 0.22) !important; }
/* a link inside a highlight still looks like a link */
.dvf-article mark a { color: var(--dvf-peri-deep); }

/* Code: one plain box on the same background as the post, hairline edge,
   slightly rounded. Also flattens the double-nested box that syntax
   highlighter plugins wrap around <pre>. */
.dvf-article pre,
.dvf-article .wp-block-code,
.dvf-article .wp-block-preformatted {
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	border-radius: 10px;
	padding: 16px 20px;
	overflow-x: auto; box-shadow: none;
	transition: var(--dvf-t);
}
.dvf-article pre code,
.dvf-article .wp-block-code code,
.dvf-article .wp-block-code pre,
.dvf-article pre pre,
.dvf-article .hljs {
	background: none !important;
	border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none;
}
.dvf-article pre, .dvf-article code, .dvf-article .hljs {
	font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
	font-size: 14.5px; line-height: 1.7; color: var(--dvf-ink);
}
/* inline code only */
.dvf-article :not(pre) > code {
	background: rgba(20, 26, 66, 0.05); padding: 2px 6px; border-radius: 6px;
}
html[data-theme='night'] .dvf-article pre,
html[data-theme='night'] .dvf-article .wp-block-code,
html[data-theme='night'] .dvf-article .wp-block-preformatted { border-color: rgba(169, 180, 245, 0.18); }
html[data-theme='night'] .dvf-article :not(pre) > code { background: rgba(169, 180, 245, 0.14); }

.dvf-article-tags {
	margin: 44px auto 0 0 !important; max-width: var(--dvf-measure);
	display: flex; flex-wrap: wrap; gap: 8px;
	padding-top: 28px; border-top: 1px solid var(--dvf-rule);
	transition: border-color 0.7s ease;
}
.dvf-article-tags a {
	font-size: 12.5px; font-weight: 600; text-decoration: none;
	color: var(--dvf-peri-deep);
	background: var(--dvf-pill); border: 1px solid var(--dvf-glass-border);
	border-radius: 999px; padding: 6px 14px;
	transition: var(--dvf-t), transform 0.2s ease;
}
.dvf-article-tags a:hover { transform: translateY(-2px); }


/* ---------- single posts and pages: gradient banner + white base ---------- */
.dvf-post-hero {
	width: var(--dvf-wide); margin: 120px auto 0;
	border-radius: 28px; padding: clamp(30px, 4vw, 52px);
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	display: grid; grid-template-columns: 1fr auto;
	align-items: center; gap: clamp(24px, 4vw, 48px);
	transition: background 1s ease, border-color 0.7s ease;
}
.dvf-post-hero .wp-block-post-title { font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; margin: 0; max-width: 760px; }
.dvf-post-meta { margin-top: 14px !important; gap: 14px; font-size: 14px; color: var(--dvf-ink-soft); }
.dvf-post-meta > * { margin: 0 !important; transition: color 0.7s ease; }
.dvf-post-hero-img { margin: 0 !important; width: clamp(200px, 26vw, 340px); }
.dvf-post-hero-img img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
	border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.85);
}
html[data-theme='night'] .dvf-post-hero-img img { border-color: rgba(169, 180, 245, 0.3); }
.dvf-post-hero-img:not(:has(img)) { display: none; }
.dvf-post-body {
	width: min(1100px, calc(100% - clamp(32px, 5vw, 80px)));
	margin: 44px auto 0;
	border-radius: 24px; padding: clamp(32px, 5vw, 64px);
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	box-shadow: 0 6px 22px rgba(70, 90, 140, 0.06);
	transition: var(--dvf-t);
}
.dvf-post-body a { color: var(--dvf-peri-deep); }
.dvf-post-body img { border-radius: 14px; height: auto; }
.dvf-post-body h2, .dvf-post-body h3 { margin-top: 1.6em; }
.dvf-post-body p, .dvf-post-body li { font-size: 16.5px; line-height: 1.8; color: var(--dvf-ink); }
.dvf-post-body blockquote {
	border-left: 3px solid var(--dvf-peri); margin: 1.5em 0; padding: 4px 0 4px 20px;
	color: var(--dvf-ink-soft);
}

/* ---------- content pages / archives ---------- */
.dvf-content { width: min(780px, 92vw); margin: 0 auto; padding: 160px 0 90px; }
.dvf-content .wp-block-post-title { font-size: clamp(32px, 4.6vw, 48px); }
.dvf-content a { color: var(--dvf-peri-deep); }
.dvf-content-list { padding-top: 160px; }
.dvf-cards .wp-block-query-pagination { margin-top: 44px; display: flex; justify-content: center; gap: 14px; font-weight: 500; }
.dvf-cards .wp-block-query-pagination a, .dvf-cards .wp-block-query-pagination-numbers { color: var(--dvf-peri-deep); }

/* --- article spacing, in a cascade layer -------------------------------
   Everything above sets how the article LOOKS. This sets how far apart the
   blocks sit, and it is the one thing you should be able to overrule from
   the editor.

   Specificity cannot do that. ".dvf-article p" (0,1,1) outranks the rule
   WordPress writes for Block spacing (0,1,0 at most, 0,0,0 for the global
   setting), so whatever you set was calculated and then discarded.

   A cascade layer sidesteps specificity entirely: any unlayered rule beats
   any layered one, however specific the layered one is. WordPress does not
   put its layout CSS in a layer, so Block spacing — global, per-Group, and
   per-block Margin — now always wins here, while these stay as the defaults
   when you have not set anything. Order within the layer is unchanged, so
   the heading scale still steps 3.4 / 2.7 / 2.4 / 2.3 / 2.2rem untouched.

   Not included: floats, centring, and list-item spacing, which are layout
   rather than block rhythm, and the card rules elsewhere that zero margins
   with !important — those still hold. */
@layer dvf-spacing {
	.dvf-article p { margin: 1.2rem 0 0; }
	.dvf-article ul, .dvf-article ol { margin: 1.2rem 0 0; }
	:root .dvf-article h2 { margin: 3.4rem 0 0; }
	:root .dvf-article h3 { margin: 2.7rem 0 0; }
	:root .dvf-article h4 { margin: 2.4rem 0 0; }
	:root .dvf-article h5 { margin: 2.3rem 0 0; }
	:root .dvf-article h6 { margin: 2.2rem 0 0; }
	.dvf-article :is(h2, h3, h4, h5, h6) + p { margin-top: 0.7rem; }
	.dvf-article :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
	.dvf-article .dvf-num,
	:root .dvf-article :is(h2, h3, h4, h5, h6).dvf-num { margin: 3.6rem 0 0; }
	.dvf-article .dvf-num + :is(h2, h3, h4, h5, h6, p) { margin-top: 0.5rem; }
	.dvf-article hr, .dvf-article .wp-block-separator { margin: 3.2rem 0; }
	.dvf-article figure { margin: 2.4rem 0; }
	.dvf-article .wp-block-group.has-background { margin: 2.4rem 0; }
	.dvf-article blockquote { margin: 2.4rem 0; }
	.dvf-article .wp-block-table { margin: 2.4rem 0; }
	.dvf-article pre,
	.dvf-article .wp-block-code,
	.dvf-article .wp-block-preformatted { margin: 2.4rem 0; }
}

/* ---------- footer ---------- */
.dvf-footer {
	margin-top: 50px; padding: 0 24px 34px; text-align: center;
	font-size: 13.5px; color: var(--dvf-ink-faint);
	transition: color 0.7s ease;
}
.dvf-footer::before {
	content: ''; display: block;
	width: var(--dvf-wide); margin: 0 auto 30px; height: 1px;
	background: linear-gradient(90deg, transparent, var(--dvf-footer-line) 20%, var(--dvf-footer-line) 80%, transparent);
	transition: background 0.7s ease;
}
.dvf-footer p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
	.dvf-article-hero { grid-template-columns: 1fr; }
	.dvf-article-card { border-radius: 28px 28px 0 0; }
	.dvf-article-img { border-radius: 0 0 28px 28px; }
	.dvf-article-img img { min-height: 0; aspect-ratio: 16 / 10; height: auto; max-height: none; }
	/* The 120px top padding clears a desktop nav; the mobile bar plus its
	   gradient ribbon is only ~62px, so it was overshooting. 100vh is also the
	   LARGE viewport height on phones — taller than what you can actually see —
	   and the leftover height splits evenly above and below the centred card,
	   which is where the rest of the gap came from. svh is the visible height. */
	.dvf-hero { min-height: 100vh; min-height: 100svh; padding-top: 88px; padding-bottom: 60px; }
	.dvf-hero-inner { grid-template-columns: 1fr; }
	.dvf-hero-card { padding: 42px 30px; align-items: center; text-align: center; }
	.dvf-hero-card h1 { text-align: center; }
	.dvf-rule { margin-left: auto; margin-right: auto; }
	.dvf-cta-row { justify-content: center; }
	.dvf-carousel { width: 100%; aspect-ratio: 4 / 3; }
	.dvf-cap { padding: 28px 90px 16px 20px; }
	.dvf-about { grid-template-columns: 1fr; justify-items: start; padding: 36px 30px; gap: 26px; }
	.dvf-about-media { width: 100%; min-height: 180px; }
	.dvf-avatar { width: 170px; height: 170px; }
	.dvf-feat { grid-template-columns: 1fr; gap: 22px; padding: 30px 28px; }

	.dvf-post-hero { grid-template-columns: 1fr; }
	.dvf-post-hero-img { width: 100%; }
	.dvf-nav .wp-block-search { display: none; }
	.dvf-nav .wp-block-navigation { margin-left: auto; }
}
@media (max-width: 520px) {
	.dvf-hero-card { padding: 36px 22px; }
	.dvf-recog-grid { grid-template-columns: 1fr; }
	.dvf-recog { padding: 26px 26px 28px; }
	.dvf-stat { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
	.dvf-reveal { opacity: 1; transform: none; }
}

/* WP flow-layout margin resets inside custom grids */
.dvf-about > *, .dvf-hero-inner > *, .dvf-recog-grid > *,
.dvf-cards .wp-block-post-template > *, .dvf-card > *, .dvf-card-body > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.dvf-card-body > .wp-block-post-excerpt { display: flex; flex-direction: column; flex: 1; }

/* =========================================================
   Legacy compatibility (v1 markup saved in your site content)
   Templates/pages saved with the old patterns keep working and
   pick up the new look until you refresh them with v2 patterns.
   ========================================================= */
.dvf-scroll-hint { display: none; }

/* old carousel captions + badges */
.dvf-caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
	padding: 36px 110px 20px 24px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
	transition: background 0.7s ease;
}
.dvf-caption h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: #2c3350; margin: 0; transition: color 0.7s ease; }
html[data-theme='night'] .dvf-caption { background: linear-gradient(180deg, transparent, rgba(10, 14, 40, 0.5)); }
html[data-theme='night'] .dvf-caption h3 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 10, 0.5); }
.dvf-carousel .dvf-badge { display: none; }

/* old about layout (profile + panel) */
.dvf-about:has(.dvf-profile) { grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; padding: 24px; }
.dvf-profile { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
.dvf-profile h2 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; margin: 0; }
.dvf-profile p { font-size: 15px; line-height: 1.75; color: var(--dvf-ink-soft); margin: 0; }
.dvf-profile .dvf-avatar { width: 150px; height: 150px; font-size: 44px; }
.dvf-listening { width: 100%; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--dvf-glass-border); transition: border-color 0.7s ease; }
.dvf-listening .dvf-lbl { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dvf-ink-faint); transition: color 0.7s ease; }
.dvf-listening iframe { border-radius: 16px; margin-top: 10px; width: 100%; max-width: 100%; min-width: 0; display: block; }

/* old recognitions panel, banner and tiles */
.dvf-panel {
	border-radius: 24px; padding: 22px; overflow: hidden;
	background: linear-gradient(160deg, rgba(213, 237, 254, 0.5), rgba(231, 232, 253, 0.65));
	border: 1px solid var(--dvf-glass-border);
	transition: var(--dvf-t);
}
html[data-theme='night'] .dvf-panel { background: linear-gradient(160deg, rgba(22, 41, 77, 0.5), rgba(38, 42, 94, 0.55)); }
.dvf-panel::after { content: none; }
.dvf-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	border-radius: 20px; padding: 24px 28px; margin-bottom: 14px;
	background: var(--dvf-grad);
	border: 1px solid var(--dvf-glass-border);
	transition: background 1s ease, border-color 0.7s ease;
}
.dvf-banner .dvf-big { font-size: 28px; }
.dvf-banner h4 { font-size: 15.5px; font-weight: 600; margin: 4px 0 0; }
.dvf-medal {
	width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
	background: var(--dvf-glass-strong); border: 1px solid var(--dvf-glass-border);
	display: flex; align-items: center; justify-content: center; color: var(--dvf-peri-deep);
	transition: var(--dvf-t);
}
.dvf-medal svg { width: 32px; height: 32px; }
.dvf-badge {
	display: inline-flex; align-items: center;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
	transition: color 0.7s ease;
}
.dvf-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.dvf-tile {
	border-radius: 22px; padding: 26px 26px 28px;
	background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	box-shadow: 0 4px 16px rgba(70, 90, 140, 0.05);
	transition: var(--dvf-t), transform 0.3s ease;
}
.dvf-tile:hover { transform: translateY(-4px); box-shadow: var(--dvf-hover-shadow); }
.dvf-tile h4 { font-size: 17px; font-weight: 600; margin: 12px 0 0; line-height: 1.4; }
.dvf-big { font-size: 30px; font-weight: 600; line-height: 1; color: var(--dvf-peri-deep); transition: color 0.7s ease; }
.dvf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dvf-chip { display: none; }
.dvf-bento > *, .dvf-panel > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
@media (max-width: 960px) {
	.dvf-about:has(.dvf-profile) { grid-template-columns: 1fr; }
}

/* ---------- B2VB tip post (slide deck layout) ---------- */
/* One continuous light shell holds the whole post, so the title card,
   slide stage and thumbnails read as one object instead of floating. */
.dvf-tip-shell {
	--dvf-tip-pad: clamp(16px, 2vw, 26px);
	width: var(--dvf-wide); margin: 132px auto 0;
	padding: 0;
	background: none; border: 0; box-shadow: none;
	border-radius: 0; overflow: visible;
	transition: var(--dvf-t);
}
.dvf-tip-card {
	border-radius: 22px; padding: clamp(28px, 3vw, 42px) clamp(22px, 3vw, 48px);
	background: var(--dvf-glass); text-align: center;
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-tip-cat {
	font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
}
.dvf-tip-cat a {
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	letter-spacing: inherit; text-transform: inherit;
	color: inherit; text-decoration: none; transition: color 0.7s ease;
}
.dvf-tip-cat { margin: 0 0 12px !important; }
.dvf-tip-card .wp-block-post-title {
	font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.2; margin: 0;
}
.dvf-tip-card .wp-block-post-excerpt { margin: 14px 0 0 !important; }
.dvf-tip-card p, .dvf-tip-card .wp-block-post-excerpt__excerpt {
	font-size: 16px; line-height: 1.7; color: var(--dvf-ink-soft);
	max-width: 760px; margin-left: auto; margin-right: auto; transition: color 0.7s ease;
}
.dvf-tip-card p:empty { display: none; }
.dvf-tip-body { width: 100%; margin: var(--dvf-tip-pad, 22px) 0 0; }
.dvf-tip-body > .wp-block-post-content { margin: 0; }
.dvf-tip-body p, .dvf-tip-body li { font-size: 17px; line-height: 1.85; color: var(--dvf-ink); }
.dvf-tip-body a { color: var(--dvf-peri-deep); }
/* free text typed into the post sits on the shell, so keep it readable */
.dvf-tip-body > .wp-block-post-content > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* stage: the big slide viewer built from the post's gallery */
.dvf-tip-stage {
	position: relative;
	margin: var(--dvf-tip-pad, 22px) 0 0;
	max-width: none; width: auto;
	border-radius: 22px;
	padding: clamp(22px, 2.6vw, 40px) clamp(48px, 6vw, 92px);
	background: var(--dvf-glass-strong);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	display: flex; align-items: center; justify-content: center;
	transition: var(--dvf-t);
}
.dvf-tip-frame {
	background: var(--dvf-card); border-radius: 14px; overflow: hidden;
	box-shadow: 0 12px 36px rgba(70, 90, 140, 0.14);
	max-width: 100%; transition: var(--dvf-t);
}
html[data-theme='night'] .dvf-tip-frame { box-shadow: 0 12px 36px rgba(3, 5, 20, 0.45); }
.dvf-tip-frame img {
	display: block; width: auto; max-width: 100%;
	max-height: min(72vh, 860px); object-fit: contain; border-radius: 0;
	box-shadow: none;
}
.dvf-tip-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--dvf-glass-strong); color: var(--dvf-ink-soft);
	backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; line-height: 1; transition: var(--dvf-t), transform 0.25s ease;
}
.dvf-tip-arrow:hover { transform: translateY(-50%) scale(1.08); color: var(--dvf-peri-deep); }
.dvf-tip-arrow.is-prev { left: clamp(8px, 1.5vw, 22px); }
.dvf-tip-arrow.is-next { right: clamp(8px, 1.5vw, 22px); }
.dvf-tip-count {
	position: absolute; bottom: clamp(12px, 1.6vw, 22px); right: clamp(16px, 2vw, 28px);
	font-size: 13px; color: var(--dvf-ink-faint); letter-spacing: 0.08em;
	transition: color 0.7s ease;
}

/* thumbnails panel */
.dvf-tip-thumbs-panel {
	margin: var(--dvf-tip-pad, 22px) 0 0; border-radius: 22px;
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--dvf-glass);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid var(--dvf-glass-border);
	box-shadow: var(--dvf-glass-shadow);
	transition: var(--dvf-t);
}
.dvf-tip-thumbs-title {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--dvf-peri-deep);
	margin: 0 0 6px; padding-bottom: 14px;
	border-bottom: 1px solid var(--dvf-glass-border); transition: var(--dvf-t);
}
.dvf-tip-thumbs-panel .wp-block-gallery { margin: 18px 0 0 !important; gap: 14px; }
.dvf-tip-thumbs-panel .wp-block-gallery figure.wp-block-image { cursor: pointer; }
.dvf-tip-thumbs-panel .wp-block-gallery img {
	border-radius: 8px; box-shadow: 0 4px 16px rgba(70, 90, 140, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.dvf-tip-thumbs-panel .wp-block-gallery figure.wp-block-image:hover img { transform: translateY(-3px); }
.dvf-tip-thumbs-panel .wp-block-gallery figure.is-current img {
	box-shadow: 0 0 0 2px var(--dvf-peri), 0 6px 20px rgba(70, 90, 140, 0.16);
}

/* share row */
.dvf-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(24px, 3vw, 34px) 0 6px; }
.dvf-share-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
	font-size: 14px; font-weight: 500; text-decoration: none;
	color: var(--dvf-ink); background: var(--dvf-card);
	border: 1px solid var(--dvf-card-border);
	transition: var(--dvf-t), transform 0.25s ease;
}
.dvf-share-btn:hover { transform: translateY(-2px); color: var(--dvf-peri-deep); }
.dvf-share-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dvf-share-btn.is-copied { color: var(--dvf-peri-deep); border-color: var(--dvf-peri); }
.dvf-tip-body .dvf-article-tags { justify-content: center; }

@media (max-width: 760px) {
	.dvf-tip-stage { padding: 18px 14px 44px; }
	.dvf-tip-arrow { width: 38px; height: 38px; }
	.dvf-tip-arrow.is-prev { left: 6px; }
	.dvf-tip-arrow.is-next { right: 6px; }
	.dvf-tip-frame img { max-height: 56vh; }
}

/* ---------- typography lock ----------
   WordPress global styles (theme.json elements.heading) load with higher
   specificity inside the editor than plain class rules, which made headings
   render heavier in the editor than on the live site. These :root-prefixed
   rules win in both places, so what you see while editing is what ships. */
:root .dvf-hero-card h1 { font-weight: 600; }
:root .dvf-big-head, :root .dvf-section-title { font-weight: 400; }
:root .dvf-card .wp-block-post-title { font-weight: 500; }
:root .dvf-page-hero-card h1,
:root .dvf-page-hero-card .wp-block-post-title,
:root .dvf-article-card .wp-block-post-title,
:root .dvf-tip-card .wp-block-post-title { font-weight: 700; }
:root .dvf-article h2, :root .dvf-article h3 { font-weight: 700; }
:root .dvf-script { font-weight: 400; }
:root h1, :root h2, :root h3, :root h4, :root .wp-block-post-title {
	font-optical-sizing: none;
	font-variation-settings: 'opsz' 18;
}