.wrap{
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-inline:18px;
  position:relative; z-index:1;
}
.wrap::after{
  content:"";
  position:fixed; left:50%; bottom:10px; width:60vw; max-width:900px; aspect-ratio:3/1;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0));
  filter: blur(40px);
  pointer-events:none;
}

.card{
  width:min(100%, var(--maxw));
  margin:0 auto;
  background: linear-gradient(180deg, rgb(20 19 20), rgb(10 10 10));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden; isolation:isolate;
}

/* HERO */
.hero{
  position:relative;
  height:min(56vw, 320px);
  background-image: var(--hero-url);
  background-size:cover; background-position:center 35%;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,0) 100%);
  transform: translateZ(0);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(122,30,46,.14), rgba(122,30,46,0) 60%),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,0) 40%);
  pointer-events:none;
}

.head{ padding:22px 22px 10px; text-align:center; position:relative; z-index:2; }
.title{
  font:120px/1 'Mea Culpa', 'Cormorant Garamond', 'Gloock', Georgia, serif;
  font-size:64px; margin:0; letter-spacing:.01em;
  text-shadow:0 6px 26px rgba(0,0,0,.65);
}
@media (min-width:740px){ .title{ font-size:72px; } }

.links{ display:grid; gap:14px; padding:0 16px 20px; }