/* snoozyllama.com. Colours come from the mascot (brand/llama-vectorized.svg):
   night blue #1C3150, wool #FAEABE, lavender #CAC5E5, scarf orange #D6704C. */

@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(/assets/fonts/nunito-400.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(/assets/fonts/nunito-700.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(/assets/fonts/nunito-800.woff2) format('woff2'); }

:root {
  color-scheme: light dark;
  --background: #fbf6ea;
  --surface: #ffffff;
  --text: #1c3150;
  --muted: #4d5b74;
  --line: rgba(28, 49, 80, 0.12);
  --link: #b4532f;
  /* The night sky stays night blue in both modes. */
  --night: #1c3150;
  --on-night: #fbf6ea;
  --on-night-muted: #cac5e5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #111a2b;
    --surface: #1a2539;
    --text: #f3eee2;
    --muted: #b3bbcc;
    --line: #2a3650;
    --link: #f0a07f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 400 17px/1.6 Nunito, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); font-weight: 700; }
:focus-visible { outline: 3px solid #d6704c; outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
h1, h2 { font-weight: 800; line-height: 1.15; }
h2 { font-size: 26px; margin: 0 0 16px; }

.hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.hero-inner { position: relative; display: flex; align-items: center; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.mascot { width: 220px; height: auto; flex: none; }
.hero h1 { font-size: clamp(40px, 7vw, 64px); margin: 0 0 8px; }
.lede { font-size: 22px; font-weight: 700; color: var(--on-night-muted); margin: 0 0 16px; }
.intro { margin: 0; max-width: 34em; }

/* A few soft stars. */
.sky i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #faeabe; opacity: 0.55; }
.sky i:nth-child(1) { top: 14%; left: 8%; }
.sky i:nth-child(2) { top: 30%; left: 46%; width: 4px; height: 4px; }
.sky i:nth-child(3) { top: 10%; left: 72%; }
.sky i:nth-child(4) { top: 64%; left: 90%; width: 4px; height: 4px; }
.sky i:nth-child(5) { top: 82%; left: 40%; width: 4px; height: 4px; }
.sky i:nth-child(6) { top: 22%; left: 92%; width: 3px; height: 3px; }
.sky i:nth-child(7) { top: 88%; left: 6%; width: 3px; height: 3px; }

.apps { padding-top: 56px; }
.app {
  display: flex; align-items: center; gap: 20px;
  padding: 20px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: inherit; text-decoration: none; font-weight: 400;
  transition: transform 0.15s, box-shadow 0.15s;
}
.app:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(28, 49, 80, 0.12); }
.app img { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.app strong { display: block; font-size: 20px; font-weight: 800; }
.app span span { color: var(--muted); }
.app .go { margin-left: auto; font-size: 24px; color: var(--link); flex: none; }
.more { color: var(--muted); margin: 16px 0 0; }

.contact { padding-top: 48px; padding-bottom: 32px; }
.contact p { margin: 0; }
.foot { padding-top: 24px; padding-bottom: 40px; color: var(--muted); font-size: 15px; border-top: 1px solid var(--line); }
.foot p { margin: 0; }

@media (max-width: 640px) {
  .hero-inner { flex-direction: column; text-align: center; gap: 24px; padding-top: 40px; padding-bottom: 48px; }
  .mascot { width: 150px; }
  .intro { margin: 0 auto; }
  .app { align-items: flex-start; }
  .app .go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }
.hero a { color: #faeabe; }