// =====================================================================
// PAGE LAYOUTS — CONTENT (News, Cooperstown, About) · 2 options each
// =====================================================================
const { hv: H, BNav: Nav, FooterBlock: Foot, BrandBar: Brand, PageHead: Head } = window;

const pkSt = {
  wrap: { maxWidth:1200, margin:'0 auto', padding:'56px 40px 80px' },
  meta: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:12 },
  cat: { color:'var(--bb-red)', fontWeight:700 },
  card: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-sm)' },
  cardBody: { padding:'20px 22px 26px' },
  cardTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:26, lineHeight:0.98, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 10px' },
  excerpt: { fontSize:15, lineHeight:1.6, color:'var(--fg-2)', margin:0 },
  blockHd: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 18px' },
};

// ---------- NEWS ----------
const goArticle = (slug) => { location.href = 'article.html?slug=' + slug; };

const NewsMag = ({ data }) => {
  const [lead, ...rest] = data.news;
  return (
    <div style={H.root}>
      <Nav />
      <Head eyebrow="From the Dugout" title="News & Recaps" sub="Game recaps, club announcements, and the road to Cooperstown." />
      <div style={pkSt.wrap}>
        {/* lead */}
        <div onClick={()=>goArticle(lead.slug)} style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:36, alignItems:'center', marginBottom:48, cursor:'pointer' }}>
          <div style={{ height:360, borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-md)' }}>
            <image-slot id={`news-photo-${lead.slug}`} src={lead.photo} shape="rect" placeholder="Lead story photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
          </div>
          <div>
            <div style={pkSt.meta}><span style={pkSt.cat}>{lead.cat}</span> · {lead.date}, 2026</div>
            <h2 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:46, lineHeight:0.92, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 16px' }}>{lead.title}</h2>
            <p style={{ fontSize:17, lineHeight:1.65, color:'var(--fg-2)', margin:'0 0 20px' }}>{lead.excerpt}</p>
            <span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:14, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', cursor:'pointer' }}>Read more →</span>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22 }}>
          {rest.map((n,i)=>(
            <article key={n.slug||i} onClick={()=>goArticle(n.slug)} style={{ ...pkSt.card, cursor:'pointer' }}>
              <image-slot id={`news-photo-${n.slug||i}`} src={n.photo} shape="rect" placeholder="Photo" style={{ width:'100%', height:170, display:'block' }}></image-slot>
              <div style={pkSt.cardBody}>
                <div style={pkSt.meta}><span style={pkSt.cat}>{n.cat}</span> · {n.date}, 2026</div>
                <h3 style={pkSt.cardTitle}>{n.title}</h3>
                <p style={pkSt.excerpt}>{n.excerpt}</p>
                <span style={{ display:'inline-block', marginTop:14, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)' }}>Read more →</span>
              </div>
            </article>
          ))}
        </div>
      </div>
      <Brand /><Foot />
    </div>
  );
};

// ---------- NEWS ARTICLE (sub-page) ----------
const NewsArticle = ({ data, slug }) => {
  const item = data.news.find(n => n.slug === slug) || data.news[0];
  const more = data.news.filter(n => n.slug !== item.slug).slice(0, 3);
  return (
    <div style={H.root}>
      <Nav />
      <div style={{ maxWidth:820, margin:'0 auto', padding:'52px 40px 0' }}>
        <span onClick={()=>{ location.href = 'news.html'; }} style={{ display:'inline-block', marginBottom:22, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', cursor:'pointer' }}>← All News &amp; Recaps</span>
        <div style={pkSt.meta}><span style={pkSt.cat}>{item.cat}</span> · {item.date}, 2026</div>
        <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:58, lineHeight:0.9, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 4px' }}>{item.title}</h1>
      </div>
      <div style={{ maxWidth:1040, margin:'28px auto 0', padding:'0 40px' }}>
        <div style={{ height:460, borderRadius:14, overflow:'hidden', boxShadow:'var(--shadow-md)' }}>
          <image-slot id={`news-photo-${item.slug}`} src={item.photo} shape="rect" placeholder="Article photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
        </div>
      </div>
      <article style={{ maxWidth:760, margin:'0 auto', padding:'44px 40px 8px' }}>
        {(item.body || [item.excerpt]).map((p,i)=>(
          <p key={i} style={{ fontSize:19, lineHeight:1.75, color:'var(--fg-1)', margin:'0 0 24px' }}>{p}</p>
        ))}
        {item.cta && (
          <a href={item.cta.href} target="_blank" rel="noopener noreferrer" style={{ ...H.btnRed, display:'inline-flex', alignItems:'center', textDecoration:'none', marginTop:8, marginBottom:8 }}>{item.cta.label}</a>
        )}
      </article>
      {/* more from the dugout */}
      {more.length > 0 && (
        <div style={{ ...pkSt.wrap, borderTop:'1px solid var(--border-1)', marginTop:32 }}>
          <h2 style={pkSt.blockHd}>More From the Dugout</h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22 }}>
            {more.map((n,i)=>(
              <article key={n.slug||i} onClick={()=>goArticle(n.slug)} style={{ ...pkSt.card, cursor:'pointer' }}>
                <image-slot id={`news-photo-${n.slug||i}`} src={n.photo} shape="rect" placeholder="Photo" style={{ width:'100%', height:170, display:'block' }}></image-slot>
                <div style={pkSt.cardBody}>
                  <div style={pkSt.meta}><span style={pkSt.cat}>{n.cat}</span> · {n.date}, 2026</div>
                  <h3 style={pkSt.cardTitle}>{n.title}</h3>
                  <p style={pkSt.excerpt}>{n.excerpt}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      )}
      <Brand /><Foot />
    </div>
  );
};

const NewsList = ({ data }) => (
  <div style={H.root}>
    <Nav />
    <Head eyebrow="From the Dugout" title="News & Recaps" sub="The latest from the club, newest first." />
    <div style={{ ...pkSt.wrap, display:'grid', gridTemplateColumns:'1.7fr 1fr', gap:40, alignItems:'start' }}>
      <div>
        {data.news.concat(data.news).slice(0,6).map((n,i)=>(
          <article key={i} style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:22, padding:'24px 0', borderBottom:'1px solid var(--border-1)' }}>
            <div style={{ height:130, borderRadius:10, overflow:'hidden' }}>
              <image-slot id={`news-l-${i}`} shape="rect" placeholder="Photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
            </div>
            <div>
              <div style={pkSt.meta}><span style={pkSt.cat}>{n.cat}</span> · {n.date}</div>
              <h3 style={{ ...pkSt.cardTitle, fontSize:28 }}>{n.title}</h3>
              <p style={pkSt.excerpt}>{n.excerpt}</p>
            </div>
          </article>
        ))}
      </div>
      <aside>
        <div style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'24px', boxShadow:'var(--shadow-sm)', marginBottom:20 }}>
          <h3 style={pkSt.blockHd}>Categories</h3>
          {['Recaps','Cooperstown','Announcements','Tryouts','Tournaments'].map((c,i)=>(
            <div key={c} style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderTop: i?'1px solid var(--border-1)':'none', color:'var(--bb-navy)', fontWeight:600 }}>
              <span>{c}</span><span style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--fg-3)' }}>{[12,6,9,3,5][i]}</span>
            </div>
          ))}
        </div>
        <div style={{ background:'var(--bb-red)', color:'#fff', borderRadius:12, padding:'26px' }}>
          <div style={{ ...H.eyebrow, color:'#fff', marginBottom:10 }}>★ Cooperstown 2026</div>
          <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, lineHeight:0.92, textTransform:'uppercase', marginBottom:14 }}>Help send the 12U.</div>
          <button style={{ ...H.coopBtn, height:44, fontSize:14 }}>Donate ▸</button>
        </div>
      </aside>
    </div>
    <Brand /><Foot />
  </div>
);

// ---------- COOPERSTOWN ----------
const CoopCampaign = ({ data }) => (
  <div style={H.root}>
    <Nav />
    <Head eyebrow="★ Cooperstown 2026" title="Send 'Em to the Park" sub="This summer the 12U Blue squad makes the trip to Cooperstown Dreams Park. Help us get them there." />
    {/* progress band */}
    <section style={{ background:'var(--bb-red)', color:'#fff' }}>
      <div style={{ maxWidth:1200, margin:'0 auto', padding:'48px 40px', display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center' }}>
        <div>
          <div style={{ display:'flex', justifyContent:'space-between', fontFamily:"'JetBrains Mono', monospace", fontSize:15, marginBottom:10 }}><span>{data.coop.raised} raised</span><span>Goal {data.coop.goal}</span></div>
          <div style={{ height:16, borderRadius:8, background:'rgba(0,0,0,0.22)', overflow:'hidden', marginBottom:16 }}><div style={{ height:'100%', width:data.coop.pct, background:'#fff', borderRadius:8 }}></div></div>
          <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:14, color:'rgba(255,255,255,0.85)' }}>{data.coop.days} days left · 41% of the way there</div>
        </div>
        <div style={{ display:'flex', gap:12, justifyContent:'flex-end' }}>
          <button style={H.coopBtn}>Donate Now ▸</button>
          <button style={{ ...H.btnGhostLight, height:52 }}>Share</button>
        </div>
      </div>
    </section>
    <div style={pkSt.wrap}>
      <h2 style={pkSt.blockHd}>Where Your Gift Goes</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:48 }}>
        {[['Travel','Flights & ground for 13 players, coaches, and staff to Cooperstown, NY.'],['Lodging','A week in the Dreams Park barracks — meals, housing, and team space.'],['Entry & Gear','Tournament entry, custom trading pins, and team uniforms for the trip.']].map(([t,d],i)=>(
          <div key={i} style={{ ...pkSt.card, borderTop:'5px solid var(--bb-red)' }}>
            <div style={pkSt.cardBody}>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:28, textTransform:'uppercase', color:'var(--bb-navy)', marginBottom:10 }}>{t}</div>
              <p style={pkSt.excerpt}>{d}</p>
            </div>
          </div>
        ))}
      </div>
      <h2 style={pkSt.blockHd}>Ways to Give</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:48 }}>
        {[['$25','Pin Pack'],['$100','Game Day'],['$250','Travel Day'],['$500','Team Sponsor']].map(([amt,label],i)=>(
          <div key={i} style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'24px 20px', textAlign:'center', boxShadow:'var(--shadow-sm)' }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:44, color:'var(--bb-navy)', lineHeight:1 }}>{amt}</div>
            <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--fg-3)', margin:'8px 0 16px' }}>{label}</div>
            <button style={{ ...hvBtnRedSmall() }}>Give {amt}</button>
          </div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14 }}>
        {[0,1,2].map(i=>(<div key={i} style={{ height:200, borderRadius:12, overflow:'hidden' }}><image-slot id={`coop-g-${i}`} shape="rect" placeholder="Team photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot></div>))}
      </div>
    </div>
    <Brand /><Foot />
  </div>
);
function hvBtnRedSmall() { return { background:'var(--bb-red)', color:'#fff', border:0, height:42, padding:'0 18px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:14, letterSpacing:'0.04em', textTransform:'uppercase', cursor:'pointer', width:'100%' }; }

const CoopStory = ({ data }) => (
  <div style={H.root}>
    <Nav />
    <section style={{ position:'relative', height:540, overflow:'hidden', background:'#1a2440' }}>
      <image-slot id="coop-hero" src="assets/photos/cooperstown.jpg" shape="rect" placeholder="Cooperstown hero photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(18,28,54,0.5), rgba(18,28,54,0.9))', pointerEvents:'none' }}></div>
      <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding:'0 40px', height:'100%', boxSizing:'border-box', display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:76, color:'#fff', pointerEvents:'none' }}>
        <div style={{ ...H.eyebrow, color:'var(--bb-red-bright)', marginBottom:14 }}>★ Cooperstown 2026</div>
        <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:84, lineHeight:0.84, textTransform:'uppercase', margin:0, color:'#fff' }}>The Dream<br/>Every Kid Chases.</h1>
      </div>
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:6, background:'var(--bb-red)', pointerEvents:'none' }}></div>
    </section>
    <div style={{ maxWidth:1200, margin:'0 auto', padding:'64px 40px 80px', display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:56, alignItems:'start' }}>
      <article>
        <p style={{ fontSize:22, lineHeight:1.6, color:'var(--bb-navy)', fontWeight:600, margin:'0 0 24px' }}>Every summer, 12-year-old ballplayers from across the country converge on Cooperstown, New York — the birthplace of baseball — for a week at Dreams Park.</p>
        <p style={{ fontSize:17, lineHeight:1.75, color:'var(--fg-2)', margin:'0 0 20px' }}>For our 12U Blue squad, it's the trip they've pointed at since T-ball: eight games in a week, opening ceremonies under the lights, pin trading with teams from every state, and a skills competition that lights up the whole complex.</p>
        <blockquote style={{ borderLeft:'5px solid var(--bb-red)', paddingLeft:24, margin:'32px 0', fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:34, lineHeight:1.05, textTransform:'uppercase', color:'var(--bb-navy)' }}>"It's the best week of their twelve-year-old lives. We just have to get them there."</blockquote>
        <p style={{ fontSize:17, lineHeight:1.75, color:'var(--fg-2)', margin:0 }}>Travel, lodging, tournament entry, and gear add up fast. Every dollar raised goes directly to the players — and it's all 100% tax-deductible, so no family has to sit out the trip of a lifetime over cost.</p>
      </article>
      <aside style={{ position:'sticky', top:90 }}>
        <div style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:14, padding:'30px' }}>
          <div style={{ ...H.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>How to Give</div>
          <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:32, lineHeight:0.92, textTransform:'uppercase', marginBottom:14 }}>Get Them<br/>to the Park.</div>
          <p style={{ fontSize:14, lineHeight:1.6, color:'rgba(255,255,255,0.8)', margin:'0 0 20px' }}>Donate directly through our team GoFundMe — every dollar goes straight to the players.</p>
          <a href={data.gofundme} target="_blank" rel="noopener noreferrer" style={{ ...H.coopBtn, width:'100%', marginBottom:20, display:'flex', alignItems:'center', justifyContent:'center', textDecoration:'none', boxSizing:'border-box' }}>Donate via GoFundMe ▸</a>
          <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.04em', color:'rgba(255,255,255,0.6)', borderTop:'1px solid rgba(255,255,255,0.15)', paddingTop:16 }}>100% tax-deductible · Tax ID 47-4275984</div>
        </div>
      </aside>
    </div>
    <Brand /><Foot />
  </div>
);

// ---------- ABOUT ----------
const AboutStory = ({ data }) => (
  <div style={H.root}>
    <Nav />
    <Head eyebrow="Belmont, California · Est. 2008" title="About the Club" sub="Belmont's summer travel program since 2008 — built to make Little League stronger and to be the next step for kids who want more of the game." />
    <div style={pkSt.wrap}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center', marginBottom:56 }}>
        <div style={{ height:380, borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-md)' }}>{(typeof window!=='undefined'&&window.SLOT_PHOTOS&&window.SLOT_PHOTOS['about-1'])?<img src={window.SLOT_PHOTOS['about-1']} alt="Belmont Blasters" style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center', display:'block' }} />:<image-slot id="about-1" shape="rect" placeholder="Team photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>}</div>
        <div>
          <h2 style={{ ...pkSt.blockHd, fontSize:40 }}>Our Mission</h2>
          <p style={{ fontSize:18, lineHeight:1.7, color:'var(--fg-2)', margin:'0 0 16px' }}>The Blasters started in 2008 with one purpose: make Belmont/Redwood Shores Little League stronger. Every Blaster plays BRSLL in the spring — our season begins only once All-Star play wraps.</p>
          <p style={{ fontSize:18, lineHeight:1.7, color:'var(--fg-2)', margin:0 }}>Little League itself has cited the model as ideal for how leagues and tournament programs work together. By age 12, our teams compete at the AAA/Majors level and have made deep runs at Cooperstown Dreams Park.</p>
        </div>
      </div>
      <h2 style={pkSt.blockHd}>What We Stand For</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginBottom:56 }}>
        {[['Hard Work','Reps don\u2019t lie. We earn everything on the field.'],['Team First','Pick up the glove, cover the bag, take the extra base.'],['Character','How you carry yourself matters as much as the box score.'],['Fun','It\u2019s still a game. We play loud and play free.']].map(([t,d],i)=>(
          <div key={i} style={{ ...pkSt.card, borderTop:`5px solid ${i%2?'var(--bb-red)':'var(--bb-navy)'}` }}><div style={pkSt.cardBody}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:24, textTransform:'uppercase', color:'var(--bb-navy)', marginBottom:8 }}>{t}</div><p style={pkSt.excerpt}>{d}</p></div></div>
        ))}
      </div>
      <h2 style={pkSt.blockHd}>Coaching Staff</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }}>
        {data.teamsFull.slice(0,4).map((t,i)=>(
          <div key={i} style={pkSt.card}>
            <div style={{ height:200, background:'#eceff4' }}>{(typeof window!=='undefined'&&window.SLOT_PHOTOS&&window.SLOT_PHOTOS[`coach-${i}`])?<img src={window.SLOT_PHOTOS[`coach-${i}`]} alt={`Coach ${t.coach}`} style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 22%', display:'block' }} />:<image-slot id={`coach-${i}`} shape="rect" placeholder="Coach photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>}</div>
            <div style={{ ...pkSt.cardBody, padding:'16px 18px 20px' }}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:22, textTransform:'uppercase', color:'var(--bb-navy)' }}>Coach {t.coach}</div><div style={pkSt.meta} >{t.age} {t.color==='red'?'Red':'Blue'}</div></div>
          </div>
        ))}
      </div>
    </div>
    <Brand /><Foot />
  </div>
);

const AboutTimeline = ({ data }) => (
  <div style={H.root}>
    <Nav />
    <Head eyebrow="Belmont, California" title="Our Story" sub="From a handful of Belmont kids to a seven-squad club on the road to Cooperstown." />
    <div style={{ maxWidth:1200, margin:'0 auto', padding:'56px 40px 40px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginBottom:56 }}>
        {[['2018','Founded'],['7','Squads, 7U–12U'],['94','Wins in 2025'],['8','Tournament Titles']].map(([v,l],i)=>(
          <div key={i} style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:12, padding:'26px 22px' }}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:52, lineHeight:1 }}>{v}</div><div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--bb-red-bright)', marginTop:8 }}>{l}</div></div>
        ))}
      </div>
    </div>
    <div style={{ maxWidth:900, margin:'0 auto', padding:'0 40px 80px' }}>
      {[['2018','It starts in a backyard','A handful of Belmont dads put together a 7U team for kids who wanted more reps than rec ball offered.'],['2021','Going travel','Three squads now, playing tournaments across NorCal. The first banners go up.'],['2023','First hardware','12U Blue takes the NCS Veterans Day Classic — the club\u2019s breakout season.'],['2026','Cooperstown bound','The 12U squad earns its trip to Dreams Park. Seven squads, one club, one goal.']].map(([yr,t,d],i,arr)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'120px 1fr', gap:28, paddingBottom: i<arr.length-1?40:0 }}>
          <div style={{ textAlign:'right' }}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:40, color:'var(--bb-red)', lineHeight:1 }}>{yr}</div></div>
          <div style={{ borderLeft:'3px solid var(--bb-navy)', paddingLeft:28, position:'relative', paddingBottom: i<arr.length-1?8:0 }}>
            <div style={{ position:'absolute', left:-9, top:4, width:15, height:15, borderRadius:'50%', background:'var(--bb-red)', border:'3px solid var(--bb-field)' }}></div>
            <h3 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:28, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 8px' }}>{t}</h3>
            <p style={{ fontSize:16, lineHeight:1.6, color:'var(--fg-2)', margin:0 }}>{d}</p>
          </div>
        </div>
      ))}
    </div>
    <Brand /><Foot />
  </div>
);

Object.assign(window, { NewsMag, NewsArticle, NewsList, CoopCampaign, CoopStory, AboutStory, AboutTimeline });
