:root{
  --bg0:#0e0f12;
  --bg1:#14161c;
  --txt:#e7e7e7;
  --mut:rgba(231,231,231,.68);
  --mut2:rgba(231,231,231,.48);
  --line:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.03);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --r:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background: radial-gradient(1100px 700px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(255,255,255,.04), transparent 55%),
              linear-gradient(160deg, var(--bg0), var(--bg1));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page{display:flex; align-items:center; justify-content:center; padding:28px 16px;}
.wrap{width:min(980px, 100%);}

.top{margin: 8px 0 22px;}
.brand{
  display:inline-block;
  text-decoration:none;
  color:var(--txt);
  letter-spacing:.02em;
  font-weight:520;
  opacity:.92;
}
.brandT{font-weight:720}
.lead{
  margin:12px 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing:.01em;
  line-height:1.25;
}
.sublead{
  margin:0;
  color:var(--mut);
  font-size: 14px;
  line-height:1.6;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.card{
  position:relative;
  display:block;
  border-radius: var(--r);
  overflow:hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  text-decoration:none;
  transform: translateZ(0);
}

.card__img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(1.01);
}

/* default overlay (base) */
.card__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 600px at 20% 20%, rgba(0,0,0,.15), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08));
}

/* make IRIS slightly quieter */
.card--iris .card__img{ filter: brightness(.82) contrast(.95); }
.card--iris .card__overlay{
  background:
    radial-gradient(700px 600px at 20% 20%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.10));
}

/* LEON slightly brighter */
.card--leon .card__img{ filter: brightness(.86) contrast(.96); }

.card__text{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
}

.card__name{
  font-size: 13px;
  letter-spacing:.22em;
  font-weight:650;
  opacity:.92;
}

.card__vibe{
  margin-top:8px;
  color:rgba(231,231,231,.72);
  font-size: 13px;
  line-height:1.45;
}

.card:hover{
  border-color: rgba(255,255,255,.14);
}
.card:hover .card__img{
  filter: brightness(.90) contrast(.98);
}
.card--iris:hover .card__img{
  filter: brightness(.86) contrast(.97);
}

.card:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
}

.foot{margin-top:18px}
.back{
  color:var(--mut2);
  text-decoration:none;
  font-size: 13px;
}
.back:hover{color:var(--mut)}

/* mobile */
@media (max-width: 760px){
  .page{padding:22px 14px;}
  .grid{grid-template-columns: 1fr; gap:12px;}
  .card__text{left:16px; right:16px; bottom:16px;}
}