/* The Longevity Briefing. Only --apex-* tokens; no new colours or fonts
   (see _build/README). Reading-width column: this page is prose, so it is
   capped far narrower than the site's --apex-max. */

.lbx-hero { background: var(--apex-ink); }
.lbx-hero-in { max-width: 820px; margin: 0 auto;
               padding: 128px var(--apex-gutter) 72px; }
.lbx-kicker { font: 800 12px/1 var(--apex-font-mono); letter-spacing: .16em;
              text-transform: uppercase; color: var(--apex-red-bright); }
.lbx-hero-in h1 { margin: 20px 0 22px; color: #fff; font-weight: 900;
                  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.04;
                  letter-spacing: -.025em; max-width: 18ch; }
.lbx-hero-in p { margin: 0; max-width: 60ch; color: #efe9e2; font-size: 17px;
                 line-height: 1.62; }
.lbx-dateline { margin-top: 26px !important; font: 700 12px/1 var(--apex-font-mono);
                letter-spacing: .14em; text-transform: uppercase;
                color: #a39b91 !important; }

.lbx-sec { max-width: 820px; margin: 0 auto;
           padding: 80px var(--apex-gutter) 96px; }

.lbx-item { padding-bottom: 52px; margin-bottom: 52px;
            border-bottom: 1px solid var(--apex-rule); }
.lbx-cat { font: 800 11px/1 var(--apex-font-mono); letter-spacing: .16em;
           text-transform: uppercase; color: var(--apex-red); }
.lbx-item h2 { margin: 14px 0 20px; font-size: clamp(24px, 2.9vw, 34px);
               font-weight: 900; line-height: 1.14; letter-spacing: -.02em; }
.lbx-item p { margin: 0 0 18px; font-size: 17px; line-height: 1.72;
              color: var(--apex-body); }
.lbx-item strong { color: var(--apex-ink); font-weight: 800; }

/* the two standing blocks: what to take from it, and what undercuts it.
   The caveat is deliberately as prominent as the takeaway. */
.lbx-take, .lbx-caveat { margin: 0 0 18px; padding: 18px 22px;
                         border-radius: var(--apex-radius, 14px); }
.lbx-take { background: var(--apex-bg-alt);
            border-left: 3px solid var(--apex-red); }
.lbx-caveat { background: transparent;
              box-shadow: inset 0 0 0 1px var(--apex-rule); }
.lbx-take > span, .lbx-caveat > span {
  display: block; margin-bottom: 8px;
  font: 800 10.5px/1 var(--apex-font-mono); letter-spacing: .15em;
  text-transform: uppercase; }
.lbx-take > span { color: var(--apex-red); }
.lbx-caveat > span { color: var(--apex-muted); }
.lbx-take p, .lbx-caveat p { margin: 0 !important; font-size: 15.5px !important;
                             line-height: 1.66 !important; }

.lbx-cite { margin: 0 !important; font-size: 13.5px !important;
            line-height: 1.6 !important; color: var(--apex-muted) !important; }
.lbx-cite a { color: var(--apex-red); font-weight: 700; }
.lbx-cite a:hover { text-decoration: underline; }

.lbx-note { padding: 24px 26px; border-radius: var(--apex-radius, 14px);
            background: var(--apex-bg-alt); }
.lbx-note p { margin: 0; font-size: 15px; line-height: 1.7;
              color: var(--apex-body); }

.lbx-cta { margin-top: 56px; padding-top: 52px;
           border-top: 1px solid var(--apex-rule); text-align: center; }
.lbx-cta h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px);
              font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.lbx-cta > p { margin: 0 auto 26px; max-width: 52ch; font-size: 16.5px;
               line-height: 1.7; color: var(--apex-body); }
.lbx-fine { margin: 30px auto 0 !important; max-width: 60ch;
            font-size: 12.5px !important; line-height: 1.6 !important;
            color: var(--apex-muted) !important; }

@media (max-width: 760px) {
  .lbx-hero-in { padding-top: 104px; padding-bottom: 56px; }
  .lbx-sec { padding-top: 56px; padding-bottom: 72px; }
  .lbx-item { padding-bottom: 40px; margin-bottom: 40px; }
  .lbx-take, .lbx-caveat { padding: 16px 18px; }
}

/* Photography and the service tie-in. Blake, 2026-09-22: "tie things back to
   apex md services and use our images where applicable to make the page look
   friendly." The tie-in is deliberately quieter than the caveat above it —
   the credibility of the page is the product. */
.lbx-img { width: 100%; height: 240px; object-fit: cover; display: block;
           margin: 0 0 24px; border-radius: var(--apex-radius, 14px); }
.lbx-apex { margin: 16px 0 0 !important; padding: 16px 20px;
            border-radius: var(--apex-radius, 14px);
            background: var(--apex-ink); color: #d9d2ca !important;
            font-size: 15px !important; line-height: 1.65 !important; }
.lbx-apex > span { display: inline-block; margin-right: 8px;
                   font: 800 10.5px/1 var(--apex-font-mono); letter-spacing: .15em;
                   text-transform: uppercase; color: var(--apex-red-bright); }
.lbx-apex a { display: inline-block; margin-top: 8px; color: #fff;
              font-weight: 800; border-bottom: 1.5px solid var(--apex-red-bright);
              padding-bottom: 1px; }
.lbx-apex a:hover { color: var(--apex-red-bright); }

@media (max-width: 760px) {
  .lbx-img { height: 180px; }
  .lbx-apex { padding: 14px 16px; }
}
/* pull the band up to the face; centred, this photo lands on a torso */
.lbx-img--top { object-position: 50% 15%; }