/* Shared styling for fanmore.ca content pages.
 *
 * index.html still carries its own inline CSS — it is a working landing page
 * and moving it was not worth the risk for two new files. This is the single
 * source for everything else, so the content pages cannot drift from each
 * other while that migration waits.
 *
 * Same tokens and typefaces as the landing page, laid out for reading rather
 * than for scrolling: one column, generous measure, answers before argument.
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --blue: #1800DF;
  --cyan: #3FCDFC;
  --red: #FF2E49;
  --lav: #E9E8FC;
  --white: #FFFFFF;
  --dark: #0D0099;
  --darker: #0A006B;
  --text-muted: rgba(233, 232, 252, 0.72);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: linear-gradient(170deg, var(--dark) 0%, var(--darker) 60%, #07004d 100%);
  background-attachment: fixed;
  color: var(--lav);
  font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  min-height: 100vh;
}

/* ── Chrome ─────────────────────────────────────────────────────────── */

nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.5rem;
  max-width: 62rem; margin: 0 auto;
}
.nav-logo {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.15rem;
  letter-spacing: .04em; text-decoration: none; white-space: nowrap;
}
.nav-logo .fan { color: var(--red); }
.nav-logo .more { color: var(--white); }
.nav-links { list-style: none; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.nav-links a {
  color: var(--lav); text-decoration: none;
  font-family: 'Orbitron', sans-serif; font-weight: 600;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.nav-links a:hover { color: var(--cyan); }
.nav-cta { color: var(--cyan) !important; }

main { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── Type ───────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: .65rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: .9rem;
}
h1 {
  font-family: 'Orbitron', sans-serif; font-weight: 900; line-height: 1.1;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: .01em;
  margin-bottom: 1.1rem;
}
h2 {
  font-family: 'Orbitron', sans-serif; font-weight: 700; line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  margin: 2.4rem 0 .8rem; color: var(--white);
}
h3 {
  font-family: 'Orbitron', sans-serif; font-weight: 600;
  font-size: 1rem; margin: 1.6rem 0 .5rem; color: var(--cyan);
}
p { margin-bottom: 1rem; max-width: 40rem; }
a { color: var(--cyan); }

/* The answer, before the argument. An assistant quoting this page should be
   able to take the first paragraph and be right. */
.lede {
  font-size: 1.2rem; line-height: 1.55; color: var(--white);
  border-left: 3px solid var(--cyan); padding-left: 1.1rem; margin-bottom: 1.8rem;
}

ul, ol { margin: 0 0 1.1rem 1.2rem; }
li { margin-bottom: .5rem; max-width: 40rem; }
strong { color: var(--white); font-weight: 600; }

.note {
  font-size: .93rem; color: var(--text-muted);
  border-left: 2px solid rgba(233, 232, 252, .25);
  padding-left: .9rem; margin: 1.4rem 0;
}

table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .97rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid rgba(233,232,252,.16); vertical-align: top; }
th { font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: .68rem;
     letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }

.cta {
  display: inline-block; margin-top: 1.6rem;
  font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  border: 2px solid var(--cyan); border-radius: 2px; padding: .8rem 1.5rem;
}
.cta:hover { background: var(--cyan); color: var(--darker); }

footer {
  max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
  border-top: 1px solid rgba(233,232,252,.14);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer-logo {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
}
.footer-logo .fan { color: var(--red); }
.footer-logo .more { color: var(--white); }
.footer-copy { font-size: .85rem; color: var(--text-muted); }

@media (max-width: 40rem) {
  nav { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .nav-links { gap: .9rem; }
}