.intro-screen { overflow: hidden; pointer-events: auto; touch-action: none; color: #f3f2ee; }
.intro-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.intro-panels > span { background: #000; height: 100%; width: calc(100% + 1px); will-change: transform; }
.intro-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: pre; font-size: clamp(20px, 2.5vw, 36px); line-height: 1.4; font-weight: 600; letter-spacing: .025em; }
.intro-label { visibility: hidden; }
.intro-typed { position: absolute; inset: 0 auto auto 0; }
html[data-intro="reveal"] body > .header,
html[data-intro="reveal"] body > main,
html[data-intro="reveal"] body > footer { opacity: var(--intro-page-opacity, 0); }
html[data-intro] .image-trail { visibility: hidden; }
@media (max-width: 640px) {
  .intro-text { font-size: clamp(18px, 5.3vw, 25px); }
}