* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: sans-serif;
  }
  
  .site-header {
    position: fixed;
    top: 20px;
    left: 24px;
  }
  
  .name {
    letter-spacing: 0.12em;
    font-size: 16px;
  }
  
  .stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .portrait {
    width: 320px;
    height: 420px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  html, body {
    height: 100%;
  }
  
  
  .waterfall {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: white;
    
  }
  
  .waterfall-track {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    animation: scrollDown 40s linear infinite;
    will-change: transform;
    min-height: 200vh;
  }

  
  
  .grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
  }
  
  .tile {
    width: 100%;   /* fixed tile shape */
    overflow: hidden;     /* THIS is the crop */
  }
  
  .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06); /* zoom level */
    opacity: 0.3;
    display: block;
  }
  
  
  
  /* ANIMATION */
  @keyframes scrollDown {
    from {
      transform: translateY(-50%);
    }
    to {
      transform: translateY(0%);
    }
  }
  
  .fade {
    position: fixed;
    left: 0;
    width: 100%;
    height: 120px;          /* adjust softness */
    pointer-events: none;
    z-index: 10;
  }
  
  .fade-top {
    top: 0;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1),
      rgba(255,255,255,0)
    );
  }
  
  .fade-bottom {
    bottom: 0;
    background: linear-gradient(
      to top,
      rgba(255,255,255,1),
      rgba(255,255,255,0)
    );
  }
  
  .fixed-buttons {
    position: absolute;
    top: 40%;
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 200px;          /* space between the two images */
    row-gap: 500px;
    grid-auto-rows: 150px;
    z-index: 20;         /* above waterfall + fades */
    pointer-events: none;
    grid-template-columns: auto auto;
    width: 100%;
    margin: auto;
    scroll-margin-bottom: 100px;
    margin-bottom: 100px;
    
    
  }
  
  .image-button {
    pointer-events: auto;
    display: block;
    transition: transform 0.25s ease;
    transform: scale(1) rotate(0deg);
  }
  
  .image-button img {
    width: 320px;        /* adjust size */
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  }
  
  .image-button:hover {
    transform: scale(1.08) rotate(-2deg);
  }