.roots-archive .roots-collage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .roots-archive .c {
    position: absolute;
    overflow: hidden;
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.5s ease, transform 0.35s ease;
    box-shadow: 4px 6px 24px rgba(0,0,0,0.8), 0 0 1px rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.04);
  }
  .roots-archive .c:hover {
    filter: grayscale(100%) contrast(1.25) brightness(1.15);
    z-index: 300 !important;
  }
  .roots-archive .c img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Background: concert crowd wash */
  .roots-archive .c-crowd {
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    z-index: 1;
    opacity: 0.3;
    border: none;
    box-shadow: none;
    transform: rotate(0deg);
    pointer-events: none;
  }

  /* --- SCATTERED PHOTOS --- */

  .roots-archive .c-dylan {
    top: 3%; left: 2%;
    width: 21%; height: 38%;
    z-index: 10;
    transform: rotate(-3.5deg);
  }
  .roots-archive .c-hendrix {
    top: 6%; left: 20%;
    width: 14%; height: 34%;
    z-index: 14;
    transform: rotate(2.5deg);
  }
  .roots-archive .c-joplin {
    top: -2%; left: 33%;
    width: 12%; height: 28%;
    z-index: 12;
    transform: rotate(-4deg);
  }
  .roots-archive .c-sf {
    top: 3%; left: 43%;
    width: 26%; height: 28%;
    z-index: 8;
    transform: rotate(1.5deg);
  }
  .roots-archive .c-beyonce {
    top: -3%; left: 67%;
    width: 28%; height: 44%;
    z-index: 15;
    transform: rotate(-2deg);
  }
  .roots-archive .c-fillmore {
    top: 8%; left: 88%;
    width: 16%; height: 30%;
    z-index: 7;
    transform: rotate(5deg);
  }

  /* MID SCATTER */
  .roots-archive .c-graham {
    top: 36%; left: -2%;
    width: 16%; height: 28%;
    z-index: 16;
    transform: rotate(3deg);
  }
  .roots-archive .c-dolly {
    top: 30%; left: 12%;
    width: 17%; height: 32%;
    z-index: 18;
    transform: rotate(-2.5deg);
  }
  .roots-archive .c-winterland {
    top: 28%; left: 27%;
    width: 23%; height: 24%;
    z-index: 13;
    transform: rotate(2deg);
  }
  .roots-archive .c-dead {
    top: 25%; left: 48%;
    width: 21%; height: 28%;
    z-index: 17;
    transform: rotate(-1.5deg);
  }
  .roots-archive .c-kiss {
    top: 40%; left: 67%;
    width: 16%; height: 30%;
    z-index: 19;
    transform: rotate(3.5deg);
  }
  .roots-archive .c-vinyl {
    top: 30%; left: 80%;
    width: 24%; height: 22%;
    z-index: 20;
    transform: rotate(-5deg);
  }

  /* BOTTOM SCATTER */
  .roots-archive .c-yosemite {
    top: 54%; left: -4%;
    width: 32%; height: 50%;
    z-index: 22;
    transform: rotate(1.5deg);
  }
  .roots-archive .c-steal {
    top: 56%; left: 26%;
    width: 13%; height: 24%;
    z-index: 30;
    background: #060606;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
    transform: rotate(-1deg);
    border: 2px solid rgba(255,255,255,0.06);
  }
  .roots-archive .c-steal img {
    filter: invert(1);
    object-fit: contain;
    width: 55%;
    height: auto;
  }
  .roots-archive .c-la {
    top: 56%; left: 37%;
    width: 22%; height: 30%;
    z-index: 21;
    transform: rotate(3.5deg);
  }
  .roots-archive .c-deadtee {
    top: 52%; left: 56%;
    width: 18%; height: 36%;
    z-index: 23;
    transform: rotate(-3deg);
  }
  .roots-archive .c-rockbrews {
    top: 56%; left: 72%;
    width: 17%; height: 42%;
    z-index: 24;
    transform: rotate(2.5deg);
  }
  .roots-archive .c-broadway {
    top: 50%; left: 86%;
    width: 18%; height: 36%;
    z-index: 20;
    transform: rotate(-4deg);
  }

  /* Vignette */
  .roots-archive .vignette {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.7) 100%);
    z-index: 50;
  }
  /* Film grain */
  .roots-archive .grain {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0.06;
    z-index: 51;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
  }

  .roots-archive .connect-link {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: color 0.4s ease;
  }
  .roots-archive .connect-link:hover {
    color: rgba(255,255,255,0.9);
  }

.roots-archive .roots-collage{width:100%;height:auto;aspect-ratio:16/9;background:#060606;isolation:isolate}.roots-archive .connect-link{color:#eee}.roots-archive .c-steal{padding:5px;gap:4px}@media(max-width:760px){.roots-archive .roots-collage{aspect-ratio:4/3}.roots-archive .connect-link{font-size:7px;letter-spacing:1px}}