/* =====================================================================
   Blog post pages (site/blog/<slug>.html) and site/blog/index.html.
   Generated by tools/blog-studio/generate.js from post-template.html.
   Same language as the other pages: Bebas Neue display, Barlow Condensed
   body, black/white/#eaeaea gray, one green accent, 1rem == 1 artboard px
   (1366 desktop with 120rem margins, 430 phones with 24rem margins).
   ===================================================================== */

.page--blog p, .page--blog li, .page--blog td, .page--blog th { font-family: var(--font-body); font-weight: 500; }
.page--blog h2, .page--blog h3, .page--blog h4 { text-transform: uppercase; }
.page--blog .kicker { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }
.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2rem var(--green); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green); }

/* the shared top bar is translucent (it sits on dark heroes elsewhere); blog pages start white, so make it solid */
header.topbar { background: rgba(0, 0, 0, .96); }

/* ---------- header ---------- */
.phead { background: var(--white); }
.crumbs { font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #777; }
.crumbs a { color: #777; transition: color .2s ease; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--green-dark); outline: none; }
.crumbs span[aria-current] { color: var(--black); }
.phead__h1 { letter-spacing: .03em; line-height: 1.02; text-transform: uppercase; }
.phead__meta { color: #666; }
.phead__meta time { color: var(--black); }

/* ---------- cover ---------- */
.pcover { margin: 0; }
.pcover img { display: block; width: 100%; height: auto; background: var(--gray); }
.pcover figcaption { color: #777; }

/* ---------- body ---------- */
.pbody { color: #111; }
.pbody > * + * { margin-top: 1em; }
.pbody h2, .pbody h3, .pbody h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; line-height: 1.05; }
.pbody h2 { margin-top: 1.6em; }
.pbody h3 { margin-top: 1.3em; }
.pbody a { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 2rem; text-underline-offset: 3rem; }
.pbody a:hover { color: var(--black); }
.pbody ul, .pbody ol { padding-left: 1.4em; }
.pbody ul { list-style: disc; }
.pbody ol { list-style: decimal; }
.pbody li + li { margin-top: .35em; }
.pbody blockquote { margin: 1.4em 0; padding: .4em 0 .4em 1.2em; border-left: 6rem solid var(--green); font-family: var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.pbody img { display: block; max-width: 100%; height: auto; border-radius: 18rem; background: var(--gray); }
.pbody pre, .pbody .ql-syntax { overflow: auto; padding: 1em 1.2em; border-radius: 12rem; background: var(--black); color: #e6e6e6; font-family: Consolas, "Courier New", monospace; font-size: .85em; line-height: 1.5; }
.pbody code { font-family: Consolas, "Courier New", monospace; font-size: .9em; background: var(--gray); padding: .05em .35em; border-radius: 4rem; }
.pbody pre code { background: none; padding: 0; }
.pbody table { width: 100%; border-collapse: collapse; }
.pbody th, .pbody td { padding: .5em .7em; border-bottom: 1px solid #e3e3e3; text-align: left; }
.pbody th { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.pbody hr { border: 0; border-top: 2rem solid var(--black); margin: 2em 0; }
.pbody .ql-align-center { text-align: center; }
.pbody .ql-align-right { text-align: right; }
.pbody .ql-align-justify { text-align: justify; }

/* ---------- tags + share ---------- */
.pfoot { border-top: 2rem solid var(--black); }
.pfoot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.tags { display: flex; flex-wrap: wrap; list-style: none; }
.tags li { font-family: var(--font-display); letter-spacing: .05em; text-transform: uppercase; background: var(--gray); border-radius: 999rem; }
.share { display: flex; align-items: center; list-style: none; }
.share__label { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #777; }
.share a { display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; color: var(--black); transition: background .2s ease, color .2s ease; }
.share a:hover, .share a:focus-visible { background: var(--green); color: var(--white); outline: none; }
.share svg { display: block; }

/* ---------- related ---------- */
.related { background: var(--gray); }
.related__h2 { letter-spacing: .04em; line-height: 1.01; }
.related__grid { list-style: none; display: grid; }
.rpost { background: var(--white); overflow: hidden; }
.rpost a { display: block; color: inherit; }
.rpost__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--gray); }
.rpost__ph { aspect-ratio: 16 / 10; background: #e2e2e2; }
.rpost__cat { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.rpost__title { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; line-height: 1.05; text-transform: uppercase; transition: color .2s ease; }
.rpost a:hover .rpost__title { color: var(--green-dark); }
.rpost__date { color: #777; }

/* ---------- closing cta (same as about/community) ---------- */
.acta { background: var(--black); color: var(--white); }
.acta__h2 { letter-spacing: .04em; line-height: 1.01; }
.acta__p { color: #e6e6e6; }
.acta__btns { display: flex; }

/* ---------- blog index (site/blog/index.html) ---------- */
.bindex__h1 { letter-spacing: .03em; line-height: 1.02; text-transform: uppercase; }
.bindex__p { color: #444; }
.bindex__list { list-style: none; }
.bindex__item { border-top: 1px solid #e3e3e3; }
.bindex__item a { display: grid; color: inherit; }
.bindex__cat { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.bindex__title { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; line-height: 1.05; text-transform: uppercase; transition: color .2s ease; }
.bindex__item a:hover .bindex__title { color: var(--green-dark); }
.bindex__date { color: #777; }
.bindex__empty { color: #666; }

@media (min-width: 761px) {
  .phead .in { padding: 110rem 120rem 40rem; }
  .crumbs { font-size: 15rem; }
  .phead .kicker { margin-top: 36rem; font-size: 18rem; }
  .phead__h1 { margin-top: 12rem; max-width: 960rem; font-size: 64rem; }
  .phead__meta { margin-top: 20rem; font-size: 18rem; }
  .pcover .in { padding: 0 120rem; }
  .pcover img { border-radius: 24rem; }
  .pcover figcaption { margin-top: 10rem; font-size: 15rem; }
  .pbody__in { padding: 56rem 120rem 90rem; }
  .pbody { max-width: 820rem; font-size: 20rem; line-height: 30rem; }
  .pbody h2 { font-size: 38rem; }
  .pbody h3 { font-size: 30rem; }
  .pbody h4 { font-size: 24rem; }
  .pfoot { max-width: 820rem; margin-top: 60rem; padding-top: 24rem; }
  .pfoot__row { gap: 20rem; }
  .tags { gap: 8rem; }
  .tags li { padding: 7rem 14rem 5rem; font-size: 15rem; }
  .share { gap: 8rem; }
  .share__label { margin-right: 6rem; font-size: 15rem; }
  .share a { width: 38rem; height: 38rem; }
  .share svg { width: 18rem; height: 18rem; }
  .related .in { padding: 90rem 120rem 100rem; }
  .related__h2 { font-size: 48rem; }
  .related__grid { grid-template-columns: repeat(3, 1fr); gap: 30rem; margin-top: 40rem; }
  .rpost { border-radius: 18rem; }
  .rpost__body { padding: 20rem 24rem 26rem; }
  .rpost__cat { font-size: 15rem; }
  .rpost__title { margin-top: 6rem; font-size: 25rem; }
  .rpost__date { margin-top: 8rem; font-size: 15rem; }
  .acta .in { display: grid; grid-template-columns: 1fr auto; column-gap: 60rem; align-items: center; padding: 90rem 120rem; }
  .acta__h2 { font-size: 60rem; }
  .acta__p { margin-top: 16rem; max-width: 640rem; font-size: 21rem; line-height: 28rem; }
  .acta__btns { gap: 16rem; }
  .acta__btns .btn { height: 54rem; padding: 0 30rem; }
  .bindex .in { padding: 110rem 120rem 100rem; }
  .bindex .kicker { font-size: 18rem; }
  .bindex__h1 { font-size: 64rem; }
  .bindex__p { margin-top: 18rem; max-width: 720rem; font-size: 21rem; line-height: 29rem; }
  .bindex__list { margin-top: 50rem; border-bottom: 1px solid #e3e3e3; }
  .bindex__item a { grid-template-columns: 180rem 1fr; column-gap: 40rem; padding: 26rem 0; }
  .bindex__cat { font-size: 16rem; }
  .bindex__title { margin-top: 4rem; font-size: 30rem; }
  .bindex__date { font-size: 17rem; line-height: 24rem; }
  .bindex__excerpt { margin-top: 10rem; max-width: 760rem; font-size: 18rem; line-height: 25rem; }
  .bindex__more { margin-top: 36rem; }
  .bindex__more .btn { height: 50rem; padding: 0 28rem; }
}

@media (max-width: 760px) {
  .phead .in { padding: 80rem 24rem 26rem; }
  .crumbs { font-size: 13rem; }
  .phead .kicker { margin-top: 24rem; font-size: 15rem; }
  .phead__h1 { margin-top: 8rem; font-size: 38rem; }
  .phead__meta { margin-top: 14rem; font-size: 15rem; line-height: 21rem; }
  .pcover .in { padding: 0 24rem; }
  .pcover img { border-radius: 16rem; }
  .pcover figcaption { margin-top: 8rem; font-size: 13rem; }
  .pbody__in { padding: 34rem 24rem 56rem; }
  .pbody { font-size: 17.5rem; line-height: 25rem; }
  .pbody h2 { font-size: 29rem; }
  .pbody h3 { font-size: 24rem; }
  .pbody h4 { font-size: 20rem; }
  .pfoot { margin-top: 40rem; padding-top: 18rem; }
  .pfoot__row { gap: 16rem; }
  .tags { gap: 6rem; }
  .tags li { padding: 6rem 12rem 4rem; font-size: 13.5rem; }
  .share { gap: 8rem; }
  .share__label { margin-right: 4rem; font-size: 13.5rem; }
  .share a { width: 36rem; height: 36rem; }
  .share svg { width: 17rem; height: 17rem; }
  .related .in { padding: 56rem 24rem 60rem; }
  .related__h2 { font-size: 38rem; }
  .related__grid { grid-template-columns: 1fr; row-gap: 16rem; margin-top: 24rem; }
  .rpost { border-radius: 16rem; }
  .rpost__body { padding: 16rem 18rem 20rem; }
  .rpost__cat { font-size: 13.5rem; }
  .rpost__title { margin-top: 4rem; font-size: 22rem; }
  .rpost__date { margin-top: 6rem; font-size: 13.5rem; }
  .acta .in { padding: 60rem 24rem 64rem; }
  .acta__h2 { font-size: 44rem; }
  .acta__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .acta__btns { flex-direction: column; gap: 12rem; margin-top: 26rem; }
  .acta__btns .btn { height: 48rem; font-size: 20rem; }
  .bindex .in { padding: 80rem 24rem 60rem; }
  .bindex .kicker { font-size: 15rem; }
  .bindex__h1 { font-size: 40rem; }
  .bindex__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .bindex__list { margin-top: 30rem; border-bottom: 1px solid #e3e3e3; }
  .bindex__item a { padding: 18rem 0; }
  .bindex__cat { font-size: 14rem; }
  .bindex__title { margin-top: 4rem; font-size: 24rem; }
  .bindex__date { margin-top: 6rem; font-size: 14rem; }
  .bindex__excerpt { margin-top: 8rem; font-size: 16rem; line-height: 22rem; }
  .bindex__more { margin-top: 24rem; }
  .bindex__more .btn { height: 46rem; padding: 0 22rem; font-size: 20rem; }
}