/* Reference-led page choreography, 26 October 2026. Native scroll, no scroll hijack. */
.with-photo-hero .nav .signature { display:inline-flex; align-items:center; gap:.28em; font:400 14px/1.5 'LM Work Sans',Arial,sans-serif; letter-spacing:0; padding-block:12px; }
.nav .signature span { font:inherit; letter-spacing:inherit; vertical-align:baseline; margin:0; }
.signature-symbol { display:inline-block; transition:transform .7s cubic-bezier(.65,0,.35,1); }
.signature-window { display:block; overflow:hidden; width:var(--signature-rest-width,7em); transition:width .7s cubic-bezier(.65,0,.35,1); }
.signature-track { display:flex; white-space:nowrap; width:max-content; transition:transform .7s cubic-bezier(.65,0,.35,1); }
.signature-prefix { flex:0 0 auto; padding-right:.3em; }
.nav .signature .signature-surname { padding-left:.25em; }
.signature:is(:hover,:focus-visible) .signature-symbol { transform:rotate(360deg); }
.signature:is(:hover,:focus-visible) .signature-window { width:var(--signature-full-width,9em); }
.signature:is(:hover,:focus-visible) .signature-track { transform:translateX(calc(-1 * var(--signature-prefix-width,3.9em))); }

/* One-sided longitude strokes sweep across the sphere and change sides at
   its centre. Three phase offsets keep the rotation continuous. */
.location-globe { overflow:hidden; }
.globe-axis { display:grid; place-items:center; width:38px; height:38px; --globe-line:1.6px; }
.globe-sphere { position:relative; width:79.1667%; height:79.1667%; overflow:hidden; border-radius:50%; box-shadow:inset 0 0 0 var(--globe-line) currentColor; animation:globe-rock 5.4s cubic-bezier(.35,0,.65,1) -1.8s infinite; }
.globe-sphere>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.globe-meridian { width:100%; height:100%; border-radius:50%; animation:meridian-turn 2.7s linear infinite; }
.globe-meridian:nth-child(1) { animation-delay:-1.8s; }
.globe-meridian:nth-child(2) { animation-delay:-.9s; }
.globe-latitude { width:150%; height:55%; border-radius:50%; box-shadow:inset 0 0 0 calc(var(--globe-line) * .9) currentColor; }
.globe-equator { width:150%; height:calc(var(--globe-line) * .9); background:currentColor; }
@keyframes globe-rock { 0%,100% { transform:rotate(15deg); } 50% { transform:rotate(-15deg); } }
@keyframes meridian-turn {
 0% { width:100%; border-radius:50%; background:transparent; box-shadow:inset calc(var(--globe-line) * .6) 0 0 calc(var(--globe-line) * .48) currentColor; }
 49% { border-radius:50%; background:transparent; box-shadow:inset calc(var(--globe-line) * .6) 0 0 calc(var(--globe-line) * .48) currentColor; }
 50% { width:calc(var(--globe-line) * 1.05); border-radius:0; background:currentColor; }
 51% { border-radius:50%; background:transparent; box-shadow:inset calc(var(--globe-line) * -.6) 0 0 calc(var(--globe-line) * .48) currentColor; }
 100% { width:100%; border-radius:50%; background:transparent; box-shadow:inset calc(var(--globe-line) * -.6) 0 0 calc(var(--globe-line) * .48) currentColor; }
}
.photo-hero .hero-location,.photo-hero .hero-introduction { translate:0 var(--hero-copy-y,0px); }
.photo-hero .portrait.has-portrait { translate:0 var(--hero-photo-y,0px); }
.with-photo-hero .about { padding-top:115px; padding-bottom:110px; border:0; }
.with-photo-hero .selected { padding-block:24px; scroll-margin-top:16px; }

/* Surface and lettering respond independently to the pointer. */
.magnet-label { display:flex; align-items:center; flex-direction:column; gap:10px; translate:var(--label-x,0px) var(--label-y,0px); transition:translate .65s cubic-bezier(.22,1,.36,1); }
.magnet-label>span { font-size:22px; }
.contact-circle>.magnet-label { font-size:14px; }
.flow-button::before { inset:-50% -25%; border-radius:50%; transform:translateY(100%); transition:transform .65s cubic-bezier(.22,1,.36,1); }
.flow-button:is(:hover,:focus-visible)::before { transform:translateY(0); border-radius:50%; }

/* The previous surface curves down over the dark footer, then flattens. */
.footer { margin-top:0; padding-top:130px; }
.footer::before { top:-1px; bottom:auto; z-index:2; height:110px; background:var(--bg); border-radius:0 0 50% 50% / 0 0 100% 100%; transform-origin:top; }
.footer .contact-circle { overflow:hidden; }

/* Projects occupy the viewport as pages; no rounded panel, scrim or row morph. */
#viewer.project-page { position:fixed; inset:0; z-index:100; padding:0; background:#eeefec; backdrop-filter:none; display:block; }
#viewer.project-page[hidden] { display:none; }
#project-window { width:100%; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none; background:#eeefec; color:#1d211b; opacity:1; visibility:visible; display:block; }
#project-window .viewer-bar { position:absolute; z-index:4; top:0; left:0; width:100%; min-height:88px; padding:20px clamp(24px,4vw,64px); border:0; background:linear-gradient(#eeefec 10%,#eeefecf0 65%,#eeefec00); pointer-events:none; }
#project-window .viewer-bar>* { pointer-events:auto; }
#viewer.is-scrolled .viewer-bar { background:none; }
#viewer.is-scrolled #viewer-label { opacity:0; pointer-events:none; }
#project-window .viewer-bar #close { background:#eeefec; }
#project-scroll { --project-gutter:clamp(24px,8vw,140px); height:100%; max-height:none; overflow-y:auto; overflow-x:clip; padding:150px var(--project-gutter) 0; scroll-behavior:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#project-scroll .project-intro { display:block; max-width:1050px; margin:0 auto; padding:0 0 100px; }
#project-title { overflow:hidden; font:400 clamp(52px,7.5vw,112px)/1.08 'Helvetica Neue',Arial,sans-serif; letter-spacing:-.05em; margin:0 0 70px; }
.project-metadata { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,5vw,72px); margin:0; }
.project-metadata dt { padding-bottom:20px; border-bottom:1px solid #cccec7; text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:#6c7266; }
.project-metadata dd { margin:24px 0 0; font-size:15px; line-height:1.6; }
.project-note { margin-top:30px; font-size:12px; color:#5f655a; max-width:680px; }
.project-note summary { cursor:pointer; width:fit-content; padding-block:8px; }
.project-note p { line-height:1.7; margin:12px 0 0; }
.project-lead { position:relative; margin:0 0 130px; padding-top:20px; }
.project-lead-image { width:min(100%,calc(85svh * var(--lead-ratio,1.6))); margin-inline:auto; }
.project-lead .lead-artwork { width:100%; max-width:none; margin:0; translate:none; animation:none; }
.project-lead .media-slot { max-height:85svh; background:transparent; }
.project-lead .id-mark-hero { min-height:480px; padding:50px; }
.project-lead .id-mark-hero img { width:min(750px,85%); }
.project-lead .lead-artwork { clip-path:inset(var(--lead-clip,0%) 0 0); }
.project-lead-orbit { position:absolute; z-index:2; top:-65px; right:6%; translate:0 var(--lead-button-y,0px); }
.project-artwork-link { width:160px; height:160px; }
.lead-extracted .gallery:has(>.work-frame:only-child)>.work-frame { grid-column:1/-1; width:min(100%,1100px); margin-inline:auto; }
.scroll-choreography :is(.gallery .work-frame,.id-detail,.id-character) { translate:0 var(--media-offset,0px); }
.scroll-choreography .gallery .work-frame { margin-top:0; }
#project-scroll .packaging-range .work-frame.narrow { grid-column:span 5; grid-row:auto; max-width:none; }
#project-scroll .packaging-range .work-frame.wide { grid-column:span 7; grid-row:auto; }
#project-scroll .lead-extracted .packaging-range .work-frame:only-child { grid-column:1/-1; }
#project-scroll .lead-extracted .packaging-range .work-frame.narrow:only-child { width:min(480px,100%); }
#project-scroll .lead-extracted .social-series .work-frame { grid-column:span 6; grid-row:auto; }
#project-scroll .project-group { margin-bottom:150px; }
#project-scroll .group-description { max-width:720px; font-size:13px; line-height:1.65; }
#project-scroll .project-disclaimer { padding:40px 0 80px; max-width:760px; }

/* One fixed title curtain covers opening, next-project and All work navigation. */
.project-wipe { position:fixed; inset:0; z-index:1000; pointer-events:auto; }
.project-wipe-label { font-size:clamp(32px,5.5vw,70px); letter-spacing:-.04em; }
.project-wipe-label::before { width:10px; height:10px; }

/* Scroll-revealed onward navigation, with a pointer-following Next case label. */
#project-scroll .project-navigation { position:relative; display:flex; margin:0 calc(-1 * var(--project-gutter)); padding:160px var(--project-gutter) 90px; min-height:740px; background:#1c1f19; }
.project-navigation::before { top:-1px; bottom:auto; z-index:2; height:110px; background:#eeefec; border-radius:0 0 50% 50% / 0 0 100% 100%; transform-origin:top; }
.next-project { position:relative; translate:0 var(--ending-y,0px); padding-bottom:0; }
.next-project-title { overflow:hidden; margin:35px 0 50px; font-size:clamp(46px,6vw,90px); padding-bottom:.08em; }
.next-title-text { display:flex; align-items:center; justify-content:center; gap:24px; translate:0 var(--next-title-y,0%); }
.next-project-preview { width:min(420px,65%); height:240px; padding:24px; translate:0 var(--next-image-y,0px); }
.next-case-cursor { position:absolute; z-index:2; top:var(--case-y,50%); left:var(--case-x,50%); width:105px; height:105px; display:grid; place-items:center; border-radius:50%; color:var(--bg); background:var(--lime); font-size:13px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .2s,transform .4s var(--editorial-ease); }
.project-navigation .all-work-button { margin-top:60px; }
@media(hover:hover) and (pointer:fine) {
 .next-project:hover .next-case-cursor { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@media(max-width:700px) {
 .with-photo-hero .nav .signature { font-size:11px; }
 .with-photo-hero .nav nav { gap:14px; font-size:10px; }
 .globe-axis { width:26px; height:26px; --globe-line:1.2px; }
 .with-photo-hero .about { padding-block:64px; }
 .with-photo-hero .selected { padding-block:20px; scroll-margin-top:12px; }
 .footer { padding-top:80px; }
 .footer::before,.project-navigation::before { height:60px; }
 #project-window .viewer-bar { min-height:76px; padding:12px 20px; }
 #project-scroll { --project-gutter:20px; padding-top:120px; }
 #project-scroll .project-intro { padding-bottom:90px; }
 #project-title { font-size:clamp(44px,10.7vw,74px); margin-bottom:42px; }
 .project-metadata { gap:18px; grid-template-columns:1fr 1fr; }
 .project-metadata>div:last-child { grid-column:1/-1; }
 .project-metadata dt { padding-bottom:12px; font-size:8px; }
 .project-metadata dd { margin-top:14px; font-size:12px; }
 .project-note { margin-top:20px; }
 .project-lead { margin-bottom:65px; }
 .project-lead-orbit { top:-44px; right:4%; }
 .project-artwork-link { width:110px; height:110px; }
 .project-artwork-link>.magnet-label { font-size:11px; gap:5px; }
 .project-lead .id-mark-hero { min-height:300px; padding:30px 20px; }
 #project-scroll .project-group { margin-bottom:85px; }
 #project-scroll .packaging-range .work-frame.narrow,#project-scroll .packaging-range .work-frame.wide,#project-scroll .lead-extracted .social-series .work-frame { grid-column:1/-1; grid-row:auto; }
 #project-scroll .project-navigation { min-height:560px; padding:110px 20px 60px; }
 .next-project-title { font-size:clamp(34px,8vw,54px); margin-bottom:32px; }
 .next-title-text { gap:12px; }
 .next-project-preview { width:70%; height:180px; padding:16px; }
 .project-navigation .all-work-button { margin-top:42px; }
 .next-case-cursor { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .signature *,.magnet-label,.flow-button::before { transition:none!important; }
 .globe-sphere,.globe-meridian { animation:none; }
 .globe-sphere { transform:rotate(15deg); }
 .globe-meridian { width:42%; box-shadow:inset 0 0 0 var(--globe-line) currentColor; }
 .globe-meridian:nth-child(n+2) { display:none; }
 .photo-hero .hero-location,.photo-hero .hero-introduction,.photo-hero .portrait.has-portrait,.magnet-label,.scroll-choreography :is(.gallery .work-frame,.id-detail,.id-character),.project-lead-orbit,.next-project,.next-title-text,.next-project-preview { translate:none!important; }
 .project-lead .lead-artwork { clip-path:none; }
 .footer::before,.project-navigation::before { height:0; }
 .next-case-cursor { display:none; }
 #project-scroll { scroll-behavior:auto; }
}