/* VINX | EDITORIAL RHYTHM 2026-10-25
   Last-loaded stylesheet for detail pages. Strictly neutral grayscale.
   Landing and index listings remain under their own design system. */
:root {
  --vinx-text-link: #646464;
  --vinx-text-link-hover: #161616;
}
html[data-main-theme="dark"] {
  --vinx-text-link: #a8a8a8;
  --vinx-text-link-hover: #ffffff;
}
/* The record's H1 should not compete with the whole page. */
@media (min-width: 769px) {
  main article > section.pagehead {
    padding-top: clamp(1.55rem, 2.35vw, 2.65rem) !important;
    padding-bottom: clamp(1.1rem, 1.85vw, 2rem) !important;
  }
  main article > section.pagehead h1 {
    font-size: clamp(2.15rem, 3.05vw, 3.15rem) !important;
    line-height: 1.065 !important;
    letter-spacing: -.045em !important;
    margin-block: .15em .27em !important;
    text-wrap: balance;
  }
  main article > section.pagehead .lead {
    font-size: clamp(1.02rem, 1.17vw, 1.16rem) !important;
    line-height: 1.46 !important;
  }
}
/* Record pages: a comfortable reading size, small paragraph and section gaps. */
main article > section.prose {
  padding-top: clamp(1.15rem, 2.1vw, 2.1rem) !important;
  padding-bottom: clamp(1.4rem, 2.4vw, 2.5rem) !important;
  font-size: clamp(1rem, 1.08vw, 1.095rem) !important;
  line-height: 1.53 !important;
}
main article > section.prose :is(.vinx-body-it, .vinx-body-en, p, li, blockquote) {
  line-height: 1.53 !important;
}
main article > section.prose p,
main article > section.prose :is(ul, ol, blockquote) {
  margin-top: 0 !important;
  margin-bottom: .76em !important;
}
main article > section.prose :is(h2, h3, h4) {
  line-height: 1.19 !important;
  letter-spacing: -.025em !important;
  margin-top: 1.35em !important;
  margin-bottom: .38em !important;
}
main article > section.prose h2 { font-size: clamp(1.32rem, 1.8vw, 1.72rem) !important; }
main article > section.prose h3 { font-size: clamp(1.16rem, 1.5vw, 1.38rem) !important; }
main article > section.prose :is(p, ul, ol, blockquote):last-child { margin-bottom: 0 !important; }
main article > section.pagehead .eyebrow { margin: .7rem 0 .55rem !important; }
main article > section.pagehead > p:first-child { margin: 0 0 .65rem !important; }
main article > section.pagehead .event-facts { margin-top: 1rem !important; }
main article > section.pagehead .fact-row { margin-top: .95rem !important; }
/* Credits should sit close to the work, not create a second hero-sized panel. */
main article > section.credit-section {
  padding-top: clamp(.8rem, 1.6vw, 1.35rem) !important;
  padding-bottom: clamp(1.2rem, 2.6vw, 2.4rem) !important;
}
main article .credit-entry { padding-block: .52rem !important; column-gap: clamp(1rem, 2vw, 1.6rem) !important; }
main article .collaborators { margin-top: 1.2rem !important; }
main article .collaborators p { margin-top: .3rem !important; margin-bottom: .4rem !important; }
main article .entity-credits { padding-top: .75rem !important; padding-bottom: .3rem !important; }
main article .entity-credits + * { margin-top: .9rem !important; }
/* Covers and galleries: let media breathe, but within editorial proportions. */
main article .wide-media .media-hero {
  max-width: 920px;
  margin: .7rem 0 clamp(1.1rem, 2.3vw, 2rem) !important;
}
main article .wide-media .media-hero img { max-height: 66vh; object-fit: contain; object-position: left center; }
main article .wide-media .gallery {
  max-width: 1060px;
  gap: clamp(.7rem, 1.5vw, 1.35rem) !important;
  margin: clamp(1.2rem, 2.5vw, 2.3rem) 0 !important;
}
/* Video partial, including events/2025-10-01-clockwork-voltage: max 680px instead of full canvas. */
main article .video-embed,
main article .vinx-embedded-media {
  width: 100% !important;
  max-width: 680px !important;
  margin: clamp(1.1rem, 2.2vw, 2rem) 0 !important;
  background: #111;
}
main article .video-embed { aspect-ratio: 16 / 9 !important; }
main article .wide-media .video-embed { margin-left: auto !important; margin-right: auto !important; }
main article .vinx-embedded-media { background: transparent; }
main article .vinx-embedded-media--video {
  aspect-ratio: 16 / 9;
  background: #111;
}
main article .vinx-embedded-media iframe {
  display: block;
  width: 100% !important;
  border: 0;
}
main article .vinx-embedded-media--video iframe { aspect-ratio: 16 / 9; height: auto !important; }
main article .vinx-embedded-media--spotify iframe { height: 152px !important; }
main article .vinx-embedded-media--spotify.vinx-embedded-media--album iframe { height: 232px !important; }
main article .vinx-embedded-media--soundcloud iframe { height: 166px !important; }
main article .vinx-embedded-media--instagram { max-width: 390px !important; }
main article .vinx-embedded-media--instagram iframe { height: 450px !important; }
/* Existing third-party HTML embeds in the Markdown content. */
main article section.prose iframe[src*="youtube.com/embed"],
main article section.prose iframe[src*="youtube-nocookie.com/embed"],
main article section.prose iframe[src*="player.vimeo.com/video"] {
  display: block;
  box-sizing: border-box;
  width: min(100%, 680px) !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  max-width: 100% !important;
  border: 0;
  margin: 1.1rem 0 !important;
}
main article section.prose iframe[src*="spotify.com/embed"] {
  display: block; width: min(100%, 680px) !important;
  height: 152px !important; border: 0; margin: 1rem 0 !important;
}
main article section.prose iframe[src*="spotify.com/embed/album"] { height: 232px !important; }
main article section.prose iframe[src*="w.soundcloud.com/player"] {
  display: block; width: min(100%, 680px) !important;
  height: 166px !important; border: 0; margin: 1rem 0 !important;
}
main article section.prose iframe[src*="bandcamp.com/EmbeddedPlayer"] {
  display: block; width: min(100%, 680px) !important;
  height: 260px !important; border: 0; margin: 1rem 0 !important;
}
/* Secondary links in records: gray, but with a stronger neutral hover/focus. */
main article a[href]:not(.vinx-record-card),
main .profile-page .profile-content a[href] {
  color: var(--vinx-text-link) !important;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
main article a[href]:not(.vinx-record-card):is(:hover,:focus-visible),
main .profile-page .profile-content a[href]:is(:hover,:focus-visible) {
  color: var(--vinx-text-link-hover) !important;
  text-decoration: underline !important;
}
main article a[href]:focus-visible,
main .profile-page .profile-content a[href]:focus-visible {
  outline: 2px solid var(--vinx-text-link-hover);
  outline-offset: 3px;
}
/* Smaller phones should still have a comfortable minimum and no overflow. */
@media (max-width: 768px) {
  main article > section.pagehead { padding-top: 1.2rem !important; padding-bottom: .95rem !important; }
  main article > section.pagehead h1 {
    font-size: clamp(1.9rem, 7.7vw, 2.45rem) !important;
    line-height: 1.09 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }
  main article > section.prose { font-size: 1rem !important; padding-top: 1rem !important; padding-bottom: 1.25rem !important; }
  main article .video-embed, main article .vinx-embedded-media { max-width: min(100%, 680px) !important; }
  main article .wide-media .gallery { gap: .9rem !important; }
  main article .media-hero img { max-height: 55svh; }
}
@media (prefers-reduced-motion: reduce) {
  main article a[href] { transition: none !important; }
}