/* Landing page v30 */

:root{
  --tall: 1.08;
  --overlay: 0.38;
  --overlayHover: 0.55;
  --fade: 950ms;
}

html, body{ height:100%; margin:0; }

body{
  font-family: HelveticaNeue-light, Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#fff;
  background:#000;
  overflow:hidden;
}

.bg{
  position:fixed;
  inset:0;
  z-index:0;
}

.bg-slot{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity var(--fade) cubic-bezier(.22,1,.36,1);
}

.bg-slot.is-on{ opacity:1; }

.bg-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.wrap{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--overlay));
  transition:background 140ms ease;
}

.wrap:has(.toplink:hover)::before,
.wrap:has(.wl:hover)::before,
.wrap:has(#nameHover:hover)::before{
  background:rgba(0,0,0,var(--overlayHover));
}

.top{
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
}

.toplink{
  color:#fff;
  text-decoration:none;
  font-size:clamp(17px, 2.4vw, 23px);
  font-weight:500;
}

.toplink:hover{ font-style:italic; }

.email.is-copied{
  text-decoration: underline;
}

.content{
  text-align:center;
  padding:0 6vw;
  max-width:min(92vw, 1100px);
}

.tall{ display:inline-block; transform:scaleY(var(--tall)); }

.text{
  font-weight:500;
  line-height:1.2;
  font-size:clamp(17px, 2.4vw, 23px);
  white-space:normal;
  text-wrap:balance;
}

@media (min-width:1100px){
  .text{ white-space:nowrap; }
}

.pipe{
  padding:0 .55em;
  white-space:nowrap;
}

/* Faux-italic pivot from baseline so top leans forward */
.hover-italic{
  display:inline-block;
  font-weight:inherit;
  font-family:inherit;
  transform-origin:left bottom;
}
.hover-italic:hover{
  transform:skewX(-12deg);
}

.hover-underline-all .attitude{
  text-decoration:none;
}
.hover-underline-all:hover .attitude{
  text-decoration:underline;
}

.bottom-mark{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
}

.wl{
  font-size:clamp(17px, 2.4vw, 23px);
  font-weight:500;
}

.wl:hover{ font-style:italic; }

.wl-gif{
  position:fixed;
  display:none;
  width:min(320px, 60vw);
  opacity:0;
  transition:opacity 140ms ease;
  mix-blend-mode: screen;
  pointer-events:none;
}