/* Joychiever — BD for PD (/bd-for-pd/)
   Temporary page for the Feb 2027 series. Retires after the series runs;
   see claude/joychiever-bd-for-pd-page.md in the project for the steps.
   Tokens, fonts, header, footer and the em.mid serif rule all come from
   site.css. Everything here is prefixed bp- so nothing collides with
   home.css, bd.css, pd.css, about.css.

   NOTE: when this file changes, bump ?v= on its <link> in
   bd-for-pd/index.html, or returning visitors keep the cached copy. */

/* ================= 01 HERO ================= */
/* One size, one weight, the serif carrying the only accent — the same shape
   as the home and Beyond BD heroes. The header is fixed, so the hero pays
   for its own clearance. */
.bp-hero{background:var(--ink);color:var(--cream)}
.bp-hero .in{max-width:1200px;margin:0 auto;padding:calc(var(--hh) + clamp(40px,5vw,72px)) 48px clamp(64px,8vw,106px)}
.bp-eyebrow{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:clamp(24px,2.8vw,36px)}
/* The timing rides on the eyebrow so nobody has to scroll to the facts to
   learn this is an event rather than a standing offering. Muted, not orange,
   so "BD for PD" stays the label and the date reads as its qualifier. */
.bp-eyebrow .when{color:#9C958A}
.bp-hd{font:600 clamp(30px,4vw,54px)/1.16 var(--sans);letter-spacing:-.028em;color:var(--cream)}
.bp-hd span{display:block}

/* ================= 02 THE INVITATION ================= */
/* Top padding is deliberately lighter than the hero's bottom padding — the
   black edge already does the separating, so the cream doesn't need to. */
.bp-inv{background:var(--cream)}
.bp-inv .in{max-width:1200px;margin:0 auto;padding:clamp(44px,4.6vw,62px) 48px clamp(52px,5.4vw,72px)}
.bp-body{font:400 clamp(17.5px,1.55vw,20px)/1.62 var(--sans);color:var(--body);max-width:60ch}
/* Two-up, the same 0.86/1.14 split as the .pv blocks on BD and Beyond BD:
   setup on the left, the point on the right. */
.bp-open{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,6vw,96px);align-items:start}
.bp-open .bp-lead{max-width:none}
.bp-open .bp-pre{margin-top:clamp(16px,1.8vw,22px)}
.bp-say{font:500 clamp(23px,2.7vw,34px)/1.28 var(--sans);color:var(--ink);letter-spacing:-.02em}
.bp-say em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--orange);font-size:1.06em;line-height:1}
.bp-turn{margin-top:clamp(44px,5vw,70px);font:500 clamp(23px,2.7vw,34px)/1.28 var(--sans);color:var(--ink);letter-spacing:-.02em}
.bp-qs{margin-top:clamp(30px,3.4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px) clamp(32px,4vw,64px);list-style:none}
.bp-qs li{font:italic 500 clamp(18px,1.75vw,23px)/1.42 var(--serif);color:var(--ink);border-left:3px solid var(--orange);padding-left:20px}

/* The facts block. This sentence is the head of it, so it is sized as a head
   — below the pivot above it, above the body copy under it. */
.bp-isit{margin-top:clamp(50px,5.6vw,76px);border-top:1px solid var(--rule);padding-top:clamp(30px,3.4vw,42px)}
.bp-def{font:600 clamp(22px,2.1vw,28px)/1.3 var(--sans);letter-spacing:-.02em;color:var(--ink);max-width:none}
.bp-def em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--orange);font-size:1.06em;line-height:1}
/* Five ink boxes. They rhyme with the session cards in the black section
   below, so the contrast reads as a setup rather than a competing band.
   Cost sits last on purpose — format, length, timing, flexibility, and then
   the fact that it costs nothing. */
.bp-facts{margin-top:clamp(28px,3.2vw,40px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,14px);background:none}
.bp-facts div{background:var(--ink);border-radius:8px;padding:clamp(18px,1.9vw,24px) clamp(18px,1.9vw,22px) clamp(20px,2.1vw,26px)}
.bp-facts dt{font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.bp-facts dd{font:500 clamp(17.5px,1.55vw,20px)/1.35 var(--sans);color:var(--cream)}
.bp-who{margin-top:clamp(28px,3.2vw,42px)}
.bp-soft{margin-top:clamp(22px,2.6vw,32px)}
.bp-soft .hl{color:var(--orange);font-weight:500}
.bp-soft a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--orange);padding-bottom:2px;white-space:nowrap}

/* ================= 03 THE SESSIONS ================= */
.bp-sess{background:var(--ink);color:var(--cream)}
.bp-sess .in{max-width:1200px;margin:0 auto;padding:clamp(56px,5.8vw,78px) 48px clamp(64px,6.6vw,88px)}
.bp-sess .bp-eyebrow{margin-bottom:clamp(18px,2vw,26px)}
.bp-shd{font:600 clamp(27px,3.3vw,46px)/1.15 var(--sans);letter-spacing:-.028em;max-width:22ch}

/* 2 + 2 + 1. Session 05 runs full width because it genuinely is the odd one
   out — the session about what to buy rather than what to teach.
   align-items:start, deliberately: with stretch, opening one card made its
   row partner's empty charcoal box grow to match, which reads as a bug. The
   cost is that two cards in a row that are both open end ~26px apart. That
   is the better trade. */
.bp-grid{margin-top:clamp(44px,5vw,70px);display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.bp-card{border-top:2px solid var(--orange);background:#1A1A19;border-radius:0 0 4px 4px}
.bp-card:last-child{grid-column:1/-1;background:#201E1C}
.bp-head{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:clamp(26px,2.8vw,36px) clamp(26px,2.8vw,36px) 0;display:block}
.bp-head .n{display:block;font:italic 600 clamp(26px,2.8vw,36px)/1 var(--serif);color:var(--orange)}
/* The wrap widths are tuned so every title fits two lines and every hook
   fits two lines. Each then reserves exactly two, so all five collapsed
   boxes are identical. Changing a title or hook's length can break that —
   recheck the line counts if you edit this copy. */
.bp-head .t{display:block;margin-top:clamp(16px,1.8vw,22px);font:600 clamp(19px,1.9vw,26px)/1.22 var(--sans);letter-spacing:-.02em;color:var(--cream);max-width:28ch;min-height:calc(1.22em * 2)}
.bp-head .h{display:block;margin-top:12px;font:italic 500 clamp(16.5px,1.5vw,19px)/1.42 var(--serif);color:var(--orange);max-width:46ch;min-height:calc(1.42em * 2)}
.bp-head .more{margin-top:22px;padding-bottom:clamp(26px,2.8vw,36px);font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#CFC8BB;display:flex;align-items:center;gap:8px}
.bp-head .more i{display:block;width:9px;height:9px;border-right:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.bp-head[aria-expanded="true"] .more i{transform:rotate(225deg) translateY(-2px)}
.bp-full{display:none;padding:0 clamp(26px,2.8vw,36px) clamp(28px,3vw,38px)}
.bp-head[aria-expanded="true"] + .bp-full{display:block}
.bp-full .inner{border-top:1px solid var(--darkrule);padding-top:22px}
.bp-full p{font:400 clamp(15.5px,1.3vw,17px)/1.7 var(--sans);color:#D4CDC0;break-inside:avoid}
.bp-full p + p{margin-top:14px}
.bp-full p.q{color:var(--cream);font-weight:500}
.bp-full strong{color:var(--cream);font-weight:600}
.bp-two{column-count:2;column-gap:clamp(32px,4vw,64px)}

/* ================= 04 THE INVITATION TO JOIN ================= */
.bp-join{background:var(--orange);color:var(--ink)}
.bp-join .in{max-width:1200px;margin:0 auto;padding:clamp(52px,5.4vw,72px) 48px clamp(56px,5.8vw,78px)}
.bp-join h2{font:600 clamp(29px,3.6vw,50px)/1.14 var(--sans);letter-spacing:-.028em;max-width:26ch}
.bp-join h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:#fff;font-size:1.06em;line-height:1}
.bp-join .intro{margin-top:20px;font:400 clamp(17px,1.45vw,19px)/1.6 var(--sans);max-width:46ch}

/* interest form — Netlify Forms, name="bd-for-pd-interest" */
.bp-form{margin-top:clamp(28px,3.2vw,38px);display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;max-width:700px}
.bp-fld{flex:1 1 210px}
.bp-fld label{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.bp-fld input{width:100%;font:400 16px var(--sans);color:var(--ink);background:var(--cream);border:1px solid rgba(18,18,18,.28);border-radius:6px;padding:14px}
.bp-fld input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.bp-form button{flex:0 0 auto;background:var(--ink);color:#fff;border:0;border-radius:6px;font:500 16px var(--sans);padding:15px 26px;cursor:pointer;transition:background-color .2s}
.bp-form button:hover{background:#000}
.bp-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.bp-thanks{display:none;margin-top:clamp(28px,3.2vw,38px);font:500 clamp(18px,1.6vw,21px)/1.5 var(--sans);color:var(--ink);max-width:44ch}
.bp-join.sent .bp-form{display:none}
.bp-join.sent .bp-thanks{display:block}
.bp-cred{margin-top:clamp(44px,5vw,66px);border-top:1px solid rgba(18,18,18,.22);padding-top:22px;font:400 clamp(15px,1.3vw,16.5px)/1.6 var(--sans);max-width:54ch}

/* ---------- narrower desktop ---------- */
@media (max-width:900px){
  .bp-two{column-count:1}
  /* five across gets cramped here; 3 + 2 reads better than five slivers */
  .bp-facts{grid-template-columns:repeat(3,1fr)}
  .bp-facts div:nth-child(4){grid-column:1/3}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .bp-hero .in{padding:calc(var(--hh) + 32px) 20px 52px}
  .bp-hd{font-size:34px;line-height:1.2;letter-spacing:-.03em}
  .bp-inv .in{padding:40px 20px 46px}
  .bp-body,.bp-lead,.bp-say,.bp-who{max-width:none}
  .bp-def{font-size:22px;max-width:none}
  .bp-open{display:block}
  .bp-say{margin-top:30px}
  .bp-qs{grid-template-columns:1fr}
  .bp-facts{grid-template-columns:1fr 1fr;gap:10px}
  .bp-facts div{padding:16px 16px 18px}
  .bp-facts div:nth-child(4){grid-column:auto}
  /* Cost goes full width on a phone rather than sitting alone in a half box */
  .bp-facts div:last-child{grid-column:1/-1}
  .bp-soft a{white-space:normal}
  .bp-sess .in{padding:46px 20px 56px}
  .bp-shd{max-width:none}
  .bp-grid{grid-template-columns:1fr}
  .bp-card:last-child{grid-column:span 1}
  /* single column on a phone, so no need to reserve matching line counts */
  .bp-head .t,.bp-head .h{max-width:none;min-height:0}
  .bp-join .in{padding:44px 20px 48px}
  .bp-join h2,.bp-join .intro,.bp-cred,.bp-thanks{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .bp-head .more i{transition:none}
}