.projects-page .page-intro { padding-bottom: 24px; }
.projects-page > .section { padding-top: 12px; }

/* Project cards share a fan; the selected card is drawn in front of the hand. */
.project-deck {
  width: 100%;
  margin: 0 auto;
}

.project-deck__stage {
  --card-width: 240px;
  --card-height: 310px;
  --spread: 150px;
  --splay: 16deg;
  --rest-spread: 145px;
  --rest-splay: 12deg;
  --draw-offset: -90px;
  --draw-scale: 1.3;
  --draw-y: 56px;
  position: relative;
  height: 470px;
  isolation: isolate;
}

.deck-hand {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-card {
  --slot: 0;
  --fan-depth: 0;
  --card-order: 1;
  --card-paper: #e9effb;
  --card-accent: #5475b8;
  position: absolute;
  top: 56px;
  left: 50%;
  width: var(--card-width);
  height: var(--card-height);
  margin-left: calc(var(--card-width) * -.5);
  z-index: var(--card-order);
  transform-origin: 50% 96%;
  transform: translateX(calc(var(--slot) * var(--spread))) translateY(calc(var(--fan-depth) * 20px)) rotate(calc(var(--slot) * var(--splay)));
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease-out;
}

.deck-card--knowledge {
  --card-paper: #efedf9;
  --card-accent: #8072ae;
}

.deck-card--fullstack {
  --card-paper: #eaf3f0;
  --card-accent: #608e81;
}

.deck-card__button {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 22px;
  border: 0;
  border-radius: 17px;
  background: var(--card-paper);
  color: #263951;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 36px -23px rgba(55, 76, 122, .4), 0 3px 10px -6px rgba(55, 76, 122, .15);
  transition: transform 260ms ease-out, box-shadow 260ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.deck-card__button:focus-visible {
  outline: 3px solid #7292f0;
  outline-offset: 5px;
}

.deck-card:focus-within {
  z-index: 70;
}

.deck-card__top,
.deck-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--card-accent);
}

.deck-card__top > :last-child {
  font-size: 22px;
  line-height: 1;
}

.deck-card__title {
  display: block;
  margin: 17px 0 0;
  color: #1e3a70;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.deck-card__art {
  position: relative;
  display: block;
  flex: 1;
  align-self: center;
  width: 100%;
  max-width: 156px;
  min-height: 80px;
  margin: 15px 0;
  color: var(--card-accent);
  pointer-events: none;
}

.deck-card__art i {
  position: absolute;
  display: block;
  font-style: normal;
}

.deck-art--agent i {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 12px -9px rgba(71, 101, 182, .4);
}

.deck-art--agent i::after {
  content: '';
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

.deck-art--agent i:nth-child(1) { left: 4%; top: 45%; }
.deck-art--agent i:nth-child(2) { left: 36%; top: 11%; }
.deck-art--agent i:nth-child(3) { right: 4%; top: 45%; }
.deck-art--agent::before,
.deck-art--agent::after {
  content: '';
  position: absolute;
  top: 43%;
  width: 38%;
  height: 2px;
  background: currentColor;
  opacity: .23;
  transform-origin: center;
}
.deck-art--agent::before { left: 17%; transform: rotate(-32deg); }
.deck-art--agent::after { right: 17%; transform: rotate(32deg); }

.deck-art--knowledge i {
  width: 47%;
  height: 68%;
  top: 16%;
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 7px 15px -10px rgba(77, 65, 135, .35);
}
.deck-art--knowledge i:nth-child(1) { left: 5%; transform: rotate(-13deg); opacity: .6; }
.deck-art--knowledge i:nth-child(2) { left: 27%; transform: rotate(-3deg); opacity: .8; }
.deck-art--knowledge i:nth-child(3) { left: 48%; transform: rotate(10deg); }
.deck-art--knowledge i::after {
  content: '';
  position: absolute;
  top: 24%;
  left: 18%;
  width: 63%;
  height: 4px;
  border-radius: 3px;
  background: currentColor;
  opacity: .22;
  box-shadow: 0 12px 0 currentColor, 0 24px 0 currentColor;
}

.deck-art--fullstack i {
  left: 13%;
  width: 74%;
  height: 36%;
  border-radius: 9px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 7px 12px -9px rgba(62, 110, 96, .3);
}
.deck-art--fullstack i:nth-child(1) { top: 44%; transform: rotate(-7deg); opacity: .5; }
.deck-art--fullstack i:nth-child(2) { top: 28%; transform: rotate(-3deg); opacity: .75; }
.deck-art--fullstack i:nth-child(3) { top: 12%; }
.deck-art--fullstack i:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 22%;
  left: 12%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor;
}
.deck-art--fullstack i:nth-child(3)::after {
  content: '';
  position: absolute;
  bottom: 24%;
  left: 12%;
  width: 55%;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: .18;
}

.project-deck.is-open .deck-card:not(.is-selected) {
  opacity: .7;
  transform: translateX(calc(var(--rest-slot) * var(--rest-spread) + var(--draw-offset))) translateY(38px) rotate(calc(var(--rest-slot) * var(--rest-splay))) scale(.94);
}

.deck-card[data-rest-side='left'] { --rest-slot: -1; }
.deck-card[data-rest-side='right'] { --rest-slot: 1; }

.project-deck.is-open .deck-card.is-selected {
  z-index: 50;
  opacity: 1;
  transform: translateX(var(--draw-offset)) translateY(var(--draw-y)) rotate(0) scale(var(--draw-scale));
}

.project-deck.is-open .deck-card.is-selected .deck-card__button {
  box-shadow: 0 28px 50px -28px rgba(55, 76, 122, .47), 0 6px 18px -12px rgba(55, 76, 122, .22);
}

.project-deck.is-open .deck-card:focus-within {
  z-index: 70;
  opacity: 1;
}

.deck-jump {
  position: absolute;
  z-index: 80;
  top: 46%;
  left: calc(50% + 235px);
  width: 170px;
  transform: translateY(-50%);
}

.deck-jump[hidden] { display: none; }

.deck-jump__title {
  margin: 0 0 12px;
  color: #1e3a70;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.deck-jump__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 12px 15px;
  border: 0;
  border-radius: 10px;
  background: #e7edf9;
  color: #3657a4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.deck-jump__link:hover { background: #dfe8fa; }
.deck-jump__link:focus-visible { outline: 3px solid #7292f0; outline-offset: 4px; }

.project-deck__hint {
  margin: -5px 0 28px;
  color: #7b8da9;
  font-size: 13px;
  text-align: center;
}

.deck-detail-shell { display: flow-root; width: 100%; }
.deck-detail-shell[hidden] { display: none; }
.deck-detail-shell.is-transitioning { overflow: hidden; overflow: clip; }

.project-deck.is-resizing .deck-card,
.project-deck.is-resizing .deck-card__button { transition: none; }

.project-deck__detail {
  width: 100%;
  max-width: 840px;
  margin: 0 auto 22px;
  padding: 30px;
  border: 0;
  border-radius: 18px;
  background: #edf2fc;
}

.project-deck__detail[hidden] { display: none; }
.project-deck__detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}
.project-deck__detail-header h3 {
  margin: 0;
  color: #1e3a70;
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -.025em;
}
.project-deck__detail-header .eyebrow { margin-bottom: 7px; }
.deck-close {
  appearance: none;
  flex: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: var(--blue, #4765b6);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.deck-close:focus-visible { outline: 3px solid #7292f0; outline-offset: 4px; }
.project-deck__detail-content p {
  margin: 0 0 18px;
  max-width: 650px;
  color: var(--muted, #657087);
  font-size: 15px;
  line-height: 1.9;
}
.project-deck__detail-content p:last-child { margin-bottom: 0; }
.deck-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 22px; }
.deck-detail-tags span {
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .8);
  color: #6a7fa8;
  font-size: 11px;
}
.deck-detail-link { display: inline-block; color: var(--blue, #4765b6); font-size: 13px; font-weight: 700; }
.deck-detail-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.deck-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .deck-card:hover { z-index: 30; }
  .deck-card:hover .deck-card__button,
  .deck-card:focus-within .deck-card__button {
    transform: translateY(-10px);
    box-shadow: 0 22px 42px -24px rgba(55, 76, 122, .45);
  }
  .project-deck.is-open .deck-card:not(.is-selected):hover { opacity: 1; }
  .project-deck.is-open .deck-card.is-selected:hover { z-index: 50; }
  .deck-close:hover { background: #fff; }
}


@media (max-width: 900px) {
  .project-deck__stage {
    --rest-spread: 185px;
    --draw-offset: 0px;
    --draw-scale: 1.24;
    --draw-y: 48px;
    height: 550px;
  }
  .deck-jump {
    top: auto;
    bottom: 12px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
  }
  .deck-jump__title { margin: 0; font-size: 17px; }
}

@media (max-width: 760px) {
  .project-deck__stage {
    --card-width: clamp(190px, 35vw, 220px);
    --card-height: 280px;
    --spread: clamp(80px, 20vw, 130px);
    --splay: 12deg;
    --rest-spread: clamp(92px, 21vw, 130px);
    --rest-splay: 10deg;
    height: 510px;
  }
  .deck-card { top: 62px; }
  .deck-card__button { padding: 19px; }
  .deck-card__title { font-size: 23px; }
  .project-deck__detail { padding: 24px; }
}

@media (max-width: 600px) {
  .project-deck__stage {
    --card-width: clamp(140px, 42vw, 188px);
    --card-height: clamp(208px, 60vw, 264px);
    --spread: clamp(38px, 13vw, 62px);
    --splay: 10deg;
    --rest-spread: clamp(42px, 14vw, 60px);
    --rest-splay: 8deg;
    --draw-y: 40px;
    height: calc(var(--card-height) * 1.24 + 152px);
  }
  .deck-card { top: 52px; }
  .deck-card__button { padding: 15px; border-radius: 13px; }
  .deck-card__top, .deck-card__bottom { font-size: 9px; gap: 5px; }
  .deck-card__top > :last-child { font-size: 17px; }
  .deck-card__title { font-size: 20px; margin-top: 13px; }
  .deck-card__art { min-height: 66px; margin: 9px 0; }
  .deck-art--agent i { border-radius: 9px; }
  .deck-art--knowledge i::after { height: 3px; box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor; }
  .project-deck.is-open .deck-card:not(.is-selected) { transform: translateX(calc(var(--rest-slot) * var(--rest-spread) + var(--draw-offset))) translateY(33px) rotate(calc(var(--rest-slot) * var(--rest-splay))) scale(.94); }
  .deck-jump { gap: 10px; }
  .deck-jump__title { font-size: 14px; }
  .deck-jump__link { padding: 10px 11px; font-size: 12px; border-radius: 8px; }
  .project-deck__hint { font-size: 11px; margin-bottom: 23px; }
  .project-deck__detail { padding: 20px; border-radius: 14px; }
  .project-deck__detail-header { gap: 12px; }
  .project-deck__detail-header h3 { font-size: 20px; }
  .project-deck__detail-content p { font-size: 14px; }
  .deck-close { padding: 7px 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card__button { transition: none; }
  .deck-card__button { transform: none; }
}