/* ============================================================
   THE GEO FAQ — autumn dusk layer.
   Lavender (dusk, question, held breath) fading into a low amber
   (the last warm hour before dark). Leaves fall instead of fog
   drifting or embers rising — same mechanism, opposite gravity.
   ============================================================ */

.geofaq-page {
  --lav: #B6A3E6;
  --lav-soft: #DCD0F5;
  --lav-deep: #6E5AA6;
  --amber: #E2954F;
  --amber-soft: #F2BD8B;
  --rust: #C1573A;
  --rust-soft: #E08A6C;
}

/* ---------- header + hero ---------- */

.geofaq-page .article-tag {
  color: var(--lav-soft);
  border-color: rgba(182, 163, 230, 0.4);
  background: linear-gradient(100deg, rgba(182, 163, 230, 0.16), rgba(226, 149, 79, 0.06));
  box-shadow: 0 0 26px rgba(182, 163, 230, 0.14);
}
.geofaq-page .article-head h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--lav-soft) 15%, var(--amber-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 26px rgba(182, 163, 230, 0.35));
}
.geofaq-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(182, 163, 230, 0.15) 48%, rgba(226, 149, 79, 0.08) 76%, transparent 92%); }
.geofaq-page .fog-a { background: radial-gradient(closest-side, rgba(182, 163, 230, 0.11), transparent 70%); }
.geofaq-page .fog-b { background: radial-gradient(closest-side, rgba(226, 149, 79, 0.09), transparent 70%); }

/* a small honest joke, because admitting you read your own Search Console earns one */
.gag-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--lav-soft); border: 1px dashed rgba(182, 163, 230, 0.45); border-radius: 999px;
  transform: rotate(-1deg);
}

/* ---------- falling leaves (CSS-only, no JS) ---------- */

.leaves { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.leaf {
  position: absolute; top: -8%;
  width: 13px; height: 18px;
  border-radius: 0 100% 0 100%;
  opacity: 0; animation: leaf-fall linear infinite;
}
.leaf::after {
  content: ""; position: absolute; top: 2px; left: 50%; width: 1px; height: 12px;
  background: rgba(11, 12, 16, 0.28); transform: translateX(-50%) rotate(6deg);
}
.leaf-1 { left: 6%;  width: 12px; height: 16px; background: var(--lav-soft); animation-duration: 22s; animation-delay: -1s; }
.leaf-2 { left: 19%; width: 15px; height: 20px; background: var(--amber-soft); animation-duration: 27s; animation-delay: -9s; }
.leaf-3 { left: 34%; width: 11px; height: 15px; background: var(--rust-soft); animation-duration: 19s; animation-delay: -4s; }
.leaf-4 { left: 52%; width: 14px; height: 19px; background: var(--lav-soft); animation-duration: 25s; animation-delay: -14s; }
.leaf-5 { left: 68%; width: 12px; height: 16px; background: var(--amber-soft); animation-duration: 21s; animation-delay: -7s; }
.leaf-6 { left: 83%; width: 13px; height: 18px; background: var(--rust-soft); animation-duration: 24s; animation-delay: -17s; }
.leaf-7 { left: 94%; width: 11px; height: 15px; background: var(--lav-soft); animation-duration: 18s; animation-delay: -2s; }
@keyframes leaf-fall {
  0%   { transform: translate(0, -10vh) rotate(-8deg); opacity: 0; }
  6%   { opacity: 0.5; }
  25%  { transform: translate(26px, 18vh) rotate(80deg); }
  50%  { transform: translate(-20px, 48vh) rotate(170deg); }
  75%  { transform: translate(22px, 78vh) rotate(260deg); }
  93%  { opacity: 0.42; }
  100% { transform: translate(-12px, 112vh) rotate(350deg); opacity: 0; }
}
@media (max-width: 640px) { .leaf-2, .leaf-4, .leaf-6 { display: none; } }
@media (prefers-reduced-motion: reduce) { .leaves { display: none; } }

/* ---------- links, pull quote, checklist ---------- */

.geofaq-page .article-body a:not(.btn) {
  color: var(--lav-soft);
  background-image: linear-gradient(90deg, var(--lav), var(--amber));
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  border-bottom: 1px solid rgba(182, 163, 230, 0.4);
  text-decoration: none; padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease, background-size 0.3s ease;
}
.geofaq-page .article-body a:not(.btn):hover {
  color: var(--amber-soft); border-bottom-color: transparent;
  background-size: 100% 1px;
}
.geofaq-page .sources a { color: var(--lav-soft); }

.geofaq-page .pull {
  position: relative; overflow: hidden;
  border-left-color: var(--lav);
  background: linear-gradient(100deg, rgba(182, 163, 230, 0.1), rgba(226, 149, 79, 0.03) 70%);
}
.geofaq-page .pull::after {
  content: ""; position: absolute; right: 14px; bottom: -10px; width: 46px; height: 62px;
  border-radius: 0 100% 0 100%; background: var(--amber); opacity: 0.08;
  transform: rotate(-18deg);
}
.geofaq-page .check-list li::before {
  content: ""; top: 6px; left: 0; width: 11px; height: 15px;
  border-radius: 0 100% 0 100%; background: var(--lav-soft);
}
.geofaq-page .check-list li:nth-child(3n+2)::before { background: var(--amber-soft); }
.geofaq-page .check-list li:nth-child(3n)::before { background: var(--rust-soft); }

.geofaq-page .article-body h2 {
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--text);
}
.geofaq-page .article-body h2::before {
  content: "·"; color: var(--amber-soft); margin-right: 10px; font-weight: 400;
}
.geofaq-page .fig-title { color: var(--lav-soft); }
.geofaq-page .lead-para { font-size: 20.5px; }

/* ---------- data blocks: fig / gap-fig / trend ---------- */

.fig {
  position: relative; overflow: hidden;
  margin: 34px 0 36px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(182, 163, 230, 0.045), rgba(226, 149, 79, 0.015));
  padding: 26px 28px 22px;
}
.fig::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  border-radius: 0 100% 0 100%; background: radial-gradient(circle, rgba(182, 163, 230, 0.14), transparent 70%);
  transform: rotate(18deg); pointer-events: none;
}
.fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; position: relative; }
.fig-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.fig-src { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em; color: var(--text-faint); }
.fig-src a { color: var(--text-faint) !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; }
.fig-src a:hover { color: var(--lav-soft) !important; }
.fig-foot { position: relative; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-dim); }
.fig-foot-plain { margin-top: -14px; font-size: 13.5px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.02em; }

.gap-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; }
.gap-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  background: rgba(0, 0, 0, 0.22); text-align: center;
}
.gap-card.is-rise { border-color: rgba(226, 149, 79, 0.35); background: rgba(226, 149, 79, 0.06); }
.gap-card.is-lost { border-color: rgba(193, 87, 58, 0.35); background: rgba(193, 87, 58, 0.07); }
.gap-card b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.045em; line-height: 1; color: var(--lav-soft); margin-bottom: 10px; }
.gap-card.is-rise b { color: var(--amber-soft); }
.gap-card.is-lost b { color: var(--rust-soft); }
.gap-card p { font-size: 14.5px; color: var(--text-dim); }
.gap-card .g-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--text-faint); margin-bottom: 14px; }

.trend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.trend-cell { border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; background: rgba(0, 0, 0, 0.2); }
.trend-cell b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.03em; color: var(--lav-soft); line-height: 1; margin-bottom: 8px; }
.trend-cell code { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text); background: none; margin-bottom: 6px; word-break: break-word; }
.trend-cell span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--text-faint); }
.trend-cell.is-bad { border-color: rgba(193, 87, 58, 0.3); }
.trend-cell.is-bad b { color: var(--rust-soft); font-size: clamp(18px, 2.4vw, 22px); }

.rate-grid .trend-cell b { color: var(--amber-soft); }
.rate-grid { margin-top: 22px; margin-bottom: 6px; }

/* ---------- numbered steps: leaf chips instead of plain circles ---------- */

.geofaq-page .steps > li::before {
  background: linear-gradient(140deg, rgba(182, 163, 230, 0.24), rgba(226, 149, 79, 0.06));
  border-color: rgba(182, 163, 230, 0.4); color: var(--lav-soft);
  border-radius: 0 60% 0 60%;
}

/* ---------- warn box: rust, not the site default pink-red ---------- */

.geofaq-page .warn-box { border-color: rgba(193, 87, 58, 0.35); background: rgba(193, 87, 58, 0.07); }
.geofaq-page .warn-label { color: var(--rust-soft); }

/* ---------- CTA card, dusk tint ---------- */

.geofaq-page .cta-card { border-color: rgba(182, 163, 230, 0.28); background: linear-gradient(160deg, rgba(182, 163, 230, 0.07), rgba(226, 149, 79, 0.02)); }

/* ---------- adaptive ---------- */

@media (max-width: 860px) {
  .trend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fig { padding: 20px 18px 18px; margin: 26px 0 28px; }
  .gap-fig { grid-template-columns: 1fr; }
  .trend { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .geofaq-page .article-body a:not(.btn) { transition: none; }
}