/* Landing page (public series marketing) — pulled from the design project's
 * "Landing page" screen. Page-scoped lp-* classes over the h2h.css system.
 */

/* ---- Hero ---- */
.lp-hero { position:relative; overflow:hidden; background:var(--navy-deep); color:#fff; }
.lp-hero__art { position:absolute; inset:0 0 0 auto; width:52%; }
.lp-hero__art img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.lp-hero__art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--navy-deep) 0%, rgba(13,31,58,.75) 30%, rgba(13,31,58,.1) 70%, rgba(13,31,58,.35) 100%); }
.lp-hero__inner { position:relative; z-index:2; max-width:80rem; margin:0 auto; padding:var(--sp-8) var(--sp-6); }
.lp-hero__col { max-width:34rem; }
.lp-hero .lp-eyebrow { color:var(--gold); }
.lp-hero h1 { color:#fff; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.04; margin:0 0 var(--sp-4); letter-spacing:-.01em; }
.lp-hero h1 em { font-style:italic; font-weight:400; color:var(--gold); }
.lp-hero__lead { font-size:var(--text-lg); color:#e9eef5; margin:0 0 var(--sp-5); max-width:30rem; }
.lp-hero__cta { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.lp-btn-ghost { display:inline-block; font-family:var(--font-sans); font-weight:600; font-size:var(--text-base); padding:.75rem 1.5rem; border-radius:var(--radius); border:1px solid rgba(255,255,255,.45); color:#fff; text-decoration:none; transition:background-color 120ms,border-color 120ms; }
.lp-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

.lp-eyebrow { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 var(--sp-3); }

/* ---- Access strip (returning participants) ---- */
.lp-access { max-width:80rem; margin:0 auto; padding:var(--sp-4) var(--sp-6); font-size:var(--text-sm); color:var(--ink-soft); }

/* ---- Section frame ---- */
.lp-section { max-width:80rem; margin:0 auto; padding:var(--sp-8) var(--sp-6); }
.lp-section--narrow { max-width:56rem; text-align:center; }
.lp-rule { width:3rem; height:3px; background:var(--gold); border-radius:2px; margin:0 0 var(--sp-4); }
.lp-section--narrow .lp-rule { margin-left:auto; margin-right:auto; }
.lp-h2 { font-size:var(--text-3xl); margin:0 0 var(--sp-4); }
.lp-h2 em { font-style:italic; color:var(--navy); }

/* ---- Stat strip ---- */
.lp-stats { border-top:1px solid var(--gold-soft); border-bottom:1px solid var(--gold-soft); background:var(--mist); }
.lp-stats__grid { max-width:80rem; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.lp-stat { padding:var(--sp-6) var(--sp-5); text-align:center; border-left:1px solid var(--gold-soft); }
.lp-stat:first-child { border-left:0; }
.lp-stat__n { font-family:var(--font-serif); font-weight:900; font-size:var(--text-3xl); color:var(--crimson); line-height:1; }
.lp-stat__l { font-size:var(--text-sm); color:var(--ink-soft); margin-top:var(--sp-2); }

/* ---- Mission band ---- */
.lp-band { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lift); border:1px solid var(--line); }
.lp-band__img { position:relative; min-height:26rem; }
.lp-band__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lp-band__text { padding:var(--sp-7) var(--sp-7); background:var(--card); align-self:center; }
.lp-band__text .lp-eyebrow { color:var(--navy); }

.lp-quote { font-family:var(--font-serif); font-style:italic; font-size:var(--text-xl); line-height:1.5; color:var(--ink); margin:0 0 var(--sp-4); }

/* ---- Storytellers ---- */
.lp-people { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.lp-person { text-align:center; }
.lp-person__frame { border-radius:var(--radius-lg); padding:6px; background:linear-gradient(150deg,var(--gold) 0%,var(--gold-soft) 100%); box-shadow:var(--shadow); }
.lp-person__frame > div { position:relative; padding-top:118%; border-radius:9px; overflow:hidden; background:var(--mist); }
.lp-person__frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lp-person__name { font-family:var(--font-serif); font-weight:700; margin-top:var(--sp-3); }
.lp-person__role { font-size:var(--text-sm); color:var(--ink-soft); }

/* ---- Episode grid ---- */
.lp-eps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.lp-ep { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow 140ms, transform 140ms; }
.lp-ep:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.lp-ep__thumb { position:relative; padding-top:56.25%; background:#1c1512; }
.lp-ep__thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lp-ep__play { position:absolute; inset:0; display:grid; place-items:center; }
.lp-ep__play span { width:3.2rem; height:3.2rem; border-radius:50%; background:rgba(124,0,0,.92); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.lp-ep__play svg { width:1.1rem; height:1.1rem; fill:#fff; margin-left:3px; }
.lp-ep__body { padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.lp-ep__n { font-size:var(--text-sm); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
.lp-ep__t { font-family:var(--font-serif); font-weight:700; font-size:var(--text-lg); margin:var(--sp-1) 0 0; }

/* ---- Closing CTA ---- */
.lp-cta { position:relative; background:var(--crimson); color:#fff; text-align:center; overflow:hidden; }
.lp-cta::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% -20%, rgba(181,143,77,.35), transparent 55%); }
.lp-cta__inner { position:relative; z-index:2; max-width:44rem; margin:0 auto; padding:var(--sp-8) var(--sp-6); }
.lp-cta h2 { color:#fff; font-size:var(--text-3xl); margin:0 0 var(--sp-3); }
.lp-cta h2 em { font-style:italic; color:var(--gold-soft); }
.lp-cta p { color:#f3e4e4; font-size:var(--text-lg); margin:0 0 var(--sp-5); }
.lp-cta .h2h-btn--primary { background:#fff; color:var(--crimson); }
.lp-cta .h2h-btn--primary:hover { background:var(--gold-soft); color:var(--crimson-deep); }

/* ---- Footer ---- */

@media (max-width:760px){
  .lp-hero__art{ width:100%; opacity:.5; }
  .lp-stats__grid{ grid-template-columns:repeat(2,1fr); }
  .lp-band,.lp-people,.lp-eps{ grid-template-columns:1fr; }
  .lp-stat:nth-child(3){ border-left:0; }
}

/* The reference sheets on the marketing page — free to take before deciding. */
.lp-sheets { max-width: 80rem; margin: 0 auto; padding: 0 var(--sp-6); }

.lp-signin { margin: var(--sp-4) 0 0; color: #c7d2e2; font-size: var(--text-sm); }
.lp-signin a { color: var(--gold-soft); }