@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #0D1010;
  --muted: #D8D2C5;
  --gold: #DEB95F;
  --serif: "Noto Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { background: var(--bg); }
body { color: var(--muted); -webkit-font-smoothing: antialiased; }
::selection { color: var(--bg); background: var(--gold); }

.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(13 16 16 / .12), transparent 25%, transparent 80%, rgb(13 16 16 / .35));
}

.identity {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + clamp(24px, 8svh, 88px));
  inset-inline: 24px;
  text-align: center;
}

.identity h1 { margin: 0; line-height: 1; }
.identity img { display: block; width: clamp(144px, 14vw, 200px); max-width: 100%; height: auto; margin-inline: auto; }

.whisper {
  position: absolute;
  z-index: 2;
  inset-inline: 24px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 4svh, 48px));
  margin: 0;
  color: var(--muted);
  font: italic 400 clamp(12px, 1.2vw, 14px) / 1.7 var(--serif);
  text-align: center;
  text-wrap: balance;
}

@media (max-height: 400px) {
  .identity { top: calc(env(safe-area-inset-top, 0px) + 16px); }
  .identity img { width: 128px; }
  .whisper { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); font-size: 12px; }
}