*{box-sizing:border-box;margin:0;padding:0}
:root{--ease:cubic-bezier(.22,.61,.36,1);--g:#6b6b6b}
html{background:#fff;-webkit-text-size-adjust:100%}
body{background:#fff;color:#111;font:400 12px/1.6 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:inherit}img{display:block}
.sh::before{content:"";position:absolute;inset:0 0 -20px 0;background:linear-gradient(#fff 58%,rgba(255,255,255,0));z-index:-1;pointer-events:none}
.ab{max-width:518px;margin:0 auto;padding:24svh 24px 90px;text-align:left}
.ab>*{opacity:0;transform:translateY(14px);animation:rise 1.1s var(--ease) forwards}
.bio{animation-delay:.15s}.ct{animation-delay:.3s}.sec{animation-delay:.4s}.cd{animation-delay:.45s}.so{animation-delay:.5s}.ft{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font:500 12px/1 Inter,system-ui,sans-serif}
.bio p{max-width:470px;margin:0 0 14px;text-wrap:pretty}
.ct{max-width:440px;margin:14px 0 0}.ct a,.mr a{border-bottom:1px solid currentColor}
.ct a{transition:opacity .3s}.ct a:hover{opacity:.55}
.so{display:flex;justify-content:flex-start;gap:18px;margin-top:80px;font-weight:500;font-size:12px}
.so a{transition:color .3s var(--ease)}.so a:hover{color:var(--g)}
.sec{margin-top:80px}
.lbl,.lbl2{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--g)}
.fl{list-style:none;margin-top:12px}
.fl li{margin:0 0 16px}
.pk{display:inline;position:relative}
.fl .pk{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:2px 0}
.nm,.mw .pk{font:500 12px/1.6 Inter,system-ui,sans-serif;color:var(--g);transition:color .35s var(--ease)}
.ds{font-weight:400;color:var(--g)}
.pk:hover .nm,.pk:focus-visible .nm,.mw .pk:hover,.mw .pk:focus-visible,.pk.on .nm,.mw .pk.on{color:#111}
.pk:focus-visible{outline:2px solid #111;outline-offset:3px;border-radius:2px}
.cd{display:block;width:132px;height:132px;margin-top:80px;border-radius:50%;position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));-webkit-tap-highlight-color:transparent;animation-delay:.45s}
.cd img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;animation:cdspin 10s linear infinite;-webkit-mask:radial-gradient(circle closest-side,transparent 0 12.5%,#000 13%);mask:radial-gradient(circle closest-side,transparent 0 12.5%,#000 13%)}
.cd::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,transparent 0 12.5%,rgba(255,255,255,.5) 13% 15%,transparent 15.5% 27%,rgba(255,255,255,.28) 27.4% 28.4%,transparent 29%)}
.cd:focus-visible{outline:2px solid #111;outline-offset:6px}
@keyframes cdspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cd img{animation:none}}
.gl{list-style:none;margin-top:12px}.gl li{margin:0 0 4px}
.mr{margin-top:0;display:flex;flex-wrap:wrap;column-gap:.5em;row-gap:0;font:500 12px/1.9 Inter,system-ui,sans-serif;color:var(--g)}
.lbl2{display:block;margin:20px 0 10px}
.mw{white-space:nowrap}
.ft{margin-top:20px;color:var(--g);font-size:11px;line-height:1.7}
/* hover preview: follows the mouse */
.pv{position:fixed;left:0;top:0;z-index:700;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);will-change:transform}
.pv.on{opacity:1}
.pv img{max-width:min(300px,42vw);max-height:360px;width:auto;height:auto;box-shadow:0 16px 44px rgba(0,0,0,.2);background:#eee}
/* touch screens: tap a name -> a small picture on the right, above the text; tap anywhere to close it */
.pvm{position:fixed;right:14px;top:0;width:min(44vw,180px);z-index:700;pointer-events:none;opacity:0;transition:opacity .25s var(--ease)}
.pvm.on{opacity:1}.pvm img{width:100%;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#eee}
@media (hover:hover) and (pointer:fine){.pvm{display:none}}
@media not all and (hover:hover) and (pointer:fine){.pv{display:none}}
.curtain{position:fixed;inset:0;background:#b9b8af;z-index:1000;pointer-events:none;transform:translateY(-100%)}
.curtain.go{animation:cin .5s var(--ease) forwards}@keyframes cin{from{transform:translateY(-100%)}to{transform:none}}
.preload .curtain{transform:none;animation:cout .9s var(--ease) .05s forwards}@keyframes cout{to{transform:translateY(100%);visibility:hidden}}
@media (max-width:700px){.ab{padding-top:17svh}.sec{margin-top:70px}.so{margin-top:70px}.cd{margin-top:70px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}