/* Willo's articles (/articles, lib/willo-articles.js): each reads like a chat with her. Her wisp floats at the top,
   the question is the player's bubble and her short answer sits beside her; down the page every section opens with a
   follow-up question as the player's bubble and continues in her words. Under it the markup is a plain article.
   Built on her tokens (tokens.css, linked by lib/doors.js on her domain), with fallbacks for the Lore Forever door. */
.wa {
  --wa-ink: var(--w-text, #f4ecdc); --wa-ink-2: var(--w-text-2, #cfdad6); --wa-muted: var(--w-muted, #9db4b6);
  --wa-glow: var(--w-glow, #7fe0dc); --wa-glow-hi: var(--w-glow-hi, #dffbf8); --wa-gold: var(--w-gold, #ecc07a);
  --wa-panel: var(--w-panel, #11303fcc); --wa-rim: var(--w-rim, #e2b77a33); --wa-rim-2: var(--w-rim-strong, #e2b77a80);
  --wa-line: var(--w-line, #9fd6d826); --wa-r: var(--w-r, 10px);
  --wa-display: var(--w-display, "Marcellus", Georgia, serif); --wa-body: var(--w-body, "Alegreya Sans", system-ui, sans-serif);
  position: relative; max-width: 780px; margin: 0 auto; padding: 28px 0 64px; color: var(--wa-ink); font-family: var(--wa-body);
}

/* ---- Her wisp ---- */
.wa-wisp { position: relative; width: 120px; height: 120px; margin: 0 auto 6px; pointer-events: none; }
.wa-wisp img { position: relative; width: 100%; height: 100%; z-index: 1;
  filter: drop-shadow(0 0 14px #2fb7d0) drop-shadow(0 0 40px #4f9fe0aa); animation: wa-float 6s ease-in-out infinite; }
.wa-halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, #7fe0dc55, transparent 68%);
  animation: wa-breathe 4s ease-in-out infinite; }
.wa-mote { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--wa-glow-hi);
  box-shadow: 0 0 10px var(--wa-glow); opacity: 0; animation: wa-mote 5s ease-in-out infinite; }
.wa-m1 { left: 8%; top: 62%; } .wa-m2 { right: 6%; top: 30%; animation-delay: 1.6s; } .wa-m3 { left: 46%; top: 4%; animation-delay: 3.1s; width: 4px; height: 4px; }
@keyframes wa-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(5px, -12px) rotate(2deg); } }
@keyframes wa-breathe { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes wa-mote { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-28px); opacity: 0; } }

/* ---- The opening exchange ---- */
.wa-top { display: grid; gap: 14px; margin-bottom: 34px; }
.wa-who { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 400 .82rem/1 var(--wa-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--wa-gold); }
.wa-who img { filter: drop-shadow(0 0 6px var(--wa-glow)); }
.wa-ask { justify-self: end; max-width: 88%; text-align: right; }
.wa-who-you { justify-content: flex-end; color: var(--wa-muted); }
.wa .wa-q { margin: 0; padding: 14px 20px; border-radius: 18px 18px 4px 18px; background: linear-gradient(180deg, #1c4a5e, #163a4b);
  border: 1px solid var(--wa-rim-2); font: 400 clamp(1.45rem, 3.4vw, 2.1rem)/1.25 var(--wa-display); color: #fff; text-align: left;
  box-shadow: 0 14px 34px -18px #000; }
.wa-say { justify-self: start; max-width: 94%; padding: 16px 20px 18px; border-radius: 18px 18px 18px 4px; background: var(--wa-panel);
  border: 1px solid #7fe0dc40; box-shadow: 0 0 0 1px #7fe0dc14, 0 0 38px -14px #7fe0dc88; animation: wa-arrive .7s ease-out both .25s; }
.wa .wa-short { margin: 0; font-size: 1.22rem; line-height: 1.55; color: var(--wa-ink); font-family: var(--wa-body); font-weight: 400; }
.wa-index .wa-index-h { font: 400 clamp(1.6rem, 3.6vw, 2.2rem)/1.2 var(--wa-display); color: #fff; }
.wa-lede { margin: 10px 0 0; color: var(--wa-ink-2); font-size: 1.08rem; line-height: 1.6; }
.wa-when { margin: 0; justify-self: start; color: var(--wa-muted); font-size: .9rem; }
@keyframes wa-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- The rest of her answer ---- */
.wa-thread { padding: 6px 0 0 22px; border-left: 2px solid #7fe0dc33; font-size: 1.08rem; line-height: 1.7; color: var(--wa-ink-2); }
.wa-thread p, .wa-thread li { color: var(--wa-ink-2); }
.wa-thread strong { color: var(--wa-ink); }
.wa-thread a { color: var(--wa-glow); }
/* Each section opens with the player's follow-up question. */
.wa-thread h2 { display: table; margin: 40px 0 16px auto; max-width: 88%; padding: 10px 18px; border-radius: 16px 16px 4px 16px;
  background: #1a4254; border: 1px solid var(--wa-rim); font: 400 1.28rem/1.35 var(--wa-display); color: #fff; }
.wa-thread h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
  background: var(--wa-gold); vertical-align: middle; }
.wa-thread h3 { margin: 26px 0 8px; font: 400 1.12rem/1.4 var(--wa-display); color: var(--wa-ink); }
.wa-thread blockquote { margin: 18px 0; padding: 12px 18px; border-radius: var(--wa-r); background: #7fe0dc12; border-left: 3px solid var(--wa-glow); }
.wa-thread blockquote p { margin: 0; color: var(--wa-ink); font-style: italic; }
.wa-thread ul, .wa-thread ol { padding-left: 1.2em; }
.wa-thread li { margin: 6px 0; }
.wa-thread li::marker { color: var(--wa-glow); }
.wa-thread code, .wa-thread kbd { padding: 2px 7px; border: 1px solid var(--wa-rim-2); border-bottom-width: 2px; border-radius: 6px;
  background: #ffffff0d; font: 600 .88em/1 var(--wa-body); color: var(--wa-ink); }
/* Tables and pictures (charts, maps, family trees) inside her answer. */
.wa-thread .gd-table { margin: 18px 0; overflow-x: auto; border: 1px solid var(--wa-line); border-radius: var(--wa-r); background: #ffffff06; }
.wa-thread table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.wa-thread th { text-align: left; padding: 10px 14px; font: 400 .82rem/1.2 var(--wa-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--wa-gold); border-bottom: 1px solid var(--wa-rim); white-space: nowrap; }
.wa-thread td { padding: 10px 14px; border-top: 1px solid var(--wa-line-soft, #9fd6d814); vertical-align: top; color: var(--wa-ink-2); }
.wa-thread tr:first-child td { border-top: 0; }
.wa-thread .gd-fig { margin: 20px 0; }
.wa-thread .gd-fig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--wa-line); }
.wa-thread .gd-fig figcaption { margin-top: 8px; color: var(--wa-muted); font-size: .92rem; }
.wa-toc { margin: 0 0 8px; padding: 12px 16px; border-radius: var(--wa-r); background: #ffffff08; border: 1px solid var(--wa-line); }
.wa-toc p { margin: 0 0 6px; font: 400 .8rem/1 var(--wa-display); letter-spacing: .14em; text-transform: uppercase; color: var(--wa-gold); }
.wa-toc ol { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; }
.wa-toc li { margin: 0; }
.wa-toc a { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--wa-line); text-decoration: none; font-size: .92rem; }
.wa-toc a:hover { border-color: var(--wa-glow); }
/* The FAQ: her quick answers, each question a small player bubble. */
.wa-thread .gd-faq h3 { display: table; margin: 22px 0 8px auto; max-width: 88%; padding: 8px 14px; border-radius: 14px 14px 4px 14px;
  background: #ffffff0a; border: 1px solid var(--wa-line); font-size: 1.02rem; }
.wa-thread .gd-sources { font-size: .95rem; }

/* ---- Her call and the next questions ---- */
.wa-cta { display: flex; gap: 18px; align-items: flex-start; margin: 48px 0 0; padding: 22px 24px; border-radius: 16px;
  background: var(--wa-panel); border: 1px solid var(--wa-rim-2); }
.wa-cta img { flex: none; filter: drop-shadow(0 0 12px var(--wa-glow)); animation: wa-float 6s ease-in-out infinite; }
.wa-cta h2 { margin: 0 0 6px; font: 400 1.4rem/1.2 var(--wa-display); color: #fff; }
.wa-cta p { margin: 0 0 12px; color: var(--wa-ink-2); }
.wa-cta-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.wa .w-get { order: 0; display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 8px; text-decoration: none;
  background: var(--w-cta, linear-gradient(180deg, #fbe6b4, #e6b263 55%, #c98a3f)); color: var(--w-cta-ink, #2a1605);
  font: 400 1.02rem/1 var(--wa-display); box-shadow: var(--w-cta-glow, none); }
.wa-alt { color: var(--wa-glow); }
.wa-more { margin-top: 40px; }
.wa-more h2 { margin: 0 0 12px; font: 400 1.2rem/1.3 var(--wa-display); color: var(--wa-gold); }
.wa-more ul, .wa-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wa-more a { display: block; padding: 10px 16px; border-radius: 14px 14px 4px 14px; background: #ffffff08; border: 1px solid var(--wa-line);
  color: var(--wa-ink); text-decoration: none; }
.wa-more a:hover, .wa-list a:hover { border-color: var(--wa-glow); background: #7fe0dc12; }
/* /articles: the questions, as bubbles to tap. */
.wa-list { gap: 12px; }
.wa-list a { display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px 16px 4px 16px; background: #ffffff08; border: 1px solid var(--wa-line);
  text-decoration: none; }
.wa-list strong { font: 400 1.18rem/1.35 var(--wa-display); color: #fff; }
.wa-list span { color: var(--wa-muted); font-size: .98rem; line-height: 1.5; }

@media (max-width: 640px) {
  .wa { padding-top: 12px; }
  .wa-wisp { width: 88px; height: 88px; }
  .wa-ask, .wa-say { max-width: 100%; }
  .wa-thread { padding-left: 14px; }
  .wa-thread h2, .wa-thread .gd-faq h3 { max-width: 100%; }
  .wa-cta { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-wisp img, .wa-halo, .wa-mote, .wa-say, .wa-cta img { animation: none; }
  .wa-mote { opacity: .6; }
}