:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #222;
  font-family: "Times New Roman", Times, "Songti SC", serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body { margin: 0; }

.entrances {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-height: 650px;
  height: calc(100svh - 60px);
  margin-top: calc(8px + clamp(27px, 2.8vw, 42px) * 1.05);
  padding: 18px 0 36px;
}

.entrance {
  display: flex;
  align-items: center;
  min-width: 0;
}

.entrance h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(100px, 12.5vw, 192px);
  line-height: 1;
  letter-spacing: -.055em;
}

.work { padding-left: 37%; }
.music { padding-left: 13%; }
.photos { padding-left: 48%; }
.about { padding-left: 22%; }

.entrance .portal {
  position: relative;
  width: max-content;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  padding-block: .08em .12em;
  margin-block: -.08em -.12em;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.entrance .portal.is-dragging { cursor: grabbing; z-index: 2; }
.portal.is-dragging .portal-title { visibility: hidden; }
.portal.is-dragging .marquee { visibility: visible; }
.portal.is-dragging .marquee-track {
  animation: marquee var(--duration, 18s) linear infinite;
}

.marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  visibility: hidden;
  background: var(--ink);
  color: var(--paper);
  font-size: .72em;
  letter-spacing: 0;
  line-height: 1.2;
}

.marquee-track {
  display: flex;
  flex: none;
  width: max-content;
  will-change: transform;
}

.marquee-track > span {
  flex: none;
  white-space: nowrap;
  padding-right: .75em;
}

.portal:is(:hover, :focus-visible) .portal-title { visibility: hidden; }
.portal:is(:hover, :focus-visible) .marquee { visibility: visible; }
.portal:is(:hover, :focus-visible) .marquee-track {
  animation: marquee var(--duration, 18s) linear infinite;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .portal:is(:hover, :focus-visible, .is-dragging) .marquee-track { animation: none; }
}

::selection { background: var(--ink); color: var(--paper); }

@media (min-width: 1800px) {
  .entrances { max-width: 1800px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .entrances {
    margin-top: 38.35px;
    height: calc(100svh - 48px);
    min-height: 520px;
    padding-top: 25px;
    padding-bottom: 36px;
  }
  .entrance h2 { font-size: clamp(82px, 20vw, 138px); }
  .work { padding-left: 29%; }
  .music { padding-left: 7%; }
  .photos { padding-left: 27%; }
  .about { padding-left: 10%; }
}

@media (max-height: 500px) and (min-width: 701px) {
  .entrances { min-height: 500px; }
  .entrance h2 { font-size: 110px; }
}