/* pages/about/evolution.css — About (PR #43 G3: chassis B v2, PR43B-Q15). Two arcs, Lab first, each with three
   organisms: a manifesto carousel (shared/carousel.css), its milestones on the S10-B journey rail (G3 round 3,
   PR43-Q22: one vertical timeline per arc at every width, square nodes) and its figures (shared/brief-charts.css).
   This file carries only what is About's own: the arc and organism heads, and the journey's rail, nodes, rows,
   marks, plates, links and filter (re-scoped from #evolution to .tl). */

/* ---- Arcs and organism heads ---- */
/* One separation opens and closes each arc (PR43-Q27): hero or closing rule → the date label, and subline → the
   first organism's eyebrow, the same in Lab and Pre-Lab. Fluid: 60 px at 390 (JD's phone pick), 202 px at 1440 (his
   desktop pick), capped at 12.6 rem. */
.arc { --arc-gap: clamp(4rem, 14vw, 12.6rem); padding-top: var(--arc-gap); }
.arc--lab { padding-bottom: 0; }   /* the closing rule ends Lab; Pre-Lab's own gap follows it */
.ah-sub + .org { margin-top: var(--arc-gap); }
/* The slogan, its date label and its subline: shared/display.css (shared with Contact, PR43-Q29) */
/* The threshold between the arcs (PR43-Q29, prototype B): the closing rule with the figures' tag on its left
   ("THE THRESHOLD" / "EL UMBRAL"); the block is the tag's height, the 4 px rule runs through its middle, the square end
   stays. */
.arc-th { position: relative; display: flex; align-items: center; margin: clamp(3rem, 6vw, 5rem) 0 0; }
.arc-th::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: var(--color-brand-purple); }
.arc-th__t { position: relative; margin-left: clamp(1rem, 3vw, 2.25rem); padding: .45rem .9rem; background: var(--color-brand-purple);
  font-size: .78rem; font-weight: var(--fw-bold); letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; color: var(--color-on-brand); white-space: nowrap; }
.arc-th__end { position: absolute; right: 0; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--color-brand-purple); }
/* The closing rules between the arcs and after Pre-Lab (G3 round 1; kept without the index, PR43-Q24): the briefs'
   closing rule (shared/brief-index.css .brief-end), a 4 px purple rule with a square end. */
.arc-end { display: block; position: relative; height: 4px; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; border: 0;
  background: var(--color-brand-purple); overflow: visible; }
.arc-end::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  background: var(--color-brand-purple); }
.org { margin-top: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--nav-height) + 1.5rem); }   /* a slide CTA to an organism lands its eyebrow clear of the nav */
.org__head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
/* .org__verdict, the eyebrow spacing, the lede and the centring: shared/editorial.css (PR43-Q29) */


/* ---- Milestones: the S10-B journey, one per arc (PR43-Q22, prototype D) ----
   The rail, the square node and the chevron are .timeline's (shared/designops-variant.css); these rules are scoped to
   .tl so they win on specificity, never on load order. Each entry's first row (category, date, mark) is one fixed
   height, --row, the tallest mark's; the node sits on that row's centre line and the rail runs from the first node's
   centre to the last's, so every node lines up with its own entry at every width. */
.tl { --row: 3rem; }
/* The live measure (HEAD #evolution .jr-controls, .jr-track; PR43-Q24): one 46 rem column, centred; the filter spans it
   and the count sits on its own row below. */
.tl .jr-controls { max-width: 46rem; margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); }
.tl .jr-track { position: relative; max-width: 46rem; margin: 0 auto; }
.tl .timeline::before { top: calc(var(--row) / 2); bottom: auto; height: var(--rail, 0px); }
.tl .jr-fill { position: absolute; left: 0; top: calc(var(--row) / 2); width: 2px; height: 0; background: var(--color-brand-purple);
  transition: height var(--duration-ui) var(--ease-decelerate); }
.tl .jr-item .timeline__marker { top: calc(var(--row) / 2 - 6px); background: var(--color-border-soft);
  transition: background var(--duration-ui) var(--ease-standard), transform var(--duration-ui) var(--ease-decelerate); }
.tl .jr-item.is-past .timeline__marker { background: var(--color-purple-light); }
.tl .jr-item.is-current .timeline__marker { background: var(--color-brand-purple); transform: translateX(-50%) scale(1.35); }
.tl .jr-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; height: var(--row); margin-bottom: 0.3rem; }
.tl .jr-class { font-size: 0.625rem; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); border: 1px solid var(--color-border-soft); padding: 0.1rem 0.4rem; white-space: nowrap; }
.tl .jr-period { font-size: 0.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Heading row: the whole row is the control's hit area, at least 44 px tall; the chevron follows the title's last
   word (PR #35, G2(d)), painted as a background so Safari draws it (a mask on an inline box shows a square there). */
.tl .timeline__toggle { align-items: flex-start; min-height: 44px; }
.tl .jr-head { flex: 1; }
.tl .timeline__title::after { content: "\00a0"; padding-right: 1.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%23A100FF' stroke-width='2.3'/%3E%3C/svg%3E") no-repeat right 58% / 0.74em 0.74em; }
.tl .timeline__item.is-open .timeline__title::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 7.8l4-4 4 4' fill='none' stroke='%23A100FF' stroke-width='2.3'/%3E%3C/svg%3E"); }
.tl .jr-sub { margin-top: 0.15rem; font-size: 0.75rem; font-weight: var(--fw-regular); line-height: 1.5; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .tl .jr-meta { gap: 0.4rem; }
  .tl .timeline__item { padding-bottom: clamp(1.25rem, 4vw, 1.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .tl .jr-fill, .tl .jr-item .timeline__marker { transition: none; }
}

/* ---- JOURNEY · institution and platform marks (S10-B) ----
   Each mark is shown through a window onto its own file: the box clips, the
   image is scaled so the chosen region fills it, and the file itself is never
   touched - no asset is re-rendered, recoloured or cropped, and Main's
   ticker, which shares the eight logo files, is unaffected.

   --cl/--ct/--cw/--ch are the region the principal framed at Gate G5, in the
   file's own pixels; --cvw/--cvh are that file's canvas. Every region he
   framed is square, so each logo mark renders as a square badge, --s on a
   side. Five sit at a credential mark's height; Hunt, Lima Airport and HEC
   Montreal are 50% wider by the principal's direction, and being square that
   makes them 50% taller too - the proportions are kept, not stretched. HEC
   keeps the wordmark it already had, nothing re-framed or re-treated, at
   that same width. */
.tl .jr-mark {
  --s: 2rem;        /* one height for every mark, a credential mark's own */
  --cvw: 1024;
  --cvh: 768;
  display: inline-block;
  overflow: hidden;
  height: var(--s);
  width: var(--s);
  flex: 0 0 auto;
}
.tl .jr-mark__img {
  display: block;
  width: calc(var(--s) * var(--cvw) / var(--cw));
  height: calc(var(--s) * var(--cvh) / var(--ch));
  max-width: none;
  margin-left: calc(-1 * var(--s) * var(--cl) / var(--cw));
  margin-top: calc(-1 * var(--s) * var(--ct) / var(--ch));
}
.tl .jr-mark[data-mark="esan"]    { --cl:158; --ct:280; --cw:213; --ch:213; }
.tl .jr-mark[data-mark="centrum"] { --cl:118; --ct:267; --cw:234; --ch:234; }
.tl .jr-mark[data-mark="uvic"]    { --cl:125; --ct:246; --cw:273; --ch:273; }
.tl .jr-mark[data-mark="um"]      { --cl:7;   --ct:295; --cw:185; --ch:185; }
.tl .jr-mark[data-mark="hunt"]    { --cl:121; --ct:-4;  --cw:771; --ch:771; --s: 3rem; }
.tl .jr-mark[data-mark="utec"]    { --cl:587; --ct:227; --cw:270; --ch:270; }
.tl .jr-mark[data-mark="lap"]     { --cl:202; --ct:67;  --cw:626; --ch:626; --s: 3rem; }

/* HEC Montreal: the institution's own mark with its plate removed and its
   viewBox trimmed to the letterforms, so there is nothing left to crop. */
.tl .jr-mark[data-mark="hec"] {
  --s: 3rem;         /* 50% wider than the square badges, as directed */
  width: var(--s);
  overflow: visible;
  display: inline-flex;
  align-items: center;   /* the wordmark is shorter than the square; centre it */
}
.tl .jr-mark[data-mark="hec"] .jr-mark__img {
  width: var(--s);   /* Lima Airport's width; the height follows the wordmark */
  height: auto;
  margin: 0;
}

/* The logo files are white on transparent and vanish on the light ground;
   shared/ticker.css already inverts the same files on Main. HEC's letterforms
   are black, so they take the opposite treatment - the one GitHub needs. */
html[data-theme="light"] .tl .jr-mark:not(.jr-mark--platform):not([data-mark="hec"]) .jr-mark__img { filter: invert(1); }
.tl .jr-mark[data-mark="hec"] .jr-mark__img { filter: invert(1); }
html[data-theme="light"] .tl .jr-mark[data-mark="hec"] .jr-mark__img { filter: none; }

/* Platform marks on the Build items: vector, nothing to clip. GitHub's mark
   is near-black and disappears on the dark ground, not the light one. */
.tl .jr-mark--platform {
  overflow: visible;
  width: auto;
  height: 1.6rem;   /* 20% under the credential marks, principal's direction at G5 */
}
.tl .jr-mark--platform .jr-mark__img {
  height: 1.6rem;
  width: auto;
  max-width: 1.6rem;
  margin: 0;
}
.tl .jr-mark--platform[data-mark="figma"] .jr-mark__img { max-width: 1.12rem; }
.tl .jr-mark--platform[data-mark="github"] .jr-mark__img { filter: invert(1); }
html[data-theme="light"] .tl .jr-mark--platform[data-mark="github"] .jr-mark__img { filter: none; }

/* Outbound links inside a body — Build artifacts and credential pages. */
.tl .jr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.55rem;
}
.tl .jr-link {
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  color: var(--color-purple-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--duration-ui) var(--ease-standard);
}
.tl .jr-link:hover { color: var(--color-brand-white); }
.tl .jr-link:focus-visible {
  outline: 2px solid var(--color-brand-purple);
  outline-offset: 3px;
}

/* ---- JOURNEY · category filter (S10-B; a select since PR #40) ----
   Square by the universal reset, tokens in both themes, and no colour is
   asked to carry the category: the option's own word does that. */
/* The filter is Contact's select, rule for rule (contact.css: .form-group, .form-label, .form-select,
   .select-wrapper; PR #40, JD at G1): one field across the column at every width, the platform's picker
   on phones, and focus shown by the purple border alone, never an outline on top of it. */
.tl .jr-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tl .jr-select__label {
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tl .jr-select__wrap {
  position: relative;
}
.tl .jr-select__wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
  pointer-events: none;
}
.tl .jr-select__control {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--color-brand-white);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  width: 100%;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-ui) var(--ease-standard),
              background var(--duration-ui) var(--ease-standard);
}
.tl .jr-select__control:hover {
  background: var(--surface-input);
  border-color: var(--color-border-hover);
}
.tl .jr-select__control:focus {
  border-color: var(--color-brand-purple);
  background: var(--surface-input);
}
.tl .jr-countrow {
  display: flex;
  align-items: center;
  margin-top: 0.7rem;
}
.tl .jr-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.tl .jr-empty {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 1rem 0 0.5rem;
}
.tl .jr-empty[hidden] { display: none; }

@media (max-width: 767px) {
  .tl .jr-count { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tl .jr-select__control,
  .tl .jr-link { transition: none; }
}

/* ---- JOURNEY · the credential marks (S10-B) ----
   The mark fills its own box: no plate ground, no border, no padding, so
   nothing blank sits between the artwork and the edge of the badge area. The
   box shrink-wraps each mark at one shared height, which keeps the row
   rhythm even while the widths differ - and keeps the Beta Gamma Sigma
   ribbon uncropped, which F11 section F11-d requires.

   This retires the uniform plate that SPEC-AboutJourney section 4 and
   SPEC-Badges section 3.1(b) specified. Principal's direction at Gate G4.
   The files themselves are trimmed to their own content box; no mark is
   recoloured, and the white inside the Microsoft frame's rounded corners is
   the issuer's own artwork and stays. */
.tl .jr-plate {
  display: inline-flex;
  align-items: center;
}
.tl .jr-plate__img {
  height: 2rem;
  width: auto;
  max-width: 4.5rem;
  object-fit: contain;
}

/* ── Hero CV downloads (PR35-Q54) ──────────────────────────────
   The Contact page's channel row (shared/channels.css) under the hero heading. The space from
   the heading to the first label repeats the bridge's own rule-to-heading space: on phones the
   44 px targets centre their labels, so the row tucks up by 0.375rem; from 768 the heading
   wrapper's 1rem plus 1rem matches. Between 1024 and 1279 the split column is narrow (356 px of
   text at 1024), so About's opening takes 3rem of padding instead of 4rem/5rem: the heading and
   both links then end inside the first screen, side by side. shared/bridge.css stays as it is,
   so Main's positioning bridge is untouched. */
#bridge1-onboarding .bridge__downloads { margin-top: -0.375rem; }
/* Phones (JD, PR35-Q57, Q59): one row, MD right after PDF, as from 768. The full labels need
   more than the 260–330 px column, so each wraps inside its own link ("Download CV" over
   "(PDF)"), beside its icon. */
@media (max-width: 767px) {
  #bridge1-onboarding .bridge__downloads { flex-direction: row; align-items: center; }
}
@media (min-width: 768px) {
  #bridge1-onboarding .bridge__downloads { margin-top: 1rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #bridge1-onboarding .bridge__content { padding: 3rem; }
}

/* ---- Pre-Lab's four figures: four across from 1024, two by two from 768 (brief-charts.css sets three) ---- */
/* .hlr--4: shared/dashboard.css (PR43-Q30) */