@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ --bg:#ffffff; --bg-alt:#f4f6fc; --panel:#ffffff; --teal:#262362; --teal-soft:#1a1846; --violet:#26aae1; --violet-soft:#1c8dbd; --ink-100:#161a35; --ink-400:#6b7286; --line:#e6e9f2; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background: radial-gradient(720px 480px at -6% -8%, rgba(38,35,98,.05), transparent 60%), radial-gradient(760px 560px at 108% 92%, rgba(38,170,225,.08), transparent 60%), var(--bg); color:var(--ink-100); font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.preloading{ overflow:hidden; } ::selection{background:var(--teal);color:var(--bg);} button{font-family:inherit;} @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } /* Entrance animations stay parked at their opening frame until the intro preloader finishes and adds .page-ready to — otherwise they'd play out invisibly underneath the loading screen. */ .reveal{ opacity:0; transform:translateY(16px); } body.page-ready .reveal{ animation:fadeUp .7s cubic-bezier(.16,.8,.24,1) both; animation-delay:calc(var(--i, 0) * 100ms); } @media (prefers-reduced-motion:reduce){ .reveal{ animation:none; opacity:1; transform:none; } body.page-ready .reveal{ animation:none; } } .scroll-reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.16,.8,.24,1), transform .55s cubic-bezier(.16,.8,.24,1); transition-delay:calc(var(--i, 0) * 60ms); } .scroll-reveal.in-view{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .scroll-reveal{ opacity:1; transform:none; transition:none; } } /* ---- animated text (name headings) ---- */ @keyframes wordUp{ from{ opacity:0; transform:translateY(100%) rotate(4deg); } to{ opacity:1; transform:translateY(0) rotate(0); } } .split-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; } .split-word .split-inner{ display:inline-block; opacity:0; transform:translateY(100%) rotate(4deg); } body.page-ready .split-word .split-inner{ animation:wordUp .8s cubic-bezier(.16,.8,.24,1) both; animation-delay:calc(var(--wi, 0) * 90ms + var(--wbase, 0ms)); } @media (prefers-reduced-motion:reduce){ .split-word .split-inner{ animation:none; opacity:1; transform:none; } body.page-ready .split-word .split-inner{ animation:none; } } @keyframes flowGradient{ 0%{ background-position:50% 0%; } 100%{ background-position:50% 100%; } } .edge-bar{ position:fixed; top:0; right:0; bottom:0; width:16px; background:linear-gradient(180deg, var(--teal), var(--violet), var(--teal)); background-size:100% 220%; animation:flowGradient 7s ease-in-out infinite alternate; z-index:5; } @media (max-width:720px){ .edge-bar{width:8px;} } @media (max-width:480px){ .edge-bar{width:5px;} } @media (prefers-reduced-motion:reduce){ .edge-bar{ animation:none; } } .topbar{ display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:26px 32px 0; } @media (max-width:600px){ .topbar{ padding:18px 20px 0; } } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:-.01em; } .brand .mark{ width:30px; height:30px; display:grid; place-items:center; } .brand .mark img{ width:100%; height:100%; object-fit:contain; display:block; } .brand .sub{ color:var(--ink-400); font-weight:500; font-size:12px; display:block; margin-top:1px; } .brand-text{line-height:1.15;} main{ max-width:1180px; margin:0 auto; padding:56px 32px 90px; } @media (max-width:600px){ main{ padding:36px 20px 64px; } } .stage{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } @media (max-width:900px){ .stage{grid-template-columns:1fr; gap:44px;} } /* ---- left column ---- */ .info{ position:relative; padding-top:6px; transition:opacity .22s ease, transform .22s ease; } .info.fade{ opacity:0; transform:translateY(8px); } @media (prefers-reduced-motion:reduce){ .info{ transition:none; } } .dotgrid{ position:absolute; top:-20px; left:-20px; width:280px; height:220px; background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size:14px 14px; opacity:.6; z-index:0; pointer-events:none; } @media (max-width:700px){ .dotgrid{ display:none; } } .crest{ width:52px; height:52px; border-radius:12px; background:var(--bg-alt); border:1px solid var(--line); display:grid; place-items:center; margin-bottom:22px; position:relative; z-index:1; } .crest img{width:28px; height:28px; object-fit:contain;} h1{ position:relative; z-index:1; font-size:clamp(2.1rem, 4.4vw, 3.1rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance; min-height:2.2em; } blockquote{ position:relative; z-index:1; margin:0 0 30px; padding:0 0 0 18px; border-left:2px solid var(--teal); color:var(--ink-400); font-size:1rem; line-height:1.6; font-style:italic; max-width:46ch; } .pills{ display:flex; flex-direction:column; gap:22px; margin:0 0 34px; } @media (max-width:600px){ .pills{ gap:18px; } } .pill{ display:flex; align-items:center; gap:11px; } .pill .ic{ width:38px; height:38px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--line); display:grid; place-items:center; flex:none; } .pill .ic svg{width:18px; height:18px; stroke:var(--teal);} .pill .lbl{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin:0 0 2px; } .pill .val{ font-weight:700; font-size:14.5px; } .datatable{ border-top:1px solid var(--line); } .datatable .row{ display:grid; grid-template-columns:repeat(3, 1fr); border-bottom:1px solid var(--line); transition:background .25s ease; } @media (hover:hover){ .datatable .row:hover{ background:rgba(38,170,225,.06); } } @media (max-width:600px){ .datatable .row{grid-template-columns:1fr; border-bottom:none;} .datatable .cell + .cell{ padding-left:0; } .datatable .cell{ padding:14px 0; border-top:1px solid var(--line); } .datatable .row:first-child .cell:first-child{ border-top:none; } } .datatable .cell{ padding:16px 14px 16px 0; } .datatable .cell + .cell{ padding-left:18px; } .datatable .cell .lbl{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin:0 0 6px; } .datatable .cell .val{ font-weight:600; font-size:14.5px; } /* ---- right column ---- */ .showcase{ display:flex; gap:16px; } .featured{ flex:1; position:relative; border-radius:22px; padding:6px; background:linear-gradient(135deg, var(--teal), var(--violet)); box-shadow:0 24px 50px -24px rgba(22,26,53,.16); transition:box-shadow .35s ease, transform .25s ease; } @media (hover:hover){ .featured{ transform:perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transform-style:preserve-3d; } } .featured.tilting{ transition:box-shadow .35s ease; } .featured .spotlight{ position:absolute; inset:0; z-index:3; border-radius:18px; margin:6px; background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 60%); opacity:0; transition:opacity .3s ease; pointer-events:none; } .featured.tilting .spotlight{ opacity:1; } @media (hover:none){ .featured .spotlight{ display:none; } } @media (prefers-reduced-motion:reduce){ .featured{ transform:none !important; transition:box-shadow .35s ease; } .featured .spotlight{ display:none; } } .featured .inner{ border-radius:18px; overflow:hidden; position:relative; background:var(--panel); aspect-ratio:4/5; transition:opacity .22s ease, transform .22s ease; } .featured .inner img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } @media (hover:hover){ .featured:hover .inner img{ transform:scale(1.03); } } .featured.fade .inner{ opacity:0; transform:scale(.98); } @media (prefers-reduced-motion:reduce){ .featured .inner, .featured .inner img{ transition:none; } .featured:hover .inner img{ transform:none; } } .featured .inner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,35,0) 45%, rgba(15,15,35,.9) 100%); } .featured .capt{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; } .featured .capt .role{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.06em; color:var(--violet); margin:0 0 10px; } @keyframes flowGradientX{ 0%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } } .more-info{ position:relative; z-index:4; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(100deg, var(--teal), var(--violet), var(--teal)); background-size:220% 100%; animation:flowGradientX 6s ease-in-out infinite alternate; color:#fff; border:none; border-radius:999px; padding:10px 18px; font-size:12.5px; font-weight:700; letter-spacing:.03em; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; pointer-events:auto; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; } @media (hover:hover){ .more-info:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(38,170,225,.4); filter:brightness(1.05); } } .more-info:active{ transform:translateY(0) scale(.97); filter:brightness(.97); } @media (prefers-reduced-motion:reduce){ .more-info{ animation:none; } } .more-info:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; } .more-info svg{ width:13px; height:13px; transition:transform .2s ease; } .more-info[aria-expanded="true"] svg{ transform:rotate(90deg); } @media (prefers-reduced-motion:reduce){ .more-info, .more-info svg{ transition:none; } } .switcher{ display:flex; flex-direction:column; gap:14px; width:88px; flex:none; } @media (max-width:900px){ .showcase{ flex-direction:row; } .switcher{ flex-direction:row; width:auto; flex-wrap:wrap; } .switcher .thumb{ width:64px; } } @media (max-width:600px){ .showcase{ flex-direction:column; } .switcher{ flex-direction:row; flex-wrap:nowrap; width:100%; justify-content:center; gap:10px; } .switcher .thumb{ width:56px; flex:none; } } .thumb{ border:none; padding:0; cursor:pointer; border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:var(--panel); border:2px solid transparent; opacity:.55; transform:scale(1); transition:opacity .25s ease, border-color .25s ease, transform .25s ease; flex:none; } .thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .thumb{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } @media (hover:hover){ .thumb:hover{ opacity:.9; transform:scale(1.04); } } .thumb:active{ opacity:.9; transform:scale(.97); } .thumb.active{ opacity:1; border-color:var(--teal); transform:scale(1); } .thumb:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ .thumb{ transition:opacity .25s ease, border-color .25s ease; } .thumb:hover, .thumb:active{ transform:none; } } /* ---- profile view ---- */ .profile-view{ max-width:1040px; margin:0 auto; padding:40px 32px 60px; } @media (max-width:600px){ .profile-view{ padding:28px 20px 48px; } } .profile-view[hidden]{ display:none; } #mainView, #profileView{ transition:opacity .22s ease, transform .22s ease; } #mainView.view-fade, #profileView.view-fade{ opacity:0; transform:translateY(10px); } @media (prefers-reduced-motion:reduce){ #mainView, #profileView{ transition:none; } } .back-btn{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:0; margin:0 0 40px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.04em; color:var(--ink-400); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:color .2s ease, transform .2s ease; } @media (hover:hover){ .back-btn:hover{ color:var(--teal); transform:translateX(-3px); } } .back-btn:active{ color:var(--teal); transform:translateX(-1px); } .back-btn svg{ width:14px; height:14px; } @media (prefers-reduced-motion:reduce){ .back-btn{ transition:none; } .back-btn:hover, .back-btn:active{ transform:none; } } .profile-head{ display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:center; margin-bottom:56px; } @media (max-width:640px){ .profile-head{ grid-template-columns:1fr; text-align:left; gap:20px; } .profile-photo{ width:140px; } } .profile-photo{ border-radius:20px; padding:5px; background:linear-gradient(135deg, var(--teal), var(--violet)); aspect-ratio:1/1; } .profile-photo img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; } .eyebrow-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin:0 0 10px; } .profile-head-text h1{ font-size:clamp(1.9rem, 4vw, 2.6rem); margin:0 0 14px; min-height:0; } .profile-head-text blockquote{ margin:0; padding:0 0 0 16px; border-left:2px solid var(--violet); font-style:italic; color:var(--ink-400); font-size:.98rem; max-width:52ch; } .section-title{ font-size:.95rem; font-weight:700; letter-spacing:-.005em; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); } .profile-body{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; margin-bottom:48px; } @media (max-width:760px){ .profile-body{ grid-template-columns:1fr; } } .prose p{ margin:0 0 14px; font-size:14.5px; line-height:1.75; color:var(--ink-400); max-width:48ch; } .prose p:last-child{ margin-bottom:0; } .timeline{ list-style:none; margin:0; padding:0 0 0 20px; border-left:1px solid var(--line); } .timeline li{ position:relative; padding-bottom:26px; } .timeline li:last-child{ padding-bottom:0; } .timeline li::before{ content:""; position:absolute; left:-25px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px var(--bg); } .timeline .period{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); margin:0 0 4px; } .timeline .title{ font-weight:700; font-size:14.5px; margin:0 0 2px; } .timeline .org{ font-size:12.5px; color:var(--teal); font-weight:600; margin:0 0 6px; } .timeline .desc{ font-size:13px; line-height:1.6; color:var(--ink-400); max-width:46ch; } .profile-extra{ margin-bottom:40px; } .profile-extra:last-child{ margin-bottom:0; } .contact-list{ display:flex; flex-direction:column; gap:10px; } .contact-list .row{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); } .contact-list .clabel{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); width:90px; flex:none; } @media (max-width:420px){ .contact-list .row{ flex-direction:column; align-items:flex-start; gap:4px; } .contact-list .cval{ word-break:break-word; } } .contact-list .cval{ font-size:14px; font-weight:600; } .contact-list a.cval{ color:var(--ink-100); text-decoration:none; border-bottom:1px solid var(--line); touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:color .2s ease, border-color .2s ease; } @media (hover:hover){ .contact-list a.cval:hover{ color:var(--teal); border-color:var(--teal); } } .contact-list a.cval:active{ color:var(--teal); border-color:var(--teal); } .tags{ display:flex; flex-wrap:wrap; gap:9px; } .tags span{ font-size:12.5px; font-weight:600; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg-alt); color:var(--ink-100); } footer{ max-width:1180px; margin:0 auto; padding:0 32px 46px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; color:var(--ink-400); font-size:12.5px; } @media (max-width:600px){ footer{ padding:0 20px 36px; } } footer .mark{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--ink-400); } /* ---- intro preloader ---- */ .preloader{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg); transition:opacity .5s ease, visibility .5s ease; } .preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; } .preloader-mark{ width:56px; height:56px; display:grid; place-items:center; border-radius:16px; background:var(--bg-alt); border:1px solid var(--line); animation:preloaderPop 1.1s cubic-bezier(.16,.8,.24,1) infinite; } .preloader-mark img{ width:30px; height:30px; object-fit:contain; } @keyframes preloaderPop{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .preloader-text{ font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--ink-100); opacity:0; animation:preloaderFade .5s ease .25s forwards; } @keyframes preloaderFade{ to{ opacity:1; } } .preloader-bar{ width:120px; height:3px; border-radius:99px; background:var(--line); overflow:hidden; } .preloader-bar span{ display:block; height:100%; width:40%; border-radius:99px; background:linear-gradient(100deg, var(--teal), var(--violet)); animation:preloaderBar 1s ease-in-out infinite; } @keyframes preloaderBar{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(280%); } } .preloader.done{ opacity:0; visibility:hidden; pointer-events:none; } @media (prefers-reduced-motion:reduce){ .preloader{ transition:opacity .2s linear; } .preloader-mark{ animation:none; } .preloader-text{ animation:none; opacity:1; } .preloader-bar span{ animation:none; width:100%; } }