/* Shared pieces for the smaller interior pages: Partners, Impact, Blog, Next Generation.
   Everything sits on the house style in site.css (wall, bills, stops, the line); this file only adds what those pages need. */

/* ── an honest "not yet" notice, pasted on the wall like the events bill ── */
.notice { max-width: 640px; }
.notice__title { margin: 0 0 8px; font: 800 clamp(1.3rem, 2vw, 1.7rem)/1.15 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--ink-soft); }
.notice__body { margin: 0 0 18px; font: 400 1rem/1.6 var(--f-body); color: var(--ink-mid); }

/* ── ways in: three doors, each a short note and one link ── */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.way { position: relative; padding: 26px 24px 24px; background: #0d0c0b; border-top: 4px solid var(--w, var(--gold)); }
.way__title { margin: 0 0 10px; font: 800 1.1rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); }
.way p { margin: 0 0 18px; font: 400 .95rem/1.6 var(--f-body); color: var(--cream-soft); }
@media (max-width: 900px) { .ways { grid-template-columns: minmax(0, 1fr); } }

/* ── numbers that are true today ── */
.tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.tally li { padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 26px); background: var(--black); }
.tally__n { display: block; font: 800 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--f-label); color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tally__what { display: block; margin-top: 10px; font: 500 12.5px/1.4 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.tally__note { display: block; margin-top: 8px; font: 400 .88rem/1.5 var(--f-body); color: var(--cream-soft); }
@media (max-width: 1000px) { .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tally { grid-template-columns: minmax(0, 1fr); } }

/* ── blog: a list of posts, then a readable post ── */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.post-card { border-bottom: 1px solid var(--hair); }
.post-card a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 26px 0; color: inherit; text-decoration: none; }
.post-card time { font: 500 12.5px/1.4 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.post-card__title { margin: 0; font: 800 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--f-label); text-transform: uppercase; color: var(--cream); transition: color .16s var(--ease-out); }
.post-card__dek { grid-column: 2; margin: 0; font: 400 1rem/1.6 var(--f-body); color: var(--cream-soft); }
.post-card__go { grid-row: 1; grid-column: 3; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.post-card a:hover .post-card__title { color: var(--gold); }
.post-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 700px) {
  .post-card a { grid-template-columns: minmax(0, 1fr); }
  .post-card__dek, .post-card__go { grid-column: 1; grid-row: auto; }
}
.post { width: min(720px, 100%); margin-inline: auto; }
.post__meta { margin: 0 0 28px; font: 500 12.5px/1.4 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.post p { margin: 0 0 1.15em; font: 400 1.08rem/1.8 var(--f-body); color: var(--cream); }
.post h2 { margin: 1.8em 0 .6em; font: 800 1.3rem/1.2 var(--f-label); text-transform: uppercase; color: var(--cream); }
.post a { color: var(--gold); text-underline-offset: 3px; }
.post__back { display: inline-block; margin-top: 18px; }

/* ── next generation: a vertical page on the chapter shell, one tall section per artist (tools/build_pages.py) ── */
/* spacing lives on the wrap, not the section, so the line (.wrap::before) runs unbroken from one artist to the next */
.ng-artist > .wrap { padding-bottom: clamp(40px, 6vw, 96px); }
.ng-artist__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ng-artist__text { padding-top: clamp(8px, 2vw, 32px); }
.ng-artist__stop { max-width: none; margin-bottom: 14px; }
.ng-artist__name { font: 400 clamp(2.2rem, 4.6vw, 4.2rem)/.95 var(--f-hand); text-transform: none; letter-spacing: 0; color: var(--cream); white-space: nowrap; }
.ng-artist__stop { --dot-top: .3em; }
.ng-artist__aka { margin: 0 0 26px; font: 500 12.5px/1.4 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft); }
.ng-artist__aka::before { content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 12px; vertical-align: middle; background: var(--era); }
.ng-artist__text .prose { max-width: 58ch; }
.ng-artist__song { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.ng-artist__song .listen { margin-top: 0; }
.ng-artist__now { display: grid; gap: 6px; margin: 0; }
.ng-artist__label { font: 500 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-soft); }
.ng-artist__now cite { font: 800 1.15rem/1.15 var(--f-label); font-style: normal; text-transform: uppercase; color: var(--cream); }
.ng-artist__photo { position: sticky; top: calc(var(--nav-h) + 28px); margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; box-shadow: 0 26px 44px rgb(0 0 0 / .55); transform: rotate(var(--r, -1deg)); }
.ng-artist__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; filter: grayscale(1) contrast(1.08); }
.ng-artist__photo::after { content: ""; position: absolute; inset: 0; background: var(--era); mix-blend-mode: color; opacity: .4; pointer-events: none; }
.ng-artist__photo .halftone { opacity: .3; z-index: 1; }
.ng-artist__photo .crew__sil { position: absolute; inset: 18% 14% 0; width: 72%; height: 82%; fill: #2b2b2b; }
.ng-artist__n { top: auto; bottom: clamp(20px, 4vw, 60px); }
/* phones: no on-page music (see sound.js), so the song opens in Spotify instead */
.out.out--nosound { display: none; }
.hhl-nosound .out.out--nosound { display: inline-flex; }
@media (max-width: 900px) {
  .ng-artist__wrap { grid-template-columns: minmax(0, 1fr); }
  .ng-artist__photo { position: relative; top: auto; order: -1; width: min(420px, 100%); }
}

/* Listen-out links: open the song on Spotify in a new tab. Not .listen, so phones keep them (the no-sound rules hide a.listen) */
.out { display: inline-flex; align-items: center; gap: 10px; 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; }
.out::before { content: ""; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.out:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.out:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.out__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); }
.out:hover .out__e { background: #000; color: var(--gold); }