:root {
  /* Paper — warm, creamy background */
  --color-paper: #fcf8ec;
  --color-paper-light: #fffcf3;
  --color-paper-edge: #ede3cb;

  /* Ink — warm, gentle text and edges */
  --color-ink: #2e2820;
  --color-ink-soft: #6b5f4e;
  --color-ink-faint: #a89e84;

  /* Yellow — Ariadne's thread, the accent */
  --color-thread-1: #f5d87e;
  --color-thread-2: #e8c45e;
  --color-thread-3: #ffe9a8;

  /* Logo colors — same family, ~50% more saturated */
  --color-logo-waiting: #d8c089;
  --color-logo-ready: #9fc480;
  --color-logo-running: #7eafc9;
  --color-logo-done: #9c9078;

  /* Shadow — warm, soft, restful */
  --shadow-paper: 0 1px 0 rgba(46, 40, 32, 0.05), 0 8px 20px rgba(46, 40, 32, 0.04);

  /* Glow for focus states */
  --thread-glow: rgba(245, 216, 126, 0.25);

  /* Fonts */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — subtle SVG noise, fades up on load */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-fade-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Hero layout ───────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ── Logo ──────────────────────────────────────────────────── */
.hero-logo {
  opacity: 0;
  transform: scale(0.85);
  animation: fade-scale-in 500ms cubic-bezier(0.33, 0.66, 0.66, 1) 100ms forwards;
}

.hero-logo-svg {
  display: block;
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 8px 20px rgba(46, 40, 32, 0.06));
}

/* ── Tagline ───────────────────────────────────────────────── */
.hero-tagline {
  opacity: 0;
  transform: translateY(8px);
  animation: fade-slide-up 600ms cubic-bezier(0.33, 0.66, 0.66, 1) 350ms forwards;
}

.hero-tagline-main {
  margin: 0;
  font-family: var(--font-display);
  /* Single line at every width: nowrap keeps it on one line, the viewport-
     scaled clamp shrinks it on narrow screens so it never overflows.
     Unbounded is a wide display face, so the lower bound stays conservative. */
  white-space: nowrap;
  font-size: clamp(1.1rem, 6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-ink);
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes grain-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.025;
  }
}

@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ────────────────────────────────────────────── */
/* Tagline size is governed by the clamp() above (viewport-scaled, single
   line). Only the logo size steps down at these breakpoints. */
@media (max-width: 1199px) {
  .hero-logo-svg {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 2rem 1.5rem;
  }
  .hero-logo-svg {
    width: 48px;
    height: 48px;
  }
}

/* ── Reduced motion — disable the reveal ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before {
    opacity: 0.025;
    animation: none;
  }
  .hero-logo {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-tagline {
    opacity: 1;
    transform: none;
    animation: none;
  }
}