/* Philly Hip Hop History, decade chapters: the vertical, year-by-year timeline (shared by every decade page).
   Years are stations on the line; records are drawn as the labels they were pressed on; full-width spreads carry
   the line through so it never breaks. */

/* ───────── chapter opener ───────── */
.hero--chapter { min-height: min(92svh, 920px); }
.chapter__numeral { position: absolute; z-index: 1; right: -2vw; bottom: -0.12em; margin: 0; font: 800 clamp(6.2rem, 15.5vw, 15.5rem)/1 var(--f-label); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 2px rgb(173 126 50 / .32); pointer-events: none; user-select: none; }
.hero--chapter .hero__title { max-width: 10ch; }
@media (max-width: 760px) { .chapter__numeral { font-size: 27.28vw; right: -4vw; bottom: auto; top: calc(var(--nav-h) + 8px); } }

/* the decades: every chapter of the history */
.chapters { position: relative; z-index: 2; background: #000; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.chapters__list { list-style: none; margin: 0 auto; padding: 0 var(--gutter); width: min(var(--maxw), 100%); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.chapters__item { display: grid; gap: 4px; padding: 18px 14px 16px; border-left: 1px solid var(--hair); font: 400 .85rem/1.3 var(--f-body); color: var(--cream-soft); text-decoration: none; height: 100%; }
.chapters li:first-child .chapters__item { border-left: 0; }
.chapters__item b { font: 500 1.28rem/1 var(--f-label); letter-spacing: .04em; font-weight: 400; color: var(--cream); }
.chapters__item.is-now { background: var(--mustard); color: #000; }
.chapters__item.is-now b { color: #000; }
.chapters__item.is-soon { opacity: .55; }
.chapters__item.is-soon::after { content: "Pressing"; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); margin-top: 4px; }
@media (max-width: 900px) {
  .chapters { overflow-x: auto; scrollbar-width: none; }
  .chapters__list { grid-template-columns: repeat(6, minmax(9.5rem, 1fr)); width: max-content; min-width: 100%; }
}


/* ───────── intro ───────── */
.intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 100px); align-items: start; }
.intro .lede { margin-bottom: 22px; }
@media (max-width: 900px) { .intro { grid-template-columns: minmax(0, 1fr); } }

/* ───────── years ───────── */
.year__n { max-width: none; margin-bottom: clamp(32px, 4vw, 56px); font-size: clamp(4.4rem, 11vw, 9rem); line-height: .82; color: var(--cream); }
.year__n::before { top: var(--dot-top); }
.entries { display: grid; gap: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 80px); }
@media (min-width: 1100px) { .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .entry--record, .entry--lead, .entry--grammy { grid-column: 1 / -1; } }
.entry { max-width: 64ch; }
.entry--record { max-width: none; display: grid; grid-template-columns: clamp(190px, 20vw, 270px) minmax(0, 62ch); gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
.entry--lead.entry--record { grid-template-columns: clamp(220px, 26vw, 340px) minmax(0, 62ch); }
.entry__kind { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard-ink); }
.entry__kind::before { content: ""; width: 18px; height: 3px; background: currentColor; }
.entry__title { margin: 0 0 8px; font: 800 clamp(1.5rem, 2.4vw, 2.2rem)/1.12 var(--f-display); letter-spacing: -.01em; color: var(--cream); text-wrap: balance; }
.entry--lead .entry__title { font-size: clamp(2rem, 3.4vw, 3rem); }
.entry__title cite, .entry__where cite { font-style: italic; }
.entry__where { margin: 0 0 18px; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-soft); }
.entry .prose + .prose { margin-top: .9em; }
.pull { margin: 28px 0 6px; }
.pull p { margin: 0; font: 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--f-hand); color: var(--red-ink); transform: rotate(-3deg); transform-origin: left; filter: url(#spray); }
.pull footer { margin-top: 12px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); }
.listen { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px 8px 12px; border: 1px solid rgb(241 233 216 / .35); border-radius: 999px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-decoration: none; transition: border-color .16s, background-color .16s, color .16s; }
.listen::before { content: ""; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.listen:hover { background: var(--mustard); border-color: var(--mustard); color: #000; }
.listen.is-cued { border-color: var(--mustard); color: var(--mustard-ink); }
.listen.is-on { background: var(--mustard); border-color: var(--mustard); color: #000; }
.listen.is-on::before { width: 10px; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.entry--grammy { position: relative; padding: clamp(24px, 3vw, 40px); max-width: 72ch; background: var(--black-2); border-top: 10px solid var(--gold); }
.entry--grammy .entry__kind { color: var(--gold); }
@media (max-width: 700px) {
  .entry--record, .entry--lead.entry--record { grid-template-columns: minmax(0, 1fr); }
  .entry--record .disc { width: min(200px, 60%); }
  .entry--lead .disc { width: min(260px, 78%); }
}

/* the record, drawn: grooves, sheen, a printed centre label */
.disc { position: relative; margin: 0; aspect-ratio: 1; border-radius: 50%; container-type: inline-size;
  background:
    conic-gradient(from 30deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / .09) 30deg, rgb(255 255 255 / 0) 70deg, rgb(255 255 255 / 0) 200deg, rgb(255 255 255 / .07) 230deg, rgb(255 255 255 / 0) 270deg),
    repeating-radial-gradient(circle, #0c0c0c 0 1.5px, #191919 1.5px 3px);
  box-shadow: 0 18px 30px rgb(0 0 0 / .55), inset 0 0 0 2px #222; }
.disc__label { position: absolute; inset: 26%; border-radius: 50%; background: var(--l); display: grid; place-content: center; justify-items: center; gap: 1.5cqi; padding: 0 3cqi; text-align: center; color: #fff;
  box-shadow: inset 0 0 0 1.2cqi rgb(0 0 0 / .18); transition: transform 1.6s var(--ease-out); }
.disc__co { font: 500 3.4cqi/1.15 var(--f-label); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 2.5cqi; max-width: 40cqi; text-wrap: balance; }
.disc__title { font: 800 4.6cqi/1.08 var(--f-display); text-transform: uppercase; max-width: 40cqi; }
.disc__by { font: 400 3.6cqi/1.15 var(--f-body); max-width: 40cqi; margin-top: 4cqi; opacity: .9; }
.disc__yr { font: 500 3.4cqi/1 var(--f-mono); letter-spacing: .1em; opacity: .85; }
.disc[style*="--mustard"] .disc__label, .disc[style*="--teal"] .disc__label, .disc[style*="--olive"] .disc__label { color: #000; }
@media (prefers-reduced-motion: no-preference) {
  .entry--record:hover .disc__label { transform: rotate(360deg); }
}

/* ───────── spreads: full-width scenes, the line runs through them ───────── */
.spread { position: relative; isolation: isolate; overflow: clip; padding: clamp(96px, 12vw, 168px) 0; }
.spread .rail { position: absolute; z-index: 3; inset: 0 0 0 0; padding: 0; pointer-events: none; }
.spread__inner { position: relative; z-index: 2; width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; padding-left: var(--indent); }
.spread__inner > .prose { max-width: 60ch; }
.spread__title { margin: 0 0 24px; max-width: 14ch; font: 800 clamp(1.984rem, 4.588vw, 4.092rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); filter: url(#spray); }
.spread__tag { margin-bottom: 14px; display: inline-block; }

.spread--djs .spread__mural { position: absolute; z-index: 1; right: 3%; top: 50%; width: min(38vw, 520px); transform: translateY(-50%) rotate(2.5deg); }
.spread--djs .spread__inner > * { max-width: min(56ch, 52vw); }
.spread__names { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.spread__names li { padding: 8px 14px; border: 1px solid rgb(241 233 216 / .3); font: 500 13.6px/1 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream); }
@media (max-width: 900px) { .spread--djs .spread__mural { position: relative; inset: auto; transform: rotate(2deg); width: min(86vw, 460px); margin: 0 auto 48px; } .spread--djs .spread__inner > * { max-width: none; } }

/* the plateau: the skyline under halftone, the text on the dark side */
.spread--plateau { background: #000; }
.spread__photo { position: absolute; inset: 0; z-index: 0; }
.spread__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .55; }
.spread__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .75) 45%, rgb(0 0 0 / .25) 100%); }
.spread--plateau .spread__inner > .prose { color: var(--cream); }
.spread--plateau .prose + .prose { margin-top: 1em; }

/* the west philly line */
.westline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.westline li { position: relative; padding: 62px clamp(14px, 2vw, 28px) 0 0; display: grid; gap: 8px; }
.westline li::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 10px; background: var(--s); }
.westline li:last-child::before { right: 40%; }
.westline li::after { content: ""; position: absolute; left: 0; top: 9px; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 5px solid #111; box-shadow: 0 0 0 4px var(--s); }
.westline b { font: 800 clamp(.992rem, 1.488vw, 1.364rem)/1 var(--f-label); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; color: var(--cream); }
.westline span { font: 400 .95rem/1.55 var(--f-body); color: var(--cream-soft); max-width: 26ch; }
.westline__note { margin: 28px 0 0; font: 500 13px/1.5 var(--f-mono); color: var(--cream-soft); }
@media (max-width: 860px) {
  .westline { grid-template-columns: minmax(0, 1fr); }
  .westline li { padding: 0 0 36px 54px; }
  .westline li::before { left: 9px; right: auto; top: 14px; bottom: 0; width: 10px; height: auto; }
  .westline li:last-child::before { bottom: 60%; right: auto; }
  .westline li::after { top: 0; }
}

/* street talk: a sticker sheet */
.talk { margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.talk > div { padding: 20px 18px 18px; border-radius: 10px; background: color-mix(in srgb, var(--t) 74%, #000); transform: rotate(var(--tilt)); box-shadow: 0 12px 22px rgb(0 0 0 / .45); }
.talk dt { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.talk dd { margin: 10px 0 0; font: 400 .92rem/1.45 var(--f-body); color: rgb(255 255 255 / .9); }
@media (max-width: 900px) { .talk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────── coda + sources ───────── */
.coda { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 100px); align-items: start; }
.coda__next { margin: 28px 0 0; display: grid; gap: 6px; padding: 20px 22px; border: 2px solid var(--cream); max-width: 420px; }
.coda__label { font: 500 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); }
.coda__title { font: 800 clamp(1.054rem, 1.612vw, 1.426rem)/1 var(--f-label); letter-spacing: .01em; text-transform: uppercase; color: var(--cream); }
.coda__state { font: 500 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.sec--end-chapter > .wrap::after { content: ""; position: absolute; left: calc(var(--line-w) / 2 - 18px); bottom: -18px; width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 7px solid #111; box-shadow: 0 0 0 5px var(--line); z-index: 2; }
@media (max-width: 900px) { .coda { grid-template-columns: minmax(0, 1fr); } }
.sources { border-top: 1px solid var(--hair); padding: clamp(48px, 6vw, 80px) var(--gutter); }
.sources__inner { width: min(760px, 100%); margin-inline: auto; font: 400 .95rem/1.7 var(--f-body); color: var(--cream-soft); }
.sources__title { margin: 0 0 12px; font: 500 14.4px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.sources a { color: var(--cream); }

/* ═══════════ homepage grammar, carried into the chapters ═══════════ */

/* each year stands on its own backdrop: a grayscale city photo, washed in the year's paint, under halftone */
.year { --era: var(--mustard); }
.year__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.year__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .26; }
.year__tint { position: absolute; inset: 0; background: var(--era); mix-blend-mode: color; opacity: .8; }
.year__bg .halftone { opacity: .35; }
.year__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0b0a08 0%, rgb(11 10 8 / .5) 16%, rgb(11 10 8 / .72) 60%, #0b0a08 100%); }
/* the giant year behind it, drifting as you read */
.year__numeral { position: absolute; z-index: -1; right: -3vw; top: clamp(40px, 6vw, 100px); margin: 0; font: 800 clamp(8.06rem, 18.6vw, 18.6rem)/1 var(--f-label); color: rgb(241 233 216 / .06); white-space: nowrap; pointer-events: none; user-select: none; filter: url(#spray); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .year__numeral { animation: numeral-drift linear both; animation-timeline: view(); }
    @keyframes numeral-drift { from { transform: translateY(18%); } to { transform: translateY(-22%); } }
  }
}
/* heading row: the year on the line, its colour-splash art beside it */
.year__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.year__head .year__n { margin: 0; }
.year__art { position: relative; flex: 0 0 auto; width: clamp(11rem, 17vw, 15.5rem); margin: 0 clamp(0px, 4vw, 64px) 0 0; transform: rotate(-2deg); pointer-events: none; }
.year__art::before { opacity: .72; inset: -10% -14%; background: var(--w); }
.year__art .art__photo { display: block; width: 100%; height: auto; }
.year__art .art__photo--mural { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.2) contrast(1.05); clip-path: polygon(0 2%, 30% 0, 70% 2%, 100% 0, 99% 50%, 100% 98%, 60% 100%, 30% 98%, 0 100%, 1% 50%); }
.year__art .art__icon { display: block; width: 100%; height: auto; fill: none; stroke: var(--cream); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#spray); padding: 10%; box-sizing: border-box; }
.year__art .halftone { opacity: .5; mix-blend-mode: multiply; -webkit-mask: var(--m, none) 0 0 / 100% 100%; mask: var(--m, none) 0 0 / 100% 100%; }
.year__art:not(:has(.art__photo)) .halftone { display: none; }
.year__art .art__tag { position: absolute; left: -12%; bottom: 6%; z-index: 2; --c: var(--cream); --r: -8deg; font-size: clamp(1.5rem, 2.4vw, 2.2rem); text-shadow: 0 2px 0 rgb(0 0 0 / .6), 0 0 18px rgb(0 0 0 / .5); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .year__art { opacity: 0; transform: translateY(24px) rotate(-2deg); transition: opacity .8s var(--ease-out) .15s, transform .8s var(--ease-out) .15s; }
  .js .wrap.is-in .year__art { opacity: 1; transform: rotate(-2deg); }
}
@media (max-width: 700px) {
  .year__head { flex-direction: column; align-items: flex-start; }
  .year__art { width: min(62vw, 15rem); margin: 8px 0 0 12px; }
}

/* paint splats behind the stations, as on the homepage spine */
.stop::after { content: ""; position: absolute; z-index: 1; width: 76px; height: 76px; left: calc(-1 * var(--indent) + var(--line-w) / 2 - 38px); top: calc(var(--dot-top, .22em) + 11px - 38px);
  background: var(--era, var(--line)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M81.8 44.3 Q85.4 49.0 83.4 52.9 Q81.5 56.8 76.8 59.5 Q72.1 62.1 76.6 73.6 Q81.2 85.2 72.1 82.2 Q63.0 79.2 59.4 78.7 Q55.8 78.2 50.5 79.1 Q45.3 80.1 42.6 76.6 Q39.9 73.2 31.2 75.7 Q22.5 78.3 19.2 75.0 Q15.9 71.6 16.8 65.0 Q17.6 58.5 10.3 53.7 Q3.0 49.0 11.9 44.7 Q20.8 40.4 16.2 32.8 Q11.6 25.3 19.9 25.2 Q28.1 25.1 30.7 20.9 Q33.2 16.8 37.9 13.7 Q42.7 10.5 51.1 7.2 Q59.5 4.0 62.7 12.5 Q66.0 21.1 66.9 24.1 Q67.7 27.2 72.6 29.7 Q77.5 32.2 77.9 35.9 Q78.2 39.6 81.8 44.3Z'/%3E%3Ccircle cx='88' cy='30' r='3.6'/%3E%3Ccircle cx='12' cy='70' r='3'/%3E%3Ccircle cx='70' cy='93' r='2.4'/%3E%3Ccircle cx='30' cy='8' r='2.2'/%3E%3Ccircle cx='94' cy='62' r='1.8'/%3E%3Ccircle cx='6' cy='38' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M81.8 44.3 Q85.4 49.0 83.4 52.9 Q81.5 56.8 76.8 59.5 Q72.1 62.1 76.6 73.6 Q81.2 85.2 72.1 82.2 Q63.0 79.2 59.4 78.7 Q55.8 78.2 50.5 79.1 Q45.3 80.1 42.6 76.6 Q39.9 73.2 31.2 75.7 Q22.5 78.3 19.2 75.0 Q15.9 71.6 16.8 65.0 Q17.6 58.5 10.3 53.7 Q3.0 49.0 11.9 44.7 Q20.8 40.4 16.2 32.8 Q11.6 25.3 19.9 25.2 Q28.1 25.1 30.7 20.9 Q33.2 16.8 37.9 13.7 Q42.7 10.5 51.1 7.2 Q59.5 4.0 62.7 12.5 Q66.0 21.1 66.9 24.1 Q67.7 27.2 72.6 29.7 Q77.5 32.2 77.9 35.9 Q78.2 39.6 81.8 44.3Z'/%3E%3Ccircle cx='88' cy='30' r='3.6'/%3E%3Ccircle cx='12' cy='70' r='3'/%3E%3Ccircle cx='70' cy='93' r='2.4'/%3E%3Ccircle cx='30' cy='8' r='2.2'/%3E%3Ccircle cx='94' cy='62' r='1.8'/%3E%3Ccircle cx='6' cy='38' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.year__n { --dot-top: .32em; }
@media (prefers-reduced-motion: no-preference) {
  .js .stop::after { transform: scale(.1) rotate(-30deg); opacity: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1) .25s, opacity .2s .25s; }
  .js .wrap.is-in .stop::after { transform: none; opacity: .9; }
}

/* the quote, pasted on the wall */
.pull { position: relative; margin: 36px 0 10px; max-width: 30rem; transform: rotate(-1.2deg); }
.pull .bill { padding-top: clamp(22px, 2.4vw, 32px); }
.pull .bill::after { content: ""; position: absolute; left: 50%; top: -30px; width: 64px; height: 22px; transform: translateX(-50%) rotate(-4deg); background: rgb(230 220 196 / .85); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.pull blockquote { margin: 0; }
.pull blockquote p { margin: 0; font: 800 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--f-display); color: var(--ink-soft); text-transform: uppercase; }
.pull figcaption { margin-top: 14px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }
.pull figcaption::before { content: ""; display: inline-block; width: 28px; height: 3px; background: var(--red); vertical-align: middle; margin-right: 12px; }
.pull__tag { position: relative; z-index: 3; display: block; width: max-content; margin: 0 0 18px auto; }
.hero .drop-tag { position: relative; display: block; width: max-content; margin: 0 0 clamp(18px, 2vw, 28px) 4px; font-size: clamp(1.3rem, 2vw, 1.8rem); }

/* ───────── the deck: now playing, a cue for every year, the meter, the era player ───────── */
.deck { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px clamp(16px, 2.4vw, 36px);
  padding: 12px var(--gutter); background: rgb(0 0 0 / .92); border-top: 1px solid var(--hair); backdrop-filter: blur(8px);
  transform: translateY(105%); transition: transform .45s var(--ease-out); }
.deck.is-on { transform: none; }
.deck__now { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid rgb(241 233 216 / .35); min-width: 12rem; max-width: 18rem; }
.deck__label { font: 500 12px/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--cream-soft); display: flex; align-items: center; gap: 8px; }
.deck__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); animation: now-blink 2.4s ease-in-out infinite; }
@keyframes now-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.deck__title { font: 500 1rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__rail { position: relative; padding: 0 8px; }
.deck__groove { position: absolute; left: 8px; right: 8px; top: 9px; height: 3px; background: rgb(241 233 216 / .16); }
.deck__progress { height: 100%; width: 0; background: var(--gold); }
.deck__cues { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.deck__cue { display: grid; justify-items: center; gap: 7px; padding: 0 4px; text-decoration: none; color: var(--cream-soft); font: 500 13px/1 var(--f-mono); letter-spacing: .06em; }
.deck__cue::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: #000; border: 2px solid rgb(241 233 216 / .45); transition: background-color .25s, border-color .25s, transform .25s var(--ease-out); }
.deck__cue.is-past::before { background: var(--gold); border-color: var(--gold); }
.deck__cue.is-now { color: var(--cream); }
.deck__cue.is-now::before { background: #fff; border-color: var(--gold-bright); transform: scale(1.35); box-shadow: 0 0 0 3px rgb(236 195 113 / .35); }
.deck__cue:hover { color: var(--gold-bright); }
.deck__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.deck__year { font: 800 1.488rem/1 var(--f-label); letter-spacing: .01em; color: var(--cream); font-variant-numeric: tabular-nums; }
.deck__time { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--cream-soft); font-variant-numeric: tabular-nums; }
.player { position: relative; display: flex; align-items: center; gap: 12px; }
.player[hidden] { display: none; }
.player__embed { width: 300px; height: 80px; border-radius: 12px; overflow: hidden; background: rgb(255 255 255 / .04); }
.player__embed iframe { display: block; }
.player__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: var(--gold); color: #000; border: 0; cursor: pointer; white-space: nowrap;
  font: 500 12.8px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; transition: background-color .16s var(--ease-out), transform .12s; }
.player__btn:hover { background: var(--gold-bright); }
.player__btn:active { transform: translateY(1px); }
.player__btn svg { width: 18px; height: 18px; fill: currentColor; }
.player__btn .i-pause { display: none; }
.player.is-playing .player__btn .i-play { display: none; }
.player.is-playing .player__btn .i-pause { display: block; }
.player.needs-tap .player__btn { animation: tap-pulse 1.6s var(--ease-out) infinite; }
@keyframes tap-pulse { 0% { box-shadow: 0 0 0 0 rgb(236 195 113 / .55); } 100% { box-shadow: 0 0 0 16px rgb(236 195 113 / 0); } }
.player__now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body:has(.deck) .foot { padding-bottom: 130px; }
@media (max-width: 1180px) { .deck__now { min-width: 0; max-width: 12rem; } .player__embed { width: 240px; } }
@media (max-width: 900px) {
  .deck { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "meter now btn" "embed embed embed"; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); row-gap: 0; }
  .deck__rail { display: none; }
  .deck__now { grid-area: now; border: 0; padding: 0; max-width: none; }
  .deck__meter { grid-area: meter; align-items: flex-start; }
  .deck__year { font-size: 1.178rem; }
  .player { display: contents; }
  .player__btn { grid-area: btn; }
  .player__embed { grid-area: embed; width: 100%; height: 0; transition: height .35s var(--ease-out), margin .35s; }
  .player.is-playing .player__embed { height: 80px; margin-top: 8px; }
  body:has(.deck) .foot { padding-bottom: 180px; }
}

/* real photographs: grayscale under the paint, as on the homepage */
.year__art .art__photo--photo { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.1); clip-path: polygon(0 2%, 30% 0, 70% 2%, 100% 0, 99% 50%, 100% 98%, 60% 100%, 30% 98%, 0 100%, 1% 50%); }
.spread__photo--west img { opacity: .4; }
.spread__photo--west::after { background: linear-gradient(90deg, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .7) 55%, rgb(0 0 0 / .45) 100%); }
.spread--line { background: #000; }
.sources__sub { margin: 36px 0 10px; font: 500 12.8px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.sources__note { margin: 0 0 14px; }
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 400 .82rem/1.5 var(--f-body); }
.credits__what { color: var(--cream); }

/* the writers: names in marker on the wall */
.tagwall { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 44px) clamp(28px, 5vw, 72px); }
.tagwall li { font: 400 clamp(2.4rem, 5.6vw, 5rem)/1 var(--f-hand); color: var(--c); transform: rotate(var(--r)); filter: url(#spray); text-shadow: 0 3px 0 rgb(0 0 0 / .55); }
.entry__note { margin: 16px 0 0; padding: 12px 14px; border-left: 0; background: rgb(241 233 216 / .06); font: 400 .9rem/1.5 var(--f-body); color: var(--cream-soft); max-width: 52ch; }
.coda__state--live { color: var(--gold); }
.spread__mural--photo img { filter: grayscale(1) contrast(1.05); }

/* five-stop route maps */
@media (min-width: 861px) { .westline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* oral history, attributed */
.spread__source { margin: 22px 0 0; max-width: 60ch; font: 400 .9rem/1.55 var(--f-body); font-style: italic; color: var(--cream-soft); }
/* the research sources, folded */
.sources__list { margin: 22px 0 0; }
.sources__list summary { cursor: pointer; width: max-content; max-width: 100%; font: 500 12.8px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); padding: 8px 0; }
.sources__list summary:hover { color: var(--gold); }
.sources__list ol { margin: 10px 0 0; padding-left: 1.6em; display: grid; gap: 6px; font: 400 .8rem/1.5 var(--f-body); color: var(--cream-soft); }
.sources__list li::marker { font-family: var(--f-mono); color: var(--cream-soft); }
.sources__list a { color: var(--cream); overflow-wrap: anywhere; }

/* each year's one-line timeline caption, under the heading */
.year__caption { margin: calc(-1 * clamp(18px, 2.4vw, 36px)) 0 clamp(32px, 4vw, 52px); max-width: 52ch; font: 400 clamp(1.05rem, 1.4vw, 1.25rem)/1.5 var(--f-body); color: var(--cream); text-wrap: pretty; }

/* in memory: names and years only */
.memorial { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.memorial li { display: grid; gap: 4px; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--hair); }
.memorial b { font: 800 clamp(1.054rem, 1.612vw, 1.426rem)/1 var(--f-label); letter-spacing: .01em; text-transform: uppercase; color: var(--cream); font-weight: 400; }
.memorial span { font: 500 13px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--cream-soft); }

/* the decade strip: six chapters plus "all decades" */
.chapters__list { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, .7fr); }
.chapters__item--all b { color: var(--gold); }
@media (max-width: 900px) { .chapters__list { grid-template-columns: repeat(7, minmax(9.5rem, 1fr)); } }

/* the index: six decades as sleeves */
.hero--index .hero__title { max-width: 12ch; }
.decades { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.decade a { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; min-height: clamp(360px, 32vw, 460px); padding: clamp(20px, 2vw, 28px); color: var(--cream); text-decoration: none; background: #000; border-top: 8px solid var(--e); }
.decade__photo { position: absolute; inset: 0; z-index: -2; }
.decade__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .55; transition: transform .8s var(--ease-out), opacity .4s; }
.decade__tint { position: absolute; inset: 0; background: var(--e); mix-blend-mode: color; opacity: .75; }
.decade__photo .halftone { opacity: .4; }
.decade a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / .92) 100%); }
.decade__n { position: absolute; top: 10px; right: 14px; font: 800 clamp(2.728rem, 4.34vw, 4.092rem)/1 var(--f-label); color: rgb(241 233 216 / .9); filter: url(#spray); }
.decade__text { display: grid; gap: 8px; }
.decade__title { font: 800 clamp(1.24rem, 1.86vw, 1.736rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; font-weight: 400; }
.decade__years { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); }
.decade__summary { font: 400 .95rem/1.5 var(--f-body); color: var(--cream); max-width: 40ch; }
.decade__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; font: 500 12.8px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.decade__go::after { content: ""; width: 30px; height: 1px; background: currentColor; transition: width .25s var(--ease-out); }
.decade a:hover .decade__photo img, .decade a:focus-visible .decade__photo img { transform: scale(1.04); opacity: .7; }
.decade a:hover .decade__go::after { width: 46px; }
@media (max-width: 1000px) { .decades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .decades { grid-template-columns: minmax(0, 1fr); } .decade a { min-height: 320px; } }

/* sources & credits: one closed dropdown */
.sources__drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.sources__drop > summary::-webkit-details-marker { display: none; }
.sources__drop > summary .sources__title { margin: 0; }
.sources__hint { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.sources__hint::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease-out); }
.sources__drop[open] .sources__hint::after { transform: translateY(2px) rotate(-135deg); }
.sources__drop > summary:hover .sources__title, .sources__drop > summary:hover .sources__hint { color: var(--gold); }
.sources__drop > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sources__drop[open] > summary { margin-bottom: 18px; }
.sources__ol { margin: 10px 0 0; padding-left: 1.6em; display: grid; gap: 6px; font: 400 .8rem/1.5 var(--f-body); color: var(--cream-soft); }
.sources__ol li::marker { font-family: var(--f-mono); color: var(--cream-soft); }
.sources__ol a { color: var(--cream); overflow-wrap: anywhere; }

/* up next: keep scrolling at the bottom and the next decade opens */
.upnext { --p: 0; position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 46svh; padding: 72px var(--gutter) calc(64px + env(safe-area-inset-bottom)); background: #000; border-top: 1px solid var(--hair); color: var(--cream); text-decoration: none; text-align: center; overflow: hidden; isolation: isolate; }
.upnext::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 100%, rgb(236 195 113 / calc(.08 + var(--p) * .3)), transparent 70%); }
.upnext__label { font: 500 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft); }
.upnext__title { font: 800 clamp(1.612rem, 3.72vw, 3.1rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; filter: url(#spray); transform: translateY(calc(var(--p) * -10px)); }
.upnext__bar { width: min(320px, 70vw); height: 4px; background: rgb(241 233 216 / .16); overflow: hidden; }
.upnext__fill { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--gold); }
.upnext__hint { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.upnext__hint::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .upnext__hint::after { animation: upnext-bob 1.6s ease-in-out infinite; } }
@keyframes upnext-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
.upnext:hover .upnext__title, .upnext:focus-visible .upnext__title { color: var(--gold); }
html.is-leaving body { opacity: 0; transition: opacity .4s var(--ease-out); }

/* phones and touch devices: the same page without the GPU-heavy live filters and background blurs */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after { filter: none !important; }
  .nav::after, .deck { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav::after { background: linear-gradient(rgb(11 10 8 / .94) 0%, rgb(11 10 8 / .78) 55%, rgb(11 10 8 / 0) 100%); }
  .wash::before { clip-path: none; background: radial-gradient(closest-side, var(--w, var(--rose)), transparent); opacity: .5; }
}

/* the line pointing to /credits/ under the source list */
.sources__ol + .sources__note { margin-top: 22px; }

/* the deck's "now playing" box keeps one width, so the year dots never shift when the title changes */
.deck__now { width: 16rem; min-width: 0; max-width: none; }
.deck__now .deck__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.deck__meter { width: 6.6rem; }
@media (max-width: 1180px) { .deck__now { width: 12rem; } }
@media (max-width: 760px) { .deck__now, .deck__meter { width: auto; } }

/* the first rap Grammy: the trophy itself, hand-polished in the workshop that makes them (Carol M. Highsmith, LoC) */
.entry--grammy { max-width: 96ch; display: flow-root; }
.grammy__photo { float: right; position: relative; width: min(42%, 340px); margin: 0 0 16px clamp(20px, 3vw, 40px); transform: rotate(1.5deg); box-shadow: 0 16px 28px rgb(0 0 0 / .5); overflow: hidden; }
.grammy__photo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.08); }
.grammy__photo::after { content: ""; position: absolute; inset: 0; background: var(--gold); mix-blend-mode: color; opacity: .55; pointer-events: none; }
.grammy__photo .halftone { opacity: .28; z-index: 1; }
@media (max-width: 640px) { .grammy__photo { float: none; width: 100%; margin: 0 0 18px; } }
.hero--chapter { min-height: 96svh; }
@media (max-width: 760px) { .hero--chapter { min-height: 94svh; } }
.hero--chapter { min-height: 100vh; min-height: 100svh; }
@media (max-width: 760px) { .hero--chapter { min-height: 100svh; } }

/* when Safari holds the music back, point at the Spotify player's own play button (mix.js / chapter.js add .is-held) */
.player__held { display: none; position: absolute; right: 0; bottom: calc(100% + 14px); z-index: 30; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 12px 14px;
  background: var(--gold); color: #000; font: 500 13px/1.4 var(--f-label); letter-spacing: .02em; box-shadow: 0 12px 28px rgb(0 0 0 / .5); }
.player__held::after { content: ""; position: absolute; right: 48px; top: 100%; border: 8px solid transparent; border-top-color: var(--gold); }
.player.is-held .player__held { display: block; }
.player.is-held .player__embed { outline: 2px solid var(--gold); outline-offset: 3px; }

/* music is desktop-only for now (sound.js adds .hhl-nosound on phones and touch screens) */
.hhl-nosound :is(.player, .player__held, .soundask, .soundcue, a.listen, .deck__label) { display: none !important; }
/* without music the deck's record title and running time read as a player that doesn't play:
   touch tablets keep the year dots only; phones (where the dots are already hidden) lose the bar */
.hhl-nosound :is(.deck__now, .deck__time) { display: none !important; }
@media (max-width: 760px) {
  .hhl-nosound .deck { display: none !important; }
  html.hhl-nosound body:has(.deck) .foot { padding-bottom: 0; }
}

/* research credit, above the folded sources box */
.sources__byline { margin: 0 0 18px; font: 500 12.8px/1.5 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-soft); }
.sources__byline strong { font-weight: 500; color: var(--gold-bright); }
.sources__byline a { color: var(--cream); text-underline-offset: 3px; }

/* explicit badge on Listen buttons for songs with no clean version */
.listen__e { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: -2px; border-radius: 2px; background: rgb(241 233 216 / .78); color: #000; font: 800 10px/1 var(--f-label); letter-spacing: 0; }
.listen:hover .listen__e, .listen.is-on .listen__e { background: #000; color: var(--mustard); }

/* ── roll call: more names from the era, from Malika's list (tools/rollcall.py) ── */
.rollcall__group { margin-top: clamp(28px, 3vw, 44px); }
.rollcall__role { margin: 0 0 6px; font: 500 12.5px/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--line, var(--gold)); }
.rollcall__list { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: clamp(28px, 3.4vw, 56px); }
.rc { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 0 16px; border-top: 1px solid var(--hair); }
.rc__name { font: 800 1.02rem/1.25 var(--f-label); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); text-decoration: none; }
a.rc__name { text-decoration: underline; text-decoration-color: rgb(241 233 216 / .35); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.rc__name:hover { color: var(--gold); text-decoration-color: currentColor; }
a.rc__name:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rc__crew { font: 500 11.5px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.rc__tag { padding: 3px 7px 2px; background: var(--gold); color: #000; font: 800 10.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.rc__works { flex-basis: 100%; font: 400 .9rem/1.55 var(--f-body); color: var(--cream-soft); }
.rc .listen { margin-top: 8px; padding: 6px 12px 6px 10px; font-size: 11px; }

/* timeline index: the stop after the 2020s, into Next Generation */
.decades__next { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); margin-top: clamp(14px, 1.6vw, 22px); padding: clamp(20px, 2vw, 28px); background: #0b0a08; border-top: 8px solid var(--gold); color: var(--cream); text-decoration: none; }
.decades__next-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.decades__next-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; display: block; filter: grayscale(1) contrast(1.05); opacity: .85; transition: opacity .25s, transform .5s var(--ease-out); }
.decades__next-photos img:nth-child(1) { transform: rotate(-1.5deg); } .decades__next-photos img:nth-child(3) { transform: rotate(1.2deg); } .decades__next-photos img:nth-child(4) { transform: rotate(-.8deg); }
.decades__next-text { display: grid; gap: 8px; justify-items: start; }
.decades__next-n { font: 800 clamp(2.4rem, 4.6vw, 4rem)/1 var(--f-label); color: rgb(241 233 216 / .9); }
.decades__next-title { font: 800 clamp(1.2rem, 1.8vw, 1.6rem)/1.1 var(--f-label); text-transform: uppercase; color: var(--gold); }
.decades__next-summary { max-width: 42ch; font: 400 1rem/1.55 var(--f-body); color: var(--cream-soft); }
.decades__next:hover .decades__next-photos img, .decades__next:focus-visible .decades__next-photos img { opacity: 1; }
.decades__next:hover .decade__go::after { width: 46px; }
.decades__next:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 700px) { .decades__next { grid-template-columns: minmax(0, 1fr); } }