/* Christmas Recital banner (Dec 5, 2026). Every class is prefixed crb- so nothing collides with the site's own styles. */
/* The gold running-text strip is hidden while the banner is showing; it returns when the banner expires. */
html.crb-on section.marquee { display: none; }

.crb {
  --crb-stage: #0a0a0a; --crb-ink: #f0eee7; --crb-gold: #e4ad13; --crb-gold-ink: #161616;
  --crb-berry: #d8394a; --crb-pine: #2f9a57; --crb-teal: #1f9c9c;
  --crb-display: "Unbounded", "Arial Black", sans-serif; --crb-body: "Manrope", Arial, sans-serif;
  --crb-aw: clamp(54px, 13vw, 150px);
  position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
  height: clamp(340px, 40vw, 430px);
  display: grid; grid-template-rows: 30px 1fr auto;
  background: var(--crb-stage); color: var(--crb-ink);
  font-family: var(--crb-body); font-size: 16px; line-height: 1.55; text-align: left;
}
.crb *, .crb *::before, .crb *::after { box-sizing: border-box; }
.crb::before, .crb::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .7s; }
.crb::before {
  background: radial-gradient(circle, var(--crb-berry) 1.5px, transparent 2px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 46% 85% at 84% 48%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 85% at 84% 48%, #000 0%, transparent 100%);
  opacity: .85;
}
.crb::after {
  background: radial-gradient(circle, var(--crb-pine) 1.3px, transparent 1.8px) 4px 4px / 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 40% 70% at 0% 100%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 70% at 0% 100%, #000 0%, transparent 100%);
  opacity: .6;
}
.crb.crb-show-photo::before, .crb.crb-show-photo::after { opacity: 0; }

/* venue photo behind the Sandler Center slide */
.crb-photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s ease; overflow: hidden; }
.crb-photo::before { content: ""; position: absolute; inset: 0; background: url("recital-sandler-center.jpg") center 42% / cover no-repeat; transform: scale(1.12); transition: transform 6.5s ease-out; }
.crb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.1) 100%), linear-gradient(0deg, rgba(10,10,10,.75) 0%, transparent 40%); }
.crb-show-photo .crb-photo { opacity: 1; }
.crb-show-photo .crb-photo::before { transform: scale(1); }
.crb-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* string lights */
.crb-lights {
  position: relative; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30'%3E%3Cpath d='M0 3 Q32 21 64 3' fill='none' stroke='%23555049' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 0;
}
.crb-bulb {
  position: absolute; top: 11px; width: 9px; height: 13px; margin-left: -4.5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c); box-shadow: 0 0 10px 2px var(--c);
  animation: crb-bulb 2.4s ease-in-out infinite;
}
.crb-bulb::before { content: ""; position: absolute; top: -3px; left: 2.5px; width: 4px; height: 4px; background: #555049; border-radius: 1px; }
@keyframes crb-bulb { 50% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } }

/* content row */
.crb-content {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 4vw, 56px);
  padding: 0 clamp(18px, 5vw, 60px);
  min-height: 0;
}
.crb-slides { position: relative; height: 100%; min-width: 0; }
.crb-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1vw, 12px);
  visibility: hidden; pointer-events: none;
}
.crb-slide.crb-active, .crb-slide.crb-leaving { visibility: visible; }
.crb-slide.crb-active { pointer-events: auto; }
.crb-slide[data-award] { padding-right: calc(var(--crb-aw) + 14px); }
.crb-line { display: block; overflow: hidden; padding: .1em 0 .2em; margin: -.1em 0 -.2em; }
.crb-line > span { display: block; transform: translateY(125%); }
.crb-active .crb-line > span { transform: none; transition: transform .8s cubic-bezier(.16,.9,.2,1); transition-delay: calc(.28s + var(--d, 0s)); }
.crb-leaving .crb-line > span { transform: translateY(-125%); transition: transform .3s ease-in; }
.crb-slide .crb-line.crb-split > span { transform: none; transition: none; }
.crb-ch { display: inline-block; transform: translateY(125%) rotate(14deg); transform-origin: 0 100%; }
.crb-active .crb-ch { transform: none; transition: transform .85s cubic-bezier(.2,1.3,.3,1); transition-delay: calc(.28s + var(--d, 0s) + var(--i) * 32ms); }
.crb-leaving .crb-ch { transform: translateY(-125%); transition: transform .26s ease-in; transition-delay: calc(var(--i) * 9ms); }
.crb-eyebrow { font-weight: 700; font-size: clamp(11px, 1.25vw, 14px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--crb-gold); }
.crb-big {
  font-family: var(--crb-display); font-weight: 300; color: var(--crb-ink);
  font-size: clamp(30px, 7.4vw, 86px); letter-spacing: -0.06em; line-height: 1.02;
}
.crb-big.crb-mid { font-size: clamp(30px, 6.4vw, 74px); }
.crb-gold { position: relative; display: inline-block; color: var(--crb-gold); }
.crb-swoosh { position: absolute; left: 0; bottom: -.13em; width: 100%; height: .13em; overflow: visible; clip-path: inset(-50% 100% -50% 0); }
.crb-swoosh path { fill: none; stroke: var(--crb-gold); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crb-active .crb-swoosh { clip-path: inset(-50% 0 -50% 0); transition: clip-path .6s cubic-bezier(.3,.7,.2,1) 1s; }
.crb-sub { font-size: clamp(14px, 1.9vw, 20px); font-weight: 500; color: #cfcbc0; }
.crb-sub.crb-line { padding-bottom: .5em; margin-bottom: -.5em; }
.crb-mark { position: relative; display: inline-block; color: var(--crb-ink); font-weight: 700; }
.crb-mark .crb-swoosh { bottom: -.34em; height: .26em; }
.crb-times { display: flex; align-items: stretch; gap: clamp(14px, 3vw, 36px); }
.crb-rule { width: 1px; background: rgba(240,238,231,.3); }
.crb-time-label { display: block; font-weight: 700; font-size: clamp(9.5px, 1vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: #cfcbc0; margin-bottom: 4px; }
.crb-time-num { display: block; font-family: var(--crb-display); font-weight: 300; font-size: clamp(25px, 6vw, 68px); letter-spacing: -0.06em; line-height: 1; white-space: nowrap; }
.crb-ampm { font-size: .38em; font-weight: 500; letter-spacing: 0.04em; margin-left: .3em; color: var(--crb-gold); }

/* gold music trophy: first slide only, rises from behind the piano keys */
.crb-award {
  position: absolute; z-index: 2; bottom: 0; width: var(--crb-aw); height: auto; overflow: visible; pointer-events: none;
  right: calc(clamp(18px, 5vw, 60px) + clamp(96px, 17vw, 184px) + clamp(16px, 4vw, 44px));
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.65));
  transform: translateY(112%); transition: transform .4s ease-in;
}
.crb-show-award .crb-award { transform: none; transition: transform .95s cubic-bezier(.2,1.25,.3,1) .35s; }
.crb-spark { transform-box: fill-box; transform-origin: center; animation: crb-spark 2.6s ease-in-out infinite; }
.crb-spark:nth-of-type(2) { animation-delay: .9s; }
.crb-spark:nth-of-type(3) { animation-delay: 1.7s; }
@keyframes crb-spark { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1; } }

/* taped date card; steps aside while the venue photo is showing */
.crb-side { transition: opacity .5s, translate .6s cubic-bezier(.2,.8,.2,1); }
.crb-show-photo .crb-side { opacity: 0; translate: 40px 0; }
.crb-card {
  position: relative; width: clamp(96px, 17vw, 184px);
  background: var(--crb-ink); color: var(--crb-gold-ink);
  padding: clamp(12px, 2vw, 22px) 8px clamp(10px, 1.6vw, 18px);
  text-align: center; transform: rotate(4deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  animation: crb-sway 6s ease-in-out infinite;
}
.crb-tape { position: absolute; top: -9px; left: 50%; width: 46%; height: 18px; background: var(--crb-gold); opacity: .92; transform: translateX(-50%) rotate(-5deg); }
.crb-card-day { display: block; font-weight: 700; font-size: clamp(8.5px, 1vw, 11px); letter-spacing: 0.2em; text-transform: uppercase; }
.crb-card-num { display: block; font-family: var(--crb-display); font-weight: 600; font-size: clamp(52px, 10vw, 112px); line-height: .95; letter-spacing: -0.06em; color: var(--crb-berry); }
.crb-card-month { display: block; font-family: var(--crb-display); font-weight: 500; font-size: clamp(10px, 1.5vw, 16px); letter-spacing: 0.02em; text-transform: uppercase; }
@keyframes crb-sway { 50% { transform: rotate(2.4deg) translateY(-3px); } }
.crb-card-num.crb-pop { animation: crb-pop .65s cubic-bezier(.3,.7,.3,1); }
@keyframes crb-pop { 30% { transform: scale(1.16) rotate(-5deg); } 62% { transform: scale(.96) rotate(1deg); } }

/* controls */
.crb-controls { display: flex; align-items: center; gap: 14px; padding: 0 clamp(18px, 5vw, 60px) 22px; z-index: 4; }
.crb a.crb-cta {
  font-family: var(--crb-body); font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  background: var(--crb-gold); color: var(--crb-gold-ink); padding: 10px 18px; border-radius: 99px; white-space: nowrap;
}
.crb a.crb-cta:hover { background: #f3bf2e; }
.crb-dots { display: flex; gap: 7px; margin-left: auto; }
.crb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; min-width: 0; min-height: 0; box-shadow: none; }
.crb button:focus-visible, .crb a:focus-visible { outline: 2px solid var(--crb-ink); outline-offset: 2px; }
.crb .crb-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(240,238,231,.3); transition: width .3s, background .3s; }
.crb .crb-dot.crb-on { width: 24px; background: var(--crb-gold); }
.crb .crb-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(240,238,231,.35); font-size: 14px; line-height: 1; flex-shrink: 0; color: var(--crb-ink); }
.crb .crb-arrow:hover { background: rgba(240,238,231,.12); }
.crb-arrows { display: flex; gap: 6px; }

/* piano-key progress strip */
.crb-keys {
  display: none; /* piano-key strip removed at the owner's request */
  position: relative; height: 16px; z-index: 4;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 18px, #0a0a0a 18px 30px, transparent 30px 42px, #0a0a0a 42px 54px, transparent 54px 90px, #0a0a0a 90px 102px, transparent 102px 114px, #0a0a0a 114px 126px, transparent 126px 138px, #0a0a0a 138px 150px, transparent 150px 168px) 0 0 / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, #f0eee7 0 23px, #0a0a0a 23px 24px);
}
.crb-fill { display: none; /* the gold "loading" sweep across the keys is switched off; the keys stay still */ position: absolute; inset: 0; background: var(--crb-gold); mix-blend-mode: multiply; transform-origin: left; transform: scaleX(0); }
.crb-fill.crb-run { animation: crb-fill var(--crb-dur, 5s) linear forwards; }
.crb.crb-paused .crb-fill { animation-play-state: paused; }
@keyframes crb-fill { to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .crb { --crb-aw: 44px; }
  .crb-award { right: auto; left: 160px; }
  .crb-slide[data-award] { padding-right: 0; }
  .crb-dots { display: none; }
  .crb-arrows { margin-left: auto; }
  .crb-controls { gap: 10px; }
  .crb a.crb-cta { padding: 9px 13px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .crb-bulb, .crb-card, .crb-card-num.crb-pop { animation: none; }
  .crb-spark { animation: none; opacity: 1; }
  .crb-line > span, .crb-slide, .crb-ch, .crb-swoosh, .crb-award, .crb-side { transition: none !important; }
}