* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #f6f4f1;
}

/* ------------------------------------------------------------
   Portfolio frames (reference: kononenkogroup.com/work)
   Cards are grouped two per full-viewport "frame"; the root
   scroll snaps frame by frame so one wheel gesture lands on
   the next pair. Inside each frame, cards are placed manually
   on a 12-column grid (see .proj-1 ~ .proj-6).
   ------------------------------------------------------------ */
html {
  scroll-snap-type: y mandatory;
}

.frame {
  min-height: 100vh;
  scroll-snap-align: start;
  /* One gesture can never fly past a frame: momentum scrolling is
     forced to stop at every snap point instead of skipping ahead. */
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 3vw;
  align-content: center;
  padding: 0 5vw;
}

.proj {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.proj-link {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Manual placement, one rule per card:
   grid-column = horizontal position + width on the 12-column grid
   (start line / end line), margin-top = vertical drop in plain px
   (relative within the card's frame). Tune each card here directly. */
.proj-1 { grid-column: 2 / 6;  margin-top: 0; }
.proj-2 { grid-column: 8 / 12; margin-top: 110px; }
.proj-3 { grid-column: 1 / 5;  margin-top: 240px; }
.proj-4 { grid-column: 9 / 13; margin-top: 120px; }
.proj-5 { grid-column: 1 / 5;  margin-top: 300px; }
.proj-6 { grid-column: 8 / 12; margin-top: 150px; }

/* Matted like a physical print: a tinted margin around each image
   keeps light-background screenshots from blending into the page.
   aspect-ratio mirrors the connecting device's own width:height ratio
   (see the inline script setting --device-ratio), falling back to a
   fixed 4:5 print ratio if JS didn't run. */
.proj-media {
  width: 100%;
  aspect-ratio: var(--device-ratio, 4 / 5);
  overflow: hidden;
  padding: 14px;
  background: #e4e0da;
}

.proj-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.17,.84,.44,1);
}

.proj:hover .proj-img {
  transform: scale(1.0225);
}

.proj-img-1 { background: linear-gradient(160deg, #d9d2c7 0%, #b7ab98 100%); }
.proj-img-2 { background: linear-gradient(160deg, #c9c2b6 0%, #8f8577 100%); }
.proj-img-3 { background: linear-gradient(160deg, #e2ddd3 0%, #c4b8a5 100%); }
.proj-img-4 { background: linear-gradient(160deg, #d3ccc0 0%, #a89c8a 100%); }
.proj-img-5 { background: linear-gradient(160deg, #ded7cb 0%, #b3a690 100%); }
.proj-img-6 { background: linear-gradient(160deg, #cfc7ba 0%, #94897a 100%); }

.proj-label {
  position: relative;
  height: 1.4em;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  color: #2b2620;
}

.proj-label span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.4em;
  transition: transform 0.6s cubic-bezier(.17,.84,.44,1);
}

.label-a { transform: translateY(0); }
.label-b {
  transform: translateY(101%);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6255;
}

.label-b::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.17,.84,.44,1);
}

.proj:hover .label-a { transform: translateY(-101%); }
.proj:hover .label-b { transform: translateY(0); }
.proj:hover .label-b::before { transform: scaleX(1); transition-delay: 0.25s; }

@media (max-width: 767.98px) {
  html { scroll-snap-type: none; }
  .frame {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-height: auto;
    padding: 24px 5vw;
  }
  .proj { grid-column: auto !important; margin-top: 0 !important; }
}