/* EDIT THE LOOK HERE. Photo crop: .portrait img object-position. */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f3f3f3;background:#000;font-synthesis:none;--muted:#919196;--line:#232326;--accent:#a9c9ee}
*{box-sizing:border-box}body{margin:0;background:#000}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,[role=tabpanel]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#a9c9ee;color:#000}
.shell{width:min(100% - 48px,520px);margin:0 auto;padding:64px 0 36px}header{padding-bottom:68px}.brand{font-size:13px;letter-spacing:.22em;font-weight:700;display:flex;align-items:center;gap:12px}.brand i{display:block;width:16px;height:20px;border-left:3px solid #eee;border-right:3px solid #eee;transform:skew(-18deg)}
.profile{display:flex;align-items:center;gap:24px;margin-bottom:46px}.portrait{width:80px;height:80px;border-radius:13px;overflow:hidden;flex-shrink:0;border:1px solid #343438;background:#111}.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 35%;filter:brightness(1.08) contrast(1.03)}h1{font-size:36px;font-weight:500;letter-spacing:-1.5px;line-height:1.08;margin:0}.period{color:var(--accent)}
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin-bottom:24px}.tabs button{padding:0 0 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);cursor:pointer;font-size:14px;letter-spacing:.03em;min-height:44px}.tabs button.selected{color:#fff;border-bottom-color:#eee}.tabs button:hover{color:#fff}.panel[hidden]{display:none}.social{display:flex;align-items:center;gap:18px;background:#0b0b0d;border:1px solid #202023;padding:22px 24px;border-radius:10px;margin-bottom:12px;transition:background .2s,border-color .2s,transform .2s}.social:hover{background:#121215;border-color:#44444a;transform:translateY(-2px)}.social-icon{width:26px;height:26px;flex-shrink:0}.social-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5}.social-icon .dot{fill:currentColor;stroke:none}.linkedin{font-weight:700;font-size:25px;letter-spacing:-1px;line-height:1}.link-copy{display:flex;flex-direction:column;gap:7px;min-width:0}.link-copy strong{font-size:16px;font-weight:500}.link-copy>span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.arrow{margin-left:auto;color:#a4a4aa;font-size:23px}.social:hover .arrow{color:var(--accent)}
.implant-panel{background:#0b0b0d;border:1px solid #202023;border-radius:10px;padding:26px}.implant-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}h2{font-size:28px;font-weight:500;letter-spacing:-1px;margin:0}h2 span{color:var(--muted)}.maker{color:var(--muted);font-size:12px}.explanation{font-size:16px;line-height:1.65;color:#b7b7bd;margin:22px 0}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:15px 0;font-size:14px}dt{color:var(--muted)}dd{margin:0;text-align:right}.note{font-size:13px;color:var(--muted);line-height:1.65;margin:20px 0}.spec-source{font-size:13px;color:#c7c7cc;text-decoration:underline;text-underline-offset:5px}.spec-source span{margin-left:5px}footer{display:flex;align-items:center;gap:20px;margin-top:64px;color:#77777e;font-size:10px;letter-spacing:.2em}.footer-line{height:1px;flex:1;background:#1e1e21}
/* One 2.6-second CSS-only reveal. A 104ms slice settles immediately. */
.intro{position:fixed;inset:0;z-index:10;background:#000;display:grid;place-items:center;pointer-events:none;animation:intro-out 2.6s both}
.intro-mark{position:relative;font-size:clamp(22px,5vw,32px);font-weight:700;letter-spacing:.19em;animation:cut-in 2.6s both}
.intro-mark::before{content:attr(data-text);position:absolute;inset:0;color:transparent;background:linear-gradient(110deg,transparent 35%,#fff 49%,transparent 63%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;animation:sweep 2.6s both}
.intro-mark::after{content:attr(data-text);position:absolute;inset:0;color:#fff;background:#000;clip-path:inset(43% 0 39%);animation:slice 2.6s steps(1,end) both}
.scan{position:absolute;left:0;right:0;bottom:-18px;height:1px;background:#eee;transform-origin:left;animation:scan 2.6s both}
.shell{animation:page-in 2.6s both}.profile{animation:profile-in 2.6s both}
/* Keyboard navigation can reveal the content immediately. */
body:focus-within .intro{display:none}body:focus-within .shell,body:focus-within .profile{animation:none}
@keyframes intro-out{0%,72%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes cut-in{0%,8%{opacity:0;transform:translateY(5px)}26%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-7px)}}
@keyframes sweep{0%,22%{opacity:0;background-position:140% 0}30%{opacity:1}57%{opacity:1;background-position:-40% 0}62%,100%{opacity:0;background-position:-40% 0}}
@keyframes slice{0%,46%{opacity:0;transform:none}47%{opacity:.8;transform:translateX(3px)}49%{opacity:.6;transform:translateX(-2px)}51%,100%{opacity:0;transform:none}}
@keyframes scan{0%,22%{transform:scaleX(0);opacity:0}30%{opacity:.6}61%{transform:scaleX(1);opacity:.5}75%,100%{transform:scaleX(1);opacity:0}}
@keyframes page-in{0%,71%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes profile-in{0%,75%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
@media(min-width:800px){.shell{padding-top:90px}header{padding-bottom:88px}.profile{margin-bottom:52px}h1{font-size:42px}.portrait{width:88px;height:88px}}
@media(max-width:360px){.shell{width:calc(100% - 36px);padding-top:40px}.profile{gap:16px}h1{font-size:30px}.portrait{width:70px;height:70px}.social{padding:20px 18px}.implant-panel{padding:20px}dl>div{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.intro{display:none}}

/* Focused landing navigation, extending the original monochrome identity. */
:root{--accent:#d2d2d6}::selection{background:#d2d2d6;color:#000}
.role{margin:12px 0 0;color:var(--muted);font-size:14px;letter-spacing:.03em}
.choices{display:grid;gap:12px}.choice{display:flex;align-items:center;gap:22px;border:1px solid var(--line);border-radius:10px;background:#0b0b0d;padding:24px;min-height:94px;transition:border-color .25s,background .25s}
.number{font-size:11px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}.choice .link-copy strong{font-size:14px;font-weight:600;letter-spacing:.13em}.arrow{transition:transform .25s,color .25s}.choice:hover,.choice:focus-visible{border-color:#55555b;background:#111114}.choice:hover .arrow,.choice:focus-visible .arrow{transform:translate(3px,-3px);color:#fff}.choice:active{background:#19191c}
.enter{animation:enter .6s both;animation-delay:.08s}.enter:nth-child(2){animation-delay:.16s}.enter:nth-child(3){animation-delay:.24s}.home .enter{animation-delay:2.12s}.home .enter:nth-child(2){animation-delay:2.22s}.home .enter:nth-child(3){animation-delay:2.32s}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body:focus-within .enter{animation:none}
@media(max-width:360px){.choice{gap:16px;padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.enter{animation:none!important}}

/* Dedicated pages share the original shell; the intro remains on the hub. */
.subpage .shell{animation:enter .5s both}.page-heading{display:flex;align-items:center;gap:18px;margin-bottom:32px}.page-heading h1{font-size:15px;font-weight:600;letter-spacing:.16em;line-height:1.4}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:26px;color:var(--muted);font-size:11px;letter-spacing:.13em;transition:color .2s}.back:hover{color:#fff}.back span{transition:transform .2s}.back:hover span{transform:translateX(-3px)}
.business-card{position:relative;isolation:isolate;overflow:hidden;padding:30px;border-radius:16px;border:1px solid #38383e;background:linear-gradient(140deg,#1b1b1f 0%,#101013 45%,#0a0a0c 100%);box-shadow:0 24px 64px #0009,inset 0 1px 0 #ffffff0a;transition:border-color .35s}
.business-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x,15%) var(--shine-y,0%),#ffffff0c,transparent 65%);opacity:.75;transition:opacity .35s}.business-card:hover,.business-card:focus-within{border-color:#606067}.business-card:hover::before{opacity:1}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:42px}.card-label{font-size:9px;letter-spacing:.2em;color:#a8a8b0}.card-mark{font-size:12px;letter-spacing:-.07em;color:#b8b8be}.card-profile{display:flex;align-items:center;gap:22px;margin-bottom:30px}.card-profile h2{font-size:32px;line-height:1.05;letter-spacing:-1.2px}.card-profile .period{color:#d2d2d6}.card-profile .portrait{width:76px;height:76px}.card-profile .role{font-size:13px}
.contact-details{font-style:normal;display:grid;gap:0;margin-bottom:26px}.contact-details a{display:flex;align-items:center;min-height:44px;width:fit-content;max-width:100%;overflow-wrap:anywhere;font-size:14px;color:#bfbfc6;transition:color .2s}.contact-details a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.save-contact{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:16px 18px;border-radius:7px;background:#e9e9ed;color:#101013;font-size:11px;font-weight:700;letter-spacing:.13em;transition:background .2s}.save-contact .arrow{font-size:21px;color:inherit}.save-contact:hover{background:#fff}.save-contact:hover .arrow{transform:translateY(3px)}
.social-links{border-top:1px solid var(--line)}.social-row{display:flex;align-items:center;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);min-height:104px;transition:border-color .25s}.social-row strong{font-size:14px;font-weight:500;letter-spacing:.13em}.social-row .link-copy{gap:10px}.social-row:hover,.social-row:focus-visible{border-color:#66666c}.social-row:hover .arrow{transform:translate(3px,-3px);color:#fff}
@media(max-width:360px){.business-card{padding:22px}.card-profile{gap:16px}.card-profile h2{font-size:28px}.card-profile .portrait{width:62px;height:62px}.card-label{font-size:8px}.save-contact{padding:16px 14px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.subpage .shell{animation:none!important}.business-card::before{background:linear-gradient(130deg,#ffffff08,transparent 65%)}}