.ticker-join{margin-bottom:0;clip-path:none}
.work-stage{background:var(--blue);color:var(--paper);position:relative;isolation:isolate;--chapters:5;--chapter-step:.68;scroll-margin-top:-90px}
.stage-pin{position:relative;padding:115px 5vw 35px;overflow:clip}
.stage-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:55px;font:500 10px var(--sans);letter-spacing:.12em}
.stage-topline h2{font:inherit;margin:0}
.stage-projects{position:relative}
.stage-panel{display:grid;grid-template-columns:18% 1fr;gap:4%;margin:65px 0 160px;align-items:center}
.stage-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0}
.stage-number{font:700 clamp(100px,18vw,310px)/.8 var(--display);letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px #e8ff00}
.stage-category{font:500 9px/1.5 var(--sans);letter-spacing:.12em;opacity:.6}
.stage-blurb{font:italic clamp(20px,2.1vw,34px)/1.12 var(--serif);max-width:250px}
.stage-explore{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;border:0;border-bottom:1px solid #e8ff00;padding:7px 0;background:none;color:#e8ff00;font:600 15px/1.3 var(--sans);text-align:left}
.stage-explore .site-icon{width:19px;height:19px;flex:none}
.stage-explore:hover{color:var(--paper);border-color:var(--paper)}
.stage-figure{position:relative;margin:0;min-width:0;width:100%;justify-self:center}
.stage-photo{position:relative;display:block;width:100%;aspect-ratio:3/2;padding:0;border:1px solid #fbfaf85c;border-radius:4px;background:var(--blue);overflow:hidden}
.stage-photo img{display:block;width:100%;height:100%;object-fit:contain;transition:none}
.stage-caption{position:absolute;left:-10px;right:-40px;top:calc(100% - 38px);pointer-events:none;z-index:6}
.stage-caption h3{font:700 clamp(48px,min(7.8vw,12svh),150px)/.9 var(--display);letter-spacing:-.025em;white-space:nowrap;text-shadow:0 -1px 0 var(--blue),1px 0 0 var(--blue),0 1px 0 var(--blue),-1px 0 0 var(--blue)}
.stage-caption h3>span{text-transform:uppercase}
.stage-caption h3>em{font:italic 1.08em/.9 var(--serif);letter-spacing:-.045em}
.stage-stack{display:block;font:500 10px/1.3 var(--sans);letter-spacing:.14em;opacity:.65;margin:20px 0 0 3px}
.stage-transition{display:none;position:absolute;z-index:5;pointer-events:none}
.stage-peek{display:none;position:absolute;width:25vw;aspect-ratio:3/2;top:26%;right:-14vw;pointer-events:none;opacity:.7;border:1px solid #fbfaf850;border-radius:4px;overflow:hidden}
.stage-peek img{width:100%;height:100%;object-fit:contain}
.stage-ready .stage-peek{display:block}
.stage-navigation{display:flex;align-items:center;gap:20px}
.stage-index{display:flex;gap:16px;flex:1;min-width:0}
.stage-index button{border:0;padding:10px 0;min-width:0;flex:1;background:none;color:inherit;font:500 10px var(--sans);opacity:.6}
.stage-index button[aria-current]{opacity:1;color:#e8ff00}
.stage-progress{display:block;position:relative;height:2px;background:#fbfaf850;margin-bottom:16px;overflow:hidden}
.stage-progress i{position:absolute;inset:0;background:#e8ff00;transform:scaleX(var(--fill,0));transform-origin:left}
.stage-index button:hover .stage-progress{background:var(--paper)}
.stage-prev,.stage-next{width:38px;height:44px;display:grid;place-items:center;border:0;background:none;color:inherit;flex:none;padding:8px}
.stage-prev:disabled,.stage-next:disabled{opacity:.25;cursor:default}
.stage-footer-links{display:flex;justify-content:space-between;gap:20px;margin-top:15px;font:400 10px/1.5 var(--sans);opacity:.6}
.stage-footer-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.work-stage button:focus-visible,.work-stage a:focus-visible{outline:2px solid #e8ff00;outline-offset:5px}
.work-stage.stage-ready{height:calc(100svh + (var(--chapters) - 1)*var(--chapter-step)*100svh + 18svh)}
.stage-ready .stage-pin{position:sticky;top:0;height:100svh;padding:0}
.stage-ready .stage-topline{position:absolute;top:112px;left:5%;right:5%;margin:0;z-index:7}
.stage-ready .stage-projects{position:absolute;inset:145px 5% 105px}
.stage-ready .stage-panel{position:absolute;inset:0;margin:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.stage-ready .stage-panel[data-onstage]{visibility:visible}
.stage-ready .stage-panel[data-active]{pointer-events:auto}
.stage-ready .stage-figure{width:min(66vw,calc((100svh - 260px - min(12svh,7.8vw))*1.5));justify-self:start;align-self:start}
.stage-ready .stage-number{margin-left:-3.5vw;flex:1;display:flex;align-items:center;font-size:min(21vw,37svh)}
.stage-ready .stage-aside{gap:15px;padding-bottom:15px}
.stage-ready .stage-footer{position:absolute;bottom:23px;left:17%;right:8%;z-index:8}
.header.work-dark,.header.work-dark.scrolled{color:var(--paper);background:#163bffed}
.project-archive{background:var(--blue);color:var(--paper);padding:0 5% 52px;scroll-margin-top:20px}
.project-archive details{border-top:1px solid #fbfaf840;border-bottom:1px solid #fbfaf840}
.project-archive summary{display:flex;align-items:center;gap:22px;list-style:none;padding:24px 0;cursor:pointer}
.project-archive summary::-webkit-details-marker{display:none}
.project-archive h2{font:600 30px/1 var(--display)}
.archive-count{font:500 11px var(--sans);opacity:.55}
.project-archive summary>.site-icon{margin-left:auto;transition:rotate .2s}
.project-archive details[open] summary>.site-icon{rotate:180deg}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:6px 0 24px}
.archive-project{display:grid;grid-template-columns:108px minmax(0,1fr) 22px;gap:20px;align-items:center;padding:20px 0;border:0;border-top:1px solid #fbfaf830;background:none;color:inherit;text-align:left}
.archive-project img{aspect-ratio:3/2;object-fit:contain;border-radius:3px}
.archive-project strong{display:block;font:600 28px/1 var(--display)}
.archive-project small{display:block;margin-top:9px;font:500 8px/1.5 var(--sans);letter-spacing:.1em;opacity:.55}
.archive-project:hover strong{color:#e8ff00}
.archive-repositories{display:inline-block;margin-bottom:26px;font:400 11px var(--sans);opacity:.6}
.project-archive button:focus-visible,.project-archive a:focus-visible,.project-archive summary:focus-visible{outline:2px solid #e8ff00;outline-offset:5px}
@media(max-width:700px){.project-archive{padding:0 6% 35px}.project-archive h2{font-size:25px}.archive-grid{grid-template-columns:1fr;gap:0}.archive-project{grid-template-columns:80px minmax(0,1fr) 20px;gap:15px;padding:16px 0}.archive-project strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.project-archive summary>.site-icon{transition:none}}
@media(max-width:1000px){.stage-blurb{font-size:23px}.stage-explore{font-size:13px}.stage-navigation{gap:10px}.stage-index{gap:10px}.stage-ready .stage-footer{left:7%;right:7%}.stage-caption{right:-20px}.stage-stack{margin-top:16px}}
/* Tablets keep the image and its description in one compact composition. */
@media(min-width:701px) and (max-width:1200px){
 .stage-panel{grid-template-columns:minmax(0,1fr);gap:90px;margin:45px 0 110px}
 .stage-figure{order:0;width:100%;max-width:900px}
 .stage-aside{order:1;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px 24px;align-items:center;align-self:auto;justify-self:center;width:100%;max-width:900px}
 .stage-number{grid-column:1;grid-row:1/3;font-size:96px;letter-spacing:-.04em}
 .stage-category{grid-column:2;grid-row:1;font-size:10px}
 .stage-blurb{grid-column:2;grid-row:2;max-width:100%;font:italic 24px/1.22 var(--serif)}
 .stage-explore{grid-column:3;grid-row:1/3;font-size:14px;min-height:44px;white-space:nowrap}
 .stage-caption{left:-4px;right:0;top:calc(100% - 28px)}
 .stage-caption h3{font-size:clamp(42px,min(8.2vw,10svh),84px)}
 .stage-stack{font-size:10px;margin-top:15px}
 .stage-ready .stage-projects{inset:155px 5% 125px}
 .stage-ready .stage-panel{align-content:center;gap:clamp(96px,9vw,110px)}
 .stage-ready .stage-figure{width:min(100%,900px,calc((100svh - 470px)*1.5));justify-self:center;align-self:center}
 .stage-ready .stage-number{flex:none;display:block;font-size:96px;margin:0}
 .stage-ready .stage-aside{padding:0;gap:10px 24px}
 .stage-ready .stage-peek{display:none}
 .stage-ready .stage-footer{left:5%;right:5%;bottom:24px}
 .stage-navigation{gap:16px}.stage-index{gap:12px}
}
@media(max-width:700px){
 .stage-pin{padding:105px 6% 30px}.stage-topline{font-size:8px;letter-spacing:.08em;margin-bottom:35px}
 .stage-panel{grid-template-columns:1fr;gap:65px;margin:30px 0 90px}
 .stage-figure{order:0}.stage-aside{order:1;display:grid;grid-template-columns:50px 1fr;gap:7px 18px}
 .stage-number{grid-row:1/4;font-size:70px;align-self:center;letter-spacing:-.04em}
 .stage-category{grid-column:2;font-size:8px}.stage-blurb{grid-column:2;max-width:290px;font:400 13px/1.5 var(--sans)}
 .stage-explore{grid-column:2;font-size:13px;padding-top:4px}
 .stage-caption{left:-3px;right:-8px;top:calc(100% - 20px)}
 .stage-caption h3{font-size:clamp(35px,10.2vw,68px)}.stage-stack{font-size:8px;letter-spacing:.1em;margin-top:12px}
 .stage-ready .stage-topline{top:103px;left:6%;right:6%}
 .stage-ready .stage-projects{inset:135px 6% 120px}
 .stage-ready .stage-panel{align-content:center;gap:70px}
 .stage-ready .stage-figure{width:min(100%,calc((100svh - 345px)*1.5));justify-self:center;align-self:center}.stage-ready .stage-peek{display:none}
 .stage-ready .stage-number{font-size:70px;display:block;margin:0}
 .stage-ready .stage-aside{padding-bottom:0;gap:7px 18px}
 .stage-ready .stage-footer{bottom:18px;left:4%;right:4%}
 .stage-navigation{gap:5px}.stage-index{gap:7px}.stage-prev,.stage-next{width:27px;padding:4px}
 .stage-progress{margin-bottom:12px}.stage-footer-links{padding:0 5px;margin-top:12px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.stage-panel{will-change:auto}.stage-transition{display:none!important}}