/* The existing portfolio is the foreground. Only story.js owns --story-y,
   --story-scale and --story-opacity; no CSS transition competes with the scrub. */
body{position:relative;isolation:isolate}
main{position:relative;z-index:1}
.story-world{position:absolute;inset:0 auto auto 0;z-index:0;overflow:hidden;pointer-events:none;color:var(--text);contain:strict}
.story-world *{pointer-events:none}
.story-geometry>*,.story-protagonist{opacity:calc(var(--story-strength,1)*var(--story-visibility,1))}
.story-world path,.story-world line{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:round}
.story-route{stroke-width:1;--story-strength:.19}
.story-trace{stroke-width:1.4;--story-strength:.58}
.story-frame{stroke-width:1;--story-strength:.32}
.story-frame[data-depth="1"]{--story-strength:.17}
.story-frame[data-depth="2"]{--story-strength:.1}
.story-branch{stroke-width:1;--story-strength:.22}
.story-grid{stroke-width:1;--story-strength:.065}
.story-near{stroke-width:2;--story-strength:.42}
.story-node{fill:var(--bg);stroke:currentColor;stroke-width:1.1}
.story-pulse,.story-protagonist{fill:currentColor}
.story-owned{transform:translate3d(0,var(--story-y,0px),0) scale(var(--story-scale,1));opacity:var(--story-opacity,1);transform-origin:50% 50%;transition:none}
/* Caret placeholders keep their exact inline layout during the SVG handoff. */
#hero-title .persistent,.contact-title .persistent{width:.48em;height:.075em;min-height:3px;vertical-align:-.035em}
.story-ready .persistent[data-story-attached="false"]{visibility:hidden;animation:none}
.story-ready .persistent[data-story-attached="true"]{visibility:visible}
.story-ready .project-card{background:var(--bg)}
.story-ready .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(60px,10vw,160px);row-gap:clamp(110px,22vh,220px);align-items:start}
.story-card-slot{min-width:0;position:relative;scroll-margin-top:max(0px,calc(40vh - 120px))}
.story-card-slot:nth-child(odd){grid-column:1}
.story-card-slot:nth-child(even){grid-column:2}
.story-card-slot:nth-child(1){grid-row:1}
.story-card-slot:nth-child(2){grid-row:2}
.story-card-slot:nth-child(3){grid-row:3}
.story-card-slot:nth-child(4){grid-row:4}
.story-ready .project-card{border-color:color-mix(in srgb,var(--text) calc(var(--story-focus,0)*22% + 16%),var(--bg));}
.story-ready .project-desc{max-width:48ch}
.story-ready .project-grid-wrap{margin-top:64px}
.story-ready .experience-section{padding-top:100px;padding-bottom:clamp(150px,25vh,250px)}
.story-ready .visitor{padding-top:44px;padding-bottom:90px}
.story-ready .hero-bottom{margin-bottom:70px}
.story-ready .about-section{gap:clamp(100px,18vh,180px);padding-top:110px;padding-bottom:140px}
.story-ready #skills{width:100%;max-width:880px;padding-bottom:90px}
.story-ready .skill-list{row-gap:64px;margin-top:42px}
.story-ready .skill-list>div{position:relative;padding-top:34px;padding-bottom:34px}
/* Light runs along the actual group boundary; the type stays fully readable. */
.story-ready .skill-list>div::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--text);opacity:var(--story-focus,0);transform:scaleX(var(--story-focus,0));transform-origin:left}
.story-ready #recognition,.story-ready #certifications{width:100%}
.story-ready #recognition .eyebrow::after,.story-ready #certifications .eyebrow::after{display:none}
.story-divider{display:block;height:2px;background:var(--border-strong);margin:10px auto 0;width:var(--story-divider,22px);max-width:100%}
.story-ready .contact-section{padding-top:110px}
.story-ready .contact-title{font-size:clamp(36px,5.2vw,76px);overflow-wrap:normal}
.story-ready .contact-title .persistent{white-space:nowrap}
.story-ready .contact-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px}
.story-ready .contact-top{min-width:0}
.story-ready .contact-links{margin-bottom:100px}
.story-ready .tab[aria-current="location"]{color:var(--text);background:var(--panel)}
@media(min-width:1600px){.story-world{left:0}}
@media(max-width:1000px){
  .story-ready .contact-grid{grid-template-columns:1fr}
  .story-ready .contact-title{font-size:clamp(36px,7vw,76px)}
  .story-ready .project-grid{column-gap:64px}
}
@media(max-width:700px){
  .story-ready .project-grid{grid-template-columns:1fr;row-gap:110px}
  .story-card-slot:nth-child(n){grid-column:1;grid-row:auto}
  .story-ready .project-grid-wrap{margin-top:52px}
  .story-ready .project-card{padding:22px}
  .story-ready .experience-section{padding-top:60px;padding-bottom:130px}
  .story-ready .visitor{padding-bottom:60px}
  .story-ready .about-section{padding-top:70px;padding-bottom:90px;gap:90px}
  .story-ready .skill-list{row-gap:22px;margin-top:24px}
  .story-ready #skills{padding-bottom:20px}
  .story-ready .skill-list>div{padding:24px 10px}
  .story-ready .contact-section{padding-top:70px}
  .story-ready .contact-links{margin-bottom:50px}
  .story-ready .contact-title{font-size:clamp(28px,7.7vw,48px)}
  .story-world .story-grid,.story-world .story-near{display:none}
  .story-frame:not([data-depth="0"]){display:none}
}
.motion-off .story-world{display:none}
.motion-off .story-owned{transform:none;opacity:1}
.motion-off .persistent[data-story-attached]{visibility:visible;animation:none}
@media(prefers-reduced-motion:reduce){
  .story-world{display:none}
  .story-owned{transform:none!important;opacity:1!important}
  .persistent[data-story-attached]{visibility:visible!important;animation:none!important}
}
.story-ready .project-category,.story-ready .project-year,.story-ready .project-desc{opacity:var(--story-detail-opacity,1)}

#lattice-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.motion-off #lattice-canvas{display:none}
@media(max-width:700px),(prefers-reduced-motion:reduce){#lattice-canvas{display:none}}