/* Bangka & Belitung history page — additive stylesheet for Simpur Talang */
:root {
  --bb-ink: #20312d;
  --bb-muted: #65716c;
  --bb-paper: #f5f0e5;
  --bb-line: rgba(32,49,45,.18);
  --bb-accent: #9a6b2f;
  --bb-green: #294d43;
  --bb-white: #fff;
}
* { box-sizing: border-box; }
body.bb-page { margin:0; color:var(--bb-ink); background:#fbfaf6; font-family:Arial, Helvetica, sans-serif; line-height:1.7; }
.bb-wrap { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.bb-narrow { max-width:820px; }
.bb-hero { padding:clamp(90px,13vw,170px) 0 75px; background:linear-gradient(135deg,#173b34,#31574c); color:#fff; }
.bb-kicker { margin:0 0 14px; text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; }
.bb-hero .bb-kicker { color:#d9c39e; }
.bb-hero h1, .bb-section h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.bb-hero h1 { max-width:950px; margin:0; font-size:clamp(3rem,8vw,7.5rem); line-height:.94; letter-spacing:-.035em; }
.bb-lead { max-width:720px; margin:32px 0 28px; font-size:clamp(1.05rem,2vw,1.35rem); color:rgba(255,255,255,.82); }
.bb-back, .bb-button { display:inline-block; text-decoration:none; font-weight:700; }
.bb-back { color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }
.bb-section { padding:clamp(65px,9vw,120px) 0; border-bottom:1px solid var(--bb-line); }
.bb-intro { padding-bottom:70px; }
.bb-dropcap:first-letter { float:left; margin:.11em .1em 0 0; font:4.5rem/.72 Georgia,serif; color:var(--bb-accent); }
.bb-section h2 { margin:0 0 25px; font-size:clamp(2.2rem,5vw,4.6rem); line-height:1.04; color:var(--bb-green); }
.bb-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,8vw,110px); align-items:start; }
.bb-copy p:first-child { margin-top:0; }
.bb-paper { background:var(--bb-paper); }
.bb-timeline-section { background:#fff; }
.bb-timeline { position:relative; margin-top:55px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 55px; }
.bb-timeline:before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--bb-line); }
.bb-timeline article { position:relative; padding:0 0 45px; }
.bb-timeline article:nth-child(even) { margin-top:55px; }
.bb-timeline span { color:var(--bb-accent); font-weight:800; letter-spacing:.05em; }
.bb-timeline h3 { margin:4px 0 8px; font:500 1.65rem/1.2 Georgia,serif; color:var(--bb-green); }
.bb-timeline p { margin:0; color:var(--bb-muted); }
.bb-lineage { margin:70px auto 18px; max-width:850px; display:flex; align-items:center; justify-content:center; gap:20px; text-align:center; }
.bb-lineage div { flex:1; padding:25px 18px; border:1px solid var(--bb-line); background:#fff; }
.bb-lineage strong, .bb-lineage small { display:block; }
.bb-lineage strong { font:500 1.35rem Georgia,serif; color:var(--bb-green); }
.bb-lineage small { margin-top:8px; color:var(--bb-muted); line-height:1.4; }
.bb-lineage b { color:var(--bb-accent); white-space:nowrap; }
.bb-note { color:var(--bb-muted); font-size:.9rem; font-style:italic; }
blockquote { margin:38px 0; padding:25px 30px; border-left:3px solid var(--bb-accent); background:rgba(255,255,255,.58); font:italic 1.3rem/1.55 Georgia,serif; }
blockquote cite { display:block; margin-top:12px; font:normal .75rem/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--bb-muted); }
.bb-bridge { background:var(--bb-green); color:#eaf0ed; }
.bb-bridge h2 { color:#fff; }
.bb-bridge .bb-kicker { color:#d9c39e; }
.bb-button { margin-top:20px; padding:13px 18px; border:1px solid rgba(255,255,255,.5); color:#fff; }
.bb-button:hover { background:#fff; color:var(--bb-green); }
.bb-source { background:#f0eee7; }
.bb-footer { padding:32px 0; background:#142a25; color:rgba(255,255,255,.72); }
.bb-footer .bb-wrap { display:flex; justify-content:space-between; gap:20px; }
.bb-footer p { margin:0; }
.bb-footer a { color:#fff; }
@media (max-width:800px) {
  .bb-grid, .bb-timeline { grid-template-columns:1fr; }
  .bb-timeline:before { left:0; }
  .bb-timeline article, .bb-timeline article:nth-child(even) { margin:0; padding:0 0 38px 25px; }
  .bb-lineage { flex-direction:column; }
  .bb-lineage div { width:100%; }
  .bb-lineage b { transform:none; }
}
@media (max-width:520px) {
  .bb-wrap { width:min(100% - 28px,1180px); }
  .bb-hero { padding-top:75px; }
  .bb-footer .bb-wrap { display:block; }
  .bb-footer a { display:inline-block; margin-top:8px; }
}