:root{
      /* Fully warm palette */
      --sun:#FFD166;     /* sunny yellow */
      --amber:#FFB703;   /* honey */
      --tangerine:#FB8500;/* orange */
      --apricot:#F4A261; /* apricot */
      --coral:#E76F51;   /* coral-red */
      --cream:#FFF4E6;   /* paper */
      --ink:#2f281f;     /* warm dark */
      --muted:#6b5b4b;   /* warm gray-brown */

      --nav-h:84px;
      --radius:24px;
      --shadow:0 16px 40px rgba(60,34,12,.12);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{margin:0; color:var(--ink); background:var(--cream); font-family:"M PLUS Rounded 1c", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.65;}

    /* SUNBURST + paper dots background */
    body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
      background:
        radial-gradient(1200px 800px at -5% -20%, rgba(255,208,102,.45), transparent 60%),
        radial-gradient(800px 600px at 110% 10%, rgba(251,133,0,.15), transparent 60%),
        repeating-conic-gradient(from 270deg at 12% -10%, rgba(251,133,0,.06) 0 10deg, transparent 10deg 20deg),
        linear-gradient(180deg,#fffaf0 0%, #ffeedd 100%);
    }
    body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.25;
      background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 12px 12px; mix-blend-mode:multiply;}

    /* Helpers */
    .wrap{ width:min(1100px, 92vw); margin:0 auto; }
    section{ scroll-margin-top: calc(var(--nav-h) + 12px); }

    /* ========= NAVBAR (brand left, links center, socials right) ========= */
    .nav{ position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:60; display:flex; align-items:center; background:rgba(255,255,255,.9); backdrop-filter: blur(10px); box-shadow: 0 2px 0 rgba(0,0,0,.05); transition: transform .35s ease, background-color .2s ease; }
    .nav--hidden{ transform: translateY(-110%); }
    .nav .inner{ width:min(1200px,94vw); margin:0 auto; display:flex; align-items:center; gap:1rem; }

    .brand{ display:flex; align-items:center; gap:.8rem; color:var(--ink); text-decoration:none; }
    .logo{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:#3a240e; font-family:"Grandstander"; font-weight:900; font-size:1.3rem; box-shadow:var(--shadow);
      background: conic-gradient(from 200deg, var(--sun), var(--tangerine), var(--apricot), var(--sun)); }
    .title{ font-family:"Grandstander"; font-weight:900; letter-spacing:.3px; font-size:1.25rem; }

    .links{ margin-left:auto; margin-right:auto; }
    .links ul{ list-style:none; display:flex; gap:.4rem; margin:0; padding:0; }
    .links a{ display:inline-block; padding:.6rem .3rem; border-radius:999px; font-weight:800; color:var(--ink); text-decoration:none; position:relative; }
    .links a:after{ content:""; position:absolute; left:14px; right:14px; bottom:10px; height:6px; background:linear-gradient(90deg, var(--sun), var(--tangerine)); border-radius:8px; opacity:0; transform: translateY(6px); transition:.2s ease; }
    .links a:hover:after{ opacity:1; transform: translateY(0); }

    .socials{ margin-left:auto; display:flex; gap:.5rem; }
    .icon{ width:42px; height:42px; border-radius:50%; background:#fff2e3; box-shadow:var(--shadow); display:grid; place-items:center; transition: transform .15s ease }
    .icon:hover{ transform: translateY(-2px) rotate(-1deg) }
    .icon svg{ width:20px; height:20px; color:var(--ink) }

    .menu{ display:none; border:0; background:transparent; margin-left:.25rem }
    .menu svg{ width:32px; height:32px }
    @media (max-width: 920px){
      .links{ display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:rgba(255,255,255,.98); padding:.6rem .75rem; box-shadow:var(--shadow); }
      .links.open{ display:block }
      .links ul{ flex-wrap:wrap; justify-content:center }
      .socials{ display:none }
      .menu{ display:block }
    }

    /* ========= HERO ========= */
    .hero{ padding: calc(var(--nav-h) + 28px) 0 50px; position:relative; }
    .sunband{ position:absolute; inset:auto 0 -1px 0; height:92px; background: linear-gradient( to bottom, transparent 0, transparent 22px, var(--sun) 22px, var(--sun) 42px, var(--tangerine) 42px, var(--tangerine) 62px, var(--apricot) 62px, var(--apricot) 82px, #fff 82px ); clip-path: polygon(0 0,100% 0,100% 100%,0 68%); }
    .hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:2rem; align-items:center; }
    .hero h1{ margin:.2rem 0 .6rem; font-family:"Grandstander"; font-weight:900; line-height:1.05; font-size: clamp(2.5rem, 6.6vw, 3.8rem); }
    .hero p.lead{ color:var(--muted); font-size: clamp(1rem, 2.3vw, 1.2rem); }
    .cta{ display:inline-flex; gap:.6rem; align-items:center; padding:.95rem 1.05rem; border-radius:18px; border:0; cursor:pointer; font-weight:900; color:#3a240e; background: linear-gradient(135deg, var(--sun), var(--tangerine)); box-shadow: var(--shadow); }
    .cta.secondary{ background: linear-gradient(135deg, var(--apricot), var(--coral)); color:#fff }

    .hero-spot{ aspect-ratio: 4/3; border-radius: var(--radius); background:#fff; box-shadow:var(--shadow); overflow:hidden; position:relative; display:grid; place-items:center }
    .confetti{ position:absolute; inset:0; pointer-events:none }
    .bit{ position:absolute; width:16px; height:16px; border-radius:4px; opacity:.8; animation: fall 6s linear infinite }
    .b1{ left:10%; top:-8%; background:var(--sun) }
    .b2{ left:30%; top:-10%; background:var(--apricot); animation-delay: .5s }
    .b3{ right:24%; top:-6%; background:var(--tangerine); animation-delay: .8s }
    .b4{ right:12%; top:-12%; background:var(--coral); animation-delay: .3s }
    @keyframes fall{ to{ transform: translateY(120%)} }

    @media (max-width: 940px){ .hero-grid{ grid-template-columns:1fr } }

    /* ========= ABOUT ========= */
    .about{ padding: 64px 0; position:relative; }
    .about-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:2rem; align-items:center }
    .portrait{ width:100%; max-width:500px; margin:0 auto; aspect-ratio: 1/1; border-radius: 30px; overflow:hidden; border:12px solid #fff2cc; box-shadow: var(--shadow); }
    .portrait img{ width:100%; height:100%; object-fit:cover; display:block }
    .about h2{ font-family:"Grandstander"; font-size: clamp(1.9rem,3.6vw,2.5rem); margin:.2rem 0 .5rem }
    .about p.lead{ color:var(--muted); margin:0 0 .75rem }
    .scallop{ height:18px; background: radial-gradient(14px 14px at 7px 7px, #fcb944 98%, transparent 100%) repeat-x; background-size: 28px 18px; margin-bottom:10px; }
    .scallop2{ height:18px; background: radial-gradient(14px 14px at 7px 7px, #fa9111 98%, transparent 100%) repeat-x; background-size: 28px 18px; margin-bottom:10px; }
    .scallop3{ height:18px; background: radial-gradient(14px 14px at 7px 7px, #eb7852 98%, transparent 100%) repeat-x; background-size: 28px 18px; margin-bottom:10px; }
    @media (max-width: 940px){ .about-grid{ grid-template-columns:1fr } }

    /* ========= VIDEOS ========= */
    .videos{ padding:64px 0; }
    .video-card{ background:#fff; border-radius: var(--radius); box-shadow:var(--shadow); padding:1rem }
    .video-wrap{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000 }
    .video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

    /* ========= SONGS (ticket cards) ========= */
    .songs{ padding:64px 0; }
    .song-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(520px,1fr)); gap:14px }
    .song{ position:relative; background:#fff; border-radius:18px; box-shadow:var(--shadow); padding: .95rem 1.05rem; display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:900; text-decoration:none }
    .song:before, .song:after{ content:""; position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--cream) }
    .song:before{ left:-10px } .song:after{ right:-10px }
    .bubble{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#3a240e; background: conic-gradient(from 90deg, var(--sun), var(--tangerine)); font-weight:900 }

    /* ========= TIPS (sticky notes) ========= */
    .tips{ padding:64px 0; }
    .tip-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px }
    .note { background: linear-gradient(180deg, #fff6cc, #ffe6b8); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(-1.3deg) }
    .note2{ background: linear-gradient(180deg, #f8d8b4, #ffba66); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(-1.3deg) }
    .note3{ background: linear-gradient(180deg, #f8e48e, #f7c974); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(+1.3deg) }
    .note4{ background: linear-gradient(180deg, #f6e9af, #f5d08d); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(-1.3deg) }
    .note5{ background: linear-gradient(180deg, #fdf1bb, #ffd68a); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(+1.3deg) }
    .note6{ background: linear-gradient(180deg, #ffd6aa, #ffc48a); border-radius:10px; padding:1rem; box-shadow: var(--shadow); transform: rotate(-1.3deg) }
    .note:nth-child(2){ transform: rotate(.8deg); background: linear-gradient(180deg,#ffe6b8,#ffd4a8) }
    .note:nth-child(3){ transform: rotate(-.6deg); background: linear-gradient(180deg,#fff0c6,#ffe1b2) }
    .tag{ display:inline-block; padding:.28rem .6rem; border-radius:999px; font-size:.8rem; font-weight:900; color:#3a240e; background: linear-gradient(135deg, var(--sun), var(--tangerine)); }

    /* ========= FAQ ========= */
    .faq{ padding:64px 0; }
    details{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:.95rem 1.05rem }
    details+details{ margin-top:.7rem }
    summary{ font-weight:900; cursor:pointer; list-style:none; position:relative }
    summary::-webkit-details-marker{ display:none }

    /* ========= CONTACT ========= */
    .contact{ padding:64px 0 90px }
    .contact-card{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:1rem; display:grid; gap:.6rem }
    .email-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
    .copy{ padding:.55rem .95rem; border-radius:999px; border:2px solid var(--tangerine); color:var(--tangerine); background:transparent; font-weight:900; cursor:pointer }

        /* ========= SoR ========= */
    .sor{ padding:64px 0 90px }
    .sor-card{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:1rem; display:grid; gap:.6rem }
    .email-row2{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
    .copy2{ padding:.55rem .95rem; border-radius:999px; border:2px solid var(--tangerine); color:var(--tangerine); background:transparent; font-weight:900; cursor:pointer }

    /* ========= FOOTER ========= */
    footer{ background:
      radial-gradient(90px 90px at 8% 8%, rgba(255,209,102,.24), transparent 70%),
      radial-gradient(90px 90px at 92% 12%, rgba(251,133,0,.16), transparent 70%),
      linear-gradient(180deg,#ffe9cc,#ffe0d2);
      padding:56px 0 34px; border-top:8px dotted rgba(0,0,0,.06);
    }
    .footer-grid{ display:grid; grid-template-columns: 1.2fr .9fr .9fr; gap:1.4rem }
    .foot-brand{ display:flex; align-items:center; gap:.8rem; font-weight:900 }
    .foot-logo{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; font-family:"Grandstander"; color:#3a240e; background: conic-gradient(from 200deg, var(--sun), var(--tangerine), var(--apricot), var(--sun)); box-shadow:var(--shadow) }
    .foot-links a{ display:block; margin:.2rem 0; color:var(--ink); text-decoration:none }
    .foot-links a:hover{ text-decoration:underline }
    .foot-socials{ display:flex; gap:.6rem; flex-wrap:wrap }
    .foot-socials a{ width:44px; height:44px; border-radius:12px; background:#fff2e3; box-shadow:var(--shadow); display:grid; place-items:center }
    .copyright{ margin-top:18px; color:var(--muted); text-align:center }

    @media (max-width: 920px){ .footer-grid{ grid-template-columns:1fr } }

    /* Reveal on scroll */
    .reveal{ opacity:0; transform: translateY(10px) scale(.98); transition: .5s ease }
    .reveal.is-visible{ opacity:1; transform: none }

    /* Accessibility skip */
    .skip-link{ position:absolute; left:-9999px }
    .skip-link:focus{ left:16px; top:16px; background:#000; color:#fff; padding:.5rem .75rem; border-radius:10px }

    .logo-img{
  width:58px; height:58px;
  border-radius:16px;               /* make it rounded; use 50% for a circle */
  box-shadow:var(--shadow);
  object-fit:contain;               /* keep aspect ratio */
  background:#fff;                  /* nice white badge behind transparent PNG/SVG */
  padding:6px;                      /* space around the mark */
  display:block;
}
.foot-logo-img{
  width:64px; height:64px;
  border-radius:16px;
  box-shadow:var(--shadow);
  object-fit:contain;
  background:#fff;
  padding:8px;
  display:block;
}