/* Visible by default: animations never gate access to content. */
.reveal{opacity:1;transform:none;transition:none}
.reveal.visible{animation:arrive .4s var(--ease) both}
.hero .reveal{animation:arrive .4s var(--ease) both}
@keyframes arrive{from{transform:translateY(10px)}to{transform:none}}
html{scroll-behavior:auto}
.hero-copy,.portrait,.split>*{min-width:0}
.portrait{overflow:clip}
.portrait .f2{left:0}
h1{font-size:clamp(42px,5.2vw,72px);line-height:1.06;overflow-wrap:normal}
.available{font-size:11px;line-height:1.6;max-width:100%}
.available i{flex-shrink:0}
.eyebrow{line-height:1.8;letter-spacing:.12em;color:#ff5967}
nav{gap:24px}nav a{font-size:12px;color:#b9b4b7}
nav a,.menu{min-height:44px;align-content:center}
.logo{flex-shrink:0}
:focus-visible{outline:2px solid #ff6875;outline-offset:5px}
.skip-link{position:fixed;left:16px;top:8px;transform:translateY(-160%);z-index:30;background:#f4f1ed;color:#080808;padding:12px 20px}
.skip-link:focus{transform:none}
.about h2 span{color:#9d969b}
.label,.num,.cert small,footer,.social a,.filters button{color:#aaa5aa}
.label,.pills span,.info a,.social a,.filters button,.more{font-size:12px}
.pills{margin-bottom:22px}
.filters .on{background:#bc1928;border-color:#bc1928}
.keys{transform:rotateX(calc(2deg + var(--rx))) rotateY(var(--ry))}
.key small{font-size:10px;color:#b9b3b9}
.key:focus-visible{border-color:#ff6875}
.extra{display:grid}
.filters,.more{display:none}
.projects-ready .filters{display:flex}
.projects-ready .more{display:block}
[hidden],.project[hidden],.projects-ready .more[hidden]{display:none!important}
.media{height:auto;aspect-ratio:16/10}
.media:after{pointer-events:none}
.media video{object-fit:contain;filter:none}
.project:hover video{transform:none;filter:none}
.media span{top:12px;bottom:auto;pointer-events:none}
.info>p:not(:first-child){color:#aaa5aa;font-size:15px}
.contribution strong{color:#e4dfe2;font-weight:500}
.info .demo-link{margin-left:16px;margin-top:15px}
.experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}
.experience-card{background:linear-gradient(145deg,#171214,#0e0e0f);border:1px solid var(--line);padding:28px}
.experience-card h3{font-size:27px;line-height:1.15}
.experience-card>p:not(.eyebrow){color:#aaa5aa;line-height:1.8;font-size:16px}
.experience-card a{font:12px 'DM Mono',monospace;text-decoration:underline;text-underline-offset:6px}
.certs{overscroll-behavior-x:contain;scroll-padding:2px;padding-inline:2px}
dialog{padding:48px 12px 12px;max-height:94dvh}
dialog button{top:6px;right:6px;width:36px;height:36px}
dialog img{max-height:calc(90dvh - 64px)}
.contact:before{max-width:100%}
@media(min-width:901px){.hero{gap:35px;grid-template-columns:1.16fr .84fr}.portrait .orbit{max-width:115%}}
@media(max-width:900px){nav{gap:14px}nav a{font-size:11px}.experience-grid{grid-template-columns:1fr}.hero h1{font-size:68px}.portrait{max-width:560px;width:100%;margin:auto}}
@media(max-width:680px){
  .hero h1{font-size:clamp(32px,9.5vw,60px)}
  .section h2{font-size:clamp(33px,9.5vw,42px)}
  .contact h2{font-size:clamp(34px,10vw,48px)}
  .available{font-size:10px;padding:8px 11px;margin-bottom:24px}
  .hero .eyebrow{font-size:11px}
  .portrait{height:465px}.orbit.b{max-width:100%}.f2{left:0}
  .key-scene{margin-inline:0;padding-inline:8px}
  .key{min-width:0;min-height:88px;padding:9px}
  .key>b{font-size:11px}.key small{font-size:8px}
  .keys{transform:rotateX(var(--rx)) rotateY(var(--ry))}
  .project{gap:20px}.media{height:auto;aspect-ratio:16/10}
  .info .demo-link{margin-left:0;display:flex;width:fit-content}
  .experience-grid{margin-top:35px}.experience-card{padding:24px}
  nav a{font-size:13px}
  /* The mobile navigation remains available if JavaScript is unavailable. */
  html:not(.menu-ready) header{position:relative;height:auto;flex-wrap:wrap;padding-top:10px}
  html:not(.menu-ready) nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;padding:12px 0;gap:8px 20px}
  html:not(.menu-ready) .menu{display:none}
  html:not(.menu-ready) .hero{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .keys{transform:rotateX(2deg)}
}