/* Open source: a quiet page — a small label in mono, a large serif line, and a picture that rises behind it on
   hover, the line turning italic over it (scripts/scenes/projects.js). */

.proj {
  --paper: #f7f5f0;
  --ink: #161513;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(28px, 5vh, 52px);
  min-height: 86svh;
  padding: clamp(80px, 16vh, 180px) 16px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.proj__label {
  margin: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.proj__link {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15em;
  color: inherit;
  text-decoration: none;
}

.proj__line {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.8rem, 1.2rem + 6vw, 7rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  line-height: 1;
  letter-spacing: -0.015em;
  transition: font-variation-settings 0.4s, letter-spacing 0.4s;
}

.proj__line--small {
  font-size: clamp(1.4rem, 0.9rem + 2.2vw, 2.6rem);
  margin-top: 0.4em;
  color: rgba(22, 21, 19, 0.7);
}

/* The picture: hidden, then rising into place behind the words. */
.proj__peek {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(44vw, 520px);
  aspect-ratio: 4 / 5;
  translate: -50% -50%;
  overflow: hidden;
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.45s var(--ease-out), scale 0.7s var(--ease-out);
  pointer-events: none;
}

.proj__peek img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; position: relative; }

.proj__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 18px;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 220, 160, 0.35), transparent 60%),
    linear-gradient(160deg, #8a3f2a, #3c2a1e 60%, #2a2a1f);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.proj__link:hover .proj__peek,
.proj__link:focus-visible .proj__peek { opacity: 1; scale: 1; }

.proj__link:hover .proj__line,
.proj__link:focus-visible .proj__line { font-style: italic; }

@media (hover: none) {
  /* No hover on touch screens: show the picture faintly so it's clear there's something behind the words. */
  .proj__peek { opacity: 0.18; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .proj__peek { transition: opacity 0.3s linear; scale: 1; }
}

/* Over the picture, the words keep a soft paper glow so they read against it. */
.proj__link:hover .proj__line,
.proj__link:focus-visible .proj__line {
  color: var(--ink);
  text-shadow: 0 0 18px rgba(247, 245, 240, 0.85), 0 0 4px rgba(247, 245, 240, 0.7);
}

/* Website design follows open source directly: the two read as one page with two entries. */
.proj + .proj { padding-top: 0; min-height: auto; }
.proj + .proj .proj__label { display: none; }

/* Its placeholder picture, in the site's olive until a real one goes in. */
.proj--web .proj__ph {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 240, 190, 0.35), transparent 60%),
    linear-gradient(160deg, #8a8a3c, #3f4a2c 60%, #26291d);
}
.proj:has(+ .proj) { min-height: auto; padding-bottom: clamp(48px, 9vh, 96px); }

/* The picture never taller than about half the screen, so it stays within its entry's room. */
.proj__peek { width: min(36vw, 420px, 56svh * 0.8); }

/* The entry being hovered comes forward, over its neighbours. */
.proj { position: relative; }
.proj:hover,
.proj:focus-within { z-index: 2; }

/* The last entry keeps room beneath its picture. */
.proj:last-of-type { padding-bottom: max(200px, 22vh); }

/* Room between the two entries, enough that one's picture never reaches the other's words. */
.proj:has(+ .proj) { padding-bottom: clamp(150px, 24svh, 260px); }
.proj__peek { width: min(36vw, 420px, 50svh * 0.8); }