/* Work page. Same kit as Home: Inter, Stone, white surfaces, small working things. */
.wk-h .le{max-width:36em}
.lt-t{display:grid;place-items:center;background:var(--well);color:var(--fg2);font-size:13px;font-weight:590;letter-spacing:-.02em;box-shadow:0 0 0 .5px var(--ring)}

/* Review aid: flip between the two options. */
.opt{position:fixed;z-index:25;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;border-radius:14px;background:var(--isl);color:var(--isl-2);box-shadow:0 0 0 .5px var(--isl-ring),var(--isl-sh);font-size:13px;font-weight:500;white-space:nowrap}
.opt>span{padding:0 10px 0 8px;color:var(--isl-3)}
.opt a{padding:7px 11px;border-radius:10px;text-decoration:none;transition:background-color .16s ease,color .16s ease}
.opt a[aria-current]{background:var(--isl-h);color:var(--isl-fg)}
@media (hover:hover) and (pointer:fine){.opt a:hover{color:var(--isl-fg)}}
.wk-end{padding-bottom:40px}
.wk-mail{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:16px;color:var(--fg3)}
.wk-mail .lk{color:var(--fg)}
.wk .ft-g{padding-bottom:28px}

/* ---------- A: the ruler ---------- */
.ru{margin-top:40px;padding:22px 24px 16px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 .5px var(--ring),0 1px 2px var(--sh1),0 16px 36px -22px var(--sh2)}
.ru-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ru-m{font-size:clamp(24px,2.4vw,30px);font-weight:510;letter-spacing:-.022em;line-height:1.15;font-variant-numeric:tabular-nums}
.ru-c{font-size:14px;color:var(--fg3);white-space:nowrap}
.ru-on{display:flex;flex-wrap:wrap;gap:6px;min-height:32px;margin-top:14px}
.ru-on li{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 6px;border-radius:10px;background:var(--well);font-size:13.5px;font-weight:500;letter-spacing:-.01em;transition:opacity .2s ease,transform .32s var(--out),filter .2s ease}
.ru-on li img,.ru-on .lt-t{width:20px;height:20px;border-radius:5.5px;box-shadow:0 0 0 .5px var(--ring)}
.ru-on .lt-t{font-size:9.5px;background:var(--surface)}
.ru-on li.in{opacity:0;transform:translateY(6px) scale(.96);filter:blur(2px)}
.ru-on li.out{position:absolute;opacity:0;transform:scale(.96);filter:blur(2px);pointer-events:none}
.ru-on{position:relative}
.ru-t{position:relative;margin-top:22px;padding:0 0 4px;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;border-radius:8px}
.ru-t:focus-visible{outline:2px solid var(--fg);outline-offset:6px}
.ru-k{position:relative;height:64px}
.ru-k i{position:absolute;bottom:0;width:2px;margin-left:-1px;height:calc(8px + var(--n)*8px);border-radius:1px;background:var(--fg);opacity:.2;transform-origin:50% 100%;transition:background-color .2s ease}
.ru-k.hv i{opacity:.12!important}
.ru-k.hv i.hl{background:var(--accent);opacity:.9!important}
.ru-y{position:relative;height:22px;margin-top:8px;font-size:11.5px;color:var(--fg3);font-variant-numeric:tabular-nums}
.ru-y span{position:absolute;top:0;transform:translateX(-50%)}
.ru-p{position:absolute;left:0;top:-8px;height:80px;width:0;pointer-events:none;will-change:transform}
.ru-p i{position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--accent)}
.ru-p::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--surface);transition:transform .2s var(--out)}
.ru-t.drag .ru-p::before{transform:scale(1.35)}
.ru-h{display:flex;justify-content:space-between;gap:16px;margin-top:6px;font-size:12.5px;color:var(--fg3)}
.wk-l{margin-top:14px}
.wk-a .w{transition:opacity .24s ease}
.wk-a .w.dim:not(:has(.x.on)){opacity:.36}
@media (hover:hover) and (pointer:fine){.wk-a .wl:hover .w.dim:not(:hover):not(:has(.x.on)){opacity:.36}.wk-a .wl:hover .w:hover{opacity:1}}

/* ---------- B: index and plates ---------- */
.pb{display:grid;grid-template-columns:228px minmax(0,1fr);gap:36px;margin-top:44px;align-items:start}
.ix{position:sticky;top:96px}
.ix ul{position:relative;display:flex;flex-direction:column;gap:2px}
.ix-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:11px;background:var(--surface);box-shadow:0 0 0 .5px var(--ring),0 1px 2px var(--sh1);opacity:0;pointer-events:none;transition:transform .42s var(--io),width .42s var(--io),height .42s var(--io),opacity .2s ease}
.ix a{position:relative;z-index:1;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:11px;text-decoration:none;font-size:13.5px;letter-spacing:-.008em;color:var(--fg2);transition:color .16s ease}
.ix a[aria-current]{color:var(--fg)}
.ix .ri{width:24px;height:24px;border-radius:6.5px}
.ix .lt-t{font-size:9.5px}
.ix-n{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-y{color:var(--fg3);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ix a:hover{color:var(--fg)}}
.pcs{display:flex;flex-direction:column;gap:16px}
.pc{scroll-margin-top:84px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 .5px var(--ring),0 1px 2px var(--sh1),0 16px 36px -22px var(--sh2)}
.pc-t{padding:16px 16px 18px;min-width:0}
.pc-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.pc-h .ri{width:40px;height:40px;border-radius:10px}
.pc-h h2{font-size:18px;font-weight:510;letter-spacing:-.016em;line-height:1.25}
.pc-h p{font-size:13.5px;color:var(--fg2);line-height:1.35}
.pc-y{align-self:start;margin-top:2px;font-size:13.5px;color:var(--fg3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-l{margin-top:22px;font-size:15.5px;line-height:1.55;letter-spacing:-.008em;text-wrap:pretty}
.pc-m{margin-top:10px;font-size:14px;line-height:1.55;color:var(--fg2);text-wrap:pretty}
.pc-m p+p{margin-top:8px}
.pc-p{position:relative;overflow:hidden;min-height:340px;padding:20px;border-radius:17px;background:var(--pb);color:var(--pi);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.pl-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.pl-tags li{padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--pi) 13%,transparent);font-size:12.5px;font-weight:500;letter-spacing:-.005em}
.pl-shots{position:absolute;left:20px;right:20px;bottom:0;display:flex;justify-content:center;align-items:flex-end;gap:14px}
.pl-shots img{display:block;width:min(46%,176px);height:250px;object-fit:cover;object-position:50% 0;border-radius:16px 16px 0 0;box-shadow:0 0 0 .5px color-mix(in srgb,var(--pi) 22%,transparent),0 -10px 30px -12px rgba(0,0,0,.35);transition:transform .7s var(--out)}
.pl-shots img+img{height:214px}
.pc.rv .pl-shots img{transform:translateY(46px)}
.pc.rv .pl-shots img+img{transform:translateY(70px)}
.pc.rv.in .pl-shots img{transform:none;transition-delay:.05s}
.pc.rv.in .pl-shots img+img{transition-delay:.13s}
.pl-steps{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.pl-steps li{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;border-radius:10px;background:color-mix(in srgb,var(--pi) calc(9% + var(--s)*5%),transparent);font-size:12.5px;font-variant-numeric:tabular-nums}
.pl-steps b{font-weight:500}
.pl-steps span{opacity:.7}
.pl-n{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;margin-bottom:14px}
.pl-n b{font-size:52px;font-weight:510;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pl-n span{font-size:13.5px;opacity:.72}
.pl-q{display:flex;flex-direction:column;gap:18px;height:100%;min-height:300px;margin:0}
.pl-q blockquote{margin-top:auto!important}
.pl-wt i{height:26px}
.pl-p-flex{}
.pl-q blockquote{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:510;letter-spacing:-.022em;line-height:1.2;text-wrap:balance}
.pl-q figcaption{font-size:13px;opacity:.72}
.pl-nda{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;align-items:center;padding:14px;margin-bottom:12px;border-radius:14px;background:color-mix(in srgb,var(--pi) 7%,transparent)}
.pl-lock{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--pi) 12%,transparent)}
.pl-lock svg{width:18px;height:18px}
.pl-nda p{font-size:12.5px;opacity:.72;line-height:1.35}
.pl-nda p b{display:block;font-size:14px;font-weight:510;opacity:1}
.pl-red{grid-column:1/-1;display:flex;flex-direction:column;gap:7px;margin-top:12px}
.pl-red i{display:block;width:var(--w);height:8px;border-radius:4px;background:color-mix(in srgb,var(--pi) 16%,transparent)}
.pl-lgs{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:4px 0 22px}
.pl-lg i{display:block;height:22px;width:calc(22px*var(--a));max-width:150px;background:currentColor;-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}

@media (max-width:860px){
  .pb{grid-template-columns:minmax(0,1fr);gap:14px}
  .ix{top:calc(64px + env(safe-area-inset-top,0px));z-index:5;margin:0 -20px;padding:6px 20px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .ix::-webkit-scrollbar{display:none}
  .ix ul{flex-direction:row;width:max-content}
  .ix a{grid-template-columns:22px auto;padding:6px 11px 6px 6px}
  .ix .ri{width:22px;height:22px}
  .ix-y{display:none}
  .pc{grid-template-columns:minmax(0,1fr);scroll-margin-top:126px}
  .pc-t{padding:12px 10px 14px}
  .pc-p{min-height:300px}
  .ru{padding:18px 16px 14px}
  .ru-y span.odd{display:none}
  .ru-h span+span{display:none}
}
@media (max-width:520px){
  .opt>span{display:none}
  .pl-shots img{height:220px}.pl-shots img+img{height:188px}
}
@media (prefers-reduced-motion:reduce){.pl-shots img,.ru-on li,.ix-pill,.wk-a .w{transition:none}}

.pc-p:has(.pl-big),.pc-p:has(.pl-q),.pc-p:has(.pl-nda){display:flex;flex-direction:column}
.pl-big{flex:1;display:grid;place-items:center;min-height:150px}
.pl-big i{display:block;width:min(70%,calc(64px*var(--a)));aspect-ratio:var(--a);background:currentColor;-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.pl-foot .pl-lgs{margin:0 0 14px}
.pc-p:has(.pl-nda) .pl-tags{margin-top:auto}
@media (max-width:860px){.pc-p{min-height:0}.pc-p:has(.pl-shots){min-height:300px}.pc-p:has(.pl-shots) .pl-tags,.pc-p:has(.pl-shots) .pl-steps,.pc-p:has(.pl-shots) .pl-n{margin-bottom:240px}}
@media (max-width:520px){.ru-k i{width:1px;margin-left:-.5px}}

/* ---------- C: the deck ---------- */
.wk-c .dk-p{margin-top:10px}
.dks{display:flex;flex-direction:column;gap:24px;margin-top:48px;--top:88px;--ch:min(560px,calc(100vh - var(--top) - 9*10px - 28px))}
.dk{position:sticky;top:calc(var(--top) + var(--k)*10px);height:var(--ch);transform-origin:50% 0;box-shadow:0 0 0 .5px var(--ring),0 -10px 26px -14px var(--sh2),0 16px 36px -22px var(--sh2)}
.dk::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:calc(var(--d,0)*.045);pointer-events:none}
.dk .pc-t{overflow:hidden}
.dk .pc-p{min-height:0}
.fan-s{display:flex;flex-direction:column;align-items:center;margin-top:88px}
.fan-h{display:flex;gap:10px;align-items:baseline;font-size:15px}
.fan-h b{font-weight:510;letter-spacing:-.01em}
.fan-h span{color:var(--fg3)}
.fan{position:relative;width:100%;height:330px;margin-top:22px}
.fan li{position:absolute;left:50%;top:24px;width:132px;height:184px;margin-left:-66px;transform-origin:50% 240%;transform:rotate(calc((var(--f) - 4)*.7deg));transition:transform .9s var(--io);transition-delay:calc(var(--f)*45ms)}
.fan.in li{transform:rotate(calc((var(--f) - 4)*9.5deg))}
.fan a{display:flex;flex-direction:column;height:100%;padding:12px;border-radius:15px;background:var(--pb);color:var(--pi);text-decoration:none;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 12px 26px -14px rgba(0,0,0,.5);transition:transform .32s var(--out)}
.fan a:active{transform:translateY(-10px) scale(.98);transition-duration:.09s}
.fan .ri{width:28px;height:28px;border-radius:7.5px}
.fan .lt-t{font-size:10.5px;background:color-mix(in srgb,var(--pi) 16%,transparent);color:var(--pi);box-shadow:none}
.fn-n{margin-top:auto;opacity:.92;font-size:13.5px;font-weight:510;letter-spacing:-.01em;line-height:1.2}
.fn-y{margin-top:8px;font-size:11.5px;opacity:.72;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.fan a:hover{transform:translateY(-18px)}}
@media (max-width:760px),(max-height:680px){
  .dk{position:relative;top:auto;height:auto}
  .dks{gap:12px}
}
@media (max-width:520px){
  .fan{height:250px}
  .fan li{width:96px;height:136px;margin-left:-48px;transform-origin:50% 260%}
  .fan.in li{transform:rotate(calc((var(--f) - 4)*5.6deg))}
  .fan a{padding:9px;border-radius:12px}
  .fan .ri{width:22px;height:22px;border-radius:6px}
  .fn-n{font-size:12px}.fn-y{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.fan li{transition:none}}

.fan-c{min-height:20px;margin-top:10px;font-size:14px;color:var(--fg2);text-align:center;transition:opacity .16s ease,filter .16s ease}
.fan-c.sw{opacity:0;filter:blur(2px)}
.fan li:has(a:hover),.fan li:has(a:focus-visible){z-index:2}
@media (max-width:520px){.fan.in li{transform:rotate(calc((var(--f) - 4)*6.4deg))}}

/* ---------- D: set in type ---------- */
/* Three columns: who and when stays pinned while you read, what I did, and a slot that shows the work when you point at the role. Space separates the roles; hierarchy is weight and ink, not size. */
.rds{display:flex;flex-direction:column;gap:96px;margin:88px 0 0;padding:0;list-style:none}
.toc{margin-top:40px}
.toc ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin:0;padding:0;list-style:none;max-width:760px}
.toc a{display:flex;justify-content:space-between;gap:16px;padding:9px 0;box-shadow:inset 0 -.5px 0 var(--line);text-decoration:none;font-size:15px;letter-spacing:-.006em;color:var(--fg);transition:color .16s ease}
.toc-y{color:var(--fg3);font-variant-numeric:tabular-nums;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.toc ol:hover a{color:var(--fg3)}.toc ol:hover a:hover,.toc ol:hover a:hover .toc-y{color:var(--fg)}}
.rd{scroll-margin-top:28px}
.rd{display:grid;grid-template-columns:232px minmax(0,1fr) 164px;column-gap:48px;align-items:start}
.rd-id,.rd-x{position:sticky;top:104px}
.rd-y{font-size:13.5px;color:var(--fg3);font-variant-numeric:tabular-nums;letter-spacing:.01em;transition:color .16s ease}
.rd-n{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:22px;font-weight:510;letter-spacing:-.02em;line-height:1.2}
.rd-n .ri{width:22px;height:22px;border-radius:6px;flex:none}
.rd-r{margin-top:7px;font-size:15px;line-height:1.4;color:var(--fg2);letter-spacing:-.006em;text-wrap:pretty}
.rd-s{margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--fg3)}
.rd-t{padding-top:30px;max-width:34em}
.rd-t p{font-size:15.5px;line-height:1.6;color:var(--fg2);letter-spacing:-.006em;text-wrap:pretty}
.rd-t p+p{margin-top:12px}
.rd-t .rd-l{font-size:17px;line-height:1.55;color:var(--fg);letter-spacing:-.011em}
.rd-x{padding-top:4px}
.rs{margin:0}
@media (hover:hover) and (pointer:fine){
  .rd:hover .rd-y{color:var(--fg)}
}
.rd-cv{margin-top:104px;font-size:15px;color:var(--fg2)}
.rd-cv .lk{color:var(--fg)}
@media (max-width:860px){
  .toc ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .rds{gap:64px;margin-top:56px}
  .rd{grid-template-columns:minmax(0,1fr)}
  .rd-id{position:static}
  .rd-t{padding-top:14px}
  .rd-cv{margin-top:64px}
}
@media (max-width:860px){.opt>span{display:none}.opt a{padding:7px 9px}}
@media (max-width:520px){.opt{font-size:12px;gap:0}.opt a{padding:7px 7px}}
.toc-y{white-space:nowrap}
@media (max-width:520px){.toc ol{grid-template-columns:minmax(0,1fr)}.opt{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}.opt::-webkit-scrollbar{display:none}}

:root{--il1:#dfddd9;--il2:#b2afa9;--il3:#5a5753}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--il1:#2e2c2a;--il2:#5c5955;--il3:#b9b6b1}}
:root[data-theme=dark]{--il1:#2e2c2a;--il2:#5c5955;--il3:#b9b6b1}
/* D: the drawings. Same grammar as the nav icons: soft body, solid part, strokes, accent on the one thing that matters. */
.il{display:block;width:164px;height:auto;aspect-ratio:148/112;color:var(--fg);overflow:visible}
.il .pop,.il .grow,.il .move,.il .dup,.il .tick,.il .beat,.il .drop,.il .gone,.il .slide,.il .shut,.il .hop,.il .eq,.il .wipe,.il .wd-ring{transform-box:fill-box;transform-origin:center}
.il .wd-ring{transform:rotate(-90deg)}
.il .sk.seat,.il .hold{opacity:0}
.il .s{fill:var(--il1)}
.il .p{fill:var(--il3)}
.il .p2{fill:var(--il2)}
.il .a{fill:var(--accent)}
.il .bgf{fill:var(--bg)}
.il .sk{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.il .ska{stroke:var(--accent);opacity:1;stroke-width:1.75}
/* The gap is a hair longer than the line, so an undrawn line leaves no round-capped dot at its end. */
.il .draw{stroke-dasharray:1 1.01}
.il .wd-ring{fill:none;stroke:var(--bg);stroke-width:3;stroke-linecap:round;stroke-dasharray:.72 2}
.il .wd-trk{fill:none;stroke:var(--bg);stroke-width:3;opacity:.3}
.il .flow{stroke-dasharray:2 4}
.il .dash{stroke-dasharray:3 3}
.il .gone,.il .dup{opacity:0}
.il .wd-tl{transform-origin:0 0}
.il .eq{transform-origin:50% 100%}
.il .wipe{transform-origin:0 50%}
.rs-il figcaption{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.rs-lg{display:block;height:clamp(14px,calc(46px/sqrt(var(--a))),26px);width:auto;aspect-ratio:var(--a);max-width:120px;background:var(--fg3);-webkit-mask:var(--u) left center/contain no-repeat;mask:var(--u) left center/contain no-repeat}
.rs-nda{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:1.35;color:var(--fg3)}
.rs-nda svg{width:12px;height:12px;flex:none;margin-top:1px}
.play .il .pop{animation:il-pop .42s var(--out) both}
.play .il .grow{animation:il-grow .75s var(--out) both}
.play .il .move{animation:il-move .75s var(--io) both}
.play .il .dup{animation:il-dup 1.1s var(--io) both}
.play .il .draw,.play .il .wd-ring{animation:il-draw .5s var(--out) both}
.play .il .wd-ring{animation-name:il-ring;animation-duration:.9s}
.play .il .wipe{animation:il-wipe .3s var(--out) both}
.play .il .slide{animation:il-slide .5s var(--out) both}
.play .il .shut{animation:il-shut .34s var(--back) both}
.play .il .gone{animation:il-gone 1.1s var(--out) both}
.play .il .tick{animation:il-tick .36s var(--out) both}
.play .il .eq{animation:il-eq .64s ease-in-out 3 both}
.play .il .flow{animation:il-flow .7s linear 3 both}
.play .il .beat{animation:il-beat .6s var(--out) both}
.play .il .drop{animation:il-drop .62s var(--back) both}
.play .il .hopx{animation:il-hopx 1.1s linear both}
.play .il .hopy{animation:il-hopy 1.1s both}
.play .il .hold{animation:il-hold var(--t) linear both}
.play .il .fade{animation:il-fade .3s ease both}
.play .il .seat{animation:il-seat 1.5s ease both}
.play .il [style*="--d"]{animation-delay:calc(var(--d)*1ms)}
@keyframes il-pop{from{opacity:0;transform:scale(.6)}}
@keyframes il-fade{from{opacity:0}}
@keyframes il-seat{0%,58%{opacity:.55}75%,100%{opacity:0}}
@keyframes il-hold{0%,99%{opacity:1}100%{opacity:0}}
/* Grows out of the tile it starts as: that tile takes the accent first, then lifts. */
@keyframes il-grow{0%{opacity:0;transform:scale(var(--sx),var(--sy))}22%{opacity:1;transform:scale(var(--sx),var(--sy))}}
@keyframes il-ring{from{stroke-dashoffset:.72}}
@keyframes il-move{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}12%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes il-dup{0%{opacity:0;transform:translate(var(--dx),var(--dy))}15%{opacity:1}70%{opacity:1;transform:none}100%{opacity:0;transform:translate(2px,-2px) scale(.96)}}
@keyframes il-draw{from{stroke-dashoffset:1}}
@keyframes il-wipe{from{opacity:0;transform:scaleX(0)}}
@keyframes il-slide{from{opacity:0;transform:translateX(-22px)}}
@keyframes il-shut{from{opacity:0;transform:translateY(-4px)}}
@keyframes il-gone{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
@keyframes il-tick{40%{transform:scale(1.12)}}
@keyframes il-eq{50%{transform:scaleY(.35)}}
@keyframes il-flow{to{stroke-dashoffset:-12}}
@keyframes il-beat{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.25)}}
@keyframes il-drop{from{opacity:0;transform:translateY(-26px)}}
/* The hop: across at an even pace, up and down on separate curves, so each jump is an arc rather than a zigzag. */
@keyframes il-hopx{0%,6%{transform:translateX(-84px)}16%{transform:translateX(-70px)}28%{transform:translateX(-56px)}38%{transform:translateX(-42px)}50%{transform:translateX(-28px)}60%{transform:translateX(-14px)}72%,100%{transform:none}}
@keyframes il-hopy{0%{opacity:0;transform:translateY(42px)}6%{opacity:1;transform:translateY(42px);animation-timing-function:cubic-bezier(.33,1,.68,1)}16%{transform:translateY(22px);animation-timing-function:cubic-bezier(.32,0,.67,0)}28%{transform:translateY(28px);animation-timing-function:cubic-bezier(.33,1,.68,1)}38%{transform:translateY(8px);animation-timing-function:cubic-bezier(.32,0,.67,0)}50%{transform:translateY(14px);animation-timing-function:cubic-bezier(.33,1,.68,1)}60%{transform:translateY(-6px);animation-timing-function:cubic-bezier(.32,0,.67,0)}72%,100%{transform:none}}
@media (max-width:860px){.rd-x{position:static;padding-top:24px}.il{width:148px}}
@media (prefers-reduced-motion:reduce){.play .il *{animation:none!important}}

/* D: quotes. One line, a size up and a weight down, on its own row across the text and drawing columns, so it reads as a voice before you read a word. */
.rd-id{grid-column:1;grid-row:1/span 2}
.rd-t{grid-column:2;grid-row:1}
.rd-x{grid-column:3;grid-row:1}
.wd-q{position:relative;grid-column:2;grid-row:2;margin:40px 0 0;padding:24px 28px 22px;border-radius:22px;background:color-mix(in srgb,var(--accent) 5%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.wd-qm{display:block;width:28px;height:auto;margin-bottom:14px;fill:var(--accent)}
.wd-q blockquote{margin:0;font-size:clamp(21px,2vw,24px);line-height:1.28;font-weight:430;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.wd-q figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px}
.wd-q figcaption b{font-size:14px;font-weight:510;letter-spacing:-.008em;color:var(--fg2)}
.wd-q figcaption span{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3)}
@media (max-width:860px){.rd-id,.rd-t,.rd-x,.wd-q{grid-row:auto;grid-column:auto}.wd-q{margin-top:28px;padding:20px 20px 18px}.wd-qm{width:24px;margin-bottom:12px}.wd-q blockquote{font-size:20px}}
/* D: the role you're reading keeps its years in full ink. */
.rd.wd-cur .rd-y{color:var(--fg)}
/* D: text arrives once. */
.rd .wd-ar{opacity:0;transform:translateY(8px);filter:blur(2px);transition:opacity .4s ease,transform .5s var(--out),filter .4s ease;transition-delay:calc(var(--k)*60ms)}
.rd.in .wd-ar{opacity:1;transform:none;filter:none}
.toc a{transition:color .16s ease,transform .26s var(--out)}
.toc a:active{transform:scale(.985);transition-duration:.09s}

/* ---------- About ---------- */
.ab-top{display:grid;grid-template-columns:minmax(0,1fr) 164px;column-gap:48px;align-items:end}
.ab-top .tt{max-width:12em}
.ab-me{display:block;width:164px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 0 0 .5px var(--ring),0 16px 36px -22px var(--sh2)}
.ab-me img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ab{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:48px;align-items:start;margin-top:112px;scroll-margin-top:28px}
.ab-p .ab:first-of-type{margin-top:72px}
.ab-h{position:sticky;top:104px;margin:0;font-size:22px;font-weight:510;letter-spacing:-.02em;line-height:1.2}
.ab-b{min-width:0;max-width:680px}
.ab-lede{margin:0;max-width:34em;font-size:19px;line-height:1.55;letter-spacing:-.012em;color:var(--fg);text-wrap:pretty}
.fr,.dl{margin:36px 0 0;padding:0;list-style:none;max-width:600px}
.dl{margin-top:0}
.fr li,.dl li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;box-shadow:inset 0 .5px 0 var(--line)}
.fr li:last-child,.dl li:last-child{box-shadow:inset 0 .5px 0 var(--line),inset 0 -.5px 0 var(--line)}
.fr-n{font-family:var(--mono);font-size:13.5px;letter-spacing:-.02em;color:var(--fg)}
.fr-t{font-size:15px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.dl-k{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3);padding-top:2px}
.dl-v{font-size:15px;line-height:1.5;color:var(--fg);text-wrap:pretty}
.ab-p1{margin:0;max-width:34em;font-size:17px;line-height:1.6;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
.ab-me-t p{margin:0;max-width:34em;font-size:16px;line-height:1.6;color:var(--fg2);text-wrap:pretty}
.ab-me-t p+p{margin-top:14px}
.ab-me-t p:first-child{color:var(--fg)}
.ab-b .rd-cv{margin-top:28px}

/* Principles: a light number, the line, the paragraph. A thin line beside them fills as you read, and each number turns blue once it's read. */
.prs-w{position:relative;padding-left:30px}
.ab-rl{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.ab-rl i{position:absolute;inset:0;background:var(--accent);transform-origin:50% 0;transform:scaleY(0)}
.prl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:48px}
.ab-pr{display:grid;grid-template-columns:42px minmax(0,1fr)}
.pr-n{padding-top:5px;font-family:var(--mono);font-size:13px;letter-spacing:-.02em;color:var(--fg3);transition:color .3s ease}
.ab-pr.on .pr-n{color:var(--accent)}
.pr-b h3{margin:0;font-size:19px;font-weight:510;letter-spacing:-.016em;line-height:1.3;text-wrap:balance}
.pr-b>p{margin:9px 0 0;max-width:36em;font-size:15.5px;line-height:1.6;color:var(--fg2);text-wrap:pretty}
.ab-q{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:12px;margin:16px 0 0;max-width:34em}
.ab-q .wd-qm{width:16px;margin:5px 0 0}
.pq-t{font-size:15.5px;line-height:1.5;color:var(--fg);letter-spacing:-.008em;text-wrap:pretty}
.pq-w{grid-column:2;margin-top:5px;font-family:var(--mono);font-size:12px;letter-spacing:-.02em;color:var(--fg3)}

/* How I work: one curve. Up while it's being figured out, down once the plan is clear, then a long flat tail. The dot walks it once, then follows you. */
.hill{margin:0}
.hill-s{display:block;width:100%;height:auto;overflow:visible}
.hill-c{fill:none;stroke:var(--fg3);stroke-width:1.5;opacity:.45}
.hill-p{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hill-m{fill:var(--bg);stroke:var(--fg3);stroke-width:1.5;transition:fill .3s ease,stroke .3s ease}
.hill-m.on{fill:var(--accent);stroke:var(--accent)}
.hill-d{fill:var(--accent);stroke:var(--bg);stroke-width:3;paint-order:stroke}
.hill-g{fill:var(--fg3);opacity:.3}
.hs-r{position:relative;height:44px;margin-top:10px}
.hs{all:unset;box-sizing:border-box;position:absolute;top:0;left:var(--x);transform:translateX(-50%);display:flex;align-items:baseline;gap:6px;padding:6px 8px;border-radius:9px;cursor:pointer;white-space:nowrap;font-size:14.5px;font-weight:500;letter-spacing:-.008em;color:var(--fg3);transition:color .2s ease}
.hs-n{font-family:var(--mono);font-size:12px;font-weight:400}
.hs[aria-pressed=true]{color:var(--fg)}
.hs:focus-visible{outline:2px solid var(--fg);outline-offset:0}
@media (hover:hover) and (pointer:fine){.hs:hover{color:var(--fg2)}.hs[aria-pressed=true]:hover{color:var(--fg)}}
.ab-hd{margin-top:18px;min-height:96px}
.hd-i{animation:hd-in .32s var(--out) both}
.hd-d{margin:0;max-width:34em;font-size:17px;line-height:1.55;letter-spacing:-.01em;color:var(--fg)}
.hd-o{margin:8px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:-.02em;color:var(--accent)}
@keyframes hd-in{from{opacity:0;transform:translateY(6px);filter:blur(2px)}}
.hill-nojs{display:none}
html:not(.js) .hill-nojs{display:block;margin:20px 0 0;padding:0 0 0 18px;font-size:15px;line-height:1.6;color:var(--fg2)}
html:not(.js) .hs-r,html:not(.js) .ab-hd{display:none}
@media (max-width:860px){
  .ab-top{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .ab-me{width:120px;order:-1}
  .ab{grid-template-columns:minmax(0,1fr);margin-top:72px}
  .ab-h{position:static;margin-bottom:18px}
  .fr li,.dl li{grid-template-columns:minmax(0,1fr);gap:2px}
  .hs-r{height:auto;display:flex;flex-wrap:wrap;gap:2px 4px}
  .hs{position:static;transform:none;padding:6px 8px 6px 0}
}
@media (prefers-reduced-motion:reduce){.hd-i{animation:none}.pr-n,.hill-m{transition:none}}

/* ---------- Reviews: letters, who first, the strongest line as the headline, the letter in full, signed. ---------- */
.rvs{display:flex;flex-direction:column;gap:112px;margin-top:88px}
.rv{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:48px;align-items:start;scroll-margin-top:28px}
.rv-id{position:sticky;top:104px}
.rv-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--accent) 7%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.rv-n{margin:14px 0 0;font-size:18px;font-weight:510;letter-spacing:-.016em;line-height:1.25}
.rv-r{margin:5px 0 0;font-size:14px;line-height:1.4;color:var(--fg2);text-wrap:pretty}
.rv-k{margin:5px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3)}
.rv-lg{margin-top:18px}
.rv-t{max-width:36em}
.rv-h{margin:0;font-size:clamp(22px,2.1vw,26px);font-weight:430;line-height:1.28;letter-spacing:-.02em;text-wrap:balance}
.rv-h .wd-qm{width:24px;margin-bottom:16px}
.rv-t>p{margin:16px 0 0;font-size:16.5px;line-height:1.65;color:var(--fg2);letter-spacing:-.008em;text-wrap:pretty}
.rv-t>h2+p{margin-top:24px}
.rv-t>p.rv-sig{margin-top:22px;text-align:right;font-family:var(--mono);font-size:13px;letter-spacing:-.02em;color:var(--fg)}
.rv-in{margin-top:120px}
.rv-il{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 40px;max-width:680px}
.rv-il p{margin:0;font-size:16px;line-height:1.5;letter-spacing:-.008em;color:var(--fg);text-indent:-.42em;text-wrap:pretty}
.rv-il span{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:-.02em;color:var(--fg3)}

/* ---------- CV: one grid; years in the mono, company and role, one paragraph. Prints as the document. ---------- */
.cv-p .ab:first-of-type,.rv-p .rvs{margin-top:72px}
.cv-sub{margin:12px 0 0;font-family:var(--mono);font-size:13.5px;letter-spacing:-.02em;color:var(--fg2)}
.cv-top .le{margin-top:20px}
.cv-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.cv-r{display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px}
.cv-y{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3);padding-top:3px}
.cv-t{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.cv-t b{font-size:16.5px;font-weight:510;letter-spacing:-.012em}
.cv-t span{font-size:15px;color:var(--fg2)}
.cv-d{margin:6px 0 0;max-width:36em;font-size:15px;line-height:1.55;color:var(--fg2);text-wrap:pretty}
.cv-m{list-style:none;margin:0;padding:0;max-width:680px}
.cv-m li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;padding:12px 0;box-shadow:inset 0 .5px 0 var(--line);font-size:15px;line-height:1.45}
.cv-m li:last-child{box-shadow:inset 0 .5px 0 var(--line),inset 0 -.5px 0 var(--line)}
.cv-m .cv-y{padding-top:1px;color:var(--fg2);text-wrap:pretty}
.cv-c a.cv-y{color:var(--fg)}
.cv-u{margin:28px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3)}
@media (max-width:860px){
  .rv{grid-template-columns:minmax(0,1fr)}
  .rv-id{position:static;margin-bottom:22px}
  .rv-il{grid-template-columns:minmax(0,1fr)}
  .cv-r,.cv-m li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media print{
  .isl,.scrim,.ft-g,.wk-end{display:none!important}
  :root{--bg:#fff;--fg:#111;--fg2:#333;--fg3:#666;--line:#ccc}
  body{background:#fff;padding:0}
  .col{padding-top:0;max-width:none}
  .ab-h,.rv-id,.rd-id,.rd-x{position:static}
  .cv-p .ab{margin-top:28px}
  .cv-r{break-inside:avoid}
  .cv-p a[href^="http"]::after,.cv-p a[href^="mailto"]::after{content:""}
  .js [data-in],.rd .wd-ar{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------- Reviews opening: six lines set as one composition. Hand-set starts, weight doing most of the work (Rauno, Pentagram, Klim).
   Pointing quiets the others and names the person at the end of the line (37signals timing); clicking goes to the letter, where the line is marked (Wikipedia, Basecamp). */
.rv-t1{margin:0;font-size:17px;font-weight:510;letter-spacing:-.01em;color:var(--fg2)}
.cq{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:30px}
.cq li{max-width:94%}
.cq-xl{font-size:clamp(34px,6vw,86px)}
.cq-l{font-size:clamp(28px,4.4vw,62px)}
.cq-m{font-size:clamp(24px,3.3vw,46px)}
.cq-s{font-size:clamp(20px,2.5vw,34px)}
.cq-indent{padding-left:.65em}
.cq-third{padding-left:33.333%;max-width:100%}
.cq a{display:block;color:var(--fg);text-decoration:none;font-weight:var(--w);letter-spacing:-.024em;line-height:1.08;text-wrap:balance;transition:opacity .26s ease}
.cq a:focus-visible{outline:2px solid var(--fg);outline-offset:6px;border-radius:8px}
.cq-who{display:inline-grid;vertical-align:baseline;margin-left:.35em;font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:-.02em;line-height:1}
.cq-who>span{grid-area:1/1;white-space:nowrap;transition:opacity .26s ease}
.cq-i{color:var(--fg3)}
.cq-n{opacity:0;color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .cq:hover a{opacity:.38;transition-duration:.18s}
  .cq a:hover{opacity:1}
  .cq a:hover .cq-i{opacity:0;transition-duration:.18s}
  .cq a:hover .cq-n{opacity:1;transition-duration:.18s}
}
.cq a:focus-visible .cq-i{opacity:0}.cq a:focus-visible .cq-n{opacity:1}
.rv-le{margin-top:44px}
.rv-mk{padding:0 .1em;margin:0 -.1em;border-radius:5px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rv:target .rv-mk,.rv.hit .rv-mk{animation:mk-in 1.6s ease-out}
@keyframes mk-in{0%,30%{background:color-mix(in srgb,var(--accent) 32%,transparent)}}
.rv-back{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:14px;color:var(--fg3);text-decoration:none;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.rv-back:hover{color:var(--fg)}}
@media (max-width:860px){
  .cq{gap:22px}
  .cq li{max-width:100%}
  .cq-third{padding-left:0}
  .cq-indent{padding-left:.35em}
  .cq a{line-height:1.15}
  .cq-who{display:block;margin:8px 0 0}
  .cq-i{display:none}
  .cq-n{opacity:1}
}
@media (prefers-reduced-motion:reduce){.rv:target .rv-mk{animation:none}}

/* About: the facts as a band of type (Apple's hairline, figure, caption; Polestar's light large numeral; Cloudflare's count-up). */
.abf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;margin-top:72px}
.sb-c{padding-top:18px;box-shadow:inset 0 .5px 0 var(--line)}
.sb-f{display:flex;align-items:baseline;gap:8px;margin:0}
.sb-n{font-size:clamp(56px,7.2vw,104px);font-weight:300;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--fg)}
.sb-u{font-family:var(--mono);font-size:13px;letter-spacing:-.02em;color:var(--fg2)}
.sb-t{margin:14px 0 0;max-width:19em;font-size:14px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.js .sb-c{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s var(--out);transition-delay:calc(var(--i,0)*120ms)}
.js .abf.in .sb-c{opacity:1;transform:none}

/* About: principles as a reader. Titles pinned on the left, active by ink only, with a blue tick on the column's hairline (Attio).
   The stage swaps fast and the index eases slower (Arc, Dia). Without JS, or on a phone, it unrolls into a plain stack (Dia). */
.ab-rd{margin-top:112px;scroll-margin-top:28px}
.rd2-in{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:48px;align-items:start}
.rd2-h{position:static;margin-bottom:22px}
.pi{position:relative;list-style:none;margin:0;padding:0 0 0 16px;box-shadow:inset 1px 0 0 var(--line)}
.pi a{display:flex;gap:12px;align-items:baseline;padding:7px 0;text-decoration:none;color:var(--fg3);font-size:15px;font-weight:500;letter-spacing:-.008em;transition:color .3s ease}
.pi-n{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:-.02em}
.pi a.on{color:var(--fg)}
@media (hover:hover) and (pointer:fine){.pi a:hover{color:var(--fg2)}.pi a.on:hover{color:var(--fg)}}
.pi-tk{position:absolute;left:0;top:0;width:2px;height:0;border-radius:1px;background:var(--accent);opacity:0;transition:transform .42s var(--out),height .42s var(--out),opacity .2s ease}
.rd2-s{display:grid}
.ps{max-width:34em}
.ps-n{margin:0 0 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--accent)}
.ps h3{margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:470;line-height:1.15;letter-spacing:-.024em;text-wrap:balance}
.ps-p{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:var(--fg2);text-wrap:pretty}
.ps .ab-q{margin-top:22px}
.js .rd2{position:relative;height:calc(var(--n) * 56vh + 100vh - 140px)}
.js .rd2-in{position:sticky;top:104px;height:calc(100vh - 140px)}
.js .ps{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.js .ps.on{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease .06s,transform .4s var(--out) .06s,visibility 0s}
html:not(.js) .ps+.ps{margin-top:48px}
@media (max-width:860px){
  .abf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:28px}
  .js .rd2{height:auto}
  .js .rd2-in{position:static;height:auto;grid-template-columns:minmax(0,1fr)}
  .rd2-in{grid-template-columns:minmax(0,1fr)}
  .pi{display:none}
  .js .ps{grid-area:auto;opacity:1;visibility:visible;transform:none}
  .ps+.ps{margin-top:44px}
}
@media (max-width:520px){.abf{grid-template-columns:minmax(0,1fr)}}

/* About: the hill gets the full width, its title above it. */
.ab-wide{grid-template-columns:minmax(0,1fr)}
.ab-wide .ab-h{position:static;margin-bottom:28px}
.ab-wide .ab-b{max-width:none}
.ab-wide .ab-hd{margin-left:0}
@media (prefers-reduced-motion:reduce){.js .sb-c,.js .ps,.pi-tk{transition:none}}

/* CV: the page is the document. Two A4 sheets on the stone field, paper stays white in both themes; actions in a column top-aligned with the sheet. */
.cv-w{display:grid;grid-template-columns:minmax(0,720px) 204px;column-gap:36px;align-items:start;margin-top:4px}
.sheets{display:flex;flex-direction:column;gap:20px}
.sheet{--p-fg:#1b1b1d;--p-fg2:#4d4d52;--p-fg3:#727278;--p-line:#e4e4e6;position:relative;aspect-ratio:210/297;padding:64px 64px 60px;border-radius:2px;background:#fff;color:var(--p-fg);font-size:12.5px;line-height:1.5;box-shadow:0 1px 2px rgba(40,42,52,.12),0 40px 80px -30px rgba(40,42,52,.34),0 0 0 1px rgba(40,42,52,.05);transition:box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){.sheet:hover{box-shadow:0 1px 2px rgba(40,42,52,.12),0 40px 80px -30px rgba(40,42,52,.34),0 0 0 1px rgba(40,42,52,.12)}}
.js .sheet{animation:sheet-in .5s cubic-bezier(.2,.8,.2,1) both}
.js .sheet+.sheet{animation-delay:.08s}
@keyframes sheet-in{from{opacity:0;transform:rotate(-1.2deg) scale(.94)}}
.cv-stamp{position:absolute;top:26px;right:64px;margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:-.01em;color:var(--p-fg3)}
.cv-name{margin:0;font-size:30px;font-weight:510;letter-spacing:-.025em;line-height:1.1;color:var(--p-fg)}
.sheet .cv-sub{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--p-fg2)}
.cv-ct{display:flex;flex-wrap:wrap;gap:3px 14px;margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;color:var(--p-fg2)}
.cv-ct a{color:inherit;text-decoration:none}
.cv-sum{margin:18px 0 0;padding-bottom:18px;font-size:13.5px;line-height:1.5;letter-spacing:-.006em;color:var(--p-fg);border-bottom:1px solid var(--p-line)}
.cv-sec{margin-top:20px}
.cv-sec h2{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:-.01em;color:var(--p-fg3)}
.sheet .cv-l{gap:14px}
.sheet .cv-r{display:block}
.sheet .cv-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
.sheet .cv-t b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--p-fg)}
.sheet .cv-y{padding:0;font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;color:var(--p-fg3)}
.cv-ro{margin:1px 0 0;font-size:12px;color:var(--p-fg2)}
.sheet .cv-d{margin:4px 0 0;max-width:none;font-size:12px;line-height:1.5;color:var(--p-fg)}
.sheet .cv-m{max-width:none}
.sheet .cv-m li{grid-template-columns:150px minmax(0,1fr);gap:16px;padding:7px 0;font-size:12px;line-height:1.45;color:var(--p-fg);box-shadow:none;border-top:1px solid var(--p-line)}
.sheet .cv-m li:last-child{box-shadow:none;border-bottom:1px solid var(--p-line)}
.sheet .cv-m .cv-y{color:var(--p-fg2);font-size:10.5px;text-wrap:pretty}
.folio{position:absolute;left:0;right:0;bottom:26px;margin:0;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--p-fg3)}
.cv-side{position:sticky;top:104px;display:flex;flex-direction:column}
.cv-act{all:unset;box-sizing:border-box;display:block;cursor:pointer;padding:12px 0;font-size:14.5px;font-weight:500;letter-spacing:-.008em;color:var(--fg);text-decoration:none;box-shadow:inset 0 -.5px 0 var(--line);transition:color .16s ease}
.cv-act:first-child{box-shadow:inset 0 .5px 0 var(--line),inset 0 -.5px 0 var(--line)}
.cv-dl{color:var(--accent)}
.cv-act:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.cv-act:hover{color:var(--accent)}}
.cv-meta{margin:22px 0 0}
.cv-meta div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px}
.cv-meta dt{color:var(--fg3)}
.cv-meta dd{margin:0;font-family:var(--mono);letter-spacing:-.02em;color:var(--fg2)}
@media screen and (max-width:860px){
  .cv-w{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .cv-side{position:static;order:-1;flex-direction:row;flex-wrap:wrap;gap:0 20px}
  .cv-act,.cv-act:first-child{box-shadow:none;padding:6px 0}
  .cv-meta{display:none}
  .sheet{--p-fg:var(--fg);--p-fg2:var(--fg2);--p-fg3:var(--fg3);--p-line:var(--line);aspect-ratio:auto;padding:0 0 40px;background:none;box-shadow:none}
  .js .sheet{animation:none}
  .cv-stamp{position:static;margin-bottom:10px}
  .folio{display:none}
  .sheet .cv-m li{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media print{
  @page{size:A4;margin:0}
  .cv-side,.isl,.scrim{display:none!important}
  .cv-p{padding:0!important;max-width:none}
  .cv-w{display:block;margin:0}
  .sheets{gap:0}
  .sheet{width:210mm;height:297mm;aspect-ratio:auto;padding:17mm 17mm 16mm;box-shadow:none;border-radius:0;animation:none!important;break-after:page;overflow:hidden}
  .sheet:last-child{break-after:auto}
}
@media (prefers-reduced-motion:reduce){.js .sheet{animation:none}}

.sheet .cv-ny li{grid-template-columns:minmax(0,1fr) auto}
.cv-p1{margin:0;font-size:12px;line-height:1.5;color:var(--p-fg)}

/* Audit fixes, 9 Nov: the accent is for things you can act on, so quotes and avatars go neutral. */
.wd-q{background:none;box-shadow:none;border:0;padding-left:0;padding-right:0}
.wd-qm,.rx-f .wd-qm{fill:var(--fg3)}
.rv-av{background:var(--well);color:var(--fg2);box-shadow:none}
.rv-mk{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.rv:target .rv-mk,.rv.hit .rv-mk{background:color-mix(in srgb,var(--fg) 10%,transparent)}
@keyframes mk-in{0%,30%{background:color-mix(in srgb,var(--fg) 18%,transparent)}}
.ps-o,.hd-o,.ab-st li p:last-child{text-wrap:balance}
.rs-lg{height:clamp(13px,calc(46px / sqrt(var(--a)) * var(--k,1)),30px);max-width:140px}
@media (min-width:900px){.toc ol{grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;column-gap:56px}}

/* About, the opening: the headline and the story read as one block, with the portrait beside them, top-aligned. No separate "Story" row. */
@media (min-width:761px){
  .ab-top{grid-template-columns:minmax(0,1fr) 248px;column-gap:72px;align-items:start}
  .ab-top .tt{max-width:none}
  .ab-me{width:248px;margin-top:10px}
}
.ab-hx .ab-lede{margin:28px 0 0;max-width:36em;font-size:clamp(17px,1.4vw,19px);line-height:1.55;letter-spacing:-.012em;color:var(--fg2);text-wrap:pretty}

/* A quote under a principle is an aside, not a second paragraph: quieter than the text above it, set off by a hairline, and it links to the letter it comes from. */
.ab-q{display:block;margin:20px 0 0;padding:2px 0 2px 16px;border-left:1.5px solid var(--line);max-width:32em}
.ab-q .pq-t{margin:0;font-size:15px;line-height:1.5;color:var(--fg2);font-style:normal;text-wrap:pretty}
.ab-q .pq-t::before{content:"“"}
.ab-q .pq-t::after{content:"”"}
.ab-q .pq-w{display:block;margin-top:6px;font-family:var(--sans);font-size:13px;letter-spacing:-.005em;color:var(--fg3)}
.ab-q .pq-w .lk{color:var(--fg2)}

/* How I work: what each step leaves behind, set as a quiet result line in the text face, not as code with an arrow. */
.ax-o{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--sans);font-size:13.5px;line-height:1.45;letter-spacing:-.005em;color:var(--fg);text-wrap:balance}
.ax-o::before{content:none}
.ax-st .ax-o{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--sans);font-size:13.5px;line-height:1.45;letter-spacing:-.005em;color:var(--fg);text-wrap:balance}
.ax-st .ax-o::before{content:none}
.rx .rx-f .wd-qm{fill:var(--fg3)}

/* ---------- v19 ---------- */
/* New drawing moves: bars rising from their base, a screen pushed on from the right, things crossed out going quiet. */
.il .up,.il .rise,.il .push{transform-box:fill-box}
.il .up{transform-origin:50% 100%}
.il .push{transform-origin:center}
.il .dimmed{opacity:.35}
.il .skb{stroke:var(--bg);opacity:1;stroke-width:2.2}
.play .il .rise{animation:il-rise .5s var(--out) both}
.play .il .push{animation:il-push .55s var(--out) both}
.play .il .dimmed{animation:il-dim .4s ease both}
/* These shorthands come after work.css's delay rule and would reset it to zero, so every bar rose at once: restate it. */
.play .il [style*="--d"]{animation-delay:calc(var(--d)*1ms)}
@keyframes il-rise{from{transform:scaleY(0)}}
@keyframes il-push{from{opacity:0;transform:translateX(40px)}}
@keyframes il-dim{from{opacity:1}}
/* Before a drawing has played, it waits blank, so it doesn't play over a finished frame. */
.js .ilp:not(.play) .il,.js .rx-d:not(.play) .il{opacity:0}
.ilp .il,.rx-d .il{transition:opacity .2s ease}

/* About: principles, nine at once, three across. A drawing, the number and name in the mono, the claim, the paragraph, a colleague's words. */
.ax-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 44px}
.ax-p{min-width:0}
.ax-il .il{width:100%;max-width:168px}
.ax-n{margin:22px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3)}
.ax-p h3,.ax-s h3{margin:6px 0 0;font-size:19px;font-weight:540;line-height:1.25;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.ax-t{margin:10px 0 0;font-size:15px;line-height:1.55;letter-spacing:-.006em;color:var(--fg2);text-wrap:pretty}
.ax-q{margin-top:18px}
.ax-q .pq-t{font-size:14.5px}
/* How I work: five steps along one line, each with what it leaves behind drawn above it. */
.ax-st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px}
.ax-s{min-width:0}
.ax-s .il{max-width:150px}
.ax-k{position:relative;display:flex;align-items:center;height:24px;margin:18px 0 0}
.ax-k b{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--fg2)}
.ax-k::after{content:'';position:absolute;left:24px;right:-28px;top:50%;height:1px;background:var(--line);transform-origin:0 50%}
.ax-s:last-child .ax-k::after{display:none}
.js .ax-k::after{transform:scaleX(0);transition:transform .5s var(--out);transition-delay:calc(var(--i) * 320ms + 260ms)}
.ax-st.in .ax-k::after{transform:none}
.ax-s h3{font-size:17px;margin-top:14px}
.ax-s .ax-t{font-size:14.5px}
.ax-o{margin:12px 0 0;font-family:var(--mono);font-size:12px;line-height:1.45;letter-spacing:-.02em;color:var(--fg)}
.ax-o::before{content:'→ ';color:var(--fg3)}
@media (max-width:860px){
  .ax-g{grid-template-columns:minmax(0,1fr);gap:56px}
  .ax-il .il{max-width:150px}
  .ax-st{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .ax-k::after{display:none}
}

/* Reviews: one person at a time. Their line beside a drawing of what they praised; the six below. */
.rx{margin-top:36px}
.rx-st{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;align-items:center}
.rx-qs,.rx-ds{display:grid}
.rx-f,.rx-d{grid-area:1/1}
.rx-f{margin:0;opacity:0;visibility:hidden;filter:blur(4px);transform:translateY(6px);transition:opacity .18s ease,filter .18s ease,transform .18s ease,visibility 0s .18s}
.rx-f.on{opacity:1;visibility:visible;filter:none;transform:none;transition:opacity .34s var(--out) .06s,filter .34s var(--out) .06s,transform .4s var(--out) .06s,visibility 0s}
.rx-f blockquote{margin:0}
.rx-f .wd-qm{display:block;width:30px;height:auto;margin-bottom:18px;fill:var(--accent)}
.rx-f blockquote span{display:block;font-size:clamp(23px,2.3vw,28px);line-height:1.3;font-weight:430;letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.rx-f figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:22px}
.rx-f figcaption b{font-size:15px;font-weight:540;letter-spacing:-.01em;color:var(--fg)}
.rx-f figcaption span{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3)}
.rx-go{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:500;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rx-go::after{content:' ↓'}
.rx-d{opacity:0;transition:opacity .2s ease}
.rx-d.on{opacity:1}
.rx-d .il{width:100%}
.rx-ls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;margin-top:48px;box-shadow:inset 0 .5px 0 var(--line)}
.rx-b{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:flex-start;gap:10px;padding:16px 0 4px;cursor:pointer;min-width:0}
.rx-b::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--out)}
.rx-b[aria-selected=true]::before{transform:none}
.rx-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line);transition:color .2s ease,box-shadow .2s ease,transform .16s var(--out)}
.rx-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.rx-w b{font-size:13.5px;font-weight:540;letter-spacing:-.01em;color:var(--fg3);transition:color .2s ease}
.rx-w span{font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:-.02em;color:var(--fg3)}
.rx-b[aria-selected=true] .rx-w b{color:var(--fg)}
.rx-b[aria-selected=true] .rx-i{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rx-b:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:6px}
.rx-b:active .rx-i{transform:scale(.94);transition-duration:.09s}
@media (hover:hover) and (pointer:fine){.rx-b:hover .rx-w b{color:var(--fg)}}
@media (max-width:860px){
  .rx-st{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .rx-ds{order:-1;width:200px}
  .rx-ls{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:36px}
  .rx-b{padding:14px 0 10px}
}
@media (prefers-reduced-motion:reduce){.rx-f,.rx-f.on{transition:opacity .2s ease,visibility 0s;filter:none;transform:none}.js .ax-k::after{transition:none}}
/* Without script, all six lines show in a list. */
html:not(.js) .rx-f{position:static;opacity:1;visibility:visible;filter:none;transform:none;grid-area:auto;margin-bottom:32px}
html:not(.js) .rx-ls,html:not(.js) .rx-ds{display:none}
/* about-reader.html (kept for comparison): the pinned box is as tall as its content, so nothing empty follows the last principle. */
@media (min-width:861px){.js .rd2-in{height:auto}.js .rd2{height:calc((var(--n) - 1) * 44vh + var(--ih,70vh))}}
.il .skd{opacity:.8;stroke-width:1.75}
.il .dimmed{opacity:.5}
/* A letter's quoted line is only marked when you arrive from the opening. */
.rv-mk{background:transparent;transition:background-color .5s ease}
.rv:target .rv-mk,.rv.hit .rv-mk{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.rx-i{width:28px;height:28px;font-size:11px}
.rx-b{gap:9px}
.ab .rd-cv{font-family:var(--sans);font-size:14.5px;letter-spacing:-.005em;color:var(--fg2)}

/* ---------- v20 ---------- */
/* With reduced motion the drawings never get .play, so they show their finished frame instead of waiting blank. */
@media (prefers-reduced-motion:reduce){.js .ilp:not(.play) .il,.js .rx-d:not(.play) .il{opacity:1}}

/* About, principles: the nine names in large type beside one large drawing (Instrument, Microsoft AI). The chosen name gets heavier and opens in place (Airtable, Faire). */
.pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);column-gap:clamp(40px,5vw,80px);align-items:start}
.pv-l{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.pv-i{border-top:1px solid var(--line)}
.pv-h{margin:0;font:inherit}
.pv-b{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr) 14px;align-items:baseline;width:100%;padding:15px 2px 14px 0;cursor:pointer}
.pv-n{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--fg3);transition:color .2s ease}
.pv-t{font-size:clamp(26px,2.45vw,34px);line-height:1.12;letter-spacing:-.032em;font-weight:340;color:var(--fg3);transition:color .25s ease,font-weight .35s var(--out)}
.pv-i.on .pv-t{font-weight:590;color:var(--fg)}
.pv-i.on .pv-n{color:var(--accent)}
/* A plus that turns into a minus when its item is open. */
.pv-x{position:relative;align-self:center;width:14px;height:14px}
.pv-x::before,.pv-x::after{content:'';position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;border-radius:1px;background:var(--fg3);transition:transform .32s var(--out),background-color .2s ease}
.pv-x::after{transform:rotate(90deg)}
.pv-i.on .pv-x::after{transform:rotate(0)}
.pv-i.on .pv-x::before,.pv-i.on .pv-x::after{background:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .pv-b:hover .pv-t{color:var(--fg)}
  .pv-b:hover .pv-x::before,.pv-b:hover .pv-x::after{background:var(--fg)}
}
.pv-b:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:6px}
/* The open item: claim, paragraph, a colleague's words. Its height opens, its text settles in just after. */
.pv-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--io)}
.pv-i.on .pv-p{grid-template-rows:1fr}
.pv-in{min-height:0;overflow:hidden;padding-left:48px}
.pv-in::after{content:'';display:block;height:28px}
.pv-in>*{opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease}
.pv-i.on .pv-in>*{opacity:1;transform:none;transition:opacity .36s var(--out) .1s,transform .5s var(--out) .1s}
.pv-c{margin:2px 0 0;max-width:28em;font-size:19px;font-weight:540;line-height:1.3;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.pv-in .ax-t{max-width:33em}
.pv-in .ab-q{margin-top:18px}
.pv-m{display:none}
/* The drawing, large, on a lighter ground. It stays in view while the list opens and closes. */
.pv-s{position:sticky;top:max(112px,calc(50vh - 190px))}
.pv-ds{--bg:var(--surface);--il1:color-mix(in srgb,var(--il2) 45%,var(--surface));display:grid;place-items:center;aspect-ratio:148/112;border-radius:24px;background:var(--surface)}
.pv-d{grid-area:1/1;width:80%;opacity:0;transition:opacity .22s ease}
.pv-d.on{opacity:1}
.pv-d .il{display:block;width:100%;height:auto}
/* Drawn about 2.4 times larger here, so the lines are thinned to keep their weight. */
.pv-d .il .sk,.pv-d .il .ska{stroke-width:1}
.pv-d .il .skd{stroke-width:1.3}
.pv-d .il,.pv-m .il{transition:opacity .2s ease}
@media (prefers-reduced-motion:no-preference){.js .pv-d:not(.play) .il,.js .pv-m:not(.play) .il{opacity:0}}
@media (max-width:860px){
  .pv{grid-template-columns:minmax(0,1fr)}
  .pv-s{display:none}
  .pv-b{grid-template-columns:38px minmax(0,1fr) 14px;padding:14px 2px 13px 0}
  .pv-t{font-size:25px}
  .pv-in{padding-left:38px}
  .pv-m{display:block;width:min(100%,220px);margin:6px 0 16px}
  .pv-m .il{display:block;width:100%;height:auto}
}
@media (prefers-reduced-motion:reduce){.pv-p{transition:none}.pv-i.on .pv-in>*,.pv-in>*{transform:none}}
/* Without script every item is open, each with its own drawing. */
html:not(.js) .pv-p{grid-template-rows:1fr}
html:not(.js) .pv-in>*{opacity:1;transform:none}
html:not(.js) .pv-s,html:not(.js) .pv-x{display:none}
html:not(.js) .pv-m{display:block;width:min(100%,220px);margin:6px 0 16px}
html:not(.js) .pv{grid-template-columns:minmax(0,1fr)}
html:not(.js) .pv-t{color:var(--fg);font-weight:590}

/* ---------- v21: the CV ---------- */
/* Short points under each role, a quiet marker in the page's grey. */
.cv-pt{margin:4px 0 0;padding:0 0 0 13px;list-style:none}
.cv-pt li{position:relative;font-size:12px;line-height:1.5;color:var(--p-fg)}
.cv-pt li+li{margin-top:1px}
.cv-pt li::before{content:'';position:absolute;left:-11px;top:.68em;width:4px;height:1px;background:var(--p-fg3)}
/* Skills read as text, not as code. */
.sheet .cv-sk .cv-y{font-family:inherit;font-size:12px;letter-spacing:-.003em;color:var(--p-fg)}
.sheet .cv-sk li{padding:5px 0}
.cv-ap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cv-ap .cv-d{margin-top:2px}
/* The phone number is on paper only. */
.cv-ph{display:none}
.cv-ct a{text-decoration:none}
@media print{
  .cv-ph{display:inline}
  .cv-ct a{color:var(--accent)}
  /* Normal tracking in print, so text copied out of the PDF comes out in order. */
  .sheet,.sheet *{letter-spacing:normal!important}
}
/* A little less air between sections and roles, so two pages hold everything with room above the folio. */
.sheet .cv-sec{margin-top:16px}
.sheet .cv-l{gap:11px}
.sheet .cv-sum{margin-top:14px;padding-bottom:14px}
/* An aspect-ratio box won't shrink below the width its content's height implies, so a tall sheet pushed into the actions column. It now always fits its column and grows taller instead. */
.sheet{min-width:0}

/* ---------- CV, design pass ---------- */
/* Name: a light first name and a heavier surname. */
.sheet .cv-name{font-size:34px;line-height:1.05;letter-spacing:-.035em;font-weight:300}
.cv-ln{font-weight:620}
/* Title and place on one line: the title in the ink, the place quieter. */
.sheet .cv-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:8px 0 0;font-family:inherit;font-size:13.5px;letter-spacing:-.01em;color:var(--p-fg2)}
.cv-sub b{font-weight:560;color:var(--p-fg)}
/* Contacts: an icon before each, the address itself always in text. */
.sheet .cv-ct{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;color:var(--p-fg)}
.cv-ct li{display:flex;align-items:center;gap:5px}
.cv-ct a{color:inherit;text-decoration:none}
.cv-ic{flex:none;width:11px;height:11px;fill:var(--accent)}
.cv-ic .o{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
li.cv-ph{display:none}
@media print{li.cv-ph{display:flex}.cv-ct a{color:inherit}}
/* Section headings carry the structure: Inter at a real size, a hairline running to the edge (RenderCV's classic theme, Awesome-CV). */
.sheet .cv-sec h2{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--p-fg)}
.sheet .cv-sec h2::after{content:'';flex:1;height:1px;background:var(--p-line)}
.sheet .cv-sum{border-bottom:0;padding-bottom:0}
.sheet .cv-sec{margin-top:18px}
/* Dates readable, still in the mono. */
.sheet .cv-t .cv-y{color:var(--p-fg2)}
/* Skills: the first column's labels quieter than the words recruiters look for. */
.sheet .cv-sk li>span:first-child{color:var(--p-fg2)}
.sheet .cv-sk li{border-top:0;padding:2px 0}
.sheet .cv-sk li:last-child{border-bottom:0}
.sheet .cv-m{display:flex;flex-direction:column}
/* Five contacts fit one line in Inter; the mono ran to two. */
.sheet .cv-ct{font-family:inherit;font-size:11px;letter-spacing:-.005em;gap:4px 15px}
/* A title with its own dates (promotions at one employer). */
.sheet .cv-ro{display:flex;justify-content:space-between;gap:12px}
.sheet .cv-ro .cv-y{color:var(--p-fg3)}
/* Fitting two pages: a narrower label column so skills stay on one line each, slightly tighter leading, a smaller top margin on paper. */
.sheet .cv-m li{grid-template-columns:116px minmax(0,1fr)}
.sheet .cv-d,.cv-pt li{line-height:1.45}
@media print{.sheet{padding-top:13mm}.cv-stamp{top:18px}}
.sheet .cv-ct{gap:4px 12px;font-size:10.5px}
.sheet .cv-cont{margin-top:0}
/* The sheet is white in both themes, so its icons keep the light theme's ink blue. */
.sheet{--p-ac:#2643d0}
.sheet .cv-ic{fill:var(--p-ac)}
.sheet .cv-ic .o{stroke:var(--p-ac)}
@media (max-width:860px){.sheet{--p-ac:var(--accent)}}

/* ---------- The PDF's text layer (10 Nov 2026) ---------- */
/* Three print-only rules, so that every PDF reader gets the words whole and in order. tools/cv.sh checks all three.
   1. A static Inter. Chrome embeds the variable Inter as Type 3 fonts and splits words across them, and Apple's PDF reader
      (Preview, Quick Look, Spotlight) then can't find "SwiftUI" in the file. The static files are the ones installed on the Mac
      that builds the PDF; a visitor printing the page without them gets the variable Inter, as before.
      Weights on paper: Regular for text and the first name, SemiBold for titles and headings, Bold for the surname. */
@font-face{font-family:"Inter Print";font-weight:400;src:local("Inter Regular"),local("Inter-Regular")}
@font-face{font-family:"Inter Print";font-weight:500;src:local("Inter Medium"),local("Inter-Medium")}
@font-face{font-family:"Inter Print";font-weight:600;src:local("Inter SemiBold"),local("Inter Semi Bold"),local("Inter-SemiBold")}
@font-face{font-family:"Inter Print";font-weight:700;src:local("Inter Bold"),local("Inter-Bold")}
@media print{
  .sheet,.sheet *{font-family:"Inter Print","Inter",-apple-system,system-ui,sans-serif!important;
    /* 2. No alternates, aligned figures or ligatures: with them, some readers drop letters and digits. */
    font-feature-settings:normal!important;font-variant-numeric:normal!important;font-variant-ligatures:none!important;font-optical-sizing:none!important}
  .sheet .cv-name{font-weight:400}
  .sheet .cv-ln{font-weight:700}
  .sheet .cv-sub b{font-weight:600}
  /* 3. Points stay in the normal flow. A positioned item is painted after the rest of the page, which wrote every point
        into the PDF after all the roles. The dash is a background now, not a positioned ::before. */
  .cv-pt{padding-left:0}
  .cv-pt li{position:static;padding-left:13px;background:linear-gradient(var(--p-fg3),var(--p-fg3)) no-repeat 2px .68em/4px 1px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cv-pt li::before{display:none}
}

/* A project's link: its address as quiet text beside the name, in the size and grey of the dates. */
.cv-nm{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cv-lk,.sheet .cv-t .cv-lk{font-size:10.5px;font-weight:400;letter-spacing:0;color:var(--p-fg2);text-decoration:none}
@media screen and (max-width:860px){.cv-p .sheet .cv-lk{font-size:var(--t-xs);color:var(--fg2)}}