/* MoxKit custom-heading widget. */
.moxkit-xh-title{
	--moxkit-xh-g1:#635bff;
	--moxkit-xh-g2:#ec4899;
	--moxkit-xh-ga:110deg;
	margin:0 0 20px;
	font-size:clamp(32px,4.4vw,60px);
	font-weight:750;
	line-height:1.12;
	letter-spacing:-.03em;
	color:var(--moxkit-ink);
}
.moxkit-xh-link{color:inherit;text-decoration:none}
/* The inner span is as wide as the text, so a heading-wide fill spans the words, not the column. */
.moxkit-xh-inner{position:relative;display:inline-block;max-width:100%;vertical-align:top}
.moxkit-xh-part.is-owner{position:relative}
.moxkit-xh-part.is-boxed{display:inline-block}
.moxkit-xh-part.is-image{
	display:inline-block;
	margin-inline:var(--moxkit-xh-img-gap, .08em);
	vertical-align:var(--moxkit-xh-img-align, middle);
	line-height:0;
}
.moxkit-xh-img{
	display:inline-block;
	width:var(--moxkit-xh-img-w, auto);
	max-width:none;
	height:var(--moxkit-xh-img-h, .9em);
	border-radius:var(--moxkit-xh-img-r, .25em);
	object-fit:cover;
	vertical-align:top;
}
/* Fills. A filled element paints its background through its letters; animated pieces inside get
   the same picture, offset to their place, from widgets.js (layoutFill). */
.moxkit-xh-fill--gradient{--moxkit-xh-bg:linear-gradient(var(--moxkit-xh-ga),var(--moxkit-xh-g1),var(--moxkit-xh-g2))}
.moxkit-xh-fill--image{--moxkit-xh-bg:var(--moxkit-xh-img, linear-gradient(var(--moxkit-xh-ga),var(--moxkit-xh-g1),var(--moxkit-xh-g2)))}
.moxkit-xh-fill--gradient,.moxkit-xh-fill--image,.moxkit-xh-is-shine{
	background-image:var(--moxkit-xh-bg);
	background-size:var(--moxkit-xh-size, cover);
	background-position:var(--moxkit-xh-pos, center);
	background-repeat:no-repeat;
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}
.moxkit-xh-fill--gradient{background-size:100% 100%}
.moxkit-xh-fill--outline{
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:var(--moxkit-xh-stroke, 1.5px) var(--moxkit-xh-stroke-color, currentColor);
}
/* A part with its own solid color inside a filled heading shows that color again. */
.moxkit-xh-fill--solid{-webkit-text-fill-color:currentColor;background:none;-webkit-text-stroke:0}
.moxkit-xh :is(.moxkit-xh-fill--gradient,.moxkit-xh-fill--image,.moxkit-xh-is-shine).is-split-fill{background-image:none}
.moxkit-xh .has-fill{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-repeat:no-repeat}
/* Light sweep: the text color with a bright band, moved by the flow animation. */
.moxkit-xh-is-shine{
	--moxkit-xh-bg:linear-gradient(110deg,currentColor 40%,var(--moxkit-xh-shine, rgba(255,255,255,.95)) 50%,currentColor 60%);
	background-size:250% 100%;
	background-repeat:repeat-x;
}
/* Markers sit behind the letters (a pseudo element under the text, inside the widget's own
   stacking context), so they never cover a gradient or image fill. */
.moxkit-xh{isolation:isolate}
.moxkit-xh-mark{position:relative;display:inline-block}
.moxkit-xh-mark::before{
	content:"";
	position:absolute;
	z-index:-1;
	left:calc(-1 * var(--moxkit-xh-mark-x, .04em));
	right:calc(-1 * var(--moxkit-xh-mark-x, .04em));
	pointer-events:none;
	background:var(--moxkit-xh-marker, #fde68a);
	transform-origin:0 50%;
}
/* Height, distance from the bottom and corner radius come from the part's Marker settings. */
.moxkit-xh-mark.has-marker-highlight::before{
	bottom:var(--moxkit-xh-mark-y, 6%);
	height:var(--moxkit-xh-mark-h, 42%);
	border-radius:var(--moxkit-xh-mark-r, .08em);
}
.moxkit-xh-mark.has-marker-underline::before{
	bottom:var(--moxkit-xh-mark-y, 2%);
	height:var(--moxkit-xh-mark-h, .08em);
	border-radius:var(--moxkit-xh-mark-r, 0);
	background:var(--moxkit-xh-marker, currentColor);
}
.moxkit-xh-mark.has-marker-bar::before{
	bottom:var(--moxkit-xh-mark-y, .1em);
	height:var(--moxkit-xh-mark-h, .22em);
	border-radius:var(--moxkit-xh-mark-r, 0);
	background:var(--moxkit-xh-marker, var(--moxkit-accent));
}
.moxkit-xh-mark.has-marker-brush::before{
	left:calc(-1 * var(--moxkit-xh-mark-x, 0em));
	right:calc(-1 * var(--moxkit-xh-mark-x, 0em));
	bottom:var(--moxkit-xh-mark-y, -.12em);
	height:var(--moxkit-xh-mark-h, .16em);
	background:var(--moxkit-xh-marker, #ffe234);
	-webkit-mask:var(--moxkit-xh-brush) 0 0/100% 100% no-repeat;
	mask:var(--moxkit-xh-brush) 0 0/100% 100% no-repeat;
}
/* The bar and the brush are placed from the baseline: the marker box is one line tall, so its bottom sits
   half a line minus about .35em (half the font's ascent minus descent) below the baseline, whatever the line height. */
@supports (bottom:1lh){
.moxkit-xh-mark.has-marker-bar::before{bottom:var(--moxkit-xh-mark-y, calc(.5lh - .48em))}
.moxkit-xh-mark.has-marker-brush::before{bottom:var(--moxkit-xh-mark-y, calc(.5lh - .72em))}
}
/* Brush shapes are stretched to the word and revealed with a clip, not squashed. The chosen shape comes from
   the markup (style attribute); this one is the fallback. */
.moxkit-xh-mark.has-marker-brush{--moxkit-xh-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 133 7' preserveAspectRatio='none'%3E%3Cpath d='m74.2 1.3c.6.1 1.2.1 1.8 0c2.2-.3 4.2-1.5 7-1.3c3.5.3 4.1 1.4 8.2 1.2c4-.3 8.1.5 9.9 0c1.8-.4 2 1 4.6.7c2.6-.3 4.2-.2 6.4.3c2.3.4 9.2.8 11.7.3c2.5-.6 5.4.3 7.2.6c.5 0 .9.1 1.2.2c.2.1.2.2.2.3c0 0 0 0 0 0c0 .1-.1.2-.2.2c-.9 0-2.2.2-3.7.6c-2.8.7-3.1-.1-6.9.3c-3.9.4-6.2 1.1-10.7.6c-4.4-.4-5.5 1.6-11.8.4c-6.4-1.1-7 1-13.4 1.3c-3 .1-6.5-.1-9.7-.4c-3.4-.2-6.4-.6-8.4-.5c-3.8 0-8.9.2-14.2 0c-.3 0-.5 0-.7 0c-5.3-.2-11.7.5-17.4.1c-5.9-.5-14.4-1-18.3-1.4c-2.5-.2-3.7-.3-5.3-.3c-.9 0-1.9 0-3.3.2c-2.1.1-5.1 0-7.6-.5c-1.2-.3-1-.7.3-.8c1.8-.3 3.4-.2 4.3-.7c1.9-.9 2.7-1.3 5.2-.8c.4.1.7.2 1.1.2c1.7 0 2.6-.9 3.8-.8c1.4.1 1.4.9 8.5.2c7.2-.6 11.1-.8 13.8-1c2.7-.1 8.4.5 12.8.2c.6 0 1.3-.1 2-.1c4.8-.2 11.9 0 15.1-.3c3.6-.3 3.6.5 6.5 1z'/%3E%3C/svg%3E")}
/* "With the heading entrance": draws in once the heading's entrance has started. */
.moxkit-xh.is-armed .moxkit-xh-mark:not([data-draw])::before{transform:scaleX(0)}
.moxkit-xh.is-in .moxkit-xh-mark:not([data-draw])::before{
	transform:none;
	transition-property:transform,clip-path;
	transition-duration:var(--moxkit-xh-mark-dur, calc(var(--moxkit-xh-dur, 700ms) * 1.2));
	transition-timing-function:cubic-bezier(.65,0,.35,1);
	transition-delay:var(--moxkit-xh-mark-delay, calc(var(--moxkit-xh-dur, 700ms) * .6));
}
.moxkit-xh.is-armed .moxkit-xh-mark.has-marker-brush:not([data-draw])::before{transform:none;clip-path:inset(0 100% 0 0)}
.moxkit-xh.is-in .moxkit-xh-mark.has-marker-brush:not([data-draw])::before{clip-path:inset(0)}
/* Its own draw-in: widgets.js arms the marker and plays it when the heading scrolls into view. */
.moxkit-xh-mark[data-draw=right]::before{transform-origin:100% 50%}
.moxkit-xh-mark[data-draw=center]::before{transform-origin:50% 50%}
.moxkit-xh-mark.is-mark-armed::before{transform:scaleX(0)}
.moxkit-xh-mark.is-mark-armed.is-mark-in::before{
	transform:none;
	transition-property:transform,clip-path;
	transition-duration:var(--moxkit-xh-mark-dur, 1000ms);
	transition-timing-function:cubic-bezier(.165,.84,.44,1);
	transition-delay:var(--moxkit-xh-mark-delay, 300ms);
}
.moxkit-xh-mark.has-marker-brush.is-mark-armed::before{transform:none;clip-path:inset(0 100% 0 0)}
.moxkit-xh-mark.has-marker-brush.is-mark-armed[data-draw=right]::before{clip-path:inset(0 0 0 100%)}
.moxkit-xh-mark.has-marker-brush.is-mark-armed[data-draw=center]::before{clip-path:inset(0 50%)}
.moxkit-xh-mark.has-marker-brush.is-mark-armed.is-mark-in::before{clip-path:inset(0)}
/* Pieces made by widgets.js. */
.moxkit-xh-piece{display:inline-block}
.moxkit-xh-inner.moxkit-xh-piece{display:inline-block}
.moxkit-xh-word{display:inline-block;white-space:nowrap}
.moxkit-xh-clip{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
/* Entrance. */
.moxkit-xh.is-armed:not(.is-in) .moxkit-xh-piece{opacity:0}
.moxkit-xh.is-in .moxkit-xh-piece{
	animation:var(--moxkit-xh-kf, moxkit-xh-fade-up) var(--moxkit-xh-dur, 700ms) cubic-bezier(.2,.8,.2,1) both;
	animation-delay:calc(var(--moxkit-xh-i, 0) * var(--moxkit-xh-stagger, 90ms) + var(--moxkit-xh-delay, 0ms));
}
.moxkit-xh-piece[data-fx=fade-up]{--moxkit-xh-kf:moxkit-xh-fade-up}
.moxkit-xh-piece[data-fx=fade-down]{--moxkit-xh-kf:moxkit-xh-fade-down}
.moxkit-xh-piece[data-fx=blur]{--moxkit-xh-kf:moxkit-xh-blur}
.moxkit-xh-piece[data-fx=zoom]{--moxkit-xh-kf:moxkit-xh-zoom}
.moxkit-xh-piece[data-fx=flip]{--moxkit-xh-kf:moxkit-xh-flip;transform-origin:50% 100%}
.moxkit-xh-piece[data-fx=slide-left]{--moxkit-xh-kf:moxkit-xh-slide-left}
.moxkit-xh-piece[data-fx=slide-right]{--moxkit-xh-kf:moxkit-xh-slide-right}
.moxkit-xh-piece[data-fx=rotate]{--moxkit-xh-kf:moxkit-xh-rotate;transform-origin:0 100%}
.moxkit-xh-piece[data-fx=bounce]{--moxkit-xh-kf:moxkit-xh-bounce}
.moxkit-xh-piece[data-fx=drop]{--moxkit-xh-kf:moxkit-xh-drop}
.moxkit-xh-piece[data-fx=reveal]{--moxkit-xh-kf:moxkit-xh-reveal}
.moxkit-xh-piece[data-fx=none]{--moxkit-xh-kf:moxkit-xh-none}
/* Typewriter: each letter appears in turn, carrying the caret until the next one arrives. */
.moxkit-xh-piece[data-fx=type]{--moxkit-xh-kf:moxkit-xh-type}
.moxkit-xh.is-in .moxkit-xh-piece[data-fx=type]{animation-duration:var(--moxkit-xh-stagger, 90ms);animation-timing-function:linear}
.moxkit-xh.is-typed .moxkit-xh-inner::after{
	content:"";
	display:inline-block;
	width:.06em;
	height:.9em;
	margin-inline-start:.05em;
	vertical-align:-.08em;
	background:currentColor;
	animation:moxkit-xh-caret 1s steps(1) infinite;
}
@keyframes moxkit-xh-none{from{opacity:1}to{opacity:1}}
@keyframes moxkit-xh-fade-up{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-fade-down{from{opacity:0;transform:translateY(-.6em)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-blur{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:none}}
@keyframes moxkit-xh-zoom{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-flip{from{opacity:0;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-slide-left{from{opacity:0;transform:translateX(1.2em)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-slide-right{from{opacity:0;transform:translateX(-1.2em)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-rotate{from{opacity:0;transform:rotate(-14deg) translateY(.4em)}to{opacity:1;transform:none}}
@keyframes moxkit-xh-bounce{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.12)}75%{transform:scale(.95)}100%{opacity:1;transform:none}}
@keyframes moxkit-xh-drop{0%{opacity:0;transform:translateY(-1.4em)}60%{opacity:1;transform:translateY(.12em)}80%{transform:translateY(-.05em)}100%{opacity:1;transform:none}}
@keyframes moxkit-xh-reveal{from{transform:translateY(110%)}to{transform:none}}
@keyframes moxkit-xh-type{0%{opacity:0}1%,99%{opacity:1;box-shadow:.06em 0 0 0 currentColor}100%{opacity:1;box-shadow:none}}
@keyframes moxkit-xh-caret{50%{opacity:0}}
/* Looping effects, started by widgets.js once the entrance has finished. */
.moxkit-xh.is-done .is-loop-float{animation:moxkit-xh-float var(--moxkit-xh-loop, 3s) ease-in-out infinite}
.moxkit-xh.is-done .is-loop-pulse{animation:moxkit-xh-pulse var(--moxkit-xh-loop, 3s) ease-in-out infinite}
.moxkit-xh.is-done .is-loop-wiggle{animation:moxkit-xh-wiggle var(--moxkit-xh-loop, 3s) ease-in-out infinite}
.moxkit-xh.is-done .is-loop-spin{animation:moxkit-xh-spin var(--moxkit-xh-loop, 3s) linear infinite}
.moxkit-xh.is-done .is-loop-wave{
	animation:moxkit-xh-wave var(--moxkit-xh-loop, 3s) ease-in-out infinite;
	animation-delay:calc(var(--moxkit-xh-w, 0) * var(--moxkit-xh-loop, 3s) / -12);
}
.moxkit-xh.is-done .is-loop-flow{animation:moxkit-xh-flow var(--moxkit-xh-loop, 3s) linear infinite}
@property --moxkit-xh-shift{syntax:'<length>';inherits:true;initial-value:0px}
@keyframes moxkit-xh-float{50%{transform:translateY(-.12em)}}
@keyframes moxkit-xh-pulse{50%{transform:scale(1.06)}}
@keyframes moxkit-xh-wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes moxkit-xh-spin{to{transform:rotate(360deg)}}
@keyframes moxkit-xh-wave{0%,60%,100%{transform:none}30%{transform:translateY(-.22em)}}
@keyframes moxkit-xh-flow{from{--moxkit-xh-shift:0px}to{--moxkit-xh-shift:var(--moxkit-xh-flow-w, 400px)}}
.moxkit-xh-fill--gradient.is-loop-flow,.moxkit-xh-fill--image.is-loop-flow,.moxkit-xh-is-shine.is-loop-flow{
	background-repeat:repeat-x;
	background-position:calc(var(--moxkit-xh-flow-x, 0px) + var(--moxkit-xh-shift)) var(--moxkit-xh-flow-y, 50%);
}
.moxkit-xh-fill--gradient.is-loop-flow{--moxkit-xh-bg:linear-gradient(90deg,var(--moxkit-xh-g1),var(--moxkit-xh-g2),var(--moxkit-xh-g1))}
@media(prefers-reduced-motion:reduce){.moxkit-xh *,.moxkit-xh *::after{animation:none!important;transition:none!important}.moxkit-xh .moxkit-xh-piece{opacity:1!important}}
