/* Shared proportions for the homepage and archive, 1.6.2. */
:root {
  --section-space: clamp(3rem, 5vw, 5rem);
  --content-gutter: max(clamp(1.2rem, 5vw, 6rem), calc((min(100vw, 1920px) - 1440px) / 2));
  --content-gap: clamp(1rem, 2vw, 1.75rem);
  --layout-gap: clamp(1.5rem, 3vw, 3rem);
  --card-padding: clamp(1.25rem, 2vw, 1.75rem);
  --heading-size: clamp(2rem, 3.4vw, 3.5rem);
  --card-heading-size: clamp(1.2rem, 1.65vw, 1.5rem);
  --small-copy-size: .875rem;
}
.section, .section.project-feature, .shop-strip {
  padding-block: var(--section-space);
  padding-inline: var(--content-gutter);
}
.section .section-heading, .shop-strip .section-heading {
  margin: 0;
  max-width: 24ch;
  font-size: var(--heading-size);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.04em;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.section .section-title, .section .live-title-row { margin-bottom: var(--layout-gap); }
.section .section-header { margin-bottom: var(--layout-gap); gap: var(--content-gap); padding-bottom: 1rem; }
.section .eyebrow { margin-bottom: 1rem; font-size: .75rem; line-height: 1.6; }
.section .project-copy h2, .section .bioscope-copy h2 { margin-bottom: 1.25rem; }
.section .project-layout, .section .bioscope-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
  align-items: center;
}
.section .project-portrait { width: 100%; max-width: none; margin: 0; }
.section .project-layout img, .section .bioscope-main {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #0b1016;
}
.section .project-layout figcaption, .section .tq-portraits figcaption,
.section .photo-grid figcaption { font-size: var(--small-copy-size); line-height: 1.6; }
.section .project-copy > p:not(.eyebrow), .section .bioscope-copy > p,
.section .contact-copy > p, .section .bio-copy p { font-size: 1rem; line-height: 1.75; }
.section .bio-copy .lead { font-size: clamp(1.2rem, 1.65vw, 1.5rem); line-height: 1.55; }
.section .bio-grid, .section .contact-grid { gap: var(--layout-gap); }
.project-index { padding-inline: var(--content-gutter); }
.section .project-links { margin-top: 1.5rem; gap: .5rem; }

/* All news cards share one row and one type scale. */
.section .news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--content-gap);
  background: transparent;
  border: 0;
}
.section .news-stack { display: contents; }
.section .news-feature, .section .news-card {
  min-width: 0;
  min-height: clamp(19rem, 29vw, 25rem);
  border: 1px solid var(--line);
}
.section .news-card { padding: var(--card-padding); }
.section .news-content { left: var(--card-padding); right: var(--card-padding); bottom: var(--card-padding); }
.section .news-content h3, .section .news-card h3 {
  margin: 0;
  font-size: var(--card-heading-size);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.section .news-content > p:not(.card-meta), .section .news-card > p:not(.card-meta) {
  font-size: 1rem;
  line-height: 1.6;
  margin-block: 1rem;
}

/* Shared card spacing and typography; heights follow each grid's content. */
.section .release-grid, .section .schiller-albums, .section .tq-feature-grid,
.section .tq-chart-grid, .section .tq-instrument-grid, .section .tq-interview-list,
.section .remix-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--content-gap);
  grid-auto-rows: 1fr;
}
.section .collaboration-spotlights { gap: var(--content-gap); }
.section .tq-feature-grid article, .section .tq-chart-grid > div,
.section .tq-instrument-grid > div, .section .remix-grid article,
.section .tq-interview-list a, .section .collaboration-spotlight,
.section .project-album-copy, .section .video-card { padding: var(--card-padding); }
.section .tq-feature-grid article { min-height: 0; }
.section .project-album { max-width: none; width: 100%; }
.section .project-album h3, .section .release-copy h3, .section .tq-feature-grid h3,
.section .remix-grid h3, .section .tq-interview-list h3,
.section .collaboration-spotlight h3, .section .video-card > h3 {
  font-size: var(--card-heading-size);
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.section .tq-chart-grid strong, .section .tq-instrument-grid strong {
  font-size: 1.1rem;
  line-height: 1.45;
  font-weight: 600;
}
.section .tq-chart-grid span, .section .tq-instrument-grid span,
.section .tq-feature-grid article p:not(.eyebrow), .section .remix-grid article > p:not(.eyebrow),
.section .collaboration-spotlight > p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; }
.section .chart-credit, .section .chart-contribution, .section .track-credit,
.section .tq-interview-list p, .section .release-copy p, .section .release-copy > span {
  font-size: var(--small-copy-size);
  line-height: 1.6;
}
.section .collaboration-cards, .section .remix-heading { margin-top: var(--layout-gap); }
.section .remix-heading h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.section .tq-venue-grid { gap: 0 var(--content-gap); }
.section .tq-venue { padding-block: var(--card-padding); }
.section .tq-venue span { font-size: var(--small-copy-size); }
.section .show-row { min-height: 0; padding-block: var(--card-padding); }
.section .show-location h3 { font-size: var(--card-heading-size); line-height: 1.3; }
.section .show-date, .section .show-tour, .section .show-location p { font-size: var(--small-copy-size); }

.section .photo-grid, .section .bioscope-gallery { gap: var(--content-gap); }
.section .photo-grid img, .section .bioscope-gallery img, .section .tq-solo-portraits img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #0b1016;
}
.section .photo-grid, .section .tq-portraits { margin-block: var(--layout-gap); }
.section .tq-solo-portraits { max-width: 640px; }
.section .video-grid { max-width: 920px; }
.section .video-card { grid-template-columns: minmax(120px, .65fr) minmax(0, 1fr); gap: var(--content-gap); }
.section .video-card .video-image { aspect-ratio: 3 / 2; }
.section.facebook-section { padding-block: var(--layout-gap); }
.section .facebook-placeholder { padding: var(--card-padding); }
.facebook-admin-note { max-width: 60ch; margin: 0 auto; font-size: .9rem; }
.facebook-admin-note a { text-decoration: underline; color: var(--blue-bright); }

.hero-visual { min-height: clamp(30rem, 48vw, 45rem); }
.hero h1 { font-size: clamp(2.5rem, 5.3vw, 6.3rem); }
.hero-copy { padding-top: var(--section-space); }
.shop-strip { gap: var(--layout-gap); }
.site-footer { padding-inline: var(--content-gutter); gap: var(--layout-gap); }
.discography-hero { padding: var(--section-space) var(--content-gutter); }
.discography-title-row { margin-top: var(--layout-gap); gap: var(--layout-gap); }
.discography-title-row h1 { font-size: clamp(3rem, 7vw, 7rem); line-height: 1; }
.discography-intro strong { font-size: var(--heading-size); line-height: 1.1; }
.discography-filters { margin-inline: calc(-1 * var(--content-gutter)); padding-inline: var(--content-gutter); }
.discography-archive { padding-inline: var(--content-gutter); padding-bottom: var(--section-space); }

@media (max-width: 1100px) {
  .section .release-grid, .section .schiller-albums, .section .tq-feature-grid,
  .section .tq-chart-grid, .section .tq-instrument-grid, .section .tq-interview-list,
  .section .remix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero-visual { min-height: 0; aspect-ratio: 3 / 2; }
  .hero h1 { font-size: clamp(2.5rem, 9vw, 5.5rem); }
  .section .news-grid { grid-template-columns: 1fr; }
  .section .news-feature, .section .news-card { min-height: 18rem; }
}
@media (max-width: 640px) {
  .discography-filters { margin-inline: 0; padding-inline: 0; }
  .section .project-layout, .section .bioscope-layout,
  .section .release-grid, .section .schiller-albums, .section .tq-feature-grid,
  .section .tq-chart-grid, .section .tq-interview-list, .section .remix-grid,
  .section .collaboration-spotlights { grid-template-columns: minmax(0, 1fr); }
  .section .project-layout-reverse > :first-child, .section .project-layout-reverse > .project-copy { grid-column: 1; grid-row: auto; }
  .section .video-card { grid-template-columns: 105px minmax(0, 1fr); gap: 1rem; }
  .section .tq-instrument-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: clamp(2.4rem, 10.2vw, 4rem); }
}
@media (max-width: 380px) {
  .section .tq-instrument-grid { grid-template-columns: 1fr; }
  .section .video-card { grid-template-columns: 1fr; }
  .section .video-card .video-image { grid-row: auto; }
}