@font-face{font-family:Bungee;src:url('assets/Bungee-Regular.ttf') format('truetype');font-display:block}
:root{color-scheme:dark;--blue:#80adff;--purple:#ba9aff;--orange:#ff9b60;--red:#ff7777;--line:#34243e}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}body{margin:0;background:#000;color:var(--blue);font:18px/1.6 Calibri,Candara,'Segoe UI',sans-serif}body.loading{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--purple);outline-offset:7px}#header{height:190px;position:relative}#stage{position:absolute;inset:0 0 auto;height:100svh;pointer-events:none;z-index:5;overflow:hidden}#stage canvas{position:absolute;inset:0;width:100%;height:100%}#stage.settled{height:190px}#curtain{position:fixed;inset:0;background:#000;z-index:3;pointer-events:none}#skip{position:fixed;right:30px;bottom:26px;z-index:10;border:1px solid #653b25;border-radius:30px;background:#080402;color:var(--orange);font:16px Calibri,sans-serif;padding:12px 20px;cursor:pointer;opacity:0;transition:opacity .5s}#skip span{margin-left:20px}#skip.ready{opacity:1}#skip:hover{border-color:var(--orange)}#skip[hidden]{display:none}.accessible-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#fallback{display:none;text-align:center;padding-top:67px;font:clamp(20px,5vw,48px) Bungee,Calibri,sans-serif;color:var(--orange)}#content{max-width:1120px;margin:auto;padding:0 40px 100px;opacity:0}.profile{position:relative;margin:12px 0 50px;padding-bottom:55px}.banner{height:230px;border:1px solid var(--line);border-radius:4px;background:#000}.portrait{position:absolute;left:32px;bottom:0;width:135px;height:135px;border:1px solid #654175;background:#000;border-radius:50%}.section{padding:50px 0 34px}.section-label{font-size:12px;letter-spacing:.22em;color:var(--purple);margin-bottom:10px}h2{font-size:clamp(32px,5vw,46px);font-weight:400;line-height:1.15;margin:0 0 32px;letter-spacing:-.025em}h2 span{color:var(--orange)}h3{font-size:20px;line-height:1.35;font-weight:400;margin:0 0 12px;color:var(--orange)}p{margin:0}small{display:block;color:var(--purple);font-size:15px;margin-top:10px}.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 50px}.skills article{padding:24px 0 28px;border-top:1px solid var(--line)}.skills article:last-child{grid-column:1/-1}.education{display:flex;justify-content:space-between;gap:30px;padding:24px 0;border-block:1px solid var(--line)}.date{color:var(--purple);white-space:nowrap;font-size:16px}.project-row{display:flex;align-items:center;gap:30px;padding:24px 0;border-top:1px solid var(--line)}.project-row:last-child{border-bottom:1px solid var(--line)}.project-row>span{color:var(--purple);font-size:14px}.project-row h3{margin:0;color:var(--blue)}.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s ease}.reveal.visible{opacity:1;transform:none}.no-script{padding:20px 40px;color:var(--orange)}
@media(max-width:600px){#header{height:140px}#stage.settled{height:140px}#fallback{padding-top:50px}#content{padding:0 22px 70px}.banner{height:165px}.profile{padding-bottom:40px;margin-bottom:30px}.portrait{width:100px;height:100px;left:20px}.skills{grid-template-columns:1fr}.education{flex-direction:column;gap:16px}.section{padding-top:35px}#skip{right:18px;bottom:18px}.project-row{gap:20px}.project-row h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transform:none;transition:none}}

/* Provisional homepage: simple white typography and the supplied prototype's cards. */
:root{--blue:#fff;--purple:#fff;--orange:#fff;--red:#fff;--line:#383b40}
body{color:#fff}#content{padding-inline:20px}.banner{border:2px solid #a879ed;border-radius:0}.portrait{border:2px solid #a879ed}.section{padding-top:44px}h2{font-size:32px;font-weight:600;letter-spacing:0;margin-bottom:22px}h3{color:#fff;font-weight:600}small,.date{color:#fff}.skills{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.skills article{border:1px solid var(--line);border-radius:14px;background:#111214;padding:20px}.skills article:last-child{grid-column:auto}.education{border:1px solid var(--line);border-radius:14px;padding:20px;background:#111214;max-width:none;width:100%}.project-row{padding:20px;border:1px solid var(--line);border-radius:14px;background:#111214;margin-bottom:14px}.project-row h3{color:#fff}#skip{color:#fff;border-color:#555;background:#080808}#skip:hover{border-color:#fff}#fallback{color:#fff}
@media(max-width:700px){.skills{grid-template-columns:1fr}.education{flex-direction:column}.section{padding-top:36px}h2{font-size:28px}}

/* Supplied asset dimensions: banner 1584×396; portrait 1254×1254. */
.profile{--portrait-size:clamp(120px,16vw,190px);padding-bottom:calc(var(--portrait-size)*.4)}
.banner{width:100%;height:auto;aspect-ratio:1584 / 396;overflow:hidden}
.portrait{width:var(--portrait-size);height:auto;aspect-ratio:1 / 1;overflow:hidden;border-radius:20px}
.banner img{display:block;width:100%;height:100%;object-fit:cover}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  #content{max-width:1280px}
  .profile{--portrait-size:clamp(190px,17vw,220px)}
}
/* Hide scrollbar chrome without disabling wheel, touch or keyboard scrolling. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
#replay{position:fixed;right:18px;top:18px;z-index:20;width:38px;height:38px;border:1px solid #a879ed;border-radius:10px;background:#111214;color:#fff;font:700 17px Calibri,sans-serif;cursor:pointer}
#replay:hover{background:#30203f}
@media(orientation:portrait){#header{height:220px}#stage.settled{height:220px}}
@media(orientation:landscape){#header{height:clamp(170px,13vw,230px)}#stage.settled{height:clamp(170px,13vw,230px)}}
.contact-links{display:flex;flex-wrap:wrap;gap:14px}
.contact-links a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:100%;padding:14px 20px;border:1px solid #7951a8;border-radius:14px;background:#111214;color:#fff;text-decoration:none;transition:border-color .2s,background .2s}
.contact-links a:hover{border-color:#b58aef;background:#1b1425}
.contact-address{font-size:16px;overflow-wrap:anywhere;min-width:0}
.contact-label{display:inline-flex;align-items:center;gap:10px}
.contact-icon{display:block;width:22px;height:22px;flex-shrink:0}
.contact-links{display:flex;flex-direction:column;align-items:center}
.contact-email-row,.contact-social-row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;width:100%}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
.project-grid .project-row{margin:0;min-height:80px;height:100%;padding:16px 20px;justify-content:center;text-align:center}
.contact-social-row{max-width:800px;justify-content:space-evenly;gap:24px}
#contact{margin-top:44px;padding:28px;border:1px solid var(--line);border-radius:14px;background:#111214}
#contact-title{color:#ff9b45}
.contact-links a[href^="mailto:"]{background:#102b56;border-color:#244b81;color:#fff}
.contact-links a[href*="linkedin.com"]{background:#0a66c2;border-color:#0a66c2;color:#fff}
.contact-links a[href*="instagram.com"]{background:#c13584;border-color:#c13584;color:#fff}
.contact-links a[href*="github.com"]{background:#24292f;border-color:#57606a;color:#fff}
.contact-links a:hover{filter:brightness(1.15)}
.contact-links a[href*="linkedin.com"] svg [fill="#111214"]{fill:#0a66c2}
@media(max-width:600px){#contact{padding:22px 16px}}
@media(max-width:700px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.project-grid{grid-template-columns:1fr}}
.education{align-items:center;gap:18px;padding:16px}
.education .degree{margin:0;padding:10px 14px;border:1px solid #a879ed;border-radius:10px;font-size:16px;white-space:nowrap}
.education .institution{font-size:16px}
.education .date{font-size:15px}
@media(min-width:1000px){.education{flex-direction:row;flex-wrap:nowrap}.education .institution{white-space:nowrap}.education .date{margin-left:auto}}
@media(max-width:999px){.education{flex-wrap:wrap;align-items:flex-start}.education .degree{white-space:normal}}
@media(max-width:600px){.contact-links a{width:100%}.contact-address{flex-basis:100%}}
/* Fixed background stays behind the content; intro curtain remains pure black. */
body{position:relative;isolation:isolate;background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('assets/background.png') center center / cover no-repeat;opacity:.15}
@media(orientation:portrait){
  .profile{--portrait-size:clamp(76px,23vw,160px);padding-bottom:calc(var(--portrait-size)*.6)}
  .portrait{left:16px;border-radius:14px}
}






/* Approved project/contact hover and project availability popup. */
.project-grid a.project-row{color:inherit;text-decoration:none;cursor:pointer}
.project-grid .project-row{transition:transform .22s ease}
.contact-links a{transition:transform .22s ease,border-color .2s,background .2s,filter .22s ease}
@media(hover:hover) and (pointer:fine){
  .project-grid .project-row:hover,.contact-links a:hover{transform:scale(1.06)}
}
#project-coming-soon{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:440px;max-width:calc(100vw - 40px);padding:52px 36px;border:2px solid #a879ed;border-radius:18px;background:linear-gradient(135deg,#102b56,#39204c 60%,#542a1c);color:#fff;text-align:center;font:inherit;box-shadow:0 12px 40px #0008}
#project-coming-soon::backdrop{background:#0008}
#project-coming-soon-message{font-size:clamp(24px,5vw,30px);font-weight:700;color:#ff9b45}
.project-popup-close{position:absolute;top:5px;right:10px;border:0;background:transparent;color:#fff;font:24px Calibri,sans-serif;cursor:pointer}
@media(prefers-reduced-motion:reduce){.project-grid .project-row,.contact-links a{transition:none}.project-grid .project-row:hover,.contact-links a:hover{transform:none}}

#about > p{text-align:justify}

/* Approved email layout: stacked in portrait, smooth replacement in landscape. */
.contact-email-row{gap:24px}
.contact-links .contact-email-row a[href^="mailto:"]{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:start;box-sizing:border-box;width:100%;max-width:100%;padding:18px 20px;gap:14px;min-height:52px;text-align:left}
.contact-email-row .contact-label,.contact-email-row .contact-address{max-width:100%;min-width:0;opacity:1}
.contact-email-row .contact-address{overflow-wrap:anywhere}
@media(aspect-ratio > 1/1){
  .contact-links .contact-email-row a[href^="mailto:"]{width:310px;padding:10px 12px;gap:0;justify-items:center;text-align:center}
  .contact-email-row .contact-label,.contact-email-row .contact-address{grid-area:1 / 1;transition:opacity .35s ease}
  .contact-email-row .contact-address{opacity:0}
  .contact-email-row a:focus-visible .contact-label{opacity:0}
  .contact-email-row a:focus-visible .contact-address{opacity:1}
}
@media(aspect-ratio > 1/1) and (hover:hover){
  .contact-email-row a:hover .contact-label{opacity:0}
  .contact-email-row a:hover .contact-address{opacity:1}
}
@media(aspect-ratio <= 1/1){
  .contact-links .contact-email-row a[href^="mailto:"]:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .contact-email-row .contact-label,.contact-email-row .contact-address{transition:none}
}