/* Phone screens. Colours from the Dalí's brand and marketing feedback, Oct 9:
   background #744245, white text, slash #4DF4E4, white button with its label
   in the background colour. The slash is one straight line and never crosses
   text (Beth Bell, Oct 9 and Oct 21). Margins equal on both sides. */
:root {
  --bg: #744245;
  --fg: #ffffff;
  --slash: #4DF4E4;
  --margin: max(28px, 8vw);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-variant-ligatures: none;           /* no fi ligature in "first" */
  font-feature-settings: "liga" 0, "clig" 0;
  -webkit-text-size-adjust: 100%;
}
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen[hidden] { display: none; }
.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(48px, env(safe-area-inset-top)) var(--margin) 24px;
  position: relative;
  z-index: 1;
}
h1 {
  font-size: clamp(30px, 8.6vw, 44px);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 22px;
  letter-spacing: 0.005em;
}
h1 .break { display: block; height: 0.5em; }
form { margin: 0; }
input, textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #3a2224;
  font: inherit;
  font-size: 18px;
  padding: 12px 12px;
  margin: 0 0 10px;
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: none; min-height: 3.6em; line-height: 1.3; }
input::placeholder, textarea::placeholder { color: #a88a8c; }
input:focus, textarea:focus { outline: 3px solid var(--slash); outline-offset: 0; }
.help {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 14px;
}
.error {
  min-height: 0;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.error:empty { display: none; }
.error::before { content: ""; display: inline-block; width: 4px; height: 1em; background: var(--slash); margin-right: 8px; vertical-align: -2px; }
button {
  display: block;
  margin: 4px auto 0;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: var(--bg);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 34px;
  cursor: pointer;
}
button:disabled { opacity: 0.6; }
.who { font-size: 14px; margin: 18px 0 0; text-align: center; opacity: 0.85; }
.who a { color: #fff; }
.count { font-size: 14px; text-align: right; margin: -6px 0 8px; opacity: 0.8; }

/* The slash lives in its own strip below the content, so it can never cross text. */
.slash {
  flex: 0 0 26vh;
  min-height: 120px;
  position: relative;
}
.slash::after {
  content: "";
  position: absolute;
  width: 9px;
  background: var(--slash);
  top: -10%;
  height: 130%;
}
.slash-right::after { right: 34%;transform: rotate(22deg); transform-origin: bottom; }
.slash-left::after  { left: 14%; transform: rotate(-35deg); transform-origin: top; top: 0; }

/* Headlines fade in word by word, as on the wall; the form follows. Delays are set by phone.js. */
/* Each word arrives faint and blurred and sharpens as it fades up. */
.w { display: inline-block; opacity: 0; animation: word-in 750ms ease-out both; }
.shown > .w { opacity: 1; filter: none; animation: none; }
.screen.enter form { animation: form-in 500ms ease-out both; animation-delay: var(--form-delay, 0ms); }
@keyframes word-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(8px); }
  60%  { opacity: 0.85; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes form-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Staff page: text effects off. */
.no-effects .w, .no-effects .screen.enter form { animation: none !important; opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .w, .screen.enter form { animation: none; opacity: 1; filter: none; } }