/* The page sveber.com shows until production is set up
   (deploy/provision.sh placeholder). It stands alone - no app, no
   build - so the colours are COPIED from shared/styles/tokens.css
   (the spotlight ground, the hero title, the muted text), the way the
   mail templates copy theirs. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/playfair-display-latin.woff2") format("woff2");
}

:root {
  --ground: #bfdcc8;
  --ground-image:
    radial-gradient(
      ellipse 66% 58% at 50% 46%,
      rgb(255 255 255 / 0.62) 0%,
      rgb(255 255 255 / 0.26) 44%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 118% 98% at 50% 45%,
      transparent 32%,
      rgb(74 114 88 / 0.3) 70%,
      rgb(46 78 58 / 0.52) 100%
    ),
    radial-gradient(circle at 6% 102%, rgb(40 70 52 / 0.42) 0%, transparent 46%),
    radial-gradient(circle at 100% 0%, rgb(46 78 58 / 0.26) 0%, transparent 36%),
    linear-gradient(165deg, #c8e3d0 0%, #cbe5d2 44%, #b6d5c0 80%, #a7c8b2 100%);
  --title: #5d427c;
  --muted: #5f5f5c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17131f;
    --ground-image:
      radial-gradient(
        ellipse at 68% 58%,
        rgb(149 123 182 / 0.42) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse at 28% 72%,
        rgb(110 88 140 / 0.34) 0%,
        transparent 48%
      ),
      radial-gradient(
        ellipse at 82% 16%,
        rgb(180 158 210 / 0.16) 0%,
        transparent 42%
      ),
      radial-gradient(
        circle at 12% 18%,
        rgb(219 90 34 / 0.1) 0%,
        transparent 30%
      ),
      linear-gradient(
        160deg,
        #1c1626 0%,
        #17131f 38%,
        #140f1b 68%,
        #0d0a13 100%
      );
    --title: #efe8f8;
    /* Lighter than the token (#a3a3a0): here the line sits on the glow. */
    --muted: #bcbcb9;
  }
}

/* The ground is painted over the whole page, so the page is what is
   as tall as the window - not the root with the body inside it: on a
   window shorter than the words (a phone on its side) a root of fixed
   height would start the gradient again under its own end. */
body {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: var(--ground);
  background-image: var(--ground-image);
  font-family: "Playfair Display", Georgia, serif;
  text-align: center;
}

main {
  padding: 2rem 1.5rem;
}

h1 {
  margin: 0 0 2.5rem;
}

h1 img {
  width: min(17rem, 70vw);
  height: auto;
}

.soon {
  margin: 0;
  color: var(--title);
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
}

.soon-en {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 1.25rem;
  font-style: italic;
}