/* ---------------------------------------------------------------------------
   Press kit — the same band language as the home page.
   blue · maroon (stats) · near-black (photos) · peach (booking) · green foot
   ------------------------------------------------------------------------- */

/* Full-bleed bands, same technique as the home page. */
#stats, #photos{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-bottom: none;
}
#stats{ background: #76304a; }
#photos{ background: #141d26; }

/* The stat cards took their fill from the page, which left them page-blue on
   the maroon band. They read as recessed panels instead. */
#stats .stat-card{
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
}
#stats .stat-num{ color: #eab634; }
#stats .bar-fill{ background: #eab634; }
#stats .bar-track{ background: rgba(0,0,0,0.26); }
#stats .reach-note,
#stats .section-sub,
#stats .bar-row-top{ color: rgba(250,243,232,0.86); }
#stats .tc-thumb{ background: rgba(0,0,0,0.26); }

#photos .section-sub{ color: rgba(250,243,232,0.82); }
#photos figcaption{ color: rgba(250,243,232,0.76); }

/* Booking is the page's call to action, so it takes the peach the home page
   gives Support Us. */
.booking{
  background: #ffc7a4;
  --critter-fill: var(--critter-dark);
}
.booking h2{
  font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.012em;
  color: #5e2439;
}
.booking .contact-card{ background: rgba(94,36,57,0.09); border-radius: 12px; }
.booking .contact-label{ color: #5e2439; }
.booking .contact-desc{ color: rgba(63,51,65,0.82); }
.booking .cta-btn{ background: #5e2439; color: #faf3e8; }
.booking .cta-btn:hover{ background: #3f3341; color: #faf3e8; }
.booking .cta-btn-alt{ background: transparent; color: #5e2439; box-shadow: inset 0 0 0 2px #5e2439; }
.booking .cta-btn-alt:hover{ background: #5e2439; color: #faf3e8; }

/* The press-kit label sits above the name as a quiet line, not a badge. */
.page-header .section-num{
  font-family: var(--body);
  letter-spacing: 0.18em; font-size: 0.72rem;
  color: rgba(250,243,232,0.66);
}
.page-header h1{
  font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.015em;
  color: #eab634;
}

/* ---- top content strip ------------------------------------------------- */
.top-content{ margin-top: 40px; }
.tc-date{
  font-family: var(--body); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(250,243,232,0.78); margin-top: 4px;
}
#stats .stat-delta{ color: #eab634; }
#stats .breakdown-title{ color: rgba(250,243,232,0.9); }
#stats .tc-views{ color: rgba(250,243,232,0.9); }

/* The top-content tiles had empty placeholder thumbnails where the Reel
   stills would go. Without images they read as unfinished, so the figure
   carries the tile instead. */
#stats .top-content-strip{ gap: 14px; flex-wrap: wrap; overflow: visible; }
#stats .tc-item{
  flex: 1 1 160px; min-width: 0;
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
  padding: 18px 18px 16px;
}
#stats .tc-views{
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 1.32rem; letter-spacing: -0.01em;
  color: #eab634;
}


/* ---- the top of the page is green, same as Join & Shop ----------------- */
:root{ --banner-fade: #1b4440; }
body{ background: #1b4440; }
.site-banner{ background: #1b4440; }
#bio{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #1b4440;
}
#bio .section-title{ color: #eab634; }

/* ---- booking cards on a narrow phone ------------------------------------
   The email is one unbreakable token, and a grid item will not shrink below
   its content by default, so the card forced itself 375px wide inside a
   276px page and got clipped. */
.booking .contact-grid > *{ min-width: 0; }
.booking .cta-btn{
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
@media (max-width: 430px){
  .booking .cta-btn{ font-size: 0.86rem; padding-left: 18px; padding-right: 18px; }
}