/* Case study pages (akt-app, paxd, vertiqua), generated by
   tools/build-projects.js. They load home.css first for the tokens, top bar,
   menu, accents, labels and the Say hi footer; this file adds the page itself:
   a big title with its specs, the project's boards stacked in one column, and
   a link to the next project. */

/* ---------- Title + specs ---------- */
.cs { padding: 112px var(--gutter) 0; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--grey);
  text-decoration: none;
  transition: color .25s;
}
.cs-back:hover { color: var(--orange); }
.cs-back:focus-visible, .cs-next-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.cs .label { margin-top: 48px; }
.cs-title {
  margin-top: 28px;
  font: 500 clamp(64px, 12vw, 220px)/.88 var(--sans);
  letter-spacing: -.06em;
}
.cs-title .accent { font-size: .26em; margin-left: .2em; vertical-align: .9em; }
.cs-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 32px 5vw;
  align-items: end;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cs-lede { font-size: 20px; line-height: 1.5; color: var(--grey); }
/* The title settles in on load */
.js .cs-title, .js .cs-meta { animation: cs-in 1s var(--ease-out) both; }
.js .cs-meta { animation-delay: .15s; }
@keyframes cs-in { from { opacity: 0; transform: translateY(32px); } }

/* ---------- Boards ---------- */
/* One column, the way the boards were designed to be read. The first one
   opens out like the projects on the homepage; the rest rise in. */
.cs-board {
  display: grid;
  gap: 20px;
  max-width: 912px;
  margin: 96px auto 0;
  padding: 0 16px;
}
.cs-img, .cs-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--paper);
}
.js .cs-board > * { opacity: 0; transform: translateY(48px); transition: opacity .8s ease, transform 1.1s var(--ease-out); }
.js .cs-board > .is-in { opacity: 1; transform: none; }
.js .cs-board > :first-child {
  opacity: 1; transform: scale(1.04);
  clip-path: inset(7% 9% round 40px);
  transition: clip-path 1.3s cubic-bezier(.65, 0, .15, 1), transform 1.5s cubic-bezier(.65, 0, .15, 1);
}
.js .cs-board > :first-child.is-in { clip-path: inset(0 round 24px); transform: none; }

/* ---------- Next project ---------- */
.cs-next { padding: 140px var(--gutter) 40px; }
.cs-next-link {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.cs-next-name {
  font: 500 clamp(56px, 10vw, 180px)/.9 var(--sans);
  letter-spacing: -.055em;
  transition: color .3s;
}
.cs-next-thumb {
  flex: none;
  width: clamp(96px, 16vw, 240px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .5s var(--ease-out);
}
.cs-next-link:hover .cs-next-name { color: var(--orange); }
.cs-next-link:hover .cs-next-thumb { transform: rotate(-3deg) scale(1.05); }

@media (max-width: 767px) {
  .cs { padding-top: 88px; }
  .cs .label { margin-top: 32px; }
  .cs-meta { grid-template-columns: 1fr; margin-top: 40px; }
  .cs-lede { font-size: 17px; }
  .cs-board { gap: 12px; margin-top: 56px; padding: 0 12px; }
  .cs-img, .cs-video { border-radius: 16px; }
  .cs-next { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cs-title, .js .cs-meta { animation: none; }
  .js .cs-board > *, .js .cs-board > :first-child { opacity: 1; transform: none; clip-path: none; transition: none; }
}