/* /machines — cards for the anatomy machines, plus the top nav on each machine page. Every class is mc- prefixed.
 * Colors come from the shared tokens in music/style.css (nav.css repeats fallbacks for the standalone machine pages). */
.mc{max-width:1180px; margin:0 auto; padding:0 24px 120px; color:var(--text)}
.mc *{box-sizing:border-box}
.mc-state{color:var(--muted); text-align:center; padding:60px 0}
.mc-hero{padding:34px 0 8px}
.mc-kicker{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px}
.mc-hero h1{font-size:clamp(32px,5.4vw,56px); line-height:1.02; letter-spacing:-.035em; margin:0 0 12px}
.mc-hero h1 span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.mc-lede{color:var(--muted); font-size:17px; line-height:1.55; max-width:68ch; margin:0}
.mc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:26px}
.mc-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel);
  color:var(--text); text-decoration:none; scroll-margin-top:16px; transition:border-color .15s, transform .15s}
.mc-card:hover,.mc-card:focus-visible{border-color:var(--cyan); transform:translateY(-2px)}
.mc-card:target{border-color:var(--pink)}
.mc-card img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--panel2)}
.mc-card-body{padding:16px 18px 20px}
.mc-card h2{font-size:20px; letter-spacing:-.01em; margin:0 0 6px}
.mc-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.45}
.mc-card .mc-go{display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--cyan)}
@media (max-width:760px){ .mc{padding-left:16px; padding-right:16px} }