/* ==========================================================================
   B&A AI Center of Excellence — section-page components
   Loaded after styles.css on the eight section pages. Adds only what the
   shell lacks: page hero, feature rows (text + figure), ledger rows
   (key + body), team rows, the deployment-status mock geometry, the
   trailing page-ask row.

   Same law as styles.css: one chromatic fill per view (.btn-primary only),
   Inter 300/400/510/590, radii 2/4/6/12/9999, hairline elevation, 96px rhythm,
   two columns at most, body copy in fog, emphasis in mist. Headings are
   64 (page title) and 48 (feature title) only; list titles are 20px text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page hero — eyebrow · 64px two-line title · one fog paragraph · text link
      The title is the page's hero (64 / 510 / 1.0 / -0.022em). Line breaks are
      authored (<br>) so every title reads as two short lines; ≤560px the breaks
      are dropped and the title wraps naturally at 44px.
   -------------------------------------------------------------------------- */
.page-hero { padding-top: var(--s-96); }
.page-hero .eyebrow { margin-bottom: var(--s-16); }
.page-title {
  font-size: 64px;
  font-weight: 510;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--paper);
  max-width: 18em;
}
.page-hero .lede { margin-top: var(--s-24); }
.page-hero .lede a { color: var(--mist); transition: color var(--dur-hover) var(--ease-ui); }   /* text-link signature: color .1s */
.page-hero .lede a:hover { color: var(--paper); }
.page-hero .hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-24);
  margin-top: var(--s-32);
}
@media (max-width: 900px) { .page-title { font-size: 48px; } }
@media (max-width: 560px) {
  .page-title { font-size: 44px; text-wrap: balance; }
  .page-title br { display: none; }
}

/* --------------------------------------------------------------------------
   Type roles on these pages. Only three heading sizes exist site-wide —
   64 (page title) · 48 (feature title) · 72 (closing display, home only).
   Everything else below is body-scale text, never an <h*> element.
   -------------------------------------------------------------------------- */

/* Feature title — the section heading (48 / 510 / 1.0 / -0.022em, paper):
   the ten app names, the four governance controls, the five build steps.
   Always authored as 2–4-word stacked lines (<br>); the breaks stay at every
   width because each line is short. */
.t-feature {
  font-size: 48px;
  font-weight: 510;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--paper);
}
@media (max-width: 900px) { .t-feature { font-size: 40px; } }
@media (max-width: 560px) { .t-feature { font-size: 32px; } }

/* Body emphasis (20 / 590 / 1.33 / -0.012em, mist) — the title of a list or
   ledger entry: article titles, monthly entries, team names. Text, not a heading,
   so a long title wraps like a sentence instead of a paragraph-width heading. */
.t-title {
  font-size: 20px;
  font-weight: 590;
  line-height: 1.33;
  letter-spacing: -0.012em;
  color: var(--mist);
}
/* Featured-item title: capped and balanced so it breaks into two or three
   short, even lines — never at a hyphen inside a compound ("40-Year"). */
.t-title--lead { max-width: 15.5em; text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* Body-large emphasis (17 / 590, mist) — a sub-label inside an entry ("Key Wins"). */
.t-sublabel {
  font-size: 17px;
  font-weight: 590;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--mist);
}
/* Cascade guard: `.ledger-body p` sets 15px fog for prose, which out-ranked the
   entry-title classes above (they computed 15/590 fog). Titles keep their scale. */
.ledger-body .t-title, .ledger-body .title-link {
  font-size: 20px; font-weight: 590; line-height: 1.33; letter-spacing: -0.012em; color: var(--mist);
}
.ledger-body .t-sublabel { font-size: 17px; font-weight: 590; line-height: 1.6; letter-spacing: 0; color: var(--mist); }
.ledger-body b { font-weight: 510; color: var(--mist); }   /* inline emphasis: body size, 510, mist */

/* A heading that is itself the link (article index). Colour is inherited;
   hover steps one rung up the grey ladder. Text-link signature: color .1s. */
.title-link { color: inherit; transition: color var(--dur-hover) var(--ease-ui); }
.t-title .title-link:hover { color: var(--paper); }
.t-subheading .title-link:hover { color: var(--mist); }

/* Neutral dot — the only status signal on these pages. Never a hue. */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--fog);
}
.dot--ash  { background: var(--ash); }
.dot--mist { background: var(--mist); }

/* Plain list with a small fog tick — for key-wins style bullet lists */
.list-plain { display: flex; flex-direction: column; gap: var(--s-8); }
.list-plain li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--fog);
}
.list-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--smoke);
}
.list-plain li b { color: var(--mist); font-weight: 510; }

/* --------------------------------------------------------------------------
   2. Feature row — copy on one side, one figure in a showcase frame on the
      other. 5:7 so the figure is the dominant object. Alternate with
      .two-col--reverse. Single column ≤900 (copy first, figure second).
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-48);
  align-items: center;
}
/* Reversed rows swap the columns too, so the figure keeps the 7fr side. */
.feature.two-col--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.two-col--reverse > :first-child { order: 2; }
.feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}
.feature-copy .eyebrow { margin-bottom: 0; }
.feature-copy .lede { max-width: 460px; }
.feature-copy .t-feature { margin-bottom: var(--s-4); }
.feature-copy .links { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); }
.feature-stack { display: flex; flex-direction: column; gap: var(--s-48); }

.figure { display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
.figure .fig { padding-left: 2px; }

/* A figure's orange accent is that screen's one chromatic element. Where
   feature rows stack (the ten apps), rows pitch ~508px, so every second
   figure is shown grey-scale: orange accents then sit ≥1000px apart and
   never share a 900px viewport. The figure itself is unchanged. */
.figure--grey .showcase--fig > img { filter: grayscale(1); }

@media (max-width: 900px) {
  .feature,
  .feature.two-col--reverse { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .feature.two-col--reverse > :first-child { order: 0; }
}

/* --------------------------------------------------------------------------
   3. Ledger — a list of two-column rows: key left, body right, hairlines
      between. Keys are mono dates/IDs or category labels; the split variant
      puts a 48px feature title in the key column and the copy beside it.
   -------------------------------------------------------------------------- */
.ledger { display: flex; flex-direction: column; border-top: 1px solid var(--graphite); }
.ledger-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-8) var(--s-48);
  padding: var(--s-32) 0;
  border-bottom: 1px solid var(--graphite);
  align-items: start;
}
.ledger--narrow .ledger-row { grid-template-columns: 160px minmax(0, 1fr); }
.ledger--wide .ledger-row   { grid-template-columns: 320px minmax(0, 1fr); }
.ledger--split .ledger-row  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--s-48) 0; }
.ledger--tight .ledger-row  { padding: var(--s-24) 0; }
.ledger-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-8);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fog);
  padding-top: 3px; /* optically levels 13px caps with the 20px title */
}
.ledger-key .t-mono { font-size: 13px; color: var(--mist); }
.ledger-key--title { padding-top: 0; }
.ledger-key--feature { padding-top: 2px; } /* levels 13px mono with a 48px feature title */
.ledger-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-8);
  min-width: 0;
}
.ledger-body p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--fog);
  max-width: 640px;
}
.ledger-body .t-feature { margin-bottom: var(--s-8); }
.ledger-body .t-title { max-width: 640px; }
.ledger-body .t-sublabel { margin-top: var(--s-8); }
.ledger-body .list-plain { margin-top: 0; }
.ledger-body .source { font-size: 13px; line-height: 1.4; color: var(--ash); }
.ledger-body .link-arrow { margin-top: var(--s-4); }
.ledger-body .tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin-top: var(--s-4); }
/* Split rows: the copy column levels with the title's cap height */
.ledger--split .ledger-body { padding-top: 6px; }

@media (max-width: 760px) {
  .ledger-row,
  .ledger--narrow .ledger-row,
  .ledger--wide .ledger-row,
  .ledger--split .ledger-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); padding: var(--s-24) 0; }
  .ledger--split .ledger-row { padding: var(--s-32) 0; }
  .ledger-key, .ledger-key--feature { padding-top: 0; }
  .ledger--split .ledger-body { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   4. Team rows — photo left, name / title / bio right
   -------------------------------------------------------------------------- */
.team { display: flex; flex-direction: column; border-top: 1px solid var(--graphite); }
.team-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-48);
  padding: var(--s-40) 0;
  border-bottom: 1px solid var(--graphite);
  align-items: start;
}
.team-photo {
  width: 200px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-6);
  filter: grayscale(1);   /* portraits are greyscale: no chroma outside the one accent per view */
  background: var(--carbon);
}
.team-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.team-name { font-size: 20px; font-weight: 590; line-height: 1.33; letter-spacing: -0.012em; color: var(--mist); }
.team-title { margin-top: var(--s-4); font-size: 13px; line-height: 1.4; color: var(--fog); }
.team-bio {
  margin-top: var(--s-16);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--fog);
  max-width: 640px;
}
@media (max-width: 640px) {
  .team-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-20); padding: var(--s-32) 0; }
  .team-photo { width: 160px; }
}

/* --------------------------------------------------------------------------
   5. Product-UI mock — "Deployment status" (.ui-app--status), deployed.html
      The page's one giant showcase. Rail → top bar → one KPI row → filter
      toolbar → the eight prototypes with a grey "Up" dot → foot. Composed
      from the shell's .ui-* parts; only the table geometry is page-specific.
      Grey-scale only; the one filled button is bone.
      Rows grow to their text — name and description wrap, never truncate.
   -------------------------------------------------------------------------- */
.ui-app--status { grid-template-columns: 156px minmax(0, 1fr); }
.ui-table--status .ui-tr {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 64px;
  height: auto;
  min-height: 44px;
  padding: 10px 16px;
  align-items: center;
}
.ui-table--status .ui-tr--head { min-height: 32px; padding: 0 16px; }
.ui-table--status .ui-td-name,
.ui-table--status .ui-td-desc { white-space: normal; line-height: 1.4; }
.ui-table--status .ui-td-status { justify-self: end; }
@media (max-width: 760px) {
  .ui-app--status { grid-template-columns: minmax(0, 1fr); }
  .ui-app--status .ui-rail { display: none; }
}
@media (max-width: 640px) {
  /* Name · Up on the first row, the description under them */
  .ui-table--status .ui-tr {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 4px 12px;
    padding: 10px 12px;
  }
  .ui-table--status .ui-tr--head { grid-template-columns: minmax(0, 1fr) max-content; padding: 0 12px; }
  .ui-table--status .ui-th-desc { display: none; }
  .ui-table--status .ui-td-name   { grid-column: 1; grid-row: 1; }
  .ui-table--status .ui-td-status { grid-column: 2; grid-row: 1; }
  .ui-table--status .ui-td-desc   { grid-column: 1 / -1; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   6. Page ask — the live pages end on one call. A hairline and one text link
      (or, on the inbox page only, the site's single orange button).
   -------------------------------------------------------------------------- */
.page-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-24);
  padding-top: var(--s-24);
  border-top: 1px solid var(--graphite);
}

/* --------------------------------------------------------------------------
   7. Motion hooks (motion.css / motion.js do the work; see design-system.md §Motion)
      Page top: [data-hero] wraps the header (and, where the first showcase sits in
      the first screen, that section too) — title data-anim="mask", lede
      data-anim="fade", the first figure / mock / portrait row takes slot +.6s.
      In view: figure images data-anim="fade"; the deployed mock's rail
      slide-left + KPI / table data-stagger; team rows data-stagger (portrait,
      then name block — the one place a name pops, as part of a mark row).
      Nothing else here needs CSS: HTML stagger children fade (rowIn — text never
      scales; only SVG marks get dotIn), and every text link above already carries
      the .1s colour signature.
   -------------------------------------------------------------------------- */

/* Reduced motion: motion.css resets `filter` on every [data-anim] element and
   [data-stagger] child (to cancel the mask blur), which would also strip the
   greyscale from the alternate figures and the portraits. Greyscale is a colour
   rule, not motion — restored here at higher specificity. */
@media (prefers-reduced-motion: reduce) {
  html.js .figure--grey .showcase--fig > img[data-anim],
  html.js .team-row[data-stagger] > .team-photo { filter: grayscale(1) !important; }
}