root {
	--inkDim: #ffffff9c;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent)
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px
}

.hero {
  padding: 5vh;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(44px, 8.5vw, 104px);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 18px 0 24px;
  max-width: 14ch;
  text-align: left;
}

.hero h1 strong {
  font-style: normal;
  color: var(--accent)
}

.hero p {
  color: #ffffff9c;
  max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: left;
}

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap
}

.marquee-track {
  display: inline-block;
  animation: scroll 28s linear infinite;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff9c;
}

.marquee-track .spark {
  color: var(--accent);
  margin: 0 18px
}

@keyframes scroll {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-50%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .marquee-track {
    animation: none
  }
}

.grid-wrap {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px)
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 36px)
}

@media(max-width:920px) {
  .grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:540px) {
  .grid {
    grid-template-columns: 1fr
  }
}

@media(min-width:541px) {
  .card:nth-child(even) {
    /* transform: translateY(clamp(24px, 4vw, 56px)); */
    /* margin-bottom: 30px; */
  }
  .grid {
    padding-bottom: clamp(24px, 4vw, 56px)
  }
}

.card {
  position: relative
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  background: var(--surface)
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.02);
  transition: filter .45s ease, transform .6s ease
}

/* Lazy fade-in — scoped to .frame img so it outranks the base rule */
.frame img.lazy-img {                         
  opacity: 0;
  transition: opacity .6s ease, filter .45s ease, transform .6s ease;
  will-change: opacity;
}

.frame img.lazy-img.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .frame img.lazy-img {
    transition: opacity .3s ease;
  }
}

.card:hover .frame img,
.card:focus-within .frame img {
  filter: grayscale(0);
  transform: scale(1.07)
}

.card-num {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: rgba(18, 18, 16, .55);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .1em;
  z-index: 2
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 4px 0
}

.meta-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.02em;
  transition: color .2s
}

.card:hover .meta-name {
  color: var(--accent)
}

.meta-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: right;
  color: #ffffff94;
  max-width: 250px;
}

.rule {
  height: 1px;
  background: var(--line);
  margin-top: 14px;
  position: relative;
  overflow: hidden
}

.rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .45s ease
}

.card:hover .rule::after {
  transform: translateX(0)
}

.hero-row {
    width: 100%;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    gap: clamp(18px, 3vw, 36px);
}

.lazy-img {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}

.lazy-img.is-loaded {
  opacity: 1;
  filter: blur(0px) grayscale(100%) contrast(1.05);
}

/* respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .lazy-img {
    transition: opacity .3s ease;
    filter: none;
  }
}
@media(min-width:921px) {
	.hero-row {
    margin-bottom: 30px;
}
  .card:nth-child(3n+2) { transform: translateY(clamp(24px, 4vw, 56px)) }
}

@media(min-width:541px) and (max-width:920px) {
  .card:nth-child(2n) { transform: translateY(clamp(24px, 4vw, 56px)) }
}

@media(min-width:541px) {
  .grid { padding-bottom: clamp(24px, 4vw, 56px) }
}

@media(prefers-reduced-motion:reduce) {
  .frame img,
  .rule::after,
  .meta-name {
    transition: none
  }
  .card:hover .frame img {
    transform: none
  }
}

@media (max-width: 640px) {
  .grid,
  .grid .hero-row { grid-template-columns: 1fr; }
}