/* Page layout for We Came for the Books. All colors, sizes, spacing and corners come from design-system/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-muted); }
.caption { text-transform: uppercase; }

.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 640px) { .wrap { padding-inline: var(--space-8); } }

.section { padding-block: var(--space-12); }

/* Top bar */
.topbar { border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-16) var(--space-12); }
.sticker {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--evergreen);
  color: var(--mint);
  border-radius: var(--radius-pill);
  transform: rotate(-4deg);
  box-shadow: var(--shadow-pop);
}
@media (max-width: 479px) { .sticker { padding-inline: var(--space-4); white-space: nowrap; } }
.hero-sub { margin-top: var(--space-8); max-width: 30ch; }

/* Signup */
.signup { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; margin-top: var(--space-6); max-width: 500px; }
.signup input {
  flex: 1 1 220px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.signup input::placeholder { color: var(--ink-muted); }
.button {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-offset);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.button:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-offset-hover); }
.button:active { transform: translate(2px, 2px); box-shadow: none; }
@media (max-width: 479px) { .button { flex: 1 1 100%; } }
.signup-note { margin-top: var(--space-3); min-height: 16px; }
.hero-socials { margin-top: var(--space-4); }

/* How it works */
.band { background: var(--surface-tint); padding-block: var(--space-12); }
.steps { margin-top: var(--space-6); }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.step .body { margin-top: var(--space-1); }
.badge { justify-self: start; align-self: start; margin-top: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--highlight); color: var(--on-highlight); border-radius: var(--radius-sm); }

/* Events */
.events { margin-top: var(--space-6); padding: var(--space-1) var(--space-6); background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.event { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding-block: var(--space-4); }
.event + .event { border-top: 1px solid var(--line); }
.event-date { color: var(--brand-text); }
@media (max-width: 479px) {
  .event { grid-template-columns: 1fr; }
}
.events-note { margin-top: var(--space-4); }

/* Why this exists */
.why-section { padding-top: 0; }
.why { padding: var(--space-8) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.why .h2 { margin-bottom: var(--space-4); }
.why .body { max-width: 65ch; }
.why .body + .body { margin-top: var(--space-4); }
.signature { margin-top: var(--space-6); }

/* Footer */
.footer { background: var(--brand); color: var(--mint); padding-block: var(--space-8); }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.footer-name { color: var(--mint); }
.footer-places { color: var(--mint); }
.footer .socials { margin-top: var(--space-2); }
.socials { display: flex; align-items: center; gap: var(--space-2); }
.socials a { display: inline-flex; padding: var(--space-2); color: var(--ink); border-radius: var(--radius-sm); }
.footer .socials a { color: var(--mint); }
.footer .socials a:focus-visible { outline-color: var(--mint); }
.socials svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }