/* Projects: one panel per project, text beside media, alternating sides. */
.projects { padding-bottom: var(--section-gap); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface-2); text-decoration: none; font-size: var(--step-small); font-weight: 500;
  transition: background-color .2s var(--ease);
}
.chips a:hover { background: var(--surface-3); }

.project {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 40px);
  row-gap: 32px;
  align-items: center;
  padding: clamp(32px, 4vw, 56px);
  border-radius: calc(var(--radius) + 8px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.project-text { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; }
.project-media { grid-column: 6 / -1; position: relative; min-width: 0; }
.project--flip .project-text { grid-column: 8 / -1; grid-row: 1; }
.project--flip .project-media { grid-column: 1 / span 7; grid-row: 1; }

.project-name { font-size: var(--step-head); display: flex; align-items: center; gap: .28em; }
.project-logo { width: .95em; height: .95em; flex: none; border-radius: 22%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.project-tag { font-size: var(--step-lead); line-height: 1.3; }
.project-desc { color: var(--soft); max-width: 40em; }
.features { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.features li::marker { color: var(--accent); }
.stack { color: var(--soft); font-size: var(--step-small); }
.project-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.private { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.private .ico { width: 18px; height: 18px; color: var(--accent); }

/* Screenshots in plain browser frames; the picture drifts inside its own window. */
.frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.frame-bar { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.frame-window { aspect-ratio: var(--ratio, 16 / 10); }
.frame-window .pfx { object-position: 50% 0; }
.shots { display: grid; gap: 16px; }
.shots .frame--b { width: 72%; justify-self: end; }

/* The demo video: a still poster, and nothing downloads until Play is pressed. */
.video { display: grid; gap: 12px; }
.video-box { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b0b0d; border: 1px solid var(--line); }
.video-box video { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(12px, 2vw, 20px);
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 45%);
  color: var(--ink);
}
.video-play[hidden] { display: none; }
.video-play-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 18px 6px 6px; border-radius: 999px;
  background: rgba(18, 18, 20, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-weight: 500;
  transition: background-color .2s var(--ease);
}
.video-play-ico {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 20px;
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.video-play-ico .ico { translate: 1px 0; }
.video-play:hover .video-play-ico { transform: scale(1.08); background: var(--accent-hover); }
.video-play:hover .video-play-pill { background: rgba(18, 18, 20, .95); }
.video figcaption { color: var(--soft); font-size: var(--step-small); }

/* The pitch deck: cover, a few slides and two plain links to the PDF. */
.pitch {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-top: 8px; padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius); background: var(--surface-2);
}
.pitch-cover { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.pitch-cover img { width: 100%; transition: transform .5s var(--ease); }
.pitch-cover:hover img { transform: scale(1.03); }
.pitch-body { display: grid; gap: 14px; align-content: start; }
.pitch-title { font-size: var(--step-title); }
.pitch-meta { color: var(--soft); }
.pitch-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pitch .btn--quiet { background: var(--surface-3); }
.pitch .btn--quiet:hover { background: #3a3940; }
.pitch-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.pitch-thumbs a { display: block; border-radius: 8px; overflow: hidden; outline-offset: 2px; opacity: .85; transition: opacity .2s var(--ease); }
.pitch-thumbs a:hover { opacity: 1; }

/* Recall has no public screen to show, so its real features become a stack of flashcards in Recall's colours.
   Click the top card or "Next card": it swings out to the side and tucks in at the back. */
.cards {
  position: relative; display: grid; place-items: center;
  min-height: clamp(360px, 32vw, 480px);
  border-radius: 22px; background: var(--surface-2);
  overflow: hidden;
}
.card {
  grid-area: 1 / 1;
  width: min(74%, 430px); aspect-ratio: 3 / 2;
  display: grid; align-content: space-between; gap: 16px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 20px;
  background: var(--card-bg); color: var(--paper-ink);
  text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
  transform: translate3d(calc(var(--i, 0) * 12px), calc(var(--i, 0) * -11px), 0) rotate(calc(var(--i, 0) * 2deg - 4deg));
  transition: transform .5s var(--ease-out), box-shadow .3s var(--ease);
}
.card--c0 { --card-bg: #f3f2ee; --card-tag: #46454c; }
.card--c1 { --card-bg: #e4e3fb; --card-tag: #4a4ac4; }
.card--c2 { --card-bg: #d9f2e6; --card-tag: #0f7a50; }
.card--c3 { --card-bg: #fbe9c9; --card-tag: #9a610a; }
.card--c4 { --card-bg: #f9dcde; --card-tag: #b0333a; }
.card-q { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.15; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step-small); color: var(--card-tag); font-weight: 500; }
.card[data-pos="0"] { --i: 0; z-index: 5; cursor: pointer; }
.card[data-pos="1"] { --i: 1; z-index: 4; }
.card[data-pos="2"] { --i: 2; z-index: 3; }
.card[data-pos="3"] { --i: 3; z-index: 2; }
.card[data-pos="4"] { --i: 4; z-index: 1; }

/* Hover: the stack fans out and the top card lifts, so it reads as something to click. */
.cards:hover .card { transform: translate3d(calc(var(--i, 0) * 22px), calc(var(--i, 0) * -16px), 0) rotate(calc(var(--i, 0) * 3.5deg - 6deg)); }
.cards:hover .card[data-pos="0"] { transform: translate3d(-10px, -14px, 0) rotate(-7deg); box-shadow: 0 28px 60px rgba(0, 0, 0, .45); }

/* The top card swings out to the right, then settles at the back. */
.card.is-leaving { z-index: 7; animation: card-to-back .7s var(--ease) both; }
.card.is-leaving.is-tucked { z-index: 0; }
@keyframes card-to-back {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  45% { transform: translate3d(62%, 6%, 0) rotate(14deg); }
  100% { transform: translate3d(48px, -44px, 0) rotate(4deg); }
}

.cards-next {
  position: absolute; right: 18px; bottom: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink);
  font-size: var(--step-small); font-weight: 500;
  transition: background-color .2s var(--ease);
}
.cards-next:hover { background: var(--accent); color: var(--on-accent); }
.cards-next .ico { transition: transform .25s var(--ease); }
.cards-next:hover .ico { transform: translateX(3px); }

@media (max-width: 900px) {
  .project-text, .project--flip .project-text { grid-column: 1 / -1; grid-row: 1; }
  .project-media, .project--flip .project-media { grid-column: 1 / -1; grid-row: 2; }
  .pitch { grid-template-columns: minmax(0, 1fr); }
  .frame-bar { height: 22px; gap: 5px; }
  .frame-bar i { width: 7px; height: 7px; }
  .cards { min-height: 300px; }
  .card { width: 84%; }
}
@media (max-width: 520px) {
  .project { padding: 20px; border-radius: var(--radius); }
  .pitch { padding: 16px; }
  .pitch-actions .btn { flex: 1 1 auto; }
  .shots .frame--b { width: 100%; }
}