@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap");

/* Projects page: reuses the poster, crop marks, panels, tags and animations from home.css */

.name { top: 3.4cqw; left: 3cqw; width: 62cqw; }

/* ---------- project cards ---------- */
.carousel { position: absolute; z-index: 3; left: 0; top: 26cqw; width: 100%; height: 47cqw; }
.track {
  height: 100%; display: flex; gap: 3.4cqw; padding: 2.4cqw 4.6cqw 0; box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 4.6cqw;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.track { cursor: grab; }
.track.dragging { cursor: grabbing; user-select: none; }
.track img { -webkit-user-drag: none; user-select: none; }
.proj { position: relative; flex: 0 0 28cqw; scroll-snap-align: start; }
.proj .panel { position: relative; display: block; width: 100%; height: 26cqw; }
.proj .shot img { object-position: 50% 40%; }
.proj .tag {
  left: -1.6cqw; bottom: -1.8cqw; font-size: 2.9cqw; padding: .7cqw 1.6cqw .55cqw 1.2cqw;
  transform: rotate(-2deg); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}
.proj .tag .arrow { font-size: 1.9cqw; }
.proj .tag small  { font-size: 1.05cqw; }
.desc {
  margin-top: 3.4cqw; font-family: "Archivo", sans-serif; font-weight: 500;
  font-size: 1.45cqw; line-height: 1.6; color: var(--ink-deep);
}
.tags {
  margin-top: 1.2cqw; font-family: "Space Mono", monospace; font-size: 1.15cqw; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}

.proj:nth-child(3n+1) .panel { transform: rotate(-1.3deg); }
.proj:nth-child(2n) { margin-top: 2.6cqw; }  .proj:nth-child(3n+2) .panel { transform: rotate(1.1deg); }
.proj:nth-child(3n)   .panel { transform: rotate(-.8deg); }
.proj .panel:hover { transform: rotate(0deg) translateY(-.6cqw) scale(1.012); }


/* prev / next + counter */
.ctrl { position: absolute; z-index: 6; right: 4.6cqw; top: 20.6cqw; display: flex; align-items: center; gap: 1.1cqw; }
.count { position: static; font-size: 1.3cqw; margin-right: 1cqw; color: var(--ink); }
.count b { font-weight: 700; color: var(--ink-deep); }
.ctrl button {
  width: 6.4cqw; height: 4.4cqw; border: 0; cursor: pointer; background: var(--ink-deep); color: var(--paper);
  font-family: "Space Mono", monospace; font-size: 2.2cqw; line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1cqw) 100%, 1cqw 100%);
  transition: background .25s, transform .25s, opacity .25s;
}
.ctrl button:hover:not(:disabled) { background: var(--ink); transform: translateY(-.3cqw); }
.ctrl button:disabled { opacity: .28; cursor: default; }

/* footer */
.mono.back { left: 5cqw; bottom: 1.5cqw; transition: transform .25s, color .25s; }
.mono.back:hover { transform: translateX(-.6cqw); color: var(--ink-deep); }

/* ---------- phone: one project at a time, swipe sideways ---------- */
/* Full width, exactly the visible height (see home.css). Text is sized by width; only the card image height uses
   --v, which is 1cqw on tall phones and shrinks on short ones so the page still fits without scrolling. */
@media (max-width: 720px) {
  .poster { --v: min(1cqw, calc((100svh - 105cqw) / 56));
            --shift: max(0px, calc((100svh - 105cqw - 56 * var(--v)) / 2)); }
  .name   { left: 14cqw; width: 72cqw; top: calc(7cqw + var(--shift)); }
  .carousel { top: calc(42cqw + var(--shift)); height: calc(36cqw + 56 * var(--v)); }
  .track  { gap: 6cqw; padding: 3cqw 6cqw 0; scroll-padding-left: 6cqw; }
  .proj   { flex-basis: 78cqw; }
  .proj:nth-child(n) { margin-top: 0; }
  .proj .panel { height: calc(56 * var(--v)); }
  .proj .tag { font-size: 7cqw; left: -2.5cqw; bottom: -3cqw; }
  .proj .tag small { font-size: 2.2cqw; }
  .proj .tag .arrow { font-size: 4.4cqw; }
  .desc { margin-top: 6cqw; font-size: 3.4cqw; }
  .tags { margin-top: 2cqw; font-size: 2.6cqw; }
  .ctrl { top: calc(84cqw + 56 * var(--v) + var(--shift)); left: 0; right: 0; justify-content: center; gap: 2cqw; }
  .count { font-size: 2.8cqw; margin: 0 2cqw; order: 1; }   /* ← 01 / 05 → */
  #prev { order: 0; } #next { order: 2; }
  .ctrl button { width: 14cqw; height: 9cqw; font-size: 4.6cqw; }
  .mono.back { bottom: 3cqw; left: 6cqw; font-size: 2.4cqw; }
}