/* ============================================================
   style-custom.css — page-unique overrides for the static UX2.0
   "How We Got Here" article at /ux2.0/how-we-got-here/.

   Rides on top of /_templates/style-articles.css (background,
   base type, prose, hero, tags, base author-bio surface). Only
   the bits that diverge for this one page belong here. When
   this article migrates into the CMS, most of these can fold
   into the article block partials and this file disappears.
   ============================================================ */


/* ── 1. Tokens ─────────────────────────────────────────── */

:root {
  /* Override the template's inline-SVG dot-grid with the same
     background asset the marketing pages use (/_layout/background.png),
     so this article visually matches /about/, /coaching/, etc. */
  --dot-grid: url("/_layout/background.png");

  --chart-bg:          var(--canvas-bg);
  --chart-dim-fill:    #F3F2F1;
  --chart-rule:        var(--ink-18);
  --chart-ink:         var(--primary);
  --chart-ink-quiet:   var(--muted);

  --band-intuition:       #B4B2A9;
  --band-inquiry:         #AFA9EC;
  --band-technical:       #5DCAA5;
  --band-conceptualizing: #85B7EB;
  --band-ui:              #F0997B;
}

/* Byline avatar — drop the template's border for a cleaner photo edge. */
.article-byline-row .article-author-avatar {
  border: 0;
}


/* ── 2. Editorial layout ───────────────────────────────── */

.article-topstrip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}
.article-topstrip .article-category {
  font-family: var(--font-cond);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-current, var(--primary));
}

.article-title.is-serif {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-32);
}

.article-tag-row { margin-bottom: var(--space-32); }

.article-dates {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
  flex-wrap: wrap;
}
.article-pub-date {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.article-byline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-20) 0;
  border-top: var(--rule-faint);
  border-bottom: var(--rule-faint);
  margin-bottom: var(--space-40);
}
.article-byline-row .article-author {
  margin: 0;
  padding: 0;
  border: 0;
}
.article-byline-row .article-author-info {
  display: block;
  line-height: 1.3;
}
.article-byline-row .article-author-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-md);
}
.article-byline-row .article-author-tagline {
  display: block;
  font-size: var(--text-base);
  color: var(--secondary);
  margin-top: 2px;
}
.article-read-time {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--secondary);
  flex-shrink: 0;
}

/* Body headings — widen the H2/H3 size gap vs. the template default. */
.article-prose h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--space-56);
  margin-bottom: var(--space-16);
}
.article-prose h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: var(--space-32);
  margin-bottom: var(--space-8);
  color: var(--secondary);
}

/* Dark author-bio footer — overrides the template's surface-card variant. */
.article-author-bio {
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  background: var(--primary);
  border: 0;
  margin-top: var(--space-48);
}
.article-author-bio-avatar {
  width: 44px;
  height: 44px;
  font-size: var(--text-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}
.article-author-bio-extended {
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}


/* ── 3. Chart frame ────────────────────────────────────── */

.chart-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chart-source {
  font-family: var(--font-cond);
  font-size: var(--text-label);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-8);
  flex: 0 0 auto;
}
.chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
}


/* ── 4. Article chart figures ──────────────────────────── */

.article-prose .article-chart-figure {
  margin: var(--space-40) 0;
}
.article-prose h3 + .article-chart-figure {
  margin-top: 10px;
}
/* Transparent frame — chart sits on the page surface, not in a card. */
.article-prose .article-chart-figure > .chart-frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-8) 0 var(--space-16) 0;
}
.article-chart {
  width: 100%;
  display: block;
}
.article-chart svg {
  width: 100%;
  height: auto;
  display: block;
}


/* ── 5. Spectrum diagram ───────────────────────────────── */

.article-spectrum {
  margin: var(--space-32) 0;
}
.article-spectrum-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--secondary);
  margin-bottom: var(--space-12);
}
.article-spectrum-bar {
  display: flex;
  width: 100%;
  height: 56px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: var(--rule-faint);
}
.article-spectrum-band {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cond);
  font-size: var(--text-pill);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(25,23,21,0.78);
  padding: 0 var(--space-8);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-spectrum-band[data-band="intuition"]       { background: var(--band-intuition); }
.article-spectrum-band[data-band="inquiry"]         { background: var(--band-inquiry); }
.article-spectrum-band[data-band="technical"]       { background: var(--band-technical); }
.article-spectrum-band[data-band="conceptualizing"] { background: var(--band-conceptualizing); }
.article-spectrum-band[data-band="ui"]              { background: var(--band-ui); }


/* ── 6. Responsive ─────────────────────────────────────── */

@media (max-width: 768px) {
  .article-topstrip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-32);
  }
  .article-title.is-serif {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: var(--space-24);
  }
  .article-dates { margin-bottom: var(--space-20); }
  .article-byline-row {
    padding: var(--space-16) 0;
    gap: var(--space-12);
    flex-wrap: wrap;
  }
  .article-prose .article-chart-figure > .chart-frame {
    padding: var(--space-16) var(--space-16) var(--space-20);
  }
  .article-spectrum-bar { height: 48px; }
  .article-spectrum-band { font-size: 10px; letter-spacing: 0.06em; }
  .article-author-bio {
    padding: var(--space-16) var(--space-20);
    gap: var(--space-12);
  }
  .article-author-bio-avatar { width: 40px; height: 40px; font-size: var(--text-base); }
  .article-author-bio-extended { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 480px) {
  .article-title.is-serif { font-size: 32px; }
  .article-spectrum-band[data-band="ui"] {
    font-size: 10px;
  }
}