@font-face { font-family: Archivo; src: url(/fonts/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

@view-transition { navigation: auto; }

/* One colour family: teal for everything that is not text */
:root {
  --ink: #14202b; --ink-2: #4a5763; --ink-3: #6b7783; --line: #e6e9ec; --grid: #f0f2f4;
  --l1: #8fb9b6; --l2: #4f9a95; --l3: #0b5f5a;
  --deep: #08302f; --tint: #eaf3f2; --page: #f2f6f5; --dot: #d3dfdd;
  --on-deep: #fff; --on-deep-2: #c5e3de;
  --pad: clamp(20px, 3.4vw, 48px); --head: 176px;
  --side: clamp(228px, calc((100vw - 1292px) / 2), 320px);
  --center: 1200px;
  --spring: cubic-bezier(.2, .75, .2, 1);
  --shadow: 0 1px 3px rgb(8 48 47 / .08), 0 14px 40px rgb(8 48 47 / .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 1rem/1.5 Archivo, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 20px 20px, var(--page); }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--l3); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ico { display: inline-block; flex: none; width: 1.125rem; height: 1.125rem; color: var(--l3); }
.tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); transition: background-color .25s, transform .25s var(--spring); }
.tile .ico { width: 1.25rem; height: 1.25rem; transition: color .25s; }
.tile--lg { width: 46px; height: 46px; border-radius: 12px; }
.tile--lg .ico { width: 1.5rem; height: 1.5rem; }

/* Banner */
.banner { position: relative; overflow: hidden; color: var(--on-deep); background: url(/banner.svg) right center / cover no-repeat, linear-gradient(105deg, var(--deep) 0%, #0a4744 62%, var(--l3) 100%); }
.banner__live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pk { fill: none; stroke: #c9f7ee; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 109; opacity: 0; }
.hb { fill: none; stroke: #a8ecdf; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.banner__in { position: relative; padding: clamp(36px, 4.4vw, 56px) var(--pad) calc(clamp(32px, 4vw, 48px) + 56px); max-width: var(--center); margin-inline: auto; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; }
.banner__line { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.3; margin-top: 12px; text-wrap: balance; }
.banner__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; color: var(--on-deep-2); font-size: .9375rem; }
.banner__meta li { display: flex; align-items: center; gap: 8px; }
.banner__meta .ico { color: var(--on-deep-2); width: 1rem; height: 1rem; }
.banner__meta a { text-decoration-color: rgb(255 255 255 / .35); }
.banner__meta a:hover { color: #fff; text-decoration-color: currentColor; }
.banner :focus-visible { outline-color: #fff; }

/* Page: the sheet in the middle, infographics either side when there is room */
.layout { position: relative; z-index: 1; margin-top: -56px; }
.sheet { position: relative; max-width: 1200px; margin-inline: auto; padding: clamp(24px, 3vw, 36px) var(--pad) clamp(32px, 4vw, 56px); background: #fff; border-radius: 16px; box-shadow: var(--shadow); }
.sheet--plain { margin-top: 48px; }

/* Infographic cards. Below 1340px they become a swipeable strip under the sheet. */
.ig-defs { position: absolute; }
.rail { display: flex; gap: 14px; padding: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.rail--l { margin-top: 8px; }
.rail--r { padding-top: 0; }
.info { flex: 0 0 min(292px, 80vw); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); scroll-snap-align: center; transition: opacity .7s ease, transform .5s var(--spring), box-shadow .3s; }
.info:hover { box-shadow: 0 2px 6px rgb(8 48 47 / .1), 0 20px 48px rgb(8 48 47 / .14); }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.info figcaption { display: grid; gap: 4px; }
.info strong { font-size: 1.125rem; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
.info figcaption > span:last-child { font-size: .8438rem; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.info__legend { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-2); }
.info__legend i { width: 10px; height: 10px; border-radius: 3px; }
.info__legend i:not(:first-child) { margin-left: 8px; }
.ig-k1 { background: #0f6f69; }
.ig-k2 { background: #b4d6d2; }

@media (min-width: 1340px) {
  :root { --center: min(1200px, calc(100vw - 2 * var(--side) - 84px)); }
  .layout { display: grid; grid-template-columns: var(--side) minmax(0, 1200px) var(--side); column-gap: 22px; justify-content: center; padding-inline: 20px; }
  .sheet { grid-column: 2; grid-row: 1; width: 100%; }
  .rail { flex-direction: column; justify-content: space-between; grid-row: 1; padding: 0; margin: 0; overflow: visible; }
  .rail--l { grid-column: 1; }
  .rail--r { grid-column: 3; }
  /* Cards stay on screen and stack as the page scrolls, so the sides are never empty. */
  .info { flex: 0 0 auto; position: sticky; top: 16px; }
  .info.is-covered { visibility: hidden; }
  .info:hover { box-shadow: 0 2px 6px rgb(8 48 47 / .1), 0 24px 56px rgb(8 48 47 / .18); }
}

/* Drawing styles */
.ig-t { font: 500 15px Archivo, ui-sans-serif, system-ui, sans-serif; fill: var(--ink-2); }
.ig-t--strong { font-weight: 600; fill: var(--ink); }
.ig-t--halo { paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.ig-t--sm { font-size: 14px; }
.ig-t--xs { font-size: 13.5px; fill: var(--ink-3); }
.ig-t--lg { font-size: 16.5px; font-weight: 700; }
.ig-t--white { fill: #fff; font-weight: 600; }
.ig-t--num { font-size: 38px; font-weight: 700; fill: var(--l3); letter-spacing: -.02em; }
.ig-t--hero { font-size: 66px; font-weight: 700; fill: var(--l3); letter-spacing: -.02em; }
.ig-p1 { fill: url(#ig-deep); }
.ig-p2 { fill: url(#ig-soft); }
.ig-ground, .ig-line { fill: none; stroke: #cfdcda; stroke-width: 1.5; }
.ig-pole { fill: none; stroke: var(--l3); stroke-width: 2.4; stroke-linecap: round; }
.ig-flag { fill: var(--l3); transform-box: fill-box; transform-origin: 100% 50%; }
.ig-climber { fill: #fff; stroke: var(--l3); stroke-width: 3; offset-distance: 100%; offset-rotate: 0deg; }
.ig-halo { fill: none; stroke: var(--l3); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .5; }
.ig-slowspin { transform-origin: 140px 104px; }
.ig-spin { transform-origin: 186px 92px; }
.ig-ring { fill: none; stroke: #e0eeec; stroke-width: 8; }
.ig-ring--thin { stroke: var(--l1); stroke-width: 1.5; stroke-dasharray: 2 6; }
.ig-orbit { fill: none; stroke: var(--l2); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 10 90; }
.ig-pulse, .ig-pulse-hex { fill: var(--l2); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ig-glyph { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-glyph--deep { stroke: var(--l3); }
.ig-stem { fill: none; stroke: var(--l2); stroke-width: 2; }
.ig-flow { fill: none; stroke: var(--l2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.5 8; }
.ig-chip { fill: #fff; stroke: #bcd9d6; stroke-width: 1.4; }
.ig-node { fill: var(--tint); }
.ig-node--deep { fill: url(#ig-deep); }
.ig-beam { fill: none; stroke: var(--l2); stroke-width: 2; opacity: 0; }
.ig-hex-soft { fill: url(#ig-soft); }
.ig-arrow { fill: none; stroke: var(--l2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ig-svc { fill: none; stroke: var(--l3); stroke-opacity: .7; stroke-width: 2.2; stroke-linecap: round; }
.ig-mgrid { stroke: #8fe0d3; stroke-opacity: .1; }
.ig-trace-bg { fill: none; stroke: #8fe0d3; stroke-opacity: .25; stroke-width: 1.6; stroke-linejoin: round; }
.ig-trace { fill: none; stroke: #c9f7ee; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24 76; }
.ig-arc { fill: none; stroke-width: 25; stroke-dasharray: var(--len) 100; transition: stroke-dasharray .9s var(--spring); transition-delay: calc(var(--i) * 130ms); }
.ig-plan { transform-box: fill-box; transform-origin: left center; }
.ig-sweep { fill: none; stroke: var(--l3); stroke-width: 1.8; stroke-dasharray: 3 4; opacity: 0; }
.ig-drop { transform-box: fill-box; }
.ig-route { fill: none; stroke: var(--l2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1.5 7; }
.ig-plane { fill: var(--l3); offset-distance: 58%; offset-rotate: auto; }
.ig-t--halo2 { paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.ig-plate-lines { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: 1.2; }
.ig-pop, .ig-zoom { transform-box: fill-box; transform-origin: center; }
.ig-rise { transform-box: fill-box; transform-origin: 50% 100%; }

.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; }
.nums div { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding-left: 60px; }
.nums .tile { position: absolute; left: 0; top: 50%; margin-top: -23px; }
.nums dd { order: -1; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.nums dt { font-size: .8438rem; line-height: 1.25; color: var(--ink-3); margin-top: 2px; }

/* Career map */
.map { margin-top: clamp(24px, 3vw, 36px); }
.views { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--line); }
.views a { display: flex; align-items: center; gap: 7px; padding: 10px 0; margin-bottom: -1px; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.views .ico { width: 1rem; height: 1rem; color: currentColor; transition: transform .3s var(--spring); }
.views a:hover { color: var(--ink); border-bottom-color: var(--l1); }
.views a:hover .ico { transform: translateY(-2px); }
.views a[aria-current='page'] { color: var(--ink); font-weight: 550; border-bottom-color: var(--l3); }
.views a[aria-current='page'] .ico { color: var(--l3); }
.map__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; margin: 24px 0 12px; }
.map__head h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.legend { display: flex; gap: 16px; font-size: .875rem; color: var(--ink-3); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { display: block; width: 18px; height: 10px; border-radius: 2px; }

.l1 { background: var(--l1); }
.l2 { background: var(--l2); }
.l3 { background: var(--l3); }

.chart { --label: 216px; position: relative; container-type: inline-size; }
/* The narrowest employers lose their labels when the chart itself is too small for them. */
@container (max-width: 860px) { .emp.emp--tight { font-size: .75rem; padding-right: 0; } }
@container (max-width: 790px) { .emp.emp--tight { color: transparent; } }
.grid { position: absolute; inset: 0 0 0 var(--label); pointer-events: none; }
.grid i { position: absolute; top: 40px; bottom: 24px; width: 1px; background: var(--grid); }
.row { position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; min-height: 36px; }
.row h3 { display: flex; align-items: center; gap: 9px; font-size: .9375rem; font-weight: 450; padding-right: 12px; line-height: 1.2; transition: color .2s; }
.row h3 .ico { width: 1rem; height: 1rem; }
.track { position: relative; height: 36px; transition: opacity .3s; }
.bar { position: absolute; top: 11px; height: 14px; min-width: 4px; border-radius: 3px; transform-origin: left center; transition: filter .15s, box-shadow .15s; }
.bar::after { content: ''; position: absolute; inset: -11px 0; }
.bar:hover, .bar:focus-visible { filter: brightness(.85); box-shadow: 0 3px 10px rgb(8 48 47 / .3); }
.row.is-dim h3 { color: var(--ink-3); }
.row.is-dim h3 .ico { color: var(--ink-3); }
.row.is-dim .track { opacity: .28; }
.row.is-dim:hover .track, .row.is-dim:focus-within .track { opacity: 1; }

.row--emp, .row--emp .track { min-height: 40px; height: 40px; }
.emp { position: absolute; bottom: 4px; font-size: .8125rem; line-height: 1.15; color: var(--ink-2); padding-right: 4px; }
.row--axis, .row--axis .track { min-height: 24px; height: 24px; }
.tick { position: absolute; bottom: 0; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tick--now { right: 0; }

.tip { position: absolute; z-index: 2; width: min(360px, 100%); padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(8 48 47 / .14); font-size: .875rem; line-height: 1.4; pointer-events: none; }
.tip strong { font-weight: 600; display: block; }
.tip p { color: var(--ink-2); margin-top: 4px; }
.tip small { display: block; color: var(--ink-3); margin-top: 6px; font-size: .8125rem; }

/* Reading sections: icon heading on the left, one simple list on the right */
.block { display: grid; grid-template-columns: var(--head) minmax(0, 1fr); gap: 12px 0; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.block h2 { display: flex; align-items: center; align-self: start; gap: 9px; font-size: 1.0625rem; font-weight: 600; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 32px; padding-bottom: 20px; }
.line:last-child { padding-bottom: 0; }
.line--work { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; }
.line--work .line__meta { margin-left: 18px; }
.line--work:hover .tile { background: var(--l3); transform: scale(1.06); }
.line--work:hover .tile .ico { color: #fff; }
.line h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.line p, .line li { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; margin-top: 2px; text-wrap: pretty; }
.line .line__meta { color: var(--ink-3); font-size: .875rem; margin-top: 1px; text-align: right; max-width: 240px; font-variant-numeric: tabular-nums; }
.org { color: var(--ink-3); font-weight: 400; }
.line .role__note { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--l3); font-size: .9063rem; font-weight: 500; }
.role__note .ico { width: 1rem; height: 1rem; }

/* Experience reads as a vertical timeline */
.timeline .line { position: relative; padding-left: 24px; }
.timeline .line::before { content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--l2); z-index: 1; transition: transform .5s var(--spring) .1s; }
.timeline .line::after { content: ''; position: absolute; left: 5px; top: 10px; bottom: -8px; width: 1px; background: var(--l1); transform-origin: top; transition: transform .8s ease .2s; }
.timeline .line:first-child::before { background: var(--l3); border-color: var(--l3); }
.timeline .line:last-child::after { display: none; }

.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.award { display: grid; grid-template-columns: auto 40px minmax(0, 1fr); column-gap: 10px; line-height: 1.35; font-size: .9375rem; }
.award .ico { width: 1rem; height: 1rem; margin-top: 2px; }
.award__year { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.skillset + .skillset { margin-top: 18px; }
.skillset h3 { font-size: .9375rem; font-weight: 600; margin-bottom: 8px; }
.skillset ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; }
.skillset li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: .9063rem; line-height: 1.25; }
.skillset .ico { transition: transform .25s var(--spring); }
.skillset li:hover .ico { transform: scale(1.25); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.facts li { display: flex; gap: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.4; }
.facts strong { display: block; color: var(--ink); font-weight: 600; }
.facts .ico { margin-top: 2px; }

.foot { position: relative; margin-top: clamp(24px, 3vw, 40px); color: var(--on-deep-2); font-size: .875rem; background: url(/banner.svg) right center / cover no-repeat, linear-gradient(105deg, var(--deep), #0a4744); }
.foot__in { max-width: var(--center); margin-inline: auto; padding: 22px var(--pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 32px; }
.foot p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.foot .ico { color: var(--on-deep-2); width: 1rem; height: 1rem; }
.foot a { color: #fff; text-decoration-color: rgb(255 255 255 / .35); }
.foot a:hover { text-decoration-color: currentColor; }
.foot :focus-visible { outline-color: #fff; }
.foot__links { gap: 4px 16px !important; }
.foot button { padding: 0; border: 0; background: none; font: inherit; color: #fff; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 3px; }
.foot button:hover { text-decoration-color: currentColor; }

@media (max-width: 1600px) {
  .chart { --label: 196px; }
  .nums { gap: 16px; }
  .nums div { padding-left: 54px; }
  .nums .tile { width: 42px; height: 42px; margin-top: -21px; }
  .block { --head: 150px; }
}

@media (max-width: 1339px) {
  .sheet { margin-inline: 16px; }
}

@media (max-width: 900px) {
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards, .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sheet { margin-inline: 0; border-radius: 16px 16px 0 0; }
  .nums div { padding-left: 50px; }
  .nums .tile { width: 40px; height: 40px; margin-top: -20px; }
  .chart { --label: 0px; }
  .row { display: block; min-height: 0; }
  .row h3 { padding: 8px 0 0; font-size: .875rem; }
  .track { height: 24px; }
  .bar { top: 5px; }
  .bar::after { inset: -5px 0; }
  .row__blank { display: none; }
  .grid i { bottom: 22px; }
  .views { gap: 0 14px; }
  .views a { font-size: .9375rem; }
  .block { grid-template-columns: minmax(0, 1fr); }
  .line { grid-template-columns: minmax(0, 1fr); }
  .line .line__meta { text-align: left; order: -1; max-width: none; }
  .line--work { grid-template-columns: auto minmax(0, 1fr); }
  .line--work .line__meta { grid-column: 2; order: 2; margin-left: 0; }
  .skillset ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .skillset li { align-items: flex-start; }
}

@media (max-width: 400px) {
  .emp:last-child { left: auto !important; right: 0; width: auto !important; }
}

/* ---------- Motion. Everything below needs the "motion" class, set by site.js unless reduced motion is requested. ---------- */

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: scale(1); } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes climb { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wave { 0%, 100% { transform: scaleX(1) skewY(0); } 50% { transform: scaleX(.86) skewY(5deg); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes orbit { to { stroke-dashoffset: -100; } }
@keyframes flow { to { stroke-dashoffset: -19; } }
@keyframes ripple { 0% { opacity: .4; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.42); } }
@keyframes beam { 0%, 20%, 100% { opacity: 0; } 8% { opacity: 1; } }
@keyframes trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes plate { from { opacity: 0; transform: translateY(calc((1 - var(--i)) * 67px)); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes sweep { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: .9; } 92% { opacity: .9; } 100% { opacity: 0; transform: translateX(164px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes packet { 0% { stroke-dashoffset: 109; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hub { 0% { opacity: .9; transform: scale(.35); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 7% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tip-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Career map bars grow along the timeline, oldest first */
.motion .bar { animation: grow .7s var(--spring) both; animation-delay: calc(150ms + var(--x) * 13ms); }
.motion .tip { animation: tip-in .18s ease-out; }

/* First arrival only */
.motion.first .banner__text > * { animation: enter .7s var(--spring) both; }
.motion.first .banner__text > :nth-child(2) { animation-delay: .08s; }
.motion.first .banner__text > :nth-child(3) { animation-delay: .16s; }
.motion.first .nums > div { animation: enter .6s var(--spring) both; }
.motion.first .nums > div:nth-child(2) { animation-delay: .07s; }
.motion.first .nums > div:nth-child(3) { animation-delay: .14s; }
.motion.first .nums > div:nth-child(4) { animation-delay: .21s; }

/* Scroll reveals */
.reveal { transition: opacity .7s ease, transform .7s var(--spring); }
.motion .reveal:not(.in) { opacity: 0; transform: translateY(20px); }
.motion .timeline .line:not(.in)::before { transform: scale(0); }
.motion .timeline .line:not(.in)::after { transform: scaleY(0); }

/* Banner network */
.motion .banner.live .pk { animation: packet var(--t) linear var(--d) infinite; }
.motion .banner.live .hb { animation: hub 5s ease-out var(--d) infinite; }

/* Infographics draw themselves once, then keep a gentle loop while on screen */
.motion .info:not(.in) :is(.ig-pop, .ig-zoom, .ig-climber, .ig-flagpole, .ig-plate, .ig-drop) { opacity: 0; }
.motion .info:not(.in) .ig-arc { stroke-dasharray: 0 100; }
.motion .info:not(.in) .ig-plan { transform: scaleX(0); }
.motion .info:not(.in) .ig-rise { transform: scaleY(0); }
.motion .info.in .ig-pop { animation: pop .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 20ms); }
.motion .info.in .ig-zoom { animation: pop .7s cubic-bezier(.3, 1.4, .5, 1) .5s both; }
.motion .info.in .ig-rise { animation: rise .55s var(--spring) both; animation-delay: calc(var(--i) * 80ms); }
.motion .info.in .ig-climber { animation: climb 1.5s cubic-bezier(.45, 0, .3, 1) .35s both; }
.motion .info.in .ig-flagpole { animation: fade .4s ease 1.4s both; }
.motion .info.in .ig-drop { animation: drop .6s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i) * 130ms); }
.motion .info.in .ig-plan { animation: grow .7s var(--spring) both; animation-delay: calc(var(--i) * 110ms); }
.motion .info.in .ig-plate { animation: plate .9s var(--spring) both; animation-delay: calc(var(--i) * 90ms); }

.motion .info.live .ig-flag { animation: wave 2.6s ease-in-out infinite; }
.motion .info.live .ig-slowspin { animation: turn 150s linear infinite; }
.motion .info.live .ig-spin { animation: turn 26s linear infinite; }
.motion .info.live .ig-orbit { animation: orbit 5s linear infinite; }
.motion .info.live .ig-flow { animation: flow 1s linear infinite; }
.motion .info.live .ig-pulse { animation: ripple 4s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
.motion .info.live .ig-pulse-hex { animation: ripple 3.2s ease-out infinite; }
.motion .info.live .ig-beam { animation: beam 5.6s linear infinite; animation-delay: calc(var(--i) * 1.1s); }
.motion .info.live .ig-plane { animation: fly 4.6s ease-in-out infinite; }
.motion .info.live .ig-sweep { animation: sweep 5s linear 1s infinite; }
.motion .info.live .ig-trace { animation: trace 3.2s linear infinite; }
.motion .info.in.live .ig-plate { animation: plate .9s var(--spring) both, bob 5s ease-in-out 1s infinite; animation-delay: calc(var(--i) * 90ms), calc(1s + var(--i) * .5s); }
.motion .info:not(.live) *, .motion .info.is-covered * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  @page { margin: 12mm; size: A4; }
  html { font-size: 12px; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rail, .ig-defs, .banner__live, .views, .tip, .foot__links, .tile, .banner__meta .ico { display: none !important; }
  .motion .reveal, .motion .timeline .line::before, .motion .timeline .line::after { opacity: 1 !important; transform: none !important; }
  .bar, .banner__text > *, .nums > div { animation: none !important; }
  .banner, .foot { background: none; color: var(--ink); }
  .banner__in { padding: 0 0 10px; max-width: none; }
  .banner__meta { color: var(--ink-3); margin-top: 8px; gap: 2px 16px; }
  .layout { display: block; margin: 0; padding: 0; }
  .sheet { margin: 0; padding: 0; max-width: none; box-shadow: none; border-radius: 0; }
  .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .emp.emp--tight { color: var(--ink-2); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nums div { padding-left: 0; min-height: 0; }
  .nums dt { font-size: .8125rem; }
  .map { margin-top: 12px; break-inside: avoid; }
  .map__head { margin: 0 0 6px; }
  .chart { --label: 150px; }
  .row, .track { min-height: 24px; height: 24px; }
  .bar { top: 7px; height: 10px; }
  .grid i { top: 34px; bottom: 18px; }
  .row--emp, .row--emp .track { min-height: 34px; height: 34px; }
  .row--axis, .row--axis .track { min-height: 18px; height: 18px; }
  .row.is-dim .track { opacity: .4; }
  .block { grid-template-columns: 120px minmax(0, 1fr); margin-top: 12px; padding-top: 10px; }
  .line { padding-bottom: 7px; break-inside: avoid; }
  .line--work { grid-template-columns: minmax(0, 1fr) auto; }
  .award { break-inside: avoid; }
  .awards { gap: 3px 16px; }
  .skillset + .skillset { margin-top: 6px; }
  .skillset h3 { margin-bottom: 3px; }
  .skillset ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
  .foot { margin-top: 10px; }
  .foot__in { padding: 8px 0 0; max-width: none; border-top: 1px solid var(--line); }
  .foot a { color: inherit; }
  .foot .ico { color: var(--ink-3); }
}