/* ============================================================
   BBH CAPITAL — article.css
   Layout & typography specific to long-form article pages.
   Reuses tokens (colors, fonts, --nav-height, --accent) from main.css.

   Sections:
     1.  Page shell
     2.  Article hero
     3.  Layout grid (TOC + body)
     4.  Side TOC (auto-built from headings by JS)
     5.  Article body — headings, paragraphs, links, lists, defs
     6.  Drop cap, pull quote, callouts
     7.  Inline images & figures
     8.  End-of-article "next" card
     9.  Active nav state
    10.  Responsive
   ============================================================ */


/* ──────────────────────────────────────
   1. PAGE SHELL
────────────────────────────────────── */

body.article-page { background: var(--white); }

.article { padding-top: var(--nav-height); }

.article-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* ──────────────────────────────────────
   2. ARTICLE HERO
────────────────────────────────────── */

.article-hero { padding: 80px 0 56px; }

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-grey);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 0.2s, gap 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-back:hover { color: var(--black); gap: 12px; }
.article-back-arrow { font-size: 14px; line-height: 1; }

.article-hero .section-eyebrow { margin-bottom: 28px; }

.article-title {
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--black);
  margin: 0 0 28px;
}
.article-title em { font-style: italic; font-weight: 300; }

.article-deck {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--dark-grey);
  line-height: 1.5;
  margin: 0 0 56px;
  max-width: 620px;
}

.article-deck--small { font-size: 17px; margin: 36px 0 16px; font-style: italic; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 28px 0;
  margin: 0;
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}
.article-meta-pair { display: flex; flex-direction: column; gap: 8px; }
.article-meta dt {
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mid-grey);
}
.article-meta dd {
  margin: 0; font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--black);
}
.article-meta dd a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--light-grey); padding-bottom: 1px;
  transition: border-color 0.2s;
}
.article-meta dd a:hover { border-bottom-color: var(--accent); }


/* ──────────────────────────────────────
   3. LAYOUT GRID — TOC + body
   Two columns on wide screens, single column on narrower viewports.
────────────────────────────────────── */

.article-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 120px;
}

/* Variant for articles that have no section headings (short essays).
   Collapses to a single centred column with a comfortable reading width. */
.article-layout--no-toc {
  grid-template-columns: 1fr;
  gap: 0;
}
.article-layout--no-toc .article-body {
  max-width: 820px;
  margin: 0 auto;
}


/* ──────────────────────────────────────
   4. SIDE TOC

   Built dynamically by initArticleTOC() in main.js — scans all
   .article-body h1/h2/h3 headings and writes an <ol> of links.
   Sticky to the top of the viewport (below the nav) so it stays
   visible as the reader scrolls through long sections.
────────────────────────────────────── */

.article-toc-wrap {
  position: sticky;
  top: calc(var(--nav-height) + 28px);
  align-self: start;
  /* If a very long TOC overflows the viewport, scroll within itself
     rather than stretching the column. */
  max-height: calc(100vh - var(--nav-height) - 60px);
  overflow-y: auto;
  padding-right: 8px;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--light-grey) transparent;
}

.article-toc-wrap::-webkit-scrollbar { width: 4px; }
.article-toc-wrap::-webkit-scrollbar-thumb { background: var(--light-grey); }

/* The mobile-only toggle button is hidden on desktop — only re-enabled
   inside the (max-width: 900px) media query below. */
.article-toc-mobile-toggle { display: none; }

.article-toc-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin: 0 0 16px;
  padding-left: 14px;
}

.article-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--light-grey);
  font-family: var(--sans);
}

.article-toc li { margin: 0; }

.article-toc a {
  display: block;
  padding: 6px 14px;
  margin-left: -1px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dark-grey);
  text-decoration: none;
  border-left: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.article-toc a:hover { color: var(--black); }

.article-toc a.is-active {
  color: var(--navy);
  border-left-color: var(--navy);
  font-weight: 500;
}

/* Indent by heading depth */
.article-toc .toc-l-1 > a { padding-left: 14px; font-weight: 500; color: var(--black); }
.article-toc .toc-l-2 > a { padding-left: 28px; }
.article-toc .toc-l-3 > a { padding-left: 42px; font-size: 11.5px; color: var(--mid-grey); }
.article-toc .toc-l-4 > a { padding-left: 56px; font-size: 11px;   color: var(--mid-grey); }


/* ──────────────────────────────────────
   5. ARTICLE BODY
────────────────────────────────────── */

.article-body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.78;
  color: #1F1F1F;
  /* No max-width — the article body fills the remaining 1fr column of
     .article-layout. With a 240px TOC + 80px gap the text comfortably
     uses the rest of the page band. */
  min-width: 0;
}

.article-body p { margin: 0 0 22px; }
.article-body strong { font-weight: 500; color: var(--black); }
.article-body em,
.article-body i { font-style: italic; }

/* Inline links */
.article-body a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--light-grey);
  padding-bottom: 1px;
  transition: border-color 0.25s, color 0.25s;
}
.article-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* When .btn-primary lives inside an article body, the generic inline-link
   rule above kicks in and overrides its colour + adds a bottom hairline.
   Restore the button's own styling so the label reads white-on-black and
   the vertical centering isn't thrown off by the link's `padding-bottom: 1px`. */
.article-body a.btn-primary,
.article-body a.btn-primary:hover {
  color: var(--white);
  border-bottom: 1px solid var(--black);
  padding: 14px 28px;
}

.article-body a.btn-primary:hover {
  border-bottom-color: #333;
}

/* ── Headings — semantic, no class needed in markup ── */

.article-body h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 96px 0 36px;
  padding-top: 36px;
  position: relative;
  scroll-margin-top: calc(var(--nav-height) + 28px);
}
.article-body h1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--navy);
}

.article-body h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.9vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--black);
  margin: 64px 0 20px;
  scroll-margin-top: calc(var(--nav-height) + 28px);
}

.article-body h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--nav-height) + 28px);
}

.article-body h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  margin: 36px 0 14px;
  scroll-margin-top: calc(var(--nav-height) + 28px);
}

.article-body h4 strong { font-weight: 500; }

/* Lists */
.article-body ul,
.article-body ol {
  margin: 0 0 28px;
  padding-left: 22px;
}
.article-body li {
  margin-bottom: 8px;
  padding-left: 6px;
  font-size: 16px;
  line-height: 1.7;
}
.article-body li::marker { color: var(--mid-grey); }
.article-body li > ul,
.article-body li > ol { margin-top: 8px; margin-bottom: 12px; }

/* "Source links" sections at the end of the article use lots of <ul>;
   tighten them up so they read as a reference list. */
.article-body h2 + ul,
.article-body h1 + ul { font-size: 15px; }

/* Source list items often start with stray whitespace from the original
   markup — make their wrapping tighter and clean. */
.article-body p { font-size: 17px; }

/* Defs (key terms list) */
.article-defs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 28px 0 40px;
  border-top: 1px solid var(--light-grey);
}
.article-defs > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--light-grey);
}
.article-defs dt {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--black);
  line-height: 1.5;
}
.article-defs dd {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-grey);
  line-height: 1.7;
}


/* ──────────────────────────────────────
   6. CALLOUTS, DROP CAP, PULL QUOTE
────────────────────────────────────── */

.article-note {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--dark-grey);
  line-height: 1.6;
  margin: 0 0 36px;
  padding-left: 22px;
  border-left: 2px solid var(--light-grey);
}

.article-callout {
  background: var(--off-white);
  border-left: 3px solid var(--navy);
  padding: 22px 26px;
  margin: 0 0 48px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark-grey);
}
.article-callout a { color: var(--navy); }

.has-dropcap::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 76px;
  font-weight: 400;
  line-height: 0.85;
  margin: 8px 12px 0 0;
  color: var(--navy);
}

.article-pullquote {
  margin: 48px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--navy);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--black);
}


/* ──────────────────────────────────────
   7. INLINE IMAGES
────────────────────────────────────── */

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto;
  border: 1px solid var(--light-grey);
}

/* Figures (image + caption) */
.article-body figure {
  margin: 48px 0;
}
.article-body figure img {
  margin: 0 0 12px;
}
.article-body figure figcaption {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--mid-grey);
  text-align: center;
  line-height: 1.5;
}

/* Disclosure / fine-print block — appears at the very bottom of every
   article. De-emphasised so it doesn't compete with the body, but still
   legible. */
.article-body .disclosure {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--light-grey);
  font-size: 13px;
  color: var(--mid-grey);
}
.article-body .disclosure p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.article-body .disclosure p:last-child { margin-bottom: 0; }
.article-body .disclosure strong { color: var(--dark-grey); }

/* Inline "continue reading" link at the bottom of an article body,
   styled into a small right-aligned CTA. */
.article-body .continue-link {
  text-align: right;
  margin: 48px 0 24px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.article-body .continue-link a {
  border-bottom: 1px solid var(--accent);
}

/* Inline highlights — <mark> wraps emphasis spans (often groups of bullets
   in legacy articles). Tint to a soft warm cream so the highlight reads as
   "this is grouped content" without breaking the editorial tone. */
.article-body mark {
  background: rgba(245, 235, 215, 0.55);
  color: inherit;
  padding: 0 3px;
  border-radius: 2px;
}

/* Inline analogy/aside blockquote — a centred serif callout for the
   short equivalencies in long-form pieces ("Qubits ↔ Horsepower"). */
.article-body blockquote {
  margin: 28px 0;
  padding: 0;
  border: none;
}
.article-body blockquote p {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}

/* Sub/superscript balance — keep them snug to the baseline without
   stretching the line-height. */
.article-body sup,
.article-body sub {
  font-size: 0.72em;
  line-height: 0;
}


/* ──────────────────────────────────────
   8. END-OF-ARTICLE "NEXT" CARD
────────────────────────────────────── */

.article-next {
  margin: 80px 0 0;
  padding: 40px 36px 36px;
  background: var(--off-white);
  border-top: 2px solid var(--navy);
}
.article-next .section-eyebrow { margin-bottom: 18px; }
.article-next-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--black);
  margin: 0 0 14px;
}
.article-next p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark-grey);
  margin: 0 0 28px;
  max-width: 480px;
}


/* ──────────────────────────────────────
   8b. ARCHIVE PAGE (articles.html)

   Reuses .insights-grid + .insight-card from main.css but flattens
   the 2fr/1fr/1fr layout into a uniform 3-column grid (no featured
   card here — every article is equal on the archive). The hero
   shares the article-hero styles but without the meta strip below it.
────────────────────────────────────── */

.archive-hero {
  padding: 80px 0 40px;
}

.archive-section {
  padding-top: 24px;
}

/* Override the homepage's 2fr/1fr/1fr layout for the archive. */
.archive-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Keep every archive card at the smaller min-height — there's no
   "featured" treatment on the archive, just a uniform grid. */
.archive-grid .insight-card {
  min-height: 260px;
}


/* ──────────────────────────────────────
   9. ACTIVE NAV STATE
────────────────────────────────────── */

.nav-links a.is-current { color: var(--black); }
.nav-links a.is-current::after { transform: scaleX(1); }


/* ──────────────────────────────────────
   10. RESPONSIVE
────────────────────────────────────── */

/* Collapse the TOC into the flow below 1100px — the article + ~240px
   sidebar + gap doesn't have enough room on a 13" laptop after that. */
@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .article-toc-wrap {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--light-grey);
  }

  /* Archive cards squeeze too tight in 3 cols below 1100px; step down
     to a 2-column grid for tablets and small laptops. */
  .archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .article-hero { padding: 48px 0 40px; }
  .article-back { margin-bottom: 28px; }
  .article-title { margin-bottom: 20px; }
  .article-deck { margin-bottom: 36px; }
  .article-meta { gap: 24px; padding: 20px 0; }

  .article-body { font-size: 16px; }
  .article-body h1 { margin-top: 64px; }

  .article-defs > div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .article-pullquote { padding-left: 20px; margin: 32px 0; }
  .article-next { padding: 32px 24px 28px; }
  .has-dropcap::first-letter { font-size: 60px; }

  /* Archive grid collapses to a single column on phones, matching
     the rest of the responsive grid behaviour. */
  .archive-grid {
    grid-template-columns: 1fr !important;
  }

  .archive-hero {
    padding: 48px 0 24px;
  }

  /* On phones, fold the TOC under a click-to-expand summary so it
     doesn't dominate the viewport. */
  .article-toc-wrap {
    margin-bottom: 32px;
    padding-bottom: 0;
    border-bottom: none;
  }
  .article-toc-mobile {
    display: block;
  }
  .article-toc-mobile-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--off-white);
    border: 1px solid var(--light-grey);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
  }
  .article-toc-mobile-toggle::after {
    content: '+';
    font-size: 18px;
    color: var(--mid-grey);
  }
  .article-toc-mobile.is-open .article-toc-mobile-toggle::after { content: '×'; }
  .article-toc-mobile .article-toc-label { display: none; }
  .article-toc-mobile .article-toc { display: none; margin-top: 14px; }
  .article-toc-mobile.is-open .article-toc { display: block; }
}


/* ──────────────────────────────────────
   READING PROGRESS BAR
   Thin fixed strip pinned to the top of the viewport. JS sets its
   width (0–100%) based on how far the user has scrolled through the
   article body. Sits BELOW the sticky nav so the two never overlap.
────────────────────────────────────── */
.article-progress {
  position: fixed;
  top: 72px;                     /* matches sticky-nav height */
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 90;
  pointer-events: none;
}
.article-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--navy);
  transform-origin: left center;
  /* No transition — JS already throttles via rAF and the visual
     should track the scroll wheel 1:1. */
}

/* When the sticky nav grows its frosted background, the bar should
   stay visually attached to the nav's bottom edge. */
@media (max-width: 880px) {
  .article-progress { top: 64px; }
}


/* ──────────────────────────────────────
   BACK-TO-TOP BUTTON
   Floating bottom-right pill. Hidden by default; .is-visible fades it
   in after the user scrolls past one viewport. Clicking smooth-scrolls
   to the top.
────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--navy);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease;
  z-index: 80;
  box-shadow: 0 6px 18px rgba(13, 32, 69, 0.18);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover  { background: #15294f; }
.back-to-top:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.back-to-top svg { display: block; }

@media (max-width: 880px) {
  .back-to-top {
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
  }
}