/* A sense of place, from the work index to the last chapter. */
.back-to-top{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:45;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 4px 24px #00000012;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .4s var(--ease),visibility .25s;isolation:isolate}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.back-to-top>.ui-icon{width:21px;height:21px;transition:transform .3s var(--ease)}
.back-to-top .top-progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.top-progress-track{stroke:var(--line);stroke-width:1.3}
.top-progress-value{stroke:var(--project,var(--accent));stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--page-progress,0))}
.top-label{position:absolute;right:calc(100% + 10px);padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);white-space:nowrap;font-size:12px;opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.back-to-top:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.back-to-top:focus-visible .top-label{opacity:1;transform:none}
.case-compass{display:none}
html{scroll-padding-top:104px}
.case-page [data-case-section],.case-page .narrative-chapter{scroll-margin-top:0}
.case-sidebar .case-navigation a{position:relative;border-left:1px solid var(--line);padding-left:15px;transition:color .25s,border-color .25s}
.case-sidebar .case-navigation a.active{border-left-color:var(--project);font-weight:600}
.selected-work{position:relative;isolation:isolate;--work-glow:transparent}
.selected-work:before{content:"";position:absolute;z-index:-1;inset:-36px 0;pointer-events:none;background:var(--work-glow);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);transition:background 1.2s ease}
.selected-work[data-active-project=netflix]{--work-glow:color-mix(in srgb,#cf6b47 10%,transparent)}
.selected-work[data-active-project=google]{--work-glow:color-mix(in srgb,#668bd4 12%,transparent)}
.selected-work[data-active-project=linkedin]{--work-glow:color-mix(in srgb,#499daf 12%,transparent)}
.selected-work[data-active-project=apple]{--work-glow:color-mix(in srgb,#ad89ce 12%,transparent)}
.next-case.next-story{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,5vw,72px);overflow:hidden;padding:clamp(28px,4vw,64px);margin:64px auto 80px;border:1px solid color-mix(in srgb,var(--project) 12%,var(--line));border-radius:20px;isolation:isolate;background:var(--project-wash)}
.next-story:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 100%,color-mix(in srgb,var(--project) 15%,transparent),transparent 65%);opacity:.45;transition:opacity .6s}
.next-story .eyebrow{display:block;color:var(--project);margin:0 0 28px;font-size:11px;letter-spacing:.1em}
.next-story-bridge{font-size:clamp(16px,1.7vw,23px);line-height:1.45;color:var(--muted);max-width:23ch;margin:0 0 10px}
.next-case.next-story h2{font-size:clamp(44px,5.4vw,76px);letter-spacing:-.055em;line-height:1.06;margin:0 0 20px;color:var(--ink)}
.next-story-description{font-size:15px;line-height:1.65;color:var(--muted);max-width:34ch;margin:0 0 28px}
.next-story-action{font-size:13px;font-weight:600;display:inline-flex;gap:14px;align-items:center;color:var(--ink)}
.next-story-action>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--project) 32%,transparent);border-radius:50%;transition:background .3s,color .3s,transform .4s var(--ease)}
.next-story-action .ui-icon{width:18px;height:18px}
.next-case.next-story .next-story-preview{display:flex;align-items:center;width:100%;height:auto;min-width:0;background:none;padding:0;pointer-events:none;border-radius:0;transition:transform .8s var(--ease)}
.next-story-preview .project-visual{width:100%;aspect-ratio:1.4;padding:0;pointer-events:none}
.next-story-preview .device-slab{width:100%}
.next-story .play-preview{display:none!important}
.next-story:focus-visible{outline:2px solid var(--project);outline-offset:5px}
.next-story:focus-visible .next-story-action>span{background:var(--project);color:var(--paper)}
.personal-photo{overflow:visible}
.personal-route{display:flex;align-items:flex-start;gap:16px;margin-top:18px;color:var(--ink);font-size:13px;font-weight:600;line-height:1.4}
.personal-route>span:last-child{text-align:right}
.personal-route small{display:block;font-size:10px;font-weight:400;color:var(--muted);white-space:nowrap;margin-top:5px}
.personal-route .route-thread{position:relative;flex:1;height:1px;background:var(--line);margin-top:9px;min-width:18px}
.route-thread:before,.route-thread:after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.route-thread:before{left:0}.route-thread:after{right:0}
.route-thread i{display:block;width:100%;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 1.4s .35s var(--ease)}
.personal-photo.is-visible .route-thread i{transform:scaleX(1)}
.case-page:not(.leaving-case) .case-lead .project-visual>.device:first-child,.project-card.is-navigating .project-visual>.device:first-child,.next-story.is-navigating .project-visual>.device:first-child{view-transition-name:project-preview}
::view-transition-group(project-preview){animation-duration:.65s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(project-preview),::view-transition-new(project-preview){height:100%;object-fit:contain;animation-duration:.35s;mix-blend-mode:normal}
@media(hover:hover){
 .back-to-top:hover>.ui-icon{transform:translateY(-3px)}
 .back-to-top:hover .top-label{opacity:1;transform:none}
 .next-story:hover:before{opacity:1}
 .next-story:hover .next-story-preview{transform:translateY(-5px)}
 .next-story:hover .next-story-action>span{background:var(--project);color:var(--paper);transform:translate(2px,-2px)}
}
@media(min-width:761px){.next-case.next-story{width:calc(100% - var(--gutter)*2);max-width:1280px}}
@media(max-width:760px){
 html{scroll-padding-top:80px}
 .case-page .site-header{position:relative;top:auto}
 .case-page .case-sidebar{display:none}
 .case-page [data-case-section],.case-page .narrative-chapter{scroll-margin-top:0}
 .case-compass{position:fixed;display:block;inset:0 0 auto;z-index:55;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);opacity:0;visibility:hidden;transform:translateY(-100%);transition:transform .4s var(--ease),opacity .2s,visibility .2s}
 .case-compass.is-visible{opacity:1;visibility:visible;transform:none}
 .compass-row{display:flex;align-items:center;min-height:62px;padding:7px 18px 7px 10px;gap:8px}
 .compass-work{display:grid;place-items:center;width:40px;height:44px;flex:none;border-radius:8px;color:var(--ink)}
 .compass-work .ui-icon{width:18px;height:18px}
 .compass-work:active{background:var(--control-hover)}
 .compass-project{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:42%;margin-right:auto;font-size:10px;line-height:1.25;color:var(--muted)}
 .compass-project strong{font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .chapter-menu{min-width:0;max-width:48%}
 .chapter-menu summary{display:flex;align-items:center;gap:7px;min-height:44px;list-style:none;cursor:pointer;font-size:12px;color:var(--project);font-weight:600}
 .chapter-menu summary::-webkit-details-marker{display:none}
 .compass-chapter{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .chapter-menu summary>.ui-icon{width:15px;height:15px;flex:none;transition:transform .25s}
 .chapter-menu[open] summary>.ui-icon{transform:rotate(180deg)}
 .chapter-menu-panel{position:absolute;left:0;right:0;top:100%;padding:18px 24px 22px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 25px #0000000e;max-height:calc(75dvh - 65px);overflow:auto;overscroll-behavior:contain;animation:chapter-panel-in .2s var(--ease)}
 .chapter-menu-heading{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:10px}
 .chapter-menu-panel a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);line-height:1.4}
 .chapter-menu-panel a:last-child{border-bottom:0}
 .chapter-menu-panel a.active{color:var(--project);font-weight:600}
 .chapter-menu-marker{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;flex:none}
 .chapter-menu-panel a.active .chapter-menu-marker{opacity:1}
 .compass-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
 .compass-progress i{display:block;width:100%;height:100%;background:var(--project);transform:scaleX(var(--chapter-progress,0));transform-origin:left}
 .back-to-top{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:48px;height:48px}
 .top-label{display:none}
 .next-case.next-story{grid-template-columns:1fr;margin:32px 24px 48px;padding:28px 24px;gap:24px;border-radius:16px}
 .next-story .eyebrow{margin-bottom:20px;font-size:10px}
 .next-story-bridge{font-size:17px;max-width:none}
 .next-case.next-story h2{font-size:48px;margin-bottom:14px}
 .next-story-description{font-size:14px;max-width:34ch;margin-bottom:18px}
 .next-story-action{font-size:12px}
 .next-case.next-story .next-story-preview{display:flex}
 .next-story-preview .project-visual{aspect-ratio:auto;min-height:0}
 .next-story-preview .visual-linkedin{aspect-ratio:1.3}
 .personal-photo{width:100%;max-width:320px}
 .personal-route{font-size:12px}
}
@keyframes chapter-panel-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .back-to-top,.back-to-top>.ui-icon,.case-compass,.chapter-menu summary>.ui-icon,.selected-work:before,.next-story-preview,.next-story-action>span,.route-thread i{transition:none!important}
 .chapter-menu-panel{animation:none}
 .route-thread i{transform:scaleX(1)}
 ::view-transition-group(project-preview),::view-transition-old(project-preview),::view-transition-new(project-preview){animation:none!important}
}