:root {
  --bg: #fff;
  --ink: #000;
  --muted: #bbb;
  --gutter: clamp(16px, 2.2vw, 28px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--muted);
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  padding: var(--gutter);
  -webkit-font-smoothing: antialiased;
}
.logo { display: inline-block; }
.logo img {
  display: block;
  width: clamp(150px, 18vw, 260px);
  height: auto;
}
main {
  margin-top: clamp(40px, 7vw, 96px);
  max-width: 14.5em;
  font-size: clamp(28px, 4.65vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
}
main > * + * { margin-top: 1em; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* vawaa */
.film video {
  display: block;
  /* Vertical 9:16 video: as wide as the column allows, but never taller than the screen. */
  width: min(100%, calc(85vh * 9 / 16));
  width: min(100%, calc(85svh * 9 / 16));
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
}
/* Fullscreen: drop the column sizing and letterbox the whole frame. */
.film video:fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}
.film video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}

/* contact */
.note label { display: block; }
.note label + label { margin-top: 0.5em; }
.note input, .note textarea {
  display: block;
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--muted);
  border-radius: 0;
  padding: 0.1em 0 0.15em;
  outline: none;
  -webkit-appearance: none;
}
.note input:focus, .note textarea:focus { border-bottom-color: var(--ink); }
.note textarea { resize: vertical; min-height: 3.2em; line-height: 1.05; }
.note ::placeholder { color: var(--muted); opacity: 1; }
.note button {
  margin-top: 0.6em;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.note button:hover { color: var(--muted); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { color: var(--ink); }
[hidden] { display: none !important; }

@media (max-width: 600px) {
  main { max-width: none; }
}