/* Project-page components — shared by projects/*.html.
   Extends assets/styles.css (tokens, nav, buttons, appear, footer). */

.pp-hero{padding:clamp(140px,20vh,220px) var(--pad) clamp(56px,8vh,96px);background:var(--bg-deep)}
.pp-kicker{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--gray-1);
  margin-bottom:clamp(24px,4vh,40px);
}
.pp-kicker .status-dot{margin-right:2px}
.pp-back{color:var(--gray-1);transition:color .3s var(--ease)}
.pp-back:hover{color:var(--white)}
.pp-hero .display{margin-bottom:clamp(24px,4vh,40px)}
.pp-lead{
  font-size:clamp(18px,1.8vw,24px);line-height:1.45;
  max-width:60ch;margin-bottom:clamp(36px,6vh,64px);
}
.pp-meta{
  display:flex;gap:10px;flex-wrap:wrap;
}
.pp-meta span{
  font-size:13px;font-weight:500;color:var(--white);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:9px 16px;
}

.pp-media{margin:0 var(--pad) clamp(64px,10vh,120px)}
.pp-media img,.pp-media video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0a0a}
.pp-media figcaption{
  font-size:13px;color:var(--gray-2);
  padding-top:14px;display:flex;justify-content:space-between;gap:16px;
}

.pp-section{padding:clamp(64px,10vh,120px) var(--pad);background:var(--bg-deep)}
.pp-chapter{
  display:flex;align-items:baseline;gap:16px;
  font-size:13px;color:var(--gray-2);
  margin-bottom:clamp(20px,3vh,32px);
}
.pp-section h2.pp-title{
  font-size:clamp(34px,4.4vw,64px);font-weight:500;
  letter-spacing:-0.04em;line-height:1.04;
  margin-bottom:clamp(28px,4vh,44px);max-width:18ch;
}
.pp-title em{font-family:var(--serif);font-style:italic;font-weight:400}
.pp-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);max-width:1100px}
.pp-cols p{color:#c9c9c9}
.pp-cols p+p{margin-top:20px}

/* pipeline stage rows */
.pp-stages{border-top:1px solid var(--line);margin-top:clamp(28px,4vh,44px)}
.pp-stage{
  display:grid;grid-template-columns:72px 1.1fr 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.pp-stage:hover{padding-left:12px}
.pp-stage-num{font-size:13px;color:var(--accent)}
.pp-stage h3{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-0.03em}
.pp-stage p{font-size:14px;color:var(--gray-1)}

/* fact/science cards */
.pp-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.pp-card{
  background:#121212;border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:clamp(24px,2.6vw,36px);
}
.pp-card h3{font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-0.03em;margin-bottom:12px}
.pp-card p{font-size:15px;color:var(--gray-1)}
.pp-card strong{color:var(--white);font-weight:500}

/* spec strip */
.pp-specs{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:clamp(28px,4vh,44px);
}
.pp-spec{padding:20px 16px 18px 0;border-bottom:1px solid var(--line)}
.pp-spec dt{font-size:12px;color:var(--gray-2);margin-bottom:6px}
.pp-spec dd{font-size:15px;font-weight:500;margin:0}

/* stat tiles reuse .flagship-stats/.stat-tile from styles.css */

/* alert-card mockup */
.pp-alert{
  max-width:560px;
  background:#101418;border:1px solid rgba(255,255,255,.09);
  border-radius:18px;overflow:hidden;
  font-size:14px;
}
.pp-alert-head{
  display:flex;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--gray-1);font-size:12px;
}
.pp-alert-body{padding:20px}
.pp-alert-body h3{font-size:17px;font-weight:500;margin-bottom:4px}
.pp-alert-sub{color:var(--accent);font-size:12px;margin-bottom:16px;display:block}
.pp-alert-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.pp-alert-grid dt{font-size:11px;color:var(--gray-2)}
.pp-alert-grid dd{font-size:14px;font-weight:500;margin:2px 0 0}
.pp-alert-bar{
  height:6px;border-radius:3px;background:rgba(255,255,255,.1);
  margin:14px 0 4px;overflow:hidden;
}
.pp-alert-bar i{display:block;height:100%;width:78%;background:var(--accent)}

/* lazy iframe frame */
.pp-frame{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-top:clamp(28px,4vh,44px)}
.pp-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0a0a0a}

/* next-project footer */
.pp-next{
  padding:clamp(80px,12vh,140px) var(--pad);
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  text-align:center;
}
.pp-next-label{font-size:13px;color:var(--gray-2);display:block;margin-bottom:16px}
.pp-next a.pp-next-link{
  font-size:clamp(40px,6vw,84px);font-weight:500;letter-spacing:-0.04em;
  transition:color .35s var(--ease);
}
.pp-next a.pp-next-link:hover{color:var(--accent)}
.pp-terms{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--gray-2);
  padding:20px var(--pad) 28px;background:var(--bg-deep);
}

@media (max-width:810px){
  .pp-cols{grid-template-columns:1fr}
  .pp-cards{grid-template-columns:1fr}
  .pp-specs{grid-template-columns:1fr 1fr}
  .pp-stage{grid-template-columns:52px 1fr;grid-template-rows:auto auto}
  .pp-stage p{grid-column:2}
}