/* Organizer page: luminous hero + depth over the flat spotlight system.
   Page-scoped — every rule sits under .organizer-page so no other page shifts. */

.organizer-page .profile-hero,
.organizer-page .spotlight-hero.profile-hero {
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(66,133,244,.16), transparent 62%),
    radial-gradient(700px 460px at 18% 12%, rgba(234,67,53,.10), transparent 60%),
    radial-gradient(760px 520px at 52% 102%, rgba(251,188,4,.13), transparent 62%),
    radial-gradient(620px 420px at 92% 88%, rgba(52,168,83,.12), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, #f3f7ff 58%, #eef3fc 100%);
  color: #202124;
  border-bottom: 1px solid #e3e9f4;
  padding-block: clamp(56px, 8vw, 104px) clamp(56px, 7vw, 92px);
}
.organizer-page .profile-hero::after { display: none; }
.organizer-page .profile-hero h1 { color: #202124; letter-spacing: -.045em; }
.organizer-page .profile-hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #1a73e8 0%, #7b4dff 42%, #ea4335 78%, #f9ab00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.organizer-page .profile-hero .spotlight-lede { color: #4a5059; }
.organizer-page .profile-hero .spotlight-kicker { color: #1a73e8; }

/* The hero is two columns now, so the 8vw display size from spotlight-pages
   overflows its column and breaks words. Scale to the column, not the page. */
.organizer-page .org-hero-copy h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1.02;
  overflow-wrap: normal;
  hyphens: none;
  max-width: 14ch;
}
.organizer-page .org-hero-copy .spotlight-lede { font-size: clamp(.98rem, 1.3vw, 1.12rem); max-width: 46ch; }
@media (max-width: 980px) {
  .organizer-page .org-hero-copy h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); max-width: 18ch; }
}

/* two-column hero */
.org-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.organizer-page .profile-portrait { gap: 16px; margin-bottom: 22px; }
.organizer-page .profile-avatar {
  width: 68px; height: 68px; font-size: 2rem;
  background: linear-gradient(145deg, #1a73e8, #7b4dff);
  color: #fff;
  box-shadow: 0 10px 26px rgba(26,115,232,.34), 0 0 0 6px rgba(255,255,255,.9);
}
.organizer-page .profile-portrait span { color: #4a5059; }
.organizer-page .profile-links { gap: 12px; margin-top: 26px; }
.organizer-page .profile-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid #cfd9ec; background: rgba(255,255,255,.88);
  color: #1a73e8; font-weight: 700; text-decoration: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(32,33,36,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.organizer-page .profile-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(32,33,36,.12); }
.organizer-page .profile-links a.primary {
  background: linear-gradient(135deg, #1a73e8, #4285f4); color: #fff; border-color: transparent;
  box-shadow: 0 10px 26px rgba(26,115,232,.32);
}

.organizer-page .spotlight-metric-row { border-top-color: #d8e1f2; margin-top: 40px; }
.organizer-page .spotlight-metric { border-right-color: #d8e1f2; }
.organizer-page .spotlight-metric strong {
  background: linear-gradient(120deg, #1a73e8, #7b4dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.organizer-page .spotlight-metric span { color: #5f6368; }

/* ── Orbit constellation ───────────────────────────────────────────────── */
.org-orbit { position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; margin-inline: auto; }
.org-orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.org-orbit-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(26,115,232,.14);
  inset: 14%;
}
.org-orbit-ring.r2 { inset: 2%; border-color: rgba(123,77,255,.10); }

.org-orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef3ff 52%, #e3ecff 100%);
  box-shadow: 0 22px 54px rgba(26,115,232,.26), inset 0 0 0 1px rgba(255,255,255,.9);
}
.org-orbit-core img { width: 58%; height: 58%; object-fit: contain; }
.org-orbit-core::after {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(123,77,255,.20) 0%, transparent 66%);
}

.org-node {
  position: absolute; width: 19%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 24%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(32,33,36,.14), inset 0 0 0 1px rgba(255,255,255,.9);
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  will-change: transform;
}
.org-node img { width: 56%; height: 56%; object-fit: contain; }
.org-node span {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; color: #5f6368; white-space: nowrap;
}

/* four-point brand sparks */
.org-spark { position: absolute; width: 14px; height: 14px; opacity: .85; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.org-spark svg { width: 100%; height: 100%; display: block; }

/* ── Depth on the content sections ─────────────────────────────────────── */
.organizer-page .spotlight-card {
  border-color: #e3e9f4;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(32,33,36,.05), 0 12px 30px rgba(32,33,36,.07);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.organizer-page .spotlight-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #4285f4, #ea4335, #f9ab00, #34a853);
  opacity: .9;
}
.organizer-page .spotlight-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(32,33,36,.13); }
.organizer-page .dark .spotlight-card { box-shadow: none; }

.organizer-page .badge-total {
  background: linear-gradient(150deg, #e8f0fe 0%, #eee8ff 100%);
  box-shadow: 0 14px 34px rgba(26,115,232,.14);
}
.organizer-page .badge-total strong {
  background: linear-gradient(120deg, #1a73e8, #7b4dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.organizer-page .spotlight-logo-chip {
  border-color: #e3e9f4; box-shadow: 0 6px 16px rgba(32,33,36,.06);
  transition: transform .18s ease;
}
.organizer-page .spotlight-logo-chip:hover { transform: translateY(-2px); }

.organizer-page .spotlight-section.dark {
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(66,133,244,.26), transparent 62%),
    radial-gradient(620px 420px at 88% 100%, rgba(251,188,4,.16), transparent 60%),
    #1b1c1f;
}

/* ── Badge wall (restored) ─────────────────────────────────────────────── */
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.pb-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid #e3e9f4; border-radius: 18px; background: #fff;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  box-shadow: 0 1px 2px rgba(32,33,36,.05), 0 10px 24px rgba(32,33,36,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(32,33,36,.13); }
.pb-card:focus-visible { outline: 2px solid #1a73e8; outline-offset: 3px; }
.pb-card-art { position: relative; display: grid; place-items: center; padding: 28px 0; }
.tone-blue { background: linear-gradient(160deg,#eaf1fe,#dbe7fd); }
.tone-green { background: linear-gradient(160deg,#e7f5ec,#d8eede); }
.tone-yellow { background: linear-gradient(160deg,#fef7e1,#fdefc9); }
.tone-red { background: linear-gradient(160deg,#fdeae8,#fadcd8); }
.pb-art { width: 92px; height: 92px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(32,33,36,.16); }
.pb-art--placeholder { display: grid; place-items: center; }
.pb-art--placeholder img { width: 42px; height: 42px; opacity: .55; }
.pb-count-chip {
  position: absolute; right: calc(50% - 54px); bottom: 24px;
  min-width: 30px; height: 30px; padding: 0 7px; display: grid; place-items: center;
  border-radius: 999px; background: #1a73e8; color: #fff; font-size: .78rem; font-weight: 700;
  border: 2px solid #fff;
}
.pb-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; flex: 1; }
.pb-card-name { font-size: .9rem; font-weight: 700; line-height: 1.35; color: #202124; }
.pb-card-date { margin-top: auto; font-size: .78rem; color: #5f6368; }
.pb-expand {
  display: block; margin: 30px auto 0; padding: 11px 24px;
  border: 1px solid #cfd9ec; border-radius: 999px; background: #fff;
  color: #1a73e8; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pb-expand:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(32,33,36,.12); }

.pb-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; background: rgba(32,33,36,.56); backdrop-filter: blur(3px); }
.pb-modal[hidden] { display: none; }
.pb-modal-panel { position: relative; width: min(400px,100%); padding: 38px 28px 30px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.34); }
.pb-modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; color: #5f6368; cursor: pointer; }
.pb-modal-close:hover { background: rgba(0,0,0,.06); }
.pb-modal-art { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto 22px; border-radius: 50%; position: relative; }
.pb-modal-art .pb-art { width: 128px; height: 128px; }
.pb-modal-art .pb-art--placeholder img { width: 60px; height: 60px; }
.pb-modal-art .pb-count-chip { right: 14px; bottom: 14px; }
.pb-modal-panel h3 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.35; color: #202124; }
.pb-modal-date { margin: 0; color: #5f6368; font-size: .86rem; }

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Only armed once JS adds .js-reveal, so the page is fully readable if the
   script is blocked or fails. The hero is never hidden. */
html.js-reveal .organizer-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-reveal .organizer-page .reveal.is-in { opacity: 1; transform: none; }
html.js-reveal .organizer-page .reveal-stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js-reveal .organizer-page .reveal-stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .organizer-page .reveal,
  html.js-reveal .organizer-page .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .org-node, .org-spark { animation: none !important; }
}

@media (max-width: 980px) {
  .org-hero-grid { grid-template-columns: 1fr; }
  .org-orbit { max-width: 420px; margin-top: 8px; }
  .pb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .org-orbit { max-width: 320px; }
  .org-node span { display: none; }
  .pb-grid { grid-template-columns: 1fr; }
}

/* ── Readability fix ───────────────────────────────────────────────────────
   The spotlight system is designed for a light page, but the site body is
   #0f0f0f. That left the .alt section rendering near-white text on a
   near-white panel (the "72 badges" heading and every badge caption were
   effectively invisible). Make the organizer main surface light and pin the
   text colours so nothing depends on the inherited dark-body colour. */
.organizer-page main {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 46%, #f2f6fd 100%);
  color: #202124;
}
.organizer-page .spotlight-section:not(.dark) { color: #202124; }
.organizer-page .spotlight-section:not(.dark) h2,
.organizer-page .spotlight-section:not(.dark) h3,
.organizer-page .category-band h3,
.organizer-page .badge-total span { color: #202124; }
.organizer-page .spotlight-section:not(.dark) .spotlight-section-intro,
.organizer-page .spotlight-section:not(.dark) .spotlight-card p,
.organizer-page .category-band p,
.organizer-page .badge-grid figcaption { color: #5f6368; }
.organizer-page .spotlight-section:not(.dark) .spotlight-kicker { color: #1a73e8; }
.organizer-page .badge-grid figure {
  background: #fff; border-color: #e3e9f4;
  box-shadow: 0 1px 2px rgba(32,33,36,.05), 0 8px 20px rgba(32,33,36,.06);
}
.organizer-page .category-band { border-top-color: #dde4f0; }

/* organizer.js emits <figure class="badge-band-item"><img><span>caption</span>,
   but .badge-band-item styling was dropped in the rewrite, so the span fell
   back to inline and collided with the badge image. Restore it. */
.organizer-page .badge-grid figure.badge-band-item {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.organizer-page .badge-grid figure.badge-band-item img { width: 72px; height: 72px; object-fit: contain; }
.organizer-page .badge-grid figure.badge-band-item span {
  display: block; color: #5f6368; font-size: .72rem; line-height: 1.3; text-align: center;
}