/* Welcome screen styles, moved unchanged out of index.html so the site's security rules can stay strict.
   Fonts are the same files Google Fonts serves (SIL Open Font License), now loaded from this site. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root {
    --green: #1f6f4a;
    --green-dark: #164f35;
    --sand: #fbf6ef;
    --gold: #d9963b;
    --ink: #1d1d1b;
    --muted: #5c5a55;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--sand);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  .screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 58vh auto;
    grid-template-rows: 58dvh auto;
  }
  .media {
    position: relative;
    overflow: hidden;
    background: #2b2118 url("poster.jpg") center / cover no-repeat;
  }
  .media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 50%;
  }
  .media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28%;
    background: linear-gradient(to bottom, rgba(251,246,239,0), var(--sand));
  }
  .brand {
    position: absolute;
    top: 18px; left: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    font-weight: 600;
    font-size: 14px;
    color: var(--green-dark);
  }
  .brand span { color: var(--gold); }
  .content {
    padding: 8px 24px 32px;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .hello {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 44px;
    line-height: 1.05;
    color: var(--green);
    margin-bottom: 14px;
  }
  .message {
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
  }
  .message strong { color: var(--ink); font-weight: 600; }
  .actions {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .btn {
    display: block;
    width: 100%;
    padding: 16px 20px;
    border-radius: 14px;
    font: 600 16px "Inter", sans-serif;
    cursor: pointer;
    border: 1.5px solid var(--green);
    transition: background 0.15s ease, transform 0.1s ease;
  }
  /* The buttons are now links to the next pages; these two lines keep them looking exactly like buttons. */
  a.btn { text-align: center; text-decoration: none; }
  .btn:active { transform: scale(0.99); }
  .btn-primary { background: var(--green); color: #fff; }
  .btn-primary:hover { background: var(--green-dark); }
  .btn-secondary { background: transparent; color: var(--green); }
  .btn-secondary:hover { background: rgba(31,111,74,0.06); }
  .note {
    margin-top: 16px;
    min-height: 20px;
    font-size: 14px;
    color: var(--muted);
    text-align: center;
  }

  @media (min-width: 900px) {
    .screen {
      grid-template-rows: none;
      grid-template-columns: minmax(380px, 40%) 1fr;
      height: 100vh;
    }
    .media { order: 2; height: 100%; }
    .media::after {
      top: 0; bottom: 0; left: 0; right: auto;
      width: 22%; height: auto;
      background: linear-gradient(to right, var(--sand), rgba(251,246,239,0));
    }
    .brand { left: auto; right: 24px; }
    .content {
      order: 1;
      justify-content: center;
      padding: 48px 56px;
      max-width: 560px;
    }
    .hello { font-size: 60px; }
    .message { font-size: 19px; }
    .actions { flex-direction: row; }
    .btn { width: auto; flex: 1 1 auto; white-space: nowrap; }
  }

  @media (prefers-reduced-motion: reduce) {
    .media video { display: none; }
  }

/* The name is one word in two colours (SkulinGermany), so the badge needs no gap between them. */
.brand { gap: 0; }

/* Sign-in placeholder page, built from the same pieces as the welcome screen. */
.placeholder { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.placeholder .content { padding-top: 48px; }