/* Plum base — bold colour blocks, greens dropped for amaranth and slate. */
:root{
  --soil: #513658;
  --soil-2: #63446b;
  --paper: #faf3e8;
  --muted: rgba(250,243,232,0.80);
  --line: rgba(250,243,232,0.20);
  --line-strong: rgba(250,243,232,0.34);
  --marigold: #f89b78;
  --marigold-bright: #ffc7a4;
  --sky: #ffc7a4;
  --sky-deep: #ffc7a4;
  --leaf: #ffc7a4;
  --leaf-bright: #ffc7a4;
  --coral: #ffc7a4;

  --amaranth:   #76304a;
  --slate-deep: #415764;
  --slate-lite: #a3bac3;
  --peach:      #ffc7a4;
  --salmon:     #f89b78;
  --ink:        #3f3341;
  --plum-deep:  #54355c;
}
:root{ --nav-bg: #513658; }
.nav{ background: var(--nav-bg); }
/* Holly's critters are flat silhouettes, so they need the opposite value of
   whatever band they're standing on or they vanish into it. */
/* Holly's characters carry real line work — faces, instruments, hands. A
   brightness(0) silhouette threw all of it away and left flat white shapes.
   Inverting the artwork keeps every internal detail and still reads on a dark
   ground; on a light one the drawings are used exactly as she made them. */
:root{
  --critter-light: invert(1);
  --critter-dark:  none;
  --critter-fill:  var(--critter-light);
}
.critter img, .critter-party img{ filter: var(--critter-fill); }
/* peach band — a white silhouette disappears into it */
#support-us{ --critter-fill: var(--critter-dark); }

/* Full-bleed sections span the viewport, so a critter hung off the section
   edge lands outside it. Offset by the content gutter instead. */
.critter{ --cgut: 0px; }
#shows .critter, #video .critter, #support-us .critter{
  --cgut: max(32px, calc((100vw - 1180px) / 2 + 32px));
}
/* Headings are much larger than they were, so the critters sit clear of the
   text column now and only lean into it. */
.critter-cat{       left:  calc(var(--cgut) - 126px); }
.critter-rabbit{    left:  calc(var(--cgut) - 136px); }
.critter-frog{      left:  calc(var(--cgut) - 114px); }
.critter-devilgoat{ right: calc(var(--cgut) - 131px); }
.critter-goat{      right: calc(var(--cgut) - 118px); }
.cta-btn{ color: var(--ink); }
.cta-btn:hover{ background: var(--peach); color: var(--ink); }

/* The hairline after each heading was doing nothing but filling space. */
.section-rule{ display: none; }

/* Headings carry the page now, so they get real size and tighter tracking. */
.section-title{
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.section-head{ margin-bottom: 44px; }
.breakdown-title{
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* Full-bleed colour bands. */
#shows, #video, #support-us{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-bottom: none;
}
#shows{ background: var(--amaranth); }
#video{ background: var(--slate-deep); }
#support-us{ background: var(--peach); }

#latest .section-title{ color: var(--peach); }
#shows .section-title{ color: var(--peach); }
#music .section-title{ color: var(--salmon); }
#video .section-title{ color: var(--peach); }
#support-us .section-title{ color: var(--ink); }
#support-us, #support-us .welcome-block p{ color: var(--ink); }
#support-us .cta-btn{ background: var(--amaranth); color: var(--paper); }
#support-us .cta-btn:hover{ background: var(--ink); color: var(--paper); }

/* Shows and releases set larger, so the dates read at a glance. */
.up-name{ color: var(--paper); font-size: 1.5rem; }
.up-date{ font-size: 0.92rem; color: var(--peach); }
.upcoming-list li{ padding: 26px 0; }
.latest-copy h3{ color: var(--peach); font-size: clamp(1.8rem,3.4vw,2.5rem); }
.track-name{ color: var(--peach); font-size: 1.55rem; }
.track-row{ padding: 24px 0; }

/* Body copy reads warmer than the near-white it was. */
.latest-copy p, .release-blurb, .welcome-block p{ color: #efd9cb; }

/* --- Elf Rave release feature --------------------------------------- */
/* Its own full-width band. Every colour in it is a token so a variant can
   repaint the whole band — including flipping it light — in one place. */
.newrelease{
  --nr-bg:     #2e4a63;
  --nr-accent: #ffc7a4;   /* headings, dates, button */
  --nr-text:   #ffffff;
  --nr-body:   #e4ddd2;
  --nr-chip-bg:#ffc7a4;
  --nr-chip-fg:#2e4a63;
  --nr-rule:   rgba(255,255,255,0.22);
  --nr-quiet:  rgba(255,255,255,0.75);

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px calc(50vw - 50%) 60px;
  background: var(--nr-bg);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.46fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 72px;
}
.release-art img{
  width: 100%; display: block;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}
.release-kicker{
  display: inline-block;
  font-family: var(--body);
  font-size: 0.74rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--nr-chip-fg); background: var(--nr-chip-bg);
  padding: 7px 14px; border-radius: 100px; font-weight: 700;
  margin-bottom: 18px;
}
.release-title{
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 0.92; letter-spacing: -0.025em;
  margin: 0 0 14px; color: var(--nr-accent);
}
.release-date{
  font-size: 1.05rem; color: var(--nr-text); margin: 0 0 20px;
}
.release-date strong{ color: var(--nr-accent); }
.release-blurb{ color: var(--nr-body) !important; font-size: 1rem; line-height: 1.62; margin: 0 0 26px; }
.newrelease .cta-btn{ background: var(--nr-accent); color: var(--nr-chip-fg); }
.newrelease .cta-btn:hover{ background: var(--nr-text); color: var(--nr-chip-fg); }

.teaser-frame{
  aspect-ratio: 9/16; width: 100%;
  border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,0.26);
  border: 1px solid var(--nr-rule);
}
.teaser-frame iframe{ width:100%; height:100%; border:0; display:block; }
.teaser-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-family: var(--body); font-size:0.85rem;
  color: var(--nr-quiet); line-height:1.5;
}
.teaser-placeholder span{ font-size:0.74rem; opacity:0.72; }
.teaser-cap{
  font-family: var(--body); font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--nr-quiet);
  margin:12px 0 0; text-align:center;
}
@media (max-width: 1040px){
  .newrelease{ grid-template-columns: 1fr 1fr; }
  .release-teaser{ grid-column: 1 / -1; max-width: 260px; }
}
@media (max-width: 720px){
  .newrelease{ grid-template-columns: 1fr; gap: 30px; }
  .release-teaser{ max-width: 230px; margin: 0 auto; }
}

/* --- hand lettering + sprites ---------------------------------------- */
.newrelease{ position: relative; padding-bottom: 136px; overflow: hidden; }
.release-lettering{
  display:block; width: min(330px, 76%); height:auto;
  margin: 0 0 18px; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.32));
}
/* A line of dancers along the bottom edge of the band. Individual sprites
   rather than the group image, so their size is controllable and they do not
   sit on top of the copy. */
.release-dancers{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(10px, 3.2vw, 54px);
  pointer-events:none; line-height:0;
}
.release-dancers img{ height:118px; width:auto; display:block;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,0.30)); }
.release-dancers img:nth-child(2){ height:132px; }
.release-dancers img:nth-child(4){ height:106px; }
.release-dancers img:nth-child(5){ height:124px; }
@media (max-width: 860px){
  .newrelease{ padding-bottom: 104px; }
  .release-dancers img{ height:86px; }
  .release-dancers img:nth-child(2){ height:96px; }
  .release-dancers img:nth-child(4){ height:78px; }
  .release-dancers img:nth-child(5){ height:90px; }
}
@media (max-width: 560px){
  .release-dancers img:nth-child(n+4){ display:none; }
  .release-lettering{ width: min(250px, 72%); }
}