:root {
  --cream: #fff3c1;
  --purple: #520472;
  --ink: var(--cream);
  --muted: var(--cream);
  --violet: var(--purple);
  --deep-violet: var(--purple);
  --sidebar-rail-w: 64px;
  --sidebar-rail-w-open: 236px;
  --sidebar-mobile-bar-h: 56px;
}

/* Desktop rail: a slim icon-only strip fixed to the left edge that widens
   on hover to reveal labels - an overlay, not a layout push, so it doesn't
   require reflowing every page's existing absolute/fixed hero layouts. */
.app-sidebar-desktop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
  width: var(--sidebar-rail-w);
  padding: 22px 0;
  background: var(--purple);
  overflow: hidden;
  transition: width .3s ease;
}
.app-sidebar-desktop:hover {
  width: var(--sidebar-rail-w-open);
}
.app-sidebar-desktop .app-sidebar-logo,
.app-sidebar-desktop .app-sidebar-links {
  width: 100%;
}

.app-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  text-decoration: none;
  white-space: nowrap;
}
.app-sidebar-logo img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}
.app-sidebar-logo-text {
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .2s ease;
}
.app-sidebar-desktop:hover .app-sidebar-logo-text { opacity: 1; }

.app-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  color: rgba(255,243,193,.72);
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .01em;
  transition: color .2s ease, background .2s ease;
}
.app-sidebar-link svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.app-sidebar-link span {
  opacity: 0;
  transition: opacity .2s ease;
}
.app-sidebar-desktop:hover .app-sidebar-link span { opacity: 1; }
.app-sidebar-link:hover {
  color: var(--cream);
  background: rgba(255,243,193,.08);
}

.app-sidebar-group-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  background: none;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  text-align: left;
}
.app-sidebar-group-toggle:focus,
.app-sidebar-group-toggle:focus-visible {
  outline: none;
  background: rgba(255,243,193,.08);
}
.app-sidebar-chevron {
  margin-left: auto;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.app-sidebar-desktop:hover .app-sidebar-chevron,
.app-sidebar-drawer .app-sidebar-chevron {
  opacity: .6;
}
.app-sidebar-group-toggle[aria-expanded="true"] .app-sidebar-chevron {
  transform: rotate(90deg);
}

.app-sidebar-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
}
.app-sidebar-submenu.is-open {
  max-height: 320px;
  opacity: 1;
}
.app-sidebar-sublink {
  padding: 9px 20px 9px 55px;
  color: rgba(255,243,193,.62);
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .04em;
  transition: color .2s ease, background .2s ease;
}
.app-sidebar-sublink:hover {
  color: var(--cream);
  background: rgba(255,243,193,.08);
}
.app-sidebar-drawer-links .app-sidebar-sublink {
  font-size: 14px;
  padding: 11px 12px 11px 46px;
}

/* Mobile: a top bar with a hamburger that opens a full-screen drawer,
   rather than trying to squeeze a hover-expand rail onto a touch screen. */
.app-sidebar-mobile-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: var(--sidebar-mobile-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--purple);
}
.app-sidebar-mobile-logo img {
  height: 24px;
  width: auto;
  display: block;
}
.app-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--cream);
  cursor: pointer;
}
.app-sidebar-toggle svg {
  width: 22px;
  height: 22px;
}

.app-sidebar-drawer {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--purple);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No [hidden] attribute here - a prior bug on this site taught us an
     author display rule always beats the UA [hidden] default regardless
     of specificity, so visibility toggles purely via this class instead. */
  transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
}
.app-sidebar-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.app-sidebar-drawer-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--cream);
  cursor: pointer;
}
.app-sidebar-drawer-close svg {
  width: 22px;
  height: 22px;
}
.app-sidebar-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 34px;
}
.app-sidebar-drawer-links .app-sidebar-link {
  font-size: 16px;
  padding: 15px 12px;
}
.app-sidebar-drawer-links .app-sidebar-link span {
  opacity: 1;
}

@media (min-width: 768px) {
  .app-sidebar-desktop { display: flex; }
  .app-sidebar-mobile-bar,
  .app-sidebar-drawer { display: none; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { background: #fff; color: var(--purple); font-family: 'Raleway', sans-serif; }

.site-page { background: var(--purple); }
/* z-index above the globe/mask/atmosphere (siblings, z-index 1-2) so the
   register button and countdown paint on top from first load, not just
   after ScrollTrigger's pin restructures the DOM on scroll; background is
   transparent so the globe still shows through (.site-page behind supplies
   the same purple). */
.pecon-page { position: relative; z-index: 3; min-height: 100svh; overflow: hidden; background: transparent; color: var(--cream); }
/* Fixed overlay, not a section in flow: the carousel has to fade in on top
   of the still-zooming globe during the tail of the pinned hero timeline.
   In normal flow it could only appear after the pin released, which left a
   dead blank-wireframe scroll-stop in between. opacity/pointer-events are
   driven by the scrub timeline in js/motion.js. */
/* will-change promotes this to its own GPU compositing layer. Without it,
   the carousel's per-frame repaint (updateFocusStates in
   committee-carousel.js rewrites opacity/pointer-events on 7 cards every
   rAF tick) is expensive enough that the browser can fall a frame behind
   during an active scroll gesture, so the section visibly lags/scrolls
   with the page for an instant before snapping back - the simple
   already-composited globe canvas never shows this because it has nothing
   comparably expensive to repaint. */
.next-section { position: fixed; inset: 0; z-index: 10; opacity: 0; pointer-events: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 30px); padding: 7vh 24px 7vh; will-change: transform; }
.white-motion { min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 6vw, 76px); background: #fff; color: var(--purple); }
.white-motion-track { width: max-content; font-size: clamp(42px, 9vw, 130px); font-weight: 800; letter-spacing: -.08em; line-height: .8; white-space: nowrap; animation: white-drift 24s linear infinite; }
.white-motion-track-reverse { animation-direction: reverse; animation-duration: 30s; }
@keyframes white-drift { from { transform: translateX(-20%); } to { transform: translateX(0); } }
.motion-center { position: absolute; inset: 50% auto auto 50%; width: min(90vw, 760px); transform: translate(-50%, -53%); text-align: center; }
.pecon-globe { position: fixed; inset: 0; z-index: 1; opacity: .38; filter: drop-shadow(0 0 60px rgba(255,243,193,.1)); }
/* The canvas/mask/atmosphere live in index.html as siblings of .pecon-page,
   not children of it - GSAP's ScrollTrigger un-pins .pecon-page by giving it
   a `transform` once scroll passes the pinned range, and a transformed
   ancestor becomes the containing block for any position:fixed descendant,
   which would silently drag these off their viewport-fixed position. Keeping
   them outside that subtree is what makes them stay glued to the screen. */
.globe-mask { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to bottom, transparent 0%, var(--purple) 32%, var(--purple) 100%); pointer-events: none; }
.atmosphere { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 78% 62% at 50% 53%, rgba(255,243,193,.08) 0%, transparent 48%), radial-gradient(circle at 50% 48%, transparent 0 20%, rgba(82,4,114,.2) 67%, rgba(82,4,114,.75) 100%); }
/* In-flow spacer with no visible content - its only job is to give the
   page extra scroll distance. js/motion.js scrubs .reveal-fixed's transform
   across this element's scroll range, carrying the globe+carousel unit up
   and off-screen so the footer can take over instead of the globe just
   sitting there rendering over it. */
.reveal-spacer { height: 100svh; }
.topbar { position: absolute; inset: 30px 38px auto; display: flex; justify-content: space-between; align-items: center; color: rgba(255,243,193,.78); font-size: 10px; letter-spacing: .22em; }
.eyebrow, .location { color: var(--cream); }
.hero, .motion-center { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: min(90vw, 760px); transform: translate(-50%, -28%); text-align: center; transform-origin: center center; will-change: transform, opacity; transition: opacity .08s linear; }
.event-logo { display: block; width: min(55vw, 330px); height: auto; margin: 0 auto 30px; transform: translateY(-14px); filter: drop-shadow(0 0 12px rgba(255,243,193,.35)); animation: logo-pulse 4s ease-in-out infinite; }
.register-btn-slot { display: flex; justify-content: center; margin-top: 6px; }
.register-btn-slot .glass-container { margin: 0 auto; }
/* Arrows sit off-canvas (left:-25%/right:-25%) until hover slides them in -
   without clipping they'd float outside the pill's rounded edge at rest. */
.register-btn-slot .glass-button { overflow: hidden; }

/* Text sits on the liquid-glass button's own canvas/shader background;
   only the arrow-slide + circle-fill + color-invert motion is layered on
   top, so the glass refraction effect is untouched. */
.register-btn-slot .glass-button-text {
  color: var(--cream);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  z-index: 3;
  transform: translate(-50%, -50%) translateX(-6px);
  transition: transform .8s ease-out, color .6s ease;
}
.register-btn-slot .glass-button:hover .glass-button-text {
  transform: translate(-50%, -50%) translateX(6px);
  color: var(--purple);
}

.register-btn-slot .flow-btn-arrow {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  z-index: 2;
  color: var(--cream);
  pointer-events: none;
  transform: translateY(-50%);
  transition: left .8s cubic-bezier(.34,1.56,.64,1), right .8s cubic-bezier(.34,1.56,.64,1), color .8s cubic-bezier(.34,1.56,.64,1);
}
.register-btn-slot .flow-btn-arrow-left { left: -30%; }
.register-btn-slot .glass-button:hover .flow-btn-arrow-left { left: 16px; color: var(--purple); }
.register-btn-slot .flow-btn-arrow-right { right: 16px; }
.register-btn-slot .glass-button:hover .flow-btn-arrow-right { right: -30%; color: var(--purple); }

.register-btn-slot .flow-btn-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .8s cubic-bezier(.19,1,.22,1), height .8s cubic-bezier(.19,1,.22,1), opacity .8s cubic-bezier(.19,1,.22,1);
}
.register-btn-slot .glass-button:hover .flow-btn-circle { width: 220%; height: 220%; opacity: .7; }

@keyframes logo-pulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(255,243,193,.25)); } 50% { filter: drop-shadow(0 0 20px rgba(255,243,193,.55)); } }
.countdown-wrap { position: absolute; z-index: 3; bottom: 35px; left: 50%; transform: translateX(-50%); text-align: center; }
.countdown-label { display: flex; justify-content: center; align-items: center; gap: 9px; color: var(--cream); font-size: 9px; letter-spacing: .3em; }
.countdown-label span { width: 5px; height: 5px; border-radius: 50%; background: var(--cream); }
.countdown { display: flex; align-items: flex-start; justify-content: center; gap: clamp(11px, 2vw, 23px); margin-top: 10px; }
.countdown div { display: flex; flex-direction: column; align-items: center; }
.countdown strong { color: var(--cream); font-size: clamp(26px, 4vw, 44px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: transform .25s ease; }
.countdown div:hover strong { transform: translateY(-2px); }
.countdown small, .countdown b { color: var(--cream); }
.countdown small { margin-top: 7px; font-size: 8px; letter-spacing: .24em; }
.countdown b { font-size: 25px; font-weight: 300; line-height: 1; }
.scroll-note { position: absolute; right: 38px; bottom: 39px; display: flex; align-items: center; gap: 10px; color: rgba(255,243,193,.54); font-size: 8px; letter-spacing: .2em; writing-mode: vertical-rl; }
.scroll-line { width: 1px; height: 30px; background: linear-gradient(var(--cream), transparent); }

.committee-heading {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: var(--cream);
}
@media (max-width: 767px) {
  .committee-heading { top: calc(var(--sidebar-mobile-bar-h) + 3vh); }
}
.committee-eyebrow { display: block; font-size: 10px; letter-spacing: .28em; opacity: .7; margin-bottom: 10px; }
.committee-heading h2 { margin: 0; font-size: clamp(28px, 5vw, 46px); font-weight: 600; letter-spacing: -.02em; }


.committee-carousel {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  width: 100%;
  /* This flex wrapper paints after (on top of) the CSS3DRenderer's own
     container - which is inserted as #nextSection's first child - so even
     with carousel-stage passed-through, this wrapper's own box was still
     the topmost hit-target over the actual cards. Pass it through too;
     only the nav buttons opt back in below. */
  pointer-events: none;
}

/* Just a layout spacer reserving room for the nav buttons either side - the
   cards themselves are real THREE.CSS3DObject instances, rendered by a
   THREE.CSS3DRenderer nested inside #nextSection (see committee-carousel.js)
   directly into the globe's own scene/camera, so nothing is laid out inside
   this box. */
.carousel-stage {
  position: relative;
  width: min(94vw, 860px);
  height: 320px;
  /* Purely a layout spacer (see comment above) - the real interactive
     cards render in the CSS3DRenderer's own DOM container, which sits
     earlier in #nextSection's DOM order and therefore *underneath* this
     box in default stacking. Without this, this empty div was the
     topmost hit-target over the cards, silently eating hover/click. */
  pointer-events: none;
}

.carousel-card {
  /* THREE.CSS3DObject owns `transform`: it sets a matrix3d PLUS its own
     translate(-50%,-50%) prefix (see CSS3DRenderer.js's getObjectCSSMatrix),
     so the element is already recentered on its 3D anchor point - no extra
     negative margin here, or the card ends up double-offset. */
  position: absolute;
  width: 220px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  /* Thin and low-opacity, matching the wireframe's own line weight/opacity
     (see wireMat in pecon-globe.js) rather than a distinct "glass popup"
     stroke - and a lighter, less-blurred fill so the grid underneath keeps
     reading through, so the card looks etched onto the sphere rather than
     laid over it. */
  border: 1px solid rgba(255,243,193,.55);
  background: linear-gradient(160deg, rgba(82,4,114,.94), rgba(82,4,114,.88));
  box-shadow: 0 0 40px rgba(0,0,0,.35);
  text-align: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  /* Ported from React Bits' <GlareHover/> (no React/build step here, so
     the sweep is a plain ::before + CSS custom properties instead of the
     component's inline style vars) - overflow:hidden keeps the gradient
     sweep clipped to the card's own rounded corners. */
  overflow: hidden;
  --gh-angle: -30deg;
  --gh-duration: 800ms;
  --gh-size: 300%;
  --gh-rgba: rgba(255, 255, 255, .3);
}
.carousel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    var(--gh-angle),
    hsla(0, 0%, 0%, 0) 60%,
    var(--gh-rgba) 70%,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0) 100%
  );
  background-size: var(--gh-size) var(--gh-size), 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% -100%, 0 0;
  transition: var(--gh-duration) ease;
}
.carousel-card:hover::before {
  background-position: 100% 100%, 0 0;
}
/* These source logos are gold marks sitting on an opaque black grunge/
   vignette square, not a clean-transparent PNG - placed as a plain <img>
   on the purple card, that black square just reads as an empty dark
   blob. mix-blend-mode: screen drops pure black to fully transparent
   (screen of black with anything is a no-op) so only the gold artwork
   shows, with the card's own purple showing through everywhere else. */
/* The source PNGs bake in wildly different amounts of transparent/black
   margin around the actual gold mark (measured with PIL: UNODC/IPC's
   artwork fills ~99% of their canvas, AIPPM's fills ~65%), so a plain
   object-fit:contain box scales each file's *whole canvas* to match,
   which makes the ones with more built-in padding render visibly
   smaller. Each wrap is a fixed crop window; the img inside is sized and
   offset (per data-code below, computed from each PNG's measured content
   bounding box) so the actual artwork - not the padded canvas - fills
   the window consistently across cards. */
.carousel-card-logo-wrap { position: relative; width: 150px; height: 130px; overflow: hidden; }
.carousel-card-logo { position: absolute; max-width: none; mix-blend-mode: screen; }
.carousel-card[data-code="UNHRC"] .carousel-card-logo { width: 126.68px; height: 149.71px; left: 11.46px; top: 0; }
.carousel-card[data-code="UNSC"] .carousel-card-logo { width: 141.3px; height: 152.21px; left: 4.49px; top: 0; }
.carousel-card[data-code="DISEC"] .carousel-card-logo { width: 152.07px; height: 166.81px; left: -0.92px; top: 0; }
.carousel-card[data-code="UNODC"] .carousel-card-logo { width: 122.33px; height: 130px; left: 13.83px; top: 0; }
.carousel-card[data-code="IPC"] .carousel-card-logo { width: 113.54px; height: 130px; left: 18.23px; top: 0; }
.carousel-card[data-code="CCC"] .carousel-card-logo { width: 132.52px; height: 154.37px; left: 8.77px; top: 0; }
.carousel-card[data-code="AIPPM"] .carousel-card-logo { width: 168.68px; height: 210.94px; left: -9.15px; top: -40.47px; }

.carousel-nav {
  position: relative;
  pointer-events: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}
.carousel-nav:hover { opacity: .85; transform: scale(1.06); }
.carousel-nav:active { transform: scale(.94); }
.carousel-nav svg { width: 18px; height: 18px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.carousel-dots {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.carousel-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,243,193,.32);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
/* Visible dot stays 7px; the actual tappable area is expanded to the
   44px touch-target minimum via a transparent hit-area on top of it. */
.carousel-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.carousel-dot:hover { background: rgba(255,243,193,.55); }
.carousel-dot[aria-selected="true"] {
  background: var(--cream);
  transform: scale(1.25);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--cream);
  color: var(--purple);
  border-radius: 999px;
  padding: 14px 22px 14px 16px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.back-btn:hover { opacity: .85; }
.back-btn:active { transform: scale(.96); }
.back-btn svg { width: 16px; height: 16px; }

.committee-page { background: var(--purple); min-height: 100svh; }
.committee-detail {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 5vw, 48px);
  padding: 18vh 0 20vh;
  text-align: center;
}
/* Horizontal padding lives on the content itself, not on .committee-detail -
   the footer is also a flex child here and needs to span full width flush
   with the viewport edges, which horizontal padding on the parent would
   otherwise prevent (vertical padding is fine, it doesn't affect width). */
.committee-detail-content, .committee-cta-row, .register-embed-wrap {
  padding-inline: 8vw;
  box-sizing: border-box;
}
.committee-back { position: absolute; top: 30px; left: 38px; }
@media (max-width: 767px) {
  .committee-back { top: calc(var(--sidebar-mobile-bar-h) + 20px); }
}
.committee-detail-content { color: var(--cream); max-width: 640px; }
.committee-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Author-origin display:flex above beats the UA [hidden]{display:none} rule
   regardless of specificity (author always wins over user-agent styles), so
   without this the row stayed visible after JS set the hidden attribute. */
.committee-cta-row[hidden] {
  display: none;
}
.committee-detail .register-btn-slot { margin-top: 0; }
.committee-detail-code {
  display: block;
  font-size: 11px;
  letter-spacing: .28em;
  opacity: .7;
  margin-bottom: 14px;
}
.committee-detail-content h1 {
  margin: 0;
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.committee-detail-agenda {
  margin: 18px 0 0;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.6;
  opacity: .82;
  font-weight: 400;
}

/* Ported from the pasted shadcn Button-with-sliding-icon reference: no
   React/Tailwind here, so the padding-swap + circle-slide motion is done
   with plain CSS transitions instead of Motion/lucide-react. The pill and
   coin invert each other's colors (cream pill / purple coin) to match the
   two-tone contrast the reference relies on, adapted to this site's
   cream-on-purple palette instead of the default light/dark theme tokens. */
.collab-cta { margin-top: 4px; }
.collab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 4px 56px 4px 24px;
  border: none;
  border-radius: 999px;
  background: var(--cream);
  color: var(--purple);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: padding .5s ease;
}
.collab-btn:active { transform: scale(.97); }
.collab-btn-text { position: relative; z-index: 1; white-space: nowrap; }
.collab-btn-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right .5s ease, transform .5s ease;
}
.collab-btn-icon svg { width: 16px; height: 16px; }
.collab-btn:hover { padding: 4px 24px 4px 56px; }
.collab-btn:hover .collab-btn-icon { right: calc(100% - 44px); transform: rotate(45deg); }

.register-embed-wrap {
  width: 100%;
  max-width: 760px;
  opacity: 0;
  transition: opacity .35s ease;
}
.register-embed-wrap.is-visible {
  opacity: 1;
}

#registerOptions {
  opacity: 1;
  transition: opacity .35s ease;
}
#registerOptions:not(.is-visible) {
  opacity: 0;
}
.register-embed-wrap iframe {
  width: 100%;
  height: 80vh;
  min-height: 700px;
  border: none;
  border-radius: 16px;
  background: #fff;
}
.register-embed-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,243,193,.16);
}
.register-change-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--cream);
  color: var(--purple);
  border-radius: 999px;
  padding: 10px 20px 10px 14px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.register-change-type:hover { opacity: .85; }
.register-change-type:active { transform: scale(.96); }
.register-change-type svg { width: 16px; height: 16px; }

.register-fallback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cream);
  opacity: .6;
  font-size: 12px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: opacity .2s ease;
}
.register-fallback-link:hover { opacity: 1; }
.register-fallback-link svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
  .topbar { inset: 22px 20px auto; }
  .location { display: none; }
  .hero-kicker { font-size: 8px; letter-spacing: .28em; }
  .hero-caption { font-size: 10px; }
  .countdown-wrap { bottom: 28px; }
  .scroll-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pecon-globe { opacity: .5; }
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--cream);
  color: var(--purple);
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Full width, flush with the viewport edges. Its parents (main.site-page,
   .committee-detail) carry no horizontal padding of their own - any padding
   those pages need lives on the content elements instead - so a plain
   width:100% is enough; no vw-based break-out hack required. */
.site-footer {
  width: 100%;
  margin-top: auto;
  background: #fff6c1;
  color: var(--purple);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 48px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  /* .app-sidebar-desktop is a fixed rail pinned to the right edge (z-index
     2000) that overlays page content rather than pushing it - every other
     section either sits centered or never reaches the right edge, but this
     footer's right-aligned info block does, so it needs its own clearance. */
  .site-footer { padding-right: calc(var(--sidebar-rail-w) + 32px); }
}
.site-footer-logo { width: 88px; height: auto; flex-shrink: 0; }
.site-footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}
.site-footer-dates {
  margin: 0;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 14px;
  text-transform: uppercase;
}
.site-footer-contact {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 13px;
  opacity: .85;
  max-width: 100%;
}
.site-footer-contact p { margin: 0; max-width: 100%; }
.site-footer-contact a {
  display: inline-block;
  padding: 4px 2px;
  color: var(--purple);
  text-decoration: underline;
  text-decoration-color: rgba(82,4,114,.35);
  white-space: nowrap;
}
.site-footer-contact a:hover { text-decoration-color: currentColor; }
.site-footer-social {
  display: flex;
  gap: 14px;
}
.site-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--purple);
  opacity: .8;
}
.site-footer-social a:hover { opacity: 1; }
.site-footer-social svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 36px 20px 28px;
  }
  .site-footer-info { align-items: center; text-align: center; }
  .site-footer-contact { align-items: center; }
  .site-footer-contact a { white-space: normal; }
  .site-footer-social { justify-content: center; }
  .site-footer-logo { width: 60px; }
  .site-footer-dates { font-size: 12px; letter-spacing: .03em; }
  .site-footer-contact { font-size: 12px; }
}

.register-cookie-note {
  margin: 14px 0 0;
  font-size: 11px;
  opacity: .55;
  color: var(--cream);
  text-align: center;
}