/* Music vertical — editorial archive treatment
   Scope is intentionally limited by loading this stylesheet only on /pt/musica/ and /en/music/.
   Keep Full Biography and standalone Chapter Pages isolated from this presentation layer. */

/* Entry points for a long archive; native anchors also work without JavaScript. */
.music-page .article-hero .hero-lead{max-width:66ch}
.music-discovery{margin-top:26px}
.music-discovery .archive-reading-action{margin:0 0 8px}
.music-jump-links{display:flex;flex-wrap:wrap;gap:8px}
.music-jump-links a{min-height:44px;padding:8px 13px;font-size:.8rem}
.music-page .article-aside{max-height:calc(100vh - 118px);overflow:auto;scrollbar-width:thin}
.music-page .article-aside a{padding-block:10px;line-height:1.4}
.music-page .article-body > .chapter > p{max-width:72ch;line-height:1.75}
@media(max-width:1040px){.music-page .article-aside{max-height:none}}
@media(max-width:580px){.music-page .article-hero{padding-top:46px}.music-discovery{margin-top:20px}}

.thread-media{
  margin:34px 0 42px;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
}
.thread-media>a{background:transparent}
.thread-media:not(.thread-media--pair)>a>img{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
}
.thread-media figcaption{
  padding:10px 2px 0;
  font-size:.82rem;
  line-height:1.48;
}
.thread-media figcaption strong{
  font-size:.88rem;
  margin-bottom:3px;
}
.thread-media-open{
  margin-top:6px;
  font-size:.78rem;
  font-weight:680;
}
.thread-media--pair .thread-media-pair__images{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  overflow:hidden;
}

.record-gallery{margin:34px 0 18px}
.record-gallery__head{
  padding:0 0 9px;
  margin-bottom:12px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.record-gallery__head strong{
  font-size:.78rem;
  letter-spacing:.09em;
  color:var(--accent-soft);
}
.record-gallery__head::after{
  font-size:.78rem;
  color:var(--muted);
  font-weight:600;
}
.record-gallery__item{border-radius:8px}

.video-library{
  margin:30px 0 14px;
  padding:14px 0 16px;
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.video-library__head{
  padding-bottom:8px;
  border-bottom:0;
}
.video-library__head strong{
  font-size:.73rem;
  color:var(--accent-soft);
}
.video-library__head span{
  font-size:.76rem;
  color:var(--muted);
  font-weight:600;
}
.video-library__group{padding-top:6px}
.video-library__group + .video-library__group{
  margin-top:12px;
  padding-top:12px;
}
.video-library__label{margin-bottom:2px}
.video-library__label strong{
  font-size:.84rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--soft);
  font-weight:720;
}
.video-library .video-library__description{
  margin:4px 0 9px!important;
  font-size:.82rem!important;
}
.video-pill{
  min-height:36px;
  padding:6px 11px;
  border-radius:8px;
  background:transparent;
  border-color:rgba(243,239,231,.30);
  font-size:.8rem;
}

@media(max-width:580px){
  .fact-strip{grid-template-columns:1fr 1fr;gap:8px}
  .fact{padding:13px 12px}
  .fact span{font-size:.65rem}
  .fact strong{font-size:.88rem}

  .thread-media{margin:26px 0 34px}
  .thread-media figcaption{padding:9px 1px 0}

  .record-gallery{margin-top:30px}
  .record-gallery__head{gap:1px;padding:0 0 8px}
  .record-gallery__head strong{font-size:.8rem}
  .record-gallery__head::after{font-size:.8rem}

  .video-library{padding:12px 0 14px;margin:26px 0 12px}
  .video-library__head{gap:1px}
}


/* Music editorial V2 — special-case hierarchy for high-density archive moments */

/* Reconstructed / illustrative images should not visually outrank primary documentary material. */
#music-demo-tape-1994 > .thread-media--pair,
#kid-vinil-97fm-rock-1994 > .thread-media,
#music-reunion-2023 > .thread-media{
  width:min(82%,720px);
  margin-left:auto;
  margin-right:auto;
}

/* Album artwork behaves like a physical object, not a full-bleed hero image. */
#music-album-1999-2000 > .thread-media{
  width:min(54%,480px);
  margin-left:auto;
  margin-right:auto;
}

/* Dense album credits: editorial dossier treatment instead of an undifferentiated text wall. */
.album-credits{
  margin:32px 0 38px;
  padding:22px 0 24px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.album-credits h3{
  margin:0 0 18px;
  font-size:.86rem;
  line-height:1.3;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--accent-soft);
}
.album-credits h4{
  margin:20px 0 7px;
  font-size:.78rem;
  line-height:1.35;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--soft);
}
.album-credits ol,
.album-credits ul{
  margin:0;
  padding-left:1.25rem;
  color:var(--muted);
}
.album-credits li{
  margin:.26rem 0;
  line-height:1.55;
}
.album-credits p{
  margin:.35rem 0 0!important;
  color:var(--muted)!important;
  font-size:.92rem!important;
  line-height:1.55!important;
}

/* Event galleries deserve larger documentary thumbnails on desktop. */
#music-album-1999-2000 .record-gallery__item{flex-basis:180px}
#music-olympia-2000 .record-gallery__item{flex-basis:210px}
#music-jo-2001 .record-gallery__item{flex-basis:174px}
#music-reunion-2023 .record-gallery__item{flex-basis:210px}

@media(max-width:900px){
  #music-demo-tape-1994 > .thread-media--pair,
  #kid-vinil-97fm-rock-1994 > .thread-media,
  #music-reunion-2023 > .thread-media{
    width:min(92%,720px);
  }
  #music-album-1999-2000 > .thread-media{
    width:min(68%,480px);
  }
}

@media(max-width:580px){
  #music-demo-tape-1994 > .thread-media--pair,
  #kid-vinil-97fm-rock-1994 > .thread-media,
  #music-reunion-2023 > .thread-media,
  #music-album-1999-2000 > .thread-media{
    width:100%;
  }

  .album-credits{
    margin:28px 0 32px;
    padding:18px 0 20px;
  }
  .album-credits h3{font-size:.82rem}
  .album-credits h4{margin-top:17px;font-size:.76rem}

  #music-album-1999-2000 .record-gallery__item,
  #music-olympia-2000 .record-gallery__item,
  #music-jo-2001 .record-gallery__item,
  #music-reunion-2023 .record-gallery__item{
    flex-basis:72vw;
    max-width:330px;
  }
}


/* Music editorial V3 — narrative rhythm between episodes */

/* Landmark episodes get a little more air and a slightly warmer divider.
   This creates hierarchy without adding another card or decorative component. */
#destemidos-limonadas-punkecas-1992,
#music-demo-tape-1994,
#music-album-1997,
#music-album-1999-2000,
#music-olympia-2000,
#music-jo-2001,
#music-reunion-2023{
  border-top-color:rgba(211,164,160,.20);
}
#destemidos-limonadas-punkecas-1992 > .phase-year,
#music-demo-tape-1994 > .phase-year,
#music-album-1997 > .phase-year,
#music-album-1999-2000 > .phase-year,
#music-olympia-2000 > .phase-year,
#music-jo-2001 > .phase-year,
#music-reunion-2023 > .phase-year{
  margin-top:58px;
  font-size:.79rem;
}

/* Bridge entries carry chronology, but should not compete visually with the major archive moments. */
#music-mp3-era-2000,
#music-active-2001-2003,
#music-end-2003{
  border-top-color:rgba(255,255,255,.065);
}
#music-mp3-era-2000 > .phase-year,
#music-active-2001-2003 > .phase-year,
#music-end-2003 > .phase-year{
  margin-top:30px;
  margin-bottom:.42rem;
  font-size:.68rem;
  color:var(--muted);
}
#music-mp3-era-2000 > h2,
#music-active-2001-2003 > h2,
#music-end-2003 > h2{
  font-size:clamp(1.55rem,2.65vw,2.1rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin-bottom:.42em;
}
#music-mp3-era-2000 > p,
#music-active-2001-2003 > p,
#music-end-2003 > p{
  max-width:72ch;
  font-size:.98rem;
  color:var(--muted);
}

/* Media inserted mid-narrative should read as evidence inside the story, not as an ending. */
.music-entry > .video-library:has(+ p){
  margin-top:22px;
  margin-bottom:20px;
}
.music-entry > .video-library:has(+ p) + p{
  margin-top:20px;
}

/* Keep the last archival object of an episode visually attached to that episode. */
.music-entry > .record-gallery:last-child,
.music-entry > .video-library:last-child,
.music-entry > .thread-media:last-child{
  margin-bottom:32px;
}

@media(max-width:580px){
  #destemidos-limonadas-punkecas-1992 > .phase-year,
  #music-demo-tape-1994 > .phase-year,
  #music-album-1997 > .phase-year,
  #music-album-1999-2000 > .phase-year,
  #music-olympia-2000 > .phase-year,
  #music-jo-2001 > .phase-year,
  #music-reunion-2023 > .phase-year{
    margin-top:46px;
    font-size:.74rem;
  }

  #music-mp3-era-2000 > .phase-year,
  #music-active-2001-2003 > .phase-year,
  #music-end-2003 > .phase-year{
    margin-top:26px;
    font-size:.66rem;
  }
  #music-mp3-era-2000 > h2,
  #music-active-2001-2003 > h2,
  #music-end-2003 > h2{
    font-size:1.62rem;
  }

  .music-entry > .video-library:has(+ p){
    margin-top:20px;
    margin-bottom:18px;
  }
}


/* Music editorial V4 — stop-the-scroll signal hierarchy
   Dates and media-category labels are primary editorial signposts, not secondary metadata. */
:root{
  --music-signal:#ff625c;
}

.article-body > .music-entry > .phase-year{
  color:var(--music-signal);
  font-size:.92rem;
  line-height:1.2;
  letter-spacing:.10em;
  font-weight:900;
}

/* Media/archive category headers: strong enough to interrupt scanning without becoming CTA chrome. */
.video-library__head strong,
.record-gallery__head strong,
.record-media-block__head span,
.album-credits h3{
  color:var(--music-signal);
  font-weight:900;
}

.video-library__head strong{
  font-size:.94rem;
  letter-spacing:.095em;
}
.record-gallery__head strong{
  font-size:.94rem;
  letter-spacing:.085em;
}
.record-media-block__head span{
  font-size:.82rem;
  letter-spacing:.105em;
}
.album-credits h3{
  font-size:.94rem;
  letter-spacing:.095em;
}

/* Item-level media labels remain subordinate to the red category signal, but no longer whisper. */
.video-library__label strong{
  font-size:.94rem;
  line-height:1.35;
  color:var(--text);
  font-weight:800;
}

/* Archive/document status labels, when present inside Music, follow the same signal language. */
.evidence .status{
  color:var(--music-signal);
  font-size:.76rem;
  font-weight:850;
}

@media(max-width:580px){
  .article-body > .music-entry > .phase-year{
    font-size:.86rem;
    letter-spacing:.085em;
  }
  .video-library__head strong,
  .record-gallery__head strong{
    font-size:.92rem;
  }
  .record-media-block__head span{
    font-size:.8rem;
  }
  .video-library__label strong{
    font-size:.92rem;
  }
}


/* Music editorial V4.1 — chronology must read at scroll speed
   Explicit !important is intentional here: older episode-ID rules must not shrink dates again. */
.article-body > .music-entry > .phase-year{
  font-size:1.18rem!important;
  line-height:1.1;
  letter-spacing:.075em;
  margin-bottom:.58rem;
}

/* Major milestones carry slightly more chronological weight. */
#destemidos-limonadas-punkecas-1992 > .phase-year,
#music-demo-tape-1994 > .phase-year,
#music-album-1997 > .phase-year,
#music-album-1999-2000 > .phase-year,
#music-olympia-2000 > .phase-year,
#music-jo-2001 > .phase-year,
#music-reunion-2023 > .phase-year{
  font-size:1.34rem!important;
}

/* Bridge entries stay secondary, but their years remain unmistakably readable. */
#music-mp3-era-2000 > .phase-year,
#music-active-2001-2003 > .phase-year,
#music-end-2003 > .phase-year{
  font-size:1.06rem!important;
  color:var(--music-signal);
}

@media(max-width:580px){
  .article-body > .music-entry > .phase-year{
    font-size:1.08rem!important;
    letter-spacing:.065em;
  }
  #destemidos-limonadas-punkecas-1992 > .phase-year,
  #music-demo-tape-1994 > .phase-year,
  #music-album-1997 > .phase-year,
  #music-album-1999-2000 > .phase-year,
  #music-olympia-2000 > .phase-year,
  #music-jo-2001 > .phase-year,
  #music-reunion-2023 > .phase-year{
    font-size:1.2rem!important;
  }
  #music-mp3-era-2000 > .phase-year,
  #music-active-2001-2003 > .phase-year,
  #music-end-2003 > .phase-year{
    font-size:1rem!important;
  }
}


/* Music editorial V5 — visible, translucent media actions
   Media is primary content here; controls must be discoverable without becoming solid promotional CTAs. */
.video-pill{
  background:rgba(243,239,231,.105);
  border-color:rgba(243,239,231,.56);
  color:rgba(255,252,246,.98)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.018);
}
.video-pill::before{
  color:var(--music-signal);
  opacity:.96;
}
.video-pill--primary{
  background:rgba(243,239,231,.14);
  border-color:rgba(243,239,231,.68);
}
.video-pill:hover,
.video-pill:focus-visible{
  background:rgba(243,239,231,.19);
  color:#fffdf8!important;
  border-color:rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 18px rgba(0,0,0,.22);
}
.video-pill:hover::before,
.video-pill:focus-visible::before{
  color:var(--music-signal);
}
.video-pill:focus-visible{
  outline:2px solid rgba(255,255,255,.82);
  outline-offset:3px;
}

@media(max-width:580px){
  .video-pill{
    background:rgba(243,239,231,.12);
    border-color:rgba(243,239,231,.60);
  }
}


/* Music cross-list — Folhateen / Órfãos do Rock */
.music-crosslist{
  border-top-color:rgba(211,164,160,.20);
}
.music-crosslist > .phase-year{
  margin-top:58px!important;
  font-size:1.34rem!important;
}
.music-crosslist > .entry-discovery{
  margin:0 0 16px;
}
.music-crosslist > .thread-media{
  width:min(48%,420px);
  margin-left:auto;
  margin-right:auto;
}
.music-crosslist > p{
  max-width:72ch;
  line-height:1.75;
}
.music-crosslist .archive-reading-action{
  margin-top:14px;
}
@media(max-width:580px){
  .music-crosslist > .phase-year{
    margin-top:46px!important;
    font-size:1.2rem!important;
  }
  .music-crosslist > .thread-media{
    width:100%;
  }
}