:root {
      color-scheme: dark;
      --night: #11131b;
      --night-2: #191c27;
      --cream: #fbf4e8;
      --muted: #b9b8be;
      --gold: #f6bd57;
      --coral: #f27861;
      --line: rgba(251,244,232,.16);
      --serif: Georgia, "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--sans); }
    a { color: inherit; }
    .wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
    .topbar { position: absolute; z-index: 3; inset: 0 0 auto; }
    .nav { height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(251,244,232,.2); }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; font-weight: 800; letter-spacing: .01em; }
    .brand-name { font-size: 19px; }
    .nav-links { display: flex; gap: 24px; align-items: center; }
    .nav-links a { color: #e7e1dc; font-size: 13px; text-decoration: none; letter-spacing: .09em; text-transform: uppercase; }
    .nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--gold); }
    .nav-cta { border: 1px solid rgba(251,244,232,.5); border-radius: 999px; padding: 12px 18px; }
    .hero { min-height: 800px; display: flex; align-items: center; overflow: hidden; position: relative; background-color: var(--night); background-image: linear-gradient(90deg, rgba(17,19,27,.97) 0%, rgba(17,19,27,.9) 28%, rgba(17,19,27,.48) 58%, rgba(17,19,27,.18) 100%), linear-gradient(0deg, rgba(17,19,27,.5), transparent 55%), url("medleytunes-audience-choirs.webp"); background-position: center, center, 58% center; background-size: cover; background-repeat: no-repeat; }
    .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: 2%; top: 170px; border: 1px solid rgba(246,189,87,.1); border-radius: 50%; box-shadow: 0 0 0 65px rgba(246,189,87,.015), 0 0 0 132px rgba(246,189,87,.01); pointer-events: none; }
    .hero::after { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.6) .6px, transparent .6px); background-size: 5px 5px; }
    .hero-inner { padding: 180px 0 132px; position: relative; z-index: 1; }
    .hero-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; }
    .hero-brand img { display: block; width: 124px; height: 124px; object-fit: cover; border: 5px solid var(--cream); border-radius: 50%; background: var(--cream); box-shadow: 0 0 48px rgba(246,189,87,.4); }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: .2em; font-weight: 750; }
    .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
    h1 { max-width: 760px; margin: 16px 0 24px; font: 500 clamp(58px, 8vw, 106px)/.96 var(--serif); letter-spacing: -.055em; }
    h1 em { display: block; color: var(--gold); font-weight: 400; }
    .hero-copy { max-width: 560px; color: #eee7e2; font-size: 18px; line-height: 1.75; }
    .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 35px; }
    .button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 999px; padding: 0 23px; font-size: 13px; font-weight: 750; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
    .button:hover { transform: translateY(-2px); }
    .button-primary { background: var(--gold); color: #1b1a1b; }
    .button-outline { border: 1px solid rgba(251,244,232,.45); color: var(--cream); }
    .hero-note { position: absolute; right: 0; bottom: 112px; width: 210px; padding-left: 20px; border-left: 1px solid rgba(251,244,232,.35); color: #d2cbd0; font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
    .hero-note strong { display: block; margin-bottom: 6px; color: var(--gold); font-size: 13px; }
    .ticker { overflow: hidden; background: var(--gold); color: #171820; white-space: nowrap; }
    .ticker-inner { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; font: 700 13px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase; }
    .ticker .star { color: #9b452f; font-size: 18px; }
    section { scroll-margin-top: 28px; }
    .intro { padding: 118px 0 120px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 9%; align-items: start; }
    .section-kicker { color: var(--coral); font-weight: 750; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
    h2 { margin: 18px 0 0; font: 500 clamp(40px, 5.3vw, 68px)/1.02 var(--serif); letter-spacing: -.04em; }
    .intro-copy { padding-top: 27px; max-width: 590px; }
    .intro-copy p { color: var(--muted); font-size: 17px; line-height: 1.8; margin: 0 0 19px; }
    .intro-copy p:first-child { color: var(--cream); font: 26px/1.38 var(--serif); }
    .experience { padding: 92px 0 110px; background: var(--night-2); }
    .experience-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
    .experience-head h2 { max-width: 640px; }
    .experience-head p { max-width: 305px; margin: 0 0 6px; color: var(--muted); line-height: 1.7; }
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .card { padding: 32px 30px 32px 0; min-height: 215px; }
    .card + .card { padding-left: 30px; border-left: 1px solid var(--line); }
    .card-index { color: var(--gold); font: italic 19px var(--serif); }
    .card h3 { margin: 25px 0 12px; font: 500 27px var(--serif); }
    .card p { margin: 0; max-width: 300px; color: var(--muted); font-size: 14px; line-height: 1.75; }
    .shows { padding: 120px 0; display: grid; grid-template-columns: 1fr .86fr; gap: 9%; align-items: center; }
    .show-art { min-height: 390px; border: 1px solid rgba(251,244,232,.19); position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 115%, rgba(242,120,97,.72), transparent 37%), radial-gradient(ellipse at 50% 104%, rgba(246,189,87,.78), transparent 27%), linear-gradient(160deg,#242330 0%,#181923 54%,#251b27); }
    .show-art::before { content: ""; position: absolute; width: 290px; height: 290px; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(246,189,87,.45); box-shadow: 0 0 0 30px rgba(246,189,87,.035), 0 0 0 75px rgba(246,189,87,.03); }
    .show-art::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(12,13,18,.74)); }
    .spotlight { position: absolute; left: 50%; top: 0; width: 1px; height: 80%; transform: rotate(24deg); transform-origin: top; background: linear-gradient(rgba(251,244,232,.38),rgba(251,244,232,0)); box-shadow: 110px 12px 0 rgba(251,244,232,.07), -95px 22px 0 rgba(251,244,232,.06); }
    .art-caption { position: absolute; z-index: 1; inset: auto 26px 25px; display: flex; align-items: end; justify-content: space-between; color: var(--cream); }
    .art-caption span { font-size: 11px; letter-spacing: .19em; text-transform: uppercase; }
    .art-caption strong { font: italic 26px var(--serif); color: var(--gold); }
    .show-copy h2 { margin-bottom: 23px; font-size: clamp(38px, 4.4vw, 58px); }
    .show-copy p { max-width: 480px; color: var(--muted); line-height: 1.8; }
    .show-status { display: flex; gap: 14px; align-items: center; padding: 19px 0; margin: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .status-dot { width: 9px; height: 9px; flex: 0 0 9px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 18px rgba(242,120,97,.75); }
    .show-status strong { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
    .show-status span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
    .story { background: #f4eadd; color: #191922; padding: 105px 0; }
    .story-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10%; align-items: start; }
    .story .section-kicker { color: #a75038; }
    .story h2 { max-width: 470px; }
    .story-copy { max-width: 570px; padding-top: 28px; }
    .story-copy p { color: #57545a; line-height: 1.85; font-size: 16px; }
    .story-copy .pull { color: #22212a; font: 28px/1.4 var(--serif); }
    .contact { position: relative; overflow: hidden; text-align: center; padding: 110px 24px 115px; background: radial-gradient(ellipse at 50% 120%,rgba(242,120,97,.23),transparent 45%),var(--night); }
    .contact h2 { max-width: 780px; margin: 18px auto 22px; }
    .contact p { color: var(--muted); max-width: 550px; margin: 0 auto; line-height: 1.8; }
    .contact .button { margin-top: 30px; }
    footer { border-top: 1px solid var(--line); padding: 26px 0; color: #9e9da5; font-size: 12px; }
    .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
    .footer-brand { color: var(--cream); }
    .footer-line { letter-spacing: .09em; text-transform: uppercase; }
    .social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .social-links a { color: var(--cream); text-decoration: none; border: 1px solid rgba(251,244,232,.25); border-radius: 999px; padding: 9px 13px; transition: border-color .2s ease, color .2s ease; }
    .social-links a:hover, .social-links a:focus-visible { color: var(--gold); border-color: var(--gold); }
    .footer-credits { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 760px) {
      .wrap { width: min(100% - 36px, 590px); }
      .nav { height: auto; min-height: 82px; padding: 13px 0; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
      .brand-name { font-size: 14px; }
      .nav-links { width: 100%; justify-content: space-between; gap: 8px; }
      .nav-links a { font-size: 10px; letter-spacing: .04em; }
      .nav-cta { padding: 10px 13px; }
      .hero { min-height: 790px; background-image: linear-gradient(90deg, rgba(17,19,27,.93), rgba(17,19,27,.72) 65%, rgba(17,19,27,.42)), linear-gradient(0deg, rgba(17,19,27,.42), transparent 55%), url("medleytunes-audience-choirs.webp"); background-position: center, center, 64% center; }
      .hero::before { width: 370px; height: 370px; right: -230px; top: 240px; }
      .hero-inner { padding: 150px 0 140px; }
      .hero-brand { margin-bottom: 22px; }
      .hero-brand img { width: 96px; height: 96px; }
      h1 { font-size: clamp(57px, 16vw, 86px); }
      .hero-copy { max-width: 410px; font-size: 16px; }
      .hero-note { left: 0; bottom: 38px; width: auto; right: auto; }
      .ticker-inner { justify-content: flex-start; width: max-content; padding-left: 24px; }
      .intro, .shows, .story-layout { grid-template-columns: 1fr; gap: 28px; }
      .intro { padding: 80px 0; }
      .intro-copy, .story-copy { padding-top: 0; }
      .experience { padding: 78px 0; }
      .experience-head { display: block; }
      .experience-head p { margin-top: 20px; }
      .cards { grid-template-columns: 1fr; }
      .card, .card + .card { min-height: auto; padding: 24px 0; border-left: 0; }
      .card + .card { border-top: 1px solid var(--line); }
      .card h3 { margin-top: 16px; }
      .shows { padding: 80px 0; }
      .show-art { min-height: 300px; }
      .story { padding: 78px 0; }
      .contact { padding: 82px 20px; }
      .footer-row { flex-direction: column; align-items: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
  
    .page-main { min-height: calc(100vh - 110px); }
    .inner-page { padding: 168px 0 100px; }
    .inner-page h1 { max-width: 850px; margin: 18px 0 24px; font-size: clamp(48px, 7vw, 82px); }
    .page-lead { max-width: 720px; color: #eee7e2; font-size: 19px; line-height: 1.8; }
    .page-copy { max-width: 770px; color: var(--muted); font-size: 16px; line-height: 1.85; }
    .page-cards { padding: 28px 0 108px; }
    .page-cards .section-kicker { margin-bottom: 26px; }
    .page-cards .card { min-height: 200px; }
    .page-cards a.card { color: inherit; text-decoration: none; display: block; }
    .page-cards a.card:hover h2, .page-cards a.card:focus-visible h2 { color: var(--gold); }
    .page-cards .card h2 { margin: 24px 0 12px; font: 500 27px var(--serif); letter-spacing: 0; }
    .page-cards .card p { max-width: 320px; }
    .page-art { max-width: 520px; min-height: 360px; background-image: linear-gradient(0deg, rgba(17,19,27,.36), rgba(17,19,27,.05)), url("medleytunes-audience-choirs.webp"); background-size: cover; background-position: center; }
    .artist-section { padding: 104px 0 112px; background: var(--night-2); }
    .artist-section h2 { max-width: 720px; }
    .artist-intro { max-width: 640px; color: var(--muted); font-size: 16px; line-height: 1.8; margin: 22px 0 36px; }
    .artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .artist-card { overflow: hidden; background: var(--night); border: 1px solid var(--line); }
    .artist-card img { display: block; width: 100%; height: 300px; object-fit: contain; background: #0d0f16; }
    .artist-card h3 { margin: 0; padding: 16px 20px 19px; font: 500 25px var(--serif); }
    .artist-disclaimer { max-width: 770px; margin: 27px 0 0; color: #a6a5ad; font-size: 12px; line-height: 1.7; }
    .credits-list { display: grid; gap: 0; max-width: 850px; margin: 42px 0 80px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .credits-list li { padding: 23px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.75; }
    .credits-list strong { display: block; margin-bottom: 5px; color: var(--cream); font: 500 23px var(--serif); }
    .credits-list a { color: var(--gold); text-underline-offset: 3px; }
    .contact-card { margin-top: 42px; padding: 26px; border: 1px solid var(--line); max-width: 690px; }
    .contact-card p { color: var(--muted); line-height: 1.8; }
    .contact-email { color: var(--gold); font-weight: 700; text-underline-offset: 3px; }
    .contact-socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
    @media (max-width: 760px) {
      .inner-page { padding: 140px 0 78px; }
      .inner-page h1 { font-size: clamp(44px, 13vw, 68px); }
      .page-lead { font-size: 17px; }
      .page-cards { padding: 8px 0 78px; }
      .page-art { min-height: 280px; }
      .artist-section { padding: 78px 0; }
      .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      .artist-card img { height: 230px; }
      .artist-card h3 { padding: 14px 13px 16px; font-size: 22px; }
    }
    @media (max-width: 480px) { .artist-grid { grid-template-columns: 1fr; } .artist-card img { height: 280px; } }