/* Recruiter reading paths, clearer metadata, and motion controls. */
[hidden]{display:none!important}
.nav-inner{gap:28px}
.nav-actions{display:flex;align-items:center;gap:24px}
.nav-resume{font-size:12px;white-space:nowrap;border-bottom:1px solid var(--line);padding:9px 0}
.nav-resume:hover{color:var(--rust);border-color:var(--rust)}
.reading-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rust);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{min-height:600px;padding:46px 0 50px}
.hero .hero-title{font-size:clamp(60px,5.1vw,76px)}
.hero .hero-title>span{display:block}
.hero-copy>.eyebrow{font-size:11px;letter-spacing:.11em}
.hero-intro{font-size:15px}
.hero-meta{font-size:11px;flex-wrap:wrap;gap:14px}
.hero-meta span+span:before{margin-right:14px}
.hero-meta a{border-bottom:1px solid var(--line)}
.profile-strip{display:grid;grid-template-columns:1fr 1.15fr 1fr;border:1px solid var(--line);background:#faf8f263;margin:0 0 24px;padding:24px 28px;gap:28px}
.profile-strip>div+div{border-left:1px solid var(--line);padding-left:28px}
.profile-strip dt{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:7px}
.profile-strip dd{margin:0;font-size:13px;font-weight:600;line-height:1.8}
.profile-strip small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.section{padding-top:66px;padding-bottom:66px}
.project-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 28px;border-bottom:1px solid var(--line);padding:0 0 20px}
.project-filters{display:flex;flex-wrap:wrap;gap:8px}
.project-filters button{border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--muted);font-size:11px;padding:9px 14px;min-height:44px}
.project-filters button span{font-size:9px;margin-left:12px;opacity:.8}
.project-filters button[aria-pressed=true]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.project-filters button:hover:not([aria-pressed=true]){background:var(--sheet);color:var(--ink)}
.filter-status{font-size:10px}
.project-type{align-items:center;font-size:10px;letter-spacing:.05em}
.project-badge{border:1px solid var(--line);padding:3px 8px;border-radius:3px;white-space:nowrap;background:#faf8f273;font-size:9px}
.project-badge.client{border-color:#4c615257;background:#dbe3d2}
.project-details{border-top:1px solid var(--line);margin:18px 0 0;padding-top:13px;display:grid;gap:6px}
.project-details>div{display:grid;grid-template-columns:74px 1fr;gap:9px}
.project-details dt{font-size:10px;color:var(--muted)}
.project-details dd{font-size:11px;line-height:1.8;margin:0;color:var(--ink)}
.project p{font-size:14px;line-height:1.85}
.project h3{font-size:37px}
.project .text-link{font-size:12px;min-height:40px}
.case-hero{padding-bottom:34px}
.case-title-row h1{font-size:68px}
.case-facts{margin-top:27px;margin-bottom:25px}
.case-facts dt{font-size:10px}
.case-jump{margin-top:19px;min-height:40px}
.case-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;background:var(--sheet);border:1px solid var(--line);padding:26px}
.case-summary h2{font:600 11px/1.5 var(--sans);letter-spacing:.03em;margin:0 0 9px}
.case-summary p{font-size:12px;line-height:1.85}
.read-time{font-weight:400;letter-spacing:.07em;white-space:nowrap}
.case-nav{position:sticky;top:89px;z-index:25;background:#eae3d2f5;backdrop-filter:blur(10px);margin-top:0;min-height:56px;gap:26px}
.case-nav a{font-size:11px;padding:3px 0;border-bottom:1px solid transparent}
.case-nav a[aria-current=location]{color:var(--rust);border-color:var(--rust)}
.case-section{scroll-margin-top:56px}
.case-banner.genesis{max-height:560px}
.contact-actions{row-gap:17px}
.contact-actions a{min-height:28px;display:inline-flex;align-items:center;border-bottom:1px solid var(--line)}
.contact-card{transform:none}
.footer-links{align-items:center;flex-wrap:wrap}
.motion-toggle{background:transparent;border:1px solid var(--line);border-radius:3px;padding:6px 10px;min-height:34px;color:var(--muted);font-size:10px;white-space:nowrap}
.motion-toggle:before{content:'◌';color:var(--rust);margin-right:6px}
.motion-toggle[aria-pressed=true]:before{content:'✦'}
.motion-toggle:disabled{cursor:default}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] .project-cover img,html[data-motion=off] .button,html[data-motion=off] .photo-card{transition:none}
@media(min-width:1450px){.hero{min-height:650px}.hero .hero-title{font-size:82px}}
@media(max-width:1000px){.nav-inner{gap:20px}.nav-links{gap:19px}.nav-actions{gap:15px}.hero .hero-title{font-size:64px}.profile-strip{gap:16px;padding:21px}.profile-strip>div+div{padding-left:16px}.profile-strip dd{font-size:12px}.profile-strip small{font-size:10px}.case-title-row h1{font-size:60px}}
@media(max-width:760px){.nav-actions{margin-left:auto;gap:14px}.nav-resume{font-size:11px;padding:10px 0}.nav-contact{margin:0;min-height:39px}.nav-inner{gap:13px}.hero{min-height:0;padding-top:33px;padding-bottom:35px;gap:18px}.hero .hero-title{font-size:clamp(50px,12vw,68px);margin:20px 0}.hero-intro{font-size:14px}.hero-copy>.eyebrow{font-size:10px;letter-spacing:.07em}.hero-meta{font-size:10px;gap:11px}.hero-meta span+span:before{margin-right:11px}.hero-buttons{margin-top:23px}.hero .button{min-height:48px}.portrait-area{max-width:255px;margin-top:8px}.portrait-caption{font-size:26px}.portrait-meta .eyebrow{font-size:7px}.hero-stamp{bottom:21px;font-size:8px;left:-18px}.compass{right:0;top:10px}.profile-strip{grid-template-columns:1fr;gap:15px;margin-bottom:18px;padding:20px}.profile-strip>div{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:baseline}.profile-strip>div+div{border-left:0;border-top:1px solid var(--line);padding:15px 0 0}.profile-strip dt{font-size:9px;letter-spacing:.06em;margin:0}.profile-strip dd{font-size:12px}.profile-strip small{font-size:10px}.section{padding:47px 0}.project-filter-bar{align-items:start;flex-direction:column;gap:12px}.project-filters{gap:7px;width:100%}.project-filters button{padding:8px 10px;font-size:10px;flex:1;white-space:nowrap}.project-filters button span{margin-left:6px;font-size:8px}.filter-status{font-size:10px}.project h3{font-size:34px}.project p{font-size:13px}.project-type{font-size:9px;gap:7px;letter-spacing:0}.project-badge{font-size:8px;padding:3px 6px}.project-details dt{font-size:10px}.project-details dd{font-size:11px}.case-hero{padding-top:25px}.case-title-row h1{font-size:clamp(45px,13vw,60px)}.case-title-row{gap:20px}.case-summary{grid-template-columns:1fr;gap:17px;padding:20px}.case-summary>div+div{padding-top:16px;border-top:1px solid var(--line)}.case-summary h2{font-size:11px;margin-bottom:5px}.case-summary p{font-size:12px}.case-facts{margin-bottom:23px}.case-nav{position:relative;top:auto;padding:15px 0;gap:12px 20px}.case-nav a{font-size:10px;min-height:27px}.case-section{scroll-margin-top:0}.case-jump{margin-top:12px;font-size:12px!important}.read-time{display:inline-block}.footer-inner{flex-direction:column;gap:15px}.footer-links{width:100%;justify-content:space-between;gap:13px}.motion-toggle{font-size:9px;min-height:36px}.contact-actions a{min-height:32px}.hero .hero-title>span:last-child{max-width:100%}.contact h2{font-size:50px}}
@media(max-width:380px){.nav-inner{gap:8px}.nav-actions{gap:11px}.nav-resume{font-size:10px}.nav-contact{font-size:10px;padding:7px 10px;gap:7px}.logo{font-size:30px;gap:7px}.logo img{width:25px}.hero-meta{font-size:9px;gap:9px}.hero .hero-stamp{left:-5px}.hero .hero-title{font-size:49px}.project-filters button{padding:8px 7px;font-size:9px}.project-filters button span{margin-left:4px}.case-title-row h1{font-size:45px}.project-type{font-size:8px}.contact h2{font-size:46px}.profile-strip{padding:18px}.profile-strip>div{grid-template-columns:79px 1fr}.profile-strip dd{font-size:11px}}
@media(prefers-reduced-motion:reduce){.reading-progress{display:none}html{scroll-behavior:auto!important}}
@media print{.nav,.footer,.contact,.project-filter-bar,.hero-stamp,.compass,.binder,.case-nav,.project-arrow,.button,.motion-toggle,.lightbox{display:none!important}.wrap{width:100%}.hero,.section{padding:20px 0;min-height:0}.hero{grid-template-columns:1fr}.portrait-area{display:none}.hero .hero-title{font-size:44px}body{background:white;color:#111;font-size:11pt}.project{break-inside:avoid}.project-cover{max-height:200px}.case-section{display:block;break-inside:avoid}.project[hidden]{display:block!important}}

/* Direct access to the ShopGenesis concept website. */
.case-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:20px}.case-actions .case-jump{margin-top:0}.case-actions .button{max-width:100%;font-size:12px}

/* Original portfolio loader: running stickman on the dark journal cover. */
.page-loader{position:fixed;inset:0;z-index:99999;display:none;place-items:center;background:#2b2420;opacity:0;transition:opacity .45s ease,transform .45s ease}
.page-loader.is-visible{display:grid;opacity:1}
.page-loader.is-leaving{opacity:0;transform:translateY(-2%)}
body.is-loading{overflow:hidden}
.preloader-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.runner-scene{position:relative;width:180px;height:180px}
.stickman-loader{display:block;width:180px;height:180px;object-fit:contain}
.runner-shadow{position:absolute;bottom:8px;left:50%;width:56px;height:8px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.35) 0%,transparent 75%);transform:translateX(-50%);animation:runner-shadow-pulse .5s ease-in-out infinite alternate}
.preloader-label{margin-top:.25rem;font:400 1rem/1.4 var(--hand);letter-spacing:.05em;color:rgba(234,227,210,.5)}
.preloader-bar{position:relative;width:150px;height:2px;overflow:hidden;border-radius:99px;background:rgba(234,227,210,.1)}
.preloader-bar-fill{width:100%;height:100%;border-radius:99px;background:#eae3d2;transform:scaleX(0);transform-origin:left;animation:journal-loading 1.7s cubic-bezier(.65,0,.35,1) forwards}
@keyframes journal-loading{to{transform:scaleX(1)}}
@keyframes runner-shadow-pulse{from{opacity:.55;transform:translateX(-50%) scaleX(.82)}to{opacity:1;transform:translateX(-50%) scaleX(1.08)}}
@media(prefers-reduced-motion:reduce){.page-loader{display:none!important}.runner-shadow,.preloader-bar-fill{animation:none}}
@media print{.page-loader{display:none!important}}

/* Interactive 3D self-portrait replacing the old handwritten About note. */
.about-model-card{position:relative;width:min(100%,360px);margin-top:40px;padding:13px 13px 43px;background:var(--sheet);border:1px solid var(--line);box-shadow:11px 13px 0 rgba(79,63,49,.12);transform:rotate(-1.6deg);transition:transform .35s ease,box-shadow .35s ease}
.about-model-card:focus-within{transform:rotate(0deg) translateY(-5px);box-shadow:8px 17px 28px rgba(79,63,49,.14)}
.about-model-stage{position:relative;height:360px;overflow:hidden;border:1px solid var(--ink);background:radial-gradient(circle at 50% 38%,#fff 0%,#e8dfcf 76%)}
.about-model-stage model-viewer{position:relative;z-index:2;width:100%;height:100%;background:transparent;--poster-color:transparent}
.about-model-stage model-viewer:not(:defined){display:none}
.model-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.about-model-stage model-viewer:defined~.model-fallback{opacity:0}
.model-spinner{display:grid;position:absolute;inset:0;place-items:center;background:var(--sheet);color:var(--muted);font:600 9px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.model-spinner:before{content:'';position:absolute;width:31px;height:31px;border:2px solid rgba(153,69,46,.15);border-top-color:var(--rust);border-radius:50%;animation:model-spin .8s linear infinite;transform:translateY(-21px)}
.about-model-caption{display:flex;position:absolute;right:15px;bottom:11px;left:15px;align-items:center;justify-content:space-between;font:600 9px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.about-model-caption span:last-child{font:600 21px/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--rust)}
@keyframes model-spin{to{transform:translateY(-21px) rotate(360deg)}}
@media(max-width:760px){.about-model-card{width:min(88vw,350px);margin:32px auto 4px}.about-model-stage{height:340px}}
@media(max-width:380px){.about-model-stage{height:310px}}
@media(prefers-reduced-motion:reduce){.about-model-card{transition:none}.model-spinner:before{animation:none}}
@media print{.about-model-card{display:none!important}}

/* Recruiter-review refinements: concrete, clearly labelled Kisaan constraints */
.constraint-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}
.constraint-states article{border:1px solid rgba(43,38,31,.18);background:rgba(255,255,255,.34);padding:20px;min-height:190px}
.constraint-states strong{display:block;font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.15;margin:16px 0 10px}
.constraint-states p{font-size:.92rem;line-height:1.55;margin:0}
@media(max-width:760px){.constraint-states{grid-template-columns:1fr}.constraint-states article{min-height:0}}


/* Motion layer: shared curves, press feedback, and transitions for state changes. Visual design is unchanged. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--dur-press:160ms;--dur-hover:150ms;--dur-ui:220ms}
.nav-links a,.nav-resume,.nav-contact,.project-filters button,.case-nav a,.footer a,.project h3 a,.copy-email,.motion-toggle,.lightbox-close,.text-link{transition:color var(--dur-hover) ease,background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform var(--dur-press) var(--ease-out)}
.menu-button span{transition:transform var(--dur-ui) var(--ease-out)}
.project-cover img{transition:transform .5s var(--ease-out)}
.photo-card{transition:transform .25s var(--ease-out)}
.about-model-card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.page-loader{transition-timing-function:var(--ease-out)}

/* Press feedback. */
.button:active,.nav-resume:active,.nav-contact:active,.project-filters button:active,.copy-email:active,.motion-toggle:active,.lightbox-close:active,.menu-button:active,.image-dialog button:active{transform:scale(.97)}
.menu-button{transition:transform var(--dur-press) var(--ease-out)}
.artifact button,.art-grid button{transition:transform var(--dur-press) var(--ease-out)}
.artifact button:active,.art-grid button:active{transform:scale(.985)}
@media(hover:none){.project-cover{transition:transform var(--dur-press) var(--ease-out)}.project-cover:active{transform:scale(.985)}}

/* Hover motion only where a real pointer hovers; touch would leave it stuck. */
@media(hover:hover) and (pointer:fine){
.button:hover{transform:translateY(-2px)}
.button:hover:active{transform:translateY(-1px) scale(.97)}
.project-cover:hover img{transform:scale(1.035)}
.project-cover.ads:hover img{transform:rotate(-2deg)}
.project-cover.ads:hover img+img{transform:rotate(2deg) translateY(8px)}
.photo-card:hover{transform:rotate(0)}
.about-model-card:hover{transform:rotate(0deg) translateY(-5px);box-shadow:8px 17px 28px rgba(79,63,49,.14)}
[data-arrow]{display:inline-block;transition:transform var(--dur-ui) var(--ease-out)}
a:hover>[data-arrow=up-right]{transform:translate(2px,-2px)}
a:hover>[data-arrow=down]{transform:translateY(2px)}
a:hover>[data-arrow=right]{transform:translateX(3px)}
a:hover>[data-arrow=left]{transform:translateX(-3px)}
}

/* Current-section underline draws in instead of jumping. */
.nav-links a:after{content:'';position:absolute;bottom:0;height:1px;background:var(--rust);left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease-out)}
.nav-links a[aria-current]:after{transform:scaleX(1)}
@media(max-width:760px){.nav-links a:after{content:none}}

/* Mobile menu opens from the bar it hangs off, links settle in sequence. */
@media(max-width:760px){
.nav-links{opacity:0;transform:translateY(-8px);transition:opacity 150ms ease-out,transform 150ms ease-out,display 150ms allow-discrete}
.nav-links.open{opacity:1;transform:none;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),display var(--dur-ui) allow-discrete}
@starting-style{.nav-links.open{opacity:0;transform:translateY(-8px)}}
.nav-links.open a{transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),color var(--dur-hover) ease}
.nav-links.open a:nth-child(2){transition-delay:40ms}
.nav-links.open a:nth-child(3){transition-delay:80ms}
.nav-links.open a:nth-child(4){transition-delay:120ms}
@starting-style{.nav-links.open a{opacity:0;transform:translateY(6px)}}
}

/* Image viewers fade and settle in, and leave faster than they arrive. */
.lightbox,.image-dialog{opacity:0;transform:scale(.96);transition:opacity 150ms ease-out,transform 150ms ease-out,overlay 150ms allow-discrete,display 150ms allow-discrete}
.lightbox[open],.image-dialog[open]{opacity:1;transform:none;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out),overlay 240ms allow-discrete,display 240ms allow-discrete}
@starting-style{.lightbox[open],.image-dialog[open]{opacity:0;transform:scale(.96)}}
.lightbox::backdrop,.image-dialog::backdrop{opacity:0;transition:opacity 150ms ease-out,overlay 150ms allow-discrete,display 150ms allow-discrete}
.lightbox[open]::backdrop,.image-dialog[open]::backdrop{opacity:1;transition-duration:240ms}
@starting-style{.lightbox[open]::backdrop,.image-dialog[open]::backdrop{opacity:0}}

/* Copy confirmation. */
.copy-email.is-copied{color:var(--green);border-color:currentColor;animation:copy-confirm 320ms var(--ease-out)}
@keyframes copy-confirm{from{opacity:.3;transform:translateY(3px)}}

/* Page-to-page: the header stays put while the page content cross-fades and rises. */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:180ms ease-out both vt-out}
::view-transition-new(root){animation:320ms var(--ease-out) 40ms both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* Visitor turned motion off: keep colour feedback, drop movement. */
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{transition-property:color,background-color,border-color,opacity!important;animation:none!important}
html[data-motion=off] .button:active,html[data-motion=off] .nav-resume:active,html[data-motion=off] .nav-contact:active,html[data-motion=off] .project-filters button:active,html[data-motion=off] .copy-email:active,html[data-motion=off] .motion-toggle:active,html[data-motion=off] .lightbox-close:active,html[data-motion=off] .menu-button:active,html[data-motion=off] .image-dialog button:active,html[data-motion=off] .artifact button:active,html[data-motion=off] .art-grid button:active,html[data-motion=off] .project-cover:active,html[data-motion=off] .button:hover{transform:none}
@media(prefers-reduced-motion:reduce){
.button:active,.nav-resume:active,.nav-contact:active,.project-filters button:active,.copy-email:active,.motion-toggle:active,.lightbox-close:active,.menu-button:active,.image-dialog button:active,.artifact button:active,.art-grid button:active,.project-cover:active,.button:hover{transform:none}
.about-model-card:hover{transform:rotate(-1.6deg)}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.nav-links.open a{transition-delay:0s}
}