/* Tighter desktop rhythm; mobile spacing remains controlled by the base bundle. */
@media (min-width: 821px) {
  .hero {
    gap: 34px;
    min-height: 650px;
    padding: clamp(48px, 6vh, 64px) 5vw 24px;
  }

  .mission {
    padding: 80px 8vw 90px;
  }

  .intertwined,
  .reframe-lab,
  .philosophy,
  .journey {
    padding: 84px 8vw;
  }

  .campaign-image {
    padding: 56px 8vw;
  }

  .program {
    padding: 88px 5vw 96px;
  }

  .section-head {
    padding-bottom: 50px;
  }

  .pillar {
    min-height: 270px;
    padding: 24px;
  }

  .pillar-focus {
    margin-top: 16px;
    padding: 26px 32px;
  }

  .outcomes {
    padding: 88px 8vw;
  }

  .outcome-grid {
    margin-top: 48px;
  }

  .outcome-grid article {
    min-height: 220px;
    padding: 28px 24px;
  }

  .outcome-grid h3 {
    margin: 48px 0 12px;
  }

  .audience {
    padding: 80px 8vw;
  }

  .audience-tags {
    margin-top: 36px;
  }

  .contact {
    padding: 90px 8vw;
  }
}

/* The eight-pillar framework becomes a chessboard carried inside a globe. */
.program {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.program::before,
.program::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -48%) rotate(-8deg);
}

.program::before {
  z-index: -2;
  opacity: 0.11;
  background:
    repeating-conic-gradient(from 45deg, rgba(216, 184, 80, 0.86) 0 25%, transparent 0 50%) 50% / 92px 92px;
  box-shadow: inset 0 0 80px 42px rgba(13, 20, 15, 0.92), 0 0 0 1px rgba(216, 184, 80, 0.32);
}

.program::after {
  z-index: -1;
  opacity: 0.18;
  border: 1px solid rgba(216, 184, 80, 0.48);
  background:
    radial-gradient(ellipse 16% 49% at 50% 50%, transparent 94%, rgba(216, 184, 80, 0.64) 96%, transparent 98%),
    radial-gradient(ellipse 34% 49% at 50% 50%, transparent 95%, rgba(216, 184, 80, 0.48) 97%, transparent 99%),
    linear-gradient(transparent 32.7%, rgba(216, 184, 80, 0.52) 33%, transparent 33.3%, transparent 66.2%, rgba(216, 184, 80, 0.52) 66.5%, transparent 66.8%);
}

.program > * {
  position: relative;
  z-index: 1;
}

.pillar-top .chess-piece {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #d8b850;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

.pillar.active .pillar-top .chess-piece {
  color: #0d140f;
}

@media (max-width: 820px) {
  .program::before,
  .program::after {
    top: 38%;
    width: 128vw;
  }

  .program::before {
    background-size: 68px 68px;
  }
}

.nav-links .sibling-nav-link {
  color: #a37d19;
  font-weight: 800;
}

.sister-site-link {
  color: inherit;
  font-weight: 800;
  text-decoration-color: #c19a2e;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sister-site-link:hover {
  color: #c19a2e;
}

.mackprojekt-credit a {
  color: inherit;
  font-weight: 800;
  text-decoration-color: #c19a2e;
  text-underline-offset: 4px;
}

.mackprojekt-credit a:hover {
  color: #c19a2e;
}

.together-rotator {
  display: inline-block;
  animation: together-in 0.5s ease both;
}

@keyframes together-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Automatically reveal each reframe as a deliberate card flip. */
.reframe-console {
  perspective: 1200px;
}

.truth-panel--flip {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  animation: reframe-card-flip 0.72s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

@keyframes reframe-card-flip {
  0% {
    opacity: 0;
    transform: rotateX(-82deg) scale(0.96);
  }

  62% {
    opacity: 1;
    transform: rotateX(8deg) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: rotateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .together-rotator,
  .truth-panel--flip {
    animation: none;
  }
}