:root {
  color-scheme: dark;
  color: #fff;
  /* The face height drives every other measure so the page scales as one drawing. */
  --face-h: min(49.44vw, 49vh);
  --face-h: min(49.44vw, 49dvh);
  /* The signup line: a still line the water settles into. Its width follows the face. */
  --line-w: clamp(240px, calc(var(--face-h) * 0.72), 400px);
  --line-dim: rgba(255, 255, 255, 0.42);
  --text-dim: rgba(255, 255, 255, 0.62);
  --ease: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
html, body { margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
main { width: 100%; height: 100%; height: 100dvh; display: flex; flex-direction: column; }
svg { display: block; width: 100%; min-height: 0; }
.face { height: var(--face-h); flex: none; }
.reflection { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.reflection svg { height: calc(100vw * var(--row-height) / 1254); flex: 0 1 auto; }

/* Signup: a still line resting in the water, seated in the one clean seam of the artwork. */
.signup {
  flex: none;
  align-self: center;
  box-sizing: border-box;
  position: relative;
  width: var(--line-w);
  height: 72px;
  margin: 0;
  padding: 24px 0 16px;
  display: flex;
  align-items: stretch;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.signup-line {
  position: relative;
  width: 100%;
  height: 32px;
  border-bottom: 1px solid var(--line-dim);
  transition: border-color var(--ease);
}
.signup-line:hover,
.signup-line:focus-within { border-color: #fff; }

.signup input[type=email] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 34px 1px; /* symmetric so the text stays centred under the face */
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: 13px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  caret-color: #fff;
}
.signup input::placeholder {
  color: var(--text-dim);
  opacity: 1;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--ease);
}
.signup-line:hover input:not(:focus)::placeholder { color: #fff; }
.signup input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }

.signup button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 100%;
  margin: 0;
  padding: 0 0 1px;
  border: 0;
  background: transparent;
  color: #fff;
  opacity: 0.42;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: opacity var(--ease);
}
.signup button svg {
  width: 20px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signup-line:hover button,
.signup input:focus ~ button,
.signup input:valid ~ button { opacity: 1; }
.signup button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.signup button:disabled { opacity: 0.42; cursor: wait; }

.signup-status {
  position: absolute;
  inset: 0 0 1px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font: 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.signup[data-complete] .signup-line input,
.signup[data-complete] .signup-line button { opacity: 0; pointer-events: none; }
.signup[data-complete] .signup-status { opacity: 1; }
.signup[data-complete] .signup-line { border-color: #fff; }

/* A short note under the line while the address is being checked or has failed. */
.signup[data-note]::after {
  content: attr(data-note);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 4px); /* 12px under the line, which sits 16px above the form's edge */
  color: var(--text-dim);
  font: 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .signup *, .signup-line { transition: none; }
}