/* Legacy pages (About > Legacy menu): /pm_synth_aes_ccrma/,
   /ccrma-open-house-presentation-10-21-2022/,
   /sondius-physical-modeling-work-at-ccrma-1993-1997/, /powerstomp-fall-2016/,
   /introducing-moforte/, /faust_on_sharc/, /moforte-guitar-app/.
   Same fold-band design as /about/ and /mpe/: light band is the default, dark
   bands opt in via .lg-band--dark. Tokens come from tokens.css; the video
   facades are base.css's .youtube-thumbnail-wrapper + youtube-player.js. */

/* ---------- Bands ---------- */
.lg-band {
  background: var(--mf-fold-light);
}
.lg-band--dark {
  background: var(--mf-fold-dark);
}
.lg-inner {
  max-width: var(--mf-container-width);
  margin: 0 auto;
  padding: 72px clamp(16px, 4vw, 40px);
}
.lg-band h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 1.6rem;
}
.lg-band p { margin-bottom: 1em; max-width: 75ch; }
.lg-band ul {
  margin: 0 0 1.2rem 1.4rem;
  max-width: 75ch;
}
.lg-band li { margin-bottom: 0.45rem; }

/* ---------- Intro ---------- */
.lg-intro .lg-inner {
  padding-top: 88px;
  padding-bottom: 80px;
}
.lg-intro h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.lg-meta {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--mf-text-meta);
  margin-bottom: 1.6rem;
}
.lg-lede { font-size: 1.1rem; }
/* Disclaimer at the top of a page (e.g. PowerStomp: never shipped). */
.lg-band p.lg-notice {
  margin: 0.4rem 0 1.8rem;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--mf-accent-orange);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--mf-text-white);
  font-weight: 700;
}
.lg-label { font-weight: 700; color: var(--mf-text-white); }
.lg-lede--strong {
  font-weight: 700;
  color: var(--mf-accent-teal);
}

/* Copy beside a deck or product image; stacks below 900px. */
.lg-split {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
  flex-wrap: wrap;
}
.lg-split > .lg-split-copy { flex: 1 1 420px; min-width: 280px; }
.lg-split > .lg-shot { flex: 0 1 520px; min-width: 260px; }
.lg-split > .lg-shot img { width: 100%; }

/* ---------- Deck / product images ---------- */
.lg-shot {
  margin: 1.6rem 0 0;
}
.lg-split > .lg-shot { margin-top: 0; }
.lg-shot a, .lg-shot > img { display: inline-block; max-width: 100%; }
.lg-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.lg-shot--deck img { width: 900px; }
/* Transparent-background art (phones on nothing): no frame shadow. */
.lg-shot--plain img { box-shadow: none; border-radius: 0; }
.lg-shot a img { transition: transform var(--mf-transition), box-shadow var(--mf-transition); }
.lg-shot a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--mf-accent-orange);
}

.lg-badge { display: inline-block; margin: 0.6rem 0 1.8rem; }
.lg-badge img { height: 40px; width: auto; display: block; }

/* ---------- Videos ---------- */
.lg-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
}
.lg-videos--single { max-width: 760px; grid-template-columns: 1fr; }
@media (max-width: 420px) {
  .lg-videos { grid-template-columns: 1fr; }
}
.lg-video {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.lg-video .youtube-thumbnail-wrapper {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.lg-video figcaption {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.lg-video figcaption a { font-weight: 700; }
.lg-video figcaption.lg-video-note {
  font-weight: 700;
  color: var(--mf-accent-teal);
}

/* ---------- Product cards (video + description) ---------- */
.lg-card {
  border: 1px solid var(--mf-border-medium);
  border-top: 3px solid var(--mf-accent-orange);
  border-radius: 8px;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.03);
}
.lg-card .youtube-thumbnail-wrapper { box-shadow: none; border-radius: 6px; }

/* ---------- Long-form history (Sondius page: Stanford/CCRMA, recordings, Staccato) ---------- */
.lg-band h3 {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: 2.4rem 0 0.9rem;
}
.lg-band p.lg-gap { margin-top: 2rem; }
.lg-split--top { align-items: flex-start; margin: 1.6rem 0; }
.lg-split > .lg-split-media { flex: 1 1 420px; min-width: 280px; }

/* Logo row (CCRMA / Sondius, the two Staccato logos). */
.lg-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.4rem 2rem;
  margin: 0 0 1.8rem;
}
.lg-logos img { display: block; height: auto; max-width: 100%; border-radius: 4px; }
.lg-logos figure { margin: 0; }
.lg-logos figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--mf-text-meta); }

/* Photos that link to their full-size image. */
.lg-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin: 1.6rem 0;
  max-width: 900px;
}
.lg-photo { margin: 0; }
.lg-split > .lg-photo--wide { flex: 1 1 460px; min-width: 280px; }
.lg-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--mf-transition);
}
.lg-photo a:hover img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--mf-accent-orange); }
.lg-photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mf-text-meta);
}

/* One physical model: its recordings, then the write-up. */
.lg-model {
  border: 1px solid var(--mf-border-medium);
  border-left: 3px solid var(--mf-accent-orange);
  border-radius: 8px;
  padding: 1.3rem 1.5rem 0.4rem;
  margin: 1.4rem 0;
  background: rgba(255, 255, 255, 0.03);
}
.lg-model .lg-tracks { margin-bottom: 1.2rem; }

/* Audio tracks: title (also a direct link to the mp3), length, inline player. */
.lg-band ul.lg-tracks {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  max-width: 900px;
}
.lg-band ul.lg-tracks li.lg-track {
  display: grid;
  grid-template-columns: 1fr auto minmax(220px, 300px);
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0.45rem 0;
}
.lg-tracks--table li.lg-track { border-bottom: 1px solid var(--mf-border-medium); }
.lg-track-title { font-size: 0.95rem; }
.lg-track-time {
  font-size: 0.85rem;
  color: var(--mf-text-meta);
  font-variant-numeric: tabular-nums;
}
.lg-track audio { grid-column: 3; width: 100%; height: 34px; }
@media (max-width: 700px) {
  .lg-band ul.lg-tracks li.lg-track { grid-template-columns: 1fr auto; }
  .lg-track audio { grid-column: 1 / -1; }
}

/* Patents / papers / awards. */
.lg-band ul.lg-refs { list-style: none; margin-left: 0; max-width: 85ch; }
.lg-band ul.lg-refs li {
  margin-bottom: 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--mf-border-medium);
  font-size: 0.95rem;
}