/* =====================================================================
   XXL 2016 FRESHMAN CLASS — Embed Stylesheet
   All rules scoped to .xxl-fc16 to prevent WordPress theme bleed-in.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@700&family=Inter:wght@400;600;700;800&family=League+Gothic&display=swap');

.xxl-fc16 {
  --xxl-teal: #00AFFE;
  --xxl-pink: #E5167F;
  --xxl-yellow: #F4C518;
  --xxl-black: #0A0A0A;
  --xxl-white: #FFFFFF;

  --font-display: 'League Gothic', Impact, 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-accent: 'DynaPuff', Impact, 'Arial Black', sans-serif;
  --font-body: 'League Gothic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --xxl-max: 906px;

  position: relative;
  max-width: var(--xxl-max);
  margin: 0 auto;
  background: var(--xxl-white);
  color: var(--xxl-black);
  font-family: var(--font-body);
  /* League Gothic is condensed — bump base size, line-height, and add
     positive letter-spacing so the narrow letterforms have room to
     breathe. Inherited by all body-font descendants. */
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: left;
  /* Contain all child z-indexes so the embed can never sit above the site's
     fixed header / menu / nav. */
  isolation: isolate;
  /* Triple-layer horizontal overflow containment:
     1) clip-path paints only inside the box — even box-shadow/transform
        from descendants is paint-clipped, with NO scroll container created
     2) overflow-x: clip is the modern equivalent (newer browsers)
     3) overflow-x: hidden as the safe fallback
     4) max-width / width caps so a wide parent can't expand us either */
  clip-path: inset(0);
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
  max-width: min(var(--xxl-max), 100%);
  /* CSS containment: tells the browser nothing inside affects external
     layout or paint. Together with the JS-side html/body overflow lock
     on mobile, this should be the end of horizontal scroll forever. */
  contain: layout paint;

  /* CSS-side knob for the scroll offset when a card opens. Override per
     site if needed (the JS reads this property). */
  --xxl-card-scroll-offset: 80px;
}
/* Nothing inside the embed is allowed to exceed its column. Catches rogue
   iframes, SVGs, theme-overridden images, etc. */
.xxl-fc16 > *,
.xxl-fc16 section,
.xxl-fc16 iframe { max-width: 100%; }

/* ---------- WordPress theme bleed neutralizers ---------- */
.xxl-fc16, .xxl-fc16 *, .xxl-fc16 *::before, .xxl-fc16 *::after { box-sizing: border-box; }
.xxl-fc16 h1, .xxl-fc16 h2, .xxl-fc16 h3, .xxl-fc16 h4 {
  margin: 0; padding: 0; font-family: var(--font-display);
  font-weight: 400; line-height: 1; letter-spacing: 0.01em;
}
.xxl-fc16 p, .xxl-fc16 dl, .xxl-fc16 dt, .xxl-fc16 dd { margin: 0; padding: 0; }
.xxl-fc16 ul, .xxl-fc16 ol { margin: 0; padding: 0; list-style: none; }
.xxl-fc16 img { max-width: 100%; height: auto; display: block; border: 0; }
.xxl-fc16 a { color: inherit; text-decoration: none; }
.xxl-fc16 button {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.xxl-fc16 button:focus-visible,
.xxl-fc16 a:focus-visible,
.xxl-fc16 label:focus-visible {
  outline: 3px solid var(--xxl-teal);
  outline-offset: 2px;
}

.xxl-fc16__sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   PARALLAX BACKGROUND SHAPES
   ===================================================================== */
.xxl-fc16__bg {
  /* Stays inside the embed's 906px content column. Shapes peek from the
     left/right edges of that column behind the content. */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.xxl-fc16__bg-shape {
  position: absolute;
  will-change: transform;
}
/* 8 paint-splatter PNGs cycle through 3 images (splatter1 was swapped for
   splatter3 across the board). Positioned to "pop out from behind" each
   major visual element — cover, logo, every artist card row, and the
   cypher tabs — while deliberately skipping the band around the hero
   intro paragraph so the body text stays on clean white. */
.xxl-fc16__bg-shape {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
  mix-blend-mode: multiply;
}
.xxl-fc16__bg-shape--1,
.xxl-fc16__bg-shape--3,
.xxl-fc16__bg-shape--5,
.xxl-fc16__bg-shape--7 { background-image: url("https://xxlmag.s3.amazonaws.com/freshman/2016-Freshman-Anniversary/images/splatter3.png"); }
.xxl-fc16__bg-shape--2,
.xxl-fc16__bg-shape--6 { background-image: url("https://xxlmag.s3.amazonaws.com/freshman/2016-Freshman-Anniversary/images/splatter2.png"); }
.xxl-fc16__bg-shape--4,
.xxl-fc16__bg-shape--8 { background-image: url("https://xxlmag.s3.amazonaws.com/freshman/2016-Freshman-Anniversary/images/splatter4.png"); }

/* Position each splatter behind a major element:
   1/2 = behind cover + logo (top of hero)
   skip y ~450–800 so the intro paragraph sits on clean white
   3–6 = scattered behind the 5 rows of artist cards
   7/8 = behind the cypher tabs
   Sizes doubled vs. the prior pass so they read as bold accents. */
/* Shapes 1 + 2 sit FURTHER UP (negative top) so even with rotation their
   bounding boxes don't bleed into the hero intro band (~y 490–650 on
   mobile). They peek out from BEHIND the cover + logo at the top. */
.xxl-fc16__bg-shape--1 { width: 480px; height: 480px; top: -80px;   left: -160px;  transform: rotate(-12deg); }
.xxl-fc16__bg-shape--2 { width: 440px; height: 440px; top: -40px;   right: -150px; transform: rotate(18deg); }
.xxl-fc16__bg-shape--3 { width: 520px; height: 520px; top: 880px;   left: -180px;  transform: rotate(-22deg); }
.xxl-fc16__bg-shape--4 { width: 440px; height: 440px; top: 1320px;  right: -160px; transform: rotate(28deg); }
.xxl-fc16__bg-shape--5 { width: 500px; height: 500px; top: 1720px;  left: -170px;  transform: rotate(8deg); }
.xxl-fc16__bg-shape--6 { width: 480px; height: 480px; top: 2180px;  right: -180px; transform: rotate(-30deg); }
.xxl-fc16__bg-shape--7 { width: 520px; height: 520px; top: 2680px;  left: -160px;  transform: rotate(20deg); }
.xxl-fc16__bg-shape--8 { width: 460px; height: 460px; top: 2900px;  right: -160px; transform: rotate(-15deg); }

/* Desktop overrides: shapes 3–6 swap sides (left ↔ right), shapes 7+8
   hidden. Mobile keeps the defaults above. */
@media (min-width: 721px) {
  .xxl-fc16__bg-shape--3 { left: auto;  right: -180px; }
  .xxl-fc16__bg-shape--4 { right: auto; left:  -160px; }
  .xxl-fc16__bg-shape--5 { left: auto;  right: -170px; }
  .xxl-fc16__bg-shape--6 { right: auto; left:  -180px; }
  .xxl-fc16__bg-shape--7,
  .xxl-fc16__bg-shape--8 { display: none; }
}


/* All page sections sit above parallax */
.xxl-fc16__hero,
.xxl-fc16__class,
.xxl-fc16__story,
.xxl-fc16__reels,
.xxl-fc16__cyphers { position: relative; z-index: 1; }

/* =====================================================================
   HERO
   ===================================================================== */
.xxl-fc16__hero {
  padding: 48px 32px 20px;
}

.xxl-fc16__class {
  padding-bottom: 20px;
}

.xxl-fc16__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Column gap separates cover ↔ logo. Row gap is 0 so the sponsor on row
     2 sits tight against the logo above it (feels like a single piece). */
  column-gap: 32px;
  row-gap: 0;
  align-items: center;
  /* No bottom padding here — the stat-banner's margin-top owns the gap to
     the text below so the spacing matches the other section gaps. */
  max-width: 820px;
  margin: 0 auto;
}

.xxl-fc16__hero-cover {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  border: 4px solid var(--xxl-black);
  box-shadow: 10px 10px 0 var(--xxl-black);
  background: var(--xxl-white);
  transform: translateY(16px) rotate(-1.5deg);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1) 60ms,
              opacity 700ms ease 60ms;
}
.xxl-fc16__hero-cover img { width: 100%; height: auto; display: block; }
.xxl-fc16.is-loaded .xxl-fc16__hero-cover { transform: translateY(0) rotate(-1.5deg); opacity: 1; }

.xxl-fc16__hero-logo {
  text-align: center;
  transform: scale(.92) rotate(2.5deg);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1) 180ms,
              opacity 700ms ease 180ms;
}
.xxl-fc16.is-loaded .xxl-fc16__hero-logo {
  transform: scale(1) rotate(2.5deg);
  opacity: 1;
  /* "Breathing" loop kicks in after the entrance transition lands. */
  animation: xxl-fc16-logo-breathe 4s ease-in-out 900ms infinite;
}
@keyframes xxl-fc16-logo-breathe {
  0%, 100% { transform: scale(1) rotate(2.5deg); }
  50%      { transform: scale(1.05) rotate(2.5deg); }
}

/* "10 Years Later" bubbly pill */
.xxl-fc16__pill {
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--xxl-black);
  background: var(--xxl-yellow);
  padding: 12px 20px 8px;
  border: 4px solid var(--xxl-black);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--xxl-black);
  margin-bottom: 16px;
  transform: rotate(-4deg);
  white-space: nowrap;
  /* Breathing loop — same timing as the logo so they pulse together. */
  animation: xxl-fc16-pill-breathe 4s ease-in-out 900ms infinite;
}
@keyframes xxl-fc16-pill-breathe {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(-4deg) scale(1.05); }
}
@keyframes xxl-fc16-cover-breathe {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.04); }
}

/* Specificity bump (.xxl-fc16 img.xxl-fc16__logo-img) to beat the
   .xxl-fc16 img reset rule that pins max-width to 100%. */
.xxl-fc16 img.xxl-fc16__logo-img {
  width: 100%; max-width: 360px; margin: 0 auto; height: auto;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,0.08));
}

/* Sponsor — desktop variant sits INSIDE .xxl-fc16__hero-logo (right after
   the class logo img). Because it's a child of hero-logo it inherits the
   parent's rotation + breathing animation for free — the two read as a
   single piece. Specificity bumped to beat .xxl-fc16 img { max-width: 100% }. */
.xxl-fc16 img.xxl-fc16__sponsor--desktop {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 8px auto 0;
}
/* Mobile variant — sibling of cover/logo in the hero-grid. Gets its own
   transform + animation that mirror the cover's so they pulse together. */
.xxl-fc16 img.xxl-fc16__sponsor--mobile {
  display: none; /* hidden on desktop; @media block below shows it */
  grid-column: 1;
  width: 100%;
  max-width: 125px;
  height: auto;
  margin: 8px auto 0;
  justify-self: center;
  transform: rotate(-2deg);
  animation: xxl-fc16-cover-breathe 4s ease-in-out 900ms infinite;
}

/* Stat banner */
.xxl-fc16__stat-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* 40px gap from the hero images above — matches the spacing between
     the other sections (hero→class, class→cyphers). */
  margin: 40px auto 0;
  padding: 0 0 8px;
  flex-wrap: wrap;
}
.xxl-fc16__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.xxl-fc16__stat-num {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--xxl-black);
  text-shadow: 4px 4px 0 var(--xxl-black);
}
.xxl-fc16__stat-num[data-c="teal"]   { color: var(--xxl-teal); }
.xxl-fc16__stat-num[data-c="pink"]   { color: var(--xxl-pink); }
.xxl-fc16__stat-num[data-c="yellow"] { color: var(--xxl-yellow); }
.xxl-fc16__stat-lbl {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xxl-black);
  margin-top: 8px;
}
.xxl-fc16__stat-sep {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--xxl-black);
  opacity: 0.25;
  line-height: 1;
  padding-bottom: 24px;
}

/* Intro paragraph */
/* Specificity bump (.xxl-fc16 p.xxl-fc16__hero-intro) to beat the
   .xxl-fc16 p { margin: 0 } theme-reset rule that was zeroing margin:auto. */
.xxl-fc16 p.xxl-fc16__hero-intro {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-align: center;
}
.xxl-fc16 p.xxl-fc16__byline {
  margin: 24px 0 0 !important;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #555;
}

/* Highlights stripped — span hooks left in markup for future use, but the
   intro now reads as plain body weight. */
.xxl-fc16__hl {
  font-weight: inherit;
  color: var(--xxl-black);
}
.xxl-fc16__hl--pink,
.xxl-fc16__hl--teal,
.xxl-fc16__hl--yellow { background: transparent; }

/* =====================================================================
   SECTION TITLES
   ===================================================================== */
/* Specificity bump (.xxl-fc16 .xxl-fc16__section-title) to beat the
   .xxl-fc16 h2 { padding: 0 } theme-reset rule that was zeroing this out. */
.xxl-fc16 .xxl-fc16__section-title {
  position: relative;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 40px 32px 24px;
  color: var(--xxl-black);
}
.xxl-fc16__section-title span { display: block; }
.xxl-fc16__title-bar {
  display: block;
  width: 0;
  height: 8px;
  margin-top: 14px;
  background: var(--xxl-teal);
  transition: width 700ms cubic-bezier(.2,.7,.2,1);
}
.xxl-fc16__section-title.in-view .xxl-fc16__title-bar { width: 200px; }
.xxl-fc16__section-title--pink .xxl-fc16__title-bar { background: var(--xxl-pink); }
/* Story section underline uses yellow */
.xxl-fc16__story .xxl-fc16__title-bar { background: var(--xxl-yellow); }

/* =====================================================================
   CLASS GRID
   ===================================================================== */
/* (.xxl-fc16__class padding-bottom set above in spacing block) */

/* Flat (card,drawer,card,drawer,...) DOM. Grid auto-flow:dense lets cards
   fill the next available slot regardless of source order, so each card's
   drawer can sit IMMEDIATELY after that card on mobile (1-col), while on
   desktop (2-col) cards pair up and drawers span the row beneath them. */
.xxl-fc16__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  padding: 0 32px;
}

.xxl-fc16__card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 4px solid var(--xxl-black);
  background: var(--xxl-white);
  aspect-ratio: 3 / 2;
  cursor: pointer;
  transition: box-shadow 250ms ease, transform 250ms ease;
}
.xxl-fc16__card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

/* Hover (desktop only) */
@media (hover: hover) {
  .xxl-fc16__card:hover { box-shadow: 8px 8px 0 var(--xxl-black); transform: translate(-2px, -2px); }
  .xxl-fc16__card:hover img { transform: scale(1.04); }
  .xxl-fc16__card:hover .xxl-fc16__overlay { opacity: 1; }
  .xxl-fc16__card--tenth:hover { box-shadow: 8px 8px 0 var(--xxl-yellow); }
}

/* Active (drawer open) state */
.xxl-fc16__card[aria-expanded="true"] {
  box-shadow: 8px 8px 0 var(--xxl-pink);
  transform: translate(-2px, -2px);
}
.xxl-fc16__card[aria-expanded="true"] .xxl-fc16__overlay { opacity: 0.85; }

.xxl-fc16__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(229,22,127,0.22) 0%, rgba(0,175,254,0.22) 100%);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

/* "Click for bio" affordance — pill in the bottom-right of every card.
   On desktop it sits subtly visible; hover/touch enlarges + animates it.
   When the drawer is open it flips to a close hint. */
.xxl-fc16__card::after {
  content: "Read bio";
  position: absolute;
  bottom: 12px; right: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--xxl-white);
  background: var(--xxl-black);
  padding: 7px 12px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 3;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform 250ms cubic-bezier(.2,.7,.2,1), background 200ms ease, color 200ms ease;
}
.xxl-fc16__card::before {
  /* Pulsing dot to draw the eye on first scroll */
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--xxl-pink);
  box-shadow: 0 0 0 3px var(--xxl-white), 0 0 0 5px var(--xxl-pink);
  z-index: 3;
  pointer-events: none;
  animation: xxl-fc16-pulse 2400ms ease-in-out infinite;
}
@keyframes xxl-fc16-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

@media (hover: hover) {
  .xxl-fc16__card:hover::after {
    transform: scale(1.08);
    background: var(--xxl-pink);
  }
}

/* When the bio drawer is open, swap the pill text to a "close" hint */
.xxl-fc16__card[aria-expanded="true"]::after {
  content: "Close bio";
  background: var(--xxl-pink);
}
.xxl-fc16__card[aria-expanded="true"]::before {
  animation: none;
  background: var(--xxl-teal);
  box-shadow: 0 0 0 3px var(--xxl-white), 0 0 0 5px var(--xxl-teal);
}

@media (prefers-reduced-motion: reduce) {
  .xxl-fc16__card::before { animation: none; }
}

/* =====================================================================
   BIO DRAWER
   ===================================================================== */
.xxl-fc16__drawer {
  grid-column: 1 / -1; /* always span the full row of the grid */
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--xxl-white);
  border: 0;
  border-radius: 12px;
  transition: max-height 400ms cubic-bezier(.2,.7,.2,1),
              opacity 350ms ease 50ms,
              margin 400ms ease;
  margin: 0;
  /* Padding lives here (always present) instead of on .is-open. Otherwise
     it would snap from 36px → 0 instantly on close, causing the content
     to "hug the left" for a frame before the drawer fades out.
     max-height: 0 + overflow: hidden keep the padding hidden when closed. */
  padding: 32px 36px 36px;
}
/* When [hidden], drawer is fully out of layout — cards above/below pair up
   cleanly. JS strips [hidden] before adding .is-open and triggers a reflow
   so the max-height transition runs from 0 → expanded. */
.xxl-fc16__drawer.is-open {
  max-height: 1400px;
  opacity: 1;
  margin: 4px 0 16px;
}

/* Per-accent light gradient backgrounds */
.xxl-fc16__drawer[data-accent="teal"] {
  background: linear-gradient(135deg,
    rgba(52,209,197,0.22) 0%,
    rgba(229,22,127,0.10) 60%,
    rgba(244,197,24,0.08) 100%);
    background-color: #ffffffb0;
}
.xxl-fc16__drawer[data-accent="pink"] {
  background: linear-gradient(135deg,
    rgba(229,22,127,0.20) 0%,
    rgba(244,197,24,0.10) 60%,
    rgba(52,209,197,0.10) 100%);
    background-color: #ffffffb0;
}
.xxl-fc16__drawer[data-accent="yellow"] {
  background: linear-gradient(135deg,
    rgba(244,197,24,0.26) 0%,
    rgba(52,209,197,0.10) 60%,
    rgba(229,22,127,0.08) 100%);
    background-color: #ffffffb0;
}

.xxl-fc16__drawer-close {
  position: absolute; top: 14px; right: 18px;
  width: 36px; height: 36px;
  font-family: var(--font-body);
  font-size: 26px; line-height: 1;
  color: var(--xxl-black);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  z-index: 2;
}
/* Hover wrapped to skip touch devices — prevents iOS first-tap phantom hover */
@media (hover: hover) {
  .xxl-fc16__drawer-close:hover {
    background: var(--xxl-black);
    color: var(--xxl-white);
    transform: scale(1.05);
  }
}

/* Stat-card has been removed; bio takes the full drawer width. */
.xxl-fc16__drawer-grid {
  display: block;
}

/* Bio column */
.xxl-fc16__bio-name {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: none;
}
.xxl-fc16__bio-name[data-accent="teal"] {
  background-image: linear-gradient(110deg, var(--xxl-teal) 0%, var(--xxl-pink) 100%);
}
.xxl-fc16__bio-name[data-accent="pink"] {
  background-image: linear-gradient(110deg, var(--xxl-pink) 0%, var(--xxl-yellow) 100%);
}
.xxl-fc16__bio-name[data-accent="yellow"] {
  background-image: linear-gradient(110deg, var(--xxl-yellow) 0%, var(--xxl-teal) 100%);
}

.xxl-fc16__bio-meta {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #4a4a4a;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(0,0,0,0.12);
}
.xxl-fc16__bio-meta em { font-style: normal; font-weight: 700; color: var(--xxl-black); }
.xxl-fc16__bio-credit {
  margin-top: 12px;
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  color: var(--xxl-black);
  letter-spacing: 0.02em;
}
.xxl-fc16__bolt-sep {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.15em;
  margin: 0 0.25em;
  fill: var(--xxl-pink);
}

.xxl-fc16__bio p {
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: 0.04em; /* slightly more open for long-form reading */
  margin-bottom: 14px;
  color: #1a1a1a;
}
.xxl-fc16__bio p:last-child { margin-bottom: 0; }
.xxl-fc16__bio em { font-style: italic; }

/* Stat card */
.xxl-fc16__stat-card {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 22px 22px 20px;
  align-self: start;
}
.xxl-fc16__stat-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xxl-black);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--xxl-black);
}
.xxl-fc16__stat-card[data-accent="teal"] .xxl-fc16__stat-card-title { border-bottom-color: var(--xxl-teal); }
.xxl-fc16__stat-card[data-accent="pink"] .xxl-fc16__stat-card-title { border-bottom-color: var(--xxl-pink); }
.xxl-fc16__stat-card[data-accent="yellow"] .xxl-fc16__stat-card-title { border-bottom-color: var(--xxl-yellow); }

/* Specificity bump (.xxl-fc16 dl.xxl-fc16__stat-list) to beat the
   .xxl-fc16 dl { margin: 0 } theme-reset rule. */
.xxl-fc16 dl.xxl-fc16__stat-list {
  font-size: 18px;
  line-height: 1.35;
  margin-top: 18px; /* breathing room between the divider and "Real Name" */
}
.xxl-fc16__stat-list dt {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a6a;
  margin-top: 14px;
}
.xxl-fc16__stat-list dt:first-child { margin-top: 0; }
.xxl-fc16__stat-list dd {
  font-weight: 600;
  color: var(--xxl-black);
  margin-top: 2px;
}

/* Socials */
.xxl-fc16__socials {
  display: flex; gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0,0,0,0.18);
}
/* Specificity bump (.xxl-fc16 .xxl-fc16__social) to beat the
   .xxl-fc16 a { color: inherit } reset rule above. Without it, the link
   inherits parent black-on-black and is unreadable. */
.xxl-fc16 .xxl-fc16__social {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  background: var(--xxl-black);
  color: var(--xxl-white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.xxl-fc16 .xxl-fc16__social svg { width: 12px; height: 12px; fill: currentColor; }
.xxl-fc16 .xxl-fc16__social span { color: inherit; }
/* Hover-only effects gated to pointer devices — iOS phantom-hover fix */
@media (hover: hover) {
  .xxl-fc16 .xxl-fc16__social:hover { transform: translateY(-2px); }
  .xxl-fc16__stat-card[data-accent="teal"]   .xxl-fc16__social:hover { background: var(--xxl-teal); color: var(--xxl-black); }
  .xxl-fc16__stat-card[data-accent="pink"]   .xxl-fc16__social:hover { background: var(--xxl-pink); color: var(--xxl-black); }
  .xxl-fc16__stat-card[data-accent="yellow"] .xxl-fc16__social:hover { background: var(--xxl-yellow); color: var(--xxl-black); }
}

/* =====================================================================
   CYPHERS — CSS-only tabs via :checked
   ===================================================================== */
.xxl-fc16__cyphers { padding: 0 32px 40px; }
/* The cyphers section already has 32px horizontal padding; the title would
   otherwise add ANOTHER 32px and sit indented past the tabs container.
   Zeroing the title's horizontal padding makes its text-left line up with
   the tabs' (and therefore the video's) left edge. Specificity bumped
   (.xxl-fc16 .xxl-fc16__cyphers …) so it beats the mobile @media rule. */
.xxl-fc16 .xxl-fc16__cyphers .xxl-fc16__section-title {
  padding-left: 0;
  padding-right: 0;
}

.xxl-fc16__videos { position: relative; z-index: 1; padding: 0 32px 40px; }
.xxl-fc16 .xxl-fc16__videos .xxl-fc16__section-title {
  padding-left: 0;
  padding-right: 0;
}
.xxl-fc16__videos-wrap {
  position: relative;
  border: 4px solid var(--xxl-black);
  background: var(--xxl-white);
  box-shadow: 10px 10px 0 var(--xxl-pink);
}
.xxl-fc16 .xxl-fc16__story .xxl-fc16__section-title,
.xxl-fc16 .xxl-fc16__reels .xxl-fc16__section-title {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.xxl-fc16 .xxl-fc16__story .xxl-fc16__title-bar,
.xxl-fc16 .xxl-fc16__reels .xxl-fc16__title-bar {
  margin-left: auto;
  margin-right: auto;
}

.xxl-fc16__tabs {
  position: relative;
  border: 4px solid var(--xxl-black);
  background: var(--xxl-white);
  box-shadow: 10px 10px 0 var(--xxl-pink);
}

/* Visually-hidden radios — completely zeroed so they can't introduce
   stray vertical space above the labels (some themes apply default
   margins to <input> inside .entry-content). Keep them keyboard-focusable. */
.xxl-fc16__tab-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.xxl-fc16__tab-row {
  display: flex;
  border-bottom: 4px solid var(--xxl-black);
  background: #F4F4F4;
}
.xxl-fc16__tab {
  flex: 1;
  padding: 16px 12px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  color: #6a6a6a;
  background: #F4F4F4;
  border-right: 4px solid var(--xxl-black);
  transition: background 200ms ease, color 200ms ease;
}
.xxl-fc16__tab:last-child { border-right: 0; }
@media (hover: hover) {
  .xxl-fc16__tab:hover { background: var(--xxl-white); color: var(--xxl-black); }
}

/* Radios sit OUTSIDE .xxl-fc16__tabs (as siblings) so they can't inject
   any vertical space inside the tabs container. Selectors traverse via
   the wrapping .xxl-fc16__tabs to reach the labels / panels inside. */
#xxl-fc16-cypher-1:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-1"],
#xxl-fc16-cypher-2:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-2"],
#xxl-fc16-cypher-3:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-3"] {
  background: var(--xxl-white);
  color: var(--xxl-black);
  box-shadow: inset 0 -8px 0 var(--xxl-pink);
}

#xxl-fc16-cypher-1:focus-visible ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-1"],
#xxl-fc16-cypher-2:focus-visible ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-2"],
#xxl-fc16-cypher-3:focus-visible ~ .xxl-fc16__tabs .xxl-fc16__tab-row label[for="xxl-fc16-cypher-3"] {
  outline: 3px solid var(--xxl-teal);
  outline-offset: -3px;
}

.xxl-fc16__tab-panel { display: none; padding: 0; background: var(--xxl-white); }
#xxl-fc16-cypher-1:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="1"],
#xxl-fc16-cypher-2:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="2"],
#xxl-fc16-cypher-3:checked ~ .xxl-fc16__tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="3"] {
  display: block;
}

.xxl-fc16__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.xxl-fc16__video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.xxl-fc16__video-loader {
  position: absolute;
  inset: 0;
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 2;
  transition: opacity 500ms ease;
  user-select: none;
}
.xxl-fc16__video-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.xxl-fc16__loader-label {
  font-family: var(--font-display);
  font-size: clamp(11px, 2vw, 14px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}
.xxl-fc16__loader-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 68px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 16px;
}
.xxl-fc16__loader-eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 32px;
  margin-top: 4px;
}
.xxl-fc16__loader-eq span {
  display: block;
  width: 5px;
  background: var(--xxl-teal);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: xxl-eq 0.7s ease-in-out infinite alternate;
}
.xxl-fc16__loader-eq span:nth-child(1) { height: 18px; animation-duration: 0.55s; animation-delay:  0s;    }
.xxl-fc16__loader-eq span:nth-child(2) { height: 32px; animation-duration: 0.72s; animation-delay: -0.22s; }
.xxl-fc16__loader-eq span:nth-child(3) { height: 14px; animation-duration: 0.48s; animation-delay: -0.1s;  }
.xxl-fc16__loader-eq span:nth-child(4) { height: 28px; animation-duration: 0.83s; animation-delay: -0.35s; }
.xxl-fc16__loader-eq span:nth-child(5) { height: 22px; animation-duration: 0.61s; animation-delay: -0.18s; }
.xxl-fc16__loader-eq span:nth-child(6) { height: 30px; animation-duration: 0.66s; animation-delay: -0.05s; }
.xxl-fc16__loader-eq span:nth-child(7) { height: 16px; animation-duration: 0.78s; animation-delay: -0.28s; }
@keyframes xxl-eq {
  from { transform: scaleY(0.12); }
  to   { transform: scaleY(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .xxl-fc16__loader-eq span { animation: none; transform: scaleY(0.5); }
}

.xxl-fc16__cyphers-caption {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 400;
  color: #7a7a7a;
  text-align: center;
  font-style: italic;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 720px) {
  /* Mobile scroll offset accounts for the typical XXL site fixed header
     (~136px). Bumped to 150px for a small breathing buffer below. */
  .xxl-fc16 { --xxl-card-scroll-offset: 150px; }
  .xxl-fc16__bg-shape--1 { top: -200px; }
  .xxl-fc16__bg-shape--2 { top: -160px; }

  /* Mobile cover: same askew rotation as desktop + breathing animation
     synced with the pill (the logo is hidden on mobile). The keyframe
     bakes in the rotation so the cover stays tilted through the pulse.
     No !important — it conflicts with the animation's transform values. */
  .xxl-fc16__hero-cover {
    transform: translateY(16px) rotate(-2deg);
    box-shadow: 6px 6px 0 var(--xxl-black);
  }
  .xxl-fc16.is-loaded .xxl-fc16__hero-cover {
    transform: translateY(0) rotate(-2deg);
    animation: xxl-fc16-cover-breathe 4s ease-in-out 900ms infinite;
  }
  .xxl-fc16__hero { padding: 24px 12px 16px; }
  .xxl-fc16__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    padding-bottom: 0;
  }
  .xxl-fc16__hero-cover { max-width: 140px; margin: 0 auto; }
  .xxl-fc16 img.xxl-fc16__logo-img { max-width: 140px; }
  /* Restore 2-col desktop look on mobile — logo + sponsor visible */
  .xxl-fc16__pill { display: none; }
  .xxl-fc16__logo-img { display: block; }
  .xxl-fc16__hero-logo { display: block; }
  /* Desktop sponsor inside hero-logo is now visible; hide the mobile-only sibling */
  .xxl-fc16 img.xxl-fc16__sponsor--mobile { display: none; }
  .xxl-fc16 img.xxl-fc16__sponsor--desktop { max-width: 125px; }

  .xxl-fc16__stat-banner { gap: 14px; margin-top: 40px; padding: 0 0 4px; }
  .xxl-fc16__stat-num { font-size: 54px; text-shadow: 3px 3px 0 var(--xxl-black); }
  .xxl-fc16__stat-lbl { font-size: 14px; }
  .xxl-fc16__stat-sep { font-size: 28px; padding-bottom: 18px; }

  .xxl-fc16__hero-intro { font-size: 20px; }

  .xxl-fc16 .xxl-fc16__section-title { font-size: 44px; padding: 20px 20px 16px; }
  .xxl-fc16__grid { grid-template-columns: 1fr; gap: 14px; padding: 0 20px; }

  /* Padding lives on the base rule (always present) for the same no-snap
     reason as desktop — see comment in the main drawer rule. */
  .xxl-fc16__drawer { padding: 24px 22px 28px; }
  /* Stat-card has been removed — no flex/order trick needed; drawer-grid
     and bio simply flow naturally as block on mobile. */
  .xxl-fc16__bio-name { font-size: 40px; }

  .xxl-fc16__cyphers { padding: 0 20px 32px; }
  .xxl-fc16__tab { font-size: 16px; padding: 12px 8px; }
  .xxl-fc16__tabs { box-shadow: 6px 6px 0 var(--xxl-black); }
  .xxl-fc16__videos { padding: 0 20px 32px; }
  .xxl-fc16__videos-wrap { box-shadow: 6px 6px 0 var(--xxl-pink); }

  /* On mobile the splatters keep their punch — slight opacity drop only. */
  .xxl-fc16__bg-shape { opacity: 0.65; }
}

@media (max-width: 420px) {
  .xxl-fc16__pill { font-size: 24px; }
  .xxl-fc16__stat-num { font-size: 46px; }
  .xxl-fc16__bio-name { font-size: 32px; }
  .xxl-fc16 .xxl-fc16__section-title { font-size: 36px; }
  .xxl-fc16__hero-intro { font-size: 18px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .xxl-fc16 *,
  .xxl-fc16 *::before,
  .xxl-fc16 *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .xxl-fc16__hero-cover { transform: rotate(-1.5deg) !important; opacity: 1 !important; }
  .xxl-fc16__hero-logo { transform: rotate(2.5deg) !important; opacity: 1 !important; }
  .xxl-fc16__bg-shape { transform: none !important; }
  .xxl-fc16__section-title .xxl-fc16__title-bar { width: 200px; }
}


/* =====================================================================
   MOBILE APP STYLES — unconditional (no media query) mirror of every rule
   in @media (max-width: 720px), scoped to .mainContent so the Townsquare
   app webview always renders the mobile look regardless of webview width.
   ===================================================================== */
.mainContent .xxl-fc16 { --xxl-card-scroll-offset: 150px; }
.mainContent .xxl-fc16__hero-cover {
    transform: translateY(16px) rotate(-2deg);
    box-shadow: 6px 6px 0 var(--xxl-black);
  }
.mainContent .xxl-fc16.is-loaded .xxl-fc16__hero-cover {
    transform: translateY(0) rotate(-2deg);
    animation: xxl-fc16-cover-breathe 4s ease-in-out 900ms infinite;
  }
.mainContent .xxl-fc16__hero { padding: 24px 12px 16px; }
.mainContent .xxl-fc16__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    padding-bottom: 0;
  }
.mainContent .xxl-fc16__hero-cover { max-width: 140px; margin: 0 auto; }
.mainContent .xxl-fc16 img.xxl-fc16__logo-img { max-width: 140px; }
.mainContent .xxl-fc16__pill { display: none; }
.mainContent .xxl-fc16__logo-img { display: block; }
.mainContent .xxl-fc16__hero-logo { display: block; }
.mainContent .xxl-fc16 img.xxl-fc16__sponsor--mobile { display: none; }
.mainContent .xxl-fc16__stat-banner { gap: 14px; margin-top: 40px; padding: 0 0 4px; }
.mainContent .xxl-fc16__stat-num { font-size: 54px; text-shadow: 3px 3px 0 var(--xxl-black); }
.mainContent .xxl-fc16__stat-lbl { font-size: 14px; }
.mainContent .xxl-fc16__stat-sep { font-size: 28px; padding-bottom: 18px; }
.mainContent .xxl-fc16__hero-intro { font-size: 20px; }
.mainContent .xxl-fc16 .xxl-fc16__section-title { font-size: 44px; padding: 20px 20px 16px; }
.mainContent .xxl-fc16__grid { grid-template-columns: 1fr; gap: 14px; padding: 0 20px; }
.mainContent .xxl-fc16__drawer { padding: 24px 22px 28px; }
.mainContent .xxl-fc16__drawer-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
.mainContent .xxl-fc16__bio { display: contents; }
.mainContent .xxl-fc16__bio-name { order: 1; }
.mainContent .xxl-fc16__bio-meta { order: 2; }
.mainContent .xxl-fc16__stat-card { order: 3; margin: 8px 0 20px; padding: 18px; align-self: stretch; width: 100%; }
.mainContent .xxl-fc16__bio > p:not(.xxl-fc16__bio-meta) { order: 4; }
.mainContent .xxl-fc16__bio-name { font-size: 40px; }
.mainContent .xxl-fc16__cyphers { padding: 0 20px 32px; }
.mainContent .xxl-fc16__tab { font-size: 16px; padding: 12px 8px; }
.mainContent .xxl-fc16__tabs { box-shadow: 6px 6px 0 var(--xxl-black); }
.mainContent .xxl-fc16__bg-shape { opacity: 0.65; }

/* =====================================================================
   APP-ONLY OVERRIDES (outside .mainContent)
   These rules target page chrome the Townsquare mobile app drops above
   the article wrapper — they would duplicate or fight with our own hero.
   Scoped to html.lw-is-app (set by our JS on boot when .mainContent is
   detected) plus a :has() fallback so modern app webviews hide the
   element instantly with no FOUC even before our JS runs.
   ===================================================================== */
/* Hide the WordPress post chrome the Townsquare app renders ABOVE
   .mainContent — confirmed selectors from the live app DOM:
     figure.article-thumbnail   = duplicate hero image
     h1.article                 = duplicate post title
     h2.article                 = post byline + date row
   Both .lw-is-app (JS-set) and :has(.mainContent) (no-FOUC fallback). */
html.lw-is-app figure.article-thumbnail:first-of-type,
html.lw-is-app h1.article,
html.lw-is-app h2.article {
  display: none !important;
}
html:has(.mainContent) figure.article-thumbnail:first-of-type,
html:has(.mainContent) h1.article,
html:has(.mainContent) h2.article {
  display: none !important;
}

/* =====================================================================
   APP FULL-WIDTH BREAKOUT
   The Townsquare app's .mainContent has its own padding/max-width which
   pins .xxl-fc16 to a narrower box than the device viewport. That
   constrains the area available for our parallax splatters and makes
   them look cut off at the edges. Force the embed to span the full
   webview width by using a 100vw width + negative auto-centered margins.
   Scoped to .lw-is-app / :has(.mainContent) so the WordPress web view
   is untouched.
   ===================================================================== */
html.lw-is-app .xxl-fc16,
html:has(.mainContent) .xxl-fc16 {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =====================================================================
   THE STORY
   ===================================================================== */
.xxl-fc16__story {
  position: relative;
  z-index: 1;
  padding: 0 32px 40px;
}
/* The story body becomes a soft-tinted "tile" with the same 3-color brand
   gradient used on the artist drawers — provides a unified backdrop for
   the long-form text and the infographics inside. */
.xxl-fc16__story-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 36px 36px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(244,197,24,0.20) 0%,
    rgba(229,22,127,0.10) 50%,
    rgba(0,175,254,0.14) 100%);
    background-color: #ffffffb0;
}
/* Article headline inside the story body — the long form title from the
   doc. Sits below the section title "THE STORY". Specificity bumped
   (.xxl-fc16 h3.xxl-fc16__story-headline) to beat the .xxl-fc16 h3
   margin-reset rule. */
.xxl-fc16 h3.xxl-fc16__story-headline {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--xxl-black);
  margin-bottom: 36px;
}
.xxl-fc16__story-headline em {
  font-style: italic;
  color: var(--xxl-pink);
}

.xxl-fc16__story-body p {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  color: #1a1a1a;
}

/* Pull-quote treatment for the "Who's here in 2026?" line. */
.xxl-fc16__story-pullquote {
  font-family: var(--font-display);
  font-size: 32px !important;     /* override .story-body p { 20px } above */
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em !important;
  color: var(--xxl-pink) !important;
  text-align: center;
  margin: 28px 0 !important;
}

@media (max-width: 720px) {
  .xxl-fc16 h3.xxl-fc16__story-headline { font-size: 30px; margin-bottom: 28px; }
  .xxl-fc16__story-pullquote { font-size: 28px !important; }
}
.xxl-fc16__story-more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(.2,.7,.2,1),
              opacity 400ms ease 80ms,
              margin 500ms ease;
}
.xxl-fc16__story-more[hidden] { display: block !important; }
.xxl-fc16__story-more.is-expanded {
  /* Mobile wrap pushes the expanded story well past 8000px;
     bumped to 20000px so the bottom never clips. */
  max-height: 20000px;
  opacity: 1;
  margin-top: 0;
}
/* Same visual language as the "Read bio" pill on each artist card.
   Specificity bumped (.xxl-fc16 button.xxl-fc16__story-toggle) to beat
   the .xxl-fc16 button { padding: 0; font: inherit } theme reset. */
.xxl-fc16 button.xxl-fc16__story-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 12px 6px;
  background: var(--xxl-black);
  color: var(--xxl-white);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 220ms ease, background 200ms ease;
}
@media (hover: hover) {
  .xxl-fc16 button.xxl-fc16__story-toggle:hover {
    background: var(--xxl-pink);
    transform: scale(1.06);
  }
}
.xxl-fc16__story-toggle-arrow {
  width: 11px; height: 11px;
  transition: transform 250ms ease;
}
.xxl-fc16__story-toggle[aria-expanded="true"] .xxl-fc16__story-toggle-arrow {
  transform: rotate(180deg);
}

/* ==========================================================================
   INFOGRAPHIC — sticker-card aesthetic.
   Each stat is its own bordered tile with a brand-tinted background and a
   black offset shadow. Tiles alternate accent color (yellow / pink / teal)
   and rotate slightly (±1.5deg) for an organic stamped-on feel. The outer
   container is transparent so the cards stand on their own against the
   story's gradient backdrop.
   ========================================================================== */
.xxl-fc16__infographic {
  /* Tighter bottom margin — too much air was opening up before the next story
     paragraph. Top margin kept slightly larger to separate from the previous
     paragraph. */
  margin: 28px 0 14px;
  padding: 4px;  /* room for tile shadows */
}
.xxl-fc16__infographic-header {
  margin-bottom: 22px;
  text-align: center;
}
.xxl-fc16 h3.xxl-fc16__infographic-title {
  display: inline-block;
  font-family: var(--font-accent);   /* DynaPuff */
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--xxl-white);
  background: var(--xxl-pink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 20px 6px;
  border: 4px solid var(--xxl-black);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--xxl-black);
  transform: rotate(-1.5deg);
  margin: 0 0 14px;
}
/* Specificity bump (.xxl-fc16 p.xxl-fc16__infographic-intro) so the
   .xxl-fc16 p { margin: ... } theme reset doesn't kill the auto-centering. */
.xxl-fc16 p.xxl-fc16__infographic-intro {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--xxl-black);
  letter-spacing: 0.03em;
  max-width: 560px;
  /* text-wrap: balance evens out the line break so "class." doesn't sit alone. */
  text-wrap: balance;
  margin: 0 auto;
}
.xxl-fc16__infographic-intro em { font-style: italic; }

/* Stats grid */
.xxl-fc16__infographic-stats {
  display: grid;
  gap: 18px;
}
.xxl-fc16__infographic-stats[data-cols="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xxl-fc16__infographic-stats[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Sticker card */
.xxl-fc16__infostat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  background: var(--xxl-white);
  border: 3px solid var(--xxl-black);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--xxl-black);
  min-height: 130px;
  justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
/* Rotate every other card a touch in alternating directions */
.xxl-fc16__infostat:nth-child(2n)   { transform: rotate(1.2deg); }
.xxl-fc16__infostat:nth-child(2n+1) { transform: rotate(-1.2deg); }
/* Accent tint backgrounds cycle through yellow / pink / teal */
.xxl-fc16__infostat:nth-child(3n+1) { background: rgba(244,197,24,0.22); box-shadow: 5px 5px 0 var(--xxl-pink); }
.xxl-fc16__infostat:nth-child(3n+2) { background: rgba(229,22,127,0.18); box-shadow: 5px 5px 0 var(--xxl-teal); }
.xxl-fc16__infostat:nth-child(3n)   { background: rgba(0,175,254,0.18);  box-shadow: 5px 5px 0 var(--xxl-yellow); }

@media (hover: hover) {
  .xxl-fc16__infostat:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--xxl-black);
  }
}

.xxl-fc16__infostat-num {
  font-family: var(--font-accent);  /* DynaPuff */
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  color: var(--xxl-black);
  white-space: nowrap;
  /* Prevent wide numbers like "302M+" from spilling past the card edge. */
  max-width: 100%;
}
/* The data-c="..." color directives still work as accent over-rides; the
   tile bg already varies, so the number gets a vivid bold contrast.
   Yellow gets a black stroke so it reads against the tinted card. */
.xxl-fc16__infostat-num[data-c="pink"]   { color: var(--xxl-pink); }
.xxl-fc16__infostat-num[data-c="teal"]   { color: var(--xxl-teal); }
.xxl-fc16__infostat-num[data-c="yellow"] {
  color: var(--xxl-yellow);
  -webkit-text-stroke: 2px var(--xxl-black);
  text-shadow: 3px 3px 0 var(--xxl-black);
}
.xxl-fc16__infostat-lbl {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--xxl-black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.xxl-fc16__infostat-lbl em { font-style: italic; text-transform: none; }

.xxl-fc16__infographic-credit {
  margin-top: 24px;
  text-align: right;
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
  color: var(--xxl-black);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .xxl-fc16__infographic { margin: 22px 0 10px; }
  .xxl-fc16 h3.xxl-fc16__infographic-title { font-size: 30px; padding: 9px 16px 5px; }
  .xxl-fc16__infographic-intro { font-size: 16px; }
  .xxl-fc16__infographic-stats[data-cols="7"],
  .xxl-fc16__infographic-stats[data-cols="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Tighter padding gives the bubble number more room before it would clip. */
  .xxl-fc16__infostat { padding: 14px 6px 12px; min-height: 110px; }
  /* Down to 30px so "302M+" / "240M+" / "200M+" fit inside the 2-col tile. */
  .xxl-fc16__infostat-num { font-size: 30px; margin-bottom: 8px; letter-spacing: 0; }
  /* Yellow stroke scales down with the number to keep proportions clean. */
  .xxl-fc16__infostat-num[data-c="yellow"] {
    -webkit-text-stroke: 1.5px var(--xxl-black);
    text-shadow: 2px 2px 0 var(--xxl-black);
  }
  .xxl-fc16__infostat-lbl { font-size: 12px; }
}

/* =====================================================================
   THE REELS
   ===================================================================== */
.xxl-fc16__reels {
  position: relative;
  z-index: 1;
  padding: 0 32px 40px;
}
.xxl-fc16__reel-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Desktop: flex column so dot indicators sit below the carousel */
.xxl-fc16__reels-wrap {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ---- Dot indicators (below carousel) ---- */
.xxl-fc16__reels-tabs {
  order: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 22px 0 0;
}
.xxl-fc16__reel-tab {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: 0;
  padding: 0;
  flex: none;
  font-size: 0;   /* hide "Reel 1/2/3" text */
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
@media (hover: hover) {
  .xxl-fc16__reel-tab:hover { background: rgba(0,0,0,0.38); }
}
#xxl-fc16-reel-1:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-1"],
#xxl-fc16-reel-2:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-2"],
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-3"],
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-4"],
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-5"],
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-6"],
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-7"],
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-8"],
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reels-tabs label[for="xxl-fc16-reel-9"] {
  background: var(--xxl-pink);
  transform: scale(1.45);
  box-shadow: none;
}

/* Hint shown only on mobile */
.xxl-fc16__reels-hint { display: none; }

/* ---- Peek carousel container ----
   Side panels extend beyond the 460px track width and are visible (not clipped).
   The absolute-positioned panels animate via transform/opacity. */
.xxl-fc16__reels-panels {
  order: 1;
  position: relative;
  width: 460px;
  height: 490px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* All panels always rendered — position absolute, centered, animated
   via transform/opacity. The active radio :checked rules below
   override to bring the matching panel to center and dim the others. */
.xxl-fc16__reel-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 260px;
  aspect-ratio: 9 / 16;
  top: 50%;
  left: 50%;
  background: linear-gradient(135deg, rgba(0,175,254,0.18) 0%, rgba(229,22,127,0.18) 100%);
  border: 4px solid var(--xxl-black);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--xxl-teal);
  text-align: center;
  padding: 16px;
  overflow: hidden;
  pointer-events: none;
  /* Fallback: push off-screen until a :checked rule positions it */
  transform: translate(calc(-50% + 540px), -50%) scale(0.78);
  opacity: 0;
  transition: transform 380ms cubic-bezier(.4,0,.2,1),
              opacity    280ms ease,
              box-shadow 280ms ease;
}

/* ----- reel-1 active ----- */
#xxl-fc16-reel-1:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-1:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-1:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% + 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}

/* ----- reel-2 active ----- */
#xxl-fc16-reel-2:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-2:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-2:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-3 active ----- */
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-4 active ----- */
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 762px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-5 active ----- */
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 1016px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 762px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-5:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="6"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-6 active ----- */
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 1270px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 1016px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% - 762px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="6"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-6:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="7"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-7 active ----- */
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 1524px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 1270px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% - 1016px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(calc(-50% - 762px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="6"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="7"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-7:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="8"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-8 active ----- */
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(calc(-50% - 1778px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] {
  transform: translate(calc(-50% - 1524px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] {
  transform: translate(calc(-50% - 1270px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] {
  transform: translate(calc(-50% - 1016px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] {
  transform: translate(calc(-50% - 762px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="6"] {
  transform: translate(calc(-50% - 508px), -50%) scale(0.78);
  opacity: 0; z-index: 0;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="7"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="8"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}
#xxl-fc16-reel-8:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="9"] {
  transform: translate(calc(-50% + 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}

/* ----- reel-9 active ----- */
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] { transform: translate(calc(-50% - 2032px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] { transform: translate(calc(-50% - 1778px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] { transform: translate(calc(-50% - 1524px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] { transform: translate(calc(-50% - 1270px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="5"] { transform: translate(calc(-50% - 1016px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="6"] { transform: translate(calc(-50% - 762px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="7"] { transform: translate(calc(-50% - 508px), -50%) scale(0.78); opacity: 0; z-index: 0; }
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="8"] {
  transform: translate(calc(-50% - 254px), -50%) scale(0.78);
  opacity: 0.5; z-index: 1;
  box-shadow: 5px 5px 0 var(--xxl-teal);
}
#xxl-fc16-reel-9:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="9"] {
  transform: translate(-50%, -50%);
  opacity: 1; z-index: 2; pointer-events: auto;
}

/* Real reel content (iframe/video) fills the frame edge-to-edge. */
.xxl-fc16__reel-panel iframe,
.xxl-fc16__reel-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* Overlay injected by JS — covers inactive panels so clicking them navigates;
   deactivated on the active panel so the YouTube player stays interactive. */
.xxl-fc16__reel-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}
/* Active panel: drop overlay so YouTube gets clicks */
#xxl-fc16-reel-1:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="1"] .xxl-fc16__reel-overlay,
#xxl-fc16-reel-2:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="2"] .xxl-fc16__reel-overlay,
#xxl-fc16-reel-3:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="3"] .xxl-fc16__reel-overlay,
#xxl-fc16-reel-4:checked ~ .xxl-fc16__reels-wrap .xxl-fc16__reel-panel[data-panel="4"] .xxl-fc16__reel-overlay {
  pointer-events: none;
}
@media (max-width: 720px) {
  .xxl-fc16__reel-overlay { display: none; }
}

/* Single-reel mode — hide tabs, hint, and peek panels */
.xxl-fc16__reels--single .xxl-fc16__reels-tabs { display: none !important; }
.xxl-fc16__reels--single .xxl-fc16__reels-hint { display: none !important; }
.xxl-fc16__reels--single .xxl-fc16__reel-panel[data-panel="2"],
.xxl-fc16__reels--single .xxl-fc16__reel-panel[data-panel="3"] { display: none !important; }
/* Desktop: clip container + lock panel 1 centered so radio state can't shift it */
.xxl-fc16__reels--single .xxl-fc16__reels-panels { overflow: hidden; }
.xxl-fc16__reels--single .xxl-fc16__reel-panel[data-panel="1"] {
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
/* Mobile: lock scroll, center panel, override the desktop transform lock */
@media (max-width: 720px) {
  .xxl-fc16__reels--single .xxl-fc16__reels-panels {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    justify-content: center !important;
  }
  .xxl-fc16__reels--single .xxl-fc16__reel-panel[data-panel="1"] {
    transform: none !important;
    top: auto !important;
    left: auto !important;
    position: relative !important;
  }
}

.xxl-fc16__reel-coming-soon {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--xxl-black);
}

/* ----- Mobile: horizontal scroll carousel (unchanged) ----- */
@media (max-width: 720px) {
  .xxl-fc16__reels { padding: 0 0 32px; }
  /* Reset desktop flex-column wrap */
  .xxl-fc16__reels-wrap { display: block; }
  .xxl-fc16__reels-tabs { display: none; }
  .xxl-fc16__reels-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 20px 14px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a6a6a;
  }
  .xxl-fc16__reels-hint svg { width: 22px; height: 14px; }
  .xxl-fc16__reels-panels {
    /* Reset desktop fixed-size carousel container */
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    padding: 12px 20px 24px;
    border: 0;
    box-shadow: none;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .xxl-fc16__reels-panels::-webkit-scrollbar { display: none; }
  /* Every panel is visible in the horizontal scroll */
  .xxl-fc16__reel-panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* Keep relative so video's position:absolute stays inside the panel */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 78%;
    width: auto;
    max-width: none;
    margin: 0;
    scroll-snap-align: center;
  }
}

/* ============================================================
   THE FREESTYLES SECTION
   ============================================================ */
.xxl-fc16__section-title--blue .xxl-fc16__title-bar { background: var(--xxl-teal); }
.xxl-fc16 .xxl-fc16__freestyles .xxl-fc16__section-title {
  padding-left: 0;
  padding-right: 0;
}

.xxl-fc16__freestyles { padding: 0 32px 40px; position: relative; z-index: 1; }

.xxl-fc16__fs-tabs {
  border: 4px solid var(--xxl-black);
  box-shadow: 10px 10px 0 var(--xxl-teal);
  background: var(--xxl-white);
}

.xxl-fc16__fs-tab-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 8px;
  padding: 18px 16px;
  border-bottom: 4px solid var(--xxl-black);
  background: #f5f5f5;
}

.xxl-fc16__fs-tab {
  display: block;
  cursor: pointer;
}

.xxl-fc16__fs-tab img {
  width: 100%;
  border-radius: 6px;
  display: block;
  transition: opacity 150ms ease;
}

.xxl-fc16__fs-tab span { display: none; }

/* Active photo tab — blue outline */
#xxl-fc16-fs-1:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-1"],
#xxl-fc16-fs-2:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-2"],
#xxl-fc16-fs-3:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-3"],
#xxl-fc16-fs-4:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-4"],
#xxl-fc16-fs-5:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-5"],
#xxl-fc16-fs-6:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-6"],
#xxl-fc16-fs-7:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-7"],
#xxl-fc16-fs-8:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-8"],
#xxl-fc16-fs-9:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-9"],
#xxl-fc16-fs-10:checked ~ .xxl-fc16__fs-tabs .xxl-fc16__fs-tab-row label[for="xxl-fc16-fs-10"] {
  outline: 3px solid var(--xxl-teal);
  outline-offset: 2px;
  border-radius: 6px;
}

.xxl-fc16__fs-scroll-tip {
  display: none;
}

/* Panel visibility */
#xxl-fc16-fs-1:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="1"],
#xxl-fc16-fs-2:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="2"],
#xxl-fc16-fs-3:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="3"],
#xxl-fc16-fs-4:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="4"],
#xxl-fc16-fs-5:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="5"],
#xxl-fc16-fs-6:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="6"],
#xxl-fc16-fs-7:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="7"],
#xxl-fc16-fs-8:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="8"],
#xxl-fc16-fs-9:checked  ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="9"],
#xxl-fc16-fs-10:checked ~ .xxl-fc16__fs-tabs .xxl-fc16__tab-panels .xxl-fc16__tab-panel[data-panel="10"] {
  display: block;
}

@media (max-width: 720px) {
  .xxl-fc16__freestyles { padding: 0 20px 32px; }
  .xxl-fc16__fs-tabs { box-shadow: 6px 6px 0 var(--xxl-teal); }
  .xxl-fc16__fs-tab-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding: 12px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .xxl-fc16__fs-tab-row::-webkit-scrollbar { display: none; }
  .xxl-fc16__fs-tab { flex: 0 0 22vw; }
  .xxl-fc16__fs-scroll-tip {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #888;
    padding: 4px 0 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* Primis ad margin — animates mount down when player is present */
#xxl-fc16-root {
  transition: margin-top 0.4s ease;
}

/* =====================================================================
   Townsquare WordPress Specific Styles
   DO NOT MODIFY — leave this block as-is.
   ===================================================================== */

section, .divider, .footer-inner {
  z-index: 0;
}

.main-content > .wrapper.post-wrapper .content {
  padding: 10px;
}

.page-header {
  display: none;
}

.mobile .post .content-wrap, .mobile .main-content > .wrapper.post-wrapper .content {
  padding: 0px;
}

.mobile .post .content-footer {
  padding: 0px 20px;
}

.desktop body {
  background-attachment: fixed !important;
  background-position: center bottom;
  background-image: url(https://xxlmag.s3.amazonaws.com/freshman/2016-Freshman-Anniversary/images/website-bg.jpg);
}

[id^="primis_container_div_"] > div:first-child {
  bottom: 50px !important;
  top: unset !important;
}