/* FCS Mate placeholder page. Light design after the app's splash screen and About window:
   pale grey ground, blue point clouds, Baskerville wordmark, letter-spaced mono tagline,
   handwritten "thx mate". One light theme on purpose. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "Baskervville"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Baskervville-400.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Caveat-400.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --bg-far: #e9ecf1;
  --panel: #ffffff;
  --line: #dde1e8;
  --tx: #14161a;
  --tx2: #4a5262;
  --tx3: #6e7788;
  --acc: #2f6fe0;
  --acc-soft: rgba(47, 111, 224, 0.10);

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Baskervville", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(155deg, var(--bg) 40%, var(--bg-far) 100%) var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

/* ---------- the one screen ---------- */
.stage { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.top { position: relative; z-index: 2; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 112px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 60px; height: 60px; border-radius: 14px; }
.brand span { font-family: var(--serif); font-size: 22px; white-space: nowrap; display: inline-block; transform: scaleX(0.70); transform-origin: 0 50%; margin-right: -1.2em; }

.hero { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding: 24px 0 56px; }
.copy { max-width: 600px; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 12.5vw, 156px); line-height: 0.9; letter-spacing: -0.015em; margin: 0 0 32px; }
h1 span { display: block; transform: scaleX(0.70); transform-origin: 0 50%; }   /* the app squeezes the wordmark to 70 % */
.tagline { font-family: var(--mono); font-size: clamp(10px, 2.9vw, 14px); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.9; white-space: nowrap; margin: 0 0 12px; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--tx2); max-width: 28em; margin: 0; }
.hand { font-family: var(--hand); font-size: 32px; line-height: 1; color: var(--acc); opacity: 0.85; transform: rotate(-2deg); transform-origin: left; margin: 0 0 30px; white-space: nowrap; }

/* the gate drawn around the first cloud (positioned by script.js) */
.gate-label {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(47, 111, 224, 0.35);
  background: rgba(255, 255, 255, 0.92); color: var(--acc);
  font-size: 15px; font-weight: 500; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px -10px rgba(20, 30, 60, 0.35);
}

footer { position: relative; z-index: 1; padding: 0 0 36px; color: var(--tx3); font-size: 13px; }
footer .wrap { border-top: 1px solid var(--line); padding-top: 22px; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 26px; }
footer a { color: var(--tx2); text-decoration: none; }
footer a:hover { color: var(--acc); text-decoration: underline; }

/* ---------- imprint and privacy ---------- */
.page { padding: 28px 0 90px; }
.page .wrap { max-width: 720px; }
.page h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1.05; margin: 0 0 32px; }
.page h2 { font-family: var(--sans); font-weight: 600; font-size: 20px; margin: 40px 0 10px; }
.page p, .page li { color: var(--tx2); }
.todo { background: var(--acc-soft); border-left: 3px solid var(--acc); padding: 12px 16px; border-radius: 0 8px 8px 0; color: var(--tx) !important; }
.top nav { margin-left: auto; }
.top nav a { text-decoration: none; color: var(--tx2); font-size: 15px; white-space: nowrap; }
.top nav a:hover { color: var(--acc); }

@media (max-width: 760px) {
  .wrap { width: min(1180px, 100% - 32px); }
  .hero { align-items: flex-start; padding-bottom: 300px; }
  .tagline { letter-spacing: 0.16em; }
}