/* ==========================================================================
   gwpastore.com — site layout & components
   Consumes tokens.css (the single source of truth, copied verbatim from
   X:\Pastore\_brand\tokens\tokens.css — re-sync that copy if the canonical
   token file changes; do not hand-edit values here). Nothing in this file
   hardcodes a hex or a font name — everything reads a --token.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}
main.no-top-pad { padding-top: var(--space-6); }

/* ---- Masthead ----
   Compact inline lockup (falcon mark + wordmark), not a separate hero
   section. This site's job is to hold the domain and read as legitimate
   to someone arriving from a bio link — Patreon and Royal Road do the
   actual selling, so the page shouldn't spend above-the-fold space on a
   marketing graphic. The wide ship/coastline artwork (images/hero-banner.*)
   was composed for the Patreon banner slot, where Patreon's own avatar
   circle and title overlay claim the center third; that empty-middle
   composition has no equivalent constraint here; it stayed the correct
   asset for Patreon, but a full-bleed placement of it on this page pushed
   the title and pitch far below the fold for a graphic doing no useful
   work here — so it is not used on this page. It remains available under
   images/ for Patreon/social use. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.site-header-mark {
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.site-header-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
}
/* Homepage variant: the mark is the first thing on the page (no separate
   hero above it), so it runs slightly larger and sits closer to the title
   that follows than the utility legal/404 pages do. */
.site-header.is-home {
  margin: var(--space-6) 0 var(--space-5);
}
.site-header.is-home .site-header-mark {
  height: 56px;
  width: 56px;
}
.site-header.is-home .site-header-text {
  font-size: 1.25rem;
}

.masthead-title {
  text-align: center;
  margin: 0 0 var(--space-8);
}
.masthead-title h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-3xl);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.masthead-title .kicker {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* ---- Intro ---- */
.intro {
  margin: 0 0 var(--space-8);
  text-align: center;
}
.intro p {
  margin: 0 0 1.1em;
  font-size: var(--font-size-md);
  color: var(--ink);
}
.intro p:last-child { margin-bottom: 0; }
.intro .lede-line {
  font-style: italic;
  color: var(--ink-mute);
}

hr.rule {
  display: block;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0 auto var(--space-8);
  max-width: 320px;
}

/* ---- Links-out ---- */
.follow h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-xl);
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.follow > .lede {
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-6);
}
.link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}
.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.link-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.link-card .lc-text { flex: 1; min-width: 0; }
.link-card .lc-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--ink);
  margin: 0 0 2px;
}
.link-card .lc-desc {
  font-size: var(--font-size-sm);
  color: var(--ink-mute);
  margin: 0;
}
.link-card .lc-go {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--bg);
  background: var(--brand);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.link-card:hover .lc-go { background: var(--brand-dark); }

.link-card.is-pending {
  cursor: default;
}
.link-card.is-pending:hover {
  border-color: var(--rule);
  transform: none;
}
.link-card.is-pending .lc-go {
  background: none;
  color: var(--muted);
  border: 1.5px solid var(--muted);
}
.link-card.is-pending .lc-name::after {
  content: "Coming soon";
  display: inline-block;
  margin-left: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 2px 9px;
  vertical-align: middle;
}

/* ---- About ---- */
.about h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-xl);
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}
.about p {
  max-width: 600px;
  margin: 0 auto var(--space-4);
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--font-size-sm);
}

/* ---- Footer ---- */
footer {
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--font-size-sm);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
footer a { color: var(--ink-mute); text-decoration: none; }
footer a:hover { color: var(--brand); text-decoration: underline; }
footer .legal-links { margin-top: var(--space-2); font-size: var(--font-size-xs); }
footer .legal-links a { margin: 0 var(--space-2); }

/* ---- Plain legal-page layout (privacy.html / terms.html) ---- */
.legal main {
  max-width: 680px;
}
.legal h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.legal .updated {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-7);
}
.legal h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--brand);
  margin: var(--space-7) 0 var(--space-3);
}
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: var(--space-2); }
.legal .back-link {
  text-align: center;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

@media (max-width: 560px) {
  main { padding: var(--space-6) var(--space-4) var(--space-7); }
  .masthead-title h1 { font-size: var(--font-size-2xl); }
  .link-card { flex-direction: column; align-items: stretch; text-align: center; }
  .link-card .lc-go { text-align: center; }
}