/* Wemli — root landing page. The approved Wemli app-icon palette:
   tile brown #4A2819, cream #FCF2E4. System type only (the Hosting CSP
   allows no web fonts). */
:root {
  --wemli-brown: #4A2819;
  --wemli-cream: #FCF2E4;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--wemli-brown);
}

body {
  color: var(--wemli-cream);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wordmark {
  margin: 0;
  font-size: clamp(3.5rem, 16vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  /* optical centring: the cap-height sits a touch above the em box centre */
  transform: translateY(-0.04em);
  animation: wemli-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wemli-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}