:root{color-scheme:light;--paper:#f5f4ef;--ink:#252824;--muted:#656860;--line:#d9d9d1}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}a:hover{text-decoration:underline;text-underline-offset:5px}
.page{max-width:1280px;margin:auto;padding:0 7%;min-height:100svh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;padding:38px 0}.brand{display:block;line-height:0}.brand img{display:block;width:44px;height:44px;object-fit:cover;border-radius:2px}.nav-link{font-size:13px}main{flex:1;display:flex;align-items:center;padding:45px 0 80px}.intro{width:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:10%}.greeting{font-size:15px;margin:0 0 22px;color:var(--muted)}h1{font-size:clamp(64px,6.6vw,88px);line-height:1.02;letter-spacing:-4px;font-weight:500;margin:0 0 28px}.description{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 22px}.email{display:inline-block;font-size:19px;letter-spacing:-.3px;border-bottom:1px solid #91958a;padding-bottom:4px}.email:hover{text-decoration:none;border-color:var(--ink)}.actions{display:flex;align-items:center;gap:25px;margin-top:31px}.primary{border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:#fff;padding:14px 19px;font-size:13px;line-height:1.4}.primary:hover{background:#44483e}.calendar{font-size:13px;color:var(--muted)}figure{margin:0}.photo-wrap{overflow:hidden;aspect-ratio:1;background:#e1e3d8;border-radius:2px}.portrait{width:100%;height:100%;object-fit:cover;display:block}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:23px 0 27px;font-size:11px;color:var(--muted);gap:20px}
 dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:40px;width:calc(100% - 32px);max-width:490px;max-height:90svh}dialog::backdrop{background:#1d292577}body:has(dialog[open]){overflow:hidden}.close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:28px;color:var(--muted)}h2{font-weight:500;font-size:30px;letter-spacing:-1px;margin:0}.form-intro{color:var(--muted);font-size:14px;margin:12px 0 25px}label{display:block;font-size:12px;margin:17px 0 8px}input,textarea{width:100%;border:1px solid #bfc2b8;background:#ffffff70;border-radius:2px;padding:12px;color:var(--ink);font-size:14px;outline-offset:3px}textarea{resize:vertical}input:focus,textarea:focus{outline:2px solid var(--ink)}form .primary{width:100%;margin-top:20px}.form-note,#form-status{color:var(--muted);font-size:12px;line-height:1.6;margin:12px 0 0}#form-status:empty{display:none}
@media(max-width:900px){.page{padding:0 6%}.intro{gap:7%}h1{font-size:68px}.desktop{display:none}.actions{gap:19px}}
@media(max-width:620px){header{padding:26px 0}.brand img{width:38px;height:38px}main{padding:32px 0 42px}.intro{display:flex;flex-direction:column;gap:40px;align-items:stretch}h1{font-size:68px;letter-spacing:-3px}.greeting{font-size:14px;margin-bottom:18px}.description{font-size:14px;max-width:320px}.email{font-size:18px}.actions{gap:22px;margin-top:27px}figure{width:100%;max-width:420px}footer{padding:20px 0;font-size:10px}dialog{padding:36px 24px 26px}h2{font-size:28px}}
/* Header and portrait */
.brand{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:600;line-height:1.2}.brand img{width:46px;height:46px;border-radius:50%}.brand-sub{display:block;margin-top:5px;font-size:8px;letter-spacing:2px;color:var(--muted);font-weight:400}.brand:hover{text-decoration:none}.header-actions{display:flex;align-items:center;gap:30px}.nav-link{border-bottom:1px solid var(--line);padding:10px 0;white-space:nowrap}.nav-link>span:last-child{margin-left:15px}.languages{display:flex;align-items:center;gap:6px;font-size:11px;color:#777a72}.languages button{border:0;background:none;color:var(--muted);padding:9px 4px;font-size:11px}.languages button[aria-pressed="true"]{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:5px}.photo-wrap{aspect-ratio:1/1.16;border-radius:180px 180px 5px 5px}.portrait{object-position:49% center}.linkedin{display:inline-flex;align-items:center;gap:9px}.description{max-width:370px}.greeting{min-height:18px}
@media(max-width:620px){.brand{font-size:14px;gap:10px}.brand img{width:40px;height:40px}.brand-sub{font-size:7px;letter-spacing:1.4px}.header-actions{gap:15px}.nav-link{font-size:11px}.nav-link>span:last-child{margin-left:6px}.languages{gap:2px}.photo-wrap{aspect-ratio:1.08;border-radius:150px 150px 5px 5px}}
@media(max-width:370px){.nav-link{display:none}.actions{gap:15px}}
/* Keep the page within a single desktop viewport. */
.page{width:calc(100% - 48px);max-width:1000px;padding:0}
header,footer{flex-shrink:0}
main{padding:28px 0}
@media(min-width:621px){
  .page{height:100svh;min-height:0}
  header{padding:clamp(16px,4svh,38px) 0}
  footer{padding:clamp(14px,3svh,24px) 0}
  main{min-height:0;padding:clamp(12px,3svh,28px) 0}
  .intro{min-height:0;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .copy{min-width:0}
  h1{font-size:clamp(48px,10svh,80px);margin-bottom:clamp(14px,3svh,28px)}
  .greeting{margin-bottom:clamp(10px,2.5svh,22px)}
  .description{margin-bottom:clamp(12px,2.5svh,22px)}
  .actions{margin-top:clamp(16px,3.5svh,31px)}
  figure{width:min(100%,calc((100svh - 210px)/1.16));justify-self:end}
}
@media(min-width:621px) and (max-height:580px){
  h1{font-size:44px;letter-spacing:-2px;margin-bottom:12px}
  .description{font-size:13px;line-height:1.5;margin-bottom:12px}
  .greeting{margin-bottom:10px}
  .actions{margin-top:15px;gap:15px}
  .primary{padding:11px 14px}
}
@media(max-width:620px){.page{width:calc(100% - 40px)}main{padding:28px 0}.photo-wrap{max-width:100%}}
/* A quiet binary texture, echoing the original RP logo. */
body{background-image:url('assets/binary.svg');background-repeat:repeat;background-size:320px 240px}
dialog{background-color:var(--paper)}

/* Square portrait and logo, with a hover flip. */
.photo-wrap{aspect-ratio:1;border-radius:4px}
.photo-flip{position:relative;display:block;width:100%;perspective:1200px;background:transparent;overflow:visible;isolation:isolate}
.flip-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.flip-face{position:absolute;inset:0;display:block;border-radius:4px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-face img{display:block;width:100%;height:100%;object-fit:cover}
.flip-front{opacity:1;transition:opacity .18s ease}
.flip-back{transform:rotateY(180deg);background:#101210}
@media(hover:hover) and (pointer:fine){.photo-flip:hover .flip-inner{transform:rotateY(180deg)}.photo-flip:hover .flip-front{opacity:0}}
@media(prefers-reduced-motion:reduce){.flip-inner,.flip-front{transition:none}}
/* Arched portrait, square logo. */
.photo-wrap{aspect-ratio:1/1.16;border-radius:180px 180px 5px 5px}
.flip-front{border-radius:180px 180px 5px 5px}
.flip-back{top:50%;bottom:auto;width:100%;aspect-ratio:1;border-radius:4px;transform:translateY(-50%) rotateY(180deg)}
@media(max-width:620px){.photo-wrap{aspect-ratio:1.08;border-radius:150px 150px 5px 5px}.flip-front{border-radius:150px 150px 5px 5px}}