/* ═══════════════════════════════════════════════════════════════════════════
   THE FAN ANSWER PAGES — /site/asoiaf/, /site/supernatural/ and every later
   franchise's answers directory. Loaded after site.css and fun/fanzone.css,
   on pages written only by scripts/build-fan-answers.mjs.

   Built to the design canvas (boards Hub, Explainer, Profile, Season, and the
   phone forms of the first two). Three rules, each with a reason:

   1. TOKENS ONLY. Every colour is a var() from site.css as fun/fanzone.css
      re-declares it for the fan zone (the violet ground, the coral accent, the
      heather eyebrows, the frost links). The one exception is var(--seal), the
      franchise's ring colour, set inline from the registry on the element
      that wears it. A literal here would be the first thing to disagree with
      the zone's palette the day the palette moves.
   2. NO .fz-* SELECTOR. `.fz-seal` and `.fz-notice` are SHARED fan components
      and live in fun/fanzone.css under "SHARED FAN COMPONENTS"; defining them
      here too would give the two parallel builds of R4a two definitions of one
      thing. fanAnswersKit.test.ts greps this file for `.fz-` and fails on a hit.
   3. THE DOM IS THE PHONE ORDER. Header, short answer, facts, the article,
      the FAQ, then the asides, sources and notice — the order a phone reads in
      one column. From 960px the facts and the asides move to a right-hand
      column with grid placement, never by reordering markup, so a screen
      reader and a crawler meet the same order everyone does.

   No inline <style> on any answer page (seoLint holds the site to that), and
   44px touch targets under `pointer: coarse` (the rule funPages.test.ts holds
   fun.css to).
   ═══════════════════════════════════════════════════════════════════════════ */

.fa-wrap { max-width: 1240px; }

/* ── Crumbs and the page head ───────────────────────────────────────────── */
.fa-crumbs .crumbs { margin: 0 0 var(--s4); }

.fa-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.fa-grid > * { margin: 0 0 var(--s6); min-width: 0; }

.fa-head { display: flex; flex-direction: column; gap: var(--s3); }
.fa-eyebrow {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heather);
}
.fa-head h1 {
  margin: 0;
  font-family: var(--fancy);
  font-size: clamp(31px, 1.2rem + 3vw, 52px);
  line-height: 1.08;
  color: var(--gold-300);
  text-wrap: balance;
}
.fa-head h1::after { content: none; }
.fa-dek { margin: 0; font-size: clamp(18px, 1rem + 0.4vw, 21px); line-height: 1.5; color: var(--text-strong); max-width: 40em; }
.fa-meta { margin: 0; font-size: 14px; color: var(--text-dim); }
.fa-meta a { color: var(--frost-400); }
.fa-spoilers {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--gold-500);
  background: var(--surface-1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px;
  color: var(--text);
}

/* ── The short answer and the facts ─────────────────────────────────────── */
.fa-short {
  background: var(--surface-1);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  padding: var(--s5);
}
.fa-short h2, .fa-facts summary, .fa-side h2, .fa-sources h2, .fa-notice h2 {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heather);
}
.fa-short p { margin: 0; font-size: clamp(17px, 1rem + 0.2vw, 19px); line-height: 1.6; color: var(--text-strong); }

.fa-facts {
  background: var(--surface-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s5) var(--s4);
}
/* The gap is the space site.css's "▾ " marker carries: as a flex item its
   trailing space collapses, and the marker would touch the heading. */
.fa-facts summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: var(--s2); margin: 0; }
.fa-facts dl { margin: var(--s2) 0 0; }
.fa-fact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  padding: 9px 0;
  border-top: 1px solid var(--hair);
}
.fa-fact dt { font-size: 14px; color: var(--text-dim); }
.fa-fact dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-strong); }

/* ── The article ─────────────────────────────────────────────────────────── */
.fa-body { max-width: 720px; }
.fa-body h2, .fa-faq > h2, .fa-table h2, .fa-related h2, .fa-episodes h2, .fa-lane > h2, .fa-about > h2 {
  margin: var(--s6) 0 var(--s3);
  font-family: var(--display);
  font-size: clamp(22px, 1rem + 1vw, 28px);
  line-height: 1.25;
  color: var(--text-strong);
}
.fa-body h2:first-child { margin-top: 0; }
.fa-body p { font-size: clamp(17px, 1rem + 0.15vw, 18px); line-height: 1.7; margin: 0 0 var(--s4); }
.fa-body cite, .fa-dek cite, .fa-spoilers cite, .fa-fact cite, .fa-q cite, .fa-about cite { font-style: italic; }

.fa-scroll { overflow-x: auto; }
.fa-table table, .fa-episodes table, .fa-lane table { width: 100%; font-size: 15px; }
.fa-episodes table { min-width: 760px; }
.fa-factsonly, .fa-lane-note { margin: var(--s2) 0 0; font-size: 13px; color: var(--text-dim); }

.fa-faq { max-width: 720px; border-top: 1px solid var(--hair-strong); padding-top: var(--s2); }
.fa-q { padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.fa-q h3 { margin: 0 0 6px; font-family: var(--body); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--text-strong); }
.fa-q p { margin: 0; font-size: 17px; color: var(--text); }

.fa-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.fa-rel {
  display: flex;
  flex-direction: column;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  text-decoration: none;
}
.fa-rel-name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.fa-rel-how { font-size: 12px; color: var(--text-dim); }
a.fa-rel:hover .fa-rel-name { color: var(--frost-300); }

/* ── The asides ──────────────────────────────────────────────────────────── */
.fa-side { display: flex; flex-direction: column; gap: var(--s5); }
.fa-next, .fa-play {
  background: var(--surface-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.fa-play { background: var(--ink-800); border-color: var(--gold-700); }
.fa-play h2 { color: var(--gold-500); }
.fa-side ul { list-style: none; margin: 0; padding: 0; }
.fa-side li { border-top: 1px solid var(--hair); padding: 10px 0; }
.fa-side li:first-child { border-top: 0; }
.fa-side li a { color: var(--frost-400); text-decoration: none; font-size: 15px; }
.fa-side li a:hover { color: var(--frost-300); text-decoration: underline; }
.fa-side li span { display: block; font-size: 12px; color: var(--text-dim); }

/* ── Sources and the notice ──────────────────────────────────────────────── */
.fa-sources {
  max-width: 820px;
  background: var(--ink-800);
  border-radius: var(--r-md);
  padding: var(--s5);
}
.fa-sources ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--text); display: flex; flex-direction: column; gap: var(--s2); }
.fa-located { display: block; margin-top: 2px; font-size: 13px; color: var(--text-dim); }
.fa-drafted { margin: var(--s3) 0 0; font-size: 14px; color: var(--text-dim); }
.fa-drafted a { color: var(--frost-400); }
.fa-notice { max-width: 820px; border-top: 1px solid var(--hair); padding-top: var(--s4); }
.fa-notice p { font-size: 14px; color: var(--text-dim); margin: 0 0 var(--s2); }

/* ── The season guide's own pieces ──────────────────────────────────────── */
.fa-seasons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fa-seasons a, .fa-seasons span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.fa-seasons span { background: var(--gold-300); color: var(--gold-ink); border-color: var(--gold-300); }
.fa-seasons a { color: var(--text-strong); background: var(--surface-1); }

/* ── The hub ─────────────────────────────────────────────────────────────── */
.fa-hubhead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s5); padding: var(--s4) 0 var(--s5); }
.fa-hubhead > div { flex: 1 1 480px; display: flex; flex-direction: column; gap: var(--s3); }
.fa-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: var(--s6);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--hair-strong);
}
.fa-lanes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.fa-lanes a:hover { color: var(--text-strong); border-color: var(--edge); }
.fa-lane { padding: var(--s5) 0; }
.fa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s4); }
.fa-cards-char { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s3); }
.fa-card, .fa-play-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  min-height: 140px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair);
  background: var(--surface-1);
  text-decoration: none;
}
.fa-card:hover, .fa-play-card:hover { border-color: var(--gold-600); }
.fa-card-kicker {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--heather);
}
.fa-card-title { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.fa-card-line { font-size: 15px; color: var(--text); }
.fa-card-char { flex-direction: row; align-items: center; min-height: 68px; padding: var(--s3) var(--s4); gap: var(--s3); flex-wrap: wrap; }
.fa-card-char .fa-card-title { font-family: var(--body); font-size: 16px; font-weight: 600; }
.fa-card-char .fa-card-line { flex-basis: 100%; font-size: 13px; color: var(--text-dim); margin-top: -6px; padding-left: 54px; }
.fa-mono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--gold-300);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}
.fa-playlane {
  background: var(--ink-800);
  border: 1px solid var(--gold-700);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin: var(--s5) 0;
}
.fa-playlane > h2 { margin-top: 0; color: var(--gold-300); }
.fa-play-card { min-height: 72px; padding: var(--s3) var(--s4); gap: 4px; }
.fa-play-title { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.fa-play-kind { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-500); }
.fa-more { margin: var(--s4) 0 0; }
.fa-more a { color: var(--frost-400); }
.fa-asides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s5); padding: var(--s5) 0; }
.fa-aside-card { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.fa-aside-card h3 { margin: 0; font-family: var(--display); font-size: 22px; color: var(--text-strong); }
.fa-aside-card p { margin: 0; font-size: 15px; color: var(--text); }
.fa-aside-card a { color: var(--frost-400); }
.fa-aside-kicker { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--heather) !important; }
.fa-about { max-width: 820px; padding: var(--s5) 0; }
.fa-about h3 { font-family: var(--display); font-size: 20px; margin: var(--s5) 0 var(--s2); color: var(--text-strong); }
.fa-about p { font-size: 17px; line-height: 1.7; }
.fa-method { color: var(--text-dim); font-size: 15px !important; }
.fa-hubwrap > .fa-sources, .fa-hubwrap > .fa-notice, .fa-hubwrap > #faq { margin-top: var(--s6); }

/* ── Desktop: the facts and the asides take the right-hand column ────────── */
@media (min-width: 960px) {
  .fa-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    column-gap: 56px;
    align-items: start;
  }
  .fa-grid > * { grid-column: 1; }
  /* The facts span the head, the short answer AND the article. A spanning
     item taller than the rows it spans has the difference shared out among
     them, so spanning only the head and the short answer (the first draft)
     stretched both and opened two gaps of ~150px in the left column — seen
     on the first render at 1440. The article is always the taller side. */
  .fa-grid > .fa-facts { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .fa-grid > .fa-side { grid-column: 2; grid-row: 4 / span 6; align-self: start; }
  /* The season guide's table is data and takes the full width. */
  .fa-season .fa-grid > .fa-head,
  .fa-season .fa-grid > .fa-seasons,
  .fa-season .fa-grid > .fa-episodes { grid-column: 1 / -1; }
  .fa-season .fa-grid > .fa-facts { grid-column: 2; grid-row: 4 / span 2; }
  .fa-season .fa-grid > .fa-side { grid-column: 2; grid-row: 6 / span 2; }
  /* A character's head runs the full width, the seal beside it (canvas Profile).
     The seal is selected structurally — the head's aria-hidden span — because
     this sheet may not name a .fz-* class (rule 2 above). */
  .fa-character .fa-grid > .fa-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--hair-strong);
  }
  .fa-character .fa-head > * { grid-column: 2; }
  .fa-character .fa-head > span[aria-hidden="true"] { grid-column: 1; grid-row: 1 / span 5; align-self: center; }
  .fa-character .fa-grid > .fa-facts { grid-row: 2 / span 2; }
  .fa-character .fa-grid > .fa-side { grid-row: 4 / span 6; }
}

/* ── Touch: 44px targets on everything a finger lands on ─────────────────── */
@media (pointer: coarse) {
  .fa-side li a, .fa-sources a, .fa-meta a, .fa-drafted a, .fa-more a, .fa-aside-card a,
  .fa-body a, .fa-q a, .fa-crumbs a, .fa-seasons a, .fa-facts summary, .fa-rel,
  .fa-table th a, .fa-table td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fa-card, .fa-play-card { transition: border-color .12s ease-out, transform .12s ease-out; }
  .fa-card:hover, .fa-play-card:hover { transform: translateY(-2px); }
}