@charset "UTF-8";
/* ==========================================================================
CSS VARIABLES (CUSTOM PROPERTIES)
========================================================================== */
:root {
  /*
  * TYPOGRAPHY SYSTEM
  * Uses fluid type scaling for responsive font sizes across viewports
  * Generated via: https://www.fluid-type-scale.com/
  */
  --font-family-default: "Bankside Sans VF", sans-serif;
  /* Fluid font scale - scales between min/max viewports */
  --font-size-xs: clamp(0.64rem, -0.01vi + 0.64rem, 0.63rem);
  --font-size-s: clamp(0.8rem, 0.08vi + 0.78rem, 0.84rem);
  --font-size-r: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
  --font-size-m: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
  --font-size-l: clamp(1.56rem, 0.79vi + 1.36rem, 2rem);
  --font-size-xl: clamp(1.95rem, 1.29vi + 1.63rem, 2.66rem);
  --font-size-2xl: clamp(2.44rem, 2.02vi + 1.94rem, 3.55rem);
  --font-size-3xl: clamp(3.05rem, 3.06vi + 2.29rem, 4.73rem);
  --font-size-4xl: clamp(4.8373rem, 3.9283rem + 4.5448vw, 7.4506rem);
  /* Font weights and line heights */
  --font-weight-l: 200;
  --font-weight-r: 400;
  --font-weight-m: 500;
  --font-weight-bd: 800;
  --lineheight-r: 1.5;
  --lineheight-s: 1.3;
  /*
  * COLOR SYSTEM
  * Dark theme with accent colors for visual hierarchy
  */
  --color-accent: #7ec339;
  /* Primary brand accent (lime green) */
  --color-background-default: #212121;
  /* Main background */
  --color-base: #0d0d0d;
  /* Darker background for contrast */
  --color-border: #2896be;
  /* Border and secondary accent */
  --color-text-default: #deded3;
  /* Primary text color */
  --color-text-alt: #1a1a1a;
  /* Text on light backgrounds */
  --color-text-link: var(--color-accent);
  --color-text-link-hover: #7ec339;
  --color-text-link-decoration: #777;
  --color-button-background: var(--color-accent);
  --color-button-text: var(--color-text-alt);
  --color-input-background: #404040;
  /*
  * BORDER SYSTEM
  * Consistent border widths and radii
  */
  --border-width-r: 1px;
  --border-width-l: 3px;
  --border-radius-s: 3px;
  --border-radius-r: 6px;
  --border-radius-l: 12px;
  /*
  * LAYOUT SYSTEM
  * Grid and spacing for consistent layouts
  */
  --grid-12-col: repeat(12, 1fr);
  /* 12-column grid system */
  --grid-column-gap: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --grid-row-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem);
  --max-width: 85rem;
  /* Maximum content width */
  /*
  * SPACING SYSTEM
  * Fluid spacing scale for consistent vertical rhythm
  */
  --spacing-s: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --spacing-r: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --spacing-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --spacing-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --spacing-xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
  /* Sizing for SVG icons */
  --svg-width: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem);
  /*
  * ANIMATION SYSTEM
  * Standardized timing for consistent interactions
  */
  --animate-duration: 1s;
  --animate-duration-fast: .5s;
  --animate-duration-faster: .25s;
  --animate-delay: 1s;
  --animate-function: ease-in;
  --animate-repeat: 1;
  /* Transform scales for interactive elements */
  --scale-up: 1.05;
  --scale-down: .98;
  /* Filter effects for hover states */
  --brightness-up: 1.15;
  --brightness-down: .85;
  --saturate-up: 1.25;
  --saturate-down: .85;
}

/*
* P3 COLOR SPACE SUPPORT
* Enhanced color range for compatible displays
*/
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --color-accent: color(display-p3 0.555 0.758 0.314);
    --color-background-default: color(display-p3 0.129 0.129 0.129);
    --color-base: color(display-p3 0.051 0.051 0.051);
    --color-border: color(display-p3 0.297 0.58 0.73);
    --color-text-default: color(display-p3 0.871 0.871 0.831);
    --color-text-alt: color(display-p3 0.102 0.102 0.102);
    --color-text-link: var(--color-accent);
    --color-text-link-hover: color(display-p3 0.555 0.758 0.314);
    --color-button-background: var(--color-accent);
    --color-button-text: var(--color-text-alt);
    --color-input-background: color(display-p3 0.251 0.251 0.251);
  }
}
/* ==========================================================================
UTILITY STYLES
========================================================================== */
/* Viewport configuration for responsive design */
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
/* CSS View Transitions API for page navigation animations */
@view-transition {
  navigation: auto;
}
/* Text selection styling */
::-moz-selection {
  background-color: #e0e8ef;
  text-shadow: none;
}

::selection {
  background-color: #e0e8ef;
  text-shadow: none;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-base);
  border-radius: 0;
}

/* Anchor positioning for jump links */
[id] {
  scroll-margin-top: var(--spacing-l);
}

/* Visually hidden utility for accessibility */
:is([data-visibility=hidden], .visually-hidden) {
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  border: 0;
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
* LAYOUT UTILITIES
* Helper classes for common layout patterns
*/
/* Horizontal alignment */
[data-align-h=center] {
  text-align: center;
  text-wrap: balance;
  /* Balances text for better readability */
}

[data-align-h=right] {
  text-align: right;
}

/* Vertical alignment */
[data-align-v=center] {
  align-items: center;
}

/* Responsive visibility */
[data-visibility=small] {
  display: block;
}

[data-visibility=large] {
  display: none;
}

/* Custom font face declaration */
@font-face {
  font-display: swap;
  font-family: "Bankside Sans VF";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/bankside-sans-vf.woff2") format("woff2");
}
/* ==========================================================================
BASE ELEMENT STYLES
========================================================================== */
/* HTML base styles */
/* ================================================
   REDUCED MOTION — GLOBAL METHODOLOGY
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-background-default);
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-size-adjust: none;
}

/* Body base styles */
body {
  -webkit-font-smoothing: auto;
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  font-family: var(--font-family-default);
  font-feature-settings: liga 1;
  font-optical-sizing: auto;
  font-size: 1em;
  font-style: normal;
  font-variation-settings: "wght" 400, "wdth" 85;
  font-weight: normal;
  line-height: var(--lineheight-r);
  margin: 0 auto;
  max-width: var(--max-width);
  padding-inline: var(--spacing-r);
}

/* Enhanced ligature support */
@supports (font-variant-ligatures: common-ligatures) {
  body {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }
}
/* ==========================================================================
LINK STYLES
========================================================================== */
/* Base link styles */
:is(a, a:visited) {
  color: var(--color-text-link);
  text-decoration: none;
  transform: translateY(0);
  transition: all 100ms var(--animate-function);
}

/* Link interaction states */
a:is(:hover, :active, :focus-visible) {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-decoration);
  text-decoration-style: solid;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-color: var(--color-text-link-decoration);
}

a:is(:active, :focus-visible) {
  outline: none;
}

/* ==========================================================================
TYPOGRAPHY COMPONENTS
========================================================================== */
/*
* HEADING STYLES
* Consistent heading hierarchy with variable font settings
*/
:is(h1, h2, h3, h4) {
  font-family: var(--font-family-default);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 40;
  font-weight: normal;
  line-height: var(--lineheight-s);
  margin-block: 0 var(--spacing-s);
  text-transform: uppercase;
  text-wrap: balance;
  /* Prevents single words on last line */
}

/* Heading size scale */
h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-l);
}

h4 {
  font-size: var(--font-size-m);
}

/* Heading link styles */
:is(h2, h3) a:is(:hover, :active) {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-decoration);
  text-decoration-style: solid;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.075em;
}

/* Accent color for headings */
:heading .alt-accent {
  color: var(--color-accent);
}

/*
* PARAGRAPH STYLES
* Basic paragraph formatting with typographic refinements
*/
p {
  font-family: var(--font-family-default);
  font-size: var(--font-size-r);
  orphans: 3;
  /* Prevents single lines at bottom of columns */
}

/* Heading + paragraph spacing */
h3:has(+ p) {
  margin-block-end: 0;
}

h3 + p {
  margin-block-start: var(--spacing-s);
}

/* ==========================================================================
TEXT TREATMENT CLASSES
========================================================================== */
/*
* TEXT VARIANT CLASSES
* Utility classes for specific text treatments
*/
.alt-accent, em {
  color: var(--color-accent);
  font-style: normal;
}

/* Accent color text */
.alt-lede {
  /* Introductory/lead text */
  font-size: var(--font-size-m);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 100;
  line-height: var(--lineheight-s);
}

.alt-light {
  /* Light weight text */
  font-variation-settings: "wght" 100, "wdth" 50;
}

.alt-name {
  /* Name/person text */
  font-size: var(--font-size-r);
  font-variation-settings: "wdth" 85, "wght" 300;
  margin-block-end: 0;
  text-transform: unset;
}

.alt-pill {
  /* Pill-shaped badge */
  background-color: var(--color-accent);
  color: var(--color-text-alt);
  display: inline-block;
  font-size: var(--font-size-s);
  font-variation-settings: "wght" 500, "wdth" 100;
  padding: var(--spacing-s);
}

.alt-uppercase {
  /* Uppercase text */
  font-variation-settings: "wght" 400, "wdth" 50;
  text-transform: uppercase;
}

/* ==========================================================================
QUOTE COMPONENTS
========================================================================== */
/*
* BLOCKQUOTE STYLES
* Styled quote blocks with citation support
*/
blockquote {
  margin: 0;
  padding: 0;
  position: relative;
}

:is(blockquote p, blockquote footer) {
  padding: 0;
}

blockquote p {
  font-variation-settings: "wdth" 85, "wght" 500;
  margin-block: 0 var(--spacing-xs);
}

blockquote footer {
  align-items: start;
  display: flex;
  font-size: var(--font-size-r);
  font-style: normal;
  font-variation-settings: "wght" 400, "wdth" 40;
  gap: var(--spacing-s);
  margin-block-start: var(--spacing-r);
  text-transform: uppercase;
}

blockquote svg {
  margin: 0;
}

/* Medium quote variant */
blockquote[data-variant=m] {
  margin-block: var(--spacing-m);
}

blockquote[data-variant=m] svg {
  display: block;
  inline-size: 48px;
  margin-block-end: var(--spacing-s);
}

blockquote[data-variant=m] p {
  font-size: var(--font-size-m);
  line-height: 1.1;
}

/* Large quote variant */
blockquote[data-variant=l] {
  margin-block: var(--spacing-l);
  margin-inline: auto;
  max-width: 80ch;
}

blockquote[data-variant=l] svg {
  display: block;
  inline-size: 64px;
  margin-block-end: var(--spacing-s);
}

blockquote[data-variant=l] p {
  font-size: var(--font-size-l);
  line-height: 1.1;
}

/*
* FADING QUOTE ROTATOR
* Styles for the JavaScript-powered quote carousel
*/
.quotes-container {
  height: 20rem;
  position: relative;
}

.quote {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
}

.quote.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
LIST COMPONENTS
========================================================================== */
/*
* LIST STYLES
* Various list types with custom markers
*/
/* Unordered lists with custom bullet */
ul {
  list-style-type: none;
  margin-block: 0 var(--spacing-r);
  margin-inline: 0;
  padding-inline-start: 0;
}

ul li {
  font-size: var(--font-size-r);
}

ul li:before {
  color: var(--color-text-default);
  content: "• ";
}

/* Ordered lists */
ol {
  margin-block: 0 var(--spacing-r);
  margin-inline: 0;
  padding-inline-start: 0;
}

ol li {
  font-size: var(--font-size-r);
  margin-block-end: var(--spacing-s);
}

/* Remove default markers from styled lists */
:is(ul[class*=alt-], ol[class*=alt-]) li:before {
  content: "";
  display: none;
}

/* Bordered list variant */
.alt-bordered li {
  padding-block: var(--spacing-s);
}

.alt-bordered li:not(:last-child) {
  border-block-end: var(--border-width-r) solid var(--color-border);
}

/* Inline list variant */
.alt-inline {
  text-align: center;
}

.alt-inline li {
  display: inline-block;
}

.alt-inline li:not(:last-child) {
  margin-inline-end: var(--spacing-r);
}

/* ==========================================================================
TEXT-LEVEL SEMANTICS
========================================================================== */
/* Small text for disclaimers, captions, etc. */
small {
  display: block;
  font-size: var(--font-size-s);
  line-height: var(--lineheight-r);
}

/* Time element styling */
time {
  display: block;
  font-size: var(--font-size-r);
  font-variation-settings: "wght" 500, "wdth" 40;
  margin-block-end: 0;
  text-transform: uppercase;
}

/* ==========================================================================
HORIZONTAL RULES
========================================================================== */
/* Base horizontal rule */
hr {
  border: 0;
  border-block-start: var(--border-width-l) solid var(--color-border);
  clear: both;
  display: block;
  height: 1px;
  margin-block: var(--spacing-m);
  margin-inline: 0;
  padding: 0;
}

/* Width variants */
[data-width=l] {
  border-width: var(--border-width-l);
}

/* Functional variants */
[data-function=spacer] {
  border-block-start: 0;
  grid-column: 1/-1;
  margin-block: var(--spacing-r);
  margin-inline: 0;
}

[data-function=stripe] {
  border-block-start: 40px solid var(--color-accent);
  margin-block: var(--spacing-l) 0;
  margin-inline: 0;
}

/* ==========================================================================
DETAILS/SUMMARY COMPONENT
========================================================================== */
/* FAQ section container */
#alt-faqs {
  margin-block: var(--spacing-r) var(--spacing-l);
}

/* Details/summary styling for accordions */
details:not(:last-of-type) {
  border-block-end: var(--border-width-r) solid var(--color-border);
  margin-block-end: var(--spacing-r);
  padding-block-end: var(--spacing-r);
}

/* Smooth height transitions (future CSS) */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  ::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
  }
  [open]::details-content {
    height: auto;
  }
}
details p {
  font-size: var(--font-size-s);
  margin-block: var(--spacing-s) 0;
}

/* Custom summary marker */
summary::marker {
  color: var(--color-accent);
  content: "";
}

summary {
  anchor-name: --summary;
  border: none;
  cursor: pointer;
  position: relative;
}

/* Custom toggle indicator (plus/minus) */
:is(summary::before, summary::after) {
  border-block-start: var(--border-width-r) solid var(--color-accent);
  content: "";
  height: 0;
  inset-block-start: 50%;
  inset-inline-end: 0;
  position: absolute;
  position-anchor: --summary;
  position-area: top end;
  width: 1rem;
}

summary::after {
  transform: rotate(90deg);
  transform-origin: 50%;
}

details[open] summary::after {
  transform: rotate(0deg);
}

/* ==========================================================================
MEDIA COMPONENTS
========================================================================== */
/*
* FIGURE AND IMAGE STYLES
* Responsive images with captions
*/
figure {
  margin-block: var(--spacing-m);
  margin-inline: 0;
  padding: 0;
}

figure img {
  margin-block: 0 var(--spacing-s);
}

figcaption {
  font-size: var(--font-size-s);
  font-style: normal;
  font-variation-settings: "wdth" 85, "wght" 400;
  text-transform: uppercase;
}

/* Responsive media elements */
:is(img, video) {
  block-size: auto;
  inline-size: 100%;
  max-inline-size: 100%;
}

img {
  border-width: 0;
}

video {
  border-radius: var(--border-radius-r);
  margin-bottom: var(--spacing-r);
}

/* Partner logo styling */
.logo-partner path:not(.override) {
  fill: var(--color-text-link);
}

.logo-partner:hover path:not(.override) {
  fill: var(--color-text-link-hover);
}

/* ==========================================================================
FORM COMPONENTS
========================================================================== */
/* Form base styles */
form {
  margin: 0;
  padding: 0;
}

form [data-layout=row] {
  margin-block: var(--spacing-r);
}

form [data-layout=row]:nth-child(1) {
  margin-block-start: 0;
}

/* Label styles */
label {
  display: inline-block;
  font-family: inherit;
  font-size: var(--font-size-r);
  font-variation-settings: "wdth" 85, "wght" 500;
  line-height: 1;
  margin-block-end: var(--spacing-s);
  margin-block-start: 0;
  margin-inline: 0;
}

/* Form input styles */
:is([type=email], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea) {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-input-background);
  border: var(--border-width-l) solid var(--color-input-background);
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  caret-color: var(--color-accent);
  color: var(--color-text-default);
  display: inline-block;
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
  inline-size: 100%;
  margin: 0;
  padding: var(--spacing-s);
  scale: 1;
  transition: all var(--animate-duration-faster) var(--animate-function);
}

/* Form input states */
:is([type=email], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea):hover {
  border-color: var(--color-border);
}

:is([type=email], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea):focus {
  accent-color: var(--color-accent);
  background-color: var(--color-text-default);
  border-color: var(--color-accent);
  color: var(--color-text-alt);
  outline: 0;
}

textarea {
  min-height: 12rem;
}

/* Placeholder styling */
input[type]::placeholder {
  color: var(--color-text-default);
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
}

input:focus::-webkit-input-placeholder {
  opacity: 0;
  transition: opacity 0.5s 0.25s ease !important;
}

input:focus::placeholder {
  opacity: 0;
  transition: opacity 0.5s 0.25s ease !important;
}

/* Label with text variant */
.alt-label {
  align-items: center;
  display: flex;
  gap: var(--spacing-s);
  margin-block-end: var(--spacing-r);
  margin-trim: block;
}

.alt-label * {
  margin: 0;
}

.alt-label p {
  font-size: var(--font-size-r);
}

/* Custom checkbox variant */
.alt-checkbox {
  position: relative;
}

.alt-checkbox input[type=checkbox] {
  display: none;
}

.alt-checkbox label {
  background-color: var(--color-input-background);
  block-size: 21px;
  border: 3px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  inline-size: 21px;
  position: relative;
  transition: all var(--animate-duration-faster) var(--animate-function);
}

.alt-checkbox input[type=checkbox]:checked + label {
  background-color: var(--color-accent);
  transform: scale(1.1);
}

.alt-checkbox input[type=checkbox]:checked + label::after {
  align-items: center;
  color: var(--color-text-alt);
  content: "✓";
  display: flex;
  font-size: 18px;
  height: 21px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 21px;
}

/* ==========================================================================
BUTTON COMPONENTS
========================================================================== */
/*
* BUTTON STYLES
* Interactive button elements with variants
*/
:is(.btn, .btn:visited, button) {
  background-color: var(--color-button-background);
  border: none;
  border-radius: var(--border-radius-s);
  box-shadow: none;
  color: var(--color-button-text);
  cursor: pointer;
  font-family: var(--font-family-default);
  font-size: var(--font-size-r);
  font-variation-settings: "wght" 600, "wdth" 85;
  inline-size: fit-content;
  line-height: 1;
  margin: 0;
  padding-block: 15px;
  padding-inline: var(--spacing-r);
  scale: 1;
  text-align: center;
  touch-action: manipulation;
  transition: scale var(--animate-duration-faster) var(--animate-function);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

/* Button interaction states */
.btn:is(:active, :focus, :hover) {
  background-color: var(--color-text-link-hover);
  color: var(--color-button-text);
  scale: var(--scale-down);
  text-decoration: none;
}

/* Button variants */
.btn[data-variant=block] {
  box-sizing: border-box;
  width: 100%;
}

.btn[data-variant=s] {
  padding-block: 7px;
  padding-inline: var(--spacing-s);
}

@keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-3px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(3px, 0, 0);
  }
}
.btn[data-animation=shakeX] {
  animation-delay: 3s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 2;
  animation-name: shakeX;
}

/* ==========================================================================
FONT SIZE UTILITIES
========================================================================== */
/* Size utility classes for consistent typography */
[data-size="2xs"] {
  font-size: var(--font-size-2xs);
}

[data-size=xs] {
  font-size: var(--font-size-xs);
}

[data-size=s] {
  font-size: var(--font-size-s);
}

[data-size=r] {
  font-size: var(--font-size-r);
}

[data-size=m] {
  font-size: var(--font-size-m);
}

[data-size=l] {
  font-size: var(--font-size-l);
}

[data-size=xl] {
  font-size: var(--font-size-xl);
}

[data-size="2xl"] {
  font-size: var(--font-size-2xl);
}

[data-size="3xl"] {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

/* ==========================================================================
TEXT COLUMN LAYOUT
========================================================================== */
/* Multi-column text layout */
.alt-columns {
  column-width: 22em;
  gap: var(--grid-column-gap);
  margin-trim: block;
  /* Trims margin at block boundaries */
}

.alt-columns--2 {
  column-width: 30em;
}

.alt-columns p {
  font-size: var(--font-size-s);
  margin-block-start: 0;
}

/* ==========================================================================
ITEM COMPONENTS
========================================================================== */
/*
* FEATURED ITEM
* Prominent content item with image and text
*/
.item-featured {
  backgound-color: var(--color-base);
  display: flex;
  flex-direction: column-reverse;
  padding: var(--spacing-r);
}

.item-featured > * {
  margin-trim: block;
}

.item-featured h2 {
  margin-block: 0;
}

.item-featured h2 a {
  color: var(--color-text-default);
}

.item-featured p {
  margin-block: 0;
}

.item-featured .btn {
  display: inline-block;
  margin-block-start: var(--spacing-r);
}

.item-featured .btn:not(:last-child) {
  margin-block: var(--spacing-r);
}

/*
* ITEM GRID SYSTEM
* Grid-based item layouts for cards and content blocks
*/
.item-grid {
  margin-block: var(--spacing-r);
}

.item {
  margin-block-end: var(--spacing-m);
  margin-trim: block;
  position: relative;
}

.item img {
  border: var(--border-width-r) solid var(--color-border);
  transition: border var(--animate-duration-faster) ease-in-out;
}

.item img:hover {
  border: var(--border-width-r) solid var(--color-accent);
}

.item h3 {
  font-size: var(--font-size-r);
  font-variation-settings: "wdth" 100, "wght" 600;
  margin-block: 0;
  text-transform: unset;
}

/* Position badges for items */
.item > span {
  background-color: var(--color-text-default);
  color: var(--color-text-alt);
  font-size: var(--font-size-s);
  font-variation-settings: "wdth" 40, "wght" 500;
  padding-inline: 5px;
  position: absolute;
  text-transform: uppercase;
}

/* Specific badge positions */
.item > :is(span[data-position=t-l], span[data-position=t-r], span[data-position=b-r], span[data-position=b-l]) {
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  font-size: var(--font-size-s);
  font-variation-settings: "wdth" 40, "wght" 500;
  padding-block: 5px 2px;
  padding-inline: 5px;
  position: absolute;
  text-transform: uppercase;
}

.item > span[data-position=t-l] {
  border-bottom-right-radius: 5px;
  left: 1px;
  top: 1px;
}

.item > span[data-position=t-r] {
  border-bottom-left-radius: 5px;
  right: -1px;
  top: 1px;
}

.item > span[data-position=b-r] {
  border-top-left-radius: 5px;
  bottom: 7px;
  right: -1px;
}

.item > span[data-position=b-l] {
  border-top-right-radius: 5px;
  bottom: 7px;
  left: 1px;
}

/* ==========================================================================
OPTIONS/PRODUCT COMPONENTS
========================================================================== */
/* Options container */
#options {
  margin-block-end: var(--spacing-r);
}

/* Option card styling */
.option {
  border: var(--border-width-r) solid var(--color-border);
  margin-block: var(--spacing-r);
  margin-trim: block;
  padding: var(--spacing-l);
}

.option .alt-pill {
  background-color: var(--color-border);
  display: block;
  margin-inline: auto;
  width: fit-content;
}

.option h2 {
  font-size: var(--font-size-2xl);
  margin-block: 0;
  text-align: center;
}

.option .btn {
  background-color: var(--color-border);
  display: block;
  margin-inline: auto;
  width: 50%;
}

/* Highlighted option variant with animation */
.option[data-variant=highlighted] {
  background-color: var(--color-background-default);
  border: var(--border-width-l) solid var(--color-accent);
  margin: 0 0 0 -3px;
  animation: triple-pulse-simple 3s ease-in-out 2s;
  transform-origin: center;
}

.option[data-variant=highlighted] .alt-pill {
  background-color: var(--color-accent);
}

.option[data-variant=highlighted] .alt-bordered li {
  border-color: var(--color-accent);
}

.option[data-variant=highlighted] .btn {
  background-color: var(--color-accent);
}

/* Triple pulse animation for highlighted option */
@keyframes triple-pulse-simple {
  0%, 10%, 20%, 30%, 40%, 100% {
    transform: scale(1);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: scale(1.025);
  }
}
/* ==========================================================================
PARTNER COMPONENTS
========================================================================== */
/* Partner logo lists */
.alt-inline[data-content=partners] {
  text-align: center;
}

.alt-inline[data-content=partners] a {
  display: block;
}

.alt-inline[data-content=partners] svg {
  height: 48px;
}

.modular[data-content=partners] svg {
  height: 48px;
}

/* Partner offers section */
#partner-offers {
  margin-block: var(--spacing-r) var(--spacing-l);
}

.partner-offer {
  margin-trim: block;
}

.partner-offer:not(:last-of-type) {
  margin-block-end: var(--spacing-r);
}

.partner-offer p {
  margin: 0;
}

.partner-offer p {
  flex: 1;
  margin: 0;
}

.partner-offer svg {
  height: 50px;
}

/* ==========================================================================
SOCIAL MEDIA COMPONENTS
========================================================================== */
/* Social media links */
[data-content=social] {
  text-align: center;
}

[data-content=social] li {
  vertical-align: middle;
}

[data-content=social] a {
  display: block;
}

.icon-social {
  height: 28px;
}

.icon-social path {
  fill: var(--color-accent);
  transition: fill var(--animate-duration-faster) var(--animate-function);
}

.icon-social:hover path {
  fill: var(--color-text-link-hover);
}

/* ==========================================================================
NAVIGATION COMPONENTS
========================================================================== */
/* Main navigation */
nav ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-l);
  justify-content: center;
  margin: 0;
  color: var(--color-border);
}

nav li {
  margin: 0 var(--spacing-s);
}

nav li:before {
  content: "";
  display: none;
}

nav a,
nav a:hover,
nav a:focus {
  text-decoration: none;
}

nav a:not(.btn),
nav a:not(.btn):visited,
nav a:not(.btn):hover {
  color: var(--color-text-default);
  display: inline-block;
  font-family: var(--font-family-default);
  font-size: var(--font-size-r);
  font-variation-settings: "wdth" 85, "wght" 500;
  padding-block-end: 4px;
  position: relative;
  text-align: center;
}

/* ==========================================================================
BANNER COMPONENT
========================================================================== */
#banner {
  margin-block-end: var(--spacing-r);
}

/* ==========================================================================
HEADER COMPONENT
========================================================================== */
[role=banner] {
  margin-block: var(--spacing-m);
}

#banner-logo a {
  display: block;
  margin-inline: auto;
  max-inline-size: 100px;
  scale: 1;
  transform-origin: top center;
  transition: scale var(--animate-duration-faster) var(--animate-function);
}

#banner-logo path {
  fill: var(--color-accent);
  transition: fill var(--animate-duration-faster) var(--animate-function);
}

#banner-logo:hover path {
  fill: var(--color-text-link-hover);
}

/* ==========================================================================
FOOTER COMPONENT
========================================================================== */
[role=contentinfo] {
  margin-block-end: var(--spacing-l);
}

#footer-logo a {
  display: block;
  margin-block-end: var(--spacing-s);
  margin-inline: auto;
  max-inline-size: 120px;
  scale: 1;
  transition: scale var(--animate-duration-faster) var(--animate-function);
}

/* Footer layout */
[role=contentinfo] > *:nth-child(1) {
  border-block-start: var(--border-width-l) solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block-end: var(--spacing-r);
  margin-block-start: var(--spacing-r);
  padding-block-start: var(--spacing-r);
}

[role=contentinfo] > *:nth-child(1) li {
  text-align: center;
}

[role=contentinfo] > *:nth-child(3) {
  text-align: center;
}

/* ==========================================================================
CALL-TO-ACTION COMPONENTS
========================================================================== */
/* CTA with decorative line */
.alt-cta {
  align-items: center;
  display: flex;
  gap: var(--grid-column-gap);
  justify-content: space-between;
  margin-block-end: var(--spacing-m);
  margin-trim: block;
}

.alt-cta::after {
  border-top: var(--border-width-r) solid var(--color-border);
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  order: 2;
}

.alt-cta > a {
  order: 3;
}

/* Introduction section CTA */
#introduction .alt-cta {
  display: block;
}

.alt-cta::after {
  display: none;
}

#introduction .alt-cta h2 {
  margin-block-end: var(--spacing-l);
}

/* ==========================================================================
META DATA
========================================================================== */
.alt-meta {
  display: flex;
  margin-block-end: var(--spacing-s);
}

.alt-meta > * {
  flex: 1;
}

/* ==========================================================================
MODULAR GRID SYSTEM
========================================================================== */
/*
* MODULAR CONTAINER
* Flexible grid system for various content layouts
*/
.modular {
  display: grid;
  position: relative;
}

.modular > *.spanned {
  aspect-ratio: auto;
}

/* Fullscreen mode for gallery images */
.modular.fullscreen {
  background: rgba(0, 0, 0, 0.9);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  z-index: 1000;
}

.modular.fullscreen .module {
  align-items: center;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.modular.fullscreen img {
  cursor: zoom-out;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.modular.fullscreen::after {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
  display: flex;
  font-size: 2rem;
  height: 40px;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  z-index: 1001;
}

/* View transition for gallery zoom */
@view-transition {
  navigation: auto;
}
::view-transition-old(zoom-image),
::view-transition-new(zoom-image) {
  animation-duration: 0.4s;
  height: 100%;
  mix-blend-mode: normal;
}

/*
* GALLERY LAYOUT
* Image gallery with spanned items
*/
[data-content=gallery] {
  gap: var(--spacing-s);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

[data-content=gallery] .spanned {
  grid-column: span 2;
  grid-row: span 2;
}

[data-content=gallery] img {
  cursor: pointer;
  height: 100%;
  object-fit: cover;
  view-transition-name: none;
  width: 100%;
}

/*
* PARTNERS LAYOUT
* Partner logo grid
*/
[data-content=partners] {
  margin-block: var(--spacing-l);
}

/*
* POPULAR CONTENT LAYOUT
* Grid for popular items
*/
[data-content=popular] {
  gap: var(--spacing-s);
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

[data-content=popular] .spanned {
  grid-column: span 2;
  grid-row: span 2;
}

[data-content=popular] img {
  border: var(--border-width-r) solid var(--color-border);
  height: 100%;
  object-fit: cover;
  transition: border var(--animate-duration-faster) ease-in-out;
}

[data-content=popular] img:hover {
  border: var(--border-width-r) solid var(--color-accent);
}

/*
* TEAM LAYOUT
* Team member grid
*/
[data-content=team] {
  gap: var(--grid-column-gap);
  grid-template-columns: 1fr 1fr;
}

[data-content=team] > * {
  aspect-ratio: auto;
  margin-trim: block;
  opacity: 1;
  transition: opacity var(--animate-duration-faster) var(--animate-function);
}

[data-content=team] > *:nth-of-type(1) {
  grid-column: 1/-1;
}

[data-content=team] img {
  border: var(--border-width-r) solid var(--color-border);
}

[data-content=team] p {
  margin-block: 0;
}

/* Team board layout */
#team-board {
  display: grid;
  gap: var(--spacing-r);
  grid-template-columns: 1fr 1fr;
  padding-block-end: var(--spacing-xl);
}

/* Individual team member item */
.team-item {
  align-items: center;
  display: grid;
  gap: 0 var(--spacing-r);
  grid-template-columns: 80px 1fr;
  margin-block-end: var(--spacing-s);
  margin-trim: block;
  opacity: 1;
  transition: opacity var(--animate-duration-faster) var(--animate-function);
}

.team-item img {
  border: var(--border-width-r) solid var(--color-border);
}

.team-item h3 {
  margin-block-end: 0;
}

.team-item p {
  display: none;
}

/* Small team layout */
[data-content=team-small] > * {
  margin-block-end: var(--spacing-r);
}

[data-content=team-small] p {
  margin-block: 0 var(--spacing-xs);
}

/* ==========================================================================
FLEX LAYOUT
========================================================================== */
[data-layout=flex] {
  text-align: left;
}

[data-layout=flex] > * {
  margin-block-end: var(--spacing-r);
}

/* ==========================================================================
PAGE LAYOUTS
========================================================================== */
/* Section spacing */
section {
  margin-block-end: var(--spacing-l);
}

/* Layout container */
.layout > * {
  margin-block-end: var(--spacing-l);
  margin-trim: block;
}

/* Specific layout variants */
[data-layout=bartok] {
  padding-block-end: var(--spacing-s);
}

div:has(.alt-vertical) {
  margin-block-end: unset;
}

/* ==========================================================================
RESPONSIVE DESIGN - MEDIA QUERIES
========================================================================== */
/*
* TABLET AND DESKTOP STYLES (48em+ / 768px+)
*/
@media screen and (min-width: 48em) {
  /* Enhanced textarea for larger screens */
  textarea {
    min-block-size: 12rem;
    resize: vertical;
    transition: min-height 0.5s ease-in-out;
  }
  .alt-benefits {
    display: grid;
    gap: 0 var(--grid-column-gap);
    grid-template-columns: var(--grid-12-col);
  }
  .alt-benefits > * {
    grid-column: span 6;
  }
  .alt-checkboxes {
    display: grid;
    gap: 0 var(--grid-column-gap);
    grid-template-columns: var(--grid-12-col);
  }
  .alt-checkboxes > * {
    grid-column: span 6;
  }
  .item-grid {
    display: grid;
    gap: var(--grid-row-gap) var(--grid-column-gap);
    grid-template-columns: var(--grid-12-col);
  }
  .item {
    grid-column: span 6;
    margin-block-end: 0;
  }
  .fl-post-grid-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-column-gap);
    align-items: center;
  }
  /* Options grid */
  #options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* Free option layout */
  #option-free {
    align-items: center;
    display: flex;
    gap: var(--spacing-m);
    margin-trim: block;
  }
  /* Partner offer layout */
  .partner-offer {
    display: flex;
    gap: var(--spacing-r);
  }
  .partner-offer h3 {
    margin: 0;
    text-align: right;
    width: 150px;
  }
  #option-free * {
    margin-block: var(--spacing-s);
  }
  /* Enhanced partner grid */
  [data-content=partners] {
    gap: var(--grid-column-gap);
    grid-template-columns: 1fr 1fr;
  }
  [data-content=partners] > * {
    aspect-ratio: auto;
  }
  /* Small team grid */
  [data-content=team-small] {
    display: grid;
    gap: var(--grid-row-gap) var(--grid-column-gap);
    grid-template-columns: repeat(3, 1fr);
  }
  [data-layout=stravinsky] {
    display: grid;
    gap: 0 var(--grid-column-gap);
    grid-template-columns: 1fr 320px;
  }
  [role=contentinfo] > *:nth-child(1) {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*
* DESKTOP STYLES (64em+ / 1024px+)
* Comprehensive desktop layout enhancements
*/
@media screen and (min-width: 64em) {
  /* Responsive visibility */
  [data-visibility=small] {
    display: none;
  }
  [data-visibility=large] {
    display: block;
  }
  /* Body padding adjustment */
  body {
    padding-inline: var(--spacing-m);
  }
  .alt-benefits > * {
    grid-column: span 3;
  }
  /* Vertical text orientation */
  .alt-vertical {
    border-inline-start: 40px solid var(--color-accent);
    display: inline-block;
    font-size: var(--font-size-4xl);
    line-height: 0.8;
    margin: 0 auto;
    padding-inline: 40px;
    text-align: right;
    text-box-trim: trim-both;
    text-orientation: sideways;
    translate: 15px 0;
    writing-mode: sideways-lr;
  }
  [data-layout=discord] {
    margin-inline: unset;
    width: unset;
  }
  .fl-post-grid-post {
    display: block;
  }
  /* Enhanced inline lists */
  .alt-inline {
    text-align: left;
  }
  .alt-inline[data-effect=animated] a {
    padding-block-end: 4px;
    position: relative;
    text-align: center;
  }
  .alt-inline[data-effect=animated] a:hover {
    text-decoration: none;
  }
  .alt-inline[data-effect=animated] a::after {
    background-color: var(--color-accent);
    border-radius: 3px;
    bottom: 0;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
    width: 100%;
  }
  .alt-inline[data-effect=animated] a:is(:hover, :focus-visible)::after {
    transform: translateX(-50%) scaleX(1);
  }
  .alt-inline[data-effect=animated] a:focus-visible::after {
    background-color: var(--color-accent);
  }
  .alt-inline[data-effect=animated]:has(a:hover) a:not(:hover) {
    opacity: 0.35;
  }
  /* FAQ section adjustment */
  #alt-faqs {
    margin-block: unset;
  }
  /* Enhanced partner lists */
  .alt-inline[data-content=partners] {
    text-align: left;
  }
  .alt-inline[data-content=partners]:has(a:hover) a:not(:hover) {
    opacity: 0.35;
  }
  /* Enhanced navigation */
  nav ul {
    justify-content: end;
  }
  nav li {
    margin: 0;
  }
  nav li:not(:last-of-type):after {
    content: " • ";
    color: var(--color-border);
    display: inline-block;
    font-size: var(--font-size-l);
    line-height: 0;
    margin: 0;
    padding-inline: var(--spacing-r);
    translate: 0 4px;
  }
  nav a:not(.btn)::after {
    background-color: var(--color-accent);
    border-radius: 3px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
    width: 100%;
  }
  nav a:not(.btn):hover::after,
  nav a:not(.btn):focus-visible::after {
    transform: translateX(-50%) scaleX(1);
  }
  nav a:not(.btn):focus-visible::after {
    background-color: var(--color-accent);
  }
  nav:has(a:hover) a:not(.btn):not(:hover) {
    opacity: 0.5;
  }
  /* Header grid layout */
  [role=banner] {
    align-items: center;
    display: grid;
    gap: var(--grid-row-gap) 0;
    grid-template-columns: var(--grid-12-col);
    margin-block: var(--spacing-r);
    margin-trim: block;
  }
  [role=banner] > * {
    margin-trim: block;
  }
  [role=banner] > *:nth-child(1) {
    grid-column: 1/3;
  }
  [role=banner] > *:nth-child(2) {
    grid-column: 4/-1;
  }
  #banner-logo {
    margin-block-end: unset;
  }
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  #banner-logo {
    margin-block-end: var(--spacing-r);
  }
}
@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  #banner-logo {
    animation-delay: 0.5s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-name: fadeInDown;
    opacity: 0;
  }
}
@media screen and (min-width: 64em) {
  /* Logo interaction states */
  :is(#banner-logo a, #footer-logo a):hover {
    scale: var(--scale-up);
  }
  :is(#banner-logo a, #footer-logo a):is(:active, :focus) {
    scale: var(--scale-down);
  }
  /* Footer grid layout */
  [role=contentinfo] {
    display: grid;
    gap: var(--grid-row-gap) 0;
    grid-template-columns: var(--grid-12-col);
  }
  [role=contentinfo] > * {
    margin-trim: block;
  }
  [role=contentinfo] > *:nth-child(1) {
    grid-column: 1/10;
    grid-template-columns: subgrid;
  }
  [role=contentinfo] > *:nth-child(1) li {
    text-align: left;
  }
  [role=contentinfo] > *:nth-child(2) {
    grid-column: 10/-1;
    text-align: center;
  }
  [role=contentinfo] > *:nth-child(3) {
    grid-column: 1/-1;
    text-align: left;
  }
  [role=contentinfo] [data-content=social] {
    text-align: center;
  }
  #footer-logo a:hover {
    scale: var(--scale-up);
  }
  #footer-logo a:is(:active, :focus) {
    scale: var(--scale-down);
  }
  /* Enhanced CTA layout */
  .alt-cta::after {
    display: block;
  }
  #introduction .alt-cta {
    display: flex;
  }
  #introduction .alt-cta h2 {
    margin-block-end: -1.5rem;
  }
  /* Enhanced partner grid */
  [data-content=partners] {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Enhanced team layouts */
  [data-content=team] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  :is([data-content=team], #team-board):has(> *:hover) > *:not(:hover) {
    opacity: 0.35;
  }
  [data-content=team] > *:nth-of-type(1) {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
  }
  /* Team board layout */
  #team-board {
    display: unset;
  }
  #team-board:has(> *:hover) > *:not(:hover) {
    opacity: 0.35;
  }
  .team-item p {
    display: block;
    margin-block: 0 var(--spacing-xs);
  }
  /* Small team grid */
  [data-content=team-small] {
    grid-template-columns: repeat(5, 1fr);
  }
  [data-content=team-small] > * {
    margin-block-end: unset;
  }
  /* Flex layout */
  [data-layout=flex] {
    display: flex;
    gap: var(--spacing-l);
    margin-block-end: var(--spacing-r);
  }
  [data-layout=flex] > * {
    flex: 1;
    margin-block-end: unset;
  }
  /* Main layout system */
  .layout {
    display: grid;
    gap: var(--grid-row-gap) var(--grid-column-gap);
    grid-template-columns: var(--grid-12-col);
  }
  .layout > * {
    margin-block-end: var(--spacing-r);
  }
  /* Named layout systems (composer-themed) */
  [data-layout=bartok] {
    padding-block-end: unset;
  }
  [data-layout=bartok] > *:nth-child(1) {
    grid-column: 1/8;
  }
  [data-layout=bartok] > *:nth-child(2) {
    grid-column: 9/-1;
  }
  [data-layout=beethoven] > *:nth-child(1) {
    grid-column: 1/10;
  }
  [data-layout=beethoven] > *:nth-child(2) {
    grid-column: 10/-1;
  }
  [data-layout=bizet] > *:nth-child(1) {
    align-items: flex-start;
    display: flex;
    grid-column: 1/3;
    justify-items: flex-end;
  }
  [data-layout=bizet] > *:nth-child(2) {
    grid-column: 4/-1;
  }
  [data-layout=britten] > *:nth-child(1) {
    grid-column: 1/6;
  }
  [data-layout=britten] > *:nth-child(2) {
    grid-column: 8/-1;
  }
  [data-layout=chopin] > *:nth-child(1) {
    grid-column: 1/7;
  }
  [data-layout=chopin] > *:nth-child(2) {
    grid-column: 8/-1;
  }
  [data-layout=debussy] > *:nth-child(1) {
    align-items: flex-start;
    display: flex;
    grid-column: 1/3;
    justify-items: flex-end;
  }
  [data-layout=debussy] > *:nth-child(2) {
    grid-column: 4/10;
  }
  [data-layout=debussy] > *:nth-child(3) {
    grid-column: 10/-1;
  }
  [data-layout=dvorak] > *:nth-child(1) {
    grid-column: 1/8;
  }
  [data-layout=dvorak] > *:nth-child(2) {
    grid-column: 8/-1;
  }
  [data-layout=gershwin] > *:nth-child(1) {
    grid-column: 1/4;
  }
  [data-layout=gershwin] > *:nth-child(2) {
    grid-column: 4/-1;
  }
  [data-layout=handel] > *:nth-child(1) {
    grid-column: 1/4;
  }
  [data-layout=handel] > *:nth-child(2) {
    grid-column: 5/9;
  }
  [data-layout=handel] > *:nth-child(3) {
    grid-column: 10/-1;
  }
  [data-layout=liszt] > *:nth-child(1) {
    align-items: flex-start;
    display: flex;
    grid-column: 1/3;
    justify-items: flex-end;
  }
  [data-layout=liszt] > *:nth-child(2) {
    grid-column: 4/9;
  }
  [data-layout=liszt] > *:nth-child(3) {
    grid-column: 9/-1;
  }
  [data-layout=mendelssohn] > *:nth-child(1) {
    align-items: flex-start;
    display: flex;
    grid-column: 1/3;
    justify-items: flex-end;
  }
  [data-layout=mendelssohn] > *:nth-child(2) {
    grid-column: 3/8;
  }
  [data-layout=mendelssohn] > *:nth-child(3) {
    grid-column: 8/12;
  }
  [data-layout=mozart] > *:nth-child(1) {
    align-items: flex-start;
    display: flex;
    grid-column: 1/3;
    justify-items: flex-end;
  }
  [data-layout=mozart] > *:nth-child(2) {
    border-inline-end: 40px solid var(--color-accent);
    grid-column: 4/10;
    padding-inline-end: var(--spacing-l);
  }
  [data-layout=schubert] {
    margin-block-start: var(--spacing-r);
  }
  [data-layout=schubert] > * {
    grid-column: 1/12;
  }
  [data-layout=stravinsky] {
    grid-template-columns: var(--grid-12-col);
  }
  [data-layout=stravinsky] > *:nth-child(1) {
    grid-column: 1/8;
  }
  [data-layout=stravinsky] > *:nth-child(2) {
    grid-column: 9/-1;
  }
  /* Enhanced featured item */
  .item-featured {
    align-items: center;
    display: grid;
    gap: 0 var(--grid-column-gap);
    grid-template-columns: var(--grid-12-col);
  }
  .item-featured > *:nth-child(1) {
    grid-column: 1/6;
  }
  .item-featured > *:nth-child(2) {
    grid-column: 6/-1;
  }
  .item-featured img {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0);
    transition: box-shadow var(--animate-duration-faster) var(--animate-function);
  }
  .item-featured:hover img {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
  }
  .item-featured:hover img:hover {
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
  }
  .item {
    grid-column: span 3;
  }
  /* Related items grid with animations */
  .item-grid[data-variant=related] {
    margin-block: -1rem 0;
    margin-inline: 10%;
  }
  .item-grid[data-variant=related] .item {
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
    scale: 1;
    transform-origin: bottom center;
    transition: all var(--animate-duration-fast) var(--animate-function);
  }
  .item-grid[data-variant=related] .item:hover {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
    scale: var(--scale-up);
  }
  /* Sequential fade-in animation for related items */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .item-grid[data-variant=related] .item {
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
  }
  .item-grid[data-variant=related] .item:nth-child(1) {
    animation-delay: 0.1s;
  }
  .item-grid[data-variant=related] .item:nth-child(2) {
    animation-delay: 0.25s;
  }
  .item-grid[data-variant=related] .item:nth-child(3) {
    animation-delay: 0.4s;
  }
  .item-grid[data-variant=related] .item:nth-child(4) {
    animation-delay: 0.55s;
  }
}
@media screen and (min-width: 64em) {
  /* Partner offers adjustment */
  #partner-offers {
    margin-block: unset;
  }
  /* Form input states */
  :is([type=email], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea):focus {
    scale: var(--scale-up);
  }
  /* Button variants */
  .btn[data-variant=block] {
    margin-block-start: -5px;
  }
  .btn[data-variant=l] {
    font-size: var(--font-size-r);
    padding-block: 20px;
    padding-inline: var(--spacing-m);
  }
  /* Animated button effect */
  .btn[data-effect=animated] {
    border: 0 solid;
    outline: 1px solid;
    outline-color: var(--color-accent);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  .btn[data-effect=animated]:hover {
    border: 1px solid;
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 10px;
  }
  /* Size utilities */
  [data-size=xs] {
    font-size: var(--font-size-xs);
  }
  [data-size="3xl"] {
    font-size: 5cqi;
    /* Container query units for responsive sizing */
    margin-block: 0 var(--spacing-r);
  }
}
/* ==========================================================================
ACCESSIBILITY: REDUCED MOTION
========================================================================== */
/* Respect user motion preferences */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto;
    transition-duration: 1ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(*, *::before, *::after) {
    animation: none !important;
    transition: none !important;
  }
}
/* === Tribe Subscribe Dropdown Cleanup === */
#tribe-events-subscribe-dropdown-content {
  background: #1a1a1a;
  /* dark background */
  border-radius: 12px;
  padding: 1rem 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  max-width: 260px;
  margin-top: 0.5rem;
  z-index: 50;
}

.tribe-events-c-subscribe-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tribe-events-c-subscribe-dropdown__list-item {
  margin: 0.25rem 0;
}

.tribe-events-single-section li:before, .tribe-events-meta-group li:before {
  content: none !important;
}

.tribe-events-c-subscribe-dropdown__list-item-link {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: #2c2c2c;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tribe-events-c-subscribe-dropdown__list-item-link:hover {
  background: #a41e26;
  /* your accent red */
  transform: translateX(3px);
}

.tribe-events-c-subscribe-dropdown__list-item-link::before {
  content: "📅 ";
  opacity: 0.8;
}

/* Optional: match buttons with your theme’s button styles */
#tribe-events-subscribe-dropdown-content a.btn,
.tribe-events-c-subscribe-dropdown__list-item-link {
  font-family: var(--font-alt, sans-serif);
}

.tribe-events-c-subscribe-dropdown__button .tribe-common-c-svgicon {
  display: none !important;
}

.tribe-events-c-subscribe-dropdown__button {
  padding: 0 !important;
}

.tribe-events-meta-group {
  width: unset !important;
  padding: 0 !important;
}

#tribe-events-pg-template {
  margin: 0;
  max-width: unset;
  padding: 0;
}

.restricted-message {
  margin: 3rem 0 3rem 0;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer-nav {
  grid-column: 1/-1;
}

#menu-footer-menu {
  columns: 4;
}

@media screen and (max-width: 64em) {
  #menu-footer-menu {
    columns: 2;
  }
}
.tribe-events-c-subscribe-dropdown {
  display: none;
}

.tribe-events-event-meta {
  display: block;
}

.tribe-events-venue-map {
  width: 100%;
}

.mp_wrapper .mepr-payment-method-icon img {
  inline-size: auto !important;
}

/*# sourceMappingURL=style.css.map */