/* ============================================================
   The Acoustic Method — index (course library) styles
   Loaded after css/shared.css.
   ============================================================ */

header{
  padding:72px 20px 0;
  border-bottom:none;
  background:
    radial-gradient(ellipse 1000px 380px at 50% -100px, rgba(201,164,92,.10), transparent);
}
h1{font-size:clamp(40px,7vw,68px);}
.sub{max-width:560px; margin:20px auto 0; color:var(--muted); font-size:17px;}

/* ---------------- the strings ---------------- */
.strings{max-width:880px; margin:56px auto 0; padding:0 20px;}
.string{display:flex; align-items:center; gap:16px; padding:10px 0;}
.string .label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; color:var(--muted); width:18px; text-align:right; flex:none;
}
.string .wire{
  flex:1; border-radius:2px;
  background:linear-gradient(to right, var(--brass-dim), var(--brass) 18%, var(--brass) 82%, var(--brass-dim));
  transform-origin:center;
}
.string:nth-child(1) .wire{height:4px; opacity:.9;}
.string:nth-child(2) .wire{height:3.5px; opacity:.85;}
.string:nth-child(3) .wire{height:3px; opacity:.8;}
.string:nth-child(4) .wire{height:2.5px; opacity:.75;}
.string:nth-child(5) .wire{height:2px; opacity:.7;}
.string:nth-child(6) .wire{height:1.5px; opacity:.65;}
@keyframes ring{
  0%{transform:scaleY(1) translateY(0);}
  12%{transform:translateY(-1.5px);}
  24%{transform:translateY(1.2px);}
  36%{transform:translateY(-0.9px);}
  48%{transform:translateY(0.6px);}
  60%{transform:translateY(-0.3px);}
  100%{transform:translateY(0);}
}
.string .wire{animation:ring 1.6s ease-out both;}
.string:nth-child(1) .wire{animation-delay:.05s;}
.string:nth-child(2) .wire{animation-delay:.13s;}
.string:nth-child(3) .wire{animation-delay:.21s;}
.string:nth-child(4) .wire{animation-delay:.29s;}
.string:nth-child(5) .wire{animation-delay:.37s;}
.string:nth-child(6) .wire{animation-delay:.45s;}
.string:hover .wire{animation:ring 1.2s ease-out;}

/* ---------------- sections ---------------- */
main{max-width:880px; padding-bottom:80px;}
section{margin-top:72px;}
.sec-head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:26px;
}
.sec-head h2{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:26px; letter-spacing:-.005em; margin:0;
}
.sec-head .tag{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* ---------------- course cards ---------------- */
.course{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:26px 28px; margin-bottom:18px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.course:hover, .course:focus-visible{
  border-color:var(--brass); background:var(--panel2);
  transform:translateY(-2px);
}
.course:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
.course-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  flex-wrap:wrap;
}
.course h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin:0;
}
.course .meta{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--brass); letter-spacing:.1em;
}
.course p{color:var(--muted); margin-top:10px; max-width:62ch;}
.course .go{
  display:inline-block; margin-top:16px;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--brass); letter-spacing:.06em;
  border-bottom:1px solid var(--brass-dim); padding-bottom:2px;
}
.course:hover .go{border-bottom-color:var(--brass);}

/* ---------------- path note ---------------- */
.path{
  background:var(--wood); border:1px solid var(--line); border-radius:10px;
  padding:20px 24px; margin-top:6px;
  color:var(--muted); font-size:15px;
}
.path strong{color:var(--ink); font-weight:600;}
.path .k{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); display:block; margin-bottom:8px;
}

@media (max-width:560px){
  header{padding-top:52px;}
  .strings{margin-top:40px;}
  .course{padding:22px 20px;}
}