/* The public page until the site opens: the home page's mailbox at night, in the site's own colors and fonts. */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-latin-opsz-normal.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-latin-opsz-italic.woff2') format('woff2'); }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/overpass-latin-wght-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #0b1416; --foam: #ecebe3; --mist: #a9b9b7; --rubric: #ee6343;
  --serif: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Overpass', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background-color: var(--ink); }
body { margin: 0; min-height: 100dvh; background-color: var(--ink); color: var(--foam); font-family: var(--serif); }

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

main {
  position: relative; min-height: 100dvh; display: flex; flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 6vw, 6rem);
}
.wordmark { margin: 0; font-size: 1.5rem; letter-spacing: -.005em; }
.message { margin-block: auto; max-width: 34rem; padding-block: 2rem; }
.soon { margin: 0 0 1.1rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rubric); }
h1 { margin: 0; font-size: clamp(3rem, 6.6vw, 5.75rem); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; }
h1 em { color: var(--rubric); }
.note { margin: 1.5rem 0 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; color: var(--mist); }

/* On a tall screen the art can't sit beside the words, so it stands below them and fades into the night sky. */
@media (max-aspect-ratio: 1/1) {
  .scene {
    inset: auto 0 0; height: 62dvh; object-position: 96% 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 30%);
  }
  .message { margin-block: 2.5rem 0; padding-block: 0; }
  h1 { font-size: clamp(2.75rem, 12.5vw, 5rem); }
}