@font-face{font-family:"V5SF";src:url(/v5/548f679ff6/fonts/SF-Pro-Text-Bold.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"V5SF";src:url(/v5/548f679ff6/fonts/SF-Pro-Text-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"V5SF";src:url(/v5/548f679ff6/fonts/SF-Pro-Text-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"V5SF";src:url(/v5/548f679ff6/fonts/SF-Pro-Text-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:V5Neutical;src:url(/v5/548f679ff6/fonts/Neutical-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:V5Neutical;src:url(/v5/548f679ff6/fonts/Neutical-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:V5NeuticalR;src:url(/v5/548f679ff6/fonts/Neutical-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Spectral;src:url(/v5/548f679ff6/sym/spectral-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:V5NeuticalR;src:url(/v5/548f679ff6/fonts/Neutical-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#111827; --ink2:#374151; --mute:#6b7280; --faint:#d1d5db; --paper:#f5f5f5; --line:#e5e7eb; --night:#0d0d0e;
  --sans:"V5SF",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:V5NeuticalR,Georgia,serif; --light:V5Neutical,Georgia,serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.23,1,.32,1); --dur-press:140ms; --ease-drawer:cubic-bezier(.32,.72,0,1); --ease-home:cubic-bezier(.4,0,.2,1); --dur-more:460ms;
  --peek:72px; --pad:32px; --gap:12px; --cp:48px;
}
@media (max-width:1023px){:root{--cp:32px}}
@media (max-width:640px){:root{--peek:180px;--pad:12px;--gap:10px;--cp:20px}}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h2,h3,p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
/* no system tap flash (Android draws a blue box): the controls give their own press */
html{-webkit-tap-highlight-color:transparent}
/* the press for controls that had only the system flash: round and pill controls shrink a touch (the scale property,
   so it adds to any transform they have), text tabs and links dim */
:is(.x,.sm,.go,.fmail,.totop,.mini a):not(:disabled):active,.cvb:active i{scale:.96}
:is(.seg,.tab,.steps button,.brand,.proof):active{opacity:.7}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:2px solid #9ca3af;outline-offset:3px}

.bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at var(--mx,0px) var(--my,0px),rgba(255,255,255,.15) 0,rgba(255,255,255,.05) 20%,transparent 60%),
             radial-gradient(ellipse at 95% 75%,rgba(255,255,255,.35) 0,rgba(255,255,255,.25) 30%,transparent 100%)}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5) 50%,#000)}
/* the live site's lighting overlay: a soft light in the middle, gone after the first fifth of the page (set in frame) */
.bg .light{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0,transparent 70%)}

nav.top{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);transition:transform .45s var(--ease)}
nav.top.hide{transform:translateY(-100%)}
/* the live site's bar: logo left, five links right; on a phone the logo sits over the links */
/* the live nav's container: max-w-7xl (1440px) with px 16 / 27 (640px+) / 36 (1024px+); one row from 640px */
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1440px;padding:18px 27px}
@media (min-width:1024px){nav.top .wrap{padding:18px 36px}}
.brand{display:block;line-height:0}
.brand img{height:36px;width:auto}
.links{display:flex;gap:36px}
.links a{position:relative;text-decoration:none;color:#d1d5db;font-size:18px;line-height:1.5;transition:color .3s}
.links a::before{content:"";position:absolute;inset:-10px -14px}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#fff;transform:scaleX(0);transition:transform .3s}
.links a:hover,.links a.on{color:#fff}
@media (hover:hover){.links a:hover::after{transform:none}}
@media (max-width:639px){
  nav.top .wrap{flex-direction:column;gap:24px;padding:16px}
  .brand img{height:32px}
  .links{gap:32px}.links a{font-size:16px}
}

/* ---------- hero: the live site's, one to one (pages/index.tsx + globals.css). --r is its rem: 16px, 18px from 640px.
   The rules and their order are the live ones, overlaps included: the name wraps on its own in its column, and on a phone
   the line under it drops 14 rem, which leaves the portrait its room ---------- */
.hero{position:fixed;inset:0 0 auto 0;z-index:20;--r:16px}
@media (min-width:640px){.hero{--r:18px}}
.hero.off{pointer-events:none}
.hero-in{transform-origin:50% 40%;will-change:opacity,transform;padding-top:calc(3 * var(--r))}
@media (max-width:640px){.hero-in{padding-top:calc(2 * var(--r));margin-top:calc(-3 * var(--r))}}
@media (max-width:640px) and (min-height:700px){.hero-in{padding-top:calc(1.5 * var(--r))}}
@media (max-width:640px) and (min-height:800px){.hero-in{padding-top:calc(8 * var(--r))}}
@media (min-width:640px){.hero-in{padding-top:calc(6 * var(--r))}}
.hcon{position:relative;max-width:calc(80 * var(--r));margin:0 auto;padding:0 var(--r)}
@media (min-width:640px){.hcon{padding:0 calc(1.5 * var(--r))}}
@media (min-width:1024px){.hcon{padding:0 calc(2 * var(--r))}}
.hgrid{display:grid;gap:calc(3 * var(--r));align-items:center;min-height:calc(100vh - 10 * var(--r))}
@media (min-width:768px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:320px) and (max-width:767px) and (min-height:800px){.hgrid{min-height:calc(100vh - 17 * var(--r));padding-top:calc(1.5 * var(--r))}}
@media (min-width:320px) and (max-width:767px) and (min-height:900px){.hgrid{min-height:calc(100vh - 20 * var(--r));padding-top:calc(.75 * var(--r))}}
.htext{position:relative;z-index:30}
@media (max-width:640px){.hpt{padding-top:calc(10 * var(--r))}}
@media (min-width:320px) and (max-width:767px) and (min-height:800px){.hpt{padding-top:calc(2 * var(--r))}}
h1{margin:calc(2 * var(--r)) 0 0;font-weight:700;font-size:calc(4.5 * var(--r));line-height:1}
@media (min-width:640px){h1{margin-top:0;font-size:calc(6 * var(--r))}}
@media (min-width:1024px){h1{font-size:calc(8 * var(--r))}}
h1 span{background:linear-gradient(to right,#fff,#e5e7eb,#9ca3af);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{margin:calc(14 * var(--r)) 0 0;padding:calc(1.25 * var(--r)) 0 calc(.5 * var(--r));font-size:calc(.875 * var(--r));line-height:calc(1.25 * var(--r));
  letter-spacing:.15em;text-transform:uppercase;color:rgba(156,163,175,.7);font-weight:300}
@media (min-width:640px){.eyebrow{margin-top:0}}
.hcontent{margin-top:var(--r)}
@media (min-width:320px) and (max-width:767px) and (min-height:800px){.hcontent{margin-top:calc(.75 * var(--r))}}
.prop{margin:0;padding-bottom:calc(1.5 * var(--r));display:flex;flex-direction:column;font-family:var(--light);font-weight:300;color:#fff;
  font-size:calc(1.125 * var(--r));line-height:calc(1.75 * var(--r))}
@media (min-width:768px){.prop{font-size:calc(1.5 * var(--r));line-height:calc(2 * var(--r))}}
.prop .a{color:rgba(156,163,175,.9);letter-spacing:.025em;font-size:var(--r);line-height:calc(1.5 * var(--r))}
@media (min-width:768px){.prop .a{font-size:calc(1.25 * var(--r));line-height:calc(1.75 * var(--r))}}
.prop .b{color:rgba(255,255,255,.95);letter-spacing:.02em;margin-top:calc(.25 * var(--r))}
.hcta{padding-bottom:calc(.5 * var(--r));min-height:calc(3.75 * var(--r))} /* the live button's height (py-3 + text-lg), so the column centres as live */
/* the call to action is v5's pill (Philo: the new one stays) */
.cta{display:inline-flex;align-items:center;gap:12px;padding:13px 22px 13px 24px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:18px;font-weight:300;letter-spacing:.02em;
  text-decoration:none;position:relative;overflow:hidden;
  /* frosted, so the photo behind it (the crossed arms on phones) does not read through the label */
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s}
/* a tap answers on touch screens too: press in, a little lighter */
.cta:active{transform:scale(.97);background-color:rgba(255,255,255,.18)}
/* phones: room between the button and the card below it; taken from the gap above the eyebrow, so the card keeps its place */
@media (max-width:640px){.hcta{min-height:calc(4.75 * var(--r))}.eyebrow{margin-top:calc(13 * var(--r))}}
.cta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .4s var(--ease)}
.cta span,.cta svg{position:relative;transition:color .3s,transform .3s}
@media (hover:hover){.cta:hover::before{transform:none}.cta:hover span,.cta:hover svg{color:#111}.cta:hover svg{transform:translateX(3px)}}
/* the portrait: the live site's box (height and scale set by portraitFit from its getPortraitStyles), the image h-full w-auto
   inside it, so on a narrow phone it draws smaller, as live does */
.portrait{position:absolute;bottom:0;right:0;display:flex;align-items:flex-end;z-index:20;transform-origin:100% 100%}
.portrait .pi{position:relative;width:100%;height:100%}
.portrait img{position:relative;z-index:10;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
.portrait .pi::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.2),transparent);filter:blur(64px);animation:breathe 2s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.3}to{opacity:.5}}

/* ---------- the stack: each sheet glides over the last, as the first one glides over the portrait ---------- */
main{position:relative;z-index:30;padding-top:calc(100svh - var(--peek));pointer-events:none}
/* phones: the card starts at the portrait's foot, as on the live site (its paddingTop = the portrait's bottom); 100svh would
   lift it over Get in touch on Android, where svh is the toolbar shorter than the vh the hero is sized in */
@media (max-width:640px){main{padding-top:calc(var(--pfoot,calc(100svh - var(--peek))) - var(--gap))}}
main>*{pointer-events:auto}
.stack{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.sheet{position:sticky;top:var(--gap);min-height:calc(100svh - 2 * var(--gap));margin-bottom:var(--gap);border-radius:14px;overflow:clip;
  transform-origin:50% 0;box-shadow:0 -12px 40px rgba(0,0,0,.4)}
.sheet::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;border-radius:inherit;z-index:40}
.sheet.gone{visibility:hidden}
.paper{background:var(--paper);color:var(--ink)}
.night{background:var(--night);color:#fff;box-shadow:0 -12px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.in{padding:var(--cp)}
.dwell,.hold{pointer-events:none}
/* the about sheet does not hold: it scrolls away, and the work card rises after a stretch of night */
#who{position:relative}
.card{position:relative;border-radius:14px;overflow:clip;margin-bottom:var(--gap)}
.card.night{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:860px){.sheet{position:relative;min-height:0}}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,48px);line-height:1.2}

/* ---------- who: the person and the record ---------- */
.who{min-height:inherit;display:flex;flex-direction:column;justify-content:center}
.ink{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.25;letter-spacing:-.01em;max-width:36ch}
@media (max-width:640px){.ink{line-height:1.4}}
.ink .wd{color:var(--faint)}
.pill{position:relative;display:inline-block;vertical-align:-.1em;height:.86em;width:2.3em;margin-right:.25em}
.drop .p{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:.86em;border-radius:999px;overflow:hidden;background:var(--ink);opacity:0}
.drop .p img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0}
.drop .dot{position:absolute;left:.72em;top:0;width:.86em;height:.86em;border-radius:50%;background:var(--ink);opacity:0;transform-origin:50% 100%}
.creature{width:0}
.creature .bgp{position:absolute;inset:0;border-radius:999px;background:#0a0703}
.creature .clip{position:absolute;inset:0;clip-path:inset(-300% 0 0 0 round 0 0 .43em .43em)}
.creature .mm{position:absolute;left:50%;bottom:-.08em;height:1.55em;width:1.3em;margin-left:-.65em;transform:translate(-.9em,105%) rotate(-28deg);transition:transform .25s ease-in}
.creature.up .mm{transform:none;transition:transform .6s var(--ease-out)}
.creature .mm img{width:100%;height:100%;object-fit:contain;object-position:bottom}
/* the load-in, in CSS so it starts with the first paint: run from the page's script, it came ~150 ms (on a phone more)
   after the hero was already drawn, so the hero showed, vanished and came back. Order as the live site: nav, words,
   the lines under them, the portrait. */
@media (prefers-reduced-motion:no-preference){
  /* the live site: the text column fades in and rises 20 px (.7 s, after .4 s), the portrait fades in (.7 s, after .6 s) */
  .htext{animation:rise .7s ease-out .4s backwards}
  .portrait{animation:pin .7s ease-out .6s backwards}
  nav.top .brand{animation:nl .5s ease-out backwards}
  nav.top .links{animation:nd .5s ease-out .2s backwards}
}
@keyframes pin{from{opacity:0}}
@keyframes nl{from{opacity:0;transform:translateX(-20px)}}
@keyframes nd{from{opacity:0;transform:translateY(-20px)}}
/* the headline's deck: the hero's .prop voice, tight to the headline, clear of the film */
.today{margin:18px 0 0;font-family:var(--light);font-weight:300;font-size:clamp(21px,2vw,27px);line-height:1.3;color:var(--ink2);max-width:48ch;text-wrap:balance}
@media (max-width:640px){.today{margin-top:14px;font-size:20px}}
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.fold.open{grid-template-rows:1fr}
.fold>div{overflow:hidden;min-height:0}
/* the record is the film: one chapter per part of the CV; the loop plays them in order, the bar and caption follow */
.film{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;margin-top:48px}
/* the preview and the playing film share one shape, the film's own (12:5): pressing play changes nothing in size */
.screen{position:relative;aspect-ratio:12/5;border-radius:12px;overflow:hidden;background:#111;color:#fff}
.screen video,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen.full{background:#000;cursor:pointer}
.screen.full.idle{cursor:none}
.screen:fullscreen{aspect-ratio:auto;border-radius:0}
.screen:fullscreen video{object-fit:contain}
/* a still over a video until the video has a frame on screen (Android shows black before it) */
.vcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s}
.vcov.off{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.screen .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 48%),linear-gradient(to bottom,rgba(0,0,0,.38),transparent 26%);pointer-events:none}
/* the bar: one segment per chapter, the way stories show their parts */
.bar{position:absolute;z-index:3;left:14px;right:14px;top:10px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.seg{width:100%;border:0;background:none;padding:8px 0 6px;text-align:left;color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.01em;transition:color .3s}
.seg:hover,.seg[aria-current=true]{color:#fff}
.seg i{position:relative;display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.seg i b{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.seg.past i b{transform:none}
.seg[aria-current=true] i b{transform:scaleX(var(--cp,0))}
.seg.next i{background:none;outline:1px dashed rgba(255,255,255,.45);outline-offset:-1px}
.seg span{display:block;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the caption names the chapter on screen */
.caps{position:absolute;z-index:2;left:28px;right:240px;bottom:24px;height:120px;pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
.cap.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.cap b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.01em}
.cap small{display:block;margin-top:10px;font-size:15px;color:rgba(255,255,255,.82)}
.cap a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.cap a:hover{border-color:#fff}
.cap.next b{font-style:italic}
/* while the film plays, the chapters give way: they belong to the loop, not to the film */
.screen.full .caps,.screen.full .shade,.screen.full .bar{display:none}
/* the live site's film button: a dark pill, a white disc with the play mark */
.play{position:absolute;z-index:3;right:20px;bottom:24px;display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:999px;border:0;
  background:#111827;color:#fff;font-size:16px;font-weight:500;box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
  transition:padding .5s var(--ease),box-shadow .5s var(--ease),transform .2s}
.play:hover{padding-right:24px;box-shadow:0 14px 36px -8px rgba(0,0,0,.65)}.play:active{transform:scale(.97)}
.play i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#111827}
.play i svg{margin-left:2px}
.play .dur{font-weight:400;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
/* the film's controls (the live site's player): they fade while it plays and the pointer rests */
.fp [hidden]{display:none!important}
.fp-ui{position:absolute;z-index:4;left:0;right:0;bottom:0;padding-top:56px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.3) 50%,transparent);transition:opacity .3s ease-out}
.fp-ui.off{opacity:0;pointer-events:none}
.fp-bar{position:relative;margin:0 24px;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:999px;outline-offset:2px}
.fp-track{position:relative;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;transition:height .2s}
.fp-bar:hover .fp-track{height:5px}
.fp-fill{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.fp-knob{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .2s}
.fp-bar:hover .fp-knob,.fp-bar:focus-visible .fp-knob{transform:none}
.fp-row{display:flex;align-items:center;gap:2px;padding:0 16px 8px}
.fp button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.9);transition:background .2s,color .2s,transform .1s}
.fp button:hover{color:#fff;background:rgba(255,255,255,.1)}.fp button:active{transform:scale(.95)}
.fp button:focus-visible,.fp-bar:focus-visible,.fp-end a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fp button[aria-pressed=false] svg{opacity:.6}
.fp-t{margin-left:4px;font:12px ui-monospace,"SF Mono",Menlo,monospace;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.fp-t span{color:rgba(255,255,255,.45)}
.fp-sp{flex:1}
.fp-cc{position:absolute;z-index:3;left:0;right:0;bottom:24px;display:flex;justify-content:center;padding:0 24px;pointer-events:none;transition:bottom .3s}
.fp-cc.up{bottom:76px}
.fp-cc p{max-width:46ch;margin:0;padding:6px 12px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:18px;line-height:1.3;text-align:center}
.fp-ring{position:absolute;z-index:3;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.9);animation:fpspin 1s linear infinite;pointer-events:none}
@keyframes fpspin{to{transform:rotate(360deg)}}
@keyframes fpin{from{opacity:0}}
.fp-end,.fp-err{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:0 24px;text-align:center;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:default;animation:fpin .6s var(--ease)}
.fp-end p,.fp-err p{margin:0 auto;max-width:24ch;font-family:var(--serif);font-size:clamp(17px,2.2vw,28px);line-height:1.15;color:#fff}
.fp-err p{font-family:inherit;font-size:15px;color:rgba(255,255,255,.9)}
.fp-acts{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:8px}
.fp-end a,.fp-err button.go{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:#111827;font-size:15px;font-weight:500;text-decoration:none;transition:background .2s}
.fp-end a:hover,.fp-err button.go:hover{background:#e5e5e5;color:#111827}
.fp .again{width:auto;padding:0 16px;gap:8px;display:inline-flex;border-radius:999px;font-size:15px;color:rgba(255,255,255,.85)}
.fp-err button.go{width:auto;border-radius:999px;margin-top:14px}
@media (prefers-reduced-motion:reduce){.fp-ring{animation:none}.fp-end,.fp-err{animation:none}}
@media (max-width:860px){
  .film{flex:none;margin-top:24px}
  .bar{left:10px;right:10px;top:6px;gap:4px}
  .seg{padding:6px 0 10px}
  .seg span{display:none}
  .caps{left:14px;right:60px;bottom:12px}
  .cap b{font-size:26px}
  .cap small{margin-top:5px;font-size:12px}
  .play{right:10px;bottom:10px;padding:6px;font-size:0;gap:0}
  .play:hover{padding-right:6px}
  .play i{width:36px;height:36px}
  .play .dur{display:none}
  .fp-ui{padding-top:36px}
  .fp-bar{margin:0 14px}
  .fp-row{padding:0 4px 2px}
  .fp-t{font-size:11px}
  .fp-cc{bottom:12px;padding:0 14px}
  .fp-cc.up{bottom:64px}
  .fp-cc p{font-size:13px;padding:4px 8px}
  .fp .again span{display:none}
  .fp .again{width:44px;padding:0}
  .fp-acts{margin-top:8px}
}

/* the crossing bands: the fields and their proof, carried by the scroll in opposite directions (the live site's About) */
.bands{position:relative;height:12rem;margin:48px calc(-1 * var(--cp));pointer-events:none}
.band{position:absolute;left:-10%;right:-10%;padding:16px 0;overflow:hidden}
.band.dk{top:2.5rem;background:var(--ink);color:var(--paper);transform:rotate(-3deg)}
.band.lt{top:7rem;background:#fff;color:var(--ink);border-block:1px solid rgba(0,0,0,.1);transform:rotate(2deg)}
.band .row{display:flex;gap:40px;width:max-content;white-space:nowrap;will-change:transform}
.band .row span{display:flex;align-items:center;gap:40px}
.band.dk .row span{font-family:var(--serif);font-size:2rem;line-height:1.2}
.band.lt .row span{font-family:var(--mono);font-size:15px;line-height:1.6}
.band .row span::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.band.lt .row span::after{width:6px;height:6px;background:#d1d5db}
/* two columns from 1024 px: the headline beside the film, which shows at about its own size (the live site's About) */
.film{flex:none}
/* one column: the film runs edge to edge across the sheet, as on the live site */
@media (max-width:1023px){.film{margin-inline:calc(-1 * var(--cp))}.screen{border-radius:0}}
/* wide (Philo 5 Nov, the earlier order): the headline and its deck across the sheet, the bands, then the film beside
   the three verbs, then Experience & ventures. The DOM keeps the phone order (intro, film, bands, how) */
@media (min-width:1024px){
  .who{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:56px;align-content:center}
  .duo{display:contents}
  .intro{grid-row:1;grid-column:1/-1}
  .bands{grid-row:2;grid-column:1/-1}
  .duo .film{grid-row:3;grid-column:1;margin-top:0;align-self:center}
  .how{grid-row:3;grid-column:2;margin-top:0;align-self:center}
  .cvcard{grid-row:4;grid-column:1/-1}
  .duo .caps{left:20px;right:190px;bottom:18px}
  .duo .cap b{font-size:clamp(28px,2.6vw,44px)}
  .duo .cap small{margin-top:6px;font-size:13px}
  .duo .play{right:14px;bottom:16px}
}
@media (min-width:1024px) and (max-width:1279px){
  .duo .caps{right:64px}
  .duo .play{padding:6px;font-size:0;gap:0}
}
@media (max-width:640px){
  .bands{height:9rem;margin:32px calc(-1 * var(--cp))}
  .band{padding:12px 0}
  .band.dk{top:1.5rem}.band.lt{top:5rem}
  .band .row,.band .row span{gap:24px}
  .band.dk .row span{font-size:1.4rem}
  .band.lt .row span{font-size:13px}
}


/* the full CV: its own card under the film; it opens in place and scrolls inside itself (as on the live site) */
.cvcard{margin-top:24px;border-radius:14px;background:#fff}
.cvb{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:20px 24px;border:0;border-radius:14px;background:none;color:inherit;text-align:left;cursor:pointer}
.cvb b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15}
.cvb small{display:block;margin-top:6px;font-size:14px;color:var(--mute)}
.cvb i{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.16);transition:background .25s,border-color .25s,transform .45s var(--ease)}
.cvb i::before,.cvb i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;border-radius:1px}
.cvb i::after{transform:rotate(90deg)}
.cvb[aria-expanded=true] i{transform:rotate(135deg);background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (hover:hover){.cvb:hover i{border-color:var(--ink)}}
.cvb:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cvs{max-height:min(60vh,560px);overflow-y:auto;margin:0 24px 24px;padding-right:12px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scrollbar-gutter:stable;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
.cvs:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.cvs.end{-webkit-mask-image:none;mask-image:none}
.cvs::-webkit-scrollbar{width:8px}
.cvs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:8px;border:2px solid transparent;background-clip:padding-box;min-height:40px}
.cvg h3{position:sticky;top:0;z-index:1;margin:0;padding:12px 0 8px;background:#fff;font-size:14px;font-weight:500;color:var(--mute)}
.cvg+.cvg{margin-top:12px}
.cvr{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:24px;padding:16px 0;border-top:1px solid rgba(0,0,0,.08)}
.cvcard.open .cvr{animation:rise .45s var(--ease) both;animation-delay:calc(80ms + var(--i,0) * 60ms)}
.cvr .per{padding-top:6px;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.cvr h4{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25}
.cvr .role{margin:2px 0 0;font-family:var(--light);font-weight:300;font-style:italic;font-size:18px;color:var(--mute)}
.cvr ul{margin:8px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.45}
.cvr li{position:relative;padding-left:14px}
.cvr li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chips span{padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.055);font-size:13px}
@media (max-width:860px){
  .film{margin-top:36px}
  .cvb{padding:16px}
  .cvs{max-height:62vh;margin:0 12px 16px 16px;padding-right:8px}
  .cvr{grid-template-columns:minmax(0,1fr);gap:4px}
  .cvr .per{padding:0}
}
@media (prefers-reduced-motion:reduce){.cvb i{transition:none}.cvcard.open .cvr{animation:none}}

/* ---------- how: one line from the first interview to the shipped product ---------- */
.how{margin-top:8px}
.how .kick{margin:0;font-size:15px;font-weight:500;color:var(--mute);letter-spacing:.01em}
/* a ladder: the line draws down through the three verbs */
.path{--verb:clamp(52px,5.6vw,84px);--pt:26px;position:relative;margin:0;padding:28px 0 0 48px}
.rail{position:absolute;left:6px;width:2px;top:calc(28px + var(--pt) + var(--verb) * .55);bottom:calc(var(--pt) + var(--verb) * .45);background:#e0e0e0}
.rail i{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--lp,0))}
.stop{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:baseline;gap:24px;padding:var(--pt) 0;
  border-top:1px solid #dedede;opacity:.18;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stop.on{opacity:1;transform:none}
.stop h3{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--verb);line-height:1;letter-spacing:-.01em}
.stop .dot{position:absolute;left:-48px;top:calc(var(--pt) + var(--verb) * .55 - 7px);width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);z-index:1;transition:background .3s}
.stop.on .dot{background:var(--ink)}
/* each verb carries one figure; the figure is the only second level */
.proof{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;color:inherit}
.proof b{font-family:var(--serif);font-weight:400;font-size:calc(var(--verb) * .65);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.proof>span{font-size:13px;color:var(--mute);line-height:1.3;max-width:24ch}
a.proof:hover>span{color:var(--ink)}
@media (max-width:860px){
  .path{--verb:36px;--pt:18px;padding:20px 0 0 30px}
  .rail{top:calc(20px + var(--pt) + var(--verb) * .55)}
  .stop{grid-template-columns:minmax(0,1fr);gap:6px}
  .stop .dot{left:-30px}
}
/* wide screens: the three verbs stacked beside the film, the line drawing down through their dots */
@media (min-width:1024px){
  .path{--verb:clamp(40px,3.4vw,48px);--pt:20px}
  .stop{grid-template-columns:minmax(0,1fr);gap:18px}
  .proof{flex-direction:row;align-items:baseline;gap:14px}
  .proof>span{max-width:32ch}
}

/* ---------- work: each product glides over the last, inside the held stage ---------- */
.work{height:calc(100svh - 2 * var(--gap));padding:0}
.scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:72px var(--cp) 84px;
  background:radial-gradient(ellipse 60% 70% at 70% 50%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%),var(--night);
  transform-origin:50% 0;will-change:transform;border-radius:14px;overflow:hidden}
.scene::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none}
.scene:not(:first-child){transform:translateY(101%);box-shadow:0 -16px 50px rgba(0,0,0,.55)}
.stext{position:relative;z-index:2;padding-right:24px}
.stext .no{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}
.stext h3{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.8vw,72px);line-height:1;letter-spacing:-.01em}
.stext small{display:block;margin-top:24px;font-size:14px;color:rgba(255,255,255,.6)}
.stext p{margin:22px 0 0;max-width:30ch;font-family:var(--light);font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.4;color:rgba(255,255,255,.9)}
.go{margin-top:30px;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;background:#fff;color:#111;font-size:15px;text-decoration:none;transition:transform .2s}
.go:hover{transform:translateY(-1px)}
.shot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;height:100%}
/* every product: its own UI, live, in a glass window shaped like its device (Symbio's is .sym) */
/* the windows are pictures of the apps: their text cannot be selected, their images not dragged */
.win,.sym{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.win img,.sym img,.win video{-webkit-user-drag:none}
.win{position:relative;overflow:hidden;isolation:isolate;background:#0b0b0d;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
.win-phone{height:min(68vh,calc(100svh - 2 * var(--gap) - 236px),calc((50vw - 2 * var(--cp)) * 1.5));aspect-ratio:2/3;border-radius:28px}
.win-web{width:min(100%,44vw,calc(66vh * 1.6),calc((100svh - 2 * var(--gap) - 236px) * 1.6));aspect-ratio:16/10;border-radius:16px}
/* the Mac screen is a camera framing, not a device: Symbio's height, the column's width (about 1:1 to 5:4) */
.win-mac{--wh:min(68vh,calc(100svh - 2 * var(--gap) - 236px),calc((50vw - 2 * var(--cp)) * 1.5));height:var(--wh);width:min(100%,calc(var(--wh) * 1.25));border-radius:16px}
@media (min-width:861px){.scene.wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.steps{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.steps li:has(>[hidden]){display:none}
.steps button{position:relative;border:0;background:none;color:inherit;opacity:.5;font-size:14px;padding:10px 12px 14px;transition:opacity .3s}
.steps button:hover{opacity:.8}
.steps button[aria-current=true]{opacity:1}
.steps button span{font-family:var(--mono);font-size:11px;margin-right:6px;opacity:.7}
.steps i{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.steps i b{position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
.steps .past i b{transform:none}
.steps [aria-current=true] i b{transform:none}
.shot.run [aria-current=true] i b{animation:fill calc(var(--step) - var(--cut,0ms)) linear}
.shot.run.wait [aria-current=true] i b{animation-play-state:paused} /* a window waiting for its clip holds the step */
/* Symbio, live: its own worlds, ghost, pulse and breath ring, and the world's light spilling into the scene */
.amb{position:absolute;inset:-12%;width:124%;height:124%;opacity:.42;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 52% 62% at 70% 50%,#000 30%,transparent 78%);mask:radial-gradient(ellipse 52% 62% at 70% 50%,#000 30%,transparent 78%)}
.sym{position:relative;height:min(68vh,calc(100svh - 2 * var(--gap) - 236px),calc((50vw - 2 * var(--cp)) * 1.5));aspect-ratio:2/3;border-radius:28px;overflow:hidden;background:#07070a center/cover;
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14);isolation:isolate}
.sym video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sym .scrim{position:absolute;inset:0;background:linear-gradient(rgba(4,4,8,.62),rgba(4,4,8,.5) 60%,rgba(4,4,8,.68));transition:opacity 1.8s var(--ease)}
.sym.lit .scrim{opacity:.12}
.sym canvas{position:absolute;inset:0;width:100%;height:100%}
.sym-copy{position:absolute;left:0;right:0;top:5.5%;margin:0;text-align:center;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.sym-copy.on{opacity:1;transform:none}
.sym-copy b{display:block;font:300 clamp(20px,2.1vw,30px)/1.15 Spectral,Georgia,serif;letter-spacing:-.005em}
.sym-copy small{display:block;margin-top:8px;font-size:clamp(11px,.85vw,13px);letter-spacing:.02em;color:rgba(255,255,255,.62)}
.sym-copy.cue b{font-size:clamp(18px,1.7vw,24px)}
.sym-copy.cue small{font:300 clamp(18px,1.7vw,24px)/1.15 Spectral,Georgia,serif;color:#fff;margin-top:0}
.sym-foot{position:absolute;left:0;right:0;bottom:0;padding:56px 0 24px;background:linear-gradient(rgba(4,4,8,0),rgba(4,4,8,.45));margin:0;text-align:center;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;transition:opacity 1s var(--ease)}
.sym-foot.on{opacity:1}
.worlds{margin-top:28px}
.worlds small{margin:0 0 10px!important;font-size:13px!important}
.worlds div+small{margin-top:18px!important}
.sym-live{position:absolute;inset:0}
.sym.novid video{visibility:hidden}
.worlds div{display:flex;flex-wrap:wrap;gap:8px;max-width:440px}
.worlds button{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:transform .25s var(--ease),box-shadow .25s}
@media (hover:hover){.worlds button:hover{transform:scale(1.08)}}
.worlds button:active{transform:scale(.96)}
.worlds button[aria-pressed=true]{box-shadow:0 0 0 2px var(--night),0 0 0 3.5px #fff}
@keyframes fill{from{transform:scaleX(0)}to{transform:none}}
.chrome{position:absolute;inset:0;z-index:30;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:26px var(--cp)}
.chrome>*{pointer-events:auto}
.chrome .t{font-family:var(--serif);font-size:22px;color:rgba(255,255,255,.75);pointer-events:none}
.tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tab{position:relative;border:0;background:none;padding:10px 12px 12px;font-size:14px;color:rgba(255,255,255,.45);transition:color .3s}
.tab:hover{color:rgba(255,255,255,.8)}
.tab[aria-selected=true]{color:#fff}
.tab i{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.tab i b{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.morebtn,.more-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);font-size:14px;color:rgba(255,255,255,.85)}
.morebtn{margin-left:auto}
@media (hover:hover){.morebtn:hover{border-color:rgba(255,255,255,.5);color:#fff}}
/* the same press as Get in touch, so a tap answers on touch screens */
.morebtn{transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s}
.morebtn:active{transform:scale(.97);border-color:rgba(255,255,255,.5);color:#fff}
.morebtn span,.more-pill span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);font-size:16px;line-height:1}
@media (max-width:860px){
  .work{height:auto}
  .chrome{position:static;padding:var(--cp) var(--cp) 0}
  .tabs{display:none}
  .scene{position:relative;transform:none!important;grid-template-columns:minmax(0,1fr);padding:28px var(--cp) 36px;border-radius:0;box-shadow:none!important;border-top:1px solid rgba(255,255,255,.08)}
  .scene:first-of-type{border-top:0}
  .stext{padding:0}
  .stext h3{font-size:44px;margin-top:8px}
  .stext p{font-size:19px;margin-top:14px}
  .go{margin-top:18px}
  .shot{margin-top:24px;gap:10px}
    .sym,.win{width:100%;height:auto}
  .sym,.win-phone,.win-mac{border-radius:20px}
  .win-web{border-radius:12px}
  /* the Mac screen becomes the same 2:3 portrait screen as the phones: its camera frames a crop of the desktop */
  .win-mac{aspect-ratio:2/3}
  /* phone: the world under the window it changes, then the link */
  .live .stext{display:contents}
  .live .shot{order:1}
  .live .worlds{order:2;margin-top:22px}
  .live .go{order:3;justify-self:start}
  .worlds div{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:none}
  .worlds button{width:auto;height:auto;aspect-ratio:1}
  .worlds button[aria-pressed=true]{box-shadow:0 0 0 2px var(--night),0 0 0 4px #fff}
  .amb{-webkit-mask:radial-gradient(ellipse 80% 45% at 50% 68%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 80% 45% at 50% 68%,#000 30%,transparent 80%)}
  .steps button{padding:10px 8px 14px;font-size:13px}
  .steps i{left:8px;right:8px}
  .mfoot{padding:0 var(--cp) var(--cp)}
}
@media (min-width:861px){.mfoot{display:none}}

/* the rest of the work, behind one button */
.more{position:absolute;inset:auto 0 0 0;z-index:35;max-height:calc(100% - 24px);overflow:auto;background:#161617;border-radius:14px 14px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);padding:var(--cp);visibility:hidden;
  --full:inset(-80px 0 0 0 round 14px 14px 0 0);clip-path:var(--full)} /* the top inset lets its shadow out */
/* More work: the button becomes the panel. The panel opens clipped to the button's pill, in the button's place, and the
   clip grows to its full shape. The pill's label and rim fade at once; its + rides the growing corner, turns a quarter
   and lands as the close x, which takes over as it arrives; the content settles in behind it. Closing runs it all back:
   the x lifts off as a + and rides the corner home into the button. The clip and the + are transitions, so a tap
   mid-way turns them around from where they are. Each rule's own transition is the one that runs INTO its state:
   the plain rules time the close (0.8 of the open), the .open rules time the open */
.more.shown{visibility:visible}
.more.run{transition:clip-path var(--dur-more) var(--ease-drawer)}
/* home: a gentler start than the open, so the trip back into the button can be seen */
.more.run:not(.open){transition-duration:calc(var(--dur-more) * .8);transition-timing-function:var(--ease-home)}
.more-pill{position:absolute;z-index:2;margin:0;pointer-events:none;white-space:nowrap;
  transition:border-color 140ms ease-out calc(var(--dur-more) * .8 - 140ms),background-color 140ms ease-out calc(var(--dur-more) * .8 - 140ms)}
.more-pill b{display:block;font-weight:inherit;transition:transform calc(var(--dur-more) * .8) var(--ease-home)}
.more.open .more-pill b{transform:scale(calc(22 / 16 / var(--fs,1)));transition:transform var(--dur-more) var(--ease-drawer)}
.more-pill i{font-style:normal;transition:opacity 140ms ease-out calc(var(--dur-more) * .8 - 140ms)}
.more-pill span{transition:transform calc(var(--dur-more) * .8) var(--ease-home),background-color calc(var(--dur-more) * .8) var(--ease-home),box-shadow calc(var(--dur-more) * .8) var(--ease-home)}
.more.open .more-pill{border-color:transparent;background-color:transparent;transition:border-color 100ms ease-out,background-color 100ms ease-out}
.more.open .more-pill i{opacity:0;transition:opacity 90ms ease-out}
/* on the way the disc becomes the x's ring: its fill goes and a hairline comes, thin enough to be 1px at the x's size */
.more.open .more-pill span{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(45deg) scale(var(--fs,1));
  background-color:transparent;box-shadow:inset 0 0 0 calc(1px / var(--fs,1)) rgba(255,255,255,.2);
  transition:transform var(--dur-more) var(--ease-drawer),background-color var(--dur-more) var(--ease-drawer),box-shadow var(--dur-more) var(--ease-drawer),opacity 120ms ease-out calc(var(--dur-more) - 100ms)}
#moreX{transition:opacity 60ms ease-out}
.more:not(.open) #moreX{opacity:0}
.more.open #moreX{transition:opacity 120ms ease-out calc(var(--dur-more) - 100ms)}
.more>:not(.more-pill){opacity:0;transition:opacity 120ms ease-out,transform 120ms ease-out}
.more>.minis{transform:translateY(14px)}
.more.open>:not(.more-pill){opacity:1;transform:none;transition:opacity 320ms var(--ease-out) 80ms,transform 520ms var(--ease-out) 80ms}
.more.open>.minis{transition-delay:130ms}
.work.mopen .morebtn{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .more{opacity:0;transition:opacity 160ms ease-out}
  .more.open{opacity:1}
  .more.run{transition:opacity 160ms ease-out}
  .more>:not(.more-pill){transform:none!important}
  .more-pill{display:none}
  .more.open #moreX{transition:none}
}
.more-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.more-head b{font-family:var(--serif);font-weight:400;font-size:28px}
.x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;font-size:22px;color:rgba(255,255,255,.8)}
.x:hover{border-color:rgba(255,255,255,.6);color:#fff}
/* the drawer's work, one at a time: a sideways row that snaps, the next one showing at the edge. Each card gives its
   window the height of the row (the phone one as tall as the others) and its words their own column */
.mnav{display:flex;gap:8px}
.x:disabled{opacity:.3;pointer-events:none}
.minis{position:relative;display:flex;align-items:flex-start;gap:40px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  container-type:inline-size;margin:-40px calc(-1 * var(--cp)) calc(-1 * var(--cp));padding:40px var(--cp) var(--cp);scroll-padding:0 var(--cp)}
/* the row clips what overflows it, so the windows' shadow stays short enough to fade out inside it */
.mini .win{box-shadow:0 20px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14)}
@media (hover:hover) and (pointer:fine){.minis{cursor:grab}}
.minis.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.minis.drag *{cursor:grabbing!important}
.minis::-webkit-scrollbar{display:none}
.mini{--tx:clamp(220px,26cqw,280px);--tg:clamp(32px,4cqw,48px);--sw:min(960px,84cqw,calc(58vh * 1.6 + var(--tx) + var(--tg)));flex:none;width:var(--sw);min-width:0;scroll-snap-align:start;
  display:grid;grid-template-columns:minmax(0,1fr) var(--tx);gap:var(--tg);align-items:center}
.mini .shot{height:auto;align-items:stretch;gap:2px;min-width:0}
.mini .win{width:100%;height:auto;cursor:pointer}
.mini .win-web{aspect-ratio:16/10;border-radius:12px}
/* the phone card is as wide as its phone: no empty stage around it */
.mini:has(.win-phone){width:auto;grid-template-columns:auto var(--tx)}
.mini .win-phone{width:auto;height:calc((var(--sw) - var(--tx) - var(--tg)) / 1.6);aspect-ratio:2/3;margin:0 auto;border-radius:12px;overflow:hidden;background:none;box-shadow:none} /* clipped like the web windows: the clip's black ground has square corners */
.mini .steps{justify-content:flex-start}
.mini .shot:has(.win-phone) .steps{justify-content:center}
.mini .steps button{font-size:12px;padding:10px 8px 12px}
.mini .steps i{left:8px;right:8px}
.mini .steps button span{display:none}
.mini h4{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.05}
.mini p{margin:12px 0 0;font-size:16px;font-weight:300;color:rgba(255,255,255,.75);line-height:1.45}
.mini a{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-size:15px;color:#fff;text-decoration:none;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);transition:border-color .25s}
.mini a:hover{border-color:rgba(255,255,255,.7)}
@media (max-width:860px){
  /* on a phone the drawer opens in the page and its work stacks, each card at its own height */
  #more{position:relative;display:none;max-height:none;overflow:visible;margin:0;padding:var(--cp)}
  #more.shown{display:block}
  /* the foot gives its height to the panel, so the panel starts where the button is */
  .work.mopen .mfoot{height:0;padding-bottom:0}
  .mnav .mv{display:none}
  .minis{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .mini,.mini:has(.win-phone){width:auto;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
  .mini .win-phone{width:min(100%,300px);height:auto}
  .mini h4{margin-top:10px;font-size:28px}
  .mini p{margin-top:6px;font-size:15px}
  .mini a{margin-top:14px}
}

/* ---------- contact: the form is a sentence ---------- */
.gt{margin:0;font-weight:700;font-size:clamp(44px,4.6vw,68px);line-height:1;letter-spacing:-.02em;color:#fff}
.say{margin:0;font-family:var(--serif);font-size:clamp(23px,2.5vw,34px);line-height:1.6;color:rgba(255,255,255,.92)}
.say label{cursor:text}
/* a slot is a blank in the sentence: it hugs what is typed, the line brightens and thickens while you write */
.slot{font-family:inherit;font-weight:inherit;line-height:inherit;font-size:inherit;color:#fff;background:none;border:0;border-radius:0;padding:3px;margin:0 2px;max-width:100%;
  box-shadow:inset 0 -1.5px rgba(255,255,255,.34);transition:box-shadow .2s,width .18s var(--ease)}
/* the name field is type=search: LastPass fills only text, email and password fields, and current versions ignore
   data-lpignore. Drop the search box look; hide the icon a password manager may still add. */
.slot{-webkit-appearance:none;appearance:none}
.slot::-webkit-search-cancel-button,.slot::-webkit-search-decoration{-webkit-appearance:none;display:none}
#say [data-lastpass-icon-root],#say [data-lastpass-root]{display:none!important}
.slot::placeholder{color:rgba(255,255,255,.42);font-style:italic}
.slot:hover{box-shadow:inset 0 -1.5px rgba(255,255,255,.6)}
.slot:focus{outline:none;box-shadow:inset 0 -2.5px #fff}
.slot:focus::placeholder{color:rgba(255,255,255,.28)}
.slot.bad,.slot.bad:focus{box-shadow:inset 0 -2.5px #fbbf24}
.err{margin:8px 0 0;font-size:15px;color:#fbbf24}
.err:empty{display:none}
#sendErr{margin:0}
.send[aria-busy]{pointer-events:none}
.verbs{display:inline}
.nw{white-space:nowrap}
/* a verb is a word of the sentence; tapping it runs a highlighter over it (any number of them) */
.vb{position:relative;white-space:nowrap;cursor:pointer}
.vb input{position:absolute;inset:-6px -4px;width:auto;height:auto;opacity:0;margin:0;cursor:pointer;z-index:1}
.vb>span{position:relative;z-index:0;color:rgba(255,255,255,.66);transition:color .2s}
.vb>span::before,.vb>span::after{content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;top:.2em;bottom:.02em;border-radius:.06em}
.vb>span::before{background:rgba(255,255,255,.08);transition:background-color .2s}
.vb>span::after{background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.sl{font-style:normal;color:rgba(255,255,255,.34)}
@media (hover:hover){.vb:hover>span{color:#fff}.vb:hover>span::before{background:rgba(255,255,255,.18)}}
.vb:active>span{opacity:.75}
.vb input:checked+span{color:#0d0d0e}
.vb input:checked+span::after{transform:none}
.vb input:focus-visible+span{outline:2px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.vb>span,.vb>span::before,.vb>span::after,.slot{transition:none}.send:active{transform:none}#say.sent .send .ar{transform:none}#say.sent .send .tk path{transition:none}.ok .w{animation-name:okfade}}
@keyframes okfade{from{opacity:0}to{opacity:1}}
.ps{display:flex;align-items:baseline;gap:14px;margin:32px 0 0}
.ps label{flex:none;font-family:var(--light);font-style:italic;font-size:clamp(20px,1.8vw,24px);color:rgba(255,255,255,.6)}
.ps textarea{flex:1;min-width:0;min-height:44px;padding:8px 0 10px;background:none;border:0;border-radius:0;box-shadow:inset 0 -1.5px rgba(255,255,255,.28);color:#fff;font:300 clamp(18px,1.5vw,20px)/1.45 var(--sans);resize:none;overflow:hidden}
.ps textarea::placeholder{color:rgba(255,255,255,.42)}
.ps textarea:focus{outline:none;box-shadow:inset 0 -2.5px #fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send{margin-top:26px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 28px;border-radius:999px;border:0;background:#fff;color:#111;font-weight:500;font-size:16px;transition:background-color .2s ease,transform var(--dur-press) var(--ease-out)}
.send:active{transform:scale(.97)}
.send .lb,.send .ic{display:inline-grid}
.send .lb>*,.send .ic>*{grid-area:1/1}
.send .l2{opacity:0}
.send .ar{transition:transform .3s var(--ease-out)}
@media (hover:hover){.send:hover{background:#f3f4f6}.send:hover .ar{transform:translateX(3px)}}
.send .tk path{stroke-dasharray:22;stroke-dashoffset:22}
/* sent: the arrow leaves for good (a final exit after the commit), "Sent" fades in, the tick draws; the letter rests as a record of what went */
#say.sent .send{pointer-events:none}
#say.sent .send .l1{opacity:0;transition:opacity 120ms ease}
#say.sent .send .l2{opacity:1;transition:opacity 180ms ease 100ms}
#say.sent .send .ar{opacity:0;transform:translateX(20px);transition:transform 200ms cubic-bezier(.55,0,1,.45),opacity 160ms ease 40ms}
#say.sent .send .tk path{stroke-dashoffset:0;transition:stroke-dashoffset 360ms var(--ease-out) 160ms}
#say .say,#say .ps{transition:opacity 480ms ease}
#say.sent .say,#say.sent .ps{opacity:.5}
#say.sent .slot,#say.sent .ps textarea{box-shadow:none}
.ok{display:none}
.ok.on{display:block}
.ok:focus{outline:none}
.ok .w{display:inline-block;animation:okin 500ms var(--ease-out) both;animation-delay:calc(260ms + var(--k) * 60ms)}
.ok p{margin:0;font-family:var(--light);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.4;color:#fff}
.ok .okm{max-width:100%;font-family:var(--sans);font-style:normal;font-size:.78em;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
@keyframes okin{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* the form is a message to Philo: who it goes to, what it says, send */
.to{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.to img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.toaddr{font-size:16px;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
.sm{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:none;font-size:13px;color:#d1d5db;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.sm:hover{border-color:rgba(255,255,255,.5);color:#fff}
.sm.done{background:#fff;color:#111;border-color:#fff}
@media (max-width:860px){.to{flex-wrap:nowrap;gap:10px}.toaddr{font-size:15px;min-width:0}.sm{flex:none;min-height:44px;min-width:44px;justify-content:center;padding:0 13px;font-size:14px}.sm:not(.done) span{display:none}}

/* layout: a letterhead (heading | where it goes), then the letter across the card; one gap scale, no rules */
#contact .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
#contact .hd .to{margin:0 0 4px}
#say{margin-top:48px;max-width:960px}
#contact .ok{margin-top:32px;max-width:960px}
#say .say{font-size:clamp(24px,2.7vw,40px);line-height:1.6}
.sendrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:32px}
.sendrow .send{margin:0}
@media (max-width:640px){#say{margin-top:32px}#contact .ok{margin-top:24px}#contact .hd{gap:20px}.say{line-height:1.72}.ps{margin-top:28px}.sendrow{margin-top:28px}}

/* the live site's footer: name and line, Navigate, Connect, then a bar with the mark, the year and Back to top */
footer{position:relative;z-index:30;background:rgba(0,0,0,.8)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.fgrid{display:grid;grid-template-columns:6fr 3fr 3fr;gap:36px;padding:63px 0}
.fn{margin:0;font-size:33.75px;font-weight:300;letter-spacing:-.025em;line-height:1.2}
.fn{background:linear-gradient(90deg,#fff,#e5e7eb,#9ca3af);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.fn span{margin-left:9px;font-family:var(--light);font-style:italic;font-size:22.5px;color:#9ca3af;-webkit-text-fill-color:#9ca3af}
.ft{margin:13px 0 0;font-family:var(--light);font-style:italic;font-size:15.75px;color:#9ca3af}
.fcol h2{margin:0 0 18px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#9ca3af}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fcol a{display:inline-flex;align-items:center;gap:9px;color:#9ca3af;font-size:15.75px;text-decoration:none;transition:color .2s,transform .2s}
.fcol a:hover{color:#fff;transform:translateX(4px)}
.fmail{margin-top:22px}
.fmail .arr{transition:transform .2s}.fmail:hover{transform:none}.fmail:hover .arr{transform:translateX(4px)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.05);padding:22px 0}
.fc{display:flex;align-items:center;gap:13px;font-size:12px;color:#9ca3af}
.fc img{height:16px;width:auto;opacity:.6}
.totop{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#9ca3af;text-decoration:none;transition:color .2s}
.totop svg{transition:transform .2s}.totop:hover{color:#fff}.totop:hover svg{transform:translateY(-2px)}
@media (max-width:1023px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}.fname{grid-column:1/-1}}
@media (max-width:640px){
  .fgrid{padding:40px 0;row-gap:28px}
  .fn{font-size:24px}.fn span{font-size:18px}.ft{font-size:14px}
  /* phone: every link a 44 px row */
  .fcol ul{gap:0}
  .fcol a{min-height:44px;font-size:15px}
  .fmail{margin-top:4px}
  .fbar{padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
  .totop{min-height:44px}
  /* no room for the mark beside the year and Back to top; the name sits just above */
  .fc img{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}