@font-face{font-family:Pixel;src:url('fonts/VT323-Regular.ttf') format('truetype');font-display:swap;font-weight:400;font-style:normal}
:root{
  /* Retro workstation: sage paper, graphite ink and woodland accents. */
  --page:#eef2e8;
  --surface:#f8faf4;
  --ink:#25342c;
  --muted:#4d6051;
  --accent:#315f4a;
  --line:#91a38b;
  --hover:#dfe8d8;
  --focus:#87552a;
  --button-text:#ffffff;
  --qr-paper:#ffffff;
  --scene-name:var(--accent);
  --scene-role:#3f704a;
  --scene-location:#385a72;
  --scene-email:var(--ink);
  --scene-base:#e3e9dc;
  --scene-qr:#d4dfcc;
  --scene-ambient:#9bac98;
  --pixel:3px;
  --intro-dock-duration:700ms;
  --intro-dock-easing:cubic-bezier(.22,.68,.18,1);
  --intro-reveal-duration:380ms;
  --intro-reveal-stagger:140ms;
  --intro-reveal-easing:cubic-bezier(.22,1,.36,1);
  --intro-reveal-offset:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:Pixel,'Courier New',monospace;font-size:23px;line-height:1.3}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
svg{display:block;width:24px;height:24px;flex:none;shape-rendering:crispEdges}
.profile{width:min(1160px,100%);min-height:100svh;margin:auto;padding:48px 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:48px;align-items:center}
.experience{min-width:0;position:relative;display:flex;align-items:stretch;flex-direction:column}
.scene-frame{position:relative}
.pixel-corner{position:absolute;width:19px;height:19px;border-color:var(--line);border-style:solid;pointer-events:none}
.corner-top{left:12px;top:12px;border-width:3px 0 0 3px}
.corner-bottom{right:12px;bottom:12px;border-width:0 3px 3px 0}
#stage{position:relative;width:100%;height:clamp(320px,44vh,420px);cursor:pointer;touch-action:manipulation;outline-offset:-6px}
canvas{display:block;width:100%;height:100%}
#loading{position:absolute;inset:45% 0;text-align:center;color:var(--muted);font-size:21px}
.experience-details{text-align:center;min-height:150px;padding-top:16px}
.stage-caption{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 18px;font-size:20px;color:var(--muted);min-height:25px}
.indicator{width:6px;height:6px;background:var(--accent);box-shadow:3px 0 var(--accent),0 3px var(--accent),3px 3px var(--accent);flex:none;margin-right:3px}
.controls{display:flex;justify-content:center;align-items:center;gap:14px}
.pixel-button,button.primary,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:2px solid var(--ink);border-radius:0;min-height:48px;padding:9px 19px;cursor:pointer;background:var(--page);color:var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:22px;line-height:1.1}
.pixel-button:hover,button.primary:hover,.icon-button:hover{background:var(--hover)}
.pixel-button:active,button.primary:active,.icon-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}
button:disabled{opacity:.55;cursor:wait}
button.primary{min-width:184px;background:var(--accent);border-color:var(--accent);color:var(--button-text);box-shadow:4px 4px 0 var(--ink)}
button.primary:hover{background:var(--ink)}
.icon-button{width:48px;padding:10px}
.hint{font-size:18px;color:var(--muted);margin:18px 0 0;line-height:1.4}
.profile-text{padding:8px 0 20px;max-width:440px}
h1,h2{font:inherit;color:var(--ink);font-weight:400;line-height:1.1}
h1{font-size:clamp(44px,4.1vw,59px);margin:0 0 24px;letter-spacing:-.5px}h1 span{color:var(--accent)}
.bio-copy{font-size:25px;line-height:1.5;color:var(--muted);max-width:none;width:100%;margin:0 0 30px}
.bio-copy:empty{display:none}
.bio-copy p{margin:0 0 18px}
.cv-link{background:var(--accent);color:var(--button-text)}
.cv-link:hover{background:var(--hover);color:var(--ink)}
.contacts{border-top:2px dashed var(--line);margin-top:42px;padding-top:28px}
h2{font-size:29px;margin:0 0 16px}
.contact-list{display:flex;flex-direction:column;gap:4px}
.contact-link{display:flex;align-items:center;gap:14px;background:transparent;color:var(--ink);border:0;border-radius:0;padding:10px 0;width:100%;min-height:48px;text-align:left;font:inherit;cursor:pointer}
.contact-link:hover{color:var(--accent);background:var(--hover)}
.contact-arrow{margin-left:auto;font-size:26px;line-height:1;padding:0 8px}
#error{font-size:21px;line-height:1.4;margin:20px auto 0;max-width:38ch;color:var(--ink)}
button:focus-visible,a:focus-visible,#stage:focus-visible{outline:3px dashed var(--focus);outline-offset:6px}
.qr-fallback{position:absolute;width:min(82%,400px);height:auto;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--line)}
@media(min-width:1500px){.profile{gap:64px}#stage{height:440px}}
@media(max-width:950px){.profile{gap:28px;padding:40px 28px;grid-template-columns:minmax(0,1.1fr) minmax(270px,.9fr)}#stage{height:360px}h1{font-size:45px}.bio-copy{font-size:23px}.hint{font-size:17px}}
@media(max-width:680px){.profile{display:flex;flex-direction:column;align-items:stretch;gap:40px;padding:24px 22px 44px;min-height:100svh}.experience{width:100%}#stage{height:320px}.experience-details{min-height:135px;padding-top:10px}.stage-caption{font-size:19px}.profile-text{max-width:none;padding:0 8px}h1{font-size:46px}.bio-copy{font-size:24px;max-width:none;width:100%}.contacts{margin-top:32px;padding-top:24px}.contact-link{min-height:52px}.corner-top{left:0}.corner-bottom{right:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* The canvas is the only QR control; supporting text sits in the right column. */
.profile{align-items:center}
.visual-column{min-width:0;width:100%;max-width:520px;align-self:start}.experience{position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bio-copy{font-size:23px;line-height:1.45;max-width:none;width:100%}
.projects{margin-top:24px}
.project-link{display:block;background:var(--surface);border:2px solid var(--ink);padding:18px;box-shadow:4px 4px 0 var(--line)}
.project-link:hover{background:var(--hover)}
.project-heading{display:flex;align-items:start;justify-content:space-between;gap:14px;font-size:24px;line-height:1.2}
.project-description{display:block;font-size:21px;line-height:1.35;color:var(--muted);margin-top:10px}
.project-cta{display:block;font-size:20px;color:var(--accent);margin-top:14px;text-decoration:underline;text-underline-offset:4px}
.contacts{margin-top:34px}
@media(max-width:680px){.experience{position:relative;top:auto}.bio-copy{font-size:24px}.projects{margin-top:30px}}


/* Intro: a sharp centered QR, transform-only docking and smooth content reveal. */
:root{--scene-height:clamp(320px,44vh,420px)}
.scene-slot,#stage{height:var(--scene-height)}
.scene-slot{position:relative}
html.intro-active{overflow:hidden}
.intro-active [data-intro-reveal]{opacity:0;visibility:hidden;transform:translate3d(0,var(--intro-reveal-offset),0);pointer-events:none}
.intro-active .pixel-corner{visibility:hidden}
.intro-centered .experience{z-index:5;visibility:hidden;transform-origin:center;will-change:transform}.intro-prepared .experience{visibility:visible}

.intro-docking [data-intro-reveal],.intro-revealing [data-intro-reveal]{will-change:opacity,transform}
.intro-docking .experience{transition:transform var(--intro-dock-duration) var(--intro-dock-easing)}
.intro-revealing [data-intro-reveal]{visibility:visible;pointer-events:auto;animation:pixel-reveal var(--intro-reveal-duration) var(--intro-reveal-easing) both}



.intro-revealing .bio{animation-delay:calc(var(--intro-reveal-stagger) * 0)}.intro-revealing .projects{animation-delay:calc(var(--intro-reveal-stagger) * 1)}.intro-revealing .contacts,.intro-revealing .site-footer{animation-delay:calc(var(--intro-reveal-stagger) * 2)}@keyframes pixel-reveal{from{opacity:0;transform:translate3d(0,var(--intro-reveal-offset),0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(min-width:1500px){:root{--scene-height:440px}}
@media(max-width:950px){:root{--scene-height:360px}}
@media(max-width:680px){:root{--scene-height:320px}}
@media(prefers-reduced-motion:reduce){.intro-active [data-intro-reveal]{opacity:1;visibility:visible;transform:none;pointer-events:auto}.intro-docking .experience,.intro-revealing [data-intro-reveal]{transition:none;animation:none}}





/* Keep the compact copyright at the bottom of short pages. */
body{display:flex;flex-direction:column;min-height:100svh}
.profile{flex:1;min-height:0}
.site-footer{padding:12px 22px 20px;text-align:center;color:var(--muted);font-size:18px;line-height:1.3}
.site-footer small{font-size:inherit}
.jolie-layer{position:fixed;inset:0 0 env(safe-area-inset-bottom,0px);overflow:hidden;pointer-events:none;z-index:10}
#jolie{position:absolute;display:block;pointer-events:none;image-rendering:pixelated}
#jolie[hidden]{display:none}
.intro-active .jolie-layer{visibility:hidden}