/* Career Experience — the role timeline on the About page.
   Desktop grid: the heading sits top-left, then the portrait (left) and the
   role list (right) start on the same grid row, so the portrait's top edge
   lines up with the first experience row. Below 900px everything stacks in
   source order: heading, portrait + identity, then the list.
   Tokens, type scale and hairlines come from type-system.css + base.css;
   behaviour is in assets/js/career.js. */

#tw-career {
  padding: 150px 72px 120px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cx-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  column-gap: 6vw;
  row-gap: 6vh;
  align-items: start;
  max-width: 1560px;
  margin: 0 auto;
}
.cx-headblock { grid-column: 1; grid-row: 1; }
.cx-figure    {
  grid-column: 1;
  grid-row: 2;
  /* the list is far taller than the figure, so the portrait rides along in
     its grid area instead of scrolling away at the top of the section */
  position: sticky;
  top: 88px;
  align-self: start;
}
.cx-list      { grid-column: 2; grid-row: 2; }

/* ---- heading block ---- */

.cx-label {
  display: block;
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.2vh;
}

.cx-heading {
  font-size: clamp(34px, 3.5vw, 58px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--title-on-dark);
}

/* stands in for the removed lead paragraph: a fact, not a sentence */
.cx-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2.2vh;
  padding-top: 1.8vh;
  border-top: 1px solid var(--af-line-l);
  max-width: 15em;
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.cx-stat b { font-weight: 500; color: var(--tx-1); }
.cx-stat i { font-style: normal; color: var(--accent); }

/* ---- portrait ---- */

.cx-portrait {
  position: relative;
  border-top: 1px solid var(--accent);
  /* the figure is allowed to run past the bottom of its own frame */
  padding-bottom: 34px;
}
.cx-portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* the cutout is transparent, so the bleed simply dissolves into the page */
  margin-bottom: -34px;
  position: relative;
  z-index: 0;
}

/* contact strip, anchored to the frame's bottom while the figure runs past it */
.cx-cta {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: stretch;
  text-decoration: none;
  background: rgba(4, 6, 5, 0.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cx-cta-t {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-1);
}
.cx-cta-t i { font-style: normal; color: var(--tx-4); margin-left: 6px; }
.cx-cta-arr {
  display: grid;
  place-items: center;
  width: 44px;
  background: var(--accent);
  color: #04170c;
  font-size: 15px;
  transition: background 350ms ease;
}
.cx-cta:hover .cx-cta-arr { background: #5cf0a0; }

/* ---- identity + facts ---- */

.cx-meta { margin-top: 3.4vh; }

.cx-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5vh;
  border-bottom: 1px solid var(--af-line-l);
}
.cx-id-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-1);
}
.cx-id-name::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 1px;
}
.cx-id-soc { display: flex; align-items: center; gap: 12px; }
.cx-id-soc a {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  color: var(--tx-3);
  transition: color 300ms ease;
}
.cx-id-soc a:hover { color: var(--accent); }
.cx-id-soc svg { width: 14px; height: 14px; fill: currentColor; display: block; }

.cx-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.4vh 0;
  border-bottom: 1px solid var(--af-line-l);
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* --tx-4 lands at 3.4:1 on this background; this clears 4.5:1 */
.cx-fact dt { color: rgba(255, 255, 255, 0.55); }
.cx-fact dd { margin: 0; color: var(--tx-1); text-align: right; }

/* ---- the role rows ---- */

.cx-list { border-top: 1px solid var(--af-line-l); }

.cx-row {
  position: relative;
  border-bottom: 1px solid var(--af-line-l);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.cx-row.is-in { opacity: 1; transform: none; }

/* the editorial spine: a hairline that turns green on the active row */
.cx-row::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0;
  bottom: -1px;
  width: 1px;
  background: transparent;
  transition: background 420ms ease;
}
.cx-row:hover::before { background: rgba(53, 224, 127, 0.32); }
.cx-row.is-open::before,
.cx-row.is-open:hover::before { background: var(--accent); }

.cx-h { margin: 0; }

.cx-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 44px minmax(0, 1fr) 22px;
  align-items: start;
  gap: 18px;
  padding: 24px 4px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* base.css draws a 2px ring around any focused control. On a row-wide button
   that becomes a rectangle the width of the list, so it is replaced here — the
   spine goes solid green and the row picks up a green wash. Both are well
   above 3:1 on this background, so keyboard focus stays unmistakable. */
.cx-toggle:focus-visible {
  outline: none;
  background: linear-gradient(90deg, rgba(53, 224, 127, 0.11), rgba(53, 224, 127, 0) 46%);
}
.cx-row:has(.cx-toggle:focus-visible)::before { background: var(--accent); width: 2px; }

.cx-idx {
  padding-top: 4px;
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tx-4);
  transition: color 320ms ease;
}
.cx-toggle:hover .cx-idx { color: var(--tx-2); }
.cx-row.is-open .cx-idx { color: var(--accent); }

.cx-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #101211;
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 350ms ease;
}
.cx-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-toggle:hover .cx-logo,
.cx-row.is-open .cx-logo { border-color: rgba(255, 255, 255, 0.22); }

.cx-text { display: block; min-width: 0; }
.cx-role, .cx-org, .cx-when, .cx-where { display: block; }

.cx-role {
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--tx-1);
  transition: color 300ms ease;
}
.cx-toggle:hover .cx-role,
.cx-row.is-open .cx-role { color: var(--accent); }

/* inactive metadata sits back a step; the role title carries the row */
.cx-org {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tx-3);
  transition: color 300ms ease;
}
.cx-row.is-open .cx-org { color: var(--tx-2); }
/* the date/location line sits back through scale, not through a colour that
   would drop under 4.5:1 — --tx-4 measures 3.3:1 on this background */
.cx-when,
.cx-where {
  margin-top: 3px;
  font-family: var(--af-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.48);
}

/* the +/− affordance */
.cx-mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  justify-self: end;
  color: var(--tx-4);
  transition: color 300ms ease, transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cx-mark::before,
.cx-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 450ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease;
}
.cx-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.cx-toggle:hover .cx-mark { color: var(--tx-2); }
.cx-row.is-open .cx-mark { color: var(--accent); transform: rotate(180deg); }
.cx-row.is-open .cx-mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* panel: 0fr -> 1fr keeps the reveal height-agnostic, no magic numbers */
.cx-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cx-row.is-open .cx-panel { grid-template-rows: 1fr; }
.cx-panel-in { overflow: hidden; }

/* an elevated surface rather than another border, so the open row reads as a
   panel without adding weight to the list */
.cx-panel-body {
  margin: 0 4px 22px 92px;
  padding: 22px 26px 20px;
  border-radius: 12px;
  background: #0b0e0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 340ms ease 60ms, transform 400ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.cx-row.is-open .cx-panel-body { opacity: 1; transform: none; }
/* a link-only panel needs far less room than one carrying bullets */
.cx-panel-body:not(:has(.cx-points)) { padding: 15px 26px; }

.cx-points {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 70ch;
}
.cx-points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--tx-2);
  text-wrap: pretty;
}
.cx-points li + li { margin-top: 11px; }
.cx-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

.cx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-family: var(--af-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-1);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.cx-points + .cx-link { margin-top: 22px; }
.cx-link i { font-style: normal; color: var(--accent); transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1); }
.cx-link:hover { color: var(--accent); }
.cx-link:hover i { transform: translate(3px, -3px); }

/* ---- tablet ---- */
@media (max-width: 1180px) {
  #tw-career { padding: 120px 44px 96px; }
  .cx-grid { column-gap: 44px; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
  .cx-row::before { left: -16px; }
  .cx-toggle { grid-template-columns: 26px 42px minmax(0, 1fr) 22px; gap: 14px; }
  .cx-panel-body { margin-left: 82px; }
}

/* ---- stacked: heading, portrait + identity, then the list ---- */
@media (max-width: 900px) {
  #tw-career { padding: 68px 22px 72px; }
  .cx-grid { display: block; }
  .cx-figure { position: static; margin-top: 5vh; max-width: 460px; }
  .cx-list { margin-top: 7vh; }
  .cx-row::before { left: -10px; }
  .cx-toggle { grid-template-columns: 24px 38px minmax(0, 1fr) 20px; gap: 12px; padding: 18px 2px; }
  .cx-logo { width: 38px; height: 38px; border-radius: 9px; }
  .cx-idx { font-size: 10.5px; }
  .cx-panel-body {
    margin: 0 0 16px 74px;
    padding: 18px 18px 16px;
    border-radius: 10px;
  }
  .cx-points li { font-size: 14px; line-height: 1.7; }
  .cx-points li + li { margin-top: 9px; }
}

@media (max-width: 560px) {
  .cx-figure { max-width: none; }
  .cx-toggle { grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 12px; }
  .cx-logo { display: none; }          /* the index number carries the row here */
  .cx-panel-body { margin-left: 34px; }
}

/* ---- reduced motion: show everything, animate nothing ---- */
@media (prefers-reduced-motion: reduce) {
  .cx-row { opacity: 1; transform: none; }
  .cx-row::before,
  .cx-panel,
  .cx-panel-body,
  .cx-logo,
  .cx-mark { transition: none; }
  .cx-panel-body { opacity: 1; transform: none; }
}