/* M/ 0.4: the title, reading column, object and controls own separate tracks. */
.developer-portfolio .dev-hero{
 display:grid;grid-template-columns:minmax(250px,.32fr) minmax(0,1fr);
 grid-template-rows:auto auto minmax(320px,1fr) auto auto;
 gap:22px 36px;padding:26px var(--gutter) 0;
 height:auto;min-height:calc(100svh - 100px);max-height:none;isolation:isolate;overflow:clip;
}
.developer-portfolio .dev-hero .hero-topline{grid-column:1/-1;grid-row:1;min-width:0;gap:1rem}
.developer-portfolio .dev-hero h1{
 grid-column:1/-1;grid-row:2;font-size:clamp(7rem,min(26vw,42svh),28rem);
 line-height:.8;margin:0;padding:0;max-width:100%;z-index:1;
 transform:translateX(calc(var(--hero-scroll,0)*-35px));opacity:calc(1 - var(--hero-scroll,0)*.5);
}
.developer-portfolio .dev-hero .dev-intro{
 position:relative;inset:auto;grid-column:1;grid-row:3;align-self:center;
 max-width:320px;width:auto;z-index:3;visibility:visible;opacity:1;
}
.developer-portfolio .dev-intro p{font-size:clamp(1.1rem,1.4vw,1.5rem);line-height:1.5;margin-top:1rem}
.developer-portfolio .dev-intro .text-link{margin-top:1.1rem}
.developer-portfolio .dev-hero .scene{
 position:relative;inset:auto;grid-column:2;grid-row:2/4;align-self:stretch;
 width:100%;height:100%;min-width:0;min-height:320px;transform:none!important;z-index:2;
}
.developer-portfolio .dev-hero .scene-meta{top:0;right:0;opacity:1;font-size:.75rem}
.developer-portfolio .dev-hero .scene canvas{position:absolute;inset:0;width:100%;height:100%}
.developer-portfolio .dev-hero .scene-caption{bottom:0;right:0;opacity:1;font-size:.75rem}
.developer-portfolio .dev-hero .scene-controls{
 position:relative;inset:auto;grid-column:1/-1;grid-row:4;
 gap:1rem 1.5rem;flex-wrap:wrap;padding:8px 0 14px;min-width:0;
}
.developer-portfolio .dev-hero .hero-bottom{
 position:relative;inset:auto;grid-column:1/-1;grid-row:5;
 height:auto;min-height:76px;padding:18px 0;gap:1.5rem;
}
.developer-portfolio .dev-hero .engine-feedback{position:relative;inset:auto;grid-column:1/-1;grid-row:4;margin:0;font-size:.875rem;align-self:end;transform:translateY(12px)}
.developer-portfolio .dev-hero .engine-feedback:empty{display:none}
.developer-portfolio .dev-hero.is-exploded{grid-template-rows:auto minmax(530px,1fr) auto auto;min-height:calc(100svh - 100px);max-height:none}
.developer-portfolio .dev-hero.is-exploded h1{position:absolute;left:var(--gutter);top:80px;z-index:0;opacity:.045!important;transform:none}
.developer-portfolio .dev-hero.is-exploded .dev-intro{display:none}
.developer-portfolio .dev-hero.is-exploded .scene{grid-row:2;min-height:530px}
.developer-portfolio .dev-hero.is-exploded .scene-controls,.developer-portfolio .dev-hero.is-exploded .engine-feedback{grid-row:3}
.developer-portfolio .dev-hero.is-exploded .hero-bottom{grid-row:4}
.developer-portfolio .engine-panel{
 position:relative;inset:auto;grid-row:2;grid-column:1;width:auto;max-width:320px;
 align-self:center;display:block;z-index:3;
}
.developer-portfolio .engine-panel[hidden]{display:none}
.developer-portfolio .engine-panel [hidden]{display:none!important}
.developer-portfolio .engine-panel h2{font-size:clamp(2.4rem,3vw,3.6rem);line-height:.96;white-space:normal;margin:.8rem 0}
.developer-portfolio .engine-panel>p{font-size:.875rem;line-height:1.5}
.developer-portfolio .engine-panel .engine-attribution{font-size:.75rem;line-height:1.5;margin:.7rem 0 0}
.developer-portfolio .engine-spread-label{margin-top:1rem}
.developer-portfolio .engine-core{margin-top:.4rem;font-size:.875rem;padding:.5rem .7rem}
.developer-portfolio .engine-state{margin:.7rem 0 0}
.mechanical-key{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem;font-size:.875rem;color:var(--muted)}
.mechanical-key li{display:flex;align-items:center;gap:.6rem}
.mechanical-key li>span{width:7px;height:7px;flex:none}
.key-v8{background:#d34a32}.key-transmission{background:#a0aaa5}.key-exhaust{background:#9c8b76}
.rev-button{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:45px;margin-top:.6rem;padding:.6rem .75rem;border:1px solid var(--signal);background:var(--signal);color:var(--ink);font-size:.875rem}
.rev-button[aria-pressed=true]{background:var(--ink);color:var(--signal)}
.rev-button span:last-child{font-family:var(--font-data);font-size:.75rem}
.rev-meter{height:3px;margin-top:.5rem;background:var(--line);overflow:hidden}
.rev-meter>span{display:block;height:100%;background:var(--signal);transform:scaleX(var(--rev,0));transform-origin:left}
.rev-status{font-size:.75rem;color:var(--muted);margin-top:.35rem;min-height:1.5em}
@media(min-width:801px) and (max-height:800px){
 .developer-portfolio .dev-hero{gap:18px 30px;grid-template-rows:auto auto minmax(300px,1fr) auto auto;min-height:calc(100svh - 80px)}
 .developer-portfolio .dev-hero.is-exploded{grid-template-rows:auto minmax(530px,1fr) auto auto}
 .developer-portfolio .dev-hero .hero-bottom{min-height:64px;padding:14px 0}
}
@media(max-width:1100px) and (min-width:801px){
 .developer-portfolio .dev-hero{grid-template-columns:250px minmax(0,1fr);column-gap:20px}
 .developer-portfolio .engine-panel h2{font-size:2.5rem}
 .developer-portfolio .dev-hero .scene-meta>span:last-child{display:none}
}
@media(max-width:800px){
 .developer-portfolio .masthead{height:auto;min-height:102px;flex-wrap:wrap;padding-block:.8rem;gap:.5rem}
 .developer-portfolio .masthead-note{display:none}
 .developer-portfolio .masthead nav{order:2;width:100%;justify-content:space-between;margin:0}
 .developer-portfolio .dev-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(310px,48svh) auto auto;gap:26px;padding-top:24px;min-height:0}
 .developer-portfolio .dev-hero h1{font-size:28vw;line-height:.82;grid-row:2;margin:0}
 .developer-portfolio .dev-hero .dev-intro{grid-row:3;grid-column:1;max-width:none}
 .developer-portfolio .dev-intro p{font-size:1.15rem;line-height:1.5;margin:.6rem 0 0}
 .developer-portfolio .dev-intro .text-link{margin-top:.7rem}
 .developer-portfolio .dev-hero .scene{grid-row:4;grid-column:1;min-height:310px}
 .developer-portfolio .dev-hero .scene-controls{grid-row:5;gap:.7rem 1rem;padding:0}
 .developer-portfolio .dev-hero .engine-feedback{grid-row:5}
 .developer-portfolio .dev-hero .hero-bottom{grid-row:6;min-height:82px;gap:1rem}
 .developer-portfolio .dev-hero .deconstruct-button{width:100%;justify-content:center}
 .developer-portfolio .dev-hero .control-text{font-size:.875rem;margin:0}
 .developer-portfolio .dev-hero .hero-note{display:none}
 .developer-portfolio .dev-hero.is-exploded{grid-template-rows:auto minmax(370px,44svh) auto auto auto;min-height:0}
 .developer-portfolio .dev-hero.is-exploded .scene{grid-row:2;min-height:370px;position:sticky;top:0;align-self:start;background:var(--ink);z-index:4}
 .developer-portfolio .dev-hero.is-exploded h1{top:80px;font-size:26vw}
 .developer-portfolio .engine-panel{grid-row:3;grid-column:1;max-width:none;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .75rem}
 .developer-portfolio .engine-panel>*{grid-column:1/-1}
 .developer-portfolio .engine-panel h2{font-size:2.8rem;margin:.4rem 0}
 .developer-portfolio .engine-panel h2 br{display:none}
 .developer-portfolio .engine-panel h2 em{margin-left:.15em}
 .developer-portfolio .engine-panel .engine-core{grid-column:auto;font-size:.875rem;height:100%}
 .developer-portfolio .engine-panel #mechanical-focus{grid-column:1/-1}
 .developer-portfolio .engine-panel .engine-attribution br{display:none}
 .developer-portfolio .dev-hero.is-exploded .scene-controls,.developer-portfolio .dev-hero.is-exploded .engine-feedback{grid-row:4}
 .developer-portfolio .dev-hero.is-exploded .hero-bottom{grid-row:5}
}