:root{color-scheme:dark;--ink:#071f27;--paper:#f3eee5;--muted:#bec8c8;--accent:#c5ae87}
*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;color:var(--paper);font-family:'Segoe UI',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--ink)}
.page{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;background:radial-gradient(ellipse at 90% 40%,#10323b 0%,var(--ink) 62%)}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:36px 5.2vw}.monogram{font-size:30px;font-weight:600;letter-spacing:-2px;line-height:1}.monogram span{color:var(--accent)}.domain{font-size:12px;letter-spacing:2px;color:#c4d0ce}
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,465px);align-items:center;gap:8vw;width:100%;max-width:1440px;margin:0 auto;min-height:620px;padding:60px 8.3vw 90px}.intro{min-width:0}.eyebrow{display:flex;align-items:center;gap:17px;color:var(--accent);font-size:12px;letter-spacing:3px;margin:0 0 32px}.eyebrow>span{height:1px;width:38px;background:var(--accent)}
h1{font-size:clamp(76px,8.4vw,126px);font-weight:300;line-height:1.02;letter-spacing:-.065em;margin:0 0 34px}h1 span{display:inline-block}h1 i{font-style:normal;color:var(--accent)}.message p{margin:0}.hello{font-size:clamp(20px,1.6vw,24px);font-weight:400;line-height:1.5}.aside{font-size:16px;line-height:1.65;color:var(--muted);padding-top:4px}
.portrait{margin:0;align-self:center;position:relative;animation:arrive 1.2s ease-out both;animation-delay:.2s}.portrait img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1119/1406;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 72%,transparent);mask-composite:intersect;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.linkedin{display:inline-flex;align-items:center;gap:13px;margin-top:30px;padding:10px 0 12px;color:var(--paper);text-decoration:none;font-size:14px;border-bottom:1px solid #688085;transition:border-color .25s,color .25s;min-height:44px}.linkedin-mark{font-weight:bold;font-size:15px;line-height:19px;text-align:center;width:20px;height:20px;border:1px solid #9aabaa;border-radius:2px;font-family:Arial,sans-serif}.linkedin:hover{color:var(--accent);border-color:var(--accent)}.linkedin:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:2px}
footer{margin:0 5.2vw;min-height:74px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(207,225,225,.18);gap:20px;font-size:12px;color:#a9bbbd;letter-spacing:.4px}.endnote{font-size:13px;color:#c4d0ce}.endnote>span{color:var(--accent)}
.eyebrow,h1,.message,.linkedin{animation:arrive 1s cubic-bezier(.2,.65,.3,1) both}.eyebrow{animation-delay:.1s}h1{animation-delay:.2s}.message{animation-delay:.35s}.linkedin{animation-delay:.5s}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px) and (min-width:641px){main{grid-template-columns:minmax(0,1fr) minmax(0,min(330px,38vw));padding-left:7vw;padding-right:7vw;gap:5vw}h1{font-size:clamp(68px,9vw,92px)}.aside{max-width:270px}.portrait::before{inset:12px -12px -12px 12px}}
@media(max-width:640px){.masthead{padding:26px 7vw}.monogram{font-size:27px}.domain{font-size:11px;letter-spacing:1.4px}main{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:34px;min-height:0;padding:30px 7vw 46px}.portrait{order:-1;align-self:flex-start;width:231px}.portrait::before{inset:8px -8px -8px 8px}.eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:24px;gap:12px}.eyebrow>span{width:25px}h1{font-size:clamp(70px,18vw,104px);margin-bottom:26px}.hello{font-size:21px}.aside{font-size:15px;max-width:300px}.linkedin{margin-top:22px;font-size:14px}footer{margin:0 7vw;min-height:73px;font-size:11px}.endnote{font-size:12px}}

/* Subtle movement, with the original photo left unchanged. */
.page::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--light-x,75%) var(--light-y,45%),rgba(87,147,151,.13),transparent 80%)}
.portrait::after{content:'';position:absolute;inset:14% 8%;border-radius:50%;background:rgba(113,165,166,.10);filter:blur(45px);z-index:-1;pointer-events:none;animation:breathe 7s ease-in-out infinite alternate}
.linkedin{position:relative}.linkedin::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}.linkedin:hover::after,.linkedin:focus-visible::after{transform:scaleX(1)}.linkedin-mark{transition:transform .4s ease,border-color .4s ease}.linkedin:hover .linkedin-mark,.linkedin:focus-visible .linkedin-mark{transform:translateY(-3px) rotate(-6deg);border-color:var(--accent)}
.monogram{transition:transform .4s ease}.monogram:hover{transform:rotate(-6deg) scale(1.06)}
@keyframes breathe{from{opacity:.3;transform:scale(.95)}to{opacity:.8;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.portrait img{transform:none}.page::before{background:none}}