:root{color-scheme:dark;--background:#111213;--text:#f5f5f3;--muted:#aaaeb4;--focus:#c4d4ee;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--background)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--background)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}svg{width:24px;height:24px;fill:currentColor;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip{position:fixed;left:16px;top:16px;padding:12px 18px;background:var(--text);color:var(--background);transform:translateY(-150%);z-index:4}.skip:focus{transform:translateY(0)}
main{width:min(100% - 40px,620px);margin:auto;padding:56px 0 80px;text-align:center}
.profile{margin-bottom:0}.profile h1{font-size:25px;font-weight:500;letter-spacing:-.7px;margin:20px 0 0;line-height:1.3}.portrait{width:112px;height:112px;border-radius:50%;margin:auto;padding:4px;border:1px solid #ffffff25;box-shadow:0 12px 45px #0005}.portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.link-card{min-width:0;min-height:64px;display:grid;grid-template-columns:20px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:14px 18px;border:1px solid #ffffff24;border-radius:12px;text-align:left;transition:background .2s,transform .2s,border-color .2s}.link-card span{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:.1px}.link-card .brand{width:20px;height:20px;opacity:.88}.link-card .arrow{width:16px;height:16px;opacity:.35;transition:opacity .2s,transform .2s}.link-card:hover{background:#ffffff1a;border-color:#ffffff65;transform:translateY(-2px)}.link-card:hover .arrow{opacity:1;transform:translate(1px,-1px)}.link-card.email-card{border-color:#ffffff55;background:#ffffff0f}footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:32px;font-size:11px;letter-spacing:.2px;color:#8b9098}.footer-dot{height:2px;width:2px;border-radius:50%;background:currentColor}
@media(max-width:480px){main{width:calc(100% - 32px);padding-top:32px}.portrait{width:96px;height:96px}.profile{margin-bottom:0}.profile h1{font-size:23px;margin-top:17px}.link-card{padding:13px 12px;gap:9px;grid-template-columns:18px minmax(0,1fr) 12px;min-height:62px}.link-card .brand{width:18px;height:18px}.link-card .arrow{width:12px;height:12px}.link-card span{font-size:13px}.links{gap:8px}}
@media(max-width:340px){.link-card{padding:12px 10px;gap:7px}.link-card span{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* A quiet moving film behind a stable, readable content layer. */
body{position:relative;isolation:isolate}
.background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#111213 url('/assets/samurai-poster.jpg') center/cover no-repeat}
.background video{display:block;width:100%;height:100%;object-fit:cover;opacity:.8}
.background::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090b101a,#090b107d 35%,#090b107d 65%,#090b101a),linear-gradient(180deg,#0b0c1026,#0b0c100d 50%,#0b0c1059)}
.link-card{background:#ffffff0f;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
@media(max-width:600px){main{padding-bottom:76px}.background::after{background:linear-gradient(180deg,#090b1059,#090b1070 55%,#090b1080)}}


/* Social shortcuts stay centered and wrap independently of the card grid. */
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin:24px auto 40px}
.socials a{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:#c5c8ce;transition:color .2s,background .2s,transform .2s}
.socials svg{width:21px;height:21px}.socials a:hover{color:#fff;background:#ffffff0d;transform:translateY(-2px)}
@media(max-width:660px){.socials{max-width:284px;gap:4px;margin-top:22px;margin-bottom:34px}}

/* Clear controls over the shared dark film on phones. */
@media(max-width:660px){
  .link-card{background:#ffffff0f;border-color:#ffffff30}
  .link-card.email-card{background:#ffffff0f;border-color:#ffffff60}
  .socials a{color:#eef0f3;text-shadow:0 1px 8px #000}
  footer{color:#c1c5ca}
}

.email-contact{margin-top:28px;padding-top:24px;border-top:1px solid #ffffff18}.email-contact .email-card{width:100%;text-align:center}

/* Balanced phone sizing, with modest adjustments for shorter screens. */
@media(max-width:660px){
  main{width:min(100% - 28px,420px);padding:20px 0 max(20px,env(safe-area-inset-bottom));}
  .portrait{width:80px;height:80px;padding:3px;}
  .profile h1{font-size:22px;line-height:1.3;margin-top:12px;}
  .socials{gap:0 4px;margin:14px auto 20px;}
  .socials svg{width:20px;height:20px;}
  .links{gap:7px;}
  .link-card{min-height:52px;padding:11px 13px;gap:10px;border-radius:11px;grid-template-columns:19px minmax(0,1fr) 13px;}
  .link-card span{font-size:13px;line-height:1.3;}
  .link-card .brand{width:19px;height:19px;}
  .link-card .arrow{width:13px;height:13px;}
  .email-contact{margin-top:18px;padding-top:16px;}
  footer{margin-top:18px;font-size:11px;}
}
@media(max-width:660px) and (max-height:700px){
  main{padding-top:14px;padding-bottom:max(14px,env(safe-area-inset-bottom));}
  .portrait{width:64px;height:64px;}
  .profile h1{font-size:21px;margin-top:10px;}
  .socials{margin-top:10px;margin-bottom:14px;}
  .links{gap:6px;}
  .link-card{min-height:48px;padding-top:10px;padding-bottom:10px;}
  .email-contact{margin-top:12px;padding-top:12px;}
  footer{margin-top:12px;}
}

.email-contact h2{font-size:18px;font-weight:500;letter-spacing:-.3px;line-height:1.3;margin:0 0 14px;text-align:center}
@media(max-width:660px){.email-contact h2{font-size:16px;margin-bottom:12px}}