/* Personal homepage 2.10. Natural scrolling; shapes from the existing library. */
.inline-arrow{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.12em;flex:none}
.giant-arrow>.inline-arrow{width:100%;height:100%}
#mobile-nav .nav-app-icon{width:30px;height:30px;object-fit:contain;flex:none;filter:none}
#mobile-nav a:has(.nav-app-icon){min-height:48px;gap:14px}
.discipline-band{transform:rotate(-2.3deg);width:104%;margin:0 -2%;position:relative;z-index:2;outline:1px solid var(--ink);padding:22px 0}
.discipline-band .discipline-track{animation:none!important;will-change:transform}
.discipline-shell{overflow:clip;padding:30px 0;margin:-30px 0;position:relative;z-index:2;pointer-events:none}
.intro-art{width:100%;max-width:600px;padding:0;align-self:center;perspective:1000px}
.cube-build{width:100%;aspect-ratio:1;transform-style:preserve-3d;transform:rotateY(var(--cube-y,0deg)) rotateZ(var(--cube-z,0deg));color:var(--ink)}
.three-way-cube{width:100%;height:100%;overflow:visible}
.three-way-cube path{stroke-width:2;transform-origin:128px 128px;transition:none}
.cube-caption{display:block;font-size:10px;letter-spacing:.14em;text-align:center;margin-top:18px;opacity:.55}
.work .project-scroll-title{display:block;white-space:normal;--fill-color:var(--paper);text-align:left}
html[data-motion="on"] .work .project-scroll-title{-webkit-text-stroke:.55px var(--paper)}
.gravity-finale,.gravity-finale[data-enhanced="true"]{height:auto;min-height:0}
.gravity-finale .gravity-finale-inner,.gravity-finale[data-enhanced="true"] .gravity-finale-inner{position:relative;top:auto;height:auto;min-height:760px;padding:100px var(--pad) 75px}
.gravity-finale h2{font-family:Inter,Arial,sans-serif;font-weight:900;font-size:clamp(60px,10vw,150px);line-height:.9;letter-spacing:-.075em;position:relative;margin:0;width:100%}
.gravity-finale h2 span{display:block;transform:translateX(var(--final-x,0px));text-shadow:0 4px 35px #141516}
.gravity-finale h2 span:nth-child(2){color:var(--tgc-magenta);transform:translateX(calc(var(--final-x,0px)*-1));-webkit-text-stroke:1px var(--tgc-magenta)}
html[data-motion="on"] .gravity-finale h2 span:nth-child(2){color:transparent;background:linear-gradient(125deg,var(--tgc-magenta) var(--final-fill,100%),transparent var(--final-fill,100%));background-clip:text;-webkit-background-clip:text;text-shadow:none}
.gravity-finale h2 span:last-child{color:var(--yellow)}
.gravity-story-compact{padding:48px var(--pad) 64px;margin:0;border-top:1px solid #ffffff20;color:var(--paper);background:#141516;gap:5vw}
.gravity-story-compact .gravity-heart{color:var(--yellow)}
.gravity-chapter .gravity-cinema{height:auto;min-height:0}
.gravity-cinema-sticky{position:relative;top:auto;height:auto;padding:0 var(--pad) 55px}
.gravity-cinema .gravity-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;perspective:1500px}
.gravity-cinema .gravity-panel{position:relative;inset:auto;min-width:0;margin:0;opacity:1;transform-origin:center;transform:perspective(1200px) rotateX(var(--panel-rx,0deg)) rotateY(var(--panel-ry,0deg));border-radius:3px}
.gravity-cinema .gravity-panel:first-child{grid-column:1/-1}
.gravity-cinema .gravity-panel img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gravity-cinema .gravity-panel:first-child img{aspect-ratio:16/8}
.gravity-cinema .gravity-panel figcaption strong{font-size:clamp(23px,3.5vw,58px)}
.gravity-controls{display:flex}.gravity-cinema-progress{display:none}
.chapter-band{background:var(--ink);padding:38px 0;overflow:clip;color:var(--ink)}
.chapter-band>div{display:flex;align-items:center;justify-content:center;gap:30px;background:var(--yellow);width:140%;margin-left:-20%;white-space:nowrap;padding:13px 0;transform:rotate(2.1deg) translateX(var(--chapter-x,0px));font:clamp(28px,4vw,64px)/1 Display,Impact,sans-serif}
.chapter-band .star-mark{flex:none;width:.6em;height:.6em}
.tools::before{inset:-12% -100%;background:linear-gradient(128deg,transparent 25%,#31f8a21c 25.1%,#31f8a21c 75%,transparent 75.1%);transform:translateX(calc(var(--material-x,0%) * .22));}
.approach-heading{min-width:0}
.room-opening{position:relative;margin-top:32px;height:380px;overflow:clip;border-top:1px solid #1b202325;border-bottom:1px solid #1b202325}
.room-pattern{position:absolute;inset:0;color:#625089}
.room-pattern svg{width:100%;height:100%;display:block}
.room-pattern .pattern-face{fill:currentColor;stroke:currentColor;stroke-width:1.2}
.room-pattern .pattern-line{fill:none;stroke:currentColor;stroke-width:1.4}
.room-pattern .portal-copy{font:900 44px Inter,Arial,sans-serif;letter-spacing:-2px;fill:var(--ink)}
.room-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:36px;font-weight:900;line-height:1.1}
.room-opening.is-ready .room-fallback{display:none}
.signature-footer{position:relative;overflow:clip;padding-top:60px}
.footer-signature{margin-bottom:60px;color:var(--yellow)}
.footer-signature>p{font-size:11px;letter-spacing:.18em;border-bottom:1px solid #ffffff35;padding-bottom:24px;margin-bottom:32px}
.footer-signature>.jona-logo{display:inline-flex;flex-wrap:nowrap;width:max-content;max-width:100%;font-family:Inter,Arial,sans-serif;font-weight:900;font-size:clamp(100px,23vw,420px);line-height:.78;letter-spacing:-.09em;transform:translateX(var(--signature-x,0px))}
.footer-signature>.jona-logo .star-mark{transition:transform .4s;transform-origin:50% 50%}
.footer-signature>.jona-logo:hover .star-mark{transform:translateY(.06em) rotate(90deg)}
.signature-baseline{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff35;padding:30px 0 24px;font-size:clamp(11px,1.8vw,26px);font-weight:900;letter-spacing:.02em}
.signature-baseline>span:last-child{font-size:11px;align-self:end;letter-spacing:.1em}
.signature-footer .footer-top .wordmark{display:none}
.signature-footer .jano-family-footer{margin-bottom:30px}
@media(max-width:720px){
 .discipline-band{padding:17px 0}
 .intro-art{width:100%;max-width:460px;justify-self:center}
 .cube-caption{font-size:9px}
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}
 .work-grid .project-wide{grid-column:auto}
 .work-grid .project-media{aspect-ratio:1;min-height:0}
 .work-grid .project-media img{width:100%;height:100%;object-fit:cover}
 .work .project-caption{display:block;padding-top:13px}
 .work .project-scroll-title{font-size:18px;line-height:1.15;margin:0 0 9px;letter-spacing:-.035em}
 .work .project-caption>span{font-size:10px;line-height:1.4;display:block}
 .work .project-chip.status-stamp{font-size:9px;padding:5px 7px;top:auto;bottom:10px;left:8px;max-width:calc(100% - 16px)}
 .work .project-open{width:28px;height:28px;right:8px;top:8px;font-size:17px}
 .gravity-finale .gravity-finale-inner{min-height:0;padding:70px 18px 50px}
 .gravity-finale h2{font-size:12vw;line-height:.96;letter-spacing:-.065em}
 .gravity-finale h2 span:nth-child(2),.gravity-finale h2 span:last-child{font-size:1.6em}
 .gravity-finale .gravity-final-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
 .gravity-finale .pill-link{font-size:11px;line-height:1.3;padding:12px 10px;gap:5px;justify-content:center;min-height:48px}
 .gravity-story-compact{padding:30px 20px 45px}
 .gravity-cinema .gravity-stage{grid-template-columns:1fr;gap:24px}
 .gravity-cinema .gravity-panel img,.gravity-cinema .gravity-panel:first-child img{aspect-ratio:4/3}
 .gravity-cinema .gravity-panel figcaption strong{font-size:28px}
 .gravity-controls{display:none}
 .tools .tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
 .tools .tool-row{grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:54px auto 1fr auto;align-items:start;gap:12px 0;padding:22px 0 20px;min-width:0;height:100%}
 .tools .tool-row:hover{padding:22px 0 20px}
 .tools .tool-icon{grid-column:1;grid-row:1;width:48px;height:48px}
 .tools .tool-name{grid-column:1/-1;grid-row:2;font-size:17px;line-height:1.15;overflow-wrap:anywhere}
 .tools .tool-description{grid-column:1/-1;grid-row:3;display:block;font-size:12px;line-height:1.5;padding:0}
 .tools .tool-platform{grid-column:1/-1;grid-row:4;display:block;font-size:8px;line-height:1.5;letter-spacing:.06em;overflow-wrap:anywhere}
 .tools .tool-arrow{grid-column:2;grid-row:1;align-self:start;font-size:18px;width:20px}
 .room-opening{height:320px;margin:24px -20px 0}
 .signature-footer{padding-top:36px}
 .footer-signature{margin-bottom:35px}
 .footer-signature>.jona-logo{font-size:23vw}
 .signature-baseline{padding-top:22px;gap:12px;flex-wrap:wrap}
 .signature-baseline>span:last-child{font-size:9px}
 .signature-footer .footer-top p{width:100%}
}
@media(prefers-reduced-motion:reduce){
 .cube-build,.three-way-cube path,.gravity-cinema .gravity-panel,.footer-signature>.jona-logo,.gravity-finale h2 span{transform:none!important}
 .three-way-cube path{stroke-dashoffset:0!important;opacity:1!important}
 .gravity-finale h2 span:nth-child(2){color:var(--tgc-magenta)!important}
 .footer-signature>.jona-logo .star-mark{transition:none;transform:none!important}
}

/* 22 September: directional construction, pigment, four examples, room title. */
.work-grid .project-wide{grid-column:auto}
.work-grid .project-media{aspect-ratio:16/10}
.work-grid .project-media img{width:100%;height:100%;object-fit:cover}
.gravity-cinema .gravity-panel:first-child{grid-column:auto}
.gravity-cinema .gravity-panel:first-child img{aspect-ratio:16/10}
.tools::before{inset:-10% -50%;background:repeating-linear-gradient(128deg,transparent 0 110px,#31f8a221 111px 150px,transparent 151px 260px);transform:translateX(calc(var(--material-x,0%) * .3))}
.room-opening{height:480px;margin-top:0;border:0}
.room-heading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;width:max-content;text-align:center;font-family:Display,Impact,sans-serif;font-size:clamp(32px,3.6vw,52px)!important;line-height:1.08;z-index:1}
.room-heading em{font-size:1.65em!important;line-height:1.05}
.approach-grid{align-items:center}
@media(max-width:720px){
 .work-grid .project-media{aspect-ratio:1}
 .gravity-cinema .gravity-panel:first-child img{aspect-ratio:4/3}
 .room-opening{height:390px;margin:0 -20px}
 .room-heading{font-size:38px!important}
 .tools::before{background:repeating-linear-gradient(128deg,transparent 0 70px,#31f8a221 71px 100px,transparent 101px 180px)}
}

/* V2.12: four development blocks, ordered in the document; two mobile columns. */
.gravity-evidence .gravity-milestones{grid-template-columns:repeat(3,minmax(0,1fr))}
.gravity-evidence .gravity-development{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.3fr;gap:16px 6%;padding:26px 0 36px;margin:0;border:0;border-bottom:1px solid var(--line)}
.gravity-development .eyebrow{grid-column:1/-1;margin:0}
.gravity-development .development-title{--fill-color:#1b2023;white-space:normal}
.gravity-milestone .epic-title{--fill-color:#00758f;white-space:normal}
.gravity-evidence .gravity-milestone:nth-child(2){border-left:0;padding-left:0}
.gravity-evidence .gravity-milestone:last-child{grid-column:auto;display:block;border-top:0;border-left:1px solid var(--line);padding-left:30px}
.gravity-evidence .gravity-milestone:nth-child(2) .gravity-stat{--fill-color:#93600a}
@media(max-width:720px){
 .gravity-cinema .gravity-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .gravity-cinema .gravity-panel img,.gravity-cinema .gravity-panel:first-child img{aspect-ratio:16/10;object-fit:cover}
 .gravity-chapter .gravity-cinema .gravity-panel figcaption{position:relative;inset:auto;display:flex;align-items:end;padding:12px 0 0;gap:5px;background:none}
 .gravity-cinema .gravity-panel figcaption strong{font-size:19px;line-height:1.08;min-width:0}
 .gravity-cinema .gravity-panel figcaption small{font-size:7px;letter-spacing:.03em;line-height:1.4;margin-bottom:8px}
 .gravity-cinema .gravity-panel figcaption>span{font-size:23px;flex:none}
 .gravity-evidence .gravity-milestones{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .gravity-evidence .gravity-milestone,.gravity-evidence .gravity-milestone:last-child,.gravity-evidence .gravity-development{grid-column:auto;display:block;padding:24px 0;margin:0;border:0;border-bottom:1px solid var(--line);min-width:0}
 .gravity-evidence .gravity-milestone .eyebrow{font-size:8px;letter-spacing:.03em;margin:0 0 18px;min-height:24px}
 .gravity-evidence .gravity-development strong{font-size:23px;line-height:1.14;letter-spacing:-.045em}
 .gravity-evidence .gravity-milestone p{font-size:12px;line-height:1.55;margin-top:14px}
 .gravity-evidence .gravity-milestone .gravity-stat{font-size:clamp(26px,7.4vw,48px);letter-spacing:-.06em}
 .gravity-evidence .gravity-milestone h3{font-size:clamp(20px,6vw,32px);line-height:1.08;letter-spacing:-.06em}
 .gravity-evidence .next-step{font-size:8px;padding:6px 8px;max-width:100%}
 .gravity-evidence .funding-source{font-size:10px}
}