/* =========================================
   Projects page – distinct but related mood
   ========================================= */

/* Background variant */
.site-bg--projects {
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(
      1200px 600px at 20% 20%,
      rgba(10,102,194,.22),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 80% 70%,
      rgba(0,65,130,.14),
      transparent 65%
    ),
    linear-gradient(
      120deg,
      #FAF0E6 0%,
      #E8F1EC 35%,
      #D9E6E0 100%
    );
}


/* Slightly different grid rhythm */
.grid--projects {
  margin-top: clamp(20px, 4vw, 40px);
}

/* Hero tile variant */
.tile--projects-hero {
  background: rgba(255, 255, 255, 0.85);
}

.tile--projects-hero .headline {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Project tiles */
.tile--project {
  background: rgba(255, 255, 255, 0.78);
}

.tile--project .tile__title {
  font-size: 1.25rem;
}

.tile--project .tile__text {
  margin-top: 0.4rem;
  line-height: 1.55;
}

.tile__meta {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A4833;
  opacity: 0.8;
}

/* Smaller tiles */
.tile--small .tile__title {
  font-size: 1.05rem;
}

/* Subtle hover distinction */
.tile--project:hover {
  transform: translateY(-2px);
}

/* Project tiles: media header */
.project-tile__cover{
  margin: -14px -14px 12px;  /* stretch to tile edges (matches your tile padding) */
  border-bottom: 2px solid #000;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.project-tile__coverimg{
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* If a tile has a cover, give it a bit more vertical room */
.tile--project.tile--has-cover{
  --r: 4;
}