/* --------------------------------------------------
   Strike a Chord — styles v3 (cumulative)
   Mobile-first, responsive + Lab 7 semantics & grid
---------------------------------------------------*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Roboto:wght@400;500;700&display=swap');

/* Theme */
:root {
  --purple:#373684;
  --ink:#222;
  --ink-muted:#444;
  --panel:#ffffff;
  --surface:#f5f5fb;
  --accent:#5e90fc;
  --border:#e6e6ef;
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; height:auto; display:block; }

/* Base */
body{
  font-family:Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
}

/* Header */
header{
  background:var(--purple);
  color:#fff;
  padding:1.25rem 1rem .5rem;
  text-align:center;
}
header h1{
  margin:.25rem 0 1rem;
  font-family:"DM Serif Display", serif;
  font-style:italic;
  letter-spacing:.3px;
  font-size:1.75rem;
}

/* Mobile nav: large rounded buttons */
nav ul{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:grid;
  gap:.75rem;
  width:min(800px, 92vw);
}
nav a{
  display:block;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.85rem 1.25rem;
  font-weight:500;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
nav a:hover{ background:#fafaff; }

/* Page section panel */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  width:min(820px, 92vw);
  margin:2rem auto;
  padding:1.25rem 1.5rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Footer */
footer{
  text-align:center;
  color:var(--ink-muted);
  margin:1.25rem 0 2.25rem;
  font-size:.9rem;
}
footer a{ color:var(--ink); }

/* Desktop-only hero on Home */
.hero.desktop-only{
  display:none;
}
.hero img.round{
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Instructors (Lab 7) */
main.grid{
  width:min(980px, 92vw);
  margin:2rem auto;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
main.grid > aside{
  text-align:center;
  font-size:1.05rem;
  font-weight:600;
  color:#373684;
  text-shadow:3px 3px 10px #a8b0cb;
}

/* Figures */
figure{
  position:relative;
  max-width:375px;
  margin:2rem auto;
  border:3px solid #373684;
  background:#fff;
}
figcaption{
  position:absolute;
  bottom:0;
  width:100%;
  color:#fff;
  background:rgba(55,84,132,.7);
  padding:5% 0;
  text-align:center;
  font-family:Verdana, Arial, sans-serif;
  font-size:1.05rem;
  font-weight:bold;
}

/* Contact map wrapper (center) */
.map-wrap{
  width:min(820px, 92vw);
  margin:2rem auto;
}
.map-wrap iframe{
  width:100%;
  height:340px;
  border:0;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Tablet (>= 620px) */
@media (min-width:620px){
  header h1{ font-size:2rem; }

  nav ul{
    grid-template-columns:repeat(2, 1fr);
  }

  main.grid{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  /* Make aside span full width on first row if you want:
     grid-column:1 / span 2;  (uncomment if preferred) */
}

/* Desktop (>= 1000px) */
@media (min-width:1000px){
  header{ padding:1.25rem 0 .25rem; }
  header h1{ font-size:2.15rem; }

  /* Desktop nav: single row */
  nav ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
  }
  nav a{ width:9.25rem; }

  /* Show hero only on desktop */
  .hero.desktop-only{
    display:block;
    width:min(1100px, 94vw);
    margin:1.75rem auto 0;
  }

  main.grid{
    grid-template-columns:repeat(4, 1fr);
  }
  main.grid > aside{
    grid-column:1 / span 4;  /* heading spans all columns on desktop */
    font-size:1.25rem;
  }
  figcaption{ font-size:1rem; }
}