/* ============================================================
   LOGO — single source for the academy mark.
   Converted from logo.pdf into several web-sized PNGs by
   convert_logo.py. Every logo on the site uses the .logo-img
   class; per-use sizing is set in each section's CSS.

   To regenerate after replacing logo.pdf:
       python convert_logo.py

   Available files (frontend/assets/img/):
       logo-512.png  512px  (about panel — renders large)
       logo.png      320px  (hero)
       logo-160.png  160px
       logo-96.png    96px  (footer)
       logo-48.png    48px  (navbar)
       favicon-32.png 32px  (browser tab)
   ============================================================ */
:root {
  /* Default / largest. Sections below override with a smaller file. */
  --logo: url("../assets/img/logo.png");
  --logo-512: url("../assets/img/logo-512.png");
  --logo-160: url("../assets/img/logo-160.png");
  --logo-96: url("../assets/img/logo-96.png");
  --logo-48: url("../assets/img/logo-48.png");
}

.logo-img {
  background-image: var(--logo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  display: block;
}

/* Use a source image ~2× the display size so the small logos stay crisp on
   high-DPI / retina phone screens (navbar shows 48px, footer ~80px). */
.nav-logo .logo-img    { background-image: var(--logo-96); }   /* 48px box */
.footer-brand .logo-img { background-image: var(--logo-160); } /* ~80px box */
/* About panel renders large (~400px) — use the 512px file so it stays sharp */
.about-img-frame .logo-img { background-image: var(--logo-512); }
.hero-logo             { background-image: var(--logo); }