/* ==========================================================================
   B&A AI Center of Excellence — Article template (articles.css)
   Loads after styles.css and reuses its tokens, .showcase, .card-subtle,
   .eyebrow, .fig, .fig-cap, .section-head and .link-arrow.

   Reading layout only:
   - header: eyebrow (category · date · author) → two-line title → standfirst
     → hairline rule
   - one 720px prose column, centered; figures break out to 960px inside
     .showcase frames with a mono "FIG 0.n" caption
   - pull-quotes are .card-subtle with a 1px left hairline
   - closing "More from the COE": a two-column list of text rows, no cards
   - no chromatic UI anywhere. The only orange on an article page is the single
     accent inside a generated figure, or the one highlighted series of a chart.
   - figures sit exactly where the live copy places them; when two orange
     figures would share one ~900px viewport at 1440, the later one is framed
     .showcase--mono (greyscale). The first figure on a page keeps its orange.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell — one 1008px column (960 + gutters); prose is capped at 720
   -------------------------------------------------------------------------- */
.article { padding-top: var(--s-96); }

.article-shell {
  max-width: 1008px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.article-header,
.article-body > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
.article-header .eyebrow { margin-bottom: var(--s-16); }
.article-header .eyebrow a { color: inherit; transition: color var(--dur-hover) var(--ease-ui); }   /* text-link signature: color .1s */
.article-header .eyebrow a:hover { color: var(--mist); }

.article-title {
  font-size: 48px;
  font-weight: 510;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--paper);
}
.article-title--long { font-size: 40px; }

.standfirst {
  margin-top: var(--s-24);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--mist);
}

/* The hairline rule that closes the header */
.article-header::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: var(--s-40);
  background: var(--graphite);
}

/* --------------------------------------------------------------------------
   3. Body type — 16/400/1.6 mist; headings 24/400 paper
   -------------------------------------------------------------------------- */
.article-body { padding-top: var(--s-96); }

.article-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--mist);
  margin-top: var(--s-20);
}
.article-body > :first-child { margin-top: 0; }

.article-body h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin-top: var(--s-64);
}
.article-body h3 {
  font-size: 20px;
  font-weight: 510;
  line-height: 1.33;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin-top: var(--s-48);
}
.article-body h4 {
  font-size: 16px;
  font-weight: 510;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--mist);
  margin-top: var(--s-32);
}
.article-body h2 + h3 { margin-top: var(--s-24); }
.article-body h2 + p,
.article-body h3 + p,
.article-body h4 + p { margin-top: var(--s-12); }

/* Section numbers in formal documents ("1.0", "4.2") sit in fog, tabular */
.article-body .num {
  color: var(--fog);
  font-feature-settings: "tnum", "cv01", "ss03", "zero";
  margin-right: .4em;
}

/* Kicker: a 12px uppercase label above a heading (reuses .eyebrow) */
.article-body .eyebrow { margin-top: var(--s-64); }
.article-body .eyebrow + h3 { margin-top: var(--s-8); }

.article-body strong { font-weight: 510; color: var(--mist); }   /* inline emphasis: body size, 510, mist */

.article-body p a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--smoke);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-hover) var(--ease-ui);   /* text-link signature: .1s */
}
.article-body p a:hover { text-decoration-color: var(--mist); }

/* Lists: a short fog dash instead of a bullet; numbered lists count in fog */
.article-body ul,
.article-body ol { margin-top: var(--s-16); }
.article-body li {
  position: relative;
  padding-left: var(--s-24);
  margin-top: var(--s-8);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mist);
}
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--fog);
}
.article-body ol { counter-reset: item; }
.article-body ol > li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  line-height: 25.6px;
  color: var(--fog);
  font-feature-settings: "tnum", "cv01", "ss03", "zero";
}
.article-body ul + p,
.article-body ol + p { margin-top: var(--s-24); }

/* Definition blocks — "What it does / Real-world example / Why agile teams care" */
.facets { margin-top: var(--s-12); }
.facets dt {
  margin-top: var(--s-20);
  font-size: 12px;
  font-weight: 510;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fog);
}
.facets dd {
  margin: var(--s-4) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mist);
}

/* Key-value line — "Objective: …", "Key Principle: …" (colon is live text) */
.kv .k { font-weight: 510; color: var(--mist); }

/* Outcome line: a fog arrow in the gutter */
.kv--outcome { position: relative; padding-left: var(--s-24); }
.kv--outcome::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fog);
}

/* Editorial note: 14px fog */
.article-body p.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fog);
}
.note .k { font-weight: 510; color: var(--mist); }

/* Media reference (a video that is not embedded): one hairline row */
.media-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-top: var(--s-32);
  padding: var(--s-12) 0;
  box-shadow: inset 0 1px 0 var(--graphite), inset 0 -1px 0 var(--graphite);
  font-family: var(--font-mono);   /* a media reference is a figure caption: mono 12px fog throughout */
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.013em;
  color: var(--fog);
}
.media-note a { color: var(--fog); text-decoration: underline; text-decoration-color: var(--smoke); text-underline-offset: 3px; transition: color var(--dur-hover) var(--ease-ui); }
.media-note a:hover { color: var(--paper); }
.media-note + * { margin-top: var(--s-32); }

/* Closing byline */
.byline-end {
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  box-shadow: inset 0 1px 0 var(--graphite);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fog);
}

/* --------------------------------------------------------------------------
   4. Pull-quote — .card-subtle with a 1px left hairline
   -------------------------------------------------------------------------- */
.pull-quote {
  margin-top: var(--s-40);
  padding: var(--s-24) var(--s-28);
  border-radius: var(--r-6);
  background: rgba(255, 255, 255, .02);
  box-shadow: rgba(0, 0, 0, .4) 0 2px 4px, inset 1px 0 0 var(--smoke);
}
.pull-quote p {
  margin-top: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--mist);
}
.pull-quote footer {
  margin-top: var(--s-12);
  font-size: 13px;
  line-height: 1.2;
  color: var(--fog);
}
.pull-quote footer::before { content: "\2014\00a0"; }
.pull-quote + * { margin-top: var(--s-40); }

/* --------------------------------------------------------------------------
   5. Figures — break out to 960px inside a showcase frame
   -------------------------------------------------------------------------- */
.article-body > .article-figure {
  max-width: 960px;
  margin-top: var(--s-64);
}
.article-figure + * { margin-top: var(--s-64); }
/* A figure that opens a section sits close under its heading / kicker;
   consecutive figures (the benchmark's chart block) run at 32px. */
.article-body h2 + .article-figure,
.article-body h3 + .article-figure { margin-top: var(--s-24); }
.article-body .eyebrow + .article-figure { margin-top: var(--s-16); }
.article-figure + .article-figure { margin-top: var(--s-32); }
.article-figure .fig-cap {
  margin-top: var(--s-12);
  padding: 0 var(--s-4);
  gap: var(--s-12);
  align-items: baseline;
  font-family: var(--font-mono);   /* system: figure caption = mono 12px fog, label and text alike */
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.013em;
  color: var(--fog);
}
.article-figure .fig-cap .fig { flex: 0 0 auto; color: var(--fog); }
/* Live caption sentence under a live figure label — second line, fog */
.fig-cap .fig-sub { display: block; margin-top: var(--s-4); color: var(--fog); }

/* Greyscale frame: a later figure that would put a second orange accent inside
   the same ~900px viewport as an earlier one (at 1440). */
.showcase--mono img { filter: grayscale(1); }
/* Reduced motion: motion.css resets `filter` on every [data-anim] element (to cancel
   the mask blur), which would also strip this greyscale. Colour rule, not motion —
   restored at higher specificity. */
@media (prefers-reduced-motion: reduce) {
  html.js .showcase--mono > img[data-anim] { filter: grayscale(1) !important; }
}

/* --------------------------------------------------------------------------
   6. Charts — inline SVG in the system palette.
   One SVG per breakpoint family: .chart--d (desktop, 912-unit viewBox) and
   .chart--m (mobile, 318-unit viewBox). Text is sized in SVG units per
   breakpoint so it always renders near 13px.
   -------------------------------------------------------------------------- */
.chart { display: block; width: 100%; height: auto; }
.chart--m { display: none; }

.chart text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  fill: var(--fog);
}
.chart .val   { fill: var(--mist); font-feature-settings: "tnum", "cv01", "ss03", "zero"; }
.chart .ttl   { fill: var(--fog); }
.chart .grid  { stroke: var(--graphite); stroke-width: 1; }
.chart .axis  { stroke: var(--smoke); stroke-width: 1; }
.chart .bar   { fill: var(--smoke); }
.chart .bar--hi { fill: var(--fog); }
.chart .bar--accent { fill: var(--accent); }
.chart .pt    { fill: var(--mist); }
.chart .pt--hi { fill: var(--fog); }
.chart .pt--accent { fill: var(--accent); }
.chart .lbl-s { display: none; }

/* Chart marks populate once in view (motion.css dotIn via <g data-stagger>):
   the bars of the desktop charts grow from their baseline, the horizontal bars
   of the mobile charts from their left edge; points scale about their centre
   (motion.css default for [data-stagger] > circle). Axes, grid and labels are
   static. Mirrors .ui-bars[data-stagger] > i in the shell. */
.chart-bars[data-stagger] > rect { transform-box: fill-box; transform-origin: 50% 100%; }
.chart--m .chart-bars[data-stagger] > rect { transform-origin: 0 50%; }

@media (max-width: 900px) { .chart--d text { font-size: 19px; } }
@media (max-width: 700px) { .chart--d text { font-size: 24px; } .chart--d .lbl-l { display: none; } .chart--d .lbl-s { display: inline; } }
@media (max-width: 600px) { .chart--d text { font-size: 28px; } }
@media (max-width: 520px) { .chart--d { display: none; } .chart--m { display: block; } }

/* --------------------------------------------------------------------------
   6b. Chart panels — several live charts in ONE showcase frame (the
   benchmarking leaderboard charts). One focal object per screen: a 2×2 panel
   grid at ≥900px, a single column below. The frame keeps the system's 12px
   radius and 1px graphite hairline; its own padding is 0 so the hairlines
   between panels run edge to edge, and each panel carries the 24px pad
   (12px at ≤640px) and its live label as a mono 12px fog panel caption.
   Each panel keeps its desktop/mobile SVG pair and the breakpoint swap above.
   -------------------------------------------------------------------------- */
.showcase--fig.showcase--panels { padding: 0; }
.fig-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.fig-panel { min-width: 0; padding: var(--s-24); }
.fig-panel + .fig-panel { box-shadow: inset 0 1px 0 var(--graphite); }
.fig-panel-cap {
  margin-bottom: var(--s-12);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.013em;
  color: var(--fog);
}
@media (min-width: 900px) {
  .fig-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fig-panel + .fig-panel { box-shadow: none; }
  .fig-panel:nth-child(2n) { box-shadow: inset 1px 0 0 var(--graphite); }
  .fig-panel:nth-child(n + 3) { box-shadow: inset 0 1px 0 var(--graphite); }
  .fig-panel:nth-child(2n):nth-child(n + 3) {
    box-shadow: inset 1px 0 0 var(--graphite), inset 0 1px 0 var(--graphite);
  }
  /* Half-width panel: the 912-unit desktop SVG renders at ~0.47× (432px wide
     in a 960px frame), so text is set at 26 units (≈12px rendered) and the
     short model labels are used — the same treatment the ≤700px rule gives a
     full-width chart of similar pixel width. */
  .fig-panel .chart--d text { font-size: 26px; }
  .fig-panel .chart--d .lbl-l { display: none; }
  .fig-panel .chart--d .lbl-s { display: inline; }
  /* At 26 units a right-anchored "100%" axis label overhangs the viewBox by a
     few px; the panel's 24px pad absorbs it instead of the SVG clipping it. */
  .fig-panel .chart--d { overflow: visible; }
}
@media (max-width: 640px) { .fig-panel { padding: var(--s-12); } }

/* --------------------------------------------------------------------------
   7. Tables — greyscale hairline tables; scroll sideways when narrow
   -------------------------------------------------------------------------- */
.table-scroll {
  margin-top: var(--s-32);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll + * { margin-top: var(--s-32); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.table th {
  padding: 0 var(--s-16) 10px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 510;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fog);
  box-shadow: inset 0 -1px 0 var(--smoke);
  white-space: nowrap;
}
.table td {
  padding: var(--s-12) var(--s-16) var(--s-12) 0;
  color: var(--mist);
  vertical-align: top;
  box-shadow: inset 0 -1px 0 var(--graphite);
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table td:first-child { font-weight: 510; color: var(--mist); white-space: nowrap; }
.table .num { text-align: right; font-feature-settings: "tnum", "cv01", "ss03", "zero"; }

/* Two-column comparison of paragraphs */
.table--compare { min-width: 560px; }
.table--compare th { white-space: normal; }
.table--compare td,
.table--compare td { font-size: 14px; line-height: 1.5; }   /* data table cell row of the scale */
.table--compare td:first-child {
  width: 50%;
  padding: var(--s-16) var(--s-24) var(--s-16) 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mist);
  white-space: normal;
}
.table--compare td:last-child { padding-right: 0; }

/* --------------------------------------------------------------------------
   8. "More from the COE" — two-column list of text rows
   -------------------------------------------------------------------------- */
.more { margin-top: var(--s-96); }
.more .article-shell {
  padding-top: var(--s-96);
  box-shadow: inset 0 1px 0 var(--graphite);
}
.more-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-48);
  margin-top: var(--s-64);
}
.more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-24);
  align-items: center;
  padding: var(--s-20) 0;
  box-shadow: inset 0 -1px 0 var(--graphite);
  transition: color var(--dur-hover) var(--ease-ui);   /* the row is the link: text-link signature */
}
.more-title {
  grid-column: 1;
  font-size: 16px;
  font-weight: 510;
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: var(--paper);
}
.more-sum {
  grid-column: 1;
  margin-top: var(--s-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog);
}
.more-row .link-arrow { grid-column: 2; grid-row: 1 / 3; }
.more-row:hover .link-arrow { color: var(--paper); }
.more-row:hover .link-arrow::after { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   9. Responsive — 390px: full-width column and figures, tables scroll
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .article { padding-top: var(--s-64); }
  .article-body { padding-top: var(--s-64); }
  .more { margin-top: var(--s-64); }
  .more .article-shell { padding-top: var(--s-64); }
}
@media (max-width: 760px) {
  .more-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .article-title { font-size: 34px; }
  .article-title--long { font-size: 30px; }
  .article-title br { display: none; }
  .standfirst { font-size: 18px; }
  .article-header::after { margin-top: var(--s-32); }
  .article-body { padding-top: var(--s-48); }
  .article-body h2 { font-size: 22px; margin-top: var(--s-48); }
  .article-body h3 { font-size: 18px; margin-top: var(--s-40); }
  .article-body > .article-figure { margin-top: var(--s-48); }
  .article-figure + * { margin-top: var(--s-48); }
  .pull-quote { padding: var(--s-20); }
  .pull-quote p { font-size: 18px; }
  .more-list { margin-top: var(--s-40); }

  /* Narrow tables: tighter cells and a smaller header so a four-column
     leaderboard fits the column; wider tables still scroll. */
  .table { font-size: 13px; }
  .table th { padding-right: var(--s-12); }
  .table td { padding-right: var(--s-12); }
  .table th:last-child, .table td:last-child { padding-right: 0; }

  /* Two-column comparison stacks to one column: each row becomes a
     Traditional block and a Modern block, each under its own column label
     (data-label carries the live header text). Nothing scrolls or clips. */
  .table--compare { min-width: 0; }
  .table--compare thead { display: none; }
  .table--compare tbody,
  .table--compare tr,
  .table--compare td,
  .table--compare td:first-child { display: block; width: auto; }
  .table--compare tr { padding: var(--s-16) 0; box-shadow: inset 0 -1px 0 var(--graphite); }
  .table--compare tr:first-child { padding-top: 0; }
  .table--compare td,
  .table--compare td:first-child { padding: 0; box-shadow: none; }
  .table--compare td + td { margin-top: var(--s-16); }
  .table--compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s-4);
    font-size: 11px;
    font-weight: 510;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fog);
  }
}