@charset "UTF-8";

:root {
  color-scheme: dark;
  --ink: #080a0b;
  --platinum: #edece7;
  --silver: #a5aaa9;
  --quiet: #818887;
  --focus: #ded1b0;
  --gutter: clamp(1.5rem, 4.3vw, 5rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--ink);
  color: var(--platinum);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body { margin: 0; }

button { font: inherit; }

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

.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(20rem, 1fr) auto;
  min-height: 100svh;
  overflow: hidden;
}

.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.5rem, 3.6vw, 3.75rem) var(--gutter) 0;
}

.wordmark {
  font-family: "Arial Black", "Helvetica Neue", sans-serif;
  font-size: clamp(1.65rem, 2.3vw, 2.125rem);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 1;
}

.wordmark-period { margin-left: 0.06em; color: var(--silver); }

.brand-logo { display: block; width: clamp(8rem, 12vw, 11rem); height: auto; }

.motion-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
  margin-right: -0.75rem;
  border: 0;
  border-radius: 50%;
  color: var(--quiet);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--platinum); background: #ffffff09; }
.motion-toggle:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }
.motion-toggle svg { width: 1.25rem; height: 1.25rem; }
.motion-toggle .icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }

.sculpture {
  position: relative;
  min-width: 0;
  min-height: 20rem;
  margin: -1.5rem 0 -1rem;
}

#particle-field { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

.footer {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(1.75rem, 4vw, 3.625rem);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
}

.footer p { margin: 0 auto; max-width: 40rem; }
.intro { color: var(--silver); }
.footer .detail { margin-top: 0.45rem; color: var(--quiet); }
.footer .signoff { color: #f2d45b; white-space: nowrap; }

@media (min-width: 1800px) {
  .landing { grid-template-rows: auto minmax(30rem, 1fr) auto; }
}

@media (max-width: 600px) {
  .landing { grid-template-rows: auto minmax(21rem, 1fr) auto; }
  .masthead { padding-top: 1.5rem; }
  .sculpture { margin-top: 0; margin-bottom: 0; }
  .footer { padding-bottom: max(1.75rem, env(safe-area-inset-bottom)); font-size: 0.8125rem; }
  .footer .intro { max-width: 18rem; }
  .footer .detail { max-width: 21rem; margin-top: 0.65rem; }
  .desktop-break { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}