/* Archivo Black, served from this site (SIL Open Font License), so the
   flyer's headline face never depends on a third party loading. */
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/afterschool/fonts/archivo-black.woff2') format('woff2'); }
/* The after-school flyer, as a web page. Same teal, same gold, same
   Archivo Black, same two cream cards. Everything below it on the page picks
   up the headline face so the section reads as one piece of print. */
:root { --fly-teal: #1f8a78; --fly-teal-deep: #176d5f; --fly-gold: #e3a52d; --fly-cream: #f5f1e6; --fly-ink: #1b1f1e; }
.fly-display, .fly h1, .section h2 { font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif; font-weight: 400; letter-spacing: -.005em; text-transform: uppercase; }

.fly { background: var(--fly-teal); color: #fff; padding: clamp(36px, 6vw, 70px) 0 clamp(44px, 6vw, 72px); position: relative; overflow: hidden; }
.fly::before { content: ''; position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: -40vmax; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%); pointer-events: none; }
.fly-in { position: relative; width: min(1000px, 92vw); margin: 0 auto; text-align: center; }
.fly-brand { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.fly-brand img { width: 40px; height: 40px; }
.fly-intro { font-family: 'Archivo Black', Arial, sans-serif; text-transform: uppercase; font-size: clamp(26px, 4vw, 44px); margin: 18px 0 0; line-height: 1; }
.fly-title { margin: 6px 0 0; font-size: clamp(46px, 9.5vw, 112px); line-height: .92; color: #fff; }
.fly-title span { display: block; color: var(--fly-gold); }
.fly-sub { font: 700 clamp(16px, 2vw, 21px)/1.4 Arial, sans-serif; margin: 22px 0 16px; }
.fly-pill { display: inline-block; background: #fff; color: var(--fly-ink); border-radius: 999px; padding: 10px 22px; font: 700 13px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

.fly-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 40px 0 26px; text-align: left; }
.fly-card { background: var(--fly-cream); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px rgba(8,40,34,.28); }
.fly-card header { background: var(--fly-gold); display: flex; align-items: baseline; justify-content: space-between; padding: 16px 24px; color: var(--fly-ink); }
.fly-card header b { font-family: 'Archivo Black', Arial, sans-serif; font-weight: 400; font-size: 24px; text-transform: uppercase; }
.fly-card header span { font: 700 12px/1 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.fly-class { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-bottom: 1px solid #ddd6c6; text-decoration: none; color: var(--fly-ink); transition: background .2s; }
.fly-class:last-child { border-bottom: 0; }
.fly-class:hover { background: #fffdf6; }
.fly-class img { width: 116px; height: 84px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.15); transition: transform .4s; }
.fly-class:hover img { transform: scale(1.06); }
.fly-class h3 { font-family: 'Archivo Black', Arial, sans-serif; font-weight: 400; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.02; text-transform: uppercase; margin: 0; color: var(--fly-ink); }
.fly-class .with { display: block; font: 13.5px/1.3 Arial, sans-serif; color: #555; margin: 4px 0; }
.fly-class .when { font: 700 15px/1.2 Arial, sans-serif; color: var(--fly-teal); }
.fly-class .left { font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #a14b17; margin-left: 8px; }
.fly-class .full { color: #a33; }

.fly-foot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; text-align: left; }
.fly-register { display: block; background: var(--fly-gold); color: var(--fly-ink); border-radius: 16px; padding: 18px 26px; text-decoration: none; transition: transform .18s, box-shadow .18s; box-shadow: 0 12px 30px rgba(8,40,34,.25); }
.fly-register:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(8,40,34,.3); color: var(--fly-ink); }
.fly-register small { display: block; font: 700 12px/1 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.fly-register b { display: block; font-family: 'Archivo Black', Arial, sans-serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); margin: 8px 0 4px; }
.fly-register em { font: italic 700 13px/1 Arial, sans-serif; }
.fly-notes { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.fly-dot-pill { background: #fff; color: var(--fly-ink); border-radius: 999px; padding: 9px 18px; font: 700 13px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.fly-dot-pill i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fly-teal); margin-right: 9px; animation: flyPulse 1.6s ease-in-out infinite; }
@keyframes flyPulse { 50% { opacity: .25; } }
.fly-gold { font-family: 'Archivo Black', Arial, sans-serif; text-transform: uppercase; color: var(--fly-gold); font-size: 18px; text-decoration: none; }
.fly-gold:hover { color: #ffd27a; }
.fly-small { font: 700 14px/1.3 Arial, sans-serif; color: #fff; }
.fly-link { color: #fff; font: 700 14px/1 Arial, sans-serif; border-bottom: 2px solid var(--fly-gold); padding-bottom: 3px; text-decoration: none; margin-top: 6px; }

/* rising in, card by card */
.fly-up { opacity: 0; transform: translateY(24px); animation: flyUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.fly-up.d1 { animation-delay: .1s; } .fly-up.d2 { animation-delay: .22s; } .fly-up.d3 { animation-delay: .36s; } .fly-up.d4 { animation-delay: .5s; } .fly-up.d5 { animation-delay: .64s; }
@keyframes flyUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fly-up { animation: none; opacity: 1; transform: none; } .fly-dot-pill i { animation: none; } }

@media (max-width: 860px) {
  .fly-cards, .fly-foot { grid-template-columns: 1fr; }
  .fly-notes { align-items: center; text-align: center; }
  .fly-class { grid-template-columns: 80px 1fr; padding: 14px 18px; }
  .fly-class img { width: 80px; height: 60px; }
}
/* On a phone the headline is sized to the screen, so AFTER-SCHOOL and
   PROGRAMMING each stay on one line, as on the flyer. */
@media (max-width: 600px) {
  .fly-title { font-size: 9.4vw; line-height: .96; }
  .fly-intro { font-size: 6.4vw; }
  .ins-head .fly-title { font-size: 12vw; }
}