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

/* Single project page: reuses the poster, crop marks, panels, tags and hover colour from home.css */

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

/* ---------- description ---------- */
.desc-panel { left: 4.6cqw; top: 22cqw; width: 42cqw; height: auto; max-height: 46cqw; z-index: 5; transform: rotate(-1deg); display: flex; }
.desc-panel .shot { position: relative; inset: auto; width: 100%; max-height: 46cqw; background: var(--paper); overflow: hidden; display: flex; flex-direction: column; gap: 1.6cqw; padding: 3cqw 3.2cqw 2.6cqw 3.4cqw; }
.desc-panel .shot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(95,120,153,.45) .8px, transparent 1.3px) 0 0 / 5px 5px; opacity: .18;
}
.desc-panel .shot::after { display: none; }
.desc-panel .shot > * { position: relative; }
.kick { font-family: "Space Mono", monospace; font-size: 1.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-deep); opacity: .75; }
.body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 1.2cqw; display: flex; flex-direction: column; gap: 1.5cqw;
        scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.body p { font-family: "Archivo", sans-serif; font-weight: 500; font-size: 1.5cqw; line-height: 1.65; color: var(--ink-deep); }

/* ---------- media ---------- */
.media-grid {
  position: absolute; z-index: 3; left: 52cqw; top: 6cqw; width: 43.4cqw; height: 62cqw;
  display: grid; gap: 4cqw 3cqw; align-content: center;
}
.media-grid.m1, .media-grid.m2 { grid-template-columns: 1fr; }
.media-grid.m3 { grid-template-columns: 1fr 1fr; }
.media-grid.m3 .media:first-child { grid-column: 1 / -1; }

.media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: none; cursor: pointer;
         transform: rotate(var(--tilt, 0deg)); }
.media-grid.m3 .media:not(:first-child) { aspect-ratio: 4 / 3; }
.media:hover { transform: rotate(0deg) translateY(-.5cqw) scale(1.012); }
.media .shot img { object-position: 50% 45%; }

/* play button */
.play {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 7cqw; height: 7cqw; translate: -50% -50%;
  background: var(--ink-deep); border-radius: 50%; border: .5cqw solid var(--paper);
  transition: transform .3s cubic-bezier(.2,1.4,.4,1), background .25s;
}
.play::after { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 1.3cqw 0 1.3cqw 2.1cqw; border-color: transparent transparent transparent var(--paper); }
.media.yt:hover .play { transform: scale(1.12); background: var(--ink); }
.media.yt .tag { left: -1.4cqw; bottom: -1.5cqw; font-size: 2.2cqw; padding: .6cqw 1.3cqw .5cqw 1cqw;
                 transform: rotate(-2deg); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.media.yt .tag small { font-size: .95cqw; }

/* ---------- lightbox ---------- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 5vh 5vw;
  background: rgba(228, 233, 241, .94); backdrop-filter: blur(3px);
}
body.lb-open { overflow: hidden; }
.lb-frame {
  position: relative; background: var(--ink-deep);
  border: 4px solid var(--ink); box-shadow: 0 0 0 9px var(--paper), 0 0 0 12px var(--ink), 0 30px 60px rgba(52, 69, 95, .25);
}
.lb-image { display: block; max-width: 84vw; max-height: 78vh; }
.lb-video { display: block; border: 0; width: min(84vw, calc(78vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.lb-close, .lb-nav {
  position: fixed; z-index: 101; border: 0; cursor: pointer; background: var(--ink-deep); color: var(--paper);
  font-family: "Space Mono", monospace; line-height: 1; transition: background .25s, transform .25s;
}
.lb-close:hover, .lb-nav:hover { background: var(--ink); }
.lb-close { top: 3vh; right: 3vw; width: 54px; height: 40px; font-size: 20px; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%); }
.lb-nav { top: 50%; width: 52px; height: 64px; margin-top: -32px; font-size: 24px; }
.lb-prev { left: 2vw; clip-path: polygon(0 0, 100% 9px, 100% calc(100% - 9px), 0 100%); }
.lb-next { right: 2vw; clip-path: polygon(0 9px, 100% 0, 100% 100%, 0 calc(100% - 9px)); }
.lb-prev:hover { transform: translateX(-3px); } .lb-next:hover { transform: translateX(3px); }
.lb-count { position: fixed; bottom: 3vh; left: 50%; translate: -50% 0; font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: .2em; color: var(--ink-deep); }
.lb-count[hidden], .lb-nav[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) .lb-frame { animation: lb-in .35s cubic-bezier(.2, 1.1, .3, 1) both; }
  @keyframes lb-in { from { opacity: 0; transform: scale(.94) rotate(-.8deg); } to { opacity: 1; transform: none; } }
}
@media (max-width: 720px) {
  .lb-nav { top: auto; bottom: 3vh; margin-top: 0; width: 46px; height: 40px; }
  .lb-prev { left: 5vw; } .lb-next { right: 5vw; }
  .lb-image { max-width: 88vw; max-height: 70vh; }
  .lb-video { width: 88vw; }
}

/* prev / next project arrows next to the title: phone only */
.head { display: contents; }
.pn { display: none; }

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

/* ---------- phone: everything fits on one screen, no scrolling ---------- */
/* The poster is the visible height (see home.css) and lays out as a column: title, text card, then the media row,
   which takes whatever height is left, so any text length or phone height still fits. */
@media (max-width: 720px) {
  .poster { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: center; gap: 7cqw; padding: 6cqw 6cqw 13cqw; }
  .head { display: flex; align-items: center; justify-content: center; gap: 9cqw; flex: none; }
  .name { position: relative; left: auto; top: auto; width: 46cqw; margin: 0; flex: none; }
  .pn { display: grid; place-items: center; flex: none; width: 9cqw; height: 9cqw; box-sizing: border-box;
        border: .5cqw solid var(--ink); color: var(--ink); background: transparent;
        font-family: "Space Mono", monospace; font-size: 4.2cqw; line-height: 1; transition: background .25s, color .25s; }
  .pn:active { background: var(--ink); color: var(--paper); }
  .desc-panel { position: relative; left: auto; top: auto; width: 100%; height: auto; max-height: none; flex: none; transform: rotate(-.8deg); }
  .desc-panel .shot { position: relative; inset: auto; max-height: none; padding: 4.5cqw; gap: 2.2cqw; }
  .kick { font-size: 2.8cqw; }
  .body { overflow: visible; padding-right: 0; gap: 2cqw; }
  .body p { font-size: 3.9cqw; line-height: 1.45; }
  /* media: a swipeable row at the real aspect ratios (video and first image 16:9, the others 4:3), no buttons */
  .media-grid { position: relative; left: auto; top: auto; display: flex; align-items: stretch; justify-content: safe center; gap: 5cqw;
                width: calc(100% + 12cqw); margin: 0 -6cqw; padding: 2.5cqw 6cqw 4.5cqw; box-sizing: border-box;
                height: auto; flex: 1 1 0; min-height: 0; max-height: 50cqw;
                overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 6cqw; scrollbar-width: none; }
  .media-grid::-webkit-scrollbar { display: none; }
  .media-grid.m3 .media:first-child { grid-column: auto; }
  .media { flex: none; height: 100%; width: auto; aspect-ratio: 16 / 9; scroll-snap-align: start; }
  .media-grid.m3 .media:not(:first-child) { aspect-ratio: 4 / 3; }
  .media.yt .tag { font-size: 3.6cqw; left: -1.5cqw; bottom: -2.2cqw; padding: .6cqw 1.4cqw .5cqw 1cqw; }
  .media.yt .tag small { font-size: 1.6cqw; }
  .play { width: 9cqw; height: 9cqw; border-width: .7cqw; }
  .play::after { border-width: 1.7cqw 0 1.7cqw 2.8cqw; }
  .mono.back { bottom: 3cqw; left: 6cqw; font-size: 2.4cqw; }
  .mono.n3 { bottom: 3cqw; right: 8cqw; font-size: 2.4cqw; }
}