/* ==========================================================================
   Blog article layer — loaded after main.css on /blog/<slug>/ pages only.
   Gives posts an editorial reading layout distinct from service/landing
   pages, and fixes in-article CTA contrast. Uses main.css design tokens.
   ========================================================================== */

/* --- Editorial hero: centered, no split image ------------------------- */
.tsd-blog-hero {
  background: var(--tsd-gradient-hero, var(--tsd-navy));
  padding: calc(var(--tsd-section-padding) * 0.9) 0 var(--tsd-space-2xl);
  text-align: center;
}

.tsd-blog-hero .tsd-breadcrumbs {
  justify-content: center;
  margin-bottom: var(--tsd-space-lg);
}

.tsd-blog-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--tsd-container-padding);
}

.tsd-blog-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: var(--tsd-leading-tight);
  margin: var(--tsd-space-md) 0 var(--tsd-space-lg);
}

.tsd-blog-hero .tsd-subtitle {
  max-width: 640px;
  margin: 0 auto var(--tsd-space-lg);
}

.tsd-blog-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tsd-space-sm);
  color: var(--tsd-text-light-muted);
  font-size: var(--tsd-text-sm);
  letter-spacing: 0.02em;
  margin-bottom: var(--tsd-space-xl);
}

.tsd-blog-meta__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tsd-gold);
}

.tsd-blog-hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--tsd-space-md);
  flex-wrap: wrap;
}

/* --- Table of contents: compact, numbered, editorial ------------------ */
.tsd-toc--blog {
  background: transparent;
  border: none;
  border-left: 3px solid var(--tsd-gold);
  border-radius: 0;
  padding: var(--tsd-space-sm) 0 var(--tsd-space-sm) var(--tsd-space-xl);
}

.tsd-toc--blog .tsd-toc__title {
  font-family: var(--tsd-font-mono, monospace);
  font-size: var(--tsd-text-xs, 0.75rem);
  font-weight: var(--tsd-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tsd-text-dark-muted);
}

.tsd-toc--blog .tsd-toc__list {
  counter-reset: toc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--tsd-space-xl);
  row-gap: 2px;
}

@media (max-width: 640px) {
  .tsd-toc--blog .tsd-toc__list {
    grid-template-columns: 1fr;
  }
}

.tsd-toc--blog .tsd-toc__list li {
  margin: 0;
}

.tsd-toc--blog .tsd-toc__list a {
  counter-increment: toc;
  color: var(--tsd-text-dark);
  font-size: var(--tsd-text-sm);
  padding: 6px 0;
  border-bottom: none;
}

.tsd-toc--blog .tsd-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--tsd-font-mono, monospace);
  font-size: var(--tsd-text-xs, 0.75rem);
  color: var(--tsd-gold);
  font-weight: var(--tsd-font-semibold);
}

.tsd-toc--blog .tsd-toc__list a:hover {
  color: var(--tsd-blue);
}

/* --- Reading rhythm ---------------------------------------------------- */
.tsd-article .tsd-container--narrow {
  max-width: 720px;
}

.tsd-article h2 {
  margin-top: var(--tsd-space-2xl);
}

/* --- In-article CTA: readable card, not a full-bleed band -------------- */
.tsd-article .tsd-cta-luxury {
  border-radius: var(--tsd-radius-lg);
  padding: var(--tsd-space-2xl) var(--tsd-space-xl);
  margin: var(--tsd-space-2xl) 0;
}

.tsd-article .tsd-cta-luxury h3 {
  font-family: 'Playfair Display', serif;
  color: var(--tsd-text-light);
  font-size: var(--tsd-text-2xl, 1.75rem);
  margin-bottom: var(--tsd-space-md);
}

.tsd-article .tsd-cta-luxury h3 em {
  color: var(--tsd-gold);
}

.tsd-article .tsd-cta-luxury p {
  color: var(--tsd-text-light-muted);
}

.tsd-article .tsd-cta-luxury p a {
  color: var(--tsd-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsd-article .tsd-cta-luxury .tsd-btn--primary {
  background: var(--tsd-gradient-gold);
  color: var(--tsd-navy);
  font-weight: var(--tsd-font-semibold);
}

.tsd-article .tsd-cta-luxury .tsd-btn--primary:hover {
  box-shadow: var(--tsd-shadow-lg);
}


/* --- Research report article layout -------------------------------------- */
.tsd-article-figure{margin:2rem 0}
.tsd-article-figure img{display:block;width:100%;height:auto}
.tsd-report-main{background:var(--tsd-surface-white)}
.tsd-report-layout{display:grid;grid-template-columns:minmax(0,960px) minmax(240px,280px);gap:clamp(2.5rem,4vw,4rem);max-width:1360px;margin:0 auto;padding:3rem var(--tsd-container-padding) 5rem}
/* --- the card becomes a page, not a box --- */
.tsd-report-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  /* The article section below only contributes ~0.6rem of its own padding,
     so the gap between colophon and first paragraph is set here. */
  padding:clamp(1.25rem,2.5vw,2rem) 0 clamp(2.75rem,5vw,4.5rem);
}

.tsd-report-card .tsd-breadcrumbs{
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}

/* --- masthead: mono kicker left, freshness stamp right --- */
.tsd-report-masthead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
  padding-bottom:.55rem;
  border-bottom:2px solid var(--tsd-navy);
}
.tsd-report-masthead .tsd-eyebrow{
  margin:0;
  color:var(--tsd-navy);
  font-weight:var(--tsd-font-bold);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.tsd-report-stamp{
  font-family:var(--tsd-font-mono);
  font-size:.7rem;
  font-weight:var(--tsd-font-medium);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8A7238;
}
.tsd-report-stamp time{font-variant-numeric:tabular-nums}

/* the single piece of gold: lower half of a letterpress double-rule */
.tsd-report-rule{
  height:1px;
  margin-top:2px;
  background:var(--tsd-gold);
}

/* --- headline + deck --- */
.tsd-report-card h1{
  font-size:clamp(2.4rem,5.2vw,4.25rem);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--tsd-navy);
  /* 22ch keeps "80+ Law Firm Marketing / Statistics for 2026" on two lines in
     the 960px column. Tighter than this and it breaks to three. */
  max-width:22ch;
  text-wrap:balance;
  margin:clamp(2.25rem,5vw,3.5rem) 0 0;
}
.tsd-report-card .tsd-subtitle{
  margin:clamp(1.25rem,2.5vw,1.5rem) 0 0;
  max-width:56ch;
  font-size:1.19rem;
  line-height:1.6;
  color:#4A5568;
}

/* --- scope strip: what the reader is getting, at a glance --- */
.tsd-report-scope{
  display:flex;
  flex-wrap:wrap;
  margin:clamp(2.25rem,4vw,3.25rem) 0 0;
  border-top:1px solid var(--tsd-navy);
  border-bottom:1px solid var(--tsd-border-light);
}
.tsd-report-scope > div{
  padding:1rem 2.75rem 1rem 0;
  margin-right:2.75rem;
  border-right:1px solid var(--tsd-border-light);
}
.tsd-report-scope > div:last-child{
  padding-right:0;
  margin-right:0;
  border-right:0;
}
.tsd-report-scope b{
  display:block;
  font-family:var(--tsd-font-mono);
  font-weight:var(--tsd-font-bold);
  font-size:1.4rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--tsd-navy);
  font-variant-numeric:tabular-nums;
}
.tsd-report-scope small{
  display:block;
  margin-top:.25rem;
  font-family:var(--tsd-font-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8794A6;
}

/* --- trust row: two named people plus the dates ---------------------------
   Three columns with hairline dividers. The dividers earn their place here
   (unlike in the earlier one-line colophon) because each column holds a
   substantial block with a portrait in it. */
.tsd-report-trust{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.25rem,3vw,2.25rem);
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  padding-top:clamp(1.4rem,3vw,1.9rem);
  border-top:1px solid var(--tsd-border-light);
}
.tsd-report-party{min-width:0}
.tsd-report-trust > .tsd-report-party + .tsd-report-party{
  border-left:1px solid var(--tsd-border-light);
  padding-left:clamp(1.25rem,3vw,2.25rem);
}
.tsd-report-lab{
  margin:0 0 .55rem;
  font-family:var(--tsd-font-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8794A6;
}

/* --- a named person --- */
.tsd-report-person{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  color:inherit;
  text-decoration:none;
}
.tsd-report-person img,
.tsd-report-initials{
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  flex:none;
  display:block;
}
.tsd-report-person img{
  border:1px solid rgba(10,22,40,.14);
  object-fit:cover;
  object-position:center top;
}
/* Placeholder mark until a real headshot exists. */
.tsd-report-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tsd-navy);
  color:var(--tsd-gold);
  font-family:var(--tsd-font-mono);
  font-size:.85rem;
  font-weight:var(--tsd-font-bold);
  letter-spacing:.04em;
}
.tsd-report-id{min-width:0}
.tsd-report-name{
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-wrap:wrap;
  font-size:.97rem;
  font-weight:var(--tsd-font-bold);
  line-height:1.25;
  color:var(--tsd-navy);
}
.tsd-report-role{
  display:block;
  margin-top:.2rem;
  font-size:.84rem;
  line-height:1.4;
  color:var(--tsd-text-dark-muted);
}
.tsd-report-li{width:.88rem;height:.88rem;flex:none;color:#8794A6}
.tsd-report-person:hover .tsd-report-name{text-decoration:underline}
.tsd-report-person:focus-visible{outline:2px solid var(--tsd-gold);outline-offset:3px}

/* --- dates + verification --- */
.tsd-report-dates .tsd-report-lab{margin-bottom:.3rem}
.tsd-report-dates > div + div{margin-top:.7rem}
.tsd-report-date{
  font-size:.95rem;
  font-weight:var(--tsd-font-bold);
  line-height:1.3;
  color:var(--tsd-navy);
  font-variant-numeric:tabular-nums;
}

/* Navy-and-gold, not the borrowed green. This badge now names a second party
   (see reviewedBy in the schema), so it is a claim the page can actually back. */
.tsd-report-verified{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  margin-top:.9rem;
  padding:.32rem .7rem .32rem .5rem;
  border:1px solid rgba(196,163,90,.55);
  background:rgba(196,163,90,.10);
  font-family:var(--tsd-font-mono);
  font-size:.62rem;
  font-weight:var(--tsd-font-bold);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#6E5A22;
}
.tsd-report-verified svg{
  width:.88rem;
  height:.88rem;
  flex:none;
  fill:none;
  stroke:#8A7238;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:860px){
  .tsd-report-trust{grid-template-columns:1fr;gap:1.25rem}
  .tsd-report-trust > .tsd-report-party + .tsd-report-party{
    border-left:0;
    padding-left:0;
    padding-top:1.25rem;
    border-top:1px solid var(--tsd-border-light);
  }
}
@media (max-width:640px){
  .tsd-report-scope > div{padding-right:1.5rem;margin-right:1.5rem}
}
.tsd-report-aside{align-self:start;position:sticky;top:7rem}
.tsd-report-aside .tsd-toc__title{color:var(--tsd-text-dark);font-family:var(--tsd-font-mono);font-size:.72rem;font-weight:var(--tsd-font-bold);letter-spacing:.12em;margin:0 0 var(--tsd-space-md);text-transform:uppercase}
.tsd-report-aside .tsd-toc__list,.tsd-report-toc-mobile .tsd-toc__list{display:grid;gap:.15rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.tsd-report-aside .tsd-toc__list a,.tsd-report-toc-mobile .tsd-toc__list a{align-items:baseline;border-left:2px solid transparent;color:var(--tsd-text-dark-muted);display:flex;font-size:.82rem;gap:.55rem;line-height:1.35;padding:.45rem .6rem}
.tsd-report-aside .tsd-toc__list a::before,.tsd-report-toc-mobile .tsd-toc__list a::before{flex:0 0 1.5rem;text-align:right}
.tsd-report-aside .tsd-toc__list a:hover,.tsd-report-aside .tsd-toc__list a:focus-visible,.tsd-report-aside .tsd-toc__list a[aria-current="location"],.tsd-report-toc-mobile .tsd-toc__list a:hover,.tsd-report-toc-mobile .tsd-toc__list a:focus-visible{background:rgba(196,163,90,.12);border-left-color:var(--tsd-gold);color:var(--tsd-navy);outline:none}
.tsd-report-content{max-width:960px}
.tsd-report-toc-mobile{display:none}
.tsd-report-content h2{scroll-margin-top:8rem}
@media(max-width:900px){.tsd-report-layout{display:block;padding-top:1.5rem}
.tsd-report-aside{display:none}
.tsd-report-toc-mobile{background:var(--tsd-surface-light);border:1px solid var(--tsd-border-light);border-radius:var(--tsd-radius-md);display:block;margin:0 0 var(--tsd-space-xl);padding:0}
.tsd-report-toc-mobile summary{color:var(--tsd-navy);cursor:pointer;font-family:var(--tsd-font-mono);font-size:.75rem;font-weight:var(--tsd-font-bold);letter-spacing:.1em;padding:1rem;text-transform:uppercase}
.tsd-report-toc-mobile .tsd-toc__list{padding:0 .75rem 1rem}
.tsd-report-content h2{scroll-margin-top:9rem}
}