/* Gayla 2026 · scoped, dependency-free banner styles. */
.gayla26 {
  --g26-edge: clamp(140px, 26%, 390px);
  --g26-height: clamp(420px, 28.25vw, 460px);
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  height: var(--g26-height);
  overflow: hidden;
  color: #fff5ee;
  background: #040d36 url('../images/sky.webp') center bottom / cover no-repeat;
}
.gayla26, .gayla26 * { box-sizing: border-box; }
.gayla26__art { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.gayla26__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #02092738, transparent 65%); }
.gayla26__stars { position: absolute; inset: 0; z-index: 1; }
.gayla26__star {
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%;
  background: #fff0eb; opacity: var(--rest); box-shadow: 0 0 4px #a0bfff80;
  animation: g26-twinkle var(--duration) ease-in-out var(--delay) infinite;
}
.gayla26__star--flare::before, .gayla26__star--flare::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #ffe2dd, transparent); width: 11px; height: 1px;
}
.gayla26__star--flare::after { transform: translate(-50%, -50%) rotate(90deg); }
.gayla26__lights { position: absolute; inset: 0 0 auto; height: 95px; z-index: 2; }
.gayla26__wires { position: absolute; width: 100%; height: 95px; overflow: visible; }
.gayla26__wires path { fill: none; stroke: #c77d29; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gayla26__bulb { position: absolute; width: 9px; height: 14px; transform: translateX(-50%); }
.gayla26__bulb::before { content: ''; position: absolute; width: 1px; height: var(--drop); left: 4px; bottom: 100%; background: #bb833e; }
.gayla26__bulb::after { content: ''; position: absolute; top: -3px; left: 1.5px; width: 6px; height: 4px; border-radius: 1px; background: linear-gradient(90deg, #71532c, #bf9251 45%, #71532c); }
/* Amber glass and a small luminous filament sit within a broad, faint halo. */
.gayla26__bulb-glass {
  position: absolute; inset: 0; border-radius: 45% 45% 48% 48%;
  border: 1px solid #ffd69a7a;
  background: radial-gradient(ellipse at 40% 30%, #fff1cf85, #ffc56a38 65%, #e9973026);
  box-shadow: 0 0 5px 1px #ffbd593d, 0 0 13px 3px #ffac3e24;
}
.gayla26__bulb-glass::before {
  content: ''; position: absolute; width: 64px; height: 64px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffc15c24 0%, #ffb15110 24%, #ff9f3e06 44%, transparent 70%);
}
.gayla26__bulb-glass::after {
  content: ''; position: absolute; top: 4px; left: 2px; width: 3px; height: 6px; border-radius: 45%;
  background: #fff1c9;
  box-shadow: 0 0 3px 1px #ffe1a3a6, 0 0 7px 2px #ffb95266;
}
/* A single gentle brightness dip; its cord and socket remain steady. */
.gayla26__bulb--flicker .gayla26__bulb-glass { animation: g26-lamp-flicker 19.7s ease-in-out -8s infinite; }
@keyframes g26-lamp-flicker {
  0%, 54%, 55%, 57%, 100% { opacity: 1; }
  54.4% { opacity: .82; }
  56% { opacity: .91; }
}
/* Each frame and its sprigs share one coordinate system, anchored to the edge.
   Attachments scale with the artwork rather than the banner's changing height. */
.gayla26__florals { position: absolute; top: -8px; width: var(--g26-edge); z-index: 4; isolation: isolate; }
.gayla26__florals--left { left: -22px; aspect-ratio: 564 / 1086; }
.gayla26__florals--right { right: -22px; aspect-ratio: 628 / 1075; }
.gayla26__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.gayla26__sprig { position: absolute; width: 35%; max-width: 128px; height: auto; transform-origin: var(--anchor-x, 50%) 3%; animation: g26-sway var(--duration, 9s) ease-in-out var(--delay, 0s) infinite alternate; }
/* Upper stems emerge behind the frame; lower stems meet the foliage in front.
   Slightly broader arcs and staggered rhythms make the breeze visible without moving the frame. */
.gayla26__sprig--marigold { top: -1%; left: 55%; z-index: 0; --anchor-x: 32%; --duration: 7.2s; --delay: -3s; --from: -7deg; --to: 5deg; }
.gayla26__sprig--pink { top: 24%; left: 20%; z-index: 2; width: 32%; max-width: 117px; --anchor-x: 50%; --duration: 9.2s; --delay: -7s; --from: 3.5deg; --to: -6deg; }
.gayla26__sprig--fuchsia { top: -1%; left: 20%; z-index: 0; --anchor-x: 25%; --duration: 8.3s; --delay: -6s; --from: 6deg; --to: -5deg; }
.gayla26__sprig--coral { top: 27%; right: 4%; z-index: 2; width: 32%; max-width: 118px; --anchor-x: 7%; --duration: 7.8s; --delay: -1s; --from: -3.5deg; --to: 6.5deg; }
/* Event hierarchy follows the original landscape artwork. */
.gayla26__copy { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px 18px; text-align: center; }
.gayla26[data-show-copy='false'] .gayla26__copy { display: none; }
.gayla26__ornament { display: flex; align-items: center; gap: 9px; color: #eec3d4; height: clamp(23px, 2.25cqw, 34px); }
.gayla26__ornament svg { display: block; width: clamp(27px, 2.65cqw, 40px); height: 100%; }
.gayla26__ornament::before, .gayla26__ornament::after { content: ''; width: clamp(45px, 4.15cqw, 64px); height: 1px; background: #d87ba5; }
.gayla26__foundation { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 3px 0 0; color: #fff5fc; font: 400 clamp(11px, 1.3cqw, 20px)/1.5 Arial, Helvetica, sans-serif; letter-spacing: .235em; white-space: nowrap; }
.gayla26__brand-flourish { flex: 0 0 auto; width: 30px; height: 14px; color: #e7b2c8; }
.gayla26__brand-flourish:last-child { transform: rotate(180deg); }
.gayla26__year { margin: 4px 0 0; color: #ffb64b; font: 400 clamp(25px, 2.85cqw, 44px)/1.25 Arial, Helvetica, sans-serif; letter-spacing: .24em; padding-left: .24em; }
.gayla26__title { width: min(48cqw, 700px); margin: 2px 0 6px; padding: 0; line-height: 0; }
.gayla26__title img { display: block; width: 100%; height: auto; }
.gayla26__details { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0; margin: 0; list-style: none; color: #fffaff; font: 400 clamp(11px, 1.055cqw, 16px)/1.4 Arial, Helvetica, sans-serif; text-shadow: 0 1px 8px #13062590; }
.gayla26__detail { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-height: 32px; }
.gayla26__detail + .gayla26__detail { border-left: 1px solid #f4d5e6ad; margin-left: 16px; padding-left: 16px; }
.gayla26__detail svg { flex: 0 0 auto; width: clamp(24px, 2.05cqw, 32px); height: clamp(24px, 2.05cqw, 32px); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gayla26__detail--date svg { color: #ff4166; }
.gayla26__detail--time svg { color: #00c4f0; }
.gayla26__detail--venue svg { color: #ff7844; stroke-width: 3; }
.gayla26__ticket { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; width: clamp(238px, 19.7cqw, 304px); min-height: clamp(48px, 3.9cqw, 60px); padding: 8px 20px; border-radius: 999px; border: 1.5px solid #fff6b8; background: linear-gradient(180deg, #df073d 0%, #ad0037 65%, #870032); color: #fffaf2; font: 500 clamp(21px, 1.78cqw, 28px)/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .035em; white-space: nowrap; flex-shrink: 0; text-decoration: none; box-shadow: 0 0 5px 2px #ffb932, 0 0 20px 5px #ff711c80, inset 0 0 14px #ff614352; }
.gayla26__ticket svg { flex: 0 0 auto; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.gayla26__ticket:hover { background: linear-gradient(180deg, #ed1549, #ab003b); }
.gayla26__ticket:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.gayla26[data-paused='true'] *, .gayla26[data-offscreen='true'] * { animation-play-state: paused !important; }
@keyframes g26-twinkle { 0%, 100% { opacity: var(--rest); } 45% { opacity: .95; } 70% { opacity: .25; } }
@keyframes g26-sway { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
@container (max-width: 760px) {
  .gayla26__florals { width: clamp(130px, 25cqw, 190px); }
  .gayla26__florals--left { left: -36px; }
  .gayla26__florals--right { right: -36px; }
  .gayla26__copy { padding: 18px 14px; }
  .gayla26__foundation { gap: 7px; }
  .gayla26__brand-flourish { width: 22px; }
  .gayla26__title { width: min(74cqw, 550px); margin-top: 6px; margin-bottom: 15px; }
  .gayla26__details { display: grid; justify-content: center; gap: 7px; text-align: left; font-size: clamp(11px, 1.9cqw, 14px); }
  .gayla26__detail { min-height: 26px; gap: 11px; }
  .gayla26__detail + .gayla26__detail { border: 0; margin: 0; padding: 0; }
  .gayla26__detail svg { width: 27px; height: 27px; }
  .gayla26__ticket { margin-top: 21px; width: clamp(245px, 48cqw, 310px); min-height: 53px; font-size: 24px; }

}
@container (max-width: 420px) {
  .gayla26__foundation { font-size: 11px; letter-spacing: .2em; }
  .gayla26__year { font-size: 28px; letter-spacing: .19em; margin-top: 9px; }
  .gayla26__title { width: 88cqw; margin: 10px 0 20px; }
  .gayla26__details { font-size: 11px; }
  .gayla26__copy { padding-top: 40px; padding-bottom: 20px; }
}
@media (max-width: 700px) { .gayla26 { --g26-height: 440px; } }
@media (prefers-reduced-motion: reduce) { .gayla26 *, .gayla26 *::before, .gayla26 *::after { animation: none !important; } }