/* blog.css - the Celebrate blog (hub, posts, author page). Loaded ONLY by the pages
   build-blog.cjs writes, after styles.css, so no other page's cache-buster moves.
   Uses styles.css tokens only (--ivory, --ink, --mut, --bronze*, --line, --serif, --sans). */

.bsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- cards (hub, related, author list) ---- */
.bhub{padding:48px 0 96px}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .18s ease,transform .18s ease}
.bcard:hover{border-color:var(--bronze);transform:translateY(-2px)}
.bcard-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ivory-deep)}
.bcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.bcard-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.bcard-meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.bcard-title{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.18;color:var(--ink)}
.bcard:hover .bcard-title{color:var(--bronze-deep)}
.bcard-desc{font-size:16px;line-height:1.6;color:var(--mut)}

/* ---- post ---- */
.bp-head{padding-top:56px;text-align:center}
.bp-head .label{display:block;margin-bottom:16px}
.bp-head h1{font-size:clamp(36px,5vw,62px);max-width:22ch;margin:0 auto;text-wrap:balance}
.bp-byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin:28px 0 36px}
.bp-by{display:inline-flex;align-items:center;gap:12px;text-align:left}
.bp-by:hover .bp-name{color:var(--bronze-deep)}
.bp-name{display:block;font-weight:600;color:var(--ink)}
.bp-role,.bp-date{display:block;font-size:14px;color:var(--mut)}
.bp-avatar{border-radius:50%;flex:none;object-fit:cover}
.bp-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--ivory);font-family:var(--serif);font-size:17px;letter-spacing:.04em}
.bp-hero img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}
.bp-grid{display:grid;grid-template-columns:minmax(0,720px) 300px;justify-content:space-between;gap:64px;padding-top:56px;padding-bottom:88px}
.bp-body{min-width:0}
.bp-body>h2{font-size:clamp(28px,3vw,38px);margin:52px 0 18px}
.bp-body>h3{font-size:clamp(21px,2vw,25px);margin:36px 0 12px}
.bp-body>p,.bp-body>ul,.bp-body>ol{margin-bottom:22px}
.bp-body>ul,.bp-body>ol{padding-left:1.3em}
.bp-body li{margin-bottom:8px}
.bp-body a{color:var(--bronze-deep);border-bottom:1px solid rgba(200,30,89,.35)}
.bp-body a:hover{border-bottom-color:var(--bronze-deep)}
.bp-body table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:16px;display:block;overflow-x:auto}
.bp-body th,.bp-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.bp-body th{background:var(--ivory-deep);font-weight:600}
.bp-fig{margin:32px 0}
.bp-fig img{display:block;width:100%;height:auto}
.bp-author{display:flex;gap:20px;align-items:flex-start;margin-top:56px;padding:28px;background:var(--ivory-deep);border-left:3px solid var(--bronze)}
.bp-author .label{display:block;margin-bottom:6px}
.bp-author p{margin-bottom:10px}
.bp-author .bp-name{display:inline;border:0;color:var(--ink)}
.bp-author .bp-more{font-size:15px;font-weight:600}
.bp-rail{position:sticky;top:120px;align-self:start}
.bp-rail .label{display:block;margin-bottom:16px}
.bp-rail ol{list-style:none;counter-reset:r;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.bp-rail li{counter-increment:r;border-bottom:1px solid var(--line)}
.bp-rail li a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:14px 0;font-size:16px;line-height:1.45}
.bp-rail li a::before{content:counter(r);font-family:var(--serif);color:var(--bronze-deep);font-size:18px}
.bp-rail li a:hover{color:var(--bronze-deep)}
.brel{background:var(--ivory-deep);padding:88px 0}

/* ---- author page ---- */
.bauth-head .label{display:block;margin-bottom:12px}
.bauth-head .lead{margin:18px auto 0}
.bauth-photo{margin:0 auto 24px;width:160px;height:160px}
.bauth-photo img,.bauth-initials{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block}
.bauth-initials{font-size:48px}
.bauth-links{margin-top:18px;font-size:16px;color:var(--mut)}
.bauth-links a{color:var(--bronze-deep);border-bottom:1px solid rgba(200,30,89,.35)}
.bauth{padding:56px 0 24px}
.bauth-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.bauth-bio p{margin-bottom:20px}
.bauth-facts{margin:0;border-top:1px solid var(--line)}
.bauth-facts div{padding:14px 0;border-bottom:1px solid var(--line)}
.bauth-facts dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bauth-facts dd{margin:4px 0 0;font-size:17px}

/* ---- breadcrumbs (blog only) ----
   styles.css draws the "/" as li+li::before, so the separator belongs to the NEXT crumb and a
   wrap puts "/" at the start of a line on a phone. Here it is the PREVIOUS crumb's ::after, each
   crumb is one unbreakable unit, and on a phone the row stays one line with the last crumb
   truncated by an ellipsis (its full text is in the H1 right below, and in title=""). */
.bcrumbs li+li::before{content:none}
.bcrumbs li{white-space:nowrap}
.bcrumbs li:not(:last-child)::after{content:"/";margin-left:10px;color:rgba(34,29,22,.32)}
@media (max-width:700px){
  .bcrumbs ol{flex-wrap:nowrap;max-width:100%}
  .bcrumbs li{flex:none}
  .bcrumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* ---- hub pager ---- every target is at least 44x44 */
.bpager{margin-top:56px}
.bpager ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0;padding:0}
.bpager a,.bpager span.bpager-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);background:#fff;font-size:16px;font-weight:600;color:var(--ink)}
.bpager a:hover{border-color:var(--bronze);color:var(--bronze-deep)}
.bpager a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.bpager .bpager-off{color:var(--mut);opacity:.5}

@media (max-width:1100px){
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .bp-rail{position:static}
  .bauth-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:700px){
  .bgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  .bhub{padding:32px 0 64px}
  .bp-head{padding-top:36px}
  .bp-grid{padding-top:36px;padding-bottom:64px}
  .bp-hero{padding-left:0;padding-right:0}
  .bp-author{flex-direction:column;padding:22px}
  .brel{padding:64px 0}
  .bcard-title{font-size:22px}
}