@font-face {
  font-family: Manrope;
  src: url('./assets/manrope-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f4f3f2;
  --earl-grey: #a6a29f;
  --ink: #171a18;
  --quiet: #55504d;
  --point: #303fa5;
  --line: #8c8885;
  --edge: clamp(24px, 4.35vw, 84px);
  font-family: Manrope, 'Helvetica Neue', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--ink); }

.studio {
  position: relative;
  min-height: 580px;
  min-height: max(580px, 100svh);
  padding: var(--edge);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  isolation: isolate;
  background:
    linear-gradient(125deg, #fff 0%, rgb(255 255 255 / 84%) 38%, rgb(255 255 255 / 35%) 100%),
    var(--earl-grey);
}

.masthead { display: flex; justify-content: space-between; align-items: flex-start; }
.studio-label { margin: 0; font-size: 14px; line-height: 1.6; letter-spacing: -.025em; }
.contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: -.025em;
  position: relative;
  margin-block-start: -10px;
}
.contact::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(.12);
  transform-origin: right;
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.contact:hover::after, .contact:focus-visible::after { transform: scaleX(1); transform-origin: left; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--point); outline-offset: 8px; border-radius: 2px; }

.identity { position: relative; width: 100%; margin: 0; }
.wordmark { display: block; width: 100%; height: auto; overflow: visible; fill: var(--ink); }
.wordmark path { fill: inherit; }
.point { will-change: transform; }
.point path { transition: fill 400ms ease; }
.identity[data-playing='true'] .point path { fill: var(--point); }
.point-button {
  appearance: none;
  position: absolute;
  left: 76.5%;
  top: -11%;
  width: max(8%, 48px);
  height: max(40%, 48px);
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.point-button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  transition: opacity 220ms, transform 350ms;
}
.point-button:hover::after, .point-button:focus-visible::after { opacity: .8; transform: translate(-50%, -50%) scale(1); }
.point-button:focus-visible { outline: 0; }
.point-button:focus-visible::after { border-color: var(--point); border-width: 2px; }

.colophon { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 2px; }
.statement { margin: 0; font-size: clamp(20px, 1.66vw, 28px); line-height: 1.32; letter-spacing: -.045em; }
.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; }

@media (max-width: 600px) {
  .studio { min-height: max(500px, 100svh); grid-template-rows: 1fr auto 1fr; padding-top: 28px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  .masthead { flex-direction: column; gap: 14px; }
  .contact { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: var(--edge); margin: 0; }
  .studio-label { font-size: 14px; }
  .identity { transform: translateY(-18px); }
  .colophon { padding-bottom: 86px; }
  .statement { font-size: 23px; }
  .point-button { left: calc(80.4% - 25px); top: -25px; width: 50px; height: 50px; }
}

@media (max-height: 560px) and (min-width: 601px) {
  .studio { min-height: 460px; padding-block: 28px; }
  .identity { max-width: 1000px; justify-self: center; }
}

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