/* Personal portfolio additions to the original cinematic theme. */
.contact-accounts-wrapper{position:relative;z-index:1;max-width:900px;width:100%}
.account-subtitle{font-size:14px;line-height:1.8;max-width:580px;margin:0 0 24px}
.account-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.account-card{display:block;padding:18px 0;border-bottom:1px solid #190a0b40;min-width:0;transition:color .2s}
.account-info{display:flex;flex-direction:column;gap:7px}
.account-label{font-size:11px;letter-spacing:.5px;opacity:.75}
.account-val{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.account-card:hover{color:#fff}
@media(max-width:600px){.account-cards-grid{grid-template-columns:1fr}.account-val{font-size:13px}}
.hero-topline,.hero-bottom{z-index:3}.hero-title{z-index:0;letter-spacing:0.05em;text-shadow:0 4px 45px #0008;pointer-events:none}.identity{position:relative;isolation:isolate;height:auto;min-height:100svh;padding-top:110px;padding-bottom:120px;gap:6%}.identity-portrait{position:absolute;inset:0;z-index:-2;background:url('assets/portrait.jpg') 85% center / cover no-repeat;opacity:.6}.identity:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,#050505ea 42%,#05050560 72%,transparent 100%);z-index:-1;pointer-events:none}.section-heading{width:46%;min-width:0;position:relative;z-index:2}.section-heading h2{font-size:clamp(32px,4.2vw,72px);line-height:0.95;letter-spacing:-0.03em;margin:25px 0 16px;word-break:break-word}.identity-bio{font-size:13px;line-height:1.75;color:#c5c2c2;margin:18px 0 20px;max-width:440px}.identity-stats-row{display:flex;gap:14px;margin:20px 0 18px;flex-wrap:wrap}.stat-box{padding:12px 16px;border:1px solid var(--line);background:rgba(255,255,255,0.03);border-radius:6px;display:flex;flex-direction:column;gap:3px;min-width:90px}.stat-num{font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;font-weight:800;color:var(--red);line-height:1}.stat-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#888}.identity-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.identity-tags span{font-size:10px;padding:6px 12px;border:1px solid #ffffff20;background:#ffffff05;color:#ddd;letter-spacing:0.5px;border-radius:4px}.identity-facts{width:45%;position:relative;z-index:2}.identity-facts p{max-width:none;font-size:13px}.abilities{height:auto;min-height:100svh}.power b{font-size:15px}.power-description{font-size:12px}.suit-label{bottom:20px}
.portfolio-section{height:auto;min-height:0;padding:100px 7%;background:#090909}.portfolio-section h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,7vw,110px);line-height:1;margin:25px 0}.portfolio-section h2 span{color:var(--red)}.section-intro{color:#aaa;line-height:1.8;margin-bottom:45px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;perspective:1200px}.project-card{padding:32px;border:1px solid var(--line);background:linear-gradient(135deg,#211012,#0e0e0e);display:flex;flex-direction:column;align-items:flex-start;position:relative;transform-style:preserve-3d;transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;will-change:transform;overflow:hidden;border-radius:8px}.project-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.15) 0%, rgba(240, 38, 39, 0.1) 35%, transparent 70%);pointer-events:none;opacity:0;transition:opacity 0.3s ease;z-index:10;mix-blend-mode:overlay}.project-card:hover{border-color:var(--red);box-shadow:0 10px 28px rgba(240, 38, 39, 0.10), 0 6px 18px rgba(0, 0, 0, 0.45)}.project-card:hover::before{opacity:1}.project-card > *{transform:translateZ(0);transition:transform 0.3s ease}.project-card h3{font-size:25px;line-height:1.25;margin:12px 0;transform:translateZ(0)}.project-card p,.project-card li{font-size:13px;line-height:1.8;color:#bdb5b5}.project-card .eyebrow{color:var(--red);font-size:10px;transform:translateZ(0)}.tags{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0;transform:translateZ(0)}.tags span{font-size:10px;border:1px solid #ffffff25;padding:7px 10px;color:#ded5d5;border-radius:4px;transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;display:inline-block}.tags span:hover{border-color:var(--red);background:rgba(240, 38, 39, 0.25);transform:translateY(-1px)}.project-card details{width:100%;margin:12px 0 25px;transform:translateZ(0)}.project-card summary{font-size:12px;cursor:pointer;padding:10px 0}.project-card ul{padding-left:20px}.project-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:20px;font-size:12px;transform:translateZ(0)}.project-links a{border-bottom:1px solid var(--red);padding-bottom:7px;transition:color 0.2s, border-color 0.2s}.project-links a:hover{color:var(--red);border-color:#fff}.certifications{background:#101010}.cert-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:40px 0 0}.cert-list li{font-size:15px;line-height:1.7;padding:24px 0;border-bottom:1px solid var(--line)}.legacy{height:auto;min-height:850px;gap:30px}.contact-links{display:flex;flex-wrap:wrap;gap:18px 24px;max-width:680px;margin:25px 0;font-size:13px}.contact-links a{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}.contact-links a:first-child{flex-basis:100%}.legacy-bottom{align-items:flex-end}.menu-inner{padding-top:5vh;padding-bottom:5vh;overflow:auto;max-height:100svh}.menu-inner nav a{font-size:clamp(28px,4vw,52px);padding:12px 0}.menu-inner>.eyebrow{margin-bottom:20px}
@media(max-width:1000px){.identity{gap:5%}.identity-facts{width:43%}.project-card{padding:22px}}
@media(max-width:600px){.identity{padding:70px 8% 110px}.section-heading,.identity-facts{width:100%}.section-heading h2{font-size:clamp(32px,8vw,48px)}.identity-facts{margin-top:60px}.hero-topline{font-size:6px;letter-spacing:1px}.hero-bottom p{max-width:155px}.portfolio-section{padding:65px 8%}.project-grid,.cert-list{grid-template-columns:1fr}.project-card h3{font-size:23px}.abilities{padding-bottom:70px}.abilities .power-list{margin-top:220px}.legacy{min-height:720px}.legacy h2{font-size:17vw}.contact-links{font-size:12px;gap:20px}.legacy-bottom{display:block}.panel-bottom{font-size:7px;letter-spacing:1px;gap:15px}.cert-list li{font-size:13px}.power-description{max-width:none}}

/* Keep expanded portfolio content visible on large displays. */
.identity,.abilities,.portfolio-section,.legacy{max-height:none}
summary:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.abilities{grid-template-columns:1fr 1.5fr;gap:5%;align-items:start}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.skill-pill{font-size:11px;padding:6px 12px;border:1px solid #ffffff25;background:rgba(255,255,255,0.04);color:#ded5d5;border-radius:4px;letter-spacing:0.5px;display:inline-block;transition:all 0.2s ease}
.skill-pill:hover{border-color:var(--red);background:rgba(240,38,39,0.2);color:#fff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(240,38,39,0.3)}
@media(max-width:1000px){.abilities{grid-template-columns:1fr 1.2fr}}
@media(max-width:600px){.abilities{grid-template-columns:1fr;display:block}.abilities .power-list{margin-top:25px!important}.abilities h2{max-width:none}}

/* The actual hero heading travels from the opening monogram into place. */
.hero-title{z-index:0;display:flex;transform-origin:center center}
.hero-title .name-initial,.hero-title .name-rest{color:var(--white);-webkit-text-stroke:0;display:block}
.hero-title .name-initial{position:relative;z-index:1}
.hero-title .name-outline{color:transparent;-webkit-text-stroke:1px var(--white)}
.name-rest{clip-path:inset(-20% -10% -20% 0)}
html.name-intro,html.name-intro body{overflow:hidden}
.name-intro .hero{overflow:visible;z-index:40}
.name-intro .hero-title{z-index:50;will-change:transform}
.name-intro.name-settling .hero-title{z-index:0}
.name-intro.name-settling .portrait-layer{opacity:1;transition:none}
.name-intro.name-settling .portrait-photo{opacity:0}
.name-intro.name-settling .portrait-photo.portrait-revealing{animation:portrait-materialize 3200ms cubic-bezier(.3,0,.2,1) both}

.portrait-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){.name-intro.name-settling .portrait-photo{animation:none}.portrait-outline{display:none}}
@keyframes portrait-materialize{
  0%,52%{opacity:0}
  76%{opacity:.3}
  100%{opacity:1}
}
.name-intro.name-settling .splash-overlay{opacity:0;visibility:hidden}
.name-arrived .portrait-layer{animation:none!important}
.name-intro .hero::after{opacity:0}
.name-intro header,.name-intro .hero-topline,.name-intro .hero-caption,.name-intro .hero-bottom,.name-intro .portrait-layer,.name-intro .web,.name-intro .section-dots,.name-intro .progress{opacity:0;pointer-events:none}
.name-arrived header,.name-arrived .hero-topline,.name-arrived .hero-caption,.name-arrived .hero-bottom,.name-arrived .portrait-layer,.name-arrived .section-dots{animation:portfolio-arrive 1s both}
.name-arrived .hero-caption,.name-arrived .hero-bottom{animation-delay:.18s}
@keyframes portfolio-arrive{from{opacity:0}to{opacity:1}}
header{gap:16px}
.header-socials{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.header-socials::-webkit-scrollbar{display:none}
.header-socials a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:11px;line-height:1;white-space:nowrap;padding:6px 4px;transition:color .2s;flex-shrink:0}
.header-socials svg{display:block;width:15px;height:15px;fill:currentColor;flex-shrink:0}
.header-socials a:hover{color:var(--red)}
@media(max-width:850px){header{gap:10px}.header-socials{gap:8px}.header-socials a{font-size:10px;padding:4px 2px;gap:4px}}
@media(max-width:600px){header{flex-wrap:nowrap;height:auto;padding-top:12px;padding-bottom:12px}.header-socials{order:0;flex-basis:auto;width:auto;overflow-x:auto}.menu-toggle{margin-left:auto}.header-socials a{padding:4px;gap:4px}.header-socials svg{width:13px;height:13px}}

/* Splash screen opening overlay */
.splash-overlay{position:fixed;inset:0;z-index:35;background:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s}
.name-intro .splash-overlay{opacity:1;visibility:visible}
.splash-corner{position:absolute;font-size:9px;letter-spacing:2px;color:#666;text-transform:uppercase;z-index:40}
.splash-tl{top:35px;left:4.4%}
.splash-tr{top:35px;right:4.4%}
.splash-bl{bottom:35px;left:4.4%}
.splash-br{bottom:35px;right:4.4%}
@keyframes splash-pulse{from{transform:scale(0.92);opacity:0.7}to{transform:scale(1.08);opacity:1}}
@keyframes splash-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.splash-corner{font-size:7px;letter-spacing:1px}.splash-spider-wrap{margin-bottom:55px;width:36px;height:48px}}

/* Compact navigation panel. Native dialog retains keyboard focus and Escape support. */
.menu-toggle{padding:9px 13px;border:1px solid #ffffff28;border-radius:24px;transition:border-color .2s,background .2s;flex-shrink:0}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{border-color:var(--red);background:#f0262718}
#menu{inset:80px 4.4% auto auto;width:min(340px,calc(100vw - 32px));height:auto;max-height:calc(100svh - 100px);margin:0;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(145deg,#211518,#0c0c10 65%);box-shadow:0 24px 80px #0009;transform-origin:top right;overflow:auto}
#menu::backdrop{background:#0006;backdrop-filter:blur(5px)}
#menu .menu-inner{padding:18px;margin:0;max-height:none;overflow:visible}
.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.menu-heading .eyebrow{font-size:9px;letter-spacing:1.5px;color:#a99da0;margin:0}
#menu .close-menu{margin:0;width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid #ffffff20;border-radius:50%;font-size:22px;line-height:1;transition:background .2s,transform .2s}
#menu .close-menu:hover{background:#f0262728;transform:rotate(90deg)}
#menu nav{gap:5px}
#menu nav a{font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;padding:12px;border:1px solid transparent;border-radius:10px;gap:13px;min-height:48px;transition:background .2s,border-color .2s,color .2s}
#menu nav a small{width:18px;flex-shrink:0;font-size:9px;color:#81787b}
#menu nav a>span{font-size:18px;color:#8b7f84;transition:transform .2s,color .2s}
#menu nav a:hover,#menu nav a:focus-visible{color:white;background:#ffffff09;border-color:#ffffff1c}
#menu nav a:hover>span,#menu nav a:focus-visible>span{transform:translate(3px,-3px);color:var(--red)}
#menu nav a[aria-current="location"]{background:#f0262718;border-color:#f0262740;color:#ff7377}
#menu nav a[aria-current="location"] small{color:#ff7377}
@media(max-width:600px){#menu{top:64px;right:16px;max-height:calc(100svh - 80px)}#menu .menu-inner{padding:14px}.menu-toggle{padding:8px 10px}#menu nav a{font-size:15px}}

.abilities-copy{max-width:420px;margin-top:28px}
.abilities-copy p{font-size:14px;line-height:1.9;color:#b3a8a8;margin:0 0 20px}
.abilities-copy p:last-child{margin-bottom:0}

.brand .brand-monogram{width:38px;height:42px;flex-shrink:0;overflow:visible;transition:filter .25s}
.monogram-accent{fill:none;stroke:#f02627;stroke-width:3;stroke-linecap:square}
.monogram-web{fill:none;stroke:#f02627;stroke-width:1;opacity:.55}
.monogram-letter{fill:#f5f4ef}
.brand:hover .brand-monogram,.brand:focus-visible .brand-monogram{filter:drop-shadow(0 0 6px #f0262770)}
@media(max-width:600px){.brand{gap:10px}.brand .brand-monogram{width:30px;height:34px}}

/* Contact: a compact directory without oversized icon cards. */
.legacy.contact-section{background:#f02627;color:#190a0b;display:block;height:auto;min-height:0;padding:80px 8% 32px}
.contact-section .contact-web{left:-100px;top:-50px;width:75%;max-width:950px;height:120%;stroke:#620b15;stroke-width:1;opacity:.23;z-index:0;pointer-events:none;mask-image:linear-gradient(to right,#000 0%,#000 25%,transparent 95%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 25%,transparent 95%)}
.contact-section>.contact-intro,.contact-section>.contact-directory,.contact-section>.contact-end{position:relative;z-index:1}
@media(max-width:760px){.contact-section .contact-web{left:-90px;width:120%;height:100%;opacity:.17}}
.contact-section .contact-intro{max-width:760px}
.contact-section .eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 22px}
.contact-section h2{font-family:Inter,Arial,sans-serif;font-size:clamp(34px,4.5vw,66px);line-height:1.08;letter-spacing:-.04em;font-weight:800;margin:0 0 24px}
.contact-summary{max-width:500px;font-size:15px;line-height:1.8;margin:0;color:#351416}
.contact-directory{margin-top:52px;padding-top:30px;border-top:1px solid #190a0b40;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:60px}
.contact-profile h3{font-size:20px;line-height:1.4;font-weight:700;margin:0 0 12px;max-width:300px}
.contact-profile p{font-size:13px;line-height:1.8;margin:4px 0;color:#351416}
.contact-resume{display:inline-flex;gap:18px;align-items:center;margin-top:24px;padding:12px 0;font-size:13px;font-weight:600;border-bottom:1px solid #190a0b80}
.contact-details{margin:0;min-width:0}
.contact-details>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:20px;border-bottom:1px solid #190a0b2e;padding:16px 0}
.contact-details>div:first-child{padding-top:0}
.contact-details dt{font-size:11px;line-height:1.8;letter-spacing:.6px;color:#471a1d}
.contact-details dd{margin:0;font-size:13px;line-height:1.6;font-weight:500;overflow-wrap:anywhere;min-width:0}
.contact-details a{display:block;padding:3px 0}
.contact-details a span{font-size:14px;margin-left:6px}
.contact-section a{transition:color .2s}
.contact-section a:hover{color:#fff}
.contact-section a:focus-visible{outline:2px solid #190a0b;outline-offset:5px}
.contact-end{margin-top:45px;padding-top:20px;border-top:1px solid #190a0b40;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;line-height:1.8}
.contact-end a{padding:10px 0}.contact-end a span{margin-left:12px}
@media(max-width:760px){.contact-directory{grid-template-columns:1fr;gap:30px;margin-top:36px}.legacy.contact-section{padding:60px 8% 26px}.contact-profile h3{max-width:none}.contact-details>div{grid-template-columns:70px minmax(0,1fr);gap:12px}.contact-summary{font-size:14px}.contact-end{margin-top:30px}}