/* waywardjay.com — light, mascot-led. See brand/STYLE-GUIDE.md. */

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); font: 400 var(--step-0)/1.6 var(--font-sans);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
a { color: var(--jay-700); }
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: var(--step-2); margin: 0 0 var(--space-5); text-align: center; }

.top { display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: var(--space-4) var(--space-5); }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { border-radius: 8px; }
.word { font-weight: 800; font-size: var(--step-1); color: var(--jay-700); letter-spacing: -.02em; }
.word b { color: var(--jay-500); }
.top nav { display: flex; gap: var(--space-5); }
.top nav a { color: var(--text-2); text-decoration: none; font-weight: 500; }
.top nav a:hover { color: var(--jay-700); }

main > section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-7) var(--space-5); }

.hero { text-align: center; padding-top: var(--space-5) !important; }
.mascot { width: 220px; height: auto; margin: 0 auto var(--space-3); display: block; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.tagline { color: var(--jay-700); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: var(--step--1); margin: 0 0 var(--space-3); }
.tagline span { color: var(--amber-600); }
.hero h1 { font-size: var(--step-3); margin: 0 0 var(--space-4); }
.lead { color: var(--text-2); font-size: var(--step-1); max-width: 32em; margin: 0 auto var(--space-5); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill); background: var(--jay-700); color: var(--paper); text-decoration: none; font-weight: 600; box-shadow: 0 6px 20px rgb(11 77 162 / .25); }
.btn:hover { background: var(--jay-900); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.card { display: block; background: var(--paper); border: 1px solid var(--jay-100); border-radius: var(--r-lg); padding: var(--space-5); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgb(15 27 45 / .05); }
.card h3 { font-size: var(--step-1); margin: var(--space-3) 0 var(--space-2); }
.card p { color: var(--text-2); margin: 0; font-size: var(--step--1); }
.card img { border-radius: 14px; }
.card .badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--mist); font-size: 28px; }
.status { display: table; margin-top: var(--space-3); font-size: 12px; font-weight: 600; color: var(--jay-700); background: var(--jay-100); border-radius: var(--r-pill); padding: 2px 10px; }
.card .more { display: inline-block; margin-top: var(--space-4); color: var(--jay-700); font-weight: 600; }
a.card:hover { border-color: var(--jay-500); transform: translateY(-2px); transition: transform .2s var(--ease); }

.about p { max-width: 40em; margin: 0 auto; text-align: center; color: var(--text-2); font-size: var(--step-1); }

.mail { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.mail a { display: flex; flex-direction: column; min-width: 280px; padding: var(--space-4) var(--space-5); background: var(--paper); border: 1px solid var(--jay-100); border-radius: var(--r-md); text-decoration: none; }
.mail a:hover { border-color: var(--jay-500); }
.mail span { color: var(--text-2); font-size: var(--step--1); }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); max-width: var(--maxw); margin: 0 auto; padding: var(--space-5); border-top: 1px solid var(--jay-100); color: var(--text-2); font-size: var(--step--1); }
.foot nav { display: flex; gap: var(--space-4); }

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  main > section { padding: var(--space-6) var(--space-4); }
  .top nav { gap: var(--space-4); }
  .mail a { min-width: 0; width: 100%; }
}