:root {
  color-scheme: dark;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #000; }
body { overflow: hidden; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

.portfolio {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: #000;
  user-select: none;
}

.carousel, .slide, .slide img, .fade { position: absolute; inset: 0; }
.slide {
  z-index: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s linear;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide img {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
}
.slide.is-landscape img { width: 100%; height: auto; }
.slide.is-portrait img { width: auto; height: 100%; }
.fade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 54%, rgba(0,0,0,.06) 64%, rgba(0,0,0,.78) 84%, #000 96%);
}

.logo {
  position: absolute;
  z-index: 4;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  left: 50%;
  width: auto;
  height: clamp(14px, 1.2vw, 72px);
  transform: translateX(-50%);
}
.email {
  position: absolute;
  z-index: 4;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  right: max(22px, calc(env(safe-area-inset-right) + 16px));
  color: #fff;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
}
.email::after {
  display: block;
  width: 0;
  height: 1px;
  margin-top: 6px;
  background: currentColor;
  content: "";
  transition: width 250ms ease;
}
.email:hover::after { width: 100%; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .email {
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    bottom: max(55px, calc(env(safe-area-inset-bottom) + 47px));
  }
  .logo { bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .email::after { transition: none; }
}