/* Site-wide polish: keep information surfaces solid and reserve glass for floating chrome. */
:root {
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-duration: 420ms;
  --motion-lift: -2px;
  --site-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", sans-serif;
  --site-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", sans-serif;
}

body { font-family: var(--site-font-ui); }
.hero-title,
.page-hero h1,
.page-hero-copy h1,
.contact-hero h1,
.events-hero h1,
.directory-hero h1,
.media-archive-hero h1,
.mp-profile-copy h2,
.home-directory-heading h2,
.home-budget-copy h2,
.section-heading h2,
.page-section h2 {
  font-family: var(--site-font-display);
  font-weight: 600;
  letter-spacing: -.03em;
}

.home-gateway-card-body > strong,
.secretariat-card-body h3,
.featured-media-title,
.coverage-card h3,
.event-card h3,
.contact-card h3 {
  font-family: var(--site-font-display);
  font-weight: 620;
  letter-spacing: -.025em;
}

.site-header,
.external-workspace-header {
  background: rgba(249, 252, 253, .84);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: 0 8px 28px rgba(7, 50, 74, .045);
}

/* The budget switchers are controls; the figures beneath them stay on a clear paper surface. */
.home-budget-selector {
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

.home-budget-overview {
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 40px rgba(7, 59, 87, .12), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.nav-link,
.mobile-nav-link,
.hero-button,
.page-action-button,
.language-option {
  transition-timing-function: var(--motion-ease);
}

.hero-title,
.page-hero h1,
.page-hero-copy h1,
.contact-hero h1,
.events-hero h1,
.directory-hero h1,
.media-archive-hero h1,
.section-heading h2,
.page-section h2 {
  text-wrap: balance;
}

.hero-description,
.page-hero-copy > p:last-child,
.contact-hero-copy > p:last-child,
.events-hero-copy > p:last-child {
  text-wrap: pretty;
}

.hero-title {
  font-size: clamp(46px, 5vw, 64px);
  line-height: 1.04;
}

@media (max-width: 720px) {
  .hero-title { font-size: clamp(38px, 10vw, 54px); }
}

/* Scroll entrances are enabled by the same-origin interaction script. */
.ui-motion-ready .ui-reveal:not(.ui-in-view) {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.995);
}

.ui-reveal {
  transition:
    opacity 540ms var(--motion-ease) var(--ui-reveal-delay, 0ms),
    transform 620ms var(--motion-ease) var(--ui-reveal-delay, 0ms);
}

.ui-reveal.ui-in-view {
  opacity: 1;
  transform: none;
}

/* A small optical tilt on content cards, limited to mouse/trackpad devices. */
.ui-tilt-card {
  transform:
    perspective(1100px)
    rotateX(var(--ui-tilt-x, 0deg))
    rotateY(var(--ui-tilt-y, 0deg))
    translateY(var(--ui-tilt-lift, 0px));
  transform-style: preserve-3d;
  transition:
    transform 420ms var(--motion-ease),
    box-shadow 320ms var(--motion-ease);
}

.ui-tilt-card:is(:hover, :focus-within) {
  --ui-tilt-lift: var(--motion-lift);
  transform:
    perspective(1100px)
    rotateX(var(--ui-tilt-x, 0deg))
    rotateY(var(--ui-tilt-y, 0deg))
    translateY(var(--ui-tilt-lift, 0px));
}

.ui-tilt-card.ui-pointer-tilting {
  transition-duration: 90ms;
  transform:
    perspective(1100px)
    rotateX(var(--ui-tilt-x, 0deg))
    rotateY(var(--ui-tilt-y, 0deg))
    translateY(var(--ui-tilt-lift, 0px));
}

@media (hover: hover) and (pointer: fine) {
  .home-budget-selector.ui-tilt-card:hover,
  .ws-status-capsule.ui-tilt-card:hover {
    --ui-tilt-lift: -1px;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .ui-tilt-card {
    transform: none !important;
    transition: box-shadow 220ms var(--motion-ease), border-color 220ms var(--motion-ease);
  }
}

@media (max-width: 420px) {
  /* Keep the two home actions clear of the portrait's outstretched hand. */
  .hero-actions { width: min(44%, 164px); }
  .hero-button { gap: 6px; padding-inline: 6px; }
  .hero-portrait { right: max(-54px, calc(env(safe-area-inset-right) - 54px)); }
}

@media (max-width: 360px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 164px);
    gap: 8px;
  }

  .hero-button {
    min-height: 46px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .hero-portrait {
    right: max(-70px, calc(env(safe-area-inset-right) - 70px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-reveal,
  .ui-tilt-card,
  .ui-motion-ready .ui-reveal:not(.ui-in-view) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .external-workspace-header {
    background: #f9fcfd;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Workspace: translucent treatment belongs to the shell and floating sheets. */
.ws-topbar {
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.ws-sidebar {
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

.ws-modal-shade {
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

.ws-modal-box.ws-liquid-glass {
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

[data-theme="dark"] .ws-modal-box.ws-liquid-glass {
  background: rgba(22, 25, 34, .92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

.ws-view-panel.is-active {
  animation: ui-workspace-view-in 300ms var(--motion-ease) both;
}

@keyframes ui-workspace-view-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-view-panel.is-active { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .ws-topbar,
  .ws-sidebar,
  .ws-modal-shade,
  .ws-modal-box.ws-liquid-glass {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .ws-topbar { background: var(--ws-header-bg); }
  .ws-sidebar { background: var(--ws-sidebar-bg); }
  .ws-modal-box.ws-liquid-glass { background: var(--ws-surface-elevated) !important; }
}