/* Inter (variable, latin) — self-hosted, no external font calls. Used for
   refined UI labels / kicker tags. The weight axis (100–900) is free to tune. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Upbeat Bytes calm design system.
   Sand, sea, and sun: warm paper surfaces, a vivid-azure accent, gold highlight,
   a serif voice for headlines, strong readable contrast, generous space.
   No urgency colors (no red). Built around the logo's #0083ad azure. */
:root {
  --bg: #f7f4ec;
  --surface: #fffdf8;
  --ink: #16263a;
  --muted: #5d6b78;
  --accent: #0083ad;
  --accent-deep: #006b8e;
  --accent-soft: #e0eef3;
  --line: #e8e3d8;
  --gold: #b3892b;
  --gold-bright: #e6cd42;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --label: "Inter", var(--sans);

  --maxw: 880px;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(40, 38, 28, 0.04), 0 10px 30px rgba(40, 38, 28, 0.055);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }

/* a soft, slow fade for content as it arrives — calm, not flashy */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s ease both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } html { scroll-behavior: auto; } }

/* Daily Word on mobile becomes a focused, full-viewport screen: lock body scroll
   and hide the site footer so the on-screen keyboard is truly pinned (not riding
   the page's scroll). The .playing-word class is toggled by /play and always
   removed on navigation via effect cleanup. Mobile only — desktop is unaffected. */
@media (max-width: 720px) {
  html.playing-word, html.playing-word body { overflow: hidden; }
  html.playing-word footer.site { display: none; }
}