:root {
  color-scheme: dark;
  --background: #000;
  --text: #fdfbf7;
  --line: #202022;
  --accent: #ed163a;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--background); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--text); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { font: inherit; }
[hidden] { display: none !important; }

.page { width: min(100% - 48px, 480px); margin: 0 auto; padding: 24px 0 28px; }
.page:focus { outline: none; }
.brand { text-align: center; }
.emblem { display: block; width: 144px; height: 144px; margin: 0 auto 5px; object-fit: contain; }
.wordmark { margin: 0; font-weight: 400; text-align: center; }
.curiously { display: block; font-family: Michroma, Arial, sans-serif; font-size: clamp(16px, 4.4vw, 21px); line-height: 1.6; letter-spacing: .065em; }
.offbeat { display: block; margin-top: -1px; color: var(--accent); font-family: "Bebas Neue", Impact, sans-serif; font-size: 66px; font-weight: 400; line-height: .98; letter-spacing: .075em; text-indent: .075em; }
.tagline { margin: 15px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: .015em; }

.socials { width: min(100%, 360px); margin: 28px auto 0; border-top: 1px solid var(--line); }
.social-link { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); font-family: Michroma, Arial, sans-serif; font-size: clamp(20px, 5.5vw, 26px); font-weight: 400; line-height: 1.4; letter-spacing: .04em; text-indent: .04em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease; }
.social-link span:first-child { transition: transform .2s ease; }
.social-link:focus-visible { color: var(--accent); }
.social-link:active { color: var(--accent); }
@media (hover: hover) {
  .social-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .social-link:hover span:first-child { transform: translateY(-1px); }
}

.contact { margin-top: 26px; text-align: center; }
.contact-link { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; border-radius: 2px; }
.contact-heading { font-family: Michroma, Arial, sans-serif; font-size: 9px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.email { color: #b7b7bb; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.contact-link:hover .email, .contact-link:focus-visible .email { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.intro { display: none; position: fixed; inset: 0; z-index: 10; overflow: hidden; place-items: center; background: #000; isolation: isolate; }
.js .intro:not([hidden]) { display: grid; animation: release-intro 0s 3.25s forwards; }
.intro-active { overflow: hidden; }
.intro-active .page { visibility: hidden; }
.intro__lockup { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 24px; }
.intro__emblem { position: relative; width: min(70vw, 42vh, 340px); aspect-ratio: 1; transform-origin: 0 0; will-change: transform; }
.intro__artwork { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__tunnel, .intro__path { opacity: 0; }
.intro__tunnel { transform-box: fill-box; transform-origin: center; }
.intro--revealing .intro__tunnel { animation: reveal-tunnel .8s ease-out both; }
.intro--revealing .intro__path { opacity: 1; }
.intro--revealing .intro__path-trace { animation: trace-path .65s cubic-bezier(.4, 0, .2, 1) .14s both; }
.intro__wordmark { margin-top: 12px; opacity: 0; will-change: transform, opacity; }
.intro--revealing .intro__wordmark { animation: reveal-logo .8s ease-out both; }
.intro--holding .intro__tunnel, .intro--holding .intro__path, .intro--holding .intro__wordmark { opacity: 1; transform: none; animation: none; }
.intro--holding .intro__path-trace { stroke-dashoffset: 0; animation: none; }
.intro__wordmark .curiously { font-size: clamp(18px, 5vw, 25px); }
.intro__wordmark .offbeat { font-size: clamp(68px, 18vw, 80px); }
.intro__skip { position: absolute; z-index: 2; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 3px; border: 0; background: transparent; color: var(--text); opacity: 0; font-family: Michroma, Arial, sans-serif; font-size: 10px; letter-spacing: .035em; cursor: pointer; transition: color .2s ease; }
.intro--revealing .intro__skip { opacity: 1; }
.intro__skip span { font-family: Arial, sans-serif; font-size: 21px; }
.intro__skip:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.intro--diving .intro__skip { opacity: 0; pointer-events: none; }
.page-entering { animation: emerge .2s ease-out both; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes emerge {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes release-intro { to { visibility: hidden; pointer-events: none; } }
@keyframes reveal-logo { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-tunnel { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes trace-path { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }

@media (max-width: 360px) {
  .page { width: calc(100% - 36px); padding-top: 18px; }
  .emblem { width: 126px; height: 126px; }
  .offbeat { font-size: 58px; }
  .socials { margin-top: 24px; }
  .social-link { min-height: 58px; font-size: 20px; }
}
@media (min-width: 900px) and (min-height: 850px) {
  .page { padding-top: 40px; padding-bottom: 40px; }
  .socials { margin-top: 34px; }
  .social-link { min-height: 70px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .intro:not([hidden]) { display: none; }
  .intro-active .page { visibility: visible; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}