/* The holding page: one room over the marble ground, the signup beside the statement. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Local faces stretched to the web fonts' width and line metrics, so the swap does not reflow the page. */
@font-face {
  font-family: "Bodoni Moda Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 115%;
  ascent-override: 97.7%;
  descent-override: 34.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.5%;
  ascent-override: 94.6%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

:root {
  --ground: #f2f3f1;
  --ink: #1c1d1a;
  --paper: #ffffff;
  --accent: #1f2a22;
  --accent-lit: #2f3d33;
  --error: #8a2e1f;
  --display: "Bodoni Moda", "Bodoni Moda Fallback", serif;
  --text: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  --m: clamp(16px, 2.2vw, 32px);
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  --rise: 20px;
  --step: 80ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font: 400 17px / 1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The room: the hour's photograph, about three quarters of the screen. */

.room {
  position: relative;
  height: 76svh;
  min-height: 520px;
  overflow: hidden;
  background: #2a2a26;
  color: var(--paper);
}

.room picture,
.room img {
  display: block;
  width: 100%;
  height: 100%;
}

.room img {
  object-fit: cover;
  color: transparent;
  transform-origin: 50% 60%;
  animation: drift 14s var(--ease-out) both;
}

/* Neutral scrims under the clocks and the lockup, so white type reads on any of the four rooms. */
.room::before,
.room::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.room::before {
  top: 0;
  height: 28%;
  background: linear-gradient(to bottom, rgb(10 10 8 / 0.34), rgb(10 10 8 / 0)); /* taste-skill-ignore */
}

.room::after {
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgb(10 10 8 / 0.55), rgb(10 10 8 / 0)); /* taste-skill-ignore */
}

.top {
  position: absolute;
  z-index: 2;
  inset: var(--m) var(--m) auto var(--m);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mark {
  display: block;
  width: 52px;
  height: 52px;
}

.clocks {
  margin: 1em 0 0;
  font-size: 16px;
  line-height: 1.45;
  text-align: right;
}

.clocks b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lockup {
  position: absolute;
  z-index: 2;
  inset: auto var(--m) var(--m) var(--m);
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
}

.lockup-name {
  display: block;
  font-size: clamp(34px, 9.6vw, 160px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lockup-cities {
  display: block;
  margin-top: 0.9em;
  font-size: clamp(13px, 1.25vw, 19px);
  line-height: 1;
  letter-spacing: 0.14em;
}

/* The band below the room: the statement on the left, the signup on the right. */

.band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
  padding: 40px var(--m) 48px;
}

.statement {
  grid-column: 1 / span 5;
  margin: 0;
  font: 500 clamp(22px, 2vw, 30px) / 1.25 var(--display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.signup {
  grid-column: 7 / span 6;
}

.signup-lead {
  display: block;
  margin: 0 0 14px;
}

.signup-form {
  display: flex;
}

.signup-form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.signup-form input::placeholder {
  color: #77796f;
  opacity: 1;
}

.signup-form input:focus-visible {
  outline-offset: 2px;
}

.signup-form button {
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--paper);
  font: 500 16px var(--text);
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out),
    opacity 160ms var(--ease-out);
}

.signup-form button:hover {
  background: var(--accent-lit);
}

.signup-form button:active {
  transform: scale(0.97);
}

.signup-form button:focus-visible {
  outline-offset: 2px;
}

.signup-form button:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* Turnstile runs invisible; its container must not take a line of its own. */
.cf-turnstile:empty {
  display: none;
}

.signup-message {
  margin: 12px 0 0;
  font-weight: 500;
  animation: rise 420ms var(--ease-out) both;
}

.signup-message[hidden] {
  display: none;
}

.signup-message[data-state="error"] {
  color: var(--error);
}

.contact {
  margin: 10px 0 0;
  font-size: 16px;
}

.noscript-line {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    text-decoration-thickness 160ms var(--ease-out),
    text-underline-offset 160ms var(--ease-out);
}

a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:active {
  opacity: 0.7;
}

/* With scripts off Turnstile cannot run, so the noscript line stands in for the form. */
@media (scripting: none) {
  .signup-live {
    display: none;
  }
}

/* Tablets: give the signup the wider share, so the field keeps room for an address. */
@media (max-width: 1080px) {
  .signup {
    grid-column: 6 / span 7;
  }
}

/* The phone: the room just over half the screen, the form stacked, the signup above the fold. */

@media (max-width: 760px) {
  .room {
    height: 54svh;
    min-height: 380px;
  }

  .mark {
    width: 40px;
    height: 40px;
  }

  .clocks {
    font-size: 14px;
  }

  .band {
    display: block;
    padding: 28px var(--m) 40px;
  }

  .statement {
    margin-bottom: 20px;
  }

  .signup-form {
    flex-direction: column;
    gap: 8px;
  }

  .signup-form input {
    flex: none;
  }
}

/* Entrance: the photograph settles once, the words arrive in reading order. Nothing waits on a script. */

.lockup-name,
.lockup-cities,
.statement,
.signup-lead,
.signup-form,
.noscript-line,
.contact {
  animation: rise 900ms var(--ease-out) both;
}

.lockup-name {
  animation-delay: calc(var(--step) * 1);
}

.lockup-cities {
  animation-delay: calc(var(--step) * 2);
}

.statement {
  animation-delay: calc(var(--step) * 3);
}

.signup-lead {
  animation-delay: calc(var(--step) * 4);
}

.signup-form,
.noscript-line {
  animation-delay: calc(var(--step) * 5);
}

.contact {
  animation-delay: calc(var(--step) * 6);
}

@keyframes drift {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced motion: no drift and no travel, only a short fade. */
@media (prefers-reduced-motion: reduce) {
  .room img {
    animation: none;
  }

  .lockup-name,
  .lockup-cities,
  .statement,
  .signup-lead,
  .signup-form,
  .noscript-line,
  .contact,
  .signup-message {
    animation-name: appear;
    animation-duration: 240ms;
  }

  .signup-form button:active {
    transform: none;
  }
}