/* The living resume. Opens as his PDF; scrolling designs it (resume.js). The page scrolls like any other page.
   Modes on <html>: .motion (desktop), .motion.is-stack (phones), .is-static (reduced motion, ?static, or no JS). */

:root {
  --bg: #F6F6F5;
  --ink: #141517;
  --grey: #8F9297;
  --sec: #62656B;
  --line: #DADAD7;
  --chip: #CFCFCB;
  --dark: #141517;
  --on-dark: #F6F6F5;
  --dark-sec: #8B8E94;
  --dark-soft: #B9BBBF;
  --dark-line: #2B2D31;
  --live: #22C55E;
  --blue: #2E4763;
  --blue-tint: #E7ECF2;
  --blue-on-dark: #93ABC6;

  --gut: 48px;
  --dcol: 184px;       /* the designed resume's date / label column */
  --dgap: 40px;
  --dw: 760px;         /* the designed resume's width (narrow enough to read at 40% of the screen when docked) */
  --bar: 44px;         /* the top bar */
  --pin-h: min(54vh, 560px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scrollbar-gutter: stable; }
html.frame-lock { overflow: hidden; }
html.motion:not(.is-set) { background: #DEDEDC; }
.is-deep:not(.is-ready) body { opacity: 0; }
.is-deep body { transition: opacity .35s ease; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.motion:not(.is-set) body { background: #DEDEDC; }
/* (the page ends where its last part ends: the docked resume, hidden by then and re-measured when the end changes,
   must never push the page longer and leave the end hanging high on the screen) */
main.rl { overflow-y: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--on-dark);
  font: 15px/1.2 var(--font); text-decoration: none;
}
.skip:focus { top: 56px; }
.live-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 0 rgb(34 197 94 / .45);
  animation: live 2.4s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .45); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(34 197 94 / 0); }
}

/* ---------------------------------------------------------------- the top bar: the PDF viewer's bar, then the fast path
   On the first screen it is the viewer's bar (file name, page count); once the page designs itself it stays, quietly,
   as the one piece of chrome: the PDF, Skills, Experience, Where I fit, and email. */

.topbar {
  position: fixed; left: 0; top: 0; right: 0; z-index: 60;
  display: flex; align-items: center;
  height: var(--bar); padding: 0 var(--gut);
  background: #F3F3F2; border-bottom: 1px solid rgb(0 0 0 / .07);
  font: 13px/1 var(--font); color: var(--ink);
}
.topbar.is-away { background: rgb(246 246 245 / .96); border-bottom-color: rgb(20 21 23 / .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the links look the same from the first screen on, so nothing jumps when the page starts designing itself; only the
   viewer's title (centred, as a PDF viewer shows it) leaves */
.tb-file {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font: 12.5px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: #6B6D70;
}   /* (it fades as the page starts to move: resume.js) */
.tb-nav { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 7px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.tb-nav a:hover { color: var(--blue); background: rgb(20 21 23 / .05); }
.tb-nav a.tb-pdf { margin-right: 6px; background: var(--ink); color: #fff; }
.tb-nav a.tb-pdf:hover { background: var(--blue); color: #fff; }
.tb-nav a.tb-mail { margin-left: auto; color: var(--blue); }
.tb-nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tb-short { display: none; }
@media (max-width: 1180px) { .tb-file { display: none; } }
.is-static body { padding-top: var(--bar); }

/* ---------------------------------------------------------------- the paper (sticky) */

.paper { position: relative; }
.cam { position: relative; }
.doc { position: relative; }

.motion .intro { display: contents; }   /* desktop: the paper sticks from the first screen to the end */
.motion .paper {
  position: sticky; top: 0; z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}
.motion .sheet-white { position: absolute; inset: 0; background: var(--ground); }
/* (docked: whatever the reading guide scrolls under the top bar fades out, never a hard cut) */
.motion:not(.is-stack) .paper::after { content: ""; position: absolute; left: 0; right: 0; top: var(--bar); z-index: 2; height: 40px; background: linear-gradient(var(--bg), rgb(246 246 245 / 0)); opacity: var(--dk, 0); }   /* the viewer's grey; fades to paper as the page becomes a sheet */
.motion .cam { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
.motion .doc { position: absolute; left: 0; top: 0; width: 100%; }
.motion .doc--set { pointer-events: auto; }
.motion .doc--set [data-k] { opacity: 0; }         /* resume.js reveals each line as the pass reaches it */
.motion .doc--set .marker { opacity: 0; }
.acts { position: relative; z-index: 1; pointer-events: none; }
/* the first screen, then the page designs itself and the story begins */
.motion #act-select { height: 215vh; }   /* (the name moment, then the dock: resume.js reads its distances off this) */
html:not(.motion) .acts { display: none; }

/* ---------------------------------------------------------------- Frame 0: his PDF, as a PDF viewer shows it
   Letter page (8.5 x 11 in at 96 dpi), EB Garamond, 0.4 in side and 0.3 in top/bottom margins, sizes from the
   resume's own generator (name 18pt, body 11pt, heads 11.5pt, section titles 12pt over a 0.75pt rule). */

:root { --ground: #DEDEDC; --pz: 1; --pdf-top: 54px; }
.doc--plain.pdf {
  width: 816px;
  padding: 28.8px 38.4px 28.8px;
  color: #000;
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-size: 14.667px;
  font-weight: 400;
  line-height: 1.305;
  font-kerning: normal;
  letter-spacing: 0;
}
.motion .doc--plain.pdf { left: calc(50% - 408px * var(--pz)); top: var(--pdf-top); transform-origin: 0 0; transform: scale(var(--pz)); }
.pdf p, .pdf h2, .pdf ul { margin: 0; }
/* Not yet designed: beside a chapter, a section the story has not reached reads in the PDF's own serif, reflowed to the
   sheet's width at a readable size and dimmed, until its turn comes (the script places and fades each part). */
.nyet { position: absolute; left: 0; top: 0; pointer-events: none; }
.nyet-part {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  color: #141517; font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; font-size: 14.667px; line-height: 1.305;
  opacity: 0; visibility: hidden;
}
.nyet-part .pl, .nyet-part .pdf-ul .pl { display: inline; white-space: normal; }
.nyet-part .pl + .pl::before { content: ' '; }
.nyet-part .pdf-contact a { color: inherit; text-decoration: none; }
html:not(.motion) .nyet, .is-stack .nyet { display: none; }
.pdf b { font-weight: 700; }
.pdf-name { text-align: center; font-size: 24px; font-weight: 700; line-height: 1.305; }
.pdf-contact { text-align: center; }
.pdf-contact a { color: #1155CC; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pdf-sub { text-align: center; font-size: 14px; }
.pdf .pdf-sec { margin: 9.33px 0 5.33px; padding-bottom: 1.33px; border-bottom: 1px solid #000; font-size: 16px; font-weight: 700; line-height: 1.305; }
.pdf-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15.333px; }
.pdf-head, .pdf-head * { line-height: 20px; }
.pdf-head [data-k] { display: inline-block; }
.pdf-place { font-size: 14.667px; }
.pdf-role { font-style: italic; }
.pdf-ul { padding-left: 48px; list-style: none; }
.pdf-ul li { position: relative; }
.pdf-ul .pl { display: block; white-space: nowrap; }   /* the PDF's own line breaks, so every bullet wraps exactly as it does there */
.pdf-ul li::before { content: "\25CF"; position: absolute; left: -24px; top: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14.667px; line-height: 1.305; }
.pdf-skill { font-size: 15.333px; }
.motion .doc--plain.pdf .nm { display: inline-block; }
html:not(.motion) .doc--plain { display: none; }
/* reduced motion: the page opens on the PDF too, then the designed page follows */
.is-static .cam { padding: 28px 0 56px; background: linear-gradient(var(--ground), var(--ground)) 0 0 / 100% calc(1056px * var(--pz) + 84px) no-repeat; }
.is-static .doc--plain.pdf { display: block; zoom: var(--pz); min-height: 1056px; margin: 0 auto; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 10px 30px -6px rgb(0 0 0 / .18); }
.is-static .doc--set { margin-top: 56px; }

/* the page itself: white with a soft shadow on the viewer's grey */
.pdf-bg { display: none; }
.motion .pdf-bg {
  display: block;
  position: absolute; left: calc(50% - 408px * var(--pz)); top: var(--pdf-top);
  width: calc(816px * var(--pz)); height: calc(1056px * var(--pz));
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 10px 30px -6px rgb(0 0 0 / .18);
  transition: box-shadow .8s var(--ease);
}
/* the same sheet, once it has widened into the site's grid: it carries the designed page to the end */
.motion .pdf-bg.is-sheet { box-shadow: 0 0 0 1.5px rgb(20 21 23 / .06), 0 60px 120px -40px rgb(20 21 23 / .22), 0 18px 40px -24px rgb(20 21 23 / .16); }
/* the typesetting rule: a hairline of hoodie blue that sweeps down the page; above it, the designed page */
.pass-rule { position: absolute; left: 0; top: 0; width: 1px; height: 1.5px; background: var(--blue); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
html:not(.motion) .pass-rule { display: none; }

/* Frame 0 as the table of contents: a section of the PDF lights on hover and says where it goes */
.toc-on .pdf-part { pointer-events: auto; cursor: pointer; }
.toc-on .doc--set { pointer-events: none; }      /* the designed page is still invisible over it */
.pdf-part { position: relative; }
.pdf-part::before { content: ""; position: absolute; inset: var(--hl-t, -4px) -14px var(--hl-b, -4px); border-radius: 6px; background: rgb(46 71 99 / .07); box-shadow: inset 3px 0 0 var(--blue); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.motion:not(.is-stack) .doc--plain > .pdf-part::after {
  content: "Explore " attr(data-label) " \2192"; position: absolute; left: calc(100% + 30px); top: -2px;
  padding: 7px 13px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 15px/1.2 var(--font); white-space: nowrap; opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.toc-on .pdf-part:hover::before, .toc-on .doc--plain > .pdf-part:hover::after { opacity: 1; }
/* where two parts meet, the script puts each edge halfway between the two lines' ink (--hl-t, --hl-b); until then,
   entries that touch with no gap stop at the shared edge, so a panel never reaches into its neighbour */
.pdf-part:not(:has(> .pdf-sec)) { --hl-t: 0px; }
.pdf-part:has(+ .pdf-part:not(:has(> .pdf-sec))) { --hl-b: 0px; }

/* the selection that sweeps the name: the viewer's own system highlight colours */
.sel {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 24px; font-weight: 700; line-height: 1.3;
  transform-origin: 0 0;
}
.sel-sys, .sel-blue { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.sel-sys { background: Highlight; color: HighlightText; }
.sel-blue { background: var(--blue); color: #fff; opacity: 0; }
.sel span { display: block; }

/* ---------------------------------------------------------------- the designed resume */

.doc--set { padding: 76px 0 88px; }
.s-in { position: relative; width: min(var(--dw), calc(100% - 2 * var(--gut))); margin: 0 auto; }
.s-more { position: absolute; left: 0; right: 0; top: calc(100% + 64px); padding-top: 16px; opacity: 0; }
.s-more::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--chip); }
.s-more-h { margin-bottom: 26px; }
.s-more .s-entry + .s-entry { margin-top: 30px; }
html:not(.motion) .s-more { position: static; margin-top: 56px; opacity: 1; }
.doc--set [data-k] { will-change: auto; }
.doc--set span[data-k] { display: inline-block; }
.s-name {
  width: fit-content;
  margin-left: -.045em;
  font-size: 88px; font-weight: 420; line-height: .94; letter-spacing: -.047em;
  white-space: nowrap;
}
.s-meta {
  display: grid;
  grid-template-columns: var(--dcol) minmax(0, 1fr);
  column-gap: var(--dgap); row-gap: 6px;
  margin-top: 40px;
}
.s-label { font-size: 15.5px; line-height: 1.5; color: var(--sec); }
.s-contact { display: flex; flex-wrap: wrap; gap: 4px 28px; width: fit-content; font-size: 15.5px; line-height: 1.5; }
.s-link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--chip);
  transition: color .25s ease, text-decoration-color .25s ease;
}
.s-link:hover { color: var(--blue); text-decoration-color: currentColor; }
.s-avail { display: flex; align-items: center; gap: 10px; width: fit-content; font-size: 15.5px; line-height: 1.5; }

.s-sec { position: relative; margin-top: 46px; padding-top: 16px; }
.s-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.s-h { width: fit-content; margin-bottom: 14px; }
.s-entry { display: grid; grid-template-columns: var(--dcol) minmax(0, 1fr); column-gap: var(--dgap); }
.s-entry + .s-entry { margin-top: 30px; }
.s-date { width: fit-content; height: fit-content; padding-top: 3px; font-size: 15.5px; line-height: 1.5; color: var(--sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-org { font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.012em; }
.s-loc { margin-left: 8px; font-size: 15.5px; font-weight: 400; letter-spacing: 0; color: var(--sec); }
.s-role { width: fit-content; margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--sec); }
.s-list { margin-top: 12px; }
.s-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; }
.s-list li + li { margin-top: 7px; }
.s-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 13px; height: 1px; background: var(--grey); }
.s-list--plain li { padding-left: 0; }
.s-list--plain li::before { content: none; }
.s-lead { margin-right: 8px; color: var(--sec); }
.s-skills { display: grid; row-gap: 8px; }
.s-skill { display: grid; grid-template-columns: var(--dcol) minmax(0, 1fr); column-gap: var(--dgap); font-size: 16px; line-height: 1.5; }
.s-skill dt { color: var(--sec); font-size: 15.5px; padding-top: 1px; }

/* numbers light up once their section is set, and stay underlined */
.n {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: transparent;
}
.n.is-lit, html:not(.motion) .n { color: var(--blue); text-decoration-color: var(--blue); }
.doc--set li { border-radius: 4px; }
/* the words the story is explaining, lit on the page like a selection (resume.js sets the navy and the white type as
   their part of the story arrives); a number inside takes the white */
.doc--set .w { border-radius: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc--set .w.is-w .n { color: inherit; text-decoration-color: currentColor; }
.doc--set li.is-hot { background: var(--blue-tint); box-shadow: 0 0 0 6px var(--blue-tint); }

/* the marker in the dock, beside the part the story is telling */
.marker { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: var(--blue); transform-origin: 0 0; pointer-events: none; }

/* the docked resume: the part the story is telling is lit and magnified, the rest steps back, still readable. Each of
   these follows the scroll (resume.js sets them as the part of the story they belong to arrives):
   --fw on a part in focus (0..1: its soft blue panel, its growth from its top edge by --k), --fe on its entry (the org in
   blue, the date in ink), --pw on an entry whose single line is in focus (its other lines step back), and each part's
   opacity (inline) while another part has the focus. */
.doc--set [data-f] {
  position: relative; z-index: 2;
  background-color: rgb(231 236 242 / var(--fw, 0));
  /* (the panel reaches 10px above the part and 26px below it: never over the label just above) */
  box-shadow: 0 8px 0 18px rgb(231 236 242 / var(--fw, 0)), 0 34px 50px 12px rgb(46 71 99 / calc(.16 * var(--fw, 0)));
  border-radius: 2px;
  transform: scale(calc(1 + (var(--k, 1) - 1) * var(--fw, 0))); transform-origin: 50% 0;
}
.doc--set li[data-f], .doc--set .s-more [data-f] { box-shadow: 0 4px 0 10px rgb(231 236 242 / var(--fw, 0)), 0 24px 40px 6px rgb(46 71 99 / calc(.14 * var(--fw, 0))), 0 0 0 6px rgb(231 236 242 / var(--fit, 0)); }
/* (a line that is also a team's evidence in Where I fit is marked like the others: its panel at the stronger of the two) */
.doc--set li[data-f] { background-color: rgb(231 236 242 / max(var(--fw, 0), var(--fit, 0))); }
.doc--set .s-name[data-f] { transform: none; }
.doc--set .s-entry .s-org span:first-child { color: color-mix(in srgb, var(--blue) calc(var(--fe, 0) * 100%), var(--ink)); }
.doc--set .s-entry .s-date { color: color-mix(in srgb, var(--ink) calc(var(--fe, 0) * 100%), var(--sec)); }
.doc--set .s-entry .s-list li { color: rgb(20 21 23 / calc(1 - .65 * var(--pw, 0))); }
/* the docked resume is also the table of contents: every entry, line and heading goes to its part of the story */
.doc--set.is-docked :is(.s-entry, .s-list li, .s-h, .s-head, .s-skills) { cursor: pointer; }
.doc--set.is-docked .s-entry:hover .s-org span:first-child,
.doc--set.is-docked .s-h:hover { color: var(--blue); }
.doc--set.is-docked .s-list li:hover { background: rgb(46 71 99 / .06); box-shadow: 0 0 0 6px rgb(46 71 99 / .06); }
.doc--set.is-docked .s-more .s-entry { cursor: pointer; }
.doc--set.is-docked .s-more .s-entry:hover .s-org span:first-child { color: var(--blue); }

/* ---------------------------------------------------------------- the story, in normal flow */

.after { position: relative; z-index: 1; }
/* desktop: the column beside the docked page (resume.js shows it once the page has docked) */
.motion:not(.is-stack) .after { margin-left: var(--stage-x, 720px); padding: 0 var(--gut) 0 0; opacity: 0; visibility: hidden; }
:is(html:not(.motion), .is-stack) .after { padding: 0 var(--gut); }
.ch { position: relative; max-width: 1180px; padding-top: 120px; }
:is(html:not(.motion), .is-stack) .ch { margin: 0 auto; }
.motion:not(.is-stack) .ch { max-width: 900px; padding-top: 92px; }
.motion:not(.is-stack) .sec:first-child > .ch:first-child { padding-top: 0; }
.ch-head { position: relative; }
/* a chapter's head peeking in under a held card: its stage is drawn up under the card (resume.js), the head waits
   bottom-pinned in the lower half; the drawn-up part passes clicks through to the card */
.motion .ch-stage.is-peek { pointer-events: none; }
.motion .ch-stage.is-peek > :not(.peek-room) { pointer-events: auto; }
.motion .ch-stage.is-peek > .ch-head { position: sticky; }
.ch-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; line-height: 1.5; color: var(--sec); }
.ch-meta span:first-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-title { margin-top: 12px; font-size: clamp(44px, 4.1vw, 62px); font-weight: 420; line-height: .98; letter-spacing: -.043em; }
.ch-lede { margin-top: 16px; max-width: 800px; font-size: 20px; line-height: 1.4; letter-spacing: -.008em; text-wrap: pretty; }
.ch-lede .g { color: var(--sec); }
.ch-body { position: relative; margin-top: 36px; }
.ch-body--full { margin-top: 0; }
.beat { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.beat > :first-child { flex: none; }
.beat + .beat { margin-top: 52px; }
/* What it is · What it does · How I built it: each project's three steps, named where each one starts */
.beat-k { display: flex; align-items: center; gap: 12px; margin: 56px 0 14px; font-size: 13.5px; line-height: 1.3; color: var(--sec); }
.beat-k::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: var(--blue); }
.beat-k:first-child { margin-top: 0; }
.beat-cap { max-width: 820px; font-size: 16px; line-height: 1.5; color: var(--sec); text-wrap: pretty; }
/* who a project was for, in their own public words, with the source */
.beat-who { max-width: 820px; margin: -4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--sec); text-wrap: pretty; }
.beat-who b { font-weight: 500; color: var(--ink); }
.beat-who a { color: var(--blue); text-decoration: underline; text-decoration-color: rgb(46 71 99 / .35); text-underline-offset: 3px; white-space: nowrap; }
.beat-who a:hover { text-decoration-color: var(--blue); }
/* hovering a line of the docked page lifts its part of the story */
.beat > :first-child:not(.scene-stage, .hold-stage), .scene-pin > .panel, .hold-stage > :first-child:not(.beat-k), .hold-stage > .beat-k + * { transition: translate .5s var(--ease), box-shadow .4s ease; }
.beat.is-linked > :first-child:not(.scene-stage, .hold-stage), .beat.is-linked .scene-pin > .panel, .beat.is-linked .hold-stage > :first-child:not(.beat-k), .beat.is-linked .hold-stage > .beat-k + * { translate: 0 -8px; box-shadow: 0 0 0 2px var(--blue), 0 44px 80px -36px rgb(46 71 99 / .55); }
.ch .ch-head > *, .ch .beat-cap, .ch .champ > p, .ch .beat-k, .ch .scene-steps { transition: opacity .4s ease; }
.ch.is-hover .ch-head > *, .ch.is-hover .beat-cap, .ch.is-hover .beat-k, .ch.is-hover .scene-steps { opacity: .4; }

/* ---------------------------------------------------------------- a hold: a part to read that stays still
   A photo, a statement, a screen, a card or a list: resume.js makes the figure as tall as its stage plus the scroll it
   holds for (its reading time at a steady scroll), and sets where the stage sticks (--hold-top: centred below the bar). */
.hold-stage { display: flex; flex-direction: column; gap: inherit; }
.hold-stage > :first-child { flex: none; }
.hold-stage > .beat-k { margin: 0 0 -2px; }   /* (its label goes with it, the beat's own gap below) */
.motion .hold-stage { position: sticky; top: var(--hold-top, calc(var(--bar) + 12px)); }

/* ---------------------------------------------------------------- a visual with events: a pinned scene
   The visual holds still while scrolling plays it: resume.js makes the scene one screen tall plus a band of scroll per
   event and a dwell, and its stage sticks for all of it. Each event's words fly in with the scroll and take the one
   place under the visual, in turn. */
.motion .beat--scene { display: block; pointer-events: none; }   /* (its stage's empty room passes clicks on) */
.motion .beat--scene .scene-stage > * { pointer-events: auto; }
.motion .scene-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar) + 12px) 0 20px; }
.scene-stage > .beat-k { margin: 0 0 14px; }
.scene-pin { position: relative; }
.scene-pin .panel { min-height: 0; aspect-ratio: auto; max-height: var(--pin-h); padding: 26px 36px 22px; }
.scene-pin .panel--stack { gap: 18px; }
/* Dentsys: real screens (demo data) in a still window, stepped through as its scene plays; phones show the phone view */
.win--shots { max-width: calc((var(--pin-h) - 40px) * 1.6); }
.win-shots { position: relative; aspect-ratio: 1200 / 750; overflow: hidden; background: #F3F3F1; }
.win-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; }   /* (each at its own shape; the window shows its top) */
.win-shot--phone { display: none; }
.motion:not(.is-stack) .beat--shots .scene-stage { justify-content: flex-start; padding-top: var(--shots-top, calc(var(--bar) + 12px)); }
html:not(.motion) .win-shots { aspect-ratio: auto; }
html:not(.motion) .win-shot { position: static; height: auto; }
html:not(.motion) .win-shot + .win-shot { border-top: 1px solid var(--line); }
.is-stack .win--shots { width: min(100%, calc((var(--pin-h) - 40px) * 390 / 844)); margin: 0 auto; }
.is-stack .win-shots { aspect-ratio: 390 / 844; }
.is-stack .win-shot { display: none; }
.is-stack .win-shot--phone { display: block; }
.scene-pin .vz-box { height: auto; }
.scene-pin .vz-box .vz { height: auto; max-height: calc(var(--pin-h) - 170px); }
.scene-pin .panel--stack .vz-box .vz { max-height: calc(var(--pin-h) - 270px); }
.scene-steps p { max-width: 640px; font-size: 19px; line-height: 1.45; letter-spacing: -.006em; color: var(--ink); text-wrap: pretty; }
.scene-steps p .build-case { margin-left: 4px; font-size: 16px; }
/* (all of a scene's words in one place: the tallest sets its height, so nothing under it moves as they change) */
.motion .scene-steps { display: grid; margin-top: 22px; }
.motion .scene-steps > p { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
html:not(.motion) .scene-steps { display: grid; gap: 10px; margin-top: 18px; }
html:not(.motion) .scene-steps p { position: relative; padding-left: 26px; font-size: 16px; }
html:not(.motion) .scene-steps p::before { content: ""; position: absolute; left: 0; top: .72em; width: 13px; height: 1px; background: var(--grey); }
/* (clicking through a scene: Back, where it is, Next, and what to do; resume.js adds it. The static page lists every
   event's words instead) */
.scene-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.scene-nav[hidden], html:not(.motion) .scene-nav { display: none; }
.sn-ctl { display: flex; align-items: center; gap: 8px; }
.sn-b {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--chip); background: #fff; color: var(--ink); font: 500 15px/1 var(--font); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.sn-b svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sn-b:hover:not(:disabled) { border-color: var(--ink); }
.sn-next { border-color: var(--ink); background: var(--ink); color: #fff; }
.sn-next:hover:not(:disabled) { border-color: var(--blue); background: var(--blue); }
.sn-b:disabled { opacity: .35; cursor: default; }
.sn-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sn-n { min-width: 52px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--sec); }
.sn-hint { order: 2; margin: 0; font-size: 14px; color: var(--sec); }
/* A held part told in slides (resume.js): what it is, what it does, how I built it. The slides share one place, the
   tallest setting its height, so nothing under it moves as they change; Back/Next sit at its top right, on the line of
   each slide's label. The static page lists every slide */
.deck { position: relative; }
.deck-slide { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.deck-slide[hidden] { display: none; }
.deck-slide > .beat-k { min-height: 36px; margin: 0; }
.motion .deck-slides { display: grid; }
.motion .deck-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.motion .deck-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease .1s, visibility 0s; }
.deck-nav { margin: 0 0 14px; }
.deck-nav .sn-hint { order: 0; }
.motion:not(.is-stack) .deck-nav { position: absolute; top: 0; right: 0; z-index: 2; flex-wrap: nowrap; margin: 0; }
html:not(.motion) .deck-slide + .deck-slide { margin-top: 44px; }
.beat.beat--deck.is-linked .hold-stage > .deck:first-child { translate: none; box-shadow: none; }
.deck-slide > :is(.win, .lf, .panel) { transition: translate .5s var(--ease), box-shadow .4s ease; }
.beat--deck.is-linked .deck-slide > :is(.win, .lf, .panel) { translate: 0 -8px; box-shadow: 0 0 0 2px var(--blue), 0 44px 80px -36px rgb(46 71 99 / .55); }
/* (a screen's window at the screen's own shape, never taller than 16:10, and short enough that the slide fits the
   screen with its label, words and tools; never under 480px wide, so on a short screen the slide scrolls instead) */
.beat--deck .win--shots { max-width: min(100%, max(480px, calc((100vh - var(--bar) - 430px) * 1.6))); }
.beat--deck .win-shots { aspect-ratio: var(--ar, 1200 / 750); }
/* (the office page is cropped from a wider console: its right edge fades rather than stopping mid-row) */
.win-shots--crop .win-shot:not(.win-shot--phone) { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.is-stack .beat--deck .win--shots { max-width: none; width: min(100%, 300px); }
.is-stack .beat--deck .win-shots { aspect-ratio: 390 / 844; }
.motion:not(.is-stack) .beat--part .lf { width: min(100%, max(560px, calc((100vh - var(--bar) - 520px) * 1.6))); }
/* (each part with the tools that built it, under its screen) */
.part-build { padding-top: 16px; border-top: 1px solid var(--line); }
.part-build .build-h { margin-bottom: 10px; }
.part-build .dec { padding-top: 0; border-top: 0; }
.part-build .build-cases { margin-top: 10px; }
.part-build .build-grid:not(:has(.build-decs)) { grid-template-columns: minmax(0, 1fr); }
.part-build .build-tools .chips li { height: 30px; padding: 0 12px; font-size: 13px; }
/* (a part with no screen of its own: what it is, in its numbers) */
.panel.panel--fact { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 34px 40px 36px; text-align: left; }
.fact-title { margin: 0; font-size: clamp(30px, 2.6vw, 40px); font-weight: 420; line-height: 1.1; letter-spacing: -.035em; }
.fact-lede { margin: 12px 0 0; max-width: 640px; font-size: 19px; line-height: 1.45; color: var(--sec); text-wrap: pretty; }
.fact-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; width: 100%; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.fact-nums li { display: grid; align-content: start; gap: 8px; }
.fact-nums b { font-size: clamp(38px, 3.6vw, 54px); font-weight: 420; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fact-nums span { font-size: 15px; line-height: 1.4; color: var(--sec); text-wrap: pretty; }

.panel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 34px 44px;
  border-radius: 20px;
  background: var(--dark); color: var(--on-dark);
  overflow: hidden;
}
.panel--stack { flex-direction: column; gap: 26px; }
/* other surfaces: the same visuals drawn in ink on paper, or on the hoodie-blue tint */
.panel--paper { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.panel--paper .vz-box, .panel--tint .vz-box { --vz-bg: #F6F6F5; }
.panel--tint { background: var(--blue-tint); color: var(--ink); }
.panel--tint .vz-box { --vz-bg: #E7ECF2; --vz-track: #D2DBE6; --vz-dim: #B3C0CF; }
.panel--paper .counters li { border-top-color: var(--line); }
.panel--paper .c-l { color: var(--sec); }
.vz-box { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.vz-box .vz { width: 100%; max-width: 860px; }
.counters { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; width: 100%; max-width: 860px; }
.counters li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--dark-line); }
.c-n { font-size: clamp(30px, 2.6vw, 42px); font-weight: 400; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.c-l { font-size: 14px; color: var(--dark-sec); }
.chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 860px; }
.chips li { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid #34373C; border-radius: 999px; font-size: 13.5px; color: var(--on-dark); }

/* window frames: screenshots and live embeds */
.win, .lf {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(20 21 23 / .09); border-radius: 14px;
  background: #fff;
  box-shadow: 0 50px 100px -50px rgb(20 21 23 / .4), 0 16px 32px -20px rgb(20 21 23 / .14);
}
.win-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px 0 14px; background: #EDEDEB; border-bottom: 1px solid rgb(20 21 23 / .06); font-size: 12.5px; }
.win-lights { display: flex; flex: none; gap: 7px; }
.win-lights i { width: 10px; height: 10px; border-radius: 50%; background: #D5D5D2; }
.win-url { min-width: 0; height: 26px; padding: 0 12px; overflow: hidden; border-radius: 8px; background: #F7F7F6; color: var(--sec); line-height: 26px; white-space: nowrap; text-overflow: ellipsis; }
.win-tag { flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.win-open {
  display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px;
  color: var(--ink); font-size: 13px; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.win-open svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.win-open:hover { background: #fff; color: var(--blue); }
.win-open:hover svg { transform: translate(1px, -1px); }
.win-img { display: block; width: 100%; height: auto; background: #F3F3F1; }

.lf { position: relative; }
.lf-body { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #0E0F11; }
.lf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: opacity .6s var(--ease); }
.lf-body iframe { position: absolute; left: 0; top: 0; border: 0; background: #fff; transform-origin: 0 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.lf.is-live iframe { opacity: 1; }
.lf.is-live .lf-poster { opacity: 0; pointer-events: none; }
.lf-veil {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;   /* (the prompt in the middle of the greyed page) */
  padding: 18px;
  border: 0; background: transparent; color: inherit; font: inherit;
  cursor: pointer;
  transition: background-color .35s ease;
}
.lf-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px; background: rgb(20 21 23 / .88); color: #fff;
  font-size: 13.5px;
  box-shadow: 0 12px 30px -12px rgb(20 21 23 / .6);
  transition: background-color .3s ease, transform .4s var(--ease);
}
.lf-veil:hover .lf-pill { background: var(--blue); transform: translateY(-2px); }
.lf-veil:focus-visible { outline: none; }
.lf-veil:focus-visible .lf-pill { outline: 2px solid var(--blue); outline-offset: 3px; }
/* (a live page is greyed out until the reader explores it, P029) */
.lf:not(.is-exploring) .lf-body > iframe, .lf:not(.is-exploring) .lf-poster { filter: grayscale(1) contrast(.8) brightness(1.05); }
.lf-veil { flex-direction: column; gap: 12px; background: radial-gradient(ellipse 46% 34% at 50% 50%, rgb(246 246 245 / .96), rgb(246 246 245 / .9) 55%, rgb(246 246 245 / .76)); }
.lf-veil:hover { background: radial-gradient(ellipse 46% 34% at 50% 50%, rgb(246 246 245 / .94), rgb(246 246 245 / .82) 55%, rgb(246 246 245 / .64)); }
.lf-veil .lf-pill { background: var(--ink); }
.lf-note { max-width: 34ch; font-size: 14px; line-height: 1.4; color: var(--ink); text-align: center; text-wrap: balance; }
.lf-esc {
  position: absolute; right: 88px; top: 8px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; line-height: 1.2;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--ease);
}
.lf.is-exploring { box-shadow: 0 0 0 2px var(--blue), 0 50px 100px -50px rgb(20 21 23 / .4); }
.lf.is-exploring .lf-veil { display: none; }
.lf.is-exploring iframe { pointer-events: auto; }
.lf.is-exploring .lf-esc { opacity: 1; transform: none; }
.lf.is-exploring .win-tag { visibility: hidden; }

/* How I built it: the tools, one decision that mattered, and the way on to the case study (which has the rest) */
.panel--build { align-items: center; padding: 30px 36px; }
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tools decs"; column-gap: 40px; width: 100%; }
.build-tools { grid-area: tools; } .build-decs { grid-area: decs; } .build-ask { grid-area: ask; }
.dec { display: grid; row-gap: 5px; padding-top: 14px; border-top: 1px solid var(--line); }
.dec b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.dec span { font-size: 15px; line-height: 1.45; color: var(--sec); }
/* talking points for an interviewer prepping a call */
.build-ask ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.build-ask li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.build-ask li::before { content: ''; position: absolute; left: 0; top: .68em; width: 10px; height: 1px; background: var(--blue); }
/* the way on to the deep page for this project */
.build-cases { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; }
.build-case { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; color: var(--blue); text-decoration: none; border-bottom: 1px solid rgb(46 71 99 / .3); padding-bottom: 1px; transition: border-color .2s ease; }
.build-case span { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.build-case:hover { border-bottom-color: var(--blue); }
.build-case:hover span { transform: translateX(3px); }
.build-case:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.build-h { margin: 0 0 14px; font-size: 13.5px; color: var(--sec); }
.build-tools .chips li { height: 34px; padding: 0 13px; font-size: 13.5px; }
.decs { counter-reset: dec; display: grid; gap: 18px; }
.decs li { counter-increment: dec; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.decs li::before { content: counter(dec); grid-row: span 2; font-size: 13.5px; color: var(--blue); font-variant-numeric: tabular-nums; padding-top: 2px; }
.decs b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.decs span { font-size: 15px; line-height: 1.45; color: var(--sec); }

/* the Education beat: coursework, done and next */
.panel--list { align-items: center; justify-content: flex-start; padding: 36px 44px; }
.panel--list .chips li { height: 38px; padding: 0 15px; font-size: 14.5px; }
.panel--list .courses-h { font-size: 15px; }
.courses { width: 100%; }
.courses-h { margin: 0 0 12px; font-size: 14px; color: var(--sec); }
.courses-h + .chips { margin-bottom: 28px; }
.chips--ink li { border-color: var(--line); color: var(--ink); background: #fff; }
.chips--next li { border-style: dashed; border-color: var(--chip); color: var(--sec); background: transparent; }

/* the Skills stop: each skill with the projects that prove it */
.panel--skills { align-items: center; padding: 6px 32px; }
/* (paper cards of words and links never clip: only the dark panels frame a drawing) */
.panel--skills, .panel--build, .panel--list { overflow: visible; }
.skl { width: 100%; }
.skl > div { display: grid; grid-template-columns: 136px minmax(0, 0.9fr) minmax(0, 1.25fr); column-gap: 22px; align-items: baseline; padding: 11px 0 12px; border-top: 1px solid var(--line); }
.skl > div:first-child { border-top: 0; }
.skl dt { font-size: 13.5px; color: var(--sec); }
.skl-s { font-size: 14.5px; line-height: 1.42; }
.skl-u { display: flex; flex-wrap: wrap; gap: 5px; }
.skl-u a { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 11px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.2; text-decoration: none; transition: background-color .25s ease; }
.skl-u a i { font-style: normal; color: rgb(255 255 255 / .62); }
/* (a long one wraps as one line of text, not as two columns squeezed into a capsule) */
.skl-u a { display: inline-block; border-radius: 14px; }
.skl-u a i { margin-left: 6px; }
.skl-u a:hover { background: var(--blue); }

/* Who I am: the lead */
.lead { display: flex; flex-direction: column; justify-content: center; }
.lead-k { margin: 0; font-size: 14px; font-weight: 400; color: var(--sec); }
.lead-line { margin-top: 16px; max-width: 900px; font-size: clamp(34px, 3.1vw, 48px); font-weight: 420; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.lead-line > span { display: block; }
.lead-line > span + span { margin-top: .12em; }
.lead-line .g { color: var(--grey); }
.lead .about-list { margin-top: 40px; }
.lead-line--quote { max-width: 860px; }
.lead-next { margin-top: 34px; font-size: 18px; color: var(--sec); }

/* What I want to do */
.purpose { display: flex; flex-direction: column; justify-content: center; }
.purpose-line { margin-top: 18px; max-width: 900px; font-size: clamp(44px, 4.4vw, 70px); font-weight: 420; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.purpose-words { margin-top: 44px; max-width: 820px; border-top: 1px solid var(--line); }
.purpose-words li { padding: 18px 0 19px 34px; border-bottom: 1px solid var(--line); font-size: 21px; line-height: 1.4; letter-spacing: -.01em; position: relative; }
.purpose-words li::before { content: ""; position: absolute; left: 0; top: 30px; width: 18px; height: 2px; background: var(--blue); }

/* Where I fit: Hiring for… */
.fit-bs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fit-b {
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--chip); background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.fit-b:hover { border-color: var(--blue); color: var(--blue); }
.fit-b[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.beat--fit + .beat--fit { margin-top: 0; }
/* desktop: the five statements pinned as one list (resume.js sizes it and sets --hold-top), the team in view lit */
.motion:not(.is-stack) .fit-stage { position: sticky; top: var(--hold-top, calc(var(--bar) + 12px)); }
.motion:not(.is-stack) .fit-list .hold-stage { position: static; }
.motion:not(.is-stack) .fit-list .fit-card { padding: 16px 0 17px; opacity: calc(.3 + .7 * var(--lit, 1)); }
.motion:not(.is-stack) .fit-list .beat--fit:focus-within .fit-card { opacity: 1; }   /* (a statement reached by keyboard lights) */
.motion:not(.is-stack) .fit-list .fit-pitch { margin-top: 6px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
.motion:not(.is-stack) .fit-list .fit-ev { margin-top: 10px; }
.motion:not(.is-stack) .fit-list .fit-ev a { height: 32px; padding: 0 14px; font-size: 13px; }
.fit-card { display: flex; flex-direction: column; padding: 30px 0 32px; border-top: 1px solid var(--line); }
.fit-name { font-size: 15px; color: var(--sec); transition: color .4s ease; }
.fit-pitch { margin-top: 10px; max-width: 820px; font-size: clamp(26px, 2.2vw, 34px); font-weight: 420; line-height: 1.16; letter-spacing: -.028em; text-wrap: pretty; }
.fit-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.fit-ev .build-h { margin: 0; }
.fit-ev ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-ev a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; text-decoration: none;
  transition: background-color .3s ease;
}
.fit-ev a:hover { background: var(--blue); }
.in-sections [id^="fit-"]:is(.beat--fit) .fit-name { color: var(--sec); }
.fit-contact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 17px; }
.fit-mail { margin-left: 6px; font-size: 22px; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fit-mail:hover { color: var(--blue); }
.fit-links { display: flex; gap: 22px; font-size: 15px; }
.fit-links a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: underline; text-decoration-color: var(--chip); text-underline-offset: 5px; }
.fit-links a:hover { color: var(--blue); text-decoration-color: currentColor; }
/* the evidence for the chosen team, marked on the page */
.doc--set .s-list li:not([data-f]), .doc--set .s-skill { background-color: rgb(231 236 242 / var(--fit, 0)); box-shadow: 0 0 0 6px rgb(231 236 242 / var(--fit, 0)); border-radius: 4px; }
.doc--set li::before { background: color-mix(in srgb, var(--blue) calc(var(--fit, 0) * 100%), var(--grey)); }

/* ---------------------------------------------------------------- Who I am: the person */

.champ { display: flex; flex-direction: column; }
.champ-meta { display: flex; gap: 18px; font-size: 14px; line-height: 1.5; color: var(--sec); }
.champ-meta span:first-child { color: var(--ink); font-variant-numeric: tabular-nums; }
/* (lines a little apart, so the second line's highlight starts below the first line's descenders) */
.champ-title { margin-top: 14px; font-size: clamp(44px, 4.4vw, 70px); font-weight: 420; line-height: 1.12; letter-spacing: -.045em; }
.champ-title .sl { position: relative; display: inline-block; white-space: nowrap; }
/* (the selection box reaches below the baseline, so descenders stay inside it) */
.sl-sys, .sl-blue { position: absolute; left: 0; top: 0; right: 0; bottom: -.13em; white-space: nowrap; pointer-events: none; clip-path: inset(0 100% 0 0); }
.sl-sys { background: Highlight; color: HighlightText; }
.sl-blue { background: var(--blue); color: #fff; opacity: 0; }
/* (the last line has nothing below it: its band reaches past the deepest descender, the p of Champion) */
.champ-title .sl:last-child > .sl-sys, .champ-title .sl:last-child > .sl-blue { bottom: -.24em; }
html:not(.motion) .ch--person .champ-title .sl:last-child { padding-bottom: .24em; margin-bottom: -.24em; }
.champ-sub { margin-top: calc(18px + .24em * 70 / 19); max-width: 760px; font-size: 19px; line-height: 1.45; color: var(--sec); text-wrap: pretty; }   /* (clear of the title's highlight, which reaches .24em below it) */
.champ-photo { position: relative; flex: none; aspect-ratio: 2 / 1; max-width: 880px; margin-top: 28px; overflow: hidden; border-radius: 20px; background: #DCE3EA; }
.champ-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 60%; }
/* its résumé line hovered: the photo lights, not a square box round the words */
.beat--champ.is-linked .hold-stage > .champ:first-child { box-shadow: none; }
.champ-photo { transition: box-shadow .4s ease; }
.beat--champ.is-linked .champ-photo { box-shadow: 0 0 0 2px var(--blue), 0 44px 80px -36px rgb(46 71 99 / .55); }

.dict { display: flex; flex-direction: column; justify-content: center; }
.dict-word { display: flex; align-items: baseline; gap: 22px; font-size: clamp(88px, 9vw, 140px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.dict-pos { font-size: 20px; letter-spacing: 0; color: var(--sec); }
.dict-senses { margin-top: 36px; max-width: 820px; border-top: 1px solid var(--line); }
.dict-senses li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 16px 0 17px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -.02em; }
.dict-n { font-size: 15px; color: var(--sec); font-variant-numeric: tabular-nums; }
.dict-senses li:last-child span:last-child { color: var(--blue); }
.dict-close { margin-top: 40px; font-size: clamp(30px, 2.8vw, 42px); font-weight: 420; line-height: 1.1; letter-spacing: -.035em; }

.about-list { margin-top: 36px; max-width: 860px; border-top: 1px solid var(--line); }
.about-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.about-list dt { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.about-list dd { font-size: 18px; line-height: 1.45; color: var(--sec); text-wrap: pretty; }

/* ---------------------------------------------------------------- the end */

.reveal { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
/* desktop: the end is the page's last screen; its two copies of the page take the dock's place, its words the story's */
.motion:not(.is-stack) .ch--reveal { max-width: none; padding-top: 0; }
.motion:not(.is-stack) .ch--reveal .reveal { min-height: 100vh; padding: calc(var(--bar) + 24px) 0 24px; grid-template-columns: var(--sheets-w, 560px) minmax(0, 1fr); column-gap: 72px; align-items: center; margin-left: calc(var(--gut) - var(--stage-x, 720px)); }
.motion:not(.is-stack) .ch--reveal .reveal-sheets { align-items: center; }
.motion:not(.is-stack) .ch--reveal .mini-page { width: var(--mini-w, 100%); }
.reveal-sheets { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 520px; }
.motion:not(.is-stack) .reveal-sheets { max-width: none; opacity: 0; visibility: hidden; }
/* Plain / Designed: the end you can touch */
.flip { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #ECECEA; }
.flip button {
  position: relative; z-index: 1;
  height: 36px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--sec);
  font: inherit; font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: color .3s ease;
}
.flip button:hover { color: var(--blue); }
.flip button[aria-pressed="true"] { color: #fff; }
.flip-pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--blue); transition: transform .5s var(--ease), width .5s var(--ease); }
.flip-hint { font-size: 13.5px; color: var(--sec); white-space: nowrap; }
.flip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }   /* the hint drops below the toggle rather than wrap into a column */
.mini-page { position: relative; width: 100%; overflow: visible; }
.mini-page .mini-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgb(20 21 23 / .07), 0 30px 60px -30px rgb(20 21 23 / .3); }
/* (the designed page is longer than the plain one: the frame shows its top, fading where it carries on) */
.mini-page .mini-in--cut { overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.mini-page .doc { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; transform: none !important; visibility: visible !important; }
.mini-page .doc--set [data-k] { opacity: 1 !important; transform: none !important; }
.flip-line { position: absolute; left: 0; top: 0; width: 2px; margin-left: -1px; background: var(--blue); border-radius: 1px; opacity: 0; pointer-events: none; }
html:not(.js) .reveal-sheets { display: none; }
.reveal-title { font-size: clamp(44px, 4.2vw, 68px); font-weight: 420; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.reveal-title > span { display: block; }
.reveal-title .g { color: var(--grey); }
/* his sign-off, then the address */
.reveal-sign { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
/* the last choice before the email: which team, straight to its pitch */
.reveal-hire { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0 0 22px; font-size: 14px; color: var(--sec); }
.reveal-hire span { margin-right: 6px; }
.reveal-hire a { padding: 5px 11px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease; }
.reveal-hire a:hover { background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.reveal-hire a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.reveal-nums { display: grid; grid-template-columns: repeat(4, max-content); gap: 0 28px; margin-top: 40px; }
.reveal-nums a { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); text-decoration: none; transition: border-color .3s ease; }
.reveal-nums b { white-space: nowrap; font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.reveal-nums span { max-width: 12em; font-size: 13.5px; line-height: 1.35; color: var(--sec); }
.reveal-nums a:hover { border-top-color: var(--blue); }
.reveal-nums a:hover b { color: var(--blue); }
.reveal-contact { margin-top: 44px; }
.reveal-contact > * { display: block; }
.reveal-mail {
  width: fit-content;
  font-size: clamp(30px, 3vw, 46px); font-weight: 400; line-height: 1.15; letter-spacing: -.03em; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1.5px;
  padding-bottom: 4px;
  transition: color .3s ease, background-size .6s var(--ease);
}
.reveal-mail:hover { color: var(--blue); }
.reveal-avail { display: flex !important; align-items: center; gap: 10px; margin-top: 18px; font-size: 16px; color: var(--ink); }
.reveal-links { display: flex !important; flex-wrap: wrap; gap: 6px 28px; margin-top: 18px; font-size: 16px; }
.reveal-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--chip); transition: color .25s ease, text-decoration-color .25s ease; }
.reveal-links a:hover { color: var(--blue); text-decoration-color: currentColor; }
:is(html:not(.motion), .is-stack) .ch--reveal { padding-bottom: 120px; }

/* ---------------------------------------------------------------- phones and the static page: section cards
   Each section opens with a card of its own lines (phones: it re-sets from the PDF's lines as it comes up). */

.sec-focus { height: 0; }
.sec-card { position: relative; max-width: 1180px; margin: 0 auto; padding-top: 96px; }
.sec-card-set { position: relative; padding: 26px 24px 30px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(20 21 23 / .06), 0 30px 60px -36px rgb(20 21 23 / .3); }
.sec-card-set .s-in { width: auto; margin: 0; }
.sec-card-set .s-sec { margin-top: 0; }
.sec-card-set [data-k], .sec-card-set * { opacity: 1; }
.sec-card-set .s-more { position: static; opacity: 1; margin: 0; padding-top: 0; }
.sec-card-set .s-more::before { content: none; }
.sec-card.has-pdf .sec-card-pdf { position: absolute; left: 0; right: 0; top: 96px; padding: 16px 14px; border-radius: 14px; background: #fff; color: #000; font-family: 'EB Garamond', Garamond, serif; font-size: 12.5px; line-height: 1.3; overflow: hidden; }
.sec-card-pdf .pl { white-space: normal; display: inline; }
.sec-card-pdf .pdf-head { flex-wrap: wrap; font-size: 13px; }
.sec-card-pdf .pdf-ul { padding-left: 22px; }
.sec-card-pdf .pdf-ul li::before { left: -14px; font-size: 10px; }
.sec-card-pdf .pdf-sec { font-size: 13.5px; }
/* static page: the designed resume's sections are read from their cards, one before each story */
.is-static #resume-doc .s-sec, .is-static #resume-doc .s-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-static #resume-doc { padding-bottom: 0; }
/* (its head, his name and contact, is a card like each section's, on the same column, not a block left floating) */
.is-static #resume-doc { width: min(1180px, 100% - 2 * var(--gut)); margin: 56px auto 0; padding: 30px 24px 30px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(20 21 23 / .06), 0 30px 60px -36px rgb(20 21 23 / .3); }
.is-static #resume-doc .s-in { width: auto; margin: 0; }
/* (a section's card: one gap above it, as between the other parts, and no second gap inside it) */
.is-static .sec-card-set { margin-top: 0; }
.sec-card .sec-card-set .s-more { margin: 0; }
:is(html:not(.motion), .is-stack) .panel:not(.panel--build):not(.panel--skills):not(.panel--list):not(.panel--fact) { min-height: 360px; }
.is-static .panel:not(.panel--build):not(.panel--skills):not(.panel--list) .vz { max-height: 62vh; }
html:not(.motion) .marker { display: none; }
html:not(.motion) .ch--person .champ-title .sl { padding-bottom: .13em; margin-bottom: -.13em; background: var(--blue); color: #fff; box-decoration-break: clone; }
/* (the band is part of the line here, so the lines below are laid out clear of it) */
html:not(.motion) .ch--person .champ-title .sl, html:not(.motion) .ch--person .champ-title .sl:last-child { margin-bottom: 0; }
html:not(.motion) .ch--person .champ-sub { margin-top: 18px; }

/* the full-screen live frame (phones) */
/* phones: a live page opens full screen, its bar saying what was done to its data */
.lf-full { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #fff; }
.lf-full[hidden] { display: none; }
.lf-full-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); background: #F3F3F2; font-size: 14px; }
.lf-full-t { font-weight: 500; }
.lf-full-note { flex: 1 1 100%; order: 3; padding-bottom: 4px; font-size: 13px; color: var(--sec); }
.lf-full-note:empty { display: none; }
.lf-full-bar button { margin-left: auto; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.lf-full iframe { flex: 1; width: 100%; border: 0; }

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
  :root { --gut: 20px; --dcol: 1fr; --dgap: 0px; --pin-h: min(60vh, 520px); }
  .panel.panel--fact { padding: 24px 22px 26px; }
  .fact-lede { font-size: 17px; }
  .fact-nums { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px; padding-top: 18px; }
  .fact-nums b { font-size: 40px; }
  .deck-nav { gap: 8px 14px; }
  .motion .intro { display: block; }
  /* the paper lets go after the first screen: no negative margin, the spacer overlaps it instead */
  .motion .paper { margin-bottom: 0; }
  .motion .acts { margin-top: -100vh; padding-bottom: 100vh; }
  .motion #act-select { height: 90vh; }
  /* the bar: short labels, all five in reach */
  .topbar { justify-content: center; gap: 0; padding: 0 4px; }
  .tb-file, .tb-long { display: none; }
  .tb-short { display: inline; }
  .tb-nav { flex: none; gap: 0; font-size: 13px; }
  .tb-nav a { height: 44px; padding: 0 9px; }
  .tb-nav a.tb-pdf { height: 30px; margin-right: 4px; }
  .tb-nav a.tb-mail { margin-left: 0; }
  .doc--set { padding: 40px 0 56px; }
  .s-name { font-size: 44px; line-height: .98; letter-spacing: -.045em; white-space: normal; }
  .s-meta { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 24px; }
  .s-meta .s-label { margin-top: 10px; font-size: 13px; }
  .s-contact { flex-direction: column; gap: 2px; }
  .s-sec { margin-top: 36px; padding-top: 14px; }
  .s-entry { display: block; }
  .s-entry + .s-entry { margin-top: 26px; }
  .s-date { padding: 0 0 2px; font-size: 13px; }
  .s-org { font-size: 17px; }
  .s-loc { display: block; margin: 0; font-size: 14px; }
  .s-list li { padding-left: 20px; font-size: 15px; }
  .s-list li::before { width: 10px; }
  .s-skill { display: block; }
  .s-skill dt { font-size: 13px; }
  /* the story, stacked */
  .ch { padding-top: 88px; }
  .ch-meta { gap: 2px 12px; font-size: 13px; }
  .ch-title { margin-top: 8px; font-size: 38px; }
  .ch-lede { margin-top: 12px; font-size: 17px; }
  .ch-body { margin-top: 26px; }
  .ch-body--full { margin-top: 0; }
  .beat + .beat { margin-top: 44px; }
  .beat { gap: 12px; }
  .beat-k { margin: 56px 0 12px; }
  .beat-k:first-child { margin-top: 0; }
  .beat-cap { font-size: 15px; }
  .panel { padding: 22px 16px 20px; border-radius: 16px; }
  :is(html:not(.motion), .is-stack) .panel:not(.panel--build):not(.panel--skills):not(.panel--list) { min-height: 0; }
  .motion .scene-stage { padding: calc(var(--bar) + 8px) 0 16px; }
  .scene-pin .panel { padding: 20px 14px 14px; }
  /* (phones: a pinned visual's log keeps only its newest line; the text steps below carry the history) */
  .scene-pin .vz-feed li:not(.vz-new):not(.vz-hint) { display: none; }
  /* (and its one line keeps the same room whatever the event says: a pin's height never changes with its event, so the
     steps below it never move under the reader) */
  .scene-pin .vz-feed ol { min-height: calc(3 * 1.4em + 8px); }
  .scene-pin .vz-box .vz { max-height: calc(var(--pin-h) - 160px); }
  .scene-pin .panel--stack .vz-box .vz { max-height: calc(var(--pin-h) - 240px); }
  .scene-steps p { font-size: 17px; }
  .panel--stack { gap: 16px; }
  .counters { column-gap: 12px; }
  .counters li { padding-top: 10px; gap: 5px; }
  .c-n { font-size: 24px; }
  .c-l { font-size: 12.5px; }
  .chips { gap: 6px; }
  .chips li { height: 30px; padding: 0 11px; font-size: 12.5px; }
  .win, .lf { border-radius: 12px; }
  .win-bar { gap: 8px; padding: 6px 8px 6px 10px; font-size: 11.5px; flex-wrap: wrap; height: auto; min-height: 40px; row-gap: 6px; }
  .win-lights { gap: 5px; }
  .win-lights i { width: 8px; height: 8px; }
  .win-url { height: auto; padding: 3px 8px; line-height: 1.35; white-space: normal; text-overflow: clip; }
  .win-tag { padding: 3px 8px; font-size: 11px; }
  .win-open { display: none; }
  .lf-body { aspect-ratio: 16 / 11; }
  .lf-veil { padding: 12px; }
  .lf-pill { height: 44px; font-size: 13px; }
  .champ-title { margin-top: 10px; font-size: clamp(29px, 8.6vw, 40px); }
  .champ-sub { margin-top: 24px; }
  .champ-sub { margin-top: 12px; font-size: 16px; }
  .champ-photo { aspect-ratio: 3 / 2; margin-top: 20px; border-radius: 14px; }
  .dict-word { flex-wrap: wrap; gap: 6px 14px; font-size: clamp(56px, 17vw, 72px); }
  .dict-pos { font-size: 16px; }
  .dict-senses { margin-top: 24px; }
  .dict-senses li { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 0 13px; font-size: 19px; }
  .dict-close { margin-top: 26px; font-size: 26px; }
  .about-list { margin-top: 22px; }
  .about-list > div { display: block; padding: 14px 0 15px; }
  .about-list dt { margin-bottom: 4px; font-size: 16px; }
  .about-list dd { font-size: 16px; }
  .reveal { row-gap: 40px; }
  .panel--build { padding: 22px 18px; }
  .build-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "decs"; gap: 22px; }
  .dec b { font-size: 16px; }
  .dec span { font-size: 14.5px; }
  .build-ask li { font-size: 14.5px; }
  .decs b { font-size: 16px; }
  .decs span { font-size: 14.5px; }
  .lead-line { font-size: 30px; }
  .purpose-line { font-size: clamp(34px, 10vw, 42px); }
  .purpose-words li { font-size: 17px; padding-left: 28px; }
  .purpose-words li::before { top: 28px; }
  .fit-pitch { font-size: 24px; }
  .fit-contact { font-size: 16px; }
  .fit-b { height: 44px; }
  .flip button { height: 44px; }
  .flip-hint { display: none; }
  .reveal-title { font-size: 36px; }
  .reveal-nums { grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 28px; }
  .reveal-contact { margin-top: 30px; }
  .reveal-mail { font-size: clamp(22px, 7vw, 28px); }
  .reveal-avail { margin-top: 14px; font-size: 15px; }
  .reveal-links { gap: 0 20px; margin-top: 8px; font-size: 15px; }
  .skl > div { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px 0 16px; }
  .skl-u a { white-space: normal; }
  .panel--skills { padding: 6px 18px; }
  .sec-card { padding-top: 72px; }
  .sec-card-set { padding: 18px 16px 22px; }
  .sec-card.has-pdf .sec-card-pdf { top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .live-dot { animation: none; }
}

/* without JS the visuals cannot draw: keep their captions, drop the empty panels */
html:not(.js) .panel:has(.vz-box):not(:has(.counters, .chips)) { display: none; }

/* Also built (StudyLab and Studio Ivara): side by side, what each is, what it taught him, and the way to see it */
.also-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; width: 100%; }
.also { display: grid; align-content: start; row-gap: 16px; }
.also .build-h { margin: 0; }
.also-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; }
@media (max-width: 760px) {
  .also-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

/* The first screen's cue: what to do (scroll), and the fast way to the skills; it fades as the page starts to move.
   Under the page, centred; beside it, in the grey, where there is room (.is-side, resume.js) */
.first-cue { position: fixed; left: 50%; bottom: 20px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); white-space: nowrap; }
.first-cue.is-side { left: calc(50% + 408px * var(--pz) + 32px); bottom: 32px; align-items: flex-start; transform: none; }
html:not(.motion) .first-cue { display: none; }
.cue-k { display: inline-flex; align-items: center; gap: 9px; height: 44px; margin: 0; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; box-shadow: 0 14px 34px -14px rgb(20 21 23 / .6); }
.cue-k svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cue-s { margin: 0 0 4px; font-size: 14px; color: var(--sec); }
.cue-skills { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border: 1px solid var(--chip); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.cue-skills:hover { border-color: var(--ink); color: var(--blue); }
.cue-skills:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The agent workflow: the guard on production beside how the work is checked, each point under its own rule */
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; width: 100%; }
.wf-col { display: grid; align-content: start; row-gap: 14px; }
.wf-col .build-h { margin: 0; }
@media (max-width: 760px) {
  .wf-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}