/* ============================================================
   Deidox.org - Francis Chan new docuseries (in-production landing page)
   The series carries its deck identity — black + warm cream +
   amber/gold + cinematic serif — framed inside the Deidox shell.
   Scoped under .mbb so it never touches the cyan project pages.
   Builds on production.css for shared structure (pp-*).
   ============================================================ */

.mbb { --gold: #EBA046; --gold-bright: #F2B868; --cream: #F2ECDF; }

/* ---- Accent recolor: swap production.css cyan → warm gold ---- */
.mbb .pp-status__dot { background: var(--gold); animation: mbb-pulse 2.6s var(--ease-out) infinite; }
@keyframes mbb-pulse { 0% { box-shadow: 0 0 0 0 rgba(235,160,70,0.5); } 70% { box-shadow: 0 0 0 10px rgba(235,160,70,0); } 100% { box-shadow: 0 0 0 0 rgba(235,160,70,0); } }
.mbb .pp-status__label { color: var(--gold); }
.mbb .eyebrow--tick::before { background: var(--gold); }
.mbb .eyebrow--accent { color: var(--gold); }
.mbb .btn--primary { background: var(--gold); color: #241a0a; }
.mbb .btn--primary:hover { background: var(--gold-bright); color: #241a0a; }
.mbb .pp-back:hover { color: var(--gold); }

/* ---- Progress tracker: cyan → gold ---- */
.mbb .pp-rail__fill { background: var(--gold); }
.mbb .pp-phase--done .pp-phase__node { background: var(--gold); border-color: var(--gold); }
.mbb .pp-phase--current .pp-phase__node { background: var(--surface); border-color: var(--gold); box-shadow: 0 0 0 5px var(--amber-soft); }
.mbb .pp-phase--current .pp-phase__num { color: #9a6a1e; }
.mbb .pp-phase__flag { color: #9a6a1e; }
.mbb .pp-todo .material-symbols-sharp { color: var(--gold); }

/* ---- Hero title: "My Body," cream + "Broken" gold italic (deck lockup) ---- */
.mbb .pp-hero h1 { letter-spacing: -0.02em; }
.mbb .mbb-broken { color: var(--gold); font-style: italic; }

/* ---- Premise / scripture block ---- */
.mbb-verse { background: var(--ink-950); color: #fff; }
.mbb-verse__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mbb-verse__media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.mbb-verse__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.mbb-verse__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,15,20,0.5), transparent 40%); }
.mbb-scripture { font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: clamp(1.75rem, 3.4vw, 2.9rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--cream); margin: 0; text-wrap: balance; }
.mbb-scripture em { color: var(--gold); font-style: italic; }
.mbb-verse__ref { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: var(--space-6); }
.mbb-verse__body { color: rgba(255,255,255,0.82); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-8) 0 0; }
.mbb-verse__body strong { color: #fff; font-weight: var(--weight-semibold); }
@media (max-width: 860px) { .mbb-verse__grid { grid-template-columns: 1fr; } .mbb-verse__media { aspect-ratio: 16/10; } }

/* ---- Why now: stat trio ---- */
.mbb-why__head { max-width: 60ch; margin-bottom: var(--space-12); }
.mbb-why__head h2 { margin: var(--space-5) 0 0; }
.mbb-why__head p { color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.mbb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.mbb-stat { padding: var(--space-8); background: var(--ink-950); color: #fff; border-radius: var(--radius-md); }
.mbb-stat strong { display: block; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2rem, 3.4vw, 2.85rem); color: var(--gold); line-height: 1; }
.mbb-stat span { display: block; color: rgba(255,255,255,0.78); font-size: var(--text-body-sm); line-height: var(--leading-relaxed); margin-top: var(--space-4); }
@media (max-width: 760px) { .mbb-stats { grid-template-columns: 1fr; } }

/* ---- Format: the two-way visit ---- */
.mbb-format { background: var(--ink-950); color: #fff; position: relative; overflow: hidden; }
.mbb-format__head { max-width: 56ch; margin-bottom: var(--space-12); }
.mbb-format__head .eyebrow { color: var(--gold); }
.mbb-format__head h2 { color: #fff; margin: var(--space-5) 0 0; }
.mbb-format__head p { color: rgba(255,255,255,0.8); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.mbb-swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-8); align-items: stretch; }
.mbb-side { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: var(--space-10); }
.mbb-side__num { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mbb-side h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h4); color: #fff; margin: var(--space-4) 0 0; }
.mbb-side p { color: rgba(255,255,255,0.74); font-size: var(--text-body); line-height: var(--leading-relaxed); margin: var(--space-4) 0 0; }
.mbb-swap__arrow { display: flex; align-items: center; justify-content: center; color: var(--gold); }
.mbb-swap__arrow .material-symbols-sharp { font-size: 30px; }
.mbb-format__close { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.12); }
.mbb-format__close p { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; color: var(--cream); max-width: 30ch; }
@media (max-width: 860px) {
  .mbb-swap { grid-template-columns: 1fr; }
  .mbb-swap__arrow { transform: rotate(90deg); padding: var(--space-2) 0; }
}

/* ---- The matching gift — the fundraising hook ---- */
.mbb-match { position: relative; color: #fff; overflow: hidden; background: var(--ink-950); }
.mbb-match__media { position: absolute; inset: 0; z-index: 0; }
.mbb-match__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.mbb-match__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,15,20,0.82), rgba(10,15,20,0.9)); }
.mbb-match__in { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.mbb-match__eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.mbb-match h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; margin: var(--space-5) 0 0; text-wrap: balance; }
.mbb-match h2 em { color: var(--gold); font-style: italic; }
.mbb-match__sub { color: rgba(255,255,255,0.82); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-6) auto 0; max-width: 50ch; }
/* progress meter */
.mbb-meter { max-width: 40rem; margin: var(--space-10) auto 0; }
.mbb-meter__track { height: 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); overflow: hidden; position: relative; }
.mbb-meter__fill { position: absolute; inset: 0 50% 0 0; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: var(--radius-pill); }
.mbb-meter__legend { display: flex; justify-content: space-between; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; }
.mbb-meter__legend b { color: var(--gold); font-weight: var(--weight-medium); }
.mbb-meter__legend span { color: rgba(255,255,255,0.55); }
.mbb-match__cta { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-10); flex-wrap: wrap; }
.mbb-match__note { margin-top: var(--space-8); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ---- Impact / launching the studio ---- */
.mbb-impact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mbb-impact__body h2 { margin: var(--space-5) 0 0; }
.mbb-impact__body p { color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-6) 0 0; }
.mbb-impact__body strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.mbb-impact__media { position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: var(--radius-md); }
.mbb-impact__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .mbb-impact__grid { grid-template-columns: 1fr; } }

/* ---- Partnership line ---- */
.mbb-partners { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.mbb-partners .material-symbols-sharp { color: var(--gold); font-size: 24px; }
.mbb-partners p { margin: 0; font-size: var(--text-body-sm); color: var(--text-muted); }
.mbb-partners b { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* ============ who's behind this credit section ============ */
.mbb-credit{background:var(--ink-950,#0A0F14);padding-block:clamp(2.5rem,5vh,4rem)}
.mbb-credit__in{max-width:52rem;margin-inline:auto;text-align:center}
.mbb-credit__in p{color:rgba(255,255,255,.82);font-size:var(--text-body-lg,1.15rem);line-height:1.65;margin:0}
.mbb-credit__danielle{margin-top:var(--space-4) !important;color:rgba(255,255,255,.6) !important;font-size:var(--text-body,1rem) !important;font-style:italic}