/* Parade page.
   Aubergine and Pride colour, matching the OG cards and the showcase. The page
   is mostly a frame around live data, so the layout stays quiet and lets the
   photographs and the honorees carry it. */
.pcc-parade {
  /* display:block is load-bearing. The theme sets `main { display:flex }`, and
     this file only declared custom properties — so nothing of ours overrode it
     and every section became a flex column laid out side by side, squeezing the
     hero to a third of the viewport. */
  display: block;
  --pcc-ink:#1e293b; --pcc-purple:#732982; --pcc-aubergine:#2b0d38;
}
.pcc-parade-wrap { max-width:1440px; margin:0 auto; padding:0 24px; }
.pcc-parade-h2 { font-size:1.7rem; font-weight:800; margin:0 0 22px; color:var(--pcc-ink); }
.pcc-parade-h2::after {
  content:""; display:block; width:54px; height:4px; margin-top:12px; border-radius:999px;
  background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
}

/* ---------- Hero ---------- */
.pcc-parade-hero { position:relative; overflow:hidden; background:var(--pcc-aubergine); color:#fff;
  min-height:min(78vh,660px); display:flex; align-items:center;
  /* The poster is set inline from the template; these govern how it sits. */
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* Hidden until the player reports it is actually playing — otherwise YouTube's
   play overlay flashes over the hero on every load. If it never plays the
   poster stays, which is a better hero than a dead play button. */
.pcc-parade-hero-video { position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .9s ease; }
.pcc-parade-hero.is-video-playing .pcc-parade-hero-video { opacity:1; }
.pcc-parade-hero-video iframe {
  position:absolute; top:50%; left:50%;
  /* Cover the box without letterboxing: 16:9 scaled from whichever axis is
     short. A plain width/height:100% would pillarbox on tall screens. */
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh;
  transform:translate(-50%,-50%); border:0;
}
.pcc-parade-hero-scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,8,36,.72) 0%, rgba(28,8,36,.55) 45%, rgba(28,8,36,.85) 100%); }
.pcc-parade-hero-inner { position:relative; z-index:1; width:100%; max-width:1440px; margin:0 auto;
  padding:72px 24px; text-align:center; }
.pcc-parade-countdown { display:inline-block; margin:0 0 14px; padding:6px 14px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  font-size:.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.pcc-parade-title { margin:0 0 12px; font-size:clamp(2.2rem,6vw,4rem); font-weight:900; line-height:1.05; color:#fff; }
.pcc-parade-when { margin:0 0 6px; font-size:1.05rem; color:rgba(255,255,255,.88); }
/* Where and admission, a step quieter than the date above it. */
.pcc-parade-where { margin:0 0 26px; font-size:.95rem; color:rgba(255,255,255,.75); }
.pcc-parade-hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pcc-parade-cta-note { margin:14px 0 0; font-size:.85rem; color:rgba(255,255,255,.72); }
.pcc-parade-presented { margin:26px 0 0; font-size:.72rem; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.62); display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; }
.pcc-parade-presented strong { color:#fff; }
/* The sponsor mark sits on a dark hero, so it is capped by HEIGHT rather than
   width — logos vary wildly in aspect and a width cap makes a wide wordmark
   tiny next to a square one. */
.pcc-parade-sponsor-logo { height:34px; width:auto; max-width:min(240px,60vw); display:block; }

.pcc-parade-btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 26px;
  border-radius:999px; font-weight:800; text-decoration:none !important; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.pcc-parade-btn--primary { background:var(--pcc-purple); color:#fff !important; }
.pcc-parade-btn--primary:hover { background:#5f2169; transform:translateY(-2px); box-shadow:0 10px 24px rgba(115,41,130,.35); }
.pcc-parade-btn--ghost { background:transparent; color:#fff !important; border:2px solid rgba(255,255,255,.55); }
.pcc-parade-btn--ghost:hover { border-color:#fff; transform:translateY(-2px); }

/* ---------- At a glance ---------- */
.pcc-parade-facts { background:#faf5fb; border-bottom:1px solid #eee0f0; padding:26px 0; }
.pcc-parade-facts ul.pcc-parade-fact-list { display:flex !important; flex-wrap:wrap; gap:18px 46px;
  justify-content:center; list-style:none !important; margin:0 !important; padding:0 !important; }
.pcc-parade-facts ul.pcc-parade-fact-list > li { display:flex !important; flex-direction:column;
  align-items:center; margin:0 !important; padding:0 !important; list-style:none !important; }
.pcc-parade-fact-value { font-size:1.45rem; font-weight:800; color:var(--pcc-ink); line-height:1.1;
  text-align:center; }
/* The location is a phrase, not a number, so it must not sit at the same size
   as "4:30 PM" and stretch the strip. */
.pcc-parade-fact-list li:last-child .pcc-parade-fact-value { font-size:1rem; max-width:16ch; }
.pcc-parade-fact-label { font-size:.72rem; letter-spacing:.9px; text-transform:uppercase; color:#6b7280; margin-top:4px; }

/* ---------- Story + gallery ---------- */
.pcc-parade-story { padding:52px 0; }
.pcc-parade-story-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:56px; align-items:start; }
/* The column got wider; the LINE does not. Past roughly 75 characters the eye
   loses its place returning to the next line, so the measure is capped even
   though the column around it grew. */
.pcc-parade-prose { font-size:1.02rem; line-height:1.75; color:var(--pcc-ink); max-width:72ch; }
.pcc-parade-prose h2 { font-size:1.45rem; font-weight:800; margin:34px 0 14px; }
.pcc-parade-prose h3 { font-size:1.15rem; font-weight:800; margin:26px 0 10px; }
.pcc-parade-prose img { max-width:100%; height:auto; border-radius:14px; }

.pcc-parade-gallery { position:sticky; top:116px; }
.pcc-parade-gallery-title { font-size:.76rem; letter-spacing:1.1px; text-transform:uppercase;
  color:#6b7280; margin:0 0 12px; font-weight:800; }
.pcc-parade-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.pcc-parade-photo-link { display:block; border-radius:12px; overflow:hidden; line-height:0;
  transition:transform .2s ease, box-shadow .2s ease; }
.pcc-parade-photo-link:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.18); }
.pcc-parade-gallery img { width:100%; height:130px; object-fit:cover; display:block;
  /* Faces sit high in a crowd shot; a centre crop takes the heads off. */
  object-position:50% 35%; }
.pcc-parade-gallery-note { margin:12px 0 0; font-size:.76rem; color:#6b7280; line-height:1.5; }

/* ---------- Grand Marshals ---------- */
.pcc-parade-marshals { background:#faf5fb; padding:52px 0; }
.pcc-parade-marshals ul.pcc-parade-marshal-list { display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
  list-style:none !important; margin:0 !important; padding:0 !important; }
.pcc-parade-marshals ul.pcc-parade-marshal-list > li { display:block !important; margin:0 !important;
  padding:0 !important; list-style:none !important; width:auto !important; }
.pcc-parade-marshal-link { display:flex; flex-direction:column; gap:12px; height:100%; padding:14px;
  border-radius:16px; background:#fff; border:1px solid #efe3f2; color:var(--pcc-ink);
  text-decoration:none !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.pcc-parade-marshal-link:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(115,41,130,.16); border-color:#d9b6e2; }
.pcc-parade-marshal-media img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 25%;
  border-radius:11px; display:block; }
.pcc-parade-marshal-name { display:block; font-weight:800; line-height:1.25; }
.pcc-parade-marshal-honor { display:block; font-size:.76rem; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:#6b7280; margin-top:3px; }
.pcc-parade-more { margin:22px 0 0; }
.pcc-parade-more a { color:var(--pcc-purple); font-weight:700; }

/* GLightbox caption, set as a badge rather than a line of prose — it is a
   label naming who marched, not a description of the picture. */
/* GLightbox ships `.gslide-description { background:#fff }` and renders that
   container whether or not a slide has a caption — which is the white bar under
   photographs that carry no tags. !important because the CDN stylesheet is out
   of our control and may load after this one. */
.glightbox-container .gslide-description {
  background:transparent !important;
  box-shadow:none !important;
}
.glightbox-container .gdesc-inner {
  padding:14px 0 4px;
  text-align:center;
}
/* No caption: collapse it rather than holding empty space under the image. */
.glightbox-container .gslide-desc:empty { display:none; }
.glightbox-container .gdesc-inner:not(:has(.gslide-desc:not(:empty))) { padding:0; }
.glightbox-container .gslide-desc {
  display:inline-block;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.3px;
  line-height:1.4;
}

/* ---------- Why we march ---------- */
/* Set apart from the rest of the page on purpose: this is the one section that
   is not about logistics, and it should not read as another block of copy
   between the honorees and the line-up. */
.pcc-parade-why { background:var(--pcc-aubergine); color:#fff; padding:60px 0; position:relative;
  overflow:hidden; isolation:isolate; }
.pcc-parade-why::before {
  content:""; position:absolute; left:0; right:0; top:0; height:5px; z-index:2;
  background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
}
/* Archive photograph, desaturated so it reads as the past rather than as
   another parade picture competing with the gallery above. */
.pcc-parade-why-photo {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.06);
  opacity:.22;
}
/* The scrim is what keeps the text legible: the photograph underneath can be a
   bright noon shot or a dark one, and body copy cannot depend on which. */
.pcc-parade-why-scrim {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(43,13,56,.94) 0%, rgba(43,13,56,.80) 55%, rgba(43,13,56,.62) 100%);
}

/* Heading | prose across the top, links spanning the full width beneath. */
.pcc-parade-why-inner {
  /* Above the photograph and its scrim. */
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.6fr);
  grid-template-areas:"head text" "links text";
  grid-template-rows:auto 1fr;
  gap:0 64px;
  align-items:start;
}
.pcc-parade-why-head { grid-area:head; }
.pcc-parade-why-text { grid-area:text; }

/* Sits above the heading as a standfirst — a fact about when this happens,
   not a second heading competing with the one under it. */
.pcc-parade-why-eyebrow {
  margin:0 0 12px; font-size:.74rem; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.pcc-parade-why-title { margin:0; font-size:2.4rem; font-weight:900; color:#fff; line-height:1.05; }
.pcc-parade-why-title::after {
  content:""; display:block; width:54px; height:4px; margin-top:16px; border-radius:999px;
  background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
}
/* The column is wide; the LINE is not. Long measures are where readers lose
   their place, and this is the one section people actually read through. */
.pcc-parade-why-text p { margin:0 0 18px; font-size:1.08rem; line-height:1.8;
  color:rgba(255,255,255,.86); max-width:64ch; }
.pcc-parade-why-text p:last-child { margin-bottom:0; }

.pcc-parade-why ul.pcc-parade-why-links {
  grid-area:links;
  /* Stacked in the left column now rather than a full-width row: they fill the
     space the heading left behind instead of pushing the band taller. */
  display:grid !important; grid-template-columns:1fr; gap:12px;
  list-style:none !important; margin:32px 0 0 !important; padding:0 !important;
}
.pcc-parade-why ul.pcc-parade-why-links > li {
  margin:0 !important; padding:0 !important; list-style:none !important; width:auto !important;
}
.pcc-parade-why-links a {
  display:flex; flex-direction:column; gap:10px; justify-content:space-between;
  height:100%; padding:20px 22px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff !important; text-decoration:none !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.pcc-parade-why-links a:hover, .pcc-parade-why-links a:focus-visible {
  background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.34); transform:translateY(-2px);
}
.pcc-parade-why-links a:focus-visible { outline:2px solid #c77dff; outline-offset:3px; }

/* Capped by HEIGHT: a wordmark and a square mark have wildly different aspects,
   and a width cap would make one tiny beside the other. The row stays even
   because the cards are a grid, not because the images match. */
/* Mark and title on one line, title wrapping under it when there is no room.
   flex:0 0 auto on the image so a long title squeezes itself rather than the
   logo — the card is a flex column, whose default stretch already distorted
   this mark once. */
.pcc-parade-why-cardhead {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.pcc-parade-why-logo {
  display:block; height:34px; width:auto; max-width:100%;
  flex:0 0 auto; align-self:center;
}
.pcc-parade-why-note { display:block; font-size:.86rem; color:rgba(255,255,255,.66);
  line-height:1.5; }
.pcc-parade-why-label { font-weight:700; font-size:1.02rem; line-height:1.3; }
@media (max-width:900px) {
  .pcc-parade-why-inner {
    grid-template-columns:1fr;
    grid-template-areas:"head" "text" "links";
    grid-template-rows:auto;
    gap:20px;
  }
  .pcc-parade-why ul.pcc-parade-why-links {
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
  .pcc-parade-why-title { font-size:1.9rem; }
  .pcc-parade-why ul.pcc-parade-why-links { margin-top:30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-why-links a { transition:none; }
  .pcc-parade-why-links a:hover { transform:none; }
}

/* ---------- Your hosts ---------- */
.pcc-parade-hosts { padding:52px 0; }
.pcc-parade-hosts-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:44px; align-items:center; }
.pcc-parade-hosts-media img { width:100%; height:auto; display:block; border-radius:18px;
  box-shadow:0 14px 36px rgba(15,23,42,.16); }
.pcc-parade-hosts-note { margin:0 0 26px; color:#4b5563; line-height:1.75; max-width:52ch; font-size:1.02rem; }

/* One card per host: the name, then what they are known for. Set as a list
   rather than a paragraph because these are two separate people with separate
   credits, and running them together buries both. */
.pcc-parade-hosts ul.pcc-parade-host-list {
  display:grid !important; gap:14px; grid-template-columns:1fr;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.pcc-parade-hosts ul.pcc-parade-host-list > li {
  margin:0 !important; padding:16px 18px !important; list-style:none !important;
  border-radius:14px; background:#faf5fb; border:1px solid #efe3f2;
}
.pcc-parade-host-name { display:block; font-size:1.18rem; font-weight:800; color:var(--pcc-ink);
  line-height:1.25; }
.pcc-parade-host-bio { display:block; margin-top:5px; color:#4b5563; line-height:1.6; font-size:.95rem; }

.pcc-parade-hosts-live { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:26px 0 0; }
.pcc-parade-hosts-live-note { font-size:.82rem; letter-spacing:.6px; text-transform:uppercase;
  font-weight:700; color:#6b7280; }
@media (max-width:900px) {
  .pcc-parade-hosts-grid { grid-template-columns:1fr; gap:26px; }
}

/* ---------- Line-up / next / social ---------- */
.pcc-parade-lineup { padding:52px 0; }
.pcc-parade-next { background:var(--pcc-aubergine); color:#fff; padding:52px 0; text-align:center; }
.pcc-parade-next .pcc-parade-h2 { color:#fff; }
.pcc-parade-next .pcc-parade-h2::after { margin-left:auto; margin-right:auto; }
.pcc-parade-next p { margin:0 0 22px; color:rgba(255,255,255,.82); }
.pcc-parade-social { padding:44px 0; }

@media (max-width:900px) {
  .pcc-parade-story-grid { grid-template-columns:1fr; gap:34px; }
  .pcc-parade-gallery { position:static; }
  .pcc-parade-gallery-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-hero-video { display:none; }   /* poster only */
  .pcc-parade-hero.is-video-playing .pcc-parade-hero-video { opacity:0; }
  .pcc-parade-btn, .pcc-parade-photo-link, .pcc-parade-marshal-link { transition:none; }
  .pcc-parade-btn:hover, .pcc-parade-photo-link:hover, a.pcc-parade-marshal-link:hover { transform:none; }
}

/* ── Everyone is invited to march ─────────────────────────────────────────
   Stands in for the roster until entries have line-up positions. */
.pcc-parade-join { padding: 72px 0; }
.pcc-parade-join-grid {
  display: grid;
  /* Closer to even than 1.6/1: the categories list is the taller of the two,
     and starving its column made it a narrow ribbon beside a short paragraph. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 28px;
}
.pcc-parade-join-lede { font-size: 20px; line-height: 1.6; margin: 0 0 20px; }
.pcc-parade-join-stat {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 4px solid #7c3aed;
}
.pcc-parade-join-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
.pcc-parade-join-deadline { font-size: 15px; opacity: .75; }
.pcc-parade-join-note { font-size: 15px; opacity: .7; margin: 0; }

.pcc-parade-join-types {
  background: #f8f7fc;
  border: 1px solid #e6e2f5;
  border-radius: 16px;
  padding: 24px 26px;
}
.pcc-parade-join-h3 { margin: 0 0 14px; font-size: 17px; }
.pcc-parade-join-list {
  /* The theme forces list-style:none and display:block on .post-content ul,
     at a specificity this cannot reach without encoding the theme's markup
     into this file. See the social-icon fight in grand-marshal-showcase. */
  list-style: none !important;
  display: grid !important;
  /* Two columns: eleven categories in one column made the card roughly twice
     the height of the copy beside it. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0 !important;
  padding: 0 !important;
}
.pcc-parade-join-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.45;
}
.pcc-parade-join-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
.pcc-parade-join-types-note { margin: 16px 0 0; font-size: 14px; opacity: .65; }

@media (max-width: 1100px) {
  /* Long category names ("School Org/Student Club/Student Group") need the
     full card width once the card itself narrows. */
  .pcc-parade-join-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .pcc-parade-join { padding: 52px 0; }
  .pcc-parade-join-grid { grid-template-columns: 1fr; gap: 32px; }
  .pcc-parade-join-lede { font-size: 18px; }
}

/* ── The parade of photographs ────────────────────────────────────────────
   Two rows of past-parade photos moving in opposite directions, with one
   empty frame pinned beside them linking to the application. The gap in the
   parade is the call to action.

   Light ground on purpose: "Why we march" and the block-party hand-off are
   both aubergine, and a third dark band here would sandwich the hosts. */
.pcc-parade-march {
  margin: 0;
  padding: 26px 0;
  background: linear-gradient(180deg, #faf9fd 0%, #f4f1f8 100%);
  border-top: 1px solid #ece6f2;
  border-bottom: 1px solid #ece6f2;
  overflow: hidden;
}
.pcc-parade-march-row { overflow: hidden; }
.pcc-parade-march-row + .pcc-parade-march-row { margin-top: 14px; }

.pcc-parade-march-inner {
  display: flex;
  width: max-content;
  will-change: transform;
}
.pcc-parade-march-track {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}

/* Translating by exactly -50% lands the second copy where the first began. */
@keyframes pcc-parade-march-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes pcc-parade-march-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.pcc-parade-march-row--a .pcc-parade-march-inner {
  animation: pcc-parade-march-left 68s linear infinite;
}
.pcc-parade-march-row--b .pcc-parade-march-inner {
  animation: pcc-parade-march-right 84s linear infinite;
}
/* Hovering anywhere holds the whole strip, so a photo can actually be looked
   at. Focus does the same, or a keyboard user could never read one. */
.pcc-parade-march:hover .pcc-parade-march-inner,
.pcc-parade-march:focus-within .pcc-parade-march-inner {
  animation-play-state: paused;
}

.pcc-parade-march-tile {
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  height: 165px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ece6f2;
  box-shadow: 0 6px 18px rgba(43, 13, 56, .10);
}
.pcc-parade-march-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pcc-parade-march-credit {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(20, 6, 27, .62);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(3px);
}

/* The empty frame. Pinned beside the strip, so there is exactly one and it
   never scrolls away. Removed entirely once applications close. */
/* Same footprint as a photo tile: it is an entry in the parade, not a
   control sitting beside it. */
.pcc-parade-march-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 2px dashed var(--pcc-purple);
  box-shadow: none;
  color: var(--pcc-purple) !important;
  text-decoration: none !important;
  text-align: center;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pcc-parade-march-join:hover,
.pcc-parade-march-join:focus-visible {
  background: #faf5fb;
  color: var(--pcc-purple) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(115, 41, 130, .18);
}
.pcc-parade-march-plus { font-size: 32px; font-weight: 300; line-height: 1; }
.pcc-parade-march-join-text { font-size: 15px; font-weight: 800; line-height: 1.25; }
.pcc-parade-march-join-sub { font-size: 12.5px; font-weight: 600; opacity: .72; }

@media (max-width: 860px) {
  .pcc-parade-march { padding: 18px 0; }
  .pcc-parade-march-tile { width: 190px; height: 128px; }
  .pcc-parade-march-plus { font-size: 24px; }
  .pcc-parade-march-join-text { font-size: 13.5px; }
  .pcc-parade-march-join-sub { font-size: 11.5px; }
}

/* Motion off: the rows become ordinary scrollable strips, so every photograph
   is still reachable -- just not moving on its own. */
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-march-inner { animation: none !important; width: auto; }
  .pcc-parade-march-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pcc-parade-march-track:last-child { display: none; }
}

/* ── Block party hand-off: the facts ──────────────────────────────────── */
/* Two classes, because `.pcc-parade-next p` above is (0,1,1) and beats a bare
   (0,1,0) class -- its `margin: 0 0 22px` was overwriting the auto side
   margins and pinning this block to the left. */
.pcc-parade-next .pcc-parade-next-lede {
  font-size: 1.05rem;
  opacity: .88;
  margin: 0 auto 26px;
  max-width: 52ch;
  text-align: center;
}
.pcc-parade-next-facts {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 30px !important;
  padding: 0 !important;
  max-width: 900px;
}
.pcc-parade-next-facts li {
  flex: 1 1 220px;
  max-width: 300px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  text-align: left;
}
.pcc-parade-next-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: 5px;
}
.pcc-parade-next-value { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }

/* ── Instagram ────────────────────────────────────────────────────────────
   Previously the raw shortcode against the previous band with no heading,
   which read as a stray widget bolted to the foot of the page. */
.pcc-parade-social { padding: 68px 0 76px; background: #fff; }
.pcc-parade-social-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.pcc-parade-social-title { margin-bottom: 8px; }
.pcc-parade-social-sub { margin: 0; font-size: 15px; opacity: .7; color: var(--pcc-ink); }
.pcc-parade-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid #e6e2f5;
  background: #faf9fd;
  color: var(--pcc-purple) !important;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.pcc-parade-social-link:hover,
.pcc-parade-social-link:focus-visible {
  border-color: var(--pcc-purple);
  background: #fff;
  color: var(--pcc-purple) !important;
  transform: translateY(-2px);
}
/* The plugin's own grid runs to whatever width it is given and squares off at
   the edges; this frames it so it reads as part of the page. */
.pcc-parade-social-feed { border-radius: 16px; overflow: hidden; }
.pcc-parade-social-feed #sb_instagram { padding-bottom: 0 !important; }

@media (max-width: 640px) {
  .pcc-parade-social { padding: 48px 0 54px; }
  .pcc-parade-social-head { align-items: flex-start; }
  .pcc-parade-next-facts li { flex-basis: 100%; max-width: none; }
}

/* ── The curtain call ─────────────────────────────────────────────────────
   Photographs of performers on stage, dealt like a hand of cards. The row
   fans apart when you point at it and each card straightens as you reach it. */
.pcc-parade-cast-lede {
  margin: 0 auto 18px !important;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  color: rgba(255, 255, 255, .9);
}
.pcc-parade-cast {
  display: flex;
  /* One line, with the "+N" tile riding at the right-hand end of it. */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  /* No scrolling: the cards flex to fit instead. Scrolling a centred row also
     clips the leading cards unreachably -- the overflow at the start of a
     centre-justified flex line cannot be scrolled to. */
  overflow: visible;
  padding: 22px 22px 40px;
  margin: 0 0 26px;
}
.pcc-parade-cast-member {
  position: relative;
  /* Flexible, so the whole line always fits its container whatever the width.
     min-width:0 is required -- a flex item will not shrink below its content
     without it, which is what pushed the row past both edges. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 168px;
  /* Overlap kept to what still leaves the name readable: earlier cards sit on
     top, so this much of each card is covered, and a wider bite was cutting
     "Primadonna Brooks" down to "imadonna Brooks". */
  margin: 0 0 0 -22px;
  text-decoration: none !important;
  color: #fff !important;
  padding: 4px;
  border-radius: 16px;
  overflow: hidden;
  /* The flag, as the card's edge rather than a stripe stuck on top. */
  background: conic-gradient(from 210deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #e40303);
  box-shadow: 0 12px 30px rgba(8, 2, 12, .45);
  transform: rotate(var(--pcc-tilt, 0deg));
  z-index: calc(40 - var(--pcc-i, 0));
  transition: transform .26s cubic-bezier(.22, 1, .36, 1),
              box-shadow .26s ease;
}
.pcc-parade-cast-member img {
  width: 100%;
  /* Ratio rather than a fixed height, so the picture scales with the card
     as it flexes instead of the crop changing. */
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  /* Crop from above centre. `cover` defaults to 50% 50%, which takes the
     middle of a full-length portrait -- the torso -- and cuts the head off.
     Faces sit in the upper third of almost any promotional shot, posed or
     candid, so favouring the top keeps them in frame. */
  object-position: 50% 22%;
  display: block;
  border-radius: 12px;
  background: #3a1b48;
}
/* One card peeks up and out; the rest of the line stays put.
   The old behaviour opened the whole row by adding margin to every card --
   which, now that the cards are `flex: 1 1 0`, made the line wider than its
   container and every card shrank to compensate. Transform costs no layout,
   so nothing around it moves. */
.pcc-parade-cast-member:hover,
.pcc-parade-cast-member:focus-visible {
  transform: translateY(-14px) scale(1.06) rotate(0deg);
  box-shadow: 0 22px 46px rgba(8, 2, 12, .55);
  z-index: 60;
}
.pcc-parade-cast-name {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 14px 8px 8px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(12, 4, 17, 0) 0%, rgba(12, 4, 17, .9) 52%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  /* Two lines before it gives up, so a long stage name wraps instead of
     being cut off mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Opening a profile is the point, so say so on the way in. */
.pcc-parade-cast-member[href]:hover .pcc-parade-cast-name,
.pcc-parade-cast-member[href]:focus-visible .pcc-parade-cast-name {
  background: linear-gradient(180deg, rgba(115, 41, 130, 0) 0%, rgba(115, 41, 130, .95) 52%);
}

.pcc-parade-cast-more {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  margin-left: -20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 2px dashed rgba(255, 255, 255, .42);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  z-index: 1;
}


/* cast.js hides trimmed cards with the `hidden` attribute; the flex display
   rules below would otherwise override it, since display beats hidden. */
.pcc-parade-cast-member[hidden],
.pcc-parade-cast-more[hidden] { display: none !important; }

@media (max-width: 860px) {
  /* Below this the cards would be too small to read, so the row scrolls --
     and it is left-aligned, because only a start-aligned line can actually be
     scrolled back to its first item. */
  .pcc-parade-cast {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 18px 16px 32px;
  }
  .pcc-parade-cast::-webkit-scrollbar { display: none; }
  .pcc-parade-cast-member { flex: 0 0 auto; width: 124px; max-width: none; margin-left: -16px; }
  .pcc-parade-cast-more { width: 70px; height: 70px; font-size: 15px; }
}

/* Motion off: no fan, no tilt -- an evenly spaced, legible row. */
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-cast-member, .pcc-parade-cast-more {
    transition: none;
    transform: none !important;
    margin-left: 6px;
  }
  .pcc-parade-cast { padding-left: 0; }
}

/* ── Block party backdrop ─────────────────────────────────────────────────
   Crowd photographs from the event, crossfading behind the band with a slow
   drift. The aubergine stays underneath: if the images never load, or the
   pool is empty, the section looks exactly as it did before. */
.pcc-parade-next.has-atmos {
  position: relative;
  /* Contains the layers below. Without it, a z-index here would join the
     page's stacking order and the band could be painted over its own
     neighbours -- the bug that hid the showcase credit pill. */
  isolation: isolate;
  overflow: hidden;
}
.pcc-parade-next.has-atmos > .pcc-parade-wrap {
  position: relative;
  z-index: 1;
}
.pcc-parade-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pcc-parade-atmos-layer {
  position: absolute;
  inset: -4%;                 /* room for the drift, so no edge is exposed */
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: pcc-atmos-cycle 45s linear infinite;
  /* Five layers, nine seconds each. */
  animation-delay: calc(var(--pcc-n, 0) * 9s);
}
@keyframes pcc-atmos-cycle {
  0%   { opacity: 0; transform: scale(1.04); }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.04); }
}
/* The band is aubergine first and a photograph second: this keeps the text,
   the fact cards and the performer names readable over any image. */
.pcc-parade-atmos-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(43, 13, 56, .72) 0%, rgba(43, 13, 56, .93) 70%),
    linear-gradient(180deg, var(--pcc-aubergine) 0%, rgba(43, 13, 56, .86) 22%, rgba(43, 13, 56, .86) 78%, var(--pcc-aubergine) 100%);
}

/* Motion off: one still frame, no crossfade, no drift. */
@media (prefers-reduced-motion: reduce) {
  .pcc-parade-atmos-layer { animation: none; transform: none; opacity: 0; }
  .pcc-parade-atmos-layer:first-child { opacity: 1; }
}

/* ── Instagram feed overhaul ──────────────────────────────────────────────
   Instagram Feed Pro renders a flush 10-across strip (data-cols="10",
   data-item-padding="0") with square corners and no gaps, which is what made
   it look like a 2015 widget. Everything below re-lays it out from our side.

   !important throughout because the plugin writes width, padding and height as
   INLINE styles on each item, and an inline style loses to nothing else.
   Scoped to .pcc-parade-social-feed so no other feed on the site is touched. */
.pcc-parade-social-feed #sb_instagram {
  display: grid !important;
  /* Explicit tracks, not auto-flow: implicit columns from `grid-auto-columns`
     were sizing to content here rather than sharing the row, so six squares
     bunched up on the left instead of spanning the full width. Six named
     tracks of 1fr always divide the whole row. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 16px;
  padding: 0 !important;
  width: 100% !important;
}
/* The plugin nests items inside #sbi_images; display:contents lifts them into
   the grid above so they can be its columns. */
.pcc-parade-social-feed #sbi_images { display: contents !important; }

.pcc-parade-social-feed #sb_instagram .sbi_item {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  /* Square. The plugin sizes its inner wrapper with padding-bottom, so the
     ratio has to be enforced here and the wrapper pinned to fill it -- a
     height on a padding-sized box does nothing. */
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.pcc-parade-social-feed #sb_instagram .sbi_photo_wrap,
.pcc-parade-social-feed #sb_instagram .sbi_photo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 16px;
}
.pcc-parade-social-feed #sb_instagram .sbi_photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px;
  /* Instagram's 640px source into a ~280px box on a 2x display is a downscale,
     which browsers handle well -- but be explicit rather than leaving it to
     the default nearest-neighbour path some engines take when upscaling. */
  image-rendering: auto;
}

/* The Pride edge, drawn only on hover so the row stays calm at rest. */
.pcc-parade-social-feed #sb_instagram .sbi_item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 3px;
  background: conic-gradient(from 210deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #e40303);
  /* Ring, not a fill: the gradient shows only in the border band. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 2;
}
.pcc-parade-social-feed #sb_instagram .sbi_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(43, 13, 56, .22);
}
.pcc-parade-social-feed #sb_instagram .sbi_item:hover::after { opacity: 1; }

.pcc-parade-social-feed .sbi_header_link,
.pcc-parade-social-feed #sbi_load { margin-top: 18px !important; }

/* Six is the ceiling at ANY width. The feed is asked for six, but a cached
   response can still return ten, and without this cap they divide the row into
   130px thumbnails -- which is what made it read as a filmstrip. */
.pcc-parade-social-feed #sb_instagram .sbi_item:nth-child(n+7) { display: none !important; }

/* Fewer, larger tiles again as the row narrows. The track count and the cap
   must move together: leave five tracks with only four tiles and the row ends
   short of the right edge. */
@media (max-width: 1100px) {
  .pcc-parade-social-feed #sb_instagram { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pcc-parade-social-feed #sb_instagram .sbi_item:nth-child(n+6) { display: none !important; }
}
@media (max-width: 900px) {
  .pcc-parade-social-feed #sb_instagram { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcc-parade-social-feed #sb_instagram .sbi_item:nth-child(n+5) { display: none !important; }
}
@media (max-width: 760px) {
  .pcc-parade-social-feed #sb_instagram {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .pcc-parade-social-feed #sb_instagram .sbi_item:nth-child(n+4) { display: none !important; }
  .pcc-parade-social-feed #sb_instagram .sbi_item,
  .pcc-parade-social-feed #sb_instagram .sbi_item::after,
  .pcc-parade-social-feed #sb_instagram .sbi_photo img { border-radius: 12px; }
}
@media (max-width: 520px) {
  .pcc-parade-social-feed #sb_instagram { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcc-parade-social-feed #sb_instagram .sbi_item:nth-child(n+3) { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pcc-parade-social-feed #sb_instagram .sbi_item { transition: none; }
  .pcc-parade-social-feed #sb_instagram .sbi_item:hover { transform: none; }
}

/* ── Hovering a performer opens the backdrop onto their own set ───────────
   The ambient cycle recedes, that performer's photograph from a past block
   party comes up behind, and the overlay lifts enough to let it read while
   keeping the text legible. */
.pcc-parade-atmos-cycle {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .4s ease;
}
/* Two of these. Only the one carrying .is-on is visible, so moving between
   performers fades the incoming photograph over the outgoing one. */
.pcc-parade-atmos-focus {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  /* Slow in, and a longer drift than the fade so the picture is still moving
     when it settles. */
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
              transform 1.6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.pcc-parade-atmos-focus.is-on { opacity: 1; transform: scale(1); }
.pcc-parade-atmos-scrim { transition: opacity .4s ease; }

/* The ambient cycle recedes a touch slower than the reveal arrives, so the
   two overlap rather than handing over through a gap. */
.pcc-parade-atmos-cycle { transition: opacity .6s ease; }
.pcc-parade-next.is-peeking .pcc-parade-atmos-cycle { opacity: 0; }
/* Lifted, not removed. The fact cards and the heading still sit on this, and
   a bare photograph behind white text is unreadable. */
.pcc-parade-next.is-peeking .pcc-parade-atmos-scrim { opacity: .82; }
.pcc-parade-atmos-scrim { transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }

/* Touch devices report no hover; the reveal would stick on after a tap. */
@media (hover: none) {
  .pcc-parade-next.is-peeking .pcc-parade-atmos-cycle { opacity: 1; }
  .pcc-parade-atmos-focus.is-on { opacity: 0; }
  .pcc-parade-next.is-peeking .pcc-parade-atmos-scrim { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the fade -- an abrupt image swap is harsher than a gentle one -- but
     drop the drift, which is the part that actually moves. */
  .pcc-parade-atmos-focus {
    transform: none;
    transition: opacity .35s linear;
  }
  .pcc-parade-atmos-focus.is-on { transform: none; }
  .pcc-parade-atmos-cycle,
  .pcc-parade-atmos-scrim { transition: opacity .35s linear; }
}