/* Base variables */
:root {
  /* Light, cool tones that flatter a dark blue logo */
  --bg-1: #f5f9ff; /* very light blue */
  --bg-2: #edf2ff; /* soft periwinkle */
  --text: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --ring: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  /* Keep a soft, light background in all modes for logo contrast */
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Header brand in the top-left */
.site-header {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10;
}
.brand {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, white 60%, transparent);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--ring);
}

/* Centered hero */
.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 10vh 24px 14vh;
  text-align: center;
  gap: 14px;
}

.logo {
  width: min(60vw, 360px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.12));
}

.tagline {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--muted);
}

.site-footer {
  display: none; /* keep it out of the way; accessible year is still updated */
}

@media (max-width: 420px) {
  .site-header { top: 16px; left: 16px; }
  .brand { padding: 5px 10px; font-size: 14px; }
}