/* The directory and calendar share a music-poster visual language. */
.channel-site {
  --ink: #f4f1e9;
  --silver: #efede8;
  --muted: #bcb3bb;
  --paper: #080809;
  --panel: #171417;
  --line: #4a4249;
  --accent: #ff2a70;
  --signal: #ffed38;
  color: var(--ink);
  background: var(--paper) url('./images/poster-grain.svg') repeat;
  overflow-x: clip;
}
.channel-site .site-header {
  padding: 18px max(4vw,24px);
  background: #080809f5;
  border-bottom: 1px solid #66535d;
  gap: 16px;
}
.channel-site .wordmark {font-size:1.3rem;letter-spacing:.035em}
.channel-site .mark {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(-7deg);
}
.channel-site .site-header nav {gap:22px;font-size:.875rem}
.channel-site .site-header nav .nav-register {
  min-height:44px;
  padding:9px 16px;
  color:var(--paper);
  background:var(--signal);
  border:1px solid var(--signal);
}
.channel-site .site-header nav .event-register {background:var(--accent);border-color:var(--accent);color:var(--paper)}
.channel-site .site-header nav .nav-register:hover {background:var(--ink);border-color:var(--ink);color:var(--paper)}
.channel-site .opening-stop {color:var(--accent)}
.channel-site .opening-rule {background:var(--signal)}
.poster-home main,.poster-events .calendar-main,.poster-detail main {
  width:calc(100% - clamp(36px,8vw,112px));
  max-width:1360px;
  padding-top:54px;
}

/* Oversized type beside a loose collage, with each face kept in view. */
.poster-home .intro {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  column-gap:0;
  align-items:start;
  padding:0 0 58px;
  margin-bottom:70px;
  border:0;
}
.poster-home .intro::after {
  content:'';
  position:absolute;
  left:-1%;
  bottom:0;
  width:102%;
  height:19px;
  background:var(--ink);
  clip-path:polygon(0 45%,3% 20%,7% 62%,12% 16%,18% 42%,24% 12%,31% 50%,39% 22%,45% 52%,54% 10%,62% 47%,71% 21%,78% 53%,86% 17%,92% 44%,100% 25%,100% 60%,94% 77%,86% 51%,77% 88%,67% 62%,59% 92%,51% 64%,42% 90%,33% 61%,24% 87%,15% 60%,7% 91%,0 70%);
}
.poster-home .intro-copy {position:relative;z-index:5;margin-top:20px;min-width:0}
.poster-home .intro-copy .overline {
  display:inline-block;
  padding:5px 13px;
  background:var(--signal);
  color:var(--paper);
  transform:rotate(-3deg);
  font-size:.8125rem;
  letter-spacing:.06em;
}
.poster-home .intro h1 {
  margin:30px 0 0;
  font-size:clamp(6rem,10.8vw,10.75rem);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.04em;
  max-width:none;
}
.poster-home .title-music,.poster-home .title-channels {display:block;white-space:nowrap;margin:0}
.poster-home .title-music {color:var(--ink)}
.poster-home .title-channels {
  position:relative;
  margin:14px 0 0 22px;
  color:var(--accent);
  font-style:italic;
  transform:rotate(-4deg);
  transform-origin:left center;
  text-shadow:3px 3px 0 var(--paper);
}
.poster-home .title-stop {color:var(--signal)}
.poster-home .intro-note {
  max-width:360px;
  margin:46px 0 0 12px;
  padding:18px 22px;
  color:#171115;
  background:#eee8dd url('./images/poster-grain.svg') repeat;
  border-left:7px solid var(--accent);
  font-size:1.0625rem;
  line-height:1.9;
  transform:rotate(-2deg);
}
.poster-home .intro-links {display:flex;flex-wrap:wrap;gap:20px;margin:32px 0 0 12px;font-size:.875rem;font-weight:700}
.poster-home .intro-links a {min-height:44px;display:inline-flex;align-items:center;gap:12px;border-bottom:2px solid var(--accent)}
.poster-home .intro-links a:hover {color:var(--signal)}
.poster-home .intro-links span {font-size:1.375rem;color:var(--accent)}
.poster-home .cover-art {
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  aspect-ratio:.88;
  height:auto;
  margin:0;
  justify-self:stretch;
  isolation:isolate;
}
.poster-home .cover-art::before {
  content:'';
  position:absolute;
  top:7%;left:-1%;width:103%;height:55%;
  background:var(--accent);
  transform:rotate(-1.5deg);
  clip-path:polygon(0 4%,24% 0,48% 2%,76% 0,100% 3%,98% 96%,77% 100%,50% 98%,23% 100%,0 96%);
}
.poster-home .cover-art::after {
  content:'';
  position:absolute;
  bottom:0;left:43%;width:23%;height:30px;
  background:var(--signal);
  transform:rotate(-14deg);
}
.poster-home .cover-photo {
  position:absolute;
  display:block;
  min-width:0;
  height:auto;
  grid-area:auto;
  grid-row:auto;
  padding:7px;
  border:0;
  background:#eee8dd;
  overflow:hidden;
  clip-path:polygon(1% 1%,20% 0,42% 1%,66% 0,99% 1%,100% 23%,99% 47%,100% 74%,99% 99%,78% 100%,53% 99%,27% 100%,1% 99%,0 71%,1% 42%,0 19%);
}
.poster-home .cover-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.1) saturate(.86)}
.poster-home .cover-band {top:5%;left:-3%;width:103%;aspect-ratio:1.5;transform:rotate(2deg);z-index:1}
.poster-home .cover-solo {top:48%;left:0;width:44%;aspect-ratio:.75;transform:rotate(-7deg);z-index:2}
.poster-home .cover-duo {top:61%;right:-1%;width:46%;aspect-ratio:1;transform:rotate(6deg);z-index:3}
.poster-home .cover-photo figcaption {
  position:absolute;
  bottom:13px;left:13px;
  width:max-content;
  padding:4px 10px;
  color:var(--paper);
  background:var(--signal);
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:.08em;
  transform:rotate(-2deg);
}
.poster-home .cover-duo figcaption {background:var(--accent)}
.poster-home .image-note {grid-column:1/-1;justify-self:stretch;margin-top:45px;text-align:right;font-size:.75rem;color:var(--muted)}

/* Functional sections retain their reading and navigation order. */
.poster-home .premiere-panel {position:relative;padding:30px;background:#111013;border:1px solid #5f505a;border-left:8px solid var(--accent);margin-bottom:64px}
.poster-home .on-air-label {color:var(--signal);font-size:.9375rem;letter-spacing:.15em}
.poster-home .premiere-heading h2 {font-size:1.65rem}
.poster-home .premiere-refresh {border-color:var(--signal);color:var(--signal);background:transparent}
.poster-home .premiere-refresh:hover {background:var(--signal);color:var(--paper)}
.poster-home .directory-heading {border-bottom:3px solid var(--ink);padding-bottom:22px;margin-bottom:34px}
.poster-home .directory-heading .overline {display:inline-block;background:var(--accent);color:var(--paper);padding:2px 11px;transform:rotate(-2deg);margin-bottom:13px;font-size:.875rem}
.poster-home .directory-heading h2 {font-size:clamp(1.875rem,3.5vw,3rem);letter-spacing:-.05em}
.poster-home .channel-group h3 {color:var(--signal);font-size:1.25rem}
.poster-home .channel-row {min-height:78px;background:#eee8dd url('./images/poster-grain.svg') repeat;color:#181217;border:0;border-bottom:1px solid #c2b9be;padding:16px}
.poster-home .channel-name {font-weight:700}
.poster-home .channel-external {border-color:#5e5159;color:#181217;background:transparent;font-weight:700}
.poster-home .channel-external:hover {background:var(--signal);border-color:#181217;color:#181217}
.poster-home .channel-missing {color:#73636d}
.poster-home .kana-link {border-color:#71606a;background:#181417}
.poster-home .kana-link:hover {color:var(--paper);background:var(--signal);border-color:var(--signal)}
.poster-home .registration-link {color:var(--signal);border-color:var(--signal)}
.poster-home .join-strip {position:relative;isolation:isolate;padding:38px 26px;margin-top:0;gap:24px;border:0;color:#171115}
.poster-home .join-strip::before {content:'';position:absolute;inset:0;z-index:-1;background:var(--signal) url('./images/poster-grain.svg') repeat;transform:rotate(-.6deg);clip-path:polygon(0 4%,15% 1%,32% 3%,51% 0,71% 2%,88% 0,100% 3%,100% 96%,83% 99%,65% 97%,44% 100%,25% 97%,9% 100%,0 96%)}
.poster-home .join-strip .overline,.poster-home .join-strip p {color:#342832}
.poster-home .join-strip h2 {font-size:1.65rem;letter-spacing:-.04em}
.poster-home .join-strip .registration-follow {margin-top:18px;padding-top:16px;border-top:1px solid #34283266}
.poster-home .registration-follow a {font-weight:700;text-decoration:underline;text-underline-offset:4px}
.poster-home .join-buttons .join-button {background:var(--paper);border-color:var(--paper);color:var(--ink);min-height:48px}
.poster-home .join-buttons .event-register {background:var(--accent);color:var(--paper);border-color:var(--paper)}
.poster-home .join-buttons .join-button:hover {background:var(--ink);color:var(--paper)}
.poster-home .registration-details {margin-top:20px;margin-bottom:44px}
.channel-site footer {background:#070607;border-top:2px solid var(--accent)}
.poster-home .back-to-top {background:var(--signal);border-color:var(--signal);color:var(--paper);box-shadow:0 3px 18px #0008}
.poster-home .back-to-top:hover {background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* The calendar carries the same poster treatment around its clear date grid. */
.poster-events .calendar-main .page-heading {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding-bottom:38px;border-bottom:3px solid var(--ink)}
.poster-events .calendar-heading-copy .overline {display:inline-block;background:var(--accent);color:var(--paper);padding:3px 12px;transform:rotate(-3deg);font-size:1rem}
.poster-events .page-heading h1 {font-size:clamp(2rem,3.6vw,3.25rem);letter-spacing:-.05em;margin-top:14px}
.poster-events .title-stop {color:var(--accent)}
.poster-events .calendar-artist-photos {position:relative;display:block;height:clamp(280px,27vw,420px)}
.poster-events .calendar-artist-photo {position:absolute;padding:6px;background:var(--ink);border:0;overflow:hidden}
.poster-events .calendar-band-photo {top:8px;left:0;width:88%;height:76%;transform:rotate(2.5deg)}
.poster-events .calendar-solo-photo {right:-3%;bottom:0;width:58%;height:56%;transform:rotate(-6deg);border:5px solid var(--ink)}
.poster-events .calendar-artist-photo img {object-position:center;filter:contrast(1.08)}
.poster-events .calendar-artist-photo figcaption {background:var(--signal);color:var(--paper);left:10px;bottom:10px;font-size:.875rem;font-weight:800}
.poster-events .calendar-art-note {margin-top:22px}
.poster-events .event-registration {border-top:3px solid var(--accent);padding-top:32px}
.poster-events .event-registration .overline {color:var(--signal)}
.poster-events .event-registration strong {color:var(--signal)}
.poster-events .registration-button {background:var(--signal);border-color:var(--signal);color:var(--paper);min-height:52px}
.poster-events .registration-button:hover {background:var(--accent);border-color:var(--accent)}

@media(max-width:1100px) {
  .channel-site .site-header nav {gap:14px;font-size:.8125rem}
  .channel-site .site-header nav .nav-register {padding:9px 11px;font-size:.8125rem}
  .poster-home .intro h1 {font-size:clamp(5rem,10.4vw,7rem)}
  .poster-home .intro-note {font-size:.9375rem;margin-left:0;padding:15px;max-width:310px}
  .poster-home .intro-links {margin-left:0;gap:14px;font-size:.8125rem}
}
@media(max-width:940px) {
  .channel-site .menu-toggle {display:grid}
  .channel-site .site-header nav {display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:5px;padding-top:10px}
  .channel-site .site-header.menu-open nav {display:flex}
  .channel-site .site-header nav a:not(.nav-register) {padding:9px 0}
  .channel-site .site-header nav .nav-register {text-align:center;font-size:.9375rem}
  .poster-home .intro {display:block;margin-bottom:44px;padding-bottom:38px}
  .poster-home .intro-copy {margin-top:0}
  .poster-home .intro h1 {font-size:clamp(5rem,14vw,8rem);margin-top:28px}
  .poster-home .intro-note {max-width:400px;margin-top:32px}
  .poster-home .cover-art {margin-top:40px;aspect-ratio:1.02}
  .poster-home .cover-band {width:94%;left:0;top:3%}
  .poster-home .cover-art::before {width:94%;left:2%;top:5%;height:59%}
  .poster-home .cover-solo {width:38%;left:4%;top:48%}
  .poster-home .cover-duo {width:40%;right:2%;top:57%}
  .poster-home .image-note {margin-top:35px}
  .poster-home .join-strip {display:block;padding:30px 22px}
  .poster-home .join-buttons {margin-top:22px}
  .poster-events .calendar-main .page-heading {gap:24px}
}
@media(max-width:600px) {
  .channel-site .site-header {padding:16px 18px;min-height:78px}
  .poster-home main,.poster-events .calendar-main,.poster-detail main {width:calc(100% - 36px);padding-top:30px}
  .poster-home .intro h1 {font-size:clamp(4.375rem,17.5vw,6rem);line-height:.88}
  .poster-home .title-channels {margin-left:18px;margin-top:9px}
  .poster-home .intro-note {max-width:94%;font-size:.9375rem;margin-top:28px;margin-left:5px;padding:16px;border-left-width:5px}
  .poster-home .intro-note br {display:none}
  .poster-home .intro-links {gap:20px;font-size:.8125rem;margin-top:25px}
  .poster-home .cover-art {margin-top:30px;aspect-ratio:.83}
  .poster-home .cover-band {width:104%;left:-2%;top:3%}
  .poster-home .cover-art::before {width:103%;left:0;top:5%;height:55%}
  .poster-home .cover-solo {width:43%;left:1%;top:47%}
  .poster-home .cover-duo {width:45%;right:0;top:60%}
  .poster-home .cover-photo {padding:5px}
  .poster-home .cover-photo figcaption {font-size:.8125rem;padding:3px 7px;left:8px;bottom:9px;letter-spacing:.04em}
  .poster-home .image-note {margin-top:32px;text-align:left;line-height:1.7}
  .poster-home .premiere-panel {padding:22px 18px;margin-bottom:42px;border-left-width:5px}
  .poster-home .premiere-heading h2 {font-size:1.1875rem}
  .poster-home .on-air-label {font-size:.75rem}
  .poster-home .directory-heading {margin-bottom:25px;padding-bottom:18px}
  .poster-home .directory-heading h2 {font-size:1.875rem}
  .poster-home .channel-row {padding:13px 10px;min-height:70px}
  .poster-home .join-strip h2 {font-size:1.375rem}
  .poster-home .join-strip p {font-size:.9375rem}
  .poster-home .join-buttons .join-button {font-size:.9375rem}
  .poster-events .calendar-main .page-heading {display:block;padding-bottom:28px}
  .poster-events .page-heading h1 {font-size:clamp(1.75rem,7.5vw,2.5rem)}
  .poster-events .calendar-heading-art {margin-top:25px}
  .poster-events .calendar-artist-photos {height:clamp(245px,63vw,360px)}
  .poster-events .calendar-art-note {margin-top:20px}
}