@font-face {
  font-family: "Inter Tight";
  src: url("./public/inter-tight-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("./public/inter-tight-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Inter Tight", Arial, sans-serif;
  font-synthesis: none;
  color: #111;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: #ffdf4b; color: #111; }

.page {
  width: min(1080px, calc(100% - 128px));
  min-height: 100svh;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.header { padding-top: 54px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.65px;
  text-decoration: none;
}
.brand-mark { width: 23px; height: 23px; fill: currentColor; }

main {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  padding-block: 72px 80px;
}

h1 {
  margin: 0 0 30px;
  font-size: clamp(40px, 3.8vw, 55px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -2.2px;
}
.description { max-width: 440px; }
p {
  margin: 0 0 22px;
  color: #414141;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -.18px;
}
.contact {
  display: inline-flex;
  align-items: center;
  gap: 33px;
  margin-top: 12px;
  padding: 16px 21px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid #111;
  transition: background 160ms, color 160ms;
}
.contact:hover { background: #fff; color: #111; }
.contact svg { flex: none; }
:focus-visible { outline: 2px solid #164bff; outline-offset: 6px; }

.visual { position: relative; margin: 0; width: 100%; }
#data-art, .static-art { display: block; width: 100%; height: auto; overflow: visible; }
#motion-toggle {
  position: absolute;
  right: 10%;
  bottom: 2%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #656565;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.visual:hover #motion-toggle, .visual:focus-within #motion-toggle { opacity: 1; }
#motion-toggle:active { transform: scale(.97); }
#motion-toggle:hover { color: #111; background: #f3f3f3; }
@media (hover: none) { #motion-toggle { opacity: .7; } }

footer {
  border-top: 1px solid #e2e2e2;
  padding-block: 22px 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #676767;
  font-size: 12px;
  line-height: 1.5;
}
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1500px) {
  .page { max-width: 1080px; }
  main { gap: 68px; }
}

@media (max-width: 900px) {
  .page { width: calc(100% - 80px); }
  main { gap: 24px; padding-block: 56px; }
  h1 { font-size: 39px; letter-spacing: -1.6px; }
  p { font-size: 17px; }
}

@media (max-width: 680px) {
  .page { width: calc(100% - 48px); }
  .header { padding-top: 29px; }
  .wordmark { font-size: 19px; }
  .brand-mark { width: 21px; height: 21px; }
  main { grid-template-columns: 1fr; gap: 18px; padding-block: 48px 26px; }
  h1 { font-size: clamp(30px, 8.5vw, 48px); margin-bottom: 23px; }
  p { margin-bottom: 17px; }
  .description { max-width: 440px; }
  .contact { margin-top: 7px; padding: 14px 18px; font-size: 16px; }
  .visual { width: min(100%, 340px); margin-inline: auto; }
  footer { font-size: 10px; padding-block: 16px 20px; }
}

@media (max-width: 680px) and (max-height: 740px) {
  main { padding-block: 32px 12px; gap: 8px; }
  p { font-size: 16px; }
  .visual { max-width: 210px; }
}

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