/* The text column sits on the ground; the light field is inset in a dark frame.
   --ground is the frame and page colour, a step darker than the field's own #10171c. */
:root{color-scheme:dark;--ground:#0b1014;--pane:#121b23;--ink:#e5e9ec;--muted:#a5b4c0;--sea:#91b0c4;--rule:#2d3d48;--profile-width:240px;--panel-width:440px;--frame:10px;--edge-left:max(24px,env(safe-area-inset-left));--edge-right:max(20px,env(safe-area-inset-right));--edge-top:max(20px,env(safe-area-inset-top));--edge-bottom:max(20px,env(safe-area-inset-bottom));--control-clearance:5.25rem;--lf-ease:cubic-bezier(.2,.65,.3,1);--lf-in:400ms;--lf-out:600ms}
*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:auto}
body{margin:0;color:var(--ink);font:400 14px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--sea);text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--lf-in) var(--lf-ease)}
a:hover{color:var(--sea)}
a:focus-visible,button:focus-visible{outline:2px solid var(--sea);outline-offset:4px;transition:none}
button{font:inherit}
h1,h2,h3,p{margin:0}
h1,h2{font-size:14px;line-height:1.5;font-weight:500}
h3{font-size:14px;line-height:1.5;font-weight:600}
[hidden]{display:none!important}
.tile-wall{display:none;pointer-events:none}
.engineering-workspace{position:relative;margin:20px;max-width:820px}
.engineering-panel{background:var(--pane);padding:24px}
.profile-pane{position:relative;margin-bottom:20px;padding:4px 0 24px}
.profile-intro{margin:10px 0 0;max-width:34ch;font-size:14px;line-height:1.55;color:var(--muted)}
.work-navigation,.profile-navigation{display:grid}
.work-navigation{margin-top:24px}
.work-navigation a,.profile-navigation a{min-height:40px;display:flex;align-items:center;text-decoration:none;width:fit-content;max-width:100%;padding:7px 0;font-size:14px}
.work-navigation a[aria-current="true"],.profile-navigation a[aria-current="true"]{color:var(--sea);text-decoration:underline}
.profile-navigation{margin-top:18px;margin-bottom:24px}
.profile-navigation a{color:var(--muted)}
.profile-footer{border-top:1px solid var(--rule);padding-top:18px;font-size:.8125rem;color:var(--muted)}
.profile-footer a,.motion-control{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.profile-socials,.profile-paths{display:flex;gap:24px;flex-wrap:wrap}
.profile-footer .contact-link{font-weight:500;color:var(--ink)}
.experience-controls{display:none}
.motion-control,.sound-control{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;min-height:44px;color:var(--muted);background:transparent;border:0;padding:8px 0;cursor:pointer;font-size:.8125rem;line-height:1.4;text-align:left;transition:color var(--lf-in) var(--lf-ease)}
.motion-control:hover,.sound-control:hover{color:var(--ink)}
.sound-control:disabled{cursor:default;color:var(--muted)}
.engineering-ready .profile-pane,.engineering-ready .engineering-panel{padding-bottom:var(--control-clearance);scroll-padding-block:24px var(--control-clearance)}
.engineering-panel{margin-bottom:20px;scroll-margin-top:20px}
.panel-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin:-6px 0 30px}
.panel-heading h2{padding-top:8px}
.panel-close{display:flex;align-items:center;min-height:44px;flex:none;font-size:13px;color:var(--muted)}
.engineering-panel>p{margin-bottom:22px;max-width:62ch}
.engineering-panel .project-kind{color:var(--sea);font-size:14px}
.project-links{display:grid;margin-top:30px;justify-items:start;font-size:14px;gap:2px}
.project-links a{min-height:44px;display:flex;align-items:center;max-width:100%;overflow-wrap:anywhere}
.more-work-list{display:grid;gap:26px}
.more-work-list h3 a{display:inline-flex;align-items:center;min-height:44px}
.more-work-list p{color:var(--muted);font-size:14px;line-height:1.6}
.education{margin-top:32px}
.education p{font-size:14px;color:var(--muted);margin-top:8px}
.engineering-ready body{height:100vh;height:100dvh;overflow:hidden}
.engineering-ready .tile-wall{--canvas-left:calc(var(--edge-left) + var(--profile-width) + 24px);display:block;position:fixed;top:var(--frame);left:var(--canvas-left);width:calc(100% - var(--canvas-left) - var(--frame));height:calc(100% - var(--frame) * 2);transition:opacity var(--lf-out) var(--lf-ease)}
.engineering-ready .engineering-workspace{position:fixed;inset:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);margin:0;max-width:none;display:flex;gap:24px;pointer-events:none}
.engineering-ready .profile-pane{width:var(--profile-width);flex:0 0 var(--profile-width);height:100%;margin:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;scrollbar-color:var(--rule) var(--ground)}
.engineering-ready .experience-controls{position:fixed;left:var(--edge-left);bottom:var(--edge-bottom);z-index:5;display:flex;flex-wrap:wrap;gap:0 16px;width:var(--profile-width);padding:8px 0;background:var(--ground)}
.engineering-ready .profile-footer{margin-top:auto}
.engineering-ready .engineering-panels{width:min(var(--panel-width),calc(100vw - var(--profile-width) - var(--edge-left) - var(--edge-right) - 24px));height:100%;pointer-events:none}
.engineering-ready .engineering-panel{height:100%;margin:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;scrollbar-color:var(--rule) var(--pane)}
/* Desktop: the open panel meets the frame edge, so no field shows above or below it; content keeps its line. */
@media(min-width:761px){.engineering-ready .engineering-panels{height:auto;margin-block:calc(var(--frame) - var(--edge-top)) calc(var(--frame) - var(--edge-bottom))}.engineering-ready .engineering-panel{padding-top:calc(24px + var(--edge-top) - var(--frame))}}
/* Panels and the field change opacity only, never size or position. */
.engineering-ready[data-panel-open="true"] .tile-wall{opacity:.72;transition-duration:var(--lf-in)}
.engineering-ready .engineering-panel:not([hidden]){animation:panel-arrive var(--lf-in) var(--lf-ease) both}
@keyframes panel-arrive{from{opacity:0}to{opacity:1}}
:root[data-paused="true"] .tile-wall{transition:none}
:root[data-paused="true"] .engineering-panel{animation:none!important}
:root[data-paused="true"] :is(a,.motion-control,.sound-control){transition:none}
/* Narrow screens: one scrolling page. The framed field shows first so the lit
   object is on the first screen; the text follows by CSS order alone, and the
   controls stay on the bottom edge over the end of the text. */
@media(max-width:760px){
  .engineering-workspace{margin:20px}
  .engineering-panel{padding:22px}
  html.engineering-ready{scroll-padding-bottom:var(--control-clearance)}
  .engineering-ready body{height:auto;overflow:visible;display:flex;flex-direction:column}
  .engineering-ready[data-panel-open="true"] body{height:100vh;height:100dvh;overflow:hidden}
  .engineering-ready .engineering-workspace{position:static;display:block;margin:20px var(--edge-right) 0 var(--edge-left);order:1}
  .engineering-ready .profile-pane{width:auto;flex:none;height:auto;overflow:visible;padding-bottom:var(--control-clearance)}
  .engineering-ready .tile-wall{position:relative;order:0;top:auto;left:auto;width:calc(100% - var(--frame) * 2);height:clamp(220px,38svh,340px);margin:max(var(--frame),env(safe-area-inset-top)) var(--frame) 0}
  .engineering-ready .experience-controls{right:var(--edge-right);width:auto;padding:8px 0}
  .engineering-ready .profile-intro{max-width:34ch}
  /* The open sheet covers the whole viewport, field included. */
  .engineering-ready .engineering-panels{display:block;position:fixed;z-index:3;inset:0;padding:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);width:auto;height:auto;background:var(--ground);pointer-events:auto}
  .engineering-ready[data-panel-open="true"] .profile-pane{display:none}
  .engineering-ready[data-panel-open="false"] .engineering-panels{display:none}
  .panel-heading{gap:8px}
  .panel-heading h2{max-width:65%}
}
@media(max-width:360px){.engineering-panel{padding:18px}.profile-socials,.profile-paths{gap:18px}.panel-heading{display:block}.panel-heading h2{max-width:100%}.panel-close{width:fit-content}.panel-heading{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){:root:not([data-motion="playing"]) .tile-wall{transition:none}:root:not([data-motion="playing"]) .engineering-panel{animation:none!important}:root:not([data-motion="playing"]) :is(a,.motion-control,.sound-control){transition:none}}
@media print{.tile-wall,.profile-socials,.profile-paths,.profile-footer .contact-link,.panel-close,.experience-controls{display:none!important}.engineering-ready body{height:auto;overflow:visible;display:block}.engineering-ready .engineering-workspace{position:static;display:block;margin:0}.engineering-ready .profile-pane,.engineering-ready .engineering-panels,.engineering-ready .engineering-panel{display:block!important;position:static;width:auto;max-width:none;height:auto;overflow:visible}.engineering-ready .engineering-panel[hidden]{display:block!important;break-before:page}body{color:#000;background:#fff}.profile-pane,.engineering-panel{background:transparent}.profile-footer{margin-top:20px;border:0;padding:0}.profile-navigation,.work-navigation{display:none}}