:root{
  --orange:#f28c45; --orange-soft:#f8a76a; --cream:#fff4ea;
  --green:#2f4a2b; --green-2:#3d5e37; --brown:#6b3a12; --ink:#24160b;
  --leaf1:#c0441b; --leaf2:#e0a21f; --leaf3:#a8551d; --leaf4:#d9711f; --leaf5:#8a2f17;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--orange);color:var(--ink);font:500 17px/1.45 Lora,Georgia,serif}
a{color:var(--green)}
img{max-width:100%;display:block}

/* leaves */
.leaves{display:flex;justify-content:space-between;gap:4px;padding:0 6px;pointer-events:none}
.leaf{width:26px;height:26px;fill:currentColor}
.leaves span{display:block}
.leaves .l0{color:var(--leaf1);transform:rotate(-25deg)}
.leaves .l1{color:var(--leaf2);transform:rotate(15deg) scale(.8)}
.leaves .l2{color:var(--leaf3);transform:rotate(40deg) scale(.9)}
.leaves .l3{color:var(--leaf4);transform:rotate(-50deg) scale(.75)}
.leaves .l4{color:var(--leaf5);transform:rotate(5deg) scale(.85)}

/* hero */
.hero{text-align:center;padding:10px 18px 26px;
  background:radial-gradient(120% 70% at 50% 0%, #f9a463 0%, var(--orange) 70%)}
.hero .leaves{margin:0 -10px 10px}
.presenter{font:600 13px/1.3 Lora,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);margin:6px 0 4px}
.presenter a{color:inherit;text-decoration:none}
h1{font-family:Oswald,Impact,sans-serif;font-weight:600;text-transform:uppercase;color:var(--green);
  letter-spacing:.06em;line-height:1.05;margin:.2em 0 .1em;font-size:clamp(34px,9vw,52px)}
h1.big{color:var(--brown);font-size:clamp(44px,13vw,74px)}
h1 span{display:block;font-size:.8em;letter-spacing:.06em;margin-top:.1em;color:var(--brown)}
.rdate{margin:4px 0 0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.sub{font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brown);font-size:14px;margin:.4em 0 1em}
.date{display:inline-block;background:var(--brown);color:#fff;border-radius:14px;padding:10px 22px;
  font:600 18px/1.3 Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0}
.loc{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;margin:14px 0 10px}
.logo{width:min(260px,70%);margin:18px auto 0}
.logo-text{margin:18px auto 0;font:600 22px Oswald,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1f78b4}

/* time nav */
.times{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:560px;margin:0 auto;padding:10px 8px;
  background:rgba(242,140,69,.96);backdrop-filter:blur(6px);border-bottom:1px solid rgba(107,58,18,.25);scrollbar-width:none}
.times::-webkit-scrollbar{display:none}
.times a{text-align:center;white-space:nowrap;font:600 15px Oswald,sans-serif;letter-spacing:.05em;text-decoration:none;color:var(--green);
  border:2px solid var(--green);border-radius:999px;padding:4px 2px;font-size:clamp(12px,3.6vw,15px)}
.times a[aria-current]{background:var(--green);color:#fff}

main{max-width:680px;margin:0 auto;padding:8px 16px 10px}

/* studio + program */
.studio{margin:26px 0 8px}
.pill{background:var(--green);color:#fff;border-radius:22px;text-align:center;margin:0 auto 14px;max-width:340px;
  padding:9px 18px;font:600 19px/1.25 Lora,serif;letter-spacing:.14em;text-transform:uppercase}
.pill small{display:block;font-size:12px;letter-spacing:.24em;opacity:.85}
.program{list-style:none;margin:0;padding:0;background:var(--cream);border-radius:16px;
  box-shadow:0 2px 0 rgba(107,58,18,.15)}
.perf{padding:12px 16px;border-bottom:1px solid rgba(107,58,18,.14)}
.perf:last-child{border-bottom:0}
.name{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.pieces{list-style:none;margin:3px 0 0;padding:0;font-style:italic;color:#4d3420;font-size:16px}

.callout{background:var(--green);color:#fff;border-radius:18px;padding:16px 20px;margin:26px 0 0;text-align:center;
  font-size:15px;letter-spacing:.03em}
.callout strong{color:#ffd79a}
.thanks{text-align:center;font-weight:700;margin:26px 0 6px;font-size:18px}
.thanks::after{content:"";display:block;width:42px;height:3px;background:var(--ink);margin:12px auto 0}

/* index list */
.choose{font:600 20px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;text-align:center;color:var(--brown);margin:18px 0 12px}
.recital-list{display:grid;gap:12px}
.recital-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 16px;text-decoration:none;
  background:var(--cream);color:var(--ink);border-radius:16px;padding:14px 18px;box-shadow:0 2px 0 rgba(107,58,18,.18)}
.recital-link .t{font:600 26px Oswald,sans-serif;color:var(--green);letter-spacing:.03em;white-space:nowrap}
.recital-link .s{font-size:15px;line-height:1.3}
.recital-link .go{font:600 30px Oswald,sans-serif;color:var(--green)}
.recital-link:active{transform:translateY(1px)}

/* announcements */
.around{background:var(--orange-soft);margin-top:30px;padding:24px 16px 20px}
.around h2{font:600 24px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;text-align:center;color:var(--brown);margin:0 0 16px}
.cards{display:grid;gap:14px;max-width:960px;margin:0 auto}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 0 rgba(107,58,18,.18)}
.card .flyer{width:100%;height:auto}
.card-body{padding:14px 16px 16px}
.card h3{margin:0;font:600 19px/1.25 Oswald,sans-serif;letter-spacing:.03em;color:var(--green)}
.card .when{margin:2px 0 6px;font-weight:700;color:var(--brown)}
.card p{margin:.3em 0}
.btn{display:inline-block;margin-top:8px;background:var(--green);color:#fff;text-decoration:none;border-radius:999px;
  padding:8px 18px;font:600 15px Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.site-link{text-align:center;margin:20px 0 0}
.site-link a{font:600 17px Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.all{text-align:center;margin:22px 0 0}
.all a{font-weight:700}

footer{text-align:center;font-size:13px;padding:18px 0 28px;color:var(--brown)}
footer p{margin:10px 12px 0}