/* ============================================================
   Deidox.org — In-production project landing pages
   (The Battle Within · Francis Chan new docuseries)
   Built on styles.css tokens + site.css chrome. Self-contained
   layout for a "where we're at / what remains / support it" page.
   ============================================================ */

/* ---------- Hero ---------- */
.pp-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.pp-hero__media { position: absolute; inset: 0; z-index: 0; }
.pp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,11,15,0.55) 0%, rgba(7,11,15,0.15) 32%, rgba(7,11,15,0.78) 78%, var(--ink-950) 100%); }
.pp-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto;
  padding: var(--space-16) var(--gutter) var(--space-12); }
.pp-back { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255,255,255,0.78);
  font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--space-8); transition: color var(--dur-fast) var(--ease-standard); }
.pp-back:hover { color: #fff; }
.pp-back .material-symbols-sharp { font-size: 18px; }
.pp-status { display: inline-flex; align-items: center; gap: var(--space-3); }
.pp-status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan-400);
  box-shadow: 0 0 0 0 rgba(12,192,223,0.55); animation: pp-pulse 2.4s var(--ease-out) infinite; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(12,192,223,0.5); } 70% { box-shadow: 0 0 0 10px rgba(12,192,223,0); } 100% { box-shadow: 0 0 0 0 rgba(12,192,223,0); } }
.pp-status__label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-400); }
.pp-hero__kicker { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: var(--space-6); }
.pp-hero h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.025em; margin: var(--space-4) 0 0; max-width: 18ch; text-wrap: balance; }
.pp-hero__logline { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.82); margin: var(--space-6) 0 0; max-width: 52ch; }
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); }
@media (prefers-reduced-motion: reduce) { .pp-status__dot { animation: none; } }

/* ---------- At-a-glance facts strip ---------- */
.pp-facts { background: var(--ink-950); color: #fff; border-top: 1px solid rgba(255,255,255,0.08); }
.pp-facts__in { max-width: var(--container); margin-inline: auto; padding: var(--space-10) var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.pp-fact span { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.pp-fact strong { display: block; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: #fff; margin-top: var(--space-3); line-height: 1.15; }
@media (max-width: 760px) { .pp-facts__in { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

/* ---------- Progress tracker ---------- */
.pp-track__head { max-width: 56ch; margin-bottom: var(--space-12); }
.pp-track__head h2 { margin: var(--space-5) 0 0; }
.pp-track__head p { margin: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
.pp-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
.pp-rail { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--border); z-index: 0; }
.pp-rail__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); z-index: 1; }
.pp-phase { position: relative; z-index: 2; padding-top: var(--space-10); }
.pp-phase__node { position: absolute; top: 5px; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.pp-phase--done .pp-phase__node { background: var(--accent); border-color: var(--accent); }
.pp-phase--current .pp-phase__node { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 5px var(--cyan-glow); }
.pp-phase__num { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pp-phase--current .pp-phase__num { color: var(--accent-text); }
.pp-phase__name { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-medium); margin: var(--space-3) 0 0; color: var(--text-strong); }
.pp-phase--upcoming .pp-phase__name { color: var(--text-muted); }
.pp-phase__desc { font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-muted); margin: var(--space-3) 0 0; }
.pp-phase__flag { display: inline-block; white-space: nowrap; margin-top: var(--space-4); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 7px; }
@media (max-width: 760px) {
  .pp-phases { grid-template-columns: 1fr; gap: 0; }
  .pp-rail { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pp-rail__fill { left: 0; top: 0; width: 100%; }
  .pp-phase { padding: 0 0 var(--space-10) var(--space-10); }
  .pp-phase__node { top: 4px; left: 0; }
}

/* ---------- The road ahead (what remains) ---------- */
.pp-road { background: var(--surface-sunken); }
.pp-road__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pp-road__head h2 { margin: var(--space-5) 0 0; }
.pp-road__head p { margin: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
.pp-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-todo li { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.pp-todo li:last-child { border-bottom: 1px solid var(--border); }
.pp-todo .material-symbols-sharp { flex: none; font-size: 22px; color: var(--accent-text); margin-top: 1px; }
.pp-todo b { display: block; color: var(--text-strong); font-weight: var(--weight-semibold); }
.pp-todo span { display: block; color: var(--text-muted); font-size: var(--text-body-sm); line-height: var(--leading-relaxed); margin-top: 3px; }
@media (max-width: 860px) { .pp-road__grid { grid-template-columns: 1fr; } }

/* ---------- Story / about ---------- */
.pp-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pp-story__body h2 { margin: var(--space-5) 0 0; }
.pp-story__body p { color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-6) 0 0; }
.pp-story__partner { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-4); }
.pp-story__partner .material-symbols-sharp { font-size: 26px; color: var(--accent-text); }
.pp-story__partner p { margin: 0; font-size: var(--text-body-sm); color: var(--text-muted); }
.pp-story__media { display: grid; gap: var(--space-4); }
.pp-story__media--stack { grid-template-columns: 1fr 1fr; }
.pp-story__media--stack .frame:first-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .pp-story__grid { grid-template-columns: 1fr; } }

/* ---------- Support band ---------- */
.pp-give { position: relative; color: #fff; overflow: hidden; text-align: center; background: var(--ink-950); }
.pp-give__media { position: absolute; inset: 0; z-index: 0; }
.pp-give__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-give__overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,11,15,0.86), rgba(7,11,15,0.82)), radial-gradient(70% 80% at 50% 0%, rgba(12,192,223,0.16), transparent 60%); }
.pp-give__in { position: relative; z-index: 2; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.pp-give h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; margin: var(--space-5) 0 0; text-wrap: balance; }
.pp-give p { color: rgba(255,255,255,0.78); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) auto 0; max-width: 46ch; }
.pp-give__cta { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }
.pp-give__note { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* TK placeholder accent (so unfinished data is obvious in the build) */
.tk { color: var(--accent-text); font-style: normal; border-bottom: 1px dashed currentColor; }
.pp-hero .tk, .pp-facts .tk, .pp-give .tk { color: var(--cyan-400); }