/* Avando AVE — zusammengefasst aus tokens.css, base.css, layout.css, typography.css, forms.css, components.css, navigation.css, icons.css, animations.css.
 * Automatisch erzeugt von `ave:css:build`; nicht von Hand bearbeiten.
 * Die Quellen mit der vollständigen Begründungsprosa liegen daneben. */

@layer av.normalize, av.tokens, av.base, av.typography, av.components, av.forms, av.theme, av.layout, av.animations;
@layer av.tokens {
:root {
color-scheme: light dark;
--av-theme-switch-display: none;
--av-color-primary:            var(--indigo-8);
--av-color-primary-light:      light-dark(var(--indigo-3), var(--indigo-9));
--av-color-primary-dark:       light-dark(var(--indigo-9), var(--indigo-2));
--av-on-light-cap:             0.154;
--av-color-primary-on-dark:    oklch(from var(--av-color-primary) clamp(0.72, l, 1) c h);
--av-color-primary-on-light:   color(from var(--av-color-primary) srgb-linear
calc(r * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b)))
calc(g * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b)))
calc(b * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b))));
--av-color-primary-text:       light-dark(
var(--av-color-primary-on-light),
var(--av-color-primary-on-dark));
--av-color-text-on-primary:    color(from var(--av-color-primary) srgb-linear
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
--av-color-text-on-secondary:  color(from var(--av-color-secondary) srgb-linear
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
--av-sec-hue-shift: -60;
--av-sec-chroma:    0.8;
--av-color-secondary:          oklch(from var(--av-color-primary)       l calc(c * var(--av-sec-chroma)) calc(h + var(--av-sec-hue-shift)));
--av-color-secondary-light:    oklch(from var(--av-color-primary-light) l calc(c * var(--av-sec-chroma)) calc(h + var(--av-sec-hue-shift)));
--av-color-secondary-dark:     oklch(from var(--av-color-primary-dark)  l calc(c * var(--av-sec-chroma)) calc(h + var(--av-sec-hue-shift)));
--av-color-secondary-on-dark:  oklch(from var(--av-color-secondary) clamp(0.72, l, 1) c h);
--av-color-secondary-on-light: color(from var(--av-color-secondary) srgb-linear
calc(r * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b)))
calc(g * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b)))
calc(b * min(1, var(--av-on-light-cap) / (0.2126 * r + 0.7152 * g + 0.0722 * b))));
--av-color-secondary-text:     light-dark(
var(--av-color-secondary-on-light),
var(--av-color-secondary-on-dark));
--av-color-surface:   light-dark(var(--gray-0), var(--gray-9));
--av-color-surface-2: light-dark(
oklch(from var(--av-color-surface) calc(l - 0.019) c h),
oklch(from var(--av-color-surface) 0.345 c h));
--av-color-surface-3: light-dark(
oklch(from var(--av-color-surface) calc(l - 0.040) c h),
oklch(from var(--av-color-surface) 0.428 c h));
--av-color-border:    light-dark(var(--gray-3), var(--gray-7));
--av-gradient-angle:     135deg;
--av-gradient-dark-from: #0b1120;   
--av-gradient-dark-to:   #334155;   
--av-img-border-width: 2px;
--av-img-border-color: var(--av-color-primary-text);
--av-card-bg-1: var(--indigo-1);
--av-card-bg-2: var(--indigo-3);
--av-card-bg-3: var(--indigo-5);
--av-card-bg-4: var(--indigo-8);
--av-color-text:       light-dark(var(--gray-9), var(--gray-1));
--av-muted-fraction:   55%;
--av-color-text-muted: color-mix(in oklch, var(--av-color-text) var(--av-muted-fraction), var(--av-color-surface));
--av-focus: light-dark(
oklch(from var(--av-color-primary) min(l, 0.6) c h),
oklch(from var(--av-color-primary) max(l, 0.6) c h)
);
--av-muted-strength: min(100%, calc(var(--av-muted-fraction) + 17%));
--av-muted-strength-inv: calc(var(--av-muted-strength) - 7%);
--av-link:          var(--av-color-primary-text);
--av-link-hover:    light-dark(
color-mix(in oklch, var(--av-color-primary-on-light), black 22%),
color-mix(in oklch, var(--av-color-primary-on-dark), white 22%));
--av-link-underline:       none;
--av-link-underline-hover: underline;
--av-link-underline-style-hover: solid;
--av-link-thickness-hover:       1px;
--av-link-mark:                  transparent;
--av-link-mark-size:             0% 0%;
--av-link-mark-size-hover:       0% 0%;
--av-link-hover-ink:             var(--av-link-hover);
--av-link-pad:                   0;
--av-link-block:                 var(--av-link);
--av-color-heading: currentColor;
--av-color-success: var(--green-6);
--av-color-warning: var(--yellow-5);
--av-color-error:   var(--red-6);
--av-color-info:    var(--blue-5);
--av-color-success-text: light-dark(
oklch(from var(--av-color-success) clamp(0, l, 0.48) c h),
oklch(from var(--av-color-success) clamp(0.76, l, 1) c h));
--av-color-warning-text: light-dark(
oklch(from var(--av-color-warning) clamp(0, l, 0.48) c h),
oklch(from var(--av-color-warning) clamp(0.76, l, 1) c h));
--av-color-error-text: light-dark(
oklch(from var(--av-color-error) clamp(0, l, 0.48) c h),
oklch(from var(--av-color-error) clamp(0.76, l, 1) c h));
--av-color-info-text: light-dark(
oklch(from var(--av-color-info) clamp(0, l, 0.48) c h),
oklch(from var(--av-color-info) clamp(0.76, l, 1) c h));
--av-color-highlight: var(--yellow-3);
--av-font-sans:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji';
--av-font-serif:
Georgia, 'Times New Roman', Times, serif;
--av-font-mono:
ui-monospace, 'Cascadia Code', 'Source Code Pro',
Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--av-font-display: var(--av-font-sans);
--av-text-scale:    1;
--av-heading-scale: 1;
--av-lead-scale:    1;
--av-text-display-1: calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(3rem,    5vw + 1rem,   5.5rem)));
--av-text-display-2: calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(2.25rem, 4vw + .75rem, 4rem)));
--av-text-display-3: calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(1.75rem, 3vw + .5rem,  3rem)));
--av-text-xs:   calc(var(--av-text-scale) * (0.75rem));
--av-text-sm:   calc(var(--av-text-scale) * (0.875rem));
--av-text-base: calc(var(--av-text-scale) * (clamp(1rem,   0.925rem + 0.375vw, 1.125rem)));
--av-text-md:   calc(var(--av-text-scale) * (clamp(1.125rem, 1rem + 0.625vw, 1.375rem)));
--av-text-lg:   calc(var(--av-text-scale) * var(--av-lead-scale)    * (clamp(1.25rem, 2vw + .5rem,   1.875rem)));
--av-text-xl:   calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(1.5rem,  2.5vw + .5rem, 2.25rem)));
--av-text-2xl:  calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(1.75rem, 3vw + .5rem,   3rem)));
--av-text-3xl:  calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(2rem,    4vw + .5rem,   3.75rem)));
--av-text-4xl:  calc(var(--av-text-scale) * var(--av-heading-scale) * (clamp(2.25rem, 5vw + .5rem,   4.5rem)));
--av-heading-transform: none;
--av-display-transform: none;
--av-leading-none:    1;
--av-leading-display: 1.05;
--av-leading-tight:   1.2;
--av-leading-snug:    1.35;
--av-leading-body:    1.6;
--av-leading-loose:   1.8;
--av-tracking-tight:  -.03em;
--av-tracking-normal: 0;
--av-tracking-wide:   .04em;
--av-tracking-widest: .1em;
--av-weight-light:  300;
--av-weight-normal: 400;
--av-weight-medium: 500;
--av-weight-semi:   600;
--av-weight-bold:   700;
--av-weight-extra:  800;
--av-weight-black:  900;
--av-heading-weight: var(--av-weight-bold);
--av-body-weight:    var(--av-weight-normal);
--av-prose-width: 68ch;
--av-heading-measure: none;
--av-heading-measure-on: 40ch;   
--av-space-scale: 1;
--av-space-2xs: calc(var(--av-space-scale) * var(--size-1));
--av-space-xs:  calc(var(--av-space-scale) * var(--size-2));
--av-space-sm:  calc(var(--av-space-scale) * var(--size-3));
--av-space-md:  calc(var(--av-space-scale) * var(--size-5));
--av-space-lg:  calc(var(--av-space-scale) * var(--size-7));
--av-space-xl:  calc(var(--av-space-scale) * var(--size-9));
--av-space-2xl: calc(var(--av-space-scale) * var(--size-11));
--av-space-3xl: calc(var(--av-space-scale) * var(--size-13));
--av-container-sm:  640px;
--av-container-md:  768px;
--av-container-lg:  1024px;
--av-container-xl:  1280px;
--av-container-2xl: 1440px;
--av-container:     var(--av-container-xl);
--av-gutter:        var(--av-space-md);
--av-layout-gap-scale: 1;
--av-bg-overlay-scale: 1;
--av-radius-scale: 1;
--av-radius-sm:   calc(var(--radius-2) * var(--av-radius-scale));
--av-radius-md:   calc(var(--radius-3) * var(--av-radius-scale));
--av-radius-lg:   calc(var(--radius-4) * var(--av-radius-scale));
--av-radius-xl:   calc(var(--radius-5) * var(--av-radius-scale));
--av-radius-full: var(--radius-round);
--av-border-width: 1px;
--av-border:      var(--av-border-width) solid var(--av-color-border);
--av-shadow-sm: var(--shadow-1);
--av-shadow-md: var(--shadow-3);
--av-shadow-lg: var(--shadow-5);
--av-color-dark-surface:    var(--gray-9);
--av-color-on-dark-surface: color(from var(--av-color-dark-surface) srgb-linear
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
--av-btn-shadow-rest:  none;
--av-btn-shadow-hover: none;
--av-btn-shadow-sm: 0  2px  4px oklch(0% 0 0 / calc(18% * var(--av-shadow-scale)));
--av-btn-shadow-md: 0  5px 14px oklch(0% 0 0 / calc(28% * var(--av-shadow-scale)));
--av-btn-shadow-lg: 0 10px 28px oklch(0% 0 0 / calc(34% * var(--av-shadow-scale)));
--av-btn-lift-sm: 1px;
--av-btn-lift-md: 2px;
--av-btn-lift-lg: 3px;
--av-btn-lift: 0px;
--av-btn-lift-diag: 0;
--av-glow-color: #ffffff;
--av-glow-scale: 1;
--av-glass-blur: 16px;
--av-glass-tint: 12%;
--av-text-shadow-sm: 0 1px 2px oklch(0% 0 0 / calc(20% * var(--av-shadow-scale)));
--av-text-shadow-md: 0 2px 4px oklch(0% 0 0 / calc(30% * var(--av-shadow-scale)));
--av-text-shadow-lg: 0 4px 8px oklch(0% 0 0 / calc(40% * var(--av-shadow-scale)));
--av-ease-out:        var(--ease-3);
--av-ease-spring:     var(--ease-spring-3);
--av-duration-scale:  1;
--av-duration-fast:   calc(var(--av-duration-scale) * 100ms);
--av-duration-base:   calc(var(--av-duration-scale) * 200ms);
--av-duration-slow:   calc(var(--av-duration-scale) * 350ms);
--av-animate-duration: calc(var(--av-duration-scale) * 750ms);
--av-animate-delay:    calc(var(--av-duration-scale) * 100ms);
--av-animate-stagger:  calc(var(--av-duration-scale) *  80ms);
--av-animate-ease:     cubic-bezier(0.16, 1, 0.3, 1);
--av-pop-scale:       1.1;
--av-pop-speed:       1;
--av-pop-in:          calc(var(--av-pop-speed) * 300ms);
--av-pop-return:      calc(var(--av-pop-speed) * 2000ms);
--av-page-transition-duration: 0s;
--av-page-transition-ease:     var(--av-ease-out);
--av-page-transition-scale:    .98;   
--av-z-base:     1;
--av-z-dropdown: 100;
--av-z-sticky:   200;
--av-z-modal:    9000;
--av-z-toast:    9500;
--av-z-skip:     9999;
--av-input-height:  2.625rem;
--av-input-padding: var(--av-space-xs) var(--av-space-sm);
--av-input-radius:  var(--av-radius-md);
--av-btn-radius: var(--av-input-radius);
--av-btn-scale: 1;
--av-header-position:   sticky;              
--av-header-inset:      auto;                
--av-header-height:     initial;
--av-header-bg:         var(--av-color-surface);           
--av-header-color:      var(--av-color-text);
--av-header-accent:     var(--av-color-primary-text);           
--av-header-border:     var(--av-border);                  
--av-header-backdrop:   blur(var(--av-glass-blur));         
--av-header-btn-bg:     var(--av-color-primary);           
--av-header-btn-color:  var(--av-color-text-on-primary);   
--av-header-nav:        var(--av-header-color);
--av-header-nav-active: var(--av-color-primary);
--av-img-filter: none;
--av-nav-font-family:    var(--av-font-sans);
--av-nav-font-size:      var(--av-text-sm);
--av-nav-font-weight:    var(--av-weight-medium);
--av-nav-dropdown-bg:    var(--av-color-surface);
--av-nav-dropdown-radius: var(--av-radius-md);
--av-nav-dropdown-color:        var(--av-color-text);
--av-nav-dropdown-active-color: var(--av-color-primary-text);
--av-nav-item-hover-bg:  color-mix(in oklch, var(--av-nav-dropdown-bg), var(--av-nav-dropdown-color) 7%);
--av-nav-toggle-size:     1.7em;
--av-nav-gap:             var(--av-space-md);
--av-nav-item-gap:        0.125rem;
--av-nav-divider:         var(--av-color-border);
--av-nav-dropdown-padding: 0.3rem;
--av-nav-dropdown-shadow: var(--av-shadow-lg);
--av-nav-toggle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--av-nav-toggle-mask-open: var(--av-nav-toggle-mask);
--av-nav-toggle-open-rotate: 180deg;
--av-nav-item-divider: 0 solid transparent;
--av-nav-item-divider-x: 0 solid transparent;
--av-nav-divider-space: 0;
--av-nav-divider-space-y: 0px;
--av-nav-marker-line: 0 solid transparent;
--av-nav-marker-bg: transparent;
--av-nav-marker-radius: 0;
--av-nav-marker-pad: 0;
--av-nav-marker-rest: 1;
--av-nav-marker-ease: var(--av-ease-out);
--av-card-bg:            var(--av-color-surface-2);
--av-card-border-width:  var(--av-border-width);
--av-tile-border-width:  0px;
--av-card-border:        var(--av-card-border-width) solid var(--av-color-border);
--av-tile-border:        var(--av-tile-border-width) solid var(--av-color-border);
--av-card-radius:        var(--av-radius-md);
--av-card-padding:       var(--av-space-md);
--av-card-shadow:        none;
--av-card-shadow-hover:  var(--av-shadow-md);
--av-tile-media-max:     8rem;
--av-card-lift:          2px;
--av-card-align:         inherit;
--av-event-align:        center;
--av-dl-term-width:      minmax(8rem, 14rem);
--av-nav-dropdown-border: 1px solid var(--av-nav-divider);
--av-footer-bg:     var(--av-color-surface-3);   
--av-footer-color:  var(--av-color-text);        
--av-footer-muted:  color-mix(in srgb, var(--av-footer-color) var(--av-muted-strength), transparent);
--av-footer-accent: var(--av-color-primary-text);     
--av-header-opacity: 75%;
--av-footer-border-color: var(--av-color-border);
--av-footer-border: var(--av-border-width, 1px) solid var(--av-footer-border-color);
}
@media (max-width: 768px) {
:root {
--av-space-md:  calc(var(--av-space-scale) * var(--size-4));   
--av-space-lg:  calc(var(--av-space-scale) * var(--size-5));   
--av-space-xl:  calc(var(--av-space-scale) * var(--size-7));   
--av-space-2xl: calc(var(--av-space-scale) * var(--size-9));   
--av-space-3xl: calc(var(--av-space-scale) * var(--size-11));  
}
}
html.light { color-scheme: light; }
html.dark  { color-scheme: dark; }
}
:root {
--av-shadow-scale: 1;
--shadow-strength-3:  calc((var(--shadow-strength) + 2%) * var(--av-shadow-scale));
--shadow-strength-4:  calc((var(--shadow-strength) + 3%) * var(--av-shadow-scale));
--shadow-strength-5:  calc((var(--shadow-strength) + 4%) * var(--av-shadow-scale));
--shadow-strength-6:  calc((var(--shadow-strength) + 5%) * var(--av-shadow-scale));
--shadow-strength-7:  calc((var(--shadow-strength) + 6%) * var(--av-shadow-scale));
--shadow-strength-8:  calc((var(--shadow-strength) + 7%) * var(--av-shadow-scale));
--shadow-strength-10: calc((var(--shadow-strength) + 9%) * var(--av-shadow-scale));
}
@layer av.tokens {
:root,
:is(.glow, .glow-sm, .glow-md, .glow-lg,
.text-glow, .text-glow-sm, .text-glow-md, .text-glow-lg,
.btn--glow, .btn--glow-sm, .btn--glow-md, .btn--glow-lg),
:is(.btn--glow, .btn--glow-sm, .btn--glow-md, .btn--glow-lg) > a {
--av-glow-sm:
0 0  6px 1px oklch(from var(--av-glow-color) l c h / calc(60% * var(--av-glow-scale))),
0 0 16px 4px oklch(from var(--av-glow-color) l c h / calc(35% * var(--av-glow-scale)));
--av-glow-md:
0 0 10px 2px oklch(from var(--av-glow-color) l c h / calc(70% * var(--av-glow-scale))),
0 0 30px 8px oklch(from var(--av-glow-color) l c h / calc(42% * var(--av-glow-scale)));
--av-glow-lg:
0 0 14px  4px oklch(from var(--av-glow-color) l c h / calc(80% * var(--av-glow-scale))),
0 0 56px 14px oklch(from var(--av-glow-color) l c h / calc(50% * var(--av-glow-scale)));
--av-text-glow-sm:
0 0  6px oklch(from var(--av-glow-color) l c h / calc(70% * var(--av-glow-scale))),
0 0 14px oklch(from var(--av-glow-color) l c h / calc(45% * var(--av-glow-scale)));
--av-text-glow-md:
0 0 10px oklch(from var(--av-glow-color) l c h / calc(85% * var(--av-glow-scale))),
0 0 24px oklch(from var(--av-glow-color) l c h / calc(55% * var(--av-glow-scale)));
--av-text-glow-lg:
0 0 14px oklch(from var(--av-glow-color) l c h / calc(90% * var(--av-glow-scale))),
0 0 34px oklch(from var(--av-glow-color) l c h / calc(60% * var(--av-glow-scale)));
}
}
@layer av.base {
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 100%;
-webkit-text-size-adjust: none;
scroll-behavior: smooth;
scroll-padding-top: var(--av-header-measured, var(--av-header-height, 4rem));
hanging-punctuation: first last;
}
body {
font-family: var(--av-font-sans);
font-size: var(--av-text-base);
font-weight: var(--av-body-weight);
line-height: var(--av-leading-body);
color: var(--av-color-text);
background-color: var(--av-color-surface);
margin: 0;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.skip-link {
position: absolute;
inset-block-start: var(--av-space-sm);
inset-inline-start: var(--av-space-sm);
z-index: var(--av-z-skip);
padding: var(--av-space-xs) var(--av-space-md);
background: var(--av-color-primary);
color: var(--av-color-text-on-primary);
border-radius: var(--av-radius-md);
font-weight: var(--av-weight-medium);
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--av-duration-fast);
&:focus {
transform: translateY(0);
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--av-font-display);
font-weight: var(--av-heading-weight);
line-height: var(--av-el-line-height, var(--av-leading-tight));
letter-spacing: var(--av-tracking-tight);
text-transform: var(--av-heading-transform);
text-wrap: balance;
hyphens: auto;
margin-block: 0 var(--av-space-sm);
color: color-mix(in oklch, var(--av-el-color, var(--av-section-color, var(--av-color-heading, currentColor))) var(--av-el-soft, 100%), transparent);
}
h1 { font-size: var(--av-el-font-size, var(--av-text-4xl)); }
h2 { font-size: var(--av-el-font-size, var(--av-text-3xl)); }
h3 { font-size: var(--av-el-font-size, var(--av-text-2xl)); }
h4 { font-size: var(--av-el-font-size, var(--av-text-xl));  }
h5 { font-size: var(--av-el-font-size, var(--av-text-lg));  }
h6 { font-size: var(--av-el-font-size, var(--av-text-md));  }
:where(h1, h2, h3, h4, h5, h6) { max-inline-size: var(--av-heading-measure); }
p {
font-size: var(--av-el-font-size, var(--av-text-base));
color: color-mix(in oklch, var(--av-el-color, var(--av-section-color, currentColor)) var(--av-el-soft, 100%), transparent);
margin-block: 0 var(--av-space-sm);
text-wrap: pretty;
max-inline-size: none;
}
li {
font-size: var(--av-el-font-size, inherit);
color: color-mix(in oklch, var(--av-el-color, var(--av-section-color, currentColor)) var(--av-el-soft, 100%), transparent);
}
a {
color: var(--av-link, var(--av-color-primary-text));
text-decoration-line: var(--av-link-underline);
text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
text-decoration-skip-ink: auto;
transition:
color var(--av-duration-fast) var(--av-ease-out),
text-decoration-color var(--av-duration-fast) var(--av-ease-out);
}
a:hover {
color: var(--av-link-hover, var(--av-color-primary-dark));
text-decoration-line: var(--av-link-underline-hover);
text-decoration-color: currentColor;
text-decoration-style: var(--av-link-underline-style-hover, solid);
text-decoration-thickness: var(--av-link-thickness-hover, 1px);
}
:where(a:not([class]):not(:is(h1, h2, h3, h4, h5, h6, nav, figure, .btn, [class*="btn"], #header, #footer, .mod_navigation, .mod_customnav) a)):is(a) {
background-image: linear-gradient(var(--av-link-mark), var(--av-link-mark));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: var(--av-link-mark-size);
padding-inline: var(--av-link-pad);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition:
color var(--av-duration-fast) var(--av-ease-out),
text-decoration-color var(--av-duration-fast) var(--av-ease-out),
background-size var(--av-duration-slow) var(--av-ease-out);
}
:where(a:not([class]):not(:is(h1, h2, h3, h4, h5, h6, nav, figure, .btn, [class*="btn"], #header, #footer, .mod_navigation, .mod_customnav) a)):is(a):hover {
color: var(--av-link-hover-ink);
background-size: var(--av-link-mark-size-hover);
}
ul, ol {
padding-inline-start: var(--av-space-md);
margin-block: 0 var(--av-space-sm);
}
strong, b { font-weight: var(--av-weight-bold); }
em, i     { font-style: italic; }
mark {
background-color: var(--av-color-highlight);
color: var(--gray-9);
padding-inline: .2em;
border-radius: var(--av-radius-sm);
}
small { font-size: var(--av-text-sm); }
code, kbd, samp {
font-family: var(--av-font-mono);
font-size: .875em;
}
code {
background-color: var(--av-color-surface-2);
border: var(--av-border);
border-radius: var(--av-radius-sm);
padding: .1em .3em;
}
pre {
font-family: var(--av-font-mono);
font-size: var(--av-text-sm);
background-color: var(--av-color-surface-2);
border: var(--av-border);
border-radius: var(--av-radius-md);
padding: var(--av-space-md);
overflow-x: auto;
margin-block: 0 var(--av-space-md);
& code {
background: none;
border: none;
padding: 0;
font-size: inherit;
}
}
blockquote {
border-inline-start: 3px solid var(--av-color-primary-text);
margin-inline: 0;
padding-inline: var(--av-space-md);
padding-block: var(--av-space-xs);
margin-block: 0 var(--av-space-md);
font-style: italic;
color: var(--av-color-text-muted);
}
hr {
border: none;
border-block-start: var(--av-border);
margin-block: var(--av-space-lg);
}
table {
border-collapse: collapse;
inline-size: 100%;
font-size: var(--av-el-font-size, var(--av-text-sm));
margin-block: 0 var(--av-space-md);
border: 0;
border-radius: 0;
background: transparent;
}
:is(th, td) {
border-radius: 0;
}
th {
text-align: start;
font-weight: var(--av-weight-semi);
color: var(--av-el-color, inherit);
background-color: var(--av-color-surface-2);
padding: var(--av-table-py, var(--av-space-xs)) var(--av-table-px, var(--av-space-sm));
border-block-end: 2px solid var(--av-color-border);
}
td {
text-align: start;
background: transparent;
color: var(--av-el-color, inherit);
padding: var(--av-table-py, var(--av-space-xs)) var(--av-table-px, var(--av-space-sm));
border-block-end: var(--av-border);
}
tbody tr:hover {
background-color: var(--av-color-surface-2);
}
tbody tr:last-child td {
border-block-end: 0;
}
figure {
margin-inline: 0;
margin-block: 0 var(--av-space-md);
}
figcaption {
font-size: var(--av-text-sm);
color: var(--av-color-text-muted);
margin-block-start: var(--av-space-xs);
text-align: center;
}
img, video, svg, picture {
display: block;
max-inline-size: 100%;
height: auto;
}
:focus-visible {
outline: 2px solid var(--av-focus, var(--av-color-primary-text));
outline-offset: 3px;
border-radius: var(--av-radius-sm);
}
button, [type="button"], [type="reset"], [type="submit"] {
cursor: pointer;
}
details {
border: var(--av-border);
border-radius: var(--av-radius-md);
padding: var(--av-space-sm) var(--av-space-md);
& + details {
margin-block-start: var(--av-space-xs);
}
}
summary {
font-weight: var(--av-weight-medium);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--av-space-sm);
&::-webkit-details-marker { display: none; }
&::after {
content: '+';
font-size: var(--av-text-xl);
font-weight: var(--av-weight-normal);
color: var(--av-color-text-muted);
transition: transform var(--av-duration-fast) var(--av-ease-out);
flex-shrink: 0;
}
}
details[open] > summary::after {
transform: rotate(45deg);
}
dialog {
border: var(--av-border);
border-radius: var(--av-radius-lg);
padding: var(--av-space-lg);
box-shadow: var(--av-shadow-lg);
max-inline-size: min(90vw, 600px);
background: var(--av-color-surface);
color: var(--av-color-text);
&::backdrop {
background-color: oklch(0% 0 0 / 55%);
backdrop-filter: blur(4px);
}
}
.sr-only,
.invisible {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
#header, #footer, .mod_navigation, .content-toplink,
.av-modal, .skip-link { display: none !important; }
.animate { opacity: 1 !important; translate: none !important; }
body { font-size: 12pt; color: black; background: white; }
a[href]:not([href^="#"]):not([href^="javascript"])::after {
content: " (" attr(href) ")";
font-size: 0.875em;
color: #666;
}
h1, h2, h3, h4 { page-break-after: avoid; }
img { max-inline-size: 100%; }
@page { margin: 2cm; }
}
.ave-credit {
padding: .35rem 1rem;
text-align: center;
font-size: .75rem;
color: var(--av-color-text-muted);
border-top: var(--av-border);
background: var(--av-color-surface-2);
& a {
color: var(--av-color-primary-text);
text-decoration: none;
}
}
}
@layer av.layout {
.container {
inline-size: 100%;
max-inline-size: var(--av-container);
margin-inline: auto;
padding-inline: var(--av-gutter);
}
.container--sm   { --av-container: var(--av-container-sm); }
.container--md   { --av-container: var(--av-container-md); }
.container--lg   { --av-container: var(--av-container-lg); }
.container--xl   { --av-container: var(--av-container-xl); }
.container--2xl  { --av-container: var(--av-container-2xl); }
.container--full { max-inline-size: none; }
.section              { padding-block: var(--av-space-xl); }
.section.section--sm  { padding-block: var(--av-space-lg); }
.section.section--lg  { padding-block: var(--av-space-2xl); }
.section.section--flush { padding-block: 0; }
.section.align-content-center {
display: flex;
flex-direction: column;
justify-content: center;
}
.section.align-content-center:not(.section--sm):not(.section--flush):not([class*="vh-"]) {
min-block-size: clamp(320px, 50vh, 640px);
}
.vh-full  { min-block-size: 100vh; min-block-size: calc(100dvh - var(--av-hero-offset, 0px)); }
.vh-large { min-block-size: 75vh;  min-block-size: 75dvh; }
.vh-half  { min-block-size: 50vh;  min-block-size: 50dvh; }
.vh-third { min-block-size: 33vh;  min-block-size: 33.334dvh; }
@media (max-width: 768px) {
.vh-large { min-block-size: 80vh; min-block-size: 80dvh; }
.vh-half  { min-block-size: 60vh; min-block-size: 60dvh; }
.vh-third { min-block-size: 50vh; min-block-size: 50dvh; }
}
.section[class*="vh-"]:has(> .container.align-content-center) {
display: flex;
flex-direction: column;
justify-content: center;
}
.section.align-content-end {
display: flex;
flex-direction: column;
align-items: flex-end;
}
:is(.ave-reader, .section--bleed).section {
inline-size: 100vw;
max-inline-size: 100vw;
margin-inline: calc(50% - 50vw);
}
.mod_article:has(:is(.ave-reader, .section--bleed).section) {
padding-block: 0;
}
.layout-grid {
display: grid;
gap: calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1));
}
.layout-columns-2,
.layout-columns-3,
.layout-columns-4,
.layout-columns-6 {
display: grid;
gap: calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1));
grid-template-columns: repeat(
auto-fit,
minmax(
max(
min(100%, var(--av-col-min, 16rem)),
calc((100% - (var(--av-cols) - 1) * calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1))) / var(--av-cols))
),
1fr
)
);
}
.layout-columns-2 { --av-cols: 2; --av-col-min: 16rem; }
.layout-columns-3 { --av-cols: 3; --av-col-min: 16rem; }
.layout-columns-4 { --av-cols: 4; --av-col-min: 16rem; }
.layout-columns-6 { --av-cols: 6; --av-col-min: 8rem; }
.layout-columns-2.no-stack { grid-template-columns: repeat(2, 1fr); }
.layout-columns-3.no-stack { grid-template-columns: repeat(3, 1fr); }
.layout-columns-4.no-stack { grid-template-columns: repeat(4, 1fr); }
.layout-columns-6.no-stack { grid-template-columns: repeat(6, 1fr); }
:is(.layout-columns-2, .layout-columns-3, .layout-columns-4, .layout-columns-6):has(> [class*="col-span-"]) {
grid-template-columns: repeat(var(--av-cols), 1fr);
}
:where([class*="layout-columns-"], .layout-grid) > [class*="col-span-"] {
min-inline-size: 0;
}
.layout-columns-3 > .col-span-2,
.layout-columns-4 > .col-span-2,
.layout-columns-6 > .col-span-2 { grid-column: span 2; }
.layout-columns-4 > .col-span-3,
.layout-columns-6 > .col-span-3 { grid-column: span 3; }
.layout-columns-6 > .col-span-4 { grid-column: span 4; }
.layout-columns-6 > .col-span-5 { grid-column: span 5; }
:where([class*="layout-columns-"], .layout-grid) > .col-span-full { grid-column: 1 / -1; }
@media (max-width: 768px) {
:is(.layout-columns-2, .layout-columns-3, .layout-columns-4, .layout-columns-6):has(> [class*="col-span-"]) {
grid-template-columns: 1fr;
}
[class*="layout-columns-"] > :is(.col-span-2, .col-span-3, .col-span-4, .col-span-5) { grid-column: auto; }
}
.layout-columns-asymmetric {
display: grid;
grid-template-columns: 2fr 1fr;
gap: calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1));
}
.layout-columns-asymmetric--reverse {
display: grid;
grid-template-columns: 1fr 2fr;
gap: calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1));
}
.layout-sidebar {
display: flex;
flex-wrap: wrap;
gap: calc(var(--av-layout-gap, var(--av-space-lg)) * var(--av-layout-gap-scale, 1));
align-items: start;
}
.layout-sidebar > :first-child {        
flex: 999 1 var(--av-sidebar-content-min, 60%);
}
.layout-sidebar > :last-child {         
flex: 1 1 var(--av-sidebar-width, 280px);
}
.layout-sidebar--left > :first-child {  
flex: 1 1 var(--av-sidebar-width, 280px);
}
.layout-sidebar--left > :last-child {   
flex: 999 1 var(--av-sidebar-content-min, 60%);
}
@media (min-width: 769px) {
.layout-sticky {
position: sticky;
top: var(--av-sticky-top, calc(var(--av-header-measured, var(--av-header-height, 4rem)) + var(--av-space-lg)));
align-self: start;
}
}
@media (max-width: 768px) {
.layout-sidebar > * { position: static !important; }
}
#container { --av-col-side: 16rem; }
@media (min-width: 769px) {
#container:has(:is(#left, #right)) {
display: grid;
gap: calc(var(--av-layout-gap, var(--av-space-xl)) * var(--av-layout-gap-scale, 1));
align-items: start;
}
#container:has(#left):not(:has(#right)) {
grid-template-columns: var(--av-col-side) minmax(0, 1fr);
}
#container:has(#right):not(:has(#left)) {
grid-template-columns: minmax(0, 1fr) var(--av-col-side);
}
#container:has(#left):has(#right) {
grid-template-columns: var(--av-col-side) minmax(0, 1fr) var(--av-col-side);
}
#container > #left  { order: 1; }
#container > #main  { order: 2; min-inline-size: 0; }
#container > #right { order: 3; }
}
.layout-feature {
display: grid;
gap: calc(var(--av-layout-gap, var(--av-space-2xl)) * var(--av-layout-gap-scale, 1));
grid-template-columns: repeat(
auto-fit,
minmax(
max(
min(100%, var(--av-feature-min, 20rem)),
calc((100% - calc(var(--av-layout-gap, var(--av-space-2xl)) * var(--av-layout-gap-scale, 1))) / 2)
),
1fr
)
);
align-items: center;
}
.layout-feature.no-stack { grid-template-columns: 1fr 1fr; }
.layout-auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--av-auto-min, 280px), 100%), 1fr));
gap: calc(var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1));
}
.layout-stack {
display: flex;
flex-direction: column;
gap: var(--av-stack-gap, var(--av-space-md));
}
.layout-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--av-row-gap, var(--av-space-sm));
}
.layout-row.row-spread { justify-content: space-between; }
@media (max-width: 768px) {
.layout-columns-asymmetric:not(.no-stack),
.layout-columns-asymmetric--reverse:not(.no-stack) {
grid-template-columns: 1fr;
}
}
.align-content-center  { place-content: center; }
.align-content-start   { place-content: start; }
.align-content-end     { place-content: end; }
.align-content-between { place-content: space-between; }
.justify-between       { justify-content: space-between; }
.align-items-start     { align-items: flex-start; }
.align-items-center    { align-items: center; }
.align-items-end       { align-items: flex-end; }
.align-items-stretch   { align-items: stretch; }  
.justify-center        { justify-content: center; }
.self-start {
display: flex;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline-start: 0;
margin-inline-end: auto;
}
.self-center {
display: flex;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline: auto;
}
.self-end {
display: flex;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline-start: auto;
margin-inline-end: 0;
}
.h-full { block-size: 100%; }
.grow { flex: 1 1 0; min-block-size: 0; }
.fill-stack {
display: flex;
flex-direction: column;
gap: var(--av-stack-gap, var(--av-space-md));
}
@media (min-width: 769px) {
.fill-stack { align-self: stretch; }
.fill-stack > * {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;   
}
.fill-stack--even > * { flex-basis: 0; }
}
.v-center {
display: flex;
flex-direction: column;
justify-content: center;
}
.av-y-start, .av-y-center, .av-y-end {
display: flex;
flex-direction: column;
}
.av-y-start  { justify-content: flex-start; }
.av-y-center { justify-content: center; }
.av-y-end    { justify-content: flex-end; }
:is(.layout-grid, .layout-columns-2, .layout-columns-3, .layout-columns-4,
.layout-columns-6, .layout-columns-asymmetric,
.layout-columns-asymmetric--reverse, .layout-feature,
.layout-auto-grid):is(.av-y-start, .av-y-center, .av-y-end) {
display: grid;
}
:is(.layout-grid, .layout-columns-2, .layout-columns-3, .layout-columns-4,
.layout-columns-6, .layout-columns-asymmetric,
.layout-columns-asymmetric--reverse, .layout-feature,
.layout-auto-grid).av-y-start  { align-content: start;  align-items: start; }
:is(.layout-grid, .layout-columns-2, .layout-columns-3, .layout-columns-4,
.layout-columns-6, .layout-columns-asymmetric,
.layout-columns-asymmetric--reverse, .layout-feature,
.layout-auto-grid).av-y-center { align-content: center; align-items: center; }
:is(.layout-grid, .layout-columns-2, .layout-columns-3, .layout-columns-4,
.layout-columns-6, .layout-columns-asymmetric,
.layout-columns-asymmetric--reverse, .layout-feature,
.layout-auto-grid).av-y-end    { align-content: end;    align-items: end; }
:is(.layout-row, .layout-sidebar):is(.av-y-start, .av-y-center, .av-y-end) {
flex-direction: row;
}
:is(.layout-row, .layout-sidebar).av-y-start  { align-items: flex-start; }
:is(.layout-row, .layout-sidebar).av-y-center { align-items: center; }
:is(.layout-row, .layout-sidebar).av-y-end    { align-items: flex-end; }
.section.av-y-center:not(.section--sm):not(.section--flush):not([class*="vh-"]),
.section.av-y-end:not(.section--sm):not(.section--flush):not([class*="vh-"]) {
min-block-size: clamp(320px, 50vh, 640px);
}
.section[class*="vh-"]:has(> .container.av-y-center) {
display: flex;
flex-direction: column;
justify-content: center;
}
.section[class*="vh-"]:has(> .container.av-y-end) {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.align-all-center      { display: grid; place-items: center; }
.align-text-center {
text-align: center;
& :where(h1, h2, h3, h4, h5, h6, p, .lead, figure, img,
.measure-45, .measure-50, .measure-60, .measure-70) {
margin-inline: auto;
}
& .layout-row,
&.layout-row { justify-content: center; }
}
.align-text-end {
text-align: end;
& :where(h1, h2, h3, h4, h5, h6, p, .lead,
.measure-45, .measure-50, .measure-60, .measure-70) {
margin-inline-start: auto;
margin-inline-end: 0;
}
& .layout-row,
&.layout-row { justify-content: flex-end; }
}
:where(h1, h2, h3, h4, h5, h6, p, .lead,
.measure-45, .measure-50, .measure-60, .measure-70).align-text-center {
margin-inline: auto;
}
:where(h1, h2, h3, h4, h5, h6, p, .lead,
.measure-45, .measure-50, .measure-60, .measure-70).align-text-end {
margin-inline-start: auto;
margin-inline-end: 0;
}
.space-box-2xs { padding: var(--av-space-2xs); }
.space-box-xs  { padding: var(--av-space-xs); }
.space-box-sm  { padding: var(--av-space-sm); }
.space-box-md  { padding: var(--av-space-md); }
.space-box-lg  { padding: var(--av-space-lg); }
.space-box-xl  { padding: var(--av-space-xl); }
@media (max-width: 768px) {
.space-box-lg { padding: var(--av-space-md); }
.space-box-xl { padding: var(--av-space-lg); }
}
.space-block-xs  { padding-block: var(--av-space-xs); }
.space-block-sm  { padding-block: var(--av-space-sm); }
.space-block-md  { padding-block: var(--av-space-md); }
.space-block-lg  { padding-block: var(--av-space-lg); }
.space-block-xl  { padding-block: var(--av-space-xl); }
.space-block-2xl { padding-block: var(--av-space-2xl); }
@media (max-width: 768px) {
.space-none-mobile        { padding: 0; }
.space-inline-none-mobile { padding-inline: 0; }
.space-block-none-mobile  { padding-block: 0; }
}
.space-below-xs  { margin-block-end: var(--av-space-xs); }
.space-below-sm  { margin-block-end: var(--av-space-sm); }
.space-below-md  { margin-block-end: var(--av-space-md); }
.space-below-lg  { margin-block-end: var(--av-space-lg); }
.space-below-xl  { margin-block-end: var(--av-space-xl); }
.space-below-2xl { margin-block-end: var(--av-space-2xl); }
.no-space-below  { margin-block-end: 0 !important; }
@media (max-width: 768px) { .desktop-only { display: none !important; } }
@media (min-width: 769px) { .mobile-only  { display: none !important; } }
#header:has(.mod_navigation.is-compact) .desktop-only { display: none !important; }
.gap-none { --av-layout-gap: 0px;              --av-stack-gap: 0px;              --av-row-gap: 0px; }
.gap-xs   { --av-layout-gap: var(--av-space-xs);  --av-stack-gap: var(--av-space-xs);  --av-row-gap: var(--av-space-xs); }
.gap-sm   { --av-layout-gap: var(--av-space-sm);  --av-stack-gap: var(--av-space-sm);  --av-row-gap: var(--av-space-sm); }
.gap-md   { --av-layout-gap: var(--av-space-md);  --av-stack-gap: var(--av-space-md);  --av-row-gap: var(--av-space-md); }
.gap-lg   { --av-layout-gap: var(--av-space-lg);  --av-stack-gap: var(--av-space-lg);  --av-row-gap: var(--av-space-lg); }
.gap-xl   { --av-layout-gap: var(--av-space-xl);  --av-stack-gap: var(--av-space-xl);  --av-row-gap: var(--av-space-xl); }
.gap-2xl  { --av-layout-gap: var(--av-space-2xl); --av-stack-gap: var(--av-space-2xl); --av-row-gap: var(--av-space-2xl); }
.gap-row-none { row-gap: 0; }                    .gap-col-none { column-gap: 0; }
.gap-row-xs   { row-gap: var(--av-space-xs); }   .gap-col-xs   { column-gap: var(--av-space-xs); }
.gap-row-sm   { row-gap: var(--av-space-sm); }   .gap-col-sm   { column-gap: var(--av-space-sm); }
.gap-row-md   { row-gap: var(--av-space-md); }   .gap-col-md   { column-gap: var(--av-space-md); }
.gap-row-lg   { row-gap: var(--av-space-lg); }   .gap-col-lg   { column-gap: var(--av-space-lg); }
.gap-row-xl   { row-gap: var(--av-space-xl); }   .gap-col-xl   { column-gap: var(--av-space-xl); }
.gap-row-2xl  { row-gap: var(--av-space-2xl); }  .gap-col-2xl  { column-gap: var(--av-space-2xl); }
@media (max-width: 768px) {
.space-mobile-collapse { padding-block: 0 !important; margin-block: 0 !important; }
}
.table-compact     { --av-table-py: var(--av-space-2xs); --av-table-px: var(--av-space-xs); }
.table-comfortable { --av-table-py: var(--av-space-sm);  --av-table-px: var(--av-space-md); }
.table-spacious    { --av-table-py: var(--av-space-md);  --av-table-px: var(--av-space-lg); }
.table-nowrap :is(th, td) { white-space: nowrap; }
.style-glass {
background: oklch(100% 0 0 / var(--av-glass-tint));
backdrop-filter: blur(var(--av-glass-blur));
-webkit-backdrop-filter: blur(var(--av-glass-blur));
--av-card-bg: oklch(100% 0 0 / var(--av-glass-tint));
--av-card-border: var(--av-card-border-width) solid oklch(100% 0 0 / 12%);
--av-tile-border: var(--av-card-border);
border: var(--av-card-border);
}
.style-glass-dark {
background: oklch(0% 0 0 / 42%);
backdrop-filter: blur(var(--av-glass-blur));
-webkit-backdrop-filter: blur(var(--av-glass-blur));
color: white;
--av-section-color:    white;
--av-color-text:       white;
--av-color-text-muted: oklch(100% 0 0 / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 10%);
--av-color-surface-3:  oklch(100% 0 0 / 18%);
--av-color-border:     oklch(100% 0 0 / 18%);
--av-border:      var(--av-border-width) solid var(--av-color-border);
--av-card-bg:          oklch(0% 0 0 / 42%);
--av-card-border: var(--av-card-border-width) solid oklch(100% 0 0 / 18%);
--av-tile-border: var(--av-card-border);
border: var(--av-card-border);
}
.style-interactive-card {
background: var(--av-card-bg);
border: var(--av-tile-border);
border-radius: var(--av-card-radius);
box-shadow: var(--av-card-shadow);
&:hover {
box-shadow: var(--av-card-shadow-hover);
transform: translateY(calc(-1 * var(--av-card-lift)));
}
}
:where(.style-card, .style-interactive-card, .style-tile) { text-align: var(--av-card-align); }
.style-tile {
background: var(--av-card-bg);
align-content: center;
}
.style-tile > :last-child,
.style-tile > * > :last-child {
margin-block-end: 0;
}
.style-tile :is(img, svg) {
max-block-size: var(--av-tile-media-max);
inline-size: auto;
}
@media (min-width: 769px) {
:is(.layout-columns-2, .layout-columns-3, .layout-columns-4,
.layout-columns-6, .layout-auto-grid, .layout-grid
):has(> .style-tile, > * > .style-tile) {
grid-auto-rows: 1fr;
}
}
.style-card {
background: var(--av-card-bg);
border: var(--av-card-border);
border-radius: var(--av-card-radius);
box-shadow: var(--av-card-shadow);
}
:where(.style-card, .style-interactive-card, .style-tile) {
padding: var(--av-card-padding);
}
.style-shadow   { box-shadow: var(--av-shadow-lg); }
.shadow    { box-shadow: var(--av-shadow-md); }
.shadow-sm { box-shadow: var(--av-shadow-sm); }
.shadow-md { box-shadow: var(--av-shadow-md); }
.shadow-lg { box-shadow: var(--av-shadow-lg); }
.shadow-none { box-shadow: none; }
.glow      { box-shadow: var(--av-glow-md); }
.glow-sm   { box-shadow: var(--av-glow-sm); }
.glow-md   { box-shadow: var(--av-glow-md); }
.glow-lg   { box-shadow: var(--av-glow-lg); }
.glow-none { box-shadow: none; }
.style-rounded  { border-radius: var(--av-radius-lg); overflow: hidden; }
.style-squircle {
border-radius: var(--av-squircle-card, clamp(1rem, var(--av-radius-xl) * 0.75, 4rem));
overflow: hidden;
}
@supports (corner-shape: squircle) {
.style-squircle {
corner-shape: squircle;
border-radius: var(--av-squircle-card-super, var(--av-squircle-card, 50%));
}
}
:is(
.content-image.style-rounded,
.content-image figure.style-rounded:not([class*="bg-"]):not([style*="padding"])
) img { border-radius: var(--av-radius-lg); }
:is(
.content-image.style-shadow,
.content-image figure.style-shadow:not([class*="bg-"]):not([style*="padding"])
) img { box-shadow: var(--av-shadow-lg); }
.content-image.style-rounded,
.content-image figure.style-rounded:not([class*="bg-"]):not([style*="padding"]) {
border-radius: 0;
overflow: visible;
}
.content-image.style-shadow,
.content-image figure.style-shadow:not([class*="bg-"]):not([style*="padding"]) {
box-shadow: none;
}
.border-primary {
--av-card-border: var(--av-card-border-width) solid var(--av-color-primary-text);
--av-tile-border: var(--av-card-border);
border: var(--av-border-width, 1px) solid var(--av-color-primary-text);
}
.border-secondary {
--av-card-border: var(--av-card-border-width) solid var(--av-color-secondary-text);
--av-tile-border: var(--av-card-border);
border: var(--av-border-width, 1px) solid var(--av-color-secondary-text);
}
.border-strong { --av-border-width: 2px; }
.border-none {
border: 0;
--av-card-border: none;
--av-tile-border: none;
}
.border-top    { border-block-start:  var(--av-border); }
.border-bottom { border-block-end:    var(--av-border); }
.border-left   { border-inline-start: var(--av-border); }
.border-right  { border-inline-end:   var(--av-border); }
.shape-rounded  { border-radius: var(--av-radius-lg); }
.shape-squircle { border-radius: var(--av-squircle, 38%); }
@supports (corner-shape: squircle) {
.shape-squircle {
corner-shape: squircle;
border-radius: var(--av-squircle-super, var(--av-squircle, 50%));
}
}
.shape-blob     { border-radius: 42% 58% 68% 32% / 42% 45% 55% 58%; }
.shape-circle   { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.shape-border            { border: var(--av-img-border-width) solid var(--av-img-border-color); }
.shape-border--secondary { --av-img-border-color: var(--av-color-secondary-text); }
.shape-border--light     { --av-img-border-color: oklch(100% 0 0 / 85%); }
.shape-border--dark      { --av-img-border-color: oklch(0% 0 0 / 70%); }
.shape-shadow            { box-shadow: var(--av-shadow-lg); }
.content-image figure:has(.shape-shadow),
.content-image figure:has(.shape-border) { overflow: visible; }
.style-dark {
background-color: var(--av-color-dark-surface);
color: var(--av-color-on-dark-surface);
--av-section-color:    var(--av-color-on-dark-surface);
--av-color-text:       var(--av-color-on-dark-surface);
--av-color-text-muted: oklch(from var(--av-color-on-dark-surface) l c h / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 8%);
--av-card-bg:         var(--av-color-surface-2);
--av-color-surface-3:  oklch(100% 0 0 / 14%);
--av-color-border:     oklch(100% 0 0 / 18%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
}
.style-primary {
background-color: var(--av-color-primary);
color: var(--av-color-text-on-primary);
--av-section-color:    var(--av-color-text-on-primary);
}
.style-divider  {
border: none;
border-block-start: var(--av-border);
margin-block: var(--av-space-lg);
}
.dividers-v {
overflow-x: clip;
overflow-y: visible;
padding-inline: 0;
--av-divider-color: var(--av-color-border);
}
.dividers-v > * { position: relative; }
.dividers-v > *::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: calc(
-0.5 * var(--av-layout-gap, var(--av-space-md)) * var(--av-layout-gap-scale, 1)
- 0.5 * var(--av-border-width, 1px)
);
inline-size: var(--av-border-width, 1px);
background: var(--av-divider-color);
}
:is(.style-light, .bg-image-dark, .bg-image-brand, .bg-image-secondary, .bg-image-gradient, .style-dark, .style-primary, .bg-primary, .bg-secondary, .bg-gradient-primary, .bg-gradient-secondary, .bg-gradient-dark, .style-glass-dark) :is(
a.btn:not(.btn--glass):not(.btn--soft):not(.btn--dark):not(.btn--outline):not(.btn--outline-secondary),
button.btn:not(.btn--glass):not(.btn--soft):not(.btn--dark):not(.btn--outline):not(.btn--outline-secondary),
:not(a,button).btn:not(.btn--glass):not(.btn--soft):not(.btn--dark):not(.btn--outline):not(.btn--outline-secondary) > a,
:not(.btn--outline, .btn--outline-secondary) > button[type="submit"]:not(.btn--outline):not(.btn--outline-secondary),
:not(.btn--outline, .btn--outline-secondary) > input[type="submit"]:not(.btn--outline):not(.btn--outline-secondary)) {
background-color: white;
color: var(--av-color-primary-on-light);
border-color: transparent;
&:hover        { background-color: oklch(100% 0 0 / 85%); }
&:focus-visible { box-shadow: 0 0 0 3px oklch(100% 0 0 / 40%); }
}
:is(.style-light, .bg-image-dark, .bg-image-brand, .bg-image-secondary, .bg-image-gradient, .style-dark, .style-primary, .bg-primary, .bg-secondary, .bg-gradient-primary, .bg-gradient-secondary, .bg-gradient-dark, .style-glass-dark) :is(
a.btn--outline, button.btn--outline, :not(a,button).btn--outline > a, :not(a,button).btn--outline > button,
a.btn--outline-secondary, button.btn--outline-secondary, :not(a,button).btn--outline-secondary > a, :not(a,button).btn--outline-secondary > button) {
background-color: transparent;
color: white;
border-color: white;
&:hover { background-color: oklch(100% 0 0 / 15%); color: white; }
}
:is(.style-light, .bg-image-dark, .bg-image-brand, .bg-image-secondary, .bg-image-gradient, .style-dark, .style-primary, .bg-primary, .bg-secondary, .bg-gradient-primary, .bg-gradient-secondary, .bg-gradient-dark, .style-glass-dark) a:not(.btn) {
color: white;
--av-link-block: oklch(100% 0 0 / 22%);
&:hover { color: oklch(100% 0 0 / 80%); }
}
.order-first { order: -1; }
.order-last  { order: 999; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
@media (max-width: 768px) {
.order-first--mobile { order: -1; }
.order-last--mobile  { order: 999; }
.order-1--mobile     { order: 1; }
.order-2--mobile     { order: 2; }
}
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-16-9 > *, .ratio-4-3 > *,
.ratio-3-2 > *, .ratio-1-1 > * {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.bg-surface-1     { background-color: var(--av-color-surface);   --av-card-bg: var(--av-color-surface); }
.bg-surface-2     { background-color: var(--av-color-surface-2); --av-card-bg: var(--av-color-surface-2); }
.bg-surface-3     { background-color: var(--av-color-surface-3); --av-card-bg: var(--av-color-surface-3); }
.bg-primary         { background-color: var(--av-color-primary); color: var(--av-color-text-on-primary); --av-color-text: var(--av-color-text-on-primary); --av-section-color: var(--av-color-text-on-primary); --av-card-bg: var(--av-color-primary); }
.bg-primary-light   { background-color: var(--av-color-primary-light); --av-card-bg: var(--av-color-primary-light); }
.bg-secondary       { background-color: var(--av-color-secondary); color: var(--av-color-text-on-secondary); --av-color-text: var(--av-color-text-on-secondary); --av-section-color: var(--av-color-text-on-secondary); --av-card-bg: var(--av-color-secondary); }
.bg-secondary-light { background-color: var(--av-color-secondary-light); --av-card-bg: var(--av-color-secondary-light); }
:is(.style-primary, .bg-primary, .bg-secondary, .bg-gradient-primary, .bg-gradient-secondary) {
--av-color-text-muted: oklch(100% 0 0 / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 14%);
--av-card-bg:         var(--av-color-surface-2);
--av-color-surface-3:  oklch(100% 0 0 / 22%);
--av-color-border:     oklch(100% 0 0 / 28%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
& :is(.text-primary, .text-secondary) { --av-el-color: var(--av-section-color); }
}
.bg-gradient-primary {
background: linear-gradient(var(--av-gradient-angle),
var(--av-color-primary),
color-mix(in oklch, var(--av-color-primary) 75%, black));
color: var(--av-color-text-on-primary);
--av-color-text:     var(--av-color-text-on-primary);
--av-section-color:  var(--av-color-text-on-primary);
--av-color-border: oklch(100% 0 0 / 25%);
--av-border: var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
--av-card-bg: color-mix(in oklch, var(--av-color-primary) 85%, black);
}
.bg-gradient-secondary {
background: linear-gradient(var(--av-gradient-angle),
var(--av-color-secondary),
color-mix(in oklch, var(--av-color-secondary) 75%, black));
color: var(--av-color-text-on-secondary);
--av-color-text:     var(--av-color-text-on-secondary);
--av-section-color:  var(--av-color-text-on-secondary);
--av-color-border: oklch(100% 0 0 / 25%);
--av-border: var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
--av-card-bg: color-mix(in oklch, var(--av-color-secondary) 85%, black);
}
.bg-gradient-dark {
background: linear-gradient(var(--av-gradient-angle), var(--av-gradient-dark-from) 0%, var(--av-gradient-dark-to) 100%);
color: white;
--av-color-text:       white;
--av-section-color:    white;
--av-color-text-muted: oklch(100% 0 0 / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 8%);
--av-color-border:     oklch(100% 0 0 / 18%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
--av-card-bg:          oklch(100% 0 0 / 10%);
}
.bg-gradient-subtle {
background: linear-gradient(180deg,
var(--av-color-surface) 0%,
var(--av-color-surface-2) 100%);
--av-card-bg: var(--av-color-surface-2);
}
.bg-gradient-animated {
--bg-anim-color-1: var(--av-color-primary);
--bg-anim-color-2: color-mix(in oklch, var(--av-color-primary), white 22%);
--bg-anim-color-3: color-mix(in oklch, var(--av-color-primary), black 30%);
--bg-anim-color-4: var(--gray-8);
position: relative;
overflow: clip;
background:
radial-gradient(ellipse 55% 55% at center, var(--bg-anim-color-3) 0%, transparent 70%),
var(--bg-anim-color-4);
background-size: 180% 180%, auto;
background-position: 20% 80%, 0 0;
animation: av-blob-c 11s ease-in-out infinite;
&::before,
&::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.75;
pointer-events: none;
}
&::before {
width: 30%;
aspect-ratio: 1;
background: var(--bg-anim-color-1);
top: 5%;
left: 5%;
animation: av-blob-a 13s ease-in-out infinite;
}
&::after {
width: 28%;
aspect-ratio: 1;
background: var(--bg-anim-color-2);
bottom: 5%;
right: 8%;
animation: av-blob-b 17s ease-in-out infinite;
animation-delay: -5s;
}
& > * { position: relative; z-index: 1; }
}
@keyframes av-blob-a {
0%   { transform: translate(0,    0)    scale(1);    }
15%  { transform: translate(45%,  20%)  scale(1.08); }
32%  { transform: translate(85%,  8%)   scale(0.94); }
50%  { transform: translate(65%,  50%)  scale(1.06); }
68%  { transform: translate(15%,  65%)  scale(0.96); }
82%  { transform: translate(-8%,  30%)  scale(1.04); }
100% { transform: translate(0,    0)    scale(1);    }
}
@keyframes av-blob-b {
0%   { transform: translate(0,    0)    scale(1);    }
18%  { transform: translate(-55%, -22%) scale(1.1);  }
38%  { transform: translate(-20%, -60%) scale(0.92); }
55%  { transform: translate(-75%, -40%) scale(1.05); }
72%  { transform: translate(-90%, -15%) scale(0.95); }
88%  { transform: translate(-40%, -8%)  scale(1.03); }
100% { transform: translate(0,    0)    scale(1);    }
}
@keyframes av-blob-c {
0%, 100% { background-position: 20%  80%,  0 0; }
28%       { background-position: 75%  15%,  0 0; }
55%       { background-position: 90%  70%,  0 0; }
78%       { background-position: 30%  20%,  0 0; }
}
.av-anim-paused,
.av-anim-paused::before,
.av-anim-paused::after { animation-play-state: paused; }
.bg-gradient-animated { content-visibility: auto; }
@media (prefers-reduced-motion: reduce) {
.bg-gradient-animated,
.bg-gradient-animated::before,
.bg-gradient-animated::after { animation: none; }
}
.bg-none { background: none; }
.has-bg-image {
--section-bg-image: var(--section-bg-sm, none);
}
@media (min-width: 768px) {
.has-bg-image {
--section-bg-image: var(--section-bg-md, none);
}
}
@media (min-width: 1200px) {
.has-bg-image {
--section-bg-image: var(--section-bg-lg, none);
}
}
:is(.bg-image, .bg-image-dark, .bg-image-light, .bg-image-brand, .bg-image-secondary, .bg-image-gradient) {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bg-image {
background-image: var(--section-bg-image, none);
}
:is(.bg-image-dark, .bg-video-dark) {
--av-bg-overlay: linear-gradient(to bottom,
oklch(0% 0 0 / calc(48% * var(--av-bg-overlay-scale, 1))),
oklch(0% 0 0 / calc(80% * var(--av-bg-overlay-scale, 1))));
}
.bg-image-dark {
background-image: var(--av-bg-overlay), var(--section-bg-image, none);
}
:is(.bg-image-light, .bg-video-light) {
--av-bg-overlay: linear-gradient(to bottom,
light-dark(oklch(100% 0 0 / calc(66% * var(--av-bg-overlay-scale, 1))),
oklch(  0% 0 0 / calc(48% * var(--av-bg-overlay-scale, 1)))),
light-dark(oklch(100% 0 0 / calc(90% * var(--av-bg-overlay-scale, 1))),
oklch(  0% 0 0 / calc(80% * var(--av-bg-overlay-scale, 1)))));
}
:is(.bg-image-light, .bg-video-light).text-on-light {
--av-bg-overlay: linear-gradient(to bottom,
oklch(100% 0 0 / calc(66% * var(--av-bg-overlay-scale, 1))),
oklch(100% 0 0 / calc(90% * var(--av-bg-overlay-scale, 1))));
}
.bg-image-light {
background-image: var(--av-bg-overlay), var(--section-bg-image, none);
}
:is(.bg-image-brand, .bg-video-brand) {
--_ov: color-mix(in oklch, var(--av-color-primary) calc(80% * var(--av-bg-overlay-scale, 1)), transparent);
--av-bg-overlay: linear-gradient(var(--_ov), var(--_ov));
}
.bg-image-brand {
background-image: var(--av-bg-overlay), var(--section-bg-image, none);
}
:is(.bg-image-secondary, .bg-video-secondary) {
--_ov: color-mix(in oklch, var(--av-color-secondary) calc(80% * var(--av-bg-overlay-scale, 1)), transparent);
--av-bg-overlay: linear-gradient(var(--_ov), var(--_ov));
}
.bg-image-secondary {
background-image: var(--av-bg-overlay), var(--section-bg-image, none);
}
:is(.bg-image-gradient, .bg-video-gradient) {
--av-bg-overlay: linear-gradient(180deg,
color-mix(in oklch, var(--av-color-primary) calc(84% * var(--av-bg-overlay-scale, 1)), transparent),
oklch(0% 0 0 / calc(73% * var(--av-bg-overlay-scale, 1))));
}
.bg-image-gradient {
background-image: var(--av-bg-overlay), var(--section-bg-image, none);
}
.has-bg-video {
position: relative;
isolation: isolate;
overflow: hidden;
}
.section-video {
position: absolute;
inset: 0;
z-index: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
}
:is(.bg-video-dark, .bg-video-light, .bg-video-brand,
.bg-video-secondary, .bg-video-gradient).has-bg-video::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: var(--av-bg-overlay);
}
.has-bg-video > *:not(.section-video, .section-video__toggle) {
position: relative;
z-index: 2;
}
.section-video__toggle {
position: absolute;
z-index: 3;
inset-block-end: var(--av-space-sm);
inset-inline-end: var(--av-space-sm);
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border: 1px solid oklch(100% 0 0 / 35%);
border-radius: 50%;
background: oklch(0% 0 0 / 42%);
color: oklch(100% 0 0);
cursor: pointer;
}
.section-video__toggle:hover { background: oklch(0% 0 0 / 75%); }
.section-video__toggle:focus-visible {
outline: 2px solid oklch(100% 0 0);
outline-offset: 2px;
}
.section-video__toggle svg {
inline-size: 1.125rem;
block-size: 1.125rem;
fill: currentColor;
}
.section-video__icon--play  { display: none; }
.is-video-paused .section-video__icon--play  { display: block; }
.is-video-paused .section-video__icon--pause { display: none; }
.bg-blur {
--av-bg-blur: 8px;
position: relative;
isolation: isolate;
overflow: hidden;
}
:is(.bg-image, .bg-image-dark, .bg-image-light, .bg-image-brand, .bg-image-secondary, .bg-image-gradient).bg-blur {
background-image: none;
}
.bg-blur::before {
content: '';
position: absolute;
inset: calc(var(--av-bg-blur) * -2);
z-index: 1;
background-image: var(--section-bg-sm, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(var(--av-bg-blur));
}
@media (min-width: 768px)  { .bg-blur::before { background-image: var(--section-bg-md, none); } }
@media (min-width: 1200px) { .bg-blur::before { background-image: var(--section-bg-lg, none); } }
.bg-image-dark.bg-blur::after,
.bg-image-light.bg-blur::after,
.bg-image-brand.bg-blur::after,
.bg-image-secondary.bg-blur::after,
.bg-image-gradient.bg-blur::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
:is(.bg-image-dark, .bg-image-light, .bg-image-brand, .bg-image-secondary, .bg-image-gradient).bg-blur::after {
background: var(--av-bg-overlay);
}
.bg-blur > * { position: relative; z-index: 3; }
:is(.bg-image-dark, .bg-image-brand, .bg-image-secondary, .bg-image-gradient, .bg-gradient-animated, .bg-gradient-secondary) {
color: white;
--av-section-color:    white;
--av-color-text:       white;
--av-color-text-muted: oklch(100% 0 0 / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 12%);
--av-color-surface-3:  oklch(100% 0 0 / 20%);
--av-color-border:     oklch(100% 0 0 / 25%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
--av-card-bg:          oklch(100% 0 0 / 15%);
}
.style-light {
color: white;
--av-section-color:    white;
--av-color-text:       white;
--av-color-text-muted: oklch(100% 0 0 / var(--av-muted-strength-inv));
--av-color-surface-2:  oklch(100% 0 0 / 12%);
--av-card-bg:         var(--av-color-surface-2);
--av-color-surface-3:  oklch(100% 0 0 / 20%);
--av-color-border:     oklch(100% 0 0 / 25%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
}
.text-on-light {
color: var(--gray-9);
--av-section-color:    var(--gray-9);
--av-color-text:       var(--gray-9);
--av-color-text-muted: color-mix(in oklch, var(--gray-9) var(--av-muted-strength), transparent);
--av-color-border:     oklch(0% 0 0 / 20%);
--av-border:     var(--av-border-width) solid var(--av-color-border);
--av-card-border: var(--av-card-border-width) solid var(--av-color-border);
}
:is(.style-dark, .style-light, .bg-gradient-dark, .bg-image-dark, .style-glass-dark):not(.text-on-light) {
--av-color-primary-text:   var(--av-color-primary-on-dark);
--av-color-secondary-text: var(--av-color-secondary-on-dark);
}
.color-primary {
color: var(--av-color-primary-text);
--av-section-color: var(--av-color-primary-text);
--av-color-text:    var(--av-color-primary-text);
}
.color-secondary {
color: var(--av-color-secondary-text);
--av-section-color: var(--av-color-secondary-text);
--av-color-text:    var(--av-color-secondary-text);
}
.cards-solid {
--av-color-surface-2: color-mix(in oklch, var(--av-color-surface), black 80%);
--av-color-surface-3: color-mix(in oklch, var(--av-color-surface), black 74%);
--av-card-bg:         color-mix(in oklch, var(--av-color-surface), black 80%);
}
.cards-primary {
--av-color-surface-2: color-mix(in oklch, var(--av-color-primary), black 62%);
--av-color-surface-3: color-mix(in oklch, var(--av-color-primary), black 54%);
--av-card-bg:         color-mix(in oklch, var(--av-color-primary), black 62%);
}
.cards-secondary {
--av-color-surface-2: color-mix(in oklch, var(--av-color-secondary), black 62%);
--av-color-surface-3: color-mix(in oklch, var(--av-color-secondary), black 54%);
--av-card-bg:         color-mix(in oklch, var(--av-color-secondary), black 62%);
}
.media-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
overflow: hidden;
background: var(--av-card-bg);
border: var(--av-card-border);
border-radius: var(--av-card-radius);
box-shadow: var(--av-card-shadow);
}
.media-card:hover {
box-shadow: var(--av-card-shadow-hover);
transform: translateY(calc(-1 * var(--av-card-lift)));
}
.media-card > .content-image:first-child figure {
inline-size: 100%;
max-inline-size: none;
margin: 0;
}
.media-card > .content-image:first-child :is(a, picture) { display: block; }
.media-card > .content-image:first-child img {
display: block;
inline-size: 100%;
block-size: auto;
}
.media-card > :not(.content-image:first-child) {
padding: var(--av-card-padding);
text-align: var(--av-card-align);
}
}
@layer av.typography {
:where([class*="content-"]) {
--av-el-font-size:   initial;
--av-el-color:       initial;
--av-el-line-height: initial;
--av-el-soft:        initial;
}
.display-1 {
text-transform: var(--av-display-transform);
--av-el-font-size:   var(--av-text-display-1);
--av-el-line-height: var(--av-leading-display);
font-weight: var(--av-heading-weight);
letter-spacing: var(--av-tracking-tight);
text-wrap: balance;
}
.display-2 {
text-transform: var(--av-display-transform);
--av-el-font-size:   var(--av-text-display-2);
--av-el-line-height: var(--av-leading-display);
font-weight: var(--av-heading-weight);
letter-spacing: var(--av-tracking-tight);
text-wrap: balance;
}
.display-3 {
text-transform: var(--av-display-transform);
--av-el-font-size:   var(--av-text-display-3);
--av-el-line-height: var(--av-leading-tight);
font-weight: var(--av-heading-weight);
letter-spacing: var(--av-tracking-tight);
text-wrap: balance;
}
.lead {
--av-el-font-size: var(--av-text-lg);
--av-el-soft:      var(--av-muted-strength, 70%);
line-height: var(--av-leading-snug);
text-wrap: pretty;
max-inline-size: var(--av-prose-width);
}
.text-xs   { --av-el-font-size: var(--av-text-xs); }
.text-sm   { --av-el-font-size: var(--av-text-sm); }
.text-base { --av-el-font-size: var(--av-text-base); }
.text-md   { --av-el-font-size: var(--av-text-md); }
.text-lg   { --av-el-font-size: var(--av-text-lg); }
.text-xl   { --av-el-font-size: var(--av-text-xl); }
.text-2xl  { --av-el-font-size: var(--av-text-2xl); }
.text-3xl  { --av-el-font-size: var(--av-text-3xl); }
.text-muted     { --av-el-soft: var(--av-muted-strength, 70%); }
.text-base      { --av-el-color: var(--av-color-text); }
.text-primary   { --av-el-color: var(--av-color-primary-text); }
.text-secondary { --av-el-color: var(--av-color-secondary-text); }
.text-shadow    { text-shadow: var(--av-text-shadow-md); }
.text-shadow-sm { text-shadow: var(--av-text-shadow-sm); }
.text-shadow-md { text-shadow: var(--av-text-shadow-md); }
.text-shadow-lg { text-shadow: var(--av-text-shadow-lg); }
.text-glow    { text-shadow: var(--av-text-glow-md); }
.text-glow-sm { text-shadow: var(--av-text-glow-sm); }
.text-glow-md { text-shadow: var(--av-text-glow-md); }
.text-glow-lg { text-shadow: var(--av-text-glow-lg); }
.section-label {
--av-el-font-size: var(--av-text-xs);
font-weight: var(--av-weight-bold);
text-transform: uppercase;
letter-spacing: var(--av-tracking-wide);
color: var(--av-color-text-muted);
margin-block-end: var(--av-space-sm);
}
.eyebrow {
--av-el-font-size: var(--av-text-sm);
letter-spacing: var(--av-tracking-widest);
text-transform: uppercase;
margin-block-end: var(--av-space-lg);
&:not(:has(p)) {
border-block-end: var(--av-border);
padding-block-end: var(--av-space-xs);
}
& p {
border-block-end: var(--av-border);
padding-block-end: var(--av-space-xs);
margin-block-end: 0;
}
}
:is(.links-plain, .links-hover-underline, .links-underline) {
--av-link-underline-style-hover: solid;
--av-link-thickness-hover: 1px;
--av-link-mark: transparent;
--av-link-mark-size: 0% 0%;
--av-link-mark-size-hover: 0% 0%;
--av-link-hover-ink: var(--av-link-hover);
--av-link-pad: 0;
--av-link-block: var(--av-link);
}
.links-plain {
--av-link-underline: none;
--av-link-underline-hover: none;
}
.links-hover-underline {
--av-link-underline: none;
--av-link-underline-hover: underline;
}
.links-underline {
--av-link-underline: underline;
--av-link-underline-hover: underline;
}
.badge {
display: inline-block;
align-self: flex-start;
font-size: var(--av-text-xs);
background: var(--av-color-primary);
color: var(--av-color-text-on-primary);
padding: .15em .5em;
border-radius: var(--av-radius-sm);
letter-spacing: var(--av-tracking-wide);
text-transform: uppercase;
}
.text-scale--sm h1 { font-size: var(--av-text-2xl); }
.text-scale--sm h2 { font-size: var(--av-text-xl); }
.text-scale--sm h3 { font-size: var(--av-text-lg); }
:is(.text-scale--lg h1, .text-scale--lg h2, .text-scale--lg h3) { text-transform: var(--av-display-transform); }
.text-scale--lg h1 { font-size: var(--av-text-display-1); }
.text-scale--lg h2 { font-size: var(--av-text-display-1); }
.text-scale--lg h3 { font-size: var(--av-text-display-2); }
:is(.text-scale--display h1, .text-scale--display h2, .text-scale--display h3) { text-transform: var(--av-display-transform); }
.text-scale--display h1 { font-size: var(--av-text-display-1); letter-spacing: var(--av-tracking-tight); font-weight: min(900, calc(var(--av-heading-weight) + 100)); }
.text-scale--display h2 { font-size: var(--av-text-display-1); letter-spacing: var(--av-tracking-tight); font-weight: min(900, calc(var(--av-heading-weight) + 100)); }
.text-scale--display h3 { font-size: var(--av-text-display-2); letter-spacing: var(--av-tracking-tight); }
.measure      { --av-heading-measure: var(--av-heading-measure-on); }
.measure-none { --av-heading-measure: none; }
.measure-45 { max-inline-size: 45ch; }
.measure-50 { max-inline-size: 50ch; }
.measure-60 { max-inline-size: 60ch; }
.measure-70 { max-inline-size: 70ch; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.font-light  { font-weight: var(--av-weight-light); }
.font-normal { font-weight: var(--av-weight-normal); }
.font-medium { font-weight: var(--av-weight-medium); }
.font-semi   { font-weight: var(--av-weight-semi); }
.font-bold   { font-weight: var(--av-weight-bold); }
.font-extrabold { font-weight: var(--av-weight-extra); }
.font-black     { font-weight: var(--av-weight-black); }
.tracking-tight   { letter-spacing: var(--av-tracking-tight); }
.tracking-normal  { letter-spacing: var(--av-tracking-normal); }
.tracking-wide    { letter-spacing: var(--av-tracking-wide); }
.tracking-widest  { letter-spacing: var(--av-tracking-widest); }
.leading-none    { line-height: var(--av-leading-none);    --av-el-line-height: var(--av-leading-none); }
.leading-display { line-height: var(--av-leading-display); --av-el-line-height: var(--av-leading-display); }
.leading-tight   { line-height: var(--av-leading-tight);   --av-el-line-height: var(--av-leading-tight); }
.leading-snug    { line-height: var(--av-leading-snug);    --av-el-line-height: var(--av-leading-snug); }
.leading-body    { line-height: var(--av-leading-body);    --av-el-line-height: var(--av-leading-body); }
.leading-loose   { line-height: var(--av-leading-loose);   --av-el-line-height: var(--av-leading-loose); }
.prose {
max-inline-size: var(--av-prose-width);
line-height: var(--av-leading-body);
& > * + * {
margin-block-start: var(--av-space-sm);
}
& h2 {
font-size: var(--av-text-2xl);
margin-block: var(--av-space-xl) var(--av-space-sm);
}
& h3 {
font-size: var(--av-text-xl);
margin-block: var(--av-space-lg) var(--av-space-xs);
}
& h4 {
font-size: var(--av-text-lg);
margin-block: var(--av-space-md) var(--av-space-xs);
}
& p {
margin-block: 0 var(--av-space-sm);
}
& ul, & ol {
padding-inline-start: var(--av-space-lg);
margin-block: 0 var(--av-space-md);
}
& li + li {
margin-block-start: var(--av-space-2xs);
}
& blockquote {
border-inline-start: 3px solid var(--av-color-primary-text);
margin-inline: 0;
padding-inline: var(--av-space-md);
padding-block: var(--av-space-xs);
margin-block: var(--av-space-md);
font-style: italic;
font-size: var(--av-text-lg);
color: var(--av-color-text-muted);
}
& pre {
margin-block: var(--av-space-md);
}
& table {
min-inline-size: 100%;
}
& .table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-block: var(--av-space-md);
}
& figure {
margin-block: var(--av-space-md);
}
& hr {
margin-block: var(--av-space-xl);
}
& a {
text-decoration: underline;
text-underline-offset: .2em;
}
}
.prose--sm {
font-size: var(--av-text-sm);
--av-prose-width: 60ch;
}
.prose--lg {
font-size: var(--av-text-md);
--av-prose-width: 72ch;
}
}
@layer av.forms {
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"])),
select,
textarea {
display: block;
inline-size: 100%;
min-block-size: var(--av-input-height);
padding: var(--av-input-padding);
font-family: inherit;
font-size: var(--av-text-base);
line-height: var(--av-leading-snug);
--av-color-text:       light-dark(var(--gray-9), var(--gray-1));
--av-color-text-muted: light-dark(var(--gray-6), var(--gray-5));
--av-color-surface-2:  light-dark(var(--gray-1), var(--gray-8));
color: var(--av-color-text);
background-color: var(--av-color-surface);
border: var(--av-border);
border-radius: var(--av-input-radius);
appearance: none;
transition:
border-color var(--av-duration-fast) var(--av-ease-out),
box-shadow   var(--av-duration-fast) var(--av-ease-out);
&:focus {
outline: none;
border-color: var(--av-color-primary-text);
box-shadow: 0 0 0 3px oklch(from var(--av-color-primary) l c h / 20%);
}
&:disabled {
opacity: .5;
cursor: not-allowed;
background-color: var(--av-color-surface-2);
}
&::placeholder {
color: var(--av-color-text-muted);
}
}
textarea {
min-block-size: 8rem;
resize: vertical;
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--av-space-sm) center;
padding-inline-end: var(--av-space-2xl);
}
label {
display: block;
font-size: var(--av-text-sm);
font-weight: var(--av-weight-medium);
margin-block-end: var(--av-space-2xs);
color: var(--av-color-text);
& .mandatory {
color: var(--av-color-error-text);
margin-inline-start: .15em;
}
}
.widget {
display: flex;
flex-direction: column;
gap: var(--av-space-2xs);
margin-block-end: var(--av-space-md);
}
.checkbox_container,
.radio_container {
border: 0;
padding: 0;
margin: 0 0 var(--av-space-md);
}
.checkbox_container span:has(> input),
.radio_container span:has(> input) {
display: flex;
align-items: center;
gap: var(--av-space-xs);
}
.checkbox_container span:has(> input) + span:has(> input),
.radio_container span:has(> input) + span:has(> input) {
margin-block-start: var(--av-space-2xs);
}
.checkbox_container label,
.radio_container label {
display: inline;
margin: 0;
font-weight: var(--av-weight-normal);
cursor: pointer;
}
.checkbox_container > legend,
.radio_container > legend {
font-size: var(--av-text-sm);
font-weight: var(--av-weight-medium);
color: var(--av-color-text);
margin-block-end: var(--av-space-2xs);
padding-inline: 0;
}
.checkbox_container input[type="checkbox"],
.radio_container input[type="radio"],
.widget-checkbox input[type="checkbox"],
.widget-radio input[type="radio"] {
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color: var(--av-color-primary);
flex-shrink: 0;
cursor: pointer;
}
.widget-checkbox label:has(> input),
.widget-radio label:has(> input) {
display: flex;
align-items: center;
gap: var(--av-space-xs);
font-weight: var(--av-weight-normal);
cursor: pointer;
}
fieldset {
border: var(--av-border);
border-radius: var(--av-radius-md);
padding: var(--av-space-md);
margin: 0 0 var(--av-space-md);
}
legend {
font-weight: var(--av-weight-semi);
font-size: var(--av-text-sm);
padding-inline: var(--av-space-xs);
color: var(--av-color-text-muted);
}
.widget.error {
& input, & select, & textarea {
border-color: var(--av-color-error);
&:focus {
box-shadow: 0 0 0 3px oklch(from var(--av-color-error) l c h / 20%);
}
}
& p.error {
font-size: var(--av-text-sm);
color: var(--av-color-error-text);
margin-block: var(--av-space-2xs) 0;
}
}
.widget.valid {
& input, & select, & textarea {
border-color: var(--av-color-success);
}
}
:is(a.btn, button.btn, :not(a,button).btn > a, button[type="submit"], input[type="submit"]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--av-space-xs);
padding: calc(var(--av-space-xs) * var(--av-btn-scale, 1)) calc(var(--av-space-lg) * var(--av-btn-scale, 1));
font-family: inherit;
font-size: calc(var(--av-text-base) * var(--av-btn-scale, 1));
font-weight: var(--av-weight-medium);
line-height: var(--av-leading-none);
min-block-size: calc(var(--av-input-height) * var(--av-btn-scale, 1));
border-radius: var(--av-btn-radius, var(--av-input-radius));
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
max-inline-size: 100%;
white-space: normal;
overflow-wrap: break-word;
text-align: center;
transition:
background-color var(--av-duration-base) var(--av-ease-out),
border-color     var(--av-duration-base) var(--av-ease-out),
box-shadow       var(--av-duration-base) var(--av-ease-out),
transform        var(--av-duration-base) var(--av-ease-out),
translate        var(--av-duration-base) var(--av-ease-out);
box-shadow: var(--av-btn-shadow-rest);
&:hover { box-shadow: var(--av-btn-shadow-hover); }
@media (prefers-reduced-motion: no-preference) {
&:hover {
translate:
calc(-1 * var(--av-btn-lift) * var(--av-btn-lift-diag))
calc(-1 * var(--av-btn-lift));
}
}
&:active  { transform: translateY(1px); }
&:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
}
:is(a.btn, button.btn, :not(a,button).btn > a, button[type="submit"], input[type="submit"]) {
background-color: var(--_btn-bg, var(--av-color-primary));
color: var(--_btn-fg, var(--av-color-text-on-primary));
&:hover       { background-color: var(--_btn-bg-hover, var(--av-color-primary-dark)); }
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px oklch(from var(--av-color-primary) l c h / 30%);
}
}
:is(a.btn--secondary, button.btn--secondary, :not(a,button).btn--secondary > a, :not(a,button).btn--secondary > button) {
background-color: var(--av-color-secondary);
color: var(--av-color-text-on-secondary);
border-color: transparent;
&:hover { background-color: var(--av-color-secondary-dark); }
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px oklch(from var(--av-color-secondary) l c h / 30%);
}
}
:is(a.btn--neutral, button.btn--neutral, :not(a,button).btn--neutral > a, :not(a,button).btn--neutral > button) {
background-color: var(--av-color-surface-2);
color: var(--av-color-text);
border-color: var(--av-color-border);
&:hover { background-color: var(--av-color-surface-3); border-color: var(--av-color-text-muted); }
}
:is(a.btn--outline, button.btn--outline, :not(a,button).btn--outline > a, :not(a,button).btn--outline > button) {
background-color: transparent;
color: var(--av-color-primary-text);
border-color: var(--av-color-primary-text);
&:hover { background-color: var(--av-color-primary); color: var(--av-color-text-on-primary); }
}
:is(a.btn--outline-secondary, button.btn--outline-secondary, :not(a,button).btn--outline-secondary > a, :not(a,button).btn--outline-secondary > button) {
background-color: transparent;
color: var(--av-color-secondary-text);
border-color: var(--av-color-secondary-text);
&:hover { background-color: var(--av-color-secondary); color: var(--av-color-text-on-secondary); }
}
:is(a.btn--ghost, button.btn--ghost, :not(a,button).btn--ghost > a, :not(a,button).btn--ghost > button) {
background-color: transparent;
color: var(--av-color-text);
border-color: transparent;
&:hover { background-color: var(--av-color-surface-2); }
}
:is(a.btn--sm, button.btn--sm, :not(a,button).btn--sm > a, :not(a,button).btn--sm > button) {
font-size: calc(var(--av-text-sm) * var(--av-btn-scale, 1));
padding: calc(var(--av-space-2xs) * var(--av-btn-scale, 1)) calc(var(--av-space-md) * var(--av-btn-scale, 1));
min-block-size: calc(2rem * var(--av-btn-scale, 1));
}
:is(a.btn--lg, button.btn--lg, :not(a,button).btn--lg > a, :not(a,button).btn--lg > button) {
font-size: calc(var(--av-text-md) * var(--av-btn-scale, 1));
padding: calc(var(--av-space-sm) * var(--av-btn-scale, 1)) calc(var(--av-space-xl) * var(--av-btn-scale, 1));
min-block-size: calc(3.25rem * var(--av-btn-scale, 1));
}
:is(a.btn--full, button.btn--full, :not(a,button).btn--full > a, :not(a,button).btn--full > button) { inline-size: 100%; }
:not(a, button).btn--full {
display: block;
inline-size: 100%;
}
:is(a.btn--soft, button.btn--soft, :not(a,button).btn--soft > a, :not(a,button).btn--soft > button) {
background-color: oklch(from var(--av-color-primary) l c h / 12%);
color: var(--av-color-primary-text);
border-color: transparent;
&:hover { background-color: oklch(from var(--av-color-primary) l c h / 22%); }
}
:is(a.btn--dark, button.btn--dark, :not(a,button).btn--dark > a, :not(a,button).btn--dark > button) {
background-color: var(--av-color-dark-surface);
color: var(--av-color-on-dark-surface);
border-color: transparent;
&:hover { background-color: oklch(from var(--av-color-dark-surface) calc(l + 0.083) c h); }
}
:is(a.btn--glass, button.btn--glass, :not(a,button).btn--glass > a, :not(a,button).btn--glass > button) {
background: oklch(100% 0 0 / var(--av-glass-tint));
backdrop-filter: blur(var(--av-glass-blur));
-webkit-backdrop-filter: blur(var(--av-glass-blur));
border-color: oklch(100% 0 0 / calc(var(--av-glass-tint) + 16%));
color: white;
&:hover { background: oklch(100% 0 0 / calc(var(--av-glass-tint) + 10%)); }
}
:is(a.btn--shadow-sm, button.btn--shadow-sm, :not(a,button).btn--shadow-sm > a, :not(a,button).btn--shadow-sm > button) { --av-btn-shadow-rest: var(--av-btn-shadow-sm); --av-btn-shadow-hover: var(--av-btn-shadow-sm); --av-btn-lift: 0px; }
:is(a.btn--shadow,    button.btn--shadow,    :not(a,button).btn--shadow > a, :not(a,button).btn--shadow > button),
:is(a.btn--shadow-md, button.btn--shadow-md, :not(a,button).btn--shadow-md > a, :not(a,button).btn--shadow-md > button) { --av-btn-shadow-rest: var(--av-btn-shadow-md); --av-btn-shadow-hover: var(--av-btn-shadow-md); --av-btn-lift: 0px; }
:is(a.btn--shadow-lg, button.btn--shadow-lg, :not(a,button).btn--shadow-lg > a, :not(a,button).btn--shadow-lg > button) { --av-btn-shadow-rest: var(--av-btn-shadow-lg); --av-btn-shadow-hover: var(--av-btn-shadow-lg); --av-btn-lift: 0px; }
:is(a.btn--glow-sm, button.btn--glow-sm, :not(a,button).btn--glow-sm > a, :not(a,button).btn--glow-sm > button) { --av-btn-shadow-rest: var(--av-glow-sm); --av-btn-shadow-hover: var(--av-glow-sm); --av-btn-lift: 0px; }
:is(a.btn--glow,    button.btn--glow,    :not(a,button).btn--glow > a, :not(a,button).btn--glow > button),
:is(a.btn--glow-md, button.btn--glow-md, :not(a,button).btn--glow-md > a, :not(a,button).btn--glow-md > button) { --av-btn-shadow-rest: var(--av-glow-md); --av-btn-shadow-hover: var(--av-glow-md); --av-btn-lift: 0px; }
:is(a.btn--glow-lg, button.btn--glow-lg, :not(a,button).btn--glow-lg > a, :not(a,button).btn--glow-lg > button) { --av-btn-shadow-rest: var(--av-glow-lg); --av-btn-shadow-hover: var(--av-glow-lg); --av-btn-lift: 0px; }
.btn--hover-shadow-sm { --av-btn-shadow-hover: var(--av-btn-shadow-sm); --av-btn-lift: var(--av-btn-lift-sm); }
.btn--hover-shadow,
.btn--hover-shadow-md { --av-btn-shadow-hover: var(--av-btn-shadow-md); --av-btn-lift: var(--av-btn-lift-md); }
.btn--hover-shadow-lg { --av-btn-shadow-hover: var(--av-btn-shadow-lg); --av-btn-lift: var(--av-btn-lift-lg); }
.btn--hover-flat      { --av-btn-shadow-hover: var(--av-btn-shadow-rest); --av-btn-lift: 0px; }
:is(a.btn--pill, button.btn--pill, :not(a,button).btn--pill > a, :not(a,button).btn--pill > button) { border-radius: 99px; }
:is(a.btn--icon, button.btn--icon, :not(a,button).btn--icon > a, :not(a,button).btn--icon > button) {
padding: var(--av-space-xs);
aspect-ratio: 1;
}
.widget-submit {
margin-block-start: var(--av-space-lg);
align-items: flex-start;
}
}
@layer av.components {
.content-image figure {
inline-size: fit-content;
max-inline-size: 100%;
margin-block: 0;
margin-inline: auto;
}
.content-image figure img {
display: block;
max-inline-size: 100%;
height: auto;
}
#main figure img {
filter: var(--av-img-filter);
}
.image--original { --av-img-filter: none; }
.content-image.image--cover figure {
inline-size: 100%;
aspect-ratio: var(--av-fig-ar, 3 / 2);
overflow: hidden;
}
.content-image.image--cover figure img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
figure:has(.ave-ai-label) {
position: relative;
}
.ave-ai-label {
--_ai-inset: var(--av-space-xs);
display: block;
inline-size: fit-content;
max-inline-size: calc(100% - 2 * var(--_ai-inset));
padding: 0.2em 0.6em;
border-radius: var(--av-radius-sm);
font-size: var(--av-text-xs);
font-weight: var(--av-weight-medium);
line-height: 1.3;
text-align: start;
}
.ave-ai-label--sm { font-size: calc(var(--av-text-xs) * 0.85); }
.ave-ai-label--lg { font-size: var(--av-text-sm); }
.ave-ai-label--dark   { background: rgb(0 0 0 / 0.72);       color: #fff; }
.ave-ai-label--light  { background: rgb(255 255 255 / 0.9);  color: #111; }
.ave-ai-label--accent { background: var(--av-color-primary); color: var(--av-color-text-on-primary); }
.ave-ai-label:not(.ave-ai-label--below) {
position: absolute;
z-index: 1;
pointer-events: none;   
}
.ave-ai-label--top-left     { top: var(--_ai-inset);    left: var(--_ai-inset); }
.ave-ai-label--top-right    { top: var(--_ai-inset);    right: var(--_ai-inset); }
.ave-ai-label--bottom-left  { bottom: var(--_ai-inset); left: var(--_ai-inset); }
.ave-ai-label--bottom-right { bottom: var(--_ai-inset); right: var(--_ai-inset); }
.ave-ai-label--below {
margin-block-start: var(--av-space-xs);
}
@supports (anchor-name: --ave-ai-img) {
figure:has(.ave-ai-label) img {
anchor-name: --ave-ai-img;
}
.ave-ai-label:not(.ave-ai-label--below) {
position-anchor: --ave-ai-img;
max-inline-size: calc(anchor-size(width) - 2 * var(--_ai-inset));
}
.ave-ai-label--top-left     { top: calc(anchor(top) + var(--_ai-inset));       left: calc(anchor(left) + var(--_ai-inset)); }
.ave-ai-label--top-right    { top: calc(anchor(top) + var(--_ai-inset));       right: calc(anchor(right) + var(--_ai-inset)); }
.ave-ai-label--bottom-left  { bottom: calc(anchor(bottom) + var(--_ai-inset)); left: calc(anchor(left) + var(--_ai-inset)); }
.ave-ai-label--bottom-right { bottom: calc(anchor(bottom) + var(--_ai-inset)); right: calc(anchor(right) + var(--_ai-inset)); }
}
.content-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-inline-size: 100%;
}
:is(.rte, .content-text) table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-inline-size: 100%;
}
.content-description-list dl {
display: grid;
grid-template-columns: var(--av-dl-term-width) 1fr;
margin-block: 0;
}
.content-description-list :is(dt, dd) {
margin: 0;
padding-block: var(--av-space-xs);
border-block-start: var(--av-border);
}
.content-description-list dt {
font-weight: var(--av-weight-semi);
padding-inline-end: var(--av-space-md);
}
.content-description-list dd {
color: var(--av-color-text-muted);
}
.content-description-list.description-list--plain :is(dt, dd) {
border-block-start: 0;
padding-block: var(--av-space-2xs);
}
.content-description-list.description-list--stacked dl {
grid-template-columns: 1fr;
}
.content-description-list.description-list--stacked dd {
padding-block-start: 0;
border-block-start: 0;
}
@media (max-width: 600px) {
.content-description-list dl {
grid-template-columns: 1fr;
}
.content-description-list dd {
padding-block-start: 0;
border-block-start: 0;
}
}
.media--left,
.media--right {
display: flex;
gap: var(--av-space-lg);
align-items: flex-start;
& figure {
flex-shrink: 0;
width: var(--av-media-width, clamp(160px, 40%, 480px));
margin: 0;
}
& .rte {
min-width: 0;
}
}
.media--right {
flex-direction: row-reverse;
}
@media (max-width: 600px) {
.media--left,
.media--right {
flex-direction: column;
& figure {
width: 100%;
}
}
}
.media--wrap-left,
.media--wrap-right {
display: flow-root;               
}
.media--wrap-left > figure,
.media--wrap-right > figure {
width: var(--av-media-width, clamp(140px, 38%, 420px));
margin-block: var(--av-space-2xs) var(--av-space-sm);
}
.media--wrap-right > figure { float: inline-end;   margin-inline-start: var(--av-space-lg); }
.media--wrap-left  > figure { float: inline-start; margin-inline-end:  var(--av-space-lg); }
@media (max-width: 600px) {
.media--wrap-left > figure,
.media--wrap-right > figure { float: none; width: 100%; margin-inline: 0; }
}
.image-left  > figure { inline-size: fit-content; max-inline-size: 100%; margin-inline: 0 auto; }
.image-right > figure { inline-size: fit-content; max-inline-size: 100%; margin-inline: auto 0; }
.content-hyperlink {
display: inline-flex;
align-items: start;
justify-self: start;
}
.content-hyperlink a {
display: inline-flex;
align-items: center;
gap: var(--av-space-2xs);
}
.content-toplink a {
display: inline-flex;
align-items: center;
gap: var(--av-space-xs);
}
.mod_breadcrumb ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--av-space-2xs);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--av-text-sm);
}
.mod_breadcrumb li + li::before {
content: '';
display: inline-block;
width: .875em;
height: .875em;
background-color: var(--av-color-text-muted);
-webkit-mask-image: url(../icons/chevron-right.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../icons/chevron-right.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
flex-shrink: 0;
}
.content-accordion {
border-block: var(--av-border);
}
.handorgel__header {
all: unset;
display: block;
}
.handorgel__header:not(:first-child) {
border-block-start: var(--av-border);
}
.handorgel__header__button {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--av-space-sm);
width: 100%;
padding-block: var(--av-space-md);
font-family: inherit;
font-size: var(--av-text-base);
font-weight: var(--av-weight-medium);
color: var(--av-color-text);
background: none;
border: none;
cursor: pointer;
text-align: start;
transition: color var(--av-duration-fast) var(--av-ease-out);
&:hover { color: var(--av-color-primary-text); }
&::after {
content: '';
display: inline-block;
flex-shrink: 0;
margin-inline-start: auto;
width: 1.25em;
height: 1.25em;
background-color: currentColor;
-webkit-mask-image: url(../icons/chevron-down.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../icons/chevron-down.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
transition: transform var(--av-duration-base) var(--av-ease-out);
}
}
.handorgel__header--open .handorgel__header__button,
.handorgel__item--open .handorgel__header__button {
color: var(--av-color-primary-text);
&::after { transform: rotate(180deg); }
}
.handorgel__content {
overflow: hidden;
}
.handorgel__content__inner {
padding-block: var(--av-space-md);
padding-inline-end: var(--av-space-2xl);
}
.pagination ul {
display: flex;
align-items: center;
gap: var(--av-space-xs);
list-style: none;
padding: 0;
margin: 0;
}
.pagination a,
.pagination strong {
display: flex;
align-items: center;
justify-content: center;
min-width: 2rem;
padding: var(--av-space-2xs) var(--av-space-xs);
border-radius: var(--av-radius-md);
font-size: var(--av-text-sm);
text-decoration: none;
border: var(--av-border);
}
.pagination a:hover { background: var(--av-color-surface-2); }
.pagination strong.active {
background: var(--av-color-primary);
color: var(--av-color-text-on-primary);
border-color: var(--av-color-primary-text);
font-weight: var(--av-weight-medium);
}
.pagination .first .icon,
.pagination .last .icon { width: .75em; height: .75em; }
.alert,
p.confirm {
padding: var(--av-space-sm) var(--av-space-md);
border-radius: var(--av-radius-md);
border: 1px solid transparent;
font-size: var(--av-text-sm);
line-height: var(--av-leading-snug);
margin-block-end: var(--av-space-md);
}
.alert--info {
background: oklch(from var(--av-color-info) l c h / 12%);
border-color: oklch(from var(--av-color-info) l c h / 30%);
color: var(--av-color-info-text);
}
.alert--success,
p.confirm {
background: oklch(from var(--av-color-success) l c h / 12%);
border-color: oklch(from var(--av-color-success) l c h / 30%);
color: var(--av-color-success-text);
}
.alert--warning {
background: oklch(from var(--av-color-warning) l c h / 12%);
border-color: oklch(from var(--av-color-warning) l c h / 30%);
color: var(--av-color-warning-text);
}
.alert--error {
background: oklch(from var(--av-color-error) l c h / 12%);
border-color: oklch(from var(--av-color-error) l c h / 30%);
color: var(--av-color-error-text);
}
}
@layer av.theme {
#header {
position: var(--av-header-position, sticky);
inset-inline: var(--av-header-inset, auto);
top: 0;
z-index: var(--av-z-sticky);
background: var(--av-header-bg, var(--av-color-surface));
color: var(--av-header-color, var(--av-color-text));
border-block-end: var(--av-header-border, var(--av-border));
transition:
top        var(--av-duration-base) var(--av-ease-out),
background var(--av-duration-base) var(--av-ease-out);
&.is-scrolled {
background: color-mix(in srgb, var(--av-header-bg, var(--av-color-surface)) var(--av-header-opacity, 75%), transparent);
backdrop-filter: var(--av-header-backdrop, blur(var(--av-glass-blur)));
-webkit-backdrop-filter: var(--av-header-backdrop, blur(var(--av-glass-blur)));
}
&.header--hidden {
top: calc(-1 * var(--av-header-measured, var(--av-header-height, 100px)));
}
& .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--av-space-md);
padding-block: var(--av-space-sm);
min-block-size: var(--av-header-height);
}
}
#header {
--_btn-bg:       var(--av-header-btn-bg, var(--av-color-primary));
--_btn-fg:       var(--av-header-btn-color, var(--av-color-text-on-primary));
--_btn-bg-hover: color-mix(in srgb,
var(--av-header-btn-bg, var(--av-color-primary)),
var(--av-header-btn-color, var(--av-color-text-on-primary)) 18%);
}
#site-logo {
flex-shrink: 0;
& figure {
margin: 0;
line-height: 0;
}
& :is(img, svg) {
display: block;
height: var(--av-header-logo-height, 2rem);
width: auto;
}
}
.logo-tint {
--_logo-ink: currentColor;
--_logo-accent: var(--av-color-primary-text);
}
#header .logo-tint {
--_logo-ink: var(--av-header-color, var(--av-color-text));
--_logo-accent: var(--av-header-accent, var(--av-color-primary-text));
}
#footer .logo-tint {
--_logo-ink: var(--av-footer-color, var(--av-color-text));
--_logo-accent: var(--av-footer-accent, var(--av-color-primary-text));
}
.logo-tint .logo-svg {
display: block;
max-inline-size: 100%;
height: auto;
& :is(.logo-word, .logo-word *) {
fill: var(--_logo-ink);
}
& :is(.logo-mark, .logo-mark *) {
fill: var(--_logo-accent);
}
& .logo-word [stroke]:not([stroke="none"]) { stroke: var(--_logo-ink); }
& .logo-mark [stroke]:not([stroke="none"]) { stroke: var(--_logo-accent); }
}
#site-logo.logo-tint .logo-svg { height: var(--av-header-logo-height, 2rem); width: auto; }
.logo-mask {
position: relative;
display: inline-block;
line-height: 0;
& img { visibility: hidden; }
&::after {
content: "";
position: absolute;
inset: 0;
background: var(--_logo-ink);
-webkit-mask: var(--_logo-src) center / contain no-repeat;
mask: var(--_logo-src) center / contain no-repeat;
}
}
.logo {
display: flex;
align-items: center;
gap: var(--av-space-xs);
text-decoration: none;
color: var(--av-header-color, var(--av-color-text));
font-size: var(--av-text-lg);
font-weight: var(--av-weight-bold);
letter-spacing: -0.01em;
flex-shrink: 0;
white-space: nowrap;
}
.logo__icon {
font-size: 1.6rem;
color: var(--av-header-accent, var(--av-color-primary-text));
}
.logo:hover {
color: color-mix(in srgb,
var(--av-header-accent, var(--av-color-primary-text)) 80%,
var(--av-header-bg, var(--av-color-surface)));
}
.logo img ~ .logo__wordmark {
display: none;
}
.logo img {
height: 2rem;
width: auto;
display: block;
}
.logo--footer {
font-size: var(--av-text-lg);
margin-block-end: var(--av-space-md);
}
.ave-theme-switch {
display: var(--av-theme-switch-display, none);
align-items: center;
align-self: center;
vertical-align: middle;
gap: var(--av-space-2xs, .25rem);
padding: var(--av-space-2xs, .25rem) var(--av-space-xs, .5rem);
border: var(--av-border-width, 1px) solid transparent;
border-radius: var(--av-radius-sm, .25rem);
background: none;
color: inherit;
font: inherit;
line-height: 1;
cursor: pointer;
&[hidden] { display: none; }
&:focus-visible {
outline: 2px solid var(--av-focus, var(--av-color-primary-text));
outline-offset: 2px;
}
}
.theme-switch-here {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.ave-theme-switch__icon {
inline-size: 1.15em;
block-size: 1.15em;
background-color: currentColor;
-webkit-mask: var(--icon-src) center / contain no-repeat;
mask: var(--icon-src) center / contain no-repeat;
opacity: .38;
transition: opacity var(--av-duration-fast, .15s) var(--av-ease-out, ease-out);
}
.ave-theme-switch__icon--light { --icon-src: url(../icons/sun.svg); }
.ave-theme-switch__icon--dark  { --icon-src: url(../icons/moon.svg); }
.ave-theme-switch[aria-pressed="false"] .ave-theme-switch__icon--light,
.ave-theme-switch[aria-pressed="true"]  .ave-theme-switch__icon--dark {
opacity: 1;
}
@media (hover: hover) {
.ave-theme-switch:hover .ave-theme-switch__icon {
opacity: .7;
}
.ave-theme-switch[aria-pressed="false"]:hover .ave-theme-switch__icon--light,
.ave-theme-switch[aria-pressed="true"]:hover  .ave-theme-switch__icon--dark {
opacity: 1;
}
}
#footer {
background: var(--av-footer-bg, var(--av-color-surface-3));
color: var(--av-footer-color, var(--av-color-text));
--av-color-text-muted: var(--av-footer-muted, var(--av-color-text-muted));
border-block-start: var(--av-footer-border, var(--av-border));
padding-block: var(--av-space-xl);
}
#footer .container {
display: flex;
flex-direction: column;
gap: var(--av-space-xl);
}
#footer .layout-auto-grid {
align-items: start;
}
#footer .container > *:last-child {
border-block-start: var(--av-footer-border, var(--av-border));
padding-block-start: var(--av-space-lg);
}
#footer .mod_navigation ul,
#footer .mod_customnav ul,
#footer .footer__nav ul,
#footer .rte ul {
list-style: none;
padding-inline-start: 0;
margin-block: 0;
display: flex;
flex-direction: column;
gap: var(--av-space-2xs);
}
#footer .mod_navigation li,
#footer .mod_customnav li,
#footer .footer__nav li,
#footer .rte li {
padding-inline-start: 0;
}
#footer .mod_navigation :is(a, strong),
#footer .mod_customnav :is(a, strong),
#footer .rte a {
font-size: var(--av-text-sm);
color: var(--av-footer-color, var(--av-color-text));
text-decoration: none;
font-weight: var(--av-weight-normal);
display: inline;
}
#footer .mod_navigation a:hover,
#footer .mod_customnav a:hover,
#footer .rte a:hover {
color: var(--av-footer-accent, var(--av-color-primary-text));
}
}
.content-swiper .swiper.swiper {
--swiper-theme-color: var(--av-color-primary);
--swiper-navigation-size: 1.5rem;
--swiper-pagination-bullet-inactive-color: var(--av-color-border);
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-size: .5rem;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: var(--av-space-sm);
}
.content-swiper .swiper.swiper .swiper-wrapper {
grid-column: 1 / -1;
}
.content-swiper .swiper.swiper :is(.swiper-button-prev, .swiper-button-next, .swiper-pagination) {
position: static;
inset: auto;
inline-size: auto;
block-size: auto;
margin: 0;
transform: none;
margin-block-start: var(--av-space-sm);
}
.content-swiper .swiper.swiper .swiper-button-prev { grid-area: 2 / 1; }
.content-swiper .swiper.swiper .swiper-pagination  { grid-area: 2 / 2; }
.content-swiper .swiper.swiper .swiper-button-next { grid-area: 2 / 3; }
.content-swiper .swiper.swiper :is(.swiper-button-prev, .swiper-button-next) {
padding: var(--av-space-2xs) var(--av-space-sm);
border: var(--av-border);
border-radius: var(--av-btn-radius, var(--av-input-radius));
transition: background-color var(--av-duration-base) var(--av-ease-out);
}
.content-swiper .swiper.swiper :is(.swiper-button-prev, .swiper-button-next):hover {
background-color: var(--av-color-surface-2);
}
.content-swiper .swiper.swiper .swiper-pagination-bullet {
transform: none;
opacity: 1;
}
.slider-control.slider-control {
block-size: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--av-space-sm);
margin-block-start: var(--av-space-sm);
}
.slider-control.slider-control :is(a, .slider-menu) {
position: static;
inset: auto;
inline-size: auto;
margin-inline: 0;
}
.slider-control.slider-control :is(.slider-prev, .slider-next) {
display: inline-flex;
align-items: center;
gap: var(--av-space-2xs);
padding: var(--av-space-2xs) var(--av-space-sm);
border: var(--av-border);
border-radius: var(--av-btn-radius, var(--av-input-radius));
font-size: var(--av-text-sm);
font-weight: var(--av-weight-medium);
color: var(--av-color-text);
text-decoration: none;
transition: background-color var(--av-duration-base) var(--av-ease-out);
}
.slider-control.slider-control :is(.slider-prev, .slider-next):hover {
background-color: var(--av-color-surface-2);
}
.slider-control.slider-control .slider-menu {
display: flex;
justify-content: center;
gap: var(--av-space-2xs);
font-size: 0;
flex: 1;
}
.slider-control.slider-control .slider-menu b {
inline-size: .5rem;
block-size: .5rem;
border-radius: var(--av-radius-full);
background-color: var(--av-color-border);
cursor: pointer;
transition: background-color var(--av-duration-base) var(--av-ease-out);
}
.slider-control.slider-control .slider-menu b.active {
background-color: var(--av-color-primary);
}
.slider--overlay .swiper.swiper {
display: block;
}
.slider--overlay .swiper.swiper :is(.swiper-button-prev, .swiper-button-next) {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
margin-block-start: 0;
background-color: color-mix(in srgb, var(--av-color-surface) 82%, transparent);
backdrop-filter: blur(var(--av-glass-blur));
border-color: transparent;
z-index: 1;
}
.slider--overlay .swiper.swiper .swiper-button-prev { inset-inline-start: var(--av-space-sm); }
.slider--overlay .swiper.swiper .swiper-button-next { inset-inline-end: var(--av-space-sm); }
.slider--overlay .swiper.swiper .swiper-pagination {
position: absolute;
inset-block-end: var(--av-space-sm);
inset-inline: 0;
margin-block-start: 0;
text-align: center;
z-index: 1;
}
.slider--overlay .slider-control.slider-control {
position: absolute;
inset-block-end: var(--av-space-sm);
inset-inline: var(--av-space-sm);
margin-block-start: 0;
z-index: 1;
}
.slider--overlay .slider-control.slider-control :is(.slider-prev, .slider-next) {
background-color: color-mix(in srgb, var(--av-color-surface) 82%, transparent);
backdrop-filter: blur(var(--av-glass-blur));
border-color: transparent;
}
.slider--overlay {
position: relative;
}
@layer av.components {
.mod_navigation > .level_1 {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--av-nav-gap, var(--av-space-md));
margin: 0;
padding: 0;
list-style: none;
}
.mod_navigation:not(.is-compact) {
flex-shrink: 0;
}
:is(.align-text-center, .align-all-center) .mod_navigation > .level_1,
.mod_navigation.justify-center > .level_1 {
justify-content: center;
}
.align-text-end .mod_navigation > .level_1 {
justify-content: flex-end;
}
.mod_navigation.justify-between > .level_1 {
justify-content: space-between;
}
.mod_navigation > .level_1 :is(a, strong) {
text-decoration: none;
cursor: pointer;
font-family: var(--av-nav-font-family);
font-size: var(--av-nav-font-size, var(--av-text-sm));
font-weight: var(--av-nav-font-weight, var(--av-weight-medium));
line-height: var(--av-leading-body);
}
.mod_navigation > .level_1 > li {
display: flex;
align-items: center;
}
.mod_navigation > .level_1 > li.submenu {
position: relative;
}
.mod_navigation > .level_1 > li > :is(a, strong) {
display: block;
position: relative;
z-index: 0;
color: var(--av-nav-color, var(--av-header-nav, var(--av-header-color, var(--av-color-text))));
padding-block: var(--av-space-2xs);
padding-inline: var(--av-nav-marker-pad, 0);
}
.mod_navigation > .level_1 > li > :is(a, strong)::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--av-nav-marker-radius);
background-color: transparent;
scale: var(--av-nav-marker-rest);
transition:
scale            var(--av-duration-fast) var(--av-ease-out),
background-color var(--av-duration-fast) var(--av-ease-out);
}
.mod_navigation > .level_1 > li > :is(a, strong)::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: 0;
border-block-end: var(--av-nav-marker-line);
border-block-end-color: transparent;
transition: border-color var(--av-duration-fast) var(--av-ease-out);
}
.mod_navigation > .level_1 > li > a:hover,
.mod_navigation > .level_1 > li > a:focus-visible,
.mod_navigation > .level_1 > li:is(.active, .trail) > :is(a, strong) {
color: var(--av-nav-active-color, var(--av-header-nav-active, var(--av-color-primary-text)));
&::after { border-block-end: var(--av-nav-marker-line); }
&::before {
background-color: var(--av-nav-marker-bg);
scale: 1;
transition:
scale            var(--av-duration-base) var(--av-nav-marker-ease),
background-color var(--av-duration-fast) var(--av-ease-out);
}
}
.av-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
inline-size: var(--av-nav-toggle-size);
block-size: var(--av-nav-toggle-size);
flex-shrink: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: inherit;
}
.av-nav-toggle::after {
content: '';
inline-size: calc(var(--av-nav-toggle-size) * 0.3647);
block-size: calc(var(--av-nav-toggle-size) * 0.3647);
background-color: currentColor;
-webkit-mask: var(--av-nav-toggle-mask) center / contain no-repeat;
mask: var(--av-nav-toggle-mask) center / contain no-repeat;
transition: transform var(--av-duration-fast) var(--av-ease-out);
}
.mod_navigation > .level_1 > li.submenu.is-expanded > .av-nav-toggle::after {
-webkit-mask-image: var(--av-nav-toggle-mask-open);
mask-image: var(--av-nav-toggle-mask-open);
transform: rotate(var(--av-nav-toggle-open-rotate));
}
@media (hover: hover) {
.mod_navigation > .level_1 > li.submenu:hover > .av-nav-toggle::after {
-webkit-mask-image: var(--av-nav-toggle-mask-open);
mask-image: var(--av-nav-toggle-mask-open);
transform: rotate(var(--av-nav-toggle-open-rotate));
}
}
.mod_navigation > .level_1 li.submenu:not(:has(> .av-nav-toggle))::after {
content: '';
inline-size: var(--av-nav-toggle-size);
block-size: var(--av-nav-toggle-size);
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--av-nav-toggle-mask) center / calc(var(--av-nav-toggle-size) * 0.3647) no-repeat;
mask: var(--av-nav-toggle-mask) center / calc(var(--av-nav-toggle-size) * 0.3647) no-repeat;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) {
position: absolute;
top: calc(100% + .5rem);
inset-inline-start: 0;
min-inline-size: 240px;
display: flex;
flex-direction: column;
gap: calc(var(--av-nav-item-gap, 0.125rem) + var(--av-nav-divider-space-y));
margin: 0;
padding-block: var(--av-nav-dropdown-padding, .3rem);
padding-inline: var(--av-nav-dropdown-padding, .3rem);
list-style: none;
background: var(--av-nav-dropdown-bg, var(--av-color-surface));
border: var(--av-nav-dropdown-border);
border-radius: var(--av-nav-dropdown-radius, var(--av-radius-md));
box-shadow: var(--av-nav-dropdown-shadow, var(--av-shadow-lg));
opacity: 0;
visibility: hidden;
transform: translateY(.25rem);
transition:
opacity var(--av-duration-fast) var(--av-ease-out),
transform var(--av-duration-fast) var(--av-ease-out),
visibility var(--av-duration-fast);
z-index: var(--av-z-dropdown);
}
.mod_navigation > .level_1 :is(.level_3, .level_4, .level_5) {
top: calc(-1 * var(--av-nav-dropdown-padding, .3rem));
inset-inline-start: 100%;
margin-inline-start: .15rem;
}
.mod_navigation > .level_1 .level_2::before {
content: '';
position: absolute;
inset-inline: 0;
bottom: 100%;
block-size: .6rem;
}
.mod_navigation > .level_1 li.submenu.is-expanded > :is(.level_2, .level_3, .level_4, .level_5) {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (hover: hover) {
.mod_navigation > .level_1 li.submenu:hover > :is(.level_2, .level_3, .level_4, .level_5) {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li + li {
position: relative;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li + li::before {
content: '';
position: absolute;
inset-inline: var(--av-nav-dropdown-padding, .3rem);
inset-block-start: calc(-0.5 * (var(--av-nav-item-gap) + var(--av-nav-divider-space-y)));
border-block-start: var(--av-nav-item-divider);
}
.mod_navigation > .level_1 > li + li {
position: relative;
margin-inline-start: var(--av-nav-divider-space);
}
.mod_navigation > .level_1 > li + li::before {
content: '';
position: absolute;
inset-inline-start: calc(-0.5 * (var(--av-nav-gap) + var(--av-nav-divider-space)));
inset-block: 12%;
border-inline-start: var(--av-nav-item-divider-x);
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li {
padding-inline-start: 0;
display: flex;
align-items: center;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li.submenu {
position: relative;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li > :is(a, strong) {
flex: 1;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) :is(a, strong) {
display: block;
color: var(--av-nav-dropdown-color);
padding: .5rem .85rem;
border-radius: max(0px, calc(var(--av-nav-dropdown-radius) - var(--av-nav-dropdown-padding)));
white-space: nowrap;
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) a:hover,
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) a:focus-visible,
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li:is(.active, .trail) > :is(a, strong) {
background: var(--av-nav-item-hover-bg);
color: var(--av-nav-dropdown-active-color);
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) .av-nav-toggle::after {
transform: rotate(-90deg);
}
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li.submenu.is-expanded > .av-nav-toggle::after {
transform: translateX(.12em) rotate(-90deg);
}
@media (hover: hover) {
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li.submenu:hover > .av-nav-toggle::after {
transform: translateX(.12em) rotate(-90deg);
}
}
.av-mobile-menu { display: none; }
.av-mobile-menu.is-open {
display: block;
inline-size: 100%;
padding-block-start: var(--av-space-md);
border-block-start: 1px solid var(--av-nav-divider, var(--av-color-border));
margin-block-start: var(--av-space-xs);
}
.av-nav-burger {
display: none;
position: relative;
inline-size: 2.75rem;
block-size: 2.75rem;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: var(--av-nav-color, var(--av-header-color, var(--av-color-text)));
}
.av-nav-burger > span,
.av-nav-burger > span::before,
.av-nav-burger > span::after {
content: '';
position: absolute;
inset-inline: 28%;
block-size: 2px;
border-radius: 2px;
background: currentColor;
transition:
transform var(--av-duration-fast) var(--av-ease-out),
opacity var(--av-duration-fast) var(--av-ease-out);
}
.av-nav-burger > span        { top: calc(50% - 1px); }
.av-nav-burger > span::before { top: -7px; }
.av-nav-burger > span::after  { top: 7px; }
.mod_navigation.is-open .av-nav-burger > span { background: transparent; }
.mod_navigation.is-open .av-nav-burger > span::before {
inset-inline: 18%;
transform: translateY(7px) rotate(45deg);
}
.mod_navigation.is-open .av-nav-burger > span::after {
inset-inline: 18%;
transform: translateY(-7px) rotate(-45deg);
}
@keyframes av-nav-item-in {
from { opacity: 0; transform: translateX(-10px); }
to   { opacity: 1; transform: none; }
}
@keyframes av-submenu-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: none; }
}
.mod_navigation.is-compact {
.av-nav-burger { display: inline-flex; }
& > .level_1 { display: none; }
& > .level_1 > li.submenu {
flex-wrap: wrap;
}
& > .level_1 > li.submenu > :is(a, strong) { flex: 1; }
& { --av-nav-toggle-size: 2.75rem; }
&.is-open > .level_1 {
display: flex;
position: absolute;
inset-inline: 0;
top: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--av-space-sm) var(--av-gutter);
background: var(--av-nav-dropdown-bg, var(--av-color-surface));
border-block-start: 1px solid var(--av-nav-divider, var(--av-color-border));
box-shadow: var(--av-nav-dropdown-shadow, var(--av-shadow-lg));
max-block-size: calc(100vh - 100%);
overflow-y: auto;
transition:
opacity   var(--av-duration-base) var(--av-ease-out),
transform var(--av-duration-base) var(--av-ease-out);
@starting-style {
opacity: 0;
transform: translateY(-6px);
}
}
&.is-open > .level_1 > :is(li, .av-mobile-menu) {
animation: av-nav-item-in var(--av-duration-slow) var(--av-ease-out) backwards;
}
&.is-open > .level_1 > :nth-child(1)  { animation-delay:  40ms; }
&.is-open > .level_1 > :nth-child(2)  { animation-delay:  70ms; }
&.is-open > .level_1 > :nth-child(3)  { animation-delay: 100ms; }
&.is-open > .level_1 > :nth-child(4)  { animation-delay: 130ms; }
&.is-open > .level_1 > :nth-child(5)  { animation-delay: 160ms; }
&.is-open > .level_1 > :nth-child(6)  { animation-delay: 185ms; }
&.is-open > .level_1 > :nth-child(n+7){ animation-delay: 205ms; }
&.is-open > .level_1 :is(a, strong) { color: var(--av-color-text); }
&.is-open > .level_1 > li:is(.active, .trail) > :is(a, strong),
&.is-open > .level_1 a:hover,
&.is-open > .level_1 a:focus-visible { color: var(--av-focus, var(--av-color-primary-text)); }
& > .level_1 :is(.level_2, .level_3, .level_4, .level_5) {
position: static;
inset-inline: auto;
top: auto;
margin-inline-start: 0;
min-inline-size: 0;
inline-size: 100%;
display: none;
opacity: 1;
visibility: visible;
transform: none;
border: 0;
box-shadow: none;
background: transparent;
padding-inline-start: var(--av-space-md);
}
& > .level_1 li.is-expanded > :is(.level_2, .level_3, .level_4, .level_5) {
display: flex;
animation: av-submenu-in var(--av-duration-base) var(--av-ease-out) backwards;
}
& > .level_1 :is(.level_2, .level_3, .level_4, .level_5) .av-nav-toggle::after {
transform: none;
}
& > .level_1 :is(.level_2, .level_3, .level_4, .level_5) li.submenu.is-expanded > .av-nav-toggle::after {
-webkit-mask-image: var(--av-nav-toggle-mask-open);
mask-image: var(--av-nav-toggle-mask-open);
transform: rotate(var(--av-nav-toggle-open-rotate));
}
}
@media (prefers-reduced-motion: reduce) {
.mod_navigation > .level_1 :is(.level_2, .level_3, .level_4, .level_5),
.av-nav-toggle::after,
.av-nav-burger > span,
.av-nav-burger > span::before,
.av-nav-burger > span::after,
.mod_navigation.is-open > .level_1 {
transition: none;
}
.mod_navigation.is-open > .level_1 > :is(li, .av-mobile-menu),
.mod_navigation > .level_1 li.is-expanded > :is(.level_2, .level_3, .level_4, .level_5) {
animation: none;
}
}
}
@layer av.components {
.icon,
:where(span, i)[class*="icon--"] {
display: inline-block;
width:  1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image:    var(--icon-src, linear-gradient(#0000, #0000));
-webkit-mask-repeat:   no-repeat;
-webkit-mask-size:     contain;
-webkit-mask-position: center;
mask-image:    var(--icon-src, linear-gradient(#0000, #0000));
mask-repeat:   no-repeat;
mask-size:     contain;
mask-position: center;
flex-shrink: 0;
vertical-align: -0.125em; 
}
.icon--arrow-left    { --icon-src: url(../icons/arrow-left.svg);    }
.icon--arrow-right   { --icon-src: url(../icons/arrow-right.svg);   }
.icon--arrow-up      { --icon-src: url(../icons/arrow-up.svg);      }
.icon--arrow-down    { --icon-src: url(../icons/arrow-down.svg);    }
.icon--chevron-left  { --icon-src: url(../icons/chevron-left.svg);  }
.icon--chevron-right { --icon-src: url(../icons/chevron-right.svg); }
.icon--chevron-up    { --icon-src: url(../icons/chevron-up.svg);    }
.icon--chevron-down  { --icon-src: url(../icons/chevron-down.svg);  }
.icon--home          { --icon-src: url(../icons/home.svg);          }
.icon--plus                   { --icon-src: url(../icons/plus.svg);                   }
.icon--moon          { --icon-src: url(../icons/moon.svg);          }
.icon--minus                  { --icon-src: url(../icons/minus.svg);                  }
.icon--check                  { --icon-src: url(../icons/check.svg);                  }
.icon--x                      { --icon-src: url(../icons/x.svg);                      }
.icon--search                 { --icon-src: url(../icons/search.svg);                 }
.icon--filter                 { --icon-src: url(../icons/filter.svg);                 }
.icon--adjustments-horizontal { --icon-src: url(../icons/adjustments-horizontal.svg); }
.icon--external-link          { --icon-src: url(../icons/external-link.svg);          }
.icon--link                   { --icon-src: url(../icons/link.svg);                   }
.icon--refresh                { --icon-src: url(../icons/refresh.svg);                }
.icon--edit     { --icon-src: url(../icons/edit.svg);     }
.icon--trash    { --icon-src: url(../icons/trash.svg);    }
.icon--copy     { --icon-src: url(../icons/copy.svg);     }
.icon--download { --icon-src: url(../icons/download.svg); }
.icon--upload   { --icon-src: url(../icons/upload.svg);   }
.icon--info-circle    { --icon-src: url(../icons/info-circle.svg);    }
.icon--alert-circle   { --icon-src: url(../icons/alert-circle.svg);   }
.icon--alert-triangle { --icon-src: url(../icons/alert-triangle.svg); }
.icon--circle-check   { --icon-src: url(../icons/circle-check.svg);   }
.icon--circle-x       { --icon-src: url(../icons/circle-x.svg);       }
.icon--eye            { --icon-src: url(../icons/eye.svg);             }
.icon--eye-off        { --icon-src: url(../icons/eye-off.svg);         }
.icon--loader-2       { --icon-src: url(../icons/loader-2.svg);        }
.icon--photo    { --icon-src: url(../icons/photo.svg);    }
.icon--video    { --icon-src: url(../icons/video.svg);    }
.icon--file     { --icon-src: url(../icons/file.svg);     }
.icon--folder   { --icon-src: url(../icons/folder.svg);   }
.icon--zoom-in  { --icon-src: url(../icons/zoom-in.svg);  }
.icon--zoom-out { --icon-src: url(../icons/zoom-out.svg); }
.icon--mail     { --icon-src: url(../icons/mail.svg);     }
.icon--phone    { --icon-src: url(../icons/phone.svg);    }
.icon--map-pin  { --icon-src: url(../icons/map-pin.svg);  }
.icon--globe    { --icon-src: url(../icons/globe.svg);    }
.icon--share    { --icon-src: url(../icons/share.svg);    }
.icon--heart    { --icon-src: url(../icons/heart.svg);    }
.icon--star     { --icon-src: url(../icons/star.svg);     }
.icon--bookmark { --icon-src: url(../icons/bookmark.svg); }
.icon--user   { --icon-src: url(../icons/user.svg);   }
.icon--users  { --icon-src: url(../icons/users.svg);  }
.icon--login  { --icon-src: url(../icons/login.svg);  }
.icon--logout { --icon-src: url(../icons/logout.svg); }
.icon--lock   { --icon-src: url(../icons/lock.svg);   }
.icon--settings  { --icon-src: url(../icons/settings.svg); }
.icon--clock     { --icon-src: url(../icons/clock.svg);    }
.icon--calendar  { --icon-src: url(../icons/calendar.svg); }
.icon--menu-2    { --icon-src: url(../icons/menu-2.svg);   }
.icon--shopping-cart { --icon-src: url(../icons/shopping-cart.svg); }
.icon--sun           { --icon-src: url(../icons/sun.svg);           }
.icon--credit-card   { --icon-src: url(../icons/credit-card.svg);   }
.icon--package       { --icon-src: url(../icons/package.svg);       }
.content-hyperlink[class*="icon--"] a::after,
.content-hyperlink[class*="icon--"] a::before,
button[class*="icon--"]::after,
button[class*="icon--"]::before {
content: '';
display: inline-block;
width: 1.5em;
height: 1.5em;
margin-block: -0.25em;
background-color: currentColor;
-webkit-mask-image: var(--icon-src, linear-gradient(#0000, #0000));
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: var(--icon-src, linear-gradient(#0000, #0000));
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
vertical-align: -0.28em;
}
.content-hyperlink[class*="icon--"] a::after,
button[class*="icon--"]::after { margin-inline-start: 0.3em; }
.content-hyperlink[class*="icon--"]:not(.icon--before) a::before,
button[class*="icon--"]:not(.icon--before)::before { display: none; }
.content-hyperlink.icon--before[class*="icon--"] a::before,
button.icon--before[class*="icon--"]::before { margin-inline-end: 0.3em; }
.content-hyperlink.icon--before[class*="icon--"] a::after,
button.icon--before[class*="icon--"]::after { display: none; }
.field-icon::before {
content: '';
display: block;
font-size: var(--av-el-font-size, 1em);
inline-size: var(--field-icon-size, 2em);
block-size:  var(--field-icon-size, 2em);
margin-block-end: var(--field-icon-gap, var(--av-space-sm));
background-color: var(--field-icon-color, var(--av-color-primary));
-webkit-mask-image:    var(--icon-src, linear-gradient(#0000, #0000));
-webkit-mask-repeat:   no-repeat;
-webkit-mask-size:     contain;
-webkit-mask-position: center;
mask-image:    var(--icon-src, linear-gradient(#0000, #0000));
mask-repeat:   no-repeat;
mask-size:     contain;
mask-position: center;
}
:is(.align-text-center, .align-all-center) .field-icon::before,
.field-icon:is(.align-text-center, .align-all-center)::before {
margin-inline: auto;
}
.align-text-end .field-icon::before,
.field-icon.align-text-end::before {
margin-inline-start: auto;
}
:where(.style-light) .field-icon { --field-icon-color: currentColor; }
.field-icon--xs { --field-icon-size: 1.25em; --field-icon-gap: var(--av-space-2xs); }
.field-icon--sm { --field-icon-size: 1.6em;  --field-icon-gap: var(--av-space-xs);  }
.field-icon--md { --field-icon-size: 2em;    --field-icon-gap: var(--av-space-sm);  }
.field-icon--lg { --field-icon-size: 2.75em; --field-icon-gap: var(--av-space-sm);  }
.field-icon--xl { --field-icon-size: 3.5em;  --field-icon-gap: var(--av-space-md);  }
.field-icon--primary   { --field-icon-color: var(--av-color-primary);    }
.field-icon--secondary { --field-icon-color: var(--av-color-secondary);  }
.field-icon--text      { --field-icon-color: var(--av-color-text);       }
.field-icon--muted     { --field-icon-color: var(--av-color-text-muted); }
.field-icon--current   { --field-icon-color: currentColor;               }
.field-icon--success   { --field-icon-color: var(--av-color-success);    }
.field-icon--warning   { --field-icon-color: var(--av-color-warning);    }
.field-icon--error     { --field-icon-color: var(--av-color-error);      }
}
@layer av.animations {
@media (prefers-reduced-motion: no-preference) {
.animate {
opacity: 0;
translate: 0 var(--animate-distance, 2.5rem);
transition:
opacity  var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)),
translate var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease));
transition-delay: var(--animate-delay, var(--av-animate-delay));
}
.animate--fade  { --animate-distance: 0px; }
.animate--left  { translate: -2rem 0; }
.animate--right { translate:  2rem 0; }
.animate.is-visible {
opacity: 1;
translate: 0 0;
}
.animate--stagger .animate:nth-child(2) { --animate-delay: calc(1 * var(--av-animate-stagger)); }
.animate--stagger .animate:nth-child(3) { --animate-delay: calc(2 * var(--av-animate-stagger)); }
.animate--stagger .animate:nth-child(4) { --animate-delay: calc(3 * var(--av-animate-stagger)); }
.animate--stagger .animate:nth-child(5) { --animate-delay: calc(4 * var(--av-animate-stagger)); }
.animate--stagger .animate:nth-child(6) { --animate-delay: calc(5 * var(--av-animate-stagger)); }
@keyframes av-hero-enter {
from { opacity: 0; translate: 0 2rem; }
to   { opacity: 1; translate: 0 0; }
}
.animate--hero > * {
opacity: 0;
animation: av-hero-enter calc(var(--av-duration-scale) * 800ms) var(--av-animate-ease) forwards;
}
.animate--hero > *:nth-child(1) { animation-delay: calc(var(--av-duration-scale) * 100ms); }
.animate--hero > *:nth-child(2) { animation-delay: calc(var(--av-duration-scale) * 250ms); }
.animate--hero > *:nth-child(3) { animation-delay: calc(var(--av-duration-scale) * 400ms); }
.animate--hero > *:nth-child(4) { animation-delay: calc(var(--av-duration-scale) * 550ms); }
.animate--hero > *:nth-child(5) { animation-delay: calc(var(--av-duration-scale) * 700ms); }
.animate--count-up {
font-variant-numeric: tabular-nums;
}
}
.style-interactive-card {
transition:
box-shadow var(--av-duration-base) var(--av-ease-out),
transform  var(--av-duration-base) var(--av-ease-out),
opacity    var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s),
translate  var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s);
}
.media-card {
transition:
box-shadow var(--av-duration-base) var(--av-ease-out),
transform  var(--av-duration-base) var(--av-ease-out),
opacity    var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s),
translate  var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s);
}
.style-pop {
transition:
scale      var(--av-pop-return) var(--ease-squish-3),
box-shadow var(--av-pop-return) var(--av-ease-out),
filter     var(--av-pop-return) var(--av-ease-out),
opacity    var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s),
translate  var(--animate-duration, var(--av-animate-duration)) var(--animate-ease, var(--av-animate-ease)) var(--animate-delay, 0s);
}
.style-pop:hover,
.style-pop:focus-visible {
scale: var(--av-pop-scale);
box-shadow: var(--av-shadow-lg);
transition-duration: var(--av-pop-in);                     
transition-timing-function: var(--ease-elastic-out-5);     
}
.style-pop:active {
scale: calc(1 + (var(--av-pop-scale) - 1) * .4);
}
@media (prefers-reduced-motion: reduce) {
.style-pop { transition: none; }
.style-pop:hover,
.style-pop:focus-visible,
.style-pop:active { scale: none; }
}
.content-image.style-pop:hover,
.content-image.style-pop:focus-visible {
box-shadow: none;
filter: drop-shadow(0 14px 22px oklch(0% 0 0 / 0.22));
}
}