body{background:#e0e1e6;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;margin:0;padding:40px 20px;color:#111}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.card{background:#fff;border-radius:28px;box-shadow:0 10px 25px rgba(0,0,0,.08);overflow:hidden;max-width:420px;margin:0 auto}.profile-cover{width:100%;height:160px;background:linear-gradient(135deg,#ffb34f,#ff5c70,#458aff)}.profile-photo{width:175px;height:175px;border-radius:50%;object-fit:cover;border:6px solid #fff;margin-top:-70px;display:block;margin-left:auto;margin-right:auto}h1{margin:16px 0 6px;font-size:36px;font-weight:700;text-align:center}.role{color:#666;font-size:14px;margin:0 0 16px;text-align:center}.bio{padding:0 24px 26px;color:#444;font-size:15px;text-align:center;line-height:1.45}.socials{display:flex;justify-content:center;gap:18px;margin:10px 0 16px}.socials img{width:24px;height:24px;filter:grayscale(1) brightness(0);opacity:.85;transition:.2s ease}.socials img:hover{opacity:1;transform:scale(1.07)}.portfolio{margin:30px auto;padding:0 20px}@media(max-width:700px){.portfolio{padding:0}.portfolio-grid{padding:0}}.portfolio h2{text-align:center;font-size:26px;margin-bottom:26px}.portfolio-grid{display:grid;grid-template-columns:1fr;gap:28px;margin:0 auto}.portfolio-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.08);border:1px solid #e6e6e6;transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:inherit;max-width:420px;width:100%;margin:0 auto;animation:fadeInUp .4s ease;position:relative;transform:translateZ(0)}.img-wrapper{position:relative;overflow:hidden}.portfolio-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.12);transform:scale(1.02);transition:opacity .25s ease,transform .25s ease}.portfolio-card img{width:100%;display:block;object-fit:cover;transition:opacity .25s ease,transform .25s ease}.photo-card{cursor:zoom-in}#photo-gallery .portfolio-card img{height:295.25px}#photo-gallery .portfolio-card:hover img{transform:scale(1.05);transition:opacity .25s ease,transform .25s ease}.portfolio-card h3{padding:18px;font-size:18px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-layout{display:block}@media(min-width:1000px){body{padding:0}.hero-layout{display:flex;align-items:flex-start;gap:60px;margin-left:60px;margin-right:auto;max-width:none;padding:40px 20px}.profile-card{position:sticky;top:40px;width:420px!important;flex:0 0 420px!important;height:auto;will-change:transform;transform:translateZ(0)}.desktop-portfolio{flex:1;margin:0}.desktop-portfolio h2{text-align:left;margin:0 0 26px;padding-left:4px}.desktop-portfolio .portfolio-grid{display:block}.desktop-portfolio .portfolio-card{float:left;margin-bottom:28px;animation:fadeInGrid .45s ease,subtleMoveIn .35s ease}.desktop-portfolio .media-toggle{margin-top:0!important;justify-content:flex-start;margin-left:4px}}@media(min-width:1460px){.desktop-portfolio .portfolio-grid{display:grid;grid-template-columns:repeat(2,420px);gap:28px 30px}.desktop-portfolio .portfolio-card{float:none;margin:0;animation:subtleMoveIn .35s ease}.desktop-portfolio .media-toggle{justify-content:flex-start!important;margin-left:4px;width:100%}}@media(min-width:1920px){.desktop-portfolio .portfolio-grid{grid-template-columns:repeat(3,420px)}.desktop-portfolio .portfolio-card{float:none;margin:0;animation:subtleMoveIn .35s ease}.desktop-portfolio .media-toggle{justify-content:flex-start!important;margin-left:4px;width:100%}.hero-layout{margin-left:max(80px,calc((100% - 1860px)/ 2));margin-right:auto;justify-content:center;max-width:1860px}}@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes subtleMoveIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInGrid{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.media-toggle{display:flex;justify-content:center;gap:12px;margin:0 auto 30px;max-width:420px;width:100%}.toggle-btn{flex:1;padding:12px 18px;border-radius:20px;border:1px solid #ddd;background:#fff;font-size:16px;cursor:pointer;transition:.2s ease;color:#111}.toggle-btn.active{background:#111;color:#fff;border-color:#000}.toggle-btn:hover{transform:scale(1.03)}@media(prefers-color-scheme:dark){body{background:#121212;color:#f5f5f5}.card{background:#1e1e1e;color:#fafafa;border:1px solid #333}.socials img{filter:brightness(0) invert(1)}.role{color:#fafafa}.bio{color:#fafafa}.portfolio-card{background:#1e1e1e;color:#fafafa;border:1px solid #1e1e1e}.profile-photo{border:6px solid #1e1e1e}.media-toggle{display:flex;justify-content:center;gap:12px;margin:0 auto 30px;max-width:420px;width:100%}.toggle-btn{flex:1;padding:12px 18px;border-radius:20px;background:#2a2a2a;border:1px solid #444;font-size:16px;cursor:pointer;transition:.2s ease;color:#f5f5f5}.toggle-btn.active{background:#e6e6e6;color:#111;border-color:#e6e6e6}.toggle-btn:hover{transform:scale(1.03)}}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.76);display:flex;align-items:center;justify-content:center;padding:40px 20px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s ease}.image-modal.is-visible{opacity:1;pointer-events:auto}.image-modal img{max-width:min(100%,1100px);max-height:90vh;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.35);position:relative;z-index:1}.image-modal-close{position:absolute;top:24px;right:24px;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:28px;width:44px;height:44px;border-radius:50%;cursor:pointer}.image-modal-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);border:none;color:#fff;font-size:32px;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.image-modal-arrow:hover{background:rgba(0,0,0,.8)}#image-modal-prev{left:26px}#image-modal-next{right:26px}.image-modal-loader{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:4px solid rgba(255,255,255,.28);border-top-color:#fff;animation:imageSpin .8s linear infinite;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:2}.image-modal-loader.is-visible{opacity:1}@keyframes imageSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}