/* site.css — hand-rolled stylesheet for eporchestra.ca.
 *
 * Replaces vendored Bulma 0.6.2 (style.css) + custom-style.css. Zero build
 * step: edit this file directly, commit, deploy. All brand colors are OKLCH.
 */

/* Cascade layers: utilities beat components without !important.
 * Order: tokens < reset < base < components < utilities < motion.
 * Kept !important: motion (beats transitions everywhere), is-pulled-*
 * floats (editor markup, must beat .content img display rules even in
 * odd injection order). Third-party CSS is FA-via-JS only — its injected
 * <style> covers .svg-inline--fa sizing, no conflict with our utilities.
 * Inline style= attributes are unlayered and still win over all of this;
 * none of ours set display/float.
 */
@layer tokens, reset, base, components, utilities, motion;

@layer tokens {
/* ============ 1. Tokens ============ */
:root {
  color-scheme: light dark;

  /* Brand — single source per hue; derivatives via color-mix.
   * Purple #463059 = oklch(35.4% 0.074 307.8), hover #392748 ≈ −17% lightness.
   * Orange #F58C1E = oklch(73.8% 0.167 59.2), hover #ef7f0b ≈ −8% lightness. */
  --brand-purple: oklch(35.4% 0.074 307.8);   /* #463059 */
  --brand-purple-deep: color-mix(in oklch, var(--brand-purple), black 17%);
  --brand-orange: oklch(73.8% 0.167 59.2);     /* #F58C1E */
  --brand-orange-deep: color-mix(in oklch, var(--brand-orange), black 8%);

  /* Surfaces & text (light default) */
  --bg: oklch(100% 0 0);
  --surface: oklch(97% 0 0);                   /* whitesmoke */
  --surface-raised: oklch(100% 0 0);
  --border: oklch(89% 0 0);
  /* Base hues kept under -base aliases: inside the dark-mode block below,
   * var(--text)/var(--link) already resolve to their dark overrides, so dark
   * derivatives reference the -base tokens to stay single-sourced. */
  --text-base: oklch(41% 0 0);                 /* #4a4a4a */
  --text: var(--text-base);
  --text-strong: oklch(33% 0 0);                /* #363636 */
  --text-muted: oklch(53% 0 0);
  --text-on-brand: oklch(100% 0 0);

  /* Accents */
  --link-base: oklch(57.1% 0.174 259.7);       /* #3273dc */
  --link: var(--link-base);
  --success: oklch(75.5% 0.205 148.9);
  --info: oklch(66.9% 0.158 244.7);
  --warning: oklch(90.2% 0.153 94.8);
  --danger: oklch(65.9% 0.231 15.8);

  --radius: 4px;
  --container-max: 1152px; /* Bulma 0.6 .container cap */
  --gutter: 0.75rem; /* Bulma column gutter (half of 1.5rem) */
  --navbar-height: 3.25rem;
  --transition-quick: 86ms; /* Bulma 0.6 burger timing */
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* All dark tokens derive from light ones via color-mix — single source. */
    --bg: color-mix(in oklch, var(--brand-purple) 60%, black);
    --surface: color-mix(in oklch, var(--brand-purple) 66%, black);
    --surface-raised: color-mix(in oklch, var(--brand-purple) 72%, black);
    --border: color-mix(in oklch, var(--text-base) 38%, var(--bg));
    --text: oklch(90% 0 0);
    --text-strong: oklch(96% 0 0);
    --text-muted: oklch(72% 0 0);
    --link: color-mix(in oklch, var(--link-base) 75%, white);
  }
}
}

@layer reset {
/* ============ 2. Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }
}

@layer base {

html {
  font-size: 16px;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}

img, video, iframe { max-inline-size: 100%; }
img { block-size: auto; }

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

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
}

@layer components {
/* ============ 3. Typography (.content, .title, .subtitle) ============ */
.content { overflow-wrap: break-word; }
.content:not(:last-child) { margin-block-end: 1.5rem; }

.content h1, .content h2, .content h3, .content h4,
.content h5, .content h6 {
  color: var(--text-strong);
  font-weight: 400;
  line-height: 1.125;
  overflow-wrap: break-word;
}
.content h1 { font-size: 2em; margin-block: 1em 0.5em; }
.content h1:first-child { margin-block-start: 0; }
.content h2 { font-size: 1.75em; margin-block: 1.1428em 0.5714em; }
.content h2:first-child { margin-block-start: 0; }
.content h3 { font-size: 1.5em; margin-block: 1.3333em 0.6666em; }
.content h3:first-child { margin-block-start: 0; }
.content h4 { font-size: 1.25em; margin-block: 1em 0.8em; }
.content h4:first-child { margin-block-start: 0; }
.content h5 { font-size: 1.125em; margin-block-end: 0.8888em; }
.content h6 { font-size: 1em; margin-block-end: 1em; }

.title, .subtitle { overflow-wrap: break-word; }
.title:not(:last-child), .subtitle:not(:last-child) { margin-block-end: 1.5rem; }
/* Bulma pulls a subtitle tight under its title (and vice versa) unless
 * .is-spaced opts out. Physical here (not logical): Bulma uses margin-top,
 * and the gap is vertical regardless of writing mode. */
.title:not(.is-spaced) + .subtitle { margin-top: -1.5rem; }
.subtitle:not(.is-spaced) + .title { margin-top: -1.5rem; }

.content p, .content dl, .content table { margin-block-end: 1em; }
/* Bulma list system (my * {margin:0} reset kills UA bullets — restore here) */
.content ul, .content ol { margin-inline-start: 2em; margin-block: 1em; }
.content ul { list-style: disc outside; }
.content ol { list-style: decimal outside; }
.content ul ul { list-style-type: circle; margin-block: 0.5em 0; }
.content ul ul ul { list-style-type: square; }

.title {
  color: var(--text-strong);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125;
  margin-block-end: 0.5em;
}
.subtitle {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin-block-end: 0.75rem;
}
.title.is-5 { font-size: 1.25rem; }
.subtitle.is-6 { font-size: 1rem; }
}

@layer utilities {
.is-size-1 { font-size: 3rem; }
.is-size-3 { font-size: 2rem; }
.is-size-4 { font-size: 1.5rem; }
}

@layer components {

/* Concert program listings: Bulma has no rule here, so .content dd's
 * 2em indent applies — exactly like prod. Do NOT reset it. */
.concertProgram, .compactConcertProgram { margin-block-end: 1em; }
.concertProgram .composer, .compactConcertProgram .composer { font-weight: 700; }
.concertProgram .composition, .compactConcertProgram .composition {
  margin-block-end: 0.5em;
}

/* Rich-text / CKEditor content */
.content table { border-collapse: collapse; inline-size: 100%; }
.content th, .content td {
  border: 1px solid var(--border);
  padding: 0.5em 0.75em;
  text-align: start;
  vertical-align: top;
}
.content th { color: var(--text-strong); }
.content li + li { margin-block-start: 0.25em; }
.content dd { margin-inline-start: 2em; } /* Bulma .content dd */
.content figure { margin-inline: 2em; margin-block: 1em; text-align: center; }
.content figure:not(:first-child) { margin-block-start: 2em; }
.content figure:not(:last-child) { margin-block-end: 2em; }
.content figure img { display: block; margin-inline: auto; }
.content figure figcaption {
  color: var(--text-muted);
  font-size: smaller;
  line-height: 1.4;
  text-align: center;
}
.content iframe { max-inline-size: 100%; }
}

@layer utilities {
/* Editor float helpers (replaces Bulma is-pulled-*).
 * Physical by design: float:left/right and these side-margins mirror Bulma's
 * directional helpers, not writing-mode-relative layout. */
.is-pulled-left, .align_left { float: left !important; margin: 0 1em 0.5em 0; }
.is-pulled-right, .align_right { float: right !important; margin: 0 0 0.5em 1em; }
.align_center { display: block; margin-block: 1em; margin-inline: auto; }
@media (width <= 479px) {
  .is-pulled-left, .align_left, .is-pulled-right, .align_right {
    float: none !important;
    margin-inline: auto;
    inline-size: 100%;
  }
}
}

@layer components {
/* ============ 4. Layout: container / section / columns ============ */
.container {
  margin-inline: auto;
  max-inline-size: var(--container-max);
  inline-size: 100%;
}

.section { padding: 3rem 1.5rem; }

/* Bulma grid: flex ONLY at ≥769px (or .is-desktop at ≥1024). Below that,
 * columns stack as blocks — footer halves, content/sidebar, concert grids.
 * .columns.is-mobile stays flex at all widths. Gutters are negative-margin
 * on parent + var(--gutter) padding on children (not gap). */
.columns {
  margin-inline: calc(var(--gutter) * -1);
  margin-block-start: calc(var(--gutter) * -1);
}
.columns:last-child { margin-block-end: calc(var(--gutter) * -1); }
.columns:not(:last-child) { margin-block-end: calc(1.5rem - var(--gutter)); }
.columns.is-mobile { display: flex; }
.columns.is-multiline { flex-wrap: wrap; }
.columns.is-vcentered { align-items: center; }
@media (width >= 769px) {
  .columns:not(.is-desktop) { display: flex; }
}
@media (width >= 1024px) {
  .columns.is-desktop { display: flex; }
}

.column {
  display: block;
  flex: 1 1 0;
  min-inline-size: 0;
  padding: var(--gutter);
}
/* Widths apply at ≥769px like Bulma (plain is-half etc. are tablet+).
 * Below that, columns are full-width blocks — except .is-fullwidth,
 * a non-Bulma class home.php relies on (kept ungated). Physical width:
 * Bulma's column fractions are writing-mode-agnostic, so width is kept
 * (not inline-size) to match Bulma's own declarations. */
.column.is-fullwidth { flex: none; inline-size: 100%; } /* non-Bulma; see home.php */
.column.is-left { text-align: start; }
@media (width >= 769px) {
  .column.is-half { flex: none; width: 50%; }
  .column.is-one-third { flex: none; width: 33.3333%; }
  .column.is-two-thirds { flex: none; width: 66.6666%; }
  .column.is-one-quarter { flex: none; width: 25%; }
  .column.is-one-fifth { flex: none; width: 20%; }
}
}

@layer utilities {
/* Visibility helpers (Bulma breakpoints: mobile ≤768, touch ≤1023) */
.is-hidden { display: none; }
.is-flex { display: flex; }
@media (width <= 768px) { .is-hidden-mobile { display: none; } }
@media (width >= 769px) { .is-hidden-tablet { display: none; } }
@media (width <= 1023px) { .is-hidden-touch { display: none; } }
@media (width >= 1024px) { .is-hidden-desktop { display: none; } }

/* Text helpers */
.has-text-centered { text-align: center; }
.has-text-left { text-align: start; }
.has-text-white { color: var(--text-on-brand); }
.has-text-primary { color: var(--brand-purple); }
@media (prefers-color-scheme: dark) {
  /* Lighter purple that holds contrast on dark surfaces, mixed from brand. */
  .has-text-primary { color: color-mix(in oklch, var(--brand-purple) 45%, white); }
}
.has-text-secondary { color: var(--brand-orange); }
}

@layer components {
/* ============ 5. Header ============ */
header {
  background-color: oklch(0% 0 0);
  background-image: var(--header-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

header .header-brand { block-size: 160px; margin: 30px 30px 110px; }

.tinted-overlay {
  block-size: 100%;
  inline-size: 100%;
  background:
    linear-gradient(90deg, oklch(0% 0 0) 0%, transparent 30%),
    linear-gradient(-90deg, oklch(0% 0 0) 0%, transparent 30%);
}

.custom-header-image {
  block-size: 300px;
  inline-size: 500px;
  background-image: var(--header-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.custom-header-image--positioned {
  position: absolute;
  z-index: 0;
  inset-inline-start: var(--overlay-left);
  inline-size: var(--overlay-width);
}

.header-brand-link { position: relative; z-index: 1; }
}

@layer components {
/* ============ 6. Navbar ============ */
.navbar {
  background: var(--brand-purple);
  color: var(--text-on-brand);
  min-block-size: var(--navbar-height);
  position: relative;
  z-index: 30;
}
/* Bulma: .navbar > .container is stretch-flex. Scoped with child combinator
 * so it never matches .navbar-menu.container (the touch dropdown panel,
 * which also carries .container for Bulma's edge-to-edge margins). */
.navbar > .container {
  display: flex;
  align-items: stretch;
  min-block-size: var(--navbar-height);
  inline-size: 100%;
}
/* Bulma offsets brand flush with content padding */
.navbar > .container .navbar-brand { margin-inline-start: -1rem; }
.navbar > .container .navbar-menu { margin-inline-end: -1rem; }

.navbar-brand { display: flex; align-items: stretch; flex-shrink: 0; min-block-size: var(--navbar-height); }
.navbar-brand .navbar-item { display: flex; align-items: center; }
.navbar-brand .navbar-item img { max-block-size: 1.75rem; }

.navbar-item, .navbar-link {
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  line-height: 1.5;
  padding: 0.5rem 1rem; /* Bulma 0.6 navbar padding (not 0.75rem) */
  position: relative;
}
a.navbar-item:hover, a.navbar-link:hover,
.navbar-item.has-dropdown:hover > .navbar-link {
  background: var(--brand-purple-deep);
  color: var(--text-on-brand);
}
.navbar-menu { display: flex; flex-grow: 1; flex-shrink: 0; align-items: stretch; }
.navbar-start { display: flex; align-items: stretch; justify-content: flex-start; margin-inline-end: auto; }
.navbar-end { display: flex; align-items: center; justify-content: flex-end; margin-inline-start: auto; }

.navbar-item.has-dropdown { display: flex; align-items: stretch; padding: 0; position: relative; }
.navbar-item.has-dropdown > .navbar-link {
  display: flex;
  align-items: center;
  padding-inline-end: 2.5em;
}
/* Chevron (Bulma .navbar-link::after) */
.navbar-link::after {
  content: "";
  border: 1px solid currentcolor;
  border-inline-end: 0;
  border-block-start: 0;
  display: block;
  block-size: 0.5em;
  inline-size: 0.5em;
  pointer-events: none;
  position: absolute;
  inset-inline-end: 1.125em;
  inset-block-start: 50%;
  margin-block-start: -0.375em;
  transform: rotate(-45deg);
  transform-origin: center;
}
.navbar-dropdown {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0.5em 1em -0.125em rgb(0 0 0 / 10%);
  min-inline-size: 12rem;
  padding-block: 0.5rem;
  z-index: 20;
}
.navbar-item.has-dropdown:hover > .navbar-dropdown,
.navbar-item.has-dropdown:focus-within > .navbar-dropdown { display: block; }
.navbar-dropdown .navbar-item { color: var(--text); }
.navbar-dropdown .navbar-item:hover { background: var(--surface); color: var(--text-strong); }

.navbar-burger {
  appearance: none;
  background: none;
  border: 0;
  color: var(--text-on-brand);
  cursor: pointer;
  display: none;
  block-size: var(--navbar-height); /* Bulma: full navbar height, not padded */
  inline-size: var(--navbar-height);
  margin-inline-start: auto;
  padding: 0;
  position: relative;
}
.navbar-burger:hover { background: rgb(0 0 0 / 5%); }
/* Burger lines: physical geometry (centered X, absolute Y offsets) mirrored
 * from Bulma — the cross animation is symmetric, not writing-mode-relative. */
.navbar-burger span {
  background: currentcolor;
  display: block;
  height: 1px; /* Bulma 0.6: 1px lines */
  width: 16px;
  position: absolute;
  left: calc(50% - 8px);
  transform-origin: center;
  transition: background-color var(--transition-quick) ease-out, opacity var(--transition-quick) ease-out, transform var(--transition-quick) ease-out;
}
.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }
.navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Touch nav (≤1023px): Bulma turns .navbar-menu into a white dropdown panel.
 * Desktop menu items stay white-on-purple; the open panel is light with
 * dark text — matches prod Image 5 (not hover-to-reveal on touch). */
.navbar .navbar-menu.container { padding-inline: 0; }
@media (width <= 1023px) {
  .navbar > .container { flex-wrap: wrap; }
  .navbar > .container .navbar-brand { margin-inline-start: 0; }
  .navbar > .container .navbar-menu { margin-inline-end: 0; }
  .navbar-brand .navbar-item img { max-block-size: var(--navbar-height); }
  .navbar-burger { display: block; }
  .navbar-brand { flex-grow: 1; align-items: center; }
  .navbar-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    background: var(--surface-raised);
    box-shadow: 0 8px 16px rgb(10 10 10 / 10%);
    padding: 0.5rem 0;
  }
  .navbar-menu.is-active { display: block; }
  .navbar-start { flex-direction: column; align-items: stretch; margin-inline-end: 0; }
  .navbar-end { margin-inline-start: 0; padding: 0.5rem 0.75rem; }
  .navbar-menu .navbar-item, .navbar-menu .navbar-link { color: var(--text); }
  .navbar-menu a.navbar-item:hover, .navbar-menu a.navbar-link:hover {
    background: var(--surface);
    color: var(--brand-purple);
  }
  .navbar-item.has-dropdown { flex-direction: column; align-items: stretch; }
  .navbar-item.has-dropdown > .navbar-link { padding-inline-end: 1rem; }
  .navbar-dropdown {
    position: static;
    display: block; /* always visible in touch panel — no hover on mobile */
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-block: 0;
  }
  .navbar-link::after { display: none; }
  .navbar-dropdown .navbar-item { color: var(--text); padding-inline-start: 1.5rem; }
}
}

@layer components {
/* ============ 7. Hero (newsletter) ============ */
.hero { background: var(--brand-purple); color: var(--text-on-brand); }
.hero-body { padding: 3rem 1.5rem; }
.hero .title { color: var(--text-on-brand); }
.hero .subtitle { color: rgb(255 255 255 / 90%); }
.hero .subtitle strong { color: var(--text-on-brand); }
.hero a:not(.button) { color: var(--text-on-brand); }
}

@layer components {
/* ============ 8. Buttons ============ */
.button {
  appearance: none;
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-strong);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.5;
  padding: 0.375em 0.75em;
  text-align: center;
  white-space: nowrap;
}
.button:hover { border-color: var(--text-muted); color: var(--text-strong); }
.button.is-small { border-radius: 2px; font-size: 0.75rem; }
.button.is-rounded { border-radius: 999px; }
.button.is-fullwidth { display: flex; inline-size: 100%; }
.button.is-primary { background: var(--brand-purple); border-color: transparent; color: var(--text-on-brand); }
.button.is-primary:hover {
  background: var(--brand-purple-deep);
  color: var(--text-on-brand);
}
.button.is-secondary { background: var(--brand-orange); border-color: transparent; color: var(--text-on-brand); }
.button.is-secondary:hover {
  background: var(--brand-orange-deep);
  color: var(--text-on-brand);
}
.button.is-white.is-outlined {
  background: transparent;
  border-color: var(--text-on-brand);
  color: var(--text-on-brand);
}
.button.is-white.is-outlined:hover {
  background: var(--text-on-brand);
  color: var(--brand-purple);
}
}

@layer components {
/* ============ 9. Forms ============ */
.field.is-grouped { display: flex; gap: 0.5rem; align-items: center; }
.field-label.is-normal { padding-block-start: 0.375em; }
.label { color: var(--text-strong); font-weight: 700; }

.control { position: relative; font-size: 1rem; }
.control.is-expanded { flex-grow: 1; }
.control.has-icons-left .input { padding-inline-start: 2.25em; }
.control .icon.is-left {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  block-size: 2.25em; /* scales with icon font-size, like Bulma */
  inline-size: 2.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(86% 0 0); /* Bulma .icon resting #dbdbdb */
  pointer-events: none;
  z-index: 4;
}
/* Bulma scales the icon box with the input size (.input.is-small + .icon
 * → font-size 0.75rem, so the 2.25em box matches the input height instead
 * of overflowing it). Mirrored here for has-icons-left/right. */
.control.has-icons-left .input.is-small ~ .icon.is-left,
.control.has-icons-right .input.is-small ~ .icon.is-right { font-size: 0.75rem; }
.control.has-icons-left .input.is-medium ~ .icon.is-left,
.control.has-icons-right .input.is-medium ~ .icon.is-right { font-size: 1.25rem; }
.control.has-icons-left .input.is-large ~ .icon.is-left,
.control.has-icons-right .input.is-large ~ .icon.is-right { font-size: 1.5rem; }
.control .icon.is-left .fa,
.control .icon.is-left svg {
  inline-size: 1em;
  block-size: 1em;
  /* No font-size pin here: glyph inherits the icon box size —
   * normal input → 1rem, is-small input → 0.75rem (rule above).
   * Pinning 1rem regressed the small search icon to full size. */
}
.control .input:focus ~ .icon.is-left { color: var(--text-muted); }

.input, .select select {
  appearance: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-strong);
  font: inherit;
  max-inline-size: 100%;
  padding: 0.375em 0.625em;
  inline-size: 100%;
}
.input.is-small { font-size: 0.75rem; }
.input.is-rounded { border-radius: 999px; }
.select { position: relative; display: inline-block; }
.select::after {
  content: "";
  border: 2px solid var(--text-muted);
  border-inline-end: 0;
  border-block-start: 0;
  inline-size: 0.5em;
  block-size: 0.5em;
  position: absolute;
  inset-inline-end: 0.875em;
  inset-block-start: 50%;
  transform: translateY(-70%) rotate(-45deg);
  pointer-events: none;
}
.select select { padding-inline-end: 2.5em; }
}

@layer components {
/* ============ 10. Card / box / media / level ============ */
.card {
  background: var(--surface-raised);
  border-radius: 0; /* Bulma 0.6: cards are square */
  box-shadow: 0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%);
  color: var(--text);
  max-inline-size: 100%;
  position: relative;
  overflow: clip;
}
.card-image .image { aspect-ratio: 2 / 1; overflow: clip; }
/* Bulma-ism used in renderConcertCard; same 2:1 box */
.card-image .image.is-2by1 { aspect-ratio: 2 / 1; }
.card-image .image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card-content { padding: 1.5rem; }

.box {
  background: var(--surface-raised);
  border-radius: 5px;
  box-shadow: 0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%);
  color: var(--text);
  display: block;
  padding: 1.25rem;
  margin-block-end: 1.5rem;
}

.media { display: flex; gap: 1rem; align-items: flex-start; text-align: inherit; }
.media .content:not(:last-child) { margin-block-end: 0.75em; }
.media .media .content:not(:last-child) { margin-block-end: 0.5em; }
.media-content { flex: 1; min-inline-size: 0; }
.media-left { flex: none; }
.media-right { flex: none; margin-inline-start: auto; }

/* Bulma .level: space-between + growing items (footer socials/sponsors).
 * .level.is-mobile stays flex on small screens; plain .level stacks. */
.level { align-items: center; justify-content: space-between; }
.level:not(:last-child) { margin-block-end: 1.5rem; }
.level.is-mobile { display: flex; }
.level.is-mobile > .level-item:not(.is-narrow) { flex-grow: 1; }
@media (width >= 769px) {
  .level { display: flex; }
  .level > .level-item:not(.is-narrow) { flex-grow: 1; }
}
.level-left { display: flex; align-items: center; justify-content: flex-start; }
.level-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-inline-end: 0.75rem;
}
.level-item:not(:last-child) { margin-block-end: 0; }
}

@layer utilities {
/* Social/brand-link hover: same-layer specificity does the job —
 * a.has-text-primary:hover (0,2,1) beats .has-text-primary (0,1,0)
 * without !important now that layers order utilities above components.
 * Deep shade derived via color-mix from --brand-purple (single source; see §1). */
a.has-text-primary:hover, a.has-text-primary:focus { color: var(--brand-purple-deep); }
@media (prefers-color-scheme: dark) {
  a.has-text-primary:hover, a.has-text-primary:focus {
    color: color-mix(in oklch, var(--brand-purple-deep) 60%, white);
  }
}
}

@layer components {
/* Standalone icons (footer socials etc.) — dimensions only, like Bulma.
 * No font-size here: form icons inherit/scale from the input size via the
 * .control.has-icons-left rules above (normal input → 1rem, is-small → 0.75rem).
 * Pinning font-size here shrank the normal-size email icon's 2.25em box to
 * 1.6875rem so it top-aligned inside the taller input instead of filling it. */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon.is-small { block-size: 1rem; inline-size: 1rem; }
.icon.is-medium { block-size: 2rem; inline-size: 2rem; }
.icon.is-large { block-size: 3rem; inline-size: 3rem; }
}

@layer components {
/* ============ 11. Notifications (.message) ============ */
.message {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  border-radius: var(--radius);
  margin-block-end: 1rem;
}
.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5em 0.75em;
  font-weight: 700;
}
.message-body { padding: 0.75em; }
.message.is-info { border-inline-start-color: var(--info); }
.message.is-success { border-inline-start-color: var(--success); }
.message.is-warning { border-inline-start-color: var(--warning); }
.message.is-danger { border-inline-start-color: var(--danger); }
.message.is-primary { border-inline-start-color: var(--brand-purple); }

.delete {
  appearance: none;
  background: rgb(0 0 0 / 20%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  inline-size: 20px;
  block-size: 20px;
  position: relative;
  flex: none;
}
.delete::before, .delete::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: var(--text-on-brand, #fff);
  inline-size: 10px;
  block-size: 2px;
}
.delete::before { transform: translate(-50%, -50%) rotate(45deg); }
.delete::after { transform: translate(-50%, -50%) rotate(-45deg); }
}

@layer components {
/* ============ 12. Page nav lists (renderNav: search, sitemap) ============ */
.nav { list-style: none; padding-inline-start: 0; }
.nav li { margin-block: 1em; }
.nav a { font-weight: 700; }
.nav .summary { font-weight: 400; }
.nav-tree { padding-inline-start: 1.5em; list-style: disc; }
.nav .current > a { color: var(--text-strong); }
}

@layer components {
/* ============ 13. Video embeds ============ */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  max-inline-size: 100%;
  margin-block-end: 1.25rem;
}
.video-container iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
}

@layer components {
/* ============ 14. Footer ============ */
.footer { background: var(--surface); padding: 3rem 1.5rem 6rem; }
}

@layer components {
/* ============ 14b. Embeds moved out of inline style= (see §E) ============ */
/* Honeypot anti-bot field: positioned off-screen, not display:none
 * (bots still fill it; screen readers skip via aria-hidden). */
.honeypot { position: absolute; inset-inline-start: -5000px; }

/* Facebook noscript tracking pixel (1x1, hidden). */
.fb-pixel { display: none; }

/* Tweet + FB like row (was inline padding on .is-flex wrapper). */
.social-share { padding-block: 10px; }

/* FB like button container (was inline border/overflow). */
.fb-like { border: 0; overflow: clip; }

/* Gallery thumbnails appended after the concert body copy. */
.gallery-thumb { inline-size: 400px; max-inline-size: 100%; padding: 5px; }

/* Apple Podcasts embed (was inline width/max-width/overflow/background). */
.podcast-embed {
  inline-size: 100%;
  max-inline-size: 660px;
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: transparent;
  border: 0;
}
}

@layer motion {
/* ============ 15. Motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
}