/* manuelbriand.com — site stylesheet, "reference monitor" direction.
   Neutral grading-suite grey, black type, and one burst of colour:
   the career drawn as SMPTE 75% colour bars.

   One system for every page:
   - Frame: 1128px, 12 columns, 24px gutter (40px margins and 20px gutter under 1280,
     8 columns under 900, 4 columns under 641).
   - Columns 1–3 hold labels and section heads; columns 4–10 hold text.
   - Type: display 104, H1 88, figure 80, H2 40, H3 22, lede 22, body 18, small 15, micro 13.
   - Space: 4 8 12 16 24 32 48 64 96.
   - Rules: 2px ink above sections and tables, 1px grey between rows. */

:root {
  --paper: #e6e7e8;      /* neutral surround, no warm cast */
  --paper-2: #dcdddf;
  --ink: #161617;
  --ink-2: #4a4c50;      /* secondary text, 7:1 on paper */
  --rule: #b9bbbf;
  --focus: #0000c0;      /* the blue bar, kept for focus + link hover */

  --bar-grey: #c0c0c0;
  --bar-yellow: #c0c000;
  --bar-cyan: #00c0c0;
  --bar-green: #00c000;
  --bar-magenta: #c000c0;
  --bar-red: #c00000;

  /* step wedge (Pipeline tiles, legend, cascade) */
  --w0: rgba(22, 22, 23, 0.05);
  --w1: #a3a6aa;
  --w2: #5d6064;
  --w3: var(--ink);

  --frame: 1128px;
  --cols: 12;
  --g: 24px;
  --m: 40px;

  --sec: 96px;           /* section to section */
  --row: 16px;           /* ruled row padding */

  --fs-display: clamp(52px, 8.125vw, 104px);
  --fs-h1: clamp(46px, 6.875vw, 88px);
  --fs-fig: clamp(56px, 6.25vw, 80px);
  --fs-h2: clamp(30px, 3.125vw, 40px);
  --fs-h3: 22px;
  --fs-lede: 22px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --fs-ui: 16px;         /* controls, nav, footer, inline links */
}
@media (max-width: 1279px) { :root { --g: 20px; } }
@media (max-width: 899px)  { :root { --cols: 8; --g: 16px; --m: 32px; --sec: 72px; } }
@media (max-width: 640px)  {
  :root { --cols: 4; --g: 12px; --m: 20px; --sec: 64px; --row: 12px;
          --fs-h3: 20px; --fs-lede: 19px; --fs-body: 17px; }
}

/* Archivo's ampersand reads as an E in "AT&T"; borrow a plain one */
@font-face { font-family: 'Plain Amp'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'); unicode-range: U+0026; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plain Amp', 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: var(--fs-body);
  line-height: 1.5556;               /* 18/28 */
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums proportional-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; font-variation-settings: 'wdth' 68; }
p, li { text-wrap: pretty; }
.num, .tab { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; }
.skip-link:focus { left: 12px; top: 12px; background: var(--ink); color: var(--paper); padding: 10px 16px; }

.dev-strip {
  font-size: 12px; text-align: center; padding: 6px 12px;
  background: var(--paper-2); color: var(--ink-2); border-bottom: 1px solid var(--rule);
}

/* ---------- the frame and its grid ---------- */
.frame, .masthead, .page, .intro, .career, .profile, .work, .lead, .foot {
  width: min(100% - 2 * var(--m), var(--frame));
  margin-inline: auto;
}
.grid, .page, .intro, .career, .profile, .work, .lead {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  align-content: start;
}

/* ---------- masthead ---------- */
.masthead {
  padding: 24px 0;
  display: flex; align-items: baseline; gap: 32px;
}
.name {
  font-weight: 800; font-size: 24px; line-height: 1; text-decoration: none;
  font-variation-settings: 'wdth' 68; letter-spacing: 0;
}
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { text-decoration: none; font-size: var(--fs-ui); color: var(--ink-2); padding: 4px 0; }
.nav a:hover { color: var(--focus); }
.nav a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em;
}
.lang { display: inline-flex; gap: 12px; align-self: baseline; align-items: baseline; }
.lang button {
  font: inherit; font-size: 15px; line-height: 1.5; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); padding: 4px 0; position: relative;
}
.lang button::after { content: ""; position: absolute; inset: -8px -4px; }   /* 44px hit area */
.lang button:hover { color: var(--focus); }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* ---------- controls: one style ---------- */
.button, .copy-btn, .pl-tab, .pl-step {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  font: inherit; font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; text-decoration: none;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}
.button, .pl-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.button:hover, .pl-tab[aria-pressed="true"]:hover { background: var(--focus); border-color: var(--focus); color: #fff; }
.button-quiet, .copy-btn, .pl-tab, .pl-step { background: transparent; color: var(--ink); }
.button-quiet:hover, .copy-btn:hover, .pl-tab:hover, .pl-step:hover { background: transparent; color: var(--focus); border-color: var(--focus); }

/* ---------- home: intro ---------- */
.intro { padding: 64px 0 var(--sec); align-items: stretch; }
.portrait {
  grid-column: 1 / 5; width: 100%; height: 100%; min-height: 400px; align-self: stretch;
  object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.06);
}
.intro-text { grid-column: 5 / 13; display: flex; flex-direction: column; min-height: 100%; }
.intro h1 {
  font-size: var(--fs-display); line-height: 0.885; letter-spacing: -0.01em;
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
}
.intro .lede { margin-top: 32px; max-width: 30em; }
.lede { font-size: var(--fs-lede); line-height: 1.4545; max-width: 34em; }   /* 22/32 */
.actions { margin-top: auto; padding-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
html[lang="fr"] .intro h1 { font-size: clamp(44px, 6.25vw, 80px); }

/* ---------- home: career as colour bars ---------- */
.career { padding-bottom: var(--sec); }
.career > h2 { grid-column: 1 / -1; }
.bars {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 3.6fr 4fr 4fr 4fr 6fr 5fr; grid-template-rows: auto auto auto auto;
}
/* each caption row takes the height of its tallest cell, in any language */
.bar { display: contents; }
.bar-link { min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; color: inherit; text-decoration: none; }
.swatch {
  display: block; height: clamp(120px, 12.5vw, 160px);
  background: var(--c);
  position: relative;
  transform-origin: left center;
  animation: lock 700ms cubic-bezier(.2,.7,.2,1) both;
}
.bar:nth-child(2) .swatch { animation-delay: 60ms; }
.bar:nth-child(3) .swatch { animation-delay: 120ms; }
.bar:nth-child(4) .swatch { animation-delay: 180ms; }
.bar:nth-child(5) .swatch { animation-delay: 240ms; }
.bar:nth-child(6) .swatch { animation-delay: 300ms; }
@keyframes lock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* one inset for the bar label and the captions under it */
.bar { --in: 10px; }
.swatch > span {
  position: absolute; left: var(--in); bottom: 10px; right: 6px;
  font-weight: 800; font-size: clamp(16px, 1.72vw, 22px); line-height: 1;
  font-variation-settings: 'wdth' 68; color: #000;
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.bar.on-dark .swatch > span { color: #fff; }
.when, .role, .where { padding: 0 8px 0 var(--in); font-size: var(--fs-small); line-height: 1.4667; }
.when { margin-top: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.role { margin-top: 4px; font-weight: 600; text-wrap: balance; }
.where { margin-top: 4px; color: var(--ink-2); }
/* each bar links to its resume entry: the swatch lifts and the role underlines */
/* hover: the timeline zooms into that period, its bar steps from 75% to 100% and rises,
   and the name hands over to the logo, like a lower third changing on air.
   data-z is the same zoom, set by home-bars.js to measure the captions. */
.bars { transition: grid-template-columns 320ms cubic-bezier(.2,.8,.2,1); }
.bars:has(.bar:nth-child(1) .bar-link:is(:hover,:focus-visible)), .bars[data-z="1"] { grid-template-columns: 6.6fr 4fr 4fr 4fr 6fr 5fr; }
.bars:has(.bar:nth-child(2) .bar-link:is(:hover,:focus-visible)), .bars[data-z="2"] { grid-template-columns: 3.6fr 7fr 4fr 4fr 6fr 5fr; }
.bars:has(.bar:nth-child(3) .bar-link:is(:hover,:focus-visible)), .bars[data-z="3"] { grid-template-columns: 3.6fr 4fr 7fr 4fr 6fr 5fr; }
.bars:has(.bar:nth-child(4) .bar-link:is(:hover,:focus-visible)), .bars[data-z="4"] { grid-template-columns: 3.6fr 4fr 4fr 7fr 6fr 5fr; }
.bars:has(.bar:nth-child(5) .bar-link:is(:hover,:focus-visible)), .bars[data-z="5"] { grid-template-columns: 3.6fr 4fr 4fr 4fr 9fr 5fr; }
.bars:has(.bar:nth-child(6) .bar-link:is(:hover,:focus-visible)), .bars[data-z="6"] { grid-template-columns: 3.6fr 4fr 4fr 4fr 6fr 8fr; }
.bars[data-z] { transition: none; }
.role { min-height: var(--role-h, auto); }
.where { min-height: var(--where-h, auto); }
.bar:nth-child(1) { --hi: #fff; } .bar:nth-child(2) { --hi: #ff0; } .bar:nth-child(3) { --hi: #0ff; }
.bar:nth-child(4) { --hi: #0f0; } .bar:nth-child(5) { --hi: #f0f; } .bar:nth-child(6) { --hi: #f00; }
.bar-link .swatch { transition: background-color 180ms ease; }
.bar-link .swatch::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0; background: inherit;
  transition: height 260ms cubic-bezier(.2,.8,.2,1);
}
.bar-link:is(:hover,:focus-visible) .swatch { background: var(--hi); }
.bar-link:is(:hover,:focus-visible) .swatch::after { height: 16px; }
.swatch > span { transition: translate 200ms cubic-bezier(.4,0,.2,1), opacity 160ms ease; }
.bar-link:is(:hover,:focus-visible) .swatch > span { translate: 0 -14px; opacity: 0; }
.swatch .logo {
  position: absolute; inset: 0; z-index: 1; display: flex; gap: 8%; align-items: center; justify-content: center;
  padding: 18px 8%;
  opacity: 0; scale: .9; pointer-events: none;
  transition: opacity 160ms ease, scale 300ms cubic-bezier(.2,.8,.2,1);
}
.bar-link:is(:hover,:focus-visible) .swatch .logo { opacity: 1; scale: 1; transition-delay: 90ms; }
.swatch .logo img { display: block; min-width: 0; max-width: 100%; max-height: 52%; width: auto; height: auto; }
/* one colour, like the bar's name: black on the light bars, white on the dark ones.
   Orange and DTS are self-contained badges and keep their own colours. */
.swatch .logo img { filter: brightness(0); }
.bar.on-dark .swatch .logo img, .swatch .logo img[src$="grenoble-inp.png"] { filter: brightness(0) invert(1); }
.swatch .logo img[src$="grenoble-inp.png"] { filter: brightness(0); max-height: 62%; }
.bar .swatch .logo img:is([src$="orange.svg"], [src$="dts.svg"], [src$="directv-mono.svg"]) { filter: none; }
.swatch .logo img[src$="orange.svg"] { max-height: 50%; }
.swatch .logo img[src$="ericsson.svg"] { max-height: 64%; }
.swatch .logo img[src$="enssat.svg"] { max-height: 40%; }
.bar-link:hover .role, .bar-link:focus-visible .role { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bar-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.resume-page .job { scroll-margin-top: 24px; }

/* ---------- home: profile (bio + spec sheet) ---------- */
.profile { padding: 16px 0 var(--sec); align-items: start; border-top: 2px solid var(--ink); }
.bio { grid-column: 1 / 8; }
.bio p { font-size: var(--fs-lede); line-height: 1.4545; }
.bio p + p { margin-top: 24px; }
.spec { grid-column: 9 / 13; margin: 0; }
.spec > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec > div:first-child { padding-top: 0; }
.spec dt { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4667; }
.spec dd { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.4667; font-weight: 400; color: var(--ink); }

/* ---------- section heads: a 2px rule above, never under ---------- */
.work > h2, .lead > h2, .page > h2, .pubs > section > h2, .sec-h {
  font-size: var(--fs-h2); line-height: 1; color: var(--ink);
  padding-top: 16px; border-top: 2px solid var(--ink);
  text-box: trim-end alphabetic;
}

/* ---------- home: results ---------- */
.work, .lead { padding-bottom: var(--sec); }
.work > h2, .lead > h2 { grid-column: 1 / -1; padding-bottom: 24px; }
.item {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  padding: 24px 0; border-top: 1px solid var(--rule); align-items: start;
}
.work > h2 + .item { border-top: 0; padding-top: 0; }
.item:last-child { padding-bottom: 0; }
.result .num { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 12px; }
.result .num > span:first-child {
  font-size: var(--fs-fig); line-height: 0.85; font-weight: 800;
  font-variation-settings: 'wdth' 68; letter-spacing: -0.01em;
  text-box: trim-both cap alphabetic;
}
.result .num-cap { font-size: var(--fs-small); line-height: 1.4667; color: var(--ink-2); max-width: 20em; }
.item > div { grid-column: 4 / 11; }
.item > a { grid-column: 11 / 13; margin-top: 0 !important; text-box: trim-start cap alphabetic; text-wrap: balance; }
.item h3, .lead-cols h3 {
  font-size: var(--fs-h3); line-height: 1.2727; font-weight: 700; font-variation-settings: 'wdth' 100;
  text-box: trim-start cap alphabetic;
}
.item h3 { margin-bottom: 12px; }
.item a, .lead-cols a, .cs-onward a, .pub-card .cta { display: inline-block; margin-top: 12px; font-weight: 600; font-size: var(--fs-ui); }

/* leadership on exact thirds */
.lead-cols { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.lead-cols > article { grid-column: span 4; }
.lead-cols h3 { margin-bottom: 12px; }
.lead-cols p { font-size: var(--fs-body); line-height: 1.5556; }

/* ---------- content pages ---------- */
.page { padding: 64px 0 var(--sec); }
.page > * { grid-column: 1 / 10; }
.page > h1 {
  grid-column: 1 / -1;
  font-size: var(--fs-h1); line-height: 0.91; color: var(--ink); letter-spacing: -0.005em;
  text-box: trim-both cap alphabetic; text-wrap: balance;
}
.page > h1 + * { margin-top: 32px; }
.page > h1 + p, .page > h1 + .caption { font-size: var(--fs-lede); line-height: 1.4545; color: var(--ink); max-width: 30em; }
.page > h1 + p + p { margin-top: 12px; }

/* sections: the head hangs in columns 1–3, the text runs in 4–10, the rule spans all 12 */
.page > h2, .pubs > section > h3 { grid-column: 1 / 4; margin-top: var(--sec); position: relative; }
.page > h2 { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.0625; text-wrap: balance; }
.page > h2:has(+ .job), .page > h2:has(+ .steps) { font-size: var(--fs-h2); line-height: 1; }
.page > h2 { border-top: 0; }
.page > h2::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; background: var(--ink);
  width: calc(400% + 3 * var(--g));
}
.page > h2 ~ :not(h2) { grid-column: 4 / 11; }
.page > h2 + * { margin-top: var(--sec); padding-top: 16px; }
.page > h2 ~ .wide { grid-column: 4 / 13; }
.page > h2:has(+ .job), .page > h2 ~ .job { grid-column: 1 / -1; }
.page > h2:has(+ .job) { margin-top: var(--sec); border-top: 2px solid var(--ink); }
.page > h2:has(+ .job)::before { display: none; }
.page > h2 + .job { margin-top: 0; padding-top: 24px; }

.page h3 { font-size: var(--fs-h3); line-height: 1.2727; font-weight: 700; font-variation-settings: 'wdth' 100; color: var(--ink); }
.page h4 { font-size: var(--fs-body); line-height: 1.5556; font-weight: 600; font-variation-settings: 'wdth' 100; margin: 24px 0 8px; }
.page > h2 ~ p + p, .pubs > section p + p { margin-top: 16px; }
.page > h2 ~ :not(h2) + ul, .page > h2 ~ ul + p, .page > h2 ~ :not(h2) + figure, .page > h2 ~ figure + p { margin-top: 24px; }

/* lists: markers hang in the gutter, so text aligns with the paragraphs */
:where(.page) ul { list-style: none; margin: 0; padding: 0; }
.page ul > li { position: relative; margin: 0 0 8px; }
.page ul > li::before {
  content: "\2013"; position: absolute; left: -1.1em; color: var(--ink-2);
}
.page strong { color: var(--ink); font-weight: 600; }
.nw, .page li a.short { white-space: nowrap; }
.page br + br { display: none; }
.meta, .caption { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4667; }
.page > p.meta:not(h1 + *) { margin-top: 8px; }

/* ---------- about: press bios ---------- */
.page > h2 .meta {
  display: block; margin-top: 12px; font-size: var(--fs-small); font-weight: 400;
  font-variation-settings: 'wdth' 100; color: var(--ink-2); line-height: 1.4667;
}
.bio-block p { font-size: var(--fs-lede); line-height: 1.4545; }
.bio-block p + p { margin-top: 16px; }
.page > .bio-copy { grid-column: 11 / 13; margin-top: var(--sec); padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.page > .bio-copy .copy-btn { width: 100%; }
.copy-ok { font-size: var(--fs-small); color: var(--ink-2); min-height: 22px; }

/* ---------- publications ---------- */
.page > section { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-content: start; }
.pubs > section > * { grid-column: 4 / 13; }
.pubs > section > h2 { grid-column: 1 / -1; margin-top: var(--sec); padding-bottom: 32px; }
.pubs > section > h2:has(+ p) { grid-column: 1 / 4; padding-bottom: 0; border-top: 0; position: relative; font-size: clamp(26px, 2.5vw, 32px); line-height: 1.0625; }
.pubs > section > h2:has(+ p)::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; background: var(--ink); width: calc(400% + 3 * var(--g)); }
.pubs > section > h2 + p { grid-column: 4 / 11; margin-top: var(--sec); padding-top: 16px; margin-bottom: 48px; }
.page .fam-list li:last-child, .talks-table tr:last-child td, .page > .steps li:last-child { border-bottom: 0; }
.pubs > section > h3 {
  grid-column: 1 / 4; margin-top: 0; padding: 16px calc(var(--g) + 1.2em) 16px 0; margin-right: calc(-1 * var(--g)); border-top: 1px solid var(--rule); text-wrap: balance;
  font-size: var(--fs-small); line-height: 1.4667; font-weight: 600;
}
.pubs > section > h3 ~ :not(h3) { grid-column: 4 / 13; }
.pubs > section > h3 ~ ul:not(.fam-list), .pubs > section > h3 ~ p, .pubs > section > h3 ~ h4 { grid-column: 4 / 13; }
/* text stops at column 10, row rules run to 12 */
.pubs > section > h3 ~ ul:not(.fam-list), .pubs > section > h3 ~ p, .pubs > section > h3 ~ h4 { padding-right: calc((100% - 8 * var(--g)) / 9 * 2 + 2 * var(--g)); }
.pubs > section > h3 + * { margin-top: 0; border-top: 1px solid var(--rule); padding-top: 16px; }
.pubs > section > h3 + .fam-list { padding-top: 0; }
.pubs > section > h3 + ul:not(.fam-list) { padding-bottom: 8px; }
.pubs > section > h3 ~ h4 { margin-top: 16px; }
.pubs > section > h3 + h4 { margin-top: 0; }
.pubs > section h3[data-sw]::before { content: ""; display: block; width: 24px; height: 6px; margin-bottom: 10px; background: var(--sw); }

.page .pub-index {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--ink);
}
.page .pub-index li { grid-column: span 4; margin: 0; }
.page .pub-index li::before { content: none; }
.pub-index a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4667; }
.pub-index a:hover { color: var(--focus); }
.pi-n, .cs-n {
  font-size: var(--fs-fig); line-height: 0.85; font-weight: 800; font-variation-settings: 'wdth' 68;
  color: var(--ink); letter-spacing: -0.01em; text-box: trim-both cap alphabetic;
}
.pub-index a:hover .pi-n { color: var(--focus); }
.pubs section { scroll-margin-top: 16px; }

.page .fam-list { list-style: none; padding: 0; margin: 0; }
.page .fam-list li {
  display: grid; grid-template-columns: calc((100% - 8 * var(--g)) / 9) minmax(0, 1fr); column-gap: var(--g); row-gap: 4px;
  margin: 0; padding: var(--row) 0; border-bottom: 1px solid var(--rule);
}
.page .fam-list li:first-child { padding-top: 16px; }
.page .fam-list li::before { content: none; }
.page .fam-list p { margin: 0; }
.fam-y { grid-column: 1; grid-row: 1 / span 2; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); line-height: 28px; white-space: nowrap; }
.fam-t { grid-column: 2; font-weight: 600; }
.fam-n { grid-column: 2; font-size: var(--fs-small); line-height: 1.4667; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fam-n a { white-space: nowrap; text-decoration: none; color: var(--ink); }
.fam-n a:hover { text-decoration: underline; color: var(--focus); }
.fam-sole { font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); margin-left: 8px; white-space: nowrap; }
.pat-date { color: var(--ink-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* ---------- talks ---------- */
.page > .talks-table { grid-column: 1 / -1; margin-top: 48px; }
.talks-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.5; }
/* on the grid: Year in column 1, Event in 2–4, Talk in 5–9, Location in 10–12 */
.talks-table col.c-year { width: 8.511%; }
.talks-table col.c-event { width: 25.532%; }
.talks-table col.c-talk { width: 42.553%; }
.talks-table col.c-loc { width: 23.404%; }
.talks-table th {
  text-align: left; font-weight: 600; font-size: var(--fs-small); color: var(--ink-2);
  padding: 12px var(--g) 12px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.talks-table th:last-child, .talks-table td:last-child { padding-right: 0; }
.talks-table td { padding: var(--row) var(--g) var(--row) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.talks-table td:first-child { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.talks-table td strong { font-weight: 600; }
.talks-table .meta { display: block; margin-top: 4px; }
.tag-upcoming {
  display: inline-block; margin-left: 8px; padding: 0 8px; vertical-align: 1px; line-height: 20px;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-size: var(--fs-micro); font-weight: 600;
}

/* ---------- resume ---------- */
.resume-pdf { font-weight: 600; font-size: 16px; }
.page > .resume-pdf { margin-top: 16px; }
.resume-pdf .sep { color: var(--ink-2); font-weight: 400; margin: 0 8px; }
.job {
  display: grid; grid-template-columns: subgrid; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.job:last-of-type { border-bottom: 0; }
.job-meta { grid-column: 1 / 4; }
.job-body { grid-column: 4 / 11; grid-row: 1; }
/* dates hang in the right margin, level with the employer name */
.job-when {
  grid-column: 11 / 13; grid-row: 1; margin: 0; padding-top: 15px; text-align: right; align-self: start;
  font-size: var(--fs-small); line-height: 1.4667; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
/* skills: a label column and a value column, on the grid */
.skills { margin: 0; }
.skills > div {
  display: grid; grid-template-columns: calc((100% - 6 * var(--g)) * 2 / 7 + var(--g)) minmax(0, 1fr); column-gap: var(--g);
  padding: 12px 0; border-top: 1px solid var(--rule);
}
.skills > div:first-child { border-top: 0; padding-top: 0; }
.skills dt { font-size: var(--fs-small); line-height: 1.6; font-weight: 600; color: var(--ink); text-wrap: balance; }
.skills dd { margin: 0; }
.more-items .skills { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.job-meta::before { content: ""; display: block; width: 24px; height: 6px; margin-bottom: 12px; background: var(--c, transparent); }
.job-meta .job-head {
  font-size: var(--fs-h3); line-height: 1.1; font-weight: 800; font-variation-settings: 'wdth' 68; color: var(--ink);
}
.job-meta .job-role { margin-top: 8px; font-size: var(--fs-small); line-height: 1.4667; color: var(--ink-2); }
.job-meta .job-role strong { font-weight: 400; color: var(--ink-2); }
.job-body li:last-child { margin-bottom: 0; }
.job.edu { padding: var(--row) 0; }
.job.edu .job-meta::before { display: none; }
.job.edu .job-head { font-size: var(--fs-body); line-height: 1.5556; font-weight: 600; font-variation-settings: 'wdth' 100; }
.job.edu .job-role { margin-top: 0; font-variant-numeric: tabular-nums; }
.job.edu .job-head a { text-decoration: none; }
.job.edu .job-head a:hover { text-decoration: underline; }

/* resume: top achievements first, the rest one click away */
.more-items { margin-top: 8px; }
.more-items summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16px; color: var(--ink); min-height: 44px;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.more-items summary::-webkit-details-marker { display: none; }
.more-items summary::after { content: "+"; font-weight: 700; text-decoration: none; display: inline-block; width: 1em; }
.more-items[open] summary::after { content: "\2212"; }
.more-items summary:hover { color: var(--focus); }
.more-items > ul { margin-top: 8px; }
.page > details.more-items { margin-top: 8px; }

/* ---------- case study ---------- */
.cs-figs {
  grid-column: 1 / -1 !important; display: grid; grid-template-columns: subgrid;
  margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--ink);
}
.page .cs-figs p { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-small); line-height: 1.4667; color: var(--ink-2); }
.page .cs-figs p > span:last-child { max-width: 22em; }
.page > .cs-spec { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: 48px; border-top: 1px solid var(--rule); }
.cs-spec > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cs-spec dt { grid-column: 1 / 4; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.cs-spec dd { grid-column: 4 / 11; margin: 0; font-size: 16px; line-height: 1.5; }
.page > h2:has(+ .steps) { grid-column: 1 / -1; padding: 16px 0 32px; border-top: 2px solid var(--ink); }
.page > h2:has(+ .steps)::before { display: none; }
.page > h2 + .steps { margin-top: 0; padding-top: 0; }
/* How It Works: the Home results grammar, a figure in cols 1–3 and the step in cols 4–10 */
.page > .steps { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; counter-increment: step; padding: 24px 0; border-top: 1px solid var(--rule); margin: 0; }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: counter(step); grid-column: 1 / 4; grid-row: 1 / span 2;
  font-size: var(--fs-fig); line-height: 0.85; font-weight: 800; font-variation-settings: 'wdth' 68; color: var(--ink);
  text-box: trim-both cap alphabetic;
}
.steps li h3, .steps li p { grid-column: 4 / 11; }
.steps li h3 { margin: 0 0 12px; text-box: trim-start cap alphabetic; }
.steps li p { margin: 0; }
.page > .steps + .cascade { grid-column: 4 / 11; margin-top: 48px; }
.page > .steps + .cascade + p { grid-column: 4 / 11; }
.page > .cs-onward { margin-top: 48px; font-weight: 600; }
.cs-onward a { margin-top: 0; }
.page > .cs-note { margin-top: 12px; }

/* the cascade: Whisper's 85% and the 15% that escalates, in register */
.cascade { margin: 0; }
.cas-bar { display: flex; height: 64px; }
.cas-bar > span { display: flex; align-items: center; padding: 0 16px; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; }
.cas-w { background: var(--ink); color: var(--paper); gap: 8px; }
.cas-e { background: var(--w2); color: #fff; justify-content: center; padding: 0 !important; font-weight: 600; }
.page .cas-chain { list-style: none; margin: 2px 0 0 85%; padding: 0; width: 15%; display: flex; flex-direction: column; gap: 2px; }
.page .cas-chain li { position: relative; margin: 0; height: 32px; background: var(--w1); }
.page .cas-chain li::before { content: none; }
.page .cas-chain li > span, .page .cas-chain li { font-size: var(--fs-small); }
.cas-chain .c2 { background: #d0d2d5 !important; }
.cas-chain .c3 { background: #dcdde0 !important; }
.cas-chain .cl {
  position: absolute; right: calc(100% + 12px); top: 0; height: 32px; display: flex; align-items: center;
  white-space: nowrap; font-weight: 600; color: var(--ink);
}
.cascade figcaption { margin-top: 16px; font-size: var(--fs-small); line-height: 1.4667; color: var(--ink-2); max-width: 40em; }

/* ---------- footer ---------- */
/* the footer About link only shows on phones, where it leaves the masthead */
.foot-about { display: none; }
.foot {
  padding: 24px 0 48px;
  display: flex; gap: 32px; flex-wrap: wrap; font-size: var(--fs-ui);
  border-top: 1px solid var(--rule);
}

/* ---------- the Pipeline: a crosspoint matrix (stages x employers) ----------
   A router panel: stages are destinations (rows), employers are sources (columns).
   Tiles are a step wedge: empty, contributed, significant, owned. */
.page > .pl-deep { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4667; max-width: 44em; }
.page .pl-deep strong { color: var(--ink); font-weight: 600; }
.page > .pl-controls { grid-column: 1 / -1; margin-top: 48px; }
.pl-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.pl-tabs { display: inline-flex; }
.pl-tab + .pl-tab { border-left: 0; }
.page .pl-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.pl-lg { display: inline-block; width: 24px; height: 12px; }
.pl-lg + span { margin-right: 16px; }
.pl-lg + span:last-child { margin-right: 0; }
.pl-lg.d1 { background: var(--w1); } .pl-lg.d2 { background: var(--w2); } .pl-lg.d3 { background: var(--w3); }

/* both halves hang from the same rule, on the page grid */
.page > .pl {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
  border-top: 2px solid var(--ink);
}
.pl-matrix-wrap { grid-column: 1 / 8; container-type: inline-size; position: sticky; top: 16px; align-self: start; }
@media (max-height: 860px) { .pl-matrix-wrap { position: relative; top: auto; } }
.pl-detail-home { grid-column: 8 / 13; }

.pl-matrix { border-collapse: separate; border-spacing: 2px; table-layout: fixed; margin: 0 -2px; width: calc(100% + 4px); }
.pl-matrix th, .pl-matrix td { padding: 0; font-weight: 400; }
.pl-matrix thead th { vertical-align: top; padding: 16px 0 0; height: 1px; }
/* the label column ends on a grid line: 3 of the matrix's 7 columns */
.pl-matrix thead th.pl-corner { width: calc((100cqw - 6 * var(--g)) * 3 / 7 + 2 * var(--g)); }
.pl-colh {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; min-height: 100%;
  font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
.pl-coln { font-weight: 800; font-size: var(--fs-small); line-height: 1.25; font-variation-settings: 'wdth' 68; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pl-coly { margin-top: 2px; font-size: var(--fs-micro); line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-colr { margin-top: 8px; font-size: var(--fs-micro); line-height: 16px; font-weight: 400; color: var(--ink); min-height: 32px; padding-right: 8px; text-wrap: balance; }
.pl-colbar { display: block; height: 6px; margin-top: auto; margin-bottom: 2px; }
.pl-colr { margin-bottom: 12px; }
.pl-colh:hover .pl-coln { color: var(--focus); }
.pl-colh[aria-pressed="true"] .pl-colbar { height: 10px; margin-top: 8px; }
.pl-matrix .pl-colh[aria-pressed="true"] .pl-coln { color: var(--ink) !important; }   /* selection is shown by the bar and rail, not blue */
.pl-colc { display: none; font-weight: 800; font-size: var(--fs-small); font-variation-settings: 'wdth' 68; }

.pl-matrix tbody th { position: relative; }
.pl-matrix tbody td, .pl-matrix tbody th { height: 48px; }
.pl-rowh {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 48px;
  font: inherit; text-align: left; background: none; border: 0; padding: 0 8px 0 0; cursor: pointer; color: var(--ink);
}
.pl-sn { font-weight: 600; font-size: var(--fs-small); line-height: 20px; font-variation-settings: 'wdth' 85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-wf { font-size: var(--fs-micro); line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.pl-rowh:hover .pl-sn { color: var(--focus); }
.pl-row.sel .pl-sn { font-weight: 800; }
.pl-row.sel th::before {     /* the selected destination, marked in the gutter */
  content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ink);
}

/* crosspoint tiles */
.pl-x {
  display: block; width: 100%; height: 48px; border: 0; padding: 0; cursor: pointer;
  font: inherit; background: transparent;
}
.pl-x.d0 { background: var(--w0); cursor: default; }
.pl-x.d1 { background: var(--w1); }
.pl-x.d2 { background: var(--w2); }
.pl-x.d3 { background: var(--w3); }
.pl-x:not(:disabled):hover { outline: 2px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }
.pl-x.on { outline: none; box-shadow: inset 0 0 0 2px var(--paper); position: relative; z-index: 1; }
.pl-x.on:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* other sources dim to the empty level, no outlines */
.pl-x.off { background: var(--w0) !important; }
.pl-x.d0.off { background: transparent !important; }
/* crosshair: hovering a tile lights its row label and column heading */
.pl-row.hl .pl-sn { color: var(--focus); }
.pl-matrix[data-hcol="ericsson"] thead th:nth-child(2) .pl-coln, .pl-matrix[data-hcol="dts"] thead th:nth-child(3) .pl-coln,
.pl-matrix[data-hcol="dtv"] thead th:nth-child(4) .pl-coln, .pl-matrix[data-hcol="disney"] thead th:nth-child(5) .pl-coln { color: var(--focus); }
/* a selected source: one rail runs from its header bar down the column, like a patched signal */
.pl-rail { position: absolute; pointer-events: none; border-inline: 2px solid var(--colc); box-sizing: border-box; }
.pl-colh[aria-pressed="true"] .pl-colbar { margin-inline: 0; }

/* the detail panel */
.pl-detail { padding-top: 16px; }
.pl-path { margin: 0 0 8px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4667; }
.page .pl-detail h2 {
  margin: 0 0 12px; padding: 0; border: 0; font-size: 40px; line-height: 1;
  color: var(--ink); text-box: trim-both cap alphabetic;
}
.page .pl-detail h2::before { content: none; }
.pl-detail h2:focus { outline: none; }
.pl-detail h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.pl-detail .pl-desc { color: var(--ink-2); margin: 16px 0 24px; padding-top: 0; }
.pl-rel { margin: -8px 0 24px; font-weight: 600; font-size: 16px; }
.pl-filt { margin: 0 0 24px; font-size: var(--fs-small); }
.pl-clear { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pl-clear:hover { color: var(--focus); }
.pl-emp { margin: 0 0 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pl-emp-t { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-weight: 600; font-size: var(--fs-small); line-height: 1.4667; }
.pl-emp-t .sw { width: 24px; height: 6px; flex: none; }
.pl-emp ul { margin: 0; padding: 0; }
.pl-emp li { margin: 0; }
.page .pl-emp li::before { content: none; }
.pl-emp li + li { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.pl-call { margin: 0 0 24px; }
.page .pl-call-l { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.4667; font-weight: 600; color: var(--ink-2); }
.page .pl-call-t { margin: 0; font-size: var(--fs-lede); line-height: 1.4545; color: var(--ink); text-wrap: pretty; }
.pl-empty { color: var(--ink-2); }
.pl-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pl-step { text-align: left; }
.pl-next { margin-left: auto; text-align: right; }

/* ---------- 900–1279 ---------- */


/* ---------- under 1280: the Pipeline panel opens inline ---------- */
@media (max-width: 1279px) {
  .pl-matrix-wrap, .pl-detail-home { grid-column: 1 / -1; }
  .pl-matrix-wrap { position: relative; top: auto; }
  .pl-rail { display: none; }
  .pl-matrix thead th.pl-corner { width: calc((100cqw - (var(--cols) - 1) * var(--g)) * 3 / var(--cols) + 2 * var(--g)); }
  .page .pl-detail h2 { font-size: var(--fs-h2); }
  .pl-detail-home { position: static; max-height: none; overflow: visible; margin-left: 0; padding-left: 0; }
  .pl-detail-home:empty { display: none; }
  .pl-matrix thead { position: sticky; top: 0; z-index: 2; background: var(--paper); }
  .pl-inline > td { padding: 8px 0 24px; }
  .pl-detail { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 16px 0 8px; }
  .pl-detail > * { max-width: 40em; }
  .pl-detail > .pl-emp, .pl-detail > .pl-nav { max-width: none; }
  .pl-emp ul, .pl-call { max-width: 40em; }
  .pl-row.sel th::before { left: -14px; }
}

/* ---------- under 900: 8 columns, heads stack above their text ---------- */
@media (max-width: 899px) {
  .masthead { flex-wrap: wrap; row-gap: 8px; }
  .nav { gap: 20px; }
  .portrait { grid-column: 1 / 4; min-height: 0; aspect-ratio: 4 / 5; height: auto; }
  .intro-text { grid-column: 4 / 9; min-height: 0; }
  .where { display: none; }
  .bio, .spec { grid-column: 1 / -1; }
  .spec { margin-top: 48px; }
  .result .num { grid-column: 1 / 3; }
  .item > div { grid-column: 3 / -1; }
  .item > a { grid-column: 3 / -1; margin-top: 12px !important; }
  .lead-cols > article { grid-column: 1 / -1; }
  .lead-cols > article + article { margin-top: 32px; }
  .page > *, .page > h2 ~ :not(h2), .page > h2 ~ .wide, .page > h2, .pubs > section > *, .pubs > section > h2 + p, .pubs > section > h3 ~ :not(h3), .pubs > section > h3 ~ ul:not(.fam-list), .pubs > section > h3 ~ p, .pubs > section > h3 ~ h4 { grid-column: 1 / -1; }
  .page > h2::before { width: 100%; }
  .pubs > section > h2 { padding-bottom: 24px; }
  .page > h2 { padding-top: 16px; }
  .page > h2 + * { margin-top: 24px; padding-top: 0; }
  .page > .bio-copy { grid-column: 1 / -1; margin-top: 16px; padding-top: 0; }
  .pubs > section > h3 { grid-column: 1 / -1; padding-bottom: 8px; padding-right: 0; margin-right: 0; }
  .pubs > section > h3 ~ ul:not(.fam-list), .pubs > section > h3 ~ p, .pubs > section > h3 ~ h4 { padding-right: 0; }
  .pubs > section > h3 + *, .pubs > section > h3 + .fam-list { border-top: 0; padding-top: 0; }
  .pubs > section > h3 + .fam-list li:first-child { padding-top: 8px; }
  .job-meta { grid-column: 1 / 4; }
  .job-body { grid-column: 4 / -1; grid-row: 1 / span 2; }
  .job { grid-template-rows: auto 1fr; }
  .job-when { grid-column: 1 / 4; grid-row: 2; margin-top: 4px; padding-top: 0; text-align: left; font-weight: 400; color: var(--ink-2); }
  .cs-spec dt { grid-column: 1 / 3; }
  .cs-spec dd { grid-column: 3 / -1; }
  .page .cs-figs p, .page .pub-index li { grid-column: span 8; }
  .page .cs-figs, .page .pub-index { row-gap: 24px; }
  .page .cs-figs p, .pub-index a { flex-direction: row; align-items: baseline; gap: 16px; }
  .cs-n, .pi-n { flex: 0 0 128px; min-width: 0; }
  .page .pub-index, .page .pub-index li, .pub-index a { padding: 0; margin: 0; }
  .page .pub-index { padding-top: 16px; margin-top: 48px; }
  .spec { border-top: 1px solid var(--rule); padding-top: 12px; }
  .steps li::before { grid-column: 1 / 3; }
  .steps li h3, .steps li p { grid-column: 3 / -1; }
  .page > .steps + .cascade, .page > .steps + .cascade + p { grid-column: 1 / -1; }
  .page > h2:has(+ .steps) { padding-bottom: 16px; }
  .pubs > section > h2:has(+ p) { grid-column: 1 / -1; padding-top: 16px; }
  .pubs > section > h2:has(+ p)::before { width: 100%; }
  .pubs > section > h2 + p { margin-top: 24px; padding-top: 0; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .masthead { padding: 16px 0 8px; gap: 8px 16px; }
  .name { font-size: 22px; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: 8px; }
  .nav a { padding: 10px 0; font-size: 15px; white-space: nowrap; }
  html[lang="fr"] .nav a { font-size: 14px; letter-spacing: -0.01em; }
  .nav a[href="about.html"] { display: none; }   /* About moves to the footer on phones */
  .lang { margin-left: auto; }
  .lang button { padding: 10px 0; }

  .intro { padding-top: 24px; padding-bottom: 48px; }
  .portrait { grid-column: 1 / -1; aspect-ratio: 4 / 3; object-position: 50% 25%; }
  .intro-text { grid-column: 1 / -1; margin-top: 32px; }
  .actions { padding-top: 32px; }
  .actions .button { flex: 1 1 0; padding: 0 12px; }

  /* phone: one proportional strip of bars, then one line per employer */
  .bars { display: block; border-bottom: 0; }
  .career::before {
    content: ""; grid-column: 1 / -1; display: block; height: 48px; margin-bottom: 8px;
    background: linear-gradient(90deg,
      var(--bar-grey) 0 13.5%, var(--bar-yellow) 13.5% 28.5%, var(--bar-cyan) 28.5% 43.6%,
      var(--bar-green) 43.6% 58.6%, var(--bar-magenta) 58.6% 81.2%, var(--bar-red) 81.2% 100%);
  }
  .bar { display: block; }
  .bar-link {
    --in: 0px; display: grid; grid-row: auto; grid-template-rows: auto auto; grid-template-columns: 12px 1fr auto; column-gap: 12px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
  }
  .swatch { grid-column: 1 / 3; grid-row: 1; height: auto; background: none; animation: none; display: flex; align-items: center; gap: 12px; }
  .swatch::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--c); }
  .bar-link .swatch::after, .swatch .logo { display: none; }
  .bar-link:is(:hover,:focus-visible) .swatch { background: none; }
  .bar-link:is(:hover,:focus-visible) .swatch > span { translate: none; opacity: 1; }
  .swatch > span, .bar.on-dark .swatch > span { position: static; color: var(--ink); font-size: 18px; }
  .when { grid-column: 3; grid-row: 1; margin: 0; padding: 0; text-align: right; }
  .role { grid-column: 2 / 4; grid-row: 2; margin-top: 4px; padding: 0; min-height: 0; font-weight: 400; }
  .where { display: none; }

  .item { padding: 24px 0; }
  .result .num, .item > div, .item > a { grid-column: 1 / -1; }
  .result .num { margin-bottom: 16px; }
  .result .num-cap { max-width: none; }

  .page { padding-top: 32px; }
  .page > h1 + * { margin-top: 24px; }
  :where(.page) ul { padding-left: 1em; }
  .page ul > li::before { left: -1em; }
  .pl-emp ul { padding-left: 1em; }
  .job-meta, .job-body, .job-when { grid-column: 1 / -1; }
  .job-when { grid-row: 2; padding-top: 0; margin-top: 8px; text-align: left; font-weight: 400; color: var(--ink-2); }
  .job-body { grid-row: 3; margin-top: 16px; }
  .skills > div { grid-template-columns: 1fr; row-gap: 2px; }
  .job.edu .job-body { margin-top: 4px; }
  .cs-spec dt, .cs-spec dd { grid-column: 1 / -1; }
  .cs-n, .pi-n { flex-basis: 112px; }
  .steps li::before { grid-column: 1 / 2; font-size: 48px; }
  .steps li h3, .steps li p { grid-column: 2 / -1; }
  .cs-spec dd { margin-top: 4px; }
  .page .cs-figs p, .page .pub-index li { grid-column: 1 / -1; }
  .page .fam-list li { grid-template-columns: 1fr; }
  .fam-y, .fam-t, .fam-n { grid-column: 1; grid-row: auto; }
  .cas-bar { height: auto; min-height: 56px; }
  .cas-bar > span { white-space: normal; padding: 8px 12px; }
  .cas-e { min-width: 52px; }
  .page .cas-chain { margin-left: 0; width: 100%; }
  .page .cas-chain li { padding-left: 12px; display: flex; align-items: center; }
  .cas-chain .cl { position: static; height: auto; }
  .cas-chain li:nth-child(2) { margin-left: 12px; }
  .cas-chain li:nth-child(3) { margin-left: 24px; }
  .pl-emp ul { padding-left: 0; }

  .talks-table colgroup { display: none; }
  .talks-table thead { display: none; }
  .talks-table, .talks-table tbody, .talks-table tr, .talks-table td { display: block; width: 100%; }
  .talks-table { border-top: 2px solid var(--ink); }
  .talks-table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .talks-table td { border: 0; padding: 2px 0; }

  .pl-tabs { width: 100%; }
  .pl-tab { flex: 1 1 0; font-size: 14px; padding: 0 6px; white-space: normal; text-align: center; line-height: 1.2; }
  .pl-matrix thead th.pl-corner { width: 40%; }
  .pl-coln { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pl-colc { display: block; }
  .pl-coly, .pl-colr { display: none; }
  .pl-sn { font-size: 14px; white-space: normal; line-height: 18px; }
  .pl-rowh { height: auto; min-height: 48px; padding: 6px 8px 6px 0; }
  .pl-matrix tbody td, .pl-matrix tbody th { height: 1px; }
  .pl-x { height: 100%; min-height: 48px; }
  .pl-step { font-size: 14px; padding: 0 12px; }
  .pl-row.sel th::before { left: -10px; width: 6px; height: 6px; margin-top: -3px; }

  .foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 16px; }
  .foot a { padding: 10px 0; }
  .foot-about { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .swatch { animation: none; }
  .bars, .bar-link .swatch, .bar-link .swatch::after, .swatch .logo, .swatch > span { transition: none; }
}

/* ---------- print (resume PDF) ---------- */
@media print {
  @page { size: Letter; margin: 11mm 14mm 12mm; }
  :root { --sec: 9pt; --g: 12pt; }
  body { background: #fff; color: #000; font-size: 9.6pt; line-height: 1.33; }
  .dev-strip, .skip-link, .nav, .lang, .foot, .resume-pdf, .more-items, .barsnav { display: none !important; }
  .masthead { width: 100%; padding: 0 0 2pt; }
  .masthead .name { font-size: 22pt; font-weight: 800; font-variation-settings: 'wdth' 68; }
  .page { width: 100%; padding: 0; }
  .page > h1 { display: none; }
  .page > h1 + * { margin-top: 0; }
  .page > p, .page > p.meta { font-size: 11pt; color: #000; margin: 0 0 2pt; }
  .page > h1 + p { font-size: 11pt; }
  .page > h2 { font-size: 12.5pt; margin-top: 9pt; padding-top: 3pt; break-after: avoid; }
  .page > h2 + * { margin-top: 9pt; padding-top: 3pt; }
  .page > h2::before { height: 1.2pt; }
  .page > h2:has(+ .job) { border-top-width: 1.2pt; padding-bottom: 2pt; }
  .page h3 { font-size: 10.5pt; }
  .page ul > li { margin: 0 0 1.8pt; break-inside: avoid; }
  .job { padding: 4pt 0; border: 0; break-inside: auto; }
  .job-meta::before { width: 14pt; height: 3pt; margin-bottom: 4pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .job-meta .job-head { font-size: 10.5pt; }
  .job-meta .job-role, .job-meta .job-role strong { font-size: 9pt; color: #333; margin-top: 2pt; }
  .job.edu { padding: 1pt 0; }
  .job.edu .job-head { font-size: 9.6pt; }
  .more-items.print-open { display: block !important; margin-top: 0; }
  .more-items.print-open > summary { display: none; }
  .more-items.print-open > ul { margin-top: 0; }
  .page .meta + .meta { margin-top: 0; }
  a { color: inherit; text-decoration: none; }
  /* print: one column, jobs hang their meta in a narrow left column */
  .page { display: block; }
  .page > h2, .page > h2:has(+ .job) { margin: 9pt 0 4pt; padding: 3pt 0 0; border-top: 1.2pt solid #000; font-size: 12.5pt; line-height: 1.1; }
  .page > h2::before { display: none; }
  .page > h2 + *, .page > h2 + .job { margin-top: 0; padding-top: 0; }
  .page > h2 ~ p + p { margin-top: 3pt; }
  .page ul > li::before { left: -0.9em; }
  .page ul { padding-left: 0.9em; }
  /* floats, not grid: Chrome splits floated jobs across pages cleanly */
  .job { display: flow-root; padding: 4pt 0; }
  .page > h2 + .job { padding-top: 2pt; }
  .job-meta, .job-when { float: left; clear: left; width: 21%; }
  .job-body { margin-left: calc(21% + 12pt); }
  .job-when { margin: 2pt 0 0; padding: 0; text-align: left; font-size: 9pt; font-weight: 400; color: #333; }
  .skills > div { grid-template-columns: 21% 1fr; gap: 0 12pt; padding: 1pt 0; border: 0; }
  .skills dt { font-size: 9.6pt; line-height: 1.33; }
  .job-meta .job-head { font-size: 10.5pt; }
  .job.edu { padding: 1pt 0; }
  .job.edu .job-meta .job-head { display: inline; font-size: 9.6pt; }
  .job.edu .job-meta .job-role { display: inline; margin-left: 4pt; }
  .job.edu .job-meta { width: 30%; white-space: nowrap; }
  .job.edu .job-body { margin-left: calc(30% + 12pt); }
  /* French runs about 12% longer: set it a touch tighter to hold two pages */
  html[lang="fr"] body { font-size: 9.1pt; line-height: 1.3; }
  html[lang="fr"] .page ul > li { margin-bottom: 1.2pt; }
}