/* ==========================================================================
   Invention House
   stp.css · one photograph, one question. Nothing else.
   ========================================================================== */

:root {
  --ink: #211E1A;

  --font-display: "Marcellus", "Times New Roman", Times, serif;

  --size-q1: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
}

/* --------------------------------------------------------------------------
   RESET — the minimum, and no more
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--ink);
}

img { display: block; max-width: 100%; }

/* ==========================================================================
   THE LANDING — the question hangs in the cloud
   ========================================================================== */

.landing {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* The ground. It is only ever a background. */
.ground img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 58% 50%;
}

/* The question — written on the cloud itself */
.q1 {
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(92vw, 24ch);
  margin: 0;
  font-size: var(--size-q1);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: .04em;
  text-align: center;
  text-wrap: balance;
  color: rgba(33, 30, 26, .58);
  mix-blend-mode: multiply;
}